Question
need some help on a jquery assignment : I have most of having some issues with the last parts. so my name at the top
need some help on a jquery assignment :
I have most of having some issues with the last parts.
so my name at the top of the page as an
heading
A few paragraphs about yourself. Be sure to include the word Lindenwood at least twice in your paragraphs well need that for the next problem in this assignment
- A list of hobbies or interest displayed as an HTML unordered list
- Link at least two of your hobbies or interests to websites related to those interests
- Span tags around the word Lindenwood
Refactor the JQuery Click event on the SPAN tags to call a function, the function should be the object doing the DOM manipulation.
- Call the function TextColorChange
- The function should take in a single parameter called element, which can be a CSS selector, jQuery element or DOM element.
Make sure that the function only changes the color on the span tag clicked.
Add a button with the id "nameToggle" to your webpage. Create a JQuery Click event for the button that calls a function named ToggleName, the function should hide and show you name.
- The function should take in a single parameter called element, which can be a CSS selector, jQuery element or DOM element.
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.
here is my code
HTML :
Justin Phillips
HI there My name is Jeff Bradshaw a student at Lindenwood, i am going through the Web Development program my hobbies include sports, programming, and reading good books.
At Lindenwood i want to learn as much awesome traits i can, and use it as a career path. The thing about tech i love the most there is always new things to learn all the time .
- Hockey
- Programming
- Reading
- Camping
CSS:
h1 { font:18px ; text-align: center; }
Main.js:
$( document ).ready(function() { alert("Hello World") $("span").click( function() { $("span").css("color", "#000000"); $(this).css("color", "#0925EB"); }); });
function ToggleName(element) { $("h1").toggle(); // Toggle the name in the h1 tag } // bind functions on DOM ready $(document).ready(function () { $("span").click(function (event) { TextColorChange(event.currentTarget) }); // Pass the target DOM element to the method from the event $("#nameToggle").click(function (event) { ToggleName(event.currentTarget) }) $("#getHobbies").click(function (event) { readFileData(event.currentTarget) })
}); // Send request to read file data function readFileData() { jQuery.get('hobbies.json', appendHobbies); }
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started