+
+---
+
+### `JS2 week2` - Array functions, Arrow function
+
+Start with creating an array of picture objects. Even a small one is perfectly enough, but go as big as you want! A picture object should ideally have at least an id, a name and a picture url.
+Continue with the format of the picture object you used last week or improve it and refactor!
+
+- [ ] generate a new array where each card object is added to it twice, but in a random order. Think about _doubling_ and _shuffling_ an array when you research how to complete this task.
+- [ ] traverse through the new array of picture objects and display all the cards in a grid.
+- [ ] include the functionality from the previous week so that each card will flip from the picture to the backside pattern and back when it is clicked.
+
+
+
+---
+
+### `JS2 week3` - Callback function, Asynchronicity, Scope
+
+- [ ] implement a counter for how many times in total you have flipped a card (one counter for all the cards). Note that you are not supposed to count clicks! The purpose is to count how many times you have _revealed_ the card picture - in other words, you are couunting player moves.
+- [ ] implement a timer for how much time has passed since you first clicked on a card.
+- [ ] adjust the functionality so that once 2 cards are flipped, they stay flipped for X seconds, after which they flip back down automatically.
+
+---
+
+### `JS3 week1` - Json, Apis, Fetch
+
+- [ ] follow the [API creation guide](/homework-projects/guides/making-your-API-guide.md) to make your own API that you will use from now on.
+- [ ] refactor your code so that you ditch the static array of objects and instead fetch the cards data from your API.
+- [ ] ensure all the functionality is working smoothly after refactoring.
+
+---
+
+### `JS3 week2` - Promises, Async/Await
+
+- [ ] you used promise chaining last week - now rewrite the fetch in the "async await" approach.
+- [ ] implement the functionality for it to work like and actual memory game:
+
+At least:
+
+- You can only flip 2 cards at a time.
+- If the cards match, they are removed from the DOM.
+- The game reloads once all cards are removed.
+
+At most:
+
+- Implement the tasks listed under "At least".
+- Use the counter and timer that you implemented before and stop the game when a certain count or time is reached. The time or count can be hardcoded or user-submitted via an input.
+
+---
+
+### `JS3 week3` - Classes, Revision and Presentation of projects
+
+- [ ] rest, revise JS fundamentals, finish, and brush up your project, prepare to present and explain it.
+- [ ] make improvements to the style or functionality or add additional functionality.
+- [ ] Prepare to showcase your project to external people, talk through your code and explain what you have implemented.
+
+
+
+---
+
+### `JS2 week2` - Array functions, Arrow function
+
+Start with creating an array of movie objects. Even a small one is perfectly enough, but go as big as you want!
+Continue with the format of the movie object you used last week or improve it and refactor!
+
+- [ ] traverse the movie array and display all the movies on the page in a grid via DOM manipulation.
+- [ ] manipulate the movie array, implementing these functions:
+- a function for searching for a provided keyword in the movie title;
+- a function for sorting the movie array by one or a few selected properties.
+- [ ] optional: as you might guess, you will later use these functions to implement searching and sorting functionality, so feel free to add any other array-manipulation functions of your choice!
+
+---
+
+### `JS2 week3` - Callback function, Asynchronicity, Scope
+
+Here you will develop some features that will differentiate your movie platform from the competition!
+
+- [ ] implement a timer where you can set a time for how much time you give yourself to pick a movie to watch, the timer alerts or rings when then time is over.
+- [ ] implement a timer to show how long you have spent on the page.
+
+---
+
+### `JS3 week1` - Json, Apis, Fetch
+
+- [ ] follow the [API creation guide](/homework-projects/guides/making-your-API-guide.md) to make your own API that you will use from now on.
+- [ ] refactor your code so that you ditch the static array of objects and instead fetch the movies data from your API.
+- [ ] ensure all the functionality is working smoothly after refactoring.
+
+---
+
+### `JS3 week2` - Promises, Async/Await
+
+- [ ] you used promise chaining last week - now rewrite the fetch in the "async await" approach
+- [ ] fit and apply one (or all) of your functions from JS2 week2 to manipulate the displayed movies:
+
+- a function to search a movie by title that a user submits via an input, displaying only the matching movies.
+- a function to sort the movies by a property selected via a dropdown.
+- a function to filter the movies by a specific constraint submitted by the user via an input (or hardcoded), only displaying the relevant movies.
+
+---
+
+### `JS3 week3` - Classes, Promises advanced
+
+- [ ] rest, revise JS fundamentals, finish, and brush up your project, prepare to present and explain it.
+- [ ] make improvements to the style or functionality or add additional functionality.
+
+---
+
+
-
- HyfBay
-- Buy the okay'est products
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Your shopping cart
-
-
- Total price:
-
-
-**All at one**
-
-
-
-## 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 latest two days after.
-
-To help you get started we have created some ressources about giving feedback. Find them here: https://github.com/HackYourFuture-CPH/curriculum/tree/master/review
-
-## Hand in Homework:
-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](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/naming_conventions.md)?
-- Is your code well-formatted (see [Code Formatting](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/naming_conventions.md))?
-
-
-
-If you can answer yes to the above questions then you are ready to hand if the homework:
-
-- Use the `hyf-homework` repo and add your homework files in the `javascript/javascript3/week2` folder
-- Make your commits for the homework. Remember to seperate the code into meaningful commits!
-- Push the changes to github
-- To finish the homework post the link for your repo and the rendered index.html on your classes slack channel
-
----
-
-🎉
diff --git a/javascript3/week2/lesson-plan.md b/javascript3/week2/lesson-plan.md
index 8403481a..ffda3027 100644
--- a/javascript3/week2/lesson-plan.md
+++ b/javascript3/week2/lesson-plan.md
@@ -1,4 +1,11 @@
# Lesson plan
+
+## Lesson materials
+These are some examples of previously created materials by mentors that you can use yourself, or for inspiration.
+- [Notion Page Handout](https://dandy-birth-1b2.notion.site/HYF-Aarhus-JS-3-Week-2-0287dd1293df4a0a92171e62ce12f5c8?pvs=4) (by [Thomas](https://github.com/te-online))
+
+---
+
```
> Focus on having lots of in class exercises.
@@ -17,214 +24,276 @@ If you find anything that could be improved then please create a pull request! W
---
-Promises is notoriously difficult to teach! I teach **consumption and creation of promises totally separate!** And show them that its just like with functions. There is a creation part and a comsumption part.
+Promises is notoriously difficult to teach! I teach **consumption and creation of promises totally separate!** And show them that its just like with functions. There is a creation part and a comsumption part.
First when they fully understand one part of promises, i move on! Don't overcomplicate things. Only mention the resolve function to begin with. When they get that, say that there also is a reject function. **Take as many babysteps as is possible!** Dont mention that resolve and reject can take an argument to begin with, first later explain that.
-This class is a little poor on real world examples. Make a PR if you ahve any good ideas!
+This class is a little poor on real world examples. Make a PR if you have any good ideas!
+- Async/await - simple introduction focused on usage
+ - Quickly recap asynchronicity
+ - Ask the students what it means that some code is asynchronous
+ - Practical example of async/await
+ - [Exercises 1](#exercise-1)
- Promise
- Why do we use promises?
- - So important, the students always ask this!
+ - So important to explain this, the students always ask this!
- https://stackoverflow.com/questions/39004567/why-do-we-need-promise-in-js
- - Creation
- - [Code inspiration](#promise-creation)
- Consumption
- - [Code inspiration](#promise-comsumption)
+ - [Code inspiration](#promise-comsumption)
- Example, call some function that returns a promise (like fetch)
- - [Exercises 1](#exercise-1) and [Exercises 2](#exercise-2)
- - Creating a function that returns a promise
- - [Code inspiration](#function-that-returns-a-promise)
- - At my previous work we called a function `swipeCard` that sent two promises with Promise.all. One that waited for the swipe animation to finish and one that fetched data for the next card. When both of these promises were resolved we could animate in the next card.
- - [Exercises 3](#exercise-3)
- - Chaining. Calling `.then` returns a promise
- - [Code inspiration](#reason-for-promise)
- - Reason for promise: https://mobile.twitter.com/addyosmani/status/1097035418657144832?s=19
+ - [Exercises 2](#exercise-2)
+ - Creation
+ - [Code inspiration](#promise-creation)
+ - [Exercises 3](#exercise-3) and then [Exercises 4](#exercise-4)
+ - Async await
+ - [Exercises 5](#exercise-5)
- `Promise.all` - Let students investigate
- - `Promise.race`
- - [Exercises 4](#exercise-4) and [Exercises 5](#exercise-5)
+ - Optional - Chaining. Calling `.then` returns a promise. Only get to here when they understand async/await and promise consumption and creation.
+ - [Code inspiration](#reason-for-promise)
+ - Reason for promise: https://mobile.twitter.com/addyosmani/status/1097035418657144832?s=19
+ - [Exercises 5](#exercise-5) and [Exercises 6](#exercise-6)
-At this point good coding practices is starting to get very important! Check our [coding best practices](https://github.com/HackYourFuture-CPH/curriculum/blob/master/review/review-checklist.md#javascript) and use these both when live coding but also in reviews.
+At this point good coding practices is starting to get very important! Check our [coding best practices](https://github.com/HackYourFuture-CPH/curriculum/blob/main/review/review-checklist.md#javascript) and use these both when live coding but also in reviews.
+
+## Flipped classroom videos
+
+[Flipped classroom videos](https://github.com/HackYourFuture-CPH/JavaScript/blob/main/javascript3/week2/preparation.md#flipped-classroom-videos)
## Code inspiration
-### Promise creation
+### Async/await - simple usage
```js
-// Warm up exercise. Guess the type, improve the students variable naming skills
+// Warm up exercise. The students has to say everything they can about a variable, ONLY from the variable name. Fx the type, what it returns, what object we could expect etc.
// cars, car, title, getTitle, addTitle, isTitle, hasTitle, hasItem, users, year, yearIndex, user, review.
+```
-// function creation
-function test() {
-
+```js
+// DONT EXPLAIN WHAT ASYNC OR AWAIT DOES YET! Explain on a higher level:
+// You have to write async before a function for await to work. No details for now
+// await waits until we have fetched the data from the api. Or said in another way await waits until fetch has resolved with the data from the api
+
+// write async before a function for await to work. What does it mean that something is asynchronous?
+async function getAstronauts() {
+ // await waits until we have data from fetch before it runs the next line. No need for callbacks 🤯
+ console.log("Before we fetch data");
+ const astronautsResponse = await fetch(
+ "http://api.open-notify.org/astros.json"
+ );
+ console.log(
+ "This is logged out after some time, even though the code looks synchronous! 🤯"
+ );
+ const astronauts = await astronautsResponse.json();
+ console.log("This is logged out after some time! 🤯");
+ console.log(astronauts);
+ return astronauts;
}
+getAstronauts();
+```
-// function usage
-console.log(test());
-
-// Start as simple as possible:
-const oneSecondTimeoutPromise = new Promise(resolve => {
- setTimeout(() => {
- resolve();
- }, 1000);
-});
-
+### Promise comsumption
-// Promise creation
-const oneSecondTimeoutPromise = new Promise((resolve) => {
- console.log(typeof resolve);
- setTimeout(() => {
- const resolveObject = {
- name: 'benjamin'
- };
- resolve(resolveObject);
- }, 1000);
-});
+So how did the async/await example above actually work? Lets get into promises!
-// HAMMER in this point:
-// When you create a new promise you give it a function that has two functions as parameters (resolve and reject). Resolve is called when everything in a promise goes well. Reject is called when something goes wrong.
-```
+If you have a promise, you can call two functions on that promise. '.then' and '.catch'. When are these functions called? What does it mean that a promise is resolved or rejected?
-### Promise comsumption
+The students should be able to answer these questions:
+// Question 1: What does it mean that a promise is resolved? Which method on a promise get called?
+// Question 2: What does it mean that a promise is rejected? Which method on a promise get called?
+// How would you explain your mom what resolved and rejected means?
```js
-
-// Promise usage
-oneSecondTimeoutPromise
- .then((benjaminString) => {
- console.log('one second timeout done');
- console.log(oneSecondTimeoutPromise);
- console.log(benjaminString);
- });
-
-/*
-fetch('asduasd')
- .then((response) => response.json())
- .then((data) => {
- });
- */
-
-// HAMMER in this point:
-// When you have a promise you can call two functions on that promise (.then and .catch). .then is called when the promise is resolved .catch is called when the promise is rejected.
+fetch("http://api.open-notify.org/astros.json")
+ .then((astronautsResponse) => astronautsResponse.json())
+ .then((astronauts) => {
+ console.log(astronauts);
+ })
+ .catch((error) => console.log(error));
+
+// https://codesandbox.io/s/scrollto-promise-example-0gjp6
+// If not working try chrome
+scrollTo("section.features")
+ .then(() => console.log("scrolling done"))
+ .catch((error) => console.log(error));
+
+// HAMMER in this point:
+// When you have a promise you can call two functions on that promise (.then and .catch). '.then' is called when the promise is resolved. '.catch' is called when the promise is rejected.
```
-### Reason for promise
+### Promise creation - A recepy for creating your own promise
+
+When you create a new promise you give it a function that has two functions as parameters (resolve and reject). Resolve is called when everything in a promise goes well. Reject is called when something goes wrong.
```js
-// Reason for promises, callback hell
+// Start as simple as possible, no reject, just resolve!
+const oneSecondTimeoutPromise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve();
+ }, 1000);
+});
-setTimeout(() => {
- console.log(2);
- setTimeout(() => {
- console.log(2);
- setTimeout(() => {
- console.log(3);
-
- }, 7000);
- }, 3440);
-}, 2000);
-
-// Practical example or difference between callback hell and .then chaining
-// Here is the callback method all methods take a callback function as second parameter
-getUser(userId, user => {
- getPost(user, post => {
- getComment(post, comment => {
- renderComment(comment);
- });
- });
+// You can pass data in the resolve
+const oneSecondTimeoutPromise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve("1 second has passed");
+ }, 1000);
+});
+
+oneSecondTimeoutPromise.then((timeoutData) => {
+ console.log(timeoutData); // '1 second has passed'
});
-// Here is the promise version. All methods return a promise (we then can call .then on)
-getUser(userId)
- .then(user => getPost(user))
- .then(post => getComment(post))
- .then(comment => renderComment(comment))
+const orderPizzaPromise = new Promise((resolve, reject) => {
+ const pizzaMakingTime = 10000;
+ const didPizzaBakingSucceed = true;
+ const pizza = "Macaroni pizza";
+ setTimeout(() => {
+ if (didPizzaBakingSucceed) {
+ resolve(pizza);
+ } else {
+ reject("The pizza was a mess");
+ }
+ }, pizzaMakingTime);
});
+orderPizzaPromise
+ .then((pizza) => {
+ console.log(`Lets eat the ${pizza}`);
+ })
+ .catch((error) => {
+ console.log(`Lets eat the nothing`);
+ });
+
+// HAMMER in this point:
+// When you create a new promise you give it a function that has two functions as parameters (resolve and reject). Resolve is called when everything in a promise goes well. Reject is called when something goes wrong.
+
+// Compare function creation and consumption to promise creation and consumption
+// function creation
+function test() {}
+
+// function usage
+console.log(test());
+```
+
+### Back to async/await
+
+So writing `async` in front of a function makes it return a promise! The keyword `await` makes JavaScript wait until that promise resolved and returns its result.
+
+```js
+async function getAstronauts() {
+ try {
+ const astronautsResponse = await fetch(
+ "http://api.open-notify.org/astros.json"
+ );
+ const astronauts = await astronautsResponse.json();
+ return astronauts;
+ } catch (err) {
+ throw "Fetchin the astronauts went wrong";
+ }
+}
+
+const astronauts = getAstronauts();
```
### Function that returns a promise
+
```js
// This example could definitely be more real world! Any ideas, make a pull request!
const promise = new Promise((resolve) => {
- setTimeout(() => {
- const tea = {
- color: 'green',
- taste: 'Bitter',
- };
-
- resolve(tea);
- }, 3000);
+ setTimeout(() => {
+ const tea = {
+ color: "green",
+ taste: "Bitter",
+ };
+
+ resolve(tea);
+ }, 3000);
});
const isThereMoreTea = false;
// This example could definitely be more real world! Any ideas, make a pull request!
function makeTea() {
- console.log('Start making tea');
-
- return new Promise((resolve, reject) => {
- setTimeout(() => {
- const tea = {
- color: 'green',
- taste: 'Bitter',
- };
-
- if (isThereMoreTea) {
- resolve(tea);
- } else {
- reject('We dont have more TEA!!');
- }
- }, 3000);
- });
+ console.log("Start making tea");
+
+ return new Promise((resolve, reject) => {
+ setTimeout(() => {
+ const tea = {
+ color: "green",
+ taste: "Bitter",
+ };
+
+ if (isThereMoreTea) {
+ resolve(tea);
+ } else {
+ reject("We dont have more TEA!!");
+ }
+ }, 3000);
+ });
}
console.log(makeTea());
makeTea()
- .then((returnedTeaObject) => {
- console.log(returnedTeaObject);
- })
- .catch((error) => {
- console.log(error);
- })
-
-
+ .then((returnedTeaObject) => {
+ console.log(returnedTeaObject);
+ })
+ .catch((error) => {
+ console.log(error);
+ });
```
## Exercises
## Exercise 1
-Lets use some promises:
+
+Using async await
1. `fetch` yes or no from this api: `https://yesno.wtf/api`. log out the answer
-2. Get your battery level and if it is charging or not using `navigator.getBattery()` - use chrome browser
## Exercise 2
-1. Create a promise that resolves after 4 seconds. Use this promise to log out the text 'hello' after 4 seconds
-2. Create a promise that resolves with a string (you decide what the string should say) after 2 seconds.
-3. Use the promise: When the promise is resolved console.log that string
-4. Now make the promise fail by rejecting it with an error message instead of resolving it, and log the error message to the console
+
+Using promises
+
+1. `fetch` yes or no from this api: `https://yesno.wtf/api`. log out the answer
+2. Try fetching a url that rejects fx `https://knajskdskj.jasdk`. Log out the error message
## Exercise 3
-This exercise could also be a lot more real world. If you have any ideas, please make a PR!
-Create a new function that returns a promise. This function should have one parameter: `successMessage`.
-The promise should resolve after 1 second. When you resolve the promise, it should be resolved with the `successMessage` parameter.
+1. Create a promise that resolves after 4 seconds. Use this promise to log out the text 'hello' after 4 seconds.
+2. Now make the promise fail by rejecting it with an error message instead of resolving it, and log the error message to the console.
-Call the function with an argument, assign the return of the function to a variable (what type will that have?). Use the variable to log out the `successMessage`.
+## Exercise 4
-Now add the possibility for the promise to also reject. Give the function a new parameter: `errorMessage`. When the promise is rejected it should be rejected with the `errorMessage` parameter.
-Now reject the promise after 1 second instead of resolving it.
+Create a function that returns a promise, that you can use like this:
-give the function a third parameter: `shouldReject`. If `shouldReject` is true the promise being returned from the function should reject (with the `errorMessage` parameter) the promise. Otherwise the promise should resolve (with the `successMessage` parameter)
+```js
+// YesNoFail4Seconds should wait 4 seconds before it does one of the following 3 things:
+// resolves with a yes
+// resolves with a no
+// or rejects
+// Look into Math.random()
+YesNoFail4Seconds()
+ .then((data) => {
+ console.log(`The answer is ${data}`);
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+```
-## Exercise 4
-1. Get battery level
-1. After the battery level has been gotten, fetch the movies
-1. Log out the movies from [this api](https://gist.githubusercontent.com/pankaj28843/08f397fcea7c760a99206bcb0ae8d0a4/raw/02d8bc9ec9a73e463b13c44df77a87255def5ab9/movies.json)
-1. Use chaining
+The above example show how to consume the promise using promises. Now try consume the `YesNoFail4Seconds` using async/await
+
+## Exercise 5
+
+Using async await
+
+1. Fetch the astronauts
+2. After the astronauts has been fetched, fetch movies using [this api](https://gist.githubusercontent.com/pankaj28843/08f397fcea7c760a99206bcb0ae8d0a4/raw/02d8bc9ec9a73e463b13c44df77a87255def5ab9/movies.json)
+3. Log out the movies
+
+# Exercise 6
-# Exercise 5
-Get battery level and the movies at the same time. Log out the movies and the battery status when both promises has been resolved.
+Get the astronauts and the movies at the same time. Log out the movies and the battery status when both promises has been resolved.
diff --git a/javascript3/week2/optional-homework.md b/javascript3/week2/optional-homework.md
new file mode 100644
index 00000000..52da73d8
--- /dev/null
+++ b/javascript3/week2/optional-homework.md
@@ -0,0 +1,26 @@
+> [!WARNING]
+> These are optional homework exercises that you can complete on top of your [homework project](/homework-projects/readme.md), if you wish. There is no requirement for these to be reviewed, but feel free to ask a mentor if you wish for some feedback.
+
+# Optional Homework
+
+## 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:
+
+- Try watch these two videos: https://www.youtube.com/watch?v=XO77Fib9tSI, https://www.youtube.com/watch?v=QO4NXhWo_NM
+- Watch the class recording. If it for some reason is missing. Then watch these: [part 1](https://www.youtube.com/watch?v=SDr1FCqqjAs), [part 2](https://www.youtube.com/watch?v=V82nhqIYWP0), [part 3](https://www.youtube.com/watch?v=iQgYX5tB7gs) [part 4](https://www.youtube.com/watch?v=RYdLBdHZMCU) [part 5](https://www.youtube.com/watch?v=A41NxevmHwI)
+- Read up on [promises](https://javascript.info/promise-basics), [async await](https://javascript.info/async-await)
+
+### Currency calculator
+The homework for this week is to build a currency calculator using this API: https://open.er-api.com/v6/latest/USD
+
+## Technical specifications
+1. Make a request to the API and store the Exchange rates as well as a list of currencies for the dropdowns.
+2. User can enter an amount
+3. User can choose a currency to convert from(default should be EUR)
+4. User can choose a currency to convert to(Default should be DKK)
+5. Whenever amount, currency from or currency to changes we show what the amount translates to in the to currency
diff --git a/javascript3/week2/homework/promise-visual/index.html b/javascript3/week2/optional-homework/promise-visual/index.html
similarity index 100%
rename from javascript3/week2/homework/promise-visual/index.html
rename to javascript3/week2/optional-homework/promise-visual/index.html
diff --git a/javascript3/week2/homework/promise-visual/main.css b/javascript3/week2/optional-homework/promise-visual/main.css
similarity index 100%
rename from javascript3/week2/homework/promise-visual/main.css
rename to javascript3/week2/optional-homework/promise-visual/main.css
diff --git a/javascript3/week2/homework/promise-visual/main.js b/javascript3/week2/optional-homework/promise-visual/main.js
similarity index 100%
rename from javascript3/week2/homework/promise-visual/main.js
rename to javascript3/week2/optional-homework/promise-visual/main.js
diff --git a/javascript3/week2/homework/promise-visual/move-element.js b/javascript3/week2/optional-homework/promise-visual/move-element.js
similarity index 95%
rename from javascript3/week2/homework/promise-visual/move-element.js
rename to javascript3/week2/optional-homework/promise-visual/move-element.js
index da9a9e63..db46d85f 100644
--- a/javascript3/week2/homework/promise-visual/move-element.js
+++ b/javascript3/week2/optional-homework/promise-visual/move-element.js
@@ -50,7 +50,7 @@
/**
* @param {DOMelement} boxToMove - A DOM element of the box to move
- * @param {Position} newPosition - An object specifying the new position of the box. x, y
+ * @param {Position} newPosition - An object specifying how much to move the box in the x and y directions.
* @return {Promise