DeveloperBreeze

Detect Dark Mode Preference

January 26, 2024

javascript

#Console.log #Dark Mode #Media Queries #Window.matchMedia

// Check if the user prefers dark mode using window.matchMedia
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

// Log whether dark mode is preferred by the user
console.log('Dark Mode:', isDarkMode);

Continue Reading

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

Running JavaScript in the Browser Console

     function greet(name) {
       return `Hello, ${name}!`;
     }
     greet("Alice");

Use the clear() function or click the "Clear Console" button.

Dec 10, 2024 Tutorial

CSS Variables and Custom Properties: Dynamic Theming and Beyond

CSS variables are highly effective when building component-based designs, as they allow for flexibility and reusability.

You can define component-specific variables that can be easily overridden for different contexts.

Sep 05, 2024 Tutorial

Mastering console.log Advanced Usages and Techniques

The most basic usage of console.log is to output information to the console. This can be useful for inspecting variables, checking the flow of a program, and debugging.

Example:

Sep 02, 2024 Tutorial

Advanced CSS Grid and Flexbox Layout Techniques

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  background-color: lightcoral;
  padding: 20px;
  flex: 1 1 200px; /* Flex-grow, flex-shrink, and flex-basis */
}

@media (max-width: 600px) {
  .flex-item {
    flex: 1 1 100%;
  }
}

In this example, the layout adjusts based on the screen size, with items stacking vertically on smaller screens.

Aug 05, 2024 Tutorial

Parse JSON String to Object

No preview available for this content.

Jan 26, 2024 Code

Validate Password Strength

// Function to check if a password meets certain strength criteria
function isValidPassword(password) {
    // Customize validation rules as needed
    const minLength = 8;
    const hasUppercase = /[A-Z]/.test(password);
    const hasLowercase = /[a-z]/.test(password);
    const hasDigit = /\d/.test(password);

    // Check if the password meets the criteria
    return password.length >= minLength && hasUppercase && hasLowercase && hasDigit;
}

// Example password
const password = 'SecurePwd123';

// Log whether the password is valid to the console
console.log('Is Valid Password:', isValidPassword(password));

Jan 26, 2024 Code