01
Description du projet
JojGame est un site e-commerce dédié à la vente de jeux vidéo, développé en HTML5, CSS3 et JavaScript Vanilla sans framework. Le projet simule une boutique en ligne complète avec un catalogue de produits, un système de panier interactif et une interface responsive adaptée à tous les appareils.
Les produits sont affichés dynamiquement depuis un objet JavaScript simulant une source de données. Le panier est entièrement géré côté client : ajout et suppression d'articles, modification des quantités, calcul automatique du total et persistance via localStorage pour conserver le panier entre les sessions.
Ce projet illustre la capacité à construire une expérience utilisateur complète et fonctionnelle en JavaScript pur, sans dépendance externe — une compétence fondamentale avant d'aborder les frameworks.
02
Technologies utilisées
HTML5
CSS3
JavaScript ES6+
LocalStorage
DOM Manipulation
Responsive Design
GitHub
03
Fonctionnalités e-commerce
Catalogue dynamique
Affichage des jeux via génération dynamique du DOM depuis un tableau d'objets JS (titre, prix, image, genre).
Panier interactif
Ajout/suppression d'articles, modification des quantités, calcul du total en temps réel sans rechargement.
Persistance LocalStorage
Le panier est sauvegardé en localStorage — il est restauré automatiquement à chaque ouverture du site.
Filtrage par genre
Filtrage du catalogue par genre (FPS, RPG, Sport…) avec mise à jour instantanée de l'affichage.
Design responsive
Interface adaptée mobile/tablette/desktop via CSS Grid, Flexbox et media queries sans framework CSS.
UI soignée
Thème gaming cohérent, effets hover sur les cartes produits, transitions CSS et badges promotionnels.
04
Extrait de code — Gestion du panier
// cart.js — Logique panier avec persistance LocalStorage
let cart = JSON.parse(localStorage.getItem('jojgame_cart')) || [];
function addToCart(productId) {
const product = products.find(p => p.id === productId);
const existing = cart.find(item => item.id === productId);
if (existing) {
existing.quantity += 1; // Incrémente si déjà dans le panier
} else {
cart.push({ ...product, quantity: 1 }); // Sinon ajoute
}
saveCart();
renderCart();
}
function saveCart() {
localStorage.setItem('jojgame_cart', JSON.stringify(cart));
}
function getTotal() {
return cart.reduce((sum, item) => sum + item.price * item.quantity, 0).toFixed(2);
}
function renderCart() {
const cartContainer = document.getElementById('cart-items');
cartContainer.innerHTML = cart.map(item => `
<div class="cart-item">
<span>${item.name} × ${item.quantity}</span>
<span>${(item.price * item.quantity).toFixed(2)} €</span>
</div>
`).join('');
document.getElementById('cart-total').textContent = getTotal() + ' €';
}
05
Structure du site
01
index.html — Accueil
Hero banner, jeux mis en avant, accès au catalogue
02
catalogue.html — Produits
Catalogue complet avec filtres par genre et barre de recherche
03
panier.html — Panier
Récapitulatif des articles, quantités, total et validation commande
04
contact.html — Contact
Formulaire de contact avec validation HTML5 des champs
06
Compétences BTS SIO mobilisées
| Code | Compétence | Mise en œuvre dans le projet |
|---|---|---|
| B2.2 | Concevoir une solution applicative | Maquettage de l'interface e-commerce, modélisation des données produits, conception du flux utilisateur (catalogue → panier → validation). |
| B2.3 | Développer, documenter et déployer | Développement HTML/CSS/JS, génération dynamique du catalogue, gestion du panier avec LocalStorage, filtrage des produits. |
| B1.3 | Développer la présence en ligne | Design responsive optimisé, UX soignée, navigation intuitive, balisage HTML sémantique pour le référencement. |
| B2.4 | Travailler en mode projet | Versionnage avec Git/GitHub, organisation des fichiers par type (js/, css/, img/), documentation du projet. |
07
Résultats & apprentissages
Panier JS complet
Gestion complète d'un panier e-commerce : CRUD articles, calcul total, persistance LocalStorage entre sessions.
DOM dynamique
Génération et manipulation du DOM sans framework — compétence de base pour comprendre les frameworks modernes.
CSS Grid & Flexbox
Mise en page responsive complexe (grille produits, header sticky, sidebar panier) sans Bootstrap.
UX e-commerce
Compréhension du parcours utilisateur e-commerce, feedback visuels (badges, animations panier, confirmation).