From 4d9e85d7fdacd7f36171ccbedbc02d902e860e14 Mon Sep 17 00:00:00 2001 From: "Chu A." Date: Thu, 25 Sep 2025 08:36:07 +0100 Subject: [PATCH 01/14] add: added html structure for the calculator --- index.html | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/index.html b/index.html index 912fee4..f2c4fb8 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,42 @@ iPhone Calculator +
+
+ +
+
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + +
+
+
From 8ec266f752f0baeb9916476df19f46afda73183c Mon Sep 17 00:00:00 2001 From: "Chu A." Date: Thu, 25 Sep 2025 13:04:39 +0100 Subject: [PATCH 02/14] add: UI design with css --- index.html | 143 ++++++++++++++++++++++++++++++++++++----------- styles/index.css | 109 ++++++++++++++++++++++++++++++++++++ 2 files changed, 220 insertions(+), 32 deletions(-) diff --git a/index.html b/index.html index f2c4fb8..612e99d 100644 --- a/index.html +++ b/index.html @@ -9,39 +9,118 @@
- -
-
-
- - - - -
-
- - - - -
-
- - - - -
-
- - - - -
-
- - - -
+ +
+
+
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + +
+
+
diff --git a/styles/index.css b/styles/index.css index cca57b3..1f0469b 100644 --- a/styles/index.css +++ b/styles/index.css @@ -3,3 +3,112 @@ padding: 0; box-sizing: border-box; } + +body { + height: 100vh; + display: flex; + align-items: center; + background-color: #333; +} + +#calc-ctn { + display: flex; + flex-direction: column; + gap: 1rem; + margin: auto; + background-color: #000; + border: 3px solid #fff; + border-radius: 1rem; +} + +#calc-screen { + padding: 1rem; +} + +#calc-screen .input, +#calc-screen .output { + border: none; + display: flex; + width: 100%; + padding: 0 0 4rem 0; + border-radius: 0.2rem 0.2rem 0 0; + background-color: #1b1b1b; + color: #fff; +} + +#calc-screen .output { + border-radius: 0 0 0.2rem 0.2rem; +} + +#calc-btns, +#calc-advance { + display: flex; + flex-direction: column; + gap: 1rem; + padding: 2rem; +} + +#calc-btns { + padding-right: 0; +} + +#calc-advance { + padding-left: 0; +} + +#footer { + display: flex; + gap: 1rem; +} + +.input::-webkit-outer-spin-button, +.input::-webkit-inner-spin-button, +.output::-webkit-outer-spin-button, +.output::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +.group-btn { + display: flex; + gap: 0.8rem; +} + +.btn { + font-size: 2rem; + text-align: center; + border: none; + border-radius: 50%; + width: 4rem; + height: 4rem; + color: #fff; +} + +.btn:hover { + transform: translate(0, -2px); + transition: 0.5s; +} + +.btn:active { + transform: translate(0, 2px); +} + +.btn-grey { + background-color: #808080; +} + +.btn-orange { + background-color: #ffa500; +} + +.btn-dark-grey { + background-color: #303030; +} + +.backspace { + flex-grow: 1; + border-radius: 2rem; + display: flex; + align-items: center; + justify-content: center; +} From e9d275b02658946b4d0e8ec630e2e9a64b449d06 Mon Sep 17 00:00:00 2001 From: "Chu A." Date: Thu, 25 Sep 2025 13:09:41 +0100 Subject: [PATCH 03/14] fix: fix linter errors --- index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 612e99d..a10570f 100644 --- a/index.html +++ b/index.html @@ -52,9 +52,9 @@ width="14.5" rx="3" stroke="currentColor" - strokeLinecap="round" - strokeLinejoin="round" - strokeWidth="1.5" + strokelinecap="round" + strokelinejoin="round" + strokewidth="1.5" x="4.75" y="2.75" /> @@ -63,9 +63,9 @@ width="7.5" rx="1" stroke="currentColor" - strokeLinecap="round" - strokeLinejoin="round" - strokeWidth="1.5" + strokelinecap="round" + strokelinejoin="round" + strokewidth="1.5" x="8.25" y="6.25" /> From 10fa92afa2a2c642efabadc7a9ded49da97066de Mon Sep 17 00:00:00 2001 From: "Chu A." Date: Thu, 25 Sep 2025 13:24:54 +0100 Subject: [PATCH 04/14] fix: fix linter errors --- styles/index.css | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/styles/index.css b/styles/index.css index 1f0469b..71d4e8e 100644 --- a/styles/index.css +++ b/styles/index.css @@ -30,7 +30,7 @@ body { border: none; display: flex; width: 100%; - padding: 0 0 4rem 0; + padding: 0 0 4rem; border-radius: 0.2rem 0.2rem 0 0; background-color: #1b1b1b; color: #fff; @@ -61,14 +61,6 @@ body { gap: 1rem; } -.input::-webkit-outer-spin-button, -.input::-webkit-inner-spin-button, -.output::-webkit-outer-spin-button, -.output::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; -} - .group-btn { display: flex; gap: 0.8rem; From fd668188ff91352e342f64e82124f7d05348391f Mon Sep 17 00:00:00 2001 From: "Chu A." Date: Thu, 25 Sep 2025 14:01:54 +0100 Subject: [PATCH 05/14] fix: fixed the input field --- index.html | 6 +++--- styles/index.css | 17 +++++++++-------- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index a10570f..f3348bd 100644 --- a/index.html +++ b/index.html @@ -9,8 +9,8 @@
- - +
0
+