JavaScript Project: Build a Random quote generator App

1. Introduction: Everyone in this class, we're going to build a random code generator app using JavaScript. This is how our random code generator app is going to look like. If you click this next code button, a random code will be generated, and the authorym of this code also will be generated. This is the code and this is the authorym of this code. If you click this next code button again, again, a new code will be generated with the authorym so you can click this next code button as many times as you want to generate random codes and to generate this kind of codes, we are going to use this DumJsNs API. We'll talk about this inside the class. So if you want to know how to build this kind of random code genitor app, join the class and let's start building this project. 2. creating structure using HTML: So in this video, we are going to write its Tamil code for our project. So to write the code, I'm going to use this Visual Studio code Eitor and inside this visual studio code editor, don't forget to create one folder. And inside this folder, you have to create three files app dot JS HTML file and CSS file and go inside this HTML file, and inside this HTML file, we can write down HTMal code. So to start writing our HTML code, we have to create one HTML boilerplate. So to create the mal boilerplate, you can just type Eclamon Mark and click Enter and your HTML boilerplate will be created. And now we will link our HTML file to the CSS file with this JavaScript file. So to link this HTML file with the CSS file, you can just type Link tech. So just type Link and click this link Column CSS and your CSS file will be linked with your HTLFi and just check your CSS file name is matching with this HRF. My CSS file name is Stylo CSS and inside this HM it's written Stylod CSS. That means my CSS file name is matching with this HRF filename. And to link this JavaScript file with our HTML, you have to go inside this body tech and inside this body text, you have to create one Script tech, write a script and you will get this script column ARC, just click this. Inside this SRC, you have to type your JavaScript file. Our JavaScript filem is AB dot js. I'll type Abdo Js. And now we have successfully linked our CSS and JavaScript file. And now we can write our HTML code. So what we will write inside this HTML to check this, I'll open my project and inside this project, you can see, we have written random code generator, and this is written using H one tech. I'll create one H one tech and then I'll create a button where next code is written. That means I'll create a next code button and just click this button to check what if we miss something. So to display this code, we'll create one H one tech and to display this author name, we'll create one paragraph tech, and we'll create one next code button. So we have to do just three things. We have to create one H one tech, one paragraph tech, and one button tech. So you can just type H one to create 1h1t and inside this H one take, I'll write random code generator. I'll just reload this and I'll just copy this and paste it here, random code generator, and now I'll create one paragraph take for author's name. Now we don't have any author, we'll get the authorym from the APA, which we'll be talking about in the other videos. Create this empty paragraph t. While we are creating this empty paragraph te, we are creating this empty paragraph take to display our authorym so for now, we don't have any thonym. That's why I kept it empty. And then you have to create one button te so to create button take just write button, U double T, and button. And inside this button, what we write? Inside this button, we will write next code. Copy this and paste it here, Control V, and then save this. And click right click and then click this open with live server, and our project will be visual in our brief browser. As you can see, now you can see one H one tech and one button tech and this paragraph teg is hidden because we have not written any content inside this paragraph tech that's why it's hidden. This is it for our HTML code. Now we'll write the CSS code for our project. See you in the next video. 3. Adding styling: In this video, we are going to write CSS code for our project. To write CSS code, I'll open my VS code aid and then open this style CSS file, and inside this style CSS file, I'll type my style CSS code. So what could we are going to write? To check this, I'll just open my project. And inside this project, as you can see, wave a background color and then wave font family in this text means a different font family in this text. And then some styling in this button. For this font family, I'm going to use this Google fonts, so you can just visit this Google phones website and search Avorito then after searching Avoito you will get this kind of interface. And from here, you have to just click this input and then copy this link means copy this input URL, and then paste it here. In the beginning of the CSS file, and now I'll start writing my CSS code. First of all, what I want to do is, first of all, I want to bring this content in center. To bring this content in center, I'll just select this body tech, to select this body tech, I can type body. And create these curly brackets and now my body tag is selected. What I want to do, I want to bring that content in center. To bring that content in center, I'm going to use Flexbox. To use Flexbox, you have to use the property display flex, just type display and then type flex, then flex direction will be column flex direction column. To bring that content in center horizontally, I'll use justify content, justify content center, and to bring that content in center vertically, I'll use align items center. Align items and center. So this align items center will bring our content vertically in center. So as we are going to center our elements vertically, we have to define a height. So the height will be 100 views. Now our content will be aligned vertically in center of this hundred views. So how much is 100 views? 100 he means this full page, this is 100 views from top to bottom. If you type 50 vg, then the half page of this browser will be 50 vg and 100 g is the full page. And now our content is in center. Now what I want to do now I want to change the background color. To change the background color, you can just use the property name background color. So type background color, and background color will has 333. Now, save evolve in our browser. So now our background color is being changed. Now what I want to change, now I want to change this font family and then the font color. To change the font family, I'll just type font family. And what will be our font family Our font family will be. I'll just open my Google phones and I'll check, so our font family will be Avoroserif. So just copy this and paste it here. So I'll just remove this font family and paste it here. And I'll change the color of this text. To change the color of text, you can just type color and this color property will change the color of text. And the color of text should be white, so I'll type white. Or I can just type FFF, so FFF. This is the hex code of white color. So just save this and have a look in your browser, open this. Now as you can see, now our font family is being changed, and then the text color is white. And now we will design this button tech. To design this button tech, I'll select button tech to select button tech, I'll type button. And what are the changes I want to do inside this button tack? I want to make this button tech bigger. To make this button tag big, I'm going to use padding, and then the font size of this button will be 16 bigel. Then I'll add some border in this button. As you can see, there is a border in this button to add border, I'm going to use border property and I'll add some background color which will be transparent. Let's do this. To make this button a little bit big, I'm going to use padding property. Padding will be ten pixel from top and bottom, so ten pixel top and bottom, then 20 pixel from left and right. So ten pixel top and bottom and 20 pixel left and right. Save evoluear rowser so now our button is big. Now I want to increase the font size of this text. To increase the font size of this text, I can just type font size, and the font size will be 16 pixels, so 16 px. And then now I want to change I want to just add some border in this button to add border, I'm going to use this border property and border will be two pixel solid and the borders color. So the border color will be white, so I'll type a FFF. So this is the X code of white color. So let's save eve in our browser. So now we can't see anything. We have to make this buttons color transparent. Then only we can see the border. So to make the buttons color transparent, you can just type background color and the background color will be transparent. So background color, then transparent. So this will make our button transparent. So now, as you can see, we got a button with two pixel border. Now, let's check this. So this also has two pixel border in it, and this also has two pixel border in. Now let's change the text color of this font. Change the text color of this next quote. To change the text color, you can just type color, and the color will be white. Color and then has FFF. Let's say we're looking our rower. Now our button is looking white. Now our page is looking just same like this page. Yeah, but there is one small difference. In this page, there is margin of 40 weixel between this button and this h1t. Let's select this H one tech and add some margin. So margin, margin bottom, 40 pixel. So now this will add margin bottom from H one tech to button Tech means there will be a gap of 40 pixel between this H one tech and Button tech. So let's reload this. This is our real app, and this is the app which we are building. So as you can see, now, both the things are looking same. And now I want to change this cursor into pointer while hovering over this button. To do that, we get one property, the property name is cursor, so just type cursor and then type pointer. So now our cursor will change into hand symbol while we will hover over this button. So as you can see, now our cursor is this arrow and whenever I hover over this button, my cursor will convert into this hand symbol. And now we will add some hover effect in this button, this kind of ho effect to add this hover effect, we can just type button column hover. So I'll go below this button tag and then I'll type button. And to add hover on this button, I can just use this column and then type hover. So this hover will add hover effect in our button. So what kind of effect we want? We want to change the background color to white from this transparent. Now our buttons background color is transparent. I want to change this background color to white whenever we will hover this button. So just remove this transparent and type white or type hex code of white, which is FFF, and save when I look in our browser. So as you can see, now our button, while we are hovering over it, our button is converting into white color. No, this is not our app which we are working on. This is the app which we are working on. So there is one problem. Our font color should be also changed to black vile we will hover. So to change the font color, you can just type color and then color VV has 000, which is the a code of black color. So save this and volume in our browser. So now it's working properly. So we have successfully added this hour if all. And I guess our CSS work is done. This page and this page is looking almost the same. There is no difference. This is it for our CSS video. Now let's add JavaScript in this project. 4. Fetching data from api: In this video, we are going to write JavaScript for this project. Why we are going to write JavaScript, we are writing JavaScript because if I click this next code button, nothing is appearing means we are not getting any kind of random codes generated here or no random codes has been displayed here. So to display random codes when we click this Next Code button, we are going to use JavaScript means we are going to write JavaScript. Now, how will get the random codes which we will display here? To get the random codes which we will display here, we can use API. Just open your browser and search Wu Jason codes API and click this first link. And scroll down a little bit and you'll get to see this section, get a random code and copy this thing. I'll copy this thing and open your VS code means open your code ator now as you can see, our JavaScript file is empty and now we will write JavaScript code. First of all, what we want to do? First of all, we want to select this H one tech, paragraph tech and button tech. To select this H one tech, paragraph tag, and button tech we can use or we can make a variable and we can use document dot query selector. Now I'll create a variable for header, header means to select a H one tag I'm creating this variable. Header, HEADER rider. To select that h1t, I can write document query selector, so document dot query selector, and inside these brackets, I'll type the tagnym the tag name is H one. Now I'll copy this thing and paste it two times. Why I am pasting it two times because I want to select button tag and paragraph tag. Just remove this H one and type paragraph and for paragraph, the variable name will be author. Type, AUT HR author, and then now we want to select button text so remove this H one and type button because the tag name is button, so that's why I'm typing button and remove this header and the variable name for button or the variable name for the button will be BTN. Now I'll create a function to create function, I'll just type function and the name of the function will be generate and inside these curly brackets, I'll copy this and paste it here. Means I'll copy this API endpoint or I can copy this whole code. I'll copy this whole code and paste it in our browser, not in our browser in our code either. Now I'll explain you what this code is doing. If you know asynchronous programming, you know that fetch returns a promise and if something returns promise, we can use then method with that. Means now this fetch is returning promise, that's why we can use then method and we are doing then method chaining, we are doing method chaining here. Why we are doing method chaining Because this first then method will be used to get the response from the AP endpoint and the second then method will be used to get the data from the APA endpoint. This first then method is getting the response from this AP endpoint. Now in the second then method, I want to get the data. I can just pass data or I can pass anything, but I want to pass data. Means you can write anything for data, but I want to write data only and create this arrow function, and I'll create a curry brackets and inside these curve brackets, I will Console log this data. So I can see what kind of data we are getting from this APA endpoint. Type data here inside this Console tab and save this and let's have a look in our browser. Click F 12. Now inside this consult tab, we can't see anything, why we are not getting any output. We're not getting any output because we have not called this function. I'll call this function inside the console tab, so I'll write console dot log. Inside this, I'll call this function. Now let's save evolve in our browser. Now as you can see, we are getting object, this is data object and inside this data object, we are getting authornym ID and code. Out of this authornymiD and code, we just want authnym and code. If you want to access the code from this object, you have to just type data dot Object. Why we have to type data dot object Because we have passed data here. If you pass something else, then you have to write something else dot code to access the code. Now let's access the code to access the code, what I can do is inside this Console tab, I can just write data dot and what to write data.it write. Now we are getting error why we are getting error. We are getting error because I wrote dot, just remove this dot and let's save and evoling our browser. We have to write data dot code. I'll copy this thing and let's type data dot code. I'll remove this spacing, just remove this spacing and I save this and let's have a look in our browser. Now as you can see, we are just getting the code. If you want to access the author, what you will do, you will type data dot author because inside that object, it was written author for the author name. Remove this code and write author. Let's save a a look in our roser. Now as you can see, we are just getting authornom. Now what we have to do we have to just display this autorom and the code in our project. The code will be displayed inside this H one tech and the author name will be displayed inside that paragraph tag. I'll select this H one tech to select this h1t, I'll write the variable name. The variable name is header, so I'll write header and dot. The inner text of the H one tech will be the code. Just write inner text. Animal text equals to, I'm going to use this Bactis why I'm using the Baptis? I'm using Bactis because I want to use ternary operator. Why we are using ternary operator, we are using ternary operator because we want to use this data, just write data or we can see we want to inject this data inside this inner text. That's why we are using ternary operator. Now just write data and to access the code, you have to write dot code. Let's save and let's have a look in our browser. Now as you can see, we are getting a code in our H one tag. For the author, I'll just do the same. I'll just copy this and paste it below this and remove this header and type the variable name of this paragraph. The variable name of this paragraph is author, type author and instead of this code, you have to write author, write author. I'll remove this author from here. So let's save this and let's have a look in our browser. Now as you can see, we are getting a code N we are getting author name also. Now let's click this next code button. If I click this next code button, nothing is happening. Means our code is not changing, or else we can say, we can't generate random code. How to generate this random code? To generate random code, we have to call this function again and again when we click this button. Means if we click this button once, we'll call this function once. If we click this button twice, we'll call this function twice and when this function will be called twice means when a new function call will be there. We will get a new result and we'll get new data means we'll get new code and new author name. I'll remove this Console doc and just type button dot at Evenistener because we want to run a function when we click the button. I'll just write button dot at Evenistener. So inside this event listener, which event will this button listen to? The event which we want to give is click because we want to run a function when a button will be clicked. Now, which function we want to run? We want to run this generate function, so just type generate here. Just the function name. Type generate and let's save and let's have a look in our browser. Now if I click this next code button, we'll get one code and the author's name. And if you click this button again, we'll get another code and another authorym. But now as you can see, our styling is not matching. We have to bring this content in center. To bring this content in center, you can just open your CSS file and inside this H one tech, you can but text Align Center. So just write text Align center. Now let's save and let's have a look in our browser. Now as you can see, we are getting means our content is not touching the border of this browser. Now it has some spacing from the left and from the right. So this is it, we have created a random code generator app using JavaScript. I hope you like this class. If you want me to add some more features in this random code generator app, you can just inform me and I'll add that new section in this project.