Question: For this assignment, you will be using CSS Grid to create a mobile web site that displays COVID-19 Vaccine Data in Ontario. This mobile assignment
- For this assignment, you will be using CSS Grid to create a mobile web site that displays COVID-19 Vaccine Data in Ontario.
- This mobile assignment will need to be formatted for both landscape and portrait views.
- Create a new folder to hold all files/folders.
- index.html should be the only file in the main folder; create sub-folders for all other files (ex. css folder for CSS files, images folder that holds all images, etc.)
- Be sure to include the jquery.js file in your js or scripts folder along with your own .js file
- Be sure to include the viewport setting in your index.html
- Enter YOUR NAME in the tags AND your name and student number in a comment at the top of the index.html</li> <li>Entire site must use <strong>CSS Grid with grid-areas for layout</strong>.</li> <li>Site must include a background image that fills the entire page (your choice of covering the page with one image or a repeating image); make sure image is very transparent for readability;</li> <li>The entire page should fit both a portrait and landscape view (make changes to view accordingly).</li> <li> </li> <li> <strong>Header (grid-area)</strong> will display "<strong>COVID-19 Vaccine Data in Ontario</strong>" and include <em>Assignment #2 / Your Name / Your Student Number in a second line</em>.</li> <li> <strong>Content</strong>, below the Header, will contain two sections sitting side by side in landscape mode or arranged vertically in portrait mode. <ol> <li> <strong>Main Section (grid-area)</strong> will contain the following: <ul> <li>Two buttons ("Load LocalStorage", "Display List") and a list.</li> <li>The "Load LocalStorage" button will: <ul> <li>Retrieve the data from the vaccine doses JSON file (<em>download the "vaccine_doses.json" file from SLATE and include it in your site folder in a separate sub-folder</em>) using AJAX; and use a <strong>CLASS</strong> statement with a <strong>Constructor</strong> to save the information to local storage.</li> <li>The CLASS will contain all the properties from the JSON object plus one more property - "id". The value of the "id" property will be a counter that starts at 1 for the first item saved to local storage and increments by 1 for every additional item.</li> <li>Use the "report_date" property from the JSON object as key when saving to local storage.</li> </ul> </li> <li>The "Display List" button will build an unordered list from local storage. The list will display only the keys retrieved from local storage, and have the title "Summary of Total Vaccine Doses Administered in Ontario.".</li> <li>When the user selects an item from the list, the detail information of the item selected will be displayed in the <strong>Detail Section</strong>.</li> </ul> </li> <li> <strong>Detail Section (grid-area)</strong> will contain the following: <ul> <li>Retrieve and display all the information from local storage of the item selected by the user.</li> <li>The data will have the title "Vaccine Doses Detail Information".</li> </ul> </li> </ol> </li> <li> <strong>Footer (grid-area)</strong> will include <em>Your Login Name / Your Campus; and this url "https://data.ontario.ca/dataset/covid-19-vaccine-data-in-ontario"</em> on the next line.</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/please-post-all-files-including-htmlcss-and-javascript-i-need-23285361" >
Please post all files including HTML,CSS and javascript. I need it tomorrow. Thank you. This assignment will be used to test your knowledge of JavaScript, Local Storage and jQuery Selectors and... </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/questions/create-a-mobile-web-site-note-create-a-new-folder-23287168" >
Create a mobile web site (Note: Create a new folder to hold all your files/folders). You will need to include: o index.html o Links: Link to jquery.js Link to your js script file Link to your... </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/questions/this-assignment-will-be-used-to-test-your-knowledge-of-7723030" >
This assignment will be used to test your knowledge of native JavaScript, Local Storage and simple JSON retrieval. Follow all details carefully and be sure to follow instructions for submitting your... </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/questions/assignment-1-10-this-assignment-will-be-used-to-test-13675634" >
Assignment #1 (10%) This assignment will be used to test your knowledge of JavaScript, Local Storage, jQuery Selectors and Actions, and simple JSON retrieval. Follow all details carefully and be sure... </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/questions/create-a-mobile-web-site-note-create-a-new-folder-12656843" >
Create a mobile web site (Note: Create a new folder to hold all your files/folders). You will need to include: O o index.html All necessary links for jQuery, your JS file, and your CSS file Updates:... </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/questions/create-a-mobile-web-site-note-create-a-new-folder-23291770" >
Create a mobile web site (Note: Create a new folder to hold all your files/folders). You will need to include: index.html o Links: Link to jquery.js Link to your js script file Link to your... </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/questions/upvoting-guranteed-for-correct-answer-syst24444-assignment-1-assignment-1-10379408" >
Upvoting guranteed for correct answer!! SYST24444 Assignment \#1 Assignment \#1 (10\%) This assignment will be used to test your knowledge of native JavaScript, Local Storage and simple JSON... </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/questions/please-answer-correctly-for-guranteed-upvoting-last-time-it-was-13395480" >
Please answer correctly for guranteed upvoting!! Last time it was incorrectly answered SYST24444 Assignment \#1 Assignment \#1 (10\%) This assignment will be used to test your knowledge of native... </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/questions/syst24444-assignment-1-this-assignment-will-be-used-to-test-23284404" >
SYST24444 Assignment #1 This assignment will be used to test your knowledge of native JavaScript, Local Storage and simple JSON retrieval. Follow all details carefully and be sure to follow... </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/questions/can-you-please-provide-me-the-whole-code-this-assignment-13372339" >
Can you please provide me the whole code This assignment will be used to test your knowledge of native JavaScript, Local Storage and simple JSON retrieval. Follow all details carefully and be sure to... </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/questions/man-t-cc-and-ng-11-which-of-the-following-402656" >
Man t Cc and ng 11. Which of the following is NOT a period cost? A. Monthly depreciation of the equipment in a fitness room used by factory workers. B. Salary of a billing clerk. C. Insurance on a... </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/you-are-the-manager-of-a-monopoly-a-typical-consumers" >
You are the manager of a monopoly. A typical consumers inverse demand function for your firms product is P = 100 20Q, and your cost function is C(Q) = 20Q. a. Determine the optimal two-part pricing... </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/questions/a-pension-plan-is-underfunded-if-the-projected-benefit-obligation-27871583" >
A pension plan is underfunded if the projected benefit obligation exceeds the fair value of the pension plan assets Group startsIf a company purchases treasury stock its earnings per share will... </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/questions/seved-help-14-wisconsin-snowmobile-corp-is-considering-a-switch-15204872" >
Seved Help 14 Wisconsin Snowmobile Corp. is considering a switch to level production Cost efficiencies would occur under level production, and aftertax costs would decline by $31,500, but inventory... </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/employee-benefits/8-providing-support-during-instruction-2126274" >
8. Providing support during instruction. </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/employee-benefits/9-distributing-evaluation-materials-eg-tests-reaction-measures-surveys-2126275" >
9. Distributing evaluation materials (e.g., tests, reaction measures, surveys). </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/employee-benefits/7-having-backup-equipment-eg-paper-copy-of-slides-an-2126273" >
7. Having backup equipment (e.g., paper copy of slides, an extra overhead projector bulb) should equipment fail. </a>
</div>
</div>
<nav class="navigationButtons">
<a class="previousQuestionButton" href="/study-help/questions/please-find-the-two-errors-in-this-java-program-import-13300271">Previous Question</a>
<a class="nextQuestionButton" href="/study-help/questions/1-create-a-class-doll-with-one-attribute-name-of-13300273">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/db2-11-the-database-for-big-data-and-analytics-1st-edition-9781583473856">
<img src="https://dsd5zvtm8ll6.cloudfront.net/si.question.images/book_images/6507f8e93cee0_55084.jpg" width="100" height="131" alt="DB2 11 The Database For Big Data And Analytics" loading="lazy" style="width: 100px !important;">
</a>
<a href="/textbooks/computer-science-bufferedreader-2668" 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/db2-11-the-database-for-big-data-and-analytics-1st-edition-9781583473856" style="text-align: left;">
DB2 11 The Database For Big Data And Analytics </a>
</span>
<div class="bookMetaInfo" style="text-align: left;">
<p class="bookAuthor" style="text-align: left;">
<b>Authors:</b> <span>Cristian Molaro, Surekha Parekh, Terry Purcell, Julian Stuhler</span>
</p>
<p class="bookEdition" style="text-align: left;">
1st Edition </p>
<p class="bookEdition" style="text-align: left;">
1583473858, 978-1583473856 </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=13300272&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>
