JSFiddle - React, Tailwind, and code Playground

by akang2

HTML

<form id='paragraph'>
    Your first name is <input type='text' name='firstName'></input> and your last name is <input type='text' name='lastName'></input>
    <br/><br/>
    <input id="submit-button" type='submit'> </input>
</form>

JavaScript

//TODO #1: Target the form using your querySelector
//TODO #2: Add an event listener to the form to listen for the submit event.
//TODO #3: Create a handler for the form event listener and prevent the default behavior
    //TODO #4: Target the firstName and lastName input elements without modifying the HTML.
    //TODO #5: Create two new '<strong>' elements for each input
    //TODO #6: Add the values of the input fields to the textContent of the appropriate new element.
    //TODO #7: Replace both the text inputs inside the the formParagraph.
    //TODO #8: Remove the submit button so its in its final state and can no longer be edited.

//element.onclick = function() {}

//grabbing the submit button
var submitButton = document.querySelector('#submit-button');
//console.log(submitButton);

//grabbing the form
var paragraph = document.querySelector('#paragraph');

//test driven development habit
//console.log(paragraph);

//mayra event listener
paragraph.addEventListener('submit', newElements);

//create the handler
function newElements() {
    //cleariing the default
    event.preventDefault();
    //creating a variable to contain the first name. Targeting the first name by the tag and the name attribute. We're able to tell the difference by it's index  number.
    var fName = document.getElementsByTagName('input')[0].getAttribute('name');
    //creating a variable to contain the last name
    var lName = document.getElementsByTagName('input')[1].getAttribute('name');
}

/*
//the event listener                                           
submitButton.onclick = function() {
    //prevent default behavior
    event.preventDefault();
    
    //target fName and lName inputs
    fName = document.querySelector('#first-name');
    lName = document.querySelector('#last-name');
    
    //creating new <strong> for each
    firstStrong = document.createElement('strong');
    lastStrong = document.createElement('strong');
    
    //get the value from the input field
    
 ...