Mentor Léo: Week 1/Day 4: Javascript

Work from anywhere, be a web developer
Learn by doing, become a Hero developer

This series is about teaching Léo to become a professional developer from scratch. Léo can be any of you, desiring to learn and grow. Apply here, it will always be free ♥ https://mentorleo.co

See the goals of the project week 1 on medium

Day 4: Javascript !

Okay so with Day 3 you managed to build some cool labels. Now it’s time to add some dynamism to your website ;)

Exercise 1

  • After all your previous HTML content, create another div with the attribute id=”jobList”
  • Create a script tag at the end of the body that will contain your javascript
  • Declare an array variable that contains what’s in this file: mock.json (make sure you understand what a variable is, and what an array variable means). You’ll use this variable in exercise 3. This is called a mock because it is fake data. In Day 5, you’ll generate an array with real data!

Exercise 2

  • Using javascript, write “TEST” in the element with id “jobList”
  • Now, remplace id=”jobList” by class=”jobList”. Edit your javascript code to write “TEST” in the same element that is now identified with a class (hint: you need to call a different function).

Exercise 3

  • Now, iterate over your jobList array and append each job offer to your “jobList” element (understand: loop through the array and write each job offers in your “jobList” element).
  • Now, transform your “jobList” element into a <ul></ul> (unordered list). Instead of writing simple text into the element, try to write each job offer wrapped with a <li></li> element (item of list).

Concepts to understand

  • what a programming language is
  • variables (numbers, strings, arrays, etc)
  • loops
  • dynamic interaction with the webpage (the DOM)

Resources

→ click here to go to Day 5👍

Call to action

Become a Léo ! We are creating a community of motivated Léos helping each other. Apply here, it will always be free ♥ https://mentorleo.co