JavaScript : Projets Pratiques
Mettez en pratique vos compétences front-end et back-end.
Projet 1 : Compteur Interactif avec Changement de Thème
Manipulez le DOM pour créer un bouton qui incrémente un chiffre et un autre qui change la couleur de fond.
const btn = document.querySelector('#increment');
let count = 0;
btn.addEventListener('click', () => {
count++;
document.querySelector('#valeur').textContent = count;
});Projet 2 : Calculatrice Moderne
Créez une calculatrice fonctionnelle avec les opérations de base et un affichage dynamique.
function calculer(op) {
const v1 = parseFloat(document.querySelector('#v1').value);
const v2 = parseFloat(document.querySelector('#v2').value);
let resultat = 0;
if (op === '+') {
resultat = v1 + v2;
}
if (op === '-') {
resultat = v1 - v2;
}
document.querySelector('#resultat').textContent = resultat;
}Projet 3 : Application Météo (Fetch API)
Récupérez les données d'une API météo réelle et affichez-les dynamiquement sur votre page.
async function getMeteo(ville) {
const response = await fetch(`api_url?q=${ville}`);
const data = await response.json();
// Affichez data.temp...
}Projet 4 : Système de Routage SPA (Single Page App)
Créez un routeur personnalisé en JavaScript pur utilisant l'API History pour naviguer sans recharger la page.
globalThis.addEventListener('popstate', handleRoute);
function navigateTo(url) {
globalThis.history.pushState(null, null, url);
handleRoute();
}