diff --git a/4-typing-game/typing-game/README.md b/4-typing-game/typing-game/README.md index 2524fc94..e72c4ae2 100644 --- a/4-typing-game/typing-game/README.md +++ b/4-typing-game/typing-game/README.md @@ -103,7 +103,7 @@ It's always best to develop iteratively to see how things look. Let's launch our - Install [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) by following the link and clicking **Install** - You will be prompted by the browser to open Visual Studio Code, and then by Visual Studio Code to perform the installation - Restart Visual Studio Code if prompted -- Once installed, in Visual Studio Code, click Ctrl-Shift-P (or Cmd-Shift-P) to open the command pallate +- Once installed, in Visual Studio Code, click Ctrl-Shift-P (or Cmd-Shift-P) to open the command palette - Type **Live Server: Open with Live Server** - Live Server will start hosting your application - Open a browser and navigate to **https://localhost:5500** diff --git a/5-browser-extension/2-forms-browsers-local-storage/README.md b/5-browser-extension/2-forms-browsers-local-storage/README.md index ef375ca7..b973b588 100644 --- a/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -195,12 +195,12 @@ async function displayCarbonUsage(apiKey, region) { This is a big function. What's going on here? -- following best practices, you use an `async` keyword to make this function behave asyncronously. The function contains a `try/catch` block as it will return a promise when the API returns data. Because you don't have control over the speed that the API will respond (it may not respond at all!), you need to handle this uncertainty by call it asyncronously. +- following best practices, you use an `async` keyword to make this function behave asynchronously. The function contains a `try/catch` block as it will return a promise when the API returns data. Because you don't have control over the speed that the API will respond (it may not respond at all!), you need to handle this uncertainty by call it asynchronously. - you're querying the co2signal API to get your region's data, using your API Key. To use that key, you have to use a type of authentication in your header parameters. - once the API responds, you assign various elements of its response data to the parts of your screen you set up to show this data. - if there's an error, or if there is no result, you show an error message. -✅ Using asyncronous programming patterns is another very useful tool in your toolbox. Read [about the various ways](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) you can configure this type of code. +✅ Using asynchronous programming patterns is another very useful tool in your toolbox. Read [about the various ways](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) you can configure this type of code. Congratulations! If you build your extension (`npm run build`) and refresh it in your extensions pane, you have a working extension! The only thing that isn't working is the icon, and you'll fix that in the next lesson. diff --git a/5-browser-extension/3-background-tasks-and-performance/README.md b/5-browser-extension/3-background-tasks-and-performance/README.md index fcc34436..1bcfb82d 100644 --- a/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/5-browser-extension/3-background-tasks-and-performance/README.md @@ -6,7 +6,7 @@ ### Introduction -In the last two lessons of this module, you learned how to build a form and display area for data fetched from an API. It's a very standard way of creating web presences on the web. You even learned how to handle fetching data asyncronously. Your browser extension is very nearly complete. +In the last two lessons of this module, you learned how to build a form and display area for data fetched from an API. It's a very standard way of creating web presences on the web. You even learned how to handle fetching data asynchronously. Your browser extension is very nearly complete. It remains to manage some background tasks, including refreshing the color of the extension's icon, so this is a great time to talk about how the browser manages this kind of task. Let's think about these browser tasks in the context of the performance of your web assets as you build them. diff --git a/6-space-game/6-end-condition/README.md b/6-space-game/6-end-condition/README.md index d08e270c..e4476f01 100644 --- a/6-space-game/6-end-condition/README.md +++ b/6-space-game/6-end-condition/README.md @@ -52,7 +52,7 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a ### Add code -1. **Track end condition**. Add code that keeps track of the number of enemies, or if the hero ship has been destroyedby adding these two functions: +1. **Track end condition**. Add code that keeps track of the number of enemies, or if the hero ship has been destroyed by adding these two functions: ```javascript function isHeroDead() { diff --git a/7-bank-project/2-forms/README.md b/7-bank-project/2-forms/README.md index fdc6107e..ebd2bf72 100644 --- a/7-bank-project/2-forms/README.md +++ b/7-bank-project/2-forms/README.md @@ -136,7 +136,7 @@ If everything goes well, the server should answer your request with a [JSON](htt ## Submitting data without reloading the page -As you probably noticed, there's a slight issue with the approach we just used: when submitting the form, we get out of our app and the browser redirects to the server URL. We're trying to avoid all page reloads with our web app, as we're makng a [Single-page application (SPA)](https://en.wikipedia.org/wiki/Single-page_application). +As you probably noticed, there's a slight issue with the approach we just used: when submitting the form, we get out of our app and the browser redirects to the server URL. We're trying to avoid all page reloads with our web app, as we're making a [Single-page application (SPA)](https://en.wikipedia.org/wiki/Single-page_application). To send the form data to the server without forcing a page reload, we have to use JavaScript code. Instead of putting an URL in the `action` property of a `
` element, you can use any JavaScript code prepended by the `javascript:` string to perform a custom action. Using this also means that you'll have to implement some tasks that were previously done automatically by the browser: @@ -274,7 +274,7 @@ Now if you press the *Register* button and a field does not respect a validation ![Screenshot showing the validation error when trying to submit the form](./images/validation-error.png) -Validation like this performed *before* sending any data to the server is called **client-side** validation. But note that's it's not always possible to peform all checks without sending the data. For example, we cannot check here if an account already exists with the same username without sending a request to the server. Additional validation performed on the server is called **server-side** validation. +Validation like this performed *before* sending any data to the server is called **client-side** validation. But note that's it's not always possible to perform all checks without sending the data. For example, we cannot check here if an account already exists with the same username without sending a request to the server. Additional validation performed on the server is called **server-side** validation. Usually both need to be implemented, and while using client-side validation improves the user experience by providing instant feedback to the user, server-side validation is crucial to make sure the user data you manipulate is sound and safe. diff --git a/7-bank-project/3-data/README.md b/7-bank-project/3-data/README.md index 8264f975..95465f40 100644 --- a/7-bank-project/3-data/README.md +++ b/7-bank-project/3-data/README.md @@ -225,7 +225,7 @@ First, we check that we have the account data we need before going further. Then > To make the balance display prettier, we use the method [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) to force displaying the value with 2 digits after the decimal point. -Now we need to call our `updateDashboard()` function everytime the dashboard is loaded. If you already finished the [lesson 1 assignment](../1-template-route/assignment.md) this should be straighforward, otherwise you can use the following implementation. +Now we need to call our `updateDashboard()` function everytime the dashboard is loaded. If you already finished the [lesson 1 assignment](../1-template-route/assignment.md) this should be straightforward, otherwise you can use the following implementation. Add this code to the end of the `updateRoute()` function: diff --git a/7-bank-project/4-state-management/assignment.md b/7-bank-project/4-state-management/assignment.md index 6aeed403..4df1f86e 100644 --- a/7-bank-project/4-state-management/assignment.md +++ b/7-bank-project/4-state-management/assignment.md @@ -16,7 +16,7 @@ Look at the [server API specifications](../api/README.md) to see which API you n Here's an example result after completing the assignment: -![Screenshot showing an example "Add transation" dialog](./images/dialog.png) +![Screenshot showing an example "Add transaction" dialog](./images/dialog.png) ## Rubric