JSFiddle - React, Tailwind, and code Playground

by Arif Reza

HTML

<div class="xox"></div>
<div class="yoy"></div>
<div class="o_o">
	<div class="point1"></div>
	<div class="point2"></div>
	<script>
		function circle(C,r){
			
			var h=parseInt(C[0]),k=parseInt(C[1]);
			//Let's draw the polar dots
			markA=document.createElement("div");markA.style.left=h+"px";markA.style.bottom=k+"px";markA.classList.add("point");markA.innerHTML="C("+h+","+k+")";
			document.querySelector(".o_o").appendChild(markA);
			
			
			//And now, draw the line with "x" axis as unit
			for (i=(h-r);i<=(h+r);i++){
				x=i;
				y=k+Math.sqrt((2*h*x)+(r*r)-(x*x)-(h*h));
				//alert(x);
				markM=document.createElement("div");markM.style.left=x+"px";markM.style.bottom=y+"px";markM.classList.add("point");document.querySelector(".o_o").appendChild(markM);
			}
			for (i=(h-r);i<=(h+r);i++){
				x=i;
				y=k-Math.sqrt((2*h*x)+(r*r)-(x*x)-(h*h));
				//alert(x);
				markM=document.createElement("div");markM.style.left=x+"px";markM.style.bottom=y+"px";markM.classList.add("point");document.querySelector(".o_o").appendChild(markM);
			}
			//Draw again with "y" axis as unit
			for (i=(k-r);i<=(k+r);i++){
				y=i;
				x=h+Math.sqrt((2*k*y)+(r*r)-(y*y)-(k*k));
				markM=document.createElement("div");markM.style.left=x+"px";markM.style.bottom=y+"px";markM.classList.add("point");document.querySelector(".o_o").appendChild(markM);
			}
			for (i=(k-r);i<=(k+r);i++){
				y=i;
				x=h-Math.sqrt((2*k*y)+(r*r)-(y*y)-(k*k));
				markM=document.createElement("div");markM.style.left=x+"px";markM.style.bottom=y+"px";markM.classList.add("point");document.querySelector(".o_o").appendChild(markM);
			}
			
		}
		
		
		function showBox(){
			document.getElementsByClassName("form")[0].style.display="block";
		}
		
		function drawLine(){
			var C=new Array();var...

CSS

/* Resize Margin and Paddding */
* {margin:0px;padding:0px;}

/* Let's draw the X'OX axis */
.xox {
position:absolute;
width:500px;
left:15px;
top:200px;
height:1px;
background:black;
}
.xox:before {
content:"X'";
position:relative;
top:-7px;
left:-15px;
}
.xox:after {
content:"X";
position:relative;
top:-7px;
left:490px;
}

/* And the Y'OY axis */
.yoy {
position:absolute;
width:1px;
height:500px;
background:black;
left:200px;
top:20px;
}
.yoy:before {
content:"Y";
position:relative;
top:-20px;
left:-5px;
}
.yoy:after {
content:"Y'";
position:relative;
top:500px;
left:-17px;
}

/* The O(0,0) point */
.o_o {
position:absolute;
left:200px;
top:200px;
background:white;
width:1px;
height:1px;
}

/* Default Points */
.point {
position:absolute;
background:black;
width:1px;
height:1px;
}

.button {
text-decoration:none;
color:blue;
cursor:pointer;
border:1px solid blue;
padding:10px;
font-weight:bold;
}
.button:hover {
background:blue;
color:white;
}
.newline {
position:fixed;
left:0px;
top:300px;
}

.form {
position:fixed;
left:50%;
top:50%;
width:200px;
height:auto;
margin-left:-120px;
margin-top:-70px;
background:white;
border:2px solid blue;
padding:20px;
display:none;
}
.points {
border:1px solid blue;
padding:5px;
width:90%;
}