Skip to content

Latest commit

 

History

History
71 lines (46 loc) · 5.18 KB

File metadata and controls

71 lines (46 loc) · 5.18 KB

Homework Week 3

Here you find the readings you have to complete before the fourth lecture.

Step 0 review:

Step 1: Implement feedback

Your teachers have provided you with feedback in issues in Github.

  • Implement feedback from Github
  • Check on one of your fellow students code and issues and see if her or she implemented their feedback correctly. If there are some things that can be improved make an issue suggesting further improvements. If you think that the feedback has been implemented correctly create a issue saying something like: "nice work you can clear your issues".

Step 2: FreeCodeCamp challenges:

Step 3: Custom DOM manipulation challenge 🎓

  1. Open a new js file and start by declaring an array that contains 10 strings. These strings should be of book titles you have read (or made up) and be lowercase without spaces or special characters so that you can use these later as Id's. (Example: Harry Potter's - The Chamber of Secrets -> harry_potter_chamber_secrets).

  2. Create a basic html file called index.html and use it to load the js file, confirm the console.log() show the array. (This is for debugging and making sure everything is in order. You can delete the console.log() later when you're done :))

  3. Make a function (or functions) that generate a ul with li elements for each book ID in the array using a for loop.

  4. Make an object containing information for each book. Each item (object) in this object should have the book ID you thought up in point 1 as a key, and it should have at least the following fields: title, language and author.

  5. Now change the function you used to display the book ID's in a list to take the actual information about the book from the object and display that. Make sure you choose the right html elements for each piece of info, for instance, a heading for the title.

  6. Beautify your html page with css, add sources and alts to each of the images.

  7. Download book covers for each book, construct a new Object which has as keys the bookId's again, and as value the path to the image source (e.g. {"harry_potter_blabla": "./img/harry_potter_blabla.jpg", ...}). Now loop over these entries (hint: Object.keys(objectName) gives you an array containing the keys). Then write a function which places an image at the corresponding li element. Remember that Objects are not ordered, so you cannot guarantee that the first key is the first li element. (Hint: you could give each li item an id tag by modifying the function you made before)

How to hand in your homework:
• Upload your homework in your "sha-javascript1" Github repository. Make sure to create a new folder "week3" first. 
• Upload your homework files inside the week3 folder and write a description for this “commit”.
• Your sha-javascript1/week3 should now contain an index.html, main.css and a script.js file (and the images folder)
• Place the link to your repository folder in Trello.

And just for fun ... https://www.freecodecamp.com/challenges/sum-all-numbers-in-a-range

💥 Bonus homework 💥

the Bonus homework for this week (for those of you want an extra challenge) do the following:

Codewars is really a lot of fun, and you can compete against each other who has the most points :trollface: it’s a great way to really practice JavaScript a lot in various problems.

Please note, there are various challenges all sorted on difficultly called KIU. Kiu 8 is the easiest, Kiu 1 is the hardest, we expect you to do challenges around level 8, 7 maybe.

enjoy!

⭐ Additional resources and review: here (work in progress):star: