P
chelsea-here• 140
@chelsea-here
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud of getting the font percentage decrease to work, while maintaining accessibility using rem's for font-size. Also, proud of using javascript to access the color variable from css and script hover color change effect.
// accessing the color variables from my css file
const style = getComputedStyle(document.body);
const yellow = style.getPropertyValue("--primary-color-yellow");
// creating mouseover effect
title.addEventListener("mouseover", function (e) {
this.style.color = yellow;
});
// now i need a mouseout event listener so its only active during my hover
title.addEventListener("mouseout", function (e) {
this.style.color = "";
});
What challenges did you encounter, and how did you overcome them?
Getting the font to work was the hardest part. I learned how to use clamp to achieve the desired effect.
h1 {
font-size: clamp(1rem, 5.333333vw, 1.5rem);
}
What specific areas of your project would you like help with?
Any best practice advice is welcome!
