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.

Tutorial
php

Creating a Countdown Timer with JavaScript

Now, let's create the JavaScript code to calculate and display the remaining time.

We need a function that takes the end time (the deadline) as input and calculates the difference between the current time and the deadline:

Oct 24, 2024
Read More
Tutorial
php

Exporting Table Row Data to CSV in JavaScript 

<!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>

In this tutorial, we’ve learned how to export individual table rows as CSV files using plain JavaScript. By attaching event listeners to "Export" buttons within each row, we were able to dynamically generate CSV files based on the data in each row. This functionality can be especially useful in applications where users need to download specific data sets for further analysis.

Oct 24, 2024
Read More
Tutorial
javascript css +1

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

  • يحتوي هذا الملف على الهيكل الأساسي لصفحة الويب. يبدأ بـ <!DOCTYPE html> والذي يعرّف نوع المستند.
  • داخل الـ<head> قمنا بتضمين معلومات مثل ترميز الصفحة (UTF-8) والعنوان (<title>).
  • يحتوي <body> على الأقسام المختلفة للموقع مثل العنوان (header)، الأقسام المختلفة (section) وfooter.
  • استخدمنا أيضًا عنصر <form> لإدخال بيانات الزوار.

الآن بعد أن قمنا بإنشاء الهيكل، سنقوم بإضافة بعض التنسيقات باستخدام CSS. سنقوم بإنشاء ملف يسمى styles.css يحتوي على التالي:

Sep 27, 2024
Read More
Cheatsheet
html

HTML5 Cheatsheet

HTML5 introduces semantic elements to improve document structure and accessibility:

  • <header>: Introductory content or navigation links.
  • <nav>: Navigation links.
  • <main>: Main content of the document.
  • <section>: Thematic grouping of content.
  • <article>: Independent content (e.g., blog post).
  • <aside>: Sidebar content.
  • <footer>: Footer content.
  • <figure>: Self-contained content, like images with captions.
  • <figcaption>: Caption for a <figure>.

Aug 03, 2024
Read More