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 element 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. The paragraph should 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 remove 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 adds the H1, H3, and p tags created above */

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


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


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

/* Create an Event Handler that deletes the text and the second button, and adds a third button (used to click for the delete buttons). */

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


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

/* Create Event Handler to remove the H1 delete button and text. */

/* Create Event Handler to remove the H3 delete button and text. */