Animal & Birds Crossword Puzzle
Across
- What waterbird is known for its distinctive V-shaped flying formation during migration? (5 letters)
- Small, furry mammal known for its long ears and powerful back legs (4 letters)
- What is the other name for the puma, a large, solitary cat native to the Americas (4 letters)
- 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)
- What primate species is the closest living relative to humans (3 letters)
Down
- 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) has over 14+ years of experience in Web and Application development. He is the 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
More Posts related to Html,
- How to remove old 404 pages ulrs from Google crawler
- W3 HTML validator warning Unable to Determine Parse Mode
- Comprehensive 256 Ascii code table with Html Hex IBM Microsoft Key
- Align html element at the center of page vertically and horizontally
- HTML Images - Attributes and Formats
- 9 Border to DIV Element in HTML Examples
- Create HTML button that looks like a href hyperlink
- What is the doctype for HTML5?
- Simple Crossword Puzzle example using Pure HTML, CSS and JavaScript
- How to make a div tag clickable
- The author stylesheet specified in tag script is too long - document contains 21759 bytes whereas the limit is 10000 bytes
- W3 : character data is not allowed here html validation error
- How to set background color in HTML page?
- Auto Refresh Webpage after every x Second or Minute using Meta Tag?
- Default speed of Marquee tag : SCROLLAMOUNT
- Get HTML table td, tr or th inner content value with id or name attribute
- How to add multiple spaces between html page text
- Chessboard with pieces using pure HTML and CSS
- How to turn off autocomplete in input fields in HTML Form
- remove div vertical scroll
- Fibonacci series from 1 to 500 table
- Remove Html head and body tags from ckeditor source
- reCaptcha Verification expired. Check the checkbox again
- HTML5 CSS3 Color Codes List
- All directional arrows codes for HTML
More Posts:
- ๐ List of Solar Eclipses in the year 2020-2021 ๐ - Science
- How to Remove Widgets from macOS Sonoma 14 Desktop - MacOS
- Fix - zsh: permission denied: ./gradlew [Android Studio Terminal] - Android-Studio
- Android Emulator window was out of view and was recentered - Android-Studio
- [Solution] Mac Update Stuck Preparing macOS Ventura 13.0 About 30 minutes remaining - MacOS
- [Fix] Cannot resolve No versions available for org.osgi.service:org.osgi.service.prefs:jar:[1.1.0,1.2.0) within specified range - Java
- Hide Navigation Bar from Android Screen Activity - Android
- Writing your first Hello, World! ๐ JavaScript code Tutorial - JavaScript