jonasschmedtmann · myt-ml · Aug 31, 2024 · Sep 1, 2024 · Sep 1, 2024 · Sep 1, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+
+.DS_Store
diff --git a/.vscode/settings.json 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
diff --git a/01-Fundamentals-Part-1/starter/index.html b/01-Fundamentals-Part-1/starter/index.html
@@ -1,29 +1,83 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>JavaScript Fundamentals – Part 1</title>
-    <style>
-      body {
-        height: 100vh;
-        display: flex;
-        align-items: center;
-        background: linear-gradient(to top left, #28b487, #7dd56f);
-      }
-      h1 {
-        font-family: sans-serif;
-        font-size: 50px;
-        line-height: 1.3;
-        width: 100%;
-        padding: 30px;
-        text-align: center;
-        color: white;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>JavaScript Fundamentals – Part 1</h1>
-  </body>
-</html>
+<html>
+<head>
+<style>
+body{
+background:skyblue;
+animation-name:background;
+animation-duration:6s;
+animation-delay:0.3s;
+animation-iteration-count:infinite;
+}
+.sun{
+height:150px;
+width:150px;
+border-radius:100px;
+background:orange;
+box-shadow:2px 2px 50px 10px orange;
+border:1px solid orange;
+position:absolute;
+right:400px;
+top:-150px;
+animation-name:sunset;
+animation-duration:6s;
+animation-iteration-count:infinite;
+}
+.moon{
+height:150px;
+width:150px;
+border-radius:100px;
+background:white;
+box-shadow:2px 2px 50px 10px white;
+border:1px solid white;
+position:absolute;
+bottom:20px;
+left:200px;
+animation-name:moon;
+animation-duration:6s;
+animation-delay:0.2s;
+animation-iteration-count:infinite;
+}
+@keyframes background{
+0%{
+background:rgba(49,141,199,0.8);
+}
+70%{
+background:linear-gradient(to top,rgba(49,141,199,0.8),rgba(247,167,27,0.5));
+}
+100%{
+background:rgba(0,0,0,0.9);
+}
+}
+@keyframes sunset{
+0%{
+top:-150px;
+background:linear-gradient(90deg,orange,gold);
+}
+100%{
+top:570px;
+background:linear-gradient(45deg,orange,gold);
+opacity:0.2;
+}
+}
+@keyframes moon{
+0%{
+bottom:0px;
+opacity:0;
+}
+50%{
+opacity:0.2;
+bottom:590px;
+background:linear-gradient(rgba(0,0,0,0.3),white);
+}
+100%{
+top:10px;
+opacity:1;
+}
+}
+</style>
+</head>
+<body>
+<div class="sun"></div>
+<div class="moon"></div>
+</body>
+</html>
diff --git a/01-Fundamentals-Part-1/starter/script.js 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
@@ -9,21 +9,21 @@
   </head>
   <body>
     <header>
-      <h1>Guess My Number!</h1>
-      <p class="between">(Between 1 and 20)</p>
-      <button class="btn again">Again!</button>
+      <h1>خمن الرقم السري </h1>
+      <p class="between">(الرقم بين ١ و ٢٠)</p>
+      <button class="btn again">مره أخري!</button>
       <div class="number">?</div>
     </header>
     <main>
       <section class="left">
         <input type="number" class="guess" />
-        <button class="btn check">Check!</button>
+        <button class="btn check">إتأكد</button>
       </section>
       <section class="right">
-        <p class="message">Start guessing...</p>
-        <p class="label-score">💯 Score: <span class="score">20</span></p>
+        <p class="message">ابدأ التخمين</p>
+        <p class="label-score">💯 الرصيد: <span class="score">20</span></p>
         <p class="label-highscore">
-          🥇 Highscore: <span class="highscore">0</span>
+          🥇 الرقم القياسي: <span class="highscore">0</span>
         </p>
       </section>
     </main>

diff --git 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
@@ -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
@@ -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');
+  }
+});
diff --git 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');
+  }
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		let js = "amazing1";
		if (js === "amazing1") alert("JavaScript is fun");
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { jest } from '@jest/globals';

		describe('fetchData', () => {});