diff --git a/Calculators/Dividend-Yield-Calculator/README.md b/Calculators/Dividend-Yield-Calculator/README.md new file mode 100644 index 000000000..4a9c2f4cc --- /dev/null +++ b/Calculators/Dividend-Yield-Calculator/README.md @@ -0,0 +1,15 @@ +#

Dividend Yield Calculator

+ +## Description :- + +This 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 :- + +![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/81514639-8920-465f-aaa6-0dc1dcbdc3f4) diff --git a/Calculators/Dividend-Yield-Calculator/assets/background.jpg b/Calculators/Dividend-Yield-Calculator/assets/background.jpg new file mode 100644 index 000000000..3ac3ad18f Binary files /dev/null and b/Calculators/Dividend-Yield-Calculator/assets/background.jpg differ diff --git a/Calculators/Dividend-Yield-Calculator/index.html b/Calculators/Dividend-Yield-Calculator/index.html new file mode 100644 index 000000000..e4b46ca84 --- /dev/null +++ b/Calculators/Dividend-Yield-Calculator/index.html @@ -0,0 +1,28 @@ + + + + + + + + Dividend Yield Calculator + + +
+

Dividend Yield Calculator

+
+
+ + +
+
+ + +
+ +
+
+
+ + + diff --git a/Calculators/Dividend-Yield-Calculator/script.js b/Calculators/Dividend-Yield-Calculator/script.js new file mode 100644 index 000000000..43d650046 --- /dev/null +++ b/Calculators/Dividend-Yield-Calculator/script.js @@ -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}% + `; +}); diff --git a/Calculators/Dividend-Yield-Calculator/style.css b/Calculators/Dividend-Yield-Calculator/style.css new file mode 100644 index 000000000..5afdc5c15 --- /dev/null +++ b/Calculators/Dividend-Yield-Calculator/style.css @@ -0,0 +1,84 @@ +body { + font-family: 'Arial', sans-serif; + background-image: url('assets/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; + } +} diff --git a/index.html b/index.html index 180772990..fa9feb331 100644 --- a/index.html +++ b/index.html @@ -1016,6 +1016,20 @@

Unlock Savings with Precision: Your Ultimate Discount Calculator.

+
+
+

Dividend Yield Calculator

+

Calculates the dividend yield percentage based on the current market price.

+ +
+

Dora Calculator