css
|_ style.css
php
|_ action.php
index.htmlbody {
background-color: #FF9E0D;
}
.gui form {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 5px 5px 10px 5px;
}
.gui {
margin: 0 auto;
background-color: #9dd2ea;
width: 100%;
max-width: 295px;
border-radius: 4px;
}
.flex-block {
display: flex;
margin-top: calc(50vh - 150px);
}
input {
outline: 0;
position: relative;
border: 0;
color: #495069;
background-color: #fff;
border-radius: 4px;
width: 60px;
height: 50px;
margin: 5px;
font-size: 20px;
box-shadow: 0 4px rgba(0,0,0,0.2);
}
.button:hover {
background-color: rgb(222, 237, 252);
box-shadow: 0 4px rgb(173, 188, 202);
}
.button:active {
top: 4px;
box-shadow: none;
}
.answer {
width: 100%;
font-size: 26px;
text-align: center;
background-color: #F1FAEB;
float: left;
margin-bottom: 10px;
}
.operator {
background-color: #f1ff92;
position: relative;
}
.operator:hover {
background-color: #E7F56B;
box-shadow: 0 4px #B7C259;
}
.operator:active {
top: 4px;
box-shadow: none;
}
.clear {
float: left;
position: relative;
display: block;
background-color: #ff9fa8;
}
.clear:hover {
background-color: #F297A0;
box-shadow: 0 4px #CC7F86;
}
.clear:active {
background-color: #F297A0;
box-shadow: none;
}<?php
function calculate($value)
{
return eval("return ".$value.";");
}
print(calculate($_POST["answer"]));
?><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="wrapper">
<div class="flex-block">
<div class="gui">
<form name="calc" action="../php/action.php" method="post">
<input class="answer" type="text" name="answer" size="16" autocomplete="off">
<input class="button" type="button" name="one" value="1" onclick="form.answer.value += '1'">
<input class="button" type="button" name="two" value="2" onclick="calc.answer.value += '2'">
<input class="button" type="button" name="three" value="3" onclick="calc.answer.value += '3'">
<input class="button operator" type="button" name="plus" value="+" onclick="calc.answer.value += '+'">
<input class="button" type="button" name="four" value="4" onclick="calc.answer.value += '4'">
<input class="button" type="button" name="five" value="5" onclick="calc.answer.value += '5'">
<input class="button" type="button" name="six" value="6" onclick="calc.answer.value += '6'">
<input class="button operator" type="button" name="minus" value="-" onclick="calc.answer.value += '-'">
<input class="button" type="button" name="seven" value="7" onclick="calc.answer.value += '7'">
<input class="button" type="button" name="eight" value="8" onclick="calc.answer.value += '8'">
<input class="button" type="button" name="nine" value="9" onclick="calc.answer.value += '9'">
<input class="button operator" type="button" name="times" value="x" onclick="calc.answer.value += '*'">
<input class="button clear" type="button" name="clear" value="c" onclick="calc.answer.value = ''">
<input class="button" type="button" name="zero" value="0" onclick="calc.answer.value += '0'">
<input class="button" type="submit" name="doit" value="=">
<input class="button operator" type="button" name="div" value="/" onclick="calc.answer.value += '/'">
</form>
</div>
</div>
</div>
</body>
</html><input class="answer" type="text" name="answer" size="16" autocomplete="off">
document.getElementsByName("answer")[0].value = data;
<input class="answer" type="text" name="answer" size="16" value="<?php echo (isset(($_POST["answer"] )) ? htmlspecialchars($_POST["answer"]) : '' ?>" autocomplete="off"><?php echo (isset(($_POST["answer"] )) ? htmlspecialchars($_POST["answer"]) : '' ?>$.ajax({
url: '../php/action.php',
type: 'POST',
success: function(data) {
$('.answer').test(data);
});
<?php
$result = "";
function calculate($value)
{
return eval("return ".$value.";");
}
if (isset($_POST["answer"]))
{
$result = calculate($_POST["answer"]);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="wrapper">
<div class="flex-block">
<div class="gui">
<form name="calc" method="post">
<input class="answer" type="text" name="answer" value="<?php print($result); ?>" autocomplete="off">
<input class="button" type="button" value="1" onclick="form.answer.value += '1';">
<input class="button" type="button" value="2" onclick="calc.answer.value += '2'">
<input class="button" type="button" value="3" onclick="calc.answer.value += '3'">
<input class="button operator" type="button" value="+" onclick="calc.answer.value += '+'">
<input class="button" type="button" value="4" onclick="calc.answer.value += '4'">
<input class="button" type="button" value="5" onclick="calc.answer.value += '5'">
<input class="button" type="button" value="6" onclick="calc.answer.value += '6'">
<input class="button operator" type="button" value="-" onclick="calc.answer.value += '-'">
<input class="button" type="button" value="7" onclick="calc.answer.value += '7'">
<input class="button" type="button" value="8" onclick="calc.answer.value += '8'">
<input class="button" type="button" value="9" onclick="calc.answer.value += '9'">
<input class="button operator" type="button" value="x" onclick="calc.answer.value += '*'">
<input class="button clear" type="button" name="clear" value="c" onclick="calc.answer.value = ''">
<input class="button" type="button" value="0" onclick="calc.answer.value += '0'">
<input class="button" type="submit" value="=">
<input class="button operator" type="button" value="/" onclick="calc.answer.value += '/'">
</form>
</div>
</div>
</div>
</body>
</html>
Простой
Средний
Средний
Средний