I’m 17, practicing "Vibe Coding" with Vanilla JS, and built a pricing component for backend devs.

#javascript #showdev #ui #vibecoding

Hi,

I’m a backend-first developer. Every time I build a micro-SaaS with Go or Node, I run into the same wall: the logic is solid, but the frontend looks terrible. I used to spend days configuring React or fighting shadcn dependencies just to get a simple pricing section working.

So, I decided to do some "Vibe Coding." No frameworks. No heavy node_modules to break next year. Just clean Semantic HTML5, Tailwind CSS via CDN, and pure Vanilla JS.

I built a premium Dark Tech billing component. It has a smooth toggle switch (Monthly/Yearly) and interactive loading states for the buttons.

It takes less than 5 minutes to drop into any Go, Python, or PHP stack.

Here is the entire JavaScript logic for the switcher. It’s simple, light, and dependency-free:

const billingToggle = document.getElementById('billing-toggle');
const monthlyPrices = document.querySelectorAll('.price-monthly');
const yearlyPrices = document.querySelectorAll('.price-yearly');

billingToggle.addEventListener('change', () => {
    const isYearly = billingToggle.checked;
    monthlyPrices.forEach(p => p.classList.toggle('hidden', isYearly));
    yearlyPrices.forEach(p => p.classList.toggle('hidden', !isYearly));
});