styling mostly done
This commit is contained in:
parent
da9924b7bd
commit
5d54f2985b
|
|
@ -40,6 +40,8 @@
|
|||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&family=VT323&display=swap" rel="stylesheet">
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
147
src/App.css
147
src/App.css
|
|
@ -1,11 +1,144 @@
|
|||
button{
|
||||
width:100px;
|
||||
height:100px;
|
||||
background-color: gray;
|
||||
margin: 10px;
|
||||
font-size: 30px;
|
||||
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: calculator;
|
||||
src: url("DS-DIGIB.TTF");
|
||||
}
|
||||
|
||||
html{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#calculator{
|
||||
width:550px;
|
||||
margin:auto;
|
||||
background: rgb(68,64,64);
|
||||
background: linear-gradient(351deg, rgba(68,64,64,1) 0%, rgba(156,150,150,1) 100%);
|
||||
padding: 1rem;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
#calculator-content{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4,1fr);
|
||||
grid-template-rows: 1fr 1.6fr repeat(5,1fr);
|
||||
grid-template-areas:
|
||||
"header header header header"
|
||||
"display display display display"
|
||||
"functions functions functions operators"
|
||||
"numbers numbers numbers operators"
|
||||
"numbers numbers numbers operators"
|
||||
"numbers numbers numbers operators"
|
||||
"numbers numbers numbers operators"
|
||||
;
|
||||
gap:1rem;
|
||||
}
|
||||
|
||||
|
||||
#calculator-content > header{
|
||||
grid-area: header;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
|
||||
}
|
||||
|
||||
#calculator-content > header > h1{
|
||||
font-size: 3rem;
|
||||
margin:0.5rem auto;
|
||||
color: aliceblue;
|
||||
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
#display-container{
|
||||
grid-area: display;
|
||||
justify-self: end;
|
||||
align-self: end;
|
||||
height:100%;
|
||||
width:100%;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 6fr 1fr;
|
||||
grid-template-areas:
|
||||
"memory"
|
||||
"main"
|
||||
"operator"
|
||||
;
|
||||
|
||||
|
||||
background: linear-gradient(351deg, rgba(15,93,53,1) 0%, rgba(194,228,185,1) 100%);
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
padding:0.5rem;
|
||||
box-shadow: 0.5rem 0.5rem 2rem inset;
|
||||
}
|
||||
|
||||
#display-container > p {
|
||||
margin:auto 0;
|
||||
text-align: right;
|
||||
line-height:1em;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
#display{
|
||||
font-size: 26px;;
|
||||
font-family: calculator;
|
||||
font-size: 6rem;
|
||||
grid-area: main;
|
||||
align-self: center;
|
||||
|
||||
}
|
||||
|
||||
#memory{
|
||||
grid-area: memory;
|
||||
align-self: center;
|
||||
|
||||
}
|
||||
|
||||
#operator{
|
||||
grid-area: operator;
|
||||
align-self: center;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.num-pad{
|
||||
grid-area: numbers;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
grid-template-rows: repeat(4,1fr);
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.operator-pad{
|
||||
grid-area: operators;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(3,1fr) 2fr;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.function-pad{
|
||||
grid-area: functions;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
button{
|
||||
|
||||
background: rgb(92,92,92);
|
||||
background: linear-gradient(351deg, rgba(92,92,92,1) 0%, rgba(224,224,224,1) 100%);
|
||||
font-size: 30px;
|
||||
place-self: stretch;
|
||||
border-radius: 1.5rem;
|
||||
|
||||
}
|
||||
|
|
@ -1,107 +1,109 @@
|
|||
import { useState } from "react";
|
||||
import KeyPad from "./KeyPad";
|
||||
|
||||
export default function Calculator(props){
|
||||
const [main,setMain] = useState("0")
|
||||
const [memory,setMemory] = useState("")
|
||||
const [operation,setOperation] = useState("")
|
||||
export default function Calculator(props) {
|
||||
const [main, setMain] = useState("0")
|
||||
const [memory, setMemory] = useState("")
|
||||
const [operation, setOperation] = useState("")
|
||||
|
||||
const map = {
|
||||
conc:(numberString)=>{
|
||||
if(main[0]==="0"){
|
||||
setMain(prev=>prev.slice(1)+numberString)
|
||||
}else{
|
||||
setMain(prev=>prev+numberString)
|
||||
conc: (numberString) => {
|
||||
if (main[0] === "0") {
|
||||
setMain(prev => prev.slice(1) + numberString)
|
||||
} else {
|
||||
setMain(prev => prev + numberString)
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
zero:function(){this.conc("0")},
|
||||
one:function(){this.conc("1")},
|
||||
two:function(){this.conc("2")},
|
||||
three:function(){this.conc("3")},
|
||||
four:function(){this.conc("4")},
|
||||
five:function(){this.conc("5")},
|
||||
six:function(){this.conc("6")},
|
||||
seven:function(){this.conc("7")},
|
||||
eight:function(){this.conc("8")},
|
||||
nine:function(){this.conc("9")},
|
||||
decimal:function(){
|
||||
if(!/\./g.test(main)){
|
||||
zero: function () { this.conc("0") },
|
||||
one: function () { this.conc("1") },
|
||||
two: function () { this.conc("2") },
|
||||
three: function () { this.conc("3") },
|
||||
four: function () { this.conc("4") },
|
||||
five: function () { this.conc("5") },
|
||||
six: function () { this.conc("6") },
|
||||
seven: function () { this.conc("7") },
|
||||
eight: function () { this.conc("8") },
|
||||
nine: function () { this.conc("9") },
|
||||
decimal: function () {
|
||||
if (!/\./g.test(main)) {
|
||||
this.conc(".")
|
||||
}
|
||||
},
|
||||
|
||||
add:function(){this.rcvOperator("add")},
|
||||
subtract:function(){this.rcvOperator("subtract")},
|
||||
multiply:function(){this.rcvOperator("multiply")},
|
||||
divide:function(){this.rcvOperator("divide")},
|
||||
add: function () { this.rcvOperator("add") },
|
||||
subtract: function () { this.rcvOperator("subtract") },
|
||||
multiply: function () { this.rcvOperator("multiply") },
|
||||
divide: function () { this.rcvOperator("divide") },
|
||||
|
||||
rcvOperator:function(operator){
|
||||
if(main==="-"){
|
||||
rcvOperator: function (operator) {
|
||||
if (main === "-") {
|
||||
setMain("")
|
||||
}else if(main!==""){
|
||||
if(memory===""){
|
||||
} else if (main !== "") {
|
||||
if (memory === "") {
|
||||
setMemory(main)
|
||||
}else{
|
||||
setMemory(prev=>{return this.calculate(main,prev)})
|
||||
} else {
|
||||
setMemory(prev => { return this.calculate(main, prev) })
|
||||
}
|
||||
setMain("")
|
||||
}
|
||||
if(main==="" && operator==="subtract"){
|
||||
setMain(prev=>{
|
||||
if(prev[0]!=="-"){
|
||||
return "-"+prev
|
||||
if (main === "" && operator === "subtract") {
|
||||
setMain(prev => {
|
||||
if (prev[0] !== "-") {
|
||||
return "-" + prev
|
||||
}
|
||||
})
|
||||
}else{
|
||||
})
|
||||
} else {
|
||||
setOperation(operator)
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
operations:{
|
||||
add:(a,b)=>{return a+b},
|
||||
subtract:(a,b)=>{return b-a},
|
||||
multiply:(a,b)=>{return a*b},
|
||||
divide:(a,b)=>{return b/a},
|
||||
operations: {
|
||||
add: (a, b) => { return a + b },
|
||||
subtract: (a, b) => { return b - a },
|
||||
multiply: (a, b) => { return a * b },
|
||||
divide: (a, b) => { return b / a },
|
||||
},
|
||||
|
||||
clear:()=>{
|
||||
clear: () => {
|
||||
setMain("0")
|
||||
setMemory("")
|
||||
setOperation("")
|
||||
},
|
||||
equals:function(){
|
||||
if(operation!=="" && main !==""){
|
||||
setMain(prev=>{
|
||||
return this.calculate(prev,memory)
|
||||
equals: function () {
|
||||
if (operation !== "" && main !== "") {
|
||||
setMain(prev => {
|
||||
return this.calculate(prev, memory)
|
||||
})
|
||||
setMemory("")
|
||||
setOperation("")
|
||||
}
|
||||
|
||||
},
|
||||
calculate:function(a,b){
|
||||
return this.operations[operation](parseFloat(a),parseFloat(b)).toString()
|
||||
calculate: function (a, b) {
|
||||
return this.operations[operation](parseFloat(a), parseFloat(b)).toString()
|
||||
}
|
||||
}
|
||||
|
||||
function handleInput(content){
|
||||
function handleInput(content) {
|
||||
map[content]()
|
||||
}
|
||||
|
||||
|
||||
return(
|
||||
<>
|
||||
<div id="display-container">
|
||||
<p id="memory">{"memory: "+memory}</p>
|
||||
<p id="display">{main}</p>
|
||||
<p id="operation">{"operation: "+operation}</p>
|
||||
return (
|
||||
<div id="calculator">
|
||||
<div id="calculator-content">
|
||||
<header><h1>CALCULATOR</h1></header>
|
||||
<div id="display-container">
|
||||
<p id="memory">{memory}</p>
|
||||
<p id="display">{main}</p>
|
||||
<p id="operator">{operation}</p>
|
||||
</div>
|
||||
<KeyPad handleInput={handleInput} />
|
||||
</div>
|
||||
</div>
|
||||
<KeyPad handleInput={handleInput}/>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,30 +1,36 @@
|
|||
import Button from "./Button"
|
||||
export default function NumPad(props){
|
||||
const numberMap = {
|
||||
zero:0,
|
||||
one:1,
|
||||
two:2,
|
||||
three:3,
|
||||
four:4,
|
||||
five:5,
|
||||
six:6,
|
||||
|
||||
seven:7,
|
||||
eight:8,
|
||||
nine:9,
|
||||
decimal:"."
|
||||
four:4,
|
||||
five:5,
|
||||
six:6,
|
||||
one:1,
|
||||
two:2,
|
||||
three:3,
|
||||
zero:0,
|
||||
decimal:".",
|
||||
equals:"="
|
||||
|
||||
}
|
||||
|
||||
const operatorMap = {
|
||||
add:"+",
|
||||
|
||||
subtract:"-",
|
||||
multiply:"x",
|
||||
divide:"/",
|
||||
add:"+",
|
||||
|
||||
}
|
||||
|
||||
const functionMap = {
|
||||
on:"on",
|
||||
off:"off",
|
||||
clear:"C",
|
||||
equals:"="
|
||||
|
||||
}
|
||||
|
||||
function buildButtons(map){
|
||||
|
|
@ -43,7 +49,7 @@ export default function NumPad(props){
|
|||
|
||||
|
||||
return(
|
||||
<div className="keypad">
|
||||
<>
|
||||
<div className="num-pad">
|
||||
{buildButtons(numberMap)}
|
||||
</div>
|
||||
|
|
@ -53,6 +59,6 @@ export default function NumPad(props){
|
|||
<div className="function-pad">
|
||||
{buildButtons(functionMap)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue