#1 Online Course: The Complete JavaScript Course (http://codingthesmartway.com/courses/complete-javascript/)
Pure JavaScript – Learn JavaScript By Building A Real-World Application From Scratch
Modern JavaScript Frameworks like Angular, React and Vue.js makes it very easy to build complex single page web applications. However, using a those frameworks is not mandatory and you can also go with plain and pure JavaScript. This tutorial guides you through building a web application in pure JavaScript step-by-step.
Live Demo: https://jsissuetracker.firebaseapp.com/
Source Code: https://github.com/seeschweiler/jsissuetracker
This is a CodingTheSmartWay.com tutorial
———————
Check out our ebooks on Leanpub.com:
* Angular 2 – A Practical Introduction to the new Web Development Platform
https://leanpub.com/angular2-book
* Ionic 2 – A Practical Introduction To Hybrid Mobile Apps Development
https://leanpub.com/ionic2-book
———————
Musik:
Night Owl by Broke For Free is licensed under a Creative Commons Attribution License.
(http://freemusicarchive.org/music/Broke_For_Free/Directionless_EP/Broke_For_Free_-_Directionless_EP_-_01_Night_Owl)
Original source
24 responses to “Pure JavaScript – Learn JavaScript By Building A Real-World Application From Scratch”
Awesome tutorial! Very clear and concise. Keep it up 🙂
Love how you went to the source to create this app! This is so valuable for beginners like me wanting to see exactly what all these functions and methods are capable of instead of just doing coding exercises. Thank you!
Information wouldn't send to localstorage, empty. Wouldnt print out on list either. Tried using your source code as well and still didnt work.
Good tutorial but I can't seem to get the issues to actually show up like yours do at the bottom of the screen. I have no errors, but when I look at the local storage tab in my console, it isn't showing anything, as if I had never entered an issue and pressed add. As far as I can tell, I have everything written exactly as you do, I even went back and double checked everything by watching the video again, but still not getting any issues to show. Any ideas? I am using Safari
great video. thanks a lot..i think this is best way of teaching js is by applying it in real time apps. building as much as u can apps in pure js is the only way to make u competent in js. even making other js frameworks much easy to grasp!
Thanks for the nice tutorial.
I have a question: var issues = JSON.parse(localStorage.getItem('issues'));
Where is the 'issues' coming from in getItem() method?
you should have a series "called real world app from scratch" this is one of the best Javascript videos on youtube! Thanks
This was a great tutorial. Just a heads up- you actually have two links to fetch the minified bootstrap instead of one for jQuery…which is fine because you didn't end up using jQuery.
For those of you who are already familiar with HTML/CSS and just came for the JavaScript part, it begins at 25:45
Sir can u do one on a windows platform
thanks for tutorial. such a nice staff! danke schön :))
Hi Sebastian,
Very valuable tutorial. Here is a request please make few more javascript oriented project which can cover more features and fundamentals of javascript.
Thank you!
Thanks for this tutorial. I'm a noob and this is my 2nd javascript example. The first also used local storage to store data. So my question is, is local storage something that is commonly used and important to know?
Great tutorial, thanks!
You can pretty easily add the event to the "Close" and "Delete" buttons to prevent the page from reloading and add the # in the URL:
'<a href="#" onclick="setStatusClosed(event, ''+id+'')" class="btn btn-warning">Close</a> '+
and then just past the event in the functions:
function setStatusClosed(e, id)
then add e.preventDefault(); in the function itself before fetchIssues(); just as you did for the saveIssue() function.
Sir your tutorial is really good. Thank you so much.
Hi,
Thank you for this tutorial. I am encountering a problem, however, and am not sure what I should do. Everything seems to be working fine, except that clicking "add" doesn't add the new issues div. Instead, in the console it says "Uncaught TypeError: Cannot read property length of 'null' at line 69" (in the for loop (I assume it is referring to the 'issues.length' statement)).
Could you explain what is wrong with my code?
Thank you.
is this using localstorage as in cookies? interesting approach. would you recommend moving onto using a database with node with this project? with m ultiple users and a login system? those would be the next steps yeah?
Thanks for a great tutorial, in main.js var issues is assigned values twice on line 19 and 23, is there a way to do it differently?
Thank you, I enjoyed this
i sorta understand why you need chance (does vanilla javascript not have some sort of random function you can call on in its library?) , but why did you need to add the jquery and all that boostrap stuff?
This is awesome. What's that ram monitor you're using btw?
Good job
Good job
Amazing! I'm happy to see more videos coming out showing how to leverage plain JavaScript. Does this use local storage? If not would you consider a part II with persistence either to local storage or even fire base?