Random Meme Generator App

This is a web-based Random Meme Generator App. Users can generate random programming memes, display jokes, quotes, riddles, and reveal riddle answers — all at the click of a button. Each button produces a different output, making the app fun, interactive, and engaging. I’m proud of building this project as it combines JavaScript, responsive web design, and accessibility best practices.

Table of contents

• Overview
  • The challenge
  • Screenshot
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

The first phase of this project was gathering requirements and developing a user story — a list of everything a user should be able to do when using the app. This step was crucial for deciding on the core features and functionality, forming the foundation for the entire build.

Next, I sketched out a basic user interface and layout based on that user story. After iterating on what to include, remove, or adjust, I finalized a design and moved into development.

While it would be too long to detail the full thought process, the major features are:

• Responsive layout that adapts to mobile and desktop devices
• Generate random memes, jokes, quotes, and riddles with a single click
• Reveal answers to riddles when requested
• Accessible through assistive technologies like screen readers
• A clean, interactive user experience with a smooth UI

Screenshot

Desktop view

Mobile view

My process

Built with

• Semantic HTML5 markup (<main>, <footer>, etc.)
• Flexbox for layout (align-items, flex-direction, etc.)
• CSS styling, layout, and animation (display, text-align, padding, animation, etc.)
• ES6+ JavaScript
• Responsive web development with a mobile-first approach
• DOM (Document Object Model) manipulation

What I learned

Although this app may seem simple, it provided an excellent opportunity to apply my JavaScript and DOM manipulation skills in a real-world context — dynamically generating and displaying random images and text on screen.

I learned how to:

• Develop a user story for an application
• Create a basic layout and UI sketch based on requirements
• Implement each planned feature in code while maintaining usability and responsiveness
• Think through and execute a complete app development process, from idea to working product

Author

• Github - ElijahGbogbo
• Frontend Mentor - @ElijahGbogbo
• LinkedIn - @ElijahGbogbo