Skip to content

Vue 3-powered currency converter styled with Panda CSS, performing currency conversions using an integrated REST API.

License

Notifications You must be signed in to change notification settings

victoriacheng15/currency-converter

Repository files navigation

Simple Plainly Currency Converter

With this application, you can choose your base currency and select the specific currencies you wish to convert it into. For instance, you can convert Canadian Dollars (CAD) to EURO, USD, and more. Simplify your currency conversion experience with our intuitive and efficient app.

View the live site here

Tech Stacks

Vuejs Vite

Getting Started

  • Installation
git clone git@github.com:victoriacheng15/currency-converter.git

cd currency-converter
  • Install packages
npm install 
  • Run the app
npm run dev 

What I have learned

This project aims to familiarize myself with Vue syntax related to loops, conditionals (if and else), and Panda CSS.

Computed: this is to monitor changes in the list of desired currencies, and it specifically re-filters the list each time a new base currency is selected. For instance, when a user opts for CAD as the base currency and selects additional currencies for conversion, the computed property ensures that CAD is automatically excluded from the updated list.

Watchers: it is to watch changes in the list of the user selected currencies, once the new base currency is changed, it should re-filter user selected currencies.

Slots: the slot functionality provides a designated space for components. If the slot remains empty, nothing will be displayed until new elements or components are added. In certain cases, a component may have more than one slot. The second slot can be named, allowing it to be referenced specifically when needed, providing flexibility in component layout.

Author

LinkedIn

About

Vue 3-powered currency converter styled with Panda CSS, performing currency conversions using an integrated REST API.

Topics

Resources

License

Stars

Watchers

Forks