diff --git a/app/calculator/audio.mp3 b/app/calculator/audio.mp3 new file mode 100644 index 0000000..5d83bde Binary files /dev/null and b/app/calculator/audio.mp3 differ diff --git a/app/calculator/index.html b/app/calculator/index.html new file mode 100644 index 0000000..22ffa4f --- /dev/null +++ b/app/calculator/index.html @@ -0,0 +1,54 @@ + + + + + + Calculator + + + +
+
+
+
0
+
+
+
+
AC
+
(
+
)
+
÷
+
+
+
7
+
8
+
9
+
×
+
+
+
4
+
5
+
6
+
-
+
+
+
1
+
2
+
3
+
+
+
+
+
0
+
.
+
=
+
+
+ +
+ + + + \ No newline at end of file diff --git a/app/calculator/index.js b/app/calculator/index.js new file mode 100644 index 0000000..3f8e387 --- /dev/null +++ b/app/calculator/index.js @@ -0,0 +1,34 @@ +var inputTxt = '' +var outputTxt = '' +//add event listening +$('.line-item').on('click',e=>{ + // console.log('here') + playSoud() + var key = e.target.dataset.key + console.log(key) + switch(key){ + case '=': + try{ + outputTxt = eval(inputTxt) + }catch(e){ + outputTxt = 'error' + } + break; + case 'AC': + //clear all inputs and outputs + inputTxt = '' + outputTxt = '0' + break; + default: + inputTxt += key + } + //update the view + updateView() +}) +function playSoud(){ + $('audio')[0].play() +} +function updateView(){ + $('.input-box').html(inputTxt) + $('.output-box').html(outputTxt) +} \ No newline at end of file diff --git a/app/calculator/sound.mp3 b/app/calculator/sound.mp3 new file mode 100644 index 0000000..5d83bde Binary files /dev/null and b/app/calculator/sound.mp3 differ diff --git a/app/calculator/style.css b/app/calculator/style.css new file mode 100644 index 0000000..3cec897 --- /dev/null +++ b/app/calculator/style.css @@ -0,0 +1,84 @@ +@charset "utf-8"; +body,a,h1,h2,h3,h4,h5,h6,p,div,em,ul,li { + font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; +} + +html { + height: 100%; +} + +/*去除ul中li左边的圆点*/ +ul{ + list-style: none; + padding: 0; + margin: 0; +} +body { + padding: 0; + margin: 0; + width: 100%; + background-color: black; + overflow: hidden; +} +.container{ + background-color: black; + width: 350px; + padding:20px; +} +.screen-box{ + text-align: right; + color:white; +} +.input-box{ + font-size:30px; + height:40px; + line-height: 40px; + overflow: hidden; +} +.output-box{ + font-size:48px; + height:56px; + line-height: 56px; + overflow: hidden; +} +/* keyboard style */ +.line{ + display: flex; + justify-content: space-between; + text-align: center; + margin-bottom:10px; +} +.line > div{ + width: 80px; + height: 80px; + line-height: 80px; + text-align: center; + color: white; + border-radius: 80px; + font-size: 25px; + cursor: pointer; +} +[data-key="0"]{ + width: 168px !important; +} +.grey-white{ + background-color: #a5a5a5; + color:black; +} +.grey-white:hover{ + background-color: #cccaca; +} +.orange{ + background-color: #ff9f0c; + color:white; +} +.orange:hover{ + background-color: #ffbb54; +} +.grey-black{ + background-color: #333333; + color:white; +} +.grey-black:hover{ + background-color: #747373; +} \ No newline at end of file diff --git a/demo.html b/demo.html index 07f6ebf..8130dab 100644 --- a/demo.html +++ b/demo.html @@ -45,12 +45,14 @@
GameCenter
-
+
Calendar
- +
+ +
Calculator
+
iCloud
diff --git a/img/icon/calculator.png b/img/icon/calculator.png new file mode 100644 index 0000000..9a2df64 Binary files /dev/null and b/img/icon/calculator.png differ