From d2d1bc398758ff12cc5a804be24a1e63e7a69dc2 Mon Sep 17 00:00:00 2001
From: eytorsousa <eytorlima@outlook.com>
Date: Tue, 16 Apr 2024 00:38:27 -0300
Subject: [PATCH] mudando tudo para class

---
 assets/scripts/index.js | 26 ++++++++++-----------
 assets/styles/index.css | 50 ++++++++++++++++++-----------------------
 index.html              | 22 +++++++++---------
 3 files changed, 46 insertions(+), 52 deletions(-)

diff --git a/assets/scripts/index.js b/assets/scripts/index.js
index 93ae1e6..095eafa 100644
--- a/assets/scripts/index.js
+++ b/assets/scripts/index.js
@@ -1,17 +1,17 @@
-const max = document.getElementById("max");
-const resets = document.getElementById("resets");
-const button = document.getElementById("button");
-const number = document.getElementById("number");
+const max = document.querySelector(".max");
+const resets = document.querySelector(".resets");
+const button = document.querySelector(".button");
+const number = document.querySelector(".number");
 
 const audio = new Audio('assets/media/click.mp3');
 const audio2 = new Audio('assets/media/reset.mp3');
 
-const body = document.getElementById("body");
-const bg2 = document.getElementById("bg2");
-const bg1 = document.getElementById("bg1");
-const mode = document.getElementById("mode");
-const credits = document.getElementById("credits");
-const link = document.getElementById("link");
+const body = document.querySelector("body");
+const bg2 = document.querySelector(".bg2");
+const bg1 = document.querySelector(".bg1");
+const mode = document.querySelector(".mode");
+const credits = document.querySelector("#credits");
+const link = document.querySelector("#link");
 
 var click = 0, resetChance = 0, resetsValue = 0, maxValue = 0, flag = 0;
 var randomChance = Math.floor(Math.random() * 101);
@@ -174,9 +174,9 @@ mode.addEventListener("click", () => {
 });
 
 /* ---------------------------------------- Settings ----------------------------------------*/
-const settings = document.getElementById("settings");
-const back = document.getElementById("back");
-const menu = document.getElementById("menu");
+const settings = document.querySelector(".settings");
+const back = document.querySelector(".back");
+const menu = document.querySelector(".menu");
 const itens = document.getElementById("itens");
 const label = document.getElementById("label");
 const inputs = document.getElementById("inputs");
diff --git a/assets/styles/index.css b/assets/styles/index.css
index 4d1b2ce..41e230a 100644
--- a/assets/styles/index.css
+++ b/assets/styles/index.css
@@ -26,7 +26,7 @@ body {
     background: #252425;
 }
 
-#max, #resets {
+.max, .resets {
     width: fit-content;
     margin: 50px auto 0px auto;
     font-weight: 700;
@@ -34,7 +34,7 @@ body {
     transition: 150ms ease-in-out;
 }
 
-#resets {
+.resets {
     font-size: 38px;
     margin-top: 20px;
 }
@@ -43,7 +43,7 @@ body {
     color: #f5f3e4;
 }
 
-#all {
+.all {
     width: fit-content;
     margin: 0 auto;
     position: relative;
@@ -51,7 +51,7 @@ body {
     flex-direction: column;
 }
 
-#button {
+.button {
     background-color: #FF494B;
     border: none;
     border-radius: 100%;
@@ -64,7 +64,7 @@ body {
     transition: all 100ms ease-in-out;
 }
 
-#bg1 {
+.bg1 {
     width: 390px;
     height: 390px;
     border-radius: 100%;
@@ -76,7 +76,7 @@ body {
     transition: all 100ms ease-in-out;
 }
 
-.dark-bg2 {
+/* .dark-bg2 {
     width: 430px;
     height: 430px;
     border-radius: 100%;
@@ -86,9 +86,9 @@ body {
     position: absolute;
     z-index: -999;
     transition: all 250ms ease-in;
-}
+} */
 
-.light-bg2 {
+.bg2 {
     width: 430px;
     height: 430px;
     border-radius: 100%;
@@ -100,7 +100,7 @@ body {
     transition: all 250ms ease-in;
 }
 
-#button:hover {
+.button:hover {
     cursor: pointer;
 }
 
@@ -108,17 +108,17 @@ body {
     transform: translateY(25px);
 }
 
-#button:hover span{
+.button:hover span{
     color: rgba(0, 0, 0, 0.6);
 }
 
-#button:focus{
+.button:focus{
     outline: thin dotted;
     outline: 0px auto -webkit-focus-ring-color;
     outline-offset: 0px;
 }
 
-#button span {
+.button span {
     font-size: 90px;
     font-weight: 700;
     color: rgba(0, 0, 0, 0.45);
@@ -127,27 +127,24 @@ body {
     transition: 200ms ease-in;
 }
 
-#mode {
+.mode {
     border: none;
     position: fixed;
     width: 70px;
     height: 70px;
     left: 2%;
     top: 2%;
+    background: url('../media/moon.png');
     background-size: contain;
     background-repeat: no-repeat;
     transition: 120ms ease-in;
 }
 
-#mode:hover {
+.mode:hover {
     transform: scale(1.03);
     cursor: pointer;
 }
 
-.light-mode {
-    background: url('../media/moon.png');
-}
-
 .dark-mode {
     background: url('../media/sun.png');
 }
@@ -171,32 +168,29 @@ body {
     color: #c5c0ac;
 }
 
-#settings {
+.settings {
     position: fixed;
     right: 2%;
     border: none;
     top: 2%;
     width: 70px;
     height: 70px;
+    background: url('../media/light-settings.png');
     background-size: cover;
     background-repeat: no-repeat;
     transition: 200ms ease-in;
 }
 
-#settings:hover {
+.settings:hover {
     transform: scale(1.03);
     cursor: pointer;
 }
 
-.light-settings {
-    background: url('../media/light-settings.png');
-}
-
 .dark-settings {
     background: url('../media/dark-settings.png');
 }
 
-#menu {
+.menu {
     position: absolute;
     align-self: center;
     display: flex;
@@ -286,13 +280,13 @@ body {
     transform: scale(1.1);
 }
 
-#back {
+.back {
     font-size: 26px;
     font-weight: 700;
     transition: 150ms;
 }
 
-#back:hover {
+.back:hover {
     transform: scale(1.05);
     cursor: pointer;
 }
@@ -310,7 +304,7 @@ body {
         height: 300px;
     }
 
-    #bg1 {
+    .bg1 {
         margin: 100px auto 0px auto;
         width: 300px;
         height: 300px;
diff --git a/index.html b/index.html
index f543841..0025a3a 100644
--- a/index.html
+++ b/index.html
@@ -13,18 +13,18 @@
     <title>The Button</title>
 </head>
 <body id="body">
-    <h1 id="max">Max </h1>
-    <h3 id="resets">Resets </h3>   
-    <div id="all">
-        <button id="button">
-            <span id="number">0</span>
+    <h1 class="max">Max </h1>
+    <h3 class="resets">Resets </h3>   
+    <div class="all">
+        <button class="button">
+            <span class="number">0</span>
         </button>
-        <div id="bg1"></div>
-        <div id="bg2" class="light-bg2"></div>
+        <div class="bg1"></div>
+        <div class="bg2"></div>
     </div>
-    <button id="mode" class="light-mode"></button>
-    <button id="settings" class="light-settings"></button>
-    <div id="menu" class="closed">
+    <button class="mode"></button>
+    <button class="settings"></button>
+    <div class="menu closed">
         <div id="itens" class="light-itens">
             <div id="label" class="light-label">
                 Button Color
@@ -35,7 +35,7 @@ <h3 id="resets">Resets </h3>
                     <input type="radio" name="color" id="purple">Purple
                 </div>
             </div>
-            <span id="back" class="light-back">Back</span>
+            <span class="back" class="light-back">Back</span>
         </div>
     </div>
     <p id="credits">Remake feito por Eytor Lima | Créditos a Elendow, desenvolvedor do jogo original - <strong><a href="https://store.steampowered.com/app/1999740/THE_BUTTON_by_Elendow/" target="_blank" rel="license" id="link">The Button</a></strong>.</p>