diff --git a/Week1/exercise/w1/index.html b/Week1/exercise/w1/index.html index 5a88074db..b79c4037f 100644 --- a/Week1/exercise/w1/index.html +++ b/Week1/exercise/w1/index.html @@ -8,7 +8,8 @@ -

Hack your future

+

Hack your future

+

JS2 - exercise 1

@@ -35,4 +36,4 @@

Todos:

- + \ No newline at end of file diff --git a/Week1/exercise/w1/index.js b/Week1/exercise/w1/index.js index fcea7032e..33795afdf 100644 --- a/Week1/exercise/w1/index.js +++ b/Week1/exercise/w1/index.js @@ -3,9 +3,21 @@ console.log('Hack your future Belgium!'); // EXERCISE 1 // 1a: create a function called "changeHeader", put a console.log() inside this function to test +function changeHeader(){ + console.log('Testing this function'); +} // 1d: add an event listener to the "Change header" button // and call the "changeHeader" function when clicked ( you should see your console.log() ) +function changeHeader(){ + console.log("Hello Now the heading is Changed with Addeventlistner"); + + var header= document.querySelector('header1'); + document.getElementById("header1").innerHTML="Kelemu"; + header = document.getElementById("header1").innerHTML; +} + +document.getElementById("headerChenger").addEventListener('click',changeHeader); // 1b: inside this function: select the header element and assign that to a variable called "header" @@ -21,6 +33,8 @@ console.log('Hack your future Belgium!'); // 1b: add an event listener to the "Change image" button and call the "changeImage" function when clicked +document.getElementById('btn-changeImage'). addEventListener('click',changeImage); + // inside this function: // 2c: select the "imageInput" element and assign to a variable called "imageInputValue" @@ -28,7 +42,16 @@ console.log('Hack your future Belgium!'); // 2d: select the image element and assign to a variable called "imageToChange" // 2e: to change the image: assign the imageInputValue to the image src - +function changeImage(){ + console.log('Im in the changeImage function'); + var imageInputValue = document.getElementById('imageInput').value; + + var imageToChange = document.getElementById('imageToChange').src; + + imageToChange = imageInputValue + + document.getElementById('imageToChange').src=imageToChange; + } // ====================================== // @@ -37,8 +60,34 @@ console.log('Hack your future Belgium!'); // 3a: select "add todo" button & add click event listener to execute addTodo() function on click event +document.getElementById('btn-addTodo').addEventListener('click',addTodo); + // 3b: define addTodo() function, in this function: +function addTodo(){ + + //get all lists of elements + var alltodoList = document.getElementById('todoList'); + console.log(alltodoList); + + //Assigning imput data to the variable + var todoInputvalue = document.getElementById('todoInput').value; + console.log(todoInputvalue); + + //Creating li element + var newListElement = document.createElement("li"); + + //Assigning the new list value to the variable + var newListValue = document.createTextNode(todoInputvalue); + + //merg the new value to the created list + newListElement.append(newListValue); + + //Display the new element to the existing list + document.getElementById('todoList').appendChild(newListElement); + + } + // 3c: get todoList element // 3d: get todoInput element & log todoInput value @@ -47,4 +96,4 @@ console.log('Hack your future Belgium!'); // 3f: set created
  • element innerHtml to todoInput value -// 3g: add
  • element to todoList +// 3g: add
  • element to todoList \ No newline at end of file diff --git a/Week1/homework/app.js b/Week1/homework/app.js index a9b5f75d8..a02b9b61d 100644 --- a/Week1/homework/app.js +++ b/Week1/homework/app.js @@ -4,8 +4,119 @@ const bookTitles = [ // Replace with your own book titles 'harry_potter_chamber_secrets', + 'awaken_the_giant_within_me', + 'if_tomorrow_comes', + 'unlimited_power', + 'the_power_of_positive_thinking', + 'the_power_of_character_in_leadership', + 'the_girl_on_the_train', + 'man_and_the_sea', + 'fiker_eske_mekabir', + 'keadmas_basher', + 'yetekolefebet', ]; + function bookListCreater(bookListobj) { + const ul = document.createElement('ul'); + document.getElementById('bookListDiv').appendChild(ul); - // Replace with your own code - console.log(bookTitles); + for (let propobj in bookListobj) { + let li = document.createElement('li'); + ul.appendChild(li); + li.innerHTML = propobj; + //li.innerHTML = bookListobj[propobj]; + console.log(bookListobj[propobj]); + } + } + + // Creating object + let allBookInformation = { + harry_potter_chamber_secrets: { + bookInfo: { + title: bookTitles[0].toUpperCase(), + language: 'Eneglish', + author: 'J. K. Rowling', + }, + }, + awaken_the_giant_within_me: { + bookInfo: { + title: bookTitles[1].toUpperCase(), + language: 'Eneglish', + author: 'Tony Robbins', + }, + }, + + if_tomorrow_comes: { + bookInfo: { + title: bookTitles[2].toUpperCase(), + language: 'Eneglish', + author: 'Sidney Sheldon', + }, + }, + + if_tomorrow_comes: { + bookInfo: { + title: bookTitles[3].toUpperCase(), + language: 'Eneglish', + author: 'Tony Robbins', + }, + }, + + unlimited_power: { + bookInfo: { + title: bookTitles[4].toUpperCase(), + language: 'Eneglish', + author: 'Dr. Norman Vincent Peale', + }, + }, + + the_power_of_positive_thinking: { + bookInfo: { + title: bookTitles[5].toUpperCase(), + language: 'Eneglish', + author: 'Dr. Myles Munroe', + }, + }, + + the_girl_on_the_train: { + bookInfo: { + title: bookTitles[6].toUpperCase(), + language: 'Eneglish', + author: 'Paula Hawkins', + }, + }, + + man_and_the_sea: { + bookInfo: { + title: bookTitles[7].toUpperCase(), + language: 'Eneglish', + author: 'Ernest Hemingway', + }, + }, + + fiker_eske_mekabir: { + bookInfo: { + title: bookTitles[8].toUpperCase(), + language: 'Amharic', + author: 'Dr. Haddis Alemayehu', + }, + }, + + keadmas_basher: { + bookInfo: { + title: bookTitles[9].toUpperCase(), + language: 'Amharic', + author: 'Be alu Girma', + }, + }, + + yetekolefebet: { + bookInfo: { + title: bookTitles[10].toUpperCase(), + language: 'Amharic', + author: 'Dr Mihret Debebe ', + }, + }, + }; + console.log(allBookInformation); + bookListCreater(allBookInformation); } diff --git a/Week1/homework/homework/app.js b/Week1/homework/homework/app.js new file mode 100644 index 000000000..341880e8e --- /dev/null +++ b/Week1/homework/homework/app.js @@ -0,0 +1,132 @@ +'use strict'; + +{ + const bookTitles = [ + 'harry_potter_chamber_secrets', + 'awaken_the_giant_within_me', + 'if_tomorrow_comes', + 'unlimited_power', + 'the_power_of_positive_thinking', + 'the_power_of_character_in_leadership', + 'the_girl_on_the_train', + 'man_and_the_sea', + 'fiker_eske_mekabir', + 'oromay', + 'yetekolefebet', + ]; + // creating HTML elements + function bookListCreater() { + const bookListBox = document.createElement('div'); + document.getElementById('pagebody').appendChild(bookListBox); + + const headingTitle = document.createElement('h1'); + const headingText = document.createTextNode('My Favorite Motivational Books'); + + bookListBox.appendChild(headingTitle); + headingTitle.appendChild(headingText); + + const ul = document.createElement('ul'); + bookListBox.appendChild(ul); + // creating ul list + for (let i = 0; i < bookTitles.length; i++) { + // creat list Append and Display on DOM + + const li = document.createElement('li'); + ul.appendChild(li); + + const titleli = document.createElement('titleli'); + titleli.innerHTML = bookTitles[i].title; + li.appendChild(titleli); + + const img = document.createElement('img'); + img.setAttribute('src', bookTitles[i].imgLink); + li.appendChild(img); + + const languageli = document.createElement('languageli'); + languageli.innerHTML = bookTitles[i].language; + li.appendChild(languageli); + + const authorli = document.createElement('authorli'); + authorli.innerHTML = bookTitles[i].author; + li.appendChild(authorli); + } + } + // Creating object BookInformation with constructor + + function BookInformation(bookIdFromArry, language, author, imgLink) { + this.BookInformation = bookIdFromArry; + this.title = bookIdFromArry.toUpperCase(); + this.language = language; + this.author = author; + this.imgLink = imgLink; + } + + bookTitles[0] = new BookInformation( + bookTitles[0], + 'English', + 'J.K.Rowling', + 'https://is3-ssl.mzstatic.com/image/thumb/Video118/v4/a5/c0/fb/a5c0fbaa-2fb5-fefa-0e2e-552207b0376f/pr_source.lsr/268x0w.png', + ); + bookTitles[1] = new BookInformation( + bookTitles[1], + 'English', + 'Tony Robbins', + 'https://i1.wp.com/www.samuelthomasdavies.com/wp-content/uploads/2015/08/Awaken-The-Giant-Within.jpg?resize=198%2C300&ssl=1', + ); + bookTitles[2] = new BookInformation( + bookTitles[2], + 'English', + 'Sidney Sheldon', + 'https://images-na.ssl-images-amazon.com/images/I/314zId3Rr5L._AC_UL320_SR216,320_.jpg', + ); + bookTitles[3] = new BookInformation( + bookTitles[3], + 'English', + 'Tony Robbins', + 'https://images-na.ssl-images-amazon.com/images/I/51otVRzsbcL._SX321_BO1,204,203,200_.jpg', + ); + bookTitles[4] = new BookInformation( + bookTitles[4], + 'English', + 'Dr. Norman Vincent Peale', + 'https://images-na.ssl-images-amazon.com/images/I/515N6BJGE4L._SX304_BO1,204,203,200_.jpg', + ); + bookTitles[5] = new BookInformation( + bookTitles[5], + 'English', + 'Dr. Myles Munroe', + 'https://images-na.ssl-images-amazon.com/images/I/51nES%2Bb7QvL._SX331_BO1,204,203,200_.jpg', + ); + bookTitles[6] = new BookInformation( + bookTitles[6], + 'English', + 'Paula Hawkins', + 'https://images-na.ssl-images-amazon.com/images/I/51jZY1HSgVL._SX258_BO1,204,203,200_.jpg', + ); + bookTitles[7] = new BookInformation( + bookTitles[7], + 'English', + 'Ernest Hemingway', + 'https://images-na.ssl-images-amazon.com/images/I/41V91pPjbyL._SX331_BO1,204,203,200_.jpg', + ); + bookTitles[8] = new BookInformation( + bookTitles[8], + 'Amharic', + 'Dr. Haddis Alemayehu', + 'https://lh3.googleusercontent.com/4wxGLRmf0SJ8m0XCiWpSND1h2VgHW7tSShsziIn3EWd5WZWNZVNp_Uq_skMdBd1CcQ', + ); + bookTitles[9] = new BookInformation( + bookTitles[9], + 'Amharic', + 'Bealu girma', + 'https://upload.wikimedia.org/wikipedia/en/f/fd/Oromai_cover.png', + ); + bookTitles[10] = new BookInformation( + bookTitles[10], + 'Amharic', + 'Dr Mihret Debebe', + ' https://cdn.shopify.com/s/files/1/0258/4531/products/yetekolefebet_large.jpg?v=1533244500', + ); + // calling function + bookListCreater(); +} diff --git a/Week1/homework/homework/index.html b/Week1/homework/homework/index.html new file mode 100644 index 000000000..3350d191b --- /dev/null +++ b/Week1/homework/homework/index.html @@ -0,0 +1,12 @@ + + + + JS-Home Work-1 + + + + +
    + + + diff --git a/Week1/homework/homework/style.css b/Week1/homework/homework/style.css new file mode 100644 index 000000000..ca08f9f36 --- /dev/null +++ b/Week1/homework/homework/style.css @@ -0,0 +1,34 @@ +body { + margin-left: 10%; + margin-right: 10%; + background-color: whitesmoke; + height: 100%; +} +h1 { + text-align: center; +} +ul { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + align-items: center; +} +li { + display: block; + text-align: center; + box-shadow: inset 0 0 10px #000000; +} +titleli { + align-items: flex-start; + color: brown; + font-size: 18px; +} +languageli { + display: block; +} +img { + display: flex; + align-self: center; + width: 300px; + height: 400px; +} diff --git a/Week1/homework/index.html b/Week1/homework/index.html index b22147cd1..b239624bd 100644 --- a/Week1/homework/index.html +++ b/Week1/homework/index.html @@ -1 +1,11 @@ - \ No newline at end of file + + + + JS-Home Work-1 + + + +
    + + + diff --git a/Week2/Class Ex/classex.js b/Week2/Class Ex/classex.js new file mode 100644 index 000000000..6a7922a1e --- /dev/null +++ b/Week2/Class Ex/classex.js @@ -0,0 +1,62 @@ +//Quesion Number #1 +//creating arrey +const belgiumHistoricalTimeLine = [1830, 1914, 1920, 1930, 1940, 1944, 1950]; +//function return n number of data +const belgiumProfile = n => console.log(belgiumHistoricalTimeLine.slice(0, n)); + +belgiumProfile(); + +//Quesion Number #2 + +//function convert given number to string and digit + +function numberFilter(num) { + const newNumstring = num.toString().split(''); + const newNumDigits = newNumstring.map(Number); + + const numOutPutDigits = []; + // a loop check the number is even or odd + for (let i = 0; i < newNumDigits.length; i++) { + if (newNumDigits[i] % 2 === 1 && newNumDigits[i + 1] / 2 === 1) { + numOutPutDigits.push(newNumDigits[i]); + numOutPutDigits.push('-'); + } else { + numOutPutDigits.push(newNumDigits[i]); + } + } + + return numOutPutDigits; +} +//numberFilter(userNumber); + +//Quesion Number #3 +const arr1 = [ + 'Dell', + 'Huawei', + 'HP', + 'Apple', + 'Huawei', + 'Asus', + 'Dell', + 'Asus', + 'Asus', + 'Apple', + 'Dell', + 'Dell', +]; + +let numFrequency = 1; +let count = 0; +let mostFrequentlyUsed; +arr1.forEach(function(val, i) { + arr1.forEach(function(val, j = i) { + if (arr1[i] == arr1[j]) count++; + if (numFrequency < count) { + numFrequency = count; + mostFrequentlyUsed = arr1[i]; + } + }); + count = 0; +}); +console.log('mostFrequentlyUsed:' + mostFrequentlyUsed + '-' + numFrequency); +//Quesion Number #4 diff --git a/Week2/Class Ex/index.html b/Week2/Class Ex/index.html new file mode 100644 index 000000000..560d910fb --- /dev/null +++ b/Week2/Class Ex/index.html @@ -0,0 +1,11 @@ + + + + JS-Class Work-2 + + + +
    + + + diff --git a/Week2/homework/homework-Solution/index-map-filter-and-maartjes-work.html b/Week2/homework/homework-Solution/index-map-filter-and-maartjes-work.html new file mode 100644 index 000000000..c6f3031a3 --- /dev/null +++ b/Week2/homework/homework-Solution/index-map-filter-and-maartjes-work.html @@ -0,0 +1,51 @@ + + + + + + + JS-Home-Work-2 + + + + +

    1.1 Map and Filter JS-Home-Work-1 Out put on console

    +

    1.2 Maartjes JS-Home-Work-2 Out put on console and DOM

    +

    Maartjies Task

    + +
    + +
    + +
    +
    + +
    +
    + +
    +
    + + + + + + + + + + \ No newline at end of file diff --git a/Week2/homework/homework-Solution/maartjes-work.js b/Week2/homework/homework-Solution/maartjes-work.js new file mode 100644 index 000000000..0ee71e779 --- /dev/null +++ b/Week2/homework/homework-Solution/maartjes-work.js @@ -0,0 +1,169 @@ +'use strict'; +{ + const monday = [ + { + name: 'Write a summary HTML/CSS', + duration: 180, + }, + { + name: 'Some web development', + duration: 120, + }, + { + name: 'Fix homework for class10', + duration: 20, + }, + { + name: 'Talk to a lot of people', + duration: 200, + }, + ]; + + const tuesday = [ + { + name: 'Keep writing summary', + duration: 240, + }, + { + name: 'Some more web development', + duration: 180, + }, + { + name: 'Staring out the window', + duration: 10, + }, + { + name: 'Talk to a lot of people', + duration: 200, + }, + { + name: 'Look at application assignments new students', + duration: 40, + }, + ]; + + //********************************************************************************************************/ + //concatenating the two object array in to one array and the initial maartjes Hourly Rate + const maartjesTasks = monday.concat(tuesday); + const maartjesHourlyRate = 0; + //**********************************User out put before Filtered ********************************************* */ + + function maartjisTask(maartjesTasks) { + let body = document.getElementById('body'); + let header = document.createElement('h1'); + let textHeader = document.createTextNode('Lists of Maartjies Task befor Filtered '); + document.innerHTML = document.getElementById('body').appendChild(textHeader); + let ul = document.createElement('ul'); + body.appendChild(ul); + + for (let val of maartjesTasks) { + let nameli = document.createElement('li'); + + let listNod1 = document.createTextNode('Task:' + val.name); + + ul.appendChild(nameli); + document.innerHTML = nameli.appendChild(listNod1); + + let durationli = document.createElement('li'); + let listNod2 = document.createTextNode('Duration:' + val.duration); + + nameli.appendChild(durationli); + document.innerHTML = durationli.appendChild(listNod2); + } + } + // maartjisTask(maartjesTasks); + + //**********************************User out put After Filtered ********************************************* */ + function maartjisFilteredTask(earnings) { + let body = document.getElementById('body'); + let header = document.createElement('h1'); + let textHeader = document.createTextNode('Lists of Maartjies Task After Filtered '); + document.innerHTML = document.getElementById('body').appendChild(textHeader); + let ul = document.createElement('ul'); + body.appendChild(ul); + + for (let val of earnings) { + let nameli = document.createElement('li'); + + let listNod1 = document.createTextNode('Task:' + val.name); + + ul.appendChild(nameli); + document.innerHTML = nameli.appendChild(listNod1); + + let durationli = document.createElement('li'); + let listNod2 = document.createTextNode('Duration:' + val.duration); + + nameli.appendChild(durationli); + document.innerHTML = durationli.appendChild(listNod2); + } + } + + //**********************************User out put Total ********************************************* */ + function maartjiesTotalEarn(totalEarnOutPut) { + let totalEarn = document.createElement('totalEarn'); + let totalEarnText = document.createTextNode( + '*************' + 'Total Earn:' + totalEarnOutPut + '*************', + ); + body.appendChild(totalEarn); + document.innerHTML = totalEarn.appendChild(totalEarnText); + } + + // converting minits to hours and filtering tasks less than 1hr. + + const earnings = maartjesTasks.filter(tasks => { + let minitHoure = Math.floor(tasks.duration / 60); + let minitRate = tasks.duration % 60; + let maartjesHourlyRate = minitHoure + minitRate / 60; + tasks.duration = maartjesHourlyRate; + return maartjesHourlyRate > 1; + }); + + console.log('After filter and converted to minit: '); + console.log(earnings); + + //*******Transferring a filtered array to the new array computeEarnings array *********** + + const computeEarnings = earnings.map(tasks => { + return (tasks.duration *= 20); + }); + + //**********************Calculate maartjes Total Earn**********************************// + + const maartjesTotalEarn = computeEarnings.reduce((computeEarnings, totalEarnung = 0) => { + totalEarnung += computeEarnings; + return totalEarnung; + }); + + //**********************converted to currency format and rounded to 2 decimal place **********************************// + const maartjesTotalEarnRounded = afterRouned => { + afterRouned = new Intl.NumberFormat('BELGIUM', { style: 'currency', currency: 'EUR' }).format( + afterRouned.toFixed(2), + ); + + console.log('*******************************************************************************'); + console.log('Maartjes total Earnung ' + afterRouned); + console.log('*******************************************************************************'); + return afterRouned; + }; + + document.getElementById('button1').addEventListener('click', function() { + maartjisTask(maartjesTasks); + }); + + document.getElementById('button2').addEventListener('click', function() { + maartjisFilteredTask(earnings); + }); + let totalEarnOutPut = maartjesTotalEarnRounded(maartjesTotalEarn); + document.getElementById('button3').addEventListener('click', function() { + maartjiesTotalEarn(totalEarnOutPut); + }); + //maartjisFilteredTask(earnings); + //maartjiesTotalEarn(totalEarnOutPut); + + //Do not change or remove anything below this line + // module.exports = { + // maartjesTasks, + // maartjesHourlyRate, + // computeEarnings, + // }; +} diff --git a/Week2/homework/homework-Solution/map-filter.js b/Week2/homework/homework-Solution/map-filter.js new file mode 100644 index 000000000..713666fbd --- /dev/null +++ b/Week2/homework/homework-Solution/map-filter.js @@ -0,0 +1,27 @@ +'use strict'; +{ + //Question #1 + + // Function filter odd Numbers and makes it double + const doubleOddNumbers = numbers => { + if (numbers % 2 !== 0) { + return numbers * 2; + } + }; + + const myNumbers = [1, 2, 3, 4]; + // filter odd number from myNumbers + const myOddNumbers = myNumbers.filter(doubleOddNumbers); + + // creat doubled odd number from myOddNumbers + const myNewDoubledOdd = myOddNumbers.map(doubleOddNumbers); + + console.log('Filtered Odd Number:' + myOddNumbers); + console.log('Filtered Odd Number after doubled:' + myNewDoubledOdd); + + //Do not change or remove anything below this line + // module.exports = { + // myNumbers, + // doubleOddNumbers, + // }; +} diff --git a/Week3/homework/step2-1.js b/Week3/homework/step2-1.js index d5699882c..ba7f02bf5 100644 --- a/Week3/homework/step2-1.js +++ b/Week3/homework/step2-1.js @@ -1,8 +1,8 @@ 'use strict'; function foo(func) { - // What to do here? - // Replace this comment and the next line with your code + func(); + console.log('Graph'); console.log(func); } diff --git a/Week3/homework/step2-2.js b/Week3/homework/step2-2.js index dcd135040..b6c0b311e 100644 --- a/Week3/homework/step2-2.js +++ b/Week3/homework/step2-2.js @@ -2,22 +2,38 @@ function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) { const numbers = []; + for (let index = startIndex; index <= stopIndex; index++) { + numbers[index] = startIndex++; + } + + for (let valueNum of numbers) { + //console.log(valueNum); + + if (valueNum % 3 === 0) { + threeCallback(valueNum); + } + if (valueNum % 5 === 0) { + fiveCallback(valueNum); + } else if (valueNum % 3 === 0 && valueNum / 5 === 0) { + threeCallback(valueNum); + fiveCallback(valueNum); + } + } - // Replace this comment and the next line with your code console.log(startIndex, stopIndex, threeCallback, fiveCallback, numbers); } function sayThree(number) { - // Replace this comment and the next line with your code + console.log('this is inside sayThree'); console.log(number); } function sayFive(number) { - // Replace this comment and the next line with your code - console.log(number); + console.log('this is inside sayFive'); + console.log('sayFive' + number); } threeFive(10, 15, sayThree, sayFive); -// Do not change or remove anything below this line -module.exports = threeFive; +// // Do not change or remove anything below this line +//module.exports = threeFive; diff --git a/Week3/homework/step2-3.js b/Week3/homework/step2-3.js index 00845c5eb..30d8f9eaa 100644 --- a/Week3/homework/step2-3.js +++ b/Week3/homework/step2-3.js @@ -4,8 +4,9 @@ function repeatStringNumTimesWithFor(str, num) { // eslint-disable-next-line prefer-const let result = ''; - - // Replace this comment and the next line with your code + for (let counter = 0; counter < num; counter++) { + result += str; + } console.log(str, num, result); return result; @@ -17,8 +18,11 @@ console.log('for', repeatStringNumTimesWithFor('abc', 3)); function repeatStringNumTimesWithWhile(str, num) { // eslint-disable-next-line prefer-const let result = ''; - - // Replace this comment and the next line with your code + let counter = 0; + while (counter < num) { + result += str; + counter++; + } console.log(str, num, result); return result; @@ -30,8 +34,11 @@ console.log('while', repeatStringNumTimesWithWhile('abc', 3)); function repeatStringNumTimesWithDoWhile(str, num) { // eslint-disable-next-line prefer-const let result = ''; - - // Replace this comment and the next line with your code + let counter = 0; + do { + result += str; + counter++; + } while (counter < num); console.log(str, num, result); return result; @@ -40,8 +47,8 @@ function repeatStringNumTimesWithDoWhile(str, num) { console.log('do-while', repeatStringNumTimesWithDoWhile('abc', 3)); // Do not change or remove anything below this line -module.exports = { - repeatStringNumTimesWithFor, - repeatStringNumTimesWithWhile, - repeatStringNumTimesWithDoWhile, -}; +// module.exports = { +// repeatStringNumTimesWithFor, +// repeatStringNumTimesWithWhile, +// repeatStringNumTimesWithDoWhile, +// }; diff --git a/Week3/homework/step2-4.js b/Week3/homework/step2-4.js index b11b1dcb6..f83793f86 100644 --- a/Week3/homework/step2-4.js +++ b/Week3/homework/step2-4.js @@ -1,10 +1,12 @@ 'use strict'; -function Dog() { - // add your code here +function Dog(name, color) { + this.name = name; + this.color = color; } - -const hound = new Dog(); +Dog.prototype.numLegs = 4; +const hound = new Dog('Boby', 'Whit'); +console.log(hound); // Do not change or remove anything below this line module.exports = hound; diff --git a/Week3/homework/step2-5.js b/Week3/homework/step2-5.js index cbb54fa1d..1795f4942 100644 --- a/Week3/homework/step2-5.js +++ b/Week3/homework/step2-5.js @@ -4,7 +4,14 @@ function multiplyAll(arr) { // eslint-disable-next-line let product = 1; - // Replace this comment and the next line with your code + for (let i = 0; i < arr.length; i++) { + for (let j = 0; j < arr[i].length; j++) { + let totalProduct = (function() { + product *= arr[i][j]; + })(); + } + } + console.log(arr, product); return product; @@ -14,4 +21,4 @@ const result = multiplyAll([[1, 2], [3, 4], [5, 6]]); console.log(result); // 720 // Do not change or remove anything below this line -module.exports = multiplyAll; +//module.exports = multiplyAll; diff --git a/Week3/homework/step2-6.js b/Week3/homework/step2-6.js index ffe95b9f7..805908657 100644 --- a/Week3/homework/step2-6.js +++ b/Week3/homework/step2-6.js @@ -4,12 +4,15 @@ const arr2d = [[1, 2], [3, 4], [5, 6]]; const arr3d = [[[1, 2], [3, 4]], [[5, 6], [7, 8]]]; function flattenArray2d(arr) { - // Replace this comment and the next line with your code + arr = [].concat(...arr); console.log(arr); } function flattenArray3d(arr) { - // Replace this comment and the next line with your code + //the 1st concatenation reduce 3 dimensional to 2 dimensional + arr = [].concat(...arr); + //the 2nd concatenation reduce to 1 dimensional + arr = [].concat(...arr); console.log(arr); } @@ -17,7 +20,7 @@ console.log(flattenArray2d(arr2d)); // -> [1, 2, 3, 4, 5, 6] console.log(flattenArray3d(arr3d)); // -> [1, 2, 3, 4, 5, 6, 7, 8] // Do not change or remove anything below this line -module.exports = { - flattenArray2d, - flattenArray3d, -}; +// module.exports = { +// flattenArray2d, +// flattenArray3d, +// }; diff --git a/Week3/homework/step2-7.js b/Week3/homework/step2-7.js index 3e72e8551..168cbdf9e 100644 --- a/Week3/homework/step2-7.js +++ b/Week3/homework/step2-7.js @@ -21,3 +21,9 @@ f2(y); console.log(y); // Add your explanation as a comment here +/*in the firs function x is the number and primitive +value and the primitive values are sends the value by copy the original value, so in the + function we are changed the copy not the the orginal*/ + +/*but in the second function we send the value by referance the referance are creat the pointer addres in Heap, +the change in the function also reflect in the orginal value.*/ diff --git a/Week3/homework/step3-bonus.js b/Week3/homework/step3-bonus.js index 917091d61..181fabece 100644 --- a/Week3/homework/step3-bonus.js +++ b/Week3/homework/step3-bonus.js @@ -4,6 +4,7 @@ const values = ['a', 'b', 'c', 'd', 'a', 'e', 'f', 'c']; function makeUnique(arr) { // Replace this comment and the next line with your code + arr = [...new Set(arr)]; console.log(arr); } @@ -11,4 +12,4 @@ const uniqueValues = makeUnique(values); console.log(uniqueValues); // Do not change or remove anything below this line -module.exports = makeUnique; +//module.exports = makeUnique; diff --git a/Week3/homework/step3.js b/Week3/homework/step3.js index 292724bf4..96f4b06c7 100644 --- a/Week3/homework/step3.js +++ b/Week3/homework/step3.js @@ -1,14 +1,18 @@ 'use strict'; function createBase(base) { - // Replace this comment and the next line with your code + function addSix(newNum) { + return base + newNum; + } + console.log(base); + return addSix; } const addSix = createBase(6); - +console.log(addSix); console.log(addSix(10)); // returns 16 console.log(addSix(21)); // returns 27 // Do not change or remove anything below this line -module.exports = createBase; +//module.exports = createBase; diff --git a/exercise/w1 Solved/index.html b/exercise/w1 Solved/index.html new file mode 100644 index 000000000..b79c4037f --- /dev/null +++ b/exercise/w1 Solved/index.html @@ -0,0 +1,39 @@ + + + + + + + Document + + + +

    Hack your future

    + +

    JS2 - exercise 1

    + +
    +
    + lights +
    + +
    + + +
    + +
    +

    Todos:

    +
      +
    • Hack the future
      • +
    • Learn javascript
      • +
    • Take over the world
      • +
    + + +
    +
    + + + + \ No newline at end of file diff --git a/exercise/w1 Solved/index.js b/exercise/w1 Solved/index.js new file mode 100644 index 000000000..33795afdf --- /dev/null +++ b/exercise/w1 Solved/index.js @@ -0,0 +1,99 @@ +console.log('Hack your future Belgium!'); + +// EXERCISE 1 + +// 1a: create a function called "changeHeader", put a console.log() inside this function to test +function changeHeader(){ + console.log('Testing this function'); +} + +// 1d: add an event listener to the "Change header" button +// and call the "changeHeader" function when clicked ( you should see your console.log() ) +function changeHeader(){ + console.log("Hello Now the heading is Changed with Addeventlistner"); + + var header= document.querySelector('header1'); + document.getElementById("header1").innerHTML="Kelemu"; + header = document.getElementById("header1").innerHTML; +} + +document.getElementById("headerChenger").addEventListener('click',changeHeader); + +// 1b: inside this function: select the header element and assign that to a variable called "header" + +// 1c: change the inner html of the header element to your name + + +// ====================================== // + + +// EXERCISE 2 + +// 2a: create a function called "changeImage", put a console.log() inside this function to test + +// 1b: add an event listener to the "Change image" button and call the "changeImage" function when clicked + +document.getElementById('btn-changeImage'). addEventListener('click',changeImage); + +// inside this function: + +// 2c: select the "imageInput" element and assign to a variable called "imageInputValue" + +// 2d: select the image element and assign to a variable called "imageToChange" + +// 2e: to change the image: assign the imageInputValue to the image src +function changeImage(){ + console.log('Im in the changeImage function'); + var imageInputValue = document.getElementById('imageInput').value; + + var imageToChange = document.getElementById('imageToChange').src; + + imageToChange = imageInputValue + + document.getElementById('imageToChange').src=imageToChange; + } + +// ====================================== // + + +// Exercise 3: + +// 3a: select "add todo" button & add click event listener to execute addTodo() function on click event + +document.getElementById('btn-addTodo').addEventListener('click',addTodo); + +// 3b: define addTodo() function, in this function: + +function addTodo(){ + + //get all lists of elements + var alltodoList = document.getElementById('todoList'); + console.log(alltodoList); + + //Assigning imput data to the variable + var todoInputvalue = document.getElementById('todoInput').value; + console.log(todoInputvalue); + + //Creating li element + var newListElement = document.createElement("li"); + + //Assigning the new list value to the variable + var newListValue = document.createTextNode(todoInputvalue); + + //merg the new value to the created list + newListElement.append(newListValue); + + //Display the new element to the existing list + document.getElementById('todoList').appendChild(newListElement); + + } + +// 3c: get todoList element + +// 3d: get todoInput element & log todoInput value + +// 3e: create a
  • element + +// 3f: set created
  • element innerHtml to todoInput value + +// 3g: add
  • element to todoList \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 000000000..b79c4037f --- /dev/null +++ b/index.html @@ -0,0 +1,39 @@ + + + + + + + Document + + + +

    Hack your future

    + +

    JS2 - exercise 1

    + +
    +
    + lights +
    + +
    + + +
    + +
    +

    Todos:

    +
      +
    • Hack the future
      • +
    • Learn javascript
      • +
    • Take over the world
      • +
    + + +
    +
    + + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 000000000..33795afdf --- /dev/null +++ b/index.js @@ -0,0 +1,99 @@ +console.log('Hack your future Belgium!'); + +// EXERCISE 1 + +// 1a: create a function called "changeHeader", put a console.log() inside this function to test +function changeHeader(){ + console.log('Testing this function'); +} + +// 1d: add an event listener to the "Change header" button +// and call the "changeHeader" function when clicked ( you should see your console.log() ) +function changeHeader(){ + console.log("Hello Now the heading is Changed with Addeventlistner"); + + var header= document.querySelector('header1'); + document.getElementById("header1").innerHTML="Kelemu"; + header = document.getElementById("header1").innerHTML; +} + +document.getElementById("headerChenger").addEventListener('click',changeHeader); + +// 1b: inside this function: select the header element and assign that to a variable called "header" + +// 1c: change the inner html of the header element to your name + + +// ====================================== // + + +// EXERCISE 2 + +// 2a: create a function called "changeImage", put a console.log() inside this function to test + +// 1b: add an event listener to the "Change image" button and call the "changeImage" function when clicked + +document.getElementById('btn-changeImage'). addEventListener('click',changeImage); + +// inside this function: + +// 2c: select the "imageInput" element and assign to a variable called "imageInputValue" + +// 2d: select the image element and assign to a variable called "imageToChange" + +// 2e: to change the image: assign the imageInputValue to the image src +function changeImage(){ + console.log('Im in the changeImage function'); + var imageInputValue = document.getElementById('imageInput').value; + + var imageToChange = document.getElementById('imageToChange').src; + + imageToChange = imageInputValue + + document.getElementById('imageToChange').src=imageToChange; + } + +// ====================================== // + + +// Exercise 3: + +// 3a: select "add todo" button & add click event listener to execute addTodo() function on click event + +document.getElementById('btn-addTodo').addEventListener('click',addTodo); + +// 3b: define addTodo() function, in this function: + +function addTodo(){ + + //get all lists of elements + var alltodoList = document.getElementById('todoList'); + console.log(alltodoList); + + //Assigning imput data to the variable + var todoInputvalue = document.getElementById('todoInput').value; + console.log(todoInputvalue); + + //Creating li element + var newListElement = document.createElement("li"); + + //Assigning the new list value to the variable + var newListValue = document.createTextNode(todoInputvalue); + + //merg the new value to the created list + newListElement.append(newListValue); + + //Display the new element to the existing list + document.getElementById('todoList').appendChild(newListElement); + + } + +// 3c: get todoList element + +// 3d: get todoInput element & log todoInput value + +// 3e: create a
  • element + +// 3f: set created
  • element innerHtml to todoInput value + +// 3g: add
  • element to todoList \ No newline at end of file