Merge branch 'swapnilsparsh:master' into Rupa-rd

swapnilsparsh · May 27, 2024 · 99b450a · 99b450a
2 parents 3570b07 + c49c95c
commit 99b450a
Show file tree

Hide file tree

Showing 43 changed files with 1,696 additions and 415 deletions.
diff --git a/01 - Drum Kit/main.js b/01 - Drum Kit/main.js
@@ -12,6 +12,12 @@ const keyCode = {
   L: 76,
 };
 
+document.addEventListener('keyup',()=>{
+  keys.forEach((key)=>{
+    key.classList.remove('playing');
+  })
+})
+
 function removeTransition(e) {
   if (e.propertyName !== 'transform') return;
   e.target.classList.remove('playing');

diff --git a/103 - Retro Mario Game/script.js b/103 - Retro Mario Game/script.js
@@ -177,7 +177,7 @@ function Lava(pos, ch) {
 		this.repeatPos = pos;
 	}
 }
-Lava.prototype.type = "Lava";
+Lava.prototype.type = "lava";
 
 function Coin(pos) {
 	this.basePos = this.pos = pos;

diff --git a/113 - Minesweeper/script.js b/113 - Minesweeper/script.js
@@ -25,15 +25,19 @@ function generateMines() {
 
 function handleCellClick(event) {
   const clickedIndex = parseInt(event.target.getAttribute("data-index"));
-  if (mines.includes(clickedIndex)) {
-    revealMines();
-    alert("Game Over! You hit a mine.");
-  } else {
-    revealCell(clickedIndex);
-    points++;
-    updatePoints();
-    if (revealedCells === boardSize * boardSize - totalMines) {
-      alert("Congratulations! You won!");
+  const cell = document.querySelector(`.cell[data-index="${clickedIndex}"]`);
+
+  if (!cell.classList.contains("revealed")) {
+    if (mines.includes(clickedIndex)) {
+      revealMines();
+      alert("Game Over! You hit a mine.");
+    } else {
+      revealCell(clickedIndex);
+      points++;
+      updatePoints();
+      if (revealedCells === boardSize * boardSize - totalMines) {
+        alert("Congratulations! You won!");
+      }
     }
   }
 }

diff --git a/115 - Guess The Country/assets/favicon.png b/115 - Guess The Country/assets/favicon.png
diff --git a/115 - Guess The Country/index.html b/115 - Guess The Country/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Guess The Country using Flag</title>
+
+    <link rel="stylesheet" href="style.css">
+
+    <link rel="shortcut icon" href="./assets/favicon.png" type="image/x-icon">
+</head>
+<body>
+    <div class="container">
+        <h2>Guess the Country</h2>
+
+        <div class="countryImg">
+            <img id="country-flag" alt="countryFlag" src="">
+        </div>
+
+        <input type="text" placeholder="Enter Country name" id="guess">
+        <button id="submitGuess">Submit Guess</button>
+        <p id="result">Hurray! Thats Correct!</p>
+        <p id="empty-error"></p>
+        <button id="nextBtn">Next</button>
+
+        <div class="scoreElement">
+            <h5 id="score-guide">Correct guess = 10 points</h5>
+            <h4 id="user-score">Your Score: <span id="user-score-val"></span></h4>
+        </div>
+    </div>
+
+    <footer>
+        <p>&#x3c; &#47; &#x3e; with ❤️ by
+          <a href="https://github.com/AtharvKasar04" target="_blank">Atharv Kasar</a>
+          <br>
+          <a href="https://github.com/swapnilsparsh/30DaysOfJavaScript" target="_blank">#30DaysOfJavaScript
+          </a>
+        </p>
+      </footer>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/115 - Guess The Country/script.js b/115 - Guess The Country/script.js
@@ -0,0 +1,120 @@
+const countries = [
+    { name: "France", flag: "https://flagcdn.com/fr.svg" },
+    { name: "Germany", flag: "https://flagcdn.com/de.svg" },
+    { name: "Italy", flag: "https://flagcdn.com/it.svg" },
+    { name: "Japan", flag: "https://flagcdn.com/jp.svg" },
+    { name: "Brazil", flag: "https://flagcdn.com/br.svg" },
+    { name: "United States", flag: "https://flagcdn.com/us.svg" },
+    { name: "Canada", flag: "https://flagcdn.com/ca.svg" },
+    { name: "United Kingdom", flag: "https://flagcdn.com/gb.svg" },
+    { name: "Australia", flag: "https://flagcdn.com/au.svg" },
+    { name: "China", flag: "https://flagcdn.com/cn.svg" },
+    { name: "India", flag: "https://flagcdn.com/in.svg" },
+    { name: "Mexico", flag: "https://flagcdn.com/mx.svg" },
+    { name: "Russia", flag: "https://flagcdn.com/ru.svg" },
+    { name: "South Africa", flag: "https://flagcdn.com/za.svg" },
+    { name: "Argentina", flag: "https://flagcdn.com/ar.svg" },
+    { name: "South Korea", flag: "https://flagcdn.com/kr.svg" },
+    { name: "Nigeria", flag: "https://flagcdn.com/ng.svg" },
+    { name: "Egypt", flag: "https://flagcdn.com/eg.svg" },
+    { name: "Spain", flag: "https://flagcdn.com/es.svg" },
+    { name: "Portugal", flag: "https://flagcdn.com/pt.svg" },
+    { name: "Netherlands", flag: "https://flagcdn.com/nl.svg" },
+    { name: "Sweden", flag: "https://flagcdn.com/se.svg" },
+    { name: "Norway", flag: "https://flagcdn.com/no.svg" },
+    { name: "Greece", flag: "https://flagcdn.com/gr.svg" },
+    { name: "Turkey", flag: "https://flagcdn.com/tr.svg" },
+    { name: "Saudi Arabia", flag: "https://flagcdn.com/sa.svg" },
+    { name: "New Zealand", flag: "https://flagcdn.com/nz.svg" },
+    { name: "Switzerland", flag: "https://flagcdn.com/ch.svg" },
+    { name: "Poland", flag: "https://flagcdn.com/pl.svg" },
+    { name: "Ukraine", flag: "https://flagcdn.com/ua.svg" },
+    { name: "Malaysia", flag: "https://flagcdn.com/my.svg" },
+    { name: "Thailand", flag: "https://flagcdn.com/th.svg" },
+    { name: "Vietnam", flag: "https://flagcdn.com/vn.svg" },
+    { name: "Indonesia", flag: "https://flagcdn.com/id.svg" },
+    { name: "Philippines", flag: "https://flagcdn.com/ph.svg" },
+    { name: "Pakistan", flag: "https://flagcdn.com/pk.svg" },
+    { name: "Bangladesh", flag: "https://flagcdn.com/bd.svg" },
+    { name: "Iran", flag: "https://flagcdn.com/ir.svg" },
+    { name: "Iraq", flag: "https://flagcdn.com/iq.svg" },
+    { name: "Israel", flag: "https://flagcdn.com/il.svg" },
+    { name: "Cuba", flag: "https://flagcdn.com/cu.svg" },
+    { name: "Venezuela", flag: "https://flagcdn.com/ve.svg" },
+    { name: "Colombia", flag: "https://flagcdn.com/co.svg" },
+    { name: "Peru", flag: "https://flagcdn.com/pe.svg" },
+    { name: "Chile", flag: "https://flagcdn.com/cl.svg" },
+    { name: "Morocco", flag: "https://flagcdn.com/ma.svg" },
+    { name: "Algeria", flag: "https://flagcdn.com/dz.svg" },
+    { name: "Ethiopia", flag: "https://flagcdn.com/et.svg" },
+    { name: "Kenya", flag: "https://flagcdn.com/ke.svg" },
+    { name: "Tanzania", flag: "https://flagcdn.com/tz.svg" },
+    { name: "Uganda", flag: "https://flagcdn.com/ug.svg" }
+];
+
+let currentCountryIndex = 0;
+let currentScore = 0;
+
+document.addEventListener('DOMContentLoaded', () => {
+    const flagElement = document.getElementById('country-flag');
+    const guessInput = document.getElementById('guess');
+    const submitGuessButton = document.getElementById('submitGuess');
+    const resultElement = document.getElementById('result');
+    const nextCountryButton = document.getElementById('nextBtn');
+    const emptyErrorVal = document.querySelector("#empty-error");
+    const userScoreVal = document.querySelector("#user-score-val")
+    userScoreVal.textContent = currentScore;
+
+    function showCountry(index) {
+        flagElement.src = countries[index].flag;
+        guessInput.value = '';
+        resultElement.textContent = '';
+        emptyErrorVal.textContent = '';
+    }
+
+    function checkGuess() {
+        const userGuess = guessInput.value.trim().toLowerCase();
+        const correctAnswer = countries[currentCountryIndex].name.toLowerCase();
+        if (userGuess === correctAnswer) {
+            resultElement.textContent = 'Correct!';
+            resultElement.style.color = 'green';
+            currentScore += 10;
+            userScoreVal.textContent = currentScore;
+            nextCountry();
+        } else {
+            resultElement.textContent = `Wrong! The correct answer is ${countries[currentCountryIndex].name}.`;
+            resultElement.style.color = 'red';
+        }
+
+    }
+
+    function nextCountry() {
+        currentCountryIndex = (currentCountryIndex + 1) % countries.length;
+        showCountry(currentCountryIndex);
+    }
+
+    submitGuessButton.addEventListener('click', () => {
+        if (guessInput.value == "") {
+            emptyErrorVal.textContent = "Input field cannot be empty";
+        } else {
+            checkGuess();
+            emptyErrorVal.textContent = "";
+        }
+    });
+
+    guessInput.addEventListener('keyup', (e) => {
+        if (e.key === 'Enter') {
+            if (guessInput.value == "") {
+                emptyErrorVal.textContent = "Input field cannot be empty";
+            } else {
+                checkGuess();
+                emptyErrorVal.textContent = "";
+            }
+        }
+    });
+
+    nextCountryButton.addEventListener('click', nextCountry);
+
+    // Show the first country on page load
+    showCountry(currentCountryIndex);
+});
diff --git a/115 - Guess The Country/style.css b/115 - Guess The Country/style.css
@@ -0,0 +1,155 @@
+/* Importing the Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body{
+    background-color: #19172e;
+}
+
+.container{
+    /* border: 2px solid wheat; */
+    background-color: rgba(255, 255, 255, 1);
+    padding: 10px;
+    width: 40%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 18px;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    align-items: center;
+    box-shadow: 3px 3px 1px darkolivegreen;
+}
+
+.container > h2{
+    font-family: "Lilita One", sans-serif;
+    font-size: 3.6rem;
+    color: #19172e;
+    margin: 14px;
+}
+
+#guess{
+    padding: 8px 16px;
+    border: 2px solid darkolivegreen;
+    border-radius: 18px;
+    width: 50%;
+    margin: 10px;
+}
+
+#submitGuess{
+    padding: 10px 20px;
+    color: white;
+    font-weight: bold;
+    font-family: sans-serif;
+    letter-spacing: 0px;
+    background-color: darkolivegreen;
+    outline: none;
+    border: none;
+    border-radius: 4px;
+    box-shadow: 4px 4px 0px  darkkhaki;
+    transition: 0.3s ease-in-out;
+    margin-bottom: 8px;
+}
+
+#submitGuess:hover{
+    box-shadow: 0px 0px 0px;
+    letter-spacing: 1px;
+    cursor: pointer;
+}
+
+#result{
+    color: green;
+    font-family:"Lilita one", sans-serif;
+    font-weight: bold;
+    font-size: 1.5rem;
+    letter-spacing: 1px;
+}
+
+#nextBtn{
+    padding: 10px 40px;
+    background-color: transparent;
+    color: #19172e;
+    font-weight: bold;
+    font-family: sans-serif;
+    letter-spacing: 0px;
+    outline: none;
+    border: 2px solid #19172e;
+    border-radius: 4px;
+    transition: 0.3s ease-in-out;
+}
+
+#nextBtn:hover{
+    cursor: pointer;
+    background-color: lightgreen;
+    border-radius: 20px;
+    letter-spacing: 2px;
+}
+
+#country-flag{
+    width: 250px;
+    border-radius: 4px;
+    border: 2px solid #19172e;
+}
+
+#empty-error{
+    color: red;
+    font-family: sans-serif;
+    font-weight: bold;
+    margin: 10px;
+}
+
+.scoreElement{
+    padding: 10px;
+}
+
+#score-guide{
+    color: gray;
+}
+
+#user-score{
+    color: #19172e;
+    font-family: "Lilita one";
+    font-size: 1.2rem;
+}
+
+@media only screen and (max-width: 600px) {
+    .container{
+        width: 75%;
+    }
+
+    .container > h2{
+        font-size: 2rem;
+    }
+
+    #country-flag{
+        width: 150px;
+    }
+
+    #guess{
+        width: 75%;
+    }
+  }
+
+
+footer {
+    text-align: center;
+    color: white;
+    font-size: 1rem;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin-bottom: 0;
+    padding: 5px;
+  }
+
+  footer a:visited {
+    color: inherit;
+  }
diff --git a/30DaysOfJavaScript/assets/81.PNG b/30DaysOfJavaScript/assets/81.PNG
diff --git a/30DaysOfJavaScript/assets/guessTheCountry.png b/30DaysOfJavaScript/assets/guessTheCountry.png
diff --git a/30DaysOfJavaScript/script.js b/30DaysOfJavaScript/script.js
@@ -187,7 +187,8 @@ function search_project() {
       { name: "Pixel to em Converter", url: "./110 - Pixel to em Converter/index.html" },
       { name: "Luminosity Particle Js", url: "./111 - Luminosity Particle Js/index.html" },
       { name: "Maze Game", url: "./112 - Maze Game/index.html" },
-      { name: "Minesweeper", url: "./113 - Minesweeper/index.html" }
+      { name: "Minesweeper", url: "./113 - Minesweeper/index.html" },
+      { name: "Guess the Country", url: "./115 - Guess The Country/index.html"}
 
 ];