Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Dividend Yield Calculator #1296

Merged
merged 10 commits into from
Jun 11, 2024
Merged

Added Dividend Yield Calculator #1296

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
616dbeb
Added Dividend Yield Calculator
Meetjain1 Jun 10, 2024
f1fd612
Changed folder name
Meetjain1 Jun 11, 2024
b465101
Added calculator to main index.html
Meetjain1 Jun 11, 2024
c1d9011
Update index.html
Meetjain1 Jun 11, 2024
9e6b5b8
Update index.html
Rakesh9100 Jun 11, 2024
52e414b
Update and rename Readme.md to README.md
Rakesh9100 Jun 11, 2024
2e602f3
Rename Calculators/Dividend-Yield-Calculator/background.jpg to Calcul…
Rakesh9100 Jun 11, 2024
0ae64c8
Delete Calculators/Dividend-Yield-Calculator/divi.jpg
Rakesh9100 Jun 11, 2024
e56dd3a
Update index.html
Rakesh9100 Jun 11, 2024
6c1003e
Update and rename styles.css to style.css
Rakesh9100 Jun 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions Calculators/Dividend calculator/Readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# <p align="center">Dividend Yield Calculator</p>

## Description :-

The Dividend Yield Calculator effortlessly calculates the % Dividend yield which is used to assess potential income from investments, compare dividend-paying stocks, and make informed investment decisions based on risk and long-term financial goals.

## Tech Stacks :-

- HTML
- CSS
- JavaScript

## Screenshots :-

![Dividend calci](divi.jpg)
Binary file added Calculators/Dividend calculator/background.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Calculators/Dividend calculator/divi.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 28 additions & 0 deletions Calculators/Dividend calculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dividend Yield Calculator</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>
<body>
<div class="container animate__animated animate__fadeIn">
<h1>Dividend Yield Calculator</h1>
<form id="dividendForm" class="animate__animated animate__zoomIn">
<div class="input-group">
<label for="annualDividend">Annual Dividend (INR):</label>
<input type="number" id="annualDividend" step="0.01" required>
</div>
<div class="input-group">
<label for="marketPrice">Current Market Price (INR):</label>
<input type="number" id="marketPrice" step="0.01" required>
</div>
<button type="submit">Calculate</button>
</form>
<div id="result" class="result animate__animated animate__fadeInUp"></div>
</div>
<script src="script.js"></script>
</body>
</html>
17 changes: 17 additions & 0 deletions Calculators/Dividend calculator/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
document.getElementById('dividendForm').addEventListener('submit', function(event) {
event.preventDefault();

const annualDividend = parseFloat(document.getElementById('annualDividend').value);
const marketPrice = parseFloat(document.getElementById('marketPrice').value);

if (isNaN(annualDividend) || isNaN(marketPrice)) {
document.getElementById('result').innerText = "Please enter valid numbers.";
return;
}

const dividendYield = ((annualDividend / marketPrice) * 100).toFixed(2);

document.getElementById('result').innerHTML = `
Dividend Yield: ${dividendYield}%
`;
});
85 changes: 85 additions & 0 deletions Calculators/Dividend calculator/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
body {
font-family: 'Arial', sans-serif;
background-image: url('background.jpg');
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
padding: 20px;
}

.container {
background: rgba(193, 214, 75, 0.9);
padding: 30px;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
text-align: center;
width: 100%;
max-width: 400px;
}

h1 {
margin-bottom: 20px;
font-size: 1.8rem;
color: #333;
}

.input-group {
margin-bottom: 20px;
}

.input-group label {
display: block;
margin-bottom: 5px;
font-size: 1rem;
color: #555;
}

.input-group input {
width: calc(100% - 20px);
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1rem;
}

button {
padding: 12px 25px;
border: none;
border-radius: 5px;
background: #1d1d1c;
color: white;
font-size: 1.1rem;
cursor: pointer;
transition: background 0.3s ease;
}

button:hover {
background: #e08309;
}

.result {
margin-top: 20px;
font-size: 1.2rem;
color: #333;
font-weight: bold;
}

@media (max-width: 768px) {
h1 {
font-size: 1.5rem;
}

button {
padding: 10px 20px;
font-size: 1rem;
}

.input-group input {
font-size: 0.9rem;
}

}