js content + styles fix

docs/.vitepress/cache/deps_temp_721df3a9/_metadata.json

@@ -1,13 +0,0 @@
-{
-  "hash": "31f2755a",
-  "browserHash": "6ca55b73",
-  "optimized": {
-    "vue": {
-      "src": "../../../../node_modules/.pnpm/vue@3.2.47/node_modules/vue/dist/vue.runtime.esm-bundler.js",
-      "file": "vue.js",
-      "fileHash": "e08d3cb6",
-      "needsInterop": false
-    }
-  },
-  "chunks": {}
-}

docs/.vitepress/cache/deps_temp_721df3a9/package.json

@@ -1 +0,0 @@
-{"type":"module"}

docs/.vitepress/cache/deps_temp_96092671/_metadata.json

@@ -1,13 +0,0 @@
-{
-  "hash": "c786ef8f",
-  "browserHash": "7338c107",
-  "optimized": {
-    "vue": {
-      "src": "../../../../node_modules/.pnpm/vue@3.2.47/node_modules/vue/dist/vue.runtime.esm-bundler.js",
-      "file": "vue.js",
-      "fileHash": "bf22e1be",
-      "needsInterop": false
-    }
-  },
-  "chunks": {}
-}

docs/.vitepress/cache/deps_temp_96092671/package.json

@@ -1 +0,0 @@
-{"type":"module"}

docs/.vitepress/theme/custom.css

@@ -4,8 +4,16 @@
 	--color-primary-dark: hsl(11, 100%, 75%);
 	/* custom theme */
 	--vp-c-brand: var(--color-primary-light);
+
 	--vp-button-brand-text: var(--vp-c-bg);
+	--vp-button-brand-hover-text: var(--color-primary-light);
+	--vp-button-brand-active-text: var(--color-primary-light);
 	--vp-button-brand-border: var(--color-primary-light);
+	--vp-button-brand-hover-bg: var(--vp-c-bg);
+	--vp-button-brand-active-bg: var(--vp-c-bg);
+	--vp-button-brand-hover-border: var(--color-primary-light);
+	--vp-button-brand-active-border: var(--color-primary-light);
+
 	--vp-custom-block-tip-bg: var(--vp-c-bg);
 	--vp-custom-block-danger-bg: var(--vp-c-bg);
 	--vp-custom-block-info-bg: var(--vp-c-bg);
@@ -18,7 +26,12 @@
 }
 .dark {
 	--vp-c-brand: var(--color-primary-dark);
+	--vp-button-brand-hover-text: var(--vp-c-dark);
+	--vp-button-brand-active-text: var(--vp-c-dark);
 	--vp-button-brand-border: var(--color-primary-dark);
+	--vp-button-brand-hover-border: var(--color-primary-dark);
+	--vp-button-brand-active-border: var(--color-primary-dark);
+
 	--vp-custom-block-tip-bg: var(--vp-c-bg);
 	--vp-custom-block-danger-bg: var(--vp-c-bg);
 	--vp-custom-block-info-bg: var(--vp-c-bg);

docs/dev/02-intermediaire/javascript.md

@@ -105,3 +105,37 @@ On peut assigner directement des type de données dans une variable.
 Pour stocker plusieurs valeurs, il est possible de déclarer un object ou un tableau (en fonction de nos besoins).
 
 <<< @/snippets/js/variables.js#multiplesValues
+
+## Écouter des événements
+
+Une fois nos éléments HTML ciblés et stockés, nous avons besoin de déclencher des actions lorsque quelque chose se passe. Ce quelque chose peut être un clic, un survol, un champ de formulaire qui change, etc.
+
+Nous devons donc **écouter** ces événements déclencher ce qui doit l'être ensuite. La méthode JavaScript à utiliser est `addEventListener('ÉVÉNEMENT', FONCTION)`
+
+<<< @/snippets/js/variables.js#addEventListener
+
+## Les conditions
+
+Il est souvent nécessaire de déclencher des actions sur la page uniquement si certaines conditions sont remplies. Par exemple, nous pouvons regarder la valeur vraie ou fausse d'une variable et déclencher ou non une action.
+
+```js
+if (condition) {
+  // code à exécuter
+}
+```
+
+Si la condition est remplie, le code sera exécuté. Sinon, il sera ignoré.
+
+Une condition se construit de cette façon&nbsp;:
+
+`if` `(` `valeur à évaluer` `opérateur` `valeur de référence` `)`
+
+Par exemple&nbsp;: `if` `(` `myName` `===` `'Nico'` `)` ou encore `if` `(` `myAge` `>` `18` `)`
+
+Voici [une liste d'opérateurs](https://www.joshwcomeau.com/operator-lookup/) et leurs explications (en anglais).
+
+### Évaluer un booléen
+
+Un booléen peut être soit vrai soit faux. Pour évaluer sa valeur, nous pouvons nous contenter de renseigner le nom de la variable
+
+<<< @/snippets/js/variables.js#conditionsIf

docs/snippets/js/variables.js

@@ -20,3 +20,20 @@ const me = {
 // myPseudos est un tableau contenant plusieurs valeurs
 let myPseudos = ["nicool", "dev man"];
 // #endregion multiplesValues
+
+// #region addEventListener
+const myButton = document.getElementById("sendButton");
+// ici, on écoute l'événement "click" sur l'élément "myButton"
+myButton.addEventListener("click", function () {
+	// actions à exécuter
+});
+// #endregion addEventListener
+
+// #region conditionsIf
+// la variable "userLogged" est un booléen, ici vrai
+let userLogged = true;
+// on évalue la valeur de "userLogged" avant d'exécuter la fonction
+if (userLogged) {
+	// actions à exécuter
+}
+// #endregion conditionsIf