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>

203
index.html
View File

@ -10,66 +10,66 @@
<body> <body>
<!-- NAVBAR --> <!-- NAVBAR -->
<nav class="navbar is-transparent is-fixed-top"> <nav class="navbar is-transparent is-fixed-top">
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item" href="./index.html"> <a class="navbar-item" href="./index.html">
<img src="./static/img/batman.png"> <img src="./static/img/batman.png">
</a> </a>
<div class="navbar-burger js-burger" data-target="navbarExampleTransparentExample"> <div class="navbar-burger js-burger" data-target="navbarExampleTransparentExample">
<span></span> <span></span>
<span></span> <span></span>
<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> </div>
</div>
</div>
</nav>
<div id="navbarExampleTransparentExample" class="navbar-menu"> <br>
<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>
<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 -->
<div class="columns is-mobile is-multiline is-centered"> <div class="columns is-mobile is-multiline is-centered">
<!-- CARD 1 --> <!-- CARD 1 -->
<div class="column is-narrow"> <div class="column is-narrow">
<div class="card"> <div class="card">
@ -159,63 +159,58 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<hr>
<!-- JAVASCRIPT -->
<div class="has-text-centered">
<h1 style="text-decoration: underline;">JAVASCRIPT</h1><br>
</div> </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 --> <!-- COMPTEUR -->
<div class="content has-text-centered"> <h3 class="has-text-centered">COMPTEUR</h3>
<button id="incrementer">Incrémenter</button> <div class="content has-text-centered contour">
<p>Compteur : <span id="compteur">0</span></p> <button id="incrementer">Incrémenter</button>
</div> <p>Compteur : <span id="compteur">0</span></p>
</div>
<div class="has-text-centered">
<h3>DARK MODE</h3>
</div>
<!-- BOUTON DARK MODE --> <!-- BOUTON DARK MODE -->
<div class="switch"> <div class="has-text-centered">
<input type="checkbox" id="switch" /><br> <h3>DARK MODE</h3>
<label for="switch"> </div>
<i class="fas fa-sun"></i> <div class="switch contour">
<i class="fas fa-moon"></i> <input type="checkbox" id="switch" /><br>
<span class="ball"></span> <label for="switch">
</label> <i class="fas fa-sun"></i>
</div> <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 -->
<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;
}
});
});