Simple Data Exercises

Getting Setup with the Practice Exercises

We're going to take you through some sample exercises to practice what you learned in the last chapter.

To make these exercises as quick and straightfoward as possible, we've written much of the code for you. Each exercise has a "starter" file where you write the code. Each exercise also has a "completed" file which shows you the correct code for the exercise.

  • Open the folders you just downloaded to. your computer.

  • Open the folder "01-simple-data."

  • Inside "01-simple-data" you should have a "starter" folder and a "completed" folder.

Use the files in the "starter" folder to write your code. Use the files in the "completed" folder to check your work.

One approach I recommend is to open the entire "starter" folder in your code editor. Editors such as VS Code https://code.visualstudio.com/ will let you open entire folders and view and edit all of the files.

Each exercise will have you log a value to the console. This is the same technique we used throughout the previous chapter.

So, to check your exercises, open the exercise HTML file in a web browser and then click on the Console tab.

If you get stuck with any exercise, check the completed version of the exercise for help.

Note, the exercises do build on each other and get more complex as they go. So if you struggle at first with some of the later exercises, don't worry! Just keep practicing them until they become more comfortable. The completed files are always there to show you the answer.

Getting Started Exercises With Strings

To help you practice what you've learned so far, follow along with the following exercises:

Exercise #1: In this first task, you're going to write your own string. Create a string called siteName that should not be changed and assign it a value of "JavaScript Explained." Log it to the console and your end result should look like the image below. If you need help, open the "completed" folder and look inside exercise-01.html.

Exercise #2: This second exercise is almost identical to the first exercise. Create a string called siteURL that should not be changed and assign it a value "https://javascriptexplained.com". Log it to the console and this should be your end result:

Exercise #3: We're going create another string but this time it should be possible to change the value. Remember to use let instead of constto allow changes. Create a string called username and assign it a value of "yourusername". Log it to the console and this should be your end result:

Exercise #4: Underneath where username is assigned, reassign username to have a new value of newusername and check the new username in the console.

Exercise #5. Underneath the line where siteName is defined, try to change the value of siteName to "New Site Name." This should produce an error. If you get the error, good job!

Exercise #6. Let's try another string exercise. Create a new string variable called firstName and assign it your first name. Log it to the console and check your end result. My first name is "Zac" so this image shows my result:

Exercise #7: Now let's add a second string. Underneath firstName, create a new string variable called lastName and assign it your last name. Log it to the console and check your end result. My last name is "Gordon" so this image shows my result:

Exercise #8: You might have guessed where this exercise is headed! Let's combine the previous two strings. Underneath lastName, create a new string variable called fullName and combine firstName and lastName together with a space between. Remember to use the plus sign + to combine the strings, plus add an extra space in between the characters. Log the full name to the console to test it. Here's an example of combining strings: const combined = one + ' ' + two

Exercises with HTML

In this section, we're going to use Javascript to create HTML output:

Exercise #9. First, create a new string variable called header with markup for an h1 header and text of "Header." Log it to the console and this should be your end result:

Exercise #10. This exercise doesn't involve any HTML, but it's helping us build to a more advanced HTML output in the next exercise. Create a variable called headerTitle and assign it a value of "New Title." Log it to the console to test it.

Exercise #11. Now let's combine what we've done in the last two exercises. We're going to load a string inside HTML output. Underneath headerTitle, create a new string variable called myHeader with markup for an h1 that uses the headerTitle variable for the text. Here's an example: const demoHeader = `<h1>${demoTitle}</h1>`

Exercise #12. Let's add some different HTML to our output. Create a new string variable called link with markup for a link. Have the link href go to https://javascriptforwp.com and the link text say JavaScript Explained. Log link to the console to test it.

Exercise #13. This time we're only going to output the URL. Create a new variable called linkURL with a value of https://javascriptforwp.com. Log it to the console to test it.

Exercise #14. Underneath linkURL, create a new variable called linkText with the value of JavaScript Explained. Log linkText to the console to test it.

Exercise #15. Underneath linkText, create a new variable called myLink with markup for a link. Include the variables linkURL for the href value and linkText for the link text. Example: const demoTag = `<tag attr="${demoAttr}">${demoTitle}</tag>`

Exercises to Modify the Output

In this section, we're going to use Javascript to analyze and even change our code's output.

Exercise #16. Create a new variable called lyrics with the value of a few of the lyrics from a song you like. I've chosen an example from the Beatles:

Exercise #17. Underneath lyrics, create a new variable called isInLyrics and have it use .includes() to return true if a certain word is in the lyrics and false if a certain word is not in the lyrics. Log the results of isInLyrics to the console to test. In the image below, I've tested for the word "love" in the Beatles' lyrics.

Exercise #18. Create a new variable called comment and paste in some Lorem ipsum or dummy text in as the value. Make sure to add the word "notallowed" as part of the string of text. Log it to the console to test it.

Exercise #19. Create a new variable called isBlacklisted. Have your code return true if comment contains the word "notallowed" and false if the word does not exist. Log isBlacklisted out to the console to test, and you should see the result is "true".

Exercise #20. Create a new variable called title with the value of JavaScript Explained. Log the position of the J in the string to the console. Log the position of the E in the string to the console. Your results should be should be 0 and 11.

Exercise #21. Create a new variable called testURL and assign it the value of https://test.dev#clicked . Get the position of # and log it to the console. Your result should be "16" which means that # is the 16th character in the URL.

Exercise #22. Now we're going to break about the URL and log only one portion of the characters. Underneath of testURL, create a new variable called hash and assign it the value of everything after the # in the testURL string. Your result is "clicked" because those the characters that appear after the # symbol.

Exercises With Numbers

In these next exercises, you'll practice using numbers with Javascript.

Exercise #23. Let's start with a straightforward example. Create a number variable called price that can be changed and set it to 0. Log it to the console to test.

Exercise #24. On the line after where price is assigned, reassign the price to be 100.

Exercise #25. Now let's change the format of our output. Log out the price, formatted to look like this: 100.00 . To displays number to two decimal places shown, use toFixed(2).

Exercise #26. Underneath price, create a number variable that should not be changed called tax and set it to 0.2 . Log out the tax to the console formatted to look like 0.20.

Exercise #27. Underneath tax, create a new variable called total that can be changed and set it equal to the price plus the price times the tax. Log the total to the console formatted with two decimal place points like 120.00.

Exercise #28. Create a string variable called quantity that can be changed with a value of "10" . Inside of a console.log() add 1 to the quantity and test the result. Note that your output should be 101 instead of 11. When adding to your value, take this approach: (quantity + 1).

Exercise #29. Inside of the console.log() try multiplying quantity times 5. You should get 50. When adding to your value, take this approach: (quantity * 5).This shows that with multiplication, string numbers of auto converted to actual numbers.

Exercise #30. This final exercise is the hardest one in this chapter and builds on everything we've learned so far. After price, add a number variable for quantity set to 2. Modify the calculation or the total so that it takes into account the quantity. You should get 240.00.

What Now?

Hopefully by now you feel fairly comfortable creating a string, a number and a boolean. Modifying them may take a while to get comfortable and if you have to lookup how to do things every time, that is okay! That is part of learning and coding on the web :)

Now we want to look at how we can take our knowledge of working with simple data and add to it an understanding of how to write more reusable code. When we have a bunch of easy to repeat and execute bits of code we can use them together to build something really complex and interactive.

In the next chapter we will look at how to write reusable code using functions.