Merge pull request #21 from Madhu0-2/Main

Added WORDLE Game

public/WORDLE/assets/css/style.css

@@ -0,0 +1,206 @@
+.heading {
+    font-family: "Roboto Slab", serif;
+}
+
+.nav__icon {
+    width: 2rem;
+}
+.navbar {
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+    text-align: center;
+    justify-content: space-between;
+    padding: 0 3rem;
+}
+.navele {
+    margin: 0;
+}
+.infoCard {
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    font-size: 15px;
+    text-align: left;
+    width: 50%;
+    margin: 0 auto;
+    padding: 20px;
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+    position: absolute;
+    left: 25%;
+    background-color: white;
+}
+.hidden {
+    display: none;
+}
+.example__img {
+    width: 20rem;
+}
+.words {
+    margin: auto;
+    padding: 10px;
+}
+.inputBox {
+    width: 50px;
+    height: 50px;
+    caret-color: transparent;
+    font-size: 25px;
+    font-weight: bold;
+    text-align: center;
+    border: solid 2px rgb(182, 182, 182);
+}
+.button {
+    width: 40px;
+    height: 60px;
+    padding: 10px;
+    margin: 2px;
+    border-style: none;
+    border-radius: 5px;
+    background-color: rgb(221, 220, 220);
+    font-weight: bold;
+}
+.button:hover {
+    background-color: rgb(207, 205, 205);
+}
+.keyboard {
+    margin: auto;
+}
+
+.buttonRow2 {
+    margin: auto;
+}
+.enter {
+    width: 80px;
+}
+.backspace {
+    width: 50px;
+    font-size: 18px;
+}
+.message {
+    position: absolute;
+    left: 50%;
+    top: 20%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    background-color: black;
+    color: white;
+    font-size: 20px;
+    border-radius: 10px;
+    padding: 9px 12px;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+.cross {
+    font-weight: 900;
+    border: none;
+    background-color: white;
+}
+.cross:hover,
+.button:hover,
+.nav__icon:hover {
+    cursor: pointer;
+}
+.yellow {
+    background-color: rgb(205, 226, 16);
+    border-color: rgb(205, 226, 16);
+    color: white;
+}
+.green {
+    background-color: rgb(21, 172, 89);
+    border-color: rgb(21, 172, 89);
+    color: white;
+}
+.grey {
+    background-color: rgb(161, 161, 161);
+    border-color: rgb(161, 161, 161);
+    color: white;
+}
+
+@media screen and (max-width: 568px) {
+    .heading {
+        font-family: "Roboto Slab", serif;
+        font-size: 1.5rem;
+    }
+    .popup {
+        width: 70%;
+        left: 8%;
+    }
+    .infoCard {
+        font-size: 12px;
+        margin: 0 auto;
+        padding: 15px;
+        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+        position: absolute;
+        background-color: white;
+    }
+    .example__img {
+        width: 80%;
+    }
+    .nav__icon {
+        width: 1.5rem;
+    }
+    .button {
+        width: 28px;
+        height: 45px;
+        padding: 3px;
+        margin: 1px;
+        font-weight: 550;
+    }
+    .backspace {
+        font-weight: 600;
+    }
+    .enter {
+        width: 55px;
+    }
+    .backspace {
+        width: 40px;
+        font-size: 18px;
+    }
+    .inputBox {
+        width: 40px;
+        height: 45px;
+        font-size: 20px;
+    }
+    .navbar {
+        padding: 0 1rem;
+    }
+}
+@media screen and (min-width: 1024px) {
+    .infoCard {
+        width: 30%;
+        left: 34%;
+    }
+}
+/* .info {
+    padding-left: 0px;
+    padding-right: 30em;
+    width: 30px;
+}
+.stats {
+    padding-left: 30rem;
+    padding-right: 0px;
+    width: 30px;
+}
+.navbar {
+    text-align: center;
+}
+.navbar li {
+    display: inline-block;
+}
+.navele {
+    display: block;
+}
+
+.crossOuter {
+    padding: 0;
+    margin: 0;
+    text-align: right;
+}
+#eximg {
+    width: 80%;
+}
+#stats,
+#result {
+    font-size: 20px;
+    text-align: center;
+}
+.mini {
+    font-size: 10px;
+} */

public/WORDLE/assets/js/script.js

@@ -0,0 +1,156 @@
+"use strict";
+//initializing variables
+let playing = true;
+let row = 1;
+let col = 1;
+let inputWord = "";
+
+//getting random secret word
+let date = new Date();
+let day = date.getDate();
+let month = date.getMonth() + 1;
+let secretWord = shuffledWords[31 * (month - 1) + day].toUpperCase();
+let currentBox = "b11";
+
+//selecting elements
+const enterButton = document.querySelector(".enter");
+const backButton = document.querySelector("#back");
+const message = document.querySelector("#message");
+const closeInfo = document.querySelector("#closeInfo");
+const info = document.querySelector(".info");
+const closeStats = document.querySelector("#closeStats");
+const stats = document.querySelector(".stats");
+const closeResult = document.querySelector("#closeResult");
+//functions
+const changeControl = function (type) {
+    if (row === 7) {
+        playing = false;
+        message.textContent = secretWord;
+        message.classList.remove("hidden");
+    } else {
+        if (type < 0) {
+            if (Number(currentBox[2]) > 1)
+                currentBox = `b${row}${Number(currentBox[2]) - 1}`;
+        } else {
+            if (Number(currentBox[2]) < 5)
+                currentBox = `b${row}${Number(currentBox[2]) + 1}`;
+        }
+    }
+};
+
+const getBoxValue = function (elementId) {
+    return document.querySelector(`#${elementId}`).value;
+};
+
+const checkWord = function (word) {
+    for (let i = 0; i < 5; i++) {
+        if (word[i] === secretWord[i]) {
+            document.querySelector(`#b${row}${i + 1}`).classList.add("green");
+            document.querySelector(`#${word[i]}`).classList.add("green");
+        } else if (secretWord.includes(word[i])) {
+            document.querySelector(`#b${row}${i + 1}`).classList.add("yellow");
+            document.querySelector(`#${word[i]}`).classList.add("yellow");
+        } else {
+            document.querySelector(`#b${row}${i + 1}`).classList.add("grey");
+            document.querySelector(`#${word[i]}`).classList.add("grey");
+        }
+    }
+    if (word === secretWord) {
+        message.textContent = appreciation[row - 1];
+        message.classList.remove("hidden");
+        setTimeout(function () {
+            message.classList.add("hidden");
+            result.classList.remove("hidden");
+            // console.log("Show result");
+        }, 1000);
+
+        playing = false;
+    }
+};
+
+//----------------eventlisteners--------------------------
+//enter button
+enterButton.addEventListener("click", function () {
+    if (playing) {
+        for (let i = 1; i <= 5; i++) {
+            let boxId = `#b${row}${i}`;
+            if (document.querySelector(boxId).value !== "") {
+                inputWord = inputWord + document.querySelector(boxId).value;
+            }
+        }
+        console.log(inputWord, inputWord.length);
+        if (inputWord.length === 5) {
+            if (allowedWords.includes(inputWord.toLowerCase())) {
+                checkWord(inputWord);
+                inputWord = "";
+                if (row < 7) {
+                    row++;
+                    currentBox = `b${row}0`;
+                    changeControl(1);
+                }
+            } else {
+                inputWord = "";
+                message.textContent = "Word not in list";
+                message.classList.remove("hidden");
+                setTimeout(function () {
+                    message.classList.add("hidden");
+                }, 1000);
+            }
+        } else {
+            inputWord = "";
+            message.textContent = "Not enough letters";
+            message.classList.remove("hidden");
+            setTimeout(function () {
+                message.classList.add("hidden");
+            }, 1000);
+        }
+    }
+});
+
+//backbutton
+backButton.addEventListener("click", function () {
+    const boxValue = getBoxValue(currentBox);
+    if (boxValue === "") changeControl(-1);
+    document.querySelector(`#${currentBox}`).value = "";
+});
+
+//keyboard buttons
+for (const alphabet of alphabets) {
+    document
+        .querySelector(`#${alphabet}`)
+        .addEventListener("click", function () {
+            if (
+                Number(currentBox[2]) <= 5 &&
+                getBoxValue(currentBox) === "" &&
+                playing === true
+            ) {
+                document.querySelector(`#${currentBox}`).value = alphabet;
+                changeControl(1);
+            }
+        });
+}
+
+//info close button
+closeInfo.addEventListener("click", function () {
+    document.querySelector("#rules").classList.add("hidden");
+});
+
+//rules info
+info.addEventListener("click", function () {
+    document.querySelector("#rules").classList.remove("hidden");
+});
+
+//stats close button
+closeStats.addEventListener("click", function () {
+    document.querySelector("#stats").classList.add("hidden");
+});
+
+//rules info
+stats.addEventListener("click", function () {
+    document.querySelector("#stats").classList.remove("hidden");
+});
+
+//close result
+closeResult.addEventListener("click", function () {
+    document.querySelector("#result").classList.add("hidden");
+});