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

Continue Reading

Handpicked posts just for you — based on your current read.

Exporting Table Row Data to CSV in JavaScript

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

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

Oct 24, 2024 Tutorial

Easy JavaScript Tutorial for Beginners

  • 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.
let name = "Alice";
console.log(name);  // Output: Alice
name = "Bob";
console.log(name);  // Output: Bob

Sep 18, 2024 Tutorial

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

  • Selecting Elements: Methods to select elements from the DOM, such as getElementById, querySelector, and querySelectorAll.
  • Changing Content: How to update the content of an HTML element using properties like innerHTML and textContent.
  • Event Handling: Attaching event listeners to elements to respond to user interactions.

Example of DOM Manipulation:

Aug 30, 2024 Tutorial

Understanding the DOM in JavaScript: A Comprehensive Guide 

   const elements = document.getElementsByClassName('myClass');
   const paragraphs = document.getElementsByTagName('p');

Aug 30, 2024 Tutorial

Managing Modals with Livewire and JavaScript

We'll create a system to open and close modals using Livewire and JavaScript by dispatching custom events.

Create a Livewire component, or use an existing one where you want to manage modals.

Aug 14, 2024 Tutorial

JavaScript Code Snippet: Fetch and Display Data from an API

No preview available for this content.

Aug 04, 2024 Code

JavaScript Add Animation to HTML Element

No preview available for this content.

Jan 26, 2024 Code

Dark Mode Toggle

No preview available for this content.

Jan 26, 2024 Code

Discussion 0

Please sign in to join the discussion.

No comments yet. Start the discussion!