Simple Crossword Puzzle example using Pure HTML, CSS and JavaScript


HTML CSS and JavaScript based Crossword Example Demo
Code Demo


Animal & Birds Crossword Puzzle

Across

  1. What waterbird is known for its distinctive V-shaped flying formation during migration? (5 letters)
  2. Small, furry mammal known for its long ears and powerful back legs (4 letters)
  3. What is the other name for the puma, a large, solitary cat native to the Americas (4 letters)
  4. What is the name of the process by which fish lay and fertilize eggs outside of the body, often in nests or in gravel beds (4 letters)
  5. What primate species is the closest living relative to humans (3 letters)

Down

  1. Large, gray mammal known for its intelligence and memory (8 letters)

Below is a very basic code example of how to create a Crossword Puzzle using basic knowledge of Html, CSS and JavaScript.

HTML Crossword Template Code using Table Elements

<h2>Animal & Birds Crossword Puzzle</h2>

<table>
  <tr>
    <td class="dark"></td>
    <td class="dark"></td>
    <td id="11"><input class="inpt" type="text"></input></td>
    <td id="12"><input class="inpt" type="text"></input></td>
    <td id="13"><input class="inpt" type="text"></input></td>
    <td id="14"><input class="inpt" type="text"></input></td>
    <td id="15"><input class="inpt" type="text"></input></td>
    <td class="dark"></td>
  </tr>

  <tr>
    <td class="dark"></td>
    <td class="dark"></td>
    <td class="dark"></td>
    <td ><input class="inpt" type="text"></input></td>
    <td class="dark"></td>
    <td class="dark"></td>
    <td class="dark"></td>
    <td class="dark"></td>
  </tr>


  <tr>
    <td ><input class="inpt" type="text"></input></td>
    <td ><input class="inpt" type="text"></input></td>
    <td ><input class="inpt" type="text"></input></td>
    <td ><input class="inpt" type="text"></input></td>
    <td class="dark"></td>
    <td class="dark"></td>
    <td class="dark"></td>
    <td class="dark"></td>
  </tr>

  <tr>
    <td class="dark"></td>
    <td class="dark"></td>
    <td class="dark"></td>
    <td ><input class="inpt" type="text"></input></td>
    <td ><input class="inpt" type="text"></input></td>
    <td ><input class="inpt" type="text"></input></td>
    <td ><input class="inpt" type="text"></input></td>
    <td class="dark"></td>
  </tr>

  <tr>
    <td ><input class="inpt" type="text"></input></td>
    <td ><input class="inpt" type="text"></input></td>
    <td ><input class="inpt" type="text"></input></td>
    <td ><input class="inpt" type="text"></input></td>
    <td class="dark"></td>
    <td class="dark"></td>
    <td class="dark"></td>
    <td class="dark"></td>
  </tr>

  <tr>
    <td class="dark"></td>
    <td class="dark"></td>
    <td class="dark"></td>
    <td ><input class="inpt" type="text"></input></td>
    <td ><input class="inpt" type="text"></input></td>
    <td ><input class="inpt" type="text"></input></td>
    <td class="dark"></td>
    <td class="dark"></td>
  </tr>

  <tr>
    <td class="dark"></td>
    <td class="dark"></td>
    <td class="dark"></td>
    <td ><input class="inpt" type="text"></input></td>
    <td class="dark"></td>
    <td class="dark"></td>
    <td class="dark"></td>
    <td class="dark"></td>
  </tr>

  <tr>
    <td class="dark"></td>
    <td class="dark"></td>
    <td class="dark"></td>
    <td ><input class="inpt" type="text"></input></td>
    <td class="dark"></td>
    <td class="dark"></td>
    <td class="dark"></td>
    <td class="dark"></td>
  </tr>

</table>


<h3>Across</h3>
<ol>
<li>What waterbird is known for its distinctive V-shaped flying formation during migration? (5 letters)</li>
<li>Small, furry mammal known for its long ears and powerful back legs (4 letters)</li>
<li>What is the other name for the puma, a large, solitary cat native to the Americas (4 letters)</li>
<li>What is the name of the process by which fish lay and fertilize eggs outside of the body, often in nests or in gravel beds (4 letters)</li>
<li>What primate species is the closest living relative to humans (3 letters)</li>
</ol>
<br>
<h3>Down</h3>
<ol>
<li>Large, gray mammal known for its intelligence and memory (8 letters)</li>
</ol>

CSS for Designing the Crossword

table {
  text-align: center;
  padding:10px;
  border:1px dashed #888;
}

td {
  width: 30px;
  height: 30px;
}

.dark {
  background:#333;
  
}

.inpt {
  width: 30px;
  height: 30px;
  font-size:24px;
  text-align:center;
  border: 2px solid #222;
}

JavaScript Code to validate

You can try may ways, here is a simple example to validate the first across question. If you get the word correctly the color turns to blue, else stays red as an indicator that the answer is wrong.

var inputs = document.querySelectorAll("input.inpt");

for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener("input", function() {
    var allValues = "";
    for (var j = 11; j <= 15; j++) {
      allValues += document.getElementById("" + j).getElementsByTagName("input")[0].value;
    }
    if (allValues === "GEESE") {
      for (var k = 11; k <= 15; k++) {
        document.getElementById("" + k).getElementsByTagName("input")[0].style.color = "green";
      }
    } else {
      for (var k = 11; k <= 15; k++) {
        document.getElementById("" + k).getElementsByTagName("input")[0].style.color = "red";
      }
    }
  });
}

You can find the code on GitHub: https://github.com/bladerunr2049/crossword/blob/main/README.md

-

Facing issues? Have Questions? Post them here! I am happy to answer!


Author Info:

Rakesh (He/Him) is a seasoned developer with over 10 years of experience in web and app development, and a deep knowledge of operating systems. Author of insightful How-To articles for Code2care.

Follow him on: X

You can also reach out to him via e-mail: rakesh@code2care.org

Copyright © Code2care 2024 | Privacy Policy | About Us | Contact Us | Sitemap