Typing Speed Test Game in HTML CSS & JavaScript With Source Code
Introduction :
The Typing Speed Test Game is a web-based application created using HTML, CSS, and JavaScript. The purpose of this game is to assess and improve the user’s typing speed and accuracy. The game presents the user with a random set of words, and the user needs to type them as quickly and accurately as possible within a specified time limit. The application features various options such as selecting the time duration (30s or 60s) and difficulty level (beginner or pro).The primary objective of this Typing Speed Test Game is to offer users a platform to refine their typing skills while also providing an accurate measure of their typing speed and word-per-minute (WPM) count. The interface is visually appealing, featuring a clean and intuitive design, making it accessible to a wide range of users.
The project’s structure is organized into different sections, each serving a specific purpose. The HTML file defines the overall layout and structure of the game, including elements such as the timer, word display area, input field, and restart button. The Bootstrap library is leveraged for responsive and visually consistent styling. JavaScript plays a crucial role in implementing the game’s logic and functionality. The script manages various aspects, such as tracking user input, updating the timer, handling word validation, calculating WPM, and dynamically generating and displaying random sets of words. It also incorporates event listeners to respond to user interactions, allowing for a seamless and interactive experience.
In summary, the Typing Speed Test Game is a well-crafted project that combines HTML, CSS, and JavaScript to create an engaging and educational typing experience. Its user-friendly interface, customizable options, and real-time feedback make it an effective tool for users looking to enhance their typing proficiency.
Explanation :
HTML Structure:
- The HTML file starts with the document type declaration and includes meta tags for character set and viewport settings.
- The title of the page is set to “Typing Test.”
- Bootstrap 4 and Font Awesome libraries are included for styling and icons.
- The page includes a container-fluid with various div elements for different sections of the game, such as top, stats, text display, input area, and restart button.
- Links to external CSS and JavaScript files are included at the end of the body.
JavaScript Logic:
Variable Declarations:
- Several variables are declared to store elements and game-related data, such as wordNo, wordsSubmitted, wordsCorrect, timer, flag, factor, seconds, and difficulty.
Event Listeners:
- The script listens for input events on the text input area. When a user starts typing, it checks for whitespace to determine if a word is complete.
- Event listeners are also set for time and difficulty selection buttons.
- The restart button has an event listener to reset the game.
Time and Difficulty Selection:
- The user can choose between 30s and 60s time limits and beginner or pro difficulty levels.
- Functions for time and difficulty selection update relevant variables and UI elements.
Game Initialization:
- The displayTest function is called initially to populate the textDisplay with a set of random words based on the selected difficulty.
Typing Logic:
- On user input, the script checks if the character entered is a whitespace. If true, it calls the checkWord function; otherwise, it calls the currentWord function.
- The currentWord function checks if the user is entering the correct characters for the current word.
Restart Functionality:
- The restartBtn click event triggers a function that resets various game-related variables, clears the input area, and starts a new game.
Timer Functionality:
- The timeStart function initiates a countdown timer based on the selected time limit. It also hides certain UI elements during the typing session.
- When the timer reaches zero, the timeOver function is called, disabling the input area and displaying the user’s score.
Score Display:
- The displayScore function calculates and displays the user’s accuracy percentage and words per minute (WPM).
Word Checking and Coloring:
- Functions like colorSpan, checkWord, and currentWord are responsible for checking and coloring the words based on user input.
Word Display:
- The displayTest function generates a set of random words based on the selected difficulty level and displays them in the textDisplay area.
Purpose of Functions:
- timeStart: Initiates the countdown timer and hides unnecessary UI elements.
- timeOver: Disables the input area and triggers the score display.
- limitVisible and limitInvisible: Control the visibility of time and difficulty selection buttons.
- displayScore: Calculates and displays the user’s accuracy percentage and WPM.
- colorSpan, checkWord, and currentWord: Manage the coloring and validation of user input against the displayed words.
- displayTest: Generates a set of random words based on the selected difficulty level and displays them on the screen.
Overall, the JavaScript code efficiently handles the game’s logic, user input, timer functionality, and score calculation, providing a smooth and interactive typing speed test experience.
Source Code :
HTML (index.html)
<title>Typing Test</title>
<div class="container-fluid box ">
<div class="top">
<h1 id="heading" class="yellow">Typing Speed Test</h1>
<div class="limits-box">
<div class="limit">
<a id="thirty" class="yellow" href="#">30s</a>
<a id="sixty" href="#">60s</a>
</div>
<div class="limit">
<a id="beg" class="yellow" href="#">beginner</a>
<a id="pro" href="#">pro</a>
</div>
</div>
</div>
<div class="stats center">
<div class="stat-block if">
<div id="timeName" class="stat-name yellow if">Time</div>
<div id="time" class="details if ">30</div>
</div>
<div class="stat-block if">
<div id="cwName" class="stat-name yellow if">CW</div>
<div id="cw" class="details if">0</div>
</div>
</div>
<div class="text-display" id="textDisplay">
</div>
<div class="input-area center">
<textarea rows="1" class="text-input" id="textInput"></textarea>
</div>
<div class="restart-button center">
<a id="restartBtn" class="current" href="#">
<i class="fas fa-redo"></i>
</a>
</div>
</div>
JavaScript (app.js)
const testItem = document.getElementById("textDisplay");
const inputItem = document.getElementById("textInput");
const timeName = document.getElementById("timeName");
const time = document.getElementById("time");
const cwName = document.getElementById("cwName");
const cw = document.getElementById("cw");
const restartBtn = document.getElementById("restartBtn");
const thirty = document.getElementById("thirty");
const sixty = document.getElementById("sixty");
const beg = document.getElementById("beg");
const pro = document.getElementById("pro");
var wordNo = 1;
var wordsSubmitted = 0;
var wordsCorrect = 0;
var timer = 30;
var flag=0;
var factor=2;
var seconds;
var difficulty=1;
displayTest(difficulty);
//on Input
inputItem.addEventListener('input', function(event){
if(flag===0){
flag=1;
timeStart();
}
var charEntered = event.data;
if(/\s/g.test(charEntered)){ //check if the character entered is a whitespace
checkWord();
}
else{
currentWord();
}
});
//time selection
thirty.addEventListener("click",function(){
timer = 30;
factor = 2;
limitColor(thirty,sixty);
time.innerText = timer;
});
sixty.addEventListener("click",function(){
timer = 60;
factor = 1;
limitColor(sixty, thirty);
time.innerText = timer;
});
//difficulty Selection
beg.addEventListener("click",function(){
difficulty = 1;
displayTest(difficulty);
limitColor(beg,pro);
});
pro.addEventListener("click",function(){
difficulty = 2;
displayTest(difficulty);
limitColor(pro,beg);
});
//set the color of time and difficulty
function limitColor(itema,itemr ){
itema.classList.add('yellow');
itemr.classList.remove('yellow');
}
//restart the Test
restartBtn.addEventListener("click",function(){
wordsSubmitted = 0;
wordsCorrect = 0;
flag=0;
time.classList.remove("current");
cw.classList.remove("current");
time.innerText = timer;
timeName.innerText = "Time";
cw.innerText = wordsCorrect;
cwName.innerText = "CW";
inputItem.disabled = false;
inputItem.value = '';
inputItem.focus();
displayTest(difficulty);
clearInterval(seconds);
limitVisible();
});
//start the timer countdown
function timeStart(){
limitInvisible();
seconds = setInterval(function() {
time.innerText--;
if (time.innerText == "-1") {
timeOver();
clearInterval(seconds);
}
}, 1000);
}
//diable textarea and wait for restart
function timeOver(){
inputItem.disabled = true;
restartBtn.focus();
displayScore();
}
//set Limit visibility
function limitVisible(){
thirty.style.visibility = 'visible';
sixty.style.visibility = 'visible';
beg.style.visibility = 'visible';
pro.style.visibility = 'visible';
}
function limitInvisible(){
thirty.style.visibility = 'hidden';
sixty.style.visibility = 'hidden';
beg.style.visibility = 'hidden';
pro.style.visibility = 'hidden';
}
//display the score
function displayScore(){
let percentageAcc = 0;
if(wordsSubmitted!==0){
percentageAcc = Math.floor((wordsCorrect/wordsSubmitted)*100);
}
time.classList.add("current");
cw.classList.add("current");
time.innerText = percentageAcc+"%";
timeName.innerText = "PA";
cw.innerText = factor*wordsCorrect;
cwName.innerText = "WPM";
}
//check if the user is entering correcrt word
function currentWord(){
const wordEntered = inputItem.value;
const currentID = "word "+wordNo;
const currentSpan = document.getElementById(currentID);
const curSpanWord = currentSpan.innerText;
if(wordEntered == curSpanWord.substring(0,wordEntered.length)){
colorSpan(currentID, 2);
}
else{
colorSpan(currentID, 3);
}
}
//checks word entered
function checkWord(){
const wordEntered = inputItem.value;
inputItem.value='';
const wordID = "word "+wordNo;
const checkSpan = document.getElementById(wordID);
wordNo++;
wordsSubmitted++;
if(checkSpan.innerText === wordEntered){
colorSpan(wordID, 1);
wordsCorrect++;
cw.innerText=wordsCorrect;
}
else{
colorSpan(wordID, 3);
}
if(wordNo>40){
displayTest(difficulty);
}
else{
const nextID = "word "+wordNo;
colorSpan(nextID, 2);
}
}
//color the words
function colorSpan(id, color){
const span = document.getElementById(id);
if(color === 1 ){
span.classList.remove('wrong');
span.classList.remove('current');
span.classList.add('correct');
}
else if(color ===2){
span.classList.remove('correct');
span.classList.remove('wrong');
span.classList.add('current');
}
else{
span.classList.remove('correct');
span.classList.remove('current');
span.classList.add('wrong');
}
}
//display the random words on screen
function displayTest(diff){
wordNo = 1;
testItem.innerHTML = '';
let newTest = randomWords(diff);
newTest.forEach(function(word, i){
let wordSpan = document.createElement('span');
wordSpan.innerText = word;
wordSpan.setAttribute("id", "word " + (i+1));
testItem.appendChild(wordSpan);
});
const nextID = "word "+wordNo;
colorSpan(nextID, 2);
}
//Generate an array of random 50 words
function randomWords(diff){
var topWords = ["ability", "able", "about", "above", "accept", "according", "account", "across", "action", "activity", "actually", "address", "administration", "admit", "adult", "affect", "after", "again", "against", "agency", "agent", "ago", "agree", "agreement", "ahead", "allow", "almost", "alone", "along", "already", "also", "although", "always", "American", "among", "amount", "analysis", "and", "animal", "another", "answer", "anyone", "anything", "appear", "apply", "approach", "area", "argue", "around", "arrive", "article", "artist", "assume", "attack", "attention", "attorney", "audience", "author", "authority", "available", "avoid", "away", "baby", "back", "ball", "bank", "beat", "beautiful", "because", "become", "before", "begin", "behavior", "behind", "believe", "benefit", "best", "better", "between", "beyond", "bill", "billion", "black", "blood", "blue", "board", "body", "book", "born", "both", "break", "bring", "brother", "budget", "build", "building", "business", "call", "camera", "campaign", "cancer", "candidate", "capital", "card", "care", "career", "carry", "case", "catch", "cause", "cell", "center", "central", "century", "certain", "certainly", "chair", "challenge", "chance", "change", "character", "charge", "check", "child", "choice", "choose", "church", "citizen", "city", "civil", "claim", "class", "clear", "clearly", "close", "coach", "cold", "collection", "college", "color", "come", "commercial", "common", "community", "company", "compare", "computer", "concern", "condition", "conference", "congress", "consider", "consumer", "contain", "continue", "control", "cost", "could", "country", "couple", "course", "court", "cover", "create", "crime", "cultural", "culture", "cup", "current", "customer", "dark", "data", "daughter", "dead", "deal", "death", "debate", "decade", "decide", "decision", "deep", "defense", "degree", "Democrat", "democratic", "describe", "design", "despite", "detail", "determine", "develop", "development", "difference", "different", "difficult", "dinner", "direction", "director", "discover", "discuss", "discussion", "disease", "doctor", "door", "down", "draw", "dream", "drive", "drop", "drug", "during", "each", "early", "east", "easy", "economic", "economy", "edge", "education", "effect", "effort", "eight", "either", "election", "else", "employee", "energy", "enjoy", "enough", "enter", "entire", "environment", "environmental", "especially", "establish", "even", "evening", "event", "ever", "every", "everybody", "everyone", "everything", "evidence", "exactly", "example", "executive", "exist", "expect", "experience", "expert", "explain", "eye", "face", "fact", "factor", "fail", "fall", "family", "far", "fast", "father", "fear", "federal", "feel", "feeling", "field", "fight", "figure", "fill", "film", "final", "finally", "financial", "find", "fine", "finger", "finish", "fire", "firm", "first", "fish", "five", "floor", "fly", "focus", "follow", "food", "foot", "force", "foreign", "forget", "form", "former", "forward", "four", "free", "friend", "from", "front", "full", "fund", "future", "game", "garden", "general", "generation", "girl", "give", "glass", "goal", "good", "government", "great", "green", "ground", "group", "grow", "growth", "guess", "guy", "hair", "half", "hand", "hang", "happen", "happy", "hard", "have", "head", "health", "hear", "heart", "heat", "heavy", "help", "here", "herself", "high", "him", "himself", "his", "history", "hold", "home", "hope", "hospital", "hot", "hotel", "hour", "house", "how", "however", "huge", "human", "hundred", "husband", "I", "idea", "identify", "if", "image", "imagine", "impact", "important", "improve", "include", "including", "increase", "indeed", "indicate", "individual", "industry", "information", "inside", "instead", "institution", "interest", "interesting", "international", "interview", "into", "investment", "involve", "issue", "item", "it's", "itself", "join", "just", "keep", "kill", "kind", "kitchen", "know", "knowledge", "land", "language", "large", "last", "late", "later", "laugh", "law", "lawyer", "lead", "leader", "learn", "least", "leave", "left", "legal", "less", "letter", "level", "life", "light", "like", "likely", "line", "list", "listen", "little", "live", "local", "long", "look", "lose", "loss", "love", "machine", "magazine", "main", "maintain", "major", "majority", "make", "man", "manage", "management", "manager", "many", "market", "marriage", "material", "matter", "maybe", "mean", "measure", "media", "medical", "meet", "meeting", "member", "memory", "mention", "message", "method", "middle", "might", "military", "million", "mind", "minute", "miss", "mission", "model", "modern", "moment", "money", "month", "more", "morning", "most", "mother", "mouth", "move", "movement", "movie", "Mr", "Mrs", "much", "music", "must", "my", "myself", "name", "nation", "national", "natural", "nature", "near", "nearly", "necessary", "need", "network", "never", "news", "newspaper", "next", "nice", "night", "none", "north", "note", "nothing", "notice", "number", "occur", "off", "offer", "office", "officer", "official", "often", "once", "only", "onto", "open", "operation", "opportunity", "option", "order", "organization", "other", "others", "outside", "over", "own", "owner", "page", "pain", "painting", "paper", "parent", "part", "participant", "particular", "particularly", "partner", "party", "pass", "past", "patient", "pattern", "peace", "people", "perform", "performance", "perhaps", "period", "person", "personal", "phone", "physical", "pick", "picture", "piece", "place", "plan", "plant", "play", "player", "PM", "point", "police", "policy", "political", "politics", "poor", "popular", "population", "position", "positive", "possible", "power", "practice", "prepare", "present", "president", "pressure", "pretty", "prevent", "price", "private", "probably", "problem", "process", "produce", "product", "production", "professional", "professor", "program", "project", "property", "protect", "prove", "provide", "public", "pull", "purpose", "push", "quality", "question", "quickly", "quite", "race", "radio", "raise", "range", "rate", "rather", "reach", "read", "ready", "real", "reality", "realize", "really", "reason", "receive", "recent", "recently", "recognize", "record", "red", "reduce", "reflect", "region", "relate", "relationship", "religious", "remain", "remember", "remove", "report", "represent", "republican", "require", "research", "resource", "respond", "response", "responsibility", "rest", "result", "return", "reveal", "rich", "right", "rise", "risk", "road", "rock", "role", "room", "rule", "safe", "same", "save", "scene", "school", "science", "scientist", "score", "sea", "season", "seat", "second", "section", "security", "see", "seek", "seem", "sell", "send", "senior", "sense", "series", "serious", "serve", "service", "set", "seven", "several", "sex", "sexual", "shake", "share", "she", "shoot", "short", "shot", "should", "shoulder", "show", "side", "sign", "significant", "similar", "simple", "simply", "since", "sing", "single", "sister", "situation", "size", "skill", "skin", "small", "smile", "social", "society", "soldier", "some", "somebody", "someone", "something", "sometimes", "song", "soon", "sort", "sound", "source", "south", "southern", "space", "speak", "special", "specific", "speech", "spend", "sport", "spring", "staff", "stage", "stand", "standard", "star", "start", "state", "statement", "station", "stay", "step", "still", "stock", "stop", "store", "story", "strategy", "street", "strong", "structure", "student", "study", "stuff", "style", "subject", "success", "successful", "such", "suddenly", "suffer", "suggest", "summer", "support", "sure", "surface", "system", "table", "take", "talk", "task", "tax", "teach", "teacher", "team", "technology", "television", "tell", "tend", "term", "test", "than", "thank", "that", "their", "them", "themselves", "then", "theory", "there", "these", "they", "thing", "think", "third", "this", "those", "though", "thought", "thousand", "threat", "three", "through", "throughout", "throw", "thus", "time", "today", "together", "tonight", "total", "tough", "toward", "town", "trade", "traditional", "training", "travel", "treat", "treatment", "tree", "trial", "trip", "trouble", "true", "truth", "try", "turn", "TV", "type", "under", "understand", "unit", "until", "usually", "value", "various", "very", "victim", "view", "violence", "visit", "voice", "vote", "wait", "walk", "wall", "want", "watch", "water", "weapon", "wear", "week", "weight", "well", "west", "western", "what", "whatever", "when", "where", "whether", "which", "while", "white", "whole", "whom", "whose", "wide", "wife", "will", "wind", "window", "wish", "with", "within", "without", "woman", "wonder", "word", "work", "worker", "world", "worry", "would", "write", "writer", "wrong", "yard", "yeah", "year", "young", "your", "yourself"];
var basicWords = ["a", "about", "above", "across", "act", "add", "afraid", "after", "again", "age", "ago", "agree", "air", "all", "alone", "along", "always", "am", "amount", "an", "and", "angry", "another", "answer", "any", "anyone", "appear", "apple", "are", "area", "arm", "army", "around", "arrive", "art", "as", "ask", "at", "aunt", "away", "baby", "back", "bad", "bag", "ball", "bank", "base", "bath", "be", "bean", "bear", "bed", "beer", "before", "begin", "bell", "below", "best", "big", "bird", "birth", "bit", "bite", "black", "bleed", "block", "blood", "blow", "blue", "board", "boat", "body", "boil", "bone", "book", "border", "born", "both", "bowl", "box", "boy", "branch", "brave", "bread", "break", "breathe", "bridge", "bright", "bring", "brother", "brown", "brush", "build", "burn", "bus", "busy", "but", "buy", "by", "cake", "call", "can", "cap", "car", "card", "care", "carry", "case", "cat", "catch", "chair", "chase", "cheap", "cheese", "child", "choice", "circle", "city", "class", "clever", "clean", "clear", "climb", "clock", "cloth", "cloud", "close", "coffee", "coat", "coin", "cold", "colour", "comb", "common", "compare", "come", "control", "cook", "cool", "copper", "corn", "corner", "correct", "cost", "count", "cover", "crash", "cross", "cry", "cup", "cut", "dance", "dark", "day", "dead", "decide", "deep", "deer", "desk", "die", "dirty", "dish", "do", "dog", "door", "down", "draw", "dream", "dress", "drink", "drive", "drop", "dry", "duck", "dust", "duty", "each", "ear", "early", "earn", "earth", "east", "easy", "eat", "effect", "egg", "eight", "else", "empty", "end", "enemy", "enjoy", "enter", "equal", "even", "event", "ever", "every", "exact", "except", "expect", "explain", "eye", "face", "fact", "fail", "fall", "false", "family", "famous", "far", "farm", "fast", "fat", "fault", "fear", "feed", "feel", "fever", "few", "fight", "fill", "film", "find", "fine", "fire", "first", "fish", "fit", "five", "fix", "flag", "flat", "float", "floor", "flour", "fly", "fold", "food", "fool", "foot", "for", "force", "forest", "forget", "fork", "form", "fox", "four", "free", "freeze", "fresh", "friend", "from", "front", "fruit", "full", "fun", "funny", "future", "game", "gate","get", "gift", "give", "glad", "glass", "go", "goat", "god", "gold", "good", "grass", "grave", "great", "green", "gray", "group", "grow", "gun", "hair", "half", "hall", "hand", "happy", "hard", "hat", "hate", "have", "he", "head", "hear", "heavy", "heart", "hello", "help", "hen", "her", "here", "hers", "hide", "high", "hill", "him", "his", "hit", "hobby", "hold", "hole", "home", "hope", "horse", "hot", "hotel", "house", "how", "hour", "hurry", "hurt", "I", "ice", "idea", "if", "in", "into", "invent", "iron", "is", "island", "it", "its", "jelly", "job", "join", "juice", "jump", "just", "keep", "key", "kill", "kind", "king", "knee", "knife", "knock", "know", "lady", "lamp", "land", "large", "last", "late", "laugh", "lazy", "lead", "leaf", "learn", "leave", "leg", "left", "lend", "length", "less", "lesson", "let", "letter", "lie", "life", "light", "like", "lion", "lip", "list", "live", "lock", "lonely", "long", "look", "lose", "lot", "love", "low", "lower", "luck", "main", "make", "male", "man", "many", "map", "mark", "may", "me", "meal", "mean", "meat", "meet", "milk", "mind", "miss", "mix", "model", "money", "month", "moon", "more", "most", "mouth", "move", "much", "music", "must", "my", "name", "near", "neck", "need", "needle", "net", "never", "new", "news", "next", "nice", "night", "nine", "no", "noble", "noise", "none", "nor", "north", "nose", "not", "notice", "now", "obey", "ocean", "of", "off", "offer", "office", "often", "oil", "old", "on", "one", "only", "open", "or", "orange", "order", "other", "our", "out", "over", "own", "page", "pain", "paint", "pair", "pan", "paper", "park", "part", "party", "pass", "past", "path", "pay", "peace", "pen", "per", "piano", "pick", "piece", "pig", "pin", "pink", "place", "plane", "plant", "plate", "play", "please", "plenty", "point", "polite", "pool", "poor", "pour", "power", "press", "pretty", "price", "prince", "prison", "prize", "pull", "punish", "pupil", "push", "put", "queen", "quick", "quiet", "radio", "rain", "rainy", "raise", "reach", "read", "ready", "real", "red", "rent", "reply", "rest", "rice", "rich", "ride", "right", "ring", "rise", "road", "rob", "rock", "room", "round", "rude", "rule", "ruler", "run", "rush", "sad", "safe", "sail", "salt", "same", "sand", "save", "say", "school", "search", "seat", "second", "see", "seem", "sell", "send", "serve", "seven", "sex", "shade", "shake", "shape", "share", "sharp", "she", "sheep", "sheet", "shine", "ship", "shirt", "shoe", "shoot", "shop", "short", "shout", "show", "sick", "side", "silly", "silver", "simple", "single", "since", "sing", "sink", "sister", "sit", "six", "size", "skill", "skin", "skirt", "sky", "sleep", "slip", "slow", "small", "smell", "smile", "smoke", "snow", "so", "soap", "sock", "soft", "some", "son", "soon", "sorry", "sound", "soup", "south", "space", "speak", "speed", "spell", "spend", "spoon", "sport", "spread", "spring", "square", "stamp", "stand", "star", "start", "stay", "steal", "steam", "step", "still", "stone", "stop", "store", "storm", "story", "street", "study", "stupid", "such", "sugar", "sun", "sunny", "sure", "sweet", "swim", "sword", "table", "take", "talk", "tall", "taste", "taxi", "tea", "teach", "team", "tear", "tell", "ten", "tennis", "test", "than", "that", "the", "their", "then", "there", "these", "thick", "thin", "thing", "think", "third", "this", "threat", "three", "tidy", "tie", "title", "to", "today", "toe", "too", "tool", "tooth", "top", "total", "touch", "town", "train", "tram", "tree", "true", "trust", "twice", "try", "turn", "type", "ugly", "uncle", "under", "unit", "until", "up", "use", "useful", "usual", "usually", "very", "voice", "visit", "wait", "wake", "walk", "want", "warm", "was", "wash", "waste", "watch", "water", "way", "we", "weak", "wear", "week", "weight", "were", "well", "west", "wet", "what", "wheel", "when", "where", "which", "while", "white", "who", "why", "wide", "wife", "wild", "will", "win", "wind", "wine", "wire", "wise", "wish", "with", "woman", "word", "work", "world", "worry", "yard", "yell", "yet", "you", "young", "your", "zero", "zoo"];
if(diff==1){
wordArray = basicWords;
}
else{
wordArray =topWords;
}
var selectedWords = [];
for(var i=0;i<40;i++){
var randomNumber = Math.floor(Math.random()*wordArray.length);
selectedWords.push(wordArray[randomNumber]+" ");
}
return selectedWords;
}
Output :
Find More Projects
Build a Quiz Game Using HTML CSS and JavaScript Introduction Hello coders, you might have played various games, but were you aware …
Emoji Catcher Game Using HTML CSS and JavaScript Introduction Hello Coders, Welcome to another new blog. In this article we’ve made a …
Typing Challenge Using HTML CSS and JavaScript Introduction Hello friends, all you developer friends are welcome to our new project. If you …
Breakout Game Using HTML CSS and JavaScript With Source Code Introduction Hello friends, welcome to today’s new blog post. All of you …
Digital and Analog Clock using HTML CSS and JavaScript Introduction : This project is a digital clock and stopwatch system, which allows …
Coffee Shop Website using HTML, CSS & JavaScript Introduction : This project is a website for coffee house business. It uses HTML …
More HTML CSS JS Projects
Get Huge Discounts
