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 

let name = "John";
const age = 25;  // const variables cannot be reassigned
var isStudent = true;
  • let is used for variables that can change.
  • const is for variables that should not change.
  • var is an older way to declare variables but is less commonly used today.

Sep 18, 2024
Read More
Tutorial
javascript

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

Example of DOM Manipulation:

document.getElementById('myButton').addEventListener('click', function() {
    document.getElementById('myText').textContent = 'Button Clicked!';
});

Aug 30, 2024
Read More
Tutorial
javascript

Understanding the DOM in JavaScript: A Comprehensive Guide 

   const element = document.querySelector('.myClass');
   const elements = document.querySelectorAll('.myClass');

Aug 30, 2024
Read More

Discussion 0

Please sign in to join the discussion.

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