JSFiddle - React, Tailwind, and code Playground

by Lakshay Akula

HTML

<!-- your html file: -->
<body>
  <h1>
    Odin Project Exercises
  </h1>
  <div id="container"></div>
</body>

JavaScript

// your javascript file
const container = document.querySelector('#container');

const redParagraph = document.createElement('p');
redParagraph.style.color = 'red';
redParagraph.textContent = `Hey I'm red!`;

const blueH3 = document.createElement('h3');
blueH3.style.color = 'blue';
blueH3.textContent = `I'm a blue h3`;

const pinkContainer = document.createElement('div');
pinkContainer.style.backgroundColor = 'pink'
pinkContainer.style.border = '1px solid black'

const h1 = document.createElement('h1');
h1.textContent = `I'm in a div`

const paragraph = document.createElement('p');
paragraph.textContent = 'Me too!'

pinkContainer.appendChild(h1);
pinkContainer.appendChild(paragraph);

const elems = [redParagraph, blueH3, pinkContainer]

pinkContainer.addEventListener('click', function (e) {
	e.target.style.backgroundColor = 'blue';
});

elems.forEach(elem => container.appendChild(elem));