comenta y comenta

css/cronometro.css

@@ -121,41 +121,6 @@ header a{
     color: white;
 }
 
-/* estilos para telas grandes */
-
-/* media query para telas médias (tablets, etc.) */
-@media (max-width: 1024px) {
-    .containerCronometro {
-        width: 90%; /* reduzindo um pouco a largura para telas médias */
-    }
-
-    .tempoCronometro {
-        font-size: 1.5rem; /* reduzindo o tamanho da fonte para telas médias */
-    }
-}
-
-/* media query para telas pequenas (smartphones, etc.) */
-@media (max-width: 768px) {
-    .containerCronometro {
-        width: 95%; /* reduzindo ainda mais a largura para telas pequenas */
-        height: 40vh; /* reduzindo a altura para telas pequenas */
-    }
-
-    .tempoCronometro {
-        margin-top: 28%;
-        font-size: 2rem; /* reduzindo ainda mais o tamanho da fonte para telas pequenas */
-    }
-
-    /* ajustes adicionais para os botões */
-    .start-btn,
-    .pause-btn,
-    .stop-btn {
-        padding: 0.7rem 1.1rem; /* ajustando para tamanhos de tela ainda menores */
-        font-size: 1.5rem; /* ajustando para tamanhos de tela ainda menores */
-    }
-}
-
-
 /*---=footer do site=---*/
 footer{
     min-height: 50px;
@@ -194,3 +159,48 @@ footer{
     color: black;
     text-decoration: underline;
 }
+
+/* estilos para telas grandes */
+
+/* media query para telas médias (tablets, etc.) */
+@media (max-width: 1024px) {
+    .containerCronometro {
+        width: 90%; /* reduzindo um pouco a largura para telas médias */
+    }
+
+    .tempoCronometro {
+        font-size: 1.5rem; /* reduzindo o tamanho da fonte para telas médias */
+    }
+    header{
+        height: 10%;
+    }
+    footer{
+        height: 10%;
+        flex-direction: column;
+        justify-content: space-evenly;
+    }
+    .repositorio{
+        position: relative;
+    }
+}
+
+/* media query para telas pequenas (smartphones, etc.) */
+@media (max-width: 768px) {
+    .containerCronometro {
+        width: 95%; /* reduzindo ainda mais a largura para telas pequenas */
+        height: 40vh; /* reduzindo a altura para telas pequenas */
+    }
+
+    .tempoCronometro {
+        margin-top: 28%;
+        font-size: 2rem; /* reduzindo ainda mais o tamanho da fonte para telas pequenas */
+    }
+
+    /* ajustes adicionais para os botões */
+    .start-btn,
+    .pause-btn,
+    .stop-btn {
+        padding: 0.7rem 1.1rem; /* ajustando para tamanhos de tela ainda menores */
+        font-size: 1.5rem; /* ajustando para tamanhos de tela ainda menores */
+    }
+}

html/cronometro.html

@@ -20,7 +20,6 @@
         </nav>
     </header>
 
-    <main>
         <div class="tituloCima">
             <h1>CRONÔMETRO:</h1> <!-- título  --> 
         </div>
@@ -39,7 +38,7 @@ <h1 id="time">00:00:00</h1> <!-- tempo inicial do cronômetro  -->
                 </section>
             </div>
         </section>
-    </main>
+        
 
     <footer> <!-- footer padrão para todas as páginas --> 
         <div class="repositorio">

js/cronometro.js

@@ -1,20 +1,20 @@
 /*-----===VARIÁVEIS===-----*/
-const startBtn = document.querySelector(".start-btn");
-const pauseBtn = document.querySelector(".pause-btn");
-const stopBtn = document.querySelector(".stop-btn");
+const startBtn = document.querySelector(".start-btn"); //variável do botão de start
+const pauseBtn = document.querySelector(".pause-btn"); //variável do botão de pause
+const stopBtn = document.querySelector(".stop-btn"); // variável do botão de stop
 
-var seconds = 0o0;
-var minutes = 0o0;
-var hours = 0o0;
-var interval;
+var seconds = 0o0; //variável para os segundos
+var minutes = 0o0; //variável para os minutos
+var hours = 0o0; //variável para as horas
+var interval; // variável para o intervalo de temppo
 
 /*---=EventListener=---*/
-startBtn.addEventListener("click", start);
-pauseBtn.addEventListener("click", pause);
-stopBtn.addEventListener("click", toStop);
+startBtn.addEventListener("click", start); //quando ele clicar no botão ativará a função
+pauseBtn.addEventListener("click", pause); //quando ele clicar no botão ativará a função
+stopBtn.addEventListener("click", toStop); //quando ele clicar no botão ativará a função
 
 /*---=FUNÇÕES=---*/
-function twoDigits(digit) {
+function twoDigits(digit) { // função para os dígitos do cronômetro
     if(digit < 10) {
         return('0'+digit);
     } else {
@@ -24,29 +24,29 @@ function twoDigits(digit) {
 
 function start() {
     timer();
-   interval = setInterval(timer,1000);
+   interval = setInterval(timer,1000); // função para o cronômetro rodar de 1 em 1 segundo
 }
 
 function pause() {
-    clearInterval(interval);
+    clearInterval(interval); //função para parar o temporizador
 }
 
 function toStop() {
-    clearInterval(interval);
-    seconds = 0;
-    minutes = 0;
-    document.getElementById('time').innerText = '00:00:00';
+    clearInterval(interval); // parar o temporizador
+    seconds = 0; // zera os segundos
+    minutes = 0; // zera os minutos
+    document.getElementById('time').innerText = '00:00:00'; // reseta o tempo do cronômetro
 }
 
-function timer() {
-    seconds++;
+function timer() { // esta função faz com que a cada 60 segundos vire 1 minuto e volte os segundos para 00 e faça a contagem de novo, o mesmo vale para os minutos e horas
+    seconds++; // incrementação dos segundos
     if(seconds == 60) {
-        minutes++
-        seconds = 0;
+        minutes++; // incrementação dos minutos
+        seconds = 0; // zera os segundos
         if(minutes == 60) {
-            minutes = 0;
-            hours++;
+            minutes = 0; // zera os minutos
+            hours++; // incrementação das horas
         }
     }
-    document.getElementById('time').innerText = twoDigits(hours)+':'+twoDigits(minutes)+':'+twoDigits(seconds);
+    document.getElementById('time').innerText = twoDigits(hours)+':'+twoDigits(minutes)+':'+twoDigits(seconds); //mostrará o tempo do cronômetro
 }