├── pro2.css ├── index.html ├── README.md ├── .github └── workflows │ └── static.yml └── pro2.js /pro2.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | font-family: verdana; 5 | } 6 | 7 | .container { 8 | display: flex; 9 | flex-direction: column; 10 | justify-content: center; 11 | align-items: center; 12 | width: 100%; 13 | height: 100vh; 14 | background-color: rgb(0, 61, 0); 15 | } 16 | 17 | h1 { 18 | color: rgb(10, 238, 10); 19 | text-align: center; 20 | } 21 | 22 | .digit { 23 | font-size: 150px; 24 | color: #fff; 25 | } 26 | 27 | .txt { 28 | font-size: 30px; 29 | color: #fffcd6; 30 | } 31 | 32 | #buttons { 33 | margin-top: 50px; 34 | } 35 | 36 | .btn { 37 | width: 100px; 38 | padding: 10px 15px; 39 | margin: 0px 20px; 40 | border-top-right-radius: 10px; 41 | border-bottom-left-radius: 10px; 42 | border-bottom-right-radius: 4px; 43 | border-top-left-radius: 4px; 44 | cursor: pointer; 45 | font-size: 20px; 46 | transition: 0.5s; 47 | color: white; 48 | font-weight: 500; 49 | } 50 | 51 | #start { 52 | background-color: #009779; 53 | } 54 | 55 | #stop { 56 | background-color: #0e85fc; 57 | } 58 | 59 | #reset { 60 | background-color: #c91400; 61 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | Design Stopwatch using HTML CSS and JavaScript 11 | 12 | 13 | 14 | 15 |
16 |

CHANDU'S
17 | STOP WATCH

18 |
19 | 20 | 00 21 | Hr 22 | 23 | 00 24 | Min 25 | 26 | 00 27 | Sec 28 | 29 | 00 30 |
31 |
32 | 34 | 36 | 38 |
39 |
40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Stop-watch-proj 2 | Certainly! Let's discuss the description of a stopwatch implemented using HTML, CSS, and JavaScript. 3 | 4 | 1. **HTML Structure**: 5 | - Create an HTML container to hold the stopwatch elements. 6 | - Inside the container, add elements for displaying hours, minutes, seconds, and milliseconds. 7 | - Include buttons for starting, stopping, and resetting the stopwatch. 8 | 9 | 2. **CSS Styling**: 10 | - Apply styling to the stopwatch elements using CSS. 11 | - You can adjust font sizes, colors, and layout to make it visually appealing. 12 | - Use flexbox or grid to organize the elements within the container. 13 | 14 | 3. **JavaScript Logic**: 15 | - Initialize variables to track time (hours, minutes, seconds, and milliseconds). 16 | - Implement functions for: 17 | - Starting the stopwatch (using `setInterval` to update the time display). 18 | - Stopping the stopwatch (clear the interval). 19 | - Resetting the stopwatch (reset time variables and update display). 20 | 21 | 4. **Functionality**: 22 | - When the user clicks the "Start" button, the stopwatch begins counting. 23 | - Clicking "Stop" pauses the stopwatch. 24 | - "Reset" sets the time back to zero. 25 | 26 | 27 | -------------------------------------------------------------------------------- /.github/workflows/static.yml: -------------------------------------------------------------------------------- 1 | # Simple workflow for deploying static content to GitHub Pages 2 | name: Deploy static content to Pages 3 | 4 | on: 5 | # Runs on pushes targeting the default branch 6 | push: 7 | branches: ["main"] 8 | 9 | # Allows you to run this workflow manually from the Actions tab 10 | workflow_dispatch: 11 | 12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 13 | permissions: 14 | contents: read 15 | pages: write 16 | id-token: write 17 | 18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. 19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. 20 | concurrency: 21 | group: "pages" 22 | cancel-in-progress: false 23 | 24 | jobs: 25 | # Single deploy job since we're just deploying 26 | deploy: 27 | environment: 28 | name: github-pages 29 | url: ${{ steps.deployment.outputs.page_url }} 30 | runs-on: ubuntu-latest 31 | steps: 32 | - name: Checkout 33 | uses: actions/checkout@v4 34 | - name: Setup Pages 35 | uses: actions/configure-pages@v5 36 | - name: Upload artifact 37 | uses: actions/upload-pages-artifact@v3 38 | with: 39 | # Upload entire repository 40 | path: '.' 41 | - name: Deploy to GitHub Pages 42 | id: deployment 43 | uses: actions/deploy-pages@v4 44 | -------------------------------------------------------------------------------- /pro2.js: -------------------------------------------------------------------------------- 1 | let startBtn = document.getElementById('start'); 2 | let stopBtn = document.getElementById('stop'); 3 | let resetBtn = document.getElementById('reset'); 4 | 5 | let hour = 00; 6 | let minute = 00; 7 | let second = 00; 8 | let count = 00; 9 | 10 | startBtn.addEventListener('click', function () { 11 | timer = true; 12 | stopWatch(); 13 | }); 14 | 15 | stopBtn.addEventListener('click', function () { 16 | timer = false; 17 | }); 18 | 19 | resetBtn.addEventListener('click', function () { 20 | timer = false; 21 | hour = 0; 22 | minute = 0; 23 | second = 0; 24 | count = 0; 25 | document.getElementById('hr').innerHTML = "00"; 26 | document.getElementById('min').innerHTML = "00"; 27 | document.getElementById('sec').innerHTML = "00"; 28 | document.getElementById('count').innerHTML = "00"; 29 | }); 30 | 31 | function stopWatch() { 32 | if (timer) { 33 | count++; 34 | 35 | if (count == 100) { 36 | second++; 37 | count = 0; 38 | } 39 | 40 | if (second == 60) { 41 | minute++; 42 | second = 0; 43 | } 44 | 45 | if (minute == 60) { 46 | hour++; 47 | minute = 0; 48 | second = 0; 49 | } 50 | 51 | let hrString = hour; 52 | let minString = minute; 53 | let secString = second; 54 | let countString = count; 55 | 56 | if (hour < 10) { 57 | hrString = "0" + hrString; 58 | } 59 | 60 | if (minute < 10) { 61 | minString = "0" + minString; 62 | } 63 | 64 | if (second < 10) { 65 | secString = "0" + secString; 66 | } 67 | 68 | if (count < 10) { 69 | countString = "0" + countString; 70 | } 71 | 72 | document.getElementById('hr').innerHTML = hrString; 73 | document.getElementById('min').innerHTML = minString; 74 | document.getElementById('sec').innerHTML = secString; 75 | document.getElementById('count').innerHTML = countString; 76 | setTimeout(stopWatch, 10); 77 | } 78 | } --------------------------------------------------------------------------------