Connections (Game)

This is purely a proof of concept. Can I program the NY Times Connections game using HTML/CSS/JS?

As far as I can tell, the game functions the same (feel free to let me know if things don't work as expected).

Disclaimer - The lists of words was generated by ChatGPT.

This game was written in HTML/CSS/JS to create a web application

• A web application is just a website, but written to act/function like an app rather than a site.

Pros

• usable on any device (that can view a webpage)

• Simple coding languages (HTML/CSS/JS)

• Natural separation of form, style, and functionality

• No installation required (assuming a browser is already added)

Cons

• Requires internet access (unless the pages are saved to the computer)

• HTML: HTML is used to create the form of the game

  • All visual elements and non-visual groupings (top section w/ instructions + Time, middle section w/ grid of words, bottom section w/ 3 buttons)

• CSS: CSS is used to create the visual feel of the game

  • Though HTML was used to create the groupings, CSS is used to layout those groupings in grids or in same-line sections.

  • Colors, buttons, borders, etc.

• JS: JS is used to create the function of the game - how it interacts with the user

  • Time is updated regularly

  • Clicking on a grid element lights it up (unless 4 things are already lit), or unlights it if it's already lit.

  • When 4 items are lit & the submit button is pressed, it checks to see if those 4 items match any 1 group of correct connections.

    • When an invalid set is made, it responds with a popup that tells you it's not valid and disappears shortly thereafter.

    • When a valid set is made, it deselects all, removes the items from the grid, adds a new box that displays all 4 items and lists how they're connected. 

    • Timer stops if all 4 sets have been identified.

  • Deselect button clears the selection.

  • New Game restarts the application

What I didn't implement

• Difficulty Modes - The categories are already grouped by "difficulty". Each category word set is placed in either a Yellow, Green, Blue, or Purple list. Each of those lists/groupings is considered a difficulty, so every game will contain 1 Yellow, 1 Green, 1 Blue, and 1 Purple category set. Supposedly the different colors represent different difficulties, but that's not really the case. In my defense, the words were all organized and provided by Google Gemini.

• Guess Limit - NY Times has a limit of 4 wrong guesses before they basically tell you "better luck tomorrow". I didn't want that limitation in this rendition. It would be easy enough to implement if desired at a later date (that could be part of the difficulty mode).