Skip to content

Commit 14e0548

Browse files
Kev-arKev-ar
authored
Version Final Numero Secreto Curso Alura Latam
0 parents  commit 14e0548

File tree

7 files changed

+223
-0
lines changed

7 files changed

+223
-0
lines changed

‎app.js

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
let numeroSecreto = 0;
2+
let intentos = 0;
3+
let listaNumerosSorteados = [];
4+
let numeroMaximo = 10;
5+
//console.log(numeroSecreto);
6+
7+
function asignarTextoElemento(elemento, texto) {
8+
let elementoHTML = document.querySelector(elemento);
9+
elementoHTML.innerHTML = texto;
10+
return;
11+
}
12+
13+
function verificarIntento() {
14+
let numeroDeUsuario = parseInt(document.getElementById("valorUsuario").value);
15+
16+
if (numeroDeUsuario === numeroSecreto) {
17+
asignarTextoElemento("p",`Acertaste el numero en ${intentos} ${(intentos === 1) ? "vez" : "veces"}`);
18+
document.getElementById("reiniciar").removeAttribute("disabled");
19+
} else{
20+
if(numeroDeUsuario > numeroSecreto) {
21+
asignarTextoElemento("p","El numero secreto es menor");
22+
} else {
23+
asignarTextoElemento("p","El numero secreto es mayor");
24+
}
25+
intentos++;
26+
limpiarCaja();
27+
}
28+
return;
29+
}
30+
31+
function limpiarCaja(){
32+
document.querySelector("#valorUsuario").value = "";
33+
}
34+
35+
function generarNumeroSecreto() {
36+
let numeroGenerado = Math.floor(Math.random()*numeroMaximo)+1;
37+
//si ya sorteamos todos los numeros
38+
if(listaNumerosSorteados.length == numeroMaximo) {
39+
asignarTextoElemento("p","ya se sortearon todos los numeros posibles");
40+
} else{
41+
42+
// si el numero generado esta incluido en la lista
43+
if(listaNumerosSorteados.includes(numeroGenerado)){
44+
return generarNumeroSecreto();
45+
} else{
46+
listaNumerosSorteados.push(numeroGenerado);
47+
return(numeroGenerado);
48+
}
49+
}
50+
}
51+
52+
function condicionesIniciales(){
53+
asignarTextoElemento("h1","Juego del numero secreto!");
54+
asignarTextoElemento("p",`Indica un numero entre 1 y ${numeroMaximo}`);
55+
numeroSecreto = generarNumeroSecreto();
56+
intentos = 1;
57+
58+
}
59+
60+
function reiniciarJuego() {
61+
//limpiar la caja
62+
limpiarCaja();
63+
//mostrar mensaje de intervalo de numeros
64+
condicionesIniciales();
65+
//generar numero aleatorio
66+
//inicializar numero de intentos
67+
//deshabilitar nuevo juego
68+
document.querySelector("#reiniciar").setAttribute("disabled", "true");
69+
70+
}
71+
72+
condicionesIniciales();

‎img/Ruido.png

372 KB
Loading

‎img/bg.png

664 KB
Loading

‎img/code.png

475 KB
Loading

‎img/ia.png

453 KB
Loading

‎index.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@700&family=Inter:wght@400;700&display=swap"
10+
rel="stylesheet">
11+
<link rel="stylesheet" href="style.css">
12+
<title>JS Game</title>
13+
</head>
14+
15+
<body>
16+
17+
<div class="container">
18+
<div class="container__contenido">
19+
<div class="container__informaciones">
20+
<div class="container__texto">
21+
<h1></h1>
22+
<p class="texto__parrafo"></p>
23+
</div>
24+
<input type="number" id="valorUsuario" min="1" max="10" class="container__input">
25+
<div class="chute container__botones">
26+
<button onclick="verificarIntento();" class="container__boton">Intentar</button>
27+
<button onclick="reiniciarJuego()"; class="container__boton" id="reiniciar" disabled>Nuevo juego</button>
28+
</div>
29+
</div>
30+
<img src="./img/ia.png" alt="Una persona mirando a la izquierda" class="container__imagen-persona" />
31+
</div>
32+
</div>
33+
34+
35+
36+
37+
<script src="app.js" defer></script>
38+
</body>
39+
40+
</html>

‎style.css

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
* {
2+
box-sizing: border-box;
3+
margin: 0;
4+
padding: 0;
5+
color: white;
6+
}
7+
8+
body {
9+
background: linear-gradient(#1354A5 0%, #041832 33.33%, #041832 66.67%, #01080E 100%);
10+
height: 100vh;
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
}
15+
16+
17+
body::before {
18+
background-image: url("img/code.png");
19+
background-repeat: no-repeat;
20+
background-position: right;
21+
content: "";
22+
display: block;
23+
position: absolute;
24+
width: 100%;
25+
height: 100%;
26+
opacity: 0.4;
27+
}
28+
29+
.container {
30+
width: 1200px;
31+
height: 600px;
32+
display: flex;
33+
align-items: center;
34+
justify-content: space-between;
35+
border-radius: 24px;
36+
border: 1px solid #1875E8;
37+
box-shadow: 4px 4px 20px 0px rgba(1, 8, 14, 0.15);
38+
background-image: url("img/Ruido.png");
39+
background-size: 100% 100%;
40+
position: relative;
41+
}
42+
43+
44+
.container__contenido {
45+
display: flex;
46+
align-items: center;
47+
position: absolute;
48+
bottom: 0;
49+
}
50+
51+
.container__informaciones {
52+
flex: 1;
53+
padding: 3rem;
54+
}
55+
56+
.container__boton {
57+
border-radius: 16px;
58+
background: #1875E8;
59+
padding: 16px 24px;
60+
width: 100%;
61+
font-size: 24px;
62+
font-weight: 700;
63+
border: none;
64+
margin-top: 2rem;
65+
}
66+
67+
.container__boton:disabled {
68+
background: #898989;
69+
}
70+
71+
.container__texto {
72+
margin: 16px 0 16px 0;
73+
}
74+
75+
.container__texto-azul {
76+
color: #1875E8;
77+
}
78+
79+
.container__input {
80+
width: 100%;
81+
height: 72px;
82+
border-radius: 16px;
83+
background-color: #FFF;
84+
border: none;
85+
color: #1875E8;
86+
padding: 2rem;
87+
font-size: 24px;
88+
font-weight: 700;
89+
font-family: 'Inter', sans-serif;
90+
}
91+
92+
.container__botones {
93+
display: flex;
94+
gap: 2em;
95+
}
96+
97+
h1 {
98+
font-family: 'Chakra Petch', sans-serif;
99+
font-size: 72px;
100+
padding-bottom: 3rem;
101+
}
102+
103+
p,
104+
button {
105+
font-family: 'Inter', sans-serif;
106+
}
107+
108+
.texto__parrafo {
109+
font-size: 32px;
110+
font-weight: 400;
111+
}

0 commit comments

Comments
 (0)