Resume
/
calculator
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix styling (heights were messed up)
Gitea/calculator/pipeline/head This commit looks good Details

This commit is contained in:
andrzej 2024-05-26 10:34:49 +02:00
parent eea0ec1c62
commit 57a69a8e9c
2 changed files with 71 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/App.css
View File

@ -1,5 +1,3 @@
*, *,
*::before, *::before,
*::after { *::after {
@ -11,24 +9,26 @@
src: url("DS-DIGIB.TTF"); src: url("DS-DIGIB.TTF");
} }
html{ html {
font-size: 16px; font-size: 16px;
} }
#calculator{ #calculator {
width:550px; height: 800px;
margin:auto; width: 550px;
background: rgb(68,64,64); margin: auto;
background: linear-gradient(351deg, rgba(68,64,64,1) 0%, rgba(156,150,150,1) 100%); background: rgb(68, 64, 64);
background: linear-gradient(351deg, rgba(68, 64, 64, 1) 0%, rgba(156, 150, 150, 1) 100%);
padding: 1rem; padding: 1rem;
border-radius: 2rem; border-radius: 2rem;
} }
#calculator-content{ #calculator-content {
height: 100%;
display: grid; display: grid;
grid-template-columns: repeat(4,1fr); grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 1.6fr repeat(5,1fr); grid-template-rows: 1fr 1.6fr repeat(5, 1fr);
grid-template-areas: grid-template-areas:
"header header header header" "header header header header"
"display display display display" "display display display display"
"functions functions functions operators" "functions functions functions operators"
@ -36,32 +36,32 @@ background: linear-gradient(351deg, rgba(68,64,64,1) 0%, rgba(156,150,150,1) 100
"numbers numbers numbers operators" "numbers numbers numbers operators"
"numbers numbers numbers operators" "numbers numbers numbers operators"
"numbers numbers numbers operators" "numbers numbers numbers operators"
; ;
gap:1rem; gap: 1rem;
} }
#calculator-content > header{ #calculator-content>header {
grid-area: header; grid-area: header;
align-self: center; align-self: center;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
} }
#calculator-content > header > h1{ #calculator-content>header>h1 {
font-size: 3rem; font-size: 3rem;
margin:0.5rem auto; margin: 0.5rem auto;
color: aliceblue; color: aliceblue;
opacity: 0.8; opacity: 0.8;
} }
#display-container{ #display-container {
grid-area: display; grid-area: display;
justify-self: end; justify-self: end;
align-self: end; align-self: end;
height:9rem; height: 9rem;
width:100%; width: 100%;
display: grid; display: grid;
grid-template-rows: 1fr 6fr 1fr; grid-template-rows: 1fr 6fr 1fr;
grid-template-areas: grid-template-areas:
@ -71,105 +71,106 @@ background: linear-gradient(351deg, rgba(68,64,64,1) 0%, rgba(156,150,150,1) 100
; ;
background: linear-gradient(351deg, rgba(15,93,53,1) 0%, rgba(194,228,185,1) 100%); background: linear-gradient(351deg, rgba(15, 93, 53, 1) 0%, rgba(194, 228, 185, 1) 100%);
font-family: 'VT323', monospace; font-family: 'VT323', monospace;
font-size: 1rem; font-size: 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
padding:0.5rem; padding: 0.5rem;
box-shadow: 0.5rem 0.5rem 2rem inset; box-shadow: 0.5rem 0.5rem 2rem inset;
} }
.off{ .off {
filter: brightness(0.5); filter: brightness(0.5);
} }
.off > p{
.off>p {
display: none !important; display: none !important;
} }
#display-container > p { #display-container>p {
margin:auto 0; margin: auto 0;
text-align: right; text-align: right;
opacity: 0.8; opacity: 0.8;
} }
#display{ #display {
font-family: calculator; font-family: calculator;
font-size: 6rem; font-size: 5rem;
grid-area: main; grid-area: main;
align-self: center; align-self: center;
} }
#memory{ #memory {
grid-area: memory; grid-area: memory;
align-self: center; align-self: center;
} }
#operator{ #operator {
grid-area: operator; grid-area: operator;
align-self: center; align-self: center;
} }
.num-pad{ .num-pad {
grid-area: numbers; grid-area: numbers;
display: grid; display: grid;
grid-template-columns: repeat(3,1fr); grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4,1fr); grid-template-rows: repeat(4, 1fr);
gap: 0.2rem; gap: 0.2rem;
} }
.operator-pad{ .operator-pad {
grid-area: operators; grid-area: operators;
display: grid; display: grid;
grid-template-rows: repeat(3,1fr) 2fr; grid-template-rows: repeat(3, 1fr) 2fr;
gap: 0.2rem; gap: 0.2rem;
} }
.function-pad{ .function-pad {
grid-area: functions; grid-area: functions;
display: grid; display: grid;
grid-template-columns: repeat(3,1fr); grid-template-columns: repeat(3, 1fr);
gap: 0.2rem; gap: 0.2rem;
} }
button{ button {
background: linear-gradient(351deg, rgba(92,92,92,0.9) 0%, rgba(224,224,224,0.9) 100%); background: linear-gradient(351deg, rgba(92, 92, 92, 0.9) 0%, rgba(224, 224, 224, 0.9) 100%);
background-blend-mode: multiply; background-blend-mode: multiply;
font-size: 3rem; font-size: 3rem;
place-self: stretch; place-self: stretch;
border-radius: 1.5rem; border-radius: 1.5rem;
} }
.num-pad > button{ .num-pad>button {
background-color: lightblue; background-color: lightblue;
} }
.operator-pad > button{ .operator-pad>button {
font-size: 3.5em; font-size: 3.5em;
} }
.function-pad > button{ .function-pad>button {
font-size: 2em; font-size: 2em;
} }
#off{ #off {
background-color: #FF9B9B; background-color: #FF9B9B;
} }
#on{ #on {
background-color: #CBFFA9; background-color: #CBFFA9;
} }
#clear{ #clear {
background-color: #FFD6A5; background-color: #FFD6A5;
} }

38
src/Components/Calculator.jsx
View File

@ -18,56 +18,56 @@ export default function Calculator(props) {
} }
}, },
zero: function () { zero: function() {
this.conc("0"); this.conc("0");
}, },
one: function () { one: function() {
this.conc("1"); this.conc("1");
}, },
two: function () { two: function() {
this.conc("2"); this.conc("2");
}, },
three: function () { three: function() {
this.conc("3"); this.conc("3");
}, },
four: function () { four: function() {
this.conc("4"); this.conc("4");
}, },
five: function () { five: function() {
this.conc("5"); this.conc("5");
}, },
six: function () { six: function() {
this.conc("6"); this.conc("6");
}, },
seven: function () { seven: function() {
this.conc("7"); this.conc("7");
}, },
eight: function () { eight: function() {
this.conc("8"); this.conc("8");
}, },
nine: function () { nine: function() {
this.conc("9"); this.conc("9");
}, },
decimal: function () { decimal: function() {
if (!/\./g.test(main)) { if (!/\./g.test(main)) {
this.conc("."); this.conc(".");
} }
}, },
add: function () { add: function() {
this.rcvOperator("add"); this.rcvOperator("add");
}, },
subtract: function () { subtract: function() {
this.rcvOperator("subtract"); this.rcvOperator("subtract");
}, },
multiply: function () { multiply: function() {
this.rcvOperator("multiply"); this.rcvOperator("multiply");
}, },
divide: function () { divide: function() {
this.rcvOperator("divide"); this.rcvOperator("divide");
}, },
rcvOperator: function (operator) { rcvOperator: function(operator) {
if (main === "-") { if (main === "-") {
setMain(""); setMain("");
} else if (main !== "") { } else if (main !== "") {
@ -111,7 +111,7 @@ export default function Calculator(props) {
setMemory(""); setMemory("");
setOperation(""); setOperation("");
}, },
equals: function () { equals: function() {
if (operation !== "" && main !== "") { if (operation !== "" && main !== "") {
setMain((prev) => { setMain((prev) => {
return this.calculate(prev, memory); return this.calculate(prev, memory);
@ -127,7 +127,7 @@ export default function Calculator(props) {
setMemory(""); setMemory("");
setOperation(""); setOperation("");
}, },
calculate: function (a, b) { calculate: function(a, b) {
const string = this.operations[operation]( const string = this.operations[operation](
parseFloat(a), parseFloat(a),
parseFloat(b), parseFloat(b),
@ -144,7 +144,7 @@ export default function Calculator(props) {
<div id="calculator"> <div id="calculator">
<div id="calculator-content"> <div id="calculator-content">
<header> <header>
<h1>CALCULATOR - CI/CD EDITION</h1> <h1>CALCULATOR</h1>
</header> </header>
<div id="display-container" className={on ? "on" : "off"}> <div id="display-container" className={on ? "on" : "off"}>
<p id="memory">{memory}</p> <p id="memory">{memory}</p>