---
puppeteer:
    format: A4
    margin:
        top: "0.1cm"
        bottom: "0.1cm"
        left: "0.5cm"
        right: "0
---

# WEB - TD2 - JavaScript

## Ex1

La fonction `prompt()` en JS fonctionne comme `input` en python. Elle permet de demander du texte à l'utilisateur.

```js
let texte = prompt("Entrez du texte")
```

La fonction `alert` permet de créer une boîte de dialogue et afficher du texte à l'utilisateur

```js
alert("Aleeeeeerte !!");
```

1. Utiliser ces fonctions pour demander un texte à l'utilisateur et écrire ce texte dans une boîte de dialogue.
2. De même, demander un texte à l'utilisateur et afficher ce texte dans le corps de la page (body)

## Ex2

1. Créer deux variables `a` et `b` qui valent respectivement 17432 et 5
1. Créer une variable `result` qui contient la somme des variables `a` et `b`. Afficher le résultat de la somme dans une boite de dialogue.

## Ex3 

1. À l'aide de la fonction `prompt()`, demander un prix HT à l'utilisateur puis insérer le prix TTC (TVA 20 %) dans la page HTML à l'aide de `document.body.textContent`
2. Modifier le code pour insérer le prix TTC sous forme de titre, grâce à `document.body.innerHTML`
3. Modifier le code pour changer la couleur du texte selon la règle suivante :
   1. Si le prix ttc est supérieur à 100, affciher le texte en rouge
   2. Sinon, l'afficher en vert

## Ex4

Grâce à la boucle de votre choix, afficher en console tous les multiples de 10 jusqu'à 1000.

## Ex5

En utilisant la boucle for, afficher la table de multiplication du chiffre 5 dans la page HTML. L'affichage attendu doit ressembler à ça (sans le cadre):

![mult](mult.png)

## Ex6

Dans une page HTML, créer un bouton qui affiche une boîte de dialogue avec le message "Hello !" lorsqu'on clique dessus
- Utiliser l'attribut `onclick`
- Modifier le code pour utiliser `addEventListener`

## Ex8

Objectif :
- La page contient un titre, un paragraphe, et un bouton.
- Au clic sur le bouton, le thème passe du mode clair au mode sombre et vice-versa.
- Le mode clair a un fond blanc avec texte noir.
- Le mode sombre a un fond noir avec texte blanc.

1. Prenez le code suivant et intégrez le css et un code javascript dans la page
2. Ajoutez un gestionnaire d'évènement `click` avec `addEventListener` au bouton
3. Ajoutez un selecteur sur la classe `dark` au CSS qui contienne le style du mode sombre
4. Basculez la classe de body à `dark` lorsqu'on clique sur le bouton
5. Changez le texte du bouton pour qu'il affiche le texte "Mode sombre" ou "Mode clair" selon le thème

```css
body {
    background-color: white;
    color: black;
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 2em;
    transition: background-color 0.3s, color 0.3s;
}
button {
    margin-top: 1em;
    padding: 0.5em 1em;
    cursor: pointer;
}
```

```html
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <title>Exercice thème</title>
</head>
<body>
  <h1>Changer le thème</h1>
  <p>Appuyez sur le bouton pour changer le thème clair / sombre.</p>
  <button id="btnTheme">Changer le thème</button>
</body>
</html>
```

## Ex9 

1. Créer une liste en HTML
2. Ajoutez un bouton qui ouvre une boîte de dialogue pour demander un texte à l'utilisateurice et l'ajoute à la suite de la liste
3. Ajoutez un bouton au bout de chaque élément de la liste qui permette de le supprimer