This is a solution to the Product preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover and focus states for interactive elements
- Solution URL: Add solution URL here
- Live Site URL: Live
- Semantic HTML5 markup
- SCSS Superstar custom properties
- chrome
- JS inline
-how to await in JS, and how to change attributes values. but what is resolve I have no idea, I tired passing x.setAttribute("c", "n");
in to it and the button did not work at all!
let x = document.getElementById("submeter");
x.onclick = async ()=> {
x.setAttribute("c","y");
await resolveAfter2Seconds(10);
x.setAttribute("c", "n");
};
function resolveAfter2Seconds(x) {
return new Promise((resolve) => {
setTimeout(() => {
resolve(x);
}, 2100);
});
}
-SVG!! OOh SVG, the animation there is not that good, but 🎉animation🎉 I have spent on it over 6h to get the timing right.
-SVG: do not accept ::before and ::after on or in.
-Animation curve's it's not that difficult, but chrome divTools did help writing the CSS code.
{
animation: 1.5s alternate cubic-bezier(0.31, -0.06, 0.3, 0.97);
}
-SVG needed a little more work on! -reducing duplicated lines. -using rem and em rather than px!
- Krita - Tis is a drawing program but it have a nice futures like a ruler!!
- LinkedIn - Rynex Akil
- Frontend Mentor - @rynex-zv