Codle

Codle is a knockoff of Wordle with the answer always being a code-related word. Codle is a tool for students to learn about computer science while still having a lot of fun playing a word game!

Comment

Inspiration

Due to our immense passion for coding, we as a group were looking for a Wordle that was code-focused. We weren't able to find anything on the web, hence we created Codle! Furthermore, we as developers wanted to create a platform in which users can learn a little bit more about coding in a fun environment.

What it does

Codle is a fun and interactive game in which users guess code-focused words. The user has 6 tries to guess a 5-letter word. In addition, if the respective letter is in the correct position, and is contained in the word, the letter turns green. If the respective letter is in the wrong position, but is contained in the word, the letter turns yellow. If the respective letter isn't in the right position, and isn't in the word, then the letter turns gray.

How we built it

As a group of developers, we all met up and collaborated to make this happen successfully. We used HTML, CSS, and JS to code our game. We used a table for the grid, and we used different buttons for the on-screen keyboard. In addition, we utilized the date so that we can change the word every 24 hours. Finally, we used an overlay to tell the user whether they won or lost, and we used an overlay for the instructions on how the game works. In addition, we spent around 10 hours developing functionality and complexity.

Challenges we ran into

Some of the challenges we ran into were that we needed a way to store all of the English five-letter words while it should be easy to access. In addition, learning how to utilize classes to store the date and time. Another huge challenge was when the user inputted a string that contained a duplicate letter (hello, double L) or when the Codle of the day had multiple of the same letter (ASCII - double I).

Accomplishments that we're proud of

Some accomplishments we are proud of include, creating the on-screen keyboard, and making the buttons change color accordingly. Furthermore, we were able to work together cohesively even though we had different perspectives on things. Finally, we were able to implement a beautiful design using overlays, spans, buttons, and field sets.

What we learned

We learned how to work cohesively. In AP ComSci Principles, we worked individually. But in this project, we had to come together, put all of our ideas together, and we actually coded one of our best projects. In addition, we taught each other different coding concepts which we wouldn't have thought of alone. We had to use several types of decisions-statements, iterations, and we had to utilize different lists to make the Codle. We also had to learn a lot of CSS because we had to use overlays, we had to use margins that were extremely precise, and we had to make Codle usable for every device.

What's next for Codle

We will add more code-focused words to the program. In addition, we could also add multiple difficulty levels to cater to the level of the user. We could also add more versions of the game, for example, guessing 6-letter words instead of 5-letter words, and either having more or less guesses.

Built With

Share this project:

Updates