Use Rough Notation in Javascript | Awesome animated scribble library ✏️

In this video, I show you how to use the awesome Rough Notation library to add super-cool animated scribble annotations to your page. ✏️ Link to the Rough Notation Library: https://roughnotation.com/ ✨ Video Contents: ✨ 00:34 - Bringing the Rough Notation library into the project with a script tag. 00:58 - ⚠️ IMPORTANT: adding type=“module” to our index.js script tag to make the library work. 01:08 - Importing the library into our JS file. 01:36 - Adding ids to our HTML. 01:47 - Grabbing the ids in our JS with getElementById. 02:33 - Adding notations, choosing the type and color. 03:35 - Running the annotation in the browser. 04:40 - Adding padding to the annotations. 05:22 - Adding the bracket notation, controlling which brackets are displayed. 05:41 - Changing the stroke width. 05:52 -Refactoring the show() invocations and making the animations run sequentially with annotationGroup. 06:36 - Changing the order in which the animations are run. 06:53 - Using a media query to turn off the animations when the user has selected the reduced motion setting. 08:00 - Turning off individual animations. -- const me = { name: "Leanne 👩🏻", passions: ["coffee☕️", "code 💻", "cats 🐱"], unpopular_opinion: "LOVES CSS ❤️", favorite_colors: ["hotpink", "orangered"], channel_aim: "Show the world that CSS is fun and web development rules! 👑" } -- 🐤 Say hi on Twitter: https://twitter.com/RybaLeanne 🤺 Join the Scrimba Weekly Web Dev Challenge: https://scrimba.com/learn/weeklychallenge