Skip to content

Commit 1e39a3d

Browse files
ThanksUniverseThanksUniverse
committed
Finish
1 parent 28b9f35 commit 1e39a3d

File tree

8 files changed

+252
-27
lines changed

8 files changed

+252
-27
lines changed

‎README.md‎

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,59 @@
1-
# JavaScript
1+
# JavaScript
2+
3+
## Módulo 13-Tarefa
4+
Exercícios:
5+
1. Resolva as operações:
6+
● 10 + 15 = 25 (number)
7+
● “10” + 2 = 102 (string)
8+
● “10” * 2 = 20 (number)
9+
● “10” / 3 = 3.33(float)
10+
● “10” % 3 = 1(float)
11+
● 10 + true = 11 (number)
12+
● 10 == ”10” = true (boolean)
13+
● 10 === “10” = false (boolean)
14+
● 10 < 11 = true (boolean)
15+
● 10 > 12 = false (boolean)
16+
● 10 <= 10.1 = true (boolean)
17+
● 10 > 9.99 = true (boolean)
18+
● 10 != “dez” = true (boolean)
19+
● “dez” + true = deztrue (string)
20+
● 10 + false = 10 (number)
21+
● 10 * false = 0 (number)
22+
● true + true = 2 (number)
23+
● 10++ = 11 (number)
24+
● 10-- = 9 (number)
25+
● 1 & 1 = 1 (number)
26+
● 1 & 0 = 0 (number)
27+
● 0 & 0 = 0 (number)
28+
● 1 & 0 = 0 (number)
29+
● 0 / 1 = 0 (number)
30+
● 5 + 5 == 10 = true (boolean)
31+
● “5” + ”5” == 10 = false (boolean)
32+
● “5” * 2 > 9 = true (boolean)
33+
● (10 + 10) * 2 = 40 (number)
34+
● 10 + 10 * 2 = 30 (number)
35+
36+
2. Responda as perguntas de acordo com as variáveis.
37+
var branco = “preto”;
38+
var preto = “cinza”;
39+
var cinza = “branco”;
40+
var carro = “preto”;
41+
var valor = 30000;
42+
var prestacao = 750;
43+
44+
a) branco == “branco” - false (boolean)
45+
b) branco == cinza - false (boolean)
46+
c) carro === branco - true (boolean)
47+
d) var cavalo = carro == “preto” ? “cinza” : “marron”; Resposta: true - "cinza"
48+
e) Quantas prestações são necessárias para pagar o valor do carro com uma entrada
49+
de 3.000? Demonstre a operação.
50+
let valor = 30000
51+
let prestacao = 750
52+
let entrada = 3000
53+
54+
(valor -= entrada) / prestacao
55+
f) Somando as variáveis de cores é formada uma string de quantos caracteres?
56+
let f = branco + preto + cinza
57+
f.length
58+
59+
# Módulo13-Tarefa

‎css/calc.css‎

Lines changed: 60 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,35 @@ html {
1313
body {
1414
font-family: 'Poppins', sans-serif;
1515
font-size: 1.4rem;
16+
height: 100vh;
17+
}
18+
19+
.dark-mode {
20+
background-color: rgb(70, 70, 70);
21+
}
22+
23+
header {
24+
width: 100%;
25+
}
26+
27+
header img {
28+
width: 40;
29+
height: 40px;
30+
border-radius: 50%;
31+
max-width: 100%;
32+
margin: 10px;
33+
position: relative;
34+
box-shadow: 0px 0px 5px 4px black;
35+
background-color: gray;
36+
transition: all 1s;
37+
display: block;
38+
}
39+
40+
header img:hover {
41+
filter: brightness(150%);
42+
box-shadow: none;
43+
transform: translateY(5px);
44+
background-color: yellow;
1645
}
1746

1847
.form-container {
@@ -24,6 +53,7 @@ body {
2453
margin-top: 35vh;
2554
padding: 10px;
2655
text-align: center;
56+
display: block;
2757
}
2858

2959
.form-container h4 {
@@ -43,7 +73,6 @@ body {
4373
}
4474

4575
.button button {
46-
width: 30%;
4776
padding: 2px;
4877
margin: 10px auto;
4978
display: block;
@@ -59,21 +88,45 @@ body {
5988
margin-top: 2px;
6089
}
6190

62-
.button #button1 {
63-
background-color: #ff0000;
64-
color: white;
65-
margin-bottom: 3px;
66-
}
67-
6891
.button button:hover {
6992
border: 1px solid black;
7093
}
7194

95+
.resultado #resultado {
96+
text-align: center;
97+
}
98+
99+
.resultado input {
100+
padding: 2px;
101+
border-radius: 4px;
102+
font-size: 1.6rem;
103+
background-color: black;
104+
}
105+
72106
.situacao input {
73107
width: 100%;
74108
color: transparent;
75109
border: 0;
76110
border-radius: 10px;
111+
text-align: center;
112+
background-color: purple;
113+
}
114+
115+
.clean #button1 {
116+
padding: 2px;
117+
margin: 0px auto;
118+
display: block;
119+
text-align: center;
120+
border: 1px solid rgba(0, 0, 0, 0.4);
121+
border-radius: 4px;
122+
width: 30%;
123+
background-color: #ff0000;
124+
color: white;
125+
margin-bottom: 3px;
126+
}
127+
128+
.clean #button1:hover {
129+
border: 1px solid black;
77130
}
78131

79132
footer {

‎html/code-together0.html‎

Lines changed: 72 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,45 +9,107 @@
99
</head>
1010
<body>
1111
<main>
12+
<header>
13+
<script src="../js/dark-mode.js"></script>
14+
<img src="../images/dark.webp" onclick="darkMode()" id="dark" alt="Dark Mode">
15+
</header>
1216
<section>
1317
<div class="form-container">
1418
<h4>Calcular Média</h4>
1519
<form>
1620
<div class="notas">
1721
<label for="nota01">Nota 1</label>
18-
<input type="number" id="nota01" name="n1">
22+
<input type="number" class="ninput" id="nota01" name="n1" min="0" step="0.1" max="10">
1923
</div>
2024
<div class="notas">
2125
<label for="nota02">Nota 2</label>
22-
<input type="number" id="nota02" name="n2">
26+
<input type="number" id="nota02" name="n2" min="0" step="0.1" max="10">
2327
</div>
2428
<div class="notas">
2529
<label for="nota03">Nota 3</label>
26-
<input type="number" id="nota03" name="n3">
30+
<input type="number" id="nota03" name="n3" min="0" step="0.1" max="10">
2731
</div>
2832
<div class="notas">
2933
<label for="nota04">Nota 4</label>
30-
<input type="number" id="nota04" name="n4">
34+
<input type="number" id="nota04" name="n4" min="0" step="0.1" max="10">
3135
</div>
3236
<script src="../js/code-together0.js"></script>
3337
<div class="button">
34-
<button id="button0">Calcular</button>
35-
<button id="button1">Reset</button>
38+
<button id="button0" onclick="MediaCalc()">Calcular</button>
3639
</div>
3740
<div class="resultado">
3841
<label for="media">Média:</label>
39-
<input type="text" id="media" readonly>
42+
<input type="text" id="resultado" readonly>
4043
</div>
4144
<div class="situacao">
42-
<input placeholder="" readonly></input>
45+
<input id ="state" class="reset" readonly></input>
46+
</div>
47+
<div class="clean">
48+
<button id="button1" class="reset" onclick="reset()">Reset</button>
4349
</div>
4450
</form>
4551
</div>
4652
</section>
4753
<footer>
4854
<p>Desenvolvido por: <em><a href="https://github.com/ThanksUniverse/" target="_blank">Pedro</a></em></p>
4955
</footer>
50-
5156
</main>
5257
</body>
53-
</html>
58+
</html>
59+
60+
<pre>
61+
Exercícios:
62+
1. Resolva as operações:
63+
● 10 + 15 = 25 (number)
64+
● “10” + 2 = 102 (string)
65+
● “10” * 2 = 20 (number)
66+
● “10” / 3 = 3.33(float)
67+
● “10” % 3 = 1(float)
68+
● 10 + true = 11 (number)
69+
● 10 == ”10” = true (boolean)
70+
● 10 === “10” = false (boolean)
71+
● 10 < 11 = true (boolean)
72+
● 10 > 12 = false (boolean)
73+
● 10 <= 10.1 = true (boolean)
74+
● 10 > 9.99 = true (boolean)
75+
● 10 != “dez” = true (boolean)
76+
● “dez” + true = deztrue (string)
77+
● 10 + false = 10 (number)
78+
● 10 * false = 0 (number)
79+
● true + true = 2 (number)
80+
● 10++ = 11 (number)
81+
● 10-- = 9 (number)
82+
● 1 & 1 = 1 (number)
83+
● 1 & 0 = 0 (number)
84+
● 0 & 0 = 0 (number)
85+
● 1 & 0 = 0 (number)
86+
● 0 / 1 = 0 (number)
87+
● 5 + 5 == 10 = true (boolean)
88+
● “5” + ”5” == 10 = false (boolean)
89+
● “5” * 2 > 9 = true (boolean)
90+
● (10 + 10) * 2 = 40 (number)
91+
● 10 + 10 * 2 = 30 (number)
92+
93+
2. Responda as perguntas de acordo com as variáveis.
94+
var branco = “preto”;
95+
var preto = “cinza”;
96+
var cinza = “branco”;
97+
var carro = “preto”;
98+
var valor = 30000;
99+
var prestacao = 750;
100+
101+
a) branco == “branco” - false (boolean)
102+
b) branco == cinza - false (boolean)
103+
c) carro === branco - true (boolean)
104+
d) var cavalo = carro == “preto” ? “cinza” : “marron”; Resposta: true - "cinza"
105+
e) Quantas prestações são necessárias para pagar o valor do carro com uma entrada
106+
de 3.000? Demonstre a operação.
107+
let valor = 30000
108+
let prestacao = 750
109+
let entrada = 3000
110+
111+
(valor -= entrada) / prestacao
112+
f) Somando as variáveis de cores é formada uma string de quantos caracteres?
113+
let f = branco + preto + cinza
114+
f.length
115+
</pre>

‎html/funcoes.html‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,7 @@
1616
<input type="text" placeholder="digite um número" name="n3">
1717
<input type="text" placeholder="digite um número" name="n4">
1818
<input type="submit" value="Enviar">
19-
20-
2119
<div id="resultado"></div>
22-
23-
24-
2520
</form>
2621

2722

‎images/dark.webp‎

1.68 KB
Loading

‎images/light.png‎

12.8 KB
Loading

‎js/code-together0.js‎

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,53 @@
1-
document.addEventListener('submit', function (event) {
2-
event.preventDefault();
1+
//Change Form submit type
32

3+
document.addEventListener('submit', function(evento){
4+
evento.preventDefault();
5+
evento.stopPropagation();
46
});
57

8+
function MediaCalc() { //Calcular média
69

10+
let a = parseInt(document.getElementById("nota01").value);
11+
let b = parseInt(document.getElementById("nota02").value);
12+
let c = parseInt(document.getElementById("nota03").value);
13+
let d = parseInt(document.getElementById("nota04").value);
714

15+
let media = (a + b + c + d) / 4;
816

17+
document.getElementById("resultado").value = media;
918

19+
//Fim do Cálculo de Média
1020

21+
//Alterar Style do Resultado e do State com base na nota
1122

23+
if(media >= 7){
24+
document.getElementById('resultado').style.color = "greenyellow"
25+
} else if (media >= 5) {
26+
document.getElementById('resultado').style.color = "yellow"
27+
} else {
28+
document.getElementById('resultado').style.color = "red"
29+
}
1230

31+
if(media >= 7){
32+
document.getElementById('state').style.backgroundColor = "green"
33+
document.getElementById('state').style.color = "white"
34+
document.getElementById('state').value = "Aprovado"
35+
} else if (media >= 5) {
36+
document.getElementById('state').style.backgroundColor = "yellow"
37+
document.getElementById('state').style.color = "black"
38+
document.getElementById('state').value = "Recuperação"
39+
} else {
40+
document.getElementById('state').style.backgroundColor = "red"
41+
document.getElementById('state').style.color = "white"
42+
document.getElementById('state').value = "Reprovado"
43+
}
1344

45+
//Console.log
1446

47+
console.log(media);
48+
console.log(a + b + c + d)
1549

16-
17-
document.getElementById('resultado').innerHTML = x();
50+
//Reset Button
51+
52+
document.getElementByClassName('reset').reset();
53+
}

‎js/dark-mode.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
function darkMode() {
2+
let element = document.body;
3+
element.classList.toggle("dark-mode")
4+
let image = document.getElementById('dark');
5+
if (image.src.match("../images/dark.webp")) {
6+
image.src = "../images/light.png";
7+
} else {
8+
image.src = "../images/dark.webp";
9+
}
10+
}
11+
12+
let valor = 30000
13+
let prestacao = 750
14+
let entrada = 3000
15+
16+
(valor -= entrada) / prestacao
17+
18+
console.log(valor)
19+
20+
let f = branco + preto + cinza
21+
f.length

0 commit comments

Comments
 (0)