Learn to Code using AI - ChatGPT Programming Tutorial (Full Course)

learn how to get AI to do the coding for you in this course you will use chat GPT to build interactive database powered projects you'll learn how to write effective prompts and debug and refine your code with the help of Ai No coding experience needed Gil Hernandez teaches this course imagine waking up tomorrow as a web developer what would you want to build it turns out that with AI tools like CPT you're already a developer regardless of your experience if you know how to work with them welcome to a different kind of coding course that's less about the intricacies of coding and more about building experimenting and realizing your ideas even without coding knowhow it's your fast lane towards getting the coding superpower in this course you'll use HTML CSS and JavaScript the building blocks of the web along with chat gbt an AI model developed by open Ai and you'll even get to work with a tool powered by Google called Firebase to add a database to projects but we won't Deep dive into the technicalities of these languages and tools or cover the basic concepts this course is your shortcut to prototyping and building cool projects with ai's assistance without worrying about all the tedious foundational stuff the focus is helping turn you from a encoder into a capable Problem Solver Ai and tools like chat gbt aren't just here to provide coding answers they can be a part of your creative process helping you brainstorm ideas reinforce your newly learned skills and even enhance existing code by the of this course you'll have a collection of fun interactive and database powered mini projects that you've built with the help of chat gbt let's have a look at all the cool stuff you'll build in the first section of the course you'll start to unlock the potential of AI by building and deploying your first projects using chubbt you'll start by building what's called a hero section for a fictitious product it's an essential part of any website or landing page then you'll create a subscription form for a service called Barker box after that you'll take things up a notch by building an interactive invitation that allows guests to RSVP to an event then you'll build a fun raffle app where users enter their names into a cake raffle then it picks a random winner and you'll turn up the volume on your building skills literally by creating an interactive drum kit app that plays real drum sounds in section two you'll build Next Level projects from your own version of the classic wacka game to an interactive project slideshow and a personal homepage to Showcase all your projects you'll even get to build a mobile friendly smart home interface and a Chrome browser extension that saves and stores shopping wish list items and section three is a big one it's all about building database powered apps with Firebase first you'll connect the event invite project from section one to a Firebase database then you'll work on a compliment generator app to spread Delight as well as an app called lunch vote to help you and colleagues decide on lunch spots and an app called Road wallet to manage group expenses while traveling by the end you'll have gained the confidence to keep building and turning your ideas into more functional prototypes and full-fledged applications regardless of your coding knowledge plus you'll learn how to deploy your projects with a service called netlify and share your awesome work and even transform projects into Mobile friendly apps that users can install on their devices and conveniently launch from their home screen and your teacher for this course is me gil Hernandez I'm a teacher at scrimba and I can't wait to start this journey and help you unlock your inner Builder before we start I encourage you to head over to Discord and let the scrimba community know that you're starting the course in the today I will Channel you can click on this image to jump right into the Channel all right so join me in the next lesson where you'll begin coding and building in a whole new light with AI and chat gbt see you there imagine waking up tomorrow as a web developer what would you want to build it turns out that with AI tools like chat gbt you're already a developer regardless of your experience if you know how to work with them welcome to a different kind of coding course that's less about the intricacies of coding and more about creating experimenting and realizing your ideas even without coding knowhow and this course will use HTML CSS and JavaScript the building blocks of the web along with chat GPT an AI model developed by open AI but we won't Deep dive into the technicalities of these languages or cover every basic concept instead we'll focus on helping you prototype and build projects with ai's assistance turning you from a non-coders into a capable Problem Solver Ai and tools like chat GPT aren't just here to provide coding answers they can be a part of your creative process helping you brainstorm ideas and reinforce your newly learned skills by the end of this course you'll have a collection of many projects you've built with the help of chat gbt and more importantly you'll have gained the confidence to keep creating and turning your ideas into actual functional prototypes regardless of your coding knowledge plus you'll learn how to deploy your projects with a service called net Y and share your awesome work your teacher for this course is me gil Hernandez I'm a teacher at scrimba and I can't wait to start this journey and help you unlock your inner Builder before we begin I encourage you to head over to Discord and let the scrimba community know that you're starting the course in the today I will Channel click on this image here to jump right into the Channel all right so join me in the next lesson where you will begin coding and building in a whole new light with AI and chat TBT I'll see you there let's explore how AI specifically chat GPT can help you yes even non-coders to build amazing products you see in recent years artificial intelligence has transformed from science fiction to a real world tool that people from all walks of life can use but AI isn't just about robots and self-driving cars it's about augmenting our capabilities and making tasks easier which opens up a world of possibilities chubbt is what's called a a generative AI program which means that it can create new and original content based on the data it's been trained on as a result chat GPT can assist with everything from writing jokes recipes songs and poems and serve as your intelligent coding assistant now let's get more specific how exactly can an AI tool like chat gbt help us with coding projects well here's the thing coding at its core is about problem solving and chat TBT is designed to be a stellar problem solver for instance it can help you break down large intimidating projects into manageable tasks you simply describe your project to chat GPT and it can generate basic steps for getting started and even lay out a road map for you to follow then it can suggest potential Solutions and provide code Snippets that you can use directly or modify to suit your needs now if you're a non- coder this might seem like a daunting Prospect but don't worry chat GPT can guide you through the basics of HTML CSS and JavaScript using simple and understandable language and remember if you need help understanding something chat GPT is right there to help explain tricky Concepts or offer hints and AI or chat PT in particular is not here to replace developers rather it's here to empower Builders like you and augment your creativity and problem solving abilities so I hope that you're excited about the potential of AI and chat GPT in building your projects let's keep it going by accessing and using chat GPT to explore some code if you're already set up with chat TBT feel free to skip this if not let me take a moment to walk you through signing up and accessing chat gbt chat gbt was developed by the open AI research lab so to use chat GPT you'll need to create an open AI account on open.com it's free and quick to do you can click right on this image to go to the site once you're on the open AI website click the sign up button and enter your email and a a desired password to begin setting up your account you'll then need to quickly verify your email address name and phone number for security reasons after that you should be all signed up and set up with an open AI account to access chat GPT click on your user Avatar in the top right corner and select visit chat GPT from the drop down menu or click right on this image to visit chat. open.com once there you can see some onscreen instructions and examples of how to interact with chat upbt and learn more about its capabilities and limitations after you've accessed chat GPT I want you to explore it type a sentence or a question in the chat interface and see how chat GPT responds you'll be surprised at how conversational and informative the AI model can be now while we are going to be using it for coding assistance chat GPT is not exclusively designed for coding it's a general purpose language model that's been trained on a large variety of content from the internet including many examples of code although it doesn't understand code in the same way a human developer does it can generate code based on the patterns and structures it has learned during its training all right now that you're all set up with chat TBT we'll take a highlevel tour of the basics of HTML and CSS and get you ready to start building let's spend some time talking about the first two essential tools you'll need in your Web building toolbox HTML and CSS HTML or hypertext markup language and CSS which is short for cascading stylesheets are like the bread and butter of web development they both work together to help create the websites and apps we visit every day and understanding the basics of both will help you get the most out of this course one of my favorite analogies for these that we use at scrimba is to imagine building a car think of HTML as the blueprint for a car laying out all the key structural components like the frame steering wheel seats tires and so on it defines the car's essential parts and how they fit together to make the car we still want the car to look good and be comfortable so that's where CSS comes in think of CSS as like the exterior design and interior Furnishings of the car like the paint job the style and comfort of the seats the layout of the dashboard and any of the presentational or styling aspects that make the car not just functional but visually appealing and Driver friendly too in a web development context HTML gives structure to our web content determining where paragraphs headings images and links go and CSS adds the style choosing colors fonts and layout options together HTML and CSS help create a well structured and aesthetically pleasing site or app so now let's see how chat GPT can help us in this process first let's ask it to generate the a basic HTML structure for a web page to do that I've written a prompt here for the AI in the file prompts MD as you'll learn prompts are essentially the instructions we feed into the AI and it's our way of communicating what we want the AI to do in this case I want it to generate the basic HTML structure for a web page so I'll copy this prompt and paste it into chat gbt's message input field submit it and chat GPT returns HTML code that you can copy and paste into your text editor you include your Project's HTML code in a file with the HTML extension like index.html so I'll click copy code to copy all of this HTML code and replace everything that's currently in index.html with this new code so these are some of the basic HTML tags which are used to define the structure and elements of a web page an opening tag like this marks the beginning of an element and the closing cling tag marks the end now don't worry about what these meta tags it gave us mean right now they're just there to help with character encoding and how the web page gets displayed and this body element is where we place the main content of the web page such as text images links paragraphs and other elements in this case we have an H1 heading and a paragraph So any content placed inside this body element is what we see in the web browser here in the scrim you can click the Run button to view the web page in the mini browser so cool there we see welcome to my web page and then some content below it all right now let's make this HTML and Page look good we'll use this second promp here to ask jbt to add some basic CSS to this page so I'll copy this promp and feed it into chat gbt and now I get back the HTML with a style block added that includes the CSS styles for the web page so I'll copy this new HTML code and replace B everything inside index.html with this code and good notice how the CSS sort of transforms our barebones HTML page into something more visually engaging and there are a few ways to apply CSS styles to your HTML you can include the CSS Styles directly within your HTML file like this however this can make your HTML excessively large and messy so it's better to include the HTML and CSS in separate files that's what you'll do in most of your projects so what I'll do is ask the AI to place the HTML and CSS in separate files using this prompt which I'll paste into chat GPT and there we go we get the code for index.html and styles.css so first I'll once again copy this HTML code and replace everything that's in index.html with this new code and you include your CSS Styles in a file with a CSS extension like styles . CSS so I'll copy the new code for styles.css then replace what's currently in styles.css with this new code and as you can see the page still looks the same the difference is that now the HTML and CSS are placed in separate files and that's being done here via the link tag which is what connects the HTML file to the CSS file it's a whole lot easier to manage and organize your HTML and CSS this way all right so if you have a look at the CSS you'll see what are called selectors that Target or select specific HTML elements and apply styles to them for example this selects the body element this here selects the H1 element using the H1 tag and then the P tag or paragraph element is selected here okay so now it's your turn I want you to play around with the HTML and CSS code here in this scrim change the text or add more text in the HTML for example welcome to Gill's web page or alter the colors in the CSS for example I can make this heading Red by simply typing red here as the color value and we see this main heading change to red or try changing any of the other CSS properties to see how they affect the page and if the cart analogy from earlier didn't really make things stick for you or you want to make HTML and CSS more relatable to you think of a scenario or a hobby you enjoy for instance if you like to cook imagine how an analogy relating to cooking would help you understand HTML and CSS better using a prompt like this I'm interested in learning HTML and CSS with an analogy related to cooking I'll submit that to chat GPT and the output suggests thinking of HTML as the list of ingredients in the step-by-step instructions in a recipe and that CSS is like the seasoning and presentation of a dish and then it expands upon this analogy to paint a more Vivid picture and one of the objectives of this course is for you to be able to ask the AI for explanations on specific parts of the code you don't understand so throughout this course I want you to ask chat GPT questions or to provide you with more details about any of the code or concepts you're curious about or don't quite understand yet you'll find that as you progress you'll start understanding how different HTML tags and CSS Styles come together to form a web page and how they fit in with JavaScript which is another essential building block of web development and chat gbt will be there every step of the way assisting you and guiding you in building your projects so congrats you've just written your first lines of HTML and CSS code and now I'll leave you with a challenge to have you spend some time tinkering with HTML and CSS I'll paste the challenge here as a comment in index.html first I'd like you to add a second level heading to the page using an H2 element and then add a paragraph below the new heading and I'd also like you to increase the text size of both headings I've also included a stretch goal which is to display a picture on the page this could be a photo of you or any image you'd like you can add an image to the scrim by simply dragging your image right into the Explorer sidebar here and don't hesitate to ask chat GPT for help or ask it any questions about HTML and CF s I'll see you in the next Grim where you will build your first project all right you've gotten an overview of HTML and CSS so how can we start using AI tools to simplify the process of building projects with HTML and CSS well you're about to find out so let's get our feet wet and start by creating one of the most commonly used elements on any website or app a login button more specifically a login with Twitter button which you've likely seen before we'll Leverage The Power of our AI companion chat GPT to guide us through this process you will work with HTML to structure the button and then CSS to make the button look visually appealing and interactive so that it looks like this so let's Jump Right In and ask chat gbt to help us out to kick things off I have provided two files index.html and styles.css which you started to learn about in the previous lesson and in the file prompts MD I've added the first prompt I'll use to build build this login button so in this prompt I'm assigning the AI a role I'm saying you are Developer GPT an assistant that helps write code for people who don't have coding experience and then I'm describing the task which is to create the HTML and CSS files for a rounded button resembling the Twitter login button and I requested making the code easy to understand for non-coders and to avoid using any complex CSS layout features I also mentioned more specific requir requirements like using basic CSS properties to horizontally Center the button and to add some space above it for visual separation and finally I want chat GPT to document each CSS property with a short code comment overall this prompt provides clear instructions for the task at hand which is something you should keep in mind when prompting an AI like chat GPT so what I'll do is copy this prompt then head over to chat GPT and paste it into the message input field send it then kick back and await the requested code so here's the generated HTML and CSS and below it chat GPT provides an explanation of the code so feel free to pause for a bit and read through these details if you'd like to know more about the HTML and CSS in the HTML file you'll see common HTML elements like a div and a button and these class attributes as you'll see are for the CSS styling and inside the button there is some text that says login with Twitter so I'll copy Cy this HTML code snippet from chat gbt then replace all the code in index.html with the new code click the Run button and good now you should be able to view the button in the mini browser displaying the text login with Twitter all right next I'll copy the CSS snippet from chat gbt and paste it into styles.css so this CSS targets or selects the container and rounded button class names defined in our HTML then using CSS properties like text align background color color and Border it gives the button a distinctive look which does in fact resemble the Twitter login button awesome and chbt was even intelligent enough to determine which color to apply to the button to make it match the Twitter brand and notice that next to each CSS property is a comment generated by chat gbt to help us better understand what the CSS is doing and if you pause for a moment and review this code you might be surprised by how much you might be able to understand many CSS properties are intuitively named almost like they're written in plain English so take for example background color it does precisely what it says it sets the background color similarly the color property defines the text colors and other properties such as border padding and font size follow a similar pattern and together these properties Define the look and feel of our button and if if you start to Tinker with some of these properties you'll learn a bit more about what they do and how they affect the appearance of the button for instance if you change this first padding value to 0er pixels or 50 pixels you might realize that this property controls the spacing inside the button or that the margin top property controls the space outside and above the button and a property like font size sets the size of the text and so on Okay so we've created our button but but we won't stop here because now I have a challenge for you I want you to experiment more with the HTML and CSS and transform this button into a login with GitHub Button as a developer you will likely interact with a button like this quite a bit you might immediately notice some of the differences between this button and the Twitter login button for example the GitHub button has a different background color the borders are not rounded and the button text is also different so I'll add the steps to this challenge here at the top of styles.css this challenge will require you to modify two lines of code in the CSS file and one line of code in the HTML file and I've also included the color code for the background of the GitHub button which is this value here so think about the changes you need to make and go for it and remember if you get stuck or need guidance chat GPT is here to help I'll meet you back soon to go over the challenge together all right hopefully you've updated your button to look like this now let's go over the challenge together first I need to turn the button into a login with GitHub button which tells me that I need to update the text between the button tags here in the HTML file so I'll replace Twitter with GitHub and there we go the button now displays login with GitHub good next I need to update the CSS to make the button look more like this and notice how this color code that starts with a hash symbol looks a bit like two of the values being used here in the CSS for the rounded button so I'll copy this color code and let's see what happens if I update the value of the color property to the new color value well it looks like this just updates the text color but I want the text to remain white so I'll undo that and just above I see that this line here controls the background color so I'll replace this color value with the new color and yep that looks exactly like what I'm going for finally the login with GitHub button has square corners instead of rounded Corners so let's see how to update that in styles.css looking at the comments I see that this border radius property rounds the corners of the button now currently it's set to 20 PX or pixels so I'm assuming that setting this to a smaller value will make the corners appear less rounded so I'll try 10 pixels and that's looking closer to square corners so how about bringing the value down to0 pixels and yes that does the trick all right so now we have a simple yet functional and styled login button that you can start to use in your projects finally when you hover over a button or click on it it's common for the button to be interactive and respond in some way currently it's not doing that so let's ask chat GPT to suggest CSS to add hover and click effects to update the button's appearance when it's hovered or clicked for that I'll use this prompt here it instructs it to generate the necessary CSS for adding hover and click effects on the button and I need to let chat GPT know that the button now has a background color set to this value and I want to make its background color brighter when hovered over or clicked and to add a comment next to each CSS property so I'll copy this prompt paste it into chat GPT and good I get back the CSS code for the hover and click effects which you'll notice that they will be implemented using colon hover for when the mouse is over the button and colon active for when the button is being clicked so I'll just copy the new CSS toward the bottom then paste it into styles.css and let's test it in the mini browser when I hover over the button I see that the background color changes to a grayish color color and clicking on it makes it darker great this not only makes the button more engaging but it also improves the user experience by providing visual feedback all right so that about wraps up building our login with Twitter and GitHub buttons and remember while chat GPT does provide an excellent starting point I do want you to keep tweaking and modifying this code to view how each property or value you change affects the look of the button and I'm sure that you still might have a lot of questions about what some of this code is doing and that's perfectly okay so what I want you to do is take a moment to ask chat GPT about any code that appears confusing or that you want to learn more about for example what's the purpose of the hash symbol and color values or what does colon hover and active mean to help you ask these questions I'll provide a prompt here that asks chat GPT hey can you explain what the hash symbol and colon hover and an active mean in the following CSS code followed by the CSS code snippet to evaluate so great job building your very first project with AI I'll see you in the next Grim where we'll go over some of the basics of prompting all right AI coders let's see some of these prompting techniques in action now we're going to design and build an essential part of any website or landing page the hero section this is the first thing your visitors might see so making a good impression is important with the help of our AI tool chat upbt we'll create a vibrant hero section using HTML and CSS so let's Dive Right In I've already included HTML and CSS files for the project as well as an image we'll use in our page named chair. PNG first we're going to generate the HTML and CSS of the hero section so let's turn to chat gbt for some assistance in the file prompts MD I've set up the first prompt to work with with it's an instruction-based prompt with specific steps to help us reach the desired outcome it clearly explains the desired output which is the HTML and CSS for a hoverchair website's hero section and then it provides some context about the product and it describes exactly what it should contain a main heading subheading short description paragraph and a call to action link styled as a button it also outlines some guidelines for the code like making the code easy to understand stand for non-coders and avoiding the use of complex CSS features and it even provides some aesthetic guidelines like to use an elegant and neutral color palette with a focus on earthy tones and subdued Hues and as usual I want it to document the CSS with code comments and as a reminder of the overall goal and purpose of the task it states that the final result should be an engaging and Visually appealing hero section that effectively showcases the hoverchair brand so I'll just copy and paste this prompt into chat GPT and it generates the HTML and CSS code to set up the hero section so first I'll copy the HTML code and paste it into index.html looking at the HTML structure I see that it consists of a header element and nested inside it is a hero heading subheading and description just like we asked for and an acre element or link that's going to be styled to look like a button with this class name and here in the mini browser we see the hero section taking shape so next let's apply some styles to the page using the CSS chat GPT gave us I'll click to copy this code then paste it into styles.css and wonderful the hero section is starting to look much better with the CSS applied so now how about a challenge I'll paste the steps for you here in styles. CSS so for this challenge I'd like you to increase the size of the learn more button text because it's looking a bit too small and we do want to draw more attention to it so users can click on it and hopefully purchase the amazing hover chair then I want you to add a little more color to the Page by changing the text color of the subheading which is this element here to the color value provided here so give it a shot and I'll catch up with you when you're done to go over it together okay hopefully you got that so first to increase the size of the button text I see that the button is this element here with the class name ca- button so in the CSS I'll find that class name which is this CSS rule here and you've learned that the font size property is what controls the size of text so to make the font size larger I'll set it to to a value such as 24 pixels and that looks much better to me you can see the difference here when I set it back to 18 pixels then 24 pixels or maybe make it larger such as 26 pixels all right next I'll change the color of the subheading to this value here so I'll copy it and in the HTML I see that the subheading has the class hero- subheading so I'll scroll down and find that class name right here and I see that the color property is set to this color value so I'll update it with the new color and see what that looks like and awesome that did it I really like how the page is looking so if you got this well done now another detail I might add is to increase the line height or the space between the lines of text here in the hero description for that I'll use the CSS line height property here in the hero description Rule and I'll open up the line height a bit more by setting it to a value like 1.4 and to me that looks much better and easier to read all right now let's add another important element to our hero section an image in our project files we have an image named chair. PNG that I want to place above the hero heading naturally we'll ask chat GPT to do that but this time I'll use a more direct prompt by asking the AI to update the HTML and CSS by adding a small rounded image named chair. PNG above the hero heading and to add some depth and highlight the image I also want to apply a soft Shadow behind the image so I'll paste this into chat GPT and good here's the updated HTML with an image tag that points to the image in our project named chair. PNG and displays it on the page I'll test how it looks by adding only the new image tag to my HTML just above the hero heading like this and okay that's working but the image is huge so now let's make it smaller and rounded by applying the CSS the image element has the class name Logo so here in the css. logo selects and applies styles to that element so I'll just copy the new styles that get applied to the image and paste it in my CSS let's have a look at it now and excellent the product image makes a big big difference in our hero section and now the image has that nice rounded effect thanks to the CSS border radius property and the shadow gives the image a sense of depth and separation from the background so looking at the new CSS you might be wondering what this box Shadow property and rgba value are all about well as the comet describes it adds the soft Shadow to the image but I don't want you to just take my word for it if you want a deeper explanation take full full advantage of chat GPT and ask it to provide that for you along with anything else you might have questions about now the image is looking rather small so I think it might be best to make it larger I'll let you do that with a challenge so pause the scrim and use CSS to increase the size of the image the size you choose is up to you all right here we go hopefully you figured out that the width property is is what controls the size of the image so let's see I'll increase the width value here to something like 300 pixels and I think that's too big so I'll reduce it to 180 pixels and that looks better to me if you made it a different size that's perfectly fine finally I want this hero heading to stand out now one thing I can do is increase the text size using a larger font size value like 58 pixels and that looks better but I also want it to have a different font than the rest of the content on the page so Google offers a library of free web fonts called Google fonts that can be easily accessed and used in your projects you can see an example of it here and rubric is a Google font that I particularly like so I'm going to ask chat GPT to add the rubric font to my project and update the heading text I'll use a prompt that says please use HTML and CSS to set the hero headings font to the rubic Google font so I'll feed this prompt to chat gbt and it gives me back a link tag to include the rubic Google font in my project so I'll copy just this link tag in the new HTML and paste it in the head section of my HTML and I see that the new CSS has a font family property that sets the headings font to Rubik so I'll copy that and then paste it in the hero heading Rule and here you can see that the hero heading does in fact have a different font than the rest of the content now it's a very subtle difference but a nice Added Touch to the page all right and there you have it our website hero is complete so great work next we'll move on to our next project but before that I want you to play around with the hero section change the content colors fonts the buttons style make it your own and you can also replace the chair. PNG image with your own image by dragging the image into the Explorer sidebar then updating this Source attribute in the image tag to your image name I'll see you soon in the next lesson all right let's build something that you'll likely find useful a subscription form you've probably seen these on various websites and now we're going to build one for a subscription service called Barker box which you'll also be able to customize to your liking so let's get into it I have included the usual HTML and CSS files for this project as well as the image we'll use which is named dog. jpeg like in previous projects I want the AI to do a lot of the heavy lifting for me and generate most of the HTML and CSS I need to build this form so I'll kick things off using this task-based instructional prompt this prompt provides a specific set of instructions for for creating HTML and CSS files for a form offering a 15% discount to new subscribers of a product or service called Barker box which is a monthly subscription box that brings an assortment of unique playful and durable toys that dogs will love the prompt also outlines the steps to be followed including creating a headline adding a product description and building a registration form with an email input put and a submit button and it specifies the color and background properties to use and it also emphasizes making the code beginner friendly and to include code comments for better understanding so I'll copy and paste this prompt into chat gbt and I get back the HTML and CSS code so I'll copy the HTML code snippet and paste it into index.html and copy and paste the CSS into styles.css so in this code there might be some HTML elements and CSS properties you haven't seen before so let's spend a little time going through this code together first the HTML includes a form element to create the subscription form and inside the form are two common elements used with forms an input field and a button notice how the input field is of type email which means that the user is required to enter an email address address in the correct format it has an ID of email and the placeholder text enter your email and that's the text that gets displayed in the input field here when it's empty which gives the user an idea of what to type into it and this required attribute indicates that the user must provide an input before they can submit the form and the button element which you've worked with before is of type submit which means that when clicked it will submit the form data but this form won't be programmed to submit any data as that requires more programming and over in the CSS a lot of these properties should look familiar well all except for maybe display flex and flex Direction column so it looks like chat GPT generated CSS that uses a feature called flexbox to lay out the registration form flexbox gives you a more efficient way to layout align and distribute space among items in your layout and this this case the form elements are neatly aligned and laid out in a column in fact if you comment out or delete the CSS you can see what flexbox is doing without it they both shift onto the same row but with display flex and flex Direction column the text field and button appear neatly stacked on top of each other and this is really going to help us soon when adding a second input field now if anything still feels unclear don't hesitate to ask chat GPT questions or ask for a simpler explanation of HTML forms and CSS flexbox okay now that you're up to speed let's get into customizing this page first is just a simple content change that I want to make here in the heading I want to update the text to say subscribe and save 15% just to make the headline more descriptive and chat TBT generated CSS to make the form container adjust and resize according to the browser width which is great but it looks like the page needs some padding to create a little more visual separation between the edges of the container and the browser so I'll apply some left and right padding here in the body rule I'll replace this padding zero declaration with padding left and let's say 20 pixels and below that padding right 20 pixels that looks much better now we can clearly see the left and right edges of the form container even on narrow screen sizes and devices all right so I think that this description paragraph would look a little better and cleaner if it was left align with the form elements and I want to add another text field to the form that lets users type their name so how about you do that with a challenge in this challenge you will left align the text in the description paragraph and then in the form create a required name input field and here's a hint its type should be set to the value text so pause me now give that a go and I'll see you in a bit to go over this together all right hopefully that went well let's give it a go so first I will left align the text in the description paragraph that's being done here now currently I see that text align is set to the Value Center so let's see what happens if I change this from text align Center to text align left and yep that does what I want it to but it turns out that the value left is the default text align Direction so we can actually delete this line Al together and it works just like we want it to okay next is the name input field to do that I can just copy the code for the email input I'll copy it and paste a new input above it and in the challenge I mentioned that its type should be text currently it's email so I'll change this to text and the value email is specific typically used for email input fields to check that an email address is in the correct format but when you have an input field where users need to enter text such as their name you set its type to text I'll follow a similar pattern here by setting the ID to name and the placeholder text to enter your name and this is also going to be a required field and that's being set up here with the required attributes all right let's have a look I'll bring up my form click refresh and good the new input field appears stacked on top of the email field and that's again all being done with flexbox and if you click the submit button without entering your name since the field is set to be required you should also see a message that lets you know to fill out the field so hey if you got the steps for this challenge well done let's move on to the next challenge which I'll paste in here and this time I want you to display the dog. jpeg image image above the H1 element and to give the image the class featured image and when you display the image on the page you'll notice that it'll need some adjustments and that's okay we'll take that on after with CSS only worry about these two steps right now so go for it and I'll meet you back soon all right hopefully you were able to display the dog image you've worked with images in previous projects so let's take a moment to go over that here just above the H1 element I'll add the image using the image tag and to apply the class featured image I'll add a class attribute and between quotes write feature Das image let's not forget the closing bracket then to display the image on the page I need to add the source attribute and point to my image which is named dog. JPEG and one important attribute when working with embedded images is the alt attribute and what that does is is provide alternative text for an image for instance if the image source is broken the image can't be loaded or the user is using a screen reader the text you type in here is going to be displayed or read to the user the image itself is an illustration of a happy dog so for the alt text I'll write illustration of a happy dog if you figured out that you needed to include an ALT attribute fantastic as it's an important attribute when working with image elements now as I mentioned earlier the image appears way too large and out of place so now I want you to write CSS to adjust the size and shape of the image I'll add the steps for another challenge here in styles.css so this time I want you to style the image by selecting the class featured image and then making the image smaller so that it's about 100 pixels wide and I want you to apply rounded Corners to the image so think about what you need to do give it a go and I'll catch you in AIT bit to go over this challenge together all right hopefully that wasn't too bad and you were able to get through all or most of these steps now let's go over it together first I'll select the class featured image which is done using a period like this container selector here so I'll type dot featured image and then open up a set of curly brackets then to make the image smaller I'll use the width property and set it to 100 pixels and I see that worked and to apply rounded Corners I can use the Border radius property like we're doing here so how about I just copy this line of code here and paste it in my featured image rule and that looks pretty good but I want the image to be perfectly rounded and the way you do that is by setting the Border radius value to 50% and now we get a perfectly rounded image if you didn't make your image perfectly rounded that's okay the next thing I want to do is horizontally Center align the image above the heading because it's looking a bit weird left align and centering would make the design more balanced so I'll try to do that here in the featured image rule let's see earlier we used the text align property to align the content so what if I set text align to Center well that didn't work like it did for the paragraph So instead how about just asking chat GPT to give me the code for that so I'll ask it this prompt here I'll say hey what's the simplest way to horizontally Center align this new featured image and below I provide a code snippet of the image and H1 so I'll submit this to chat GPT and it says that to horizontally Center the image you can use CSS by setting the display property of the image to block and applying the margin property with a value of zero Auto and I get the updated CSS for that so I'll just copy these two lines lines of code that used the display and margin properties to horizontally Center the image then paste it into the featured image rule and it looks like that did the trick good while we're here I also want to create more space between the heading and the image and I can do that with margins so for example I can add a margin bottom property and set it to 20 pixels and the spacing here looks much better but here's a trick this is actually a margin shorthand property where the first value sets the top and bottom margin and the second value sets the left and right margin so if I set the first margin value to 20 pixels it looks and works the same and if I add a third value that controls the bottom margin so in this case I want the top margin to be 10 pixels the left and right margins to remain Auto to create that horizontal centering but I'll add a third value that controls the bottom margin Marin only and that opens up the spacing on both the top and bottom sides of the image all right finally how about applying a nice border to the rounded image that matches the color of the main heading and I want you to try something using chat GPT go ahead and open a new chat and feed it this directive prompt The Prompt for this challenge asks chat GPT to generate only the CSS needed to apply a 3 pixel border to this image using this color value here in this case chat GPT doesn't really need to know the context of your project this image code snippet should be all it needs to give you the necessary CSS so pause me now ask chat GPT and then add the new CSS to the project all right hopefully you were able to make that work I'll open up a new chat window then provide the prompt to chat GPT and I get back a CSS code snippet that applies a 3 pixel solid border to the image with the provid added color so I'll copy this line of code then paste it inside the featured image rule let's have a look the border is a nice Added Touch and it makes the image stand out a little bit more on the page all right so that about wraps up the subscription form project and I want you to take some time before you move on to ask chat GPT to explain anything that seems confusing or that you want to learn more about you've made lots of progress building with AI and HTML and CSS and up next we'll take a big step toward adding more power and interactivity to our projects with JavaScript you've learned a bit about HTML and CSS and used it to build some projects now it's time to learn another essential building block in web development JavaScript in this Grim you'll get an overview of what JavaScript is why it's important and how it fits into the larger picture of web development together with HTML and CSS think back to the HTML and CSS car analogy if HTML is like the structural building blocks of the car and CSS is the car's style look and feel then think of JavaScript as the part that powers the car's functionality like the car's engine and smart features without JavaScript our car might be aesthetically pleasing but it won't do much with JavaScript we breathe life and interactivity to the otherwise static structure and design for example the doors unlock when we approach the car the ignition starts with a button and the car moves when we push the accelerator all interactive all thanks to JavaScript in web development JavaScript is responsible for making websites and apps functional and interactive it enables us to respond to user actions like clicks or key presses manipulate content on the page and even communicate with servers to process store and retrieve data now you might be wondering how can I as a non-coders start using JavaScript well that's where our handy AI assistant comes in just like we did with HTML and CSS we can ask chat GPT to generate JavaScript code for us and help explain what it's doing let's say we want to implement a simple interaction we'd like a welcome message to appear when we click a button so let's ask chat GPT to create this JavaScript code for us I'll use this prompt which asks can you generate a basic HTML and JavaScript example where clicking a button logs a welcome message please add comments to help me understand the code I'll copy this prompt and paste it into chat and it Returns the HTML code which I'll copy and paste into index.html the HTML contains a button element with an ID of my button and in this case the pages JavaScript is placed directly in the HTML file within script tags the JavaScript gets a reference to the button element with the ID my button and assigns it to a variable named button using this special VAR keyword you can think of a variable as like like a container used to store information assigning the button element to this button variable makes it easier to work with a button and make things happen when it's clicked for example the code here pays close attention to our button using what's called an event listener so that anytime it's clicked something happens in our page or some functionality that we Define between these curly braces gets executed in this case it's logging the welcome message written here between quotes to the browser console and the browser console is a tool that's built into web browsers that allows you to run and test JavaScript code and display messages and console.log is what's used to display or log messages in the console in fact this scrim editor also has a built-in console that's this area here so I'll click the Run button to run this code and when I click the button in the mini browser the welcome message appears inside it good so now I have a quick challenge for you I'll includeed it here as a comment between the script tags and what I want you to do is display your name in this welcome message so it might say something like welcome Gil for example so pause me now and give that a try all right to display my name in The Welcome message I'll update the text that's passed into console.log the message is written inside quotes and any value or data you see in JavaScript written within single or double quotes is called a string So within the quotes I'll simply add welcome Gil I'll run the latest code click the button and I get the new message displaying my name so next how about we display this welcome message on the page instead of in the console so using this prompt I'll ask chat GPT to please update the code so that clicking the button displays a welcome message on the page so I'll paste this prompt into chat GPT and we get back the updated code and including an overview of the changes which you can read through I'll copy the new code snippet and replace everything in index.html with it and looking at the HTML I see that it now includes a div with an ID of message container to display our message and like it did with the button the JavaScript references the new message container div and assigns it to a variable named message container and this line uses the message container variable to update the text content of the container and display the welcome message so I'll click run to run my latest JavaScript and when I click the button I should see the message appear on the page and there it is good similar to how we've written HTML and CSS in separate files it's common to place your JavaScript in a separate file that uses the JS extension like script.js so let's do that I'll ask chat GPT to place the HTML in JavaScript in separate files files and to style the page with CSS so I'll feed this prompt into chat gbt and let it do its thing and I get back the code for HTML JavaScript and CSS files so I'll replace my HTML with this new HTML code snippet then copy the JavaScript code and paste it into my script.js file and if you're curious you link a Javascript file to your HTML using the script tag like so in this case it's pointing to script.js next I'll copy the CSS code into styles.css run all my latest code and that horizontally centures the button and makes it slightly larger I'll click the button and the welcome message appears all right so I have one more JavaScript challenge for you I want you to use a JavaScript variable to dynamically display your name in The Welcome message so your challenge is to create a variable named first name and a sign it your name and I'm going to update this line here so that it uses the first name variable you define to display your name in the message all right so take it away the scrim is all yours all right now let's go over the challenge together to create a variable named first name I'll use the VAR keyword followed by first name then type an equal sign to assign it my name between quotes or as a string and if you don't place this inside quotes the JavaScript interpreter will produce an error so as you can see here the red squiggly line lets you know that something is not quite right and in JavaScript semicolons are optionally used to Mark the end of a statement so I can type one here to be consistent with the rest of the code all right so now whatever I assigned to the first name variable should appear here so let's try it out I'll click the button and good the message says welcome Gil so if you did something similar nice work especially if this was your first time working with variables in JavaScript another way you might see variables written in JavaScript is using the keyword let which is easier to understand because if you read this out loud you might realize that we're just telling JavaScript to let first name equal or B Gill and you will see variables used a lot in JavaScript programming okay we've covered a lot in this lesson and if you still don't quite understand some things about this JavaScript code don't worry but but I really do want you to take full advantage of asking chat GPT to help you understand certain Concepts especially while building projects as you work more with these tools and continue to build your projects you'll start to recognize patterns and understand more about how HTML CSS and JavaScript work to help you out in the meantime I'll provide a prompt you can use to get a refresher or learn more about the basics of what we covered in this lesson so you can say to chat GPT hey I'm new to JavaScript please help me understand the basics of these Concepts and like in an earlier lesson when we covered the basics of HTML and CSS you can ask chat GPT to relate HTML CSS and JavaScript and how they work together to your own interests or Hobbies so here's a suggestion for how you might prompt chat GPT you can say I enjoy gardening how can I understand HTML CSS and JavaScript in the context of planting and maintaining a garden so explore some of these prompts and I'll see you in the next grim where we'll begin applying JavaScript to projects we are going to be throwing an epic event called GIF Gaya where guests dress up as their favorite gifts or memes we'll need to build an interactive invitation to allow guests to RSVP to the event we can do that using HTML CSS and JavaScript With a Little Help from chat gbt this is a bigger project so we're going to take it step by step using a series of role playing and instructional prompts where we guide the AI with specific steps to reach the desired outcome it's going to hopefully look something like this but first we need to work on creating the HTML structure of the event invite which might look like this I've set up the project with HTML CSS and JavaScript files the first step is to ask chat GPT to generate the HTML structure of our invitation and I've provided the prompt will use for that the prompt asks the AI to assume the role of a highly sought after designer and provides some context and objectives for the role to play then it provides Specific Instructions and details about what needs to be done which in this case is creating a vibrant festive RSVP page below it guides the AI on what elements the page should have such as an invitation header with a title a subheading showing the date an event description and a space to display a confirmation message then it instructs it to create an RS VP form with a required email field an attendance field and a submit button and we also wanted to link the HTML to a CSS and JavaScript file so I'll just feed this into cat GPT and it generates the HTML code outlining the basic structure of our page so I'll copy and paste this code into index.html and there might be some HTML tags here that you may not have seen before like Main and section these are known as semantic elements that help provide meaningful information about the content the main element describes the main content of the page and section defines specific sections in the page and we also have a select element which is commonly used in form elements to create a drop-down list of options in this case the user can select whether they are attending or not okay great now that we've established our structure we need to apply styling and that's where CSS comes in next I'll use this prompt to style the RSVP page it continues with the assumed role by instructing the AI to use its CSS skills to style the gift Gaya invitation so that it's easily viewable on mobile and desktop and I want the page to be visually engaging and fun as possible to match the event's Lively and playful spirit and the instruction to initially hide the confirmation message indicates a consideration for some JavaScript interactivity and I want CSS comments to help non-coders understand the code more easily so let's see what magic we can cook up with this prompt I'll copy and paste this CSS into styles.css and good our invite is taking shape and already looking more festive so let's have a look at the CSS we've got here I see CSS used to reset some of the default Styles applied to the browser then a lot of CSS properties that we've worked with before and remember how I asked the AI to initially hide the confirmation message on the page that's being done here with display none and soon we'll make it appear on the page dynamically using JavaScript when the form is submitted and then I see something different here under responsive Styles I asked the AI to make the page easily viewable on mobile and desktop so this at media syntax here is what's called a media query it lets us apply different styles to a page based on the width or size of the browser window or the device where the content is being viewed in this case Max with 600 pixels means that the CSS included Within These curly braces will get applied to our page only if the width of the browser is 600 pixels or less so for example if I set the background color of this main element to Red notice how the red background does not appear when the browser is wide and only appears when I shrink its width down to 600 pixels or less less now here in the media query I see that the font size for most of the content is being updated so notice how some of the text size changes too for smaller screens all right now I want you to hack around and customize the page with a challenge I asked the AI for a vibrant and festive color scheme and this color scheme doesn't quite hit the mark I think so I want you to explore making the page more vibrant and festive using these two color values for example change the background color of the header and the button or the color of the headings and it looks like the spacing in the form needs some work too so I also want you to add more space between the input field select menu and submit button so pause me now and work through these okay now let's go over the challenge together to make the invite a little more vibrant I'll update the background color of the header to this color value here and the background color of the submit button to this second value so I'll scroll down to the CSS styling the button and replace the background color property with the new value and why not I'll also change the color of these headings here to match the color of the button those are these H3 tags here so in the CSS for the H3 I'll add the color property and set it to that color value all right that is looking better to me finally there are a few ways I might update the space between the input select and submit button what I'll do is apply a bottom margin to the input field and the select menu and I can do that here in this CSS rule that targets both at once I'll add margin bottom 18 pixels and that creates the spacing I need much better if you used a different approach than me that's completely fine all right now to add some life to this party we'll need JavaScript it will make our page interactive allowing the invite to respond and behave in specific ways based on user input so let's ask chat GPT to add some interaction to our page I have here another instructional prompt that gives the AI Specific Instructions to create JavaScript code to enhance the interactivity of the RSVP page then I provide clear tasks about the desired interaction which is to check if the user selected attending and then display a party emoji and a positive message if they are attending and I'm also being specific about where the message should appear in the confirmation message space and I requested adding brief comments to the JavaScript logic to make it more understandable for an encoder so let's feed this prompt to chat gbt and it generates the JavaScript I'll need which I'll copy and paste into script.js so let's go over this JavaScript first it gets the form and confirmation message elements and assigns them to variables and you may notice a new keyword const being used for the variables const is another common way to declare a variable in JavaScript unlike the lat and VAR keywords when you use const you're creating a variable that cannot be changed or reassigned once it has been set so in other words it's a constant value throughout your program then the code pays close attention to when a user submits the form and then runs all of this code each time it's submitted and this line here event prevent default is commonly used with forms to give you more control over the form submission and prevent the default browser Behavior associated with submitting forms then here we're getting the selected attendance value and assigning it to the variable attendance and this code here displays a confirmation message based on attendance selection it uses a common statement in JavaScript called an if statement that checks if the variable attendance or what the user selected is equal to the string yes if it's yes it sets the HTML content within the confirmation message div to display a celebratory message then it shows the confirmation on the Page by setting its display to block and it resets or clears the form here all right let's try it out I'll enter an email then select that I'm attending click submit and look at that we've got some interactivity on our page below we get the message partyon we look forward to seeing you at the gift Gaya good now I think that it would look better if the confirmation message appeared above the form so in index.html I'll move this confirmation message div above the RSVP form section I'll test it out and that looks much better now it does look like I need to add some space between the confirmation message and RSVP heading and I can do that with a bottom margin so here in the confirmation CSS let's say a margin bottom 20 pixels that looks good and then we no longer need to apply the bottom margin to the form so I'll just remove this entire form rule from the CSS great our gift Gaya invite is looking sharp up next we'll continue working on more interactivity with JavaScript it looks like chat gbt gave us the JavaScript code to display the confirmation message only if the user is attending notice how it displays a blank section if I select that I'm not attending well this was intentional because now I want you to work on displaying a different confirmation message if a user selects that they are not attending here's the challenge update the JavaScript below to display this message if the user selects the option sorry I can't make it use this code here as a reference for what you'll need to do and don't hesitate to ask chat GPT for help either so pause me now get coding and I'll show you my my solution when you're done all right if you got it to work well done there are a few ways you might have displayed the message to users not attending I did suggest using this if statement as a reference so you could have maybe copied this code block pasted a new one below and updated it to if attendance is equal to no then set confirmation message to this message and let's see I'll select sorry I can't make it and this works just like we needed to if you use this approach in your Solution that's great but there are other statements we can use with the if statement to create a conditional statement that performs different actions based on different conditions one of those is else if so here if the attendance value is yes then the program skips checking whether attendance is no and displays this message now if attendance is not yes then it checks if the attendance is equal to no then displays the proper message and I'll test it out here and you can see that it works in the exact same way assuming attendance can only be yes or no you could also write this using an if else statement like so so we can just have else without attendance is equal to no and this way if attendance is not yes then it must be no so this code should run either of these approaches is fine and if you'd like to learn more about JavaScript conditional statements I'll provide some prompts here that you can use with chat GPT now this is the GIF Gala after all so the last thing we'll work on is customizing the JavaScript to display a gif in the background based on what the user selects for attendance so with this prompt I'm instructing the AI to update the JavaScript and CSS to display this image as the page background if the user is attending and that the image should cover the entire background area of the body so I'll paste this into chat GPT and let's see what we get all right so I'll copy this JavaScript code and replace everything in script.js with this new JavaScript so it looks like this code is getting a reference to the body element and assigning it to the variable body and this line here sets the background image of the body element directly using the style. background image property and this URL function is what tells the browser to load the image file and use it as the background so when the user is attending or attendance is equal to Yes it sets the body elements background to the provided image URL and if the user is not attending or attendance is equal to no then the body's background image style gets sets To None to remove the background image and in the CSS code background size cover ensures that the image covers the entire background area of the body and background position center centers the image within the body so I'll copy these two properties then paste them in my body rule here in the CSS so let's test the latest changes I'll enter an email select yes I'll be there click submit and awesome we see the party gift displaying in the background now if you make the browser window taller you'll notice that the image is repeating itself here toward the bottom to fix this we can add a couple of CSS properties here in the body rule first I don't want the background image to repeat so I can use the background repeat property and set it to the value no repeat to prevent that then I'll add a height property and if I set the height value to 100 VH it means that I want it to take up 100% of the viewport height which is what VH means or the total height of the visible area in the browser so I'll refresh the mini browser try it out again enter my email select that I'm attending click submit and now I shouldn't see the party gift repeat heating or any empty spaces below it and I don't fantastic now don't we also want to display a different image if the user is not attending yeah I think that makes sense and I want you to work on that part for this last challenge so take a moment to update the JavaScript to display this GIF if the user is not attending pause me now and go for it all right hopefully you got the not attending gift to display so if the user selects not attending that means that the value of attendance is equal to no and currently that sets the background image to nun so I'll copy this URL function here and replace none with it and then Within These quotes I'll add the URL to this GIF and that should work I'll test it out enter an email select sorry I can't make it click submit and yes there is our sad GIF displaying in the background now I do want more of the background GIF to show through so I'll create a semi-transparent background for that I'll even ask chat GPT hey which CSS property creates a white semi-transparent background and here in the output I see that the CSS property that creates a white semi-transparent background is background color with this rgba value here this rgba color model lets you set an alpha value that determines the level of transparency for the color so I'll copy this background color property and I want the main element to be semi-transparent so I'll paste it here in the main Rule and here's the alpha value which is set to 0.5 which in this case means that the background will be 50% transparent I want it to be slightly less transparent so I'll set it to 0.75 which is going to allow some of the background to show through and that looks great let's test it with the attending GIF and and there you have it you've just built an event invitation page using HTML CSS and JavaScript all with help from chbt so nice work hopefully you picked up new coding skills along the way let's move on to our next project I don't know about you but in just about every office I've worked in cake is a big deal birthdays anniversaries Fridays there's always a reason for cake but there always seems to be that one person who ends up without a piece so we're going to fix that by building a cake raffle web app with the help of chat gbt and it might look something like this the raffle app will allow users to enter their names into a cake raffle then it will pick a random winner with a click of a draw Button as usual I've set up the project with an HTML CSS and JavaScript file and a prompts MD file for the AI prompts so let's start by sharing our idea with chat GPT through a conversational prompt this approach could give us a great starting point and allow us to shape the project and code in a more organic and less rigid way this prompt starts with a friendly greeting and presents the project idea it clearly mentions the Technologies to be used which is HTML CSS and JavaScript and describes the details about the desired functionality then it instructs the AI to outline the basic steps to get started so based on this prompt the AI should have a broad understanding of the projects objective which is a great way for us to Kickstart the project as it allows for more creativity and ideation so I'll copy this prompt and feed it into chat upbt and chat upbt practically generates some ideas and steps I can use as the basis for instructional prompts to help build my raffle app for instance steps 1 two and three outline the basic steps to follow for creating the HTML CSS and JavaScript interactivity these look good to me so let's go with these suggestions to set up the core HTML CSS and JavaScript for the app since we've established this collaborative two-way conversation with the AI I will reply to it with this instructional prompt this prompt instructs the AI to generate the project code for steps 1 through three of the suggested outline then it provides specific steps on how to structure the HTML and divide the app into different sections making the task clearer and easier to follow for the design it suggest just using a vibrant color scheme such as this value here and similar complimentary colors for the button States The Prompt also asks to make the code easy to understand even for non-coders and to add code comments in the CSS and JavaScript to help us understand and learn what it's doing so let's see what chat GPT will generate with this prompt and good it Returns the HTML CSS and JavaScript code for the app so first I'll copy and paste the HTML code code into my project then let's dress up the page with CSS I'll copy the CSS code and paste it into styles.css let's run the code and see what we've got so far good I like the direction so far and lastly we can't forget the most important ingredient JavaScript so I'll copy the JavaScript code and paste it into script.js so let's spend some time going over the JavaScript at the top we access all the relevant elements on the page that we want to interact with or display dynamically like the form input field and Button as well as the participant list and winner display container and it assigns them to variables now this line of code here declares a variable called participants and assigns it to an empty array a JavaScript array is a data structure that allows you to store multiple values in a single variable it's like having a collection of items in a list in this case it stores a list of the raffle participants and this code pays attention to when users submit the raffle form then all this functionality here gets executed on the page that's what this function keyword is for in JavaScript functions contain a block of code that performs a specific task or set of instructions in this case it's getting the entered name and assigning it to this name variable then it's adding or pushing the name into the participants array and below this line is displaying the name on the page inside the participants list now this syntax here that uses back tick places each name inside P tags to create a paragraph element and this dollar sign curly braces syntax dynamically inserts and displays a participant's name on the page it's called a template literal and the line below clears the name input field so all of that happens with just the form submission now just below is the functionality for the pages draw button the program listens for when the button is clicked then runs this block of code first it checks if there are names in the participants list or more than zero items in that array it runs this code to randomly select and display a raffle winner and emojis again using the special back TI and dollar sign curly braces syntax all right now let's try it out I'll enter some names like Gil then click the draw button and it displays the winner which is Bob congrats on your cake Bob refresh the page and everything clears so great with JavaScript our cake lottery app becomes a dynamic and interactive user experience now one thing I immediately noticed is the spacing problem between the input field and enter button so I'll fix that in the CSS I'll find the selector where we're styling the input element with the type text right here here and apply a bottom margin of let's say 16 pixels and there we go now while I'm here I also think that the label for the name input would look better if the text was bold so I'll update that here in the label rule with the font weight property and set it to the value bold and that looks much better to me all right next let's work on a JavaScript challenge I'll paste it here in script.js I want you to work on adding a reset button that clears the participant list and winner display the button should allow users to start a new round of the cake raffle and I've provided a hint saying that the number of items in the participants array or its length should be equal to zero then use this color value for the button background and this color for its hover State this is likely the toughest challenge you've worked on so far and if you have a look through the JavaScript you'll find some lines of code that might give you a hint of what you'll need to do for example these two lines here and as usual feel free to rely on chat GPT and ask it for suggestions so take it away you've got this and I'll catch up with you when you're done to go over it together all right hopefully you got through most of the challenge if you did amazing work now let's go over it together first I'll work on adding the reset button in the HTML to do that I can copy the existing draw button and paste it below then update this code so that the ID is reset dash button and that the text is reset and there's our reset button now it doesn't look like the other buttons yet and that's because we need to style it with CSS and I see that this CSS here is what's applying the styles to the submit and draw button it's selecting both at the same time so I'll also have this select the reset button by typing a comma and then the reset button ID and good now the reset button has the button Styles applied now we need to apply a different background color to the reset button so I'll create a separate CSS rule for that that targets the reset button ID and I'll use the background color property to apply the background color using this color value here which I'll just copy and paste into my CSS looking good and I also provided a color for the hover state so I'll copy that and in the CSS I'll style the reset buttons hover State similar to how it's styling the draw buttons hover state with reset dash button colon hover and then here I'll include background color and the color for the hover State let's try it out and now when you hover over the reset button you should see it change to a darker shade of blue and it does good all right let's move move on to the JavaScript next first I'll work on getting a reference to the reset button and assigning it to a variable I see something very similar being done here for the draw button so I'll just copy this line of code and update it so that the variable name is reset button and that it's getting the element with an ID of reset button and I mentioned looking through the JavaScript code and maybe finding some hints of what you'll need to do so I do see that this of code is what selects the random winner and displays the Winner's name on the page so I might be able to do something similar with the reset button so how about if I just copy this entire block of code or event listener paste it below and update this to reset button. Adent listener and when the reset button gets clicked I want to clear the participants list and the winner display area I don't need to check if there are participants and select a random winners so I can and delete this and I mentioned that this line of code might give you a hint it's what's setting the inner HTML of the winter display to the winner and emojis so how about if I copy this line of code and paste it inside the code for my reset button and instead of setting its inner HTML to a paragraph We want to clear it so instead I'll set it to an empty set of quotes and let's see what happens I'll type a name into the field select Tom as the winner then click the reset button and great the winter display area disappears from the page so now it looks like I need to clear the participants list looking through the code I do see the variable for participant list so I'll copy participant list. HTML and I'll follow the same pattern here set participants list. HTML to an empty set of quotes I'll add a couple names to the list select the winner congrats Tom now let's see what happens when we click reset awesome now both the winner and participant list are cleared now there is one more important thing that we need to do and if you did not think about or implement this part that's totally okay we need to ensure that our participants array is truly empty because notice that if you click draw it displays Gil as the winner click it again it displays treasure as the winner which is weird because Gil and treasure do not appear in the participants list well it turns out that they are still being stored in the participants array so we'll need to clear or empty the array and in the challenge steps I've provided a hint saying that the number of items in the participants array which is known as the array's length should be equal to zero and here in this if statement I'm seeing participants. length and length refers to the number of items or elements inside an array in this case the participants array so let's see what happens if we set the length to zero here in the event listener with participants. length equals 0 Let's test it out draw a winner congrats bear and I'll click reset that clears the page and clicking draw should not draw a new winner and it doesn't good which means that worked again this was a tough challenge so if you came up with a solution similar to mine well done next I'll quickly walk you through some visual enhancements we can apply to the page the first one is to adjust the layout of our buttons I think the page would look better if if the draw and reset buttons were on the same line like this there's different ways I might do that so what I'll do in the HTML is place them inside a div with the class name button group like so then I'll use a CSS layout technique you saw in an earlier lesson called flexbox to place both buttons on the same Row first I'll select the class button group and here I'll turn on the special Flex boox layout with display Flex and you can see what that did now I want to apply a gap or a space between the buttons and for that I'll use a CSS property intuitively named Gap and set it to 10 pixels and that's looking really good to me finally let's liveen up the page with a cake icon similar to Google web fonts Google offers a collection of icons called material icons that we can easily use in our projects so I'll ask chat GPT to give me the code for that using this prompt here please use Google material icons to add a cake icon inside the H1 I'll paste that into chat GPT and it returns two HTML Snippets for adding and displaying the icon first it looks like I need to add the Google material icon stylesheet to the HTML with this line of code so I'll copy that and paste it in the head section of my HTML and then I need to modify the H1 to include this I tag with the class material I icon so I'll copy just that line of code and replace this H1 in the header with the new code all right cool there's the cake icon next to the title and there we have it everyone a fully functional cake raffle app before moving on to the next project I'd like you to experiment with the HTML CSS and JavaScript and tweak the functionality to make this app truly yours for example change the theme to a movie ticket raffle a pizza raffle anything you'd like and I also want you to ask chat GPT about some of the things we've covered or anything that you still might be confused about as you've experienced coding with AI gives you Endless Possibilities it's like having your cake and eating it too you get to create amazing things and have a sweet time doing it so go ahead and Delight your friends and co-workers with a raffle app hi there you've taken some big strides in this course exploring the fasc F inting world of coding and building cool apps while leveraging generative AI tools like chat gbt you've had a taste of what it's like to create something from just an idea then watch that idea take shape even without formal coding skills now at this point you might feel like you've been thrown into the deep end and maybe worried that you don't understand everything and that you're dealing with code that seems more complex than you expected well rest assured that it is 100% normal to feel this way in fact for this course specifically this is intentional You Were Meant to punch above your weight in this course and work with code or take on challenges you don't fully understand or seem beyond your current skill level the goal all along has been to get you to Dive Right into building projects and solving problems without going the long way of learning most things from scratch beforehand or focusing on the code itself now if you feel like you need to get a firmer grasp or dive deeper into the technical details of coding and a lot of what you've been working with so far then script rmba front and developer career path is the perfect place to learn more and take that next step on your coding and building Journey we designed this curriculum to deepen your knowledge of HTML CSS JavaScript react and more with 13 modules filled with interactive coding challenges and over 15 real world projects that you will build yourself from scratch with the opportunity to get code reviews from the scrimba community if you'd like to check it out or join at any time visit the frontend developer career path on the scrimba site or click on this image to head over to it now I'll see you back soon to keep on building we are going to navigate an essential skill for any Builder and coder debugging and getting feedback to improve your code and we'll use chat gbt to help guide us through this we're going to use this real rewards project which is a simple page that gives you a 50% discount on movie tickets when you enter the promo code have to structure the page we have an H1 element and a paragraph element to display the final price then below a div with a ID app containing a form element where users can enter and submit their promo code over in the JavaScript we are first getting elements from the HTML like the promo code input field the paragraph displaying the final ticket price and the promo code form and assigning them to variables The Base ticket price is set to the script then displays this price in the final price element when the page loads and right below the function applyed discount calculates the final price based on the entered promo code if the promo code the user enters is equal to half then the discount rate is set to 0.5 or 50% otherwise it remains zero and no discount gets applied the function then calculates the final price by subtracting the discount from the base price and returns a final price and this code here runs when the user submits a promo code so when the form is submitted this code retrieves the entered promo code and calculates the final price by running or calling this apply discount function which is this code here and then it checks if the final price is less than the base price meaning a valid discount was applied then the script updates and displays the new price here otherwise if no valid discount was applied the script sets the placeholder text in the input field to display the message in valid promo code and this line here clears the input field I totally understand if there's code here that you don't quite get or that is still confusing to you I don't want you to feel like you need to understand everything in this Javascript file the purpose of this lesson is to help you get feedback improve and understand your code a little bit better with the help of chat gbt now this project is far from perfect or even production ready in fact when you first run it notice how we're getting a JavaScript error in the console so let's look at some ways we can debug and improve the JavaScript with the help of chubbt now debugging might sound a bit intimidating at first but it's just the process of identifying and removing errors or bugs from your code with chat gbt you can more easily troubleshoot these errors it can point out syntax and logic errors or even suggest better practices to prevent bugs in the future so here's an example of how you might prompt chat TBT for debugging you can provide a description of the issue paste your code into the chat and it will help identify possible problems so for example here I'm saying that I'm having an issue running my JavaScript code and then I'm providing the airor message I'm getting which is the message that appears in the console and then I say please help me understand what's wrong so I'll submit this prompt to chat GPT and here I see that this typically occurs when you're attempting to manipulate an element that doesn't exist or hasn't been properly accessed and then I see more instructions here for example ensure that your JavaScript code is running after the HTML document has finished loading ah so here I see that you can achieve this by placing your JavaScript code at the bottom of the HTML file just before the closing body tag looking at the HTML I see that the script tag is in the head tag so that is indeed what's causing the problem so I'll move my script tag just above the closing body tag like so and when I run the code I see that the air no longer appears in the console great testing the form now I see that I'm not able to submit a promo code notice how clicking the apply discount button immediately refreshes the page preventing a discount to be applied as expected so I'll turn to chat GPT with this prompt which says I'm having issues with my JavaScript code submitting the promo form refreshes the page and does not run the following code as a expected in this case I'm placing the code to evaluate within triple back ticks to visually separate the code from the surrounding text and indicate that it should be treated as code this can also make it easier for human readers to identify the code improving the overall readability of the prompt and for the AI itself it might help separate our instructions from the context you might also see this done with hash symbols or quotes for example now in many cases you don't even need to place your code with than quotes hash symbols or back ticks chat gbt is likely to figure it out so I'll copy this prompt and paste it into chat GPT and it looks like the JavaScript is missing a method to prevent the default form submission behavior and that's this method here event.prevent default so let me add that line of code here in my promo form event listener right at the top like this this ensures that the default form submission behavior is is cancelled so now when I enter a promo code and submit the form the JavaScript code runs without refreshing the page allowing the promo code to be applied and display the final price but testing it again it looks like the discount gets applied to the base price no matter what text or promo code you enter so I'm going to challenge you to debug and fix this with the help of chat GPT the challenge is to use chat GPT to debug the apply discount function so I want you to head over to chat GPT and provide it with this prompt and include the code to debug within the hash symbols then evaluate chat gpt's response and fix the code using what it suggests so pause me now and give this a go okay hopefully you got it to work I'll give it a go by including my apply discount function here within the hash symbols then copying this prompt and feeding it to chbt and here I see that the issue is in the conditional statement it looks like instead of a comparison operator which is this triple equal sign I'm using the assignment operator or only an equal sign to compare the user code with the string half and this is what's leading to the incorrect behavior and then to fix the problem I need to change the assignment operator to the equality operator and I see an example of that here in the updated code all right this doesn't seem too bad so over in the JavaScript I'll update this line here to if user code triple equal sign half using the triple equals for comparison ensures that the value of user code is compared to the string half and if they are strictly equal then the discount rate will be set to 0.5 or 50% otherwise it remains zero or no discount gets applied I'll test it out I see that the Base ticket price is $50 now I'll enter the promo code have and all caps click apply discount and great the final ticket price is indeed 50% off or $25 so now the code seems to be working as expected all right once your code runs without errors you might want to make it more efficient or readable and this is where chat GPT truly shines with its ability to generate code you can ask chat GPT for more efficient modern and elegant Solutions or different approaches to a problem a prompt you can use for code Improvement might look like this it says that this JavaScript code works as expected but I think it could be made more efficient and modern please provide a more streamlined and upto-date version of this code then I'll paste all of my JavaScript code here and chat gbt will evaluate it and give me some suggestions all right so here I see that it suggests replacing the VAR keyword with const which can help avoid accidental reassignments and bugs in the code and it simplified the applied discount function using a conditional turn area operator to assign the discount rate based on the user code that's this code here which is another more concise way to write an IFL statement and I see that it also suggested using Arrow functions which is another way to write functions using a shorter syntax so the JavaScript does seem more efficient with modern features that can help prevent bugs in the future and I could use this code and push my project live but I think I'll ask for more feedback on my original code as with any learning and building process feedback is key and AIS like chat GPT can provide that too with its immense knowledge of coding conventions and standards chat gbt can give you valuable feedback on your code structure syntax and even style so this time we're going to take advantage of the role playing prompting approach to request feedback I'm telling chat chbt you are a senior developer reviewing my JavaScript code before I ship it to production please provide feedback on how I can improve this code make it more maintainable and handle cases where a user enters the promo code in lowercase because notice that if you enter the promo code half in all lowercase the discount doesn't get applied but I think that users should still get the discount even if they type the promo code in all lowercase so my senior developer here is going to help me out with that below I'll paste all my JavaScript code then submit this prompt to chat GPT and here I see a lot of valuable feedback and suggestions for example it suggests using descriptive variable names to convey their purpose and meaning better and to convert the base price value to a numeric value versus a string and that's going to help prevent calculation errors then to handle cases where a user enters the promo code in all lowercase it says that I can convert the user code to uppercase and compare it to an all uppercase version of the promo code this two uppercase method converts text to all uppercase letters this looks good to me so I'll copy this new JavaScript code snippet and replace all the code in my script.js file with this new JavaScript overall I think that this feedback makes the code more functional organized and maintainable for example I even see that it suggested moving the logic for applying the discount and determining the final price into two separate functions and then only referencing or running the handle form submission function here when the form gets submitted which makes the code easier to understand and maintain I'll run all this latest code and test it out the ticket price is $50 I'll type half in all lowercase and good the discount gets applied so now the final price is $25 and if I enter an invalid code such as test I get the message invalid promo code awesome now don't worry if you're still confused about or don't understand a lot of this code like always spend some time asking chat upbt to give you more details about anything you like to learn more about remember coding isn't always about making things work it's an iterative process so it's perfectly okay and normal to encounter bugs and problems in your code it's all part of the journey and with tools like chubbt by your side you'll be well equipped to tackle these challenges headon all right let's get ready to turn up the volume on our coding skills and build a drum kit web app with the guidance of chat upbt as usual HTML will form the structure of our drum kit CSS will give it a Sleek look and JavaScript will add exciting interactive elements and play real drum sounds so grab your virtual drumsticks and let's hit it the project contains the usual HTML CSS and JavaScript files and this time I've included a folder named sounds that contains several audio files in the wave format we are going to take this step by step so first we'll ask the AI to Kickstart this project let's see how we can code a button that when clicked triggers a kick drum sound I'll use this instructional prompt that provides a clear task for the AI to build a simple drumkit app using HTML CSS and JavaScript and I want to start with only one button that when clicked should play a drum sound and the button should appear centered on screen below I've provided some context about the sound file like its name and location and I've learned that HTML has a handy audio tag which is used to embed and load sound files in your page so I'm asking it to use the audio element for the sound file and as usual I want code comments to help me understand each part of the code so I'll paste this prompt into chat gbt and let's check out its response okay first it suggests the project directory structure which we've already set up just like this and here's the HTML which I'll copy and paste into my project I see that it has a container div with a kick button inside it and below is the audio element to preload the kick. wve sound file so let's add the CSS next which I see is using that special flexbox layout feature you've seen before to Center the button on the page so I'll add this CSS to my project and finally copy the JavaScript and paste it into script.js the JavaScript gets the kick button element and assigns it to the const variable kick button then it gets the kick sounds audio element and stores it in the variable kick sound then below the code pays close attention to when the kick button gets clicked so when the user clicks it it runs this code to play the kick sound in JavaScript this play method is used to start playing media like audio and kick sound. current time equals 0 makes the audio start playing from the beginning all right so let's get to the moment you've been waiting for and try it out I'll click on the kick button and great the kick sound plays before we get to adding more drum sounds I want you to give your drum app a title so here's your challenge come up with a cool name for your drumkit app and display it in a heading and then Center the heading on the page with CSS so pause me now and give that a go all right here we go I'll add an H1 element here to create my pages main heading and I'll give my drum kit app a cool name like Groove kit there we go now to center it on the page I'll select the H1 here in the CSS and set its textalign property to Center and while I'm here I'll adjust the CSS for the container so that there isn't as much of a gap between the heading and the button I'll get rid of this align items and height properties since we don't really need them and then how about giving the container a top margin of 30 pixels that looks much better all right let's move on to your next challenge we are going to expand our drum kit your challenge is to create a new button for the ride drum sound you'll need to write the button tag the audio tag and the JavaScript code to make it play when clicked and be sure to use the existing HTML and JavaScript code as a reference so pause me now and work on this challenge all right if you were able to add and play The Ride drum sound great work now let's work on it together first to add the right button and play The Ride sound I can follow the same pattern use for the kick button and sound I'll copy this kick button and paste a new button element below then update the ID to ride and the button text to ride and then I'll copy the audio element for the kick sound and update this ID to ride Das sound and I want the source to point to the file ride. wve all right that should be it for the HTML now let's move on to the JavaScript first I'll retrieve the ride button element and assign it to a variable so I'll copy the line for the kick button and update the variable name here to ride button which will select the element with the ID ride and I'll get the ride sound element in the same way I'll update this variable name to ride sound and get the element with the ID r- sound finally to play the right sound when the right button is clicked I'll copy this code block here paste it below and then update this code block so that it pays attention to the ride button and when the ride button is clicked I want to play the ride sound so I'll change this here to rid sound. current time equals 0 and then to actually play play it I'll update this to rid sound. playay all right let's give it a try all right cool now we're able to play both the kick and ride sounds we are making good progress so now we'll ask the AI to make our drum kit more interactive I wanted to play drum sounds using my keyboard and not just with button clicks for example pressing the a key on my keyboard plays the kick sound and the S key the right sound so next I'll prompt the AI to extend the drum kit app by triggering the kick sound when the a keyboard key is pressed so let's start with that and see what chat GPT comes up with all right so it gives me the modified JavaScript and I'll only copy this new code block at the bottom and add it to my Javascript file so now the JavaScript program is paying attention to or listening for key presses on the page this code is saying when a key is pressed down anywhere on the page do the following actions in this case it uses an if statement to check which key was pressed so if the Pressed key is a then it plays the kick sound so now I can press my a key to play the kick sound next how about you work on updating this JavaScript to play The Ride sound file whenever the S key is pressed so pause me now and go for it all right here we go to play the right sound when the S key is pressed I'll copy this if statement paste a new one below and I'll update this to else if so if the Pressed key is s it's going to play the ride sound so I'll update this to rid sound. current time equals 0 and rid sound. playay I'll test it out and good that worked let's keep the Beats coming so your challenge is to complete the drum kit app by adding the button and audio elements for the snare Tom and high hat sounds you'll also need to update the JavaScript so that clicking each button will play the corresponding sound and then play each sound when pressing a specific key and the keys to press are up to you so take your time with this and I'll meet you back up when you're done to go over it okay hopefully you got all your drum sounds to play and even jammed out for a bit now let's work through these I don't want you to have to watch me type every button audio tag and JavaScript code so I'll paste all the remaining button and audio elements here in the HTML we have our button elements and now the audio tags then in the JavaScript I'll paste in the variables for the buttons and then the three audio elements next I'll paste the event listeners for the three buttons right here and finally the else if statements for each key press and notice how the buttons overflow their containers and we're not able to view them all at once on the page I can fix this with CSS by wrapping the buttons onto new lines whenever there's not enough space for the buttons to all fit on one or even two lines here in the container rule so I'll wrap them with the flex wrap property which is also a special flexbox property then set the value to wrap and I also want to space them out by adding a gap between each so I'll use the Gap property and set a 20 pixel Gap all right much better now the buttons are all nicely spaced out and we can see them all at once on the screen they even stack and display as a column on narrow screens now I'll test my latest changes with a quick jam session hopefully you enjoyed that it seems like everything is working great now while building this project we duplicated a lot of code for example the JavaScript that plays a specific drum sound when its corresponding button is clicked and the code for playing sounds when a key is pressed and we're not worried too much about duplicate code right now while learning to build projects but repetitive code like this can often be replaced with more efficient and maintainable code so the last step you might do is ask chat GPT for help updating your code so that it's more concise readable and maintainable with a prompt like this you can say please update this JavaScript code so that it's more concise and maintainable and then include your JavaScript code here and this will likely generate new code that might seem a bit too complex and difficult to understand right now so let's not worry about that and stick with our original code all right so you've just built a drumkit app with interactive elements connected them to sounds and made the interface respond to both mouse and keyboard inputs I think now is a great time to show this off to friends and colleagues you can also customize the CSS and even add different sounds to your app such as the Boom Clap and open hat files included in the sounds folder and one last thing why don't programmers like nature because it has too many bugs and with that I'll show myself out our work here is done let's move on we've been creating some cool projects using HTML CSS and JavaScript with chat gbt so now it's time to Showcase these to the world world I'm going to introduce you to a remarkably simple way to deploy and share your projects using a service called netlify so let's Jump Right In First up let me show you how to download the code from a scrim onto your computer first click on the gear icon in the bottom right corner of your scrim then click download as zip and that's going to download a zip file to your computer unzip the file and you'll see your project files inside a folder in the folder you might see some new unfamiliar files like readme MD package.json and another named V.C config.js go ahead and delete those files because you're not going to need them I also suggest renaming your project folder to help you keep track of it and now you're ready to deploy your project with netlify netlify is simple to use even for non-coders and perfect for our needs it offers free hosting for personal projects which makes it a great choice and we'll focus on netfi drag and drop feature so head over to netlify.com or click on this image to visit the site and create a free account you can simply use your email to sign up or if you happen to have an account with a service or platform like GitHub or gitlab you can use it to sign up with your account all set up you can deploy your first site in minutes and you'll be amazed at how simple this is on your netlify dashboard you'll see a section titled sites then under the add new site dropdown select deploy manually and here's where the magic of dragon drop comes into play you take your project folder then drag and drop it right into this area where it says drag and drop your site output folder here and that's it no complex configurations no code just drag and drop netlify will do its thing and your site will be live on the web within moments you'll see that netlify provides you with a unique URL where you or anyone can access your site click on it and you'll see your project live on the web and from here sharing your project is as easy as sharing this URL that netlify provides so now what happens when you want to make changes to your project after it's been deployed well netfi makes this easy too after making changes to your project you only need to drag and drop the updated project folder onto the netlify dashboard here under deploys and netlify will automatically update your site with the new changes the URL for your project stays the same so there's no need to reshare a new link so just remember that every time you make a change in your local project files you'll need to re-upload the entire project folder to netlify to ensure that your live site stays in sync with a project on your computer and there you have it deploying and sharing your projects is pretty much a breeze with netlify so don't hesitate to get your work out there in fact how about you share a project you built in this course with peers by posting the project link on the today I did Discord Channel clicking on this image will take you right to that channel remember building is only half the fun sharing your Creations is where the magic truly happens and just like that we've reached the end of this section where we started to bridge the gap between learning to code and building tangible projects with HTML CSS and JavaScript all while unlocking the potential of AI so nice work we kicked it off with the basics and some simple elements but before we knew it we were building functional interactive projects while learning how to frame effective prompts and debug and refine our code with the help of AI so with the skills and AI know how you've now got under your belt you're well equipped to tackle bigger more complex projects you've come a long way and the exciting part is that this is still just the beginning this course is a living iterative project much like the evolving field of AI itself I'll be adding more sections to the course featuring new more complex projects that will allow you to stretch your newly acquired skills even further so I'd really appreciate sharing your thoughts feedback and suggestions about this course and any ideas for projects you'd like to build in the future sections of this course clicking on this image right here will take you directly to a quick feedback form in the meantime I hope you continue to explore and build with AI so I'll see you back soon and we look forward to checking out your projects happy building hello again brilliant Builders we've spent some time together building wonderful projects and dipping our toes into the world of HTML CSS and JavaScript all with the help of AI but we're just getting started in this section we'll be transforming Next Level project ideas into reality all while keeping the building and learning process fun and interactive remember that the goal is to help you build projects with the magic of AI while not getting lost in the weeds of technicalities so let's take a peek at what's in store for you first you'll build your own version of the classic whack-a-mole game it's called face bomp and it will surely put a smile on everyone's face then you'll build an interactive project slideshow perfect for a personal portfolio website following that we'll put together a personal homepage where you'll showcase all your fantastic AI assisted projects and tell the world a little about yourself and your skills and that's just the beginning we are also diving into building Chrome extensions you'll create a shopping wishlist extension called Snap stash you'll also design and build a Smart Home Mobile interface and even learn how to transform it into a mobile friendly app that users can launch from their devices home screen and to make storing and sharing your projects easier I'll guide you through adding your project s to a platform called GitHub finally to wrap up this section I'll teach you how to use GitHub and netlify together to automate how you deploy your project updates like the previous section of this course you may at times feel like you're in unfamiliar territory and worry that you're not understanding everything that's going on in the code but rest assured that this is intentional as I've mentioned before this course encourages you to stretch beyond your comfort zone diving into code or challenges that might seem Advanced for your current skill set we want you to Dive Right into building cool stuff without going the long way of learning everything from scratch with AI at your side you can quickly get off the ground with plain conversational English and then gradually become more technical as you put together simple apps so let's launch right into this section to continue exploring the power of AI and keep on building before you do take a moment to let your scribo colleagues know that you're starting this section in the today I will Discord Channel click on this image to jump right into the channel every ever heard of or played the game whack-a-mole well we're about to build a version of the game with a personal spin calling it face bump we'll kick off this section by recreating this classic tactile game into a digital experience using HTML CSS and JavaScript so the idea is pretty straightforward instead of moles we're using photos maybe even one of you or your friends and the challenge is to catch and bump the photo every time it appears just like in the classic game the game will even include a timer a score display and images that pop in and out at random and to speed up the process we'll get some help from chat GPT let's kick things off with a prompt here to help create the structure of the game in the prompt I provide a brief description of the game and the type of code I'll need for it I initially want to display the game's title a start button a score display and a timer and the game will display a final message to the player when it ends so I'm requesting a placeholder element for the message and finally keeping with the wack-a-mole style I'd like a game board with six holes where the images will pop in and out of I even provided the image file name which is photo.png all right now I'll copy and paste this prompt into chat gbt and let's see what we get back and here's the HTML for our game so I'll copy the code and paste it into index.html and good it looks like it has all the elements I requested the title start button a score display here I see a timer the message div and the game board with the image slots or holes and all six images point to photo.png which is this image here great all the images are displaying correctly now let's add some style to the game I'll use this next prompt which asks chbt to style the game using a bright blue theme with background gradients and complimentary Three Shades for the game controls and holes and I want the holes to be circular and the photos to have a popping in andout effect I'd also like to place the holes on a grid and Center each item inside its hole all right fingers crossed let's feed this prompt to chat gbt and see if it can work some magic for us okay I'll copy the CSS and paste it into styles.css and I can see that this is already starting to look good so let's go over the CSS here we have some styles that you've likely seen before for the body H1 the button and the score timer and game board elements as well as the holes where the images will pop in and out of now one thing that caught my eye is that it's using CSS grid to lay out the holes in the game board grid is a super powerful CSS layout system for placing items in rows and columns and I see that it's creating three columns here each 150 pixels wide using this repeat function and it's adding a 20 pixel gap between each hole to space them out all right so chat gbt has given us a visually pleasing design for the most part I see the gradient background and a neat grid layout for our image slots so now let's spend some time customizing the design of the game so first up let's liveen up the Page by adding a winking face emoji to the title here in end index.html just like that there we go and I also want to make the button Corners rounded which I can do in styles.css here in the button rule using the Border radius property I'll set it to five pixels and that looks good I also feel like the score needs to stand out so let's make it larger by increasing its font size so here in the score rule I see that the font size is being set using the CSS REM unit which might be new to you rem stands for root M don't worry too much about it it's just a different more flexible and scalable way to set font sizes and other properties with CSS you can bump up the value and set it to two RAM for example and that would look good but we've been using pixel units this whole time so let's just stick with that here I'll set the font size of score to 32 pixels and I also want to update the mark margins for the score so that it has a top and bottom margin of 20 pixels so I'll replace the margin top property with just margin and as you've learned in previous projects with this shorthand the first value sets the top and bottom margin so we'll leave that as 20 pixels and the second value sets the left and right margins which I'll set to zero and while we're here let's also adjust the timer's font size so here in the timer rule I'll set the font size to a value like 24 pixels and let's create more space between the timer and the game board below it so I'll replace margin top with margin bottom 20 pixels a subtle change but this is looking much better to me and if you're curious before we move on I want you to pause me and ask chbt to explain the CSS REM unit in more detail go ahead I'll wait all right so now it looks like we'll need to adjust the images in the game board holes I'll have you make these changes with a challenge here here's what we'll need to do first let's make the game more challenging by making the image Target smaller because currently the images are as wide and as tall as the holes so I want you to resize them to be 55% of the width and height of their hole then you'll notice that the images are initially squared but they need to be circular you've done this before so go ahead and update the CSS to make the images perfectly rounded and here's an important adjustment you'll need to make all the images are currently visible by default but they all need to be initially hidden from view so notice in this CSS rule how this transform property uses a CSS scale function to scale or increase the size of an image inside an active hole to the value 1.1 which is 100% of its size so I want you to think about how you might use this property here in the CSS rule that Styles an image within a whole element to to hide or scale them out of view so go ahead and pause the scrim now and work through this challenge I'll catch up with you soon to go over the solution you've got this all right hopefully you got that so first the images are currently 100% the width and height of their parent whole element so to resize the images to be 55% of the width and height of their hole I'll update the width property to 55% and the height property to 55% and there we go as I mentioned the images are initially squared so to make them perfectly rounded I'll use the Border radius property and set it to the value 50% which does in fact make them perfectly rounded within their hole awesome okay so now how do we set the initial scale of an image to make it invisible for that I'll use the transform property here in the whole image rule and like in here use the scale function to set the initial scale of the image to zero just like that so essentially the base style for the image inside a whole class makes it invisible as you can see here the images are gone but as you'll see later when the whole element also has an active class the image will enlarge smoothly to 110% of its size suggesting some sort of active State for the image which is when a player will be able to whack or face bump it and this transition property adds a smooth transition effect on the transform property so when the scale of the image changes it will animate over a duration of 0.2 seconds and ease in Out means that the animation starts and ends slowly and speeds up in the middle so if you've successfully worked through these steps and came up with a similar solution nice work and now the real fun begins with JavaScript we'll make the images pop in and out from their hole keep track of the score and manage the countdown timer so I'll add a third prompt that instructs chat gbt to implement these desired features with JavaScript to create that whacka effect the images should appear and then disappear into their holes and I want it to happen at random intervals to make the game interesting when a player clicks on an image the player score should increase by one and will create a 30 second countdown timer which starts immediately after clicking the start button then the game should end when the timer reaches zero also when the game ends I want to display a fun and witty message based on the player score and let users easily Play Again by clicking the start button and as always I'd like code comments to help me understand the JavaScript logic all right so here you go chat GPT do your thing and let's see what chat GPT came up with by copying the JavaScript code and pasting it into script.js it looks like this is quite a bit of code so let's have a look at the top I see that it's selecting elements from the HTML like the start button the score display the timer the message display and the holes and then I see some variables holding information like the current score the desired time for the timer whether the game started as well as the current time in the countdown and this function here generates a random time interval to display the images using a desired Min and max value and it looks like the code below is used to display the images in the holes first it makes sure that no holes are active with visible images then it selects holes randomly for the images to pop in and out of and then it applies the active class we looked at earlier in the CSS which is this class here which gives the image the effect that it's popping out of the hole and here I see that the time intervals will be chosen randomly between 500 and, 1500 milliseconds or between half a second and 1.5 seconds and then after the set random time it hides the image by removing the active class here and if the game is still playing or the countdown hasn't hit zero yet it continues the game by displaying the next image again and again until the time gets to zero all right and this function is the logic that starts the game and updates the countdown and current score it also stops the game when the time reaches zero and displays a message below is the event listener that starts the game when the player clicks the start button and then we have another event listener for clicking on the images and increasing the score and finally this function is what's used to return a fun message based on the score so if the score is equal to zero we get this message and players will get a different message if they score less than 10 less than 20 or 20 points or more all right that was a lot of code to go over and I completely understand if a lot of this seems a little bit confusing to you or very confusing for you right now it's totally normal so what I want you to do is pause me right now if you feel like you need to take a moment to ask chat gbt to explain any of the code that you don't quite understand or want to learn more about all right now let's see what we've got by testing the game I'll click Start game and then cool my pesky photo is popping up randomly which can be challenging at times I'll try to get as many face boms as possible after 30 seconds the game is over I scored 12 points so the message I get is you getting good at this cool now I did notice an issue with the countdown timer text here which we'll get to and fix shortly and I also just thought of a cool effect we can apply to the holes on the game board we can make the Shadows appear inside the holes instead of outside to give each hole the appearance of depth the Box Shadow property in CSS is what adds a shadow effect to an element so this property is applying a shadow to each hole and by adding the inset keyword at the start of the Box Shadow value like so effectively creates an inner Shadow which gives each hole an appearance of being indented into the page and it creates a subtle depth effect all right this is looking good and it seems like we're mostly set up with all the game mechanics let's keep it going by adding some enhancements to our face bump game first when a player hovers over an image with their Mouse I want the cursor to change to the usual pointer or hand icon to indicate the image is clickable or interactive we can do that pretty easily in the CSS here in the rule that selects an image that's inside an element with the class hole using the cursor property and setting it to the value pointer and now when we hover over an image we see the pointer as the cursor good all right next just for an Added Touch let's see how we can make the image display a bumped or whack effect when clicked I think applying a bright red border around it might do the trick so I'll ask chat GPT to help me with that using this prompt I'd like it to update the necessary code to apply a red border to an image only when clicked so let's feed this into chat gbt and I get back some new code it looks like we need to modify the event listener for clicking on images using this updated JavaScript code so I'll copy this code snippet then scroll down to the event listener for clicking on images right here and replace this entire code block with the new code so here I see that it adds the class clicked to a clicked image then removes it here after a delay of 300 milliseconds chat GPT also gives me the CSS to apply the red border to an image with the class clicked so I'll copy this code snippet and paste it at the bottom of styles.css I think I'll customize it slightly I'll make the Border thicker by changing it to four pixels and making the color brighter with the value tomato which is my favorite CSS color now let's go ahead and test the latest changes I'll start the game and click on an image to bump it and there we have it a bright red borderer to enhance the player experience a simple yet effective way to add some feedback for the player all right so now how about some JavaScript challenges to enhance the interactivity of the game I'll include the first challenge here just above the function that starts the game so here in the start game function I want you to update the start button to display the text playing when a user clicks it to start the game and remember that you'll need to set the button text back to start game when the game ends so look closely at the code in this function as you'll find some hints on how to do this pause me now and give it a go all right hopefully you were able to make this happen now I'll show you one solution so here in the start game function I see some code being used to set the text content of an element like the score display and the time display I noticed that the start button is being referenced here so to update the start button text when the game starts I can write start button. text content and set it equal to the text playing dot dot dot all right let's try it out when I click the start button yes the text changes to playing good so now we need to change the button text back to start game when the game ends and this is the code that handles the game when the time is up so it seems like I can do something very similar here with start button. text content equals the string start game I'll test it out in fact to speed things up for us I'll change the countdown timer to be 5 Seconds instead of 30 seconds here and let's see I'll click Start game the button text changes to playing and then after 5 Seconds good it Chang changes back to start game next let's work on fixing the countdown timer you've probably noticed that it's repeating the words time left and seconds this shouldn't be too challenging to fix one way to fix this would be to update the time display variable to reference the div with the ID timer instead of only the span element with the ID time so back in the JavaScript we'll say get element by ID timer and then it should initially display time left followed by the time with this line here in fact I'd prefer if we don't display the word seconds so I'll get rid of that Al together and we'll display the same text and time during the countdown here in this line so I'll just make the same change here and let's also remove the word seconds from the HTML all right let's try it out I'll click Start game and there we go the countdown timer is looking much better and I think it would be better if we replace the time entirely with the final message once the countdown hits zero and the game ends so over in the JavaScript let's look for the code that ends the game when the time is up right here and then I can replace message display. textcontent with time display. textcontent equals The Returned message and now I can even delete the HTML for the message here which is the div with the ID message as well as the JavaScript variable for it which is this one here message display Let's test it out I'll click Start game the counter is still at 5 seconds and when the game ends the time is replaced with the message great that looks much better next up no game is complete without cool sound effects so in our final challenge you're going to take this game to the next level by playing a sound effect each time the player whacks or bumps a face photo to gain a point I'll add the steps for this challenge here in script.js you'll notice that I've included some sound files here in the sounds folder so first I want you to embed this bump. wve sound file in the HTML and then you'll update the JavaScript to play the bump. wve sound each time a player clicks on a photo you did something very similar in the previous section of this course where we built the drumkit app so you can reference the code from that project if needed so pause me now and go for it all right hopefully that went well and that you were able to play the bump sound effect now let's go over one way to do it first I'll embed the bump. wve sound file here in index.html as we did in the drumkit project I'll use the audio element for that I'll give this audio element an ID of bump- sound and then I need to set the source to that wave file which is in the sounds folder so I'll say sounds slash bump. wve okay that's good to go if you got this part awesome next one very important step is that I need to select the audio element with the ID BMP sound here in the JavaScript so let me add a section here to indicate that this is where we select audio elements for sounds and then here I'll declare a new variable on name BM sound so I can say document. getet element by ID and specify the ID BMP Das sound all right now I need to head over to the event listener for clicking on images right here and as you've learned this block of code handles everything that happens when a player clicks on a photo like update the score and apply the red border this is where we'll also play the bump sound effect so first I'll reference the bump sound variable then call the current time property on it as we've done before and set it to zero which makes the audio start playing from the beginning and then below bump sound. playay is going to start playing the audio okay let's test it out and it works that is super cool so now how about playing a sound effect when the game ends even better we'll play a different sound based on how the player scored in the sounds folder I have two more sound files game and. wve and game and highwave so let's first embed these in index.html just like the bum sound in fact I'll just copy this audio element here paste the new one below and update the ID to end- sound and the source value to sounds SL gamewave and I'll do the same name for the high score sound update the ID to high- sound and the source to sounds slame and uncore highwave all right now I can select them with JavaScript and assign them to variables so that we can play The Sounds I'll copy this line here paste it below and update the variable name to end sound and this will get the element with the ID and- sound let's do the same for high sound I'll name this variable high sound and have it get the element with the ID high sound we know that the start game function handles all the functionality to start the game and display the score and countdown and we also work with this code block here which ends the game when the time is up or when time is equal to zero so first I'll play the end sound here and I can do that with end sound. playay Okay so let me test this I'll update the time to just 3 seconds and here we go all right excellent that worked so now let's wrap up this epic game project with a challenge I'll add the challenge here in script.js I want you to update this code so that it plays the high sound remember that's this game _ wave file only if the player score is higher than nine otherwise play the regular end sound if the score is nine or less so pause me now and go for it all right hopefully you were able to make this work now let's go over how I might do it so first to play the high sound if the player score is greater than nine I can use a if statement to do that which we've done before so I'll replace n sound. playay with an if statement where we'll say if the value of score is greater than nine play the high sound with high sound. playay and then we'll use the L statement to play the end sound if the score is nine or less with end sound. playay if you figured this part out amazing job you should be super proud all right so now all that is left is to try it out I'll change the timer back to to 30 seconds and let's go for it okay here we go I'll start the game bump some photos oh this is pretty tricky oh it looks like I got the high score all right I scored more than nine points so I got the high score sound which is great now I'll quickly test the n Sound by scoring less than nine points and good our code works perfectly this was just for testing but if you'd like you can update the high score values here so for example in the get message function anything greater than 20 gives you this wow you're a face bomp Champion so let's update the code so that that high score sound plays when the player scores more than 20 points and you can set it to whatever score you'd like also another more concise way you might write this same expression is using javascript's Turner operator like this type score is greater than 20 followed by a question mark and if the score is greater than 20 the high sound will play with high sound. playay then type Aon and if the score is 20 or less we'll play the end sound with end sound. playay and this should work in the same exact way so wonderful you've just built face bump a fun and engaging game using HTML CSS and JavaScript we've covered a lot of ground here so be super super proud of yourself now before we head off to the next project remember that this is your foundation for this game you can expand upon face Bomb by introducing new features it's all up to you and I want you to take that next step by customizing the game and making it your own for example upload your own images for a more personalized experience it can be your photo or your friend's photo I also want you to update the game colors and maybe write some custom messages for when the game ends and don't forget to share your Solution by posting it in the today I did channel so that'll do it for this project amazing work let's keep building all right let's continue by building an interactive image slideshow that displays different project images and descriptions and it will be flexible so that you can add it to a website for example to let you users easily browse through projects you've built or anything you want to showcase and as usual we'll collaborate with chat GPT to make it happen using HTML CSS and JavaScript so get ready to Showcase your projects in style and let's get to it I already included HTML CSS and JavaScript files for the project along with three images for the slideshow which can be found here in the images folder so we'll Dive Right In and prompt chat gbt with our requirements we'll try to get most of the image slideshow built in one shot using this AI prompt The Prompt is quite clear and precise about what I need help with it mentions the kind of project I'm working on which is an interactive slideshow with do navigation and that the slideshow should display images and description for different projects it also mentions the language types HTML CSS and JavaScript followed by the specific functionality that it requires I've structured this prompt by splitting it up into multiple smaller tasks with both bullet points the bullet points in the prompt help provide a clear structure and make it easier for chat GPT to understand our project needs and hopefully generate code for each requirement for example I'm asking it to create a flexible HTML container for each project slide and I want to start by adding three projects to the slider including images headings and descriptions and the headings and descriptions should be overlaid above the images using a partially transparent back ground and then I want to implement a DOT navigation where each dot represents a project and Visually indicates the active slide users should be able to switch between slides using the dot navigation and I want a fade transition between each slide and as usual I'm asking for code comments and explanations to understand the solution better which as you've experienced with other projects is a great learning approach The Prompt seems to provide enough information to build a solution while the details of the images descriptions or Aesthetics like color scheme are not provided they aren't as crucial to create a functional image slideshow these can be easily customized later all right so I'll copy this prompt and paste it into chat gbt and let's see what chat gbt has in store for us okay we get back the HTML CSS and JavaScript code for our image slideshow complete with detailed comments explaining each part's functionality so first I'll copy the HTML code and paste it into index.html then I'll copy the CSS and paste all of it into styles.css and copy the JavaScript code and paste it into script.js all right now let's review the code in index.html we have a div element with the class slider and it wraps all the individual slides which get creat created with divs with the class slide each slide div contains an image and slide content displaying the project name and description and it seems like the sliders do navigation will be dynamically generated using JavaScript so there's a container element for the navigation here at the bottom with the class. navigation when I run the code it looks like we need to update the paths to the image files in our project they're showing up as broken images so why don't you take a moment to fix this here's a challenge I want you to update each image element to correctly point to the image source and remember the images are in this folder named images so pause me now and give that a go all right here we go now I'll update the paths to point to the images stored in my images folder here in an images Source attribute I need to specify the folder name which is images followed by a forward slash before the image name so for example this image element Source points to the project 1. JPEG file now I'll do the same for the other two images all right let's test the slideshow and good it seems like it's working as expected so nice work if you got that now we have a flexible HTML container for each project slide with responsive image resizing The Heading and descriptions fully overlay the images with a partially transparent background and the dot navigation allows us to switch between slides with a smooth fade transition effect so not bad at all on the first try but it looks like we need to make a few adjustments so let's walk through the rest of the code and customize the slideshow to our needs the CSS comments in styles.css help explain what each CSS rule is doing so for instance here it's resetting some default Styles then we have this CSS for the main slider container as well as all the individual slides with the class slide and it looks like this is setting the opacity of an active slide to one so that we can view it and it's styling the image within each slide as well as the content overlay and below are the styles for the dot navigation all right so the first thing I want to do is make sure that the image inside each slide takes up the full width and height of its containing element because notice if I shrink the browser window we see a gap or some empty space between the image and the dot navigation so let's fix this I'll scroll down to where we're styling the image within each slide right here now the image is already set to take up the full width of its containing element here with width set to 100% so to set the image inside each slide to also take up the full height of its containing element I'll update the height property here to 100% so now if it's container div with the class slide is resized the image will resize along with it always trying to fill the entire width and height of the parent slide div so notice that now we're not seeing that Gap below the image but now it seems like the aspect ratio of the image is a bit off notice how it looks distorted here at this width we can adjust that with a CSS property called object fit this property determines how the image should be resized to fit its container and the value cover ensures that the image will scale up or down so that it covers the entire area of its container without stretching or distorting the image notice how it crops the image in a way that preserves its aspect ratio and Central content so now it doesn't look distorted Perfect all right so next I'd like to pin the content area to the bottom of the slide that way it doesn't fully overlay the image so here in the slide content rule I'll change this top property set to zero to bottom zero and then remove the height set to 100% as well as this left position property set to zero all right that looks much better now we can see more of our project images I also think that the content background should be slightly less transparent so here I see where a semi-transparent background is being set so I'll update this alpha or transparency value here in the rgba color function to 75% by sending it to 75 and that looks much better to me now let's adjust the project name with CSS we'll increase the font size and add more visual space between the project name and description so at the top of styles.css I'll create a new rule that Target gets the H2 element on the page which remember is the project name in each slide and here I'll update the font size using the CSS font size property and set it to a larger value such as 26 pixels and to create that extra space I'll use a margin bottom property and set it to 12 pixels let's check it out and I think that looks much better all right now let's have a look at the JavaScript the comments are super helpful full in explaining each code block so here at the top I see that it's getting the required elements such as the slide Dives and the dot navigation container and this line of code initially sets the first slide and Dot as active and then we have the code to generate the dot navigation based on the number of slides so that's actually really cool because as we add more and more of these Slide divs the JavaScript is going to dynamically generate more dots for the navigation and it looks like this function here handles navigating to a specific Slide by first removing the active class from all slides and dots and then adding the active class to the selected slide and Dot now everything in the slideshow seems to be working great but I think it would be really neat and useful if the slideshow played automatically so let's ask chat gbt to implement an autoplay feature that automatically switches to the next slide every 5 Seconds I'll use this prompt here which says says please update the JavaScript code to automatically switch to the next slide every 5 Seconds I'll feed this prompt into chat gbt and let's see okay we get back new code for our Javascript file so what I'll do is copy all of this code and replace everything in script.js with the updated code just to be sure that I don't miss anything all right so let's check it out it looks like we have two new variables declared at the top current slide which is an initialized to zero and slide interval and now the navigate to slide function automatically Fades to the next slide every 5 Seconds this JavaScript line here uses the set interval function which is a built-in method in JavaScript that's used to execute a specific function or code snipp it repeatedly at fixed time intervals so in this case it calls the next slide function to navigate to the next slide every 500 m seconds which is equivalent to 5 Seconds awesome then here at the very bottom this line initially autop plays the slideshow when the page loads all right so let's test it out I'll run my code and excellent the slideshow plays by itself and then every 5 Seconds it updates to show the next slide perfect so fantastic you've created an impressive image slideshow you can use for your personal portfolio website and remember it doesn't end here I want you to customize iiz and enhance a slideshow to suit your personal style and project needs and make it truly your own so I'm going to leave you with a challenge here I want you to add more projects custom images descriptions and add links to your live projects I'll kick off the first slide here in the HTML by setting the project name to website hero and updating the description here in the paragraph element and I want you to keep this project handy because you're going to use it later in a bigger project so stay tuned and as always take a moment to ask chat gbt to explain any of the code that you don't quite understand or want to learn more about great work let's move on you are going to build your very own personal homepage where you'll introduce yourself to the world exhibit your skills and display your projects imagine a digital business card but more Dynamic and personal and the best part is that you will Implement and feature the project slideshow you built earlier on your homepage so let's get to it we'll kick it off by discussing the project with chat gbt and instructing it on our intentions to ensure we're on the same page then we'll follow it with a series of prompts for each section of the page this first prompt asks chat GPT for guidance in building a personal homepage using HTML and CSS it's a sort of broad level brief to give chat GPT a sense of the Project's nature and I also let it know that I'll only request specific code Snippets as we progress so there's no need to provide code until I explicitly ask for it and with this prompt chubbt should be ready to start so I'll copy and paste this prompt into chat gbt and good it looks like chat gbt is primed and ready to go so now let's ask it to provide a basic HTML structure with this prompt I'm giving chat gbt a road map for our hom Pages layout and overall the main building blocks of our page I'm asking it to help me design a basic struct structure for a personal homepage and that it should have the following sections a header a section for display my projects an about section and a section for displaying my skills as well as a footer and I wanted to add these sections as placeholders for now as we'll be coding them and filling them out step by step I'll feed this prompt to chat gbt and let it do its thing I get back some HTML so I'll copy this code and paste it into index.html and let's have a look it looks like the HTML structure is a big basic layout with placeholders for different sections like the header projects about skills and the footer just as requested great so now let's request the code for our page header in navigation with this prompt I want chat TBT to code an HTML header displaying my name Gil H and navigation links for the sections projects about and skills and I get back new HTML where it looks like the header section was updated so I'll copy the header element and replace the existing header element with the new code I see that the main heading or H1 was updated to display my name and then we have a nav element holding an unordered list which contains all the page links as list items I'll check out the latest code and see that so far everything is looking great next let's guide chat gbt to create the HTML for our about section this section should briefly in ruce who you are and some of your achievements by linking to a resume for example so I wanted to guide me to create the HTML for the about section it should include my picture a friendly introduction and a link to my resume so let's see what chat gbt can do with this prompt in the provided HTML code I do see that the about section was updated with the requested content fantastic I'll copy this new section and replace the section here in index.html with the new code code the about content contains an image element and it looks like I need to update the source attribute here to display my image which is located in the images folder and it's named photo. jpeg so here in the source attribute I'll change the path to images SL photo. JPEG and I'll update the alt attribute to gills picture and in the paragraphs below I see a friendly introduction about me as well as the placeholder link for for my resume which I'll leave as is for now all right let's keep going by asking chbt to develop the HTML for our skill section this area is where we might showcase our expertise and proficiency levels in specific topics for now we'll just list HTML CSS and JavaScript but you can update it to whatever you'd like the prompt says now let's code the HTML for my skill section and as mentioned we'll start with the skills HTML CSS and JavaScript and each skill should have a name and a description and I also want to display a progress bar representing my proficiency in each skill so let's see what magic chat gbt can cook up with this prompt all right I get back some new HTML and yes it looks like the skills section was updated with the requested skills so I'll copy just the skill section from the new code then paste it in index.html over the existing skill section so in our skill section we have the skills HTML CSS and JavaScript each has a short description about each skill as well as a progress bar to give us a visual representation of each strength and what's cool is that you'll be able to adjust the percentages by updating the width values in each of these style attributes all right let's keep it going by coding our footer the footer is going to tie everything together and provide a space for additional links with this prompt I'm instructing chat gbt to create the HTML for the page footer and that it should contain copyright information and links to my LinkedIn Twitter and Instagram profiles and to make the footer more interesting I want to use icon fonts to display a social media icon for each link I'll feed this prompt to chat gbt and let's see what we get good we get the updated HTML for the page footer and it looks like I first need to include the icon font Library which in this case is font awesome so I'll copy this link element and add it to the head section of my page just like that then and I'll grab the new footer code and add that to my page the footer contains all the essential information I requested providing links to LinkedIn Twitter and Instagram and below the copyright information let's have a look at it in the browser and good we see the icon fonts being displayed for each link which makes it easier for visitors to recognize the links I'll update this to Gil H and moving on it's time to add some style to our web page let's request CSS from chat gbt using this prompt so I wanted to design a simple modern CSS layout for my homepage I want a responsive layout that adjusts to different screen sizes using CSS media queries for the design I prefer a black and white color scheme and sansera fonts and I give it Specific Instructions to make my picture smaller and rounded and to add generous line height in visual space around the content so that it doesn't appear too cramped so I'll feed this to chat gbt and see what it returns all right I get back to New CSS so I'll copy the code and paste it into styles.css fingers crossed hopefully this looks good all right and look how our page has transformed not too bad it provides a responsive design which ensures a userfriendly experience regardless of the device used and the chosen color scheme and font give a modern professional feel and the skill section looks fantastic with the style progress bars with our site content elements in place our page is taking shape so now let's spend some time customizing the CSS so first I want to increase the font size of the titles or H2 elements for each of the sections and Center them on the page so inst styles.css I'll create a new rule that targets all the H2 elements and here I'll increase their font size to 30 pixels and align them center with text align Center and that's looking better now I want to apply a generous margin between the heading and the content below it I can do that with the margin bottom property and let's say 20 pixels okay that's looking better the next thing I want to do is add some space between the paragraphs because notice how these two paragraphs are looking pretty cramped and I also want to open up the space between the skills description and the progress bar so back in the CSS I'll select the paragraph graphs or P tags and again with the margin bottom property increase the margins to 16 pixels and that looks much better to me looking through the CSS I see that the about section has a padding value of 40 pixels and it seems like it doesn't need to be that big so for now I'll just go ahead and get rid of this padding property and keeping with that change it seems like the skill section also has a padding value of 40 pixels which I don't think we need for now so I'll also get rid of this skills rule here but what I can do now is create some more space between each of the sections all at once in one CSS rule remember the main sections are contained within the section elements so I can Target the sections with CSS and then set their top and bottom margin value to 30 pixels and the left and right margins to zero and that applies consistent spacing across all the sections looking good another change I'll make in the header navigation is style the hover state of the links to give the user a visual indication that the link is being hovered remember we can do that using the hover pseudo class as we've done in previous projects so here in the CSS styles for the header links I can follow a similar pattern used here to style the navigation links on Hover with nav Li a colon hover in fact I can write it just like this without the Li and it will do the same thing when a user hovers over a link I want to display an underline link so I'll set the text decoration to underline and there we go our hover state is all set all right now comes your big challenge for this project and that is implementing the project slideshow after you built the slideshow project I mentioned to keep your project slideshow handy because you were going to use it on a larger project and now is that time I want you to add add your project slideshow to the homepage first you'll place the slideshows HTML here in the project section then add the slideshow CSS to the file slideshow. CSS and paste the JavaScript into script.js I've also included some images you can use here in the images folder but customize the code as needed to fit your slideshow so take your time with this and I'll catch you in the next scrim to go over it together you've got this all right this was a pretty big challenge so hopefully you were able to implement the project slideshow in your web page I'll bring in my project slideshow by first pasting the HTML to my slideshow here in the project section I'll replace this placeholder with my code notice how I've included the div with a class slider as well as the dot navigation next I'll paste my slideshow CSS in slideshow. CSS and bring all of my slideshows JavaScript into script.js hopefully you realize that you need to link your index.html file to slideshow. CSS so let's do that I'll copy one of these link elements in the head section of my page and update it so that it points to the file slideshow. CSS now we don't see our slideshow yet and that's because we need to point to script.js here at the bottom of our HTML file so just about the closing body tag I'll add script tags with a source attribute that points to the file script.js all right and now the slideshow is displaying on the web page perfect if you got this far into the challenge outstanding now let's spend a little time customizing the slideshows HTML and CSS so that it fits our web page better notice how the project titles are currently using H2 tags but looking at the site structure it appears that they would work better as third level or H3 headings this would improve the overall hierarchy and accessibility of the page so we'll switch the H2 tags to H3 tags this small change does make a difference in our content structure let's have a look at the slideshow CSS at the top it's using the universal selector or the asterisk and CSS which targets every element on the web page and it's setting its margin and padding to zero I don't think we need that in this file since styles.css is already handling some of this for us so I'll remove the margin and padding properties from this rule but I'll keep box sizing border box because the Box sizing property controls how the width and height of elements get calculated you see by default any extra padding or borders you add to an element will make it wider or taller than you might expect and it can throw off your layout so with box sizing set to border box any padding or border given to an element automatically gets included in the elements dimensions and it likely won't cause any strange or quirky behavior in your layouts so I'll keep this in now how about we round the borders of the slider using the Border radius property here in the slider rule 8 pixels sounds good to me we don't quite see the Border radius yet but we'll make some adjustments later which will make the slideshow appear much better on our page and now that we've updated our project titles to H3 elements let's style those here and slide show. CSS now we could Target all the H3 elements like this but since this CSS is specific to the slider we don't want it to override any potential Styles we write for the H3 in the styles.css file so what we can do is Select only the H3 elements that are in the div with the class slider with do slider a space followed by the H3 selector and let's increase the font size of the project titles in the slider to 24 pixels I am noticing a bit of an extra Gap below the slideshow description displayed by the paragraph It's a bit nitpicky but we could remove the space by setting the margin of the P tag and the slider class to zero so I'll say slider P margin zero and good the space is gone and I like how that looks all right we are almost to the finish line now let's add what are referred to as containers to our site for better content structure containers will help give our sections a more uniform and censured look across different devices containers are also common across all Web projects for various reasons we'll use them to control the layout of content on the page particularly control the width alignment and positioning of our sections because notice how they're currently looking too wide stretching from one edge of the browser to the other so we can control the widths and improve the overall design of the page with containers and I'll have you implement the container ERS with a challenge which I'll paste here in prompts MD you'll interact with cat gbt by asking it to provide the code for creating containers for your site's content and I'll give you this prompt to help kick things off so what you'll need to do is head over to chat gbt and open a new chat then provide it with this prompt now chat GPT doesn't really need to know the full context of your project this HTML code snippet should be enough to give it the necessary information to provide you an example and CS says code snippet for adding containers around your project so you'll need to add the suggested CSS to the project and then update the HTML structure with containers for the projects about and skill sections only so go ahead and pause me now ask chbt and then add the new HTML and CSS to the project all right hopefully that went well now let's go over adding containers to the site together I'll start by copying this prompt and pasting it into chat gvt you may have gotten a different output but I see that I can create a container by defining the container class in my CSS and applying it to the appropriate section of my HTML code first I'll copy this container snippet and paste it into styles.css then it looks like I need to add the container class in the div with a class about content so I'll scroll down to my about section and here in the class attribute add the class container and make sure that both classes are separated by a space just like that looking at the container class the max width property applies a maximum width to the container and margin zero Auto Center aligns the container horizontally and then we're adding some padding for spacing I think a max withth value of 1200 pixels is too wide so I'll set it to a smaller value like 750 pixels and since we're applying 30 pixels of top and bottom margins to each section we don't need to add padding for spacing it's it's all being taken care of I'll check out the about section in the browser and notice that when I expand the browser the content does not get any wider than 750 pixels and I usually like to give containers a fluid width using a percentage value and this will really help with narrow screen sizes and small devices so now the container should keep the content at 90% the width of its parent and I like how that looks so let's move on and add containers to the skill section and our slideshow so first in the slider section we can do something similar here in this class attribute by including the container class and good notice how our slider is no longer taking up the full width of the page it now has width const strengths so it doesn't get any wider than 750 pixels but then it adjusts as needed when the browser resizes to a narrower size perfect finally let's take care of the the skill section for this we'll do something slightly different currently within the skill section there's no element that wraps all of the skills content so we'll need to create that with a div so inside the section at a div and give it the class container just like the other elements and this container div is going to wrap all of the skills content so just above the closing section tag I'll add a closing div tag then make sure to indent the content inside it and good wrapping the skills content within a container ensures that the content is horizontally centered and now it's consistent with all the other sections if you were able to add the containers to the web page and make it look similar to this fantastic job so finally now that we have all of our containers in place we can make the page more visually interesting for example let's make the about section Stand Out On the Page by applying a background color that stretches from one side of the browser to the other we'll do that in styles.css here in the about rule first I'll open up the space in the about element by applying 20 pixels of top and bottom padding and then we'll give it a background color using the background color property we'll set the background color to light gray using the value pound eded D Ed D and great that's exactly what I wanted notice how it adds a nice visual touch to the page and helps break up the content and it looks like I have some extra unnecessary CSS for the about section down here in the media query so I can delete this entire CSS rule since we're handling the padding for it and the base Styles all right fantastic our personal homepage is now complete it's quite amazing to see how working with an AI tool like chat gbt can turn a concept into a functioning web page now as a final challenge for you I want you to make this web page yours for example update the content and images and add a custom color scheme remember this is your personal web page so spend some time customizing it so that it reflects more of who you are and be sure to share your solution with the scrimba community in fact you can click on this image right here to head over to the today I did Discord Channel and share the link to your web page so again outstanding job and I'll see you back soon to build more cool projects we are taking a significant step forward by introducing you to get Hub where coders and Builders store and share their projects GitHub is like a library but for code that can be either public or private it serves as a platform for what we call Version Control allowing you to save your work at different stages and even roll back to a previous stage if needed and the best part is that it lets developers work together on the same project so whether you're working alone or as a team GitHub will be part of your building workflow we are going to take the personal homepage project you've built and put it up on GitHub setting up a GitHub account is pretty straightforward if you haven't already go to github.com or click right on this image to go there click the sign up button in the top right then enter your details and create a username for your account once you verify your email address you're all set all right so first to transfer your project from a scrim to a GitHub repository you'll need to download the code from the scrim onto your computer similar to how you did in the previous section of this course click on the gear icon in the bottom right corner of your scram then click download as zip and that's going to download a zip file to your computer unzip the file and you'll see your project files inside a folder now in the folder you might see some new unfamiliar files like package.json and another named V config.js go ahead and delete those files because you're not going to need them and I also suggest renaming your project folder to help you keep track of it and now you're ready to upload your project to GitHub the GitHub interface is quite userfriendly with your repositories easily accessible from the homepage so now let's create a GitHub repository often referred to as a repo a repo is like a project folder where all the files related to a particular project are stored to create a new repository click on the new button in the top right give your new repo a name like personal homepage then give it an optional description it's up to you whether to make it public or private and when you download a scrim it includes a readme file so in this case I won't initialize the repository with a readme file a readme.md file provides essential information about your project it typically includes a brief description of the project and instructions on how to use or contribute to it so I'll leave this unchecked then click create repository to finalize my settings after creating your new repository GitHub takes you to its quick setup page providing you instructions for adding files to your repository using various methods the drag and drop feature is best suited for those just getting started with GitHub and for small projects like this one so that's what we'll use click the link for uploading an existing file then open the folder on your computer that contains your project files select all the files you want to upload to your repository then drag those files and drop them onto the designated area that says drag files here to add them to your repository once the files are added you'll see a preview of the new files below okay after upload loing your file scroll down to the commit changes section here you can optionally add a brief description of the changes you made for example initial commit then click commit changes and this will commit the files to the repository on What's called the main branch and from here you might update your readme file for example by clicking this edit icon then you can set the main heading to my personal homepage with a short description below and remove certain parts not specific to this project and then commit the latest changes to the to the readme file and then from here if you make changes to your project and want to update the version on GitHub to ensure your repo is updated with the most recent version of your project simply click on the repo's add files button and choose upload files and just like earlier you can drag and drop the updated files here and GitHub will recognize these as changes to existing files and update them accordingly and there you have it your files up on GitHub now keep in mind that what we've just gone through is the simplest way to use GitHub in real world projects developers often use git a command line tool for more granular control over versioning and collaboration but you don't need to really worry about that right now however there are various courses and lessons on scrimba that you can review to learn more about working with GitHub for example this section here on setting up a local Dev environment and working with GitHub is a good place to start click on this image if you're curious about it and want to learn more but for now congrats you've successfully pushed your first project to GitHub we're going to blend technology and lifestyle to build a Smart Home Mobile interface that allows users to control various aspects of their smart home such as lighting temperature and even their favorite tunes and we'll do our best to give it a sleek and modern aesthetic touch and naturally chubbt will help us throughout this journey so let's Jump Right In this time we'll use several prompts to describe specific elements and functionalities we want in our interface instead of overwhelming chat GPT with a single complex request we'll ask it to help us incrementally hopefully that will make problem solving easier by breaking down complex tasks into manageable chunks and as Builders this approach allows us to clarify iterate and get more precise responses with each step so I'll kick things off with this prompt I'm letting chat gbt know that it's building a Smart Home Mobile interface using HTML CSS and JavaScript and that the interface should allow users to control various aspects of their smart home such as lighting temperature and music preferences to start I only wanted to create the HTML structure for the smart home interface I'd like it to include a header with the title and three main sections for lighting temperature and music and that each section should include buttons to control lighting temperature and music based on user preferences so let's see how chat gbt tackles this task all right it looks like chat gbt has given us some pretty fantastic HTML to work with now I'll start implementing the provided code by copying this code and pasting it into index.html in the HTML there's a header element containing the title and below a main element which holds three sections one for the lighting control another for the temperature control and a third section for the music Control good next to enhance the interface design and make it more in intive I want to use icon fonts to display light temperature and music icons next to each section heading and for the corresponding buttons I'll ask chat GPT to provide those using this prompt I'm saying hey chat GPT use icon fonts to display light temperature and music icons next to each section heading and for the corresponding buttons so I'll feed this prompt to chat gbt and let's see what we get it looks like it first provides a link to the font awesome Library so I'll copy it then paste it in the head section of index.html right here and then below it says that I need to modify the section headings and the buttons in the main section to include the icons so I'll copy this entire main snippet then replace my main element with the new code okay let's have a look and great now we see the icons display next to each heading as well as in the button controls now I think it's it's best to remove any unnecessary or redundant text in the user interface for example the word control in lighting control as well as the temperature and music Control sections also the word temperature in the increase and decrease buttons and I'll update the music control buttons to display only the text play pause and next and overall I think this looks much cleaner oh okay with the HTML and icon fonts in place let's apply CSS styles to the page with this third prompt I'll ask chat gbt to apply CSS styles to achieve a mobile friendly layout with a dark and Sleek design and then to use soft gradients shadows and the provided colors here for the backgrounds buttons and other elements hopefully chubbt can create an aesthetically pleasing design with the colors I provided so I'll feed this prompt to chachu BT and I get back the Cs CSS which I'll copy and paste into styles.css awesome I think chat GPT did a pretty good job on the first try so it seems like the smart home interface is really starting to take shape but there are a few minor adjustments we can make to improve the layout and I want you to work on those with a CSS challenge I'd like you to work on UI adjustments by first center aligning the content inside each section and adding more space around the content so that it looks more like this I'd also like you to adjust the space between the buttons notice how there's no space between the buttons when they each appear on their own line so you'll need to fix this in the challenge so pause me now work through these steps and I'll catch you soon to go over it together all right hopefully that wasn't too bad first I'll Center align the content inside each section using the text align property here and the section Rule and setting it to the Value Center and to add more spacing around the content in each section I'll increase the padding value currently it's 15 pixels but I'll set it to a larger value such as 20 pixels next to adjust the space between the buttons I'll update the margin property here in the button rule currently there's only a 10 pixel margin applied to the right side of each button but I like to apply margin on all four sides of the button to prevent them from looking like this when each button is on its own line so what I'll do is replace margin right with the margin shorthand then apply a five pixel margin to all four sides of the button and that creates the spacing I'm looking for between the buttons much better now this media query at the bottom applies styles to the main section and button elements only when the browser or device is 600 pixels or narrower I'll keep the main rule here but I'm good with the base padding of 20 pixels applied to each section and the base margins we just set to space out the buttons so I'll remove these two CSS rules from the media query if you got the control sections in your interface to look close to this nice work next up I'd like to enhance the lighting control by implementing a toggle switch instead of a button this will give our interface a more seamless and intuitive control mechanism so I'll use this fourth prompt to ask chat GPT to update the HTML and CSS to implement a toggle switch for the lighting control instead of a button and I want it to keep the switch color consistent with the rest of the interface so I'll pass the prompt on to chat GPT and I see it suggest that I replace the lighting control button with this label element so I'll copy this snippet and make the changes in my my lighting control section in this case this label element is being used to create a custom toggle switch using a checkbox an input element with a type of checkbox means it will display as a checkbox as you can see here in the lighting control section with the provided CSS we can make the checkbox and this span element with the class slider look like a toggle switch so here we have new CSS that selects the class switch as well as the input element and the span with the class slider so I'll copy this code snippet and add it to styles.css just above the media query all right perfect this creates the desired appearance of a toggle switch and notice how the toggle animation smoothly transitions the background and the position of the toggle Circle I see that's being done with this CSS here which apply CSS to the toggle switch slider only when a user clicks on it or when the checkbox is in a checked state it updates the background color and transforms its position using this special CSS translate X function this is what actually makes it move 26 pixels on the xais or from left to right so as you can see CSS is pretty awesome to be able to create effects like this right in your browser now it does look like we need to make the toggle switch wider for users here in the switch class I see that the width is currently set to 60 pixels so let's try making it twice as wide by updating the width value to 120 pixels and that looks really good now we need to adjust the position of the slider Circle when toggled on again that's being controlled here with the translate function it's set to 26 pixels so let's try doubling the value to 52 pixels and that doesn't quite work we need to increase it by a little bit more more let's say 70 pixels we're almost there I'll try the value 85 pixels and yes that looks perfect all right so when the lights are toggled on the toggle switch's background should match the bright pink background of the buttons when hovered to better indicate an on state that's a quick change what I'll do is swap the background color of this slider class with the background color of the input or toggle switch when it's checked so I'll just cut this background color property out of this rule then paste it in the slider Rule and bring the initial background color property down to the input checked Rule and that should do it okay so when the lights are off the background color of the toggle switch matches the purple of the buttons and then when we turn the lights on it switches to the bright pink perfect next up I'd like to enhance the interactivity by adding a subtle glow effect behind a pressed or clicked button to provide visual feedback to the user I'm not feeling the bright orange background color that's applied to a button when clicked and I want you to work on that with this challenge you going to write your very own short prompt for chat gbt to provide the CSS for adding a soft glow effect behind a pressed or clicked button in the prompt I also recommend providing chat gbt with the CSS for your buttons so that it can more closely match its Aesthetics so pause me now write your prompt here and I'll meet you back soon to go over it together hey how it go hopefully you were able to write a prompt that successfully created the glow effect for pressed or clicked buttons I'll add my prompt here which says add a soft glow effect behind a pressed or clicked button remember I suggested providing chat gbt with the CSS for your buttons so I'll say here is the CSS for my button then paste the base styles for the button as well as the hover State Styles and I'll follow this up by saying that the glow should match the bright pink background of a hovered button chat gbt is pretty smart so it should be able to figure it out I'll copy and paste this into chat GPT and let's see it says that to add a soft glow effect behind a pressed or clicked button I can modify the CSS as follows it seems like the only thing I need to do is copy this box shadow property and add it to my button active CSS rule I'll test it out by clicking one of the buttons such as increase and cool I do see a soft pink glow behind the button although I'd like to make it stand out more so I'll adjust this Alpha transparency value to 80% by switching it to8 and that does look a little bit better now I do want to remove this orange background color when a button is clicked or pressed PR which is called the active state so I can do that by removing this background color property also to remove the default browser outline for a button in its active State we can use the outline property and set it to the value none now keep in mind that when removing the default outline for active buttons you should ensure there's some other clear visual indication when the button is clicked especially for accessibility reasons now we've added the background glow effect so I think it's safe to remove it and perfect the soft glow behind the buttons when clicked adds a nice visual touch to the interface next let's tackle temperature control here in the temperature section we'll update the code to display the temperature above the buttons initially at a comfortable 78° Fahrenheit allowing users to increase or decrease it by clicking the corresponding buttons this time I'll say hey chat PT please update the necessary code to to display the temperature at 78° F initially and to allow users to increase or decrease the temperature by clicking the corresponding buttons and I want it to style the temperature display accordingly with CSS so here you go chat GPT do your thing so I get back some HTML for updating the temperature control section it looks like I need to add this div with the class temperature display so I'll copy that and paste it just above my temperature control buttons I'll copy the CSS code to style the temperature display and add it to style.css and we get the JavaScript for the temperature control functionality I'll copy the code and paste it in script.js so here it's getting the temperature display element then setting the initial temperature value to 78 as requested it looks like this function updates the temperature display and this event handler increases the temperature when the increase button is clicked and this one decreases is the temperature value when the decrease button is clicked and then it's calling the update temperature display function here to initialize the temperature display on the page Let's test it out all right there's our temperature initially set to 78° fahr I'll click increase and good each time I click it the temperature increases by one and when I click decrease the temperature decreases by one the only thing I want to do is adjust the spacing around the temperature display and I can do that with margins here in the temperature display rule I see that there's only a top margin of 10 pixels but I can update this by changing it to margin 10 pixels top and bottom and then zero pixels left and right and that should do it yep finally let's work on the music Control section by implementing the play pause stop and next button functionality now we're not going to actually play music but we can simulate play music by displaying a random song name when the play button is clicked then clearing the song name when a stop button is clicked and clicking the next button will change the song to another random song as usual I'll ask chat GPT to provide the code for me with this prompt I'm asking it to update the code to implement the music Control section with play pause stop and next button functionality it should display a random funny song name when the play button is clicked and to make sure that the song changes when a user clicks the next button and it should Style the song text with CSS I'll copy and paste this into TBT and I get back the updated HTML code for the music Control section it looks like I need to add this div with a class song name then replace the play button and the stop button so I'll just go ahead and copy these elements here and make the necessary updates in the music Control section there we go I see the song name and then the play stop and next buttons now for the CSS I'll copy this new CSS code to style the div with a class song name and paste it in into style.css the text is slightly larger but it looks like I need to add similar spacing around the song text so just like with the temperature display I'll change margin top to margin 10 pixels top and bottom 0er pixels left and right all right that looks good and now the JavaScript I have new JavaScript code to handle the music control and random song names so I'll copy this JavaScript snippet and add it to script.js at the very top let's say below the temperature variable this line gets the song name display element and here we have our list of funny song names stored as string inside the funny song names array we have an is playing variable initialized to false and looks like it's tracking the current song index which is set to zero initially and this event listener here handles the play pause button when clicked if it's clicked while the song is playing it changes the play button to display pause otherwise it it changes the button to display play this event listener handles the stop button and then this one handles the next button by displaying a random song name and it seems like this function here is what's used to get a random song name all right let's test it out in the music Control section I'll click the play button and I see that the button text and icon switches to pause and I see a random song name Funky Chicken Dance nice when I click the stop button the song resets and the pause button switches back to play and clicking play displays another random song name and then clicking the next button switches the song names so it looks like the JavaScript functionality works perfectly so there isn't much work or customization left for us except for giving our smart home app a cooler name of course I'm not quite feeling the name smart home control in fact I'll even ask chat GPT for some name suggestions using this prompt help me name this smart home interface project Pro by suggesting clever product names so let's see what names we get back all right here I see names such as home Harmony domach Eco EAS Casa conductor and a few others out of these I'm liking the name home Harmony so I'll choose that one I'll update the title here to home Harmony and there we have it all right so that wraps up building our Smart Home Mobile interface with the help of chaty BT and as us ual I want you to customize this project and make it truly your own experiment with different colors and add additional features or sections like security water sprinkling or Appliance controls for example you can use the existing code and chat gbt to help guide you through it you might even try to rebuild the smart home interface all on your own using similar props and be sure to share your solution in the scrimba discords today I did channel so be super proud of all you've built so far and let's keep moving we are taking our Smart Home Mobile interface project to the next level by learning how to transform it into a truly mobile friendly app that users can install on their devices and conveniently launch from their home screen there are various ways we can achieve this but as usual I'll turn to chat GPT for some guidance on how to do this using this prompt I'm asking it to guide me through the necessary steps to make the smart home interface more mobile friendly by allowing users to add it to their devic's home screen for easy access I'm just picking up where the chat left off during the development of the smart home interface project so I'll paste The Prompt here and let's see what chat gbt suggests it looks like chat gbt provided some insightful instructions it says that we can achieve this by creating what's called a progressive web app or pwa in short a progressive web app is a web application that can deliver an applike experience to users by adding or installing it on the user's device without needing to go through an app store we're going to create a simple version of a progressive web app then below is a step-by-step guide on how to make the smart home interface mobile friendly and installable the first step is to ensure mobile responsiveness we built our interface to adapt and look good on various screen sizes and orientations in fact this metatag included in the head of the page make sure that the layout scales to fit the size of the device it's viewed on so we're all set there then it mentions that we need to add something called a web app manifest that sounds intense the purpose of this file is to include essential information about the app and how it should appear and work on a user's device and chat GPT gives us all the code we need to create it so I'll create a new file in my project and name it manifest.json then copy the provided code and paste it in my new file this code you see here is called Json which stands for JavaScript object notation and you might realize that it's very similar to JavaScript objects in terms of structure and syntax both Json and JavaScript objects share similar key value pair structures this Json code holds various properties to Define essential details like the app's name the start URL where it should open the display mode to determine how it appears on the device and the icons to display on the home screen so first I'll update the name and short name values to the name of my app which is called home Harmony now when a user decides to add your app to their home screen the device needs an icon to represent your app so the icons array lists the images that will appear on the home screen help users recognize our app at a glance and you'll often have a list of various icon sizes and formats ensuring the icon looks crisp and clear on different devices in this case we only have two listed one icon is one 92x 192 pixels which is a common size for many Android devices and the other is 512x 512 pixels which can be used for larger displays or higher resolution screens you don't need to worry about creating the icons because I've provided the two icons as PNG files in the icons folder this is what the home screen icon looks like I used a design tool called figma to create it if you're curious so now I just need to update the source values to point to my images I'll update the first one to icons SL ion-1 192x 192 and the Second Source to icons for/ i-512 by 512 in the web app manifest file the start URL property specifies the URL where the app should start or open I'll set the value to a forward slash which typically represents the root or homepage of the app and the display property determines how the app should be displayed on a user's device setting the value to Standalone makes it appear and function like a standalone app without the browser's typical UI elements like the address bar or UI buttons which provides a more immersive and app-like experience the background color property defines a placeholder background color for the app to display immediately before the stylesheet loads in this case it's already set to the same dark purple color as the body background good now the theme color property sets the default theme color for various UI elements in the app like the title bar or toolbar let's set it to the lighter shade of purple used in the background gradients for each section and that should be it for the Manifest this file plays a significant role in giving our app the mobile app capabilities you can think of it as a blueprint that tells the device how our mobile app should behave and appear and chbt reminds us that we need to link our HTML file to the Manifest using this link tag so I'll copy it and paste it inside the head element this is what will let the browser know that the web app can be installed and displayed like a mobile app chat GPT also suggests some optional steps that we're not going to worry about for this project but you should test your app on various mobile devices and browsers to ensure that it looks and behaves as expected all right so here comes the part we've been waiting for to install the app on your device and launch it from a user's home screen you'll first need to deploy it or put it live on the web using a tool like netlify just like you learned in the previous section of this course if you need a refresher on how to do that click on this image to review the scrim on deploying and sharing your projects once your project is live on the web visit the live link on your phone or tablet for example most mobile browsers offer a manual way to add your web application to the devic's home screen for example in Safari on iOS you add your web app to your home screen by tapping the share button at the bottom of the browser browser then select add to home screen here you can see the home screen icon and you're able to customize the name if desired then tap add and that should add the app's name and icon to your home screen and clicking on the icon launches the app notice the purple colored toolbar at the top which we set with the theme color property here in the Manifest file and now you can start interacting with the smart home interface on your device so congrats this was a huge step in your building Journey you've successfully transformed your web app into a mobile app experience so give yourself a round of applause and be sure to share the link to your deployed project with friends and colleagues to show off what you've built this is a big step because now you are going to build a Chrome extension what is that well a Chrome extension is a small piece of software that enhances the browsing experience within the Chrome browser it often helps users be more efficient by tailoring Chrome's function fun ality towards individual needs and preferences these extensions range from simple tools like ad blockers note taking and password managers to more complex applications such as productivity boosters and project management if you visit the Chrome web store you can check out all the different types of Chrome extensions now building a Chrome extension might sound a little intimidating but worry not we're going to demystify the process together step by step with chubbt before we dive in let's review what we're building snap stash is a shopping wish list Chrome extension this extension will let users save the URL of their current browser tab to a shopping wish list the shopping list will display the saved items according to various categories such as pets books electronics and more and the best part is that the saved items persist even after closing or refreshing the browser and we'll use HTML CSS and JavaScript to build it once again we're building our extension incrementally by breaking down our tasks into several AI prompts and here is our first prompt it's designed to give chat gbt an overview of what we're trying to build a shopping list Chrome extension that uses HTML CSS and JavaScript that should let users save the URL of the current browser Tab and when a user opens the Chrome extension on a page with an item they like they should be able to select a category and then click a save button to add the tabs URL to a list displayed below and the list should display each item's link next to the selected category in this case the categories to select should be books clothes shoes Electronics pets and health so first I wanted to suggest a stepbystep guide to help me get started so let's see what chbt can do with this prompt okay it instructs us to create various files manifest.json pop up. HTML popup.js and popup.js manifest.json is at the heart of all Chrome extensions it defines the important properties of your extension just like the Manifest file we work with to turn web apps into Mobile friendly apps so first I'll set the name property to the extensions name snap stash now in this manifest we have properties different from those we worked with on a previous project for example we have a property for requesting and setting permissions in this case the extension will have permission to interact with the currently active browser Tab and the actions property sets certain browser actions like the default file to load and pop up when the user clicks to launch the extension in this case it's pop up. HTML it also sets the default icon that should appear in the Chrome toolbar it looks like we have three icon sizes listed here now for this project I'll only use the largest icon which is 128x 128 so I'll delete the other two and I've already included the icon here in the images folder this is what it should look like chat GPT gives us the basic setup here for Popup HTML so I'll copy the code and replace everything in my HTML with the new code the HTML defines the heading category selection the save button and the item list I'll make a quick change by updating the heading to the extension name snap stash and I'd also like to make a change to the select element displaying all the categories as option elements instead of displaying the text select a category here as a label I'd like this text to display by default as the first option of the select menu so how about you work on that so pause me now and take a moment to set the default select option to select a category all right hopefully you got that what I'll do is remove this label element entirely then inside the select element at the very top I'll add an option element I'll set its value attribute to an empty set of quotes and within that the text select a category and you'll often see these default options displayed with two dashes before and after the text like that so if you were able to create this option nice work in the mini browser we can see a preview of what it's looking like so far and next we'll apply some initial styles to the popup using this CSS I'll copy the CSS code and paste it into pop up. CSS now while I'm here I'll quickly update the CSS by making the body of the popup SL slly wider I'll change the width value to 300 pixels finally let's add the JavaScript to popup.js so this JavaScript contains event listeners and actions that are typically used in the context of Chrome browser extensions this event listener ensures that the JavaScript will not run until the HTML is fully loaded then it's getting the three elements from pop up. HTML and assigning them to variables and with this code when the user selects a category for the item and and clicks the save button it first gets the selected category like books clothes and shoes and then this code here chrome. tabs. query is a special method provided by Chrome that's specific to Chrome extensions it's what lets you manipulate and interact with the currently active tab in the browser in this case it creates the HTML list item with the link and text to display in the item list all right so it looks like we have all the main components of our extension in place the next step is to load the EXT ition in Chrome and test it first you'll need to make sure that you download the code from your scram onto your computer exactly as you've done in previous projects after that open your Chrome browser and go to the URL chrome/ extensions it should look like this and once you're there be sure to enable developer mode by toggling the switch at the top right corner then click the load unpack button and select the folder on your computer containing the project files and make sure that the extension itself is enabled now now in your Chrome toolbar click the extensions icon in the top right and you should see your new extension icon in the list there it is snap stash click on it and the popup should appear from here you can visit a page with an item you like or wish to purchase select a category click save item and a link with the selected category will be added to the list and it looks like that worked awesome so it looks like this is a pretty solid foundation to build from and there are many improvements and enhancements we can make like displaying the items name instead of only the category also saving items permanently and removing items we'll do just that and more when we continue working on the Chrome extension in the next Grim okay we have our Chrome extensions basic structure and styles in place and tested that it works now let's build the rest of the extension first up I don't like how users only see the category name when they save an item to the list so let's update the extension by not only displaying the item name and category but also showing a preview of the item name before users select a category and save it and I want the content in the item list to persist even after the user refreshes or closes their browser that way they never lose their shopping list with each prompt we can essentially add a new layer to our Chrome extension so here in our second prompt we're letting C GPT know that the user should see a preview of the item name before selecting a category and saving it and that both the preview text item link should display an item's Name by accessing the current tab's title element which on most shopping sites is the name of the product that title text is often quite long so I want to truncate the item name to 50 characters Max and the saved items should display after closing or refreshing the browser this might involve permission updates in the Manifest so I'm instructing chat gbt to update the Manifest file as needed and as always add detailed comments explaining the JavaScript let's try this prompt out chat TBT says that I need to update the Manifest file to include new permissions and a background script to store and manage the saved items so I'll update the permissions property in my manifest and add the new background property the new storage permission grants the extension access to Chrome special service for storing and retrieving data like our shopping list and this new background property sets up a helpful script called a service worker which runs in the background and can do a lot of smart stuff like listen for various browser events and even handle tasks like permanently saving our items in the browser storage so the user never loses them in fact chat gbt even provides the code to this new background.js file so I'll need to create a new file in my project named background.js and paste this new code into it so this is the short script that's going to manage the storage of Saved items background.js will run in the background independently of the pages you're viewing and its purpose is to remember the items in the shopping list even when the browser is closed or if multiple windows of the extension are opened all right next to preview the shopping items we need to update popup.js Title and it looks like we need to make a pretty big update to the JavaScript logic in popup.js so I'll copy the code and replace everything that's currently in popup.js with the new code so this block of code is what updates the item preview based on the current tab's Title by accessing the Page's title and this is where the text length is being truncated to 50 characters then the item preview text is being set here and it looks like the save button functionality was updated to save the selected item to storage chrome. storage. sync. getet and chrom storage. sync. set are special methods provided by Chrome to access its service for storing and retrieving data so here it's saving the item to storage and here it's upd dating the shopping list with the truncated item name then this block of code loads and displays all saved items from chrome storage all right good so it looks like the JavaScript is going to provide the functionality we need now from our initial test earlier it looks like the extension is not displaying the proper icon on the extensions page so I want you to troubleshoot this with the help of chat gbt so pause me and take a moment to interact with chubbt and ask it to help you display a 128x 128 icon for your Chrome extension on the extensions page all right hopefully chbt was able to help you out I'll just let cat TBT know that I built a Chrome extension and that it's not displaying the 128 x18 icon I created for it on the extensions page and it says that I need to check my manifest file and ensure that I've correctly specify the path to the 128x 128 icon using this icons property okay I don't see that property in my manifest so let me add it I'll include it just below the action property okay it looks like we're ready to test the latest changes now we can't run and test our updates here in the scrim so make sure the project folder on your computer has all the latest updates then head back over to the Chrome extensions URL and click the refresh or reload button here in the extension and that will load all the latest file updates for the extension I immediately see the extensions icon that's a great sign and if I visit a products page I see the truncated preview of the item's name at the top good I'll test selecting a category and save the item to the list which displays the item name next to its category and now the saved items will remain intact across browsing sessions multiple windows and even after closing and reopening the browser perfect moving forward let's give users more control over their item list by letting them delete items I'll ask chat gbt to allow you users to delete items from the shopping list permanently and that each delete button should display a delete icon using an icon font okay first I need to include the font awesome Library CSS to display the delete icon in my popup HTML file there we go and then I need to modify the code in popup.js it looks like I have to update this entire block of code that loads and displays saved items from storage because now it includes the code to create delete buttons next to each item list and run the delete functionality when a user clicks delete so I'll copy this full code block then replace this block here with all the new code and below this code block I need to include this new delete item function which holds the logic to permanently delete a saved item from Storage so I'll grab this code snippet and add it here in popup.js and I even get new CSS to lay out the item container using flexbox and style the delete button so I'll copy the new CSS and add it to popup CSS and here I'll make some updates to the button's color I'll change the background color to a light gray and the color to a shade of black with the value pound 999 I also want to add a small gap between the item name and delete button in each item container so here in the item container rule I'll set the Gap property to 10 pixels before testing the extension again I'll update the color of the extension's name to a dark shade of blue here in the H1 property like so I'll also select the item links and style them with a different color let's set it to a bright shade of blue with this value and increase the line height to 1.5 so that the text doesn't look too cramped I also want to add some base styles for the select menu and buttons first I'll select the button element and set its background color let's make it blue with this value I'll remove the button default borders by setting the Border property To None its text color to white make its font weight bold and set the user's cursor to the pointer when they interact with the button now I'll Target both the select element and the button in the same CSS rule just like that and here I'll apply some padding let's say 5 pixels top bottom and 10 pixels left and right and apply rounded Corners with the Border radius property I'll set it to four pixels and I'll also delete this group selector for the label select and button because I don't want to display them as block or on separate lines and the bottom margin will not be necessary okay to test all the latest updates make sure the project folder on your computer is up to date then in the Chrome extensions page click the reload icon visit a project page and launch the extension with these changes each item in the shopping list should have a delete button next to it displaying a trash can icon and they do awesome when a user clicks the delete button the corresponding item gets removed both from the UI and from Storage great the last feature I'd like to implement is to organize all saved items based on their category this would allow users to find items in their list easily so I'll ask chbt to display the saved item links as separate lists based on their category and to be sure that I don't miss anything I wanted to provide the fully updated code with detailed comments so let's see what CBT can do with this prompt the code in the Manifest background.js and popup.js file with this new code from chat gbt just to be sure that I don't miss anything it looks like this new block of JavaScript adds and saves an item to a specific list based on its category and here it uses what's called a loop in programming to create and display a separate heading and list for each category and please do take a moment to ask chat TPT to clarify any confusing code or concepts you've come across I really want you to get used to leaning on chat GPT for help before testing the latest changes I have some Java script challenges for you currently in the item preview text we see the word item in front of the name I think this is a bit unnecessary so I'd like you to look through the JavaScript code and find the code that generates the preview text and update it to remove the word item also the preview text should be cleared immediately after adding the item to its category list so I'll need you to update the JavaScript to clear the item preview after the user clicks the save button so pause me now and work through these all right hopefully that went well first this code here is what displays the item preview text I do see the word item here I just want to set the text content to the truncated title so I'll replace this by only referencing the value of truncated title like that next this event listener saves items to a category list when the user clicks the save button so I can clear the item preview text here with item preview. text content and set it equal to an empty string so if you got both of these fantastic finally let's wrap this up by customizing the layout of the Chrome extension first I'll select the main heading and the category heading all in the same Rule and set their color to this color value here that's in the H1 rule to apply the same color to both and I also want to close up any extra default space that appears below the category or headings by setting the bottom margin of H2 elements to zero so now I want to enhance the select menu and button layout so I'll start by placing them inside a div with the class controls just like that and then I'll Target the controls class in my CSS and I want to display the controls div using flexbox with display Flex that way both the select element and button display on the same line all add a 10 pixel gap between them and create some visual space around the top and bottom sides with margins so first margin top let's say 15 pixels and I'll set margin bottom to 20 pixels and since we're using flexbox I want the select menu to stretch and take up all available space within the controls container so I'll Target the select element and use a special flexbox property called flex and set it to one you'll see exactly how this works when we test the extension soon and finally I want to update the background color of the save button on Hover the button element is inside the div with the class controls so I can Target just this button with controls space button and then colon hover so on Hover we'll change the background color to a lighter shade of blue all right it's time to test our updates so again be sure the project folder on your computer has all the latest files then click the extensions reload button and visit a product page the updated select menu and button layout looks great notice how the select menu stretches to take up most of the available space and I see the preview text with the item name only and selecting a category then clicking save places the item in a category list and notice how the preview text gets cleared after saving an item great so it looks like we're done and let's not underestimate the scale of what we've accompl accomplished here you didn't just build a Chrome extension you created something that uses data persistence essentially setting up a mini database within the browser thanks to Chrome storage that is just wild let's take a moment to walk through how to automate your project deployment with GitHub and netfi this is an integral part of building and deploying projects and it's much simpler than it might initially seem as you know GitHub is your platform for Version Control and source code management and netlify allows you to host and deploy your projects now that you have some projects up on GitHub and your netlify account is set up I'll teach you how to combine them to automate your deployment process using the personal homepage project we built earlier in the section I've got my GitHub repo all set up and here we go to start head over to netlify.com and if you're not logged in go ahead and log in using your GitHub account once you're on nfi's main dashboard go to the site section and click add new site and select import an existing project then netlify asks which platform you want to deploy with click on deploy with GitHub having authorized netlify to access your GitHub repositories you'll be presented with a list of all your repositories and you can select the one you want to deploy if you don't immediately see it in the list you can search for it using this field click on the repository and then you'll be asked to set your deployment settings this includes specifying the branch to deploy which is usually main as well as any build commands and the publish directory now these build settings are for more complex sites and apps that require something called a build tool and a special publish directory we don't need to worry about any of these settings for the simple personal homepage so we can leave all of these optional Fields blank then click deploy personal homepage toward the bottom and netfi kicks off the process of deploying the site it will upload your files and give you a unique URL to your live site with this process netlify doesn't just deploy your project once it's always on the lookout for any changes you make in your GitHub repository from here on anytime you update your repository with changes to your project netlify will automatically update your live site this way you can be sure your live site always reflects the latest version of the code in your GitHub repo all right and that's all there is to automating the deployment process with GitHub and NFI you'll surely find it to be a valuable tool in your building and deployment workflow we've reached the end of this section and let me tell you you should be incredibly proud of your journey so far you've conquered more complex projects and challenges while further embracing the power of generative AI we've accomplished quite a bit together from building an interactive project slideshow to bringing the face bump game to life and building and launching your very own homepage and we had a ton of fun creating a mobile friendly Smart Home interface and even a Chrome extension so take a moment to Pat yourself on the back reflect on what you've built and learned so far and maybe even take a short break you've earned it now there's a lot more to explore in the world of AI coding as mentioned in the previous section I'll continue adding more sections to this course featuring new more complex projects and I would love it if you'd share your thoughts feedback and suggestions about this course and any ideas for projects you'd like to build in future sections clicking on this image will take you directly to the short feedback form so I'll see you back soon in and I look forward to hearing from you and checking out your projects happy building hey again awesome Builders so we've been on a pretty incredible journey exploring building projects with HTML CSS and JavaScript all with a touch of AI assistance and now in this section we're stepping into the fascinating world of Firebase a tool powered by Google to elevate your skills and build apps that save and manage data with Firebase you can quick connect your projects to a database to store and display the most upto-date information making it accessible to anyone any time so let's take a glimpse at the exciting projects that are in store for you we'll start by unraveling what Firebase is and why it's a game changer in app development then we'll walk through setting up Firebase your first step towards building Dynamic apps and we'll get Hands-On quickly by taking the interactive event invite project you built and hooking it up to a Firebase database using users will be able to add and save messages for attendees to read but that's just the beginning we've got a lot more in store after that you'll build an app called Kudos Delight that spreads Joy with random compliments harnessing realtime Firebase features you'll be able to add and save kudos to the database and randomly display them to anyone using the app then you'll create a fun pull app you can use with colleagues called lunch vote to help decide on lunch spots you'll get hands-on experience with creating a real time voting app and finally you'll develop an app called Road wallet that's perfect for Road Trippers to add manage and split expenses as we build these projects remember our goal Remains the Same to help you build amazing projects that persist data using AI assistance and not get overwhelmed by technical complexities we are here to push the boundaries of your comfort zone encouraging you to take challenges that might seem daunting at first this section is all about building and diving into app development with Firebase using AI as your guide and before we jump into the world of Firebase please do share your excitement let your scrimba colleagues know that you're starting this section in the today I will Discord Channel you can head over to the channel by clicking right on this image all right so if you're ready to ignite your projects with Firebase let's get started and keep on building together all right let's get going with adding Firebase into the mix fire Firebase is userfriendly for beginners yet powerful enough for advanced projects and it will be your gateway to creating database powered realtime projects by real time I mean applications that can store sync and display data between your users as soon as it's created or updated so first a little insight into Firebase Firebase is currently being developed and backed by Google and it provides a comprehensive Suite of tools designed to help you develop highquality apps and even games most developers use Firebase to build and handle what's referred to as the backend or server side of an app that's where all the data processing and storage happens essentially serving as the engine that powers the app's functionality Now setting up and maintaining a database can be a hassle as you'll experience the true beauty of Firebase lies in its Simplicity and power making app development accessible to everyone including those new to coding a standout feature of Firebase is its realtime database which which keeps data in sync across all users and devices whether web or mobile so this means that when you update data in the database like adding updating and removing items from a shopping list app for example all users connected to your app receive these updates instantly without the need for the user to reload the app so you'll find that this feature is particularly useful in scenarios like messaging online polls registration apps or collaborative tools where changes made by one user are instantly visible to all other users but why have me explain the details when you can ask chat gbt and learn more you can feed it a simple prompt like I'm just learning about Firebase can you explain how firebases real-time database Works in simple non-technical terms and how I can use it in a web application and with this prompt you should hopefully get a detailed yet simple explanation with practical examples of Firebase so here for instance it says that you can use Firebase as real-time database for data storage real-time updates synchronization AP access authentication and more okay so next up we'll get into setting up Firebase in a project and start using some features before we get building I'll quickly show you how to get set up with Firebase and create your very first database using firebases real-time database this will be your first big step towards building Dynamic real-time prototypes and apps make sure you have a Google account as it's required to use Firebase if you don't have one now is the perfect time to create it if you're ready first visit the Firebase website at firebase.com then click on get started from here you can create a new project by clicking on the create a project button give your project a name this can be anything related to your app or idea I'll name it first database then click continue it might ask you if you want to enable Google analytics for your Firebase project I'll choose not to enable it by toggling it off then click create project then after a little while boom you've got your Firebase project the Firebase console is where you can manage your apps monitor performance and access various Firebase features once here be sure to spend a moment exploring as there's quite a bit to discover now as I mentioned we're only going to be concerned with the realtime database so let's create our actual real-time database here in the Firebase console navigate to the realtime database section under the build menu once there click on create database first you'll need to set a location set for where your real-time database will be stored so go ahead and choose a location that's closest to you I'll stick with us Central 1 then click next then you're asked to set up some security rules for example do you want to allow other users read and write access to your database and you have some options here for instance you can start in what's called locked mode to make your data private by default but I'll go ahead and start in test mode which allows you to experiment more freely without strict security rules I'll click enable and and now the database is all set up the first thing you want to look for is this reference URL which is what you'll use to interact with your real-time database now connecting to Firebase and interacting with your database does take some initial configuration but no worries because we've got the setup covered for you scrimba offers a Firebase template you can use to build projects using Firebase including a basic Firebase configuration for your web app for now all you need to do is copy this reference URL here in your database then paste it as the value for this database URL property in the scrim so go ahead and replace what's there now with my database reference URL our database is currently empty so let's try adding some data to it the Firebase template provides a simple UI to kick things off for you for example if I type test data here in the text field then click push to DB it should push the text into my database now my test database has a reference called things as you can see here here in the Firebase configuration so any data I push to it will be stored under this reference named things okay so now we can see the things reference added to the database console and expanding it shows the submitted test data text fantastic all right let's add some more data the real-time database updates data synchronously or in real time so if I click on the plus icon next to the things reference name I can add a new entry for example I'll add a message key with the value you hello from Firebase then click add notice how that new data instantly appears here in the app all right and there you have it you're all set up with firebases real-time database up next we'll dive deeper into how to interact with your Firebase database using JavaScript we are going to start by integrating Firebase into a project and creating functionality to save and display messages all while using chbt to guide us through this process so let's Jump Right In this project should look familiar it's the interactive GIF Gayla invite you built in a previous section the only difference is that I've introduced a message input field that displays only if the user selects yes I will be there that way they can submit an optional fun message for all to view and that will be done with Firebase when users RSVP to the event and submit a message will'll save the message to the database then display all the messages here in a list the message list will update in real time highlighting firebases real-time database capabilities all right so I've got the initial Firebase config all set up once again this is using code from our Firebase scrim template if you're curious about it this is what's called an import statement in JavaScript and this Imports a function from the Firebase app Library named initialized app so we're able to use it from this file and this function is used to initialize the Firebase app with a given configuration and Below we are bringing in a few other functions options related to the Firebase real-time database like get database ref push and on value then here in the app settings object I'm defining the reference URL to my Firebase realtime database and the line below initializes the Firebase app with the configuration defined in app settings after initializing the app this line retrieves the database instance associated with the initialized Firebase app and this creates a reference to a specific p path in your database in this case the messages path as you learned in the previous scrim we can use this reference to read from or write to the database I went ahead and created a new project in my Firebase console named GIF Kayla just as we did in the previous scrim and set up a realtime database for it and this is my special URL to connect to the database please do the same if you'd like to build upon this invite project now I don't want anyone else to be able to access this and write to my database so I'll show you a way to hide this URL using what's called an environment variable on scrimba so I'll bring up the environment variable dialogue window on scrimba you can access it with a keyboard shortcut command shift e if you're on a Mac or windshift E for Windows and then create a new variable called GIF Gaya DB exactly as shown here then set its value to my Project's database URL click add variable and now I can access this URL from my scrio projects using process. EMV do the variable name so I can replace the database URL here with process. env. Gore Galore DB and that's going to work exactly the same way while keeping my URL hidden to learn more about environment variables on scrimba be sure to check out this blog post written by the scrimba team you can click right on this image to head over to the post all right now let's work with chat GPT to bring Firebase into our project there shouldn't be a whole lot we need to do so what I'll do is use this initial prompt here that asks chubbt to First evaluate my existing JavaScript code which I'll provide here between the back ticks then based on the code it needs to add the Firebase real-time database to this project it should save only the submitted messages to the database if the value of attendance is strictly equal to yes or if the user selects yes I'll be there and all of the latest messages data needs to appear as list items in the messages list which is this UL element here with the class messages and I also want chat GPT to add detailed comments to help me understand the new Firebase code all right so I'll copy this prompt and feed it to chat GPT with all of the code I have here in my script.js file and it looks like I get back all the code I need to add Firebase realtime database to my event invite project so let's quickly review this new code I see that we're bringing in a new function from Firebase push and it's using push here to save each message to the database only if the attendance value is equal to yes so that one line here should take care of saving the data then it gives me this code here to display the messages from the database on the page now since we're working with a real-time database we need to listen for any changes in the database so firebases onv Value method does just that it data and listens for changes each time a user submits the form with a message new data gets added to Firebase then this function gets called every time data is changed at the specified database reference so it fetches all the data so that we can display it and this code Loops through all the messages return from the database and adds them as list items inside our unordered list all right so I'll add this new code to my project by clicking copy code then replacing everything in script. JS with this new code and let's try it out I'll first add an email address for example Gil at scrimba then for attendance I'll select yes I'll be there that brings up the message input field and I'll add a message like I can't wait to see everyone then click submit I get the party on we look forward to seeing you at the GIF Gaya confirmation message then if I scroll down and click the show messages button yes I see the message I submitted I can't wait to see everyone Gil great all right let's test out a few more messages let's add test at test.com then select yes I'll be there and as the message I'll type bringing the most epic costume click submit then let's see great I see the new message added to my messages list I'll add one more message let's say I'm counting down the days click submit and good I see the message appear in the list list now if I have a look at my database in the Firebase console I can see all of the submitted messages under the messages reference awesome so now even when a user refreshes the app or closes the browser window then revisits it they'll still be able to see all of the messages on the page all right so you learn how to integrate Firebase into an existing project and these are pretty much the steps to follow for most projects you want to connect to the real-time database so nice work let's keep going all right now we're going to spread some positivity and Delight by building quite the unique web app a compliment generator you can use to brighten someone's day with a simple kind message and we'll use Firebase with chat gbt to make this happen our compliment generator is named Kudos delight and it will randomly select compliments or Kudos from a database and display them to users but that's not all users can also submit their own compliments making our generator a a constantly evolving pool of positivity so we'll get to do a little random data retrieval with Firebase which should be fun all right first if you want to run this project for yourself you'll need to create a new project in Firebase for the compliment generator project and set up a real-time database for it just like I've shown you in previous projects now I've done all that and saved my database URL as an environment variable on scrimba named Kudos DB just like this and I've also set up a simple yet inviting U bu for our compliment generator so you won't have to worry about the HTML styling and basic JavaScript functionality so let's quickly go over the HTML for the app as you can see here in the body I have a div with a class container and within that we have an H1 with the app's name and then a paragraph to display all the compliments and below the paragraph We have a button to fetch all the compliments from the database and then we have a toggle button that when clicked shows and hides the form to submit kudos to the database over in the JavaScript I have all the initial Firebase configuration as you've seen before with a reference named compliments then I'm selecting some page elements like the button compliment display and form elements and assigning them to variables and finally a toggle form event listener to show and hide the Kudo submission form and set the toggle button text based on whether the form is hidden or not so that's how changing the button text from add kudos to hide form for example and showing and hiding the form all right it's time to set up our Firebase project you should have created a new project in the Firebase console and set up the real-time database for it so I'm going to ask you to work on the first part of this on your own with a challenge we want to let users contribute kudos to the app via the form and the database so you are going to use the provided prompt to program the submission form to add new complement to the database let's have a look at the prompt here in prompt. MD this prompt lets the AI know that you'd like to build a compliment generator that randomly selects compliments from a Firebase real-time database and display them to users and first it needs to program the submission form to let users add new compliments to the database and that it should use your Firebase config and existing project code as a reference so you'll need to provide all of the code here in index.js between the triple back ticks we also want detailed comments added to the new code to help us understand it all right so give this challenge a go now and I'll catch up with you when you're done to go over this first part together okay hopefully you were able to do that now I'll give it a whirl keep in mind that the solution you got was most likely different than mine and that's totally fine as long as you got it to work in a similar way all right so I'll copy my prompt here and feed it to chat GPT T including all of my starter code from index.js all right good so I got back all of the code for adding new complements to the Firebase realtime database so what I'll do is copy this function to handle form submissions from the provided code snippit and paste it in index.js all right let's go over this new code so we have an event listener added to the compliment form to handle form submissions when the form is submitted we prevent the default form submission Behavior here with e. prevent default then we get the value from the input field and trim it this trim method cleans up the submission by removing any leading and trailing spaces tabs or line braks from the string if necessary then if there is a new complement or if the value of new complement is not an empty string it pushes the string to the Firebase database as a new complement and then after successful submission we clear the input Fe field then hide the submission form by setting its class to Hidden and then update the button text accordingly so in this case it's setting the button text to add Kudos finally in any case of Errors during the submission process an error message is logged to the console here in the catch method so this catches any errors then displays them in the console here with console. a all right I'll test this out by submitting a Kudo here let's say your jokes are truly hilarious then click submit and checking my database in the console does in fact show that my compliment was submitted great so there's officially some communication between my project and the database now this was just a test submission so I'll delete this from my Firebase database because soon I'll want to test what the app displays when there are no compliments in the database all right so now let's work on the most important part of our project fetching compliments from the Firebase database and displaying them on the page for that I'll add a new prompt here to my promptmd file this prompt asks the AI to write the functionality that gets the compliments data from Firebase then displays a random compliment to the user each time they click the generate button and you'll do this with a challenge I want you to use chubbt by feeding it this prompt to add the JavaScript to connect the generate button to Firebase retrieve the compliments and display one random compliment to the user so go ahead and work through this challenge now and when you're done join me back to go over it together all right hopefully you were able to make this happen now I'll give it a go I'll copy this prompt then paste it into chat gbt and good it looks like I get back the code snippet to fetch compliments from the Firebase database so I'll copy this new code and paste it here in index.js all right let's quickly go over it in this new code we're defining a new function called Fetch compliments that will fetch the complement or Kudos data from Firebase inside the function it's using a function from Firebase called get to retrieve data from the complement ref then if data exists we convert it into an array and select a random complement from the array so that's what all of this code here is doing and it's also updating the content of the complement display element on the page with the randomly selected compliment then we're saying else if no compliments exist then set the text content of the compliment display to no compliments available and just like the earlier code in case of any errors during the fetching process an airror message is logged to the console here with this catch method and there's also a click event listener for the generate button that calls the fetch compliments function when the button is clicked all right let's test it out I'll first try clicking the generate button without any Kudos in the database and it says no compliments available and that's correct this text is being generated with this line of code here so I'll make it more on brand and update it to say no Kudos available okay now I'll submit audo using the form again let's have it say your jokes are truly hilarious click submit now I'll try clicking generate a Kudo and great there it is I'll submit a few more to test the randomness I'll say you are smarter than my smartphone submit it then how about you're the human version of a high five submit that and one more your ideas are always so Innovative all right let's try generating random Kudos and perfect we are indeed starting to Generate random Kudos from our database the final thing I'll do is give the user some visual Fe feedback once they've submitted their Kudos and I'll use this prompt for that it says to add the necessary code to display a success message once the user submits a compliment to the database and that the message should disappear after 3 seconds all right so let me feed this prompt to chat PT and I get back the new code for displaying a success message when the user submits a compliment to the database so first it's selecting an HTML element with the the ID success message which will be used to display the success message so I'll copy this line from the code snippet and paste it in index.js where I'm selecting all of my page elements and Below it's defining a new function called show success message so I'll copy this function from the code snibbit and add it to my code here in index.js this function sets the display style property of the success message element to block to make it visible and it uses a function in JavaScript called set timeout to hide the success message after 3 seconds by setting the display style property to none and inside the form submission event listener after successfully adding a compliment to the database it's calling the show success message function to display the success message for 3 seconds so I'll copy this function call from the code snippet then add it to my compliment form event listener right here in this then method now I've already included a paragraph element in my HTML for the success text notice how it's initially hidden by setting an inline display style To None all right so all that's left is trying it out let's first check if generating audo still works and it does so now I'll try submitting a Kudo let's just say you're the coolest click submit and fantastic the success message displays for about 3 seconds then it disappears I'll add another Kudo for good measure let's say you have an amazing way with words all right perfect so congrats on building your very own compliment generator you've just built something that not only teaches you valuable coding skills but also has the power to spread positivity so be sure to share your Kudos Delight app on social media and with the scriba community to show the world what you've built using a database it's Friday afternoon atw workk and there you are again in that endless where should we eat for lunch debate with your co-workers it's a common dilemma in every workplace well it's time to say goodbye to all those lengthy discussions and indecisions because we're going to build something that's not only fun but also incredibly practical a lunch break poll app called lunch vote this app will not only make deciding where to go for lunch easier but also give you the opportunity to keep building realtime web apps once again we'll use Firebase for real-time data handling and chat gbt for any coding queries we might have in the lunch vote app users can add their favorite lunch spots to a list then the team can vote on where they'd like to go so we're going to focus on realtime vote tallying and allowing everyone to see the poll evolve as votes are cast so let's jump in and get started I've already set us up with our application main structure this is all chat gbt generated and if you're curious I fed chat gbt this prompt to create the initial HTML CSS and JavaScript code in the HTML we have a form with an input field for adding lunch places and a submit button and below a div for displaying the top lunch vote and a list for displaying each lunch place as usual in the JavaScript we have the initial Firebase configuration and I've created a reference to a specific location in the Firebase database named places and as usual that's creating using firebases ref method and Below we are prepared to interact with the web page by obtaining references to various elements like the form and input field and the elements that will be used for displaying and interacting with data from the Firebase database now we're only going to focus on the Firebase code in this project so first things first you'll need to set up a new Firebase project and create a real-time database I've already done that and stored the database URL in a scrimba environment variable named lunch vote DB so go ahead and do that now okay so with our front end ready it's time to integrate Firebase we'll need to include some JavaScript that will push new lunch places to fireb and fetch them for display most importantly we'll need to implement realtime vote tallying where vote counts update once they're clicked that way everyone can see the most popular choices as votes come in all right so I'll kick things off with this prompt that lets chat GPT know that I'm building an app called lunch vote to add lunch places display them and allow users to vote I want it to store each lunch place in Firebase and that users cast a vote by clicking on a lunch place the vote counts should update in real time using firebases real real time database and as usual I wanted to evaluate and use my Firebase configuration and existing project code as a reference to get started like before I'll include my JavaScript between the triple btics and naturally I wanted to add detailed comments to the new code to help me understand it all right so let's feed this to chat upbt now normally I've been using chat upbt 3.5 for our projects but I'll need to step up my game with chat GPT 4 why the change well GPT 3.5 has shown some compatibility issues with our project's needs according to its latest training data for Firebase specifically so in this case chat gp4 is more Adept at handling and parsing this code base and what we need for the lunch vote app all right so I'll add my prompt here and I get back a lot of new code and it's code that pushes a new lunch place to Firebase when the form is submitted then listens for changes in the Firebase database and updates the UI and it's implementing a voting mechanism there's quite a bit of code here so so I'll copy the entire JavaScript snippet and replace everything in my index.js file with the new code there we go so let's go over the new code when the user submits the form this event listener triggers and this if statement it pushes a new place with the name and an initial vote count of zero to Firebase then it clears the input field after submission we also have a real-time data listener firebases onv value function con constantly listens for changes in the places Firebase reference so whenever a change occurs like a new place is added or votes are updated it updates the UI and with this code when a user clicks on a list item or place it triggers a vote increment for that specific place in Firebase it's bringing in a new function from Firebase called update to increment the vote count and it looks like here the app tracks and updates which place has the highest vote and then this code displays the leading place on the page overall this code ensures that your apps UI is always in sync with your Firebase database in real time providing a dynamic and interactive user experience all right let's try it I'll add a lunch Place Like Big Kahuna Burger I hear they've got some tasty burgers and I'll add another place there we go all right I'll click to vote for Big Kahuna bger and good I see the vote count update to one and the leading Place update to bikun burer with one vote and if we have a look at our database we can see the data being stored under the places reference each place has a name and vote property and currently Big Kahuna Burger is set to one so it looks like our app is successfully updating and retrieving vote counts in Firebase instantly that way everyone can see the most popular choices as votes come in now currently it seems like anyone can vote as many times as they want for example I can keep clicking on a place and the vote count keeps going up so let's figure out how to allow users to vote only once and by that I mean let's have chat GPT figure this out for us so I'll use this prompt here that says add the code to allow a user only to vote once and that users should also be able to change their vote so I'll feed this prompt to chat gbt and in its reply it says that to implement the feature where a user can only vote once but can change their vote we need to track which place a user has voted for and that can be done by storing the user's vote in the local storage of the browser well that's pretty clever local storage is a browser feature that allows a site to store some data in the browser which it can use again and again when you revisit the site now it looks like quite a bit of code was updated so thankfully it gives me the entire JavaScript code to copy into my project so I'll copy everything by clicking copy code and then replacing everything in my index.js file with this new code okay let's go over the changes so here I'm seeing this new function named update user vote which uses the browser's local storage to remember the user's current vote this is a simple way to track votes without requiring user authentication for example and this function handles changing the user's vote it decreases the vote count for the previous Choice as we can see here in this if statement it looks like it's using firebases update function to update only the value of a place's vote property in the database so it's decreasing it here by one if the vote count is greater than zero now this code below increases the vote count for the new vote so it's also using firebases update function to increase the vote count here and it's updating it in the browser's local storage and it looks like there's also added Logic for the vote changing so here with this code when a user clicks on a list item it checks if the user is is changing their vote here in this if statement if so it updates the vote both in Firebase and in the local storage by running this update user vote function we just looked at all right looks like those are all the changes so let's test this first I'll reset the database by deleting all of the lunch places there we go I'll add a couple of new lunch places all right so now if I try voting I see that I can only vote vote for one place so I keep trying to vote for good burger by clicking on it but it doesn't allow me to increase the vote count now if I click to vote for The Other Place notice how my vote switches excellent in fact I have this app open right now in multiple browsers so if I vote on a lunch place you can see it update here in the app in real time so check it out hey it looks like Jack Rabbit Slims won they do have some pretty good $5 milkshakes finally how about we add a feature where a user can delete the poll once a place has been chosen for that I'll use this prompt here that says add a delete poll button at the bottom which clears the database and resets the poll and to display the delete button only after a poll gets created all right so here you go chat GPT do your thing and here's all the new code so first I need to add this delete pull button to my HTML I'll go ahead and copy it then paste it in my HTML just below the places list notice how the button is initially hidden with its display property set To None next I'll modify my JavaScript to include the logic for showing the button handling the click event and resetting the poll I'll copy this line of code here that targets that delete button in my HTML and include the variable up here where I'm targeting all of my page elements right there and in the new JavaScript we have this reset poll function so I'll go ahead and copy that and add it to my code let's just paste it right here below my variables so when this delete pull button gets clicked we're going to call this function to clear the Firebase database where the polls are stored that's being done right here with this set method and then it's going to clear the leading Place display as well as the list of places and hide the delete button and it looks like we have a new if else statement we need to add to our on value function so I'll copy that from the code snippet then scroll down to my on value function where I'm listening for realtime updates from Firebase right here and I'll just paste in the new if else statement at the top remember onv value is a listener for the Firebase database it checks if any polls exist and updates the visibility of the delete button accordingly so for example this script here checks if there are any polls in the database base if poles are present it shows the delete button by setting its display style to block otherwise the button remains hidden with its display style set To None finally I'll copy this event listener here for the delete button and paste it in my code right at the bottom so when the delete button gets clicked it calls the reset pull function to reset the poll and remember that is this function here that we just added to our code okay so let's test this out once again I'll clear my database so I can see if the delete pull button gets hidden I just did that in my Firebase console and good I no longer see lunch places in the app so because my database is empty we are not seeing the delete poll button just yet but I'll add a place to start a poll and good the delete poll button appears I'll add a couple more places and there we go now to me the button feels a bit misaligned I want to align it Center on the page so I can quickly do that with a CSS adjustment this rule here is targeting the delete pull button and you've learned in previous projects that you can Center a line and element on the page using margin and the value auto so I'll replace this margin top property here with the margin shorthand and I'll keep the 20 pixels of top margin then I'll set the left and right margin values here to Auto and the bottom margin value to zero and there we go our button is now perfectly centered aligned I'll click to vote on a lunch place we see the vote count change and the leading Place change up top now clicking the delete poll button should delete the lunch places from the app so I'll try that and I get an error it says that set is not defined hm take a moment to have a look through index.js and see if you can figure out how to fix this okay so this fix shouldn't be too bad I see that the reference error is set is not defined so here in this reset pole function we are using firebases set function to reset the poll when the button gets clicked so I'll have a look at where we are importing the functions from Firebase and I do not see that we're importing the set function so presumably all I need to do here is include the set function and now I'll try clicking delete poll and great all the lunch places get deleted from the app so it looks like we're done here now I want you to pause me for a and take the time to add some places cast your votes and watch how the application responds in real time okay great so now maybe even think about ways to extend the app with more features for example what happens when there's a tie between two or more lunch places and congrats you've just built a realtime lunch break pull app showcasing the power of Firebase in creating Dynamic user interactive web apps so well done let's move on to our final project you're on a road trip with friends the journey is epic but tracking who paid for gas snacks and other stuff is turning into a chaotic mess sound familiar well it's time to bring Clarity and ease to your adventures we about to build the road Wallet app the ultimate solution for managing group travel expenses without the headaches Road wallet provides a realtime overview of expenses balances and settles the who paid for what debate instantly so here's what our app will feature Travelers will be able to log various expenses categorized into food gas accommodation sightseeing and more and you can add travelers to split costs and display each person's share you'll also be able to review your expenses here under expense history and here you can also easily delete expenses in case of errors or changes and the app will use the data from Firebase to do realtime calculations to to show how much each traveler owes in real time as expenses are added I've provided all of the starter code from the app which will take a look at in just a bit and here's what the road Wallet app is looking like so far I can click manage travelers to add travelers to the app and they get displayed below you can select an expense here from the category menu for example gas and set the amount to let's say $100 click at expense and see it listed under expense history I can add another expense like food and just say $200 for example and now our expense total is $300 and if we click manage Travelers we can see that both Gil and Tom each owe $150 now this isn't connected to Firebase just yet so if I refresh the app all my expenses and traveler data is reset so again to ensure seamless collaboration and real-time updates we are going to connect Road wallet to fire firebases real-time database with the help of chat gbt we're going to persist the expense in traveler data to Firebase so that when a traveler or expense gets added or updated the changes will be saved to the Firebase database in this project we're starting with more pre-written code than usual and like the previous project I use chat GPT to help me generate all of the code the goal in this Grim is to explore how chat gbt can effectively interact with modify and enhance a sub substantial existing codebase like ours so as usual in the JavaScript we have the initial Firebase configuration and here I have a reference to a specific location in the Firebase database named Road wallet I created a new project in Firebase and set up a real-time database for it and I saved the databases reference URL in a scrimba variable named Road wallet DB so go ahead and do that now if you want to work on this project all right so below we are retrieving all of the necessary elements for manipulation for example the expense form motor window buttons and more and then we have two arrays here to store expenses and traveler data and below that we have our event listeners that open and close the traveler modal window when the open or close button is clicked and this event listener here closes the modal window if the user clicks outside of it like so and here's the event listener for the expense form submission and the event listener for adding a traveler now below are all of the functions that handle logic such as managing expenses and traveler's data as well as keeping track of the total expenses amount and the amount owed by each traveler and displaying them in the app if needed I recommend that you pause me and take a moment to review this code before moving on okay so I'm going to use this prompt here to connect my app to Firebase The Prompt will let cat GPT know that I've buil built the front end for an app which does the following and it lists its features like logging travel expenses under categories adding travelers to split costs than displaying each person's share and the app will show how much each traveler owes in real time as expenses are added and it will list and delete expenses so we want chat gbt to write the code to store and manage the apps traveler and expense data using firebases realtime database and like we've done in previous projects I want chat GPT to use my Firebase configuration and existing project code as a reference to get started so I will be providing all of the code from index.js here between the triple back ticks and I want it to give me back the entire JavaScript code with detailed comments to help me understand it all right so let's paste this code into chat gbt including all of my code from index.js and once again I'm going to leverage the power and the latest knowledge and Firebase training data of chat GPT 4 for that it will be much more Adept at handling what we need need for Road wallet and it looks like I get back a lot of changes now to avoid any confusion with the new code or the possibility of leaving out code and breaking my app I'll ask chubbt to please give me the complete Javascript file because it looks like it's leaving out some of my existing code so this way I'll be able to just replace my existing code with all of the updated code all right there is the complete Javascript file with the Firebase integration so I'll copy it from chat gbt and then replace everything in index.js with this new code wow this is a lot of code so let's spend some time going over it the new code integrates firebases real-time database with my existing logic enabling the app to store and manage data in the real-time database and it also covers all the functionalities for adding deleting and displaying expenses and travelers in the new code it looks like we're bringing in some new functions from Firebase remove and set and we have some new references expenses ra and travelers RA are references to specific paths in the Firebase database where expenses and travelers data will be stored I also noticed that the handle new expense and handle new traveler functions now include logic to save new expenses and travelers to Firebase using the push and set methods as you can see here and these delete expense and remove traveler functions remove items from Firebase using their unique IDs and cool I see that it included on value listeners for expenses ra and travelers ref to automatically update our local expenses and travelers array when there's a change in the Firebase database and I see that the add expense to list and add traveler to list functions have been modified to include the unique ID of each traveler or expense which is necessary for deletion operations all right as usual if you have any questions about this code you can always ask the AI to explain the parts of the code that you don't quite understand yet and if that's a lot right now that's completely normal remember the focus here is to push the limits with all of the ways AI can contribute to our code and projects all right so let's test it out by adding some data and playing around with the features we also want to ensure that everything syncs perfectly with Firebase and that our calculations are accurate so first I'll click manage travelers to open up the motal window and add Travelers let's say Gil Tom raid and Bob that sounds like a fun road trip okay let's add some expenses first I'll select the food category and let's say $500 click add expense and there we go we see food listed in the expense history so if I click to manage The Travelers we see that each person owes $125 and that's correct okay let's add more expenses naturally we'll need to pay for gas so let's say 250 there we see gas in the expense history and each person now owes $187.50 all right let's see we'll need some accommodations so that'll be about $600 there we go and our traveler data updated accordingly good if I delete an expense let's say gas for example now each person owes $275 and if for some reason someone drops out like me and ooh now each person owes about $367 sorry about that all right now looking at the data in my Firebase console I can see all of the data saved under expenses and travelers for example but it looks like we might not need this amount Ed property in the database notice how they are all set to zero so it seems like the code is using the expenses data from the database to generate the amount owed by each person and that's completely fine for this first go at the app so since we don't need the amount owed property saved to the database we can remove the Firebase code here that is setting that property and that's being done here in the handle new traveler function so here in the set method we can remove the amount Ed property that way it's just setting or saving the new traveler name to Firebase and everything should work work exactly the same way and it does so I'm back in the road trip let's welcome pair to the road trip and good the amount owed still updates accordingly for each person I'll even delete some expenses and test that it also updates the amount owed for example say goodbye to food and it does let's say food is now $700 and that worked the total expenses is $1,300 and each person owes $260 all right so now I'll test refreshing the app enti IR L and all of my road wallet data should be present and it is fantastic hey so congratulations on building Road wallet you've navigated a complex codebase implemented realtime data handling and created a solution that makes travel easier and more enjoyable for everyone involved so what I want you to do now is think about how you might transform the app into a mobile friendly app that users can install on their device and conveniently launch from their home screen you learn how to do just that in the previous section so follow those steps to make it happen and be sure to share your app and show everyone what you've built I'll see you in the next scrim to wrap things up wow what a great ride this has been as we wrap up this section take a moment to reflect on your achievements you've not only embraced the power of Firebase but also built some pretty fantastic real-time datadriven applications you connected your interactive gift Gaya invitation to a realtime database to to save and display messages then ventured through the creation of the compliment generator spreading Joy with every click and we navigated the collaborative world of decision-making with the lunch vote app and tackled the Practical yet challenging Road Wallet app making every road trip more organized and fun these projects weren't just about coding they were about bringing ideas to life and solving real world problems with a database you've come a long way so it's time to give yourself a well-deserved pat on the back and treat yourself every line of code you wrote and every problem you solved has brought you one step closer to becoming a more proficient and confident Builder so keep experimenting keep building and most importantly keep enjoying every step of your building Journey thanks and happy building

Channel: freeCodeCamp.org

Views: 143,663

Keywords:

Id: dJhlMn2otxA

Length: 286min 20sec (17180 seconds)

Published: Mon Jan 08 2024