Skip to content

Commit 03d8beb

Browse files
NachoKaiNachoKai
committed
boceto
1 parent 49a4cec commit 03d8beb

File tree

6 files changed

+353
-0
lines changed

6 files changed

+353
-0
lines changed

‎.vscode/settings.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.multiRootWorkspaceName": "simondice"
3+
}

‎css/main.css

+159
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/main.css.map

+9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/main.scss

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
* {
2+
font-family: "Source Sans Pro", sans-serif;
3+
margin: 0;
4+
padding: 0;
5+
-webkit-box-sizing: border-box;
6+
box-sizing: border-box;
7+
-webkit-transition: all 0.3s ease;
8+
transition: all 0.3s ease;
9+
text-align: center;
10+
font-size: 16px;
11+
}
12+
13+
.grid-container {
14+
background: black;
15+
color: white;
16+
padding: 10px;
17+
margin: 10px;
18+
display: flex;
19+
flex-direction: column;
20+
grid-template-columns: 1fr;
21+
grid-template-rows: 1fr 1fr 1fr 1fr;
22+
grid-template-areas: "sector1""sector2""sector3""sector4";
23+
}
24+
25+
.sector1 {
26+
padding: 10px;
27+
margin: 10px;
28+
background: orange;
29+
display: grid;
30+
grid-template-columns: 1fr 1fr 1fr;
31+
grid-template-rows: 1fr;
32+
grid-template-areas: "puntaje start pmaximo";
33+
grid-area: sector1;
34+
}
35+
36+
.puntaje {
37+
grid-area: puntaje;
38+
}
39+
40+
.start {
41+
grid-area: start;
42+
}
43+
44+
.pmaximo {
45+
grid-area: pmaximo;
46+
}
47+
48+
.sector2 {
49+
padding: 10px;
50+
margin: 10px;
51+
background: orangered;
52+
display: grid;
53+
grid-template-columns: 1fr 1fr;
54+
grid-template-rows: 1fr 1fr;
55+
grid-template-areas: "rojo verde""azul amarillo";
56+
grid-area: sector2;
57+
}
58+
59+
.rojo {
60+
background: #ed1b24;
61+
grid-area: rojo;
62+
}
63+
64+
.verde {
65+
background: #23b14d;
66+
grid-area: verde;
67+
}
68+
69+
.azul {
70+
background: #00a3e8;
71+
grid-area: azul;
72+
}
73+
74+
.amarillo {
75+
background: #fef200;
76+
grid-area: amarillo;
77+
}
78+
79+
.sector3 {
80+
padding: 10px;
81+
margin: 10px;
82+
background: aquamarine;
83+
display: grid;
84+
grid-template-columns: 1fr 1fr;
85+
grid-template-rows: 1fr;
86+
grid-template-areas: "reiniciar continuar";
87+
grid-area: sector3;
88+
}
89+
90+
.reiniciar {
91+
grid-area: reiniciar;
92+
}
93+
94+
.continuar {
95+
grid-area: continuar;
96+
}
97+
98+
.sector4 {
99+
padding: 10px;
100+
margin: 10px;
101+
background: chartreuse;
102+
display: grid;
103+
grid-template-columns: 1fr;
104+
grid-template-rows: 1fr;
105+
grid-template-areas: "mensaje";
106+
grid-area: sector4;
107+
}
108+
109+
.mensaje {
110+
grid-area: mensaje;
111+
}

‎index.html

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!doctype html>
2+
<html lang="es">
3+
4+
<head>
5+
<title>Titulo</title>
6+
<!-- Meta tags -->
7+
<meta charset="utf-8">
8+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
9+
<!-- CSS -->
10+
<link rel="stylesheet" href="css/main.css">
11+
<!-- Bootstrap -->
12+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
13+
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
14+
</head>
15+
16+
<body>
17+
18+
<div class="grid-container">contenedor
19+
<div class="sector1">
20+
<div class="puntaje">Puntaje:
21+
<input type="text" name="puntaje" id="puntaje" disabled>
22+
</div>
23+
<div class="start">
24+
<input type="button" value="START" id="start">
25+
</div>
26+
<div class="pmaximo">Puntaje Maximo:
27+
<input type="text" name="pmaximo" id="pmaximo" disabled>
28+
</div>
29+
</div>
30+
<div class="sector2">
31+
<div class="rojo">rojo</div>
32+
<div class="verde">verde</div>
33+
<div class="azul">azul</div>
34+
<div class="amarillo">amarillo</div>
35+
</div>
36+
<div class="sector3">
37+
<div class="reiniciar"><input type="button" value="REINICIAR" id="reiniciar"></div>
38+
<div class="continuar"><input type="button" value="CONTINUAR" id="continuar"></div>
39+
</div>
40+
<div class="sector4">
41+
<div class="mensaje">Mensaje:
42+
<input type="text" name="puntaje" id="puntaje" disabled>
43+
</div>
44+
</div>
45+
</div>
46+
47+
<!-- JavaScript -->
48+
<script src="js/main.js"></script>
49+
<!-- jQuery, Popper.js, Bootstrap JS -->
50+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
51+
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
52+
</script>
53+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
54+
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
55+
</script>
56+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
57+
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
58+
</script>
59+
<!-- Font Awesome -->
60+
<script src="https://kit.fontawesome.com/429b57eee3.js" crossorigin="anonymous"></script>
61+
</body>
62+
63+
</html>

‎js/main.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
// *START para correr el programa
3+
// *Puntaje que va aumentando con cada respuesta correcta, se reinicia cuando hay respuesta incorrecta
4+
// *Puntaje Maximo guarda el numero maximo alcanzado en Puntaje.
5+
// *Reiniciar borra el Puntaje y comienza a correr el programa de nuevo, no borra Puntaje Maximo.
6+
// *Turno de:
7+
// *Continuar corre el turno siguiente si la respuesta es correcta.
8+
// *Mensaje muestra si es turno de la Computadora o el Usuario, si la respuesta es correcta (para poder ejecutar continuar) o si es incorrecta (para ejecutar reiniciar)

0 commit comments

Comments
 (0)