From 321dd1f25767f4726168bb2440c186287d57e5d5 Mon Sep 17 00:00:00 2001 From: roman9803640949 Date: Thu, 24 Oct 2019 10:05:55 +0545 Subject: [PATCH] simple calculator with styling --- simpleCalculator/calculator.html | 54 ++++++++++++++++++++++++ simpleCalculator/style.css | 71 ++++++++++++++++++++++++++++++++ 2 files changed, 125 insertions(+) create mode 100644 simpleCalculator/calculator.html create mode 100644 simpleCalculator/style.css diff --git a/simpleCalculator/calculator.html b/simpleCalculator/calculator.html new file mode 100644 index 0000000..91467c9 --- /dev/null +++ b/simpleCalculator/calculator.html @@ -0,0 +1,54 @@ + + + +JavaSctipt Calculator + + + + + +
+
+
+ +
+
+
+ + + + +
+ +
+ + + + +
+ +
+ + + + +
+ +
+ + + + +
+
+ +
+
+ + + \ No newline at end of file diff --git a/simpleCalculator/style.css b/simpleCalculator/style.css new file mode 100644 index 0000000..4b5ec9e --- /dev/null +++ b/simpleCalculator/style.css @@ -0,0 +1,71 @@ +body, html { + background: #ECEDEF; + margin: 0; + padding: 0; +} + +.container { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: #fff; + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.2); + border-radius: 14px; + padding-bottom: 20px; + width: 320px; + +} +.display { + width: 100%; + height: 60px; + padding: 40px 0; + background: #FF0509; + border-top-left-radius: 14px; + border-top-right-radius: 14px; +} +.buttons { + padding: 20px 20px 0 20px; +} +.row { + width: 280px; + float: left; +} +input[type=button] { + width: 60px; + height: 60px; + float: left; + padding: 0; + margin: 5px; + box-sizing: border-box; + background: #ecedef; + border: none; + font-size: 30px; + line-height: 30px; + border-radius: 50%; + font-weight: 700; + color: #5E5858; + cursor: pointer; + +} +input[type=text] { + width: 270px; + height: 60px; + float: left; + padding: 0; + box-sizing: border-box; + border: none; + background: none; + color: #ffffff; + text-align: right; + font-weight: 700; + font-size: 60px; + line-height: 60px; + margin: 0 25px; + +} +.red { + background: #FF0509 !important; + color: #ffffff !important; + +} \ No newline at end of file