1 | <!DOCTYPE html> |
2 | <html lang="es"> |
3 | |
4 | <head> |
5 | <meta charset="UTF-8"> |
6 | <meta name="viewport" |
7 | content="width=device-width"> |
8 | <title>¿Cuál te gusta más?</title> |
9 | <style> |
10 | html { |
11 | font-family: sans-serif; |
12 | } |
13 | |
14 | body { |
15 | display: grid; |
16 | gap: 0.5rem; |
17 | margin: 0; |
18 | padding: 0.5rem; |
19 | max-height: 100vh; |
20 | overflow: hidden; |
21 | grid-template-columns: |
22 | 1fr 1fr 1fr 1fr; |
23 | grid-template-areas: |
24 | "h1 h1 h1 h1" |
25 | "outGatito btnGatito outPerrito btnPerrito" |
26 | "imgGatito imgGatito imgPerrito imgPerrito"; |
27 | } |
28 | |
29 | h1 { |
30 | grid-area: h1; |
31 | text-align: center; |
32 | } |
33 | |
34 | #outGatito { |
35 | grid-area: outGatito; |
36 | justify-self: center; |
37 | } |
38 | |
39 | #btnGatito { |
40 | grid-area: btnGatito; |
41 | } |
42 | |
43 | #imgGatito { |
44 | grid-area: imgGatito; |
45 | width: 100%; |
46 | } |
47 | |
48 | #outPerrito { |
49 | grid-area: outPerrito; |
50 | justify-self: center; |
51 | } |
52 | |
53 | #btnPerrito { |
54 | grid-area: btnPerrito; |
55 | } |
56 | |
57 | #imgPerrito { |
58 | grid-area: imgPerrito; |
59 | width: 100%; |
60 | } |
61 | </style> |
62 | </head> |
63 | |
64 | <body> |
65 | <h1>¿Cuál te gusta más?</h1> |
66 | <output id="outGatito"> |
67 | 0 votos |
68 | </output> |
69 | <button id="btnGatito" |
70 | onclick="gatito()"> |
71 | Vota |
72 | </button> |
73 | <img id="imgGatito" alt="Gatito" |
74 | src="https://media.giphy.com/media/uWYjSbkIE2XIMIc7gh/giphy.gif"> |
75 | <output id=outPerrito> |
76 | 0 votos |
77 | </output> |
78 | <button id="btnPerrito" |
79 | onclick=perrito()> |
80 | Vota |
81 | </button> |
82 | <img id="imgPerrito" |
83 | alt="Perrito" |
84 | src="https://media.giphy.com/media/rXzOY4RpSA0Ug/giphy.gif"> |
85 | <script> |
86 | let votosGatito = 0 |
87 | let votosPerrito = 0 |
88 | |
89 | function gatito() { |
90 | votosGatito++ |
91 | outGatito.value = |
92 | `${votosGatito} votos` |
93 | } |
94 | |
95 | function perrito() { |
96 | votosPerrito++ |
97 | outPerrito.value = |
98 | `${votosPerrito} votos` |
99 | } |
100 | </script> |
101 | </body> |
102 | |
103 | </html> |