Merge pull request #11 from OZimbres/EEBranch

Ee branch

README.md

@@ -128,7 +128,10 @@
 
 
 <h2 id="uso"> Uso </h2>
-<p> Acesse a <a href="readMeContent/MANUAL_DO_SIASO.docx">documentação</a> para informações mais detalhadas quanto para com a Web Aplicação. </p>
+<p> Acesse a documentação para informações mais detalhadas quanto para com a Web Aplicação. </p>
+<p>Documentação <a href="/assets/documentacao/lampada.md">Lâmpada</a></p>
+<p>Documentação <a href="/assets/documentacao/cronometro.md">Cronômetro</a></p>
+<p>Documentação <a href="/assets/documentacao/jogoDaVelha.md">Jogo da Velha</a></p>
 
 
 <h2 id="status-do-projeto"> Status do Projeto </h2>

assets/documentacao/cronometro.md

@@ -0,0 +1,33 @@
+# Documentação do Cronômetro ⏱️
+
+Este é um cronômetro simples desenvolvido usando HTML, CSS e JavaScript para o nosso projeto em grupo. Aqui, descreveremos o processo de desenvolvimento, as dificuldades encontradas e como o cronômetro funciona. 
+
+## Processo de Desenvolvimento 🚀
+
+- **HTML**: Começamos criando a estrutura HTML básica que incluiu um cabeçalho, um título, o cronômetro em si e três botões - Iniciar, Pausar e Parar.
+
+- **CSS**: Em seguida, aplicamos estilos para tornar o cronômetro mais atraente. Isso incluiu a definição de cores de fundo, tamanhos de fonte e estilos de botão. Também tornamos o design responsivo, adaptando-o a diferentes tamanhos de tela usando media queries.
+
+- **JavaScript**: A lógica do cronômetro foi implementada em JavaScript. Criamos funções para atualizar o tempo, iniciar, pausar e parar o cronômetro. Usamos `setInterval` para atualizar o tempo a cada segundo.
+
+## Dificuldades Encontradas 🤔
+
+- **Manipulação do Tempo**: Uma das principais dificuldades foi lidar com a manipulação do tempo. Converter segundos em minutos e horas e atualizar o cronômetro a cada segundo exigiu um planejamento cuidadoso.
+
+- **Responsividade**: Garantir que o cronômetro parecesse bom em telas de diferentes tamanhos foi um desafio. No entanto, conseguimos ajustar os estilos usando media queries para proporcionar uma boa experiência em todas as telas.
+
+## Como Usar o Cronômetro ⏯️
+
+- Clique no botão "Iniciar" para começar o cronômetro.
+- Clique no botão "Pausar" para interromper o cronômetro temporariamente.
+- Clique no botão "Parar" para reiniciar o cronômetro.
+
+## Emojis Adicionados para Diversão 😄
+
+- Desenvolver este cronômetro foi como uma montanha-russa emocional 🎢.
+- As dificuldades foram desafiadoras, mas também estimulantes 💪.
+- Esperamos que este cronômetro seja útil para nosso projeto em grupo! 🤞
+
+Você pode conferir o código-fonte completo [aqui](https://github.com/OZimbres/VTL-SA2).
+
+Este é um resumo do processo de desenvolvimento do nosso cronômetro. Se você tiver alguma dúvida ou sugestão de melhoria, sinta-se à vontade para compartilhar. 👍

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
 }