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.
Note: Delete this note and update the table of contents based on what sections you keep.
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: Check Solution Here
- Live Site URL: Visit Live Site
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
I learnt how to use conditional rendering that depends on window width.
See code snippet, see below:
function App = () => {
const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
const handleView = () => {
setIsMobile(window.innerWidth < 780);
};
handleView();
window.addEventListener('resize', handleView);
return () => {
window.removeEventListener('resize', handleView);
}
}, [])
return (
<div className="App">
{isMobile ? <Mobile /> : <Desktop />}
</div>
);
}
- Website - Abdulquddus Abdulrahman (Lexee)
- Frontend Mentor - @lexzeeyourusername
- Twitter - @lexzee