Skip to content

homework.md

Latest commit

 

History

History
158 lines (109 loc) · 8.03 KB

homework.md

File metadata and controls

158 lines (109 loc) · 8.03 KB

Homework

Get git ready to work on homework

Using the hyf-homework repo. In the terminal run git status

If there are changes that have not been committed, figure out what to do with those changes

  • Should they be committed to another branch?
  • Should they be committed to master?
  • Should they be discarded?

When you have figured out what to do with the changes and fixed those. Write git status again. If it says nothing to commit, working tree clean. Then you are ready to create the branch for this weeks homework.

Creating the branch

Using the hyf-homework repo write this command

git checkout master - You are now on the master branch

git checkout -b javascript/javascript3/week2

This will create and checkout the branch so you are ready make commits to it

This video can help. On slack use the #git-support channel to ask questions about git

Why should i even do this homework?

Promises creates a pleasant way of working with asynchronous code. It will make your asynchronous code nearly look synchronous. It is possible to compose promises further developing the function part of javascript.

Since promises is becoming standard in javascript, new browser api's use promises for interacting with them. getUserMedia for accessing webcam, Navigator.getBattery() for getting battery level, Bluetooth.requestDevice(), serviceWorker or USB.requestDevice()

If you struggle to do this weeks homework there are a couple of things to do:

Movies exercise

This exercise is repetition of array functions. you dont have to use chaining or anything fancy. Just fetch the movies and use the correct array function to get the following movies:

Fetch movies from this api:

  1. Create an array of bad movies
  2. Creat an array of bad movies since year 2000

Promise that resolves after set time

Create a function that has one parameter: resolveAfter. Calling this function will return a promise that resolves after the resolveAfter seconds has passed.

Here is an example of how to use the promise

makeUpYourOwnFunctionName(8)
    .then(() => {
        console.log('I am called asynchronously'); // logged out after 8 seconds
    })

When you have written the promise, use it with async/await

Rewrite time

Rewrite setTimeout and navigator.geolocation.getCurrentPosition to promises. The getCurrentPosition function is probably going to throw an error, but that is fine. As long as you can use it as a promise.

Example of usage

setTimeoutPromise(3000)
    .then(() => {
        console.log('Called after 3 seconds');
    });

getCurrentLocation()
    .then((position) => {
        // called when the users position is found
        console.log(position);
    })
    .catch((error) => {
        // called if there was an error getting the users location
        console.log(error);
    });

Fetching and waiting

  1. Do the 3 steps below using promises and .then.
  2. Do the 3 steps below using async/await

The 3 steps:

  1. Wait 3 seconds
  2. After 3 seconds fetch some data from any api you like
  3. Log out the data from the api

Which way do you prefer, the promise way or the async/await way?

Visual promise

This task is about visually understanding the difference between Promise.all and calling a promise one at a time.

If you go into the promise-visual homework folder there is some html, css and some js. If you clone down the javascript repo, then you can simply copy the files into your hyf-homework js3 week 2 folder. Dont modify move-element.js, only work in main.js!

There is a function available to you called moveElement. calling that function moves an element to a new position and returns a promise. moveElement takes a DOM element and an object specifying the x and y of the new position. It then returns a promise that resolves after the DOM element has been moved.

// This code will move the li to the position 100, 100. Calling moveElement will return a promise that resolves after the li element has been moved. 
moveElement(document.querySelector('li'), {x: 100, y: 100})
    .then(() => {
        console.log('Element has been moved');
    });

Your task is to create two functions.

  • translateOneByOne - Should translate the circles one at a time from their random start position to their target see the target positions below. Log something out after each element has been moved
  • translateAllAtOnce - Should translate all the circles at the same time from their random start position to their target. Log out something after all elements have been moved

Test that the functions works as intended before submitting homework. You decide if you want to do it the promise way or the async/await way

Target positions:

Red circle target: x: 20px, y: 300px;
Blue circle target: x: 400px, y: 300px;
Green circle target: x: 400px, y: 20px;

One by one

One by one

All at one

All at one

Hand in Homework:

Watch this video for a more detailed go-through of how to hand in homework!

  • Use the branch called javascript/javascript3/week2
  • Add all your changes to this branch in the javascript/javascript3/week2 folder.
  • Go through the Homework checklist
  • Create a pull request using the javascript/javascript3/week2 branch
  • Wait for mentor feedback
  • Implement feedback, add, commit and push the changes
  • Now you can merge the changes into master
  • When merged you can share the github link to your classes slack channel if you are proud of what you did 💪
  • Now celebrate 🎉🎉🎉

Homework checklist

Go over your homework one last time:

  • Does every file run without errors and with the correct results?
  • Have you used const and let and avoided var?
  • Do the variable, function and argument names you created follow the Naming Conventions?
  • Is your code well-formatted (see Code Formatting)?

Feedback giving time!

Find a student to give feedback using this site: https://hyf-peer-review.herokuapp.com/. The feedback should be given after the homework has been handed in, preferably two days after.

Give the review on the PR exactly how the mentors do it! To find the link for the PR ask the person you are reviewing :) You can see how to give feedback on a PR using github here

To help you get started with reviewing we have created some ressources about giving feedback. Find them

Why is it important to give feedback? Because it will make you a better developer