JSFiddle - React, Tailwind, and code Playground

by vaibhav2812

HTML

<button>
Click
</button>
<h1>
  Hello World
</h1>
<p>

</p>
<section class="page-body">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

<form>

</form>

CSS

div {
  height: 100px;
  width: 150px;
  display: inline-block;
}

.page-body {
  height: 500px;
  width: 500px;
  background: beige;
}

JavaScript

var element = document.querySelector('h1');
var para = document.querySelector('p');
var btn = document.querySelector('button');


random = function(num) {
  return Math.floor(Math.random() * num);
}

function bgChange(e) {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  return rndCol;
}
btn.addEventListener('click', bgChange);

var divs = document.querySelectorAll('div');
console.log(divs);
for (var i = 0; i < divs.length; i++) {
  divs[i].onclick = function(e) {
    e.target.style.backgroundColor = bgChange(e);
  };
  divs[i].ondblclick = function(e) {
    e.target.style.backgroundColor = 'transparent';
  }
}