---
# System prepended metadata

title: Tarea 8.01 jQuery

---

# 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">&#9823;</div>'); // Peón negro
    $('.cell').eq(4).append('<div class="piece">&#9812;</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();
}

```