update

Author: bhattidev

React_Learning/17_Calculator/src/App.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import Numeric from './components/Numeric';
 import Operators from './components/Operators';
+import Display from './components/Display';
 
 function App() {
 	return (
-		<div className="w-full h-80 flex justify-center items-center">
-			<div className="border p-5 w-60 ">
-				<div className="border p-2 my-5">Display</div>
-				<div className="flex">
+		<div className="w-full h-80 mt-10 flex justify-center items-center">
+			<div className="border p-5 w-60 bg-slate-50">
+				<Display />
+				<div className="flex gap-1">
 					<Numeric />
 					<Operators />
 				</div>

React_Learning/17_Calculator/src/components/Display.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Display() {
+	return (
+		<>
+			<div className="border p-2 my-5 bg-white">Display</div>
+		</>
+	);
+}
+
+export default Display;

React_Learning/17_Calculator/src/components/Numeric.jsx

@@ -1,14 +1,16 @@
 import React from 'react';
 
 function Numeric() {
-	const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'C', '0', '='];
+	const numbers = [7, 8, 9, 4, 5, 6, 1, 2, 3, 'C', '0', '.'];
+
 	return (
 		<>
 			<div className="grid grid-cols-3 gap-1">
 				{numbers.map((n, id) => (
 					<button
 						className="border px-4 py-2 rounded-xl bg-slate-400 active:bg-blue-900"
-						key={id}>
+						key={id}
+						>
 						{n}
 					</button>
 				))}

React_Learning/17_Calculator/src/components/Operators.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 function Operators() {
-	const operators = ['/', 'x', '-', '+'];
+	const operators = ['/', 'x', '-', '+', '='];
 	return (
 		<>
 			<div className="grid grid-cols-1 gap-1">