Question: 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
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: On Load:</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: Header section</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> </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> <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>
<p class="short_sol">
The question provided is incomplete for the following reasons The q... <a href="/sign?auth=register" class="view_solution_btn short_sol_button">View full answer</a>
</p>
<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/this-is-not-to-be-done-in-python-just-javascript-10522284" >
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... </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/when-you-done-writing-the-code-the-output-answer-7768780" >
* When you done writing the code the output answer should be like that ^ as in the picture above, and it needs to have HTML, CSS, & JS with PROPER instruction code that's written above, that's all... </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/questions/this-assignment-will-test-your-knowledge-of-javascript-local-storage-8820954" >
This assignment will test your knowledge of JavaScript, Local Storage and simple JSON retrieval. Follow all details carefully and follow the instructions for submitting your work. Create a mobile... </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/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-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/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/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/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="/give-a-curvedarrow-mechanism-for-the-electrophilic-aromatic-substitution-reaction" >
Give a curved-arrow mechanism for the electrophilic aromatic substitution reaction shown in Eq. 23.52. </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/the-mailroom-employees-send-all-remittances-and-remittance-advices-to-192707" >
The mailroom employees send all remittances and remittance advices to the cashier. The cashier deposits the cash in the bank and forwards the remittance advices and duplicate deposit slips to the... </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/questions/to-evaluate-the-effect-of-the-abandonment-option-on-each-27906113" >
To evaluate the effect of the abandonment option on each firm, we conduct sensitivity analysis for a plausible worst-case scenario. We collect the following data: Worst Case (25%) Most Likely Case... </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/intercultural-communication/a-many-social-movements-benefit-from-social-networks-but-is-2116137" >
A Many social movements benefit from social networks, but is it fair to credit electronic communication with bringing about social change? How did groups like the American civil rights movement... </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/intercultural-communication/additional-factors-affecting-group-communication-2116135" >
Additional Factors Affecting Group Communication? </a>
</div>
<div class="relatedQuestionCart ">
<p class="heading">Q: </p>
<a class="relatedQuestionText" href="/study-help/intercultural-communication/have-you-ever-been-excessively-quiet-or-shy-in-a-2116142" >
Have you ever been excessively quiet or shy in a group? Do you consider this behavior social loafing or do you feel that the situational or relational context is primarily to blame? Why? </a>
</div>
</div>
<nav class="navigationButtons">
<a class="previousQuestionButton" href="/study-help/questions/john-takes-a-bank-loan-of-rm-3-0-10440799">Previous Question</a>
<a class="nextQuestionButton" href="/study-help/questions/esfandairi-enterprises-is-considering-a-new-threeyear-expansion-project-that-10440801">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/semantics-in-databases-second-international-workshop-dagstuhl-castle-germany-january-2001-revised-papers-lncs-2582-2003rd-edition-978-3540009573-175816">
<img src="https://dsd5zvtm8ll6.cloudfront.net/si.question.images/book_images/2024/01/6597db14da0b8_8366597db14d4b98.jpg" width="100" height="131" alt="Semantics In Databases Second International Workshop Dagstuhl Castle Germany January 2001 Revised Papers Lncs 2582" loading="lazy" style="width: 100px !important;">
</a>
<a href="/textbooks/computer-science-heap-stack-diagrams-2706" 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/semantics-in-databases-second-international-workshop-dagstuhl-castle-germany-january-2001-revised-papers-lncs-2582-2003rd-edition-978-3540009573-175816" style="text-align: left;">
Semantics In Databases Second International Workshop Dagstuhl Castle Germany January 2001 Revised Papers Lncs 2582 </a>
</span>
<div class="bookMetaInfo" style="text-align: left;">
<p class="bookAuthor" style="text-align: left;">
<b>Authors:</b> <span>Leopoldo Bertossi ,Gyula O.H. Katona ,Klaus-Dieter Schewe ,Bernhard Thalheim</span>
</p>
<p class="bookEdition" style="text-align: left;">
2003rd Edition </p>
<p class="bookEdition" style="text-align: left;">
3540009574, 978-3540009573 </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=10440800&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>
