Modern JavaScript From The Beginning – Projects

Date: Fall 2018

Type:

Client: Bonnie Martin

Summary:

I took an in-depth course in vanilla JavaScript including ES5 and ES6. The course included a variety of projects with DOM manipulation, object oriented programming, storage methods, and more.




I took Modern JavaScript From The Beginning, an in-depth course about vanilla JavaScript on Udemy. This course covered the basics of the language, including features from both ES5 and ES6, DOM manipulation, object oriented programming, local storage, error handling, and more. The course included a bunch of real-world projects that incorporated these concepts.

Even though I recently wrapped up my degree in Software Development from WGU, I felt like I’d fallen behind the times with JavaScript in particular. That degree focused on Java for the core programming courses, and while I learned a lot from it, Java isn’t very relevant to my personal career because I’m interested in front-end web development much more than I am in application development.

My goal now is to become very comfortable with vanilla JavaScript (without relying on libraries like jQuery) and then to learn one of the popular frameworks in depth. That will probably be React, since it appears to be the most in demand.

For this portfolio post, I’ll be linking to the finished projects from this course, and I’ll explain what was covered in each project. You can consider these like you would any other project from a course — they weren’t jobs from paying clients, but they were guided projects designed to teach common principles that are frequently used in real projects.


Project 1: Task List

This project was focused on DOM manipulation and local storage, all with vanilla JavaScript.

The design for the UI was provided as the setup for the project and it uses Materialize. If you’re not familiar with that, it’s like Bootstrap, but it was made by some interns at Google.

When this course was created, Materialize was in beta, and it supposedly had a dependency on jQuery. Right now Materialize is on version 1.0.0, so I updated to that version and removed the link to jQuery that was recommended in the course, and everything still works without it.

In this Task List app, the user can enter a string of text into the top input fields, click the Add Task button, and the text gets added as an LI item into the UL list of tasks below. Clicking any of the X icons will remove the LI item from the DOM. Clicking the Clear Tasks button will remove all of them. Typing text into the Filter Tasks field will look for matching strings in the list items, and hide the others.

The entered data is stored in local storage. If the list items are removed, that data is also removed from local storage. This allows the user to save their data even if they refresh the browser, but they can clear it out if they clear their browser history.

Task List Project Screenshot – Click to Launch

 


Project 2: Loan Calculator

This project involved building a loan calculator app with vanilla JavaScript. It takes in a loan amount, interest rate, and number of years to pay back the loan, and calculates a monthly payment, total amount that will be paid, and the amount of interest that will be paid.

The design for the UI was provided by the course (the focus is on the JavaScript, not design principles.) It uses Bootstrap 4 for all the elements. The formulas for the loan calculations were also provided.

The JavaScript gathers the numbers from each input field and calculates the values, then places those results in disabled input fields below, which display the new numbers. There’s a spinner gif that shows briefly to give the illusion of number crunching behind the scenes. If the user doesn’t enter anything, or enters weird values, a warning message is shown.

Loan Calculator Project Screenshot – Click to Launch

 


Project 3: Number Guesser

This is a small game that lets the user enter a number between 1 and 10, and that input is checked against a randomly-generated winning number to generate a win or a lose. The base design/UI was provided by the course and uses the Skeleton CSS. The purpose of this project was to demonstrate and use some DOM manipulation concepts, random numbers, functions, and to add small details that enhance a user interface.

I found a problem with this project and fixed it myself. The instructor provided some code that was supposed to validate the user’s input. It was supposed to make sure that the entered number was between 1 and 10, and was actually a number. If none of that was the case, it was supposed to generate a message telling the user to actually enter a number between 1 and 10. Well, that block of code was not running because it was skipping directly to the code that was checking whether the entered number matched the winning number or not. I fixed it by rearranging the if-then statements to make sure that it checked for a valid number first, and only if the number was valid, would it then continue on to checking whether there was a win or lose outcome.

Number Guesser Project Screenshot – Click to Launch

 


Project 4: Book List

This project demonstrated some light object oriented programming. The course explained the difference between object oriented programming in ES5 and ES6, and how in ES6 the classes function more like they do in Java (or other similar languages) than they did in ES5. The files on GitHub show both the ES5 and ES6 versions.

The rest of the project was similar to the Task List project in that it used DOM manipulation to grab the values of the input fields and then build a list in the user interface. It was done with a table rather than a UL this time. The user can remove the books once they’ve been added. The data is saved to local storage in the browser. The simple design was provided by the course and it uses the Skeleton CSS again.

I didn’t enjoy this project as much as the others because it felt like it was rushed through. I also wouldn’t personally choose to use objects that are only there as a grouping of functions. I think this comes down to personal choice, but I feel like classes are better used when there’s an actual object with key:value pairs, especially if it’s going to be used by a database. If the object is simply a grouping of functions, I don’t see much value in putting them in a class. I’m sure there are good arguments for and against it — I’m mostly just pointing it out to say that I might have done it differently if I was creating it from the ground up.

Book List Project Screenshot – Click to Launch

 


Project 5: GitHub Finder – API Project

This project uses the GitHub API to allow a user to input a GitHub username and then pull up that user’s profile details, including their photo, name, website, and location. It also uses the API to get the user’s most recent repositories. The design is built with Bootstrap.

Before this project was a series of videos that went over the Fetch API and how to build a custom HTTP library with both ES5 and ES6. Those didn’t build anything that I could show you here visually, but this project took those concepts and used them to create a larger web app.

It uses object-oriented programming by creating classes for the GitHub API and the user interface. I had to register the app with GitHub in order to get unlimited calls to the API. It uses async/await to grab the data from the available JSON.

GitHub Finder Project Screenshot – Click to Launch

 


Project 6: Form Validation with Regular Expressions and Bootstrap

The purpose of this project was to learn regular expressions for form validation. It uses Bootstrap for the form styles as well as the invalid form input warnings.

Regular expressions probably aren’t something that anyone wants to spend a lot of time memorizing, so the best thing to do is be aware of them and what they can do, and then use a reference to look up what you need, such as this guide at MDN.

This form doesn’t go anywhere when submitted, but you can test out the validation of each input field.

Form Validation Project Screenshot – Click to Launch

 


 

More projects are coming soon!



Leave a Reply

Your email address will not be published. Required fields are marked *