Skip to main content

Overview

Learning outcomes​

  1. Build a web-based game (Wordle) that utilizes a variety of concepts and technologies.
  2. Demonstrate ability to manipulate the DOM using JavaScript.
  3. Demonstrate ability to create forms to and handling user input.
  4. Demonstrate ability to make network HTTP Requests using Fetch API.
  5. Demonstrate understanding of event-oriented programming.

Guidelines and Tips​

  • Make a habit of committing and pusing your code frequently to github.
  • Make sure to meanignful commit messages that describe what you did.
  • Make sure the automated tests and checks (if exists) continue to pass after you make changes.
  • Don't forget to fill out the self assessment on the README file, and the feedback form at the end of the instructions.

Instructions​

For this assignment you will be building Wordle. Your goal is to build this game using HTML, CSS, JavaScript, and the concepts/techniques covered to-date to build the game completely.

Game process​

If you're not familiar with the game Wordle, it is a popular web-based word puzzle game where players have the task of guessing a five-letter word within six attempts. After each guess, the game provides feedback in the form of colored tiles indicating how accurate the guess was: green for letters that are in the correct position, yellow for letters that are in the word but in the wrong position, and gray for letters that are not in the word at all. This feedback helps players narrow down the possibilities through deduction and pattern recognition. The game refreshes with a new word every day, encouraging players to return regularly to test their vocabulary and problem-solving skills.

This assignment instructions is broken down into multiple parts to complete the game.

  • Part1: Create the Layout using HTML and CSS.
  • Part2: (not an integral part of the game) Add a dark/light mode toggle.
  • Part3: Create the Layout dynamically using JavaScript.
  • Part4: Capture the User Input.
  • Part5: Game Logic.
  • Part6: Replace hard-coded elements of the game with HTTP network requests.
  • Part7: Code Modularization (2 extra credit).

Starter Files​

.
├── assets
│   ├── styles
│   │   └── style.css                <== Your additional styles
│   ├── scripts
│   │   ├── dark-mode-toggle.js                <== Wordle Game Logic
│   │   ├── game.js                <== Wordle Game Logic
│   │   └── main.js                  <== DOM Manipulation and Event Listeners
├── index.html                        <== The index.html - Built for you.
└── README.md                         <== Don't Forget the self-reflection evaluation