JSFiddle - React, Tailwind, and code Playground

by Salmin Skenderovic

HTML

<div id="container">
  <div id="arrowcontainer">CLICK HERE</div>
</div>

CSS

#container {
  width: 100%;
  height: 55vh;
  text-align: center;
  padding-top: 40vh;
}

#arrowcontainer {
  width: 100%;
}

.arrow-right {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 0 50px 100px;
  border-color: transparent transparent transparent blue;
}

.arrow-left {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 100px 50px 0;
  border-color: transparent blue transparent transparent;
}

JavaScript

document.getElementById("container").addEventListener("click", Randomize)

function Randomize() {
  var randomNr = Math.floor((Math.random() * 2) + 1);
  console.log(randomNr);

  if (randomNr == 1) {
    AppendArrow("right");
  } else {
    AppendArrow("left");
	}
}

function AppendArrow(onedirection)
{
	document.getElementById("arrowcontainer").innerHTML = "<span class='arrow-" + onedirection + "'></span>";
}