title
Build A Weather App With Vanilla Javascript Tutorial | Javascript For Beginners

description
Check out my courses and become more creative! https://developedbyed.com Build A Weather App With Vanilla Javascript Tutorial | Javascript For Beginners ❤Become a patreon for exclusive videos and more! https://www.patreon.com/dev_ed Microphones I Use Audio-Technica AT2020 - https://geni.us/Re78 (Amazon) Deity V-Mic D3 Pro - https://geni.us/y0HjQbz (Amazon) BEHRINGER Audio Interface - https://geni.us/AcbCpd9 (Amazon) Camera Gear Fujifilm X-T3 - https://geni.us/7IM1 (Amazon) Fujinon XF18-55mmF2.8-4 - https://geni.us/sztaN (Amazon) PC Specs Kingston SQ500S37/480G 480GB - https://geni.us/s7HWm (Amazon) Gigabyte GeForce RTX 2070 - https://geni.us/uRw71gN (Amazon) AMD Ryzen 7 2700X - https://geni.us/NaBSC (Amazon) Corsair Vengeance LPX 16GB - https://geni.us/JDqK1KK (Amazon) ASRock B450M PRO4 - https://geni.us/YAtI (Amazon) DeepCool ATX Mid Tower - https://geni.us/U8xJY (Amazon) Dell Ultrasharp U2718Q 27-Inch 4K - https://geni.us/kXHE (Amazon) Dell Ultra Sharp LED-Lit Monitor 25 2k - https://geni.us/bilekX (Amazon) Logitech G305 - https://geni.us/PIjyn (Amazon) Logitech MX Keys Advanced - https://geni.us/YBsCVX0 (Amazon) DISCLAIMERS: I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites. Today I wanted to focus more on building an actual project using vanilla javascript. This video is intended for those who are looking on creating their first projects using javascript or you might be here from freecodecamp with their javascript weather app project. We are going to be using darksky api to pull all the necessary weather information you need. Darksky can be used free for up to 1000 api calls, so it is great for a demo project. This project is great if you want to extend your knowledge with vanilla javascript by building a real world weather app. 📔 Materials used in this video: Darksky API : https://darksky.net Icons : https://darkskyapp.github.io/skycons/ 🛴 Follow me on: Twitter: https://twitter.com/deved94 Github: https://github.com/DevEdwin

detail
{'title': 'Build A Weather App With Vanilla Javascript Tutorial | Javascript For Beginners', 'heatmap': [{'end': 528.196, 'start': 466.68, 'weight': 0.73}, {'end': 1225.516, 'start': 1188.907, 'weight': 1}, {'end': 1437.295, 'start': 1373.125, 'weight': 0.731}, {'end': 1538.912, 'start': 1506.567, 'weight': 0.752}, {'end': 2056.509, 'start': 1976.351, 'weight': 0.715}], 'summary': 'The tutorial covers building a weather app with vanilla javascript, involving apis for real-time data, css styling with flexbox and rgb colors, geolocation integration, troubleshooting api errors, implementing skycons for weather display, and creating a temperature converter, offering a comprehensive beginner-friendly project.', 'chapters': [{'end': 299.914, 'segs': [{'end': 93.011, 'src': 'embed', 'start': 4.622, 'weight': 0, 'content': [{'end': 6.403, 'text': 'why hello there everybody?', 'start': 4.622, 'duration': 1.781}, {'end': 7.863, 'text': 'how you doing today.', 'start': 6.403, 'duration': 1.46}, {'end': 9.544, 'text': 'hope you are doing fine.', 'start': 7.863, 'duration': 1.681}, {'end': 16.967, 'text': "today we're going to build a cool vanilla javascript project, and this is great if you're a beginner in javascript,", 'start': 9.544, 'duration': 7.423}, {'end': 20.388, 'text': "or even great if you don't have that many projects in javascript.", 'start': 16.967, 'duration': 3.421}, {'end': 29.993, 'text': "so this is a good way to start, i believe, because hey, you're working with apis and real world stuff, And then you're going to add the content,", 'start': 20.388, 'duration': 9.605}, {'end': 30.974, 'text': 'as you can see here.', 'start': 29.993, 'duration': 0.981}, {'end': 37.121, 'text': "So you're pulling data from a API and then you're going to inject it in your page and you're going to get these cool things.", 'start': 30.994, 'duration': 6.127}, {'end': 39.683, 'text': "So again, you're going to get the time zone here.", 'start': 37.461, 'duration': 2.222}, {'end': 42.646, 'text': "You're going to get the Fahrenheit here.", 'start': 40.023, 'duration': 2.623}, {'end': 46.529, 'text': "And if we click it, it's going to change to Celsius.", 'start': 42.666, 'duration': 3.863}, {'end': 53.293, 'text': "And you also get this cool SVG here that's going to represent what's going on.", 'start': 46.929, 'duration': 6.364}, {'end': 55.454, 'text': "So we're going to add this as well.", 'start': 53.653, 'duration': 1.801}, {'end': 56.514, 'text': 'And this changes.', 'start': 55.634, 'duration': 0.88}, {'end': 61.297, 'text': "So if the weather changes, you're going to see a cool sun icon here.", 'start': 57.075, 'duration': 4.222}, {'end': 63.098, 'text': "And we're going to take a look at that as well.", 'start': 61.357, 'duration': 1.741}, {'end': 68.201, 'text': 'So before we move on to the video, I want to actually ask you guys a question.', 'start': 63.698, 'duration': 4.503}, {'end': 77.808, 'text': "Would you like to see like a beginner JavaScript series? So I've been thinking about doing a modern JavaScript tutorial series.", 'start': 69.022, 'duration': 8.786}, {'end': 84.85, 'text': "So all the way from beginning, all the way to more advanced topics, but we're going to do it with ES 2015.", 'start': 78.048, 'duration': 6.802}, {'end': 87.45, 'text': "So we're not going to be using var and functions.", 'start': 84.85, 'duration': 2.6}, {'end': 93.011, 'text': "We're going to be using everything modern arrow functions, also const and let.", 'start': 87.57, 'duration': 5.441}], 'summary': 'Building a vanilla javascript project using apis and real-world data, incorporating features like time zone, temperature conversion, and dynamic weather icons. also considering creating a beginner javascript tutorial series with modern es 2015 features.', 'duration': 88.389, 'max_score': 4.622, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA4622.jpg'}, {'end': 196.743, 'src': 'embed', 'start': 168.338, 'weight': 3, 'content': [{'end': 171.939, 'text': "And if you want to add more things, then it's going to be very easy.", 'start': 168.338, 'duration': 3.601}, {'end': 179.587, 'text': "So what we're going to do is basically we're going to create two divs one that's going to display the location and the icon,", 'start': 172.819, 'duration': 6.768}, {'end': 182.91, 'text': 'and the other one is going to display the temperature and the description.', 'start': 179.587, 'duration': 3.323}, {'end': 186.534, 'text': "So let's do a div here with location.", 'start': 183.551, 'duration': 2.983}, {'end': 187.015, 'text': 'All right.', 'start': 186.554, 'duration': 0.461}, {'end': 193.221, 'text': "So this is the div with the location and here we're going to have the h1, which is going to be the title.", 'start': 187.998, 'duration': 5.223}, {'end': 196.743, 'text': "So we're going to say time zone for this one.", 'start': 193.361, 'duration': 3.382}], 'summary': 'Creating two divs: one for location and icon, and another for temperature and description.', 'duration': 28.405, 'max_score': 168.338, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA168338.jpg'}], 'start': 4.622, 'title': 'Building vanilla javascript projects', 'summary': 'Introduces a beginner-friendly vanilla javascript project involving working with apis to display real-time data like time zone, temperature in fahrenheit/celsius, and weather icons. it also discusses the plan to create a modern javascript tutorial series covering es 2015, including arrow functions, const, and let, and demonstrates building a basic html structure for displaying weather information from an api.', 'chapters': [{'end': 68.201, 'start': 4.622, 'title': 'Building cool vanilla javascript project', 'summary': 'Introduces building a beginner-friendly vanilla javascript project that involves working with apis to pull and display real-time data, including time zone, temperature in fahrenheit/celsius, and weather icons.', 'duration': 63.579, 'highlights': ['Working with APIs to pull real-time data and display on the web page, including time zone, temperature in Fahrenheit/Celsius, and weather icons.', 'The project is beginner-friendly and suitable for those with limited JavaScript experience.', 'Involves creating a cool SVG representation of weather changes on the web page.', 'The tutorial aims to help beginners by providing hands-on experience with real-world data and API integration.']}, {'end': 299.914, 'start': 69.022, 'title': 'Modern javascript tutorial series', 'summary': 'Discusses the plan to create a modern javascript tutorial series covering es 2015, including arrow functions, const, and let, and demonstrates building a basic html structure for displaying weather information from an api.', 'duration': 230.892, 'highlights': ['The tutorial series will cover modern JavaScript using ES 2015, including arrow functions, const, and let, offering a comprehensive guide from basic to advanced topics. The tutorial series will cover modern JavaScript using ES 2015, including arrow functions, const, and let, offering a comprehensive guide from basic to advanced topics.', 'Building a basic HTML structure to display weather information from an API, including location, icon, temperature, and description. The chapter demonstrates building a basic HTML structure to display weather information from an API, including location, icon, temperature, and description.']}], 'duration': 295.292, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA4622.jpg', 'highlights': ['Working with APIs to pull real-time data and display on the web page, including time zone, temperature in Fahrenheit/Celsius, and weather icons.', 'The project is beginner-friendly and suitable for those with limited JavaScript experience.', 'The tutorial aims to help beginners by providing hands-on experience with real-world data and API integration.', 'Building a basic HTML structure to display weather information from an API, including location, icon, temperature, and description.', 'Involves creating a cool SVG representation of weather changes on the web page.', 'The tutorial series will cover modern JavaScript using ES 2015, including arrow functions, const, and let, offering a comprehensive guide from basic to advanced topics.']}, {'end': 725.007, 'segs': [{'end': 443.043, 'src': 'embed', 'start': 299.914, 'weight': 1, 'content': [{'end': 303.375, 'text': "so we know which section we're talking about, like that.", 'start': 299.914, 'duration': 3.461}, {'end': 306.356, 'text': 'so we keep it consistent with this as well.', 'start': 303.375, 'duration': 2.981}, {'end': 306.956, 'text': 'all right.', 'start': 306.356, 'duration': 0.6}, {'end': 308.716, 'text': 'so this is everything we need.', 'start': 306.956, 'duration': 1.76}, {'end': 314.837, 'text': "all right, let's go into our CSS here and let's just add some basic styling to this.", 'start': 308.716, 'duration': 6.121}, {'end': 320.898, 'text': "we're gonna say we're gonna remove all the margins and we're gonna also remove all the paddings here.", 'start': 314.837, 'duration': 6.061}, {'end': 324.659, 'text': "we're gonna say padding 0 and box sizing.", 'start': 320.898, 'duration': 3.761}, {'end': 328.972, 'text': "We're gonna say border box like this", 'start': 326.069, 'duration': 2.903}, {'end': 336.119, 'text': "All. right now we're gonna work on our body here, because these are literally the only two sections we have.", 'start': 329.813, 'duration': 6.306}, {'end': 339.282, 'text': "so we're gonna add a height of 100 VH to this.", 'start': 336.119, 'duration': 3.163}, {'end': 340.223, 'text': "so it's full screen.", 'start': 339.282, 'duration': 0.941}, {'end': 341.924, 'text': "We're gonna say display flex.", 'start': 340.763, 'duration': 1.161}, {'end': 344.027, 'text': 'justify content.', 'start': 342.665, 'duration': 1.362}, {'end': 345.909, 'text': "we're going to say center.", 'start': 344.027, 'duration': 1.882}, {'end': 347.651, 'text': "actually, i'm going to move this in column.", 'start': 345.909, 'duration': 1.742}, {'end': 353.097, 'text': "so i'm going to say flex direction, column like this if you need help with flexbox,", 'start': 347.651, 'duration': 5.446}, {'end': 357.322, 'text': 'i posted the tutorial a few days ago explaining everything about flexbox.', 'start': 353.097, 'duration': 4.225}, {'end': 360.705, 'text': "so if you're interested in that, take a look, All right.", 'start': 357.322, 'duration': 3.383}, {'end': 363.528, 'text': "And let's do align items center as well.", 'start': 361.006, 'duration': 2.522}, {'end': 366.851, 'text': 'So just centering everything like that.', 'start': 364.248, 'duration': 2.603}, {'end': 369.413, 'text': "Let's add a linear gradient to this.", 'start': 367.491, 'duration': 1.922}, {'end': 372.235, 'text': "So we're going to say background linear gradient.", 'start': 369.853, 'duration': 2.382}, {'end': 377.66, 'text': 'I have two nice looking colors here, which are RGB.', 'start': 372.415, 'duration': 5.245}, {'end': 379.241, 'text': "We're going to say 47, 150 and 163.", 'start': 378.16, 'duration': 1.081}, {'end': 379.501, 'text': 'All right.', 'start': 379.241, 'duration': 0.26}, {'end': 381.843, 'text': 'And then we have RGB.', 'start': 379.521, 'duration': 2.322}, {'end': 393.076, 'text': 'deleted my thing.', 'start': 388.291, 'duration': 4.785}, {'end': 394.256, 'text': '48, 62.', 'start': 393.096, 'duration': 1.16}, {'end': 396.879, 'text': "Actually, let's close this up so we have more space here.", 'start': 394.257, 'duration': 2.622}, {'end': 399.922, 'text': 'Boom, more space.', 'start': 397.8, 'duration': 2.122}, {'end': 402.564, 'text': '62, 143.', 'start': 399.942, 'duration': 2.622}, {'end': 403.445, 'text': "Let's see how that looks.", 'start': 402.564, 'duration': 0.881}, {'end': 405.307, 'text': 'Should look decent.', 'start': 404.546, 'duration': 0.761}, {'end': 406.688, 'text': 'There we go.', 'start': 406.088, 'duration': 0.6}, {'end': 408.65, 'text': "I'm going to say font family.", 'start': 407.409, 'duration': 1.241}, {'end': 410.932, 'text': "Let's just add sans-serif here.", 'start': 409.451, 'duration': 1.481}, {'end': 415.212, 'text': "It's just way better color white.", 'start': 412.011, 'duration': 3.201}, {'end': 418.253, 'text': 'So we can see everything very, very clearly.', 'start': 416.052, 'duration': 2.201}, {'end': 419.493, 'text': 'Awesome Good.', 'start': 418.833, 'duration': 0.66}, {'end': 420.253, 'text': 'All right.', 'start': 420.053, 'duration': 0.2}, {'end': 427.975, 'text': "So let's modify this a bit, but these two sections that we have here, and so we have the location and the temperature.", 'start': 420.273, 'duration': 7.702}, {'end': 431.916, 'text': "So the two big sections, we're going to say location.", 'start': 427.995, 'duration': 3.921}, {'end': 435.677, 'text': "So for location, we're going to add the height of 30 V H.", 'start': 433.796, 'duration': 1.881}, {'end': 438.78, 'text': 'Like that.', 'start': 438.22, 'duration': 0.56}, {'end': 443.043, 'text': "We're going to add a, let's add a width of 50% like that.", 'start': 438.96, 'duration': 4.083}], 'summary': 'Css styling added to achieve full screen display with centered content and linear gradient background', 'duration': 143.129, 'max_score': 299.914, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA299914.jpg'}, {'end': 528.196, 'src': 'heatmap', 'start': 466.68, 'weight': 0.73, 'content': [{'end': 476.78, 'text': 'So if we do temperature, so our temperature class like this, There we go.', 'start': 466.68, 'duration': 10.1}, {'end': 490.592, 'text': 'But the difference we can do is just select temperature and separate separately and just add flex direction column to this is actually we need to display um the Celsius or Fahrenheit here.', 'start': 477.281, 'duration': 13.311}, {'end': 495.256, 'text': 'So we need to wrap this around in another class, actually.', 'start': 491.413, 'duration': 3.843}, {'end': 502.062, 'text': "So let's go back into our HTML and I'm just going to name this, let's say degree section.", 'start': 495.777, 'duration': 6.285}, {'end': 504.104, 'text': 'Okay So this is all about the degree.', 'start': 502.122, 'duration': 1.982}, {'end': 507.563, 'text': "And we're going to just close it up in here.", 'start': 505.56, 'duration': 2.003}, {'end': 515.974, 'text': "And I'm just going to add a span of, let's just say Fahrenheit.", 'start': 507.583, 'duration': 8.391}, {'end': 517.817, 'text': 'Okay From Fahrenheit like that.', 'start': 516.014, 'duration': 1.803}, {'end': 518.938, 'text': 'All right.', 'start': 517.837, 'duration': 1.101}, {'end': 519.86, 'text': 'Just added this.', 'start': 518.979, 'duration': 0.881}, {'end': 528.196, 'text': 'And all we need to do is just select that degree section here.', 'start': 522.47, 'duration': 5.726}], 'summary': 'Adjust temperature display to show celsius or fahrenheit with a degree section.', 'duration': 61.516, 'max_score': 466.68, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA466680.jpg'}, {'end': 623.984, 'src': 'embed', 'start': 595.429, 'weight': 0, 'content': [{'end': 596.991, 'text': "So we're going to leave it like this for now.", 'start': 595.429, 'duration': 1.562}, {'end': 600.594, 'text': "And then let's go into RJS.", 'start': 597.251, 'duration': 3.343}, {'end': 602.636, 'text': 'So go into your JS here.', 'start': 601.155, 'duration': 1.481}, {'end': 610.203, 'text': 'And the first thing we need to do is actually get the longitude and the latitude from our location.', 'start': 603.957, 'duration': 6.246}, {'end': 613.707, 'text': "Now, there's a very, very simple way to do that.", 'start': 610.904, 'duration': 2.803}, {'end': 616.229, 'text': "And it's actually built into JavaScript.", 'start': 613.927, 'duration': 2.302}, {'end': 618.571, 'text': "So let's do it.", 'start': 617.21, 'duration': 1.361}, {'end': 623.984, 'text': "First of all, we're gonna say window.addEventListener and we're gonna say load.", 'start': 619.679, 'duration': 4.305}], 'summary': "Obtaining longitude and latitude using javascript's built-in method.", 'duration': 28.555, 'max_score': 595.429, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA595429.jpg'}, {'end': 700.328, 'src': 'embed', 'start': 674.522, 'weight': 8, 'content': [{'end': 682.944, 'text': "Alright, so what we can do is actually say if, and we're going to say navigator.geolocation.", 'start': 674.522, 'duration': 8.422}, {'end': 691.466, 'text': 'So if this thing exists in the browser, then we can find the exact position of the user.', 'start': 683.464, 'duration': 8.002}, {'end': 700.328, 'text': "Now remember, this will only work if when you access the site, there's going to be a pop up here that's going to say allow geolocation or not.", 'start': 691.726, 'duration': 8.602}], 'summary': "Using navigator.geolocation to find user's exact position, requires user permission.", 'duration': 25.806, 'max_score': 674.522, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA674522.jpg'}], 'start': 299.914, 'title': 'Styling web pages with css and javascript', 'summary': 'Covers applying basic css styling, using flexbox for layout, and styling a weather display with rgb colors. it also includes accessing user geolocation in javascript to display coordinates.', 'chapters': [{'end': 372.235, 'start': 299.914, 'title': 'Css styling and flexbox setup', 'summary': 'Focuses on applying basic styling to a web page using css, including removing margins and paddings, setting height to full screen, using flexbox for layout, and adding a linear gradient background.', 'duration': 72.321, 'highlights': ['The tutorial on flexbox was posted a few days ago, providing comprehensive information about flexbox.', 'Setting the height of the body to 100 VH ensures the full-screen display of the content.', 'Applying a linear gradient background to the web page enhances its visual appeal and design.', 'Removing all margins and paddings from the web page ensures a consistent and clean layout.']}, {'end': 725.007, 'start': 372.415, 'title': 'Creating weather display with javascript and css', 'summary': "Demonstrates the process of styling a weather display using rgb colors and css properties, and then accessing the user's geolocation in javascript to display the coordinates.", 'duration': 352.592, 'highlights': ["The chapter demonstrates the process of styling a weather display using RGB colors and CSS properties, and then accessing the user's geolocation in JavaScript to display the coordinates.", 'The author provides specific RGB color values, 47, 150, and 163, and 48, 62, to style the weather display.', 'The process of styling involves modifying elements such as location and temperature using CSS properties like height, width, display, justify-content, and align-items.', "The JavaScript section focuses on retrieving the user's longitude and latitude using the window.addEventListener and navigator.geolocation.", 'A conditional statement checks for the existence of navigator.geolocation in the browser and prompts the user to allow geolocation access, providing a fallback message if access is denied.']}], 'duration': 425.093, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA299914.jpg', 'highlights': ["The chapter demonstrates the process of styling a weather display using RGB colors and CSS properties, and then accessing the user's geolocation in JavaScript to display the coordinates.", 'The tutorial on flexbox was posted a few days ago, providing comprehensive information about flexbox.', 'Setting the height of the body to 100 VH ensures the full-screen display of the content.', 'Applying a linear gradient background to the web page enhances its visual appeal and design.', 'Removing all margins and paddings from the web page ensures a consistent and clean layout.', 'The author provides specific RGB color values, 47, 150, and 163, and 48, 62, to style the weather display.', 'The process of styling involves modifying elements such as location and temperature using CSS properties like height, width, display, justify-content, and align-items.', "The JavaScript section focuses on retrieving the user's longitude and latitude using the window.addEventListener and navigator.geolocation.", 'A conditional statement checks for the existence of navigator.geolocation in the browser and prompts the user to allow geolocation access, providing a fallback message if access is denied.']}, {'end': 1089.081, 'segs': [{'end': 754.367, 'src': 'embed', 'start': 725.788, 'weight': 0, 'content': [{'end': 727.79, 'text': 'So if you wanna do that, definitely do that.', 'start': 725.788, 'duration': 2.002}, {'end': 739.377, 'text': 'Alright, so here we can say navigator, again, dot geolocation dot get current position, like so.', 'start': 728.69, 'duration': 10.687}, {'end': 743.08, 'text': "And here we're going to have access to something called position.", 'start': 740.078, 'duration': 3.002}, {'end': 746.302, 'text': "Now you can name this whatever you want, I'm just going to say position.", 'start': 743.5, 'duration': 2.802}, {'end': 750.125, 'text': "And here we're going to run an arrow function like so,", 'start': 747.062, 'duration': 3.063}, {'end': 754.367, 'text': "and actually we can close this out because we're not going to be bothered with the HTML for now.", 'start': 750.125, 'duration': 4.242}], 'summary': 'Using navigator.geolocation.getcurrentposition to access position data.', 'duration': 28.579, 'max_score': 725.788, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA725788.jpg'}, {'end': 833.356, 'src': 'embed', 'start': 803.419, 'weight': 1, 'content': [{'end': 804.784, 'text': 'Longitude Boom.', 'start': 803.419, 'duration': 1.365}, {'end': 805.767, 'text': "Let's get the other one.", 'start': 805.005, 'duration': 0.762}, {'end': 807.774, 'text': 'Latitude equals to position.', 'start': 805.928, 'duration': 1.846}, {'end': 816.5, 'text': 'position.chords.latitude All right, so we pulled out the information that we needed.', 'start': 809.793, 'duration': 6.707}, {'end': 825.248, 'text': 'All right, now what do we do with this information? Well, we need to access the weather, right? We need somewhere to pull that weather out from.', 'start': 816.52, 'duration': 8.728}, {'end': 833.356, 'text': 'So to do that, the best one I found and the easiest I found was something called darksky.net.', 'start': 825.749, 'duration': 7.607}], 'summary': 'Using latitude and longitude to access weather data from darksky.net.', 'duration': 29.937, 'max_score': 803.419, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA803419.jpg'}, {'end': 990.139, 'src': 'embed', 'start': 960.961, 'weight': 2, 'content': [{'end': 962.041, 'text': "So we're going to write fetch.", 'start': 960.961, 'duration': 1.08}, {'end': 972.186, 'text': 'and what this does is basically tries to do a get request, which is basically getting information from this following url all right,', 'start': 963.662, 'duration': 8.524}, {'end': 980.851, 'text': "because if you click on this, if we copy paste this, you're going to see that we get this nice information of a random location here.", 'start': 972.186, 'duration': 8.665}, {'end': 985.013, 'text': "so the longitude, latitude, time zone, currently what's going on and all the other good stuff.", 'start': 980.851, 'duration': 4.162}, {'end': 990.139, 'text': 'So, but the only difference is that we replaced it with our own.', 'start': 986.374, 'duration': 3.765}], 'summary': 'Creating a fetch function to get information from a url, including longitude, latitude, and time zone.', 'duration': 29.178, 'max_score': 960.961, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA960961.jpg'}, {'end': 1043.294, 'src': 'embed', 'start': 1013.467, 'weight': 4, 'content': [{'end': 1015.89, 'text': 'then I can do something with this data.', 'start': 1013.467, 'duration': 2.423}, {'end': 1018.993, 'text': "So here, all right? So that's all it does.", 'start': 1016.43, 'duration': 2.563}, {'end': 1026.8, 'text': 'You get the information and when the information arrives, because this might take some time to get from the server down to you.', 'start': 1020.214, 'duration': 6.586}, {'end': 1031.304, 'text': "it might take like a second half a second and you don't want to run everything in here.", 'start': 1026.8, 'duration': 4.504}, {'end': 1035.928, 'text': 'You only want to run it after you get it back from their server.', 'start': 1032.124, 'duration': 3.804}, {'end': 1037.388, 'text': "So that's why we use .", 'start': 1036.367, 'duration': 1.021}, {'end': 1043.294, 'text': 'then And this information is going to run only after you get it back.', 'start': 1037.388, 'duration': 5.906}], 'summary': 'Data processing occurs after receiving information from the server, taking around half a second.', 'duration': 29.827, 'max_score': 1013.467, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA1013467.jpg'}, {'end': 1089.081, 'src': 'embed', 'start': 1061.548, 'weight': 3, 'content': [{'end': 1066.572, 'text': 'So with JSON, you can easily use it in your JavaScript.', 'start': 1061.548, 'duration': 5.024}, {'end': 1073.155, 'text': "So to do that, all you have to do is say return, We're going to say response dot JSON, like so.", 'start': 1066.852, 'duration': 6.303}, {'end': 1082.339, 'text': 'And after, again, after it made it into a JSON, you can say dot then again, and this is where we have the actual data.', 'start': 1074.096, 'duration': 8.243}, {'end': 1085.34, 'text': "So let's do another arrow function.", 'start': 1083.099, 'duration': 2.241}, {'end': 1089.081, 'text': "We're going to say then data console log data, and this is not going to work.", 'start': 1085.36, 'duration': 3.721}], 'summary': 'Using json in javascript allows for easy data manipulation and retrieval.', 'duration': 27.533, 'max_score': 1061.548, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA1061548.jpg'}], 'start': 725.788, 'title': 'Geolocation and weather api integration', 'summary': 'Covers accessing geolocation coordinates using javascript, integrating the dark sky api for weather information, and modifying latitude and longitude in a javascript fetch request to obtain and process location-based data.', 'chapters': [{'end': 907.22, 'start': 725.788, 'title': 'Geolocation and weather api integration', 'summary': 'Covers accessing geolocation coordinates using javascript and integrating the dark sky api to fetch weather information, demonstrating how to obtain and utilize both latitude and longitude coordinates effectively for weather retrieval.', 'duration': 181.432, 'highlights': ['Accessing geolocation coordinates using JavaScript The speaker demonstrates how to access geolocation coordinates by using the navigator.geolocation.getCurrentPosition method in JavaScript, allowing for the retrieval of latitude and longitude coordinates.', 'Integrating the Dark Sky API for weather information The chapter introduces the Dark Sky API as a source for weather information, emphasizing the process of obtaining the API key and incorporating latitude and longitude coordinates to retrieve weather data.']}, {'end': 1089.081, 'start': 909.028, 'title': 'Modifying latitude and longitude in javascript', 'summary': 'Explains how to modify latitude and longitude in a javascript fetch request to obtain and process location-based data, emphasizing the use of fetch, converting response to json, and handling data post-fetch.', 'duration': 180.053, 'highlights': ['The chapter emphasizes the use of fetch to obtain location-based data from a specific URL. Use of fetch to obtain location-based data from a specific URL', 'The process of converting the response to JSON to enable its use in JavaScript is highlighted. Conversion of response to JSON for use in JavaScript', "The importance of handling data post-fetch using the 'then' method is explained. Importance of handling data post-fetch using 'then' method"]}], 'duration': 363.293, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA725788.jpg', 'highlights': ['Accessing geolocation coordinates using JavaScript The speaker demonstrates how to access geolocation coordinates by using the navigator.geolocation.getCurrentPosition method in JavaScript, allowing for the retrieval of latitude and longitude coordinates.', 'Integrating the Dark Sky API for weather information The chapter introduces the Dark Sky API as a source for weather information, emphasizing the process of obtaining the API key and incorporating latitude and longitude coordinates to retrieve weather data.', 'The chapter emphasizes the use of fetch to obtain location-based data from a specific URL. Use of fetch to obtain location-based data from a specific URL', 'The process of converting the response to JSON to enable its use in JavaScript is highlighted. Conversion of response to JSON for use in JavaScript', "The importance of handling data post-fetch using the 'then' method is explained. Importance of handling data post-fetch using 'then' method"]}, {'end': 1538.912, 'segs': [{'end': 1134.154, 'src': 'embed', 'start': 1089.762, 'weight': 0, 'content': [{'end': 1095.944, 'text': "So if we save this, you're going to be like, Ed, why are we even bothering with this? Nothing's working.", 'start': 1089.762, 'duration': 6.182}, {'end': 1098.394, 'text': "You're going to say API is not defined.", 'start': 1096.493, 'duration': 1.901}, {'end': 1100.296, 'text': 'Okay Wait, we have another issue here.', 'start': 1098.474, 'duration': 1.822}, {'end': 1103.017, 'text': 'So why is API not defined? All right.', 'start': 1101.076, 'duration': 1.941}, {'end': 1104.979, 'text': 'Cost API.', 'start': 1103.858, 'duration': 1.121}, {'end': 1106.48, 'text': 'So we fetched the API.', 'start': 1105.059, 'duration': 1.421}, {'end': 1107.02, 'text': 'All right.', 'start': 1106.82, 'duration': 0.2}, {'end': 1111.223, 'text': "So we, it's not because it's only available in these brackets.", 'start': 1107.04, 'duration': 4.183}, {'end': 1113.164, 'text': 'So let me copy paste everything from here.', 'start': 1111.263, 'duration': 1.901}, {'end': 1114.245, 'text': 'I apologize.', 'start': 1113.184, 'duration': 1.061}, {'end': 1119.208, 'text': 'Copy paste everything from here and just paste it below this code here.', 'start': 1115.026, 'duration': 4.182}, {'end': 1123.69, 'text': 'because our API is not available outside of this bracket scope.', 'start': 1120.069, 'duration': 3.621}, {'end': 1127.152, 'text': "So let's paste this in here, hit save.", 'start': 1124.411, 'duration': 2.741}, {'end': 1130.253, 'text': "Let's see what's going on now.", 'start': 1128.332, 'duration': 1.921}, {'end': 1134.154, 'text': 'All right, so look at that beautiful error.', 'start': 1132.133, 'duration': 2.021}], 'summary': 'Troubleshooting code to define and access api, resolving an issue with code scoping.', 'duration': 44.392, 'max_score': 1089.762, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA1089762.jpg'}, {'end': 1225.516, 'src': 'heatmap', 'start': 1179.943, 'weight': 2, 'content': [{'end': 1188.567, 'text': "So what this is going to do is basically it's going to act as a proxy and it's going to allow you to make requests even from local hosts.", 'start': 1179.943, 'duration': 8.624}, {'end': 1199.445, 'text': "So we're going to copy this course anywhere, the Heroku.com, and we're going to go back to our our Visual Studio code here.", 'start': 1188.907, 'duration': 10.538}, {'end': 1205.468, 'text': "And we're going to say const proxy is equal to and we're just going to stick this thing in here.", 'start': 1200.426, 'duration': 5.042}, {'end': 1212.231, 'text': "And here, we just have to do again, dollar sign, and we're going to say proxy, that everything is going to work just fine.", 'start': 1206.128, 'duration': 6.103}, {'end': 1213.792, 'text': 'So hit save there.', 'start': 1212.871, 'duration': 0.921}, {'end': 1214.892, 'text': "Let's go back.", 'start': 1214.312, 'duration': 0.58}, {'end': 1216.953, 'text': "Let's see if this console log gets console logged.", 'start': 1214.912, 'duration': 2.041}, {'end': 1220.072, 'text': 'And look at that.', 'start': 1218.03, 'duration': 2.042}, {'end': 1220.592, 'text': 'There we go.', 'start': 1220.112, 'duration': 0.48}, {'end': 1225.516, 'text': 'So we get back a lot of information here and we can get back the currently daily.', 'start': 1221.153, 'duration': 4.363}], 'summary': 'Setting up a proxy enables making requests from local hosts, enabling seamless functionality in visual studio code.', 'duration': 25.525, 'max_score': 1179.943, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA1179943.jpg'}, {'end': 1355.034, 'src': 'embed', 'start': 1322.713, 'weight': 3, 'content': [{'end': 1324.354, 'text': 'Good So we need the temperature.', 'start': 1322.713, 'duration': 1.641}, {'end': 1327.657, 'text': "We also need, let's pull out the summary here.", 'start': 1324.374, 'duration': 3.283}, {'end': 1330.979, 'text': 'Summary like, so good.', 'start': 1328.257, 'duration': 2.722}, {'end': 1335.382, 'text': "Now up here, let's define some more up here.", 'start': 1331.439, 'duration': 3.943}, {'end': 1336.923, 'text': "Let's define some more elements.", 'start': 1335.442, 'duration': 1.481}, {'end': 1338.884, 'text': "So let's pull out the actual information.", 'start': 1336.943, 'duration': 1.941}, {'end': 1343.287, 'text': "Uh, let's get the actual HTML elements.", 'start': 1338.904, 'duration': 4.383}, {'end': 1347.47, 'text': "So, uh, we're going to get the time zone here.", 'start': 1344.588, 'duration': 2.882}, {'end': 1355.034, 'text': "we're going to get the temperature degree and the temperature description.", 'start': 1348.711, 'duration': 6.323}], 'summary': 'Request for temperature and summary; retrieve time zone, temperature degree, and description.', 'duration': 32.321, 'max_score': 1322.713, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA1322713.jpg'}, {'end': 1437.295, 'src': 'heatmap', 'start': 1373.125, 'weight': 0.731, 'content': [{'end': 1378.775, 'text': "We can copy paste this one and we're going to say Temperature degree.", 'start': 1373.125, 'duration': 5.65}, {'end': 1382.917, 'text': "We're going to pull this one out as well.", 'start': 1378.795, 'duration': 4.122}, {'end': 1384.957, 'text': 'Temperature degree.', 'start': 1383.957, 'duration': 1}, {'end': 1386.898, 'text': 'All right.', 'start': 1384.977, 'duration': 1.921}, {'end': 1391.039, 'text': "What else do we need? Let's make this smaller.", 'start': 1387.958, 'duration': 3.081}, {'end': 1395.801, 'text': "Kind of want this to be in one line and it doesn't want to give it to me in one line.", 'start': 1391.059, 'duration': 4.742}, {'end': 1397.542, 'text': 'All right.', 'start': 1396.001, 'duration': 1.541}, {'end': 1400.283, 'text': 'We have this temperature degree, temperature description.', 'start': 1397.582, 'duration': 2.701}, {'end': 1406.925, 'text': "I'm going to have to make 10, 000 cuts now.", 'start': 1400.303, 'duration': 6.622}, {'end': 1424.239, 'text': "Let's also get the location time zone here.", 'start': 1422.096, 'duration': 2.143}, {'end': 1426.622, 'text': "So we're going to paste this again.", 'start': 1424.259, 'duration': 2.363}, {'end': 1437.295, 'text': "We're going to say location time zone, which is going to be location time zone.", 'start': 1426.642, 'duration': 10.653}], 'summary': "Transcript mentions 'temperature degree' and 'location time zone' multiple times.", 'duration': 64.17, 'max_score': 1373.125, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA1373125.jpg'}, {'end': 1538.912, 'src': 'heatmap', 'start': 1506.567, 'weight': 0.752, 'content': [{'end': 1508.349, 'text': 'So all we have to say is temperature.', 'start': 1506.567, 'duration': 1.782}, {'end': 1511.871, 'text': "Hit save, let's spray, and there we go.", 'start': 1509.189, 'duration': 2.682}, {'end': 1512.152, 'text': 'We have 36.15.', 'start': 1511.911, 'duration': 0.241}, {'end': 1515.134, 'text': "Let's see if that is accurate.", 'start': 1512.152, 'duration': 2.982}, {'end': 1517.836, 'text': 'So 36.15, there we go.', 'start': 1515.674, 'duration': 2.162}, {'end': 1519.557, 'text': 'Hey, it works.', 'start': 1518.637, 'duration': 0.92}, {'end': 1521.939, 'text': "All right, so for the other ones, it's quite simple.", 'start': 1519.577, 'duration': 2.362}, {'end': 1523.38, 'text': 'We just repeat the process.', 'start': 1521.999, 'duration': 1.381}, {'end': 1531.007, 'text': "So temperature description, It's going to be dot text content.", 'start': 1524.461, 'duration': 6.546}, {'end': 1533.889, 'text': "It's going to be equal to summary.", 'start': 1531.187, 'duration': 2.702}, {'end': 1536.251, 'text': 'Hit save.', 'start': 1533.909, 'duration': 2.342}, {'end': 1538.912, 'text': "And it's freaking cold.", 'start': 1537.772, 'duration': 1.14}], 'summary': 'Temperature recorded as 36.15, with successful process repetition.', 'duration': 32.345, 'max_score': 1506.567, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA1506567.jpg'}], 'start': 1089.762, 'title': 'Troubleshooting api error and using proxy for dark sky api', 'summary': "Discusses troubleshooting 'api is not defined' error by adjusting api scope and using a proxy 'cors-anywhere' to access dark sky api from localhost, enabling weather data retrieval with an example showcasing current temperature and summary.", 'chapters': [{'end': 1134.154, 'start': 1089.762, 'title': 'Troubleshooting api error', 'summary': "Discusses troubleshooting an api error in a code, addressing the issue of 'api is not defined' and resolving it by adjusting the scope of the api availability.", 'duration': 44.392, 'highlights': ['The API is not defined error is encountered in the code, requiring troubleshooting and resolution.', 'The issue is addressed by adjusting the scope of API availability within the code.', "The chapter highlights the process of identifying and resolving the 'API is not defined' error in the code."]}, {'end': 1538.912, 'start': 1134.214, 'title': 'Using a proxy to access dark sky api', 'summary': "Discusses using a proxy, 'course anywhere' from heroku, to access the dark sky api from localhost, bypassing cross-origin restrictions and enabling data retrieval for weather information, including temperature and summary, with an example showcasing the retrieval of the current temperature and summary from the api.", 'duration': 404.698, 'highlights': ["Using 'course anywhere' from Heroku as a proxy to access Dark Sky API from localhost, bypassing cross-origin restrictions The chapter discusses using 'course anywhere' from Heroku as a proxy to access the Dark Sky API from localhost, bypassing cross-origin restrictions.", 'Retrieving weather information including temperature and summary from the API The chapter showcases the retrieval of weather information including temperature and summary from the API.', 'Demonstrating the retrieval of the current temperature and summary from the API The chapter provides an example showcasing the retrieval of the current temperature and summary from the API.']}], 'duration': 449.15, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA1089762.jpg', 'highlights': ["The chapter discusses troubleshooting and resolving the 'API is not defined' error in the code.", 'Adjusting the scope of API availability within the code is addressed to resolve the error.', "Using 'cors-anywhere' from Heroku as a proxy to access Dark Sky API from localhost is discussed.", 'Retrieving weather information including temperature and summary from the API is showcased.', 'An example demonstrating the retrieval of the current temperature and summary from the API is provided.']}, {'end': 2158.565, 'segs': [{'end': 1571.336, 'src': 'embed', 'start': 1538.952, 'weight': 3, 'content': [{'end': 1540.153, 'text': "It's not freaking cold anymore.", 'start': 1538.952, 'duration': 1.201}, {'end': 1541.494, 'text': "It's mostly cloudy.", 'start': 1540.273, 'duration': 1.221}, {'end': 1546.197, 'text': 'Good The last thing is the location time zone.', 'start': 1542.114, 'duration': 4.083}, {'end': 1548.359, 'text': 'And that actually we can pull it out of.', 'start': 1546.317, 'duration': 2.042}, {'end': 1550.779, 'text': "We don't need to access the currently.", 'start': 1549.178, 'duration': 1.601}, {'end': 1552.421, 'text': 'We have it right here.', 'start': 1551.3, 'duration': 1.121}, {'end': 1554.062, 'text': 'So Europe, Berlin.', 'start': 1553.081, 'duration': 0.981}, {'end': 1567.953, 'text': "So all we have to do is just say we have location time zone dot text content is equal to, we're going to say data dot time zone.", 'start': 1555.063, 'duration': 12.89}, {'end': 1569.154, 'text': 'Hit save.', 'start': 1568.613, 'duration': 0.541}, {'end': 1571.336, 'text': 'And there we go.', 'start': 1570.375, 'duration': 0.961}], 'summary': 'Setting location time zone to europe, berlin.', 'duration': 32.384, 'max_score': 1538.952, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA1538952.jpg'}, {'end': 1636.903, 'src': 'embed', 'start': 1603.866, 'weight': 0, 'content': [{'end': 1614.975, 'text': 'And how this works is basically you define a new skycon and then you add a canvas somewhere here.', 'start': 1603.866, 'duration': 11.109}, {'end': 1623.378, 'text': 'you add the canvas in your HTML and then you say what kind of SVG you wanna use in your canvas.', 'start': 1614.975, 'duration': 8.403}, {'end': 1628.06, 'text': 'So partly cloudy day is gonna display the partly cloudy day, which is probably this one.', 'start': 1623.398, 'duration': 4.662}, {'end': 1636.903, 'text': 'So what we need to do is we need to modify this according to whatever is going on in our app.', 'start': 1628.84, 'duration': 8.063}], 'summary': 'Define new skycon, add canvas in html, specify svg for display.', 'duration': 33.037, 'max_score': 1603.866, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA1603866.jpg'}, {'end': 1775.538, 'src': 'embed', 'start': 1746.908, 'weight': 1, 'content': [{'end': 1753.25, 'text': 'So you just grab the element here and then you display it with the built-in SkyCon elements that it has.', 'start': 1746.908, 'duration': 6.342}, {'end': 1755.53, 'text': "So this is kind of the same thing we're doing.", 'start': 1753.73, 'duration': 1.8}, {'end': 1758.131, 'text': "We're just getting the icon and the ID here.", 'start': 1755.65, 'duration': 2.481}, {'end': 1761.19, 'text': 'So what do we need to do??', 'start': 1759.469, 'duration': 1.721}, {'end': 1771.195, 'text': 'We need to say const skycons and we just initiate the skycons library here like so,', 'start': 1761.73, 'duration': 9.465}, {'end': 1775.538, 'text': 'and here we can add a property so you can change the color if you want.', 'start': 1771.195, 'duration': 4.343}], 'summary': 'Using skycon elements to display and customize icons in the web page.', 'duration': 28.63, 'max_score': 1746.908, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA1746908.jpg'}, {'end': 2056.509, 'src': 'heatmap', 'start': 1976.351, 'weight': 0.715, 'content': [{'end': 1980.672, 'text': 'And the ID, if we check here, well, we need to replace it with the canvas.', 'start': 1976.351, 'duration': 4.321}, {'end': 1982.132, 'text': 'So just copy this one here.', 'start': 1980.732, 'duration': 1.4}, {'end': 1984.614, 'text': 'and place it in here.', 'start': 1983.413, 'duration': 1.201}, {'end': 1988.136, 'text': "So we're going to replace this B with this.", 'start': 1984.934, 'duration': 3.202}, {'end': 1990.037, 'text': "We're going to remove the ID.", 'start': 1988.696, 'duration': 1.341}, {'end': 1991.378, 'text': "We don't need the ID.", 'start': 1990.197, 'duration': 1.181}, {'end': 1997.842, 'text': "We're just going to add a class of icon to this and here to get the ID.", 'start': 1991.458, 'duration': 6.384}, {'end': 2008.168, 'text': 'All we have to do is say document dot query selector icon like so.', 'start': 1998.282, 'duration': 9.886}, {'end': 2011.791, 'text': "Hit save and let's pray.", 'start': 2009.129, 'duration': 2.662}, {'end': 2012.371, 'text': "Let's pray.", 'start': 2011.951, 'duration': 0.42}, {'end': 2016.016, 'text': "And let's see what's wrong.", 'start': 2015.015, 'duration': 1.001}, {'end': 2018.718, 'text': "There's always something wrong.", 'start': 2017.537, 'duration': 1.181}, {'end': 2020.599, 'text': 'Skycons is not defined.', 'start': 2018.858, 'duration': 1.741}, {'end': 2024.902, 'text': 'Why are you not defined? All right.', 'start': 2021.48, 'duration': 3.422}, {'end': 2026.503, 'text': 'So this needs to be uppercase.', 'start': 2024.962, 'duration': 1.541}, {'end': 2028.224, 'text': 'Like so.', 'start': 2027.704, 'duration': 0.52}, {'end': 2029.425, 'text': "Let's hit save.", 'start': 2028.605, 'duration': 0.82}, {'end': 2032.007, 'text': 'Skycons is not defined.', 'start': 2030.626, 'duration': 1.381}, {'end': 2032.627, 'text': 'Oh, okay.', 'start': 2032.147, 'duration': 0.48}, {'end': 2043.055, 'text': "So how about we actually link our Skycons in our HTML? How about that? Let's add source and we're going to say Skycons.", 'start': 2032.727, 'duration': 10.328}, {'end': 2046.705, 'text': 'There we go.', 'start': 2045.464, 'duration': 1.241}, {'end': 2049.226, 'text': "So it's going to say mostly cloudy.", 'start': 2047.565, 'duration': 1.661}, {'end': 2050.726, 'text': 'We have this nice animation.', 'start': 2049.346, 'duration': 1.38}, {'end': 2056.509, 'text': "So again, to run through this very quickly, uh, what's happening here is we define a function here.", 'start': 2051.025, 'duration': 5.484}], 'summary': "Replacing id with class 'icon', adding skycons, and getting 'mostly cloudy' animation.", 'duration': 80.158, 'max_score': 1976.351, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA1976351.jpg'}, {'end': 2093.856, 'src': 'embed', 'start': 2062.251, 'weight': 5, 'content': [{'end': 2071.975, 'text': 'So if we look at the documentation here, the icon and the icon, I, this is the icon ID, and this is the, um, SVG.', 'start': 2062.251, 'duration': 9.724}, {'end': 2076.513, 'text': 'Then let me open up real quick.', 'start': 2073.831, 'duration': 2.682}, {'end': 2089.438, 'text': "Then we just replace whatever we get from the server with the underscores and we uppercase it just so it conforms to SkyCon's naming here.", 'start': 2077.234, 'duration': 12.204}, {'end': 2091.955, 'text': 'And then we just run the function.', 'start': 2090.714, 'duration': 1.241}, {'end': 2093.856, 'text': 'We add the icon.', 'start': 2092.594, 'duration': 1.262}], 'summary': "Replacing server data with underscores and uppercase for skycon's naming.", 'duration': 31.605, 'max_score': 2062.251, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA2062251.jpg'}], 'start': 1538.952, 'title': 'Implementing skycons for weather display', 'summary': 'Discusses implementing skycons for weather display, integrating location time zone data, adding canvas elements for displaying weather conditions, creating a function to set icons and display with skycons, utilizing the skycons library to display weather icons, and implementing skycons animation with event listening for temperature unit change.', 'chapters': [{'end': 1690.75, 'start': 1538.952, 'title': 'Implementing skycons for weather display', 'summary': 'Discusses implementing skycons for weather display, integrating location time zone data, and adding canvas elements for displaying weather conditions in the app.', 'duration': 151.798, 'highlights': ['The chapter discusses implementing Skycons for weather display, integrating location time zone data, and adding canvas elements for displaying weather conditions in the app.', "The location time zone 'Europe, Berlin' is integrated into the app using 'data.time zone', simplifying the access process.", 'The process for integrating Skycons involves defining a new Skycon, adding a canvas element in the HTML, and specifying the type of SVG to be displayed based on the weather conditions.', 'The instructions for obtaining Skycons involve downloading the package from GitHub, extracting the files, and adding them to the app directory.']}, {'end': 1861.591, 'start': 1690.91, 'title': 'Creating function to set icons and display with skycons', 'summary': 'Covers creating a function to set icons and display with skycons, utilizing the skycons library to display weather icons based on data from the api, and replacing elements in the icon name to match the format required by skycon.', 'duration': 170.681, 'highlights': ['Utilizing the Skycons library to display weather icons based on data from the API The chapter demonstrates the use of the Skycons library to display weather icons based on data obtained from the API, enhancing the visual representation of the weather conditions.', 'Creating a function to set icons and display with Skycons The chapter focuses on creating a function to set icons and display them using the Skycons library, streamlining the process of integrating weather icons into the interface.', 'Replacing elements in the icon name to match the format required by Skycon The process involves replacing elements in the icon name obtained from the API with underscores to match the format required by the Skycon library, ensuring compatibility and accurate display of weather icons.']}, {'end': 2158.565, 'start': 1862.291, 'title': 'Implementing skycons animation and event listening', 'summary': 'Illustrates the process of implementing skycons animation, replacing server data with underscores, and uppercase conversion, culminating in event listening for temperature unit change.', 'duration': 296.274, 'highlights': ["The process involves defining a function, adding an icon and icon ID, replacing server data with underscores, and converting it to uppercase to conform to SkyCon's naming.", 'Implementing Skycons animation by selecting the HTML icon, running the function, and playing the animation.', 'The last step involves event listening to change the temperature unit when clicked.']}], 'duration': 619.613, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA1538952.jpg', 'highlights': ['The chapter discusses implementing Skycons for weather display, integrating location time zone data, and adding canvas elements for displaying weather conditions in the app.', 'Utilizing the Skycons library to display weather icons based on data from the API The chapter demonstrates the use of the Skycons library to display weather icons based on data obtained from the API, enhancing the visual representation of the weather conditions.', 'Creating a function to set icons and display with Skycons The chapter focuses on creating a function to set icons and display them using the Skycons library, streamlining the process of integrating weather icons into the interface.', "The location time zone 'Europe, Berlin' is integrated into the app using 'data.time zone', simplifying the access process.", 'The process for integrating Skycons involves defining a new Skycon, adding a canvas element in the HTML, and specifying the type of SVG to be displayed based on the weather conditions.', 'Replacing elements in the icon name to match the format required by Skycon The process involves replacing elements in the icon name obtained from the API with underscores to match the format required by the Skycon library, ensuring compatibility and accurate display of weather icons.']}, {'end': 2588.191, 'segs': [{'end': 2242.61, 'src': 'embed', 'start': 2194.349, 'weight': 2, 'content': [{'end': 2205.618, 'text': "temperature section is equal to document dot query selector and we're gonna say temperature temperature.", 'start': 2194.349, 'duration': 11.269}, {'end': 2223.398, 'text': "temperature section like so good, so down here we're gonna say change temperature to Celsius Fahrenheit like so.", 'start': 2205.618, 'duration': 17.78}, {'end': 2225.479, 'text': 'All right.', 'start': 2225.219, 'duration': 0.26}, {'end': 2229.222, 'text': "So what we need to do is let's also select the span here.", 'start': 2225.96, 'duration': 3.262}, {'end': 2242.61, 'text': 'So const temperatureSpan is equal to document.querySelector temperature section.', 'start': 2229.302, 'duration': 13.308}], 'summary': 'Javascript code selects and updates temperature display.', 'duration': 48.261, 'max_score': 2194.349, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA2194349.jpg'}, {'end': 2301.199, 'src': 'embed', 'start': 2270.028, 'weight': 0, 'content': [{'end': 2276.77, 'text': "So we're going to select the degree section here, temperature section, the temperature section.", 'start': 2270.028, 'duration': 6.742}, {'end': 2284.227, 'text': "we're going to say add event listener and we're going to listen to a click event and we're going to run a function here.", 'start': 2278.063, 'duration': 6.164}, {'end': 2290.491, 'text': "So here we're going to check the span, the temperature span.", 'start': 2285.488, 'duration': 5.003}, {'end': 2299.277, 'text': "So we're going to say if temperature span, um, dot text content is triple equals to F.", 'start': 2290.572, 'duration': 8.705}, {'end': 2301.199, 'text': 'All right.', 'start': 2299.277, 'duration': 1.922}], 'summary': 'Setting up event listener to check temperature unit', 'duration': 31.171, 'max_score': 2270.028, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA2270028.jpg'}, {'end': 2468.941, 'src': 'embed', 'start': 2436.572, 'weight': 1, 'content': [{'end': 2440.395, 'text': "So let's do it above the icons here.", 'start': 2436.572, 'duration': 3.823}, {'end': 2448.122, 'text': "We're going to say formula for Celsius, like so.", 'start': 2440.435, 'duration': 7.687}, {'end': 2458.071, 'text': "And all we need to do is say let Celsius, And our Celsius is going to be, and I need to look at this because I'm not that smart,", 'start': 2449.423, 'duration': 8.648}, {'end': 2459.893, 'text': 'so I got this off the internet, obviously.', 'start': 2458.071, 'duration': 1.822}, {'end': 2462.775, 'text': "We're going to say temperature, like so.", 'start': 2460.213, 'duration': 2.562}, {'end': 2465.417, 'text': 'So this is going to be our Fahrenheit.', 'start': 2463.576, 'duration': 1.841}, {'end': 2468.941, 'text': "And we're going to say minus 32.", 'start': 2466.298, 'duration': 2.643}], 'summary': 'Creating a formula to convert celsius to fahrenheit by subtracting 32.', 'duration': 32.369, 'max_score': 2436.572, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA2436572.jpg'}, {'end': 2561.924, 'src': 'embed', 'start': 2508.795, 'weight': 3, 'content': [{'end': 2513.857, 'text': 'Now to get a quick fix around this, we can just math.floor this one.', 'start': 2508.795, 'duration': 5.062}, {'end': 2515.017, 'text': "Let's just math.floor.", 'start': 2513.957, 'duration': 1.06}, {'end': 2518.799, 'text': "We're gonna say math.floor, and we're gonna say Celsius.", 'start': 2516.418, 'duration': 2.381}, {'end': 2531.543, 'text': 'And else here, we can just put back the temperatureDegree.textContent back to the temperature that we get from the API.', 'start': 2520.379, 'duration': 11.164}, {'end': 2535.565, 'text': 'hit save and everything should be working fine.', 'start': 2532.543, 'duration': 3.022}, {'end': 2541.029, 'text': "so yes, there we go, everything works fine and yeah, that's it.", 'start': 2535.565, 'duration': 5.464}, {'end': 2542.81, 'text': 'hopefully you enjoyed this one.', 'start': 2541.029, 'duration': 1.781}, {'end': 2546.713, 'text': 'i apologize if we messed up the naming conventions there, but yeah,', 'start': 2542.81, 'duration': 3.903}, {'end': 2555.339, 'text': "i tried to put everything very quickly together and it seems like sometimes you mess up hey, what you gonna do, i'm a human as well.", 'start': 2546.713, 'duration': 8.626}, {'end': 2556.8, 'text': 'all right, hope you enjoyed this one.', 'start': 2555.339, 'duration': 1.461}, {'end': 2561.924, 'text': 'i know this was a bit of a long one, but hopefully you learned a few new things.', 'start': 2556.8, 'duration': 5.124}], 'summary': 'Demonstrated using math.floor for celsius conversion and apologized for potential naming convention errors.', 'duration': 53.129, 'max_score': 2508.795, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA2508795.jpg'}], 'start': 2159.205, 'title': 'Creating a temperature converter', 'summary': 'Covers creating a temperature converter in javascript, utilizing event listeners, and implementing the celsius to fahrenheit conversion formula, achieving a functional temperature conversion tool.', 'chapters': [{'end': 2588.191, 'start': 2159.205, 'title': 'Creating temperature converter in javascript', 'summary': 'Covers creating a temperature converter in javascript, utilizing event listeners, and implementing the celsius to fahrenheit conversion formula, achieving a functional temperature conversion tool.', 'duration': 428.986, 'highlights': ['Implemented event listeners to toggle between Celsius and Fahrenheit, allowing for user-friendly temperature conversion.', 'Utilized the Celsius to Fahrenheit conversion formula, multiplying by 5, dividing by 9, and adding 32, to accurately convert temperatures.', 'Utilized querySelector to select elements and update text content, demonstrating efficient DOM manipulation techniques.', 'Utilized math.floor to round Celsius temperature values, ensuring a clean and user-friendly display.', 'Expressed the need for proper naming conventions and acknowledged the learning process, showcasing a humble and relatable approach to development.']}], 'duration': 428.986, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wPElVpR1rwA/pics/wPElVpR1rwA2159205.jpg', 'highlights': ['Implemented event listeners to toggle between Celsius and Fahrenheit, allowing for user-friendly temperature conversion.', 'Utilized the Celsius to Fahrenheit conversion formula, multiplying by 5, dividing by 9, and adding 32, to accurately convert temperatures.', 'Utilized querySelector to select elements and update text content, demonstrating efficient DOM manipulation techniques.', 'Utilized math.floor to round Celsius temperature values, ensuring a clean and user-friendly display.', 'Expressed the need for proper naming conventions and acknowledged the learning process, showcasing a humble and relatable approach to development.']}], 'highlights': ['Working with APIs to pull real-time data and display on the web page, including time zone, temperature in Fahrenheit/Celsius, and weather icons.', 'The project is beginner-friendly and suitable for those with limited JavaScript experience.', 'The tutorial aims to help beginners by providing hands-on experience with real-world data and API integration.', 'Building a basic HTML structure to display weather information from an API, including location, icon, temperature, and description.', 'Involves creating a cool SVG representation of weather changes on the web page.', 'The tutorial series will cover modern JavaScript using ES 2015, including arrow functions, const, and let, offering a comprehensive guide from basic to advanced topics.', "The chapter demonstrates the process of styling a weather display using RGB colors and CSS properties, and then accessing the user's geolocation in JavaScript to display the coordinates.", 'Setting the height of the body to 100 VH ensures the full-screen display of the content.', 'Applying a linear gradient background to the web page enhances its visual appeal and design.', 'Removing all margins and paddings from the web page ensures a consistent and clean layout.', 'The author provides specific RGB color values, 47, 150, and 163, and 48, 62, to style the weather display.', 'The process of styling involves modifying elements such as location and temperature using CSS properties like height, width, display, justify-content, and align-items.', "The JavaScript section focuses on retrieving the user's longitude and latitude using the window.addEventListener and navigator.geolocation.", 'A conditional statement checks for the existence of navigator.geolocation in the browser and prompts the user to allow geolocation access, providing a fallback message if access is denied.', 'Accessing geolocation coordinates using JavaScript The speaker demonstrates how to access geolocation coordinates by using the navigator.geolocation.getCurrentPosition method in JavaScript, allowing for the retrieval of latitude and longitude coordinates.', 'Integrating the Dark Sky API for weather information The chapter introduces the Dark Sky API as a source for weather information, emphasizing the process of obtaining the API key and incorporating latitude and longitude coordinates to retrieve weather data.', 'The chapter emphasizes the use of fetch to obtain location-based data from a specific URL. Use of fetch to obtain location-based data from a specific URL', 'The process of converting the response to JSON to enable its use in JavaScript is highlighted. Conversion of response to JSON for use in JavaScript', "The importance of handling data post-fetch using the 'then' method is explained. Importance of handling data post-fetch using 'then' method", "The chapter discusses troubleshooting and resolving the 'API is not defined' error in the code.", 'Adjusting the scope of API availability within the code is addressed to resolve the error.', "Using 'cors-anywhere' from Heroku as a proxy to access Dark Sky API from localhost is discussed.", 'Retrieving weather information including temperature and summary from the API is showcased.', 'An example demonstrating the retrieval of the current temperature and summary from the API is provided.', 'The chapter discusses implementing Skycons for weather display, integrating location time zone data, and adding canvas elements for displaying weather conditions in the app.', 'Utilizing the Skycons library to display weather icons based on data from the API The chapter demonstrates the use of the Skycons library to display weather icons based on data obtained from the API, enhancing the visual representation of the weather conditions.', 'Creating a function to set icons and display with Skycons The chapter focuses on creating a function to set icons and display them using the Skycons library, streamlining the process of integrating weather icons into the interface.', "The location time zone 'Europe, Berlin' is integrated into the app using 'data.time zone', simplifying the access process.", 'The process for integrating Skycons involves defining a new Skycon, adding a canvas element in the HTML, and specifying the type of SVG to be displayed based on the weather conditions.', 'Replacing elements in the icon name to match the format required by Skycon The process involves replacing elements in the icon name obtained from the API with underscores to match the format required by the Skycon library, ensuring compatibility and accurate display of weather icons.', 'Implemented event listeners to toggle between Celsius and Fahrenheit, allowing for user-friendly temperature conversion.', 'Utilized the Celsius to Fahrenheit conversion formula, multiplying by 5, dividing by 9, and adding 32, to accurately convert temperatures.', 'Utilized querySelector to select elements and update text content, demonstrating efficient DOM manipulation techniques.', 'Utilized math.floor to round Celsius temperature values, ensuring a clean and user-friendly display.', 'Expressed the need for proper naming conventions and acknowledged the learning process, showcasing a humble and relatable approach to development.']}