Illuminatiiiiii
11/21/2018 - 12:46 AM

Working with API Data

For episode 11

app.js
content_copyfile_download
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/:page", function (req, res) {
    var pageNumber = req.params.page;
    request("https://api.unsplash.com/photos/?client_id=a23535d66eec2d81f1d9aea445095e620bf47ec2df2b80266d2b7b92adf2d844&page=" + pageNumber, function (error, response, body) {
        if (error) {
            console.log(error);
        } else {
            var data = JSON.parse(body);
            res.render("pictures", {
                picData: data,
                pageNumber: pageNumber
            });
        }
    });
});

//Route if they dont provide a page number
app.get("/pics", function (req, res) {
    var pageNumber = req.params.page;
    request("https://api.unsplash.com/photos/?client_id=a23535d66eec2d81f1d9aea445095e620bf47ec2df2b80266d2b7b92adf2d844", function (error, response, body) {
        if (error) {
            console.log(error);
        } else {
            var data = JSON.parse(body);
            res.render("pictures", {
                picData: data,
                pageNumber: 1
            });
        }
    });
});

app.listen("3000", function () {
    console.log("Gaming Website has started up! Made by Illuminati Productions.");
});
pictures.ejs
content_copyfile_download
<% 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.length;i++){ %>
<div style="background-color: <%= picData[i].color %>; width: 290px; border: 2px solid red">
    <img src="<%= picData[i].urls.thumb %>" style="width:286px; height: 180px;" /> 
    <p>By: <%= picData[i].user.name %> on <%= picData[i].created_at %></p>
    <p>Dimensions: <%= picData[i].width %>X<%= picData[i].height %></p>
    <p>Likes: <%= picData[i].likes %></p>
</div>
<% } %>
</div>

<% include partials/footer %>
header.ejs
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Illuminati Productions</title>
        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel="stylesheet" href="/style.css">
    </head>
    <body>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <a class="navbar-brand" href="#"><img src="/images/CortexLogo.png" width="30" height="30" class="d-inline-block align-top" alt=""> Illuminati Productions</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/list">All Games</a>
            </li>
          </ul>
          <form class="form-inline mt-2 mt-md-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>
      <div class="container">