hackyourfuture.dk

Assignment

So why this assignment?

Interacting with the DOM is a crucial part of building a web app. If we cannot interact with the DOM then the javascript we write cannot change what we see in the browser. Connecting javascript to the browser opens up a new world of possibilities where only the imagination is the limiting factor. These assignments will help you get a glimpse into what is possible.

1. Warm up

Complete these Katas on CodeWars:

Remember to submit a link to your profile as part of submitting this assignment.

2. Hogwarts House generator

In the Harry Potter series, every student of Hogwarts school is placed into a house (Gryffindor, Hufflepuff, Ravenclaw, or Slytherin).

Let's create a page where a user writes their name in an input element. The user then clicks a button. The user will now receive a Hogwarts House, e.g. "Benjamin belongs in Slytherin!"

2.1. Markup time!

Create an input element, a button and a tag to display the Hogwarts house into.

2.2. Setting up the events

When the user clicks the button, get the name the user wrote in the input field.

2.3. Choosing a house

Now we can get the users name, next step is to add the Hogwarts house string and display that with the users name in this format: "Name belongs in House!".

Store the houses in an array, and return a random one to be assigned to the user.

2.4. Trying again

If a user isn't happy with the house they ended up in, they should be able to try again. Make sure if the user wants to, they can click a button to try and get into a different house.

2.5. No input

What if the user clicks to get assigned a house, but they didn't supply their name? What's the best way to handle this situation?

2.6. New feature?

Think of a new feature or design to add to your generator, and implement it! Maybe a cool animation? Or a description of each house? Or some images to represent the houses? Or a beautifully styled UI?

3. hyfBay

You have been hired to build a simple app lightly inspired by eBay called hyfBay.

It should be a website where a user can search for a product. The products can also be filtered and sorted, depending on what the user is looking for.

3.1. Let's get started!

In your assignment repo, you will find a template to get started with:

  • main.js - This is where you will be writing your JavaScript code.

  • hyfBayHelpers.js - This defines a function called getAvailableProducts that you can use to get an array of products to display on your website.

  • index.html - A basic html page that you can add some markup and styles to.

3.2. Requirements

You should implement the following functionality:

  • The product list should be generated by calling a function called renderProducts(products), that you will write.

  • You should use the getAvailableProducts function to get a list of products to use.

  • The list of products should be rendered as a html list.

  • The product list items should contain title, price and rating

Tips

Feeling stuck? here's some tips on where to start:

  1. Your HTML needs a ul element that can contain all the products. You can then select that ul using document.querySelector in JavaScript, and modify its contents.

  2. To generate the content, for each product in the products array:

    1. create an li

    2. Set the innerHTML of that li to the contain the title, price and rating

    3. Append the li to the ul

Last updated