i nneed to Open the attached JSON file and edit it to your list of hobbies. Once
ID: 3722642 • Letter: I
Question
i nneed to Open the attached JSON file and edit it to your list of hobbies. Once you have edited the list I want you to read it in to your project through a function. The function should be called when the user clicks the button with a id "getHobbies".
To do this add a button to your webpage and give it an id of "getHobbies"
When the button is clicked load the JSON file through an AJAX get request and then display (append) that data to the web page through an unordered list.
HINTS
Think about the 'this' element for your function to only change the span clicked.
look at http://api.jquery.com/jquery.getjson/ for help with reading in the JSON file.
html code
<DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href="style.css">
<script type = "text/javascript" language = "javascript" src="jquery-3.3.1.js"></script>
<script language="javascript" type="text/javascript"src="main.js"></script>
</head>
<body>
<button id="nameToggle">Toggle Name</button>
<button id="getHobbies">Get Hobbies </button>
<h1> Jason hosa </h1>
<p> Hello my name is Jason hosa, i have been attending <span>SWIC</span> for two years now. My goal after <span> SWIC </span>
is to be a Front-End Web Developer
i plan on receiving an Associates degree in Applied science Web Development, And a Certificate in Web Coding At <span>SWIC</span>.</p>
<h2>A list of Hobbies </h2>
<ul id="hobbyList">
<ul>
<li> Enjoy Ice Skating </li>
<li> Spending time with my wife and 6 year old Son Hunter </li>
<li> enjoy Sporting events </li>
<li> Coding </li>
</ul>
<br>
<img src="IMG_0158.JPG">
<h2> few hobby links: <h2>
<h4><a href="https://teamtreehouse.com/" > Treehouse </a><br></h4>
<h4><a href="http://metrorecplex.com/"> Metro rec Plex</a></h4>
</body>
</html>
main.js code
$(document).ready(function () {
alert("Hello World");
$("span").click( function() {
$("span").css("color", "#d49a9a");
$(this).css("color", "#c2c0c0");
});
});
$(document).ready(function () {
$("span").click(function () {
TextColorChange($(this));
});
$("#nameToggle").click(function () {
ToggleName($(this));
});
});
TextColorChange = function (el) {
el.css("color", "yellow");
}
// Function to toggle the name in the header
function ToggleName(element) {
$("h1").toggle(); // Toggle the name in the h1 tag
}
Explanation / Answer
JSON FILE
Sign up for free
{ "hobbies": [ { "name": "piano", "tags": [ "#music" ] }, { "name": "kickboxing", "tags": [ "#sports" ] }, { "name": "conditioning/weight-training", "tags": [ "#sports" ] }, { "name": "blackjack group" }, { "name": "iOS Development", "note_a": "need $100 apple developer investment" }, { "name": "kendo", "tags": [ "#sports" ] }, { "name": "ink/pencil drawing" }, { "name": "rock climbing", "tags": [ "#sports" ] }, { "name": "knitting" }, { "name": "geocaching", "tags": [ "#sports" ] }, { "name": "backpacking/camping", "tags": [ "#sports" ] }, { "name": "cooking", "note_a": "7 dishes in 7 days", "note_b": "subsets like baking or asian", "note_c": "use 1 ingredient a meal you have never used before" }, { "name": "juggling" }, { "name": "unicycling", "tags": [ "#sports" ] }, { "name": "writing with your opposite hand" }, { "name": "learn a new language" }, { "name": "disk golf", "tags": [ "#sports" ] }, { "name": "poker group" }, { "name": "painting" }, { "name": "origami" }, { "name": "sky-diving", "tags": [ "#sports" ] }, { "name": "Go (aka Baduk)" }, { "name": "Read", "note_a": "1 book a month" }, { "name": "surfing", "tags": [ "#sports" ] }, { "name": "improv" }, { "name": "coffee roasting" }, { "name": "Jiu-Jitsu", "tags": [ "#sports" ] }, { "name": "karaoke" }, { "name": "fermenting" }, { "name": "book club" }, { "name": "board game group" }, { "name": "dance", "note_a": "ballroom, tango, lindy-hop, blues, swing", "tags": [ "#sports" ] }, { "name": "shooting", "tags": [ "#sports" ] }, { "name": "programming" }, { "name": "makers space (soldering, coding, general tinkering)" }, { "name": "learn to solve a rubik’s cube" }, { "name": "mountain biking", "tags": [ "#sports" ] }, { "name": "writing", "note_a": "journal everyday", "note_b": "short fiction writing" }, { "name": "roller derby", "tags": [ "#sports" ] }, { "name": "circus arts", "note_a": "acrobatics, silks, lyra, contortion", "tags": [ "#sports" ] }, { "name": "fencing", "tags": [ "#sports" ] }, { "name": "HAM Radio" }, { "name": "wine/beer making" }, { "name": "archery", "tags": [ "#sports" ] }, { "name": "yoga", "tags": [ "#sports" ] } ] }Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.