Have a Jquery/Ajax assignment i need some help with i moved all of my Javascript
ID: 3722429 • Letter: H
Question
Have a Jquery/Ajax assignment i need some help with
i moved all of my Javascript/ JQuery code out into a external file named main.js.
i changed the color of span , And i got the toggle name to do its thing and i edited the json file
Now i just need help with getting the json file to load when i click the get hobbies button .
this webpage contains the following
my name at the top of the page as an <h1> heading
A few paragraphs about myself . included the word SWIC at least twice in my paragraphs we’ll 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 SWIC
here is the json file for hobbies : hobbies.json file https://blackboard.swic.edu/bbcswebdav/pid-1390949-dt-content-rid-8266186_1/courses/CIS277-001--SP2018/hobbies.json
i need to 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 the html i have
<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> Justin Phillips </h1>
<p> Hello my name is Justin Phillips, 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>
<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>
and the external javascript/Jquery
$(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
}
$("#getHobbies").click(function () {
$.getJSON("./hobbies.json".function (data) {
getHobbies($(this));
});
});
Explanation / Answer
I would like to share the logic hope that it helps:
$(function()
{
var span = parseInt('#span').text().trim());
var color = 'red'; //some random color thatyou wish to put
if(!isNan(span))
{
if(span >=10)
{
color = 'blue';
}
if(span>=60)
{
color = ' ';
}
}
});
2. html code can be written as:
<div class = ' ' > <span id = 'span'>
60
</span>
</div>
3. Try using this logic it will help you with above problem
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.