ron2111 · MohitSinghChauhan · Oct 5, 2021 · Oct 5, 2021
diff --git a/Awesome Javascript Projects_Scripts/GuessTheNumber_game/index.html b/Awesome Javascript Projects_Scripts/GuessTheNumber_game/index.html
@@ -0,0 +1,35 @@
+<!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" />
+  <link rel="stylesheet" href="style.css" />
+  <title>Guess My Number!</title>
+</head>
+
+<body>
+  <header>
+    <h1>Guess My Number!</h1>
+    <p class="between">(Between 1 and 100)</p>
+    <button class="btn again">Again!</button>
+    <div class="number">?</div>
+  </header>
+  <main>
+    <section class="left">
+      <input type="number" class="guess">
+      <button class="btn check">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="label-highscore">
+        🥇 Highscore: <span class="highscore">0</span>
+      </p>
+    </section>
+  </main>
+  <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Awesome Javascript Projects_Scripts/GuessTheNumber_game/script.js b/Awesome Javascript Projects_Scripts/GuessTheNumber_game/script.js
@@ -0,0 +1,92 @@
+'use strict';
+
+let secretNumber = Math.floor(Math.random() * 100) + 1;
+// revealGuess(secretNumber); //for testing purposes
+let score = 20;
+let highscore = 0;
+
+const checkText = document.querySelector('.check').textContent;
+
+function generateRandomNumber() {
+  let randomNumber = Math.floor(Math.random() * 100) + 1;
+  return randomNumber;
+}
+
+function displayMessage(message) {
+  document.querySelector('.message').textContent = message;
+}
+
+function updateHighscore(highscore) {
+  document.querySelector('.highscore').textContent = highscore;
+}
+
+function revealGuess(secretNumber) {
+  document.querySelector('.number').textContent = secretNumber;
+}
+
+function changeBgColor(backgroundColor) {
+  document.querySelector('body').style.backgroundColor = backgroundColor;
+}
+
+function updateScore(score) {
+  document.querySelector('.score').textContent = score;
+}
+
+function emptyGuessBox() {
+  document.querySelector('.guess').value = "";
+}
+
+const gameLogic = function () {
+
+  let guess = Number(document.querySelector('.guess').value);
+
+  if (!guess) {
+    displayMessage('⛔ No Number');
+  }
+
+
+  else if (guess === secretNumber) {
+    if (score > highscore) {
+      displayMessage('🎉 Correct');
+      highscore = score;
+      updateHighscore(highscore);
+    }
+
+    revealGuess(secretNumber);
+    changeBgColor('#60b347');
+    document.querySelector('.number').style.width = '30rem';
+  }
+
+
+  else if (guess !== secretNumber) {
+    if (score > 1) {
+      score--;
+      updateScore(score);
+      if (guess - secretNumber <= 5 && guess - secretNumber >= 0 ) displayMessage('🤏 Little bit High');
+      else if (secretNumber - guess <= 5 && secretNumber - guess >=0) displayMessage('🤏 Little bit Low');
+      else {
+        displayMessage(guess > secretNumber ? '📈 Too High' : '📉 Too Low');
+      }
+      emptyGuessBox();
+    }
+    else {
+      displayMessage('💥 You have lost the Game');
+    }
+  }
+};
+
+document.querySelector('.check').addEventListener('click', gameLogic);
+
+
+document.querySelector('.again').addEventListener('click', function () {
+  secretNumber = Math.floor(Math.random() * 20) + 1;
+  displayMessage('Start guessing...');
+  score = 20;
+  updateScore(score);
+  changeBgColor('#222');
+  document.querySelector('.number').style.width = '15rem';
+  emptyGuessBox()
+  document.querySelector('.number').textContent = '?';
+  // revealGuess(secretNumber); // for testing purposes
+
+})
diff --git a/Awesome Javascript Projects_Scripts/GuessTheNumber_game/style.css b/Awesome Javascript Projects_Scripts/GuessTheNumber_game/style.css
@@ -0,0 +1,119 @@
+@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: inherit;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Press Start 2P', sans-serif;
+  color: #eee;
+  background-color: #222;
+  /* background-color: #60b347; */
+}
+
+/* LAYOUT */
+header {
+  position: relative;
+  height: 35vh;
+  border-bottom: 7px solid #eee;
+}
+
+main {
+  height: 65vh;
+  color: #eee;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.left {
+  width: 52rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.right {
+  width: 52rem;
+  font-size: 2rem;
+}
+
+/* ELEMENTS STYLE */
+h1 {
+  font-size: 4rem;
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  top: 52%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.number {
+  background: #eee;
+  color: #333;
+  font-size: 6rem;
+  width: 15rem;
+  padding: 3rem 0rem;
+  text-align: center;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 50%);
+}
+
+.between {
+  font-size: 1.4rem;
+  position: absolute;
+  top: 2rem;
+  right: 2rem;
+}
+
+.again {
+  position: absolute;
+  top: 2rem;
+  left: 2rem;
+}
+
+.guess {
+  background: none;
+  border: 4px solid #eee;
+  font-family: inherit;
+  color: inherit;
+  font-size: 5rem;
+  padding: 2.5rem;
+  width: 25rem;
+  text-align: center;
+  display: block;
+  margin-bottom: 3rem;
+}
+
+.btn {
+  border: none;
+  background-color: #eee;
+  color: #222;
+  font-size: 2rem;
+  font-family: inherit;
+  padding: 2rem 3rem;
+  cursor: pointer;
+}
+
+.btn:hover {
+  background-color: #ccc;
+}
+
+.message {
+  margin-bottom: 8rem;
+  height: 3rem;
+}
+
+.label-score {
+  margin-bottom: 2rem;
+}
diff --git a/Awesome Javascript Projects_Scripts/Pig Game/1.png b/Awesome Javascript Projects_Scripts/Pig Game/1.png
diff --git a/Awesome Javascript Projects_Scripts/Pig Game/dice-1.png b/Awesome Javascript Projects_Scripts/Pig Game/dice-1.png
diff --git a/Awesome Javascript Projects_Scripts/Pig Game/dice-2.png b/Awesome Javascript Projects_Scripts/Pig Game/dice-2.png
diff --git a/Awesome Javascript Projects_Scripts/Pig Game/dice-3.png b/Awesome Javascript Projects_Scripts/Pig Game/dice-3.png
diff --git a/Awesome Javascript Projects_Scripts/Pig Game/dice-4.png b/Awesome Javascript Projects_Scripts/Pig Game/dice-4.png
diff --git a/Awesome Javascript Projects_Scripts/Pig Game/dice-5.png b/Awesome Javascript Projects_Scripts/Pig Game/dice-5.png
diff --git a/Awesome Javascript Projects_Scripts/Pig Game/dice-6.png b/Awesome Javascript Projects_Scripts/Pig Game/dice-6.png
diff --git a/Awesome Javascript Projects_Scripts/Pig Game/index.html b/Awesome Javascript Projects_Scripts/Pig Game/index.html
@@ -0,0 +1,66 @@
+<!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" />
+  <link rel="stylesheet" href="style.css" />
+  <title>Roll the dice</title>
+</head>
+
+<body>
+  <div class="wrapper">
+    <button class="instructions button show-modal"> i
+      <span></span>
+      <span></span>
+      <span></span>
+      <span></span>
+    </button>
+  </div>
+
+  <div class="modal hidden">
+    <button class="close-modal">&times;</button>
+    <h1>How to Play😍</h1><br>
+    <p>
+      Each turn, a player repeatedly rolls a die until either a 1 is rolled or the player decides to "hold":<br><br><br>
+
+      🎲🎲 If the player rolls a 1, they score nothing and it becomes the next player's turn.<br><br>
+      🎊🎊 If the player rolls any other number, it is added to their turn total and the player's turn
+      continues.<br><br>
+      🔥🔥 If a player chooses to "hold", their turn total is added to their score, and it becomes the next player's
+      turn.<br><br>
+      🎉🎉 <strong>The first player to score 100 or more points wins.</strong><br><br>
+
+    </p>
+  </div>
+  <div class="overlay hidden"></div>
+
+  <main>
+
+    <section class="player player--0 player--active">
+      <h2 class="name" id="name--0">Player 1</h2>
+      <p class="score" id="score--0">43</p>
+      <div class="current">
+        <p class="current-label">Current</p>
+        <p class="current-score" id="current--0">0</p>
+      </div>
+    </section>
+    <section class="player player--1">
+      <h2 class="name" id="name--1">Player 2</h2>
+      <p class="score" id="score--1">24</p>
+      <div class="current">
+        <p class="current-label">Current</p>
+        <p class="current-score" id="current--1">0</p>
+      </div>
+    </section>
+
+    <img src="dice-5.png" alt="Playing dice" class="dice" />
+    <button class="btn btn--new">🔄 New game</button>
+    <button class="btn btn--roll">🎲 Roll dice</button>
+    <button class="btn btn--hold">📥 Hold</button>
+  </main>
+  <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Awesome Javascript Projects_Scripts/Pig Game/pig-game-flowchart.png b/Awesome Javascript Projects_Scripts/Pig Game/pig-game-flowchart.png