Illuminatiiiiii
11/20/2018 - 3:29 AM

Designing the Website

For episode 9: https://youtu.be/2iVY09kPB7o Template: https://getbootstrap.com/docs/4.1/examples/album/ Bootstrap: https://getbootstrap.com/ Project: https://github.com/Illuminatiiiiii/GamingWebsite

app.js
content_copyfile_download
const express = require("express");
const app = express();

//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.listen("3000", function(){
    console.log("Gaming Website has started up! Made by Illuminati Productions.");
});
list.ejs
content_copyfile_download
<% include partials/header %>
 
    <h1>This is all of the games we have:</h1>
 
    <div class="row">
        <% for(var i = 0;i < gamesList.length; i++){ %>
        <div class="col-md-4">
            <div class="card" style="width: 18rem;">
                <img class="card-img-top" src="images/imageempty.svg" alt="Card image cap">
                <div class="card-body">
                <h5 class="card-title"><%= gamesList[i].title %></h5>
                <p class="card-text">Game created by <%= gamesList[i].creator %></p>
                <a href="/game/<%= gamesList[i].title %>/<%= gamesList[i].creator %>" class="btn btn-primary">Play Game</a>
                </div>
            </div>
        </div>
        <% } %>
    </div>
    
<% include partials/footer %>
game.ejs
content_copyfile_download
<% include partials/header %>

        <h2>Game Title: <%= title %></h2>
        <h3>Game Creator: <%= creator %></h3>
        <% if(title == "Fortnite"){ %> 
            <p>Description: Fortnite Battle Royale is the FREE 100-player PvP mode in Fortnite. One giant map. A battle bus. Fortnite building skills and destructible environments combined ...</p>
        <% }else{ %>
            <p>There is no description for this game. Try Fortnite.</p>
        <% } %>

<% include partials/footer %>
homepage.ejs
content_copyfile_download
<% include partials/header %>
    <h1>Welcome to the Illuminati Productions website</h1>
    <p>I hope you enjoy your stay ;)</p>

<% include partials/footer %>
header.ejs
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Illuminati Productions</title>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    </head>
    <body>
     <!-- This is where can set up a menu/navbar for each page -->
        <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">
              <a class="nav-link" href="/">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/list">Games</a>
            </li>
          </ul>
        </div>
         </nav>
        <div class="container">
footer.ejs
content_copyfile_download
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
</body>
</html>
style.css
content_copyfile_download
/* Empty for now, this will hold our custom styles that override the boostrap styles */
body { 
    padding-top: 65px; 
}