Todo JavaScript Application V1 (Node and Express)

Hosted Project

https://hidden-meadow-94251.herokuapp.com/

GitHub Source Files

https://github.com/JS-Beginners/todo-express-ejs-v1

JavaScript Used

• NodeJS (Server-Side)
• ExpressJS (Node Framework)
• NPM Modules
  • bodyParser
  • ejs (Embedded JavaScript templating)

Project Description/Summary

This server-side Todo JavaScript Project uses NodeJS, Express, and EJS. This can easily be built using vanilla JavaScript and local storage, but this is a refresher/introduction to the Express/EJS framework. It's not quite as advanced as my Todo JavaScript project built in Andrew Mead's Modern JavaScript Course. Unlike my Todo project in Andrew's course, whose function was to integrate as many JavaScript features as possible, this project's sole purpose is to introduce EJS, a JavaScript templating library?

New Things Learned or Refreshed

I was familiar with all of the concepts in this project since I previously went through all of Angela's Web Development Bootcamp a few months ago. However, I don't really remember building it out as I followed along. In fact, I couldn't find the application on my local computer or in my GitHub repository. So, this time I built it out and learned a lot more. It was a great refresher because even though I used EJS before, I couldn't quite remember the particulars on when or how to use a specific feature. I think it's crazy how much I can forget when I haven't use a feature, library, framework, etc. for a few weeks.

I got stuck a few times, but I eventually prevailed. 

My project came to a brief pause when I got stuck trying to integrate my CSS files…because I forget to use app.use(express.static('public')) to set my static files. And I got stuck during my refactoring, when I tried to export my date.js module into my app.js file…because I was exporting the function instead of the object method. And believe it or not, I got stuck when deploying my app to Heroku because I used | instead of || for my logical OR. Crazy. Last thing I was refreshed on was the deployment to Heroku. I learned that if I don't have a Procfile configured correctly before pushing my code to Heroku, my application will not work.

Time to Code

This took about 5 hours, start to finish, including watching Angela's solution and then going back to finish my own solution.

Lines of Code

This project took 50 lines of code for the JavaScript application launch file (app.js), and another 100 or so lines in the ancillary files.

Biggest Take Away(s)

• You can forget a lot when you don't use a feature for a while.
• Google and specifically, StackOverflow are your best friends.

Your Turn!

What to Accomplish

1. Download the source code from the github repository above.
2. Delete the contents of the app.js and date.js files and the views folder.
3. Implement the JavaScript code in your own files.
4. If you think you need to see a video solution first, be sure to pick up Angela's Web Development Bootcamp Course. She covers the full-stack of JavaScript, from the front-end to the back-end, including databases. And she's a great instructor!
5. Deploy your application to Heroku and then add a link to your finished project below!

What You Should See

1. You should be able to see today's date at the top of your application.
2. You should see three starter items in your Todo list.
3. You should be able to add a new item to your Todo list.

Need to see the video solution for this project?

Get Angela's Web Development Bootcamp Course