This is a solution to the Calculator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- See the size of the elements adjust based on their device's screen size
- Perform mathmatical operations like addition, subtraction, multiplication, and division
- Adjust the color theme based on their preference
- Bonus: Have their initial theme preference checked using
prefers-color-scheme
and have any additional changes saved in the browser
- Solution URL: Calculator Repo
- Live Site URL: Live Site
We worked with pair programming. And I make sure I use something new of every project. This time it was tailwind and nuxt 3.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Vue - JS library
- Nuxt.js - React framework
- NUxt Tailwind - For styles
I learn to use tailwindcss and nuxt, setup up multiple themes. Nuxt 3 doesn't work well with github pages, we used vercel instead. This is because Nuxt is server side rendered and github pages is great for hosting static sites or client side rendered apps.
pressedKey.value = eval(pressedKey.value);
I still spend a lot of time in configuration and dealing with builds that are different from dev mode.
Look at the nuxt 3 documentation to learn more.
Make sure to install the dependencies:
# yarn
yarn install
# npm
npm install
# pnpm
pnpm install --shamefully-hoist
Start the development server on http://localhost:3000
npm run dev
Build the application for production:
npm run build
Locally preview production build:
npm run preview
Checkout the deployment documentation for more information.
- Frontend Mentor - @yourusername
I would like to thank @ermix3, who collaborated with me. We worked well together.