JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<div class="block">
  <button class="knop" id="knop1" onmouseover="hover1(this)" onmouseout="normal1(this)" onclick="klik(this)"></button>
  <button class="knop" id="knop2" onmouseover="hover2(this)" onmouseout="normal2(this)" onclick="klik(this)"></button>
  <button class="knop" id="knop3" onmouseover="hover3(this)" onmouseout="normal3(this)" onclick="klik(this)"></button>
  <button class="knop" id="knop4" onmouseover="hover4(this)" onmouseout="normal4(this)" onclick="klik(this)"></button>
  <button class="knop" id="knop5" onmouseover="hover5(this)" onmouseout="normal5(this)" onclick="klik(this)"></button>
  <button class="knop" id="knop6" onmouseover="hover6(this)" onmouseout="normal6(this)" onclick="klik(this)"></button>
  <button class="knop" id="knop7" onmouseover="hover7(this)" onmouseout="normal7(this)" onclick="klik(this)"></button>

  <div class="square">
    <div class="circle" id="positie0-0"></div>
    <div class="circle" id="positie1-0"></div>
    <div class="circle" id="positie2-0"></div>
    <div class="circle" id="positie3-0"></div>
    <div class="circle" id="positie4-0"></div>
    <div class="circle" id="positie5-0"></div>
    <div class="circle" id="positie6-0"></div>
    <div class="circle" id="positie0-1"></div>
    <div class="circle" id="positie1-1"></div>
    <div class="circle" id="positie2-1"></div>
    <div class="circle" id="positie3-1"></div>
    <div class="circle" id="positie4-1"></div>
    <div class="circle" id="positie5-1"></div>
    <div class="circle" id="positie6-1"></div>
    <div class="circle" id="positie0-2"></div>
    <div class="circle" id="positie1-2"></div>
    <div class="circle" id="positie2-2"></div>
    <div class="circle" id="positie3-2"></div>
    <div class="circle" id="positie4-2"></div>
    <div class="circle" id="positie5-2"></div>
    <div class="circle" id="positie6-2"></div>
    <div class="circle" id="positie0-3"></div>
    <div class="circle" id="positie1-3"></div>
    <div class="circle"...

CSS

body {
  background-image: url(spelbg.jpg);
  background-size: cover;
  background-repeat: repeat;
}

.knop {
  width: 50px;
  height: 50px;
  outline: none;
  border: none;
  cursor: pointer;
  border-radius: 50%;
}

.knop:hover {
  background-color: red;
}

.clickyellow:hover {
  background-color: yellow;
}

.restart {
  height: 50px;
  width: 150px;
  font-family: 'comic sans ms';
  font-size: 150%;
  cursor: pointer;
}

.container {
  text-align: center;
}

.block {
  width: 374px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
}

.square {
  height: 325px;
  width: 374px;
  background-color: blue;
}

.circle {
  height: 50px;
  width: 50px;
  background-color: grey;
  border-radius: 50%;
  display: inline-block;
}

.red {
  background-color: red !important;
}

.yellow {
  background-color: yellow !important;
}

.normal {
  background-color:  !important;
}

JavaScript

var speelveld = [
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0]
];

/*var speelveldDiv = document.getElementById('speelveld');
speelveldDiv.innerHTML = '';*/

var getal = 0;

function restart(button) {
  window.location.reload()
}

function normal1(button) {
  document.getElementById('knop2').classList.add('normal')

}

function normal2(button) {
  document.getElementById('knop2').classList.add('normal')
}

function normal3(button) {
  document.getElementById('knop3').classList.add('normal')
}

function normal4(button) {
  document.getElementById('knop4').classList.remove('red', 'yellow')
}

function normal5(button) {
  document.getElementById('knop5').classList.add('normal')
}

function normal6(button) {
  document.getElementById('knop6').classList.add('normal')
}

function normal7(button) {
  document.getElementById('knop7').classList.add('normal')
}




function hover1(button) {
  if (getal % 2 == 0) {
    document.getElementById('knop1').classList.add('red')
  } else {
    document.getElementById('knop1').classList.add('yellow')
  }
}

function hover2(button) {
  if (getal % 2 == 0) {
    document.getElementById('knop2').classList.add('red')
  } else {
    document.getElementById('knop2').classList.add('yellow')
  }
}

function hover3(button) {
  if (getal % 2 == 0) {
    document.getElementById('knop3').classList.add('red')
  } else {
    document.getElementById('knop3').classList.add('yellow')
  }
}

function hover4(button) {
  if (getal % 2 == 0) {
    document.getElementById('knop4').classList.add('red')
  } else {
    document.getElementById('knop4').classList.add('yellow')
  }
}

function hover5(button) {
  if (getal % 2 == 0) {
    document.getElementById('knop5').classList.add('red')
  } else {
    document.getElementById('knop5').classList.add('yellow')
  }
}

function hover6(button) {
  if (getal % 2 == 0) {
   ...