JSFiddle - React, Tailwind, and code Playground

by Japusoy

HTML

<div class="grandparent">
  <h6 class="input">
  </h6>
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

CSS

body {
  margin: 0;
  min-height: 100vh;
}

body, div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grandparent {
  width: 200px;
  height: 200px;
  background-color: red;
  align-items: top;
  z-index = 0;
  position:relative;
}
.input{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 5px auto;
  text-align: center;
}
.parent {
  width: 130px;
  height: 130px;
  background-color: blue;
}

.child {
  width: 60px;
  height: 60px;
  background-color: green;
  z-index: 1;
}

JavaScript

var x = window.prompt("Enter a value of X ");

var square = x => x * x

alert("The value of square is: " + square(x));

document.querySelector(".input").innerHTML = x;

document.querySelector(".child").innerHTML = square(x);



/* const divs = document.querySelectorAll("div")
// console.log("document.querySelectorAll("div").length"); 
divs forEach(div => {
div.addEventListener("click", () => {
console.log("hi")
})
} */

/* const grandparent = document.querySelector(".grandparent")
const parent = document.querySelector(".parent")
const child = document.querySelector(".child")

grandparent.addEventListener("click", e => {
console.log("grandparent bubble")
})

parent.addEventListener("click", printHi)

setTimeout(() => {
parent.removeEventListener("click", printHi)
}, 8000)

child.addEventListener("click", e => {
console.log("child bubble")
})

function printHi() {
console.log("Hi");
} */

//stop propagation

/* parent.addEventListener("click", e => {
e.stopPropagation()
console.log("parent capture")
}, {capture : true}) */

//Want to run an event once or a certain amount of times
/* grandparent.addEventListener("click", e => {
console.log("grandparent bubble")
}, {once : true}) */