`So i have been making a website which shows the Type of activity and participants based on the options selected from Drop down menu. But even if i choose anything it shows me the error as "Failed to make request: Request failed with status code 404" in console and the website keeps displaying 'No activites match your criteria'
This is my Index.js file
import express from "express";
import bodyParser from "body-parser";
import axios from "axios";
const app = express();
const port = 3000;
app.use(express.static("public"));
app.use(bodyParser.urlencoded({
extended: true
}));
// Step 1: Make sure that when a user visits the home page,
// it shows a random activity.You will need to check the format of the
// JSON data from response.data and edit the index.ejs file accordingly.
app.get("/", async (req, res) => {
try {
const response = await axios.get("https://bored-api.appbrewery.com/random");
let result = response.data;
console.log(result);
res.render("index.ejs", {
data: result
});
} catch (error) {
console.error("Failed to make request:", error.message);
res.render("index.ejs", {
error: error.message,
});
}
});
app.post("/", async (req, res) => {
try {
console.log(req.body);
const type = req.body.type;
const participants = req.body.participants;
const response = await axios.get(
`https://bored-api.appbrewery.com/filter?
type=${type}&participants=${participants}`
);
const result = response.data;
console.log(result);
res.render("index.ejs", {
data: result[Math.floor(Math.random() * result.length)],
});
} catch (error) {
console.error("Failed to make request:", error.message);
res.render("index.ejs", {
error: "No activities that match your criteria.",
});
}
});
app.listen(port, () => {
console.log(`Server running on port: ${port}`);
});
and my here is my index.ejs file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/styles/main.css">
<title>I'm Bored</title>
</head>
<body>
<div class="container">
<h1>Let's find something for you to do ✌️</h1>
<form action="/" id="form" class="form" method="POST">
<select name="type" class="form-select">
<option value="" data-display="Select">Random type</option>
<option value="education">Education</option>
<option value="charity">Charity</option>
<option value="recreational">Recreational</option>
<option value="relaxation">Relaxation</option>
<option value="busywork">Busywork</option>
<option value="social">Social</option>
<option value="diy">DIY</option>
<option value="music">Music</option>
</select>
<select name="participants" class="form-select">
<option value="">Any number of people</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<button type="submit" class="form-submit">Go</button>
</form>
<section id="cards" class="cards">
<% if(locals.data){ %>
<article class="card-item">
<h2 class="card-activity">
<%= data.activity %>
<!-- Show Activity -->
</h2>
<div class="card-info">
<span class="card-type">
<%= data.type %>
<!-- Show Activity type -->
</span>
<span class="card-participants">
participants: <%= data.participants %>
<!-- participants: Show participant number -->
<span class="card-number"></span>
</span>
</div>`your text`
</article>
<% } %>
<%if(locals.error){%>
<div id="tag-error" class="tag-error">
<%=error%>
<!-- Show any errors that were sent from the backend -->
</div>
<% } %>
</section>
</div>
</body>
</html>
You can add app.use(express.json()) in order to parse JSON data coming from the request. Write these codes respectively: