title
JavaScript Template Literals: JSON to HTML

description
Join my premium 2024 bootcamp here https://learnwebcode.teachable.com/p/brads-web-developer-bootcamp?coupon_code=YOUTUBEWELCOME Let's learn how to convert JSON into real-world HTML! Follow along link: https://codepen.io/learnwebcode/pen/qVLOZJ Finished product: https://codepen.io/learnwebcode/pen/eyZMyp Follow me for cat pics: Twitter: https://twitter.com/learnwebcode Facebook: https://www.facebook.com/Brad-Schiff-1542576316048470/

detail
{'title': 'JavaScript Template Literals: JSON to HTML', 'heatmap': [{'end': 169.678, 'start': 93.151, 'weight': 0.724}, {'end': 430.653, 'start': 378.247, 'weight': 0.79}, {'end': 523.501, 'start': 470.484, 'weight': 0.711}, {'end': 1007.08, 'start': 968.445, 'weight': 0.927}], 'summary': 'Covers using template literals in javascript to generate dynamic html, javascript array manipulation including looping through arrays and array to string conversion, employing the map method for array transformation, refactoring javascript code for improved readability, building a pet template in html with age calculation logic, javascript data handling with conditional logic and array looping, and usage of ternary operator within template literals for conditional logic.', 'chapters': [{'end': 434.696, 'segs': [{'end': 173.101, 'src': 'heatmap', 'start': 82.509, 'weight': 2, 'content': [{'end': 88.83, 'text': "And we're going to use template literals to generate this entire string of HTML,", 'start': 82.509, 'duration': 6.321}, {'end': 92.651, 'text': "including all of the looping and conditional logic that we're going to need.", 'start': 88.83, 'duration': 3.821}, {'end': 96.191, 'text': 'It might take more than just a few minutes, but it should be a lot of fun.', 'start': 93.151, 'duration': 3.04}, {'end': 100.832, 'text': "We're going to learn a lot about template literals and really just JavaScript in general.", 'start': 96.592, 'duration': 4.24}, {'end': 103.613, 'text': "So without further ado, let's get started.", 'start': 101.172, 'duration': 2.441}, {'end': 110.194, 'text': "Let's begin by writing a bit of JavaScript to add a bit of HTML into this empty div.", 'start': 104.173, 'duration': 6.021}, {'end': 121.82, 'text': 'So over in the JavaScript column you can scroll down to the very bottom and right after this closing square bracket and semi colon down here you can start typing and following along with me.', 'start': 110.894, 'duration': 10.926}, {'end': 130.064, 'text': "I'm going to jump into my text editor just so there's less on the screen and it's easier to see in this video but you can follow along in code pen.", 'start': 122.24, 'duration': 7.824}, {'end': 139.369, 'text': "OK So at the bottom of our JavaScript let's select that empty div so document get element by I.D.", 'start': 130.684, 'duration': 8.685}, {'end': 141.992, 'text': 'And it had an idea of app.', 'start': 140.249, 'duration': 1.743}, {'end': 148.062, 'text': 'And then if we want to change HTML we can just say dot inner HTML.', 'start': 142.733, 'duration': 5.329}, {'end': 153.21, 'text': 'Now traditionally you might set this to equal a string of text.', 'start': 148.823, 'duration': 4.387}, {'end': 154.292, 'text': 'Right So quotes.', 'start': 153.371, 'duration': 0.921}, {'end': 159.71, 'text': 'Hello And that would output hello onto the page.', 'start': 155.407, 'duration': 4.303}, {'end': 169.678, 'text': "However, instead of wrapping our text within quotes to create a simple string, instead let's wrap it in back ticks.", 'start': 160.371, 'duration': 9.307}, {'end': 173.101, 'text': 'using back ticks like this is how we tell JavaScript.', 'start': 169.678, 'duration': 3.423}], 'summary': 'Using template literals in javascript to generate html with looping and conditional logic, enhancing understanding of javascript.', 'duration': 90.592, 'max_score': 82.509, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA82509.jpg'}, {'end': 251.502, 'src': 'embed', 'start': 224.951, 'weight': 0, 'content': [{'end': 231.274, 'text': 'So this lets us insert something dynamic within an otherwise static string of text.', 'start': 224.951, 'duration': 6.323}, {'end': 233.955, 'text': 'Now, you might be thinking big deal.', 'start': 231.894, 'duration': 2.061}, {'end': 240.077, 'text': 'Who cares? This is just interpolation and other programming languages have had this forever.', 'start': 234.395, 'duration': 5.682}, {'end': 241.277, 'text': "And that's true.", 'start': 240.577, 'duration': 0.7}, {'end': 247.52, 'text': 'But historically, JavaScript did not have a super easy, intuitive way of achieving this.', 'start': 241.357, 'duration': 6.163}, {'end': 251.502, 'text': "So that's the first big superpower of template literals.", 'start': 248.18, 'duration': 3.322}], 'summary': 'Template literals in javascript provide superpower for dynamic text insertion.', 'duration': 26.551, 'max_score': 224.951, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA224951.jpg'}, {'end': 329.789, 'src': 'embed', 'start': 303.769, 'weight': 1, 'content': [{'end': 311.696, 'text': "That can be awkward and now our code doesn't look as clean but luckily with template literals you do not need the backslash escapes.", 'start': 303.769, 'duration': 7.927}, {'end': 319.063, 'text': 'OK Now if you add those two superpowers together interpolation with strings and multiple lines.', 'start': 312.317, 'duration': 6.746}, {'end': 324.866, 'text': 'This creates the perfect recipe for outputting complex dynamic HTML.', 'start': 319.503, 'duration': 5.363}, {'end': 329.789, 'text': 'So we are going to use those two superpowers to create this layout together.', 'start': 325.426, 'duration': 4.363}], 'summary': 'Template literals enable clean code, multiple lines, and dynamic html output.', 'duration': 26.02, 'max_score': 303.769, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA303769.jpg'}, {'end': 430.653, 'src': 'heatmap', 'start': 378.247, 'weight': 0.79, 'content': [{'end': 380.509, 'text': "Let's begin with the name of our array.", 'start': 378.247, 'duration': 2.262}, {'end': 388.898, 'text': 'So back up at the top here remember the array that contains all of our pet data is named pets data with a capital D.', 'start': 381.15, 'duration': 7.748}, {'end': 403.312, 'text': 'So within our curly brackets pets data and in JavaScript every array has a property named length which will return how many items live in the array.', 'start': 390.458, 'duration': 12.854}, {'end': 408.318, 'text': 'So altogether this will output cool pets three results.', 'start': 403.793, 'duration': 4.525}, {'end': 419.507, 'text': "And just for styling or CSS reasons why don't we give our opening H1 tag a class of app dash title and also just to stay organized.", 'start': 409.221, 'duration': 10.286}, {'end': 425.911, 'text': "Why don't we drop down to a new line right in between the opening back tick and our H1 like this.", 'start': 419.967, 'duration': 5.944}, {'end': 430.653, 'text': 'And then we can also drop down to a new line right before the closing back tick.', 'start': 426.691, 'duration': 3.962}], 'summary': "The array 'petsdata' in javascript has a length property that returns 3 items, and suggests adding a class and new lines for styling.", 'duration': 52.406, 'max_score': 378.247, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA378247.jpg'}], 'start': 8.086, 'title': 'Using template literals in javascript', 'summary': 'Explains the usage of template literals in javascript to generate dynamic html, covering interpolation, multi-line strings, and building a project to display pet data with dynamic results count.', 'chapters': [{'end': 434.696, 'start': 8.086, 'title': 'Template literals tutorial', 'summary': 'Explains how to use template literals in javascript to generate dynamic html, including usage of interpolation and multi-line strings, and demonstrates building a project to display pet data with dynamic results count.', 'duration': 426.61, 'highlights': ["Template literals allow inserting dynamic content within static text using interpolation, enabling the evaluation of expressions within a string. Template literals enable dynamic content insertion using interpolation, such as evaluating expressions within a string, demonstrated by the example 'hello to plus two equals blank', resulting in 'hello to 4'.", 'Template literals permit multi-line strings without requiring escape characters, facilitating the creation of clean and readable HTML code. Template literals allow easy creation of multi-line strings without escape characters, improving code readability and facilitating the output of complex dynamic HTML.', 'Demonstrates the usage of template literals to dynamically display the count of results based on the length of an array, allowing for adaptable and dynamic content. Illustrates using template literals to dynamically display the count of results based on the length of an array, ensuring adaptability to changes in the dataset.']}], 'duration': 426.61, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA8086.jpg', 'highlights': ['Template literals allow inserting dynamic content within static text using interpolation, enabling the evaluation of expressions within a string.', 'Template literals permit multi-line strings without requiring escape characters, facilitating the creation of clean and readable HTML code.', 'Demonstrates the usage of template literals to dynamically display the count of results based on the length of an array, allowing for adaptable and dynamic content.']}, {'end': 653.149, 'segs': [{'end': 526.643, 'src': 'heatmap', 'start': 465.123, 'weight': 0, 'content': [{'end': 469.224, 'text': "Our array is named pets data and we're interested in the length.", 'start': 465.123, 'duration': 4.101}, {'end': 476.166, 'text': "And let's also give this opening paragraph a class of footer just for CSS reasons.", 'start': 470.484, 'duration': 5.682}, {'end': 479.006, 'text': 'So that will output this.', 'start': 477.205, 'duration': 1.801}, {'end': 480.867, 'text': "Now we've got our footer.", 'start': 479.846, 'duration': 1.021}, {'end': 481.867, 'text': "We've got our header.", 'start': 481.047, 'duration': 0.82}, {'end': 485.369, 'text': 'We just need to work on the pets will go here section.', 'start': 482.448, 'duration': 2.921}, {'end': 495.534, 'text': 'Right If I look at the finished product we need a way to loop through the array and do something once for each pet or each item in our array.', 'start': 485.93, 'duration': 9.604}, {'end': 501.778, 'text': 'Now there are many different ways of doing this but let me show you what I think is the most elegant way.', 'start': 495.995, 'duration': 5.783}, {'end': 506.04, 'text': "So back in our code let's delete this pets will go here line.", 'start': 502.218, 'duration': 3.822}, {'end': 509.218, 'text': "And let's say dollar sign curly brackets.", 'start': 507.017, 'duration': 2.201}, {'end': 517.12, 'text': 'And if we just type the name of our array so pets data just that alone will output this.', 'start': 509.918, 'duration': 7.202}, {'end': 523.501, 'text': "This is JavaScript's attempt at displaying an array of objects as a string of text.", 'start': 517.799, 'duration': 5.702}, {'end': 526.643, 'text': 'Now there are two main issues here that we need to solve.', 'start': 524.001, 'duration': 2.642}], 'summary': 'Using javascript to loop through and display an array of objects with two main issues to solve', 'duration': 61.52, 'max_score': 465.123, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA465123.jpg'}, {'end': 536.088, 'src': 'embed', 'start': 509.918, 'weight': 1, 'content': [{'end': 517.12, 'text': 'And if we just type the name of our array so pets data just that alone will output this.', 'start': 509.918, 'duration': 7.202}, {'end': 523.501, 'text': "This is JavaScript's attempt at displaying an array of objects as a string of text.", 'start': 517.799, 'duration': 5.702}, {'end': 526.643, 'text': 'Now there are two main issues here that we need to solve.', 'start': 524.001, 'duration': 2.642}, {'end': 536.088, 'text': "First we want to remove the commas in between each object right because if we look at our finished product we don't want commas after each animal.", 'start': 527.082, 'duration': 9.006}], 'summary': 'Javascript displays array of objects as string, needs to remove commas.', 'duration': 26.17, 'max_score': 509.918, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA509918.jpg'}, {'end': 587.174, 'src': 'embed', 'start': 556.379, 'weight': 2, 'content': [{'end': 561.601, 'text': 'literal JavaScript knows that we want to display the array as a string of text.', 'start': 556.379, 'duration': 5.222}, {'end': 572.706, 'text': "So sort of automatically or behind the scenes, it's almost as if JavaScript is calling the two string method that belongs to every array.", 'start': 562.082, 'duration': 10.624}, {'end': 580.51, 'text': 'And this method creates a string by just smushing the items of the array together and separating them with commas.', 'start': 573.326, 'duration': 7.184}, {'end': 587.174, 'text': 'So if we want to remove the commas in between each object, we need to be more proactive.', 'start': 581.251, 'duration': 5.923}], 'summary': 'Javascript automatically converts array to string separated by commas.', 'duration': 30.795, 'max_score': 556.379, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA556379.jpg'}, {'end': 626.678, 'src': 'embed', 'start': 601.964, 'weight': 3, 'content': [{'end': 611.899, 'text': 'every array has access to a method named join and it will generate a string of text based on the array and it will use whatever you give it as the separator.', 'start': 601.964, 'duration': 9.935}, {'end': 615.945, 'text': 'So within these parentheses, we could say quotes and then maybe a dash.', 'start': 612.299, 'duration': 3.646}, {'end': 626.678, 'text': 'And that will output if you zoom in a string of text with dashes in between each item and you could use whatever you want as the separator.', 'start': 617.026, 'duration': 9.652}], 'summary': 'The join method in arrays generates a string using the specified separator.', 'duration': 24.714, 'max_score': 601.964, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA601964.jpg'}], 'start': 435.791, 'title': 'Javascript array manipulation', 'summary': 'Covers dynamic content and looping through arrays, demonstrating dynamically counting and displaying the number of pets, addressing comma separation and object representation. it also explains javascript array to string conversion using the join method for customizing separators and outputting html without separators.', 'chapters': [{'end': 556.379, 'start': 435.791, 'title': 'Dynamic content and looping arrays', 'summary': 'Discusses dynamic content and looping through arrays in javascript, demonstrating the process of dynamically counting and displaying the number of pets in an array and addressing issues related to comma separation and object representation in the array.', 'duration': 120.588, 'highlights': ['The array named pets data is used to dynamically count the number of pets using the length property, ensuring the output is not hardcoded, providing a more flexible solution.', 'Demonstrates an elegant method of looping through the array using JavaScript, discussing the process of dynamically displaying an array of objects as a string of text and addressing issues related to comma separation and object representation.', 'Explanation of removing commas between objects and improving the representation of individual animals within the array, enhancing the overall output and user experience.']}, {'end': 653.149, 'start': 556.379, 'title': 'Javascript array to string conversion', 'summary': 'Explains how javascript automatically converts arrays to strings using the join method, allowing customization of the separators, with the ability to output html without separators.', 'duration': 96.77, 'highlights': ['JavaScript automatically calls the toString method for array conversion to string. JavaScript automatically converts arrays to strings by calling the toString method, smushing the items together and separating them with commas.', 'The join method in JavaScript generates a string of text from an array and allows customization of the separator. The join method in JavaScript generates a string of text from an array and allows customization of the separator, such as using dashes, spaces, or even no separator.', 'Using nothing as the separator when using join method outputs HTML without awkward separators between items. A tip for outputting HTML is to use nothing as the separator when using the join method, resulting in HTML without awkward separators between items.']}], 'duration': 217.358, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA435791.jpg', 'highlights': ['The array named pets data is used to dynamically count the number of pets using the length property, ensuring the output is not hardcoded, providing a more flexible solution.', 'Demonstrates an elegant method of looping through the array using JavaScript, discussing the process of dynamically displaying an array of objects as a string of text and addressing issues related to comma separation and object representation.', 'JavaScript automatically calls the toString method for array conversion to string. JavaScript automatically converts arrays to strings by calling the toString method, smushing the items together and separating them with commas.', 'The join method in JavaScript generates a string of text from an array and allows customization of the separator. The join method in JavaScript generates a string of text from an array and allows customization of the separator, such as using dashes, spaces, or even no separator.']}, {'end': 1077.16, 'segs': [{'end': 716.06, 'src': 'embed', 'start': 684.436, 'weight': 0, 'content': [{'end': 695.583, 'text': 'And luckily for us, when you want to create or return a brand new array based on another array, well, JavaScript has a tool that does exactly that.', 'start': 684.436, 'duration': 11.147}, {'end': 697.684, 'text': 'And its name is map.', 'start': 696.143, 'duration': 1.541}, {'end': 706.83, 'text': 'So check this out down within our array line of code right after pets data and right before the dot join.', 'start': 698.325, 'duration': 8.505}, {'end': 709.311, 'text': "Let's say dot map.", 'start': 707.39, 'duration': 1.921}, {'end': 714.779, 'text': 'In JavaScript every array has access to the map method.', 'start': 710.518, 'duration': 4.261}, {'end': 716.06, 'text': 'And what does it do.', 'start': 715.24, 'duration': 0.82}], 'summary': "Javascript's map method helps create new arrays based on existing ones.", 'duration': 31.624, 'max_score': 684.436, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA684436.jpg'}, {'end': 1007.08, 'src': 'heatmap', 'start': 961.843, 'weight': 1, 'content': [{'end': 967.625, 'text': 'So dollar sign curly brackets and then we can just say pet dot photo.', 'start': 961.843, 'duration': 5.782}, {'end': 978.389, 'text': "And just for styling and to control the size of the photograph on this image element, let's also give it a class of pet dash photo.", 'start': 968.445, 'duration': 9.944}, {'end': 981.91, 'text': 'OK, so altogether this will output.', 'start': 979.389, 'duration': 2.521}, {'end': 986.392, 'text': 'A div for each animal with a photo inside.', 'start': 981.93, 'duration': 4.462}, {'end': 989.853, 'text': "Next, let's add a headline with the pet's name.", 'start': 987.012, 'duration': 2.841}, {'end': 996.236, 'text': "So right underneath this image element, let's create a heading level two.", 'start': 992.214, 'duration': 4.022}, {'end': 1007.08, 'text': "Within it let's output the pet's name so dollar sign curly brackets to run an expression and we can just say pet dot name.", 'start': 998.109, 'duration': 8.971}], 'summary': 'Code will output divs with photos & pet names.', 'duration': 28.01, 'max_score': 961.843, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA961843.jpg'}, {'end': 1054.285, 'src': 'embed', 'start': 1018.692, 'weight': 2, 'content': [{'end': 1021.156, 'text': "That's just how I want to display the species.", 'start': 1018.692, 'duration': 2.464}, {'end': 1027.945, 'text': 'Right So if we look at the finished product, you can see the name of the animal and then in parentheses in a smaller font, it says cat.', 'start': 1021.236, 'duration': 6.709}, {'end': 1036.887, 'text': "So back to our project let's just say dollar sign curly brackets pet dot species.", 'start': 1029.861, 'duration': 7.026}, {'end': 1045.835, 'text': 'And if we want this entire parentheses area to use a smaller font and a lighter color we can just wrap it in an HTML span.', 'start': 1037.667, 'duration': 8.168}, {'end': 1054.285, 'text': "Close out span here and let's give that span a class of species just for the CSS.", 'start': 1047.454, 'duration': 6.831}], 'summary': 'Display animal species with smaller font and lighter color using html span and css', 'duration': 35.593, 'max_score': 1018.692, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA1018692.jpg'}], 'start': 653.709, 'title': 'Using javascript map method for array transformation', 'summary': 'Explains using the javascript map method to transform an array of objects into an array of strings of html text, and to create an html div for each animal, resulting in a clean output for each animal, with practical application in code.', 'chapters': [{'end': 768.833, 'start': 653.709, 'title': 'Using javascript map method to create new array', 'summary': 'Explains how to use the map method in javascript to create a new array from an existing one, with the goal of transforming an array of objects into an array of strings of html text, providing a clear explanation of how the map method works and its practical application in code.', 'duration': 115.124, 'highlights': ['The map method in JavaScript is used to create a new array based on another array, without directly altering the original array, and is demonstrated in the context of transforming an array of objects into an array of HTML text strings.', 'The map method runs a given function once for each item in the original array, and the value returned by the function is added to the new array being constructed, illustrating the practical application of the map method and its role in modifying each item in the original array.', 'The chapter provides a clear and practical explanation of how the map method creates a new array by running the original array through an assembly line, showcasing its use in modifying each item in the original array.']}, {'end': 1077.16, 'start': 769.413, 'title': 'Using map method to create an html div for each animal', 'summary': 'Explains how to use the map method to create an html div for each animal, including adding images, pet names, species, and additional details, resulting in a clean output for each animal.', 'duration': 307.747, 'highlights': ['Using the map method to create a div for each animal with a photo inside, including adding a class for styling and controlling the size of the photograph, resulting in a clean output for each animal. Creation of a div for each animal, inclusion of the photo property from each animal object, addition of a class for styling, resulting in organized and traditional HTML output for each animal.', "Adding a headline with the pet's name and displaying the species in parentheses, as well as using an HTML span to style the species area, resulting in a clear display of the pet's name and species. Inclusion of the pet's name and species in the headline, utilization of HTML span for styling, resulting in a clear display of the pet's name and species.", 'Utilizing the map method to pass the current item in the original array to the function, allowing access to the original data and enabling the creation of a clean output for each animal. Passing the current item in the original array to the function, accessing the original data within the function, resulting in a clean output for each animal.']}], 'duration': 423.451, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA653709.jpg', 'highlights': ['The map method in JavaScript creates a new array based on another array, without altering the original array, demonstrated in transforming an array of objects into HTML text strings.', 'Using the map method to create a div for each animal with a photo inside, including adding a class for styling and controlling the size of the photograph, resulting in a clean output for each animal.', "Adding a headline with the pet's name and displaying the species in parentheses, as well as using an HTML span to style the species area, resulting in a clear display of the pet's name and species."]}, {'end': 1218.435, 'segs': [{'end': 1127.793, 'src': 'embed', 'start': 1077.801, 'weight': 1, 'content': [{'end': 1080.102, 'text': "It's spread out across eight lines.", 'start': 1077.801, 'duration': 2.301}, {'end': 1085.486, 'text': "It's got different methods and functions parentheses curly brackets a template literal.", 'start': 1080.162, 'duration': 5.324}, {'end': 1087.887, 'text': "It's just a little bit overwhelming to look at.", 'start': 1085.606, 'duration': 2.281}, {'end': 1091.09, 'text': 'Right So let me show you how we can clean this up a bit.', 'start': 1088.108, 'duration': 2.982}, {'end': 1098.318, 'text': "First let's cut or copy this section of code into our clipboard, so begin selecting from the word,", 'start': 1091.73, 'duration': 6.588}, {'end': 1102.343, 'text': 'return down to here and include the closing back tick.', 'start': 1098.318, 'duration': 4.025}, {'end': 1110.133, 'text': "OK so I'm going to cut that into my clipboard and then let's try to put this code back onto a single line.", 'start': 1102.964, 'duration': 7.169}, {'end': 1118.926, 'text': "And let's just give ourselves a clean slate and let's set the parentheses for map to be empty once again just like this.", 'start': 1111.781, 'duration': 7.145}, {'end': 1127.793, 'text': 'Now this is just my personal preference but I like my code to be set up so that each line only has one responsibility.', 'start': 1119.627, 'duration': 8.166}], 'summary': 'Demonstrating code clean-up by condensing eight lines into one for improved readability.', 'duration': 49.992, 'max_score': 1077.801, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA1077801.jpg'}, {'end': 1194.503, 'src': 'embed', 'start': 1147.903, 'weight': 0, 'content': [{'end': 1156.827, 'text': "Maybe up here, right above the line that begins with document, we can say function and let's just create a separate brand new function.", 'start': 1147.903, 'duration': 8.924}, {'end': 1158.668, 'text': 'We can name it whatever we want.', 'start': 1157.407, 'duration': 1.261}, {'end': 1161.569, 'text': "I'm going to call it pet template.", 'start': 1158.868, 'duration': 2.701}, {'end': 1170.291, 'text': 'Parentheses curly brackets and within the body of the function here just paste in your clipboard.', 'start': 1163.148, 'duration': 7.143}, {'end': 1177.594, 'text': 'OK And then down here on the line where we call map remember within these parentheses we give map a function.', 'start': 1170.311, 'duration': 7.283}, {'end': 1183.497, 'text': 'So now we can just reference our brand new function so we can just say pet template.', 'start': 1177.754, 'duration': 5.743}, {'end': 1188.379, 'text': 'Now in order for these expressions to be able to actually access these properties.', 'start': 1183.957, 'duration': 4.422}, {'end': 1194.503, 'text': 'We need to be sure that within the parentheses for this function definition here we include a parameter name.', 'start': 1188.979, 'duration': 5.524}], 'summary': 'Creating a new function named pet template for mapping with added parameter name.', 'duration': 46.6, 'max_score': 1147.903, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA1147903.jpg'}], 'start': 1077.801, 'title': 'Refactoring javascript code', 'summary': 'Discusses the benefits of clean code and demonstrates the use of separate functions for different tasks within the javascript code, emphasizing improved readability and breaking the code into smaller functions.', 'chapters': [{'end': 1218.435, 'start': 1077.801, 'title': 'Refactoring javascript code', 'summary': 'Discusses refactoring javascript code to improve readability by breaking it into smaller functions, highlighting the benefits of clean code, and demonstrating the use of separate functions for different tasks within the code.', 'duration': 140.634, 'highlights': ['The importance of setting up code so that each line only has one responsibility, allowing for immediate understanding of the code.', "Demonstration of creating a separate function, 'pet template,' to store the HTML template, improving code organization and readability.", 'Explanation of using a parameter within the function definition to access properties and ensure the output remains the same.', 'Instruction on cutting and restructuring code for improved readability and organization.']}], 'duration': 140.634, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA1077801.jpg', 'highlights': ["Demonstration of creating a separate function, 'pet template,' to store the HTML template, improving code organization and readability.", 'The importance of setting up code so that each line only has one responsibility, allowing for immediate understanding of the code.', 'Instruction on cutting and restructuring code for improved readability and organization.', 'Explanation of using a parameter within the function definition to access properties and ensure the output remains the same.']}, {'end': 1611.339, 'segs': [{'end': 1248.263, 'src': 'embed', 'start': 1218.975, 'weight': 3, 'content': [{'end': 1224.663, 'text': 'Only now our overall template is a little bit easier to read and you can even indent these three lines.', 'start': 1218.975, 'duration': 5.688}, {'end': 1230.068, 'text': "Cool So we've got our header the actual content and our footer.", 'start': 1226.004, 'duration': 4.064}, {'end': 1241.277, 'text': "Now let's finish building our pet template html to include the pets age and also list out their favorite foods in terms of displaying the age of the pet.", 'start': 1230.868, 'duration': 10.409}, {'end': 1248.263, 'text': 'We actually need a bit of logic in place because if we look at our data all we have is a birth year.', 'start': 1241.537, 'duration': 6.726}], 'summary': 'Improving template readability and adding pet age and favorite foods with logic.', 'duration': 29.288, 'max_score': 1218.975, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA1218975.jpg'}, {'end': 1298.602, 'src': 'embed', 'start': 1264.654, 'weight': 5, 'content': [{'end': 1267.295, 'text': 'So we also want to add on text that says years old.', 'start': 1264.654, 'duration': 2.641}, {'end': 1274.142, 'text': 'But if the animal is only one year old then we want to drop the S from the word years right.', 'start': 1268.496, 'duration': 5.646}, {'end': 1281.85, 'text': "One year old or if the animal was born in the current year we don't want to say zero years old.", 'start': 1274.963, 'duration': 6.887}, {'end': 1284.733, 'text': 'Instead we could say something like baby.', 'start': 1282.411, 'duration': 2.322}, {'end': 1288.657, 'text': 'So let me show you how we can implement all of that logic.', 'start': 1285.514, 'duration': 3.143}, {'end': 1298.602, 'text': 'So back to our project into our code we scroll down to our pet template function right underneath this heading level two line.', 'start': 1289.437, 'duration': 9.165}], 'summary': "Adding logic to display age as 'years old' or 'baby' based on age and birth year.", 'duration': 33.948, 'max_score': 1264.654, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA1264654.jpg'}, {'end': 1343.285, 'src': 'embed', 'start': 1317.543, 'weight': 0, 'content': [{'end': 1325.354, 'text': 'So we can wrap that in an HTML strong tag and this will output this.', 'start': 1317.543, 'duration': 7.811}, {'end': 1330.161, 'text': "OK Now instead of the word blank let's actually work on that logic.", 'start': 1325.374, 'duration': 4.787}, {'end': 1334.883, 'text': 'So I will delete blank and in its place create an expression.', 'start': 1330.902, 'duration': 3.981}, {'end': 1337.404, 'text': 'So dollar sign curly brackets.', 'start': 1335.583, 'duration': 1.821}, {'end': 1343.285, 'text': 'Now I want to keep my HTML template clean and easy to read at a glance.', 'start': 1338.024, 'duration': 5.261}], 'summary': 'Using html strong tag and expression to improve readability.', 'duration': 25.742, 'max_score': 1317.543, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA1317543.jpg'}, {'end': 1444.919, 'src': 'embed', 'start': 1419.445, 'weight': 1, 'content': [{'end': 1425.207, 'text': 'OK Now once we have that we just want to subtract the birth year for the current pet.', 'start': 1419.445, 'duration': 5.762}, {'end': 1430.889, 'text': 'Now before we can do that we need to make sure that this function has access to that data.', 'start': 1425.607, 'duration': 5.282}, {'end': 1435.39, 'text': 'So basically we want to pass the pets birth year as an argument.', 'start': 1431.409, 'duration': 3.981}, {'end': 1444.919, 'text': "So down here within our template when we call the age function within these parentheses Let's say pet dot birth year.", 'start': 1435.95, 'duration': 8.969}], 'summary': "Subtract birth year from current year for pet's age.", 'duration': 25.474, 'max_score': 1419.445, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA1419445.jpg'}, {'end': 1611.339, 'src': 'embed', 'start': 1580.113, 'weight': 2, 'content': [{'end': 1588.398, 'text': "So instead of quotes for a string let's use back ticks and say blank years old only instead of the word blank.", 'start': 1580.113, 'duration': 8.285}, {'end': 1595.562, 'text': "Let's include an expression so dollar sign curly brackets and then we can just pull in our calculated age.", 'start': 1588.558, 'duration': 7.004}, {'end': 1604.592, 'text': 'Cool So altogether this will output baby if the age is zero.', 'start': 1599.687, 'duration': 4.905}, {'end': 1607.115, 'text': 'We see plural years old here.', 'start': 1605.093, 'duration': 2.022}, {'end': 1611.339, 'text': 'Cool. And if you wanted to test out the one year old scenario,', 'start': 1607.515, 'duration': 3.824}], 'summary': "Using backticks instead of quotes, and outputting 'baby' if the age is zero.", 'duration': 31.226, 'max_score': 1580.113, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA1580113.jpg'}], 'start': 1218.975, 'title': 'Building pet template html and javascript age calculation logic', 'summary': "Discusses building a pet template in html, including logic to calculate and display the pet's age in a human-readable format, and explains how to create a helper function in javascript to calculate the age of pets based on the current year and their birth year, and customize the output based on the calculated age.", 'chapters': [{'end': 1343.285, 'start': 1218.975, 'title': 'Building pet template html', 'summary': "Discusses building a pet template in html, including logic to calculate and display the pet's age in a human-readable format, and formatting the template for easy readability and implementation.", 'duration': 124.31, 'highlights': ["The chapter focuses on adding logic to calculate the current age of the pet based on the birth year and displaying it in a human-readable format, such as dropping the 's' from 'years' if the pet is one year old or displaying 'baby' if the pet was born in the current year.", 'The section emphasizes the importance of keeping the HTML template clean and easy to read for better implementation and maintenance.', 'The chapter demonstrates how to use HTML tags such as to format the template for improved readability and user experience.']}, {'end': 1611.339, 'start': 1343.945, 'title': 'Javascript age calculation logic', 'summary': "Explains how to create a helper function in javascript to calculate the age of pets based on the current year and their birth year, and then customize the output based on the calculated age, including handling scenarios for 'baby' and 'year old'.", 'duration': 267.394, 'highlights': ["Creating a helper function named age to calculate the age of pets based on birth year and current year. The function 'age' is created to calculate the age of pets by subtracting their birth year from the current year, providing a dynamic age calculation for each pet.", "Customizing the output based on the calculated age, including handling scenarios for 'baby', 'year old', and 'plural years old'. The logic is implemented to customize the output based on the calculated age, with conditional statements for scenarios such as 'baby' for age 0, 'year old' for age 1, and 'plural years old' for other ages.", "Using a template literal to dynamically generate the output for the age of pets. A template literal is utilized to dynamically generate the output based on the calculated age, providing a flexible and customizable display of the pets' ages."]}], 'duration': 392.364, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA1218975.jpg', 'highlights': ['The chapter demonstrates how to use HTML tags such as to format the template for improved readability and user experience.', 'Creating a helper function named age to calculate the age of pets based on birth year and current year.', "Customizing the output based on the calculated age, including handling scenarios for 'baby', 'year old', and 'plural years old'.", 'The section emphasizes the importance of keeping the HTML template clean and easy to read for better implementation and maintenance.', 'Using a template literal to dynamically generate the output for the age of pets.', "The chapter focuses on adding logic to calculate the current age of the pet based on the birth year and displaying it in a human-readable format, such as dropping the 's' from 'years' if the pet is one year old or displaying 'baby' if the pet was born in the current year."]}, {'end': 1819.19, 'segs': [{'end': 1658.097, 'src': 'embed', 'start': 1611.339, 'weight': 0, 'content': [{'end': 1617.285, 'text': 'you could just adjust your Jason up at the very top here and just adjust the birth year for pers loud.', 'start': 1611.339, 'duration': 5.946}, {'end': 1626.693, 'text': 'So for me I will set it back to 2016 and that way I can see that yes that works one year old no s on the year.', 'start': 1618.243, 'duration': 8.45}, {'end': 1629.216, 'text': 'All right now changing gears.', 'start': 1627.293, 'duration': 1.923}, {'end': 1631.658, 'text': "Let's work on our final task.", 'start': 1629.696, 'duration': 1.962}, {'end': 1638.431, 'text': 'If we look at the finished product we see that the only thing left is the favorite foods feature.', 'start': 1632.349, 'duration': 6.082}, {'end': 1648.194, 'text': "So we've got a headline and then a bulleted list with their favorite foods and notice that some of the pets have favorite foods and some of them don't.", 'start': 1639.011, 'duration': 9.183}, {'end': 1653.495, 'text': 'So this final task is going to put everything together and really test our abilities.', 'start': 1648.694, 'duration': 4.801}, {'end': 1658.097, 'text': "We're going to need conditional logic and we're going to need to loop through an array.", 'start': 1653.996, 'duration': 4.101}], 'summary': 'Adjust birth year to 2016, add favorite foods feature, use conditional logic and loop through an array.', 'duration': 46.758, 'max_score': 1611.339, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA1611339.jpg'}, {'end': 1713.888, 'src': 'embed', 'start': 1685.399, 'weight': 1, 'content': [{'end': 1688.9, 'text': "Let's update this to output favorite foods accordingly.", 'start': 1685.399, 'duration': 3.501}, {'end': 1694.382, 'text': "So underneath the paragraph that outputs their age, let's include an expression.", 'start': 1689.2, 'duration': 5.182}, {'end': 1696.403, 'text': 'So dollar sign curly brackets.', 'start': 1694.422, 'duration': 1.981}, {'end': 1705.986, 'text': 'And in order to keep our template clean and easy to read at a glance, instead of including that header and the bulleted list directly right here,', 'start': 1697.143, 'duration': 8.843}, {'end': 1709.528, 'text': "why don't we just call a function named foods?", 'start': 1705.986, 'duration': 3.542}, {'end': 1713.888, 'text': 'And there is no native function in JavaScript named foods.', 'start': 1710.487, 'duration': 3.401}], 'summary': 'Updating output to include favorite foods using a function.', 'duration': 28.489, 'max_score': 1685.399, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA1685399.jpg'}, {'end': 1819.19, 'src': 'embed', 'start': 1772.961, 'weight': 3, 'content': [{'end': 1776.803, 'text': "Now, obviously, we don't want to hard code this to food one and food to.", 'start': 1772.961, 'duration': 3.842}, {'end': 1787.68, 'text': "But before we adjust this to pull in the real data, let's first decide what we want to do if a pet object doesn't contain any favorite foods,", 'start': 1778.069, 'duration': 9.611}, {'end': 1791.144, 'text': 'for example, at the top of our JavaScript in our Jason data.', 'start': 1787.68, 'duration': 3.464}, {'end': 1795.449, 'text': 'Remember that barks a lot does not contain a favorite foods array.', 'start': 1791.465, 'duration': 3.984}, {'end': 1804.658, 'text': "Now if that's the case not only are there no list items to show but we don't even want to display the heading level for favorite foods at all.", 'start': 1796.03, 'duration': 8.628}, {'end': 1810.883, 'text': "So it's almost as if down in our pet template, right underneath the age text.", 'start': 1805.238, 'duration': 5.645}, {'end': 1819.19, 'text': "it's almost as if we only want to run the foods function if the current pet actually has a favorite foods property.", 'start': 1810.883, 'duration': 8.307}], 'summary': 'Avoid hard coding and consider handling empty favorite foods array in pet template', 'duration': 46.229, 'max_score': 1772.961, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA1772961.jpg'}], 'start': 1611.339, 'title': 'Javascript data handling', 'summary': 'Involves adjusting a json file, conditional logic, and array looping, creating a function for outputting favorite foods, and handling missing data to avoid displaying empty lists.', 'chapters': [{'end': 1772.361, 'start': 1611.339, 'title': 'Javascript conditional logic and array looping', 'summary': 'Involves adjusting a json file, working on a final task involving conditional logic and array looping, and creating a function for outputting favorite foods in a template.', 'duration': 161.022, 'highlights': ['The final task involves conditional logic and array looping to display favorite foods for each pet. The final task requires incorporating conditional logic and array looping to display favorite foods for each pet, with some pets having favorite foods and others not.', "Instructions on creating a function to output favorite foods in a clean and readable template are provided. Instructions are given on creating a function named 'foods' to output favorite foods in a clean and readable template, using a heading level for 'favorite foods' and a bulleted list for the foods.", 'Adjusting the birth year in a JSON file is mentioned for testing purposes. It is mentioned to adjust the birth year in a JSON file for testing purposes, such as setting it back to 2016 to verify functionality.']}, {'end': 1819.19, 'start': 1772.961, 'title': 'Handling missing data in javascript', 'summary': 'Discusses the approach to handle absence of favorite foods in a pet object, ensuring that the favorite foods heading is not displayed if the pet does not have any favorite foods, in order to avoid displaying an empty list.', 'duration': 46.229, 'highlights': ['The chapter emphasizes the need to avoid hard coding and to decide the action to be taken if a pet object does not contain any favorite foods, such as not displaying the heading level for favorite foods at all.', 'It highlights the consideration of not only avoiding showing empty list items for favorite foods but also not displaying the heading level for favorite foods at all in case the pet object does not contain any favorite foods.']}], 'duration': 207.851, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA1611339.jpg', 'highlights': ['The final task involves conditional logic and array looping to display favorite foods for each pet.', 'Instructions on creating a function to output favorite foods in a clean and readable template are provided.', 'Adjusting the birth year in a JSON file is mentioned for testing purposes.', 'The chapter emphasizes the need to avoid hard coding and to decide the action to be taken if a pet object does not contain any favorite foods.', 'It highlights the consideration of not only avoiding showing empty list items for favorite foods but also not displaying the heading level for favorite foods at all.']}, {'end': 2364.934, 'segs': [{'end': 1887.446, 'src': 'embed', 'start': 1845.791, 'weight': 0, 'content': [{'end': 1853.036, 'text': "And within a template literal within dollar sign curly brackets you're only allowed to run something that's considered an expression.", 'start': 1845.791, 'duration': 7.245}, {'end': 1862.318, 'text': "A really oversimplified definition of an expression is just something that's expected to return a value instead of just doing something in general.", 'start': 1853.596, 'duration': 8.722}, {'end': 1863.678, 'text': "So let's delete that.", 'start': 1862.638, 'duration': 1.04}, {'end': 1872.319, 'text': "And instead, let me show you something that's very, very similar to an if statement, but is allowed within a template literal.", 'start': 1864.138, 'duration': 8.181}, {'end': 1880.001, 'text': 'We are going to use something called the ternary operator, and the syntax might seem weird or unintuitive at first.', 'start': 1872.799, 'duration': 7.202}, {'end': 1881.381, 'text': 'But hang in there with me.', 'start': 1880.421, 'duration': 0.96}, {'end': 1884.984, 'text': 'So when you want to use a ternary operator it goes like this.', 'start': 1881.841, 'duration': 3.143}, {'end': 1887.446, 'text': 'First you include a condition.', 'start': 1885.524, 'duration': 1.922}], 'summary': 'Template literals allow running expressions, including the ternary operator for conditions.', 'duration': 41.655, 'max_score': 1845.791, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA1845791.jpg'}, {'end': 2317.264, 'src': 'embed', 'start': 2288.89, 'weight': 3, 'content': [{'end': 2293.194, 'text': 'And if you enjoyed this video you might also enjoy my premium courses.', 'start': 2288.89, 'duration': 4.304}, {'end': 2301.023, 'text': "I just launched a brand new one at the very end of October and it's a 25 hour course to help you become a WordPress developer.", 'start': 2293.815, 'duration': 7.208}, {'end': 2306.25, 'text': "Now I know for a lot of you WordPress is a dirty disgusting word and you're immediately turned off.", 'start': 2301.463, 'duration': 4.787}, {'end': 2311.437, 'text': 'But trust me this is a course about JavaScript as much as it is WordPress.', 'start': 2306.33, 'duration': 5.107}, {'end': 2317.264, 'text': 'About a year ago WordPress finally added a rest API to its core.', 'start': 2312.097, 'duration': 5.167}], 'summary': 'New 25-hour wordpress developer course launched in october, focusing on javascript and including rest api.', 'duration': 28.374, 'max_score': 2288.89, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA2288890.jpg'}], 'start': 1819.591, 'title': 'Javascript template literals and ternary operator usage', 'summary': 'Discusses if statements limitations within template literals, highlighting them as statements and not expressions. it also demonstrates the usage of the ternary operator within template literals, showcasing its syntax and application in adding conditional logic and inviting to a premium wordpress developer course.', 'chapters': [{'end': 1863.678, 'start': 1819.591, 'title': 'Javascript template literals', 'summary': 'Discusses the limitations of using if statements within template literals in javascript and the reason behind it, highlighting that if statements are statements and not expressions, thus not allowed within template literals.', 'duration': 44.087, 'highlights': ["An if statement is just that it's a statement not an expression, so it's not allowed within template literals.", "A template literal within dollar sign curly brackets only allows running something that's considered an expression.", 'An expression is expected to return a value instead of just doing something in general.']}, {'end': 2364.934, 'start': 1864.138, 'title': 'Using ternary operator in template literals', 'summary': 'Discusses the usage of the ternary operator within template literals, demonstrating its syntax and application in adding conditional logic. it also showcases the transformation of an array into text and the usage of modern javascript to simplify the code. the chapter concludes with an invitation to a premium wordpress developer course.', 'duration': 500.796, 'highlights': ['The chapter discusses the usage of the ternary operator within template literals, demonstrating its syntax and application in adding conditional logic. The chapter explains the usage of the ternary operator within template literals, showcasing its syntax and demonstrating how it adds conditional logic to the code.', "It also showcases the transformation of an array into text and the usage of modern JavaScript to simplify the code. The chapter demonstrates the transformation of an array into text using JavaScript's join method and the map method to simplify the code.", 'The chapter concludes with an invitation to a premium WordPress developer course. The chapter ends with an invitation to a 25-hour premium WordPress developer course, emphasizing the use of JavaScript in WordPress development.']}], 'duration': 545.343, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DG4obitDvUA/pics/DG4obitDvUA1819591.jpg', 'highlights': ["An if statement is just that it's a statement not an expression, so it's not allowed within template literals.", "A template literal within dollar sign curly brackets only allows running something that's considered an expression.", 'The chapter discusses the usage of the ternary operator within template literals, demonstrating its syntax and application in adding conditional logic.', 'The chapter concludes with an invitation to a 25-hour premium WordPress developer course, emphasizing the use of JavaScript in WordPress development.']}], 'highlights': ['Template literals allow inserting dynamic content within static text using interpolation, enabling the evaluation of expressions within a string.', 'The map method in JavaScript creates a new array based on another array, without altering the original array, demonstrated in transforming an array of objects into HTML text strings.', "Demonstration of creating a separate function, 'pet template,' to store the HTML template, improving code organization and readability.", 'Creating a helper function named age to calculate the age of pets based on birth year and current year.', 'The final task involves conditional logic and array looping to display favorite foods for each pet.', 'The array named pets data is used to dynamically count the number of pets using the length property, ensuring the output is not hardcoded, providing a more flexible solution.', 'Demonstrates an elegant method of looping through the array using JavaScript, discussing the process of dynamically displaying an array of objects as a string of text and addressing issues related to comma separation and object representation.', 'The join method in JavaScript generates a string of text from an array and allows customization of the separator. The join method in JavaScript generates a string of text from an array and allows customization of the separator, such as using dashes, spaces, or even no separator.', 'The chapter discusses the usage of the ternary operator within template literals, demonstrating its syntax and application in adding conditional logic.']}