This is a solution to the Insure landing page 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 for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- HTML Solution URL: HTML
- JSX Solution URL: JSX
- Live Site URL: Live on Vercel
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- CSS Modules
- React - JS library
- Vite - Vite
This time i worked with Vite. It is more intuitive for a React starter and i managed to work with useState to make menu icon change on click
const [icon, setIcon] = useState("images/icon-hamburger.svg");
function handleClick(e) {
e.target.getAttribute("src").includes("hamburger") ?
setIcon("images/icon-close.svg") :
setIcon("images/icon-hamburger.svg");
document.querySelector("nav").classList.toggle(styles.open);
document.body.classList.toggle("lockScroll");
}
I will be using React with Vite more to make reusable components
- React docs - With this official documentation i managed to use the useState with React
- Vite docs - Everything was easier with Vite, that made development and build and deployment easy
- Frontend Mentor - @JustANipple