From 15b4ab626cecb679893031b2508a8f0230fd5a92 Mon Sep 17 00:00:00 2001 From: IrmIris33 Date: Sun, 22 Nov 2020 00:36:23 -0500 Subject: [PATCH 1/3] Completed Standard Calculator --- Index/index.html | 115 +++++++++++++++++++++++++++++++++++++++++++++++ styles/style.css | 60 +++++++++++++++++++++++++ 2 files changed, 175 insertions(+) create mode 100644 Index/index.html create mode 100644 styles/style.css diff --git a/Index/index.html b/Index/index.html new file mode 100644 index 0000000..1a4dba0 --- /dev/null +++ b/Index/index.html @@ -0,0 +1,115 @@ + + + + + + + Calculators + + + + + + + +
+ +
+ Standard | Scientific +
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + \ No newline at end of file diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 0000000..6e82eeb --- /dev/null +++ b/styles/style.css @@ -0,0 +1,60 @@ +*{ box-sizing: border-box; + font-family: Arial, sans-serif; + font-weight: normal; } + +body { + padding: 0; + background: white; + width: 595px; + height: 512px; } + +.calculator { + margin: 0 auto; + border: 2px solid #dfe1e5; + border-radius: 10px; + justify-content: center; + align-content: center; + padding: 20px; } + +.calculator input { + background: none; + width: 98%; + font-size: 32px; + text-align: right; + border: 2px solid #dfe1e5; + border-radius: 15px; + margin: 5px; + padding: 17px; } + +.container { + font-size: 17px; + color: #3f48cc; + padding-bottom: 20px; } + +.cal-btn { + cursor: auto; + font-size: 20px; + outline: none; + height: 54px; + width: 123px; + border-radius: 10px; + border: none; } + +.calculator-buttons { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr 1fr 1fr; + grid-gap: 12px; + padding-top: 20px; } + +.cal-btn:hover { + background-color: rgba(248, 173, 11, 0.932); + transform: translateY(4px); } + +.btn-function{ + background-color: #dfe1e5; + color: #202124; } + +.btn-special{ + background-color: #4285f4; + color: white; } \ No newline at end of file From 7286ab81e3ef1b5eed5ae5c5fe05571ee1345ea5 Mon Sep 17 00:00:00 2001 From: IrmIris33 Date: Sun, 22 Nov 2020 15:03:25 -0500 Subject: [PATCH 2/3] Completed JS-Calculator-Lab --- Index/index.html | 111 +++++++++++++++++---------- Index/scientific.html | 173 ++++++++++++++++++++++++++++++++++++++++++ styles/scientific.css | 98 ++++++++++++++++++++++++ styles/style.css | 35 +++++++++ 4 files changed, 379 insertions(+), 38 deletions(-) create mode 100644 Index/scientific.html create mode 100644 styles/scientific.css diff --git a/Index/index.html b/Index/index.html index 1a4dba0..f14d303 100644 --- a/Index/index.html +++ b/Index/index.html @@ -4,9 +4,9 @@ - Calculators + Standard Calculator - + + + + +
+ + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + \ No newline at end of file diff --git a/styles/scientific.css b/styles/scientific.css new file mode 100644 index 0000000..30547ba --- /dev/null +++ b/styles/scientific.css @@ -0,0 +1,98 @@ +*{ box-sizing: border-box; + font-family: Arial, sans-serif; + font-weight: normal; } + +body { + padding: 0; + background: white; + width: 1003px; + height: 512px; } + +.calculator { + margin: 0 auto; + border: 2px solid #dfe1e5; + border-radius: 10px; + justify-content: center; + align-content: center; + padding: 20px; } + +.calculator input { + background: none; + width: 927px; + height: 70px; + font-size: 32px; + text-align: right; + border: 2px solid #dfe1e5; + border-radius: 15px; + margin: 5px; } + +.nav-main { + width: 100%; + height: 60%; + display: flex; + z-index: auto; } + +.nav-main ul { + display: flex; + flex-wrap: wrap; + padding-left: 15px; } + +.nav-main ul li { + list-style: none; + line-height: 0px; + font-size: 20px; } + +.nav-main ul li a { + display: block; + height: 60%; + padding: 0 10px; + color: #4285f4; + text-decoration: none; } + +.btn-toggle-nav { + width: 60 px; + height: 100%; + font-size: 20px; + color: #3f48cc; + padding-bottom: 20px; + background-position: center; + cursor: pointer; } + +.btn-toggle-nav:hover { + opacity: 0.5; } + +.container { + display: block; + height: 100%; + text-decoration: none; + font-family: Arial, Helvetica, sans-serif; + font-size: 17px; + padding-bottom: 20px; } + +.cal-btn { + cursor: auto; + font-size: 20px; + outline: none; + height: 54px; + width: 123px; + border-radius: 10px; + border: none; } + +.calculator-buttons { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr 1fr 1fr; + grid-gap: 12px; + padding-top: 20px; } + +.cal-btn:hover { + background-color: rgba(248, 173, 11, 0.932); + transform: translateY(4px); } + +.btn-function{ + background-color: #dfe1e5; + color: #202124; } + +.btn-special{ + background-color: #4285f4; + color: white; } \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 6e82eeb..c8fefb0 100644 --- a/styles/style.css +++ b/styles/style.css @@ -26,6 +26,41 @@ body { margin: 5px; padding: 17px; } +.nav-main { + width: 100%; + height: 60%; + display: flex; + z-index: auto; } + +.nav-main ul { + display: flex; + flex-wrap: wrap; + padding-left: 15px; } + +.nav-main ul li { + list-style: none; + line-height: 0px; + font-size: 20px; } + +.nav-main ul li a { + display: block; + height: 60%; + padding: 0 10px; + color: #4285f4; + text-decoration: none; } + +.btn-toggle-nav { + width: 60 px; + height: 100%; + font-size: 20px; + color: #3f48cc; + padding-bottom: 20px; + background-position: center; + cursor: pointer; } + +.btn-toggle-nav:hover { + opacity: 0.5; } + .container { font-size: 17px; color: #3f48cc; From 5701b5194be13eead39b7e8c35227ccfb589af48 Mon Sep 17 00:00:00 2001 From: IrmIris33 Date: Wed, 25 Nov 2020 11:58:57 -0500 Subject: [PATCH 3/3] Modified code to toggle between calculators --- Index/index.html | 6 +++--- Index/scientific.html | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/Index/index.html b/Index/index.html index f14d303..b58d271 100644 --- a/Index/index.html +++ b/Index/index.html @@ -5,7 +5,7 @@ Standard Calculator - +