Web Development Projects Using HTML, CSS And JavaScript

1. Promo Video and projects demo: Hello, everyone. I am a full stack web and mobile developer and instructor, passionate about building real world projects that actually sharpen your skills. In this course, I will guide you step by step to build modern interactive web applications from scratch using HTML, CSS, and JavaScript. By the end of this course, you unjust understand front end development, you will be able to build complete functional web apps on your own. You will learn how to create responsive designs, handle real user interactions, switch live data from APIs, and store information locally just like real developers do in production. In this course, you will build a neon calculator app a QR code generator, a typing speed test, an animated analog clock, a real time currency converter, a weather app with forecasts, a to do app with local storage, a GT ub user finder, and a fully functional quiz app. This course is designed for beginners who want to move beyond theory and intermediate developers who want to strengthen their portfolio with real projects. If you have struggled with turning knowledge into actual applications, this course will help you operate the ADS gap. You will learn how to structure web apps using HTML, design beautiful and responsive interfaces with CSS, and bring everything to live using JavaScript. We will also work with ABIs, handle user input, and store data so your apps feel real, dynamic, and professional. Start building real projects today and take your front end skills to next level. 2. Project Overview & Demo: Welcome to this project. In this lecture, I want to give you a clear idea of what we will building together. We are going to create a modern calculator app. Functionally, it will handle all the basic arithmetic operations you would expect addition, substraction, multiplication, and division. On top of that, we will add percentage feature, clear all button, and delete button to remove just the last character. Before we dive into the code, I will walk you through a quick demo of the final app in the action, so you can see where we are heading. This way, you will have the big picture in mind before we break everything down step by step. 3. HTML Structure: Welcome to this lecture. Now, we are going to go through the entire HTML structure of our Taping speed test application. So first of all, we will create a new folder inside our major folder, and let's make it with my name of Tabing test. And inside it, we will add our index with HTML. Then we will use our snippet to add HTML Boiler type. The title will be I think the test. And let's link our tile sheet. Let's make pile dot CSS, and also CRP but S. Right here, we will add file DSS. Then inside the body, we will have a container dip that wraps all the contact of the app, dip with class of container. And inside it, we will have H one tag with typing. It. Then we will add a new DIV where the random text to display will be dynamically via Javascript. So for now, we just add div with a class of text and ID of text display. And keep it empty for now. Then we will add input field where the user will type. Input and the type will be text because we will enter text and ID will be input. And auto complete. We will make it off and we will add disabled BG for now. So the ID will allow the JavaScript to target it auto complete off to ensure browser doesn't suggest previous text. Disable will mean a start off interactive until the test begin. So then we will add a status section to show typing result. Div right here, we have glass of Hertz. And also, it will have an ID equal E splay. Then we will display words per minute, WM. Let's make it for default zero. Then we will display the typing accuracy. So right here, a accuracy of 100% as default. Then we will display Tr inside a span with its own ID for Javascript update. Let's make this line above right here and here, we will add span with us of timer and inside it, we will have time of zero as default. Like this. Right next to this closing div, you will have a group of buttons for controlling the app or div with class of th group and inside this div, we will add start button to initial being Test button with ID equal DRT Etn inside it as text will have SRT. And we will have another button. Let's copy this this will be for restart. Let's add restart button here, we start as fixed. And finally, we will have right here, script with tours of our script Js Like that. Let's run our app now. Open with Live Server. As you see, here is our TML. In the next lecture, we will start with styling this application. 4. CSS Styling (Part 1 – Basics): Now that we have the structure, it is time to give our calculator some personality. Raw HTML looks plain and lifeless. So CSS is what brings it to life. In this part, we will focus on the basics, sitting a font, centering the calculator in the middle of the screen, and giving the calculator box glowing. So the glowing effect will set the tone of the entire design, modern a key calculator that feel more like an app than a simple web page. So first of all, let's add Google font, right here, search for Google font. And in the search, we will search for Petron and we will click on the Git font, Get embedded code, and we will use Import for the web. So we can copy this line and we will back to the VS code right here, we will add a new file with name of style CSS. But first of all, we have to link it in the indexed SGML, write above the title, we will add Link tag, and in the Atif tag, we will add our style SS file. So let's go now to the style and paste our font like this. Here, let's make it 500, remove two dots and add semicolon, and here it will be 700. Then we will reset default styles for all elements. Let's add R and Ci bracket inside it. We will remove default margin to margin of zero, and also remove default bedding to be zero and box sizing, it will be border box, and one family. It is Orbitron and tans surf like this. Then we will center the calculator in the middle of the screen. Add Aditag it will have the width of 100 percentage. It will be full width of viewport and the height. Let's make it 100 VH. It is the full height of the viewport and display will be flex we would use a flex box and justify content. It will be center and align items, we will vertically cinter the calculator line items to be also cinter and the background color or background, just background. I will have color of this color. And the bedding of thin pixel like this. Then we will style the calculator container. So right here, we'll add dot or class dot calculator, and it will have background of dark purple. Let's add this color. And we will add adding of 25 pixel. Then we will add border radius to round the corners to border radius of 20 pixel. And ox shadow with zero, zero and one pixel like this. And the color will be zero f f. This is the color of neon glowing effect for outer and inner shadow, then we will add comma with zero, zero, and 30 pixel with the same color here should be zero like this. Okay. Then we will add a border. So right here, we'll add border of two pixel, solid to make it solid, and the same color. Like this and we will make the calculator take up the full width of its container. Width of 100% and the maximum width, we will make it 400 Excel, that's it for this siccture the next one, we will start to style the input and our buttons. 5. CSS Styling (Part 2 – Input & Buttons): With the main calculator boxes style, let's turn our attention to the input field and the buttons, the part that user will interact with the most. We will make sure the input field is large and easy to read with numbers aligned to the right on real calculators. Then we will side the buttons so each one be clickable with the hover effect that give a sense of responsiveness. We will also distinguish between different type of buttons, digits, operators and the equal button. For example, operators will get a unique background color. And the equal button will stand out with the bright neon pink glow. This is not just about, it is about usability, making sure user instantly recognize which button do what. So first of all, we will style our input field. So and will be with width of 100% of the container. Then we will add adding of 20 Bxil and margin bottom of 20 Bxl and border of none. Then we will add border radius for the corners with ten Bxel And also back ground color of dark dy ground. This color. Then we will add the same color which is cyan, this one, and we will add one size of 2.2 pem and six align. It will be on the right. Then we will add outline of none. And box shadow will be zero, zero, and five pixel, and we will add our cyan color. Then we will add inset like this. This will add a glowing inner shadow with cyan color. Then for the placeholder, we will add input and to add place order like this, we will set the color with our cyan color. Then we will add style for the button. So button, it will have border of none, and the width will be 60 Pixel. And the height will be 60 pixel as well. And the margin eight. Excel, and also border radius with 12 pixel and background of dark dark have this background color and the color. Cyan, like this. And font size of 1.2 m and font weight of 700 and the cursor will be pointer once you hover in it. And also box shadow, we will add these values of Sorry. I be zero, zero, eight pixel. Inset or inner or outer glow. And for inner glow, will be zero, zero, 12 pixel and inset for the inner glow. And finally, we will add smooth transition for any changes like hover with 0.2 second and all, like this. And now for the Hover effect, we will add button when it is Hoover. We will add box shadow with zero, zero, 12 Excel and the color of zero f or stronger outer glow on the hoover and add comma, then zero, zero, 18, Excel, inset or the inner glow on hover. Then we will add transform, with translate, we will slightly upward movement for a lift effect to add translate Y minus to excel like this. As you see right here, here is our styling. And now let's add special styling for equal button, so equal tn. We'll have backy ground. We will add right Maginta bay ground ff00 Ff like this. And we will have color. This white color. And also box shadow, zero, zero, 12 pixel, and the same color. This is for outer glow and for inner glow, will be zero, zero, 18 pixel, the same color, and inset. Like this. Now for the operator buttons styling, let's add dot operator with background of this color. Then the color will be this one and fontt will be bold and bookshado will be 008 pixel. This is for out with this color. And for inner one, we will have zero, zero, well Excel and this one. Okay. These keys shouldn't have this color. So let's go to our index file to see what's wrong, which is four, five, six, Yes, as you see, this should have class of button, this one, and this as well, and this like this. Okay. Now, Let's make this calculator responsive for all screens. So add media query, add media and with Max with of 450 pixel. So we will add adding around the calculator, calculator with adding of 20 pixel and for the input we will make the font size 1.8 REM and adding will be reduced to 15 Pixel. Then for the button, we will make the button smaller. So the width will be 15 pixel and the height 15 as well. And one size of one RM and the margin will be Dixil like this. Also, we will have another media for smaller green. So that media with max width of 350 pixel or should we max width like this and we will add its scale bracket and the input we will make a font size of 1.5 RM and the budding will be reduced to 12 pixel. And for the button, we will make We will make the width, 45, pixel and the height, as well. And font size of 0.9 REM and margin of five pixel. As you see, this is our calculator after styling, in the next lecture, we will start with JavaScript functionality. 6. JavaScript Functionality: Now let's make our calculator actually work. Up until now, we have only been building how its look, but without JavaScript, pressing the buttons wouldn't do anything. In this lecture, we will write the ogic that connects button clicks to actions. That mean updating the input field whenever a number or operator is clicked, handling clear and delete operations, converting the percentages into valid math expressions, and finally, evaluating the entire string when the equal sign is pressed. We will also make sure our app handles error gracefully. For example, if the user typed something invalid, the calculator will display error instead of breaking. This step transforms our calculator from static design into a fully functioning tool. So first of all, we have to go right here in the index HTML right above this body losing body tag. We will add our script tag. And right here, we will add a source, and the source will be scripttGst now we didn't add a file, so let's add it Script Js. Now we will get the input element, which is usually a textbook by its ID. And in our case, it is this input box. So we can do this it input equal document. Dot get element by ID. And here we will add input box for our input field. Then we will select all button elements on the page. So button equal document but in this case, we will use query TelectorO query selector O or our class name, which is our button. Okay. Then we will initialize an empty string to store the user input expression. So it string equal, empty double quotation. Then we will convert the node list of buttons into an actual array for easier manipulation. So let ARR for array equal array dot from our button. This is let's make it buttons. And here as. Then we will loop through each button and attach a click event listener. So here r dot for each method, and in our case, single button, and we will return button dot Ad event listener on each lick. We will implement this. We will get the inner text of the colt button, for example, one or plus or maybe equal let ETN value equal E target inner HTML. Or should be all kabten in HTML. Okay. Then we will add if statement. So if the equal button is clicked, we will evaluate the expression. So if It and value equal three equals equal. Equal sign. We will add try catch. Method. So try catch. And the try, we will replace percentage value like 8% with a math friendly expression, like 8/100. So it expression equal string dot replace method. And here we will add dash then pack it and the divide or another slash with D plus. And right here, we will add percentage. Then slash G like this. And here, we'll add double quotation inside it. Polar sine 1/100. Then we will use eval method to calculate the result of the expression or string equal eval or our expression like this. Then we will show the result in the input box. Input, but value equal string. And in the catch, if there is an error in the evaluation, we will display error and reset the input field. So input value equal error. And let's make our string back empty again. Then right here, we will add s if, else if the AC, which is all clear button is clicked, the reset will be for everything in our placeholder. So else if if ET and value equal AC we will add or make the string equal empty level quotation and input dot value equal string. Okay. Then we will add another s if, else if delete button is clicked, we will remove the last character. So right here, s if ETN value equal. Delete. We'll add string equal, ring, top string with zero and ring dot length minus one. The input value equal string. And for all other button licks, like numbers, Batters, we will add the value to the string. So right here, we will add final, then string plus equal ET and value and input dot value. Equal sring. Before we test our calculator, we have here, small bug should be in both. Looks like this. Let's test it now. Okay. And for the multiplication, abstraction, and addition, let's remove all and test delete. Button. Yes, it is worked. And for percentage, all is good now. So that's it for this project, and we will see you in the next one. 7. Application Overview and Demo: Welcome to the typing speed test application. This is a comprehensive web application designed to help users measure and improve their typing skills. The application presents user with random text passages to the type. Then calculate and display their typing speed in word per minute. Accuracy percentage and the time taken. The application features real time feedback as you type. It will highlight correct words in green and incorrect words in red. The current word being typed is highlighted with assign underline or bitter focus. The app is for responsive for web app. The key features include random text generation from multiple redefined paragraphs, real time performance tracking word per minute and accuracy. Visual feedback for correct and incorrect words, par that start when you're being typed and start and restart functionality. And also, this is responsive web design. 8. HTML Structure: Welcome to this lecture. Now, we are going to go through the entire HTML structure of our Taping speed test application. So first of all, we will create a new folder inside our major folder, and let's make it with my name of Tabing test. And inside it, we will add our index with HTML. Then we will use our snippet to add HTML Boiler type. The title will be I think the test. And let's link our tile sheet. Let's make pile dot CSS, and also CRP but S. Right here, we will add file DSS. Then inside the body, we will have a container dip that wraps all the contact of the app, dip with class of container. And inside it, we will have H one tag with typing. It. Then we will add a new DIV where the random text to display will be dynamically via Javascript. So for now, we just add div with a class of text and ID of text display. And keep it empty for now. Then we will add input field where the user will type. Input and the type will be text because we will enter text and ID will be input. And auto complete. We will make it off and we will add disabled BG for now. So the ID will allow the JavaScript to target it auto complete off to ensure browser doesn't suggest previous text. Disable will mean a start off interactive until the test begin. So then we will add a status section to show typing result. Div right here, we have glass of Hertz. And also, it will have an ID equal E splay. Then we will display words per minute, WM. Let's make it for default zero. Then we will display the typing accuracy. So right here, a accuracy of 100% as default. Then we will display Tr inside a span with its own ID for Javascript update. Let's make this line above right here and here, we will add span with us of timer and inside it, we will have time of zero as default. Like this. Right next to this closing div, you will have a group of buttons for controlling the app or div with class of th group and inside this div, we will add start button to initial being Test button with ID equal DRT Etn inside it as text will have SRT. And we will have another button. Let's copy this this will be for restart. Let's add restart button here, we start as fixed. And finally, we will have right here, script with tours of our script Js Like that. Let's run our app now. Open with Live Server. As you see, here is our TML. In the next lecture, we will start with styling this application. 9. CSS Styling Global & Layout Design: In this lecture, we will focus on the foundation of our CSS styling. We will build the global design system that shapes the overall look and feel of typing speed test app. This includes setting up font imports, global resets, body styling, and the main container layout. By the end of this lecture, you will understand how the background layout and container design create a modern visually appealing atmosphere for this app. So first of all, let's go to Google font and search for Roboto mono. Then we will click here the Git font then get embedded font and we will use Import Method. And right here, let's copy this and go to style CSS file based this font, and here we will change these values to be at 400, then semicolon 700. And now we will apply a global reset and font setting. So we will make the margin by default zero, and we will remove default bedding to be zero as well, and box sizing to be border box and font family to be Roboto. Mono and monospace. So we will set Roboto mono as the font for all elements. Then we will style the body to create the main layout. So body the minimum height will be 100 the edge, we will make the body stretch to fill the viewport height and display of flex, and we will horizontally centers content to justify content to be er and align items vertically to be inter as well. And the background, we will make it linear gradient of 135 degree and the second color will be this one. And we will have also this color. Okay. And also this one like this, this will be dark gradient background. And the color, we will add default one, which is white. Then we will style the main container that hold the tie Bing test. So that container, you have maximum width of 750 Exel and we will make the width of 90%, and this will make the container responsive. Then for the background, we will add RGBA, this color, 0.85. This is semi transparent, dark background, and the border radius will be ibigll like this. And these values or other browsers like Opera and Firefox and so on, then we will add internal space for content. Adding 2.5 and 2.5, REM and two REM. And box shadow. We'll add can glow around container. So zero, zero, 30 pixel. And the color will be GPA of zero, 255, 255, and 0.3. Then we will add text align to center, the text inside, and back drop filter. You make it Blurred with tin pexel. So we will add glass like blur effect. That's it for this lecture, and we'll continue in the next one. 10. CSS Styling Text, Input, and Interactive Elements: Now we will style the interactive components for the app. This will include text display formatting or the state indicator, which is current, correct and incorrect input field design, statistics, buttons, and responsive adjustment for the mobile screens. You will see how color glow effects and transition enhance the typing experience and provide instant visual feedback for the user. So first of all, we will style the heading title. So each one will have color of this one is neon, on color, and boon size will be two REM we will add margin bottom with 1.5 REM and xhadoT glowing text effect. Mixhdo zero, zero, and then pixel and the color will be same this one. And we will style the text display area text with font size of 1.3 RM and we will add comfortable line spacing, so line eight will be two RM and margin bottom of two RM. And user select will be none. So we will prevent selecting text from copy and paste and word wrap to be break word. So this will ensure long words break peri and the color will be DFD at DT. Then we will style each word span to do word space span to select the span and we will add padding of a pixel and x pixel. To add some space inside each word and order radius with five pixel for the round edges, and transition will be 4.2 second and e. So we will add smooth animations when styles change. And we will highlight the current word. Word dot current. Bat and we will add a ground of dying back ground highlight, RGBA with zero, 255, 255 as well, and 0.2. Remove this like this and we will add an underline to a border bottom will be Tubexl solid, and the color will be this one. Then we will correctly typed word styling. So right here, to word, correct. And this corrects will be implemented in the JavaScript. We. So the color will be this one. And we will add t weight to be bold. So let's make it 700 and for incorrect Typing wording, we'll add dot word, dot N, correct. They span, and their color will be red for errors. So let's add this color and we will make the font weight of 700, so let's copy this and paste it right here. Then we will style the input field. So right here, let's add input, and it will have width of 100% and padding of 1.2 RM and font size. Of 1.2 RM and border will be nun. And we will add some border radius to be 12 xl right here, margin bottom of 1.5 RM and outline of an and the background will be same as this one. Copy it and put it right here. But we will change city to be 0.5, like this. And we will add transition as well. So let's search for transition. This one, copy it, test it right here. But here will be 0.3, make it 0.3 for animation. And for input for caste, input, focus. We will add also like a ground for this one. But we will change this to be 0.1, and we will add box shadow of zero, zero, and 15 pixel and the color will be RGBA. Remove these. 0255, 255 and 0.5 likeness. Then we will style the stats section dts and we will make font size of 1.1 RM. So it is slightly smaller than the main text and margin bottom to add some margin of trim, and the color will be this one, which is Natus. And we will style the Tr, as well. So dot Timr and it will take font weight of gold, and the color will be this one. Then we will style the button group dot BTN group display of flex and justify content to center the content. And we will add gab of one RAM, add space between buttons. Then we will style the buttons itself. So button with bedding of 0.8. RM is two RM to add horizontally and vertically bedding, one size will be 1.1 RM and border. None. And we'll add border radius of 15 Bexl then we will make the cursor to be a pointer once we have this button, and the font weight will be 700 and the color will take white one. And the back ground will be linear gradient of 145 degree. Then this color. Sorry. This one and this one. Zero off like this. And we will add box shadow as well. And transition with 0.3 second and is. So we will add also button Over effect. So a button O. So when the button is over, we'll add transform with translate Y axis of minus three Bixel and Add box shadow of 0025 Excel, like this and with cyan color this one. And we will add restart button hidden by default. This button will show once the test is over. Add hash restart button. This is for the ID, as you see right here, we add ID for restart button. And we will add display of none. And in the JavaScript, we will make changes inside it. And lastly, we will add responsive adjustment for newble devices. So at media with Max width of 600 pixel on the screen, 600 or smaller, we will make the text to make one size smaller with one RM and line height of 1.6 R E M, like this. And also, we will add smaller button budding. So for button, it's a budding of 0.7 RM and 1.5 RE like this. So let's test it out. As you see, it is all responsive now. So that's it for the styling. And the next lecture, we will start with JavaScript. 11. JavaScript Fundamentals Variables and Initialization: The JavaScript will bring our typing test to life with functionality. So in this lecture, we will focus on the foundational elements, variables declaration, data storage, and dom element selection. Understanding these component is crucial as from the backbone of our applications logic. So we will examine the predefined text paragraphs for typing practice, Dom element reference for manipulation, variable initialization for tracking the test state, the initial setup function that prepares the text display. So first of all, let's go to our script file. And now we will add an array that containing different text paragraph used for typing practice. Each time the test starts, one of the paragraphs will be selected randomly. So const paragraphs equal an array, and we will add this text. I will provide it in the link chart resources and find it or you can add your own Text. Then we will get references to important element in the SGML using their IDs. These will be used to display text, handle input, chose starts, and control the app. The first one will be onstxt display. Equal document, get element by ID. And the ID is text display where the test paragraph will appear. And the second one will be const, input, equal document getElement by ID or next field where user types and const that's display, equal, document dot. Get element by ID with ours display. So this is we'll display the stats like WDM and accuracy, which is word per minute. And next one is timer display equal. Document, dot, get element by ID. And here we will add dimer ID, and then start BTN, document element by ID. So this is for button to start the test and also for restart button. Const restart Ptn equal document dot Gt Element BID or restart BTN. After that, we will initialize variables to keep track of the app start during typing. So that paragraph equal empty string as default will hold the currently selected paragraph. Then you will initial I the words equal empty array. So this array of words from choosing paragraph, then you will keep track of which word the user is currently typing. So let current index equal zero. And correct cars, which is counter of correctly typed characters, do it? Correct. Cars equal zero as well. And also, we will counter for all typed characters used to calculate accuracy. SoletTtal typed, equal zero as default, and we will intialiTars reference to set interval for the timerlet interval like this. And also, we will track how many second have passed since the test begin. So it time elapsed, equal zero. And we will add a boolean flag to check if the tie being test is currently active. So it is running equal falls as default value like this. And finally, in this lecture, we will implement a function to load and prepare paragraph or typing. Function, load, paragraph, first of all, we will clear any text from previous tests. So text display dot inner HTML equal empty ring. Then we will pick random paragraph from predefined array, which is this, it will be randomly picked. Paragraph equal paragraphs with math or right here, we will add math dot random to choose randomly. And here, multiply by paragraph would be paragraphs length like this. Okay? After that, we will split the choosing paragraph into words and wrap each word in a span. So this will make it possible to style word individually like highlighting. Words equal paragraph split Method, and we will add double quotation and space. Then dot MAP. Method, which is used for array, a single word, and we will return. Let's add dactFt of all, then span, and we will close it as well as HTML tag. And right here, we will add a variable. This is why we use acti. Let's add duller sign and Kelly bracket and inside it, we will put the word. Okay? After that, we will join all the span wrapped word and insert them into the text display container. So text display, inner HTML, equal words join like this and between them space. And finally, we will highlight every first word to guide the user where to start typing. So highlight Current like this. In this function, we load highlight current, which is a function that we will implement in the next lictre. 12. Core Functionality Test Control and Statistics: Everyone in this lecture, we will explore the core functions that control the typing test and calculate performance starts. These functions that will handle starting the test, racking time, updating starts in real time, and stopping the test when completed. So we will examine the timer mechanism using sitting interval, WPM which is words per minute, calculation logic, accuracy, percentage, computation, and functions to start and stop that test. The first function, we will begin, which is the last one we will call in the last lecture, which is hit parent. So let's add function, Hilight parent and this function is used to highlight the word. The user should type next. So one word element equal document dot query selector. And here we will select Word, so we will get all span elements with the class word. Then we will remove current highlight class from every word. So word element. Elements should be here and here as well. Word elements for each, and here we will add element then we will return element dot last list dot remove. We will remove current class. After that, we will add current class only to the word at the current index if it is exist, which will be calculated from current index this variable. So right here, we'll add if statement if word elements, and right here, we'll add current index. Then we will add for return word elements with current index asList, dot a current plus. Okay? After that, we will implement another function to calculate and display typing starts. So right here, that function update. That's First of all, we will convert elapsed time in second into minutes minutes equal time elapsed over 60. And we will assume that one word equal five characters. So most WbM equal math with correct characters over five over minutes or zero. I shouldn't be five. It maybe could be six or more. It is not It is just an assume. Okay? After that, we will calculate the accuracy. So most accuracy equal total typed, and we will use a statement. So if there is total typed or typed is finished, if it is true, we will add math round with correct directors. Divided by total, typed, multiplied by 100 to give us percentage. Otherwise, it will be 100 as we had in the index HTML, which is right here as default value. Okay? And then we will update the stats piction in the UI with WPM accuracy and i. So that is display dot inner HTML equal. You will add here ectik to include variables. So WPM will be add Dollar sign, Kelly Bracket, and right here, we'll add WBM and let's add here. Accuracy. From accuracy variable. The last thing, we will add span with us equal timer, like this. And inside it, we will add time and we will include our nine elapsed and right here, we'll add or second like this. Then we will implement function to start the tie Bank Ts. Right. Next to here, we will add another function. And this is start Ts First of all, we will clear input field from any previous text input dot value equal empty string. Input. Disabled. You remember we make it disabled right here in the HTML is right here, disabled. So we will make it enabled. So change its status, and then we will automatically focus cursor in input field, input focus like this and as running, we will set it as running. True. And then we will reset all tracking variables for a fresh start. The current index, make it zero. Correct. Rs equal zero, total, typed, equal zero, and time elapsed equal zero as well. After that, we will hide, start and restart buttons during the test. Start button, diet display will be equal. N and restart button that tile display will be none as well. After that, we will start the timer, so it is updated every second. So interval equal that interval with function, then we will increment elapsed second to time elapsed, plus, and also we will refresh starts on the screen so update. That's like this. And right here, we will put 1,000 as 1 second. And finally, we will implement another function to stop the typing test. So function Top Test. First of all, we will top the timer from running the clear interval, which is from our interval right here. And also, we will disable taping, input, input disabled, equal true and is running. We will make it false again and restart button Dial display, it will be equal in line block to be shown. So that's it for this lecture, and we will continue in the next one. 13. User Input Handling and Real time Feedback: This lecture covers the most complex part of our application, handling user input and providing real time feedback. We will examine the event listener that processes each key stroke, evaluates typing accuracy, and update the visual display accordingly. So the key concept include input event handling, word by word comparison logic, dynamic CSS class manipulation for visual feedback, and test completion detection. First of all, we will add an event listener to the input field that triggers whenever the user types. So right here, input dot add event listener with input field. And second argument will be function. And if the test hasn't started, we will ignore typing events. So if there nut is running, then we will return just like that. Then we will select all word elements from displayed paragraph, Const, word elements equal document dot query selector all or dot O after that, we will split the original paragraph and towards, which is the correct answers. So const, word list, equal paragraph Let method, and we will add space between quotations. Also, we will split the user's typed Ibut and towards, so we will remove extra spaces. Cost typed. Words equal input value, let method, or should be trim, not split. And then dot split by quotations and between them space like this. And after that, we will loop through every word in the original paragraph four, and let I equal zero and I, less than wordless dot length, and I plus plus. Then we will add or initial Is span, equal word elements with index I to the span element represent the word and once real word, which is correct one equal word list of index. I. This is the correct word from paragraph and also typed word typed words with index, I, which is the word typed by the user at the same position. After that, we will remove any previous styling before checking correct ins. So then last list dot remove, and we will remove, correct. And as well incorrect. And then if the user typed something for this word, we will check if it is match the correct one. So if typed word, not equal null, and span dot as list dot A would be add like this. And right here, typed word will be equal real word, if statement. If it is true, we will add correct as class, else it will be incorrect. Okay. Then right next to this, we will update the current index to the position of the next word to type. So current index equal typed words dot Link. And we will highlight the current word to guide the user visually. So we will call highlight current function right here. Like this. And we will calculate the total characters typed, excluding spaces. So total typed, equal input dot value. Dot replace with slashes like this, S plus G, and second argument will be double quotation ingth. After that, we will calculate correctly typed characters for each currently or correctly typed word. And then we will add its length to the total. Correct cars equal typed word reduced method, we will use the reduced method and it will take accumulator and word and index. Then we will return if word equal word list with index of index if statement will add accumulator plus word root length. L s will be accumulator value like this and right here at comma and zero or accumulator value like this. And after that, we will refresh the stats, display WPM accuracy and timer. So update tats. Function. And also we will check if the typing test is finished. So user typed more words than the paragraph contained, or user finished typing all words and pass pace at the end if statement if typed words ingth water than Wordless dot ingthO typed words. Dot length will be equal wordless length and input dot value ends with. And right here, we will add double quotation and space. So we will top the tit. Okay. So that's it. For this lecture, we will continue in the next one. 14. Utility Functions and Event Binding: Before we continue with our last lecture, it's just back here in the index HTML file. Here, it should be fixed display, but there is bug in the writing and also this span will have an ID of timer, like this. Let's go to the script. There is error here in the typing. So let's copy this one, which is correct and apply it right here and also right here. Okay. And let's see what else. This span should be rubbed inside another spine, let's a span with glass equal Board. Let's close it. And right here, we will add our span and variable fixed. Also here in the accuracy, we will add the percentage. Fine. And finally, for the or loop, it should be let I equal zero, like this. Now, in our final lecture, we will examine the utility functions that complete our application functionality. These include the restart functionality and event binding that connects all our component together. We will also see how application is initialized when the page loads. We will cover restart button. Test, function for resetting the application, event listeners or button clicks, initializing code that run when the page load. So the first function to restart the typing. Test, let's add function to restart test. And first thing we're going to do, we will stop any running timer, clear, interval with our interval line. And after that, we will clear the input field. The input dot value equal. Empty string input disabled so to make the input disabled as default. And after that, we will reset all tracking variables to their initial state. The current index will be zero, correct, characters equal zero and total typed equals zero and time elapsed will be equal zero and is running we will make it falls again. Then we will reset the timer display and the text content. So we can do this timer. Display text content equal time, and we will make it zero second again. Then we will reset, start display to default values. So start display inner HTML will be equal WPM of zero and UC. We will set it to 100%, and we will add span with class of timer Let's change the double quotation to be single and we will remove the double quotation like this. And here we would add time of zero. After that, we will show the start button again and hide the restart button. So start button, dot, dial, dot. Display will be equal to line dash, L and restart button style display to be nu. And also we will load a French random paragraph for the next test. So load paragraph like this. And we will bind the event listener to the buttons so the trigger function when clicked. So start button dot add event listener with lick and then start. Test should be. So this when clicking Start button begins the test, and also restart button, but add event listener to restart the Test. And here we will load the first random paragraph immediately when the page loads. So load, paragraph like this. And as you see, it is loaded now. So if you refresh the page, it will show another one because it is randomly. And let's test our app seems that there's some errors, but let's go back our code. All right. Here, it should be math round. This will give less precise result. Let's see what else also. Actually, let's remove this span and make it just a text with zero second. And these event listeners should be outside function like this. Okay. Let's test it now. All right, it is. I see that the input color isn't well, let's just pick it for now and we will fix it. Okay. It is work very well. So let's go back to the CSS and in the input class which is right here, let's add color. Off, which is white. You list it again. I think it will be good. That's it for this lecture and see you in the next project. 15. Demo & Introduction – What We’re Building: Welcome to this project. Before we write any code, let me first show you the app that we will building. This is a QR code generator app. Here is how it works. You type any text or link, you select a size for the QR code, you click Generate, and instantly a QR code will appear on the screen. You can even download the QR code image and use it anywhere. By the end of this project, you will know how to build a clean user interface with HTML and CSS, add interactivity using JavaScript, work with an external library to generate QR code. This project is simple enough for beginners but also practical. You can actually use it in real life. In the next lecture, we will start with the coding for HTML structure there. 16. HTML Structure: In this lecture, we will start to create SDML structure of our app. So let's start. First, let's create a new folder. And inside it, you will add our index file and style BSS and script with GS. And also, I will upload a file in the resources which contain currency to flag code, which have these currencies. So let's start now with TML. Et's now import oxy icons from icons. So as usual, we will go right here in the CD and JS in the library and search for oxy icons right here, and you will select this link, copy it and back here to add link tag and the at f, we will paste it like here. And now we will add ground blur erkl, let's go in the body, add a DIF with class of irkin and another class or circle dash purple. And we will have another one, so let's copy it. And here we will add dash dash blue. Then we will have our main container, main. And right here we will add class of currency dash converter. And inside it, we will add app title H one tag with class of currency inverter, underscore. Title I be monitor and right here, we will add a title like this. Then we will add input for the amount. So input and it will be with type of number. And right here, we will add class of currency converter. Underscore input and the idea of inputs currency. And placeholder will be zero like this. Then we will add group or select and swab button right here, let's add a Div with class of currency converter to underscore select group. Then for the source currency. It's another div right here with a class of currency. Converter, underscore, underscore, elect. So we will display the flag of the selected source currency, the image with source of the source at lag, which is lag dn.com, W of 640 us ENG, and the LT will be SAG. This image will be changed by JavaScript. This is for default. As we will add drop down to select the source currency, select tag and the name will be currency and the ID, select Source currency. Then after this closing div, we will have a button to swap between carencs. Add button tag with class of renc converter. Underscore underscore, swap button, and with ID. Button W. And right here, we will add icon for swap button from Box icons Library. Clicking this button will swap the source and target currencies. I right here we will add class of EX Ex transfer. This is the name of the icon. And after that, we will target the currency or Dv with class of currency inverter underscore Elect and inside it, we will display the flag of selected target currency, the image, and the source will be by default of HTTBS from this one, this one, let's copy it and paste it right here. But here we will add ID instead. And for the Alt, we will add ID lag, just like that. And we will add drop down to target the currency, select with name of currency and the ID will be select target currency. And after this closing div, we will have exchange rate text, Dev with class of currency converter. Exchange rate. And here we will add span of ID of exchange rate. Text, and the class will be currency converter, underscore exchange rate, text. And here as a text, we will add zero USD equal zero, ID are like this. And after this closing, D, we will have convert button, button with ID equal button. Convert and the class of currency Converter underscore, convert. Button. And right here, we'll add convert as fixed. And finally, we will add our script. So the first script will be for the flag code, which is this one. So let's add source, and this will be currency to flag code. So this is JavaScript file that map currency code, for example, USD, IDR, and so on, you flag the images. And we will have our main script, it's at sourcef script dot js. And make sure this file become above our main, otherwise it will not be work. This image source should be like this and also this one, like CDN, and we should add ID here with image source currency. And this would be with ID of image target currency. Like this. So, that's it. For this lecture, see you in the next one with Styling. 17. CSS Basics – Layout, Colors & Fonts: In this lecture, we will start with CSS basics, fonts, colors, spacing, and layout. First of all, let's go to Google Fonts and search on Tobin's font, and let's get the font with impeded four and import. Let's copy this one and we will back again to a Code. So in the styles, it's base. This one, that we will use different values. Let's remove it. And we will use 400 506 hundred like this. Now we will implement something different called CSS variables. Inside the variables, we will add colors and we can only implement it once and use it everywhere. You can add root and right here, we'll add our first color, which is blue for buttons dmarya color. This will be 69e2, second one primary Hoover. Oh like this. As we will add light like ground for inputs, secondary color. Like this. Text dark. This will be this color. And also, we will add lighter text for hints light will have this color. Our here should be four, we will add Bige back a ground, dash, dash, like a ground. Dash color. This will be EED type one. A card a ground. This will have white, black ground and shadow color with some blue one. And also, we will add some values, which is border radius with 12 pixel and also we will add smooth animation, which is transition. Eight with 0.3 second. After that, we will reset the body, let's add margin, make it remove margin and remove padding and we will add box sizing of border box and Hunt family will be opens and serf. Okay. Then we will center the app horizontally and vertically for its at body. So display will be grid and less items to be center and minimum height will be 100. The H and ground color will be in order to use these variables, we have to put and inside it, we will add dash dash background color like this. And for the color, same as that, let's add for variable and dash dash fixed dark. And for the bedding, let's add one. Still, and now for the main container that will hold everything, we add a ground color of card, like a ground and maximum width of 450 excel and the width will take 100% this width and adding 30 exxl for the radius will be from variable dash dash, border radius and fixed align will be enter. And for the header with H one, we'll make one size to be RM and one weight to be 600 margin bottom. With eight Bixel All right. And finally, for the paragraph in the header, we can tag it like this and the color will be variables text, light, and the font size will be 0.90 5:00 P.M. And margin bottom to be 24 pixel. That's it. For this lecture, the next one, we will move to CSS Advance. So see you there. 18. CSS Advanced – Forms, QR Display & Buttons: All right. Before we continue, we're just back to variables right here. This color would be for the border color. Let's it. And also, we will add back ground color with this one. Okay. And this would be radius, like this. Transition. It. So this will be Poppins and the border radius in the container. Okay. And we will add here also box shadow with zero, ten Bexl, 30 Bxl and variable of ad color. All right. So now we will start with interactive parts, which is inputs, drop downs, UR display box and buttons. So let's go right here and target the form with display of grid. A will be 16 pixel and Form input, and also form. Elect leg will take of 100% adding of 12 and 16. Pixel one size will be one RM and radius with variable of border radius value. And border itself with one Bxil told and variable of border color. And for the background color, it will take variable of secondary color and transition of variable of transition. Bed with ease. Okay. And here, we'll add outline of none. Then we will target for input esshlder with color of variable of x light. Okay. After that, form and pot on focus and select focus. We'll add dal color with variable of primary and box shadow. Bexel and variable primary color. All right. Then for the QR code display, cut. Container will have margin top of four Bxl adding of bixl and border with rubicl dashed and variable or border or sorry, should be border color. H. Okay. For the border radius, we will add variable of border radius value and minimum height will be 250 pixel display will be grid and less items. It will be center and the transition with border. A car variable of transition feed, with e. Okay. Then for the QR code container when it's active, QR. A good container got active. We'll have further color variable. Primary color, and adding of inbexl. And for the placeholder text, we will have a color of variable of text light and font size of 0.9 i Then for the QR body, and image will target it. The maximum width will be 100% and maximum height will be 100% and border radius variable of border radius value and city of zero, transform with scale of 0.9. So it is lightly molar and transition with opacity and variable. Would be right here. With transition. Heat and is also we'll have transform with variable of transition. Heat is as well. Okay. Then for the QR Body image when it is loaded, we will add opacity of one, transform with care of one, it will be smooth fd in and for the buttons, so that TN will have padding of 14 Excel, one size of one RM and one to weight of 500. Text decoration of none, and the color will be white one and border. None. Border radius will be variable of border radius value and the cursor will be pointer and is Or transition first, variable of transition speed, and, and for BTN primary, it will take a ground color of variable of primary color like this. And also for the tn primary when it is hovered, so Over it will take transform with translate Y axis with minus two pixel and box shadow will be zero bxlFfteen Bxl and RGBA, with zero, zero, zero and zero and 0.1. Okay. And for the button, secondary btn secondary, it will take a ground color of variable x dark. And Witt and secondary WO, it will take back ground color of this one. Okay. And for the footer, there will be margin top of 24 pixel. Okay. And dot hidden with display of none. For this one, download button. As you see, it is hidden now. And for the media query, it's at media screen and right here and a maximum width. Will be 480. And here we will make the bedding in the container to be ibexil and for the header Ach one. Bond size will be reduced to bond five per year. So as you see, here is the whole tiling. In the next picture, we will start with our JavaScript. A 19. JavaScript Setup & Selecting Elements: Our app is looking great visually, but right now it is static. It doesn't do anything yet. In this lecture, we will start adding JavaScript to bring it to life. The first step is to connect our HTML elements to JavaScript. Think of it as attaching wires. Our JavaScript code need to know which input box, which button, and which container it should control. So first of all, we will select input, dropdown and buttons. By Const. QR text, equal document dot get element by ID with R text. And then for the size drop down the const sizes equal document. Get element by ID for sizes. And then for the generate button. Cost, generate tn, equal document dot get element by ID, generate tn, and Cost download. Tan equal document dot get element by ID or download tin. After that, we will select QR display area or cost, QR code, container Equal document ir selector. And we will target QR code container. A. And then we will target QR itself, the Cost QR body, equal document dot G or should be query selector. And right here, we'll add QR Body. And after that for the placeholder message, const place holder. Text, equal document query selector for Holder text. Like this. And also, we will store the current size size, equal sizes dot value. In the next lecture, we will start to add event listeners. 20. Adding Event Listeners: Now that we have connected the wires, let's make the App react when the user interacts with us. For example, clicking generate should create a QR code. Changing the size drop down should update the QR and clicking Download should be to save the QR code. To achieve this, we will use event listeners. These wait for user action like click or change and then runs code. So first of all, we will add generate tin dot add event listener when the event is click. And right here, we will add E. So first of all, we will stop form from refreshing. So E dot prevent default. Like this and after that, we will call a function to generate QR code. Or now it is not created, but we will call it and implement it later. So call generation like this, and we will handle the size of the drop down. Size is event listener, and here it should be changed. And first of all, we will update the selected size size equal E target dot value. And then if text dot value. Dot length is greater than zero. Then we will auto generate F text is already entered. So handle generation, function as well. After that, we will handle Download button. So right here, download PTN but add event listener. The event will be click. Let's remove this E, and now we will initialize our image, so let image equal body. Dot query selector with image and let Canvas equal body query selector Canvas as well. After that, we will prepare download link based on what exists. So if there is an image, if we have image, then download button it attribute to be a chif and second argument will be image get attribute with our source. Okay? Else if it is Ganvas then download button dot set attribute to B with ATRf right here, GNvast two Data URL. So that's it for this lecture and the next one, we will start to implement the functions to generate QR code. 21. Functions – Generating QR Codes: Now we are going to write the functions that make the QR code appear. We will create two functions. First one is handle generation. We'll check if the input is valid and generate QR code. It actually generates and display the QR code. First function will be to check if the input is valid, so function and the generation, and we will check if the user typed something in the input. So if you are text value, that length greater than zero, if the input is not empty, we will call generate code to generate Else, if the Ibot is empty, we will show alert message. Alert. These enter text or URL to generate R code. Okay. And the second function will be for generate QR code. This should be generate QR code. Let's copy this function and add it right here. Now we will reset the previous QR code, clear old one if it is exist. So QR body dot inner HTML equal empty string, then QR code, Container dot classist, dot remove. We will remove active to hide container styling. Then we will show a placeholder text to placeholder text, dottle display. Equal L. After that, we will hide the download button until QR is ready. Download button, Classlt add we will add adinAS to it. Like this. Step two, to generate or create new QR code using QR code JS library that we add in our index file right here. So New. You are good. With QR body and second argument will be the user input text or URL, text will be text with value and the QR height from dropdown or default. Height will be from size and the width also from size. And background color, which will be white color light will be white one and color dark to be color like this. And then we will add small delay to wait until QR code is generated. So time out First of all, we will find the generated QR image. So on image equal QR body query elector with image. And we will check if the QR exist. So if R image exist, then we will show the container, R code. Container dot. Last list dot A. We will add active class and we will hide the placeholder. Placeholder. Dot style dot display to be equal. None. And we will show the download button. So download button, dot Glass list dot remove to be hidden, and we will add fed in effect. QR image Glass list dot add. And here we will add loaded. And right after here, we'll add the delay, which is 15 millisecond. I think it is ready now, let's tist it out. Let's add URL and select Okay, as you see right here, it is generated. Let's select another size. Okay, I see it is same size. So let's see what's wrong. I think the problem with sizes, let's go up here, here it should be sizes, not size. Let's pick it out now. Okay. Now fixed without any problem. And if we move this one, let's try now to generate a new code. It will show an alert blaze inter text or URL to generate QR code. So that's it for this project, see you in the next one. 22. Demo & Introduction: Welcome to this new project. In this lecture, we will demo the final Weather app so you can see what we are going to build together. This app allows the user to search for a city and instantly see the weather conditions including city name and current date, weather icon, emperatre and condition. Humidity and wind speed, and five day forecast. We will also add location so the app can show your weather automatically on the page. Load. Finally, we will handle the error of the city if it is not found. So as you see right here, once I accept the location, it show my location and the weather in my city. And then you can also search for any city you want. And if you add a Dui city name, it will show not found. So let's start now with HTML structure. 23. HTML Setup: Now we will build the HTML structure of our Clock. So first of all, let's create a new folder with name of our app, and inside it, we will add index HTML style, BSS and crypts. Let's add our HTML structure boiler plate. And change the title. Let's link our style. And right here, let's add our script. The source script JS file. Now we will go back to Cd and JS library, and we will search for At Awesome. This one. Let's copy it. And back again right here. Let's add it as a link with HRF equal the link that we copied. And also, we will import another library which is vanilla tilt or three D effect. So let's search also Vanilla tilt. This one. Copy URL. And right here, we will add another crip tag. And paste it in the source file. And now we will add our main clock container. So right here in the body, let's add div inside it, class, Clock pace and built. And inside it, we will have a div with class of R. This is for our hand and inside it. Div with a class of HR and also ID of HR and leave it empty for now. And then we will have another div or minute hand div inside it. Class of min or minute and another div inside it with a class of MN and ID of N like this. And for the second hand, we'll have another div with a class of second and inside it, div with the class of SC and ID of AC. Also, we will have Tuggle button for light and dark mode. So right next to this closing div, you'll have div with the class of Tuggle. Class and on click part. I'll have Tuggle. Class as a function like this. So that's it for this lecture, and the next one, we will start with our style. 24. CSS Part 1 (Clock Base Styling): Lecture, we will design the base of our clock, center it on the screen, add the ground colors, and create a circular clock frame. So first of all, we will reset default margins and padding. Margin of zero, and bedding of zero as well. And box sizing will be border box. After that, we will center the clock using Flexbox. Body with display of flick justify content. Center align items to be center and minimum height will be 100. The edge, which is full height and background will be 091921, which is dark background. And also for the light mode background, we'll add body dot light and the background will be e1d, a three. And for the clock container. Look width of 400 bigel the height will be and display ify content. Inter line items, enter, and the border will be Excel, solid, and the color will be dark and we will add border radius. We will make it circular. Border radius, 50%. And now we will add LPs, which is an image, I will attach it. And the resources, you can find it. Open the files and paste it right here. Okay, this is one. And in order to import it, we can add right here. Background of this one color, and the ARL will be slash clock B&G. As you see, it show right here or the background die will be cover and also the box shadow. It will be zero -15 Bigel and 15 Bixil and the color RGBA, 255, and 0.05, which is tub glow. And for inner shadow, we will copy this value and add right here a comma, like this and paste it. But here, we will add also inset like this. With here should be 15, sorry. And here as well, like this. This is for inner shadow. Let's add another comma, and we will add bottom shadow. It's past it like this. But here we will make it 0.3. And for the inner shadow, let's add inset, but here would be coma and past the same values here should be plus 15 and here as well. I don't know why it is not 15, Okay, like this. And this will be 0.3 for the inner shadow. And after that, we will add cursor of pointer like this. This styling will be for dark mode. But for the light mode, we will add right here, body Light with clock glass like this, we will add background of this color, and the URL will be the same of clock dot Bn G, and also background. Bies will cover and the border will be fbixyl solid, and the color will be this color. Okay? And then for the box shadow, it will be. Let's remove this one for now, minus eight pixel, minus eight pixel, 15 pixel and RGBA. With 255 and 0.5. And also, let's add a comma here and here, ten Bxel ten Bxl then RGBA with zero and 0.5. Then we will add inset with minus eight pixel. And RGBA with 255. This one, but with 0.1. And also, we will have inset of ten pixel and RGBA with Theos and 0.1 like this. Okay. Then we will center the point of the clock clock before and the content will be empty string and position. Absolute with 15 pixel and the height as well. And the background will be white or the radius will be circular and index make it 1,000. And for the body, we will add blue center in the light mode. The body clock before we will add background of blue like this. Let's go right here in this book shadow in the clock file would be this zero, this zero, and this as well. And also for this Yes, like that. Al right here, it should be 15 pixel, not minus eight. And this one will be further radius to take circular yep. And let's make the Z index much higher this. So that's it for this lecture and the next one, we will continue with 25. CSS Part 2 (Clock Hands & Theme Toggle): In this lecture, we will style the hand of the clock hour, minute and second and the toggle button for dark and light mode. But before that, let's go back in the index SGML, and here there is no need for font asom so you can remove it without any problem. And now we will continue. So for the clock hand container, let's a Look our And right here, clock minute class, and clock and second class will take position of absolute to be shown and for the hour and circle the clock H and HR or the class of the hour will take the width of 160 Bixl the height will be as well. And for the minute and circle. Look and minute, it will take width make it bitter longer and for the height as well. Like this. And for the second, we will make it longest one width of 230 pixel, and the height will be same. And now we will use flix for centering all hands. Touch R minute class and second class, display of x justify content, enter and position will be absolute and border radius with 15% to be circular as well. Then for the hour hand line, the before the content will be empty string. And position of absolute width of eight pixel and the height will be 80 pixel and the background will be a pink color like this and the index to be ten and border radius pixel Epixel zero, zero, like this. As you see it so now. Then for the minute and line, let's add minute before. Content will be empty string positioned absolute width or Bexl and the height will be 90 Exel, the background will be white, and index ten and also the radius will be pixel, pixel zero and zero. Okay. Then for the second hand line, a second before, and the content will be empty string and the position absolute width of two pixel, the height will be 150 pixel and the background will be RGB 13 45 and 235. And for tagle button. It will take position of absolute top 30 pixel, right, 150 pixel, the width, pixel, and the height will be one pixel as well. One size, 18 pixel and order radius in percent like a ground will be with color. This one and the color as well will be the same. And one family will be so like this. And the cursor will be pointer and transition 0.5 second display of legs and align items to be center like this. This is G button. And now you will continue with label for the Tuggle. Tuggle. Class B four, you'll add position of absolute, and the content will be light mode, and on the left, will be 25 pixel and white space will be no rap. Let's see the content now. This is the content and or a button in the light mode, or body that light tog glass will take a ground of this color and the color as well will be the same or body in the light mode to tougle class before the content will be dark mode and on the left will take by 25 pixel and white space of no up like this. Okay. I see some issues in the styling. So let's go up here in this one, this would be, not minute. And we will add right here the index of 12 and order radius of pixel. X pixel zero and zero. And for the tagle class here should be 150 on the right or to be like this. So that's it for this lecture. In the next one, we will start with JavaScript. 26. JavaScript Logic: In this lecture, we will add JavaScript to bring our clock to life. So here is what we will do step by step. We will rotate the hour, minute, and second hand in real time using the diet object. Then we will add a light and dark mode toggle by switching CSS classes on the body. And apply a modern tilt effect to the clock for extra styling. First of all, we will create a function that will handle the theme switching function Toggle class, which is this one. So let's copy it and paste it right here. And now we select the body element from HTML and store it in the constant called Body. Const, body equal document query selector, body DAG now we use the Tuggle method on the body class list. So if the light class isn't there, it's get added, so it will switch to light mode. And if the light class is already there, it will remove this class and switch back to dark mode, which is the devolt mode. Okay? So body. Last list, dot Toggle. And right here, we will add Light like this. Now, if we click on this button, it will make the mode light. And then if we click back, it will back to the default mode which is dark. Then we will implement the Clock hands rotation setup. So we set a base value for our rotation calculations. Circle is 360. Since there are 60 seconds and also 60 minutes in a circle, each one is 360/6, which is equal six degrees. So const degree equal six. Then we will select the our hand element from our HTML using its ID, which is HR. So const, HR equal document dot query selector. Or HR, and we will select the minute hand element using its ID, which is n, Cost nequal document dot query selector or n. And finally, we select the second hand element using its ID. So const ac equal, queriselector, a C like this. And now we will update the time every second. So we will use set interval, and set interval is a function that repeatedly runs a block of code at a specified interval. We are setting it to run our code every 1,000 millisecond, which is 1 second. So set interval, we will add a function inside the interval. We create a new date object to get the current time. Let dy equal new date like this. Then we will get the current hour and multiply it by 30 to get the rotation degree because we have 360 degrees on the circle divided by 12 hours will give us 30 degrees per 1 hour. So let judge equal date to be the dot get ours multiplied by 30. And we will get the current minute and multiply it by our degree value, which is six. So let M equal, they dot get minutes multiplied by degree. And for the SS, which is SS equal, they get second, multiply by degree. After that, we will apply the rotation to our hand using CSS transform. We will add MM divided by 12 to make the hand move smoothly between hours as minutes thus. So first one is R dot style should be style, transform equal rotate. In Z direction, and we use dacti in order. We use variables inside this string to rotate in z direction, and right here, we will add variable of HH plus divided by 12. And right here, we will add degree. So as you see, it is moved now. And also we will apply the calculated rotation directly to the minute hand. So n style transform will be equal rotate in z direction, and also with M degree like this. And we will apply the calculated rotation directly to the second hand. A C dot style dot transform with tactic, and we will use rotate in the z. And here as degree. So here it is move. Now, and this entire block of code will repeat every 1 second, which is 1,000 millisecond. So we have to put coma here and 1,000. And now we will implement the tilt effect for the style. So we will use an external library called vanilla tilt for a cool three D effect, which is imported right here. So vanilla tilt.in it with document dot query selector all with class of Tilt. So, we will initialize the library on any elements that has the class tilt. And this will set the maximum tilt angle to 20 degree. So let's add max of one. And also, we will make the Clock scale up slightly when we hover over. So scale 1.1 like this, right. Let's test it now. I see there is no change right here, but everything is very well. Yes, right here. This script of vanilla tilt should be above script file. So let's move it upward, right here, and let's see, Okay. It is work very well now, as you see. So that's it for this lecture and see you in the next project. 27. Introduction & Demo: Welcome to our currency converter project. In this project, we will build a fully working currency converter app using HTML, CSS, and JavaScript. By the end of this project, you will learn how to structure HTML for real world app, how to design a modern new e with CSS, how to fetch live data from an API using JavaScript, and how to swap format and display currencies dynamically. So here you can enter the countries they want to convert their currencies and at a value, then you can convert like this. And also, you can make a swab to make it reversible like this. So see you in the next lecture with HTML structure. 28. HTML Structure: Now we will start, create the basic structure of our to do app using HTML. We will add the container, title, Ibut box, and button, and the list that will display the task. So first of all, let's create new folder with our app and inside it. Index file, tile file, and also crept file. In the index, we'll add SGML boiler blade and rename the title. After that, we will link. Our style sheet. And for the script, let's add it right here with source of rpGsoil. Then we will add main container that will hold all app content Dev with class of container and we will add section for the app heading and input controls. Class will be input container. And inside it, we will add main heading of the app using H one, and grouping input and button side by side. So div with class of input. Group. And it will have input field where the user types new task. This input will be with type of text, less holder. Add new to do. Okay. And we will assign ID of input box, and also we will have a button to add the task with ID of add BTN. And here we will add add text. And after these two closing divs, we will an order list where to dos will be displayed dynamically. So you'll tag with class of to do list, and also ID to do list. And we will leave it empty so we can fill it inside Javascript. But this line would be inside this container div, so we have to add it right here. That's it for the HTML, in the next lecture, we will start with styling. 29. CSS Styling part 1: We'll come back. In this lecture, we will style the app using CSS. First of all, we will import from Google Fonts, Opens font, So get the font, embedded code, and using import, let's copy this line and right here, paste it. And we will get rid these values, and we will use 400 500 and 607 hundred. Okay. After that, we will reset default styles. So make the margin. Zero, adding zero and box sizing of Porder box. And the font family will be opens and turns there off. Then we will add theme variables, which is from root. First one will be primary color. This one, and primary dark and secondary to be this one and secondary. This one, and also dark which is This one, and also EG. Light. This and also for glass color. We will use REA 255 with 0.05 and for border, we will use also RGBA with 0.1 and border light with 0.15 and also for the text light. Which is xa color like this. And we will start with body layout. So let's add body ag and the display will be lx and align items to be center, justify content. Center and also the minimum height will be 100 VH. The back ground will be linear gradient of 135 degree variable of DG dark and also variable of dg light. This would be body. And also we will add over low of heading. Then for the background circles, let's add erkl and position will be absolute width of 300 pixel and the height will be 300 pixel, order radius of 15% and also filter will be low of 180 pixel and the opacity will be point x. After that, we will have circle of purple with background of variable of the Kandari and on top, will be 10% and, which is position of 20%. And we will have also for the blue one. So let's copy this, test it, and change this to blue. The background will be primary and bottom right here. And right here, left of these values. Okay. Then for the container, Currency Converter with position of relative and the index one, and the width will be 360 Bexl and adding of 14 Ex, or the radius of Excel, and background of glass and we will have also order of one pixel, solid and variable of order or the back drop filter, we will have lure of one pixel. And the box shadow will be zero Gl BexlEtbxl and RGBA of zero and 0.4, like this. Okay. And for the title now, Currency Converter. Title will have margin bottom, 32 pixel, and text align into one size will be 28 pixel and one to weight, 800 or 600 and the color will be variable of primary color. Okay. And for the Currency Converter input, We will add a width of 100%, adding of 12 pixel and 16 Pixel, margin bottom of 32 pixel and the font size 18 pixel and text line. Center, border, nun, and border radius of 12, Excel. And outline of Nan and the back ground will be RGBA, 255 and 0.8. And the transition will be 0.2 second. It should be convert the style. So Okay, right here, we forget to add the ring of our style file. So as you see, it is applied or no. Okay. Then we will start with Currency Converter input, but on focus, let's copy this class, past it right here and add focus will be background of RGBA. Let's use this one and change this to be point, well, and the border will be one pixel, solid, and the color of primary like this. Then for the select group, let's add Currency Converter, select group, this one, the display will be exap with rap and justify content to be pace between and the gap of one pixel. Then we will have RNC Converter select display of align items, center and gap init. So that's it. For this lecture, we will continue in the next one. 30. CSS style part 2: Alright, let's continue now with this style. So let's copy this class because we will use it with the image tag like this. We will make the width of our image 42 pixel and the height as well. And we will add order radius to make it circular like this and object fit to be cover. And we will add border of tupexl solid and with our primary color like this. And also, we will paste this class again with select DAG, and now we will add border none Outline of none, and also the cursor, we will make it pointer and one size 18.Exl one to eight of 600 and we will add adding of X pixel and n exxl or the radius of eight pixel would be right here. Okay, S him over tone. And All right. And we will add a ground of RGB. A. Let's select this one and change it to point oh eight. And the color will be light color, sv text, light, and we will add transition of 0.2 second like this. Also, we will paste it again with select tag and option tag, you will add a ground with variable of dark, back ground, and the color of light of text like this. And for the swab button, which is this one, we will add currency converter, swab button, this one, and display Lex line items. Center, Stify content. Center and the width will be 46. Excel and the height as well, and border of none, and border radius,teen percent and cursor pointer. And the background, we will give it the Kandari Background with transition of 0.2 s. Okay. Then we will add same one width over background will be of secondary dark and transform, we will make it rotate 118 degree like this. Okay, this should be b button. So let's copy this tag or class and add it right here. As you see, it is transformed. And we will target now the icon itself. So, let's make the font size to be 24 Exel and color. We will add white color and transform with rotate of 90 degree. I like this. Okay. And then for the exchange rate text, let's add new class. Which is currency converter. Exchange rate, text, margin tube 28. Excel, adding 14 Bxl and text align to be center, font size, 16 Bxl and font weight, 500 and the color will be from text light and the border with one pixel, solid and variable of border light. And the border radius will be 14 pixel and the background will be variable of glass like this. And for the convert button. Let's add currency, convert button, width will be 100% margin, top of 12, Exel, and adding will be 12 Excel and font size 18 Pixel one weight, will be 600 and border. None, and border radius will be 14. Excel, cursor will be pointer and the background. We will make it variable of primary color and the color variable of PG, dark, and transition of 0.2 second. After that, we will copy this one. And on Hover, let's add Hoover, the background will be primary, dark, and the color will be white. This should be in the center as well. Let's see the class. This should be exchange rate, just like this. Now all is good. We will start in the next lecture with Javascript. 31. JavaScript Setup: In this lecture, we will set up the basic JavaScript for our currency converter. We will select all important HTML elements and define the variables we need. This is the foundation before we add functionality like swapping or converting. So first of all, we will select all selected dropdowns inside the currency converter. One currency. Elect elements equal document query selector or our currency, or let's copy it as it, which is this one, and paste it right here and add dot then space Elect. Okay. After that, we will select the input field where the user types the amount to convert. Const, input source currency, equal document dot get element by ID, and we will add input. This one? No, it should be the input field, which is this one. Inputs currency. Okay, like this. And we will select the source currency, flag image, and drop down. So on image source currency, equal document, get element by ID or image source currency, which is this one. And paste it right here and also selectors currency, which is equal document dot get element by ID or electors currency, this one. And press it right here. Then we will select the button that swab source and target currencies. Const button web equal document Get element B ID or button. Web. We will select target currency flag image and drop down. Const image, target Currency equal document, but G element by ID or image target currency, which is this ID, copy it and test it right here and select get currency, which is equal documented element by ID or this select tag with this ID. Okay. And we will select the text element that display the exchange rate or const, exchange rate. Text, equal document.it element, YiDOEchange rate text which is this one. And we will select the convert button. Most button. Convert, equal, document dot Git element by ID or button, convert. And we will initialize variables to track the state. So let is pitching equal pulse. So this will track if the API call has been made. And also, we will hold the current converging rate, so let conversion equal zero, and we will add user input amount to be initially with source currency value to be equal zero and the calculated converted amount set to be zero as beginning. So let target currency value will be equal zero. So in the next lecture, we will start with swab functionality. 32. Swap Functionality: In this lecture, we will make the swab button functional. So swabbing both currency values and flags. So button swab dot Event Listener. First of all, we will swab the selected currencies in the drop downs. So selectors Currency dot value. And select target Currency, dot value will be equal select target currency. Dot value, and selectors currency dot value like this. Okay. And after that, we will swap the flag images to match the new currencies. So imagers currency dot source and image target Currency, dot source will be equal image, target. Currency dot source and image tours currency dot Source. Okay. After that, we will update the Ibot field to show the last converted value. So input source currency dot value will be equal target currency value. And if we already fetched rate, we will invert it to reflect the swab. So if is pitching, then we will add conversion. Rate equal one divided by conversion rate. And we will call a function that we will implement later to update, exchange rate. So update exchange rate, function. So that's it. And this icture and the next one, we will implement the converging logic. 33. Conversion Logic: Welcome back. Now, we will handle converting amounts using life exchange rates from an API. When a user click on Convert button, we fetch the latest rate and calculate. So first of all, we will add an event listener to convert button that run when clicked. So button, convert addEventRstiner, with click. First of all, we will check if the user entered a varied amount which is greater than zero. So statement if input sours currency, but value less than or equal zero, which is minus, we will show an alert if the input is invalid. So alert with message like this. And then we will stop running the rest of the code, so we will return. Now we will show a temporary loading message while ftching the data. So it will be exchange rate text, text content equal this message. And we will get the currency selected and the from drop down. Cost, Delect source currency value will be equal Delect Currency dot value like this. And also, we will get the currency selected and the two drop down. Cost Delect Target currency value will be equal. Select target currency dot value. Then we will add try cachblock in order to fetch. So first of all, we will fetch the live exchange rate from the API to const response will be equal weight pitch with lactic in order to add variables, and we will get our exchange rate API from searching for exchange rate API to click this link, and you will click on Get free API. After you sign up, you will receive an email like this one, and you can click. In this link, you will redirect it to this page. So we have to copy this one and it's back to our escode and remove until we reach this slash with this API. And after that, we will add lash there. Now we will add a variable, and this variable will be select source currency value. This one, and also lash let's add Dar sine and K bracket, select target currency value. Okay. After that, right here, we will convert the API response into a JavaScript object. So cost Data equal await response JSON. And we will save the rate from the ABI response. Converginequal. Data Virgin, underscore. Rate. And we will mark that data has been successfully fetched because we have already fished to be false right here. Now, after it is fished, we will change it to be true. After that, we will update the screen with the converted result to update, exchange rate function. And in the cache error, we will add error to the console log. So console log here should be dot error, and we will add message And right here, we will add the error, and we will show an error message to the user. So right here, let's add exchange rate text dot text content to be error pitching. Exchange. All right. Don't worry about this warning. We will solve them later. So that's it for this lecture, and the next one, we will continue with our JavaScript. 34. Updating Display, Flags & Initialization: Alright. Before we start with our lecture, let's solve this issue, which is a weight are only allowed within async functions. So, in order to get rid of this warning, we have to addhe a Sink. So that's it for this issue, and it is solved. Okay? And in this lecture, we will focus on two important parts our currency converter, which is update the displayed conversion result whenever input or selection change. And also, we will manage flags and drop downs dynamically for different currencies. By the end of this lecture, you will understand how to write a function to calculate and update conversion rate and change flags when currencies change and dynamically populate drop downs with all available currencies and finally format numbers for display. So first of all, will update, display function. Update, exchange rate. We will get users input as number limited to decimals. Source currency value equal parse load with input source, currency value two fixed by two. Okay. And we will multiply the input by the conversion rate to get the target value. So target, currency value equals value. And right here, we will multiply it by conversion rate, dot to fixed by two as well. And also, we will update the display text to show both values with currency code. So exchange rate. Text dot text content equal, add back text. And right here, we'll add format. Currency. With source currency value right here, you add a variable of elect source currency dot value. And here it will be equal format. Currency with target currency value. And here we will add elect target currency dot value. Okay. And now for lags and initialization, we will implement a function to change the flag image whenever a new currency is selected. So function change Lag with elect element. So we will get the selected currency value like USD to euro, constelect value equal, select element, dot value. And we will get the idea of the drop down that regard this function or const elect element. ID equal, select element dot ID. And we will look up the flag code that match the selected currency to const. Lag code equal currency to lag code. And here we will add elect value. So after that, we will add if statement. So if the source drop down was changed, we will update the source flag. So if elect element ID will be equal elect source currency, then we will make image source currency dot RC or source equal at TB s with lag dn.com, W 640 our variable, which is flag code Ng. Okay. And if the target drop down was changed, we will update the target lag. So right here, we will add F, a or should be. We have to add here normal bracket, elect element, ID, equal, elect target currency we will update the image target currency dot source will be equal the same link right here. Let's copy it and slash lag Code dot NG. And also now we will populate the drop downs. So we will loop through every currency, select element on the page. So currency, select elements forEach method with select and we will return right here. We will add all currency options dynamically. So we will use or and right here we'll add currency and flag code of object dot entries with currency to flag code. And right here, we will create a new option element for each currency. So const option equal document dot create element, which is option, and we will set its value to the currency code like USD, the option dot value equal currency, and we will show the currency code as text inside the drop down option text content will be equal currency. And then we will add a new option into the select menu, select dot append child method option. Okay. And right here, we will add event listener for when the user picks a new currency. So select add event listener with change, let's remove this event. And right here, we will reset the input value to zero whenever a new currency is chosen. So input source currency dot value. We will set it to be zero again. And we will mark fetching as false since we may need to fetch it again. So is pitching equal false. And also we will update the displayed conversion text, so update exchange rate. And we will update the flag image for this currency change flag with select like this. And right here, we will set default currency for source, drop down to USD, F, select dot ID will be equal. Select source currency. We will add select dot value to be equal USD and also, we will select default currency for the target drop down to anything, for example, IDR. So if select dot ID will be equal, select target currency. We will select that value will be equal IDR. Okay. And finally, we will format the numbers, so we will implement helper function to format numbers with commas like 1,000 instead of one and three zeros. The function format. Currency it will accept a number and we will return until number format, dot format, and it will accept the number. Before we test our app, let's just go back right here. Right next to this line of code, and we have to add another event listener. So this is inputs currency ad event listener. And we'll update the exchange rate whenever we typing. Okay. So right now, if you test the app, it is work, but this is the way it is bitter, so let's add this function. So if is itching, double and input source currency dot value is greater than zero. Then we will update the exchange rate to update exchange rate function like this. So right now, if we test our app, for example, let's leave it dollar sign one and right here. British currency. So let's convert it. As you see, it is converted without any problem. Let's make it reversible. As you see, it is work without any issue. So let's try USD to USD and 15. Okay, so that's it for this project and see you in the next one. 35. Demo & Introduction: Welcome to this new project. In this lecture, we will demo the final Weather app so you can see what we are going to build together. This app allows the user to search for a city and instantly see the weather conditions including city name and current date, weather icon, emperatre and condition. Humidity and wind speed, and five day forecast. We will also add location so the app can show your weather automatically on the page. Load. Finally, we will handle the error of the city if it is not found. So as you see right here, once I accept the location, it show my location and the weather in my city. And then you can also search for any city you want. And if you add a Dui city name, it will show not found. So let's start now with HTML structure. 36. HTML Structure of the Weather App: All right. Now, let's start with our app. So first of all, we'll create a new folder with name of this product. We will add index GML file, ESS file, script file. And also, we will add a folder that will have sits, and we will move another folder on it, which has another folder with weather and some icons like these in order to use them in the JavaScript file. So let's start with our index HTML file with HTML boilerplate, change the title to be with our app. And right here, we will link our style, let's add style CSS. And also, like I said before, we can import script right here or above. So let's do it now here. There is no problem with that. Add script file, and the source will be script JS, and also we will add Dfre so this will tell the browser to download the script while parsing, but exude it only after HTML is fully parsed. So this will avoid blocking page rendering. And we will import also CDN oxy icons. So let's go to our previous. Let's see it is imported, let's copy the whole link and add it right here. And now let's start with our body. So first of all, we will add main content wrapper. So we will use main tag. This main tag will have a class of main container. Inside it, we will add search bar inside a header. So that will hold the city input and search button. Let's add header with class equal input container, and this header will have input ag with type of text and also class of city input. And placeholder with Third City. Okay. After that, we will add button user so they can click to search for the city button with class of BTN. And inside this button, we will have icon element from Boxy icons. So I tag with class of BX BX like this. And after this closing er, we will have now a section. So this will be for wither info. It will be hidden by default with inline style. And after that, we can show it in the Javascript. So for now, let's make it with class of info and also tile equal display num. Okay. So inside this section, we will have container or location name and current date. So div and this div will have lass of locations date, dash container. And inside this div, we will have another div for location. Let's add div with class equal location. And we will add MAP icon, ram Boxy icon. So I tag with class of BX, x dash, Map and also we will include heading tag, which is patch four with class of country XT, this will be using and filled by the Javascript, okay? And after this closing div, we will have another five dag with glass of current date XT. This will be insert a human friendly date string here. Okay. After this closing div, we will have another div, and this div will be for summary container. The class of whether dash, summary, dash, container. And this container will hold the image element from weather condition icon, and the source will be empty in the HTML, and we will fill it in the Javascript. Image, leave the source empty, and we will add, well, let's keep the Alt with weather icon. And this will have class of MRI Image. And then we will add a div for temperature and conditions. And also, this will be filled in the Javascript. So div with class of weather summary. Info. And inside it, we will have H one tag with class or temperature TXT and also H three with class of condition XT. Okay. And after this closing div, we will have another div and this we will additional conditional like humidity and windy speed. So div with a class of weather dash conditions. A container. And inside it, we will have condition item humidity. So let's add div with class of condition item. And this div will hold icon or water. So class of XX Water. And also, we will have a div for condition info like humidity and the value. Div with class of Condition. Info. And inside it, you will have H one tag or five should be. Humidity. And itch five with glass of humidity, value XT, and we will leave it empty because we will fill it by the Java script. And also, we will have condition item for windy speed. So right next to this closing div, we will have another div with class of condition item. And inside it, we will have tag with class of BX space BX wind and also we will have a DIV with class of condition info. And inside it will hold H five tag with text of wind speed and H five tag or las winds value TXT, and it is empty as well. And after this closing div, we will have now a container for forecast item like hourly daily cards to div with class of cast dash items, dash container. And this will be empty. And in the Javascript, we will append forecast card here. Okay? And the second section will be our initial message that will be shown when the page loads. So section with class of third 80 and space another class we will add section message. And in this section, we will have div with H one tag. This will have dg t and H four with some text. So let's add this text. Okay. And also, we will have another section. This will be or not found message. It will be hidden by default, and then JavaScript will show this if the API return no result or requisite city. So right here, let's add another section with class of not found and found another class for section message. And the style. Will be display none, but the. And we will have would be a DIV with H one, not found and H four tag with some next. Like this. Okay? So, that's it for this licture and the next one, we will start with the styles. 37. Styling the Weather App: In this lecture, we will walk through the full CSS file that style our weather app. So let's go to Styles TSS. First of all, we will import fonts from Google. So let's go to our previous because we need opens font, and let's copy also the default margin and heading, and let's paste it right here. Then we will remove 500 Wont family and add 300 Mont family like this. And now we will add for the body some linear gradient and display and padding and color. So body tag with a ground of linear gradient 135 degree and also the color will be like this and also because it is linear, it will take these two colors and we will make the minimum height to be 100, H, which is a full view and display ex justify content Center, and align items to be center as well, and the bedding, we will set it to be 15 pixel and the color, we will make the color white or the text like this. And now for our main container, we will make the width of 100%, and the maximum width will be 400 pixel background. We will use RGBA values and the opacity will be 0.12 or the radius with 12 pixel and bedding of i Bexl that drop filter will be with lure Vi Bexl and box shadow, 08 pixel, 30 Bixl and RGBA. With zero and 0.2 for the opacity like this. For the input wrapper, we will add a position for the search pattern relative to the input input container with position of relative, and we will add margin bottom 25 pixel like this. And for the city input field the input, we will make the width 100% and the bedding on the four directions. And 18 Bxl like this. Or the border radius, we will make it Bxl and border of none outline, none as well, and the color will be white. And the background with RGBA of these values except this one will be 0.15. And for less holder text styling, let's add eight. Input with less holder, we'll take a color of RGBA with these values, and right here we will make it 0.6. Okay. Then for the search button, we will add some position and move it to position absolute, on the right. It will be 15 pixel and on the top, 15% and transform with translate on Y direction of -15% and we will add a ground of this value. 22 and border, none, and border radius of 15% to make it circular and bedding eight pixel. And the cursor will be pointer and display x align items, center, and justify content to be center as well. And before I forget, please go back to index SGML. We have to move this div which is forecast items center to be right here. Okay. Now we will style the icon inside the search button with size and color. Their ETN, we will target icon with color of white and one size with 22 Excel. And for condition Im, we will target the icon with one size 28, Excel, and the color will be white as well. And for the wither info, let's add display of flex direction of column, and the gab will be 25 pixel. For the location, we will split two pieces of info to the left and to the right. Location, date container, display will be flex, justify content space between and align items to be center. Then for the location itself, display of flex line items, enter, and the gap will be Xpixel and font weight, 600 and for the withers Mariow dot with with our summary container, display of flick, justify content space between and align items enter. Or the wither summary image. With our summary IMG, the width will be 120 pixel and the height as well. And for summary text block, we will align the text to the right. So dot with summary. Info. Text a line to the right. And for the temperature text, we will make it a little bit larger text one size 2.5 pm one weight, 700. And for the condition text, puntu of 800 and the opacity will be 0.9. And for the condition container weather conditions. Container, display lex and justify content is between for the condition item, we will display line items to be center and the gap with eight pixel. Background, we will add or use RGBA with these values except this will be 0.1, bedding with ten pixel and 15 pixel and border radius with 12 pixel. And for the span span inside condition item. I think there is no span, but let's add it anyway. So span with font size when a pixel. And we will have for forecast items container, display flex, and a of 12 pixel overflow on X direction, auto, and adding bottom, 12 pixel. And forecast items container, we will hide the default scroll bar. So let's add minus web Git, scroll bar, display of none. And for single forecast car, we will make small rounded tile with Hover interaction forecast item Make sure item the minimum width of AT, pixel and the ground with RGBA. Of these values with 0.15 in the opacity and border radius should be radius with 12 pixel and adding 12 pixel. Next align will be center and transition with ground or should be here. And 0.3 second. Okay. Remove these like this. And for the hover on the forecast item, let's copy it and paste it right here on Hover. We will add that ground with RGBA. This one, except this will be 0.25. And for forecast item image, width of 40 pixel, and the height will be 40 pixel as well. Some of these classes will be in the JavaScript, not in the index file. And for dot section message, display will be flex, x direction, column, align items. Enter, text align. Enter as well, and the gap will excel and margin top 20%. And for the responsive, we will reduce some spacing and sizes on the narrow screens for bitter wt. So at media and right here, we will add maxi with 500 pixel for the main container would be librict adding will be reduced to 15 pexelF the temperature. Next, we will reduce the font size to two RM and for the forecast item, the minimum width will be 70 pexel. That's it. For the styling, and the next lecture, we will start with JavaScript. 38. Setting Up the DOM & Geolocation: In this lecture, we will set up the initial dome element selections, store our API key, and add du location so that the app can detect user location and show whether automatically. So first of all, we will select the input field for the Citiny Cost et. Input, equal document dot Query Lctor with itty input. And also, we will select the search button. Document query selector ATN, and select the ONF display section. Document dot query selector of class of weather Info. As we will select the section to show when a city is not found. Select the section to search for a city. And also, we will select element to display Timber chart text. Documented query selector with XT. And we'll select the element to display with our condition, which is for cloudy, sunny, and so on. Condition EXT. We will select condition or element to display humidity value. Dash xt. And also, we will select element display wind speed should be small wind value, xt, well document querySelector, or wind dash, value dash xt and select weather image or icon. Whether Summary, IMG, equal document query selector or Whether Sumar IMG. And we will select element to display the current date, current date text, equal document, query selector, current date TXT. Also, we will select the container where forecast items will be added. Once Ocast items. Container. Document query selector, or cast items Container. And we will store the IBI key for open weather API. So now we will add just for initial is. This key equal empty string, and we will add it later. And now we will implement add event listener function in order when the page loads. So window dot add event listener with load First of all, we will check if the browser support geolocation. So if navigator dot Goocation we will get the user current position, which is latitude and longitude. Navigator dot gu location. Get current position with async. And this will accept position, and then we will return. We will destructure latitude and longitude from position coordinates. The con latitude and longitude equal position d like this. And we will call the function to update the weather by coordinates. Or now it's not implemented, but we will implement it later. So update we info by coords with latitude and longitude. Okay. And after this cal bracket, we will add F statement. If the user denies location access, we will saw Search city section. So Displayction function. And right here, we'll add search City section. And right here, we should add a comma like this and right here, we will add se. If due location is not supported, we will show Search City section. So show display section for SER City section like this. That's it. For this lecture, in the next one, we will implement search events and help our functions. 39. Search Events & Helper Functions: All right. In this lecture, we will handle user interactions like searching by button, click or pressing Enter and write helper functions to fetch the data from the ABI and get with the icons and get the data. But before that, we have to go back here and we should add or select country text. So const, try xt equal document dot query selector. XT. And as you see right here, it asks you to allow for location because we implemented right here in this event listener. So let's now, we will add a click event listener to the search button. So let's add search button dot ad Event Listener with click, and we will check if the input is not empty so F, at input dot value dot RM is not equal empty string. So we will update the weather info using the Entered city name. So update. With info with It input dot value. And after that, we will clear it input in order to make it work again with new search. Okay? And also, we will add key down event listener to input field. It input, add event listener. But this time, it will be keyword or key down, sorry. And we'll accept event. And right here, we will check if the key Enter is pressed, which is Enter and input is not empty. So I event key equal Enter and this condition, which is here should be it be with value. Okay, let's copy it and paste it right here. If it is not empty, then we will update with our info using Entered city name. So this line, also, we will copy it and paste it right here. And also, we will copy this one because we want to make the city IbotFeld is empty again. Okay. Now it is time to implement a function to fit data by CT name. But before that, we have to go and get this API key, so you can go to web browser and search for openweather API, then select this one. After you registered, you can go right here and click on the dropdown and click on my API keys. You will see this key. You can also generate a new one without any problem. So let's copy this key and we will back again to our VS code, paste it right here, but make sure there is no space in this string value. And for the function, we will add async function with name of Git pitch data, and this will accept in point and also city name. And we will construct ABI URL with endpoint and City. I will include this URL in the resources, so you can paste it because it is very long and to avoid any mistakes. So this will accept endpoint because of that, we use acti endpoint and City, and also we have to add ABIKey which is initialized right here. Okay? After that, we will fetch the data from API to cost response. Equal at, and we will fetch the API URL, this one, and we will return this response to parsed as JSON data. So return response dot JSO and we will implement another function to fetch data by coordinate, which is longitude and latitude. So then function. Get data by. And this will accept endpoint and for latitude and on or longitude. And also, we will construct API URL with endpoint and coordinates, and also I will upload it in the resources of the lector. As you see, it is also accept endpoint, latitude for latitude and longitude and also via the API key. And also, we will return the, let's copy them like this. And now we will implement a function to return correct wither icon based on the weather ID. If you remember, we add right here some SVG icons. So in order to use them, we have to implement a function this function will get whether icon, and this function will accept ID. If the ID is 200-232, it means that it is thunderstorm, so we will return thunderstorm icon. So right here, if ID less than or equal 232, then we will return, and we will add this icon, so let's copy the whole name of it with SVG and paste it right here. And if the ID is 300-321, it means that there is a drizzle, so we will return a drizzle icon. So if ID is done or equal 321, then we will return this icon And if the ID is 500-531, it means that it is raining, so we will return rain icon. If the ID is 600-622, it means that snow we will return snow icon. 622. Then we will return no as we do. And if the ID is 701-781, it's mean that atmosphere conditions like mist or smoke or haze, so we will return as atmosphere icon. And if the ID is exactly 800, it's means that it is clear sky, so we will return clear icon. If none of the above match, it means that it is a type of cloudy weather like scattered or broken, so we will return clouds icon. Okay. And finally, in this lecture, we will implement a function to get current date in short format. So function get current date equal or function, we will create a new date object. Equal new date. And we will return formatted day, weekday, day, and month. So return current date dot to Local date string with English GB and right here, we will make the week day to be short and the day run to digit, and also the month will be short in order to take only three letters from month like SEP for the weekday, we can use you for Tuesday. Okay, that's it for this lecture in the next one, we will implement and update weather and forecast display. I 40. 6 Updating Weather & Forecast Display: All right. In this lecture, we will create functions to update with our info, handle forecast data, and control which section the app is shown. But before that, right here, it seems that the endpoint have capital, so let's change this one to be accepted and also this one to be endpoint like camelCase. Okay. So let's start now with function to update the Weather info by the city names function. Update Weather info that we implemented or call it above. This will accept a city, and we will fetch with data for the city using the API. So cost, Wether data equal await, get fetch data with wether and the city. If the API response code is not 200, which means that there is an error, we will add or display message section. So if we Data code, not equal 200, we will show not found section. Show display section of not found section, and we will return in order to exit function early. Okay? After that, everything is okay, we will destructure required data from the ABI response, which is the name of the city or the country, temperature and humidity from main wether condition ID and main description from wether and wind speed from wind. The cost name will be country. And from Maine, we will take temperature and also humidity. Okay. There should be const and equal wither data. Let's add here also. The wether or we will take ID and man and wind speed. Okay. And we will update also UI weather information. So country text dot text content will be equal. Country and text text content will be math dot Round, we will map or around the temperature to nearest delicious value math round for EMP plus Ilsis sign or icon, and also the condition text text content from main and we will set humidity. Humidity, value, text, content will be equal. Humidity plus percentage sign, and wind value, text, x content will be equal Bed, plus meter the second. The unit of the wind and for today's date, current date text text content will be from current date function that we implemented. And for correct icon, we will add wither Summary image dot Source. Rum acids. Folder, slash wether because we have folder with name of wether inside. This act, and then slash get whether icon function with ID. So in order to get correct icon, and also we will fetch five day forecast data for the city. CT forecast. Data equal, await. Get data with forecast and the city. Then we will update the forecast display with this data. Update forecast. Info with forecast data. And finally, we will show the Weather info section to display section, and this is not implemented yet from info section. And now we will implement a function to update Weather info by coordinates which is longitude and latitude. So Async Function. Update. We info by coord this will accept latitude and longitude. We will fetch the wither data using coordinates with previous function. So once with our data, equal await, get fetch data by coordinates with whether and latitude and also longitude. So if the response is invalid, we will show not found section. If weather data dot code, not equal 200. We will show display section or not found section, and also we will exit from this function. Otherwise, we will structure the needed data, same as before. So this one, let's copy them and paste them right here, and we will update the UI with the data, which is the same as here, let's copy them as well. And paste them right here. And we will fetch forecast data using coordinates. So const forecast data equal await pitch data with forecast and right here, latitude and longitude. And we will show the weather info section. So show display section with Weather info section. All right. And we will implement function to update forecasts section with five date day date. So function, update forecasts info, and this will accept forecast data. So we only want forecast at 12 noon, ons time. The Equal 12 at noon. And we will get today's date in year, month, and day format to skip today's forecast. O today, date, equal new date dot two ISO ring dot split E, and we will take the first index, and we will clear previous forecast items. The forecasts item container inner HTML will be empty. And also, we will loop through each forecast entry from the API. So forecasts data dot list dot EH with forecasts and then we will add return. So if forecast time is 12, and it is not today, we will keep it. So if forecast dterscTxTt includes method, timetn and NOT forecast dt underscore TXT dot includes today date. Then we will create forecast card for this item. Create forecast item with forecast. Okay. Now we will implement a function to create forecast item card. So function, create forecast item. This will accept DT, underscore TXT, run, date, and wether run, ID, and main temperature. Okay? Right here, we will convert the string date into date object to const date. They equal new date with date right here, and we will format it. Today month like 25 or September const date. Result equal date taken two local date string with English US. And the day will be to dash digit and month will be short. Okay. After that, right next to here, we will create HTML structure for the forecast card. So forecast item. Equal, add backtick. And right here, we will add div with class equal forecast item. And right inside it, we will add H five with class equal forecast. Item date. And right here, we will add the date result and image with sort of assets, withers get with icon with ID. And remove the Alt. We will add class equal forecast item image. Okay. Then we will add another at five with plus equal forecast it or temperature. And right here, we will add math dot round for temperature. And we will insert the new forecast item into the container. So forecast items, container dot insert adjustment Insert adjacent HTML, like this. And we'll add before end and forecast item. And we will implement function to control which section is visible on the screen. Function how display section zit the section, and we will hide all sections first. So with info section, search section. Not found section for each with second, and we will return Second, stylet display equal none. And after that, we will show only the section as as argument. Section tit display will be equal leg. All right. Now, I think it is time to test our app. So let's click on Allow this time. Okay. I see it fit the city and with all details, but there is here should be a row of five day forecasts, and this should be hidden. Let's try to search another city. I think both coordinates and search is work, but there is some issues. Let's go from the beginning to check if there is any issue. Yes, right here, I think it should be search ct. Let's see what else. And the update with coordinates which is this one. Here, we should add update forecast info. With forecast data. And this we should call G H data by coordinates or forecast latitude and longitude and right here forecasts data dotlts. This should be for each E is capital, as you see, its show now five day, but there's still some issue in the styling. Now let's go right here in this inner HTML. This class would be closed, so let's add quotation and right here as well. And this one. Okay, as you see, it is very good now, and here we will add Elisia sign. And let's fix this issue. So this would be second dot style. I write it correct, but I don't know why this show. Okay, I think this is very okay. Now let's try another city. It show all details. And if I try to add dummy city, you will see not found. The city you are looking for cannot be found, which is not found display message. And for correct one, show it without any problem. Let's try to reset our location again in order to make sure not this, which is this one, reset permission. And let's reload the app now. Allow this time. Okay, everything is very well now. That's it for this project, see you in the next one. 41. Demo of the To Do App: In this lecture, we will preview the final version of our to do app. This app allows users to add new task, edit them, and also you can remove them. All these tasks will be stored in the local storage, so they remain after refresh the web page or re open it. In the next lecture, we will start with HTML, so see you there. 42. HTML Structure: Now we will start, create the basic structure of our to do app using HTML. We will add the container, title, Ibut box, and button, and the list that will display the task. So first of all, let's create new folder with our app and inside it. Index file, tile file, and also crept file. In the index, we'll add SGML boiler blade and rename the title. After that, we will link. Our style sheet. And for the script, let's add it right here with source of rpGsoil. Then we will add main container that will hold all App content Dev with class of container and we will add section for the app heading and input controls class will be input container. And inside it, we will add main heading of the app using H one, and grouping input and button side by side. So div with class of input. Group. And it will have input field where the user types new task. This input will be with type of text, less holder. Add new to do. Okay. And we will assign ID of input box, and also we will have a button to add the task with ID of add BTN. And here we will add add text. And after these two closing divs, we will an order list where to dos will be displayed dynamically. So you'll tag with class of to do list, and also ID to do list. And we will leave it empty so we can fill it inside JavaScript. But this line would be inside this container div, so we have to add it right here. That's it for the HTML, in the next lecture, we will start with styling. 43. Styling the To Do App: Alright. Now we will start with styled app using CSS. We will use dark team with shadows, rounded edges, and responsive design for smaller screens. First of all, we will import Google fonts, let's go to our previous one and copy the default margins and the Google font past them right here. And now we'll start tile the body. Body, background will be this black color and the color will be light text, so F zero, F zero and F zero, and the minimum height will be 100 VH or viewport head and display lex, justify content. Center, align items, center and the bedding with 40 pixel and 20 pixel. After that for the main container, we will add back ground with this color PD like this and also adding with 30 Bxl and 25 pixel or the radius of one bixl and the width will be 100%, maximum width 500 pixel and box shadow with thin pixel, thin Bexl, Tbxel and this dark color. And also, we will add a coma with minus ten pixel, minus ten pixel. And 30 pixel with this color. Three, three, B, five, E. Okay. And for the title, let's target H one. Next align will be center and margin bottom with 25 pixel color. We'll make it orange color. And letter spacing one Excel to add some spaces between letters or the input group styling, dot input. Group display will be flex gap and pixel. And also margin bottom 25 pixel. For the input field, so we'll add input, square bracket, type equal text like this. Let's add here. Complete the quotation, and we will add x of one and adding 14 pixel and 18 pixel, border radius with 50 pixel and border of none. Like a ground will be this color and also the color will be this white one font size 16 pixel. And also box shadow. With NST, I pixel, by pixel, in pixel, and this color and comma, you'll add inset of minus five pixel minus five pixel, in pixel, and this color. And we will add transition with poll and 0.3 second. And for focus effect for the input, we will add input tag with type equal text. And right here, or before it, we will have here on focus. When you click on the input field, we will make the outline will be none. Box shadow. Actually, we'll add inset, B pixel, B pixel, x pixel, and this color. Then add a comma with inset of minus three pixel, minus three pixel and x pixel with this color. And also we will add another comma with zero, zero, five pixel and we'll add this orange value or color like this. And for Add button, we'll add button tag and target Add button ID. We'll make the bedding of 14 pixel, 25 pixel and border radius of 50 pixel and border of none. A ground will be FF 9800, and the color will be this 11 weight, 600 and also the cursor pointer and the transition will be all 0.3 thecnd and box shadow, one bixel, one bixel, six pixel, and this kind of orange color and comma minus one pixel, minus one pixel and six pixel. And we will add this color five x six. Okay? For the Hoover effect, we will add button, Add button ID on Hover. We will make transform with translate to axis with minus two pixel, like this. And for to do list container, we will add sti style of none, and adding zero And for the tasks to do list, and we will target LI tag, which will be inside the UL tag, display x justify content to be space between line items, center and background will be this color and margin bottom 15 pixel Adding of 14 pixel and 18 pixel and border radius 15. Would be 15. Pixel, and for the box shadow, five pixel, five pixel, 15 pixel, and this color, and comma minus five pixel, minus five pixel and 15 pixel with this color like this. And also transition will be all with 0.3 second. And now hover on task to do a list with LI on hover. We will add transform of translate on the Y axis of minus three pixel to move in the Y direction. And also for paragraph inside to do list. I, we will target the paragraph inside it. Let grow one margin right. If 16 pixel and word the break will be break word. Okay. And for buttons, which is edit and delete, VTN adding will be six pixel and 12 pixel or the radius in pixel and border nun, cursor pointer point weight, 600 and transition all with 0.3 second. Or edit button. Edit ETN. This will be inside JavaScript. Let's add background of it for EAF Den, and the color will be white and margin write with a pixel. And for Edit button hover, we will make the background with this color like this. And for the delete button, delete In the background will be kind of red. And the color will be white. And hover, we will make the back ground will be lighter red, 6228. And now for responsive, we will add media query with screen and maximum width 500 pixel. We will make input group with flex direction of column. And for the input, would be input with type equal. Let's add text and also for button. Without dot, Add button. We will make the width of 100%. Okay. Let's fix some issues in our style, first of all. In the import font, we will remove 703 hundred and we will add 500 or one to weight. Also, for align items here should be ex dart and this should be adding top of 15 pixel. Okay? A and for this to do a list with LI and paragraph, we will remove this flix to grow and add margin right of 15 pixel. It is right here, okay, but we should have one size or of 16 pixel. Okay. And finally, and this should be type without any issue. So that's it for this lecture, and the next one we will start with the JavaScript. 44. JavaScript Setup and add a todo: Now we will set up the JavaScript by selecting the main HTML elements, input, button, and list, and we will prepare the variables that will help us later like tracking what to do is being edited, and also we will write the function that allows user to add new task into the list, either as a new item or by updating the exist one. Each task will also be saved into a local storage so it is not lost when the page reloads. First of all, we will get the input element where user types a task. So const input box equal document get element by ID, which is in butt box, and we will get the Add button element. Equal document dot Get element by ID, and add BTN. And we will get the container UL and OL where all to do will be shown. Const to do List, equal document dot G element by ID or to do list. And now we will initialize a variable to temporarily store the todo currently being edited. So let edit to do equal null as first value, then we will implement a function to add to do, const, add to do. Equal. We can use also our function like this. So we will get text typed by user and remove unnecessary spaces, const, and put. Text, equal and bot box dot value rem method. And if nothing was typed, we will show an alert and stop the function. So if input text, got linked, less than or equal zero should be one equal. Then return unalert. You must write something in your todo. And also we will return pulse to exit from this function. After this closing Kelly bracket, if the user is editing and existing to do add button dot value equal d it like this, we will update to do in the local storage. So ed it local to do, which is a function that we implement later and edit to do that target that previous element. Epling HTML, like this. And also, we will update the displayed text in the list. So edit to dot target dot previous element spelling HTML will be equal and both text, it should be. That being edited, and after that, we will reset button text to add and clear input. Add button dot value will be add and also input box value will be equal empty string. Otherwise, in the else we will create a new LI element, so const, i equal document Create Element, i, and we will create paragraph to hold the task text. Const P equal document dot Create Element, which is P tag and it append child, paragraph like this. And also we will create Edit button, const, Edit ATN, equal document, Rate element. Once the button or the task is added, we will add Edit button and Edit button dot inner text will be equal Edit. Like this. And edit button classist dot AD. We will add two classes. The first one is button to take this style and also this one. So the first class we add is button, and the second one will be Edit median. Okay. And after that, we will add it Bend Wild, which is Edit button. And also, we will create remove button, as you see in the demo, so closed delete. Ptn equal document dot create element with button tag and delete button inner text will be equal. Remove. Like this and we will add class list of BTN, and the second class will be delete BTN class. After that, we will append it inside the LI tag, and we will add the new task, I to Do List container. So to do List Appenhild which is LI to hold them all and we will make the input box. Dot value equal empty string, and we will save the new task in the local storage. Save local function, or save local dos with input text like this. That's it. For this lecture, the next one, we will implement the update to do. 45. Update a To Do: Before I start the new lector, let's go back right here, and this one should be value. Make sure it is value. And also, we have to add a line right in the s statement, right after this one, which is should B B inner HTML, equal and but text to take the value from the text. And now we will handle editing and deleting task. If the user click Edit, the task text goes back into the input box. If the user click remove, the task will be deleted from both the screen and local storage. So right here, we will add cost update. To do equal, we will use also R function with event. First of all, if clicked button is removed, et Targett NR HTML, equal, remove, which is same text of this one. So we will remove task visually from the list. So to do list dot remove child method of this et target dot parent element. Okay. And also, we will remove the task from local storage. So for now, we will call function with name of delete local dos with e dot target and element. And right here, if click button is Edit, so if at target dot innerHTML, equal Edit, then we will copy the text of the task back into the input field for editing. Input. Books dot value will be equal adt target previous element zipling HTML. After that, we will add input box dot books method. And we will change the add value to B edit. So add atnt value will be equal Edit button. And we will store the Clettask reference. So edit to do will be equal E, like this. So that's it. For this lecture, in the next one, we will handle the local storage. 46. Local Storage Handling: Lictor, we will implement Helbar functions to save, retrieve, edit, and delete to dos from the browser's local storage. So that task remain even after refreshing or closing the page. So first of all, we will implement a function to save to do and the local storage. So const save local to dos equal. It will accept to do. And then we will initialize, first of all, let todos. And if no todos stored yet, we will start with empty array. So if local storage dot get item method to get the todos, so we will use dos inside strings equal null. If it is empty, then we will start with empty array, so like this or to dose it should be else if we have honey to do in our local storage, to dose, will be equal Json dot parse, we will parse the data from local storage dot get item of todos. Okay. And after this, we will add the new todo, so todos push method in order to push the todo inside our array. Okay? After that, we will save the updated list back to the storage. So local storage, and this time, we will set item in order to save it with name of todos, and we will parse this value, so we will make it stringify or todos. Okay. And now we will implement a function to get all to dos from local storage and display them. So const get local to dos equal function. First of all, we will initialize to dos after that. We will add F statement for F local storage dot get item. If we don't have any to dose in the local storage, which is, by the way, equal null, then we will add empty array. Else, if we have already to dose in the local storage, we will retrieve to dose. So to dos equal JSON parse, we will parse them. From local storage dot G item or todos. And we will loop for them using for each. So todos dot for H method with to do, and we will create new list item by tag. So const, i equal document dot Create Element, which is I and create P tag for the task. Next, so const, P equal document dot Create Element with B tag, and after that, we will put it inside in our HTML equal to do, and append it using append child with PTAg. Okay. After that, we will right here, implement or create Edit button. So const, Edit, ETN equal document create element with PTAg and Edit button in text will be equal. Edit. And we will add to this button class name, so class list dot add method, we will add two classes, which is button and Edit PTN class. Then we will append it using API which is it Apenhild or Edit button. And for remove button, we will create ones delete PTN equal document dot create element with button tag, then delete button dot inner text will be remove, and we will add to this class list. So PTN and delete PTN. And we will append this inside our LI, so it apenhild for this delete PTN. And also, we will append the LI inside to DList. So TodoList apenhild for our LI tag. After that, we will implement a function to delete to do from local storage, so const Delete local to dos, equal our function which is accept to do and return. First of all, we will initialize let to dos and also like we implement later, which is this one and let's copy FI statement and the s also. So right here, and we will close this FI statement. So if we don't have any to do in our local storage, we will return null and return empty array of todos. Else, we will parse this value of todos and after this closing array, we will get the text of to do to remove so let to do text, equal to do dot children of index zero dot inner HTML, and we will find its index in the array, so let to do index equal to do indexOf method of to do index or to do text, sorry. And we will remove it from the array. So to do Todos splice method to do index, and we will remove it. And we will save the updated todos back to local storage. So local storage dot set item of name of todos, and we will stringify this. So json dot stringify todos. Okay. We will implement a function to edit exist to do and local storage. So const edit. Local to dos will be equal or function of to do, and we will retrieve todos from local storage. So let to dos equal JSON dot parse, we will use parse method or local storage dot get item of todos. And we will find the index to do that being edited. So let to do index equal to do index of to do right here should be to do, and we will replace it with the updated value. So to dose with index of to do index equal input box dot value, and we will save it back with updated list. So local storage dot set item with todos the name of our data and also json stringify for todos. That's it for this lecture, and the next one, we will implement event listeners. 47. Event Listeners: In this lecture, we will connect everything together with event listeners. We will load to dos from local storage on the page start and add new todos when clicking the button and handle edit and delete actions when tasks are clicked. First of all, we will add document dot ad Event Listener, right here with Dom content loaded. And here we will add or run the stored to do function. So get local to dos. And when Add button is clicked, we will run to do function. So add BTN dot add event listener with click and right here, add to do function that we implemented earlier, which is right here, this one, and when clicking on A to D, edit or remove buttons, we will run update to do. So to do list dot add event listener with click action, and this will run update to do function. Now, let's test our app. So let's open with Live Server. And as you see, now we don't have any task. Let's add Task one. Lick on add. As you see it is shown now. But there is an issue with styling, let's go back to our style CSS and search for to do list inside it, I with paragraph. Yes. Right here, we have actually, we add it, but then we remove it, which is lex grow. Let's make it one. Hopefully, now it's work, yes. It is done without any problem. Let's try add ask two. Click on Add. And now let's try to remove this one. It is removed without any problem. Refresh. Okay. And also, we can edit this one. So let's edit it to be this. It is updated without any problem, and also you can remove it. Let's now try to click while to do is empty. Yes, it is sure alert. You must write something anywhere to do. Let's add it now. And I will show you where local storage is located. So you can click on Inspect, write a click and inspect right here. And in the application, you can find this local storage under storage. So you will see right here the key of todos, which we implement in our script the name of our key. And also, you can check now. You can remove it. So it is back to empty array. And once we add it, again, it will fill with our task and value. And also, let's try to edit it. So task seven, edit, it is updated without any problem. But there is an issue with styling. So let's go back to our style CSS and search for to do list inside it, I with paragraph. Yes. Right here, we have actually, we add it, but then we remove it, which is lex grow. Let's make it one. Hopefully, now it's work, yes. It is done without any problem. Let's try to add sk. To. Click on Add. And now let's try to remove this one. It is removed without any problem. Refresh. Okay. And also, we can edit this one. So let's edit it to be this. It is updated without any problem, and also you can remove it. Let's now try to click while to do is empty. Yes, it is sure alert. You must write something anywhere to do. Let's add it now. And I will show you where local storage is located. So you can click on Inspect, write a click and inspect right here. And in the application, you can find this local storage under storage. So you will see right here the key of todos, which we implement in our script the name of our key. And also, you can check now, you can remove it. So it is back to empty array. And once we add it, again, it will fill with our task and value. And also, let's try to edit it. So task seven, add it, it is updated without any problem. That's it for this project, see you in the next one. 48. App Demo & Introduction: Welcome to this project. In this first lecture, I will give you an overview of the project that we will building. Git Hub finder app. This is a web based application that allow you to search for any Github user, view their profile. Followers following and Bio. Also, you can see their most popular pos with stats like stars, perks and programming languages. This app will help you to practice HTML, CSS, and JavaScript fundamentals and also teach you how to work with external ABI. In this case, it is Github ABI. Also, app is fully responsive on all screens. DCU in next lecture with HTML structure. 49. HTML setup: All right. Now, we will start with our HTML structure or GitHub Finder app. First of all, we will create folder. With name of GitHub Finder, and inside it, we will add index HTML file, TSS file and also script JavaScript file or HTML, we will start with our boiler plate, and we will change the title to be GitHub Finder, and link our style file. And right here, we will add our script with sort of script JS. Also, we will use FontOsomO icons. So let's go to web browser, search for CD and JS. Select this one. We will choose libraries, and now we will search for Fontosom you will see this one, click on it, and we will copy the first link. RL right here, and we will go back right here, then link with HRf and we will paste the link. After that, we will start with our main container. So first of all, we will start with navigation nav link, and inside it, we will have DIV with class of container, space, container. And inside it, we will include logo section. So A tag with a chif of Ash tag, and the class will be logo. And inside this A tag, we will have icon, and this will have a class of FA solid FA user. And also, we will add span tag with GitHub Finder. Okay. After this closing, A tag, we will include TRG form form tag, remove action, and we will include ID of form. Inside the form, we will have I tag with class Fa solid space Fa Magni ink dash glass should be also. And we will include search dash icon. Also, we will add input for search. So input with type of text and place holder with search for a user and ID search dash input. Okay. And after closing Nav, we will have main container div with class of container. And inside it, we will add a loader Jon during data pitching div with class of loader container with ID of loader. And inside it, we will include div with a class of loader, and we'll keep it empty because we will implement it in the JavaScript. After this closing div, we will have error message area, so div with a class of error container. And also with ID of error dash message. Keep it empty as well because we will implement it in the JavaScript. And after that, we will add main content area, main tag, and this will have class of main content. ID of main dash content inside it, we will include profile section. So a side with class of user dash profile, and also the ID will be user profile. Keep it empty as well. And for repos section, we will add section tag with class of repos, dash, container, and inside it, we will add H two tag with class of siction dash, title with text of popular. Repos. And also, we will include DV or the repos itself, let's add Dev with class of repos, and also the ID will be repos. So that's it for this lecture. In the next one, we will add style. 50. CSS Styling: In this lecture, we will cover the CSS styling. That gives our Github finder app its look and feel. The CSS file is quite large. So instead of write it line by line, I will provide it in the lecture resources so you can find it there. So now, I will copy it and paste it right here. As you see, it is almost 350 line of code. And also, we explain most of the styling and previous projects. All right. So in the next picture, we will start with JavaScript functionality. 51. dom content loaded event & initial setup: All right. In this lecture, we wait for the dome to fully load and grab all the elements. We will work with it later. Think of it as preparing your workspace. First of all, we will add event listener, so document to add event listener with Dom content loaded and we will add our function. First of all, we will define the base URL for the getup API, so const, API underscore URL equal at DTPS api dot get hub.com slash USERS SSH. After that, we will get the SearchForm element. So const, Fm equal document dot Get element, BID for search form. Search form. After that, we will get the input field, const, input, equal document, G element by ID or search input. And we will get the main content container const main content equal document dot get element by ID for main content. And we will get the container where the user profile will be displayed. Cost user profile. Container equal document Get element by ID for user profile. And we will get the container where the pose will be displayed. Cost repos container, equal document dot Git element by ID with pos. And we will get the loading spinner element. Const loader, equal document dot Git element by ID or loader. And finally, we will get the container for showing error messages. Cons error message container, equal document dot git element by ID for error message. That's it for this lecture, and the next one, we will implement loader and error UI functions. 52. Loader and error UI functions: Next, let's create some helper functions to show a loader while fetching data. Clear previous content and display errors. This will make the app feel smooth. First of Odd, we will make a function to show loading spinner and hide the main content. So cost show loader, equal RO function. We will display the loader first. So loader dot style dot display will be look after that, we will hide the main content, so main content, las list dot add. We will add as of hidden. And we will hide any error messages. So error message, container, dot, style, dot display will be equal. None. After that, we will implement a function to hide the loading spinner. Cost hide loader equal or function. And then we will return loader dot style display, we will make it none like this, right? After that, we will implement a function to display an error message. So Cost show error equal. It will accept message or function, and we will hide the main content. So main content dot class Dist dot ad Heiden. After that, we will set error message. So error message, container dot text content will be equal. We will add back tick because the message will be changed and we will add also some icon like this one, for example, right here, we will add message itself, and we will show the error container. So error message container dot style dot display will be equal block. A, and we will implement function to clear the UI before displaying new data on clear UI would be this one, equal R function, and then we will clear the user profile section. So user profile container.in HTML equal empty string. Also, we will clear the repos section, so repos. Container inner HTML will be equal also empty string, and we will hide error messages. So error message container dot style dot display will be equal, none this time. And we will show the main content. So main content dot. Class list dot remove, we will remove the hidden class. So let's add hidden. Okay. In the next one, we will implement pitching user data. 53. Fetching user data: Now we will implement pitching data from the GitHub. We will get the user info and repos together. So first of all, we will create a synchronous function to fetch user data and their pos. So Const H user data, equal async function with user name. And first of all, we will show loader before starting So show loader function. And then we will add Try Catch finally. Method. So with Try, first of all, we will fetch the user info and pose at the same time. So const, user response, and also repos. Response equal await, promise. So we will first H, and we will add Bactik to use variables. And the first variable will be API URL, and beside it, we will add the user name. This will fetch the user profile. After that, add comma, and we will fetch also. Let's add BTI with API URL, and also user name repos question mark, sort, equal, created. And here underscore page equal eight. So this will pitch latest eight Ribs. You can change it if you want. Okay. After that, we will check if the user was found. So if no user response dot. Okay. So if we have the user, if there is no user, sorry for that, we will throw new error with message of user not found. And please check the user. So we will throw an error if it is not found. And we will convert the user response to JSON data, so const user data equal await user response dot JSON. And also, we will convert the repose response to be JSO const response. Data equal At pos response dot JSO. And then we will clear the UI, so we'll call clearUIFunction, and display fixed user. So display user, and this function will be implemented later with its user data, and also display repos function, and this will be implemented later as well with repos data. Should be repos data. Or this should be repos data, sorry, repos data, and we will call it right here. And in the cache we will show error if something goes wrong. So show error. We will call function of show error and error dot message. And right here, after all is done, we will add finally finally, we will hide the loader again to show the main content. So hide loader function. That's it. For this lecture, in the next one, we will implement display user profile. 54. Display user profile: Okay, before we start with our lecture, let's go right here in this pitch of user name. Here it should be pair page, not pre, but please make sure you are corrected. And now let's make the user profile look noice. We will handle optional fields gracefully. So first of all, we will implement a function to display user profile. So const. Play user, and this will accept a user here should be equal because we will use array function or a function. And first of all, we will ensure that the blog, URL has HTTB or HTBS. C website URL, equal user dot Log and nut user dot blog dot starts with method. So this method will check if it starts with TTB. So if this statement, if it is not, then TTB s and right here, we will add or should be tick like this, and we will return user dot log. Okay, else, we will return user dot log like this. And then we will build HTML for user profile. So const profile. HTML equal acti. First of all, we will add image tag, and the source will be equal user dot Avatar underscore URL. This will come from the ABI of the GitHub and the ALT will be user dot Login and it will have las equal user space or Avatar. Okay. And right here, we will add H one tag. And this tag will have user dot name or we will show user dot login, but it should be right here. So let's add inside this curly bracket, user dot name or user dot Login. And we will add B tag, and this will have class equal. User Name. And this P tag will have the user name of this user. So we will add here, variable with user dot Login. Okay. And also, we will have a P tag or the Bayou. So let's add class equal Bayou. And inside it, we will add variable of user dot Bu or if he don't have, we will add text to include that this user has no bio. Okay. After that, we will add UL tag, and this UL will have class equal user starts, and inside this UL, we will have LI tag, and inside this I, we will add A or link, and the hR f will be. User dot HTML underscore URL. Okay. And right here, we will add mark tab, equal followers. So this link will be for followers of the user. And to open it in the new tab, we will add target. Attribute will be equal underscore blank. Open it in a new tab. And inside this A, we will have I TAG and this tag will handle or have a class of Fa solid and Fa users. Okay. And next to this tag, we will add strong tag with user dot followers. And after strong, we will add followers as a text. Okay? And after this closing LI, we will have another LI with dot just like this. And we will have another LI, and this L I will handle the following link. So a tag with HRF of user dot HTML, underscore URL. And right here, we will add tab equal following and we will make the target equal underscore blank, and inside it, we will add strong tag with user dot following. And after that, you'll add following as a text. Then after this closing UL, we will add another UL tag, and this will have class equal user should be inside it user info. And right here, we will add some data about the user, about the user, which is location, is blog, and also user Twitter link and user name. Okay? So let's add first of all, the location. If we add location, we will add first of all, user dot location. D statement. So we will use question mark and Bc ti with LI tag, and inside it I tag. And this tag will have a class equal if a solid and also if a dash, location, dash dot. And right next to this IAC, we will add our variable, which is user location. And if he ant location, we will just return empty or should be Let's remove it from here and return it right here. Okay. And after this one, we will add if he has any blog, so user dot blog, I Statement, add Acti with I tag, and this ITAg will have inside it I tag with class of Fa solid and space Fa Link. After this icon, we will have a tag with HRF of website URL, and also we will add Target equal underscore blank, and inside this tag, we will add user dot Blog. Else, if he didn't have blog, we will return just empty string like this. And finally for his Twitter user dot Twitter underscore, username, if statement, if you have, we will return I with I Ag for class of fa brand and space, if a X for a new logo, Twitter. Okay. And after this I tag, we will have a tag with AcherF of HTTB as twitter.com slash, we will add variable now, and this variable will have user Twitter, underscore username, and also we will add attribute of target equal underscore blank. And inside the A tag, we will have variable of outside we will add at and here we will add user dot router underscore user name. And if he doesn't include any Rooter link, we will return just empty sing like this. And finally, we will add the HTML with the Dom. So right after this, we will add user profile container dot inner HTML will be equal profile HTML. That's it for this lecture, see you in the next one. 55. Display repositories: All right. Let's back here in this ad event listener. This add event listener should contain all these functions. In order to make this happen, we will cut this closing early bracket and normal bracket and scroll down and paste it right here. Okay? Next, we will display user pos as cards showing stars, perks and languages. So first of all, we will implement a function to display pos. Ones display pos will accept repos and first of all, if there is no repos, we will show a friendly message. So if repos dot link, equal zero. So repos container donar HTML will be equal. Let's add BG tech with paragraph. This user has no public repos yet, because it may be we have some private pos, and we will return in order to exit from the function. After that, right next to here, we will map each po to HTML, the cost pos TML will be equal post MAP Method and each on each map, we will return backtick inside it with class equal repo card, and inside it, Div and also another div with class equal repo dash Header. It should be closed inside quotations. And inside this div, we will have a chef or the repo name inside A tag. And once the user click on it, it will redirect him to this repo link in the GitHub itself. So A tag with a chif of let's add variable inside it, repo HTML underscore URL, and we will make target equal underscore blank in order to open a new tab like this. And right here, we will add or display repo repo and single dot Name also we will add an tag with class equal visibility and with bo dot visibility so if the repo is public, it will show the bo itself and it is visibility as public bo. If it is private, it will not shown in any way. Okay? After toa closing div, we will add BTAG with class equal repo description po description. And inside it, we will display bot description. Or if there is no description at all, we will add a message of no description available like this. Okay. And now, after this closing div, let's make this above. And right here, we will add or display Div for repository stats like language Div with class equal Repo starts should be inside the quotation also, and inside it, we will add a variable. And this variable will have pot language, which is the language method of this repo. And I statement to add F statement and with B ****. And here we will show div inside it. Span tag with glass, equal language dot. And it's a style here, equal B round dash color. Okay, this background color will be from G Language. Color function that we will implement later and inside it, we will add pot language like this. Okay. Then after this closing i Bracket, we will add another span or just wait. Okay. Sorry, right here, we will add another span, and inside it, we will display the repo dot language. Else, if there is no language added, we will return empty string like this. But here should be this should be outside, like this. Okay. And also, we will display the stars and forks count. So right after this closing curly bracket, we will add another div, and inside this div will be icon with class equal. If a regular is if a star. Okay. And after this closing icon, we will add span, and this span will show inside it a variable of po dot star Gezer GezersUnder score count. It will show the count of the stars. Okay. And after this closing div, we will have another div with ITAC with class equal if a solid is FA code, branch. And after this tag, we will add span to display the VPO dot forks underscore count. Okay? And in this closing bracket, we will combine this HTML string. So dot join with empty string like this. And finally, we will add repos to DOM. So repos container dot inner HTML will be equal repos HTML, like this. That's it. For this licture CU in the next one. 56. Display repositories and user profile: Welcome to this final lecture for this project. In this lecture, we will implement helper function that give us each programming language a color dot. Also, we will wire up the search form, so when the user hit Enter, we will fitch their data. First of all, let's go right here and make sure this closing curly bracket be at the end of our code. And now we will implement our function. So const get Language. This will accept language, and we will return. So right here, when you go to the styles, you will find this line, copy it and paste it right here. Okay. This is a color of some programming language like JavaScript, HTML, CSS, Python Java TypeScript, C plus plus, Ruby, EHB and G. Okay. And after that, we will implement the add event listener or form submit. So form dot ad event listener and will be submit method. And here we will add E or event. First of all, we will prevent the page reload, so add E prevent default. So without this line, once we search, it will refresh the data or the page directly. Okay. And now we will get the trimmed user name, so we will use trim method, so const user name. Equal input value Trim. So we will trim the user name and also we will fetch user if input exists. So if there is user name, then we will fetch user data with our user name. After that, we will clear the input field for another or next search. So input dot value will be equal empty string. And right after this closing, we will call sich user data, so we will fetch a default user once the page is load. So we can use hitch user data, equal Octo cat like this. So as you see right here, it is the default one. You can change it if you want, like this. But we will leave it Octo cat so as you see, here is the profile picture, the name of this user, and the user name, and this user has no Bo with number of followers. So if you click on the followers, you will be redirected to the followers and also for the following as well. And also, you have a blog right here, let's search for another user this one, as you see, the location is changed and the followers and following and his repos tree, which is it, you can change it from the code if you want. There is an issue right here in the styling of this one. So let's go back to our VS code in order to see what's wrong. So let's go up in the repo language. So Okay, I see it now. This one, we will cut one of these closing span, and we will put it right here. Let's see if it is, it is work very well now. And finally, note that API of this GitHub will give you limited request pair 1 hour like 16 request. After that, it will stop this API from work, and in the next hour it will back without any problem. And finally, we will check if we enter wrong username, as you see right here, user not found, please check the user name. That's it for this project, C in the next one. Okay. 57. Demo of Quiz app: Welcome to this Quiz App. Powerful quiz application built with HTML, CSS, and JavaScript. In this project, I have implemented a login and sign up system using local storage so user can create accounts and save progress. A quiz interface that fetch multiple choice questions dynamically from the open trivia database API, a timer that counts down to keep this quiz challenging, automatic score calculation and results page that show both correct and incorrect answers. Persistence, last score tracking. So each user can see how they performed last time, and finally, a logout system that reset decision and take the user back to the login page. This app is a great example of how we can combine front-end design, dom manipulation, local storage, and API integration to create a complete interactive experience. So in the next lecture, we will start with SGML structure. 58. Building the Main Quiz Page Structure: All right. Now we will set up the foundation of our Quiz App by building the main HTML structure. We will create the header, quiz card, result section, and connect external scripts and styles. This will give us the skeleton of the app where the actual Quiz logic will later run. First of all, let's create new folder for our quiz and inside it, we will add index, while styles. And also, we will add in this time two files for JavaScript. The first one will be OathjS or register and login, and also the second one will be script dot JS. And also for the styles, because it is very huge, we will copy it and I will provide it in the lecture resources because as you see, it is 400 line. Okay? Now, let's start with our index HTML file. First of all, we will add boiler plate of HTML after that we will change this title to be Quiz App. And right here, we will add or link our style DSS and right here, we will add the script. Let's add script, and the source will be th dot js and we will add DFA like this. And now in the body, we will implement the site header. So we will add header Bag with class equal. T header and inside it, we will add a div with class of container, space, header NR. Inside this div, we will have the app heading in H one with class of logo, and right here, we will add Quiz App like this. And also we will add div with a class of header dash actions. Inside it will be another div and this div will be for the timer display. So we will add an ID of timer. Also areas live right like this and also class of timer. And right here, we'll add just dashes for first, and this button will be for Logout button. So we will add ID of logout PTN. And for the class, we will add class one of PTN and space tn Ghost. And here as a text, we will add Logout. All right. After this header, we will have main content. So we will add main tag with class of container space in. And we will add section. This section will be for the quiz section. So it will have class of card and ID equal Wi card and area live will be polite. Inside it, we will have a div that will have questions will be injected dynamically from the JavaScript. So div with ID of ion card and class of Question dash area. And we will leave it empty because it will implemented dynamically in the JavaScript. After this div, we will have another div. This will be for last SCOR box. It will be hidden until needed so div with an ID equal, last dash core, dash box. And also class equal. Last dash, core dash box we will add hidden EG like this. And inside it, we will have a paragraph with your last core, and we will add wrong DAG with an ID equal last se and inside it, we will add zero as default value. Then we will have another section. This will be for results section. As you see in the demo, we will result as a screen so section with the class equal card space, hidden and ID equal result page. Okay, inside it, we will have final result will appear. So div with class of results, and the ID will be equal results. And next div we'll add two buttons or two tags. One is restart Quiz button, and also a tag for gotogin screen. So Div with class equal BTN, ID equal, again and inside it, we will have button tag with ID equal. Or this one should have class equal results actions. And here we will add again tag for the ID and class of EN. And inside it, we will add text of Try again and also a tag with Atrip of login dot HTML. And class will be Link, and right here, we'll add change user, so you can go to login screen in order to login with different account. Actually, this dv should have an ID of When dash area is make sure you fix it. That's it for this lecture, see you in the next one. 59. Building the Login Page: All right. Just before we move to login HTML implementation, we have to add here script with tours of ScriptGS because it is the main script in our app, and also you will add Differ. Okay. Now we will start with another HTML file. And this is for login dot HTML. And you'll add boiler blade and the title will be login, and right here, we will link our style style CSS, and right here, we will add our script. So let's add the fare and the source from Oath JS file because inside it, we will implement the authentication. So first of all, we will implement the main of Oath card. So main tag with a class of Oath card, Oath card. And this body will have a class of oath page. So oath page. Let's open it with live server. All right. After that, inside this mint tag, we will have Ader, so at two with text of we'll come back. And also we will add form for our inputs. So, let's remove the action, and it will have an ID of login form and the class of form. Inside it, we will add label tag, and inside this label, we will have a span of the text, which is user name and input that we will add inside the user name. So span tag, and right here, we will add label as class. And right here, we will add username. And input with type of text, ID should be ID equal. User name, and we will set it to be required, this require mean that the user must add inside input field user name. Okay? And also, we will add auto complete equal user name like this. Okay. So this is, as you see in the UI, the second label will be for the password, so label tag. And inside it, you will have a span with class equal label. And right here, we will add password as a text. Then input field with type of password this time. So it will be hashed, as you see right here. It is not visible. Unlike the user name, you can add text and it is visible. And we will add an ID of password required also and auto complete to be equal current password like this. Okay? And then after this closing label, we will have a button for submit. So button, it will be with type equal submit, you submit this form and with class equal BTN. And right here, we will add login as a text as you see right here. Okay. And here we will add paragraph tag or if the user didn't have an account, we can navigate him to the sign up page. Okay? So this will have class of muted. And as a text, we will add don't have an account. And inside it, we will add a tag or redirect, and the hf will be to nine dot HTML page. And as a text, we will add Tin up. Okay. So if you click on it, it will give an error because we didn't implement it yet. And also we will add message area. So if there is any error in the login, it will be shown right here. So if the user add incorrect username or password, it will show an error right here. So B tag with ID equal, Login message, plus equal. Message and roll will be status. And Area Live will be polite. And we will leave it empty, but we will fill it in the JavaScript file. So that's it for this lecture, in the next one, we will start with sign up page. 60. Building the Signup Page: In this in HTML page, we will add right here an icon of shake hand or hello. And also, and most important, this input bag should be self closing. So we should add here slash and also in the next one, which is right here. Okay? Now, we will create the sign up page. This page allow new user to create an account with a username and password. We will also connect it to the same authentication script so users are stored in the local storage. So let's create a new file for signup dot HTML. And add our boiler plate HTML structure. Title will be sign up and we will link our style like this. And right here, we will add script with Difer and the source from both JS. Now for the body, we will give the body class of page, and also let's open with if server. We will add main tag with a class of both third and inside it, we will have page heading at two create your account. And we will add icon a Mundos and t which is this one. I think its name is star, this and after that, we will add sign up form. So let's add form tag with an ID of sign up form, class of form. And inside it, we will do same as we did in the ogan HTML. So let's go to HTML and we will copy these label to paragraph inside the form and rest it right here. Then we will check if there is any thing need to be edited. This auto complete should be new password like this. And also, here we will change it so let's remove it and add already have an account. And we will add a tag with HRF to login HTMLbH and here we will add login like this. And this paragraph will be same. But here, we'll sign up message. Okay. So that's it. For this lecture in the next one, we will start with authentication for this app. 61. Implementing Authentication with JavaScript: Alright, before we move into authentication, I forget to update this button to be sign up. So make sure it is updated like this. Now in this lecture, we will build authentication for our Quiz App using JavaScript. We will cover three big tasks. First one, protecting quiz pages from unauthorized visitors to handling login with user name and password validation, three handling sign up with new user creation, and then save it to local storage and logging directly the user automatically. This make sure only registered and logged end users can play a quiz. First of all, we will add function like this. And we will implement authentication guard or protected pages. So if we are on a quiz page, which has element with ID, Quiz card, we must make sure the user is logged in first. So first of all, we will add if statement if document get element by ID with Quiz card like this. We were looking in local storage to see if we have a current user logged in. So const current user. Equal local storage dot G item with key of current user. Because if you remember, in the Quiz App, we can inspect by writing click on the page and then go to application. And right here, it will add a key of current user and the value of the user credentials, okay? So we will get the item of key current user. After that, we will add FI statement. If we don't have a logged in user, we will kick the visitor back to the login page. So this is our main page which will be protected. Its index HTML file, right here, we will add FI statement. If no current user, then we will add location dot replay to Login dot HTML. After that, we would implement Login page logic. So right here we will grab the login form only exist if we are on Login HTML. So const login form equal document dot Get element by ID or login. Form, after that, we will add if statement if we have login form. So if there is login form, we will grab the element where we will show error message for the login. If you remember, I said before, here, if the user put incorrect username or password, it will show an error. So we will add here cost message. We will grab it. So document dot get element IID or our login message. So when the user submit the login form, so login form dot add event listener with type of submit. And right here, we will add event. And our function, first of all, we will prevent the form from refreshing after the input is added. So we will stop it. So we can add E dot prevent default. After that, we will get what the user typed into the username and password field. So cons User name equal document dot Get element by ID or user name dot value dot Trim. We will trim it if we have any spaces, and also we will grab the password. So const password equal document dot get element by ID with ID of password dot value, the value. Then we will retrieve all users stored in local storage, or we will use empty Key bracket if none exist. Cost users should be equal Json dot PRS or local storage dot GTM with Users. And if there is no, we will add just empty curly bracket like this because we will have a key of users that will store all users that login in our quiz or registered. After that, we will check does this user name exist and does the password match. So Users with index of user name and users with user name equal password. So if, yes, we will save the user as current user and go to the quiz page. So local storage dot set item with a key of current user and the value of user name. And then we will add location replace method to redirect this user to the index dot HTML file, which is our main page, this one. Okay. Else. If the answer is no, we will show an error message in the login message area. So message dot dot text content equal. Invalid username or password. And now, we will go to sign up page Logic. So after this closing, Kelly Brackett, we will grab the sign up form. So first of all, const sign up form equal document dot Get element by ID or sign uppFm so if statement if sign up form, if we have sign up form, or we are in this page, we will grab the element where we will show sign up error message. So on message equal document dot git element by ID within message like this. So when the user submits the sign up form, so we will add add event listener like this with type of submit. And here we will use also event. So first of all, we will prevent the form from refreshing. After that, we will get the entered user name and password. So cost user name equal document dot get element by ID. With user name dot value RIM. And also, we will grab a password that's entered equal document Get element. By ID with password dot value. After that, we will retrieve existing users or we will use empty Calibacket if none exist. Cost Users equal s json dot s with local storage dot GT item with key of users, we will add empty Early bracket. So now, it is important if the user name is already exist, we don't allow the sign up. So if users with user name, and message dot text content will be username already exist. After that, we will stop the function here, so we'll add return. Otherwise, if everything is okay, we will add the new user to our user's object. So users with entered user name will be equal password, and then we will save the updated list of users and back into local storage. So local storage dot set items or sit item, and the name will be errant user, and the key will be user name like this, and we will redirect them to the quiz home page. So location dot replace into index dot HTML. Actually, it should redirect us in this page into the login page. So let's see what's the issue from the beginning. This one should be MSD. And I don't know why this keep written. It is value dot trim also for the local storage, we should add right here a line of local storage dot sit item, and the key will be users and the value. We will convert our data into string because local storage is only accept string data, so son string Ii, the users. And finally, we should add here normal bracket in order to call this function. So as you see right here, it redirects us into Login HTML. So if we try to add this URL, which is for Index HTML, it will keep us. Okay. I see that we should open the server again. So as you see, although we open from Index SGML, it's redirect us to the login screen. Let's try to login, although we don't have an account. So write a click on the screen, select Inspect and from here, select application. Then as you see, local storage is empty now. So let's try to login. We will add them user and Password, try to login, as you see right here, invalid username or password. So let's try to sign up now, and we will add username. Password, tie up as you see, it's first redirect us to the index HTML page. And if you check local storage now, it have users with one value of Joan, username and password, and current user, which means that the current logged end user is Joan. That's it. In this lecture. In the next one, we will start with our implementation for the quiz content. 62. Helpers and Utilities: In this lecture, we will build helper functions to make our Quiz App easier to manage. So we will create array shuffling, local storage helpers and function to decode HTML entities. First of all, we will implement a function to shuffle an array randomly or Quiz. Function shuffle Array. And it will accept an array. First of all, we will loop backward through the array. So four, let I equal array dot length minus one. I is greater than zero, and I minus minus. After that, we will pick random index, so const, J equal, math floor with math random multiplied by I plus one. And after that, we will swap elements. So let's add an array of array of J will be equal array of J and array of I. So this is a swab element. After that, right here, we will return shuffled array. Okay. After that, we will implement a function to save data to local storage in JSON format. So function set local storage, and it will accept name and an item. And right here, we'll add local storage dot set item with name and Json dot Ringifi the item. And also, we will implement a function to remove a key from local storage. So function reset local storage. And it will accept the name of our key. After that, we will add local storage dot remove item with key of name. Then a function to get and parse JSON from local storage. So function get local storage with name, and we will add tryCatch block. In the try, we will return json dot pars, local storage dot Git item of name. And if there is an error, we will return null. And finally, we will implement a function to decode HTML entities. So function decode HTML entities. And it will accept text. Then we will initialize a text itself will be equal document dot create element with text area, and we will put it inside HTML. So TXT HTML equal text. And after that, we will return TXT dot Value. So that's it for this lecture, in the next one, we will implement Dom reference and state. 63. DOM References and State and Timer and Constants: Now we will connect our script to the HTML page by grabbing elements with Git element by ID. We will also define the quiz state variables that track progress. Also, we will define the constants such as quiz duration, pitch timeout and load the current user from local storage. First of all, there is no need to this queer bracket, so remove one of them to be like this. And now we will grab key dome elements. Once Quiz card, equal document get element by ID or Quiz dash Card and also const question Area equalcument Gt Element by ID or Q dash area. And for results page const results page, equal document dot get element by ID or results page. And also const results element equal document dot get element by ID or results. And for again button, const, again, tn, equal document, get element by ID with ID of again, and for last const, last score equal document. Get element by ID, last dash, sch box. And here also we'll add book. And const stre element, equal, document or last core and Logout button, const, Logout PTN, equal document. Get element by ID or Logout PTN. And or dimer. Lay, equal with Timer ID. After that, we will state variables for the quiz, so we will initialize first Quiz and as empty array. So here we will store quiz questions, and also we will initialize current quiz index, toilet, current index equals zero as default. And user answers, so let answers equal empty array. And for the final score, we will initialize, let score equal zero as a final score. After that, we will collect the total time for quiz. We will set it to be 10 minutes in seconds. So const Total underscore seconds will be equal. Then multiply by 16 to this in seconds and let time lift. So the time left to end this quiz will be total seconds and the timer ID, so let timer ID will be equal null as start. After that, we will fetch time out in milliseconds. So const, fetch and the score time out will be equal 4,000, which is 4 seconds. And we will get the current logged end user from the local storage. In order to make it, we will add const current User will be equal local storage dot Git item with key of current user. That's it for this lecture. And the next one, we will start with initialization and guard. 64. Initialization and Rendering Spinner, Error, and Last Score: In this lecture, we will prepare a function that reset everything at the start of the quiz. Also, we will handle UI feedback, so we will show a spinner while loading, display error if pitching fails and display the last score of the user. So first, let's implement the function of t and we will reset stored data. So reset local storage. With key of answers. And also, we will sit local storage with questions. And also we will make with equal empty current index also equal empty or should be zero this one. And the answers will be empty array, score zero, and time lift will be equal total underscore seconds. And then we will hide the result page and show quiz, so result page ASList dot add IDNs and we will hide the quiz card. So quiz card ClassLis dot or we will show it. So remove we will remove the head in class from the quiz card. After that, we will render the last score and start timer and fetch questions. So render Last score function, which will be implemented later and start timer as well, and also Fitch questions. Function. Okay. And also, we will render spinner function. Function to show a spinner, render spinner. And we will add Question area inner HTML will be equal hectic with DIV, this DIV will have class equal spinner, space area, hidden equal or should be this closed and area hidden will be equal through like this. Okay. And we will implement a function to show error message with a retry button. So function render error. This will accept a message. And right here, we will add question area.in our HTML equal lactic with Div glass of card And inside it, we will display a P tag with class of muted. And inside this one, we will add variable of message. And also we will add a div or retry button. So div with style equal margin. Top will be one RM. And inside it, button, tag with class equal ETN the ID equal. Retry. And right here as a text, we will add retry inside the bottom. Okay? After that, we will get retry. So right next to here, we will add const, retry equal document get element by ID with retry. And if retry button is pressed, we will retry our quiz. So in order that we will add If statement, if retry, then retry dot add event listener with click. And second argument will be pitch questions, function that we will implement later. After that, we will show last score if available. So function, render last function. First of all, we will check if there is stored score in the local storage. So const stored equal, get local storage, and we will add backtick underscore with variable of current user. And if there is no stored, then the last box will be hidden. So we will add if not stored, and there is last score box so we will add last score box dot ClassListt add Headin tag or class inside it, and we will stop exit this function, so we'll add return. After that, we will or otherwise, we will add this last score box into our page. So we will remove the heading class. Last score box classist, dot remove, d in class, and last score element, text content will be equal third or zero. That's it. For this lecture, in the next one, we will start with ftching and displaying questions. 65. Fetching and Displaying Questions: Now we will fetch questions from an API, decode them and render them on the page. First of all, we will define a synchronous function to fetch quiz questions. So async function, fetch questions inside it, we will show a loading spinner while fetching data. So render spinner function like this. And then we will create a timeout promise that rejects after fetch timeout. So const time out, equal a new promise with underscore and reject. After that, we will return this time out with function that will reject new error with a message of request Should we request time out. And after these two closing racket, we will add pitch time out function like this. And right next to here, we will add try catch error. And then try, we will use promise is to fetch data or time out if it take too long time. Const s or response equal Awe t, promise is method. And right here, we will insert this square bracket *****. Rm API of HTTBSOpen p db, this.com slash api dot PHB, question mark amount equal ten. This is an API of open database, and the amount means that we need ten questions. You can add more, make it 15 or whatever you want. And then we will add and type equal multiple or multiple choice. Like this. And right here, we will add time out. Okay? So if the response is not successful, we will throw an error. So if not response, okay, then we will throw a new error with couldn't pitch questions. And then we will parse the response JSON data to const data equal awaits dot JSON. And we will transform and decode the quiz data for safe display. So quiz equal data results dot map, we will map through them with Q for question, and we will return. First of all, we will destructure the question, so dot dot. And after that, the question itself will be decoded HTML entities or q dot Q and for the correct answer, Underscore. Answer will be decode HTML entities or q dot Correct. Underscore answer. Add Acoma and for incorrect answer. Incorrect underscore answers. We will add qt Incorrect Underscore answers dot Map. We will map through decoded HTML entities. Okay. If no question are received, we will throw an error. So if not with, but length, then we will throw no error with no quiz Theata received like this. And we will render the very first question on the screen. So render question function that will implement it later. And in the cache, we will show error message if something goes wrong. So render error function with error dot message like this. After that, we will render current question and answer options. So right here, we will implement a function of render question. First of all, we will get the current question from the Quiz array. So on Q equal with current index. If no question exists, we will show results page instead. So if not Q, then we will return, render result page, which means this question was the latest one. After that, we will show the result page, and this is a function that will be implemented. After that, we will retrieve stored questions from local storage or empty array if none. So const stored questions. Equal get local storage with key of questions or will be an empty array. After that, we will add currents text to stored questions. So stored is push method, and we will push q dot question. Then we will save the updated questions back to local storage. So set local storage with key of questions and value of stored questions. And we will create shuffled options. So mix of correct and incorrect answers or cost options equal shuffle array and we will destructure question. So dot q dot incorrect underscore answers and q dot correct underscore answer. After that, we will build HTML markup for Question and its options. So const, HTML equal. We will add Bac tick to include some variables. First of all, we will add a div tag, and inside this div, we will have a div with class equal. Question title. And the variable inside it will be current index plus one. And right here we will add dot. And right here, we will add Q dot washing. Okay. After this div, we will add another div for options. So this will be with class equal options. And it's closet. And we will add roll equal list. And close it as well. And inside this dip, we will show options. So let's add a variable of options dot Map Method. We will map for each options. So OPT and return also back tech to include variables with button tag. So each option will be a button equal option unsided. And Data value. Data value. The value of this option will be equal. Let's add Kelly Bracket, CTL HTML. Like this and inside it, we will include OPT itself. And also, we will add roll equal list item like this. And here we will add or include the option itself. Okay? And then right after this closing bracket, we will add join and we will add empty string like this. And after this one, we will insert the generated HTML into the area. Question area winner HTML equal HTML, this one with the value, and we will add click event listener to handle answer selection so const. Options, container equal i area vary Selector dot Options, and we will add F statement if there is option container, then options, container dot addEvent listener with click and on option on option, click. Okay. And this is a function that we will implement in the next lecture. 66. Handling User Answers: All right. Before we continue, we just correct this one in the render question. This should be Q dot question for the question itself like this, to make sure it is Q not Quiz. And now we will hand the user clicks on answer buttons, save answers, and move to the next question. Okay, so function of one option, click that we add or call right here. This will take an event. First of all, we will identify the clicked button with class of option took ptn equal target dot closest of dot option. So if the click wasn't on a button, we will exit. So if not BTN, then we will exit from this function. And otherwise, we will get the answer value stored in the buttons data attribute. So const value equal tn dot get a tribute of Data value. And we will save the selected answer into the answers array. So answers dot push the value after that, we will persist answers into local storage. So set local storage with key of answers and value of answers like this. And we will move to the next question index to current index plus plus to move the index plus one. If no more questions left, we will show the results page. So if parent index greater or equal quiz dot length, then we will render results page. Function like this, and this function we will implement in the next lecture. Otherwise, we will render the nest next question. Render function like this. That's it. For this lecture, in the next one, we will implement calculating and rendering results. 67. Calculating and Rendering Results: Once the quiz ends, we calculate the score and show the results with correct and incorrect answers. So in order to implement this, we will first implement a function to calculate the score. So function LC core and we will start score at zero. So score equals zero. After that, we will retrieve user answers from local storage or empty array if none for cost user answers. Equal get local storage with key of answers or empty array like this. After that, we will compare each user answer to correct answer. So quiz dot for each method. And this will accept Q for questions and I for index, and we will return, first of all, if user answers of index. I and user answers with index I. Should be like this, equal U dot correct underscore answer. Then we will add the score plus plus to B plus one. And then we will save the user's score tied to their username. Sit local storage with backtick of score underscore. This is the key with current user, and the value will be his score. Right? After that, we will implement a function to display results page. So function render result page, and we will stop the quiz timer at first. So stop timer, and this is a function that we will implement later. And after that, we will hide Quiz area and how results page. In order to implement this. We will add and remove class of heading. So quiz card lasist dot add IDN, to make it hidden, and we will show results page. So results page dot classist dot remove. We will remove heading, class from it. And we will calculate the score, so we will call Calc score and retrieve or stored answers. So const user answers will be equal. Get local storage with key of answers or empty array. And we will build the HTML results list. So const list HTML, equal Quiz dot map. We will map through Q and I. After that, we will return first. If no user, we will use dash or const user equal use user answers of index I or dash and we will initialize correct answer, so const, correct. Equal Q correct underscore, answer. And we will build the wrong answer markup if user answer is incorrect. Cost wrong HTML will be equal if statement, user is not equal. Correct. So we'll add F with backtick. And right here we will add of empty string, and in the Bacti we will add a D with class. Two classes, actually. The first one will be answer, and the second one will be answer, dash, dash. Wrong. And right here, we will add answer. And right here, we will add a variable of Escape HTML, and inside it, we will add user. Otherwise, it will be empty string like this. And we will build the final card HTML for each question. Return back tick as well, and div with the class equal card. And inside this div, we will have a div or title, the div with class equal Question title. And here we will add I plus one for the number of this question, and here dot Question. Okay. After this, we will add another div, and this div will be with class equal. Answers. And in the answers, we will add, first of all, wrong HTML, if there is wrong answers. After that, addive with class equal. Answer, space, answer, correct, class if the answer is correct, and we will add here text of correct answer, and also escape HTML with correct. Okay. And then after this closing bracket, we will add join method with empty string like this. And we will insert results into result container. So result element inner HTML will be equal backtick with a div with class equal results. And inside this div, we will have another div with class equal scare and inside this div, we will show your core and the score will be inside a span. And right here, we will add scare value. And after this closing span, we will add divided B with dot length. And after this closing div, we will have another div. So div with class equal Whin's list. And inside it, we will add list of HTML like this. And finally, we will hide the last score box since results are now displayed. So last score box dot class list dot add heading class like this. That's it. For this lecture, in the next one, we will implement DR function and other implementation.