voca-learna - Today I Did

#TID:

Today, I took some time to work on my Voca-Learna Project by improving the following:

Created routes and controllers for vocabularyList - which will eventually allow the user to view all vocabulary lists created, create a new list, edit one, and use the vocabulary list to create fill-in the blank worksheets
Created EJS files for the “create a vocabulary list” page as well as the “all lists” page

While setting these EJS files up, I noticed that there were components within the EJS file that I was reusing a lot across multiple files. This included the head, header, footer, and nav. For instance, I finally worked on creating a navigation bar on my create-vocabulary-list page. Then, I realized that I would have to copy and paste this <nav> element across all the other EJS files already created. This sounded repetitive…
Not only that, but if I ever made a change to the <nav> bar within one EJS file, I would have to copy and paste this across all the EJS files… Or did I?! I knew there had to be a better way.
After some quick internet searching, I remembered that EJS provides us with something called ‘partials’ — a sort of template within the EJS file that allows us to reuse certain components of the views.
So, I created a partials folder within views, created EJS files for the head, header, and footer. Then, all I had to do was plug this code in wherever I want to render that partials template:

// replace head with the name of the partial you want to use
<%- include('../partials/head') %>

Create a template for the update/progress notes that I’d like to document for future voca-learna sprint sessions
Work on the post/create function for the ‘createList’ page
Create vocabularyList schema for MongoDB
Implementing ‘edit/update’ feature for already created vocabulary lists