# Tarea 8.01 jQuery
## Ejercicio 1:
Google, Netfliz, Amazon y Wordpress.
## Ejercicio 2:
$(selector).action()
## Ejercicio 3:
Define el acceso a jQuery
## Ejercicio 4:
Seleccionar todos los divs con la clase .miClase.
## Ejercicio 5:
Selecciona el id "elemento" y todas las etiquetas <a>.
## Ejercicio 6:
Verdadero.
## Ejercicio 7:
.show();
## Ejercicio 8:
.toggle();
## Ejercicio 9:
$("p").css("background-color", "red");
## Ejercicio escrito 1:
HTML:
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="script.js"></script>
<title>Ajedrez</title>
</head>
<body>
<div id="chessboard"></div>
</body>
</html>
```
CSS:
```css=
#chessboard {
display: grid;
grid-template-columns: repeat(8, 50px);
grid-template-rows: repeat(8, 50px);
}
.cell {
width: 50px;
height: 50px;
}
.white {
background-color: #fff;
}
.black {
background-color: #333;
}
.piece {
width: 100%;
height: 100%;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.piece:hover {
background-color: #ddd;
}
```
Javascript:
```javascript=
$(document).ready(function() {
// Crear el tablero de ajedrez
for (let row = 0; row < 8; row++) {
for (let col = 0; col < 8; col++) {
let cell = $('<div class="cell"></div>');
if ((row + col) % 2 === 0) {
cell.addClass('white');
} else {
cell.addClass('black');
}
cell.attr('data-row', row);
cell.attr('data-col', col);
$('#chessboard').append(cell);
}
}
// Agregar piezas (esto es solo un ejemplo)
$('.cell').eq(1).append('<div class="piece">♟</div>'); // Peón negro
$('.cell').eq(4).append('<div class="piece">♔</div>'); // Rey blanco
});
```
## Ejercicio escrito 2:
HTML:
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="script.js"></script>
<title>Ajedrez</title>
</head>
<body>
<div class="acordeon__contenedor">
<h2 class="acordeon__titulo">Titulo</h2>
<p class="acordeon__contenido"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, ex, eligendi. Iste, beatae error magni a sequi sit voluptatum obcaecati recusandae, nisi ipsa laboriosam vero cupiditate vel molestiae reiciendis itaque.</p>
</div>
</body>
</html>
```
CSS:
```css=
body {
background: #222;
font-family: sans-serif;
margin: 0;
padding: 0;
font-size: .9em;
}
h1 {
text-align: center;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 2em;
}
.acordeon {
width: 70%;
margin: auto;
}
.acordeon__titulo {
color: rgba(255, 255, 255, 0.5);
background: #111;
line-height: 2.8;
padding: 0 1em;
font-size: 1.2em;
margin: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 -1px 0 0 #000 inset;
text-shadow: 1px 1px #000;
cursor: pointer;
}
.acordeon__contenido {
display: none;
margin: 0;
background: rgba(255, 255, 255, 0.5);
padding: 1em 1em 1.5em;
}
```
jQuery:
```javascript=
$('.acordeon').on('click','h2',function(){
var t = $(this);
var tp = t.next();
var p = t.parent().siblings().find('p');
tp.slideToggle();
p.slideUp();
});
```
## Ejercicio escrito 3:
HTML:
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="script.js"></script>
<title>Teleprompter</title>
</head>
<body>
<div class="teleprompter-container">
<div class="teleprompter-content">
<p>Este es un texto de ejemplo que se desplaza horizontalmente en el teleprompter.</p>
</div>
</div>
</body>
</html>
```
CSS:
```css=
.teleprompter-container {
overflow: hidden;
white-space: nowrap;
}
.teleprompter-content {
animation: teleprompterScroll 10s linear infinite;
}
@keyframes teleprompterScroll {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
```
## Ejercicio escrito 4:
HTML:
```html=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="script.js"></script>
<title>Lista de Compras</title>
</head>
<body>
<div>
<label for="itemInput">Nuevo elemento:</label>
<input type="text" id="itemInput">
<button onclick="addItem()">Añadir</button>
<button onclick="resetList()">Resetear la lista</button>
</div>
<ol id="listaCompra"></ol>
</body>
</html>
```
```css=
#listaCompra li {
cursor: pointer;
}
#listaCompra li.completed {
text-decoration: line-through;
font-style: italic;
}
```
```javascript=
function addItem() {
var itemInput = $('#itemInput');
var itemName = itemInput.val().trim();
if (itemName !== '') {
var listItem = $('<li></li>').text(itemName);
listItem.click(function() {
$(this).toggleClass('completed');
});
listItem.dblclick(function() {
$(this).remove();
});
$('#listaCompra').append(listItem);
itemInput.val('');
}
}
function resetList() {
$('#listaCompra').empty();
}
```
Sign in with Wallet
Connect another wallet