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

styling

This commit is contained in:
Andrzej Stepien 2023-07-07 20:42:27 +02:00
parent 5d54f2985b
commit 03f6a7b8af
2 changed files with 17 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/App.css
View File

@ -59,7 +59,7 @@ background: linear-gradient(351deg, rgba(68,64,64,1) 0%, rgba(156,150,150,1) 100
grid-area: display; grid-area: display;
justify-self: end; justify-self: end;
align-self: end; align-self: end;
height:100%; height:9rem;
width:100%; width:100%;
display: grid; display: grid;
grid-template-rows: 1fr 6fr 1fr; grid-template-rows: 1fr 6fr 1fr;
@ -78,6 +78,13 @@ background: linear-gradient(351deg, rgba(68,64,64,1) 0%, rgba(156,150,150,1) 100
box-shadow: 0.5rem 0.5rem 2rem inset; box-shadow: 0.5rem 0.5rem 2rem inset;
} }
.off{
filter: brightness(0.5);
}
.off > p{
display: none !important;
}
#display-container > p { #display-container > p {
margin:auto 0; margin:auto 0;
text-align: right; text-align: right;

10
src/Components/Calculator.js
View File

@ -5,6 +5,7 @@ export default function Calculator(props) {
const [main, setMain] = useState("0") const [main, setMain] = useState("0")
const [memory, setMemory] = useState("") const [memory, setMemory] = useState("")
const [operation, setOperation] = useState("") const [operation, setOperation] = useState("")
const [on, setOn] = useState(true)
const map = { const map = {
conc: (numberString) => { conc: (numberString) => {
@ -83,6 +84,13 @@ export default function Calculator(props) {
} }
}, },
on:()=>setOn(true),
off:()=>{
setOn(false)
setMain("0")
setMemory("")
setOperation("")
},
calculate: function (a, b) { calculate: function (a, b) {
return this.operations[operation](parseFloat(a), parseFloat(b)).toString() return this.operations[operation](parseFloat(a), parseFloat(b)).toString()
} }
@ -97,7 +105,7 @@ export default function Calculator(props) {
<div id="calculator"> <div id="calculator">
<div id="calculator-content"> <div id="calculator-content">
<header><h1>CALCULATOR</h1></header> <header><h1>CALCULATOR</h1></header>
<div id="display-container"> <div id="display-container" className={on?"on":"off"}>
<p id="memory">{memory}</p> <p id="memory">{memory}</p>
<p id="display">{main}</p> <p id="display">{main}</p>
<p id="operator">{operation}</p> <p id="operator">{operation}</p>