Week 3 homework

Week1/exercise/w1/index.html

@@ -19,6 +19,12 @@ <h2>JS2 - exercise 1</h2>
       <div>
         <input type="text" id="imageInput" />
         <button id="btn-changeImage">Change Image</button>
+        <br>
+        <br>
+        <br>
+        <button id="to-change-header">Change header</button>
+        <br>
+        <br>
       </div>
 
       <div>
@@ -34,5 +40,5 @@ <h3>Todos:</h3>
     </div>
   </body>
 
-  <script src="index.js"></script>
+  <script src="js2.js"></script>
 </html>

Week1/exercise/w1/index.js

@@ -11,6 +11,13 @@ console.log('Hack your future Belgium!');
 
 // 1c: change the inner html of the header element to your name
 
+function changeHeader () { 
+    var header = document.querySelector('h1') 
+        header.innerHTML = "Fatma";  //innerHtml'e dikkat
+    console.log();
+} 
+var headerButton = document.getElementById("to-change-header");
+    headerButton.addEventListener('click', changeHeader);
 
 // ====================================== //
 
@@ -29,7 +36,15 @@ console.log('Hack your future Belgium!');
 
 // 2e: to change the image: assign the imageInputValue to the image src
 
+function changeImage () { 
+    var imageInputValue = document.querySelector("input").value;  
+    var imageToChange = document.querySelector("img");
+        imageToChange.src = imageInputValue;
+} 
 
+
+    var imageButton = document.getElementById("btn-changeImage");
+        imageButton.addEventListener('click', changeImage); 
 // ====================================== //
 
 
@@ -48,3 +63,17 @@ console.log('Hack your future Belgium!');
 // 3f: set created <li> element innerHtml to todoInput value
 
 // 3g: add <li> element to todoList
+
+
+function addTodo () {
+    var getTodoList = document.querySelector("#todoList")
+    var listInput = document.querySelector('#todoInput');
+    var newElement = document.createElement("li");
+    newElement.innerHTML = listInput.value;
+    getTodoList.appendChild(newElement);
+
+}
+
+
+var toDo = document.querySelector("#btn-addTodo");
+    toDo.addEventListener('click', addTodo);

Week1/homework/app.js

@@ -1,11 +1,113 @@
 'use strict';
-
 {
-  const bookTitles = [
-    // Replace with your own book titles
-    'harry_potter_chamber_secrets',
+  // Replace with your own book titles
+  var bookTitles = [
+    'universe_at_your_fingertips',
+    'emile_or_on_education',
+    'my_name_is_red',
+    'noise',
+    'centuries_of_childhood',
+    'not_for_profit',
+    'how_the_soldiers_play_gramophone ',
+    'the_ignorant_schoolmaster',
+    'school_blues',
+    'cleverlands',
   ];
+  var bookInformation = {
+    universe_at_your_fingertips: {
+      title: 'The Universe at Your Fingertips',
+      author: 'Christophe Galfard',
+      language: 'Turkish',
+    },
+    emile_or_on_education: {
+      title: 'Emile or on Education',
+      author: 'Jean-Jacques Rousseau',
+      language: 'English',
+    },
+    my_name_is_red: {
+      title: 'My Name is Red',
+      author: 'Orhan Pamuk',
+      language: 'English',
+    },
+    noise: {
+      title: 'Noise:A Human History',
+      author: 'David Hendy',
+      language: 'English',
+    },
+    centuries_of_childhood: {
+      title: 'Centuries of Childhood',
+      author: 'Philippe Aries',
+      language: 'English',
+    },
+    not_for_profit: {
+      title: 'Not for profit:Why Democracy Needs the Humanities',
+      author: 'Martha Nussbaum',
+      language: 'English',
+    },
+    how_the_soldiers_play_gramophone: {
+      title: 'How the Soldiers Play Gramophone',
+      author: 'Sasa Stanisic',
+      language: 'English',
+    },
+    the_ignorant_schoolmaster: {
+      title: 'The Ignorant Schoolmaster',
+      author: 'Jacques Rancière',
+      language: 'English',
+    },
+    school_blues: {
+      title: 'School Blues',
+      author: 'Daniel Pennac',
+      language: 'English',
+    },
+    cleverlands: {
+      title: 'Cleverlands: The Secrets Behind the Success of the World’s Education Superpowers',
+      author: 'Lucy Crehan',
+      language: 'English',
+    },
+  };
+  var bookCoverImages = {
+    universe_at_your_fingertips: './images/evren_avucunda.jpg',
+    emile_or_on_education: './images/emile_or_on_education.jpg',
+    my_name_is_red: './images/my_name_is_red.jpg',
+    noise: './images/noise.jpg',
+    centuries_of_childhood: './images/centuries_of_childhood.jpg',
+    not_for_profit: './images/not_for_profit.jpg',
+    how_the_soldiers_play_gramophone: './images/how_the_soldiers_play_gramophone.jpg',
+    the_ignorant_schoolmaster: './images/the_ignorant_schoolmaster.jpg',
+    school_blues: './images/school_blues.jpg',
+    cleverlands: './images/cleverland.jpg',
+  };
+
+  function book_info() {
+    const pageHeader = document.createElement('h1');
+    pageHeader.innerHTML = 'My Recent Books';
+    document.body.appendChild(pageHeader);
+
+    let newUl = document.createElement('ul');
+    document.body.appendChild(newUl);
+
+    for (let key in bookInformation) {
+      let newLi = document.createElement('li');
+      newLi.id = bookInformation[key];
+      newUl.appendChild(newLi);
+
+      let newImg = document.createElement('img');
+      newImg.setAttribute('src', bookCoverImages[key]);
+      newLi.appendChild(newImg);
+
+      let newH2 = document.createElement('h2');
+      newH2.innerHTML = bookInformation[key].title;
+      newLi.appendChild(newH2);
+
+      let newPara1 = document.createElement('p');
+      newPara1.innerHtml = 'The book is written by ' + bookInformation[key].author;
+      newLi.appendChild(newPara1);
+
+      let newPara2 = document.createElement('p');
+      newPara2.innerHTML = 'It is written in ' + bookInformation[key].language;
+      newLi.appendChild(newPara2);
+    }
+  }
 
-  // Replace with your own code
-  console.log(bookTitles);
+  book_info();
 }

Week1/homework/index.html

@@ -1 +1,14 @@
-<!-- replace this with your HTML content -->
+<!-- replace this with your HTML content -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <script type="text/javascript" src="app.js"></script>
+  </body>
+</html>

Week1/homework/style.css

@@ -1 +1,61 @@
-/* add your styling here */
+/* add your styling here */
+
+body {
+  padding: 0;
+  margin: 0;
+  background-color: #5885af;
+}
+
+h1 {
+  text-align: center;
+  padding: 1%;
+  background: #e7f2f8;
+}
+
+ul {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 4%;
+  align-items: start;
+  margin-bottom: 3%;
+  padding: 3%;
+}
+
+li {
+  background: #e7f2f8;
+  display: grid;
+  grid-template-columns: 50% 50%;
+  grid-template-rows: 40% 30% 30%;
+  height: 15em;
+
+  padding: 1em;
+  border-radius: 30px 30px 30px 30px;
+}
+
+li {
+  align-self: center;
+  border-radius: 10px;
+}
+
+h2,
+p {
+  text-align: center;
+  margin: auto;
+  color: #1e3d58;
+}
+img {
+  grid-row-start: 1;
+  grid-row-end: 3;
+  grid-column-start: 2;
+  grid-column-end: 3;
+
+  width: auto;
+  height: 12rem;
+
+  display: block;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  margin-left: 3rem;
+  margin-right: 3rem;
+}
+

Week2/homework/exercises/exercise.html

@@ -0,0 +1,10 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Exercises</title>
+  </head>
+  <body></body>
+  <script src="./exercise.js"></script>
+</html>

Week2/homework/exercises/exercise.js

@@ -0,0 +1,112 @@
+'use strict';
+{
+  /*Write a JavaScript function to get the first element of an array. 
+Passing a parameter 'n' will return the first 'n' elements of the array.*/
+
+  const myArray = [42, 51, 44, 2, 55, 3, 43, 70, 68, 93];
+  function getTheFirstElement(array, index) {
+    return myArray.splice(0, index);
+  }
+  console.log(getTheFirstElement(myArray, 1));
+  console.log(myArray);
+
+  /*Write a JavaScript program which accept a number as input and insert dashes (-) between each two even numbers. 
+For example if you accept 025468 the output should be 0-254-6-8.*/
+
+  const number = 4251442553489;
+  const str = number.toString();
+  const result = [str[0]];
+
+  function dashesBetweenEvenNumbers(num) {
+    for (let x = 1; x < str.length; x++) {
+      if (num[x - 1] % 2 === 0 && num[x] % 2 === 0) {
+        result.push('-', num[x]);
+      } else {
+        result.push(num[x]);
+      }
+    }
+    return result.join('');
+  }
+
+  console.log(dashesBetweenEvenNumbers(str));
+
+  //Write a JavaScript program to find the most frequent item of an array.
+
+  var arr = [3, 7, 7, 7, 2, 3, 7, 3, 7, 2, 4, 9];
+  var counts = {};
+  var compare = -1;
+  var keys = [];
+  var mostFrequent;
+  (function(array) {
+    for (var i = 0, len = array.length; i < len; i++) {
+      var word = array[i];
+
+      if (counts[word] === undefined) {
+        counts[word] = 1;
+      } else {
+        counts[word] = counts[word] + 1;
+      }
+      if (counts[word] > compare) {
+        compare = counts[word];
+        mostFrequent = arr[i];
+      }
+    }
+    return mostFrequent;
+  })(arr);
+
+  /* Write a JavaScript program which accept a string as input and swap the case of each character.
+  For example if you input 'The Quick Brown Fox' the output should be 'tHE qUICK bROWN fOX'.*/
+
+  var swapCase = function(letters) {
+    var newLetters = '';
+    for (var i = 0; i < letters.length; i++) {
+      if (letters[i] === letters[i].toLowerCase()) {
+        newLetters += letters[i].toUpperCase();
+      } else {
+        newLetters += letters[i].toLowerCase();
+      }
+    }
+    console.log(newLetters);
+    return newLetters;
+  };
+
+  var input = 'HackYourFuture';
+  var outPut = swapCase(input);
+
+  //JASON
+  //Write a JavaScript function to check if an object contains given property.
+
+  var person = {
+    firstName: 'John',
+    lastName: 'Doe',
+    age: 50,
+    eyeColor: 'blue',
+  };
+
+  var check = (obj, key) => {
+    if ('key' in obj) {
+      return 'It has property of ' + key + '.';
+    } else {
+      return 'It has not property of ' + key + '.';
+    }
+  };
+  console.log(check(person, 'car'));
+
+  //Write a JavaScript program to get the length (amount of keys) of a JavaScript object.
+
+  var lengthofObject = Object.keys(person).length;
+  console.log(lengthofObject);
+
+  // Write a JavaScript program to create a Clock. Console, every second :”14:37:42”,”14:37:43", “14:37:44”, "14:37:45"
+
+  function clock() {
+    const date = new Date();
+    const hour = date.getHours();
+    const minute = date.getMinutes();
+    const second = date.getSeconds();
+    const time = hour + ':' + minute + ':' + second;
+    console.log('It is ' + time);
+  }
+  setInterval(clock, 1000);
+  clock();
+}