Online typing test using javascript
Hello guy,s In this artical I will be teach you how to make a online typing test using javascript. I will be teach you about all the important method and describe all topic to revelent this project. You will be found source code of this project in this artical.
Please don't forgot to share this artical in your friends. Every day I bring new post of progrraming for you then follow me and support me
About this projectThis project is developed in javascript named as online typing test. Html and css also used in this project. If you are a begineer then don't worry this artical will be very much helpfull for you to learn javascript. I use too easy method in this project.When user will be click on the start button , typing area will be open and new some text will be shown in on the header of section. user will type the words accordingto header words. After clicking the done button one session will finish. Then your typing test speed and how many correct words you type will be calaculate by the application
Follow this steps
1. make a file named by index.html
In this file we will be write some html5 simple codes You can copy and pest it in your project. These code are below under the line. it is our simple html code. In this file we design button text area and heading.
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Quiz Project</title>
<link type='text/css' rel='stylesheet' href='style.css'/>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open Sans"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!----html codes---->
<div class="col-sm-9 col-md-10 mt-4">
<div class="mainclass">
<div class="centerdiv">
<h1>Welcome to Hans College Typing Test</h1></br>
<h5 id="getwords"></h5>
<textarea id="typewords" placeholder="type your words"></textarea><br>
<button id="btn" type="button" class="mainbtn">Start</button>
</div>
</div>
</div>
<script src="type.js"></script>
</body>
</html>
2. Create a file named by style.css
In this file we will be write code to decorate our project. It will be a simple style file. We will be try to make it more responsive and attractive
It is so simple to make it responsive. An begineer developer make it full responsive
copy and pest all the style code below under the lines
.mainclass{
position: relative;
width:100%;
height:100%;
background: #fff;
margin-top: 100px;
}
.centerdiv{
position: absolute;
top:50%;
left:50%;
width:100%;
transform: translate(-50%,-50%);
text-align: center;
align-content: center;
justify-content: center;
}
#typewords{
width:70%;
height:250px;
background: whitesmoke;
}
h1{
text-align: center;
font-size: 2em;
color:red;
}
#typewords{
border-radius: 4px;
}
textarea{
border: 1px solid none;
box-shadow: 10px 10px 10px rgba(0,0,0,0.2)
}
.mainbtn{
padding: 5px 30px 5px 30px;
text-align: center;
justify-content: center;
align-items: center;
border-radius:10px;
background: white;
border : 1px solid silver;
font-weight: 600;
box-shadow: 10px 10px 10px rgba(0,0,0,0.2)
}
h1{
position: relative;
}
h1:before{
content: "";
position: absolute;
left: 15%;
bottom:-15px;
width: 0%;
height: 2px;
background: blue;
width: 70%;
border: 5px solid blue;
border-radius: 5px;
}
@media (min-width: 320px) and (max-width: 620px){
.mainclass{
position: relative;
width:100%;
height:500px;
background: #fff;
}
#typewords{
width:90%;
height:250px;
background: whitesmoke;
}
h1{
text-align: center;
font-size: 1em;
color:red;
}
}
3. Make an js file named by type.js
This is our last step to complete this project. Now we have to write some javascript code. It is our most impiortant file of this project.
Copy and pest all the code below under the lines
var typewords = document.getElementById('typewords');
var getwords = document.getElementById('getwords');
var btn = document.getElementById('btn');
var setupwords = [
"hello this new typing test designed and developed by mr mukkar in 2020. It is a simple typing test for begineers.",
"master bhi new kahate hai jisko na padhana i am fan of amit bjhadamna",
"ab sab kuchh bataya jaaye to achha rahega ab kuchh na chhupaya jaaye to achha rahega aur adalat saji hai tere mohalle men to koi gila nahi gavaah mere mohalle se bhi bulaye jaayeto achha rahega",
"Hamaare that hai gahare kyonki ham gujjar jo thare. Jai ho dev narayan maharaj ki"
];
var starttime, endtime;
function playgame(){
var setup = Math.floor(Math.random()*setupwords.length);
var inserttext = setupwords[setup];
getwords.innerText = inserttext;
btn.innerText = "Done";
var startdate = new Date();
starttime = startdate.getTime();
}
function endgame() {
var enddate = new Date();
endtime = enddate.getTime();
var tottaltime = ((endtime-starttime)/1000);
var timecalculate = Math.floor(tottaltime);
tottalstr = typewords.value;
var wordcount = wordCounter(typewords.value);
typewords.value = "";
var speed = Math.floor((wordcount/timecalculate) * 60 );
var finalmessage = "your typing speed is "+ speed +" words per minute good";
finalmessage += " " + comparewords(getwords.innerText,tottalstr) +" words correct you type " + wordcount + " word";
getwords.innerText = finalmessage;
}
function comparewords(str1,str2) {
var words1 = str1.split(" ");
var words2 = str2.split(" ");
var correct = 0;
words1.forEach(function(item,index) {
if(item == words2[index]){
correct++;
}
});
return (correct);
}
function wordCounter(str){
var response = str.split(" ").length;
return response;
}
btn.addEventListener('click',function(){
if(this.innerText === 'Start'){
typewords.disabled = false;
playgame();
}
else if(this.innerText === 'Done'){
if(typewords.value === ''){
playgame();
}
else{
endgame();
typewords.disabled = true;
btn.innerText = "Start";
}
}
})
after finishing these three steps successfully the open this file in any browser as you want and plat with online tying test
Please don't forget to share this artical in your friends.
No comments:
Post a Comment
thanks for your comments