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 sorolrekha(A,B){
			/********
			This Function Takes:-
			  ____________________________
			  |	Argument	|	Type	 |
			  """"""""""""""""""""""""""""
			  |	A			|	Array(2) |
			  |	B			|	Array(2) |
			  """"""""""""""""""""""""""""
			This Function Returns:-
			  A line connecting two points "A" and "B"
			********/
			
			
			/* Algebra to calculate equation of a line:-
			
				(x-x1)/(x1-x2)=(y-y1)/(y1-y2)
				..........  after doing some math, finally we get:-  ..........
				=> y = (((x-x1)*(y1-y2))/(x1-x2))+y1;
			*/
			var x1=parseInt(A[0]), x2=parseInt(B[0]), y1=parseInt(A[1]), y2=parseInt(B[1]);
			//Let's draw the polar dots
			markA=document.createElement("div");markA.style.left=x1+"px";markA.style.bottom=y1+"px";markA.classList.add("point");
			markB=document.createElement("div");markB.style.left=x2+"px";markB.style.bottom=y2+"px";markB.classList.add("point");
			document.querySelector(".o_o").appendChild(markA);
			document.querySelector(".o_o").appendChild(markB);
			
			//Determine the larger value of "x" between "x1" and "x2"
			if (x1>x2){x_large=x1;x_small=x2;}
			else {x_large=x2;x_small=x1;}

			//And the larger value of "y" between "y1" and "y2"
			if (y1>y2){y_large=y1;y_small=y2;}
			else {y_large=y2;y_small=y1;}
			
			//And now, draw the line with "x" axis as unit
			for (i=x_small;i<=x_large;i++){
				x=i;
				y=(((x-x1)*(y1-y2))/(x1-x2))+y1;
				//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...

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%;
}