I created a website to teach blind typing. However, while running it, i noticed that none of my CSS midifications happen… I tried debugging and searching the internet for similar problems but I cannot find the problem myself and so will appreciate a second pair of eyes to look it over and help me resolve this…
Thanks in advance <3
My HTML code:
<head>
<title>Blind Typing</title>
<h2> Learn how to type blindly today! </h2>
<h4> Follow these simple exercises and become a blind typer! </h4>
<link rel="stylesheet" href="../blindTyping.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="../blindTyping.js"></script>
</head>
<body>
<div>
<div class="exp">
Copy the following quote, without looking at the keyboard!, to the best of you ability.
</div>
<div class="menu">
Choose diffeculty level:
<ul>
<li><button class="easy">Beginner</button></li>
<li><button class ="mid">Intermediate</button></li>
<li><button class="hard">Expert</button></li>
</ul>
</div>
<div class="original" id="exc">
</div>
<div id="timer">
<button class="start">start</button>
<button class="stop">stop</button>
<p class="timer"></p>
</div>
<div class="copy" id="exc">
<input type="text">
<p id="msg" class="oops" background-color="red"></p>
<p id="msg" class="success" background-color="green">Congratulation! You made it! Now go and try the next one! </p>
<button class="under" id="next">Next Exercise</button>
<button class="under" id="return">Return to Menu</button>
</div>
</div>
</body>
</html>
My javascript code:
/*global $, document*/
var easy = ["This is a test", "This is another test"];
var med = ["This is a medium quote"];
var hard = ["This is a hard quote"];
var cntq, currIndex = 0, mistakes = 0;
$(document).ready(function () {
"use strict";
$("#exc").hide();
$(".oops").hide();
$(".success").hide();
$(".stop").hide();
$(".easy").on("click", function () {
cntq = easy;
$("#exc").show();
$(".menu").hide();
$(".original").html("<p>"+easy[currIndex]+"</p>");
});
$(".mid").on("click", function () {
cntq = med;
$("#exc").show();
$(".menu").hide();
$(".original").html("<p>"+med[currIndex]+"</p>");
});
$(".hard").on("click", function () {
cntq = hard;
$("#exc").show();
$(".menu").hide();
$(".original").html("<p>"+hard[currIndex]+"</p>");
});
$("#next").on("click", function () {
currIndex++;
mistakes = 0;
});
$("#return").on("click", function () {
$("#exc").hide();
currIndex = 0;
});
$("input").on("input propertychange", function () {
$(".oops").hide();
$(".success").hide();
var chk = $("input").val();
var org = cntq[currIndex];
var errorFound = false;
var newHTML = "";
// Check letter by letter if the input matches the original sentence
for(var i=0; i<chk.length&&!errorFound;i++){
if(chk[i]===org[i]){
// Add mark tag to the current letter in the original text to show user progress
newHTML = newHTML +"<mark>"+org[i]+"</mark>"; }
else{
// If there's a mistake, alert user and delete the input so user can try again
newHTML = cntq[currIndex];
mistakes++;
errorFound = true;
}
}
// Check if there was a mistake
if(errorFound){
$(".oops").text("Oops! You made " + mistakes+ " mistakes.");
}
// complete the original sentence if the input is still unfinished with the rest of the org sentence
if(i != org.length){
for(;i<org.length;i++){
newHTML+=org[i];
}
}// Check whether the sentence matches the original completely
else if (newHTML === org){
$(".success").show();
}
$(".orginal").html(newHTML);
$("mark").attr("background-color='yellow'");
});
function getdate(){
var today = new Date();
//var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
if(s<10){
s = "0"+s;
}
if (m < 10) {
m = "0" + m;
}
$(".timer").text(m+" : "+s);
$(".start").hide();
$(".stop").show();
setTimeout(function(){getdate()}, 500);
}
$(".start").on("click", getdate);
$(".stop").on("click", function() {
$(".start").show();
});
}); // End ready function
My CSS code:
title h2 h4 {
left: 50%;
transform: translate(-50%,0);
text-align: center;
position: absolute;
border-radius: 5px;
box-shadow: 0px 8px 16px 0px;
}
body {
left: 50%;
transform: translate(-50%,0);
text-align: center;
position: absolute;
border-radius: 5px;
}
ul .menu {
list-style-type: none;
margin: 0;
padding: 0;
}
li button {
display: block;
width: 60px;
}
mark {
background-color: yellow;
color: black;
}
input
{
display: block;
width: 500px;
height: 200px;
}
.under {
display:inline-block;
}
#next {
float: right;
position: absolute;
}
#return {
float: left;
position: absolute;
}
p #msg {
border-radius: 10px;
padding: 20px;
width: 500px;
height: 50px;
}
.oops {
border: 2px red
}
.success {
border: 2px green;
}
#timer {
right: 5%;
text-align: center;
position: absolute;
border-radius: 5px;
box-shadow: 0px 8px 16px 0px;
}