My 30days Challenge Experience On Vue.js
My 30days journey to learn Vue.js @
started on 7th of July, 2020, and ends on 7th of August 2020, although learning continues even after the end of the challenge. During the challenge, I was able to learn Vue.js basics (such as data binding, events, conditionals, looping etc), working with vue/cli, components, props, and so on.I worked on 4 projects in total — one project per week. These are;
- The Punch Bag Game
- Tip Calculator
- Basic Calculator
- Music app
The Punch Bag Game:
This was my first project on Vue.js after learning the basics. It was fun building a punch bag game.
When you punch the bag, it’s health decreases. When the health depreciates to 30%, an alert box will pop out to notify you and the color will change from white to red. When it’s 0%, the bag will be busted. You can always click the restart button to start again. It was a simple game but i had fun working on it.
Click to view ➡ https://tybabie-punchbag-game.netlify.app/
A link to the repository ➡ https://github.com/Tybabie/Punch-bag-game
Tip Calculator:
Although I once built a tip calculator with jQuery ➡ ️https://tybabie-tip-calculator.netlify.app/ but also decided to try it out with Vue.js ➡https://tybabie-vuejs-tip-calculator.netlify.app/
Users enter bill amount, the tip percentage to be given and the number of people sharing the bill. When users click calculate, the result will be displayed as shown in the picture below;
Link to the jQuery repository ➡https://github.com/Tybabie/Tip-Calculator
Link to the Vue.js repository ➡https://github.com/Tybabie/Vue.js-Tip-Calculator
Basic Calculator:
Building a calculator was the most challenging of the 4 projects i worked on. It was also on this project i started working with vue/cli and and learnt how to deploy a vue/cli site. For the first two projects, i worked with Vue CDN.
click to explore➡ https://tybabie-simple-calculator.netlify.app/
A link to the repository ➡https://github.com/Tybabie/Simple-Calculator
Music app:
As a music lover, I chose the music-app as the last project for the 30days challenge. I created a list of few songs, there is a previous, play/pause, and next button in which each does what the name implies. And the background changes when the music is on. You can also select directly from the playlist.
Click to explore ➡ https://tybabie-music-app.netlify.app/
A link to the repository ➡https://github.com/Tybabie/Music-App
After the 30days challenge, Learning and Projects continue… the next project I will like to work on is the Weather-app 😊🥰
