` to which you will need to dynamically append HTML elements through your JavaScript code in `index.js`.
-
-2. Open `index.js`. This file contains a starter set of code for you to expand. It contains the following three functions:
-
- | Function | Description |
- | ----------------- | ------------------------------------------------------------------------------------------------------------ |
- | `fetchJSON` | Uses `XMLHttpRequest` to fetch JSON data from an API end point. This function uses an asynchronous callback. |
- | `createAndAppend` | A utility function for easily creating and appending HTML elements. |
- | `main` | Contains the start-up code for the application. |
-
- `index.js` also contains a variable with the URL required for fetching information about the HYF repositories:
-
- ```js
- const HYF_REPOS_URL =
- 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
- ```
-
-3. Open the `index.html` file in your browser. You will see an unordered list with the names of the HYF repositories.
-
-4. Review the `main()` function in `index.js` and examine how this code fetches the JSON data and calls renders the data as unordered list in the web page.
-
-5. Take a look at the API URL:
-
-```
-https://api.github.com/orgs/HackYourFuture/repos?per_page=100
+2. It displays those repositories in an alphabetically-ordered list. When a user clicks on any of the repository names it will show more details about it.
+
+In the course of the next 3 weeks you'll be writing the necessary code to make all of this work!
+
+### 4.1 Requirements
+
+To get started, make sure you're in the right GIT branch: `week1-[YOURNAME]`. Then, navigate to the `hackyourrepo-app` folder and become familiar with the files there.
+
+This week you're required to (1) setup the HTML structure of the application. In addition, you are expected to (2) style the application to make it user-friendly.
+
+Here are the requirements for the HTML:
+
+- Include 3 `
` tags
+- Include a `` tag
+- Use the following placeholder data:
+
+```js
+const placeholderRepos = [
+ {
+ name: 'SampleRepo1',
+ description: 'This repository is meant to be a sample',
+ forks: 5,
+ updated: '2020-05-27 12:00:00',
+ },
+ {
+ name: 'AndAnotherOne',
+ description: 'Another sample repo! Can you believe it?',
+ forks: 9,
+ updated: '2020-05-27 12:00:00',
+ },
+ {
+ name: 'HYF-Is-The-Best',
+ description:
+ "This repository contains all things HackYourFuture. That's because HYF is amazing!!!!",
+ forks: 130,
+ updated: '2020-05-27 12:00:00',
+ },
+];
```
-This URL is special, as it gives us data in JSON format (Try it out in your browser!). This type of URL is also known as an `endpoint`, an address that we can use to send a request to in order to get data. Learn more about endpoints [here](https://smartbear.com/learn/performance-monitoring/api-endpoints/).
-
-Note the query string `?per_page=100` in the above URL. If you don't specify this `query string` you will only get the first 30 repositories (the default `per_page` is 30, which we know because it says so in the [API documentation](https://developer.github.com/v3/#pagination)).
-
-### Week 1 Assignment
-
-The assignment for this week is to produce a functional application that looks similar to Figure 1:
-
-
-
-Functionally, the application should do the following:
-
-1. Make an API call to the endpoint: https://api.github.com/orgs/HackYourFuture/repos?per_page=100
-2. Display the first 10 items in the HTML file (write JavaScript to add element to the DOM)
-3. Show feedback when an error has happened
-
-Modify the following files:
-
-**1. `index.js`**
-
-- Add new functions and modify function `main()` as you see fit.
-- Render network errors to the DOM (see Figure 2 below for an example). Do not use `console.log` as regular users will not see the console output. Instead, create an element that displays the error message in the DOM. Use the predefined `alert-error` class from `style.css` to style your error. It should look like this:
-
-
-
-Figure 2. Rendering of network errors.
-
-**2. `style.css`**
-
-- Add your own CSS styling. Use `style.css` for all of your CSS rules to style the `index.html`. Make sure your UI is responsive. Try it with Chrome Developer Tools in the browser, using a mobile phone format and a tablet format, portrait and landscape.
-
- **You are not allowed to use a CSS library such as Bootstrap.**
-
-**Hints:**
-
-- To sort the list repositories use [`.sort()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) and [`.localeCompare()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare).
-
-- Use CSS media queries, percentage values and [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) to make the UI responsive.
+Here are the requirements for the CSS:
-- To force a `404` network error so that you can test the rendering of errors, change the URL to make an invalid GitHub request, e.g. append an `x` to `orgs`: `orgsx`.
+- Make use of `flexbox`
+- Make use of `media-queries` and `calc()` to make the page responsive ([mobile, tablet, desktop](https://tinyurl.com/yc5zmste))
-Good luck!
+Other than this you can create your own version of the page!
## **SUBMIT YOUR HOMEWORK!**
@@ -177,7 +127,7 @@ After you've finished your todo list it's time to show us what you got! The home
1. JavaScript exercises
2. PROJECT: HackYourRepo I
-Upload both to your forked JavaScript3 repository in GitHub. Make a pull request to your teacher's forked repository.
+Upload both to your forked JavaScript3 repository in GitHub. Make a pull request to the HackYourHomework forked repository.
> Forgotten how to upload your homework? Go through the [guide](../hand-in-homework-guide.md) to learn how to do this again.
diff --git a/Week1/README.md b/Week1/README.md
index b6b640443..2b9536d3b 100644
--- a/Week1/README.md
+++ b/Week1/README.md
@@ -9,6 +9,7 @@ These are the topics for week 1:
- Connecting with APIs
2. Asynchronous JavaScript and XML (AJAX)
- JavaScript Object Notation (JSON)?
+ - Stringifying and parsing JSON
- XMLHttpRequest (XHR)
3. Modules & Libraries
- What's a module?
@@ -16,22 +17,35 @@ These are the topics for week 1:
- An example of a library
- How to use a library
+## 0. Video Lectures
+
+Your teacher Stasel has made video lectures for this week's material. You can find them here: [Videos 1 - 5](https://www.youtube.com/playlist?list=PLVYDhqbgYpYVchJ9QQ3rC2WxYKrOiceYX)
+
+/JavaScript3`)
3. Clone the repository, using SSH, to your local machine. You can do this by typing in `git clone ` in the command line
4. On your local machine, navigate to the folder using the command line
-5. Make sure you've cloned it correctly by running `git status` from the command line.
+5. Make sure you've cloned it correctly by running `git status` and `git remote -v` from the command line
EVERY WEEK
1. Create a new branch for each week you have homework. For example, for the week 1 homework for JavaScript3 create a branch called `week-1-homework-YOUR_NAME`
-2. Inside the correct week folder, create another folder called `homework`. Make your homework files in there, while on the correct branch
-3. Once you're finished, add and commit everything. Make the commit message meaningful, for example `finished project for homework week1`
-4. Push the branch to your forked repository
-5. On the GitHub page of your forked repository, click on the `create pull request` button. Make sure the `base repository` is the original, on branch master
+2. Inside the week folder, create another folder called `homework`. Create your homework files in there, while on the correct branch
+3. Once you're finished, `add` and `commit` everything. Make the commit message meaningful, for example `finished project for homework week1`
+4. Push the branch to your forked repository (`/JavaScript3`)
+5. On the GitHub page of this repository, click on the `create pull request` button. Make sure the `base repository` is `HackYourHomework/JavaScript3`, on branch master
6. Give the pull request a title in the following format:
```markdown
Homework week 1
```
-7. Submit the pull request from your forked repository branch into the `master` branch of the original repository
+7. Submit the pull request from your forked repository branch into the `master` branch of the original repository (`HackYourHomework/JavaScript3`)
8. Do a little victory dance because you did it! Good job!
-For a visual walkthrough the steps please watch the following video one of our teachers, Unmesh Joshi, has made:
-
-- [GitHub Homework flow](https://www.youtube.com/watch?v=2qJPAVTiKPE)
-
If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack!
diff --git a/homework-classes/App.js b/homework-classes/App.js
deleted file mode 100755
index 8788f8b85..000000000
--- a/homework-classes/App.js
+++ /dev/null
@@ -1,56 +0,0 @@
-'use strict';
-
-{
- const accounts = {
- hyf: {
- name: 'HackYourFuture',
- type: 'org',
- },
- microsoft: {
- name: 'Microsoft',
- type: 'org',
- },
- jim: {
- name: 'remarcmij',
- type: 'user',
- },
- };
-
- const { Model, HeaderView, RepoView, ContributorsView, ErrorView } = window;
- const { createAndAppend } = window.Util;
-
- class App {
- constructor(account) {
- const containers = App.renderContainers();
-
- const model = new Model(account);
- const fetchData = model.fetchData.bind(model);
-
- model.subscribe(new HeaderView(account, containers.header, fetchData));
- model.subscribe(new RepoView(containers.repo));
- model.subscribe(new ContributorsView(containers.contributors));
- model.subscribe(new ErrorView(containers.error));
-
- fetchData();
- }
-
- static renderContainers() {
- const root = document.getElementById('root');
- const header = createAndAppend('header', root, { class: 'header' });
- const error = createAndAppend('div', root);
- const main = createAndAppend('main', root, {
- class: 'main-container',
- });
- const repo = createAndAppend('section', main, {
- class: 'repo-container whiteframe',
- });
- const contributors = createAndAppend('section', main, {
- class: 'contributors-container whiteframe',
- });
- return { header, error, main, repo, contributors };
- }
- }
-
- const ACCOUNT_KEY = 'hyf';
- window.onload = () => new App(accounts[ACCOUNT_KEY]);
-}
diff --git a/homework-classes/ContributorsView.js b/homework-classes/ContributorsView.js
deleted file mode 100755
index 58cb2b984..000000000
--- a/homework-classes/ContributorsView.js
+++ /dev/null
@@ -1,28 +0,0 @@
-'use strict';
-
-{
- const { createAndAppend } = window.Util;
-
- class ContributorsView {
- constructor(container) {
- this.container = container;
- }
-
- update(state) {
- if (!state.error) {
- this.render(state.contributors);
- }
- }
-
- /**
- * Renders the list of contributors
- * @param {Object[]} contributors An array of contributor objects
- */
- render(contributors) {
- // TODO: replace this comment and the console.log with your own code
- console.log('ContributorsView', contributors);
- }
- }
-
- window.ContributorsView = ContributorsView;
-}
diff --git a/homework-classes/ErrorView.js b/homework-classes/ErrorView.js
deleted file mode 100755
index 67ad53087..000000000
--- a/homework-classes/ErrorView.js
+++ /dev/null
@@ -1,31 +0,0 @@
-'use strict';
-
-{
- const { createAndAppend } = window.Util;
-
- class ErrorView {
- constructor(container) {
- this.container = container;
- }
-
- update(state) {
- this.render(state.error);
- }
-
- /**
- * Renders an error for the 'error' message type.
- * @param {Error} error An Error object
- */
- render(error) {
- this.container.innerHTML = '';
- if (error) {
- createAndAppend('div', this.container, {
- text: error.message,
- class: 'alert alert-error',
- });
- }
- }
- }
-
- window.ErrorView = ErrorView;
-}
diff --git a/homework-classes/HeaderView.js b/homework-classes/HeaderView.js
deleted file mode 100755
index 11f9c8971..000000000
--- a/homework-classes/HeaderView.js
+++ /dev/null
@@ -1,46 +0,0 @@
-'use strict';
-
-{
- const { createAndAppend } = window.Util;
-
- class HeaderView {
- constructor(account, header, fetchData) {
- this.account = account;
- this.header = header;
- this.fetchData = fetchData;
- this.select = null;
- }
-
- update(state) {
- if (!this.select && !state.error) {
- this.render(state.repos);
- }
- }
-
- /**
- * Renders the data for the 'select' message type. Create a element
- * and its children.
- * @param {Object[]} repos An array of repository objects.
- */
- render(repos) {
- createAndAppend('div', this.header, { text: this.account.name });
- this.select = createAndAppend('select', this.header, {
- class: 'repo-select',
- autofocus: 'autofocus',
- });
-
- repos.forEach(repo =>
- createAndAppend('option', this.select, {
- text: repo.name,
- value: repo.id,
- }),
- );
-
- this.select.addEventListener('change', () =>
- this.fetchData(this.select.value),
- );
- }
- }
-
- window.HeaderView = HeaderView;
-}
diff --git a/homework-classes/Model.js b/homework-classes/Model.js
deleted file mode 100755
index 25884a133..000000000
--- a/homework-classes/Model.js
+++ /dev/null
@@ -1,53 +0,0 @@
-'use strict';
-
-{
- const { Observable } = window;
-
- const makeUrl = ({ name, type }) =>
- `https://api.github.com/${type}s/${name}/repos?per_page=100`;
-
- class Model extends Observable {
- constructor(account) {
- super();
- this.account = account;
- this.state = {
- repos: [],
- selectedRepo: null,
- contributors: [],
- error: null,
- };
- }
-
- async fetchData(id) {
- const repoId = parseInt(id, 10);
- this.state.error = null;
- try {
- if (this.state.repos.length === 0) {
- const repos = await Model.fetchJSON(makeUrl(this.account));
- this.state.repos = repos.sort((a, b) => a.name.localeCompare(b.name));
- }
- const index = id
- ? this.state.repos.findIndex(repo => repo.id === repoId)
- : 0;
- this.state.selectedRepo = this.state.repos[index];
- this.state.contributors = await Model.fetchJSON(
- this.state.selectedRepo.contributors_url,
- );
- } catch (err) {
- this.state.error = err;
- }
- this.notify(this.state);
- }
-
- static fetchJSON(url) {
- return fetch(url).then(res => {
- if (!res.ok) {
- return new Error(`HTTP ${res.status} - ${res.statusText}`);
- }
- return res.status === 200 ? res.json() : null;
- });
- }
- }
-
- window.Model = Model;
-}
diff --git a/homework-classes/Observable.js b/homework-classes/Observable.js
deleted file mode 100755
index 3eb5b2530..000000000
--- a/homework-classes/Observable.js
+++ /dev/null
@@ -1,20 +0,0 @@
-'use strict';
-
-{
- class Observable {
- constructor() {
- this.observers = new Set();
- }
-
- subscribe(observer = {}) {
- this.observers.add(observer);
- return () => this.observers.delete(observer);
- }
-
- notify(data) {
- this.observers.forEach(observer => observer.update(data));
- }
- }
-
- window.Observable = Observable;
-}
diff --git a/homework-classes/RepoView.js b/homework-classes/RepoView.js
deleted file mode 100755
index 073166fea..000000000
--- a/homework-classes/RepoView.js
+++ /dev/null
@@ -1,28 +0,0 @@
-'use strict';
-
-{
- const { createAndAppend } = window.Util;
-
- class RepoView {
- constructor(container) {
- this.container = container;
- }
-
- update(state) {
- if (!state.error) {
- this.render(state.selectedRepo);
- }
- }
-
- /**
- * Renders the repository details.
- * @param {Object} repo A repository object.
- */
- render(repo) {
- // TODO: replace this comment and the console.log with your own code
- console.log('RepoView', repo);
- }
- }
-
- window.RepoView = RepoView;
-}
diff --git a/homework-classes/Util.js b/homework-classes/Util.js
deleted file mode 100755
index dc5d79a87..000000000
--- a/homework-classes/Util.js
+++ /dev/null
@@ -1,27 +0,0 @@
-'use strict';
-
-{
- class Util {
- /**
- * Creates an element, optionally setting its attributes, and appends
- * the element to a parent.
- * @param {string} name The tag name of the element to create.
- * @param {HTMLElement} parent The parent element.
- * @param {Object} options An object with attribute names and values.
- */
- static createAndAppend(name, parent, options = {}) {
- const elem = document.createElement(name);
- parent.appendChild(elem);
- Object.entries(options).forEach(([key, value]) => {
- if (key === 'text') {
- elem.textContent = value;
- } else {
- elem.setAttribute(key, value);
- }
- });
- return elem;
- }
- }
-
- window.Util = Util;
-}
diff --git a/homework-classes/style.css b/homework-classes/style.css
deleted file mode 100755
index 90d106051..000000000
--- a/homework-classes/style.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.alert-error {
- color: red;
-}
diff --git a/homework/hyf.png b/homework/hyf.png
deleted file mode 100755
index 76bc5a13b..000000000
Binary files a/homework/hyf.png and /dev/null differ
diff --git a/homework/index.html b/homework/index.html
deleted file mode 100755
index 9c8f80c1a..000000000
--- a/homework/index.html
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-
-
- Codestin Search App
-
-
-
-
-
\ No newline at end of file
diff --git a/homework/index.js b/homework/index.js
deleted file mode 100755
index 3886cbac9..000000000
--- a/homework/index.js
+++ /dev/null
@@ -1,54 +0,0 @@
-'use strict';
-
-{
- function fetchJSON(url, cb) {
- const xhr = new XMLHttpRequest();
- xhr.open('GET', url);
- xhr.responseType = 'json';
- xhr.onload = () => {
- if (xhr.status >= 200 && xhr.status <= 299) {
- cb(null, xhr.response);
- } else {
- cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
- }
- };
- xhr.onerror = () => cb(new Error('Network request failed'));
- xhr.send();
- }
-
- function createAndAppend(name, parent, options = {}) {
- const elem = document.createElement(name);
- parent.appendChild(elem);
- Object.entries(options).forEach(([key, value]) => {
- if (key === 'text') {
- elem.textContent = value;
- } else {
- elem.setAttribute(key, value);
- }
- });
- return elem;
- }
-
- function renderRepoDetails(repo, ul) {
- createAndAppend('li', ul, { text: repo.name });
- }
-
- function main(url) {
- fetchJSON(url, (err, repos) => {
- const root = document.getElementById('root');
- if (err) {
- createAndAppend('div', root, {
- text: err.message,
- class: 'alert-error',
- });
- return;
- }
- const ul = createAndAppend('ul', root);
- repos.forEach(repo => renderRepoDetails(repo, ul));
- });
- }
-
- const HYF_REPOS_URL =
- 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
- window.onload = () => main(HYF_REPOS_URL);
-}
diff --git a/homework/style.css b/homework/style.css
deleted file mode 100755
index 90d106051..000000000
--- a/homework/style.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.alert-error {
- color: red;
-}
diff --git a/package-lock.json b/package-lock.json
index 7ccbb2e22..0d74aedda 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1016,9 +1016,9 @@
"integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ="
},
"prettier": {
- "version": "1.18.2",
- "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.18.2.tgz",
- "integrity": "sha512-OeHeMc0JhFE9idD4ZdtNibzY0+TPHSpSSb9h8FqtP+YnoZZ1sl8Vc9b1sasjfymH3SonAF4QcA2+mzHPhMvIiw=="
+ "version": "1.19.1",
+ "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
+ "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew=="
},
"prettier-linter-helpers": {
"version": "1.0.0",
diff --git a/package.json b/package.json
index a3233dcca..685329c36 100755
--- a/package.json
+++ b/package.json
@@ -15,6 +15,6 @@
"eslint-config-prettier": "^6.0.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-prettier": "^3.1.0",
- "prettier": "^1.18.2"
+ "prettier": "^1.19.1"
}
}
diff --git a/test.md b/test.md
index 1afa49ec8..168ba207d 100644
--- a/test.md
+++ b/test.md
@@ -3,19 +3,25 @@
You’ll be doing a final JavaScript test. It will be about all the JavaScript you’ve learned, from JavaScript 1 to JavaScript 3.
## Practical information
-- The test will start at **10.30 until 11.30**. The door will open at 10.15. **Be on time!**
-- It will be done online and you can use google, so please bring your laptop.
+
+- The test will last **2 hours**.
+- It will be done on the computer.
- You can’t use your old code.
-- There will be 5 or 6 questions.
+- There will be 6 or 7 questions.
## Purpose of the test
+
The purpose of this exam is to test your comprehension of JavaScript
+
- The goal for us is to know how solid your knowledge is and if you need any extra assistance throughout the program.
- The goal for you is to test how well enough you master the material so far.
+
Like the homework you will get feedback and are expected to improve upon your weak points.
## Test material
+
The test will be about all main JavaScript concepts we have discussed for the past weeks of JS. The following are the most important that will be tested:
+
- `Functions & Variables`
- `Scope`
- `Loops`
@@ -23,12 +29,14 @@ The test will be about all main JavaScript concepts we have discussed for the pa
- `Array functions`
- `Conditional statements`
- `DOM manipulations`
-- `Fetch & API calls`
+- `Fetch & HTTP Requests`
- `Promises & Async/await`
- `Try…catch`
## Preparation
+
Advice on how to optimally prepare:
+
- Find out 2 things about each concepts listed above: (1) how does the basic structure look and (2) what is the most common use case.
- Ask questions through Slack to your teachers and/or your classmates.
- Practice for understanding (why something is the case), NOT just for repetition shake (and hoping ‘you will understand it one day’).
@@ -36,23 +44,23 @@ Advice on how to optimally prepare:
- After you prepared try to make the sample questions that are in this file.
## During the test
+
Advise on how to make a test:
-- Look for low hanging fruit. Which of the assignments is easiest for you to do? Tackle that one first.
-- When writing your code, write small chunks at a time, testing each time before continuing. Use temporary console.log statements to show intermediate results (remove when no longer needed). Don't continue until the code written sofar is working correctly. If you write a whole bunch of code without intermediate testing it becomes difficult to pinpoint where issues occur.
-- If you get stuck in an assignment, move on to the next one. You can always come back later if time permits.
-- When writing code for the browser, always open the Chrome Developer Tools. Watch out for error messages in the browser console. Inspect the network tab to examine the data returned from a remote API.
-- Don't over-deliver. If styling is not required by the assignment, skip it. If time permits, you can do it later. The same goes for handling fetch errors. Focus on delivering a minimum working version that meets the requirement. Ticking off a working version again reduces your stress level. Come back later, if time permits, to embellish your solutions.
-- Don't use Google as a replacement for common sense.
-- After finishing an assignment, read the question again to make sure you actually gave an answer to the question.
-- Before handing in the test, read it all over again to pick out the small mistakes.
+
+- **Look for low hanging fruit**. Which of the assignments is easiest for you to do? Tackle that one first.
+- **When writing your code, write small chunks at a time, testing each time before continuing**. Use temporary console.log statements to show intermediate results (remove when no longer needed). Don't continue until the code written sofar is working correctly. If you write a whole bunch of code without intermediate testing it becomes difficult to pinpoint where issues occur.
+- **If you get stuck in an assignment, move on** to the next one. You can always come back later if time permits.
+- When writing code for the browser, **always open the Chrome Developer Tools**. Watch out for error messages in the browser console. Inspect the network tab to examine the data returned from a remote API.
+- **Don't over-deliver**. If styling is not required by the assignment, skip it. If time permits, you can do it later. The same goes for handling fetch errors. Focus on delivering a minimum working version that meets the requirement. Ticking off a working version again reduces your stress level. Come back later, if time permits, to embellish your solutions.
+- **Don't use Google as a replacement for common sense.**
+- After finishing an assignment, read the question again to **make sure you actually gave an answer to the question.**
+- Before handing in the test, read it all over again to **pick out the small mistakes.**
## Sample questions
1. Using JavaScript only (adding HTML to index.html is NOT allowed), create a button element (with text "click me!") and an empty image element and add it to the document. When the button is clicked, insert an image URL into the 
