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 and its text (2 separate elements) */

/* create the subheading using a H3 tag and its text */

/* create p and its text to click to change background color. */

/* Add Event Handler that removes the button and add the H1, H3, and p tags created above */

/* Create a div, button and text for the button.*/


/* Create an Event Handler that changes the background color, removes the p, and adds the next button */


/* Create a text of favorite sport, and button with text for creating delete buttons. */

/* Create an Event Handler that deletes the text and the button, and adds a button for the delete buttons */

/* Create two buttons with text to delete the H1 and H3 elements. */


/* Create Event Handler to remove the a button and add the two buttons. */

Creat Event Handler to remove the H1 delete button and text.

deleteButton1.addEventListener('click', function(){
		document.body.removeChild(mainHeading);
    mainHeading.removeChild(deleteButton1);
})

deleteButton2.addEventListener('click', function(){
		document.body.removeChild(subHeading);
    subHeading.removeChild(deleteButton2);
})