/JQueryExample

Using JQuery To Manipulate the DOM

Primary LanguageJavaScript

"# JQueryExample" Lesson 8 Practice Hands-On1 point Directions Below is a Practice Hands-On for you to practice your new skills. This Hands-On will not be graded, but we encourage you to complete it. The best way to become a great programmer is to practice! Once you have submitted your project, you will be able to access the solution on the next page. Note that the solution will be slightly different from yours, but should look similar. Create a project named L08HandsOn and add three files: index.html, style.css, and script.js. Don't forget to add the jQuery CDN to your HTML page!

Requirements Add the following to the respective files:

index.html file:

A header that includes a page title and background color A paragraph that says "Click here to learn more about jQuery!" An unordered list of the following programming languages: JavaScript, C#, Java, Ruby, Python Two inputs: one for first name and last name Make sure to label the inputs script.js file:

When the header is hovered over, change the font color and when the mouse stops hovering, it returns to the original color. When the paragraph element is clicked on, it should populate the following paragraph: "jQuery is a fast, JavaScript library that makes many tasks easier and simpler to accomplish. A JavaScript library contains pre-written JavaScript which makes developing applications a bit easier for the developer. This means jQuery is not a language, but an extension of JavaScript. It takes many lines of JavaScript code, which we would have had to write ourselves before jQuery, and compresses it." Hint! You will be using a new jQuery method: .text()

When a list element is double clicked on, it should be hidden When typing in an input, on keydown, toggle the following class: .input{ color: red; }