Hosted Project
JavaScript Flashcard OOP Project (Hosted on GitHub Pages)
Source Files
https://github.com/JS-Beginners/flash-oop-project (Hosted on Github)
Project Objective
The objective of this JavaScript course form project is use JavaScript OOP to create a flash card web application.
This is another project from John Smilga's JavaScript Tutorial and Project course. And again, I'd consider this an intermediate JavaScript project.
It creates instances from two JavaScript constructor functions, one for the UI and one for questions.
JavaScript Used
- Object Oriented JavaScript
- JavaScript Constructor Functions
- JavaScript Prototypal Inheritance
- JavaScript CSS Manipulation
- JavaScript DOM Manipulation
My Personalize Summary
Like yesterday's project, I used this project as a watch in learn as I'm still getting used to “thinking OOP.” The more I tend to see things, the more I adapt. So, I'm thinking I'm going to study a few more OOP projects before diving in to create my own from scratch.
The good news is I no longer feel that JavaScript OOP is some scary thing that only “real programmers” use.
It's actually quite simple to me, in practice.
Of course, going through Tony Alicea's JavaScript: Understanding the Weird Parts OOP section helped a lot. And because I also went through John's section on OOP as well, prior to watching his project, a solid understanding allowed me to put the pieces together much quicker than I would have otherwise done.
So, because I'm no longer intimidated by OOP, I went in to made my own modifications to John's finished solution. His finished solution wasn't much of a flash card app because the cards disappeared on every refresh. So, I added local storage to the project by adding my own methods onto the prototype. And it worked! 😁
New Things Learned or Refreshed
As I stated in the summary above, this project focused on OOP in JavaScript.
And now that I've seen a project get built using OOP two days in a row, as I described above, it's no longer intimidating.
I can't wait to jump into the next OOP project. 😎
Time to Code
This project took me about 2 hours to watch, and another half hour to add my own modifications. It took John an hour and 12 minutes to code only the JavaScript portion. He provided the HTML and CSS assets.
Your Turn!
What To Accomplish
- Download the source code from the github repository above.
- Delete the contents of the
app.jsfile. - Implement the JavaScript code in your own
app.js file. - If you think you need to see a video solution first, be sure to pick up John Smilga's JavaScript Tutorial and Projects Course.
- Add a link to your finished project below!
What You Should See
Visit the hosted github page to see this JavaScript Flashcard OOP Project in action.
This project is not very clear , this causes difficulty when decided if we wish to embark on this project
also the downloaded files are incomplete so it is difficult to figure out what an end result should behave.
Sorry, it appears to be an error with the js folder on the github side. I’ll look into it.
hello,
I really don’t know if the problem is from my own end or yours because I’m just learning the language.
I tried checking on the hosted project just to see how it works and the layout but the problem I’m facing is that only the “ask question” button and flashcard heading is displaying and even when i click on the button’ nothing happens.
please help me look into it.
Thank you very much for your time and effort and thank you for providing the projects, they’ve really been helpful.
Sorry, it appears to be an error with the js folder on the github side. I’ll look into it.