Hi there !
In this article I will be explaining how to build a simple subway counter app, the purpose and it ability.
The subway counter-app is a simple counter app that can easily be used to take records of the numbers of people entering a subway station daily. Note it can also be used in other places depending on what we need it to do for us.
I will be dropping the link to the website after explaining each steps to build the counter app at the end of this article
This is what we will be building below
The steps to take when building the simple counter app from scratch
The first step is to create a folder on your desktop page and name it subway counter app, in the folder you should copy the image you wants to use as the subway counter app background image. Then go to your text editor and open the folder you created, then save three files in it. The three files should be the index.html file, style.css file and the index.js file. The index.html file should contain your html file, the style.css file is where your css styling should be and index.js file should be your javascript file.
On the html file
On the html file the first thing to do is to run the html code. if you are using vscode as your text editor it will be very easy for you just click on the exclamation mark on your desktop and press enter, Vscode will load the html code for you.
It should look like this
Since the html page is now ready you start coding by linking your css file to the html file first by writing this line of code above the title tag, then change the title from document to subway counter-app. Then proceeded to the body element and open an h1 tag, inside of it you should write People who entered in it and close the tag. Move on, below the h1 tag open another tag which is the h2 tag and close it inside the tag put the figure 0 in it then give the tag an id of count-el.Then open two button tags which you should named INCREMENT and SAVE, give the increment button an id of increment-btn and an onclick of increment [INCREMENT] and the save button an id of save-btn and an onclick of save [SAVE ], below the buttons open a p tag and give it an id of save-el and name it Previous entries:.
Finally below the p tag open a script tag and give it an src index.js [], with this you are done with the html page.
Your html file should look like this
The next thing is to style your counter app
In the css file the first thing you should do is to set the margin and padding to zero so as to erase the browser default settings. Then start by styling the body, set the background-image to the image you already saved in the folder, then set the background-size, background-position and background-repeat to cover, center and to no-repeat respectively, the height to 100vh, text-align and color to center and white respectively. With this you are done with the background styling, proceeded to style the h1 and h2 tags, then the button tag and lastly each id you give the buttons.
Your css file should look like this
The html and css of the subway counter-app are now perfect but not responsive and functioning, to make it function you have to go to the idex.js file to breathe life into the subway counter-app.
Remember you have already link the html fie to the javaScript so anything you are doing on the javaScript file will affect both the html file and css file.
First thing you should do is to change the count-el to countEl in the javaScript file using the let code and document.getElementById [ let countEl = document.getElementById ("count-el") ] code because javaScript wont allow hyphen that is why you have to change the count-el to countEl in the javaScript file. Where do you get the count-el from? remember in the html page you gave the h2 tag an id of count-el that is where you got it from and on javaScript we cant use hyphen that is why we have to change it to countEl. Why do you need the id count-el on the javaScript file? you need it because the h2 tag has to change from 0 as the increment button is being clicked. Below it set count to 0 [ let count = 0 ], then repeat what you did to the id count-el to save-el [ let saveEl = document.getElementById("save-el") ].
Now the increment button: give it a function [ function increment() ] then set the count to increase by one anytime the button is being clicked [ count += 1 ] but still before the zero in the h2 tag can increase I had to change the count to countEl.textContent [ countEl.textContent = count ].This will make the h2 tag to increase from zero whenever the increment button is being clicked.
Finally the save button: Give it a function [ function save() ], then set countSave to count + " - " [ let countsave = count + " - " ] then set the id save-el to be the value of countsave [ saveEl.textContent += countsave ], change the countEl and count to zero, so that anytime the increment button is being clicked after the save button the count changes back to zero [countEl.textContent = 0 count = 0 ].
Your javascript file should look like this
These are the steps to take to build a simple subway counter-app.
Top comments (0)