Complex Data 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 "03-complex-data." 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

Practice with Complicated Data

  1. Create an object called me with a property of first and last. Add your first and last names. Then log out the object in the console to test.

  2. Create an object called user with properties of id , username, and isLoggedIn. Set the values to 1, yourusername and true. Log out the user object to the console.

  3. Below the user object, write a function called sayHi( user ) that takes a user object as a parameter. If the user is loggedIn, log out a message Hi USERNAME!. If they are logged out, log a message for them to login. Call sayHi() and pass it the user object to test.

  4. Move the sayHi() function to be stored as part of the user object. Remove the user parameter from needing to be passed to the function, but still have it log user.username. Call user.sayHi() to test.

  5. Create a new function inside the user object called sayHiWithThis(). Have it log "Hi USERNAME!" but using this.username to get the value of the username. Also use this when testing the user's logged in status in the conditional statement. Call user.sayHiWithThis() and check the console to test.

  6. Create a function called getUserInfo(). Inside of the function create an empty user object. Then prompt the user for a username and save the value to user.username. Then prompt the user for their password and save it as user.password. Finally, return the user object with the username and password. Log getUserInfo() in the console to test.

  7. Underneath the post object, create a function called getHeaderMarkup( post ) that takes a post object with a title and url property and returns the following: <h1><a href="POST_URL">POST_TITLE</a></h1> . Console log getHeaderMarkup() with the post object passed as the parameter to test.

  8. Add an excerpt property to the post object with a value of Lorem ipsum excerpt. Under the post object, create a function called getExcerptMarkup() that takes a post object with an excerpt property and returns the following: <div class="excerpt"><p>POST_EXCERPT</p></div>. Console log getExcerptMarkup( post) to test.

  9. Create an object called post that takes an id with a value of 1, a title with a value of JavaScript Explained, a url with a value of https://javascriptexplained.com/ and excerpt of Lorem ipsum excerpt. Log post to the console to test.

  10. Under the post object, create a function called getPostMarkup that takes the post object as a parameter. Inside the function, create a variable called markup that starts with a value of <article id="POSTID". Then, add to the markup values from getHeaderMarkup() and then again, add getExcerptMarkup(), to the value of markup. Pass post into each function as needed. Log getPostMarkup( post ) to the console to test.

  11. Create an object called message with properties of notice, error, and success. Assign each of the properties the following values: This is a notice., An error occured! and Success!. Log out message to test.

  12. Under the message object, create a function called getMessage( type ) that takes a parameter of type. Inside the function, create an object called message the same as the message from Exercise 11. Return the correct message based on whether type equals notice, error, or success. Log out getMessage( `notice` ) and you should get "This is a notice."

  13. Create a function called getMessageMarkup( type ) that does the same thing as the function in Exercise 12. However, move the message object to be located inside the getMessageMarkup() function. Thenthe function return the following markup with the correct message: <div class="message MESSAGETYPE">MESSAGE</div> . To test, log out getMessageMarkup( `error` ) and you should get <div class="message error">An error occured!</div> .

  14. Create an array called postIds with a collection of ids like 1, 13, 44, 17, 22, 19, 11. Log out postIds to the ids.

  15. Map over the postIds and log each one to the console.

  16. Create a function called logIDs( postIds ) that takes postIds as a parameter and maps over each id and log it to the console.

  17. Create an array called posts that includes a collection of three posts. Each post should have an id, title, slug and excerpt. Log the posts to the console.

  18. Create a function called logTitles( posts ) that takes posts as a parameter and maps over the posts and logs the title of each post to the console.

  19. Create a function called getTitlesMarkup( posts ) that takes the array of posts and returns a string of an unordered list with <li><h2><a href="LINK">TITLE</a></h2></li> for each post. Log to the console to test.

  20. Create a function called getPostMarkup( posts ) that takes an array of post objects and returns the following markup with an article for each post. Log getPostMarkup(posts) to the console to test. Example: <div class="posts"> <article class="post-POSTID"> <h2>TITLE 1</h2> <p>EXCERPT 1</p> </article> </div>

  21. Create an array called titles with three made up titles. On the next line, log the titles out in alphabetical order. Then on the following line, log out the titles in reverse alphabetical order.

  22. Create an array called numbers with the following numbers 17, 11, 4, 100, 12, 8, 6, 14, 11. On the next line, log the numbers in ascending numerical order (1, 2, 3). Then on the following line, log out the numbers in reverse numerical order (3, 2, 1).

  23. Create an array of post objects called randomPosts with the three posts below. Then log out the post titles in order by ID.

    1. { id: 33, title: `Post 33` }

    2. { id: 2, title: `Second Post!` }

    3. { id: 100, title: `A Reflection` }

  24. Create a new array called jsArticles that filters through posts below and returns those that have a category of js. Log out the jsArticles to the page.

    const posts = [ { id: 1, title: `Welcome to JS`, cats: [ `js`, `intro` ] }, { id: 2, title: `Using a Code Editor`, cats: [ `tools`, `intro` ] }, { id: 3, title: `JavaScript Arrays`, cats: [ `js` ] }, ]

  25. Extend the posts from Exercise #24 to include a url and an excerpt that you can make up. Then pass jsArticles into the getPostMarkup() function from Exercise #20 and log out the results.

  26. Add a new post to the array of posts that includes a category of js. Call getPostMarkup( jsArticles ) again to test.

  27. Create a new variable called nonJSArticles that includes all articles without a category of js. Call getPostMarkup( nonJSArticles ) to test.

  28. Remove the post about the Code Editor from the collection. Call getPostMarkup( nonJSArticles ) to test. It should log an empty div.

  29. Add a new post to the array without a js category. You can make up the information. Call getPostMarkup( nonJSArticles ) to test.

  30. Create four variables: min , max, average, and total. Then get the value for each variable from the following data set below. Format the total as a price, with two decimal places: 100,000.001. const dataset = [ { id: 1820, value: 491800 }, { id: 4310, value: 430110 }, { id: 3980, value: 657010 }, { id: 5573, value: 801430 }, { id: 2010, value: 313001 } ]

What Now?

At this point we have actually learned quite a lot about JavaScript. We have learned enough that it's time to stop learning about what we call "Vanilla JavaScript" and move into using JavaScript in the web browser.

In order for our JavaScript to interact with the HTML, CSS and user interactions we have to use The Browser API, called "The DOM." In the next chapter we will take the JavaScript fundamentals we have learned so far and apply it to working with the Browser API.

This is where things will get fun, so let's keep going!