freeCodeCamp · jdwilkin4 · Apr 11, 2025 · Mar 18, 2025 · Mar 19, 2025 · Mar 25, 2025
diff --git a/coding-challenges/tip-calculator/index.html b/coding-challenges/tip-calculator/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tip Calculator</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+
+    <div class="container">
+        <h1>Tip Calculator</h1>
+        <div class="result">
+            <p><strong>Tip:</strong> <span id="tipAmount">$0.00</span></p>
+            <p><strong>Tip Per Person:</strong> <span id="tipPerPerson">$0.00</span></p>
+            <p><strong>Total Amount:</strong> <span id="totalAmount">$0.00</span></p>
+            <p><strong>Amount Per Person:</strong> <span id="amountPerPerson">$0.00</span></p>
+        </div>
+
+        <div class="calculator">
+
+            <form id="tipCalculatorForm">
+                <div class="form-group">
+                    <label for="price">Price</label>
+                    <input type="number" id="price" name="price" placeholder="Enter amount" value="25">
+                </div>
+
+                <div class="form-group">
+                    <label for="tipPercentage">Tip %</label>
+                    <input type="number" id="tipPercentage" name="tipPercentage" placeholder="Enter tip percentage"
+                        value="15">
+                </div>
+
+                <div class="form-group">
+                    <label for="numPeople">People Sharing</label>
+                    <input type="number" id="numPeople" name="numPeople" placeholder="Enter number of people" value="1">
+                </div>
+
+                <button type="submit" id="calculateBtn">Calculate</button>
+                <button type="reset" id="clearBtn">Clear</button>
+            </form>
+
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/coding-challenges/tip-calculator/script.js b/coding-challenges/tip-calculator/script.js
@@ -0,0 +1,56 @@
+document.addEventListener("DOMContentLoaded", function () {
+
+    const priceInput = document.getElementById("price");
+    const tipPercentageInput = document.getElementById("tipPercentage");
+    const numPeopleInput = document.getElementById("numPeople");
+
+    const tipAmountDisplay = document.getElementById("tipAmount");
+    const tipPerPersonDisplay = document.getElementById("tipPerPerson");
+    const totalAmountDisplay = document.getElementById("totalAmount");
+    const amountPerPersonDisplay = document.getElementById("amountPerPerson");
+
+    const calculateButton = document.getElementById("calculateBtn");
+    const clearButton = document.getElementById("clearBtn");
+
+    calculateButton.addEventListener("click", function (event) {
+        event.preventDefault();
+        calculateTip();
+    });
+
+    clearButton.addEventListener("click", function (event) {
+        event.preventDefault();
+        clearFields();
+    });
+
+    function calculateTip() {
+        let price = parseFloat(priceInput.value);
+        let tipPercentage = parseFloat(tipPercentageInput.value);
+        let numPeople = parseInt(numPeopleInput.value);
+
+        if (isNaN(price) || isNaN(tipPercentage) || isNaN(numPeople) || numPeople <= 0) {
+            alert("Please enter valid values.");
+            return;
+        }
+
+        let totalTip = (price * (tipPercentage / 100)).toFixed(2);
+        let tipPerPerson = (totalTip / numPeople).toFixed(2);
+        let totalAmount = (price + parseFloat(totalTip)).toFixed(2);
+        let amountPerPerson = (totalAmount / numPeople).toFixed(2);
+
+        tipAmountDisplay.innerText = `$${totalTip}`;
+        tipPerPersonDisplay.innerText = `$${tipPerPerson}`;
+        totalAmountDisplay.innerText = `$${totalAmount}`;
+        amountPerPersonDisplay.innerText = `$${amountPerPerson}`;
+    }
+
+    function clearFields() {
+        priceInput.value = "";
+        tipPercentageInput.value = "";
+        numPeopleInput.value = "1";
+
+        tipAmountDisplay.innerText = "$0.00";
+        tipPerPersonDisplay.innerText = "$0.00";
+        totalAmountDisplay.innerText = "$0.00";
+        amountPerPersonDisplay.innerText = "$0.00";
+    }
+});
diff --git a/coding-challenges/tip-calculator/styles.css b/coding-challenges/tip-calculator/styles.css
@@ -0,0 +1,115 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #d5d1d1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.container {
+    background: white;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    width: 320px;
+}
+
+h1 {
+    background: #1e1a2e;
+    color: white;
+    padding: 10px;
+    border-radius: 5px;
+    margin-bottom: 20px;
+    text-align: center;
+    font-size: 1.5rem;
+}
+
+.result {
+    background: #e0e5d7;
+    padding: 10px;
+    margin-bottom: 15px;
+    border-radius: 5px;
+}
+
+.result p {
+    margin: 5px 0;
+    font-size: 1rem;
+}
+
+.calculator {
+    display: flex;
+    flex-direction: column;
+}
+
+.form-group {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
+
+label {
+    font-weight: bold;
+    font-size: 1rem;
+    flex: 1;
+    margin-right: 10px;
+}
+
+input {
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 1rem;
+    flex: 2;
+}
+
+button {
+    padding: 10px;
+    margin-top: 10px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1rem;
+    font-weight: bold;
+    width: 100%;
+}
+
+button:first-of-type {
+    background: #1e1a2e;
+    color: white;
+}
+
+button:last-of-type {
+    background: #a59898;
+    color: black;
+}
+
+button:hover {
+    opacity: 0.9;
+}
+
+@media (max-width: 480px) {
+    .container {
+        width: 90%;
+        padding: 15px;
+    }
+
+    h1 {
+        font-size: 1.25rem;
+    }
+
+    input, button {
+        font-size: 0.9rem;
+    }
+
+    .form-group {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    label {
+        margin-bottom: 5px;
+    }
+}
diff --git a/coding-challenges/tip-calculator/user-stories.md b/coding-challenges/tip-calculator/user-stories.md
@@ -0,0 +1,11 @@
+Fulfill the below user stories. Feel free to give it your own personal style.
+
+1. As a user, I should be able to enter a bill amount, tip percentage, and the number of people sharing the bill so that I can calculate the total cost per person.  
+
+1. As a user, I should be able to click a "Calculate" button to compute the tip and total cost so that I can get the results.  
+
+1. As a user, I should be able to to see the calculated tip amount, tip per person, total amount including the tip, and the total amount per person so that I can understand the cost breakdown.  
+
+1. As a user, I should be able to to reset all input fields and calculated values by clicking a "Clear" button so that I can start a new calculation easily.  
+
+1. As a user, I should see the results calculated to 2 decimal places.