Advanced ChatGPT User Guide - Maybe You Don't Know This
 |
| Advanced Chat GPT Guide - ChatGPT Content Generator |
ChatGPT Content Generator is a simple app that generates random quotes with random image backgrounds. You can improve it yourself, like changing it to a random video background.
ChatGPT Prompt
CREATE A HTML5 RANDOM QUOTES GENERATOR, USE FREE EXTERNAL API, WITHOUT API KEY, IN 1 HTML FILE, TITLE "QUOTE OF THE DAY" BUTTON CAPTION "NEW QUOTE",AUTO HEIGHT AND WIDTH FOR QUOTES PLACEHOLDER, I DON'T HAVE WEB SERVER, CREATE FOR LOCAL ONLY
ADD BEAUTIFUL CSS3 DESIGN,
ADD 5 SECONDS ONLOAD CSS3 RANDOM ANIMATION,
ADD RANDOM IMAGE BACKGROUND FROM PEXELS API, WITHOUT API KEY,I DON'T HAVE WEB SERVER, CREATE FOR LOCAL ONLY2. ADD BEAUTIFUL CSS3 DESIGN
3. ADD 5 SECONDS ONLOAD CSS3 RANDOM ANIMATION
4. ADD RANDOM IMAGE BACKGROUND FROM PEXELS API, WITHOUT API KEY,I DON'T HAVE WEB SERVER, CREATE FOR LOCAL ONLY
This is just a basic idea, you can improve upon it to achieve better results. In this tutorial, we will create a quotes generator, but you can create other types of apps, such as joke generators, poem generators, or short tutorial generators. Choose your own niche. The result of this tutorial is a simple app that generates random quotes with random image backgrounds. You can improve it yourself, like changing it to a random video background to make it more attractive. So, let's get started!
1. Basic App.
In this section, we will create a basic HTML5 app for generating random quotes from an external API without an API key. You can copy all of my prompts and final code from this tutorial in the video description and the article on my website. The link is also provided in the video description. Now, open your ChatGPT and enter this prompt. Wait for the process to complete, then copy all the generated code. Open Notepad or your text editor, paste the code, and save it as quotes generator dot html. Now, open the HTML file; it will look like this. When you click the button, the app will create another random quote.
2. Style.
Now let's make our app more visually appealing by adding CSS3 styles. The final result will look like this, or maybe a little different.
3. Animation.
Add some animation when new quotes are generated; this will be useful for those who want to record videos from this content generator. Here are the results, though the animation may be different on your end.
4. Background.
Let's add a random image from an external API without an API key. Here is the result: the background will change every time you refresh the webpage.
Now you can create content from this simple app. For image content, you can easily take a screenshot. For video content, you can record with a screen recorder, including the animation.
You can try this app on our website; the link is in the video description. Or just copy the code and run it on your own computer or mobile phone. Thank you for watching, and see you in the next AI tutorial video.
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quote of the Day</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
background-image: url('https://source.unsplash.com/random');
background-size: cover;
background-repeat: no-repeat;
}
#quote-container {
background-color: rgba(255, 255, 255, 0.9);
padding: 30px;
border-radius: 10px;
text-align: center;
max-width: 80%;
width: 400px;
}
#quote {
font-size: 24px;
margin-bottom: 10px;
line-height: 1.5;
}
#author {
font-size: 18px;
font-style: italic;
color: #4CAF50;
margin-top: 20px;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px 2px;
cursor: pointer;
border-radius: 25px;
transition: background-color 0.3s;
}
button:hover {
background-color: #3f8a41;
}
@media screen and (max-width: 480px) {
#quote-container {
width: 90%;
}
}
/* Animation */
.animated {
animation-duration: 5s;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation-name: fadeIn;
}
</style>
</head>
<body>
<div id="quote-container">
<div id="quote" class="animated fadeIn"></div>
<div id="author" class="animated fadeIn"></div>
<button id="new-quote" onclick="getNewQuote()">New Quote</button>
</div>
<script>
function getNewQuote() {
fetch('https://api.quotable.io/random')
.then(response => response.json())
.then(data => {
const quoteElement = document.getElementById('quote');
const authorElement = document.getElementById('author');
quoteElement.classList.remove('animated', 'fadeIn');
authorElement.classList.remove('animated', 'fadeIn');
setTimeout(() => {
quoteElement.textContent = data.content;
authorElement.textContent = '— ' + data.author;
quoteElement.classList.add('animated', 'fadeIn');
authorElement.classList.add('animated', 'fadeIn');
}, 100);
})
.catch(error => {
console.error('Error fetching quote:', error);
document.getElementById('quote').textContent = 'Oops! Something went wrong. Please try again.';
document.getElementById('author').textContent = '';
});
}
getNewQuote();
</script>
</body>
</html>
Nhận xét
Đăng nhận xét