diff --git a/app.js b/app.js index a206dd8d91..75c50cca1c 100644 --- a/app.js +++ b/app.js @@ -1,4 +1,5 @@ const express = require('express'); +const axios = require('axios') const hbs = require('hbs'); const path = require('path'); @@ -19,7 +20,25 @@ app.use(express.static(path.join(__dirname, 'public'))); // Add the route handlers here: app.get('/', (req, res) => { - res.render('index'); + res.render('home'); +}); + +app.get('/beers', (req, res) => { + axios.get('https://api.openbrewerydb.org/v1/breweries') + .then((response)=>{ + console.log('response', response.data) + res.render('beers', {id: response.data}) + }) + .catch((err)=>console.log(err)) +}); + +app.get('/random-beers', (req, res) => { + axios.get('https://api.openbrewerydb.org/v1/breweries/random') + .then((response)=>{ + console.log('response', response.data) + res.render('random-beers', {id: response.data}) + }) + .catch((err)=>console.log(err)) }); app.listen(3000, () => console.log('🏃 on port 3000')); diff --git a/package.json b/package.json index 111c4e477d..7dbb1ea755 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,8 @@ }, "license": "ISC", "dependencies": { - "express": "^4.17.1", + "axios": "^1.7.2", + "express": "^4.19.2", "hbs": "^4.1.1", "punkapi-javascript-wrapper": "^1.0.2" } diff --git a/public/stylesheets/styles.css b/public/stylesheets/styles.css index 251470be83..34e0dd79bf 100644 --- a/public/stylesheets/styles.css +++ b/public/stylesheets/styles.css @@ -5,3 +5,68 @@ dark-blue: #0a2c42; grey: #bfbfbf; font-family: Arial, Helvetica, sans-serif; */ + +body{ + margin: 0; +} +nav{ + background-color: #2081c3; + color: white; + width: 100%; + height: 4rem; + position: fixed; + top: 0; + display: flex; + align-items: center; +} +.nav-ul{ + margin: 0; + display: flex; + align-items: center; +} +.nav-li{ + margin-left: 20px; + list-style-type: none; +} +.nav-a{ + text-decoration: none; + color: white; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} + +.home-container{ + margin-top: 7rem; + display: flex; + flex-direction: column; + align-items: center; +} + +.beer-image{ + width: 30rem; + text-align: center; + margin-bottom: 20px; +} + +.home-a{ + margin-top: 10px; + padding: 10px 25px; + background-color: #2081c3; + color: white; + text-decoration: none; + border-radius: 5px; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} + +.container{ + margin-top: 7rem; +} + +.beer-container{ + margin: 2rem 1rem; + list-style-type: none; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} + +.beer-li1{ + font-weight: bold; +} \ No newline at end of file diff --git a/views/beers.hbs b/views/beers.hbs new file mode 100644 index 0000000000..82b4955e1e --- /dev/null +++ b/views/beers.hbs @@ -0,0 +1,13 @@ + +<div class="container"> + {{#each id}} + <ul class="beer-container"> + <li class="beer-li1">Brewery Name: {{name}}</li> + <li class="beer-li">Brewery Type: {{brewery_type}}</li> + <li class="beer-li">City: {{city}}</li> + <li class="beer-li">Country: {{country}}</li> + <li class="beer-li">Phone: {{phone}}</li> + <li class="beer-li">Website: <a href="{{website_url}}">{{name}}</a></li> + </ul> + {{/each}} +</div> \ No newline at end of file diff --git a/views/home.hbs b/views/home.hbs new file mode 100644 index 0000000000..d8464bf359 --- /dev/null +++ b/views/home.hbs @@ -0,0 +1,5 @@ +<div class="home-container"> +<img src="/images/beer.png" alt="a mug of beer" class="beer-image"> +<a href="/beers" class="home-a">Click the Beers!</a> +<a href="/random-beers" class="home-a">Click a Random Beer!</a> +</div> \ No newline at end of file diff --git a/views/index.hbs b/views/index.hbs deleted file mode 100644 index 3a6cce8d18..0000000000 --- a/views/index.hbs +++ /dev/null @@ -1,3 +0,0 @@ -<div> - -</div> \ No newline at end of file diff --git a/views/layout.hbs b/views/layout.hbs new file mode 100644 index 0000000000..c2ee164b5e --- /dev/null +++ b/views/layout.hbs @@ -0,0 +1,19 @@ +<!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="/stylesheets/styles.css"> + <title>Document</title> +</head> +<body> + <nav> + <ul class="nav-ul"> + <li class="nav-li"><a href="/" class="nav-a">Home</a></li> + <li class="nav-li"><a href="/beers" class="nav-a">Beers</a></li> + <li class="nav-li"><a href="/random-beers" class="nav-a">Random Beers</a></li> + </ul> + </nav> + {{{ body }}} +</body> +</html> \ No newline at end of file diff --git a/views/partials/partials.hbs b/views/partials/partials.hbs new file mode 100644 index 0000000000..e69de29bb2 diff --git a/views/random-beers.hbs b/views/random-beers.hbs new file mode 100644 index 0000000000..82b4955e1e --- /dev/null +++ b/views/random-beers.hbs @@ -0,0 +1,13 @@ + +<div class="container"> + {{#each id}} + <ul class="beer-container"> + <li class="beer-li1">Brewery Name: {{name}}</li> + <li class="beer-li">Brewery Type: {{brewery_type}}</li> + <li class="beer-li">City: {{city}}</li> + <li class="beer-li">Country: {{country}}</li> + <li class="beer-li">Phone: {{phone}}</li> + <li class="beer-li">Website: <a href="{{website_url}}">{{name}}</a></li> + </ul> + {{/each}} +</div> \ No newline at end of file