Exercise 1 (1 0 ) ES6 and Local Storage Create a mobile web site (Create a new folder to hold all files folders)) index html css folder that includes a personal css file js folder that includes your personal js script file images folder to hold any images needed for exercise Enter YOUR NAME in the tags AND your name and student number in a comment at the top of the index html Header area that includes Exercise 1 for SYST24444 Create a 1x3 grid (3 columns) using CSS Grids (40 25 35 ) Include appropriate padding and a separate background colour for each section Column 1 Include input fields for the following Text field (with labelling) to retrieve a student's FIRST name with the default set as your FIRST name Text field (with labelling) to retrieve a student's last name with the default set as your LAST name Text field (with labelling) to retrieve a student's id (number) with the default set as your id (number) A checkbox for country designation with no check designating a Domestic student and checked designating an International student A text field should be placed beside or under the check box with the text field containing either Domestic or International depending on the state of the checkbox Must be set on load and changed whenever the checkbox is selected Column 2 Include buttons for the following An image button to save data to local storage First name storage (your username appended with key ex doejFirst) that includes the data entered in the first name input field Last name storage (your username appended with key ex doejLast) that includes the data entered in the last name input field ID storage (your username appended with key ex doejID) that includes the data entered in the ID input field Based on the checkbox state, save either Domestic or International into storage (your choice of key name) An image button to retrieve data from local storage and place data retrieved in Column 3 (see below for output formatting) Must include an alert box to inform the user the image button was selected An image button to selectively clear the country designation key value pair in local storage Must include an alert box to inform the user the button was selected Column 3 Include output areas for the following that are filled in when retrieve button is selected from Column 2 An output area for name Must use ES6 to include Student Name last name, first name An output area for student id (number) Must use ES6 to include Student Number student id An output area for country designation Must use ES6 to include Domestic OR International (based on value from local storage) Student Footer line that includes YOUR name YOUR Student number YOUR campus How I will be grading exercise I will be using Chrome's Toggle Device Bar for Galaxy S5 in Landscape mode Remember, this is a mobile site so formatting and layout should reflect this too much scrolling or whitespace will reduce your mark What to submit ZIP the entire completed exercise folder and submit to appropriate DropBox in SLATE by the Due Date indicated Remember You have 3 days past the due date with 10 off per day to submit

The Answer is in the image, click to view ...

Question: Exercise 1 (1.0%) / ES6 and Local Storage Create a mobile web site (Create a new folder to hold all files/folders)) index.html css folder that

Exercise 1 (1.0%) / ES6 and Local Storage

Create a mobile web site (Create a new folder to hold all files/folders))
- index.html
- css folder that includes a personal css file
- js folder that includes your personal .js script file
- images folder to hold any images needed for exercise
Enter YOUR NAME in the tags AND your name and student number in a comment at the top of the index.html</li> </ul> <p> </p> <ul> <li>Header area that includes <em>Exercise #1 for SYST24444</em> </li> </ul> <p> </p> <ul> <li>Create a 1x3 grid (3 columns) using CSS Grids (40% 25% 35%) / Include appropriate padding and a separate background colour for each section.</li> </ul> <p> </p> <ul> <li> <strong>Column #1: Include input fields for the following...</strong> <ul> <li>Text field (with labelling) to retrieve a student's FIRST name with the default set as <strong>your</strong> FIRST name</li> <li>Text field (with labelling) to retrieve a student's last name with the default set as <strong>your</strong> LAST name</li> <li>Text field (with labelling) to retrieve a student's id (number) with the default set as <strong>your</strong> id (number)</li> <li>A checkbox for country designation with no check designating a "Domestic" student and checked designating an "International" student. A text field should be placed beside or under the check box with the text field containing either <em>"Domestic" or "International"</em> depending on the state of the checkbox. Must be <strong>set on load</strong> and <strong>changed</strong> whenever the checkbox is selected.</li> </ul> </li> </ul> <p> </p> <ul> <li> <strong>Column #2: Include buttons for the following...</strong> <ul> <li>An <strong>image button</strong> to save data to local storage: <ul> <li>First name storage (your username appended with key/ex. doejFirst) that includes the data entered in the first name input field</li> <li>Last name storage (your username appended with key/ex. doejLast) that includes the data entered in the last name input field</li> <li>ID storage (your username appended with key/ex. doejID) that includes the data entered in the ID input field</li> <li>Based on the checkbox state, save either "Domestic" or "International" into storage (your choice of key name)</li> </ul> </li> <li>An <strong>image button</strong> to retrieve data from local storage and place data retrieved in Column #3 (see below for output formatting); Must include an alert box to inform the user the image button was selected.</li> <li>An <strong>image button</strong> to selectively clear the country designation key/value pair in local storage. Must include an alert box to inform the user the button was selected.</li> </ul> </li> </ul> <p> </p> <ul> <li> <strong>Column #3: Include output areas for the following that are filled in when retrieve button is selected from Column #2...</strong> <ul> <li>An output area for name; Must use ES6 to include: <strong>Student Name:</strong> <em>last name, first name</em> </li> <li>An output area for student id (number); Must use ES6 to include: <strong>Student Number:</strong> <em>student id</em> </li> <li>An output area for country designation; Must use ES6 to include: <strong>Domestic OR International</strong> (based on value from local storage) <strong>Student</strong> </li> </ul> </li> </ul> <p> </p> <ul> <li>Footer line that includes YOUR name/YOUR Student number/YOUR campus</li> </ul> <p>How I will be grading exercise...</p> <ul> <li>I will be using Chrome's Toggle Device Bar for Galaxy S5 in Landscape mode</li> <li>Remember, this is a mobile site so formatting and layout should reflect this; too much scrolling or whitespace will reduce your mark.</li> </ul> <p>What to submit...</p> <ul> <li>ZIP the entire completed exercise folder and submit to appropriate DropBox in SLATE by the Due Date indicated</li> <li>Remember: You have 3 days past the due date with 10% off per day to submit</li> </ul> </div> <div class="question-answer-divider"></div> <section class="answerHolder" itemscope itemtype="http://schema.org/Answer"> <div class="answerHolderHeader"> <h2>Step by Step Solution</h2> <div class="answerReviews"> <div class="starIcon"> </div> </div> </div> <div class="questionProperties"> <p>There are 3 Steps involved in it</p> <div class="cart-flex"> <div class="cart cart1"> 1 Expert Approved Answer </div> </div> </div> <div class="step org_answer"> <span class="view_solution_btn view-solution-btn-cursor"> <strong class="step-heading step-1">Step: 1 <span>Unlock <i class="fa-solid fa-lock"></i></span></strong> </span> <img src="https://www.solutioninn.com/includes/images/document_product_info/blur-text-image.webp" class="blured-ans-image" width="759" height="271" alt="blur-text-image" decoding="async" fetchpriority="high"> <div class="step1Popup"> <span class="heading">Question Has Been Solved by an Expert!</span> <p>Get step-by-step solutions from verified subject matter experts</p> <button class="view_solution_btn step1PopupButton">View Solution</button> </div> </div> <div class="step"> <span class="view_solution_btn view-solution-btn-cursor"> <strong class="accordion step-heading">Step: 2 <span>Unlock <i class="fa-solid fa-lock"></i></span></strong> </span> </div> <div class="step"> <span class="view_solution_btn view-solution-btn-cursor"> <strong class="accordion step-heading">Step: 3 <span>Unlock <i class="fa-solid fa-lock"></i></span></strong> </span> </div> </section> <section class="relatedQuestion"> <h3>Students Have Also Explored These Related Databases Questions!</h3> <div class="relatedQuestionSliderHolder"> <div class="relatedQuestionCart "> <p class="heading">Q: </p> <a class="relatedQuestionText" href="/study-help/questions/assignment-1-assignment-1-10-es6-and-local-storage-13092863" > Assignment 1 Assignment 1 (10%) / ES6 and Local Storage Create a mobile web site (Create a new folder to hold all files/folders)) index.html css folder that includes a personal css file images folder... </a> </div> <div class="relatedQuestionCart "> <p class="heading">Q: </p> <a class="relatedQuestionText" href="/study-help/questions/assignment-110-es6-and-local-storage-create-a-12380273" > Assignment 1(10%) / ES6 and Local storage - Create a mobile web site (Create a new folder to hold all files/folders)) - index.html - css folder that includes a personal css file - images folder that... </a> </div> <div class="relatedQuestionCart "> <p class="heading">Q: </p> <a class="relatedQuestionText" href="/study-help/questions/please-solve-it-as-soon-as-possible-its-urgent-13256454" > PLEASE SOLVE IT AS SOON AS POSSIBLE ITS URGENT / ES6 and Local Storage Create a mobile web site (Create a new folder to hold all files/folders)) index.html css folder that includes a personal css... </a> </div> <div class="relatedQuestionCart "> <p class="heading">Q: </p> <a class="relatedQuestionText" href="/study-help/questions/create-a-mobile-web-site-create-a-new-folder-to-13512533" > Create a mobile web site (Create a new folder to hold all files/folders)) index.html css folder that includes a personal css file js folder that includes your personal .js script file images folder... </a> </div> <div class="relatedQuestionCart "> <p class="heading">Q: </p> <a class="relatedQuestionText" href="/study-help/questions/create-a-mobile-web-site-create-a-new-folder-to-13178325" > Create a mobile web site (Create a new folder to hold all files/folders)) index.html css folder that includes a personal css file js folder that includes your personal .js script file images folder... </a> </div> <div class="relatedQuestionCart "> <p class="heading">Q: </p> <a class="relatedQuestionText" href="/study-help/questions/create-a-mobile-web-site-create-a-new-folder-to-13709376" > Create a mobile web site (Create a new folder to hold all files/folders)) index.html css folder that includes a personal css file images folder that includes all your site images js folder that... </a> </div> <div class="relatedQuestionCart "> <p class="heading">Q: </p> <a class="relatedQuestionText" href="/study-help/questions/question-create-a-mobile-web-site-create-a-new-folder-13353960" > Question: Create a mobile web site (Create a new folder to hold all files/folders) / This mobile assignment... Create a mobile web site (Create a new folder to hold all files/folders) / This mobile... </a> </div> <div class="relatedQuestionCart "> <p class="heading">Q: </p> <a class="relatedQuestionText" href="/study-help/questions/please-do-not-use-previous-solution-in-chegg-like-john-12991495" > please do not use previous solution in chegg like john 999! use local and session storage jQuery - AJAX - JSON - Media Queries Create a mobile web site (Create a new folder to hold all files/folders)... </a> </div> <div class="relatedQuestionCart "> <p class="heading">Q: </p> <a class="relatedQuestionText" href="/study-help/questions/jquery-ajax-json-media-queries-create-a-9023065" > jQuery - AJAX - JSON - Media Queries: Create a mobile web site (Create a new folder to hold all files/folders) / This mobile assignment will need to be formatted for both landscape and portrait views... </a> </div> <div class="relatedQuestionCart "> <p class="heading">Q: </p> <a class="relatedQuestionText" href="/study-help/questions/create-a-mobile-web-site-create-a-new-folder-to-13168083" > Create a mobile web site (Create a new folder to hold all files/folders) / This mobile assignment will need to be formatted for both landscape and portrait views using mobile jQuery. index.html... </a> </div> <div class="relatedQuestionCart "> <p class="heading">Q: </p> <a class="relatedQuestionText" href="/study-help/questions/you-are-provided-with-the-following-information-for-lily-inc-357388" > You are provided with the following information for Lily Inc. for the month ended June 30, 2020. Lily uses the periodic method for inventory. Date Description Quantity Unit Cost or Selling Price June... </a> </div> <div class="relatedQuestionCart "> <p class="heading">Q: </p> <a class="relatedQuestionText" href="/study-help/questions/assume-there-are-three-separate-real-estate-companies-us-realty-42584" > Assume there are three separate real estate companies: US Realty (which applies the cost model), UK Realty (which applies the revaluation model), and International Realty (which applies the fair... </a> </div> <div class="relatedQuestionCart "> <p class="heading">Q: </p> <a class="relatedQuestionText" href="/study-help/questions/yearcash-flow-0-1-7-8-0-0-27910496" > YearCash Flow 0 $ 1 7 , 8 0 0 1 1 0 , 1 0 0 2 9 , 0 0 0 3 5 , 5 0 0 What is the profitability index for the set of cash flows if the relevant discount rate is 1 0 % ? ( Do not round intermediate... </a> </div> <div class="relatedQuestionCart "> <p class="heading">Q: </p> <a class="relatedQuestionText" href="/study-help/questions/compared-with-half-a-century-ago-adoption-has-become-15204873" > Compared with half a century ago, adoption has become _ _ _ _ _ _ _ _ _ common, but it is more open and acceptabl e , so we probably discuss it _ _ _ _ _ _ _ . fill in the blanks more or much less or... </a> </div> <div class="relatedQuestionCart "> <p class="heading">Q: </p> <a class="relatedQuestionText" href="/study-help/supply-chain-management-a-logistics/2-use-the-pyramid-of-key-factors-that-underpin-jit-2124782" > 2 Use the Pyramid of key factors that underpin JIT to describe the factors that caused these actions to affect the companys ability to respond to the demands being placed on it by customers. This is... </a> </div> <div class="relatedQuestionCart "> <p class="heading">Q: </p> <a class="relatedQuestionText" href="/study-help/supply-chain-management-a-logistics/1-list-the-actions-that-smog-co-took-to-respond-2124781" > 1 List the actions that Smog Co. took to respond to the new demands being placed on it by customers. Group your responses under the headings of stock levels, level of expediting, and storage space.... </a> </div> <div class="relatedQuestionCart "> <p class="heading">Q: </p> <a class="relatedQuestionText" href="/study-help/supply-chain-management-a-logistics/1-explain-what-victoria-sa-has-achieved-in-terms-of-2124780" > 1 Explain what Victoria SA has achieved in terms of P-time and D-time (see section 5.4). Victoria SA makes fantastically good cakes from basic ingredients like flour, water and cherries. Demand for... </a> </div> </div> <nav class="navigationButtons"> <a class="previousQuestionButton" href="/study-help/questions/a-in-an-ipv4-packet-the-value-of-hlen-is-13459896">Previous Question</a> <a class="nextQuestionButton" href="/study-help/questions/case-1-hershey-foods-inc-completed-an-upgrade-to-their-13459898">Next Question</a> </nav> </section> </main> <aside class="expertRight"> <section class="relatedBook" style="margin-bottom:40px; width: 100%;" > <div class="bookHolder" > <div class="relatedBookHeading" > <h2 class="heading">Recommended Textbook</h2> </div> <div class="bookMainInfo" > <div class="bookImage" style="width: 100px !important; min-width: 100px; flex-shrink: 0; margin-right: 20px;"> <a href="/textbooks/semantics-in-databases-second-international-workshop-dagstuhl-castle-germany-january-2001-revised-papers-lncs-2582-2003rd-edition-978-3540009573-175816"> <img src="https://dsd5zvtm8ll6.cloudfront.net/si.question.images/book_images/2024/01/6597db14da0b8_8366597db14d4b98.jpg" width="100" height="131" alt="Semantics In Databases Second International Workshop Dagstuhl Castle Germany January 2001 Revised Papers Lncs 2582" loading="lazy" style="width: 100px !important;"> </a> <a href="/textbooks/computer-science-copying-objects-2678" style="margin-top: 8px; display: block; text-align: left;">More Books</a> </div> <div class="bookInfo" style="text-align: left;"> <span class="bookTitle" style="text-align: left;"> <a href="/textbooks/semantics-in-databases-second-international-workshop-dagstuhl-castle-germany-january-2001-revised-papers-lncs-2582-2003rd-edition-978-3540009573-175816" style="text-align: left;"> Semantics In Databases Second International Workshop Dagstuhl Castle Germany January 2001 Revised Papers Lncs 2582 </a> </span> <div class="bookMetaInfo" style="text-align: left;"> <p class="bookAuthor" style="text-align: left;"> <b>Authors:</b> <span>Leopoldo Bertossi ,Gyula O.H. Katona ,Klaus-Dieter Schewe ,Bernhard Thalheim</span> </p> <p class="bookEdition" style="text-align: left;"> 2003rd Edition </p> <p class="bookEdition" style="text-align: left;"> 3540009574, 978-3540009573 </p> </div></div></div> </div> </section> <div class="post-question-section"> <div class="description-question-section"> <span class="post-question-section-title">Ask a Question and Get Instant Help!</span> </div> <div class="text-area-post-question"> <form action="/study-help/post-question?ref=search" method="post" enctype="multipart/form-data"> <textarea rows="4" class="form-control form-posting-margin" name="textarea-question-content" id="textarea-question-content" placeholder="Type Your Question ...."></textarea> <button type="submit" class="btn btn-sm btn-submit-post-question text-center">Get Answer</button> </form> </div> </div> </aside> </div> </div> <div class="promo items-center justify-center hidden"> <div class="app_promo"> <span class="app_promo_dismiss"> <i class="fa-solid fa-x"></i> </span> <div class="app-button"> <div class="image-wrapper"> <img width="30" height="30" src="https://www.solutioninn.com/includes/images/rewamp/common/mobile-app-logo.png" decoding="async" fetchpriority="high" alt="SolutionInn App Logo"> <strong>Study Help</strong> </div> <button class="app_promo_action redirection" data-question-open-url='q_id=13459897&q_type=2'> Open in App </button> </div> </div> </div> </div> </div> <div class="blank-portion"></div> <footer> <div class="container footerHolder"> <div class="footerLinksFlex"> <div class="footerLinksCol col-md-3 col-lg-3 col-sm-6 col-6"> <p>Services</p> <ul> <li><a href="/site-map">Sitemap</a></li> <li><a href="/fun/">Fun</a></li> <li><a href="/study-help/definitions">Definitions</a></li> <li><a href="/tutors/become-a-tutor">Become Tutor</a></li> <li><a href="/books/used-textbooks">Used Textbooks</a></li> <li><a href="/study-help/categories">Study Help Categories</a></li> <li><a href="/study-help/latest-questions">Recent Questions</a></li> <li><a href="/study-help/questions-and-answers">Expert Questions</a></li> <li><a href="/clothing">Campus Wear</a></li> <li><a href="/sell-books">Sell Your Books</a></li> </ul> </div> <div class="footerLinksCol col-md-3 col-lg-3 col-sm-6 col-6"> <p>Company Info</p> <ul> <li><a href="/security">Security</a></li> <li><a href="/copyrights">Copyrights</a></li> <li><a href="/privacy">Privacy Policy</a></li> <li><a href="/conditions">Terms & Conditions</a></li> <li><a href="/solutioninn-fee">SolutionInn Fee</a></li> <li><a href="/scholarships">Scholarship</a></li> <li><a href="/online-quiz">Online Quiz</a></li> <li><a href="/study-feedback">Give Feedback, Get Rewards</a></li> </ul> </div> <div class="footerLinksCol col-md-3 col-lg-3 col-sm-6 col-6"> <p>Get In Touch</p> <ul> <li><a href="/about-us">About Us</a></li> <li><a href="/support">Contact Us</a></li> <li><a href="/career">Career</a></li> <li><a href="/jobs">Jobs</a></li> <li><a href="/support">FAQ</a></li> <li><a href="https://www.studentbeans.com/en-us/us/beansid-connect/hosted/solutioninn" target="_blank" rel="noopener nofollow">Student Discount</a></li> <li><a href="/campus-ambassador-program">Campus Ambassador</a></li> </ul> </div> <div class="footerLinksCol col-md-3 col-lg-3 col-sm-6 col-12"> <p>Secure Payment</p> <div class="footerAppDownloadRow"> <div class="downloadLinkHolder"> <img src="https://dsd5zvtm8ll6.cloudfront.net/includes/images/rewamp/common/footer/secure_payment_method.png" class="img-fluid mb-3" width="243" height="28" alt="payment-verified-icon" loading="lazy"> </div> </div> <p>Download Our App</p> <div class="footerAppDownloadRow"> <div class="downloadLinkHolder mobileAppDownload col-md-6 col-lg-6 col-sm-6 col-6 redirection" data-id="1"> <img style="cursor:pointer;" src="https://dsd5zvtm8ll6.cloudfront.net/includes/images/rewamp/home_page/google-play-svg.svg" alt="SolutionInn - Study Help App for Android" width="116" height="40" class="img-fluid mb-3 " loading="lazy"> </div> <div class="downloadLinkHolder mobileAppDownload col-md-6 col-lg-6 col-sm-6 col-6 redirection" data-id="2"> <img style="cursor:pointer;" src="https://dsd5zvtm8ll6.cloudfront.net/includes/images/rewamp/home_page/apple-store-download-icon.svg" alt="SolutionInn - Study Help App for iOS" width="116" height="40" class="img-fluid mb-3" loading="lazy"> </div> </div> </div> </div> </div> <div class="footer-bottom"> <p>© 2026 SolutionInn. All Rights Reserved</p> </div></footer> <script> window.addEventListener("load",function(){jQuery(document).ready(function(t){ // Clarity tracking (function(c,l,a,r,i,t,y){ c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i; y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); })(window, document, "clarity", "script", "sjv6tuxsok"); // Helper to read a cookie by name function getCookie(name) { return document.cookie .split('; ') .map(v => v.split('=')) .reduce((acc, [k, val]) => (k === name ? decodeURIComponent(val || '') : acc), ''); } // Read cookies var si = getCookie('si_u_id'); var uid = getCookie('u_id'); var zen = getCookie('zenid'); // Send to Clarity if (si) clarity('set', 'si_u_id', si); if (uid) clarity('set', 'u_id', uid); if (zen) clarity('set', 'zenid', zen); clarity('set', 'ip_address', '216.73.216.134'); t.ajax({type:"POST",url:"/",data:{trackUserActivity:!0,reqUri:document.URL,referer:document.referrer},success:function(t){}})})},!1),window.addEventListener("load",function(){jQuery(document).ready(function(t){t.ajax({type:"POST",url:"/",data:{insertCrawler:!0,reqUri:document.URL,parseTime:"0.056",queryTime:"0.01654768548584",queryCount:"30"},success:function(t){}})})},!1),window.addEventListener("load",function(){jQuery(document).ready(function(){function t(t="",n=!1){var i="itms-apps://itunes.apple.com/app/id6462455425",e="openApp://action?"+t;isAndroid()?(setTimeout(function(){return window.location="market://details?id=com.solutioninn.studyhelp",!1},25),window.location=e):isIOS()?(setTimeout(function(){return window.location=i,!1},25),window.location=e):(i="https://apps.apple.com/in/app/id6462455425",n&&(i="https://play.google.com/store/apps/details?id=com.solutioninn.studyhelp"),window.open("about:blank","_blank").location.href=i)}jQuery("#appModal").modal("show"),jQuery(".download-app-btn").click(function(){t(jQuery(this).attr("data-question-open-url"))}),jQuery(".redirection").click(function(){var n=jQuery(this).attr("data-question-open-url"),i=jQuery(this).attr("data-id");void 0!=n?1==i?t(n,!0):t(n,!1):1==i?t("",!0):t("",!1)}),jQuery(".app-notification-close").click(function(){jQuery(".app-notification-section").css("visibility","hidden");var t=new FormData;t.append("hide_notification",!0),jQuery.ajax({type:"POST",url:"/",data:t,cache:!1,contentType:!1,processData:!1,beforeSend:function(){},success:function(t){location.reload()}})})})},!1); </script> </body> </html>