From 6fef24b7674512f9db73592534a6bb9da0675e89 Mon Sep 17 00:00:00 2001 From: Ayush <120788538+ayushsgithub@users.noreply.github.com> Date: Thu, 19 Oct 2023 10:21:03 +0530 Subject: [PATCH] chore: add Tip Calculator #1277 (#1306) * feat(play/tip-calculator): add Tip Calculator #1277 * renamed extensions - js to jsx * sytle.css mod; root:selector removed --------- Co-authored-by: Tapas Adhikary --- src/plays/tip-calculator/Readme.md | 13 +++ src/plays/tip-calculator/TipCalculator.jsx | 79 +++++++++++++++ .../tip-calculator/components/BillAmount.jsx | 32 +++++++ .../tip-calculator/components/DisplayCard.jsx | 58 +++++++++++ .../components/PeopleAmount.jsx | 35 +++++++ .../tip-calculator/components/TipAmount.jsx | 95 +++++++++++++++++++ src/plays/tip-calculator/styles.css | 1 + 7 files changed, 313 insertions(+) create mode 100644 src/plays/tip-calculator/Readme.md create mode 100644 src/plays/tip-calculator/TipCalculator.jsx create mode 100644 src/plays/tip-calculator/components/BillAmount.jsx create mode 100644 src/plays/tip-calculator/components/DisplayCard.jsx create mode 100644 src/plays/tip-calculator/components/PeopleAmount.jsx create mode 100644 src/plays/tip-calculator/components/TipAmount.jsx create mode 100644 src/plays/tip-calculator/styles.css diff --git a/src/plays/tip-calculator/Readme.md b/src/plays/tip-calculator/Readme.md new file mode 100644 index 000000000..9c54a486e --- /dev/null +++ b/src/plays/tip-calculator/Readme.md @@ -0,0 +1,13 @@ +# Tip Calculator + +An app to calculate tip evenly where user can divide the total bill amount into sharing number of people and the tip, and distribute the bill for each. Split your bill with friends and family and calculate tip easily and no more hassle of calculating tip and bill amount. + +## Play Demographic + +- Language: js +- Level: Beginner + +## Creator Information + +- User: ayushsgithub +- Gihub Link: https://github.com/ayushsgithub diff --git a/src/plays/tip-calculator/TipCalculator.jsx b/src/plays/tip-calculator/TipCalculator.jsx new file mode 100644 index 000000000..81f554f25 --- /dev/null +++ b/src/plays/tip-calculator/TipCalculator.jsx @@ -0,0 +1,79 @@ +'use client'; +import React, { useState, useEffect } from 'react'; +import PlayHeader from 'common/playlists/PlayHeader'; +import './styles.css'; +import BillAmount from './components/BillAmount'; +import TipAmount from './components/TipAmount'; +import PeopleAmount from './components/PeopleAmount'; +import DisplayCard from './components/DisplayCard'; + +// WARNING: Do not change the entry componenet name + +function TipCalculator(props) { + // Your Code Start below. + + const [bill, setBill] = useState(); + const [tip, setTip] = useState(0); + const [people, setPeople] = useState(0); + + const [tipPerPerson, setTipPerPerson] = useState(0); + const [totalPerPerson, setTotalPerPerson] = useState(0); + const [total, setTotal] = useState(0); + + const handleResetTip = (e) => { + e.preventDefault(); + setBill(0); + setPeople(0); + setTipPerPerson(0); + setTotalPerPerson(0); + setTotal(0); + }; + + useEffect(() => { + if (bill && tip && people) { + const tipAmount = Number(bill) * Number(tip); + const totalAmount = Number(bill) + tipAmount; + + setTipPerPerson(tipAmount / people); + setTotalPerPerson(totalAmount / people); + setTotal(totalAmount); + } + }, [bill, tip, people]); + + return ( + <> +
+ +
+ {/* Your Code Starts Here */} +
+

+ Tip Splitter +

+
+
+
+
+ + + +
+ + + +
+
+
+ {/* Your Code Ends Here */} +
+
+ + ); +} + +export default TipCalculator; diff --git a/src/plays/tip-calculator/components/BillAmount.jsx b/src/plays/tip-calculator/components/BillAmount.jsx new file mode 100644 index 000000000..f536216d7 --- /dev/null +++ b/src/plays/tip-calculator/components/BillAmount.jsx @@ -0,0 +1,32 @@ +import React from 'react'; + +const BillAmount = (props) => { + const { bill, setBill } = props; + + return ( +
+ + +
+
+ ₹ +
+ + setBill(e.target.value)} + /> +
+
+ ); +}; + +export default BillAmount; diff --git a/src/plays/tip-calculator/components/DisplayCard.jsx b/src/plays/tip-calculator/components/DisplayCard.jsx new file mode 100644 index 000000000..e7137fe51 --- /dev/null +++ b/src/plays/tip-calculator/components/DisplayCard.jsx @@ -0,0 +1,58 @@ +import React from 'react'; + +const DisplayCard = (props) => { + const { reset, tipPerPerson, totalPerPerson, total } = props; + + const data = [ + { + label: 'Tip Amount', + value: tipPerPerson.toFixed(2) + }, + { + label: 'Total', + value: totalPerPerson.toFixed(2) + } + ]; + + return ( +
+
+ {data.map((item, i) => ( +
+
+

{item.label}

+

/ person

+
+
+ ₹ + + {item.value} + +
+
+ ))} + +
+

Total Bill

+ +
+ ₹ + + {total?.toFixed(2)} + +
+
+
+ + +
+ ); +}; + +export default DisplayCard; diff --git a/src/plays/tip-calculator/components/PeopleAmount.jsx b/src/plays/tip-calculator/components/PeopleAmount.jsx new file mode 100644 index 000000000..cb309239e --- /dev/null +++ b/src/plays/tip-calculator/components/PeopleAmount.jsx @@ -0,0 +1,35 @@ +// import { UsersIcon } from '@heroicons/react/20/solid'; +import PersonIcon from '@mui/icons-material/Person'; + +const PeopleAmount = ({ people, setPeople }) => { + return ( +
+ + +
+
+ {/*
+ + setPeople(e.target.value)} + /> +
+
+ ); +}; + +export default PeopleAmount; diff --git a/src/plays/tip-calculator/components/TipAmount.jsx b/src/plays/tip-calculator/components/TipAmount.jsx new file mode 100644 index 000000000..ec389e332 --- /dev/null +++ b/src/plays/tip-calculator/components/TipAmount.jsx @@ -0,0 +1,95 @@ +import { useState } from 'react'; + +const tips = [ + { tip: 5, isCustom: false }, + { tip: 10, isCustom: false }, + { tip: 15, isCustom: false }, + { tip: 20, isCustom: false }, + { tip: 30, isCustom: false }, + { tip: 0, isCustom: true } +]; + +const TipAmount = ({ setTip }) => { + const [customSelected, setCustomSelected] = useState(false); + const [activeTip, setActiveTip] = useState(null); + const [customTip, setCustomTip] = useState(0); + + const handleTipClick = (index) => { + setCustomSelected(false); + + if (activeTip === index) { + setActiveTip(null); + + return; + } + + setActiveTip(index); + setTip(tips[index].tip / 100); + }; + + const handleCustomTip = () => { + setActiveTip(null); + setCustomSelected(true); + setTip(customTip / 100); + }; + + const handleCustomTipBlur = () => { + setTip(customTip / 100); + if (customTip > 0) return; + setCustomSelected(false); + }; + + return ( +
+ + +
+ {tips.map((tip, index) => ( +
+ {tip.isCustom ? ( + <> + {customSelected ? ( + setCustomTip(e.target.value)} + /> + ) : ( + + )} + + ) : ( + + )} +
+ ))} +
+
+ ); +}; + +export default TipAmount; diff --git a/src/plays/tip-calculator/styles.css b/src/plays/tip-calculator/styles.css new file mode 100644 index 000000000..5fd508fa9 --- /dev/null +++ b/src/plays/tip-calculator/styles.css @@ -0,0 +1 @@ +/* enter stlyes here */