-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexs3em1.html
169 lines (164 loc) · 5.83 KB
/
exs3em1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercícios de JavaScript</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Arial, Helvetica, sans-serif;
min-height: 98vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: white;
background-color: #313131;
}
h1{
font-size: 3em;
position: absolute;
top: 25px;
}
h2{
margin-bottom: 10px;
}
main{
width: 100%;
padding: 25px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
section.inputs{
display: flex;
flex-direction: column;
}
.button{
padding: 10px;
border-radius: 25px;
border: none;
cursor: pointer;
margin: 15px 0;
background-color: #555;
color: white;
}
.button:hover{
background-color: rgb(109, 109, 109);
}
.exercicios{
background-color: white;
color: black;
padding: 25px;
border-radius: 15px;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.219);
}
input{
padding: 1px;
}
</style>
</head>
<body>
<h1>Exercícios de JavaScript</h1>
<main>
<!-- 1) Input de 4 notas e cálculo de média de um aluno. Ao final, mostrar se o mesmo está aprovado, de recuperação ou reprovado. -->
<div class="exercicios">
<h2>Calcule a Média do Aluno</h2>
<section class="inputs">
<label for="number">Nota 1</label>
<input type="number" id="n1">
<label for="number">Nota 2</label>
<input type="number" id="n2">
<label for="number">Nota 3</label>
<input type="number" id="n3">
<label for="number">Nota 4</label>
<input type="number" id="n4">
<input type="submit" value="Enviar" onclick="media()" class="button">
</section>
<div id="media">
<div id="cond"></div>
</div>
</div>
<!-- 2) Input de dois valores: realizar as operações aritméticas básicas e mostrar o resultado para o usuário. -->
<div class="exercicios">
<h2>Calculadora Simples</h2>
<section class="inputs">
<label for="number">Insira o valor 01</label>
<input type="number" id="num1">
<label for="number">Insira o valor 02</label>
<input type="number" id="num2">
<input type="submit" value="Calcular" onclick="calcular()" class="button">
</section>
<div id="resultado"></div>
</div>
<!-- 3) Input de 1 valor: Mostrar a tabuada para o usuário do número inserido. Saída de dado formatada (2 x 1 = 2) -->
<div class="exercicios">
<h2>Tabuada de qual número vc quer?</h2>
<div>
<label for="number">Digite um número: </label>
<input type="number" id="tab">
<input type="submit" value="Enviar" onclick="calc()" class="button">
</div>
<div id="tabuada"></div>
</div>
</main>
<script>
// script para o ex 01
var num01 = document.getElementById('n1');
var num02 = document.getElementById('n2');
var num03 = document.getElementById('n3');
var num04 = document.getElementById('n4');
var div = document.getElementById('media');
function media(){
var nota01 = Number(num01.value);
var nota02 = Number(num02.value);
var nota03 = Number(num03.value);
var nota04 = Number(num04.value);
var media = (nota01 + nota02 + nota03 + nota04)/4
if( media >= 6 && media <= 10){
div.innerHTML = '<strong>Aluno Aprovado</strong>' + ` - Média: ${media}`
}
else if (media >= 4 && media < 6){
div.innerHTML = '<strong>Aluno em Recuperação</strong>' + ` - Média: ${media}`
}
else if(media >= 0 && media < 4){
div.innerHTML = '<strong>Aluno Reprovado</strong>' + ` - Média: ${media}`
}
else{
window.alert('Média Inválida')
}
};
// script para o ex 02
var num1 = document.getElementById('num1')
var num2 = document.getElementById('num2')
var div02 = document.getElementById('resultado')
function calcular (){
var v1 = Number(num1.value)
var v2 = Number(num2.value)
var soma = v1 + v2
var sub = v1 - v2
var mult = v1 * v2
var dividir = v1 / v2
div02.innerHTML = `Valores Somados: <strong>${soma}</strong><br>` + `Valores Subtraidos: <strong>${sub}</strong><br>` + `Valores Multiplicados: <strong>${mult}</strong><br>` + `Valores Dividos: <strong>${dividir}</strong>`
}
// script para o ex 03
var n = document.getElementById('tab')
var tab = document.getElementById('tabuada')
function calc(){
var num = Number(n.value)
var c
var calc = []
tab.innerHTML = " "
for(c = 1; c < 11; c++){
calc[c] = num * c
tab.innerHTML += `${num} x ${c} = ${calc[c]}<br>`
}
}
</script>
</body>
</html>