create aboutus and contactus page, and allow customers to navigate f…

…or all routers Related #13

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+    "extends": "airbnb-base",
+    "rules": {
+      "consistent-return": "off"
+    }
+}

public/css/about.css

@@ -0,0 +1,91 @@
+* {box-sizing: border-box;}
+
+body {
+  margin: 0;
+  font-family: Arial;
+  text-align: center;
+  font-size: 20px;
+}
+
+.clear {
+  clear: both;
+}
+.header {
+  overflow: hidden;
+  background-color: #f1f1f1;
+  padding: 20px 10px;
+}
+
+.header a {
+  float: left;
+  color: black;
+  text-align: center;
+  padding: 12px;
+  text-decoration: none;
+  font-size: 16px;
+  line-height: 25px;
+  border-radius: 4px;
+}
+
+.header a.tweet {
+  font-size: 25px;
+  font-weight: bold;
+}
+
+.header a:hover {
+  background-color: #ddd;
+  color: black;
+}
+
+.header a.active {
+  background-color: dodgerblue;
+  color: white;
+}
+
+.header-right {
+  float: right;
+}
+
+ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #333;
+
+}
+
+li {
+    float: left;
+}
+
+li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+li a:hover {
+    background-color: #111;
+}
+
+.footer {
+   color: white;
+    text-align: center;
+   list-style-type: none;
+   margin: 0;
+   padding: 9px;
+   overflow: hidden;
+   background-color: #333;
+}
+.footer {
+   color: white;
+    text-align: center;
+   list-style-type: none;
+   margin: 0;
+   padding: 9px;
+   overflow: hidden;
+   background-color: #333;
+}

public/css/contactus.css

@@ -0,0 +1,112 @@
+.header {
+  overflow: hidden;
+  background-color: #f1f1f1;
+  padding: 20px 10px;
+}
+
+.header a {
+  float: left;
+  color: black;
+  text-align: center;
+  padding: 12px;
+  text-decoration: none;
+  font-size: 16px;
+  line-height: 25px;
+  border-radius: 4px;
+}
+
+.header a.tweet {
+  font-size: 25px;
+  font-weight: bold;
+}
+
+.header a:hover {
+  background-color: #ddd;
+  color: black;
+}
+
+.header a.active {
+  background-color: dodgerblue;
+  color: white;
+}
+
+.header-right {
+  float: right;
+}
+
+ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #333;
+
+}
+
+li {
+    float: left;
+}
+
+li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+li a:hover {
+    background-color: #111;
+}
+
+
+.contactus{
+  background: #333333a3;
+      max-width: 1000px;
+      position: relative;
+      margin: auto;
+      display: flex;
+      flex-direction: column;
+      margin-bottom: 10px;
+      padding: 20px 0;
+}
+.userInfo{
+  display: flex;
+  justify-content: center;
+  padding:20px;
+
+}
+.userInfo input {
+  border-radius: 8px;
+    width: 300px;
+    height: 39px;
+}
+
+.msg{
+  display: flex;
+  justify-content: center;
+}
+.msg textarea{
+  border-radius: 8px;
+
+}
+
+.btn{
+  display: flex;
+  justify-content:center;
+}
+.btn button{
+  background: white;
+  border-radius: 8px;
+  color: black;
+}
+
+.footer {
+   color: white;
+    text-align: center;
+   list-style-type: none;
+   margin: 0;
+   padding: 9px;
+   overflow: hidden;
+   background-color: #333;
+}

src/controllers/about.js

@@ -0,0 +1,3 @@
+module.exports = (req, res) => {
+res.render('about',{style: 'about'});
+};

src/controllers/contactus.js

@@ -0,0 +1,15 @@
+const contactus = require('../database/queries/contactus');
+
+exports.get = (req, res) => {
+  res.render('contactus', { style: 'contactus' });
+};
+exports.post = (req, res) => {
+  const { email, name, message } = req.body;
+  console.log(req.body);
+  contactus(email, name, message, (err, result) => {
+    if (err) {
+      return res.status(409).send();
+    }
+    return res.render('contactus', { style: 'contactus' });
+  });
+};

src/database/queries/contactus.js

@@ -0,0 +1,14 @@
+const connection = require('../db_connection');
+
+const contactus = (email, name, message, cb) => {
+  const sql = {
+    text: 'INSERT INTO contactus (email, name, message)VALUES($1,$2,$3) ',
+    values: [email, name, message],
+  };
+  connection.query(sql, (dbConnectionError, result) => {
+    if (dbConnectionError) return cb(dbConnectionError);
+    cb(null, result);
+  });
+};
+
+module.exports = contactus;

src/views/about.hbs

@@ -0,0 +1,9 @@
+<div class="about">
+  <p>shopping mission for many people is wasting time and efforting,but not anymore.
+    <br>
+BestPrice is a website that help you to find high quilty with less price,
+<br>
+else you find the name of shop, price, location,and sizes.
+ BestPrice will save the time,offert and money.</p>
+
+</div>

src/views/contactus.hbs

@@ -0,0 +1,12 @@
+<form class="contactus" id="contactus" method="post" action="/contactus">
+  <div class="userInfo">
+    <input for="email" id="email" type="email" name="email" value="" placeholder="your e-mail">
+    <input for="name" id="name" type="text" name="name" value=""  placeholder="your name">
+  </div>
+  <div for="message" id="message" class="msg">
+    <textarea id="message" type="text" name="message" value="" placeholder="your message" cols="73" rows="6"> </textarea>
+  </div>
+  <div class="btn">
+    <button class="button" type="submit">Send </button>
+  </div>
+</form>