H1K0-dev/personal-home-calc
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New design

Browse Source
This commit is contained in:
Masahiko AMANO 2020-09-26 15:16:09 +03:00
parent 0e9cf0e6de
commit d015f8d511
3 changed files with 163 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
index.php
View File

@ -18,180 +18,45 @@
<head> <head>
<title>Personal Home Calc</title> <title>Personal Home Calc</title>
<link rel="shortcut icon" href="favicon.png"> <link rel="shortcut icon" href="favicon.png">
<style> <link rel="stylesheet" href="style.css">
html,body{
margin: 0;
padding: 0;
background: #111;
font-family: "Comic Sans MS";
overflow: hidden;
}
#prompt{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 18%;
margin-bottom: 5vh;
background: #222;
border: 0;
box-shadow: 0 2vh 2vh #060606;
font-size: 50px;
color: #eee;
text-shadow: 0 0 5px white;
text-align: center;
}
.hidd{
display: none;
}
.row{
margin: 3% 0;
display: flex;
justify-content: space-around;
}
.btn{
display: flex;
justify-content: center;
align-items: center;
width: 20%;
height: 20%;
margin-bottom: 2px;
border: 0;
border-radius: 10px;
font-size: 60px;
color: #eee;
cursor: pointer;
}
.btn:hover{
box-shadow: 0 0 10px white;
}
.btn1{
background: #EF3038;
}
.btn2{
background: #0047AB;
}
.btn1:active{
background: #77181C;
color: #aaa;
}
.btn2:active{
background: #002456;
color: #aaa;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script> <script src="script.js"></script>
var p1='0';
var tp='';
var p2='0';
var sol='0';
var pmt='0';
var allow=true;
function zap() {
pmt+='=';
document.getElementById('prompt').innerHTML=pmt;
var number1=p1;
var oper=tp;
var number2=p2;
$.ajax({
url: "calc.php",
type: "GET",
data: {'number1': number1, 'oper': oper, 'number2': number2},
dataType: "json",
success: function(response) {
if (response.rcode=="0") {
alert(response.result)
cle()
} else {
sol=response.result;
pmt+=sol;
document.getElementById('prompt').innerHTML=pmt;
allow=false;
p1='0';
tp='';
p2='0';
}
}
});
}
function numb(num) {
if (Number(p1)==0 && (tp=='')) {
p1=num;
pmt=String(p1);
document.getElementById('prompt').innerHTML=pmt;
} else if ((Number(p1)>0) && (tp=='')) {
p1+=num;
pmt=String(p1);
document.getElementById('prompt').innerHTML=pmt;
} else if (Number(p2)==0 && tp!='') {
p2=num;
pmt=String(p1)+tp+String(p2);
document.getElementById('prompt').innerHTML=pmt;
} else if (Number(p2)>0 && tp!='') {
p2+=num;
pmt=String(p1)+tp+String(p2);
document.getElementById('prompt').innerHTML=pmt;
}
}
function operation(op) {
if (tp!='') {alert('За раз можно использовать только одну операцию!');return;}
if (!allow) {
p1=Number(sol);
pmt=sol;
allow=true;
}
// if (p1=='0' && p2=='0' && tp=='' && Number(document.getElementById('prompt').value)>0) {
// p1=document.getElementById('prompt').innerHTML
// }
tp=op;
pmt+=tp;
document.getElementById('prompt').innerHTML=pmt;
}
function cle() {
p1='0';
tp='';
p2='0';
sol='0';
pmt='0';
allow=true;
numb(0);
}
</script>
</head> </head>
<body> <body>
<div class="calc">
<div id="prompt">0</div> <div id="prompt">0</div>
<div class="row"> <div class="row">
<?php <?php
for ($i=1;$i<=3;$i++) { for ($i=1;$i<=3;$i++) {
createButton($i,'btn1',"numb('".$i."')",$i); createButton($i,'dig',"numb('".$i."')",$i);
} }
createButton("+",'btn2',"operation('+')","Сложение"); createButton("+",'oper',"oper('+')","Сложение");
?> ?>
</div> </div>
<div class="row"> <div class="row">
<?php <?php
for ($i=4;$i<=6;$i++) { for ($i=4;$i<=6;$i++) {
createButton($i,'btn1',"numb('".$i."')",$i); createButton($i,'dig',"numb('".$i."')",$i);
} }
createButton("-",'btn2',"operation('-')","Вычитание"); createButton("-",'oper',"oper('-')","Вычитание");
?> ?>
</div> </div>
<div class="row"> <div class="row">
<?php <?php
for ($i=7;$i<=9;$i++) { for ($i=7;$i<=9;$i++) {
createButton($i,'btn1',"numb('".$i."')",$i); createButton($i,'dig',"numb('".$i."')",$i);
} }
createButton("*",'btn2',"operation('*')","Умножение"); createButton("*",'oper',"oper('*')","Умножение");
?> ?>
</div> </div>
<div class="row"> <div class="row">
<?php <?php
createButton("0",'btn1',"numb('0')",0); createButton("AC",'clr',"clr()","Очистить");
createButton("AC",'btn2',"cle()","Очистить"); createButton("0",'dig',"numb('0')",0);
createButton("=",'btn2',"zap()","Считать"); createButton("=",'oper enter',"calc()","Считать");
createButton("/",'btn2',"operation('/')","Деление"); createButton("/",'oper',"oper('/')","Деление");
?> ?>
</div> </div>
</div>
</body> </body>
</html> </html>

75
script.js Normal file
View File

@ -0,0 +1,75 @@
var p1='0';
var tp='';
var p2='0';
var sol='0';
var pmt='0';
var allow=true;
function calc() {
pmt+='=';
document.getElementById('prompt').innerHTML=pmt;
var number1=p1;
var oper=tp;
var number2=p2;
$.ajax({
url: "calc.php",
type: "GET",
data: {'number1': number1, 'oper': oper, 'number2': number2},
dataType: "json",
success: function(response) {
if (response.rcode=="0") {
alert(response.result)
cle()
} else {
sol=response.result;
pmt+=sol;
document.getElementById('prompt').innerHTML=pmt;
allow=false;
p1='0';
tp='';
p2='0';
}
}
});
}
function numb(num) {
if (Number(p1)==0 && (tp=='')) {
p1=num;
pmt=String(p1);
document.getElementById('prompt').innerHTML=pmt;
} else if ((Number(p1)>0) && (tp=='')) {
p1+=num;
pmt=String(p1);
document.getElementById('prompt').innerHTML=pmt;
} else if (Number(p2)==0 && tp!='') {
p2=num;
pmt=String(p1)+tp+String(p2);
document.getElementById('prompt').innerHTML=pmt;
} else if (Number(p2)>0 && tp!='') {
p2+=num;
pmt=String(p1)+tp+String(p2);
document.getElementById('prompt').innerHTML=pmt;
}
}
function oper(op) {
if (tp!='') {alert('За раз можно использовать только одну операцию!');return;}
if (!allow) {
p1=Number(sol);
pmt=sol;
allow=true;
}
// if (p1=='0' && p2=='0' && tp=='' && Number(document.getElementById('prompt').value)>0) {
// p1=document.getElementById('prompt').innerHTML
// }
tp=op;
pmt+=tp;
document.getElementById('prompt').innerHTML=pmt;
}
function clr() {
p1='0';
tp='';
p2='0';
sol='0';
pmt='0';
allow=true;
numb(0);
}

73
style.css Normal file
View File

@ -0,0 +1,73 @@
body{
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background: #4cdbc4;
display: flex;
justify-content: center;
align-items: center;
}
.calc{
width: 600px;
height: 600px;
padding: 3vw;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
background: #324a5e;
font-family: "Comic Sans MS";
/*overflow: hidden;*/
}
#prompt{
display: flex;
justify-content: flex-end;
align-items: center;
padding: 0 2%;
box-sizing: border-box;
margin-bottom: 5vh;
width: 100%;
height: 18%;
background: #e6e9ee;
border: 0;
font-size: 60px;
color: #324a5e;
text-shadow: 0 0 5px white;
overflow: hidden;
}
.hidd{
display: none;
}
.row{
width: 96%;
display: flex;
justify-content: space-between;
}
.btn{
display: flex;
justify-content: center;
align-items: center;
width: 20%;
height: 12vh;
margin-bottom: 2px;
border: 0;
border-radius: 10px;
font-size: 60px;
color: #293c4d;
background: white;
cursor: pointer;
}
.btn:hover{
box-shadow: 0 0 10px white;
}
.btn:active{
box-shadow: 0 0 20px white;
}
.btn.oper{
background: #f9b54c;
}
.btn.clr{
background: #fd8469;
}