---
# System prepended metadata

title: Prework

---

## PreWork

## Hello, JavaScript!

Trabajamos un poquito más con JavaScript, que es lo que le da **vida** al código 😊

Dentro de nuestra carpeta personal de prework, creamos la carpeta `javascript` (recordar, siempre en minúsculas). En forma de árbol, la estructura de carpetas es (ejemplo: wendy-darling):

```
staff
 |- pepito-grillo
 |- campa-nilla
 |- peter-pan
 |- wendy-darling
     |- prework
         |- app
         |- javascript
```

En la carpeta `app` se encuentran los ficheros del ejercicio anterior, realizado durante estos días anteriores.

En la carpeta `javascript` añadimos uno a uno los ejercicios que realizamos a continuación.

### hello-world

Ponemos un ejemplo, para que se entienda la dinámica. Dentro de la carpeta `javascript`, creamos otra carpeta `hello-world` (en minúsculas, y separando las palabras por un guión). Dentro de ella creamos dos ficheros, `index.html`, y `main.js`.

```
staff
 |- ...
 |- wendy-darling
     |- prework
         |- app
         |- javascript
             |- hello-world
                 |- index.html
                 |- main.js
```

Dentro del fichero `main.js` escribimos un código básico para saludarnos con JavaScript:

**main.js**
```javascript
console.log('Hello, World!')
```

Y ahora, dentro del fichero `index.html`, escribimos la estructura básica de un documento HTML, con el título `Hello, World!` en la cabeza (dentro del `<title>` en el `<head>`) y en el cuerpo (dentro del `<h1>` en el `<body>`). Añadimos una etiqueta `<script>` (justo antes de cerrar el `</body>`) para enlazar el fichero JavaScript anterior (`main.js`) con este documento:

**index.html**
```htmlmixed
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello, World!</title>
</head>

<body>
    <h1>Hello, World!</h1>
    
    <script src="main.js"></script>
</body>

</html>
```

Por último, probamos el resultado abriendo este fichero `index.html` en el navegador, mediante la extensión *Live Server*, previamente instalada en el *Visual Studio Code*. Con la página ya cargada, nos vamos al *inspector* del navegador, y en la *Cónsola de JavaScript* vemos el mensaje:

```javascript
Hello, World!
```

Esto confirma que hemos realizado bien los pasos anteriores 😉

### string-to-array

Vamos con el primer challenge. Creamos la estructura de carpetas, análoga al ejemplo anterior:

```
staff
 |- ...
 |- wendy-darling
     |- prework
         |- app
         |- javascript
             |- ...
             |- string-to-array
                 |- index.html
                 |- main.js
```

El `index.html` es prácticamente igual, sólo ponemos el título `String To Array` (en el head y el body). Este fichero sólo lo usamos para cargar y probar el código JavaSCript que tenemos en el `main.js`, cuando abrimos este documento en el navegador y observamos lo que se muestra en el inspector (Cónsola de JavaScript).

Se trata de desarrollar una función que permita "convertir" (extraer, mejor dicho) un `array` de un `string`. Por ejemplo, si tenemos un string `"Cocoliso"`, al enviarlo a la función como parámetro, ésta lo procesa extrayendo cara carácter de ese string para ponerlo en un nuevo array `['C', 'o', 'c', 'o', 'l', 'i', 's', 'o']` y luego retornarlo (devolverlo) desde la función. Para ello nos basamos en el siguiente código de base, el cual escribimos en el `main.js`:

**main.js**
```javascript
function stringToArray(string) {
    // TODO implement me with a for loop
}

// CASE Hello, World!

var helloString = 'Hello, World!'

var helloChars = stringToArray(helloString)

console.log(helloChars)
// (13) ['H', 'e', 'l', 'l', 'o', ',', ' ', 'W', 'o', 'r', 'l', 'd', '!']


// CASE empty string

var emptyString = ''

var noChars = stringToArray(emptyString)

console.log(noChars)
// []

// CASE blank string (3 spaces)

var blankString = '   '

var spaceChars = stringToArray(blankString)

console.log(spaceChars)
// (3) [' ', ' ', ' ']
```

El objetivo es implementar la función `stringToArray` para que cumpla con estos ejemplos de prueba de código (casos de prueba, CASEs). Para comprobar que la función está haciendo lo que se especifica en estas pruebas, revisamos la Cónsola de JavaScript en el inspector, una vez abierta la página en el navegador (con *Live Server*). Ese proceso de desarrollo de código es un constante ir y venir entre el *Visual Studio Code* y el inspector del navegador, donde comprobamos el resultado cada vez que cambiamos algo en el fichero `main.js`.

Una vez terminado el desarrollo, subimos la solución a la carpeta del drive (explicada días atrás en un vídeo del prework).


### register-user

En este challenge implementamos una función que nos permita registrar un usuario en una base de datos (un array). La estructura de ficheros es:


```
staff
 |- ...
 |- wendy-darling
     |- prework
         |- app
         |- javascript
             |- ...
             |- register-user
                 |- index.html
                 |- main.js
```

Partimos del siguiente código HTML, en el `index.html`:

**index.html**

```htmlmixed
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>
</head>

<body>
    <h1>Register</h1>

    <form id="register-form">
        <label for="name">Name</label>
        <input id="name" type="text">

        <label for="email">Email</label>
        <input type="email" id="email">

        <label for="password">Password</label>
        <input id="password" type="password">

        <button class="right">Register</button>
    </form>

    <script src="main.js"></script>
</body>

</html>
```

y el siguiente código JavaScript, en el `main.js`:

**main.js**

```javascript
const users = [
    { 
        name: 'Pepito Grillo', 
        email: 'pepito@grillo.com', 
        password: '123123123'
    },
    { 
        name: 'Campa Nilla', 
        email: 'campa@nilla.com', 
        password: '123123123'
    }
]

function registerUser(name, email, password) {
    // TODO implement register logic here
}

const registerForm = document.getElementById('register-form')

registerForm.onsubmit = function (event) {
    event.preventDefault()

    const name = event.target.name.value
    const email = event.target.email.value
    const password = event.target.password.value

    const result = registerUser(name, email, password)
    
    if (result)
        alert('User successfully registered')
    else
        alert('User already exists')
}
```

El objetivo es implementar la función `registerUser` presentada arriba y que haga lo siguiente:

- Buscar en el array de `users` un objeto con los datos del usuario que se está intentando registrar. Para ello buscamos en el array un objeto que tenga la propiedad `email` igual al email que se envía a la función.

- Si encontramos a un usario en el array, entonces significa que el usuario ya existe (ya se había registrado antes) y, por tanto, no se puede volver a registrar. En ese caso, la función tiene que devolver `false`, indicando así que no ha podido registrarlo (porque ya existe).

- Si no encontramos a ningún usuario con ese email, entonces procedemos a registrarlo (añadirlo a la base de datos, el array `users`). Para ello creamos un objeto nuevo, con los datos del usuario como propiedades (`name`, `email`, `password`), y luego lo añadimos al array.

Para comprobar que todo es proceso de registro está funcionando, simplemente abrimos la Cónsola de JavaScript, y luego de registrar un usuario, revisamos el array `users`. Deberíamos ver, que el usuario ha sido añadido al array, si no existía antes.

Ejemplo:

Abrimos el `index.html` en el navegador. Con ello se abre el formulario de registro. Llenamos el formulario con los datos de un usuario en los campos correspondientes, por ejemplo:

- name: **Peter Pan**
- email: **peter@pan.com**
- password: **123123123**

Luego enviamos el formulario, y si el usuario es nuevo (no estaba registrado), veremos el mensaje de alerta "User successfully registered". Por el contrario, si el usuario ya estaba registrado, veremos el mensaje "User already exists" (por ejemplo, si probamos de registrar al usuario *campa@nilla.com*, que ya existe en el array de `users`).

Probamos ambas situaciones, de manera que testeamos bien la funcionalidad del registro de usuarios, y la función que hemos implementado (`registerUser`).