From da6e631d3a3d11f982dac9ef9fc34b256d22945b Mon Sep 17 00:00:00 2001 From: AdamB37 Date: Tue, 18 Apr 2017 15:18:33 -0700 Subject: [PATCH] stage-1 almost complete except special characters --- index.html | 32 ++++++++++++++++++++ package.json | 23 +++++++++++++++ styles/index.css | 77 ++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 132 insertions(+) create mode 100644 index.html create mode 100644 package.json create mode 100644 styles/index.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..242b51a --- /dev/null +++ b/index.html @@ -0,0 +1,32 @@ + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + +
+ + diff --git a/package.json b/package.json new file mode 100644 index 0000000..7389085 --- /dev/null +++ b/package.json @@ -0,0 +1,23 @@ +{ + "name": "mac-calculator-clone", + "version": "1.0.0", + "description": "Replicate the builtin Mac calculator as a web app.", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/AdamB37/mac-calculator-clone.git" + }, + "keywords": [], + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/AdamB37/mac-calculator-clone/issues" + }, + "homepage": "https://github.com/AdamB37/mac-calculator-clone#readme", + "dependencies": { + "normalize.css": "^6.0.0" + } +} diff --git a/styles/index.css b/styles/index.css new file mode 100644 index 0000000..c9d20b1 --- /dev/null +++ b/styles/index.css @@ -0,0 +1,77 @@ +.calculator { + display: flex; + height: 321px; + width: 233.5px; + flex-wrap: wrap; +} +.calculator-row { + display: flex; + flex-direction: row; + height: 15%; +} +.calculator-prompt { + height: 25%; + width: 100%; + background-color: rgb(153, 153, 153); + border: 0; + outline: 0; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + text-align: right; + padding-right: 6%; + padding-top: 8%; + color: white; + font-size: 35.5pt; + font-weight: 100; +} +.calculator-prompt:active { + background-color: rgb(153, 153, 153); + border: 0; +} +.calculator-button { + height: 15%; + width: 25%; + background-color: rgb(225,225,225); + outline: 0; + border-top: 0; + border-right: 0; + border-bottom: 1px; + border-left: 1px; + border-color: rgb(153, 153, 153); + border-style: solid; + font-size: 17pt; + font-family: 'Roboto', sans-serif; +} + +.calculator-button:active { + background-color: rgb(178,178,178); +} + +.calculator-button:nth-child(18) { + height: 15%; + width: 50%; + border-bottom-left-radius: 5px; + text-align: left; + padding-left: 11%; +} + +.calculator-button:nth-child(5), +.calculator-button:nth-child(9), +.calculator-button:nth-child(13), +.calculator-button:nth-child(17), +.calculator-button:nth-child(20) { + background-color: rgb(223,145,60); + color: white; +} + +.calculator-button:nth-child(5):active, +.calculator-button:nth-child(9):active, +.calculator-button:nth-child(13):active, +.calculator-button:nth-child(17):active, +.calculator-button:nth-child(20):active { + background-color: rgb(186, 119, 56); +} + +.calculator-button:nth-child(20) { + border-bottom-right-radius: 5px; +}