WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>nana</title> </head> <body> <div class="bt"> <h1>calcule des moyenne</h1> <input type="number" class="qq" placeholder="devoir1" id="note1"> <br> <input type="number" placeholder="devoir2" class="qq" id="note2"> <h2 id="texte"></h2> <input type="number" placeholder="composition" class="cc" id="compo"> <h2 id="texte1"></h2> <input type="number" placeholder="Participation" class="qq" id="parti"> <h2 id="texte2"></h2> <h3 id="texte3"></h3> <button onclick="calcule()"> calcule</button> </div> </body> </html>
<style> .bt{ border: 2px solid black; width: 40%; background: black; display: block; margin: 200px auto; } @media (max-width: 600px){ .bt{ width: 80%; } } h1{ text-align: center; color: white; } h3{ font-family: ARIAL; text-align: center; color: white; } input{ width: 90%; display: block; margin: auto; padding: 4px; border: none; background: rgb(0, 0, 255); color: white; } h2{ text-align: center; color: wheat; } button{ padding: 4px 40px; display: block; margin: 10px auto; background: linear-gradient(45deg, red ,blue); border-radius: 20px; border: 3px solid red; box-shadow: 0 0 10px red ,0 0 20px red, 0 0 30px red; } h3{ border: 1px solid white; width: 100%; }
<script> function calcule() { let note1 = Number(document.getElementById("note1").value); let note2 = Number(document.getElementById("note2").value); let compo = Number(document.getElementById("compo").value); let parti = Number(document.getElementById("parti").value); let dev = note1 + note2 ; let dev1 = dev / 2; let note = dev1 * 0.35; let composition=compo* 0.60; let Participation= parti * 0.05; let tous = note + composition + Participation ; document.getElementById("texte3").innerHTML= tous; document.getElementById("texte2").innerHTML= Participation ; document.getElementById("texte").innerHTML=note; document.getElementById("texte1").innerHTML=composition; } </script>
Preview
Open Advanced Editor
Publish Code
Full Screen
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>nana</title> </head> <body> <div class="bt"> <h1>calcule des moyenne</h1> <input type="number" class="qq" placeholder="devoir1" id="note1"> <br> <input type="number" placeholder="devoir2" class="qq" id="note2"> <h2 id="texte"></h2> <input type="number" placeholder="composition" class="cc" id="compo"> <h2 id="texte1"></h2> <input type="number" placeholder="Participation" class="qq" id="parti"> <h2 id="texte2"></h2> <h3 id="texte3"></h3> <button onclick="calcule()"> calcule</button> </div> </body> </html>
<style> .bt{ border: 2px solid black; width: 40%; background: black; display: block; margin: 200px auto; } @media (max-width: 600px){ .bt{ width: 80%; } } h1{ text-align: center; color: white; } h3{ font-family: ARIAL; text-align: center; color: white; } input{ width: 90%; display: block; margin: auto; padding: 4px; border: none; background: rgb(0, 0, 255); color: white; } h2{ text-align: center; color: wheat; } button{ padding: 4px 40px; display: block; margin: 10px auto; background: linear-gradient(45deg, red ,blue); border-radius: 20px; border: 3px solid red; box-shadow: 0 0 10px red ,0 0 20px red, 0 0 30px red; } h3{ border: 1px solid white; width: 100%; }
<script> function calcule() { let note1 = Number(document.getElementById("note1").value); let note2 = Number(document.getElementById("note2").value); let compo = Number(document.getElementById("compo").value); let parti = Number(document.getElementById("parti").value); let dev = note1 + note2 ; let dev1 = dev / 2; let note = dev1 * 0.35; let composition=compo* 0.60; let Participation= parti * 0.05; let tous = note + composition + Participation ; document.getElementById("texte3").innerHTML= tous; document.getElementById("texte2").innerHTML= Participation ; document.getElementById("texte").innerHTML=note; document.getElementById("texte1").innerHTML=composition; } </script>
Preview
Validating your code, please wait...