Hello friends, today I will tell you through experts php tutorial how you can generate random word through javascript and html form. So let’s try to understand step to step.
Random Word Generator With JavaScript, Create Random Word Generator Calculator by JS, Random English Word Generaor Using Jquery
Overview
Step 1:- First of all, you create an html file.
Step 2:- Now add the javascript code of random word generator to this file.
Step 1:- First of all, you create an html file.
random-word-generator.php
<html>
<head>
<titkle>How to Create Random Word Generator Using JavaScript & HTML Form With Example?</title>
</head>
<body>
<h1>How to Create Random Word Generator Using JavaScript & HTML Form With Example?</h1>
<button id="new">Refresh</button>
<input type="text" value="10" id="num"></input>
<div id="whatever"></div>
</body>
</html>
Step 2:- Now add the javascript code of random word generator to this file.
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
function createRandomWord(length) {
var consonants = 'bcdfghjklmnpqrstvwxyz',
vowels = 'aeiou',
rand = function(limit) {
return Math.floor(Math.random()*limit);
},
i, word='', length = parseInt(length,5),
consonants = consonants.split(''),
vowels = vowels.split('');
for (i=0;i<length/2;i++) {
var randConsonant = consonants[rand(consonants.length)],
randVowel = vowels[rand(vowels.length)];
word += (i===0) ? randConsonant.toUpperCase() : randConsonant;
word += i*2<length-1 ? randVowel : '';
}
return word;
}
$("#new").click(function(){
$("#whatever").text('');
for(var p = 0; p < 10; p++){
$("#whatever").append(createRandomWord($("#num").val())+'<br/>');
}
});
</script>
How do you manage this code in a single file. You are explained well below.
random-word-generator.html
<html>
<head>
<titkle>How to Create Random Word Generator Using JavaScript & HTML Form With Example?</title>
</head>
<body>
<h1>How to Create Random Word Generator Using JavaScript & HTML Form With Example?</h1>
<button id="new">Refresh</button>
<input type="text" value="10" id="num"></input>
<div id="whatever"></div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
function createRandomWord(length) {
var consonants = 'bcdfghjklmnpqrstvwxyz',
vowels = 'aeiou',
rand = function(limit) {
return Math.floor(Math.random()*limit);
},
i, word='', length = parseInt(length,5),
consonants = consonants.split(''),
vowels = vowels.split('');
for (i=0;i<length/2;i++) {
var randConsonant = consonants[rand(consonants.length)],
randVowel = vowels[rand(vowels.length)];
word += (i===0) ? randConsonant.toUpperCase() : randConsonant;
word += i*2<length-1 ? randVowel : '';
}
return word;
}
$("#new").click(function(){
$("#whatever").text('');
for(var p = 0; p < 10; p++){
$("#whatever").append(createRandomWord($("#num").val())+'<br/>');
}
});
</script>
</body>
</html>