Date: Fall 2018
Client: Bonnie Martin
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.
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.
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.
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.
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.
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.
More projects are coming soon!