Added Stock Profit Calculator (#1388)

Rakesh9100 · Jun 23, 2024 · 49eda37 · 49eda37
1 parent bf1cadb
commit 49eda37
Show file tree

Hide file tree

Showing 6 changed files with 204 additions and 0 deletions.
diff --git a/Calculators/Stock-Profit-Calculator/README.md b/Calculators/Stock-Profit-Calculator/README.md
@@ -0,0 +1,24 @@
+# <p align="center">Stock Profit Calculator</p>
+
+## Description :-
+
+The Stock Profit Calculator helps users analyze stock transactions and make informed investment decisions. By inputting the number of shares, purchase price, sell price, buy commission, and sell commission, the calculator computes the total purchase amount, total sell amount, and profit or loss.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScripts
+
+## Features :-
+
+- Input Fields: Number of shares, purchase price (INR), sell price, buy commission, sell commission.
+- Output: Total purchase amount, total sell amount, and profit/loss amount.
+- User-Friendly: Easy-to-use interface to quickly analyze stock activities.
+- Insightful: Helps users understand their overall stock performance to aid future investment decisions.
+
+This tool is ideal for both novice and experienced investors looking to keep track of their stock market activities efficiently.
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/6a8bff3f-1a3a-4e11-b670-bba76fe83475)
diff --git a/Calculators/Stock-Profit-Calculator/assets/background.jpg b/Calculators/Stock-Profit-Calculator/assets/background.jpg
diff --git a/Calculators/Stock-Profit-Calculator/index.html b/Calculators/Stock-Profit-Calculator/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Stock Profit Calculator</title>
+</head>
+<body>
+    <div class="container">
+        <div class="calculator">
+            <h1>Stock Profit Calculator</h1>
+            <div class="input-group">
+                <label for="shares">Number of Shares</label>
+                <input type="number" id="shares" required>
+            </div>
+            <div class="input-group">
+                <label for="purchasePrice">Purchase Price (INR)</label>
+                <input type="number" id="purchasePrice" step="0.01" required>
+            </div>
+            <div class="input-group">
+                <label for="sellPrice">Sell Price (INR)</label>
+                <input type="number" id="sellPrice" step="0.01" required>
+            </div>
+            <div class="input-group">
+                <label for="buyCommission">Buy Commission (INR)</label>
+                <input type="number" id="buyCommission" step="0.01" required>
+            </div>
+            <div class="input-group">
+                <label for="sellCommission">Sell Commission (INR)</label>
+                <input type="number" id="sellCommission" step="0.01" required>
+            </div>
+            <button onclick="calculateProfit()">Calculate</button>
+        </div>
+        <div class="results">
+            <h2>Results</h2>
+            <div id="result">
+                <p>Purchased For: <span id="purchasedFor">0</span> INR</p>
+                <p>Sold For: <span id="soldFor">0</span> INR</p>
+                <p>Profit Amount: <span id="profitAmount">0</span> INR</p>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Stock-Profit-Calculator/script.js b/Calculators/Stock-Profit-Calculator/script.js
@@ -0,0 +1,15 @@
+function calculateProfit() {
+    const shares = parseFloat(document.getElementById('shares').value);
+    const purchasePrice = parseFloat(document.getElementById('purchasePrice').value);
+    const sellPrice = parseFloat(document.getElementById('sellPrice').value);
+    const buyCommission = parseFloat(document.getElementById('buyCommission').value);
+    const sellCommission = parseFloat(document.getElementById('sellCommission').value);
+
+    const purchasedFor = (shares * purchasePrice) + buyCommission;
+    const soldFor = (shares * sellPrice) - sellCommission;
+    const profitAmount = soldFor - purchasedFor;
+
+    document.getElementById('purchasedFor').innerText = purchasedFor.toFixed(2);
+    document.getElementById('soldFor').innerText = soldFor.toFixed(2);
+    document.getElementById('profitAmount').innerText = profitAmount.toFixed(2);
+}
diff --git a/Calculators/Stock-Profit-Calculator/style.css b/Calculators/Stock-Profit-Calculator/style.css
@@ -0,0 +1,105 @@
+body {
+    font-family: 'Arial', sans-serif;
+    background-image: url('assets/background.jpg');
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    background: #2ebed1;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    max-width: 800px;
+    width: 100%;
+    animation: fadeIn 1s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+.calculator,
+.results {
+    padding: 20px;
+    flex: 1;
+    min-width: 300px;
+    transition: transform 0.3s ease-in-out;
+}
+
+h1,
+h2 {
+    text-align: center;
+}
+
+.input-group {
+    margin-bottom: 15px;
+}
+
+.input-group label {
+    display: block;
+    margin-bottom: 5px;
+}
+
+.input-group input {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+}
+
+button {
+    width: 100%;
+    padding: 10px;
+    background-color: #600ce6;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background 0.3s, transform 0.3s;
+}
+
+button:hover {
+    background-color: #181718;
+    transform: scale(1.05);
+}
+
+.results {
+    background: #bdd6f0;
+    border-left: 2px solid #e9ecef;
+}
+
+#result {
+    text-align: center;
+    font-size: 18px;
+}
+
+#result p {
+    margin: 10px 0;
+}
+
+span {
+    font-weight: bold;
+    color: #007bff;
+}
+
+@media (max-width: 768px) {
+    .calculator,
+    .results {
+        min-width: 100%;
+        flex: none;
+    }
+}
diff --git a/index.html b/index.html
@@ -3200,6 +3200,20 @@ <h3>Calculates Maximum, minimum, mean, median, mode, etc.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Stock Profit Calculator</h2>
+                <h3>Calculates the profits in stocks by entering some parameters.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Stock-Profit-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Stock-Profit-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
         <div class="box">
             <div class="content">
                 <h2>Stress Strain Calculator</h2>