From 2dd935f607512e87f355bff37abbe5db67aaebb2 Mon Sep 17 00:00:00 2001 From: Donna Murphy Date: Wed, 17 Mar 2021 18:40:00 -0400 Subject: [PATCH] calculator --- scientific.css | 70 ++++++++++++++++++++++++++++++++++++++++++++++++ scientific.html | 69 +++++++++++++++++++++++++++++++++++++++++++++++ standard.css | 71 +++++++++++++++++++++++++++++++++++++++++++++++++ standard.html | 56 ++++++++++++++++++++++++++++++++++++++ standard.js | 43 ++++++++++++++++++++++++++++++ 5 files changed, 309 insertions(+) create mode 100644 scientific.css create mode 100644 scientific.html create mode 100644 standard.css create mode 100644 standard.html create mode 100644 standard.js diff --git a/scientific.css b/scientific.css new file mode 100644 index 0000000..84071f1 --- /dev/null +++ b/scientific.css @@ -0,0 +1,70 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + font-family:Georgia; + font-size: 1rem; + font-weight: 300; +} +.container{ + display: grid; + justify-content: center; + align-content: center; + margin-top: 4rem; +} +.calculator { + display:inline-grid; + border-color: black; + background-color: white; + border-style: solid; + text-justify: auto; + justify-content:space-around; +} +input{ + background-color: lightgray; + display:flex; + padding:10px; + margin: 30px 10px 0px 10px; + border-radius:12px; + min-height: 4rem; + margin-bottom: 1rem; + text-justify: right; + text-align: right; +} +button { + /*padding: 15px 40px; + /* padding: 1rem 2.5rem; */ + font-size: 20px; + cursor: pointer; + text-align: none; + text-decoration: none; + outline: none; + color: black; + border: groove ; + border-radius:20px; + margin: 10px 10px; + width: 90px; + height: 60px; + +} +.numbers { + background-color: #f1f3f4; +} +.symbols { + background-color: lightgray; +} +.equalsign { + background-color: #4285F4; + } +#AC { + padding: 15px 36px; +} +#Rad { + width: 205px; + } +button:hover { + background-color: rgb(63, 207, 171); + } + diff --git a/scientific.html b/scientific.html new file mode 100644 index 0000000..d3db76b --- /dev/null +++ b/scientific.html @@ -0,0 +1,69 @@ + + + + + + + Scientific Calculator + + + +
+
+ +
+
+ + + + + + +
+
+ + + + + + + +
+
+ + + + + + + +
+
+ + + + + + + +
+
+ + + + + + + +
+
+
+
+ + + + \ No newline at end of file diff --git a/standard.css b/standard.css new file mode 100644 index 0000000..00680b2 --- /dev/null +++ b/standard.css @@ -0,0 +1,71 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + font-family:Georgia; + font-size: 1rem; + font-weight: 300; +} +.container{ + display: grid; + justify-content: center; + align-content: center; + margin-top: 4rem; +} +.calculator { + display:inline-grid; + border-color: black; + background-color: white; + border-style: solid; + text-justify: auto; + justify-content:space-around; +} +input{ + background-color: lightgray; + display:flex; + padding:10px; + margin: 30px 10px 0px 10px; + border-radius:8px; + min-height: 4rem; + margin-bottom: 1rem; + text-justify: right; + text-align: right; + } + + button { + /* padding: 20px 40px; + /* padding: 1rem 2.5rem; */ + font-size: 30px; + cursor: grab; + text-align: center; + text-decoration: none; + outline: none; + color: black; + border: solid groove; + border-radius: 25px; + margin: 5px 9px; + width: 70px; + height: 60px; +} + +.numbers { + background-color: #f1f3f4; +} + +.symbols { + background-color: lightgray; +} + +.equalsign { + background-color: #4285F4; +} + +#AC { + padding: 1px +} + +button:hover { + background-color: rgb(63, 207, 171); + } \ No newline at end of file diff --git a/standard.html b/standard.html new file mode 100644 index 0000000..4ed4ae7 --- /dev/null +++ b/standard.html @@ -0,0 +1,56 @@ + + + + + + + Standard Calculator + + + + +
+
+ +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+
+
+ + + + \ No newline at end of file diff --git a/standard.js b/standard.js new file mode 100644 index 0000000..ad1bb81 --- /dev/null +++ b/standard.js @@ -0,0 +1,43 @@ +// let text=document.getElementById('calfield').value; + +function clk(val){ + + document.getElementById('calfield').value=document.getElementById('calfield').value+val; +} +function clrdisp(){ + document.getElementById('calfield').value=" " +} + +function eql(){ + var text=document.getElementById('calfield').value; + var result=eval(text); + document.getElementById('calfield').value=result; + +} +function cos(){ + var text=document.getElementById('calfield').value; + var result=Math.cos(text); + document.getElementById('calfield').value=result; +} +function sin(){ + var text=document.getElementById('calfield').value; + var result=Math.sin(text); + document.getElementById('calfield').value=result; +} +function test(val){ + var text=document.getElementById('calfield').value; + var newWord="Math." + val + (text); + var result=newWord; + document.getElementById('calfield').value=result; + console.log(newWord); + + +} + + + + + +// function percentage(num, per){ +// var text=document.getElementById('calfield') (num/100)*per; +// var result=