Building a Messaging App | Javascript | Tutorial 15

hey welcome to draft cabbie my name is Mike in this tutorial I want to show you guys how to build like a little basic messaging app in JavaScript now this isn't gonna be like a full-fledged messaging app but basically what we're gonna do is we're gonna be able to type some text inside of this text box over here we'll be able to click the send button and then that text will show up on the screen and so I can keep posting texts like little text messages and then that will just keep appearing on the screen it's gonna be kind of cool and it'll kind of give you an idea of how you can do something like this in JavaScript so I want to point out to you guys just my HTML really quick I have an unordered list and it has an ID of messages and inside of this unordered list we're actually going to put all of our messages so each message is gonna be like a list item and we'll end up putting all of them inside of this unordered list I also have this input text box right here and that's just that text box that you guys saw it has an ID of text box and then I have this button this send button and it just has an ID of button so like I said when we click this send button generally what's gonna happen is a new message will show up inside of this unordered list so let's head over to our JavaScript and we can start programming this the first thing I want to do is create variables for each one of these items I want to create a variable for this text box one for this button and then one for that unordered list so I'm just gonna create three variables and we'll just say their messages is equal to document dot get element by ID and inside of here we'll just pass in messages and then I'm just gonna copy this and do the same for the text box and we'll do the same for the button so I now have three variables each of which is grabbing the element on the screen so we're grabbing via messages list the textbox and the button so the first thing I want to do is create an event listener for this button in other words I want to be able to execute some JavaScript code when this button gets clicked so we can come down here we can say button dot add event listener and we'll be able to pass into this event add event listener function two parameters the first is the actual event that we want to watch for so I can say click and the next thing I want to pass in is a function that's gonna get executed when the button gets clicked and so the easiest thing for us to do would be just to define the function right here so I can do something like this so I'm creating this function and now I'll just make a new line and in here we can just write out all the code that we want to get executed when we press the button so let's think this through how can we make it so when the button gets clicked the message shows up in that unordered list well the first thing we can actually do is create a new element and so one of the things we'll need to do is create a list item that we can put inside of that unordered list and creating an element is actually not that difficult there's a JavaScript command that we can use in order to do that so I'm actually going to create a new variable and we'll store that element inside of the variable so I'll say their new message is equal to and now all I have to say to create a new element is say document dot create element and inside of here we just want to pass the name of the element that we want to create so in our case we're creating a list item so the name is just L I and that's how we can create a basic element but now what we need to do is we need to add in to this element the text that was inside of that text box right in other words I want the text inside of this list item to be the text was in the textbox so I can say new message dot inner HTML is equal to and now what I want to do is grab the text that's inside of that text box so what we can say is text box and this is referring to that text box variable that we created up here remember text box is just that text box that's on the screen and in order to get the text inside of it we can access the value attribute so text box type value is all the text that's inside of that text box so basically what I'm doing here is I'm just setting the inner HTML of the list item equal to the value that was inside of that text box right makes sense so now what I want to do is I want to add this list item inside of that unordered list in other words I want to put the list item in that list so it has a new item so I can use a JavaScript function called append child and what we want to do is access that message is unordered list so I can say messages dot append child and we just put in the new element that we want to append into this unordered list in our case it's just new message so assuming all of this works I can come over here refresh my page and if I type something in here and I click the send button it'll show up up here in that unordered list so I can you know type whatever I want into here and basically everything is gonna be fine here's the one thing though that we could improve right when I click send the text inside of this text box stays the same generally in a texting app when you click send the text inside of here will disappear so if we want to do that all we have to do is come down here add a new line and we can just say text box value is equal to the empty string so now the text box value will be empty whenever we enter in text so under in text click send and then you can see that the text disappears inside of the textbox so this is a really basic example and you know obviously like it's functional I can keep typing in whatever I want and it's gonna show up on the page so for our purposes we built like a mini texting app obviously you can't really text with other people but you know this kind of shows you like functionally how you can type something into a text box click a button and get it to show up on the page so I just want to recap real quick for you guys what I actually did here so over here in my index.html file have these three elements this Unruh list with the idea of messages the input with textbox and the button with the idea of button over here my JavaScript I created three variables so I created a messages variable and this was basically just storing the HTML element that unordered list I created the textbox variable which was storing the text box and I created the button which was storing the button and then I took that button and I added an event listener onto it and I was basically waiting for someone to click the button right and when they click the button I executed this function over here so this function is all of this code down here and inside of this function we created a new variable called new message and basically what I did was I set that equal to a new element on the page so I created a new HTML element on our page and it was just a list item and then I added text into that element so inside of the list item I put the value that was inside the textbox and then I appended that list item on to the messages unordered list right and then I set the text value equal to blank so all of that code and it really wasn't too much code when you think about it allowed us to have this functional little chatting app but you'll notice when i refresh the page everything disappears and the more we learn about javascript the more we'll learn about how to store those values so when we refresh the page they don't disappear and the more you learn about web development you'll learn you can actually like store all those little messages inside of something like a database and you know really make a fully functional app but for now that kind of shows you how you can do everything on the front end and create something functional like that hey thanks for watching if you enjoyed the video please leave a like and subscribe to drop Academy to be the first to know when we release new content also we're always looking to improve so if you have any constructive criticism or questions or anything leave a comment below finally if you're enjoying traffic Academy and you want to help us grow head over to draft Kadim e-comm forward slash contribute and invest in our future

Channel: Mike Dane

Views: 105,529

Keywords: Programming

Id: ZOOrhOJQ4q0

Length: 9min 4sec (544 seconds)

Published: Sat Oct 21 2017