diff --git a/.gitignore b/.gitignore index 0a9b4b47..a0625636 100644 --- a/.gitignore +++ b/.gitignore @@ -13,7 +13,7 @@ # User-specific files (MonoDevelop/Xamarin Studio) *.userprefs -# Mono auto generated files +# Mono auto-generated files mono_crash.* # Build results @@ -40,7 +40,7 @@ bld/ dist/ -# Visual Studio 2017 auto generated files +# Visual Studio 2017 auto-generated files Generated\ Files/ # MSTest test Results @@ -354,4 +354,4 @@ MigrationBackup/ .ionide/ # Mac-specific -.DS_Store \ No newline at end of file +.DS_Store diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 724a76b9..629c72f7 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -2,7 +2,7 @@ This lesson covers the basics of programming languages. The topics covered here apply to most modern programming languages today. In the 'Tools of the Trade' section, you'll learn about useful software that helps you as a developer. - + > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz diff --git a/1-getting-started-lessons/2-github-basics/README.md b/1-getting-started-lessons/2-github-basics/README.md index 6ae7622d..db61b870 100644 --- a/1-getting-started-lessons/2-github-basics/README.md +++ b/1-getting-started-lessons/2-github-basics/README.md @@ -2,7 +2,7 @@ This lesson covers the basics of GitHub, a platform to host and manage changes to your code. - + > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz @@ -125,7 +125,7 @@ Let's say you have a folder locally with some code project and you want to start 1. **Connect your local Git repo with GitHub**. A Git repo is good on your machine but at some point you want to have backup of your files somewhere and also invite other people to work with you on your repo. One such great place to do so is GitHub. Remember we've already created a repo on GitHub so the only thing we need to do is to connect our local Git repo with GitHub. The command `git remote add` will do just that. Type the following command: - > Note, before you type the command go to your GitHub repo page to find the repository URL. You will use it in the below command. Replace `repository_name` with your GitHub URL. + > Note, before you type the command go to your GitHub repo page to find the repository URL. You will use it in the below command. Replace ```https://github.com/username/repository_name.git``` with your GitHub URL. ```bash git remote add origin https://github.com/username/repository_name.git @@ -134,6 +134,8 @@ Let's say you have a folder locally with some code project and you want to start This creates a _remote_, or connection, named "origin" pointing at the GitHub repository you created earlier. 1. **Send local files to GitHub**. So far you've created a _connection_ between the local repo and the GitHub repo. Let's send these files to GitHub with the following command `git push`, like so: + + > Note, your branch name may be different by default from ```main```. ```bash git push -u origin main @@ -141,7 +143,7 @@ Let's say you have a folder locally with some code project and you want to start This sends your commits in your "main" branch to GitHub. -1. **To add more changes**. If you want to continue making changes and pushing them to GitHub you’ll just need to use the following three commands: +2. **To add more changes**. If you want to continue making changes and pushing them to GitHub you’ll just need to use the following three commands: ```bash git add . diff --git a/1-getting-started-lessons/3-accessibility/README.md b/1-getting-started-lessons/3-accessibility/README.md index b6079818..3f69bdf2 100644 --- a/1-getting-started-lessons/3-accessibility/README.md +++ b/1-getting-started-lessons/3-accessibility/README.md @@ -1,6 +1,6 @@ # Creating Accessible Webpages - + > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz diff --git a/2-js-basics/1-data-types/README.md b/2-js-basics/1-data-types/README.md index 6ea43dc3..6d56fcb0 100644 --- a/2-js-basics/1-data-types/README.md +++ b/2-js-basics/1-data-types/README.md @@ -1,6 +1,6 @@ # JavaScript Basics: Data Types - + > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz diff --git a/2-js-basics/2-functions-methods/README.md b/2-js-basics/2-functions-methods/README.md index 7ff6ae45..96ba61cb 100644 --- a/2-js-basics/2-functions-methods/README.md +++ b/2-js-basics/2-functions-methods/README.md @@ -1,6 +1,6 @@ # JavaScript Basics: Methods and Functions - + > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz diff --git a/2-js-basics/4-arrays-loops/README.md b/2-js-basics/4-arrays-loops/README.md index 35f314f9..53ddc6d0 100644 --- a/2-js-basics/4-arrays-loops/README.md +++ b/2-js-basics/4-arrays-loops/README.md @@ -1,6 +1,6 @@ # JavaScript Basics: Arrays and Loops - + > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz diff --git a/3-terrarium/2-intro-to-css/README.md b/3-terrarium/2-intro-to-css/README.md index 73126b0f..cb74b61e 100644 --- a/3-terrarium/2-intro-to-css/README.md +++ b/3-terrarium/2-intro-to-css/README.md @@ -1,6 +1,6 @@ # Terrarium Project Part 2: Introduction to CSS - + > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz diff --git a/3-terrarium/3-intro-to-DOM-and-closures/README.md b/3-terrarium/3-intro-to-DOM-and-closures/README.md index 7285d7cb..85a5948d 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -1,6 +1,6 @@ # Terrarium Project Part 3: DOM Manipulation and a Closure - + > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz diff --git a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.fr.md b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.fr.md index 934fc5fb..f9a8cd5f 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.fr.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.fr.md @@ -1,4 +1,4 @@ -# Projet Terrarium Partie 3 : Manipulation DOM et une fermeture +# Projet Terrarium Partie 3 : Manipulation du DOM et notion de closure (fermeture)  > Sketchnote par [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/4-typing-game/typing-game/translations/README.fr.md b/4-typing-game/typing-game/translations/README.fr.md new file mode 100644 index 00000000..dea76426 --- /dev/null +++ b/4-typing-game/typing-game/translations/README.fr.md @@ -0,0 +1,340 @@ +# Créer un jeu à l'aide d'événements + +## Quiz préalable + +[Quiz préalable](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/21?loc=fr) + +## La programmation événementielle + +Lors de la création d'une application basée sur un navigateur, nous fournissons une interface utilisateur graphique (GUI) que l'utilisateur peut utiliser lorsqu'il interagit avec ce que nous avons construit. La façon la plus courante d'interagir avec le navigateur consiste à cliquer et à saisir divers éléments. Le défi auquel nous sommes confrontés en tant que développeur est que nous ne savons pas quand ils vont effectuer ces opérations! + +[La programmation événementielle](https://en.wikipedia.org/wiki/Event-driven_programming) est le nom du type de programmation que nous devons faire pour créer notre interface graphique. Si nous décomposons un peu cette phrase, nous voyons que le mot clé ici est **événement**. [L'événement](https://www.merriam-webster.com/dictionary/event), selon le Merriam-Webster, est défini comme "quelque chose qui arrive". Cela décrit parfaitement notre situation. Nous savons qu'il va se passer quelque chose pour lequel nous voulons exécuter du code en réponse, mais nous ne savons pas quand cela se produira. + +La façon dont nous marquons une section de code que nous voulons exécuter consiste à créer une fonction. Lorsque nous pensons à la [programmation procédurale](https://en.wikipedia.org/wiki/Procedural_programming), les fonctions sont appelées dans un ordre spécifique. La même chose va être vraie avec la programmation événementielle. La différence est **comment** les fonctions seront appelées. + +Pour gérer les événements (clic sur un bouton, saisie, etc.), nous enregistrons des **écouteurs d'événements**("event listeners" en anglais). Un écouteur d'événement est une fonction qui attend qu'un événement se produise et s'exécute en réponse. Les écouteurs d'événement peuvent mettre à jour l'interface utilisateur, passer des appels au serveur ou faire tout ce qui doit être fait en réponse à l'action de l'utilisateur. Nous ajoutons un écouteur d'événement en utilisant [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener), et en fournissant une fonction à exécuter. + +> **REMARQUE:** Il convient de souligner qu'il existe de nombreuses façons de créer des écouteurs d'événement. Vous pouvez utiliser des fonctions anonymes ou en créer des nommées. Vous pouvez utiliser divers raccourcis, comme définir la propriété `click` ou utiliser `addEventListener`. Dans notre exercice, nous allons nous concentrer sur `addEventLister` et les fonctions anonymes, car c'est probablement la technique la plus couramment utilisée par les développeurs Web. C'est aussi le plus flexible, car `addEventListener` fonctionne pour tous les événements et le nom de l'événement peut être fourni en tant que paramètre. + +### Les événements courants + +Il y a [des dizaines d'événements](https://developer.mozilla.org/docs/Web/Events) que vous pouvez écouter lors de la création d'une application. Fondamentalement, tout ce qu'un utilisateur fait sur une page déclenche un événement, ce qui vous donne beaucoup de pouvoir pour vous assurer qu'il obtient l'expérience que vous désirez. Heureusement, vous n'aurez normalement besoin que d'une petite poignée d'événements. En voici quelques-uns courants (y compris les deux que nous utiliserons lors de la création de notre jeu) : + +- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): L'utilisateur a cliqué sur quelque chose, généralement un bouton ou un lien hypertexte +- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): The user clicked the right mouse button +- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): +L'utilisateur a surligné du texte +- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): The user input some text + +## Création du jeu + +Nous allons créer un jeu pour explorer le fonctionnement des événements en JavaScript. Notre jeu va tester la compétence de frappe d'un joueur, qui est l'une des compétences les plus sous-estimées que tous les développeurs devraient avoir. Nous devrions tous nous entraîner à saisir ! Le déroulement général du jeu ressemblera à ceci : + +- Le joueur clique sur le bouton de démarrage et se voit présenter une citation à saisir +- Le joueur tape la citation aussi rapidement qu'il le peut dans une zone de texte + - Au fur et à mesure que chaque mot est complété, le suivant est mis en évidence + - Si le joueur a une faute de frappe, la zone de texte est mise à jour en rouge + - Lorsque le joueur complète la citation, un message de réussite s'affiche avec le temps écoulé + +Développons notre jeu et apprenons-en plus sur les événements ! + +### Structure de fichier + +Nous aurons besoin de trois fichiers au total : **index.html**, **script.js** et **style.css**. Commençons par les mettre en place pour nous faciliter un peu la tâche. + +- Créez un nouveau dossier pour votre travail en ouvrant une console ou une fenêtre de terminal et en exécutant la commande suivante : + +```bash +# Linux ou macOS +mkdir typing-game && cd typing-game + +# Windows +md typing-game && cd typing-game +``` + +- Ouvrez Visual Studio Code + +```bash +code . +``` + +- Ajoutez trois fichiers au dossier dans Visual Studio Code avec les noms suivants: + - index.html + - script.js + - style.css + +## Créer l'interface utilisateur + +Si nous explorons les exigences, nous savons que nous aurons besoin d'une poignée d'éléments sur notre page HTML. C'est un peu comme une recette, où nous avons besoin de quelques ingrédients : + +- Quelque part pour afficher le texte que l'utilisateur doit saisir +- Un endroit pour afficher tous les messages, comme un message de réussite +- Une zone de texte pour la saisie +- Un bouton de démarrage + +Chacun de ceux-ci aura besoin d'identifiants afin que nous puissions travailler avec eux dans notre JavaScript. Nous ajouterons également des références aux fichiers CSS et JavaScript que nous allons créer. + +Créez un nouveau fichier nommé **index.html**. Ajoutez le code HTML suivant: + +```html + + +
+Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!
+ + +