Building a Messaging App | Javascript | Tutorial 15

Source Code - www.giraffeacad... This video is one in a series of videos where we'll be looking at programming in JavaScript. The course is designed for new programmers, and will introduce common programming topics using the JavaScript language.
Throughout the course we'll be looking at various topics including variables, arrays, getting user input, loops, conditionals, interacting with the DOM and much more.

[@sammy3858]

Now this is someone who knows how to teach.

[@harpermartin7813]

Right! Have a great day! Jesus Christ loves you!

[@aanyashresth7852]

I means you have not seen Dev Ed tilll now

[@ytbook9639]

Wow I know him too

[@terencefranzindenerio9386]

Love the way you enlarge the text... It helps us who only use 144p and 240p... because the net in our country is so slow...

[@DiamantOpp]

There's an XSS vulnerability in your code, use innerText instead of innerHTML, because if you use innerHTML, then someone could just put "helloalert('xss attack');" and the script would run.

[@simbaevans.3301]

Just finished learning Tutorial 15.Thanks to Mike

[@kpos_fresh9379]

I understood you better than my college lecturers...it be awesome if you could do more basic lessons 🤘🔥

[@djfago6240]

bro you are a genius. i have been watching your videos trying to teach my self javascript and i must acknowledge your efforts in teaching some of us for free. I wish you could teach me javascript personally. Thank you for every sharing your knowledge with us for free. with love from Belgium

[@Ginfio]

I love how you explain things and stuff. I just really like it.

[@qubecrafts4657]

wow i thought you were a nitro type player right lol did not know you could code

[@peppermintdior]

Mike is one of the best teachers on this earth. Much love from India

[@Fred-B]

if this man is not making truck loads of money; there is a problem or two with our world. I am an older guy learning from a millenial (i guess) ...This guy is the best programming teacher I have come across so far and I am a teacher too (not programming though).

[@ytbook9639]

What do you teach

[@DaOJ]

im using visual studio code and for some reason the js code and HTML code isnt working together

[@MsCellobass]

Great!! Someone who ACTUALLY SHOWS JAVASCRIPT IN ACTION On A PAGE!! Thnx dude! You are awesome!

[@lizalizaveta1882]

it's a very old video, but very useful for beginner students like me, thank you!

[@bashircodes]

Thank you your way of teaching is cool and understandable.

[@kamsyd13]

Dude how do u remember all the codes..?
Is there any way to get codes ..
Please do reply

[@terraflops]

i typed exactly what you did and it does not post text entered. Fails to work. // Thanks for the video though

[@senor_nathak]

Same here

[@naza3519]

@@senor_nathak Where?, Are u sure you are linking correctly the js ?

[@senor_nathak]

@@naza3519 yes

[@bhanubani4221]

Same 😥

[@desmondfoo5050]

add js file after html code in body

[@abdurrafaywali4756]

Now the real stuff is kicking in!!!!

[@tavvalakshminarayanareddy8143]

you are great but can you please even keep how to make a app like youtube using only js and html

[@MCJamess]

i love how people watching this in 2021 too.. Love it

[@AP_3XV1]

Another great video Mike, thank you. I love the way that you use an as a sort of replacement for a database. This is where you stand out from other tutorials I watch. Often the tutor will divert down a path about databases at that point and next thing i know I feel hopeless that theres another area that I am so far off from understanding. The focus on JS and ability to keep it on track here is so refreshing.

[@justinxten4real657]

Nice Video
I wouldn't exactly Call this beginner friendly, but nice stuff

[@otmanmorningstar4702]

U know what i like abt u man is that u make things simpl i wish that u keep it like this forever keeep it up king

[@Remix-e4u]

I couldn't understand the element calling here, using append and everything that happened inside the function.

[@lavenderodhiambo667]

I tried and it worked...amazing😊

[@gloryjin6438]

uncaught type Error:can not read this property 'addEventListener' of null
line6

[@dabrad7828]

Getting this exact same issue, have you figured it out yet?

[@astackzzzz277]

You might not be properly referencing the button right when you do document.getElementById('button').
Breaking it down, Line 6 (if your code is the exact same as the tutorial) says something like this:
button.addEventListener('click', function(){//code})
The error says that it can't read the PROPERTY addEventListener of NULL.
With that we can make the assumption that your code is being read like this:
null.addEventListener('click', function(){//code})
***Notice that is it null before the addEventListener instead of button
The only way that can happen is if button = document.getElementById('button') is returning null i.e. button = null
Thus, the issue could be:
(1) The HTML is not quite right, make sure that the button has an id of button i.e.
Send
(2) The is not in the correct spot in the HTML file. Make sure the is the the LAST tag in the body tag. Or if it comes before the button tag make sure it has the defer attribute(so the file loads after the button loads) i.e.
(3) If (1) and (2) are good, then the reference to the button in the JS is not quite right, so make sure the reference is like this:
const button = document.getElementById('button')
This might be too late but maybe it might help someone down the line.

[@codewithabdullah3496]

Mike I need your help because I have completed with this vidio and I understand it very well but I was trying to run this code is not display a massages i don't what is my error pls can u help me

[@opeyemijayeola8408]

I tried it the way you did it but didn't get the same output as yours

[@mrgasmask7584]

which kind of server ar the html running on. And can i use the vscode server?

[@dhwajsharma]

open live server extension

[@asianman103]

i have a problem it keep saying button not defined

[@mrgasmask7584]

hey im new to webdev can sombody tell me what program is used in this toturial mayby it is just me that is dam but i vant figure it out

[@muhammadjawad9341]

Watch his 2nd tutorial of this course.

[@sharriceowens913]

visual studios

[@monkey00019]

how would I create a real app that sends through a WebSocket

[@agustinl7499]

wow so much hate, I really liked this tutorial, thanks mike!

[@prochorusrhythmstv3871]

How can I build a broadcast app with java script plus help me

[@alaaasassii4433]

yoooo this man is the best I hope he can upload new vids like days every time

[@treasurerajshanmugam6733]

It's was super easy to understand...Thank you

[@zackprogamer5305]

and you can use: bgcolor="purple" this is for the background color

[@neharikapuri3889]

Hi, I tried it but my text is coming up on the same line. Where should I insert the ,

[@anselminos5238]

its just

[@lovaalette9596]

Neharika technically doesn't need to be closed off. As for where to insert it usually depends on where your problem lies. And generally you'd have an idea as to where you'd need a break.

[@wingmanup7368]

doesnt need an ending tag btw

[@sampath2927]

i dont understand why he used appendchild????

[@AnimeThings_]

I love you bro I have learned so many tutorials with you.....

[@kgaming7599]

Why don’t you just add the attribute onclick to the button through the HTML code?

[@nostalgia5031]

It’s simpler.

[@nostalgia5031]

Woah, it, it's me from a year ago. Wait, I WATCHED THIS :O

[@kgaming7599]

@@nostalgia5031 Hello, you from a year ago! XD

[@import-success]

@@nostalgia5031 😂😂

[@mikefrancesco8281]

hei mike can u teach me how to learn java script native??
i dont know how to start it

[@senor_nathak]

Not working

[@skateboarderlucc]

This is really useful, however I think the title is a bit misleading. Maybe use this video as a starting point for a series?

[@sau-students-union9552]

how is it misleading?? you should convey the truth bro you are a saint.

[@skateboarderlucc]

​@@sau-students-union9552 Why the hostility? "building a messaging app" implies that the app could be deployed and used by two parties to communicate. This video only covers the basic front-end mechanics which is why I said its useful but would be better suited as a starting point in a series that covers the back-end as well. Cheers.

[@jguillermooliver]

@@skateboarderlucc It's a beginner javascript course. It's not missleading.

[@mayankchauhan6680]

So basically you have built a messaging app that shows your messages to yourself. It might be a good tutorial for javascript point of view but the title is a bit misleading. You need to have a server-based communication system as well.

[@tipolacko]

Mayank Chauhan totally agree, has nothing to do with an messaging app ...

[@subgero]

Agree, this is a tutorial for alter the DOM.

[@anupamacharya7225]

Really love u bro .......amazing teaching

[@velhoguidsd]

A very easy todoList

[@MohamedYuss]

This guy is just great 👍🏻 and I really mean it.

[@hyperloop4519]

Will this message appear to everyone in the website

[@rajashekhar433]

What about queryselector?

[@kgaming7599]

raj shekhar Ya

[@kgaming7599]

It’s way easier

[@up-beat-music]

Thank you sir for making this video😀😀🙏

[@prajinshankarkarthik8013]

How to add data in a textbox without replacing the current data.

[@andyjagroom.3878]

Hey can any one tell me how to make the dot disappeared

[@bizzbizz5582]

How will we create app I entered the javasc Ripton but nothing happened

[@obertmakaza]

Hey buddy I am a beginner. How do I start to create an App since I am interested in software engineering

[@infohub3709]

Great one Mike. But I observed something here. Even when the textbox contains nothing, when the SEND button is clicked, an empty message is sent. Who can help me rewrite the code?

[@bernardkoech4463]

Mike's Page
Send
JS Code:
const messages = document.getElementById("messages");
const textbox = document.getElementById("textbox");
const button = document.getElementById("button");
const msg = document.getElementById("errormsg");
button.addEventListener("click",function(){
if(textbox.value ==='')
{
msg.innerHTML = 'Please enter text on the text box';
msg.style.backgroundColor = "red";
setTimeout(()=>msg.remove(),3000);
textbox.focus();
} else{
let newMessage = document.createElement("li");
newMessage.innerHTML = textbox.value;
messages.appendChild(newMessage);
textbox.value = "";
textbox.focus();
}
});

[@hitechzcoder1887]

i have a error when i press send it is not getting send

[@hitechzcoder1887]

plz help

[@ausglobeman]

'genrally' You would use document.querySelector to define a variable with an element, this is far easier to understand during a debugging process and the DOM is more reliable. How long have you been practising js css and html?? doesnt seem like for long

[@skateboarderlucc]

why not both? getelement is better supported, and for this guys use is perfectly fine as hes only selecting by id. If he needed to refine the selection queryselector would better.

[@smltv01]

the best one ever , with all my respects

[@codefoxx]

Bro this is no messaging app, cut it out. Its more like a to-do list app.

[@parkzex5727]

Bro he is really really smart

[@raviteja5093]

What about the client side??

[@innatsyban7082]

Well done chap!

[@arnavdatti]

which app or web we can us to make java

[@robertoriosmorales7528]

good job dude, very helpful

[@narsimhas1360]

Did this work for you. It is not working for me

[@scottisitt]

The textbox and button show up on my page, but no messages show up after clicking send. EDIT: Problem solved. I had misspelled "messenger" when referencing the JS source in HTML and (as Arkeel and Xeo pointed out below), I had made input a container tag when it shouldn't have been.

[@xeomiku4940]

Can i see your code?

[@xeomiku4940]

I kinda have the same problem and then I realized I wrote ".appendchild" instead of ".appendChild" lol

[@scottisitt]

@@xeomiku4940 This is my JS code...
var messages = document.getElementById("messages");
var textbox = document.getElementById("textbox");
var button = document.getElementById("button");
button.addEventListener("click", function(){
var newMessage = document.createElement("li");
newMessage.innerHTML = textbox.value;
messages.appendChild(newMessage);
textbox.value = "";
});
And this is my HTML code...

JS Messenger App

JS Messenger App

Send

I had tried taking the h1 header out of the HTML file to see if that made a difference, but it didn't.

[@scottisitt]

@@xeomiku4940 Ha Ha :) Yeah, I'm pretty careful about the case sensitive stuff. But I have made typos before or I have text on the wrong side of brackets.

[@arkeelnilar4294]

@@scottisitt input is not a container tag.
The correct format is
.

[@leonmaar1927]

Are These Messages
shown for everybody on the Page?

[@nour3660]

this is great but what i now want to know is how to actually make a functioning messaging website

[@masumali8356]

great work done by you...

[@555asg]

What app is that

[@sasinduadithya6245]

Hello Currently this chanel working ?

[@sonamuhialdeen7866]

Awesome tutorial

[@silentxcure]

you're incredible.

[@mohammadsaleh461]

is it just me or the code really doesn't work!

[@marcelinolima6897]

It's not working for me too

[@pluuid7133]

What is the computer app called

[@kanishksalian374]

It is not working☹

[@CutieJunieFreak]

working great!

[@mansourlotfim]

i do it line by line but get this error:
Uncaught TypeError: Cannot read property 'addEventListener' of null

[@jovanjevtic5311]

your button does not exist in HTML

[@jdujdjruxjJeujdj]

Always add the js file after body mean at last

[@owenmedia7206]

Amazing well explain 👍👍👍

[@gotem370]

the zoom is a little much

[@pandasafkplayz7348]

If you want a easier way just use python and html although there not freinds they still work

[@DominicNweze]

They are cousins. Then 😂

[@valencehockey1668]

HOW DO I DOWNLOAD THE CODE?!!!!!!!!!!

[@nostalgia5031]

I'm pretty sure you just go through the source code link in the description.

[@valencehockey1668]

@@nostalgia5031 it leads to a website with no download code thing

[@codebyaaryan6461]

please make bootstrap tutorials

[@amey7064]

Would be happy to see a back end part too.

[@kgaming7599]

It doesn’t save when you refresh dude!!!

[@jdujdjruxjJeujdj]

@@kgaming7599 save it in localstorage

[@raselbisswasrb]

Thanks bro. you are the best

[@ramonetmedina4734]

what app are you using

[@AkarshG]

its an software .... use visual code editor

[@manoulita4363]

Thank u so much ^^

[@nnamdiray9279]

this guy isperfect

[@odinmaster6677]

thanks alot

[@dhwajsharma]

Don't zoom in too much!

[@snssatyabhagavan]

Thank you you are my one of the teacher.

[@avantikanagrale2084]

Perfect 👍

[@SOURAVKUMAR-di4xg]

great sir

[@smmosfequrrahaman3768]

nice tutorial

[@leandrotrentzportoalegre9742]

Hi Alright Mike. How do I make sure that I persist the information on the screen and be seen by everyone at that moment in the url?

[@arneolemans9117]

Thats socket.io stuff (th-cam.com/video/rxzOqP9YwmM/w-d-xo.html)

[@samuFring]

good man

[@ayush5760]

Sir which software

[@AkarshG]

visual code editor

[@CosmicAerospace]

Its called Atom, it's a great software he recommends for web development languages like PHP , HTML,javascript and so on:)

[@trannghiavo2773]

thanks you !

[@RealCreativeShaurya]

8:06

[@chariyassine5202]

thanks buddy

[@cromuelbarut9859]

thanks

[@calebwelsch1019]

my computer decided to shiz the bed right as coding and i ha dent saved