"Job Role" section HTML to JAVASCRIPT how do i convert the html code to javascript?

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 "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. "Job Role" section The "Job Role" section has an <input type="text"> field where users can enter a custom job role. If the user selects "Other" in the "Job Role" drop down menu, they can enter info into the "Other job role" text field. But this field should be hidden by default and only displayed once users select "Other" in the drop down menu, and be hidden if the user selects any other option.

Hide the "text field" with the id of "other-job-role" so it is not displayed when the form first loads. Program the "Job Role" <select> element to listen for user changes. When a change is detected, display/hide the "text field" based on the user’s selection in the drop down menu.

My answer is:

HTML CODE:

<label for="name">Name: <span class="asterisk">*</span> <input type="text" id="name" name="user-name" class="error-border"> <span id="name-hint" class="name-hint hint">Name field cannot be blank</span> </label>

      <label for="email">Email Address: <span class="asterisk">*</span>
        <input type="email" id="email" name="user-email" class="error-border">
        <span id="email-hint" class="email-hint hint">Email address must be formatted correctly</span>
      </label>


      <label for="title">Job Role</label>
      <select id="title" name="user-title">
        <option hidden>Select Job Role</option>
        <option value="full-stack js developer">Full Stack JavaScript Developer</option>
        <option value="front-end developer">Front End Developer</option>
        <option value="back-end developer">Back End Developer</option>
        <option value="designer">Designer</option>          
        <option value="student">Student</option>
        <option value="other">Other</option>  
      </select> 

      <input type="text" name="other-job-role" id="other-job-role" class="other-job-role" placeholder="Other job role?">
    </fieldset>

Convert to JavaScript:

let nameField = document.getElementsByTagName('INPUT')[0];

console.log(nameField);

nameField.focus();

let emailField = document.getElementById('email');

console.log(emailField);

emailField.focus();

let jobRoleSelection = document.getElementById("title"); let basicInfoSection = document.getElementsByTagName("basicinfo")[0]; let designSelection = document.getElementById("design"); let colorSelection = document.getElementById("color"); let hiddenColorOptions = []; console.log(jobRoleSelection); console.log(basicInfoSection); console.log(designSelection); console.log(colorSelection); jobRoleSelection.focus(); basicInfoSection.focus(); designSelection.focus(); colorSelection.focus();

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