Initial styling and tabbed section

private/sass/style.scss

@@ -8,7 +8,6 @@ body {
   font-size: medium;
   color: $black;
   background-color: $white;
-  padding: $small;
 }
 
 h1 {

public/js/challenges.js

@@ -1,48 +1,41 @@
-
-var challengePage = document.querySelector(".challenge-page");
-var url = window.location.href.split('/')[3];
-var h2id = document.querySelector(".h2-id");
-
+let challengePage = document.querySelector(".challenge-page");
+let url = window.location.href.split("/")[3];
+let h2id = document.querySelector(".h2-id");
 
 (function checkUrlandCreateForm(url) {
-    var f = document.createElement("form");
-    var s = document.createElement("input"); //input element, Submit button
-    var id = document.createElement("input");
-    var h1 = document.createElement("h1");
-
-    if (url === "new-challenges") {
-        f.setAttribute('method', "post");
-        f.setAttribute('action', "/challenge/accepted");
-        s.setAttribute('class', "acceptBtn");
-        s.setAttribute('type', "submit");
-        s.setAttribute('value', "accept challenge");
-        id.setAttribute('name', "challenge_id");
-        id.setAttribute('type', "hidden");
-        id.setAttribute('value', h2id.innerHTML);
-        h1.innerHTML = "Accept Challenge";
-        f.appendChild(h1);
-        f.appendChild(s);
-        f.appendChild(id);
-        challengePage.appendChild(f);
-    }
-
-    else if (url === "acc-challenges") {
-        f.setAttribute('method', "post");
-        f.setAttribute('action', "/challenge/completed");
-        s.setAttribute('class', "complBtn");
-        s.setAttribute('type', "submit");
-        s.setAttribute('value', "complete challenge");
-        id.setAttribute('name', "challenge_id");
-        id.setAttribute('type', "hidden");
-        id.setAttribute('value', h2id.innerHTML);
-        h1.innerHTML = "Complete Challenge";
-        f.appendChild(h1);
-        f.appendChild(s);
-        f.appendChild(id);
-        challengePage.appendChild(f);
-    }
-    // statement for completed challenges to be deleted or reset
-
-})(url)
-
-
+  let f = document.createElement("form");
+  let s = document.createElement("input"); //input element, Submit button
+  let id = document.createElement("input");
+  let h2 = document.createElement("h2");
+
+  if (url === "new-challenges") {
+    f.setAttribute("method", "post");
+    f.setAttribute("action", "/challenge/accepted");
+    s.setAttribute("class", "acceptBtn");
+    s.setAttribute("type", "submit");
+    s.setAttribute("value", "accept challenge");
+    id.setAttribute("name", "challenge_id");
+    id.setAttribute("type", "hidden");
+    id.setAttribute("value", h2id.innerHTML);
+    h2.innerHTML = "Accept Challenge";
+    f.appendChild(h2);
+    f.appendChild(s);
+    f.appendChild(id);
+    challengePage.appendChild(f);
+  } else if (url === "acc-challenges") {
+    f.setAttribute("method", "post");
+    f.setAttribute("action", "/challenge/completed");
+    s.setAttribute("class", "complBtn");
+    s.setAttribute("type", "submit");
+    s.setAttribute("value", "complete challenge");
+    id.setAttribute("name", "challenge_id");
+    id.setAttribute("type", "hidden");
+    id.setAttribute("value", h2id.innerHTML);
+    h2.innerHTML = "Complete Challenge";
+    f.appendChild(h2);
+    f.appendChild(s);
+    f.appendChild(id);
+    challengePage.appendChild(f);
+  }
+  // statement for completed challenges to be deleted or reset
+})(url);

public/js/dom.js

@@ -1 +1,27 @@
-// wooooo go dom
+// wooooo go dom
+
+function openCity(evt, cityName) {
+    // Declare all variables
+
+    let i, tabcontent, tablinks;
+
+    // Get all elements with class="tabcontent" and hide them
+    tabcontent = document.getElementsByClassName("tabcontent");
+    for (i = 0; i < tabcontent.length; i++) {
+        tabcontent[i].style.display = "none";
+    }
+
+    // Get all elements with class="tablinks" and remove the class "active"
+    tablinks = document.getElementsByClassName("tablinks");
+    for (i = 0; i < tablinks.length; i++) {
+        tablinks[i].className = tablinks[i].className.replace(" active", "");
+    }
+
+    // Show the current tab, and add an "active" class to the button that opened the tab
+    document.getElementById(cityName).style.display = "block";
+    evt.currentTarget.className += " active";
+}
+// To show first tab by default //
+
+document.getElementById("defaultOpen").click();
+//

src/views/challSelect.hbs

@@ -1,5 +1,3 @@
-<h1>this is the selected challenge</h1>
-
 <section class="challenge-page">
 
   {{!-- <img class="challenge-img" src="{{challenge.img_link}}"> --}}

src/views/dashboard.hbs

@@ -1,43 +1,60 @@
-<h2>This is home dashboard where user can see their challenges</h2>
+ {{!-- <body onload="document.getElementById('defaultOpen').click()"> --}}
+ <div class="tab">
+  <button class="tablinks" onclick="openCity(event, 'new-challenge')" id="defaultOpen">New Challenges</button>
+  <button class="tablinks" onclick="openCity(event, 'accepted-challenge')">Accepted Challenges</button>
+  <button class="tablinks" onclick="openCity(event, 'completed-challenge')">Completed Challenges</button>
+</div>
+
+
 
-<section class="challenges-container">
+ <!-- New Challenges -->
+<section id="new-challenge" class="challenges-container tabcontent">
     <header class="challenges-header">
-        <h1 class="main-title">New Challenges</h1>
+        <h2 class="main-title">New Challenges</h2>
     </header>
     <div class="challenges-container">
         {{#each newChallenges}}
         <div class="challenge-overview">
             {{!-- <img src='{{this.img_link}}'> --}}
             <h3 class="newChallH3">{{this.title}} : {{this.id}}</h3>
+            <p>Reward Points: {{this.reward_points}}</p>
             <button class="new-challenge-button" id="{{this.id}}" onclick="window.location.href='/new-challenges/{{this.id}}'">
                 Find out more
             </button>
-            {{/each}}
         </div>
+        {{/each}}
+
 </section>
 
-<section class="challenges-container">
+<!-- Accepted Challenges -->
+
+<section id="accepted-challenge" class="challenges-container tabcontent">
     <header class="challenges-header">
-        <h1 class="main-title">Accepted Challenges</h1>
+        <h2 class="main-title">Accepted Challenges</h2>
     </header>
     <div class="challenges-container">
         {{#each acceptedChallenges}}
         <div class="challenge-overview">
             {{!-- <img src='{{this.img_link}}'>
             --}}
             <h3>{{this.title}} : {{ this.challenge_id }}</h3>
+            <p>Reward Points: {{this.reward_points}}</p>
             <button class="acc-challenge-button" id="{{this.id}}" onclick="window.location.href='/acc-challenges/{{this.challenge_id}}'">
                 Find out more </button> {{/each}}
         </div>
 </section>
-<section class="challenges-container">
+
+<!-- Accepted challenge -->
+
+<section id="completed-challenge" class="challenges-container tabcontent">
     <header class="challenges-header">
-        <h1 class="main-title">Completed Challenges</h1>
+        <h2 class="main-title">Completed Challenges</h2>
     </header>
     <div class="challenges-container">
         {{#each completedChallenges}}
         <div class="challenge-overview">
             <h3>{{this.title}} : {{ this.challenge_id }}</h3>
+            <p>Reward Points: {{this.reward_points}}</p>
             <button class="challenge-button" id="id-{{this.id}}" onclick="window.location.href='/comp-challenges/{{this.challenge_id}}'">
                 Find out more
             </button>

src/views/helpers/getPoints.js

@@ -0,0 +1,9 @@
+const queries = require("../model");
+
+const getPoints = () =>{
+  queries.getUserPoints(1).then(points => {
+    console.log(points)  
+  })
+}
+
+module.exports = getPoints;

src/views/inventory.hbs

@@ -1,10 +1,6 @@
-<h2>Items you own</h2>
-
-{{!-- <h2>{{{boughtItems.title}}}</h2> --}}
-
 <section class="items-container">
     <header class="items-header">
-        <h1 class="main-title">Bought Items</h1>
+        <h2 class="main-title">Bought Items</h2>
     </header>
     <div class="items-container">
         {{#each boughtItems}}
@@ -21,7 +17,7 @@
 
 <section class="items-container">
     <header class="items-header">
-        <h1 class="main-title">Suggested Items</h1>
+        <h2 class="main-title">Suggested Items</h2>
     </header>
     <div class="items-container">
         {{#each suggestedItems}}

src/views/landing.hbs

@@ -1,3 +1,18 @@
 {{!-- hello --}}
 
-<h1>Hello World</h1>
+<h1>RACE TO ZERO</h1>
+
+<p>Your step-by-step guide to start reducing
+  waste and set you on the way to
+  achieving a zero waste lifestyle.
+
+  Tackle the challenges, save your city and
+  become a true Zero Hero!</p>
+
+<button class="start-button" name="start-button" onclick="window.location.href='/dashboard'">
+  <h3>Start your adventure!</h3>
+</button>
+
+<button class="learn-button" name="learn-button" onclick="window.location.href='/learn'">
+  <h3>Wait! What's zero waste?</h3>
+</button>

src/views/layouts/content-selected.hbs

@@ -8,7 +8,6 @@
   {{> navbar}}
 
   <main>
-    <h1>Content Selected Layout!</h1>
     {{{body}}}
   </main>
   {{> footer}}

src/views/layouts/logged-out.hbs

@@ -5,13 +5,10 @@
 {{> header}}
 
 <body>
-  {{> navbar}}
-
+  {{> navbar-loggedout}}
   <main>
-    <h1>Logged-out layout!</h1>
     {{{body}}}
   </main>
-  {{> footer}}
 
 </body>
 

src/views/partials/navbar-loggedout.hbs

@@ -0,0 +1,9 @@
+<header>
+  <nav>
+    <div id="sign-in">
+      <button class="sign-in-button" name="sign-in-button" onclick="window.location.href='/dashboard'">
+        <h3>Sign In</h3>
+      </button>
+    </div>
+  </nav>
+</header>