Brewing Data Solutions

Home
About
Dividend Calculator

How to Code a Stock Dividend and Profit Calculator Using HTML, CSS, and JavaScript

Welcome to this hands-on guide where we’ll explore how to create a versatile stock dividend and profit calculator using HTML, CSS, and JavaScript. This project is perfect for those looking to blend finance with technology, enhancing their web development skills while building something incredibly useful. Whether you’re a stock market enthusiast or a developer looking for practical projects, this tutorial will suit your needs. Let’s dive in!

Step 1: Setting Up the HTML Structure

First, we need to build the skeleton of our calculator. This involves setting up the HTML structure that will host our inputs and display the results. Below is the basic HTML needed:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stock Calculator</title>
</head>
<body>
    <div class="calculator">
        <h1>Stock Calculator</h1>
        <div>
            <label for="dividend">Quarterly Dividend ($):</label>
            <input type="number" id="dividend" placeholder="Enter quarterly dividend">
        </div>
        <div>
            <label for="shares">Number of Shares:</label>
            <input type="number" id="shares" placeholder="Enter number of shares">
        </div>
        <button onclick="calculateDividend()">Calculate Dividend</button>

        <div>
            <label for="buyPrice">Buy Price ($):</label>
            <input type="number" id="buyPrice" placeholder="Buy price per share">
        </div>
        <div>
            <label for="sellPrice">Sell Price ($):</label>
            <input type="number" id="sellPrice" placeholder="Sell price per share">
        </div>
        <button onclick="addShares()">Add Shares</button>
        <button onclick="calculateProfit()">Calculate Profit</button>

        <h2>Results</h2>
        <div id="results"></div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Step 2: Styling with CSS

Next, let’s add some style to make our calculator visually appealing. We will use CSS to add styling directly within our HTML file for simplicity, though you could also separate these into a stylesheet file. Below is the CSS needed:

<style>
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    padding: 10px;
}

.calculator {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    width: 300px;
    margin: auto;
}

input[type="number"], button {
    width: 95%;
    padding: 10px;
    margin-top: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

button {
    background-color: #a7d7c5; /* Lighter green */
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #97c8b1; /* Slightly darker shade for hover */
}

h1, h2 {
    color: #333;
}
</style>

Step 3: Adding JavaScript Functionality

Finally, we need to make our calculator functional. We’ll add JavaScript directly into our HTML file. The JavaScript will handle the logic for calculating dividends and profits, as well as adding shares dynamically.

<script>
function calculateDividend() {
    let dividend = document.getElementById('dividend').value;
    let shares = document.getElementById('shares').value;
    let quarterly = dividend * shares;
    let annual = quarterly * 4;

    let resultsDiv = document.getElementById('results');
    resultsDiv.innerHTML += `<p>Quarterly Return: $${quarterly.toFixed(2)}</p>`;
    resultsDiv.innerHTML += `<p>Annual Return: $${annual.toFixed(2)}</p>`;
}

function calculateProfit() {
    let buyPrice = document.getElementById('buyPrice').value;
    let sellPrice = document.getElementById('sellPrice').value;
    let shares = document.getElementById('shares').value;
    let profit = (sellPrice - buyPrice) * shares;

    let resultsDiv = document.getElementById('results');
    resultsDiv.innerHTML += `<p>Profit per Share: $${profit.toFixed(2)}</p>`;
}

function addShares() {
    let sharesInput = document.getElementById('shares');
    let shares = parseInt(sharesInput.value) || 0;
    sharesInput.value = shares + 

1;
}

document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('dividend').value = '';
    document.getElementById('shares').value = '';
    document.getElementById('buyPrice').value = '';
    document.getElementById('sellPrice').value = '';
});
</script>

Conclusion

With these steps, you’ve successfully created a stock dividend and profit calculator that can be a handy tool for investors and a great learning project for developers. This calculator provides basic functionalities such as calculating potential dividends and profits based on user input. Whether you’re using this for personal investments or as a demonstration project, it showcases how HTML, CSS, and JavaScript can work together to create functional and user-friendly web applications.

Stock Calculator

Stock Calculator

Results