DeveloperBreeze

Password Toggle

javascript
Event Listener DOM Manipulation 
// Get references to the password input and toggle button
const passwordInput = document.getElementById('passwordInput');
const toggleButton = document.getElementById('toggleButton');

// Add event listener to the toggle button
toggleButton.addEventListener('click', () => {
    // Toggle the password input type between 'password' and 'text'
    passwordInput.type = passwordInput.type === 'password' ? 'text' : 'password';
});

Related Posts

More content you might like

Tutorial
php

Exporting Table Row Data to CSV in JavaScript

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>

Oct 24, 2024
Read More
Tutorial
javascript

Easy JavaScript Tutorial for Beginners

You can add JavaScript to a web page in several ways:

<button onclick="alert('Hello World!')">Click Me</button>

Sep 18, 2024
Read More
Tutorial
javascript

MDN's In-Depth JavaScript Guide: A Comprehensive Resource for Developers

Example of a Closure:

function makeCounter() {
    let count = 0;

    return function() {
        count++;
        return count;
    };
}

const counter = makeCounter();
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2

Aug 30, 2024
Read More
Tutorial
javascript

Understanding the DOM in JavaScript: A Comprehensive Guide

  • Document: The root of the DOM tree, representing the entire HTML document.
  • Elements: Nodes that represent HTML elements like <div>, <p>, <a>, etc.
  • Attributes: Properties of elements, such as class, id, src, etc.
  • Text Nodes: Nodes representing text content within elements.

JavaScript can interact with the DOM using various methods provided by the document object. These methods allow you to select elements, modify content, and change styles dynamically.

Aug 30, 2024
Read More

Discussion 0

Please sign in to join the discussion.

No comments yet. Be the first to share your thoughts!