diff --git a/sciStyle.css b/sciStyle.css new file mode 100644 index 0000000..8e5fb12 --- /dev/null +++ b/sciStyle.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/scientificView.html b/scientificView.html new file mode 100644 index 0000000..eb1c6fc --- /dev/null +++ b/scientificView.html @@ -0,0 +1,79 @@ + + + + + + + Scientific Calculator + + + +
+
+ +
+ Standard | Scientific +
+ +
+
+
0
+
+ +
+ + + + + + + +
+ +
+ + + + + + + +
+ +
+ + + + + + + +
+ +
+ + + + + + + +
+ +
+ + + + + + + +
+ +
+ +
+ + \ No newline at end of file diff --git a/standardView.html b/standardView.html new file mode 100644 index 0000000..787b803 --- /dev/null +++ b/standardView.html @@ -0,0 +1,62 @@ + + + + + + + Calculator Project + + + +
+
+ +
+ Standard | Scientific +
+ +
+
+
0
+
+ +
+ + + + +
+ +
+ + + + +
+ +
+ + + + +
+ +
+ + + + +
+ +
+ + + + +
+ +
+ +
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..5fcf1bb --- /dev/null +++ b/style.css @@ -0,0 +1,84 @@ +.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