M. Encuesta

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

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>
skip_previous skip_next