offryan · offryan · Feb 20, 2024 · Feb 20, 2024
diff --git a/Tabuada-Crono-Slider/css/exe1.css b/Tabuada-Crono-Slider/css/exe1.css
@@ -0,0 +1,18 @@
+table {
+    background: #ccc;
+    color: #ccc;
+    line-height: 30px;
+    text-align: center;
+    width: 300px;
+}
+
+.cab {
+    background: #000033;
+    font-size: 15px;
+    font-weight: 700;
+}
+
+.cont {
+    background: #000066;
+    font-size: 14px;    
+}
diff --git a/Tabuada-Crono-Slider/css/exe2.css b/Tabuada-Crono-Slider/css/exe2.css
@@ -0,0 +1,7 @@
+.par{
+    background-color: #00ff1d;
+}
+
+.impar{
+    background-color: #FF0;
+}
diff --git a/Tabuada-Crono-Slider/css/exe5.css b/Tabuada-Crono-Slider/css/exe5.css
@@ -0,0 +1,54 @@
+html,body{
+    height: 100%;
+}
+
+body {
+    font-family: verdana;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+button {
+    background: linear-gradient(#070707, #75f716);
+    border-radius: 10px 10px 0 0;
+    border: none;
+    height: 40px;
+    width: 120px;
+    color: #fff;
+    font-weight: bold;
+}
+
+div {
+    height: 350px;
+    width: 400px;
+}
+
+#divInicial{
+    background-color: #ccc; 
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#divCronometro {
+    background-color: #edd365;
+    display: none;
+}
+
+#divSlide {
+    background-color: #8effa4;
+    display: none;
+}
+
+#divTabuada {
+    background-color: #7fecfa;
+    display: none;
+}
+
+#txtNum{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 20pt;
+}
diff --git a/Tabuada-Crono-Slider/css/exe6.css b/Tabuada-Crono-Slider/css/exe6.css
@@ -0,0 +1,11 @@
+.aprovado{
+    color: #00f;
+}
+
+.reprovado{
+    color: #f00;
+}
+
+.exame{
+    color: rgb(248, 133, 25);
+}
diff --git a/Tabuada-Crono-Slider/exercicio5.html b/Tabuada-Crono-Slider/exercicio5.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="css/exe5.css">
+</head>
+<body>
+    <main>
+        <button type="button" id="btn1">Cronômetro</button>
+        <button type="button" id="btn2">Slide show</button>
+        <button type="button" id="btn3">Tabuada</button>
+
+        <!-- DIV INICIAL -->
+        <div id="divInicial">
+            <p>Clique nas abas acima.</p>
+        </div>
+
+        <!-- DIV DO CRONÔMETRO -->
+        <div id="divCronometro">
+            <div id="txtNum"></div>
+        </div>
+
+        <!-- DIV DAS IMAGENS -->
+        <div id="divSlide">
+            <div id="conteudo">
+                <img src="imagens/img1.jpg" id="imagens"><br>
+                <input type="button" id="ant" value="Anterior">
+                <input type="button" id="prox" value="Próxima">
+            </div>
+        </div>
+
+        <!-- DIV DA TABUADA -->
+        <div id="divTabuada">
+            Digite o número da tabuada que deseja calcular:<br>
+            <form>
+                <input type="text" id="txtNumTab">
+                <input type="button" id="btntab" value="Calcular">
+            </form>
+            <div id="restab"></div>
+        </div>
+
+    </main>
+
+    <script src="js/exercicio5.js"></script>
+</body>
+</html>
diff --git a/Tabuada-Crono-Slider/imagens/img1.jpg b/Tabuada-Crono-Slider/imagens/img1.jpg
diff --git a/Tabuada-Crono-Slider/imagens/img2.jpg b/Tabuada-Crono-Slider/imagens/img2.jpg
diff --git a/Tabuada-Crono-Slider/imagens/img3.jpg b/Tabuada-Crono-Slider/imagens/img3.jpg
diff --git a/Tabuada-Crono-Slider/imagens/img4.jpg b/Tabuada-Crono-Slider/imagens/img4.jpg
diff --git a/Tabuada-Crono-Slider/imagens/img5.jpg b/Tabuada-Crono-Slider/imagens/img5.jpg
diff --git a/Tabuada-Crono-Slider/js/exercicio5.js b/Tabuada-Crono-Slider/js/exercicio5.js
@@ -0,0 +1,76 @@
+"use strict"
+
+let botao1 = document.querySelector("#btn1");
+let botao2 = document.querySelector("#btn2");
+let botao3 = document.querySelector("#btn3");
+
+
+let timer = 0;
+let inicial = 0;
+let contImagem = 1;
+
+
+botao1.addEventListener("click" , function(){
+    exibirDiv("divCronometro");
+
+    if(timer == 0){
+
+        timer = setInterval(function(){
+            inicial++;
+            document.querySelector("txtNum").innerHTML = inicial;
+        }, 10);
+    }
+});
+
+botao2.addEventListener("click" , function(){
+    exibirDiv("divSlide");
+});
+
+document.querySelector("#prox").addEventListener("click", function(){
+
+    if(contImagem < 5)
+        contImagem++;
+
+    else
+        contImagem = 1;
+        exibirImagem();
+    });
+
+document.querySelector("#ant").addEventListener("click", function(){
+
+    if(contImagem < 1)
+        contImagem--;
+
+    else
+        contImagem = 5;
+        exibirImagem();
+
+    });
+
+    function exibirImagem(){
+    let img = `img${contImagem}.jpg`;
+    document.querySelector("#imagens").src = `imagens/${img}`
+    }
+
+botao3.addEventListener("click", function(){
+    exibirDiv("divTabuada");
+});
+
+
+function exibirDiv(div){
+
+    let tagsdiv = document.querySelectorAll("div");
+
+    for (let i = 0; i < tagsdiv.length; i++){
+
+        if (tagsdiv[i].id.indexOf("div") >= 0){
+
+            if (tagsdiv[i].id == div){
+                tagsdiv[i].style.display = "block";
+            }else{
+                tagsdiv[i].style.display = "none";
+            }
+        }
+    }
+}
+