Step 1 Challenge and Bonus Answers

Answers to the Challenge and Bonus questions posed at the end of Step 1.

Challenges
Blog Home

Challenge and Bonus Answer

Alright, everyone lets get straight to business and answer the challenges of putting together your partials and linking them in your templates and then finding the right links to go intor your navbar. First, lets cover the challenge question and talk about the navigation between pages.

For our example we need to navigate between 4 pages: your index, about, services, and contact page. Withe the way our current routes read you would need the following href values in your your navbar that you would put in:

  • Link to your index.ejs: href= "/"
  • Link to your about.ejs: href= "/about"
  • Link to your contact.ejs: href= "/contact"
  • Link to your services.ejs: href= "/services"

Now, lets get them in the header.ejs partial and see what we have right now for the rest of the pages. The partial I am using going forward is as follows:

<!DOCTYPE html>
<html lang="en" class="full-height">
<head>
<link rel="icon" href="/assets/img/your-logo.png">
<title>Good Fellas Tech</title>
<!-- Font Awesome -->
<script defer src="/assets/js/FA-5.9-all.js"></script>
<!-- Bootstrap core CSS -->
<link href="/assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="/assets/css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="/assets/css/gradients.css" rel="stylesheet">
<!--CREATED CUSTOM SHEET FOR STYLING-->
<link href="/assets/css/custom.css" rel="stylesheet">
</head>
<body>
<!-- Main navigation -->
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark indigo fixed top">
<div class="container">
<a class="navbar-brand" href="/"><strong>Business</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7" aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-7">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/about">About <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/services">Services</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->

Now to include this partial in the about, services, and contact templates you have to add in at the very top of each file the include statement of: <% include ./partials/header.ejs %>. The ./ is imperative since it tells you where the partial is located inside the views directory. To add the footer files to all the pages you can use the same include statement with just a small tweak. To connect the footer simply put in <% include ./partials/footer.ejs %> at the bottom of the file.

Now that you have connected your partial file, create the file with touch views/partials/footer.ejsand then copy from the <-- Scripts --> tag to your inclue statement to fill in the content for the footer partial:

<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="/assets/js/jquery-3.2.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="/assets/js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/assets/js/mdb.min.js"></script>
<script type="text/javascript" src="/assets/js/mdb.js"></script>
<script type="text/javascript" src="/assets/contactvalidate.js"></script>
<script>
// initialize scrollspy
$('body').scrollspy({
target: '.dotted-scrollspy'
});
// MDB Lightbox Initv $(function () {
$("#mdb-lightbox-ui").load("assets/mdb-lightbox-ui.html");
});
$('.navbar-collapse a').click(function(){
$(".navbar-collapse").collapse('hide');
});
/* WOW.js init */
new WOW().init();
</script>
</body>
</html>

BONUS ANSWER: Put a container around your content to make it have a nice margin and flow easily. Thankfully, MDBootstrap has a prefixed container calss we can use that makes this way simplier than you would think. All you need to do is directly under your include statement for your header partial of <% include ./partials/header.ejs %> is add an opening div tag with the class container like this <div class="container">, and then the line above your footer partial <% include ./partials/footer.ejs %> just close the div tag </div>. Its that easy. All your content will flow and look more professional. Step two should be ready friday so look out for that on how to connect MongoDB and RESTful routing as we expand our app.