Building Version 1 of my Jokes App: The Joke Simulator

Intro

Hey there! I'm thrilled to share my latest project with you - a Jokes app! As a budding developer, building projects is an essential part of improving my skills and growing my portfolio. I'm excited to walk you through what I've achieved so far and share some insights into the development process.

Now, before we dive in, I have to admit - this app is only the first version. But, as they say, the journey is more important than the destination. And boy, has it been an adventure so far! From brainstorming ideas to designing the user interface, every step of the way has been a learning experience. Plus, who doesn't love a joke? Blunt, old, dry, good, hilarious!

You can check out the app at Jokes Simulator. Yeah! It's hosted on Netlify. Thank Goodness for Netlify.

One thing to note - since this app is still in its early stages, I don't have a backend (yet). But fear not, we can still have some fun exploring the front end and digging into the code. So, without further ado, let's get gooo!

Technical Overview

Alright, let's dive into a few nitty-gritty technical details of this exciting jokes app! So, basically, this app is built with React, which is a popular JavaScript library for building user interfaces. It has a local API (application programming interface) that contains an array of joke objects, each with a setup and a punchline.

//array of sample jokes
export default [
    {
        setup: "I got my daughter a fridge for her birthday.",
        punchline: "I can't wait to see her face light up when she opens it."
    },
    {
        setup: "How did the hacker escape the police?",
        punchline: "He just ransomware!"
    },
    {
        setup: "Why don't pirates travel on mountain roads?",
        punchline: "Scurvy."
    }
]

When you open the app, it randomly selects a joke from the API and displays the setup on the screen. The joke is wrapped in a container component called "Joke" which has a reveal button that hides the punchline and shows it when clicked.

Additionally, the "Joke" component is rendered within another container component called "JokeContainer" which manages the state of the displayed joke and provides a button for displaying the next unseen joke.

import './Joke.css'
import {useState} from 'react'

function Joke(props){
    const [showDiv, setShowDiv] = useState(true);

    const handleJokeReveal=()=>{
        setShowDiv(!showDiv);
    }
    return(
        <div className="setup-container">
            <h3>{props.joke.setup}</h3>
            <div className="punchline-container">
            {showDiv && <div className="overlay">
                <p onClick={handleJokeReveal}>Click To Reveal
                </p> 
            </div>}
                <p> <i>"{props.joke.punchline}"</i></p>
            </div>
        </div>
    )

}
export default Joke

Conclusion

So, in summary, this app uses React components and state management to display jokes from a local API and allows the user to interact with the joke by revealing the punchline and reacting to it. It's a fun and interactive way to keep yourself entertained while also improving your React skills!

Thanks for joining me on this journey to build a jokes app with React! If you're interested in checking out the rest of the code or want to contribute to the project, you can find it on my GitHub repository. And if you have any questions or just want to say hi, feel free to reach out to me on Twitter @cindykandie.

Before you go, here's a joke to keep you laughing/or not:

Why did the coffee file a police report?

Because it got mugged!

If you have a joke of your own that you want to share, drop it in the comments below! Don't forget to subscribe to our newsletter to get updates on upcoming versions of the app.

And if you're a beginner looking for a coding challenge, check out this link for a fun challenge walkthrough to sharpen your skills. Happy coding!