A Typing Lessons App
How do I make an a typing lessons app?
A simple app that let's you write a text and shows all the right and wrong characters you wrote. Very simple solution!. What is a a typing lessons app? How do you make a a typing lessons app? This script and codes were developed by Jeremias Erbs on 09 December 2022, Friday.
A Typing Lessons App - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Typing Lessons App</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Josefin+Slab:700);
body { color: #333; font-family: 'Josefin Slab', serif; font-size: 1.2em; padding: 20px;
}
h1 { font-size: 48px;
}
em { color: #999; font-style: normal;
}
.chars { background-color: #f9f9f9; border: 2px solid #ddd; border-radius: 0.1em; color: #999; font-size: 40px; padding: 0.5em 1em;
}
.right { color: #77cc09;
}
.wrong { color: #ff0066;
}
.underline { border-bottom: 3px solid black; animation: blink 0.8s steps(2) infinite alternate both;
}
@keyframes blink { from { border-color: transparent; } to { border-color: black; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>A T<span class="right">yping</span> <span class="wrong">L</span>essons App</h1>
<em>Please write this text:</em>
<pre class="js-lesson chars"></pre>
<em>This is what you wrote:</em>
<pre class="js-output">(Nothing yet)</pre> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
A Typing Lessons App - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Josefin+Slab:700);
body { color: #333; font-family: 'Josefin Slab', serif; font-size: 1.2em; padding: 20px;
}
h1 { font-size: 48px;
}
em { color: #999; font-style: normal;
}
.chars { background-color: #f9f9f9; border: 2px solid #ddd; border-radius: 0.1em; color: #999; font-size: 40px; padding: 0.5em 1em;
}
.right { color: #77cc09;
}
.wrong { color: #ff0066;
}
.underline { border-bottom: 3px solid black; animation: blink 0.8s steps(2) infinite alternate both;
}
@keyframes blink { from { border-color: transparent; } to { border-color: black; }
}
A Typing Lessons App - Script Codes JS Codes
// make sure not to override app if used with other modules
var app = app || {};
app.TypingLessons = (function() { var LESSONS = [ "I could write anything", "This is another test. Try it!" ]; var chars = $(".js-lesson"), output = $(".js-output"), currentLessonIndex = 0, currentLesson = LESSONS[currentLessonIndex], counter = 0, once = false; return { init: init // only expose init method }; // Initialize the app function init() { updateLessonText(); underlineFirstChar(); addKeyPressHandler(); } // Grab text from currentLesson, add spans around // each character and put it into the DOM function updateLessonText() { chars.html(splitIntoSpans(currentLesson)); } // Find first span and add the underline class function underlineFirstChar() { chars.find("span").eq(0).addClass("underline"); } // Split a text into chars and surround it with spans function splitIntoSpans(text) { return text.split("").map(function(n) { return "<span>" + n + "</span>"; }).join(""); } // Listen for keyboard input and handle it function addKeyPressHandler() { $(document).on("keypress", function(event) { var input = String.fromCharCode(event.charCode), isRight = input === currentLesson[counter], spanClass = isRight ? "right" : "wrong", allSpans = chars.find("span"), currentSpan = allSpans.eq(counter); counter++; once || (once = true) && output.text(""); allSpans.removeClass("underline"); currentSpan.addClass(spanClass); currentSpan.next().addClass(" underline"); output.text(output.text() + input); event.preventDefault(); }); }
})();
// RUN
app.TypingLessons.init();
Developer | Jeremias Erbs |
Username | badabam |
Uploaded | December 09, 2022 |
Rating | 3 |
Size | 3,783 Kb |
Views | 16,192 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Image and text hover effect with filter and inline SVG | 3,797 Kb |
Corner badge | 2,610 Kb |
JS prototypical inheritance test | 2,436 Kb |
Open and slide out content | 3,829 Kb |
Prototype pattern example | 2,526 Kb |
Stiftung Warentest Signet | 5,371 Kb |
Animate SVG Smiley with AngularJS | 2,822 Kb |
CSS3 Columns Example | 2,886 Kb |
Working agreements | 5,333 Kb |
Simple icon element with any centered content | 2,880 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Chuck Norris Background | Manz | 1,967 Kb |
Countdown Timer | Massiebn | 3,001 Kb |
Layout 11 | Altynai | 1,690 Kb |
Material design buttons | Fischaela | 4,381 Kb |
A Pen by Michael Parenteau | Michaelparenteau | 2,133 Kb |
Simple content swap | Snografx | 1,859 Kb |
Jquery 2d character movement | Drewtadams | 4,291 Kb |
Drifting Clouds | Benedikte | 2,247 Kb |
HTML5 Video Autoplay | Zivcos | 1,352 Kb |
Faux column absolute wrapper | Yurimorini | 1,823 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!