DeveloperBreeze

Html Programming Tutorials, Guides & Best Practices

Explore 5+ expertly crafted html tutorials, components, and code examples. Stay productive and build faster with proven implementation strategies and design patterns from DeveloperBreeze.

Creating a Countdown Timer with JavaScript

Tutorial October 24, 2024
php

Here’s the complete code for the countdown timer:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown Timer</title>
    <style>
        #clockdiv {
            font-family: sans-serif;
            color: #333;
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        #clockdiv div {
            font-size: 30px;
        }
    </style>
</head>
<body>

<div id="clockdiv">
    <div><span class="days"></span> Days</div>
    <div><span class="hours"></span> Hours</div>
    <div><span class="minutes"></span> Minutes</div>
    <div><span class="seconds"></span> Seconds</div>
</div>

<script>
    function getTimeRemaining(endtime) {
        const total = Date.parse(endtime) - Date.now();
        const seconds = Math.floor((total / 1000) % 60);
        const minutes = Math.floor((total / 1000 / 60) % 60);
        const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
        const days = Math.floor(total / (1000 * 60 * 60 * 24));

        return { total, days, hours, minutes, seconds };
    }

    function initializeClock(id, endtime) {
        const clock = document.getElementById(id);
        const daysSpan = clock.querySelector('.days');
        const hoursSpan = clock.querySelector('.hours');
        const minutesSpan = clock.querySelector('.minutes');
        const secondsSpan = clock.querySelector('.seconds');

        function updateClock() {
            const t = getTimeRemaining(endtime);

            daysSpan.innerHTML = t.days;
            hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
            minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
            secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

            if (t.total <= 0) {
                clearInterval(timeinterval);
            }
        }

        updateClock();
        const timeinterval = setInterval(updateClock, 1000);
    }

    let date = new Date();
    let count;
    if (date.getDate() >= 20) {
        count = date.getMonth() + 2;
    } else {
        count = date.getMonth() + 1;
    }
    let year = date.getFullYear();
    let date_str = `${year}-${count.toString().padStart(2, '0')}-20T23:59:59`;
    let deadline = new Date(date_str);

    initializeClock('clockdiv', deadline);
</script>

</body>
</html>

Read More

Exporting Table Row Data to CSV in JavaScript

Tutorial October 24, 2024
php

  • querySelectorAll('.export-btn'): Selects all elements with the class export-btn, i.e., the export buttons.
  • closest('tr'): This retrieves the closest table row (<tr>) that contains the clicked button.
  • querySelectorAll('td'): Retrieves all the <td> cells in the row.
  • Array.from(): Converts the list of cells into an array, which allows us to manipulate it easily.
  • cells.pop(): Removes the last cell (the one containing the export button), as we don’t want it in the CSV.
  • textContent: Extracts the text content from each cell.
  • encodeURIComponent(): Encodes the CSV string, making it safe for use in a URL.
  • anchor.download: Specifies the filename for the CSV file (in this case, row_data.csv).
  • anchor.click(): Programmatically triggers a click on the anchor element, which starts the download.

Here’s a complete example of the HTML and JavaScript code together:

Read More

دليل شامل لتطوير الويب: بناء موقع بسيط باستخدام HTML, CSS وJavaScript

Tutorial September 27, 2024
javascript css html

  • افتح ملف index.html باستخدام أي متصفح لرؤية الموقع قيد التشغيل.
  • يمكنك إضافة المزيد من التفاعلات باستخدام JavaScript مثل تغيير الألوان عند تمرير الفأرة على الروابط.
  • جرب إضافة مكتبات مثل Bootstrap أو Tailwind CSS لتحسين التصميم.
  • استخدم localStorage لتخزين بيانات النموذج محليًا إذا كنت ترغب في إضافة المزيد من التعقيد إلى المشروع.

Read More

HTML5 Cheatsheet

Cheatsheet August 03, 2024
html

  • Data Attributes: Custom attributes prefixed with data-, e.g., <div data-info="123">.
  • Local Storage: Use the localStorage API for client-side data storage.
  • Geolocation API: Retrieve geographic location data of the user.
  • Drag and Drop: Built-in drag and drop functionality for elements.

This cheat sheet provides a quick overview of the essential components and best practices in HTML5. For further learning, you can refer to detailed documentation on each feature and tag to master HTML5 in-depth.

Read More