Square And Cube Root Calculator

Square and Cube root calculator

Square And Cube Root Calculator

Hello Friends I Am Jatin Poriya. This Is cube root and square root calculator. With its help you can easily extract square root and Cube root.

HTML Code:

 <html>
<head>
<title>INTERESTING Code Plus</title>
</head>
<body>
  

	<div class="container">

		

		<fieldset class="container">
		
		
		  
		  <form name="calculator">

			<input placeholder="Enter numer" id="n1" type="text" name="text" class="number" contenteditablen/><br>
			<select class="root" id="operator">
			<option value="Sqaure">Square Root</option>
			<option selected="" value="Cube">Cube Root</option>
			</select>
			 <br />
			<input class="find" id="btn1" onclick="check();" type="button" value="Find" /><br /><br />
			<p id="result"></p>

	   <input id="display" type="text" name="display" contenteditable>
	 

	   

	   
	   <br>
	   <input class="button digits" type="button" value="7" onclick="calculator.display.value +='7'">
	   <input class="button digits" type="button" value="8" onclick="calculator.display.value +='8'">
	   <input class="button digits" type="button" value="9" onclick="calculator.display.value +='9'">
	   <input class="button mathbuttons" type="button" value="/" onclick="calculator.display.value +='/'">
	
		<br>
		
		
		<input class="button digits" type="button" value="4" onclick="calculator.display.value +='4'">
	   <input class="button digits" type="button" value="5" onclick="calculator.display.value +='5'">
	   <input class="button digits" type="button" value="6" onclick="calculator.display.value +='6'">
	   
		<input class="button mathbuttons" type="button" value="-" onclick="calculator.display.value +='-'">
		<br>
		
		
		<input class="button digits" type="button" value="1" onclick="calculator.display.value +='1'">
	   <input class="button digits" type="button" value="2" onclick="calculator.display.value +='2'">
	   <input class="button digits" type="button" value="3" onclick="calculator.display.value +='3'">
	   
		<input class="button mathbuttons" type="button" value="X" onclick="calculator.display.value +='*'">
		<br>
	   
		<input class="button digits" type="button" value="." onclick="calculator.display.value +='.'">
	  <input class="button digits" type="button" value="0" onclick="calculator.display.value +='0'">
	  <input class="plus" type="button" value="+" onclick="calculator.display.value +='+'">
		
		<br>
		<input id="clearButton" class="button" type="button" value="C" onclick="calculator.display.value =''">
		<input class="button mathbuttons" type="button" value="=" onclick="calculator.display.value = eval(calculator.display.value)">
	 
		</form>
		</fieldset>
		</div>

<script type="text/javascript">
function check(){
//All Variables
var num = parseInt(document.getElementById("n1").value);
var oper = document.getElementById("operator").value;

//If Statements
if(oper === "Sqaure"){
document.getElementById("result").innerHTML = "The square root of " + num + " is " + Math.sqrt(num);
}
if(oper === "Cube"){
document.getElementById("result").innerHTML = "The cube root of " + num + " is " + Math.cbrt(num);
}
}
</script>
</body>
</html>

CSS Code:

  
body {
	background: url(abc.jpg);
	background-color: #6e6e6e;
	font-family: Tahoma;
}

.container {
	display: flex;
	align-items: center;
	justify-content: center;
	
}

#display {
	display: block;
	margin: 15px auto;
	height: 42px;
	width: 174px;
	padding: 0 10px;
	border-radius: 4px;
	border-top: 2px solid #C1C1C1;
	border-right: 2px solid #C1C1C1;
	border-bottom: 2px solid #FFF;
	border-left: 2px solid #FFF;
	background-color: #FFF;
	box-shadow: inset 0px 0px 10px #030303, inset 0px -20px 1px rgba(150, 150, 150, .2);
	font-size: 28px;
	color: #666;
	text-align: right;
	font-weight: 400;
}

.button {
	display: inline-block;
	margin: 2px;
	width: 42px;
	height: 42px;
	font-size: 16px;
	font-weight: bold;
	border-radius: 4px;
}

.mathButtons {
	margin: 2px 2px 6px 2px;
	color: #FFF;
	text-shadow: -1px -1px 0px #44006F;
	background-color: #434343;
	border-top: 2px solid #C1C1C1;
	border-right: 2px solid #C1C1C1;
	border-bottom: 2px solid #181818;
	border-left: 2px solid #181818;
	box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #2E2E2E;
}
.plus
{
	width: 92px;
	height: 40px;
	margin: 2px 2px 6px 2px;
	color: #FFF;
	text-shadow: -1px -1px 0px #44006F;
	background-color: #434343;
	border-top: 2px solid #C1C1C1;
	border-right: 2px solid #C1C1C1;
	border-bottom: 2px solid #181818;
	border-left: 2px solid #181818;
	box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #2E2E2E;
}


.digits {
	color: #181818;
	text-shadow: 1px 1px 0px #FFF;
	background-color: #EBEBEB;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	border-bottom: 2px solid #C1C1C1;
	border-left: 2px solid #C1C1C1;
	border-radius: 4px;
	box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #DCDCDC;
}

.digits:hover,
.mathButtons:hover,
.plus:hover,
#clearButton:hover {
	background-color: #FFBA75;
	box-shadow: 0px 0px 2px #FFBA75, inset 0px -20px 1px #FF8000;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
	border-bottom: 2px solid #AE5700;
	border-left: 2px solid #AE5700;
}

#clearButton {
	color: #FFF;
	text-shadow: -1px -1px 0px #44006F;
	background-color: #D20000;
	border-top: 2px solid #FF8484;
	border-right: 2px solid #FF8484;
	border-bottom: 2px solid #800000;
	border-left: 2px solid #800000;
	box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #B00000;
}


.number
{
	width: 90%;
    height: 30px;
    padding: 0px 5px ;
	position: relative;
	margin: 20px auto;
	box-shadow: 0 0 7px rgba(194, 0, 219, 0.726);
}

.number:hover
{
	background-color: rgb(224, 224, 224);
}

.root
{
	display: flex;
    width: 90%;
	height: 30px;
	padding: 0px 5px ;
	cursor: pointer;
	color: #7b7b7;
	box-shadow: 0 0 7px rgba(194, 0, 219, 0.726);
}

.root:hover, .root:focus
{
	color: rgba(102, 0, 219, 0.726);
	background-color: rgb(224, 224, 224);
	border-color: blue;
}

.find
{
	background-color: rgba(102, 0, 219, 0.726);
    color: rgb(224, 224, 224);
	width: 40%;
	height: 30px;
	box-shadow: 0 0 7px rgba(194, 0, 219, 0.726);
}
.find:hover
{
	background-color: rgba(194, 0, 219, 0.726);
}

INTERESTING Code

Square And Cube Root Calculator

Square And Cube Root Calculator

Post a Comment

0 Comments

Popular Posts

Tags

Labels

INTERESTING Code

Contact Form

Menu Footer Widget

INTERESTING Code

Square And Cube Root Calculator

Square And Cube Root Calculator

Post a Comment

0 Comments

Social Media

Popular Posts

Tags

Labels

INTERESTING Code

Contact Form

Menu Footer Widget