JavaScript OOP Course Form Project

Hosted Project

JavaScript Course Form Project (Hosted on GitHub Pages)

Source Files

https://github.com/JS-Beginners/course-form-oop-project (Hosted on Github)

Project Objective

The objective of this JavaScript course form project is use JavaScript OOP to display user generated content to the page.

This project can easily be created without OOP, but because the code solution at my repository (and in John's course) uses OOP, I'd consider this an intermediate JavaScript project.

JavaScript Used

• Object Oriented JavaScript
• JavaScript Constructor Functions
• JavaScript Prototypal Inheritance
• JavaScript CSS Manipulation
• JavaScript DOM Manipulation

My Personalize Summary

Today's project was a “watch and learn” for me. I watch John code this project as I learned more about Object Oriented Programming (OOP) in JavaScript.

It was very helpful to see how it's actually used in a real application.

Having completed the project, I see that it could have easily been created with OOP JavaScript, but it would have likely used a lot more code.

I really like the way John focused on building the project with the objective of teaching OOP JavaScript. I can't wait to watch his next two OOP project lessons.

New Things Learned or Refreshed

As I stated in the summary above, this project focused on OOP in JavaScript.

This was actually my first time really focusing in on its use, after first learning about it in Andrew Mead's The Modern JavaScript Course (2019).

I remember being super confused about OOP back in March, but now that I've just finished re-watching JavaScript Understanding the Weird Parts, I have a better understanding of it.

And now, I'm trying to refocus my efforts solely on its use.

So, I saw exactly how to create Constructor Functions; how to create instances of the objects from which they were built; how, when and where the ‘this' keyword pointed to the objects; and how to add methods to the prototypes of the objects.

Time to Code

This project took me about 2 hours to watch, including the breaks that I took in between watching it. It took John an hour to code only the JavaScript portion. He provides the HTML and CSS assets.

Your Turn!

What To Accomplish

1. Download the source code from the github repository above.
2. Delete the contents of the app.js file.
3. Implement the JavaScript code in your own app.js file.
4. If you think you need to see a video solution first, be sure to pick up John Smilga's JavaScript Tutorial and Projects Course.
5. Add a link to your finished project below!

What You Should See

Visit the hosted github page to see this JavaScript Course Form Project in action.

Need to see the video solution for this project? Get John Smilga's JavaScript Tutorial and Projects Course Now!