Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit fecbb79

Browse files
NoerGitKatNoerGitKat
committed
removed oop homework project, added content w1/w2
1 parent 953fde7 commit fecbb79

25 files changed

+106
-490
lines changed

‎.vscode/settings.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,6 @@
1212
"remarcmij",
1313
"tabindex",
1414
"whiteframe"
15-
]
15+
],
16+
"deno.enable": false
1617
}

‎README.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@ In order to successfully complete this module you will need to master the follow
2727

2828
This repository consists of 3 essential parts:
2929

30-
1. `Reading materials`: this document contains all the required theory you need to know _**while**_ you're coding. It's meant as both study material and as a reference to understand what you're doing.
31-
2. `Homework`: this document contains the instructions for each week's homework.
32-
3. `Lesson Plans`: this part is meant for teachers as a reference. However, as a student don't be shy to take a look at it as well!
30+
1. `README`: this document contains all the required theory you need to understand **before** class. It's also meant as a reference to understand what you're doing while you're coding.
31+
2. `MAKEME`: this document contains the instructions for each week's homework.
32+
3. `LESSONPLAN`: this document is meant for teachers as a reference. However, as a student don't be shy to take a look at it as well!
3333

34-
After your first class you should start off with checking the `reading materials` for that week. At the beginning that would be the [Week 1 Reading](/Week1/README.md). Study all the concepts and try to get the gist of everything. After, you can get started with the `homework` for that week.
34+
**Before** the first class of the module you should start off with the [Week 1 Reading](/Week1/README.md). Study all the concepts and try to get the gist of everything. After your first class, you can get started with the [Week 1 Homework](/Week1/MAKEME.md).
3535

3636
If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack!
3737

@@ -76,7 +76,7 @@ foo@bar:~$ git branch week2-YOURNAME
7676
foo@bar:~$ git branch week3-YOURNAME
7777
```
7878

79-
Then execute `git checkout week1` and you can get started!
79+
Then execute `git checkout week1-YOURNAME` and you can get started!
8080

8181
If you have any questions or if something is not entirely clear ¯\_(ツ)\_/¯, please ask/comment on Slack!
8282

‎Week1/MAKEME.md

Lines changed: 44 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -65,114 +65,60 @@ Enjoy!
6565

6666
## **4. PROJECT: Hack Your Repo I**
6767

68-
In the following three weeks you are going to write a _Single Page Application_ (SPA) that makes use of the [GitHub API](https://developer.github.com/v3/guides/getting-started/).
68+
In the following three weeks you are going to write an application that makes use of the [GitHub API](https://developer.github.com/v3/guides/getting-started/). Each week builds on top of the other, just like a real-world application!
6969

70-
Figure 1 below shows an example of what your application will look like.
70+
[![UI Example](./assets/hyf-github.png)](https://js3-spa.herokuapp.com/)
71+
Click on the image to open up a demo of the application!
7172

72-
![UI Example](./assets/hyf-github.png)
73-
74-
This application does 2 things:
73+
This application, HackYourRepo, does 2 things:
7574

7675
1. It makes connection to the GitHub API and retrieves all the repositories found in the [HackYourFuture account](https://www.github.com/hackyourfuture).
7776
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.
7877

79-
### Getting an overview
80-
81-
For this week you're expected to build upon pre-existing code, found in the folder `homework`. Here's what you'll find:
82-
83-
| Filename | Description |
84-
| ------------ | --------------------------------- |
85-
| `hyf.png` | Contains the HackYourFuture logo. |
86-
| `index.html` | The application's HTML file. |
87-
| `index.js` | A starter JavaScript file. |
88-
| `style.css` | A starter CSS file. |
89-
90-
As you'll experience in your job, you'll be exposed to an already existing codebase. It's an essential skill to get used to doing this. But how?
91-
92-
### A first examination
93-
94-
1. Open `index.html` and examine its contents (but don't modify anything). Notice that the HTML `<body>` looks like this:
95-
96-
```html
97-
<body>
98-
<div id="root"></div>
99-
<script src="./index.js"></script>
100-
</body>
101-
```
102-
103-
The `<body>` tag contains a single `<div>` to which you will need to dynamically append HTML elements through your JavaScript code in `index.js`.
104-
105-
2. Open `index.js`. This file contains a starter set of code for you to expand. It contains the following three functions:
106-
107-
| Function | Description |
108-
| ----------------- | ------------------------------------------------------------------------------------------------------------ |
109-
| `fetchJSON` | Uses `XMLHttpRequest` to fetch JSON data from an API end point. This function uses an asynchronous callback. |
110-
| `createAndAppend` | A utility function for easily creating and appending HTML elements. |
111-
| `main` | Contains the start-up code for the application. |
112-
113-
`index.js` also contains a variable with the URL required for fetching information about the HYF repositories:
114-
115-
```js
116-
const HYF_REPOS_URL =
117-
'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
118-
```
119-
120-
3. Open the `index.html` file in your browser. You will see an unordered list with the names of the HYF repositories.
121-
122-
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.
123-
124-
5. Take a look at the API URL:
125-
78+
In the course of the next 3 weeks you'll be writing the necessary code to make all of this work!
79+
80+
### 4.1 Requirements
81+
82+
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.
83+
84+
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.
85+
86+
Here are the requirements for the HTML:
87+
88+
- Include 3 `<section>` tags
89+
- Include a `<select>` tag
90+
- Use the following placeholder data:
91+
92+
```js
93+
const placeholderRepos = [
94+
{
95+
name: 'SampleRepo1',
96+
description: 'This repository is meant to be a sample',
97+
forks: 5,
98+
updated: '2020-05-27 12:00:00',
99+
},
100+
{
101+
name: 'AndAnotherOne',
102+
description: 'Another sample repo! Can you believe it?',
103+
forks: 9,
104+
updated: '2020-05-27 12:00:00',
105+
},
106+
{
107+
name: 'HYF-Is-The-Best',
108+
description:
109+
"This repository contains all things HackYourFuture. That's because HYF is amazing!!!!",
110+
forks: 130,
111+
updated: '2020-05-27 12:00:00',
112+
},
113+
];
126114
```
127-
https://api.github.com/orgs/HackYourFuture/repos?per_page=100
128-
```
129-
130-
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 an HTTP request to in order to get data.
131-
132-
- Learn more about endpoints [here](https://smartbear.com/learn/performance-monitoring/api-endpoints/).
133-
134-
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. How do we know? It says so in the [API documentation](https://developer.github.com/v3/#pagination)).
135-
136-
> Before using a public API it's always best practice to read the documentation. The developers have written down exactly how to understand and use it!
137-
138-
### Week 1 Assignment
139-
140-
The assignment for this week is to produce a functional web application that looks similar to Figure 1:
141-
142-
![UI Example](./assets/hyf-github.png)
143-
144-
Here are the basic requirements:
145-
146-
1. Make a HTTP Request to the endpoint: https://api.github.com/orgs/HackYourFuture/repos?per_page=100
147-
2. Display the first 10 items in the HTML file (write JavaScript to add the elements to the DOM)
148-
3. Show feedback when an error has happened
149-
150-
Modify the following files:
151-
152-
**1. `index.js`**
153-
154-
- Add new functions and modify function `main()` as you see fit.
155-
- 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:
156-
157-
![Error rendering](./assets/hyf-github-error.png)
158-
159-
<small>Figure 2. Rendering of network errors.</small>
160-
161-
**2. `style.css`**
162-
163-
- 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.
164-
165-
**You are not allowed to use a CSS library such as Bootstrap.**
166-
167-
**Hints:**
168-
169-
- 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).
170115

171-
- Use CSS media queries, percentage values and [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) to make the UI responsive.
116+
Here are the requirements for the CSS:
172117

173-
- 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`.
118+
- Make use of `flexbox`
119+
- Make use of `media-queries` and `calc()` to make the page responsive ([mobile, tablet, desktop](https://tinyurl.com/yc5zmste))
174120

175-
Good luck!
121+
Other than this you can create your own version of the page!
176122

177123
## **SUBMIT YOUR HOMEWORK!**
178124

‎Week1/assets/hyf-github.png

228 KB
Loading

‎Week2/MAKEME.md

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,49 @@ Let's start this week off with some interactive exercises! Visit the following l
1515

1616
## **2. JavaScript exercises**
1717

18-
**_No exercises this week_**
18+
> Inside of your `JavaScript3` fork and inside of the `Week2` folder, create a folder called `homework`. Inside of that folder, create a folder called `js-exercises`. For all the following exercises create a new `.js` file in that folder (3 files in total). Make sure the name of each file reflects its content: for example, the filename for exercise one could be `getName.js`.
19+
20+
**Exercise 1: John who?**
21+
22+
Take a look at the following function (and try it out in your console):
23+
24+
```js
25+
const getAnonName = (firstName, callback) => {
26+
setTimeout(() => {
27+
if (!firstName)
28+
return callback(new Error("You didn't pass in a first name!"));
29+
30+
const fullName = `${firstName} Doe`;
31+
32+
return callback(fullName);
33+
}, 2000);
34+
};
35+
36+
getAnonName('John', console.log);
37+
```
38+
39+
Rewrite this function, but replace the callback syntax with the Promise syntax:
40+
41+
- Have the `getAnonName` function return a `new Promise` that uses the `firstName` parameter
42+
- If the Promise `resolves`, pass the full name as an argument to resolve with
43+
- If the Promise `rejects`, pass an error as the argument to reject with: "You didn't pass in a first name!"
44+
45+
**Exercise 2: Is it bigger than 10?**
46+
47+
Write a function called `checkDoubleDigits` that:
48+
49+
- Takes 1 argument: a number
50+
- Returns a `new Promise`
51+
- If the number is bigger than 10, resolve with the string: "The number is bigger than 10!"
52+
- If the number is smaller than 10, reject with the error: "Error! The number is smaller than 10..."
53+
54+
**Exercise 3: Gotta catch 'em all**
55+
56+
Let's catch all origin 151 Pokemon in our own little web application!
57+
58+
> Inside of your `homework` folder, create another folder called `pokemon-app`. This
59+
60+
In this exercise you're going to build a
1961

2062
## **3. Code along**
2163

‎Week3/README.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -308,7 +308,6 @@ With the `async/await` keywords, we don't get a `catch` function to use. So inst
308308
console.log('Oops, something went wrong!', err);
309309
}
310310
}
311-
312311
```
313312

314313
Learn more about it here:

‎assets/submit-homework.png

1.12 MB
Loading

‎homework-classes/hyf.png renamed to ‎hackyourrepo-app/hyf.png

File renamed without changes.

‎homework-classes/index.html renamed to ‎hackyourrepo-app/index.html

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,22 +12,14 @@
1212
<meta name="format-detection" content="telephone=no" />
1313
<link rel="apple-touch-icon" href="./hyf.png" />
1414
<link rel="shortcut icon" type="image/png" href="./hyf.png" />
15-
<title>HYF-GITHUB</title>
15+
<title>HackYourRepo</title>
1616
<link
1717
href="https://fonts.googleapis.com/css?family=Roboto:400,700"
1818
rel="stylesheet"
1919
/>
2020
<link rel="stylesheet" href="./style.css" />
2121
</head>
2222
<body>
23-
<div id="root"></div>
24-
<script src="./Util.js"></script>
25-
<script src="./Observable.js"></script>
26-
<script src="./Model.js"></script>
27-
<script src="./HeaderView.js"></script>
28-
<script src="./RepoView.js"></script>
29-
<script src="./ContributorsView.js"></script>
30-
<script src="./ErrorView.js"></script>
31-
<script src="./App.js"></script>
23+
<script src="./script.js"></script>
3224
</body>
3325
</html>

‎hackyourrepo-app/script.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
"use strict";
2+
3+
/*
4+
Write here your JavaScript for HackYourRepo!
5+
*/

‎hackyourrepo-app/style.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/*
2+
Write here your CSS rules for HackYourRepo!
3+
*/

‎hand-in-homework-guide.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ In this module you'll submit your homework only using GIT and GitHub.
66

77
## 1. GitHub homework guide
88

9-
[![Noer Explains Homework Submission](./assets/homework-submission.png)](https://www.youtube.com/watch?v=CpYARPYGQU8 'How to Submit Your Homework')
9+
<a href="http://www.youtube.com/watch?feature=player_embedded&v=CpYARPYGQU8" target="_blank"><img src="./assets/submit-homework.png" width="400" height="250" alt="HYF Video" /></a>
1010

11-
Use the video above, or follow the written walkthrough below, to learn about how to submit your homework:
11+
Watch the video (by clicking the image) or go through the following walk-through to learn how to submit your homework:
1212

1313
ONE TIME ONLY (START OF EVERY MODULE)
1414

‎homework-classes/App.js

Lines changed: 0 additions & 56 deletions
This file was deleted.

‎homework-classes/ContributorsView.js

Lines changed: 0 additions & 28 deletions
This file was deleted.

0 commit comments

Comments
 (0)