How Long Would It Take You to Earn as much as a Billionaire?💰

Hey everyone,

Welcome to Week #2 of Project52—my 52-week challenge where I build one new project every single week for a year.

If you’re new here: I’m Atul Verma, a marketer with zero coding experience, diving headfirst into the world of development. Each week, I challenge myself to build a working project from scratch, learning new skills as I go.

This week’s project:

💰 The Billionaire Wealth Calculator—a fun, interactive web tool that compares your income vs. the world’s richest people and estimates how long it would take to match their net worth.

The results? Depressing. 😂

🛠️ Technologies Used

This project was built entirely using frontend web technologies:

✅ HTML & CSS → Structuring and styling the page
✅ JavaScript (Vanilla JS) → Handling user input & calculations
✅ Canvas API → Generating a downloadable, shareable image
✅ JavaScript Timers & DOM Manipulation → Adding auto-scrolling messages
✅ Responsive Design → Works on desktop & mobile

💡 How It Works

This tool takes two simple inputs:
1️⃣ Your annual income
2️⃣ A billionaire’s net worth

It then calculates:

🔹 How many years it would take you to reach their wealth
🔹 A sarcastic message explaining how long that actually is
🔹 Mind-blowing historical & cosmic events that could happen in that timeframe

Example Output:

The output isn’t just a number—it gives context, making it more engaging and thought-provoking.

🎨 The Visual Design

I wanted the UI to look premium, so I used a black & gold theme, matching the branding of Project52.

🚀 Key Design Features:
✅ Dark Theme with Gold Accents → Gives a premium feel
✅ Minimalist UI → Focused only on the input & results
✅ Animated Pop-Up Messages → Displays insights dynamically
✅ Auto-Scrolling Fun Facts → Gives a fun, educational twist
✅ Responsive Layout → Works across all devices

🖼️ Generating a Shareable Image (Canvas API)

One of the coolest parts of this project is the image generator. Instead of just showing text, I wanted users to be able to download their result and share it on social media.

✅ Canvas API was used to draw a custom image dynamically
✅ The image features:

• User’s calculated years

• The selected billionaire’s name

• The same black/gold branding as the website

This was one of the most challenging parts because Canvas doesn’t support direct styling like HTML/CSS. Everything—text positioning, colors, alignment—had to be manually coded in JavaScript.

🛠️ Features Added

🔹 Dynamic Calculations → Instantly shows how many years you'd take
🔹 Auto-Scrolling Messages → Shows historical & cosmic events
🔹 Downloadable Image → Users can share their results
🔹 Dark Mode UI → Gold/Black theme for a premium feel
🔹 Hidden PayPal Donation Prompt → If your income matches a billionaire's, the site jokingly asks you to donate. 😂

🚀 What I Learned This Week

This was my first real project using JavaScript for UI & logic, and I learned:

✅ JavaScript Can Do A Lot → From handling input to generating images, JS is insanely powerful.
✅ The Canvas API is Hard → It’s flexible but requires a lot of manual control compared to HTML/CSS.
✅ Animations Make UI Better → Auto-scrolling messages & pop-ups make everything feel more interactive.
✅ Debugging is 90% of Coding → Most of my time was spent fixing errors, not writing new code.

💡 Try It Yourself!

Here’s a video that demos the calculator:

👉 Use the Billionaire Wealth Calculator

Give it a go and see how long it would take YOU to match a billionaire!

Thanks for following along on Project52—I’ll see you next week with Project #3! 🚀

— Atul Verma
Creator, Project52