Home

Definitions Lesson - Step By Step Instructions




  1. Open/Create the new files using Visual Studio Code.
    • definitions.html
    • definitions.css
    • definitions.js
  2. My preferred VSC layout is 2 by 2, Click on View, Editor Layout and select Grid 2 X 2.
  3. Place one file in each of the windows leaving one open window for playing with sample code, etc.
  4. At this point your screen should look link the one in the video.
  5. Link and test your links
    • Link your definitions.css file to your definitions.html file.
    • Test your css file link by...
    • Link your definitions.js file to your definitions.html file.
    • Test your js file link by...
  6. Add your html by copying my code.
  7. If necessary, Add your css by copying my code.
  8. Open, goto your definitions.js file so we can add a few sample definitions. Here we are going to create our data in JSON format.
    • If you are new to JSON it is better to copy some existing JSON and modify to your needs.
    • This way you are less likely to have a syntax issue.
  9. Now lets test our JSON using console.table(definitions);
  10. Now lets test our JSON using console.log(definitions);
  11. Be sure you have the Google Chrome Console open. F12 or right click and select inspect.
  12. Make note of the difference between the way console log and console table show your data. Both have their advantages when debuggine your code.
  13. Now lets use console.log to see how many definitions we have in our array.
    • Remember our const "definitions" automatically inherited some methods when we made it a reference to our array of JSON data. One of those methods was length. Now we will use the length method to tell us how many items are in our array.
    • We will use the same console.log we used in the previous step, but will add the method length.
  14. In your Google Chrome Console, you should have an integer that represents the number of items in your array.
  15. Get the steps from the definitions.js file and merge with this file.