JSFiddle - React, Tailwind, and code Playground

by Shuaib Khan

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>To Do List</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       
    </head>
    <body>
      <button class="click-me">
			Click me
			</button>
            
        <script type="text/javascript" src="main.js"></script>
    </body>
</html>

JavaScript

var colorArr = ["blue", "green", "orange", "purple", "red"];

var index = 0;
document.addEventListener('click', function (event) {

	if(index+1 > colorArr.length){
		index = 0
	}
	// If the clicked element doesn't have the right selector, bail
	if (!event.target.matches('.click-me')) return;
	
	// Don't follow the link
	event.preventDefault();
	var selectedColor = colorArr[index];
	
	// Log the clicked element in the console
	//console(event.target);
	
	document.querySelector("body").style.backgroundColor = selectedColor;
  document.querySelector("button").innerHTML = selectedColor;
	index++;
	
}, false);