greg/website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ajout addition

Browse Source
This commit is contained in:
Grégory Lebreton 2025-05-15 10:22:26 +02:00
parent cd0dafee69
commit c943a59e96
3 changed files with 159 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
content/addition.html Normal file
View File

@ -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>

79
index.html
View File

@ -55,17 +55,17 @@
</div> </div>
</nav> </nav>
<br> <br>
<!-- HERO --> <!-- HERO -->
<section class="hero is-primary"> <section class="hero is-primary">
<div class="hero-body"> <div class="hero-body">
<p class="title">My SuperWebsite</p> <p class="title">My SuperWebsite</p>
<p class="subtitle">Made with HTML code!</p> <p class="subtitle">Made with HTML code!</p>
</div> </div>
</section> </section>
<div class="content"> <div class="content">
<h1>LES DEVELOPPEURS</h1> <h1>LES DEVELOPPEURS</h1>
<p>Voici la team</p> <p>Voici la team</p>
<!-- CARDS --> <!-- CARDS -->
@ -159,63 +159,58 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<hr>
<br><hr><br> <!-- JAVASCRIPT -->
<div class="has-text-centered"> <div class="has-text-centered">
<h1 style="text-decoration: underline;">JAVASCRIPT</h1><br> <h1 style="text-decoration: underline;">JAVASCRIPT</h1><br>
</div> </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 --> <!-- COMPTEUR -->
<div class="content has-text-centered"> <h3 class="has-text-centered">COMPTEUR</h3>
<div class="content has-text-centered contour">
<button id="incrementer">Incrémenter</button> <button id="incrementer">Incrémenter</button>
<p>Compteur : <span id="compteur">0</span></p> <p>Compteur : <span id="compteur">0</span></p>
</div> </div>
<!-- BOUTON DARK MODE -->
<div class="has-text-centered"> <div class="has-text-centered">
<h3>DARK MODE</h3> <h3>DARK MODE</h3>
</div> </div>
<div class="switch contour">
<!-- BOUTON DARK MODE -->
<div class="switch">
<input type="checkbox" id="switch" /><br> <input type="checkbox" id="switch" /><br>
<label for="switch"> <label for="switch">
<i class="fas fa-sun"></i> <i class="fas fa-sun"></i>
<i class="fas fa-moon"></i> <i class="fas fa-moon"></i>
<span class="ball"></span> <span class="ball"></span>
</label> </label>
</div> </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 -->
<footer class="footer"> <footer class="footer">

15
static/js/script.js
View File

@ -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;
}
});
});