Accede a todo EDteam con un único pago¡Sube a premium!
Banner de perfil
0

Sebastian Cruz Gómez

@sebastiancruzgomez

Guadalajara, MEXICO

Framework api

Sebastian Cruz Gómez@sebastiancruzgomez

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

juego de tabla

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

1
2<!DOCTYPE html>
3
4<html lang="es">
5
6 <head>
7
8   <title>table</title>
9
10   <meta charset="UTF-8" />
11
12   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
13
14   <link rel="stylesheet" href="css/estilos.css" />
15
16   <script defer src="js/tabla.js"></script>
17
18 </head>
19
20
21
22 <body>
23
24   <div class="contenedor-main">
25
26     <!-- inicio header -->
27
28     <header class="user-header">
29
30       <div class="contenedor-titulo-">
31
32         <h1 class="titulo-table" role="">table 2</h1>
33
34       </div>
35
36     </header>
37
38     <!-- final header -->
39
40     <!-- .contenedor-tablero>.contenedor->div*[10.tabla-item](//10.tabla-item){2 x $ =} -->
41
42     <!-- .contenedor-Resultados>div*[10.Resultado](//10.Resultado) -->
43
44     <!-- .contenedor-visual-resul>*[10.-visual-incorre](//10.-visual-incorre){X} -->
45
46     <!-- .contenedor-visual-resul>*[10.-visual-corre](//10.-visual-corre){✓} -->
47
48     <!-- ocultar -->
49
50     <!-- inicio talero -->
51
52     <div class="contenedor-tablero">
53
54       <div class="contenedor-tabla">
55
56         <div class="tabla-item">2 x 1 =</div>
57
58         <div class="tabla-item">2 x 2 =</div>
59
60         <div class="tabla-item">2 x 3 =</div>
61
62         <div class="tabla-item">2 x 4 =</div>
63
64         <div class="tabla-item">2 x 5 =</div>
65
66         <div class="tabla-item">2 x 6 =</div>
67
68         <div class="tabla-item">2 x 7 =</div>
69
70         <div class="tabla-item">2 x 8 =</div>
71
72         <div class="tabla-item">2 x 9 =</div>
73
74         <div class="tabla-item">2 x 10 =</div>
75
76       </div>
77
78       <div class="contenedor-Resultados">
79
80         <div class="Resultado">2</div>
81
82         <div class="Resultado">4</div>
83
84         <div class="Resultado">6</div>
85
86         <div class="Resultado">8</div>
87
88         <div class="Resultado">10</div>
89
90         <div class="Resultado">12</div>
91
92         <div class="Resultado">14</div>
93
94         <div class="Resultado">16</div>
95
96         <div class="Resultado">18</div>
97
98         <div class="Resultado">20</div>
99
100       </div>
101
102       <div class="contenedor-control">
103
104         <div class="contenedor-marcadores">
105
106           <p class="titulo-marca">marcadores</p>
107
108           <div class="grid">
109
110             <p class="txt-marca">correcta</p>
111
112             <p id="lbe-corre" class="txt-marca">00</p>
113
114           </div>
115
116           <div class="grid">
117
118             <p class="txt-marca">incorrecta</p>
119
120             <p id="lbe-incorre" class="txt-marca">00</p>
121
122           </div>
123
124         </div>
125
126         <div class="contenedor-botnes">
127
128           <label for="txtnum" class="lbe-">escribir su respuesta</label>
129
130           <input type="text" id="txtnum" class="txtnum" autocomplete="off" />
131
132           <button type="button" id="btn-siguiente" class="btn-gral">
133
134             siguiente
135
136           </button>
137
138         </div>
139
140       </div>
141
142     </div>
143
144     <!-- final talero -->
145
146     <!-- inicio footer -->
147
148     <footer class="contenedor-main-footer">
149
150       <p id="txt-copy" class="secon-footer copy">
151
152         Copyright
153
154       </p>
155
156     </footer>
157
158     <!-- final footer -->
159
160   </div>
161
162 </body>
163
164</html>
165
166~~~css~~~
167
168[@charset](https://ed.team/@charset) "UTF-8";
169
170/* estilos generales de main */
171
172html {
173
174 box-sizing: border-box;
175
176 font-family: "Roboto", Arial, sans-serif;
177
178 font-size: 16px; }
179
180
181
182*,
183
184*::after,
185
186*::before {
187
188 padding: 0;
189
190 margin: 0;
191
192 box-sizing: inherit; }
193
194
195
196i {
197
198 color: black; }
199
200
201
202img {
203
204 max-width: 100%; }
205
206
207
208ul {
209
210 display: inline-block;
211
212 list-style: none; }
213
214
215
216a {
217
218 text-decoration: none;
219
220 color: black; }
221
222
223
224/* estilos generales */
225
226:root {
227
228 /* variables */
229
230 /* paleta de colar */
231
232 --Principal-fondo-color: #eee;
233
234 --Principal-color: #42a3db;
235
236 --first-color-alt: #006dc6;
237
238 --error-color-alt: #d32f2f;
239
240 --fon: #6a6a6a;
241
242 /* variables de layout */
243
244 --max-width: 1200px;
245
246 /* --tamapño-punto: 10px; */
247
248 /* variables de layout generales */
249
250 --max-width: 100vw;
251
252 --carta-height: 480px; }
253
254
255
256.contenedor-main {
257
258 width: 100%;
259
260 height: 100%;
261
262 margin: 0 auto;
263
264 background-color: var(--Principal-fondo-color); }
265
266
267
268/* este codigo es temporal prueba */
269
270.ocultar {
271
272 display: none !important; }
273
274
275
276/* este codigo es temporal prueba */
277
278.content-main {
279
280 margin-bottom: 15px; }
281
282
283
284.text-bold {
285
286 font-weight: bold; }
287
288
289
290.text-bolder {
291
292 font-weight: bolder; }
293
294
295
296.text-lighter {
297
298 font-weight: lighter; }
299
300
301
302.text-italic {
303
304 font-style: italic; }
305
306
307
308[@media](https://ed.team/@media) screen and (min-width: 320px) and (orientation: landscape) {
309
310 .grid {
311
312   display: grid;
313
314   grid-template-columns: repeat(2, 1fr);
315
316   grid-template-rows: repeat(1, 1fr);
317
318   grid-gap: 10px; } }
319
320
321
322.grid {
323
324 display: grid;
325
326 grid-template-columns: repeat(2, 1fr);
327
328 grid-template-rows: repeat(1, 1fr);
329
330 grid-gap: 10px; }
331
332
333
334/* inicio header meun */
335
336/* este codigo es temporal class prueba */
337
338.caja-menu-btn {
339
340 width: 75px;
341
342 background: goldenrod; }
343
344
345
346/* este codigo es temporal class prueba */
347
348.user-header {
349
350 height: 50px;
351
352 display: flex;
353
354 justify-content: space-around; }
355
356
357
358.btn-volver {
359
360 width: 110px;
361
362 border: 2px solid black;
363
364 text-align: center;
365
366 line-height: 50px; }
367
368
369
370.btn-volver:hover {
371
372 background: #eee; }
373
374
375
376/* final header meun */
377
378/* inicio meun */
379
380.contenedor-menu-user {
381
382 display: flex;
383
384 flex-direction: column;
385
386 justify-content: center;
387
388 align-items: center;
389
390 /* este codigo es temporal prueba */
391
392 background: goldenrod; }
393
394
395
396/* inicio titulo-empresa */
397
398.titulo-table {
399
400 line-height: 50px;
401
402 font-size: 32px;
403
404 text-align: center; }
405
406
407
408/* final titulo-empresa */
409
410.user-menu {
411
412 width: 300px;
413
414 height: 250px;
415
416 /* este codigo es temporal prueba */
417
418 background: goldenrod;
419
420 display: none;
421
422 flex-direction: column;
423
424 font-size: 25px; }
425
426
427
428.contenedor-user-data {
429
430 display: flex;
431
432 justify-content: space-around;
433
434 border-bottom: 5px solid rgba(0, 0, 0, 0.3);
435
436 /* este codigo es temporal prueba */
437
438 margin: 10px 0; }
439
440
441
442.menu-user {
443
444 display: flex;
445
446 flex-direction: column;
447
448 justify-content: space-around;
449
450 flex: 1;
451
452 margin: 0 10px; }
453
454
455
456.main-menu-visible {
457
458 display: flex;
459
460 z-index: 1; }
461
462
463
464/* .main-meun__item {} */
465
466.user-menu__link {
467
468 height: 100%;
469
470 display: flex;
471
472 flex-direction: column; }
473
474
475
476.user-meun__item:hover {
477
478 background-color: rgba(0, 0, 0, 0.3); }
479
480
481
482/* inicio menu icon */
483
484.menu-icono-user {
485
486 font-size: 25px;
487
488 transition: all 3s linear;
489
490 /* este codigo es temporal */
491
492 margin: [0.3em](//0.3em); }
493
494
495
496.btn-menu-user {
497
498 display: block; }
499
500
501
502.btn-menu-icono:hover {
503
504 cursor: pointer; }
505
506
507
508/* inicio footer */
509
510.contenedor-main-footer {
511
512 height: 25px;
513
514 display: flex;
515
516 justify-content: center;
517
518 /* este codigo es temporal prueba */
519
520 background-color: coral; }
521
522
523
524/* final menu icon */
525
526[@media](https://ed.team/@media) screen and (min-width: 768px) {
527
528 /* hacer un refactor */
529
530 /* inicio header meun */
531
532 .caja-menu-btn {
533
534   width: 100px; }
535
536 /* este codigo es temporal class prueba */
537
538 .user-header {
539
540   height: 50px;
541
542   display: flex;
543
544   justify-content: space-around; }
545
546 /* final header meun */
547
548 /* inicio meun */
549
550 .contenedor-menu-user {
551
552   width: 100px;
553
554   display: flex;
555
556   flex-direction: column;
557
558   justify-content: center;
559
560   align-items: center;
561
562   /* este codigo es temporal prueba */
563
564   background: goldenrod; }
565
566 /* inicio titulo-empresa */
567
568 .titulo-empresa {
569
570   font-size: 80px;
571
572   text-align: center; }
573
574 /* final titulo-empresa */
575
576 .user-menu {
577
578   width: 300px;
579
580   height: 250px;
581
582   /* este codigo es temporal prueba */
583
584   background: goldenrod;
585
586   display: none;
587
588   flex-direction: column;
589
590   font-size: 25px; }
591
592 .contenedor-user-data {
593
594   display: flex;
595
596   justify-content: space-around;
597
598   border-bottom: 5px solid rgba(0, 0, 0, 0.3);
599
600   /* este codigo es temporal prueba */
601
602   margin: 10px 0; }
603
604 .menu-user {
605
606   display: flex;
607
608   flex-direction: column;
609
610   justify-content: space-around;
611
612   flex: 1;
613
614   margin: 0 10px; }
615
616 .main-menu-visible {
617
618   display: flex;
619
620   z-index: 1; }
621
622 .user-menu__link {
623
624   height: 100%;
625
626   display: flex;
627
628   flex-direction: column; }
629
630 /* inicio menu icon */
631
632 .menu-icono-user {
633
634   font-size: 25px;
635
636   transition: all 3s linear;
637
638   /* este codigo es temporal */
639
640   margin: [0.5em](//0.5em); }
641
642 .btn-menu-user {
643
644   display: block; }
645
646 /* inicio footer */
647
648 .contenedor-main-footer {
649
650   height: 28px;
651
652   display: flex;
653
654   justify-content: center;
655
656   /* este codigo es temporal prueba */
657
658   background-color: coral; } }
659
660
661
662/* inicio tablero */
663
664.contenedor-tablero {
665
666 display: flex;
667
668 justify-content: space-between;
669
670 /* este codigo es temporal */
671
672 background: #5c5c5c;
673
674 font-size: 48px; }
675
676
677
678.contenedor-tabla {
679
680 display: flex;
681
682 flex-direction: column;
683
684 width: 175px;
685
686 /* este codigo es temporal */
687
688 background: #4d4b4b; }
689
690
691
692.tabla-item {
693
694 width: 100%;
695
696 /* con Variable para height */
697
698 height: 50px;
699
700 text-align: center; }
701
702
703
704.contenedor-Resultados {
705
706 display: flex;
707
708 flex-direction: column;
709
710 width: 55px;
711
712 /* este codigo es temporal */
713
714 background: #272525; }
715
716
717
718.Resultado {
719
720 height: 50px;
721
722 text-align: center;
723
724 /* este codigo es temporal */
725
726 display: none; }
727
728
729
730/* final tablero */
731
732/* inicio visual */
733
734.contenedor-visual-resul {
735
736 width: 50px;
737
738 display: flex;
739
740 flex-direction: column;
741
742 /* este codigo es temporal */
743
744 background: #2e2d2d; }
745
746
747
748.visual- {
749
750 height: 33px;
751
752 text-align: center; }
753
754
755
756.visual-incorre {
757
758 color: red; }
759
760
761
762.visual-corre {
763
764 color: lime; }
765
766
767
768/* final visual*/
769
770.resul-activo {
771
772 line-height: 50px;
773
774 border: 4px solid gold;
775
776 display: block; }
777
778
779
780/* inicio marcadores */
781
782.contenedor-marcadores {
783
784 width: 110px;
785
786 height: 150px;
787
788 font-size: 22px;
789
790 /* este codigo es temporal */
791
792 display: flex;
793
794 flex-direction: column;
795
796 justify-content: space-around;
797
798 align-items: center;
799
800 background: #797474; }
801
802
803
804.titulo-marca {
805
806 font-size: 16px; }
807
808
809
810.txt-marca {
811
812 text-align: center; }
813
814
815
816/* final marcadores */
817
818/* inicio control */
819
820.contenedor-control {
821
822 width: 125px;
823
824 /* este codigo es temporal prueba */
825
826 background-color: #4883b5;
827
828 display: flex;
829
830 flex-direction: column;
831
832 justify-content: space-around;
833
834 align-items: center; }
835
836
837
838.contenedor-botnes {
839
840 width: 110px;
841
842 height: 210px;
843
844 /* este codigo es temporal */
845
846 background: #3b3a3a;
847
848 display: flex;
849
850 flex-direction: column;
851
852 justify-content: space-around;
853
854 align-items: center; }
855
856
857
858/* este codigo es temporal class */
859
860.lbe- {
861
862 font-size: 20px;
863
864 text-align: center; }
865
866
867
868.txtnum {
869
870 width: 90%;
871
872 height: 60px;
873
874 font-size: 55px;
875
876 /* este codigo es temporal prueba */
877
878 margin: 0 10px; }
879
880
881
882.btn-gral {
883
884 width: 90%;
885
886 height: 50px;
887
888 font-size: 25px;
889
890 /* este codigo es temporal prueba */
891
892 margin: 0 10px; }
893
894
895
896/*final control */
897
898/* inicio Media Queries tablero */
899
900/* [@media](https://ed.team/@media) screen and (min-width: 320px) and (orientation: portrait) */
901
902[@media](https://ed.team/@media) screen and (min-width: 320px) and (orientation: landscape) {
903
904 .contenedor-tablero {
905
906   font-size: 48px; }
907
908 .tabla-item {
909
910   height: 55px; }
911
912 .Resultado {
913
914   height: 55px; }
915
916 .contenedor-visual-resul {
917
918   display: flex; }
919
920 .contenedor-control {
921
922   width: 280px; }
923
924 .contenedor-marcadores {
925
926   width: 250px;
927
928   height: 150px;
929
930   font-size: 25px; }
931
932 .titulo-marca {
933
934   font-size: 32px; }
935
936 .txt-marca {
937
938   width: 110px; }
939
940 .contenedor-botnes {
941
942   width: 250px;
943
944   height: 210px; } }
945
946
947
948[@media](https://ed.team/@media) screen and (min-width: 768px) {
949
950 .Resultado {
951
952   height: 64px; }
953
954 .tabla-item {
955
956   height: 64px; }
957
958 .contenedor-control {
959
960   width: 300px; }
961
962 .contenedor-marcadores {
963
964   height: 160px;
965
966   font-size: 32px; }
967
968 .titulo-marca {
969
970   font-size: 32px; }
971
972 .txt-marca {
973
974   text-align: center;
975
976   width: 110px; }
977
978 .lbe- {
979
980   align-self: center; } }
981
982
983
984[@media](https://ed.team/@media) screen and (min-width: 1400px) {
985
986 .contenedor-tabla {
987
988   height: 645px; }
989
990 .tabla-item {
991
992   height: 120px; }
993
994 .Resultado {
995
996   height: 64px; } }
997
998
999
1000/* final Media Queries tablero */
1001
1002~~~JavaScript~~~
1003
1004/* este codigo es temporal */
1005
1006// variables globales
1007
1008const resulTabla = document.getElementsByClassName("Resultado");
1009
1010let lbeInCorre = [document.getElementById](//document.getElementById)("lbe-incorre");
1011
1012let lbeCorre = [document.getElementById](//document.getElementById)("lbe-corre");
1013
1014const btn = [document.getElementById](//document.getElementById)("btn-siguiente");
1015
1016
1017
1018let incorrecta = 0,
1019
1020 correcta = 0;
1021
1022let existe = false;
1023
1024/* este codigo es temporal prueba */
1025
1026let txtMult, elemResul;
1027
1028function compruebaResultados() {
1029
1030 txtMult = Number([document.getElementById](//document.getElementById)("txtnum").value);
1031
1032 /* este codigo es temporal prueba */
1033
1034 [console.log](//console.log)(`monitorizar el campo : ${txtMult}`);
1035
1036 for (let i = 0; i < [resulTabla.length](//resulTabla.length); i++) {
1037
1038   elemResul = resulTabla[i];
1039
1040   if ([elemResul.textContent](//elemResul.textContent) == txtMult) {
1041
1042     [elemResul.classList.add](//elemResul.classList.add)("resul-activo");
1043
1044     correcta++;
1045
1046     compruebaExiste();
1047
1048     existe = true;
1049
1050     break;
1051
1052   } else {
1053
1054     if (correcta >= 1) {
1055
1056       compruebaExiste();
1057
1058     }
1059
1060     existe = false;
1061
1062   }
1063
1064 }
1065
1066 //
1067
1068 compruebaNoExiste();
1069
1070 marcadores();
1071
1072}
1073
1074function compruebaExiste() {
1075
1076 if (existe === true) {
1077
1078   existe = false;
1079
1080   correcta--;
1081
1082   /* este codigo es temporal prueba */
1083
1084   [console.warn](//console.warn)(`monitorizar : ${existe}`);
1085
1086   [console.warn](//console.warn)(`ya existe es ${txtMult} en Table 2`);
1087
1088 }
1089
1090}
1091
1092function compruebaNoExiste() {
1093
1094 if (existe === false) {
1095
1096   incorrecta++;
1097
1098   existe = false;
1099
1100   /* este codigo es temporal prueba */
1101
1102   [console.error](//console.error)(`no existe es ${txtMult} en Tabla 2`);
1103
1104 }
1105
1106}
1107
1108function marcadores() {
1109
1110 // aquí un error
1111
1112 //
1113
1114 existe = false;
1115
1116 /* este codigo es temporal prueba */
1117
1118 [console.log](//console.log)(`correcta : ${correcta}`);
1119
1120 [console.log](//console.log)(`incorrecta : ${incorrecta}`);
1121
1122 [console.log](//console.log)(`monitorizar : ${existe}`);
1123
1124 [lbeCorre.textContent](//lbeCorre.textContent) = correcta;
1125
1126 if (correcta === 10) {
1127
1128   [btn.disabled](//btn.disabled) = true;
1129
1130   [console.log](//console.log)(`tabla de 2 terminado ${correcta}`);
1131
1132 }
1133
1134 if (incorrecta >= 9) {
1135
1136   incorrecta += -9;
1137
1138 }
1139
1140 [lbeInCorre.textContent](//lbeInCorre.textContent) = incorrecta;
1141
1142}
1143
1144[btn.addEventListener](//btn.addEventListener)("click", compruebaResultados);

¿Qué es y para qué es el atributo role de HTML?

Sebastian Cruz Gómez@sebastiancruzgomez

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 ?

hay un error en la comunidad

Sebastian Cruz Gómez@sebastiancruzgomez

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.

Pregunta a ChatEDT