feat: calculus done

Julyemerson · Jun 10, 2024 · 648b84d · 648b84d
1 parent b753d46
commit 648b84d
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 41 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,20 @@
-# React + Vite
+# Tip React Calculator
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This application is a simple tip calculator built with React and Vite. It allows users to calculate the tip amount based on the bill and the service rating.
 
-Currently, two official plugins are available:
+## Main Components
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+- [`App`](src/App.jsx): This is the main component of the application. It maintains the state of the bill amount, the service rating, and the calculated tip. It also renders the other components and handles the reset functionality.
+
+- [`BillInput`](src/components/BillInput.jsx): This component allows users to input the bill amount. It accepts a number and ensures that the value is always positive.
+
+- [`ServiceInput`](src/components/ServiceInput.jsx): This component is used to rate the service. The rating affects the calculated tip.
+
+- [`Output`](src/components/Output.jsx): This component displays the calculated tip based on the bill amount and the service rating.
+
+## Running the Application
+
+To run the application, use the `dev` script in the [package.json](package.json) file:
+
+```sh
+npm run dev
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tip Calculator</title>
+    <title>Tip React Calculator</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.css b/src/App.css
@@ -24,3 +24,7 @@
   border-radius: 6px;
   padding: 0.5rem 0;
 }
+
+.btn-reset {
+  margin-top: 1rem;
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,24 +1,45 @@
+import { useState } from "react";
 import "./App.css";
 import BillInput from "./components/BillInput";
-import FriendServiceInput from "./components/FriendServiceInput";
 import ServiceInput from "./components/ServiceInput";
+import Output from "./components/Output";
 
 function App() {
+  const [bill, setBill] = useState(0);
+  const [rateService, setRateService] = useState(0);
+  const [friendService, setFriendService] = useState(0);
+
+  const tip = bill * ((rateService + friendService) / 2 / 100);
+
+  function handleReset() {
+    setBill(0);
+    setRateService(0);
+    setFriendService(0);
+  }
+
   return (
     <>
       <h1>
         Tip <em>React</em> Calculator
       </h1>
-      <BillInput />
-      <ServiceInput />
-      <FriendServiceInput />
-      <div className="pay-box">
-        <p>Food: $100, Tips: $15</p>
-        <h3>
-          <em>Total:</em> $115
-        </h3>
-        <button>Reset</button>
-      </div>
+      <BillInput value={bill} onSetBill={setBill} />
+      <ServiceInput
+        value={rateService}
+        onSelect={setRateService}
+        label="How did you like the service?"
+      />
+      <ServiceInput
+        value={friendService}
+        onSelect={setFriendService}
+        label="How did your friend like the service?"
+      />
+      <Output bill={bill} tip={tip} />
+
+      {bill > 0 && (
+        <button className="btn-reset" onClick={handleReset}>
+          Reset
+        </button>
+      )}
     </>
   );
 }

diff --git a/src/components/BillInput.jsx b/src/components/BillInput.jsx
@@ -1,13 +1,16 @@
-export default function BillInput() {
+export default function BillInput({ value, onSetBill }) {
   return (
     <>
       <div className="tip-input">
         <label htmlFor="bill">How much was the bill?</label>
         <input
           type="number"
-          placeholder="Enter bill amount"
+          step="any"
+          placeholder="Bill value"
           id="bill"
           name="bill"
+          value={value.toString()}
+          onChange={(e) => onSetBill(Math.abs(Number(e.target.value)))}
         />
       </div>
     </>

diff --git a/src/components/FriendServiceInput.jsx b/src/components/FriendServiceInput.jsx
diff --git a/src/components/Output.jsx b/src/components/Output.jsx
@@ -0,0 +1,12 @@
+export default function Output({ bill, tip }) {
+  return (
+    <div className="pay-box">
+      <p>
+        Food: ${bill ? bill : 0} | Tips: ${tip}
+      </p>
+      <h3>
+        <em>Total:</em> ${bill + tip}
+      </h3>
+    </div>
+  );
+}
diff --git a/src/components/ServiceInput.jsx b/src/components/ServiceInput.jsx
@@ -1,13 +1,18 @@
-export default function ServiceInput() {
+export default function ServiceInput({ value, onSelect, label }) {
   return (
     <>
       <div className="tip-input">
-        <label htmlFor="service"> How did you like the service? </label>
-        <select name="service" id="service">
-          <option value="dissatisfied">Dissatisfied (0%)</option>
-          <option value="okay"> It was okay (5%)</option>
-          <option value="good">It was good (10%)</option>
-          <option value="amazing">Absolute amazing! (10%)</option>
+        <label htmlFor="service"> {label} </label>
+        <select
+          value={value}
+          onChange={(e) => onSelect(Number(e.target.value))}
+          name="service"
+          id="service"
+        >
+          <option value={0}>Dissatisfied (0%)</option>
+          <option value={5}> It was okay (5%)</option>
+          <option value={10}>It was good (10%)</option>
+          <option value={20}>Absolute amazing! (20%)</option>
         </select>
       </div>
     </>