BER Webdev PT 012024 Nil Erden

app.js

@@ -7,19 +7,87 @@ const PunkAPIWrapper = require('punkapi-javascript-wrapper');
 const app = express();
 const punkAPI = new PunkAPIWrapper();
 
+const axios = require('axios').default;
+
 app.set('view engine', 'hbs');
 app.set('views', path.join(__dirname, 'views'));
 
 app.use(express.static(path.join(__dirname, 'public')));
+hbs.registerPartials(path.join(__dirname, 'views/partials'));
 
-// Register the location for handlebars partials here:
-
-// ...
-
-// Add the route handlers here:
+fetch('https://dummyjson.com/auth/login', {
+  method: 'POST',
+  headers: { 'Content-Type': 'application/json' },
+  body: JSON.stringify({
+    username: 'kminchelle',
+    password: '0lelplR'
+  })
+})
+  .then(res => res.json() && console.log('auth worked'))
+  .catch(error => console.log('error') && console.log('auth error'));
 
 app.get('/', (req, res) => {
   res.render('index');
 });
 
+app.get('/beers', (req, res) => {
+  const itemList = axios.get('https://dummyjson.com/products');
+  let productData;
+  let itemNames = [];
+  itemList
+    .then(item => {
+      const { data, ...rest } = item;
+      productData = data.products;
+      return productData;
+    })
+    .then(() => {
+      for (let i = 0; i < 25; i++) {
+        itemNames.push(productData[i]);
+      }
+      return itemNames;
+    })
+    .then(() => res.render('beers', { itemNames }))
+    .catch(error => console.log('error') && console.log(error));
+});
+
+app.get('/random-beer', (req, res) => {
+  const itemList = axios.get('https://dummyjson.com/products');
+  let productData;
+  let randomItem;
+  let randomPosition;
+  itemList
+    .then(item => {
+      const { data, ...rest } = item;
+      productData = data.products;
+      return productData;
+    })
+    .then(productData => {
+      randomPosition = Math.floor(Math.random() * productData.length);
+      randomItem = productData[randomPosition];
+      return randomItem;
+    })
+    .then(randomItem => res.render('randomBeer', { randomItem }))
+    .catch(error => console.log('error') && console.log(error));
+});
+
+app.get('/beer-detail-page', (req, res) => {
+  const itemId = req.query.id;
+  const itemList = axios.get('https://dummyjson.com/products');
+  let productData;
+  itemList
+    .then(item => {
+      const { data, ...rest } = item;
+      productData = data.products;
+      return productData;
+    })
+    .then(productData => {
+      const randomItem = productData.filter(
+        element => element.id === Number(itemId)
+      )[0];
+      return randomItem;
+    })
+    .then(randomItem => res.render('beerDetailPage', { randomItem }))
+    .catch(error => console.log('error') && console.log(error));
+});
+
 app.listen(3000, () => console.log('🏃‍ on port 3000'));

package.json

@@ -8,6 +8,7 @@
   },
   "license": "ISC",
   "dependencies": {
+    "axios": "^1.6.8",
     "express": "^4.17.1",
     "hbs": "^4.1.1",
     "punkapi-javascript-wrapper": "^1.0.2"

public/stylesheets/styles.css

@@ -1,7 +1,66 @@
-/*
-white: #f7f9f9;
-light-blue: #2081c3;
-dark-blue: #0a2c42;
-grey: #bfbfbf;
-font-family: Arial, Helvetica, sans-serif;
-*/
+#beer-img {
+  display: block;
+  padding: 40px;
+  margin-left: auto;
+  margin-right: auto;
+  width: 30%;
+}
+
+.button-generic {
+  background-color: #2081c3;
+  color: #f7f9f9;
+  border: none;
+  border-radius: 5px;
+  margin: 10px;
+  padding: 5px;
+}
+
+.button-holder {
+  display: flex;
+  justify-content: center;
+}
+
+.card img {
+  height: 200px;
+  object-fit: cover;
+}
+
+.items {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.card {
+  padding: 15px;
+  margin: 15px;
+  height: 400px;
+}
+
+.card-body > p {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.product-image {
+  padding: 15px;
+  margin: 15px;
+  height: 250px;
+}
+
+.product-detail {
+  display: flex;
+  margin: 20px;
+}
+
+.product-text {
+  flex-direction: column;
+}
+
+.product-text > h2,
+h3,
+h4,
+p {
+  padding: 10px;
+  margin: 10px;
+}

views/beerDetailPage.hbs

@@ -0,0 +1 @@
+{{> beerdetail this}} 

views/beers.hbs

@@ -0,0 +1,7 @@
+<div class="items">
+    {{#each itemNames}}
+        {{> beerpartial this}} 
+    {{else}}
+        <p>No items yet!</p>
+    {{/each}}
+</div>

views/index.hbs

@@ -1,3 +1,17 @@
 <div>
-
+  <img alt='beer' src='/images/beer.png' id='beer-img' />
+</div>
+<div class='button-holder'>
+  <button class='button-generic' type='button' onclick="location.href='/beers'">
+    Check the Beers!
+  </button>
+</div>
+<div class='button-holder'>
+  <button
+    class='button-generic'
+    type='button'
+    onclick="location.href='/random-beer'"
+  >
+    Check a Random Beer!
+  </button>
 </div>

views/layout.hbs

@@ -0,0 +1,21 @@
+<html>
+  <head>
+    <meta charset='utf-8' />
+    <title>Iron Beers</title>
+    <link rel='stylesheet' href='/stylesheets/styles.css' />
+    <link
+      rel='stylesheet'
+      href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'
+      integrity='sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T'
+      crossorigin='anonymous'
+    />
+  </head>
+  <body>
+    <nav class='navbar navbar-expand-lg navbar-dark bg-dark'>
+      <a class='navbar-brand' href='/'>Home</a>
+      <a class='navbar-brand' href='/beers'>Beers</a>
+      <a class='navbar-brand' href='/random-beer'>Random Beer</a>
+    </nav>
+    {{{body}}}
+  </body>
+</html>

views/partials/beerdetail.hbs

@@ -0,0 +1,15 @@
+<div class='product-detail'>
+  <div class='product-image'>
+    <img src='{{randomItem.images.1}}' alt='{{randomItem.title}}' />
+  </div>
+  <div class='product-text'>
+    <h2>{{randomItem.title}}</h2>
+    <h3>{{randomItem.brand}}</h3>
+    <p>{{randomItem.description}}</p>
+    <h4>User Reviews</h4>
+    <p>{{randomItem.rating}}</p>
+    <h4>Price</h4>
+    <p><strong>{{randomItem.price}}</strong> Euroes</p>
+    <p><strong>{{randomItem.discountPercentage}}%</strong> off!</p>
+  </div>
+</div>

views/partials/beerpartial.hbs

@@ -0,0 +1,16 @@
+<div class='col-md-4'>
+  <div class='card'>
+    <img class='card-img-top' src='{{this.images.0}}' alt='{{this.name}}' />
+    <div class='card-body'>
+      <h5 class='card-title'>
+        <a href='/beer-detail-page?id={{this.id}}'>{{this.title}}</a>
+      </h5>
+      <p class='card-text'>
+        {{this.brand}}
+      </p>
+      <p>
+        {{this.description}}
+      </p>
+    </div>
+  </div>
+</div>

views/randomBeer.hbs

@@ -0,0 +1 @@
+{{> beerdetail this}}