Basketball-Scoreboard

Il s’agit d’un exercice de JavaScript sur Scrimba.

l’objectif de ce projet

  • connaître DOM;
  • pratiquer variable, fuction, textContent, String & Integer in JavaScript;
  • réviser HTML5 & CSS3 (flexbox);

Temps de réalisation

  • environ 3H

Difficultés

Il n’y a pas de point bloquant en particulier, malgré les buttons +1, +2 et +3 de deux équipes partagent les mêmes logiques de calcul, les notes doivent être stockés séparément, donc il y a bien 6 fonctions à créer.

Update 04/11/2022 : on peut DRY up le code grâce à Event Delegation!

Résumé

cet exercice permet de développer la mémoire musculaire pour créer des fonctions avec des connaissances de base en JavaScript.

Basketball Scoreboard état vide
Basketball Scoreboard état vide
Basketball Scoreboard état en cours
Basketball Scoreboard état en cours

Le design se trouve sur Figma.

Ma solution se trouve sur Codepen:

See the Pen Basketball-Scoreboard by huan (@kidztse) on CodePen.

Elle est crée à partir de HTML & CSS partagé sur Scrimba:

initial HTML & CSS status
initial HTML & CSS status
  • HTML initial:
<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="container">
            <div>
                <h3>HOME</h3>
            </div>
            <div>
                <h3>GUEST</h3>
            </div>
        </div>
        <script src="index.js"></script>
    </body>
</html>
  • CSS initial:
body {
    margin: 0;
}

.container {
    display: flex;
    justify-content: space-around;
}