💻 A password generator with customizable length.

This example creates a simple password generator that, upon pressing the button, generates a random password with the specified length from the upper form, using characters from the specified charset.

<div class="password-generator">
<input type="text" id="passwordLength" placeholder="Password length">
<input type="text" id="password" readonly>
<button onclick="generatePassword()">Generate</button></div>

function generatePassword() {
    const length = parseInt(document.getElementById("passwordLength").value);
    const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+";
    const charsetLength = charset.length;
    let password = [];
    
    for (let i = 0; i < length; i++) {
        const randomIndex = Math.floor(Math.random() * charsetLength);
        password.push(charset[randomIndex]);
    }
    
    document.getElementById("password").value = password.join('');
}

Free Figma Template: Game site

🧠 Difficulty: 🥕🥕🥕🥕

#Figma #Template

🧐 Interview Question:

What is the difference between Observable and Promise in JavaScript?

Answer:

Observable and Promise are two ways to handle asynchronous operations in JS.

• A Promise can either resolve successfully or with an error, but it executes only once.

• On the other hand, an Observable represents a stream of data that can be accessed at any time; it can emit multiple values over time during its execution and can be stopped at any point.

🔧 TOAST UI Calendar is a JavaScript calendar that has everything you need.

Here are some features:
⏩ Supports various schedule views: daily, weekly, monthly
⏩ Allows customization of the date UI and schedule information
⏩ Drag & Drop: you can drag elements with the mouse
⏩ Customizable UI themes

TOAST UI Calendar is an excellent component for your web application.

Free Figma Template: Food delivery

🧠 Difficulty: 🥕🥕

#Figma #Template

🔧 Creating color palettes with the CSS color-mix() function

The color-mix() function allows us to specify the two colors we want to mix and then outputs the result. We can control the amount of each color in the mix, as well as the color interpolation space, which determines how the colors blend together.

We specify the amount of each color as percentages. If we omit the percentages of both colors, color-mix() will use 50% for each by default. As shown below, mixing red and blue in equal parts gives us a purple hue as expected.

.result {
  background-color: color-mix(in srgb, blue, red);
}

🔧 CSS TIP
Use trigonometric functions in CSS to create a smooth stepped transition delay:

.character {
  transition-delay:
    calc(sin((var(--index) / 12) * 45deg) * 0.475s);
}

Free Figma Template: Restaurant

🧠 Difficulty: 🥕🥕

#Figma #Template

👨‍🎨 CSS TIP

shape-outside property in action

.column--left .shape {
  float: right;
  shape-outside: circle(100px at 100% 50%);
}

Free Figma Template: Business forum

🧠 Difficulty: 🥕🥕🥕

#Figma #Template

Free Figma Template: Healthy food

🧠 Difficulty: 🥕🥕

#Figma #Template

🔧 CSS TIP

Typing effect

<div class="wrapper">
  <div class="typing-demo">CSS Tips for you!</div>
</div>

.typing-demo {
    width: 17ch; /* Adjust based on the length of your text /
    animation: typing 12s steps(17) infinite, blink 0.5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    font-family: monospace;
    font-size: 2rem;
}

/ Typing and erasing animation /
@keyframes typing {
    0% { width: 0; }
    35% { width: 17ch; } / 4s for typing (1/3 of 12s) /
    70% { width: 17ch; } / 5s pause (adding up to 8.4s) /
    100% { width: 0; } / 3.6s for erasing (remaining time) /
}

/ Blinking cursor animation */
@keyframes blink {
    50% { border-color: transparent; }
}

🔊 Voice Recognition in JS

The Web Speech API allows interaction with voice interfaces in your web applications. It consists of two parts: SpeechSynthesis (Text-to-Speech) and SpeechRecognition (Asynchronous Speech Recognition).

<h2>Voice Recognition</h2>
<p id="transcription"></p>
<button id="startRecognitionButton">Record</button>

const startRecognitionButton = document.getElementById("startRecognitionButton");
const transcription = document.getElementById("transcription");
startRecognitionButton.addEventListener("click", function () {
  const recognition = new webkitSpeechRecognition();
  recognition.lang = "en-US";
  recognition.onresult = function (event) {
   const transcript = event.results[0][0].transcript;
    transcription.textContent = transcript;};
  recognition.onerror = function (event) {
    console.error("Error:", event.error);};
  recognition.start();});

🔧 Pseudo-class ::selection

This subclass allows you to apply a style to a selected element. You can set both the color of the selection and the color of the text when it is selected.

Accepted properties:

• color — The color of the selected text.
• background-color — The background color of the selected text.
• cursor — The cursor displayed during text selection.
• caret-color — The color of the caret (blinking vertical line) when editing text.
• outline — The outline displayed around the selected text.
• text-decoration — Text decoration (e.g., underline, strikethrough).
• text-emphasis-color — The color of emphasis marks (e.g., dots, circles).
• text-shadow — The shadow of the text.

Free Figma Template: Auto auction participating

🧠 Difficulty: 🥕🥕

#Figma #Template

Free Figma Template: Auto auction participating

🧠 Difficulty: 🥕🥕🥕

#Figma #Template