diff --git a/app.js b/app.js index a206dd8d91..12ce1165ed 100644 --- a/app.js +++ b/app.js @@ -7,19 +7,37 @@ const PunkAPIWrapper = require('punkapi-javascript-wrapper'); const app = express(); const punkAPI = new PunkAPIWrapper(); +//Configuration HBS view engine app.set('view engine', 'hbs'); app.set('views', path.join(__dirname, 'views')); +//Set up static files (img, css) app.use(express.static(path.join(__dirname, 'public'))); // Register the location for handlebars partials here: - -// ... +hbs.registerPartials(__dirname + "/views/partials"); // Add the route handlers here: app.get('/', (req, res) => { - res.render('index'); + res.render("index"); +}); + +app.get('/breweries', (req, res) => { + fetch('https://api.openbrewerydb.org/v1/breweries') + .then((response) => response.json()) + .then((response) => { + res.render("breweries", {breweries: response}) + }); +}); + +app.get('/random-breweries', (req, res) => { + fetch('https://api.openbrewerydb.org/v1/breweries/random') + .then((response) => response.json()) + .then((response) =>{ + res.render('random-breweries', {breweries: response}); + }); + }); app.listen(3000, () => console.log('🏃‍ on port 3000')); diff --git a/package.json b/package.json index 111c4e477d..728503df66 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,8 @@ "license": "ISC", "dependencies": { "express": "^4.17.1", - "hbs": "^4.1.1", + "hbs": "^4.2.0", + "path": "^0.12.7", "punkapi-javascript-wrapper": "^1.0.2" } } diff --git a/public/stylesheets/styles.css b/public/stylesheets/styles.css index 251470be83..01e17cbf04 100644 --- a/public/stylesheets/styles.css +++ b/public/stylesheets/styles.css @@ -5,3 +5,32 @@ dark-blue: #0a2c42; grey: #bfbfbf; font-family: Arial, Helvetica, sans-serif; */ + +/* CSS for navbar */ +.navbar { + background-color: #2081c3; + overflow: hidden; +} + +.navbar a { + float: left; + display: block; + color: #f7f9f9; + text-align: center; + padding: 14px 20px; + text-decoration: none; + font-family: Arial, Helvetica, sans-serif; +} + +.home { + display: flex; + flex-direction: column; + align-items: center; + +} +.index-button { + background-color: #2081c3; + color: #f7f9f9; + padding: 0.5%; +} + diff --git a/views/breweries.hbs b/views/breweries.hbs new file mode 100644 index 0000000000..fd92032893 --- /dev/null +++ b/views/breweries.hbs @@ -0,0 +1,6 @@ +

Breweries

+ \ No newline at end of file diff --git a/views/index.hbs b/views/index.hbs index 3a6cce8d18..c6889e70a1 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -1,3 +1,11 @@ -
+
+ + beer + + + + +
+ + -
\ No newline at end of file diff --git a/views/layout.hbs b/views/layout.hbs new file mode 100644 index 0000000000..c2848e2a06 --- /dev/null +++ b/views/layout.hbs @@ -0,0 +1,13 @@ + + + + + + Document + + + {{> navbar}} + {{{body}}} + + + \ No newline at end of file diff --git a/views/partials/navbar.hbs b/views/partials/navbar.hbs new file mode 100644 index 0000000000..ec1a18d8cf --- /dev/null +++ b/views/partials/navbar.hbs @@ -0,0 +1,5 @@ +
+ Home + Breweries + Random Breweries +
\ No newline at end of file diff --git a/views/random-breweries.hbs b/views/random-breweries.hbs new file mode 100644 index 0000000000..5c222d0c76 --- /dev/null +++ b/views/random-breweries.hbs @@ -0,0 +1,6 @@ +

Random Breweries

+ \ No newline at end of file