Interactive Form The "Name" field:

Im taking my time with this project and i am going to do it step by step bu when in downloaded the project files there was no js file and when i read through the instructions it said to make your own js file so i am making one right now:

the first step was:

The "Name" field: When the page loads, the first form field should be in focus, meaning it should have a flashing cursor and/or be highlighted in some way.

Create a variable to reference the “Name” <input type="text"> element and log the variable out to the console to ensure the correct element is being referenced. Use the variable and dot notation to set the focus property of the element to true. Now save and refresh the page, and the “Name” field should have the focus state.

My answer is:

const data = [ { name: { title: "Mr", first: "Karl", last: "Menil", }, email: "karl.menil@example.com", registered: { date: "03-05-2021", age: 25, }, ];

or should i do it on the html? like this:

<fieldset> <label for="name">Name (4 to 8 characters):</label>

<input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10"> </fieldset>

how do i translate this code to javascript? do i do it like this? const nameInput = document.getElementById("name"); function isValidname(name) {}

function showOrHideTip(show, element) { // show element when show is true, hide when false if (show) { element.style.display = "inherit"; } else { element.style.display = "none"; } }

function createListener(validator) { return e => { const text = e.target.value; const valid = validator(text); const showTip = text !== "" && !valid; const tooltip = e.target.nextElementSibling; showOrHideTip(showTip, tooltip); }; }

nameInput.addEventListener("input", createListener(isValidname));

Any hints, suggestions, and comments are very well appreciated. thank you in advance for all your help.