PHP WITH PRACTICAL: beautiful calculator

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="master1.css">
</head>
<body>
<div class="bg">

</div>
<div class="main">
<form class="" action="index.html" method="post">
<input type="text" disabled class="textview" name="textview" value="">
</form>
<table>
<tr>
<td><input class="button" type="button" value="C" onclick="clean()"/></td>
<td><input class="button" type="button" value="<" onclick="back()"/></td>
<td><input class="button" type="button" value="/" onclick="insert('/')"/></td>
<td><input class="button" type="button" value="X" onclick="insert('*')"/></td>
</tr>
<tr>
<td><input class="button" type="button" value="7" onclick="insert(7)"/></td>
<td><input class="button" type="button" value="8" onclick="insert(8)"/></td>
<td><input class="button" type="button" value="9" onclick="insert(9)"/></td>
<td><input class="button" type="button" value="-" onclick="insert('-')"/></td>
</tr>
<tr>
<td><input class="button" type="button" value="4" onclick="insert(4)"/></td>
<td><input class="button" type="button" value="5" onclick="insert(5)"/></td>
<td><input class="button" type="button" value="6" onclick="insert(6)"/></td>
<td><input class="button" type="button" value="+" onclick="insert('+')"/></td>
</tr>
<tr>
<td><input class="button" type="button" value="1" onclick="insert(1)"/></td>
<td><input class="button" type="button" value="2" onclick="insert(2)"/></td>
<td><input class="button" type="button" value="3" onclick="insert(3)"/></td>
<td rowspan="2"><input style="height: 110px;" class="button" type="button" value="=" onclick="equal()"/></td>
</tr>
<tr>
<td colspan="2" ><input style="width:110px;" class="button" type="button" value="0" onclick="insert(0)"/></td>
<td><input class="button" type="button" value="." onclick="insert('.')"/></td>
</tr>
</table>
</div>
<div class="bottom-nav">
<ul>
<li><span onclick="fta()" class="ta"></span></li>
<li><span onclick="ftb()"class="tb"></span></li>
<li><span onclick="ftc()"class="tc"></span></li>
<li><span onclick="ftd()" class="td"></span></li>
</ul>
</div>

<script type="text/javascript">
var bg = document.getElementsByClassName("bg");
var button = document.getElementsByClassName("button");
var main = document.getElementsByClassName("main");
var ta = document.getElementsByClassName("ta");
var tb = document.getElementsByClassName("tb");
var tc = document.getElementsByClassName("tc");
var td = document.getElementsByClassName("td");

function fta() {
bg[0].style.background = "linear-gradient(#6e05ff, #100417)";
main[0].style.backgroundColor = "#1a0430";
for(i = 0 ;i<button.length;i++) {
button[i].setAttribute("class","button");
}
}
function ftb() {
bg[0].style.background = "linear-gradient(rgb(16, 190, 16), rgb(0, 0, 0))";
main[0].style.backgroundColor = "rgb(3, 126, 3)";
for(i = 0 ;i<button.length;i++) {
button[i].setAttribute("class","button buttonb");
}
}
function ftc() {
bg[0].style.background = "linear-gradient(rgb(238, 45, 45), rgb(16, 4, 23))";
main[0].style.backgroundColor = "rgb(238, 45, 45)";
for(i = 0 ;i<button.length;i++) {
button[i].setAttribute("class","button buttonc");
}
}
function ftd() {
bg[0].style.background = "linear-gradient(#3344ff, #000000)";
main[0].style.backgroundColor = "#3344ff";
for(i = 0 ;i<button.length;i++) {
button[i].setAttribute("class","button buttond");
}
}
function insert(num) {
document.forms[0].elements.textview.value = document.forms[0].elements.textview.value + num;
}
function equal() {
var exp = document.forms[0].elements.textview.value;
if(exp) {
exp = eval(document.forms[0].elements.textview.value);
document.forms[0].elements.textview.value = exp;
}
}
function clean() {
document.forms[0].elements.textview.value = "";
}
function back() {
var exp = document.forms[0].elements.textview.value;
document.forms[0].elements.textview.value = exp.substring(0,exp.length-1);
}
</script>
<style>
* {
padding: 0px;
margin: 0px;
user-select: none;
}

.button {
width: 50px;
height: 50px;
font-size: 25px;
margin: 4px;
border: none;
background-color: #23133a;
color: #fff;
cursor: pointer;
border-radius: 45px;
box-shadow: -2px 3px 7px black;
}

.buttona {
width: 50px;
height: 50px;
font-size: 25px;
margin: 4px;
border: none;
background-color: #13233f;
color: #fff;
cursor: pointer;
border-radius: 45px;
box-shadow: -2px 3px 7px black;
}

.buttonb {
width: 50px;
height: 50px;
font-size: 25px;
margin: 4px;
border: none;
background-color: #031d03;
color: #fff;
cursor: pointer;
border-radius: 45px;
box-shadow: -2px 3px 7px black;
}

.buttonc {
width: 50px;
height: 50px;
font-size: 25px;
margin: 4px;
border: none;
background-color: #580f0f;
color: #fff;
cursor: pointer;
border-radius: 45px;
box-shadow: -2px 3px 7px black;
}

.buttond {
width: 50px;
height: 50px;
font-size: 25px;
margin: 4px;
border: none;
background-color: #192287;
color: #fff;
cursor: pointer;
border-radius: 45px;
box-shadow: -2px 3px 7px black;
}

.textview {
width: 205px;
margin: 5px;
font-size: 25px;
border: none;
font-weight: bold;
color: #1a0430;
padding: 10px;
border-radius: 15px;
box-shadow: inset 1px 1px 10px 1px black;
}

.main {
position: absolute;
background: #1a0430;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
border-radius: 15px;
}

.bg {
background: linear-gradient(#6e05ff, #100417);
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
}

.button:hover {
background-color: #593f8e;
box-shadow: -2px 3px 7px black;
}

.buttonb:hover {
background-color: #094e09;
box-shadow: -2px 3px 7px black;
}

.buttonc:hover {
background-color: #c32b2b;
box-shadow: -2px 3px 7px black;
}

.buttond:hover {
background-color: #2732af;
box-shadow: -2px 3px 7px black;
}

.button:focus {
outline: none;
}

.bottom-nav {
position: absolute;
top: 97%;
left: 50%;
transform: translate(-50%,-97%);
}
.bottom-nav span {
display: block;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #fff;
}
.bottom-nav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
.bottom-nav li {
display: inline-block;
margin: 5px;
}
.bottom-nav .ta {
background-color: #235;
}
.bottom-nav .tb {
background-color: #050;
}
.bottom-nav .tc {
background-color: #f00;
}
.bottom-nav .td {
background-color: #34f;
}
.bottom-nav span:hover {
background-color: #0000008c;
}
</style>
</body>

PHP WITH PRACTICAL

Thursday, December 6, 2018

beautiful calculator

No comments:

Post a Comment

form validation

Labels