├── bus.jpg ├── README.md ├── index.html ├── index.js └── index.css /bus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harshuv10/Bus-Passenger-Counter/HEAD/bus.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | BUS PASSENGER COUNTER 2 | 3 | 4 | All you have to do is download all the files to one folder and run the html file. 5 | This is a simple project that counts the number of passengers entering a bus. It facilitates comfortable seating. 6 | It also keeps track of the previous entries. 7 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

7 |

Passenger Count:

8 |

0

9 | 10 | 11 |

Previous entries:

12 | 13 |

14 | 15 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | //document.getElementById("count-el").innerText=5 2 | // let count=0 3 | // console.log(count) 4 | // let myAge=21 5 | // let dogratio=7 6 | // let mydogAge= myAge*dogratio 7 | // console.log(mydogAge) 8 | let countEl=document.getElementById("count-el") 9 | let saveEl=document.getElementById("save-el") 10 | let count=0 11 | function increment(){ 12 | count=count+1 13 | countEl.textContent=count 14 | } 15 | function save(){ 16 | let countStr=count + " - " 17 | saveEl.textContent+=countStr 18 | countEl.textContent=0 19 | count=0 20 | } -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-image: url("bus.jpg"); 3 | background-size: cover; 4 | font-family: 'Open Sans', 'Helvetica Neue', sans-serif; 5 | font-weight: bold; 6 | text-align: center; 7 | height: 100vh; 8 | 9 | } 10 | img{ 11 | height: 100%; 12 | width: 100% 13 | } 14 | p{ 15 | color: white; 16 | } 17 | h1{ 18 | margin-top: 10px; 19 | margin-bottom: 10px; 20 | color: white; 21 | } 22 | 23 | h2{ 24 | font-size: 50px; 25 | margin-top: 0; 26 | margin-bottom: 20px; 27 | color: white; 28 | } 29 | 30 | button{ 31 | border: none; 32 | padding-top: 10px; 33 | padding-bottom: 10px; 34 | color: white; 35 | font-weight: bold; 36 | width: 200px; 37 | margin-bottom: 5px; 38 | border-radius: 5px; 39 | } 40 | #increment-btn{ 41 | background: brown; 42 | color: white; 43 | } 44 | #save-btn{ 45 | background: darkgreen; 46 | } --------------------------------------------------------------------------------