JSFiddle - React, Tailwind, and code Playground

by Blake Collins

HTML

<body>
     <h1>Week One of Learn JavaScript</h1>

     <h2>Assignment 1</h2>

    <p>Enter your name below and find out how many characters are in your name
        <p>
            <input type="text" id="nameInput" placeholder="Enter your name here">
            <button id="enter">Enter</button>
            <p>There are [ <span id="output"></span> ] characters in your name.</p>
</body>

CSS

::-webkit-input-placeholder {

    font-style: italic;

JavaScript

// on click function to count characters in entered string

enter.onclick = function () {
    var nameInput = document.getElementById("nameInput").value;
    var number = nameInput.length;
    output.innerHTML = number;

};