Are you interested to learn HTML, CSS and JavaScript? Than I hope you will enjoy the coming series of posts where I will show in detailed steps how to build a simple calculator.
I believe the calculator example is a good project to start with since it covers basic HTML CSS and JavaScript.
This and the coming posts of the series are intended for beginners, like me, who are keen to improve their webdesign skills. If you are an advanced web developer than the coming posts are likely not interesting to you. I would however appreciate if you could let me know your opinion and any hints to improve the code.
For this project I will be using Vue.js which is a JavaScript framework. I used it also for Steem-Buddy and Steem-Flow and I like very much due to it’s simplicity and clean seperation of code. A framework is actually not needed for a calculator but I thought learning a bit about Vue.js might be useful to you as well.
OK, with the introduction done let's get started with the Vue.js installation.
What is Vue.js
Vue.js is a framework to build user interfaces and single page applications.
Check out the Vue.js website for more detailed information.
How to install Vue.js
There are two ways to use vue.js, either by including a link to vue.js in the index.html file via a script tag or by using the vue-cli which installs vue and a basic project structure locally on your machine.
In this tutorial we are going to use the vue-cli to make it more interesting.
Preparation to install vue-cli
Before we can use the vue-cli we need to install Node.js on our machine. Node.js is a javascript runtime build that basically allows you to run javascript on your computer.
For the installation please visit the official Node.js website and download / install Node.
With Node.js being installed you are now able to run npm (node package manager) in your terminal.
Open your terminal and enter the following:
npm install -g vue-cli
This command installs the vue-cli globally on our machine. Globally -g just means that you can run the vue-cli from any location on your computer rather than just a specific folder.
Create a Vue.js project
Let’s create now a vue project on your local machine.
- Create a practice folder
Open either the command line or Terminal and point to your practice folder and type
vue init webpack-simple calculator
This command generates a new folder (in this example calculator) and in it a basic vue project structure.
- Change directory into the calculator folder and type
npm install
This command installs the packages needed to run the project on your mashine.
- To finally test if all worked fine type
npm run devwithin the calculator folder.
If you follow above steps you should see the that you browser opened with the default Vue.js template.
Congratulations! You installed a basic Vue.js project on your computer. In the next tutorial we will cover the HTML related part for the calculator.
Order of the coming tutorials.
- HTML for the calculator layout using tables.
- CSS to style the calculator.
- Javascript to add the logic and functionality.