diff --git a/01-Fundamentals-Part-1/final/index.html b/01-Fundamentals-Part-1/final/index.html index 96fbc80614..58cc50faaa 100755 --- a/01-Fundamentals-Part-1/final/index.html +++ b/01-Fundamentals-Part-1/final/index.html @@ -13,7 +13,7 @@ background: linear-gradient(to top left, #28b487, #7dd56f); } h1 { - font-family: sans-serif; + /* font-family: sans-serif; */ font-size: 50px; line-height: 1.3; width: 100%; diff --git a/01-Fundamentals-Part-1/starter/index.html b/01-Fundamentals-Part-1/starter/index.html index 59529c7923..05f3e6a35a 100755 --- a/01-Fundamentals-Part-1/starter/index.html +++ b/01-Fundamentals-Part-1/starter/index.html @@ -1,29 +1,34 @@ - - - - - JavaScript Fundamentals – Part 1 - - - -

JavaScript Fundamentals – Part 1

- - + + + + + + JavaScript Fundamentals – Part 1 + + + + +

JavaScript Fundamentals – Part 1

+ + + + \ No newline at end of file diff --git a/01-Fundamentals-Part-1/starter/script.js b/01-Fundamentals-Part-1/starter/script.js new file mode 100644 index 0000000000..cbd8255a51 --- /dev/null +++ b/01-Fundamentals-Part-1/starter/script.js @@ -0,0 +1,55 @@ +/* +let js = 'amazing'; +console.log(40 + 8 + 23 - 10); + +console.log('Jonas'); +console.log(23); + +let firstName = "Jonas"; + +let myFirstJob = 'Programmer'; +let myCurrentJob = 'Teacher'; + +comsole.log(firstName); + + +let javascriptIsFun = true; +console.log(typeof javascriptIsFun); + +*/ +/* +const now = 2037; +// math operator +const ageJonas = now - 1991; +const ageSarah = now - 2018 +console.log(ageJonas, ageSarah); + +// 2**3 means 2 to the power of 3 = 2 * 2 * 2 +console.log(ageJonas * 2, ageJonas / 2, 2 ** 3); + +const firstName = 'Jonas'; +const lastName = 'Schemdtmann'; +console.log(firstName + ' ' + lastName); + +// assignment operator +let x = 10 + 5; +x++; +x++; +console.log(x); + +//comparison opertors +const isFullAge = ageSarah >= 18; +*/ +// template literals +/* +const name = 'aaaa' +const jonasNew = `I'm ${name}`; +console.log(jonasNew); + +console.log('String with \n\ multiple \n\ line'); +console.log(`String +multiple +lines`); + +console.log('🦞'); +*/ \ No newline at end of file diff --git a/02-Fundamentals-Part-2/final/script.js b/02-Fundamentals-Part-2/final/script.js index 8cee2087f7..fcdb2476d7 100755 --- a/02-Fundamentals-Part-2/final/script.js +++ b/02-Fundamentals-Part-2/final/script.js @@ -4,7 +4,7 @@ /////////////////////////////////////// // Activating Strict Mode let hasDriversLicense = false; -const passTest = true; +const passTest = fs; if (passTest) hasDriversLicense = true; if (hasDriversLicense) console.log('I can drive :D'); diff --git a/03-Developer-Skills/starter/.prettierrc b/03-Developer-Skills/starter/.prettierrc new file mode 100644 index 0000000000..b4f8e6a6a1 --- /dev/null +++ b/03-Developer-Skills/starter/.prettierrc @@ -0,0 +1,4 @@ +{ + "singleQuote": true, + "arrowParens": "avoid" +} diff --git a/03-Developer-Skills/starter/script.js b/03-Developer-Skills/starter/script.js index 939b2a2446..554ab5f56c 100644 --- a/03-Developer-Skills/starter/script.js +++ b/03-Developer-Skills/starter/script.js @@ -1,3 +1,9 @@ // Remember, we're gonna use strict mode in all scripts now! 'use strict'; +const x = '23'; +if (x === 23) console.log(23); + +const calcAge = birthYear => 2037 - birthYear; + +console.log(); diff --git a/05-Guess-My-Number/starter/script.js b/05-Guess-My-Number/starter/script.js index ad9a93a7c1..47789cd833 100644 --- a/05-Guess-My-Number/starter/script.js +++ b/05-Guess-My-Number/starter/script.js @@ -1 +1,4 @@ 'use strict'; + +console.log(document.querySelector('.message').textContent); +document.querySelector('.message').textContent = 'Correct Number!'; diff --git a/06-Modal/starter/script.js b/06-Modal/starter/script.js index ad9a93a7c1..7b4a52427c 100644 --- a/06-Modal/starter/script.js +++ b/06-Modal/starter/script.js @@ -1 +1,34 @@ 'use strict'; + +const modal = document.querySelector('.modal'); +const overlay = document.querySelector('.overlay') ; +const btnCloseModal = document.querySelector('.close-modal'); +const btnsOpenModal = document.querySelectorAll('.show-modal'); +for(let i = 0; i < btnsOpenModal.length; i++) +{ + btnsOpenModal[i].addEventListener('click', function() { + console.log('Button clicked'); + modal.classList.remove('hidden'); + overlay.classList.remove('hidden'); + }); +} + +const closeModal = function () { + modal.classList.add('hidden'); + overlay.classList.add('hidden'); +} + +btnCloseModal.addEventListener('click', closeModal); +overlay.addEventListener('click', closeModal); + +document.addEventListener('keydown', function () { + console.log('A key was pressed'); +}); + +document.addEventListener('keydown', function (e){ + console.log(e); + console.log(e.key); + if (e.key === 'Escape' && !modal.classList.contains('hidden')){ + closeModal(); + } +}); \ No newline at end of file diff --git a/07-Pig-Game/starter/script.js b/07-Pig-Game/starter/script.js index ad9a93a7c1..709b49226f 100644 --- a/07-Pig-Game/starter/script.js +++ b/07-Pig-Game/starter/script.js @@ -1 +1,74 @@ 'use strict'; + +// Selecting elements +const player0El = document.querySelector('.player--0'); +const player1El = document.querySelector('.player--1'); +const score0El = document.querySelector('#score--0'); +const score1El = document.getElementById('score--1'); +const current0El = document.getElementById('current--0'); +const current1El = document.getElementById('current--1'); + +const diceEl = document.querySelector('.dice'); +const btnNew = document.querySelector('.btn--new'); +const btnRoll = document.querySelector('.btn--roll'); +const btnHold = document.querySelector('.btn--hold'); + +// Starting condition +score0El.textContent = 0; +score1El.textContent = 0; +diceEl.classList.add('hidden'); + +const scores = [0, 0]; +let currentScore = 0; +let activePlayer = 0; + +const switchPlayer = function () { + // Switch to the next player + document.getElementById(`current--${activePlayer}`).textContent = 0; + currentScore = 0; + activePlayer = activePlayer === 0 ? 1 : 0; + player0El.classList.toggle('player--active'); + player1El.classList.toggle('player--active'); +}; + +// Rolling dice functionality +btnRoll.addEventListener('click', function () { + // 1. Generating a randon dice roll + const dice = Math.trunc(Math.random() * 6) + 1; + + // 2. Display dice + diceEl.classList.remove('hidden'); + diceEl.src = `dice-${dice}.png`; + + // 3. Check for rolled 1: if true, switch to next player + if (dice !== 1) { + // Add dice to current score + currentScore += dice; + document.getElementById(`current--${activePlayer}`).textContent = + currentScore; + } else { + // switch player + switchPlayer(); + } +}); + +btnHold.addEventListener('click', function () { + // 1. Add current score to active player's score + scores[activePlayer] += currentScore; + document.getElementById(`score--${activePlayer}`).textContent = + scores[activePlayer]; + + //2. Check if player's score is >= 100 + if (scores[activePlayer] >= 100) { + // Finish the game + document + .querySelector(`.player--${activePlayer}`) + .classList.add('player--winner'); + document + .querySelector(`.player--${activePlayer}`) + .classList.remove('player--active'); + } else { + // Switch to the next player + switchPlayer(); + } +}); 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; +} diff --git a/09-Data-Structures-Operators/starter/script.js b/09-Data-Structures-Operators/starter/script.js index 2cc0fea5a0..14199bbcbd 100644 --- a/09-Data-Structures-Operators/starter/script.js +++ b/09-Data-Structures-Operators/starter/script.js @@ -12,6 +12,33 @@ const restaurant = { starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'], mainMenu: ['Pizza', 'Pasta', 'Risotto'], + order: function (starterIndex, mainIndex) { + return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]]; + }, + + orderDelivery: function ({ + starterIndex = 1, + mainIndex = 0, + time = '20:00', + address, + }) { + console.log( + `Order recieved! ${this.starterMenu[starterIndex]} + and ${this.mainMenu[mainIndex]} + will be delivered to ${address} at ${time}` + ); + }, + + orderPizza: function (mainIngredient, ...otherIngredients) { + console.log(mainIngredient); + console.log(otherIngredients); + }, + + orderPasta: function (ing1, ing2, ing3) { + console.log( + `Here is your declicious pasta with ${ing1}, ${ing2} and ${ing3}` + ); + }, openingHours: { thu: { open: 12, @@ -27,3 +54,166 @@ const restaurant = { }, }, }; + +// use ANY data type, return ANY data type, short-circuiting +console.log(3 || 'Jonas'); +console.log('' || 'Jonas'); + +// Detructuring + +// // SPREAD, because on RIGHT side of = +// const arr = [1, 2, ...[3, 4]]; +// console.log(arr); + +// // REST, because on LEFT side of = +// const [a, b, ...others] = [1, 2, 3, 4, 5]; +// console.log(a, b, others); + +// const [pizza, , risoto, ...otherFood] = [ +// ...restaurant.mainMenu, +// ...restaurant.starterMenu, +// ]; + +// console.log(pizza, risoto, otherFood); +// // Objects +// const { sat, ...weekdays } = restaurant.openingHours; +// console.log(weekdays); +// // Function +// // rest arguments +// const add = function (...numbers) { +// let sum = 0; +// for (let i = 0; i < numbers.length; i++) { +// sum += numbers[i]; +// } +// console.log(sum); +// }; + +// // add(2, 3); +// // add(5, 3, 4, 123, 312); +// // add(8, 3, 4, 42, 3, 34, 2); + +// const x = [23, 5, 7]; +// add(...x); + +// restaurant.orderPizza('mushrooms', 'onions', 'olives', 'spinach'); +// restaurant.orderPizza('mushrooms'); + +// const arr = [7, 8, 9]; + +// const badNewArr = [1, 2, arr[0], arr[1], arr[2]]; +// console.log(badNewArr); + +// const newArr = [1, 2, ...arr]; +// console.log(newArr); + +// console.log(...newArr); + +// const newMenu = [...restaurant.mainMenu, 'Gnocci']; +// console.log(newMenu); + +// // Copy array +// const mainMenuCopy = [...restaurant.mainMenu]; + +// // Join 2 arrays +// const menu = [...restaurant.starterMenu, ...restaurant.mainMenu]; +// console.log(menu); + +// // Iterables: arrays, string, maps, sets. NOT objects +// const str = 'Jonas'; +// const letters = [...str, '', 'S.']; +// console.log(letters); +// console.log(...str); +// // not gonna work +// // console.log(`${...str}`) + +// // Real-world examples +// const ingredients = [ +// prompt("Let's make pasta! Ingredient 1?"), +// prompt('Ingredients 2?'), +// prompt('Ingredient 3?'), +// ]; +// // console.log(ingredients); +// restaurant.orderPasta(ingredients[0], ingredients[1], ingredients[2]); +// restaurant.orderPasta(...ingredients); + +// // Objects +// const newRestaurant = { foundedIn: 1998, ...restaurant, founder: 'Guiseppe' }; +// console.log(newRestaurant); + +// const restaurantCopy = { ...restaurant }; +// restaurantCopy.name = 'Ristorante Roma'; +// console.log(restaurantCopy.name); +// console.log(restaurant.name); + +// restaurant.orderDelivery({ +// time: '22:30', +// address: 'Via del Sole, 21', +// mainIndex: 2, +// starterIndex: 2, +// }); + +// restaurant.orderDelivery({ +// address: 'Via del Sole, 21', +// starterIndex: 2, +// }); +// // detructuring object +// const { name, openingHours, categories } = restaurant; +// console.log(name, openingHours, categories); + +// const { +// name: restaurantName, +// openingHours: hours, +// categories: tags, +// } = restaurant; + +// console.log(restaurantName, hours, tags); + +// const { menu = [], starterMenu: starters = [] } = restaurant; +// console.log('object destruction test', menu, starters); + +// // Mutating variables +// let a = 111; +// let b = 999; +// const obj = { a: 23, b: 27, c: 14 }; + +// ({ a, b } = obj); + +// console.log(a, b); +// // Nested objects +// const { +// fri: { open: o, close: c }, +// } = openingHours; +// console.log(o, c); + +// detructuring the array +// const arr = [2, 3, 4]; +// const a = arr[0]; +// const b = arr[1]; +// const c = arr[2]; + +// const [x, y, z] = arr; +// console.log(x, y, z); +// console.log(arr); + +// // switch variable +// let [main, , secondary] = restaurant.categories; +// // console.log(main, secondary); + +// // const temp = main; +// // main = secondary; +// // secondary = temp; +// [main, secondary] = [secondary, main]; +// console.log(restaurant.order(2, 0)); + +// // recieve 2 value from the function +// const [starter, mainCourse] = restaurant.order(2, 0); +// console.log(starter, mainCourse); + +// const nested = [2, 4, [5, 6]]; + +// const [i, , [j, k]] = nested; +// console.log(i, j, k); + +// // Default values +// const [p = 1, q = 1, r = 1] = [8, 9]; +// console.log(p, q, r);