Skip to content

README.md

Latest commit

 

History

History
159 lines (93 loc) · 5.01 KB

README.md

File metadata and controls

159 lines (93 loc) · 5.01 KB

⏰ Easy Live Clock

⭐ Created by Skyler Futrell

👀 View on GitHub Pages

📌 Project Overview: This project is a fun digital live clock with an interactive radio button, smooth animations, and dynamic background colors that respond to mouse movement.

🚀 Features:

⌛ Live Digital Clock - Updates every second.

📻 Interactive Radio Button - Play and pause the audio with a click.

🎨 Animated Background - Colors shift based on mouse movement.

💡 Neon UI Design - Styling glowing effects and smooth interctive transitions.

🏁 Getting Started:

Prerequisites:

- A modern web browser.
- A text editor (VS Code, Sublime, Notepad ++)

Installation:

- Download or clone the repository to your local machine.
- Ensure the following files are present in the project directory:
        - index.hmtl
        - styles.css
        - script.js
        - iron-man-01.mp3

📂 Project Structure

    /live-clock
    │── index.html          # Main HTML file
    │── /css
    │   └── styles.css      # Styles for the clock and UI
    │── /js
    │   └── script.js       # Clock logic and radio controls
    │── /sounds
    │   └── iron-man-01.mp3 # Audio file sourced from Soundjay for the radio feature

📖 Usage:

  1. Clone the repository

        git clone https://github.com/skylerfutrell/live-clock.git

  2. Navigate to the project folder

       cd live-clock

  3. Open index.html in your browser.

⚒️ Technologies Used:

🖥️ Frontend Development

  • HTML5 – Provides the structure for the webpage, including the clock display and radio button.

  • CSS3 – Handles the styling, animations, and responsive design. - Google Fonts (Orbitron) for a futuristic look. - CSS Keyframes for glowing text and animated background. - Transitions & Shadows for smooth UI effects.

  • JavaScript (ES6+) – Adds interactivity and functionality: - setInterval() for real-time clock updates. - Event Listeners for handling user interactions with the radio button. - DOM Manipulation to update the clock display dynamically. - Mouse Events to change the background color based on cursor movement.

🔊 Media & Audio

  • HTML5 Audio API – Plays and controls an MP3 file for the radio feature.
  • MP3 File Support – Ensures compatibility with modern browsers.

📡 Performance & Optimization

  • Deferred JavaScript Loading (defer in <script> tag) to improve page load speed.
  • Optimized CSS Animations to minimize performance impact.
  • Efficient Event Handling to prevent unnecessary reflows and repaints.

📝 What I Learned:

This project helped me refine my knowledge of:

✅Working with JavaScript Timers – Using setInterval() to update the digital clock every second.

✅ Handling Audio Playback in JavaScript – Implementing play/pause functionality using the HTML5 Audio API.

✅ CSS Animations & Keyframes – Creating smooth glowing text effects and animated background transitions.

✅ Mouse Interaction Events – Capturing user cursor movement to dynamically adjust the background color.

✅ DOM Manipulation – Updating HTML elements dynamically to reflect real-time changes.

✅ Event Listeners & User Interaction – Using JavaScript to handle button clicks for a responsive UI.

🎯 Future Improvements:

📶 Add a Radio Stream API – Implement live streaming functionality with multiple stations.

🎵 Channel Selection Feature – Allow users to switch between different radio channels.

🔈 Volume Control – Add a volume slider to adjust the radio playback.

🖌️ Customization:

Want to tweak the project? Here’s how you can customize it:

🕰️ Change the Clock Style

  • Modify styles.css to adjust the appearance of the digital clock.

  • Example: Change the font size in .digital-clock:

        .digital-clock {
      font-size: 4rem; /* Increase size */
      color: cyan; /* Change text color */
    }

🔊 Use a Different Audio File

  • Replace iron-man-01.mp3 in the /sounds folder with your own MP3 file.

  • Update index.html to reference the new file:

        <audio id="radio-song" src="sounds/new-audio.mp3"></audio>

🎨 Adjust Background Effects

  • Modify the mouse movement effect in script.js to change background behavior.

  • Example: Use a fixed gradient instead of dynamic colors:

                document.body.style.background = "linear-gradient(to right, #ff00ff, #00ffff)";

⏯️ Change the Button Design

  • Edit the .radio-button styles in styles.css:

                .radio-button {
              background: blue; /* Change button color */
              border-radius: 20px; /* Make it more rounded */
            }

License:

This project is open-source and available under the MIT License. LICENSE

🔗 Connect With Me:

Visit My Website