Share
Explore
JavaScript lab for building a random joke generator using the JokeAPI:
First step in building the NPM application is:
Let's create a simple Node.js API server which serves jokes stored in a JSON file.
npm install express cors
[
{
"id": 1,
"joke": "Why don't scientists trust atoms? Because they make up everything!"
},
{
"id": 2,
"joke": "Why was the math book sad? Because it had too many problems."
},
{
"id": 3,
"joke": "Why can't you give Elsa a balloon? Because she will let it go."
}
]
const express = require('express');
const cors = require('cors');
const fs = require('fs');
// Create an express app
const app = express();
// Enable CORS
app.use(cors());
// Load jokes from JSON file
let jokes = JSON.parse(fs.readFileSync('jokes.json', 'utf8'));
// Create a route to get all jokes
app.get('/jokes', function (req, res) {
res.send(jokes);
});
// Create a route to get a joke by id
app.get('/jokes/:id', function (req, res) {
const joke = jokes.find(j => j.id === parseInt(req.params.id));
if (!joke) return res.status(404).send('The joke with the given ID was not found.');
res.send(joke);
});
// Start the server
app.listen(3000, () => {
console.log('Server is running at http://localhost:3000');
});
Below is a basic example of how you could create a web page that interacts with your Node.js jokes API server. This example assumes your server has a "/jokes" endpoint that responds to GET requests with a JSON object containing an array of jokes.
<!DOCTYPE html>
<html>
<head>
<title>Jokes API</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>My Joke:</h1>
<button id="getJoke">Get a Joke</button>
<p id="joke"></p>
<script>
$(document).ready(function(){
$('#getJoke').click(function(){
$.ajax({
url: 'http://localhost:3000/jokes', // Your localhost address here.
type: 'GET',
dataType: 'json',
success: function(data) {
var jokeIndex = Math.floor(Math.random() * data.length); // Assuming server returns an array of jokes.
$('#joke').text(data[jokeIndex].joke); // Adjust this line based on how the joke text is stored in your API.
},
error: function(error) {
console.log("There was an error", error);
},
});
});
});
</script>
</body>
</html>
Let's enhance the page with some CSS and minor UI/UX adjustments:
<!DOCTYPE html>
<html>
<head>
<title>Jokes API</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body {
font-family: 'Arial', sans-serif;
text-align: center;
margin-top: 50px;
}
#joke {
padding: 10px;
border-radius: 5px;
transition: background-color 0.3s;
}
.loading {
background-color: #f0f0f0; /* A neutral grey to indicate loading state */
}
.success {
background-color: #d4edda; /* A light green to indicate successful fetch */
}
.error {
color: red;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
</style>
</head>
<body>
<h1>My Joke:</h1>
<button id="getJoke">Get a Joke</button>
<p id="joke"></p>
<p id="errorMsg" class="error"></p>
<script>
$(document).ready(function(){
$('#getJoke').click(function(){
// Set loading state
$('#getJoke').prop('disabled', true).text('Loading...');
$('#joke').addClass('loading').text('');
$('#errorMsg').text(''); // Clear any previous error messages
$.ajax({
url: 'http://localhost:3000/jokes',
type: 'GET',
dataType: 'json',
success: function(data) {
var jokeIndex = Math.floor(Math.random() * data.length);
$('#joke').removeClass('loading').addClass('success').text(data[jokeIndex].joke);
$('#getJoke').prop('disabled', false).text('Get a Joke');
},
error: function(error) {
$('#joke').removeClass('loading success');
$('#errorMsg').text('Oops! Something went wrong. Please try again later.');
$('#getJoke').prop('disabled', false).text('Get a Joke');
console.log("There was an error", error);
},
});
});
});
</script>
</body>
</html>
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.