recursal/MDN huggingface dataset:
Test your skills: JSON
======================

The aim of this skill test is to assess whether you've understood our Working with JSON article.

**Note:** You can try solutions by downloading the code and putting it in an online editor such as CodePen, JSFiddle, or Glitch.
 If there is an error, it will be logged in the results panel on the page or into the browser's JavaScript console to help you.


If you get stuck, you can reach out to us in one of our communication channels.

JSON 1
------

The one and only task in this article concerns accessing JSON data and using it in your page. JSON data about some mother cats and their kittens is available in sample.json. The JSON is loaded into the page as a text string and made available in the `catString` parameter of the `displayCatInfo()` function. Your task is to fill in the missing parts of the `displayCatInfo()` function to store:

* The names of the three mother cats, separated by commas, in the `motherInfo` variable.
* The total number of kittens, and how many are male and female, in the `kittenInfo` variable.

The values of these variables are then printed to the screen inside paragraphs.

Some hints/questions:

* The JSON data is provided as text inside the `displayCatInfo()` function. You'll need to parse it into JSON before you can get any data out of it.
* You'll probably want to use an outer loop to loop through the cats and add their names to the `motherInfo` variable string, and an inner loop to loop through all the kittens, add up the total of all/male/female kittens, and add those details to the `kittenInfo` variable string.
* The last mother cat name should have an "and" before it, and a full stop after it. How do you make sure this can work, no matter how many cats are in the JSON?
* Why are the `para1.textContent = motherInfo;` and `para2.textContent = kittenInfo;` lines inside the `displayCatInfo()` function, and not at the end of the script? This has something to do with async code.

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.
Test your skills: Object-oriented JavaScript
============================================

The aim of this skill test is to assess whether you've understood our Classes in JavaScript article.

**Note:** You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.
 If there is an error in your code, it will be logged into the results panel on this page or in the JavaScript console.


If you get stuck, you can reach out to us in one of our communication channels.

OOJS 1
------

In this task we provide you with the start of a definition for a `Shape` class. It has three properties: `name`, `sides`, and `sideLength`. This class only models shapes for which all sides are the same length, like a square or an equilateral triangle.

We'd like you to:

* Add a constructor to this class. The constructor takes arguments for the `name`, `sides`, and `sideLength` properties, and initializes them.
* Add a new method `calcPerimeter()` method to the class, which calculates its perimeter (the length of the shape's outer edge) and logs the result to the console.
* Create a new instance of the `Shape` class called `square`. Give it a `name` of `square`, `4` `sides`, and a `sideLength` of `5`.
* Call your `calcPerimeter()` method on the instance, to see whether it logs the calculation result to the browser's console as expected.
* Create a new instance of `Shape` called `triangle`, with a `name` of `triangle`, `3` `sides` and a `sideLength` of `3`.
* Call `triangle.calcPerimeter()` to check that it works OK.

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

OOJS 2
------

Next we'd like you to create a `Square` class that inherits from `Shape`, and adds a `calcArea()` method that calculates the square's area. Also set up the constructor so that the `name` property of `Square` object instances is automatically set to `square`, and the `sides` property is automatically set to `4`. When invoking the constructor, you should therefore just need to provide the `sideLength` property.

Create an instance of the `Square` class called `square` with appropriate property values, and call its `calcPerimeter()` and `calcArea()` methods to show that it works OK.

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.
Test your skills: variables
===========================

The aim of this skill test is to assess whether you've understood our Storing the information you need — Variables article.

**Note:** You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.
 If there is an error in your code, it will be logged into the results panel on this page or in the JavaScript console.


If you get stuck, you can reach out to us in one of our communication channels.

Variables 1
-----------

In this task we want you to:

* Declare a variable called `myName`.
* Initialize `myName` with a suitable value, on a separate line (you can use your actual name, or something else).
* Declare a variable called `myAge` and initialize it with a value, on the same line.

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Variables 2
-----------

In this task you need to add a new line to correct the value stored in the existing `myName` variable to your own name.

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Variables 3
-----------

The final task for now — in this case you are provided with some existing code, which has two errors present in it. The results panel should be outputting the name `Chris`, and a statement about how old Chris will be in 20 years' time. How can you fix the problem and correct the output?

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.
Test your skills: Math
======================

The aim of the tests on this page is to assess whether you've understood the Basic math in JavaScript — numbers and operators article.

**Note:** You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.
 If there is an error in your code, it will be logged into the results panel on this page or in the JavaScript console.


If you get stuck, you can reach out to us in one of our communication channels.

Math 1
------

 Let's start out by testing your knowledge of basic math operators.
 You will create four numeric values, add two together, subtract one from another, then multiply the results.
 Finally, we need to write a check that proves that this value is an even number.

Try updating the live code below to recreate the finished example by following these steps:

1. Create four variables that contain numbers. Call the variables something sensible.
2. Add the first two variables together and store the result in another variable.
3. Subtract the fourth variable from the third and store the result in another variable.
4. Multiply the results from steps **2** and **3** and store the result in a variable called `finalResult`.
5. Check if `finalResult` is an even number using an arithmetic operator and store the result in a variable called `evenOddResult`.

To pass this test, `finalResult` should have a value of `48` and `evenOddResult` should have a value of `0`.

Download the starting point for this task to work in your own editor or in an online editor.

Math 2
------

 In the second task, you are provided with two calculations with the results stored in the variables `result` and `result2`.
 You need to take the calculations, multiply them, and format the result to two decimal places.

Try updating the live code below to recreate the finished example by following these steps:

1. Multiply `result` and `result2` and assign the result back to `result` (use assignment shorthand).
2. Format `result` so that it has two decimal places and store it in a variable called `finalResult`.
3. Check the data type of `finalResult` using `typeof`. If it's a `string`, convert it to a `number` type and store the result in a variable called `finalNumber`.

To pass this test, `finalNumber` should have a result of `4633.33`.

Download the starting point for this task to work in your own editor or in an online editor.

Math 3
------

 In the final task for this article, we want you to write some tests.
 There are three groups, each consisting of a statement and two variables.
 For each one, write a test that proves or disproves the statement made.
 Store the results of those tests in variables called `weightComparison`, `heightComparison`, and `pwdMatch`, respectively.

Download the starting point for this task to work in your own editor or in an online editor.
Test your skills: Arrays
========================

The aim of this skill test is to assess whether you've understood our Arrays article.

**Note:** You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.

If you get stuck, you can reach out to us in one of our communication channels.

Arrays 1
--------

Let's start off with some basic array practice. In this task we'd like you to create an array of three items, stored inside a variable called `myArray`. The items can be anything you want — how about your favorite foods or bands?

Next, modify the first two items in the array using simple bracket notation and assignment. Then add a new item to the beginning of the array.

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Arrays 2
--------

Now let's move on to another task. Here you are provided with a string to work with. We'd like you to:

1. Convert the string into an array, removing the `+` characters in the process. Save the result in a variable called `myArray`.
2. Store the length of the array in a variable called `arrayLength`.
3. Store the last item in the array in a variable called `lastItem`.

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Arrays 3
--------

For this array task, we provide you with a starting array, and you will work in somewhat the opposite direction. You need to:

1. Remove the last item in the array.
2. Add two new names to the end of the array.
3. Go over each item in the array and add its index number after the name inside parentheses, for example `Ryu (0)`. Note that we don't teach how to do this in the Arrays article, so you'll have to do some research.
4. Finally, join the array items together in a single string called `myString`, with a separator of "`-`".

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Arrays 4
--------

For this array task, we provide you with a starting array listing the names of some birds.

* Find the index of the `"Eagles"` item, and use that to remove the `"Eagles"` item.
* Make a new array from this one, called `eBirds`, that contains only birds from the original array whose names begin with the letter "E". Note that `startsWith()` is a great way to check whether a string starts with a given character.

If it works, you should see `"Emus,Egrets"` appear in the page.

Download the starting point for this task to work in your own editor or in an online editor.
Test your skills: Events
========================

The aim of this skill test is to assess whether you've understood our Introduction to events article.

**Note:** You can try solutions by downloading the code and putting it in an online editor such as CodePen, JSFiddle, or Glitch.
 If there is an error, it will be logged in the results panel on the page or into the browser's JavaScript console to help you.


If you get stuck, you can reach out to us in one of our communication channels.

DOM manipulation: considered useful
-----------------------------------

Some of the questions below require you to write some DOM manipulation code to complete them — such as creating new HTML elements, setting their text contents to equal specific string values, and nesting them inside existing elements on the page — all via JavaScript.

We haven't explicitly taught this yet in the course, but you'll have seen some examples that make use of it, and we'd like you to do some research into what DOM APIs you need to successfully answer the questions. A good starting place is our Manipulating documents tutorial.

Events 1
--------

In our first events-related task, you need to create a simple event handler that causes the text inside the button (`btn`) to change when it is clicked on, and change back when it is clicked again.

The HTML should not be changed; just the JavaScript.

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Events 2
--------

Now we'll look at keyboard events. To pass this assessment you need to build an event handler that moves the circle around the provided canvas when the WASD keys are pressed on the keyboard. The circle is drawn with the function `drawCircle()`, which takes the following parameters as inputs:

* `x` — the x coordinate of the circle.
* `y` — the y coordinate of the circle.
* `size` — the radius of the circle.

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.

Events 3
--------

In the next events-related task, you need to set an event listener on the `<button>`s' parent element (`<div class="button-bar"> … </div>`), which when invoked by clicking any of the buttons will set the background of the `button-bar` to the color contained in the button's `data-color` attribute.

We want you to solve this without looping through all the buttons and giving each one their own event listener.

Try updating the live code below to recreate the finished example:

Download the starting point for this task to work in your own editor or in an online editor.
Test your skills: Loops
=======================

The aim of this skill test is to assess whether you've understood our Looping code article.

**Note:** You can try solutions by downloading the code and putting it in an online editor such as CodePen, JSFiddle, or Glitch.

If you get stuck, you can reach out to us in one of our communication channels.

DOM manipulation: considered useful
-----------------------------------

Some of the questions below require you to write some DOM manipulation code to complete them — such as creating new HTML elements, setting their text contents to equal specific string values, and nesting them inside existing elements on the page — all via JavaScript.

We haven't explicitly taught this yet in the course, but you'll have seen some examples that make use of it, and we'd like you to do some research into what DOM APIs you need to successfully answer the questions. A good starting place is our Manipulating documents tutorial.

Loops 1
-------

In our first looping task we want you to start by creating a simple loop that goes through all the items in the provided `myArray` and prints them out on the screen inside list items (i.e., `<li>` elements), which are appended to the provided `list`.

Download the starting point for this task to work in your own editor or in an online editor.

Loops 2
-------

In this next task, we want you to write a simple program that, given a name, searches an array of objects containing names and phone numbers (`phonebook`) and, if it finds the name, outputs the name and phone number into the paragraph (`para`) and then exits the loop before it has run its course.

If you haven't read about objects yet, don't worry! For now, all you need to know is how to access a member-value pair. You can read up on objects in the JavaScript object basics tutorial.

You are given three variables to begin with:

* `name` — contains a name to search for
* `para` — contains a reference to a paragraph, which will be used to report the results
* `phonebook` - contains the phonebook entries to search.

You should use a type of loop that you've not used in the previous task.

Download the starting point for this task to work in your own editor or in an online editor.

Loops 3
-------

In this final task, you are provided with the following:

* `i` — starts off with a value of 500; intended to be used as an iterator.
* `para` — contains a reference to a paragraph, which will be used to report the results.
* `isPrime()` — a function that, when passed a number, returns `true` if the number is a prime number, and `false` if not.

You need to use a loop to go through the numbers 2 to 500 backwards (1 is not counted as a prime number), and run the provided `isPrime()` function on them. For each number that isn't a prime number, continue on to the next loop iteration. For each one that is a prime number, add it to the paragraph's `textContent` along with some kind of separator.

You should use a type of loop that you've not used in the previous two tasks.

Download the starting point for this task to work in your own editor or in an online editor.
Understanding client-side web development tools
===============================================

Client-side tooling can be intimidating, but this series of articles aims to illustrate the purpose of some of the most common client-side tool types, explain the tools you can chain together, how to install them using package managers, and control them using the command line. We finish up by providing a complete toolchain example showing you how to get productive.

Prerequisites
-------------

You should really learn the basics of the core HTML, CSS, and JavaScript languages first before attempting to use the tools detailed here.

#### Looking to become a front-end web developer?

 We have put together a course that includes all the essential information you need to
 work towards your goal.


**Get started**

Guides
------

1. Client-side tooling overview

In this article we provide an overview of modern web tooling, what kinds of tools are available and where you'll meet them in the lifecycle of web app development, and how to find help with individual tools.

2. Command line crash course

In your development process you'll undoubtedly be required to run some command in the terminal (or on the "command line" — these are effectively the same thing). This article provides an introduction to the terminal, the essential commands you'll need to enter into it, how to chain commands together, and how to add your own command line interface (CLI) tools.

3. Package management basics

In this article we'll look at package managers in some detail to understand how we can use them in our own projects — to install project tool dependencies, keep them up-to-date, and more.

4. Introducing a complete toolchain

In the final couple of articles in the series we will solidify your tooling knowledge by walking you through the process of building up a sample case study toolchain. We'll go all the way from setting up a sensible development environment and putting transformation tools in place to actually deploying your app on Netlify. In this article we'll introduce the case study, set up our development environment, and set up our code transformation tools.

5. Deploying our app

In the final article in our series, we take the example toolchain we built up in the previous article and add to it so that we can deploy our sample app. We push the code to GitHub, deploy it using Netlify, and even show you how to add a simple test into the process.
Filtering our to-do items
=========================

* Previous
* Overview: Client-side JavaScript frameworks
* Next

Now let's move on to adding functionality to allow users to filter their to-do items, so they can view active, completed, or all items.

|  |  |
| --- | --- |
| Prerequisites: | 
 Familiarity with the core HTML,
 CSS, and
 JavaScript languages,
 knowledge of the
 terminal/command line.
  |
| Objective: | To add filtering functionality to our app. |

Our filtering code
------------------

Filtering items builds on the `filter` property, which you previously added to `app.component.ts`:


```ts
filter: 'all' | 'active' | 'done' = 'all';
```


The default value for filter is `all`, but it can also be `active` or `done`.

Adding filter controls
----------------------

 In `app.component.html`, add the following HTML below the **Add** button but above the section that lists the items.
 In the following snippet, the existing sections in your HTML are in comments so you can see exactly where to put the buttons.


```html
<!-- <button class="btn-primary" (click)="addItem(newItem.value)">Add</button>
 -->

<!-- Buttons that show all, still to do, or done items on click -->
<div class="btn-wrapper">
  <button
 class="btn btn-menu"
 [class.active]="filter == 'all'"
 (click)="filter = 'all'">
    All
  </button>

  <button
 class="btn btn-menu"
 [class.active]="filter == 'active'"
 (click)="filter = 'active'">
    To Do
  </button>

  <button
 class="btn btn-menu"
 [class.active]="filter == 'done'"
 (click)="filter = 'done'">
    Done
  </button>
</div>

<!-- <h2>{{items.length}} item(s)</h2>
 <ul>... -->
```


Clicking the buttons changes the `filter` values, which determines the `items` that show as well as the styles that Angular applies to the active button.

* If the user clicks the **All** button, all of the items show.
* If the user clicks the **To do** button, only the items with a `done` value of `false` show.
* If the user clicks the **Done** button, only the items with a `done` value of `true` show.

 A class attribute binding, using square brackets, `[]`, controls the text color of the buttons.
 The class binding, `[class.active]`, applies the `active` class when the value of `filter` matches the expression.
 For example, when the user clicks the **Done** button, which sets the `filter` value to `done`, the class binding expression of `filter == 'done'` evaluates to `true`.
 When the `filter` value is `done`, Angular applies the `active` class to the **Done** button to make the text color green.
 As soon as the user clicks on one of the other buttons, the value a `filter` is no longer `done`, so the green text color no longer applies.

Summary
-------

That was quick! Since you already had the `filter` code in `app.component.ts`, all you had to do was edit the template in order to provide controls for filtering the items. Our next — and last — article looks at how to build your Angular app ready for production, and provides further resources to carry on your learning journey.

* Previous
* Overview: Client-side JavaScript frameworks
* Next