1travelintexan/app.js

## app.js
const express = require('express');
const expressLayouts = require('express-ejs-layouts');

const path = require('path');
const PunkAPIWrapper = require('punkapi-javascript-wrapper');

const app = express();
const punkAPI = new PunkAPIWrapper();

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
app.use(expressLayouts);

app.use(express.static(path.join(__dirname, 'public')));

// Add the route handlers here:

app.get('/', (req, res) => {
  res.render('index');
});
app.get('/beers', (req, res) => {
  punkAPI
    .getBeers()
    .then(beersFromApi => {
      //console.log('Beers from the database: ', beersFromApi);
      res.render('beers', { beersFromApi });
    })
    .catch(error => console.log(error));
});

app.get('/randomBeer', (req, res) => {
  punkAPI
    .getRandom()
    .then(randomBeer => {
      console.log('Heres a random beer', randomBeer);
      res.render('randomBeer', { randomBeer });
    })
    .catch(error => console.log(error));
});

app.get('/beerId/:id', (req, res) => {
  const { id } = req.params;
  punkAPI
    .getBeer(id)
    .then(singleBeer => {
      console.log('Heres a single beer', singleBeer);
      res.render('singleBeer', { singleBeer });
    })
    .catch(error => console.log(error));
});

app.listen(3000, () => console.log('🏃‍ on port 3000'));

## beers.ejs
<div class="beer-page">
  <% for( let i = 0; i< beersFromApi.length; i++ ) { %>
  <a href="/beerId/<%-beersFromApi[i].id%>">
    <div class="beer">
      <img
        src="<%= beersFromApi[i].image_url %>"
        alt="beer image"
        style="height: 100px"
      />
      <h3><%- beersFromApi[i].name %></h3>
      <p><%- beersFromApi[i].description %></p>
      <h6><%- beersFromApi[i].tagline%></h6>
    </div>
  </a>
  <% } %>
</div>

## footerPartial.ejs
<footer>
  <h3>Let's go try some of these BEERS!</h3>
</footer>

## index.ejs
<div class="index">
  <img src="/images/beer.png" alt="beer pic" style="height: 200px" />
  <div class="button-div">
    <a class="button" href="/beers">Check the Beers!</a>
    <a class="button" href="/randomBeer">Check a Random Beer</a>
  </div>
</div>

## layout.ejs
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/stylesheets/styles.css" />
    <title>IronBeers</title>
  </head>
  <body>
    <%- include('./partials/nav-partial.ejs')%> <%- body%><%-
    include('./partials/footer-partial.ejs')%>
  </body>
</html>

## navPartial.ejs
<nav>
  <a class="layoutLink" href="/">Home</a>
  <a class="layoutLink" href="/beers">Beers</a>
  <a class="layoutLink" href="/randomBeer">Random Beer</a>
</nav>

## randomBeer.ejs
<h1>Random Beer!</h1>
<div class="randomBeer">
  <img
    src="<%-randomBeer[0].image_url%>"
    alt="random beer image"
    style="width: 20%"
  />
  <div style="width: 60%">
    <h4>
      <h2>Name:</h2>
      <%-randomBeer[0].name%>
    </h4>
    <h4>
      <h2>Description:</h2>
      <%-randomBeer[0].description%>
    </h4>
    <h4>
      <h2>Tagline:</h2>
      <%-randomBeer[0].tagline%>
    </h4>
    <h4>
      <h2>Food Pairing:</h2>
      <%-randomBeer[0].food_pairing%>
    </h4>
  </div>
</div>

## singleBeer.ejs
<h1>Single Beer</h1>
<div class="randomBeer">
  <img
    src="<%=singleBeer[0].image_url%>"
    alt="random beer image"
    style="width: 20%"
  />
  <div style="width: 60%">
    <h4>
      <h2>Name:</h2>
      <%-singleBeer[0].name%>
    </h4>
    <h4>
      <h2>Description:</h2>
      <%-singleBeer[0].description%>
    </h4>
    <h4>
      <h2>Tagline:</h2>
      <%-singleBeer[0].tagline%>
    </h4>
    <h2>Food Pairing:</h2>
    <%singleBeer[0].food_pairing.forEach(pairing => { %>
    <ul>
      <li><%=pairing%></li>
    </ul>
    <% }) %>
  </div>
</div>
	const express = require('express');
	const expressLayouts = require('express-ejs-layouts');

	const path = require('path');
	const PunkAPIWrapper = require('punkapi-javascript-wrapper');

	const app = express();
	const punkAPI = new PunkAPIWrapper();

	app.set('view engine', 'ejs');
	app.set('views', path.join(__dirname, 'views'));
	app.use(expressLayouts);

	app.use(express.static(path.join(__dirname, 'public')));

	// Add the route handlers here:

	app.get('/', (req, res) => {
	res.render('index');
	});
	app.get('/beers', (req, res) => {
	punkAPI
	.getBeers()
	.then(beersFromApi => {
	//console.log('Beers from the database: ', beersFromApi);
	res.render('beers', { beersFromApi });
	})
	.catch(error => console.log(error));
	});

	app.get('/randomBeer', (req, res) => {
	punkAPI
	.getRandom()
	.then(randomBeer => {
	console.log('Heres a random beer', randomBeer);
	res.render('randomBeer', { randomBeer });
	})
	.catch(error => console.log(error));
	});

	app.get('/beerId/:id', (req, res) => {
	const { id } = req.params;
	punkAPI
	.getBeer(id)
	.then(singleBeer => {
	console.log('Heres a single beer', singleBeer);
	res.render('singleBeer', { singleBeer });
	})
	.catch(error => console.log(error));
	});

	app.listen(3000, () => console.log('🏃‍ on port 3000'));
	<div class="beer-page">
	<% for( let i = 0; i< beersFromApi.length; i++ ) { %>
	<a href="/beerId/<%-beersFromApi[i].id%>">
	<div class="beer">
	<img
	src="<%= beersFromApi[i].image_url %>"
	alt="beer image"
	style="height: 100px"
	/>
	<h3><%- beersFromApi[i].name %></h3>
	<p><%- beersFromApi[i].description %></p>
	<h6><%- beersFromApi[i].tagline%></h6>
	</div>
	</a>
	<% } %>
	</div>
	<div class="index">
	<img src="/images/beer.png" alt="beer pic" style="height: 200px" />
	<div class="button-div">
	<a class="button" href="/beers">Check the Beers!</a>
	<a class="button" href="/randomBeer">Check a Random Beer</a>
	</div>
	</div>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="/stylesheets/styles.css" />
	<title>IronBeers</title>
	</head>
	<body>
	<%- include('./partials/nav-partial.ejs')%> <%- body%><%-
	include('./partials/footer-partial.ejs')%>
	</body>
	</html>
	<nav>
	<a class="layoutLink" href="/">Home</a>
	<a class="layoutLink" href="/beers">Beers</a>
	<a class="layoutLink" href="/randomBeer">Random Beer</a>
	</nav>
	<h1>Random Beer!</h1>
	<div class="randomBeer">
	<img
	src="<%-randomBeer[0].image_url%>"
	alt="random beer image"
	style="width: 20%"
	/>
	<div style="width: 60%">
	<h4>
	<h2>Name:</h2>
	<%-randomBeer[0].name%>
	</h4>
	<h4>
	<h2>Description:</h2>
	<%-randomBeer[0].description%>
	</h4>
	<h4>
	<h2>Tagline:</h2>
	<%-randomBeer[0].tagline%>
	</h4>
	<h4>
	<h2>Food Pairing:</h2>
	<%-randomBeer[0].food_pairing%>
	</h4>
	</div>
	</div>
	<h1>Single Beer</h1>
	<div class="randomBeer">
	<img
	src="<%=singleBeer[0].image_url%>"
	alt="random beer image"
	style="width: 20%"
	/>
	<div style="width: 60%">
	<h4>
	<h2>Name:</h2>
	<%-singleBeer[0].name%>
	</h4>
	<h4>
	<h2>Description:</h2>
	<%-singleBeer[0].description%>
	</h4>
	<h4>
	<h2>Tagline:</h2>
	<%-singleBeer[0].tagline%>
	</h4>
	<h2>Food Pairing:</h2>
	<%singleBeer[0].food_pairing.forEach(pairing => { %>
	<ul>
	<li><%=pairing%></li>
	</ul>
	<% }) %>
	</div>
	</div>