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 Header area that includes Assignment 1 Your Name Your Student Number This header must be on both pages Footer line that includes Your Login Name Your Campus this footer must be on both pages Both pages must include a picture of you as the sales representative Content area on the main entry page will include inputs for customer entry for the following Entry field (with labeling) for the Customer's name Entry field (with labeling) for the Customer's email address Entry field (with labeling) for which room the customer is planning on painting Entry field (with labeling) for the width of the room Entry field (with labeling) for the length of the room Entry field (with labeling) using a colour box so the customer can pick the colour they want to paint the room A selection list so the user can decide whether they want standard paint (24 99 per can) or premium paint (39 99 per can) A button to create a quote for the customer Formatting, layout, colours, background, size, and labeling will all be considered in grading All data MUST be saved to local storage before calling the quote page and ES6 concepts used where applicable Content on the quote page (a separate page) will include the following Customer's contact information (name and email) Room to be painted Square footage of the room based on length and width A colour swatch showing the colour the customer picked 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) The final price for the number of cans based on which type of paint was selected plus 13 HST All information must be labeled and formatting, layout, colours, background, and size will all be considered in grading Data from the entry page MUST be pulled from local storage in order to fill in quote page and ES6 concepts used where applicable How I will be grading exercise I will be using Chrome's Toggle Device Bar for Galaxy S5 in Landscape mode using localhost 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 the appropriate DropBox in SLATE by the Due Date indicated Be sure to include ALL files If all data is not included and your assignment cannot be graded, any resubmit will be subject to late marks Make sure all links are relative so they will work on my machine Try sending to another computer to check Remember You have 3 days past the due date with 10 off per day to submit Each assignment must be done individually I will be checking for copying especially if the assignments look similar and will file an academic integrity breach if necessary This is not an assignment that should be started the day it is due Since you have 2 weeks to complete the assignment, NO EXTENSIONS to the due date will be given

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

Question: 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

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> <p>How I will be grading exercise...</p> <ul> <li> <ul> <li> <ul> <li>I will be using <strong>Chrome's Toggle Device Bar for Galaxy S5 in Landscape mode</strong> using <em>localhost</em> </li> <li>Remember, this is a <strong>mobile site</strong> so formatting and layout should reflect this; too much scrolling or whitespace will reduce your mark.</li> </ul> </li> </ul> </li> </ul> <p>What to submit...</p> <ul> <li> <ul> <li> <ul> <li> <strong>ZIP the entire completed exercise folder</strong> and submit to the appropriate DropBox in SLATE by the Due Date indicated</li> <li> <strong>Be sure to include ALL files.</strong> If all data is not included and your assignment cannot be graded, any resubmit will be subject to late marks. Make sure <em>all links are relative</em> so they will work on my machine. Try sending to another computer to check.</li> <li> <strong>Remember:</strong> You have 3 days past the due date with 10% off per day to submit</li> </ul> </li> </ul> </li> </ul> <p> </p> <ul> <li> <ul> <li> <ul> <li>Each assignment must be done individually. I will be checking for copying especially if the assignments look similar and will file an academic integrity breach if necessary</li> </ul> </li> </ul> </li> </ul> <p> </p> <ul> <li> <ul> <li> <ul> <li>This is not an assignment that should be started the day it is due. Since you have 2 weeks to complete the assignment, NO EXTENSIONS to the due date will be given.</li> </ul> </li> </ul> </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/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/exercise-1-10-es6-and-local-storage-create-a-13459897" > 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... </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/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/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/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/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/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="/nonlinear-spring-has-the-force-versus-displacement" > A nonlinear spring has the force versus displacement relation of F = kns(x x0) n. If the spring end is moved to x1 from the relaxed state, determine the formula for the required work. </a> </div> <div class="relatedQuestionCart "> <p class="heading">Q: </p> <a class="relatedQuestionText" href="/add-or-subtract-a-a-5-1i-3-" > Add or subtract. a. a. (5 - 1i) + (3 + 5i) b. (6 + 2i) - (-1 + 2i) c. (2 + 3i) + (2 - 5i) d. (2.35 + 2.71i) - (4.91 + 3.32i) </a> </div> <div class="relatedQuestionCart "> <p class="heading">Q: </p> <a class="relatedQuestionText" href="/study-help/questions/if-you-are-going-to-borrow-money-in-the-future-27910560" > If you are going to borrow money in the future and want to hedge risk, you should enter an FRA in which you receive forward, pay floating or recelve foating pay forward </a> </div> <div class="relatedQuestionCart "> <p class="heading">Q: </p> <a class="relatedQuestionText" href="/study-help/questions/explain-how-and-why-marketers-go-beyond-selling-a-product-14786048" > Explain how and why marketers go beyond selling a product or service to create brand experiences. Discuss a company with which you have had a good brand experience. Explain their customer engagement... </a> </div> <div class="relatedQuestionCart "> <p class="heading">Q: </p> <a class="relatedQuestionText" href="/study-help/cost-of-capital-in-managerial-finance/what-are-the-variable-columns-settings-available-in-the-mining-2132181" > What are the Variable columns settings available in the Mining Models Tab? </a> </div> <div class="relatedQuestionCart "> <p class="heading">Q: </p> <a class="relatedQuestionText" href="/study-help/cost-of-capital-in-managerial-finance/what-does-the-mining-content-viewer-in-visual-studio-show-2132180" > What does the Mining Content Viewer in Visual Studio show in terms of Probabilities? </a> </div> <div class="relatedQuestionCart "> <p class="heading">Q: </p> <a class="relatedQuestionText" href="/study-help/cost-of-capital-in-managerial-finance/how-are-continuous-variables-normally-handled-in-decision-tree-algorithms-2132179" > How are continuous variables normally handled in Decision Tree Algorithms? </a> </div> </div> <nav class="navigationButtons"> <a class="previousQuestionButton" href="/study-help/questions/create-a-simple-java-application-template-this-is-a-just-13709375">Previous Question</a> <a class="nextQuestionButton" href="/study-help/questions/part-1-simple-write-the-necessary-php-code-to-calculate-13709377">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/mysql-crash-course-a-hands-on-introduction-to-database-development-1st-edition-9781718503007"> <img src="https://dsd5zvtm8ll6.cloudfront.net/si.question.images/book_images/64ed820ba49e4_47802.jpg" width="100" height="131" alt="MySQL Crash Course A Hands On Introduction To Database Development" loading="lazy" style="width: 100px !important;"> </a> <a href="/textbooks/computer-science-balanced-trees-2665" 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/mysql-crash-course-a-hands-on-introduction-to-database-development-1st-edition-9781718503007" style="text-align: left;"> MySQL Crash Course A Hands On Introduction To Database Development </a> </span> <div class="bookMetaInfo" style="text-align: left;"> <p class="bookAuthor" style="text-align: left;"> <b>Authors:</b> <span>Rick Silva</span> </p> <p class="bookEdition" style="text-align: left;"> 1st Edition </p> <p class="bookEdition" style="text-align: left;"> 1718503008, 978-1718503007 </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=13709376&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>