create add product form #53

public/scripts/new_product.js

@@ -0,0 +1,3 @@
+(function() {
+  console.log(123);
+})();

public/style/sass/_form.scss

@@ -33,7 +33,7 @@
     }
   }
 
-  input, textarea {
+  input, textarea, select {
     width: 100%;
     margin-top: .5rem;
     padding: .5rem 0;

public/style/sass/_reset.scss

@@ -1,4 +1,4 @@
-body, header, h1, a, div, input, textarea, p {
+body, header, h1, a, div, input, textarea, p, select {
   margin: 0;
   padding: 0;
   border: 0;

src/routes/new_product.js

@@ -0,0 +1,5 @@
+module.exports = (req, res) => {
+  res.render('new_product', {
+    title: 'Add New Product'
+  });
+};

src/routes/router.js

@@ -1,14 +1,15 @@
 const router = require('express').Router();
 const auth = require('./validate.js');
 
-router.post('/authenticate', require('./authenticate'));
+router.post('/authenticate', require('./authenticate.js'));
 router.get('/', require('./home.js'));
 router.get('/register', require('./register.js'));
 router.get('/login', require('./login.js'));
 router.get('/create', auth, require('./create.js'));
-router.get('/sign-s3', require('./sign_s3'));
+router.get('/sign-s3', require('./sign_s3.js'));
 router.post('/add-user', require('./add_user.js'));
 router.post('/add-profile', require('./add_profile.js'));
-router.get('/profile', require('./profile'));
+router.get('/profile', require('./profile.js'));
+router.get('/new-product', require('./new_product.js'));
 
 module.exports = router;

views/new_product.hbs

@@ -0,0 +1,34 @@
+{{>header}}
+
+<div class="page-content">
+  <form class="form" id="product-form" autocomplete="off">
+    <div class="form-input-wrap">
+      <label>Product Name
+        <input type="text" name="product">
+      </label>
+
+      <label>Category
+        <select class="input-field" name="category">
+          <option value="">Please Select</option>
+          <option value="Jewellery">Jewellery</option>
+          <option value="Crochet">Crochet</option>
+          <option value="Calligraphy">Calligraphy</option>
+          <option value="Embroidery">Embroidery</option>
+          <option value="Metalworking">Metalworking</option>
+        </select>
+      </label>
+
+      <label class="textarea-label">Description
+        <span class="char-count" id="about-char-count">100</span>
+        <textarea name="description" rows="3" maxlength="100" id="about-text"></textarea>
+      </label>
+
+      <label>Price
+        <input class="input-field" type="number" min="1" name="price" step="any">
+      </label>
+    </div>
+    <input id="submit" type="submit" value="SUBMIT">
+  </form>
+</div>
+
+<script type="text/javascript" src="./scripts/new_product.js"></script>

views/partials/header.hbs

@@ -2,7 +2,7 @@
   <h1 class="page-title">{{title}}</h1>
   <div class="nav-button-wrap">
     {{#if user}}
-      <a class="nav-button fa fa-plus" id="nav-button" href="/add-product"></a>
+      <a class="nav-button fa fa-plus" id="nav-button" href="/new-product"></a>
     {{/if}}
     <a class="nav-button fa fa-home" id="nav-button" href="/"></a>
   </div>