diff --git a/Tabuada-Crono-Slider/css/exe1.css b/Tabuada-Crono-Slider/css/exe1.css new file mode 100644 index 0000000..117383c --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/Tabuada-Crono-Slider/css/exe2.css b/Tabuada-Crono-Slider/css/exe2.css new file mode 100644 index 0000000..01cf592 --- /dev/null +++ b/Tabuada-Crono-Slider/css/exe2.css @@ -0,0 +1,7 @@ +.par{ + background-color: #00ff1d; +} + +.impar{ + background-color: #FF0; +} \ No newline at end of file diff --git a/Tabuada-Crono-Slider/css/exe5.css b/Tabuada-Crono-Slider/css/exe5.css new file mode 100644 index 0000000..60ac204 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/Tabuada-Crono-Slider/css/exe6.css b/Tabuada-Crono-Slider/css/exe6.css new file mode 100644 index 0000000..40730da --- /dev/null +++ b/Tabuada-Crono-Slider/css/exe6.css @@ -0,0 +1,11 @@ +.aprovado{ + color: #00f; +} + +.reprovado{ + color: #f00; +} + +.exame{ + color: rgb(248, 133, 25); +} \ No newline at end of file diff --git a/Tabuada-Crono-Slider/exercicio5.html b/Tabuada-Crono-Slider/exercicio5.html new file mode 100644 index 0000000..3582cdb --- /dev/null +++ b/Tabuada-Crono-Slider/exercicio5.html @@ -0,0 +1,46 @@ + + + + + + + +
+ + + + + +
+

Clique nas abas acima.

+
+ + +
+
+
+ + +
+
+
+ + +
+
+ + +
+ Digite o número da tabuada que deseja calcular:
+
+ + +
+
+
+ +
+ + + + \ No newline at end of file diff --git a/Tabuada-Crono-Slider/imagens/img1.jpg b/Tabuada-Crono-Slider/imagens/img1.jpg new file mode 100644 index 0000000..4b2dc54 Binary files /dev/null and b/Tabuada-Crono-Slider/imagens/img1.jpg differ diff --git a/Tabuada-Crono-Slider/imagens/img2.jpg b/Tabuada-Crono-Slider/imagens/img2.jpg new file mode 100644 index 0000000..98bd5b9 Binary files /dev/null and b/Tabuada-Crono-Slider/imagens/img2.jpg differ diff --git a/Tabuada-Crono-Slider/imagens/img3.jpg b/Tabuada-Crono-Slider/imagens/img3.jpg new file mode 100644 index 0000000..9965e57 Binary files /dev/null and b/Tabuada-Crono-Slider/imagens/img3.jpg differ diff --git a/Tabuada-Crono-Slider/imagens/img4.jpg b/Tabuada-Crono-Slider/imagens/img4.jpg new file mode 100644 index 0000000..1ff91e1 Binary files /dev/null and b/Tabuada-Crono-Slider/imagens/img4.jpg differ diff --git a/Tabuada-Crono-Slider/imagens/img5.jpg b/Tabuada-Crono-Slider/imagens/img5.jpg new file mode 100644 index 0000000..bed95e9 Binary files /dev/null and b/Tabuada-Crono-Slider/imagens/img5.jpg differ diff --git a/Tabuada-Crono-Slider/js/exercicio5.js b/Tabuada-Crono-Slider/js/exercicio5.js new file mode 100644 index 0000000..4707812 --- /dev/null +++ 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"; + } + } + } +} +