diff --git a/Guess The Word/index.html b/Guess The Word/index.html new file mode 100644 index 0000000..f83683d --- /dev/null +++ b/Guess The Word/index.html @@ -0,0 +1,49 @@ + + + + + + Document + + + +

Guess The Word

+ Difficulty: + +

+ Category: + +

+ Hint: + +

+ +

+ Attempts left: + +

+ +

+ + + diff --git a/Guess The Word/script.js b/Guess The Word/script.js new file mode 100644 index 0000000..effc87d --- /dev/null +++ b/Guess The Word/script.js @@ -0,0 +1,233 @@ +const words = [ + { + word: "javascript", + category: "Programming", + hint: "A scripting language for the web.", + }, + { + word: "python", + category: "Programming", + hint: "A snake and a popular programming language.", + }, + { + word: "react", + category: "Programming", + hint: "A JavaScript library for building UIs.", + }, + { + word: "algorithm", + category: "Programming", + hint: "A step-by-step procedure to solve a problem.", + }, + { + word: "variable", + category: "Programming", + hint: "Used to store data values in a program.", + }, + + { word: "elephant", category: "Animal", hint: "The largest land animal." }, + { word: "tiger", category: "Animal", hint: "The national animal of India." }, + { + word: "penguin", + category: "Animal", + hint: "A bird that cannot fly but can swim.", + }, + { + word: "dolphin", + category: "Animal", + hint: "An intelligent aquatic mammal.", + }, + { + word: "kangaroo", + category: "Animal", + hint: "An animal that hops and carries babies in a pouch.", + }, + + { + word: "pizza", + category: "Food", + hint: "A popular Italian dish with cheese.", + }, + { + word: "burger", + category: "Food", + hint: "A sandwich with a patty inside buns.", + }, + { + word: "pasta", + category: "Food", + hint: "An Italian dish made with noodles and sauce.", + }, + { + word: "sushi", + category: "Food", + hint: "A Japanese dish made with rice and raw fish.", + }, + { + word: "biryani", + category: "Food", + hint: "A flavorful rice dish popular in South Asia.", + }, + + { word: "mumbai", category: "City", hint: "A coastal city in India." }, + { + word: "paris", + category: "City", + hint: "The city of love and the Eiffel Tower.", + }, + { word: "tokyo", category: "City", hint: "The capital of Japan." }, + { word: "newyork", category: "City", hint: "The Big Apple." }, + { + word: "london", + category: "City", + hint: "Famous for the Big Ben and the Thames.", + }, + + { + word: "guitar", + category: "Instrument", + hint: "Has strings and is played with fingers.", + }, + { + word: "piano", + category: "Instrument", + hint: "Has keys and is played with fingers.", + }, + { + word: "drums", + category: "Instrument", + hint: "Played with sticks and gives rhythm.", + }, + { + word: "violin", + category: "Instrument", + hint: "A string instrument played with a bow.", + }, + { + word: "flute", + category: "Instrument", + hint: "A wind instrument you blow into.", + }, + + { word: "moon", category: "Space", hint: "Earth’s only natural satellite." }, + { + word: "sun", + category: "Space", + hint: "The star at the center of our solar system.", + }, + { word: "mars", category: "Space", hint: "The red planet." }, + { + word: "galaxy", + category: "Space", + hint: "A system of stars, dust, and gas bound by gravity.", + }, + { + word: "comet", + category: "Space", + hint: "An icy body that glows as it passes near the sun.", + }, + + { + word: "cricket", + category: "Sport", + hint: "A bat-and-ball game popular in India.", + }, + { + word: "football", + category: "Sport", + hint: "A game played with a round ball and two goals.", + }, + { + word: "chess", + category: "Sport", + hint: "A game of strategy played on a checkered board.", + }, + { + word: "tennis", + category: "Sport", + hint: "Played with rackets and a small yellow ball.", + }, + { + word: "basketball", + category: "Sport", + hint: "A game where players shoot hoops.", + }, + + { word: "rose", category: "Flower", hint: "A symbol of love and romance." }, + { word: "lotus", category: "Flower", hint: "The national flower of India." }, + { + word: "sunflower", + category: "Flower", + hint: "Follows the sun across the sky.", + }, + { + word: "tulip", + category: "Flower", + hint: "A spring flower often found in the Netherlands.", + }, + { + word: "lily", + category: "Flower", + hint: "A fragrant white flower often used in ceremonies.", + }, +]; +const categoryEl = document.getElementById("selected-category"); +const hintEl = document.getElementById("hint-text"); +const blankEl = document.getElementById("blank"); +const guessInput = document.getElementById("guessInput"); +const submitBtn = document.getElementById("submitBtn"); +const newWordBtn = document.getElementById("new-word"); +const resultEl = document.getElementById("result-arena"); +const countEl = document.getElementById("count"); +const difficultySelect = document.getElementById("diff-option"); +let secretWord = ""; +let attempt = 0; + +setDifficulty = () => { + const level = difficultySelect.value; + if (level === "easy") attempt = 8; + else if (level === "medium") attempt = 6; + else attempt = 4; +}; +startGame = () => { + const random = words[Math.floor(Math.random() * words.length)]; + categoryEl.innerHTML = random.category; + hintEl.innerHTML = random.hint; + secretWord = random.word.toLowerCase(); + blankEl.innerHTML = "_".repeat(secretWord.length); + resultEl.textContent = ""; + setDifficulty(); + countEl.textContent = attempt; + guessInput.value = ""; +}; +guessWord = () => { + const guess = guessInput.value.trim().toLowerCase(); + if (!guess || attempt < 1) { + return; + } + if (guess === secretWord) { + resultEl.textContent = `✅ Correct! The word was ${secretWord.toUpperCase()}`; + resultEl.style.color = "var(--sucess)"; + } else { + attempt--; + resultEl.textContent = `❌ Wrong! Try again.`; + resultEl.style.color = `var(--error)`; + countEl.textContent = attempt; + if (attempt <= 0) { + resultEl.textContent = + "💀 Game Over! The word was " + secretWord.toUpperCase(); + resultEl.style.color = "var(--error)"; + } + } + guessInput.value = ""; +}; +submitBtn.addEventListener("click", () => { + guessWord(); +}); +guessInput.addEventListener("keydown", (e) => { + if (e.key === "Enter") checkGuess(); +}); +newWordBtn.addEventListener("click", startGame); +difficultySelect.addEventListener("change", startGame); + +startGame(); diff --git a/Guess The Word/style.css b/Guess The Word/style.css new file mode 100644 index 0000000..47ff2d5 --- /dev/null +++ b/Guess The Word/style.css @@ -0,0 +1,145 @@ +:root { + --primary: #1a1f36; + --secondary: #f0f4f8; + --accent: #ff6b6b; + --success: #32d48a; + --error: #ff4e4e; + --font: "Poppins", sans-serif; +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: var(--font); + background: linear-gradient(135deg, #1a1f36, #232946); + color: var(--secondary); + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + padding: 1rem; +} + +#hero { + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(10px); + border-radius: 20px; + padding: 2rem; + width: 100%; + max-width: 480px; + display: flex; + flex-direction: column; + gap: 1.2rem; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); +} + +#title { + text-align: center; +} + +#heading { + font-size: 2rem; + color: var(--accent); + margin-bottom: 0.5rem; +} + +label { + font-size: 0.9rem; + margin-bottom: 0.3rem; + display: block; +} +#Difficulty { + gap: 1rem; + display: flex; + justify-content: center; + align-items: center; + margin: 0 1rem; + margin-top: 1.5rem; +} + +select, +input, +button { + width: 100%; + padding: 10px 12px; + border-radius: 8px; + border: none; + font-size: 1rem; + margin-bottom: 0.8rem; + outline: none; +} + +select, +input { + background: rgba(255, 255, 255, 0.12); + color: var(--secondary); +} + +input::placeholder { + color: rgba(255, 255, 255, 0.6); +} + +button { + background: var(--accent); + color: white; + font-weight: 600; + cursor: pointer; + transition: 0.25s; +} + +button:hover { + background: #ff5252; + transform: scale(1.03); +} + +#play-arena { + display: flex; + flex-direction: column; + margin: 0 1rem; +} + +#category, +#hint, +#blank, +#Attempts-counts, +#result-arena { + padding: 0.5rem 0; + font-size: 1rem; +} + +#blank { + font-size: 1.5rem; + letter-spacing: 6px; + text-align: center; + margin-bottom: 0.8rem; +} + +#result-arena { + font-weight: bold; + min-height: 1.4em; + text-align: center; +} +#Attempts-counts { + text-align: center; + margin-bottom: 1.5rem; +} +#category { + text-align: center; +} +@media (max-width: 480px) { + #heading { + font-size: 1.6rem; + } + select, + input, + button { + font-size: 0.9rem; + } + #blank { + font-size: 1.2rem; + letter-spacing: 4px; + } +} diff --git a/README.md b/README.md index 9b2b909..2b97be0 100644 --- a/README.md +++ b/README.md @@ -56,7 +56,7 @@ git clone https://github.com/Mukulbaid63/Hack-with-JavaScript.git Change to the repository directory on your computer (if you are not already there): ``` -cd (filename) +cd Hack-with-JavaScript ``` Now create a branch using the `git checkout` command: @@ -114,7 +114,7 @@ Soon we will be merging all your changes into the master branch of this project. - [Python](https://github.com/Mukulbaid63/Hack-with-JavaScript) - [JavaScript](https://github.com/Mukulbaid63/Hack-with-JavaScript) - [GoLang](https://github.com/Mukulbaid63/Hack-with-JavaScript) -- [Bash](https://github.com/Mukulbaid63/Hack-with-JavaScript) +- [Bash](https://github.com/Mukulbaid63/Hack-with-JavaScript) - [PowerShell](https://github.com/Mukulbaid63/Hack-with-JavaScript)

CONTRIBUTORS WALL:

diff --git a/WordCounter/index.html b/WordCounter/index.html new file mode 100644 index 0000000..dc9fe50 --- /dev/null +++ b/WordCounter/index.html @@ -0,0 +1,105 @@ + + + + + + + + + Word Counter + + + + +

+ +

+ Simply input text to start counting OR + + +

+ +

+ Words +

0

+ +

+ Characters +

0

+ +

+ Characters without spaces +

0

+ + +

+ Sentences +

0

+ +

+ Paragraphs +

0

+ +

+ + + + \ No newline at end of file diff --git a/WordCounter/main.js b/WordCounter/main.js new file mode 100644 index 0000000..bc0200f --- /dev/null +++ b/WordCounter/main.js @@ -0,0 +1,87 @@ +function count_words(s) { + s = s.replace(/(^\s*)|(\s*$)/gi, ""); //exclude start and end white- + s = s.replace(/[!@#$%^&*(),.?":{}|<>-]/g, ""); + s = s.replace(/\n{1,}/gm, " "); + s = s.replace(/[.]{3,}/g, ""); + s = s.replace(/[—]{1,}/g, ""); + s = s.replace(/[ ]{2,}/gi, " "); //2 or more space to 1 + s = s.replace(/\n /, "\n"); // exclude newline with a start spacing + return s.split(' ').filter(function (str) { + return str != ""; + }).length; +} + +function count_paragraphs(text) { + text = text.replace(/\n$/gm, ''); //.split(/\n/).length; + text = text.replace(/(^\s*)/gi, ""); // delete start \n + return text.split(/\n/).length; +} + +function count_sentences(text) { + return text.trim().split(/[\.\?\!]\s/).length; +} + +function count_character_space(s) { + s = s.replace(/(^\s*)|(\s*$)/gi, ""); + s = s.replace(/\n /, "\n"); + return s.length; +} + +function count_character(text) { + return text.replace(/\s+/g, "").length; +} + +function insert_data() { + document.querySelector("#total-word-strong").innerText = word; + document.querySelector("#total-characters-strong").innerText = character_space; + document.querySelector("#total-char-without-spacestrong").innerText = character; + document.querySelector("#sentences").innerText = sentences; + document.querySelector("#paragraphs").innerText = paragraphs; +} + +function analytic_words(text) { + word = count_words(text); + character_space = count_character_space(text); + character = count_character(text); + sentences = count_sentences(text); + paragraphs = 0; + + if (word) { + paragraphs = count_paragraphs(text); + } + if (!word) { + sentences = 0; + } + + insert_data(); +} + + +document.addEventListener('DOMContentLoaded', () => { + document.getElementById('upload-file').addEventListener('change', function () { + var fr = new FileReader(); + fr.onload = function () { + document.getElementById("input").value = this.result; + cal_text_data_for_show(); + } + fr.readAsText(this.files[0]); + }); + document.querySelector("#input").addEventListener("keyup", () => { + cal_text_delay_for_show(); + }) +}); + +function cal_text_data_for_show() { + diff_words = 0; + text = document.querySelector("#input").value + analytic_words(text); +} + +var timeoutdata; + +function cal_text_delay_for_show() { + clearTimeout(timeoutdata); + timeoutdata = setTimeout(function () { + cal_text_data_for_show(); + }, 300); +}