{"id":27245821,"url":"https://github.com/marcosdlcs/wordle-101","last_synced_at":"2025-04-10T21:29:28.878Z","repository":{"id":49321771,"uuid":"512131684","full_name":"marcosDLCS/wordle-101","owner":"marcosDLCS","description":"Wordle 101","archived":false,"fork":false,"pushed_at":"2023-07-14T18:07:52.000Z","size":265,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-04-29T22:37:20.092Z","etag":null,"topics":["beginner-friendly","css","html","javascript","web"],"latest_commit_sha":null,"homepage":"","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/marcosDLCS.png","metadata":{"files":{"readme":"README.adoc","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}},"created_at":"2022-07-09T08:17:22.000Z","updated_at":"2024-04-29T22:37:20.093Z","dependencies_parsed_at":"2022-08-28T09:41:30.613Z","dependency_job_id":null,"html_url":"https://github.com/marcosDLCS/wordle-101","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcosDLCS%2Fwordle-101","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcosDLCS%2Fwordle-101/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcosDLCS%2Fwordle-101/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcosDLCS%2Fwordle-101/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcosDLCS","download_url":"https://codeload.github.com/marcosDLCS/wordle-101/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248300930,"owners_count":21080804,"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","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":["beginner-friendly","css","html","javascript","web"],"created_at":"2025-04-10T21:29:25.317Z","updated_at":"2025-04-10T21:29:28.862Z","avatar_url":"https://github.com/marcosDLCS.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"= wordle-101\n:toc: auto\n\n== TeachTech\n\nThis simple project has been created as an example during **TeachTech 2022** to illustrate concepts during mentoring assignments.\n\nhttps://www.teacht3ch.com/[TeachTech] is a non-profit initiative, composed solely of volunteer IT professionals, whose goal is to teach the basics of programming to people with no previous knowledge, free of charge.\n\n== Introduction\n\nWordle is a web-based word game **created and developed by Welsh software engineer Josh Wardle**, and owned and published by The New York Times Company since 2022. \n\nPlayers have **six attempts to guess a five-letter word**, with feedback given for each guess in the form of colored tiles indicating when letters match or occupy the correct position.\n\n== The best way to run the examples\n\nDownload Git and Visual Studio Code.\n\n* https://git-scm.com/\n* https://code.visualstudio.com/#alt-downloads\n\nInstall Live Server extension in Visual Studio Code.\n\n* https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer\n\nClone the project in your computer.\n\n[source, console]\n----\ngit clone https://github.com/marcosDLCS/wordle-101.git\n----\n\nWith **VSCode**, go to the desired folder and open the file **wordle.html**. Find the \"Go Live\" button in the right bottom part of the editor interface and press it.\n\n== A road to a basic Wordle\n\nOn our way to programming a Wordle-like game, we will start with a version with a **very basic structure** and, step by step, we will add styles and functionality to **make the game look like its twin** in a convincing manner:\n\n[cols=\"\u003ea,\u003ca\", frame=none, grid=none, align=center]\n|===\n| image::resources/img/step_1.png[Step 1,250]\n| image::resources/img/step_9.png[Step 9,250]\n|===\n\n---\n\n=== ☠️ 01. HTML skeleton\n\nFirst of all, the HTML structure to support the game must be created. The document will consist of different areas:\n\n* Title\n* Explanation of the rules of the game\n* Board where to display the accepted words\n* Action panel\n* List of all attempts (including non-validated ones)\n* Footer\n\nStart with a basic container for each row.\n\n---\n\n=== 🏠 02. More HTML elements\n\nNow we are going to add new elements:\n\n* Inputs, buttons and forms\n* Lists\n\nIn this first phase you should not style the document. Simply focus on using the correct HTML elements and apply the appropriate classes and identifiers. You also do not have to create the __cell structure__ for the words in the table. That part will be refined later with other elements and styles.\n\n---\n\n=== 💅🏻 03. Apply basic CSS styles\n\nIn the following step simple styles will be applied to make the website more usable and better looking. \n\nBased on the sketches we will try to centre the content and make it \"responsive\" to some extent. Also we are going to style the buttons and the input elements. \n\nThe introduction of custom text fonts and the use of background colors and shading will be an asset.\n\n---\n\n=== 🎡 04. Starting with Javascript\n\nWe are going to add a little dynamic behavior to our game:\n\n* Store a list of possible words in an object / array\n* At the start of the program, randomly select a word from the list to guess\n* Allow the user to enter a word via input and, after pressing a button, issue an alert announcing whether they guessed correctly or not (with an exact word comparison)\n* At this point, all the user's word attempts should be displayed in the lower list\n* Put the current year in the footer near to the author information\n\n---\n\n=== 👮🏻‍♂️ 05. Storing and validating the data\n\n* Create a data structure to store the data related to the game we are playing. We have to think about how to store the word to hit and the invalid attempts made so far\n* Count the number of attempts and don't let more than 6. When the maximum is reached, warn with an __alert__ that you can't play anymore\n* Validate the user's attempts. Do not allow empty strings, numbers or words that do not have an exact length of 5 positions to be entered. Show custom warnings via __alerts__ when:\n** Text contains numbers\n** Text is less than five characters long\n** The text is longer than five characters\n* In spite of the validations, all the user's attempts must still be shown in the lower list\n* Create and give functionality to the __Reset game__ button and make the board and word lists on the screen show as they did at the beginning (empty)\n* Remove values from internal data structures\n\n---\n\n=== 🦄 06. Add more complex styles\n\n* Create a 5x6 board to put the letters of each validated word separately\n* Color the rows of incorrect words a reddish color\n* If correct, use a green color to color the row\n* Find a suitable color palette\n\n---\n\n=== 🕰 07. Play it later\n\nNow it is time to save the state of our game and allow us to resume the game where we left off even if we reload the browser.\n\nTo do this we will use LocalStorage.\n\n---\n\n=== 🎨 08. Colored letters\n\nIn this section we will add some more behavior:\n\n* If the letter of the word entered is not in the word we are looking for, we color it gray\n* If the letter is in the word, but not in the correct position, we color it yellow\n* If the letter is in the correct position, we color it green\n\n---\n\n=== 📐 09. Refine and refactor\n\nIn this section we will try to improve certain aspects of our game that are not so good at the moment.\n\nIn the functional section:\n\n* We will only allow words to be entered as letters from A to Z, without punctuation marks\n* Only the first occurrence of a letter in the word that is not in its position will be marked yellow\n* We will move alert warnings to a notification section at the top of the game board so as not to detract from the user experience\n\nRefactoring:\n\n* We will group the various functions in the code and give better variable names\n* We will add useful comments that explain the flow of the game\n* We will group the notification messages in a structure that makes them more usable\n* We will create the board elements dynamically\n\n== References\n\n* https://en.wikipedia.org/wiki/Wordle\n* https://nyt.com/games/wordle/index.html","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcosdlcs%2Fwordle-101","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcosdlcs%2Fwordle-101","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcosdlcs%2Fwordle-101/lists"}