From 5b92b59f3089d552a971eb2782ccfc4fb25876ee Mon Sep 17 00:00:00 2001 From: Keep Cod'n Date: Thu, 25 Jul 2024 12:29:28 +0800 Subject: [PATCH 01/11] continue study arrays --- 06_Functions/index.html | 65 ++++++++++++++++++++++--------------- 06_Functions/main.js | 42 ++++++++++++++++++++++++ 07_Array_methods/index.html | 18 ++++++++++ 07_Array_methods/main.js | 44 +++++++++++++++++++++++++ 4 files changed, 143 insertions(+), 26 deletions(-) create mode 100644 07_Array_methods/index.html create mode 100644 07_Array_methods/main.js 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/index.html b/07_Array_methods/index.html new file mode 100644 index 0000000..1d5a726 --- /dev/null +++ b/07_Array_methods/index.html @@ -0,0 +1,18 @@ + + + + + + Arrays and Methods + + + + +

Learn Arrays and Methods

+ + + diff --git a/07_Array_methods/main.js b/07_Array_methods/main.js new file mode 100644 index 0000000..5318b7c --- /dev/null +++ b/07_Array_methods/main.js @@ -0,0 +1,44 @@ +"use strict"; + +// Loop Over arrays +const accountMovement = [100, 300, 5000, -3000, 1000, -900, -800, 980]; +for (const each of accountMovement) { + if (each > 0) { + console.log(`You deposit ${each}`); + } + if (each < 0) { + console.log(`You withdrawn ${each}`); + } +} + +// 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("")); From 16a030885a734f6fc4b98ea07cf6219a531fb5ba Mon Sep 17 00:00:00 2001 From: Keep Cod'n Date: Mon, 29 Jul 2024 09:02:48 +0800 Subject: [PATCH 02/11] Learning Array Methods --- 07_Array_methods/main.js | 40 +++++++++++++++++++++++++++++++--------- 1 file changed, 31 insertions(+), 9 deletions(-) diff --git a/07_Array_methods/main.js b/07_Array_methods/main.js index 5318b7c..489f38b 100644 --- a/07_Array_methods/main.js +++ b/07_Array_methods/main.js @@ -1,16 +1,38 @@ "use strict"; // Loop Over arrays -const accountMovement = [100, 300, 5000, -3000, 1000, -900, -800, 980]; -for (const each of accountMovement) { - if (each > 0) { - console.log(`You deposit ${each}`); - } - if (each < 0) { - console.log(`You withdrawn ${each}`); - } -} +// const accountMovement = [ +// 100, 300, 5000, -3000, 1000, -900, -800, 980, +// // "Hello There", +// ]; +// ============= +// 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"; From caa83f58e95a3a90dbb017af2478a4eb829ad8cb Mon Sep 17 00:00:00 2001 From: Keep Cod'n Date: Mon, 5 Aug 2024 14:57:06 +0800 Subject: [PATCH 03/11] Added arrays new challenge --- 07_Array_methods/icon.png | Bin 0 -> 3924 bytes 07_Array_methods/index.html | 124 ++++++++++++++- 07_Array_methods/logo.png | Bin 0 -> 4258 bytes 07_Array_methods/main.js | 103 +++++++++++++ 07_Array_methods/style.css | 297 ++++++++++++++++++++++++++++++++++++ 5 files changed, 517 insertions(+), 7 deletions(-) create mode 100644 07_Array_methods/icon.png create mode 100644 07_Array_methods/logo.png create mode 100644 07_Array_methods/style.css diff --git a/07_Array_methods/icon.png b/07_Array_methods/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..d00606eab8f67f3097add9414cdacfcfb810a38f GIT binary patch literal 3924 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 literal 0 HcmV?d00001 diff --git a/07_Array_methods/index.html b/07_Array_methods/index.html index 1d5a726..f7a2179 100644 --- a/07_Array_methods/index.html +++ b/07_Array_methods/index.html @@ -3,16 +3,126 @@ - Arrays and Methods + + + - + + + Bankist -

Learn Arrays and Methods

+ + + +
+ +
+
+

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 0000000000000000000000000000000000000000..f437ac24f35cd445f8c0a73df19f55459b32ef58 GIT binary patch literal 4258 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 3){ +// console.log(`the dog number ${index+1} is Adult, and is ${year} year old`); +// } +// if(year < 3){ +// console.log(`the dog number ${index+1} still a puppy, ${year} year old`); +// } +// }) +// } + +// checkDogs(julia, kate) // Loop Over arrays // const accountMovement = [ // 100, 300, 5000, -3000, 1000, -900, -800, 980, diff --git a/07_Array_methods/style.css b/07_Array_methods/style.css new file mode 100644 index 0000000..815a6d7 --- /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 From 598380e236d8bead0fbac99d95782f326c135221 Mon Sep 17 00:00:00 2001 From: Keep Cod'n Date: Mon, 19 Aug 2024 14:18:46 +0800 Subject: [PATCH 04/11] learn array methods --- 07_Array_methods/index.html | 3 +- 07_Array_methods/main.js | 138 ++++++++++++++++++++++++++++++------ 07_Array_methods/style.css | 2 +- 3 files changed, 121 insertions(+), 22 deletions(-) diff --git a/07_Array_methods/index.html b/07_Array_methods/index.html index f7a2179..a770e81 100644 --- a/07_Array_methods/index.html +++ b/07_Array_methods/index.html @@ -55,6 +55,7 @@
3 days ago
4 000€
+
1 withdrawal @@ -123,6 +124,6 @@

Close account

© by Jonas Schmedtmann. Don't claim as your own :) --> - + \ No newline at end of file diff --git a/07_Array_methods/main.js b/07_Array_methods/main.js index 19b3c36..93b744d 100644 --- a/07_Array_methods/main.js +++ b/07_Array_methods/main.js @@ -60,18 +60,96 @@ 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') +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 loginAttempt = function(data){ + +// } + +// console.log(accounts[1].owner); + +const user = 'Steven Thomas Williams'; +const toArr = user.split(" "); +console.log(toArr); + +toArr.forEach((val)=>{ + return val[0]; +}); +console.log(toArr); + +// console.log(newU); + + + + + + + + + + + + + + + + + + + + + + +// const getUserName = function(data){ +// data.forEach(val => { +// val.userName = val.owner. +// toLowerCase(). +// split(" "). +// map((i)=>{ +// return i[0] +// }).join(""); +// }); +// } +// getUserName(accounts); +// console.log(accounts); + +// accounts.forEach((i)=>{console.log(i.owner)}) + +// console.log(accounts[0].owner); + + + + + ///////////////////////////////////////////////// ///////////////////////////////////////////////// // LECTURES -const currencies = new Map([ - ['USD', 'United States dollar'], - ['EUR', 'Euro'], - ['GBP', 'Pound sterling'], -]); +// const currencies = new Map([ +// ['USD', 'United States dollar'], +// ['EUR', 'Euro'], +// ['GBP', 'Pound sterling'], +// ]); -const movements = [200, 450, -400, 3000, -650, -130, 70, 1300]; +// const movements = [200, 450, -400, 3000, -650, -130, 70, 1300]; ///////////////////////////////////////////////// @@ -82,33 +160,53 @@ const movements = [200, 450, -400, 3000, -650, -130, 70, 1300]; // const julia = [3,5,2,12,7]; // const kate = [4,1,15,8,3]; -// const finalData = [...dogsKate, ...dogsJulia.slice(1,3)] +// // const finalData = [...kate, ...julia.slice(1,3)] // const checkDogs = function(dogsJulia, dogsKate){ // // Step 1 -// const finalJulia = dogsJulia.slice(1,3); +// const finalJulia = dogsJulia.slice(); + +// finalJulia.splice(0,1) +// finalJulia.splice(-2) // //Step 2 -// const finalData = [...dogsKate, ...finalJulia] -// s +// const dogs = dogsKate.concat(finalJulia) + // //Step 3 -// finalData.forEach(function(year, index){ -// if(year >= 3){ -// console.log(`the dog number ${index+1} is Adult, and is ${year} year old`); -// } -// if(year < 3){ -// console.log(`the dog number ${index+1} still a puppy, ${year} year old`); -// } -// }) +// 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, -// // "Hello There", // ]; -// ============= +// const eutoToUsd = 1.1; + +// const result = accountMovement.map((i)=>{ +// return i * eutoToUsd +// }) +// console.log(result); + // accountMovement.forEach(function(val){ // if (val > 0) { diff --git a/07_Array_methods/style.css b/07_Array_methods/style.css index 815a6d7..dc4ed47 100644 --- a/07_Array_methods/style.css +++ b/07_Array_methods/style.css @@ -94,7 +94,7 @@ nav { gap: 2rem; /* NOTE This creates the fade in/out anumation */ - opacity: 0; + /* opacity: 0; */ transition: all 1s; } From 063094a12af38acab5fe4bef125288982b621692 Mon Sep 17 00:00:00 2001 From: Keep Cod'n Date: Fri, 23 Aug 2024 14:12:03 +0800 Subject: [PATCH 05/11] Update main.js --- 07_Array_methods/main.js | 64 +++++++++++++++------------------------- 1 file changed, 23 insertions(+), 41 deletions(-) diff --git a/07_Array_methods/main.js b/07_Array_methods/main.js index 93b744d..f8af872 100644 --- a/07_Array_methods/main.js +++ b/07_Array_methods/main.js @@ -86,54 +86,36 @@ displayAccountMovement(account1.movements) // console.log(accounts[1].owner); -const user = 'Steven Thomas Williams'; -const toArr = user.split(" "); -console.log(toArr); - -toArr.forEach((val)=>{ - return val[0]; -}); -console.log(toArr); - -// console.log(newU); - - - - - - - - - - - - - - - - - +//Make 2 example using map function +//Make 2 example using foreach function +// Explain the difference +// Using map, return all person with 2 names ex. "Jan James" +const pnames = ['James', 'Kyrie Andrew', 'Clark', 'John Sebastian'] +const twoName = pnames.filter((i)=>{ + return i.includes(" ") +}) +console.log(twoName); + +const getUserName = function(data){ + data.forEach(val => { + val.userName = val.owner. + toLowerCase(). + split(" "). + map((i)=>{ + return i[0] + }).join(""); + }); +} +// accounts.map() +getUserName(accounts); -// const getUserName = function(data){ -// data.forEach(val => { -// val.userName = val.owner. -// toLowerCase(). -// split(" "). -// map((i)=>{ -// return i[0] -// }).join(""); -// }); -// } -// getUserName(accounts); -// console.log(accounts); -// accounts.forEach((i)=>{console.log(i.owner)}) -// console.log(accounts[0].owner); +// btnLogin.addEventListener('click', ()=>{console.log('helooos')}) From 35ac4be6bb30f26c1f24807ad33f250d99cd4763 Mon Sep 17 00:00:00 2001 From: Keep Cod'n Date: Fri, 30 Aug 2024 02:32:39 +0800 Subject: [PATCH 06/11] Update main.js --- 07_Array_methods/main.js | 132 +++++++++++++++++++++++++++++++++------ 1 file changed, 113 insertions(+), 19 deletions(-) diff --git a/07_Array_methods/main.js b/07_Array_methods/main.js index f8af872..08220fe 100644 --- a/07_Array_methods/main.js +++ b/07_Array_methods/main.js @@ -80,24 +80,6 @@ const displayAccountMovement = function(data){ displayAccountMovement(account1.movements) -// const loginAttempt = function(data){ - -// } - -// console.log(accounts[1].owner); - -//Make 2 example using map function -//Make 2 example using foreach function -// Explain the difference - -// Using map, return all person with 2 names ex. "Jan James" -const pnames = ['James', 'Kyrie Andrew', 'Clark', 'John Sebastian'] -const twoName = pnames.filter((i)=>{ - return i.includes(" ") -}) -console.log(twoName); - - const getUserName = function(data){ data.forEach(val => { @@ -113,9 +95,121 @@ const getUserName = function(data){ getUserName(accounts); +// ---------------------------- +// Todo - Make a function that will total both withdraw and deposit +// ---------------------------- + +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((amount)=>{ + return amount * 1.2 + }).reduce((prev, cur)=>{ + return prev + cur + }, 0) + + labelSumInterest.textContent = inter; + +} + +displayeSummary(account1) + + + + -// btnLogin.addEventListener('click', ()=>{console.log('helooos')}) +// GET BALANCE in FILTER Method +const getBalance = function(data) { + const bal = data.movements.reduce((acc, curr)=>{ + return acc + curr + }) + labelBalance.innerHTML = `${bal}$` +} +getBalance(account1) + + +// 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)=>{ + if(age<=2){ + return 2 * age + }else{ + return 16 + age * 4 + } + }).filter((age)=>{ + return age >= 18 + }).reduce((prev, curr, i, k)=>{ + return prev + curr / k.length + }, 0) + + console.log(`Average ${ageAve}`); + +} +calcAverageHumanAge([5, 2, 4, 1, 15, 8, 3]) +calcAverageHumanAge([16, 6, 10, 5, 6, 1, 4]) From edbbfb91ec01daa97ba4a55bb367016f4205e6cc Mon Sep 17 00:00:00 2001 From: Keep Cod'n Date: Fri, 30 Aug 2024 14:21:04 +0800 Subject: [PATCH 07/11] Add setting setup --- 01_Fundamentals_Javascript/starter/index.html | 3 +- 07_Array_methods/index.html | 2 +- 07_Array_methods/main.js | 173 +++++++++--------- README.md | 37 +++- 4 files changed, 121 insertions(+), 94 deletions(-) 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/07_Array_methods/index.html b/07_Array_methods/index.html index a770e81..a1c6002 100644 --- a/07_Array_methods/index.html +++ b/07_Array_methods/index.html @@ -16,7 +16,7 @@ -