Html Programming Tutorials, Guides & Best Practices

Next, we need a function to update the timer every second:

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);
}

// 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();
    });
});

• 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.

• قم بإنشاء ملفات index.html، styles.css وscripts.js.
• احفظهم في نفس المجلد.

• افتح ملف index.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.