samravan · amirhshad · Dec 31, 2020 · Jan 2, 2021 · Jan 2, 2021 · Jan 2, 2021
diff --git a/Week1/AmirHossein/homework/js-exercises/.vscode/settings.json b/Week1/AmirHossein/homework/js-exercises/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/Week3/AmirHossein/homework/js-exercises/.vscode/settings.json b/Week3/AmirHossein/homework/js-exercises/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/Week3/AmirHossein/homework/js-exercises/classify.js b/Week3/AmirHossein/homework/js-exercises/classify.js
@@ -0,0 +1,31 @@
+/*# STORY
+
+Abdulkareem is a 35 year old man, that lives in Riyadh. He has a wife and 3 children. As a day job he's a construction worker, that makes houses. He likes to eat dates and smoke water pipe.
+
+Abdulkareem has a horse, named Adel. The horse is 15 years old and has the color brown. Usually the horse eats grass or helps transport materials for Abdulkareem.
+
+And they lived happily ever after!*/
+
+class Person {
+    constructor(name, location, age, maritalStatus, children, job, interests,) {
+        this.name = name,
+        this.location = location,
+        this.age = age,
+        this.maritalStatus = maritalStatus;
+        this.children = children;
+        this.job = job;
+        this.interests = interests;
+    }
+}
+
+class Horse {
+    constructor(name, age, color, hobby) {
+        this.name = name,
+        this.age = age,
+        this.color = color;
+        this.hobby = hobby;
+    }
+}
+
+const abdulkareem = Person('Abdulkareem', 35, 'Riyadh', 'married', '3 children', 'construction worker', ['dates', 'smoke water pipe'] );
+const adel = Horse('Adel', 15, 'brown', ['eat grasses', 'transport materials']);
diff --git a/Week3/AmirHossein/homework/js-exercises/index.html b/Week3/AmirHossein/homework/js-exercises/index.html
@@ -0,0 +1,12 @@
+<!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="promiseMe.js"></script>
+</body>
+</html>
diff --git a/Week3/AmirHossein/homework/js-exercises/promiseMe.js b/Week3/AmirHossein/homework/js-exercises/promiseMe.js
@@ -0,0 +1,58 @@
+function getData(url) {
+    fetch(url)
+      .then(response => response.json)
+      .then(json => console.log(json))
+      .catch(error => console.log(error));
+  }
+
+  getData('https://randomfox.ca/floof/');
+
+
+
+async function getData(url) {
+    try {
+        const response = await fetch(url);
+        return console.log(response)
+    }
+    catch(error) {
+        console.log(error);
+    };
+
+}
+getData('https://randomfox.ca/floof/')
+
+
+const arrayOfWords = ['apple', 'tomatos', 'avocado'];
+
+// const makeAllCaps = array => {
+//   return new Promise((resolve, reject) => {
+//     let capsArray = array.map(word => {
+//       if (typeof word === 'string') {
+//         return word.toUpperCase();
+//       } else {
+//         reject('Error: Not all items in the array are strings!');
+//       }
+//     });
+//     resolve(capsArray);
+//   });
+// };
+
+async function makeAllCaps(array) {
+    try {
+        let capsArray = await array.map(word => {
+            if (typeof word === 'string') {
+                return word.toUpperCase();
+            }else {
+                reject(error);
+            }
+        })
+        return capsArray
+
+    }
+    catch(error) {
+        return console.log('Error: Not all items in the array are strings!')
+    }
+}
+makeAllCaps(arrayOfWords)
+  .then(result => console.log(result))
+  .catch(error => console.log(error));
diff --git a/Week3/AmirHossein/homework/js-exercises/trivia-app/.vscode/settings.json b/Week3/AmirHossein/homework/js-exercises/trivia-app/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/Week3/AmirHossein/homework/js-exercises/trivia-app/app.js b/Week3/AmirHossein/homework/js-exercises/trivia-app/app.js
@@ -0,0 +1,100 @@
+const elFactory = (type, attributes, ...children) => {    // Function for creating elements
+    const el = document.createElement(type);
+    let key;
+    for (key in attributes) {
+      el.setAttribute(key, attributes[key]);
+    };
+
+    children.forEach(child => {
+      if (typeof child === 'string') {
+        el.appendChild(document.createTextNode(child));
+      } else {
+        el.appendChild(child);
+      }
+    });
+
+    return el
+  };
+
+const container = elFactory('div', {class: 'container'},
+  elFactory('h1',{}, 'Let\'s play some Trivia!'),
+  elFactory('h3', {}, 'Try your best to figure out the answer. If you really have no clue, click on the question to reveal the answer.'));
+
+const allPage = elFactory('div', {class: 'allpage'})
+allPage.appendChild(container)
+
+
+const list = elFactory('div', {id: 'list'})
+document.body.appendChild(allPage);
+
+const url = 'https://opentdb.com/api.php?amount=5'
+
+function addTrivia(response) {
+  response.results.forEach(element => {
+    const list = elFactory('div', {id: 'list'},
+                  elFactory('p', {class: 'question'},
+                    elFactory('p', {class: 'answer'})))
+    const questions = list.querySelector('.question');
+    const answer = list.querySelector('.answer');
+
+    questions.innerHTML = element.question;
+    answer.innerHTML = element.correct_answer;
+    list.appendChild(questions);
+    list.appendChild(answer);
+    container.appendChild(list);
+    function openFunction() {
+
+      questions.addEventListener('click', function(){
+        answer.style.display = 'block';
+        closeFunction();
+      })
+    }
+    function closeFunction() {
+
+      questions.addEventListener('click', function(){
+          answer.style.display = 'none';
+          openFunction();
+        })
+      }
+      closeFunction();
+      document.addEventListener('click', function (event) {
+        const isClickInsideElement = container.contains(event.target);
+        if (!isClickInsideElement) {
+          answer.style.display = 'none'
+
+
+
+        };
+      });
+
+
+
+})
+
+}
+
+
+
+function getData1() {
+  fetch(url)
+    .then(result => result.json())
+    .then(response => {
+      addTrivia(response)
+      }
+      )
+
+}
+getData1();
+
+
+
+// async function getData(url) {
+//     const fetchData = await fetch(url);
+//     const jsonData = fetchData.json();
+
+//     console.log(jsonData)
+
+
+// }
+
+// getData(url);
diff --git a/Week3/AmirHossein/homework/js-exercises/trivia-app/index.html b/Week3/AmirHossein/homework/js-exercises/trivia-app/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Trivia </title>
+</head>
+<body>
+
+
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/Week3/AmirHossein/homework/js-exercises/trivia-app/style.css b/Week3/AmirHossein/homework/js-exercises/trivia-app/style.css
@@ -0,0 +1,43 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+
+}
+
+.container {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    padding: 5px;
+    /* bring your own prefixes */
+    transform: translate(-50%, -50%);
+    background-color: lightgreen;
+
+}
+
+h1 {
+    margin-bottom: 20px;
+
+}
+
+h3 {
+    margin-bottom: 20px;
+}
+
+
+.question {
+
+    padding: 10px;
+    background-color: lightpink;
+}
+
+.question:hover {
+    background-color: lightblue;
+    cursor: pointer;
+}
+
+.answer {
+    display: none;
+    padding: 10px;
+}
diff --git a/hackyourrepo-app/AmirHossein/index.html b/hackyourrepo-app/AmirHossein/index.html
@@ -23,6 +23,6 @@
 
 
 
-    <script src="./script.js"></script>
+    <script type="module" src="/util/script.js"></script>
   </body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,6 +23,6 @@ @@
-        <script src="./script.js"></script>
+        <script type="module" src="/util/script.js"></script>
       </body>
     </html>