JSFiddle - React, Tailwind, and code Playground

by cwhong

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="bulb">
</div>

<div class="button">
  Click Me!
</div>

CSS

.bulb {
  height: 50px;
  width: 50px;
  background-color: red;
  margin: 50px auto 0 auto;
  border-radius: 25px;
  transition: background-color 0.5s ease;
}

.button {
    height: 30px;
    width: 100px;
    margin: 50px auto 0 auto;
    background-color: white;
    border: 1px solid #cdcdcd;
    border-radius: 10px;
    font-family: sans-serif;
    text-align: center;
    line-height: 30px;
}

.button:hover {
  cursor: pointer;
  background: #fbfbfb;
  
}

JavaScript

function getRandomColor() {
	var randomNumber = Math.floor(Math.random() * 10)
  
  if( randomNumber === 0) return 'red';
  if( randomNumber === 1) return 'orange';
  if( randomNumber === 2) return 'yellow';
  if( randomNumber === 3) return 'green';
  if( randomNumber === 4) return 'blue';
  if( randomNumber === 5) return 'indigo';
  if( randomNumber === 6) return 'violet';
  if( randomNumber === 7) return 'steelblue';
  if( randomNumber === 8) return 'royalblue';
  if( randomNumber === 9) return 'midnightblue';
};


$('.button').click( function() {
	$('.bulb').css( 'background-color', getRandomColor() )
});