A Typing Lessons App

Developer
Jeremias Erbs
Size
3,783 Kb
Views
16,192
  1. A Typing Lessons App Previews
  2. A Typing Lessons App HTML Codes
  3. A Typing Lessons App CSS Codes
  4. A Typing Lessons App JS Codes

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 Previews
IQ Test

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();
A Typing Lessons App - Script Codes
A Typing Lessons App - Script Codes
Home Page Home
Developer Jeremias Erbs
Username badabam
Uploaded December 09, 2022
Rating 3
Size 3,783 Kb
Views 16,192
Do you need developer help for A Typing Lessons App?

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!

Jeremias Erbs (badabam) Script Codes
Name
Prototype pattern example
CSS3 Columns Example
Open and slide out content
Working agreements
A 1x1 transparent base64 gif.
Animate SVG Smiley with AngularJS
Angular Dropdown Directive
Small JMESpath test
Button with stripe shadow
Circle through values in array
Create amazing love letters with AI!

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!