Skip to content

Commit 28b9f35

Browse files
ThanksUniverseThanksUniverse
committed
Finished HTML/CSS
1 parent 63b644a commit 28b9f35

3 files changed

Lines changed: 160 additions & 0 deletions

File tree

‎css/calc.css‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300&display=swap');
2+
* {
3+
box-sizing: border-box;
4+
margin: 0;
5+
padding: 0;
6+
}
7+
8+
html {
9+
font-size: 62.5%;
10+
background-color: #eaeaea;
11+
}
12+
13+
body {
14+
font-family: 'Poppins', sans-serif;
15+
font-size: 1.4rem;
16+
}
17+
18+
.form-container {
19+
width: 300px;
20+
background-color: #ffffff;
21+
border-radius: 10px;
22+
box-shadow: 1px 1px 5px 1px black;
23+
margin: 0 auto;
24+
margin-top: 35vh;
25+
padding: 10px;
26+
text-align: center;
27+
}
28+
29+
.form-container h4 {
30+
text-align: center;
31+
color: green;
32+
}
33+
34+
.notas {
35+
background-color: #fcfcfc;
36+
border-radius: 10px;
37+
}
38+
39+
.notas input {
40+
padding: 1px;
41+
margin: 5px;
42+
width: 80px;
43+
}
44+
45+
.button button {
46+
width: 30%;
47+
padding: 2px;
48+
margin: 10px auto;
49+
display: block;
50+
text-align: center;
51+
border: 1px solid rgba(0, 0, 0, 0.4);
52+
border-radius: 4px;
53+
width: 50%;
54+
}
55+
56+
.button #button0 {
57+
background-color: darkblue;
58+
color: white;
59+
margin-top: 2px;
60+
}
61+
62+
.button #button1 {
63+
background-color: #ff0000;
64+
color: white;
65+
margin-bottom: 3px;
66+
}
67+
68+
.button button:hover {
69+
border: 1px solid black;
70+
}
71+
72+
.situacao input {
73+
width: 100%;
74+
color: transparent;
75+
border: 0;
76+
border-radius: 10px;
77+
}
78+
79+
footer {
80+
position: absolute;
81+
bottom: 0;
82+
width: 100%;
83+
text-align: center;
84+
background-color: rgba(0, 0, 0, 0.1);
85+
}
86+
87+
footer a {
88+
text-decoration: none;
89+
color: orangered;
90+
}

‎html/code-together0.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Code Together - Javascript II</title>
8+
<link rel="stylesheet" href="../css/calc.css">
9+
</head>
10+
<body>
11+
<main>
12+
<section>
13+
<div class="form-container">
14+
<h4>Calcular Média</h4>
15+
<form>
16+
<div class="notas">
17+
<label for="nota01">Nota 1</label>
18+
<input type="number" id="nota01" name="n1">
19+
</div>
20+
<div class="notas">
21+
<label for="nota02">Nota 2</label>
22+
<input type="number" id="nota02" name="n2">
23+
</div>
24+
<div class="notas">
25+
<label for="nota03">Nota 3</label>
26+
<input type="number" id="nota03" name="n3">
27+
</div>
28+
<div class="notas">
29+
<label for="nota04">Nota 4</label>
30+
<input type="number" id="nota04" name="n4">
31+
</div>
32+
<script src="../js/code-together0.js"></script>
33+
<div class="button">
34+
<button id="button0">Calcular</button>
35+
<button id="button1">Reset</button>
36+
</div>
37+
<div class="resultado">
38+
<label for="media">Média:</label>
39+
<input type="text" id="media" readonly>
40+
</div>
41+
<div class="situacao">
42+
<input placeholder="" readonly></input>
43+
</div>
44+
</form>
45+
</div>
46+
</section>
47+
<footer>
48+
<p>Desenvolvido por: <em><a href="https://github.com/ThanksUniverse/" target="_blank">Pedro</a></em></p>
49+
</footer>
50+
51+
</main>
52+
</body>
53+
</html>

‎js/code-together0.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
document.addEventListener('submit', function (event) {
2+
event.preventDefault();
3+
4+
});
5+
6+
7+
8+
9+
10+
11+
12+
13+
14+
15+
16+
17+
document.getElementById('resultado').innerHTML = x();

0 commit comments

Comments
 (0)