I wrote this in React at the start of my new learning journey back in 2021. The goal was to be able to format the very difficult cryptograms that I was trying to solve in my puzzle magazines. All I needed was a way to enter the cryptogram, with slots for the guessed letters. Then I would try out letters to break the code. I actually had written this in Microsoft Excel previously. I added a few canned quotes as an afterthought.
I wrote this in React, and eventually React with hooks, with a twist. The letters of the cryptogram are stored in divs, and I don't keep track of changes in the divs using state in React. So when the user enters a letter in the box over the coded letter, a useEffect checks the key array, and rewrites the cryptogram with the new letter added in every place where the bottom coded letter is the same.
I've only just deployed the new React-with-hooks format, so there might be a bug or two. For a while, it was capitalizing every "I" if "I" happened to be the first word in the quote. I have no idea why, and it just stopped happening. I also have the unfortunate habit of playing computer games addictively, so I tried to make this one as non-addictive as possible. Meaning, you don't get any special recognition or confetti if you solve a cryptogram, and I only have about 26 canned quotes. Let me know in the comments how you liked it!
Top comments (0)