{"id":30236892,"url":"https://github.com/aymansoliman-dev/guess-the-word-game","last_synced_at":"2025-08-15T01:10:04.281Z","repository":{"id":309947816,"uuid":"1038144926","full_name":"aymansoliman-dev/Guess-The-Word-Game","owner":"aymansoliman-dev","description":null,"archived":false,"fork":false,"pushed_at":"2025-08-14T19:21:23.000Z","size":96,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-14T19:28:28.721Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://aymansoliman-dev.github.io/Guess-The-Word-Game/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aymansoliman-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-14T17:35:42.000Z","updated_at":"2025-08-14T19:21:27.000Z","dependencies_parsed_at":"2025-08-14T19:28:30.354Z","dependency_job_id":"ac16f6d1-58b7-4cae-8977-9f00793d03a7","html_url":"https://github.com/aymansoliman-dev/Guess-The-Word-Game","commit_stats":null,"previous_names":["aymansoliman-dev/guess-the-word-game"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/aymansoliman-dev/Guess-The-Word-Game","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aymansoliman-dev%2FGuess-The-Word-Game","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aymansoliman-dev%2FGuess-The-Word-Game/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aymansoliman-dev%2FGuess-The-Word-Game/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aymansoliman-dev%2FGuess-The-Word-Game/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aymansoliman-dev","download_url":"https://codeload.github.com/aymansoliman-dev/Guess-The-Word-Game/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aymansoliman-dev%2FGuess-The-Word-Game/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270506984,"owners_count":24596884,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-14T02:00:10.309Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-08-15T01:09:16.482Z","updated_at":"2025-08-15T01:10:04.266Z","avatar_url":"https://github.com/aymansoliman-dev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Guess The Word Game solution\n\nThis is a solution to the [Guess The Word Game challenge](https://github.com/aymansoliman-dev/Guess-The-Word-Game). This project is a fun, interactive browser game where the player tries to guess the hidden word with the help of visual feedback for correct, misplaced, and incorrect letters.\n\n## Table of contents\n\n- [Overview](#overview)\n  - [The challenge](#the-challenge)\n  - [Design](#Design)\n  - [Links](#links)\n- [My process](#my-process)\n  - [Built with](#built-with)\n  - [What I learned](#what-i-learned)\n  - [Continued development](#continued-development)\n  - [Useful resources](#useful-resources)\n- [Author](#author)\n\n## Overview\n\n### The challenge\n\nUsers should be able to:\n\n- Guess the hidden word letter by letter\n- See different key colors for:\n  - Letter is correct and in the right position\n  - Letter is correct but in the wrong position\n  - Letter is not in the word at all\n\n- Play the game using only their keyboard\n- View a responsive layout depending on device size\n- See hover and focus states for interactive elements\n\n### Design\n\n![Desktop Design](design/desktop.png)\n\n##\n\n### Links\n\n- Solution URL: [Challenge Solution](https://github.com/aymansoliman-dev/Guess-The-Word-Game)\n- Live Site URL: [Live Preview](https://aymansoliman-dev.github.io/Guess-The-Word-Game/)\n\n## My process\n\n### Built with\n\n- HTML\n- CSS\n- Flexbox\n- Responsive design (desktop-first)\n- JavaScript:\n    - DOM manipulation\n    - Event listeners\n    - Keyboard events\n    - Custom Validation\n\n### What I learned\n\nFrom building this project, I learned several JavaScript and DOM manipulation concepts:\n\n- **Using constants for key codes** – Defining VK_LEFT, VK_RIGHT, etc., made the keyboard event handling more readable and maintainable instead of hard-coding numbers.\n\n- **Audio handling in JavaScript** – I learned how to create Audio objects, control their volume, jump to a specific point (currentTime), and play them as part of user feedback.\n\n- **Form-like keyboard navigation** – Implementing custom navigation between .input-field elements using arrow keys and backspace improved accessibility and made the game more intuitive.\n\n- **State management with variables** – Keeping track of numberOfTrials and numberOfHints in JavaScript to dynamically update the UI and restrict actions.\n\n- **Dynamic DOM updates** – \n    - Using querySelector / querySelectorAll to target elements.\n\n    - Adding / removing classes (.correct, .incorrect, .not-in-place) to reflect game state visually.\n\n    - Disabling and enabling inputs at different stages of the game.\n\n- **Creating dynamic popups** – Generating HTML elements (div, h2, p, button) with JavaScript and injecting them into the DOM for win/lose messages.\n\n- **Game logic functions** – Encapsulating functionality in reusable functions like checkLetters(), generateFailingMsg(), and generateSuccessMsg() to keep the code clean and organized.\n\n- **User input validation** – Ensuring that empty guesses trigger an alert and reset, preventing invalid submissions.\n\n\n```js\nfunction checkLetters(guess, WORD, activeRow) {\n    for (let i = 0; i \u003c guess.length; i++) {\n        if (guess[i] === WORD[i]) {\n            activeRow.querySelector(`.letter-${i+1}`).classList.add('correct');\n            activeRow.querySelector(`.letter-${i+1}`).setAttribute('checked', '');\n        }\n        else if (WORD.includes(guess[i]) \u0026\u0026 guess[i] !== '') {\n            activeRow.querySelector(`.letter-${i+1}`).classList.add('not-in-place');\n            activeRow.querySelector(`.letter-${i+1}`).setAttribute('checked', '');\n        }\n        else {\n            activeRow.querySelector(`.letter-${i+1}`).classList.add('incorrect');\n            activeRow.querySelector(`.letter-${i+1}`).setAttribute('checked', '');\n        }\n    }\n}\n```\n\n```js\n// Form-like keyboard navigation\nArray.from(inputFields).forEach(inputField =\u003e {\n    inputField.addEventListener('input', () =\u003e {\n        inputField.setAttribute('value', inputField.value.toUpperCase());\n        if (inputField.nextElementSibling !== null) inputField.nextElementSibling.focus();\n    });\n});\n\n// Keyboard navigation\nArray.from(inputFields).forEach(inputField =\u003e {\n    inputField.addEventListener('keydown', (e) =\u003e {\n        if (e.keyCode === VK_LEFT) inputField.previousElementSibling.focus();\n        else if (e.keyCode === VK_RIGHT) inputField.nextElementSibling.focus();\n        else if (e.keyCode === VK_BACKSPACE) {\n            const currentInputValue = inputField.value;\n            if (currentInputValue === '' \u0026\u0026 !inputField.previousElementSibling.disabled) {\n                inputField.previousElementSibling.focus();\n                inputField.previousElementSibling.value = \"\";\n                inputField.previousElementSibling.setAttribute('value', '');\n            } else {\n                inputField.setAttribute('value', '');\n                inputField.value = \"\";\n            }\n        }\n        else if (e.keyCode === VK_ENTER) document.getElementById('check-button').click();\n    })\n});\n```\n\n### Continued development\n\nI want to continue improving game logic by adding:\n\n- Random word generator\n- Difficulty levels\n- A scoring system\n\n\n### Useful resources\n\n- MDN Web Docs - Always helpful for checking JavaScript and CSS syntax.\n\n- JavaScript.info - Great explanations for DOM manipulation and events.\n\n\n## Author\n\n- Website - [Ayman Soliman](https://bento.me/ayman-soliman)\n- Frontend Mentor - [aymansoliman-dev](https://www.frontendmentor.io/profile/aymansoliman-dev)\n- Twitter - [@a_soliman1783](https://x.com/a_soliman1783)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faymansoliman-dev%2Fguess-the-word-game","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faymansoliman-dev%2Fguess-the-word-game","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faymansoliman-dev%2Fguess-the-word-game/lists"}