As you learned in your freecodecamp.org lessons, Javascript objects store information through ‘name value’ pairs. In plain English, this simply means that information is retrieved from an object by asking for it by name. You should be pretty familiar with these concepts after going through the lessons so let’s go ahead and put that knowledge to use in yet another lesson.<\/p>\n\n\n\n
To begin, download this file named objects.zip<\/a>. Once the file is unzipped, you should see a file named beverage.html and a js folder with another file inside named beverage.js. You will also have a ‘beveragepics’ folder with five beverage options. Move everything to wherever you are doing your work for this class and open both files simultaneously with your code editor.<\/p>\n\n\n\n As you can see some of your work is already done: both files have content and are connected via a script tag in beverage.html. In addition:<\/p>\n\n\n\n Goal: Type a drink name into the text field, click the button, and display the drink description. <\/p>\n\n\n\n For our first exercise we are going to use the text field and button that already exists to pull quotes from drinkMenu and make them appear inside of the h2 tags in the html document (id of “#aboutme”). This can be accomplished by adding just two lines of code to the serveDrink function. I am going to offer general instructions and your job is to figure out the rest.<\/p>\n\n\n\n Test it out! Type “Latte,” click the button, and the description should appear. Type “Lemonade,” click the button, and the error message should appear. <\/p>\n\n\n\n Hopefully, you are impressed with your project so far, but wouldn’t it be even better if the drink options were part of a dropdown list? Luckily, you know Javascript and you have an array of those drink names just waiting to be put to use, with just a tiny bit of coding. So let’s do it!<\/p>\n\n\n\n The serveDrink() function stays the same! Now, it’s just pulling values from the dropdown drink menu. <\/p>\n\n\n\n It’s not a menu without photos! The goal for this part of the exercise is to automatically display the matching image of the drink once it is selected. <\/p>\n\n\n\n Need a challenge? Try these:<\/p>\n\n\n\n As you learned in your freecodecamp.org lessons, Javascript objects store information through ‘name value’ pairs. In plain English, this simply means that information is retrieved from an object by asking for it by name. You should be pretty familiar with these concepts after going through the lessons so let’s go ahead and put that knowledge … Continue reading Exercise: Objects<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3694,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3770","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3770","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/comments?post=3770"}],"version-history":[{"count":14,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3770\/revisions"}],"predecessor-version":[{"id":4783,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3770\/revisions\/4783"}],"up":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3694"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/media?parent=3770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
Retrieve descriptions via text entry<\/h4>\n\n\n\n
\n
Need a hint? Check it out here:<\/summary>\n
function serveDrink() {\n \/\/ Step 1: Get the drink name from the input field<\/strong>\n let sName = document.querySelector('#adrink').value;\n\n \/\/ Step 2: Check if the drink is in the drinkMenu object<\/strong>\n if (drinkMenu.hasOwnProperty(sName)) {\n \/\/ Step 3: Show the drink description<\/strong>\n document.querySelector('#aboutme').innerHTML = drinkMenu[sName];\n } else {\n \/\/ Step 4: Error message for invalid entry<\/strong>\n document.querySelector('#aboutme').innerHTML = sName + \" isn't a valid drink.\";\n }\n}<\/code><\/pre>\n<\/details>\n\n\n\nRetrieve descriptions from a dropdown list.<\/h4>\n\n\n\n
\n
<!-- Instead of button and input: --><\/strong>
<h1>Select a Drink<\/h1>
<select id=\"adrink\" onchange=\"serveDrink()\">
<\/select><\/code><\/pre><\/li>\n\n\n\nlet drinkList = document.querySelector(\"#adrink\");<\/span><\/code><\/pre><\/li>\n\n\n\nlet drinkDisplayMap = {\n \"Latte\": \"Latte\",\n \"IcedMatchaLatte\": \"Iced Matcha Latte\",\n \"ChaiTea\": \"Chai Tea\",\n \"BubbleTea\": \"Bubble Tea\",\n \"ThaiIcedTea\": \"Thai Iced Tea\"\n};<\/code><\/pre><\/li>\n\n\n\nfor (let key in drinkDisplayMap) {
drinkList.innerHTML += `<option value=\"${key}\">${drinkDisplayMap[key]}<\/option>`;
}<\/code><\/pre><\/li>\n<\/ol>\n\n\n\nAdd pictures<\/h4>\n\n\n\n
\n
<\/strong>The code will include a document.querySelector and innerHtml, to make the appropriate image appear in the #image div tag that you created in the previous step. \n\n
\n
Need a hint? Check it out:<\/summary>\n
function serveDrink() {\n let sName = document.querySelector('#adrink').value;\n\n if (drinkMenu.hasOwnProperty(sName)) {\n \/\/ Show description\n document.querySelector('#aboutme').innerHTML = drinkMenu[sName];\n\n \/\/ Show image<\/strong>\n document.querySelector('#image').innerHTML = \n \"<img src='beveragepics\/\" + sName + \".png' alt='\" + drinkDisplayMap[sName] + \"' style='max-width: 300px;'>\";\n } else {\n document.querySelector('#aboutme').innerHTML = sName + \" isn't a valid drink.\";\n document.querySelector('#image').innerHTML = \"\";\n }\n}<\/code><\/pre>\n<\/details>\n\n\n\n\n