Scribd
Upload
8 views

Javascript-And-Jquery-Challenge-Activities WEB1091 M01 JavaScript Jquery Challenges

Here are the key points from the document in 3 sentences or less: The document provides 10 challenges to complete basic tasks using both JavaScript and jQuery, such as changing text sizes and colors. The challenges are meant to help the reader learn and practice both JavaScript and jQuery. Completing the challenges without looking at the answers provided will help improve one's skills with both technologies better than other methods.

Uploaded by

moisepr
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

Javascript-And-Jquery-Challenge-Activities WEB1091 M01 JavaScript Jquery Challenges

Here are the key points from the document in 3 sentences or less: The document provides 10 challenges to complete basic tasks using both JavaScript and jQuery, such as changing text sizes and colors. The challenges are meant to help the reader learn and practice both JavaScript and jQuery. Completing the challenges without looking at the answers provided will help improve one's skills with both technologies better than other methods.

Uploaded by

moisepr
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 42

JavaScript & jQuery

Challenges
1 - 20
How To Do These Challenges
As before, try to do the challenges without Repeating these challenges until you can write
looking at the answer on the next slide. the JavaScript and jQuery without looking at the
answers will help you learn both JavaScript and
There are 20 challenges here, but each jQuery better than just about anything else you
challenge is to do the same task with both can do.
JavaScript and jQuery, so it is really 10 unique
challenges.
Challenge 1 - JS
Use JavaScript to change the size of the text in
the paragraph to 24px.

<body>

<p id="paragraph">Here is a paragraph</p>

<script>

</script>

</body>
Challenge 1 Answer
Either of these methods would be acceptable.

<script>

document.getElementById("paragraph").style.fontSize = "24px";
//document.querySelector('#paragraph').style.fontSize = "24px";

</script>
Challenge 2 - jQuery
Use jQuery to change the size of the text in the
paragraph to 24px.

<body>

<p id="paragraph">Here is a paragraph</p>

<script>

</script>

</body>
Challenge 2 Answer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$("#paragraph").css("font-size", "24px");

</script>
Challenge 3 - JS
Use plain JavaScript to change the font size to <p>Don't change this paragraph</p>

24 pixels and the color to red for the paragraphs


<div id="main">
inside the div, but not the one outside the div. <p>change this paragraph.</p>
<p>change this paragraph too.</p>
<p>And change this last paragraph.</p>
</div>

<script>

</script>
Challenge 3 Answer
<script>

var parasToChange = document.querySelectorAll("#main p");

for (var i = 0; i < parasToChange.length; i++) {


parasToChange[i].style.fontSize = "24px";
parasToChange[i].style.color = "red";
}

</script>
Challenge 4 - jQuery
Use jQuery to change the font size to 24 pixels <p>Don't change this paragraph</p>

and the color to red for the paragraphs inside the


<div id="main">
div, but not the one outside the div. <p>change this paragraph.</p>
<p>change this paragraph too.</p>
<p>And change this last paragraph.</p>
</div>

<script>

</script>
Challenge 4 Answer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$("#main p").css("font-size", "24px").css("color", "red");
//$("#main p").css({ "font-size": "24px", "color": "red" });
</script>

You could use either the chaining of the css() method or pass
in an object with multiple settings.
Challenge 5 - JS
Use JavaScript to change the font size and <p>don't change this paragraph</p>
color of the last paragraph in the div without
affecting any of the other paragraphs. <div id="main">
<p>don't change this paragraph</p>
<p>don't change this paragraph</p>
<p>Change this last paragraph</p>
</div>
Challenge 5 Answer
<script>

var lastPara = document.querySelector("#main p:last-of-type");

lastPara.style.fontSize = "36px";
lastPara.style.color = "red";

</script>
Challenge 6 - jQuery
Use jQuery to change the font size and <p>don't change this paragraph</p>
color of the last paragraph in the div without
affecting any of the other paragraphs. <div id="main">
<p>don't change this paragraph</p>
<p>don't change this paragraph</p>
<p>Change this last paragraph</p>
</div>
Challenge 6 Answer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

$("#main p:last-of-type").css({ "font-size": "36px", "color": "red" });

</script>

Or this will work too...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

$("#main p").last().css({ "font-size": "36px", "color": "red" });

</script>
Challenge 7 - JS
Use JavaScript to change the color of every <p>don't change this paragraph</p>

other paragraph inside the div to red.


<div id="main">
<p>Here is paragraph one</p>
<p>Here is paragraph two</p>
<p>Here is paragraph three</p>
<p>Here is paragraph four</p>
<p>Here is paragraph five</p>
<p>Here is paragraph six</p>
<p>Here is paragraph seven</p>
<p>Here is paragraph eight</p>
<p>Here is paragraph nine</p>
<p>Here is paragraph ten</p>
<p>Here is paragraph eleven</p>
<p>Here is paragraph twelve</p>
</div>
Challenge 7 Answer
<script>

var parasInMain = document.querySelectorAll("#main p:nth-child(even)");

for (var i = 0; i < parasInMain.length; i++) {


parasInMain[i].style.color = "red";
}

</script>
Challenge 8 - jQuery
Use jQuery to change the color of every other <p>don't change this paragraph</p>

paragraph inside the div to red.


<div id="main">
<p>Here is paragraph one</p>
<p>Here is paragraph two</p>
<p>Here is paragraph three</p>
<p>Here is paragraph four</p>
<p>Here is paragraph five</p>
<p>Here is paragraph six</p>
<p>Here is paragraph seven</p>
<p>Here is paragraph eight</p>
<p>Here is paragraph nine</p>
<p>Here is paragraph ten</p>
<p>Here is paragraph eleven</p>
<p>Here is paragraph twelve</p>
</div>
Challenge 8 Answer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

$("#main p").even().css("color", "red");

</script>
Challenge 9 - JS
Use JavaScript to change the color of paragraph <p>don't change this paragraph</p>

that contains “Llamas and Chickens!” to red.


<div id="main">
<p>Here is paragraph one</p>
<p>Here is paragraph two</p>
<p>Here is paragraph three</p>
<p>Here is paragraph four</p>
<p>Here is paragraph five</p>
<p>Llamas and Chickens!</p>
<p>Here is paragraph seven</p>
<p>Here is paragraph eight</p>
<p>Here is paragraph nine</p>
<p>Here is paragraph ten</p>
<p>Here is paragraph eleven</p>
<p>Here is paragraph twelve</p>
</div>
Challenge 9 Answer
<script>

var parasInMain = document.querySelectorAll("#main p");

for (var i = 0; i < parasInMain.length; i++) {


if (parasInMain[i].innerHTML == "Llamas and Chickens!") {
parasInMain[i].style.color = "red";
}
}

</script>
Challenge 10 - jQuery
Use jQuery to change the color of paragraph that <p>don't change this paragraph</p>

contains “Llamas and Chickens!” to red.


<div id="main">
<p>Here is paragraph one</p>
<p>Here is paragraph two</p>
<p>Here is paragraph three</p>
<p>Here is paragraph four</p>
<p>Here is paragraph five</p>
<p>Llamas and Chickens!</p>
<p>Here is paragraph seven</p>
<p>Here is paragraph eight</p>
<p>Here is paragraph nine</p>
<p>Here is paragraph ten</p>
<p>Here is paragraph eleven</p>
<p>Here is paragraph twelve</p>
</div>
Challenge 10 Answer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

$("#main p:contains(Llamas and Chickens!)").css("color", "red");

</script>
Challenge 11 - JS
Use JavaScript to put a click handler on the links <nav>
<ul>
in the navigation.
<li><a href="#">link one</a></li>
<li><a href="#">link two</a></li>
When one of those links is clicked, an alert <li><a href="#">link three</a></li>
should come up that says “clicked!”. <li><a href="#">link four</a></li>
<li><a href="#">link five</a></li>
</ul>
Use const/let instead of var to declare variables
</nav>
for the rest of the challenges.
<p>Here is a paragraph with a <a
The link to google should be unaffected. href="http://google.com">link to google</a> in
it</p>
Challenge 11 Answer
<script>

const navLinks = document.querySelectorAll("nav ul li a");

for (let i = 0; i < navLinks.length; i++) {


//navLinks[i].onclick = function () { alert("clicked!") };
navLinks[i].addEventListener("click", function () { alert("clicked") });
}

</script>

You can use either the onclick event property or


the addEventListener method.
Challenge 12 - jQuery
Use jQuery to put a click handler on the links in <nav>
<ul>
the navigation.
<li><a href="#">link one</a></li>
<li><a href="#">link two</a></li>
When one of those links is clicked, an alert <li><a href="#">link three</a></li>
should come up that says “clicked!”. <li><a href="#">link four</a></li>
<li><a href="#">link five</a></li>
</ul>
The link to google should be unaffected.
</nav>

<p>Here is a paragraph with a <a


href="http://google.com">link to google</a> in
it</p>
Challenge 12 Answer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$("nav ul li a").click(function () { alert("clicked!"); });

</script>
Challenge 13 - JS
Use JavaScript to put a click handler on the links <nav>
<ul>
in the navigation.
<li><a href="#">link one</a></li>
<li><a href="#">link two</a></li>
When one of those links is clicked, an alert <li><a href="#">link three</a></li>
should come up that has the text of the link <li><a href="#">link four</a></li>
<li><a href="#">link five</a></li>
inside of it. For example, if you click link two, the
</ul>
alert box should say “link two”. </nav>

The link to google should be unaffected. <p>Here is a paragraph with a <a


href="http://google.com">link to google</a> in
it</p>
Hint: use the “this” keyword.
Challenge 13 Answer
<script>

const navLinks = document.querySelectorAll("nav ul li a");

for (let i = 0; i < navLinks.length; i++) {


//navLinks[i].onclick = function(){ alert( this.innerHTML) };
navLinks[i].addEventListener("click", function () { alert(this.innerHTML) });
}

</script>
Challenge 14 - jQuery
Use jQuery to put a click handler on the links in <nav>
<ul>
the navigation.
<li><a href="#">link one</a></li>
<li><a href="#">link two</a></li>
When one of those links is clicked, an alert <li><a href="#">link three</a></li>
should come up that has the text of the link <li><a href="#">link four</a></li>
<li><a href="#">link five</a></li>
inside of it. For example, if you click link two, the
</ul>
alert box should say “link two”. </nav>

The link to google should be unaffected. <p>Here is a paragraph with a <a


href="http://google.com">link to google</a> in
it</p>
Hint: use the “this” keyword.
Challenge 14 Answer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$("nav ul li a").click(function () { alert($(this).html()); });

</script>
Challenge 15 - JS
Use JavaScript to put a click handler on the links <nav>
<ul>
in the navigation.
<li><a href="#">link one</a></li>
<li><a href="#">link two</a></li>
When one of those links is clicked, change the <li><a href="#">link three</a></li>
color of the text inside the link to red. <li><a href="#">link four</a></li>
<li><a href="#">link five</a></li>
</ul>
The link to google should be unaffected.
</nav>

<p>Here is a paragraph with a <a


href="http://google.com">link to google</a> in
it</p>
Challenge 15 Answer
<script>

const navLinks = document.querySelectorAll("nav ul li a");

for (let i = 0; i < navLinks.length; i++) {


navLinks[i].addEventListener("click", function () {
this.style.color = "red";
});
}

</script>
Challenge 16 - jQuery
Use jQuery to put a click handler on the links in <nav>
<ul>
the navigation.
<li><a href="#">link one</a></li>
<li><a href="#">link two</a></li>
When one of those links is clicked, change the <li><a href="#">link three</a></li>
color of the text inside the link to red. <li><a href="#">link four</a></li>
<li><a href="#">link five</a></li>
</ul>
The link to google should be unaffected.
</nav>

<p>Here is a paragraph with a <a


href="http://google.com">link to google</a> in
it</p>
Challenge 16 Answer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$("nav ul li a").click(function () {

$(this).css("color", "red");

});

</script>
Challenge 17 - JS
Use JavaScript to put a click handler on the links <nav>
<ul>
in the navigation.
<li><a href="#">link one</a></li>
<li><a href="#">link two</a></li>
When one of those links is clicked, change the <li><a href="#">link three</a></li>
text in the paragraph below to say “You clicked” <li><a href="#">link four</a></li>
<li><a href="#">link five</a></li>
and the text from the link.
</ul>
</nav>
So if link two were clicked, it would say “You
clicked link two”. <p id="paragraph">Click a link to change this
paragraph</p>
Challenge 17 Answer
<script>

const navLinks = document.querySelectorAll("nav ul li a");

for (let i = 0; i < navLinks.length; i++) {

navLinks[i].addEventListener("click", function () {
const thisLink = this.innerHTML;
document.getElementById("paragraph").innerHTML = `You clicked ${thisLink}`;
});
}

</script>
Challenge 18 - jQuery
Use jQuery to put a click handler on the links in <nav>
<ul>
the navigation.
<li><a href="#">link one</a></li>
<li><a href="#">link two</a></li>
When one of those links is clicked, change the <li><a href="#">link three</a></li>
text in the paragraph below to say “You clicked” <li><a href="#">link four</a></li>
<li><a href="#">link five</a></li>
and the text from the link.
</ul>
</nav>
So if link two were clicked, it would say “You
clicked link two”. <p id="paragraph">Click a link to change this
paragraph</p>
Challenge 18 Answer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$("nav ul li a").click(function () {

const thisLink = $(this).html();

$("#paragraph").html(`You clicked ${thisLink}`);

});

</script>
Challenge 19 - JS
When the user clicks a link, <nav>
<ul>
have it turn the appropriate
<li><a href="#" id="link1">link one</a></li>
paragraph below red. The <li><a href="#" id="link2">link two</a></li>
rest of the paragraphs should <li><a href="#" id="link3">link three</a></li>
<li><a href="#" id="link4">link four</a></li>
be black.
<li><a href="#" id="link5">link five</a></li>
</ul>
Use JavaScript </nav>

<p id="paralink1">Looks like you clicked the first link in the list</p>
<p id="paralink2">Looks like you clicked the second link in the list</p>
<p id="paralink3">Looks like you clicked the third link in the list</p>
<p id="paralink4">Looks like you clicked the fourth link in the list</p>
<p id="paralink5">Looks like you clicked the fifth link in the list</p>
Challenge 19 Answer
<script>

const navLinks = document.querySelectorAll("nav ul li a");


const paragraphs = document.querySelectorAll("p");

for (let i = 0; i < navLinks.length; i++) {


navLinks[i].addEventListener("click", function () {

const paraNumber = "#para" + this.id; //constructs a string like this: "#paralink3"

for (let i = 0; i < paragraphs.length; i++) {


paragraphs[i].style.color = "black"; //loop through and make all paras black
}

const thisParagraph = document.querySelector(paraNumber);


thisParagraph.style.color = "red"; //change just the one paragraph red

});
}
</script>
Challenge 20 - jQuery
When the user clicks a link, <nav>
<ul>
have it turn the appropriate
<li><a href="#" id="link1">link one</a></li>
paragraph below red. The <li><a href="#" id="link2">link two</a></li>
rest of the paragraphs should <li><a href="#" id="link3">link three</a></li>
<li><a href="#" id="link4">link four</a></li>
be black.
<li><a href="#" id="link5">link five</a></li>
</ul>
Use jQuery </nav>

<p id="paralink1">Looks like you clicked the first link in the list</p>
<p id="paralink2">Looks like you clicked the second link in the list</p>
<p id="paralink3">Looks like you clicked the third link in the list</p>
<p id="paralink4">Looks like you clicked the fourth link in the list</p>
<p id="paralink5">Looks like you clicked the fifth link in the list</p>
Challenge 20 Answer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

$("nav ul li a").click(function () {

const paraNumber = "#para" + $(this).attr("id"); // constructs #paralink3 for example


$("p").css("color", "black");
$(paraNumber).css("color", "red");

});

</script>

You might also like