hi there! 👋👋
If you mean interacting with the DOM using JavaScript we have a couple of options to select and modify DOM elements:
querySelector()querySelectorAll()- getElementbyId / ClassName / Tagname
innerHTML()text()
you can look up use cases for each of (speaking of which, there's actually forEach() for looping through an array of elements selected by any of the methods mentioned before ☝️☝️ ) these
From there you can listen for events with the amply named .addEventListener method, and you can modify elements based on the interaction. You can add previously defined CSS classes modifying the elements color, display etc. properties, or you can use the {selector}.style.{property} JS syntax to modify them directly (this approach is more hardware-heavy for clients)
transitions used to define the same behaviours that eventListeners are listening to, but in CSS. you need to define what properties you want to apply the transition to. For example:
.card {
left: 0;
transition: left .5s ease-in 1s; // property: duration easing-method delay;
}
.card:hover {
left: 2vw;
}
would apply a transition to .card 's left property when card is hovered over
animations are the same idea, but you need to define @keyframe at-rules for them
Hope this was helpful! 🙏
Good luck and happy coding! 💪
Marked as helpful
