ajout addition
This commit is contained in:
parent
cd0dafee69
commit
c943a59e96
43
content/addition.html
Normal file
43
content/addition.html
Normal 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>
|
||||
207
index.html
207
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&hashtags=bulmaio&url=https://bulma.io&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&hashtags=bulmaio&url=https://bulma.io&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">
|
||||
|
||||
@ -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;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user
