Pure JavaScript – Learn JavaScript By Building A Real-World Application From Scratch




#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”

  1. 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!

  2. 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

  3. 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!

  4. 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!

  5. 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?

  6. 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.

  7. 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.

  8. 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?

  9. 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?

  10. 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?

Leave a Reply