Instant Display: Using Event-Driven JS

In this tutorial we explain how to create an event-driven JavaScript program using only about 5 lines of JavaScript code. This app displays exactly what the user types into a text field, as the user is typing. Cool right?

Code Breakdown

//  Our input.
const info = document.getElementById("info");
//  Our output.
const display = document.getElementById("display");
//  Whatever we get as input becomes the output.
info.oninput = function () {
     display.textContent = info.value;
}

Character Counter: Using Event-Driven JS

In this tutorial we explain how to create an event-driven JavaScript program using only about 10 lines of JavaScript code. This app counts the number of characters that the user types into a text field, as the user is typing.

Code Breakdown

//  Our input.
const box = document.getElementById("box");
//  Our ouptut.
const reporter = document.getElementById("reporter");

/*  

As the user types into the text field the number of characters is displayed through the element with the id of "reporter". 

*/
box.oninput = function () {
    if (box.value.length == 1) {
        reporter.textContent = `You have typed ${box.value.length} character.`;
     } else {
         reporter.textContent = `You have typed ${box.value.length} characters.`;
      }
}