diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000000..eaa7f6a356 --- /dev/null +++ b/.prettierrc @@ -0,0 +1 @@ +{ "singleQuote": true, "arrowParens": "avoid" } diff --git a/02-Fundamentals-Part-2/starter/index.html b/02-Fundamentals-Part-2/starter/index.html index ee4909e282..03419ad37f 100755 --- a/02-Fundamentals-Part-2/starter/index.html +++ b/02-Fundamentals-Part-2/starter/index.html @@ -1,30 +1,34 @@ - - - - - JavaScript Fundamentals – Part 2 - - - -

JavaScript Fundamentals – Part 2

- - - + + + + + + JavaScript Fundamentals – Part 2 + + + + +

JavaScript Fundamentals – Part 2

+ + + + \ No newline at end of file diff --git a/02-Fundamentals-Part-2/starter/script.js b/02-Fundamentals-Part-2/starter/script.js index e69de29bb2..8350c9cd2a 100755 --- a/02-Fundamentals-Part-2/starter/script.js +++ b/02-Fundamentals-Part-2/starter/script.js @@ -0,0 +1,416 @@ +// let abs = "hello"; + +// function keepTry(s) { +// console.log(s); +// } + +// keepTry(abs); +// keepTry(); +// keepTry(); + +/* + +// function declaration because it uses function keyword to declare a function +function juiceMaker(apple, juice) { + const juices = `${apple} apples and ${juice} juices`; + return juices; +} + +console.log(juiceMaker(3, 2)); + +const appleJuice = juiceMaker(10, 3); +console.log(appleJuice); + +// function declaration +function calcAge1(birthYear) { + return 2022 - birthYear; +} + +const age1 = calcAge1(1982); +console.log(age1); + +// function expression +const calcAge2 = function (birthYear) { + return 2022 - birthYear; +}; + +const age2 = calcAge2(1977); +console.log(age1, age2); + +// arrow function +const calcAge3 = (birthYear) => 2022 - birthYear; +console.log(calcAge3(1980)); + +const retirement = (birth) => { + const age = 2022 - birth; + const retireYears = 65 - age; + return retireYears; +}; + +const yearsUntilRetirment = function (birthYear, names) { + const retire = retirement(birthYear); + if (retire > 0) { + console.log(`${names} will retire aftter ${retire} years`); + return retire; + } else { + console.log(`${names} has already retired`); + return -1; + } + // return `${names} will retire aftter ${retire} years`; +}; +console.log(yearsUntilRetirment(1983, "tim")); +console.log(yearsUntilRetirment(1950, "david")); + +// examples +const cutFruit = (fruit) => fruit * 3; +const fruitMaker = (apple, orange) => { + const appleJuice = cutFruit(apple); + const orangeJuice = cutFruit(orange); + return `${appleJuice} apples and ${orangeJuice} oranges`; +}; +console.log(fruitMaker(5, 2)); + +*/ + +/* +CHALLENGE #3 + +const dolphinsScore = [96, 108, 89]; +const koalasScore = [88, 91, 110]; + +// let avgScore = 0; + +const averageScore = function (scores) { + let avgScore = 0; + for (let i = 0; i < scores.length; i++) { + avgScore += scores[i]; + } + let avg = avgScore / scores.length; + return avg; +}; + +const avgDolphins = averageScore(dolphinsScore); +const avgKoalas = averageScore(koalasScore); + +console.log(avgDolphins, avgKoalas); + +const compare = function (avgDolphins, avgKoalas) { + if (avgDolphins > avgKoalas && avgDolphins >= 100) { + console.log("Team Dolphins is the winner"); + } else if (avgDolphins < avgKoalas && avgKoalas >= 100) { + console.log("Team Koalas is the winner"); + } else { + console.log("No team wins"); + } +}; + +// compare(avgDolphins, avgKoalas); + +const average = (a, b, c) => (a + b + c) / 3; + +const teamDolphinsAVG = average(44, 23, 71); +const teamKoalasAVG = average(65, 54, 49); +const teamDolphinsAVG1 = average(97, 112, 101); +const teamKoalasAVG1 = average(109, 95, 123); +const teamDolphinsAVG2 = average(97, 112, 101); +const teamKoalasAVG2 = average(109, 95, 106); + +const compareFunction = function (dolphins, koalas) { + if (dolphins >= 2 * koalas && dolphins > 100) { + console.log("Team Dolphins Wins"); + } else if (2 * dolphins <= koalas && koalas > 100) { + console.log("Team Koalas Wins"); + } else if (dolphins === koalas && dolphins > 100 && koalas > 100) { + console.log("Draws"); + } else { + console.log("No team wins"); + } +}; + +compareFunction(teamDolphinsAVG, teamKoalasAVG); +compareFunction(teamDolphinsAVG1, teamKoalasAVG1); +compareFunction(teamDolphinsAVG2, teamKoalasAVG2); + +*/ + +/* +const friends = ["Michael", "Steven", "Peter"]; +console.log(friends); + +const yearss = new Array(1991, 1984, 2008, 2020); +console.log(yearss); + +friends[friends.length - 1] = "Jay"; +console.log(friends); + +const firstName = "Tim"; +const tim = [firstName, "Ha", 2020 - 1982, "IT", friends]; + +console.log(tim); + +const calcAge = function (birthday) { + return 2022 - birthday; +}; + +const years = [1990, 1967, 2002, 2010, 2018]; + +const age = [ + calcAge(years[0]), + calcAge(years[1]), + calcAge(years[2]), + calcAge(years[3]), + calcAge(years[years.length - 1]), +]; + +console.log(age); +*/ + +/* +// Add Element in array are (unshift and push) +const friends = ["Michael", "Steven", "Peter"]; + +const newLength = friends.push("David"); +const newLength1 = friends.unshift("Tim"); +const newLength2 = friends.unshift("Tom"); + +console.log(friends); +console.log(newLength1); +console.log(newLength2); + +// Remove Element in array are (pop and shift) +const removeLength = friends.pop(); +const removeFirst = friends.shift(); +console.log(friends); +console.log(removeLength); +console.log(removeFirst); + +console.log(friends.indexOf('Michael')) +console.log(friends.includes('Steven')) +*/ + +/* +// Coding Challenge #4 +const bills = [275, 40, 430] + +const tip = function (bill) { + const restTip = 300 >= bill && bill >= 50 ? bill * 0.15 : bill * 0.20; + console.log(`The bill was ${bill}, the tip was ${restTip}, and the total value ${bill + restTip}`); + return restTip; +} + +tip(275) + +const tableTip = bill => 300 >= bill && bill >= 50 ? bill * 0.15 : bill * 0.20 + +const tips = [tableTip(bills[0]), tableTip(bills[1]), tableTip(bills[2])] + +const tableBills = [bills[0], bills[1], bills[2]] + +const total = [tableBills[0] + tips[0], tableBills[1] + tips[1], tableBills[2] + tips[2]] +console.log(tableBills, tips, total) +*/ + +/* +// Array and Object + +const timArray = [ + 'tim', + 'ha', + 2022 - 1982, + 'IT', + ['David', 'Frank', 'Lynn'] +] + +const timObject = { + firstName: 'Tim', + lastName: 'Ha', + job: 'IT', + birthYear: 1982, + friends: ['Ken', 'Frank', 'Lynn'], + hasDriversLicense: true, + calcAge: function () { + this.age = 2022 - this.birthYear + return this.age; + }, + getSummary: function () { + return `${this.firstName} is ${this.calcAge()} years old ${this.job}, and has ${this.hasDriversLicense ? "a" : 'no'} driver's license.` + } +} +const names = 'Name' +// console.log(timObject.'first Name') + +console.log(timObject.calcAge()) + +//Chanellge +// Tim is 40 years old IT, and has a/no driver's license. +console.log(timObject.getSummary()) + + +// console.log(timObject['calcAge'](1982)) + +// timObject.location = 'California'; +// timObject['twitter'] = 'solo'; +// console.log(timObject) +// // Tim has 3 friends, and his best friend is called Ken. + +// console.log(`${timObject.firstName} has ${timObject.friends.length} friends, and his bes friend is called ${timObject.friends[0]}.`) + +*/ + +// Challenge 3 +/* +const mark = { + firstName: 'Mark', + lastName: 'Miller', + mass: 78, + height: 1.69, + calcBMI: function () { + this.BMI = this.mass / this.height ** 2 + return this.BMI + // return this.mass / (this.height * this.height) + } +} + +console.log(mark.calcBMI()) + +const john = { + firstName: 'John', + lastName: 'Smith', + mass: 92, + height: 1.95, + calcBMI: function () { + this.BMI = this.mass / this.height ** 2 + return this.BMI + // return this.mass / (this.height * this.height) + } +} + +console.log(john.calcBMI()); + +if (mark.calcBMI() > john.calcBMI()) { + console.log(`${mark.firstName} ${mark.lastName} weights ${mark.mass} kg and is ${mark.height} tall. ${john.firstName} ${john.lastName} weights ${john.mass} kg and is ${john.height} m tall.`) +} else if (mark.calcBMI() < john.calcBMI()) { + console.log(`${john.firstName} ${john.lastName} weights ${john.mass} kg and is ${mark.height} tall. ${mark.firstName} ${mark.lastName} weights ${mark.mass} kg and is ${mark.height} m tall.`) +} +*/ +// for (let i = 1; i <= 10; i++) { +// console.log(`Lifting weights repetition ${i}`) +// } + +const timArray = ["tim", "ha", 2022 - 1982, "IT", ["David", "Frank", "Lynn"]]; + +/* +// Loop backwards +for (let i = timArray.length - 1; i >= 0; i--) { + console.log(timArray[i]) +} +for (let i = 0; i < timArray.length; i++) { + console.log(timArray[i]) +} +*/ + +/* +// Loop inside the loop exercise +for (let i = 1; i <= 3; i++) { + console.log(`Starting exercise ${i}`) + for (let y = 1; y <= 5; y++) { + console.log(`${i}-----Exercise repetion ${y}`) + } +} +*/ + +/* +console.log('typeof of timArray') +for (let i = 0; i < timArray.length; i++) { + console.log(timArray[i], typeof timArray[i]) +} + +console.log('Only log strings with continue') +for (let i = 0; i < timArray.length; i++) { + if (typeof timArray[i] !== 'string') continue; + console.log(timArray[i], typeof timArray[i]); +} + +console.log('Break with numbers') +for (let i = 0; i < timArray.length; i++) { + if (typeof timArray[i] === 'number') break; + console.log(timArray[i], typeof timArray[i]); +} + + +const years = [1991, 2007, 1969, 2020] +const age = [] + +for (let i = 0; i < years.length; i++) { + age.push(2022 - years[i]) +} +console.log(age) +*/ + +// for (let i = 1; i <= 3; i++) { +// console.log(`Starting exercise ${i}`) +// for (let y = 1; y <= 5; y++) { +// console.log(`${i}-----Exercise repetion ${y}`) +// } +// } + +/* +console.log('-------------using WHILE LOOPS-----------') + +// let i = 1; +// while (i <= 10) { +// console.log(`Repetition ${i}`) +// i++; +// } + +let randomNumber = Math.trunc(Math.random() * 6) + 1; + + +while (randomNumber !== 6) { + console.log(`You rolled ${randomNumber}`) + randomNumber = Math.trunc(Math.random() * 6) + 1; +} +*/ + +// Challenege #4 + +const bills = [22, 295, 176, 440, 37, 105, 10, 1100, 86, 52]; + +let tips = []; +let totals = []; + +const calcTip = function (bill) { + return bill >= 50 && bill <= 300 ? bill * 0.15 : bill * 0.2; +}; + +for (let i = 0; i < bills.length; i++) { + const tip = calcTip(bills[i]); + tips.push(tip); + totals.push(tip + bills[i]); +} + +// for (let i = 0; i < bills.length; i++) { +// const calcTip = function () { +// if (bills[i] >= 50 && bills[i] <= 300) { +// const tip = tips.push(bills[i] * 0.15); +// const total = totals.push(tips[i] + bills[i]); +// } else { +// const tip = tips.push(bills[i] * 0.2); +// const total = totals.push(tips[i] + bills[i]); +// } +// }; +// calcTip(); +// } + +console.log(tips); +console.log(totals); + +const calcAverage = function (arr) { + let sum = 0; + for (let i = 0; i < totals.length; i++) { + sum += arr[i]; + } + return sum / arr.length; +}; + +console.log(calcAverage(totals)); diff --git a/03-Developer-Skills/starter/script.js b/03-Developer-Skills/starter/script.js index 939b2a2446..65191d9c81 100644 --- a/03-Developer-Skills/starter/script.js +++ b/03-Developer-Skills/starter/script.js @@ -1,3 +1,73 @@ // Remember, we're gonna use strict mode in all scripts now! 'use strict'; +/* +const temperature = [3, -2, -6, -1, 9, 13, 17, 15, 14, 9, 5]; +const temperature1 = [2, 5, 19, -9, 22]; + +const calcAmp = function (temp1, temp2) { + const temps = temp1.concat(temp2); + console.log(temps); + + let max = temps[0]; + let min = temps[0]; + + for (let i = 0; i < temps.length; i++) { + const curTemp = temps[i]; + if (typeof curTemp !== 'number') continue; + if (max < curTemp) max = curTemp; + if (min > curTemp) min = curTemp; + } + + console.log(max, min); + return max - min; +}; + +const amplitude = calcAmp(temperature, temperature1); +console.log(amplitude); +// task is to convert temperature to amplitude + +// what is amplitude + +// how to convert termperature to amplitude +// max - min is amplitude + +// what to do with error +*/ + +/* +const measureKelvin = function () { + const measurement = { + type: 'temp', + unit: 'celsius', + value: prompt('Degrees celsius:'), + }; + const kelvin = Number(measurement.value) + 273; + return kelvin; +}; + +console.log(measureKelvin(10)); + +const hi = 'hi'; +if (x === 23) console.log(23); +console.log(); +*/ + +//Coding Challenge #1 +const data1 = [17, 21, 23]; +const data2 = [12, 5, -5, 0, 4]; +/* + ... 17ºC in 1 +days ... 21ºC in 2 days ... 23ºC in 3 days ..." +*/ + +const printForecast = function (arr) { + let string = ''; + for (let i = 0; i < arr.length; i++) { + string += ` ${arr[i]} in ${i + 1} days ...`; + } + console.log('...' + string); +}; + +printForecast(data1); +printForecast(data2); diff --git a/04-HTML-CSS/starter/index.html b/04-HTML-CSS/starter/index.html new file mode 100644 index 0000000000..19cf0fb55f --- /dev/null +++ b/04-HTML-CSS/starter/index.html @@ -0,0 +1,31 @@ + + + + + + + + Learning HTML & CSS + + +

Kancan is fun, but so is HTML and CSS!

+

+ You can learn Javascript without HTML and CSS, but for DOM manipulation + it's useful to have some basic ideas of HTML & CSS. You can learn more + about it + Tim on Udemy +

+

Another heading

+

Just another paragraph.

+ +
+

Your name here

+

Please fill in this form :)

+ + +
+ + diff --git a/04-HTML-CSS/starter/style.css b/04-HTML-CSS/starter/style.css new file mode 100644 index 0000000000..88b763c061 --- /dev/null +++ b/04-HTML-CSS/starter/style.css @@ -0,0 +1,31 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: rgb(191, 167, 33); + font-family: Arial; + font-size: 20px; + padding: 50px; +} + +h1 { + font-size: 40px; + margin-bottom: 25px; +} + +h2 { + margin-bottom: 20px; + text-align: center; +} + +.first { + color: red; +} + +#your-name { + background-color: rgb(136, 155, 77); + border: 5px solid #444; +} diff --git a/05-Guess-My-Number/starter/index.html b/05-Guess-My-Number/starter/index.html index b25c17540a..0a201c8cd7 100644 --- a/05-Guess-My-Number/starter/index.html +++ b/05-Guess-My-Number/starter/index.html @@ -5,11 +5,11 @@ - Guess My Number! + Kancan Style!
-

Guess My Number!

+

Kancan Style!

(Between 1 and 20)

?
diff --git a/05-Guess-My-Number/starter/script.js b/05-Guess-My-Number/starter/script.js index ad9a93a7c1..543827ad3e 100644 --- a/05-Guess-My-Number/starter/script.js +++ b/05-Guess-My-Number/starter/script.js @@ -1 +1,78 @@ 'use strict'; + +// Generate random number +let secretNumber = Math.trunc(Math.random() * 20) + 1; +console.log(secretNumber); + +let score = 20; +let highScore = 0; + +// Display message +let displayMessage = function (message) { + document.querySelector('.message').textContent = message; +}; + +let displayScore = function (score) { + document.querySelector('.score').textContent = score; +}; + +// when check button is clicked +document.querySelector('.check').addEventListener('click', function () { + const guess = Number(document.querySelector('.guess').value); + console.log(guess); + // When there is no input + if (!guess) { + displayMessage('⛔ No Number!'); + // When player wins + } else if (guess === secretNumber) { + document.querySelector('body').style.backgroundColor = '#60b347'; + document.querySelector('.number').style.width = '30rem'; + displayMessage('🎉 Correct Number!'); + // show secret number when player wins + document.querySelector('.number').textContent = secretNumber; + // check highscore and replace if necess... + if (score > highScore) { + highScore = score; + document.querySelector('.highscore').textContent = highScore; + } + // when guess is different than secretNumber + } else if (guess !== secretNumber) { + displayMessage(guess > secretNumber ? '📈 Too high!' : '📉 Too low!'); + score--; + displayScore(score); + } else { + displayMessage('Game Over!'); + displayMessage(0); + } + // When player guesses higher number + // else if (guess > secretNumber) { + // if (score > 1) { + // document.querySelector('.message').textContent = '📈 Too high!'; + // score--; + // document.querySelector('.score').textContent = score; + // } else { + // document.querySelector('.message').textContent = 'Game Over!'; + // document.querySelector('.score').textContent = 0; + // } + // // When player guesses lower number + // } else if (guess < secretNumber) { + // if (score > 1) { + // document.querySelector('.message').textContent = '📉 Too low!'; + // score--; + // document.querySelector('.score').textContent = score; + // } else { + // document.querySelector('.message').textContent = 'Game Over!'; + // document.querySelector('.score').textContent = 0; + // } +}); +// When again button is clicked +document.querySelector('.again').addEventListener('click', function () { + score = 20; + secretNumber = Math.trunc(Math.random() * 10) + 1; + displayMessage('Start guessing...'); + displayMessage(score); + document.querySelector('.number').style.width = '15rem'; + document.querySelector('body').style.backgroundColor = '#222'; + document.querySelector('.guess').value = ''; + document.querySelector('.number').textContent = '?'; +}); diff --git a/06-Modal/starter/script.js b/06-Modal/starter/script.js index ad9a93a7c1..bd6dd702e6 100644 --- a/06-Modal/starter/script.js +++ b/06-Modal/starter/script.js @@ -1 +1,73 @@ 'use strict'; + +/* +const showModal = document.querySelectorAll('.show-modal'); +const modal = document.querySelector('.modal'); +const closeModal = document.querySelector('.close-modal'); +const overlay = document.querySelector('.overlay'); + +const openModals = function () { + modal.classList.remove('hidden'); + overlay.classList.remove('hidden'); +}; + +const closeModals = function () { + modal.classList.add('hidden'); + overlay.classList.add('hidden'); +}; + +// show modals +for (let i = 0; i < showModal.length; i++) { + showModal[i].addEventListener('click', openModals); +} + +closeModal.addEventListener('click', closeModals); +overlay.addEventListener('click', closeModals); + +// // close modals +// closeModal.addEventListener('click', function () { +// modal.classList.add('hidden'); +// overlay.classList.add('hidden'); +// }); + +// // close modal with clicking background +// overlay.addEventListener('click', function () { +// modal.classList.add('hidden'); +// overlay.classList.add('hidden'); +// }); + +document.addEventListener('keydown', function (e) { + if (e.key === 'Escape') { + closeModals(); + } +}); +*/ + +const showModal = document.querySelectorAll('.show-modal'); +const modal = document.querySelector('.modal'); +const overlay = document.querySelector('.overlay'); +const closeModal = document.querySelector('.close-modal'); + +const closeModals = function () { + modal.classList.add('hidden'); + overlay.classList.add('hidden'); +}; + +const showModals = function () { + modal.classList.remove('hidden'); + overlay.classList.remove('hidden'); +}; + +for (let i = 0; i < showModal.length; i++) { + showModal[i].addEventListener('click', showModals); +} + +closeModal.addEventListener('click', closeModals); +overlay.addEventListener('click', closeModals); + +document.addEventListener('keydown', function (e) { + console.log(e); + if (e.key === 'Escape' && !modal.classList.contains('hidden')) { + closeModals(); + } +}); diff --git a/07-Pig-Game/final/index.html b/07-Pig-Game/final/index.html index f72c8f4e92..964cbd1b4c 100644 --- a/07-Pig-Game/final/index.html +++ b/07-Pig-Game/final/index.html @@ -5,7 +5,7 @@ - Pig Game + Final
diff --git a/07-Pig-Game/starter/script.js b/07-Pig-Game/starter/script.js index ad9a93a7c1..2cbfc93612 100644 --- a/07-Pig-Game/starter/script.js +++ b/07-Pig-Game/starter/script.js @@ -1 +1,104 @@ 'use strict'; + +// Buttons +const btnRoll = document.querySelector('.btn--roll'); +const btnNew = document.querySelector('.btn--new'); +const btnHold = document.querySelector('.btn--hold'); + +// Current Score +const current0El = document.querySelector('#current--0'); +const current1El = document.querySelector('#current--1'); + +// Selecting elements +const score0El = document.querySelector('#score--0'); +const score1El = document.querySelector('#score--1'); +const diceEl = document.querySelector('.dice'); + +// Selecting players +const player0El = document.querySelector('.player--0'); +const player1El = document.querySelector('.player--1'); + +// Current score +let currentScore, activePlayer, totalScore, isGameOver; + +const init = function () { + currentScore = 0; + activePlayer = 0; + totalScore = [0, 0]; + isGameOver = false; + + diceEl.classList.add('hidden'); + score0El.textContent = 0; + score1El.textContent = 0; + current0El.textContent = 0; + current1El.textContent = 0; + + player0El.classList.remove('player--winner'); + player1El.classList.remove('player--winner'); + player0El.classList.add('player--active'); + player1El.classList.remove('player--active'); +}; + +init(); + +// Switch player function +const switchPlayer = function () { + // Switch player + document.getElementById(`current--${activePlayer}`).textContent = 0; + // Switch player scores and background color + activePlayer = activePlayer ? 0 : 1; + // Set current score to 0 + currentScore = 0; + // Switch player scores and background color + player0El.classList.toggle('player--active'); + player1El.classList.toggle('player--active'); +}; + +// User rolls dice +btnRoll.addEventListener('click', function () { + if (!isGameOver) { + // Generate randome dice roll + const randomDice = Math.trunc(Math.random() * 6) + 1; + // Display dice roll + diceEl.classList.remove('hidden'); + // Display rolled dice number + diceEl.src = `dice-${randomDice}.png`; + // Check if a number is one + if (randomDice !== 1) { + currentScore += randomDice; + document.getElementById(`current--${activePlayer}`).textContent = + currentScore; + } else { + switchPlayer(); + } + console.log(currentScore); + } +}); + +btnHold.addEventListener('click', function () { + if (!isGameOver) { + totalScore[activePlayer] += currentScore; + document.getElementById(`score--${activePlayer}`).textContent = + totalScore[activePlayer]; + console.log(totalScore); + // If a player wins + if (totalScore[activePlayer] >= 20) { + // Game over + isGameOver = true; + // Display winner + document + .querySelector(`.player--${activePlayer}`) + .classList.add('player--winner'); + document + .querySelector(`.player--${activePlayer}`) + .classList.remove('player--active'); + // Hide the dice and score to zero + diceEl.classList.add('hidden'); + document.getElementById(`current--${activePlayer}`).textContent = 0; + } else { + switchPlayer(); + } + } +}); + +btnNew.addEventListener('click', init); diff --git a/07-Pig-Game/starter/style.css b/07-Pig-Game/starter/style.css index dcf788f011..555ea263e0 100644 --- a/07-Pig-Game/starter/style.css +++ b/07-Pig-Game/starter/style.css @@ -165,3 +165,7 @@ main { font-weight: 700; color: #c7365f; } + +.hidden { + display: none; +}