From c943a59e96da5280b62244cddb10a5bf19e22732 Mon Sep 17 00:00:00 2001
From: greg <greg.lebreton@hotmail.com>
Date: Thu, 15 May 2025 10:22:26 +0200
Subject: [PATCH] ajout addition

---
 content/addition.html |  43 +++++++++
 index.html            | 207 +++++++++++++++++++++---------------------
 static/js/script.js   |  15 +++
 3 files changed, 159 insertions(+), 106 deletions(-)
 create mode 100644 content/addition.html
diff --git a/content/addition.html b/content/addition.html
new file mode 100644
index 0000000..35ce02f
--- /dev/null
+++ b/content/addition.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Additionneur avec Bulma</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
+</head>
+<body>
+  <section class="section">
+    <div class="container">
+      <h1 class="title has-text-centered">Addition de deux chiffres</h1>
+
+      <div class="box">
+        <div class="field">
+          <label class="label">Chiffre 1</label>
+          <div class="control">
+            <input class="input" type="number" id="chiffre1" placeholder="Entrez le premier chiffre">
+          </div>
+        </div>
+
+        <div class="field">
+          <label class="label">Chiffre 2</label>
+          <div class="control">
+            <input class="input" type="number" id="chiffre2" placeholder="Entrez le deuxième chiffre">
+          </div>
+        </div>
+
+        <div class="field is-grouped is-justify-content-center">
+          <div class="control">
+            <button class="button is-primary" onclick="additionner()">Additionner</button>
+          </div>
+        </div>
+
+        <div class="notification is-info has-text-centered mt-4" id="resultBox" style="display: none;">
+          Résultat : <strong><span id="resultat">--</span></strong>
+        </div>
+      </div>
+    </div>
+  </section>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 2b2bf49..4945e9b 100644
--- a/index.html
+++ b/index.html
@@ -10,66 +10,66 @@
   <body>
 
 <!-- NAVBAR -->
-        <nav class="navbar is-transparent is-fixed-top">
-            <div class="navbar-brand">
-              <a class="navbar-item" href="./index.html">
-                <img src="./static/img/batman.png">
-              </a>
-              <div class="navbar-burger js-burger" data-target="navbarExampleTransparentExample">
-                <span></span>
-                <span></span>
-                <span></span>
-                <span></span>
+    <nav class="navbar is-transparent is-fixed-top">
+        <div class="navbar-brand">
+          <a class="navbar-item" href="./index.html">
+            <img src="./static/img/batman.png">
+          </a>
+          <div class="navbar-burger js-burger" data-target="navbarExampleTransparentExample">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+          </div>
+        </div>
+      
+        <div id="navbarExampleTransparentExample" class="navbar-menu">
+          <div class="navbar-start">
+            <a class="navbar-item" href="./index.html"> Home </a>
+            <a class="navbar-item" href="./content/contact.html"> Contact </a>
+            <a class="navbar-item" href="./content/produits.html"> Produits </a>
+            </div>
+          </div>
+      
+          <div class="navbar-end">
+            <div class="navbar-item">
+              <div class="field is-grouped">
+                <p class="control">
+                  <a
+                    class="bd-tw-button button"
+                    data-social-network="Github"
+                    data-social-action="Gitlab"
+                    data-social-target="https://bulma.io"
+                    target="_blank"
+                    href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=https://bulma.io&amp;via=jgthms"
+                  >
+                    <span class="icon">
+                      <i class="fab fa-twitter"></i>
+                    </span>
+                    <span> Tweet </span>
+                  </a>
+                </p>
               </div>
             </div>
-          
-            <div id="navbarExampleTransparentExample" class="navbar-menu">
-              <div class="navbar-start">
-                <a class="navbar-item" href="./index.html"> Home </a>
-                <a class="navbar-item" href="./content/contact.html"> Contact </a>
-                <a class="navbar-item" href="./content/produits.html"> Produits </a>
-                </div>
-              </div>
-          
-              <div class="navbar-end">
-                <div class="navbar-item">
-                  <div class="field is-grouped">
-                    <p class="control">
-                      <a
-                        class="bd-tw-button button"
-                        data-social-network="Github"
-                        data-social-action="Gitlab"
-                        data-social-target="https://bulma.io"
-                        target="_blank"
-                        href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=https://bulma.io&amp;via=jgthms"
-                      >
-                        <span class="icon">
-                          <i class="fab fa-twitter"></i>
-                        </span>
-                        <span> Tweet </span>
-                      </a>
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </nav>
+          </div>
+        </div>
+      </nav>
 
-<br>
+    <br>
 
 <!-- HERO -->
-<section class="hero is-primary">
-    <div class="hero-body">
-      <p class="title">My SuperWebsite</p>
-      <p class="subtitle">Made with HTML code!</p>
-    </div>
-</section>
+    <section class="hero is-primary">
+        <div class="hero-body">
+          <p class="title">My SuperWebsite</p>
+          <p class="subtitle">Made with HTML code!</p>
+        </div>
+    </section>
 
-<div class="content">
-  <h1>LES DEVELOPPEURS</h1>
-    <p>Voici la team</p>
+    <div class="content">
+      <h1>LES DEVELOPPEURS</h1>
+        <p>Voici la team</p>
 <!-- CARDS -->
-    <div class="columns is-mobile is-multiline is-centered">
+      <div class="columns is-mobile is-multiline is-centered">
 <!-- CARD 1 -->
         <div class="column is-narrow"> 
             <div class="card">
@@ -158,64 +158,59 @@
               </div>
             </div>
           </div>
-        </div>
-                
+        </div>                
+    </div>
+  <hr>
+
+<!-- JAVASCRIPT -->
+    <div class="has-text-centered">
+      <h1 style="text-decoration: underline;">JAVASCRIPT</h1><br>
     </div>
 
-<br><hr><br>
-
-  <div class="has-text-centered">
-    <h1 style="text-decoration: underline;">JAVASCRIPT</h1><br>
-  </div>
-
-  <div class="has-text-centered">
-    <h3>CAROUSSEL</h3>
-  </div>
-
-<!-- CAROUSSEL -->
-<div class="carousel">
-  <div class="carousel-track">
-    <div class="carousel-slide"><img src="./static/img/1.jpg" alt="1"></div>
-    <div class="carousel-slide"><img src="./static/img/2.jpg" alt="2"></div>
-    <div class="carousel-slide"><img src="./static/img/3.jpg" alt="3"></div>
-  </div>
-</div><br>
-
-<div class="has-text-centered">
-  <h3>TRICKY BOUTON</h3>
-</div>
-
-<!-- BOUTON -->
- <div class="has-text-centered">
-  <div class="button-area">
-    <button id="trickyButton">Click me!</button>
-  </div>
- </div>
-  <br>
-
-  <div class="has-text-centered">
-    <h3>COMPTEUR</h3>
-  </div>
-
 <!-- COMPTEUR -->
- <div class="content has-text-centered">
-  <button id="incrementer">Incrémenter</button>
-  <p>Compteur : <span id="compteur">0</span></p>
- </div>
-
- <div class="has-text-centered">
-  <h3>DARK MODE</h3>
-</div>
+    <h3 class="has-text-centered">COMPTEUR</h3>
+    <div class="content has-text-centered contour">
+      <button id="incrementer">Incrémenter</button>
+      <p>Compteur : <span id="compteur">0</span></p>
+    </div>
 
 <!-- BOUTON DARK MODE -->
-<div class="switch">
-  <input type="checkbox" id="switch" /><br>
-  <label for="switch">
-      <i class="fas fa-sun"></i>
-      <i class="fas fa-moon"></i>
-      <span class="ball"></span>
-  </label>
-</div>
+    <div class="has-text-centered">
+      <h3>DARK MODE</h3>
+    </div>
+    <div class="switch contour">
+      <input type="checkbox" id="switch" /><br>
+      <label for="switch">
+          <i class="fas fa-sun"></i>
+          <i class="fas fa-moon"></i>
+          <span class="ball"></span>
+      </label>
+    </div>
+    <br>
+
+<!-- CAROUSSEL -->
+    <div class="has-text-centered">
+      <h3>CAROUSSEL</h3>
+    </div>
+    <div class="carousel">
+      <div class="carousel-track">
+        <div class="carousel-slide"><img src="./static/img/1.jpg" alt="1"></div>
+        <div class="carousel-slide"><img src="./static/img/2.jpg" alt="2"></div>
+        <div class="carousel-slide"><img src="./static/img/3.jpg" alt="3"></div>
+      </div>
+    </div>
+    <br>
+
+<!-- TRICKY BOUTON -->
+    <div class="has-text-centered">
+      <div>
+        <h3>TRICKY BOUTON</h3>
+      </div>
+      <div class="button-area">
+        <button id="trickyButton">Click me!</button>
+      </div>
+    </div>
+    <br>
 
 <!-- FOOTER -->
     <footer class="footer">
diff --git a/static/js/script.js b/static/js/script.js
index 8b1871a..ab0d6b9 100644
--- a/static/js/script.js
+++ b/static/js/script.js
@@ -49,3 +49,18 @@ document.getElementById("incrementer").addEventListener("click", () => {
   });
 });
 
+// ADDITION
+document.addEventListener("DOMContentLoaded", function () {
+  document.getElementById("additionner").addEventListener("click", () => {
+    const a = parseFloat(document.getElementById('chiffre1').value);
+    const b = parseFloat(document.getElementById('chiffre2').value);
+
+    if (isNaN(a) || isNaN(b)) {
+      document.getElementById('resultat').textContent = "Entrée invalide";
+    } else {
+      const somme = a + b;
+      document.getElementById('resultat').textContent = somme;
+    }
+  });
+});
+
