💰 Subscription Calculator

A JavaScript-powered web application that helps users calculate and visualize the total cost of subscriptions over 1-12 months. Plan ahead and make informed decisions about your recurring expenses.

Live App: catyoung018.github.io/subscription-calculator

📋 Project Overview

The Subscription Calculator is a practical financial planning tool that helps users understand the long-term cost of their recurring subscriptions. By entering a monthly subscription cost and selecting a time period (1-12 months), users can instantly see the total amount they'll spend.

Key Features

• Monthly Cost Input: Enter any subscription amount
• Flexible Time Periods: Calculate costs from 1 to 12 months
• Instant Calculation: Real-time cost projections
• Clean Interface: Simple, intuitive design
• Responsive Layout: Works on all devices
• Financial Planning: Make informed subscription decisions

🛠️ Technologies Used

• JavaScript: Core calculation logic and DOM manipulation
• HTML5: Semantic structure
• CSS3: Responsive styling and layout
• GitHub Pages: Deployment and hosting

📚 Learning Outcomes

This project demonstrates:

• Form input handling and validation
• Mathematical calculations in JavaScript
• DOM manipulation for dynamic updates
• Event listeners for user interactions
• Responsive web design principles
• Input/output functionality
• User experience design

🚀 Getting Started

View Live App

Visit the live calculator: catyoung018.github.io/subscription-calculator

Run Locally

1. Clone the repository:

   git clone https://github.com/CatYoung018/subscription-calculator.git
   cd subscription-calculator

2. Open in browser:

   • Simply open index.html in your web browser
   • Or use a local server:

     # Python 3
     python -m http.server 8000
     
     # Node.js (with http-server)
     npx http-server

3. View the app:

   • Navigate to http://localhost:8000

📁 Project Structure

subscription-calculator/
├── css/
│   └── style.css       # Stylesheet
├── js/
│   └── script.js       # Calculator logic
├── img/                # Images and assets
├── index.html          # Main HTML file
├── package.json        # Project configuration
└── README.md           # Documentation

💡 How to Use

1. Enter Subscription Cost: Input your monthly subscription amount (e.g., $9.99)
2. Select Time Period: Choose how many months to calculate (1-12 months)
3. Click Calculate: See the total cost instantly
4. Plan Ahead: Use the results to budget and make decisions

Example Use Cases

• Budgeting: Calculate yearly costs for Netflix, Spotify, gym memberships
• Comparison Shopping: Compare annual costs of different subscription tiers
• Financial Planning: Understand the true cost of multiple subscriptions
• Decision Making: Evaluate if a subscription is worth the long-term cost

🎯 Key JavaScript Concepts

1. Form Handling

// Getting user input
const monthlyCost = document.getElementById('cost').value;
const months = document.getElementById('months').value;

2. Calculation Logic

// Calculate total cost
const totalCost = monthlyCost * months;

3. DOM Manipulation

// Display results
document.getElementById('result').textContent = `$${totalCost.toFixed(2)}`;

4. Event Listeners

// Listen for button clicks
calculateBtn.addEventListener('click', calculateTotal);

🔮 Future Enhancements

• Add multiple subscription tracking
• Include annual/weekly subscription options
• Save subscription history
• Add comparison charts/graphs
• Include currency conversion
• Export calculations to PDF/CSV
• Add subscription reminder notifications
• Calculate savings from cancellations

🎓 Acknowledgments

This project was created as part of a Skillcrush coding bootcamp, focusing on practical JavaScript applications and real-world problem-solving.

📝 License

This project is open source and available for educational purposes.

📧 Contact

Cat Young
Email: cat@catyoungconsulting.com
Portfolio: catyoung018.github.io/Cat-Young-Dev
GitHub: @CatYoung018

---

⭐ If you found this project helpful, please consider giving it a star!