0

I have created a circle using div. But I am struggling to convert the circle border into clickable function.

My major focus of implementation is React. But if I get the logic in basic JS as well then I will convert it to react.This is the reason I am tagging react as well.

What I am trying to achieve is : there are 4 section of circle border.On left top border and left bottom border similarly right top border and right bottom border.I want it to convert into clickable 4 different function. Preview below 

function redClick(){
}
function blueClick(){
}
function greenClick(){
}
function orangeClick(){
}
.circle
{
  border-radius:30px;
  width:35px;
  height:35px;
  border:4px red solid;
  border-top:4px solid red;
  border-right:4px solid green;
  border-bottom:4px solid blue;
  border-left:4px solid orange;
  transform:rotate(45deg);
 
}
<html>
  <body>
    <div class="circle">
    </div>
  <body>
</html>

On red click it should call red function and similarly for all

Mohammed Sabir
  • 25
  • 1
  • 1
  • 9

1 Answers1

1

You should make the quarters seperate. It makes detecting in which quarter you click much easier. I got an example here.

$('.top-left').click(function() {
  console.log("top left")
});
$('.top-right').click(function() {
  console.log("top right")
});
$('.bottom-left').click(function() {
  console.log("bottom left")
});
$('.bottom-right').click(function() {
  console.log("bottom right")
});
#circle-container {
  width: 200px;
  height: 200px;
  position:relative;
  z-index:1;
}

.fill-circle {
  width: 190px;
  height: 190px;
  position:absolute;
  z-index:5;
  background-color:#fff;
  border-radius:190px;
  margin:5px 0px 0px 5px;
  background-image: url('https://darko.co.za/circle-fill.png');
  background-repeat:no-repeat;
}

.quarter {
  position: relative;
  width: 100px;
  height: 100px
}

.quarter-fill {
      position:absolute;
      width: 90px;
      height: 90px;
      background-color:#fff;
}

.top-left-fill {
    bottom:0;
    right:0;
    border-top-left-radius: 200px;
}

.top-right-fill {
  bottom: 0;
  left: 0;
  border-top-right-radius: 200px;
}

.bottom-left-fill {
  top: 0;
  right: 0;
  border-bottom-left-radius: 200px;
}

.bottom-right-fill {
  top: 0;
  left: 0;
  border-bottom-right-radius: 200px;
}

.top-left {
  border-top-left-radius: 200px;
  background: #1fb14e;
  float: left
}

.top-right {
  border-top-right-radius: 200px;
  background: #1ba8e0;
  float: right
}

.bottom-left {
  border-bottom-left-radius: 200px;
  background: #fecc0b;
  float: left
}

.bottom-right {
  border-bottom-right-radius: 200px;
  background: #de232c;
  float: right
}
<div id="circle-container">
  <div class="quarter top-left">
    <div class="quarter-fill top-left-fill"></div>
  </div>
  <div class="quarter top-right">
        <div class="quarter-fill top-right-fill"></div>
  </div>
  <div class="quarter bottom-left">
        <div class="quarter-fill bottom-left-fill"></div>
  </div>
  <div class="quarter bottom-right">
        <div class="quarter-fill bottom-right-fill"></div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
Ron Nabuurs
  • 1,528
  • 11
  • 29