Buen día. Mi pregunta es puedo sin trabajar con api para Framework React Angular Vue De antemano gracias

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);

no puedo compiler

De antemano gracias.

ya que no se que hacer ojala puedan ayudarme un saludo.

hola comunidad, He visto que usan el atributo role en algunas etiquetas de HTML. He buscado información en algunas páginas pero la verdad no me queda claro cómo funciona y si es que debo o no usarlo. yo Tengo parálisis cerebral me recomiendan ?

Buenas día. Mi pregunta es markdown con otros archivos de markdown. De antemano gracias.

Buenas día. Mi pregunta es seo Los meta tags más Debería seguir usando en 2019. De antemano gracias.

https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/los-meta-tags-mas-importantes-y-su-funcion/

Buen día. Mi pregunta es un solucionarlo para formulario. Estoy trabajando bajo en php. De antemano gracias.

Buen día. Mi pregunta es como pasar el valor de una variable php a javascript De antemano gracias. Ayuda por favor

hay un error en la comunidad no vaya Siguiente a pagina 2 de comunidad yo Tengo parálisis cerebral por eso me cuesta trabajo comunicarme.