How To Make Pedometer In Html Css & Java

Updated On Write a Comment on How To Make Pedometer In Html Css & Java

A pedometer is a straightforward device designed to monitor the number of steps a person takes throughout the day. Typically worn on the body, it serves a variety of functions, including tracking steps during exercise sessions and assessing daily physical activity levels for health and fitness purposes. In this comprehensive tutorial, we will provide a step-by-step guide to creating your very own pedometer application using a combination of HTML for structure, CSS for styling, and JavaScript for functionality. 

By The end of this tutorial, you’ll have a fully operational pedometer that not only counts your steps but also allows you to keeps an eye on your fitness goals.

Screenshot 24 2 2025 85257 clickobiz.com

Step 1: Create the HTML Structure

The first step in creating a pedometer is to define the HTML structure for the page. We will use a simple structure with a div container, a heading, and a button for the pedometer. In your HTML file, add the following code:

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.elementor-1911 .elementor-element.elementor-element-2e43d051::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--wpr-bg-c207f700-c058-4e66-bd27-657e91baf57f: url('https://notarena.com/wp-content/uploads/2024/10/BG.png');}.lazyloading{--wpr-bg-5920abc5-9b11-4aa8-84fd-af93286a079a: url('https://notarena.com/wp-content/plugins/wp-smushit/app/assets/images/smush-placeholder.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".elementor-1911 .elementor-element.elementor-element-2e43d051, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-video-container, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-video-container, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-slideshow, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-slideshow, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-motion-effects-container > .elementor-motion-effects-layer","style":".elementor-1911 .elementor-element.elementor-element-2e43d051::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--wpr-bg-c207f700-c058-4e66-bd27-657e91baf57f: url('https:\/\/notarena.com\/wp-content\/uploads\/2024\/10\/BG.png');}","hash":"c207f700-c058-4e66-bd27-657e91baf57f","url":"https:\/\/notarena.com\/wp-content\/uploads\/2024\/10\/BG.png"},{"selector":".lazyloading","style":".lazyloading{--wpr-bg-5920abc5-9b11-4aa8-84fd-af93286a079a: url('https:\/\/notarena.com\/wp-content\/plugins\/wp-smushit\/app\/assets\/images\/smush-placeholder.png');}","hash":"5920abc5-9b11-4aa8-84fd-af93286a079a","url":"https:\/\/notarena.com\/wp-content\/plugins\/wp-smushit\/app\/assets\/images\/smush-placeholder.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<div class="container">
    <h1>Mobile Pedometer</h1>
    <div class="display">
        <div class="steps">0</div>
        <div class="time">00:00:00</div>
    </div>
    <div class="buttons">
        <button class="start-btn">Start</button>
        <button class="stop-btn">Stop</button>
        <button class="reset-btn">Reset</button>
    </div>
</div>

<script>
</script>
</body>
</html>

Step 2: Style the HTML Elements

Next, we need to style the HTML elements using CSS to create a visually appealing pedometer. We will use a simple design with a dark background, white  text, and a border for the container. Additionally, we wll centre the elements using the `text-align` property. In your CSS file, add the following code:

				
					<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
        

    .container {
        background: linear-gradient(45deg, #0b2E33, #01413d);
        padding: 30px;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        width: 100%;
        max-width: 400px;
        text-align: center;
    }

    h1 {
        color: #ffff;
        margin-bottom: 30px;
        font-size: 24px;
    }

    .display {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 10px;
        margin-bottom: 30px;
    }

    .steps {
        font-size: 48px;
        color: #2c3e50;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .time {
        font-size: 24px;
        color: #7f8c8d;
    }

    .buttons {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }

    button {
        padding: 12px 25px;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s ease;
        min-width: 100px;
    }

    .start-btn {
        background: #27ae60;
        color: white;
    }

    .stop-btn {
        background: #e74c3c;
        color: white;
    }

    .reset-btn {
        background: #3498db;
        color: white;
    }

    button:hover {
        opacity: 0.9;
        transform: translateY(-2px);
    }

    @media (max-width: 480px) {
        .container {
            padding: 20px;
        }
        
        .steps {
            font-size: 40px;
        }
        
        button {
            width: 100%;
            padding: 15px;
        }
    }
</style>

Step 3: Add Functionality with JavaScript

To make our pedometer functional, we need to add JavaScript code to track the number of steps taken. First, we will add a variable to store the number of steps and initialize it to 0. Then, we will use a `click` event listener on the button to increment this variable by one with each click. Finally, we will update the text of the button to show the current number of steps. Add the following code to your JavaScript file:

				
					
    let isRunning = false;
    let stepCount = 0;
    let startTime;
    let timerInterval;
    let lastAcceleration = { x: null, y: null, z: null };
    let threshold = 12; // Adjust this value for sensitivity
    let lastStepTime = 0;
    let debounceTime = 200; // Milliseconds between steps

    const stepsDisplay = document.querySelector('.steps');
    const timeDisplay = document.querySelector('.time');
    const startBtn = document.querySelector('.start-btn');
    const stopBtn = document.querySelector('.stop-btn');
    const resetBtn = document.querySelector('.reset-btn');

    function handleMotion(event) {
        if (!isRunning) return;

        const acceleration = event.accelerationIncludingGravity;
        const currentTime = Date.now();

        if (lastAcceleration.x !== null) {
            const deltaX = Math.abs(acceleration.x - lastAcceleration.x);
            const deltaY = Math.abs(acceleration.y - lastAcceleration.y);
            const deltaZ = Math.abs(acceleration.z - lastAcceleration.z);
            
            const totalDelta = deltaX + deltaY + deltaZ;

            if (totalDelta > threshold && (currentTime - lastStepTime) > debounceTime) {
                stepCount++;
                stepsDisplay.textContent = stepCount;
                lastStepTime = currentTime;
            }
        }

        lastAcceleration = {
            x: acceleration.x,
            y: acceleration.y,
            z: acceleration.z
        };
    }

    function startTimer() {
        startTime = Date.now() - (stepCount ? (Date.now() - startTime) : 0);
        timerInterval = setInterval(() => {
            const elapsed = Date.now() - startTime;
            const hours = Math.floor(elapsed / 3600000);
            const minutes = Math.floor((elapsed % 3600000) / 60000);
            const seconds = Math.floor((elapsed % 60000) / 1000);
            timeDisplay.textContent = 
                `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
        }, 1000);
    }

    startBtn.addEventListener('click', () => {
        if (!isRunning) {
            isRunning = true;
            startTimer();
            if (typeof DeviceMotionEvent.requestPermission === 'function') {
                DeviceMotionEvent.requestPermission()
                    .then(permissionState => {
                        if (permissionState === 'granted') {
                            window.addEventListener('devicemotion', handleMotion);
                        }
                    })
                    .catch(console.error);
            } else {
                window.addEventListener('devicemotion', handleMotion);
            }
        }
    });

    stopBtn.addEventListener('click', () => {
        isRunning = false;
        clearInterval(timerInterval);
        window.removeEventListener('devicemotion', handleMotion);
    });

    resetBtn.addEventListener('click', () => {
        stepCount = 0;
        stepsDisplay.textContent = '0';
        timeDisplay.textContent = '00:00:00';
        clearInterval(timerInterval);
        isRunning = false;
        window.removeEventListener('devicemotion', handleMotion);
    });

Step 4: Add a Reset Function

It’s also helpful to have a way to reset the number of steps in the pedometer. We can achieve this by adding another event listener to the button that will reset the steps variable back to 0. Additionally, we will update the button text to reflect the reset. Add the following code to your JavaScript file:

Step 5: Incorporate a Step Counter

To make our pedometer even more accurate, we can use the `DeviceMotionEvent` in JavaScript to count the number of steps based on the movement of the device. This will require some additional code, which can be found in the following gist: [Step Counter Code](https://gist.github.com/denispasin/5155e01db9e88ff73fbb781bac2d3c7f).

With all the code in place, it’s time to test our pedometer. Open your HTML file in a web browser and click on the button to start tracking your steps. You can also try moving your device to see if the step counter is working. If it’s not working correctly, you may need to adjust the values in the step counter code.

Congratulations, you have successfully created a pedometer using HTML, CSS, and JavaScript! You can now customize your pedometer further by adding more styling or additional functionality. This pedometer can be a helpful tool to track your daily activity levels and motivate you to stay active. Happy stepping!

Share via

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

The Plugins

Send this to a friend