DEV Community: gaganjot

Easy Discount Calculation: Tax, Fees & Discount Percentage Explained

gaganjot — Wed, 15 Jan 2025 17:46:57 +0000

Discount Calculator💻

we'll explore an Discount Calculator built using HTML, CSS, and JavaScript. I'll break down the entire code step-by-step and explain how each section works. Additionally, I'll provide instructions on how you can test this calculator yourself and suggest improvements you can make to the code.

Test the Code Here 🔗

Test the Code

What This Calculator Does 🧮

This calculator is designed to help users calculate the final price of an item after applying a discount, tax, and any additional fees. It takes inputs for the original price, quantity, discount percentage, tax percentage, and additional fees. Then, it calculates the total cost based on these inputs.

HTML Structure

Here’s the basic structure of the HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Discount Calculator</title>
    <style>
        /* CSS styles go here */
    </style>
</head>
<body class="discount-body">

    <h1 class="discount-heading">Advanced Discount Calculator</h1>

    <div class="container discount-container">
        <!-- Form Inputs -->
        <label for="currency" class="discount-label">Currency:</label>
        <select id="currency" class="discount-select">
            <option value="$">USD ($)</option>
            <option value="€">EUR (€)</option>
            <option value="£">GBP (£)</option>
            <option value="₹">INR (₹)</option>
        </select>

        <label for="original-price" class="discount-label">Original Price (per item):</label>
        <input type="number" id="original-price" class="discount-input" placeholder="Enter original price" required>

        <!-- More form inputs... -->
        <button class="discount-button" onclick="calculateDiscount()">Calculate</button>

        <div id="discount-result" class="result discount-result"></div>
    </div>

    <script>
        // JavaScript functions go here
    </script>

</body>
</html>

Explanation:

DOCTYPE and HTML Tags: The <!DOCTYPE html> declaration defines the document type, which is HTML5 in this case. The <html> tag contains all the HTML content.
Head Section: Inside the <head> tag, we have meta tags for setting the character set and viewport for responsiveness. The title tag defines the title of the page displayed in the browser tab.
Body Section: The body of the page contains the actual content that users will interact with. Here, we use an h1 tag for the main heading and a div for the container that holds the form elements.

CSS Styling

Now, let's talk about the CSS that styles the calculator:

body.discount-body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f3f4f6;
    color: #333;
    box-sizing: border-box;
}

Breakdown:

body.discount-body: We apply general styles for the body, such as setting the font family to Arial, adding padding around the content, and setting a light background color. The box-sizing: border-box; ensures that padding and borders are included in the element's total width and height.

h1.discount-heading {
    text-align: center;
    color: #28a745;
    margin-bottom: 15px;
    font-size: 24px;
}

h1.discount-heading: The heading is centered, with a green color (#28a745), a margin at the bottom, and a font size of 24px.

.container.discount-container {
    max-width: 500px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 2px solid #28a745;
}

.container.discount-container: This section styles the container where all the form inputs and buttons are located. It has a maximum width of 500px, centered horizontally with margin: 0 auto;, and a green border. The box-shadow creates a subtle shadow around the container to give it depth.

JavaScript Functionality

The main functionality of the calculator is handled by JavaScript. Here's the calculateDiscount function:

function calculateDiscount() {
    const currency = document.getElementById('currency').value;
    const originalPrice = parseFloat(document.getElementById('original-price').value);
    const quantity = parseInt(document.getElementById('quantity').value);
    const discountPercentage = parseFloat(document.getElementById('discount-percentage').value);
    const taxPercentage = parseFloat(document.getElementById('tax-percentage').value);
    const additionalFees = parseFloat(document.getElementById('additional-fees').value);
    const resultDiv = document.getElementById('discount-result');
    
    if (
        isNaN(originalPrice) ||
        isNaN(quantity) ||
        isNaN(discountPercentage) ||
        isNaN(taxPercentage) ||
        isNaN(additionalFees)
    ) {
        alert('Please fill in all the fields with valid values.');
        return;
    }

    const totalOriginalPrice = originalPrice * quantity;
    const discountAmount = (totalOriginalPrice * discountPercentage) / 100;
    const discountedPrice = totalOriginalPrice - discountAmount;
    const taxAmount = (discountedPrice * taxPercentage) / 100;
    const finalPrice = discountedPrice + taxAmount + additionalFees;

    resultDiv.innerHTML = `
        <p><strong>Original Price:</strong> ${currency}${totalOriginalPrice.toFixed(2)}</p>
        <p><strong>Discount Amount:</strong> ${currency}${discountAmount.toFixed(2)}</p>
        <p><strong>Tax Amount:</strong> ${currency}${taxAmount.toFixed(2)}</p>
        <p><strong>Additional Fees:</strong> ${currency}${additionalFees.toFixed(2)}</p>
        <p><strong>Final Price:</strong> ${currency}${finalPrice.toFixed(2)}</p>
    `;
    resultDiv.style.display = 'block';
}

Breakdown:

Element Selection: We use document.getElementById() to retrieve the values from the form inputs.
Validation: We check if the input values are valid numbers. If any value is invalid, we show an alert to the user.
Calculation: The total price is calculated by multiplying the original price by the quantity. We then apply the discount, calculate the tax, and add any additional fees.
Display Results: The results are displayed in a div with the id discount-result. We use .innerHTML to dynamically update the content, and .style.display = 'block' to show the result.

Suggestions for Improvement 💡

The code works well, but there are always opportunities for improvement. Here are a few suggestions:

Validation for Non-Negative Numbers: Make sure the user cannot input negative numbers for prices, quantity, or fees.
Optional Tax and Fees: You could make the tax and additional fees fields optional by setting default values or adding more sophisticated input handling.
User Feedback: Instead of an alert for invalid input, consider displaying a message within the page itself, which is less intrusive.

What other improvements do you think could be made to this code? Drop your suggestions in the comments below and let’s make this calculator even better!

Test the Code Here 🔗

Test the Code

CC ↔ HP Converter

gaganjot — Mon, 13 Jan 2025 08:19:10 +0000

CC ↔ HP Converter

In this article, we'll break down the code behind a CC ↔ HP (Cubic Centimeters ↔ Horsepower) converter. This simple yet practical tool helps users convert between two essential units for vehicles and engines. We will walk through the entire code, explain each part in detail, and explore the logic behind the CC ↔ HP conversion. If you're a developer, you’ll appreciate the logic, structure, and the opportunity to improve the code!

But before we dive in, test the code yourself by clicking on the link below and trying the calculator for yourself. 🚀

🔗 Test the Code Here! 🚗⚡ 🔗

Key Features of the CC ↔ HP Converter:

Conversion Factor: A customizable factor that determines how CC and HP are related.
Conversion Type: The ability to switch between converting from CC to HP and vice versa.
Interactive Inputs: Two input fields that are shown based on the selected conversion type.
Error Handling: Messages that guide users to enter valid values.

Detailed Breakdown of the Code

1. HTML Structure:

The HTML part of the code defines the structure of the CC ↔ HP Converter interface.

    <div class="cc-hp-calculator-container">
      <h2 class="cc-hp-calculator-header">CC ↔ HP Converter 🚗⚡</h2>
      <!-- Conversion Factor -->
      <div class="cc-hp-input-group" id="conversion-factor-group">
        <label for="conversion-factor">Conversion Factor (e.g., 15 CC = 1 HP) ⚙️:</label>
        <input type="number" id="conversion-factor" value="15" />
      </div>
      <!-- Conversion Type -->
      <div class="cc-hp-input-group" id="conversion-type-group">
        <label for="conversion-type">Conversion Type 🔄:</label>
        <select id="conversion-type" onchange="toggleInputs()">
          <option value="ccToHp">CC to HP 🚗 → ⚡</option>
          <option value="hpToCc">HP to CC ⚡ → 🚗</option>
        </select>
      </div>
      <!-- Input for CC -->
      <div class="cc-hp-input-group" id="cc-input-group">
        <label for="cc-input">Enter CC 📏:</label>
        <input type="number" id="cc-input" placeholder="e.g., 150" />
      </div>
      <!-- Input for HP -->
      <div class="cc-hp-input-group" id="hp-input-group" style="display: none;">
        <label for="hp-input">Enter HP ⚡:</label>
        <input type="number" id="hp-input" placeholder="e.g., 10" />
      </div>
      <!-- Convert Button -->
      <button id="convert-button" class="cc-hp-convert-button" onclick="convert()">🔍 Convert</button>
      <!-- Result -->
      <p id="result-display" class="cc-hp-result-display"></p>
      <!-- Error Message -->
      <div id="error-message" class="cc-hp-error-message"></div>
    </div>

- Conversion Factor Input: This input allows users to specify the conversion factor, which defaults to 15 CC = 1 HP.

- Conversion Type Selector: This dropdown lets users switch between CC to HP and HP to CC conversions.

- CC and HP Input Fields: Depending on the selection in the dropdown, the relevant input field (either for CC or HP) will be displayed for user input.

- Convert Button: The button that triggers the conversion when clicked.

- Result Display: A place to show the result of the conversion.

- Error Message: This is where error messages will be displayed if the user enters invalid data.

2. CSS Styling:

The styles provide a clean and user-friendly design for the converter. Here's the key CSS used for the layout:

    .cc-hp-body {
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 20px;
      background-color: #f4f4f4;
    }

    .cc-hp-calculator-container {
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 10px;
      background: #fff;
    }

- General Styling: The overall page uses a light background with centered text and a clean, minimal design.

- Calculator Container: The container is centered with a fixed width of 400px and includes padding for spacing.

- Button and Inputs: These are styled to be large and easy to interact with, with hover effects for the button.

3. JavaScript Functions:

This is where the real magic happens. The JavaScript functions handle user input, calculate the conversion, and display the result.

toggleInputs Function:

This function shows and hides the appropriate input fields based on the selected conversion type (CC to HP or HP to CC).

    function toggleInputs() {
      const conversionType = document.getElementById("conversion-type").value;
      const ccInputGroup = document.getElementById("cc-input-group");
      const hpInputGroup = document.getElementById("hp-input-group");

      if (conversionType === "ccToHp") {
        ccInputGroup.style.display = "block";
        hpInputGroup.style.display = "none";
      } else {
        ccInputGroup.style.display = "none";
        hpInputGroup.style.display = "block";
      }
    }

- Logic: If the user selects "CC to HP," the CC input field will be shown. If they select "HP to CC," the HP input field will appear instead.

convert Function:

This function performs the conversion based on the input values and conversion factor.

    function convert() {
      const conversionFactor = parseFloat(document.getElementById("conversion-factor").value);
      const conversionType = document.getElementById("conversion-type").value;
      const errorMessage = document.getElementById("error-message");
      const resultDisplay = document.getElementById("result-display");

      // Clear previous error and result
      errorMessage.textContent = "";
      resultDisplay.textContent = "";

      if (conversionType === "ccToHp") {
        const ccValue = parseFloat(document.getElementById("cc-input").value);
        if (isNaN(ccValue) || ccValue <= 0) {
          errorMessage.textContent = "Please enter a valid CC value greater than 0.";
          return;
        }
        const hpValue = ccValue / conversionFactor;
        resultDisplay.textContent = `${ccValue} CC is approximately ${hpValue.toFixed(2)} HP.`;
      } else if (conversionType === "hpToCc") {
        const hpValue = parseFloat(document.getElementById("hp-input").value);
        if (isNaN(hpValue) || hpValue <= 0) {
          errorMessage.textContent = "Please enter a valid HP value greater than 0.";
          return;
        }
        const ccValue = hpValue * conversionFactor;
        resultDisplay.textContent = `${hpValue} HP is approximately ${ccValue.toFixed(2)} CC.`;
      }
    }

- Logic: It first retrieves the conversion factor and the selected conversion type. It then checks if the user has entered valid values and calculates the result based on the formula (CC / conversionFactor\ for CC to HP, HP \* conversionFactor\ for HP to CC).

Suggestions for Improvement:

While the code works great as is, there are always ways to improve and enhance the functionality. Here are a few ideas:

Add unit conversion support: Allow users to convert other units (e.g., Liters to CC).
Validation Enhancements: Add checks for extreme values or very large inputs.
Mobile optimization: Ensure the layout works smoothly on smaller screens.
Error Message Improvements: Provide more descriptive error messages for better user experience.

If you have any suggestions on how to improve the code or features you'd like to see, feel free to leave your thoughts in the comments below! 🙌

By following this guide, you should now have a good understanding of how the CC ↔ HP converter works, and how you can potentially improve and extend the functionality. Happy coding! 👨‍💻👩‍💻

Dog RER & MER Calculator

gaganjot — Mon, 13 Jan 2025 06:42:45 +0000

Dog RER and MER Calculator 🐶

In this article, we will go through a comprehensive breakdown of the Dog RER (Resting Energy Requirement) and MER (Maintenance Energy Requirement) calculator, explaining each part of the code, its purpose, and how you can improve it. If you want to test the code, you can do so by clicking here 🧑‍💻.

This web-based tool allows pet owners to calculate their dog's calorie needs based on their weight, life stage, and activity level. The calculation involves two major formulas: one for Resting Energy Requirement (RER) and one for Maintenance Energy Requirement (MER).

HTML Structure 🖥️

The Boilerplate:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Calculate your dog's Resting Energy Requirement (RER) and Maintenance Energy Requirement (MER)...">
    <meta name="keywords" content="dog RER calculator, dog MER calculator, dog nutrition, pet calorie calculator, resting energy requirement, maintenance energy requirement">
    <meta name="author" content="Your Website Name">
    <title>Dog RER and MER Calculator</title>
</head>
<body class="rer-body">

The code starts with standard HTML5 structure. The <meta> tags are essential for SEO and describe the content of the page.
The <title> tag helps search engines and browsers understand the topic of the page.

The Form Elements:

<label for="weight" class="rer-label">Dog's Weight (in kg):</label>
<input type="number" id="weight" class="rer-input" placeholder="Enter your dog's weight" required>

The user enters the weight in a <input> field of type number, ensuring only numeric values are accepted.
The required attribute ensures the input must be filled before submission.

CSS Styling for Layout and Responsiveness 🎨

We used CSS to style the calculator and ensure it looks great on all screen sizes. Here's the breakdown of the CSS applied:

body.rer-body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f9f9f9;
    box-sizing: border-box;
}

The body has a light background color, padding for spacing, and a consistent font for readability.

h1.rer-heading {
    text-align: center;
    color: #2a9d8f;
    margin-bottom: 20px;
    font-size: 28px;
}

The heading is styled to be centered, with a teal color and appropriate spacing.

JavaScript Functionality for Calculations 📊

Here’s where the core functionality lies. This script takes the inputs, performs calculations, and displays results dynamically.

function calculateRER() {
    const weight = parseFloat(document.getElementById('weight').value);
    const age = document.getElementById('age').value;
    const activity = document.getElementById('activity').value;

    if (isNaN(weight) || weight <= 0) {
        errorMessage.innerHTML = 'Please enter a valid weight greater than zero.';
        errorMessage.style.display = 'block';
        return;
    }

    const rer = 70 * Math.pow(weight, 0.75);
    let lifeStageMultiplier = 1.6;

    if (age === 'puppy') lifeStageMultiplier = 3.0;
    if (age === 'senior') lifeStageMultiplier = 1.2;
    if (activity === 'moderate') lifeStageMultiplier *= 1.2;
    if (activity === 'high') lifeStageMultiplier *= 1.4;

    const mer = (rer * lifeStageMultiplier).toFixed(2);

    resultDiv.innerHTML = `
        <p><strong>Dog's Weight:</strong> ${weight} kg</p>
        <p><strong>Life Stage:</strong> ${age}</p>
        <p><strong>Activity Level:</strong> ${activity}</p>
        <p><strong>Resting Energy Requirement (RER):</strong> ${rer.toFixed(2)} kcal/day</p>
        <p><strong>Maintenance Energy Requirement (MER):</strong> ${mer} kcal/day</p>
    `;
    resultDiv.style.display = 'block';
}

Code Explanation:

We start by extracting the input values (weight, life stage, and activity level) from the HTML form.
We check if the weight is valid (isNaN(weight) ensures it's a number and weight <= 0 prevents non-positive numbers).
The Resting Energy Requirement (RER) is calculated using the formula: 70 * weight^0.75.
Based on the life stage (puppy, adult, or senior) and activity level (low, moderate, high), we adjust the Maintenance Energy Requirement (MER) with multipliers.
Finally, we display the results dynamically in the rer-result div.

Testing the Code 🧪

You can test the code live by clicking here 🧑‍💻. It’s a great way to see the calculations in action and check if everything works as expected.

How to Improve This Code 💡

Feel free to improve the code! Here are some areas where you might enhance its functionality:

Improve Input Validation: Ensure all fields are validated thoroughly, and provide user-friendly error messages.
Unit Conversion: Allow the user to switch between metric and imperial units for weight and activity level.
Responsive Design Enhancements: Ensure the design adapts even better to smaller screens (e.g., mobile devices).
Feature Addition: Add additional fields like breed or age in months for more precise calculations.

Let me know your suggestions for improvement in the comments below! 👇

By following these detailed steps, you can understand the code, tweak it, and even contribute to making it better. Happy coding! 🎉

Creating a Dog Care Calculator Using JavaScript

gaganjot — Wed, 25 Dec 2024 04:57:24 +0000

Pet care can sometimes feel overwhelming, but technology can help make things simpler. One such tool is a dog care calculator that helps pet owners with essential calculations. In this blog, we’ll show you how to create a simple Dog Water Intake Calculator using JavaScript. This guide is perfect for developers who love coding and pets alike!

Why Build a Dog Care Calculator?

Calculators like these simplify pet care by providing accurate recommendations for things like daily water intake, medication dosages, or crate sizes. Building your own not only helps you learn, but it also allows you to customize tools to meet specific needs.

In this guide, we’ll create a Dog Water Intake Calculator that calculates how much water your dog needs daily based on its weight.

For inspiration, check out our Dog Pregnancy Calculator to see how different dog care calculators can be implemented.

Setting Up the Project

Before we dive into the code, set up your project files:

Create a new folder for your project.
Inside the folder, create three files:
- index.html
- style.css
- script.js

Step 1: Creating the HTML Structure

Let’s start with the basic HTML layout for our calculator.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dog Water Intake Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Dog Water Intake Calculator</h1>
        <input type="number" id="dogWeight" placeholder="Enter dog weight in kg">
        <button onclick="calculateWaterIntake()">Calculate</button>
        <p id="result"></p>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 2: Styling with CSS

Now, let’s add some basic styles to make our calculator look clean and user-friendly.

/* style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    text-align: center;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

input {
    padding: 10px;
    margin: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

p {
    margin-top: 20px;
    font-size: 18px;
    color: #333;
}

Step 3: Adding JavaScript Logic

Now it’s time to add functionality to our calculator. We’ll write JavaScript code to calculate the daily water intake based on the dog’s weight.

// script.js
function calculateWaterIntake() {
    const weight = document.getElementById('dogWeight').value;

    // Ensure weight is entered and valid
    if (!weight || weight <= 0) {
        document.getElementById('result').innerText = "Please enter a valid weight.";
        return;
    }

    // Formula: Dog's weight (kg) * 50ml
    const intake = weight * 50;
    document.getElementById('result').innerText = `Your dog needs ${intake} ml of water daily.`;
}

Step 4: Testing the Calculator

To test the calculator:

Open the index.html file in a browser.
Enter your dog’s weight in kilograms.
Click the "Calculate" button to see the recommended water intake.

Step 5: Enhancing the Calculator (Optional)

Here are some ideas to make your calculator even better:

Unit Conversion: Allow users to input weight in pounds and convert it to kilograms.
Styling Improvements: Add icons or animations to enhance the user experience.
Multiple Calculations: Add tabs or options for other calculators like food portions or medication dosages.

Conclusion

Congratulations! You’ve just built a simple and functional Dog Water Intake Calculator using JavaScript. This project not only helps pet owners care for their dogs but also sharpens your coding skills.

If you found this helpful, check out more advanced calculators on Frontendin.com. Share your customizations or ideas in the comments below!

Body Fat Percentage Calculator - Calculate Your Body Fat Easily

gaganjot — Tue, 24 Dec 2024 14:26:55 +0000

Check out this Pen I made!

DEV Community: gaganjot

Easy Discount Calculation: Tax, Fees & Discount Percentage Explained

Discount Calculator💻

Test the Code Here 🔗

What This Calculator Does 🧮

HTML Structure

Explanation:

CSS Styling

Breakdown:

JavaScript Functionality

Breakdown:

Suggestions for Improvement 💡

Share Your Thoughts 💬

Test the Code Here 🔗

CC ↔ HP Converter

Key Features of the CC ↔ HP Converter:

Detailed Breakdown of the Code

1. HTML Structure:

2. CSS Styling:

3. JavaScript Functions:

toggleInputs Function:

convert Function:

Suggestions for Improvement:

Dog RER & MER Calculator

HTML Structure 🖥️

The Boilerplate:

The Form Elements:

CSS Styling for Layout and Responsiveness 🎨

JavaScript Functionality for Calculations 📊

Code Explanation:

Testing the Code 🧪

How to Improve This Code 💡

Creating a Dog Care Calculator Using JavaScript

Why Build a Dog Care Calculator?

Setting Up the Project

Step 1: Creating the HTML Structure

Step 2: Styling with CSS

Step 3: Adding JavaScript Logic

Step 4: Testing the Calculator

Step 5: Enhancing the Calculator (Optional)

Conclusion

Body Fat Percentage Calculator - Calculate Your Body Fat Easily