samravan · n4cr · Dec 29, 2020 · Dec 19, 2020 · Dec 19, 2020 · Dec 20, 2020
diff --git a/Week2/homework/masoud/js-exercises/Ex1-johnWho.js b/Week2/homework/masoud/js-exercises/Ex1-johnWho.js
@@ -0,0 +1,17 @@
+const getAnonName = firstName => {
+  return new Promise((resolves, rejects) => {
+    if (firstName) {
+      resolves(`${firstName} S`);
+    } else {
+      rejects(new Error("You didn't pass in a first name!"));
+    }
+  })
+};
+
+const firstName = 'Mas';
+getAnonName(firstName).then(response => {
+  console.log(response);
+})
+  .catch(error => {
+    console.log(error);
+  })
diff --git a/Week2/homework/masoud/js-exercises/Ex2-isItBiggerThan10.js b/Week2/homework/masoud/js-exercises/Ex2-isItBiggerThan10.js
@@ -0,0 +1,18 @@
+const checkDoubleDigits = number => {
+  return new Promise((resolves, rejects) => {
+    if (number >= 10) {
+      resolves('The number is bigger than or equal 10!');
+    } else {
+      rejects(new Error('Error! The number is smaller than 10...'));
+    }
+  })
+};
+
+const number = 10;
+
+checkDoubleDigits(number).then(response => {
+  console.log(response);
+})
+  .catch(error => {
+    console.log(error);
+  })
diff --git a/Week2/homework/masoud/pokemon-app/index.html b/Week2/homework/masoud/pokemon-app/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>pokemon</title>
+</head>
+
+<body>
+
+  <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Week2/homework/masoud/pokemon-app/script.js b/Week2/homework/masoud/pokemon-app/script.js
@@ -0,0 +1,71 @@
+//Calling main function after window load
+window.onload = main;
+
+//Define main function
+function main() {
+  //Define button element
+  const btn = document.createElement('button');
+  btn.textContent = 'start';
+  btn.style.display = 'block';
+  document.body.appendChild(btn);
+
+  // Define select element
+  const select = document.createElement('select');
+  select.style.display = 'block';
+  document.body.appendChild(select);
+
+  //Define image
+  const img = document.createElement('img');
+
+  //When button is clicked
+  btn.addEventListener('click', () => {
+    const url = `https://pokeapi.co/api/v2/pokemon/?limit=20&offset=20`;//Define API URL
+    fetchData(url, select, img); // Get data from API and insert to DOM
+  });
+}
+
+// Add data to DOM
+function addPokemonToDOM(data, select, img) {
+
+  //Add list to select tag
+  data.results.forEach(element => {
+    const option = document.createElement('option');
+    option.value = element.name;
+    option.textContent = element.name;
+    select.appendChild(option);
+  });
+
+  //User selection 
+  select.addEventListener('input', () => {
+    data.results.forEach(element => {
+      if (select.value == element.name) {
+        const imgURL = element.url;
+        fetch(imgURL) // second API request to get image
+          .then(function (response) {
+            return response.json();
+          })
+          .then(function (myJson) {
+            img.src = myJson.sprites.back_default;
+            document.body.appendChild(img);
+          })
+          .catch(function (error) {
+            console.log(error);
+          });
+      }
+    })
+  })
+};
+
+//Get data from API by using fetch API
+function fetchData(url, select, img) {
+  fetch(url) // First getting data
+    .then(function (response) {
+      return response.json();
+    })
+    .then(function (myJson) {
+      addPokemonToDOM(myJson, select, img); // Add data to DOM
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+};
diff --git a/hackyourrepo-app/Masoud/week2/css/style.css b/hackyourrepo-app/Masoud/week2/css/style.css
@@ -0,0 +1,119 @@
+* {
+  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: 20%;
+  border-radius: 50%;
+}
+
+.items {
+  display: flex;
+ justify-content: space-between;
+ padding: 5px 15px;
+ margin: 5px;
+ align-items: center;
+}
+
+table{
+  border-spacing: 10px;
+}
+
+@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/week2/img/favicon.ico b/hackyourrepo-app/Masoud/week2/img/favicon.ico
diff --git a/hackyourrepo-app/Masoud/week2/img/hyf.png b/hackyourrepo-app/Masoud/week2/img/hyf.png
diff --git a/hackyourrepo-app/Masoud/week2/index.html b/hackyourrepo-app/Masoud/week2/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 src="js/script.js"></script>
+</body>
+
+</html>