diff --git a/app.js b/app.js index a206dd8d91..9add30220a 100644 --- a/app.js +++ b/app.js @@ -13,7 +13,7 @@ app.set('views', path.join(__dirname, 'views')); app.use(express.static(path.join(__dirname, 'public'))); // Register the location for handlebars partials here: - +hbs.registerPartials(path.join(__dirname, '/views/partials')); // ... // Add the route handlers here: @@ -21,5 +21,35 @@ app.use(express.static(path.join(__dirname, 'public'))); 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', {beers: beersFromApi}); + }) + .catch(error => console.log(error)); + +}); +app.get('/beers/beer', (req, res) => { + punkAPI + .getBeer(1) + .then(responseFromAPI => { + const beerId = responseFromAPI; + res.render('random-beer', {beerId: beerId}); + }) + .catch(error => console.log(error)); + +}); +app.get('/random-beer', (req, res) => { + punkAPI + .getRandom() + .then(responseFromAPI => { + const randomBeer = responseFromAPI[0]; + res.render('random-beer', {beer: randomBeer}); + }) + .catch(error => console.log(error)); + +}); app.listen(3000, () => console.log('🏃‍ on port 3000')); diff --git a/public/stylesheets/styles.css b/public/stylesheets/styles.css index 251470be83..bcb7cc3f30 100644 --- a/public/stylesheets/styles.css +++ b/public/stylesheets/styles.css @@ -5,3 +5,134 @@ dark-blue: #0a2c42; grey: #bfbfbf; font-family: Arial, Helvetica, sans-serif; */ +/* -------------PARTIAL CARD-------------*/ +.card{ + width: 32%; + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 10px; +} +.card img{ + height: 180px; + object-fit: cover; + margin-bottom: 10px; +} +.card .title-card{ + font-size: 0.9em; + +} +.card .tag-line{ + font-size: 0.7em; + color: #bfbfbf; + +} +.card .text-description-card{ + font-size: 0.7em; + margin-top: 10px; +} + +/* -------------FIN PARTIAL CARD-------------*/ + +/* -------------BEERS PAGE-------------*/ +.beers-section{ + width: 85%; + margin: 0 auto; + display: flex; + flex-wrap: wrap; + flex-direction: row; + justify-content: space-between; + margin-top: 85px; + margin-bottom: 80px; +} +/* -------------FIN BEERS PAGE-------------*/ + +/* -------------LAYOUT -------------*/ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + background-color: #f7f9f9; + font-family: Arial, Helvetica, sans-serif; + font-size: 16px; +} +a{ + text-decoration: none; + color: #f7f9f9; + text-align: center; + margin-right: 20px; + font-weight: 600; + transition: all .3s ease; +} +a:hover{ + color: #bfbfbf; +} +.nav-bar{ + position: fixed; + top: 0; + left: 0; + width: 100%; + padding: 20px 50px; + background-color: #2081c3; +} + +.footer{ + width: 100%; + color: #f7f9f9; + background-color: #0a2c42; + padding: 20px 20px; + position: fixed; + bottom: 0; + left: 0; +} +/* -------------FIN LAYOUT -------------*/ + +/* -------------INDEX-HOME-------------*/ +.main-section{ + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.section-content{ + height: 600px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 50px; +} +.main-section .section-content img{ + width: 350px; + margin-bottom: 30px; +} +.main-section .section-content a{ + background-color: #2081c3; + padding: 10px 20px; + margin-top: 20px; + border-radius: 5px; + border: 1px solid #2081c3; + transition: all .4s ease; +} +.main-section .section-content a:hover{ + color: #2081c3; + background-color: #f7f9f9; + +} + +/* -------------FIN INDEX-HOME-------------*/ + +/* -------------RANDOM BEERS PAGE-------------*/ +.container-beer{ + width: 85%; + margin: 0 auto; + display: flex; + flex-wrap: wrap; + flex-direction: row; + justify-content: space-between; + margin-top: 85px; + margin-bottom: 80px; +} +/* -------------FIN RANDOM BEERS PAGE-------------*/ \ No newline at end of file diff --git a/views/beers.hbs b/views/beers.hbs new file mode 100644 index 0000000000..0e008ebaf6 --- /dev/null +++ b/views/beers.hbs @@ -0,0 +1,5 @@ +
+ {{#each beers}} + {{> beerpartial this}} + {{/each}} +
\ No newline at end of file diff --git a/views/index.hbs b/views/index.hbs index 3a6cce8d18..82363c7a5f 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -1,3 +1,7 @@ -
- -
\ No newline at end of file +
+
+ beer-img + Check the Beers! + Check a Random Beer! +
+
\ No newline at end of file diff --git a/views/layout.hbs b/views/layout.hbs new file mode 100644 index 0000000000..d91c2b6356 --- /dev/null +++ b/views/layout.hbs @@ -0,0 +1,20 @@ + + + + + + Document + + + + + {{{body}}} + + + \ No newline at end of file diff --git a/views/partials/beerpartial.hbs b/views/partials/beerpartial.hbs new file mode 100644 index 0000000000..1728421c7d --- /dev/null +++ b/views/partials/beerpartial.hbs @@ -0,0 +1,17 @@ +
+ +
+

+ + + + {{this.name}} +

+
+ {{this.tagline}} +
+

+ {{this.description}} +

+
+
\ No newline at end of file diff --git a/views/random-beer.hbs b/views/random-beer.hbs new file mode 100644 index 0000000000..dc2110479c --- /dev/null +++ b/views/random-beer.hbs @@ -0,0 +1,25 @@ +
+ {{beerId}} +
+ +
+
+

+ + + + {{beer.name}} +

+
+ {{beer.tagline}} +
+

+ {{beer.description}} +

+
+
+ + + + +