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 js 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
- 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> </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/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-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/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/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/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="/what-factors-are-necessary-for-determining-the-estimated-annual-effective" >
What factors are necessary for determining the estimated annual effective income tax rate? </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/questions/what-are-the-principles-of-warehousing-and-what-is-just-63748" >
what are the principles of warehousing and what is just in time? </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/questions/quemon-6-parfally-correct-mark-5-4-out-of-5-27931446" >
Quemon 6 Parfally correct Mark. 5 4 out of 5 . 0 0 P fisg question Cash budget even $ 1 , 0 0 0 amounts. No borrowings or investments exist at the beginning of july. \ table [ [ July , August, \... </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/sports-economics/advanced-analysis-assume-that-the-consumption-schedule-for-a-private-2125047" >
ADVANCED ANALYSIS Assume that the consumption schedule for a private open economy is such that consumption C 50 0.8 Y . Assume further that planned investment I g and net exports X n are... </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/sports-economics/last-word-what-is-says-law-how-does-it-relate-2125049" >
LAST WORD What is Says law? How does it relate to the view held by classical economists that the economy generally will operate at a position on its production possibilities curve (Chapter 1)? Use... </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/sports-economics/key-question-refer-to-the-table-below-in-answering-the-2125046" >
KEY QUESTION Refer to the table below in answering the questions that follow: a. If full employment in this economy is 130 million, will there be an inflationary expenditure gap or a recessionary... </a>
</div>
</div>
<nav class="navigationButtons">
<a class="previousQuestionButton" href="/study-help/questions/what-distinguishes-engineering-from-professions-like-law-and-medicine-according-13512532">Previous Question</a>
<a class="nextQuestionButton" href="/study-help/questions/890-90-91-92-93-94-95-960-13512534">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/current-trends-in-database-technology-edbt-2004-workshops-edbt-2004-workshops-phd-datax-pim-p2panddb-and-clustweb-heraklion-crete-greece-march-2004-revised-selected-papers-lncs-3268-2005th-edition-978-3540233053-175968">
<img src="https://dsd5zvtm8ll6.cloudfront.net/si.question.images/book_images/2024/01/6597e5b29f227_5546597e5b29afa4.jpg" width="100" height="131" alt="Current Trends In Database Technology Edbt 2004 Workshops Edbt 2004 Workshops Phd Datax Pim P2panddb And Clustweb Heraklion Crete Greece March 2004 Revised Selected Papers Lncs 3268" loading="lazy" style="width: 100px !important;">
</a>
<a href="/textbooks/computer-science-cobol-2432" 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/current-trends-in-database-technology-edbt-2004-workshops-edbt-2004-workshops-phd-datax-pim-p2panddb-and-clustweb-heraklion-crete-greece-march-2004-revised-selected-papers-lncs-3268-2005th-edition-978-3540233053-175968" style="text-align: left;">
Current Trends In Database Technology Edbt 2004 Workshops Edbt 2004 Workshops Phd Datax Pim P2panddb And Clustweb Heraklion Crete Greece March 2004 Revised Selected Papers Lncs 3268 </a>
</span>
<div class="bookMetaInfo" style="text-align: left;">
<p class="bookAuthor" style="text-align: left;">
<b>Authors:</b> <span>Wolfgang Lindner ,Marco Mesiti ,Can Turker ,Yannis Tzitzikas ,Athena Vakali</span>
</p>
<p class="bookEdition" style="text-align: left;">
2005th Edition </p>
<p class="bookEdition" style="text-align: left;">
3540233059, 978-3540233053 </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=13512533&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>
