JSFiddle - React, Tailwind, and code Playground

by jrl2000

HTML

<!-- Your job is to build a dynamic webpage from scratch using only Javascript. You should not write code into the HTML or CSS sections. You will build the elements of the page using plain Javascript, and then remove the elements. The elements should be as follows:
1. When the "Click here to get started" button is pressed the following should appear...
  a. A Heading with a H1 element that says "Welcome to my Webpage" 
  b. A Subheading with a H3 that says "I hope this page helps you learn more about me."
  c. A paragraph that says "Click here to change the background to my favorite color."
2. When the paragraph is clicked, it should 
  a. change the background of the screen to your favorite color.
  b. disappear
  c. A button that says "click here for my favorite sport" should appear.
3. When the "click here for my favorite sport" button is clicked...
  a. The button should disappear.
  b. The screen should return to white.
  c. A paragraph element should appear stating your favorite sport.
  d. A new button should appear underneath the new paragrph that says "now click here to make delete buttons"
4. When the "now click here to make delete buttons" button is pressed...
  a. The button should dissapear.
  b. Two buttons should appear, one in the H1 element that says "Delete this Heading!" and one in the H3 element that says "Delete this subHeading!" 

When all steps are completed in the Javascript and on the page, the screen should be completely blank. Hints: think of creating elements and text nodes, and then append them and removing them with an event handler. Pay close attention to the scope of elements created as you may need to reference them later (to remove them).

 -->

JavaScript

start button
var openDiv = document.createElement('div');
var getStartedButton = document.createElement('button');
var getStartedButtonText = document.createTextNode("Click here to get started")
openDiv.appendChild(getStartedButton);
getStartedButton.appendChild(getStartedButtonText);
getStartedButton.style.display = 'block';
document.body.appendChild(openDiv);


/* create the main heading using an H1 tag */
var mainHeading = document.createElement('H1');
var mainText = document.createTextNode("Welcome to my Webpage");
/* create the subheading using a H3 tag */
var subHeading = document.createElement('H3');
var subText = document.createTextNode("I hope this page helps you learn more about me.");
/* create text to click to change background color. */
var colorPara = document.createElement('p');
var colorParaText = document.createTextNode("Click here to change the background color to my favorite color.");

getStartedButton.addEventListener('click', function(){
    document.body.removeChild(openDiv);
    /* mainHeading.setAttribute('class', 'mainheading'); */
    mainHeading.appendChild(mainText);
    document.body.appendChild(mainHeading);

    /* subHeading.setAttribute('class', 'subheading'); */
    subHeading.appendChild(subText);
    document.body.appendChild(subHeading);
    colorPara.setAttribute('id','colorPara');
    colorPara.appendChild(colorParaText);
    document.body.appendChild(colorPara);
 })

var favSportDiv = document.createElement('div');  
var button = document.createElement('button'); 
var buttonText = document.createTextNode('click here for my favorite sport')
colorPara.addEventListener("click", function(){
    document.body.style.backgroundColor = "gray";
    button.appendChild(buttonText);
    favSportDiv.appendChild(button);
    document.body.appendChild(favSportDiv);
    document.body.removeChild(colorPara);
});

 			var favSport = document.createTextNode("My favorite sport is lacrosse.");
      var button2 =...