title
Dynamic Landing Page | JavaScript

description
In this project we will build a homepage or landing page with the time that we can interact with and save our name/focus to local storage. Code: https://codepen.io/bradtraversy/pen/XLrQvz Sponsor: Freelancer Bundle (Use "brad25" for 25% off) https://studywebdevelopment.com/freelancing.html 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Courses http://www.traversymedia.com Follow Traversy Media: https://www.facebook.com/traversymedia https://www.twitter.com/traversymedia https://www.instagram.com/traversymedia

detail
{'title': 'Dynamic Landing Page | JavaScript', 'heatmap': [{'end': 508.872, 'start': 481.466, 'weight': 0.771}, {'end': 865.78, 'start': 844.35, 'weight': 1}, {'end': 1795.222, 'start': 1752.233, 'weight': 0.796}], 'summary': 'Tutorial demonstrates creating a dynamic landing page that adjusts greeting and background image based on time, allows user input, and stores input in local storage. it also covers creating web content, css styling, flexbox in web development, managing user input and local storage, and event listeners in javascript, suitable for beginner to intermediate learners.', 'chapters': [{'end': 92.171, 'segs': [{'end': 72.467, 'src': 'embed', 'start': 7.165, 'weight': 0, 'content': [{'end': 11.728, 'text': 'This video is sponsored by the Ultimate Freelancing Bundle by StudyWebDevelopment.com,', 'start': 7.165, 'duration': 4.563}, {'end': 19.714, 'text': 'which gives you everything you need to start your own freelancing business, including 130-page in-depth guide invoicing and client proposal templates,', 'start': 11.728, 'duration': 7.986}, {'end': 22.816, 'text': 'website templates, an SEO checklist and much more.', 'start': 19.714, 'duration': 3.102}, {'end': 25.898, 'text': 'Visit the link in the description and use the code BRAD25 to get 25% off.', 'start': 23.136, 'duration': 2.762}, {'end': 29.033, 'text': "hey, what's going on, guys?", 'start': 27.932, 'duration': 1.101}, {'end': 30.315, 'text': 'so kind of a cool little project.', 'start': 29.033, 'duration': 1.282}, {'end': 36.482, 'text': "today we're going to be building a dynamic landing page with the time and it's going to change this greeting here.", 'start': 30.315, 'duration': 6.167}, {'end': 42.55, 'text': "it's going to change the background image based on the time of day, if it's morning, afternoon or night.", 'start': 36.482, 'duration': 6.068}, {'end': 48.076, 'text': "we're also going to be able to add our name here dynamically, so if i just put in brad And enter.", 'start': 42.55, 'duration': 5.526}, {'end': 56.921, 'text': "And then down here it says, what is your main focus today? So we could put in, you know, make we'll say make cool videos.", 'start': 48.676, 'duration': 8.245}, {'end': 62.964, 'text': "And if I reload, that's going to stay there because we're going to store it in local storage.", 'start': 58.542, 'duration': 4.422}, {'end': 64.305, 'text': 'So basically in the browser.', 'start': 63.004, 'duration': 1.301}, {'end': 72.467, 'text': "Now, the inspiration for this comes from a Chrome extension called Moment, which when you open up a new tab, it'll show this screen here.", 'start': 64.845, 'duration': 7.622}], 'summary': 'Video sponsorship, building dynamic landing page with time-based features and user input storage', 'duration': 65.302, 'max_score': 7.165, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSTQzlprGLI/pics/fSTQzlprGLI7165.jpg'}], 'start': 7.165, 'title': 'Creating a dynamic landing page', 'summary': 'Focuses on creating a dynamic landing page that adjusts greeting and background image based on time, allows user input, and stores input in local storage.', 'chapters': [{'end': 92.171, 'start': 7.165, 'title': 'Dynamic landing page project', 'summary': "Discusses building a dynamic landing page that changes the greeting and background image based on the time of day, allows dynamic input of the user's name and main focus, and stores the input in local storage.", 'duration': 85.006, 'highlights': ['Building a dynamic landing page with time-based greeting and background image', "Adding dynamic input for user's name and main focus", 'Storing user input in local storage for persistence', 'Promotion of the Ultimate Freelancing Bundle by StudyWebDevelopment.com, offering a 130-page in-depth guide, invoicing, client proposal templates, website templates, and an SEO checklist with a 25% off code BRAD25']}], 'duration': 85.006, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSTQzlprGLI/pics/fSTQzlprGLI7165.jpg', 'highlights': ['Building a dynamic landing page with time-based greeting and background image', "Adding dynamic input for user's name and main focus", 'Storing user input in local storage for persistence', 'Promotion of the Ultimate Freelancing Bundle by StudyWebDevelopment.com, offering a 130-page in-depth guide, invoicing, client proposal templates, website templates, and an SEO checklist with a 25% off code BRAD25']}, {'end': 305.651, 'segs': [{'end': 188.215, 'src': 'embed', 'start': 92.171, 'weight': 4, 'content': [{'end': 94.152, 'text': 'or you can even make it an extension.', 'start': 92.171, 'duration': 1.981}, {'end': 102.378, 'text': "i do have a video showing you how to create a simple chrome extension, but i think we're going to just get this part of it done, at least today.", 'start': 94.152, 'duration': 8.226}, {'end': 108.261, 'text': "now, like i said, these are going to be stored in local storage, so we're going to be dealing with that.", 'start': 102.378, 'duration': 5.883}, {'end': 111.883, 'text': "we're going to be dealing with DOM manipulation, the time.", 'start': 108.261, 'duration': 3.622}, {'end': 116.285, 'text': 'all this stuff is going to get inserted into the HTML through JavaScript.', 'start': 111.883, 'duration': 4.402}, {'end': 120.347, 'text': "Okay, so let's jump into VS code and I just want to go over the file structure.", 'start': 116.805, 'duration': 3.542}, {'end': 126.83, 'text': 'I just have an index HTML, a style CSS and a main JS inside a JS and a CSS folder.', 'start': 120.707, 'duration': 6.123}, {'end': 133.393, 'text': "And then you'll see I have this image IMG folder that has the morning image, the afternoon and the night.", 'start': 127.23, 'duration': 6.163}, {'end': 139.434, 'text': 'OK, so these images I got at Pexels dot com, you should be able to get them from the link in the description.', 'start': 134.253, 'duration': 5.181}, {'end': 143.955, 'text': 'I should have a code pen that will have, you know, links to the images there.', 'start': 140.035, 'duration': 3.92}, {'end': 146.856, 'text': 'And of course, you could use any any image you want.', 'start': 144.916, 'duration': 1.94}, {'end': 148.437, 'text': "So let's get started here.", 'start': 147.396, 'duration': 1.041}, {'end': 151.657, 'text': "I'm just going to start off with the HTML.", 'start': 148.457, 'duration': 3.2}, {'end': 152.658, 'text': "That's what I just do.", 'start': 151.697, 'duration': 0.961}, {'end': 153.758, 'text': 'There we go.', 'start': 153.378, 'duration': 0.38}, {'end': 157.539, 'text': "So for the title, let's say welcome.", 'start': 154.478, 'duration': 3.061}, {'end': 158.659, 'text': "You can put whatever you'd like.", 'start': 157.599, 'duration': 1.06}, {'end': 161.58, 'text': "And I'm going to add a link to the style sheet.", 'start': 159.499, 'duration': 2.081}, {'end': 172.446, 'text': "So style CSS and in the body, let's put a script source is going to go to JS slash main JS.", 'start': 162.14, 'duration': 10.306}, {'end': 180.77, 'text': "And then for the body text here, I'm going to actually going to use a time tag with an ID of time.", 'start': 173.186, 'duration': 7.584}, {'end': 185.753, 'text': "And I'm going to just I'm going to hard code the time in here for now.", 'start': 182.87, 'duration': 2.883}, {'end': 188.215, 'text': "So it's what, 12, 17.", 'start': 186.333, 'duration': 1.882}], 'summary': 'Creating a chrome extension using local storage and dom manipulation, with a file structure including html, css, js, and image folders.', 'duration': 96.044, 'max_score': 92.171, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSTQzlprGLI/pics/fSTQzlprGLI92171.jpg'}, {'end': 237.415, 'src': 'embed', 'start': 208.992, 'weight': 3, 'content': [{'end': 212.314, 'text': 'So both of those have to be in separate elements so we can grab on to them.', 'start': 208.992, 'duration': 3.322}, {'end': 219.959, 'text': "So I'm going to do a span of the ID of greeting and we'll just do good afternoon.", 'start': 212.594, 'duration': 7.365}, {'end': 223.761, 'text': 'And again, this is going to get inserted through JavaScript later on.', 'start': 220.759, 'duration': 3.002}, {'end': 227.023, 'text': "And then we'll do a span with the ID of name.", 'start': 224.281, 'duration': 2.742}, {'end': 228.784, 'text': "And I'm just going to put my name.", 'start': 227.523, 'duration': 1.261}, {'end': 233.053, 'text': "Okay, underneath the H1, let's put an H2.", 'start': 229.892, 'duration': 3.161}, {'end': 237.415, 'text': 'And this is going to ask us what our focus is.', 'start': 235.314, 'duration': 2.101}], 'summary': 'Creating separate elements for greeting and name with ids for later javascript insertion.', 'duration': 28.423, 'max_score': 208.992, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSTQzlprGLI/pics/fSTQzlprGLI208992.jpg'}, {'end': 305.651, 'src': 'embed', 'start': 262.506, 'weight': 0, 'content': [{'end': 266.049, 'text': "That's that's how I could actually click inside of it and change the content.", 'start': 262.506, 'duration': 3.543}, {'end': 272.897, 'text': 'And to do that, we just use an HTML5 attribute called content editable and we set that to true.', 'start': 266.409, 'duration': 6.488}, {'end': 274.518, 'text': "So we're going to do that on the name.", 'start': 273.217, 'duration': 1.301}, {'end': 278.503, 'text': "We're also going to do that on focus on this H2 right here.", 'start': 274.538, 'duration': 3.965}, {'end': 281.026, 'text': "So we'll say content editable true.", 'start': 278.563, 'duration': 2.463}, {'end': 285.34, 'text': "And I'm pretty sure that should do it as far as the markup.", 'start': 282.618, 'duration': 2.722}, {'end': 286.26, 'text': "So let's save that.", 'start': 285.38, 'duration': 0.88}, {'end': 291.623, 'text': "Now I'm going to open this with live server, which I have running.", 'start': 286.821, 'duration': 4.802}, {'end': 293.204, 'text': "I'm just going to stop and restart it.", 'start': 291.663, 'duration': 1.541}, {'end': 295.446, 'text': 'Live server is just a VS code extension.', 'start': 293.244, 'duration': 2.202}, {'end': 302.67, 'text': 'I know a lot of you guys know that you do want to run this on some kind of server or you might have some image issues with the images.', 'start': 295.486, 'duration': 7.184}, {'end': 303.59, 'text': 'All right.', 'start': 303.31, 'duration': 0.28}, {'end': 304.691, 'text': 'So this is what it looks like.', 'start': 303.61, 'duration': 1.081}, {'end': 305.651, 'text': 'Pretty crappy.', 'start': 304.911, 'duration': 0.74}], 'summary': 'Using html5 attribute content editable to change content, demonstrated with live server in vs code.', 'duration': 43.145, 'max_score': 262.506, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSTQzlprGLI/pics/fSTQzlprGLI262506.jpg'}], 'start': 92.171, 'title': 'Creating web content', 'summary': 'Covers creating a chrome extension, dealing with local storage and dom manipulation, inserting content into html through javascript, creating an html page with css and javascript, adding links to style sheet, inserting time tags and elements with ids, hard coding initial values for later javascript insertion, and using the content editable attribute in html5 to make elements editable.', 'chapters': [{'end': 157.539, 'start': 92.171, 'title': 'Creating chrome extension basics', 'summary': 'Covers creating a simple chrome extension, dealing with local storage and dom manipulation, and inserting content into html through javascript.', 'duration': 65.368, 'highlights': ['The chapter covers creating a simple chrome extension, dealing with local storage and DOM manipulation, and inserting content into HTML through JavaScript.', 'The file structure includes index HTML, style CSS, main JS inside a JS and a CSS folder, and an IMG folder with morning, afternoon, and night images.', 'The images used in the project were obtained from Pexels.com, and the links to the images are available in the description.', "The HTML file starts with a title 'welcome' for the project."]}, {'end': 233.053, 'start': 157.599, 'title': 'Creating html with css and javascript', 'summary': 'Discusses creating an html page with css and javascript, including adding links to style sheet, inserting time tags and elements with ids, and hard coding initial values for later javascript insertion.', 'duration': 75.454, 'highlights': ['Adding a link to the style sheet using the tag and specifying the CSS file', "Inserting a time tag with an ID of 'time' and hard coding the time value, such as 12:17 and AM/PM", "Creating separate elements for greeting and name using tags with IDs of 'greeting' and 'name' respectively"]}, {'end': 305.651, 'start': 235.314, 'title': 'Html content editable attribute', 'summary': "Explains how to use the content editable attribute in html5 to make elements editable, such as setting 'content editable' to true to allow users to edit the focus and name fields, which can be particularly useful for creating interactive web content.", 'duration': 70.337, 'highlights': ["The chapter explains how to make elements editable using the content editable attribute in HTML5, such as setting 'content editable' to true for the focus and name fields.", "The speaker demonstrates using the 'content editable' attribute in the context of an H2 element to allow users to change the content by clicking inside and editing it, promoting interactive web development.", 'The chapter emphasizes the importance of running the code on a server to avoid potential image issues that may arise.']}], 'duration': 213.48, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSTQzlprGLI/pics/fSTQzlprGLI92171.jpg', 'highlights': ['The chapter emphasizes the importance of running the code on a server to avoid potential image issues that may arise.', "The chapter explains how to make elements editable using the content editable attribute in HTML5, such as setting 'content editable' to true for the focus and name fields.", "The speaker demonstrates using the 'content editable' attribute in the context of an H2 element to allow users to change the content by clicking inside and editing it, promoting interactive web development.", "Creating separate elements for greeting and name using tags with IDs of 'greeting' and 'name' respectively", "Inserting a time tag with an ID of 'time' and hard coding the time value, such as 12:17 and AM/PM", 'Adding a link to the style sheet using the tag and specifying the CSS file', 'The file structure includes index HTML, style CSS, main JS inside a JS and a CSS folder, and an IMG folder with morning, afternoon, and night images.', "The HTML file starts with a title 'welcome' for the project.", 'The chapter covers creating a simple chrome extension, dealing with local storage and DOM manipulation, and inserting content into HTML through JavaScript.', 'The images used in the project were obtained from Pexels.com, and the links to the images are available in the description.']}, {'end': 808.7, 'segs': [{'end': 391.671, 'src': 'embed', 'start': 305.692, 'weight': 0, 'content': [{'end': 309.314, 'text': "So we're going to style it real quick, which isn't going to isn't going to be much at all.", 'start': 305.692, 'duration': 3.622}, {'end': 311.435, 'text': "Let's add a reset here.", 'start': 310.294, 'duration': 1.141}, {'end': 321.081, 'text': "I'm going to say border box, border box is going to be not portable.", 'start': 312.116, 'duration': 8.965}, {'end': 325.104, 'text': 'What am I doing? Box sizing is going to be border box.', 'start': 321.101, 'duration': 4.003}, {'end': 331.388, 'text': "And then let's set margin to zero and padding to zero.", 'start': 326.024, 'duration': 5.364}, {'end': 333.549, 'text': 'All right.', 'start': 331.408, 'duration': 2.141}, {'end': 337.111, 'text': "Now, as far as the font, I'm actually going to use a font called quicksand.", 'start': 333.609, 'duration': 3.502}, {'end': 341.654, 'text': "So I'm going to just grab that real quick from fonts dot Google.", 'start': 337.291, 'duration': 4.363}, {'end': 348.874, 'text': "and let's see we'll search for quicksand.", 'start': 344.752, 'duration': 4.122}, {'end': 359.279, 'text': "click the little plus button here, click on this and let's grab this link here and put this in our html right above the style css.", 'start': 348.874, 'duration': 10.405}, {'end': 369.748, 'text': "okay. and then let's grab this font family and we can close that up and let's put that in the body All right.", 'start': 359.279, 'duration': 10.469}, {'end': 375.756, 'text': "now, the way I'm going to style this is pretty simple and the body is going to be a flex box, so everything in it is going to be a flex item.", 'start': 369.748, 'duration': 6.008}, {'end': 385.868, 'text': "So let's say display flex and instead of them going the elements going in a row which they do by default I want them in a column going up and down.", 'start': 375.936, 'duration': 9.932}, {'end': 389.172, 'text': "So we're going to set flex direction to column.", 'start': 385.928, 'duration': 3.244}, {'end': 390.09, 'text': 'All right.', 'start': 389.83, 'duration': 0.26}, {'end': 391.671, 'text': 'We also want to align everything.', 'start': 390.11, 'duration': 1.561}], 'summary': "Styling the webpage with font 'quicksand' and setting flexbox for column layout.", 'duration': 85.979, 'max_score': 305.692, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSTQzlprGLI/pics/fSTQzlprGLI305692.jpg'}, {'end': 452.093, 'src': 'embed', 'start': 422.652, 'weight': 5, 'content': [{'end': 426.756, 'text': 'Obviously, we need to deal with the text sizing and the text spacing here.', 'start': 422.652, 'duration': 4.104}, {'end': 435.606, 'text': "So back in our CSS, let's grab the time ID and let's set the font size.", 'start': 427.257, 'duration': 8.349}, {'end': 437.227, 'text': "Let's do 8rem.", 'start': 436.687, 'duration': 0.54}, {'end': 443.166, 'text': 'and the, the h1 and the h2s.', 'start': 440.184, 'duration': 2.982}, {'end': 452.093, 'text': "i'm going to leave the same size, the initial size, but i'm just going to add a margin bottom to space things out a little bit.", 'start': 443.166, 'duration': 8.927}], 'summary': 'Adjust text sizing and spacing using css: time id font size set to 8rem, h1 and h2s retain initial size with added margin bottom for spacing.', 'duration': 29.441, 'max_score': 422.652, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSTQzlprGLI/pics/fSTQzlprGLI422652.jpg'}, {'end': 508.872, 'src': 'heatmap', 'start': 481.466, 'weight': 0.771, 'content': [{'end': 489.203, 'text': "So let's say a max width when the screen is a max width of seven hundred pixels or less than that.", 'start': 481.466, 'duration': 7.737}, {'end': 497.711, 'text': "then we're going to take the time element and we're going to change the font size to 6rem from 8rem.", 'start': 489.203, 'duration': 8.508}, {'end': 501.628, 'text': 'Okay, so now if we take a look, should look like that.', 'start': 499.087, 'duration': 2.541}, {'end': 503.689, 'text': 'All right, and the background image.', 'start': 502.209, 'duration': 1.48}, {'end': 508.872, 'text': "obviously that's gonna get inserted through JavaScript, because it depends on the time of day.", 'start': 503.689, 'duration': 5.183}], 'summary': 'Adjust font size to 6rem for screen width < 700px.', 'duration': 27.406, 'max_score': 481.466, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSTQzlprGLI/pics/fSTQzlprGLI481466.jpg'}, {'end': 618.433, 'src': 'embed', 'start': 590.278, 'weight': 1, 'content': [{'end': 595.662, 'text': "we're going to call the show time function within itself every second to update the time every second.", 'start': 590.278, 'duration': 5.384}, {'end': 599.185, 'text': 'And that way we can actually see the seconds on the screen updating.', 'start': 596.162, 'duration': 3.023}, {'end': 606.31, 'text': "So let's say function, show time and let's.", 'start': 599.705, 'duration': 6.605}, {'end': 610.369, 'text': "I'm just going to use let here and let's do Today.", 'start': 606.31, 'duration': 4.059}, {'end': 615.952, 'text': "I'll just call this today and we'll say new date, new space date.", 'start': 610.369, 'duration': 5.583}, {'end': 618.433, 'text': "So that's going to give us the current date and time.", 'start': 616.472, 'duration': 1.961}], 'summary': 'The show time function updates the time every second, displaying current date and time on the screen.', 'duration': 28.155, 'max_score': 590.278, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSTQzlprGLI/pics/fSTQzlprGLI590278.jpg'}], 'start': 305.692, 'title': 'Css styling and flexbox in web development', 'summary': "Covers quick tips for css styling including setting box sizing to border box, resetting margin and padding to zero, and using the 'quicksand' font from google fonts. it also explains how to style a webpage using flexbox, with the body set as a flex container, and demonstrates creating a function in vanilla javascript to display the current time in a 12-hour format, updating every second.", 'chapters': [{'end': 369.748, 'start': 305.692, 'title': 'Css styling quick tips', 'summary': "Covers quick tips for css styling, including setting box sizing to border box, resetting margin and padding to zero, and using the 'quicksand' font from google fonts.", 'duration': 64.056, 'highlights': ['Setting box sizing to border box and resetting margin and padding can streamline CSS styling.', "Using the 'Quicksand' font from Google Fonts for styling.", "Adding the 'Quicksand' font link above the style.css in the HTML document."]}, {'end': 808.7, 'start': 369.748, 'title': 'Styling with flexbox and vanilla javascript', 'summary': 'Explains how to style a webpage using flexbox, with the body set as a flex container, and demonstrates creating a function in vanilla javascript to display the current time in a 12-hour format, updating every second.', 'duration': 438.952, 'highlights': ['Styling the webpage using flexbox The presenter explains how to use flexbox to style the webpage, setting the body as a flex container with elements displayed in a column, aligned center, and taking up the entire viewport.', 'Adjusting text sizing and spacing The presenter demonstrates setting different font sizes and margin bottoms for specific elements, such as setting the font size for the time to 8rem and adding a margin bottom of 3rem.', 'Creating a function in Vanilla JavaScript to display the time The presenter illustrates creating a function to display the current time in a 12-hour format, updating every second, by grabbing DOM elements and using methods like getHours and getMinutes.']}], 'duration': 503.008, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSTQzlprGLI/pics/fSTQzlprGLI305692.jpg', 'highlights': ["Using the 'Quicksand' font from Google Fonts for styling.", 'Creating a function in Vanilla JavaScript to display the time in a 12-hour format, updating every second.', 'Styling the webpage using flexbox, setting the body as a flex container with elements displayed in a column, aligned center, and taking up the entire viewport.', 'Setting box sizing to border box and resetting margin and padding can streamline CSS styling.', "Adding the 'Quicksand' font link above the style.css in the HTML document.", 'Adjusting text sizing and spacing, such as setting the font size for the time to 8rem and adding a margin bottom of 3rem.']}, {'end': 1264.44, 'segs': [{'end': 836.583, 'src': 'embed', 'start': 808.76, 'weight': 1, 'content': [{'end': 813.881, 'text': "Now, once I output this, you're going to see that there's an issue with it, but we'll fix it afterwards.", 'start': 808.76, 'duration': 5.121}, {'end': 817.222, 'text': 'Now we want to call this show time every second.', 'start': 814.462, 'duration': 2.76}, {'end': 820.243, 'text': "OK, once it's called once, it should call every second.", 'start': 817.522, 'duration': 2.721}, {'end': 821.884, 'text': 'We do that with set time out.', 'start': 820.323, 'duration': 1.561}, {'end': 836.583, 'text': 'So set time out takes in a function, either a self calling function or in this case, Show time and then it takes in, you know, an interval.', 'start': 823.664, 'duration': 12.919}], 'summary': 'Demonstrating the use of set time out to call a function every second.', 'duration': 27.823, 'max_score': 808.76, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSTQzlprGLI/pics/fSTQzlprGLI808760.jpg'}, {'end': 872.889, 'src': 'heatmap', 'start': 844.35, 'weight': 1, 'content': [{'end': 848.493, 'text': "And then finally, down here, I'm just going to say run and we'll call show time.", 'start': 844.35, 'duration': 4.143}, {'end': 851.195, 'text': 'All right.', 'start': 848.513, 'duration': 2.682}, {'end': 855.439, 'text': "So let's save that and let's see what happens if we go to our browser and there we go.", 'start': 851.215, 'duration': 4.224}, {'end': 856.019, 'text': "It's working.", 'start': 855.519, 'duration': 0.5}, {'end': 865.78, 'text': "Now, the problem that I mentioned, you can't tell yet because there's no 0, 1, 0, 2, and so on.", 'start': 857.751, 'duration': 8.029}, {'end': 867.322, 'text': 'I could sit here and wait.', 'start': 866.281, 'duration': 1.041}, {'end': 872.889, 'text': "But basically, when it gets to 1 second, it's just going to be a 1 with no 0.", 'start': 867.362, 'duration': 5.527}], 'summary': 'Code successfully runs, but display issue at 1 second mark.', 'duration': 28.539, 'max_score': 844.35, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSTQzlprGLI/pics/fSTQzlprGLI844350.jpg'}, {'end': 1054.712, 'src': 'embed', 'start': 1017.995, 'weight': 0, 'content': [{'end': 1031.3, 'text': 'So like I said, we need a function to set background to say set background and greeting.', 'start': 1017.995, 'duration': 13.305}, {'end': 1036.282, 'text': "So function, I'm just going to call it set BG.", 'start': 1033.181, 'duration': 3.101}, {'end': 1043.743, 'text': "Set BG greet, I guess not the best name, but whatever, it's fine.", 'start': 1039.3, 'duration': 4.443}, {'end': 1051.25, 'text': "So the idea that we have to do here is get the time, but we only need the hour, because that's what we need to.", 'start': 1044.645, 'duration': 6.605}, {'end': 1054.712, 'text': 'we need to basically run a condition on to see what time of day it is.', 'start': 1051.25, 'duration': 3.462}], 'summary': 'Create a function to set background and greeting based on the time of day.', 'duration': 36.717, 'max_score': 1017.995, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSTQzlprGLI/pics/fSTQzlprGLI1017995.jpg'}], 'start': 808.76, 'title': 'Displaying time intervals', 'summary': 'Explains how to display time intervals, fix missing leading zeros, and change background and greeting based on the time of day using javascript functions.', 'chapters': [{'end': 1264.44, 'start': 808.76, 'title': 'Setting and displaying time intervals', 'summary': 'Explains how to display time intervals, including fixing an issue with missing leading zeros, and changing background and greeting based on the time of day using javascript functions.', 'duration': 455.68, 'highlights': ["Setting up a function to display time intervals with leading zeros The speaker explains the use of set time out function to display time intervals every second, and introduces a function 'add zero' to add leading zeros to the time if needed.", "Creating a function to change background and greeting based on time of day The chapter demonstrates the creation of a function 'set BG greet' to change the background image and greeting text based on the time of day, distinguishing between morning, afternoon, and evening."]}], 'duration': 455.68, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSTQzlprGLI/pics/fSTQzlprGLI808760.jpg', 'highlights': ["Creating a function to change background and greeting based on time of day The chapter demonstrates the creation of a function 'set BG greet' to change the background image and greeting text based on the time of day, distinguishing between morning, afternoon, and evening.", "Setting up a function to display time intervals with leading zeros The speaker explains the use of set time out function to display time intervals every second, and introduces a function 'add zero' to add leading zeros to the time if needed."]}, {'end': 1502.802, 'segs': [{'end': 1383.837, 'src': 'embed', 'start': 1293.203, 'weight': 0, 'content': [{'end': 1299.566, 'text': 'okay. so the next thing we want to do is the the name and the focus.', 'start': 1293.203, 'duration': 6.363}, {'end': 1302.567, 'text': 'we want those to be editable, which they are.', 'start': 1299.566, 'duration': 3.001}, {'end': 1309.69, 'text': "if i click in here, i can change this and that's fine for the time being, but once i reload, it goes away.", 'start': 1302.567, 'duration': 7.123}, {'end': 1311.671, 'text': "it's not going to save it.", 'start': 1309.69, 'duration': 1.981}, {'end': 1315.453, 'text': "it's just that attribute simply makes it editable in the browser.", 'start': 1311.671, 'duration': 3.782}, {'end': 1316.653, 'text': "it doesn't do anything else.", 'start': 1315.453, 'duration': 1.2}, {'end': 1318.414, 'text': 'we want to save it to local storage.', 'start': 1316.653, 'duration': 1.761}, {'end': 1330.747, 'text': "So in our main JS here we're basically going to have a get a set name and a get name and also a set focus and a get focus.", 'start': 1319.254, 'duration': 11.493}, {'end': 1340.878, 'text': "So let's go ahead and let's do let's say get name function, get name.", 'start': 1331.047, 'duration': 9.831}, {'end': 1346.86, 'text': 'And all I want to do here is check to see what is in local storage.', 'start': 1342.777, 'duration': 4.083}, {'end': 1349.121, 'text': "If there's nothing in there, we can set a default.", 'start': 1347.02, 'duration': 2.101}, {'end': 1351.743, 'text': "If there is something, we'll just set that.", 'start': 1349.281, 'duration': 2.462}, {'end': 1355.245, 'text': "So let's check.", 'start': 1353.904, 'duration': 1.341}, {'end': 1361.669, 'text': 'The way that we deal with local storage is we simply say local storage, and then it has some methods attached to it.', 'start': 1356.586, 'duration': 5.083}, {'end': 1362.87, 'text': 'We want get item.', 'start': 1361.73, 'duration': 1.14}, {'end': 1366.933, 'text': "We want to check if there's a local storage item called names.", 'start': 1363.611, 'duration': 3.322}, {'end': 1373.235, 'text': "OK, And we actually want to check to see if it's, if it's null, if it's not there.", 'start': 1367.873, 'duration': 5.362}, {'end': 1383.837, 'text': "and if it's not there, then we're going to take our name elements and we're going to add the text content.", 'start': 1373.235, 'duration': 10.602}], 'summary': 'Implementing editable name and focus fields, saving to local storage using javascript.', 'duration': 90.634, 'max_score': 1293.203, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSTQzlprGLI/pics/fSTQzlprGLI1293203.jpg'}, {'end': 1511.427, 'src': 'embed', 'start': 1480.025, 'weight': 5, 'content': [{'end': 1485.286, 'text': "So now you can see that we get enter focus and we can change it, but it doesn't stick yet.", 'start': 1480.025, 'duration': 5.261}, {'end': 1486.646, 'text': 'All right.', 'start': 1485.306, 'duration': 1.34}, {'end': 1494.248, 'text': "So in our HTML, let's get rid of this and let's get rid of the actual this focus here.", 'start': 1486.746, 'duration': 7.502}, {'end': 1501.281, 'text': "because now it's getting inserted through JavaScript and there's there shouldn't be anything else we need to do within the HTML or CSS.", 'start': 1494.997, 'duration': 6.284}, {'end': 1502.802, 'text': "So I'm going to close that up.", 'start': 1501.301, 'duration': 1.501}, {'end': 1511.427, 'text': 'So now we need when we enter a name or focus for that matter, we need it to to update.', 'start': 1504.163, 'duration': 7.264}], 'summary': 'Javascript inserts focus, needs update on name or focus entry', 'duration': 31.402, 'max_score': 1480.025, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSTQzlprGLI/pics/fSTQzlprGLI1480025.jpg'}], 'start': 1264.961, 'title': 'Managing user input and local storage', 'summary': 'Explains managing user input and local storage for name and focus using javascript, setting default values, and saving user input to local storage, as well as utilizing local storage to store and retrieve focus data, ensuring persistent changes in html through javascript.', 'chapters': [{'end': 1405.812, 'start': 1264.961, 'title': 'Manage user input and local storage', 'summary': 'Explains how to manage user input and local storage for name and focus in a web application, utilizing javascript to set default values and save user input to local storage.', 'duration': 140.851, 'highlights': ['The chapter covers setting default values and saving user input for name and focus to local storage using JavaScript.', 'The transcript discusses the process of checking local storage for existing data and setting default values if data is not present.', 'It explains the steps to make the name and focus elements editable for user input in a web application.']}, {'end': 1502.802, 'start': 1405.852, 'title': 'Using local storage for focus', 'summary': 'Discusses utilizing local storage to store and retrieve the focus data, making changes through javascript, and ensuring the changes persist in the html without needing further adjustments.', 'duration': 96.95, 'highlights': ['Utilizing local storage for storing and retrieving the focus data through JavaScript.', 'Making changes to the focus data using JavaScript and observing that the changes are not persisting.', 'Modifying the HTML to ensure the changes made through JavaScript persist without requiring further adjustments.']}], 'duration': 237.841, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSTQzlprGLI/pics/fSTQzlprGLI1264961.jpg', 'highlights': ['The chapter covers setting default values and saving user input for name and focus to local storage using JavaScript.', 'Explains managing user input and local storage for name and focus using JavaScript.', 'Utilizing local storage for storing and retrieving the focus data through JavaScript.', 'The transcript discusses the process of checking local storage for existing data and setting default values if data is not present.', 'It explains the steps to make the name and focus elements editable for user input in a web application.', 'Modifying the HTML to ensure the changes made through JavaScript persist without requiring further adjustments.', 'Making changes to the focus data using JavaScript and observing that the changes are not persisting.']}, {'end': 2110.663, 'segs': [{'end': 1594.002, 'src': 'embed', 'start': 1562.355, 'weight': 0, 'content': [{'end': 1566.359, 'text': "And then I'll copy this down and we're going to call set name on blur as well.", 'start': 1562.355, 'duration': 4.004}, {'end': 1575.404, 'text': "All right, so let's go up here and I'm going to go right below get name and let's do set name.", 'start': 1568.993, 'duration': 6.411}, {'end': 1579.11, 'text': 'So function set name.', 'start': 1577.628, 'duration': 1.482}, {'end': 1591.121, 'text': 'OK, now for set name, we need to make sure that the key press is an enter in order for it to actually update local storage.', 'start': 1580.996, 'duration': 10.125}, {'end': 1594.002, 'text': "I don't want it to update local storage on every single key press.", 'start': 1591.141, 'duration': 2.861}], 'summary': 'Creating a function to update local storage when the enter key is pressed.', 'duration': 31.647, 'max_score': 1562.355, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSTQzlprGLI/pics/fSTQzlprGLI1562355.jpg'}, {'end': 1677.865, 'src': 'embed', 'start': 1645.474, 'weight': 3, 'content': [{'end': 1648.718, 'text': 'But I only want it to fire off when I hit enter like that.', 'start': 1645.474, 'duration': 3.244}, {'end': 1651.781, 'text': "And it shouldn't do this either, go on to the next line.", 'start': 1649.198, 'duration': 2.583}, {'end': 1656.046, 'text': "So with that said, for the blur, it's pretty simple.", 'start': 1652.682, 'duration': 3.364}, {'end': 1658.749, 'text': 'We can just store in local storage.', 'start': 1656.086, 'duration': 2.663}, {'end': 1660.591, 'text': 'We can say set item.', 'start': 1658.809, 'duration': 1.782}, {'end': 1664.872, 'text': "And let's say we want to set name.", 'start': 1663.07, 'duration': 1.802}, {'end': 1668.556, 'text': 'And then the second value is what we want to save.', 'start': 1665.373, 'duration': 3.183}, {'end': 1670.938, 'text': 'Now we want to save whatever is typed in.', 'start': 1669.076, 'duration': 1.862}, {'end': 1677.865, 'text': "And we can get that with e.target, meaning we're grabbing the element that was clicked on, in this case the name.", 'start': 1670.958, 'duration': 6.907}], 'summary': "Storing typed input in local storage when 'enter' is pressed, avoiding new line, using event.target to get clicked element.", 'duration': 32.391, 'max_score': 1645.474, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSTQzlprGLI/pics/fSTQzlprGLI1645474.jpg'}, {'end': 1749.952, 'src': 'embed', 'start': 1722.633, 'weight': 2, 'content': [{'end': 1729.84, 'text': "Now, I believe that's deprecated, but this doesn't work in some browsers or something like that.", 'start': 1722.633, 'duration': 7.207}, {'end': 1731.361, 'text': 'So, we want to just do both of these.', 'start': 1729.9, 'duration': 1.461}, {'end': 1733.924, 'text': 'We also want to check the key code.', 'start': 1731.822, 'duration': 2.102}, {'end': 1738.648, 'text': 'So, we want to see if the key code is also equal to 13.', 'start': 1735.025, 'duration': 3.623}, {'end': 1741.892, 'text': 'That will cover all the browsers, I believe.', 'start': 1738.648, 'duration': 3.244}, {'end': 1747.631, 'text': 'OK, so basically when the enter is pressed, we want to do this same exact thing.', 'start': 1742.748, 'duration': 4.883}, {'end': 1749.952, 'text': "Right So we'll just grab that.", 'start': 1747.691, 'duration': 2.261}], 'summary': 'Checking for key code 13 to cover all browsers.', 'duration': 27.319, 'max_score': 1722.633, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSTQzlprGLI/pics/fSTQzlprGLI1722633.jpg'}, {'end': 1795.222, 'src': 'heatmap', 'start': 1752.233, 'weight': 0.796, 'content': [{'end': 1755.835, 'text': 'Now, you saw how when I clicked enter, it went on to the next line.', 'start': 1752.233, 'duration': 3.602}, {'end': 1756.896, 'text': "I don't want that to happen.", 'start': 1755.875, 'duration': 1.021}, {'end': 1762.479, 'text': 'I just want it to basically get out of that state out of, you know, not have the cursor anymore.', 'start': 1756.916, 'duration': 5.563}, {'end': 1769.083, 'text': 'So what I can do is just take name and I can call blur like that and that will take us out of that state.', 'start': 1762.539, 'duration': 6.544}, {'end': 1770.324, 'text': 'All right.', 'start': 1769.103, 'duration': 1.221}, {'end': 1772.365, 'text': "So let's save that and let's go back.", 'start': 1770.344, 'duration': 2.021}, {'end': 1775.457, 'text': "And I'm going to just type something in here.", 'start': 1773.716, 'duration': 1.741}, {'end': 1779.599, 'text': 'Now, if I hit enter, there we go.', 'start': 1777.038, 'duration': 2.561}, {'end': 1780.619, 'text': 'You can see it blurs.', 'start': 1779.639, 'duration': 0.98}, {'end': 1782.38, 'text': 'It just gets out of that state.', 'start': 1780.679, 'duration': 1.701}, {'end': 1784.521, 'text': 'And if I reload, it sticks.', 'start': 1782.72, 'duration': 1.801}, {'end': 1790.464, 'text': 'OK And if I look in my application, local storage, there it is.', 'start': 1785.502, 'duration': 4.962}, {'end': 1791.745, 'text': 'And I can actually delete it.', 'start': 1790.524, 'duration': 1.221}, {'end': 1795.222, 'text': 'reload and I can see I can enter it again.', 'start': 1792.901, 'duration': 2.321}], 'summary': 'Demonstrates using blur method to exit state, ensuring enter key does not create new line, and using local storage.', 'duration': 42.989, 'max_score': 1752.233, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSTQzlprGLI/pics/fSTQzlprGLI1752233.jpg'}, {'end': 1839.489, 'src': 'embed', 'start': 1797.162, 'weight': 4, 'content': [{'end': 1802.883, 'text': "I'm just going to click somewhere else and that fires off the blur, which then stores it in local storage.", 'start': 1797.162, 'duration': 5.721}, {'end': 1807.945, 'text': 'OK, now we want to do pretty much the same exact thing for focus.', 'start': 1804.164, 'duration': 3.781}, {'end': 1811.265, 'text': "So I'm going to.", 'start': 1808.705, 'duration': 2.56}, {'end': 1815.466, 'text': 'We could just copy this down and instead of.', 'start': 1812.166, 'duration': 3.3}, {'end': 1818.907, 'text': "Listening on name, let's listen.", 'start': 1817.027, 'duration': 1.88}, {'end': 1821.688, 'text': 'On focus.', 'start': 1818.927, 'duration': 2.761}, {'end': 1826.546, 'text': "And let's call set focus.", 'start': 1824.805, 'duration': 1.741}, {'end': 1839.489, 'text': "OK, and then I'll just copy set name and put this right below get focus.", 'start': 1826.566, 'duration': 12.923}], 'summary': 'Javascript functions added to handle blur and focus events.', 'duration': 42.327, 'max_score': 1797.162, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSTQzlprGLI/pics/fSTQzlprGLI1797162.jpg'}, {'end': 1926.785, 'src': 'embed', 'start': 1896.807, 'weight': 5, 'content': [{'end': 1904.111, 'text': 'If you want to test out like the greeting and stuff, you could change the time to something else or change the date and time.', 'start': 1896.807, 'duration': 7.304}, {'end': 1910.054, 'text': "However, the seconds aren't going to work if we do that, at least the way that I'm going to do it.", 'start': 1904.791, 'duration': 5.263}, {'end': 1913.676, 'text': "But I'm going to grab a nighttime date.", 'start': 1910.654, 'duration': 3.022}, {'end': 1917.558, 'text': "So let's see, I'm just going to.", 'start': 1915.817, 'duration': 1.741}, {'end': 1921.921, 'text': 'I mean, you want to do this in Showtime.', 'start': 1920.06, 'duration': 1.861}, {'end': 1926.785, 'text': "I'm going to paste this in and I'll comment this out.", 'start': 1921.941, 'duration': 4.844}], 'summary': "Changing the time and date for testing functionality, but seconds won't work as intended.", 'duration': 29.978, 'max_score': 1896.807, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSTQzlprGLI/pics/fSTQzlprGLI1896807.jpg'}, {'end': 2063.92, 'src': 'embed', 'start': 2034.171, 'weight': 6, 'content': [{'end': 2035.291, 'text': 'Good And we get PM.', 'start': 2034.171, 'duration': 1.12}, {'end': 2040.672, 'text': 'And if you want to mess around with the dates and, you know, check the morning one, you can do that.', 'start': 2036.852, 'duration': 3.82}, {'end': 2042.593, 'text': "But I'm pretty sure it works.", 'start': 2041.152, 'duration': 1.441}, {'end': 2044.473, 'text': "So that's it, guys.", 'start': 2043.493, 'duration': 0.98}, {'end': 2045.593, 'text': 'Hopefully you enjoyed this.', 'start': 2044.493, 'duration': 1.1}, {'end': 2052.674, 'text': "I mean, you know, it wasn't a complicated project, but I think it's good for people that are beginner to intermediate intermediate JavaScript.", 'start': 2045.873, 'duration': 6.801}, {'end': 2058.377, 'text': "I enjoy doing things that don't require a framework or library or anything.", 'start': 2053.655, 'duration': 4.722}, {'end': 2061.438, 'text': "If you're building something as simple as this, there's no need to use React.", 'start': 2058.437, 'duration': 3.001}, {'end': 2063.92, 'text': "There really isn't.", 'start': 2061.458, 'duration': 2.462}], 'summary': 'Simple javascript project suitable for beginner to intermediate level, no need for react.', 'duration': 29.749, 'max_score': 2034.171, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSTQzlprGLI/pics/fSTQzlprGLI2034171.jpg'}, {'end': 2110.663, 'src': 'embed', 'start': 2093.856, 'weight': 7, 'content': [{'end': 2103.904, 'text': 'You get 130 page guide to freelancing and it comes with things like invoice templates, client proposals, HTML and CSS templates, a portfolio website,', 'start': 2093.856, 'duration': 10.048}, {'end': 2106.566, 'text': 'access to a private Facebook community and much more.', 'start': 2103.904, 'duration': 2.662}, {'end': 2108.668, 'text': 'So use the code Brad25 to get 25% off today.', 'start': 2106.846, 'duration': 1.822}, {'end': 2110.663, 'text': 'Thank you.', 'start': 2110.469, 'duration': 0.194}], 'summary': 'Get 130-page freelancing guide with 25% off using code brad25', 'duration': 16.807, 'max_score': 2093.856, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSTQzlprGLI/pics/fSTQzlprGLI2093856.jpg'}], 'start': 1504.163, 'title': 'Event listeners and local storage in javascript', 'summary': 'Covers updating name input using event listeners for key press and blur events, managing focus and blur events for input states, and setting time and greeting with options to display am or pm. it includes examples of storing and retrieving data from local storage, ensuring seamless data persistence, and is suitable for beginner to intermediate javascript learners.', 'chapters': [{'end': 1749.952, 'start': 1504.163, 'title': 'Updating name input with event listeners', 'summary': "Explains the process of updating a name input using event listeners for key press and blur events, ensuring the update occurs on hitting 'enter' and storing the input in local storage.", 'duration': 245.789, 'highlights': ['The function set name is called for both key press and blur events to update local storage and clear out the input field. The set name function is invoked for both key press and blur events to update local storage and clear out the input field, ensuring a consistent behavior for updating the name input.', "The key press event is used to specifically check if 'enter' is pressed before updating the local storage with the input value. The key press event is utilized to verify if the 'enter' key is pressed, ensuring that the local storage is updated only when the 'enter' key is pressed.", "Both e.which and e.keycode are checked to ensure that the 'enter' key press is properly detected across different browsers. The code checks both e.which and e.keycode to handle the 'enter' key press, ensuring compatibility across various browsers for detecting the 'enter' key press event."]}, {'end': 1896.447, 'start': 1750.072, 'title': 'Managing focus and blur in local storage', 'summary': 'Demonstrates how to use blur and focus events to manage input states, with examples of storing and retrieving data from local storage, ultimately achieving seamless data persistence and event-driven interactions.', 'duration': 146.375, 'highlights': ['The chapter explains how to use the blur event to remove the cursor from the input state and store the data in local storage, ensuring seamless data persistence and event-driven interactions.', 'Demonstrates the usage of the focus event to store input data in local storage, showcasing the seamless data persistence and event-driven interactions.', 'Illustrates the process of using blur and focus events to manage input states, enabling seamless data persistence and event-driven interactions.']}, {'end': 2110.663, 'start': 1896.807, 'title': 'Setting time and greeting', 'summary': 'Discusses setting the date and time for a greeting message, testing different time formats, and adding an option to display am or pm, suitable for beginner to intermediate javascript learners.', 'duration': 213.856, 'highlights': ['Setting date and time for greeting message, testing different time formats, and adding option to display AM or PM.', 'Emphasizing the simplicity of the project and the suitability for beginner to intermediate JavaScript learners.', 'Promoting a resource for starting a freelance business and providing a discount code for the bundle.']}], 'duration': 606.5, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSTQzlprGLI/pics/fSTQzlprGLI1504163.jpg', 'highlights': ['The function set name is called for both key press and blur events to update local storage and clear out the input field.', "The key press event is used to specifically check if 'enter' is pressed before updating the local storage with the input value.", "Both e.which and e.keycode are checked to ensure that the 'enter' key press is properly detected across different browsers.", 'The chapter explains how to use the blur event to remove the cursor from the input state and store the data in local storage.', 'Illustrates the process of using blur and focus events to manage input states, enabling seamless data persistence and event-driven interactions.', 'Setting date and time for greeting message, testing different time formats, and adding option to display AM or PM.', 'Emphasizing the simplicity of the project and the suitability for beginner to intermediate JavaScript learners.', 'Promoting a resource for starting a freelance business and providing a discount code for the bundle.']}], 'highlights': ['Building a dynamic landing page with time-based greeting and background image', "Adding dynamic input for user's name and main focus", 'Storing user input in local storage for persistence', 'Creating a function to change background and greeting based on time of day', 'Creating a function in Vanilla JavaScript to display the time in a 12-hour format, updating every second', 'Styling the webpage using flexbox, setting the body as a flex container with elements displayed in a column, aligned center, and taking up the entire viewport', 'Creating a function to change background and greeting based on time of day', 'The chapter covers setting default values and saving user input for name and focus to local storage using JavaScript', 'The function set name is called for both key press and blur events to update local storage and clear out the input field', "The key press event is used to specifically check if 'enter' is pressed before updating the local storage with the input value"]}