Reusable Code Exercises

Getting Setup with the Practice Exercises

To get setup with these practice exercises:

  1. You should already have the files from github.com/zgordon/javascript-explained downloaded and saved to your computer.

  2. Open the folder "02-reusable-code." It should have a starter.html filter and a completed.html file.

  3. Open the "starter.html" in your code editor

  4. Open the "starter.html" in your web browser and open the console for testing

30 Practice Exercises with Functions

  1. Write a function named logHi() that logs out "Hi!". Call logHi() to test it.

  2. Write a function named alertHi() that alerts out "Hi!". Call alertHi() to test it.

  3. Write a function called checkFirst() that confirms if the user wants a "Hi!" . Alert "Hi!" if they do want one and do nothing if they do not. Call checkFirst() to test it.

  4. Write a function named askName() that prompts the user Please enter your name. Save the value of their name to a variable called name. Then alert Hi ${name}!. Call askName() to test.

  5. Write a function called getUsername() that returns the value of myusername. Log getUsername() in the console to test it.

  6. Below the getUsername() function, create a variable called username and assign it to the value of getUsername(). Log the value of username to the console. It should equal myusername.

  7. Write a function called getFullName() that takes two parameters, first and last , combines them with a space between and returns the value. Console log getFullName() with your first and last name as the parameters to test.

  8. After the getFullName() function, create a variable called fullName and assign it the value of getFullName() with your first and last name passed as the two parameters. Log fullName to the console to test.

  9. Create a function called askFullName() that will prompt the user for their first name and assign it to a variable called first inside the function. Then it will prompt them for their last name and save it to a variable called last inside the function. Finally, it will return the value of the user's full name with a space between. Log askFullName() to the console to test.

  10. After askFullName(), create a new variable called userFullName and assign it the value of askFullName(). This should trigger askFullName() to execute. Enter the prompts and then log the value of userFullName to the console.

  11. Create a function called login() . Inside the function, create a prompt asking the user to enter a password. Save the value of the prompt in a variable called password . Next, check to see if password equals the word "password". If it does, alert, "Thank you! You are Logged In!". If they did not enter the word "password" for their password, alert "Incorrect, please try again!". Call the function to test it.

  12. Create a function called getLogin() that does the same thing as login() but it also returns true or false depending on whether the person logged in successfully. Log getLogin() to the console to test it.

  13. Above the getLogin() function, create a function called init() . Inside of it create a new variable called loggedIn that is set to the value of getLogin(). Log out the value of loggedIn inside of theinit() function and then call init() to test.

  14. Modify the init() function by adding a conditional check to see if loggedIn is equal to true. If it is, create a variable called name and set it equal to askFullName() from before. Alert out a welcome like Welcome ${name}!. Call init() to test.

  15. Create a function called getHeaderMarkup() that returns markup like this <h1>Header</h1> . Log out getHeaderMarkup() to the console to test.

  16. Create a function called getMyHeaderMarkup( title ) that takes a parameter of title and returns a string of markup with an <h1> and the title passed in. Console log getHeaderMarkup() and pass it the text My Header to test.

  17. Create a function called getLinkMarkup() that returns markup like this <a href="#link">Link</a> . Log out getLinkMarkup() in the console to test.

  18. Create a function called getMyLinkMarkup( title, url ) that takes two parameters, a url and a title. Then have the function return something like this: <a href="URL">TITLE</a>. Log out getMyLinkMarkup() in the console and pass it a URL and a title to test.

  19. Above getMyLinkMarkup(), create a function called getHeaderLinkMarkup( title, url ) that takes a title and a url. Inside the function create a variable called link that gets the value of getMyLinkMarkup( title, url ) with the title and URL passed to it. Then create a variable called header and set it equal to the getMyHeaderMarkup() with the link variable passed into it instead of normal text. Finally return the value of header. Console log getHeaderLinkMarkup() with a title and a url passed to it to test.

  20. Create a function called getExcerptMarkup( excerpt ) that takes in an excerpt and returns something like this: <div class="excerpt"><p>EXCERPT</p></div>. Log out getExerptMarkup() with some text to test.

  21. Create a function called getAuthorMarkup( author ) that takes in an author name and returns a string of text with a paragraph tag and "By: AUTHOR". Log getAuthorMarkup() and pass it a name to test.

  22. Above getExcerptMarkup(), create a function called getArticleMarkup() that takes the following parameters: title, url, excerpt, author . Then inside of the function create a variable called markup that gets the value of getHeaderLinkMarkup() and adds to it the value of getExcerptMarkup() and finally adds to it the value of getAuthorMarkup() . Then return all of that combined markup. Log getArticlelMarkup() to the console and pass it the correct parameters to test. Example: function getMarkup() { let markup = getMarkup1() markup += getMarkup2() markup += getMarkup3() return markup }

  23. Create a function called add() that takes two numbers, adds them together and then returns the total. Log out add() and pass it two numbers to test.

  24. Create a function called subtract() that takes two numbers, subtracts one from the other and then returns the difference. Log out subtract() and pass it two numbers to test.

  25. Create a function called multiply() that takes two numbers, multiples them together and returns the total. Log out multiply() and pass it two numbers to test.

  26. Create a function called getTaxes() that takes in a parameter of a price, multiples it by .05 and then returns the tax amount. Log getTaxes() in the console and pass in a price to test.

  27. Rewrite the practice exercise #1 using the arrow syntax.

  28. Rewrite the practice exercise #5 using the arrow syntax.

  29. Rewrite the practice exercise #11 using the arrow syntax.

  30. Rewrite the practice exercise #22 using the arrow syntax for all functions.

What Now?

Hopefully by now you feel fairly comfortable creating functions. Accepting parameters, writing conditional statements and returning values may take a while to get used to. And again, if you need to look up how all this works every time still, that is okay!

Now we are going to move into the final chapter of the book that deals purely with JavaScript. We are going to revisit types of data again and look at two new types that will make writing our JavaScript a lot easy and a lot more powerful.

So, head once you feel comfortable with the practice exercises, proceed over to the next chapter on Using Complex Data.