Summary

Course Summary: Building a Web Application Like Twitter

Lesson Overview

In this lesson, we focus on adding interactivity to our Twitter-like web application using HTML, CSS, JavaScript, OJS, and MySQL.

Key Concepts

Interactivity: Moving beyond static styles to create a functional web application.
Event Handling: Learning to handle events like button clicks to enhance user engagement.

Steps to Add Interactivity

Setting Up JavaScript:
- Create a file named script.js for JavaScript code.
- Add the script to the HTML file just before the closing </body> tag for proper loading order.
Adding Event Listeners:
- Use addEventListener to detect button clicks.
- Target the button using document.getElementById, ensuring the button has an id attribute (e.g., entry-submit-button).
Creating New Entries:
- On button click, capture the text from the input field.
- Create a new entry in memory and append it to the list.
- Clear the input field post-submission.
Logging Events:
- Log to the console to confirm the button was clicked, using console.log.

Example Code Snippet

const submitButton = document.getElementById('entry-submit-button');
submitButton.addEventListener('click', function(event) {
    console.log('Right button was clicked');
    // Logic to add new entry and clear input goes here
});

Conclusion

This lesson demonstrated how to integrate JavaScript for interactivity in our web application. By handling button clicks and manipulating the DOM, we transformed static elements into a dynamic experience.

Next Steps: Continuing to expand and enhance our web application in subsequent lessons.

Video Transcript

And we are back one more lesson for our course how to build a web application that's like Twitter using HTML CSS JavaScript, OJS, MySQL. Let's keep going. So we spent some time working on the style. And that's just fine. Let's take a break from the style right now. And let's work on more interactive stuff. That is okay, we can write something here. But clicking right doesn't do any. I don't see any new entry. Well, when you click type something here, click right. What should happen is a new entry should be added to this list of entries. How do we do that? Well, we're going to need JavaScript. JavaScript is programming language, bridging the scripting language for the browser to make web pages interactive. We're going to make this interactive. And that's pretty much when it website becomes an actual web application because of the interaction with the user. So how can we do that? Well, we're going to do stuff in HTML, we are going to create an element in memory. And we're going to apply class to that element, a new element to have the class entry. And we need to set the text, the content of that element. And we're going to use JavaScript to do that. Be very nice. We're going to learn about events, because when you click the button, that's a click event, we need to know how to handle the event. So we can do something in response to that click event. Well, we're going to first take the text, create a new entry, inject that new entry to the list. And after that, we're going to clear this text box, right? Because you already typed something you don't want anything else to be here. I'm going to do that. Well, let's get started. Moving back to the text editor, I'm going to create a new file called script.js. So JS extension for JavaScript. Now we're going to be programming JavaScript. Nice. I'm going to make a script here. Now, let's first write the script. And then we're going to link it to the HTML file using the script tag. Now for the script, we need to do the following. Well, the user is going to type something here, and then it's going to click right. Well, the button click is an event, we're going to need to handle that event. One way of handling the event is using Add event listener. Now we're going to target what's called the document object. Now this call object document object, we can access, we can call a function, aka method, also known as method on the object, all dot add event listener. Well, not quite sorry. First, we need to find what we want to listen to what element is going to trigger some event. In this case is the button. Now, the button is this button right, how can we somehow tell it hey, for this button, the right button, and every click it, I want you to do something. So I'm going to add an event listener to that button, not the document, the button that's containing the document. If I need to look for the button in the document. Well, how can we do that? One way is using get element by ID document again, element by ID. This method will allow you to find any element in the document object model, so called DOM ID ID of the element. Now, the right button does not have an ID. So you have to add an ID attribute to that element or tag. So we're going to open parentheses. I'm going to use double quotes here could be single quotes doesn't matter. In our case, so double quotes, I'm going to give that right button some sort of ID. I'm going to call it. Let's see. Something. That's the entry submit button. I like to name my IDs in that very same fashion as the style sheet classes. I use lowercase letters separate locates, words separated by a dash. Okay, so this is going to look for the element that has the ID entry submit button in the document. The doctor object model is this thing you see here. If I go to the browser under the element, okay. Now it's going to look okay, where's the element that has the ID. Well, right now, the button does not have an ID attribute. So let's do following going back to index to HTML. We have the button right here online 12. Well, we have to add an attribute called ID to the button. So add an attribute called ID, whose value is remember the value comes after the ego sign under double quotes. That very name that I wrote entry. What did they call it? They call submit button. Yeah, entry that submit dashboard. Now this button now has an identifier, right ID. So we can use document but get element by ID to find this element. Now let me show you something. Once it finds the element, I'm going to put it in a variable. Okay, I'm going to use cost to declare variable. Like this, let me explain what happened here. So document got lmid, I'd like to put a semi colon on the end, but you don't have to but this is usually a standard style for many developers. So I'm going to try to grab the element by ID. Let's assume it's there. It exists. Okay. There are cases where not by now be exists and they have to do some checks and other stuff. But let's assume it's already in the DOM. Suppose it grabs that element, the button, I want to hold on to that reference to that hook. And the way I can do that is by assigning this to a variable. This is the name of the variable I put submit button. And to make a variable, I use the cost keyword. I use cost because I don't need to redefine it later. So I can only define it once and I don't need to redefine it later. Notice how I name my variable I use what's called the ammo case. And okay, it means the first very first letters lowercase. And every following word, the first letters capitalize, you can see there's two or submit and button. The following word has the first letter capitalized all together. So if you want to type a camera case, it would be like this. Okay. That's a different naming convention. We have camel case here for the variable name. I have a snake case for the ID snake case for the variable, the class name, except I haven't used it because I only use one the word. Anyway, back to this. Oh, that's very nice. And all now to the submit button. And I want to add event listener. This means whenever you click, that's the first argument to this function call. I want you to do something. And that's something that's out here. It has an argument for a mental event. When I do something, let's do what's called the console log. Right button was clicked. We're going to see what this does. Let's just write it and see. Let's keep up this. We're now going to learn what it does. Back to the index.html. We'll have to find a way to connect a script.js to the index.html file. Usually we place all these connections, right, at right before the end of body, the full script, JavaScript, we usually put the script right before the end of body. Of course, you can write JavaScript in the same file as the HTML. But that's not typical. That's practice. In most cases, or many cases, you're going to have a separate file for JavaScript. And to make the link you're going to have. But usually before the end of body, to make sure that everything before that has been defined, and there won't be any problems when by the time executor script that things will not be in the page yet. Anyway, so for the style sheet, we use the link tag, that's for the script, we simply split script, the script tag. We have a script. Next slide script. Now script has a source. I don't know why the whole thing changed colors. That's really weird. What did I do? That is strange. Anyway, we have the script tag attribute, that's RC. And the value is going to be the name of the file that I created for the script. Script.js. So script.js here is what goes the location of that is what goes under the SRC attribute. Now let's save it here. Okay, so I went to the tab called console. And I clicked the button, and I got this message right button was clicked. So let's look at the code here. So document.getElementId will grab the right button, put in a variable so I can reference later. Some reference the mad event listener. So I call this method on the object that corresponds to this button, right button. For the event call click, that's the first argument to this function call. So what I'm doing here is a call this function call event listener. The function takes arguments, arguments separated by comma. The space is just for style. This first argument is the name of the event I want to listen to click. And the second one is an anonymous function. An anonymous function can declare at this arrow notation here with a parameter comma separated on the left. And the braces to define the body of the function. The body of the function execute whatever I want. In this case, I only have one one line, one statement. The statement is what writes, but right button was clicked to the screen. And that's done through the log function of the console object. Now that I talk about objects, because JavaScript, there's a lot of objects, objects like things that have attributes and have behavior, behaviors like something you can ask it to do for you. In this case, I can ask the console object, please log something to the console there. And I can ask the submit button, please. I'm gonna add I'm gonna add an event listener so I can listen to you. And here's what I want you to do in this anonymous function every time you click. And that's precisely what it did. That right button was clicked when I click the button. Only happens when I click the button. Of course, like click click click, I will keep writing more. Because the way my browser, the text that I the same thing was typed it just adds a counter here saying, Hey, this was printed five times. So it's actually one per line. But that's what the browser does to compact things. Okay. And that was it. We wrote our first script JavaScript. Roll the script back to the index HTML, make sure to link that we're using the script tag SRC location of the file with the script, usually at the end before the end of body is where it plays the JavaScript. With that, I'll see you in the next lesson.