diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000..644b2086d4 Binary files /dev/null and b/.DS_Store differ diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000000..9bea4330f0 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ + +.DS_Store diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000000..a5def49ad8 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,12 @@ +{ + "editor.formatOnPaste": true, + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnType": true, + "editor.formatOnSaveMode": "modificationsIfAvailable", + "notebook.defaultFormatter": "esbenp.prettier-vscode", + "notebook.formatOnCellExecution": true, + "notebook.formatOnSave.enabled": true, + "html.format.indentHandlebars": true, + "json.format.keepLines": true +} diff --git a/01-Fundamentals-Part-1/.DS_Store b/01-Fundamentals-Part-1/.DS_Store new file mode 100644 index 0000000000..d2d417fde0 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..455ba38f14 100755 --- a/01-Fundamentals-Part-1/starter/index.html +++ b/01-Fundamentals-Part-1/starter/index.html @@ -1,29 +1,83 @@ - - - - - - - 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..d28783cd36 --- /dev/null +++ b/01-Fundamentals-Part-1/starter/script.js @@ -0,0 +1,2 @@ +let js = "amazing1"; +if (js === "amazing1") alert("JavaScript is fun"); diff --git a/05-Guess-My-Number/starter/index.html b/05-Guess-My-Number/starter/index.html index b25c17540a..535cbfe98a 100644 --- a/05-Guess-My-Number/starter/index.html +++ b/05-Guess-My-Number/starter/index.html @@ -9,21 +9,21 @@
-

Guess My Number!

-

(Between 1 and 20)

- +

خمن الرقم السري

+

(الرقم بين ١ و ٢٠)

+
?
- +
-

Start guessing...

-

💯 Score: 20

+

ابدأ التخمين

+

💯 الرصيد: 20

- 🥇 Highscore: 0 + 🥇 الرقم القياسي: 0

diff --git a/05-Guess-My-Number/starter/script.js b/05-Guess-My-Number/starter/script.js index ad9a93a7c1..c98629300c 100644 --- a/05-Guess-My-Number/starter/script.js +++ b/05-Guess-My-Number/starter/script.js @@ -1 +1,71 @@ 'use strict'; +/* +console.log(document.querySelector('.message').textContent); +document.querySelector('.message').textContent = '🎉 Correct Number!'; +console.log((document.querySelector('.number').textContent = 13)); +document.querySelector('.score').textContent = 20; +console.log(document.querySelector('.guess').value); +document.querySelector('.guess').value = 23; +*/ +function evaluate1() { + return '📈 التخمين عالي!'; +} +function evaluate2() { + return '📉 التخمين قليل!'; +} +function name() { + score--; + document.querySelector('.score').textContent = score; + if (score === 0) { + document.querySelector('.message').textContent = 'لقد خسرت اللعبة'; + document.querySelector('.score').textContent = 0; + document.querySelector('body').style.backgroundColor = '#db5a42'; + document.querySelector('.check').disabled = true; + document.querySelector('.again').addEventListener('click', e => { + location.reload(); + // code + }); + } + /** + * this function is called when the user lose the game + * it changes the background color of the page to red and + * disable the check button + * it also adds an event listener to the again button to reload the page + */ + /****** a49c5849-e33b-4541-8866-a1c9080cc063 *******/ +} +const secretNumber = Math.trunc(Math.random() * 20) + 1; + +let score = 20; +let highscore = 0; + +document.querySelector('.check').addEventListener('click', function () { + const guess = Number(document.querySelector('.guess').value); + + if (!guess) { + document.querySelector('.message').textContent = 'لا توجد رقم!'; + } else if (guess === secretNumber) { + document.querySelector('.message').textContent = '🎉 الرقم صحيح'; + document.querySelector('.number').textContent = secretNumber; + document.querySelector('body').style.backgroundColor = '#60b347'; + document.querySelector('.message').style.cssText = + 'color: #DB5A42; font-size: 3rem; font-weight: bold;'; + } else if (guess > secretNumber) { + document.querySelector('.message').textContent = evaluate1(); + name(); + } else if (guess < secretNumber) { + document.querySelector('.message').textContent = evaluate2(); + name(); + } +}); +// Syntax: condition ? valueIfTrue : valueIfFalse +// Example: Determine greeting based on login status +//const greeting = isLoggedIn ? 'Welcome, User!' : 'Please Log In'; + +//guess > secretNumber ? (document.querySelector('.message').textContent = '📈 التخمين عالي!') : (document.querySelector('.message').textContent = '📉 التخمين قليل!'); +// +// + + + + diff --git a/05-Guess-My-Number/starter/script.test.js b/05-Guess-My-Number/starter/script.test.js new file mode 100644 index 0000000000..3e787fce2b --- /dev/null +++ b/05-Guess-My-Number/starter/script.test.js @@ -0,0 +1,3 @@ +import { jest } from '@jest/globals'; + +describe('fetchData', () => {}); diff --git a/06-Modal/starter/script.js b/06-Modal/starter/script.js index ad9a93a7c1..e1a9f92102 100644 --- a/06-Modal/starter/script.js +++ b/06-Modal/starter/script.js @@ -1 +1,32 @@ '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 index = 0; index < btnsOpenModal.length; index++) + btnsOpenModal[index].addEventListener('click', e => { + // code + // Open the modal when the corresponding button is clicked + modal.classList.remove('hidden'); + overlay.classList.remove('hidden'); + }); + +btnCloseModal.addEventListener('click', e => { + modal.classList.add('hidden'); + overlay.classList.add('hidden'); + // code +}); + +overlay.addEventListener('click', e => { + modal.classList.add('hidden'); + overlay.classList.add('hidden'); + // code +}); + +document.addEventListener('keydown', e => { + if (e.key === 'Escape') { + modal.classList.add('hidden'); + overlay.classList.add('hidden'); + } +}); \ No newline at end of file diff --git a/07-Pig-Game/starter/script.js b/07-Pig-Game/starter/script.js index ad9a93a7c1..4757bc5ce2 100644 --- a/07-Pig-Game/starter/script.js +++ b/07-Pig-Game/starter/script.js @@ -1 +1,101 @@ 'use strict'; +// Selecting Elements +const player0El = document.querySelector('.player--0'); +const player1El = document.querySelector('.player--1'); + +const score0El = document.getElementById('score--0'); +const score1El = document.getElementById('score--1'); +const diceEl = document.querySelector('.dice'); +const btnNew = document.querySelector('.btn--new'); +const btnRoll = document.querySelector('.btn--roll'); +const btnHold = document.querySelector('.btn--hold'); +const current0El = document.getElementById('current--0'); +const current1El = document.getElementById('current--1'); +let dice = 0; + +const scores = [0, 0]; +score0El.textContent = 0; +score1El.textContent = 0; + +diceEl.classList.add('hidden'); +let currentScore = 0; +let activePlayer = 0; +function rollDice() { + // Disable clicking during animation + diceEl.style.pointerEvents = 'none'; + + // Reset any previous transforms + diceEl.style.transform = 'rotate(0deg)'; + + // Animation sequence + const animationSequence = [ + { rotation: 360, image: 'dice-3.png' }, + { rotation: -300, image: 'dice-5.png' }, + { rotation: 240, image: 'dice-2.png' }, + { rotation: -180, image: 'dice-4.png' }, + { rotation: 120, image: 'dice-1.png' }, + { rotation: -60, image: 'dice-6.png' }, + ]; + + // Randomize final result + + // Perform animated roll + + let currentStep = 0; + const rollAnimation = setInterval(() => { + if (currentStep < animationSequence.length) { + diceEl.style.transform = `rotate(${animationSequence[currentStep].rotation}deg)`; + diceEl.src = animationSequence[currentStep].image; + currentStep++; + } else { + // Final result + clearInterval(rollAnimation); + diceEl.style.transform = 'rotate(0deg)'; + diceEl.src = `dice-${dice}.png`; + // rollResult.textContent = `You rolled: ${dice}`; + diceEl.style.pointerEvents = 'auto'; + } + }, 100); +} + +// rolling dice functionality +btnRoll.addEventListener('click', function () { + rollDice(); + + dice = Math.trunc(Math.random() * 6) + 1; + + diceEl.classList.remove('hidden'); + + if (dice !== 1) { + currentScore += dice; + + document.getElementById(`current--${activePlayer}`).textContent = + currentScore; + } else { + document.getElementById(`current--${activePlayer}`).textContent = 0; + currentScore = 0; + activePlayer = activePlayer === 0 ? 1 : 0; + player0El.classList.toggle('player--active'); + player1El.classList.toggle('player--active'); + } +}); + +btnHold.addEventListener('click', function () { + scores[activePlayer] += currentScore; + document.getElementById(`score--${activePlayer}`).textContent = + scores[activePlayer]; + if (scores[activePlayer] > 20) { + document + .querySelector(`.player--${activePlayer}`) + .classList.add('player--winner'); + document + .querySelector(`.player--${activePlayer}`) + .classList.remove('.player--active'); + } else { + currentScore = 0; + document.getElementById(`current--${activePlayer}`).textContent = 0; + activePlayer = activePlayer === 0 ? 1 : 0; + player0El.classList.toggle('player--active'); + player1El.classList.toggle('player--active'); + } +}); \ No newline at end of file diff --git a/07-Pig-Game/starter/style.css b/07-Pig-Game/starter/style.css index dcf788f011..1c3cbf3e48 100644 --- a/07-Pig-Game/starter/style.css +++ b/07-Pig-Game/starter/style.css @@ -16,7 +16,9 @@ body { font-weight: 400; height: 100vh; color: #333; - background-image: linear-gradient(to top left, #753682 0%, #bf2e34 100%); + background-image: linear-gradient(90deg, hsla(213, 77%, 14%, 1) 0%, hsla(202, 27%, 45%, 1) 100%); + + display: flex; align-items: center; justify-content: center; @@ -150,13 +152,16 @@ main { .dice { position: absolute; - left: 50%; + left: 45%; top: 16.5rem; transform: translateX(-50%); height: 10rem; box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2); } +.hidden { + display: none; +} .player--winner { background-color: #2f2f2f; } diff --git a/08-Behind-the-Scenes/.DS_Store b/08-Behind-the-Scenes/.DS_Store new file mode 100644 index 0000000000..aa22282dea Binary files /dev/null and b/08-Behind-the-Scenes/.DS_Store differ diff --git a/08-Behind-the-Scenes/starter/script.js b/08-Behind-the-Scenes/starter/script.js index ad9a93a7c1..6b58c8f6f8 100644 --- a/08-Behind-the-Scenes/starter/script.js +++ b/08-Behind-the-Scenes/starter/script.js @@ -1 +1,47 @@ 'use strict'; + + +// create an object +const martha = { + // Person's first name + firstName: 'Martha', + + // Person's last name + lastName: 'Smith', + + // Person's birth year + birthYear: 1979, + + // Person's job title + job: 'teacher', + + // Array of the person's friends' names + friends: ['Michael', 'Peter', 'Steven'], + + // Boolean indicating if the person has a driver's license + hasDriversLicense: true, + + /** + * Calculates the age of the person based on the birth year and the year 2037. + * Updates the age property of the object and returns the calculated age. + * @returns {number} The calculated age of the person + */ + calcAge: function () { + this.age = 2037 - this.birthYear; + return this.age; + } +}; + /** + * Calculates the age of the person based on the birth year and the year 2037. + * Updates the age property of the object and returns the calculated age. + */ + + + + +martha.calcAge(); + + + + + diff --git a/09-Data-Structures-Operators/starter/a.html b/09-Data-Structures-Operators/starter/a.html new file mode 100644 index 0000000000..129a417e48 --- /dev/null +++ b/09-Data-Structures-Operators/starter/a.html @@ -0,0 +1,14 @@ + + + + + + Document + + +

Hello!

+ + + + + \ No newline at end of file diff --git a/09-Data-Structures-Operators/starter/a.js b/09-Data-Structures-Operators/starter/a.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/09-Data-Structures-Operators/starter/script.js b/09-Data-Structures-Operators/starter/script.js index 2cc0fea5a0..64b4318437 100644 --- a/09-Data-Structures-Operators/starter/script.js +++ b/09-Data-Structures-Operators/starter/script.js @@ -12,6 +12,22 @@ const restaurant = { starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'], mainMenu: ['Pizza', 'Pasta', 'Risotto'], + order: function (starterIndex, mainIndex) { + return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]]; + console.log(this.starterMenu, this.mainMenu, this); + }, + + orderDelivery: function ({ + starterIndex = 1, + mainIndex = 0, + time = '20:00', + address, + }) { + console.log( + `Order received! ${this.starterMenu[starterIndex]} and ${this.mainMenu[mainIndex]} will be delivered to ${address} at ${time}` + ); + }, + openingHours: { thu: { open: 12, @@ -27,3 +43,5 @@ const restaurant = { }, }, }; +restaurant.order(2, 2); +console.log(this.starterMenu, this.mainMenu, this); diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000000..f82ae48529 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "complete-javascript-course", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} diff --git a/pet-adoption/.gitignore b/pet-adoption/.gitignore new file mode 100644 index 0000000000..496ee2ca6a --- /dev/null +++ b/pet-adoption/.gitignore @@ -0,0 +1 @@ +.DS_Store \ No newline at end of file diff --git a/pet-adoption/images/barksalot.jpg b/pet-adoption/images/barksalot.jpg new file mode 100644 index 0000000000..eadfb30117 Binary files /dev/null and b/pet-adoption/images/barksalot.jpg differ diff --git a/pet-adoption/images/meowsalot.jpg b/pet-adoption/images/meowsalot.jpg new file mode 100644 index 0000000000..f7675026e0 Binary files /dev/null and b/pet-adoption/images/meowsalot.jpg differ diff --git a/pet-adoption/images/purrsloud.jpg b/pet-adoption/images/purrsloud.jpg new file mode 100644 index 0000000000..d3c9ee93f3 Binary files /dev/null and b/pet-adoption/images/purrsloud.jpg differ diff --git a/pet-adoption/images/woof.jpg b/pet-adoption/images/woof.jpg new file mode 100644 index 0000000000..005ea016c7 Binary files /dev/null and b/pet-adoption/images/woof.jpg differ diff --git a/pet-adoption/index.html b/pet-adoption/index.html new file mode 100644 index 0000000000..8e6b3a06c7 --- /dev/null +++ b/pet-adoption/index.html @@ -0,0 +1,179 @@ + + + + + + + Pet Adoption Center + + + + + + + + +
+
+ +
+

Find Your New Bestie

+

The most amazing list of adoptable pets at your fingertips. Updated fresh daily!

+
+ View Pets + Manage Pets +
+ +
+
+ + + + + + + + + + + +

Sunny Play

+ +

Our center is located in beautiful Miami, and it’s currently °F at our pet playground. +

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

Dedicated Staff

+ +

Our center has over 70 volunteers who play with the pets four times daily.

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

Voted #1

+ +

For the last five years we’ve consistently been voted the #1 pet adoption center in the state.

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

Nightly Yoga

+ +

Every night our staff leads a yoga session and the animals are free to roam around and relax around + people. +

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

Meet Our Friends

+
+

Show me:

+
+ +
+
+
+

Barksalot

+

Barksalot is a sweet and lovable 3 year old ball of fluff. He loves carrots, + celery, and playing fetch.

+

2 Years Old

+
+
+ A white fluffy dog named Barskalot +
+
+
+
+

Meowsalot

+

Meowsalot is the most talkative cat we’ve ever come across. Constant + meowing, chirping and purring!

+

1 Year Old

+
+
+ A cat +
+
+
+
+

Woof

+

Woof is a very talkative and sweet pup. She loves beets, plums, cuddles and + jumping over low fences.

+

Less than a year old

+
+
+ A dog +
+
+
+
+

Purrsloud

+

Purrsloud has the loudest and most relaxing purr that’s come through our + center. Come hear it yourself.

+

4 Years Old

+
+
+ A cat +
+
+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/pet-adoption/main.js b/pet-adoption/main.js new file mode 100644 index 0000000000..4187e0d0b1 --- /dev/null +++ b/pet-adoption/main.js @@ -0,0 +1,19 @@ +async function start() { + const weatherPromise = await fetch( + "https://api.weather.gov/gridpoints/MFL/110,50/forecast" + ); + const weatherData = await weatherPromise.json(); + const ourTemperature = weatherData.properties.periods[0].temperature; + + document.querySelector("#temp-output").textContent = ourTemperature; +} + +start(); +async function petsArea() { + const petsPromise = await fetch( + "https://learnwebcode.github.io/bootcamp-pet-data/pets.json" + ); + const petsdata = await petsPromise.json(); + console.log(petsdata); +} +petsArea(); \ No newline at end of file diff --git a/pet-adoption/styles.css b/pet-adoption/styles.css new file mode 100644 index 0000000000..8733211e50 --- /dev/null +++ b/pet-adoption/styles.css @@ -0,0 +1,274 @@ +body, +html { + margin: 0; + padding: 0; + background-color: white; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: 'Source Sans 3', sans-serif; +} + +.top-section-wrapper { + overflow: hidden; + background-color: #001D37; + padding-left: 16px; + padding-right: 16px; +} + +.top-section { + color: white; + padding-top: 80px; + padding-bottom: 80px; + max-width: 1066px; + margin: 0 auto; + position: relative; +} + +.actual-top-content { + z-index: 2; + position: relative; +} + +.top-section h1 { + font-size: 4rem; + margin: 0; + line-height: 97.3%; + max-width: 525px; +} + +.intro-text { + font-size: 1.25rem; + line-height: 169.3%; + margin: 1rem 0; + max-width: 435px; +} + +.intro-buttons { + margin-bottom: 70px; +} + +.our-btn { + display: inline-block; + font-size: 1.125rem; + font-weight: 600; + background-color: #475AFF; + border: 2px solid #475AFF; + color: #FFF; + text-decoration: none; + padding: 13px 25px; + border-radius: 1000px; + transition: background-color .3s ease-out, border .3s ease-out, color .3s ease-out; +} + +.our-btn:hover { + background-color: #2E40E2; + border: 2px solid #2E40E2; +} + +.our-btn--outline { + background-color: transparent; + border: 2px solid white; +} + +.our-btn--outline:hover { + background-color: white; + color: #475AFF; + border: 2px solid white; +} + +.utility-mr { + margin-right: 10px; +} + +.intro-feature { + padding: 33px 25px; + border: 1px solid rgba(255, 255, 255, .24); +} + +.intro-feature p { + margin: 0; + font-size: 1.0625rem; +} + +.intro-feature h2 { + font-size: 1.5rem; + margin: 31px 0 3px 0; +} + +.intro-features { + display: grid; + column-gap: 16px; + row-gap: 16px; +} + +@media screen and (min-width: 580px) { + .intro-features { + grid-template-columns: 1fr 1fr; + } +} + +@media screen and (min-width: 900px) { + .intro-features { + grid-template-columns: 1fr 1fr 1fr 1fr; + } +} + +.circle { + width: 617px; + height: 617px; + background: #D660FF; + opacity: .85; + border-radius: 50%; + filter: blur(150px); + position: absolute; + top: 62px; + right: -390px; +} + +.circle-two { + width: 617px; + height: 617px; + background: #6079FF; + opacity: .85; + border-radius: 50%; + filter: blur(150px); + position: absolute; + top: -365px; + left: -123px; +} + +.page-section { + background-color: #FFF; + padding: 70px 16px; +} + +.page-section-inner { + max-width: 1066px; + margin: 0 auto; +} + +.page-section-title { + font-size: 4rem; + margin: 0; + line-height: 1; +} + +.pet-filter { + color: #9F9F9F; + font-size: 1.15rem; +} + +.pet-filter button { + background-color: transparent; + border: none; + font-family: 'Source Sans 3', sans-serif; + font-size: 1.15rem; + color: #9F9F9F; +} + +.site-footer p { + text-align: center; + color: #A6A6A6; + font-size: 0.875rem; + margin: 0; + padding: 0 0 65px 0; +} + +.list-of-pets { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(390px, 1fr)); + column-gap: 34px; + row-gap: 16px; +} + +.pet-card { + overflow: hidden; + display: grid; + grid-template-columns: 165px 1fr; + border-radius: 20px; + border: 1px solid #F3F3F3; + box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.08); +} + +.pet-card-photo { + order: 1; + grid-row: 1; +} + +.pet-card-photo img { + width: 100%; + height: 100%; + display: block; + object-fit: cover; +} + +.pet-card-text { + padding: 18px 16px; +} + +.pet-card-text h3 { + margin: 0 0 5px 0; + font-size: 1.625rem; + font-weight: 600; +} + +.pet-description { + font-size: .9rem; + margin: 0 0 1rem 0; + color: #626262; + line-height: 150%; +} + +.pet-age { + color: #A2A2A2; + font-size: .85rem; + margin: 0; +} + +@media screen and (min-width: 600px) { + .pet-description { + font-size: 1rem; + } + + .pet-card-text { + padding: 21px 29px; + } + + .list-of-pets { + row-gap: 28px; + } + + .pet-filter { + font-size: 1.375rem; + } + + .pet-filter button { + font-size: 1.375rem; + } + + .page-section-title { + font-size: 5.31rem; + } + + .page-section { + padding: 130px 16px; + } + + .intro-buttons { + margin-bottom: 129px; + } + + .top-section h1 { + font-size: 6.25rem; + } + + .top-section { + padding-top: 139px; + padding-bottom: 139px; + } +} \ No newline at end of file