Build a Chat App with HTML, CSS and Vanilla JavaScript

hey hello and welcome today we're going to learn how to view the chat app with just HTML CSS and JavaScript so this is a chat between John and Jane hey Jane what's up not much just leaving the dream how about you same old same old yes they accidentally put salt in my coffee instead of sugar oh that's so funny it was terrible I almost beat it out all over my laptop well at least you didn't ruin your keyboard and the cool thing about this is when we reload that page it's always going to be there but this was built with just HTML CSS and JavaScript and it's not Network connected so we're going to be using browser storage to save our messages and when I hit Jane right here so when I click Jane you see that the type input says type hitching and it's automatically focused on and I can write hey and we have hey from Jane with the timestamp 808 a.m so we'll learn how to work with date and time also when we click John it says John chatting so these are these dynamically Lee everything is in real time just that it's not Network connected we'll do that in a next video if you want to if you want um us to make this network connected so that whatever I type in my laptop shows up in your own laptop or phone you have you have to like this video and let me know in the comment section so right now if you go back to ebenezerdon.github.io slash chat vanilla JS you're gonna see this right here and you can try it out so you click John and hey Jane right here we have hey Jane from John we reload our page oh it's going to be there and we have the color chart um button also we hit clear chat and everything is gone where we reload though I left two hard-coded messages so that there's always going to be something there um that was done with HTML I'm going to show you how to do that and yeah there's nothing else to wait for let's get started already to get started we're going to create a project folder I've named mine chat app vanilla.js and the next thing we're going to do is create three different files for our HTML CSS and JavaScript so we're going to start with the index.html file and next we need a style dot CSS file so this is dial.css and we need an app.js file for JavaScript over to our index.html file we're going to start with a boilerplate HTML now if you're using vs code I recommend using the live server extension so you can set for live server in the extension section and this is going to enable you run your index.html file with live server so that whatever change you make to your application will reflect directly on your browser without the need to reload and here's an example for body so let's say we start with an H1 tag and hey I go over to a browser and look at that we have here right there for our application you can see that we have John and we have chain now this section right here for selecting the person to chat from we're going to name it the person selector section and we'll have a d for that we also need the chat container that's going to contain the chat so where we have John chatson hey Jane what's up not much and all of that that's going to be inside of the chat container and inside of the chat container we have the chat here that that says either John chatting or Jane chatting and we also have the messages section so we have chat messages where we have hey John what's up so for John for Jane and all of that and we'll also have the chat input so we'll put this in the form to make it easy to type and then use enter to hit send and that's going to be it for the structure of our HTML code so let's do that right now over to line 10 in our index of HTML file we're going to start with a div and with class passing selector so this is Emmett so that when I write div.person selector that automatically creates a div for me with class person selector and we need two buttons in the div so let's have button dot um button right here so we're gonna give a button the class or button and will also give this button the class of person selector button so the reason we're giving the button the class or button is because I want to style all the buttons you know have a basic button style for all of our buttons in the chat application so every button is going to have this button class and we have person selector button for this particular person select a button or these two person selector buttons and we're also going to have the active person button so whichever one is active you can see right now if John is active the color of the John button is blue and it has this um Shadow around it and if Jane is active you know it changes so we're gonna have the active class for whichever button is active and we also need an ID so this particular button is for John and we'll need to give it an ID of John selector so that we can easily select it and make use of it in a JavaScript code so this is John selector right here for the John button and I want to do the same thing for change so this right here is Jane and this is going to be John for like 11 instead of j o h and for line 12 we have Jane selector right here Jane is not going to need the active person class by default what we're going to do is whenever we click on the Jane button we'll use JavaScript to add the active person class to Jane and remove that active person class from John and you know these same thing for when we click on John the next thing we're going to need is a chat container div so this is div the chat container right here and we have a div with class of chat container and we need an H2 tag and let's say this is by default John chatting right here and this h2 tag has a class of chat header next we're going to need a d for a chat messages so this is deep the chat messages right here and inside chat messages so we have the default hard-coded chat between John and Jane right here so let's have D for John and then the message G for Jane and look at that we have div with class of message first of all online 18 and then the messages for John we're giving it the blue background and the messages for J income with a gray background and this is it for John blue BG for the class line 19 we have D with class message sender which says John um the text is hey Jane what's up and then we have the timestamp which is 10 30 am as you can see right here message sender um the message and the timestamp and then the same thing for Jane but for Jane we have the class gray BG and then message sender text and time stamp so let's see what we have so far in the chat up so look at that looking bear this is just HTML code we've not added a CSS yet it's CSS that's going to make it look like this now now back to our HTML code we need a form for a chat input we're going to type the chat messages so let's create a form with class of chats input form right here and we don't need form action we just need form with class of chat input form and we're going to create our input field so this is input right here with class of chats inputes and input has a type text class chat inputes let's make it required and we'll add a placeholder which by default says type here John so when is Jane chatting we're going to change this to type here Gene and then let's close our input field on line 32 we're going to add a button for sending the messages so this is button right here that button and we're also going to give you the class of sand button right here we want this to be a submit button so let's add the type submit to a button and then inside a button we write send so this is for sending the messages and that's for our form inputes the last thing we need right here is the clear chat button so you can see that we have a clear chat button so that when we hit clutch art everything is gone so we need that clear chat button in our application under the form closing tag on line 34 let's put a button with class button and we're also going to give you the class clear chat button right here and for the text we have clear chats let me capitalize the charts and this is it this is what we have so far for a JavaScript we're going to add the script tag online 37 and we have SRC app.js so this is SRC after JS Online 37 and we're also linking to a CSS file on line 7. so this is link real style sheet and Huf style.css which is this file we have right here now let's go over to our style.css file inside the CSS file we'll start with styling for the body tag and for a body tag we're going to use a linear gradient background so this was generated with the CSS generator it's not easy to to create gradients yourself so you can pause this video and then type it out or you can use whatever background you want to use and to get a CSL generator it's easy you can go over to Google and just search CSS gradient generator you can generate your own CSS gradient so this is what we have so far in our application now next we're going to do is dial a button class so this is button right here and we have border for button which is none and this is by default that button has this border that makes it look not so great and let's also give a button the pattern 6 0.625 em we'll give a button about the radio so all our buttons are going to have this border radius of 0.5 em and by default our button should be coarsal pointer so that when we hover on a button you can tell that it's clickable we also want to add a hover effect for a button so that look at this chart up right here you hover on any button there's a slight color change look at the send button there's a slight color change so we'll add a hover effects to all the buttons let's come back to our style.css file and we have that button and a hover right here and for hover we're just going to use the filter styling for this and we have brightness reduce the brightness and it's just going to be 0.9 we also want to add an active cluster button so this is button active so this is the active Studio class and we have transformed for this and translates y 2px this is so that when we click the button you can see it shows that the button is clicked there's let's come over to this complete app look at this we click the button and you can see that it moves to show you that it's being clicked on so this these are simple things you should add to all your buttons they help increase the user experience and um yeah your user interface in general so you have all the button you start there's a change you see that the cursor is pointer right here and you click the button you see that there's a chain that shows you that you're clicking on it so that's with the active pseudo class the next thing we're going to style is the person selecto class so this is person right here and selector and we'll give you a display of flex so remember this is the person selected div that holds the two buttons you know that contains the two buttons for selecting either John or chain to chart from so display flex and justify content Center we're gonna give it a gap of one em for the spacing right here so this is what we have so far display display flex and gap of one em and what I'm going to do right now is place the code and the browser side by side so you see what we're building and this is a code and a browser placed side by side so you can see what we're building in real time now we have the gap of 1em and let's add the margin next of 3 em so this is for the top 3M and then O2 for the left and right and one em for bottom and that's it right there and the next one we're going to do is give it a Max width of 40 em next let's tell the person selector button so remember we have the person selected div and then each of the button has the class person selector button so let's tell the person select a button next and we're going to give it a width of hundred percent and this is just to make it wider more visible and we're gonna give you the default background on line 40. and this is the default background will give a buttons we also want to change the color to white so that the text is visible so this is Hash FFF and look at that now let's increase the font size a bit so this is going to be 1.1 em and that's it we have a person select a button for John and Jane and notice that when we hover there's a slight change in the appearance now next we're going to do is tell the active class so active person for the person selector buttons we have the background color and we're going to use a blue background color and let's save that so you can see it in action and next thing we're going to do is add a box Shadow around it just so you know it's active let's style a chat container so this is going to be chats container right here and we'll give you the backgrounds so that's a chat container that's the ash blackish background right there and we're also going to add the font family for a chat container and let's use robot tool and Sun serif next we'll add a bottle radius and this is going to be 0.5 em we have a padding of 0.5 em for top and bottom and 1.25 em for left and right we'll give it a margin as well and let's make that Auto and we're going to give you the max width of 37.5 em a height of 37.5 em and we'll add a box Shadow right here so this is what we have we've added the Box Shadow to a chat container and you can see a chat container is looking good right now the next we want to do is style the chat header so this is the chat header ends less are styling for a chat header so for a chat header we have margin bottom of 1am ends color is going to be white and that's it so we have John chatting right here and we're also going to Target the H2 font size directly so this is going to be chat header ends H2 and let's increase the font size a bit so this is font size of 1.25 em s will also make it bold so that's going to be with the phone weight property bold right there and we already have the colors white so this is for the weight property of both right there next we're going to style the chat messages so a chat header is looking good the background is looking good the chat container is looking good and let's tell the chat messages next so this is going to be chat messages and we have height of 23 em s let's add the Overflow scroll so overflow y right here and we have scroll this is so that we'll be able to scroll through the chat so if you converted the complete chat app and just type hey hey Jane hey hey and hey and hey just want to show you that we can scroll through this without scrolling on everything in the page so you can just scroll inside of the chat container so back to a chat application we have overflow y as scroll and we also want to remove this scroll bar right here since it's a chat app we know that it's scrollable so we don't need to scroll bar right here and it doesn't look good either so we're going to do that with the chat messages and web key to the class so this is chat messages right here Dash webkit scroll bar that's going to Target the scroll bar and then we have display none and it's gone now let's start the message next so this is Dot message and for each message we are padding as 0.625 em we have bottle radius as one em we have margin bottom as 0.6 25 em and display is going to be Flex for this remember for our chat messages we have the chat message and we have the date oh we have the time rather we have the chat message and we have the time so that's going to be display Flex let's also give it the color so that we can see your messages right away so this is FFF for color look at that we can see your messages and we also want to give it Flex direction of column and you can see that this is separated the different text in one chat message so John is on a separate line hey Jane is on the separate line and the time is on a separate line so that's what line 85 does Let's Tell The Message Center next so we have message sender right here and phone wait for the message center is going to be pulled to message center is either John or Jane and photo weight is both and margin bottom right here let's give that um a bit of spacing and the next thing we want to do is type the message text this is message and text right here online nine to five we have font size as one em so that's going to make it a bit bigger and we have a margin bottom as 0.31 em and we have wardrobe as brick wall to prevent overflow when a word is too long so the next thing we're going to do on line 100 is dial the message timestamp so we're going to start the message timestamp and we'll make it a bit smaller font size for massive timestamp is going to be 0.75 em and we're going to align this to the right so text align right and that moves it to the right so look at that the next thing we're gonna do is style the background for each of the messages for either John's message or James message and we have the blue BG background remember if you go back to our index.html file John has the blue BG background and Jane has the gray PG per Crown so for blue BG all we need to do is give you the background color for blue and for gray PG we have a great background color so look at that a chat application is coming together so this is blue BG and gray BG and we have the chat input form and for a chat input form display is going to be Flex align items Center and margin top 2 em so that's it for a chat input form we're also going to style the chat inputes so this input field right here let's style it next it has a class of chats inputes and we'll start with padding of 0.625 em let's give it um no border so brother is going to be none and the Border radius right here is going to be 0.5 em background color for the background color it's going to be white but maybe not completely white so let's have F5 F5 F5 and we have color so that's the text color as hash 333 so that's kind of gray grayish and font size right here is going to be 1 em let's also make it feel the the width so we have Flex screw right here so one so look at that we're also going to style a set button so this is dot send button and background color is going to be blue that should be the same blue color we have for John right here so the blue BG color and we can also just add the blue BG class to ascend button then we'll avoid having this background color again online 130. for a send button we also need to make its color white you can see right now it's black on Blue which doesn't look good so this is white right now and font size online 32 that's going to be 1 am that makes it a bit bigger and we have four weights as bold and we also want to give it a bit of spacing right here so between the um chat input field and the send button let's do that with the margin left of 0.625 em and instead of having margin left for our send button we can also remove it and since we are using um Flex for our chat input form we can say let's use cap as 1em and look at that we still have that and what did we use again for okay yeah this was 0.6 to 5 em so let's let's do that instead instead of margin left let's go back to our chat and beautiful and we have cap at 0.6 to 5 em and look at that we have the same results the next one we're going to style and that's the last thing we're going to style um it's the color Chat button so this is Clay chat button right here and we have display as block and we're going to give you the margin right here so imagine as 2.5 em and auto there's nothing happening to our clay chat button so let's go back to our index.html file and see what's wrong online 34 you can see that this is color charts Beauty and instead of b u t t o n so look at that we have a clear chat button and we're done with the styling of our application so I'm going to make this full screen again so you can see everything more clearly so this is the styling um for a chat application this is inside of the star.css file and we have the index.html file right in here so that's it the next and final thing we're going to be working on is a JavaScript to add functionality to our application so that when we type hey Jane and hit the send button that sends like we have right here in our hosted application remember you can go check this out right now on Ebenezer download github.io chat app vanilla.js so we have hey right here hit the send button and that shows automatically we also want to be able to click chain and have the chat um header change to Jane chatting and the placeholder for the chat input change to type here Jin so we want to do that in our own application too now let's start working on the JavaScript section of our application and we'll go over to the app.js file if you've not learned JavaScript or you're still struggling with JavaScript I have a JavaScript book which I've recently published to make JavaScript really really easy for you its name simplified JavaScript for very important programmers I see as a very important person and my book is the ultimate solution for everyone learning JavaScript I've broken everything down into the simplest of terms and it's going going to cover all of the essential parts of JavaScript we will cover JavaScript syntax and data types variables and JavaScript functions JavaScript operators arrays higher order functions objects will cover Arrow functions conditional statements Loops the Dom because for this chat application we're going to be working with browser storage we'll work with date and time we'll work with real-time Dom updates we'll use Arrow functions and we use functions and all of that so it's important that you're well grounded in JavaScript so go get my book on Amazon I'm going to leave the link in the description um you can also get it from lean Pub on lean Pub you can choose to pay as little as ten dollars or if you want to support me you can just slide all the way up and increase the price and that'll be really cool and if you cannot pay with USD I've also published it on seller so you can pay in your local currency and that's it I'm going to leave the links in the description so if you're learning JavaScript um please get my book and if you just want to support me um you should also get my book if you want to share with someone you can get my book so you can get the ebook on Amazon and you can also get the paperback and hard cover on Amazon now over to a chat application and back to our code base let's start by creating the variable for the John selector button so this is John selector BTN right here and inside of this variable we'll get the John selector button so this is document or query selector and remember the John selector button has an ID of John selecto so this is it right here in the index.html file a joint selector button has an ID of John selector on line 11. now over to the afterg.js file we want to do the same thing for the chain selector button so instead of John we have Jane on line two and this is also Jane selector we also need the chat header remember we're going to be updating the chat header when we click either John or Jane button so this is chat header and we have document or query selector and this is a class this time so we'll use full stop all the dot symbol instead of the pound sign and that's chat header and we also need the chat messages so online four we have chat messages and document the query selector chat messages we need the chat inputes on line five we have chat inputes and document or query selector chat inputes we need the chat input form so we should take the chat input form um before the chat input so that it's easy to understand it it goes from top to bottom and we have chat input form and finally we need the collect chat button so this is it right here on line seven we have clear chat BTN and we have Claire chat button so notice the way I'm naming all of these variables and the classes it's easy to understand it clearly references the content that that's in the div or the content that it represents the elements default content that it represents and that's how you should name your variable that's how you should name your classes and IDs the next thing we're going to do is create a function that'll return a message element so when we go back to the index.html file we have this as a message element from line 18 to line 22 or from line 23 to line 27 now for each message that the person sends either John or Jane we're going to create this message element and then we'll have the person's name the person's message and the timestamp so let's create a function for this so we don't have to type this out every time we want to create a message element for each message so this is chat message element and that's equal to we have Arrow function right here and the message and we're just going to return our HTML so this is it we have div with the class of messages like what we have in the index.html file and for the next class we have either blue BG or gray BG depending on the message sender so what we're doing right here on line 10 is we are using the JavaScript template literal and we're saying if the message send us a message just send that this message is going to be an object if the message sender is shown use the blue BG class else use the gray BG class so if you're unfamiliar with this once again I explained this in my JavaScript book so please go get it go check it out right now and on line 11 we have the message sender online 12 we have the message text and online 13 we have the message timestamp so whenever we need to use um the chat message element all we're going to do is call this function and as an argument provided with the message objects next we're gonna create a send message function so that when we come over to a browser and we type um for John and we click Send that's going to send the message so that's going to take the text that we've imputed in this input field and displayed on a browser we're also going to store it in local storage so I'll show you how to do that online 17. we have const send message and this is going to be a function and let's provide it with an argument for events and this what this is going to do is prevent the default reload So currently currently when we go back to browser and we have hey right here we hit send that reloads the page so we want to prevent that and that's what we're using e dot prevent default for so either prevent default right is going to prevent that um default reload action next let's get the timestamp so this is cons timestamp and that's equal to new date so we use the date object for this dots to local string so this is the local string local I hope that's the correct way to pronounce it local string and as the arguments we have the languages en US and then we want to get the hour so this is houro as numeric so we get the hour we'll get the minute also m-i-n-u-t-e as numeric as well and we also need the hour in the 12 format so are 12 in the 12th hour for much rather so our 12 is true right here and that's it for our date so this is cons timestamp it goes to New dates dot to local string and all of these um and all of these specifications next we have the message so this is a message right here and for a message we'll need the sender so for a message we need the sender we'll also need the text and the text is going to be chat input right here remember we have chat in print online six dot value and we have the time stamp now how do we get the message sender what we want to do is this by default we know that the message sender is John that's what we've used in the HTML file but when we click Jane we want to update the message sender to Jane and change this to Jane chatting now what we're going to do is create another function and we'll name it update message sender what this function is going to do is take whichever one we click if we click on John its duty is going to be to change the header to John chatting and also add the active class tag to John right here and when we click chain we want the same thing so we want the color of the chain button to change and we also want the header to change for our update message sender function on line 18 we need the default message center and remember we want it to be John so this is message center right here and that's equal to John and you can choose to make this chain if you want but you have to also update that in your index.html file now on line 20 first of all we have message sender as name so this is the message center we're going to be using for the header and we're updating this variables whenever we call this message sender function with a name we'll update this message sender variable and we'll give it the value name which is the argument that I will call the update message center function with next we're going to update the chat header so remember we have the chart header variable right here on line three and we'll update the chat header dot inner text and this is going to be either John chatting or Jane chatting and we use the templates um string for this so this is the dollar symbol and we have message sender so the reason we have this message said that outside of the update message sender function is because we want to use this message sender right here on line 29. so this is a message sender now over to our update message sender function we have the message sender and we have chatting so if the message center is John this is going to be John chatting and if it's Jane this is going to be Jane chatting next we also want to update the placeholder so that's chat input.placeholder and this is going to be type here so type here and whoever the message sender is so either John or Jane so that's message sender now let's make this work and to make this work remember we have the John selector button and we have the Jane selector button right here on line one and two so this is going to be John selector button dot on click so when we click the John selector button and this is all lowercase we have this function which is going to call update message sender and John and I want to do the same thing for the Jane selector button so Jane selector button dot on click and we have a date message sender as Jane now if we go back to a browser and we click Jane look at that we have Jane chatting we click John we have John chatting what we want to do next is update the active class for either the John button or the Jane button so that when we click Jane it's going to be the one with the blue background and the shadow effect and when we click John that's going to happen for John now we'll go back to our updates message sender function and it will say if name is John then all I want to do is get the John selector button and add the class list to just select the button.classlist dot adds active person and we also want to remove it from Jane So if it's John we're going to remove the active person class from Jane So Jane selector button.classlist.we move active person so we'll add it to John If the message center is John We'll add the active person class to John to the John selector button and we remove the active person class from the Jane selector button and we also want to do the same thing if it's changed so if the message center is Jane will add it so this is going to be Gene selector button dot add active person and John selector button dot remove active person let's give that a try in a browser so let's hit Jane right here and look at that so Jane changes to the active person and then we click John and John changes to the active person you can do the header changes to John chatting and the placeholder changes to type here John and Jane we have the same thing um for this type here John in the play so the let's add this dot dot dot to give you the piping feel so that yeah we have that type here John or type here Jane another thing we want is to be able to type instantly and immediately when we click on any of those buttons so currently if we click John we'll have to come over to the um type inputes click on it and then start typing and when we want to chat with chain we click Jane and we have to come back to the type input and start typing but we want this so look at the live application where we click John we can just start typing because it immediately focuses on the chat input and when we click Jane we can just start typing immediately that's what we want for our application so to do that all we need to do is come over to line 33 in our update message sender function and get the chat inputes and not focus right here so whenever the update message sender function runs it's going to focus on the chat input so that means that when we click Jane the chat input case focused on immediately and when we click John the same thing happens and that's it for our update message sender function now let's go back to a send message function online 43 we have a message we have the sender which is message sender right here on line 17 we have the text which is chat in P dot value and we have the timestamp next what we're going to do is add the message to the Dom so to do that we'll get the chat messages um variable right here so that the chat messages elements and we want to add a message to it so that's going to be chat messages that inner HTML right here and we want to append to it so let's use plus and equal to so this is just going to add um towards already there and then we have the chat message element so this is the chat message element function and we have message I feel like we should name this creates chat message element to give you that function filled instead of just writing chat message element so we can have create chat message elements and let's have that here too so we know that this is a function create chat message elements and we're creating um the message elements with message as an argument so this this is going to take the sender from message the text and the timestamp and add that to the thumb now to try that out we'll need to add the submit event list not to a form remember we have the chat input form right here on line five so this is the chat input form and online 52 we write chat input form dot add event listener and on submit so it's good ways in the form for this event listener instead of directly using the button and this is because um this recognizes it as the form submission which means that even if we use enter on our input field that's going to submit the form and if we click the submit button that's going to submit the form as well if we use the buttons on click event directly we'll also need to configure the keyboard key enter to also submit the form when it is clicked and we don't want to go through that long stressful process now let's go try this out on the browser so we have here from John and we hit send and look at that that hey from John and over to Jane let's just type hey John from Jane right here so this is Jane chatting and we hit send and look at that there's Jane chatting we have the message center which is John we have the message which is hey and we have the timestamp as 9 22 am or we also have the message sender for Jane we have the text as hey John and we have the time numbers 9 22 am so everything is coming together nicely um one other thing we want to do is clear the chat input field whenever we send a message so let's do that we'll clear the chat MP3 and also notice that when we send a message so let's send a message from John hey Jane and you can see that so far we have the we have to scroll to see the last message and when we hit send we also need to scroll to see the last message we don't want that we want it so that if the current display is full and we need to Scroll once we hit send it automatically Scrolls and gives us what we want so immediately we should see a message that's how a chat application is supposed to be and fuel now firstly let's clear the input field so back to a send message function we'll clear the input field with the chat input form so this is going to be chat input form dot reset so let's try this again back to a browser hey Jane and we hit send and look at that the MP3 display and we have the message from John as aging we also want to scroll over to the last message whenever we type so since this is filled right now when we type from Jane or we want this to go to the last chat message immediately so let's do that on line 52 and we'll say chat messages right here so this is the chat messages Steve chat messages dot scroll top and this is equal to chat messages the scroll Heights and that's always going to take you to the bottom of the teeth so hey hey hey right here so look at that each time we have a new message where immediately at the new message location so hey John and look at that from Jane immediately we can see it and so far we have a chat application working so what's left is the clear chat functionality and saving this to local storage so let's start with the browser storage on Parts first so that when we type these messages and we have interesting chat between um John and Jane even when we reload that page that chat is always going to be there just like we can see for the hosted application so this is the hosted application right here and we have the messages from John and Jane we will load that page and everything is still there so that's what we're going to do for a local application and to do that let's come over to line 48 and create a new line so we have line 49 now and just before we we add the new message to the Dom let's add it to local storage so let's save it in local storage and this is local storage the set item and we have messages right here as the key and Json those stringify so if you don't work with local storage before I'll advise you again to go check out my JavaScript book that'll be really cool I've explained every single thing I'm doing in um this application every single part of the JavaScript code I explained it all in my book um it's easy to understand and very straightforward so this is it online 49 local story to set item we have messages and then json.stringify um the particular message I want to add to local storage since the message variable is an object and we cannot add objects to local storage we have to use json.stringify to make it a string and that means that right now we're going to be saving this local storage so let's see an example hey from John and hey John from chain and let's go over to the local storage right here so um to go over to local storage you right click inspect if you're using Chrome and you click this more tabs right here so let me make this bigger so you can see it easily and you click this arrow button right here for more tabs ends application and then local storage so this is local storage right now and we have a message is saved so sender Jane text and we have H on for the message from Jane but notice that we have two messages that we've sent we have one from John and we have one from Jane and right now for our messages we have just the last one from Jane and when we add a new message right here from Jane you can see that that changes to the last one so let's go back to John and write a new message from John and say hey Jane and look at that this changes to just the last message from the chain so what we want to do is have all the messages saved in local storage instead of just the last one and for that we'll create a messages variable and let's do that right here on line nine so we have const messages and this should be an RV so that when we send a new message we'll push to that array and then we'll take it over to local storage so this is what it's going to be like online 51 will have messages so this is the messages I will just created dot push and we'll add this new message and then instead of adding the message object to local storage we'll add the messages away that contains all of the messages so this is going to be local storage or set item json.stringify and messages right here online 52. now let's try this again this is from Jane and want to add a message from John we're typing from John right now and we say hey Jane and send the message and look at that we now have an away with this message from John and we can add a message from Jane right here and that's answer so look at the look at it right here we have the first one from John and then we have the next one from Jane and we add a new message it's just gonna um be added to this RV so that we have all the messages instead of just the last message now we have our messages in local storage but when we reload our page we can still see only the hard code that HTML chat that we've added so the next thing we're going to do is see how we can get the messages from local starvage and then display that and render that to the Dom to render the messages from local storage to the Dom we'll come back to this messages array and we'll use the json.parse function and what we want to do is get the data in local storage under the messages key so this is going to be local starvage dot get item and then we have messages right here so this is messages and then we don't see anything there we still have our empty array so if there's nothing in local storage let's use an empty array for messages now when we reload that page we're going to have the messages from local storage inside of this messages array next all we're going to do is display this or render this to the Dom and we'll use the window.unload property for this so window dot unload we have a function and then we have messages dot for each remember we added an array in the form of a string to local storage and that's why we're using json.parse online nine to convert it back to an array and that is why online 20 we can do this messages which is an array dot for each so this is messages.4 each and for each message we will not display that to the Dom so for each message right here we have um chat messages dot Ina HTML plus equal to remember we have a chat message element function which we've changed to create chat message element so online 21 we have create message chart elements and then that message so this is what we're going to do every time we load up a page so look at that that's already um reflected in our browser so we load our page and we are going to see the message from local storage displaying right here so there's a message from John we reload that page and look at that we have this lastly let's make the clear chat functionality to work and to do that we'll come over to line six to seven and remember we've gotten the clear chat button which is this one right here on line seven so we have collector BTN dot add event listener and on click so when we click on the clay chat button what we're gonna do is clear local storage local storage dot clear right here and we also want to reset chat messages so chat messages but inner HTML should be an empty string so let's give that a try now when we hit the clear chat look at that everything is gone from the Dom and also from local storage so that when we reload we have only the hard-coded message chat um from our HTML file and that's it's that's it that's it's forbidden the chat application with just HTML CSS and JavaScript this has been really fun to build and I've enjoyed every moment of doing this from the HTML building to the CSS dialing to the Apple JS um functionality implementation this has been really good now I can do a next version of this where I will make this chart real time so that whatever I type um right here in John is going to reflect on your own browser or on someone else's browser or whatever you can share this application with someone far away from you and then you can chat a real time I can Implement that but that means I have to implement that with the backend server so let me know if you want that and I'm only going to do that if this video gets enough attention so you want to see that you have to like this video you have to share it but if I if no one is watching this video there's not going to be need to do the second part of it so the second part of this video is going to be dependent on your response to one so let me know in the comment section hit the like button and remember to share this video go check out my JavaScript book share it with someone you know that's learning JavaScript and when you're done building this application I want you to build this yourself when you're done building this chat application please convert to new dev.io and share it so look at new Devil I look at the community page you can see people sharing their different projects this is really important I want to see what you build so please come over to new Dev share your application talk about it and that'll be really really great so new Dev is my learning platform and developer Community go check that out right now right now right now thank you very much for joining me and I'm gonna see you in the next video so I have all the JavaScript HTML and CSS videos on my YouTube channel which you can go check out right now right now right now

Channel: Ebenezer Don

Views: 38,494

Keywords: chat app html css javascript, create chat app javascript, create chat app html css javascript, chat engine, chat app html, chat app html css javascript php, create realtime chat app using html css javascript, chat app html css, how to create chat application using php mysql & javascript, create real-time chat app using html css javascript node js & socket.io, chat engine react js, chat app html css github, chat app html css js, chat app html code, chat app design html css

Id: _sxoqRIbW0c

Length: 52min 23sec (3143 seconds)

Published: Wed Mar 22 2023