Alright, so I wanted to make a little crossword puzzle thing, just for fun. I didn’t want anything fancy, just a basic grid where you could type in letters and it would check if they were right. I’m calling it “crossword mock” because, well, it’s not a real crossword, just a simple imitation.
First, I sketched out what I wanted on a piece of paper. Just a simple 5×5 grid. Nothing crazy. I figured that would be easiest to start with.
Then, I opened up my trusty text editor and created a simple HTML file. I started with the basic structure: <html>, <head>, <body>, you know the drill.
Inside the <body>, I started making the grid using a <table>. I made five <tr> (table row) elements, and inside each of those, I put five <td> (table data) elements. That gave me my 5×5 grid.
Next, I needed a way to put letters in the cells. I decided to use <input> elements with the type=”text” attribute. I also added maxlength=”1″ so you could only type one letter in each box. Made sense, right?
I styled a little with some basic CSS.
- I give the table cells with a fixed width and height to make them square.
- I center the text inside the input fields.
I give some input id, and value with the correct answer, and the answer can show correctly.
It’s super basic, but it works! It’s just a little mock-up, something to play around with. I call this practice “crossword mock”. I am so happy it finally works!
