Telerik Academy-JS

checks for given point (x, y) if it is within the circle K( (1,1), 3) and out of the rectangle R(top=1, left=-1, width=6, height=2).

HTML

<body>
     <div id="wrapper">
	<form method="post" name="form">
		<span>Insert X=</span><input  type="text" name="x" maxlength="512" id="x" /><br />
		<span>Insert Y=</span><input  type="text" name="y" maxlength="512" id="y" />
		<input type="button" value="Point position" onclick="myFunc()"/>
	</form>
         <div id="circle"><div id="rectagle"></div ></div>
         <div id="resultDiv"></div>
</div>
    </body>

CSS

body {
    background-color:#262b55
}
div#wrapper {
    background-color:#428951;
    width:300px;
    height:300px;
    border:3px solid black;
   padding-top:45px;
   padding-left:20px;
}
div#circle{
    width: 100px;
   height: 100px;
   background: blue; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
   margin-top:50px;
}
div#resultDiv {
    text-align:right;
    color:white;
    background-color:black;

   
}
div#rectagle {
     width: 140px; 
   height: 40px;
   background: #ffd800;
   position:absolute;
   top:220px;
   left:45px;
   
}
span#result {
    display:inline-block;
    padding-top:25px;
}

JavaScript

var myFunc = function myFunc() {
            var inputX = document.getElementById("x").value-0;
            var inputY = document.getElementById("y").value-0;

            var boolInsideC = (((inputX - 1) * (inputX - 1)) + ((inputY - 1) * (inputY - 1))) <= 9;
            var boolInsideR = ((inputX >= (-1)) && (inputX <= 5)) && ((inputY <= 1) && (inputY >= (-1)));

            var resultC = boolInsideC ? "The point is within the circle and " : "The point is out of the circle and ";
            var resultR = boolInsideR ? "inside the rectangle R(top=1, left=-1, width=6, height=2)." : "out of the Rectagle R(top=1, left=-1, width=6, height=2).";
            document.getElementById("resultDiv").innerHTML = (resultC + resultR).toString();
            
        }