Question: THIS IS NOT TO BE DONE IN PYTHON JUST JAVASCRIPT AND HTML SYST24444 Mobile Web Assignment #2 Assignment #2 (10%) This assignment will be used
THIS IS NOT TO BE DONE IN PYTHON JUST JAVASCRIPT AND HTML
SYST24444 Mobile Web Assignment #2 Assignment #2 (10%) This assignment will be used to further test your knowledge of native JavaScript and Local Storage plus using native JavaScript to retrieve and display JSON data. Follow all details carefully and be sure to follow instructions for submitting your work. Create a mobile web site (Note: Create a new folder to hold all your files/folders). You will need to include: index.html o All necessary links for your JS file, and your CSS file o Updates: Be sure you have a viewport META tag Include your student number-first name in the
tags A <strong>folder</strong> to hold other HTML pages (ex. pages) A<strong> folder </strong>to hold stylesheet(s) (ex. css) o Your main stylesheet MUST be called yourUserName.css (ex. doej.css) o It is your choice what to name any other stylesheets A folder to hold your script files (ex. js or scripts) o Your main script file MUST be called yourUserName.js (ex. doej.js) o It is your choice what to name the .js file for the 2 nd page A folder to hold images for the assignment A folder to hold your local JSON file (ex. data) <strong>JSON File Update:</strong> Download A2-JSON.json and place in your in your data folder (or folder you named to hold JSON data) Edit the JSON file and include your personal information where indicated Update the Authors to include 4 authors (at least one dead one) and their image links (do not include any special characters) example: {"authorName" : "Jane Austen", "picture" : "janeAusten.jpg"} Check your JSON file in jsonlint.com to make sure it is still valid after making your changes (optional) Find and Include images included in JSON file in your images folder (Wikimedia Commons is one place to look) <strong>Script setup (yourUserName.js) and start-up:</strong> <strong><strong>On Load:</strong></strong> o Create a Class for your Personal information from the JSON file o Create a Class to use for creating an array of Authors from the JSON file o Use a Fetch call to retrieve the local JSON file o Declare a variable based on your Personal Class (your choice of variable name) and populate using personal information from JSON file o Declare a variable as a new Array() and populate using the Author Class from the JSON file o Declare a variable for the Reference link and populate from the JSON file o Declare a variable that will be used to hold the array index once the user selects an author</p> <p><strong>The layout of this site is for landscape view ONLY:</strong> <strong><strong>Header section</strong></strong> o Displays on load (multiple lines) o Line 1: Assignment #2 / Winter 2023 o Line 2: Name, ID, Login, and Program from JSON data with preceding labels for all fields Personal information MUST be pulled from JSON data Template Literal MUST be used to build output string o MUST include some formatting for header area (your choice) using JavaScript CSS (either multiple .css() or create a CSS class) o Note: Be sure to use an appropriate font size so header lines do not take up too much of the mobile space (for example, do not use <h1> unless you reformat to a smaller font size) <strong>Footer section</strong> o Displays on load the Reference link from the JSON file o MUST include some formatting for footer area (your choice) using JavaScript CSS (either multiple .css() or create a CSS class) o Note: Be sure to use an appropriate font size so header and footer lines do not take up too much of the mobile space (for example, do not use <h1> unless you reformat to a smaller font size) Content section displayed BETWEEN header and footer: <strong>o Landscape view ONLY</strong> Include an instructions line (your choice of wording and formatting) to let the user know to select an author from the list to see more information Display the Author data (both name and picture) in a list (ex. Buttons, anchor tags, etc) Formatting will be a large part of the marks...no scrolling but also no large amounts of whitespace Include a click event on your list items that calls a function passing in the index number of the data in the array When an author is selected, save to local storage: Index of the array item chosen Author array Personal variable Reference variable Proceed to next page <strong>2 <sup>nd</sup> page / Script setup and start-up:</strong> HTML should include (your choice of setup and formatting): o Back button (link back to main page...your choice of location and formatting) o Header section o Footer section o Data section that includes 2 sections side-by-side (ex. grid-area) o Link to a separate .js file (your choice of name) in <head> - optional o Link to separate .css file (your choice of name) in <head> - optional <strong>On Load:</strong> o Declare variables needed for local storage retrieval o Retrieve all local storage saved including: Personal data Author array Index of author chosen Reference link o You will be calling the API: https://openlibrary.org/developers/api Select the Authors API Use the documentation to include a Fetch call for the Author chosen by the user Hint: Pull the authors name from the array using the index and use template literal to build the url similar to what we did with the Weather API in class Use the [0] element ONLY of the JSON file retrieved for the author data to display o Create header and footer EXACTLY the same as on the main page (output and formatting) using the data retrieved from local storage Marks will be deducted if a Fetch call is used to retrieve the local JSON file for displaying data for the header/footer and not the local storage data o For Data section: Include picture of Author chosen in left panel from the array and index Include the following data from the API JSON with preceding labels Author Name: Birth Date: Death Date: (this will show undefined if the author is not dead) Top Work: Format output so no scrolling and also no large amount of whitespace</p> <p><strong>JSON FILE>>></strong></p> <p>{</p> <p>"SheridanData" : {</p> <p>"FullName" : "Enter YOUR full name here",</p> <p>"StudentID" : "Enter YOUR student number here",</p> <p>"UserName" : "Enter YOUR student login here",</p> <p>"Program" : "Enter YOUR program name here"</p> <p>},</p> <p>"Authors" : [</p> <p>{"authorName" : "", "picture" : ""},</p> <p>{"authorName" : "", "picture" : ""},</p> <p>{"authorName" : "", "picture" : "" },</p> <p>{"authorName" : "", "picture" : ""}</p> <p>],</p> <p>"Reference" : "https://openlibrary.org/developers/api"</p> <p>}</p> <p> </p> </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/syst24444-mobile-web-assignment-2-assignment-2-10-this-assignment-10440800" >
SYST24444 Mobile Web Assignment #2 Assignment #2 (10%) This assignment will be used to further test your knowledge of native JavaScript and Local Storage plus using native JavaScript to retrieve and... </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/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/contribution-to-final-assessment-20-this-is-an-individual-assignment-1026781" >
Contribution to Final Assessment: 20% This is an Individual Assignment. All work must be your own. Submissions are automatically checked for similarities. Unexplained similarities may constitute... </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/questions/syst24444-assignment-1-for-jane-doe-from-canada-list-of-12461535" >
SYST24444 Assignment #1 for Jane Doe from Canada LIST OF Zoo ANIMALS 11 / TIGER / MAMMAL Toggle formatting of left panel to italic and underlined 22 / ELEPHANT / MAMMAL Click to toggle a border to... </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/javascript-simple-framework-homework-overview-in-this-homework-you-will-9082386" >
JavaScript (Simple) Framework Homework Overview: In this homework you will implement provider code (a function in an external JS file) that can produce a click sortable HTML table from any JSON... </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-do-this-problem-asap-im-stuck-with-this-whole-13798635" >
please do this problem ASAP. I'm stuck with this whole problem. This assignment will be used to test your knowledge of JavaScript, Local Storage, jQuery Selectors and Actions, and simple ISON... </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/zimbabwe-experienced-hyperinflation-all-prices-were-going-up-at-astronomical-rates-including-166467" >
Indicate whether each of the following statements is TRUE, FALSE, or UNCERTAIN and EXPLAIN WHY. 1. Zimbabwe experienced hyperinflation. All prices were going up at astronomical rates, including the... </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/questions/john-died-in-2016-what-amount-if-any-was-included-in-his-159303" >
Q2: XYZ company had $7 million in (EBIT). Its depreciation expense was $2 million, its interest expense was $2 million, and its corporate tax rate was 35%. At year-end, it had $13 million in current... </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/questions/2-if-dan-and-loralei-operate-the-restaurant-some-27934812" >
2 . If Dan and Loralei operate the restaurant, some variable costs would be incurred. List at least five important variable costs that would be directly affected by the operating decisions Loralei... </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/questions/which-of-the-following-are-problems-with-identifying-users-of-18361598" >
Which of the following are problems with identifying users of ABC? Multiple select question. ABC means different things to different organizations. Organizations will announce the discontinuance of... </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/management-information-systems/24-what-is-the-role-of-the-information-systems-function-2116923" >
2-4 What is the role of the information systems function in a business? Describe how the information systems function supports a business. Describe the services provided by information systems... </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/management-information-systems/1-what-are-business-processes-how-are-they-related-to-2116921" >
1 What are business processes? How are they related to information systems? Define business processes and describe the role they play in organizations. Explain how information technology and... </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/management-information-systems/23-why-are-systems-for-collaboration-and-social-business-so-2116922" >
2-3 Why are systems for collaboration and social business so important and what technologies do they use? Define collaboration and social business, and explain why they have become so important in... </a>
</div>
</div>
<nav class="navigationButtons">
<a class="previousQuestionButton" href="/study-help/questions/stock-x-has-the-following-data-assuming-the-stock-market-10522283">Previous Question</a>
<a class="nextQuestionButton" href="/study-help/questions/which-of-the-following-statements-about-intangible-assets-is-true-10522285">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/administering-relational-databases-on-microsoft-azure-a-detail-paradigm-to-support-sql-on-azure-cloud-and-dp-300-study-guide-1st-edition-979-8706128029-175825">
<img src="https://dsd5zvtm8ll6.cloudfront.net/si.question.images/book_images/2024/01/6597db262c415_8546597db26240a3.jpg" width="100" height="131" alt="Administering Relational Databases On Microsoft Azure A Detail Paradigm To Support Sql On Azure Cloud And Dp 300 Study Guide" loading="lazy" style="width: 100px !important;">
</a>
<a href="/textbooks/computer-science-beautifulsoup-2418" 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/administering-relational-databases-on-microsoft-azure-a-detail-paradigm-to-support-sql-on-azure-cloud-and-dp-300-study-guide-1st-edition-979-8706128029-175825" style="text-align: left;">
Administering Relational Databases On Microsoft Azure A Detail Paradigm To Support Sql On Azure Cloud And Dp 300 Study Guide </a>
</span>
<div class="bookMetaInfo" style="text-align: left;">
<p class="bookAuthor" style="text-align: left;">
<b>Authors:</b> <span>Prashanth Jayaram ,Ahmad Yaseen ,Rajendra Gupta</span>
</p>
<p class="bookEdition" style="text-align: left;">
1st Edition </p>
<p class="bookEdition" style="text-align: left;">
979-8706128029 </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=10522284&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>
