diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..a0de46f --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5504 +} \ No newline at end of file diff --git a/Week-1/Homework/mandatory/1-writers.js b/Week-1/Homework/mandatory/1-writers.js index 82acf6f..4699532 100644 --- a/Week-1/Homework/mandatory/1-writers.js +++ b/Week-1/Homework/mandatory/1-writers.js @@ -39,6 +39,28 @@ let writers = [ } ]; +/* for (let key in writers){ + + //console.log(writers[key]); + + console.log(` Hi, my name is ${writers[key].firstName} ${writers[key].lastName}. I am ${writers[key].age} years old, and works as a ${writers[key].occupation}.`); +} */ +/////////////////////////////////////////////////////////// +//Writing with forEach() array method; +let writeNames = writers.forEach(writer => { + console.log (` Hi, my name is ${writer.firstName} ${writer.lastName}. I am ${writer.age} years old, and works as a ${writer.occupation}.`) +}) +///////////////////////////////////////////////////////////// /* If you want an extra challenge, only `console.log()` the writers that are alive. */ + +for (let key in writers){ + + if(writers[key].alive === true){ + console.log(` Hi, my name is ${writers[key].firstName} ${writers[key].lastName}. I am ${writers[key].age} years old, and works as a ${writers[key].occupation}.`); + } + else{ + console.log(`${writers[key].firstName} ${writers[key].lastName} is death.`) + } +} \ No newline at end of file diff --git a/Week-1/Homework/mandatory/2-water-bottle.js b/Week-1/Homework/mandatory/2-water-bottle.js index 981d7e3..2877636 100644 --- a/Week-1/Homework/mandatory/2-water-bottle.js +++ b/Week-1/Homework/mandatory/2-water-bottle.js @@ -11,14 +11,17 @@ We made a start on this for you here: let bottle = { volume: 0, fill: function() { + this.volume = 100; // calling this function should make you bottles volume = 100; }, drink: function() { + this.volume -= 10; // calling this function should decrease your bottles volume by 10; }, - empty: function() { + empty: function( ) { + return this.volume === 0; + } // this function should return true if your bottles volume = 0 - } }; /* diff --git a/Week-1/Homework/mandatory/3-groceries.js b/Week-1/Homework/mandatory/3-groceries.js index 2b34cdb..8070d93 100644 --- a/Week-1/Homework/mandatory/3-groceries.js +++ b/Week-1/Homework/mandatory/3-groceries.js @@ -6,7 +6,10 @@ let groceriesToBuy = []; let groceryList = { - item1: "", - item2: "", - item3: "" + item1: "Potatoes", + item2: "Orange Juice", + item3: "Rice", }; + +groceriesToBuy = Object.values(groceryList); +console.log(groceriesToBuy); \ No newline at end of file diff --git a/Week-1/Homework/projects/1-recipes.js b/Week-1/Homework/projects/1-recipes.js index 3ada67c..9c76391 100644 --- a/Week-1/Homework/projects/1-recipes.js +++ b/Week-1/Homework/projects/1-recipes.js @@ -22,4 +22,13 @@ cocoa **/ -let recipes = {}; +let recipeCard = { + title: "Mole", + serves:2, + ingredients:["cinnemon", "cumin", "cocoa"] +}; + +console.log(recipeCard); +console.log(recipeCard.title); +console.log(recipeCard.serves); +console.log(recipeCard.ingredients); diff --git a/Week-1/Homework/projects/2-reading-list.js b/Week-1/Homework/projects/2-reading-list.js index 939e3e2..824c530 100644 --- a/Week-1/Homework/projects/2-reading-list.js +++ b/Week-1/Homework/projects/2-reading-list.js @@ -1,10 +1,10 @@ -/** - +/* The Reading List Keep track of which books you read and which books you want to read! -===== -Exercise 1 +===== */ + +/* Exercise 1 ===== Create an array of objects, where each object describes a book and has properties for: @@ -15,14 +15,37 @@ Create an array of objects, where each object describes a book and has propertie Loop through the array of books. For each book, log the book title and book author like so: "The Hobbit by J.R.R. Tolkien" - -===== + */ + +let book1={ + title:"Flat Stanley", + author: "J.Greenhut", + alreadyRead: true, +} +let book2= { + title:"Astrosaurs", + author: "Steve Cole", + alreadyRead: true, +} +let book3= { + title:"Horrid Henny and the Demon Dinner Lady", + author: "Francesca Simon", + alreadyRead: false, +} + +let myBooks=[book1, book2, book3] + +/* ==== Exercise 2 ===== Now use an if/else statement to change the output depending on whether you read it yet or not. If you read it, log a string like 'You already read "The Hobbit" by J.R.R. Tolkien', and if not, log a string like 'You still need to read "The Lord of the Rings" by J.R.R. Tolkien.' + */ +function checkRead (book){ + if (book.alreadyRead === true;){ + return + } + +} -**/ - -let books = []; 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..5309b2b 100644 --- a/Week-1/InClass/A-objects-intro/exercise-part-0.js +++ b/Week-1/InClass/A-objects-intro/exercise-part-0.js @@ -4,4 +4,13 @@ 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 myLaptop = { + brand: "MacBook", + screenSize: 13, + hardDisc: 128, + microChip: "8 Gen I5", + operatingSystem: "MacOs", + RAM: 8, +} \ No newline at end of file diff --git a/Week-1/InClass/A-objects-intro/exercise-part-1.js b/Week-1/InClass/A-objects-intro/exercise-part-1.js index 49e1ed9..1f01cf9 100644 --- a/Week-1/InClass/A-objects-intro/exercise-part-1.js +++ b/Week-1/InClass/A-objects-intro/exercise-part-1.js @@ -7,3 +7,46 @@ Assign each of them to a separate variable */ +let myCar ={ + color: "black", + made:"Vauxhall", + model:"Insignia", + engine:2, + productionYear:2015, +} + +let BoschSession1 ={ + chapter1:"TIS", + chapter2:"Lost Night", + chapter3:"Blue Religion", + chapter4:"Fugazi", + chapter5:"Mam's Boy", + chapter6:"Donkey's Years", + chapter7:"Lost Boys", + chapter8:"High Low", + chapter9:"The Magic Castle", + chapter10:"Us and Them", +} + +let garden ={ + width:5, + length:7, + tress: ["Oak", "beech", "ash", "birch"], + patio:true, +} + +let livingRoom ={ + size: "3m * 3m", + TVStand:true, + window:2, + floor: "laminat parke", + radiators:3, +} + +let browniCake ={ + flour: 10, + egggs: 2, + butter: 15, + sugar: 5, + cholatte: 10, +} \ 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..3a8b108 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" -}; + furColour: "orange", + age: "23", +} -let laptop = - brand: "Lenovo" - ram "5GB" +let laptop = { + brand: "Lenovo", + ram: "5GB", } let phone = { - operating system "iOS", + operatingSystem: "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..d3842a3 100644 --- a/Week-1/InClass/B-objects-get-set/exercise-1.js +++ b/Week-1/InClass/B-objects-get-set/exercise-1.js @@ -10,6 +10,10 @@ let kitten = { // YOUR CODE GOES BELOW HERE +console.log(kitten); +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..96bb8a5 100644 --- a/Week-1/InClass/B-objects-get-set/exercise-2.js +++ b/Week-1/InClass/B-objects-get-set/exercise-2.js @@ -5,14 +5,14 @@ */ let phone = { - brand: 'iPhone, - model 'iPhone X' + brand: 'iPhone', + model: 'iPhone X', launchYear: 2017, - is Unlocked: true -; + isUnlocked: true, +}; -let phoneBrand = phone.bbrand; -let phoneLaunchYear = phone[launchYear]; +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..176f4da 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,11 @@ */ // WRITE CODE BELOW THIS - +let kitten ={ + name:"Gilbert", + age:3, + type:"middle east", +} // 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..e9681a6 100644 --- a/Week-1/InClass/B-objects-get-set/exercise-4.js +++ b/Week-1/InClass/B-objects-get-set/exercise-4.js @@ -9,6 +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..6cf5caa 100644 --- a/Week-1/InClass/C-more-complex-objects/exercise-1.js +++ b/Week-1/InClass/C-more-complex-objects/exercise-1.js @@ -19,6 +19,10 @@ let house = { WRITE YOUR CODE BELOW */ +house.address = '51 Berkley Road'; +house.previousOwners = ["Brian M.", " Fiona S."]; +house.currentOwner.lastName = "Montgomery"; + // - change the address of "house" to '51 Berkley Road' // - change the previous owners of "house" to ["Brian M.", "Fiona S."] // - change the last name of the current owner of "house" to "Montgomery" 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..339bda4 100644 --- a/Week-1/InClass/C-more-complex-objects/exercise-2.js +++ b/Week-1/InClass/C-more-complex-objects/exercise-2.js @@ -25,6 +25,10 @@ let newCurrentOwner = { WRITE YOUR CODE BELOW */ +house.currentOwner = newCurrentOwner; +house.previousOwners[1] = " Stephen B."; +house.isForSale = false; + // - assign the value of the variable 'newCurrentOwner' as the value to the house's "currentOwner" // - from the list of previous owners, replace only "John A." with "Stephen B." // - give the house a new property called 'isForSale' with the value 'false' 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..e420f8f 100644 --- a/Week-1/InClass/C-more-complex-objects/exercise-3.js +++ b/Week-1/InClass/C-more-complex-objects/exercise-3.js @@ -8,9 +8,9 @@ let kinningParkHouse = { address: "1 Kinning Park", price: 180000, currentOwner: { - firstName: "Margaret", - lastName: "Conway", - email: "margaret@fake-emails.com" + firstName: "Margaret", + lastName: "Conway", + email: "margaret@fake-emails.com" } }; @@ -18,9 +18,9 @@ let parkAvenueHouse = { address: "50 Park Avenue", price: 195000, currentOwner: { - firstName: "Marie", - lastName: "McDonald", - email: "marie.m@real-emails.com" + firstName: "Marie", + lastName: "McDonald", + email: "marie.m@real-emails.com" } }; @@ -29,20 +29,24 @@ let parkAvenueHouse = { WRITE YOUR CODE BELOW */ - +//let house =[kinningParkHouse, kinningParkHouse]; // 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; + } else { + 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..f164891 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..7eb776f 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 `May 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..09029bb 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..a7cae37 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(friend) { + this.friends.push(friend); + } }; diff --git a/Week-1/InClass/D-methods/exercise-5.js b/Week-1/InClass/D-methods/exercise-5.js index dcd198c..2ff8b0f 100644 --- a/Week-1/InClass/D-methods/exercise-5.js +++ b/Week-1/InClass/D-methods/exercise-5.js @@ -16,11 +16,22 @@ let coffeeMachine = { flatWhite: 3.00 }, insertedAmount: 0, - insertMoney: function (amount) { + insertMoney: function (amount) { + return this.insertedAmount += amount; }, - getCoffee: function (coffee) { + getCoffee: function (coffee) { + if (this.insertedAmount && coffee === 'flatWhite' >= 3.00) { + return `Please take your ${coffee}`; + } else if (this.insertedAmount >= 2.40 && coffee === 'cappuccino') { + return `Please take your ${coffee}`; + } else if (this.insertedAmount >= 1.50 && coffee === 'blackCoffee') { + return `Please take your ${coffee}`; + } + else { + return `Sorry you don't have enough money for ${coffee}`; + } } }; @@ -39,5 +50,4 @@ coffeeMachine.insertMoney(4.00); console.log(`Expected result: 'Please take your flatWhite'. Actual result: ${coffeeMachine.getCoffee('flatWhite')}`); coffeeMachine.insertMoney(2.40); -console.log(`Expected result: 'Sorry you don't have enough money for a flatWhite'. Actual result: ${coffeeMachine.getCoffee('flatWhite')}`); - +console.log(`Expected result: 'Sorry you don't have enough money for a flatWhite'. Actual result: ${coffeeMachine.getCoffee('flatWhite')}`); \ No newline at end of file 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..0d0dc85 100644 --- a/Week-1/InClass/E-arrays-of-objects/exercise-1.js +++ b/Week-1/InClass/E-arrays-of-objects/exercise-1.js @@ -24,23 +24,32 @@ DO NOT EDIT ANYTHING ABOVE THIS LINE WRITE YOUR CODE BELOW */ +var persons = [person1, person2, person3]; // Complete here -var persons = // Complete here +function getPersonNames (person){ + return person.name; +} -var personNames = // Complete here +function youngerThan28Years (person){ + return person.age < 28; +} -var personsYoungerThan28YearsOld = // Complete here +var personNames = persons.map(getPersonNames); +// var personNames = persons.map(person => person.name); // Complete here + +var personsYoungerThan28YearsOld = persons.filter(youngerThan28Years); + // var personsYoungerThan28YearsOld = persons.filter(person => person.age < 28); // Complete here /* DO NOT EDIT ANYTHING BELOW THIS LINE */ -console.log("Question 1: array defined with 3 persons -> ", +console.log("Question 1: array defined with 3 persons -> ", (persons[0] === person1 && persons[1] === person2 && persons[2] === person3) ? 'Passed :)' : 'Not yet :('); -console.log("Question 2: array containing the person names -> ", +console.log("Question 2: array containing the person names -> ", (personNames[0] === "Alice" && personNames[1] === "Bob" && personNames[2] === "John") ? 'Passed :)' : 'Not yet :('); -console.log("Question 3: array containing the persons younger than 28 years old -> ", - (personsYoungerThan28YearsOld[0] === person1 && personsYoungerThan28YearsOld[1] === person3) ? 'Passed :)' : 'Not yet :('); +console.log("Question 3: array containing the persons younger than 28 years old -> ", + (personsYoungerThan28YearsOld[0] === person1 && personsYoungerThan28YearsOld[1] === person3) ? 'Passed :)' : 'Not yet :('); \ No newline at end of file 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..ba78c09 100644 --- a/Week-1/InClass/E-arrays-of-objects/exercise-2.js +++ b/Week-1/InClass/E-arrays-of-objects/exercise-2.js @@ -39,12 +39,27 @@ DO NOT EDIT ANYTHING ABOVE THIS LINE WRITE YOUR CODE BELOW */ +function destinationNames(destination) { + return destination.destinationName; +} -let destinationNamesWithin500Kms = // Complete here +function destinationInside500(destination) { + return destination.distanceKms <= 500; +} -let destinationNameReachableByFerry = // Complete here +function destinationTransportationWithFerry(destination) { + return destination.transportations.includes("ferry"); +} -let destinationNamesMoreThan300KmsAwayByTrain = // Complete here (PRINT THE RESULT IN THE CONSOLE USING FOREACH) +function destinationMoreThan300AndWithTrain(destination) { + return destination.distanceKms > 300 && destination.transportations.includes("train"); +} + +let destinationNamesWithin500Kms = travelDestinations.filter(destinationInside500).map(destinationNames); // Complete here + +let destinationNameReachableByFerry = travelDestinations.filter(destinationTransportationWithFerry).map(destinationNames); // Complete here + +let destinationNamesMoreThan300KmsAwayByTrain = travelDestinations.filter(destinationMoreThan300AndWithTrain).map(destinationNames); // Complete here (PRINT THE RESULT IN THE CONSOLE USING FOREACH) /* @@ -53,4 +68,4 @@ DO NOT EDIT ANYTHING BELOW THIS LINE console.log(`Question 1) Expected result: Edinburgh,Dublin, actual result: ${destinationNamesWithin500Kms}`); console.log(`Question 2) Expected result: Dublin, actual result: ${destinationNameReachableByFerry}`); -console.log(`Question 3) Expected result: London,Paris, actual result: ${destinationNamesMoreThan300KmsAwayByTrain}`); +console.log(`Question 3) Expected result: London,Paris, actual result: ${destinationNamesMoreThan300KmsAwayByTrain}`); \ No newline at end of file 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..c2885cc 100644 --- a/Week-1/InClass/E-arrays-of-objects/exercise-3.js +++ b/Week-1/InClass/E-arrays-of-objects/exercise-3.js @@ -59,17 +59,47 @@ let restaurantFinderApplication = { applicationName: "Restaurant Finder", applicationVersion: "1.0", restaurants: restaurants, - findAvailableRestaurants: function (numberOfPeople) { - // Complete here + + findAvailableRestaurants: function(numberOfPeople) { // Complete here + let namesOfRestaurants = ""; + restaurants.forEach(restaurant => { + if(numberOfPeople <= restaurant.totalSeats - restaurant.numberOfCustomers){ + namesOfRestaurants += restaurant.name + "," + } + }) + return namesOfRestaurants; }, - findRestaurantServingDish: function (dishName) { - // Complete here + + findRestaurantServingDish: function (dishName) { // Complete here + return this.restaurants.filter(restaurant => restaurant.menu.includes(dishName)).map(restaurant => restaurant.name); }, - countNumberOfRestaurantsInArea: function (area) { - // Complete here + + /* findRestaurantServingDish: function(dishName) { // Complete here + let newArr=[]; + restaurants.filter(menu => { + + //newArr = restaurants.includes(dishName); + newArr.push(restaurants.menu.includes(dishName)) + }); + return newArr; + }, */ + +///////// + + countNumberOfRestaurantsInArea: function (area) { // Complete here + return (this.restaurants.filter(restaurant => restaurant.address.area == area)).length; } + +///////// + //countNumberOfRestaurantsInArea: function() { // Complete here + // return this.restaurants.address.includes("area"); + // } + }; +function restaurantNames (restaurant){ + return restaurant.name; +} /* DO NOT EDIT ANYTHING BELOW THIS LINE @@ -82,4 +112,4 @@ let restaurantsServingSalad = restaurantFinderApplication.findRestaurantServingD console.log(`Find restaurants serving salad: Expected result: Paesano,Ubiquitous Chip, actual result: ${restaurantsServingSalad}`); let numberOfRestaurantsInCityCentre = restaurantFinderApplication.countNumberOfRestaurantsInArea("center"); -console.log(`Number of restaurants in city centre: Expected result: 2, actual result: ${numberOfRestaurantsInCityCentre}`); +console.log(`Number of restaurants in city centre: Expected result: 2, actual result: ${numberOfRestaurantsInCityCentre}`); \ No newline at end of file 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..6db0195 100644 --- a/Week-1/InClass/F-object-keys/exercise-part-0.js +++ b/Week-1/InClass/F-object-keys/exercise-part-0.js @@ -20,13 +20,13 @@ let highScores = { // ONLY EDIT BELOW HERE -let capitalCitiesKeys = ; -let highScoresKeys; +let capitalCitiesKeys = Object.keys(capitalCities); +let highScoresKeys = Object.keys(highScores); // ONLY EDIT ABOVE HERE console.log(capitalCitiesKeys); // prints [ 'scotland', 'kenya', 'australia', 'canada' ] -console.log(highScoresKeys) +console.log(highScoresKeys); // prints ['34, '55', '89', '100'] 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..7889c4a 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,15 @@ let mentorsAges = { // ONLY EDIT BELOW THIS LINE -let mentorsNames = ; +function upperCaseTheNames (name){ + return name.toUpperCase(); +}; + +let mentorsNames = Object.keys(mentorsAges) ; +console.log(mentorsNames); -let mentorsNamedUppercased = ; +let mentorsNamedUppercased = mentorsNames.map(upperCaseTheNames); +console.log(mentorsNamedUppercased); // 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..9b1a1bd 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..3e2849f 100644 --- a/Week-2/Homework/mandatory/2-exercises/exercises.js +++ b/Week-2/Homework/mandatory/2-exercises/exercises.js @@ -12,11 +12,24 @@ *

{Job Here}

* ..... * - */ + +*/ + function exerciseOne(arrayOfPeople) { let content = document.querySelector("#content"); -} + let nameOfPerson, jobOfPerson; + + arrayOfPeople.forEach(person => { + nameOfPerson = document.createElement("h1"); + nameOfPerson.innerText = person.name; + content.appendChild(nameOfPerson); + jobOfPerson = document.createElement("h2"); + jobOfPerson.innerHTML = person.job; + content.appendChild(jobOfPerson); + }) +} +//exerciseOne(); /** * * Create a list of shopping items. You should use an unordered list. @@ -24,8 +37,18 @@ function exerciseOne(arrayOfPeople) { * All of your HTML should go inside the Div tag with the id "content". * */ + + function exerciseTwo(shopping) { - //Write your code in here + let content = document.querySelector("#content"); + let unOrderedList = document.createElement("ul") + content.appendChild(unOrderedList); + + shopping.forEach(item => { + let li1 = document.createElement("li"); + li1.innerText = item; + unOrderedList.appendChild(li1); + }) } /** @@ -57,10 +80,108 @@ function exerciseTwo(shopping) { The end result should look something like this: https://hyf-js2-week1-makeme-ex1-demo.herokuapp.com/ **/ +let images = [ + { + title:"The Design of Everyday Things", + src:"images/the-design-of-everyday-things.jpeg" + }, + { + title:"The Most Human Human", + src:"images/the-most-human-human.jpeg" + }, + { + title:"The Pragmatic Programmer", + src:"images/the-pragmatic-programmer.jpeg" + } +] + +function exerciseThree(books) { + + let content = document.querySelector("#content"); + console.log (content); + + let bookList = document.createElement("ul"); + content.appendChild(bookList); + + books.forEach((book) => { + let imageSrc; + let listItem = document.createElement("li"); + bookList.appendChild(listItem); + let bookHeader = document.createElement("p"); + bookHeader.textContent = `${book.title} - ${book.author}`; + listItem.appendChild(bookHeader); + let imageItem = document.createElement("img"); + + images.find((image) => { + if (image.title === book.title){ + imageSrc = image.src; + } + }) + + imageItem.src = imageSrc; + listItem.style.margin = "15px"; + listItem.appendChild(imageItem); + + if (book.alreadyRead){ + listItem.style.backgroundColor = "green"; + } else { + listItem.style.backgroundColor = "yellow"; + } + }); + + bookList.style.listStyle = "none"; + bookList.style.display = "flex"; + +} + + +/////////////////////////////////////////////////////////////////////////////////////////////////////////// +/* This is another way of solution. + function exerciseThree(books) { - //Write your code in here + + let bookList = document.createElement("ul"); + + books.forEach(book => { + let imageSrc; + + imageArr.forEach(image => { + if (book.title === image.title){ + imageSrc = image.src; + } + }); + + let ListItem = document.createElement("li"); + let bookHeader = document.createElement("p"); + + bookHeader.textContent = `${book.title} - ${book.author}`; + + let image = document.createElement("img"); + image.src = imageSrc; + + if (book.alreadyRead === true){ + listItem.style.backgroundColor = "green"; + } else{ + listItem.style.backgroundColor = "red"; + } + + listItem.append(bookHeader); + listItem.append(image); + bookList.appendChild(listItem); + let content = document.querySelector("#content"); + + }); + + //let content = document.querySelector("#content"); + //document.body.appendChild(bookList); + //content.appendChild(bookList); } +// let listItem = document.createElement("li"); +// listItem.className = "bookItem"; + +*/ +////////////////////////////////////////////////////////////////////////////////////////////////////////// // // // diff --git a/Week-2/Homework/mandatory/2-exercises/images/the-design-of-everyday-things.jpeg b/Week-2/Homework/mandatory/2-exercises/images/the-design-of-everyday-things.jpeg new file mode 100644 index 0000000..fdceb5c Binary files /dev/null and b/Week-2/Homework/mandatory/2-exercises/images/the-design-of-everyday-things.jpeg differ diff --git a/Week-2/Homework/mandatory/2-exercises/images/the-most-human-human.jpeg b/Week-2/Homework/mandatory/2-exercises/images/the-most-human-human.jpeg new file mode 100644 index 0000000..b92aa35 Binary files /dev/null and b/Week-2/Homework/mandatory/2-exercises/images/the-most-human-human.jpeg differ diff --git a/Week-2/Homework/mandatory/2-exercises/images/the-pragmatic-programmer.jpeg b/Week-2/Homework/mandatory/2-exercises/images/the-pragmatic-programmer.jpeg new file mode 100644 index 0000000..9b1f926 Binary files /dev/null and b/Week-2/Homework/mandatory/2-exercises/images/the-pragmatic-programmer.jpeg differ diff --git a/Week-2/Homework/mandatory/3-project/index.html b/Week-2/Homework/mandatory/3-project/index.html index 2da7cc9..519bb23 100644 --- a/Week-2/Homework/mandatory/3-project/index.html +++ b/Week-2/Homework/mandatory/3-project/index.html @@ -152,6 +152,6 @@

Upcoming events

- + \ No newline at end of file diff --git a/Week-2/Homework/mandatory/3-project/js/main.js b/Week-2/Homework/mandatory/3-project/js/main.js index e69de29..1f058b5 100644 --- a/Week-2/Homework/mandatory/3-project/js/main.js +++ b/Week-2/Homework/mandatory/3-project/js/main.js @@ -0,0 +1,108 @@ +/* When clicking **blue** it should change: + + - **Jumbotron** background color to `#588fbd` + - **Donate a bike** button background color to `#ffa500` + - **Volunteer** button background color to `black` and text color to `white` +*/ + +let blueButton = document.getElementById("blueBtn"); + blueButton.addEventListener("click", colorChange); + +function colorChange (){ + let jumbotronEl = document.querySelector(".jumbotron"); + jumbotronEl.style.backgroundColor = "#588fbd"; + let donateBikeButton = document.querySelector(".btn.btn-primary.btn-lrg"); + donateBikeButton.style.backgroundColor = "#ffa500"; + let volunteerButton = document.querySelector(".btn.btn-secondary.btn-lrg"); + volunteerButton.style.backgroundColor = "black"; + volunteerButton.style.color = "white"; +} + + /* When clicking **orange** it should change: + + - **Jumbotron** background color to `#f0ad4e` + - **Donate a bike** button background color to `#5751fd` + - **Volunteer** button background color to `#31b0d5` and text color to `white` + */ +let orangeButton = document.getElementById("orangeBtn"); + orangeButton.addEventListener("click", coloring); + +function coloring (){ + let jumbotronEl = document.querySelector(".jumbotron"); + jumbotronEl.style.backgroundColor = "#f0ad4e"; + let donateBikeButton = document.querySelector(".btn.btn-primary.btn-lrg"); + donateBikeButton.style.backgroundColor = "#5751fd"; + let volunteerButton = document.querySelector(".btn.btn-secondary.btn-lrg"); + volunteerButton.style.backgroundColor = "#31b0d5"; + volunteerButton.style.color = "white"; +} + +/* When clicking **green** it should change: + - **Jumbotron** background color to `#87ca8a` + - **Donate a bike** button background color to `black` + - **Volunteer** button background color to `#8c9c08` + */ + + let greenButton = document.getElementById("greenBtn"); + greenButton.addEventListener("click", newColor); + + function newColor (){ + let jumbotronEl = document.querySelector(".jumbotron"); + jumbotronEl.style.backgroundColor = "#87ca8a"; + let donateBikeButton = document.querySelector(".btn.btn-primary.btn-lrg"); + donateBikeButton.style.backgroundColor = "black"; + let volunteerButton = document.querySelector(".btn.btn-secondary.btn-lrg"); + volunteerButton.style.backgroundColor = "#8c9c08"; +} + + +/* When the submit button is pressed, it should check that all the form fields are valid: + +- The **Your name**, **Email** and **Describe yourself** fields need to be non-empty (Hint: their `value` length has to be greater than zero) +- For the **Email** field also check if it contains the `@` character + +For all the fields that invalid, it should make their background color `red`. +IF all the fields are valid, when you click **Submit** it should: + +- Display an alert to thank you for filling out the form +- Blank out (make empty) all the text fields + +**Important hint:** In your function that handles clicks on the `Submit` button you will need to call `event.preventDefault()` to stop the browser from refreshing the page. To read more on how to do this: https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault + */ + + let buttonPressed = document.querySelector("form")[3]; + console.log(buttonPressed); + + buttonPressed.addEventListener("click", checkValidity); + + function checkValidity(){ + + event.preventDefault(); + + let inPutEmailAddress= document.getElementById("exampleInputEmail1"); + let inPutName = document.getElementById("example-text-input"); + let inPutDescribeYourself = document.getElementById("exampleTextarea"); + + //console.log("exampleInputEmail1" + inPutEmailAddress.value ); + + let isValid = true; + + if (!inPutEmailAddress.value.length > 0 || !inPutEmailAddress.value.includes("@")){ + inPutEmailAddress.style.backgroundColor = "red"; + isValid = false; + } + if (!inPutName.value.length > 0 ){ + inPutName.style.backgroundColor = "red"; + isValid = false; + } + if (!inPutDescribeYourself.value.length > 0){ + inPutDescribeYourself.style.backgroundColor = "red"; + isValid = false; + } + else if (isValid){ + alert("Thank you for filling the form correctly"); + inPutEmailAddress.value = ""; + inPutName.value = ""; + inPutDescribeYourself.value = ""; + } + }; diff --git a/Week-2/InClass/A-dom-manipulation/exercise.js b/Week-2/InClass/A-dom-manipulation/exercise.js index bb4f2e9..040ee78 100644 --- a/Week-2/InClass/A-dom-manipulation/exercise.js +++ b/Week-2/InClass/A-dom-manipulation/exercise.js @@ -15,7 +15,19 @@ Write JavaScript below that logs: --> should log a list of nodes with a length of 3 */ +let allPElements = document.querySelectorAll('p'); +console.log(allPElements); +let firstDivElement = document.querySelector(".site-header.container"); +console.log(firstDivElement); + +let jumbotronT = document.querySelector("#jumbotron-text"); + +console.log(jumbotronT); + +let primaryContentP= document.querySelectorAll(".primary-content p"); + +console.log(primaryContentP); /* Task 2 @@ -24,6 +36,12 @@ 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 myButton = document.querySelector("#alertBtn"); +myButton.addEventListener("click", alertSomething); + +function alertSomething() { + alert("Thanks for visiting Bikes for Refugees!"); +} /* Task 3 @@ -32,6 +50,13 @@ Task 3 Write JavaScript below that changes the background colour of the page when the 'Change colour' button is clicked. */ +let myBackgroundColor = document.getElementById("bgrChangeBtn"); +myBackgroundColor.addEventListener("click", changeBackGroundColor); + +function changeBackGroundColor() { + let selectBodyElement= document.querySelector("body"); + selectBodyElement.style.backgroundColor= "red"; +} /* Task 4 @@ -40,11 +65,54 @@ 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 addNewParagraph = document.querySelector("#addTextBtn"); +addNewParagraph.addEventListener("click", addSomeMoreText); +function addSomeMoreText() { + let paragraph = document.createElement("p"); + paragraph.textContent = "Read more below."; + let buttonSame = document.querySelector(".buttons") + buttonSame.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 linksPage = document.querySelector("#largerLinksBtn"); +linksPage.addEventListener("click", textSizeGetBigger); + +function textSizeGetBigger() { + let allLinksOnThePage = document.getElementsByTagName("a"); + + for (var i=0; i < allLinksOnThePage.length; i++ ){ + allLinksOnThePage[i].classList.add(".larger"); + } +} */ + + +let largeButton = document.getElementById("largerLinksBtn"); +console.log(largeButton); +largeButton.addEventListener("click", textSizeBigger); + +function textSizeBigger() { + let allAnchorEls = document.getElementsByTagName("a"); + + for (let i=0; i < allAnchorEls.length; i++){ + allAnchorEls[i].style.fontSize = "30px"; + } + +} + + +/* Wahab lecture example +let btn = document.querySelector('#largerLinksBtn'); +let allLinks = document.querySelectorAll('a'); +btn.addEventListener("click", function(){ +for(let i = 0; i < allLinks.length; i++){ +allLinks[i].classList.add("larger"); +} +}); */ \ No newline at end of file diff --git a/Week-2/InClass/A-dom-manipulation/index.html b/Week-2/InClass/A-dom-manipulation/index.html index 85cee13..04e4faf 100644 --- a/Week-2/InClass/A-dom-manipulation/index.html +++ b/Week-2/InClass/A-dom-manipulation/index.html @@ -124,7 +124,7 @@

Upcoming events

- + diff --git a/Week-2/InClass/A-dom-manipulation/styles/style.css b/Week-2/InClass/A-dom-manipulation/styles/style.css index 4968544..575733f 100644 --- a/Week-2/InClass/A-dom-manipulation/styles/style.css +++ b/Week-2/InClass/A-dom-manipulation/styles/style.css @@ -151,6 +151,10 @@ body { background: #87ca8a } +.larger{ + font-size: 36px;; +} + @media screen and (min-width: 992px) { .navbar-brand > img { diff --git a/Week-3/.old/InClass/B-callbacks/exercise.js b/Week-3/.old/InClass/B-callbacks/exercise.js index 3ba78e8..4000ef6 100644 --- a/Week-3/.old/InClass/B-callbacks/exercise.js +++ b/Week-3/.old/InClass/B-callbacks/exercise.js @@ -17,6 +17,7 @@ document.querySelector('#button1').addEventListener('click', exercise1) function exercise1() { + // Write your implementation here } diff --git a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js index 6ca81cd..b923f18 100644 --- a/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js +++ b/Week-3/Homework/mandatory/1-alarmclock/alarmclock.js @@ -1,5 +1,81 @@ -function setAlarm() {} +function setAlarm() { + let inputAlarmSet = document.getElementById("alarmSet").value; + let titleTimeRemaining = document.getElementById("timeRemaining"); + let startAlarm = setInterval(() => { + if (inputAlarmSet === 0) { + //titleTimeRemaining.style.backgroundColor = "yellow"; + playAlarm(); + clearInterval(startAlarm); + } + + getTime(inputAlarmSet); + titleTimeRemaining.textContent = `Time remaining: ${getTime(inputAlarmSet)}`; + inputAlarmSet--; + }, 1000); + + if ((inputAlarmSet < 0)) { + pauseAlarm(); + } +} + +// This function return in format ( 00:00) minutes and seconds with if statements. +function getTime(time) { + let minutes; + let seconds; + + if (time > 60) { + minutes = Math.floor(time / 60); + seconds = time - minutes * 60; + } else { + minutes = 0; + seconds = time; + } + + if (minutes < 10) { + minutes = "0" + minutes; + } + + if (seconds < 10) { + seconds = "0" + seconds; + } + return `${minutes}:${seconds}`; +} + +/* First try +// Step-1 +function setAlarm(number) { + let inputAlarmSet = document.getElementById("alarmSet"); + inputAlarmSet.textContent = number; +} + +let alarmSetting = document.getElementById("set"); +alarmSetting.addEventListener("click", setAlarm); + +//Step-2 +let titleTimeRemaining = document.getElementById("timeRemaining"); +titleTimeRemaining.textContent = `Time Remaining: ${inputAlarmSet.textContent}`; + +// Step-3 and Step4 + setInterval(function(){ + let audio = new Audio('alarmsound.mp3'); + let secondClock = inputAlarmSet.textContent; + + if (secondClock > 0){ + titleTimeRemaining.textContent = `Time Remaining: ${secondClock}`; + } else if (secondClock === 0){ + audio.play(); + return `Alarm time is elapsed.`; + } + secondClock --; + }, 1000) + +// Step-4 + +*/ + + +////////////////////////////////////////////////////////////////////////////////////////////// // DO NOT EDIT BELOW HERE var audio = new Audio("alarmsound.mp3"); @@ -22,4 +98,4 @@ function pauseAlarm() { audio.pause(); } -window.onload = setup; +window.onload = setup; \ No newline at end of file diff --git a/Week-3/Homework/mandatory/1-alarmclock/index.html b/Week-3/Homework/mandatory/1-alarmclock/index.html index ab7d582..527cd4f 100644 --- a/Week-3/Homework/mandatory/1-alarmclock/index.html +++ b/Week-3/Homework/mandatory/1-alarmclock/index.html @@ -24,5 +24,6 @@

Time Remaining: 00:00

+ diff --git a/Week-3/Homework/mandatory/1-alarmclock/style.css b/Week-3/Homework/mandatory/1-alarmclock/style.css index 0c72de3..39fb030 100644 --- a/Week-3/Homework/mandatory/1-alarmclock/style.css +++ b/Week-3/Homework/mandatory/1-alarmclock/style.css @@ -13,3 +13,7 @@ h1 { text-align: center; } + +body { + background-color: green; +} diff --git a/Week-3/Homework/mandatory/2-quotegenerator/index.html b/Week-3/Homework/mandatory/2-quotegenerator/index.html index b6115be..6fff83b 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 - + + + +

Strive not to be a success, but rather to be of value.-Albert Einstein

+ +
+ + +
+ diff --git a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js index 39ab245..051492b 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/quotes.js +++ b/Week-3/Homework/mandatory/2-quotegenerator/quotes.js @@ -1,3 +1,34 @@ + +let bodyHTML = document.getElementsByTagName("body"); +let newPEl = document.querySelector("#quote-para"); +let newButtonEl = document.querySelector("#quote-select"); + + + + +function selectQuotes ( ){ + let randomNum = Math.floor(Math.random() * quotes.length); + newPEl.textContent = `${quotes[randomNum].quote}-${quotes[randomNum].author}`; +} + + +newButtonEl.addEventListener("click", selectQuotes); + + +let buttonCheckbox = document.querySelector(".checkbox-click"); +buttonCheckbox.addEventListener("change", e=>{ + let interval; + if(e.target.checked){ + interval = setInterval(function (){ + let randomNum = Math.floor(Math.random() * quotes.length); + newPEl.textContent = `${quotes[randomNum].quote}-${quotes[randomNum].author}`; + }, 1000); + }else{ + clearInterval(interval); + } +}) + + // 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..841846c 100644 --- a/Week-3/Homework/mandatory/2-quotegenerator/style.css +++ b/Week-3/Homework/mandatory/2-quotegenerator/style.css @@ -1 +1,40 @@ /** Write your CSS in here **/ +body { + display: flex; + flex-direction: column; + /* background-color: green; */ +} +#quote-para { + text-align: center; + justify-content: center; + width: 100%; + background-color: aqua; + /* margin :auto; */ + margin-bottom: 15 px; + padding: 15px; + font-weight: bolder; + border-width: 2px; + border-style: solid; + border-color: black; +} + +#quote-select { + justify-content: flex-end; + align-items: center; + align-self: center; + width: 33%; + color: white; + font-weight: bolder; + background-color: yellowgreen; +} + +.auto-select{ + display: flex; + flex-direction: row-reverse; +} + +.auto-label{ + background-color:#a6e3e9; + margin: 10px; + text-align: center; +} diff --git a/Week-3/Homework/mandatory/3-slideshow/images/p-38-lightning.jpg b/Week-3/Homework/mandatory/3-slideshow/images/p-38-lightning.jpg new file mode 100644 index 0000000..bcbcf55 Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/p-38-lightning.jpg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/pby-catalina.jpg b/Week-3/Homework/mandatory/3-slideshow/images/pby-catalina.jpg new file mode 100644 index 0000000..5be8dbf Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/pby-catalina.jpg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/pt-17-stearman.jpg b/Week-3/Homework/mandatory/3-slideshow/images/pt-17-stearman.jpg new file mode 100644 index 0000000..3c7012f Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/pt-17-stearman.jpg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/images/t-6-texan.jpg b/Week-3/Homework/mandatory/3-slideshow/images/t-6-texan.jpg new file mode 100644 index 0000000..05e289e Binary files /dev/null and b/Week-3/Homework/mandatory/3-slideshow/images/t-6-texan.jpg differ diff --git a/Week-3/Homework/mandatory/3-slideshow/index.html b/Week-3/Homework/mandatory/3-slideshow/index.html index 39cd40e..4a5edf1 100644 --- a/Week-3/Homework/mandatory/3-slideshow/index.html +++ b/Week-3/Homework/mandatory/3-slideshow/index.html @@ -2,7 +2,7 @@ Slideshow - + +
+
+

World War II Wings

+
+ +
+ + + + + +
+
+ + diff --git a/Week-3/Homework/mandatory/3-slideshow/slideshow.js b/Week-3/Homework/mandatory/3-slideshow/slideshow.js index b55091c..7703b20 100644 --- a/Week-3/Homework/mandatory/3-slideshow/slideshow.js +++ b/Week-3/Homework/mandatory/3-slideshow/slideshow.js @@ -1 +1,72 @@ // Write your code here + +let i = 0; +let imagesArr = []; +const TIME = 1000; +let interval; + +imagesArr[0]= "images/p-38-lightning.jpg"; +imagesArr[1]= "images/pby-catalina.jpg"; +imagesArr[2]= "images/pt-17-stearman.jpg"; +imagesArr[3]= "images/t-6-texan.jpg"; + +////////////////////// - Callback function for addEventListener-////////////////////// +function moveImageForward (){ + if ( i < imagesArr.length - 1 ){ + i++; + }else { + i = 0; + } + document.querySelector(".slider").src = imagesArr[i] +} + +function moveImageBackward (){ + if ( i === 0){ + i= imagesArr.length; + } + i--; + document.querySelector(".slider").src = imagesArr[i]; +} + +function changeForward (){ + stopTheSlide(); + moveImageForward(); +} + +function changeBackwards (){ + stopTheSlide(); + moveImageBackward(); +} + +function changeTheImageAutoForward (){ + stopTheSlide(); + interval = setInterval(moveImageForward, TIME); + +} + +function changeTheImageAutoBackwards (){ + stopTheSlide(); + interval = setInterval(moveImageBackward, TIME); +} + +function stopTheSlide (){ + clearInterval(interval); +} + +//////////////////////// -Button events and Calling the functions-//////////////////// + + +let forwardButton = document.querySelector(".forward-button"); +forwardButton.addEventListener ("click", changeForward); + +let backButton = document.querySelector(".back-button") +backButton.addEventListener ("click", changeBackwards); + +let autoForwardButton = document.querySelector(".auto-forward-button"); +autoForwardButton.addEventListener ("click", changeTheImageAutoForward); + +let autoBackButton = document.querySelector(".auto-back-button"); +autoBackButton.addEventListener("click",changeTheImageAutoBackwards ) + +let stopButton = document.querySelector(".stop-button") +stopButton.addEventListener ("click",stopTheSlide); \ 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..298f659 100644 --- a/Week-3/Homework/mandatory/3-slideshow/style.css +++ b/Week-3/Homework/mandatory/3-slideshow/style.css @@ -1 +1,20 @@ /** Write your CSS in here **/ +.container { + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} + +.jumbotron { + border-style: dotted; +} + +.hidetheslide { + display: none; +} + +img { + border: 3px solid #fff; +} diff --git a/Week-3/InClass/Callbacks/exercise-1/exercise.js b/Week-3/InClass/Callbacks/exercise-1/exercise.js index 40f06b0..55bf342 100644 --- a/Week-3/InClass/Callbacks/exercise-1/exercise.js +++ b/Week-3/InClass/Callbacks/exercise-1/exercise.js @@ -5,9 +5,26 @@ EXERCISE 1 Task 1 Using setTimeout, change the background colour of the page after 5 seconds (5000 milliseconds). +*/ + +let mainH1Element = document.querySelector("#main h1") + +setTimeout(function () { + mainH1Element.style.backgroundColor = "red"; +}, 5000) + +///////////////////////////////////////////////////////////////////////////////////////// +/* Task 2 Update your code to make the colour change every 5 seconds to something different. Hint: try searching for setInterval. Complete the exercises in this CodePen Prefer to work on a codepen? https://codepen.io/makanti/pen/abOreLg ================ -*/ \ No newline at end of file +*/ + +let colorChoice = ["red", "green", "yellow", "black", "purple"]; +let randomIndex = Math.floor(Math.random() * colorChoice.length); + +setInterval(function () { + mainH1Element.style.backgroundColor = colorChoice[randomIndex]; +}, 5000); \ No newline at end of file diff --git a/Week-3/InClass/Callbacks/exercise-2/exercise.js b/Week-3/InClass/Callbacks/exercise-2/exercise.js index eca9595..25f1caf 100644 --- a/Week-3/InClass/Callbacks/exercise-2/exercise.js +++ b/Week-3/InClass/Callbacks/exercise-2/exercise.js @@ -61,10 +61,117 @@ const movies = [ }, ]; -// create showMovies function +//////////////////////////////////////////////////////////// +// Task-1 ; create showMovies function +function showMovies() { + let divAllMovies = document.querySelector("#all-movies"); + let spanMoviesNumberEl = document.querySelector("#movies-number"); + + movies.forEach((movie) => { + let newPEl = document.createElement("p"); + newPEl.textContent = `${movie.title}-${movie.director}`; + divAllMovies.appendChild(newPEl); + spanMoviesNumberEl.innerText = movies.length; + }); +} // create a new movie object for your favorite movie +let newMovieOb1 = { + title: "Annihilation", + director: "Alex Garland", + type: "Science Fiction", + haveWatched: true, +}; + +////////////////////////////////////////////////////////////// +// Task-2 amend the showMovies with setTimeout to 1 second. // create addMovies function +let newMovieOb2 = { + title: "The Martian", + director: "Ridley Scott", + type: "Science Fiction", + haveWatched: true, +}; + +function addMovies(movie) { + movies.push(movie); +} + +////////////////////////////////////////////////////////////// +//Task-3 Callbacks, +setTimeout(showMovies, 1000); +console.log("Hello"); +setTimeout(addMovies(newMovieOb1), 2000); +setTimeout(addMovies(newMovieOb2), 5000); + +/////////////////////////////////////////////////////////////// +// Task 4 - **Extra** + +let bodyEl = document.querySelector("body"); +let newFormEl = document.createElement("form"); +newFormEl.className = "new-form"; + +let label1 = document.createElement("label"); +label1.innerHTML = `movie title`; +label1.for = "mTitle"; +let inputEl1 = document.createElement("input"); +inputEl1.type = "text"; +inputEl1.for = "mTitle"; + +newFormEl.appendChild(label1); +newFormEl.appendChild(inputEl1); + +bodyEl.appendChild(newFormEl); +let scriptEl = document.getElementsByTagName("script"); +bodyEl.lastChild = scriptEl; + +let label2 = document.createElement("label"); +label2.innerHTML = `movie director`; +label2.for = "mDirector"; +let inputEl2 = document.createElement("input"); +inputEl2.type = "text"; +inputEl2.for = "mDirector"; + +newFormEl.appendChild(label2); +newFormEl.appendChild(inputEl2); + +let label3 = document.createElement("label"); +label3.innerHTML = `movie type`; +label3.for = "mType"; +let inputEl3 = document.createElement("input"); +inputEl3.type = "text"; +inputEl3.for = "mType"; + +newFormEl.appendChild(label3); +newFormEl.appendChild(inputEl3); + +let label4 = document.createElement("label"); +label4.innerHTML = `having watched`; +label4.for = "mHaveWatched"; +let inputEl4 = document.createElement("input"); +inputEl4.type = "text"; +inputEl4.for = "mHaveWatched"; + +newFormEl.appendChild(label4); +newFormEl.appendChild(inputEl4); + +let newButtonEl = document.createElement("button"); +newButtonEl.type = "button"; +newButtonEl.textContent = "Save"; +newFormEl.appendChild(newButtonEl); + +//////////////////////////////////////////////////////////// +// Function with "click"; + +function addNewMovie(movie) { + movies.title = movie.title.value; + movies.director = movie.director.value; + movies.type = movie.type.value; + movies.haveWatched = movie.haveWatched.value; + movies = movies + movies[movie]; +} + +newButtonEl.addEventListener("click", addNewMovie); diff --git a/Week-3/InClass/Callbacks/exercise-2/index.html b/Week-3/InClass/Callbacks/exercise-2/index.html index bc9654c..fd5270a 100644 --- a/Week-3/InClass/Callbacks/exercise-2/index.html +++ b/Week-3/InClass/Callbacks/exercise-2/index.html @@ -12,6 +12,17 @@ body { padding: 30px; } + .new-form{ + displey:flex; + } + label{ + displey:flex; + flex-direction: center; + } + input{ + displey:flex; + flex-direction: center; + } @@ -21,9 +32,9 @@

My movies

Number of movies:

-
+ - + - + \ No newline at end of file diff --git a/Week-3/InClass/DOM-practice/main.js b/Week-3/InClass/DOM-practice/main.js index be9f609..9df600b 100644 --- a/Week-3/InClass/DOM-practice/main.js +++ b/Week-3/InClass/DOM-practice/main.js @@ -4,8 +4,17 @@ console.log("Testing JS file loaded!") // Without changing any of the HTML or CSS, update the
tags so that they have white backgrounds. +let sectionTags = document.getElementsByTagName("section"); +console.log(sectionTags); +for (let i =0; i < sectionTags.length; i++){ + sectionTags[i].style.backgroundColor = "white"; +} +/* function changeBackGroundColor (){ + section.style.backgroundColor = "yellow"; +} +sectionTags.forEach(changeBackGroundColor); */ @@ -15,11 +24,32 @@ console.log("Testing JS file loaded!") // Hint: look at the CSS to see if there are any classes already written which you can use. +let images = document.getElementsByTagName("img"); - - +for (let i=0; i < images.length; i++){ + images[i].className = "img-center"; +} // Task 3 // Google the date of birth and death of each of the people on the page. Without changing any of the HTML or CSS, add this in a paragraph to the end of their
. + + +let graceHopper = document.createElement("p"); +graceHopper.textContent = `She was born December 9, 1906 and died January 1, 1992`; +sectionTags[0].appendChild(graceHopper); + +let katherineJohnson = document.createElement("p"); +katherineJohnson.textContent = `She was born August 26, 1918 and died February 24, 2020`; +sectionTags[1].appendChild(katherineJohnson); + +let adaLovelace = document.createElement("p"); +adaLovelace.textContent = `She was born December 10, 1915 and died November 27, 1852`; +sectionTags[2].appendChild(adaLovelace); + +/* for (let i =0; i < sectionTags.length; i++){ + let newPElm = document.createElement("p"); + //sectionTags[i].style.backgroundColor = "green"; +} */ + diff --git a/Week-3/InClass/DOM-practice/styles.css b/Week-3/InClass/DOM-practice/styles.css index 6623604..b264955 100644 --- a/Week-3/InClass/DOM-practice/styles.css +++ b/Week-3/InClass/DOM-practice/styles.css @@ -23,6 +23,11 @@ footer { img { max-width: 300px; } + .img-center{ + display: block; + margin-left: auto; + margin-right: auto; + } section { padding: 2%;