Random Word Generator Tool
Online Tool for Generating Verbs, Nouns and Adjectives Randomly
free online random word generator tool allows you to generate any number of random words (Verbs, Nouns and Adjectives) you need for your project
To create a Website with Random Word Generator Tool using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:
Steps for Creating a Website with Random Word Generator Tool
- Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
- Create an
index.htmlfile. The file name must be index and its extension .html - Create a
style.cssfile. The file name must be style and its extension .css - Create a
script.jsfile. The file name must be script and its extension .js - Download the background image and put this image inside the project folder. This is the website background image.
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download all the source code files of the Website with the Random Word Generator Tool, by clicking on the given download button.
First, paste the following codes into your index.html file.
HTML CODE </>
<html lang="en">
<head>
<!-- Responsive Html Code created by : Shift Code Design -->
<meta name="description" content="Random word generator">
<meta name="author" content="Shift Media">
<title>Random word generator</title>
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<h1 style="text-align: center; color: #b32139;">Random word generator</h1>
<!-- Responsive Html Code created by : Shift Code Design -->
<div>
The following tags will be replaced with random words. Case sensitive.
<div class="btn-group" role="group">
<button type="button" id="btn-addn" class="btn btn-dark btn-noun"> noun</button>
<button type="button" id="btn-addv" class="btn btn-dark btn-verb"> verb</button>
<button type="button" id="btn-addadj" class="btn btn-dark btn-adjective">adjective</button>
<button type="button" id="btn-addadv" class="btn btn-dark btn-adverb">adverb</button>
</div>
</div>
<br>
<form action="">
<div>
<label for="requestBar">Word template</label>
<textarea id="requestBar" class="form-control" cols="50" rows="2" required></textarea>
</div>
<br>
<div>
<div class="custom-control custom-radio custom-control-inline">
<input id="apiKeyTypeWordnik" type="radio" class="custom-control-input" name="apiKeyType" value="wordnik" checked>
<label class="custom-control-label" for="apiKeyTypeWordnik">Wordnik API</label>
<a href="https://developer.wordnik.com" target="_blank"><i class="fa fa-external-link"></i></a>
</div>
<!-- Responsive Html Coding Created By Shift Code Design | SCD -->
<div class="custom-control custom-radio custom-control-inline">
<input id="apiKeyTypeWords" type="radio" class="custom-control-input" name="apiKeyType" value="words">
<label class="custom-control-label" for="apiKeyTypeWords">Words API</label>
<a href="https://wordsapi.com" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i></a>
</div>
</div>
<br>
<div>
<label for="apiKey" id="apiKeyPrompt">Wordnik API key</label>
<input type="password" id="apiKey" class="form-control" required>
</div>
<br>
<input type="submit" class="btn btn-dark">
<br><br>
<pre><output></output></pre>
</form>
<script>
</script>
</body>
</html>Second, paste the following codes into your style.css file.
CSS CODE </>
body,
textarea,
.form-control,
.form-control:focus,
form pre {
font-family: "Montserrat", sans-serif;
font-size: 1em;
background-color: #d1edee;
}
/* Responsive Css Coding Created By Shift Code Design | SCD */
body {
margin: 10%;
}
.fa-external-link {
margin-left: 0.4em;
}
.form-control {
border: 3px solid #5ba8ff;
border-radius: 15px;
width: 90%;
}
form pre {
word-break: keep-all;
white-space: pre-wrap;
}
p.noun,
p.verb,
p.adjective,
p.adverb {
display: inline;
}
.btn {
font-size: 1em;
font-weight: bold;
border: 3px solid #4BDEFF;
border-radius: 15px;
margin-bottom: 0.2em;
}
.btn-group {
display: block;
margin-top: 1em;
}
/* Responsive Css Coding Created By Shift Code Design | SCD */
.noun {
color: #ffbb33;
font-weight: bold;
}
.btn-noun {
color: white;
background-color: #00b89f;
}
.verb {
color: #ff4444;
font-weight: bold;
}
.btn-verb {
color: white;
background-color: #ff4444;
}
.adjective {
color: #00c851;
font-weight: bold;
}
.btn-adjective {
color: white;
background-color: #1150af;
}
.adverb {
color: #ffbb33;
font-weight: bold;
}
/* Responsive Css Coding Created By Shift Code Design | SCD */
.btn-adverb {
color: white;
background-color: #ffbb33;
}Third, paste the following codes into your script.js file.
JAVASCRIPT CODE </>
var outputPromises = [];
// Responsive Js Coding Created By Shift Code Design | SCD
function handleInput(str) {
for (i = 0; i < str.length; i++) {
if (str.substring(i, i + 3) === "*n*") {
window.outputPromises.push(getRandomWordPromise("noun"));
i += 2; // Skips over some indices that contains *n* since they've supposed to be replaced
} else if (str.substring(i, i + 3) === "*v*") {
window.outputPromises.push(getRandomWordPromise("verb"));
i += 2;
} else if (str.substring(i, i + 5) === "*adj*") {
window.outputPromises.push(getRandomWordPromise("adjective"));
i += 4;
} else if (str.substring(i, i + 5) === "*adv*") {
window.outputPromises.push(getRandomWordPromise("adverb"));
i += 4;
} else {
window.outputPromises.push(str[i]);
}
}
}
// Responsive Js Coding Created By Shift Code Design | SCD
function getRandomWordPromise(partOfSpeech) {
if ($("input[name=apiKeyType]:checked").val() == "wordnik") {
return new Promise((resolve, reject) => {
var request = new XMLHttpRequest();
request.open(
"GET",
"https://api.wordnik.com/v4/words.json/randomWord?hasDictionaryDef=true&includePartOfSpeech=" +
partOfSpeech +
"&maxCorpusCount=-1&minDictionaryCount=1&maxDictionaryCount=-1&minLength=2&maxLength=-1&api_key=" +
$("#apiKey").val()
);
request.responseType = "json";
request.onload = () => {
console.log(partOfSpeech, request.response, request.status);
if (request.status === 200) {
resolve(
'<p class="' + partOfSpeech + '">' + request.response.word + "</p>"
);
} else {
reject(Error(request.status + " " + request.response.message));
}
};
request.onerror = () => {
reject(Error("Network error."));
};
request.send();
});
} else {
return new Promise((resolve, reject) => {
var request = new XMLHttpRequest();
request.open(
"GET",
"https://wordsapiv1.p.rapidapi.com/words/?partOfSpeech=" +
partOfSpeech +
"&hasDetails=definition&random=true"
);
request.setRequestHeader("X-RapidAPI-Key", $("#apiKey").val());
request.responseType = "json";
request.onload = () => {
console.log(partOfSpeech, request.response, request.status);
if (request.status === 200) {
resolve(
'<p class="' + partOfSpeech + '">' + request.response.word + "</p>"
);
} else {
reject(Error(request.status + " " + request.response.message));
}
};
request.onerror = () => {
reject(Error("Network error."));
};
request.send();
});
}
}
// Responsive Js Coding Created By Shift Code Design | SCD
$("form").submit(e => {
e.preventDefault();
window.outputPromises = [];
$("output").fadeOut(() => {
$("output")
.html("Loading...")
.fadeIn();
});
handleInput($("#requestBar").val());
Promise.all(window.outputPromises).then(
result => {
$("output").fadeOut(() => {
$("output")
.html(result.join(""))
.fadeIn();
});
},
reason => {
$("output").fadeOut(() => {
$("output")
.html(reason)
.fadeIn();
});
}
);
return false;
});
// Responsive Js Coding Created By Shift Code Design | SCD
function setAPIKeyPrompt(str) {
$("#apiKeyPrompt").fadeOut("fast", () => {
$("#apiKeyPrompt")
.html(str)
.fadeIn("fast");
});
}
function appendToWordTemplate(str) {
$("#requestBar").val($("#requestBar").val() + str);
}
$("#btn-addn").click(() => {
appendToWordTemplate("*n* ");
});
$("#btn-addv").click(() => {
appendToWordTemplate("*v* ");
});
$("#btn-addadj").click(() => {
appendToWordTemplate("*adj* ");
});
$("#btn-addadv").click(() => {
appendToWordTemplate("*adv* ");
});
$("#apiKeyTypeWordnik").change(() => {
setAPIKeyPrompt("Wordnik API key");
});
// Responsive Js Coding Created By Shift Code Design | SCD
$("#apiKeyTypeWords").change(() => {
setAPIKeyPrompt("Words API X-RapidAPI-Key");
});CLICK ON SAVE, button to save your work.
That’s all, now you’ve successfully created a Website with a Random Word Generator Tool. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.
| This Design | Random Word Generator Tool |
| Developed By: Shift Code Design (SCD) | Demo/Source Code |
| Owner: Shift Media | Responsive: No SCD14 |