4. JavaScript Libraries and Frameworks
Activity 4.01: Adding an Animation to the Todo List Application
Solution:
- Go to https://packt.live/34LCqN5 and get the jQuery CDN URL.
- 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 thetodoEle
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 thetodoEle
element that jQuery provides you with. - Hide and clear what's inside the element using the necessary jQuery functions:
function replaceListElements(listEle...