How I built a Jokes Website from Scratch using ChatGPT

ChatGPT has helped me create excellent content and other stuff, but the most it amazes me is using it to code. I am not a web developer; I know some basics of HTML & CSS and used to pay a hefty amount to web developers to do small tasks on my website, but ChatGPT has helped me quickly do those tasks for free. I am also fond of jokes and waste most of my time using reddit to watch memes. Then I got an idea of why don’t I make my own website and watch memes without wasting time to find them. Here came the idea of making my own jokes website, developed with the help of ChatGPT.

To create the jokes website, I needed a source for the memes from where I could fetch them to my website, as the boring jokes of ChatGPT ain’t fun for me. But if You want to read jokes from ChatGPT, then you can write a prompt:

Tell me a Funny Joke

And ChatGPT will try its best to make you laugh, but that’s not my cup of tea, so I used subreddits such as r/memes and r/dankmemes.

The idea is to create a jokes website that finds memes from these subreddits and then posts them on the jokes website randomly. I will show you How I created the website using ChatGPT with zero Coding knowledge.

Using ChatGPT to Create Jokes Website

I used the following prompt to generate the homepage of the jokes website:

Create a webpage in html using bootstrap css & javascript, where the page will have a button named as “Give ME a Meme Now” which will generate a new random meme from subreddits r/memes & r/dankmemes and show it on the page. The webpage should be mobile friendly. Give me the UI, CSS, JS seperately.

On using this code, ChatGPT gave me 3 separate sections for the HTML content, CSS & JS. I added it to the website and published it. But A problem arose as the javascript file didn’t function properly.

I asked it about the error that “The Javascript is not working,” and this was the response:

I apologize for the mistake. Here’s an updated version of the JavaScript code that should work correctly:

It gave a new code which was still not working, so I asked it again for the same, and here is the output given by ChatGPT:

I tried checking what ChatGPT told me, but there was no issue with the API. I told it that I could access it, and it gave me a new javascript code. This time the code was working fine.

Setting Up the Website

Now, I had to set up the website on my hosting. I created a separate section on my website by making a folder named “jokes” I created 3 files in it, i.e., index.php, styles.css & meme.js. I added the codes to the files and checked the website.

The website worked very well, and it fulfills what I wanted it to do. Here is the link to the joke generator.

Click Here to Go to the Jokes Website

Now, I don’t have to surf the subreddits for searching memes and waste time. I can directly head to my joke generator website and check the best memes on the subreddit.

Key points

The main problem I faced while making the jokes website was the hallucination of ChatGPT. Yes, many times, ChatGPT hallucinates while giving outputs and gives the wrong output, and We have to keep fixing the bugs.

Another problem with ChatGPT while writing code is that it needs a good prompt to get the desired output. You must learn the basics of web development to successfully code the entire website using ChatGPT.

Conclusion

It was a fun project, and I quickly created the website within 2hours using ChatGPT. If you want the source code of this joke’s website for personal use, then comment below, and I will share it with you. If you want to learn more about using ChatGPT to create an HTML webpage, you can check out this article. Thank you for reading.