diff --git a/package-lock.json b/package-lock.json index 494bd2e..b4d8bb1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^4.7.1", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" } @@ -14160,6 +14161,14 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-icons": { + "version": "4.7.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz", + "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -26959,6 +26968,12 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "react-icons": { + "version": "4.7.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz", + "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==", + "requires": {} + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/package.json b/package.json index a0bce27..dab4671 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^4.7.1", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, diff --git a/src/App.css b/src/App.css index e69de29..088bcd1 100644 --- a/src/App.css +++ b/src/App.css @@ -0,0 +1,101 @@ +body { + margin: 0px; + padding: 0px; + +} + +.container { + background-image: url(./images/tip2.png); + text-align: center; + height: 45vw; + display: flex; + justify-content: center; + align-items: center; + width: 100vw; + z-index: 8; +} + + +.child { + /* padding-top: 20%; */ + background-color: #52796f; + background-image: url(./images/tip4.svg); + background-size: 190px auto; + background-repeat: no-repeat; + height: 35vw; + width: 50vw; + border: 2px solid black; + border-radius: 30px; + z-index: 5; +} + +.child>h1, +label { + + padding-top: 20%; +} + +.header { + font-size: 35px; + font-style: oblique; + font-family: fantasy; + +} + +.label-0 { + font-size: 25px; + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + padding-bottom: 13px; + color: #f2f2f2; + +} + +.input-0 { + margin-left: 9px; + text-align: center; + padding: 10px 20px; + border: 0.5px solid black; + border-radius: 20px; +} + +.btn { + padding: 10px 30px; + border: 1px solid black; + border-radius: 25px; + cursor: pointer; + font-size: 18px; + font-family: Georgia, 'Times New Roman', Times, serif; +} + +.btn:hover { + background-color: #ff7d00; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; +} + +.btn:active { + background-color: #dc2f02; + color: white; + font-family: 'Times New Roman', Times, serif; +} + +.result { + margin-top: 50px; + background-color: #06d6a0; + color: black; + display: inline-block; + padding: 10px 20px; + border: dotted 2px black; + border-radius: 20px; + +} + + +.icon { + font-size: 45px; + padding-top: 40px; + background: #74c69d; + padding: 5px 15px; + border: 0.5px solid black; + border-radius: 30px; + +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 93624ea..35a09e8 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,41 @@ import "./App.css"; +import { FcCalculator } from "react-icons/fc"; +import { useState } from "react" function App() { + const [input, setInput] = useState() + const [totally, setTotally] = useState() + function calculate() { + if (input >= 50 && input <= 300) { + let tip1 = input * 0.15 + let total1 = input * 0.15 / 0.15 + input * 0.15 + let final = (`Your bill is ${input} and your tip is ${tip1} and finally your total is ${total1}`) + setTotally(final) + + } else { + let tip2 = input * 0.20 + let total2 = input * 0.20 / 0.20 + input * 0.20 + let final = (`Your bill is ${input} and your tip is ${tip2} and finally your total is ${total2}`) + setTotally(final) + } + } return ( -
-

Hello World

-
+
+
+
+

TIP CALCULATOR

+ +
+
+ +
+ +

{totally}

+
+
+
); } diff --git a/src/images/tip1.jpg b/src/images/tip1.jpg new file mode 100644 index 0000000..73ab4e3 Binary files /dev/null and b/src/images/tip1.jpg differ diff --git a/src/images/tip2.png b/src/images/tip2.png new file mode 100644 index 0000000..119dbef Binary files /dev/null and b/src/images/tip2.png differ diff --git a/src/images/tip3.gif b/src/images/tip3.gif new file mode 100644 index 0000000..e565824 Binary files /dev/null and b/src/images/tip3.gif differ diff --git a/src/images/tip4.svg b/src/images/tip4.svg new file mode 100644 index 0000000..55f1da8 --- /dev/null +++ b/src/images/tip4.svg @@ -0,0 +1 @@ + \ No newline at end of file