Atualização no layout e nova atividade adicionada

Atv03 sobre lógica de programação adicionada
Davi-D18 · Oct 26, 2024 · f3cf24f · f3cf24f
1 parent 74746ac
commit f3cf24f
Show file tree

Hide file tree

Showing 15 changed files with 868 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -46,6 +46,8 @@ As atividades estão organizadas por tópicos e você pode visualizar cada uma n
   - [Acesse no GitHub](https://davi-d18.github.io/atividades-vnw/src/activities/atv01_projeto-coffe)
 - **Atividade 2**: Projeto Padrinhos Mágicos  
   - [Acesse no GitHub](https://davi-d18.github.io/atividades-vnw/src/activities/atv02_padrinhos-magicos)
+- **Atividade 3**: Lógica JavaScript  
+  - [Acesse no GitHub](https://davi-d18.github.io/atividades-vnw/src/activities/atv03_logica-js)
 
 ## ⚙️ Tecnologias Utilizadas
 

diff --git a/index.html b/index.html
@@ -28,8 +28,21 @@ <h1>Atividades do Curso</h1>
     </header>
 
     <main>
-      <div class="activities-container" id="activities-container">
+      <section class="activities-container" id="activities-container">
         <!-- Atividades serão inseridas aqui pelo JavaScript -->
+      </section>
+
+      <!-- Modal para informações expandidas -->
+      <div class="overlay" id="overlay">
+        <div class="overlay-content">
+          <button class="close-btn" id="closeBtn">&times;</button>
+          <img id="overlayImg" src="" alt="Foto do Projeto" />
+          <h2 id="overlayName"></h2>
+          <p id="overlayDescription"></p>
+          <div id="modal-tech-badges" class="tech-badges"></div>
+
+          <a class="link-atividade" href=""></a>
+        </div>
       </div>
     </main>
 

diff --git a/src/activities/atv03_logica-js/index.html b/src/activities/atv03_logica-js/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Atividades Interativas</title>
+    <link rel="shortcut icon" href="./src/icons/favicon-32x32.png" type="image/x-icon">
+    <link rel="stylesheet" href="./src/css/style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <header>
+      <h1>Atividades de Lógica de Programação</h1>
+    </header>
+    <section class="container">
+      <!-- Atividade 1: Verificação de Dia ou Noite -->
+      <article class="atividade-card">
+        <h2>Atividade 1: Verificação de Dia ou Noite</h2>
+        <div class="resultado" id="resultadoDiaNoite"></div>
+        <div class="container-button">
+          <button id="dia-noite">
+            <div class="spinner"></div>
+            Verificar
+          </button>
+        </div>
+      </article>
+
+      <!-- Atividade 2: Verificação de Temperatura -->
+      <article class="atividade-card">
+        <h2>Atividade 2: Verificação de Temperatura</h2>
+        <label for="tempInput">Digite o nome de uma cidade</label>
+        <input type="text" id="tempInput" />
+        <div class="container-button">
+          <button id="temperatura">
+            <div class="spinner"></div>
+            Verificar
+          </button>
+        </div>
+        <div class="resultado" id="resultadoTemperatura"></div>
+      </article>
+
+      <!-- Atividade 3: Verificação de Faixa Etária -->
+      <article class="atividade-card">
+        <h2>Atividade 3: Verificação de Faixa Etária</h2>
+        <label for="idadeInput">Idade:</label>
+        <input type="number" id="idadeInput" />
+        <div class="container-button">
+          <button id="faixa-etaria">
+            <div class="spinner"></div>
+            Verificar
+          </button>
+        </div>
+        <div class="resultado" id="resultadoFaixaEtaria"></div>
+      </article>
+
+      <!-- Atividade 4: Calculadora de Notas -->
+      <article class="atividade-card">
+        <h2>Atividade 4: Calculadora de Notas</h2>
+        <label for="notaInput">Nota:</label>
+        <input type="number" id="notaInput" step="0.1" />
+        <div class="container-button">
+          <button id="nota">
+            <div class="spinner"></div>
+            Calcular Nota
+          </button>
+        </div>
+        <div class="resultado" id="resultadoNota"></div>
+      </article>
+    </section>
+
+    <!-- Cada script é relacionado a uma atividade -->
+    <script type="module" src="./src/js/dia_noite.js"></script>
+    <script type="module" src="./src/js/verificar_temperatura.js"></script>
+    <script type="module" src="./src/js/verificar_idade.js"></script>
+    <script type="module" src="./src/js/verificar_nota.js"></script>
+
+  </body>
+</html>
diff --git a/src/activities/atv03_logica-js/info.md b/src/activities/atv03_logica-js/info.md
@@ -0,0 +1 @@
+Atividade de lógica de programação passado durante a aula
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Atividade de lógica de programação passado durante a aula