-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
186 lines (160 loc) · 8.77 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta Principales -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!-- meta SEO -->
<title>Todointerconectado | Ejercicio 1</title>
<meta name="language" content="en">
<meta name="title" content="Todointerconectado | Francisco Carusso">
<meta name="generator" content="todointerconectado.com">
<meta name="author" lang="en" content="Francisco Carusso | Todointerconectado">
<meta name="application-name" content="Todointerconectado">
<meta name="copyright" content="Copyright © todointerconectado.com">
<meta name="description" content="Soy Francisco Carusso Frontend Developer, Fundador de Todointerconectado y subo videos a YouTube donde aprenderás programación front-end html5, css3, javascript">
<meta name="keywords" content="frontend, html5, css3, javascript, francisco carusso, todointerconectado, front-end developer, programación">
<meta name="robots" content="index, follow">
<meta name="audience" content="all">
<meta name="category" content="tecnologías">
<meta itemprop="name" content="Todointerconectado">
<meta itemprop="telephone" content="+5491154120432">
<meta itemprop="image" content="https://todointerconectado.com/basicojavascript/css/images/miniatura.png">
<!-- meta Facebook SEO: The Open Graph protocol -->
<meta property="og:title" content="Todointerconectado | Francisco Carusso">
<meta property="og:type" content="website">
<meta property="og:url" content="https://todointerconectado.com">
<meta property="og:image" content="https://todointerconectado.com/basicojavascript/css/images/miniatura.png">
<meta property="og:image:alt" content="Banner de portada de página">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1179">
<meta property="og:image:height" content="438">
<meta property="og:description" content="Soy Francisco Carusso Frontend Developer, Fundador de Todointerconectado y subo videos a YouTube donde aprenderás programación front-end html5, css3, javascript">
<meta property="og:site_name" content="Todointerconectado">
<!-- Languages -->
<meta content="es_ES" property="og:locale">
<meta content="en_US" property="og:locale:alternate">
<meta content="es_MX" property="og:locale:alternate">
<meta content="fr_FR" property="og:locale:alternate">
<meta content="fr_CA" property="og:locale:alternate">
<meta content="it_IT" property="og:locale:alternate">
<meta content="pt_BR" property="og:locale:alternate">
<meta content="hi_IN" property="og:locale:alternate">
<meta content="de_DE" property="og:locale:alternate">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@Todointerconect">
<meta name="twitter:creator" content="@Todointerconect">
<meta name="twitter:title" content="Todointerconectado | Francisco Carusso">
<meta name="twitter:description" content="Soy Francisco Carusso Frontend Developer, Fundador de Todointerconectado y subo videos a YouTube donde aprenderás programación front-end html5, css3, javascript">
<meta property="twitter:url" content="https://todointerconectado.com/">
<meta name="twitter:image" content="https://todointerconectado.com/CSS/img/miniatura.png">
<link rel="shortcut icon" href="https://todointerconectado.com/CSS/img/favicons/apple-icon-57x57.png">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/eventoClick.css">
</head>
<body>
<a href="https://todointerconectado.com/" target="_blank"><h1>hello, world!</h1></a>
<h2>etiqueta <h2></h2>
<h2 align="center">
¡Hey <img src="https://media.giphy.com/media/hvRJCLFzcasrR4ia7z/giphy.gif" width="28">! Soy Francisco Carusso 👨🏻💻
<p>
<img align="center" src="https://readme-typing-svg.herokuapp.com?font=Jetbrain+Mono&color=76F78C&lines=A+passionate+frontend+Student;Always+learning+new+things">
</p>
</h2>
<img id="portada" class="img" src="css/images/firefox.png" alt="image">
<button class="usuarioBtn">Cambiar de Usuario</button>
<section class="DescubleNumero">
<h2>Juego de adivinanzas de números</h2>
<p>
Hemos seleccionado un número aleatorio entre 1 y 100. <br>
Vea si puede adivinarlo en 10 turnos o menos. <br>
Le diremos si su conjetura fue demasiado alta o demasiado baja.
</p>
<div class="form">
<label for="guessField">Introduce un número: </label>
<input type="number" min="1" max="100" required id="guessField" class="guessField">
<input id="submit" type="submit" value="Enviar valor" class="guessSubmit">
</div>
<div class="resultParas">
<p class="guesses"></p>
<p class="lastResult"></p>
<p class="lowOrHi"></p>
</div>
</section>
<a href="./html/ejercicos_clase5.html" target="_blank">Guía de ejercicios - Clase 5</a>
<section id="containerEventoClick">
<div id="box1" class="box">
<h2>box: 1</h2>
<code>
let box1 = document.getElementById('box1'); <br>
let btn = document.getElementById('btnRed'); <br>
let contador = 0; <br> <br>
function cambiarColor() { <br>
if (contador == 0) { <br>
box1.classList.add('boxRed'); <br>
btn.classList.add('boxRed'); <br>
contador = 1; <br>
} <br>
else { <br>
box1.classList.remove('boxRed'); <br>
btn.classList.remove('boxRed'); <br>
contador = 0; <br>
} <br>
} <br> <br>
// Evento <br>
btn.addEventListener('click', cambiarColor, true);
</code>
</div>
<button id="btnRed" class="btnRed">btn: Cambiar color a red</button>
<div id="box2" class="box">
<h2>box: 2</h2>
<code>
let box2 = document.querySelector("#box2"); <br>
let box2 = document.querySelector("#box2"); <br>
let btnBlue = document.querySelector("#btnBlue"); <br> <br>
function cambiarColorBlue() { <br>
box2.classList.toggle("boxBlue"); <br>
btnBlue.classList.toggle("boxBlue"); <br>
} <br> <br>
// Evento <br>
btnBlue.addEventListener('click', cambiarColorBlue, true); <br>
</code>
</div>
<button id="btnBlue" class="btnBlue">btnBlue: Cambiar color a blue</button>
<div id="box3" class="box">
<h2>box: 3</h2>
<code>
let box2 = document.querySelector("#box2"); <br>
let btnBlue = document.querySelector("#btnBlue"); <br> <br>
// Evento <br>
</code>
</div>
<form id="form1" class="containerBtnBox3">
<label id="label1" for="valueColor">
<span>color en ingles o hexadecimal:</span>
<input type="text" id="valueColor" list="frameworks" required placeholder="Ingresa un color:">
</label>
<datalist id="frameworks">
<option value="blue">blue</option>
<option value="red">red</option>
<option value="green">green</option>
<option value="Yellow">Yellow</option>
<option value="Pink">Pink</option>
<option value="white">white</option>
<option value="Black">Black</option>
<option value="purple">purple</option>
<option value="orange">orange</option>
<option value="salmon">salmon</option>
</datalist>
<button type="submit" id="btnEnviarColor" class="btnElegir">Enviar color ingresado</button>
</form>
</section>
<a href="./html/ejercicos_clase5.html" target="_blank">Guía de ejercicios - Clase 5</a>
<a href="./html/clase5.html" target="_blank">Metodos 2 JavaScript</a>
<a href="./html/metodosJS.html" target="_blank">Metodos 3 JavaScript</a>
<script src="./js/clase_1.js"></script>
<script src="./js/clickAttribute.js"></script>
<script src="./js/eventoClick.js"></script>
</body>
</html>