diff options
| author | Martial Simon <msimon_fr@hotmail.com> | 2025-09-15 01:08:27 +0200 |
|---|---|---|
| committer | Martial Simon <msimon_fr@hotmail.com> | 2025-09-15 01:08:27 +0200 |
| commit | c9b6b9a5ca082fe7c1b6f58d7713f785a9eb6a5c (patch) | |
| tree | 3e4f42f93c7ae89a364e4d51fff6e5cec4e55fa9 /graphs/js/counter | |
add: graphs et rushs
Diffstat (limited to 'graphs/js/counter')
| -rw-r--r-- | graphs/js/counter/counter.js | 12 | ||||
| -rw-r--r-- | graphs/js/counter/index.html | 20 | ||||
| -rw-r--r-- | graphs/js/counter/style.css | 31 |
3 files changed, 63 insertions, 0 deletions
diff --git a/graphs/js/counter/counter.js b/graphs/js/counter/counter.js new file mode 100644 index 0000000..89198de --- /dev/null +++ b/graphs/js/counter/counter.js @@ -0,0 +1,12 @@ +const counter = document.getElementById("count"); +let counterVal = parseInt(counter.innerHTML); +const btnPlus = document.getElementById("plus"); +const btnMinus = document.getElementById("minus"); + +btnPlus.addEventListener("click", () => { + counter.innerHTML = ++counterVal; +}); + +btnMinus.addEventListener("click", () => { + counter.innerHTML = --counterVal; +}); diff --git a/graphs/js/counter/index.html b/graphs/js/counter/index.html new file mode 100644 index 0000000..d088aac --- /dev/null +++ b/graphs/js/counter/index.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href="style.css"> + <script defer src="counter.js"></script> + <title>My Super Counter</title> +</head> +<body> + <div class="container"> + <div id="count">0</div> + <div class="actions"> + <button id="plus">+</button> + <button id="minus">-</button> + </div> + </div> +</body> +</html> diff --git a/graphs/js/counter/style.css b/graphs/js/counter/style.css new file mode 100644 index 0000000..677acc2 --- /dev/null +++ b/graphs/js/counter/style.css @@ -0,0 +1,31 @@ +html, +body { + height: 100%; +} + +.container { + height: 100%; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} + +#count { + font-size: 20vh; +} + +.actions { + display: flex; + height: 10vh; +} + +.actions > button { + width: 10vw; + background-color: rgb(0, 132, 255); + font-size: 5vh; +} + +#plus { + margin-right: 20px; +} |