Bermuda Triangle

[B10M0NT15]

Need to add triangle to display to show the side you're solving. Gotta find the lost ship of Atlantis.

[unxok]

Hello!

Here's a pointer for how to implement this, keep in mind this is just proof of concept :)

<!-- index.html -->
<div class="holder">
  <div id="side-a"></div>
  <div id="side-b"></div>
  <div id="side-c"></div>
  <select onChange="handleChange()" name="" id=""></select>
</div>

/* style.css */

.holder > div {
  /* width: 100px; */
/*   height: 5px; */
  background-color: blue;
  position: absolute;
  border-radius: 5px;
}
.holder {
  position: relative;
  width: 250px;
  height: 250px;
  border: 5px solid transparent;
}

#side-a {
  height: 5px;
  width: 350px;
  bottom: 49.5%;
  right: -20%;
  transform: translate(0%, 50%);
  transform: rotate(-45deg);
  border-radius: 5px;
}

#side-b {
  right: 0;
  width: 5px;
  height: 100%;
}

#side-c {
  bottom: 0;
  height: 5px;
  width: 100%;

}

// code.js
document.getElementById('side-a').style.backgroundColor = 'red'

function handleChanage() {
    // updating input values stuff...

  //...

  if (val === 'a') {
    document.getElementById('side-a').style.backgroundColor = 'red'
  }
  if (val === 'b') {
    document.getElementById('side-b').style.backgroundColor = 'red'
  }

  //...

}