https://api.github.com/repos/ssarahs-lab/project1-wordle/contents/{+path}

This solo project is a Wordle based on the popular NYTimes game, made with Vanilla javascript, CSS and HTML; mobile friendly

Creative Commons Zero v1.0 Universal

project1-wordle

<h1>Wordle - A General Assembly project</h1><p><a href="https://ssarahs-lab.github.io/project1-wordle/" rel="noopener noreferrer nofollow" target="_blank">Live site</a></p><p><a href="https://camo.githubusercontent.com/a3c15ade2428df04d7875fe519c278378ee628b001f324b5bc68e17cd5e2d39e/68747470733a2f2f692e696d6775722e636f6d2f73646451714b372e706e67" rel="noopener noreferrer nofollow" target="_blank"><img alt="wordle preview" src="https://camo.githubusercontent.com/a3c15ade2428df04d7875fe519c278378ee628b001f324b5bc68e17cd5e2d39e/68747470733a2f2f692e696d6775722e636f6d2f73646451714b372e706e67" width="100%" height="auto" class="tiptapimage"></a></p><h2>Background</h2><p></p><p>It involves the use of HTML, CSS and vanilla Javascript.</p><p>Wordle is a popular online game (in 2022) that involves guessing a five letter word. The user types in a guess and the game gives feedback by colouring each tile according to whether it matches the word - green for correct placement and letter, yellow for a matching letter, grey for no matches at all.</p><h2>Process</h2><p>In making this, I began with a Javascript function to test user input, console-logging all the way.</p><p>Once this was completed, I made a HTML page styled with CSS grid and flex, so that it would be responsive to a smaller page and would be mobile friendly - given most users play this via mobile.</p><p>Because of the short timeframe required to make the game (one week), some hurdles for me involved identifying which components of the game were more critical in building the "skateboard"/basic working version of the game, before upgrading various things on top of this working version - i.e. adding a functional keyboard, sharing to social media option, sessional/local storage for user's game.</p><p>In my function, I prioritised</p><ol><li><p>checking that the user entered five letters</p></li><li><p>checking that it was a valid word..</p></li></ol><p>..before.. 3. Checking for letters that don't match 4. Checking for yellow letters (matching letter only) 5. Checking for green letters (matching position and letter)</p><p>going from the biggest filter, to the most narrow filter for my if-statements.</p><h2>Side comments</h2><p>I loved making this game, 10/10 would do it again!</p><h2>Future updates</h2><ul><li><p>Share to social media option</p></li><li><p>Add a functional keyboard with greyed out keys indicating previous use in a guess</p></li></ul>

project1 wordle

project1 wordle