diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000..eaaf854bb7 Binary files /dev/null and b/.DS_Store differ diff --git a/01-Fundamentals-Part-1/.DS_Store b/01-Fundamentals-Part-1/.DS_Store new file mode 100644 index 0000000000..7fc5a21e6b Binary files /dev/null and b/01-Fundamentals-Part-1/.DS_Store differ diff --git a/01-Fundamentals-Part-1/starter/index.html b/01-Fundamentals-Part-1/starter/index.html index 59529c7923..96fbc80614 100755 --- a/01-Fundamentals-Part-1/starter/index.html +++ b/01-Fundamentals-Part-1/starter/index.html @@ -25,5 +25,7 @@

JavaScript Fundamentals – Part 1

+ + diff --git a/01-Fundamentals-Part-1/starter/script.js b/01-Fundamentals-Part-1/starter/script.js new file mode 100644 index 0000000000..e052601467 --- /dev/null +++ b/01-Fundamentals-Part-1/starter/script.js @@ -0,0 +1,54 @@ +/* +let js = "amazing"; +//if (js === "amazing") alert("JavaScript is FUN!"); + +//40 + 8 + 23 - 10; +console.log(40 + 8 + 23 - 10); + +let firstName = "Dan"; +console.log(firstName); + + +console.log(country); +console.log(continent); +console.log(population); + +let population = 350000000; +let country = "United States"; +let continent = "North America"; +let language = "English"; + +console.log(population / 2); +console.log(population + 1); +console.log(population > 6000000); +console.log(population < 33000000); +console.log( + country + + " is in " + + continent + + ", and its " + + population + + " people speak " + + language +); + + +const age = 12; +const isOldEnough = age >= 18; + +if (age >= 18) { + console.log(`Sarah can start driving licence!`); +} else { + const yearsLeft = 18 - age; + console.log(`Sarah is too young, wait another ${yearsLeft} years.`); +} + +let century; +const birthYear = 1994; +if (birthYear <= 2000) { + century = 20; +} else { + century = 21; +} +console.log(century); +*/ diff --git a/02-Fundamentals-Part-2/starter/script.js b/02-Fundamentals-Part-2/starter/script.js index e69de29bb2..4b66f7c545 100755 --- a/02-Fundamentals-Part-2/starter/script.js +++ b/02-Fundamentals-Part-2/starter/script.js @@ -0,0 +1,223 @@ +"use strict"; +/* +function logger(myName) { + console.log(`My name is ${myName}`); +} + +logger("Dan"); +logger("Bob"); + +function fruitProcessor(apples, oranges) { + console.log(apples, oranges); + const juice = `Juice with ${apples} apples and ${oranges} oranges.`; + return juice; +} + +console.log(fruitProcessor(5, 1)); + +const calcAge3 = (birthYear) => 2037 - birthYear; +console.log(calcAge3(1994)); + +const calcAverage = (scr1, scr2, scr3) => (scr1 + scr2 + scr3) / 3; + +let scoreDolphins = calcAverage(44, 23, 71); +let scoreKoalas = calcAverage(65, 54, 49); + +function checkWinner(avgDolphins, avgKoalas) { + if (avgKoalas > avgDolphins * 2) { + console.log(`Koalas win (${avgKoalas} vs. ${avgDolphins})`); + } else if (avgDolphins > avgKoalas * 2) { + console.log(`Koalas win (${avgDolphins} vs. ${avgKoalas})`); + } else { + console.log(`No team wins...`); + } +} + +checkWinner(scoreDolphins, scoreKoalas); +*/ + +/* +const friends = ["Michael", "Steven", "Peter"]; +console.log(friends); + +console.log(friends[0]); +console.log(friends[2]); + +console.log(friends.length); +console.log(friends[friends.length - 1]); + +friends[2] = "Jay"; +console.log(friends); + +const dan = ["Dan", "Bekenstein", 2024 - 1994, "Product Manager", friends]; +console.log(dan); +console.log(dan.length); + +const calcAge = function (birthYear) { + return 2037 - birthYear; +}; +const years = [1990, 1967, 2002, 2010, 2018]; + +const age1 = calcAge(years[0]); +const age2 = calcAge(years[1]); +const age3 = calcAge(years[years.length - 1]); +console.log(age1, age2, age3); +*/ + +/* +const friends = ["Michael", "Steven", "Peter"]; +const newLength = friends.push("Jay"); +console.log(friends); +console.log(newLength); + +friends.unshift("John"); +console.log(friends); + +const popped = friends.pop(); +console.log(friends); +console.log(popped); + +friends.shift(); +console.log(friends); + +console.log(friends.indexOf("Steven")); + +console.log(friends.includes("Peter")); +console.log(friends.includes("Dan")); + +if (friends.includes("Steven")) { + console.log("You have a friend called Steven"); +} +*/ +/* +const dan = { + firstName: "Dan", + lastName: "Bekenstein", + age: 2024 - 1994, + job: "Product Manager", + friends: ["Tim", "Justin", "Greg"], +}; + +console.log(dan); +console.log(dan.lastName); +console.log(dan["lastName"]); + +const nameKey = "Name"; + +console.log(dan["first" + nameKey]); +console.log(dan["last" + nameKey]); + +// const interestedIn = prompt( +// "What do you want to know about Dan? Choose between firstName, lastName, age, job, and friends" +// ); +// console.log(dan[interestedIn]); + + +dan.location = "US"; +dan["city"] = "Boston"; + +console.log(dan); + +console.log( + `${dan.firstName} has ${dan.friends.length} friends, and his best friend is called ${dan.friends[0]}` +); + +const dan1 = { + firstName: "Dan", + lastName: "Bekenstein", + // age: 2024 - 1994, + job: "Product Manager", + friends: ["Tim", "Justin", "Greg"], + birthYear: 1994, + hasDriversLicense: true, + + calcAge: function () { + this.age = 2024 - this.birthYear; + return this.age; + }, + + getSummary: function () { + return `${this.firstName} is a ${this.calcAge()}-year old ${ + this.job + }, and he has ${this.hasDriversLicense ? "a" : "no"} driver's license.`; + }, +}; +console.log(dan1.calcAge()); + +console.log(dan1.age); + +console.log(dan1.getSummary()); +*/ + +// for (let rep = 1; rep <= 10; rep++) { +// console.log(`Lifting weights repetition ${rep}`); +// } +/* +const dan = [ + "Dan", + "Bekenstein", + 2024 - 1994, + "Product Manager", + ["Tim", "Justin", "Greg"], + true, +]; + +const types = []; + +for (let i = 0; i < dan.length; i++) { + console.log(dan[i], typeof dan[i]); + + // types[i] = typeof dan[i]; + types.push(typeof dan[i]); +} + +console.log(types); + +const years = [1991, 2007, 1969, 2020]; +const ages = []; + +for (let i = 0; i < years.length; i++) { + ages.push(2024 - years[i]); +} +console.log(years, ages); + + +const dan = [ + "Dan", + "Bekenstein", + 2024 - 1994, + "Product Manager", + ["Tim", "Justin", "Greg"], +]; + +for (let i = dan.length - 1; i >= 0; i--) { + console.log(dan[i]); +} + +for (let exercise = 1; exercise < 4; exercise++) { + console.log(`----Starting exercise---- ${exercise}`); + + for (let rep = 1; rep < 6; rep++) { + console.log(`Lifting weight repetition ${rep}`); + } +} +*/ + +// for (let rep = 1; rep <= 10; rep++) { +// console.log(`Lifting weights repetition ${rep}`); +// } + +// let rep = 1; +// while (rep <= 10) { +// console.log(`Lifting weights repetition ${rep}`); +// rep++; +// } + +let dice = Math.trunc(Math.random() * 6) + 1; +// console.log(dice); + +while (dice != 6) { + console.log(`You rolled a ${dice}`); + dice = Math.trunc(Math.random() * 6) + 1; + if (dice === 6) console.log("Loop is about to end..."); +} diff --git a/03-Developer-Skills/starter/.prettierrc b/03-Developer-Skills/starter/.prettierrc new file mode 100644 index 0000000000..544138be45 --- /dev/null +++ b/03-Developer-Skills/starter/.prettierrc @@ -0,0 +1,3 @@ +{ + "singleQuote": true +} diff --git a/03-Developer-Skills/starter/script.js b/03-Developer-Skills/starter/script.js index 939b2a2446..ec1ddd0981 100644 --- a/03-Developer-Skills/starter/script.js +++ b/03-Developer-Skills/starter/script.js @@ -1,3 +1,19 @@ // Remember, we're gonna use strict mode in all scripts now! 'use strict'; +const temps1 = [17, 21, 23]; +const temps2 = [12, 5, -4, 0, 4]; + +// function that takes a temp and number to return a string in the right format +//function that takes in an array and formats the arr + +const printForecast = function (arr) { + let forecast = '... '; + for (let i = 0; i < arr.length; i++) { + forecast += `${arr[i]}*C in ${i + 1} days ... `; + } + return forecast; +}; + +console.log(printForecast(temps1)); +console.log(printForecast(temps2)); diff --git a/04-HTML-CSS/.DS_Store b/04-HTML-CSS/.DS_Store new file mode 100644 index 0000000000..b34631316e Binary files /dev/null and b/04-HTML-CSS/.DS_Store differ diff --git a/04-HTML-CSS/final/.DS_Store b/04-HTML-CSS/final/.DS_Store new file mode 100644 index 0000000000..5008ddfcf5 Binary files /dev/null and b/04-HTML-CSS/final/.DS_Store differ diff --git a/04-HTML-CSS/final/index.html b/04-HTML-CSS/final/index.html index da7d3f055b..85c0bd8c5e 100644 --- a/04-HTML-CSS/final/index.html +++ b/04-HTML-CSS/final/index.html @@ -18,9 +18,7 @@

JavaScript is fun, but so is HTML & CSS!

Another heading

-

- Just another paragraph -

+

Just another paragraph

+ + + + + Learning HTML & CSS + + + +

JavaScript is fun, but so is HTML & 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 me. +

+

Another Heading

+

Just another paragraph

+ + +
+

Your name here

+

Please fill in this form :)

+ + +
+ + diff --git a/04-HTML-CSS/starter/style1.css b/04-HTML-CSS/starter/style1.css new file mode 100644 index 0000000000..7e8a895526 --- /dev/null +++ b/04-HTML-CSS/starter/style1.css @@ -0,0 +1,56 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: rgb(151, 228, 247); + font-family: Arial; + font-size: 20px; + padding: 40px; +} + +h1 { + font-size: 40px; + padding-bottom: 15px; +} + +h2 { + margin-bottom: 20px; + text-align: center; +} + +p { + margin-bottom: 20px; +} + +.first { + color: rgb(234, 255, 0); +} + +#your-name { + background-color: rgb(226, 43, 189); + border: 5px solid #444; + width: 350px; + padding: 25px; + margin-top: 20px; +} + +input, +button { + padding: 10px; + font-size: 16px; +} + +a { + background-color: aliceblue; +} + +#dan-image { + width: 450px; +} + +#your-name h2 { + color: rgb(43, 226, 61); +} diff --git a/05-Guess-My-Number/starter/script.js b/05-Guess-My-Number/starter/script.js index ad9a93a7c1..497b525b2f 100644 --- a/05-Guess-My-Number/starter/script.js +++ b/05-Guess-My-Number/starter/script.js @@ -1 +1,72 @@ 'use strict'; +/* +console.log(document.querySelector('.message').textContent); +document.querySelector('.message').textContent = `Correct Number! 👍`; + +document.querySelector('.number').textContent = 13; +document.querySelector('.score').textContent = 10; + +document.querySelector('.guess').value = 23; +console.log(document.querySelector('.guess').value); + + +*/ + +let secretNumber; +const calcSecretNumber = function () { + secretNumber = Math.trunc(Math.random() * 20) + 1; +}; +let score = 20; +let highScore = 0; + +calcSecretNumber(); +// document.querySelector('.number').textContent = secretNumber; + +const wrongGuess = function () { + if (score > 1) { + score--; + document.querySelector('.score').textContent = score; + } else { + score--; + changeMessage('You lost the game! 😞'); + } +}; + +const changeMessage = function (newMessage) { + document.querySelector('.message').textContent = newMessage; +}; + +document.querySelector('.check ').addEventListener('click', function () { + const guess = Number(document.querySelector('.guess').value); + console.log(guess, typeof guess); + + if (!guess) { + changeMessage(`No number 💔`); + } else if (guess === secretNumber) { + changeMessage(`Correct number! 😎`); + document.querySelector('.number').textContent = secretNumber; + document.querySelector('body').style.backgroundColor = '#60b347'; + document.querySelector('.number').style.width = '30rem'; + if (score > highScore) { + highScore = score; + document.querySelector('.highscore').textContent = highScore; + } + } else if (guess > secretNumber) { + changeMessage(`Too high! 👇`); + wrongGuess(); + } else if (guess < secretNumber) { + changeMessage(`Too low! 👆`); + wrongGuess(); + } +}); + +document.querySelector('.again').addEventListener('click', function () { + score = 20; + document.querySelector('.score').textContent = score; + calcSecretNumber; + document.querySelector('body').style.backgroundColor = '#222'; + document.querySelector('.number').style.width = '15rem'; + changeMessage('Start guessing...'); + document.querySelector('.number').textContent = '?'; + document.querySelector('.guess').value = ''; +}); diff --git a/06-Modal/starter/script.js b/06-Modal/starter/script.js index ad9a93a7c1..e08b0e472f 100644 --- a/06-Modal/starter/script.js +++ b/06-Modal/starter/script.js @@ -1 +1,28 @@ 'use strict'; + +const modal = document.querySelector('.modal'); +const overlay = document.querySelector('.overlay'); +const btnCloseModal = document.querySelector('.close-modal'); +const btnsOpenModal = document.querySelectorAll('.show-modal'); + +const openModal = function () { + modal.classList.remove('hidden'); + overlay.classList.remove('hidden'); +}; + +const closeModal = function () { + modal.classList.add('hidden'); + overlay.classList.add('hidden'); +}; + +for (let i = 0; i < btnsOpenModal.length; i++) + btnsOpenModal[i].addEventListener('click', openModal); + +btnCloseModal.addEventListener('click', closeModal); +overlay.addEventListener('click', closeModal); + +document.addEventListener('keydown', function (e) { + if (e.key === 'Escape' && !modal.classList.contains('hidden')) { + closeModal(); + } +}); diff --git a/07-Pig-Game/starter/script.js b/07-Pig-Game/starter/script.js index ad9a93a7c1..dfa880cf44 100644 --- a/07-Pig-Game/starter/script.js +++ b/07-Pig-Game/starter/script.js @@ -1 +1,87 @@ 'use strict'; + +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'); + +let scores, currentScore, activePlayer, playing; + +//starting conditions +const init = function () { + scores = [0, 0]; + currentScore = 0; + activePlayer = 0; + playing = true; + + 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'); + diceEl.classList.add('hidden'); +}; + +init(); + +const switchPlayer = function () { + 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 () { + if (playing) { + //1. random 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 rolle 1: if true, switch to next player + if (dice !== 1) { + currentScore += dice; + document.getElementById(`current--${activePlayer}`).textContent = + currentScore; + } else { + switchPlayer(); + } + } +}); + +btnHold.addEventListener('click', function () { + if (playing) { + scores[activePlayer] += currentScore; + document.getElementById(`score--${activePlayer}`).textContent = + scores[activePlayer]; + + if (scores[activePlayer] >= 20) { + playing = false; + document + .querySelector(`.player--${activePlayer}`) + .classList.add('player--winner'); + document + .querySelector(`.player--${activePlayer}`) + .classList.remove('player--active'); + diceEl.classList.add('hidden'); + } else { + switchPlayer(); + } + } +}); + +btnNew.addEventListener('click', function () { + 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; +}