Merge branch 'main' into dependabot/npm_and_yarn/7-bank-project/api/word-wrap-1.2.4

7-bank-project/1-template-route/README.md

@@ -12,7 +12,7 @@ In this lesson, we're going to lay out the foundations to create bank web app, u
 
 ### Prerequisite
 
-You need a local web server to test the web app we'll build in this lesson. If don't have one, you can install [Node.js](https://nodejs.org) and use the command `npx lite-server` from your project folder. It will create a local web server and open your app in a browser.
+You need a local web server to test the web app we'll build in this lesson. If you don't have one, you can install [Node.js](https://nodejs.org) and use the command `npx lite-server` from your project folder. It will create a local web server and open your app in a browser.
 
 ### Preparation
 
@@ -36,12 +36,12 @@ On your computer, create a folder named `bank` with a file named `index.html` in
 
 ## HTML templates
 
-If you want to create multiples screens for a web page, one solution would be to create one HTML file for every screen you want to display. However, this solution comes with some inconvenience:
+If you want to create multiple screens for a web page, one solution would be to create one HTML file for every screen you want to display. However, this solution comes with some inconvenience:
 
 - You have to reload the entire HTML when switching screen, which can be slow.
 - It's difficult to share data between the different screens.
 
-Another approach is have only one HTML file, and define multiple [HTML templates](https://developer.mozilla.org/docs/Web/HTML/Element/template) using the `<template>` element. A template is a reusable HTML block that is not displayed by the browser, and needs to be instantiated at runtime using JavaScript.
+Another approach is to have only one HTML file, and define multiple [HTML templates](https://developer.mozilla.org/docs/Web/HTML/Element/template) using the `<template>` element. A template is a reusable HTML block that is not displayed by the browser, and needs to be instantiated at runtime using JavaScript.
 
 ### Task
 
@@ -103,7 +103,7 @@ Then we'll add another HTML template for the dashboard page. This page will cont
 
 ## Displaying templates with JavaScript
 
-If you try your current HTML file in a browser, you'll see that it get stuck displaying `Loading...`. That's because we need to add some JavaScript code to instantiate and display the HTML templates.
+If you try your current HTML file in a browser, you'll see that it gets stuck displaying `Loading...`. That's because we need to add some JavaScript code to instantiate and display the HTML templates.
 
 Instantiating a template is usually done in 3 steps:
 
@@ -145,7 +145,7 @@ updateRoute('login');
 
 ## Creating routes
 
-When talking about a web app, we call *Routing* the intent to map **URLs** to specific screens that should be displayed. On a web site with multiple HTML files, this is done automatically as the file paths are reflected on the URL. For example, with these files in your project folder:
+When talking about a web app, we call *Routing* the intent to map **URLs** to specific screens that should be displayed. On a website with multiple HTML files, this is done automatically as the file paths are reflected on the URL. For example, with these files in your project folder:
 
 ```
 mywebsite/index.html

7-bank-project/2-forms/README.md

@@ -16,7 +16,7 @@ You need to have completed the [HTML templates and routing](../1-template-route/
 
 **Take note**
 You will have two terminals running at the same time as listed below.
-1. For the the main bank app we built in the [HTML templates and routing](../1-template-route/README.md) lesson
+1. For the main bank app we built in the [HTML templates and routing](../1-template-route/README.md) lesson
 2. For the [Bank APP server API](../api/README.md) we just setup above.
 
 You need two of the servers up and running to follow through with the rest of the lesson. They are listening on different ports(port `3000` and port `5000`) so everything should work just fine.
@@ -70,7 +70,7 @@ Let's start by adding a form to the `login` template. We'll need a *username* fi
 </template>
 ```
 
-If you take a closer look, you can notice that we also added a `<label>` element here. `<label>` elements are used to add a name to UI controls, such as our username field. Labels are important for the readability of your forms, but also comes with additional benefits:
+If you take a closer look, you can notice that we also added a `<label>` element here. `<label>` elements are used to add a name to UI controls, such as our username field. Labels are important for the readability of your forms, but also come with additional benefits:
 
 - By associating a label to a form control, it helps users using assistive technologies (like a screen reader) to understand what data they're expected to provide.
 - You can click on the label to directly put focus on the associated input, making it easier to reach on touch-screen based devices.
@@ -193,7 +193,7 @@ Here's a quick video about `async/await` usage:
 We use the `fetch()` API to send JSON data to the server. This method takes 2 parameters:
 
 - The URL of the server, so we put back `//localhost:5000/api/accounts` here.
-- The settings of the request. That's where we set the method to `POST` and provide the `body` for the request. As we're sending JSON data to the server, we also need to set the `Content-Type` header to `application/json` so the server know how to interpret the content.
+- The settings of the request. That's where we set the method to `POST` and provide the `body` for the request. As we're sending JSON data to the server, we also need to set the `Content-Type` header to `application/json` so the server knows how to interpret the content.
 
 As the server will respond to the request with JSON, we can use `await response.json()` to parse the JSON content and return the resulting object. Note that this method is asynchronous, so we use the `await` keyword here before returning to make sure any errors during parsing are also caught.
 
@@ -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 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.
+Validation like this performed *before* sending any data to the server is called **client-side** validation. But note that 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.
 

7-bank-project/4-state-management/README.md

@@ -80,7 +80,7 @@ This refactoring by itself did not bring much improvements, but the idea was to
 
 ## Track data changes
 
-Now that we have put in place the `state` object to store our data, the next step is centralize the updates. The goal is to make it easier to keep track of any changes and when they happen.
+Now that we have put in place the `state` object to store our data, the next step is to centralize the updates. The goal is to make it easier to keep track of any changes and when they happen.
 
 To avoid having changes made to the `state` object, it's also a good practice to consider it [*immutable*](https://en.wikipedia.org/wiki/Immutable_object), meaning that it cannot be modified at all. It also means that you have to create a new state object if you want to change anything in it. By doing this, you build a protection about potentially unwanted [side effects](https://en.wikipedia.org/wiki/Side_effect_(computer_science)), and open up possibilities for new features in your app like implementing undo/redo, while also making it easier to debug. For example, you could log every change made to the state and keep a history of the changes to understand the source of a bug.
 
@@ -142,7 +142,7 @@ Try registering a new account, logging out and in again to check that everything
 
 ## Persist the state
 
-Most web apps needs to persist data to be able to work correctly. All the critical data is usually stored on a database and accessed via a server API, like as the user account data in our case. But sometimes, it's also interesting to persist some data on the client app that's running in your browser, for a better user experience or to improve loading performance.
+Most web apps need to persist data to be able to work correctly. All the critical data is usually stored on a database and accessed via a server API, like as the user account data in our case. But sometimes, it's also interesting to persist some data on the client app that's running in your browser, for a better user experience or to improve loading performance.
 
 When you want to persist data in your browser, there are a few important questions you should ask yourself:
 
@@ -201,7 +201,7 @@ Now login in the app and try refreshing the page. You should stay on the dashboa
 
 ## Refresh the data
 
-...But we might also have a created a new one. Oops!
+...But we might also have created a new one. Oops!
 
 Go to the dashboard using the `test` account, then run this command on a terminal to create a new transaction:
 

7-bank-project/api/package.json

@@ -20,9 +20,9 @@
     "prettier": "^2.0.5"
   },
   "dependencies": {
-    "body-parser": "^1.20.1",
+    "body-parser": "^1.20.3",
     "cors": "^2.8.5",
-    "express": "^4.18.2"
+    "express": "^4.21.2"
   },
   "engines": {
     "node": ">=10"

7-bank-project/solution/index.html

@@ -37,8 +37,8 @@
             <input id="currency" name="currency" type="text" maxlength="5" value="$" required>
             <label for="description">Description</label>
             <input id="description" name="description" type="text" maxlength="100">
-            <label for="balance">Current balance</label>
-            <input id="balance" name="balance" type="number" value="0">
+            <label for="current-balance">Current balance</label>
+            <input id="current-balance" name="balance" type="number" value="0">
             <div id="registerError" class="error" role="alert"></div>
             <button>Register</button>
           </form>
@@ -52,17 +52,17 @@
     <section class="dashboard-page">
       <header class="dashboard-header">
         <img class="dashboard-logo" src="logo.svg" alt="Squirrel Banking Logo">
-        <h1 class="dashboard-title hide-xs">Squirrel Banking</span>
+        <h1 class="dashboard-title hide-xs">Squirrel Banking</h1>
         <button onclick="logout()">Logout</button>
       </header>
       <div class="balance">
         <div>Balance</div>
         <span id="balance"></span>
-        <span id="currency"></span>
+        <span id="balance-currency"></span>
       </div>
       <div class="dashboard-content">
         <div class="transactions-title">
-          <h2 id="description"></h2>
+          <h2 id="transactions-description"></h2>
           <button onclick="addTransaction()">Add transaction</button>
         </div>
         <table class="transactions-table" aria-label="Transactions">

7-bank-project/solution/translations/README.es.md

@@ -1,6 +1,6 @@
 # Aplicación bancaria
 
-> Solución de ejemplo para el proyecto de la aplicación bancaria, construida con HTML5 vanilla, CSS y JavaScript (sin marcos ni bibliotecas).
+> Solución de ejemplo para el proyecto de la aplicación bancaria, construida con HTML5 vanilla, CSS y JavaScript (sin entorno de trabajos ni bibliotecas).
 
 ## Ejecutando la aplicación