diff --git a/B-integration.md b/B-integration.md
index ff17217f8f2cec51a6c9f89671c1e032266a92bc..0381e04255aba855f5a22031e09ae1af096c8644 100644
--- a/B-integration.md
+++ b/B-integration.md
@@ -32,7 +32,7 @@ On pourrait, pour cet exercice, utiliser n'importe quel serveur http (apache, to
3. **Vérifiez dans votre navigateur que la page index.html** (fournie dans ce repo) **s'affiche correctement** en ouvrant l'url http://localhost:8000. Le résultat attendu est le suivant :
- <img src="images/readme/pizzaland-00.jpg" >
+ <img src="images/readme/pizzaland-00.png" >
> _**NB :** Si la page ne s'affiche pas correctement, vérifiez que vous avez bien lancé votre serveur Node avec npx dans **le bon dossier** (c'est à dire celui où se trouve le fichier `index.html`)._
@@ -73,17 +73,21 @@ C'est cette solution que je préconise car elle présente l'avantage de ne pas m
## B.3. Tester la page
**Testez la page pour vérifier que le js est correctement chargé** : Ouvrez les outils de développement de votre navigateur (touche <kbd>F12</kbd> sur Chrome) et ouvrez le panneau "Console".
-Si le fichier `main.js` est correctement chargé, le texte `'welcome to Pizzaland !'` doit s'afficher dans la console. <br>
+Si le fichier `main.js` est correctement chargé, le texte `'welcome to Pizzaland !'` doit s'afficher dans la console.
+
+<img src="images/readme/pizzaland-00-console.png" >
+
En effet, le fichier `main.js` contient l'instruction :
+
```js
-console.log('Welcome to Pizzaland !');
+console.log('Welcome to PizzaLand 🍕 !');
```
Cette instruction `console.log()` permet d'afficher du texte ou des variables dans la console.
-> _**NB :** Si le texte ne s'affiche pas, c'est probablement que le fichier `main.js` n'est pas correctement intégré dans la page html :_
+> _**NB :** **Si le texte ne s'affiche pas**, c'est probablement que le fichier `main.js` n'est pas correctement intégré dans la page html :_
>
-> _Ouvrez le panneau "Network"/"Réseau" des devtools puis rechargez la page en désactivant le cache navigateur : touche <kbd>CTRL</kbd>+<kbd>F5</kbd>, ou <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>R</kbd> selon les navigateurs. Assurez-vous que cette fois le fichier `main.js` figure bien dans la liste des fichiers téléchargés. Si ce n'est toujours pas le cas, c'est que votre balise `<script>` n'est pas correcte (vérifiez le chemin vers le fichier)._
+> _Ouvrez le panneau **"Network"**/**"Réseau"** des devtools puis rechargez la page en désactivant le cache navigateur : touche <kbd>CTRL</kbd>+<kbd>F5</kbd>, ou <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>R</kbd> selon les navigateurs. Assurez-vous que cette fois le fichier `main.js` figure bien dans la liste des fichiers téléchargés. Si ce n'est toujours pas le cas, c'est que votre balise `<script>` n'est pas correcte (vérifiez le chemin vers le fichier)._
**_Pour la suite du TP, tout le code se fera dans ce fichier `main.js`, le fichier html ne devra pas être modifié !_**
diff --git a/D-chaines.md b/D-chaines.md
index 1c3bf45de34fc00ba0d56b8b4cf075f2d08c16c9..96e92704d22bf001ba3bb234f7a4ace7d05e914d 100644
--- a/D-chaines.md
+++ b/D-chaines.md
@@ -45,10 +45,10 @@ Si ce n'est pas le cas, le choix entre guillemets simples ou double est une ques
**Entrons dans le vif du sujet :**
1. **Effacez le code contenu dans le fichier `main.js`** pour repartir d'un fichier vide.
-2. **Créez une constante appelée `nom`** et assignez lui la chaîne de caractères `Regina`
+2. **Créez une constante appelée `name`** et assignez lui la chaîne de caractères `Regina`
3. **Créez une constante nommée `url`.** Sa valeur initiale sera la concaténation de :
- la chaîne de caractères `'images/'`,
- - la valeur de la variable `nom` transformée en minuscules à l'aide de la méthode `.toLowerCase()` cf. [doc](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase)
+ - la valeur de la variable `name` transformée en minuscules à l'aide de la méthode `.toLowerCase()` (_cf. [la doc de `toLowerCase()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase)_)
- et de la chaîne de caractères `'.jpg'`
Affichez la valeur de `url` dans la console, vous devez obtenir :
@@ -71,7 +71,7 @@ Si ce n'est pas le cas, le choix entre guillemets simples ou double est une ques
## D.4. Injection dans la page HTML
-5. **C'est le moment d'afficher le contenu de la variable `html` dans la page.**
+1. **C'est le moment d'afficher le contenu de la variable `html` dans la page.**
Même si nous n'avons pas encore vu comment manipuler la page html grâce à l'API DOM (prochains chapitres), vous trouverez ci-dessous le code qui va permettre d'injecter notre balise `<a>` dans la page. A la fin de votre code, ajoutez donc l'instruction suivante :
```js
@@ -83,22 +83,34 @@ Si ce n'est pas le cas, le choix entre guillemets simples ou double est une ques
- voir le texte 'images/regina.jpg' dans la page de votre navigateur.
- pouvoir cliquer sur ce texte et être redirigé vers une image de pizza !
- <img src="images/readme/pizzaland-01.jpg" />
+ <img src="images/readme/pizzaland-01.png" />
-6. **Modifiez encore la variable html avant son affichage** en remplaçant le texte contenu dans la balise `<a>` par
- - **une balise `<img>`** dont la source (_attribut `src`_) sera la chaîne `images/regina.jpg` valeur initiale de la variable `html`.
- - **une balise `<h4>`** contenant le `nom` de la pizza
+2. **Modifiez encore la variable html avant son affichage** en remplaçant le texte contenu dans la balise `<a>` par
+ - **une balise `<img>`** dont la source (_attribut `src`_) sera la chaîne `images/regina.jpg`
+ - **une balise `<section>`** contenant le `name` de la pizza
Contrôlez dans l'inspecteur d'éléments que le résultat obtenu est bien :
```html
<a href="images/regina.jpg">
<img src="images/regina.jpg"/>
- <h4>Regina</h4>
+ <section>Regina</section>
</a>
```
Le rendu doit être celui-ci :<br>
- <img src="images/readme/pizzaland-02.jpg" />
+ <img src="images/readme/pizzaland-02.png" />
+
+3. **Pour améliorer un peu le rendu (_grâce aux CSS fournies_) ajoutez une balise `<article class="pizzaThumbnail">`** autour du `<a>`. Le code généré sera :
+ ```html
+ <article class="pizzaThumbnail">
+ <a href="images/regina.jpg">
+ <img src="images/regina.jpg"/>
+ <section>Regina</section>
+ </a>
+ </article>
+ ```
+ <img src="images/readme/pizzaland-02b.png" />
+ Ah ! C'est mieux !
## Étape suivante <!-- omit in toc -->
diff --git a/E-tableaux-objets.md b/E-tableaux-objets.md
index ae5f970a673d0ed17c5ee3dbd80460d9a45c7119..3f02fc99dab5c4b2f651661a83fa35823e740f12 100644
--- a/E-tableaux-objets.md
+++ b/E-tableaux-objets.md
@@ -17,18 +17,24 @@ const data = ['Regina', 'Napolitaine', 'Spicy'];
Parcourez ce tableau afin de générer 3 liens sur le modèle de celui réalisé à l'étape [D. les chaînes de caractères](./D-chaines.md) :
```html
-<a href="images/regina.jpg">
- <img src="images/regina.jpg"/>
- <h4>Regina</h4>
-</a>
-<a href="images/napolitaine.jpg">
- <img src="images/napolitaine.jpg"/>
- <h4>Napolitaine</h4>
-</a>
-<a href="images/spicy.jpg">
- <img src="images/spicy.jpg"/>
- <h4>Spicy</h4>
-</a>
+<article class="pizzaThumbnail">
+ <a href="images/regina.jpg">
+ <img src="images/regina.jpg"/>
+ <section>Regina</section>
+ </a>
+</article>
+<article class="pizzaThumbnail">
+ <a href="images/napolitaine.jpg">
+ <img src="images/napolitaine.jpg"/>
+ <section>Napolitaine</section>
+ </a>
+</article>
+<article class="pizzaThumbnail">
+ <a href="images/spicy.jpg">
+ <img src="images/spicy.jpg"/>
+ <section>Spicy</section>
+ </a>
+</article>
```
Utilisez pour cela **au moins 2 techniques parmi les 4 suivantes** :
@@ -41,7 +47,7 @@ Utilisez pour cela **au moins 2 techniques parmi les 4 suivantes** :
Le résultat obtenu sera identique dans les 4 cas :
-<img src="images/readme/pizzaland-03.jpg" />
+<img src="images/readme/pizzaland-03.png" />
## E.2. Les Objets littéraux
Modifiez le tableau `data` : au lieu de 3 chaînes de caractères, on va maintenant y mettre 3 objets littéraux :
@@ -49,24 +55,24 @@ Modifiez le tableau `data` : au lieu de 3 chaînes de caractères, on va mainten
```js
const data = [
{
- nom: 'Regina',
+ name: 'Regina',
base: 'tomate',
- prix_petite: 6.5,
- prix_grande: 9.95,
+ price_small: 6.5,
+ price_large: 9.95,
image: 'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
},
{
- nom: 'Napolitaine',
+ name: 'Napolitaine',
base: 'tomate',
- prix_petite: 6.5,
- prix_grande: 8.95,
+ price_small: 6.5,
+ price_large: 8.95,
image: 'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300'
},
{
- nom: 'Spicy',
+ name: 'Spicy',
base: 'crème',
- prix_petite: 5.5,
- prix_grande: 8,
+ price_small: 5.5,
+ price_large: 8,
image: 'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300',
}
];
@@ -74,10 +80,10 @@ const data = [
Modifiez la boucle pour générer un code de ce type :
```html
-<article class="media">
+<article class="pizzaThumbnail">
<a href="https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300">
<img src="https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300" />
- <section class="infos">
+ <section>
<h4>Regina</h4>
<ul>
<li>Prix petit format : 5.50 €</li>
@@ -90,7 +96,7 @@ Modifiez la boucle pour générer un code de ce type :
Le rendu final devra correspondre à ceci :
-<img src="images/readme/pizzaland-04.jpg" />
+<img src="images/readme/pizzaland-04.png" />
***Attention au formatage des prix** (examinez bien la capture d'écran) !*
diff --git a/F-babel.md b/F-babel.md
index 07244502d497d1ae44814f63239df702f5ebec97..35221d4c68cb5c55d195015d640f8ab52a6609c9 100644
--- a/F-babel.md
+++ b/F-babel.md
@@ -2,6 +2,8 @@
# F. Compiler avec Babel <!-- omit in toc -->
+<img src="images/readme/header-babel.jpg" />
+
_**Jusque là on ne s'est pas préoccupé de la compatibilité navigateur du code que l'on a tapé.**_
En revanche dans la vraie vie, si l'on veut que tous les internautes puissent utiliser notre application sans encombre, **il faut compiler notre code ES6+ en ES5**. Cette compilation se fait avec [Babel](https://babeljs.io).
@@ -26,7 +28,7 @@ L'installation de Babel se fait avec npm (Node Package Manager - l'outil fourni
```bash
npm init
```
- Répondez alors aux questions qui vous sont posées (donnez le nom "pizzaland" au projet, vous pouvez ensuite taper <kbd>Entrée</kbd> pour toutes les autres questions). À la fin du questionnaire vous verrez qu'un fichier `package.json` a été créé. Celui-ci nous sera utile par la suite.
+ Répondez alors aux questions qui vous sont posées (_donnez le nom "pizzaland" au projet, vous pouvez ensuite taper <kbd>Entrée</kbd> pour toutes les autres questions_). À la fin du questionnaire vous verrez qu'un fichier `package.json` a été créé. Celui-ci nous sera utile par la suite.
3. **Installez babel :**
```bash
diff --git a/G-filtres-tri.md b/G-filtres-tri.md
index 78a54c50c5b04d2921852937434e95db06e3f56c..57f14cb650fa09743129903e3ceced9359865903 100644
--- a/G-filtres-tri.md
+++ b/G-filtres-tri.md
@@ -14,16 +14,16 @@
A l'aide de la [méthode `.sort()` de la classe Array](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/sort), triez les pizzas :
1. Par ordre alphabétique
- <img src="images/readme/pizzaland-05.jpg" />
+ <img src="images/readme/pizzaland-05.png" />
1. Par prix petit format croissant
- <img src="images/readme/pizzaland-06.jpg" />
+ <img src="images/readme/pizzaland-06.png" />
1. Par prix petit format croissant et en cas d'égalité, par prix grand format croissant
- <img src="images/readme/pizzaland-07.jpg" />
+ <img src="images/readme/pizzaland-07.png" />
@@ -31,15 +31,15 @@ A l'aide de la [méthode `.sort()` de la classe Array](https://developer.mozilla
A l'aide de la [méthode .filter()](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/filter), n'affichez que les pizzas dont :
1. la propriété `base` est 'tomate'
- <img src="images/readme/pizzaland-08.jpg" />
+ <img src="images/readme/pizzaland-08.png" />
1. le prix petit format est inférieur à 6€
- <img src="images/readme/pizzaland-09.jpg" />
+ <img src="images/readme/pizzaland-09.png" />
1. le nom contient deux fois la lettre "i"
- <img src="images/readme/pizzaland-10.jpg" />
+ <img src="images/readme/pizzaland-10.png" />
## G.3. Destructuring
diff --git a/images/readme/babel-build.gif b/images/readme/babel-build.gif
new file mode 100644
index 0000000000000000000000000000000000000000..14efce37ca1f974b8c11b1c36c513103fc7d451a
Binary files /dev/null and b/images/readme/babel-build.gif differ
diff --git a/images/readme/devtools-console.jpg b/images/readme/devtools-console.jpg
index bbafc5a25185f288499233ed408f3121e1911f5a..f4b1b348ac9b38f1eac485bfea6fa0bfe08aa83c 100644
Binary files a/images/readme/devtools-console.jpg and b/images/readme/devtools-console.jpg differ
diff --git a/images/readme/devtools-inspecteur.jpg b/images/readme/devtools-inspecteur.jpg
index 72624e84a3ac17b46658cfe7737f635c22b3a77e..7a64a253df07593116b3f0200c553a355892e18c 100644
Binary files a/images/readme/devtools-inspecteur.jpg and b/images/readme/devtools-inspecteur.jpg differ
diff --git a/images/readme/devtools-sources.jpg b/images/readme/devtools-sources.jpg
index 0804489a880c2c8c486817d52fc549f4617c1965..855cbf9a897bd031071f85d3d61b8dfeba28607f 100644
Binary files a/images/readme/devtools-sources.jpg and b/images/readme/devtools-sources.jpg differ
diff --git a/images/readme/header-babel.jpg b/images/readme/header-babel.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..cde5beae622eeaf745d1e87cfe0fe2a982b6b337
Binary files /dev/null and b/images/readme/header-babel.jpg differ
diff --git a/images/readme/pizzaland-00-console.png b/images/readme/pizzaland-00-console.png
new file mode 100644
index 0000000000000000000000000000000000000000..965cb1cdcde4b672387fd8d2f0157a305e815eb8
Binary files /dev/null and b/images/readme/pizzaland-00-console.png differ
diff --git a/images/readme/pizzaland-00.jpg b/images/readme/pizzaland-00.jpg
deleted file mode 100644
index 4d6335c7904b4464c9a192134a6dc4975543d1f8..0000000000000000000000000000000000000000
Binary files a/images/readme/pizzaland-00.jpg and /dev/null differ
diff --git a/images/readme/pizzaland-00.png b/images/readme/pizzaland-00.png
new file mode 100644
index 0000000000000000000000000000000000000000..a8e83e9cc58609321986a55e7deae15e695145dc
Binary files /dev/null and b/images/readme/pizzaland-00.png differ
diff --git a/images/readme/pizzaland-01.jpg b/images/readme/pizzaland-01.jpg
deleted file mode 100644
index fa33d8f7480ce791f9bfc6fc97c8e29a9ad43bfa..0000000000000000000000000000000000000000
Binary files a/images/readme/pizzaland-01.jpg and /dev/null differ
diff --git a/images/readme/pizzaland-01.png b/images/readme/pizzaland-01.png
new file mode 100644
index 0000000000000000000000000000000000000000..c3b89810a7f696a86caf1ed4c4a0d4cd94ac6f05
Binary files /dev/null and b/images/readme/pizzaland-01.png differ
diff --git a/images/readme/pizzaland-02.jpg b/images/readme/pizzaland-02.jpg
deleted file mode 100644
index bb391adecd564aced5bc197d964d055dec335757..0000000000000000000000000000000000000000
Binary files a/images/readme/pizzaland-02.jpg and /dev/null differ
diff --git a/images/readme/pizzaland-02.png b/images/readme/pizzaland-02.png
new file mode 100644
index 0000000000000000000000000000000000000000..ff7380a7d3083860b8a02dee779aec6398fe3036
Binary files /dev/null and b/images/readme/pizzaland-02.png differ
diff --git a/images/readme/pizzaland-02b.png b/images/readme/pizzaland-02b.png
new file mode 100644
index 0000000000000000000000000000000000000000..aad7351a1a9221d0b8a1888da385a10b85ddc992
Binary files /dev/null and b/images/readme/pizzaland-02b.png differ
diff --git a/images/readme/pizzaland-03.jpg b/images/readme/pizzaland-03.jpg
deleted file mode 100644
index 9a53dadb3337d1bcecdc54104043c73a4ca10c60..0000000000000000000000000000000000000000
Binary files a/images/readme/pizzaland-03.jpg and /dev/null differ
diff --git a/images/readme/pizzaland-03.png b/images/readme/pizzaland-03.png
new file mode 100644
index 0000000000000000000000000000000000000000..2ed959e1aec1b9df8d7b7348151fe931803201d9
Binary files /dev/null and b/images/readme/pizzaland-03.png differ
diff --git a/images/readme/pizzaland-04.jpg b/images/readme/pizzaland-04.jpg
deleted file mode 100644
index 3e6c82716f3ee5e1b61c383dfe9357701ab4b6fc..0000000000000000000000000000000000000000
Binary files a/images/readme/pizzaland-04.jpg and /dev/null differ
diff --git a/images/readme/pizzaland-04.png b/images/readme/pizzaland-04.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e426bbce7fb99773be70706b856a311afc777c6
Binary files /dev/null and b/images/readme/pizzaland-04.png differ
diff --git a/images/readme/pizzaland-05.jpg b/images/readme/pizzaland-05.jpg
deleted file mode 100644
index dae4fb8fc656ab6b0e51c7f3d34dddf8943d498d..0000000000000000000000000000000000000000
Binary files a/images/readme/pizzaland-05.jpg and /dev/null differ
diff --git a/images/readme/pizzaland-05.png b/images/readme/pizzaland-05.png
new file mode 100644
index 0000000000000000000000000000000000000000..4f2c31515518bfcc5d9263cc5e06f7c85ddc0be2
Binary files /dev/null and b/images/readme/pizzaland-05.png differ
diff --git a/images/readme/pizzaland-06.jpg b/images/readme/pizzaland-06.jpg
deleted file mode 100644
index 7776197b4bc0974e2faf2349928024a630574699..0000000000000000000000000000000000000000
Binary files a/images/readme/pizzaland-06.jpg and /dev/null differ
diff --git a/images/readme/pizzaland-06.png b/images/readme/pizzaland-06.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c02ae1dea4d7f1543470a3e807b74691b473014
Binary files /dev/null and b/images/readme/pizzaland-06.png differ
diff --git a/images/readme/pizzaland-07.jpg b/images/readme/pizzaland-07.jpg
deleted file mode 100644
index 2ee0072a670ea12c4909e76f2fd7cedfa798544a..0000000000000000000000000000000000000000
Binary files a/images/readme/pizzaland-07.jpg and /dev/null differ
diff --git a/images/readme/pizzaland-07.png b/images/readme/pizzaland-07.png
new file mode 100644
index 0000000000000000000000000000000000000000..c8e8ffd53dac90608e2098ad0e69bd2314b6567f
Binary files /dev/null and b/images/readme/pizzaland-07.png differ
diff --git a/images/readme/pizzaland-08.jpg b/images/readme/pizzaland-08.jpg
deleted file mode 100644
index 0a60872647ad55655a6bf095562f12b89a4f1e63..0000000000000000000000000000000000000000
Binary files a/images/readme/pizzaland-08.jpg and /dev/null differ
diff --git a/images/readme/pizzaland-08.png b/images/readme/pizzaland-08.png
new file mode 100644
index 0000000000000000000000000000000000000000..a197d715b759eae511d64c180b8f0608cb6a8b3b
Binary files /dev/null and b/images/readme/pizzaland-08.png differ
diff --git a/images/readme/pizzaland-09.jpg b/images/readme/pizzaland-09.jpg
deleted file mode 100644
index d6d07dfc44a7d1e43b8abc0b7bf880d413f5e938..0000000000000000000000000000000000000000
Binary files a/images/readme/pizzaland-09.jpg and /dev/null differ
diff --git a/images/readme/pizzaland-09.png b/images/readme/pizzaland-09.png
new file mode 100644
index 0000000000000000000000000000000000000000..d79341f190ff6795c343e9e4b60e8c8fb6ddca0c
Binary files /dev/null and b/images/readme/pizzaland-09.png differ
diff --git a/images/readme/pizzaland-10.jpg b/images/readme/pizzaland-10.jpg
deleted file mode 100644
index c321992678235e7a74010d76f981e4ed01a58d8b..0000000000000000000000000000000000000000
Binary files a/images/readme/pizzaland-10.jpg and /dev/null differ
diff --git a/images/readme/pizzaland-10.png b/images/readme/pizzaland-10.png
new file mode 100644
index 0000000000000000000000000000000000000000..4bd74d8cf613905802746fe5e6036100bd8dab42
Binary files /dev/null and b/images/readme/pizzaland-10.png differ
diff --git a/images/readme/split-terminal.png b/images/readme/split-terminal.png
new file mode 100644
index 0000000000000000000000000000000000000000..4137b2f4ed0cee38f492b2e5ee85d840f3f97c5b
Binary files /dev/null and b/images/readme/split-terminal.png differ
diff --git a/images/readme/vscode-ium.jpg b/images/readme/vscode-ium.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e627ecb03efa4721cf8d2b0c15e97f562584630f
Binary files /dev/null and b/images/readme/vscode-ium.jpg differ