├── Compound Interest Calculator.png ├── README.md ├── index.html ├── js └── app.js ├── logobgr.png └── styles └── main.css /Compound Interest Calculator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arunsanjeevms/Compound-Interest-Calculator-with-Graph/db272e807f6f5efd1665e46636e07fec74b08dd4/Compound Interest Calculator.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | "Compound Interest Calculator with Graph 📈: Visualize the power of compounding! Accurately compute and graph your investments' growth over time. Plan your financial future with confidence. 💰💡" 2 | 3 | 4 | 5 | Explore My Project by visiting this https://tinyurl.com/cmpdintcalc 6 | 7 | 📈 Welcome to the Compound Interest Calculator project! In this comprehensive tool, you'll experience the power of compounding at your fingertips. Here's how it works: 8 | 9 | Input Parameters: Start by entering your principal amount 💵, the number of years you want to calculate ⏳, and the interest rate 📊. These are the building blocks for your financial journey. 10 | 11 | Instant Results: With a simple click, witness the calculator do its magic. It computes and displays the final amount you'll have after the specified duration, considering the compound interest accrued. 12 | 13 | Yearly Reports: Dive deeper into your financial growth with the yearly reports 📅. Gain insights into how your investment grows over time. Each year's contribution to your wealth is meticulously laid out for easy comprehension. 14 | 15 | Visual Representation: Numbers speak volumes, but visuals tell the story 📉. Our graph feature provides a visual representation of your investment's growth trajectory. Watch as your wealth accumulates year by year, empowering you to make informed financial decisions. 16 | 17 | User-Friendly Interface: We've designed this calculator with simplicity and user experience in mind 🎨. Whether you're a seasoned investor or a beginner exploring the world of finance, our intuitive interface ensures a seamless experience. 18 | 19 | Educational Tool: Beyond mere calculations, this project serves as an educational tool 📚. Understand the fundamentals of compound interest, grasp the concept of exponential growth, and unlock the potential of your investments. 20 | 21 | 22 | In conclusion, the Compound Interest Calculator project is more than just a tool—it's a gateway to financial literacy, empowerment, and prosperity. Start calculating, visualizing, and mastering the art of compound interest today! 💰💡 #Finance #Calculator #CompoundInterest #Investment #VisualizeWealth 23 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Compound Interest Calculator 9 | 10 | 11 | 12 | 13 | 14 |
15 |

Asian Group of Companies

16 |
17 | 18 |
19 | 20 |
21 | 22 |
Compound Interest Calculator
23 |
By M S Arun Sanjeev
 24 |
25 |
26 |
27 | 28 | 29 |
30 |
31 | 32 | 33 |
34 |
35 | 36 | 37 |
38 |
39 | 40 | 46 |
47 |
48 | 49 |
50 |
51 |
52 |
53 |

54 | 55 |
56 |
57 | 58 |
59 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | const context = document.getElementById("data-set").getContext("2d"); 2 | let line = new Chart(context, {}); 3 | //Values from the form 4 | const intialAmount = document.getElementById("initialamount"); 5 | const years = document.getElementById("years"); 6 | const rates = document.getElementById("rates"); 7 | const compound = document.getElementById("compound"); 8 | 9 | //Message 10 | const message = document.getElementById("message"); 11 | 12 | //calculate button 13 | const button = document.querySelector(".input-group button"); 14 | //event listener 15 | button.addEventListener("click", calculateGrowth); 16 | 17 | const data = []; 18 | const labels = []; 19 | 20 | function calculateGrowth(e) { 21 | e.preventDefault(); 22 | data.length = 0; 23 | labels.length = 0; 24 | let growth = 0; 25 | try { 26 | const initial = parseInt(intialAmount.value); 27 | const period = parseInt(years.value); 28 | const interest = parseInt(rates.value); 29 | const comp = parseInt(compound.value); 30 | 31 | for(let i = 1; i <= period; i++) { 32 | const final = initial * Math.pow(1 + ((interest / 100) / comp), comp * i); 33 | data.push(toDecimal(final, 2)); 34 | labels.push("Year " + i); 35 | growth = toDecimal(final, 2); 36 | } 37 | // 38 | message.innerText = `You will have this amount ${growth} after ${period} years`; 39 | drawGraph(); 40 | } catch (error) { 41 | console.error(error); 42 | } 43 | } 44 | 45 | function drawGraph() { 46 | line.destroy(); 47 | line = new Chart(context, { 48 | type: 'line', 49 | data: { 50 | labels, 51 | datasets: [{ 52 | label: "compound", 53 | data, 54 | fill: true, 55 | backgroundColor: "rgba(12, 141, 0, 0.7)", 56 | borderWidth: 3 57 | }] 58 | } 59 | }); 60 | } 61 | 62 | function toDecimal(value, decimals) { 63 | return +value.toFixed(decimals); 64 | } -------------------------------------------------------------------------------- /logobgr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arunsanjeevms/Compound-Interest-Calculator-with-Graph/db272e807f6f5efd1665e46636e07fec74b08dd4/logobgr.png -------------------------------------------------------------------------------- /styles/main.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;600;700;900&display=swap"); 2 | 3 | /*-----------------------------------*\ 4 | Arun Sanjeev 5 | \*-----------------------------------* 6 | 7 | 8 | 9 | /*-----------------------------------*\ 10 | Github: @arunsanjeevms 11 | \*-----------------------------------*/ 12 | 13 | 14 | * { 15 | padding: 0; 16 | margin: 0; 17 | font-family: "Montserrat", sans-serif; 18 | box-sizing: border-box; 19 | } 20 | 21 | .container { 22 | display: flex; 23 | flex-direction: row; 24 | justify-content: center; 25 | margin: 40px; 26 | } 27 | 28 | .calculator { 29 | width: 40%; 30 | color: #063102; 31 | } 32 | 33 | .heading h5,h1 { 34 | font-size: 25px; 35 | color: #0c8d00; 36 | } 37 | #message { 38 | font-size: 20px; 39 | color: #063102; 40 | } 41 | 42 | .input-group { 43 | margin: 20px 0; 44 | } 45 | 46 | .input-group label { 47 | display: block; 48 | } 49 | 50 | .input-group input, 51 | .input-group button, 52 | .input-group select { 53 | width: 70%; 54 | padding: 12px; 55 | border: 1px solid #0c8d00; 56 | outline: none; 57 | border-radius: 5px; 58 | } 59 | .input-group button { 60 | background-color: #0c8d00; 61 | color: #fff; 62 | } 63 | 64 | .results { 65 | box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.09); 66 | width: 50%; 67 | margin: 10px; 68 | padding: 20px; 69 | display: flex; 70 | align-items: center; 71 | flex-direction: column; 72 | } 73 | 74 | 75 | .footer-bottom { 76 | display: flex; 77 | justify-content: center; 78 | align-items: center; 79 | padding-top: 100px; 80 | } 81 | .copyright { 82 | flex: 0 0 500px; 83 | } 84 | 85 | .tit{ 86 | text-align: center; 87 | font-size: 40px; 88 | padding-top: 25px; 89 | } 90 | --------------------------------------------------------------------------------