Wordsearch
How do I make an wordsearch?
What is a wordsearch? How do you make a wordsearch? This script and codes were developed by Taha on 28 August 2022, Sunday.
Wordsearch - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>wordsearch</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="selector"> <select> <option>no. of rows</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select> <input class="submit" type="submit" />
</div>
<div class="square">
</div>
<div class="first">
</div>
<div class="second">
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Wordsearch - Script Codes CSS Codes
* { box-sizing: border-box; -moz-box-sizing: border-box;
}
.selector { text-align:center; margin:25px 0;
}
.square { margin:0 auto; width:156px; height:148px; overflow:hidden; padding:2px; border:1px solid #eee; border-radius:4px; opacity:0;
}
.square p { width:30px; height:30px; float:left; margin:0; text-align:center; color:#167; padding-top:4px;
}
.square .word {
}
.first, .second { clear:both;
}
Wordsearch - Script Codes JS Codes
words = ['frog','tiger','snake','spider','lion','zebra','panda']
// select the number of rows x columns from the select option
$(".submit").click(function(){ //clear out previous letters generated $(".square p").remove(); var numberOfRows = parseInt($("option:selected" ).text()); var width = (numberOfRows * 30 ) + 6; var height = (numberOfRows * 30 ) - 2; if (isNaN(numberOfRows)) { $(".square").css("opacity","0"); } else { $(".square").css({ 'width':width, 'height':height, 'opacity':1; }); generateBoard(numberOfRows); $("select").prop('selectedIndex',0); }
});
// function to generate a random letter
function random_character() { var chars = "abcdefghijklmnopqurstuvwxyz"; return chars.substr( Math.floor(Math.random() * 26), 1);
}
//function generate a random starting point for words from the array
function randomPoint(){ var numberOfletters = $(".square p").length; var randomPoint = Math.floor((Math.random() * numberOfletters)); return randomPoint;
}
function generateBoard(numberOfRows) { n = 0 var numberOfWords = numberOfRows * numberOfRows while (n < numberOfWords) { var rchar = random_character(); $(".square").append("<p id='"+n+"'>"+rchar+"</p>") n = n + 1; } $(".first").append("<br>"+words); var x = Math.floor((Math.random() * words.length)); var randomWord = words[x]; $(".second").append(words.splice(x,1)[0]); $(".second").append("<br>"+words+"<br>"); var splitWord = randomWord.split(""); $(".second").append("<br>"+splitWord+"<br>"); var rp = randomPoint(); //alert(rp); var j = rp; var i = 0; while (j < rp + splitWord.length) { $(".square #"+j).html(splitWord[i]).addClass("word"); i = i + 1; j = j + 1; }
}
// define a function for every word generation direction possible. e.g forward, backward, downward, upward, diagonal right. diagonal left,
Developer | Taha |
Username | tkazi |
Uploaded | August 28, 2022 |
Rating | 3 |
Size | 2,667 Kb |
Views | 42,504 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Topics with pictures | 2,091 Kb |
Fluid containers | 1,992 Kb |
Hangman gam | 2,611 Kb |
Youtube_api | 1,563 Kb |
Tie | 2,453 Kb |
Vogel.photo | 2,399 Kb |
Spotify api | 1,505 Kb |
A Pen by taha | 2,844 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Fixed Scrolling Nav Bar | Philsinatra | 0 Kb |
Popup Modal | Aldlevine | 3,696 Kb |
Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
Sign Up Form | Sicontis | 5,272 Kb |
Display properties | Hamzaerbay | 1,886 Kb |
CSS Social Media Icon | TychoBlender | 3,871 Kb |
Nested flexbox layout for library catalog | Boycetrus | 3,271 Kb |
Loading animation | Codeams | 2,408 Kb |
Pattern lab logo | TimPietrusky | 3,666 Kb |
Process Accordion | Devilskitchen | 31,432 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!