Open B10M0NT15 opened 6 months ago
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'
}
//...
}
Need to add triangle to display to show the side you're solving. Gotta find the lost ship of Atlantis.