diff --git a/Week-1/Homework/mandatory/1-writers.js b/Week-1/Homework/mandatory/1-writers.js index 82acf6f..840bbee 100644 --- a/Week-1/Homework/mandatory/1-writers.js +++ b/Week-1/Homework/mandatory/1-writers.js @@ -42,3 +42,9 @@ let writers = [ /* If you want an extra challenge, only `console.log()` the writers that are alive. */ +for(let objs=0; objs { + console.log();})*/ + console.log(recipes.title) + console.log(`Serves: ${recipes.Serves}`) + console.log("Ingredients:") + console.log(recipes.Ingredients + "\n") diff --git a/Week-1/Homework/projects/2-reading-list.js b/Week-1/Homework/projects/2-reading-list.js index 939e3e2..d2a5f91 100644 --- a/Week-1/Homework/projects/2-reading-list.js +++ b/Week-1/Homework/projects/2-reading-list.js @@ -25,4 +25,23 @@ If you read it, log a string like 'You already read "The Hobbit" by J.R.R. Tolki **/ -let books = []; +let books = [ + { title:"Atomic Habits", + author:"James CLean", + alreadyRead: true}, + { + title: "12 Rules of Life", + author: "Jordan B Peterson", + alreadyRead: false}, + { + title: "Philosophy Who needs it", + author: "Ayn Rand", + alreadyRead: true + }]; +for (let i = 0; i= 2.40 && this.insertedAmount< 3.00){ + return 'Please take your cappuccino' + } + else if(this.insertedAmount >= 1.50 && this.insertedAmount < 2.40){ + return 'Please take your blackCoffee' + } + else if(this.insertedAmount >= 4.00){ + return 'Please take your flatWhite' + } + else if(this.insertedAmount >3.00 && this.insertedAmount < 4.00){ + return 'Sorry you don\'t have enough money for a flatWhite' + } } }; @@ -38,6 +51,6 @@ console.log(`Expected result: 'Please take your blackCoffee'. Actual result: ${c coffeeMachine.insertMoney(4.00); console.log(`Expected result: 'Please take your flatWhite'. Actual result: ${coffeeMachine.getCoffee('flatWhite')}`); -coffeeMachine.insertMoney(2.40); +coffeeMachine.insertMoney(3.40); console.log(`Expected result: 'Sorry you don't have enough money for a flatWhite'. Actual result: ${coffeeMachine.getCoffee('flatWhite')}`); diff --git a/Week-1/InClass/E-arrays-of-objects/exercise-1.js b/Week-1/InClass/E-arrays-of-objects/exercise-1.js index 8d39a81..b51757c 100644 --- a/Week-1/InClass/E-arrays-of-objects/exercise-1.js +++ b/Week-1/InClass/E-arrays-of-objects/exercise-1.js @@ -25,11 +25,11 @@ WRITE YOUR CODE BELOW */ -var persons = // Complete here +var persons = [person1,person2,person3]// Complete here -var personNames = // Complete here +var personNames = persons.map(names => names.name )// Complete here -var personsYoungerThan28YearsOld = // Complete here +var personsYoungerThan28YearsOld = persons.filter(ages=>ages.age < 28 )// Complete here /* diff --git a/Week-1/InClass/E-arrays-of-objects/exercise-2.js b/Week-1/InClass/E-arrays-of-objects/exercise-2.js index c2259dd..8988272 100644 --- a/Week-1/InClass/E-arrays-of-objects/exercise-2.js +++ b/Week-1/InClass/E-arrays-of-objects/exercise-2.js @@ -40,11 +40,11 @@ WRITE YOUR CODE BELOW */ -let destinationNamesWithin500Kms = // Complete here +let destinationNamesWithin500Kms = travelDestinations.filter(distance => distance.distanceKms <= 500).map(names=>names.destinationName) // Complete here -let destinationNameReachableByFerry = // Complete here +let destinationNameReachableByFerry = travelDestinations.filter(transport=>transport.transportations.includes("ferry")).map(names => names.destinationName) // Complete here -let destinationNamesMoreThan300KmsAwayByTrain = // Complete here (PRINT THE RESULT IN THE CONSOLE USING FOREACH) +let destinationNamesMoreThan300KmsAwayByTrain = travelDestinations.filter(distance => distance.distanceKms >= 300 && distance.transportations.includes("train")).map(names => names.destinationName)// Complete here (PRINT THE RESULT IN THE CONSOLE USING FOREACH) /* diff --git a/Week-1/InClass/E-arrays-of-objects/exercise-3.js b/Week-1/InClass/E-arrays-of-objects/exercise-3.js index a1ec691..260a532 100644 --- a/Week-1/InClass/E-arrays-of-objects/exercise-3.js +++ b/Week-1/InClass/E-arrays-of-objects/exercise-3.js @@ -53,6 +53,7 @@ let restaurants = [restaurant1, restaurant2, restaurant3]; DO NOT EDIT ANYTHING ABOVE THIS LINE WRITE YOUR CODE BELOW */ +//let findAvailableRestaurants(numberOfPeople) let restaurantFinderApplication = { @@ -61,16 +62,21 @@ let restaurantFinderApplication = { restaurants: restaurants, findAvailableRestaurants: function (numberOfPeople) { // Complete here + return restaurants.filter(seats=>(seats.totalSeats-seats.numberOfCustomers)>=numberOfPeople).map(names=>names.name) }, findRestaurantServingDish: function (dishName) { // Complete here + return restaurants.filter(menus=>menus.menu.includes(dishName)).map(names=>names.name) }, - countNumberOfRestaurantsInArea: function (area) { - // Complete here + countNumberOfRestaurantsInArea: function (area){ + return restaurants.filter(menus=>menus.address.area===area).length + + // Complete here } }; + /* DO NOT EDIT ANYTHING BELOW THIS LINE */ diff --git a/Week-1/InClass/F-object-keys/exercise-part-0.js b/Week-1/InClass/F-object-keys/exercise-part-0.js index d9b1085..2588f93 100644 --- a/Week-1/InClass/F-object-keys/exercise-part-0.js +++ b/Week-1/InClass/F-object-keys/exercise-part-0.js @@ -20,8 +20,8 @@ let highScores = { // ONLY EDIT BELOW HERE -let capitalCitiesKeys = ; -let highScoresKeys; +let capitalCitiesKeys = Object.keys(capitalCities); +let highScoresKeys = Object.keys(highScores); // ONLY EDIT ABOVE HERE diff --git a/Week-1/InClass/F-object-keys/exercise-part-1.js b/Week-1/InClass/F-object-keys/exercise-part-1.js index b8d4be7..a56e336 100644 --- a/Week-1/InClass/F-object-keys/exercise-part-1.js +++ b/Week-1/InClass/F-object-keys/exercise-part-1.js @@ -15,9 +15,11 @@ let mentorsAges = { // ONLY EDIT BELOW THIS LINE -let mentorsNames = ; +let mentorsNames = Object.keys(mentorsAges); -let mentorsNamedUppercased = ; +let mentorsNamedUppercased = mentorsNames.map(function(key){ + return key.toUpperCase(); +}); // ONLY EDIT ABOVE THIS LINE diff --git a/Week-1/InClass/F-object-keys/exercise-part-2.js b/Week-1/InClass/F-object-keys/exercise-part-2.js index 6b6a1bb..85022bc 100644 --- a/Week-1/InClass/F-object-keys/exercise-part-2.js +++ b/Week-1/InClass/F-object-keys/exercise-part-2.js @@ -35,14 +35,14 @@ let storeBranches = { // # 1 // prints [ 'glasgow', 'edinburgh' ] -console.log() +console.log(Object.keys(storeBranches)) // # 2 // prints [ 'manager', 'assistant', 'interns' ] -console.log() +console.log(Object.keys(storeBranches.glasgow)) // # 3 // prints [ 'head_intern', 'intern' ] -console.log() +console.log(Object.keys(storeBranches.glasgow.interns)) // ONLY EDIT ABOVE THIS LINE diff --git a/Week-2/Homework/mandatory/2-exercises/exercises.js b/Week-2/Homework/mandatory/2-exercises/exercises.js index 174c5db..318b73b 100644 --- a/Week-2/Homework/mandatory/2-exercises/exercises.js +++ b/Week-2/Homework/mandatory/2-exercises/exercises.js @@ -10,11 +10,22 @@ *
*

{Name Here}

*

{Job Here}

- * ..... + * .... *
*/ function exerciseOne(arrayOfPeople) { let content = document.querySelector("#content"); + // let h1El = document.createElement("h1"); + // let h2El = document.createElement("h2"); + arrayOfPeople.forEach(arr=>{ + let h1El = document.createElement("h1"); + let h2El = document.createElement("h2"); + h1El.textContent = arr.name + h2El.textContent = arr.job + content.appendChild(h1El); + content.appendChild(h2El); + }) + } /** @@ -26,8 +37,30 @@ function exerciseOne(arrayOfPeople) { */ function exerciseTwo(shopping) { //Write your code in here + let shopContent = document.getElementById("content"); + let ulElement = document.createElement("ul"); + shopContent.appendChild(ulElement); + //console.log(shopContent) + + shopping.forEach(shopItem => { + let liElement = document.createElement("li"); + //let arrItem = document.createTextNode(shopItem); + liElement.textContent = shopItem + //liElement.appendChild(arrItem); + + + ulElement.appendChild(liElement); + }); } +// var liEl2 = document.createElement("li"); +// liEl2.textContent = "sugar"; +// var liEl3 = document.createElement("li"); +// liEl3.textContent = "lettuce"; +// ulEl.appendChild(liEl1); +// ulEl.appendChild(liEl2); +// ulEl.appendChild(liEl3); + /** I'd like to display my three favorite books inside a nice webpage! @@ -59,6 +92,65 @@ function exerciseTwo(shopping) { **/ function exerciseThree(books) { //Write your code in here +/* +list-style:none; + display: flex; + flex-wrap: wrap; + padding: 20px; + width: calc( 100% - 41px); +} + +li { + width: calc(25% - 51px); + margin: 15px; + padding: 10px; + min-width: 350px; +} +*/ + imgSrc =["https://m.media-amazon.com/images/I/416Hql52NCL.jpg", + "https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1295465264l/8884400.jpg", + "https://images-na.ssl-images-amazon.com/images/I/51cUVaBWZzL.jpg"] + + let contentDiv = document.getElementById("content"); + let ulElement = document.createElement("ul"); + contentDiv.appendChild(ulElement); + ulElement.style.listStyle="none"; + ulElement.style.display="flex"; + ulElement.style.flexWrap="wrap"; + ulElement.style.padding="20px"; + ulElement.style.width="calc(100%-41px)"; + + + + + + books.forEach((booksElement,index) => { + let li = document.createElement("li"); + ulElement.appendChild(li); + let pElement = document.createElement("p"); + pElement.textContent = booksElement.title + " - " + booksElement.author; + let img = document.createElement("img"); + img.style.width = "200px"; + img.src = imgSrc[index]; + + //console.log(booksElement.imgSrc) + li.appendChild(pElement); + li.appendChild(img); + //li.style.listStyleType = "none" + li.style.width ="calc(25% - 51px)"; + li.style.margin = "15px"; + li.style.padding="10px"; + li.style.minWidth = "350px"; + + if (booksElement.alreadyRead) { + li.style.backgroundColor = "green" + } else + li.style.backgroundColor = "red"; + + //img.src = `${booksElement.toString()}.jpg` + + }); + } // @@ -74,7 +166,7 @@ function exerciseThree(books) { let people = [ { name: "Chris", job: "Teacher" }, { name: "Joanna", job: "Student" }, - { name: "Boris", job: "Prime Minister" } + { name: "Boris", job: "Prime Minister" }, ]; exerciseOne(people); @@ -87,18 +179,18 @@ const books = [ { title: "The Design of Everyday Things", author: "Don Norman", - alreadyRead: false + alreadyRead: false, }, { title: "The Most Human Human", author: "Brian Christian", - alreadyRead: true + alreadyRead: true, }, { title: "The Pragmatic Programmer", author: "Andrew Hunt", - alreadyRead: true - } + alreadyRead: true, + }, ]; exerciseThree(books); diff --git a/Week-2/Homework/mandatory/2-exercises/img/The Design of Everyday Things.jpg b/Week-2/Homework/mandatory/2-exercises/img/The Design of Everyday Things.jpg new file mode 100644 index 0000000..c1f8cea Binary files /dev/null and b/Week-2/Homework/mandatory/2-exercises/img/The Design of Everyday Things.jpg differ diff --git a/Week-2/Homework/mandatory/2-exercises/img/The Most Human Human.jpg b/Week-2/Homework/mandatory/2-exercises/img/The Most Human Human.jpg new file mode 100644 index 0000000..dd193f8 Binary files /dev/null and b/Week-2/Homework/mandatory/2-exercises/img/The Most Human Human.jpg differ diff --git a/Week-2/Homework/mandatory/2-exercises/img/The Pragmatic Programmer.jpg b/Week-2/Homework/mandatory/2-exercises/img/The Pragmatic Programmer.jpg new file mode 100644 index 0000000..1953092 Binary files /dev/null and b/Week-2/Homework/mandatory/2-exercises/img/The Pragmatic Programmer.jpg differ diff --git a/Week-2/Homework/mandatory/3-project/js/main.js b/Week-2/Homework/mandatory/3-project/js/main.js index e69de29..8c3a062 100644 --- a/Week-2/Homework/mandatory/3-project/js/main.js +++ b/Week-2/Homework/mandatory/3-project/js/main.js @@ -0,0 +1,55 @@ +var blueButtonElement = document.querySelector('#blueBtn'); +var jumbotronElement = document.querySelector('.jumbotron'); +var donationButton = document.querySelector('.jumbotron .buttons .btn-primary'); +var volunteerButtonElement = document.querySelector( + '.jumbotron .buttons .btn-secondary' +); +blueButtonElement.addEventListener('click', function () { + jumbotronElement.style.backgroundColor = `#588fbd`; + donationButton.style.backgroundColor = `#ffa500`; + volunteerButtonElement.style.backgroundColor = 'black'; + volunteerButtonElement.style.color = 'white'; +}); + +var orangeButtonElement = document.querySelector('#orangeBtn'); +orangeButtonElement.addEventListener('click', function () { + jumbotronElement.style.color = `#f0ad4e`; + donationButton.style.backgroundColor = `#5751fd`; + volunteerButtonElement.style.backgroundColor = `#31b0d5`; + volunteerButtonElement.style.color = 'white'; +}); + +var greenButtonElement = document.querySelector('#greenBtn'); +greenButtonElement.addEventListener('click', function () { + jumbotronElement.style.backgroundColor = `#87ca8a`; + donationButton.style.backgroundColor = `black`; + volunteerButtonElement.style.backgroundColor = `#8c9c08`; +}); + + +var submitElement = document.querySelector('form button'); +submitElement.addEventListener('click', function (e) { + e.preventDefault(); + var emailElement = document.getElementById('exampleInputEmail1'); + var nameElement = document.getElementById('example-text-input'); + var descElement = document.getElementById('exampleTextarea'); + if (emailElement.value.length === 0 || emailElement.value.includes('@') === false) { + emailElement.style.backgroundColor = 'red'; + } + if (nameElement.value.length === 0) { + nameElement.style.backgroundColor = 'red'; + } + if (descElement.value.length === 0) { + descElement.style.backgroundColor = 'red'; + } + if ( + emailElement.value.length > 0 && + emailElement.value.includes('@') === true && + nameElement.value.length > 0 && + descElement.value.length > 0 + ) { + var formElement = document.querySelector('form'); + formElement.reset(); + alert('thank you for filling out the form'); + } +}); \ No newline at end of file diff --git a/Week-2/InClass/A-dom-manipulation/script.js b/Week-2/InClass/A-dom-manipulation/script.js new file mode 100644 index 0000000..2877d1b --- /dev/null +++ b/Week-2/InClass/A-dom-manipulation/script.js @@ -0,0 +1,56 @@ + +* / +console.log(document.querySelectorAll("h1")); +console.log(document.querySelectorAll("p")); +console.log(document.querySelector("div")); +console.log(document.querySelector("#jumbotron-text")); +console.log(document.querySelectorAll(".primary-content p")); + +/* +Task 2 +====== + +When a user clicks the 'ALERT' button, an alert box should pop up with the text "Thanks for visiting Bikes for Refugees!" +*/ +let alertBtn = document.querySelector("#alertBtn") +alertBtn.addEventListener("click", function alertSomething() { + alert("Something"); +}) + +/* +Task 3 +======= + +Write JavaScript below that changes the background colour of the page when the 'Change colour' button is clicked. +*/ + +let brgBtn = document.querySelector("#bgrChangeBtn"); +//brgBtn.addEventListener("click", function changeBgr() { +brgBtn.style.backgroundColor = "red"; +//}) + +/* +Task 4 +====== + +When a user clicks the 'Add some text' button, a new paragraph should be added below the buttons that says "Read more below." +*/ + +let buttonsContainer = document.querySelector(".buttons"); +let addTextBtn = document.querySelector("#addTextBtn"); + +addTextBtn.addEventListener("click", function (event) { + // Create a new paragraph element + let paragraph = document.createElement("p"); + // Add some text to the new paragraph element + paragraph.textContent = "Read more below"; + + buttonsContainer.appendChild(paragraph); +}); + +/* +Task 5 +====== + +When the 'Larger links!' button is clicked, the text of all links on the page should increase. +*/ \ No newline at end of file diff --git a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js index 6ca81cd..7f4b909 100644 --- a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js +++ b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js @@ -1,4 +1,33 @@ -function setAlarm() {} +let alarmTimer; +function setAlarm() { + var alarmSet = document.getElementById("alarmSet").value; + var timeRemaining = document.getElementById("timeRemaining"); + updateTime(alarmSet, timeRemaining); + + // clear previous timer + clearInterval(alarmTimer); + + alarmTimer = setInterval(() => { + updateTime(alarmSet, timeRemaining); + }, 1000); + + function updateTime(sec, node) { + if (sec < 1) { + clearInterval(alarmTimer); + playAlarm(); + } + const time = formatTime(sec); + node.textContent = `Time Remaining: ${time}`; + alarmSet--; + } + + function formatTime(seconds) { + const s = alarmSet % 60; + const m = Math.floor(alarmSet / 60); + + return ` ${m < 10 ? `0${m}` : m}:${s < 10 ? `0${s}` : s}`; + } +} // DO NOT EDIT BELOW HERE diff --git a/Week-3/Homework/mandatory/2-quotegenerator/index.html b/Week-3/Homework/mandatory/2-quotegenerator/index.html index b6115be..c5089b0 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/index.html +++ b/Week-3/Homework/mandatory/2-quotegenerator/index.html @@ -1,17 +1,30 @@ - - Quote Generator - - - - - - - - + + Quote Generator + + + + + + +
+
+ + +
+
+
+
+
+

+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js index 39ab245..a42ec3a 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js +++ b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js @@ -1,3 +1,59 @@ +const colours = [ + '#ff7a5a', + '#765aa6', + '#fee7bc', + '#ffc64a', + '#b460a6', + '#ffffff', + '#4781c1', +]; + +const blockQuote = document.querySelector('.blockquote'); +const quote = document.querySelector('.blockquote p'); +const author = document.querySelector('.blockquote-footer'); +const newQuoteBtn = document.querySelector('.btn'); +const switchToggle = document.getElementById('autoPlay'); +const switchToggleLabel = document.querySelector('.custom-switch label'); +let autoplayTimer; + + +// show random quote on page load +updateQuote(); + +newQuoteBtn.addEventListener('click', () => { + updateQuote(); +}); + +function updateQuote() { + const randomQuote = pickFromArray(quotes); + const randomColour = pickFromArray(colours); + + quote.textContent = randomQuote.quote; + author.textContent = randomQuote.author; + + blockQuote.style.backgroundColor = randomColour; +} +function getQuoteInterval(seconds) { + return setInterval(() => { + updateQuote(); + }, seconds * 1000); +} + +switchToggle.addEventListener('change', (e) => { + let toggleLabelText; + + if (e.target.checked) { + toggleLabelText = 'auto-play: ON'; + autoplayTimer = getQuoteInterval(60); + } else { + toggleLabelText = 'auto-play: OFF'; + clearInterval(autoplayTimer); + } + + switchToggleLabel.textContent = toggleLabelText; +}); + +autoplayTimer = getQuoteInterval(60); // DO NOT EDIT BELOW HERE // A function which will return one item, at diff --git a/Week-3/Homework/mandatory/2-quotegenerator/style.css b/Week-3/Homework/mandatory/2-quotegenerator/style.css index 63cedf2..9fa142a 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/style.css +++ b/Week-3/Homework/mandatory/2-quotegenerator/style.css @@ -1 +1,24 @@ /** Write your CSS in here **/ +body { + background-color: #abe9e8; +} + +.row { + height: 100vh; +} + +.blockquote { + padding: 2em 1.5em; + border-radius: 10px; +} + +.btn { + margin-top: 2em; +} + +.switch { + right: 2em; + top: 1em; + position: absolute; + user-select: none; +} \ No newline at end of file diff --git a/Week-3/Homework/mandatory/3-slideshow/index.html b/Week-3/Homework/mandatory/3-slideshow/index.html index 39cd40e..3fb6336 100644 --- a/Week-3/Homework/mandatory/3-slideshow/index.html +++ b/Week-3/Homework/mandatory/3-slideshow/index.html @@ -1,17 +1,23 @@ - - - Slideshow - - - - - - - + + Slideshow + + + + + +

Image Carousel

+
+
+ cat 1 + cat 2 + +
+
+ + +
+
+ + diff --git a/Week-3/Homework/mandatory/3-slideshow/slideshow.js b/Week-3/Homework/mandatory/3-slideshow/slideshow.js index b55091c..fce5ed6 100644 --- a/Week-3/Homework/mandatory/3-slideshow/slideshow.js +++ b/Week-3/Homework/mandatory/3-slideshow/slideshow.js @@ -1 +1,35 @@ // Write your code here +window.onload = function () { + const imagesNodes = document.getElementsByTagName('img'); + const imagesArray = Array.from(imagesNodes); + const backBtn = document.getElementById('back'); + const forwardBtn = document.getElementById('forward'); + + // index of visible slide + let currentIndex = 0; + + // show first image on page load + showImage(currentIndex); + + function showImage(index) { + imagesArray.forEach((image, i) => { + // hide image when indexes don't match + if (index !== i) { + image.style.display = 'none'; + } else { + // display image for currentIndex + image.style.display = 'inline-block'; + } + }); + } + + forwardBtn.addEventListener('click', () => { + currentIndex = (currentIndex + 1) % imagesArray.length; + showImage(currentIndex); + }); + + backBtn.addEventListener('click', () => { + currentIndex = currentIndex > 0 ? --currentIndex : imagesArray.length - 1; + showImage(currentIndex); + }); +}; \ No newline at end of file diff --git a/Week-3/Homework/mandatory/3-slideshow/style.css b/Week-3/Homework/mandatory/3-slideshow/style.css index 63cedf2..f9d3026 100644 --- a/Week-3/Homework/mandatory/3-slideshow/style.css +++ b/Week-3/Homework/mandatory/3-slideshow/style.css @@ -1 +1,6 @@ /** Write your CSS in here **/ +img { + display: none; + max-width: 500px; + width: 100%; +} \ No newline at end of file