prop-count-app

package.json

@@ -1,8 +1,8 @@
 {
-  "name": "react",
+  "name": "props-counter-app",
   "version": "1.0.0",
-  "description": "React example starter project",
-  "keywords": ["react", "starter"],
+  "description": "",
+  "keywords": [],
   "main": "src/index.js",
   "dependencies": {
     "react": "17.0.2",
@@ -19,5 +19,10 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
-  "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
-}
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

src/App.js

@@ -1,10 +1,26 @@
+import React from "react";
 import "./styles.css";
+import Count from "./Count";
 
 export default function App() {
+  const [count, setCount] = React.useState(0);
+
+  function add() {
+    setCount((prevCount) => prevCount + 1);
+  }
+  function subtract() {
+    setCount((prevCount) => prevCount - 1);
+  }
+
   return (
-    <div className="App">
-      <h1>Hello CodeSandbox</h1>
-      <h2>Start editing to see some magic happen!</h2>
+    <div className="counter">
+      <button className="counter--minus" onClick={subtract}>
+        –
+      </button>
+      <Count number={count} />
+      <button className="counter--plus" onClick={add}>
+        +
+      </button>
     </div>
   );
 }

src/Count.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function Count(props) {
+  return (
+    <div className="counter--count">
+      <h1>{props.number}</h1>
+    </div>
+  );
+}

src/styles.css

@@ -1,4 +1,60 @@
-.App {
-  font-family: sans-serif;
-  text-align: center;
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: "Inter", sans-serif;
+  background-color: #262626;
+  color: #d9d9d9;
+  padding: 20px;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.counter {
+  display: flex;
+  align-items: flex-end;
+}
+
+.counter > button {
+  height: 50px;
+  width: 50px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  background-color: #737373;
+  color: #d9d9d9;
+  font-size: 1.5rem;
+}
+
+.counter > button:hover {
+  background-color: #404040;
+  color: #d9d9d9;
+}
+
+.counter > button:focus {
+  outline: none;
+}
+
+.counter--count {
+  background-color: white;
+  height: 100px;
+  width: 100px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #262626;
+}
+
+.counter--plus {
+  margin-left: -20px;
+}
+
+.counter--minus {
+  margin-right: -20px;
+  z-index: 1;
 }