HTML CSS AND JAVASCRIPT CODE FOR TRAFFIC LIGHT SYSTEM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smart Traffic Light System</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(to bottom, #2c3e50, #4ca1af);
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .traffic-light {
            width: 100px;
            background: #333;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
        }

        .light {
            width: 60px;
            height: 60px;
            background: #222;
            border-radius: 50%;
            margin: 15px auto;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

        .light.red.active {
            background: red;
            box-shadow: 0 0 20px red;
        }

        .light.yellow.active {
            background: yellow;
            box-shadow: 0 0 20px yellow;
        }

        .light.green.active {
            background: green;
            box-shadow: 0 0 20px green;
        }

        .message {
            font-size: 24px;
            margin-top: 20px;
            color: white;
            animation: fadeInOut 2s infinite;
        }

        .message.stop {
            color: red;
        }

        .message.ready {
            color: yellow;
        }

        .message.go {
            color: green;
        }

        @keyframes fadeInOut {
            0%, 100% { opacity: 0; }
            50% { opacity: 1; }
        }

        .emoji {
            font-size: 50px;
            margin-bottom: 20px;
            animation: policeAnimation 1s infinite;
        }

        @keyframes policeAnimation {
            0% { transform: rotate(0deg); }
            50% { transform: rotate(10deg); }
            100% { transform: rotate(0deg); }
        }

        .warning {
            margin-top: 20px;
            font-size: 18px;
            color: #fff;
        }

        .feature {
            margin-top: 20px;
            font-size: 18px;
            color: #fff;
            text-align: center;
        }

        .feature h3 {
            margin: 10px 0;
        }

        .pedestrian-button {
            margin-top: 20px;
        }

        .pedestrian-button button {
            padding: 10px 20px;
            font-size: 18px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            background-color: #4ca1af;
            color: white;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        }

        .pedestrian-button button:active {
            background-color: #3b8d99;
        }

        iframe {
            margin-top: 20px;
            border: none;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
    <div class="emoji">👮</div>
    <div class="traffic-light">
        <div class="light red"></div>
        <div class="light yellow"></div>
        <div class="light green"></div>
    </div>
    <div class="message"></div>
    <div class="warning">Be careful while driving</div>
    <div class="feature">
        <h3>Real-time Traffic Updates: <span id="traffic-updates">Loading...</span></h3>
        <h3>Route Optimization: <span id="route-optimization">Calculating...</span></h3>
        <h3>Push Notifications: <span id="push-notifications">Enabled</span></h3>
        <h3>Voice Assistant: <span id="voice-assistant">Active</span></h3>
        <h3>Gamification: <span id="gamification">Level 1</span></h3>
        <h3>Social Sharing: <span id="social-sharing">Share your status</span></h3>
        <h3>Data Analytics: <span id="data-analytics">Collecting...</span></h3>
        <h3>Accessibility Features: <span id="accessibility-features">Enabled</span></h3>
    </div>
    <div class="pedestrian-button">
        <button id="pedestrian-crossing">Pedestrian Crossing</button>
    </div>
    <iframe width="1128" height="634" src="https://www.youtube.com/embed/hWgpMnT6yJU" title="TRAFFIC SOUND EFFECTS! LOS ANGELES" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <audio id="red-sound" src="red-light.mp3"></audio>
    <audio id="yellow-sound" src="yellow-light.mp3"></audio>
    <audio id="green-sound" src="green-light.mp3"></audio>
    <audio id="pop-up-sound" src="pop-up.mp3"></audio>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const lights = document.querySelectorAll('.light');
            const message = document.querySelector('.message');
            const sounds = {
                red: document.getElementById('red-sound'),
                yellow: document.getElementById('yellow-sound'),
                green: document.getElementById('green-sound'),
                popUp: document.getElementById('pop-up-sound')
            };
            let currentIndex = 0;

            function changeLight() {
                lights.forEach(light => light.classList.remove('active'));
                lights[currentIndex].classList.add('active');

                sounds.popUp.play(); // Play pop-up sound

                switch (currentIndex) {
                    case 0:
                        message.textContent = 'STOP';
                        message.className = 'message stop';
                        sounds.red.play();
                        break;
                    case 1:
                        message.textContent = 'READY';
                        message.className = 'message ready';
                        sounds.yellow.play();
                        break;
                    case 2:
                        message.textContent = 'GO';
                        message.className = 'message go';
                        sounds.green.play();
                        break;
                }

                currentIndex = (currentIndex + 1) % lights.length;
            }

            function updateFeatureStatus() {
                document.getElementById('traffic-updates').textContent = 'Traffic is smooth';
                document.getElementById('route-optimization').textContent = 'Optimized route found';
                document.getElementById('push-notifications').textContent = '3 new alerts';
                document.getElementById('voice-assistant').textContent = 'How can I assist you?';
                document.getElementById('gamification').textContent = 'Level 2 - Points: 150';
                document.getElementById('social-sharing').textContent = 'Shared with 5 friends';
                document.getElementById('data-analytics').textContent = 'Data analyzed for last 30 mins';
                document.getElementById('accessibility-features').textContent = 'Voice guidance active';
            }

            function pedestrianCrossing() {
                alert('Pedestrian Crossing Activated!');
                changeLight();
            }

            document.getElementById('pedestrian-crossing').addEventListener('click', pedestrianCrossing);

            setInterval(changeLight, 20000); // Change light every 20 seconds
            changeLight(); // Initialize the first light

            // Simulate real-time updates every 10 seconds
            setInterval(updateFeatureStatus, 10000);
        });
    </script>
</body>
</html>
HTML

ered device with semaphore arms and was used to control traffic at the intersection of Bridge Street and Parliament Street. Unfortunately, this early system was short-lived due to an explosion that resulted from a gas leak.

The idea gained traction in the United States in the early 20th century. In 1920, an American inventor named William Potts introduced the three-color traffic light, incorporating red, green, and amber lights. This innovation helped establish a standardized system that could be adopted across various cities and states.

2. Technological Evolution:

The traffic light system continued to evolve throughout the 20th century. The introduction of electric lights in the 1920s allowed for more reliable and efficient operation. By the 1950s, traffic lights began to feature timers, which enabled more precise control of traffic flow. The development of computerized systems in the late 20th century further revolutionized traffic management, allowing for real-time adjustments based on traffic conditions.

Functioning of Traffic Lights

Traffic lights operate on a simple principle: to control the flow of traffic through an intersection by using a sequence of colors. The basic traffic light system consists of three lights:

  1. Red Light: The red light indicates that vehicles must stop. This is the most crucial aspect of traffic management, as it allows for safe passage of vehicles or pedestrians from other directions.
  2. Green Light: The green light signals that vehicles may proceed through the intersection. It is usually timed to allow for a safe and efficient flow of traffic.
  3. Amber (Yellow) Light: The amber light serves as a warning that the light is about to change to red. It is intended to alert drivers to prepare to stop.

1. Timing and Coordination:

The timing of each light phase can vary depending on the traffic volume and the specific needs of the intersection. In modern systems, traffic lights are often coordinated with others in the vicinity to optimize the flow of traffic. This coordination can be achieved through various methods, including:

  • Fixed Timing: Traffic lights operate on a predetermined schedule that does not change based on traffic conditions.
  • Traffic Sensors: Sensors placed in or near the roadway detect the presence of vehicles and adjust the timing of the lights accordingly.
  • Adaptive Traffic Control Systems: These systems use real-time data to adjust light timings dynamically based on current traffic conditions.

2. Pedestrian Signals:

In addition to controlling vehicular traffic, modern traffic light systems often include pedestrian signals. These signals provide visual and auditory cues to help pedestrians cross the street safely. They typically feature symbols or text indicating when it is safe to cross and when it is not.

3. Additional Features:

Recent advancements in traffic light technology have introduced several additional features, including:

  • Countdown Timers: These display the remaining time before the light changes, helping drivers and pedestrians make more informed decisions.
  • Smart Traffic Lights: Equipped with sensors and communication technology, these lights can adapt to changing traffic conditions and communicate with other traffic management systems.
  • Emergency Vehicle Priority: Some traffic light systems can detect approaching emergency vehicles and give them priority by altering the light sequence.

Benefits of Traffic Light Systems

The implementation of traffic light systems offers numerous benefits, including:

  1. Safety:

Traffic lights play a crucial role in reducing accidents at intersections. By providing clear and consistent signals to drivers and pedestrians, they help prevent collisions and ensure that all road users can navigate intersections safely.

  1. Efficiency:

Properly coordinated traffic light systems can enhance the efficiency of traffic flow, reducing congestion and travel times. By managing the flow of traffic in an orderly manner, they help minimize delays and improve overall road network performance.

  1. Predictability:

Traffic lights provide a predictable framework for road users. Drivers and pedestrians can anticipate the changes in traffic signals, which helps in planning their movements and reduces the likelihood of erratic driving behavior.

  1. Environmental Impact:

Efficient traffic management through traffic lights can lead to reduced idling and smoother traffic flow, which can contribute to lower vehicle emissions and improved air quality.

Challenges and Criticisms

Despite their many benefits, traffic light systems are not without challenges and criticisms:

  1. Traffic Congestion:

In some cases, poorly designed or misaligned traffic light systems can contribute to traffic congestion. Inadequate timing or coordination can lead to longer wait times and increased delays.

  1. Compliance Issues:

Drivers may sometimes ignore traffic signals or run red lights, leading to dangerous situations. Enforcement mechanisms, such as red-light cameras, are used to address this issue, but they are not always effective.

  1. Maintenance and Reliability:

Traffic lights require regular maintenance to ensure their proper functioning. Malfunctions or outages can disrupt traffic flow and create hazardous conditions.

  1. Technological Limitations:

While advancements in technology have improved traffic light systems, there are still limitations. For example, older systems may not be compatible with newer technologies, and the integration of various traffic management systems can be complex.

Future Directions

The future of traffic light systems is likely to be shaped by several emerging trends and technologies:

  1. Smart Cities:

As cities become smarter and more connected, traffic light systems will increasingly integrate with other urban infrastructure. This integration will enable more sophisticated traffic management and improve overall city efficiency.

  1. Autonomous Vehicles:

The rise of autonomous vehicles presents both opportunities and challenges for traffic light systems. These vehicles will need to communicate with traffic lights to navigate intersections safely, and traffic light systems may need to adapt to accommodate their unique requirements.

  1. Artificial Intelligence:

AI and machine learning technologies will play a significant role in the future of traffic management. These technologies can analyze vast amounts of data to optimize traffic light timings and improve overall traffic flow.

  1. Sustainability:

There will be a growing emphasis on sustainability in traffic light systems. This includes the use of energy-efficient LED lights, integration with renewable energy sources, and design considerations to reduce the environmental impact.

Conclusion

Traffic light systems are a fundamental component of modern transportation infrastructure, contributing to safety, efficiency, and predictability on the roads. From their humble beginnings in the early 20th century to their current state of technological sophistication, traffic lights have continually evolved to meet the needs of growing and changing urban environments.

While traffic light systems offer numerous benefits, they also face challenges that require ongoing attention and innovation. As cities become smarter and new technologies emerge, the future of traffic light systems holds exciting possibilities. By leveraging advancements in technology and integrating with other urban infrastructure, traffic lights will continue to play a vital role in ensuring the smooth and safe movement of people and vehicles.

In summary, the traffic light system is a testament to the importance of orderly traffic management in our daily lives. As we look to the future, the continued evolution of these systems will be crucial in addressing the challenges of modern transportation and creating more efficient and sustainable urban environments.

Leave a Reply

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

Resize text
Scroll to Top