Mini Challenge: Create a New Section With Javascript

Open the project folder

Challenge

This lesson contains a challenge to try out that you have learned so far. The starter project has the following HTML code:

<section class="recipes">
  <h3>Home cooking time</h3>
  <p>Some of our chefs recipes you can try at home</p>
  <button>SEE ALL</button>
  <div class="recipes_container">
    <article>
      <img src="burger.jpg" alt="" />
      <h4>Ultimate Vegan</h4>
      <div class="recipe_info">
        <span>2 people</span> ~ <span>30 mins</span> ~
        <span>457 calories</span>
      </div>
    </article>
    <article>
      <img src="burger.jpg" alt="" />
      <h4>Spicy Bean Burger</h4>
      <div class="recipe_info">
        <span>4 people</span> ~ <span>40 mins</span> ~
        <span>624 calories</span>
      </div>
    </article>
  </div>
</section>

Using what you have learned in the previous section, the challenge is to recreate this recipes section using JavaScript. You can even change it if you would like and add different images.

In the folder for this lesson the CSS has been moved to it own styles.css file.

Once completed, you can remove or comment out the HTML recipes section to see your JavaScript version. Some styles have been added for this so you just need to add the class names for them to take effect.

This section has no guidance, just a chance to go through the steps we did previously of creating elements, wrappers, add them together, add class names, and if you keep them organised you shouldn’t have any trouble.

I have also left in place all the code from the previous section so you can use it as guidance if needed. Give it a try, good luck, and there is no right or wrong way of doing it, the aim is just to try things out on your own.