The fanciest calculator on the web.
These are the technologies I've used
- Clone the repository:
git clone git@github.com:GomezJuanEfe/LAF-page.git- Install dependencies:
npm install- Run server:
npm run devFor many features on the application I used code from different people. In this section I want to acknowledge to Justin Schroeder and Mireille Tijdeman. Check on the links section which part of their work helped and inspired me to do this job.
One of the things you may ask is how to deactivate the hover on mobile devices. Here we have two approaches:
Where the current device has a cursor that can hover.
@media (hover: hover) {
a:hover {
/* hover styles */
}
}Applying styles only to devices that do not support hovering.
@media (hover: none) {
/* styles for touchscreen devices */
}This part was very challenging cause I had to understand very well the vite config in order to deploy the project on GitHub Pages.
export default defineConfig({
plugins: [react()],
base: "/calc-ui/",
server: {
host: "https://gomezjuanefe.github.io/",
},
build: {
outDir: "dist",
},
});- Dark Mode - I took this page as reference to build the dark mode.
- Fancy Title - I took this page as reference to build the title.
- Free Frontend - An amazing site to find inspiration
- SCC Scan is an applicatio to check and copy the css properties of an element. They also have some free amazing tools:
Some of the libraries I would like to implement soon: