samravan · n4cr · Jan 18, 2021 · Jan 2, 2021 · Jan 2, 2021 · Jan 3, 2021
diff --git a/Week3/homework/masoud/js-exercise/Ex1/Ex1-promiseMeToWait.js b/Week3/homework/masoud/js-exercise/Ex1/Ex1-promiseMeToWait.js
@@ -0,0 +1,43 @@
+// Exercise A
+async function getData(url) {
+  try {
+    const number = await fetch(url);
+    return await number.json();
+  }
+  catch (error) {
+    console.log('error');
+  }
+}
+
+getData('https://randomfox.ca/floof/').then(res => {
+  console.log(res.image);
+})
+  .catch(error => {
+    console.log('error');
+  })
+
+
+// Exercise B
+const arrayOfWords = ['cucumber', 'tomatos', 'avocado'];
+
+async function makeAllCaps(array) {
+
+  try {
+    let capsArray = await array.map(word => {
+      if (typeof word === 'string') {
+        return word.toUpperCase();
+      } else {
+        throw 'Error: Not all items in the array are strings!';
+      }
+    })
+    return capsArray;
+  }
+
+  catch (error) {
+    return error;
+  }
+}
+
+makeAllCaps(arrayOfWords).then(res => {
+  console.log(res)
+});
diff --git a/Week3/homework/masoud/js-exercise/Ex1/index.html b/Week3/homework/masoud/js-exercise/Ex1/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+
+<body>
+
+
+
+  <script src="Ex1-promiseMeToWait.js"></script>
+</body>
+
+</html>
diff --git a/Week3/homework/masoud/js-exercise/Ex2/Ex2-classify.js b/Week3/homework/masoud/js-exercise/Ex2/Ex2-classify.js
@@ -0,0 +1,25 @@
+class Person {
+  constructor(firstName, age, location, childerenNum, job, favourite) {
+    this.firstName = firstName;
+    this.age = age;
+    this.location = location;
+    this.childerenNum = childerenNum;
+    this.job = job;
+    this.favourite = favourite;
+  }
+}
+
+class Animal {
+  constructor(species, name, age, color, eat, help, owner) {
+    this.species = species;
+    this.name = name;
+    this.age = age;
+    this.color = color;
+    this.eat = eat;
+    this.help = help;
+    this.owner = owner;
+  }
+}
+
+const Adbulkareem = new Person('Abdulkareem', 35, 'Riyadh', 3, 'construction worker', ['eat dates', 'smoke water pipe']);
+const Adel = new Animal('horse', 'Adel', 15, 'brown', 'grass', 'transport materials', Adbulkareem);
diff --git a/Week3/homework/masoud/js-exercise/Ex3-triviaApp/app.js b/Week3/homework/masoud/js-exercise/Ex3-triviaApp/app.js
@@ -0,0 +1,64 @@
+window.onload = main;
+
+function main() {
+  const url = 'https://opentdb.com/api.php?amount=5';
+  fetchData(url).then(response => {
+    AddToDOM(response);
+  })
+    .catch(error => { console.log(error) });
+};
+
+function AddToDOM(Data) {
+  const trivia = Data.results;
+  const questions = document.querySelector('.questions');
+  const div = document.createElement('div');
+  const answers = document.getElementsByClassName('answer');
+
+  trivia.forEach(array => {
+    const question = document.createElement('p');
+    const answer = document.createElement('p');
+
+    question.textContent = decodeHTML(array.question);
+    question.classList.add('question');
+    answer.textContent = decodeHTML(array.correct_answer);
+    answer.style.display = 'none';
+    answer.classList.add('answer');
+
+    div.appendChild(question);
+    div.appendChild(answer);
+    questions.appendChild(div);
+
+    close();
+    function open() {
+      answer.style.display = 'block';
+      question.removeEventListener('click', open);
+      question.addEventListener('click', close);
+    };
+    function close() {
+      answer.style.display = 'none';
+      question.removeEventListener('click', close);
+      question.addEventListener('click', open);
+    };
+
+    document.addEventListener('click', function (event) {
+      const isClickInsideElement = div.contains(event.target);
+      if (!isClickInsideElement) {
+        Array.from(answers).forEach(element => {
+          element.style.display = 'none';
+          close();
+        });
+      };
+    });
+  });
+};
+
+function decodeHTML(html) {
+  const txt = document.createElement('textarea');
+  txt.innerHTML = html;
+  return txt.value;
+};
+
+async function fetchData(url) {
+  const Data = await fetch(url);
+  return await Data.json();
+};
diff --git a/Week3/homework/masoud/js-exercise/Ex3-triviaApp/index.html b/Week3/homework/masoud/js-exercise/Ex3-triviaApp/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Trivia Application</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+  <div class="container">
+    <h1>Let's Play Some Trivia</h1>
+    <p>Try your best to figure out the answer. If you really have no clue, click on the question to reveal the answer...
+    </p>
+    <div class="questions"></div>
+  </div>
+
+  <script src="app.js"></script>
+</body>
+
+</html>
diff --git a/Week3/homework/masoud/js-exercise/Ex3-triviaApp/style.css b/Week3/homework/masoud/js-exercise/Ex3-triviaApp/style.css
@@ -0,0 +1,38 @@
+*{
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-size: large;
+  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  background-color:aquamarine;
+}
+
+.container{
+  width: 80%;
+  margin: auto;
+}
+
+h1{
+  text-align: center;
+  margin: 10px;
+}
+
+.questions{
+  margin: 20px;
+  background-color: coral;
+  padding: 10px;
+  color: white;
+}
+
+.question {
+  cursor: pointer;
+  margin: 10px 0;
+}
+
+.answer {
+  background-color: cyan;
+  color: black;
+}
diff --git a/apps/hackyourinfo/package.json b/apps/hackyourinfo/package.json
diff --git a/hackyourrepo-app/Masoud/week3/css/style.css b/hackyourrepo-app/Masoud/week3/css/style.css
@@ -0,0 +1,136 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+body{
+  background-color: #313267;
+  font-size: 14px;
+  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  width: 100vw;
+  height: calc(100vh - 20px);
+}
+
+header{
+  height: 15%;
+  background-color:#313267 ;
+}
+
+
+header a{
+  height: 100%;
+  display: block;
+ text-align: center;
+}
+
+img{
+  height: inherit;
+  padding: 5px;
+}
+
+.container{
+  background-color: #6ed5e7;
+  width: calc(95% - 5px);
+  margin: auto;
+  height: 85%;
+}
+
+.selector{
+  padding: 10px;
+  font-size: 1.4em;
+  background-color: rgb(252, 103, 49);
+  color: white;
+}
+
+#repo-items{
+  font-size: 12px;
+  font-family: sans-serif;
+  font-weight: 700;
+  color: #444;
+  padding: .6em 1.4em .5em .8em;
+  max-width: 100%; /* useful when width is set to anything other than 100% */
+  margin: 0px auto;
+  border: 1px solid #aaa;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  background-color: #fff;
+  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+
+.des-con{
+  display: flex;
+  padding: 10px;
+}
+
+.description, .contributers{
+  border: 2px rgb(223, 152, 152) solid;
+  margin: 5px;
+  height: 70vh;
+  overflow: auto;
+}
+
+.description {
+  width: 40%;
+}
+
+.contributers{
+  width: 60%;
+}
+
+.contributers img{
+  width: 80%;
+  border-radius: 50%;
+}
+
+.items {
+  display: flex;
+ justify-content: space-between;
+ padding: 0 15px;
+ height: 20%;
+ align-items: center;
+}
+
+table{
+  border-spacing: 10px;
+}
+
+.button-area{
+  text-align: center;
+  margin-top: 30%;
+
+}
+
+.button {
+  padding: 5px;
+  margin: 1px;
+  background-color:  rgb(252, 103, 49);
+  color: white;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 20px;
+}
+
+@media only screen and (max-width:550px){
+  .des-con{
+    flex-direction: column;
+    align-items: center;
+  }
+  .description, .contributers{
+    width: 90%;
+    overflow:visible;
+    height: auto;
+  }
+  .selector{
+    text-align: center;
+  }
+  #repo-items{
+    margin-top: 10px;
+  }
+
+  body{
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/hackyourrepo-app/Masoud/week3/img/favicon.ico b/hackyourrepo-app/Masoud/week3/img/favicon.ico
diff --git a/hackyourrepo-app/Masoud/week3/img/hyf.png b/hackyourrepo-app/Masoud/week3/img/hyf.png
diff --git a/hackyourrepo-app/Masoud/week3/index.html b/hackyourrepo-app/Masoud/week3/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Hack Your Future</title>
+  <link rel="icon" href="img/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+
+  <script type="module" src="util/script.js"></script>
+</body>
+
+</html>