For Episode 12
const express = require("express");
const app = express();
const request = require("request");
//Sets the public folder as the external file folder
app.use(express.static("public"));
//Officially sets the view engine as ejs, therefore setting the default file type for readering to .ejs
app.set("view engine", "ejs");
app.get("/", function (req, res) {
res.render("homepage");
});
app.get("/game/:gameTitle/:gameCreator", function (req, res) {
const title = req.params.gameTitle;
const creator = req.params.gameCreator;
res.render("game", {
title: title,
creator: creator
});
});
app.get("/list", function (req, res) {
const games = [{
title: "Fortnite",
creator: "Epic Games"
},
{
title: "Dirty Bomb",
creator: "Splash Damage"
},
{
title: "Battlefield 1",
creator: "EA"
}
]
res.render("list", {
gamesList: games
});
});
app.get("/pics", function (req, res) {
var searchTerm = req.query.searchterm;
var page = req.query.page;
console.log(searchTerm);
request("https://api.unsplash.com/search/photos?client_id=a23535d66eec2d81f1d9aea445095e620bf47ec2df2b80266d2b7b92adf2d844&page=" + page + "&query=" + searchTerm, function (error, response, body) {
if (error) {
console.log(error);
} else {
var data = JSON.parse(body);
res.render("pictures", {
picData: data,
pageNumber: page
});
}
});
});
//Route to page so user can search for a picture
app.get("/search", function(req, res){
res.render("search");
});
app.listen("3000", function () {
console.log("Gaming Website has started up! Made by Illuminati Productions.");
});
<% include partials/header %>
<h1>Enter a Keyword to Search for Pictures</h1>
<form action="/pics" method="GET">
<div class="form-group">
<input type="text" class="form-control" placeholder="Example: sun" name="searchterm">
</div>
<div class="form-group">
<input type="text" class="form-control" value="1" name="page">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<% include partials/footer %>
<% include partials/header %>
<h1>Here is a list of all of the pictures on page: <%= pageNumber %></h1>
<div class="row">
<% for(var i = 0;i < picData.results.length;i++){ %>
<div style="background-color: <%= picData.results[i].color %>; width: 290px; border: 2px solid red">
<img src="<%= picData.results[i].urls.thumb %>" style="width:286px; height: 180px;" />
<p>By: <%= picData.results[i].user.name %> on <%= picData.results[i].created_at %></p>
<p>Dimensions: <%= picData.results[i].width %>X<%= picData.results[i].height %></p>
<p>Likes: <%= picData.results[i].likes %></p>
</div>
<% } %>
</div>
<% include partials/footer %>