JavaScript from Beginner to Expert: Learn JS - JavaScript from A to Z

1. What is Javascript?: Hello, my friend. When you're learning something new, do you ask yourself many questions like why do we need events? Why do we need loops with our day? How do we use them and so on and so on? If yes, then you are in the right place because I will answer all your questions. Looking like that. I will explain you in discourse everything from the basics toe advance compliments off the JavaScript so we can become the expert. Discourse is divided into 23 sections and it consists off 85 lessons. It is over 12 hours off. Great content. You also gonna find here loads of quizzes and exercises. I will explain your syntax off the JavaScript and well trained the syntax. During practical examples, JavaScript is giving your website additional functionalities that can be executed on the user computer without reconnecting toe the server. This allows you to do things that you cannot do with on HTML. Because of it, the user interface becomes more friendly and more interactive by interactive elements. I mean things like two deeps animated insiders force with privilege, validation slided partners, galleries with companies and many men, and more and well you might be asking yourself what you will know after discourse. After this cozy will be ableto right coding. JavaScript on any level of difficulty creates creeps like Dynamic gallery with family slide shows at cetera de Bagger Kotick and keep your coat performing well and much, much more. You understand things like variables, all operators, conditional statements, functions, areas, objects, loops, document object model events, regular expressions, cookies and minimal. You have got more information about this below the video, okay? And what you should know before discourse, you should understand the basics off HTML and CSS. If you know that you can easily work these cars and you might be asking yourself, Hey, but why should you choose my course? Because you have my help regarding cover topics if needed. My courses are updated. I have thousands off satisfied customers, and these cars is led by me. And I am very experienced person, and I'm not gonna talk like they're about as you can see, and I want to make your time spend well in a good mood. You can download a lessons on your computer disk. I do not assume that you are a pilot, a Lightman other teachers. I'm adding source coat free, Preval essence and well, who am I? My name is our Kardashian Ladakh trick. I don't like to talk about myself, but well, as you can see, I have got an experience in this matter. I've been programming for over 10 years time and I have been developing a website for over 14 years and I am altered off 27 video courses in Poland. I have created also six video courses in English. I am teacher off thousands off satisfied customers. There are many comments about my courses and here is one of them. If you have any questions regarding cover topics, please just ask me. I really love helping other people create a discussion. I will be glad to help you. That's all. Thank you very much. 2. Downloading and installing editor : Hello, my friend. Today we are on a mission to pick the editor for diving deep into JavaScript, and you're probably wondering if you need to stick with the editor we are using in this course. Absolutely not. If you've got your favorite editor already, feel free to keep using it and you can stop this lecture and go ahead to the next one. We are going to use Netf sometimes Visual Studio code. Why? Because I personally find it handy. It suits me, not just for web development, but for programming in other languages, too. But remember, it's all about what works best for you, not for me. So whether it's going to be Visual Studio code, or brackets or sublime text or anything else, the choice is always yours. We are going to download now NetBeans. And if the version here is bigger, do not worry at all. Okay? Because this course is still up to date. Even if the version here was ten, the course would be totally the same because the net beans is not only used in JavaScript. It is used mainly as Java, which is totally different language. And their version matters because if you want to use the newest version of Java, then you need to use the newest version net be. In JavaScript, it really doesn't matter at all. Let's hit Download pattern. And now if you are using Windows, you use dslink. If you are using Mac, you are using Disnink and if you are using Linux, you are going to use Dink. Because I'm on Windows, I'm going to click on the executable version. And when I hit this, I can download it in the background. And now, need to remember that Net Bins requires something what is called JDK. Here, as you can see, it says it requires JDK, which is in version 17 plus, and you can use also 21 and 23. So where do you download it? In order to do it, you go to the site like this. And now you click on the other platforms and versions because you might be using different system. So here you can choose the operating system you are using because you are using Windows and going to just choose Windows. And the version that you should choose is one that is here, right? Choose the one that is stable, which are always stated as LTS which stands for long term support, okay? And because we need JDK, we're going to choose JDK. And also, as you can see, we have got, because I'm using Intel, I'm going to use this version here. And you just hit on this button and just wait until it's going to be downloaded. So it's time for installation. Firstly, you need to install JDK, so double click on it, and then hit next and be sure to read the license agreement and then next and then next, and it's very important that you have all the things here set as will be installed. Okay? If you have it like this, please set it like this. Otherwise, there might be problems in finding the JDK by netbins. All right. Let's finish the installation, and now it's time for net wins. So double click it. And now, as you can see, the installer is being configured and you are being asked what you want to install here. So you can customize because we are not going to use Java, for example, you can just uncheck it. It's good to choose PagB because there might be a possibility that you're going to connect Java Scret with page B, and just hit next. And of course, remember about reading the agreement, click Next. And because we installed a JTK, we have got it here. So now click next. Install, and it's now just time for waiting. After you install it and click Finish, you need to just open Net Bins. And as we progress, you will learn how to create your first project and much, much more, of course. And I am here to help you during this journey. So if you have any questions, feel free to ask. I'm always here to support you. 3. What you will know after this course? What JS is used for?: Hello, today, I will tell you what is JavaScript and why is worth to learning. JavaScript is a programming language for web browsers. So for example, for Fox Google, Cron, and so on, you can create in it a code, which is called a script that can be executed on the visitor of your website computer. Which means that when you finish loading the website, so let's refresh this. You can still access elements on the website, and you can change them, right? So for example, when we have got here a gallery with Tamnes with these miniatures here, as you can see, when I'm using my mouse over one of that image, The image here, the main image is being changed. And it's very useful because now you don't need to take so much space on your website, and you can show the product in the bigger version very easily, right? As you can see, this is improving the user experience on your website. And in addition to this, as you can see, we have got a tooltip here, that is giving additional information about each of this image. That is very very cool, and it's improving the user experience. HTML is responsible for the content of the website, CSS is responsible for the layout, and JavaScrip responsible for reacting to the user actions and doing things with HTML and CSS on the user side after finishing the download of your website. Normally, without JavaScript, you wouldn't be able to do anything on the user computer. Because after connecting to the server and downloading the website, the user is not connected to the server anymore. It's just on his computer. That's all. You could close the connection. You have got still access to this website. So Java script can be used or also many other things. Not only galleries with halins. You can create something what is called slided panels. You can create things like transitions between images images that are changing each second, which is called slide show panel. You can use it, for example, on shop web pages where you can show many products in one small place. Can create promotions and many other things which makes your user experience better. JavaScript is necessary for becoming front end developer who is responsible for the things that are done on the user side, right? Imagine a situation like that where you have a clock on your website. You would need to every second request from the server and new value in order to update this clock. With JavaScript, everything is running on the user side without reconnecting constantly to the server. The Java script can be used to update the content of your website, and place a D? You can, for example, change the size right and you can show something? You can create a tool tip next to with a di. You can, for example, change the source attribute of the image here, you can do some kind of animation. All that things are done in JavaScript. Changing dynamic things lay out on your website is something that is done in JavaScript. But what's more? There are advanced libraries for JavaScrip like Ajax that allows you to connect to the database and retrieve info without reloading the website. For example, when we go here, as you can see, now when I click here, I'm not reloading my website. I'm just changing this place here, and all that content is taken from the database from the PHP and MS QL. If you don't know it yet, don't worry. Just remember that you can even use it with advanced libraries to create literary websites that do not reload refresh. Don't do something like that, Refreshing. That takes lots of time. So this is very, very awesome. You can also use Java script to pre validate the input in forms. Like, for example, if the password was strong enough or the e mail use right and so on, before sending these values to the server. You can show special box informing user what is wrong in the form without resetting his values in form. It makes user experience on your website lots of better. They're sending JavaScript syntax, well, we allow you to also understand better something what is called J query framework. J query framework is a big library of useful Java script, plugins, functions, things that allows you to write less code doing much more. There are already many things done that you can just do. But in order to understand J query, you have to also understand Javascript, so you know what's going on there, right? After my course, you will understand all JavaScript advanced components, so you will be able to use any libraries as you wish. So you know JavaScript perfectly. This is the most organized course but Javascript from Beginner to Expert on the whole Internet. I will take you step by step from the theory to practical examples like Image sliders and animation. If you have any questions, feel free to ask and des in the lesson, thank you very much. 4. Creating project: Hello, my friend. Today you are going to create your first project in the Net Beans and in the same time you will know how to structure your projects so it's gonna be easier to maintain, Okay, so how to do it? In the left corner, as you can see, you have got something like file. You're clicking going in, then you go to the new project. Or you can use the shortcut Control plus Shift plus n. And as you can see, now, I have got these menu here that we can use. All the shortcuts are presented to the right side of the menu item. Okay, so let's keep New Project. And as you can see on the left side, we have good something like categories. And well, here you have got free folders, HTML5, PHP, unsampled samples. As you can see, I have some kind of sample projects created by other people. There must some demos, demonstration of some kind of libraries for JavaScript and other things like that. You can play with them. You can see how people create projects, bigger projects, how they use some kind of libraries. But we will focus on HTML5. Note PHP, because it's not a course about PHP, HTML5, but it's not curse about HTML5, you might think also that's true, but HTML was created for forbear, all browsers only for browsers. And JavaScript is also created only for browsers. In order to run the JavaScript code, you have to connect it with the HTML5. So you have to create an HTML5 application, okay? And in addition to these, HTML5 brought to life well many new tools which are called functions and that are also very useful. So we are going to create HTML5 application. You can choose the HTML5 application with existing sources. If you have existing sources, use desorption. If not, use the first here. And now we click next, as you can see here, now we have to type the project name. You can also choose another look, look location if you want to change it. But Well, in my situation, we're just naming, for example, JavaScript Angular project name. You can type you whatever you want. Okay? So I will click now only finish. And this is, you can see it created for us one HTML5, which has goods here, some kind of comment and title and meta tags bolder. And well, we have to now come on up here our JavaScript file, which will do in next lesson. But in this lesson, I will also create a structure for our JavaScript file. So how to do it? I will get here, me, click right click here, and then mu. And as you can see here, we have got many type of files that we can use. We can create folders. So for example, OKC folder. And here I can type the name of folder, and now we call it JavaScript js, right? These are shortcut. And well, why am I doing? I want to keep all the files in one folder that are connected to JavaScript files. Why? Because, well, maybe at the beginning you will have only 1-5. But the truth is that in the bigger projects you might have many JavaScript files. And while you might have also many HTML5, PHP 5S, some template phi, some configuration files, some CSS files and other things like that. And then it will be hard to spot them, right? It will be hard to maintain all this code. So it's good idea to keep JavaScript files in one special folder, and that's how we do it. The same like you do when you have CSS, right? You have got the special CSS folder where you keep your CSS file. So here we are going to keep JavaScript files. And in order to create a JavaScript file, you click here and right-click New, and then use the JavaScript file. When you do it, you can now just type the name of your JavaScript file. You don't need to add the extension ab.js, which is for JavaScript. So now we can type, for example, screed, whatever you want here, right? This is a filename, but well, it should start from the lower letter will, all should be low, low, lowercase. Okay, that's how you should, you should call your a script. Now let's just click finish and you have good. Now the Javascript file, as you can see, is empty. You can, you have got some kind of change this distance had analyses like that. This is called a comment. I will talk about it in the next lesson. Lessons. So this our first JavaScript file, and you have to now just connect to it from the HTML. And we'll do it also in the next lessons. But what I want to say also in this lesson, well, you know, you could create this, all these things manually. Look when you go here to the properties, as you can see, we can go to the project folder. I would copy it, and now I will paste it here. And as you can see when you go here to the public HTML, we have got here the CSS, JavaScript and indexes index file. We could create them by just creating textFile and saving jazzy as an HTML or as the Javascript file. This is just typical. Nothing else, nothing special files, right? You can create whatever you want plies and it will just run. You can now open this. Think pretty easy. In order to do it. It's just double-click it. And as you can see, it opened inside the web browser as you can see. And it's working because he's an HTML5 and JavaScript fear is gonna be connected by us in next lesson. And it's going to also run in our browser, right? You don't need to add a special server for it. It's just going to run inside your browser. And you don't need to use the net means you can use whatever you want. These the sample structure, this is how you create a project. And well, I invite you to the next lesson. Thank you very much. 5. Useful shortcuts for Web Developers: Hello, everybody Today are we show you the most useful shortcuts used by Web developers and programmers. Well, all these short cars are gonna save you lots off tones off time. So it's like must to know things. Okay, you have to know them in order to save loads of your time. Why developing websites or programming? You know the plant of situations where you have to move your course or so Iran and instead of it you can use the shortcut because you have good keyboard you're typing in Cuba, and then, you know it's hard to move your hands to the mouth. It's taking time and always maybe 12 seconds. But but imagine that you are going to spend lots of time writing the coat. It's gonna save you each day. For example. I know 10 minutes and when you multiply it that 10 minutes by the wall year, then you have got loads of time, right? Lots of time saved by knowing these shortcuts. So Okay, let's begin our adventure. How to save the fire instantly. You know, I have got even a habit right now like that when I do something, I will just counter plus safe use the short cut cut like that. And I just say instantly, you will not ease when you, for example, watch next videos that I been saving instantly after changing anything. Why? Because we're you know no, every editor. Ah has got something like, for example, saving automatic Kelly. When you lose your for example power and you can lose your work Eso it's good idea tohave habit to doing something like that. And in addition to these, you have to save the final to see what change right, for example, in the brother. So I'm just saving instantly after every change, that's just ahead. So it's very good. A good shot next to us. Got our country plus C and counter plots. V well, you can copy and paste things. For example. I want to take this thing and I want to click enter and counter plots V and well, as you can see, I just cooperated. So it's going to save your time when you want to copy something and change, for example, or something like that. Here and then again, huh? I want to just cup it on bomb here. As you can see, I called by a company that beat faster because I didn't want did something like that counter plus e. And then I didn't use my mouth. I used the end shortcut whether a king on the keyboard and then I could enter encounter plus V So again I didn t smiles. I did it a bit faster. And now look, I would do it even faster. I'll use the shift plus home country plus C and enter counter plus V right, And now faster Bom bom bom bom. As you can see, it is taking very small amount of time, right? Instead of doing something like Mm ah Mm. Right. You're saving laws of time by doing things like that. Okay, now is a cap. The card is used, for example, when you want toe cut something out. I don't want this titled here. I want to cut it, and I want it to be here. Right. Um, it's like a copy bodied scouting get from the place. We are complying, but well, you know, this is not a good idea to have the title here. Oh, my God. I made a mistake. So how to do it? Well, I have to again cut it. Now I can use the counter plot, z, and it's gonna undo the things that I did that's critical and useful. Sharks got also and you can read it the action. So, for example, well, I was wrong and again so I can go back to this situation again, right? Using these counter plas y next very cool contra plus f You confined things as you can see . For example, I want Tosi where I type something like that. Or where is Dave? Instantly I can find things right. So country plus f country plus a is gonna sell like all your fights of, for example, who I want to just counter plus a this thing control policies occupying it. And I want to create a new Faisal new html five shortcuts HTM. And I'm going to cooperate here. Right? Okay, let's practice. Ah, the shortcut that we have. Just So for example, I want to create an hour orderly, so I'm gonna create something like that. Well, I wanted at the end. So how to do it? I could Selig it like that, but I could We could also use the shortcut that is presented later like, for example, shaved plus And so how when I do something that she plus and I'm gonna select from the carats from the blinking thing till the end off line And now I'm just cutting it because I don't want it to be here Contra plus X and I won't need it The end of fire. So here and I'm just combining. And as you can see, it's now not in good place. So I'm using the top, right? You can also use you. Can you stop to invent something you can use? Sheep will stop If you did Did, for example, something like that all the time. It's not good, right? So bam bam! And I'm the rights built. So we just ah, used to new shortcuts, right? Like that, for example. Okay, so let's now for use the at least item. So I'm going out the stuff like least I 10 and stuff like that and you can see it's not working good. I'm using the counter plus Z. I want all of these things indent indented a bit more, so I'm gonna just select all these things and I'm using top. As you can see now they are indented a bit more and I want at least item a bit farther. So like that. And now I want what I want at the end. Least item like that. I want this to all these lines. Apply it to all these line how to do it pretty fast. I can select it and I can copper it as you can see. Like that, for example, so I can do something like bomb balm. The problem is that, as you can see, we have got the top here. So it's probably good idea that to take it down to something like that, So we don't need to every time. Ah, do the inventing stuff and deleting. So let's something that and then just go down. Bomb home bomb home, home, home, home, Home, Home. I'm using the key home. Right. So I'm going to the begging off the mm line like that. And well, I did a bit faster, right? Because of it. And now I wanted the answer. I'm just taking this on dress, typing that And so I'm at the end. Bomb, bomb, bomb bomb. Um, and we did it a bit faster, right? Instead, of doing so. Effect these just slow. Okay? And now we just want to Internet bom bom. And we've done our work pretty fast. Of course it's gonna be so, so injured Job escaped later, but that's how it works. You can, of course, sometimes want to copy the line and well, you can do it two ways. You can do stuff like home shiftless and counter plus e and enter and enter as you can see what a country plus fee as you can see. The problem is that sometimes you have got the Indians because, well, I just did a home and but I type two times home. Then I went to the end and place and then to the beginning, and because of it I compiled the end. And also But it's taking some time also, right? You can do it a bit faster by using control plus Chief and Roky down. It's getting now in combining all these things done Pretty awesome, right? So that's how we do it. You want to copy things down? Unlikely. You will not have this shortcut in every possible editor. OK, this is not available everywhere and next thing is Well, I want to, For example, do something in the next line. I'm drunk. I just click shift plus enter. As you can see now, I don't need to use the mouse to go to this place. I can just shift was enter and I am here and I can just type in the next line. I do not need Teoh, you know, do anything else later. There's a SoCal shortcut to jumping from the beginning and to the end to the end of fight control. Plus come and control Plus and you can off course also, for example, select things from the beginning to the end. So, for example, I I'm here, for example, right. And I want to delete this comment You how to do it. Well, I could do it by shift and doing something like that using the arrow keys. Or I could do something like shift plus control plus home. And now I am at the beginning of the fire on I could use the shift to de select one line with the Roki down and then did it pretty awesome. Isn't it on? Well, as you can see now, we just needed this thing could go control plus chief. Uh, and and as you can see now, Arkansas, like all these things to the end, I could just copay did another file, something that right When you go to the script, you you can also notice that there are things like cold snippets and you can do something like, for example, type a L and then use the tab lighter. And this can see now it instantly generated for us some cold. There are lots off stuff like that that's going to see is generating for us some cold. We talk about this cold later, and But if you want to find out more about snippets, you can go to tools options to the CO 10 places you can see Now, here you can fight things about HTML. You can find things about JavaScript, and you can well create on your also some snippets. And it's gonna also save you time. Not all the leader said snoopers, but as you can see, if one of them has something like that is gonna save you some time. Sometimes you want to, for example, also select Nope, only one let later letter by using the ship and Roky you want to select? For example, Full David, once I'm gonna use the counter plus shift and the arrow que left right, as you can see, then I'm selecting world one by one. So you can, for example, how I want justice content. Okay, Sign doing something like that. Bam, bam, bam, bam! Counter plastics. And I don't know if every day any more right, you can bomb and it's gone And his bag Because I use the kind of blood See right. You can use shortcuts to increase well to decrease the time needed for the web development . I really recommend you to well, practice all these things to, for example, print all these things. Ah, on your company on your printer so you can, you know, check them out, learn them. And after a while you will notice that you're saving lots of time because of them. I really recommend them. This was a bonus lesson and have a good day 6. Embedding script on site: Hello, my friends. Today I will show you how to embed Java. Skip scripts on your website and in the same time I will show you how to do it the way that we mega website load really, really faster. It can even save about 1 to 5 seconds. It depends on how big your website is unloading spit. So it's very important to do it properly. Okay, so how to do it? You can insert your coat in bat to the HTML internally or externally. I will show you now the internet way How to do it? You're gonna use the script, talk like that. And then between the opening and closing talk, you just type the script. So, for instance, every type alert and then I will just type that This is the most simple script. It doesn't matter. What is it? What is that function? What is this parent? Is is what is that Aled Things around here that semicolon other things like that. We will talk about all these things later. Just think about this is a script that's gonna alert the person on the website and say test . All right. Hello. And now when we're on this lookout. When we use this feel, we want to choose the browser. I'm treating Firefox and night Greek play. As you can see, we have got here now. Hello? The window. Think hello? OK, and doesn't concede. Then I can see the content off our webs. Okay, so that's how it works. We have good script that is doing something like that, and that's doing it internally, right? You can also put this creep lighter. So, for example, here and there are some differences between because off it. But first, let's think about even thinking about putting something internally These very rare situations. When you want to do something like that, you want to do things like that very rarely when you want to put something into the screening that exactly place and the only in that situation. Why? Because when you do something like that, that couch is not gonna be cost. This is the world cashed. Okay, It's not gonna go into the cash, which is a temporary memory off your browser. And because of it, this gold is gonna be loaded each time the user go to another side of your website, so it's gonna slow your website that All right, so it's good idea to have it in one place. So, for example, like here on, Well, we do it like that. So we want to the coat to be here. We don't want it to be like that. And we want to import it how to do it that well, we can do something like type something script, and then we can use the attributes as are seen from which stands for source. And here we tied the source. So, for example, like that. And now we just imported this fight here. And when we refresh it, as you can see, we can still see Hello here. Brady's right. So it's there external way of doing this thing in old HTML. We had to type your also something like type and say that it is that JavaScript script by but by default fold. Now the script is javascript from scenes the html five. Ok, you don't need to, um, think about things like that animal. But there is a swell still one small problem. What is it? Well, look at this. When I really love this website against hello And then when I click. OK, our website content is loaded When I put this here. As you can see, our content is already loaded And while I can see then Hello? Why? Something like that happens because, well, I would tell you know how exactly your weapon is loaded. Firstly, you as a user would connect to your website and then you would download your HTML files. So for example, index dot h dot html And then something What is called a part, sir, we just processing and interpreting everything inside. So, for example, talks when it meets something like script, it stops totally executing while parsing other things. So if the script is here, it will go toe html. Also, it is an html document. The head also, I have got here additional information of our of our website off these websites. Oh, a title. Okay, so I have two dead. The titled for our use. Their okay. Oh, he's using the car Sit like that. Vieux port. Also, this is for Web responsive Web design and oh, script. Okay, So before going here, I should go and execute everything inside it and then go to the ball. This section and now you might be like Hey, but these just one line it's not gonna slow. It doesn't matter in that situation if the website was like that. Okay. But now imagine that your website is really big. Okay? Really? Really Be There is, like 500 of coats and you don't have only one script. The dark joyous you have got here like 50 off them. What happens? Wow. Imagine now something like that that it would go to all these scripts and then after executing all the things inside, it would load the happened. What would happen? What? Your user would just not see almost anything, right? And after loading everything, then he would see the content of the website which is very bad, right bread for our users. He would just leave probably our website. We cannot allow something like that. That's why most people just pulled the scripts here. But there is a small problem because when it put scripts here, we do not download them instantly. Right? So when the content of the website is low that it's gonna be loaded down, right? It's not so bad most situations, but well, imagine that their manuscripts also so then they are. Don't know that a bit later. So that that's not good, right? And sometimes the scripts are doing something with the layout of your website. So they are changing something, the calorie stakes, other things like that. They're moving something to other place. And now imagine that the user with the script here would just see the content of your website. And this content is gonna change. And his eye eyes, right. He would just look at this website and it's gonna change when each of that genius kid fight is gonna be loaded. That's also bad. So Well, what to do, How to how to change it. Some people would put something scare some things here. Yeah, but because off html five, we have got something. What is called a new attribute with this, which is called, I think, which stands for S and cronies. I would type this world here as Syncronys, right? And well, it means that the script is gonna be loaded in the same time when or other things are gonna be loaded, right? It's not gonna wait for the script to be executed, which is by default how browsers are loading your site, and it's just that all right, you're just putting this thing and everything works fine. But because if you have more than one screen, so you have something like that. Skipped one skipped straight to script free. And for example, um, your user will download this one first it's gonna be executed first. It is not gonna be executed then, like days. Then days. Then these, then bomb, bomb, bomb, bomb. Right. Because of it, it's good idea to use the world like differ, which is the same as S N Koreans, but it's gonna make it run one by one. Okay, it's gonna wait for the scripts to execute in that order. So when I do it like that now, you can see when I reload these website, we can see that the content is loaded and we can see the Hello, Right. It's working like that Now, if I remove these world as you can see, we don't get content. We have got content after peaking. Okay, so this is the best solution. You can have to do something like that and I suggest you to have all fight well. All screams in external source, right at because, well, it's easier to maintain your code than right. You have got the Java scraping, another fired steam. Another fights of is easier to maintain. You know, where is your scripts? It's gonna be cashed. So it means that your website is going a lot faster on Dwell. Ah, you have to also remember that do not toe create too many javascript files because if you have many javascript five well, it's easier to maintain your project. But the website he will also load slower because if you have many JavaScript, if eyes and h the http protocol is allowing you to only download about to fight at once, it means that they are gonna be many requests to your server when the user is visiting your website on because of it. Well, that because the requests are the slowest things because you have, you know the user have toe connect to the server, where is the website and then go back. This is something put is taking the longest time. And when you have manage of us, keep files, for example eight. You have, like, four times, something like that, which is maybe sometimes when the Severus very far. One second just for, you know, not downloading, but just for connecting. So it's taking loads of time and because the video website is gonna load faster, so the best website will be just one javascript far. So it will be great if you had manage of, ask it fights and then to maintain your Cody's here and then at the end, when you want to put them at the Web Web server, you want to connect them. But, you know, connecting something like that every time when you change something, What we do takes much time so much time. Most people do not do it. But you can use something what is called grand jury s, which is a task manager that would do it automatic California. I have got the course about this thing also. But if you want well, you can do it. Also, some manual, right? Okay, so the best think too smart is to put the script here in the head because it will be the first test. But you have to remember to put this key these attributes otherwise and will not be the house and well, you can check. How is it supported because no, it's from html five. You can goto it cannot use dot com and type your Essen Cronje's. And here you can type your country and, as you can see when we go to, for example, Internet Explorer. Um, well, Internet experts six and seven is not supported eight and nine. As you can see, Firefox's all five foxes are not supported. But when you add all these numbers, it depends. Where will you leave? Right? It's probably like 23 people on 100 coming to your website that be not supported. But you need to remember that you are helping all other users to load your website faster. Right? Well, they will see your website and the way did you put it here, Right. But you will make enjoy your website more for users with than you with the new brothers. I think that user that Devil Brothers knows that I don't know the enjoy as a hot Ah, the Internet as the guys with the new brother. These you make them change it faster. Your website. We'll load anyway. Okay, that's going that lesson. Thank you very much. 7. Basics of JavaScript: Hello. Today I will show you the basics off JavaScript. In order to understand JavaScript, you need to know how everything is execute. Well, this thing here is a script. It is a program. When what is a program? Well, a program is a set off instructions that must be run by a computer. Okay, so and that's it. In our situation, we have got here some instructions, some white spaces, white spaces are enters and top ally, it's yours and spaces and other things like that. And to use that Coleman. So all these things must be interpreted by something. The's program is called the parcel that is interpreting these things and they must be executed. And all these instructions are executed by the browser. And, well, the browser executives occluded by the PC. But I overcome personal computers, right? So everything que is gonna be executed from it's very important from top to the bottom. So you interim every bird that you need toe read everything line by line, and you need to remember the devi um hey, chametz like it's your fold. Okay, because, well, everything here, the syntax. So the way you write, he's gonna be interpreted by the parcel. We need toe right? Exactly. In Hiss language, right? Otherwise, you will have problems. Okay, so let's try to explain how this got here is gonna be interpreted by parcel. Let's imagine that I'm a part sir. Okay, so I am at the top. I just loaded the script Dog Js and I'm gonna execute this fight. Okay, so wow, here is a backslash. Okay. What is next? Oh, here's an asterisk, son. Oh, so everything after this is not gonna be executed to me until I met Until I meet the next asterisk and the backslash, this thing is a cold. This thing is called common. And this thing is not gonna be executed. It is needed if you want to, as it say's Coleman something right? You want to add something today? Fire that is not gonna be executed. I'm talking about the late later more and they're like, have some way spaces I do not care about. This is and whoa! Here is something. Here is a key work. It's a que water. It's important word that means something to me in my language. I'm javascript parcel, and this world stands for variable here are die bit. So this is a place that can Very. And it's label its name is X and I food there by using this Hein five. So I put five into memory and this is an instruction. This instruction because I ended it with Sam ical every instruction, every you know, I think that you have to do I think that you will think that you tell your parcel to do It's called an instruction, right? And it must be ended with the Sani column. Ah, and then you have good next variable and then you give white space and then you say, Hey, I want toe alert people on our website that it is 11 right eggs, plus why five plus six is 11. So this is gonna be interpreted by me and then executed by the bras. Um, because everything is reading proper body. I could make me sticks right Like that. Well, look here instantly. I I have good message that it's wrong. Something here and that you can see now it's not working here. Know them. The more so you can't you ride anything going on, right? You have to ride in the language we just could JavaScript and we learned the syntax of Java skipping. Next lesson. I would talk about vory booze function, other things, much more. So don't worry. Right now, I'm just telling you how everything is executed. And look, now we have got here as Sammy column, and I would type you the Enter and Hugh Andrew and here and here and feel with this thing. Grand, as you can see, is running instantly like nothing has changed. If I was a person, I would have problems. How is it working right? But for the parson, doesn't matter. Even make white spaces. You could have everything in one line, so we can. You can even mean if I this JavaScript later and we no matter at all, you will have smaller, fine, right, but for you in order to a mating pretty easy to cook, Clear coughed usual make spaces in some places. So, for example, do not do something like that because it's harder to read later. It's better if it's like that. You can omit most time in Java street. Nothing, never programming language. The semi column. So the information that this was an instruction as you can see it's still working. But it's good idea to place this semi colon here because, well, it's easier to maintain your coat. It's like, you know what you are doing right? And it can sometimes verily make some programs some errors. So it's good idea toe. Exactly right. Programs like I do. You will see next lessons how I make the tape tabulator. So the Indians, right? You will see how how I typed for things like, for example, spaces because space here is important. But space here is not. That's some kind of conventions. And try to just write things like I do and you will have a nice clear called that everybody will just love. Okay? And this is very important because you as a programmer, we work with people later, right? And they will want to read your coat. And you know, even you if you read nice called after, for example, going back to your coat after like I know one month, even last, you would not understand everything there that's got programmers work. He just do something and then you forget most time and well, it's good idea to just write things properly. Nice beautiful. When they are like that. You just come back to your car and you instantly recognize you. Remind yourself what Waas all the things about, right? You just come to your cul De Luca did it and Wow. Okay, this world like that. Okay, so that's how things are executed. Remember? One line by lot by one from top to bottom. Most times there are some extra expect X exceptions that I would talk about in next lessons . But most time is like that. So remember that well, it did something like, for example, that you will have problems like not a number, because it's not one by one. So every time you make a music, something isn't working. It's only your fault, Remember, Because you have to write in the job Oscar language like where it was expected. Okay, the zone. Good lesson. Thank you very much. 8. Comments: Hello Today I will tell you what are comments and why are they so much need it? Look, comments are used because sometimes you do not want to execute some part of your coat. And as I said in the last lesson, when you do something like that, it's not gonna be executed. It's not gonna part right. It's not gonna be right when your parcels see something like that and he will then just wait for something like that. So this is a multi line comment you don't need Asterix between. This is just something that is added by editor. You can just type your things and all of them doesn't matter. But if they don't not matter, why do we even add them? Why? Because well, look, even here In the last lesson, I created also single line comment that was not interpreted, Why I edited because I wanted to tell you that you know that variable stands for variable. So what is the purpose of this common? Well, I wanted to explain something, So if you want to explain something, you should use the comment. If you want to make your coat easier to maintain, you want to use a comma. If you want to test something, you want to use comment. Look, you want to also use comments when you want to set listens for your, for example, JavaScript. Find as you can see, to change this license gather you don't need to go to somewhere, and you couldn't change it to add to average of us. Could fall your name at that, Sarah. So you can make it to inform about something. But you might be still wondering why it will be easier to maintain cold like that because, well, this month's move off this very small. Now imagine. Imagine the situation where you have got, like, you know, 500 lines of code and you wrote, You've just written them and you're proud of yourself. Everything is working fine, great. You understand everything. But then you just go away from this project and you go to another project, another project, and then imagine that you are going to back to this project after like six months. One year, two were Stein. And then when you go back, I guarantee you that you will have emptiness in her mind. You will not understand anything. Almost Well, you, of course. After some time, you will understand the code, but it will be after sometime, right? You have to teii time to understand it. And then things like X variable is used to blah, blah, blah, blah. Blah will be very helpful. These these function that something like that. This mom, that's something like that. Things like that are gonna be helpful to you and in the same time, remember that you're not writing on Lee. Always called for yourself. If you are going toe work with other people, comments are gonna help. Also, the people who are working with right with the comments they can adjust. Read some Redick comment and they will understand your coat, Foster. Right. So it's something Teoh. Remember? Remember that you shoot, create comments in order to major coat. Easier to maintain and make it clear to everyone. Note on Lee, others, but also for yourself. Because of it. In the future, when you go to back to your project, you're gonna be happy instead of seeing a disaster. You said off not being able to understand things there you were just instantly. I understand everything, and you're gonna just change the thing that you had to change. Okay, so that's only the lesson. Thank you very much. 9. Variables: Hello Today I will tell you what is variable how to use it and why to use it. Okay, that's very important. Topic one should be used something. What is good? Okay, let's start from how to create it. In order to do it, you type a word var and which stands for a variable. Right? So this thing informs our part, sir, that we gonna create some variable. It means that we gonna store something and our memories under the name that well, now show you name off variable. So this thing is just a place in our memory. So imagine it's something like, Ah, container something were something that you can put something that right You can put there any value you won't. You can story you can changing that Look at the name of variable Couldn't be like very able . It is able to very right So you can change this value all the time you want. You're creating a variable under the name like that and you can change it later whenever you want. And when you change it, you make it can change and all places at once changing it in the top. For example, of your program because everything is running from the top to bottom. Right? That's great. Okay, But maybe I could show you some better example. Off course I will show you, but let's start from now assigning something to this variable so I can assign instantly something. For example five. And I couldn't know send into with the alert name off variable. And when I refer, she's as you can see, I have got five years. I can change these value. I can change it to, for example, free Because I change it here. And because of things around line by one, it will be now free. Right? I could also do something like that. And also do we work? Okay, when I don't does something like that, as just can see, we have undefined. It means that nothing was put you right. Okay, But you are probably right now Why even bolder Using something like variables? Because, well, I could just no do something like that, but just type five and everything works fine everywhere, Right? Well, there is a very good reason. Let's imagine a situation like that in Europe would have got the tax. Yeah, and it's killed value added tax. You can shortly pipe something like that. Value added tax and you just added to the value off your problem. So, for example, we have got a variable that we re present price off shoes and I would type here I am 100 and I have good price off T. V. Okay. And I would type who? 959. And this price is the price. Without the tax and this is a net price, it's called net price. Okay, Net price. Net price means it is without the talks. And now I would like to count. How much does it goes with the add value at attacks? So I would do something variable girls price off shoes. And now I would multiply 100 by 1.23 I would do the same thing to the girls price off TV, right? And now I would type you 915 9 As you can see now, if the price changes right, I would need to changing both place because of it. I can use something like that now when I change it here, it would change also. Okay, but this is just one occurance of why even bother? Right? But what look develop value of the talks that we added here that went free person is something that well can be changed. Um, in many places at once, right? If we change now, the value of the tax because our country changed it, would you change it into places? But well, you could count it. We've many off these guys, right? With men off products at once. So you wouldn't to changing that replace something like that. So it's good idea to create something variable vat valued tax and type 20 free. And now you could know Do something like one plus. Ah, if you want to achieve 0.23 you need to multiply. Ah, 20 free. So the thought by one 100 right? So one plus one 100 multiplied by that. Oh, and this signed is used for multiplying in the JavaScript welling mom on a programming language. And now we can do something like that. Okay. And but we can show it also girls price of shoes. As you can see now it's 123. Yes, 100 well deployed by 1.23. It's 120 feet. It works fine. We can also show the price of TV. Everything works fine. So now when the valve is changed, you can just do it here. And it was instantly change the price, right? And, well, this one use it off the variable. But look, here's an operation which takes time, right? We have to multiply something than at something. And this could be just starting another variable, which you can call, for example, calculated, provide. And we could do something like that, right? And now something like that and everything is gonna work also fine. We cannot change only this value here. But the cool thing is that now that calculation is just done once and it start inside the memory, right, it doesn't need to be redone. Everything. Of course, it was done on the two times. Just know since it was expected. But imagine that it's done like 1000 times. Then it's great to just story, because why? To calculate everything to every time something like that, right? It would improve the speed of the script. So because of it now you can see why variables are needed right, And they are needed because you want toe reuse your value somewhere. Um, you want to make your program? Maybe also more self descriptive. You want to calculate something because it takes time and we use it. And well, there are some conventions off naming Varaiya boots, as you can see. Look, I named our variables like that small letter, then the next workers good capital letter Capital capital and these the conventions of how to name variables there, then easier to read. The code is easier to maintain. So remember to name your co your variables properly. They must be self descriptive. Okay, you should also know that the size off letters inside very booze martyrs It means that if I created two variables, for example, like that they are two different values. 20 free onda we big letters 20 right to different one If I do something like that. Uh right that as you can see, it's not 23 because we change these Valium above everything is remember executive from top to bottom. So let's tie bit the size off letters inside variable variable name matters. It's very important because it might lead to some problems right. You can leave me six because off. So what other mistakes you can make? You have to remember death. You cannot start name off variable with the digital. It means you can do something like that As you can see. You having something? We're warning you because when you type variable, you are expecting a name of variable Know the number I'm number is just something that can be count. And the next thing you should remember about is that you can't used as the name keywords. The key words are just something vory were variable all right. The things that our powers by by the partner and they mean something to it. They are key wards, so variable function function these doesn't reserved You can't use the river. Serve what you will see many reserve wars later. You would just know which one are which you shouldn't use the spaces So variable value added tax calculated blah blah. As you can see, it doesn't work. It is expecting something like coma. It's stuff like that. It will work because now we declared, which means we created 1234 variables at once. OK, but we've with spaces he just doesn't that parts It doesn't know what you are just doing, okay. Do not use paces in names. The next thing you should remember about is that you shouldn't use operators in the names so you can do something. Variable var value of the tax plus calculated something. It doesn't work, OK. It is also a good idea to know that there are man of variables types right now. We were just adding some numbers were multiplying them. But there are many types, so types off variables. And now we know what numbers they are Muslim called in teachers. And now we will know something like string, which is just it continues characters. What does it mean? Well, for example, I want to say variable name mining our car dish, right? In order to do it, I have to use the double coat or the single quote because we're parceling to know that it's a string. It's a correct its characters. Right, because when I just looked like that, he's like, Well, these not declared. This is some kind of a wry booking toe, you know? D for different things, like the name of variable on from things like values like characters. Because of it, we need to use single coats or double coat, and it doesn't matter. In JavaScript. Which one you use, just matter of preference will just stick to one you have got. Also something world is called bowling, and it's true falls. It's just saying, if something was true or not, you are going to use it with the conditional statements that we'll talk about late. There is something like a raise objects. This is a bit complicated topics. We also talk about it later, and you have got something like no, which means that something is empty. You can just ah, initialized. Which means a sign toe the variable, for example. Uh, no. Which means that there is nothing right now, something like that might be needed if you want to. You know, check if something was assigned later in the other code because you know your call may be very long and, well, it's hard to describe right now why to use it because it's a bit complicated in a bit more complicated programs. So just know that very something like a new you have got also something like, I'm defined. You have notice it at the beginning of our lesson. When you do something like variable A, it's undefined right now, right? Because we didn't assign anything to eat just undefined. So to sum up our lesson, the variable is something that is able to vory it means that we can store there. We can assign them values, and we can change them later. In order to create a variable, we need to type very far than the name of variable. Then we can assign their something here or maybe later. Change it on and variables are used because your program is then more the script. If because you can do some expressions, you can do some kind of calculation that it's gonna be still and is gonna speed of your program, you can reuse your coat later. Easier because you can, for example, change then the value of the tax something else pretty easy. And it will be changed everywhere in your program in something which is also recall using toe. Remember, when you're creating variables toe name Dane so they are self descriptive. Because of it, your code would be easier to maintain, not only for other people but also for you. You should remember to name variables like that. The world started with the small letter and then the capital Let letter for every every work, right? You should also remember that the size of letter inside variable named matters really reading Bolton. And there are things that you need to remember that you cannot call You're variables life and that Well, you can start many types inside off variable like, for example here. So we can also see our name, my name on my starling. And you can also add text to each other. That's something new doing something like name plus surname. So plus is used toe add two strings We can add, for example, space between it. That's something that it's could see Now we can see my name and sovereign so we can operate on variables. You think some kind off operators? Okay, that's willing. That lesson. Thank you very much. 10. const - constant variables: Hello. Have you noticed that there is darkness in our editor? Yes, I've changed it to Visual Studio Code. You can use an IDE editor. You want to create web sites. Okay? So today we are going to program in Visual Studio code. So you can see that there are different options of editors like e.g. Visual Studio Code. Well, maybe it will be the one that we'll use later. Let's talk about the const keyword. Const keyword allows you to change the variable into something that is unchangeable. So after you set the first value, the first one, you can't change it later. When something like that would be useful. Let's start from less practical example. Then we'll go into something a bit more practical. So let's say that we have got pi. Pi is the MOF constant, right? And it's equal to 3.14 or even a bit more precise version is like this. And when we alert the pi, we're gonna get the message like this. There is a problem because now we can change it in the middle, e.g. free. And to be honest, when the program is so small, we can instantly see where it is, right? But your code later might have e.g. 500 lines. And if somebody does something like this, you go not be screwed. You will not be, all your calculations will be improper because this is not the same as this thing here. And that's why we can use the const keyword instead. And now, when we change the value, as you can see, nothing happens, we do not see alert. Why is that so because there is an error in our JavaScript when you use the shortcut Control plus Shift plus I in Firefox or control plus shift plus j in the Google Chrome. You can find under the tab console, the console of your web browser. And if there's an error in JavaScript, you will see it here. As you can see, ankle type error, invalid assignment constant P. It means that you tried to assign something to the constant variable that you cannot change. It's unchangeable. After setting the first value, you set it on the ones. You can't change it later and we get an error and nothing after it will be able to be executed. So the alert or an anecdote here right below here, this code here, here is more code. It won't be executed. Okay? So this just stops the program. And it means that, well, nobody want Program only alone. Nobody will be able to make some mistake. Okay, That's the first thing, is, let's go into some practical, more practical example. But before we go to the it, look, you should always call your variables that are constant using the uppercase. So I will hit the F2 shortcut. I really liked this editor tool because you can change in every occurrence. The name of variable. You just hit the F2 and you can change the name of in every occurrence. I didn't need to do it manually everywhere, right? So I changed the constant uppercase because you show by having it uppercase to every other programmer and also yourself that this is a constant variable, okay? You can instantly now distinguish the constant variables from normal variables when they are used later in the program, right? Remember that there is, there can be more lines here when we use Pi, we can instantly see, okay, this is constant. And when somebody do something like number or this is not a constant, right? And the practical example of using in JavaScript something like the const keyword will be e.g. maximum score for the game that you are creating, right? Then. Value-added tax, e.g. Great Britain. Or the maximum post length for the post that somebody can make on your forearm instantly. You can see, notice all of the letters are uppercase. We use the underscore when there is more than one word, right? And later when somebody uses something like the OU, so this is constant, okay, So if I want to change this value, I can do it only from one place where it was initially set, right? But I cannot change it later. This is the value that I can look up very easily in one place where all constants are made, e.g. right? So this is something that was created to increase readability of your code and to make sure there is less mistakes made in your code. So if you don't use it, nothing bad will happen. Well, maybe they won't part with the wheel. And your code will be less readable when you don't use it. Use it when you feel like that the variable won't be changed later. That's only the lesson. Thank you very much. 11. Relational Operators: Hello Today we're going to talk about the relational operators which are most time called comparision operators. Well, what does relation when you have two people and they are in relation? Well, they are connected to each other somehow, so we can compare them to each other. And when you want toe relate to things to each other, you compare them, right? So relational operators are used to compare toe variables. And you might be asking why doing Indian needed when we take something like variable A equals five on, then we tied b equals free. Then we know that here is five and here is freed. And why do we even need to compare them? Well, you need to compare two variables because, for example, sometimes your ver a boost are assigned from the website content. You're not typing here exactly five, right? You're just taking the content of your website and we learn how to do it later and inserting in here, for example, when you are creating passwords and then the passport February, where the user has has two retired the password you want to compare if both these passwords are the same, right? So he by mistake. Do not type something wrong and then he would have probably cause his possible. We will not work at well, right. And that's why you need something like compa reason. Right? And we will use traditional operators. So the first traditional operator is to equal sign. And this is just comparing two things. If they are equal to each other right on. And you have toe. Really? Remember that you have got here two signs. Not one because one sign is used for a signing something right? You want to assign like here five to a when you take something like that, you are comparing these two things not sank. Okay? And this is very typical. Here are the most beginning. Programmers are doing so really remember that this is not the same as this, right? So how to use it? We will use it in the alert command. So we allard, for example, is five is a equal to be something that and as you can see as the result, we have got false because well, free is not equal to free, as I mean five years not equal toe free. And as you can see, the false is the bowling type, which is true or false. And so the result off the relational operators is a bowling bowling time. And you can use it later in the conditional statement where you will say something like, if something like that equals like that, then do something like that, for example in for that, the user that the passwords are no the same or something that, um so and this is the basic traditional operator. And you, as you can see, we have got here warning it says expected free science like that. Why the do we need to type free here and what's the difference? As you can see, the result is the same. But when you type stuff like that, it checks. If the two variables are either anti call, okay, it means that they have to have the also the same time. Variables must be the same type off to. So right now there's a number, and this is a number, and when we do stuff like that, we have got here, too. But sometimes you can have you a string on and then it's gonna be false. It is good idea. Toe have something like that because you might. But by doing it like that, make less errors. Okay, But if you know what you are doing and you know how things are working, you can pretty easy use just to sign. But it is good to do something that you have problems that, at least at the beginning OK, so that's the difference. You can also do stuff like and then exclamation mark and the equal sign. And this thing will just check if two things are not equal to each other, right? So when we have something like that East five not equal to free, they are different. Yes, they are different. So it's true. And if they are, um, the same, then we have got false. Of course, on, well, you have got also something like this. So if the two something is greater than something else lower than greater or equal to or lower than are equal to. So when we do something like a is greater than being no, it's not greater than being. It's false because they are the same when we do something like that. That's true because five is equal to be. It's all greater, but it's the same, right? So it's true and we can also do something like that. So when we do it like it like that, it's Tara. When you do it like that, it's false. When we do, it's like that. It's false also because seven is greater than me. Of course, you can use here and the other. You don't need to use variables on both sides to compare anything driving to remember. Okay, so doesn't Onley that lesson. Thank you very much. 12. Logical Operators: Hello Today we're going to talk about logical operators. Logical operators looks the same as the one that you probably know from the high school from the math lessons. If you know math pretty good, you will not have problems digesting it all. But don't worry, I will show you everything about logical operators. Logical operators are working on logical values. So they are working on zero, which is false, and one which is to. And for example, there is something like Nate negation operator, which is saying not. It means that if you have, for example, something like that, it will change the result to one. If you do something like that, their results to zero. It's just saying not false, which is still not to where this false right? And, ah, there is two more operators which are a bit harder, which is the conjunction and alternative Colin Junction. And you should call this thing and and these junction, which are sometimes it is called alternative. Okay, so how does it work when you have, for example, on your website and for with the password and the checkbooks for, for example, accepting terms and condition, you can sometimes won't a person to two tied both parts? World's the same. So you want to check it for password? Well, I'm puzzled. One equals password too. And in the same time you want to, For example, See if the checkbooks was so and he's checked and the number of checks or something that right You want to see if something is checks? Examples of is checked East terms project. So you want to make a conjunction with two expressions at once, Then you have to use the logical operator. And how does conjunction quirk when you have expression one and expression to you will get results like when you have zero and you know the results will be zero. When you have 10 the result will be zero. When you have 01 the result will be zero. But with of Juan and one, you will have a series on one, which means that conjunction is to Onley. If both expressions are two in the same time, which is pretty easy to understand because well, when you say I want to go to cinema and after it, I want to eat the ice cream, right? It means that I want to do both things at once, and that's why it's only through when both expressions are too. So in situation like that, this thing this both things would return through on Lee if the passwords were the same and in the same time terms were checked. That's why it's cool, because you can do something like that at once. Okay? And you have also something like like them these junction. But these junction walks a bit different. Well, these junction works like that. It means that when you have alternative way of doing something you're choosing. So when you have 00 you don't have an alternative. So the result zero when you have one and zero treating one from here, right when you have 01 interesting. These ones. So one when you have one and 100 treating these or day, so the result is one and the S s. So it's a good idea to write something like that. That disjunction is falls on when both expressions are false in the same time. So let's train the thing I would tell you now about conditional state and virtual ive. It's a conditional statement that you can used by typing something in parent is is between these two sides. Here you can type something like expressions, right? So when I do things like if a is greater than the then Oller to test And as you can see, when our program run, we have got here test. So this thing will only show if a is greater than be. It's not like that. It's not gonna show widow. And now we can check if in the same time, for example, B equals five. If yes, then show the test. As you can see, it's showing them our test. But when we change, for example, being the free you're not is that is a greater than being. Yeah, so we have heat one Truth is be equal to five. No. So you have here is here. So one and zero gives us work as a result zero. So it means that this hour is not gonna be shown if you used alternative that these Jonathan injunction you will not is that we have got now here shown test because one and zero gives us one. And you can change always the result by using negation. So when we designed like that and I used the exclamation mark Now would change the 120 right, because this thing is giving us one. And this thing is changing the result off 120 As you can see now, it's not showing us even though I'm refreshing this side. So that's how the operator wars. Of course, it's a good idea to use them on the more practical things, like something like that. But I'm showing it right now like that because, you know, we don't know how to get things from the side. We will learn all these things in future lessons. That's only the lesson. Thank you very much. 13. Bitwise Operators: Hello. They were going to talk about bid wise operators. Beatriz operators, as the name suggests, are working bit. But what are beats? Well, bit are an electric tensions that are coming to our PC, and they are interpreted as to state zero or one. So we they are jumping between zero and ones and they are jumping some funds because we have got very good processor and other things like that, and they are safe somewhere. Remember blob of them. There is much to the stop it, but well, this is just an information that is interpreted in tow. Anything that you can see in your computer can that things even here editor, another program. So we can work using the big wise operators on them, and you might think that it would be faster. Yes, it would be faster. But the problem is the JavaScript. If you are working with the pitch, wise operators is doing something like changing types off the variables that you're working with, and this is a bit slower. So in javascript you would like the most time avoid using big wise operator. They're cool in other languages, but here it's just very rarely used. So this lesson is rather an interesting fact for you. Okay, so if you're incarcerated, just skip these lesson. But a Wait a second. There is something you need to know. Look, here is an on person, one single one person bid wise, and it means that is very similar to the logical operator. A contraction that was looking like that. It works also very similar, but this one is working on bid. These one is working on logical values. And you know you have toe. Remember to know to use these one by a mystic, right? Because it would not be good for you. And you need to know where the big boys operators are used in the JavaScript. Well, they are mostly used when you want to come for something, but it's very rare situation because other languages are doing better. And very you want to do it by the job escape. And, well, when you want to do something with ports with the sockets, then you want to check for ah, something will discovered flax. We drugs, which are some kind of state. Steve, Something is, for example, opened no other things like that. So this is very, very right. So but it's cool to know how our computer is working. So if you have time, just watch this video. Okay? So how I wear, for example, numbers in real life that you are using which are a destiny which is in decimal system, are working when you die for something 126. The truth is that we are doing something like that one multiplied by 10 which is a decimal system, and to the power off, two to the power off to so in to the part of seconds of these mean that it's quite right. It's good square, so 10 squirt and this is what 100 multiplied by one is 100. So this is the truth about our system. And then just stuff like to multiplied by then plus six multiplied by 10 to the power off zero. And this is what when we do, like multiply everything. It's 100 multiplied by one. It's one then multiplied by two is too intense. So it's 120 plus zero. Multiple, uh, to the power of 10 to the power of zero is always one right. Anything to the para series one one multiplied by 66. So it's 126. So it's the same. Why I'm showing good things because we have got something. What is a binary system? And yeah, it is the thing that we're gonna work with using the bid wise operators. So 1010 for example. And this is right now no, 10,000 times. But this is something like one multiplied. By this time we have got another system, so it's too. And to the power off, let's count 012 free. We have to come from the right to left from zero to see which plays this. This one is at 012 free. So to the power off, plus on. And then we have got zero multiplied by the system to the power off the place where we are at the moment. So this times Teoh plus one multiplied by two to the power off one plus plus zero zero multiplied by two to the power off zero. So when candidate will see that we have got something like to to the part of card is a zero multiplied by anything is always zero plus. Why multiplied by two Teoh plus zero multiplied by anything. It's here. So you can see when you have got zero here it means that we do not need to care about counting anything. So it's gonna be a bit easier to count it here, right? We can do something like that and then something like that and it equals 10 in our system. Let's for example, dough it a bit faster. I will show you the short cut off this multiplying so you do it a bit faster. OK? Always this place who is one? This place is still this place is 48 16 30 to 64 it goes on Goes on. Why? Because not is that always we have to multiply by two to this some kind of power. And ah, here when you have got 11 multiplied by two to the power off. Zero is while multiplied by one needs one, right. So here it can be only one or zero in this place. Right? So it's one plus Teoh plus four plus eight If there is always one. But if there is not as zero. Ah, well, if there is not one, then we just do not need to care about this place, right? We are just moving forward. So when you get for example, these were just at a plus four plus two, it would be 12 plus to its 14 Pretty easy. So that's a shortcut of doing these things. And well, now let's use our predators. Finally, let's do it some kind of Ah Lorant, something like 10 14 and bid wise operator. We've done the bid was operator and is working the same like the logical operator, but it's working good on beat. So if you do not know the last lesson, please go back there. Ah, so it's on Lee to Onley when both arguments but expressions are two or the in debt situation. Both beats are one. So 40 how to take 14. And, well, it's 110 wine because it's a plus four plus two plus zero right a plus four plus plus two is 40. Remember how to do it? It's like here it's eating 1248 and you are counting later. Mark 10 is the thing that we did here and now if we are assuming dubbed right, we're doing something like that with the bid wise and we would have thought one and one gives us 11 and 001 and one gives us while 00 G's asked one, because one and one is having both expressions too. Right here we have also both expressions through and this is the only time when the conjunction when the operator and is gonna give you the one in other other situation you have could see. So it means that the result is stent when we were first. As you can see, we have got here 10. Okay, let's try another one. So the bid wise are so in that situation, we have good from one and 1/2 11 and zero gives us one because the alternative is false. On Lee won. Both expressions are false. So like that and because of it, we have gotten right now 40. As you can see, it's 40. And now you might be like bro, Really? Why do we even Teoh need something like that? As I said earlier, it's very hard to use, but you can, for example, use it as some kind of flax. For example, these one is saying that there is a user that has got previously privileges for posting. This means that he has got privileges for reading these means that he has good privileges for editing pose or something. That and with these things, some percent, or or the bid wise or the exclusive. Or you can make operations like the you can simply check what the user. Uh, what what privileges the user has Andi in sockets. You can change. Check if, If that's like a D supplements everything that right, you've everything going fine. Other things like that. And you can also compress some kind of fight because you need to remember that they've got something. Bodies called buys bites are dressed, continues eight beats, and you can have more than one by most time you have good, for example, was a number. You have got four bites, then you have got four multiplied by ad. It's 22 beats in one. So the truth is that this being it's looking like that and then you haven't you like 20 eggs? Zeros be for it, right? This is the two number, okay? And well, the zeros could be used, and you can compress the inserting human values on these how compressions Most time works. So because they are unused place that could be used and interpret later by your compress Or , um, you know the program to do you right? So that's good. That's that's why something like that these the used but of course in other languages is also faster. Unlikely in javascript it's not. Okay, So we have got a sore subject exclusive or we just working almost like that Bid wise are on bought. Well, that's something like that. Expression. One expression to results. So if you have one and zero, it gives us also one when it zero and one, it gives us also one. But when you have one on one, then you have zero exclusive or it means that I am exclusive. I want to choose only one thing. Okay, I don't want to choose to. So if you have zero and zero, you have also zero. So if you do something like that, it means that we go now have what? Zero zero And here one which means we have what he would be one, he will be too. And here is for so it is for as we refresh it. As you can see, we have got here for you can also move bits. The left by one. We just got left shifting right, shifting to move it to the right. So when we do, for example, something like that 14 on we move it to one place, for example, to the left. Then we will have what? This one will move here. These one, we move into the place off these one. This one will move to the place of this one before it. You have got zeros, right? So it will be something like 0111 Andi, it means he this one plus two plus four. So? So it's seven. As you can see, we have got 17. So it means that we divided 14 by seven. That's pretty interesting fact. And it's faster in other languages. But not in this one. Right to divide by two using something like that. And well, you have got also something like that. You can move it to the left. So then we have been 11100 So when you are moving to the left, imagine did we have got here man is euros. It's like, Well, I moved these zero to this place, right? And no, everything is just moved by what? And well, it will be 20. Why did I know it? Because I multiplied by to We can count it, of course. Also one, 24 plus eight plus 16 on 16 plus ID's toe Enter toe 24 plus 4 28 So everything works fine. And we have got also bid wise negations. When we do something like that, you could think that changing 11 zero and the negation works like changing 0 to 1, right? So it would be their 000 and one because of it, you would probably think that we would get So you're not that desiccation. We just use the negation off. You know, the logical negation. It's minus 50. Why? It's minus where he's minus as we said that our man is the euros. And if the 1st 0 he's changed the one and because we're using the name negation bid wise operator, we're changing all zeros of the results now everywhere one and no And on like 0001 at the end, right? The 1st 1 says that this is a number that is not positive. It's negative and, well, you know, somehow they have to. They had toe create something like that in order to, you know, show which one is negated with dryness, positive for for counting. And that's how they did it. And then it's just counting the big, different way. That's why, in negation is working like that that did we give you here negated in the number number not a positive one, but the has, he concedes, rather and interesting fact. Big wise operators are rarely used. It's good to know that they exist, Um, even, maybe only just to know that you, the dairy, something like single um percent and single bead wise are because you would not make me state by by using it not good way. And when you meet something like that and it will not be surprised for you, right when you meet characters like that in someone else's program, where they're using Advanced Stop is like, for example, sockets Okay, that's only good lesson. Thank you very much. 14. Conditional Statement: Hello. So they were going to talk about conditional state Conditional statements Are statements that can condition something and they are usedto perform different actions based on different conditions. And, well, when something like that is gonna be used. For example, when you want to validate your form, you don't know exactly what is gonna be tied there, right? You don't know if, for example, the user is gonna type the password properly the way you want. And then you can just send him an alert before he sends the form eso he will not need toe, refresh everything or retired everything again. Other things like that. He would be just informed instantly that something is wrong, right? You couldn't inform him. But we can only do it because we can condition. We can check if the variable is like that. If something on your webpage is like that, of course, right now we don't know how to get things from our weapon. We'll end it later. But so right now it would be a tear. It'd tickle exact examples, but at least he will know how these things works. Very good. Okay, So how to create a conditional statement simple one you can take if and then if you after. If you have got something like parentis is and inside it you put that condition okay. And for example, we can use the comparison operator like that and eats five greater than three. Yes, it's greater than free. And this thing is gonna return one. Right? Because if something gets through, is going to return one. If something is not true, is gonna return zero. And if that expression insight here is to, then the instruction below one line below is gonna be executed. If it's not true, it's not gonna be executed. So if I do something like that, as you can see, we have got here an alert. Why? Because this thing was so and because of it, it's gonna be executed this line of code when you do something like that. So here we have false. Now, as you can see, we do not see anything. Okay, so that's the simple one. And you have to remember that any value other than zero Easter, So if you have something like that, it's gonna be executed. If you have zero, it's not gonna be executed if you have minus value, it's gonna be executed. If you have a string, it's gonna be also executed. Okay, so let's create two variables for example, a, uh and let's do something a bit harder. So if a is bigger than being, then I want to type. A is bigger than being. I could also do something like that so I can connect strings like that. And as you can see, five years because it's too. When we change it like that, it's not working. Of course, things like variables are not gonna you do not want to turn to check. Vary with the type here, the values into it because you know how they look like right. But you cannot take all these values from your website. And now a is bigger than be, and you can sometimes want to check also the other situation, for example, else. If so, if there's another situation, do something like a is lower on, then being and then we'll alert A is lower than me. So is lower than free. Yeah, it's not working. So how does it work? Everything is being grabbed from top to bottom. So here. Hey, we off course find variables and then we check if a is greater than be. It's not. So here we have got zero. So this thing is not gonna be executed. But then we take another situation else if is lowered and be, Yes, I use lower than being. Then we can show something like that. And we can also do something like that. Our house and this thing is gonna be executed if all other conditions were not met. So we can ride something like I equals B equals being right because the on the situation in hand so is lower than free. When we do, for example, free, free equals friends. Okay, so there are some things that you need to know now because this thing my BZ, you want to close now this lesson. But do not do it because there are some pretty important things that the you need to know. Otherwise you will make many mistakes. Look, you can does something like that. You can do just that one if easy, But you can connect it with the old else if and you don't need to use else. But you can also do something like that. Um, like that So you can just use if and else. And you need to remember that when you have good situation like that. If and else if when this the's condition is met, this instruction will be executed. But this condition will not be check again. If you are using the house work, let's check it out. So if I decided like five on, we do the same condition in both cases. So you might be thinking this will be executive. This will be executive, right? No. Five is bigger, dumb free. And that's all this here This sentence He's not gonna be executed, right? If you wanted to execute something like that, you type If again five is bigger than 35 is lower than three going to remember that if you want to sick something in order to make for example, your program faster. You should check the things that are the most that has the biggest probability off happening first because they then the then you will see. Ah, the instruction will be executed below it and all other instructions. All other checks we know is gonna be executed. All right. It is very important. And you will not make a mistake like that. And there is one more thing that you need to remember. What if I did something like that? Ah, like that. And I do submitted. What do you think will be shown? What were the first you can see? You can see two is lower than free and then test. Okay, That's pretty something that you would think would happen. But what did I do? Something like that. You might be thinking that only this thing will be shown. As you can see, we can still hear. See a test? Why? Begu? It's here. Why we can have here. Azman enters as we want. Now you might be thinking, Hey, it's true that the thesis instructions should be on around these. No, but you know why spaces are not interpreted. Right? So we need to always show exactly what we want to um execute. Oh, are we do not want to execute how toe executing poor. Then one instruction at once. Well, then you have to use a sign like that. So we have to use brackets that looks like that If you want to group more than one instruction and then when we use it inside. As you can see now we can see on the five is bigger than feet. And that's all because right now, because off that break, it's you are interpreting these two instructions at as one. So you want to run more than one instruction you can grow. Group them, you can merge them using these brackets curly brackets. Right. Okay, So if I do know something like that, this thing will be on when I do something like that. Uh, alert a equals B and only these things. So you need to remember that if you do not make brackets Onley one instruction will be run . And, well, you should most time Just two brackets, even if you are doing on the one instruction. If you are at least begging, okay, because you have not is provided that it could make it could be potential problems for you . I did not make that curly bracket brackets because I when I have only single very short instruction because I didn I I'm very experienced person in program right about your behind Viet, the beginning, making some problems because of it. And it will just take a lot of time two d barcode like that in. So it's maybe sometimes even good idea to just do for one instruction. Curly braces. Okay, so that's how conditional statements works and you know how to avoid making mistakes. It's only that lesson. Thank you very much. 15. Shortened conditional statement: Hello Today we're going to talk about shortened conditional statement, which is called operator Question mark and coal and well, you know, programmers are lazy and sometimes you want toe avoid writing too many lines of code When something is just obvious. It's just so easy to write. You don't want to lie many lined. Of course I will show you soon. An example. Pretty practical one So. But let's check. Firstly, how does it work? You take something like expression here. So you know, some kind of condition here. And then if the expression is true, then this thing here is gonna be returned, and it's not. This thing is gonna return. What does it mean? Well, let's forget the body for a second. Let's create an example. I want to check if the X is, for example even. Okay, So how to do? How would they do it? We've just normal conditional statement. I would do something. I did cave ex Mort So operator mode Eso I want to check if there isn't a remainder. Ah, two equals zero. So there is no remainder, right? By when you divide by two, which means that it's even number and then we can say that the eyes to its I think this number is even can create special variable, for example, is even. And now we can say its even ISS to otherwise you know that it's even is false. We have a clear warning because it says that it's good idea two years here, free science like that because then you know that you are right now comparing the same type of variables. Okay, weaken. We couldn't use it. And now how? How can we know? Say that the number is even so we can just do something like that, for example, and it's eight. It's too Yes, do is even five is not. Even so, we have false. As you can see, we had to write 1234 lines of code. There is one line of code, which would be faster. That's the faster with this. With this. Think about so we type expression so eggs multi do equals zero and then we return to otherwise we want toe return false. And the problem is who heard the stew or farces returned, but to the place you assigned them to. You can of course, you do some kind of function. You can invoke functions, years of example. Other. Right, Andi, but whatever. Whatever you want to be done is gonna be done. If this thing is true in this place in this place No, it's not. It's gonna be executed when this thing is false, so we can not assigned to something like that. Okay, so we can take this to common, because it doesn't matter for us. As you can see now, it's pretty faster. And now we can type a Stephen and yeah, is working false to. But, you know, we can even more upgraded if you wanted to only have it as an output. We do not want to start these values. Why not to do it like that? All right, now we have tear are false, and we can improve it. Why not? You know, say something to the people. For example, the value is even. The value is not even the values. Not even the value is even So you know, you call Allah hear about anything. You can just check one thing here, pretty father. And then just other. The person that something is ok or something is no. Though Cain, and you just do it in one line. You don't have to do something like that. You don't need to just have loads off line codes just for one simple task, right? So that's how you use it. That's when you use it. And, as you can see, realising it is a good idea to sometimes shorten our programming. That's only good. That's it. Thank you very much. 16. Switch: Hello Today we're going to talk about switch statement, which is talking, switching between values Did you send to this switch? And in case something happens that is sent to the switch, you can execute that code the instruction that you want. So it's really something like the conditional statements, and you can do exactly the same things with fridge like you can do with the conditional statements. So why even bolder? Let me. Firstly, some people can use it, so you to understand the syntax of it. And secondly, it looks better sometimes when you have men in conditional statements. You know, if, as if as if as a Z vest asses and you know, like 10 10 or more six blast or something that it's good idea to use switch because it will look better in your cold. Later you gonna read it faster, right? So that's why you should use switch and how it works. You type switch, and then you type the thing that you want to switch you hunt to toggle between. So, for example, we create a variable day off a week, and I would type here one, and when we sent your day off weak. We can now use what we have to use now here the current braces. And now we should, in case they have weak equals one, we can, for example, send alert Monday in case it's still free consent alert to use that right to use that. And in all other situation this time you do know type as, but type defaults. So it is the default thing that you have to do if all other things are not true. And, well, this is not the off week, for example. Right? As you can see, we have got here Monday and Tuesday, and this is not the door off week. Why? Why? Why what happened? Because switch is pretty weird. You know, when it's switch, it struggle between this value. It goes into this case and whoa, it's one. Okay, so we're gonna allow this, but we gonna also execute everything to the bottle Ho. So why even bother using something? Even what you have to exactly say that they want to break. Okay. When we do it like that, you you then execute only these instructions because you know you have tow somehow. Say to that interpreter How maney sexy in section you want to execute, right? Because you can hear type man instructions on 50. And then you will need to say, Hey, I want to break And sometimes it's even called because you can use this cases, for example. Um, Well, before we go to it, you to remember that you have toe almost always give break after each case. You don't need to do it after the fall because it's last ones. You don't need to type here their default, but in all other situations you have, you should have something like that on. Well, let's check it. When I typed toe, it would be a C. Consider Tuesday. When I type something us, it will be there's no the day off weak. But what if I wanted to say something like, Oh, it is, ah, working day in this and it is a weekend right then I should do many cases of the ones and I could do something like Case. One case, too. Case free case for in case five to free for five. And here it is, working day and in other situations, I would like to type 67 and of course I need to do a break so like that and it's we can't is another day of week when I type one. It should do what it would just pass to the 1st 1st instruction that has to be executed and then to the brake is not a day off a week. Um oh, I type 1 11 story working thing. When I type six or seven, it's a weekend. So you know you can do some special things. For example, for money. Oh, no, it's Monday, and when you take No. One, it will other this thing and these days thing right, That's how it works. So, as I said earlier year, most time will not use which statement this. But you have to know the syntax because most some people are using it and e only when you use it. It's for easier reading things. Okay, if you want to have more read able coat when you have good many cases to check, then it's good idea trees that during the lesson, thank you very much. 17. Functions: Hello Today I will tell you, brother functions how to create an end. Why they are needed function is simply a dog of code which can be invoked, executed as many times as we want and different places in our coat by us or even other people function. We just called sometimes and method is, as the name suggests, taking a role function for off doing something right. It's a matter for resolving the problem. For example, a function can calculate something or informed the user about something on the website by popping up the special window, for instance, alit function, which we already know right. When we take stuff like our and we type something inside, we gonna create a window special window with this variable with the value of these very book inside the window. So somebody created the function for us that's gonna alert somebody they could think about function is that you can co pay it. You can invoke it as many times as he warned. And many places in your code. Of course, you would have been the other things like you, right, other in your coat. And well, because of it, you're saving your time, and you can instantly see that this function is responsible for world for alerting somebody instead of it. You would know valley asi like I know 67 lines of coat and you will need to repeat the repeated in gain. And if you wanted to change something, then you would have a program, right? Use me to changing every possible place where you use it. It will be very hard to spot and well, you'll just have just too much cold. Okay, so functions are very important. There are many available functions written by other people. That's also very cool. So what? There are some basics, one that are standard built in one they start in some aside, something good is called objects. Most time we'll talk about objects more later. So well, for example, you have got a function that compound powers a type from, for example, string toe integer. That's pretty useful function that you can use. You can change I and change, for example. Ah, check if the number is a number, none is not a number function and other things like that. There are many functions, for example, use for operation on strings when I go here and I open it, As you can see here. Ah, doorman. It functions Type here that can do some operations with string. OK, And what we learned some the most useful functions and sometimes we're gonna create functions for are in your own usage. But there are many, for example, also frameworks like Jake wear. It's very good framework that is just set off the most useful functions created by other people and our money plug ins. Tow it on. Well, if you know Jake, wear a and what javascript firstly, and then j query, you can create many things very far. Okay, so it's good idea to look on the Internet because most time, if you want to create something, it's been already created. So don't lose your time. You can most like frying and find it even for free. Okay, so after discusses very good idea to learn something which is called J Query. Because you find many useful functions, they say for those of your time. Okay, We No, no. We now know world is function. But how to create functions, our own one. Let's start from creating a simple one. We So we get to know with the syntax a king. In order to keep the function, you have to type a keyboard function. So, you know the interpreter that is gonna interpret JavaScript? We know that soon you're gonna create a function that it is a definition of function, not invoking. Go function. Right. So now we have to dive the name of function, for example. Tests. Okay, that's the simple name. And then we type parentheses. So the same, like when we were invoking it. But because off the keyword function, the interpreted now knows that this is just a definition, and you can define something will discuss parameters. But you will talk about it a bit later. Now we should use the curly brace er's to say where the function is starting and where the function is gonna end. This thing it's called about a boulder of functional. Okay, So you so you know, also the Carol embraces from, for example, the state in and they were used to still many instructions s Oh, yeah. Here in the function, it has got two roles. One is to say where the function is starting king and where it is ending and also to storm and instructions and ones, right? So we could weaken Type your instruction while in the section um bam, bam, bam, bam! And all of these instructions are gonna be invoked are gonna be executed when we invoke the test function. So when we just something like test OK, all these instructions will be invoked and you can invoke inside the function another function. You can do whatever you want here, right? So, for example, when I type stuff like Allert sample and when I run this, as you can see, we have Good. Now here's sample said because I run inside the test sample when I do something like, for example, this I was see all this windows sample sample to example free because I said that I want to run by invoking dysfunction all these instructions here. You probably also notice that right now not everything is involved one by one, right from the top to bottom function is just an exception to this rule I told you about. You are defining it somewhere, and it's just gonna be invoked whenever you want, from whatever place you want. Okay? You don't read everything from top to bottom. You're thinking about function because right now we are when we do something like that were jumping from this place to this place. Okay, that's how functions are working when you invoke them. Yes, jumping to the boulder function and you're running the things that are inside the boat. And, well, the function can also return to the place where it is involved. A value. But what does it mean to return the value? Well, when you type something like return five there. I know here, really? We have good something like five. If you had some instructions here about above, they would be all executed. And then after it, we would have your five. That's pretty useful. You see soon Why? But let's check it out. For example, let's let's creative a Rabel and store that result of that function to Dave Arabia, which is called a and then we will alert it. So we do something like that. As you can see, we have got no five. So whatever we type here, whatever we return, it will be now. Start inside the variable A. Because we assign it was the operator for assigning it here by invoking the function. And we have got this return here and it's just gonna be replaced. These line is gonna be replaced by diesel return. Right This place. Exactly. So you can also invoke the function inside the function like that, right? As an argument, we're just sending Kim, like, right, five. Let's check it out. As you can see, we have got exactly the value here when the as the bomb bomb bomb the five. Okay, so that's how it awards. You can return something. So to sum up, invoking the function means that the function is gonna be executed. All the instructions inside both of function and the place where the function got invoked is gonna be replaced by the return value. So in our situation, right now, it's just five off course. This is a very simple example. So let's do something more serious. Sometimes you might want to work on variables that are at the beginning. I don't know, For example, values type in the form by the user of your website to the function we consent variables which are cold arguments right now. Let's create something simple. Simpler, for instance, a function that we at two values. So let's create the function. Did we coat ad? As you can see, that the name suggests that is gonna add something. And now we can define that. We're gonna take two arguments, you and we're gonna define Perry parameters. They are called here parameters. OK, we call them, for example, X and y. You can do what we can call them what everyone, of course, like variables. And now we gonna create the curly braces. So now we can do is just stuff like ad and sent, for example, to free and five. And this free is gonna be now in the eggs, and five will be in that. Why variable? And now we can use this value sent here inside the function so we can tie, for example return X plus why? And now here we have walked the result of the operation after the return world. So it's a we can check it. We can, for example, do somethin. I saw some off variables and then we can alert them. As you can see, we have got now a and we can change now. These result pretty fast by just sending different argument off course. These arguments can also be variables and other things like that. Okay, we did try to do some operations here on them. So let's greet now another function which is gonna divide two variables. So, for example, function and I we call it divide, and also are we call them eggs and wide. As you can see, we can call them the same. Like they are here and there will be no problems with, you know, um, which one is which? Because they are in different a scope. OK, this thing is a Scoble. So for variables, so you don't need toe worried it When you type you like exercise, it will work with the function above. Okay. And now we can just die Britain X divided by Why the problem is that why can sometimes be zero and you can divide by zero. So how to do something like, you know, informed the user that he tied zero It's wrong. You can do it. You can check ive using the if statement If why equals 20 then return. It means that don't do anything. We can also inform first of example other dune you can't divide by zero. Okay, and then return. When we don't have anything after return, it means that dysfunction is gonna end here and return on. Define. And now, when we type, for example, one divided by zero we notice that we have, um one. We had one because I didn't change the function. King writes Divide, It's not not some of variables, but, um well, the result off diffusion. And now we can see you can divide by zero, and then we have undefined. So the result will the place where we involved this function was replaced by these Return on because we didn't type anything here. We have got their undefined like that on defined. We could also, you know, return for example, ID like that. Uh, then what gives? Just one alert you can divide by zero. We don't need to use them. Carry braces, right? And you also probably are wondering why we have to returns inside. You can have them as many as you want, but after returning, you know everything. After the first return that is involved, it's not gonna be executed. So in our situation, because the second variable is what zero. We are just returning here and this thing will not be executed. You could type your ass, but you know, for more maybe more clarity. But it doesn't matter. You don't need to type it because that return is just gonna exit the function. So returning is also an exit from the function. So if we change these two for example five and he will take 10 we should cover the result too. Because, well, this if statement is not true. So this return is not gonna be executed and the program will. And here, of course, all these functions are simple. I'm just so showing you the syntax will create harder functions later. Right now, let's team up this lesson as you can see, the functions, is just a plug of coat that you could invoke anywhere in your coat and get the result. But why do we need functions? Thanks to functions, if you want to change something in our coat, we can do it only in one place. The board of the function and if we didn't have functions, would have the same operation coat in many places, says places. And if you wanted to make a simple change, will get to make a changing all possible places. Okay, it'll take lots of time and we even hard to, you know, find all these things. Places were using It's offensive functions. You can reuse men as many times as you want. The same called, which makes your project easier to maintain. And it saves you lots of time because you can reuse your work or even somebody's as work. You know, like for example, Jake, Where framework Thanks to functions. Our program is also more readable because you can easily see for what each part of course, is Coat is responsible for Let's imagine a situation like that Get value from form form I d . We can create. We can involve a function like that created before, right and yeah, you can instantly see this function. Use use forward forgetting value from form that is, that has got form I d. As a variable ast the value of this very it is just great because instantly said, see that dysfunction is gonna just get the value from the form. Which idea is for my d? We didn't have functions will have instead off it. For example, 15 eyes of code that wouldn't inform us so much as these one simple line here. Right Rule Nieto, analyze the coat to get more info of the car. So remember that you should Kate functions that are self descriptive. Which means that when you read them, you know what they are doing right now, Things like that might seem like they are not important for you. But believe me, you will be thankful for me. For all these information in future, that's all in the lesson. Thank you very much. 18. Scope of variables: Hello Today we're going to talk about scope of arabe ALS within the script functions. Scope range means where in what place the variable is available. What does it mean? What So far I have told you that everything is run from top to bottom, but there are some rare situations when this is a bit different. The difference is in when you are executing functions when you're creating them, when you are using variables within them. Because there are some weird things happening in JavaScript in other programming languages is a bit easier here. It can be a bit baggy when you don't know how it works. So let's focus on how it book. Okay, let's get the function of simple at one like test and let's do something like sample. Okay, our simple. So normally, when we do something like that and when we ran it, As you can see, we have got sample, we know that it's you should war, because what this function has been defined here and where now we're running, that's here. So you guys, it should it should. The program should already know about test. You write about test function, but when we do it like that. You would be surprised because we have got also good results well in JavaScript before running. Discreet because executing instructions in the script First Interpreter is taking all the functions. All the variables do. Some go, both sculpt, and it's saving it there. And because of it, you're functions in whatever place you created them. So you can have tea like 100 lines of goes out. Other coats, right? And when you do something like that here, the when you invoked test, you can invoke your functions and the way right. Why can you do it? Because, well, it's available everywhere. It's in global scope right now. Functions available everywhere. It also means that when you create, for example, of a rebel like that, and when you do something like, for example, alert a And when you do something like that, you're not, is that we have good five. So somehow the variable is seen inside this function. It's available everywhere, but there is a small difference between functions because, well, look at this. If we do something lying, let's take it into the comment alert. A. Of course, we'll see five, but when we do it that way. I will not say anything. It's on defined right now. Okay, so this is available toe everything that is under under the definition. So this is a bit different from the function behavior, right? And somehow you can access the value here. What's more, you can even change it. So when we do it like that, you can see now can have free here, and that's very important. A is now changed, it equals. And when we do it like that, you would notice that it's free and it's also free outside off the function. So it means that you can change the value outside of the function by default is very different behavior from other languages. Okay, if you don't know other languages, then maybe it's no something that you don't understand. I know, but so do you have something that that would be weird? What is that? Well, you can create something what is called local variables because you don't want to sometimes change something outside. You would need to have some temporary variables to change something in between otherwise, but you can some times want to send thes value just to, you know, track it. You don't want to change the value outside. You want to, you know, do some operations or need. You don't want to create another. Temporary was under things like that. And then you want exactly create a look of a rabelais under to create a look of able to create a parameter. We just called a right now. And because of it, you will notice that when I around this program, it's free and then five because now a and then a sane signed to free is signing the value to the local variable. Okay, so the look of a Rabel is something that is available between its scope. In this situation, it's between the cover, the braces, opinion candy, causing one. So look at the labels are not available later. When we I don't know, I do something like that. As you can see, free on bombs, not the very book. You just have a ball here, then that's all. Still have a blue anymore. So it also means that it's gonna be deleted after the closing clicker. The brace, sir. It also means that is gonna fear my mother memory of your script. So it means that. Well, if you want to just fast operations in something and you want to free Memoria, it's good idea to do something like that, right instead of having everything in the girl, Bosco. And now there is something that you need to also understand that when you don't need to, you know, create, for example, parameters. So you know you can do something like that. It's the same. Okay, when you create variable like that, it's almost like you did it that way. But when you can then send arguments, I like, you know, sending Q five or something. That, and that's why you want creating parameters sometimes. But look at this. It's now every look over able to, as you can see, no good free and then five because we have got here a local variable. If I delete it, you will not, is that we don't have any more. They look over a rebel, so we are changing the value from here. But there is also even something more weird when you when we come. And this means, um not is that right now what's going on? We don't have a global variable him. We're assigning free to something. What? What? We don't have very bookie retype. The problem is that you can create variable in JavaScript even if you do not type variable bit before it. When you do it that way, it's gonna become global. Variable, even toe is it is created inside the function. It means that right now we assigned Frito A and it's also available here. As you can see now, we have got free here free and free here. But if I do it that way instantly, this thing is not available outside of the scope. It is a lock of are able okay and that you can see now it's free so you might be light. And now, um, you know, it's it's hard to understand that start, but you need to just remember that when you type variable before it's gonna be local variable. If it's created within the function, it's gonna be global variable. It's if it's created outside of the function. And you just need to remember to, by mistake, do note, do something like that because it is gonna be a global variable. Them right? You need to have at least you created the declared available or heavy. That's a para matter here because then it's interpreted a bit different way right. I told you about the things that you don't need to type the parable before the before the name of a rebel because sometimes you can make a mistake because of it. On that they are very hard to sport. So just remember to not by mistake, re hate of a rebel without the var before it or young if it's not a part of its para matter , you don't need to type the very book here because it would be I second declaration of the same variable that is here. Okay, so don't do it. Okay? There's only the lesson. Thank you very much. 19. Anonymous functions: Hello. Today we're going to talk about anonymous functions and about functions interpreted as an expression as the value off the variable. Okay, so you know, so far we know that we can create a variable like, for example, like that. And then we can assign here. Example five. And now the type of these very buoys in Teacher, If you do something like that, the diable these were able it's drink. But who other? Any type of rebels. Yeah, You can assign in JavaScript a function to vary vary So how to do it? You just type function here than the name of functions. So for example, test. Then you can define here parameters right Like that, you know variables. But we don't need to live type anything there. Then we just creator opening calibrate its closing Curly brace said, And then the semicolon and we have got now a function start inside that variable and there is a small difference by creating a function this way right now, it is not in the global scope. It is on the inside that variable so we can use it right now only below the definition and in the same time we can do something like that system, for example. And now we can do something like that. As you can see, it's not working because right now it is. Start inside here. And in order to get the dysfunction, we can do it only through these variable. Right now, this variable is like a function. You can use something like that X. And then you invoke the function that this start inside like that, as you can see. Um, well, so he was Should they alert? As you can see now it types sample. Of course, it would not work off if we do something like that. Everything is working as intended. So we cannot invoke the function using this variable. Now you might be like, but when Why do we need this name? Well, we don't need it. So we can use here something bodies called anonymous function, which doesn't have a name. Anonymous was a person who signed documents, documents with anonymous and nobody knew his name. So yeah, this just a function. We just got animals because we don't know its name. It's not needed right now. Here, right? It doesn't matter. So if you want you can create an enormous functions if you do not care about the name and it happens most time instead of dissertation like that, but in but it's also used in frameworks. When you want to send the function as an argument and you don't care about its name so soon , you will see some things like that. And but, well, you know, it's a bit advance topic for now. We can also, of course, send hear arguments so we would do something like argument one and do something like that we can know, sent him, for example five. And as you can see now here. But simple five. It works. Breathe the okay. Now let's try to do something like creating a function that has got as a perimeter a function. Okay, let's take this into the common section and let's get the function which we called test, and he will take as a parliamentary, a function I type your F, but you can type, you know, whatever you want. It's there just the name of variable that we start the function that will be sent you right . And now we can, for example, sent here. You know, something like five. And now this would assign five to F. But we can send here also a function. And the coolest thing is that we consent here. That the nameless function with the an enormous function Because we don't care about its name Onda, we can send their you know, both of these functions off. Example. Alert sample plus Ah, are simple. Just sample like that. We can, you know, do it a bit different way we can do you do it that way. So we have got Yeah. You know, uh, then we see how how everything is printed. Well, we have got arrows. As you can see, I made an error like that. So it's a good idea to sometimes, you know, ah, have good things. Formatted nine Dent. Because it's easier than to spot some problems. So not we send dysfunction inside here. So does it mean that way will involve it? Of course not. We have to invoke it inside the body off this function. So right now we have got that f here. And you know we can use it like that because we just assigned this to this. Very as you can see now we have got here sample and it works fine. And also we can you send to dysfunction inside for its exact example plus X, And we can send to this function ever able an argument. As you can see, it works also fine. Can we, you know, make man arguments in dysfunction? Off course we can self example Argument one. And here then I will time. For example 20. And now we can, for example, at this argument one toe that four and send it to the function that will send to this function. I know it's a bit weird. It sounds weird, and all things like that are most time used in advanced programs. So do not worry. We do not understand is right now these are not so important toppings that is at the beginning. But it's good to know what this how these things works when you read them. Because some frameworks are using things like that and then, you know you will be lost in cold will. You would read the cold like that, right? So it's good idea to this. Understand what's going on here? Okay. So we can invoke inside the function a function and maybe like, Why would I even do it? Because you want to, for example, inside this test function, do some operations before and then sent to this function a bit changed. Value use. You know you want to know, for example, use dysfunction. If the values were equal to five or another function, the values were different. Write It all depends on the situation. These arrive situations to the Houston Fire. But you know, that's how it works. You can also return the function. That's even harder thing. Let's see how to do. Let's create a variable. Let's go it high and let's a sign it a function which is named That's another miss one. And now let's with something like that. Um, let's get a perimeter type. And if type equals still, for example, balls, then I want to return different functions off example function that would think it's an argument name and I will Allah are tear high balls and then the name of bulls, right. But otherwise we know that these guys know the ball so well returned the function with the name also, but this time well, it would be almost the same ideas. So we can cup it. We're not, Say, boss. We just like high name. And you know that there would be other operations. Of course. Also, I'm because it is a simple one. For example, for balls you will need to come some some things like, you know, he's salary different way Anderson's like that so that you can do something like that. And now you're returning functions, right? The value Oh, the return here for dysfunction will be the function. So it means that if we do something like hi and then we say here balls and we're on this program is you can see nothing happens. Why? Because right now we have got what? This thing Instead, Move this. I think because as we said in the lesson about functions, when you return a value, really, you returned the finger these afterwards after their return. Key word. So it means that we have got dysfunction here and it means that we have good the function that we can use? No. So we should you assign these, for example returned function to the variable like that. And now we can involved dysfunction using these returned function. As you can see now, it works. But we have got undefined here. Why? Because right now we should say and an argument to these returned function in order to see something after it. So, for example, my name as you can see highballs Arctic. And now if we do something like that in the line 42 So it means that we're sending to the high function. So today at one, something like that, it needs that this will not be run. But yeah, this will be run and we'll see only high. And my name right. I will not see the boats because the type is not both. So that's how it works. We can send function well, an argument You consent very ableto some function and return the function depending on their arguments that were sent. As you can see, things like that are a bit advance And do not worry If you do not understand it right now, you can just go ahead. You can return to these when you know javascript better. When you know you start doing advanced things. Things are like that are used in frameworks. You will also notice that events are sometimes using it when you want to register and even you know you want to, for example, sent a function to be involved when something happens. So, for example, you click on something and this thing is called even we'll talk more about even and events . And then you will see that things like that sometimes are youth and maybe not so hard coded like that. But this part of these things that we that we can see him, you know, things like that are hidden most time from you. And things like that are written by people who are writing libraries. And you are just using things like that. You are just sending, you know, functions toe toe, for example, another function. And there is a code that is working on them, something that is looking similar to that. You know, they are checking. Give their how arguments are looking like, and there signing things properly. So it works well, most most time, called like that is hidden. But you need to at least you know, I know that it exists. So you understand how it works, right? Right. So you do not write your coat learning everything by heart. It's good idea to understand how things are working because then you can create coat better . That's only good lesson. Thank you very much. 20. Objects: Hello Today I will tell you what the subject, how to create it and how to use it. Objects ab just containers for storing variables and functions which are called methods thematically related to each other for easier reusing. Is it possible to define it a bit simply away? Yeah. Everything around me is an object. Yeah, I'm looking at the monitor. I am looking at the course or that is moving here. Everything that you can see can be called an object. And you can use objects you can define them by, You know the variables. And you can say what actions are gonna be done on this Objects by creating functions and very boosted are describing the objects are cold. Ah, this time something like pearl parties. Okay. And well, let's create an example we could, you know, create something. But first, I think you could just use the example examples that are already created When you go to the Mozilla Developer network, there is a guy. There is also totally or for drivers. Keep free one But e When you are here, you can find something like references built in objects. As you can see, there are many built in objects that you can use. There are many properties, so vory boots that are describing these objects and functions that can help you working with them. That's really, really cool. For example, you have got also something like document object motor. We talk about this thing more lighter. E. And inside the current object model, there is the most important want, which is called document Document is describing the document off the HTML five. Let's use it has used the document. Mm object. What? In order to use the object, I just type the name of the object. And then I kicked that dot And then, as you can see, I can access all possible values there And in this editor that blue one are the variables. The properties, right, And the red one are the metals that I can use. And now I would like to get element by idea that I sent you and I consent here, for example. You know, let's call this guy test. So I have good now because of these matter that was created by somebody I do know how it was created, how it works. I just want to know that it works like that. It just gets this element by these i d. And now I type here, for example, Vardy. If but whatever. I just want to assign the return value to this thing. And let's Allard, As you can see, inside a day we have good object which is called html diva lemon. So I just got another object that I can use it. It is called html dif a lemon. As you can see, it is inside the document object model. Right? And when we go here, we can read about it a bit more. You can read what properties are inside and things like that. Um but well, and objects, um, there have something well inside the HTML has something like a property which is called inner HTML. We can do something, Dave in their html and now we can assign a sign here different. I think that that will be inside the dif that we get using dysfunction here so we can type here. So, for example, this is new text Now, when we refresh, as you can see, would change the value insight. That's really cool because because right now we can tell it change the value off anything on our website dynamic, I you know, we can check for example here. If somebody did everything properly in the form if yes, then we would say, Hey, everything is OK. We can even insult here an image, right? We can do whatever we want just by knowing this little thing that that is so powerful, we can do whatever we want it right now. Right? You can check if, for example Um these guy has got the size of document like that. We want Teoh decrease everything inside our our document. We can do things like that because right now we have good objects that are created by other people Will of course, then some of them in the next lessons the most important things about them. Um but it's gonna see it's just so powerful. Right? And you can also create your own objects That's also useful. For example, escaped an object that we called person and how to do it. You just asi have not is we just created it as normal variable, right? But right now, in order to create an object we should create here something like Curly Brace ER's like that, and it means that we have just created object, which is called person, and now he signed it. We can create the variables, the properties that you describe these objects, what it can describe. The person person has a name and then we just a bit type of name and that name can has value. So, for example, are so in order to do it, we just type the key war than the column and the value off the, um off the property. And now we can create more of them. We can use the comma two separate. So, for example, surname on DNA. Now I will type a lot of what our trick. And as you can see, we have good now to values. But, you know, writing it like that in one line, it's very bad idea. You should do it that way because right now it's more readable. As you can see, it instantly is easier to read, and then we can act is all these things. So, for example, I can do our person named like that. As you can see now it's Rx. So we did the same thing like here we access the inner HTML off the deep element that we got here by this method. And, well, we can off course, change it dynamically. Here's example eyeing more. As you can see, it's been changed, right? We can change it. Likely they did here. Ah, at a time you can, of course, dynamically at something new Age 15 for example, Like that on you can do you know we can at any elements at any time. The cool thing is also that you can use it like that now, right? We don't need to use other than them also easier for us to the bark things later. So the inner html and now we can type person, for example name, right? And it works. What happened when we, for example, to stuff like that? As you can see, it says object object because there is a default. My thought that is Iran. When you you want to interpret the object as the string. Ah, that method is called to streak, okay, and you can override it. But just stating to string. And now we can create an animal's function that is gonna override it. The default behavior. Now we can return The thing that we want tojust say that when we do something like that, you can see you know we'll see the as the weaken type here. Whatever want this will be just the thing that would be shown when somebody want toe interpret their no person this variable as a string. So when you do something like that so we can return. Here's for example, this that, for example, name as you can see now we, by default, show your name. But you can also do something like that. This surname bum are Rick would object? It works. No, it's just a default value. And, well, you know you can create your mani methods. This is called the Method Your own One. I know you can do some counting. How long till you take this guy will be odd old. He will be 18 if the edges lower than then. We say that he's No. 18 or something that we can do our own methods. So it's all old, for example, like that function and now off course, we need to hear a comma, and you can check if that's cretin h something like that. And if age is below 18 then return False Otherwise returned. True. Right. This on Dhere? A cynical, um, And right now we can use thes met it. Person is old, as you can see. Um, this and you text Mm. Because, um but that well, the person this adult is returning the faults as bowling. And this is just not showing up every day of the dead way. Of course, it would showed up because now is just screaming, crying. Um, person is Oh, I know he's on. Why not? Why not? It's not working within to be dead with. So it's good idea that I made these mistakes because of high. Now, um, I will show you something which is very important, because you could make this mistake also. And it's pretty cool on a stick. Yeah. What is the age here right now? It's not these age this age here could be the age defined here. So some play that right. We need to exactly say to javascript that we want to goto this edge, and we just type that this that eight. This is always pointing to divert able that is the closest. So in this situation inside this object. So it is interpreting right now here the h here and because of it. As you can see now we have got here true because, well, the ages above when we take, for example, 15. As you can see now, it's false. So it's working. We created our own function looking. And as you can see, these functions are related to each other. These variables are related to each other. So it's a good idea to, you know, store things that are related to each other. You can create also Ah, you know, objects by typing before something like new object and then bomb like that. We can take this for a second. Uh, you can see it's working, but I do not re comment using this with this thing. You'd I'm just showing you it. So you know that something like that exists. I don't recommend it because it's slower, and it's not so easy to read like this one. You. There is also another way for creating objects, but we could show you show it in the next lesson because, well, this is a metaphor, you know, creating many objects off one type. Okay, it's It's just advent more advanced. Stopping these the basics that you need to know. The second thing is very, very advanced thing. Not many people will use it. So if you understand it, you can now go ahead and you read about many objects that you can use for example, date one where you can account for timing things and other things like that. Ah, we would talk about most important one in next. Less. There's only that lesson. Thank you very much. 21. Object constructor function: Hello Today I will tell you about constructor function. We just called in other languages. Class? What is it And why would we need? Let's imagine a situation like that I want to create now a second person. So what do I do? I would do something like that. I would call him person to Evers up. I would change here the name to, for example, Viola and the age. And I would like to, for example, change a bit dysfunction And then I would create person free person 4% 5 ho. You know, you know, it would be horrible if I wanted Then change something inside. For example, I would like to add another property life, for example. Telephone number are the website or something that that would be just horrible. I would need to add in every possible object like that this property if I wanted to change something inside the function if the difference So so it would work at b different where a It would also take me loads of time because I will need to changing every possible object like that. So we need some kind of form for creating all these objects and this thing is called class constructor function in javascript. So shortly classes this form for creating objects. A form like that is used to collect objects into one class. That's why its called cross You can create because of it. Man. It different from each other. Objects there they differ from each other by different name like that right over the site. Name all the rage, whatever, but with the same properties and methods at the same time. Right. So how to do something like that? How to solve this problem? We can create a function constructor. So? So in javascript, it's really hard to debtor. Mind if the function is a function of her? It is a function. Constructor is a weird why they didn't create a new key word like class. But well, you just need to remember that he the function can be sometimes that function. Sometimes it can be a constructor. And now you will type here the name off this function constructor and, for example, be person. And this is the place where you should notice exactly If this function is used as a function constructor or it is not the function because, you know you should use the verb for the functions you get element by I d This the function when you see something like that person. Well, this is no the verb, right then This is a function constructor. And while when you see a body also, you will notice that this is not the same night that function because you are no the returning here. Ah, the value. You are not invoking the function like like no Well, you're not invoking the function constructor you're just using Get your constructing the object using the keyword new so we'll do it. So let's do the same thing like above how to do it now. Now we have toe take ah arguments to this person that will represent this person. So in our situation is a name and it's Asare name, right And it's also age. And now we should create properties how to create properties for the function constructor. We should use this keyword because this will point to the value off actual constructing Think mm object Okay. Off the one that we want to construct using the person constructor what may be let's use the constructor. So let's create a person for example, variable X. A new person when we sent you, for example, Are Rick the like that, for example, Like that? And now let's have it under the common. So we do not have problems with these and this, right? And not we sent here, Eric. We sent here to discerning would Arctic and to the age 39 right? And now we want to construct using these new keyword this person and use it you as a x variable. So like that we need to now create properties. So we're doing it by typing this keyword and that and we're just creating the name off this property. We can call it whatever we want, O r. But we just call it the same like it's here. So we don't have problems later by constructing special names. It's pretty, you know, it can be misunderstood at the beginning because it may be like these name is the same like this name. You know, even I used this time to times the's right. Uh, you just need to remember that this is the low cover able that these on that you can access between these curly brace er's right, the dis created because we're sending here the Arctic name here Body also need to remember that this that name is accessing not the name that was sent to this function. But it's accessing the wondered Teoh the object that we want to create. Okay, so now these SAR name and I type It's our name this age age and now we can just do it something like that X age. And as you can see we have tonight, it works pretty good. It's a good idea to also say that you can access things inside objects by typing something like that. It's also possible to do it that way. Okay, so you can do it that way, or you can do it, Dad. Way on. And now let's create functions inside. So how to do it? This is adult equals function, and now the bother the function. The difference is that we need a semicolon here now. And you also probably notice that you are not adding commas like that. Um, we can copy the borders so we don't need to right in again. We can copy those three ng functions of this to string function. Um, without of course, this. Okay? Same in cologne and now went into something that we see Arctic podiatric. And it works very well, right? And the cool thing is, now that we can What? We can now do something like that. Bomb, bomb, eggs! Quiet! Set. Odjick! I know, for example, Yolanda, I agonize whatever we can change here values and we have Good. Now, for example, we can something like that in HTML. Right? We want to take this guy. These guy. Uh What? Why? Um sick. And we have got all new people printed outside. You ever all not also notice that it will be good? It we had more off people like to create something. Would this cold and Eric. But we'll talk about it later. Next lessons. But as you can see, we are saving now Time. Why? Because if you want to create now new property, we just type this And now the property name that we want to create, for example, website and type of website. And we consent here now website right like that. And it will work now. We can use it by sending here value if you do not send. It also works because Now it's just undefined, weaken, defining or not. So it's pretty cool. We can now change, you know, for example. Oh, I want to type more things in two strings plus balm, this H right like that. And now against the HQ, right? We could, you know, going to something like Age Column, and we can added Instant in and it's added toe all objects. It's once with when we created it like that, we will need to change it in every possible place. That's why classes are so cool and you should use them when you, for example, want to access values from the database. For example, imagine situation you're using something. Will this cult Ajax and you should will learn about this object? Yeah, This is a bob object that has good something in some methods and properties that allows you to acts us BH being and PHP then can, for example, access database so it can go toe, for example, my esque oil. Get information and return it using the Ajax, albeit object inside the JavaScript without reloading your website. You can abdicate your website right. That's very cool. You can update your content of your website without reloading your website, you can, Ah, that that's really, really powerful. You can create very useful scripts because of it. And well, then you can, for example, you know, let's go to the database, let's take or Koreans and lets you know, returning t to script in the JavaScript. And now we have got, for example, many people who both something and, yeah, then it would be good idea, educated off objects for them because then we can access all these values pretty easy. But it would also be a better idea to create a class A constructor function because we have man off them. And if you want to change something, then yeah, I do will be good, because we can change it instantly by just typing a new property, a new function or other things like that. Okay, that's all in the lesson. Thank you very much. 22. Prototype: Hello Today I will tell you what this prototype and went to use prototype and well how toe add prop parities outside off function Constructor outside off. Discuss how to do normally. If you want to add a new property toe any object you can just type cakes then doubt. And you, Joe And you can just imagine here the name of new property. Party. So something new equals five and that we can act. Is it pretty easy? Like death. And as you can see, you have got now here five but off course. This something new. This property doesn't exist in other objects. Why? Because all these objects are different incidents. It is different object. Okay, x y and that they are all different. They do not know about each other. If I wanted to change this property in all possible objects at once, I should have changed it here. I should have done something like this. Some think new and then here equals five and no, do something like that. Now it's OK, but sometimes there is a problem. You do not have access to this place. And well, you might be like have had. I am writing this good. I have always access here. Yeah, but now imagine the situation. When you are using somebody walks Well, you can off course change things there. But let's imagine a situation like, for example, Jake, where J query is a framework where you have good lots off useful tools. But sometimes you want to you create your own tools and you want to share it with other people. And these things are called plug ins. And then it will be great if you wouldn't need toe change something inside this plugging because you know it's most time compiled. It is magnified, and it's gonna look far because of it. You want to have it outside off the J Courage Java script file. Okay, and then something like prototype comes. Prototype is a preliminary model, right? It's something. What comes first and everything after this prototype inherits everything inside. Ah, this prototype. So what? Even this person function constructor is inheriting everything from the object that prototype. You can read more about this, think here and ah well, you can you have probably noticed that when we type eg start, you could hear lots off functions that we didn't create and all of them are just inherited . Which means that we, ah, just, you know, like, found them who? He just added them to the function person instantly without even, you know, doing anything and you can change the prototype. You know the problem in their model very easily outside of the function. Ah, just by typing the name off the the name off the cause with this person And now we can just a prototype and then that. And now we can, for example, say, Hey, I want to create something new, and then it will equal five. And as you can see, it works right. You can change it. As you can see, it is working. Who added it to the class? We didn't add it to the object like here in the line 30 to we added it to the prototype off the class. And this thing is used in a situation. Like I said, when you want to create applauding, for example for require, it was very useful for you when you finally learned Jake wear. And we want to create some plug ins and share with other people, right? And but is that only situation were used. Prototype. There are some. Also other rare situations were use it well. I have Bean brought with Web developing for over 10 years, and I didn't use it even once because there are better ways off writing, you know, thinks in Java scheme and in all other programming languages, for example, you can use navigation compositions, which means that you are creating objects inside objects, which means that you can get collapse right and you're taking us an argument, an object, and you are just signing object inside that function. And this is just how you should write code instead of doing something good is called inheritance. Inheritance in JavaScript is so complex and in the same time it looks so bad that I just recommend you to just know, learn this thing because, you know, it's very to use something like that and it's even know the recommended. There are better ways of doing it. Do not take your precious time on learning something like that. Okay, that selling that lesson. Thank you very much. 23. Arrays: Hello Today I will tell you what our eyes and how to use them. And in addition to this, I will tell you why even bother using errors. Okay, so why to use them and Well, what is Harry? Harry is serious off values that are next to each other. Areas are containers for these values. OK? And you can act. It's all off the values using sound kind off index 012345 They are next to each other and you can use, for example, the name of the area and then top zero and you will get the actors to the value that is there. So now you might be like So when I would like to use something like that imagine a situation like that we want to retrieved from the database Some values like, for example, Pearle docks. So we would create something like a variable product one. But hey, there is one more product. Okay, so how would we call it productive to maybe protect free product for And then we when we at another product will need to again the product five. And we will need to change the code that would be very horrible, right? And well, for example, when we look at the website index dot html, we have got here these items we are really stink you programming courses and Web development cars is what if I want to add another car course of example, something like that. As you can see, we added here it instantly. But well, if javascript screed would do something with this list items here and we'll do it manually with each off this this item and assigned me to the very book he will need to also adhere. Another enabled it would be just Hori boot. We have got something like an array that can just do store all these values together. So for examples, we could type products equals. And now here brackets like that. This means that we want to heaven, Eric. And now we can assigned to this array these values, um or we can just leave it and then we can the same later here. But let's do it. Let's, for example, say Hey, I want here and there a weave the value like, for example, html on and, for example, pH being, for example, my escwa right something like that. And right now we have got an area that that is storing free values and you can access them using indexes like that. So in order to get to, for example, this this guy here, we will need to type pearl docks. And now that brackets. And as you can see now, when we refresh, we have got here now ECs h d m o. So you might be like, Why it zero here? Because in JavaScript you have to come from zero when your indexing things. So this means that this thing has good in the zero. This means it has got one. This thing has got to So it's not like 12345 But you have to come from zero. OK, so the last element is always minus one. Okay, Eso that's how you access things inside. You can also add to the existing very new values so you can do so example products and I want to add at the end So did us A lemon is here. That hurt. The fourth element is that the index free. So we should type something like that and we can now type here um, for example, JavaScript right? And now we can access it using something like that. As you can see, we can get when we do not type anything here. We just type products. As you can see, we have got now, um, all values separated by comma. We can see them here pretty easy. So if I type something like that, we just change the value off this guy here. Right? My escort to Javascript. And as you can see, it's working fine. So if I want to change the First Amendment, I would take something like that, and it's changing it. So But, for example, you don't want to Can't you know, things here sometimes Because it will be stupid if we have toe every time, count how maney if exactly. And then changing something called When you want toe end something at the end. You have got to solutions you can use. One of the solution is toe. Use the property that that is inside the area because area is really an object. And as we learned before, objects has good methods and some properties that you can use. Ah, And when you type something like products now we can use the dot operator and then we can use something like length. Length is returning the length, the amount off the quantity off things that are inside the area. So this time it will be what, Free 12 free. Okay, so it's the same, like we will type something like that. So right now we're adding at the end of the area, the JavaScript and as you can see, it's working fine. You can also change the last value. So, for example, by typing like that, so we have free minders want it's still and yeah, we're changing these guy here. And as you can see, we change it. But you have got also some methods because, well, this thing is a bit long, right? We can do something like products. That and now push push is just pushing things at the end. So when we type here Ah, something new. So, for example, Grant Js you will notice that we're pushing it at the end off the area. We've already been typing something like that. So provided this is even easier. You should also know that you can create a rise. No dosing syntax like that but you can do something like ver ah variable. And, for example, name off. All right. And now new Harry. So because this is an object, you can create it like that dosing the function constructor. Right? And, yeah, you can now use it. You can no, you know, create here some values for read, and we'll do the same things. But don't use these. You just need to know that something like that that exists. If you read the code that would be created by somebody else these just slower way. Okay. These slower is not as efficient way as this one here. The thesis thinking will run faster. You in your web browser. So don't use the method that I should say that I've just shown you. Okay, use this one. You should also know that there is something would is called associative a rise. Associative arrays means that you do know the use 012 indexes. But you're using key values. They are assigned to each other. How does it work? Well, you congest create in the area by typing, for example, variable person. And now we can do something like that and that we can type person and now name. So we now exactly know that you want to stir here Name, right. And we exactly now know that we want to hear store as hardening and go. But the truth is that in javascript associative areas are objects and they are totally objects. Now the rays are just the one that you have got. 012 indexes Here they are objects. Totally. Why? Because when you type something I person dot name you can also access these things pretty easy. Let's check it out. All Earth person name. Okay. And as you can see, we have got here now our IQ Um when we types are name As you can see, we have gotten word arctic. It's working. We can do it also That way we've all done it problem. It will also work. Okay, this is pretty useful to know because you know, some people might use different Centex. It's good idea to know that you can do things like that. These things like here are a bit more terrorist tickle things. Let's go to something a bit harder. As you can see, we have got on our website right now on order released off these items Pope programming courses and Web development. Kearse's What if I wanted to get to all programming cars is, of course, isn't ones how to do it. That's pretty easy, because we just need to go to the document that we need to go do element by i d. So, in our situation, this idea, its programming courses and now we want to access what? All less items. So we just need to use get a women's by attracting. Here is a function that we return the area. Okay, Elements, not an element, right, right in this situation, but all amounts. And now we can just like hey, what least item and we can assign it to, for example, programming courses. And when the Oller did you will not, is that we have got here. What object? Html collection. A collection is something very similar. Tune and awry. Um is that container with all these least items that we cannot access so we can now die appeared programming courses off zero. OK, and as you can see now, we have object html lease item Aram and so, which means that we got into this area and Now we can access the value. The value off the first. This item element because we use the zero index is what inner html were using inner html property. Because what? This is in the object, right? We can use the property in a row. Html and, as you can see now have got here sippers. Plus it's working. Do we want to get the last item how to get it will use the length off programming courses, the programming courses that length minus one because, well, you length we returned this time. What? 12 free. But we want to get to the last element which is at index toe. So free minus one is still and because of it will get the last a lemon. The cool thing is that we can pretty easy jumped Web development courses now, right? Like that. And bomb we have. Good. Now the last javascript Lemon. Pretty easy. You know, we have been the wrong name of Ray booze, but we can pretty easy change. You might be also not understanding the syntax here right now, but well, I will tell you how it works. Look, I would like to remind you the lesson about functions. If you do not exactly understand, it will be good idea toe work, the lesson about the functions again. But the most important thing is that and method is always returning the thing to the place where the function was invoked in the situation like that. Duckman, get the lemon by a D. We could, you know, also types I'm feeling variable on order, please. And do something like that, right? And now it seems a bit easier. We have got here. What on ordered released by typing something that right. So we have good this on order this. And now we want to go inside of these on orderly. So we're tapping another lease and get from that are under least what elements by talk name , which is this item. And yeah, we are just getting all these lists items inside. That's pretty awesome, isn't it? Is the cool thing is that we do not need to create a temporary polite that on. We can do just again the operation with the dot like that. You know, when we could also get all possible courses by just doing something that I get from the document all elements by tag name these items. But because of it, whether we have got now all of them so that first a lemon will be what c plus plus. And yeah, it's suppose plus the second would be see sharpen. And so go on. But you know, we do not want to get all these items most time Want to access the one that we want to access. So it is a good idea to also when you create your HTML document, you know, name your another these So it's easy to access them from JavaScript code, right? It's a good idea to name things inside age demon code. If you know that someday something would be access through the JavaScript coat. Okay, There's only that lesson. Thank you very much. 24. Useful array methods: Hello. In the last lesson, you learned what is an era in this lesson. You will learn new methods and properties that will help you working with a raise. OK, so you know now that this is really some special object, right? And that's why because of it, you have good properties and method because creators off a rise gave you them. So you can, you know, work faster with them. Okay, In order to show you that is this possible way how this methods are working. I created here at the if with the identification, it are called the result. And now we can use it here by getting to it by using documents. Now get element by I d result. And now we can access the inner HTML property off the object that is returned by dismantled right, So we can change inside the inner HTML to the value, for example, video courses. And as you can see now we can see all these video courses printed here. And you might be asking yourself why even we can see all these properties inside. This is a special object, right? Arisen special object. And how does it happen? Because Normally you're running here by default, a matter that is called to string. I told you that that's how objects are working. And this to stream pattern is really writing a matter that is called value off. As you can see, we have got the same thing. So by default this behavior is working like that. You can change, for example, this behavior by using method, we just go join, and then you can type here, for example. Hey, I won't Don't want a coma. I want here break html break. And now we print it. All this video courses like that s oh, it's working different way. We're not printing it differently, and it's very useful because imagine now we could also create here a table and Ari, we could even return the value of function here. How this things should work, right? That's pretty cool, because it can instantly interpret how arise should be, should be printed just using this joint function. Okay, so that's how we do is that's how the joint function is working. And this is the first we learned. So join is used to join elements and by sent argument, okay. And we have got a very important property that we talked about before. We just called length length. It's just returning the land off the Eric. It is very important to know how many members are inside because then you know how many times you need to go through the area later. It will be very useful in the next lesson when we want to the in the next lessons when you want to lend Lopes. Okay, so remember about this property is one of the most important properties is also very important to know that the joint is not working with the video courses awry, you know, like it's changing its values. Here it is just for the presentation purpose. So it means that if we, for example, do something like that, let's use the plus equals operator, which means that we are going not at here to the existing content, something new. As you can see now we have good. After printing this area, you know the space and then these dashes that we help us debug the coat and now we can add the value of video courses. As you can see, the value did not change its still the same. This thing is just returning us. The result for printing. Okay and derm or functions. The next function is called cone Cut, which is from the war Kolkata Concoct in eight. Cut the name something that and it is connecting to a raise. So if I do something that you will notice that we have connected to ours on and we used join. Sorry. Okay. Now we connected to a rise. And as you can see, they are not connected later they're connected on as the return value from this thing. So if we wanted to keep this value, you know, wanted to be changed. We should do something like that. Video courses. We should return the new value and assigned it to the video courses. Then, as you can see, the new value is always like that. Getting to remember about it because not all functions are work. Working with the value, the descent here and the main object that we're working on right now, we're not changing the value. Okay, So as you can see, that's how it works. Conch Captain Aid. It's connecting to arise. The length is red. Returning the length off an array and we have got. Also, something will discuss. Pop pop is just popping its exploding right. The last element. When you do something like that, you are removing the last element. As you can see, it is now removed from the original area, so it's not. Ah, the sauce is not existing later and it's gonna be returned instantly. The's think is returned because later we can, you know, compare these two something girls on do some operations on this. Things like that are very useful. You will learn about these things, why they're useful later when you start using them. So this is just hoping removing the last element you can also push, which means at an element to the end off area so we can do something like push and hear new element. As you can see Now, we added here a new element, and it's gonna return the new size off an area and the return the new size off on Eric, we have got also something go this cold shift, which means removing their element. The first element shaped okay, when we do it like that, as you can see, we remove the first element. It is gonna be also returned. Que. You can also use the UN chief version off this function, which is moving all elements in the area by one and adding a new element at the beginning. So when we do something like that, my ask well improved, it will be added begging and everything is moved. The PHP was not removed. Okay, that's how it's working on sheep. And there is one very, very cool function we just killed. Sort which, as you can guess, it's sorting the area. That's pretty awesome. As you can see now it's sorted alphabet to carry. So G h MP us, right? Pretty awesome. What if you wanted to sort this area descending way? So from the Z eat set to a, you would only need to do something like video courses. And now type reverse reverse is just reversing an area. Now this descending here is as Sunday. That's pretty awesome, isn't it? You can do it instantly, consult things very easy. Sort is a sorting alphabetic Kelly. And there there is a problem because we have good also numbers how to serve numbers. Will it be the same as you can see? Numbers didn't sort. Well, because we have got 44 should be here, right? So it's not working properly because sort by default is using a function inside these metal . There is a function that these years for company reason, and it is used for strength, not for numbers. So if you want to compare numbers, we should send here a function that is gonna change the default function. And here, as you can see, we learned in the last lessons about functions that we can create an animus function, these very useful situation and with two parameters that is gonna return a minus bi and now we might be. But why? But why? It looks like that because the sort function is using a comparision function that is looking like that. And it has got, um, you know, inside something like, hey, did somebody send the function here? If not, use the default function for sorting strings. If not, use the one that they sent here and it mom should look like that, and it should retain negative or positive number or zero if zero. This means that these things, though, are compared, and they are the same. So we shouldn't change the plate. If negative, we should change the place the other way and we've positive we should change again the other way. Totally eso doing it like that. We'll have now as sending um, numbers. As you can see, they are now properly sorted. We don't need to reverse now because, well, it's not working in a way we can now also change the way it sorted just by changing. Be to a as you can see, it's working eso Don't worry. If you do not understand exactly how he's working, you're just sending a function to the sort function that is using dysfunction. So it's changed the default behavior. You can create functions like that on your own. As you can see now, sending function to a function is useful, and even creators of JavaScript people who created an air. I use it because then you can change the default behavior or some function. And that's how you do it this time. Okay, so sortie sorting alphabetic Etienne array and we will safe uh, here. Um, this is used to sort the sending way, sort and airy descending way. Okay, There is also no, we should those type reverse is reversing. Yeah, the Ari, the older offering. The next function we should call it Talk about it's called slice Slice is just slicing. You know, like you're slicing foot. It is gonna slice thinks inside so we can slice. Let's do it with feed your corset because it's easier. Um, let's slights the video courses and that's for example, slides elements from one to free. As you can see, we have got. Now he Myer school and JavaScript and later everything is the same. So it means that these slides my thought is not working on the main awry. It is not gonna change the values inside there, but you can return. You know, I want things from here, Teoh here and we can return. But we need to remember that it's working like it is. Ah, slicing a lemons from 12 free close bracket, which means that it is gonna slice from for first a lemon, which is in this situation Ph. B. But not including the first of lemon. So it's gonna slice my SQL and Java script, including free. So these signings we've out the one and this sign means with free. So if we type something like that. We go, for example, to five, which means work. 12 we don't want my esque well, and then 345 Which means that we have JavaScript, PDO and Grand Js. As you can see, it's working fine. So this is how slices working and you have got also something go. This called supplies splice is very cool, because when you type something like, for example, one and then you type, for example free, it means that it's gonna remove all elements inside the area from the first position. And it's gonna remove free of them as you can see the first positioning speech be. But it's not including, like with the slice. The first dilemma. So it's gonna remove 12 free alignment. So we do. We not have my school javascript and video, and it returned these values. But you have also probably notice it is gonna remove them from original version off on a right. So it's very important, so it removes from inside of the areas some a lemons, right? It's pretty cool. And you can also this very cool at Newell A monster. So, for example, something new a number. Ah, her head there may be you can adhere as money new values as he wants, so it doesn't to be free. As you can see, we have just added inside the place where normally my skull and jealousy PDO where we added new elements here. Right? So the first argument is meaning from which place we want to start removing elements. And second argument is saying us how many elements I want to remove and then the optional arguments so you can get as many as you want elements that you want to add after, uh, position in egg argument first. Okay, So deads are the most useful for methods that you should know when you're playing with a raise. And now you might be like, Maybe this is that they are not so useful. But later you will see that most off them you with some they used because you will have some processing on areas. Okay, that's all in that lesson. Thank you very much. 25. While and do while: Hello Today. I would tell you both are loops how to use them. And in both situations, you should use loops. Why even bother using them? So loop is something that can execute a coat. A blogger off coat, as many times as you want. There are situations when something like that is very useful. Imagine a situation like that. He wants to get to the result. So with stuff like the document get element by I d result. And now we would save it inside the far able. Like that result. And now we get the result. Inner HTML. And I would like to add video car system. So I will do something. Video courses, Um, and zero. As you can see, we have got now, peach. I want to add another one. So let's do it. Um, okay. 1234512 Free for far six. Okay. So I should have all of them now. What if I wanted now at the break line? Okay, there's good idea. Let's at the break. I have to that you know, here, Here, here, here takes time. Right. But don't you see the similarities between all these lines they're almost the same, right? We're just repeating ourselves. And we have got here in every place. What? 012345 Only one difference. There is one small difference in this code by just the number is changing, right. The number is changing by one. So we can use something like that. What is called lope? Because loop can execute a line of code as many times as you want. How to use a loop. You type the name of loop there many loops in this lesson. We learned two of them. The 1st 1 is good white, which is which is doing which is gonna do Execute the coat until the expression inside here he's gonna be true. Okay, So what can this expression be? We can create, for example, of a rebel? I'm And if it's lower than five, then we'll execute things between these curly braces. Ah, we have got here warning because we didn't create a variable. I'm so we have to created an initialize it with zero. So we know that is the number. And now there is a problem with this Look, this loop will run in different notary If I did something. Like, for example, um Allert. Hi. Now we'll see in tow Infinite, infinite windows. We just see first we know that the second and the third and 550 Faith and, um Bam, bam, bam, bam! Infinite. Okay, because zero is always lower than five, right? Thes expression. We always be true. And so because of it, this instruction with around forever because of it, you have to change inside the loop after, for example, executing all other instructions There I using the post increment Tater post incriminating is increasing the number. Why? By around by one. So it will be like zero one is one lower than five. Yeah, so one to do is lower than five years. So too. So the only thing that is changing in this dope is the variable I and look at this here. We need something Would would change like that. 012345 Right, So this will be perfect situation to use this. Look, we could just copy this up here. Let's around this program. As you can see, 01234 and five is not shown. Why? Because five is not lower than 555 Equal fight, right. That's why five is not printed. So we can now just change these Teoh Death Place. We can just delete this thing because we don't need it anymore. And ah, here I can just do something like that balm. And as you can see, it's working. We just print it all off them at once. Well, we don't have sauce. Why? Because sauce is 123456 We should type your six. But that's still not a good idea to have a six year, because when you add something new will need to change it here. So always try to ride their code that way. Did you use it? Universal way? So when we adhere now length. Now, when you at something here knew, we will be able to print it out. As you can see now we can see sauce. But when you actually hear something new, So for example, for example, I created the new calls about, um I know and you are Js you will see that it's printed out pretty easy. And now we can add very easy the brake line like that and bomb it is sprinted inside these loop, you can even make come Parisians off example video courses with courses off I if it's equal to, for example, my esque Well, I like to do something different. I would like to add to the inner HTML something like before Hello and bomb like that. And as you can see before my Esseker, we can see now. Hello, It's working. So the loop is just executing all the instructions inside. Until this thing, this expression is not true. And as you can see, ah, it's changing on the one value I that you are changing Kier and it has to be changed. Otherwise we would have problems, right? Our 55 folks would stop working because who would just overload him with Duminy instructions at once? And it's very useful for a zoo can see going through the area doing something once, and it's gonna be executed magnetized. Let's uncommon disc out here and leads to something even hard there. Let's for example, imagine a situation. I want to take programming curses right and do something with them so I would do for our a bold programming courses document get element by I D. I would like to go to the programming courses, identification her and then bomb that I would like to, um, go to get elements by talk name, Least item. So I have got no programming courses. Let's take these under the comment. And let's, for example, do something like that that's used result inner html on Let's now go to program at here. Program programming courses What? We'll see. As you can see, we have got to your object html collection. Right. So now we can get toe each off this least elements. So as you can see now, we have good least element. And now bomb that inner html weaken type and we'll get what? C++. If we change these two on, we'll get C sharp. If we change these 22 we'll get java pretty awesome, isn't it? Okay, so, um, we can now change only this value in order to, for example, print all the things from the programming courses. Right? And you can do also some things with them. We can do some operations from them, so we need a look. Why? We need to create a very blind okay off guard. You can call it whatever you want If I is lower than it's good idea toe, take all off the courses of programming courses, bomb length, then we want to execute the cold like that. Oh, and I just crushed our five folks because I didn't add this. Think. Okay, I re opened the Firefox, and as you can see now, if you go c++ see shop and Java printed out easy and we can add here, for example, the bright guy and I like that and it's working fine. And we can now add anything on our website That's the most important part part like that. And as you can see, we added it here, and it instantly was at it here. So you know this called. We are just printing in another place, but you don't need to print it out. You could do some operations. You could send the the values to some kind of program that will send it to database later on their things like that. Whatever you can do whatever with whatever information off your website. Pretty far snow, because it can go to all off these elements at once. That is very, very awesome, isn't it? And now I would like to train with you a bit more, for example, functions because Imagine a situation like that. We do not want programming courses now. We would like Web development courses we need toe. What? Just change all these things to the Web development, right? And now we have good Web development. But if I wanted bothered ones, I would need to have both time, the same coat. And now imagine a situation where you would need to do it at these five times, and you would then need to change something in gold. One thing we need to change in five places the ones in situations like that you should instantly think something like, Hey, it's good idea to create a function. So function dead Well, for example, print print courses, whatever. And here we'll take as a parameter the i d off on order that least. Okay, And now we could just copy this here, and we just need to do what I d off an ordered list is here. It is a variable. So it shouldn't be like that. And here we would not call it programming courses. But whatever just courses, and now we can just involved a job. So print courses and I just need to send Hey, I want this one And bomb. We have got no programming courses. Hey, I want to geo Web development courses and I have Web development Constant. I want both courses and I have both courses once. That is just awesome, isn't it? So now you can see why I showed you with so many lessons. Ah, all dysfunctions, things all this. Ah, all these variables Why I talk about it so much? Because when you understand this thing, you can create a coat which is the most important. That can be easily change later, right? That we work always without you making making too much effort, right? And everybody, This is very cool. We understand your coat because of it. The results are another low Buddhist called do why we could do something like do. And then why like that? Let's take this under the comment and let's go pee it here. As you can see, it's working the same. But there is a small differences between the dough. Why and why? What's the difference when you're doing? Do I Look, you always will execute the think you, which means that even if the expression like that is not through at the begging at this once this thing will be run on. And, uh, this time we're using here. Value 5 51,251 here, So let's change it to zero for a second. As you can see, we printed Ph. B at least once, right? And if we change this to this loop, so we do something like that changing 20 as you can see nothing printed by because this expression is checked at the beginning. OK, so if it's not true, nothing will be run here. The do I will be Ron at least once. So that's the difference you should remember about. Do while and were Weifang function. I most time used the wife function, but there can be a situation where you have to use the doorway when you want to run something and away, even if the if the even. If the condition is not so, let's uncommon this and the cool thing about all things like that is that now we can you check something, making company reason. If, for example, the guy here self if courses off the I equals the PHP, I want something special for PHP. So I want to at this is my language and bomb. Ah, Is there a peach being site? PHP. We have peach being, um okay, we should tear at here if inner html This is my language. It's working right for PHP. We added something that we can change these toe, for example, the compass and it's still working All we can also something like or it equals Teoh Maya school. And we have got it now with the PHP, I talked about the wrong way. Let's use Java. As you can see now it is here and it is here, So that's when you can do something special for both of things. That's why you need operators like that. As you can see, our programs are becoming a bit more complex, but that's that's how it's gonna be for in the future. Okay, that's going that lesson. Thank you very much. 26. For loop: Hello. In the last lesson you learned Waters Loop and how they works in this lesson, you learned a new loop we just called for. And well, the truth is that it's just a different name for why it is gonna do the same things like the Wild Blue. But you need to just type something like that. As you can see, it's working when it's why is also doing the same. So why even bother? Well, it's a good idea to bother about this because this semi colons are, you know, separator for initialization and for the think that has to be done after executing all things inside the look, as you can see, still working. So it's a separator for things like that. Why something like that needed. Right now it's cleaner, don't you think you don't have good now, outside of the loop, the initialization and inside after the last line, what has to be done after each around through the loop, you can forget about this one and these one outside. So here looks a bit weird because, well, you don't know exactly if it's really connected to the look. I really prefer the former because of it. It's just cleaner is easier for reading, at least in my opinion, but it really depends on preference off other people. So all in all, you have to know all possible loops because, you know, we don't know which one will somebody else use, and you will not only create your code on your own. Other people we create. Cody will read their code, and you need to understand it. So even if you don't like this, you have to understand you. Even if you don't like wild, you have to understand anyway, so far will be doing the same thing. But the difference is that here at the beginning, we're specifying what has to be done at the beginning. And here at the end. We have to specify what has to be done at the end, when you execute all instruction, the black like a block of coat after each run, that's all. So let's maybe type it here for initialization off vary boose, and that's starting now condition. And then what has to be done after each lip after running each look right, they tell you can of course, create you Manimal variables you can create more complicated. Ah, complicated conditions. And you can also, you know, increments more things like that. But most time you will just have a for loop looking exactly like that. So it won't. For example, printing video coasters will change the video courses that length. And we would like to only print here video courses like that. And he's working. But the zoo really very cool. Don't you see this? We just instantly printed all these things. Ah, it was like one second we changed on the one this line of co bam bam bam! And its print it. I really love Lopes. I hope you also we like them telling that lesson. Thank you very much. 27. Break and continue: Hello. Today I will show you break and counting you instructions which are used within lips. Let's great a simple situation at the beginning. Let's kill create a for loop which is gonna just show, for example, five numbers. Okay, so it should look like that right? We are creating were initializing a variable and we assign it to zero. And if zero is lowered and five, then just increase it after each iteration. So after each run off this look and when we refresh it with, for example, other think I with 012 free for five And not always. You know, you don't always know everything. What is inside here? So, for example, you can go to ah, least off items you can go to the people. And for example, when something happens you don't like you want to break from the loop And in order to do it , you can type something. If I equals to for example, five off to, then break. What does it mean when we're on it? Now you will see 01 n nothing. Why? Because two equals two and we say break It means get out off this Look. You know this is a simple situation. But as I said, you don't. You could, for example, go to some kind of very. And if this ever equals to something you don't like, you don't want your for example, for loop to be executed in the more. Then you just brag it. Okay, Nothing after it will be run. You have got also something good. This could continue when you do continue you c zero one and you didn't see only two. But here, hey, there is free for And then all right. Why is it working like that? Because continue, continue is working, working like a break. But after breaking once the loop, it still calm t news. Okay, so it's just breaking it once. And what? Why? Something like that would be useful. This thing is a bit use is useful when you do things like, let's, for example, get the programming courses. So that's great. If we're able for read, let's get it I d. And let's get a women's by talk name all this item and let's go to them so variable. And if I is lower than programming courses land than I plus plus okay and now I like to, for example, at something like even now, before each off that labour here. CPAs, Patsy Sharp, Java, Paschal. How would I do that? I would just go to the programming curses and at inner HTML. And what Normally you would do something like that right on, you would add. Now, even the problem about this operator is that it would add it at the end. Oh, we should, of course, get to each of the guy. So like that and a so you can see we're adding it at the end. If you want to add something at the beginning, we have toe unlikely to something like that. So we're just assigning something new plus something. What was their all weather right now? He got even everywhere. But what? This is not even each time, right? I want to do it on the once in Why Once its ah one did. Even so, how to do it? If I is with with the moat model I model two equals zero Then I want to show even as you can see now, he would even when it's off. So it's not working. Working right? Why is that some because, well, we know that we're counting in a ray. Our numbers from 00123457 And in our situation, well, all even numbers are old numbers or all numbers are even right, because what indexes are just not in the bright position. So we will just change it by using this sign here. And as you can see now, we have got to even even right place. So he added into the right place. But the problem is that well, imagine that we had good here. A simple thing to do. And after eight, we have got here lots off instructions, Okay? And let's see how how is going after executing this thing is you can see we can see here. Zero on here is nothing even. Okay. One to and nothing, Captain. Right. We didn't change anything free. Okay? So sometimes we don't want to do all these instructions here like now, because we don't need to execute the other now or we don't want to do something. Girls with them. We've other guys, right with the one that are out. Then you can just use the continue so otherwise just continue and now we can see one and free only here. As you can see, these instructions are gonna be run on Lee. If it's ward to round them. Okay? There's only a lesson. Thank you very much. 28. For in: Hello. Today I will show you for in loop, which allows you to process objects pretty fast. How does it work? When you typed for, then you type here variable. That is a temporary variable. You can call it whatever you want. But are we call it property? Because it really is a property here. Okay, it'll take the value off property in person. Here is the name off the all project. You want to protest? Okay. And though Carrie braces Michael and it would go free times because you have got free proper properties inside person. And when you dupe, for example, property, you will notice that with the name Serling and eight, which means that here is always a value of property. And we also learned that we can do something like person. That name and this thing would show us what the value Both the name and we have got to you Arctic. But we also know that we can act us this thing by typing something like that. This is really cool because this thing allows us to use a variable here. You can see we can, for example, do something like that, and it will also war. So with that thing in our mind, we know that we can use what the name and now the value that is changed to name, surname and age. And as you can see now here Good Arik, vote Arctic 26. And that this awesome, isn't it? So we can go to all the values inside the object pretty fast and we can use it for whatever reason we wants of. For example, variable X, creative Herbal X and we, for example, want to at the X these values, right? So it would do something like that and then we will alert it. And as you can see, we have got undefined Arctic podiatric 26. Why undefined? I didn't. Especially Why? Because by default, when we do something like that, this is undefined and we did something plus equals. We are adding just and you think to the undefined. OK, so it's a good idea to sometimes initialize something with just on something that we not do anything. We've the other variables with the other values. As you can see now we have got adequate Patrick transistor. So it's just like a new It's like something like zero for for adding cried, We have got here an empty string. Okay, so that's how we go through then object that become object. But you also know the every IRA is also an object. So can we use it like that? Um, that's our dates This time, As you can see, we can see all possible values inside on Eric. So it's also pretty fast thing that allows you asked to go through the area. But the problem is that using something like that doesn't allow you to, you know, Ah, you do something like increasing your index by to buy free. You have to just go to all of them, right one by one. So it's most time used on the on typical objects like that when you cannot you know, you don't know how many properties are there. How are the called and other things like that? Let's see how we will work with the programming course. Of course. Assume so it would do something like that. What will happen as you can You can see we have good html at least item a lemon and wow. Here we have been function and son and another function and four. Why? Because well, we know that it's going toe all possible properties and one off the property for the thing that was returned here. So for the collection can check what? He's dead by typing something. Dad. Right. As you can see, HTM a collection is something good is called function. Another function and the number you have probably noticed that the number was equal to four because it is a length right. How many off the murder on and well, we had all these elements. So how to do something like that? How to get all off the values without this undefined Think you how to do these? What we know did we can check using type off the type as you can see what good object, object and then function function number. So you have notice provided that at least a lemons that are the one that we want to use our object, The other things are not object. So we could just decide, Like if type off Well, we can copy these fully is not equal to what to the object. Then just break. We don't need to do this live animal as you can see now here. Good. Four times object and then nothing. So as you can see, break is really useful Because not always. You know, you don't always know how you're, um areas looking How things are inside you is not like always are creating everything right And now we can just break And we easily can do something like in their HTM all. And we can work with these values, right? Pretty easy. You could also use the continue Continue will also work pretty OK, but you can see. But the continue, remember, is working like that that you are continuing then So it will be run again. It will be checked again. So we're just in time this time. At least because you know, you have probably noticed that the objects are at the beginning, right? The least items are at the beginning. At the end, we had two functions and a number. So Bragg is better in this situation. But you know, sometimes you want to only choose objects from the enormous ah, objects of objects. And you want toe only truth objects then and you don't know Where are they Play. So this is good idea to then use, for example Continue right, because then you will go to you could process all object and pretty easy. Okay, there's only good. Listen, thank you very much. 29. arguments object: hello today will exercise a bit. I will show you object. We just called arguments and it is storing all arguments that are sent to the function. In order to use it, you just need to take the function. The name of function that's called it, for example, at numbers. Would you add numbers and instantly when you create an IT function, you have good insight. The function created an object which is called arguments. Okay, you can now type stuff. You are humans length. And when you do something, Ivor, variable some. And now we will involve the function with, for example, free 76 and four. You will notice that if we do something like alert and refresh, as you can see, we have good for because we send therefore argument. And inside these arguments Well, inside this object, you can access each off these guys sent here by using index. As you can see, we have got free The second guy. Seven. The third guy is what six. Um, I'm sorry. It is the fourth, right? I mean, we have to remember how things are indexed. So six and the last guy is for so it's working properly right? We can access all these values so we can use it in orderto at, for example, these numbers and you have probable now notice that we can send here s minute arguments as we want these very useful for situations like that. So how Teoh make some off these arguments we can use, for example, a lobe, right? Because you can go to all off the things inside the object so we can use, for example, lobe, which is called for in So we can go create a party temporary inside the arguments object. And then we can actors each off the of arguments value like that as we learned in the last lesson. So we can allergies. That's all of it. Um properties, property so free seven seeks for everything is working from went to all these values. So now we can add it. We should create a temporary vory boom like that, and that's just add it to this sum and returning right wing to return it to the place where we involved the function. And we can other the some outside here. As you can see, it's 20 So it's working free plus seven stents six plus four is 20 now. We had, for example, nine. So we should be 29. And it's working fine. So we can know Senti Azman and arguments as we want to. And as I said, these, um, training lessons. So let's remind our says how everything is working so everything is wrong from top to bottom. So we also need to remember that the functions our start before invoking anything right in the temporal, over able and well, they are not the cold inside won't be executed until we invoked. Right. So it starts somewhere, okay? And then now we're creating a variable that we have a value from dysfunction. So we're like jumping queue, and we're sending free seven six for nine to the object, which is called arguments. And this is a bob an object, right? Because this is an object, it can store values. And this object is seems, is similar to the area because it is storing them in 012 free indexes. Right. And we can use the four look for, for example, adding things. So we are using this some here we are assigning zero to this some why we're doing this because we do not do it. As you can see, we have good know the number. Why? Because a debugging if we do know a sign zero sum is undefined. So undefined plus plus any number is just not a number. That's why we see so something like an a n which sends for know the number. So it's very important toe assign here zero. And now we're just adding each off the value of this arguments properties. And then we're returning thes value here and we'll alerting it. We can do it differently. Way right. We can do use the y low bar on the other, for example, for we can create in part of a rebel like that if arguments that length I plus blast and we can just at dese very liked, um, off course. Right now we have good different index, as he concedes 20 now, So everything is working fine. That's only good lesson. Thank you very much. 30. DOM: Hello Today we're going to talk about Dome, which sends for document object model, and it is really very important topic. Let's focus on model model. What does it mean? Model is a formula for creating something and they created a model off the document off the HTML document that is universal for all browsers. Who is day? Well, the people who created a specification for people who are creating browsers. Okay and well, we do not need to care. Who are they exactly? We just need to know that we have got the universal method for retrieving, for changing, for deleting things from our website. And this thing is really powerful. Let's go to this website. As you can see, we have got here apart on at the basket when we click on it as you can see, we way we saw a flying course into this basket and we saw it instantly. He dynamic Kelly, right. We cannot add another guy and we can see it here and we can remove and then bomb remove. This thing is really powerful and it gives us something like, you know, allows us to change things on our websites dynamically and because of it. Well, you know, we don't need to show everything for our uses at the start of the when they visit our website. You know, it would be stupid to have a basket here at the beginning because, well, nobody has used basket he had, right? So this is stupid to have it then here is just taking this place before are not focusing on other things on your website. They should. They should focus on other things that they do not add anything to basket yet right. And you know when they add something, the guy on your website instantly knows that he added something and he knows where is that basket. So it's powerful where I think that we can use. And you were in this lesson we not talk about action. You know, when you kick something on something, this is even and we'll talk about evens later. But the thing will talk about is how toe you know how to check Where are things on our website, how to retrieve them. And this thing will be using in next lessons, for example, in even lesson. So it's very important toppings of focus on this person because it's very, very important. So there are many properties. The most important one I think are here. And some methods that will talk about I think that you should download something with this skull. Document Object. Inspector, When you downloaded, you can go to the developer section and open it. And this will habits, you know, going through this document object model. And it will also have me teach you how it works. So the first thing you should know about document object model that everything in the document object model is called and note. Okay, this is no disease. No, this is note. This is No, this is No, this is no. Did you know everything inside is called a note we have got Also something will discuss elements. Elements are just talk. So html headboard did if Dave the day our talks right elements and the dude can use. So there is also many other things. Like, for example, tried. What is a child? You know, a child is something that is just a lower in hierarchy, a hierarchy silver. And so, for example, hat is a child off html. This is a child of body when we go to the body and we go to death, for example, this Steve. Oh, we opened another website that's opened this one. Devil, operate down, Inspector, As you can see, when we go here are on ordered list and then we have got here our release item and all this list item is the child off on orderly? This under the lease is a child of body, and the body is a parent of another. This another. This is a parent off this lease site. And this one, this one, this one There's no, there's no there's no So it's pretty easy to understand. You have got also something good. It's got siblings. This list item is a sibling off this list item. This dis item is a sibling off this text note, okay? And well, that's the most important words you to understand in a document object model. So, as you can see, it is a formula that that's how it was created. And now you can access properties inside it. And this document object inspector is really helpful because when you go here, for example, and you choose these Manu and you go to the JavaScript object. You have got all properties that you can access. Okay? And these properties can be also methods. For example, the one that you already know. As you can see, we have got here, for example Get elements by talk name. Right? So we use these one when you go to the document. As you can see, we use document object already. You will notice that we have got here. Ah, function that will e skull get a lemons by I d get a lemon by it, right? We use it. We use it to get a lemon from the document and then change the inner HTML. So when we get for example, toe another lease and then we go to the list item, we could change using the inner HD a mile. As you can see, something with the skull CPAs bus. There are many, many, many more properties, but the most important one, I think at least, are these one of these ones. Okay. And, well, let's let's training. That's let's see how it works so we can use the document and now we can access we using these methods many things. For example, we can actus elements by the name by the target name by Klasnic. But we'll use, for example, the I D. And we'll get what a programming courses and let's say, save it toe variables off example like that. And it's really important to safe things like that into a variable. Why? Because you know all the time when you do something like that, your computer has to work right, and it takes time. So if you save these here, you will not have to do it again. It's just in our more than you will not have to do it again. So it is very, very important to do something like that. It took to create a temporary of a Rabel because if you had to repeat these things again, you will just make your computer to do the same thing again. Which is just no sense, right? It's good idea to have a temporary variable like that. So as you can see, we have gotten object html on orderly. So we got this. Think you and it means that we can access for example, the I didn't difficult or here s O i d. And when we go to attributes, let's find their tributes. Oh, as you can see here is a property attributes. And inside these attributes you have got it isn't a right and you can access zero right. You can access the first object And inside this object when we go to the no, the value As you can see, we can access programming courses, courses. So it is the value off this attribute. So let's do it. Why no x that attributes the first element off these away that note value and bomb. We have good programming courses, but you know, this is not the best way of doing this address because we have got in this situation a function we just called get attributes. When we use the function like that, we can just, you know, say I want an attribute. We just called idee, and I want to see what is the value of it. Oh, it's programming courses. Very cool. And we can use it later for something, right? We can, for example, access every possible um I love Mendel now website with trez go the class like and I want to do you know after, for example, using the mouse over this place, I want to see something, girls write something that you can do whatever you want with the information like that. So it's very useful. You can also set something so you can do X, that set, attribute and you're just typing. Then the name of a tribute to heads of, for example, class name and then you add their name off the class. So, for example, test and you will notice that now. Well, almost nothing has changed. But I have got here a fire back which is, you know, observe ating everything on their website. You can download it on. You know, the the plug is for the Firefox and he will meekly gate and we go here. As you can see, we added the class which is called test, and this is even more powerful because after adding a dynamic and like that and if we had, for example, something in our station. So let's change the color toe for for example, red. As you can see, it's red instantly, so you can now is after, For example, somebody creek bottle, you want to change the color and you can do it dynamically. After you somebody creek Here you want to show up. You want to change the display off this thing from non to Ah, do the absolute and it will just show up instantly. That's just great. How powerful is it? Ah, do you see it? You just need to add an attribute and everything is gonna change on a website on life. So this is for setting attributes. You can, of course, removed attributes. We could add an attribute and how you know I don't want it anymore. I want to remove this attribute, which is called class and, you know, because of removing the class right now, we do not see the right anymore. So we could have, um, like here when at something to the basket and when somebody creek removed then if it was last attempt and just display it said the display off this box to non just disappears. Pretty awesome, right? But we don't we don't know right now. How toe could see if somebody clicks something. We'll talk about it later when we talk about evens, so go ahead of the next lessons because, well, they will allow you to do powerful things. Okay, so that's the That's the That's one of the most important things. But you also know how to change things inside. So we already used, for example, in the HTML right when you get the programming courses. So we use programming courses. We are inside them in order. Greece, for example. We want toe access. The least item here. Uh, how would we do it? We just type that and we would access it using, for example, Ah, child notes diagnoses in their ring off. Know that on level below in high racking. Okay, so it means that we have got all leased items, but we also have these texts. What is this text? Because, Well, this is not the sippers plus c sharp because C c plus plus and C sharp is inside off this item. This text is just all the white spaces here. So we removed all white spaces. We wouldn't see attacks like that. Okay, um so by having a child notes off zero we're not Is that when we refresh it? Um, Onda, we something like that. We notice if you have good object texts, which is that just a nice space? We can access these names, but we can do no devalue and we'll get a value of it is considered here are all as you can see. Why spaces? But we want the second element. So we want to do something like that. As you can see, this is not not now, because inside least element iss an element attack. And there is right now at an inner element. It would be stacks. And the node value is right now. Nothing. The node value is only for text. Okay, if you want to get to the text right now, you should type something like I want to get now. The for example, first child. So the first tide of Lee Silom element is this tax and this you can see. We can see now a text, right? And what? We can see a text because we also accessed it using the node Valium, we did something like that will notice that he would have object text. And if you want to access it their value, we have to type node value. Okay, So the value off text is inside no value. And this is a direct version of you access and something like that, and it's taking some time But sometimes you will have to do it that way. But you can do it a bit easier. For example, using world get a Lammens by tech name and we have good now all leased items, right? And because we have got all these items, we can now access inside least items work. Um, way we have got all these items so we can access for example the first element. So it would just least element And then we can actus inside it. The first child which is what which is a tax and then we can access for example node value . But you can use, for example, would also inner HTML. As you can see, we have got now here c plus plus. But there is a difference before between interest emails and texts countered When you do something like that, the inner HTML we show you something like that but the text content we'll show you exactly only text content. The problem is that it only is supported from Internet Explorer nine plus. So if you want to support these websites, Rose is unlikely. You have tow use what you who would have to go to the first tried in the node value. The problem is that not right now is no because the first child has changed. We have got now the child of this item. The first strike is bold, and then the first sight of bold is suppose plus, So we will need to do the first child again. First child, first tribe. And as you can see, we have been Nazi past. But so it is getting a bit hard. Sometimes you want toe act to something, right? But if you understand what this part and what this child, what is known, it would not be hard for you because you can. Then even, you know, check here when you go to the least item and then you go, for example, fast, right? As you can see the first shot off this least element, it's attacks. Then you can go to here, and you can see, for example, that the note's value is c++, so it's pretty powerful. The node name is name off the node. Most time it's the talk name. You can also use the fact that no type free is also always for the attack a lemon so you can check if the attack is really attack because, you know sometimes a note can be attacked. Sometimes it can be on element yuk unjust. Check it. No type. It's free then. Okay, it's an element. It's an attack. It's an element. You can use it for something useful. Right? Um let's see how how that's next sibling is working. So if I am in our noted leads like that and then we get for example, the child notes. So the area off all these items and we get, for example, the first person we have got the text, right? But if we do bomb, I want next sibling you will see that we have got object at least elements So it's almost like we did something like that. So next evening, previous sleeping easy was for accessing next things inside and inside and no, right next knows inside the north, the parent note would would fire in the note would get us backwards. So if we're in least item right now, we'll go back to the an orderly. So it would be almost the same like this And you might be like, But why would I need something? Because sometimes you have got as the first element in your function sent from somewhere an argument, right? You have got an argument, and it was sent to your function. And you have got and note that these, for example, here and you want to somehow know how is the parent coat also is inside an article on order this. Oh, and it has gonna add in the identification in identification like that. Oh, so I can do that and then and that. Okay, so that's how it works. You should know, trying a bit, you know, half plant play. We play with all these things here to see how how, how they are working. That's only indeed, Versant. Thank you very much. 31. querySelector: hello today are you show you two very useful metals which are called query selector, inquiry selector all. And as the name suggests in this situation square, it means requesting something from our document by typing a selector, a selector that looks like the same. Like we created things in CIA's s When you want to ask for all possible cook elements that has class test your just typing that test and you get all the elements and you can doubt then do something with them, like editing this type in HD. In javascript, you can do even more, right. You can add some event that we'll talk about later. You can, you know, change the position off the object. You can change the text inside other things like that, right? And the square selector allows you to use selectors that you know, and that's really powerful. It allows you to do things pretty fast and easy to understand. So you don't need to then right? So long called Like here you just type something like instead of that that query selector all and then you type. I want all programming courses and I want all these items and then we just refreshing to have got the same result. So it's powerful, right? But there is a problem. It is not supported in Internet Explorer six and seven totally. So if you want to support this web browsers unlikely, you cannot use it. But I have got a good information for you. There is something very similar injury aquarium framework and then you can use it in ah, in Java Internet Explorer six and seven. So if you want to, you use it if you like it and you want to support these were brother, which are all than most I'm not. Not many people are using it anymore. Then unlikely. You have to Ah, stop using it or just changed to day choir and it is half supported in Internet Explorer and Internet expert eight. I would do, I mean by half support. Well, you have good selectors that our advance and not advance They're not advanced. Like choosing a lemons by the class Name O R by the identification her and advance one where you want to choose that chides the seven child off the off. You know these displays, for example, I want o choose the last child. Oh, I want to choose the first start instantly. You can do things like that in the CSS advance with the advanced selectors. So, for example, I want to choose exactly the one on, for example, and tried. And I won't. Third guy right on the Ted guys. So it means that we'll see here Java 12 free. It's Java. But also it means that well, here we have got an array off one a lemon. This is not good idea, because if you know exactly want to choose Onley one Think from your website. You shouldn't create another because you're taking a spice. The second thing is that you got to think time right this creep is gonna look for more things like that. And so it's good idea to use the query selected in some quarters. Selector is selecting the first occurrence off query and returning it as a single variable . Okay, so it means we don't have here now and a right We just use something like that and we have good Java. But we are treating only one and lemon. So if you do something like that, you will have now the first a cure. And so it is the surplus parts, right? The first occurrence off lease item inside the programming courses. The first one eso if you want more, you have to just change it all and what I want to. For example, choose all possibilities items and I would have I would do something like that And then I can access if we have the indexes in array so I could go see plus blast. I want to get to this one. So is 12012 free for 56 So I will just type six here and I have gone Js pretty awesome, right? You can choose here whatever you want with very advanced, even selectors. So you have got the powerful way for selecting things and then doing something me something with them. So we know that we have got here Methods like Gettleman by I d get elements by tech name that are supported in all Web browsers. But there is also to more get elements by class name which just choose by class name. But they are not supported in six and seven and eight Internet Explorer in the version like that. So it's not good idea to you to use something like that because even quite a selector is supported in the six and seven right Get elements by not but by name is not even supported in 67 and 99. So if you want to choose by attribute, is better to use query selector also because well, you can do some things like that You think sees the selectors These not cause about the C s s selector. So I will not go through all possible things here. There are many information on the Internet about it. Or maybe I would create something of course about CSS. Ah, but you know, you can just use whatever selectors you want in order to choose things from your from your website. And the cool thing is about it that now you don't you can change not on this tie, but you can do whatever you want with it, right? You can change the position off this proofing. You can resize it. You can change the displaced with the style. You can add some event or some other things like that. Okay, that's only did lesson. Thank you very much. 32. Changing dynamically styles using js: Hello Today I will show you how to change Dynamic hellis STAIs using document object model in javascript. First, you need to request you to query something from your website in order to change it right, you need to get these elements So, for example, using the choir selector all using the least item talk here. We just selected all possibilities items on our website. So we have got them now and we want to edit them. Mean we want to change the side for example the color how to do it. In order to do it, you can now access them to these variable and well, this is a narrow. So you can access for example, the first first element using their zero And now that style. And then you can access the style you want to change and well how it's called. You can go to, for example, re Ference created by Mozilla Developer Network. But it really doesn't matter because all almost all properties are named the same in javascript and seizes. The only difference is that they are using here you see the dash and here they are using the upper case right most time and It's just a single word, as you can see is just the same most time. So you don't need to worry about, you know, remembering everything. So if you want to change the color with just type the that color equals And now, for example, red And as you can see, the first guy is ready even want to change the color off the seven guy, as you can see ground areas is now right, Right? Why the seven? Remember that we can't from zero. Okay. So you can now change whatever you want. You can, for example, said that display to non right. You can hide a lemons like that. And right now we are typing everything here. We want to execute something. Like for example, for example, discovered after clicking something. And this thing is called evens and we'll talk about all these things later. But you know you have trouble notice. Well, do I have to change it that way? Off course. Note. You can use what you can use when something is repeated many times something goddess called a lump. So, for example, for variable index inside the courses, I want to change for each off them right? Display nine and everything disappeared. Well, let's change it to, for example, a color. As you can see now everything is ready. I want toe only. Choose, for example, programming courses. Okay, let's do it pretty fast. Ah, I have Good now programming courses, right? That's just also so in order to access a style, you just type that Styx on the element and then the name off site we want to change. But is it the best thing to do to change things like sites from the JavaScript coat? Not always. You should most time at a class, okay. Like I e I showed you in the first Lexus lesson about the document object model that you can add an attribute, for example, a class, for example. For example, you can call it ties are another thing. And you can add STAIs in this tide that CSS by adding attributes. All right, Why? Solution like that would be better. Because you have got then starts only in 115 You don't need to remember that something is changed inside ideal JavaScript code. Okay, So it is better to change sides by adding a tribute rather than do you get dead way? Okay, You can do it, but you should avoid it. It's better to add attributes because it will be easier for future maintenance off your coat. Thank you very much. 33. adding or removing elements: Hello Today I will tell you how to add and remove elements on your website. In order to do it, you have to use create element method and then John Stipe name off the attack. So let's do it. Document that create element. And for example, we would create Element P, which stands for park. Let's save it. So for example, that saved here and now we can access it and we can do whatever we want with it. But you to remember when you create a lemon, it is not in your body. Three instantly you have tow added. So when you refresh it and you use the fire Bach and you go here, you can download the fireball bark. It would be in the bonus bomb of section of the Of course, you can goto the re here and as you can see, it's not human yet, right? You have just created it. You can now do some night be Stichel or red. You can do P e class name union. You can create the test cost. You can do p. Inner html is gonna be, for example, some think can you And as you can see, it's still not here, right? Nothing here. Nothing here You have tow added. You have tow a pent this child because it is a child you can append to and note. So you can, for example, get bolder so we can do document query selector and we can access body And now we can save it to the temporary variable and we can add to the body to the end of folder A child and we can just die pp. And, as you can see now is here. When we go here, as you can see, we can see it. The class test style colorized something you So everything that we describe here is now inside here. So it's pretty Elson, right? We just added something new toe our document that was not in our stars, Scott, as you can see now in our source. But it's not visible. It's only visible with the fire back because the fire back is just, you know, constantly refreshing this this place some It's very good d back toe, but you might be thinking now. Hey, I told you that our inner HTML can be used for adding and HTML talk. Yes, it can be used. So why Boulder using something like that? Because when use an inner HTML, everything is gonna be reset inside the inner HTM. Mel, it means that is gonna really be re past. Okay, What does it mean? Because, you know, doing like a But what does it mean? What does it mean? That is gonna be re purse? Let's do some exercise. Let's create inside here another paragraph. And with the identification, her for example. Ah, test. Do. All right. And now let's get it. So document Get the lemon by I d, for example, because I don't know do to you, Squire Selector now and I will get tested. I would save it. And now we can do something with it. Like we can change the color so style, our phone size. So we changed the phone sizes. You can see it's working, and it's okay. We edit here when you check the fire. Bach. As you can see, um, we have got here now. Phone size 14. 14 picks us. We added it. Everything is working. Fine. But there is a problem. If I had something new using any and urged him and this is the most most important thing. When I do something like that on, I had something you I know for. That's enough. His work, it's working. Still, the problem happens if you'd want to change something afterwards. So if I wanted to change here the form size as you can see the size increased, I would I know, changing toe eight fixes. As you can see, it's not working at all. Why? Because I told you that everything is repairs, reports every time you add something to the inner HTML like that, which means that if you adhere for find this thing is removed. It says I created again and because everything is you run from top to bottom when you are in 9 25 we are accessing that paragraph with I detests too. And when we adhere a number four toe the inner html right then this thing is destroyed and we do not have actors to eat animal in order to access. It will have to do against something like that. And then, yeah, it's working pretty fine, right? But it's not how we should do think sometimes, right when you want to have access to something throughout the world the whole document and it really will happen a lot of times. Then you need to create element manually. OK, but otherwise it's a good idea to use in their HTML because it's faster and it's easier to use right. You will later create something worthy, sculpt evens also and they are also destroyed. Anything is destroyed when you're adding things like that, okay? And it's slower when you're doing it that way. But you know, if you can do something in, you know, one function and you don't need to access it later, then it's good idea to use inner HTML. You can even speak up it by, you know, creating a temporary string and assigning the big string into the inner HTML at the end. We'll do something like that in the next lesson when we would train something eso that that's how it works. OK, you are using in our HTML when you want to just do some simple a simple action you do not want toe refer to the A lemon a lemon later. Okay, because it might bring us some problems. It would be hard to detect right to de bark something like that what happened. But I have actors here, but, oh, how? How? How? How? It's not how it's done that after this line, I can't change it right? He's just like, Whoa, really, you have. You have to just know how the inner HD Molly's were working. Okay, so now how to remove a lemon? That's and it's pretty weird because if you wanted, for example, remove the programming courses or Web development courses, let's try these one. We'll need to first get it. So choir a selector, for example, and then programming courses. You need to save it somewhere. So who did something like that? And as you can see, their function for removing is called remove chart. It is removing child on. So right now we are in the main thing that we want to remove. So we need to go up using the parent note to the power and and from the parent. We can remove the child, which is programming courses. And then, yes, you've just removed all things from the programming courses right when you go here, as you can see, we don't have programming courses anymore, the's expanded. You might be wondering why there is no a function like that. Yeah, there is a function like that, but it's pretty new, and it's not gonna work in. Most Web brothers don't use it. Don't even bother using it because most most time you will not work. But also remember that most time you do not want to remove anything from your from your HTML code. Most time you want to just hide something, and for hiding, it's better to use starships. You want to just change display from absolutely no non on or from non toe. Absolute on something like that, right? You can change opacity. Whatever you most time. Don't want to remove something because we are removing and adding it takes time, right. It's better just to change the change of the display by for, for example, changing the attribute class. Ah, on removing it later, right? Or just changing the style that this play from none too absolute on the way you will. Probably after these cars want to also learn something. What is called Jake wear with Jake wear things like that are really even easier. So just after these cars, go ahead and learn something with this country query. Because it will have you even more. There will be just plenty of useful functions that will be easier to use. And they will be. You know, you can use them in whatever brought browsers. He won't because Jake wear a supports all browsers. Okay, that's all in that lesson. Thank you very much. 34. Loop inside another loop: hello today with a train a bit, we create a multiplication table that will be dynamic, Kelly added into your website, and we will train something. What it's called loop. We would create a loop inside another loop and I will show you how it works out. So let's start from taking the diff with the I D. Result, because we need toe at somewhere Are multiplication table. Okay, let's save it and we want to add now here some content right later. And we need to think if you want to use the happened child metal or we want to use the inner HTML, what is the advantage of using up and tried here? If you use up and up and child, we can then create all elements. But well, creating elements is pretty slow for JavaScript when you have to create a table table, rotate automation, take about dimension to D t. D. Right there's lots of them, and it will be also not clear coat. So we don't also need the referring asses to the Zvereva's aerator. We just want toe assign it at once. All right, so this is bad idea to use up and try it better idea to use inner HTML, but we shouldn't adhere. You have something like do something like that table and then we shouldn't do something like that and then just, you know, repeat a buffet table or maybe table dimension. Why? Because, as I said in the last lesson, when you do it that way, everything is re parts recreated again, right? It means that it takes lots of time. That's why we should create a temporary We're able that we just store multiplication table . OK, it was store it and we have the stable just here, right? And at the end, at the end, we're just assigned to inner HTML The result. Okay, and that will be just enough for us. So we want to create something that we look like this right, a multiplication table. Let's refresh it because they don't have anything now and let's do it. So I think that we should use the loop because we want to multiply one by two by three by five. And that's etcetera, right? So for far are able I equals zero. If I is lower than 10 and I plus plus, which means that we want to right now Repeat this. Think 10 times from 0 to 9. Why? Because that eastern lower than 10 note Which means that 10 will not display at all. We we do something, for example, like that multiplication table plastic calls I and we'll see the on the result from numbers from zero to now, right? And it's pretty easy to understand, right, Because we are what we are creating a temporary of a rebel. We are assigning toe I zero. And if I is lower than 10 then we just want to repeat all that instruction until I is just greater than 10. Right? R equals. So we should change is right, because we don't want from one don't want hear something like zero want toes free but won't want to Free for 2 10 is the basic multiplication tables So we should change it to something like that And now it works pretty good Let's add a space so it looks better. And now we want what a second line? 1/3 line how to create next lines. Well, in order to create the second line would like to multiplied these line by two. Right? We like to multiply one by toe to buy two free by to 4 to 5 to six by two. Obama, right? You want to create third line would like to multiply the first line by free by four by and my mom So how to do it? But if we do it something like that, we adhere to. As you can see, we have got the second line instantly, right? If at your free we have got the tired line four thought line five, fifth line. So the truth is that we want toe run these instruction But we want to change here Avery able 10 times. So we should run f loop inside a loop so far of are able and we need to create another were able Now when Jay is lower than 10 j plus plus and want to multiply here by J and even not is that we have got now multiplication table But what we do not have Ah you know the break space So let's add it. We shouldn't add it here because when we added here we'll have it after each number We want to add it after each row, right, So in order to have it after each row. We should add it here. And as you can see, we have good now Multiplication table. It doesn't look good, but it works pretty good, right? We have good. Now he want to feel for fighters. 10 246 20 etcetera. And now let's analyze this. Go the beautiful because how you know you might be like How does it work when the assigned here? So I won. We're checking. If I is lower the or greater than 10 it is lower, which means that we can now execute all the instructions inside the loop. So we meet in line nine a loop again, which means that it has toe execute before going toe. Other instructions like, for example, that one Everything inside these loop as many times as the conditions says so. We are creating a very able day and we assign one toe it. If one is lower than 10 as it is lower, then 10. So we have got here now one multiplied by one and then because we executed these instruction, which Waas said it should be a you know, executed. We have to we have to increase J. So it's not too. And we check again. If two is lower, the are greater than 10. Then execute again this thing. Because while it is so, we have got no one multiplied by two. So yeah, we have got now they still here. Okay, great. Then we have free 456789 10. Right. So if you have something like that, we have just one line. If you do something like that, we'll have two lines free free lines, 25 lines. The cool thing about you know, using loops is that now we can change the result very fast. And we can increase our multiplication table just in something toe, anything we want. Okay, So after after ending these when these is, you know, 11 we are gonna execute this gold. So we're adding the brake line and then we check Well, we add toe, I again one because of the implementation here. And if two is lower or greater than 10 it is. And we're gonna execute again these things. So that's how it works. That's how lope is. Were working inside another look. Okay, so let's change it to the table. It wont took Have a table. Let's created one like that. So, as you can see now, we we are going to create money elements. And it's better to do it that way because, well, we'll just assigned them at the end here, Right? And it will just be pretty pretty fast. So you have a table now? Now we need a table data on. And I think table datas are just where all these numbers are presented. So we should at table dimension here, right? Like that. And also we need a table row. And Pedro is where the braghis. Right? So we should end the table role here, But we also social stopped a bureau before going into the lope here and now, As you can see, we have got it inside a lope. So it looks better right now. When we change it, everything will still look pretty. OK, that's all. Indian lesson. Thank you very much. 35. Events basics: hello functions that we've been creating so far were invoked manually, which means that we were just typing name off the functions than the parentis is we could something send an argument to dysfunction and well, we would just execute the code inside. But we're all the time doing it through this creep dot Js And you know, most time we want to execute the functions when something happens on your website, when there isn't even when even occurred and that's when we use evens. Okay, so even is just something that happens on your website and we can react to that. For example, we can say what should be executed after and even let's imagine a situation when somebody type the password in the four and he has to retire be the game to make sure that they are both the same after submitting the phone, which is also even off so beating. Therefore, we can check with the function if both imports are the same. So evens are just typical actions made by users off your website that we want toe react okay, even are making your website's dynamic. That's pretty awesome. So since today, your html is gonna became something was is called the HTML dynamic Hypertext text America language. By dynamic, we mean that you can find me Nolly dynamically respond toe everything that these your use air doing on your website so how to register and even you can do it in line in the html fight. This is not the best solution. I will tell you soon. Why bother? Let's start from that. In order to do it, you type the name off. Even where do you get all that names? You can go to the even reference, for example, to the modular development network. There are just tones off them. But you know most of them you will never see on your on your journey of programming. Okay, we will land in these scars. Most important one today, which I would just show huge one. That's enough. Maybe to we'll learn them threw out all the calls from that lesson. Okay, because, well, the truth is that even our just giving the power for you. Javascript. So, in order to create it, you just type the name of event you want to register and for example, let's register on. Click on click is just something that is gonna happen when you click on it, right? So since now, when you click on the talk, Dave on from the example for something that is inside the stock so simple tax, you go not execute the thing that is here, you can type here a JavaScript code you can execute, for example function. So let's, for example, say I want toe allergy test. Okay, so after refreshing get when we click on it As you can see, we can see this message here. So after clicking, we we didn't execute it automatically when we loaded our website right after clicking it. Good executed pretty Also, we can change it to, for example, all more mouse over. So it means that when the mouse is over, then we can see this message. Otherwise it is not working. Get our So there are many events we just learned into next lessons today. We just learned how toe register them and how to handle them. Okay, so now we are doing it in line. We can You don't do it in the JavaScript from this place. And this is better. Why now imagine a situation where we would have, for example, more days like that. Okay. And let's imagine that you have good thousands off HTM if either what? Maybe 30. Okay. Did you know? And now let's say, did your balls or even you have just noticed. You know, I don't want to any more doing something after somebody has most over Did that dif You would have delayed it from all the possible places manually. Do you imagine this? It will be just horrible for you. Okay, so on this solo solution is great. But only for first small websites. Or, for example, where you where it is just your business card or something like that. Okay. Otherwise you should avoid this. Okay? It's better to just did it. Well, we can take it in to come, and so you can later see how it was done. It's better to do something like that. Bomb. No bum. And we'll just take this guy. So we'll died. Document. Get a lemon by I d result, we'll save it in the temperature of a Rabel. And now we can using the dot type the name off Even I want to handle and then I can assign him well we want to do. OK, we've that after after this, um, design. And there is a few problems now, if I do something like that, you will not is didn't when I refresh it, are automatically receive test when I have my mouth over these tax, it's not working. Why? Because you have to remember that all the time when our JavaScript parcel see something like that with poverty disease, right? It says function of parent is is it means executed automatically right now. And the truth is that we are just the same thing here. The thing that is gonna be returned from the Arctic when the ads Nothing. So that's why it's not working. So how to execute something like that? What? You can create an animus function that we were talking about in the lessons about them. Right? Andi? Right now we have good animals function Q and inside it, we could execute, for example, dysfunction, right? And now when we have miles over it, it is working fine. The cool thing about this solution is that we just added all miles over, even to this element. And now we can change it from this place. We do not need to go to the HTML five. If we had, for example, more elements taking here. And we will just at this own mouse over, even to each of the element inside the area or something like that, we could change it instantly in one place and we will need no need to do anything in the html five. OK, that's why this solution is just better for bigger website. It still has got some bet things that can be solved by using something good is skilled at even listener. But we'll talk about this in next less in this lesson, you should just remember that even are just thinks that happens on your website and you can react to it by invoking a function, for example right. And you should also notice here that when you have here own miles over, we can invoke you've many functions, right? And this is the solution for invoking a function when you want toe send their an argument and this is the only secure solution. Okay, so but if you have a function that is that doesn't have arguments of example functions simple and here we have, for example, alert Oi. Then you can execute this function just by doing something like that without the parentis is right. And now, as you can see, bomb, it is working. Okay, But when you want to send something to eat like that right now, it would just executed automatically. And it's not working anymore. Okay? Eso There's a pretty common mistakes that people makes it the start. And the solution to this is just creating an an enormous function which has no name. And then you can execute it by sending hear an argument, right? Something like that. And we can use this argument like, for example, debt. And now it's working. Fine. Okay, that's only good lesson. Thank you very much. 36. this keyword: hello. Most time when you want to invoke a faction using an event you want toe Also actus properties off the element that involved dysfunction. So you want to check? Would with Is that a lime and you want to take Where is that alarm? And ah, you want to hide these them and change the color of the sentiment phone size of these? No, no other things like that. So how to access the 11 that involved this function? Right. This is so how to do well, you can use the key war. We just called this, but how to use it. Well, let's creative a rebel that we call result. And let's take from our document by a lemon these identification or we just called results . So we take this element here and now we can use the result dot and we can act as an and even we won't. Right. So, for example, let's take almost over even and assigned here a function that has Toby run when these even occurs. So, for example, we'll call it change color, and we have to also defined it now. So we took declare it first, and now we can create the body off this function. So we want to change the color off these alignments. How to do it. You could just type result that style that color equals red. And it's gonna work. As you can see, it is working fine. Right when we have mouse over it, it is working. But there is a problem. Um, what if I changed this guy to something else later, right? What if I want to, for example? Ah, do something. I det Ah, He would be result to write the second guy. And I would also invoked the change color. And I would like to, you know, he changed the color off the results to I would like to change the color of something else , right? The other element. No days one. Well, because of it, we have got something with this cult disc. Your When we use this here, it is gonna change the style color off the a lemon that involved this function. Okay, so in this situation, it is this this element and it's also gonna work. But right now, these a new universal coat. You will not have problems when you change something. Your code When you want to add new elements and other things I did. So that's how you should ride your coat. Okay, on, Let's, for example. Now. Ah, use the on mouse out. Function well even. And that's invoke change. Color out functions. Let's sculpt it on change color out. And I want to change it back to black. And as you can see now, when move over, it's changing threat. When you move out, it's changing to black and see off course you can created using CSS, and it's probably better idea. But I'm just showing you the syntax. So these even occurs when you just have your mouth getting out of the place. Right on. Ah, this thing, it could be improved. That called the first thing I told you that you should not change size through this place, right? You should just add a class so you could set a trap attribute class. Or you could even get to the class like that. Let's get to this plus name equals. And now, for example, will use from this place change cologne. Mm, it costs. So I would do something like that and we can change later. This class name to just nothing, right? So So for example, something like that and you will not is that now wouldn't use the firebox, so to check what happens. But you can see when we have good a mouse over the class is changed to change color. When I get out, it is just nothing. So we do explain. We could also remove the class or we could say something. They set attributes and I could remove attribute and I could type cross. And this Cassie it's just totally removed. But the problem about removing or changing it nothing is that you could have Humanae classes that also could be important. So changing it to class name is not good idea. You could add to the end something like that. But the problem is that you shouldn't remove that tribute then totally or changing to nothing. You should just remove this attribute. Ah, well, this value off attribute, but how to do it Well, then you should use for example sub string from the JavaScript object. You can read about it. You can even training now, but we'll later talk about so you can as an exercise. You could do a research on this matter, okay? And do it that way. And you can just wait when we talk about them. String, object. And you will see that there is a subsidy function that we have been situation like that. Okay, so this is an exercise for you. And I would like to also give you one more exercise. Of course, if you have any problems, just ask you create a discussion. Let's Ah, I would like you to create two deaths that would represent First would represent the plus sign a second. Would you present the minus thing? OK, And when you type when you click on the plus sign, this tax is not gonna change the color, but it's gonna get get bigger. Okay, When you create the minus sign, this text is gonna be smaller. Remember, if you have any problems, just ask. But that's not a hard problem toe, you know, to write to resolve so is good idea. Even if it takes 20 minutes for you. It's good idea to trying okay, to do it yourself. You have problems. Just ask. That's holding the lesson. Thank you very much. 37. addEventListener: Hello today will talk about at event listener and about the method which is called removed . Event. Listen, but before we go talking about this, I like to show you what even we need This. The truth is, that boasts three we needed to make our coat on and easier to add. Okay, but let's do it. Don't example. First, when we talk about events, I showed you the in live version, right? We could just type stuff like that on and we could just say what we want to involved when these even cars. The problem is that well, if we do something like copies, many times they have managed HTM if eyes and want to change something, this is gonna give us big headache, right? We have to do lots of work. At the same time we have got now Java screaming than HTM. If I want to change something, it's gonna just be horrible. That's why we have got something like that. And there is a pretty good solution. But there is a problem in it. Worth if now I wanted to, for example, invoke another function. So I like to do something like something that and now I like to not change color bods increase form size. So I like to create function which is gonna be called increased phone size and I'd like to increase the fund said Of course, I was later implemented but right now Hey, what happens when he designed like that? This thing is just overriding this finger and the change color is not working animal. So we could put on show into something like hey, change color And I want to increase phone size inside the change color. But it is a problem why changing color is increasing their phone size. This function is now not a self descriptive one. So we could call it could create a second function which will come function initialization and we will involve the change, color and increased font size inside. The problem is that initialization function is not so self descriptive also. And the second problem is that you should remember that you can sometimes want to stop execution off some even you want to say Hey, I don't want to see and the on almost over affect right now Ah, on the for example, changing colors. You know, right now you can do it, for example, doing something that assigning No, no, no. Okay, so something like emptiness. But the problem is that you can do it only to this one function to these one method you can you choose one off the methods that are gonna be invoked right on, mouse over. So that's when you want toe use the at, even listen. So how to use? Let's take days in under under the comments section. And in order to use it, you just type the results. So the the 100 that place you took from the from your website. So, for example, dizzy fried, and you just type at even listener. And now you take the name of even do you want to handle? So you just type mouse over. You do not type own keyword. Not right now. Okay. You don't need this word anymore. So miles over and then the function that you want to invoke. So, for example, changed the call, and now we can do the same to them. Mouse out without the arm on a change color out. All right. And when refresh it, it is still working. Fine. So just looking a bit different right, But we have good now more power. Buy more power. I mean, we can now do something like that. Most, however, I want to increase the phone size. Okay, so now we have got two functions that are gonna be invoked when we have most our over. So we can other see something right like that. Ondas you can see Yeah, it's were working. It changed the call to read and we also alerted this. And the cool thing is also that you can remove that increased phone size later. And another cool thing is that as you can see, these names are self descriptive. This thing is increasing the front side. This thing is changing the color. And the thing is this in displaced this thing is in this place you can any centrist say what is doing what things like that are really gonna have you in big projects in my small projects. Off like that would be provided the most time enough. Okay, Budding bigger projects. Something like that is pretty important. Okay, so this is the end even. Listen her. Ah, let's implement the increase phones, I So let's train a bit. So how to change the phone sites you could type these that's formed size with the upper case equals, for example, 18 pixels. And now we will see that. Yeah, it changed the size. Everything is working fine, but let's make it a bit harder. What if I wanted to increase it every time that I have got my mouse over it? Then we will need to get access to this. But let's or something like that Alert and let's see what is inside, as you can see Nothing. Why? Because you know Spice can do something. If that things like fun size can be very different image, brother. They can be computed and other things like that a man stabs you wouldn't talk about. And because of the problem, you have to get the font size a bit different way. You should do it that way. You should go into the window and actors, they get computed style function. And now type the name off a lemon. Do you want to get the computers type from? And then the name of the phone, The name of the property you want to access but you want to access is now through the get Ah, property value. Um, get property value. Right That. And now, in order to get the property value, you will not type phone size. But you will die. Found dash size. Okay, so the typical name. And now, as you can see when we get over it, we have got to Really? The 16 Peaks is so the true size, right then 18 picks is because we change it later. That's great. And now we can, you know, get these into variable for example like that and we can use it. Increase it. The problem is how to increase something that, like 16 picks, is there is a pixels. It's a string, right? It's know the number. If you want to have, it s a number you need to parse it when you could control prosperity Will not is that we have got always something with this called parts in, which means that we want to parts. It means change the value from the string to indigent and because of it right now, the phone size we can change Trig it is only 16. Right? Then 18. So we have got the number now because we have number, we can use it pretty easy. We can type something like equals. Phone size for us picks us. And it will not change it now. So we need to increase the fun site. We can increase the phone size by using, for example, that Brinker McCrum imitation. If you don't know how it works, works go to the lessons about operators. And as you can see now, when we just went over, we are increasing its so is working fine. Right? And we have got special function for it. Thes thing is also working. But what not? What would happen if I want to stop this behavior? Right? Real go. I want to still be This guy is becoming to be right. I want to remove that listener. Um, I could remove it. You know, after some something occurred or I could remove it when somebody creek something, for example, identification later. I recall it. Stop type your stop. Okay. And I will take this just something that and now we want to execute. When the stop is creaked, remove even lease in there. So we want to do stuff like stop at even lease in there. All creek. I want to execute the an enormous function, for example, like that which is gonna get the result and then removed from it. Even listener dead is miles over. And it has got a function that this calls increased phone site. So we're gonna just delete these one. We won't do it this way. Just did. There was one in the line. 30 free. As you can see, it's working fine when I click. Stop. I have got no miles over effect working fine, but that. But you know, this thing is not working anymore. So remove Even listener just removed the one I want to remove. And it's really powerful, as you can see, because off even listeners, we can remove something. Well, one off the function that is invoked from the event, not all of them. And we have got also a green coat, right? So that's why even the sinners are important. So if you don't mean he's you don't care about the just use this one, but lighter. You will really, um, appreciate things like that. So very still another problem. The problem is old Internet explorers light 67 and eight on and little if you want to support it, then unlikely. This is not enough. You will have to use instead of that method. Something good is called attach event, and something will discuss detach, even which means at even listener and remove even listener. Okay, I'm likely Internet Explorer in all brought up old versions. The and young. All other browsers didn't like toe play together And they made problems because they just called. They functions that bit different because of it. Ah, well, people that programmed websites heads problems because they had to no create special thanks insurance that would work in both Web browsers at once, and we can do it also. But if you do not want to support it, don't don't don't worry about it. These browsers will die soon, so you do not need to care about them unless you're and you know, person that that is or daring the script from you makes you want to do it. So in order to do it, you can use the J query, which will just make you forget about all the things like that because even get computed studies not working in these were brothers. So you can use the J quarter that we have. You do things like that. So you don't need to care about supporting things like that. Oh, you can you create a function that you will call what everyone, for example, create event. You'll take you an object that you want to Ah, at even still you want to even name You want to execute and you also want what? And you also want, um, name off function to invokes the name off function to invoke something that all right, And we should check if in our document exists a property, a function we just called at even listener. Then we can easily do things like that, right? Something like that. But right now, this result is called object even name isco. Even name and name off function to even is Does the thing that is gonna be sent you right. And we can now replace all this things so we could just type second. I create event miles over change color. So we're just changing names, right? S o do something. Carpet bomb on dhere. We want to increase the phone size here. We wanted to do things like that. And now we can dilated or take it under the command as an exercise you should create Ah, remove even this nurse of do it yourself. Okay, We're just Do you right now That way On Dwell. It's not working. That's check her. What? Hold I did wrong. Wrong in the console. As you can see, the object that even listener was not found. That is because I didn't send it here as I to sent an object I want to operate on, of course. And now, as you can see, it's working like it worked before. Right? When I kick stop it, it is Ah, stopping. But right now, because of it, it will work also in Internet expert 67 the night. But the increased font sizes were not working the way you will need to also do something different here. But you're going into all these things, the war going into next prayers. So in these versions, it's just too much work. Really. It's just easier to know something good. This could J query aan den at even dysentery is gonna be called something like being you. Just what working Web browsers like that. Okay. And there are also many matters that is gonna help you get things like that. We've had worrying about things that we're talking about now, so you can now create uneven. Um, but ofcourse we just now created the vision just form, you know, Firefox and Chrome and other things like that. We do not create a version for for something girls. So we will just type you else and now object that attach even. And he will type, um, plus even name. Why? Because they didn't only change the name of the function. But they also wanted your toe adhere on. Okay, so on, plus even name. And then the name of function talking vote. So it's an exercise. Do the detached events of creating remove even and just do something like something that if you have problems, just ask me and you will not. Is that it is still working Fine. Ending in their experience is gonna work now. Ah, you have to just remember to change this part on Also do something with this. All right. Okay, that's only did Listen. Thank you very much. 38. Event object: Hello? Today we're going to talk about even object, which is gonna give you powerful kept abilities. What do I mean? After these lessons, you gonna be able to validate your force like a pro You can create told tips you can create also whatever you want. So let's start this lesson After invoking give function from the even using the even. You always have toe this function past something. Would this cold even object? Let's check it out. Here we have good the element result with the identification a result. Okay, that we have got it. And let's, for example, register here and even we could use add even listener Bob, you know, it's harder to read, so we will not use it even toe. It's better way to do it. It's just a fast project just to show you something, So we're gonna use the easier version. So we're gonna type on mouse move, for example. So this even is gonna occur when we have mouse over something and we are moving right? We're not staying one place. We're moving so on miles move. We want to execute the functions. That is just for example, doing though some thick and we gonna define dysfunction. And now let's create something temporary so we can see what's happening. We can get this temporary guy get to his inner html onda. We can change things right? The cool thing is that automatically, the first argument of the function is always an even object of the function That or that these are assigned to them even right? If in no none arguments are sent to you, we will also talk about how to send at more more arguments later. But well, institution like that. And now any type here like that you will notice that we have got to do something with this cult object mouse even. And you cannot access things like that so we can example a alky checks if the art Contra she was pressed during the even right now, As you can see, it's false. But when I clicked out and I keep hold and I hope I'm holding it as a concedes to so you know, you can do some kind of shortcut Z on your website. You can check which bottom out Mars bottom was good, but in order to do it, you can use the own miles move, but you have to use on mows down because you know when you are moving your not supposed to click something or just moving. That's how this event was working, some on miles down. When something when your mouth is down, you can change a check. Would bottlenecks click so you can do it like that? Bombings it 01 free. So the left zero the middle is one, and the right is to, And there are some problems in Web browsers that we talk about later because, you know, as always, some browsers into implemented the the big different way. And there are things like cleaned X that's really coughing. It's gonna give you the place. Where is your mouth at the moment? Off the even. So let's change it on mouths. Move back on this. You can see we have gotten out the position off the mouth when you are on the development off course, This are, you know, as big as your um, window is right, because we didn't said that with, So it's even here. So that's why it's upgrading the X axis. So the horizontal the vertical one would be why access So why and how that could I use it, for example, for creating a tool tip right when you are here, you want to have to do here When you are here, you want to have a little deep pier, right? That's perfectly fine to do something like that And we will create a simple cold like Leadsom. Well, creative in something more powerful in the special lesson. But let's go to the second thing key code. You can get what he was pressed in number and hear dysfunctional returned the key in character. Okay, this is powerful because in the phones you can, for example, toe tell us stop. Ah, people typing, for example, to the form where you expect people to type numbers you don't want, for example, them typing alphabet right? When you want alphabet, you can just stop the them from typing things like numbers that is really powerful. We will do things like that later about this thing. We're talking this lesson later, but that's Lett's. Let's trying the beat on. That's, um, for example, does this still to think? Um, but before doing it, I would like to also tell you about this. Thank you right now. It's working because we are using the fire folks, new fire folks, right in the group committee working the Internet, spurring new Internet Explorer's. It'll work. But in the old explorers, there is a problem. The problem is that this even doesn't exist here. It exists in something good is called window that even so, if you want toe accessing Internet spirit in the hour version, you should type something like that. But you know, you we don't know what browser is being used by your user. So in order to do it the right way so we can support all browsers, we have to check it how to do it. I'll show you very fast weight. Look, normally this E doesn't exist in the Internet Explorer, which means that it is undefined when we do something like that. Vory bull event. Well, you also need to know that you can type whatever you want here. So, for example, even and now you can type your E cars now in tow, use it like that. Um, we can type even that window. And when we do something like that, you're not, is that it is undefined for us. It is undefined. But for Internet Explorer, it is not. But when we do something like that, we have got object most even. Okay. Now, was there something like that? I'm defined or logical. Operator Rublyova, As you can see it. Is that all our something like that here? Why I told you that logical operator is working like that That is stretching the truth, choosing the alternative option. Which means that if you have something like that, it's gonna choose one, right? The solution to the problem. Alternative ways off making something. That's why it's called alternated. And if you have one and one would just choose the first option, the proper option. So if you do something like that, it's also gonna choose the first option. If the second these undefined is gonna choose the first option, creativity is dead way. It's also gonna choose these, right? So it is perfect thing to use here now what? Even it was sent here? Yeah, window that even. And because of it, we have got now always here in a an object that you want to use, right? And it is not crows. Brother version the very cool. Okay, So now let's trained it. Created eggs and cleaned by. I want to create a tilted. So how to do it? Let's create a Dave that we call the tip and inside of it I want toe dual duty. Some thing about the dif. Okay, and when refreshes as you can see, we have got it's something about the Dave. Let's go into the tip. We should hide it, Start writes on Let's hide it. So let's change the display from block to numb. Andi, that's for example, said the position toe absolute, because we do not want you to take the place on our website. We just want to move it on and it can be on whatever you blaze. We would like Toa create away for it relied to create the height for read, you know, just to make it better background color on Ben. Other things, like parting other things like that. That's that's the thing that you can do. And now we have got distorted, and when somebody moved here, I want to show it up. So in order to do it, we should what we should first get it. Let's do something that temporary. Sorry, still deep Onda that like that till tip and we just go into this time display and we'll change it to do what to block from them to block. And this can see. Now it's showing up, but I want to show it up. Exactly the place where easier mouth, right? Because he's a tool people in to show your user. Is that how to do it? Well, we can use the cleaned exactly XY and why we can change the tool trick position style left We can you use your Korean ex and on the right site we can use the Korean. Why? So, um it's not working because we need to add Also, he picks us. Okay, something you We do it that way on What do we have cleaned? X is not declared off course when to use that e the antiques and why? And now he's working fine. It's great, right? It is moving Cure? No, like we wanted, but it should be 11. This would be top. Okay, now he's looking fine on and that's how we are doing it. We can, you know, make it a bit better. So, for example, at your town So we have good. The space between the mouse and the stool trip on this. You can see now it's a bit better, right? We can increase that. You can changes. You can make it looking better. Um, that script can be really upgraded, For example. You can change the description inside. So it is changed to the A tribute from here, for example. Data. They told deeper something that and Obama, brah, we'll do things like that in the special lesson. You can do it as an exercise now, but it might be a bit hard. I'm just showing you the power off the thing that we have just learned. Okay, So you have. So you have finally something fun to do. You could also, you know, upgraded. So disappears when you just move out. You know, functions I get on my was my mouth out. Another things like that. Um, now, I would like to also talk about how to send an argument to this function. You know, sometimes you want to send a special argument to the function. So how how well did work? Because, you know, here we can take whatever you want, so we can do something like that and it is still gonna work. As you can see, it's working because this is just the first argument we just called it even because it is more self descriptive. And the first groom argument is always an even object. But what would happen if you had more than the first agreement is not even then, right. In order to do it, you have to create an enormous function like that and you gonna involved to do something like that. But right now you have good that even here, right? The even object is inside the animal miss function that you gonna sand now, today's function and you can now take it. Okay. And because of it, you can also send arguments, right? So new arguments, example. Sample takes about half and we can take it here so we can do something like that and we can I d here like that. Uh, that's space on, but as a cancer, it's working properly. Are these simple takes about nothing? It's below this total right here. So it's working Fine. You it's OK. We can send here now an argument and not let's talk about this target Ah, well, you know, you have got something good is called these objects, and this object is gonna give You want me to something like that? Is that, um, tag name, for example. And that's take under the common the guilty Because it's not helping us. As you can see, we have got Defu. So these jobs, the tog name or we can act issue any property off the element that involved the function. The true visit. It is the a lemon that has got this even assigned toe. So days they've if you had inside paragraphs and ordered released these items other things like that, it will also give you the the if you want to act. Is that exactly thing that invoked the event? You have tow access? The event that target it is also gonna give you now html def element. Right. But now it is giving you, um, the element that involved. So if you had here, for example, paragraph for like that you notice that it is changing, right? Because dif can have inside other element. But this thing would not change right? If we change back toe string. As you can see, it's not giving you the right thing. You can, of course, get the tac name. Exactly. Dave. Be okay, Andi. There is also a problem because it is not supported in Internet Express six and eight. And you can also do things like, you know, like we talked earlier. So we can do it like that source of demand. And now we can access it using like that. As you can see, it's still working. But it's gonna work now in our study Internet expert, because in an excellent explorer it is called source element, not the A target. So you think this freeing you can act is exactly properties off the A lemon that invoked the of the function that even right and also the school? Because now you don't need to send the second argument, right? You don't need it If you wanted to, you know, check exactly the D for something that you don't need to Now do it though. But of course, things like that might happen when you want to send more than one arguments. So you know, I know the solution. OK, so these are basics of these things. We will create very cool stuff later in next lessons were Well, train all these things we make. It s so it is supporting in all browsers, other things like that. That's all in good lesson. Thank you very much. 39. Propagation of events: Hello. Today we are going to talk about propagation off. Even propagation means multiplication. Sometimes it is called bobbling. Let's show you an example. We have got a DIF which has got identification a result, and inside of it we can have many attacks, right? For example we can see if it's something bold it something which is just inside the Dave. And we can also have a button so we can have many attacks inside and other tax right. And there are some problems with it here. We just got for with the document, get element by I d all these elements to these variables. And now we want to see what happens on miles more move. Even we are using here anonymous function toe involved to do something. The function we are sending them an even and this which is re ference ing toe the result The result right here we are making shoot that even is gonna work in Intern Express 67 and eight And we can also get to the source off the element. And we are getting the temporary place. So this place, in order to show something ah, to be back Our coat and when we refresh it, you will notice that when we are moving here, the source off even is changing. Right even is assigned to talk dif because you know this object is referencing to result. So this thing is not changing, but somehow tell me how this element or this lemon knows about the even. That is a sign only to this element, right? Somehow all off them knows about these, right, because normally if they did not didn't know about it, we wouldn't have the source of even change. Nothing would happen right when we moved on things that were inside a deep, and that's very cool thing that is automatically automatically working. And it's called propagation off. Evans, A propagation of events is working like that that when we are doing something, we making an event right, we trigger it. So, for example, we are moving inside the divan, another element element then, that even is propagated up the three. So from bottom, it's jumping to D from David's jumping to Boulder from bodies jumping to HTML is jumping to the higher tree off your HTML five. So that's why we do not need to type something like bold it on miles move. So if you have anything in tow, the dif we have got Ah, we have got instantly a way to do something. Insight and toe get all these events from its from the parent elements, right? And that's really cool. But sometimes it is not a school, as you might think because well, let's imagine a situation. Let's change these to the own click. Even right on. Let's do something alert. We are in the result, right? And let's change these to something like, um, bold it baton. And now, as you can see, when we click on this will see alert button. But we also see a result, right? So by invoking bottom, we also invoke result. Some find situation like that when you click on something and you're even. This propagating up top is not what you want because you might have here something some instructions you don't want to invoke when you invoke a bottom right, so then you need to stop the propagation in order to do it. It's not hard. You just type something like even stop propagation. As you can see, not one when Creegan button we will see on the bottle message when it taken bold the text we Siebold it and the results so is we're working like like it should, because he's not propagating here even. But here it's doesn't and as you can guess, unlikely. If you want to support also Internet Explorer 678 you have to instead off invoking east step of propagation. You have to counsel, but you have to set the council bubble property to true. So when you do it that way, right now, it will work. Also in was 67 and eight version off Internet Explorer. So propagation is really something that is careful for you, right? It is intuitive because when you put something inside the dif you my most time want to when you are moving on, elements inside of it too have even propagated because then you don't need toe specify for each off that element. This even right, it will take lots of what work with propagation. We don't need to do things like that, but there are rights situations when you want to stop it and you do it that way. There's only good lesson. Thank you very much. 40. preventDefault: Hello Today I will tell you how to prevent how to stop the default actions that happens on your website. For example, when the user type something in the fall and he clicks sent, it is gonna be automatically sent. But what if you wanted to validate this first? And if something is wrong there, you probably do not want to send it. You want to say Hey, you know you have to change something, right? So how to still be how to do it? Well, as you can see, we have got the form here we hey created an i d for ID. We have got email which also has a 90. And here we use the document object model toe, get e mail. So we have good now did input here And we also got the soup inform bottom. So we used the choir selector which is using CSS free here. So it means that it's not gonna be supported in a way, brother bodies easier and it's faster, so I do not care. And the more about intern exporter, of course you can do it would be different where, for example, creating here and I D but Let's go to the topic. How to now, you know, prevent When you create gone it prevented the things that happens. The first thing you would think it would be like, Hey, I would just do something like that And it should be enough, right? When I just something like that, I'm just, you know, a signing toe own click. And this should be also on Click De so it shouldn't work work now? Nope. As you can see, it's still a still working. You have to before doing anything. Here Stop prevent the default action just by typing something like death. So it is the method from the even the object right that we learned about and this concede Now it is just prevented. Nothing happens but you might be lie about Someday I want to send this right. So if you want to send it later, you should get actors to what to did news later. So, in order to get to its week should to something like that um Varda human get element by i d news later. And when we are in the news later, where showed use something what is called a method submit and Now when we click it look, it is, you know, doing the same thing if we had it like that. But the difference is that right now you can do whatever you want between these lines before submitting. Or you can submit only if you evaluate everything. Everything is fine in your in your form, right? So how to do it? Well, you can, for example, check if he made that value in order to get the value off something in the form you type that value. And now you can, for example, say if it is Ah, the male lion O Baba Baba, Come the hour come or whatever then we can submit. Otherwise it's wrong. Of course you could check the pattern. If this is email, 11 exacted. But you will need to know the object wreck acts that we do not know right now. We'll talk about direct X later. When we talk about it, it could be good exercise to back to this lesson and upgrade the script. So you make sure that the email is right. Right? Okay, So now if you have a maid rite that it would work otherwise when we take you something because seats it's dozens of meat Baldwin type that it is submitted. So it means that this is riding on other. Otherwise, we can, for example, say, Hey, I want to get to the temporary guy. So let's take this guy var temporary document Get a lemon by I d temporary and we can do temporary dot ener html Ah, that email is wrong, right? And as you can see, it is no saying email is wrong. Radical changes that start to read or something like that We could what? Everyone? We cannot inform people that something is wrong. You have to change if you want to support also Internets for a 67 tonight You should do it that way. Okay. Ah, in Internet Very 67 And you have to type e that return and assigned to it false. Then it will work. So this is the thing that you have to do in order to make it. What work in Internet Explorer and well, where could use this is it only use able in situation like the form? No. You can, for example, block the context men like that. You can, for example, block the link when some particle going, nothing happens. You can send somebody to some total difference by plays or other things like that. You can check something before sending him to the place. Eso Let's, for example, block the context. Mental. Let's block it on the soup inform button. Okay, so how to do it? We just company this and you have to now and do something after the own context menu. Um, even so, we'll do something like that and now we have to just block it. So when we do it bomb subbed for button. Come on, context May. It is not working because we I didn't think that, of course. And now Obama's you can see it's not working right. We can't create context men or we aren't clicking now the right button and it's not working here. It's working here. It doesn't Onley in this placing on these bottles, and it could be useful because it could create even your own context menu. You could, you know, check if this ah e button equals toe to toe. I think to, and if it's still done that you can, for example, use the Client X and Y axis and show something. Q. Right in this place and your user will have many. That's critical. Awesome, isn't it? Okay, that sounded lesson. Thank you very much. 41. Onscroll Event: hello today with exercise a bit, and in the same time I will show you a new even that will allow you to create something like that. When you scroll dominance, you can see we have got your about it, and when we click on it, we go to the top of our website. It is a cool thing. It is a good addition to your website when you have got long content, because then the users will have better experience on your website, right? You click to the top there on the top. That's pretty cool. Of course, you can start it a bit better, so it looks better. But well, let's train a bit. That's do it. In order to do it would have to create first this bottom right. So let's do it. Let's create an I D for it, for example, let's call it too top bottle on. We just give here attacks to top, and now we need to style it a bit. So background call or teal Ah, Let's give it with Let's give it height. Let's gave it, for example, um, parte things on. And now when we refresh it as you can see, we have got the button like that when we how hover about on it. We want to change for example, color to whatever. And that you can see it is were working pretty fine, right? Okay, so now we needed in this place and it should be always here even if we scroll down how to do it. But we could do it in Javascript. But most brothers Ah, support something good is called position fixed When you do it that way, your position is fixed now, which means is absolute. But it is absolute total When you scroll even when you scroll, it's always in that it's gonna be always in that place so we can now type something. I bought the bottom on Dhere 15 pictures onto the right. 15 fixes. As you can see now it's here. And well, we need to do all the some at something here, like many breaks. So you can see that when you are screwing it is really worth working. Fine. So as you can see, it's always here when we scroll, even right? Okay. So what we want to do now? We want Teoh When weak legal need want to jump to the top, right? That's the first thing. And the second thing is that we also would like Teoh. Um, you have probably not this that it shouldn't be always visible. Rival were on the top. Why should we see it? Okay, so let's do it on Dwell. We could also upgraded a bit Cars coarser. We could set it to point her on who could said the text align to send her. You can do things like that anyway. Okay, let's go. But let's come back to the topic. Um, so we need to get access to this thing, right? So document get alarm. And by I d tell button on. Okay, we have good access to it. And when somebody click on it. So we want to do something with their own click event, and we want to jump to the top. How to do it? We can use the scroll by function so we can do stuff like Windows Scroll by. And then we tied the X axis. And why? Exits, exits, Koreans, old dollar. Why is vertical so every type here I don't fisted exist. It means will move by 15 picks is to the right. But what we do not care about right left We just care about these things. When we type here 100 you will notice is when we click on it. We are jumping by 100 pixels down so minus means that we're going to detail. OK, but I want to go always to the top. So I want to go as march to the top as we went to the bottom right. And this thing is starting in place like that. Okay, but we want to goto top so we need toe multiply mini minus one by these values. So we have got him minus value, right and negative one. And as you can see now we just click and we are the top of our website. So it's working pretty fine, right? And now we do not want to show it when we are the top. That just stupid to have there so we can use the window that on scroll even why we are assigned their own skull toe window Because well, this is a window. I would have a window here on day. This is the top object That is the best thing to do it here. Okay, So we are. We are now invoking on scroll Always when something happens. Well, when something when we move this girl, let's create the span here so I can show you something very important. So, for example, I think that and let's get it inside. So like that and let's do something like that. As you can see now we can see the position off the scroll. So it's working like that, right? When we are here, it is think it's like Freeh under. I think that we should show this what it is. 300 right? So we have to make what a condition with me to check if it's over. If you can't, I want to show if it's lower than every candidate, I want to just change the display to now at the start, we want toe to just make it disappear, OK, we don't want to show it. Why Why do we need? And now we just need to change this this place so how to do it? Well, we can just what? Get the button so we can declare it again here, for example, inside dysfunction. Um and we can get to the top button and then go to the style and then go to the display and change it to block. Right now it was show even if I move a bit. So I'm to check if this window page why offset is greater than now? He just you know you can type you whatever you want. 300. 500. Well, how about how much you how much you want to type, right? Some people would like to be shown after 400 speaks as Ah there won't would like to show it at 500 type here. A number that you would like toe yours here. Otherwise I want to just change from block blocked a non. So I want to make it disappear. And as you can see now, when we're scrolling, it is not showing. But when we go past 400 it is showing right When we go back, it is a piece. When we click on it, it also disappears. So we have got now Something would is gonna improve the experience. Oh, are for users on your website And is it supported in Internet sports? 678 Not so much, but I think a second about it. Should we really do it for them? They make your life more horrible. And this thing is really something that is just making somebody lies more convenient, right? It is not something that people would cry about. The they don't have right is just an addition to your website. It is not something that will decrease size on their website and other things like that. So you could find some hacks how to do it. But I think it's just lose of time. Ah, just do it. For people who are operating day Web browsers, that's only good lesson. Thank you very much. 42. MouseEvent: Hello Today I will talk about mouse evens. And are we sure we had to create something like that? Wow, It's great, isn't it? We're moving an image on our website and we can off course move any elements you wish to move right? You can create this dragging on any element. Always show you soon how to do it. But first, let's go over all the mouse. Even as you can see, we have got some fuel this miles over. And this even occurs when the cursor is over, enters the a lemon, okay, And more almost out is when the cursor is leaving the element. So these are basics one and you have got those on miles. Move when you are moving a lemon, so it's probably is gonna be very useful for us. You're moving your mouth on this a lemon, right? So yeah, this is very important for us. We have got something like a creaks when you click and you have got something like DoubleClick. So when you double kick pretty fast and the click on click even is really a connection off almost down and almost up and we'll need this information because we don't want to click on it, and it will move. We want toe, have our baton off mouse down. And then we want to invoke that on miles. Move right when we're moving, you want to move it? But when we have our most mouse up, we want to react to it. And you want to stop on miles Move. Okay. After it, you you can say that you can stop the unclean even as you can see here. You have got here a button when you do something like that and I have good now here and my mask or, sir, as you can see, nothing happened. But when you click on it, well, then you are sent to another place. That's because in order to have on quick, you have to have almost out and almost up in the same place, right? So we can use information like that right now to create this thing that we had here. Right now, I refresh it and we don't have anything. So we have got an image. Image added. Here it's just a simple image with the identification er and the first thing we should do is to set the position to absolute right Because we want to change the position off this element Freeway. We do not want it to take the place on our website with other elements, right? We want to take it out off the normal flow. Now we want to get it. So document Get a lemon by I d and we want to get this sample image. Right? So let's save it. And now we want to what we want toe say if we want to do something when somebody has the bottom down. Right? So what we should do? Simple that own mouth down. And we want to involve the function here. So when the mouse is down, we want toe. Since something like that happens also No, that wouldn't do something like all mouths move right. We want toe. Say, if somebody is moving thes mouth on this element. So we should on this sample on this element also and you know, watch Listen to own mouth move even You can, of course, do we don't add even listeners. Also, I'm just doing it like that because it would look a bit simpler. Right? So we have been now on mouse move on. And because we have good now on miles move, we can move thes, I think pretty easy, because, well, we can just access this sample how we can just type something like this and we can get to the style left. And he would have gotten even on who can do something like a Creon X, which is gonna have the place where easier mouth position as I was talking last lessons plus picks us because we need to have it in picks us. Oh, we have just implemented the horizontal axis. And now we need toe do something with the vertical one on. Does he consider when we re gonna need? Well, when we have, um, our miles down, it's working. When we're moving, it also is working. But when we move on these object and it's running away from us, right? So how to do it so it doesn't run away because, Well, right now, we have got the left corner, right, the left top corner here off our image. That's why we have problems like that. So we should go to the sample PNG and see how if what is the size of these images? You can see. The we've is 128 and Heidi's also 128. And we should change these position. We should just go into the middle of it, right? We'll just, um, and operation like that. And as you can see now, yeah, we are in the middle of it and now it's working. We're moving it. But we cannot stop moving only because well, how to do it. We We can't do it right now, right? It's not working them because we don't have on mouse up even already. Start here on DWI Didn't do anything with it. But there is one problem. Can you see these? Oh, as you can see, here is a copy of it. When I'm called Ink it and I can even open in another top. This thing is just basic home, Drac. Even that is, you know, supported in Web browsers. We need to stop it. Otherwise we'll have problems. So we need to act is the simple and go into something good disco own drag start and we need to prevent default action. Now, as you can see, we can move it free. And did we not open another webpage, and it's gonna work better, right? There will not be any box since now. Okay, now it's working better now. We need to just stop how to stop it. Well, sample that. And now we need to go into almost up. I want to invoke the function that is gonna just stop it. Right. So we want to go into sample on my house. Move, mouth move equals No. When they assigned here? No, we're just gonna, you know, override this thing and it's gonna stop. And there's a currency. It's stopping now. It's working. Fine. So we did the same thing as I said earlier about this. You can see when we do it very fast, I can sometimes lose either. Right? Right now, it's hard to lose because it is big apartment. What would happen if this element was smaller? What would happen if this element was another? Not the same size. We can get this. Get the size off image. How to do it. Well, we can do this. With this height, we can get the weapon height of the lemon off the image just by typing something like that because we were accessing the sample here with the disc E world, which is not 128 went to not divided by two. Right. And our coat is now a bit more universal as you can seem. But also we need we have a problem like that. If it was smaller, we could You know, when somebody is doing something like that fast, we could lose the focus and the drug would be lost. Eafe it's enough for you. You can stop here, but we can improve it, right? We can always improve it. So we could watch now, not the sample, but we could watch on document on mouse. OK, because watch they even here. And we need to now change to No, no on document. But now there is a problem is not working because this keyword is not accessing now the sample. But it's accessing, Doc, you document. So we need to somehow sent here a sample how to do it. We can create a temporary variable here like that. So we have access to tow us toe this element and now we can send it to this function here. Okay. So it can be later. We cannot use this sample from this place because it's consuming and type something like that miles down you will not is that Ah, it is not global variable and we it is, might be not seeing here. Right? So we should do a dead way. And now we want to send it to another function. So we should create it, for example Function, moving image, Uh, like that we want here and even. And we want to also object to move right. I want to change these everywhere like that. So object to move and document that on most move one. I want to invoke the moving image but I want to send an arguments are going to do it that way So moving image with the even objects like that. And also we want toe sender self So the disk he worked from this place And now, as you can see, it is working fine. And even if I do it oh, very fast it's still gonna work. OK, that's the So is a bit better now you could now improve it, but right now you do not know something with this cult Ajax or html five. The problem that we have now is that? Look, we're not saving the position right when we refresh, the position is right here. You could, for example, use this program for showing badges on the profile. Somebody and the person could move on you. He's provide these badges somewhere, right? For example, for something like that. But things like that should be saved in, for example, database. And in order to do it, he would send it to the database that information with the Ajax Or you could save the position or something for just this user in the cookies. We talk about cookies, but unlikely in the scores will not talk about a Jack because these very ever big topic and there would be another coast about this thing. Of course you can. You use this for other things. I'm sure we have. You have good, big imagination. You found a way to use things like that. And you should also know that in html five they are new events that are connected to the drug on, and they allow you to, for example, drop things somewhere, make a place where you can only drop things unlikely. We not talk about it because we talk about things like that in HD Merkel's because it's also big topic. Right? So html five is giving you even more power for your JavaScript. So it's good idea toe Also learn. Okay, that's all in the lesson. Thank you very much. 43. Time events: Hello today. Always show you two functions that time out and said Interval own practical example. We are going to create a stopwatch and this functions are used to around a function after a time that you specify Okay, set time out is going around a JavaScript function after Hominy sleek milliseconds. You passed here and said Interval will do the same, but it will keep doing it forever Until you say stop We, for example, clear interval. You can also stop executing Ah, function in the set time out before it's gonna be executed with the clear time up said time out and said Interval, all are retiring the identification er off the off that you know even that is gonna happen and you can stop it using these functions and where some when something like that can be used, you can use it to. For example, check if your user east on your website he's doing something. He's moving the Maltese and watching the video And you think a drugs you can send to oh to , for example, the my escort. They database the information that he's only on the website, right, so you can check things like that you can, for example, create a chart. You can, because you can check every second if somebody type something. Oh, are you can, for example, creating animation. You can, for example, change every 30 milliseconds. The place where something is. Ah, on your website. Right. So there is stones off options. It what? You could use things like that. You can, for example, create the clock. But we gonna create something. What is called the stop. What? Because probably the easiest thing for two dio right now. And it's gonna be a good experience for for us. Okay, so I've already created a text input as start a bottle and a stop bottle. Okay, so we have got something like that, and I also created identifications for them. So we have got starting value button starting button stop and stopwatch handler. When we type here number and we click start well, like to see here 100 to enter for the 123 and it should come to count down to zero. So how to do it? The first thing that we have to do, we have to get these elements from our website so we can do it like that variable. And now using contra passages were going to cope with it. And now something like that. Ah, um bom and stopwatch hunger. So right now we have got all the things from our websites in our varieties so we can act, is it? And let's think about it a second. When we have got here a number, we type here and we click start we would like to see here, So when I click, it is the even own creep. Okay, so when somebody creek on bottle start, I would like to execute a function. Right. And this function should do what should do what it should take the starting value. The starting value is here, and because it is in import, we should take the value, right? Not all. Not not on the input but the value of this input. So this is starting value, and we should get it into the starboard Chandler, right? Stopwatch handler, that inner HTML equals starting value. Not when we could start. It is working fine, right When we change it, it is not working fine, because when we change things, uh, and we can on click event it is gonna take here the starting value that was here at the start when we loaded the weapon. So when we did something like that right now, this think changed about we have got here, Steve. Steve, the value that the old values. So we should change these value each time somebody creek on that here. Right. Okay, so right now we should start counting down. Could I use a look for it? Well, yeah, but it would be too faster. I did. Your JavaScript code would just change it so far that it would be like bomb. And the zero instantly, you would even say Probably thinks counting them. And that's when something like set time or set interval is critical because it can run a JavaScript function. And Danske function is just an instruction. So, for example, decreasing the number after milliseconds. You specify here after the time like that, Right? So that's gonna be the best thing to do right now. So we want Teoh set interval and want to run a function that we're gonna specify here after one second, right? Something like that. And what we can create a function now, um, like that and what wanted We want to just do something like that and you want to decrease this value, right? And as you can see now is working fine. We are counting down. But when we change it to five, as you can see, we have good problems because you have got to counters at once. Right? So it would be good idea that when we click on it, we stop this interval, right? We should stop it. So how to do it? We could, for example, does something like that variable. And here we could get that interval re ference identification. And when we click here so it will be better. Probably We created this variable here, right? And when we click on bottle start, we should check if this interval reference identification exists. If yes, then we would like to clear Interval sending here this I d. Otherwise we do not need to do it right. Let's not use the very book keyboard here because you want to exactly go two days Guy here . Right? Um on now it should work. Fine. 24 bomb bomb. I changed it to This is going to see now he got on the one counter. The problem is that it is counting after even zero. Right? So we should stop also executing when when the counter is wrong. So if starting in value is lower than zero, we want to stop executing everything. Right? So what we want to do we want Teoh. Also clear interval with the interval reference didn't indicator. There is a problem with it. As you can see, we have got minus one minus Still Why? Because even though we stopped it this interval, it doesn't mean that all the instructions after these instructions are not gonna be executed. Which means that we should also exit from the function right from this function. So we should type here, return now as you can still have a 10 minus one. So we can change the situation to for example do it like that. And now we are counting 20 Are we killed? You know, instead of doing by his money scare, we could do it, for example here 10 and is working fine. I think that this is a bit easier to understand, right? Okay, so right now we can count down on, we can easy change it to other place without worrying much. So created a starboard counting down. We want to also implement the stopwatch handler. So stubble. Chandler, I was sorry. Not this double trundle, but bottle stop own click equals function and want to just self so just involved days right balm. And I don't want to get I want to come together. And Bob, Step Souljah is working Fine. So the interval is just invoking a function as long as we do not say stop right. But we have got also something will discuss set time. What? We're just gonna just invoke something once, but it doesn't mean that we can't have You know, we can do the same thing like we did right now with the set in. Terrible. If you want to do the same thing, that's comment it for a second and that's it. So we want to also do something after somebody click on the bottle and we want to take the starting value and change the value. Right? So this part is the same. But now we would like to execute with the set time out a function. So for example, we could hear a function that we will call, um, stub watch stocked Onda, we will do something like button start. Okay. Said time out And this fingers got stopwatch. Start after one second. I want to invoke dysfunction after, but well, we need to send their the starting value. So we should disinfect function, and we need to invoke. Now this stopwatch start with stubborn colors. So we know what we want where we can insert our new value and the starting value. Right, So we are sending it here. Bomb. We are right now, here. Right. And we need to declare the things that we just sent here with parameters. And now you can, for example, the same things like we did here. So we're gonna decrease hit by one. So as you can see now, after one second, it decreased by one. Right? It's working like that. It's just involved it once. And I would like to invoke the same function again. How to do it. I'm just gonna invoke it again here. Right. So I could type stuff like stopwatch start, and I could sit starboard start and starting value. Ah, like that because off the documentation, it is lower right so it means that we have free to. And now, um, it's not working Fine, because the problem is that it executed almost instantly and because we didn't wait for for for anything here at this place. That's why we need something with this Could set time out and we're gonna decide, like, set time out balm. After one second, I want to invoke this. So we need a animus function because you want to send arguments. So, like that on we don't need parent is is here and now Bam, bam! On a stopwatch stuff. It didn't work because off I sent here the wrong because he, uh yeah, it's working. Final. What you get it still doesn't mean that when we did it did it would work fine, right? When did like that, because concede it's even worse because no, this script doesn't know what he should execute first, and the problems comes. Okay, so it's good idea toe weight when you are doing something like that and I have free Teoh one zero and it's counting down the problem that we have now is how to stop it. Well, I suggest creating a global variable kills variable time out. Re Ference. Identification her and we can assign these. Ah, identification her here. And using this, we can check the same language it here. If this exists, I want to clear time out like that. Free to Well, that's changing to 124. Let's change 12. Now we can change it easy, right to whatever. Very 10 clock up too fast, bum thumb. Okay, so it's working. Fine. Now we need to also stop when our number is starting. Value is lower than zero. Then we want to just return. We now don't need to clear interval like we did. We just need to stop the execution off instruction after this. Right? Because these instruction here is really what is really gonna be executed. Onley. If we do know to return here right, because return means that we are exceed were exiting the function. If you don't other do not understand this, you should watch again lessons about the function. So now when we type two, it's gonna stop on minus one So we doesn't dio change it here And you have till while zero and you can change it. 13. Easy to another number and is working fine. So as you can see, you can do the same things with the set time out. But I suggest using sets a time out. Ah, well, mostly when you want to just execute something just once. Right after sometime. As you can see with this solution, we have got a global variable. That's not good. You should avoid as much as you can Global of Grable's. Why? Because if you had men off them, you would have problems to connect. What is where? Okay. Things like global very boost can also make your coat very hard to debug. It can bring you lots of box that are really, really hard to spot, especially in javascript. So try toe, avoid it. Okay? It is better to use something like the interval in this situation. Or you could do it even more professional way by casing function constructor in creating your own stopwatch object. Okay, that's only a lesson. Thank you very much. 44. Time events - upgraded version: Hello. Today I will show you how to upgrade your coat So it looks more pro way you see decoded. We did in the last lesson. It is working fine, right? For a small project, it's gonna be a good coat. The problem happens when you have got more people working with you. Are you have good? Just many functions on your website. Because you see, we have got now here one group of Arabia. Now imagine that we'll have even more off them and we would have man. Amen. Amen. Evens on our website. Many things that would be in our coat here now and now. You would have problems to focus to find the thing you want to do. And now we already imagine that you would like to have more than one Stop what? On your website. Right. You would like to count to zero because you want to, you know, track If something is east, finally finish right. You have good for example, a person who is playing the game and when he can get build with, we have something. The discounting toe zero. But he can build many things at once. Right? And we would have many counters. So we would like to have very reuse. Able called, for example, for situations like that. And then it's good idea to start programming in the object it oriented way. So how to do it? I assume that you have already watched every few possible lesson about functions and objects in the first sections of the scars. So you do not please go back because this is gonna be advanced things. So the first thing is that we should create a function constant constructor. We call it, for example, stopwatch. And what do we want to do? Of what state? Let's take this under the comment, we want to create a stopwatch after loading our window. So var still butch New stop, which Okay, and now when somebody click on the bottom start, we want to execute stub. Watch that, and we can now, for example, do something with the methods that we're gonna create in function. They think that we want to do we want to start, so we should create a function that is gonna be cold start or in it, something like that, Right? So let's do it start equals function this start. So we have got no method inside our class, which is called start and which should start our program. So it should start the stopper, or it should, you know, initialized first a few things. First thing that it should initialize is the starting value, which is right now start where? In our starting value input text, which we should, you know, copy. Here it's different. So after each time we click, we should get the starting value, and we should send it do here. So we should take it here on. We should go. So do something like that. So we have got it inside our object, right? We can re ference to the tow this guy inside when we are creating the starboard, we should send a stopwatch, counselor. So we know where we would like to show things inside. So we should do stuff like this stopwatch handler on Well, like that. No. Okay, so when we're creating it, we're sending it here on bomb, and it's going here, and we should, you know, change this type of here. Uh, stub watch stopwatch. You d Also here. It's also here. Sorry. Stubbled hunter. Okay, so we are starting we have got the starting value. And the starting functions should also start stub butch later. So it should invoke this that stop, start, stop, watch. Which is gonna be here and dysfunction here should what should get into Stobart handler and change the energy html of it. This that starting? Very. What is the cool thing? Have you noticed we do not need to pass value here, right? Because we have all of the access to it through the variables here. The cool thing is that these variables are easy to access. We know that they are exactly the variables that are connected to the object that is gonna be created through this class, right? It is not somewhere like here, so we can even create oh into something. This right this time out referenced identification. It's not inside of it. We know exactly that. It's connected to it. Okay, so we have got it. Now we're here, and we started it. So let's see it. As you can see now, when type start starting value in the starting value. Exactly value. So we should do it that way. Okay, so when we change it now, we have killed At least this number is changing. Right? And now we need to counsel how to count. We need to just set time out, right? And we need to run the function that this gold what? After one second that is called start stubbled. We just need to invoke the same function here. The problem is that when we do something like that, we're not gonna do it. You can see bomb. It's not working. Why? Because this keyword is a reference in tow. Dysfunction, not dead One if you want to reference toe exactly this place, we should do something like that. We should create a temporary variable and assigned to to eat that object. The object that you are were working on and do something like that. And as you can see now it's go. Not gonna go, not work. The problem is that we didn't decrease the value of you. Okay, let's crazy. 14 13 12 Bom bom bom bom bumper. Ok is so under this. So because you might not believe me, this wasn't a problem. As you can see, it's not working. We have got did only worth one because, well, we decried decreased it. That starts. Okay, so we started like that and it's not working. We have to use this self 14 13 12 And it's gonna count as long Gers we do not stop so we have to stop it. Right? So let's create a function which we call stop equals function on and what we have to do We have to just clear time out this time out, ref, I d But we don't have it. But we can have it very far. So we can just something like that and we have it now. Right, Pretties? It's out. We can get it right in every place on and well, how to now in vogue it We just need to bottle star stop eso on creek it calls function and we just do stub watch Stop! The cool thing that we can assign evens outside of these thing here is that you can now assign this own klieg toe whatever place you want, right? You can stop being in whatever place you want By what other figure? One So you can also stop it manually, right? Congestive starboard stop and it's gonna stop and the time by anything So start and now we could stops start, stop. It is working. And also, when we start, we don't want to happen. So something like that doesn't happen, right? This concedes going faster, sometimes jumping. We don't want to. Barket, if we don't want to bag it, we should check here, right? If this exist this time out draft idea, we want to stop it. And the cool thing is that we do not need toe again. Do something like that. We can just involved the function sides of thes Stop it. Stop it. They could think about the solution. Is that when you adhere something they called here right? Because you could do you something. Want to have more things here, like some checks or other things like that. Then, ah, you know, everything will be changed also in this place so we can reuse our coat even inside the object. So now when we start, we can change it pretty easy. Toe anything on? It's not gonna be backed. Okay, So the last thing we need to do is the check. If this is lower than zero, if yes, then we need to stop executing anything after thes lines somethingto return. Okay? we need to exit the function. So now you can see 210 And that's all looking kind of game. Now, imagine that you would like to continue. So why is it so hard to country to make a function for continuing? What should the function to continue the suddenly just involved this? Yeah. So, days that start Stop. What? Again? I want to study the game right. Just three days. Ah. Okay, so we just need at bottom. Continue Button, continue. We need to know. Get his bottle on. And when somebody creek on it, we want to stop. Watch toe. Continue. So is going down. When we stopped, it stopped. I don't continue. Its continue with just reused. They scout, and everything is that he's inside one place. This is the power of object oriented programming. And the most cool thing is now that you could have what? Another stub watch, right? That you could assigned to something else to something new you could assign to many places at once. All right, you can reuse the co as many times as you want. That's why things like that are very cool. Where you could do you use for example, something like that. Many times for creating, for example, gains when we want to count things down. Right? Right now we're counting like that. That that we are showing, you know, when types like that we have got 15,000 and 123. There's a big number, but it could change these number two really a time, right? You could use, for example, a date object forward. Well, then they'd object later. And you know, you have got no powerful abilities to create things that are gonna be easy to really use. And did you can change later that are read able. Really? You are becoming expert. Everyone after each lesson, you're gonna be even better. You just need to train. The thing that I like to you to do right now is you know, normally the starboard is working like that. With that, when you click stop, You are not stopping even instantly. But you are not what you are. Add Inc. This number after each and when you stop again, you at another number to some kind of text, right? You want to you know, for example, see how far is your friends are wrong. And you're just like me. Stop stuff, stuff, stuff, stuff. And you want to have all the times, all times of them, right? So you can do things. Like, if things like that you just need to know what? Upgrade the bottom stop. You just need Teoh used the information from the starting value here. Right? You can get it. You can create a functions. We would cut these value here the actual value, and you could just inserted some. Right. That's the power, right? It's pretty awesome. Do it as an exercise. If you have any problem, please ask. That's a needed lesson. Thank you very much. 45. Validating forms: Hello. Today I will show you how to very day that data put into input by the users off your way beside how toe make it so The things that are type here are properly tight. We need to inform the user that something is wrong. So he doesn't lose time, right when he sent and they cricket, he he should be in for, you know. But here is something wrong or even we could in for him. When he just changes the import right, it will be even better. But you have to remember, before we go into this lesson more deeply that old checks, all the conditions that will do are just for the user. Um, and you have to remember that it doesn't matter a security test. Okay? Yes. You can just turn off JavaScript. You can do whatever you want with Jarvis. Keep almost so you can Hargett pretty easy. So you have to remember that you have to check all values again on the server side. So, for example, in PHP, Okay, you are doing all these things to make the user experience experience on your website. Better. And it's really very, very good idea because sometimes when people type a big form and then it gets recent it, they just leave the website. So you're losing car a cash, for example, when you you have a shop without something like that. Okay, so let's do it. We have got to form, which I called my form and here we have good number. Full text, field name. It's something my form Bottom on with the value sent. And we have got the DIF information that we give some input that's on here, that something is wrong or something is right. And we have got a few even that we have could to go through in this lesson. First, let's let's get something from our phone. That's a good, good question. How to get, for example, that input from this form, right? No, do it. We are going to type document, get a lemon bar idea mind form. And here is something very new. You don't need to you know the identification, a hero or a class in order to get it. This is really rave useful, and it's good idea to know that when you have a form, then every element here you can get through writing, for example, something like element zero. Okay, element zero is this element. The problem about this solution is that you know, these are lemon. These now second is not fair side. Oh, you know, when you add something, it might be a problematic solution. So this think is useful only when you want to, for example, at events toe all of the inputs, right? Then you could go through the loop using this. Eric, the cool thing is that you can Onley You can just type that name human. Okay, so we have got something like, ah, get element by i d my form sober inside here. And we can get just typing the name off the ah attribute value. Right? Andi, everything works fine. So number fears, Okay, Something like that. That's cupping it. Um, so we have got a text field those songs on. We have got to stop, submit, but, um oh, so like that and we have good information. Information is being different. Information is just inside the deep, right? So we do not go into the name, right? Like you. Okay, so So that's how it works. We can no pretty easy access for example, number, field and let's go through all these evens. So the key down, how does it work? So the key down even is gonna happen for any press, whatever key down. OK, so let's, for example, getting to the info inner html on Let's create a simple variable, for example, I And let's increase it inside him, As you can see when I painful inner html donkey down off course on key down. Uh um um um so as you can see now, when my keys down, these I value is in being incorrect creased. Why goes my keys? Don't okay, you have got also the same thing like Cold War. This called on key press. You can see it's also being increased. The problem about the the solution is that you can also get the key that was pressed right . And when we have got the key pressed, as you can see, we can get what key was pressed. But the problem is about when I kick arrow keys are and the, you know, control sheet on another kids like that, monkey press is not gonna help me, right? And because of it, you just you know you have to use on key down in order to get kids like arrow keys. Okay. So as you can see in the even object, you have got something with this called at which, which says, what key was pressed on these various we information Because off that information can say if we ah, you want to add it to the import. Or maybe I want to say soon that you know something goes wrong. You type something wrong. You have to retire, baby. Okay. And there is a problem off course in the Internet. Sprah six and hate you have tow, create a variable like character press, for example, into something like that. And because in all web browsers like Internet Explorer six and seven, you had to use the key coat key coat with the big upper case. Okay? And you have good. Also, something radical character called wages. Almost the same lying these guys above. But I do know Judy City, OK, it is almost time not supported. It's gonna be deleted in the new web browsers. These just so you know, that something like that exists. Okay, so we have monkey down on key press and if you've got something what is called monkey up and these very useful Because monkey up is gonna just be invoked. When? What? When you if you keep up. Okay, it could see I have to release the key. OK, if I do not raise the key, the key of event is not gonna occur. We have got also something will discuss on four course. Um, it's changing back to this, and as you can see when we focus, so it means when we click here, it is gonna be invoked. Okay, We have got also something with this called on Blore, which means that when you lose focus, okay, so when you just change it to whatever place else okay from that input, and you have got something with this called on change that is pretty useful because when nothing changes and you change to another input, it's not gonna be invoked. But when you change something, it's gonna be invoked. So as you can see now, it's not is not gonna be invoked. Right? But when you add anything or you delete something, it's gonna be invoked. Okay, So that's how on this evens are working. And now Let's train a bit. Let's, for example, create a program that is gonna say that. Hey, you know, I want just numbers here. So how to do it? The first thing that I think we should do is to, you know, use the inky up even. Why? Because we want to test after typing, right? Well, if the value is wrong, then you know something is wrong. We don't want to do it. Why? Something is being pressed because it will be just horrible because you have to. Just that function would be invoked just toe too many times, right? It's not is not useful for us. And there is a function which is called It's not a number. Okay, so the stands for is not the number, and it and read returns through when when the value sent here is no the number I always create. The function that is called isn't Humber, and it takes the value to check and we're gonna return. Just the thing that is returned by is not a number from value to check, but we want toe ST the logical value from true to false. And now it's looking better. You know, I think it's very bad that they called this like That is not a number. Okay. Ah, because it's easier for you to feel like it's something. OK, OK, it's OK. Let's return. True. If something is not okay, let's return. False. But here is is like if it is not a number, then return true. And you know, when you're checking just one thing, it's gonna be not it's not gonna confuse you. But if you have many values to check and you are making conjunctions alternatives, it can make it harder to to, you know, think Cleary okay, in May lead to mistakes. That's why I'm making this helpful function for us. That's just gonna check if something is a number, so we can is reaching a check. If something is the number. So we can do something like Eve, something is know the number and we want to check out this. I feel dot away. So number feared that thesis is referring to the number fever now, right? So there's that value is not a number. Then I want to do something. Otherwise I want to do something else. And now we have to decide what we want to do? Um, if it's not the number we can say, please type number, right? I am. I just want a number here. Otherwise we're just, you know, did it all the messages that were shown here and we should those so change for example, the color. So this style, background color let's change to, for example, right, And after, you know, we do everything fine. We're going to change it to green, as you can see now, when we type here they have or whatever is wrong. But when we type a number, everything is working fine. You can type your whatever number won't. Otherwise we have good the information, please type the number. We could solve this problem also a bit different way. I think that this is a good idea to do it that way. That we are checking after typing one off the letter. OK, But you could also you know, diesel Oh, almost doing anything here. You know, we like on when I type key. I just don't want it to be even here, right? I just don't want to anyone put you anything like that. And we could do it right. We could for example, the A a proven default. When you use something like that, you can type improve unti fold. Well, the problem is that we have got it after donkey up on Key Job even is invoked after you have got your key, Abba, and it's already here. So we have to change it. So, for example, on key down and that was to conceive are tiny. Being nothing works and because I can now do anything kill Ah, I can use it to, for example, do it only if the kid that was sent here it's like the one I'm that this, for example, know the number right? That's for a second sign here to the infant in their HTML, the value off which, let's take this under the command for a second. And as you can see when we type here, we're getting some kind off unique coat, and we need to use the Unicode. We could, you know, do something like, Hey, what these in the under the value 57 season under the value uh, 58 other things like that. But we could also use the sprink object, which has got a method. We'll talk more about string object later, but there is a metal that is called and it's very useful from character coat, which is gonna change days into the character. So when we refresh it, as you can see, when I type something like letters, they're appearing. Q. So we can use it. You can just compare and you can react to it. So if these are numbers, it's OK. If no, it's not OK so we could do something like even like that, it's under common did. Let's take this under comment, and if something that is gonna be typed here soon so this character, then we gonna show rat otherwise green right. And of course, we need to stop when he's wrong. Okay, I'm refreshing and this is in second type numbers. But when I type when I try to do anything else, it's not working. The problem is that even backs president working. So you have toe. Also check if this guy here right, um and in the same time, at which is not equal to and backspace is under eight. Okay, so now when he first at least I can in the back space. But we also should allow you know, typing for example, that or not. Maybe you want to just allow somebody typing in Teacher right? Full integer. I don't want to have the floating number. Right? But if you want to allow him floating number, then you have to also say and in the same time, which is no equal to the daughter of that value which is 190 you can get these values typing Unicode JavaScript in the and Google. But you can also pretty easy Just get them from the kid. A of you don't even right yuk unjust. See what is under this when your time to just based. Ah, I mean, that is you can see now we can tie that we just can't type letters. There is. Of course, some boxed is so for example, I can type mall on Cassie's some fork. Usual. Now, for example, check what is in the dese that value after, for example I know changing it to another input O r. Maybe you could just check it after each time on key down function is, you know, executed don't many things you could do right to check things like that. But most people who didn't have the something like something like that. You could just parts, you know, thes value into the internet. Integer off float. So, you know, it all depends what you want to do on Dwell Askew can see now when I type something wrong, it's red, but it shouldn't be read instantly. I should, you know, probably not even shown on the ramp red because, well, when I type something wrong, he's not even gonna show up. Right? So we have always the right number here. In my humble opinion, this is not the best way to go. I think that interface shouldn't you know, these allow typing something inside because, you know, the user might not know what's happening, right? It's better to, you know, after each keys up, show him the message, the red thing or something that when everything is okay, you can show, you know, some takes, everything is right. You know, in my humble opinion, something like that is gonna be more better. Better experience for your user. Okay, that's going did Listen, thank you very much. 46. Stopping submit button: Hello. You have probably noticed in the last lesson that we've won our off our solutions to the problem in checking with the numbers. When we type something grown, we can still send the form and everything is re sited. That's not the thing that should happen, right? The person that is you know, visiting your website should just see the message soup. Please type the number. If you do not type the number, you cannot send it. Okay, so until everything is OK, he shouldn't be able to send it. And you already know that you just take the soup in my firm button and then you use the own click event and you get the even the object and even object can always prevent default things, right? Defense default actions. Now, that's just not gonna send whatever it's here. It's right. And it's not. And we need to know Check if everything was OK here. And if we can just create a variable, is everything okay? And by default was said it'd too. And we just change it, you know, if everything is not okay, So if this wasn't a number with changing to false, but if everything is OK, We'll change it back to true, right? So because of it, when we type your something as you can see, please type the number. It's not gonna be sent, but when you type of number, it's gonna be sent. But we have told off course. Check it later here. Right. If not everything was okay, then prevented. So as you can see, it's not gonna be sent. It's sent. Okay, so this is a good thing to do, because later, when you want to check for example text field, German another you know, you can have whatever things like checking give the maze right of the possible. Diz. Raidi. You know, this was name properly routine or anything like that. You can check things like that, E. And you know, if even one of them is wrong, you can just said these very ableto falls and you know it's gonna just prevent these action , and it's gonna show the user the message, right that you have to change something as an exercise. I'd like to, you know, do something with text field and, for example, check if this is a single word. If there is a space inside it's not gonna be, you know? Good. You have to set it toe f Is everything okay? Okay. Toe fault and how to do it. How to check if there is a spacing site? Look, text field that input the value. He's really an array. You can use, for example, string object for it. You can read about it in the, uh, Google. Or you can watch the video about the streak object that these later in next set next sections and you can just go through all off the letters inside the world inside the value of input. Well, and if there is a space, you just, you know, show a message. Something's wrong. Otherwise just do not do it. You have problems. Just ask. You have to train. Remember, It's very important that so in the lesson. Thank you very much. 47. Checkbox: Hello Today I always show you how to check which off the check boxes were checked by the user and how to use information like that I created already. So we do not lose our time. A form and inside of it I created a deep and inside of the day. If there is a label for each off the input So when you creek on the text next toe the check box, you can choose the checks books around it, right? It's very useful toe use labels and all of these inputs are check boxes. And I also added and name attributes with the value course name. And you have to remember that for the cheque books, you should use always the same name. And the difference is that it makes is that right? Now, when you go using the document, get a lemon by I d method and you get the my form and you creek dot Then cop cars name you have got here an area. So this guy is under the area under the index zero on their edicts. 12 free for And you can choose this input this input this input this input This input and get from it, for example, value or if it's checked or not. Okay, so it's not so hard. So let's for example, go to our cold. As you can see, I have already get got the my phone. I already got the sub in battle and I already have the info here, right eso where we will place things for the bargain to see some something. So let's use the I think the Lope because it is the best idea to go to the arise when you're losing loop. So four were able I equals zero and we I is lower than my form. And then we can get to the what do the course name Dark lens. Because these in array right, I can do a few things if let's start to go into the in four and to the inner HTML and just type here something, my form cause name and then zero that well, so I'm not using this is look at stars. I'm just assigning at the same time the same thing from the first checkbooks. Very known. I click. Add as you can see, we have got the value here. The PHP is always gonna be Petri. Because this first and you should also notice that this is thes value. Okay, inside the inside there, the attribute value, the value off the value is PHP. The problem is you know that the think that this inside here you you call a value right? And the attribute name is also values always have to say it, but the content off this attribute is the thing that he who gonna see here. Okay. And, ah, not here. Okay, this is just a label. The dozen mother would you type here? Right? You can do something like that. You gonna always see javascript on this thing. This is the only thing that is important for, you know? Okay. So we can use something like that. For example, we even do something like that, right? Mom? It's because now we have got all values we can. There's something like that. Balm. As you can see, all values we can also use something good is called a check property. This thing is gonna tell you what was checked or it wasn't tricked. As you can see now, everything was on check. So we have got fought false everywhere But if I check for example grandeur? Yes. As you can see, we have true after, you know, in grounded Js So you can use information like that pretty easy. The first thing that we did wrong here because it's not effective. We should create, um, temporary string here, right like that. And we should assign at the end. Oh, we should do something like that at the end. The result. Okay. Why? I talked about it many times. You want to do it? Because in our HTML is going up powers every time when you're reading something. All the content inside so is gonna around faster now, right? As you can see, when we change here something, it's also changing here that true, false. So you can use information like that, does what to do. A conditional statement. If equals true. Then do something. The truth is that we don't need to do something like that. You know, type equals through because checked is going to return here. True or false. So if checked is true, then we have got here just through, so we don't need to, you know, make comparision here Q Like using special special operators So if Michael perform calls name under the eye index is checked, then I want to know at JAG, but at value. And as you can see now we're just adding the values that were checked by us. It's working fine. We can edit the end. Going to something like that, huh? You can see is I think it's pretty Well, you can brake line, whatever so you can use something like that. For example, to add things to your basket. Temporary basket ride. You can then send these information also to the peach peace ever using the A drugs. The cool thing is that it's not gonna be Dina dynamic, right? You cannot Ah, people can add on your website things. We vowed in a waiting. So it's really cool. Think using something like that. Okay, there's only lesson. Thank you very much. 48. Radio form: Hello. Today I am going to show you how to work with radio imports. Radio imports are working like that that you can choose only one option at once. Right? You cannot choose both options at once. You can only choose one of them. And this is good to use. For example, when you want to ask, you sit. Do you act in terms off service? Yes or no? Right. So we have got here inside the Dave imports with the name except ation, off terms, off service name, and we could use stays when somebody krieg on it. We want to check Change the disabled attribute here and the start. I would like it to be disabled. So also at the start, we should choose the checked where the no option. And when I click on the S, I wanted to have it not disabled. When I click on No, I want to have it disabled again. So have to do it where we can do, for example, something like that get into expectation off terms of service. So my form expectation off terms of service. And when somebody click on the first guy, I want to invoke the function that is gonna change the suddenly battle. Disabled to what? To not disable so to false. And when somebody click on the second guy, I want to change it to to, as you can see now is working fine. So is it only lesson? Well, we could end it, But look at it for a second here. I do not know which one is which. You know, when I change it to something like that, As you can see now it's not working properly. Do accept terms of service. No. And it's enabled. So something is wrong right now. So it's shouldn't be done like that, you know? You know, Major called depend on what happens here, right? Somebody could change something their most time. It walking away. But you're coach, you should be better. The next thing is that you know it's hard t even from Javascript here to see if I'm choosing here. The guy that should shoot changing toe the labour or no. So we just know about this thing on the why we're programming right after one move will not remember. So it's a bad idea to use something like that. We could also use the checkbooks. Accent or not, that also available option. And But what? We're using the writing right now. And Teoh Well, how to upgrade this? Good. We could go to Oh, off that things like that. Like expectation off terms, off service, right? And do something like that at once. So we can register, event using therefore lope and once toe every element inside the area like that, it's pretty powerful, right? The problem is that we are setting now is to false. So when we create whatever here, it's gonna be false now. So we need to use the information off the element That Waas she told them we could do is, for example, dis keyword. So we're referring to the one that we go through the loop and then use the volume. Why value? Because we have got now here value, value, false and value to And will it work? As you can see, it should have. You should be working but is not working. Why? You see, when we do something like that alert, you will see the do have it here falls. And here we have true. So why it's not working because that type of these variable is string When we do stuff like that, as you can see, it's not working. Also, it's gonna work on when we have got here. At through. Bowling, as you can see now, is not disabled. Right? So in order to Maggie the bowling, we have to make a comparision so we could decide. Like does he d call to to Yes, true equals two true instinct. Yeah, I think so. As you can see Falls through equals two. You know, for us it looks the same. But for the computer it requires here exactly the bowling type. As you can see now it's working fine. And this card is universal because you can change. You know the position. It is still gonna work properly, right? We don't need toe up. Great. Anything in our coat? Maybe it looks a bit harder, but after you you work some time with your JavaScript code. This shouldn't be looking in the heart for you, okay? And you might be also not understanding this line. You need to remember that every time when you assign something toe of arrival, the interpret that is gonna first execute this so this finger will read, Return. True or false. And it's just gonna sign these value value to here, right? So that's how it's working. Is the radio import. It looks almost the same like that. Check boxes. So that's only the lesson. Thank you very much. 49. Select in form: Hello. Today I will show you how to work with select, which is mostly in cold Kamba books. And it looks like that, right? So how to use it? How to add new elements. How to check what elements were chosen by the user of your website, how to do it. Well, in order to work with this, we need to know that there are properties and some methods that we need to know. Let's follow focus firstly, on how the select talk is working. We have been inside options, right? And there are men off them and you can choose all of the options using the options property . After you get this select using the document get element by I d or, you know, naming this So we can also name it typing video courses. And we can now get it jobs by using my form here. Right? Um you can just like my form and now video courses and can use it for example, that Zoller what do we see? As you can see, we have got html select a lemon. So we are right now here and we can go to options. So in order to go to options. You just like that options. And we can choose each of the option because this is really an area. That's because now we are in the HTML option alignment, which is the first guy. And we can go to the value of value of it, for example, using the text, and this thing returns this right, the text. But the text is most I'm used to change text inside. So, for example, we can add something to ah, to it. As you can see, we add it now at the end. Destexhe here, you should most time use value. Property value is returning the same. But you don't want to always have the same value to descend to PHP later. Ah, that you have here, right? And that's why you can, for example, do something like that. And then the value we returned the thing that is hidden from the user, right? You want to show sometimes a user something a bit different. So this how you get the value and now we could also get, for example, that thing that is selected. Okay, so how to do that? Um, we could just do something like that that selected index. The problem is, now that you know young, we are no eat, not invoking anything going to change the right. It will be good idea toe change it after each time you change something in your so like so how is the select even called when you change something going to change the That's that. That's not a surprise. So let's just do something. My form video courses dot on change equals function and we can run them something like that alert and is consumed. Now when we change, we're getting informed we could use the info here in for generated him. Also, we do not need to cause box each time, and now we can just change it in. You can see we have good here now the number off the selected index. So we could also use this information to, you know, show which off the wall and the guy was chosen that saved these in the variable. So you know, you can see it would be good idea to have in temporary variable so we don't have toe every time. Take my phone, that video courses you can see now it's still working, but it's a bit shorter code. So let's use this information. So we will go to the video courses that options. And now we want to have here, you know, the selected index guy. Not the one that we, you know, type zero going to go. Video coast is dot selected index volume. So when you submit something, you can easily check what is well chosen by the user. Just by, as you can see, using this line of code, right? Maybe in on change event, it is not a good idea, but that is the way to check what was world false chosen by the user. But you cannot do it in their own change. Even pretty easy and pretty fast. Just by using this, that okay institution like that, you can just do it that way. And it's just faster because this is gonna, you know, always get the option that has been just chosen. Okay, that's why it was very cool. You can use it pretty easy like that. It's working fine. Good. I think that also around and every time when you do something PHP Maya school sask around two years, right? It's working. Fine. Can do whatever we want with these values, okay? And you have got also to functions that are very important. The 1st 1 is removed, which is removing something so we can type video courses that removed the guy at the index zero you can see now we don't have X html That start right here it is, and he disappears. You can use it because you know some something. You could make a program where somebody type something. Informant. You want to remove something from the from the combo box like that? And you can also want to sometimes at something So you can take video courses dup at and here you should have an html optional lemon. The problem is that we have to create it. So we had to tie, for example, new option that equals the document. Create element so we can use right now the in a rage demo. Well, we called probably some were working around, but this is a faster way this time. Ah, because interestingly is gonna reproduce the coat. So this is better way to do it now. A new option that takes we said it, for example, to come pass and just added right like that. As you can see, we have got a D and now Compass schools with a pretty easy We cannot be the start that you can see now it's a start. But we don't have anything Children. Because, you know, by default, thes guy was chosen. So on the program, miss a beat. Surprise. What happened? So we can also choose selected index. We can make selected index on this guy Inc. Do something. Video courses that selected index Set it to zero. You can see now Compass is chosen. Okay, That's only good lesson. Thank you very much. 50. String manipulation: Hello. Today we're going to talk about how to handle a sequence off character using string methods because sometimes you want to cut something from the string. Sometimes you want to, for example, replace something interesting. Find something in the string so you can replace it later. You want to, for example, make something from the stream like a letter Toby Upper case or lower case. You might want to do things like that. And you should know that there are many methods that are going to help you lots of time in your junk journey. Okay, so let's start. We have got here at them. Pereira's string like that. We have good it inside the enraged email off the info object which is here, and we want to Now check how all that functions are working on a practical examples. So we have a two year temporary string. You have to know that you can create stink also like that because this is an object, right? So it's gonna work the same way we do it, that we're not off that way. And now we can, for example, check a what is the first character here? You can see It's a right. What if this was my name like that? As you can see, this name is starting from the lower case, right? A letter and it's not good. Maybe somebody in your form is gonna, you know, put his name and surname with the lower case letters. You don't want to have them saved like that in your database. So it's a good idea, you know, Get them upright to make them uppercase. How to do it. You can use, for example, the function that is called to upper case. You have to remember that. You know, this thing is has returned something. I got something like a like right like that. So we are running on the A to upper case and this can see it's not big a And when we do something like that, it's also gonna work As you can see it now it's big, but off course temporary, very book. He hasn't been changed. So we want to change. The Pemper are variable here. We would need to do something like that. Bus. Firstly, we need to somehow get this think the rest off the string. So how to do it? You can use for it. For example, sub string or slice metal so you can do something like Plus, and now from the temporary I want to use the substance method dead you that is cutting as many characters as he won't from to what place? And, you know, it's like 01234567 So we increase the first guy. So you want to cut from the second guy, right? If you do not specify the second argument, it would just cut it to the end, Okay? Even specify the second argument. So if he did something like that, as you can see, it's cutting toe that position. Okay, and slides and slips. Sub string is working the same, so you don't need to, Ah, worry about it. Sliced has good and little advantage, but substance is a bit faster. Most time because school slice can also, you know, cut using the negative are negative number. So you know we can cut from the end counting from the end. But I think that it's not a good idea. It makes your coat horrible and hard to read, so it's like it's the same you have got also something good is called sub string without the ink and this can see it works the same. But the difference is that you can hear Put for example for And it we call cut four characters from that place for characters, not tow fourth position. OK, so that's the difference. Okay. And well, let's, for example, create a link like that. A city Bay video courses online that come. And for example, we have got here a course about video course C plus blast HD Emma Like that. Okay. And we would like to get only this part. How to do it. How to get this part of the You are all you are out. In order to do it, you have to could from this place. But how to know that you want to cat from Ah, what's the number of what's the index of this place? Right. Well, in order to get to it, you have to use the index off or last index off Met it. This or this one in this situation want to get the last possible corrected like that. So we are going to use the last index off, right? If you wanted to get the first guy would use the index off. So link that last index off is gonna return. When we type your something like that, it's gonna return. Let's take this under comment. The position off this beck slash. So we have got enough disposition they want to substitute from this place, right? So let's just like laying sub string floor from that place. And as you can see now, we have got it from this place from the place. Where is that backslash. But we don't want this back slash so we have to just adhere one. And now I have got the position where we are at, and this is good information. We can use the window location to get Where is your user right now? So if we use for example, as you can see something like that, you're gonna see the You are all here, right? So if we did something like that, as you can see, um, in the location, let's make it this drink. As you can see, we have got index that html So, as you can see, we can easily get Where is the person on your website? Right? You can use that information later, we'll talk more about things like that. Like window properties later. Also. Okay. You can, of course, use things like that for something else. For example, you can have many classes, right? You can have class a 45 for example, border than, ah, clause that says that it has got to do it right. And then you can check height east a 4 to 6 inside. Or is border the inside? If Yes. And I want to do something like that, right? You can use information. I like Like that. Using the index off last index off because if there is nothing like nothing inside your string, it's gonna return minus one. Okay, you can use information like that for things like that. Let's not learn about the split. Mattered because it's also very useful. Let's imagine that you have got and temporary string like that. And he was on the page B com par sauce, ground Js. Okay. Something that maybe even we've got to come. I saw something in there. And you have got this string coming from your database, for example. Right? You have got something like that. You want to parse it you know you can. You want to, for example, Added to the select books or something like that. Then it is hard to do it because it would have to, you know, use the lobe and go here. And then when there is a spice you have to you create create in a row and at the X html to these area and then at Beach pier the nature complacent. And that's us and do it manually. There is already a function like that because these pretty common situation common situation. And in order to drill you, you are using their split mattered, which is splitting right. Splitting Ana. String a string into the area so we can do something like split. Now it's bit It's a variable. Temporary, every like that. Okay, so now we have got here, As you can see, X html in the temporal area. Off course. Right now we have to Else also at the separator. Okay, so the separator between all these guys is a space. Okay, so we have gonna x html the second guys be hb So we have got an airy right now and you can do we can do something with these various. Okay, we can change this guy to, for example. Um CSS, right, So it's been changed, and now we want to join them back together so we can variable new string equals and we want to connect temporary at I join all off these elements inside the area in tow, for example. A string with the commas between all of them right like that and you will not is that you have got now excitedly millipede Ph b C s s sas grand Js Before that, we had worked. We had PHP compass, but without all this coma comas and we're up this change. So we can pretty easy do some operations like that. And it's as you can see, very Of course you can replace, you know, like we did something like that could also the temporary seeing that replace, and we could replace it. What sent here? An argument that would say what to reply. So we could, for example, type x html and I want to reprise it to, for example, html five, right? And you can see um, replacing heat here. Let's show the 10 parties think, um, well, it's not showing up because this replace it's working, but it's returning the new string, so it's not working on this variable here. You have to save, you know, the new value in tow. The same very below to the new one on. Then it's gonna work html five. So that's how you can replace something. Also a pretty, pretty far, pretty fast. But you cannot add, for example, now into ah, after each off that element inside coma and space, right, like we did here. And, you know, you don't cannot compare them gonna do some specific things like some advance things, like with these right here. Okay, you have got also something good is called dream, and this is really, really useful for storing passwords goes sometimes when people copy thinks and they have parceled, for example in the text, for most people do it in the way there's no secure. But as you can see their cup. I ended with the space here, for example, And when they tied it in the passport box, the spaces interpreted this ah character. And the problem is that something like that will make the problem because it was say to them that you know, your password is wrong and they will be like, Hey, but just cup I did why it isn't working. So that's good idea, toe. Always when you have, for example, something like that. And it's of course, the password. For example, do something like dream. It's gonna remove these spaces here. Okay, so when we refresh it when we go to the fire bag, you will notice that there is no space. Is he right? When we do it without the dream function, you'll notice that we have got here space one space here and one space appeared. Not mom, not more because, well, HTML is working like that that if you have more than one spaces, not interpreted right. If you want to have more than one space, you have to make the note Brickell booth space. But dream can remove the wonder this here and the one that is here at once. It's a good idea to know also that you can use the search for searching like the index often last index off, but it's a bit slower is better to use it? Only when you use something like that regular expression object that we'll talk about later . And it's also good idea that you can get, for example, like here with something that you can do something like that. Okay? And it's gonna work pretty okay, The problem is that this syntax of the break break it. But with the Squire, a square parentheses is not gonna work in the intern experts. Six and seven, maybe eight. I don't remember exactly, because most time I used character at on the way. Ah, but in this a bit, a bit faster, but really very small. A very small amount with no hitter was like thousands of operations and maybe would be better to use it, but it's not supported in old browsers. You shouldn't care about it in the way. But the problem is that, as you can see, when we do something like that, I don't know exactly. Hey, I'm really thinking about the first character from this temporary of are able, you know, this air, I think here looking like that is not making me think that this is a string. When we look here, right, we have to go here, here to the 21st line and look Oh, that's so this was the string. OK, so I'm going back here. And look how this Cody's were working, right? If we have something like that, we can instantly say that. Hey, if he is using, if I'm using that ah mattered. It must be a string right instances. So I think it's called. It's more readable using this one. Ah, in the new Web browsers, this thing is supported pretty good. OK, that's only the lesson. Thank you very much. 51. Divding string in code: Hello. A very long tax should be divided into mental eyes in the coat, so the code is easier to read. But there is a small problem and worries. What is that small problem when you click Enter, for example Here, as you can see, if this net means would not give you the solution that is right, it would not work. Why? Because Java's script always expects from you. Did you gonna end your string in one online? If you do not do it, you have to at you a beck slash that says, you know the continuation of the string is in the next line. Okay, you have probably also notice that there was something like backslash and what is what does it mean? The backslash and is the special character that is giving there enter. But there's gonna see we don't see here and enter a break. All right. And we should say it here in the coat. The problem is that Firefox's not interpreting it. For example, what about the Google chrome? As you can see, when you go here it is in two lines. Um, let's get it here. And that's refresh first, as you can see it's into lines here after refreshing, even it's not into life. Okay, so you can make enters inside the coat like that. Backslash aan den. Is it useful? Maybe. Eve, you wanted to have your cold looking better here, right? But the fact is, I do not care about it. You shouldn't care. Also, because you know this is giving making your skin bigger the for that's the first thing not making you your script looking better here. It makes it better in the looking in the source code. But finger second, then the person that is gonna use their source code is the person that might be complying something for every resource coat you have got a source called that is here that looks pretty cuckold pretty clear. And that's where you should focus your attention toe. OK, so the nothing's was adding the special corrected like that. But special characters like that are sometimes useful because back slash is reserved. When you do something like that, as you can see, we cannot see backslash here. If you want to see a back surgeon has to make to back slashes such backsplashes and this against him now we can see one. And also you can use it to, for example. You know, something like that. Ah, I want to quote something. Uh, the guy said the guy said, What about you can see we have problems. He right, Because we are using the double Coursey. We could use something like that, right? But what Divi should just do something that I am? It's not working now, right? Because you use both let letters right now, like the apple strobes and the quote. So the solution to this problem is back slash because when you do a backslash before that quote or before there were people before the opposer for before the quote you gonna see as a result, the character that is after the backslash, Okay, it doesn't matter reviewed, use apple strobes or quote you at the start of the string. So just you should just keep using one most time. So it's probably most time better used this double quotes, but it doesn't matter. Ah, it'll just be you may make make it so you use on the one option most times of you know your code is easier to read them because you're not changing you Never in every possible place. And then you have problems in a way you have to and ended up here than in the second. Very good. Have to indeed like that. Just keep it to the one option. So in this situation, if we use most time the double cork, the quote, we should do something like that and everything would work fine. You can also continue coat like that. You can do Plus here. Okay. And it also gonna work. Fine, but this is a bit slower than the solution they give you a second ago. However, this is also more supported. Okay. Old browsers this think might not work for a long time. Okay. Doesn't need a lesson. Thank you very much. 52. RegEx: Hello. Today I will show you the most powerful way off searching to your strings in your coat. This is very important because sometimes you don't know the data that is coming to you. You want to exactly check if it is right? So, for example, when you are taking the forms right, so regular expressions is very useful in situations like that, you can check if the email is ride. You contract. If the coat if the telephone is right and other things like that pretty fast and easy using something with this called regular expressions, you also need to remember that you can use it in whatever language because it looks the same PHP and other languages. Okay, so it's very useful ability. So it's good idea to learn this thing. Okay, So, for example, we have got something like that indexes and I like to get from this indexes on the one that starts with a and that has gotta dash, for example, And then a number, right, the index Not so, for example, something that and how to do it, or maybe how to get on Lee numbers. How did things like that easy and fast way normally would have to go with therefore robe and go after each character and check. There is a preceding character looking like that. If no, do you have to do something as Imbaba blah, blah, blah, it will take you lots of time, and you have to each time for each pattern you would think about for searching in your stink, you'd have to think about new way of funding things right, and we have got something with regular expression. Let's learn. As you can see, there are many methods you can see. The first method is called Search, and, as the name suggests, is this searching and it returns the index off. The thing that you are searching for in your formula in the pattern you sent here from the streak do such okay, but what we don't want exactly the end is you want to find this guy, this guy, this guy and this guy and this guy in city. I want to have it in an area and because of it will use the much function, which is does just matching it. It tries. It's something fits into the formula. If it fits it with marching I am gonna choose it into the area, right? So, yeah, that's something we need to use. So I would just like that that indexes that match. And now we have to use a regular expression. It is a potter. As you can see here, we have got a pretty nice text that we analyze soon. And the pattern looks like that you have to use the backslash ists, backsplashes and inside it a partner that can be combined of all this beings here and then the modifiers. So I have to do something like that. But these backslash backslash is can be next to each other because then it's a comment. So it should be like that. And now when I type for example A I will find every possible A here. When I do something like that very able and for example, result. So I will have an area inside the result and I can show it, For example, in info inner HTML. As you can see, we have got only one A. Even though we have Goodman off them, Why? Because much by default is gonna find you only the first occurrence. And this is a good thing because it's not gonna lose your time, right? So if you want to search for more, you have to use a modifier. Aflac like that g from global, searching through full strength with the things like that here, as you can see now, if we could find all possible A in our strength that we have got this guy, this guy, this guy and this guy, we don't have only these guy. Why? Because it's small letter. If you do not want to, you know, think if a lottery small or is big we can just add here a flag like in sensitive, which means case insensitive. It doesn't matter if its upper case or lower case. Okay, so with by typing here a single letter, you would just get all possible things that will that would look like that, right? Every type 12 with We'll find this 12 here because it's only one like that. But you know, most time you don't want to find things like that, you want to find special pattern off things in your street. So there are many ways of doing things. For example, you can type dot, which means and the character So if you type a dot here, it means that we'll find any possible character. And the cool thing is that we divided our string into awry. That has got all possible characters in in the area that is called result and we can, you know, choose also. For example, the first it's a The second is dash on. We could go on right? The cool thing is that we can now, for example, joined all these guys using the function that we know from the last lesson and bomb. We have got all of them with the bright or something that so this a single character, leeches, single character. It was much on a single character, but I want to exactly say, Hey, I want a on then dash. So now we have got all possible options where there is an A and and dash and then I heard want to have a number, right? But we don't know what this number is, and because of it, we should use something like that. This think much is in a single character in a scope from A to D, which means, in conclusion, that if you take something like that, 0 to 9, it would choose asked any number. So if I type something like 0 to 9 and I refresh it, as you can see now we have got the first number after a So it's five. It is five here, five here, five years and well, nine. Oh, sorry. This guy wasn't the that one. And that one was not chosen because we have got he read out, right? So So that's why so we have got to nine and five and 5559 Okay, so it works fine. And I would like toa have here as many numbers as he won't. So, how to do it? We have got to wise of doing this thing marches and a string that contains and or more occurrences off the preceding character. It's cool. Cool, right? Because we can We want to have the preceding character, which is a number this time. How money? One or more times, as you can see Now we have got all off the guys here. And when we at the new ones. So, for example, it will also appear here. That's just awesome, right? Okay. So we can also do it a bit differently. This thing can be replaced by matches and a string that contains one or more occurrences of the prison in character. So we could instead of typing something like that, we could also type something like that. And also you can, instead of typing something like that, use this special pattern, which it looks like that. And it also means the same. So this means the same as this. Okay, there are many ways of doing things. I'm showing them you them because some people might use something different. You will not understand other people, regular expressions, expressions. Right. So that's how we do what works. So right now, we could choose pretty the possible options like that. And what if I wanted, for example, to choose, um, also these guy and this guy? Well, and all of them, right? There is lots of ways to do things like that. For example, we could use you adopt right when you said that everything is gonna appear because it's just any character. The problem is that it's an a character. It can be also a character, for example, like for uh huh right, that any character all possible so Sometimes you want to exactly say which one we want to choose. Then we create The parent is is like that. And we say, Hey, I won't dash. I want also something like, for example, Ha sh! And that's all this is gonna see Now we have good with hot on with the dash. It works fine. So in order to choose this all this, we use the operator or where it is, as you can see here, he's also very great, for example, for checking extensions. If we did something like that, J j p g o r g if it was much or something like that. For example, landscape Chief, the chief is the world here, and he would choose it so we can check exactly if these an image or not. Right? So you can't, for example, exit five. It will not and go to right so you can choose things like that using the operator or on. And what if I wanted to choose? Also the dot? The problem is that we really do something like that. It would choose again and the possible character. If you want to use a character that is a key word in the wreck. Expect X. So, for example, if you want to use the plows, the Asterix, the question mark on the are doled out on other things like that and you want to find it here and only this thing. You should use the backspace before it on. Then it will find the it will interpret. Is it as a dot? So if you want to find only the guys, that has good that that I would do something like that. And this Considine. Yeah, it works. Now I have got only these guy, right? So that's how the rack X regular expressions are working. Let's go to other things. Here You have got something goddess called Asterix, and it marches and a string that contains zero or more occurrences off the preceding character. So we've had something like that. A name, Mark. It will much the guy without him at the start. So ARIC are wreck Mark. Well, if it's gonna be lower case, we should use the flag in insensitive writing. You need to remember about it and it would choose also a Marek Mark with the sport. Little. The problem is that it will also choose the guys that has good man am skill, right? Because it contains zero or more occurrences. So that can be sometimes a problem you want to say Hey, they must be exactly one. What? You wouldn't use it in a way that you did something like that. When you type a single character, it means that it has to be there. And it must be single one guy if you use the plus it with much anise string that contains one or more occurrences of the preceding character. So conclusion of it, it requires preceding corrector at least once. So here, zero or more one or more so every time Something like F a Plaza de it matches fit and it matches fat right? But it doesn't match FD because we have to have at least one A this thing matches and a string that contains zero or one occurrences off the president character. So if we did something like M and then question mark all right, it will much All right. I'll wreck Mark and Maverick with this smoke smaller and upper case is right, so deck doesn't need to be an M, but it can be, But there can be more than one. So there's a good solution to something like that, right? And every time something like that, it matches any string that contains exactly and occurrences of the preceding character. So if you type stuff like that z o. And then to it means that, like I have to see here to guys like that is very useful. When you want to check for example, a telephone number, right? You want to say something like variable telephone number and, for example, in Poland, your telephone number should should look like that. Um, two numbers. Then free numbers, free numbers and three numbers. They don't know exactly how it looks like in your country, right? All countries have different things like that. But hey, I want to see free digits. Free digits. Freedy it And here two digit right that it's good idea toe magic like that 11 number march and I want to see a digit. So let's do it like that at digit and I want to see it. How many times? Two times. No less or more. I want to see two times and then I want to see a space how to do it Space. A space is white character, right? So I will do as price. And then I want to see exactly what I want to see. Free numbers. So it will be D and free and in this place. And then I want to have what d and free and then as space on and he reserves OPEC slash Well, that's why I don't want Don't like using back sisters back sessions for something that it's more. I think it's clearer when you it's dead weight. Right? So 093 times than the beck slash s then 09 back free times space on then we have got 09 free times. So by doing something like that, um, you know, saying it to the result, you notice that you have got it right when we do something wrong. So example like that. Um well, it's working fine state because you choose, like that guy, that guy, and get that guy. So we have to say exactly. Hey, it has to start from two numbers and it has toe end. The full strength has to end with free numbers. And now it doesn't work. You can see, but that the way it's working? Fine. So you have gotten that you have. Now, Um, you have no notice that we can use another things like that. The characters like that, which means that you have to have at the end of the full string, it makes the pattern to search for only much. Only string that it's ending with something like that, right? It has to end. That's the that is very useful in something situation like that. Okay, so let's go to another feed. You can much anesthetic that contains and or more occurrences of the preceding character. Because sometimes you know Well, this is this is the same like that guy, right? Um and it works the same. The problem is that using this, you can using the one artery it so it matches any string that contains many Molly and occurrences and Maxie, Molly and occurrences off. Presenting corrected. You can say, Hey, there can be free to 10 or 12 six. Let if characters like that preceding characters. That's very useful. Right? So here is the that thing, right. Did we learned about these guy? It only much is the beginning of a string so formula like that it will match the deck hole . But it will not much in the whole because their whole there is right now in the middle of this thing is not at the start here. When he type stuff like G and dollar, it will much only string that end ends with G character. Okay, if it doesn't end with G, do not magic at all. When you do something like that, it march and off the character and enclosed in the character said like that and think as it is it was a single character, Too much So for example, if you type something like a and then b nt See, you have got BMT here inside in much of ABC and 80 c but it doesn't much a btc or whatever . You know, if you have more than one character who did not match it, right, it much only this guy is also not much, you know, for example, a a key. See right. We don't know much these things. Ah, when you just like it like that. So if years something like that sorry like that it means that that you are excluding be empty so much is everything. Ex accept ABC 80 c so it matches a D. C, a. Key C and other other other other things like that. When you do it like that, we already talked about it that you use the dash inside. It will much any number within these and a small case character and a large case character when you use the deadweight with much any character when you use it with much any character and the and an underscore. So you know, because you sometimes don't want to use the insensitive flak modifier everywhere, right, because it's sometimes you want to be, have its sensitive case in some situations, but you will in one place of the part pattern. You want to have its case in city, for example, right? So then it will be good idea to use the any character something like that, that search on one years that we eat much as every single character except ABC. Andy, right? So we also know learned about this guy. This character allows you to interpret reserved characters like, for example, the the Asterix dot and other things like that as a corrector to search for toe right to search. So the formula f and then the back search and Asterix back such accidents. Boxers! Asteroid! Well, imagine that F you know you can also use the something like that and it was safe takes. So if you do something like that for example, that that's very useful things sometimes if you do something like that on, did you do something like that? It means that you are saving the in one eye into you are coming from 1234 And then you complacent in whatever place you won't later. So it would change totally how it's gonna look. So if you want to choose for example our cottage now I would type Arkady, AJ and Haye. I want it is the five now. So I wanted to be a good start, so I would type here five, right? If I want to be in the middle, it will bay, for example in the middle. That's the just powerful, very powerful And as you can see now you also know how replaces working right? There is also something like it will match eggs only if why is after the X. So you have, for example, names and surnames and you want to only choose. Ah only want to choose the Eric that is having the world our trick after it. So it's also we do we remove on These are a great these one. It will not be removed because it has got Novak suddenly. And it was thought this thing works the same as the above one. But it will fund. It's only there is no why. And about this we learned at the start we have got also mattered that this testing things that is very useful because you can say, Hey, if it matches, then yeah, it's right. So I think that it's a good idea to use something like a test for things like checking GIF if the telephone number, for example, is right. So if we do it that way, as you can see resulted in finding thing, we don't want to say this number right now. We just want to say if the number is right, so in order to do it, you have to type the formulas like that. Then you have to use the dot than test and the string you want to test. For example, a telephone number and the result this time so that's result will be true or false. So as you can see now, it's true about when we do something wrong like that. It's false, right? When you do something like that, it's false. You can, of course, it's a good idea to exercise and try to think how to do it So you can also tied your number like that, right? Some people might want to allow. Also typing without spacing, spices, the telephone number. There's a good idea to allow people do things like that. That's an exercise for you right now. In the next lesson, we talk about the exact function. That's only that lesson, Thank you very much. 53. exec method: Hello Today we're going to talk about the exact function. Well, compare it to the March 1. As we know, the March function is just checking the pattern. And if it fits and two distinct, it's gonna select things that are that right exit is working the same. But there is a small difference. The first thing is that we have to create a temporary variable for the wreck. Exp So we have to do something like that. And now we should do Rag X. Then we should exact on this regular expression, that string we want to search it. Okay, so when we do it like that, as you can see as the result, we have got a 0.51. So these guys, let's change it. So we gonna search for Well, Annie and the kind of guy, Well, we can have any characters, right? And as you can see, we have got a dash 565. But, hey, we have got the global far flak you why we didn't somehow get all others right? For example, this guy like for example, days this this is in this. Why what happened? Well, the problem is that it will return always on the one result. When we do it again, you can see now we have good 50 free When they do it again, it's hash 58 and then a 0.51. So we have to run it as many times as there is a result, right? Uh huh. When there is nothing. So after this guy, As you can see, there's just nothing. There's nothing gets called No. Okay. And no, in condition means also fall. So So it was stopped running. And you can use this to, for example, to something like that. We will create a temporary variable arrow. And while we can assign a new value using this right, we will add to result result the value that is coming from here. And as you can see now, we have got all of these values. And now you can do whatever we want with this with these values, right in something like that is useful because right now you can you know, for example, toe each of these developments you can at something you know you can, for example, mix it with another awry. You can, for example, exclude something you don't want what most time you can exclude everything key, right? But the cool thing is that you can do it in the time when you are extracting things from the right Some. For example, If you are extracting and after, if you can say, Hey, I want on the free items so if I can do something I I zero And if I It's lower than free they were greater than Free Dan break so I can get on the free items like that. Alright, Right. Um I plus plus pray incrimination should be here. And as you can see, we have got freedom extracted only free. So we are not losing memory rights. We didn't extract every possible option that fits this pattern at ah start, right. You have to remember that one use don't use the global. It will only always show the first guy. Right? So you have to use the global FARC in order to get all possible options. And that's really useful as you can see for extracting and having the control. So this why also has got here and warning right? Warning is not an Arab Warning is like, Hey, you know, there can be an error. The truth is that there is no hero. But most time when you are doing stuff like that, it can be an era, Right? Because assigning is very similar to comparing things like right. So you could also do something like that. Why? It's not equal to know. Then we can execute it, right? Andi? And it's working for the same. Like we do it that way. So, um, this is just a short cut. How you can ride it. It might be an ear. Or that's why we have got here a warning. Right? But everything is fine. Okay? There's only that lesson. Thank you very much. 54. check password: Hello. In this lesson, we will train the regular expression formulas on practical example. Will check if the passport is strong. Or maybe it's not as strong as it should be, so we shouldn't pass it right? So how to do things like that in JavaScript? Using the regular expressions. First, we should think about which of the method we should use. I think that this one is good because it we just returned true or falls. It's OK are it's not. So we need for it a formula variable right where we can store it. And here we would have it. We need a password. So well, that's, for example at the beginning, heavy the temporary variable. Later, we'll take it from the HTML five. So we want to test. We want for without toe. Test the password, right, and he wants to get the result of it to dinner. Html off info. So right now it's through because, hey, we have got the spice here, and here is also space, so everything works fine. Okay, so let's assume what our passport should look like. I think that it should be at least eight or maybe seven characters long right, So how to do it? It shouldn't be so hard because we just need to work. Have any character possible, right? It doesn't matter if it's really I don't know character like that. You can use things like that in the passport. Allow people who using the's. It doesn't need to be, you know, ABC the only so allow using any character because it would be just you just make it even more strong. Stronger, right? So let's use that dot but we don't want on the one character, but more of them at the least eight off them, right? So it makes a person toe type here, at least eight characters, as you can see now we have forced so 1234567 a. And now it works fine. But of course, possible like that is very weak. So how to change? We should make this pattern to have at list. For example, one character that is small case wanted his upper case, right? So how to do it? Let's go here, and we have got here something like that with much X only if why is after the eggs bob the results. Another user drifted. When you do not use this, it will be like that. You have to have in the thing that is after it in the pattern after it. So in our situation, the pattern followed by it is this You have to have the thing that is inside here. Okay, So if we do something like that bomb, bomb and then the question mark and then it calls. And now I say, Hey, I want to have, for example, a character small. Correct. So now, as you can see, it's false. But when we are a small character here, it's gonna work. Fine. The problem is that when I have have got it like that, the character like that is should be at the start, right? We don't want a character with start on way like to have it also here. Now we will work fine. But when we remove the first guy as you can see, we have good fault. So how toe solve a problem like that? We could say something like that. Hey, the truth is that here can be any character, but it doesn't need to be here at all. The asterisk as you can see much is any string that contains zero or more occurrences of the preceding character. So that means any character. So this any character can be here. Oh, it doesn't need to be here. Right? And if it's here, Okay, that's okay. And then there can can be something like they don't know, right? So that's something that that makes having an IQ and a character. And after either can be somewhere, for example, the, um the small character. Right. So that's very are some because of it, As you can see now we have true. So because off the solution like that, we can tie, as you can see, the small character anywhere I need with work. Fine. So now we just need to copper it two times. And what we also eat there upper case at least once. And we also want what you also want a digit. So zero tonight. And because of it, as you can see now, it's false. But when we add, for example, upper case, it will work Fine. So, yeah, this is a strong password because you have upper case. We have small case. We have got the number, and also it's at least a digit. So it's gonna work fine. You can also use some other science of, for example, a dollar. Remember, do not disallow using something like that because it only makes people password stronger. And you know, if somebody is using the same password everywhere, which is not the best idea about if he's using a character like that and he will not be able to use a character like that on your website, he would just leave it, so allow him using an IPO possible. Ah, possible character problem. Maybe even the six characters is enough. Because the truth is that the password, if it's pretty long, it's gonna be strong as long as you have got it properly protected on the server side. Okay, if you are using sold and other things like that. But this is a topic for the PHP cars. Okay, so this is just, you know, has before sending the possible right s So we have got here Passport. That was Ah, that was, you know, starting the temporary variable. Let's now create. And to imports the first input that will start the passport. And second that we button, that will be testing all these things, right? So let's just copy this fink. And now let's get from my form passport that will be starting the variable pops wart. Right, So we don't need any more here. And we also need baton that the skull test. So like that. And when somebody click on test, you want to invoke a function that is gonna test and inform what's going up. So the formula is gonna be tested by the password. That should be every time checked after clicking, because it can change, right? It shouldn't be on the loaded on when the window is loaded, right, We should get the value off the passport. Not only password is an input, and we want to test his value by this formula. So yeah, it should work Fine. But let's for the purpose of the test. Let's change it to text so we can see that I know what I'm time thinking. So, yeah, we have got false when we have big letter and ah number. As you can see, we have got no true. When it's a bit short, it's false. So we can use information like that also in our script, we could. For example, instead of the button, we could do us a bit. So lets users submit. Let's take and even here. And we want to at the start, prevent default. Ah, event. So we don't want it to be sent, right? Won't check things first. So we're tracking things. We want to use this result off this formally formula and if formula it's okay, so yeah, but possibly is Okay. You want to submit our form, So we want to get our form and we want to submit it. Right. So as you can see now is not gonna be submitted, but bomb it submitted. Right? Because the password is right now strong. But otherwise, if something is wrong, I want to inform our user. So we go today in fourth, you go to Dana, reach them and I say no. Your password is not strong enough. Of course you could check. You know, you could check in. This is this formula, right? For example, let's check first. If there is a number Oh, and then if there is at least six character and then if there is one the character this big and then if there is ah small case and you should do it as an exercise. Do you know one by one and then inform your user that what? What exactly he did wrong in his possible. Right? So these an exercise for you for this lesson? If you have any problem, just ask. That's all. Thank you very much. 55. date: Hello. There would be magnetize when you we need to manipulate the time in JavaScript. And for it there is a specific object special object that is called date Object Help! The name is re suggesting the finger this dia doing so let's try to learn all the matters that are inside. Okay, there are laws off them and I will show you the most important one. I will show you how to manipulate the time using this object. But firstly, let's ask ourselves when something like that would be needed. For example, you can show the clock on your website. You know, you can say that the time that is now is for example, 10 a.m. or something like that. You can also, for example, say the user. How long? How many? How much time there is needed to something happen, for example, right, So there are many situations like that and you can use for the the date object. But before we go into it, I would like to also inform you that the date object is not gonna give you the proper time . It's gonna give you the time that your user has ends his settings okay in the windows settings. So you don't remember that you'd should not think about the date here as a day that it's that ist true, right? But for situations like a clock, like, for example, saying how long t something he's done something like that is very useful. And in a way, you can get into the Java script variables from PHP, for example. Right? So we're using, for example, a Jack, so s so it will be useful for you anyway, You can create, for example, a game where you want to come down when something is finished building or something like that. Something s O date is really useful. Okay, So in order to create a date object, you just create a variable, for example today and types of night New date. And we can not assign to, for example, in the HTML today and when we refresh it. As you can see, we have good here nowadays. So we have got 11th May Monday, 2015. It's right now time 2028 4 And as you can see, I am in the GMT time zone. So I have got that plus two here so probably went around these. You have to tell the difference. You know the results here on the special here because I am from Poland. So this is my time zone. But most time you don't want toe see things looking like that you would like to see instead of my mom. Monday, right? You would like to see the full name. For example. You would like to formally the big different. I will show you soon how to do it. For example, using this matters, right? So, for example, you like to have a day off moment so I could show something types of think today. That and I would like to to get only month, right? This could safely got here. Type for by height. May is really the fifth month, right? It's January, February, March, April May. So why do we have here for? Because you are counting from 00 is for gin. January 1 is for February. Okay, so it's very important that if you want to die bemoan fear, you should do something like that, Right? So this is a true month, and you could, for example, to something like a month on, then I would like to, for example, see a day. So today get date. We returned current date. And I would like to also show to the user the full year. So a spice. And today, full year. Well, maybe slash. As you can see now we have got a date here. That is right. Everything is working fine. And you can make it look like whatever you want, right? It could use him instead. Off Mom. Few cold, for example. Stroh somebody. How many hours are now? How many minutes? Seconds May 2nd. So these matters are pretty easy. You can just for my the result to the user as the way you want, right? The problem is that well, we still have here. Five. What if I wanted to see here full May and other things like that, right? Ah, I don't want I want it to be visible in strength. I could do a special functions. So, for example, could create a function that would, ah, create full sprink name. So for example, get Sprink month from number something like that. And here we will take us an argument. The number The month number right Month number now we can create a temporary Vrabel that we start the name off all more so I would create something that months on. And I will create an airway so I could take some, like January February March at who? You may, John July. Now we will make an enter here, so it's easier to read our rotator. Right? General Beauty. May June, July or guest August, um, September, October, November on December writes that number. So we have got now, here, start all months, right? And now you're like to return by these number the proper month, right? So if I have it that way So, for example, when I got string from most number like this something that and I type here, for example zero I would like to see January. So how to do it? I would just return my month. 00 is here. So you just copied here. Does You can see now we have good general, right? And we can send here, for example, today. Get month on. We see instances that today is may and it works fine as an exercise. You should do the same thing for the day off the week because Well, it's a good idea to practice, right, And the Metal Gate Day is returning the day off week. But you need to remember, Be careful. You are counting from zero, and the first day is no Monday. It's Sunday. So decent exercise for you. If you have any problems, just create a discussion. I will have you. And now let's try to make it a bit better way because you know, I like to have these cars a bit more pro way. Look, right now we have got to invoke the function and we have to send their ever able and get to the get off. There is lot of work to do here, right? You could maybe created them prior of arrival and save it, for example, here, the month in at the full months or something like that. But this is problem Arctic. What better if we had function already, that would give you current month in string. Well, you know, the creators off of these functions didn't think about it. Right? But could I add somehow to the date function, constructor, something he as you can. I hope you have already watched the prototype lesson about the prototype. Okay? And if you had your heaven in the water, it's so go on, do it Because we can use the prototype. We can do something like prototype, and you can now create our own functions so you can get month in strength and we can create our own function here that we that can be no executed Isra like that. We can. Then there's something like that today. Get month in strength and that's all. We just need to return now, the good month. So we need to create a temporary able like here. But now we just need to return what re town months. And now we need here. Zero Anto free or well, the current both The current move you can get from this get month, right? He will be zero or one or two or free the current one. This is gonna refer to the current day. That is Ah okay. That the variable is using key, right? The current variable that is gonna invoke dysfunction. So in our situation is this variable here? We have got from this place this month, right? So when refreshes you can see we have got may, But it's easier to years. We can instantly see that this method is connected with the day. So it just great, right? So you can create your own methods. You can add them easily to do current objects. You can extend them by your functions. That's powerful, isn't it? Okay, so now let's try to, you know, see a bit more and found the data object. Are we type? Since I think like today, the local time string, what would happen? As you can see, we have Good. Now the time. That's great. We have got to you hours, minutes and seconds. But you know, this is the lockout time string. What does it mean that if in one of the many countries it's a bit different friend that Web browser might interpret, it would be different when the country's might interpret it a bit different way. Then these thing will look a bit different. Okay, then it's strong hearing the Firefox when we run. For example, the local dates drink problem. Well, in my country, you most time type days than months. Then year as you can see these, this is how we show people most time our dates. Okay, but probably in your country. It's different. It's more days and then years, maybe somebody some people are using here instead, off 5 May or something like that. This thing can return man and different things in many different Web browser and other things like that. Time is most time re presented the same way, but this think and look different in many different countries. But sometimes this is the thing that you want, right? You want to support all countries and you want to feel them good in other places. But, you know, this is just gonna look different in ever a country or in every Web browser. It can also different. All right by it. Look the same sometimes. Right? So here you have got also to local string that is connecting both options. Andi. Well, the less great. Now he As you can see, we have got something called is called a Method. A disc setting the date you can change easily. The date to some other days off example. I want to set the date to the new I want to get today. That and I want to add, for example, one day and because of it. As you can see now we have got not 11th made by but 12 May. Right? So we can see sent here to the said day dead day and because we sent the same day like here and we had that one, we have got 12 right? So it's gonna work like that. You can also use the set time. That's the time is gonna work, like, you know, get time, method. Um, get time. Method is returning the actual time in many seconds. Counting from first January years already. That was in police. Okay. Uh, from the 1st January in 1919 70 year, it doesn't matter. Really What? This here Because, you know, they have just decided to say that it should come from this place and it's very useful. It's very useful because you can now substructure for example, the date that these five days from from now from the dates that is today and you can see exactly how maney milliseconds has powers and you can use information like that because you can, for example, divide milliseconds by 1000 and then you have seconds, right? If you divide seconds by 60 you have got two minutes. When you divide minutes by 60 you have got hours. So that's that. That's ver ver very useful things like that so we can use the set time, their minutes. Others, like, said hours sets minutes that seconds methods that you can use like that. But you need to remember that you're affecting these meta to exactly right. So if you wanted to create very able tomorrow and you would like to, for example, create a new date that this really tomorrow you can use other constructors for the date function constructor. Okay, you can, for example, simply me second. So we could use for example today and now get time, right? And I would like to add here how many milliseconds to these Because when I was going to see now tomorrow equals today, right? But when I add here, for example, our big number, as you can see, it's changing beauty change here on nine hours because it's in milliseconds. So this should be big number. So we can adhere. For example, one day how to add one day one day is 1000 milliseconds multiplied by 16 is now what, 60 seconds. I want to have. I'm not 60 seconds. Not on the one minute. I want tohave 60 minutes, which is one hour. So now it's gonna at one hours you can see And when we multiply it again by 24 we'll have one day so you can add easy by taping something like that one day, right? And you have good. Now tomorrow here. And when you do something like that for example to moral minus Today you will notice that we have got here in milliseconds the full day and we can use information like that to check how How when the seconds has spots from one time to another time If you want to see no harm in the seconds has passed from Ah, you know this place to display took this time you can just divide by 1000 on. Then you have good no seconds when you divide again. By what? By for example 60 you have got now minutes When you divide again you will have ah hours so hours and now winning divide by 24 you would have days. Okay, so you can use information like that. It's easy to see how manner minutes you need to, For example, get from this time to this time there is also other constructors. So you can use, for example, new date and you can type year, month and day so you could create variable tomorrow like that new died and you could get today that get full ear today that get month on today that get date and plus one and it will give us the same result. But as you can see, we have got here the small Well, no, the same exactly result we added one day. But you know when we do something like that tomorrow that well, tomorrow you will see that we have got to use they may 12. But you have got here time 0000 because we didn't specify minutes seconds in many seconds, only first for your arguments are required, you can add more of them, so you would have to type get ours, get means get me seconds and everything will work Fine. But it's just lots of war work, right? I think that this is better way to do it. But you know something? You want to achieve father things so that that might be the way you want to do it. Okay. So we can do it that way. Um, there are just many ways you can do many things like that. You can also create tomorrow, for example, like that new date. And you can just type here the the days string. But you have tow Keep the former like that. Okay, You have to keep the former like that. You have to tie Pierre. Firstly, the year So for example, 2000 feel Ah, 50. And now the month. So it's my And now the day. So it's 11 and now we have 11. I want to have it tomorrow. So now it's 12. Yeah, it's working fine. So if you want to, for example, create a met thought that we return get for market date the date you just need toe return here, right? The value you want to show people exactly exactly on your website. And then you can use these methods with the date objects And I think that is the coolest way. And I think that you should do it is an access. I just return here the way you want to have people on your website. See your time. Okay. That these insight, the object like that. That's something that doesn't thank you very much. 56. clock using date object: Hello. Let's trying the bids A date object by creating, for example, Oclock. Yeah, Accounting Club. Sometimes it's useful to have something like that on your website. Right, So the user can see exactly what time is. No. So how to do something great? Well, we could do it a bit easier way, but I just creating some variables function that will count on other things like that. But we'll make it a big car. Let's make it because of brother beautiful professional away. So we have everything in one place. So it means that we gonna create a function constructor like, for example, that. Okay, so we're gonna create a function constructor, which means that we can now create, for example, ever able clock and we can do something new clock. I would like to be able to send their a lemon handler that I will be able to show their cook. Right. So I'd like to send in for here. So the element handler and I would like to have it assigned somewhere here. So I would like to create it and property for this class right element, handler and I like to assign here element handler, that this sent you right like that. Okay, so now when you have got it here, we can We would like to also start the clock. So I would like to create a function that he's gonna start it. Okay, Some women do it. I would like to see everything playing right. So how did we need to create a start function that's got start all these things right on what? It should I think that it should start counting. So how to count? I think that we should come every second, so we should involved as set in terrible function. Okay, set interval. And that is gonna Iran intervals. If you don't know what these met, please go to the listen when I'm talking about them, OK? It's where I'm talking about the set about even last lessons off evens. So setting terrible function is very new here, and we want to Ron it every second fried. But what we want to run. Let's create if you're an anonymous function that will run a function that is gonna at seconds. Okay, so let's create at this dot at second function, that is gonna seconds toe our actual date. So actual date should be also property actual date. And we can do stuff like new date right on Dwell. We also want, for example, method that is gonna be, for example, update element handler. Accountant. So it will update the content off the off 11 seconds. So you could also call it set element handler, for example. Right. But we want to update exactly the accountant. So I think this baby thing better naming for it the function. And we want to update with this method element, hunter. So we want to goto this element hunter that inner HTML and updated with the actual dates of this that actual day. Right? So when we don't need nothing happens because there is no matter running him, we can, For example, it start also invoked this update element. Handler content. As you can see now we have got the starting value. And now we want to at every second to our actual date. And you second so we can do it. For example, Like that new day when we carry the new day. It would be just a new day. The right, So we find you Second. Andi, it's gonna work fine. Right so we can add a new second like that, Andi. Well, we need to just invoke it every second with the setting terrible method. But you need to remember that sent Interval minted will not get access with the disc E world to that method in death metal because set interval is ah, a special method and it doesn't see in its scope these methods. Okay, here. So you need to create a temporary variable like, for example, self and we've days you can easily get to, for example, at second because you want to add a second. And after the adding the second, I want to update element 100 accountant. And now, as you can see when you're on it, the second part the part of the seconds is updating pretty fine. So it's working good. We have just programmed everything. Pro Perry. The cool thing about, you know, on its the is that I divided all the actions in tow. Different matters that you can see here is updating. He's here is adding seconds. So you exactly see what these methods are doing. You know, you should always create a function for each task to do OK like that sometimes when the short program maybe maybe tracked head even you can. You know, we could also do a simple function here, right? And do all these things without all properties, other things like that. But you need to just, you know, I think if your skin is gonna be very big, maybe sometimes you don't need to have fits. Very. The script debuts. You shouldn't focus on making it, You know, very well coded in the disco that the code doesn't need to be always very well. Read a book, right? Because sometimes speed matters more at this in Java script. It matters a lot because you're just creepy is gonna load faster if you have less things. He right. But you need to just think a second it's gonna pay you off or not. Okay, But what? Well, let's train a bit like that, and we have good now time, but it doesn't look good, so we can change it to, for example, days stop. And we can use their local time single, right, for example, like that. And as you can see right now, it's first. I am. Wow. Yeah, it's almost 2 a.m. Here in Poland and, ah, we have got now here on the time specified. So it's pretty good. But, you know, in your country, maybe you're using the AM and PM so before 12 it's AM after 12. It's PM, right things. For example. 13. Ah, when we have got 13 hours here, it should be the PM it's assured the first PM right? It's it's how people, um, in other countries call it. Maybe the local time Spink is gonna work like that for you. That's that's that's the scar local type thing should work, right? But what if you want to make everyone see this week of a M? No. Only in your country you want toe, everybody see AM and PM right? Then you need to create your own medicine. For example, you can create this get formatted date and we can create the function. It's gonna do it. Okay, So, um, let's create a temporary variable for hours this actual date on, Let's get ours from it. And let's copy it, Bam, bam! Hours, minutes, seconds, hours, minutes and get seconds. And now we can return hours. Then I call on and man, it's I mean, that's uh, on then, seconds. And now we can do something like that. Get for my mother date. And as you can see now it's working. Fine. But well, we don't give leading zeros here, so we should add them. So if ours is slower than 10 then at two hours would zero plus the hours, right? We just want to add before 12345670 So that's how we do it. Europe as ours. Okay, so we doesn't do it two more times, hours, minutes, and now Seconds. And as you can see now, it's working. Fine. OK, now we should also do something of the AM and PM So if ours is lower than 12 I would like to create a variable the disco for examples suffix, Which means what is gonna be at the end, right of the world. And it's am them. Otherwise we should create PM But we also should think about hours because they are normally here. 0123 for 12 13 14 bam, bam, bam! We should now do something like ours, minus 12. You should, you know, removed 12 from it, because otherwise it's not gonna look good, right? And now also add the suffix. So, for example, its base. And then suffix concedes, Oh yeah. So if hours were bigger, we would see here ESPN That's charity work. So we created our own for Mother date. And now you could be thinking like, should it be here? Is it really connected so much to these? But not not not all. Not at all. We should create a prototype function here. We should extend the date by the get formatted our format it date. Im get formative time. What? It should be called like that. No equals function, Onda. We should get it from here. Get it Here and now. We are not working on the actual date. So we should just something like that and because of it No, we don't have good days, but you can Is the to something like this that actually did that get for mother time. And now it's also working Fine, but it's a Quincy. This is connected to date right now we can use it in water for applies in your program. However, this method was not only useful in here, right? You could maybe called it a bit different way. Maybe get formative time. You could create a parliament, a matter that would, you know, affect how exactly this would look like you could make money types off formatted time. Right? And you could return different types depending on what very booze would be sent here. Right. So that's how you can make a pro way, um, clock and the clock that can be duplicated. Right? You can now do something like that. Now we can compete on you can do something like that, and you can start the second coke. Chicken soup has no to coax that. You know, you could stop this one or this one. And this is your exercise to create a stop function that is gonna stop Said Interval. I'm doing things like that in the lesson about set in. Terrible. So just do it doesn't exercise. So you will see if you can really repeat a coach like that to create a stop function. But you need to think about Do you really need to stop something like that? Most time you don't need. So remember, kilobytes are very important in javascript. If you do, you never gonna use a stop function. Just do not created because it takes your kilobytes. Okay, it's gonna Your website is gonna bloat slower. So you when you're programming, you should always always think about how big your program is gonna be in JavaScript because kilobytes are making your website loading and the flower so But, you know, dar situations where you can safe disk kilobytes. Sometimes it's battery also toe called like that because your code will be easier to understand later. And it would save you time. But every depends on situation. If you hope said, these cannot be put, for example, visited by 1,000,000 people. The and things like that are not great because even 10 kilobytes are important, right? Speed is the thing that matters the most. But sometimes you even might say by creating a function like that. Kilobytes are, you know, time jobs. Because, you know, you can invoke it many times, like you can create two clocks. Most time you need only wise one. So probably this is not the best solution the for for it. But it's good idea to train things like that. So So So you know how to, you know, called properly. Okay, that's going that. Listen, thank you very much. 57. What are cookies?: Hello Today I will tell you what are cookies. How to create them, how to use them, etcetera. So the cookie is the solution. The solution for not being able to store variable in all possible pages at once. You see, when we are in the index html and we will have another HTM of five When you create a variable, for example like that these were able will not be available in that another website, right? It would be just a neuve arrival. Each time you're losing the accountant, you may be like I but why would I need something like that? For example, you can store. You can identify the person that is visiting your website. You can then for examples, store the logging password, the password. But you can store that he is locked in right, And because of it, he doesn't need to look in every every page. So you know when you're on the forum, for example, when you're revisiting topics and you want to reply, you don't need to look in every time after looking ones you are look in. So cookies are using something for things like that. You can start preferences of the user, for example, he wants to have the background to be read. You can start what is inside a form, for example, when he lived a webpage. Or then when he comes back, you can see everything still be in the form because all the things are stored on his computer. Now cookies are just containers that are start on the computer of the user that is visiting your website, and things are start like that King equals 31 then the semicolon key to huh value to, and you can then get these values from document cookie. So this is the solution. How to use it. Let's used to create cookie button. I created a cure to Barton's Create Cookie and remove kicking cooking that we have us a bit when they do create cooking on click. Um oh, click. I would like to create our first cooking in order to create a cooking you type. Document that cooking, then the equals sign, and you have to just type key value. You just need to remember that you can't create on the one cookie at once. Okay, you can do like to Kiki's at once like that When you do something like that, you will notice when you create Cookie and you go to the fire back, Do you have only one key with the first value? Okay, so if we do something like name and then, for example, are Kaddish, you will notice that I created a cookie. I get cannot remove all these cookies. Okay, so when you click on it, as you can see, you are creating the cooking. When you creek Morton wants you're not creating another cookie, but you can change. For example, the value here is over. When you do stuff like that, as you can see, the value is being changed. So in order to change the value, you just type here something like something new, and he's gonna work. Okay, Now let's create another cooking. So if you want to create more than one cooking, you take a type something, for example, like surname and Lord are chick. It's type your my proper name. And as you can see now we have got to Kiki's at once, right? And the cookie is costed on these domain. It has got the size and he says, good to puff the path is very important because right now this cooking is available. The content not everywhere, Like I said at the beginning of the lesson, but only in sub folders and this folder. So if you had something, that website, for example here, then you wouldn't be able to get this cooking if you want to have it available everywhere in every folder. And this is very important because sometimes you can create a cooking Some, you know, you could have the Catholics like, for example, video courses. Oh, could you can goto video courses online dot com And you will notice that when you go to, for example, programming courses from nine. Right on go here. You notice that if you had, for example, your cookie created here, it will be available only in this folder and webpages here. Okay. It wouldn't be available here on the main website. You want to have it available everywhere and most time he wants to. Because, for example, when you look in right well, logging, he wants to exactly know that Ah, that the user it is. Look in every place, right? No, not only one place. Then you have to If you have Ah que You have to take puff and something like that when we create a cookie gain after refreshing. As you can see, we have good another cooking. So we didn't change of these guy here. Why? Because he's to tell a new cookie that is available everywhere these cookies on the table in this sub folder. Okay, so let's always remember that you have to almost always do something like that, right? So create cooking and gain. We have got Let's remove cookies that were already created. We want to have them always like that most time. And, well, the cooking is gonna be removed after you close the Firefox or any other Web browsers that do not restore session. Most were brothers restore session after, um, opening them. Okay, when you open the there were brother. They're restoring the session that because of it, they're cookie is still gonna bidder. But if the world brother is not doing it most time for example, intern experience not doing it, cookie will disappear. Sometimes you want to remove the cooking after, for example, 30 seconds even you don't want to have it every time. You know full time on the user computer. When you want to change the expiration date, you can use the flak expire so you can decide something like that. And then here you can at a date and these days is gonna be created using the date object. So the thing that we learned in the last section right about the dates So we can, for example, that to something XP operation date off cooking and new date when you do it like that and then I used the UTC format is very important because it requires special former. The universe is universal time for mother. Okay, so you have to do it that way. Andi, When we refresh here and create a cookie, as you can see who he removed, it's come help. The problem is that when you said here a time expiration date to the day, that is now this is this date, right? The new date is returning us. Now the cookie is gonna be removed because when we created it instantly, with one second after this time, right? So you have to change the expiration date of cooking. Do with the for example, set time method. You can then use the expiration date of cookie gets time and for example, at 60 me seconds. Uh, that here. One second, 60 seconds. Maybe even more like 60 minutes. No one. Refresh it and create a cookie. As you can see, the cookies gonna be removed at free 58 a. M. So that's how it's working. We now change the expiration date, and it's gonna be removed in three hours time. So the user is gonna be only, for example, logged in for free hours like that. Um, or the things in the former gonna be starting for for three hours off course for storing logging or something like that. You should do some security things, other things like that. But well, it's most time. Things like locking in are done in PHP. OK, so don't worry about things like that. You will most time use it. So, for example, sending between the JavaScript been PHP some value values on four for examples, storing values in the forms. So things are not forgotten, right? When you go for you to, for example, video courses online that come on when we go here and we add something to the basket, you will notice that we didn't go here on. We type you, for example, on the main. Um, we close it and we order again. It was not. Is that high TC Mary Steve here it is very useful because you are not making areas. They're angry, you know, most time. Ah, there are many, many more inputs, right? It's a good idea to start things like that on because the user is gonna be thankful to you . So that's how you do it. Before example cookies, right. You can start that. For example. Name off the input here on, then. The value of that input here. And you can doubt then check ive the cookie exist then. Hey, let's do something. So that's how we do things like that on. Well, you can you also use the local storage for it. Local storage is local. Storage is from html five until swing javascript. But look at stories not supported as well as cookies. Okay, Eso we not talk about it right now? Let's go back to the cookies. Not right now. We should really learn also how to remove a cookie, and you have probably already noticed have to do it. We just need to know something like that, right? So if we want to remove a cooking, it's to something like removing cooking. And then we just want, for example, remove the Arkady Jewish right. So we want to remove, for example, the cookie with that name with the key name. Let's remove disarming. And we just need to set the expiration date that to the day that happened already rights, for example, miners one here. And when the refugee refresh it and we could remove. As you can see, we're removing this cookie right By clicking this, we could even do it that way, because the truth is that the time is passing grinds. And so when we could remove cooking and when the date here is is the actual date, well, one second spots over, then a cookie is being removed, so that's how you remove the cookie. You can also set the expiration date by using something will discuss marks age. That will be very cool if we did it that way, because it would be a bit easier. Look here we would need to only types in fact, marks age then equals on. I could do something like no plus plus plus 16 seconds, for example. Maybe more. A bit more. And now when we refers sheet and we create a cooking As you can see, the cooking is gonna expire in one hour time. When we do like that, it's gonna expire in one day time. That is just awesome, because well, as you can see, we didn't need to create things like that. The problem is that it is not supporting me that experts six and okay, if you do not need to support it, then go ahead. Use these version. This is also very cool. So in this lesson, you learned what are cookies? How to create them, how to serve values. But how to, you know, retrieve these various easier how to create them a bit faster. Remove them a bit faster because if you had to do it every time, the same way for medical cases would just take lots off lords off time. That's why we're gonna create in next lessons, special functions that's gonna have you doing it. Cookies are pretty important. I think to know so. But we're gonna focus on creating functions that's gonna have you work with them that selling does Westen. Thank you very much. 58. Creating a cookie function: Hello. In this lesson, I will teach you how to create a function that is gonna have you creating cookies. Foster, Let's do it. Let's create a function that we will call function, create cookie. And that's an argument. Will take here Name value on days. No, we need to create a cooking whether that pretty easy doing things like that. And we just want to change here. Now that name is gonna be specified by the person sending que two did function volume like , for example, well, name or surname or age or other things like that, right. And no playhouse we now need you. Values will change it, Father. You plus, uh, and what? We can do something with the time, But let's do it later because it's a bit more complicated. Let's now do something quick, Puff we just that way. So when you do it that way, we can just now the creative cooking. I want to create a cookie with the name um this h 26. Whatever. And when we refresh you on, go to fire back. Let's remove the cookies from the last lesson created cooking. How create cookie is not a function create cookie is not the function who the problem is that took of Adidas. A name like you. Oh, create cookie bottom. It's good bottom bottles. Okay. Button Barton. Okay, As you can see now, we have got your age to enter six. It's working, so you can easily now create cookies without thinking about this weird. The really very weird way of creation cookies can create another one, and it's gonna be created very fast. It's very, very useful, right balm. And now when you told something about days, if I do not send days here, as you have noticed, we do not have a near. But this thing is then on defined so we can check if days it's not undefined than I would like to also do something like that expires. Expiration date rape At the start, there is there is not gonna be anything. So we can easily add it here, right? And this will not affect at all our coat, because we are just getting nothing. But if there is something sent you if there are days since you Dan, we can do something like, for example, creating an expiration date of cooking like that and we can set here how many days we want to add. So how to do it? Well, we can use instead of the set Time said date aan den toe here said get date time and just adhere days. Right? And now we need to create we toe assigned to the expiration date new value that is gonna be interpreted here. Normally, we would just type here. What? Something like that, right? Just like we need also the semicolon. So we would just type something exactly like that expires equals expiration date, difficult cookie dough, UTC string. And it's gonna be just added here if somebody is specified it here. So if I want this guy to be 30 days old 20 whatever, you re not. Isn't that now when I create a cookie, it's gonna expire in 20 days time. So it's very useful, right? We can now create a cookie with 20 days time expiration instantly without thinking about this code again. Okay, so that's how you create a cookie. Fast way. In the next lesson, I show you how to remove a cookie. Fast mate. That's only the lesson. Thank you very much. 59. Removing a cookie function: Hello. Today I will show you how to create a function that is gonna remove a cookie. Fast way. In order to do it, we're gonna create the function that we would call it. Remove Cookie, and we just take a name off the cookie. Did you want to remove? We're removing the fund that Cokie, by doing something like that, we just need to know Change this, think to name. Plus, that's all right. We are sitting the expiration date to the actual date vehicle. Do a bit more operations. He right, for example, setting it to the day that has already happened. But we don't need to, because time passes in the way. And we just said that document cooking name expires bomb by bomb. But you also need to always remember that it's only gonna remove cookies that has got pop set to that. All possible cookies. Okay. If you create a cookie without this path without using the create cooking method, then you might have a problems, because the path you might be wrong. So take it in my always So when we now use it, for example, removing cooking, we can remove, for example, age cookie that's chickened out. Let's refresh here and the cream of cooking. Create cooking. Real cooking career. Cokie Remco is working, so it's good that's going to listen. Thank you very much. 60. Cookie - retrieve function: Hello. Today I will show you how to create a function that is gonna have you retrieving the value off cookies by specifying the key off the cooking. Okay, so let's greet the function that it's gonna be called Get cooking by key name. And I just sent you and they okay, so how to do it first? Let's look how the cookie is looking when you do something like that in front inner HTML and we sent you document cooking. You will not. Is that you have with your assignment when we created more cookies and we're refreshed. As you can see, we have, but certainly for the trick. Age 26. So we could be here a semicolon and then a space if we had more cookies. So we did something like that. Name on. Now here are Kaddish. You will notice that wasn't created. Cooking? Yeah. Create a cooking. We have got again cynical on this base. It means that we could split right. We could divide this string because there's a string into key value key. Very key value about you. How to do it. Well, we can justice if, like that document cooking that split and then semicolon in this space. So because of it, we have good. Now an area off cookies when return it doing something like that on typing kid. Whatever. Because the name is not being used that right now, As you can see, we have got Inari. Who would know here, the comma on when we do something like cookies off zero. We have got sour name with Logical, and we do keys off one. We had good age. 26 When we do cookies have to Here. Good name are Kaddish, right? So good. All cookies here? No, but right now we want to split the key using their what you think the equals thing. OK, so you want to split eight by days, right? And because of it, we gonna have what name? Come on our cottage. And then we can get, for example, the first on the key on. But when we do something like that, we'll get the volume, right? Okay. So we can use these information because we need to go to all the cookies in order to find the one with the name like their name that is gonna be sent here. So for example, when we type your surname, I want to get there. What are ticket as the value? Right. So into used, for example of four lope. So we need to go to the cookies to all of them. So that's how our condition is gonna look like to incriminate that I every loop Andi Okay, so we need to just know Check oh faster and made me Let's split the cooking So cookies off I Let's split eight by this sign and that saving entered for examples plated cookie variable. So exactly know what we have got, right? Split it cooking. And now let's created in private label that we represent Cookie name. So spirited Cooking cookie Name Cookie Key name. Well, this will be even more. Specify a specific name. Cookie Key name is the first. The 2nd 1 is the cookie volume, but well, we do not need to way. Don't need value to get value because it's justices of time, right? And if the name is not right, so if name equals the cooking cleaning, then yes, we can do something like creating cooking volume, which is plated cookie In the second index, which is one and you can just return cookie volume here. Right? And because of it is you can see we have gotten something. What you want to get h we just to eat that way with to get a name? We just We did win. We have been, er, kaddish. Awesome, right? This function is gonna save you lots of time because you will have to do it each to a handful. Getting anything from the cookie. There's also something with school, local storage, which is easier to use. You don't need to create things like that because they are articulated. But look, a storage is not something that can be also used by PHP. For example, cookies can be used by PHP by Travis keyed by Well ah, and then language web, developing language that can access them and has got a p a for it. Okay, look, authorities just for javascript, it's easier to use, but it's also supported. Uh, if you want to just do something locally, you can learn about local storage. It's gonna be I'm gonna talk about it in the HTML five course in the future, because these from html five Ok, that's only that lesson. Thank you very much. 61. Escaping: Hello there. Values that we've been using so far were pretty easy, but easy. I mean, the when No special characters here we didn't use, for example, characters that could be interpreted by, for example, javascript a bit different. For example, the semicolon inside. Right? When we do something that and we adhere, something like that would be a fresh and we create a cookie. As you can see, it's not showing up here right when we take a sour name. As you can see, we have been on leave without trick because the semicolon is reserved for, you know, Was it conceived after the same call? There should be something like a new key. Life, for example, expires on powerful something that it's not something that for sure. And there are many special characters like that when you, for example, want to send a U. R l to the A cookie thinks like escaping like inter like encoding is very important. You can just do it by using the function that is called Inco coat. You re component. You just I've been on the value because of it, and you can see now we have got it here, ese but we have to also remembered after. If we in coat in creation of cooking, we also have to decode they cookie volume later because so it's gonna be interpret proper properly. You can see now we can use the special characters pretty easy on and that's how you do it. That's only the lesson. Thank you very much. 62. Popup windows: Hello. Today I will show you to Information box is the one that will show the message that you said they wanted. We ask the user if issue about doing something, and if he's not, he can choose that a the council option or when he's sure he can choose the okay option. And also about the prompt. That is just asking the user for input. Okay, so these are feet methods like that and you can use them using the window. That and then the name of the method. So as you can see, method like alert, confident, prompt is inside window. But But because the window is in global, you can was global scope. You can just type Allard we've been using Allah did many times, so we could just type stuff like Hello, Iraq. And when we refresh, as you can see, we have got the message. Hello, Eric. If you want to make an entry side, you need to know that in order to do it, you need to use the backslash. And as you can see now we have got enter. Otherwise he will not be able to do it. Okay, so what's up with the come from when you do account for him. You're just confirming if the user is sure sure about something So you can ask. Are you sure about dilating your account? Well, this is very, very important thing. If he delights his account by mistake, Well, him reproducing his can might be problem, right? Because all the information might be deleted. So Ah, here we have got an ounce for answer. And as an answer, if, as you can see, he clicks Okay, we'll have in these variable. True. If he could ex council, we'll have hell. False. So when I click OK, I can say something. Like if answer is okay. Anything in condition that this not false Easter, right? So if answer then we can say something like goodbye. Okay, Someone he recreates his account again. So Okay, give I So that's how it works. Otherwise, when he clicks cancer, nothing happens, right? You can do us if you want to do some special thing. If you keep clicks council like make up your mind eso you can do You can ask person about some very important things that he doesn't your website If he sure about them okay. And there's there is also prompt We could do something like prompt. What is your name and variable here. We would have the result from the prompt and we could decide like alert. Good bye. Result. Okay, so like that. And now when you refresh Okay. What is your name off? My name is er, Kaddish. Goodbye, our Kardashian. So this is just a prompt. That is asking the user for the input. There is one benefiting these windows. As you can see, I can do to tell her anything. When? When this show up. Right. And sometimes you want it looks like they but most time in two. Member, you don't want to use all these things at all. Allergy is good for debugging. The prompt is not good at all. Come firm is good for very, very confident, Shown all things very important things. Once when the user is gonna abilities, I can't by mistake. It's gonna make problems. Right? So then maybe the confusion is good, but only know right now it's people invent better solution for things like that. What? Well, you could, for example, show a box here at the bottom, right? And you would say something. Are you sure about this thing? If not, click back and he would just kick back and everything will be reversed right on. If he doesn't creak, the box will disappear after a few seconds. It's hard to dio. No, we would just need to created a box here, then started to display non. And if he clicks something that this picture it changes to to from from from display non to display block. And then the message is gonna be shown. If he clicks reverse, we just need toe undo the thing that was done. So, for example, when he adds, then we can just subsection right. And you could just start these information somewhere. And if he doesn't do anything after, for example, 10 seconds were so using the set time. Admit it, we could just make these boxing disappear. This is your exercise for disc A. For this lesson. I think this solution is better for asking things. Well, maybe not for could it in account, but for, you know, simple things that he the user is doing because when, for example, he's removing records, right? Well, this is something that might make it problem, right? But But the truth is that when somebody creeks removing the he would need toe every time Creek accent. Active, active, active, active. It takes off this time, right? And who by man, I'm sure. Why do I need to tell you this every time? So it's better to just show a box and seek justice. Remove. Oh, I it's true. I have to reverse this. Okay, that's better solution. I think that's only the lesson. Thank you very much. 63. Math methods - rounding values: Hello. Today I will show you useful math methods that you cannot probably use in your adventure off programming in javascript. So the first method is called around which Iran's the number to the nearest in teacher. Sometimes you might have integer looking like that, but you want to have it as a full integer. Right? So how to do it? You just something like math that around. And as you can see, we have got now here to this is rounding to the first number here. Okay? And it's rounding the math way, which means that if you have something like that, you're gonna see free. If you have something like that, you go Nazi too. Okay, so lower than five here in the first position after the dot. Then we we always see the number that issue. If the number after the dot is bigger than five. Oh, are you know, after the five years, for example, one. Then you're gonna see free. You have got also, something good is called ceiling. Ceiling is up in our house, right? So you always run up. So if you do something like that, you're gonna always see the free in situation like that. Even as you can see, it's working like that floor is working a bit different because floor is down in our house . So you run always down. So when you have even 2.99999 you will still see too. And you have got also the something that is noting the math library, but is very useful. And I think I should talk about it now because, as you can see, we are rounding to just one number. What if I want to keep the things that are after the dot What if I want to? Even if there are no things after that to show zeros. So, for example, when I do something like that, um, without the my floor you're not is that we have got to that 0000 OK, sometimes you want to keep how things are printed out on your website and who because of it , you just say it must be fixed. Must be always free position after the dot and also it also means that if you will do something nine 677 it needs that we have worked nine free and aid because seven is bigger than five. So this is gonna be a And as you can see now we have got it right. So it's also running, but the part that is after the dot OK, and this is various with is not in math library. But even if I didn't help you now, you would probably know to hear about it would be hard to find this function because it's hard to find it, okay. And there is also a B us, which means absolute value, which means always pulled positive. You sometimes want to change the value. Does this negative Negative. So do something like that to the value of the dis positive. So as you can see now, it's positive. Even tell we have got your minus right. Thinks like that are useful when you want to, for example, do sub strict ing off values and the result is negative when the results should be positive for because, for example, you want to check how, um how men in how long is the part from one place to another on Europe, for example, screen right when you click here and then here and you, for example, subset the number from here you will have the positive value. But if you stops like first, these value from this value. So, for example, you have here, for example, for 300 pixels. If you have 500 picks is then you have negative value. But the substructure in of these that difference should be positive in the way. Right? So a bs is useful for things like that you have got also, something will discuss muff power so you can get for example Hey, I want to have the, um they're free to the power off, for example free. So it means that we have here 27 right free multiplied by free multiplies very free. And there's also some some problems. When you do things like that, you should know that from now on, the type off the type of is a method that is gonna give you the the type of the variable. As you can see disease string. When you do it that way, you have good number, and sometimes you can have strings like I'm and sometimes people might buy mystic types. I'm thinking right, and because of it, when you do, even when you do something like, for example, math that around. As you can see, we have good know the number. So this is not working on things that things like that, but you can power. So we can, for example, parts to integer all this thing and because of it. As you can see, it's working fine, because this function is gonna take the part that is looking like integer. And this part is this. If you do the parts float, it will take also numbers after the dot So it views not the rand function, because this round only to the inter ginger without the dot eso We'll use that to fix right now, so x two fixed and we do something like, for example, free numbers. And that's something card like that you can see we think of free that 1 to 5 without the parts float. This is not working because we cannot work with string as a number, right? So sometimes type off things are important. Most time in javascript you don't need to worry about, but in situations like that, it's important because well, sometimes you can take, for example, who have class, and you can have a 50 set six. And if you want only this 56 contrast parts it right. Okay. On and how to do random numbers. This is very, very important. Topic will talk about it more in next lesson. In this lesson, I would like to just show you that this returning the value like that when I will keep refreshing the website that you can cities is changing to the Iran, the number looking like that. And we need to somehow changing to, for example, numbers from 0 to 10. And we can use something like that to, for example, generally random quotes on your websites or something random, whatever. So that's how you create another number. But we need to also know how to create, have toe, make it look better. Like you want to change it from a number like that to, for example, to free 45 And this thing will doing next lesson. There is many, many, many more matters in the math. Like, for example, you can come the costing of the seniors and other things like that La Guardia. But the truth is that in well, I go hunting 95%. You will not use things like that. If you need them, just go ahead to the math. Re foreign. Just typing the grandma free friends JavaScript and you find all methods. Most time. You just need to use thes ones. There are the most important. Don't this time. I'm looking in something you don't need. Right. Okay, There's only that lesson. Thank you very much. 64. Generating random numbers: Hello. In this lesson, I will show you how to generate a random number. In order to do it, you have to use the muff around them function. And as you can see when I refers thes website you're not is that we have got a weird number . The number is very big after the dot but there is always zero here. So this number is always between zero and one. The problem is that this is not very useful for us, right? We most time want an integer. We want to have 012345 So we can use it, for example, as an index for Inari. So we can show, for example, from the area quotes or something like that. Well, dough and exercise like that in the next lesson. But in this lesson, let's learn how to generate properly this numbers. So in order to get now, for example, bigger numbers, I suggest multiplying it by, for example, to as you can see now we have good numbers between zero and two. So yeah, this is pretty starting to work better and well, we want to just go away with this part of the number, and we'll do it by using the My floor mattered now, As you can see, we have good numbers between zero and one. So if I type you for example five, you will notice that we have numbers between zero and for right. Okay, so this is very cool, because you can generate a pretty easy numbers between zero and five. But how can we generate numbers that are not between zero and some number? Right. If you want to have zero and 100 between zero and 100 just type. Sounds like that, right? And they duly between zero and 100 if you want to. Between zero and 11 or zero, you would just type two. So you just tow have you, like, minus one right result in this stop. But if you want to somehow get numbers from, for example one and free how to do it? What would happen if I add one here? It means that the minimum right now is one right. Well, if here is zero zero point something, something something like the floor will take it to 00 plus one is always one. So this makes that the many moon right now is one right? We're making it. So it's on Lee one if I type here here to the minimum is right now too So two. Plus the thing that this here mine is one Is that said that we are going to have the number from right now, right? So every type here free it will be between free and four. If you adhere one more so like that we will be between free and five. If I had here one more it will be beautiful Win between free and, um seeks right is working Fine. So that's how you congenital rate whatever you want with the random number. But most time you will just want to generate numbers from zero to for example Ah, 10 for 2030. Or sometimes you want to just jump the one most time. You can't in a way in javascript from zero When you want to generate numbers, you want to most time have it from counting from zero and will use this method that lasts Lesson went where we would generate random quote that selling the lesson. Thank you very much. 65. Random quotes: Hello. In the last lesson, you learn how to create a random number using the random function. In order to do it, you just need to type here the right. Arrange off the numbers he wants to get. So if you want to get the number from zero to free, you gonna just type something like that? You don't need to It zero here so we can just type something like that. And today I would show you how to create a program. The A script that is gonna show the user random quotes on your website when he visit your website. He's gonna see every time, a random coat and here I have four cool quotes. I think a person who never made a mistake never tried anything. You let's go pay it and let's create a variable that we store our quote. I think that this should be an area because we can stir men off them there and I would just die but here like that. It doesn't matter how slowly you go as long as you do not stop. Okay, this is very cool. So coat the next one. We may encounter many defeats, but we must not be defeated. Okay, let's add it to our quotes. And if you can dream it, you can do it. So let's do it like that, dumb. And now why I did added to an area Because look here right now, we would generate numbers from zero to free. Right? Zero Want to free? Hey, this is the thing we want. We can no use it like that. Quote quotes. We're on down number. And as you can see now we have random What on our website cried, isn't it? Now we can add also our alters how to connect. Quote with alters. We can just create another variable that we call, for example, alters and well, just a sign here. Authors, if the same order. So, Albert Einstein conflict Confucius, Maybe I'm reading it wrong way. So I'm sorry. I don't know some of these languages. Okay, So, like that. And now you can just type something that quote and then you can type something like alter right voters off random number that was generated app, Topia. As you can see now we have good random quote and the other of course, you can make it look better and this is your exercise. Create you, Dave, I, for example, quote And inside these he should have two spans, for example, for the outer and also for the and quote. And for example, make the quote with the Stites CSS to the better. So it's, for example, written in the italic and the outer would, for example, be bold. And it would be smaller. Right? And you should insert into despond instead off inserting it like that. Ah, the quote in the autumn that zone that lesson. Thank you very much. 66. Window Location: Hello. Today I will show you how to get the location that you are l the place where your user is in your website the puff As you can see in order together, you just type window location and well we have Good then the path with the domain with the sub folders with the in the speech demand right here and think like that is useful because you can also change it using the window, that location when something like that would be useful. For example, let's create a link yourself. Well, change the place through. For example sample html. Okay, let's give it a 19. Let's create your html five. Andi, when I click on it, as you can see where Changing website What if I wanted to do something before going to this website, right? The user has changed something on the website. I want toe just allow him to go there. But only after doing some things in Java script right? You need to do some operations before allowing him to go there. How to do it Well, in order to do it, we have to get that sample. So let's get it using the get element by I d. And now we need to change the own click even because we can use the even object that we talk about. You can also use the proven default method that is preventing the default behavior. So right now, we're not gonna go to the u. R l like that. The problem is now that how to change after changing things that we want to do, Um, that you are all right, How to change the location. Well, that's imagine that we have got here men operations like, ah that we wanted to do. And now we want to change the location. How to do it. We just I win the location and we change into simple HTML, right? It's can see when Creegan it nothing is working pretty good. The problem is that Hey, if I change the girl, I would have to change it also in the cow. But hello. I know the JavaScript. You also know the JavaScript right now before Because you watch all my videos. And you know that if we are here in the sample variable because this is the handler from the element here, right? We can use something like this. This will refer to this sample now, and we can get this attribute here. So get attribute. Method is forgetting this value. Right? And you can just type age re Ferentz and those. All right, now, as you can see, the link is working. But you can do men operations before going to dislocation. Okay, That's only good lesson. Thank you very much. 67. Preloading images: Hello. Today I will show you how toe load images only when they are needed. Because sometimes when the user reason their website, he doesn't see all possible images that start the start, right? He's not gonna scroll down most time. And because of it, you can save your bandage. And in the same time, the user will load your website faster because he will not need to load all possible images that are hidden somewhere, right? You can pre loaded them. You can load them when you think they might be soon needed. For example, when he's scrolling down right when there is a scroll you can also loved right? Because we have got uneven on scrolling. We could do it with a even on scroll rival and the guy is moving down and he's very close to the image into the end off, you know, content. And soon there should be images. We should pre low the image files because he would not say it or something like that, or we should preload it like 500 pixels before, right? Something like that is also called, for example, when somebody is having a slider right when there is a slider with money images you can pre Law wrote. You can load on the images that are visible that start. But when there are more images that are not seen, you can load them when the user is just gonna soon say them. Right? So that's when you use something like that. And now let's go and do it right. How to pre low them maybe child to load image only with JavaScript how to do it. So we have got here dif for images where we'll start new images we have get baton if the identification load more about button. And we have got the single image of this start. Right. Okay, so we have got something like that. We have got you window unload. We have good dis load, more bottle and on the click, even we gonna invoke that load Poor images function and how to create an image in javascript In order to do it. You just need to do something like that. Var image. New image. Okay, so right now we have got an image without the source. We have to set the source. Okay, So how to do it? You just type image that source as our C and then you type the source of, for example here, images slash screen one J p. D. And yeah, so we have good the source now, And let's see how it works when you goto fire back. As you can see, we have loaded every image. And as you can see, we loaded against green one. But of course, you can load another meat. So when I click on it, as you can see, we have announced going to loaded, right? Pretty awesome. We loaded it just by clicking these bottom. Okay, so, um, when Right now we need to insert itself into our website How to do it. Well, let's take these days here. Right. So let's create a handler for it, getting them and by ideal images And now with something like images, and I think we could happen the child er okay. We shouldn't use the inner HTML because we're gonna upend it more than once. Right? And in our HTML is re parsing everything so happened, tried will be faster and we just descend like that about ah, images up in the child. Of course. Here we need to quote how could A forgets as you can see now when we click on it, we're loading image. We're loading the same means. So how to load other images? We could, for example, create a variable, I hear. And we could just inserted here, right? Bomb I plus plus So we're just gonna increase it every time. So let's look at this. It started. Should be one because you're starting from one right and bomb balm, as you can see. New image bum again. New image. Great. Now there are more problems. The problem is that bottom is not moving. Have to move the bottom to the end off our website That string a bit Firstly, we should remove the thesis image. Well, this bottom have to do it. Ah, the load More images is involved by by the load more bottom So but the button I want to destroyed I want to remove. So this is referencing to this pattern and now we want to go to the pardoned note. So if you use the parent note you are in the building and then you can use the remove the child method that is removing child and we can just under these. So by if something like that when we click on it, as you can see, we are And getting new image here while the same here, here, move to Soviet. Don't repeat, but we have got the new image, but the button is removed. Okay, so we don't have any more and a baton. How to know at this party Back at the end, off our website. Well, we should before removing this button. We should also start the clone off it so we can create a variable button, um button, button button, load more. We should go. Maybe load more button clone that there's a better name and we need to clone. So we need to clone the this right? I mean to come days Kalon. Note this and you'd function. You don't know it. I haven't shown you it. And this is just called cloning. Is just complying all the things from the date from days, which is this time Little more bottom, right? And when we have to set here aflac true or false, the true means that we want toe copy everything inside. So for example, this Texas allowed more images. If you said it too falls. We have problems. So sorry. Remember about setting the flock here toe through. So right now here we have got that bottom complied so we can added after, for example, removing it to our document document. And we'll refer to the body and then will upend the child. We just go load more button clone. And as you can see, when I went in cricket, we have good either the hand. The problem is that when I click it again, as you can see, it's not working anymore. Why? Because cloning doesn't mean that we cloned also attached evens, right? So in order to repair it, we just do something like that After clawing, I want to also happened again. Toe Oakley on click even right bomb bomb. As you can see, it's cracking five. Now when we click again well, we have got on the free images. We shouldn't be able to click on it. Right, So we should create some kind off conditions. So if I is greater than four then well, lower than four, then invoke things like that, right? Okay. Bom bom bom. It's not working in the more right so we don't have a nearer, but the load More images should disappear after you know the after after some things like that. If I is equal toe well, not equal to free. I wouldn't just not invoke again cloning operation. So this part will not be invoked It All right? Okay. So, like that bomb a lot if Eisner equal to free something is wrong. But I don't know what us tomb unequal sensory bomb If I is not equipped of free, um, if I is equal to too far So of course for because we have got the incrimination here. That's why I made this mistake. As you can see, even if you're advanced, programmer your home making men in many me six simple music Because you can see him the eye after this is gonna before. So if we just don't want it to be for a load, more images slowed more images. And now, as you can see, is working fine. We loaded all possible energies on that's all on. Do you know right now we need to go into discrete if you want. We want toe have our script, working with new images that we adhere. So these are problematic script you could upgraded Vie, for example. Something would Scott Ajax. You could then check from them database if there are more images and get sources of them. So this probably would be a better way of doing things like that. However, right now, we don't know Ajax. And because of you, do you have to ride the coat looking like this? I think that the learning is Listen, those off useful tools because of it. You gonna say band witch and in the same time, improve the user experience on your website. That's only that lesson. Thank you very much. 68. Preloading images: Hello. Today I will show you how toe load images only when they are needed. Because sometimes when the user reason their website, he doesn't see all possible images that start the start, right? He's not gonna scroll down most time. And because of it, you can save your bandage. And in the same time, the user will load your website faster because he will not need to load all possible images that are hidden somewhere, right? You can pre loaded them. You can load them when you think they might be soon needed. For example, when he's scrolling down right when there is a scroll you can also loved right? Because we have got uneven on scrolling. We could do it with a even on scroll rival and the guy is moving down and he's very close to the image into the end off, you know, content. And soon there should be images. We should pre low the image files because he would not say it or something like that, or we should preload it like 500 pixels before, right? Something like that is also called, for example, when somebody is having a slider right when there is a slider with money images you can pre Law wrote. You can load on the images that are visible that start. But when there are more images that are not seen, you can load them when the user is just gonna soon say them. Right? So that's when you use something like that. And now let's go and do it right. How to pre low the maybe child to load image only with JavaScript how to do it. So we have got here dif for images where we'll start new images we have get baton if the identification load more about button. And we have got the single image of this start. Right. Okay, so we have got something like that. We have got you window on load. We have got it. This load more bottle and on the click, even we gonna invoke that load. Poor images function and how to create an image in javascript In order to do it. You just need to do something like that. Var image. New image. Okay, so right now we have got an image without the source. We have to set the source. Okay, So how to do it? You just type image that source as our C and then you type the source of, for example here, images slash screen one J p. D. And yeah, so we have good the source now, And let's see how it works when you goto fire back. As you can see, we have loaded every image. And as you can see, we loaded against green one. But of course, you can load another meat. So when I click on it, as you can see, we have announced going to loaded, right? Pretty awesome. We loaded it just by clicking these bottom. Okay, so, um, when Right now we need to insert itself into our website How to do it. Well, let's take these days here. Right. So let's create a handler for it, getting them and by ideal images And now, with something like images, and I think we could happen the child er okay. We shouldn't use the inner HTML because we're gonna upend it more than once. Right? And in our HTML is re parsing everything so happened, tried will be faster and we just descend like that about ah images up in the child. Of course, here we need to quote. How could a forgets as you can see now when we click on it, we're loading image. We're loading the same means. So how to load other images? We could, for example, create a variable I hear and we could just inserted here, right Bomb I plus plus So we're just gonna increase it every time. So let's look at this. It started. Should be one because you're starting from one right and bomb balm, as you can see. New image bum again. New image. Great. Now there are more problems. The problem is that bottom is not moving. Have to move the bottom to the end off our website that string a bit. Firstly, we should remove the thesis image. Well, this bottom have to do it. Ah, the load More images is involved by by the load More buttons so but the button I want to destroyed I want to remove. So this is referencing to this pattern and now we want to go to the pardoned note. So if you use the parent note you are in the building and then you can use the remove the child method that is removing child and we can just under these. So by if something like that, when we click on it, as you can see, we are and getting new image here while the same here, here, move to Soviet. Don't repeat, but we have got the new image, but the button is removed. Okay, so we don't have any more and a baton. How to know at this party Back at the end, off our website. Well, we should before removing this button. We should also start the clone off it so we can create a variable button, um button, button button, load more. We should go. Maybe load more button clone that there's a better name and we need to clone. So we need to clone the this right? I mean to come days Kalon. Note this and you'd function. You don't know it. I haven't shown you it. And this is just called cloning Is just complying All the things from the date from days, which is this time Little more bottom, right? And when we have to set here aflac true or false, the true means that we want toe copy everything inside. So for example, this Texas allowed more images If you said It too falls. We have problems. So sorry. Remember about setting the flock here toe through. So right now here we have got that bottom complied so we can added after, for example, removing it to our document document. And we'll refer to the body and then will upend the child. We just go load more button clone. And as you can see, when I went in cricket, we have good either The hand. The problem is that when I click it again, as you can see, it's not working anymore. Why? Because cloning doesn't mean that we cloned also attached evens, right? So in order to repair it, we just do something like that After clawing, I want to also happened again. Toe Oakley on click even right bomb bomb. As you can see, it's cracking five. Now when we click again well, we have got on the free images. We shouldn't be able to click on it. Right, So we should create some kind off conditions. So if I is greater than four then well, lower than four then invoke things like that, right? Okay. Bom bom bom. It's not working in the more right. So we don't have a nearer but the load More images should disappear after you know the after after some things like that. If I is equal toe well, not equal to free. I wouldn't just not invoke again cloning operation. So this part will not be invoked It All right? Okay. So, like that bomb a lot if Eisner dick all to free something is wrong. But I don't know what us tomb unequal sensory bomb If I is not equipped of free, um, if I is equal to too far So of course for because we have got the incrimination here. That's why I made this mistake. As you can see, even if you're advanced, programmer your home making men in many me six simple music Because you can see him the eye after this is gonna before. So if we just don't want it to be for a load, more images slowed more images. And now, as you can see, is working fine. We loaded all possible energies on that's all on. Do you know right now we need to go into discrete if you want. We want toe have our script, working with new images that we adhere So these are problematic script you could upgraded vie, for example. Something would Scott Ajax. You could then check from them database if there are more images and get sources of them. So this probably would be a better way of doing things like that. However, right now, we don't know Ajax. And because of you, do you have to ride the coat looking like this? I think that the learning is Listen those off useful tools because of it. You cannot say band witch and in the same time improve the user experience on your website . That's only that lesson. Thank you very much. 69. Slideshows: Hello. Today I will show you how to create a slice. O slash O is just images that are changing after a few seconds. Something like that is very useful because you can show on the main page more than one image in one position. It is very useful in shops so the users can see promotions that are going on this shop. Right. You can even upgrade this creep to make some transitions between images. As you can see now, this looks better, right? That animation will do in the next less right now let's create a simple slideshow which is just changing images after a few seconds. OK, so we have got in the index html The slight showed if and we have got it taken here to these variable and now we would like to insert images there because on start we don't have anything, right. So we want to insert their all these images how to do it. Well, for example, we can create a an air I images sources and we're just type your sources right screen one screen too, and screen free. So this is a good idea to date did. That way we could maybe even use. You know that numbers want to free with the it aerator so we could create variable I and changing etcetera would were doing when the times in lessons before. But hey, names can be different. Sometimes you want to position the use. You see CEO surgeon Giant optimization rights. You have to name your images properly, right? So let's do it that way off course. You could also insert images here at start right. You could insult images here, and if you did it, you could just get them using the document. Get element slideshow window and just go into China's right, so there's no problem. You can do it both ways, but let's read the the one that I've chosen. And now let's go to all these images sources. And let's just create Let's load this images right? So let's create a four lope. Let's initialize the I 20 And if I is lower than images sources dot length, let's just every time after each iteration after each time, the the look is going to go through at two I want. So now we can, for example, create an image temporary here and do it dead weight. So the image section is very important in this lesson. We created an image, and now we can set the source of this created image. To image is a folder like that. And now we just need to adhere. There, Amy. Just source. Well, fine. All right. Like that. And not one we refer. Gee, then we go to the firebug into the net coat. As you can see, images are loaded. Now we just need toe add them to our weapons. So in order to do it, we just type slight show, upend the child. And every time we upended the image that was created here, and as you can see now here, get all images there. And if you want to add one more image, there's no problem Just at here a comma and the name off the image that you adhere, right? And your program is just gonna work. Still find Okay. So now let's go to this ties because, hey, I don't hunt him to look like that. I don't. I want them to be placed on each other. Okay, So in order to do it, we go to the slide show and to the images. And I was said the position to absolute the position absolute means. Then we are taking the images out of flow and their position absolute to the body. So to the top left corner, right. Which means also that when we adhere, for example, attacks here you're not, is that this takes just disappeared. And so we should go to the slideshow and set here. Firstly, the the 384 and 373 107 as with and height, right? So like that. As you can see now we can see these guy, but we have good steer a problem because, you know, if you want to position this big difference of, for example, when you type your left 20 pixels and top 20 picks us, you're not, is that it looks like that on. And if you make here some text, you notice that the texas under this right, So we should position and related to the A lemon. That is the parent element. We just slight show in this situation. So lets the dead weight. And as you can see now, we have a position related to this. Of course, is Now, this thing is now under it, but because we it is absolute element. Right? So this is flying right now, But the most important pond parties that we have got is now position towards this and slightly right. We can just remove this and this will be positioned when where it should be. Okay, so now we can move the slide show around your websites. Who can do margin left? For example, 50 picks is on everything. Um, merchant match emotion and everything is gonna moved. Be moved. And you know, this thing is taking the place, you know, and because it's taking the place, you can add more things on your website. And most time you will have more things in your weapon than just slighter writing. Everything will look OK. Ok, so that's how we do it. So it is properly set on our website, right? And we don't have any problems later. And now we should also think how to change these images from one to another. We could do it with many ways, for example, setting images that start to display non and then change the display block. We could change up capacity. You could say it changed the set index position. I would choose the opacity. Okay, so I would choose the opacity. And I always said capacity to zero off all elements elements at the start. As you can see, we don't see them. I would like to just see the 1st 1 So in order to get the first image, I will use the JavaScript. I don't do stuff like Slide Show and then go into Chad notes and get the first child we just had in big Zero and said the attribute class, too. Ah, to something that is gonna make it be seen. So let's create the class that will be called, for example, current. So let's go into slide show and create a class current and let's set capacity to one. As you can see now, we have got one image here. Off course. We have got more off them. When we go to here, you can see we have got all of them. But this gas has current said here on, we can see we now want to just remove the current from here and added here, then remove from here and added here, removed from here and added here. So we just want to make grounds here, right? How to do it? Well, when we need to do something more than once, most times are using glue. But we want to do it after some time. We don't want to. You know, somebody change it instantly. It must take a few seconds. Can hardly see these image. The person that is visiting your website, right? So let's do what set in. Terrible. Right Said Interval is just gonna around intervals s so we can run a function that is gonna do something with it. For example, every two seconds right every two seconds, I want to change the so I want Teoh change the first guy back to nothing. All right. And I want to change the next guy, which is 12 current after one second. As you can see after one second that you may just change on after Mexican, nothing has changed because, you know, we're changing the same image sewing to change these values Here. Let's create a variable I and let's do something like that. I I plus one and let's head toe I one each time we know that there said interval function will be run invoked. Right? So because off it now we cannot change images. That's with faster. So we do not use our time one second bomb bomb and then bomb Nothing. Why? Because our area has good indexes like 01 and two. So it's gonna work until I is here. For example, one right one plus one is two and after it it's going abroad. Break up. Right. So how to solve this problem? We can, for example, use that model when used that way. You don't know this operator. I've talked about the new operators section When you have here, 00 mode free is 00 plus one mocked free is one. It is the rest right off the reminder off off the division. So the maximum number here will be now to the maximum number Here will be also to hear, but here it will be always one bigger. So now when, As you can see, it's changing and this is now going back to the first image. So that's how we can make it. We can, of course, increasing should be increased. When somebody is visiting your website. He needs to look at your pictures, right? And, well, we have just died. Yes, we have got the slide show You can upgraded with men and things like at these. You could make it look better because it's looking horrible right now, but it's just after you. It just CIA says right now. JavaScript. So do it on your own. And in the next lesson, I will show you how to make something looking better, that selling the lesson. Thank you very much. 70. Animation in JavaScript: hello Today I would show you how to make animation in Java. Skip how to make transition between images. How toe make your job as keep even more dynamic. Okay, so in order to do it, you just need to type your transition and in the time of transition that it should take. As you can see, we have been not transition. Okay, so what is that? Transition is a bit roof arsenal, but let's let's first think about this. Transition. Transition is a property from CSS, And these properties say's that if there is ah, stayed before and stayed before was a paucity zero, and the new state is a positive one. Then you need to change from 0 to 1 in one second. You can exactly say what you want to change here. For example, opacity right? Must be on the change. Or maybe only we have other things like that. But well, does that seizes property? You should have already known about it. If you do not just go ahead and read about transition, the there are just many things to do, right? I'm just standing with the basics. So it is just making the transition between zero and one in one second. So if you want to show a person, for example for far four seconds an image before transition, you can do it that way, right? 1234 And and we have a transition to the name it. The problem is that the image is also disappearing instantly. So it looks a big weird, right, So we can change it. For example, type ink in transition. And I want to, for example, make it disappear in one second. But I want to show it up in two seconds. Right now. 1234 ended would disappear slower and appear the next image will appear. So this is just also can you see it? We just created an animation in two seconds. But there is a small problem to meet. As always, the problem is Internet Explorer. The transition is supported from Internet expert 10 and even in old chrome Firefox apparent that there were brothers like that. It is not supported there. You need to use vendor prefixes. So, for example, something like that. But this is a topic for Sears s course. Okay. Um so this is not supported in all Web browsers, but the most. It is probably, you know, we will be supported soon. In all were brothers that people are, um, using and you know you can do it different ways. But the cool thing is that it's easy to do now. It would not take much time. It is good in on performance. And the truth is that why to give people who has all bro's browsers looking good websites if they keep creating websites that they're looking perfectly, that are having animation, other things like that for people who had old browsers, they keep using them right. So let's I think that it will not make when you create a transition will not make to break everything up. Because Aziz have already noticed the slide show, it's still warrant working right? It's working fine. The images are changing, but it's just instantly, but it's still working, so you shouldn't worry about it, I think, and well, that's how you make any made any anything, anything by anything I mean really anything I can say, for example, that the start image size should be 384 right, and we can change it later to for example, with, um, 500 picks us whatever. And as you can see, we have get no big guy on, then schools down and bomb. So you can animate anything. You can do something. Like, for example, merging left 50 picks is right. Whatever. Look at this. 123 or five. And it was like, Hey, it came from this place, isn't there, son? And you do it on Lea. Si has as later, right. The only thing you did was here. So we allowed people to wait for seconds before the next transition. Right? And you involved transition by removing a class and then adding the class later back. Okay, that's all in the lesson. Thank you very much. 71. Animation using setInterval: Hello. In the last lesson, we're creating an animation using transition, but transitions are and supported in all Web browser. If you have to support old brothers like Intern Express 799 and some very old Firefox, then yeah, unity is the setting. Terrible. But if you do not have toe, don't do it that way. That I will show you soon because it is slower and well, it's harder to write it. And the next thing is that you will not have CSS in one place, and Java's could be in another place. Okay, so this is not the best solution. You should avoid it. This that now you should use transitions. You can do much more with them. This is just a powerful way off doing animation. However, if you have to, then Onley. Then use the said Interval. That is the solution for creating animation in JavaScript. Okay, why said Interval? Because, Well, look when something is moving, the truth is that it is moving after, for example, 30 milliseconds each star to me seconds. It's just moving. For example, a one positions. It's so, so, so hard. We just need to create a setting. Terrible that is going to in the function. Move something every for example, Tell too many seconds and yeah, it just gonna move it right. We have to just move. For example, these box that we got here on We got it here so we can move. For example, the left position of the side. How to do it. We just need toe access using this. No, no, no, no. This But we need to create a special variable that we store this. Why? Because selling interval is really in window because it's always in window. These would access here. The window, right. So we're using the self now, and we can go to the style left and you cannot assign here, for example, ever able that will be increased in. So for example, I That equals zero and we can just a sign here I'd will be increased every time to set interval around dysfunction. Right? So every 30 me seconds and we need to add the picks us at the end so that Ah, because you need after the number pixels, right? Obama's you can see it's moving give you want to move it faster. So it's but it most small for, but it takes lots off more computer powers. You can say it's moving a bit more small for so that's how you do it. Mine. You can animate anything with it you can make about. You can decrease the opacity, can do whatever you want. You can change. We've just up to you. However, this is just a bit longer. And as you can see, we're accessing size from this place from the JavaScript. It's better toe really have CSS in different place. Ah, from javascript. Okay, you shouldn't have even both. Bob, you should have both in one. Fine. So Well, maybe let's talk about how to stop it. Because when we run, needed would be just running. So how to stop it? We should just clear the interval, right? Because some people hard thinking that if I is, for example bigger than 100 then we'll lower than 100 keep doing it. If no, then do know, right? Okay, it's stop. But the truth is that it's still wrong. But there is just nothing to run here, right? We should stop totality this interval so we could need critic eight, for example, of are able, for example, Animation idea will call it like that, and we need to clear it. So if I is greater than 100 then I want to clear the interval with the animation idea like that. So when we refreshes, as you can see, it's stopping like a second ago. But right now, um, it's stopping. It's really stopping right. It's not gonna execute and other operations inside. So again, use it only if you have toe. That's all in the lesson. Thank you very much. 72. Gallery with thumbnails': Hello. Today I will show you how to create a gallery with combination with miniatures looking like that. So when the person is in on your website, he can easily by moving his mouth over the miniatures, see the bigger version off the image in another place like here. This is very useful because you are saving the space on your website and your improving the interface. Right? Because if we had all big images here, it would take lots of spade with just and probably somewhere here. So having something like that is improving the user experience in your website. So he he will see the bigger version. He can see exactly if it's the item he's looking for and later he can just, for example, at something to basket. So we tried to create a gallery image in this lesson. Okay, I have already added images as you can see to our website for images we want to use and I have created a diff we just called image Gallery that is gonna start everything like main image, where we want to put the image that is the biggest and four images that were ah that were on this website, right? These my website, the Polish website about parts for vertical horizontal, Brian's etcetera And really, this is improving the say's there's good thing to do. Ah, to do so. Ah, let's let let's do it. We have got have added these images here. As you can see, we have got to them all bigots start And now I would like to, you know, make them smaller. How to do it. Well, I think we should adhere a class which will call Tom name. Okay, there's no co pay it and pace it here and nothing has changed. We need to go to the Tom Stites CSS and types of flight, for example, with 60 peaks is And now, as you can see, we have instantly small images and some people now would be like, Hey, but you re size these images. You should have ah, small images and big images. Right? And what do I have to say? Say to these people, this solution is also bad because really, if you have images that are big and small, you have to keep two versions of these images. You have to create two versions of these images. It takes those of time. That's one thing. Second thing is you are increasing the request to your website there that are gonna be more requests. Your website which means era website. We load slower, even slower. If there are resize ings off elements on your website and in addition to these, you could help your such enjoying enjoying optimization, right? Because they would have for the same images here and for the same images that are small, small and babe that that would just, you know, cardio surgeon, surgeon, join optimization. So really, I think the solution is just better and it's faster to do and it's also gonna work better. So we have got no Tamponnaise, right? And let's now do something with that country. So, for example, when we have got a mouse over one off them, we want to see a red line under it, right? So how to do it? Well, we can create something. I tamponade handover effect and we can add the border at the bottom two picks else soul it read, for example, we could create them everywhere, But let's do it be different now you can make an l other indicator, but it's important to make ending DeCurtis. So the user noted, Ah, that's something is changing. Q. Right, Onda. As you can see, we created something that but I d is jumping. Why is jumping Because merging are working when you have got it here, the merging is saying that you have to keep that marriage is right. We can change it by something like merging about bottom on. Changing to minus two picks us. As you can see now everything works fine. Okay, So after we moved our mouths over one off the the thing, we would like to show something in the main image. We should also declared this main image here and change the with, for example, the size off these guys for so 450 fixes and height, she'll be 263 pictures. So we have to do space here right on. And we want to put their the images. So we like to firstly insert something into the main image would like to insert here a sample emit because right now there is only the right empty deep. So let's create um, 100 for that main image. Right? Document. Get a lemon by I. D Maine image. And let's add image into it. How to create an image. We just need to do something like that, as we learned in the image section, so we could. But now an image and we can add it easy to them section like that. And as you can see now, Oh, we have that your empty image, right that we should adhere now source, for example. So we can use it now pretty easy to change it to the for example, first image. So we can do something like image, that source and how to get the first image. We could do it, for example, something like that. A images and then Macanese 5 17 And as you can see, we have got here now with the first image, right, because we need to start from something because the user doesn't need toe instantly. Have his mouth here, right? Let's that imagine, because it looks a bit bad. Merge in bottom, Tim Pick says on Dwell. Now we need to change it, right, But I think a second about the solution that we have just chosen. Is it good? Well, it's working, but now imagine that you have many products. Like, for example, in these websites. Right? So when we go another website, there are many more products you would have to for every product created. JavaScript. You know, you you would need to change these lines. You will need toe involved, a special function. For example, you will need toe that have a basket. Five for each for each html five different javascript five. These would just take Lourdes Lourdes off time. Our coat should be universal. It should work every time. So how to do it? Well, here we have a class something, right? We could use it to get old Romney's so we could do something like document get element by class name and save it here. Onda. We can now do just something like that. Tomlin's get attributes and as our c well, and that's all, Oh, families of zero because companies in error right? And as you can see now we got the first image. The cool thing about this solution is that it is universal. Now, when we change the order, as you can see, it's gonna change the first picture check, get the first picture, right? It doesn't matter what we do here. We can at you an image. If we just take the and the images, it would take just 1st 1 So it's very, very cool. Okay, so a D's in universal code to set the first image. Now we should go to all of these guys. And when we have good a mouse over one off them, well, we should change them. The guy here. Right? Okay, So let's use the I think for low, because we to go through all of them. And let's use the land of Tom names as a condition, because you want to go through all of them, right? And now we want to add an even So Tom plays. All right. Almost over. That will be a but that will be invoking dysfunction when we have got the mouse over one of these companies. Right. Okay, so right now we need to just change the image source that is here. Right To what? For example, this dot get a tribute source. And that's all. Look, he's working. Well, that part wasn't hard. As you can see, some things might look heart when you're looking javascript, but they really aren't so. Ah, Well, there is something a bit very important now. Now, look, when we start the website, it would be a good idea toe have somewhere an indicator off on the Tam. Nay. Like, for example, this red line here Because the user might not know that he has to use his mouth over here. Right? Okay, so how to do it? I think that we should create a special class that we just do the same thing that was done here, right? And added to the first guy. So we could, for example, do something like companies off zero and add to the class name. Current class name is a property that is storing the class. It's very useful because you can add another class by just using this operator. And as you can see now, it is indicating that this guy was chosen. It start. And But when we move on others, well, these guys will not be removed instantly. You have to do it manually, right? So we should remove it when we are moving on one off this that companies, let's store in the temporary variable that happening. So car and Tom name that is chosen right. Should be start somewhere, so we can easily change it later. We do want this current, right? It is still working. Um, well, it's not company. Off course class name should be here dumb. Okay, so here we should now remove from the current ham names from the first guy. Count on Tom. Name Klaus name. And now how to remove one off the class. Because we have many classes here, right? We could be no tampering. And in the same time, current and use the the thing you would notice that we have good air, current class and company how to remove on the one of them. You know, we could, for example, type the Tampa, you know, and it will remove it. The problem is that what if you had another wonder that would that could cause problems later? Are cold should be universal. So the truth is that this is a string, right? So we could use and mattered that this could replace that I talk about in the string section and we can use the you can use that metal toe change the current to nothing that's all right and safe. The thing that is returned by this function. And this dysfunction is returning the value without the current. Right? So this is just the class with the common man and we are assigning it to the class name. So as you can see now is removing it. Right. So it's working Fine. Now we have got another problem. The problem is that when I moved from, for example, from here, the user might not remember where he ended. Right? He can look here, but hey, new hour enter. Fights should be intuitive. So it's recite height. You are on this guy so we can change the current temple. It's something to this. So the one that we are, we have the mouse over and we can adds to the clause Name a gang. The current class. Right? As as you can see now, we improved the user experience in our website, right? When we re fresh, he knows he's here. When we go in another, he knows where he is and when he leave his mouth, he still knows where he is. Okay, so that's how you do something like that on. And as you can see, javascript is not so hard and it's also hard to do things that are looking at the start. Hard to do. That's something that lesson. Thank you very much. 73. Tooltips: Hello. Today I will show you how to create a tool tip looking like that. So a tool tip is just a box, a container with attacks that is showing up next to the element that you have. Put your mouth over on. Right. And okay, let's go. This we don't have any hints. Now we want to have it on any element that we have a class that is killed to tip. This is the best solution. Because when If you want to add another tool tip, you have to only then just at the class, right? And the thing that is gonna be insight, the tool tip the container off to tip is the thing that will be typed inside the title. I think it is also a good solution because title is also good for six search engine optimization. And in addition to this title is something that can be on an elements. Right. So you could is probably the alternative message attribute, But you know, this condone on the images we want to have to be ableto add at a tool tip on any possible elements. So, for example, inputs. So you can, for example, here is a guy that he needs to do something. They're a bit different way or something. That right? Eso Let's do it. Let's create function that we called create tool tips, okay. And will involve. You did start after loading our website and we want to get all possible elements that the class is told. Right. So let's create a variable elements with told tips. All right, so here we have. Good. Now this anchor, this image, this image, this and this If you had any another guy with the to tip class, it will be also added here. So this is the cool thing is that we're gonna be ableto install a bite on any website by just invoking dysfunction. Right? Okay, so we need to go to all possible elements, right? So when you want to go to something, you always use a look. So let's create a loop that we start from zero. And let's create the condition that we make around this This look, as long as we do not get to the end off them, it went to the last element Who has told? Right? So this is looking like that and we just need to now do the same thing like we did here, right? We need Teoh at to every possible element all miles over even. And let's hours hear anything. So, for example, a Let's see if it's working. Okay, it's working. It's not working all the time, right? Why? Why is working here and why it's not working here. I hope you watch my video about even listeners, because this is the situation where you have to use the even listener. Look, this method is invoked. You, right? Dysfunction is invoked here. So you could almost imagine like it was here like that, right? Which means that we are adding almost over even to two more, almost over. Even tow this elements a function like that and we are overriding in the line 35 toe all possible images because we also used use the almost over even for Tom Nice right in this place. That's why it's not working. And that's why he also should use even listeners. Okay, Because if you do it that way, right, um, miles over and here also like that at even listener miles over on bum. As you can see now, it's working fine everywhere on an impossible. Adamant if you want to support all browsers, years should use the almost override. But if you do not need to do that, does he was the head even. Listen there. Because even if you insult, for example, somebody's plugging right, um, with the tool tips. And you already had something like that, then you'll be like, Hey, why it's not working. Oh, it just doesn't work. Because off using almost over doing he dead way right. Okay, so we solved this problem now and now we want to. When we have our mouths over this, we want to show a toll deep. Right? But first, we need to create a total deep. Okay, so let's do it. And I have already added here in STAIs the CSS for the to tip. I did hear a border background color, and the most important part of it is the position. Okay? It has to be absolute so we can move it. You know the place on our website, right? And I also said here, um, phone size partying and I studied to display none. And to start we'll let the top is not important right now. Doesn't matter. Where does it start? Right, So we do not Those kilobytes here. Awesome. And well, for a second that's changed display from now on to block which is default, right, Ondas You can see it's nowhere because we didn't create these elements. We could create it here manually, ride like the I d bam, bam, bam bam! But you know, you would have toe add it on every possible website later. I think it's good idea to just created using their javascript. That right how to do it? We can just do something document create element and just create a dif. Right, Let's save it into the total container variable. And now we just need toe added. So document body upend the child too deep Contin e And when we refresh our website them, we use the fire. Bach, as you can see here, would have got this, Dave. But it doesn't have this I d. So we just need to add it how to do it. We just need toe refer to to tip container and go into the id property and just said it to to tip container, right. And as you can see now, when we refresh. It has good this idea, which also means that Ah, it is gonna show up if we set, for example, with 500 big servers and high 500 pixels, for example right on. As you can see, it's here. Okay, it's very big, but it's their right, Let's set for Well, I deleted the position absolute by any single. So So that's use the position. Absolute. And let's set it for a second toe top and left so we can see it here. Okay, We want to know when we have our mouths over one of the image to change the text. You how to do it. Well, we just need toe refer, do that container right and change the energy html to whatever we want, right when we do it that way, it would just change toe the thing that we have just time. If you want to change it. So there. I think that is inside the elements with to deep right, we want to change it to the title. So we just need to change it to this. That title title is a property off the element that we have Good mouse over. When that even is gonna occur, right? As you can see, how we are changing this thing up here, right? It's looking pretty. OK, Okay. So now we need to also change the position of this, right? So how to do it? We just need to get the told to tip container, get to the style left and said it. We can get the even object in order to get the information where that even though Curt right and do something like E that client X plus picks is. And as you can see now it's changing their left position. We need to also do the same thing to the top position. So Crean, Top and Creon Why? As you can see now it's follow following us. Pretty OK. The a few problems Still, the first problem is that what will happen if we have men in pregnancy? As you can see now it's peering up top. It's because Cleon X is just returning, returning us the place where they even would occur without the scroll. Okay, So if you want to Andi also include the scroll, we should do something like plus and get here. How many pixels Wisc wrote to the left So document document element. That school, um left. And we also have to get home much. We scroll to the from the top, and that was you concede working fine. Even till we have many breaks. Okay, so let's remove the brakes. So it would be easier for us to debug this girl. And now well, we have good. Another problem. The first thing is that it's showing up top start. And the second thing is that when we are here and we leave, it is gonna be still there, right? Okay, That would not be hard to self. We just need to change these display to non. Now. It doesn't matter where, where it's the start, so we can save the kilobyte. And, well, we have to just do something like mouse out, right? We have to taker off the mice mouse out. Even so, when the mouse is out, we want to change the tool tip container that's tied up display to I just know, as you can see now. Well, now we're going to show up. It'd so thing to change the block when we are on, and now it disappears properly, right? It's on his, huh? Yeah. Okay. But we have got now a very big problem. Still, when we have good the mouse over the element that we want Teoh have the to tip over Own, as you can see, when we are on the element a bit longer and we stand still, we have good the title spirited Macanese for a and it's over our nice tilted. How to remove it. But how to remove it just for a second. Well, in order three movie. Do you just type something that these title on? You just said it. Do not, I think. And this you can see now we don't say it, but the problem is that it also disappears. Right? So we toe set it back, do the thing that was there. So but how to set it bag when it's removed over here, right? We the temporary were able did with store or titles cane. So let's create an area that we store all possible titles and that's the something temporary titles off I'm and let's sign here elements with tow Tip off. I that title. This will give us here all possible titles, right? In that order from the website and we can use it here, right? We could Something like temporary titles off I. How terribly well. Still a problem. It's not working. Why? Well, I was surprised to. When you do something like that alert to five, you'll notice that it's five. Why it's five when it should be 012 free for for each lemon. It should be different, right? Because well, here somehow it 01234 Why here is not five. I don't know exactly why this might might be back, but I know how to solve it in order to solve it. Really? Use the FARC that the, uh, lemons with told tip is really ah and a me to write an element. And it's just an object. You can add any property to the object. We've just doing something like that, and we can just think about the new property. So if, for example, temporary i D and I can assign here Hi, which is here still reasonable, right? And because of him we can do some things like, let's access this that temporary I d on when we refresh it. Um, it's even with working that's used the fire bark. Well, it isn't working. Mm. Oh, I'm sorry. Here, we should do something like that. Of course, we I just added to the, um, to the collection. The temporary idea. I should have added each it to the each. A lemon. Right. Okay, now, as you can see, it's working fine. Everything is working perfectly. The coolest thing about these two TB is that you just need to invoke this function at this style because, of course, you can upgrade it, and you just need to add the two tip class. Then just think about the title. That's hole and you're gonna have a nice tilted. Of course, you could do it a different way. For example, you could do not show on the tax you could show here and bigger image. That's up to you. What do you create how you created? I'm sure that after all these lessons from these cars, you gonna be able to create almost whatever you want in jobs. Keep trying. If you have any problems. If you have any questions, just ask me as an exercise. I would like you to upgrade this still tip. So it is going on for example, show up after a few minutes seconds. Right. So make it with transition. We talk about the a few lessons ago that selling the lesson. Thank you very much. 74. Firebug: Hello Today we're going to talk about box box that he wants to fire. You want to kill them? A back is an error error, which is not something you want to see in your code, right? Because it will not work. So errors is something that you're gonna make lots off times. And do not worry, because everyone body make lots of errors. IDU errors human. We make them. Just keep improving yourself, and you would just make less of them. Okay, But when they happen, it's good idea to have some tools that is gonna help you solve them. Right? And there is a fire back till for the Firefox. You can just click your install fire back, and you will have then something like that. We've been using gates toe far Toby ableto fast. Check the position off something right. Using this tool here, we can easily check where what? What's going on in place like that? These very useful for checking If everything is going on, everything is changing. Good. Because these source here is dynamically updated their minute tools like that. In other words, brothers you don't need to use Firefox You can use for example there, um, in group from when you use the shortcut control parts Chief. Plus Jay, you will see the developer toe like that, which is very similar. And you can use Google chrome. You can use the Internet, Dexter. There you creek F 12. Andi, You can use what? And they were brother that you would find in tools. The very some or something like that. These are the most popular Web browsers, right? And they have tools like that. You can also see CSS here, of course. Which is not, You know something the this job asking, but still it can help you do some things. If you're right, you can even remove something like and see what will happen if I remove the absolute value , right? Absolute value removed and doesn't concede. Now here it is, at the bottom. So you can de back many things online. He would have the document object model so you can check easy when you go on one off the element. What values you can access, right? Pretty easy. You have got at Net Co. This is very useful because you can see how far is your website loading? What you should improve in order to make it faster. Right? You have got also cookies. Cookies is also very important because then you can see if the cookie was properly or not. If its existing of note etcetera. You have got also a tool, which is called page spit. PHP. Speed is also very useful because you can click, analyze and check the how how farce and how your website is performing. However, I really prefer the performance. Still, that is from Google Chrome. Okay, I think it's better. No. So there is also a council on. We'll talk about council later because you can see here arrows and you can also debug your code using the council pretty easy. The during the lesson. Thank you very much. 75. Console Debugging: Hello. Today I will show you the powerful way off debugging with council A council is something that we show you errors if you make them as you can see instantly. We have got here and information What error was made? Of course I d is showing you errors also, but I think that council sometimes can show you something that your I d will not show you. Ok? And there is another thing Very cool about council. You can give locks to the council. You can do something like council that Locke and for example Hey, I would like to see what's going on with temporal titles values after each iteration. Right? And as you can see, you can see it easy. Oh, so maybe we could also see what was going on with the ivory able right. Okay. Also, the Ivory Able is looking like that zero home once. Beat it, make McCann ease. Okay, so everything is working fine. And you can even improve it just by time, typing temporary titles, but and you'll see instantly words going on after each reiteration. If you want to see also a bit more about it, you can use something with this cult directory, which, well, as you can see print out, even indexes off these guys. This is just awesome, really. So it's very useful for the barking, right? For example, we had problems with the I inside the scope. So when we do stuff like council that look off, I you'll notice that when I have got the mouse over, it's always five, right? So that's why this was giving us a problem. But with this temporary I D. As you can see now it's changing. So this thing can show you what exactly is going on, right? With your variables, you can easily check very fast the value without bringing something to the output right? We've got a lower teeing without stopping the execution. We want to stop the execution. You should. You use our right. But if you do not want to stop execution, I think the consulate is better, because it's just easy to just look here and how. Also, that's what's going on at the beginning of the scars, I was using the inner HTML for the bagging also, and this is a good way, but the problem is that you're showing something on the output so you can do it on life, right? You can even be back this on live. But you know, you shouldn't end anything like that on life because you know, you can make another. This will cost you something you should always deepak off line. But with the integrated female problem is that you have to create a special block and you have to get the later so it's a bit slower. But I know. Anyway, council is giving you, I think more park and easily check that with the lock. Um, what's exactly going go on? Any, in addition to this is gonna print you out it a bit better. You can use the director a Tory, which is gonna print even more information about something, right? Well, this time it's on the single variable. But when you want to have more information about something, So, for example, I would like to see what's going on with the elements with tool Too bright, for example here. So I I downloaded all the stool tips and what's going on. Also, I have got here on with the index zero something with this called an anchor, and it has got a tool tip cost. And it has got an age reefer and simple html image. Okay, okay. And I have got to matters I can use here. Okay? And the length is five. This is just powerful, right? We can easily see what exactly we got with their query. Ah, are with the get elements by class, name. And then And they met it. Okay, the selling that lesson. Thank you very much. 76. Sharing code websites: Hello. There will be many times when you want to share your coat with others, for example, when you want to share it so somebody can see if there is an error or you can share it so somebody can use your code later. Right? You can share it with your friends, for example, and for it. It's very useful tohave an online to like that. You will just copy your coat from your for example, I d. Here. Let's create something very simple. Zoff. The i d simple I they test here. You can make some CIA's, as it's also very cool, right? You can make the CSS for it pretty far, so let's change the color fast. For example, to read and let's get the document. Get a lemon by I d simple idea and change the inner html toe something new. And now you can run this bump and as you can see what you have, good. The result with you. All right, ive you want to use some libraries? You can check what library you are using for the bargain, right? And because the sun libraries requires what we'll have methods that are not normally available right in the basic JavaScript must take parties of something like that and you can then share it. You can ask people what's going on right? You can show people the solution to the problem. This is very cool for for example, Stack overflow, right, You can stack. Overflow is very, very popular website. If you don't know it, you should definitely visited. You can ask you questions. You can ask for quick, quick questions off others. Eso and people are really very helpful here. They will not send you to Google. That will just have the most time. Okay, Onda and you can also help other people You This is very, very good community. So you can then you know, save it. For example creek your site. As you can see, you have got now link that you can share you can you can see how we open the new top and it's safe so you can show the solution. For example, for somebody on life, the resources of something like coat pen It is also very cool, but there is the cool thing about this toe is that you can find also some work of others, right? Oh, pure. See is this content filter. OK, let's see how he did it. Okay, we have got your see it. That's everything. Like and we can see how it's going on. All I want on the red. Wow, this very good co. I haven't seen this, but as you can see, you can find a very good work of other people there that are being shared by others. You can also share this and a Z concedes, working very, very similar to to the jury s fiddle because you can type html CSS and JavaScript and you can then around the coat here down right there is also something like Jay is being Germany websites like that. I think that the best one is this and this one. And remember, go to the stock overflow find, find the answers for the questions you are asking every time when you are looking for something. It's good idea to look like that, For example, site on how to do at even listener in our Internet Explorer bomb. And these guys were these the equivalent to the element object in the Explorer nine, right? And hell, what this guy has just giving you the solution. You just copy. Then he's working. You can then just say as a thank you, you can ab vote it. So this is very, very nice community where you will find lots off answers to many questions and these very fast way off searching something just through the stock overflow. You're using the Google chromosome in and giant for searching just by typing side and then the night off the website, right? And then the choir. You want to ask these websites So really, this is a powerful way off solving many problems. You condone sharp things there and that's only that. That's thank you very much. 77. Strict mode: Hello. Today I will show you something good is called a street mode. State mode is a mode that makes you write your coat more strictly, which means that we be more rules that you have to follow up. And the truth is that he's just gonna help you. Because when you something like that use streaked and this think is making all the cold about the below it, it's in strict mold. As you can see, our code is still working. So it was written fine. So if you write a co fun, it's gonna work Fine. But there are sometimes mistakes. Did you make really like a Mr You can write? Sometimes something like, for example, X equals five. And as you can see now, we have got an error. Why? Because it's assignment toe undeclared Variable X. The truth is that in normal javascript it will work. The problem is that this is a global meribel, right? So you have to always remember about declaring something, and they're Amanda arrows like that that are gonna be far found out by strict note. We don't need to go through them. It's just good idea to use always strict month at the start when you are developing your website, but it's good idea. Also. Toe delayed the streak. Note. When you are sending your was your fight to your online site right toe your host. Why? Because well, it's better if you let your code run instead of making it stopped because of some stupid, stupid rules, right? It's better if he drowns a bit in have way, then it's not running a door, right, So use it only for the barking purpose because it can save you sometime. It's gonna show you errors that normally your I d would not catch up. It's gonna give you warnings and, well, it's gonna save you time. That's only good lesson. Thank you very much. 78. Code Performance: Hello Today I will tell you what you should do in order to maga coat perform better. The first thing you should remember and this is the most important is that getting any elements from your document object model is slow. Why? Because well, imagine how a function like that must be implemented. It has to go through all possible tax on your HTM of the cumin, right? In order to find the one that has got identification like that or the class like that. It also means that identification her looking for in the difficult er's is faster because when it finds this in the defecated er, it's gonna stop looking right because you don't think something with the I d should on that exist ones on your website write something with the class can exist more than one. So it will look even if it has already funds of something. If through all the document, all possible elements and the way it would just keep looking after it, thinking finishes full doctor document. Right. So ive you have only one element and you know the God have more than one of them and it is better to use identifications, right? And it's also very important to know about this Because, look, when you do something like that, a temporary Vrabel, then if you have a condition like that, you just get the length from the Tom Neighs that is safe here. But if you do it that way, you have toe each time parts full, full document in order to get all Tom things. And then you just get length and you do it every time. Each iteration it takes loads of time, right? And also, if you have some idea no document, get the lemons inside. He right or quality selectors, if you don't need them, Toby, here, please do them up here and then just add them somehow. Here, Okay? Because it just takes votes off. Thank Okay. And it also means that you should keep your html for five as small as possible. Because if you have last elements here, it means that it's gonna find it faster. Right? So did not create this crazy. As crazy as you can, Huge should just keep this HTM If I as small as possible. And if you can initialize your area at once, do it because this is a bit slower, but sometimes you know that you cannot do it that way because, for example, you have to make something like, you know, in the fall of union at new elements. Right, Because you don't know them yet. But if you can hate do it Deadwood do not just global varieties because getting to them is slower. Okay, And reason. All those on the slower. It's also Ah, bet convention. So don't use them. And when you land, Jake wear and you we probably learned it because it's really we'll save you loads of time. You should remember that you shouldn't use Jake were everywhere, if you can. If you know that something is supported. Hey, it's better most time to use JavaScript, the basic JavaScript. For example. When you get the value off the input using the value property instead of using this thing from the Jorquera, the code will run 1000 times faster. Okay, Most time differences aren't so big, but really, sometimes these differences are so big, so do not use everywhere. Jack J query. If you know you don't have toe. Okay? The telling did lesson. Thank you very much. 79. Keeping one js file: Hello. You should always think about keeping on the one JavaScript five for your wall project. In order to do it, you should connect all off the JavaScript if ice into one. But I can imagine your fight face right now. You have, for example, 50 off them and you change anything in one of them. You would need to find dictate called somewhere there, and you need to copy and face it in the right position. You would have to updated Manimal. It would just take Law holds off time. It will be very, very hard to keep drag off. And the coughing is that you can the something like that automatically using something good is called Grand Julius. I have already created the course about Grand Julius and you can pretty is it? Use it. It's just gonna automatically create one fire from magnified as many as you can right now. You probably have, for example, require JavaScript, Ben to free plug ins and other things like that, Right? For example, four script and all these scripts, we will make your website load far slower. Why? Because http protocol says that it Condoned on the two fights at once, which means that if it's gets the weight is gonna has to reconnect to Euro server again and to get another fight. So this really makes your on your website loads slower. Okay, so you should keep always as less fights as you can. OK? The cool thing about Grand Jury Aziz also, that you can even then create JavaScript files for each possible feeing like, for example, told they like, for example, cited panel for whatever you want. Normally, people are just doing one big five where they have many, many, many, many you know thinks about from JavaScript and frameworks in other JavaScript files and some plug ins, right? But with that, you can even upgrade with the real ability off your JavaScript five structures here, for example, in further because you can create for each script another special Java script. Fine did selling the lesson. Thank you very much. 80. Compressing js files: Hello. You should always have your JavaScript fight compressed. So you should create a second javascript. If I and college, for example, script to I mean dot Js and you should copy all the content and go to one of the website that can compress javascript. You confined man off them, copied here, type compress. I mean creek compress. And as you can see, we are saving about 30 53%. So your website will load faster right onto kilobytes. Maybe it's not big deal, but it's really imagine that for example, I have got area code that has got 90 kilobytes and it's getting into the 26 or testicular bite as far as I remember, just by compressing right. So you are saving bend which, and it also will make your website loads loads of faster. And remember that if your website dissolving faster, it also is gonna be better positioned in the Google, right? You can also use you the base, 60 toe and cult which will compress it even more. But now it's just totally on read a book, but it really doesn't matter, right? You can just copy it now here. And you were just use as a script now script that mean mean that Js and you will work with that fire. And then we have you change something you have to now copied here and then do it again. You can also shrink variables but sometimes it's not working And you know why you should. You should use the base 60 to encode Onley. If it makes your fight five smaller sometimes it doesn't make it smaller. So check always. If this is more or this is smaller, you should also enable on your website something with this cult G zip most diamonds enabled you can neighborhood in HD access. Okay, um if it's enabled on your hosting I created a fire which is called HD access. You can just send it to your website and it will not make an error on your website because even if you don't have it installed, it will just not work. Okay, But it's instead, Then you're gonna save lots off band, which and it's going to improve the speed of Donald your website because everything will be , um, compressed by this G zip not on the javascript five, but also CS shtml. Well, whatever files that are gonna be downloaded from your website. Well, not not images because they aren't over the almost compress. Right? But things like text Really? Really. It will improve your website speed. But you should also you have probable also noticed that when I was talking something like, Hey, you have to know keep two fights and every time when you change something before sending to the website, you have to go here, then copy and it here and compress. And then again here and here. Wow, it would just the gods of time, right years. And you have to do it, Al nus. You know something good is good. For example, grand jury s I created because about it A Gondry is is a task manager. Okay, It just gonna ultimate many web development tasks, including Judge JavaScript fights on fly and you can easily compressed it automatically. When you change anything in one of their fights, it will instantly create compressed version I think is just 10 times easier. And it would be better if you land that selling the lesson. Thank you very much. 81. Most common mistakes: Hello. Today I will show you seven the most common mistakes that people are making. Why developing Javascript script? The first most important one, I think, is that when you have input and you have got here a type text, it even say's that here is the value which is really a text. So it means that if you for example, get these elements of document get a lemon sample right, and you save it here you will notice that when you do something like that sample value and you send it to for example alert. A result will be fight and you might be think, Hey, it is a number we can added. OK, so let's add it 100 plus simple value And let's now see what is the result? The result is oh, it's a 105. Why? Because these value is a string. Really. This think is expecting us toe have here a string and strings. When you use a string with a number, you will always have a string. Okay, this is almost the same. Like if we did something like that, right? And then yeah, it's 1005. If you want to interpret this as a number. You have to remember about parsing it to the anti Jer before so because of it. And right now he don't have another. Okay, I think this is very important because many times you do things like that. Okay, so this is the 1st 1 What is the 2nd 1? Well, when you create an ovary able So for example, I and then you descend flank. If I equals zero, then do something like test. Right? And yes, this is gonna work. As you can see, we have got the test message. But what would happen if we do something like that by mystic, right? Because we are thinking as a human that equal sign just means that we are making a condition. If things like if I is equal to zero, the problem is that nothing is going on. Why? Because right now we are assigning here zero not We're not making comp orations. Onley compare E illusion operator is looking like that. You can also compare As you can see, we have got a warning here. These the 30 thinking remember about using their free ah equals signs. These means that we're also checking if there type of these variable is the same. So if it's something like that right now, we don't We will not say tests, right, because there's a string and this is yours falling other to not make me staying liquid it here. Right, Um, so we could check if something equals, like, five in in the input, but it has to be a five. That is really, um that has equal ties, right? These also checks if the time is right. Okay. And another mistake is Look, now it's working, right. But sometimes people make semi colons like that. How This is really, really very cultures. But I think this is the hardest to spot back possible. As you can see now it's working. It's gonna work always. Even if you do something like that, even you view or whatever you type here this finger were because the truth is that we can have Humana enters, right? And we just ended the condition here. Oh, this is I've lost once for hours to spot something I had, but I was a beginner, right? Really? Be careful about this. The next thing you should worry about is that comparision. So if I equals zero and in the same time X equals do, for example, 105. Then show the message right on. And Oh, okay. As you can see, now we have got the test. It's to write, because here you have 105. Everything is working Fine. But some people do something like that and also through. But now it might be even through if I do something like that. This time it worked. Is random because these bid was operators? Right? Something like that. It's a bit wise. Operator, this is a big white operator. This is relational Operator, the one that can check if this is through our disease through right. You remember the doing to type two times. Okay, we might get lucky, and the result will be okay. But sometimes it will just make your code really, really, really bad. And it's car to sport. OK, so this is the Well, this is one of the bark that many people are making, and the next one is the case sensitivity document. Oh, look, I could do something like that, right? It's stopped working. Our coat was working. Now it's not when you go to the fire back is the cool thing is that we can exactly see document get a lemon by ideas? No, the function. Oh, it's not the function. Why? Ah, because I didn't type it the right way. Okay, this is a typical mistake, so you can check it out. You can easily spot it, right? If you know that everything in javascript is case sensitive. And the last thing you should worry about is about ending an era object definition with a comma. What do I mean? Some people are doing things like that of our numbers and equals, and they do something nice. One, 56 outside. I mean 10. Okay. And now he's working, right? Everything is working fine. What? That's the beauty, for example, is working. And now imagine some situation like that. Let's remove these guy. I don't need. And now your coat is not gonna work in. Every my brother is going to see to hear is expected something unexpected. You should delayed it in multiple Web browser. The code was stopped around. Nothing will happen after it. Okay, so you need to be careful in this comma here. You also need to be careful when you are creating objects off our object. And when you do something like that and then you create a property for example, name and then SAR name, you will notice that it's working fine. But if you do something like that, it can also stop your coat. In Firefox, it's working. It really depends on the Web browser, but in most Web browsers, it will just make your coat stop work. OK, that's long That lesson. Thank you very much. 82. Keeping eyes healthy: Hello. When I am looking at these, I d. In my eyes has Why? Because I have got the white background. If you gonna spend lots of time working on your computer, you should avoid wide backgrounds. You should change the calorie sticks off your i. D. Every I d has got an option like that that these good ones okay, Because they know that for the health of your eyes you should use and the other colorist sticks with some black's grace blows or something like that, it will be 10 times better. So this is my really a hand for you. That is a tip for you. Do you should use go to there options those options. And in that means there is something like a profile here, as you can see. And you can change, for example, toe Norway today. As you can see here, you can check how something is looking like. You can also see how it looks like in other languages, right? You can exactly change something if you don't like something that it looks like that, right? He will have everything categorized and well, you can just apply. And now, as you can see. It looks better, right? Maybe if you don't like these pink here, you can change it. Or you can find another one writer. You can change to another. There are many here. For example, you have got Here are this is not good city lights. I don't like it. He neither. That's why I don't know that downloaded these one. I think that these one looks pretty are some right? And I downloaded it from the net Be stems that come. There is many websites like that. Just time that being stems downloading Google and you will find websites like that like that I think that there is many attempts here and one of them will be surely the one that you would like, right? And you can just download it right for So for example, you can download these things. One you can just don't know it. And later you need to just fancy bit. And when you pansy bitch, you have got something like that. You need to copy this folder in tow. A path looking like that. Okay. He will be your user name application data roaming that decent. Here's the version you want to add this new tempter, and you need to just come pretty right outside in this year here and theories you're gonna be ask if you want Teoh, you know, change it. I'm not being us for a bit more than you will be asked because I am replacing the one that I have already downloaded. And later when you exit that beans and come back again, you will see a new profile here that you have downloaded from for here. OK? This is really, really very important. If you want Oh, program, Your eyes will be really thankful for you. Thank you very much of that zone did this. 83. What is component?: Hello, my friend. Do you see this ego figure? It has got many elements, and these elements, they can be called components. Why? Because right now, there can be many designers, artists who are working on each of the component that creates the big figure. When we change this head to another head, we still have who O well figure, I go right now it looks a bit different. We can change also what Lex, it is now different, but we could just change this one thing, but the entire component, the biggest one, the one that is consisting of many many components is still working, and this is the idea behind react. We go divide things in your application. That is, for example, web one, right? Into small components. So for example, when you have got to DA, right, you are not going to create everything in one after another, you're not going to create HTML and JavaScript and then attach adevent listeners and so on to all of these things B if you did it this way, if you have to change something, right, you need to probably also change something in JavaScript, right? Most time when you add a new feature or something. However, in case of components, we want to create them this way, so we can add new features. We can add new components, just like inserting onto this thing. For example, we can also add accessories. We can say, Hey, I want to have accessory like this, for example. I'm going to remove the head and between this and this, I'm going to put the cloak, for example, like this, and it's still working fine. We have got a new feature and hey, it works. We want to extend our applications by doing so, not like before. Of course, it will be easier to see when we start writing program, but the most important thing from this lecture that you should understand is what is a component. It is just an individual, what element, right? It's just an item that you can just put on next to another item and create something bigger smaller items, you create a big item that works together very good, like an up, for example, right? So you need to change mainly your mindset when you are coming to react. You are not going to create things like, you know, in chaos, like you did right now. And to be honest, there is nothing wrong to doing everything like this when you are doing a small project, remember, because react is like a solution to working with many people at once, right? Or when the project is going to get big. But you need to learn react and it's going to take some time. So you need to decide if you want to do something very, very fast and not come back to it or you want to have a different mindset of putting small pieces, small components together to make something bigger and make it so it is easy to replace things. So as the website, it would be like, you want to create reusable elements on your website where you can use them anywhere you want, and as many times as you want, right? So it is like making your mindset to go into, like, bigger projects, right? You can, of course, use it also in smaller ones, right? But sometimes it might be over kill. But learning react is good idea because probably you're going to emit it somewhere, like, for example, when you're going to work for somebody because there, as you can see, well, you're going to work with other people and they want to follow some kind of, you know, pattern of creating things. And this pattern allows to, like, expand things because, you know, when somebody is following some kind of rule, some kind of pattern, it is good because, well, programmers might be, You know what? I'm going to another job. Now I'm not going to work with you anymore. And if this programmer didn't use, for example, react, but he did everything, you know, with chaos, mindset. Well, another programmer is going to have a problem. It's going to be hard to jump into a project like this. However, if somebody is going to use react and he is just going to leave the workplace, another programmer is going to just jump in and he will know where things are because there are going to be some patterns that everybody can follow. A new programmer coming onto the project, is going to jump in and just start adding new what pieces together components. 84. React fundamentals - the most important lecture for learning React: Hello, my friend. Today lesson is probably the most important lesson you ever have regarding react. After it, you cannot just jump into react with this. I will make all the basics definitions easy to comprehend for you. This is just going to be such easy thing for you. You will feel how to work with Rag and why? React looks like it looks. So let's start from. How did we do apps before using R. So something like that, for example, when I click, the number here increases. The old way would be to create HTML with IDs so we can access them later, making a script that allows you to, you know, count and store the number of clicks. Then we need to make references to HTML elements like that because otherwise, we won't be able to access them. At even listener when somebody clicks, the count is getting bigger, and then we update the view, so the thing that is shown here to the value that is here. And yeah, it works for small projects like this. That's pretty okay, but we are changing our mindset, as I said in the previous lecture, we want to start creating components. So we are changing our old way to new way. And let's close this, and we are focusing now on code here, o? And we want to remake this entire up in react. How do we use react? How do we install it? There are two ways of installing react. One that is very hard and we're not going to talk about it in this lecture. And the second, which is very easy. All you need to use is include react because this is just JavaScript library, for building user interface by default. Yes, it has got lots of other stuff around it, but to be honest, the basic react is just library. So I'm just going to copy it into our project, right, like this. And yes, we can use react now. But react also needs to work on something good is called Document Object Model. So we also need to include document object model. React. But the problem with the link that I got here and notice also the site that I'm using to get these links is called jsdeliver.com, is that it is not using UMD, and why is it important? It's because this stands for universal module definition. You see? The problem is that because we are making it like a fast solution, we want to make it here in this particular place without setting servers, and this is very good idea to show things is that we need to use something that is making things a bit different way. So we need to hit the browse and go here and choose this, okay? And this is the link that we want because we want the one that we can use locally without server, and this is the script that is going to allow you to do it. But remember, again, this is just a fast solution to learn react. You are not going to do it like this in future. But hey, we can already use react and this is powerful. Because to be honest, react is all about reusable elements which are called components. After just setting it like this, you can use components created by others in your website anywhere you want. Yes, that's all. If you want to use it just for that, that's enough. But, of course, people saw a potential in it, and there are many tools around it that you can learn in future, but they are not needed to just react, okay? And that's why I think it's stupid that there are so many tutorials and documentations where they don't show this part, which allows you to just jump into react instantly because notice that now we can inside our script, use react. So we can just comment this because we are not going to use it anymore. We want to make all these things using Jas but how do we use react? The first thing we need to set up is like the root for the document object model that is going to be created by react. Because react has got something good. It's called the virtual document object model that allows it to see the changes of the values that are virtual and then apply them onto your website without you having to think about it. And this is super powerful. So this is the root, right? And let's copy this here and let's make it under comment because every app app has like a root in Rat the place where we start our biggest component, the main application. And now, in order to do it, we need to inside our script, do something like that. Access react document object model and then create a root, o? And we create a root on this ID. So all we need to do is get element by ID and choose root, right, like this. And now, yes, we are using react in where in this particular place, okay? So this is our starting point of our application. And now we can render inside of it what renders means like print, okay? Components that we're going to create in react, right? How do we create components? In order to create a component in the react, you type function, then the name of your component, okay? And yes, you can just return here, for example, hello word like this, okay? And is it enough? Nope. Why? Because we didn't invoke this function anywhere, and we didn't render it, right? And in order to render it, we need to. Firstly, save this root somewhere. So we're going to save it in the constant variable called root. And now we can access it and render our component. But to get this component, we need to use function which is called create element, and now we can send then there the name of our function, which is component. Okay? So remember, this is component, okay, I react. So to be honest, components are just functions, right? Nothing else. It's just simple function. Now, as you can see, we have halo word there, but hey, this didn't work as we had probably guessed because the age one didn't show here as age one. Why we'll talk about it soon. But hey, the most important thing is that whatever is returned here is going to show up now, it's going to be rendered here. So many things, so much hassle right now, right? But this is just setting of it. Don't worry. So it will get easier. Think that we should change the name of our component to something that will describe what we are creating. We're creating application, right? And inside of our application, we want to return what? More elements. And now notice that whatever I will do, it is like only for the sake for you to learn how it was how it's, you know, how everything is working in the background, okay? So we can create read element. And we can create it to be D. We can send to the Dev values, but we don't have any value to send it to now, so we're going to send null because create element takes three arguments, okay? So first is what tack then? What value are sending to it and what should be presented inside of this. So I say hello world. And as you can see, this is our first hello world inside of a. As you can see, we don't see a change here in our source code, but we change the view somehow. The view of the thing that we see. And if we want to now make all the elements that we did before. Well, without something codes called JavaScript, XML, which is like JSX, okay? JSX. You would need to well, first of all, use the syntax like this, and now you would do something like that. Okay, so I need to do. As you can see, it's good that we have got some hints. But, yeah, it works, right? We created all the things that we did here. And to be honest, this looks horrible. This looks great. I'm going back from react definitely into what into the thing that we did before. And to be honest, I would never use it like this if it was, you know, this is just horrible to read. Fortunately for us, somebody invented something what is called JA Zix. And what is JAIx? To be honest, it is like extended JavaScript. Some people call it JavaScript XML because it is based on HTML, which is based on XML. So it's like, to be honest, it's like HTML plus JavaScript. And we can use language like that inside our script. But to be able to use it, we first need to also install something what is called babel. So I'm going to just copy this and put it here. And now here in the script, I type here that we are using text Babel, and from now on, this is going to be so cool and easy to do because we don't do it now this way, right? But we can easily just do something like let's return, and it's good idea to use the parenthesis here, and here we can type just HTML. So let's say that I want age one, welcome and well, I can just do all the things that we're here, right? The same way before. But the problem is that as you can see, we have error here, and the cool thing is that we have error here. I like errors because finally we have errors before we didn't have them. But JS six finally, have like, you know, errors inside of our editor, not afterwards. And the error is here because the function that is going to change this into the things that we have before, create a lemon, age one, create a B, create the lemon button, and so on, right? Needs to have something what is called parent for all of these things. It means that we need to just do something like DIV and put everything inside the Div. As you can see now, it works fine, and this is really JSX. Whatever is behind whatever is in here is JavaScript is JSX, to be honest. Whatever is in here is JavaScript XML. Now, this is what transcribed into typical Javascript and react is just using. And this is easier to use. That's why it's not like you need to re learn a new language. It's just that you can finally use HTML inside Javascript. And notice that normally you would need to put here, for example, quotes and need to think about the quotes here to backslash them. No, you don't need to worry about them. You just return HTML like this and hey, it's working? Yeah, it's here, great. I'm happy. The next thing is that you don't need to use anywhere this create element. You can just render now it like this. You are sending here only the name of component you want to render. So this is how we created our first component and we render it in the root div. And you might think that there is lots of things to do to do such thing, but these will be things that will be preset later. This is like one time thing to do. And later we are just working on components, okay? And now it's time to make this component, do things, right? So when I click on it, I want to, like, the views of the things that are shown here to react on it. Hey, isn't it why reacts called react? Yes. But how do we do such stuff? Okay. So we need to somehow have a counter, right? And we need to have here a variable that is going to count it, and we need to somehow invoke a function that is going to, like, apply these things. Normally, we did it this way, and this was lots of stuff to do. But now, will be a bit confusing, but soon you will see why it's so cool. We need to create a state. And in order to create the state, we type state, and afterwards, we type the initial state, so the value for the thing that we created here. But what did we create here? Let's call it, for example, hooked array, like this. Now, of course, we need to act as react, sorry. And now let's print it. Hooked array. So as you can see, when we go into the console, what's going on? A react use state is not a function. Why is it so? Well, it's true because I wrote SAD, not state. And now, as you can see, we have got in the console what? The hooked array, which is zero and the function with parenthesis. And it means that this function returns an array of two values. The first value is the integer and its integer that value is zero because here is an initial value for it. So as you can see, now it's bigger, right? So this is just initial value for the first element in an array, and the second value is function. This is pretty interesting, right? So it's like this in this situation, it's like the zero and some kind of function, right? Okay, so it's inside here now. Hm. So maybe let's split it. So we're going to do something like that. Constant. Let's call it counter. You can call it whatever you want. Let's just, you know, do something like that. So we created counter that is going to store these values zero, and the function is going to be stored in variable. So you need to know that, yes, you can store functions inside variables, and you can invoke these functions data, and you can store the value of Canter here. And this is super important. Notice that I called this array hooked. Why? Because this function is called hook. It's called like that. It's because it hooks, it connects like forever this function with this value. And it's not like we had to put them somewhere here, right? It just returns the the variable counter, and it returns the function set counter that they are connected to each other. We invented names for them here, okay? We could call them A and B, right? It's up to us what we call them. They were just returned in the hooked array as the first value and the second value. We call them like this because that's what we want to call them, so they are self descriptive. Now, we don't need to use IDs here, right? We can access the value of Canter inside our component by jumping into JavaScript. But how do we jump here inside in the JSX, from HTML to JavaScript? Because Jax is really HTML plus JS, right? We need to type here curly brackets and now the name of variable from the Javascript. Now as you can see, it says zero, but if we change the value to five here, it's going to be five. So this is just initial value for Canter. Hey, but we want to increase the Canter when this function is invoked, and this is also the only way to do it. And it's going to happen when the button is clicked. And in JSX, we have what events, which are very similar to the one from Javascript. You can see on click, which means that when somebody clicks button, what's going to happen the thing that we're going to put here. So we can, for example, put here, increase value. And why increase values because we're going to define here another function, which is going to go for, for example, increase value, right? And this function is going to set the counter to what? For example, 40, 0400. When I click on it, it's going to change it to 400. So the button was clicked. And the increased value was invoked, and set Canter is connected, hooked. That's why they are called hooks, remember. It's connected to Canter. So when I send here value, we are really sending value to Canter and setting the state of Canter to 400. And to be honest, set Canter is also not only changing this value, but it's also rendering our up again. How do we know that? Because if we had wrote here, for example, Canter and we changed the value to 500, notice that nothing happens here. It's not only because Canter is constant when we change it to, for example, let. As you can see, the value is not being changed by why? Well, we changed the value of Kanter, to be honest because why not? We invoke the increased value. But the problem is that we didn't update the view. The view is what you see here, okay? What you see on website. And we didn't update it. In order to update it, we need to render our up again. But you state like hooked set counter to counter, and when the set counter is invoolked, we not only change the value, right, but we also remember Update, render the state on our view. So in this particular place, and there are many optimization behind the scenes, so don't worry about, you know, Wow, there are some things to do from the scratch. The cool thing is that there are optimizations. You don't need to worry about understand them too much. Yeah, they are optimized. But I would use it if it wasn't, right? Now, if I want to increase the counter by one, I need to type here the value that was before, so the state of counter from before, and just add one. Now as you can see, I'm just increasing the value by one. Notice that we are not increasing counter by one value here. We are just accessing the state of counter that is here on view, and then we are adding to this state one and we send the new value to set Kanter, which in the background is connected to Kanter, and it changes its value state here, and also renders the app. So there are lots of things going in the background, but you don't need to worry about them now. Now, I'm going to also show you how to make this a bit shorter. Let's take it under the command and notice that here, we have really what array of zero and then the function, right? So we could really write here something like that. As you can see, we have a suggestion. So Canter is going into this set counter is going into this. And to be honest, it's like, Hey, zero is jumping. Here, function is jumping here because you can assign values this way. So if we did it like this, zero would jump here, F would jump here. But it's just the zero F is coming from this returned from the value that is returned by this function and it goes onto this. So this is shorter right than this. I showed you on this thing to make you understand what's going on behind the scene. And also what? We invoke the function here, but we could do it different way. We could invoke here, set counter, but how do we invoke it? We can invoke it using anonymous function like for example, this way and then invoke the set counter and increase it by one. And as you can see, it works fine, right? So this is not needed anymore. But we can also instead of anonymous function, use arrow function. And in react, we use arrow functions because they have a bit they have advantage over some things that are hard to explain now because this is just basic app. But just remember, instead of anonymous functions, people use arrow functions. We talked about them before, but let's just remind you, this is just another way of writing functions. You don't type here now function, right? You use the parenthesis and then the arrow that is pointing to the body of function. And this parenthesis here is on here for what? It is for sending arguments to this function because we have no arguments. We have empty parenthesis. So this parentheses are being with this empty argument. The arrow is pointing into is going to send the values to the body of function that the entire body is here. Because, creating a function that invokes just a single function is stupid, right? It would just take too much time. So we can just make it shorter like this. So arrow functions are just shortening this. You can see, it's getting better and better, right? Now we have did what we did before, in the old way, in the new way. The coolest part is that now we don't need to think where the value of counter is being changed. We can change it from any place in our abnow. But because the state is now connected with this function, when we do it with this function, we are always upgraded, updated in the view. And this is also very powerful. So the two main features of react is that we split things into components, right? The second thing is using hooks that hook connects the function to the variable. That's only the lesson. Thank you very much. 85. What is Nodejs and npm?: Hello, my friends, today, we are going to talk about super important thing, which is called NodeJS. NodeJS is software that you can download on your PC. And after you install it, you have available many tools that are pre installed, okay? With this big software and what they allow you to do. Firstly, NodeJS allows you to run JavaScript outside of your web browser and this is just super powerful. Why? Because if you run NodeJS and then using it, you run JavaScript outside of your web browser, it means that you don't need anymore programming languages like for example, Python or PHP for something what is called Bend developing. You can now only learn one language, programming language like Java script, and never learn any other programming language and create entire application, the front end, which normally was done using what HTML, CSS, and JavaScript, before you had to learn, for example, PHP or Python two. Create buck development. So something that is going to save, for example, data and send to it and get the data from databases, for example, right? Now, you can do everything using just one language, and this is the solution, right? So so so so powerful. Today, lots every new application if it's going to be big, it's going to be based on this, okay? And after you download it, which is very simple, you choose the long ten support version always. LTS means that it's going to be supported for long time. Choose the system and your processor, which is most time X 64 defadoption download and then next, next next next, next, and with that, you're going to download NodeJS with the engine to run JavaScript, all right, and something what is called NPM, which stands for node JS package manager. So something that is going to manage packages for nod JS. By default, NoJS comes with some core features which are packed in packages. And these features are, for example, allowing you to create your own server. Wow. So nodJS can set up server in JavaScript, which means that you can, for example, using JavaScript, access files on your computer. Yes, you can access files on the server. So for example, databases, right? And many, many, many other things. This is just simplifying it, but this is the most important part that you need to, right, like no, right? And these are the core packages, but people are creating packages for no JS. And when you go to the site like this, so npm js.com, you will find after signing up that there are 3000000/3000000 packages. Of course, you do not need to learn all of them. Here you have you can see popular libraries which are packages, right? Manager package package a library for no JS, and you can choose them by category. Okay, I want to see the front end packages, so I'm going to choose these, and then I can see which are popular, for example, and learn about them and then install them using this NPM. How to do such stuff like installing, we'll talk about in next lecture, but notice that we have react here. We have react dome which is the thing that we used in the previous lecture, right? We included them manually in the head, right here. But including something manually is not good because, well, the user that would visit our site would need to download this part each time, right? This is just slow. And all the stuff like what react does? I mean, for example, compiling the JSX into react components, for example, these things should be done on the server, right? And that's why you can install, for example, node JS on your server, right afterwards. What? You set up all the packages that are needed there, and you are ready to Go, right? All these things are going to be done on the server, right? And you just going to show the result. So this is super, super cool. Easy to install. One click next, next, next. I'm not going to even show it because you can click Next buttons. And after that, you need to learn how to use it in the IDs, like, for example, Visual Studio code, right? And these things we're going to do in the next lecture. But for now, as I said, the most important thing for you is to understand that there is a software that you install on your PC or on another piece. So for example, hosting that allows you to run JavaScript outside of Web Browser. This is the most important thing because it makes JavaScript super powerful. You can make entire applications in JavaScript. And I will add another very, very, very intertring thing, which is what? Your applications doesn't need to be just the web applications. Okay? Wow, yes, you can make in JavaScript applications now, even for desktop, even for mobile. There are frameworks for that libraries here that you can find in NPM. So, to be honest, this is just one solution for everything. So cool, right? That's only the lesson. Thank you very much. 86. Installing Vite and React structure: Hello, my friend. Today, you will install your first package that will install and other packages. Yes, this is also possible. And that package is called Vite. When you go here in the node package manager and you type White, you will notice that, yes, there is something what is called te and you can use it to not on the things that are shown here, okay? So, mainly people use it to start something what is called Local server that has got something what is called HMR, which is hot module replacement, which means that you can replace all the things on your websites when you are working with them. A instantly and only in this particular phrase without refreshing entire website. So it's super fast and easy to debug using something what is called Vt. But Vt, you need to understand that package is not always like a single program, single solution. There can be many things inside of it. Okay? And it can also set up the basic structure of your react up. How do we do such stuff? When you go to the Visual Studio code and you open terminal, and in order to open terminal, as you can see here, it's terminal, and in order to open terminal, you click here. Control plus this sign here, okay? And this sign is next to the number one, and then you can open and close terminal. And here now because we installed in the previous lecture world, Node JS, you have access to NodeJS package manager. So when I type NPM, I can issue some commands. And one of them is init, which means in it initialization, which means creating the start of your and what. So I want to it what VD does and in the latest version. So I don't need to set up which version of which things I want to use. And when I hit Enter, it asks us what is our project name. If I type here the name of our project, going to create a folder with this name. But I'm going to put here that, which means I want to create a project in this particular folder that we are working with. Then ask us if we want to remove all these files or do we want to cancel operation or you want to ignore these files. Let's ignore them. Then we can select a framework to work with. The basic structure of everything. As you can see, we have react. There are other things like Splter which are also recommend. There is view. They also very cool, many others. But we are going to use in this course, react. So I'm going to choose react, Enter, and then it asks you for what type of language are you going to use? Are you going to use Typescript or JavaScript, right? Typescript is like Javascript, but with types, okay? With types for variables and some additional features, advance one, but many people use it because they want types and they want to debug the code easier. So if you know JavaScript, you almost already know TypeScript, but we are going to focus on JavaScript because I don't want to make our code harder to read and explain why I'm explaining things regarding react, right? I don't want to explain everything at once. You can easily switch to typescript later. So let's choose Javascript. And now, as you can see, it created the structure for our entire project, which is a great start setup for react front end application. And here you have got something like Read MiFi where you set up what is your application about? You have got here index HTML, which is the starting point for your application, and it has got sources which is ap JSX, as you can see, X here, not JS, it's X because you write here using HTML and JavaScript zig in one place, right? And the vite comes with the Bb, that's cool because you don't need to then install all these things manually. And now we will show you something very cool. When I run NPM run Dev, it's not going to work. Why? It's because we have not installed all these things here. We have just set up the initial template. So we need to now install all the dependencies, which means packages that are like, related to divide, right? So now when I hit NPM install, it's going to install all these things. And as you can see, it's going to take some time. But notice that we have got here something what is called Node modules. And as you can see, it installed many things here. Not a lot. So the most important for us is te, but te to work is dependent on many other things, and also it includes some other packages. And to be honest, we don't need to care about it. That's why we need the package manager, so we don't need to care about it, right? The most important for us that all these things have just been installed, and we can use them. That's what is important for you. And now when you run something, what is called NPM run Dev which is here, as you can see, the packet Jason is like a description for what NPM does, okay? So when we run the death command, it's going to run vite. And it means that it's going to start the server in our case because that's what is the main purpose of Vt. And now when I open here, as you can see, we have the starting point. We can count here or we can also, for example, change some values and instantly see the result. So notice that when I do something like this, and I go to, as you can see, it says, go to source app JSX and change something to see how cool I am. So when I do something like this and save the file, as you can see, it instantly change here. So we don't need to even refresh this page, right? Whatever we do here, it's going to come up here. And this is super cool for debugging. But also notice that we don't need to anymore, for example, like we did in the previous lecture, include react, react document object model because it was done by vite when we chose the template for react, right? We didn't need to, like, think about it. We don't need to also include Bible. And the most important thing that all these things are now on the server, right, because it's not like somebody need to download it later. So, to be honest, it's just making your life better because we need to make all these things manually, right? You have also here, for example, gitignore, which is very good. If you know Github, it's going to ignore the most, like, things that shouldn't be uploaded on Github, right? So some safe things that shouldn't be, like, shared or things that are big and are not needed on Github, so for example, node modules. So this is like a starting setup template. So Vite help you do it? And the second thing you can now run the server locally and debug your react application instantly. You can just instantly, you know, create your components and so on, which I will show you how to do in next lectures. Is like starting point for your application instantly. Highly recommended. I love Vt. That's only the lesson. Thank you very much. 87. Single file app to multiple files app - analyzing structure of React project: Hello. In this lecture, I will show you how to put what we did in the first lectures. So how to put this into the current structure of folders. So you will learn the files that are here. What do they do? What are they responsible for, okay? And also, how to, like, make the thing that we did before in a single file. Now in multiple files. So firstly, do you see this file here? It is in the source folder, and it is called main JSX, which stands for JavaScript XML. And this is the main, that's why it's called main main script of your entire application, which connects everything. And notice what happens here. Firstly, we have got lots of imports laptop, and they are responsible for importing functions or components, right? And also they are responsible for connecting to something what is called Upjzix where you have got your main application and also is importing index dot CSS, which is responsible for the CSS of your entire site. So this is like a place where you connect everything and also you create root of your website. And notice that in New Way HTML, we also did something like that, right? But we had to use something what is called react document object model class. But why we didn't use it here? It's because we imported on the create root function here. We could do it this way, okay? And, you know, later we will need to import react document object model, and everything is going to work the same. But the newest react is going away from the classes. It wants to be only using functions. And to be honest, it is easier to read when you write things like that because firstly, you can clearly see what is going to be used in the current program up here, right, so this program is using create root function, okay? And it's not like we've important entire react document object model, right, with all the methods inside of it when we are using Just Create root. Also, this as far as I have read, has some kind of optimization in the background because of that. So this is a win win situation. We do not need to right now write something like this. Notice that here we are taking the root. This is the same like here, and it is taking the root from the up JSX component, and this is component, but this is a script. How do we distinguish this thing? Notice that the first letter here is smaller case, and that's why this is just a program, a script. But when you see upper case, the start, it means that it is a component. This is like convention for naming things in so when we create it, we also render it instantly. We could, you know, render it before in one line, so we could do something like that if we wanted to, it could be done this way, but we did it just differently, right? And after that, we have got like application here, the same like we did. Here, but also something is called a strict mode. You can if you want, delete it, but this is, as the name suggests, like opening mode that is strictly observing what you are writing in your current project. And if you make an error, it's going to be easier to spot because of that mode, okay? And without it, it would be just harder to spot. So you might be thinking that it's going to slow your, for example, website. If it was on your developer server, I mean, on the production server. So if you like, transfer your is and it was there, then yeah, but the cool thing is that Vt added it and it's going to remove it. On its own. You don't need to remember about it, even. So this is just a win win situation. You are going to develop your application in strict mode, and afterwards, te when you deploy your application, when you build it. And in order to build your application, you would write NPM run Build, okay? And it would run the script, which is from the packet JCN which is called build. And so it would use Vte to build entire application. We're not going to do it right now, okay? But it is just like so you know, you don't need to care about the street mode is going to slow down something later. So we created root, and we put their application, the main entire component of the main component that is going to connect everything. And here, as you can see, we have got what? Function that is called up, and this is complement, right? Remember, component name. And it is named the same as the file, and here is the content of it, right? And this is going to show where. Well, it's going to show in document good element by ID root. So in the index HTML. So here, okay? So it's going to replace this, the root with the content of whatever we put as the return here, okay? To be honest, we are not going to go into index HDMI later. We're going to just set it up once and probably never come back here. Here you have got also what the first script that should be run, yeah, this script, which is just connecting the first component onto the index HTML. And it is splitted this way because you almost never visit index HTML when you are using React and main JSX also. That is very rare. So this is cool because this is like a global script that you rarely visit. But here, you're going to connect everything later when you are developing your site. So to be honest, if you want to, like, redo what we did before. So in here, all we need to do is take entire application that we had, right, and go to here and just replace this function here, right? And to be honest, that's all, but we have got error. Why? Firstly, we are having warnings here which says that, well, use state is declared, but it is not used, for example. And it's because we are accessing use state right now using what react class. And as I said earlier, in the newest version, we should not use it through the object, but we should do it this way, okay? So we can clearly see, Okay, the hook state is going to be used this place. Next, we have warnings of things that we are not using anymore, so we can just delete them. And to be honest, that's all. We have got now whatever we did in one file in, like, a few files, and it might seem like it's complicated right now. But when your project gets complicated, it's going to improve your workflow, believe me. At start this workflow seems really weird. I understand you don't worry, it was the same for me. You just need to get used to it. And here we have got now our function, first component, application that is going to connect next components inside of it. How to do such stuff, I will show you in the next lecture. For now, the most important thing for you is that the main place of what you're going to do is going to happen here for connecting new components in these places, you are going to be very rarely. This is the main place. You're not going to use normal index HTML, for example. No, you're going to just stay most time here. And, well, if you want to update CSS that is connected to a component, as you can see, you have got also with the upper case up CSS, and here is CSS for Logo for things that we've just deleted. But yeah, it's here. And index dot CSS is just CSS for your entire website. So as you can see, they change how, for example, anchors work, how bolder should be shown, right? We are using display flex by default, and so on and so on. So there are some things that are going to apply to every thing. Okay, that's only that lesson. If you have any questions, feel free to ask. 88. How to create component and connect it to App.jsx: Hello, my friend. In this lecture, I will show you how do we create components in the structure of react application? Firstly, we want to create a component, you should first create components folder. Why? It's because you're going to have lots of them. Why do we do not put this component inside of components folder? It's because you want to have a very fast access to this file because you can often open up JSX too. Update the structure of all components of your website. You will see soon why is it important? So when we are in the components, we have to now create a file. And this is very important. When you are naming your FIs, okay? When you are naming components, you should always use uppercase for naming them. So this is name of script, Jaz, okay? So if you have a script, so a program that is going to do some stuff, you're going to call it like this. But to distinguish them from components, you should use upper cases. The same upjsEX. We need to now call our component for what is responsible for what it is going to show. Tell me how would you call the component that we've got here? Component is like counting clicks, right? It has got a tracker for tracking how many clips we clicked. So this could be called, for example, click Counter, Counter button, click Tracker, interactive counter, recremental counter. The most important is that it should be self descriptive and new file, and I'm going to call it click Counter. As you can see, I used first uppercase here and first uppercase for also second words for the words coming after the first word because there may be much more words here. So JSX. And this is our first component, and I'm going to create a function that is going to be called the same as the name of our what? Five. And afterwards, we need to create body, and the body of it is just going to be the one from the up component because we want to just put it in another file, so we can reuse it. And now we've got errors. The first error is that well, it's said that it's never been used, and the second thing is that well, we didn't export it. We need to export it, so we can say something like let's export it by default, and we are exporting click counter. So this is very important because many people doesn't know. We had a lesson about it before, but I'm reminding you because it's super important. I'm just informing her that it's possible to import it somewhere, okay? The second error we have is that use state is not defined. So we need to import it because I have codium installed. As you can see, I can just hit tap and it's going to like replace what it suggested. So in order to use codium just install it, it is an AI. It's very useful. Now we are using the use state here, so it was working fine. So we've got it in file that is totally not connected to anything right now. So we are not able to use it now here, right? We can remove our stay here because it's not anymore, right? And we are also going to remove what we returned here, and we want to use our click counter here, right? But how do we do such thing? Well, we need to access it, so click. Click Canter. And notice, it's because we are working on a project that is critic Invite. We've got some extensions installed. When we hit Enter, it's going to import, click Canter here. So we can use it now. And when I hit Tab, as you can see, it's going to also add this here. And now, when we go here, as you can see, we can use it normally like before, but the most amazing thing about that is I can reuse it many times. That's why components are cool. The problem that we have here that we have error is because we need to use something what is called react fragment, okay? If we want to use many components when we are returning something. We could use here, for example, DIV, okay, but it would be just overhead. We can just put it like this because we didn't really need a tag, we just wanted to follow and how JavaScript language works because when you return something, you can't return many react components and one. It's just impossible in Javascript. That's why they invented something like this. So when somebody is trying to return many things, it's not going to be an error when you do such stuff. And now we have got a few of them, and the coolest thing about this notice that state of each variable is not connected to each other. This is awesome because each component, when you create an instance of it, so you create an example of it, something that it's not like they know about each other, right? Why is it so cool? Because normally, if you were writing it before everything in HTML and JavaScript, when if you had created another like element that we're doing the same. You will need to change the ideas, get element by ID for the next element, you will need to repeat all the stuff that you had. Otherwise, JavaScript wouldn't know which guy should be updated when. But here, you can just reuse it in any place you want in your app. That's why react is also powerful. Create one, reuse anywhere you want. Because if it's done once, you can just jump here and not even think about the component itself, you are just using it, right? All connections should be done automatically in your component. And this, I think, shows you why react is also very, very cool. Of course, our component right now wouldn't be repeated like that on your website, but this is just for the sake of, you know, showing you the most basic things when you are learning re. So this is how it works. Right now, we need only one component, which, as you can see, it's very good that it keeps its state. And it's important to notice that we've got here, what the import. Otherwise, it would not see this thing. So we need to import this here. So this is really a place, as I said earlier, to connect all components that you're going to create because in future, you're going to create in components, many other components, like, for example, head, navigation, for example, buttons that are responsible for different things. And then you can just put them here using the stack. This is super cool, right? If you have any questions, feel free to ask. 89. What are props and how to use them?: Hello, my friend. Today we're going to talk about something what is called props, and they stand for proprieties. Notice that we've got here click Canter, and this click Canter is based on a component that always do the same thing. And yes, I can repeat my component now many times, but sometimes you want to customize components. Like, for example, I want to have a different label for this button. I want to make this pattern increase by, for example, five. So I want a different behavior, right? I want to customize specific component to my liking when I am using it in my application, right? So in this place here, for example. So how do we do such thing? We need to send somehow to click Canter value that will change its behavior, and we do it by sending something what is called props, which are like arguments to functions, okay? So how do we do it? We need to, like, say, Hey, I want to have initial value to be, for example, not zero, but ten, right? And now this thing is going to be sent where to our click counter here to this function. So it's like sending argument. They call it props because, well, this is how they called it. Properties, right? Properties of function is going to be like now here, send. And now we can call it, for example, props, okay? And that's enough, but we've got here what? Some kind of warnings because we haven't used it yet, for example, right? And what can we do with these props now? We can use them. How? What these props right now? Well, if I do something like that, console log props. Let's see what we will have when we refresh our page. You will notice that in the console, we've got where is it? Initial value ten, as you can see it's here. So props is really what object, right? So, it means that well, we can copy it to this place. It means we have got here something like exactly this, right? So if you want to access initial value, we need to type in this place props that initial volume, right? And as you can see, we've got here a problem. The first problem is that we haven't specified, maybe I typed it wrongly. Initial value. That's okay. So when I refresh it, as you can see, it's ten. And in other places, it's wrong because, well, we didn't set the default valume. And this is the problem that we can solve using something what is called propetypes in react. But using this solution is like very long and I don't want to lose your precious time because nowadays, you don't use this solution, you use typescript for specifying a type, for example. Also, in situation like this, most time people do not take entire object of all values here, like the single object like props, they do it different. Soon I will show you how. So when I have props initial value, I can access it, but I could also do it differently. I could do something like that. So curl the brackets here and type initial value. So the same name as I used here, right? And now, we are not using props here, but on the name from here. And as you can see it is working also fine. But we can now also set here a default value. So I component doesn't use the customized prop like this, then zero is going to be assigned. So as you can see, now when I refresh it, default value is ten, but in other cases, it's zero. And you might be wondering how does it work? So this place here is really like this. So we are trying to assign to object that has got at the start, initial value set to zero, and object that has got initial value set to ten. So we are just replacing ten here, we're replacing zero with ten. Let's say that there are going to be more things customized. So for example, let's say that I want to count differently. Let's say that set counter must do something like, for example, increment by, and let's set default value to one, right? So something like that. But we can also send here now increment by, and let's say that here we're going to count by five. So now we really did something like that. Increment by five. And here is increment by one by default. So this to this, I just replace it. But notice that we can, for example, the initial value, let's say that here, the default value will be 500, right? So you have 10500. And in case of the second component, we've got here only this value, right, sent here. And this is working like this. It's gonna JavaScript is looking for keys for properties that are initial values. So here we have initial value, and it's going to change only the ones that has that are on the right side. So 500 is going to come to here, and increment by one, we just stay. So that's how we choose default values. And also, that's why we need to use curly brackets here because if we don't use curly brackets, well, our program will not work at all. It's because we are trying to do something like this in this situation which is not a syntax that is possible in Javascript, right? So that's why we need to do something like that. And is pretty, I think, you know, easy to read now, right? You can clearly see at the top what properties are going to be customized in our component click counter. How are they coded, right? And what are the default values? If we had used the solution that is in the S lint, well, that would be really long, and I think it's boring. It's just taking too much time and it's not achieving anything better. As you can see, it still says that validation is missing. It's because we didn't set the type. And in typescript, setting types is just easy. We are not going to use what the S link is saying for this course because this is just overdoing everything and losing our precious time for learning cool features. So in the conflict file in the rules, I'm just going to add here a line which says that we want to make the prop types off. And now we are not going to get this warning each time. And in this lecture, the most important for you was that you learned how to send customized props as an exercise that I will do soon with you if you want to follow with me, is make here the click Bin customized. So for that person who is using in the app the click counter component to set it manually. How would you do that? Firstly, you need to set up new prop and we go, call it, for example, button text, something like that. By default, we can set it to click me like our CdiumHadlas and we can just replace this here. Like this, right? So you are using the button text here because the default behavior is click me, so nothing change. But we can say something like here, for example, button text, and let's set it to, for example, increase by five. So you can see, we change the default value of button. We do not need to now come to component to like maybe customize for the specific use case. We can customize each component from this place using our props, right? If we don't want to customize, we can use the default behavior in line 11. But if we want to customize, we can change any default behavior from here, right? You could make the H one header also custom is able, or maybe you could make it like it's going to show or not show. It's up to you. You can play with it. But the most important thing from this lecture for you is that you can send arguments to the components by something what is called props in the react. Well, library, everybody calls it props, right? So you will know now how to use them and why they are called like that. And what are really people referring to when they are talking about props? It's just really arguments that are being sent to well function, right? That's only the lesson. Thank you very much. 90. Intro: What are we gonna create?: Hello, my friend. Today, I would like to show you what are we going to create in the next lecture? We are going to create gold clicker, which will allow you to mine gold inside of this gold mine. When you click on mine gold, as you can see, we have animation of the amount of gold that we have gathered. And notice that these patterns, they were disabled. But now I can, for example, upgrade my mining level and because of that, the power of my mining is now equal to two. And when I hit mine gold, as you can see, now I mine by two amount, right? Now I can upgrade it even more. Now it's by four. But I can also buy the auto clicker, auto miner. And as you can see, it is now automatically mining my goal. When I buy it again, as you can see, we have got now what. Yeah, it's mining with the power level of two because auto clickers are not upgraded yet. We do not have a way to upgrade them now, at least. So this is a simple game for like auto clicker, right? You could, of course, extend it later by diamonds and so on and so on. But for now, you are making it a bit smaller. We are going to make everything in one file to, like, focus firstly on the features that you need to learn to be good, right, in react. This is the thing that I want to focus in this lecture in these lectures and notice that I've also created what icons. So we're going to learn how to get icons like this and put them in sun height, our react. Also, how to animate, like you see here. Notice that when I hit auto clicker, this and this animated, right? When I hit mining, this and this, like changed. It's because well, it costs to upgrade money, right? So I had this and this had to move. You can see this is like a simple game that we can play a bit a bit and later buy autocliker. So there are lots, lots, lots of games online like this, but the most important for us is that you're going to learn lots of good stuff in this section, and at the same time, we're going to have some fun because creating games is really cool. If you have any questions, as always, feel free to ask. 91. Ex. Create GoldMiner Main comp: Hello, my friends. This is an exercise because you should be able to do this part of our gold miner on your own. So you have got Heather gold minor gold and the amount of gold, and when you click on it, you increase the value. That's the thing that we did in the previous lectures. Remember, if you want to become a coder, you need to practice and do it on your own or watch the lecture how I did it. So I put the gold miner from components here in our main application, and inside gold miner that I added to the components, I hooked, so I connected function set gold to the gold. And then I returned, what? Header, gold minor, the current value. And when somebody clicks on the pattern, the set gold function that is hooked to gold is going to increase gold by one when somebody clicks on Mingd. So this is pretty simple entrance to our application, and you should be able to do such stuff very fast because this is just the most basic thing regarding react so practice, okay? The next lectures, of course, we are going to create everything from scratch. I'm not going to show you how something was done because you need to see how things are being made in order to learn and become good programmer. If you have any questions, feel free to ask. 92. Gold Miner Power Upgrade: Hello, my friends, it's time to create what? Mining level. So let's create here mining level like this, right? And now we need to show this level. And in order to show it, we need to firstly create a variable, and that will be hooked to specific function. So I propose to call it maybe not mining level, but something like click Power. It's because maybe you would like to attach it in the future, not only to something that is going to mind something, right? Maybe you want to create a game that is gonna, you know, create when something is going to be clicked, then it's going to increase the level of the player, for example, or the level of his equipment. So this name is going to be more universal, right? So click Power, set Click Power, and the default, we can set it to one. Okay, so now we can just do what? Show it here, right? Click Power can be shown, and as you can see, it's one. We need also a button that is going to change it. So let's create a button, and as you can see, the good thing is that we have codium which is going to create it. But of course, it didn't know that when we upgrade Click Power, we also want to, like, make it cost, right? So I propose to change it to something like cost of it is maybe let's go. Cost and how much it is going to cost here, right? So we should enter the JavaScript, and I propose to create variable that is going to, like, show it. So click power cost or maybe upgrade power cost, something like that. Maybe this is going to be better. Now we need to create it here, upgrade power cost, and this is a good hint. We want to use state because we want to hook this to this and the beginning value is send. Now, when somebody clicks on this right on set click Power. I want to increase the power level, right? As you can see, it is being increased, but the cost is not being increased. This is not what we want, right? So probably we need to instead of doing it right now because putting all functions here is not readable. I propose to create a special function that is going to be responsible for all these things. So I propose to call it a great click Power, okay? And we don't need it to be arrow function now. And let's create this function here. So let's create it using arrow type function. And why is that so? Because in react, we are used to using arrow functions everywhere because of legacy problems when react was really not using functions, but everywhere classes. This is one thing. The second thing is that sometimes you might want to use arrow functions because of consistency. Everybody is using arrow function. So if you had used, for example, typical function, anonymous function or normal functions, when somebody is going to read your code, he will be confused, right? Because this is just remember that arrow functions are mainly different ways of writing down how your function is going to be defined, right? So we are just saving it inside this variable. That's pretty enough. And now we need to define it. So as you can see, the first suggestion, which is very good is that it tells us that we should check if gold, the amount that we have right now is enough to upgrade, right? Because we shouldn't be able to upgrade like we do now, right? Well, it's not working because we have error, but we shouldn't be able to upgrade it when we don't have enough gold, right? Okay, so that's a good idea. Let's check it. And afterwards, maybe let's not use the hint because we need to understand what's going on one by one. Firstly, we need to? We need to, we need to go into our set gold, right, and we need to decrease the value of gold by the upgrade power cost, right, which is here. That's good. Afterwards, we need to what? Use the set click power two plus one because, yeah, we want it to be more powerful. And we also invoke what set upgrade power cost because we want every upgrade to cost more with each hit. So now, as you can see, I can't hit it, but when I mine gold and I get after ten, when I hit, as you can see, my mining level is, and now I can mine gold. Well, it's not working. Why? Because we set the gold using gold plus one, but we should use now what the click Power, right? Okay, so now now I can do it faster, right? When I get to 20, now it's going to be upgraded by free each time. That's pretty cool, isn't it? If you have any questions, it's always feel free to ask. 93. Updater Functions in React Hooks: Hello, my friend. Today we're going to talk about super important topping, which is called updaorFunctions. And that will show you now a big problem that we made in our current applications. That is not seen because it is a small application, and when we click on the button, we really update the state of our applications or the values inside our component, like almost at the same time when we click on it, right? But the problem is that what will happen if these changes are like, for example, not instant. It's not locally done like they are, for example, being sent in the background to, for example, server and this server is not going to respond in time. Like, for example, it's going to respond in 3 seconds. Or for example, when we have a button here. Notice that we have button that sets the gold, right? But we also have second button that does the same. It just decreases the amount of gold that we have when we can upgrade, right? But also notice that in future, we're going to have something it's going to auto click, so it's going to update the gold state in the same time when we can, of course, hit this button here, right? And to be honest, this can cause some problems like what? The problem is going to be the easiest to show when we do something like that. Notice that we are invoking here what? Set gold function, which is updating the state of gold by sending there the current state of gold. So in our situation by default, it is zero initial state, right? And then it sends to it one. So yeah, we have one here. Okay. So what will happen if we invoke it again? Do you think it's going to be like, Hey, I showed us here? Um, so, to be honest, when I click once now, will receive free here or one? Oops. You are still adding only one. Did we refresh our page? Yes, we did. Okay, so what's the problem? The problem is that normally, if we were updating values using here, for example, document, get the lemon, buy ID, and then access the ID of the lemon and then update it to gold plus power, right? And then we updated the gold, right? Value. Then, it would work like this, if we had invoked it three times, right, then we would have here free. But now the problem is that we are sending here the current state of gold. So current state when I'm looking at this component, is what? Is zero, right? And then again, I'm sending the current state. So it's zero. And then again, I'm sending the current state, which is zero. But you might be wondering why the state. So the values here are not updated between each of that function, right? Why do not like, Okay, so I'm going to update the state, and then again is going to update the state, and again update the state. Why react doesn't update the state instantly. Socion function after each function, why this place is not updated? This is a very, very good question. Firstly, it would be imagine that you would have like, no. 500 updates like this. So if you had clicked Min Gold, you would have zero, right? It would be impossible to change this valu and show to the user 500 times the change 0-500, right? It would also make your application very slow, right? That's why uh when you invoke a function like this that works on state, react is going to take into consideration what you sent here. So you send zero plus one, right? And it's going to put it into Q. So it's going to wait for the state rendering action. But because we invoked afterwards, again this and we didn't invoke rendering yet, so we are again updating the gold state to zero plus one, which is one. And then again, we do zero plus one, which is one. So, to be honest, when the batch is ready, when the time for rendering comes, as a result, we got what, unfortunately, only one, right? Okay, so how to solve a problem like this? In order to solve it, you need to send to the set gold. So the function that is hooked to gold, right, what should be done with gold, okay? But with the function because if you send there a function, it's going to, like, all that changes one after another. And when it's going to decide to, you know, refresh the state, it needs to apply all the changes firstly, okay? Or they need to be played one after another. They need to follow this pattern. That's how it's going to happen. So how do we do that? We have something, what is called arrow functions, right? So we could do something like that. Let's send here return plastic power. But I think I made some mistake by making too many parentheses. Okay, so the function that we are sending is really this, okay? I think this is a bit more visible where the parentheses are or not. So this is the content, and it's very important now to notice that we can call here whatever we want. So for example, something like that, we need to invent our own variable. And because we are inventing it, we need to send it as argument, right? We could create local variable that we're going to call this. And remember, we haven't used this value here anywhere, right? It's not used in this context, right? But to be honest, it's just this variable is here only to show what should be done with the value that is hooked that disconnect to set good. Because when I send this, okay, to set gold function, then whatever we do here in this place in this only in this place is the thing that we are looking for is going to happen to gold. So it's like, Okay, gold from the previous gold state, please add to it ClickPower, okay? So this variable is going to be just replaced by this later, okay? I know it's confusing, but that's how it works. This name is here just for us. Okay? We can call it whatever we want, and it's going to work, really. So when we repeat this now three times, right? One, two, three, right? We call it whatever we want. This is can see now we apply three times set cold, okay? So this can be called whatever we want, okay? But people call it most time, the same name like here. But remember, this is like a local variable for this, and the truth is that it's going to be replaced by previous by the gold in the set gold function, right? So people call it sometimes gold, right? And it's also going to work, don't worry. Of course, we need to repeat it three times. But to show that it is not the same value, most people just do something like that. So they type proof that sends from previous value of gold plus cric power. And also, to make it shorter, because right now you might be like, Oh, my God, I'm not going to write so much stuff. You can make arrow functions also like that. So you don't need to use parenthesis on an argument if there is at least one argument, as you can see, and then you can also delete curly brackets if you are returning something here. So now, yeah, it's shorter, right? And now we need to only do something like this, right? So because we are working on the previous state of gold, and we want to make sure that every Well, we want to make sure that all these things are going to be run before rendering, right? We need to use updated function, okay? Otherwise, it's just not going to work. So when we are looking at the solution like this, you might be wondering, like, Oh, this is super hard. I don't understand how it works in the background. To be honest, Ra, this is not for me anymore. But I will show you how to use that even if you don't understand how it works in the background. So if you need to change, for example, imagine that you have got here, for example, state that changes like team from dark to light, right? So you change the state from one to another, so you are not working on the previous values, right? Then you do not use updated functions, okay, like this. However, if you are working with values, that are working on the previous right on the previous values that were used somewhere in application, it's just good idea to avoid mistakes using updated functions because they might happen. They don't need to, right? But they might, and you want to make sure that your application is working always properly. So anytime something like this happens, you want to use updated functions. And there is one more thing that I want to show you now that's going to help you even more. So to be honest, Think of the updated function like this. Forget whatever is behind the arrow, and here is really what should happen, to be honest, you could think of it like, Okay, so when I write it this way, then I am not guaranteed to make it always work properly when I am updating the state of my app. However, this makes sure that everything works fine. So that's all. Yes, that's all. Okay, so here, to be honest, we need to only do something like that, right? Yes, that's true. And here we need to do only something like that. Yes, that's true. And here we need to only do something like that. So here is what should be just done with the state but we make sure that it is always a plight, even if there are many changes at once, this just gives us guarantee, right? And that's all you need to understand about update functions. This is also a good idea. Notice that I type you previews. You can type here, you know, the same name like here, but it shows that well, that this is not like the convention, okay? Convention is that you always call it with the affix like this, okay? So you add previews before to show that you are like creating here a local variable, right? But it's going to work if you type here also gold, right? But here you show to others, and this is a convention that you are using the updater functions. Everybody knows that you are now working on the previous values. And by doing such thing like here, you are making sure that all these things are going to change properly, even if there are hundreds of changes behind the scenes at the same time. And this is going to make our application work properly when we make auto clickers, for example, in future, right? But it's also going to make it work properly. If we had, for example, some fetching data to the server, and this would make sure that the changes were made on the previous values, not on the things that are shown here when the change is happening. 94. [exercise] Auto Clicker GUI and hooks: Hello, my friend. Today, we're going to create a pattern that is going to allow you to buy auto clickers and show how many auto clickers are available and also hook the state, so connect all these values into the hooks. So this thing, I think you should be able to do on your own. So try to practice on your own. I'll show you how to do it anyway, but it's a good idea to stop the lecture, try to do it on your own part where you going to make execution of it, right, how to make auto clicker work. It's a paid advance for now, and I'm going to show you how to do it in the next lecture. So what do we need? Firstly, we need to set up, like how many auto clickers we have, right? So auto clickers and the amount of auto clickers, right? So here we need to type something like auto clickers, for example, right? And we need to set up it. So let's wait for our super AI, it's going to just hook this to this, and we are ready to go to create a button. So let's say that we want to create a button, and let's see if it's going to help us this time on click, and we need to set up here as you can see, Yeah, that's what we wanted. You want to have set autoclikers because we want to have one more and the cost of autoclicker. But when we buy auto clicker, we need to do a bit more things, right? So we can accept it for now. And firstly, we need to set up here the cost of auto clicker, so auto clickers cost, right, something like that. And I propose to create the hook, right? So something like that. And let's say that at the start, the cost of the auto clicker is going to be set to 20. And here I propose to put it into another function, right? So let's call it, for example, buy auto clicker, right, because we are going to buy Autocliker, right? It's not working right now because we haven't set up the function that we are referring to. So I propose to set it, as you can see. That's good idea that we have AI that's going to help us a bit. So if we have enough gold, then and as you can see, the good thing is that because previously we use what? Previous gold, previous click powers we use the update functions, I use it also here, and it's good idea to use update functions when we are working on the values that were accessed previously, right? It's a good idea to do it just in case when your program is going to increase, maybe it's going to avoid mistakes. So I prefer doing it always this way. So let's say check if everything is done properly. So yeah. Remember, we do not look at this part, we're looking at this part. So yeah, it costed something, okay? We increase the amount of auto clikers. That's great. And we also increase the price of auto clickers Pi two. Okay, that's enough, I think. And let's see if it works. So I'm mining something, and when I get to 20, I can buy autoclaker, right? And the cost also increased here. So it's working fine. I can buy auto clicker when I don't have enough money. I can steal mine, right? And when I get to 40. So this is the game, I want to have two auto clickers and they should make an effect. So they should click for us, so we don't need to do it manually. And this thing we're going to do in the next lecture. Have a good day. 95. useEffect on practical example: AutoClicker: Hello, my friend. Today we are going to implement auto clickers. So when somebody buys it, it's going to click for us, it's going to mine gold. How do we do such stuff? Well, we need to think about what we need to detect first. We need to somehow detect when the auto clickers amount is going to change because this is the time when we want to start auto clicking, right? Or, well, notice that we could start from, for example, free auto clickers, right? And then when our component is initialized, it should also start auto clicking. So we need to somehow have a tool that is going to start auto clicking when our component is loaded or when the auto clicking is changed. And this tool is called use effect. So this is it. And as you can see, we have a suggestion here and we're going to use it because use effect takes as the first argument what should be done, but not this, what should be done using function, okay? And we need to notice here, import use effect. Otherwise, it's not going to work. So now when we have use effect, what can we do? We can type what should happen when auto clickers change. But how do we detect it? We need to send this as a second argument what we want to look at, observe. So we are observing the change in auto clickers now. And when the change happen, we can log the change. Change happens something like this. Now, when we go to our project and I open the console, notice that we have something like that. Two times change happen. But I told you that well, use effect is only invoked when the autotica is changed. And the change happened once here when the state was initialized. So why two times? This is a very good question. Because when we go here, we have something what is called strict mode. And when I remove the strict mode, you will notice that the change now is going to happen how many times, once. Because when you are using the strict mode, every component is going to be mounted two times just in case. And well, that could lead to some potential problem when you don't know why things like this happened here, right? Because if you had invoked here something that would change the state of something, you would be surprised a bit, right? So remember that the strict mode does something like this, okay? Of course, remember that this is not the place for setting the value of something at the start, for example, like, let's change the state of gold, right? This is not the place to do it directly. The init is here, right? We are initing the value with zero here. Maybe let's set it to 100. It's going to let us dea the game faster. So what can we do here? We can, for example, well, start auto clicking, but how do we start? In order to start it, I propose to use function, which is called set interval. I remind you that this function works like that. The function that is sends the first argument to set infernal is going to be invoked. By the time that we set here, so 1,000 is 1 second. Okay. So whatever is going to be here, it's gonna happen each second. And what do we want to do? We want to set gold, right? We want to change it like almost here. We want to what? Set it to the previous amount of gold, but we want to add here the amount of auto clickers we have, right? We don't want to use the click power. So remember, we don't drink this part, right? We are thinking, Okay, so I need to set the previous gold demand because I want to have the same amount that I have now, and I want to add to it the amount of auto clickers we have, right? And as you can see, when we run our program, well, it's working because it is now free, multiplied by two, which is six, and the gold is being increased by six each time. Okay. But, well, we have a problem because the strict mode made our program work badly. But this is not even that problem would be like nothing anyway, because when I click it again and again, notice that we have got now, like, free auto clickers with different values, and they are working like in the same time. And this is not what we want, right? And the coolest feature of use effect is what? Is that when you return here, a function, as you can see, we have a suggestion here. When we return here, a function, that function is called clearing function always. And now, as you can see, it is working the same right? But it's working the same because we didn't send to clear interval, which is a function that takes as an argument what kind of interval I want to clear? Oh, so I need to create here a variable that is going to be sent to this function, right? And now when I open it, Oh, it's working fine because we started from the free, right? How did it work? It works like that. So the first time we it our component, use effect is going to be invoked. We are going to create interval, and we return what should happen when the use effect is going to be invoked again. So because we did it two times in a row, then when the use effect is going to be invoked again, you are clearing what? The timer from previous run, right? And because of it, we have a new interval that also has a function for crilling for later, right? But we have now one running interval, and it's going to run until we close the application, or until the change happens to auto clickers. When the change happens to auto clakers let's see, when we buy them, right here. So this is the moment. So when I buy another autoclaker, what will happen? Remember, again, firstly, before doing this, the clearing function is going to be run from the previous use effect. So we are going to remove the auto clicker that is clicking with the value of freer. And then we're going to set up a new auto clicker with the value of four, right? So when I had it, as you can see, now we increase by four. Now increase by five, and we're also clearing the previous effect. So the name of this is pretty cool, right, because it's like use effect. So make some kind of effect going. And if we run this again because of the trigger that is here, I'm going to clear the previous effect. So I can run another one. So powerful. I know that the syntax here when you're looking at this is a bit complex. But remember, you have dium that is going to auto complete for you most of the things, right? You as a programmer, right now, many need to understand what's right the process. You need to know that it's good idea to use effect in case like this, right? You are just like a person who is going to design the application. I really love that react became very easy to use when something like autocompletion from coding came online because to be honest, remembering about all this, you know, here is credit bracket where you send here, I need to remember that I need to send a function. I'm not invoking a function, right? Remember, this is like I'm sending a function to be invoked. This is very different. It's good to have autocompletion like that that helps us. We need to somehow edit something like here, for example, because we wanted to increase autoclq curse not click power. But hey, this was a good suggestion. Maybe maybe you wanted to do it this way. Again, use effect, if you don't understand even anything from behind the scene is used for what? You put in the function what should be done at the start of the unit of component. Then as the second argument, we say, what should trigger this effect other than initialization, right? And here as a return, we say, what should be done when we invoke the same use effect again. So we can clear, for example, the previous state. So, so so powerful think one line. Imagine how many things you would need to do to achieve the same thing using just Vandia Javascript. How many things you would need to think about what to observe or to detect, right? Powerful. 96. DisabledConditionally Disabling a Button in React Using the 'disabled' Attribute": Hello, my friend. We can upgrade Click Power when we have money. When we don't, well, we can't, but we can still click it. I think we should change the disabled attribute of button to disabled. So we must make it like two, right? Otherwise, this doesn't look good, right? User might be like, why I can do it. Okay. So how do we do it? Well, we need to access disabled here, but the problem is, how do we, check the condition here, right? The cool thing is that yeah, the first thing is that we're going to get from AI suggestion, and we can just enter the JavaScript and just check the condition, right? If we have gold that is lower than the upgrade power cost, then make it disabled. Whatever is going to be returned here, right? So if it's going to be false, right, then well, it's going to be changed by react into disabled. If it's going to be true, it's going to be changed into removing disabled object, attribute it. So in situation like here, also, we just need to heat up because of AI, right? And now, as you can see, when we don't have enough money, the one that we have money for, we can buy.This is pretty cool. But this is a good idea to know what happens in the background because some people know that disabled, right? Works on and it's equal to disabled. Yes, this is pretty weird, but that's how this attribute works. But take into consideration that we are using what JZX and whatever is here is going to be trans piled into what react, create a lemon using babel, right? And react create a lemon when it gets this so fals, it's gonna like, remove disabled attribute. But if he gets through, then add create a element, is going to say disabled to disable. This is just how it works in the background in this function. Maybe it's not interesting for you, but I laugh always when we understand why something works like it works, right? The cool thing about Cudium that we have installed here, right? Is that when you are jumping between many languages like I do, for example, and I am like, How should I do it? Okay, that's how it done. So this is pretty cool, as you can see, react is very cool also because, well, it reacts to the state of our application to entire state of all values that are observed. We do not need to now think like, Hey, so if I make the button disabled, I need to also remove disabled when we have enough money. I need to then access specific element when we have this money, and I need to repeat it for this button for this button for this button, blah blah blah h, right? This just takes so much time and thinking and following so many variables in even small app like that. But the bigger the app, the cooler react becomes, right? I know that there was some, you know, you had to work a bit to understand some things here. But after you understand them, it's going to speed up your web development application. Have a good day. 97. Installing lucide-react - lets apply icons to our game: Hello, my friend today, I'm going to show you how to install Lucid. What is it? Lucid is just a package for react or not only react, you can use views felt and so on. That has got lots of icons. It is for node JS, so it means that you can use it and install using package manager for Node JS, right? How do we do it? Well, for example, when we go and it, we are using Rag, right? As you can see, it says we need to type NPM install used react, that's all. And now we can use any icon from here. And these icons are super. I'm going to tell you now soon why. But for install, NPM, and I'm not going to type Install. I'm going to type only I, so I'm going to show you a shortcut so you don't lose your time. And the bumble, let's wait. So after it's installed, right, all you need to go is go up here, and type something like import, then you need to type curly brackets, o? And all you need to do is type what icon you want. So when we go to the main page, for example, I want coins. Look, I found coins, that's so cool. And if I want to use them, I need to type here what coins right? And just import them from not at feather. But from why didn't work, maybe because M it's because it was not installed yet when I was writing. So, I imported it, but I haven't used it. Now here you can see how to use it. So all you need to do is go here and do something like that. Okay, I need an icon here, and I also need an icon ware next to the mine gold, right? That's cool. So I need also Pix. So let's go to the top. Let's go to the main site, and let's say I want pick x. Oh, so I want this guy. What do I need to do? I need to go here, laptop, type Pi. And as you can see the good thing that I have even what suggestions. And now if I want to have PAX here, what do I need to do? Open this and type Pax. Okay, so now let's repeat this where in our button, right? And well, maybe let's see how it works because we haven't seen it. Look, we have icons. That's cool, right? Using this is so simple. And the cool thing is that Vt at the end, is going to just optimize everything. You just need to care what's going on here. Just use them. And what's even cooler is that when you start using them and because the names are so self descriptive, I can just type. Okay, I want CPU for autocliker. And all I need to do now is go here, right, and open this and type CPUs. Way this way, right? And I have CPU now, and I also go up with CPU here. And now, that's not very good right now because, well, they are not the size of what off your, for example, font size, right? So we're going to change it in future. I will show you how to apply using CSS values to it, ok. But before that, notice that we have guide here. This guide, when you go to menu and go to sizing says that you can change the size using something like props, right? So I can do something like that and just change this size, just to see, for example, 42, two, and as you can see, it's bigger, right? And when you have one icon, two icons or maybe that's a good idea also if you don't care about, but the problem is that we can change later, for example, the size of our phones. This might look good. So I think that you should always apply things like that to make it as you can see dynamic. And it says that you can use EMs for that. Why? It's Because all these things here are really SFU Gs, right? So it is scalable vector graphics. And it means that well, you can see I can even change the color. That's very cool. Look, I can do something like that. Color, right? And yeah, I can type green. For example, and when I come back here, oh, tear. Tear? It's green. That sounds nice, right? That you can do all this stuff from here. But remember, you can also apply just classes to this. And because you know that it is Spa Gee, right, you can apply like sts on this component because they will be later SPaGes I will show you how to do it in the next lecture. 98. How to apply CSS to component - className: Hello, my friend. So how do we apply CSS to our components HTML tax? Well, firstly, we are not going to do it here from up CSS because this CSS should affect what? Everything on your website, right? We should have component CSS. So when I create here pi, I'm going to call it the same a code minor and CSS. It has also upper cases it just suggests, if I want to edit code, I'm here. If I want to edit CSS, I am here. You might be like, now, Oh my God, this is going to be slow, going to have 30 components and then we're going to have 30 CSS being loaded later. I think is going to be optimized and put into one single CSS later. Also for JavaScripts. It's because Vt at the end, when we're going to publish our application, it's going to just change optimize everything. You just don't need to worry about. So yeah, this is better for you because now you don't have a very big CSS where everything is next to each other and later you just don't remember to put what? Complete chaos, at least it was for me. And here you just need to now import it like this, and I can use my CSS. And now, remember this course is what? It is not about CSS. I'm just going to put CSS here and I'm going to tell you now how to use it here because this is a bit different, so do not close the video. Notice that we have here classes, Gt kicker, stats, and buttons, right? And we need to now apply them to here, right? But how do we do? Well, the first section is called Cold Clicker. So I think we should apply to our entire, as you can see app. And notice that, well, I love codim because it says that I should use class name here instead of what? Class. When I do it this way and when I go to our app, you can see something is not working. When I use class name, it's going to work. Well, we haven't changed mark because we changed just phone size so we didn't see. Go see here based phone size just change. But you need to use class name instead of class because class is a keyword research for Javascript. Remember that you are writing here in JA six and later, if it was transpling it to react and it would see class, it would think that it is a class in JavaScript. Note that it's not like something that is an attribute of HTML, right? That's why they invented that class name is really an attribute. And as you can see now, we need to apply it what. Also here, let's do something like that. So let's create a div and let's apply as name stats. And now we also need to apply it for what? For our buttons. So let's do something like that. And now they all look pretty good. They are always the same size and one, blah blah blah. But the most important thing is that because these are SPO Gs, we can say, Hey, I want to have these icons a bit bigger, 1.5, 1.5, right? Okay. You know what, I want to have also color, which is going to be, for example, red, they are going to be red. So if you want to now apply CSS for your component. You just jump here. Okay, I'm going to change how it looks like. And the cool thing is also notice that before when everything was in a single CSS, right? I was like, Where did I edit my? Like, I don't know, element that was on site on this subside or something like that. It was like crazy. This for me. I didn't know if you had created big apps, but in old times, this was just total chaos, okay. Now, you're like, Okay, I'm working on gold mine. I think that I should change something regarding this pattern. Okay, so I'm just jumping here. And to be honest, this is just one of the way to apply CSS in react. A is also tailwind, which allows you to style everything in line. This is also a good approach because there are pre determined ways of doing it. But it's really up to you what you're going to use. It's not like you have to use tailwind. You don't need to learn. This way, it's also pretty okay, right? It doesn't give you so much flexibility sometimes, but we'll talk about it later. However, you can apply, like component CSS like this, and it's going to work, okay? If you have any questions, as always, feel free to ask. 99. Installing Frame Motion in React - let's bring animation to our project!: Hello, today, we're going to install Framer motion, which is an open source motion library for react made by framer, and this allows you to create animation like instantly, you just attach motion before the name of tag and then you type what kind of property should be animated. This is also super cool because, well, I know that you can use CSS to animate, right? But using CSS to animate and also animate when the state is changing is just a bit hard, okay? You would need to, like, for the changes using, for example, use effect and then apply the changes of CSS when the change happens in use effect. That's hard to use. Also this library is really, really cool because well, there's so many cool animations that making manual would be very hard. You can use them instantly. Also, I recommend the exp, Library, if you are interested if there are any others. So how do we install it NPM, I and framer motion. Okay? So we just type this and we wait a second, and framer motion is going to be installed. How do we import it? So here, as you can see, it says that we need to just import something like that at the top of our page, right? So let's just import it, and now we can work with it, but we're going to do it in the next lecture. 100. Let's add simple animation using Frame Motion to our app: Hello, my friend. So how do we use motion? Well, we can apply it to an attack, right? So if I want to apply it to entire paragraph, why, no? No. I just need to type this, and I've just applied it. But the problem is that I didn't say what should be animated. So, well, I have suggestions. We need to start with initial state and what we want to animate. And why is it important? Not this that if we do not set initial state, right? We we do something like that, what do you have to animate? Nothing because, well, the opacity at the start is one. So animation happens in motion when opacity is lower than one, right? And when I said it initial state to zero, so when our page is loaded, then when I refresh the page, as you can see, it changes, and that's exactly what we wanted. But we also wanted that when we mingled or upgrade Click Power or auto click, you wanted also to well, make this animation because we want it to happen because gold is changing, right? But how do we look at the state here from gold? In order to do it, all you need to do is type here key and then type here the name of the state you want to observe. In our case, it's gold, as you can see the animation works fine. Pretty fun, isn't it? So if I want to repeat it for other guys, all I need to do is attach the motion to all of them, right? But I think that we shouldn't apply it to entire thing here. We should apply only to the value here. But if you want to apply motion, we need to have some kind of tag, right? So I propose to make spun, which is just something that is neutral, and attached to it, motion. So motion, that's spun. Here we're going to remove it, right, and we're going to apply this in here, right? That way. Okay. So maybe let's do this here, like this and maybe let's make it like this so we can clearly see what's going on, right? So, I think that's better now. Something like that. Yeah, I love it. So now what we need to do is go too. Click Power. All right. And just replace it. But if we go to replace it, we also need to replace it here. Click Power, click Power, bum, and also if you want to apply it to auto clicker, we need to make Enter, maybe not here. Maybe here. Yeah, yeah. Let's follow the same rule. So I did it this way this way. And now let's copy this here like this, right? Mm hm here auto clickers. Anti auto clickers, right? And as you can see, now it's cool, because the animation happens on all states when that states are changed, right? Well, the animation is very simple now, of course. You can make it better. But how to make it better and also how to make it customizable because right now, if we decide to change something, for example, here, we also need to change it here and then here, that's not a good solution, right? But always start from something simple and go to something a bit harder. 101. ...animationProps - let's use object destructurization to improve animation work: Our animation right now is pretty simple. Let's improve it. Let's say that I want to also make another parameter being changed. So let's say that the initial value of Y is going to be, for example, let's say, -20, like it said here, maybe minus ten. So you can see now the initial value is minus ten, but we didn't change it using animate, so we need to change it back to, for example, zero, right? Now we have animation like the value is coming from top to bottom. The problem that you probably can see already is that now I need to apply this here and here. No, no, no, no, no, no, I don't like the solution like this at all, right? So how do we solve it? The fastest way to solve it. If you don't plan to reuse your mini component because this is mini component right now in other places, I mean, your entire app, right, is to just create an object here that will store all properties. So constant animated properties, something like that, right? Now when I open it, I want to have inside of it, ah, exactly this, this and this. And because of that solution now, I can apply them here very fast. But the question is, how do I like, copy this to this place? And in order to do it, you need to type. Let's see if AI will go to help us. Not this time. So we need to type, it helps. But as you can see, we have an error. The error is here because if you want to access anything from JavaScript, well, we need to enter JavaScript first, this is the way. You might be wondering now what is that free dots here. This thing is called destructorization. It means that I am going to copy this to this place. Simply saying, this is going to first look better, right and the second thing is that now, what can we do? We can apply the changes to all of them at once. So if I say, Hey, I want to have all s Y starting at 20, right? And I want to animate all of them to zero. So as you can see, all of them are now animated like this. So applying it to every Tag is now simple, but we've got a problem. What kind of Let's say that you are like, You know what? Auto clickers should be different. I want to, like, come from top to bottom. Ops. So how do we solve it now? And the cool thing about well, HTML is that when you type first key, then we have what initial, then we have animate, right? We have all animated properties here. We can replace what was before. Okay? Remember, replace what was before by writing something like initial, right? Equals, and then you can say, You know what? The initial state of Y is going to be, for example, -30, right? And, well, Color. As you can see, initial state of auto clicker is now like this, but we've got another problem. What kind of problem ARC all the time problems. The problem is that the opacity is not zero at the start, right? So, to be honest, we are like we replace entire initial state, right, with just this value. And the cool thing is that we can inside of our initial, like in this place here, firstly, do destructorization, okay? So like, Hey, I want to act as animated properties and the initial state only. And this means that I'm typing here like Opacity, zero Y 20. But because I typed it again, the Y value to -30, this value of Y is like overriding what is before, right? And now as you can see, opacity is also applied to autocl 102. lodash.merge package - how to merge props on practical example: Hello, my friends. They will practice a bit, but also learn a new thing regarding very interesting package that will allow us to merge properties like the one here, like instantly. And this will be very, very useful. Sony we see C Y. So I want to replace this here by something that will be like say animated value. And when I say value, I want this thing to be animated and also show the value. So I want to show this state from here, right? So my component like this is going to replace the work that is done here. How do we do such stuff? For the sake of making this easier, we're going to put everything in one file just for a moment, okay? So let's create the function, and we're going to call it animated value, right? That's how we call components. And afterwards, the suggestion was super cool because we need to, like, get the value from here, which is the state, right? We need to observe it. So yeah, that's great. I like that. Afterwards, we need to return something, right? So whatever is going to be returned here, it is the thing that is going to show. So I propose make it simple for now to see if it works, always debug instantly, okay? So as you can see, the suggestion is pretty cool because now, when we use animated value, as you can see, the animation, of course, is not working, right? But, hey, the cool thing is that now we can show the value by just typing our own type of component here. We just wrapped the gold this way, right? And it is inside spun right now, which is also motion. We don't need to know about it even, right, that the motion is there. And that's cool. So now we need to animate it. How do we animate it? Well, I propose to do it this way. But there is animation like zero, ten, ten. Let's use it to see how it works. You can see it works like this. So it goes down, then to ten pixels of y and B. That's also a cool way to animate, that's why I didn't stop it. But let's use for a second this constant from here. Let's take it for a second here. I'm going to use just the animated properties inside. Because why not? Like this. Right? And as you can see, yeah, the animation was once done, but we are not observing the value now, right? We are not observing the gold. So in order to observe it, right? What do we need to do? We need to set the key to what to value, but using the JavaScript syntax. Remember, not. GTML. Now when we are mining, the animation is working fine, right? So the cool thing is now that we can just replace all of these things here pretty easy. All we need to do is it like this, but do not stop the lecture because we will show problems so that I want to solve. So click Power Auto clickers. And now, as you can see, yeah, it's working for everybody. And now I could at another thing pretty easy, right? But this is default behavior, right? Hmm hmm hmm. But what if I want to have some custom properties? How do we do it now? Okay. So if we want to have custom properties, we need to allow them, right? So maybe let's say something like, let's create another guy, and we're gonna call it custom animated properties, something like that, right? And by default, they are set to nothing. So we're going to do something like that. Mm. So if we don't send anything here, this is going to look like this, right? So, to be honest, it's going to be like, Okay, we didn't send anything, so the animation is just going to be the same. Maybe let's check how it works. So we need to now do like, okay, animated properties, and let's say that we have custom properties, right? Custom animation properties. And now I'm going to send something like, Hey, I want to start from -40. And in order to send it now, when we are in the animated value, we got ppb suggestion. We will get it because I don't, that's here. Custom animated properties. And yeah, I want to send custom animated properties. I shouldn't call it the same, right? Because this causes Mm hmm. Mm. Maybe here we call it props. Of course, this is going to work, because they are in different scopes, but I just didn't want to call it same. But let's see if it works. As you can see, when you are mining gold, gold is coming from top and other things are coming from the bottom, right? So yeah, it works properly now. But we've got another problem. The problem about that we had to specify opacity here, right? Because if you don't specify opacity, like, for example, in both places, right? You can see that thing has got always opacity set to one, and this is not cool. B I want to, like, get all the default behavior, but on the change, for example, as you can see, y value, right? You can now change only, for example, initial property and it's going to work. Because when we put first here animated properties, is going to be initial, then animate and then we're going to put what? We're going to put here, initial. Initial is going to replace entirely this This is the problem because opacity is going to be replaced. If you don't want to have behavior like this, it would be super hard to implement it because we need to do what we did before. We will need to like access custom animation properties that initial, I mean, animated properties, initial and then send their custom animation properties initial and do it for every property animated properties. So imagine if you had 100 of them, doing it manually would be stupid, right? For two of them, okay, maybe I could do it, but if I add another property to animation, I would need to do it here again. So this is not the way to do such things, right? And the solution for it is installing something what is called dash. So I'm going to type NPM I dash. Okay. And after you install Loda, it is going to give you something what is called Marge. Give me March, please. Why from Deep March. Not from Beep Merge. I wanted it from Ludach. So from as far as I remember, it was like this low dash dat merge. But I might be wrong, who knows? Remove import, I don't need to remove Import because it has been imported but never used. Okay, so this is just a function that comes from this place, right? And now, I can do something like that. Constant merged properties, for example, let's call it. And all we need to do is just merge them like this, right? And instead of both of them showing here, we're going to do like this. So this is just merging, connecting. The default properties with the one that we send it to the animated value. And it is going to do it deeply. What does it mean that it's going to do it deeply? That when we do not provide something, like, for example, we didn't provide opa siting, right? We didn't provide, you know, but we didn't need to provide anime. But if there were many, many, many more key values, all of them would be merge deeply. You don't need to now care about, you know, if you had another property here, for example, what needs to happen when the exit happens and so on, then everything is going to be merged automatically. You don't need to worry about anything. I think that also the code like this is going to look easier to read and use. 103. Creating functional component - let's refactor our code: Hello, my friend. Today, we are going to try to refactor our code because this got a bit big. And also, I would like to notice that something like that, animated value, really, this could be used in different places of your application, right, because this is something like universal, right? It could be applied to any really component that has a value that should be animated, right? With some default behavior, and the default behavior can be even changed. So how do we do it? Firstly, we need to create a new component, right? So new file, and let's call it animated value JS six, JA six. But notice one thing. There is a problem. We have a component that really is a component that that is like a functional component. It is not a component that should be that is showing something. It is really some kind of function that works on the state for values. And that's why I'm going to create a new folder that I called functional, which is just going to suggest that this component is different. Okay. So basic components are here, right? But they are responsible for user interface, right? But functional component, it's going to be deeper. This way, when you decide to, I need to use one of my functional components, you are going to find it easy, right? Oh, that's here. So that's why we're going to do it like this. And now we need to just take this, right? To this place. And also, well, we need to now import this to here, right? Because without these imports, it's not going to work. And what we also need to do, we need to export it. And after exporting it, we need to also import it in proper place. So import animated value from functional animated value. Now, as you can see, it works the same. But we moved this to another place, right? So we can now after I finish my work with animation, I forget about it. I'm just closing this file. But if I want to edit something, I can go back to it, right? And that's a good way of programming, right? We now can focus on the project here, right? And the coolest thing about this is because it is now, as I said, the functional folder, is that if I wanted to have animated value in totally any other component, you just going to import this and use it. And because we used what? We use custom animation probes, right? We implemented something like that. We are allowed to change how this animation for the specific value should look like if we don't like the default behavior. That's only the lesson. Thank you very much. 104. util folder with animations.jsx settings for entire app: Hello, my friend. We created a single animation, and we might like it or not. But let's say that we are like, You know what? This animation is so cool. I want to reuse it, not only in animated value component. I want to use it in my entire application. So putting animation here is not always a good idea, right? Because later, you might find out that this should be used everywhere. So how do we change it? When you go to the source folder, you can create a new folder that you call Utils, like here. I've created it already. So inside of it, you can create a new file and call it, for example, Animations JSX, okay? And notice I didn't use uppercases here because this is just utility. Is some kind of tool that you can reuse in your application. So this folder is like for things that should be that can be used in any component you want. Now I paste here a few animations that I created for you, and the cool thing is that now you can reuse them anywhere you want, right? So it means that now when we go to our gold miner, right, and we go, for example, to animated volume, we can do something like, Hey, let's just remove this, right? And let's use the animation from here. So, for example, fading up. But how do we do it? We need to first import it. I have a very cool. As you can see, here is something like auto import, and path. And when you install it, what will happen? When you want to import something. So for example, let's say, I want to import this, I am like that I can drag and drop hold shift and do it like this. That's so cool. I really love it. But I will do something fun here. I will do something like I want to import all animations and do something like a animations. It means that now I have animations objects that can access all of them. What does it mean? Look, look, look, look. That's so powerful. Animations dad Mm. Da da dad's cool, right? I can, like, access all of them from here. Awesome. And what does it mean? It means that I can do something like, for example, let's say, the default animation type, right? We can create another prop, and the prop is going to be set to by default, for example, let's say, fading up. Let's say it's going to be the default behavior. And now I can do something like from animations, I want to get animation type when I'm merging, right? And this is an app. Let's see. When we go here, as you can see, animations are working properly, so it's good. But the good thing is that I'm like, you know what? I would like to use different animation. Let's say that I want bombs for this guy. Oh, okay, you can see, now it's bombs in here. Here I can use different one. I can still use custom animation props, so everything is working fine. But now I can choose one of the animation that I have predefined. But this is not the end of our story for this lecture. So do not stop. Look, because we have it in external file and we can use it anywhere we want. Notice that we have here animations like universal man, for example, scale on hover. So let's say that I'm like, You know what? In this component, I really would like to add animation like this to my button. Let's say to this button ill, right, or maybe to this button, whatever, up to you. So how would I add a new animation like? Firstly, I need to import motion, right, because it's not imported here. So let's import our motion, right? And afterwards, we need to also import our utility here. So let's do it like this. And we need to say which Animation we want. So in our case, we want scale on hover, right? So we don't import everything because we don't need everything right now. And now look how powerful thing I will show you now. When I type here motion, right, this thing can have what? Our animations now, right, because motion is applied to button. But if you want to now apply this, you need to do look at this. **** and the suggestion. Look Mm. Cool animation, right? It's calling when I move my mouse over, and when I'm tapping, it's going back. So powerful, right? You can use now all these animation everywhere in your project, in any component you want. That's cool, right? It's not like before when we like, you know, created, for example, a cool animation above animated value, right? Now, we have a default kind of action, right? We can change it if somebody sends here a value that is not default, right? And everybody is happy. That's so amazing, isn't it? 105. AnimatePresence - how to make 'exit' animation: Hello, my friend. Today, we are going to talk about super interesting thing about exit animations. Because notice that now, animation works like that. The new guy is appearing with zero Y 20. So, for example, 104 appeared like here, and it like moved to here. But what happened with the old state? Like, what happened now with 104? What happened with 105? It just disappeared, right? It was removed instantly. It's like it was unmounted. The component is responsible for this specific place was unmounted, right? And the new one came, it was mounted in, and new animation happened, right? So the problem is, how do we, like, Keep old component for the exit animation. Pretty interesting and hard to manage normally, but because you have framer motion, it's not going to be so hard. Firstly, we need to put here something what is called exit property, W just says, what should happen with the old state. So what should happen with 110 now when 111 is coming? T you can see, it's not working. Whatever I put here, as you can see, it's just the same now, right? Okay. Why? Because this property is going to work on when something like a parent of motion is going to observe what's going on with the component that is being removed, right? Because, you know, when that motion you can't, like, know when the animation is going to finish of something that is executing the animation and is destroying itself, right? It couldn't do both these things at once. So you need a parent that does it. So if you want to keep the presence of animation so the presence of the old state, you need to apply here something what is called animated presence, okay? And you need to, of course, import it. So animate presence, and now what will happen. As you can see, funny thing. The default mode is the sync mode, which is rarely used, but it's like it's not only waiting, but it's syncing with the old state, right? But this mode is rarely used. The most time people use here, wait, for example. So it's like waiting. Is that it's waiting for the exit animation to happen before initial and animate happen again. So you can see. Hm. So nice, isn't it? And there is one more which is pop. What's it called? What I say, Popa layout. Yeah, like this. As you can see, this one is like popping. What? It's like popping in. And this one would work better if we did something like that, probably. As you can see, it's like, as you can see, 747780. As you can see, it's coming from top, right? That's as. Yeah. So we made like some kind of clocks from up to bottom. And remember, if you want to, like, work with the exit animation, you need to use animated presence, which we like observe what's the exit of the state that is like being unmounted, right? So when it detects that this part of your app is going to be unmounted. Before that, it's going to apply the exit animation. And afterward, this thing is going to be destroyed, too, right? Because this guy knows when this is going to destroy is going to be destroyed, right? Because he can be till the end of the destruction, right? But if you are the object that is being destructor, you don't know exactly the last second of that destroyment because, well, you don't know how long the animation should be and when you should invoke, like, next one, right? You need to keep the presence of animation. That's why it's called presence. That's audience lesson. Thank you very much. 106. CSS modules - lets apply scope to our CSS: Hello, my friend. Today we're going to talk about very important topic which is called CSS modules because, well, for every component, I told you that we need to create a CSS file, right? And this solution will work most time, but there is a problem. The first thing is that, for example, when we access it button, what if we want to access button the same way in another component? Hmm. It's like which one will be more important in this situation, right? So we need to, like, scope. You need to, like, apply button that is in gold minus CSS only to gold minus JSix component, right? And also notice that when we are using classes, like for example, buttons, to be honest, this class is self descriptive and normally in CSS, it was also a problem when we didn't use react. When you had different buttons, different types of them, you had to, like, each time invent some kind of name here, right? Buttons navigation buttons, blah, blah, la, la, right? You need to specify which type of buttons are here. And this is also a problem, right? And you can solve all of these problems by just doing something like that. Gold minor, right? You type here something like module dot CSS. Okay? But this is working instantly because we're working with vite that has got everything print out. Remember about it. And now we also need to apply it, but how do we apply it now? So now when we are importing gold minor, we need to also type your module, right? But also before that, we need to type the name, which will allow us to access all the, for example, classes here. We do that? Well, take, for example, sis from. Most times people call it sis. You can call it CSS if you want a shortcut. Well, this convention. Most people do it this way so just call it like this. Now you can use these styles, for example, in here. But we are not accessing now them directly here because notice that our site is, well, working, but we are not seeing changes that were made by goal kicker stats class, and buttons from here. So if you want to access them now, you need to go into JavaScript realm, right, and type, size, that, and then you need to choose Gold clicker. As you can see, gold clicker instantly change into something like that. It's because we are using here, what? This hyphen here, right? For connection, we are using the pause. And you are not able to do something like Sis gold, clicker, okay? Because this is not a syntax in JavaScript. But you can access, well, property of object also using the array syntax, right? So, yeah, it's working. Also notice that I got some kind of auto completion on because I'm using CSS modulus extension, okay? And that's why also it translated it into this. But you should know that it's better to use naming convention like this for CSS modules. Not like this. It's because now when you access it, as you can see, when you do something like that, the first thing is that you have out autosuggestion. When I hold control, I can jump to the CSS that I want to edit, right? And well, this is going to check if we made error or not, right? So better to use here camel case in modules. Remember it. Okay, so how do we apply it to others? Instead of this, we type stays, that, and now we type here stats, like this. And instead of this, we jump into Javascript realm, and we apply now patterns. Like this. And our application is working the same, but this is pretty fun. Notice the name of this class. It has got underscore, gold clicker, and some kind of, you know, volume here. And this makes, like your class unique within the scope now, right? And it also means that you don't need to worry anymore when you are creating CSS for another component, right? Because you can reuse all these names that are here and you don't need to worry about collisions with names, right? Because that CSS module is going to apply only to this component, always. Pretty cool solution, isn't it? That's the lesson. Thank you very much. 107. Create ThemeToggleButon: Hello, my friend. Today, I will show you how to create a button like this that when you click on it, you're going to change the theme of your application from light to dark, right? So right now, as you can see, we have light team, and when I click on it, I want to change to dark. So I created a component Team toggle button J six already. So we have a function. Remember about export. We need to also input the module CSS, right? So we have another separate place for CSS. And also notice that in a JS six, I imported the component and put it here. And remember, because there are components, I can reuse them, I can use them as many times as I want in many places. That's cool because you can, for example, put now this button at the upper right corner, for example, up on the left bottom corner, whatever you want, right in the footer, in many places, you don't need to remake all the stuff. So here we have the module that we need to, like, set up. So we have a button, right, returned, and we need to set up the styles for it. So we need to type, as you can see, the suggestion is pretty okay. And now at the start, we have got something like this. So it looks better, right? It's in the middle. There are basic slides for them. And now we want to, like, change the state of our app, right? We want to make the team from light to dark. And how do we do such thing? So I created in the index CSS, okay? So in the global size, something like default values for the light them. You can use in CSS varibus, right? So these are for the light them, the default one, right? And after that, I created also an attribute, okay, that is like data them, dark, okay? So here, are these varibus be applied to any HTML element that has got what attribute data team, right? If it doesn't have this, then the variable that is going to be applied is what these values, right? So all we need to do is somehow apply all these attributes to our entire webpage. But fortunately, we do not need to attach it to every element, right. All we need to do is when you go here is to apply it here, right? Because if you apply the attribute here, all children will inherit it, right? So that's all we need to do. And we need to do it from this place. And now we have a problem, like what kind of problem? Well, how do we access the document element HTML, right? Because we are in react, right, how do we access something from out of the scope of our component? So do you remember when we were talking about use effect? Before we used it mainly for what? For set interval, right? But use effect is also something that can be used to invoke functions that that should be involved that can access document object model like normally you would do normally, right? And things like that happens, as you can see, you want to do it here. But how? Well, you need to just access document, right, then document element. And yeah, that's a good idea. We change the attribute of document element, which is HTML, right? Datatm to DAG. So attached to HTML attribute theta team with the value dark. And because of that, CSS is cool, because when it detects attributes like this, it's going to change variables, right? So these variables to this, right? So you can specify now here how your elements should behave when the change happens. But you might be wondering now, why did it happen instantly? Well, first, when I save the file, t is detecting the save and updating everything. But still, why? You have got here what? A component, right? And when this component is going to be created. So in up J. So here, this is going to be returned, when we go back to J use effect is going to be executed. It is like, I would say, constructor. Yeah, it's very similar, but of course, it's not a constructor, but yeah, it's something that's going to happen, okay? When you don't specify all the things that we talked about before, it's going to happen every time when the component is going to be mounted. So every time it's going to be rendered. So this is not the thing that we want this time, right? We want to, like, make it work only when the team is changed, right? So when the state of team is changed. So it means that we need to use the state. Okay? So maybe let's import state here, right? And I propose to create what? Yeah, something like that. So we are making a hook, so we are connecting set team to team, right? And the default value is going to be light or dark. It's up to you, right? And we want to set the attribute here now, not too dark, like, you know, that's not good. We want to set it to the value that is in the state, right? Okay, that's cool. But when I click on it, I need to, like, change the state of them, right? Okay, so how do we change the state of theme? We need to use OnClick when somebody is clicking on it, right? And the suggestion is very good because we need to invoke set them, right? Let's say that we're going to remove it for a second and change it only to dark, right? And when we invoke set them, because it is hooked to team when it's invoked, the theme is going to change to dark. And as you can see, it changed, right? Okay. And well, we can change on the one, right? That's why we need this thing. This thing is like a conditional statement from JavaScript that checks this thing. So if them if the state is currently light, then change it to dark. Otherwise, change it to light, right? And the thing that is going to be returned is dark or light depending on what was before. And that's cool because it's just in one line now going to change it from one to another, right? And now the next thing is that we should a bit improve it because right now, as I said, this is going to be invoked every time the Team toggle button is going to be shown on your application. So I think that we should specify when it should be like executed. It should be executed only when the team state is changed. So it is like some kind of optimization in this case, okay? Okay, so this is what we want, right? And now, you might be wondering how it works, right? B, wow, so many things is happening that I did behind the scene. Well, this is react, right? But I will explain at what happened behind the scene. Anyway, because it's pretty interesting. So as I said, we have background color that is default one. And when we do something like that. So when we attach to HTML, right? So when we attach to this thing here, right, when we attach to it, we did it here. They taught them attribute, right? Then and it's set to what? Dark not light. Then every element is going to inherit this attribute. And whenever you use these variables, right, in whatever place. Notice that in Team toggle button, I did something like that. Background color, and I said it here to Var button. So it's like it's going to change here, this variable from one to another when the attribute comes or not. When I go to, for example, good Minor, I also did it here. Notice background and button text, right? And if you don't want to change something, right, if you want to keep the value that should be here, right, you then just type here this value, right? So if you don't want something to change when the team is changing, then don't type. But there is also one more thing that sometimes you want to customize the change. So if you want to customize, for example, the toggle button because as you see, I wanted what? I wanted to change the color also to, for example, blue, not white this time. Then you need to access firstly the attribute of dark team, right, that is set to dark. So if the togul button has this attribute, then change the background color to something like that. Of course, you can do whatever you want here. So it's up to you, and this is the behavior that is going to happen on in this situation. 108. Conditional text - Dark to Light, Light to Dark: Hello, my now we have dark slash light, but I would like to change the text from line to dark when the team is changing, right? So we suggest what this button is going to do. And this is, so simple to do because remember, we are using JSX so we don't need to escape from HTML word to JAVA script. It's like we are already there, but we need to only do something like that, right? So we only need to use curly brackets and you are in the JavaScript, and we can make something like that, for example. But, well, this is not exactly what we wanted, right, because it's just changing the order we are going to put here something like change to dark or change to light, right? This way. As you can see now it's light, dark, cool. And it works because we are checking for the state, right? And if the state is equal to light. So when it's like this, then we type here dark. If not, we type here light so often that we are doing all these things just, you know, normally, escaping to Javascript world is not so easy when you are in HTML. You need to do many things, access properties. Here, don't care. The state changed and when the state is changed, everything is going to be change accordingly. Powerful. 109. [EXERCISE] Button from external package - change theme with svg animation: Head on, my friend. Try to do it as an exercise. Go to the size toggles dot Dev and try to instead of using this button, implement one of the collection that is available for you for free on this website. So the cool thing about Rag, as I said before, is that there are many collections of things like that. This is very, like specific collection that I found on Internet, right? So it's not like it has got many different solutions. This is just a simple solution for this specific problem, right? But let's start from something simple like that. So let's say that I want to have a toggle button like this. So how would you approach? Most time, the sites like this have something it's called documentation. So when you go to documentation, as you can see, it has got for HTML and react, right? Okay, so this is the thing that we need to use. Firstly, we need to install our package, and we have got the package manager that is called NPM, right, for our node JS. So all you need to go is go to the terminal and type something like that and let it play. Rn is just different package manager. We are not using it, so we are using this one. Okay. Afterwards, it says that we need to import CSS into AJs or something else, right? And then we need to import the component by the name and use it, right? Okay, so when we go to the tocals, notice that let's say that, Hey, I like this one, right? It goes in from the moon to sun. Okay, that's cool. Yeah, that's the thing that I like. So I'm not using simple HTML. Yes, you can also, but I am using Ra. So it means that, as you can see, we have got here copy paste for the importing laptop of our page. Our package has been installed, and now we can just import all these things here, right? So all we need to do is import it into our project with the CSS that that was just installed when we did this, right? And the name of the component that we want to use. Okay. So now, yeah, that's cool. I try to set something like this, but this is not what we want. We want to set firstly the button, okay? And now, it says that we should specify also duration of animation. So let's say that we want to specify let's say the default value. But the problem is that we don't see our component. And why is that so it's hiding here. It's because default color is white, and it means that we need to change the style. But how do we change the style of it? When you go to the documentation, you will see that we've got here something like styling. So to change color of Togo, simply change the CSS color property of the component. Oh, so we need to just change that color property. Okay, so all we need to do is firstly, change the style. So style equals. And now we enter the JavaScript realm, right? And then, again, we open curve the brackets to enter what to enter the CSS, right, because we want to return CSS here. And now we need to set color, right? So when I change the color to, for example, red, what's going to happen as you can see, it's red now, right? And as you can see, it's working already, right? It's changing the state, but it's not working like we want because it's not invoking things that we have here, right? Okay, so let's see what do they say? If you want to handle the state, you need to implement something like this. Uh huh. Okay. So I need to, like, use the set function here, right, when the togo is done. Okay, so let's implement it. So when we go into togon, right, we want to what? Let's see if we're going to get hints? Yes, we got it. But is it proper? Not exactly, because we want to change team, not like this. Remember, we can't change the state directly. We want to change it using what? The function set team. So AI can be wrong. Okay. And now when we toggle and set our team, it's not working. Why is that so? It's because probably I made a mistake here? Yeah, of course, we need to, of course, use an arrow function. So as you can see, well, yeah, this syntax here is it's hard to get, right? You will make mistakes like this, and even I when I'm making lots of code in many different places, in many different languages, I also make mistakes like that, but it's how fast you can spot them, right? With the experience comes, how fast you spot things like that. And as you can see, we had to use the arrow function, right, because we can't invoke here a function, right? But we are sending a function to be invoked by toggle property, right? Okay. So when I use it, as you can see, now it's cool because it's changing the state of of them. Okay, that's exactly what we wanted, right? And now, we need to also change the state here, right? So it changes the when we go here, notice that here is something like toggled. So when false changes to true or through to false, this is going to be toggled or untoggled. So it means that it's going to change from moon to sun. Okay, this is a problem right now because we already have a state here, right? So yeah, it was indifferent, for example, component, but I don't want to put it in different component right now because, well, I don't want to lose your precious time right now, okay? You can do it on your own later. But we can do something like the suggested here. So we can, check the team, so if the state is equal to light, right, then return true. If not, it's going to return fall, so we really achieve what we wanted. Cool, right? I think we should be using the background color for the for this button because really classic is a button, like for the variable that is used for background color, part of your entire website, right? Not for background of the button because as you can see, it's not working, I think, as we want, right? So how do we do such thing? Can we access here variables? Yes, of course. You see, if I said background color to blue, it's going to be always blue, right? But I want to use the variable. So how do we use it? We need to do something like that. Let's go into variable, right? And then yeah, the suggestion is button background, but we don't want to use button background. We want to use the background color this time. Why not? Now, as you can see, the button has always the color of our background, and because of that, the switch seems better, right? The next thing is, well, let's say that I want to change the size of it. So in order to change the size of it, we're going to change the font size. And well, yeah, I think that we could do it this way, but not with equal. So, for example, you know, 1.9, yeah. Something like that. It's bigger now, right? Okay. So we change the font size, we change the color, but I think the color red is bad. I think that it should depend on what? This should depend on the state of our team, right? So if our team is equal, too, yeah, the suggestion is bad in this time. So if it's equal to light, then I want to change the color to static color that I decide is going to be good now. So if we were in the light mode, we could say, like, Hey, click on the moon that is blue, right? But otherwise, you need to hit the yellow sun, right? So in dark mode, it's going to be yellow. Now as you can see, circle, right? Pretty awesome. And well, you could put it as, you know, different component, right? And for example, you could later, you know, use it in many places in your program. This program will be another program because this will be default behavior for the tem button that you like, right? Not the tem button that was created by them, right? Let's do this one. Thank you very much. 110. Seperate buttons and see what's happening with 'shared' state: Hello, my friend. These two buttons are doing the same thing, but they are in the same component. So it means when we are going to reuse them, they are going to be next to each other, and that's not how it should be done. But the problem is, what would happen if we decide to put them in another fight? That's right. So let's, for example, create another component. Let's call it classic Tug button, okay, like this. And, of course, if JSX, and now I say that we're going to, like, copy everything from here, so we don't need to rewrite everything, okay? Copy it here. Now, let's rename this into classic toggle button using F two shortcut, so it's going to, like, rename everything, right? And now in our classic toggle button, we are not going to use this part, right? We're just going to return this and we don't need this anymore, right? We don't need the classic one. And when we go to the team toggle button, it means that we can now remove the classic from here, right? And we can remove this part, right, because this is not needed anymore. So we've splitted them maybe. Let's see what's going to happen. When we put it into Ajax right because right now we have on this button, right? So let's say that we want to use also the classic toggle button, right? That one. As you can see, they are here, right? But there might seem a problem like do you see that? That when I hit dark and I hit this, somehow they didn't change the state appropriately. So it's because, well, we have here team, and also we have here team, right? Hm mm hmm. But that's different team, right? This is the state for this component. Well, they have the same name, but they are not shared together. But how do we solve something like that? I will show you now a solution that is shown probably in most courses, but in the next lecture, I will show you a better solution. Well, because thin toggle button and classic Togu button is our application, right? It means that yeah, we could do something like that. Right? So we're going to, like, put the state and the use effect in this place, right? Okay, so we all need to do now is to import these things, right? And now we need to somehow, like, scent team and set them to this guy's here, right? So how do we do such stuff? Well, we know how to, like, customize it with props, right? So it's nothing like, hard to do because all we need to do now is, like, say, Hey, you know what? I need to take these two things team and set them from somebody else, not within this place, right? We can now remove this. And we can remove this, and also here. Okay? We need to do it like that. And now we need to send them this. So it means that for Team, yeah, we need to do this and for this, we need to do this. And now, well, the state is here, right? And we send this state this place. Well, I've also made a simple mistake here, I type team without E, and this would cause a lot of problems. And now is what's going on. As you can see, they work properly because we just send them as props to classic and Tem toggle button. So everything is working fine. But why this solution is bad idea, right? Well, firstly, notice that how can we now use Team toggle button or Classic Togo button in another application? We need to memorize that in order to use them, we need to create something like that that we also need to memorize in the parent component. And then you need to do something like that. The one reason is, I think, should be enough. But let's say that you say, Hey, that's just for one application, working fine. Let's go. Okay, okay. Let's say that you're going to have many components that you need to share the state. So you will have then here lots of use states, lot usefft for example, and you're going to have chaos in the return here, right? Okay. That's bad, right? Second thing is the third thing is, well, testing becomes more challenging because with the state managing the application, testing individual components like, for example, Team tagle button or classic toggle button might require, well, mocking the state or using testing library and so on. And it adds lots of complexity. And to be honest, and your application is going to be total chaos when you're just going to do it this way, right? It's going to be hard to scale, it's going to be hard to reuse. And there is also a rule that the up component, right now is responsible for both rendering the UI and managing application state. And that's not how it should work because this violates the principle of separation of concerns, right? So what is this principle? UI components should focus only on rendering and user interaction. But state management should be handled by dedicated mechanism or components, okay? So you shouldn't, like, do such thing here. You will find mano tutorials that does something like that, but no, do not do it in this place. Okay? I will show you a better solution in the next lecture. Have a good day. 111. How to create Context Provider? - Let's create ThemeProvider: Hello, my friend, today, I will show you how to create context for your components because when you are sharing state, one of the way to share it is using something what is called context. How do we create something like that? Firstly, you need to create a new folder because if you are going to have more context, it's good idea to have them in separate folder. Then we're going to create a file that we're going to call team context. And this is JSX five. And inside of it, we need to create our context, and we create it by typing something like that, context and then create context. That's enough, but we need to import now to create context from act. And context. Oh, yeah, that's proper spelling. And now we can use the context in children. Where we're going to provide this context. This is very important because, well, right now when we go, for example, to Tem toggle button, we can import our thin context. So we can write something like import context, and it should be here from context, something like that. And now we can use the context, but the problem is that we need to first provide it, right? We need to say, what kind of context is going to be inside of it. And you provide it in the same file here, below by creating something with this team provider, okay? And in order to do it, you type, as you can see, Team provider, and you need to do something like open here, yes, we're going to get here pops and close it. For a second, that's just close it, and a very important thing is also that we need to export all these things, right, because otherwise, it's not going to work in other five, right? Like I tried to import it. Where did I import it in team toggle bottom, right? So before this wouldn't work, right? Okay, so let's go back to our team context. And this is a provider. You can see that there are children props here. Soon are we explaining what is it for, okay? The suggestion was pretty cool, so let's leave it. And the context that we want to send to them toggle button and classic Togo button is what? Is this, right? Because we don't want to keep it in the app. So we're going to remove it and put it here, right? So this are context. And because we removed it, we don't need any more something like this, right? Because this is not something that we need right now. And well, we can remove this part. And here we need to import use state and use effect, right? But maybe let's put it in one import like this. Okay. So we are moving forward with our application, right? Well, this is a team provider, and we need to now return something with it, right? Because this is very similar to component, right? But this time, the thing that you see here is pretty, as you can see, weird because when you are going to use the team provider, you're going to use it here in app, okay? So you need to, like, import, okay, the Team context. So the team provider, I mean, so team provider. And you need to apply it on things that you want this context to be available for. Okay? So we can, for example, provide it for our entire application, right? So we can do something like team provider, right? And now, this is like, where here, right? And the children is this, okay? So gold miner, Tim Turkle button, and classic Togu button are going to be passed here, okay? Okay. And we need to, like, provide them with the context. So think that is here, right? And in order to provide them with context, we're going to type something like the suggestion is here. I love this suggestion, to be honest, do not be like you are afraid to use AI especially like this because things like that are not done often, okay? You don't create every day context provider. But you need to just understand how it works, right? So we access team context, right? So this, and we say that the provider for it, so what we want to provide to all of our children, and we say that the value is going to be Team and set them, right? So this is the thing that should be available, that state should be available for all the children that I am providing the context for. The children I provided here, all these children we have now, the state like this available for them. Do you understand it now? When we go here, as you can see, it's still not working, it's because firstly, when we go here, as you can see, team is not defined, for example, you can see here it's not defined. But I said that the context is available here. Yeah, but to use it, you need to specify it, okay? So you need to say something like, Okay, you know what? The team and set them is going to come from something like context, from thin context. So import, and then we need to again, inpduce context, right? And we need to import thin context. Okay? And now when we have this classic Togo button here, we need to also do the same thing for our other button, like here, right? So we need this here, and we need to also import use context, right? Method. And we have an error here because you are using a leftover from the props from before. I didn't remove it. So yeah, now it's like this. Now, let's see if it's working. As you can see, now we are sharing the same state, right? Because we have provider for this state. So anything that is here is going to be available in children, right? But these children, if they want to use this context, they need to say it like, Hey, I want to use this context from the team context, and I want to set it up to the variables here, right, too, the state team and the set team function that can change this them. And now everything is just working fine, right? We just used the context that we provided in our application. I know that you might be now like, but before I just needed to put what? I needed to put the part from the context, right? So I just had to do this in app. The thing that you just showed me took you so much time to do. Firstly, we've just put logic state of our P 14 in one file. So we can update it from this place. We know where it is. Second thing is that our ats X is going to become simpler, right? Because we can clearly see here everything we do not need to pass props. But there is one more thing. If you had, for example, inside application, let's say, layout and inside layout, header and main content. And the main content would have, for example, article, and Article, for example, article. Then if you want to use the same props in the component that is, you know, deeply done, you need to resend that props again and again, this is horrible, right? We need to always remember about doing such thing. As you can see now when you are looking at this code, it's not like we need to remember about sending pros. We don't need to know how it works, right? We are just making team provider, and we say, Hey, everything inside of it is going to have access to this context if they are going to use it using the use context. And now, this is powerful, right? They share the same context now. And also, notice that when we go to the use context, it's not like we can now test the classic toggle button because without anything, right, like without all other childrens. So there are many advantages with the solution like this. And this solution for simple application like you have now is the most often used. But if you want to use state like a P, you should use something what is called, for example, Zootnd which makes managing the state very easy and clear comparing to this a lot. But the context is something that was created a long time ago before Zustan and there was no solution like this. So the thing like this, you're going to see in many react apps that you need to, like, you know, work with and to work with other people. And well, installing Zostant and learning how to use it, right? And just for one simple state, for example, you want to change the team. So if you have just like one thing that is going to be shared then okay, let's not use that. But if your app is going to constantly share the state between components, then it's time to learn something, for example, like this, okay? That's only the lesson. Thank you very much. 112. use-state-local-storage - how to implement SAVE system in our game in 5 min?: Hello, my friend. Today I will show you how to use local storage in your react application. Because, well, it's cool that we can change, for example, our team, right? It's also cool that we can mine our gold. But when we refresh our page, the state of everything is going back to the default values, right? So how do we change behavior like this? To be honest, implementing things like is pretty taking lots of time because we need to use effects, and we need to understand how local storage works. But we are in react. And also, we are using no JS, which means that there are many very fun packages, like, for example, this one that will make it so, so cool. So when I do something like that, what will happen? I will install a package that now instead of this, right? I'm not using State anymore, okay? I am going to now, import, and when we go here, we see what we need to import. Use local storage state, right? So this. And now, I'm just going to replace this with this. But now there is one more thing very important. We need to say not what is the default value here, okay, but what we're going to use our local storage on. So I'm going to put here them, okay, this way. Afterwards, we need to set default value for it. And how do we set default value? When we go here, you will notice that we have value, set value, and key is used when and get items. So be careful with the name conflicts, and then we have something what is called options default value. But options is like an object. So because this is an object, we need to provide it this way, right? So default value is going to be, for example, light. Now when I refresh it, as you can see, now this is proper because we set the initial value to light, and that's why we have got now proper icons here. And when I click on it and I refresh our page, it's finally what it's remembering it. And to be honest, the cool thing about this is that Um, how much time did I spend to implement local storage, right? It took me just a few seconds, right? And now when we go, for example, here, as you can see, we have our key, right? Light. That's so awesome, right? How much time did it take? Nothing. We didn't need to, you know, think about when things are changing, how they are changing, what places, nothing. I just imported this and it works. You could do it manually, like using JavaScript building methods for local storage, using use effect, but to be honest, why when there are solutions like that? So how do we apply the same thing to our gold miner? So we want to use it here now. Well, first, we need to import it, right? And now we need to make it work here. Because I am super lazy, I'm going to do something like that. Control C, Control Shift plus I, I'm going to talk with codium because it's pretty cool. No use local storage instead of use state and apply the values, the initial values, and let's submit. Because why bother doing things that well, we know how to do, especially, but they would just take time to replace, right? So you can see in the green, we have what? We have now all the changes, and this is old code. If you want to accept the changes, which I think are proper, we can hit here or use Old plus A. And now let's see if it works. So when I go to our application, here. And I mind the gold. And now when I refresh my pages you can see, we keep the state. Let's upgrade, let's refresh. Let's upgrade with auto cliqer. Let's make it dark. So now, when somebody close our app, when he comes back and refresh, the state is going to be safe. How long did it take to make safe function in our game? I don't know, maybe 5 minutes. I don't know how long this lesson is. Super super powerful, isn't it? And that's why react this school with the connection of no JS packages that people created for you to use. So there are many solutions to problems that can be solved really fast like this. Pretty awesome, isn't it? Have a good day. 113. How to build your React app into static page?: Hello, my friend. In this lecture, I will show you how to build your application so you can finally deploy. You can share it with people because right now we are currently running everything in death mode, which stands for development mode. We are developing our application and there are many things in our application, like as you can see, death dependencies, which means there are other packages that are installed locally that are totally not needed later, right? There are some dependencies that are here, so packages that need to be included in the build application. And well, how do we build it, right? How do we make it? So you can see, we have a script that is called built invite. So we just type NPM run and not deaf but build. Then as you can see, all the components are going to be transformed and analyzed. And as you can see, we created what index ATML, CSS, and JavaScript, which is now where in the folder that is called distribution, right? Dist and this folder is folder that you just transfer to your hosting. So now you can just open index HTML, and everything is going to work fine because in here and here you have just your entire application. How do we open our side now? In order to open it, all we need to do is right click and open with the live server extension. And when you open it, you will see something like that. Wide screen. Why is that so? Because when we go to the source file, notice that we've got right now sideset, we've got JavaScript. But when I click on JavaScript, what happens? We can't find something like Assets index. Why is that so? Because notice that live server by default opens like our distribution index HTML in this distribution file. So we are trying to access really by doing something like that, not this HTML five, right? I mean, not this CSS five, but something like that, okay? So we are trying to access from the root, right, this way. And yeah, that's not here. The acid is like here, right? So because of it, when you are just opening it locally, you need to, like, you know, remove this, and then it's going to open without any problem, right? It's working. I can mine gold. When I refresh, as you can see, the state is being saved, right? I can save also the state of artem and so on, right? So our application is working. You can now transfer it directly to the root folder of your hosting, and it's just going to work. Without any problems because we didn't do anything from the server side, right? We didn't use node JS for creating server, right? We don't need to set up a server on our hosting now because this is just a static site that you can share with anybody, right? But as I said, remember about this thing here because by default, if you want to share this application on hosting, but in some kind of subfolder, but not in the root, you need to Make sure that you change like this to this. Otherwise, it won't work also on this, because if you want to have the icon also, you need to say that we are not coming from the root folder, do not look from the root folder, but look from the current folder the dime in where the index HTML is, right? So pretty simple, isn't it? That's only the lesson. Thank you very much. 114. What is electron and how to make it run our React app?: Hello, my friend today, I will show you something super powerful, which is called electron. It allows you to build closed platform desktop apps with JavaScript, HTML, and CSS. So, to be honest, we've just used that, right? We've also used react, but react is written in JavaScript. So it means that we could somehow connect this with our project. And because of that, we can run our application as desktop application. This would be so cool, right? So how do we do it? We need to first install our electron. So we need to type NPN, install electron, and then we need to add that we are saving it as depth dependency, so it's not like it's going to go into our build mode, right when we serve our project. Okay, so we've just install it. What now? So in order to be able to run electron, right, we need to firstly specify how to do it and what electron should look for when it's going to be run. So we're going to run electron the script from the node package manager. Okay? So we need to specify here how are we going to run it. You can see it says that if you type electron, let's run, for example, electron, right? Okay, that's okay. But I prefer to do something like to add here death column. So when I'm going to type NPM run death, then I can like, Okay, I want to run in Development electron. And this thing here is going to look for a file that is going to execute electron. And we need to specify now, as you can see here where this file is with the property main. But we're going to put this file in the electron folder. So we keep our project organized, right? So let's create electron folder, and in electron folder, we're going to create something what is called main JS. Okay? Because, as I said earlier, electron is really what? Is just simple. Well, JavaScript HTMLCs this application. But we're going to base this application on everything that we've already created here, right? I am going to paste the code that is going to create our electron application in desktop mode, okay? You can find most of that in documentation, but I tweak it a bit, so it works properly with the Vt configuration. I will explain what I did here. You can download it in the source code. This is something that you do only once most times. Is not something that you need to memorize, but it's good to understand what's going on. Firstly, we imported the things that we're going to use below, and this is the thing that is needed to work in the vite configuration with Slink with our liner that we have installed in our project. But something that is the most important for us is this. We are creating a function, which is going to create browser window with the size that we set here. If you want to have your application bigger, set the size here at the start, for example, right now there is one more very important thing is where we should look for the base of our application. So if you want to run electron, you need to say, where are the files that I'm going to run on, so they are there. And now here is like, Okay, so when the application is ready, when ready, then create this window, right? And here are like two events that are needed to, like, clear everything and also show application when the application is activated. So these things you would never look on again. To be honest, I don't remember them. It's like, Okay, it's set up, I don't care. This is also setup. I don't care, but this is the place where you're going to, like, set up like tweak some things. Of course, electron has got its own methods that you can read when you go here, you have the documentation because this course is not going to be about electron. I'm just showing you how powerful it is that we've just used react and we can make Windows application instantly from whatever we just did, okay? So the most important for you is that. So this must be the path to the index HTML from the distribution file, okay? Okay, so we've just said it. That's good. And one more thing is here. You need to set as the suggestion is here, base to that slash. Why is that so? It's because notice that here, in the last lecture also, we had a problem because all these assets were not available because by default, it's like this, right? And electron is also going to have problem if it's going to be set like this, okay? So set this and this is going to solve all the problems. Okay. So three things, we just did. And to be honest, how do we now run? We need to type NPM run de electron, right? And what? This thing is going to look for main. Main is like telling that main is there, and it should run our application. As you can see, it's working. And the cool thing is that if I close it and run again, as you can see, it's remembering my settings, right? It's also remembering what we did here. So for example, I bought here. And as you can see, it's remembering local storage is in there. Wow, so powerful, right? And, yeah, that's how we run electron, right? But we also need to not only run it locally, but also know how to distribute it, right? So how to build it. So I will show you in the next lecture how to, like, build electron so there is executable on, for example, Windows. That's only lesson. Thank you very much. 115. How to build Electron exe from our React app: Hello, my friend. Today, I will show you how to build electron application because right now we can only run. We can wrap our application that we did in React, right? But how do we build it? So you have execute table five. Firstly, you need to install the electron builder, right? So electron building in the flag using D means that it's going to install it in the safe Dev. It's the flag for lazy people who doesn't want to, you know, write safe Death. Okay, so when we've got it now, we need to specify here the script that is going to run our builder. So you don't need to, like, you know, remember how to do it each time. So yeah, I think that the suggestion is good. So when you are tied build and then the colon and then electron, it should run the electron builder. That's coool. And because it's going to run Electron builder, Mmm. We need to now specify for the builder the property that is called build, okay? So, something like that. And yeah, like this, will there be more suggestions or not? Yeah, application ID and product name. Okay. Application ID is something that is going to identify you. So it always start with C and then you type the name of your company. My component name is GAM and the name of your application. This is useful for, you know, identifying your application by system. So don't worry about it for now. You can read about it later, but you need to set it up. Okay? You should also set the product name, of course, and then you need to say, where are the pies that I'm going to build everything on. And our pies are in electron. Yeah, it's in our folder, right? And they are also in dist folder, right? So the same but for dis so like this, right? So all things regarding production are going to be found in there. Okay, now we can do NPM run, not death but build electron. And wait for it to make the job. And as you can see, there is a new folder that created for us something what is called Autocliker. We can now open it in File Explorer and we can run our application like a normal application. So as you can see, it's working. And also now, it's going to remember the state, right? Everything is working fine. But the problem with the configuration like that is that when you are going to run build electron, I think that you should also run like Vite Build, right? Why? Because if you change something, in, you know, our react up, it's not going to be like inside electron now. So to make it work, we're going to do something like that. Execute te build, and in the same time electron builder, and we're going to repeat it also depth run for electron. Okay? That way, if we change something, it's going to be applied automatically. And one more thing that I just want to show you before we end this lecture for the next build is that look, how cool it is that you can, for example, do something like that? Let's say that I don't want frame. So we are just sending the property here, right? And let's, for example, run it. Yeah, yeah, let's run it as a build mode. So we need to wait a second, okay, right? Because it's packaging and it's creating all the things. And yeah, here is application, let's see how it looks. As you can see, we do not have frame now, right? And we can close this using the shortcut plus F four, right? Here are two icons that are coming from my own program that is like overlay for other programs. But how cool it is? Tell me. Right now, we can, like, have fun, create web development for web apps. And afterwards, all you need to do is just set up all these things, I know, I took us 15 minutes totally. And now we can create executable file that can be run on, for example, Windows, right? So powerful. If you have any questions, feel free to ask. 116. What is PWA?: Hello, my friend. Today, we are going to talk about something super cool, which is progressive web application. Are they? Well, this way to see what they are is to open them. So as you have just noticed, I opened an application on my smartphone. But this application was written by us using what? HTML, CSS, JS, and react, right? So it means that now we can install on our devices, like, for example, with Android or on our personal computer or on Mac, yes. And Wow. They've been written in HTML, CSS and JS. You don't need to learn anything. That's so awesome, right? So yeah, this is super powerful. And you might be wondering now, is it hard to, like, you know, somehow make it work with HTMLCs and JS? There must be, like, tons of work to make it done, right? So what do we need to really do? Firstly, you need to add something what is called manifest. Okay? So something is called like this. But what manifest is? Manifest is in English means demonstrate to show, right? So manifest is something like a file that display shows information about your application. It's like a special file that has computer or phone, right, how to treat the website like an application, right, because we need to change, transform one into another. So it needs to have information like what's the name of the app should be, what icons we should use, and so on. We'll talk about that later. And also, we need something is called Service Worker, okay? So, well, service worker is just a script, okay? It's like a tiny robot, okay? That helps. You and it lives in your browser, okay? It stands between your app and the Internet. It caches and stores important stuff. So it's primary role of it is to, like, manage caching, okay? It stores important files like HTML, CSS, S, images. So your app can, like, work offline or with network connection. So this offline capability is, well, game changer because it makes your application feel like a native application, right, because you don't need to have access to the Internet to keep it working. So service worker is like a file that is between your application and the network. It can intercept like network request and decide whether to serve a cache version of a file or fudg it from the Internet. This helps in delivering fast and relable experience to users. Okay? So workers enable background synchronization and push notifications, for example. This means that your app can sync data with the server and when it's not active and users can, for example, receive notification even if the app isn't open, for example. So very, very powerful, right? Okay, so you might be wondering now, well, can you tell me if PWA, the progressive web applications can do stuff with devices on Android, like, you know, native applications. To be honest, look at the things that it can do. It has access to the fi system. You can even pick contact. You can even vibrate your telephone access Bluetooth payment. There is lots of stuff that can be done using this, yes. So there are some rare cases when it's not enough, right? Well, mainly if you, for example, wanted to create some kind of game or you would like to focus on, you know, a device on Android, yeah, maybe it would be good idea. But really, to apply progressive web application onto your, you know, application right now, this is really adding manifest service worker, and it's done. And I will show you how to do this stuff in next lectures. And funny thing is that because you are using Vt, it's going to be even faster because you're going to install the package for that and to just specify a few things, and you don't even need to create service worker on your own, okay? So super powerful way to, like, make your application available on all possible devices. Mm on all possible on devices like PC, Mac or Android at the same time. That's powerful because there is not much work to do, but believe me, if you attach it, you're going to increase amount of people that are going to, like, you know, use your application service by tones. Lots of services have noticed that the increase of the amount of people that are using their, you know, web application when they just put the progressive web application like wrapper onto the app increased by 70%, for example. So this is a lot. 117. Tranform your HTML/CSS/JS app into PWA: Hello, my friend. How do we change HTML CSS JS application into progressive web application. So we can run it, for example, Android or PC. In order to do it in our project, we need to just install NPM, I and then install something what is called te plugin for progressive web application. Let's save it as dev dependency, right? So it will be the package for death because we don't need it later, right? This ploug Okay, so we've just installed it, but how do we use this plugin? That's the question. Notice that we've got here something what is called property plugins in the vite conflict JS, okay? And here, when you do something like that, so when you add one more like element, you can type here something like vite P, W A, okay? And here, you can see we imported it automatically. We can specify like how Vte should transfer our app into progressive web application. Okay? Normally, you would need to manually create money first, right? And manually create service worker. But this plugin is just going to do it for you. And that's not all. It's going to create service worker. So something that is responsible for cahing your website, right when we lose the connection to the server, when the user uses connection to the server, and it's going to be done automatically. So yeah, this is the way to do it, right? Okay. So we need to set firstly, something what is called register type. And as you can see, the auto suggestion says that we should type here like autodate. It means, how should we make our service worker work by default. Let's assume that we just want to use this setting star, many others, you can go read Vt PWA register type. This is not or about progressive web application and all possible, you know, properties because that's not how it works. You just want to set up, something that works, and then you are like, improve your knowledge if you need something, okay? So this thing allows you to create a service worker that's just going to auto update your website when your website is needing it, right? I mean, when your app is needing it. So this is the first. The second thing that you need to set up is manifest, okay? Because normally you would create manifest as a simple file, okay? But this is just going to create it for you in the distribution file. And it's also going to attach it here, as you can see, it attached like I did before to show you how it works, right? So it's going to just attach it by default, and you don't need to, like, think about it, right? You set up everything in the configuration things and not later in distribution or something like that, or maybe index H t, right? I Index H table. You don't do it manually here, it's going to be done for you because we have got this login. Okay, so now we need to set a few properties that are required. How do we know which one are required? When you go to the website, like for example, this one, you can read how to make progressive web application Install able, right? And when you go here up, you will notice that required manifest members. You need to specify something, firstly, what is called name. And the name is it is just the name of your application, okay? So yeah, we can call it just auto licker. This is, well, important because without it your application wouldn't show up the name, right? You need to show something on the system ray or whenever. This is the name of your application. Next. What do we need? We need icons, okay? So we need to specify, let's specify this also. This is a short name. If the name here is going to be big and somebody can't show it, the short name is going to be shown. So for example, auto clicker is bigger, this is shorter, and and now we need to specify, as they say, icons, but let's do it a bit later. Let's now do display first thing. So if you want to display is like, how your Application is going to be displayed when you run it. So when you go here and hit on this, you will notice that stand alone means that it is app that is looking like stand alone native app. And this is mainly used setting. But you can, of course, make it look like a browser, but don't use it because it's the same similarity like e. You can use minimal user interface and full screen, right? You want to go into full screen on, why not? For example, desktop, you can set it up. So this is how your application should be displayed when it's run. We need to also set it said start URL, right? So where our application is, like, based on, right? So, this means that it starts from the root. It's not starting from the root of our domain right now, so we're going to use it like this, okay? And we've got here also this, but it can be not present on folds, so we don't need to specify it. So the last thing that is like total need is icons, right? So how do we do it? As you can see, they say that you need to specify something like that, right? Of course we have got codium, so it's going to, like, help us. There's also team color, background color, but it's not like required, so we don't need to specify it. But as you can see, it shows us that we need something like that, and also there is one more icon that we need to specify. Come on. Help me. Help me. Yes, the size of 500 512. So these two things need to be specified and we need to make them available, right? We need to have them in our project. But the problem with it is that how do we generate something like that fast way? And I will show it in the next lecture, okay? Because I want to show you something very cool, how to do it fast and from any image that you have, okay? So you don't lose your precious time while 118. NPX - executing package to generate required icons: Hello, my friend. Today, we are going to use Progressive Web App asset generator package model, okay? This is pretty cool because it's going to generate based on what you have. Well, we have got right now this file. So let's use the vite SFO Gi, okay? You can use any image you want, okay? And when you put source file and then output folder, it's going to generate lots of icons for every possible way. You can make it also work differently if you use the options here, okay? But firstly, we need to think about how often do we create icon like that? I think it happens only once per project, right? So do we need to install dependency like this? Do we need to install this package or do we need to use it only? You want to use package only once, then you can type NP X instead of M, which means execute the package once, right? And then you type the name of the package, right? So PWA acid generator, right? Then you type where you have got your currently. It's in public, right? Invite SFO G, and then you type where you want to put them. So let's put them into public and for example, into folder called icons. But it's not end because we don't want so many icons by default right now at least because we want to, like, you know, do a default options. And let's use the flag icon on, okay? So we're going to do something like icon only, please. And we need only the required sizes. So I'm going to type sizes, and then I'm going to type that I want 192 and 512. And when you run this, we need to just wait a second. And as I said, this is pretty cool because it's going to be done like once we didn't install it on our computer because it's not needed, right? And when we go to the public, now icons, as you can see, we've got now required icons, like the most important part. The cool thing about that generation is that it also generates you links that you can put, for example, in Index HTML that will make apple to make it work in Apple. Also, you've got here as you can see, things that you should put in your many first. But because we are using vt, we need to put all that here, right? But there is a problem. No is that we are using here what? Word public, which is not proper because our icons are well, currently, they are here, right? But after we put them into distribution fight, they're going to be here. So we are not going to find them there, right? That's why we need to specify that we are looking for icons in the icons folder. So here, A, A, A, right? That way, it's going to work. We also need to change it in here. So we need to notice that in assets, but in assets, we got this, it's because and it looks like Vt is pretty intelligent. It's going to put it there. So yeah, in here, we can store it this way. Okay, so now we can run it and run build. Then now when we go into distribution file, notice that here, we are trying to access the icon from here, which is, yeah, it's proper. That's cool. But it's also important that here we have a proper path, right? We have icons. So we need to go into icons, and then we've got all the sizes that you have got here, okay? Okay, let's test it out. Is everything working properly? When we go here, notice that on local host, when we are using vite, right, it's not working. But if you go into distribution file, and right click and open with if server, then you will see that it's working. So when you do this, you can install it, right? And as you can see, you can also like well, this is in Polish, but you can attach this application right now. You can also automatically run it when well, it's running when computer starts running, so you could choose some options there. But yeah, this is just a simple application now that as you can see, I can light up. Everything is working properly. You can now also, for example, upload the content, somewhere, like, for example, hosting. And now when I go to the website that I've just uploaded it to, you can also install it, right? So yeah, this is now working online. And this is the target, of course, because, well, you need to remember that progressive web application is application on web, right? So you upload it somewhere. And when somebody installs it, because we have service worker in the background, it's going to, like, synchronize what we have here with what the user have. So when you update, for example, something on the site, it's also going to be updated in the application that the user have. And this is also very cool, right, because it is automatically going to update the content of the person that is using your application. You don't need to the user doesn't need to manually install it, right? Because it's really going to check if something has changed here in VS then if he's online, you're going to take all the content that has changed pretty awesome, isn't it? 119. Showcase of a problem - creating PWAInstallButton component - (1): Hello, my friend. We've got a small problem because the installation button is not showing always on mobile devices. And this problem can be solved with our custom button. But we need to first, know how to, like, detect event that should show up here. But why it doesn't show up? Because most people on devices, like, for example, Android, they have this pop up blocked, okay? So they will not even have a chance to install your application. They will not even know about existence of it. That's why we need to solve it. But how do we solve something like that? We need to create a custom button, for example, like this. We can show it then later in any place of our application. To be honest, we could make it at Pop, we could make it in the top left corner. We could show it maybe three times, four times. It all depends on you where you will show it, right? But the most important for us is how do we show it when the application has not been installed yet on the system? That's the first thing, right? And how do we detect it even, right? So we are going to do it in react. So we're going to practice react in the upcoming lectures and we will see practical, really, totally practical example of how to make something interesting in react that is rarely, I think, shown on tutorials. So I created the base on the component in components folder, and I've included it here, right? So this is like the setup for our application. And the next lectures, we're going to, like, improve it. Okay? That's on that lesson. Thank you very much. 120. Controling Visibility of Component in React from return statement (2): Hello, my friend. Let's start creating this component from being able to show it, so to display it or hide it. Normally, we will do something like that using, for example, CSS and maybe JavaScript to change display from noon to blog or maybe visibility. This is the thing that normally you would do. But because we are using react, we can make it totally different, and I think it's going to be super cool when you see it. So in order to control the visibility, we're going to use a state for that, okay? So I want to be able to hook to this state of showing of or not showing. So we need to create a state, and I propose to, like, call it, for example, show install button, right? And the method that is going to change it is going to be called set show install pattern. And by default, let's set the state to falls. We need to also import our used state, but how do we make a condition inside the written statement? Well, we could use, for example, Tenari operator, right? So it works like that. If something is true, so if true, then show this. Otherwise, show this here, right? And here, we can use it this way that we will like I show install button, I like true, then show this, otherwise, show null. And as you can see, now when we change false to True, it's showing, and it's now not showing. This is really like, you know, doing it this way, right? We can put here the value from here, but now it depends on the state of the show install button, not the other way. We can set it to true at the start. This is one way of solving this problem, but I want to show you one more because it might be confused if someone use the other way, okay? So when we take this under the command, we can also do it this way. Let's return Always at least something. So the react fragment, right? And now, let's do it this way. So if our show install button and the conjunction of it with this part, how do I copy this now? Well, I need to write it from the beginning. So if the conjunction of it with Install PWA a button is true, then show it, right? Otherwise, don't show it. Look, it works. The question is how? Because many people who knows how conjunction works, they know that if both expressions are true, right, then the result is true. If one of them is false, then the result is false, right? But many programmers do not know that if the first statement, so if this thing is false, okay? So if the first statement is false, then the result is false, right, but it also means I am not going to check other statements. And why does it happen? Because why would we care about what is going afterwards? It is optimization, right? Because conjunction is always false when at least one of the right things used in conjunction, right, is false. If one thing is false, we don't need to check other things. This is optimization. And that's why this is working because if we have here like false, right, this thing is not going to be returned, right? But if this thing is true, then we have true. And in the same time, this is true because this is a button, right? And button is not a false thing. So this is also going to return. So this is going to be executed. And that's why we can see now here a button like this, okay? So I know that this might seem confusing. This is a bit more readable, I think, but it really depends on your taste, okay? Use the one that you feel like using or, you know, sometimes AI is going to, like, suggest something like that. At least is going to understand what's going on here, right? It depends on your taste. And there are no ups and downsides I think of both methods. I like this one because it's maybe easier to read for most people, okay? And you have got a bit more flexibility because you could expand these conditions easier here. So I prefer this. But as I said, it's up to you and I just wanted to show in this lecture how to make a condition inside a written statement based on the state. And as you can see, yes, you can do it pretty easy. 121. Catching and preventing event (3): Hello, my friend. Before the install event happens, there is something like before install prompt event that you can catch, prevent it from happening, and then make your custom solution for installing PWA application. And in order to do it, we need to know how to catch events from react component. And if you want to, remember, do some stuff on your events, for example, it is like the site effect of your application, right? It is not connected to components. It's not like you are accessing this component or many other like the properties of other components, you are accessing event that is in the window of your current browser page, for example, user is visiting the window and you want to listen to what is going on there. Then you are using use effect, okay? And when we open it, yeah, let's use the default behavior like this. And this is very important. As we talked before, this part is like the arrow function. But this part is also very important in our case this time. Why is that? Remember that if you put here array, this use effect is going to be executed only when the component, so this thing is mounted, okay? So only when it's mounted. All right, we can now access our window and add even listener, so we can, like, you know, listen to the window, and then the solution here is pretty okay. So we're going to use it because yes, this is the event that we want to add for listening in our window, which is before install prompt, right? And then, as you can see, we have got here arrow function, right? And this arrow function, as you can see, has got now what? By default, automatically, every event has event property that you can now access to see what kind of event is that well, to do things with that event, right? And as you can see, we have got here event that prevent default, which is very needed in this case, because we don't want to have now the default behavior of this event, right? So we stopped it and we showed what our button. However, we've got a problem. It's not only that we had here true by default, but this thing, is going to be executed at least two times always because here we have strict mode, and this is here to, like, detect if you had not cleaned after yourself. Because when this button is going to be unmounted, you want to clear after doing whatever you did in effect. That should be clear because something doesn't need to be clear because it might be just changing the title of, for example, your page. But in case you are adding live and listener, this time you added it two times. Always, when you finish your job, you need to also return the clearing method. But we've got a problem now because, as you can see, this is a bad thing that it did here because it suggested to you that you can just remove it by typing again all these things here. No, no, no, no, no, we need to remove the same function, right? So it means that we need to, like, take all that content from here, so this. And instead of invoking it like this, we're going to create a function inside of it, right, that we can call, for example, handle because it says that we are handling something before install prompt, right? And now we can define it inside use effect because it's going to be on the used here, right. And yeah, that definition is okay. No, I can't use the. This is okay. So we didn't need to copy it. I love I sometimes for things like that, it's like, Well, okay, so now we moved it here because of it, we can easily clear it, right? Like we did with the set intervals, right? Because we can now type return then this, then this, and we can remove window, remove even listener and thes This time, we're removing specific method, right? The one that we really want to, like, remove. But I think I did it in the wrong place, it should be here, right? Because that curly bracket is like for that. Now we cleared after our ces. Remember, this is super important. Now, let's see if it works as you can see our pattern doesn't appear. Here, if I change it to yeah, it appeared. So something is not working properly is everything okay here. The problem is that this is not invoked in our local host environment, okay? And also, it's not going to be invoked when we run it, like when we, for example, do NPM run build. And if we use the if server, okay? So if we do something like that, open with if server, it's also not going to show. Why? Because this thing is gonna be shown like 100%, most time only when somebody didn't have another method of installing. Because, you know, if everybody on PC could get this event and then show people some, you know, big boxes, it would be a bit horrible experience nowadays, right? So that's why you can, you know, when you run it now, where is it? On my smartphone, for example. So I just uploaded the content to the website. And as you can see now, we have Install button here. We can't click on it and, you know, two startups on it because we haven't programmed it yet, but it showed up for the build that I've just did here, okay? So yeah, even though it is false here, we changed it to true and prevented the event. This is the first step, right? But we need to do much more things to solve the problem that we've got. 122. How to resolve Promise from prompted user to install PWA app? (4): Hello, my friend. We've cut our event news effect, right? But we need to also handle the click now on the show Install button when the button shows up. So how do we do it? In order to do it, we need to what? On click, right? And let's create maybe a function gonna call handle Install, click, okay? And now we need to create it here. So something like that, handle Install, click, right? And here we can, like, process it. But the question is, how do we process event that really was here caught? So as you can see, we prevented the event, but to be honest, we have not, like, safety anywhere, right? We do not have a way to refer the event here that was, like, caught in this place. Because, you know, the event that the clique like is creating this is an event that is connected to the click, not to the installation. And it means that we need to go here and save it somewhere. I propose to create a new state that will be called deferred prompt. So it will suggest that we are saving the prompt message. So for installation, we are deferring it and we are saving it in this particular state. By default, we do not have it, so it's going to be set to null, right? But here, we can now set deferred prompt to the event, we've just saved the event from here and cut it into the state here, right? Okay. So it means that now the install button is shown. And we can click on it. And here in this place, we can use it, right? Okay. But before we use it, we need to check if deferred prompt exists, right? Because, well, if somebody click on the button, somehow he managed to do it and it doesn't exist, we do not want to invoke a prompt for installation. And as you can see, we have a suggestion here because deferred prompt, is really right now an event from here, right? And that event is having a special method, which is called prompt. And that method is gonna ask the user what you saw before. So when somebody clicks like, Hey, I want to install your application, right, and there was like, do you want to install application, yes or no, right? This is the prompt that is programmed in this event that we stopped, but we now invoked it manually. When somebody clicks on the button, you might be wondering, how do I know that this event returns something like that? Remember that everything like that is always shown into comentations. So for example, here, as you can see, I am in before install prompt documentation, and here we have something like prompt tag and then says, show a prompt asking the user if they want to install tab or not. Now here is a very interesting part. We've got here something this method returns a promise that resolves on an object describing the user's choice when they were prompted to install the application. What does it mean? It means that this thing is going to be run as synchronously. What does it mean? It means that we can do other stuff in our application while this is running in the background. But we need to now, specify here that we are awaiting for what is going to be returned here, okay? And the thing that is going to be returned here is called promise Object, okay? And because we are waiting for that, we also need to specify, as you saw here, you can see that this function is really an asynchronous function, okay? So now, all the parts afterwards are like, we are not going to be run until the promise comes back with the resolution, right? And here as you can see, they say that you can, for example, save it as a result, right? And also, there is something what it called result outcome, right? Okay. So now we can check if the user did it or not, for example, right? So we can save it, for example, in choice result, something like that, right? And yes, we can now check if the outcome was accepted. I yes, then the change here is, of course, wrong. Why? Because we shouldn't access it directly, right? We should do it rather this way. So set DefertPm to null, right? Okay. And do we need to still show the button? No, we don't need to, right? Otherwise, we can just not do anything, right? Because, to be honest, why would we do something? Um, we still want to have the event. In the case someone wants to click the button again. So it would be great to have it in our state, right? And so we're not going to remove it because why? And we want to, like, show the button in case somebody wants to click it again, right? If you had wanted, you could show something, lock something. It really depends on your preference. But for us, I think that's enough. So now we can test out our application after uploading it, of course, to the hosting, for example, as you can see, I have now install application, and as you can see, it's asking me in polish if I want to install it or not. When I say no, doesn't mean I want to make it disappear, right? I can now decide again. Now when I hit Install, application, I, I agree to everything. And now I have my application installed, right on my device, my PC, it's working fine. I can now, for example, close it. It's up to me how it works, right? And now, also, what was it. When I go here, as you can see, bottom disappeared, right? Because, well, it's been already installed. When I hit here, I can just open my application, okay? Because yes, it's been installed on my PC. The most important for us is let's see if it's working here, on our device that is smartphone. So can I install it now? As you can see, yes, it's asking me if I want to install it. So I'm going to install it, right? And it will automatically create the icon. I can add it to my main screen, right? And as you can see, it is on my screen. I can now open it. And this opens like an application in Android, right? I can now use it, save the State, and so on, right? Everything is working fine. 123. How to Setup Express? How to setup backend of your app?: Hello, my friend. Long time ago, JavaScript could be used on inside of our web browsers. But because we have note has that we've already installed, you can run JavaScript everywhere. But what does it mean that it can be run everywhere? It means that we can make it run as a server, for example. What does it lead to? It means that we can read and files from the computer where the server is installed, for example, right? Means that you can work with databases. It means that you can process requests like for example, logins, submitting forms, and all the things can happen in the background. It will not be shown to the user, right? Because normally, if you go into what into the source code of any website, right, you can see JavaScript there, right? But the thing that is going to run no JS. So if the server has no JS installed, you can then run all the things like this, for example, creating server that can respond to things, right, that can, for example, respond with plain text, and, for example, say hello, right, or whatever else. You can now all do it in one single language. So you don't need to learn, for example, Bton or BHB or any other language, right? You can do everything from within node JS. But all these things as you can see here can be done using basic node JS. But people created lots of what packages that are called node JS package modules, right? And you can use the work done by others, so you do not recreate the wheel, so you are not creating everything from scratch. And as you can see, for example, we have something what is called Express, and as the name suggests, it is an express way for creating web framework, so for creating servers and managing them, right? And as you can see, many people download it like 33 million per week. So yeah, this is very popular way of creating server. And I propose to use Express instead of, like, a vanilia note JS and like recreating everything from scratch, right? Because this is not how most people work. So how do we use something what is called Express in order to set up in order to make server in our app. Now we need to decide if we want to create our server independently from our front and development. Because notice that here we have a project with our react, and well, everything here is done really on front, right? Nothing is going to be requested from the server here. And to be honest, it's a good idea to create a new folder, for example, server, where you're going to store all the files related to server, okay? And inside of it, let's create a file that you can call whatever you want. It can be server, it can be index dot JS. I'm going to call it server JS, where I will create express objects where I will use it inside here, right? But before we do that, we need to install Express. In order to do it, let's create a new terminal, and this is very important. We need to go jump into the server folder, okay? And this is now important. We're going to initialize a new package that Jason, okay? Because we're going to have a different packet Jason for server and different forward for our application in front end. Okay? And now here inside, we're going to install Express. And as you can see, we have got now a different node modules inside here, right? And now we can run our server. Of course, it doesn't do anything right now, but we can go into here and type NPM run, and as you can see start, is going to run this, right? So let's start it. And as you can see, we started node server JS, but nothing here happened. So, you know, we had console logged here, for example, like this. As you can see hell also from server dot js. So we can now, like, do stuff inside here. What kind of stuff can we do? Well, I think it's a good idea to use the default code from here, okay? And what it does, we are like requiring, so we are like importing everything from Express, okay? So when I jump here, as you can see, it even says, Hey, import this and later, you need to invoke Express. And this thing creates Express application, right? And from this, you can now access many methods, right? When I do something like that, as you can see, there are many methods, and one of that method is called get Get is a function that is now waiting in this particular place, okay, on our server that we run. So it is in the main folder, and it is waiting for what? So you can see here we have got a function, right? Here we've got a function, which is anonymous function, and it is waiting for request, right? And when somebody puts something, this is where the value is going to be at when somebody tries to send something to this particular place, right? So to the main place of our application. And where is that place? You run the server, this time as you can see, something is going on, I didn't stop. When I go here and I type Local host 3,000, notice that we've got here hello word. It's because we access this main place from our server, which is at the port 3,000, okay? And we send as the response, S stands for request is request, what comes to me and RS is from response, so what I send, right? So I send to the web browser hello word, right? And now when we are here, as you can see, we have hello word response. So this is the value that is going to come when somebody comes to the main route. If I had set here, for example, API, which is the most common thing to do. And for example, let's say that I would call it hello. And now when I refresh here, as you can see, nothing changed. Why is that? Because if you change something here in this place, you need to now terminate and run your server again. I will show you soon a way how to note so you don't have to do it when you go every time, right? But now as you can see, we have to go into API hello and then we have hello word, right? So this is like an endpoint, name of endpoint for your server to get response. So when somebody goes here, the t thing is going to be sent as a response. This seems like a lot of things to do, right? And here it is also very important that you need to listen, okay? The application must listen. So it's like starting your server and listens on this sport. Otherwise, your server is not going to work, okay? This is like listening for any changes for incoming request for responses, right? And well, there is much, much more to it, right? But for now, this is the simplest way of setting up express in your project. You can then, for example, request for things in your server from where. So for example, when we create a component later and react, we're going to request for data from this place, right, and we'll get it as a response. This is super powerful because later, you go to well, learn, for example, how to make requests to, for example, databases, right? Or you can learn how to, for example, upload file on server on many and other things. So this is super powerful because notice that setting it up wasn't like taking much time, right? But somehow we manage to set up server in JavaScript without having to learn another programming language, right? And we can then test our application locally here, right, on our machine without having to, I don't know, buying a hosting or like connecting to some kind of hosting. So we can depuck every fear thing here, locally. 124. nodemon - how to automatically monitor changes on server: We don't use the Dan protom some of it chica Alexia TipocarcVPop Stavi Serv E O D Bractavan Zap tan Dera, Ruchi Povich Pomtum Telco tri JavaScript, too. Which is Dot pa JavaScript Monabv Telco vannvPegnarka. E, problems Java script and Botagetib in a piece of beam Rug Na Powsmenzak Novi, Coso battery. Napiquadre Gemma too tight, Greis march to take JavaScript to the Morse pod gli Pravda destron InternetovO acre moment change to Tam PovizmPtvon mesova Aga Mona Gove Pod glo Miss Javascript Novinotach Zack to take Kuchavanap quad Povimginwach, dam Powtmen element to Niko zidov for his thrown the Internet of MogobgaaVka protea petvich Ma Watch got povidPaanch considervkovi is Agovta security. Moriscoovino, oppo orgo Povovch when you be we push problem. E, La tega MavoUuHomena, Java Script to FrangsPomzo Nod JS, AR ten Java Script enga, Ya BuruHomon, Postronia, ag Ben, Topovigi era Sonic Ni Benji Vigo, So tase JE Nod JSP dafuHomTabodovisco Romina at called tego Java Script to congratE nod res, Mamo vo Saviana Servera. Posh method Eleanic to the Pos val on Taco Beach Natoiamus the message on EktorJ OctreEpreo PostaertEpre, Framework, and reza mo Zanis StallovchPoz valac Bardo ShipcoPostavic, server doctor Gomorna Zadach Tax van request on Povich pre promotes response. Iac is a Migiqu ZadanPetana D Baz Dane tag E. M mentied Dostan RodovichTVuci taki server Atmos Sobovic the front engine. At Tem to too Prosto V Io Terasveenjob ten DestovaTgj Yak, Al Nevan to Benge MuktoobchEspomoz and Frisco, Java Script two Rucho Negoyenzka program one, DobaTb Butaki Stemco, Natomi Yak Motake in StallovaTk M mama used to say project Mammospotnt aka Iteras sob had dot Cv, MT tai server tur Bengio Povionannal astronomy Internet. It us Warto Zav Mimo Frisco trojerjgTm change front end or back and dvm Tosonsagabd dot Cov. Fold there Gur ASV, so be a server. Latch go to Takoba asi Bisha server Postavit so be vinimHsting Sakovic completing Jinja, Is Miso Povionzans and freshbb or razaro MsagOmPsojov. I got Fabio drasu to take folder server. Not version of a plquEASNaw gob Rufer server, Amo BisbNazvat got index, NasvaGsb Dupaed and vaFisco not Toys plaque, start off with forego Poposto Servera, right? And Nv initiates version is Poposu Java Scription BotakavnPsa Poposto Java scription called Sero. No, Teco as Musim StovNaEpress, actually go intuaTTmam instruct Vastonagmkan Jen. The Naan Govinvoldeja took off the server, Sams Jon. To Natacha said that the change directory, no server, E, Tras Robia MED, axis of Betta Zant novel packet Jason, okay? Todd Soh Potobe Down on SartovPoglund, Nato Rho is not required server crop JS at the moment, right? ZanimNtoa Zobeme halbum Abi Zi Install of Valley PM Install Express, hill Washington mood Turi Tagak movie Moss Stallovat A NutagN nibs PavodoEpress, Nib Povdomonazv starting to go New Tag. Boo protos pies and I' taught some ugly B Sobi toute obvismng like, Maps toto Koji got a nasal Giia. Era tack aza instead of Vance tag Expresaemgas, so ruhom. Zanni Mednacto RobiJam Chip kaza, Jeff Packet, Jason, Mama tuteOtodanrazu script, starto. Day I go Ru homie, the run, start tag to RuhaiKana notes server Jose Benito, Bonita mama, LismtutiVPisali test, NaphqoTagTso shifting moment, esta epsonam test, tacnaPravda, taco MendattiUu hamianamtT get. I eras, VakisPoutcmaja, mojo Nash Piers server post Savage, Naso hivowan in for Matin. Scope and papers tutto, so he is astronataPodna, but is N Bar gi potaboelament. I tell us tomach apocol Bichozuei. Predevkin Mushitaabeno, Zain portovag required Import of ana to star in JavaScripto. E Menke a importer Express dam to take control Mspreopctor book Ruby on attack, A express, esto, pposto biblioteca, Framework, Tae poteng, Java Scripture, Tuias ZazapisanEpress, taking Nasvia. M Mme Mivras vivoanaFunti, TuratFogna sum applica ttevges, topo chi creates an express application. The express function to the express fungiaNibarge, OtrasuEporana Nvigifuntia Gura prostopnaOtazu, Yactas require tooty means too much funct toms vivoaigdu vivoaZaupm Bica novembtAue mammoivo so Dos tanya Dove method, tag, historic Morse orista. Yet non vari method, Tony Narachi Mota, telco ta, ta, metodaNazvahe, listen, NasuHue Ios varnaNaport, Trina Poproto stu, numer Tuthons, AgiotoUruHm erato Run start of momenticevade the Otra gon darky tank. I Bisha to tie poprosto local host Vu cropper Titi Sons tag, Temi Benavaonkvji, kovkFreedom a server. E, Tras, get the Yazobi Run start to tag Sabo tag, vinto sobiaVuhma TheasPam cannot get Oggi oto Tag Betago and Pinta, tagovsaTpottavo, Vin do Stashm cannot get. Epcot servers Ruchi teres touch terpoPstu StroneTabore we Tota. Terra and em Vuci acecho, pone va, Nasser Potnia aaj automata, stats minion Naser jaantrig controlled agreg Yakovontrig is novo gouruHmage Takapalndopi of Nate Lexi, Samara is hello word. A tegoPanvvig touch Virgina GovnFolder, aga DominovRot Takavan, Coin Nach Strano Internet ove, helipoPsto vac, local host, SportamTi Johnson, tag, too, chaube Abs ru hoomFung sectora, Funko anomvTag I a funciamvazu tomato, matzo takegoyaGreg. Request chili. Tosa sana dome, tag, tootso wanomi ERS, chili response, Zangiskgohi Ot Povich, to more vu dos Vusana. ItsaaVvobctic to the mash odazido deposits Sistani swan a to Bengialgtgov request. RS is obipvatcagako Vodka, a tegoctoadtauc dotegova to tines substance slash on tag A movie Ot Povism chilis, respond, visually send atm visa emo hell award. Means moment g the quad T means so tag topo avi mush hell award. Usually Vic gini squad two, Toni Mosa tempo Bach, Bona server no Seguia tax vanegoEend point Appy Vds toi, a ziv end point app endpoints, coins of punk Apis, application programming interface. E, chili too D program of vana applicat interface, Yato osuiumtens po sub case the tachy endpoints. Cash the take a lemon, Benjamin us rubbish. Dos Nachit arc Zaogovccqt VivagmelaTak, TritoZgbaka sos soposvala concretinm and punch puncta, Puncten coach concrete no chintal called hello word, Nonias min after called slash API ipofsvh Hello, tens pouTtenPonchs in mushi controlled Vontri wont novo server, aquideraPotem, and Pointes Raza Nato, hello word. Natoias two Net stuck, botego me SaoperTunT Mama end point, At movie a Sochi must start. If ten poss Mumtutaaogova, Mama Naproqa done a Baza done Mojamzapetch, telegencuc brought, cats out, poviJa Shriscot Benji Jiao postronia, ServanagoNg Benjamitepu ego movies Server crop care, Tony sh Sotojvtron Benjamb of badge, nay Oh, yes, tilco la ebitag. So called Vc tutee Jet is secure. Til cote subjec to amado tago concrete plicuNasererga, tank. Usually serve Maza instead of nego no Ja, Tag, E Maza instead of van PakunkiPovinzan, act express, do not to momento yes Sania, tachy Whim, take toga Opszgt 101010 cot. Me Benjamin and PoinoTPhTava Jackie Pitana attack, Mom push Arequadvb asserts to tie tack. If the missus Rubi Jaquish component of it Macchu Kuri Benji Peto, or Jaco Zavarto Server attack, I D ZostanaOa. Rana too, serve visa Povich. You may Mami yo vivia trich, the quad taka to Benji Michel. Toto Midas Doja Maras Dov Sochi Benji Gabo Hippo ranch, Trisoviukovk, Yagi totoGFTlaTrite Goshutkovnk vigiTa. Mora Mamttvibo Mora Scotosmva Sach so. Bps faja, postronia Server Atom Watch plata Bazan go Bach. If Sisco The GF let next tgoVgE attack, Tomah jag. But you hut cov o Bimoostroia Wahab Server. Oh, you know, if Soumya tells me some of it about pasta Vlisima server Bardo Ship coo Pravda. So ism Prost folder, instead of alisma Espresso or Expresa. Establishment tac Na Pravda dazu co Doctor Oi Totato star chion the pasta vignette goo, Pirago and point to tax vana goo tag to raise the Guvngi Sion raza razo hello. Toto, Temin NostiKostana, Stego Vasari, Totoviti, MorPui, Ros Viagklena Zach tag, NatoiaTaxvan fundamen tag postaVdmsaovic a Sipko, Iteratikova snap Neglect, Czech protube Ros via not or Korsstana Segoe Panama. 125. Fetching data from React Component from Express: Hello, my friend. Today, I will show you how to communicate from front to back, so let's send a request for some kind of response. But how do we do such stuff? Firstly, notice that when we run our development server, our local host is at port 5173, right? And when I open it, as you can see, we can see the result of whatever is here, right? When we change here something, it is going to be represented here. Okay. And it also means that we need to now run the server, so to change here and run development server also here, right? Okay. Now we can connect and talk with one another. But how do we do such stuff? I propose, let's create a component that we're going to call, for example, hello from Express, something like that. And let's create function component using the shortcut that I haven't shown yet. It is from simple reacts inputs. And when you do something like that, notice, we've got instantly the function component that we can call hello from Express, for example, right? And here we're going to return later something like hello from Express. But this message should come from server, right? Not from right now when we just type it manually. But always try to do things like I do now because really, when you are debugging something, it's good to see something, right? Okay, it's connected. Everything is working fine. I've just finished one step. I can go further. Okay, so what now? Now, we need to somehow fetch the message from our server, right? But how do we do such thing? Order to fetch something from server, we are going to use use effect, okay? Because this is something that is going to be run once when the component is mounted. When you send here as the second argument, what curly brackets with nothing. This is going to be run only once when we are mounting our component, right? So this is only once run. As you can see, hello from Express, two times this time, but it's two times what? Because we are using the strict mode, right? But, hey, this is run once when the component is mounted. Okay. And now we need to fetch something, but how do we fetch things from the server? Well, in order to do it, we're going to create a function, okay that we're going to call fetch message, okay? And as you can see, it suggests that this function should be asynchronous. And yes, this function should be like that because you don't want to wait for the response from the server, right? After we define the function, we need to also invoke it. So let's invoke it here right now. And here is like the body of the function that is going to be invoked later here, right? And remember, this is a synchronous function because we are going to await for the response from the server, right? And it should be done like a synchronousy, because you don't want to stop your application from responding when something is going to be like get from server. Because, you know, normally, sometimes, things like that can take time, for example, server can be unresponsive, for example, where you send the message, and you don't want to make your user of your website or application to just stop doing anything on your website. You want to catch it behind the scene in the background, right? Okay. And in order to fetch something, we use the fetch function, okay? And in the fetch function, we type what we want to fetch. As you can see the name of our endpoint is the same as the one that we sent here. So we say, Hey, fetch something from here. We didn't specify what because well, right now we are making the most simple request we can, right? So as you can see, the request is now like we don't have objects here because we haven't sent anything here yet, right? We didn't specify exactly what we want, but we just did something like, Hey, fetch something from this place, okay? And now we are going to await for the response in this place. Okay? It means that whatever is afterwards is not going to be executed until we get the response from this place. And what kind of response is here? As you can see, it's just text, right? We can type here hello word from express server dot JS, for example, right? This is what we want to see here as a text. So let's create a variable that we're going to call text, and let's now wait for the response to be process into the text, with the text method from the API response. Okay. And now when we've got this, yeah, we can console log this. Like we can see what's in there. And as you can see, our console log is looking like this. So something is wrong because, well, we asked for that, but we got like an entire page. What's wrong? Well, the problem is right now is that we are on different parts. Notice that here is 5173, and here is one, this one is on 3,000. There is nothing wrong in that because you should be on different ports because, well, we are trying to communicate from front to back end, but we've got a problem because connecting from different ports, even if you are on the same domain, well, this is not allowed because we are connecting from different origins. This is called something like that. But fortunately for us, invite, we can set up something like this, which is called proxy. And this is like a middleman in networking a proxy forwards a request from one server to another on behalf of the client because, well, we are like right now on the same server rhythm, right? We are on the same origin. So when our front end makes a request to proxy, something like that, the proxy is like only forwarding the request to our backend, which we specified here with this port, right? And it make it look like the request is coming from itself. So it's like helping bypass restrictions that are made by something what is called cross origin resource sharing rules, okay? I know this is a bit maybe advanced topic, but for now, when you are just learning and developing, you know, server. The most important for you is that you need to set up a proxy like that, which will instantly go into local host and to the port 3,000 and API, and it will just make. It seems like it came from, like, the same origin, right? And because of that, now when we go here and we refresh, as you can see, when we go to the console, as you can see, we have hello word from express server dot JS two times. And well, we've now only console log that, but we could, for example, do something like that. Let's make use state, right? Maybe you could use State SNIPA this time. And let's call it, for example, what? We've got here message, right? So let's call it message. And the default value, maybe it's nothing. And here we go to, like, present the fetched message, right? So by default, it's nothing, but when we get the value, you want to change it to the text like this. And now when we refresh, as you can see hello word from express server dot JS, because it came from here, right? So we've got what we wanted, and that's pretty cool because we access here our server. If we change the value here, for example, to this, hello world, and now when we refresh here, as you can see, the value also changed because we are now sending different thing from our. Notice that when we open here our network and we refresh again, when we go here, we've got something like response, as you can see, this is the value that we respond from our server, right? And we access it by requesting URL like this. And the funny thing is that notice that we are requesting really what 5173, right? And even though we are requesting this thing, because we have her proxy, it knows that whenever we are trying to access the API endpoint with anything afterwards, this is really going to request the value from this port here, okay? I know it seems like over done a bit, but this is the way how you set up it if you want to have it on different ports, and, you know, you want to, like, check for changes on the server and at the same time, check for the changes on the vite, right? Because you want to see, like, instantly the results coming from the changes from the front end then bug end at the same time. You have two things running and checking for changes. But right now, yeah, we've connected. So, you know, we could fetch the value and change, for example, the text. But of course, this is just basics right of express. We just access fetched. We change the response to text, right? And yeah, we now can show the 126. "Loading" message while fetching data: Hello, my friend. Today I will show you how to make a loading message while our response from the server is loading. Because when we refresh it, notice that it's like jumping onto our website. It's just showing up. But things like fetching, it can take time. It depends on how many people are using your website. It depends how your server is far away, how many things are done at once, right? It's good idea to show some kind of loading message to the user to improve the user experience. But how do we do such stuff? Notice that the default value, the use state is empty string, and empty string is really like for the conditional statement like this, not true, right? So we can do something like that. If the fetch message is true, then show fetch message. Otherwise, show, for example, text loading. Now when I refer as you can see, we saw for a second loading screen in the background, right? But let's maybe make this use effect to take some time so we can see it clearly. So when I use the set time out, I can do something like, Okay, I want to set fetch message, but in, for example, 1.5 seconds, right? And now when I refresh, as you can see, we have loading for what? 1.5 seconds, and then we can see the message. So that's how you make a simple message like loading. But could we improve it maybe with some kind of additional you know, libraries, and I will show you how to do it in the next lecture. 127. React Spinner - let's 'spin' loading message: Hello, my friend. There are two libraries used for at that are very popular for loading data, and one of them is racked spinners, okay? Loaders. And as you can see, you can, for example, do something like that, or you can use racked spinners. That looks like that, and really using this thing is pretty simple. Because all you need to do is install the package and use the component. So for example, let's say that you wanted to use this thing. Notice that the cool thing about this site is that you can change the color here, for example, here, you can change the size to bigger to smaller and see how it will look like before even installing it, right? So you can check the loader beforehand before using it. But in this lecture, we'll use the rug spinners from this place in order to install it always go into get started, and as you can see, in order to install it, all we need to do is do something like that. So we need to go into our project, open the console, and type NPM install. After installing it, all you need to do is import the one that you are interested in. In our case, we are interested in rotating lines, right so all we need to do is do something like that. We can copy this into our project here. But instead of audio, we go to import what rotating lines like this, right? And now we need to only use it in this place instead of loading text. So in order to use it, here we have example from above, right? If you want to use exactly the thing that is up here, all we need to do is just pace it here, right? And when we go here and when we refresh, as you can see, we've got what? Our loading screen. But you might be wondering why the color of it is green when we have it here to gray. The funny thing is that when you go to here, notice that they said that the props here like stroke color is setting, the color of the rotating lines, but they use the color here. So pretty weird, because this is a implementation they use color, but they should use throw color. So it's just a back here, but you can fix it, you can just change the property to the proper name. And now when we refresh it, you can see it's gray can change the color to anything you want. You can change the size, right? If you want it to be smaller, you can make it smaller, right? It's up to you how it's going to look like with these settings. Pretty cool, right, because you didn't need to, like, reinvent the wheel. We didn't need to, you know, make it in CSS, maybe animation, whatever way you would choose. We now have some kind of rotating lines instead of, you know, loading, which is weird, right? 128. EXERCISE: React Toastify - notifying user like a pro: Hello, my friend. Today, we're going to talk about package that is called React Tastify which shows toast. I know that the name seems weird, but toasts are just simple messages like the one here. You can go also to the documentation demo, and here you can, you know, check out how each thing can show up, how you can, you know, change also. The type of it. So it can be the warning, it can be error, the default one. So all things here, as you can see, are pretty easy to customize. You can easily see how to use it, right? And all you need to do is just copy paste it into your project, right? And in our situation, we want to, like, toastify inside our fetching. How do we do such thing? Well, firstly, we need to make a container for toast, okay? And well, let's use the one container that we have here, but before that, we need to also install it, right? So in order to install it, we need to type this, right? So let's go here. Let's open the terminal, and let's install it. And as you can see, we need something like that, now, right? But it says that need to also import something what is called the CSS for Tastify, right? And we are not going to import it in our hello from Express because we want to allow using it everywhere, right? I think it's a good idea to import it here in our entire application, right? We need to also import our container, something like that, but without toast, because I want it to be available in our application tree. So it's always visible, right? And let's maybe use the test container that is here, right? As you can see, this is the default behavior, right? So this is really the same as this one, right? And let's put it, for example, here, right, like that. And now the cool thing is that because we have a container in our application, all we need to do is emit it, for example, this way, right? So if we're going to copy it into here, but we need to also, import our toast. So import, and we need to import toast, right? That's the way to do it, right? That's so we can use the function that is called toast, right? So all we need to do now to use it is invoke this function, right? So when we go here and let's say that I put it, let's say here for a second. You can see we got, Wow, so easy, then you can close it. When I refresh our page, it's going to show two times because we are in the strict mode, right? But yeah, it showed up after fetching the data. We could maybe put it also, for example, here, right after 1.5 seconds. You can see, Wow so easy, but we got it two times, as I said, because that's how the street mode is working. And the question is how to customize it for example. Let's say that maybe at the start of when we're trying to load something, we can make info, and we can say loading data. Now when I refresh it, you can see it says, Hey, something is loading, you can see, yeah it's loading. The problem is that well, it didn't disappear when the message finally loaded, right? So we can do something like, for example, toast, dismiss, right? So we can dismiss it when the message when it's going to be loaded. So as you can see, we can manually, say, Hey, I don't need you anymore. React toastify is super powerful. It is used by thousands, millions of people, you know, right? How many people have downloaded it in the last week, two millions. So you can do much, much more stuff here, right? You can, for example, change icons. You can handle even the promise here and they show you how to do it here, right? You can change the position of the toast. You can really define anything regarding this, well, toast. And the cool thing is that you can check it out, right? Oh, I want the dark mode, for example. So in order to make it dark mode you can see you need to change what here, the property of team to dark, for example, you can change easily where it's going to show up. Oh, I want it to show up here, I want it to show up p. You are deciding where it shows up and I don't know, you want to zoom in. It's going to zoom in, you want to slide. Okay? The next one is going to slide. It's up to you how it's going to show up. So it's a good idea to play with it, okay? As an exercise, try to install it. And for example, maybe you could try to have fun with, let's say, where is promise, yeah handling promise. Try to handle the promise, like, for example, try to do it, for example, this way, right? So you can see that you can send here watch. Fetch. So in our case, it is this, right. And when the fetch is going to be resolved, you can depending on it, show message, like when it's loaded, show this. When the success happen, show this. If the arrow happens, show this, right? So, to be honest, this is going to automatically make our loading process better. But remember that we have set time out here. This is something that we have created artificially. This is taking 1.5 seconds. But this is instant in this situation. But of course, we should put checking when the promise is resolved, when the value is coming from the server here, right? This is just for the purpose of debugging later, you should read. Okay, that's the lesson. Thank you very much. 129. Map - displaying items from lists: Hello, my friend. Today, I will show you how to display tasks from, for example, an array inside our component. And I'm showing you this on very simple example. Imagine that this data came from database, for example, right? But for now, we are showing how to just display all this data here. It would be easier to understand because of it. So how do we approach a problem like this? Well, normally, when you want to display task, you will probably use the unordered list, right? And then you would use list item. And for this sake, we would use one, two, three, four these items, and I would do homework, by mail, clean room, and cook dinner. The problem is that, you know, there can be many, many more tasks or less of them. That's why we need to probably use some kind of loop, right, that would go through each element and at list item onto this element, right? And yeah, you could use Loop four, but to be honest, this is a very slow way of doing this thing, and it's not as readable as the one that I'm going to show you now. There is something, what is called map function inside of Javascript. I hope you have already used it, but if not, I will give you a very first intro into how to work with it, okay? When you do something like that, tasks and then map, this function is now ready to go through every item of an array, all dictionary, and it will do whatever we want on this data using function that we're going to send here. So what to do function, right? This function is just going to do stuff on all of these tasks, in case in our situation, things here, right? So this is perfect for us, right, because we want to do something like that. I want to attach. I want to, like, wrap, do homework with this item, right? And then I want to wrap it with the buy milk, clean room, and cook dinner, right? So here, when we enter into an orthosis, we can now type something like cardi brackets in order to enter Javascript realm, right? And now we can use this function. So we can say task. Let's map to each guy like this, each data, something what should be done with this data. But how do we do it? Well, we could make a specific function to do all this stuff, but because we have got what? Arrow function, we can do something like this. We can map and then say the name of each element, right? So we're going to call them task. But of course, you could call them whatever you want, right? This is the name that we've invented. We created in this particular praise. And now we say, what should be done to each of these tasks. So if we really don't do much, so for example, if we just make a list item and, you know, type something like that, it means that we are going to do four times like replacing the entire content with these things here. If I type here task, we're going to replace it with task string. It is very important that if you want to use this as a data as some kind of variable, not like a string, you need to know like two curly brackets. And now, for each element, right, we wrapped it with item. And now as you can see, we have displayed each item from the task list, right? So this might be confusing at start when you are starting using it, right? But it allows you to, like, in one line, instantly change like entire array, change how it, it's like, you know, displayed. We didn't need to make look for. We didn't need to, you know, create, for example, temporary erase or think about how to approach a problem like that because we just did just this one single thing to entire data like this because that's all what we needed to do. Map is powerful function that as you can see, saves you tons of time. So again, because I think this helps when we are trying to use different words when we are learning new things. So map is a function which assigns to each element of an array or for example, dictionary, what should be done on each iteration, so on each step. So if for example, when we are looking at this, it means that whatever is inside this box, which in our case, is tasks, I want to call each element task and this is what I want to do with it. So again, box, then map function, then data, then what to do. With data, right? And in our case, we need to if you want to access this data, we need to also do something like that. Pretty straightforward. After you use it a few times, it's going to, like, get into your vein, right? That's only a lesson. Thank you very much. 130. key - how to generate unique key using uuid: When you go into console, you will notice from our last lecture that we've got here some kind of warning. Each child in a list should have a unique key property. Okay. Firstly, this is just a warning. It doesn't mean that we've made an error, but this warning is here because it means that our list is not optimized for the situation when we're going to, for example, remove, add new elements dynamically. So we're going to change the state of our is in future. And well, this is something very important, especially when the list gets bigger, right, because you would need to update entire list instead of just a single item. So even if you're not going to change the tasks here, even if, you know, they are static, I think you should, you know, implement the thing that I'm going to show you soon because most time you can the situation might change for you, right? And the second thing is that you probably don't want to have errors in your console, right? Because if you like, let them, you know, increase in the amount, it's not going to be good for you. That's why we're going to solve it by creating something like are property, okay? But do we do that? You see, here, in the list item, we can set something like k and then here type, for example, unique. The problem with this solution is that it's not unique, right? That's why we have not working that we encountered two children with the same key, which is unique, or whatever we type here, it's going to be used a few times. And, yeah, that's not what we wanted, right? And we need to now generate something what is unique. Could, for example, use in our situation because we have different tasks name, right? So we did something like, for example, task here, because, well, they are different, right? Each task is different and working fine. The problem with a solution like this is that we can't count on that because somebody could by mistake, create two tasks with the same content. That's why in databases, each task has very frequently something called this ID, and we could use this D, for example, inside here, if the error here would be, for example, a dictionary with IDs or a unique identificator. The problem with our situation is that we don't have it. We could now put them manually here for the sake of this example. I'm going to show you something what is universal solution that will always work properly. And I think that rarely I could see it from other people who are teaching. So notice that we have got package models, and one of them is called UUID. And when we install this package, we can access them in our component. In order to access it, we need to import the function which is called V four. So from UUID and this function is function that we can now use in our code to generate a unique identificator. This is guaranteed that it is going to be unique, right? Because As far as remember, the chance to make something not unique using this is like, not enough planets in our universe or something like that. You need to go into details in order to to, you know, calculate all these things. But yeah, for our sake, situation is enough. So simply saying it is now going to guarantee that it's going to work. We could do something like that and when we refresh, as you can see, we do not have error, so everything is fine. This is unique. The problem with this solution is that when we return, like this is that this unique value is going to be always different, right? So probably it would be best to, like, attach it here for the array, right? So we could transform the array into, for example, dictionary. So you can call something like tasks, dictionary this time, and all we need to do is access tasks and use mapping again, right? So when we use mapping, we want to, like, for each task, do what? Do something like. And we want to create a dictionary, and this dictionary is going to consist of ID, which is going to be unique, right? And if we want to make it unique, we need to assign to it the result of the function V form, right, which generates it. And we can create a property, for example, text or content, task content, and we're going to call it the task, because we are really using this from here, right? Yeah, that's all. And now here we are not going to use tasks RA but task dictionary, which allows us to go through each element from the dictionary. And this time, we're going to access task, Cropca ID. And here, we're going to access task, crop car that sorry, text. And now when I refresh it, something is not working, but I probably made a simple mistake somewhere here. Oh, yeah. I didn't type constant here, and now it's working fine. So as you can see, we've transformed array into dictionary and later using this dictionary, we use ID that was like pregenerated here, right? Of course, it's not like this component needs to do all the stuff here, right? All these things could be fetched from somewhere and after fetching instantly, you could attach ID. And then this component for this playing, we just use this dictionary. We are doing everything in 15 because it's easier to learn on simple examples, right? That's only the lesson. Thank you very much. 131. filter - filtering - removing elements from list: Hello, my friend. Today, we show you how to remove tasks from the list dynamically. So here's the place that we use for displaying our entire dictionary, right, which also means that in this particular place is the place where we want to, like, create a button that will allow me to remove current list item. So to make it very simple, let's just create a button. And let's call it, for example, X. As you can see, it doesn't look good because we are using CSS from the pulse scale. You could change it later because this is not the topic of this lecture. This is pretty simple to do and you can do this as an exercise. But we want to now do something like that. When somebody clicks on this button, I want to remove the car rent item. And this is done how because we need to somehow, identify this with this, right? We need to know which button is assigned to which list item. The good thing is because we set something what is called key in the last lecture, we can use this information, right, because we can, say, Hey, when you like, click this, right? I want you to, like, execute a function that will remove the cover this item with this ID, right? So I think that in situation like this, to not make everything in one line, this is a bit, I think advanced thing. Let's maybe, you know, make it, let's say, not in online, right? Because there's too much content, too much code for this one line for removing. This could overcomplicate this line, right? So we're going to do something like making a function that does it, right? So let's create a function and let's call it, for example, handle. So we're going to handle the remove task event, right? And the suggestion here is pretty cool because we will have ID here, right? And now we need to just invoke this function here, right? So we need to say, Hey, this thing is going to handle removing the task. Now when I click on it, of course, this function is invoked, but we need to now specify how do we remove the tasks, right from display. And this is very, very important. Notice that this thing is really a normal variable, right, which is constant. And if I remove something from here, it doesn't mean that the state of our site is going to respond to removing it, right? Because, well, we are using react, we need to firstly use state for entire tasks dictionary, which means that we need to change this into what? Task dictionary, right, something like that. So, um, there's too much suggestions right now. So we need to have a hook right that connects the function like this to this dictionary, and we need to use the state, right, on the initial value. Because right now, we created the initial state for dictionary, right? For task dictionary. This is initial one, right? When the component is created, these are the starting values. Now, we are going to be able to, like, remove the values here, right? But as you can see, we've got error and well, nothing is working. It's because we used state, which is not imported yet, right? So we need to import it. And yeah, now it's working. So this is starting value, which is, like, transformed from this. Four tasks dictionary. And now, because this is a state that is observed by react, we can what we can change it whenever we want using set task dictionary. So when we handle remove task, we need to first invoke the set task dictionary and then do the stuff on the task dictionary, right? And the suggestion here is perfect, and I'm going to explain you it now. Notice that we've used something what is called method filter. Which as the name suggests, it filters out the task with the given ID. But how does it work? You see, we've got here arrow function, right? And do you remember how map worked? It was like it's some kind of loop inside, right, that is like doing all the things that we specify in the function on each element inside, right? And filter function is the same. But in situation of filter function, we are giving here some kind of, like, condition. So it's like that. We have data. We have filter, right? And then it's like data item, and then we like, create a condition. And now, this filter is like a loop that goes through every item in dictionary and checks if the ID that came from where from here, right? We haven't sent it yet, so it means that we need to do it, right? But yeah, when we send it here, so maybe let's do it. So we need to do something like that. Handle remove task, and let's send here task ID, right? Because we want to send the one task ID that we've just created here above, right? That's why we're going to connect removing with the key above. Okay. And now we've got this D here, right from here, and we are like comparing if the ID that invoked the handle remove task is inside of our task dictionary, okay? And if it's not because we are using the exclamation market, as you can see. The task is not gonna be removed, okay? But if it is equal to the one that we've just sent, okay? Then it's going to be removed. It's going to be filtered out, right? And now, as you can see, when I click on it, the one that we clicked, when I refresh, everything is coming back, right? But clean room. Okay, it disappeared, right? We have no animations. Everything looks very bad, but it's working properly, right? So again, filter is a function that works very similar to map because it goes through every element inside of array or dictionary, but it doesn't execute an function, but you give it some kind of condition that it bases its action, what should be done, right? And in our case, we are checking if the ID that was sent here on click Button is not equal to the one that is currently in our dictionary, right? And if it's not, we're going to keep it. We're going to create a new array with the kept item with kept task, right? But when this is going to execute and we find ID that is equal to the ID that is within the task dictionary, right? Then the filter function just removes it. It's not going to be honest, it's not like it removes it. It's not going to be added into a newly created tasks dictionary that we've just said it here. Notice that when I remove this part, this is pretty cool. When we do something like that, when I refresh our page, notice that nothing happens, right? It's because, yeah, I filter the task dictionary, but we didn't involve the change of the state, right? React can change the state of the task dictionary on using this function. And so we need to use that set task dictionary like function because we hooked it to this. And now, as you can see, removing is pretty clean and easy. 132. new task item - accessing forms using dom - uncontrolled forms: Hello, my friend. Today we are going to create input text that will be added into the list when we click a button. So how do we do something like this? Well, we are in unordered list, so I think that we should put the button before it, right? And let's create button. And let's call it Add task, for example, right? And when I click on it, I want to add the task. That is going to be provided from input, right? And this input type is going to be text, right? So from here, whatever I put, I want to make it here. Okay. So the first thing that we need to think about is, well, how do we access the at task button click, right? So we need to just use the OnClick, right, because OnClick is the react attribute that executes when the button is clicked. And we need to invoke a function. For example, handle at task, right? And we need to define it now. So handle at task. Let's define it. And to be honest, the solution here is pretty good. And yeah, we can keep it and I will explain it how it works. So first, we have what an arrow faction, and the second thing is that it's super important that when you are changing the state of what of our task dictionary, we have to use the set task dictionary method, right? Otherwise, it will not affect the state. So the things that we see on our page properly. And the second thing this is very cool is like a shortcut for updating this state. Because you see, here we have got something like that, free that's and then the tasks dictionary. This thing is really like, Hey, expand whatever we had in the tasks dictionary in this place, right? And then after that, when you see here, as you can see, we have comma, and we have got a new value for this task dictionary object, which is going to be the ID of a newly created generated V four our unique ID and the text is like, you know, the predefined one. So it's not like we pass it somehow. So for now when we just hit task, whatever is typed here, even if it's nothing, we are going to dit, right? We can also now remove whatever we want. When we refresh, we are going to the initial state. But yeah, we can now add something, but it's not what was put into the input. And now this is very important because to be honest, we are moving into the lectures regarding how to operate on forms in react. And there are two ways to do it. You can do it react way that we're going to talk in future lectures, right? Or you can do it semi all the way. There are benefits of doing it, of course, using the react because the state of everything is going to change easily. But when you're going to do it using the react metic, it's also going to cost you some time to, like, write a code like this. But let's see, how do we solve a problem like this? Well, firstly, we need to think about how do we access value from this input here, right? Well, to be honest, we could use here, for example, ID and let's call it, for example, new task input, right? Something like that, for example. And this means that, yes, we can access this ID from whatever place we decide now, right? So it means that here we could easily do something like, Let's access Document getElement by ID. This idea, let's take the value from it, right? So now when we do something like that, as you can see, we add the text that was here, right? And after adding this, well, we should, I think, also, yeah, do something like that. So empty the thing that was typed here, right? So when we do it like this, as you can see, we can now type the value here again, right? So this is simple the most simple solution that you can do, right? For very simple inputs, that might be enough. But, you know, we are using react because we want to have everything reacting to states whenever they are automatically, right? We didn't decide to go into react to write like this. So in future lectures, I will show you how to solve it react way. That's only a lesson. Thank you very much. 133. useRef - accessing/referencing DOM: Hello, my friend. Today we are going to talk about something what is called use ref. Okay? But before we go into this topic, I'd like to add to the last lecture a bit more information regarding why, like, you know, using directly document object model, like we did here is also not good. Because we did it directly, we like bypassed the default process of updating the state in our application. React uses something, what is called virtual document object model, and it is like a copy of our current document object model, right? And when it updates something in this virtual jc model, it's going to compare what is in virtual, what is in the one that we have here, right? So it's going to compares the states, and if something changed, then we know about it and we change only the thing that we need to, right? So there might come a situation like this unexpected behavior, right? Because react might not know about the changes that we made directly like this, right? So it might fail to properly update the user in interface. So there can be also issues with re renders. So this is like a spin that you should avoid, right? You shouldn't do it this way. And we can improve it a bit like use, let's say, semi react way to access document object model, but using something, what is called use ref. How do we use it? So how do we use use ref? Firstly, this is a hook, so we need to hook this thing to something, right? And this something needs to be in our document object model. So, for example, in our input, we will not need ID anymore, but we will have just a reference we're going to hook to. Okay? Soon we will say how it's, you know, working and what it does exactly. But first, we need to hook it, right? So how are we going to call it? Let's say task input reference, right? This is called ref from reference because you're trying to access it, right? Referencing to something means that you are trying to access it, right? And now we need to specify this, well, hook, right? So let's specify it, for example, here, and we're going to do, something like this, but we are not going to um create reference, but we're going to use reference, something like that. Okay? We don't need to pass here or anything, but we need to inport it. So here, use reference, right? And yeah, we've just hooked, so we connected this variable. To refer to this input, right? And in simple terms, use reference is allowing you to create a persistent reference to a document element object, or value, and it stays the same across all randoms. It is very important because it doesn't cause the component to render when the value changes. When the use state happens, right when something changes, one thing is hooked to another, the rerender will happen. In this case, no, for example, when we have assigned to an input field something like this, and we hooked it here, it gives us direct access to interact with the input field, like for example, getting or setting its value without needing to use the react state. So in short, it's like saying, Hey, remember this document object model element, right? So this thing or maybe value. Let me access it whenever I need, but don't cause the component to update because. So this thing is good, better than accessing it directly because it works within react life cycle and ecosystem, right? So it keeps the component logic consistent with Rax approach, right? It follows the react principles, right? So first, we inform anybody that, yeah, we are using the direct access in this case, right? There are some kind of optimizations behind the scene, right? And so well, the most important thing is also that when a renders the component, when the states or props change from entire components, so for example, tasks list, right, the reference like this is not going to be lost, right? So it keeps that's why I said before that it keeps a persistent reference to the document object elemento so this is like the react way of doing this thing. And after we reference it, it means that, yes, we can now access it in any place here, right, in this component, task list. So in our case, instead of changing the text this way, right, we can, for example, go into the handle task, right, and create, for example, variable like this. So we are creating a variable that is called new task, and we are referencing the task input reference, which is cooked here, right? And we are accessing from it current value that is in the input, okay? And now this thing we can use to update, for example, the text, right? Or we can use it also afterwards to set it to nothing, right? Do we need this variable? It really depends on the taste of how you write code, right? Because, of course, we could write it also this way and everything is also going to be fine. It really depends on how your code is going to be expand the later, right, how many times you're going to use it. But this thing, did solve our problem. As you can see, yeah, we can now add new values. Everything is working perfectly. So This is the way to access directly things from your document object, but using react ecosystem. Okay? So that's what you need to remember from this lecture. In next lecture, I will show you how to do things like that, using react way of doing things. 134. onChange - controlled inputs in React: Hello, my friend. Today we'll learn about something, what is called change, and we'll learn about how to create forms that are called managed state forms. Okay? So it means that the state of the forms so how values change inside of our form is managed totally by react, right? So in order to even do it, we need to firstly create a state for each new task. Okay? So when we go here, instead of using reference, we are going to create a constant variable that we're going to call new task, right. Let's create a set task, new task, right, and the default value for that, it can be like empty object, right? So this is like thing that is going to store new task value that is going to be inserted later into task dictionary, right? And now we need to change this anytime something is put into, when it's put into the input. So instead of referencing it like this here, now we're going to access something what is called change, which is like something that executes itself, okay, when the state, when the value of the input is changed, okay, by the user. And here as you can see, the suggestion here is perfect. Why? It is perfect because we have an RO function which by default takes event, because when the event like unchanged happened, we have event object that we can access. And inside of that event object, we have property like target and value. And this thing is like storing whatever we put here in our input. So anytime I put a new character here, I want to invoke the set new task, right, which is hooked to new task. And we changed it to the new value that was put by the user here, right? So anytime there is a change here, I want to change the state of new task. And that's why, well, we are now having react managed state of the text inside our input. Anytime somebody puts here something, the state of new task is changed, automatic ad, which means that we can now access this anytime we want, for example, I don't want to access the value inside handle at task. Let's access it. Do when I want to empty after using it, well, we need to use set new task, right? Because remember, we do not access something like that never directly when it's hooked, right? So now when I add a new task, you can see it's being added, but we didn't change the state here. Why is that so? It's because the value of our input is not set to what to new task, right? That's why we need to change the value to new task. So now, the current value is also following whatever is being made from react component faction, right? Before we made it on one way, right? So when something changed here manually by the user, well, we change the value of new task, right? And later when we change the set new task to empty, yes, we did it, but we didn't change the input value, right? We just changed what is hold inside the new task state. That's all. We didn't change the value of it here because it wasn't like made it to be changed by react, right? We need to say that, hey, the value is now equal to new task always. And because of that, now when I add a new task, as you can see, our input is also empty. So this is the solution that is now like a pro react wave, right? We have a managed form by react whenever something changes from the code, right here, or this the react will react for this state. I like using the name of reactor because it shows why it's also called like it is, right? It reacts automatically to changes. So because of that, you do not need to think later when you implement the component, when you change the state using the set new task somewhere, you do not care about updating the value, for example, here. You know that it's just going to happen, right? And, you know, components can share the states, right? You can even, for example, in future, learn about something what are called managed states libraries. And the cool thing about the solution like that is that it's now universal, right? It means that it doesn't matter where you change the state, react well react accordingly to what just happened. That's only the lesson. Thank you very much. 135. onSubmit - how to create forms in React?: Hello, my friends. Currently, when we type something and I had enter, what's happening? Nothing. It's because input is not like, you know, connected to this button. This HTML tag is like nothing to this input, right? We really connected everything here, right? After somebody invoked this, we invoke this and this, right? But to be honest, normally, when you're creating forms, you want to have a feature like, for example, when somebody hit enters, then the button like this, for example, is the button that invokes submission, right? It submits the data here and the data is added. You could, of course, you know, make your application like detect, enter, and then react to it, right? But this implementing things that are already implemented within HTML is not needed in situations like that, right? So let's maybe change this into like a form, right? We have HTML form which normally wants action but in our situation, when we are using react, okay, we have got something what is called submit event, okay? That is going to be invoked when somebody well, submits this form, right? So right now, we can just move this to this place, right? So we're going to handle at task right now using form, not using buttons. So we can remove this. But notice that now, when I hit at task, well, something happens, it's because the type of the button is by default submit, okay? But it's good idea to, you know, specify that this button is for submitting. So I know that this button is going to be invoked when somebody hits Enter, right? And now there is a problem because whatever I type, we can see that something is trying to show up here. And when I hit Attas also, but it's like everything is refreshing, right? And, to be honest, yes, this is what happens because by default, form is working this way that when the form is submitted, we gonna, like, um, put somebody in another place where is the next step of this form, right? So for example, we're going to show a recipe or we're going to show the smeary of the order or something like that. But in our case, we want to stay in this particular place. And in order to stay in this particular place, when the event like Oso Bid happens, we invoke handle at task, right? And handle at task has got something, what is called an event, okay? I did something by mistake. It has got event the object that comes here automatically, and it has got all the information regarding what invoked this event, right? And we can, as you can see the suggestion here, do something like prevent the default behavior of the submit event from the form, which is, you know, refreshing the page. If you do not, you know, specify the page where we going to send the user, the page by default is the same page. So we just prevent the default behavior, right? So now when we type something here, as you can see, we are adding a new element at the end, right? We can also hit the button and it's also going to work, but we are not going to be moved into another website. So we had to prevent the default behavior of the event that is caused by submitting the form. And yeah, right now, we have just implemented pretty easy what an action of adding using Enter, right? We didn't need to manually do all this stuff. Notice also that we can right now add an empty input. And I think that something like that should be prevented, right? So how do we prevent something like this? So we could do something like that. I like the suggestion here because somehow he managed the AI managed to, like, know what I am thinking. So now, as you can see, when there is nothing, right, it's not going to be added. So we just compared new task, so the value of the input. To nothingness. If it's nothing, we are not going to invoke the rest of the code because when the written statement is met, remember that the JavaScript is like living this function instantly, right? So the rest of the code is not going to be invoked at all. So that's how we did it, right? 136. [EXERCISE] useRef - practical example - refocus: Hello, my friend. Currently, when we type something here, what's going to happen when I hit Enter? Notice that the focus is coming back here. It's because this is the last input that we have used. But what will happen when I type something and I hit manually at task? As you can see, our user needs to now manually click here, which is going to take some time for him, right? If he's like, Okay, I need to add another and another, right? We should always improve the user experience. The default behavior, I think, should be like, Okay, let's go back here and make this input focused again. The question is, how do we do such stuff, right? We've got a problem because how do we refer to the input? This is a practical example on when you should use what attribute, J attribute here, right? And we can call it, for example, input task reference, right, and we need to also define it, right? So here at the top, we should do something like that. Constant input text, reference, and we need to use ref. The default value for it because here you can send also a default value is going to be known. So now using this, we can access our input a a time we want. But the question is, how do we like refocus the input here? Okay, so when the handle at task is invoked, this is the moment that we want to, refocus, right? So it means that it should happen in this place, right? So after we prevent the default behavior, we should refocus, right? So I think in this place, we should access our input task reference, and now access the current reference. And notice that after that here, we've got here a method that is called focus, which is just going to refocus it to this input. So now when I do something like that, notice that always focus is here, right? So it's always coming back to this place, right? Also, if you want to make a focus on the auto when our page is loaded, right, because I'm refreshing in the background, right, then you could use this, but no, that's not a good idea because why create a code for that when we have good attribute for the specific situation like that? Like that is called auto focus, right? So when you add attribute like that, now when I refresh as you can see, the focus is automatically here. But remember, this thing works when it works on when the page is loaded, right? As you can see now, it's not working, right? So this is on the first time somebody like load our application. But afterwards, if you want to focus on some part of your application after some kind of action like, for example, event of handling the task ad, right? Then you need to do it manually. So we can clearly see now that yes, there are situation when you need to use the use ref and ref attribute, right? Because the state in this situation would be like both. What should we do with the state in this case? Would it even be like you know, this would be stupid to use it here, right? We do not need to share the state of focus for our entire application, right? So there are situation when you want to use sref, not only for optimization, but also for something simple like that, right? It's not like this exists only to allow things that are like, outside of, you know, for people who are not following rules, right? Okay, that's only the lesson. Thank you very much. 137. sort() - how to sort list?: In order to sort our updated tasks, we need to invoke a function that is called sort. And as you can see, we have here now a suggestion from AI that we allow you to sort by something what is called IDs, right? But this is not what we want, right? We want to sort not by ID, right, but we want to sort by text because we have here proper ID and text. So instead of this, we want to do this. Now when we add here a new value, as you can see, because it started with A, it is a di start. So we have A, B, CD. So everything works as we had wanted, when we put something like this, as you can see, it's working fine. The question is why it's working fine. So now I will reveal you a secret of how I work with sorting. You might be like, Okay, I have to understand what's going on in the background here, right? But to be honest, I would really prefer if there was a function like that. I want to sort everything by ascending order, and I would like to sort it by the value of property text from here. That's all, right? That would be cool, right? And to be honest, when you would read this, it would be okay, this is understandable. So we are right now in the era of artificial intelligence. So losing your precious time in order to understand why this particular place looks like that, and it's going to look a bit different for, you know, sorting different ways because there are many ways of sorting, right? Please don't do it. Have like life, right? Because if I decide to sort now in descending world order, for example, I'm going to do just like that. So I've just invoked my artificial intelligence with using Control plus I, and I'm like, I want to sort it descending order. Okay, so I need to just firstly put B and then A. So now, as you can see, when I put something here, this is now descending order, right? Do I have to remember it? Do I have to understand it? This is not like super crucial to make a result of creating a functional program, right? You as a programmer should understand rather things like the logic, how everything is put one after another, why you should optimize sometimes or maybe not. What are the ways of creating a code that disorganized and so on? You have an idea that you want to implement, right? So you order right now to the artificial intelligence, what should be done in a specific place like this? Why even bother understanding this part exactly, right? So this is my secret for you because to be honest, sometimes I forget things like that. It might be because I have ADHD. But I've been programming for over 20 years, believe me. And even though I, you know, did it without AI before, sometimes I use tgoFlow. Sometimes I use Goo good because I was like, This is boring stuff. I have already learned it once, but I haven't used it, for example, for, I don't know, one month and I'm like, Okay, so I need to do it again. I'm like, I don't remember exactly if in this particular programming language, it should be done this way or this way, because the stupiidest thing is that each implementation of sorting is going to be different for different language. This thing is going to be called different. This thing might be access differently. Here can be different invocations. So it's like I am a programmer who is jumping between languages, for example, right but to be honest, I do not care about which kind of language I'm using because I can, like, fit into any programming language instantly because they are all the same for me. Because of how my mind is working, right? Because I don't care about exactly how this part is done in the background, right? But I just want to have an effect that is working accordingly to what I want, right? This is very crucial information, especially nowadays because some people will lose your precious time on understanding parts like this, okay? And, no, this is the old way maybe used to need to know things like that. But nowadays, Really? It's you would need to, like, memorize it or understand it, and you would lose, for example, 1 hour, maybe 2 hours for this part, and if you haven't use it for some time, then you're gonna forget it again and you will be just confused. Why there are so many things to memorize, right? So I know that this lecture shouldn't be that long, but I really feel like people are not moving with time with what's going on in the world currently, right? So yes, you need to understand whatever I've said in this course so far, in order to know how to develop applications. But parts like that, please, this is instant solution from any AI model. That's only the lesson. Thank you very much. 138. [EXERCISE] How to create toggle asc/desc sorting button: Hello, my friend. Today we will make a toggle button that we toggle the state of sorting for our list. And second, when you think about state, so when you say, Okay, I want to change the state of something, it means that we are creating what a connection, a hook in re. Right? So the first step for us is going to be creating a constant variable that we're going to call sort direction, and we need for it a setter. And yeah, the default behavior, let it be asked from ascending, right? We're going to, like, switch between. Ask and between the sending mode. The next thing is that we need to create a button that is going to represent the struggle. So we need to create a button for this. As you can see, the suggestion here is perfect. That's why I like to use autocomplete like the one that we've got here. So it is like making a condition inside. That checks the current state of sort direction because the current state is ask, right, because that's the init value. We're gonna put here descending on text here, right? Otherwise, it ascending. So it's going to switch right when I click on it. Of course, we need to handle it, but it's going to just switch. Okay. So this is call, but we need to now handle it. So on click, we need to invoke what? The handle sort function that we need to now specify. Okay, so it's going to be specified here handle sort. Okay? I go to complete like that. And now is the time to sort things. We could do it how it suggests, but I'm going to show you something cool. So firstly, I'm going to create a sorted tasks, temporary area. Okay? And now we can see a problem that is shown only to people who understand what's going on. As you can see, the first suggestion is like this. Is it okay? Or maybe we should do it like the second suggestion. Normal with people who don't understand the background could just hit up. Everything is working fine, right? But no, no, no. There are some concepts you need to understand behind the scene as react developer, like what? Why this is wrong? You might be thinking. Because SORT function is really affecting the original state of who of something that is hooked to set task dictionary, because SRT is working on the original like array, right? And it's going to replace it. Okay? That's the difference. Here, we could do it because we're working on temporary updated task. We didn't work on task diction array, right? But here, we can't do something like that because remember, you can change and react your hooked state only using the method that is specified here. That's why we need to use the second suggestion, which first make a copy of it. This thing here is really extracting entire tax dictionary and creating a copy here, and then we are sorting a copy. This is very important, totally different from, from what we had before. Let's see if there are also some other ways of sorting because you can see you can easily see the suggestions here. But Well, to be honest, this is the thing that we can do all these ways, right? But I think that we should first make, like, check if we want to make it ascending or not. Oh, yeah, this is the solution that I like. So if we have ascending, then we're going to make it this way. Otherwise, we want to switch, right, because we are switching A to B, B to A, and I think this is going to be cool. So this thing is now something that we want to set here, set the task dictionary, right? And also, yeah, we want to set the sort direction. We want to, like, reverse it. As you can see, this autocomplete with a person who also knows how to code, right, is pretty awesome, right, because it allows you to like spot where errors are, if you understand the process, but also use AI for your advantage, right? So I think this is pretty awesome. 139. Why do we refactor the code? How to do it? A trick to do it faster: Hello, my friends. Today we are going to talk about refactoring, so changing the organization of our code. Because, to be honest, look, we have all the application inside one function right now. And inside of it, the component is responsible right now for such many things, like, for example, for adding new tasks, like for sorting, for displaying items. That's just too much, okay? This is not how we should write programs in react. Why? Because, well, right now, we can't fix the form without touching the list, for example, right? We are like, Where is that? We need to It's like everything is in one place, right? So it's not like we can fix one piece of, for example, ego, right? We need to rebuild everything because everything is in one single place. There is not one program can focus on this, the second on this. It's not like you are looking at the one thing and Okay, this is here, this is here, then this is here. As you can see, right now, we have so many states here, so many functions, and also here, it is a bit cluttered, right? So it's also not easy to reuse our parts elsewhere, right? If we had decided to, like, for example, be able to display task item in another list like this, then we would need to rewrite our code, for example, right? And that's why you should divide components that are big into smaller components. That's one of the reasons, okay? We'll talk about that later also when we finish splitting it, okay? But this is, I think, the most crucial one in the first glance. So how do we split things like that? We have two ways of doing it. And let's split firstly something what I think is going to be the easiest to split, okay? And I think that we're going to start from sort button, okay? So from this thing, okay? I want to split this into a component. So what do I do? Well, I think that we're gonna create a component in future that we're gonna call sort button, for example, right? So this thing is going to be responsible for sorting sort button, okay? And inside of the sort button, but this is gonna be like that. So I just want to have sort button here. And we need to, like, send the direction from codium the autocomplete was right here. So we want to send direction of sorting, right? And we need to also, yes, specify what should happen when the sort occurs, right? So we need to send a function to the prop sort. So notice we have direction and sort. And these are right props. We have talked about them long time ago, right? So you can send any state, right, two different component. And also, as you can see, you can send a function to the component, right? Okay. And after we send this and this, we need to, like, you know, decide what to do and what to display, right? So the thing that we do here, we're going to do right now we inside our sort bottom. And now we have two things we can do. We can create separate file for sort button, or we can create a component above here for sort button. And now I'm going to tell you which way is better and when. I almost always start to start creating things like this inside the same component that holds components that are connected to each other. Okay? And the suggestion here is perfect because we are creating a function, right? That takes two properties, sort direction and sort, and now we can do things with that. And why do I do that always in here? I do it here because sometimes components will never be reused, okay? This can happen, and to be honest, it's very often when it happens. And now imagine that your application is very big. And if you decide to create a component for totally every possible like thing in your application, your Pi system here is going to be hard to maintain, right? So this is disadvantage. And in addition to this, whenever you're going to, like, you know, want to look for the code that is connected to the component that will hold, like, for example, task is, other components. You need to jump between FIS and to be honest, I find it unproductive, okay? But if you are working on a very big project with many people, then maybe this is the way to go. But most time, there is no need to split it into PIs unless you see the possibility like, Okay, I have to have this sort button in another component because I have sort buttons for many different things, for example, right? Then, yes, do it instantly. Otherwise, keep it in 15 because also, I would like to add that, you know, if you decide that this needs to be in separate file, how long will it take? You just need to take the code from here to another file and it in separate file. Now you can reduce this component anywhere. So this is the way I do stuff. It really depends on the company. You need to follow the rules there. But if you're self developing things, I think if you decide to create a different file for each total component just in case, then you are just going to lose lots of your precious time, right? This is just not needed. Okay, so now we have a component here, right? And to be honest, we need to now do whatever we did before. So before we did something like that, right? But because I copied it from here, right? But instead of using the like handle sort directly because we do not have access to it from this particular function, right? We need to do what? We need to, like, use the function that was sent here. The name of this prop is the same as before, so we can just keep it. And our code should be working now, but as you can see, we can't see the button. It's because notice that we use JSX here, but we haven't returned it, right? So we need to return whatever we did here, right? Now, as you can see, we can use our code like before, but we have splitted one single component. And now I show you some kind of like a shortcut to writing this component, okay? Because there is a way to, like, not having to return for simple components like that JSX. All you need to do is just remove this part, and instead of using curly brackets here, we're going to use just parentheses. And as you can see, it's still working fine, right? This is like a short version. I think it's pretty cool because well, writing return and then adding parenthesis, it also takes time. I like the short versions also easier to read for a situation like this. That's on the lesson. In the next lectures, I will show you how to split the components other components, and you might also try to do it on your own, right, in order to exercise. 140. [EXERCISE] - Refactor Task Item Component: Hello, my friend. Today is an exercise that you can try to do on your own. I want you to split this part of your code into another component that's going to call task item, and it will be responsible for handling the rendering of just individual task, right? Because task list is like a component that manages all the mini components right now. But task item is responsible for just displaying task items. You could later, for example, reuse this component if you decide so in different list, for example. So you could create this a separate component or inside of the task list component right now, and in future, you could put it into another phase. That's how you do it, as I said, area in the previous lecture. But for now, try to just split it. I will show you how to do it. But try to do it on your own because this is a great exercise. So how do I approach problem like that? Firstly, we can command what we have here, to have, like, you know, to see what we had before, right? And now what we need to do. We need to, like, create a component, so that is going to be called task item, right? And we need to decide what to send to it. Yes, we need a key because without key, we won't be able to identify specific items. We need task, and we also need to send a function for removing specific task, right? And all the other things like task ID task is going to be inside the task item now, so we can easily use all the information then to do this part here. So uncomment it, cut it, and we have ready the component usage here, but we haven't used it yet. Notice that also that the key is not the thing that we've sent to the task item component. This is the thing that we've sent as probes, but key is just a property. It is not probes. It is an attribute that is used in react to specify the key, the uniqueness for the specific element, like, for example, task item or form or anything else, right? So this wasn't sent to task item. It's like, Hey, we specified the key here, but here we have the rest, right? Okay. And now I think let's do like we did before. So we're going to specify our task item inside. So all we need to do is create task item, right. And yeah, the suggestion here is good because the A I saw that we decided to use the syntax from the P previous lecture, and we need to now paste the thing that we had before, right, like this. And now the task is properly used here already, but we do not need to set the key right now because the key was set before, right? So the key is not needed here. And yeah, we've got text shown and afterwards, we have a pattern that on click invokes remove function with task ID coming from here, right? And now when we go here, as you can see, when we add a task, when we remove it, something is not working. Why is that? Let's open the console, click here, and let's see the error message. As you can see, it says that remove is not a function at onclick, and it's true because we called it here n remove task. So maybe let's change it to remove. And now, as you can see, it's working like before, as intended, right? In order to split components, all you need to remember is about what you need to send to them, right? What kind of props. And then just display whatever they displayed before. 141. REFACTOR: TaskForm: Hello, my friend. Today, we are going to split something what is called a form into another component. So we are going to make a new component be responsible using the single responsible pre simple for handling only form input and submission logic, right? So this part of our code wants to be moved into another component. How to approach it? Well, we need to create a new component. Let's say that we're going to call it task form, right, like this. And we need to decide now what to send to this task form because you see, there is a problem. The problem is that we are really using a function, like, for example, handle at task. That is working on set task dictionary, set new task. It's working on the input task reference. Wow, this is also something like we are working on something that is inside of this form, right? So this is going to be a bit different. So stay with me. So let's delete this and the approach that we're going to take in this is, let's create a prop, okay, that we're going to call handle at task. We are not going to do was suggested here, but we are just going to create handle at task. So only thing that we are going to send in our situation is going to be this function here, okay? Nothing else. And based on that, we need to decide how to write well, our new component, right? So let's go here and let's type task form, right? And, yeah, equals, we call it on at? No, we called it differently on AT task. Like that. And, you know, the problem is that we need to now use curly brackets. It's because we need to now return whatever we did before, so this, right? And also, we need to, like, do some stuff up here. It's because we need to access things here inside our, like tax, HTML tags that are really coming from the parent of task form. And this is a bit problematic. How do we solve it? And also, remember that the task form should be responsible for things that are connected to task form. So let's say, we've got here a new task. Do you think that we should have in the tasks list? Like logic responsible for creating a new task. Nah, let's move it up, right? This is the first thing that we need to change, right? Okay, the second thing that we need to have is, like, notice well, we are going to where is that? Sorry. Input, right? Input task reference. It's not needed right now here, so we need to move it up here, okay? So what else is here to do? On submit. We've got here on submit, and I think that we need to now write our own function for handing the submit, which is going to base a part of submitting on the function that is sent here, okay I know it's a bit complicated right now, but I think this is a good idea. I soon show you why is that so, okay? Here we are using set new task, which we have here right now. We have this. Okay? So we need to, like, Okay, let's check what we have and what we don't. So New task, yeah, it's there. We need to create a function, which is called handle submit. Okay, that's this. And now we need to decide which parts should happen in task form, right? So when we are handling the submit right now, some parts like this that we did here are really connected to handling the submit button, right? So we want to prevent default behavior of our entire application. We want to focus on input tax reference, okay? That's okay. And if nothing is put, then let's stop, right? And now, this is crucial to understand what's going to happen. Notice that the suggestion here is perfect because we want to use for adding the specific task, what our function that was sent to task form, right? That way. Afterwards, set the value of the input to nothing, right? But when we move to this thing right on at task, so notice that we are here, we already sending handle at task, right? So this and notice that here, we've got function that has an event here, and this is not the thing that we have here, right? What did we send here using the new task? We really sent the current value of this input, right? So let's call it, for example, new task, right, or new task text. It's up to you because you are like the one who says how the cod variable is going to be called. And remember that this is not event this time because handle at task is not invoked automatically when the event of submit happens, right? Currently this is our own prop, right? So the value here is really the one that is coming from here, right? Okay. So we can call it new task, maybe to keep it everything the same, right? And yeah, you are updating the tasks. And yes, this is our responsibility because we are inside tasks list, right? That's good. Now then we are sorting everything. Yeah, that's also good. And we are setting the task dictionary to a new one. And this part is going to be removed because tasks list is not responsible anymore for what? For setting the new task input to nothing, right? Okay. And yeah, I think that it should work. Let's try it out. As you can see we've just added whatever we add here, it's going to be added. We can also sort. So everything is working like before, but now we've splitted responsibilities. And now, after this lecture, you might be wondering if you have to split things like that, right? You see, it really depends on the project, right? Sometimes it's easy to just put everything into one component and, you know, call it a day. If you're writing something very fast, if you are like, you know, that this is a small project, you just want to have fun. Keep it in one component. This is your job, right? But if you're working with other people, it's rather better to, you know, start thinking about how to split the responsibilities, right? Because right now each component is smaller and it is easier to understand. I know that it might seem weird to you right now when you are looking after refactoring everything that it is easier to understand. But it is because we were writing the code within one, you know, big component before. For a long time, right, you just got used to it. But if you had a programmer that has never seen this code, right, and he saw this big component with everything inside of it, he will be more confused at looking at the thing like that. Okay? So rather think this way, okay? You are rather going to, you know, work with other people in future. So when you want to change something like one feature like styling of the form, you won't affect other components, and you know that you can stick only to this place in order to do things regarding the form, right? Because this is the responsibility for it. Also, there is something good are called test, and it's become simple if components are focused on one thing, right? You can test each component individually. What's more, when you split things like we did now, there are going to be some kind of optimizations in the background while re rendering the virtual document object model that we have talked about before. So before we had a big component, whenever anything changed, regarding task form regarding sort button, regarding task item, all that function with all the instructions had to be run and the virtual dome had to be changed. And afterwards, if there was a an actual change in the state, so what is visible to the user, then the change was applied. But yeah, all these things were run in each re render. This is really not, something that you need to worry about in small apps, but in bigger, this becomes problematic, right? So right now because we have splitted, everything, then it means that there can be some kind of optimizations in the background. What kind of let's say that when the new task state changes, only the task form re renders, right? Not the entire task list. Right? You could even more optimize it in future using memoization that you can learn about. Or maybe in future react, it's going to be done automatically for you because there is going to be something good, it's called compiler in react. But yeah, there are some kind of optimization that react with process in the background. So there are advantages of keeping everything organized and not everything in one big component. Even if, you know, the components inside like, you know, the sort button that we had Task and task form were very connected to each other, right? Even if you were like, Okay, this application will never go outside of the scope, right? Still, it's good idea to split it. And like, I would like to summarize this lesson by saying, it depends on your situation. So don't be like, you know, gurus on the Internet that says, No, you have to do this this way. No, you have to do this this way, and then you are anxious about your code. For example, just keep doing stuff and, like, destroy it. Because while you are creating your code, if it is good or not, it doesn't matter. As long as you are creating, you go to learn from your mistakes because you go to say, Oh, that's why I should have done it this way. Okay? Just keep doing. You will be fine.