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.
Interesting post. As i am learning to program at this moment i find this very interesting!
Thanks for your comment. Please let me know if you have questions.
World class your post my friend ;)
It's a great tutorial, thank you for sharing to us! :)
Thank you, I am glad you like it.
wow i will try to learn as much as i can : )
Sounds good! Just let me know if you have any additional questions.
Great, I've been wanting to explore Vue but never found the time. I'll be following your posts :)
Thank you. If anything is unclear than please let me know.
Will do, thanks!
I know a little bit html and css and make some simple web pages and want to learn professional web designing so will it be coming in upcoming posts from you?
Hi, in the coming post I will show the html related part for the calculator.
@tarekadam,
It's very useful! Please continue I want to learn it! Thanks for sharing such great knowledge with us!
Cheers~
Thank you. I am glad you like it.
Yes, clear so far. I wasn't really aware of this method. I just use the cdn link
<script src="https://unpkg.com/vue"></script>. But I'll try the cli way now. Thanks! :)Great, I am glad you found it useful.
I will give it a try. Interesting.
good post, thank you so much. This was very informative!!!
@tarekadam - Sire, it's javascript calculator. Love to see how to build it Sire. This is a very interesting topic Sire. Therefore, I wish to ReSteem your post Sire.
+W+ [UpVoted & ReSteemed]
amigo #resteemia at your service
is this linux or windows? interesting aritcle @tarekadam
ReSteemia
'UpVote ReSteem Comment'
i would love to make one :D
it is going to be a great project to start with i am looking forward to it.
i will use vue.js in one of my next projects