Skip to content

Commit 09490ef

Browse files
n4crn4cr
authored
Merge pull request #5 from massam89/week3-masoud
Week3 masoud
2 parents 6b2ef7e + 2160238 commit 09490ef

26 files changed

Lines changed: 641 additions & 39 deletions

‎Week3/homework/masoud/js-exercise/Ex1/Ex1-promiseMeToWait.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// Exercise A
2+
async function getData(url) {
3+
try {
4+
const number = await fetch(url);
5+
return await number.json();
6+
}
7+
catch (error) {
8+
console.log('error');
9+
}
10+
}
11+
12+
getData('https://randomfox.ca/floof/').then(res => {
13+
console.log(res.image);
14+
})
15+
.catch(error => {
16+
console.log('error');
17+
})
18+
19+
20+
// Exercise B
21+
const arrayOfWords = ['cucumber', 'tomatos', 'avocado'];
22+
23+
async function makeAllCaps(array) {
24+
25+
try {
26+
let capsArray = await array.map(word => {
27+
if (typeof word === 'string') {
28+
return word.toUpperCase();
29+
} else {
30+
throw 'Error: Not all items in the array are strings!';
31+
}
32+
})
33+
return capsArray;
34+
}
35+
36+
catch (error) {
37+
return error;
38+
}
39+
}
40+
41+
makeAllCaps(arrayOfWords).then(res => {
42+
console.log(res)
43+
});

‎Week3/homework/masoud/js-exercise/Ex1/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
</head>
9+
10+
<body>
11+
12+
13+
14+
<script src="Ex1-promiseMeToWait.js"></script>
15+
</body>
16+
17+
</html>

‎Week3/homework/masoud/js-exercise/Ex2/Ex2-classify.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
class Person {
2+
constructor(firstName, age, location, childerenNum, job, favourite) {
3+
this.firstName = firstName;
4+
this.age = age;
5+
this.location = location;
6+
this.childerenNum = childerenNum;
7+
this.job = job;
8+
this.favourite = favourite;
9+
}
10+
}
11+
12+
class Animal {
13+
constructor(species, name, age, color, eat, help, owner) {
14+
this.species = species;
15+
this.name = name;
16+
this.age = age;
17+
this.color = color;
18+
this.eat = eat;
19+
this.help = help;
20+
this.owner = owner;
21+
}
22+
}
23+
24+
const Adbulkareem = new Person('Abdulkareem', 35, 'Riyadh', 3, 'construction worker', ['eat dates', 'smoke water pipe']);
25+
const Adel = new Animal('horse', 'Adel', 15, 'brown', 'grass', 'transport materials', Adbulkareem);

‎Week3/homework/masoud/js-exercise/Ex3-triviaApp/app.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
window.onload = main;
2+
3+
function main() {
4+
const url = 'https://opentdb.com/api.php?amount=5';
5+
fetchData(url).then(response => {
6+
AddToDOM(response);
7+
})
8+
.catch(error => { console.log(error) });
9+
};
10+
11+
function AddToDOM(Data) {
12+
const trivia = Data.results;
13+
const questions = document.querySelector('.questions');
14+
const div = document.createElement('div');
15+
const answers = document.getElementsByClassName('answer');
16+
17+
trivia.forEach(array => {
18+
const question = document.createElement('p');
19+
const answer = document.createElement('p');
20+
21+
question.textContent = decodeHTML(array.question);
22+
question.classList.add('question');
23+
answer.textContent = decodeHTML(array.correct_answer);
24+
answer.style.display = 'none';
25+
answer.classList.add('answer');
26+
27+
div.appendChild(question);
28+
div.appendChild(answer);
29+
questions.appendChild(div);
30+
31+
close();
32+
function open() {
33+
answer.style.display = 'block';
34+
question.removeEventListener('click', open);
35+
question.addEventListener('click', close);
36+
};
37+
function close() {
38+
answer.style.display = 'none';
39+
question.removeEventListener('click', close);
40+
question.addEventListener('click', open);
41+
};
42+
43+
document.addEventListener('click', function (event) {
44+
const isClickInsideElement = div.contains(event.target);
45+
if (!isClickInsideElement) {
46+
Array.from(answers).forEach(element => {
47+
element.style.display = 'none';
48+
close();
49+
});
50+
};
51+
});
52+
});
53+
};
54+
55+
function decodeHTML(html) {
56+
const txt = document.createElement('textarea');
57+
txt.innerHTML = html;
58+
return txt.value;
59+
};
60+
61+
async function fetchData(url) {
62+
const Data = await fetch(url);
63+
return await Data.json();
64+
};

‎Week3/homework/masoud/js-exercise/Ex3-triviaApp/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Trivia Application</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
13+
<div class="container">
14+
<h1>Let's Play Some Trivia</h1>
15+
<p>Try your best to figure out the answer. If you really have no clue, click on the question to reveal the answer...
16+
</p>
17+
<div class="questions"></div>
18+
</div>
19+
20+
<script src="app.js"></script>
21+
</body>
22+
23+
</html>

‎Week3/homework/masoud/js-exercise/Ex3-triviaApp/style.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
*{
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-size: large;
9+
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
10+
background-color:aquamarine;
11+
}
12+
13+
.container{
14+
width: 80%;
15+
margin: auto;
16+
}
17+
18+
h1{
19+
text-align: center;
20+
margin: 10px;
21+
}
22+
23+
.questions{
24+
margin: 20px;
25+
background-color: coral;
26+
padding: 10px;
27+
color: white;
28+
}
29+
30+
.question {
31+
cursor: pointer;
32+
margin: 10px 0;
33+
}
34+
35+
.answer {
36+
background-color: cyan;
37+
color: black;
38+
}

‎apps/hackyourinfo/package.json‎

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

‎hackyourrepo-app/Masoud/week3/css/style.css‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body{
8+
background-color: #313267;
9+
font-size: 14px;
10+
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
11+
width: 100vw;
12+
height: calc(100vh - 20px);
13+
}
14+
15+
header{
16+
height: 15%;
17+
background-color:#313267 ;
18+
}
19+
20+
21+
header a{
22+
height: 100%;
23+
display: block;
24+
text-align: center;
25+
}
26+
27+
img{
28+
height: inherit;
29+
padding: 5px;
30+
}
31+
32+
.container{
33+
background-color: #6ed5e7;
34+
width: calc(95% - 5px);
35+
margin: auto;
36+
height: 85%;
37+
}
38+
39+
.selector{
40+
padding: 10px;
41+
font-size: 1.4em;
42+
background-color: rgb(252, 103, 49);
43+
color: white;
44+
}
45+
46+
#repo-items{
47+
font-size: 12px;
48+
font-family: sans-serif;
49+
font-weight: 700;
50+
color: #444;
51+
padding: .6em 1.4em .5em .8em;
52+
max-width: 100%; /* useful when width is set to anything other than 100% */
53+
margin: 0px auto;
54+
border: 1px solid #aaa;
55+
-moz-appearance: none;
56+
-webkit-appearance: none;
57+
background-color: #fff;
58+
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
59+
}
60+
61+
.des-con{
62+
display: flex;
63+
padding: 10px;
64+
}
65+
66+
.description, .contributers{
67+
border: 2px rgb(223, 152, 152) solid;
68+
margin: 5px;
69+
height: 70vh;
70+
overflow: auto;
71+
}
72+
73+
.description {
74+
width: 40%;
75+
}
76+
77+
.contributers{
78+
width: 60%;
79+
}
80+
81+
.contributers img{
82+
width: 80%;
83+
border-radius: 50%;
84+
}
85+
86+
.items {
87+
display: flex;
88+
justify-content: space-between;
89+
padding: 0 15px;
90+
height: 20%;
91+
align-items: center;
92+
}
93+
94+
table{
95+
border-spacing: 10px;
96+
}
97+
98+
.button-area{
99+
text-align: center;
100+
margin-top: 30%;
101+
102+
}
103+
104+
.button {
105+
padding: 5px;
106+
margin: 1px;
107+
background-color: rgb(252, 103, 49);
108+
color: white;
109+
border: none;
110+
border-radius: 3px;
111+
cursor: pointer;
112+
font-size: 20px;
113+
}
114+
115+
@media only screen and (max-width:550px){
116+
.des-con{
117+
flex-direction: column;
118+
align-items: center;
119+
}
120+
.description, .contributers{
121+
width: 90%;
122+
overflow:visible;
123+
height: auto;
124+
}
125+
.selector{
126+
text-align: center;
127+
}
128+
#repo-items{
129+
margin-top: 10px;
130+
}
131+
132+
body{
133+
width: 100%;
134+
height: 100%;
135+
}
136+
}

‎hackyourrepo-app/Masoud/week3/img/favicon.ico‎

1.12 KB
Binary file not shown.

‎hackyourrepo-app/Masoud/week3/img/hyf.png‎

7.64 KB
Loading

0 commit comments

Comments
 (0)