tenderking / calculator-nuxt-app

Fronted Mentor Challenge: Calculator using nuxt 3 and tailwindcss

Frontend Mentor - Calculator app solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Nuxt Setup
  • Setup
  • Development Server
  • Production
• Author
• Acknowledgments

Overview

The challenge

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

Screenshot

Links

• Solution URL: Calculator Repo
• Live Site URL: Live Site

My process

We worked with pair programming. And I make sure I use something new of every project. This time it was tailwind and nuxt 3.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Vue - JS library
• Nuxt.js - React framework
• NUxt Tailwind - For styles

What I learned

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);

Continued development

I still spend a lot of time in configuration and dealing with builds that are different from dev mode.

Nuxt Setup

Look at the nuxt 3 documentation to learn more.

Setup

Make sure to install the dependencies:

# yarn
yarn install

# npm
npm install

# pnpm
pnpm install --shamefully-hoist

Development Server

Start the development server on http://localhost:3000

npm run dev

Production

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Checkout the deployment documentation for more information.

Author

• Frontend Mentor - @yourusername

Acknowledgments

I would like to thank @ermix3, who collaborated with me. We worked well together.

• @ermix3