tip calculator using dom

src/App.css

@@ -0,0 +1,40 @@
+body{
+  height: 100vh;
+  background-color: rgb(241, 155, 241);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family:Verdana, Geneva, Tahoma, sans-serif ;
+  color: white;
+}
+.tip {
+  gap: 10px;
+  width: 15rem;
+  height: 30;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  background-color: rgb(252, 104, 252);
+  padding: 20px;
+
+}
+.tip > input{
+  padding: 5px;
+  background: rgb(252, 104, 252);
+  border: 1px solid rgb(105, 2, 105);
+}
+.tip > input:focus{
+  border: 1px dashed rgb(105, 2, 105);
+  outline: 0;
+}
+.tip > button{
+  padding: 5px;
+  width: 5rem;
+  border: 1px solid rgb(105, 2, 105);
+  border-radius: 10px;
+  background: rgb(252, 104, 252);
+  color: white;
+  font-size: 18px;
+  cursor: pointer;
+}

src/App.js

@@ -1,9 +1,35 @@
+import { useState } from "react";
+import React from "react";
+import { ReactDOM } from "react";
 import "./App.css";
 
 function App() {
+
+        const [bill,setBill] = useState()
+        const [tips,setTips] = useState("")
+        const [result,setResult]=  useState("")
+
+        function CheckBill(){
+
+          let tip = ""
+          if(bill > 50 && bill < 300){
+            tip = bill * 0.15
+            setTips(tip)
+          }else 
+          tip = bill * 0.20
+
+          setResult(`Your bill was ${bill} and tip is ${tips} and the Total value is ${bill + tips}`)
+        }
+
   return (
-    <div>
-      <h1>Hello World</h1>
+    <div className="tip">
+      <h2>Tip Calculator</h2>
+     <span>Enter your Bill</span> <input type="number" placeholder="Bill" onChange={(e) => setBill(e.target.value *1)}/>
+
+       <button onClick={(CheckBill)}>Check</button>
+
+       <p>{result}</p>
+
     </div>
   );
 }