Merge pull request #63 from fac-17/feature/createcard

Feature/createcard

public/css/style.css

@@ -14,6 +14,11 @@ body {
 
 }
 
+.center{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
 
 h1 {
   font-family: 'Merienda One', cursive;
@@ -25,6 +30,19 @@ p {
   font-size: 1.5em;
 }
 
+.add-tarot {
+  display:flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+
+.createCard{
+  border: 1px solid grey;
+width: 40rem;
+align-self: center;
+}
+
 .selectCard{
   display: flex;
   justify-content: center;

src/app.js

@@ -4,9 +4,12 @@ const favicon = require("serve-favicon");
 const exphbs = require("express-handlebars");
 const controllers = require("./controllers/index");
 const helpers = require("./views/helpers/index");
-
+const bodyparse = require('body-parser');
 const app = express();
 
+// post handler
+app.use(bodyparse.urlencoded({ extended: false }));
+
 // set up view engine
 app.set("views", path.join(__dirname, "views"));
 app.set("view engine", "hbs");
@@ -26,4 +29,6 @@ app.set("port", process.env.PORT || 3000);
 app.use(express.static(path.join(__dirname, "..", "public")));
 app.use(controllers);
 
+
+
 module.exports = app;

src/controllers/index.js

@@ -4,11 +4,15 @@ const router = express.Router();
 const home = require('./home');
 const error = require('./error');
 const tarot = require('./tarot');
+const newtarot = require('./newtarot');
 
 router.get('/', home.get);
 router.get('/tarot', tarot.tarot);
+router.get('/newtarot', newtarot.newtarot);
+router.post('/newtarot', newtarot.newtarotpost)
 router.use(error.client);
 router.use(error.server);
 
 
+
 module.exports = router;

src/controllers/newtarot.js

@@ -0,0 +1,14 @@
+const postNewCard = require("../model/database/queries/postNewCard")
+
+exports.newtarot = (req, res) => {
+    res.render("newtarot")
+}
+
+exports.newtarotpost = (req, res) => {
+    postNewCard.postNewCard(req.body["tarot-title"], req.body["tarot-description"])
+        .then(result => {
+            console.log({ result });
+            res.render("newtarot");
+        })
+}
+

src/model/database/queries/postNewCard.js

@@ -0,0 +1,8 @@
+const connection = require("../db_connection");
+
+exports.postNewCard = (tarottitle, tarotdescription) => {
+    return connection.query("INSERT INTO tarot_cards (tarot_heading, tarot_description, tarot_image) VALUES($1,$2,$3)",
+        [tarottitle, tarotdescription, "<svg></svg>"]
+    )
+}
+

src/views/home.hbs

@@ -1,11 +1,17 @@
-<h1>The Post-Modern Tarot Lady</h1>
-<p>Select one of the cards below to get your tarot card reading:</p>
+<h1>DENK Tarot Lady</h1>
+<p>Select one of the cards below to get your tarot card reading</p>
+<div class="center">
+    <section class="createCard">
+        <p>Have you had a card vision?</p>
+        <p><a href="/newtarot">+ Create Card</a>
+        </p>
 
-<section class="createCard"></section>
+    </section>
 
-<section class="selectCard">
+    <section class="selectCard">
 
-    {{> hand}}
+        {{> hand}}
 
-    {{!-- <a href="/tarot">Click here!</a> --}}
-</section>
+        {{!-- <a href="/tarot">Click here!</a> --}}
+    </section>
+</div>

src/views/newtarot.hbs

@@ -0,0 +1,13 @@
+<section class="add-tarot">
+    <h1>
+        Add your tarot card vision below
+    </h1>
+
+    <form class="add-tarot-form" method="POST" action="/newtarot">
+        <label for="tarotTitle">Enter tarot card title</label><br>
+        <input name="tarot-title" id="tarotTitle"><br>
+        <label for="tarotDescription">Enter tarot description</label><br>
+        <input name="tarot-description" id="tarotDescription"><br>
+        <input type="submit">
+    </form>
+</section>