diff --git a/01_Fundamentals_Javascript/starter/index.html b/01_Fundamentals_Javascript/starter/index.html index 34c99a3..6558f12 100644 --- a/01_Fundamentals_Javascript/starter/index.html +++ b/01_Fundamentals_Javascript/starter/index.html @@ -6,8 +6,9 @@ Document -

Hello World

+

lorem laksd kl kasn zxlkj j oqiwueqo iiwj lnlkjqlkjwlkjqlheqwe ij qlkwje lorem laksd kl kasn zxlkj j oqiwueqo iiwj lnlkjqlkjwlkjqlheqwe ij qlkwje lorem laksd kl kasn zxlkj j oqiwueqo iiwj lnlkjqlkjwlkjqlheqwe ij qlkwje lorem laksd kl kasn zxlkj j oqiwueqo iiwj lnlkjqlkjwlkjqlheqwe ij qlkwje lorem laksd kl kasn zxlkj j oqiwueqo iiwj lnlkjqlkjwlkjqlheqwe ij qlkwje lorem laksd kl kasn zxlkj j oqiwueqo iiwj lnlkjqlkjwlkjqlheqwe ij qlkwje lorem laksd kl kasn zxlkj j oqiwueqo iiwj lnlkjqlkjwlkjqlheqwe ij qlkwje

+ diff --git a/06_Functions/index.html b/06_Functions/index.html index eb5e144..012edf5 100644 --- a/06_Functions/index.html +++ b/06_Functions/index.html @@ -1,32 +1,45 @@ - - - - + + + Function - + - - - -

Function

- - - - - - - - - - - - - \ No newline at end of file + + + diff --git a/06_Functions/main.js b/06_Functions/main.js index 4711b40..9364b91 100644 --- a/06_Functions/main.js +++ b/06_Functions/main.js @@ -1,6 +1,48 @@ "use strict"; // Start Learning Functions +// Coding Challenge +(function () { + const header = document.querySelector("h2"); + header.style.color = "red"; + + document.querySelector("body").addEventListener("click", function () {}); +})(); + +// Closure in functions +//TODO: Review Closure +// Make a function named washPlate that accept 2 arguments +// 1. n = number of plates +// 2. wait = time before washing +// Devide the plate by 4 groups +// Display in string format after (wait) seconds +// "I am now washing (n) of plates. There are 4 groups, each group are (membersCount)" + +// const washPlate = function (n, wait) { +// let membersCount = n / 4; +// setTimeout(function () { +// console.log( +// `I have washed ${n} plates.\nThere are 4 groups of plate, each group are ${membersCount}` +// ); +// }, wait * 1000); + +// console.log(`Wait for ${wait} seconds to finish washing the plates`); +// }; +// // const membersCount = 90; +// // washPlate(200, 3); + +// Accessi1ng all the variable from its parents +// const parentFunc = function () { +// let b = 100; +// return function () { +// b++; +// console.log(b); +// }; +// }; + +// const newFunc = parentFunc(); +// newFunc(); +// newFunc(); // CODING CHALLENGE DONE - USING CALL METHOD // const poll = { diff --git a/07_Array_methods/icon.png b/07_Array_methods/icon.png new file mode 100644 index 0000000..d00606e Binary files /dev/null and b/07_Array_methods/icon.png differ diff --git a/07_Array_methods/index.html b/07_Array_methods/index.html new file mode 100644 index 0000000..798996b --- /dev/null +++ b/07_Array_methods/index.html @@ -0,0 +1,129 @@ + + + + + + + + + + + + Bankist + + + + + +
+ +
+
+

Current balance

+

+ As of 05/03/2037 +

+
+

0000€

+
+ + +
+
+
2 deposit
+
3 days ago
+
4 000€
+
+ +
+
+ 1 withdrawal +
+
24/01/2037
+
-378€
+
+
+ + +
+

In

+

0000€

+

Out

+

0000€

+

Interest

+

0000€

+ +
+ + +
+

Transfer money

+
+ + + + + +
+
+ + +
+

Request loan

+
+ + + +
+
+ + +
+

Close account

+
+ + + + + +
+
+ + +

+ You will be logged out in 05:00 +

+
+ + + + + + \ No newline at end of file diff --git a/07_Array_methods/logo.png b/07_Array_methods/logo.png new file mode 100644 index 0000000..f437ac2 Binary files /dev/null and b/07_Array_methods/logo.png differ diff --git a/07_Array_methods/main.js b/07_Array_methods/main.js new file mode 100644 index 0000000..bc9f50b --- /dev/null +++ b/07_Array_methods/main.js @@ -0,0 +1,608 @@ +"use strict"; + +///////////////////////////////////////////////// +///////////////////////////////////////////////// +// BANKIST APP + +// Data +const account1 = { + owner: 'Jonas Schmedtmann', + movements: [200, 450, -400, 3000, -650, -130, 70, 1300], + interestRate: 1.2, // % + pin: 1111, +}; + +const account2 = { + owner: 'Jessica Davis', + movements: [5000, 3400, -150, -790, -3210, -1000, 8500, -30], + interestRate: 1.5, + pin: 2222, +}; + +const account3 = { + owner: 'Steven Thomas Williams', + movements: [200, -200, 340, -300, -20, 50, 400, -460], + interestRate: 0.7, + pin: 3333, +}; + +const account4 = { + owner: 'Sarah Smith', + movements: [430, 1000, 700, 50, 90], + interestRate: 1, + pin: 4444, +}; + +const accounts = [account1, account2, account3, account4]; + +// Elements +const labelWelcome = document.querySelector('.welcome'); +const labelDate = document.querySelector('.date'); +const labelBalance = document.querySelector('.balance__value'); +const labelSumIn = document.querySelector('.summary__value--in'); +const labelSumOut = document.querySelector('.summary__value--out'); +const labelSumInterest = document.querySelector('.summary__value--interest'); +const labelTimer = document.querySelector('.timer'); + +const containerApp = document.querySelector('.app'); +const containerMovements = document.querySelector('.movements'); + +const btnLogin = document.querySelector('.login__btn'); +const btnTransfer = document.querySelector('.form__btn--transfer'); +const btnLoan = document.querySelector('.form__btn--loan'); +const btnClose = document.querySelector('.form__btn--close'); +const btnSort = document.querySelector('.btn--sort'); + +const inputLoginUsername = document.querySelector('.login__input--user'); +const inputLoginPin = document.querySelector('.login__input--pin'); +const inputTransferTo = document.querySelector('.form__input--to'); +const inputTransferAmount = document.querySelector('.form__input--amount'); +const inputLoanAmount = document.querySelector('.form__input--loan-amount'); +const inputCloseUsername = document.querySelector('.form__input--user'); +const inputClosePin = document.querySelector('.form__input--pin'); +const moveDepot = document.querySelector('movements__type--deposit') + +// Implement Login Function +let currentUser; + +btnLogin.addEventListener('click', (e)=>{ + // Prevent from submitting + e.preventDefault(); + + // Check if the value in input field exist in the accounts + currentUser = accounts.find((user)=>{ + return user.userName === inputLoginUsername.value + }) + + // Assign value if the input is not found + currentUser == undefined ? "No user login" : "" + console.log(currentUser); + + // Check the pin in the user if matches + if(currentUser?.pin == Number(inputLoginPin.value)){ + // Display page + // containerApp.style.opacity = "1"; + + // Remove input data in fields + inputLoginUsername.value = inputLoginPin.value = ""; + inputLoginPin.blur() + + // Display Name in page + labelWelcome.textContent = `Welcome ${currentUser.owner}` + + //Display movements + displayAccountMovement(currentUser.movements) + + //Display balance and summary + displayeSummary(currentUser) + } +}) + + +const displayAccountMovement = function(data){ +containerMovements.innerHTML = '' +data.map(function(el,i){ + const type = el > 0 ? 'deposit' : 'withdrawal'; + + const html = ` +
+
${i+1} ${type}
+
You ${type} ${i+1} days ago
+
${Math.abs(el)}€
+
+ `; + containerMovements.insertAdjacentHTML('afterbegin',html) +}); +} +// displayAccountMovement(account1.movements) + +const getUserName = function(data){ + data.forEach(val => { + val.userName = val.owner. + toLowerCase(). + split(" "). + map((i)=>{ + return i[0] + }).join(""); + }); +} +getUserName(accounts); + +const displayeSummary = function(data){ + // Total DEPOSIT in FILTER Method + const totalDeposit = data.movements.filter((amount)=>{ + return amount > 0 + }).reduce((pre, cur)=>{ + return pre + cur + }, 0); + labelSumIn.innerHTML = totalDeposit; + + // Total WITHDRAWAL in FILTER Method + const totalWithdraw = data.movements.filter((amount)=>{ + return amount < 0; + }).reduce((pre, curr)=>{ + return pre +curr + },0); + labelSumOut.innerHTML = Math.abs(totalWithdraw); + + // Interest in every deposit and sum + const inter = data.movements.filter((amount)=>{ + return amount > 0; + }).map((positive)=>{ + return positive * data.interestRate / 100 + }).filter((validInter)=>{ + return validInter >= 1 + }).reduce((prev, eachInter)=>{ + return eachInter + prev + },0) + labelSumInterest.textContent = inter; + + data.balance = data.movements.reduce((acc, curr)=>{ + return acc + curr + }) + labelBalance.innerHTML = `${data.balance}$` +} + +// GET Transfer Method +btnTransfer.addEventListener("click", function(e){ + e.preventDefault() + + const to = inputTransferTo.value; + const amount = Number(inputTransferAmount.value); + + // Check if receiver exist + const res = accounts.find((acc)=>{ + return acc.userName == to + }) + + // Check if user does exist + if(res == undefined){ + return console.log("Reciever don't exist"); + } + + // Check if balance is not less that 0 + if(currentUser.balance <= 0){ + return console.log("Dont have enough balance"); + } + + // Check if balance is not less that 0 + if(amount <= 0){ + return console.log("You can't send 0"); + } + + // Check if amount is not greater than balance + if(amount > currentUser.balance){ + return console.log("Money must not greater than balance"); + } + + // console.log(res.userName); + // Check if user is not thesame with the reciever + if(res.userName === currentUser.userName){ + return console.log("You can't send money to your own account"); + } + + res.movements.push(Number(amount)) + currentUser.movements.push(-Number(amount)) + //Display movements + displayAccountMovement(currentUser.movements) + //Display balance and summary + displayeSummary(currentUser) + + inputTransferTo.value = inputTransferAmount.value = "" + console.log(res); + +}) + +// Array method practice + +//total of all sum in deposits + + + + +// const userDetails = accounts.find((i)=>{ +// return i.owner === "Sarah Smith" +// }) +// console.log(userDetails); +// let val = [] +// for (const [index, data] of accounts.entries()) { +// if(data.owner == "Jessica Davis"){ +// val.push(accounts[index]) +// } +// } +// console.log(val); + + +// console.log(accounts); + + +// Get MAX Value +// const getMaxVal = function(data){ +// const maxV = data.movements.reduce((prev, curr)=>{ +// return prev > curr ? prev : curr +// },data.movements[0]) +// return maxV; +// } +// console.log(`Maximum Value is ${getMaxVal(account1)}`); + +// console.log(getMaxVal(account1)); + +// DEPOSIT in For of Loop +// const storeResult = [] +// for(const i of account1.movements) { +// if(i>0){ +// storeResult.push(i) +// } +// } +// console.log(storeResult); + +// console.log(deposits(account1)); +// console.log(withdrawals(account1)); +// getBalance(account1) + + +// Challenge Begin -- +// Coding Challenge #2 + +/* +Let's go back to Julia and Kate's study about dogs. This time, they want to convert dog ages to human ages and calculate the average age of the dogs in their study. + +Create a function 'calcAverageHumanAge', which accepts an arrays of dog's ages ('ages'), and does the following things in order: + + + + +4. Run the function for both test datasets + +TEST DATA 1: [5, 2, 4, 1, 15, 8, 3] +TEST DATA 2: [16, 6, 10, 5, 6, 1, 4] +*/ + +// const calcAverageHumanAge = function(ages){ +// const ageAve = ages.map((age)=>{ +// return age <= 2 ? 2 * age : 16 + age * 4; +// }).filter((convertAge)=>{ +// return convertAge >= 18 +// }).reduce((prev, legalAge, i, k)=>{ +// return prev + legalAge / k.length +// }, 0) +// console.log(`Average ${ageAve}`); +// } +// calcAverageHumanAge([5, 2, 4, 1, 15, 8, 3]) +// calcAverageHumanAge([16, 6, 10, 5, 6, 1, 4]) + +///////////////////////////////////////////////// +// LECTURES + +// const currencies = new Map([ +// ['USD', 'United States dollar'], +// ['EUR', 'Euro'], +// ['GBP', 'Pound sterling'], +// ]); + +// const movements = [200, 450, -400, 3000, -650, -130, 70, 1300]; + +// Total Bank Deposits +// const totalDeposit = accounts.flatMap((acc)=>{ +// return acc.movements +// }).filter((posi)=>{ +// return posi > 0 +// }).reduce((prev, curr)=>{ +// return prev + curr +// },0) +// console.log(totalDeposit); + +// console.log('Get all 1000 deposits'); + +// const all1k = accounts.flatMap((acc)=>{ +// return acc.movements +// }).filter((all1k)=>{ +// return all1k > 1000 +// }).length; +// console.log(all1k); + +// console.log('Objects with withdrawal and deposits'); + +// const depowith = accounts.flatMap((acc)=>{ +// return acc.movements +// }).reduce((prev, curr)=>{ +// curr > 0 ? prev.deposit += curr : prev.withdrawal += curr; +// return prev +// },{deposit: 0, withdrawal: 0}) + +// console.log(depowith); +// console.log("-------- All string to title case ot capital case -------"); + +// const convertTitleCase = function(params){ +// const exceptions = ["at","in", "or","to","a","is","the"]; +// const convertedTitle = params.toLowerCase().split(" ").map((word)=>{ +// if(!exceptions.includes(word)){ +// return word[0].toUpperCase() + word.slice(1) +// } +// return word +// }) +// return convertedTitle.join(" "); +// } + + +// console.log(convertTitleCase("this is one of the TITLE to be a blame game")); +// console.log(convertTitleCase("find me this FLAMING")); +// console.log(convertTitleCase("dont be a HANDSOME")); + + +// Coding Challenge #4 + +/* +Julia and Kate are still studying dogs, and this time they are studying if dogs are eating too much or too little. +Eating too much means the dog's current food portion is larger than the recommended portion, and eating too little is the opposite. +Eating an okay amount means the dog's current food portion is within a range 10% above and 10% below the recommended portion (see hint). + +1. Loop over the array containing dog objects, and for each dog, calculate the recommended food portion and add it to the object as a new property. Do NOT create a new array, simply loop over the array. Forumla: recommendedFood = weight ** 0.75 * 28. (The result is in grams of food, and the weight needs to be in kg) +2. Find Sarah's dog and log to the console whether it's eating too much or too little. HINT: Some dogs have multiple owners, so you first need to find Sarah in the owners array, and so this one is a bit tricky (on purpose) 🤓 +3. Create an array containing all owners of dogs who eat too much ('ownersEatTooMuch') and an array with all owners of dogs who eat too little ('ownersEatTooLittle'). +4. Log a string to the console for each array created in 3., like this: "Matilda and Alice and Bob's dogs eat too much!" and "Sarah and John and Michael's dogs eat too little!" +5. Log to the console whether there is any dog eating EXACTLY the amount of food that is recommended (just true or false) +6. Log to the console whether there is any dog eating an OKAY amount of food (just true or false) +7. Create an array containing the dogs that are eating an OKAY amount of food (try to reuse the condition used in 6.) +8. Create a shallow copy of the dogs array and sort it by recommended food portion in an ascending order (keep in mind that the portions are inside the array's objects) + +HINT 1: Use many different tools to solve these challenges, you can use the summary lecture to choose between them 😉 +HINT 2: Being within a range 10% above and below the recommended portion means: current > (recommended * 0.90) && current < (recommended * 1.10). Basically, the current portion should be between 90% and 110% of the recommended portion. + +TEST DATA: +const dogs = [ + { weight: 22, curFood: 250, owners: ['Alice', 'Bob'] }, + { weight: 8, curFood: 200, owners: ['Matilda'] }, + { weight: 13, curFood: 275, owners: ['Sarah', 'John'] }, + { weight: 32, curFood: 340, owners: ['Michael'] } +]; + +GOOD LUCK 😀 +*/ +// TODO: +// Challenge 1 + + +const dogs = [ + { weight: 22, curFood: 284, owners: ['Alice', 'Bob'] }, + { weight: 8, curFood: 200, owners: ['Matilda'] }, + { weight: 13, curFood: 275, owners: ['Sarah', 'John'] }, + { weight: 32, curFood: 340, owners: ['Michael'] }, +]; + +// 1. Loop over the array containing dog objects, and for each dog, calculate the recommended food portion and add it to the object as a new property. Do NOT create a new array, simply loop over the array. Forumla: recommendedFood = weight ** 0.75 * 28. (The result is in grams of food, and the weight needs to be in kg) +const depotsss = accounts.flatMap((data)=>{ + return data.movements +}).reduce((prev, curr)=>{ + return curr >= 1000 ? prev + 1 : prev +},0) +const alldep = accounts.flatMap((data)=>{ + return data.movements +}) +console.log(alldep); + +console.log(depotsss); + + + +console.log(`------------Answer 1--------------`); +dogs.forEach((dog)=>{ + const recoF = dog.weight ** 0.75 * 28 + dog.recoFood = Math.trunc(recoF) +}) +console.log(dogs); + + + +// 2. Find Sarah's dog and log to the console whether it's eating too much or too little. HINT: Some dogs have multiple owners, so you first need to find Sarah in the owners array, and so this one is a bit tricky (on purpose) 🤓 +console.log(`---------------Answer 2-------------`); + +const ownersarah = dogs.find((user)=>{ + return user.owners.includes("Sarah") +}) +const isEatingTooMuch = ownersarah.curFood > ownersarah.recoFood +console.log(`Sarah's dog is eating ${isEatingTooMuch ? 'Too much' : 'Right amount'}`); + + +// 3. Create an array containing all owners of dogs who eat too much ('ownersEatTooMuch') and an array with all owners of dogs who eat too little ('ownersEatTooLittle'). +// TODO: make use of the problem solving technique +console.log(`----------------Answer 3-------------`); + +// Create ownersEatTooMuch Array +const ownersEatTooMuch = dogs.filter((dogsOwner)=>{ + return dogsOwner.curFood > dogsOwner.recoFood +}).flatMap((owner)=>{ + return owner.owners +}) + +const ownersEatTooLittle = dogs.filter((dogsOwner)=>{ + return dogsOwner.curFood < dogsOwner.recoFood +}).flatMap((owner)=>{ + return owner.owners +}) +console.log(ownersEatTooMuch); +console.log(ownersEatTooLittle); + + +console.log(`----------------Answer 4-------------`); +// 4. Log a string to the console for each array created in 3., like this: "Matilda and Alice and Bob's dogs eat too much!" and "Sarah and John and Michael's dogs eat too little!" + +// console.log(`List of dog ${dogsList.}`); + + +console.log(`Owners who eats too little ${ownersEatTooLittle.join(" and ")}`); +console.log(`Owners who eats too MUCH ${ownersEatTooMuch.join(" and ")}`); + + +// 5. Log to the console whether there is any dog eating EXACTLY the amount of food that is recommended (just true or false) +const exactFood = dogs.find((food)=>{ + return food.curFood == food.recoFood +}) +console.log(exactFood); +console.log(`----------------Answer 5-------------`); + + +//6. Log to the console whether there is any dog eating an OKAY amount of food (just true or false) +const okAmount = dogs.some((dog)=>{ + return dog.curFood > dog.recoFood * 0.90 && dog.curFood < dog.recoFood * 1.10 +}) +console.log(okAmount); +console.log(`----------------Answer 6-------------`); + + +const allOkAmount = dogs.filter((dog)=>{ + return dog.curFood > dog.recoFood * 0.90 && dog.curFood < dog.recoFood * 1.10 +}) +console.log(allOkAmount); +console.log(`----------------Answer 7-------------`); + + +//8. Create a shallow copy of the dogs array and sort it by recommended food portion in an ascending order (keep in mind that the portions are inside the array's objects) +const shalowSort = dogs.slice().sort((a,b)=>{ + return a.recoFood - b.recoFood +}) +console.log(shalowSort); + +console.log(`----------------Answer 8-------------`); + + + +/* +1. Ask a question(Clarify all) +2. Divide and conquer + a. break the problem into sub problems to make it easy to solve +3. Search as much as possible +4. WRITE PSEUDO-CODE to know the flow of the code you write to have vision +*/ + + + +// --- Coding Challege --- +// const julia = [3,5,2,12,7]; +// const kate = [4,1,15,8,3]; + +// // const finalData = [...kate, ...julia.slice(1,3)] + +// const checkDogs = function(dogsJulia, dogsKate){ +// // Step 1 +// const finalJulia = dogsJulia.slice(); + +// finalJulia.splice(0,1) +// finalJulia.splice(-2) + +// //Step 2 +// const dogs = dogsKate.concat(finalJulia) + +// //Step 3 +// const result = dogs.map(function(year, index){ +// return year >= 3 +// ? `the dog number ${index+1} is Adult, and is ${year} year old` +// : `the dog number ${index+1} still a puppy, ${year} year old` +// }); +// console.log(result); +// } + +// checkDogs(julia, kate) + +// console.log('-----------'); + + +// const newArr = [...aray, ...aray2] + +// console.log(aray.concat(aray2)); + +// console.log(newArr); + + + + + +// Loop Over arrays +// const accountMovement = [ +// 100, 300, 5000, -3000, 1000, -900, -800, 980, +// ]; +// const eutoToUsd = 1.1; + +// const result = accountMovement.map((i)=>{ +// return i * eutoToUsd +// }) +// console.log(result); + + +// accountMovement.forEach(function(val){ +// if (val > 0) { +// total = total +// console.log(`You deposit ${each}`); +// } +// if (val < 0) { +// console.log(`You withdrawn ${Math.abs(each)}`); +// } +// }) + +// for (const each of accountMovement) { +// if (each > 0) { +// console.log(`You deposit ${each}`); +// } +// if (each < 0) { +// console.log(`You withdrawn ${Math.abs(each)}`); +// } +// } +// console.log(`--------------This is foreach---------------`); +// accountMovement.forEach(function (val, placeMent, arrVal) { +// console.log( +// `This is the value: ${val}\nLoop number: ${ +// placeMent + 1 +// }\nThis is the array value ${arrVal}` +// ); +// }); +// Getting the value by using at method +// console.log("Hello Arrays "); +// const compName = "AMSG88"; +// const arrVals = ["Jessie", true, false, 234, Object, "Last Part"]; +// console.log(arrVals.at(4)); +// console.log(arrVals.at(-1)); +// console.log("---------"); +// console.log(compName.at()); + +// --------- Simple Array Methods ----------- +// const pname = "Jessie Caminos"; +// const newAr = ["a", "b", "c", "d", "e"]; + +// console.log(newAr.slice(2, 4)); +// console.log(newAr); +// console.log(newAr); +// console.log([...pname]); +// console.log(newAr.splice(0, 3)); +// console.log(newAr); + +// const newAr2 = ["i", "h", "g", "f", "e"]; +// console.log(newAr2.reverse()); +// console.log(newAr2); + +// const fname = "Jessie"; +// const lname = "Caminos"; +// console.log(fname.concat(lname)); +// console.log(lname.concat(newAr)); +// console.log([...fname, ...lname]); + +// console.log(newAr.join("")); diff --git a/07_Array_methods/style.css b/07_Array_methods/style.css new file mode 100644 index 0000000..dc4ed47 --- /dev/null +++ b/07_Array_methods/style.css @@ -0,0 +1,297 @@ +/* + * Use this CSS to learn some intersting techniques, + * in case you're wondering how I built the UI. + * Have fun! 😁 + */ + + * { + margin: 0; + padding: 0; + box-sizing: inherit; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: "Poppins", sans-serif; + color: #444; + background-color: #f3f3f3; + height: 100vh; + padding: 2rem; +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 2rem; +} + +.welcome { + font-size: 1.9rem; + font-weight: 500; +} + +.logo { + height: 5.25rem; +} + +.login { + display: flex; +} + +.login__input { + border: none; + padding: 0.5rem 2rem; + font-size: 1.6rem; + font-family: inherit; + text-align: center; + width: 12rem; + border-radius: 10rem; + margin-right: 1rem; + color: inherit; + border: 1px solid #fff; + transition: all 0.3s; +} + +.login__input:focus { + outline: none; + border: 1px solid #ccc; +} + +.login__input::placeholder { + color: #bbb; +} + +.login__btn { + border: none; + background: none; + font-size: 2.2rem; + color: inherit; + cursor: pointer; + transition: all 0.3s; +} + +.login__btn:hover, +.login__btn:focus, +.btn--sort:hover, +.btn--sort:focus { + outline: none; + color: #777; +} + +/* MAIN */ +.app { + position: relative; + max-width: 100rem; + margin: 4rem auto; + display: grid; + grid-template-columns: 4fr 3fr; + grid-template-rows: auto repeat(3, 15rem) auto; + gap: 2rem; + + /* NOTE This creates the fade in/out anumation */ + /* opacity: 0; */ + transition: all 1s; +} + +.balance { + grid-column: 1 / span 2; + display: flex; + align-items: flex-end; + justify-content: space-between; + margin-bottom: 2rem; +} + +.balance__label { + font-size: 2.2rem; + font-weight: 500; + margin-bottom: -0.2rem; +} + +.balance__date { + font-size: 1.4rem; + color: #888; +} + +.balance__value { + font-size: 4.5rem; + font-weight: 400; +} + +/* MOVEMENTS */ +.movements { + grid-row: 2 / span 3; + background-color: #fff; + border-radius: 1rem; + overflow: scroll; +} + +.movements__row { + padding: 2.25rem 4rem; + display: flex; + align-items: center; + border-bottom: 1px solid #eee; +} + +.movements__type { + font-size: 1.1rem; + text-transform: uppercase; + font-weight: 500; + color: #fff; + padding: 0.1rem 1rem; + border-radius: 10rem; + margin-right: 2rem; +} + +.movements__date { + font-size: 1.1rem; + text-transform: uppercase; + font-weight: 500; + color: #666; +} + +.movements__type--deposit { + background-image: linear-gradient(to top left, #39b385, #9be15d); +} + +.movements__type--withdrawal { + background-image: linear-gradient(to top left, #e52a5a, #ff585f); +} + +.movements__value { + font-size: 1.7rem; + margin-left: auto; +} + +/* SUMMARY */ +.summary { + grid-row: 5 / 6; + display: flex; + align-items: baseline; + padding: 0 0.3rem; + margin-top: 1rem; +} + +.summary__label { + font-size: 1.2rem; + font-weight: 500; + text-transform: uppercase; + margin-right: 0.8rem; +} + +.summary__value { + font-size: 2.2rem; + margin-right: 2.5rem; +} + +.summary__value--in, +.summary__value--interest { + color: #66c873; +} + +.summary__value--out { + color: #f5465d; +} + +.btn--sort { + margin-left: auto; + border: none; + background: none; + font-size: 1.3rem; + font-weight: 500; + cursor: pointer; +} + +/* OPERATIONS */ +.operation { + border-radius: 1rem; + padding: 3rem 4rem; + color: #333; +} + +.operation--transfer { + background-image: linear-gradient(to top left, #ffb003, #ffcb03); +} + +.operation--loan { + background-image: linear-gradient(to top left, #39b385, #9be15d); +} + +.operation--close { + background-image: linear-gradient(to top left, #e52a5a, #ff585f); +} + +h2 { + margin-bottom: 1.5rem; + font-size: 1.7rem; + font-weight: 600; + color: #333; +} + +.form { + display: grid; + grid-template-columns: 2.5fr 2.5fr 1fr; + grid-template-rows: auto auto; + gap: 0.4rem 1rem; +} + +/* Exceptions for interst */ +.form.form--loan { + grid-template-columns: 2.5fr 1fr 2.5fr; +} +.form__label--loan { + grid-row: 2; +} +/* End exceptions */ + +.form__input { + width: 100%; + border: none; + background-color: rgba(255, 255, 255, 0.4); + font-family: inherit; + font-size: 1.5rem; + text-align: center; + color: #333; + padding: 0.3rem 1rem; + border-radius: 0.7rem; + transition: all 0.3s; +} + +.form__input:focus { + outline: none; + background-color: rgba(255, 255, 255, 0.6); +} + +.form__label { + font-size: 1.3rem; + text-align: center; +} + +.form__btn { + border: none; + border-radius: 0.7rem; + font-size: 1.8rem; + background-color: #fff; + cursor: pointer; + transition: all 0.3s; +} + +.form__btn:focus { + outline: none; + background-color: rgba(255, 255, 255, 0.8); +} + +.logout-timer { + padding: 0 0.3rem; + margin-top: 1.9rem; + text-align: right; + font-size: 1.25rem; +} + +.timer { + font-weight: 600; +} \ No newline at end of file diff --git a/JS_Async_Await/index.html b/JS_Async_Await/index.html index 625e4df..7948a06 100644 --- a/JS_Async_Await/index.html +++ b/JS_Async_Await/index.html @@ -5,55 +5,15 @@ - + Asynchronous JavaScript -
-
-
- - - - - - - - - - - -
NameCapitalLanguagePopulation
-
-
- - - - - - - - - - - -
NameCapitalLanguagePopulation
-
-
- - + sample image +
+
+ +
-
-
- -
- - - - - - - - \ No newline at end of file + \ No newline at end of file diff --git a/JS_Async_Await/main.js b/JS_Async_Await/main.js index 59572d9..083ab86 100644 --- a/JS_Async_Await/main.js +++ b/JS_Async_Await/main.js @@ -1,599 +1,283 @@ -'use strict'; - -// document.querySelector('#intro').textContent = 'Hello from Java Script World'; -// document.querySelector('#intro').classList.add('text-center'); - -// const renderData = function(data, table){ -// const langu = Object.values(data.languages); -// const html = ` -// -// ${data.name.common} -// ${data.capital} -// ${langu[0]} -// ${data.population} -// -// `; -// document.querySelector(table).insertAdjacentHTML('beforeend', html); -// } - -// const renderEmpty = function(table){ -// const html = ` -// -// empty -// empty -// empty -// empty -// -// `; -// document.querySelector(table).insertAdjacentHTML('beforeend', html); +"use strict"; +// https://countries-api-836d.onrender.com/countries/ + +// const getCountry = (countryName)=>{ +// const request = new XMLHttpRequest(); +// request.open('GET',`https://restcountries.com/v3.1/name/${countryName}`) +// request.send(); +// // console.log(request.responseText); + +// request.addEventListener('load',function(){ +// // console.log(this.responseText); +// const [data] = JSON.parse(this.responseText) +// console.log(data); +// const html = ` +//
+// +//
+//

${data.name.common}

+//

REGION

+//

👫POP people

+//

🗣️LANG

+//

💰CUR

+//
+//
+// `; +// countriesContainer.insertAdjacentHTML('beforeend', html); +// countriesContainer.style.opacity = 1; +// }) // } +// getCountry('canada') +// getCountry('philippines') +// getCountry('japan') +const btnCountry = document.querySelector(".btn-country"); +const countriesContainer = document.querySelector(".countries"); + +const renderCountry = (data) => { + const html = ` +
+ +
+

${data.name.common}

+

REGION

+

👫${data.population}

+

🗣️${data.languages.eng}

+

💰${Object.keys(data.currencies)}

+
+
+`; + countriesContainer.insertAdjacentHTML("beforeend", html); + countriesContainer.style.opacity = 1; +}; + +// --> Use Promise <-- +// const getData = fetch('https://restcountries.com/v3.1/name/philippines') +// console.log(getData); + +// const getData = (url, errorMessage) => { +// return fetch(`${url}`).then((res) => { +// if (!res.ok) throw new Error(`${errorMessage} ${res.status}`); +// return res.json(); +// }); +// }; -// const getdata = function(name){ -// fetch(`https://restcountries.com/v3.1/name/${name}`) -// .then(response => { -// if(!response.ok){ -// throw new Error('country not found') -// } -// return response.json() -// }) -// .then(data => { -// // console.log(data[0].languages); -// renderData(data[0], '.country') - -// const neigbr = data[0].borders?.[0]; -// if(!neigbr) return new Error('No neighbor found'); +// const renderError =(err)=>{ +// countriesContainer.insertAdjacentHTML('afterend', err) +// } -// return fetch(`https://restcountries.com/v3.1/alpha/fdfdfdf`); -// }) -// .then(response => { -// if(!response.ok){ -// throw new Error('country not found') +// const viewCountry = (countryName) => { +// getData( +// `https://restcountries.com/v3.1/name/${countryName}`, +// "Country not found" +// ) +// .then((data) => { +// renderCountry(data[0]); +// if (!data[0]?.borders) { +// throw new Error("No Neigbor Found"); // } -// return response.json() +// return getData( +// `https://restcountries.com/v3.1/name/${neighbor}`, +// "Country not found" +// ); // }) -// .then(data => { -// renderData(data[0], '.neig'); +// .then((data) => { +// renderCountry(data[0]); // }) -// .catch(err => console.log(err)) -// } - -// getdata('china'); -// getdata('usa'); -// getdata('philippines'); - -// document.querySelector('.btn-country').addEventListener('click', function(){ -// getdata('canada'); -// }) - +// .catch((erro) => { +// console.log(erro); +// renderError(erro); +// }); +// }; +// btnCountry.addEventListener("click", function () { +// viewCountry("philippines"); +// }); +// viewCountry("australia"); + +const getLoc = () => { + return new Promise((resolve)=>{ + navigator.geolocation.getCurrentPosition(resolve) + }) +} -// const renderData = function(data, table){ -// // const langu = Object.values(data.languages); -// const html = ` -// -// ${data.name.common} -// ${data.capital} -// ${data.capital} -// ${data.population} -// -// `; -// document.querySelector(table).insertAdjacentHTML('beforeend', html); -// } -// const renderEmpty = function(table){ -// const html = ` -// -// empty -// empty -// empty -// empty -// -// `; -// document.querySelector(table).insertAdjacentHTML('beforeend', html); -// } - -// const getJson = function(url){ -// return fetch(`${url}`) -// .then(response => { -// -// // The if handles the fetch method to reject the request -// if(!response.ok){ -// throw new Error('country not found') +// Make a function "whereAmI" that accept 2 argument Lat and Lang +// const whereAmI = () => { +// // Reverse geocode the lat and lng +// getLoc().then((location)=>{ +// const {latitude: lat, longitude: lng} = location.coords; +// return fetch( +// `https://api-bdc.net/data/reverse-geocode-client?latitude=${lat}&longitude=${lng}&localityLanguage=en` +// ) +// }) +// .then((res) => { +// // Create new promise +// if (!res.ok) { +// throw new Error("Latitude and Longitude not exist"); // } -// return response.json() +// return res.json(); // }) -// } - -// const getdata = function(name){ -// getJson(`https://restcountries.com/v3.1/name/${name}`) -// .then(data => { -// // console.log(data[0].languages); -// console.log(data); -// renderData(data[0], '.country') - -// const neigbr = data[0].borders?.[0]; -// if(!neigbr) return new Error('No neighbor found'); - -// return getJson(`https://restcountries.com/v3.1/alpha/${neigbr}`); +// .then((data) => { +// // Log to the console the location like name +// console.log( +// `You are in the: ${data.countryName}, ${data.locality}, ${data.principalSubdivision}` +// ); +// const removeThe = data.countryName +// .toLowerCase() +// .replace("(the)", "") +// .slice(0, -1) +// .split(" ") +// .map((char) => { +// return char[0].toUpperCase() + char.slice(1); +// }) +// .join(" "); +// // console.log(removeThe); +// return fetch(`https://restcountries.com/v3.1/name/${removeThe}`); // }) -// .then(data => { -// console.log(data); -// renderData(data[0], '.neig'); +// .then((res) => { +// return res.json(); // }) -// .catch(err => console.log(err)) -// } - -// getdata('china'); -// getdata('usa'); -// getdata('philippines'); - -// document.querySelector('.btn-country').addEventListener('click', function(){ -// getdata('canada'); -// }) - - -// ----------------------------------------------------- -// Create function that accepts lat and lng -// Reverse geocode from coordinates to location -// Log the message to console "You are in philippines" -// Chain catch method to log if there is error -// Make error handlers to catch the errors that can't be handle by fetch method -// -> make if statement inside response method -// ----------------------------------------------------- - -// const whereI = function(lat, lng){ -// fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${lat}&longitude=${lng}`) -// .then(response => { -// if(!response.ok){ -// throw new Error('No found response / response = false'); -// } -// return response.json() -// }) -// .then(data => { -// const location = data.countryName; - - // Iterate and get all the values of all the name attribute - // for (const iterator of location) { - // console.log(iterator.name); - // } -// console.log(`You are in the ${location}`); -// }). -// catch(err => { -// console.log(err.message); -// }) -// } - -// whereI(12.8797, 121.7740); -// whereI(52.508, 13.381); -// whereI(19.037, 72.837); - - - -// document.querySelector('.btn-country').addEventListener('click', function(){ -// }) - -// let result = document.querySelector('.output'); -// let img = document.querySelector('img'); -// img.src = 'jess.jpg'; - -// function last(){ -// console.log('hellor they're'); -// } - -// function names() { -// last() -// } - - -// fetch('https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=12.8797&longitude=121.7740') -// .then(function(res) { -// console.log(res); -// }) -// .then(data =>{ - -// }) - -// names() - - -// img.addEventListener('load', () => { -// console.log('Hello click'); -// }); - - -// Make a sample promise assigned to a variable -// let lottery = new Promise((resolve, rejects)=>{ -// // pic a randomp number from 1 - 0 -// let random = Math.random(); -// console.log(random); -// console.log('ON going PCSO....'); - -// // Make times 4 seconds then execute the code. -// setTimeout(function(){ - -// // Check if the random number if not greater 5 then loss -// if(!(random >= 0.5)){ -// return rejects('You losss') -// } - -// // Return resolve if the guard clause is not satisfied. -// return resolve('The number is greater then 0.5') -// }, 4000) - -// }) - - -// lottery -// // use then method to retrive the resolve -// .then(reslv => { -// console.log(reslv); -// }) -// // use catch method to get rejected. -// .catch(rejc => { -// console.log(rejc); -// }) - -// ----------------------------------- -// Promisifying -// ----------------------------------------------------- - -// const hulat = function(seconds){ -// const promise = new Promise((resolve) => { -// setTimeout(function(){ -// resolve(`waited ${seconds}`) -// }, seconds * 1000) -// }); -// return promise; -// } - -// hulat(3).then(response => { -// console.log(response); - -// // use return to pass the value to the next "then" method. -// return hulat(2) -// }) -// .then(res => { -// console.log(res); - -// // return another hulat -// return hulat(4) -// }) -// .then(res =>{ -// console.log(res); -// }) - - - - -// ----------------------------------------------------- -// Create google maps -// Add googlemaps -// Initialize and add the map -// let map; -// ----------------------------------------------------- - -// async function initMap(latitude, lngitude) { -// // The location of Uluru -// const position = { lat: latitude, lng: lngitude }; -// // Request needed libraries. -// //@ts-ignore -// const { Map } = await google.maps.importLibrary("maps"); -// const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); - -// // The map, centered at Uluru -// map = new Map(document.getElementById("whereI"), { -// zoom: 4, -// center: position, -// mapId: "DEMO_MAP_ID", -// }); - -// // The marker, positioned at Uluru -// const marker = new AdvancedMarkerElement({ -// map: map, -// position: position, -// title: "Uluru", -// }); -// } - -// End of google maps - - -// ---------------------- -// Keep promisifying all -// ----------------------------------------------------- - -// const currentlocation = function(){ -// const location = new Promise((resolve, reject) => { -// navigator.geolocation.getCurrentPosition(resolve, reject) -// }) -// return location; -// } - -// const getLocation = function(){ -// currentlocation().then(res => { -// let {latitude, longitude} = res.coords -// return fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${latitude}&longitude=${longitude}`) -// }) -// .then(res => { -// return res.json(); -// }) -// .then(data => { -// // return initMap(data.latitude, data.longitude); -// }) -// } -// console.log(); - -// display the maps -// getLocation(); -// initMap(20.910245, 17.853431); - - -// ----------------------------------------------------- -//TODO: Challenge. -// Make image promise -// display image in 2 sec -// hide image for 2 sec -// dislay another image -// hide again the image -// use promise apply the lessons learned. -// ----------------------------------------------------- - - -// const imageContainer = document.querySelector('.image-container') - -// const makeImage = function(path){ -// const imageEl = document.createElement('img'); -// const loadedImage = new Promise((resolve, reject)=>{ -// imageEl.src = path; -// // listen if the image event is load -// imageEl.addEventListener('load', function(){ -// imageContainer.append(imageEl) -// resolve(imageEl); -// }); - -// // listen if the image event is error -// imageEl.addEventListener('error', function(){ -// reject(new Error('No Image found')); +// .then((data) => { +// // console.log(data); +// renderCountry(data[0]); +// }) +// .catch((err) => { +// return console.error(`Something went wrong` + err); // }); -// }) - -// return loadedImage; -// } - -// const wait = function(seconds){ -// const waited = new Promise((resolve, reject) => { -// setTimeout(() => { -// resolve() -// }, seconds * 1000); -// }); -// return waited -// } - -// let imge; -// makeImage('./jess.jpg') -// .then(res => { -// imge = res -// console.log('displayed'); -// return wait(2) -// }) -// .then(() => { -// console.log('hide'); -// imge.style.display = "none" -// return makeImage('./gwapo.jpg') -// }) -// .then((res)=>{ -// imge = res -// return wait(2) -// }) -// .then(()=>{ -// imge.style.display = "none" -// }) -// .catch(err => { -// console.error(err); -// }) - -// ----------------------------------------------------- -// Do Async Await - -// ---------------- -// 1. Make a function that ask for knowing location named getPosition -// 2. Make a async function name getLocation -// 3. Call the function getPosition -// 4. Get the geolocation from the GetPosition (lat, lng) -// 5. Pass the lat and lng as arguments to the fetch method -// 6. Convert to json to data. -// 7. Render to the html -// 8. Make a manual error handler for each of the promise that will call api -// 9. Wrap all in try catch block -// ---------------- - -// async function initMap(data) { -// // The location of Uluru -// const center = { lat: 8.37058, lng: 123.707013 }; -// const position = { lat: data.latitude, lng: data.longitude }; - -// // Request needed libraries. -// //@ts-ignore -// const { Map } = await google.maps.importLibrary("maps"); -// const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); - -// // The map, centered at Uluru -// let map = new Map(document.getElementById("whereI"), { -// zoom: 8, -// center: center, -// mapId: "DEMO_MAP_ID", -// }); - -// // The marker, positioned at Uluru - -// new AdvancedMarkerElement({ -// map: map, -// position: position, -// title: data.city, -// }); -// } - -// 1. Make a function that ask for knowing location named getPosition -// const getPosition = function(){ -// const currentPosition = new Promise((resolve) => { -// navigator.geolocation.getCurrentPosition(resolve); -// }); -// return currentPosition -// } - -// 2. Make a async function name getLocation -// const getLocation = async function(){ -// try { - -// // 3. Call the function getPosition -// const location = await getPosition() - -// // 4. Get the geolocation from the GetPosition (lat, lng) -// const {latitude, longitude} = location.coords; - -// // 5. Pass the lat and lng as arguments to the fetch method -// const response = await fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${latitude.das}&longitude=${longitude}`); - -// // 8. Make a manual error handler for each of the promise that will call api -// if(!response.ok) { -// throw new Error('Something went wrong.....') -// } - -// // 6. Convert to json to data. -// const data = await response.json(); -// console.log(data); - -// // 7. Render to the html -// initMap(data) - -// return `This is ${data.city}` - -// }catch (error) { -// //To immediately avoid executing the rest of the code use "throw" -// throw new Error(error) -// } - // }; -// console.log(`This is 1`); -// getLocation() -// getLocation().then(res => console.log(res)).catch(err=>{console.log(err)}) -// console.log(`This is 2`); - -// Calling another async from other async function. -// (async function(){ -// try { -// const place = await getLocation(); -// console.log(place); -// } catch (error) { -// throw new Error(error); -// } -// })(); -// console.log('lastlyy'); +// btnCountry.addEventListener("click", function () { + // whereAmI(11.13234, 122.24918); + // whereAmI(); + // whereAmI(13.065489, 105.800326); + // whereAmI(19.100458, 102.614291); + // whereAmI(20.444439, 96.747592); + // whereAmI(5.02192, 101.427768); + // whereAmI(11.13234, 122.24918); +// }); - -// Goal is Display Multiple marks in maps -// 1. Display sample mark in maps. -// 2. Call sample api inside maps. -// 3. Convent data from api to mark. -// 4. Call multiple api inside maps and run them in parallel. -// 5. Convert to data and display them as marks. +const getCurrentPosition = () =>{ + const currLoc = new Promise((res, err)=>{ + navigator.geolocation.getCurrentPosition(res, err); + }) + return currLoc +} -// const result = getJson('https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=8.335700&longitude=123.855124') -// console.log(result); -const getJson = async function(url){ +const whereAmI = async () => { try { - const response = await fetch(`${url}`); - if(!response.ok){ - throw new Error('country not found') + const loc = await getCurrentPosition() + const {latitude: lat, longitude: lng} = loc.coords + // console.log(latitude, longitude); + + const res = await fetch(`https://api-bdc.net/data/reverse-geocode-client?latitude=${lat}&longitude=${lng}&localityLanguage=en`) + if(!res.ok){ + throw new Error("❌Something went wrong in getting Lat and Long👎"); } - const data = await response.json() - return data + const data = await res.json(); + const removeThe = data.countryName + .toLowerCase() + .replace("(the)", "") + .slice(0, -1) + .split(" ") + .map((char) => { + return char[0].toUpperCase() + char.slice(1); + }) + .join(" "); + console.log(data.countryName); + const country = await fetch(`https://restcountries.com/v3.1/name/${removeThe}`); + if(!country.ok){ + throw new Error(`❌Something went wrong in country👎 ${country.status}`); + } + const countryDet = await country.json(); + // console.log(countryDet[0].name.common); + + return `You are in ${countryDet[0].name.common}`; + // renderCountry(countryDet[0]) } catch (error) { - throw new Error(error) + console.error(error); + throw error } - } -async function initMap() { - // The location of Uluru - const center = { lat: 8.37058, lng: 123.707013 }; +console.log('This is 1'); +// whereAmI().then(res=>console.log(res)).catch(err=>console.error(`2333 Error ${err}`)) +console.log('This is 2'); +console.log('Render 4 country in thesame time'); +const getJson = (url) =>{ - // ------------------------------------------------ - // Not Using parallel Promise - // ------------------------------------------------ - // const location1 = await fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=8.335700&longitude=123.855124`) - // const data = await location1.json(); - // const position = { lat: data.latitude, lng: data.longitude }; - // const position1 = { lat: 7.991384, lng: 122.944999 }; - // const position2 = { lat: 8.376312, lng: 123.290677 }; - // ------------------------------------------------ - - const datas = await Promise.all([ - getJson('https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=8.62622&longitude=123.393693'), - getJson('https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=-1.23706&longitude=116.847904'), - getJson('https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=-0.92398&longitude=117.20735') - ]) - - - // Request needed libraries. - //@ts-ignore - const { Map } = await google.maps.importLibrary("maps"); - const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); - - // The map, centered at Uluru - let map = new Map(document.getElementById("whereI"), { - zoom: 10, - center: center, - mapId: "DEMO_MAP_ID", - }); - - // The marker, positioned at Uluru - - for (const places of datas) { - const {city, latitude, longitude} = places; - console.log(datas[places]); - new AdvancedMarkerElement({ - map: map, - position: {lat: latitude, lng: longitude}, - title: city, - }); +} +function getData(countryName) { + return fetch(`https://restcountries.com/v3.1/name/${countryName}`) + .then((res)=>{ + if(!res.ok){ + throw new Error("❌ Something went wrong in the Country Name 👊"); + } + return res.json() + }) +} +// console.log(getData('canada')) +// Promise.all([getData('canada'),getData('philippines'), getData('thailand'), getData('mexico')]).then((data)=>{ +// console.log(data); +// } +// ) +const getAll = async () =>{ + try { + const datas = await Promise.all([ + getData('canada'), + getData('philippines'), + getData('thailand'), + getData('mexico') + ]) + const countryName = datas.map((data)=>{ + return data[0].name.common + }) + console.log(countryName); + } catch (error) { + console.error(error) } - } +getAll() +// THIS IS THE FINAL PROJECT FOR ME +// TODO: Make function with all different request and make it run parallel to avoid time consumming. -initMap() -// const result = async function(){ -// // const datas = await Promise.all([ -// // getJson('https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=8.62622&longitude=123.393693'), -// // getJson('https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=-1.23706&longitude=116.847904'), -// // getJson('https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=-0.92398&longitude=117.20735') -// // ]) -// // const data1 = await getJson('https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=8.62622&longitude=123.393693'); -// // const data2 = await getJson('https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=-1.23706&longitude=116.847904'); -// // const data3 = await getJson('https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=-0.92398&longitude=117.20735'); -// // const latlng = [data1.city, data2.city, data3.city] - -// // console.log(datas); - -// // for (const places in datas) { -// // const {city, latitude, longitude} = places -// // // console.log(city, latitude, longitude ); -// // console.log(datas[places].latitude); - -// // } - +// function lotto(data) { +// const rolling = new Promise(function(resolve, reject){ +// console.log('Happening now!!!1'); +// setTimeout(()=>{ +// const result = Math.random(); +// if(result >= 0.6){ +// resolve(`You win !! ${result} \nGreater or equal to 0.6`); +// } +// reject(`You loss 🤧 ${result}\nYou get less than 6`); +// },data * 1000) +// }); +// return rolling; // } -// result(); +// lotto(1).then((response)=>{ +// console.log(response); +// }).catch(function(erro){ +// console.error(erro); +// }) +// const hulat = function(data){ +// const prom = new Promise((res)=>{ +// setTimeout(res, data * 1000) +// }) +// return prom; +// } +// hulat(6) +// .then(()=>{ +// console.log('Waited for 6 secs'); +// }) +//TODO: Recreate all by using async await diff --git a/JS_Async_Await/style.css b/JS_Async_Await/style.css index ef39fbd..cb944f8 100644 --- a/JS_Async_Await/style.css +++ b/JS_Async_Await/style.css @@ -1,8 +1,126 @@ -#whereI { - height: 500px; - width: 500px; -} -img{ - height: 100px; - width: 100px; -} \ No newline at end of file +* { + margin: 0; + padding: 0; + box-sizing: inherit; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: system-ui; + color: #555; + background-color: #898787; + min-height: 100vh; + + display: flex; + align-items: center; + justify-content: center; +} + +.container { + display: flex; + flex-flow: column; + align-items: center; +} + +.countries { + /* margin-bottom: 8rem; */ + display: flex; + + font-size: 2rem; + opacity: 0; + transition: opacity 1s; +} + +.country { + background-color: #fff; + box-shadow: 0 2rem 5rem 1rem rgba(0, 0, 0, 0.1); + font-size: 1.8rem; + width: 30rem; + border-radius: 0.7rem; + margin: 0 3rem; + /* overflow: hidden; */ +} + +.neighbour::before { + content: "Neighbour country"; + width: 100%; + position: absolute; + top: -4rem; + + text-align: center; + font-size: 1.8rem; + font-weight: 600; + text-transform: uppercase; + color: #888; +} + +.neighbour { + transform: scale(0.8) translateY(1rem); + margin-left: 0; +} + +.country__img { + width: 30rem; + height: 17rem; + object-fit: cover; + background-color: #eee; + border-top-left-radius: 0.7rem; + border-top-right-radius: 0.7rem; +} + +.country__data { + padding: 2.5rem 3.75rem 3rem 3.75rem; +} + +.country__name { + font-size: 2.7rem; + margin-bottom: 0.7rem; +} + +.country__region { + font-size: 1.4rem; + margin-bottom: 2.5rem; + text-transform: uppercase; + color: #888; +} + +.country__row:not(:last-child) { + margin-bottom: 1rem; +} + +.country__row span { + display: inline-block; + margin-right: 2rem; + font-size: 2.4rem; +} + +.btn-country { + border: none; + font-size: 2rem; + padding: 2rem 5rem; + border-radius: 0.7rem; + color: white; + background-color: orangered; + cursor: pointer; +} + +.images { + display: flex; +} + +.images img { + display: block; + width: 80rem; + margin: 4rem; +} + +.images img.parallel { + width: 40rem; + margin: 2rem; + border: 3rem solid white; + box-shadow: 0 2rem 5rem 1rem rgba(0, 0, 0, 0.1); +} diff --git a/README.md b/README.md index 6d24747..c8f22bc 100644 --- a/README.md +++ b/README.md @@ -1 +1,36 @@ -### Study JavaScript and make it as Weapon ⚔️ \ No newline at end of file +### Study JavaScript and make it as Weapon ⚔️ +# This is my VS Code Setting Setup +{ + "window.commandCenter": false, + "editor.fontFamily": "Jetbrains Mono", + "editor.fontLigatures": true, + "editor.mouseWheelZoom": true, + "editor.minimap.maxColumn": 20, + "editor.minimap.renderCharacters": false, + "editor.minimap.scale": 3, + "terminal.integrated.defaultProfile.windows": "Git Bash", + "terminal.integrated.fontSize": 12, + "editor.codeLensFontFamily": "Jetbrains Mono", + "editor.codeLensFontSize": 10, + "editor.stickyScroll.enabled": false, + "editor.minimap.sectionHeaderFontSize": 5, + "workbench.colorTheme": "Eva Dark", + "workbench.iconTheme": "catppuccin-frappe", + "workbench.layoutControl.enabled": false, + "workbench.editor.enablePreview": false, + "workbench.preferredDarkColorTheme": "Catppuccin Frappe", + "workbench.activityBar.location": "top", + "workbench.tree.indent": 6, + "terminal.integrated.fontFamily": "Fira Code", + "editor.defaultFormatter": "esbenp.prettier-vscode", + "[javascript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "editor.guides.bracketPairs": "active", + "editor.padding.bottom": 15, + "editor.padding.top": 10, + "editor.lineHeight": 35, + "editor.fontSize": 15, +"editor.detectIndentation": false, +"editor.tabSize": 3 +} diff --git a/htmlforportal/index.html b/htmlforportal/index.html new file mode 100644 index 0000000..861c319 --- /dev/null +++ b/htmlforportal/index.html @@ -0,0 +1,50 @@ + + + + + + QA Portal + + + + + + +
+
+
+
+
+
+
+ +
+
+ +
+
+ SIGN IN +
+
+
New User?
+
+
Forgot New Password?
+
+ +
+
+
+ Jessie Copyright © 2024 +
+
+
+
+ + + + \ No newline at end of file