Alarm Clock Widget Article

Alarm Clock Widget

The Alarm Clock Widget lets you set alarms with customizable labels, repeat schedules, and snooze options. It supports 12/24-hour format, desktop notifications, and sound alerts — making it a handy tool for reminders and productivity.

Home Web Template Widget and Gadget Learning and Studies Dictionary

Alarm Clock Widget Overview

The Alarm Clock Widget is a lightweight and interactive component that not only displays the current time in HH:MM:SS format, but also allows users to set alarms with labels, repeat schedules, and notifications. It is designed for modern web applications and blogs, making reminders simple and effective.

HTML Structure

The widget’s HTML is clean and semantic. Key elements include:

<div class="clock-card">: The main container for the alarm clock interface.
<div id="time">: Displays the current time.
<div id="date">: Shows the current date.
<form id="alarmForm">: Lets users set alarm time, label, and repeat options.
<div id="alarmsList">: Lists active alarms with delete options.

CSS Styling

The widget uses modern CSS features for a polished look:

Neumorphic Card Style: Soft shadows and rounded corners for a modern feel.
Responsive Layout: Works well across different screen sizes.

JavaScript Functionality

The JavaScript powers the interactivity of the widget:

Displays and updates the current time and date in real time.
Allows setting alarms with labels and repeat schedules (once, daily, weekdays, weekends).
Stores alarms in localStorage for persistence.
Triggers sound, notification, and vibration when an alarm goes off.

Usage Tips

Embed the widget on any dashboard, homepage, or productivity app.
Use labels to organize alarms (e.g., "Meeting", "Workout", "Wake Up").
Repeat options make it useful for daily routines.
Dark mode ensures comfort for night use.

This overview provides a complete understanding of how the HTML, CSS, and JavaScript collaborate to deliver a modern, responsive, and user-friendly Alarm Clock Widget.

Full Source Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Alarm Clock Widget</title>
  <style>
    :root{
      --bg: #0d1117;
      --card: #161b22;
      --fg: #e6edf3;
      --muted: #8b949e;
      --accent: #7c91ff;
      --danger: #ff6b6b;
      --ok: #3ddc97;
      --ring: rgba(124,145,255,.35);
    }
    html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--fg);} 
    .wrap{min-height:100%;display:grid;place-items:center;padding:24px;}
    .card{width:min(900px,96vw);background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.45);padding:20px;}

    .header{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-bottom:12px;}
    .title{font-weight:800;font-size:clamp(18px,2.6vw,24px);} 
    .sub{font-size:12px;color:var(--muted)}

    .clock{display:flex;gap:10px;align-items:baseline;font-variant-numeric:tabular-nums;}
    .now{font-size:clamp(28px,6vw,42px);font-weight:800;letter-spacing:.5px}
    .ampm{font-size:clamp(12px,3vw,14px);opacity:.8;margin-left:2px}

    .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
    .field{display:flex;flex-direction:column;gap:6px;min-width:150px}
    label{font-size:12px;color:var(--muted)}
    input[type="time"], input[type="text"], select{
      background:#0f1420;color:var(--fg);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:10px 12px;outline:none;
    }
    input[type="checkbox"]{transform:translateY(1px)}

    .btn{appearance:none;border:1px solid rgba(255,255,255,.08);background:#0f1420;color:var(--fg);border-radius:12px;padding:10px 14px;cursor:pointer;font-weight:700}
    .btn:hover{border-color:var(--ring);box-shadow:0 0 0 4px var(--ring)}
    .btn.primary{background:linear-gradient(180deg,#202a55,#10173a);border-color:#2d3aa6}
    .btn.danger{background:#23141a;border-color:#4a1b25;color:#ffd6d9}
    .btn.ghost{background:transparent}

    .alarms{margin-top:14px;border-top:1px dashed rgba(255,255,255,.12);padding-top:12px}
    .alarm-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.06);border-radius:12px;background:#0f1420}
    .alarm-left{display:flex;align-items:center;gap:10px}
    .badge{font-variant-numeric:tabular-nums;font-weight:800}
    .labeltxt{color:var(--muted);font-size:12px}

    .pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:#0f1420;color:var(--fg);}
    .pill small{color:var(--muted)}

    .footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px;color:var(--muted);font-size:12px}

    .ringing{outline:3px solid var(--danger);animation:pulse 1s infinite}
    @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,107,107,.5)}70%{box-shadow:0 0 0 16px rgba(255,107,107,0)}100%{box-shadow:0 0 0 0 rgba(255,107,107,0)}}
  </style>
</head>
<body>
  <div class="wrap">
    <div class="card" id="card">
      <div class="header">
        <div>
          <div class="title">⏰ Alarm Clock</div>
          <div class="sub">Set alarms with sound and optional desktop notifications</div>
        </div>
        <div class="clock"><span id="now" class="now">00:00:00</span><span id="nowAmpm" class="ampm">AM</span></div>
      </div>

      <div class="row">
        <div class="field">
          <label for="alarmTime">Alarm time</label>
          <!-- use step=1 to include seconds; browsers return HH:MM:SS in 24h -->
          <input type="time" id="alarmTime" step="1" />
        </div>
        <div class="field">
          <label for="alarmLabel">Label (optional)</label>
          <input type="text" id="alarmLabel" placeholder="e.g., Stand-up, Meeting, Break" />
        </div>
        <div class="field">
          <label for="repeat">Repeat</label>
          <select id="repeat">
            <option value="once">Once</option>
            <option value="daily">Daily</option>
            <option value="weekdays">Weekdays (Mon–Fri)</option>
            <option value="weekends">Weekends (Sat–Sun)</option>
          </select>
        </div>
        <div class="field" style="min-width:120px">
          <label> </label>
          <button id="addAlarm" class="btn primary">Add Alarm</button>
        </div>
      </div>

      <div class="row">
        <div class="pill"><input type="checkbox" id="fmt24" /> <label for="fmt24">24-hour</label></div>
        <div class="pill"><input type="checkbox" id="enableNoti" checked /> <label for="enableNoti">Desktop notifications</label></div>
        <div class="pill"><button class="btn ghost" id="enableAudio">Enable sound</button><small id="audioState"> required once</small></div>
        <div class="pill"><button class="btn ghost" id="testAlarm">Test sound</button></div>
      </div>

      <div class="alarms" id="alarms"></div>

      <div class="footer">
        <div>Timezone: <span id="tz"></span></div>
        <div id="status">Ready</div>
      </div>
    </div>
  </div>

  <script>
    // ---------- Utilities ----------
    const $ = (sel, ctx=document) => ctx.querySelector(sel);
    const $$ = (sel, ctx=document) => [...ctx.querySelectorAll(sel)];
    const pad = n => String(n).padStart(2, '0');

    // ---------- Live Clock ----------
    const elNow = $('#now');
    const elNowAmpm = $('#nowAmpm');
    const fmt24 = $('#fmt24');

    function tickNow(){
      const d = new Date();
      let h = d.getHours();
      const m = pad(d.getMinutes());
      const s = pad(d.getSeconds());
      if(fmt24.checked){
        elNow.textContent = `${pad(h)}:${m}:${s}`;
        elNowAmpm.textContent = '';
      } else {
        const am = h < 12;
        const hh = h % 12 || 12;
        elNow.textContent = `${pad(hh)}:${m}:${s}`;
        elNowAmpm.textContent = am ? 'AM' : 'PM';
      }
    }
    setInterval(tickNow, 1000);
    tickNow();

    // ---------- Timezone ----------
    $('#tz').textContent = Intl.DateTimeFormat().resolvedOptions().timeZone;

    // ---------- Audio (WebAudio API tone) ----------
    let audioCtx, osc, gain;
    function setupAudio(){
      if(audioCtx) return;
      audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      gain = audioCtx.createGain();
      gain.gain.value = 0.0;
      gain.connect(audioCtx.destination);
    }
    function startBeep(){
      if(!audioCtx) setupAudio();
      if(osc) return; // already playing
      osc = audioCtx.createOscillator();
      osc.type = 'sine';
      osc.frequency.value = 880; // A5
      osc.connect(gain);
      gain.gain.setTargetAtTime(0.2, audioCtx.currentTime, 0.01);
      osc.start();
    }
    function stopBeep(){
      if(!osc) return;
      gain.gain.setTargetAtTime(0.0, audioCtx.currentTime, 0.01);
      osc.stop(audioCtx.currentTime + 0.05);
      osc.disconnect();
      osc = null;
    }

    $('#enableAudio').addEventListener('click', async ()=>{
      try{
        setupAudio();
        await audioCtx.resume();
        $('#audioState').textContent = ' enabled';
        $('#status').textContent = 'Sound ready';
      }catch(e){
        $('#status').textContent = 'Audio blocked by browser';
      }
    });
    $('#testAlarm').addEventListener('click', ()=>{
      startBeep();
      setTimeout(stopBeep, 1500);
    });

    // ---------- Notifications ----------
    const enableNoti = $('#enableNoti');
    async function ensurePermission(){
      if(!enableNoti.checked) return false;
      if(!('Notification' in window)) return false;
      if(Notification.permission === 'granted') return true;
      if(Notification.permission !== 'denied'){
        const p = await Notification.requestPermission();
        return p === 'granted';
      }
      return false;
    }
    function notify(title, body){
      if(!enableNoti.checked || !('Notification' in window)) return;
      try{ new Notification(title, { body }); }catch{}
    }

    // ---------- Alarm storage ----------
    const STORAGE = 'alarms:v1';
    let alarms = []; // {id,time:"HH:MM:SS", label, repeat, enabled}
    try{ alarms = JSON.parse(localStorage.getItem(STORAGE)||'[]'); }catch{}

    const list = $('#alarms');
    function save(){ localStorage.setItem(STORAGE, JSON.stringify(alarms)); }

    function render(){
      list.innerHTML = '';
      if(alarms.length===0){
        const empty = document.createElement('div');
        empty.className = 'labeltxt';
        empty.textContent = 'No alarms yet. Add one above.';
        list.appendChild(empty);
        return;
      }
      for(const a of alarms){
        const row = document.createElement('div');
        row.className = 'alarm-item';
        row.dataset.id = a.id;

        const left = document.createElement('div');
        left.className = 'alarm-left';
        const time = document.createElement('div');
        time.className = 'badge';
        time.textContent = a.time;
        const lab = document.createElement('div');
        lab.innerHTML = `<div>${a.label || 'Alarm'}</div><div class="labeltxt">${a.repeat}</div>`;
        left.appendChild(time); left.appendChild(lab);

        const right = document.createElement('div');
        right.style.display='flex'; right.style.gap='8px';
        const toggle = document.createElement('button');
        toggle.className = 'btn';
        toggle.textContent = a.enabled ? 'On' : 'Off';
        toggle.addEventListener('click', ()=>{ a.enabled=!a.enabled; toggle.textContent=a.enabled?'On':'Off'; save(); });

        const snooze = document.createElement('button');
        snooze.className = 'btn'; snooze.textContent = 'Snooze 5m';
        snooze.addEventListener('click', ()=> snoozeAlarm(a.id, 5));

        const del = document.createElement('button');
        del.className = 'btn danger'; del.textContent = 'Delete';
        del.addEventListener('click', ()=>{ alarms = alarms.filter(x=>x.id!==a.id); save(); render();});

        right.append(toggle, snooze, del);
        row.append(left, right);
        list.appendChild(row);
      }
    }

    function addAlarm(){
      const t = $('#alarmTime').value.trim(); // browser gives HH:MM(:SS) in 24h
      if(!t){ $('#status').textContent = 'Pick a time first'; return; }
      const canon = t.length===5 ? t+':00' : t; // ensure HH:MM:SS
      const label = $('#alarmLabel').value.trim();
      const repeat = $('#repeat').value;
      alarms.push({ id: crypto.randomUUID(), time: canon, label, repeat, enabled: true });
      save(); render(); $('#status').textContent = 'Alarm added';
    }
    $('#addAlarm').addEventListener('click', addAlarm);

    function snoozeAlarm(id, min){
      const a = alarms.find(x=>x.id===id); if(!a) return;
      // set one-time snooze by moving time forward 'min' minutes from now
      const now = new Date();
      now.setMinutes(now.getMinutes()+min);
      const newTime = `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
      a.time = newTime; a.repeat = 'once'; a.enabled = true; save(); render();
      $('#status').textContent = `Snoozed to ${newTime}`;
    }

    // ---------- Scheduler ----------
    function shouldFire(a, d){
      // a.time is HH:MM:SS 24h; compare with local time
      const cur = `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
      return a.enabled && a.time === cur;
    }

    function afterFire(a, d){
      if(a.repeat === 'once'){
        a.enabled = false;
      } else if(a.repeat === 'daily'){
        // keep enabled
      } else if(a.repeat === 'weekdays'){
        const day = d.getDay(); // 0 Sun..6 Sat
        if(day===0 || day===6) a.enabled = false; // if triggered on weekend, turn off
      } else if(a.repeat === 'weekends'){
        const day = d.getDay();
        if(day>=1 && day<=5) a.enabled = false; // if triggered on weekday, turn off
      }
      save(); render();
    }

    function ring(label, time){
      $('#card').classList.add('ringing');
      startBeep();
      ensurePermission().then(granted=>{
        if(granted) notify('Alarm', `${label?label+" — ":''}${time}`);
        if(navigator.vibrate) try{ navigator.vibrate([200,100,200]); }catch{}
      });
      $('#status').textContent = `Ringing: ${label || 'Alarm'} (${time})`;
    }
    function stopRing(){ $('#card').classList.remove('ringing'); stopBeep(); }

    // global stop when user clicks the card border
    $('#card').addEventListener('click', (e)=>{
      if(e.target.closest('.alarm-item') || e.target.closest('.row')) return; // ignore control clicks
      stopRing();
    });

    setInterval(()=>{
      const d = new Date();
      for(const a of alarms){
        if(shouldFire(a, d)){
          ring(a.label, a.time);
          afterFire(a, d);
        }
      }
    }, 1000);

    // ---------- Format toggle affects header clock only ----------
    fmt24.addEventListener('change', tickNow);

    // initial render
    render();
  </script>
</body>
</html>

Live Preview

Alarm Clock Widget Details

Date Upload: August 17, 2025
File Name: alarm-clock-widget.html
Details: Fully responsive alarm clock with customizable alarms, repeat options, notifications, sound, and light/dark mode toggle.
Size: 60 KB
Downloaded by: 0 people
Download File:

Mastering HTML: A Complete Guide for Beginners

HTML (HyperText Markup Language) is the backbone of every website. It allows developers to structure content, create headings, paragraphs, links, images, tables, forms, and more. Understanding HTML is the first step toward building interactive and visually appealing web pages. In this guide, we will explore HTML thoroughly, provide practical examples, and equip you with the knowledge to start coding confidently.

1. The Basic Structure of an HTML Document

Every HTML page follows a basic structure that includes the <!DOCTYPE html>, <html>, <head>, and <body> tags. These tags define the document type, language, metadata, and visible content respectively. Here’s an example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Web Page</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>Welcome to my first HTML page.</p>
</body>
</html>

Explanation:

<!DOCTYPE html> declares the HTML version (HTML5 here).
<html lang="en"> starts the HTML document and sets language to English.
<head> contains metadata, title, and linked resources like CSS.
<body> contains all the visible content.

2. HTML Headings and Paragraphs

Headings define the structure of content and range from <h1> (main heading) to <h6> (least important). Paragraphs (<p>) separate text blocks.

<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>This is a paragraph describing the content under the subheading.</p>

3. Links, Images, and Media

Links (<a>) allow navigation between pages, while images (<img>) display pictures. Always use the alt attribute for accessibility.

<a href="https://example.com">Visit Example</a>
<img src="example.jpg" alt="Example Image">

HTML also supports audio and video:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
</video>

4. Lists and Tables

HTML supports ordered lists (<ol>) and unordered lists (<ul>). Tables (<table>) organize data into rows and columns.

<ul>
  <li>HTML Basics</li>
  <li>CSS Styling</li>
  <li>JavaScript Interaction</li>
</ul>

<table border="1">
  <tr><th>Name</th><th>Age</th></tr>
  <tr><td>Alice</td><td>25</td></tr>
  <tr><td>Bob</td><td>30</td></tr>
</table>

5. Forms and User Input

Forms collect data from users. Essential tags include <form>, <input>, <textarea>, and <button>.

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea>
  <br>
  <button type="submit">Submit</button>
</form>

6. HTML Semantic Tags

Semantic tags help browsers and search engines understand content better:

<header> – top section of a page
<nav> – navigation links
<article> – self-contained content
<section> – grouped content area
<footer> – bottom section
<aside> – sidebar content

7. Attributes and Global Features

HTML tags can include attributes for additional behavior:

class – groups elements for CSS styling
id – unique identifier for scripting
style – inline styling
title – tooltip text

8. HTML Comments

Comments are ignored by browsers but helpful for developers:

<!-- This is a comment -->

9. Best Practices for Beginners

Always close tags properly to prevent layout issues.
Use semantic HTML for accessibility and SEO.
Indent and format code for readability.
Test your code in multiple browsers for consistency.
Use external CSS and JS files to keep HTML clean.

10. Common HTML Mistakes to Avoid

Forgetting to close tags (<p>, <div>).
Using deprecated tags like <font> or <center>.
Incorrect nesting of elements.
Using inline styles excessively instead of CSS.

11. Mini HTML Projects

Practice makes perfect. Start with these mini-projects:

Create a personal portfolio page.
Build a simple blog with headings, paragraphs, and links.
Design a photo gallery with <img> and captions.
Make a contact form to simulate user input collection.
Combine lists and tables to display product features.

12. FAQs About HTML Coding

Q1: Do I need to learn CSS and JavaScript with HTML?
A: Yes. HTML structures the page, CSS styles it, and JavaScript adds interactivity. All three together form the core of web development.

Q2: Can I make a website with only HTML?
A: Technically yes, but it will be static. CSS and JS are needed for modern, responsive designs and user interactions.

Q3: What is the difference between HTML5 and previous versions?
A: HTML5 supports multimedia (audio/video), semantic elements (<header>, <section>), APIs, and mobile-friendly features not available in older versions.

Q4: What are semantic HTML tags, and why should I use them?
A: Semantic tags like <article>, <section>, and <nav> describe the meaning of content. They improve accessibility, SEO, and code readability.

Q5: How can I make my HTML code more readable?
A: Use proper indentation, line breaks, meaningful tag names, and comments. Organize your content logically and avoid cluttered inline styles.

Q6: Are HTML attributes case-sensitive?
A: No, HTML attributes are generally not case-sensitive. For consistency, lowercase is recommended (e.g., id="header").

Q7: Can I include multimedia in HTML?
A: Yes. HTML5 allows embedding images (<img>), audio (<audio>), and video (<video>) directly into web pages without external plugins.

Q8: What is the role of the <meta> tag?
A: The <meta> tag provides metadata like character encoding, viewport settings, author info, and SEO-related descriptions. It does not display content directly.

Q9: How do I make my HTML page mobile-friendly?
A: Use the viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Combine it with responsive CSS and flexible layouts for different devices.

Q10: Where can I practice and test HTML code?
A: You can practice in online editors like CodePen, JSFiddle, or in-browser live editors like this one. Experimenting and seeing real-time results helps reinforce learning.

13. Additional Tips for Fast Learning

Use online editors like this live preview to experiment instantly.
Read documentation from MDN Web Docs.
Break complex layouts into smaller sections and code step by step.
Try recreating popular websites’ layouts for practice.

By following this guide, practicing consistently, and experimenting with different HTML tags and layouts, you'll gain confidence and skill in web development. HTML is the building block for everything on the web, and mastering it opens the door to CSS, JavaScript, and full-stack development.

Home

Return to the main page and access all key sections.

Web Template

Browse ready-made templates for your blog and projects.

View

Widget and Gadget

Explore widgets and gadgets to enhance your blog functionality.

Explore

Learning and Studies

Access educational materials and coding tutorials.

Learn

Dictionary

Look up coding terms and definitions quickly.

Open

Free Blogspot XML

Sunday, August 24, 2025

Alarm Clock Widegt