diff --git a/ROI Calculator/index.html b/ROI Calculator/index.html new file mode 100644 index 00000000..cbbb010f --- /dev/null +++ b/ROI Calculator/index.html @@ -0,0 +1,31 @@ + + + + + + ROI Calculator + + + +
+

ROI Calculator

+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+ + + diff --git a/ROI Calculator/manifest.json b/ROI Calculator/manifest.json new file mode 100644 index 00000000..acc6f236 --- /dev/null +++ b/ROI Calculator/manifest.json @@ -0,0 +1,13 @@ +{ + "manifest_version": 3, + "name": "ROI Calculator", + "version": "1.0", + "permissions": [ + "activeTab" + ], + "browser_action": { + "default_popup": "index.html" + }, + "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'" +} + \ No newline at end of file diff --git a/ROI Calculator/script.js b/ROI Calculator/script.js new file mode 100644 index 00000000..e5b5a84a --- /dev/null +++ b/ROI Calculator/script.js @@ -0,0 +1,18 @@ +function calculateROI() { + const initialInvestment = parseFloat(document.getElementById('initialInvestment').value); + const finalValue = parseFloat(document.getElementById('finalValue').value); + const investmentPeriod = parseFloat(document.getElementById('investmentPeriod').value); + + if (isNaN(initialInvestment) || isNaN(finalValue) || isNaN(investmentPeriod) || initialInvestment <= 0 || investmentPeriod <= 0) { + document.getElementById('result').textContent = 'Please enter valid values.'; + return; + } + + const roi = ((finalValue - initialInvestment) / initialInvestment) * 100; + const annualizedROI = (Math.pow((finalValue / initialInvestment), (1 / investmentPeriod)) - 1) * 100; + + document.getElementById('result').innerHTML = ` +

Total ROI: ${roi.toFixed(2)}%

+

Annualized ROI: ${annualizedROI.toFixed(2)}%

+ `; +} diff --git a/ROI Calculator/style.css b/ROI Calculator/style.css new file mode 100644 index 00000000..f08e60bd --- /dev/null +++ b/ROI Calculator/style.css @@ -0,0 +1,65 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.container { + background-color: #fff; + padding: 20px; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + max-width: 400px; + width: 100%; +} + +h2 { + margin-bottom: 20px; + text-align: center; + color: #333; +} + +.form-group { + margin-bottom: 15px; +} + +label { + display: block; + margin-bottom: 5px; + color: #555; +} + +input { + width: 100%; + padding: 8px; + box-sizing: border-box; + border: 1px solid #ccc; + border-radius: 4px; +} + +button { + width: 100%; + padding: 10px; + background-color: #28a745; + border: none; + color: white; + font-size: 16px; + cursor: pointer; + border-radius: 4px; + margin-top: 10px; +} + +button:hover { + background-color: #218838; +} + +#result { + margin-top: 20px; + font-size: 18px; + text-align: center; + color: #333; +}