Sebastian Cruz Gómez@sebastiancruzgomez
Que tal comunidad, busco ayuda para módulo de existe NOTA: js puro De antemano gracias. yo Tengo parálisis cerebral por eso me cuesta trabajo comunicarme. por favor no me copias
html
<title>table</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/estilos.css" />
<script defer src="js/tabla.js"></script>
<div class="contenedor-main">
<!-- inicio header -->
<header class="user-header">
<div class="contenedor-titulo-">
<h1 class="titulo-table" role="">table 2</h1>
</div>
</header>
<!-- final header -->
<!-- .contenedor-tablero>.contenedor->div*[10.tabla-item](//10.tabla-item){2 x $ =} -->
<!-- .contenedor-Resultados>div*[10.Resultado](//10.Resultado) -->
<!-- .contenedor-visual-resul>*[10.-visual-incorre](//10.-visual-incorre){X} -->
<!-- .contenedor-visual-resul>*[10.-visual-corre](//10.-visual-corre){✓} -->
<!-- ocultar -->
<!-- inicio talero -->
<div class="contenedor-tablero">
<div class="contenedor-tabla">
<div class="tabla-item">2 x 1 =</div>
<div class="tabla-item">2 x 2 =</div>
<div class="tabla-item">2 x 3 =</div>
<div class="tabla-item">2 x 4 =</div>
<div class="tabla-item">2 x 5 =</div>
<div class="tabla-item">2 x 6 =</div>
<div class="tabla-item">2 x 7 =</div>
<div class="tabla-item">2 x 8 =</div>
<div class="tabla-item">2 x 9 =</div>
<div class="tabla-item">2 x 10 =</div>
</div>
<div class="contenedor-Resultados">
<div class="Resultado">2</div>
<div class="Resultado">4</div>
<div class="Resultado">6</div>
<div class="Resultado">8</div>
<div class="Resultado">10</div>
<div class="Resultado">12</div>
<div class="Resultado">14</div>
<div class="Resultado">16</div>
<div class="Resultado">18</div>
<div class="Resultado">20</div>
</div>
<div class="contenedor-control">
<div class="contenedor-marcadores">
<p class="titulo-marca">marcadores</p>
<div class="grid">
<p class="txt-marca">correcta</p>
<p id="lbe-corre" class="txt-marca">00</p>
</div>
<div class="grid">
<p class="txt-marca">incorrecta</p>
<p id="lbe-incorre" class="txt-marca">00</p>
</div>
</div>
<div class="contenedor-botnes">
<label for="txtnum" class="lbe-">escribir su respuesta</label>
<input type="text" id="txtnum" class="txtnum" autocomplete="off" />
<button type="button" id="btn-siguiente" class="btn-gral">
siguiente
</button>
</div>
</div>
</div>
<!-- final talero -->
<!-- inicio footer -->
<footer class="contenedor-main-footer">
<p id="txt-copy" class="secon-footer copy">
Copyright
</p>
</footer>
<!-- final footer -->
</div>
css
@charset "UTF-8";
/* estilos generales de main */
html {
box-sizing: border-box;
font-family: "Roboto", Arial, sans-serif;
font-size: 16px; }
*,
*::after,
*::before {
padding: 0;
margin: 0;
box-sizing: inherit; }
i {
color: black; }
img {
max-width: 100%; }
ul {
display: inline-block;
list-style: none; }
a {
text-decoration: none;
color: black; }
/* estilos generales */
:root {
/* variables */
/* paleta de colar */
--Principal-fondo-color: #eee;
--Principal-color: #42a3db;
--first-color-alt: #006dc6;
--error-color-alt: #d32f2f;
--fon: #6a6a6a;
/* variables de layout */
--max-width: 1200px;
/* --tamapño-punto: 10px; */
/* variables de layout generales */
--max-width: 100vw;
--carta-height: 480px; }
.contenedor-main {
width: 100%;
height: 100%;
margin: 0 auto;
background-color: var(--Principal-fondo-color); }
/* este codigo es temporal prueba */
.ocultar {
display: none !important; }
/* este codigo es temporal prueba */
.content-main {
margin-bottom: 15px; }
.text-bold {
font-weight: bold; }
.text-bolder {
font-weight: bolder; }
.text-lighter {
font-weight: lighter; }
.text-italic {
font-style: italic; }
@media screen and (min-width: 320px) and (orientation: landscape) {
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(1, 1fr);
grid-gap: 10px; } }
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(1, 1fr);
grid-gap: 10px; }
/* inicio header meun */
/* este codigo es temporal class prueba */
.caja-menu-btn {
width: 75px;
background: goldenrod; }
/* este codigo es temporal class prueba */
.user-header {
height: 50px;
display: flex;
justify-content: space-around; }
.btn-volver {
width: 110px;
border: 2px solid black;
text-align: center;
line-height: 50px; }
.btn-volver:hover {
background: #eee; }
/* final header meun */
/* inicio meun */
.contenedor-menu-user {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* este codigo es temporal prueba */
background: goldenrod; }
/* inicio titulo-empresa */
.titulo-table {
line-height: 50px;
font-size: 32px;
text-align: center; }
/* final titulo-empresa */
.user-menu {
width: 300px;
height: 250px;
/* este codigo es temporal prueba */
background: goldenrod;
display: none;
flex-direction: column;
font-size: 25px; }
.contenedor-user-data {
display: flex;
justify-content: space-around;
border-bottom: 5px solid rgba(0, 0, 0, 0.3);
/* este codigo es temporal prueba */
margin: 10px 0; }
.menu-user {
display: flex;
flex-direction: column;
justify-content: space-around;
flex: 1;
margin: 0 10px; }
.main-menu-visible {
display: flex;
z-index: 1; }
/* .main-meun__item {} */
.user-menu__link {
height: 100%;
display: flex;
flex-direction: column; }
.user-meun__item:hover {
background-color: rgba(0, 0, 0, 0.3); }
/* inicio menu icon */
.menu-icono-user {
font-size: 25px;
transition: all 3s linear;
/* este codigo es temporal */
margin: 0.3em; }
.btn-menu-user {
display: block; }
.btn-menu-icono:hover {
cursor: pointer; }
/* inicio footer */
.contenedor-main-footer {
height: 25px;
display: flex;
justify-content: center;
/* este codigo es temporal prueba */
background-color: coral; }
/* final menu icon */
@media screen and (min-width: 768px) {
/* hacer un refactor */
/* inicio header meun */
.caja-menu-btn {
width: 100px; }
/* este codigo es temporal class prueba */
.user-header {
height: 50px;
display: flex;
justify-content: space-around; }
/* final header meun */
/* inicio meun */
.contenedor-menu-user {
width: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* este codigo es temporal prueba */
background: goldenrod; }
/* inicio titulo-empresa */
.titulo-empresa {
font-size: 80px;
text-align: center; }
/* final titulo-empresa */
.user-menu {
width: 300px;
height: 250px;
/* este codigo es temporal prueba */
background: goldenrod;
display: none;
flex-direction: column;
font-size: 25px; }
.contenedor-user-data {
display: flex;
justify-content: space-around;
border-bottom: 5px solid rgba(0, 0, 0, 0.3);
/* este codigo es temporal prueba */
margin: 10px 0; }
.menu-user {
display: flex;
flex-direction: column;
justify-content: space-around;
flex: 1;
margin: 0 10px; }
.main-menu-visible {
display: flex;
z-index: 1; }
.user-menu__link {
height: 100%;
display: flex;
flex-direction: column; }
/* inicio menu icon */
.menu-icono-user {
font-size: 25px;
transition: all 3s linear;
/* este codigo es temporal */
margin: [0.5em](//0.5em); }
.btn-menu-user {
display: block; }
/* inicio footer */
.contenedor-main-footer {
height: 28px;
display: flex;
justify-content: center;
/* este codigo es temporal prueba */
background-color: coral; } }
/* inicio tablero */
.contenedor-tablero {
display: flex;
justify-content: space-between;
/* este codigo es temporal */
background: #5c5c5c;
font-size: 48px; }
.contenedor-tabla {
display: flex;
flex-direction: column;
width: 175px;
/* este codigo es temporal */
background: #4d4b4b; }
.tabla-item {
width: 100%;
/* con Variable para height */
height: 50px;
text-align: center; }
.contenedor-Resultados {
display: flex;
flex-direction: column;
width: 55px;
/* este codigo es temporal */
background: #272525; }
.Resultado {
height: 50px;
text-align: center;
/* este codigo es temporal */
display: none; }
/* final tablero */
/* inicio visual */
.contenedor-visual-resul {
width: 50px;
display: flex;
flex-direction: column;
/* este codigo es temporal */
background: #2e2d2d; }
.visual- {
height: 33px;
text-align: center; }
.visual-incorre {
color: red; }
.visual-corre {
color: lime; }
/* final visual*/
.resul-activo {
line-height: 50px;
border: 4px solid gold;
display: block; }
/* inicio marcadores */
.contenedor-marcadores {
width: 110px;
height: 150px;
font-size: 22px;
/* este codigo es temporal */
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
background: #797474; }
.titulo-marca {
font-size: 16px; }
.txt-marca {
text-align: center; }
/* final marcadores */
/* inicio control */
.contenedor-control {
width: 125px;
/* este codigo es temporal prueba */
background-color: #4883b5;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center; }
.contenedor-botnes {
width: 110px;
height: 210px;
/* este codigo es temporal */
background: #3b3a3a;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center; }
/* este codigo es temporal class */
.lbe- {
font-size: 20px;
text-align: center; }
.txtnum {
width: 90%;
height: 60px;
font-size: 55px;
/* este codigo es temporal prueba */
margin: 0 10px; }
.btn-gral {
width: 90%;
height: 50px;
font-size: 25px;
/* este codigo es temporal prueba */
margin: 0 10px; }
/*final control */
/* inicio Media Queries tablero */
/* @media screen and (min-width: 320px) and (orientation: portrait) */
@media screen and (min-width: 320px) and (orientation: landscape) {
.contenedor-tablero {
font-size: 48px; }
.tabla-item {
height: 55px; }
.Resultado {
height: 55px; }
.contenedor-visual-resul {
display: flex; }
.contenedor-control {
width: 280px; }
.contenedor-marcadores {
width: 250px;
height: 150px;
font-size: 25px; }
.titulo-marca {
font-size: 32px; }
.txt-marca {
width: 110px; }
.contenedor-botnes {
width: 250px;
height: 210px; } }
@media screen and (min-width: 768px) {
.Resultado {
height: 64px; }
.tabla-item {
height: 64px; }
.contenedor-control {
width: 300px; }
.contenedor-marcadores {
height: 160px;
font-size: 32px; }
.titulo-marca {
font-size: 32px; }
.txt-marca {
text-align: center;
width: 110px; }
.lbe- {
align-self: center; } }
@media screen and (min-width: 1400px) {
.contenedor-tabla {
height: 645px; }
.tabla-item {
height: 120px; }
.Resultado {
height: 64px; } }
/* final Media Queries tablero */
JavaScript
/* este codigo es temporal */
// variables globales
const resulTabla = document.getElementsByClassName("Resultado");
let lbeInCorre = document.getElementById("lbe-incorre");
let lbeCorre = document.getElementById("lbe-corre");
const btn = document.getElementById("btn-siguiente");
let incorrecta = 0,
correcta = 0;
let existe = false;
/* este codigo es temporal prueba */
let txtMult, elemResul;
function compruebaResultados() {
txtMult = Number(document.getElementById("txtnum").value);
/* este codigo es temporal prueba */
console.log(monitorizar el campo : ${txtMult});
for (let i = 0; i < resulTabla.length; i++) {
elemResul = resulTabla[i];
if ([elemResul.textContent](//elemResul.textContent) == txtMult) {
[elemResul.classList.add](//elemResul.classList.add)("resul-activo");
correcta++;
compruebaExiste();
existe = true;
break;
} else {
if (correcta >= 1) {
compruebaExiste();
}
existe = false;
}
}
//
compruebaNoExiste();
marcadores();
}
function compruebaExiste() {
if (existe === true) {
existe = false;
correcta--;
/* este codigo es temporal prueba */
[console.warn](//console.warn)(`monitorizar : ${existe}`);
[console.warn](//console.warn)(`ya existe es ${txtMult} en Table 2`);
}
}
function compruebaNoExiste() {
if (existe === false) {
incorrecta++;
existe = false;
/* este codigo es temporal prueba */
[console.error](//console.error)(`no existe es ${txtMult} en Tabla 2`);
}
}
function marcadores() {
// aquí un error
//
existe = false;
/* este codigo es temporal prueba */
console.log(correcta : ${correcta});
console.log(incorrecta : ${incorrecta});
console.log(monitorizar : ${existe});
lbeCorre.textContent = correcta;
if (correcta === 10) {
[btn.disabled](//btn.disabled) = true;
[console.log](//console.log)(`tabla de 2 terminado ${correcta}`);
}
if (incorrecta >= 9) {
incorrecta += -9;
}
lbeInCorre.textContent = incorrecta;
}
btn.addEventListener("click", compruebaResultados);