styling mostly done

public/index.html

@@ -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>

src/App.css

@@ -1,11 +1,144 @@
-button{
+
-    width:100px;
+
-    height:100px;
+*,
-    background-color: gray;
+*::before,
-    margin: 10px;
+*::after {
-    font-size: 30px;
+    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;
+
 }

src/Components/Calculator.js

@@ -1,107 +1,109 @@
 import { useState } from "react";
 import KeyPad from "./KeyPad";
 
-export default function Calculator(props){
+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 map = {
-        conc:(numberString)=>{
+        conc: (numberString) => {
-            if(main[0]==="0"){
+            if (main[0] === "0") {
-                setMain(prev=>prev.slice(1)+numberString)
+                setMain(prev => prev.slice(1) + numberString)
-            }else{
+            } else {
-                setMain(prev=>prev+numberString)
+                setMain(prev => prev + numberString)
             }
-            
+
         },
 
-        zero:function(){this.conc("0")},
+        zero: function () { this.conc("0") },
-        one:function(){this.conc("1")},
+        one: function () { this.conc("1") },
-        two:function(){this.conc("2")},
+        two: function () { this.conc("2") },
-        three:function(){this.conc("3")},
+        three: function () { this.conc("3") },
-        four:function(){this.conc("4")},
+        four: function () { this.conc("4") },
-        five:function(){this.conc("5")},
+        five: function () { this.conc("5") },
-        six:function(){this.conc("6")},
+        six: function () { this.conc("6") },
-        seven:function(){this.conc("7")},
+        seven: function () { this.conc("7") },
-        eight:function(){this.conc("8")},
+        eight: function () { this.conc("8") },
-        nine:function(){this.conc("9")},
+        nine: function () { this.conc("9") },
-        decimal:function(){
+        decimal: function () {
-            if(!/\./g.test(main)){
+            if (!/\./g.test(main)) {
                 this.conc(".")
-            }  
+            }
         },
 
-        add:function(){this.rcvOperator("add")},
+        add: function () { this.rcvOperator("add") },
-        subtract:function(){this.rcvOperator("subtract")},
+        subtract: function () { this.rcvOperator("subtract") },
-        multiply:function(){this.rcvOperator("multiply")},
+        multiply: function () { this.rcvOperator("multiply") },
-        divide:function(){this.rcvOperator("divide")},
+        divide: function () { this.rcvOperator("divide") },
 
-        rcvOperator:function(operator){      
+        rcvOperator: function (operator) {
-            if(main==="-"){
+            if (main === "-") {
                 setMain("")
-            }else if(main!==""){
+            } else if (main !== "") {
-                if(memory===""){
+                if (memory === "") {
                     setMemory(main)
-                }else{
+                } else {
-                    setMemory(prev=>{return this.calculate(main,prev)})
+                    setMemory(prev => { return this.calculate(main, prev) })
                 }
                 setMain("")
             }
-            if(main==="" && operator==="subtract"){
+            if (main === "" && operator === "subtract") {
-                setMain(prev=>{
+                setMain(prev => {
-                    if(prev[0]!=="-"){
+                    if (prev[0] !== "-") {
-                        return "-"+prev
+                        return "-" + prev
-                    }                    
+                    }
-                    })
+                })
-            }else{
+            } else {
                 setOperation(operator)
             }
 
-            
+
         },
 
-        operations:{
+        operations: {
-        add:(a,b)=>{return a+b},
+            add: (a, b) => { return a + b },
-        subtract:(a,b)=>{return b-a},
+            subtract: (a, b) => { return b - a },
-        multiply:(a,b)=>{return a*b},
+            multiply: (a, b) => { return a * b },
-        divide:(a,b)=>{return b/a},
+            divide: (a, b) => { return b / a },
-        }, 
+        },
-        
+
-        clear:()=>{
+        clear: () => {
             setMain("0")
             setMemory("")
             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)
                 })
                 setMemory("")
                 setOperation("")
             }
-            
-        },
-        calculate:function(a,b){
-            return this.operations[operation](parseFloat(a),parseFloat(b)).toString()
-        }
-    } 
 
-    function handleInput(content){  
+        },
+        calculate: function (a, b) {
+            return this.operations[operation](parseFloat(a), parseFloat(b)).toString()
+        }
+    }
+
+    function handleInput(content) {
         map[content]()
     }
 
 
-    return(
+    return (
-        <>
+        <div id="calculator">
-        <div id="display-container">
+            <div id="calculator-content">
-            <p id="memory">{"memory: "+memory}</p>
+                <header><h1>CALCULATOR</h1></header>
-            <p id="display">{main}</p>
+                <div id="display-container">
-            <p id="operation">{"operation: "+operation}</p>
+                    <p id="memory">{memory}</p>
+                    <p id="display">{main}</p>
+                    <p id="operator">{operation}</p>
+                </div>
+                <KeyPad handleInput={handleInput} />
+            </div>
         </div>
-        <KeyPad handleInput={handleInput}/>
-
-        </>
     )
 }

src/Components/KeyPad.js

@@ -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>
+        </>
     )
 }