durgesh2001 · RajAdwaita · Oct 3, 2022 · Oct 3, 2022 · Oct 3, 2022 · Oct 3, 2022
diff --git a/Bill Splitter/edit.css b/Bill Splitter/edit.css
@@ -0,0 +1,150 @@
+:root {
+    --space-cadet: #6beb9c;
+    --space-cadet-dark: #0ba753;
+    --lavender-blue: #c4c4ff;
+
+}
+
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+
+}
+
+body {
+    line-height: 1.6;
+    background: var(--space-cadet-dark);
+    font-size: 1.1rem;
+}
+
+.center {
+    /* text-align: center; */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+
+
+}
+
+.container {
+    min-height: 100vh;
+
+}
+
+.bill-divider-wrapper {
+    max-width: 1080px;
+    margin: 0 auto;
+    background: #fff;
+    overflow: hidden;
+
+}
+
+.title {
+    background: var(--space-cadet);
+    padding: 0.7rem 0rem;
+    margin-top: auto;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.3);
+}
+
+.title h1 {
+    text-align: center;
+    color: #fff;
+
+}
+
+.title h4 {
+    text-align: center;
+    color: #fff;
+
+}
+
+.bill-inputs,
+.bill-output {
+    padding: 2rem 2.5rem;
+}
+
+.bill-inputs {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.form-group {
+    padding: 0.5rem 0;
+}
+
+.form-global label {
+    text-transform: uppercase;
+    display: inline-block;
+    padding-bottom: 0.2rem;
+}
+
+.form-control {
+    width: 100%;
+    font-size: 1rem;
+    padding: 0.5rem;
+    border: none;
+    border-bottom: 1.5px solid var(--lavender-blue);
+    transition: all 0.3s ease-in-out;
+    --webkit-transition: all 0.3s ease-in-out;
+    -moz-transition: all 0.3s ease-in-out;
+    -ms-transition: all 0.3s ease-in-out;
+    -o-transition: all 0.3s ease-in-out;
+
+
+}
+
+
+
+.form-control:focus {
+    outline: 0;
+    border-color: var(--space-cadet);
+
+}
+
+#calc-btn {
+    padding: 0.9rem 2.2rem;
+    font-size: 1.05rem;
+    text-transform: uppercase;
+    display: inline-block;
+    /* align-items: center; */
+    margin-top: 1.25rem;
+    background: var(--space-cadet-dark);
+    border: none;
+    cursor: pointer;
+    transition: all 0.3s ease-in-out;
+    --webkit-transition: all 0.3s ease-in-out;
+    -moz-transition: all 0.3s ease-in-out;
+    -ms-transition: all 0.3s ease-in-out;
+    -o-transition: all 0.3s ease-in-out;
+}
+
+#calc-btn:focus {
+    outline: 0;
+}
+
+#calc-btn:hover {
+    background: var(--space-cadet);
+}
+
+.text-group {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.3rem 0;
+}
+
+.text-group h2 {
+    font-weight: 500;
+    opacity: 0.8;
+
+}
+
+.text-group:nth-child(1) h2 {
+    font-weight: 500;
+}
+
+.text-group span {
+    font-weight: 500;
+}
diff --git a/Bill Splitter/index.html b/Bill Splitter/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>THE BILL</title>
+    <link rel="stylesheet" href="./edit.css">
+</head>
+
+<body>
+    <div class="container center">
+        <div class="bill-divider-wrapper">
+            <div class="title">
+                <h1>BILLING</h1>
+                <h4>No Money No Honey</h4>
+            </div>
+
+            <div class="bill-inputs">
+                <form id="bill-divider-form">
+
+
+                    <div class="form-group">
+                        <label for="subtotal">SubTotal Amount ( ₹. )</label>
+                        <input id="subtotal" type="number" class="form-control" min="0" step="any" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="tip">Tip %</label>
+                        <input id="tip" type="number" class="form-control" min="0" step="any" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="no-of-person">No. Of Persons</label>
+                        <input id="no-of-person" type="number" class="form-control" min="0" step="1" required>
+                    </div>
+
+
+                    <input type="submit" id="calc-btn" value="calculate">
+
+
+
+
+                </form>
+            </div>
+
+            <div class="bill-output">
+                <div class="text-group">
+                    <h2>Total Amount</h2>
+                    <span id="total-bill">₹ 00.00</span>
+                </div>
+                <div class="text-group">
+                    <h2>Bill / Person</h2>
+                    <span id="bill-per-person">₹ 00.00</span>
+                </div>
+                <div class="text-group">
+                    <h2>Total Tip</h2>
+                    <span id="total-tip">₹ 00.00</span>
+                </div>
+                <div class="text-group">
+                    <h2>Tip / Person</h2>
+                    <span id="tip-per-person">₹ 00.00</span>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+
+
+
+    <script src="./work.js"></script>
+
+</body>
+
+</html>
diff --git a/Bill Splitter/work.js b/Bill Splitter/work.js
@@ -0,0 +1,39 @@
+const billDivideForm = document.getElementById('bill-divider-form');
+
+billDivideForm.addEventListener('submit', billDividerHandler);
+
+function billDividerHandler(event) {
+    event.preventDefault();
+    const inputs = getInputs();
+    console.log(inputs);
+    showCalculateOutput(inputs);
+}
+
+function getInputs() {
+    let subTotal = document.getElementById('subtotal').value;
+    let tipPercent = document.getElementById('tip').value;
+    let noOfPerson = document.getElementById('no-of-person').value;
+    // console.log(subTotal, tipPercent, noOfPerson);
+    return { subTotal, tipPercent, noOfPerson };
+
+
+}
+
+function showCalculateOutput(input) {
+    billDivideForm.reset();
+
+    let totalTip = (parseFloat(input.subTotal) * parseFloat(input.tipPercent)) / 100;
+
+    let totalAmount = parseFloat(input.subTotal) + totalTip;
+    let tipPerPerson = totalTip / parseFloat(input.noOfPerson);
+    let amountPerPerson = totalAmount / parseFloat(input.noOfPerson);
+
+    document.getElementById('total-bill').innerHTML = `$ ${totalAmount.toFixed(2)}`;
+    document.getElementById('bill-per-person').innerHTML = `$ ${amountPerPerson.toFixed(2)}`;
+    document.getElementById('total-tip').innerHTML = `$ ${totalTip.toFixed(2)}`;
+    document.getElementById('tip-per-person').innerHTML = `$ ${tipPerPerson.toFixed(2)}`;
+
+
+}
+
+
diff --git a/Movie_Website/README.md b/Movie_Website/README.md
@@ -0,0 +1,2 @@
+# Movie_Website
+