diff --git a/index.html b/index.html new file mode 100644 index 0000000..2f6c8f0 --- /dev/null +++ b/index.html @@ -0,0 +1,62 @@ + + + + + + + Standard Calculator + + + + +
+
+ +
+ Standard | Scientific +
+ +
+
+
0
+
+ +
+ + + + +
+ +
+ + + + +
+ +
+ + + + +
+ +
+ + + + +
+ +
+ + + + +
+
+
+ + + \ No newline at end of file diff --git a/scientific.css b/scientific.css new file mode 100644 index 0000000..39e8626 --- /dev/null +++ b/scientific.css @@ -0,0 +1,119 @@ +.sciCalcLocation { + margin: center; + display: grid; + justify-content: center; + align-content: center; + align-items: center; + min-height: 100vh; +} + +.sciCalcGrid { + height: 449px; + width: 933px; + background-color: #FFFFFF; + padding-top: 22px; + padding-right: 24px; + padding-bottom: 24px; + padding-left: 25px; + border: 1px solid #DFE1E5; + border-radius: 10px; +} + +.sciCalcSwitch { + width: 880px; + margin-bottom: 20px; + background-color: #FFFFFF; +} + +.sciCalcSwitch span { + font-size: 20px; +} + +.sciDisplay { + width: 890px; + height: 30px; + border: 1px solid #DFE1E5; + border-radius: 10px; + text-align: right; + font-size: 30px; + padding: 20px; + margin-bottom: 20px; + margin-right: 0px; +} + +button { + width: 122px; + height: 54px; + font-size: 20px; + margin-right: 9px; + margin-bottom: 12px; + border-radius: 10px; + border: .5px solid #F1F3F4; + background-color: #F1F3F4; +} + +.lastBtn { + margin-right: 0px; +} + +.grayBtn { + background-color: #DFE1E5; +} + +.radDegBtn { + background-color: #DFE1E5; +} + +#r1-1 { + width: 257px; + height: 54px; + font-size: 20px; + margin-right: 9px; + margin-bottom: 12px; + border-radius: 10px; + border: .5px solid #F1F3F4; +} + +#scientificBtn { + color: #3F48CC; +} + +#standardBtn { + text-decoration: none; + color: black; +} + +#pipe { + color: #DFE1E5; + font-weight: bold; + font-size: 22px; +} + +#xyBtnSup { + vertical-align: text-top; + font-size: 11px; +} + +#r5-6 { + color: white; + background-color: #4285F4; + font-weight: bold; +} + +#radDegPipe { + margin-left: 35px; + margin-right: 35px; + color: #8C8E91; + font-weight: none; + font-size: 22px; +} + +#radBtn { + text-decoration: none; + color: black; +} + +#degBtn { + text-decoration: none; + color: #8C8E91; +} \ No newline at end of file diff --git a/scientific.html b/scientific.html new file mode 100644 index 0000000..d8d37cb --- /dev/null +++ b/scientific.html @@ -0,0 +1,78 @@ + + + + + + + Scientific Calculator + + + + +
+
+ +
+ Standard | Scientific +
+ +
+
+
0
+
+ +
+ + + + + + +
+ +
+ + + + + + + +
+ +
+ + + + + + + +
+ +
+ + + + + + + +
+ +
+ + + + + + + +
+
+
+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..5b6d408 --- /dev/null +++ b/style.css @@ -0,0 +1,81 @@ +.calcLocation { + margin: center; + display: grid; + justify-content: center; + align-content: center; + align-items: center; + min-height: 100vh; +} + +.calcGrid { + height: 446px; + width: 529px; + background-color: #FFFFFF; + padding-top: 25px; + padding-right: 24px; + padding-bottom: 24px; + padding-left: 27px; + border: 1px solid #DFE1E5; + border-radius: 10px; +} + +.calcSwitch { + width: 525px; + margin-bottom: 20px; + background-color: #FFFFFF; +} + +.calcSwitch span { + font-size: 20px; +} + +.display { + width: 485px; + height: 30px; + border: 1px solid #DFE1E5; + border-radius: 10px; + text-align: right; + font-size: 30px; + padding: 20px; + margin-bottom: 20px; +} + +button { + width: 122px; + height: 54px; + font-size: 20px; + margin-right: 9px; + margin-bottom: 12px; + border-radius: 10px; + border: .5px solid #F1F3F4; + background-color: #F1F3F4; +} + +.fourthButton { + margin-right: 0px; + background-color: #DFE1E5; +} +#scientificBtn { + text-decoration: none; + color: black; +} + +#standardBtn { + color: #3F48CC; +} + +#pipe { + color: #DFE1E5; + font-weight: bold; + font-size: 22px; +} + +#r1-1, #r1-2, #r1-3 { + background-color: #DFE1E5; +} + +#r5-3 { + color: white; + background-color: #4285F4; + font-weight: bold; +} \ No newline at end of file