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
Support us with just one cup of coffee: https://www.buymeacoffee.com/ctsw

———————
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)

DISCLAIMER: This video and description contains affiliate links, which means that if you click on one of the product links, we’ll receive a small commission. This helps support the channel and allows us to continue to make videos like this. Thank you for the support!

Comments

PkrBarMovie says:

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.

Erik Viklander says:

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:
Close ‘+
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.

Paul Anthony Mcgowan says:

Hi I am getting an error Uncaught TypeError: Cannot read property ‘length’ of null
at fetchIssues (main.js:33)
at onload (index.html:13)
fetchIssues @ main.js:33
onload @ index.html:13 which is referring to the for loop in fetchIssues function as it loads, says it cant read “length” of null ? Tips welcome , Thanks, great tut so far though!

Chris B. says:

For those of you who are already familiar with HTML/CSS and just came for the JavaScript part, it begins at 25:45

avanish shukla says:

is it permanent storageble??
anyway this is very very helpfull to understand perfect javascript and good application and you should continue this application to implement more

Andrew Wyatt says:

the sound could be louder.

ouhliss mohammed reda says:

Hello !
Thanks a lot for this tutorial, very simple and easy to understand, but i do have a question, is there a way to implement event listener directly on Delete and Close btns? i tried to get the elements by class and then manipulate the htmlCollection but it doesn’t seem to work…

Okwise Glory says:

thanks so much for the tutorial twas really helpful i am having a little it’s saying
script.js:1 Uncaught TypeError: Cannot read property ‘addEventListener’ of null
at script.js:1
and
Uncaught TypeError: Cannot read property ‘length’ of null
at fetchIssues (script.js:4)
and
bootstrap.min.js:6 Uncaught ReferenceError: $ is not defined
at bootstrap.min.js:sourcemap:6
what do i do

krisnan Clado says:

its giving me the error ” Uncaught TypeError: Cannot read property ‘fn’ of undefined VM2650 bootstrap.min.js:6 “

son gohan says:

this is great! by the way, how could i implement pagination for this app project with vanilla javascript? my javascript web app project had too long list

QBA Puchatek says:

There is an error from gitfile:
Uncaught TypeError: Cannot read property ‘length’ of null :/

RealToughCandy says:

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!

alex pena says:

you should have a series “called real world app from scratch” this is one of the best Javascript videos on youtube! Thanks

lardosian says:

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?

Cameron Kirby says:

Realized I had to place my script tag at the bottom (right above) of the body tag for ‘main.js’ to function.

Yuan Obispo says:

Hi Where can we download the live server
Thanks

Sarah Joyce Sta Ana says:

This is a useful site
Check this out ⬇️
http://www.nerdschools.com/?m=1

Brian Buccellato says:

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.

norvasc28 says:

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!

Neil Pearce says:

Grrr….I’m getting an error on the for loop saying “Uncaught TypeError: Cannot read property ‘length’ of null”

Jovid Nurov says:

hey hey hey! dear sir first of all thanks for your lessons cause you know it great to implement all those theoretical knowledge into practice. However, in 12 min when you putted all those libraries you did not put jquery instead of that you used bootstrap two times why?

Gil Gene says:

Hey man, I must say your tutorial has been very constructive for me. it’s shows me how to go about creating any type of project I’m planning to start on my own in the future.

DabaZR says:

To me it shows 6 UNDEFINED issues and iit doesn’t output anything. Any help?

CruelGangsta says:

Your english pretty nice. Thank you for this experience

Saurabh Vavekar says:

Please Please Please…………….
Make some more videos like this ……..
Some more single pages applications with PURE JAVASCRIPT….

Venu G says:

Great Tutorial.

Abrar Iqbal says:

Is this a pure js project??it has everything

Pavel Leehachev says:

good job

Aman Negi says:

not working in my system

Nikola Ivanov says:

Awesome tutorial! Very clear and concise. Keep it up :)

martin mtandi says:

Sir can u do one on a windows platform

Nuri Engin says:

thanks for tutorial. such a nice staff! danke schön :))

Kepler says:

THIS IS EXACTLY THE VIDEO I’VE BEEN SEARCHING FOR

Andrew Li says:

did he just say yava script???? ffffffffff!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Samy Bouma Ngock says:

Very good stuff. Is it possible to export localstorage data to an excel or json file, or in a SQLite db?

Aizaz Aziz says:

great tut thanks

Jimmy A. Magbanua says:

Sir your tutorial is really good. Thank you so much.

Ahmed Raza says:

First of All thank you for nice tutorial. But i have one question popping in my mind..
That is.
You have set the value of issuesListe to issueslist by using getelementbyid. At the end of the video in main.js on line 65 in loop block.
And you then on line 67 set the innerhtml of issuesList
. .
How this is running successfully in browser.
Like first you decaler a var with an identifier of issuListe and you calling that with issuesList.
Wouldn’t it be case sensitive????

Paul Anthony Mcgowan says:

Just getting a short error about the chance method ?

Krista Watkins says:

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

Nicholas Iloba says:

Hey,

So i coded this out using es6 (const, let and template strings).

My question is this –

How do you call the setStatusClosed/deleteIssue onclick function when using backticks?

JS ! says:

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!

Marcel Berkien says:

Highly Learnable. Very good pace!

kaligula4life says:

Is it true that germans have no soul?

Paul Anthony Mcgowan says:

Hi, solved that by adding an if statement to check first if an issue exists, however on input mine is not storing the submission in localStorage, any tips welcome? Thanks

Yuan Obispo says:

Any suggestion whre we can download data for local storage to run a test on this thanks

Write a comment

*

Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.


Do you like our videos?
Do you want to see more like that?

Please click below to support us on Facebook!

Send this to a friend

▷ Other ReviewsVehicles▷ Show Cars▷ Motorbikes▷ Scooters▷ Bicycles▷ Rims & Tires▷ Luxury BoatsFashion▷ Sunglasses▷ Luxury Watches▷ Luxury Purses▷ Jeans Wear▷ High Heels▷ Kinis Swimwear▷ Perfumes▷ Jewellery▷ Cosmetics▷ Shaving Helpers▷ Fashion HatsFooding▷ Chef Club▷ Fooding Helpers▷ Coktails & LiquorsSports▷ Sport Shoes▷ Fitness & Detox▷ Golf Gear▷ Racquets▷ Hiking & Trek Gear▷ Diving Equipment▷ Ski Gear▷ Snowboards▷ Surf Boards▷ Rollers & SkatesEntertainment▷ DIY Guides▷ Zik Instruments▷ Published Books▷ Music Albums▷ Cine Movies▷ Trading Helpers▷ Make Money▷ Fishing Equipment▷ Paintball Supplies▷ Trading Card Games▷ Telescopes▷ Knives▷ VapesHigh Tech▷ Flat Screens▷ Tech Devices▷ Camera Lenses▷ Audio HiFi▷ Printers▷ USB Devices▷ PC Hardware▷ Network Gear▷ Cloud Servers▷ Software Helpers▷ Programmer Helpers▷ Mobile Apps▷ Hearing AidsHome▷ Home Furniture▷ Home Appliances▷ Tools Workshop▷ Beddings▷ Floor Layings▷ Barbecues▷ Aquarium Gear▷ Safe Boxes▷ Office Supplies▷ Security Locks▷ Cleaning ProductsKids▷ Baby Strollers▷ Child Car Seats▷ Remote ControlledTravel▷ Luggages & Bags▷ Airlines Seats▷ Hotel Rooms▷ Fun Trips▷ Cruise Ships▷ Mexico Tours