Counter

HuXn-WebDev · HuXn-WebDev · commit 998a48584ea9 · 2022-07-11T01:28:40.000-07:00
diff --git a/33. Counter/app.js b/33. Counter/app.js
@@ -0,0 +1,18 @@
+let countEl = document.getElementById("count");
+let saveEl = document.getElementById("save");
+let incrementBtn = document.querySelector(".increment-btn");
+let saveBtn = document.querySelector(".save-btn");
+
+let count = 0;
+
+incrementBtn.addEventListener("click", () => {
+  count += 1;
+  countEl.textContent = count;
+});
+
+saveBtn.addEventListener("click", () => {
+  let countStr = count + ", ";
+  saveEl.textContent += countStr;
+  countEl.textContent = 0;
+  count = 0;
+});
diff --git a/33. Counter/index.html b/33. Counter/index.html
@@ -0,0 +1,25 @@
+<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>Counter</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <main class="content">
+      <div class="counter">
+        <div class="counter-box" id="count">0</div>
+        <button class="increment-btn button">INCREMENT</button>
+        <button class="save-btn button">SAVE</button>
+      </div>
+
+      <div class="entries">
+        <p>SAVE / ENTRIES</p>
+        <div class="entries-field" id="save"></div>
+      </div>
+    </main>
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/33. Counter/style.css b/33. Counter/style.css
@@ -0,0 +1,79 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+button {
+  border: none;
+  outline: none;
+}
+
+body {
+  font-family: sans-serif;
+  background-color: black;
+}
+
+.content {
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 0 10rem;
+}
+
+.counter {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 1rem;
+}
+
+.counter-box {
+  width: 100%;
+  height: 160px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  font-size: 100px;
+  font-weight: 600;
+  background-color: rgba(43, 42, 42, 0.959);
+  border-radius: 8px;
+}
+
+.button {
+  width: 80%;
+  max-width: 350px;
+  height: 3em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  font-size: 20px;
+  font-weight: 400;
+  border-radius: 8px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.increment-btn {
+  margin: 2em 0 1em 0;
+  background-color: rgb(26, 26, 184);
+  font-weight: bold;
+}
+
+.save-btn {
+  background-color: #00da7f;
+  font-weight: bold;
+}
+
+.entries p {
+  margin: 2.5rem 0 1em 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #fff;
+}
+
+.entries-field {
+  font-size: 20px;
+  color: #fff;
+}
