Answered step by step
Verified Expert Solution
Question
1 Approved Answer
PLEASE SOLVE IT AS SOON AS POSSIBLE ITS URGENT / ES6 and Local Storage Create a mobile web site (Create a new folder to hold
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 file
- images folder that includes all your site images
- js folder that includes your personal .js script file
- Enter YOUR NAME in the
tags AND your name and student number in a comment at the top of the index.html <ul> <li>Header area that includes <em>Assignment #1 / Your Name / Your Student Number</em>; This header must be on both pages</li> <li>Footer line that includes <em>Your Login Name / Your Campus</em>; this footer must be on both pages.</li> <li>Both pages must include a <em>picture of you</em> as the sales representative</li> </ul> </li> </ul> <p> </p> <ul> <li> <ul> <li>Content area on the <strong>main entry page</strong> will include inputs for customer entry for the following: <ul> <li> <ul> <li>Entry field (with labeling) for the Customer's name</li> <li>Entry field (with labeling) for the Customer's email address</li> <li>Entry field (with labeling) for which room the customer is planning on painting</li> <li>Entry field (with labeling) for the width of the room</li> <li>Entry field (with labeling) for the length of the room</li> <li>Entry field (with labeling) using a colour box so the customer can pick the colour they want to paint the room</li> <li>A selection list so the user can decide whether they want standard paint (24.99 per can) or premium paint (39.99 per can)</li> <li>A button to create a quote for the customer</li> </ul> </li> </ul> <ul> <li>Formatting, layout, colours, background, size, and labeling will all be considered in grading</li> <li>All data MUST be saved to local storage before calling the quote page and ES6 concepts used where applicable.</li> </ul> </li> </ul> </li> </ul> <ul> <li> <ul> <li>Content on the <strong>quote page</strong> (a separate page) will include the following: <ul> <li> <ul> <li>Customer's contact information (name and email)</li> <li>Room to be painted</li> <li>Square footage of the room based on length and width</li> <li>A colour swatch showing the colour the customer picked</li> <li>The number of paint cans that will be needed to paint the room based on each can cover approximately 400 sq ft of wall space (rounded up)</li> <li>The final price for the number of cans based on which type of paint was selected plus 13% HST</li> </ul> </li> </ul> <ul> <li>All information must be labeled and formatting, layout, colours, background, and size will all be considered in grading</li> <li>Data from the entry page MUST be pulled from local storage in order to fill in quote page and ES6 concepts used where applicable.</li> </ul> </li> </ul> </li> </ul> </div> </section> <section class="answerHolder"> <div class="answerHolderHeader"> <div class="answer-heading"> <h2>Step by Step Solution</h2> </div> <div class="answerReviews"> <div class="starReview"> <div class="starIcon"> </div> <div class="starText"> </div> </div> </div> </div> <div class="answerSteps"> <p>There are <span>3</span> Steps involved in it</p> <div class="step"> <h3>Step: 1</h3> <img src="https://dsd5zvtm8ll6.cloudfront.net/includes/images/document_product_info/blur-text-image.webp" width="759" height="271" alt="blur-text-image" decoding="async" fetchpriority="high"> <div class="step1Popup"> <h3>Get Instant Access to Expert-Tailored Solutions</h3> <p>See step-by-step solutions with expert insights and AI powered tools for academic success</p> <button class="view_solution_btn step1PopupButton">View Solution</button> </div> </div> <div class="step"> <h3 class="accordion">Step: 2</h3> <div class="panel"> <img src="https://dsd5zvtm8ll6.cloudfront.net/includes/images/document_product_info/blur-subtext-image.webp" width="975" height="120" alt="blur-text-image_2" loading="lazy" decoding="async" fetchpriority="low"> <button class="view_solution_btn stepPopupButton">Sign Up to view</button> </div> </div> <div class="step"> <h3 class="accordion">Step: 3</h3> <div class="panel"> <img src="https://dsd5zvtm8ll6.cloudfront.net/includes/images/document_product_info/blur-subtext-image.webp" width="975" height="120" alt="blur-text-image_3" loading="lazy" decoding="async" fetchpriority="low"> <button class="view_solution_btn stepPopupButton">Sign Up to view</button> </div> </div> </div> </section> </div> <div class="expertRight"> <section class="AIRedirect"> <div class="AIHolder"> <h2>Ace Your Homework with AI</h2> <p>Get the answers you need in no time with our AI-driven, step-by-step assistance</p> <a class="AILink" href="/ask_ai">Get Started</a> </div> </section> <section class="relatedBook"> <div class="bookHolder" > <div class="relatedBookHeading" > <h2>Recommended Textbook for</h2> <object class="freeTagImage" type="image/svg+xml" data="https://dsd5zvtm8ll6.cloudfront.net/includes/images/rewamp/document_product_info/free.svg" name="free-book-icon"></object> </div> <div class="bookMainInfo" > <div class="bookImage" > <a href="/textbooks/automating-access-databases-with-macros-1st-edition-9781797816340"> <img src="https://dsd5zvtm8ll6.cloudfront.net/si.question.images/book_images/64f03d84e78e3_48934.jpg" width="100" height="131" alt="Automating Access Databases With Macros" loading="lazy"> </a> </div> <div class="bookInfo" > <h3 class="bookTitle"> <a href="/textbooks/automating-access-databases-with-macros-1st-edition-9781797816340"> Automating Access Databases With Macros </a> </h3> <div class="bookMetaInfo" > <p class="bookAuthor"> <b>Authors:</b> <span>Fish Davis</span> </p> <p class="bookEdition"> 1st Edition </p> <p class="bookEdition"> 1797816349, 978-1797816340 </p> </div></div></div> <a href="/textbooks/computer-science-ada-programming-2391" class="viewMoreBooks">More Books</a> </div> </section> </div> </div> <section class="relatedQuestion"> <div class="relatedQuestionHolder"> <h4>Students also viewed these Databases questions</h4> <div class="relatedQuestionSliderHolder"> <div class="relatedQuestionCart "> <div class="relatedQuestionCartHeader"> <h3>Question</h3> <div class="relatedStarRating"> <span class="star active">★</span><span class="star active">★</span><span class="star active">★</span><span class="star">★</span><span class="star">★</span> </div> </div> <a class="relatedQuestionText" href="/two-long-straight-parallel-wires-86-cm-apart-carry-currents" > Two long, straight, parallel wires 8.6 cm apart carry currents of equal magnitude I. They repel each other with a force per unit length of 3.6 nN/m. (a) Are the currents parallel or antiparallel? (b)... </a> <div class="relatedQuestionCartFooter"> <div class="relatedHistory"> <p> Answered: <span>1 week ago</span> </p> </div> </div> </div> <div class="relatedQuestionCart "> <div class="relatedQuestionCartHeader"> <h3>Question</h3> <div class="relatedStarRating"> <span class="star active">★</span><span class="star active">★</span><span class="star active">★</span><span class="star">★</span><span class="star">★</span> </div> </div> <a class="relatedQuestionText" href="/study-help/openintro-statistics/1521-for-the-data-of-exercise-157-test-the-null-2103712" > 15.21 For the data of Exercise 15.7, test the null hypothesis that the population mean operating costs per mile are the same for all three types of cards without assuming normal population... </a> <div class="relatedQuestionCartFooter"> <div class="relatedHistory"> <p> Answered: <span>1 week ago</span> </p> </div> </div> </div> <div class="relatedQuestionCart "> <div class="relatedQuestionCartHeader"> <h3>Question</h3> <div class="relatedStarRating"> <span class="star active">★</span><span class="star active">★</span><span class="star active">★</span><span class="star">★</span><span class="star">★</span> </div> </div> <a class="relatedQuestionText" href="/study-help/management-information-systems/the-principal-interest-groups-affected-by-the-system-and-the-2119161" > The principal interest groups affected by the system and the attitudes of workers who will be using the system </a> <div class="relatedQuestionCartFooter"> <div class="relatedHistory"> <p> Answered: <span>1 week ago</span> </p> </div> </div> </div> <div class="relatedQuestionCart "> <div class="relatedQuestionCartHeader"> <h3>Question</h3> <div class="relatedStarRating"> <span class="star active">★</span><span class="star active">★</span><span class="star active">★</span><span class="star">★</span><span class="star">★</span> </div> </div> <a class="relatedQuestionText" href="/prior-to-the-distribution-of-cash-to-the-partners-the" > Prior to the distribution of cash to the partners, the accounts in the NJF Company are: Cash $28,000, Newell Capital (Cr.) $17,000, Jennings Capital (Cr.) $15,000, and Farley Capital (Dr.) $4,000.The... </a> <div class="relatedQuestionCartFooter"> <div class="relatedHistory"> <p> Answered: <span>1 week ago</span> </p> </div> </div> </div> <div class="relatedQuestionCart "> <div class="relatedQuestionCartHeader"> <h3>Question</h3> <div class="relatedStarRating"> <span class="star active">★</span><span class="star active">★</span><span class="star active">★</span><span class="star">★</span><span class="star">★</span> </div> </div> <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 class="relatedQuestionCartFooter"> <div class="relatedHistory"> <p> Answered: <span>1 week ago</span> </p> </div> </div> </div> <div class="relatedQuestionCart "> <div class="relatedQuestionCartHeader"> <h3>Question</h3> <div class="relatedStarRating"> <span class="star active">★</span><span class="star active">★</span><span class="star active">★</span><span class="star">★</span><span class="star">★</span> </div> </div> <a class="relatedQuestionText" href="/study-help/questions/p31b-l0-24-transactions-financial-statementsservice-company-listed-below-are-6224326" > P3.1B (L0 2,4) (Transactions, Financial StatementsService Company) Listed below are the transactions of Rook Medical, for the month of March. March 1 Rook begins practice as a family practitioner and... </a> <div class="relatedQuestionCartFooter"> <div class="relatedHistory"> <p> Answered: <span>1 week ago</span> </p> </div> </div> </div> <div class="relatedQuestionCart "> <div class="relatedQuestionCartHeader"> <h3>Question</h3> <div class="relatedStarRating"> <span class="star active">★</span><span class="star active">★</span><span class="star active">★</span><span class="star">★</span><span class="star">★</span> </div> </div> <a class="relatedQuestionText" href="/study-help/questions/financial-accounting-215-journal-entries-and-the-equation-suppose-on-5415879" > Financial Accounting: 2.1.5 Journal Entries and the Equation Suppose on January 1, 2014 Cardullo's purchases a new cash register for the shop and pays $800. ACCOUNTS CASH INVENTORY REVENUE ACCOUNTS... </a> <div class="relatedQuestionCartFooter"> <div class="relatedHistory"> <p> Answered: <span>1 week ago</span> </p> </div> </div> </div> <div class="relatedQuestionCart "> <div class="relatedQuestionCartHeader"> <h3>Question</h3> <div class="relatedStarRating"> <span class="star active">★</span><span class="star active">★</span><span class="star active">★</span><span class="star">★</span><span class="star">★</span> </div> </div> <a class="relatedQuestionText" href="/study-help/questions/the-number-of-tubes-of-toothpaste-purchased-by-a-typical-4924071" > The number of tubes of toothpaste purchased by a typical family is a random variable having a Poisson distribution with an average of 1.8 tubes per month. i. What is the probability that a typical... </a> <div class="relatedQuestionCartFooter"> <div class="relatedHistory"> <p> Answered: <span>1 week ago</span> </p> </div> </div> </div> <div class="relatedQuestionCart "> <div class="relatedQuestionCartHeader"> <h3>Question</h3> <div class="relatedStarRating"> <span class="star active">★</span><span class="star active">★</span><span class="star active">★</span><span class="star">★</span><span class="star">★</span> </div> </div> <a class="relatedQuestionText" href="/study-help/questions/a-mix-of-three-materials-into-a-process-produces-09-4282317" > A mix of three materials into a process produces 0.9 litres of a finished product, with 10% loss of input in the process. Standard material costs are as follows per 0.9 litres of output. Material $ X... </a> <div class="relatedQuestionCartFooter"> <div class="relatedHistory"> <p> Answered: <span>1 week ago</span> </p> </div> </div> </div> <div class="relatedQuestionCart "> <div class="relatedQuestionCartHeader"> <h3>Question</h3> <div class="relatedStarRating"> <span class="star active">★</span><span class="star active">★</span><span class="star active">★</span><span class="star">★</span><span class="star">★</span> </div> </div> <a class="relatedQuestionText" href="/study-help/questions/complete-cogburns-december-31-year-4-balance-sheet-using-the-1915019" > Complete Cogburn's December 31, Year 4, balance sheet using the information below. Each of the items may be reported as either a current or noncurrent liability. Enter the appropriate amounts in the... </a> <div class="relatedQuestionCartFooter"> <div class="relatedHistory"> <p> Answered: <span>1 week ago</span> </p> </div> </div> </div> <div class="relatedQuestionCart "> <div class="relatedQuestionCartHeader"> <h3>Question</h3> <div class="relatedStarRating"> <span class="star active">★</span><span class="star active">★</span><span class="star active">★</span><span class="star">★</span><span class="star">★</span> </div> </div> <a class="relatedQuestionText" href="/study-help/questions/1-scroll-inc-a-whollyowned-subsidiary-of-pirn-inc-began-4452736" > 1. Scroll Inc., a wholly-owned subsidiary of Pirn, Inc. began operations on January 1, 2019. The following information is from the condensed 2019 income statements of Pirn and Scroll: Pirn Scroll... </a> <div class="relatedQuestionCartFooter"> <div class="relatedHistory"> <p> Answered: <span>1 week ago</span> </p> </div> </div> </div> <div class="relatedQuestionCart "> <div class="relatedQuestionCartHeader"> <h3>Question</h3> <div class="relatedStarRating"> <span class="star active">★</span><span class="star active">★</span><span class="star active">★</span><span class="star">★</span><span class="star">★</span> </div> </div> <a class="relatedQuestionText" href="/study-help/managing-human-behavior-in-public/which-of-these-influenced-your-life-most-dramatically-2124207" > Which of these influenced your life most dramatically? </a> <div class="relatedQuestionCartFooter"> <div class="relatedHistory"> <p> Answered: <span>1 week ago</span> </p> </div> </div> </div> <div class="relatedQuestionCart "> <div class="relatedQuestionCartHeader"> <h3>Question</h3> <div class="relatedStarRating"> <span class="star active">★</span><span class="star active">★</span><span class="star active">★</span><span class="star">★</span><span class="star">★</span> </div> </div> <a class="relatedQuestionText" href="/study-help/managing-human-behavior-in-public/were-there-cultural-opportunities-or-political-events-in-your-hometown-2124210" > Were there cultural opportunities or political events in your hometown that were particularly influential? </a> <div class="relatedQuestionCartFooter"> <div class="relatedHistory"> <p> Answered: <span>1 week ago</span> </p> </div> </div> </div> <div class="relatedQuestionCart "> <div class="relatedQuestionCartHeader"> <h3>Question</h3> <div class="relatedStarRating"> <span class="star active">★</span><span class="star active">★</span><span class="star active">★</span><span class="star">★</span><span class="star">★</span> </div> </div> <a class="relatedQuestionText" href="/study-help/managing-human-behavior-in-public/what-roles-have-these-individuals-played-in-your-life-2124213" > What roles have these individuals played in your life? </a> <div class="relatedQuestionCartFooter"> <div class="relatedHistory"> <p> Answered: <span>1 week ago</span> </p> </div> </div> </div> </div> </div> </section> <hr class="expert-separator"> <div class="next-previous-button"> <div class="navigationButtons"> <a class="previousQuestionButton" href="/study-help/questions/1-stial-zal-stree-state-initial-and-goal-states-three-13256453">Previous Question</a> <a class="nextQuestionButton" href="/study-help/questions/exercise-bex-3-a-ask-the-user-for-his-name-13256455">Next Question</a> </div> </div> </div> <div class="promo items-center justify-center hidden" style="margin-left:-15px;"> <div class="app_promo"> <div class="app_promo_headline"> <img class="app_promo_icon" alt="Mobile App Logo" width="40" height="40" loading="lazy" src="https://dsd5zvtm8ll6.cloudfront.net/includes/images/mobile/finalLogo.png"> <p class="app_promo_title font-sans items-center">View Answer in SolutionInn App</p> </div> <button class="app_promo_action redirection question_open_url='q_id=13256454&q_type=2'"> Download on the App Store </button> <button class="btn btn-default app_promo_dismiss"> Continue with the mobile website </button> </div> </div> </main> </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="/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> </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> </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="/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>© 2024 SolutionInn. All Rights Reserved</p> </div></footer> <script> window.addEventListener("load",function(){jQuery(document).ready(function(t){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("question_open_url"))}),jQuery(".redirection").click(function(){var n=jQuery(this).attr("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>