Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
The JavaScript Workshop

You're reading from   The JavaScript Workshop Learn to develop interactive web applications with clean and maintainable JavaScript code

Arrow left icon
Product type Paperback
Published in Nov 2019
Publisher Packt
ISBN-13 9781838641917
Length 802 pages
Edition 1st Edition
Languages
Arrow right icon
Authors (8):
Arrow left icon
Jahred Love Jahred Love
Author Profile Icon Jahred Love
Jahred Love
Alonzo L. Hosford Alonzo L. Hosford
Author Profile Icon Alonzo L. Hosford
Alonzo L. Hosford
Florian Sloot Florian Sloot
Author Profile Icon Florian Sloot
Florian Sloot
Daniel Rosenbaum Daniel Rosenbaum
Author Profile Icon Daniel Rosenbaum
Daniel Rosenbaum
Philip Kirkbride Philip Kirkbride
Author Profile Icon Philip Kirkbride
Philip Kirkbride
Nick Turner Nick Turner
Author Profile Icon Nick Turner
Nick Turner
Gaurav Mehla Gaurav Mehla
Author Profile Icon Gaurav Mehla
Gaurav Mehla
Joseph Labrecque Joseph Labrecque
Author Profile Icon Joseph Labrecque
Joseph Labrecque
+4 more Show less
Arrow right icon
View More author details
Toc

Table of Contents (17) Chapters Close

Preface 1. Getting to Know JavaScript FREE CHAPTER 2. Working with JavaScript 3. Programming Fundamentals 4. JavaScript Libraries and Frameworks 5. Beyond the Fundamentals 6. Understanding Core Concepts 7. Popping the Hood 8. Browser APIs 9. Working with Node.js 10. Accessing External Resources 11. Creating Clean and Maintainable Code 12. Using NextGeneration JavaScript 13. JavaScript Programming Paradigms 14. Understanding Functional Programming 15. Asynchronous Tasks Appendix

4. JavaScript Libraries and Frameworks

Activity 4.01: Adding an Animation to the Todo List Application

Solution:

  1. Go to https://packt.live/34LCqN5 and get the jQuery CDN URL.
  2. Load the library into the head tag of your existing Todo-List-HTML using a script tag. This will allow you to use jQuery within your code:
    <head>
        // ... links and meta tags from the previous activity
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>

    Inside activity.js, you need to change the todoEle variable. Change it to a jQuery element:

    // The todo list element
    // let todoEle = document.getElementById('todo-list'); // old
    let todoEle = $('#todo-list'); // new

    Inside the replaceListElements function, you can now use functions on the todoEle element that jQuery provides you with.

  3. Hide and clear what's inside the element using the necessary jQuery functions:
    function replaceListElements(listEle...
lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image