Product preview card component solution

This is my solution to the Product preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic real world projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover and focus states for interactive elements

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

I began with a just do it attitude, as we can see, it paid off. I surprised myself.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

What have we learned?

The challenge didn't require any javascript however I personally wanted to have some more fun and add some myself, I found the code below to be quite interesting.

let button = document.querySelector('button');

function changeColor(event){
    event.target.style.backgroundColor = "hsl(212, 21%, 14%)"
}
function returnColor(event){
    event.target.style.backgroundColor = ''
}

button.addEventListener('mouseover', changeColor)
button.addEventListener('mouseout', returnColor)

Continued development

We're going to use this website to get better at making even more impressive websites

Useful resources

• Example resource 1 - This helped me with getting an idea of what I was going to do with handling the font weights

Author

• Website - UbaidRussell
• Frontend Mentor - @UbaidRussell
• Twitter - @ubaidrussell

Acknowledgments