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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Export Table Row to CSV</title>
</head>
<body>

<table>
    <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Cherry</td>
        <td><a class="export-btn">Export</a></td>
    </tr>
    <tr>
        <td>Dog</td>
        <td>Cat</td>
        <td>Bird</td>
        <td><a class="export-btn">Export</a></td>
    </tr>
</table>

<script>
    // Select all export buttons
    const exportButtons = document.querySelectorAll('.export-btn');

    // Add event listener to each export button
    exportButtons.forEach(button => {
        button.addEventListener('click', () => {
            // Get the parent row of the clicked button
            const row = button.closest('tr');

            // Get all cells in the row except the last one (which contains the export button)
            const cells = Array.from(row.querySelectorAll('td'));
            cells.pop(); // Remove the last cell (the button cell)

            // Extract the text content of each cell and wrap them in double quotes (CSV format)
            const cellValues = cells.map(cell => `"${cell.textContent}"`);

            // Create the CSV data by joining cell values with commas
            const csvData = cellValues.join(',');

            // Create a temporary anchor element for the download
            const anchor = document.createElement('a');
            anchor.href = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csvData);
            anchor.download = 'row_data.csv';

            // Programmatically click the anchor to trigger the download
            anchor.click();
        });
    });
</script>

</body>
</html>

Read More

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

Tutorial September 27, 2024
javascript css html

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

في هذا الدليل، تعلمنا كيفية بناء موقع ويب بسيط باستخدام HTML، CSS وJavaScript. يمكنك استخدام هذه المهارات لبناء مشاريع أكثر تعقيدًا وتخصيص التصميم والتفاعلات بشكل يناسب احتياجاتك.

Read More

HTML5 Cheatsheet

Cheatsheet August 03, 2024
html

  • Inline Elements: Do not start on a new line and only take up as much width as necessary. Examples include <span>, <a>, <em>, <strong>.
  • Block Elements: Start on a new line and take up the full width available. Examples include <div>, <p>, <h1>, <ul>, <table>.
  • Use semantic elements for better structure and SEO.
  • Ensure all images have descriptive alt attributes.
  • Use aria-* attributes to improve accessibility where necessary.
  • Ensure proper use of heading levels for a clear document outline.
  • Use <label> elements with form controls for better usability.

Read More