diff --git a/Week-1/Homework/mandatory/1-writers.js b/Week-1/Homework/mandatory/1-writers.js index 82acf6f..356e3e0 100644 --- a/Week-1/Homework/mandatory/1-writers.js +++ b/Week-1/Homework/mandatory/1-writers.js @@ -39,6 +39,8 @@ let writers = [ } ]; +writers.filter(item=> item.alive).map(item => console.log(`Hi, my name is ${item.firstName} ${item.lastName}. I am ${item.age} years old, and work as a ${item.occupation}.`)) + /* If you want an extra challenge, only `console.log()` the writers that are alive. */ diff --git a/Week-1/Homework/mandatory/2-water-bottle.js b/Week-1/Homework/mandatory/2-water-bottle.js index 981d7e3..54a1f9d 100644 --- a/Week-1/Homework/mandatory/2-water-bottle.js +++ b/Week-1/Homework/mandatory/2-water-bottle.js @@ -12,12 +12,15 @@ let bottle = { volume: 0, fill: function() { // calling this function should make you bottles volume = 100; + return this.volume = 100; }, drink: function() { // calling this function should decrease your bottles volume by 10; + return this.volume -= 10; }, empty: function() { // this function should return true if your bottles volume = 0 + this.volume = 0 ? true : this.volume; } }; diff --git a/Week-1/Homework/mandatory/3-groceries.js b/Week-1/Homework/mandatory/3-groceries.js index 2b34cdb..1baaf70 100644 --- a/Week-1/Homework/mandatory/3-groceries.js +++ b/Week-1/Homework/mandatory/3-groceries.js @@ -10,3 +10,10 @@ let groceryList = { item2: "", item3: "" }; + +groceryList.item1 = 'Potatoes'; +groceryList.item2 = 'Orange Juice'; +groceryList.item3 = 'Rice'; + +groceriesToBuy = Object.values(groceryList); +console.log(groceriesToBuy) diff --git a/Week-1/Homework/projects/1-recipes.js b/Week-1/Homework/projects/1-recipes.js index 3ada67c..bd48ea2 100644 --- a/Week-1/Homework/projects/1-recipes.js +++ b/Week-1/Homework/projects/1-recipes.js @@ -22,4 +22,11 @@ cocoa **/ -let recipes = {}; +let recipes = { + name: 'Cinnamon porridge oats with banana and berries', + servings: 1, + ingredients: ['almond milk', 'oats', 'cinnamon', 'wallnuts', 'flax seeds', 'banana', 'berries'] +}; + + +console.log(`${recipes.name} \n Serves: ${recipes.servings} \n Ingredients: \n ${recipes.ingredients.map(item=> item)}`); diff --git a/Week-1/Homework/projects/2-reading-list.js b/Week-1/Homework/projects/2-reading-list.js index 939e3e2..2bb34c0 100644 --- a/Week-1/Homework/projects/2-reading-list.js +++ b/Week-1/Homework/projects/2-reading-list.js @@ -25,4 +25,27 @@ If you read it, log a string like 'You already read "The Hobbit" by J.R.R. Tolki **/ -let books = []; +let books = [ + { + title: 'The Chimp Paradox', + author: 'Steve Peters', + alreadyRead: true + }, + { + title: 'The China study', + author: 'T. Colin Campbell', + alreadyRead: true + }, + { + title: "A Connecticut Yankee in King Arthur's Court", + author: 'Mark Twain', + alreadyRead: false + }, + { + title: 'Don Quixote', + author: 'Miguel de Cervantes', + alreadyRead: false + }, +]; + +books.map(item => item.alreadyRead ? console.log(`You already read '${item.title}' by ${item.author}`) : console.log(`You still need to read '${item.title}' by ${item.author}`)); diff --git a/Week-1/InClass/A-objects-intro/exercise-part-0.js b/Week-1/InClass/A-objects-intro/exercise-part-0.js index 433d27c..25472c1 100644 --- a/Week-1/InClass/A-objects-intro/exercise-part-0.js +++ b/Week-1/InClass/A-objects-intro/exercise-part-0.js @@ -1,7 +1,14 @@ /* Describe your own laptop as a JavaScript object - Try to think of as many properties as you can! -*/ \ No newline at end of file +*/ + + +let laptop = { + name: 'Toshiba', + color: 'white', + stickers: true, + usbSPort: 2, +} \ No newline at end of file diff --git a/Week-1/InClass/A-objects-intro/exercise-part-2.js b/Week-1/InClass/A-objects-intro/exercise-part-2.js index 4e01403..3156d86 100644 --- a/Week-1/InClass/A-objects-intro/exercise-part-2.js +++ b/Week-1/InClass/A-objects-intro/exercise-part-2.js @@ -5,17 +5,18 @@ The objects below have some syntax issues - try and fix them all! */ let kitten = { - fur colour: "orange", - age "23" + 'fur colour': "orange", + age: "23" }; -let laptop = - brand: "Lenovo" - ram "5GB" +let laptop ={ + brand: "Lenovo", + ram: "5GB" } let phone = { - operating system "iOS", + 'operating system': "iOS", hasStylus: true, - megapixels 12 - "batteryLife": "24 hours" \ No newline at end of file + megapixels: 12, + "batteryLife": "24 hours" +} \ No newline at end of file diff --git a/Week-1/InClass/B-objects-get-set/exercise-1.js b/Week-1/InClass/B-objects-get-set/exercise-1.js index 6591384..85539d2 100644 --- a/Week-1/InClass/B-objects-get-set/exercise-1.js +++ b/Week-1/InClass/B-objects-get-set/exercise-1.js @@ -11,7 +11,9 @@ let kitten = { // YOUR CODE GOES BELOW HERE - +console.log(kitten.ageMonths); +console.log(kitten.isFemale); +console.log(kitten.furColour); diff --git a/Week-1/InClass/B-objects-get-set/exercise-2.js b/Week-1/InClass/B-objects-get-set/exercise-2.js index c8b5e7b..05a37e7 100644 --- a/Week-1/InClass/B-objects-get-set/exercise-2.js +++ b/Week-1/InClass/B-objects-get-set/exercise-2.js @@ -5,13 +5,13 @@ */ let phone = { - brand: 'iPhone, - model 'iPhone X' + brand: 'iPhone', + model: 'iPhone X', launchYear: 2017, - is Unlocked: true -; + isUnlocked: true +}; -let phoneBrand = phone.bbrand; +let phoneBrand = phone.brand; let phoneLaunchYear = phone[launchYear]; // DO NOT MODIFY BELOW THIS LINE diff --git a/Week-1/InClass/B-objects-get-set/exercise-3.js b/Week-1/InClass/B-objects-get-set/exercise-3.js index f775c9a..7935c05 100644 --- a/Week-1/InClass/B-objects-get-set/exercise-3.js +++ b/Week-1/InClass/B-objects-get-set/exercise-3.js @@ -3,7 +3,9 @@ */ // WRITE CODE BELOW THIS - +let kitten = { + name: 'Gilbert' +} // WRITE CODE ABOVE THIS console.log(kitten.name); diff --git a/Week-1/InClass/B-objects-get-set/exercise-4.js b/Week-1/InClass/B-objects-get-set/exercise-4.js index 763347e..db0b223 100644 --- a/Week-1/InClass/B-objects-get-set/exercise-4.js +++ b/Week-1/InClass/B-objects-get-set/exercise-4.js @@ -9,7 +9,8 @@ let dog = { // WRITE CODE BELOW THIS LINE - +dog.name = 'Rex'; +dog.wantsToPlay = true; // WRITE CODE ABOVE THIS LINE diff --git a/Week-1/InClass/C-more-complex-objects/exercise-1.js b/Week-1/InClass/C-more-complex-objects/exercise-1.js index 8ae3e82..3009908 100644 --- a/Week-1/InClass/C-more-complex-objects/exercise-1.js +++ b/Week-1/InClass/C-more-complex-objects/exercise-1.js @@ -23,7 +23,9 @@ let house = { // - change the previous owners of "house" to ["Brian M.", "Fiona S."] // - change the last name of the current owner of "house" to "Montgomery" - +house.address = '51 Berkley Road'; +house.previousOwners = ["Brian M.", "Fiona S."]; +house.currentOwner.lastName = 'Montgomery'; /* DO NOT EDIT ANYTHING BELOW THIS LINE */ diff --git a/Week-1/InClass/C-more-complex-objects/exercise-2.js b/Week-1/InClass/C-more-complex-objects/exercise-2.js index 7ea0200..5085a67 100644 --- a/Week-1/InClass/C-more-complex-objects/exercise-2.js +++ b/Week-1/InClass/C-more-complex-objects/exercise-2.js @@ -30,7 +30,9 @@ let newCurrentOwner = { // - give the house a new property called 'isForSale' with the value 'false' - +house.currentOwner = newCurrentOwner; +house.previousOwners[1] = 'Stephen B.'; +house.isForSale = false; /* DO NOT EDIT ANYTHING BELOW THIS LINE diff --git a/Week-1/InClass/C-more-complex-objects/exercise-3.js b/Week-1/InClass/C-more-complex-objects/exercise-3.js index 4bfbfd3..3b55f61 100644 --- a/Week-1/InClass/C-more-complex-objects/exercise-3.js +++ b/Week-1/InClass/C-more-complex-objects/exercise-3.js @@ -32,17 +32,20 @@ let parkAvenueHouse = { // returns the full name (first name + last name) of the owner of the house function getOwnerFullName(house) { - + return `${house.currentOwner.firstName} ${house.currentOwner.lastName}`; } // returns an array of the owners' email addresses of the two houses function getEmailAddresses(house1, house2) { - + return [house1.currentOwner.email, house2.currentOwner.email] } // returns the address for the cheapest house out of the two function getCheapestAddress(house1, house2) { - + if(house1.price < house2.price){ + return house1.address; + } + return house2.address; } diff --git a/Week-1/InClass/D-methods/exercise-1.js b/Week-1/InClass/D-methods/exercise-1.js index 8de0f8c..a769916 100644 --- a/Week-1/InClass/D-methods/exercise-1.js +++ b/Week-1/InClass/D-methods/exercise-1.js @@ -6,7 +6,10 @@ Add a method "greet" so this person can say hello. let person = { name: "Alice", - age: 25 + age: 25, + greet: function(){ + return `Hello everybody.`; + } }; diff --git a/Week-1/InClass/D-methods/exercise-2.js b/Week-1/InClass/D-methods/exercise-2.js index 8e993fc..fa245fc 100644 --- a/Week-1/InClass/D-methods/exercise-2.js +++ b/Week-1/InClass/D-methods/exercise-2.js @@ -7,7 +7,10 @@ Hint: use 'this' keyword to access the name property. let person = { name: "Alice", - age: 25 + age: 25, + sayName: function(){ + return `My name is ${this.name}`; + } }; diff --git a/Week-1/InClass/D-methods/exercise-3.js b/Week-1/InClass/D-methods/exercise-3.js index be23748..109f9d8 100644 --- a/Week-1/InClass/D-methods/exercise-3.js +++ b/Week-1/InClass/D-methods/exercise-3.js @@ -8,11 +8,11 @@ let person = { name: "Alice", age: 25, currentAddress: "Glasgow", - changeAddress: (newAddress) { - currentAddress = newAddress; + changeAddress: function(newAddress) { + this.currentAddress = newAddress; }, - celebrateBirthday: function { - that.age = that.age + 1; + celebrateBirthday: function() { + this.age = this.age + 1; } }; diff --git a/Week-1/InClass/D-methods/exercise-4.js b/Week-1/InClass/D-methods/exercise-4.js index d89214a..6188a67 100644 --- a/Week-1/InClass/D-methods/exercise-4.js +++ b/Week-1/InClass/D-methods/exercise-4.js @@ -6,7 +6,10 @@ Define a method "makeFriend" to add a new friend to her list. let person = { name: "Alice", - friends: ["John", "Nina"] + friends: ["John", "Nina"], + makeFriend: function(newFriend){ + return this.friends.push(newFriend); + } }; diff --git a/Week-1/InClass/D-methods/exercise-5.js b/Week-1/InClass/D-methods/exercise-5.js index dcd198c..060f894 100644 --- a/Week-1/InClass/D-methods/exercise-5.js +++ b/Week-1/InClass/D-methods/exercise-5.js @@ -17,10 +17,17 @@ let coffeeMachine = { }, insertedAmount: 0, insertMoney: function (amount) { + this.insertedAmount += amount; }, getCoffee: function (coffee) { + if(this.prices[coffee] <= this.insertedAmount){ + this.insertedAmount = 0; + return `Please take your ${coffee}`; + } + return `Sorry you don't have enough money for a ${coffee}`; + } }; 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..d26ed91 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(item => item.name) // Complete here -var personsYoungerThan28YearsOld = // Complete here +var personsYoungerThan28YearsOld = persons.filter(item=> item.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..6e48f1a 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,12 @@ WRITE YOUR CODE BELOW */ -let destinationNamesWithin500Kms = // Complete here +let destinationNamesWithin500Kms = travelDestinations.filter(item => item.distanceKms < 500).map(item=> item.destinationName); // Complete here +// console.log(destinationNamesWithin500Kms) -let destinationNameReachableByFerry = // Complete here +let destinationNameReachableByFerry = travelDestinations.filter(item => item.transportations.includes('ferry')).map(item => item.destinationName)// Complete here -let destinationNamesMoreThan300KmsAwayByTrain = // Complete here (PRINT THE RESULT IN THE CONSOLE USING FOREACH) +let destinationNamesMoreThan300KmsAwayByTrain = travelDestinations.filter(item => item.transportations.includes('train') && item.distanceKms > 300).map(item=> item.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..e1e5a43 100644 --- a/Week-1/InClass/E-arrays-of-objects/exercise-3.js +++ b/Week-1/InClass/E-arrays-of-objects/exercise-3.js @@ -61,12 +61,20 @@ let restaurantFinderApplication = { restaurants: restaurants, findAvailableRestaurants: function (numberOfPeople) { // Complete here + let availableRestaurants = restaurants.filter(res=> numberOfPeople <= res.totalSeats - res.numberOfCustomers).map(res=> res.name); + return availableRestaurants; }, findRestaurantServingDish: function (dishName) { // Complete here + let customRestaurant = restaurants.filter(res => res.menu.includes(dishName)).map(res => res.name); + return customRestaurant; + }, countNumberOfRestaurantsInArea: function (area) { // Complete here + let count = 0; + let countRestaurant = restaurants.filter(res => res.address.area.includes(area)).map(res => count++ ) + return count; } }; 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..e286b9c 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..3eb1e66 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,9 @@ let mentorsAges = { // ONLY EDIT BELOW THIS LINE -let mentorsNames = ; +let mentorsNames = Object.keys(mentorsAges); -let mentorsNamedUppercased = ; +let mentorsNamedUppercased = mentorsNames.map(item => item.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..9ae6415 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.edinburgh.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..dfd24e1 100644 --- a/Week-2/Homework/mandatory/2-exercises/exercises.js +++ b/Week-2/Homework/mandatory/2-exercises/exercises.js @@ -15,6 +15,17 @@ */ function exerciseOne(arrayOfPeople) { let content = document.querySelector("#content"); + + arrayOfPeople.map(item=> { + let h1 = document.createElement('H1'); + let h2 = document.createElement('H2'); + h1.textContent = item.name; + h2.textContent = item.job; + content.appendChild(h1); + content.appendChild(h2); + }) + + } /** @@ -26,6 +37,17 @@ function exerciseOne(arrayOfPeople) { */ function exerciseTwo(shopping) { //Write your code in here + let content = document.querySelector("#content"); + let unorderedList = document.createElement('ul'); + content.appendChild(unorderedList); + + shopping.map(item => { + + let li = document.createElement('li'); + li.textContent = item; + unorderedList.appendChild(li); + }) + } /** @@ -59,6 +81,51 @@ function exerciseTwo(shopping) { **/ function exerciseThree(books) { //Write your code in here + let content = document.querySelector("#content"); + let unorderedList = document.createElement('ul'); + let imageURL = + [ + 'https://productdork.com/uploads/default/original/1X/ddbda1150301e89cdf0119d84f2a7fb8930beffb.png', + 'https://images-na.ssl-images-amazon.com/images/I/41m1rQjm5tL._SX322_BO1,204,203,200_.jpg', + 'https://images-na.ssl-images-amazon.com/images/I/418M2053aNL.jpg' + ] + let heading = document.createElement('h1'); + content.appendChild(heading); + heading.textContent = 'Book List'; + + books.map((item, index) => { + //CREATE ELEMENTS + let paragraph = document.createElement('p'); + let image = document.createElement('img'); + let listItem = document.createElement('li'); + + // + + //STYLES + + listItem.style.margin = '20px'; + listItem.style.padding = '20px'; + listItem.style.width = '350px'; + unorderedList.style.display = 'flex'; + unorderedList.style.flexWrap = 'wrap'; + unorderedList.style.listStyleType = 'none'; + image.style.width = '200px'; + item.alreadyRead ? listItem.style.backgroundColor = 'green' : listItem.style.backgroundColor = 'red'; + // + + + paragraph.textContent = `${item.title} - ${item.author}`; + image.src = imageURL[index]; + + + listItem.appendChild(paragraph); + listItem.appendChild(image); + unorderedList.appendChild(listItem); + content.appendChild(unorderedList); + + + + }) } // diff --git a/Week-2/Homework/mandatory/3-project/README.md b/Week-2/Homework/mandatory/3-project/README.md index 5caa8a3..a2d1cd8 100644 --- a/Week-2/Homework/mandatory/3-project/README.md +++ b/Week-2/Homework/mandatory/3-project/README.md @@ -17,7 +17,7 @@ Clicking on the buttons should change the "theme" of the website: - **Jumbotron** background color to `#f0ad4e` - **Donate a bike** button background color to `#5751fd` - - **Volunteer** button background color to `#31b0d5` and text color to `white` + - **Volunteer** button background color to `#31b0d5` and text color to `white` - When clicking **green** it should change: - **Jumbotron** background color to `#87ca8a` diff --git a/Week-2/Homework/mandatory/3-project/index.html b/Week-2/Homework/mandatory/3-project/index.html index 2da7cc9..244047e 100644 --- a/Week-2/Homework/mandatory/3-project/index.html +++ b/Week-2/Homework/mandatory/3-project/index.html @@ -59,7 +59,7 @@

Bikes for Refugees

Donate a bike today Volunteer - + diff --git a/Week-2/Homework/mandatory/3-project/js/main.js b/Week-2/Homework/mandatory/3-project/js/main.js index e69de29..90ed761 100644 --- a/Week-2/Homework/mandatory/3-project/js/main.js +++ b/Week-2/Homework/mandatory/3-project/js/main.js @@ -0,0 +1,57 @@ +let blueButton = document.getElementById('blueBtn'); +let orangeButton = document.getElementById('orangeBtn'); +let greenButton = document.getElementById('greenBtn'); + +let jumbotron = document.querySelector('.jumbotron'); +let donateBikeBtn = document.querySelector('.buttons .btn-primary'); +let volunteerBtn = document.querySelector('.buttons .btn-secondary'); + +blueButton.addEventListener('click', event => { + jumbotron.style.backgroundColor = '#588fbd'; + donateBikeBtn.style.backgroundColor = '#ffa500'; + volunteerBtn.style.backgroundColor = '#000'; + volunteerBtn.style.color = '#fff'; +}) + + +orangeButton.addEventListener('click', event => { + jumbotron.style.backgroundColor = '#f0ad4e'; + donateBikeBtn.style.backgroundColor = '#5751fd'; + volunteerBtn.style.backgroundColor = '#31b0d5'; + volunteerBtn.style.color = '#fff'; +}) + + +greenButton.addEventListener('click', event => { + jumbotron.style.backgroundColor = '#87ca8a'; + donateBikeBtn.style.backgroundColor = '#000'; + volunteerBtn.style.backgroundColor = '#8c9c08'; +}) + + +// PART 2 + +let submitButton = document.querySelector('form .btn-primary'); +let email = document.getElementById('exampleInputEmail1'); +let name = document.getElementById('example-text-input'); +let textArea = document.getElementById('exampleTextarea'); + + +submitButton.addEventListener('click', event => { + event.preventDefault(); + + if( email.value && name.value && textArea.value && email.value.includes('@')){ + alert('Thank you for filling the form'); + email.value = ''; + name.value = ''; + textArea.value = ''; + } + + email.value === '' ? email.style.backgroundColor = 'red': ''; + name.value === '' ? name.style.backgroundColor = 'red': ''; + textArea.value === '' ? textArea.style.backgroundColor = 'red': ''; +}) + + + + diff --git a/Week-2/InClass/A-dom-manipulation/exercise.js b/Week-2/InClass/A-dom-manipulation/exercise.js index bb4f2e9..2a05f4e 100644 --- a/Week-2/InClass/A-dom-manipulation/exercise.js +++ b/Week-2/InClass/A-dom-manipulation/exercise.js @@ -16,7 +16,17 @@ Write JavaScript below that logs: */ +let para = document.querySelectorAll("p"); +console.log(para); +let siteHeader = document.querySelector('.site-header'); +console.log(siteHeader); + +let jumbotron = document.querySelector('#jumbotron-text'); +console.log(jumbotron); + +let primaryContent = document.querySelectorAll('.primary-content p'); +console.log(primaryContent); /* Task 2 ====== @@ -24,6 +34,11 @@ 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 alertButton = document.querySelector('#alertBtn'); + +alertButton.addEventListener('click', (event) => { + alert('Thanks for visiting Bikes for Refugees!'); +}) /* Task 3 @@ -32,6 +47,15 @@ Task 3 Write JavaScript below that changes the background colour of the page when the 'Change colour' button is clicked. */ +let colourBtn = document.querySelector("#bgrChangeBtn"); +let body = document.querySelector("body"); +let color = ["green", "red", "purple", "orange", "yellow"]; + +colourBtn.addEventListener("click", function () { + let randomNumber = Math.floor(Math.random() * 5); + body.style.backgroundColor = color[randomNumber]; +}); + /* Task 4 @@ -40,11 +64,27 @@ 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 textBtn = document.querySelector('#addTextBtn'); +let paragraph = document.createElement('P'); +let btns = document.querySelector('.buttons') +textBtn.addEventListener('click', (event) => { + paragraph.textContent = 'Read more below'; + btns.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 +*/ + +let linksBtn = document.querySelector("#largerLinksBtn"); +let allLinks = document.querySelectorAll("a"); + +linksBtn.addEventListener("click", event => { + console.log(allLinks); + allLinks.classList.add("fontSizeIncrease"); + +}); diff --git a/Week-2/InClass/A-dom-manipulation/index.html b/Week-2/InClass/A-dom-manipulation/index.html index 85cee13..3a32ed5 100644 --- a/Week-2/InClass/A-dom-manipulation/index.html +++ b/Week-2/InClass/A-dom-manipulation/index.html @@ -61,7 +61,7 @@

Bikes for Refugees

Change colour ALERT Add some text - Larger links! +
diff --git a/Week-2/InClass/A-dom-manipulation/styles/style.css b/Week-2/InClass/A-dom-manipulation/styles/style.css index 4968544..eac2f70 100644 --- a/Week-2/InClass/A-dom-manipulation/styles/style.css +++ b/Week-2/InClass/A-dom-manipulation/styles/style.css @@ -156,4 +156,8 @@ body { .navbar-brand > img { max-height: 80px; } +} + +.fontSizeIncrease{ + font-size: 30px; } \ 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..30e245d 100644 --- a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js +++ b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js @@ -1,4 +1,38 @@ -function setAlarm() {} + + +function setAlarm() { + let inputValue = document.getElementById('alarmSet').value; + let heading = document.getElementById('timeRemaining'); + let minutes = Math.floor(inputValue / 60); + let seconds = (inputValue % 60); + + let colors = ['#FCF2F1','#E0C1E0','#A88C9B','#A86DB1','#7649CA','#FCF2F1','#E0C1E0','#A88C9B']; + + let interval = setInterval(() => { + + heading.textContent = `Time Remaining: ${minutes}:${seconds}`; + if(seconds === 0) { + seconds = 60; + minutes--; + } + + seconds--; + + if(minutes < 0 ){ + playAlarm(); + clearInterval(interval); + + setInterval(() => { + let random = Math.floor(Math.random() * colors.length); + document.body.style.backgroundColor = colors[random]; + }, 500 ) + + } + + }, 1000) + + +} // DO NOT EDIT BELOW HERE diff --git a/Week-3/Homework/mandatory/1-alarmclock/index.html b/Week-3/Homework/mandatory/1-alarmclock/index.html index ab7d582..773e7d3 100644 --- a/Week-3/Homework/mandatory/1-alarmclock/index.html +++ b/Week-3/Homework/mandatory/1-alarmclock/index.html @@ -9,7 +9,7 @@ integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" /> - + diff --git a/Week-3/Homework/mandatory/2-quotegenerator/index.html b/Week-3/Homework/mandatory/2-quotegenerator/index.html index b6115be..1ed44b8 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/index.html +++ b/Week-3/Homework/mandatory/2-quotegenerator/index.html @@ -2,7 +2,7 @@ Quote Generator - + + +
+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Incidunt inventore sed expedita?

+

- - Author

+ +
+ + diff --git a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js index 39ab245..80e4a4c 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js +++ b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js @@ -1,3 +1,14 @@ + +let quoteText = document.querySelector('.quote'); +let authorText = document.querySelector('.author'); +let btn = document.getElementById('new-quote-btn'); + +btn.addEventListener('click', () => { + let random = Math.floor(Math.random() * quotes.length); + quoteText.textContent = quotes[random].quote; + authorText.textContent = quotes[random].author; +}) + // 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..d2ce38a 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/style.css +++ b/Week-3/Homework/mandatory/2-quotegenerator/style.css @@ -1 +1,43 @@ /** Write your CSS in here **/ + + + +body{ + background-image: linear-gradient(to right ,#22a192, #74a122); + +} +.container{ + margin-top: 200px; + background-color: #ffffff; + + padding: 100px 5%; + box-shadow: 1px 1px 10px rgb(17, 65, 29); + position: relative; +} + +.quote{ + color: #22a192; +} + +.author{ + text-align: right; + color: #000000; + font-size: 20px; +} + +#new-quote-btn, +#new-quote-btn:active{ + border: none; + outline: none; + padding: 10px 20px; + background-color: #74a122; + position: absolute; + left: 10%; + width: 80%; + color: white; +} + +#new-quote-btn:hover{ + background-color: #22a192; + outline: none; +} \ No newline at end of file diff --git a/Week-3/Homework/mandatory/3-slideshow/example-screenshots/1.jpg b/Week-3/Homework/mandatory/3-slideshow/example-screenshots/1.jpg new file mode 100644 index 0000000..e2d9244 Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/example-screenshots/1.jpg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/example-screenshots/2.jpg b/Week-3/Homework/mandatory/3-slideshow/example-screenshots/2.jpg new file mode 100644 index 0000000..f3637cb Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/example-screenshots/2.jpg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/example-screenshots/3.jpg b/Week-3/Homework/mandatory/3-slideshow/example-screenshots/3.jpg new file mode 100644 index 0000000..0f4500e Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/example-screenshots/3.jpg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/example-screenshots/4.jpg b/Week-3/Homework/mandatory/3-slideshow/example-screenshots/4.jpg new file mode 100644 index 0000000..fce1c98 Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/example-screenshots/4.jpg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/index.html b/Week-3/Homework/mandatory/3-slideshow/index.html index 39cd40e..ac3d8fa 100644 --- a/Week-3/Homework/mandatory/3-slideshow/index.html +++ b/Week-3/Homework/mandatory/3-slideshow/index.html @@ -2,16 +2,31 @@ Slideshow - - + + +

Image Carousel

+ +
+ + +
⇦
+
⇨
+ +
+

Time between images (in seconds):

+ +
+ +
+ + +
+
+ + diff --git a/Week-3/Homework/mandatory/3-slideshow/slideshow.js b/Week-3/Homework/mandatory/3-slideshow/slideshow.js index b55091c..66c1a18 100644 --- a/Week-3/Homework/mandatory/3-slideshow/slideshow.js +++ b/Week-3/Homework/mandatory/3-slideshow/slideshow.js @@ -1 +1,79 @@ // Write your code here + + +let image = document.querySelector('.image'); +let forwardButton = document.querySelector('.arrow-right'); +let backwardButton = document.querySelector('.arrow-left'); + +let autoForwardButton = document.querySelector('.btn-forward'); +let autoBackwardButton = document.querySelector('.btn-backward'); + +let timerInput = document.getElementById('timer-input'); + +let imageNumber = [1,2,3,4]; +let index = 0; +let interval; +let duration = 2500; //default time in seconds between images + +////////////////////////////// +//FORWARD AND BACKWARD ARROWS +////////////////////////////// + +forwardButton.addEventListener('click', () => { + clearInterval(interval); // Clear interval if was activated before + index++; + if(index > imageNumber.length -1){ + index = 0; + } + image.setAttribute('src', `./example-screenshots/${imageNumber[index]}.jpg`); + + +}) + +backwardButton.addEventListener('click', () => { + clearInterval(interval); // Clear interval if was activated before + index--; + if(index < 0){ + index = imageNumber.length -1; + } + image.setAttribute('src', `./example-screenshots/${imageNumber[index]}.jpg`); +}) + + +////////////////////////////// +//AUTO FORWARD AND BACKWARD BUTTONS +////////////////////////////// + +autoForwardButton.addEventListener('click', () => { + timerInput.value > 0 ? duration = timerInput.value * 1000 : ''; + interval = setInterval( () => { + index++; + if(index > imageNumber.length -1){ + index = 0; + } + image.setAttribute('src', `./example-screenshots/${imageNumber[index]}.jpg`); + console.log(duration) + }, duration) +}) + +autoBackwardButton.addEventListener('click', () => { + timerInput.value > 0 ? duration = timerInput.value * 1000 : ''; + interval = setInterval( () => { + index--; + if(index < 0){ + index = imageNumber.length -1; + } + image.setAttribute('src', `./example-screenshots/${imageNumber[index]}.jpg`); + }, duration) + +}) + + + +////////////////////////////// +//CHECK INPUT VALUE +////////////////////////////// + +timerInput.addEventListener('change', () => { + timerInput.value < 0 ? alert('You must introduce a positive number') : ''; +}) \ 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..0a4a6a1 100644 --- a/Week-3/Homework/mandatory/3-slideshow/style.css +++ b/Week-3/Homework/mandatory/3-slideshow/style.css @@ -1 +1,121 @@ /** Write your CSS in here **/ +*{ + padding: 0; + margin: 0; +} + +body{ + box-sizing: border-box; +} + +.heading{ + text-align: center; + margin-top: 100px; + color: #787878; + font-size: 45px; + font-weight: 700; + font-family: 'Montserrat', sans-serif; +} + +.container{ + width: 800px; + height: 500px; + margin: 100px auto; + padding: 3px; + border: 3px solid #787878; + position: relative; + border-radius: 5px; +} + +.arrow-left, .arrow-right{ + font-size: 50px; + position: absolute; + top: 50%; + cursor: pointer; + color: #f3f3f3; + transform: translateY(-50%); + opacity: 0.2; + background-color: #787878; + padding: 0 10px; + transition: all .8s; + border-radius: 5px; + +} + +.arrow-left:hover, .arrow-right:hover{ + color: #f3f3f3; + opacity: .9; +} + +.arrow-left{ + left: 10px; +} +.arrow-right{ + right: 10px; +} + +.image{ + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 5px; +} + +.buttons{ + display: flex; + justify-content: center; + align-items: center; +} + +.btn{ + border: none; + outline: none; + padding: 20px; + margin: 10px auto; + background-color: #787878; + color: white; + cursor: pointer; + font-size: 16px; + font-family: 'Montserrat', sans-serif; + +} + +.btn:hover{ + background-color: #585858; +} + +.timer-box{ + display: flex; + align-items: center; + justify-content: center; +} + +.timer-box p{ + font-family: 'Montserrat', sans-serif; + margin: 15px; + color: #787878; +} +.timer-box p span{ + font-style: italic; + font-size: 12px; + +} + +#timer-input{ + padding: 5px; +} + +@media (max-width: 1400px){ + .heading{ + font-size: 35px; + margin-top: 20px; + + } + + .container{ + width: 600px; + height: 300px; + margin: 50px auto; + + } +} \ No newline at end of file diff --git a/Week-3/Homework/mandatory/3-slideshow/task.md b/Week-3/Homework/mandatory/3-slideshow/task.md index 9ba30da..c7395f4 100644 --- a/Week-3/Homework/mandatory/3-slideshow/task.md +++ b/Week-3/Homework/mandatory/3-slideshow/task.md @@ -15,7 +15,7 @@ Make forward and back buttons to move _manually_ in that direction through a lis You can use any images. You can store the images within your app or you can use links to images hosted elsewhere ("hotlinking"). - + [Unsplash](https://unsplash.com/) is a good source of images for this challenge. Level 1 challenge screenshot example.