Feature/hbs pages setup

src/controllers/index.js

@@ -1,12 +1,21 @@
-const express = require('express');
+const express = require("express");
 const router = express.Router();
 
-const home = require('./home');
-const newPlan = require('./newplan');
-const error = require('./error');
+const home = require("./home");
+// const newPlan = require('./newplan');
+const error = require("./error");
+// const mealPlans = require('./mealplans');
+// const additionalChoices = require('./additional-choices');
+const routes = require("./routes.js");
+console.log("this is the routes object", routes);
+
+router.get("/", home.get);
+router.get("/newplan", routes.getNewPlan);
+router.get("/mealplans", routes.getMealPlans);
+router.get("/newplan-additional-choices", routes.getAdditionalChoices);
+router.get("/unique-meal-plan", routes.uniqueMealPlan);
+router.get("/shopping-list", routes.shoppingList);
 
-router.get('/', home.get);
-router.get('/newplan', newPlan.get);
 router.use(error.client);
 router.use(error.server);
 

src/controllers/routes.js

@@ -0,0 +1,21 @@
+//Routes to render each additional page
+
+exports.getNewPlan = (req, res) => {
+  res.render("newPlan");
+};
+
+exports.getMealPlans = (req, res) => {
+  res.render("mealplans");
+};
+
+exports.getAdditionalChoices = (req, res) => {
+  res.render("newplan-additional-choices");
+};
+
+exports.uniqueMealPlan = (req, res) => {
+  res.render("uniqueMealPlan");
+};
+
+exports.shoppingList = (req, res) => {
+  res.render("shoppingList");
+};

src/views/home.hbs

@@ -1,5 +1,15 @@
 <section>
 
-  <h1>Home page body</h1>
+  <h1 class="onboarding__header">Nom Nom</h1>
 
-</section>
+  <p class="onboarding__content"> Pick 2 recipes</p>
+  <p class="onboarding__content"> Get meal ideas with common ingredients</p>
+  <p class="onboarding__content"> Create a weekly plan and reduce food waste</p>
+
+  <form action="/mealplans" class="onboarding__form">
+    <input type="submit" value="View all plans" class="onboarding__view-plans">
+    <input type="submit" value="New plan" formaction="/newplan" class="onboarding__new-plan">
+  </form>
+
+
+</section>

src/views/mealplans.hbs

@@ -0,0 +1,12 @@
+<section>
+
+  <h1 class="meal-plans__header">Meal Plans</h1>
+
+  <input type="text" name="search-meal-plans" class="meal-plans__search">
+
+  <form action="/newplan" class="meal-plans__form">
+    <input type="submit" value="New plan" class="meal-plan__new-plan">
+  </form>
+
+
+</section>

src/views/newPlan.hbs

@@ -1,5 +1,18 @@
 <section>
 
-  <h1>New plan page body</h1>
+  <h1 class="new-plan__header"> Pick 2 recipes</h1>
 
-</section>
+  {{>recipe-list}}
+
+  <form action="/mealplans" class="newplan__nav-buttons">
+    <input type="submit" value="Back" class="newplan__nav-buttons__back">
+    <input type="submit" value="Next" formaction="/newplan-additional-choices" class="newplan__nav_buttons__next">
+  </form>
+
+
+  {{>load-more}}
+
+  {{>counter}}
+
+
+</section>

src/views/newplan-additional-choices.hbs

@@ -0,0 +1,13 @@
+<section>
+
+  {{>recipe-list}}
+  <h1 class="second-choices__header"> Select up to five more recipes </h1>
+
+  {{>load-more}}
+  <form class="second-choices__form" action="/mealplans">
+    <input aria-label="Go back" value="Back" class="second-choices__back-button" type="submit" formaction="/newplan">
+    <input aria-label="Save meal plan" value="save" class="second-choices__save-button" type="submit">
+
+  </form>
+  {{>counter}}
+</section>

src/views/partials/counter.hbs

@@ -0,0 +1,43 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+  preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="210" height="210">
+  <defs>
+    <path d="M160.48 140.24L330.71 140.24L330.71 377.14L160.48 377.14L160.48 140.24Z" id="d5RI1NtGTp"></path>
+    <path d="" id="aWvv13uyD"></path><text id="cgZlkc2m" x="213.21" y="253.71" font-size="200" font-family="Open Sans"
+      font-weight="normal" font-style="normal" letter-spacing="0" alignment-baseline="before-edge"
+      transform="matrix(1 0 0 1 -27.00000000000003 -133.99999999999994)" style="line-height:100%" xml:space="preserve"
+      dominant-baseline="text-before-edge">
+      <tspan x="213.21" dy="0em" alignment-baseline="before-edge" dominant-baseline="text-before-edge"
+        text-anchor="start">0</tspan>
+    </text>
+    <style id="opensansnormalnormal">
+      @font-face {
+        font-family: "Open Sans";
+        font-weight: normal;
+      }
+    </style>
+  </defs>
+  <g>
+    <g>
+      <g>
+        <use xlink:href="#d5RI1NtGTp" opacity="1" fill="#ffffff" fill-opacity="1"></use>
+        <g>
+          <use xlink:href="#d5RI1NtGTp" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="5"
+            stroke-opacity="1"></use>
+        </g>
+      </g>
+      <g>
+        <g>
+          <use xlink:href="#aWvv13uyD" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1"
+            stroke-opacity="1"></use>
+        </g>
+      </g>
+      <g id="aRwOAXu8z">
+        <use xlink:href="#cgZlkc2m" opacity="1" fill="#000000" fill-opacity="1"></use>
+        <g>
+          <use xlink:href="#cgZlkc2m" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1"
+            stroke-opacity="1"></use>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

src/views/partials/individual-recipe.hbs

@@ -0,0 +1,19 @@
+<section class="individual-recipe__section">
+
+{{#each individual-recipe}}
+<h1>{{this.title}}</h1>
+<img src={{this.img}}>
+<span>{{this.health_score}}</span>
+
+<ul>
+
+  {{#each this.ingredient}}
+<li>{{this.ingredient_name}}</li>
+{{/each}}
+
+</ul>
+
+<p>{{this.instructions}}</p>
+{{/each}}
+
+</section>

src/views/partials/load-more.hbs

@@ -0,0 +1,3 @@
+<form class="newplan__load-more">
+    <input type="submit" value="Show more" class="newplan__load-more-btn">
+</form>

src/views/partials/recipe-list.hbs

@@ -0,0 +1,11 @@
+
+<section>
+
+{{#each recipe}}
+<img src="{{this.img}}">
+<title class="recipe-title__{{this}}"> {{this.title}}</title>
+<button class="recipe-info__{{this}}"> i </button>
+<input class="recipe-selected__{{this}}" type="checkbox" value="checked">
+{{/each}}
+
+</section>

src/views/shoppingList.hbs

@@ -0,0 +1,25 @@
+<section>
+    <h1 class="shopping-list__header">Shopping List</h1>
+    <h2> {{unique-recipe.title}}</h2>
+    <h2> {{unique-recipe.days}}</h2>
+
+
+    <ul>
+        {{#each unique-recipe.common-ingredient}}
+        <li> {{ unique-recipe.common-ingredient }} </li>
+        {{/each}}
+    </ul>
+
+    <ul>
+        {{#each unique-recipe.ingredient}}
+        <li> {{ unique-recipe.ingredient }} </li>
+        {{/each}}
+    </ul>
+
+
+    <form class="shopping-list__form" action="/mealplans">
+        <input aria-label="Back to see all recipes" type="submit" value="Back" class="shopping-list__form__back">
+    </form>
+
+
+</section>

src/views/uniqueMealPlan.hbs

@@ -0,0 +1,29 @@
+<section>
+    <h1 class="unique-meal-plan__header"> {{this}}</h1>
+    <h2 class="unique-meal-plan__days"> {{this}}</h2>
+
+    <form action="/shopping-list" class="unique-meal-plan__form">
+        <input type="submit" value="Shopping list" class="unique-meal-plan__shopping-list">
+        <input type="submit" value="Email" formaction="/sendEmail" class="unique-meal-plan__email">
+    </form>
+
+    {{#each meal-plan-recipe}}
+    <img src="{{this.img}}">
+    <title class="recipe-title__{{this}}"> {{this.title}}</title>
+
+    <button class="recipe-info__{{this}}"> i </button>
+    <span>
+        Time: {{this.time}}
+    </span>
+
+    {{>individual-recipe}}
+    {{/each}}
+
+
+
+    <form action="/mealplans" class="unique-meal-plan__form">
+        <input type="submit" value="View all meal plans" class="unique-meal-plan__form__back">
+        <input type="submit" value="+" formaction="/newplan" class="unique-meal-plan__form__new-plan">
+    </form>
+
+</section>