Skip to content

Meme Creator - JS Based

Meme Creator - JS Based

Published on

Tech Used

Bootstrap JavaScript

Tags

Check it out here

Back in 2016, before I moved to New Zealand πŸ‡³πŸ‡Ώ, I decided to challenge myself with a lil’ side project πŸ’».

At the time, β€œDekh Bhai” memes were EVERYWHERE in India β€” if you know, you know 😎.

(Dekh Bhai = β€œLook, brother” for my non-desi friends πŸ‘€πŸ§”)

So I thought, why not try building something around it? I was just learning JavaScript and wanted to turn the memes into a fun web app.

Spoiler alert: it took me a whole month to build πŸ˜… (yes, I was a total beginner).

The project was built entirely with HTML, CSS, and JavaScript β€” no fancy stacks, just good old basics πŸ”§πŸ§±

For styling, I used my comfort blanket β€” Bootstrap 🧢.

At that point, I had already used it in most of my mini projects, and it made responsive design way easier πŸ“±πŸ’»

I also threw in Normalize.css by Nicolas Gallagher to make sure the site didn’t look like a mess on different browsers 🧹πŸ–₯️

For turning text into image (yup, like meme magic πŸ§™β€β™‚οΈβœ¨), I used Fabric.js β€” a super handy HTML5 canvas library with all kinds of cool interactive features.

It even supports SVG-to-canvas conversions, which made things feel extra pro πŸ’Ό

Changing text colors? That was powered by Prism.js by Lea Verou 🌈

(Technically meant for syntax highlighting, but hey, we adapt 😎)

For the character selection box on the side, I used nanoScroller.js by James F.

Think Mac-style scrollbars, but for us mere mortals πŸ–±οΈπŸ

Picking colors was made easy with JSColor.js by Jan Odvarko β€” a cute little color picker that just worked πŸŽ¨πŸ‘Œ

And lastly, I tried to make things social by using socialShare.js by Ritesh Kumar β€” sadly, it’s now deprecated (RIP πŸͺ¦), but it used to let you control social buttons like a boss.

Of course, holding all this together was good ol’ jQuery v2.1.0. A classic. Can’t forget the OG πŸ’ΎπŸ’™

Moral of the story? I started small, learned a ton, and had a blast building something people could actually use (and laugh at πŸ˜„).

Still one of my fav beginner projects to date πŸ’―


Share this post on:

Previous Project
Introducing build-a-npm: CLI Tool to Create Node.js Packages Way Easier
Next Project
Meme Creator - PHP Based