add simple counter

sandra-laguna · sandra-laguna · commit 62eb4a1e4ba8 · 2022-10-06T18:38:39.000+02:00
diff --git a/SimpleCounter/index.html b/SimpleCounter/index.html
@@ -0,0 +1,24 @@
+<!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" />
+    <title>Simple Counter</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <main>
+      <h1>Simple Counter</h1>
+
+      <div class="counter">
+        <button onclick="decrement()" class="btn">-</button>
+        <input type="text" readonly="readonly" id="value" value="0" />
+        <button onclick="increment()" class="btn">+</button>
+      </div>
+
+      <button onclick="reset()" class="btn-reset">Reset</button>
+    </main>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/SimpleCounter/index.js b/SimpleCounter/index.js
@@ -0,0 +1,13 @@
+var number = document.getElementById("value");
+
+function increment() {
+  number.value++;
+}
+
+function decrement() {
+  number.value--;
+}
+
+function reset() {
+  number.value = 0;
+}
diff --git a/SimpleCounter/style.css b/SimpleCounter/style.css
@@ -0,0 +1,64 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+
+body {
+  display: flex;
+  justify-content: center;
+  font-family: "Roboto", sans-serif;
+  background-color: #4158d0;
+  background-image: linear-gradient(
+    43deg,
+    #4158d0 0%,
+    #c850c0 46%,
+    #ffcc70 100%
+  );
+  height: 100vh;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 400px;
+  height: 200px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(0px);
+  -webkit-backdrop-filter: blur(0px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+h1 {
+  margin: 10px 0;
+}
+
+.btn-reset {
+  margin-top: 20px;
+  padding: 10px 20px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 5px;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(0px);
+  -webkit-backdrop-filter: blur(0px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.btn,
+input {
+  padding: 5px 10px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 5px;
+  backdrop-filter: blur(0px);
+  -webkit-backdrop-filter: blur(0px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+input {
+  width: 100px;
+}
+
+.btn-reset:hover,
+.btn:hover {
+  cursor: pointer;
+}
