acidtone

Spoilers: Using Array.includes() to test for an array item

This is a potential answer to the exercise: Test for an array item.

Stretch Activity

• Try validating the user input before testing:
  • inputValue value missing: "Please enter a Character Class";

acidtone

JS Activity: Testing for an array item

When an array contains primitive values, you can use the Array.includes() method to test if a value exists within that array.

Instructions

1. Download or fork/clone this Gist into your workspace.
2. Using conditional statements and the Array.includes() method, test if the entered command line value exists in the characterClasses array:

   • If true log the following to the console:

"[inputted value]" is a valid Character Class!`

acidtone

npm: Initialize a new project

First-time Setup

If you've just installed npm, it'll save you some time later if you set some defaults in your config:

1. Set your name

   $ npm config set init-author-name "your name"
   

acidtone

Refactoring Activity: Embedded JS/CSS to eternal files

The goal of this activity is to move the embedded Javascript and CSS in index.html to external files without breaking the page.

Instructions

1. Download or fork/clone this Gist into your workspace.
2. Move the Javascript currently in the script element to an external file called script.js. Delete the now empty script element.
3. In index.html, link to this new Javascript file by adding a new script element in the head of the HTML file.
   • Use the src attribute to relatively link to the new Javascript file you just created.
   • Add an attribute of defer to the script element. This ensures that the Javascript loads after the DOM has loaded (this is the same as putting the script at the bottom of the page).
4. Test the page to make sure it still functions normally (colours should change when you click the button).

acidtone

REST APIs: Practice endpoints

Some examples from this list of Public APIs.

Beginner

These APIs return pretty simple data (usually a single object with a few properties).

• JSON Placeholder

GET https://jsonplaceholder.typicode.com/posts

acidtone

JS Activity: Dynamic Lorem Picsum gallery using an array of objects

In this activity, you will refactor the Picsum image gallery using an array of objects in animals.js:

• Create custom alt attributes for each image;
• Link the src of each image to a local jpg file;
• Link each image so that clicking on the image redirects to the placeholder image on Lorem Picsum.

Instructions

1. Download or fork/clone this Gist into your workspace.
2. To this new workspace, add the lorem picsum images. Rename your directories as needed to follow file naming conventions.
3. Replace the picsumIds array of numbers (in picsum-list.js with the picsumAnimals array of objects in animals.js.

acidtone

Spoilers: Array.forEach() - Create a gallery of Lorem Picsum images from an array of image id's

A possible solution to this forEach() Activity.

acidtone

JS Activity: Array.forEach() - Create a comma-separated list of nouns

In this activity, you will generate a comma-separated list of nouns and display it on a web page.

For example, this array:

const nouns = [`one`, `two`, `three`];

Should be display on the page as a sentence in the following format:

acidtone

JS Activity: Array.forEach() - Create a gallery of Lorem Picsum images from an array of image id's

In this activity, you will take a list of image IDs listed in picsum-list.js and create a gallery of images using the Lorem Picsum service.

Lorem Picsum is an image service that allows you to embed placeholder photos into your web pages. The images are pulled from open-source Unsplash images.

For example, the following HTML displays this puppy image

<img src="https://picsum.photos/id/237/300/300" alt="Lorem Picsum Image">

acidtone

JS Activity: Text area character counter

In this activity you will add a dynamic counter that displays the number of characters entered into a <textarea> element.

Instructions

1. In character-counter.js, create a textarea variable using document.querySelector().
2. Create a counter variable for the paragraph that will hold the current character count of textarea.
3. Using Element.getAttribute() create a limit variable that holds the max character limit defined by the maxlength attribute of the textarea element.
4. Using Element.addEventListener() and the input event, add an event handler to textarea that updates counter every time the user types a character.
   • Hint: textarea.value has all the same methods as any other string.