If you don't have time to read the full article and explanation, you can take the example code directly from bell-icon-shake-notify

HTML Structure shaking Bell

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Shaking Bell Icon</title>
  </head>
  <body>
    <div class="icon-container">
      <div class="bell"></div>
      <h3>Notify me</h3>
    </div>
  </body>
</html>

In the code above:

• The icon-container(class) div wraps the bell icon and with the text ("Notify me"). This container is styled to ensure the elements are aligned properly.

• The bell div represents the bell icon itself. Instead of using an image tag, we will apply a bell icon as a background image using CSS.

Styling with CSS

Next, let's add some style to the bell icon and apply the shaking effect when the user hovers over it.

1. Bell Icon Styling

We want to display the bell icon. We'll use the background property to set the bell image and the background-size property to ensure it fits properly within the container.

.bell {
  display: inline-block;
  width: 50px; /* Set width to match the size of your bell image */
  height: 50px; /* Set height to match the size of your bell image */
  background: url("image/bell.png") no-repeat center center;
  background-size: contain; /* Make sure the image fits within the div */
}

2.Hover Effect with Shaking Animation

To add hover effect, we use the :hover pseudo-class. When the user hovers over the bell icon, we apply a shaking animation for 1 second.

.bell:hover {
  cursor: pointer;
  animation: shake 1s ease-in-out; /* Apply shaking animation for 1 second on hover */
}

3. Defining the Key-frames for Shaking Animation

The shaking animation is created using CSS @keyframes. The bell will rotate back and forth to mimic a shaking motion.

@keyframes shake {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(-10deg);
  }
  20% {
    transform: rotate(10deg);
  }
  30% {
    transform: rotate(-15deg);
  }
  40% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(-20deg);
  }
  60% {
    transform: rotate(20deg);
  }
  70% {
    transform: rotate(-25deg);
  }
  80% {
    transform: rotate(25deg);
  }
  90% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

This key-frame sequence rotates the bell icon at different angles, creating the illusion of a shaking movement.

4. Container Styling

We box the bell icon and text in a container to ensure they are aligned and properly styled. Here, we added a border and padding to make the container visually distinct.

.icon-container {
  margin: 1rem;
  border: 1px solid black;
  padding: 10px;
  display: flex;
  justify-content: center;
}

Conclusion

This simple example demonstrates how to add an interactive element to your website using CSS animations. The shaking bell icon provides a playful effect that can enhance user engagement. By customizing the animation timing, the hover effect, and the background image, you can adapt this technique to various use cases in your web projects.

Feel free to experiment with different icons, animation durations, and effects to create something unique for your website.

In modern web design, form elements often go beyond simple functionality; The aim to create a smooth and user-friendly user experience. One popular technique is animating the placeholder text within an input field. This approach not only adds a touch of elegance to your forms but also improves usability by ensuring the input label is always visible. In this article, we'll see how to create an animated placeholder input using only HTML and CSS.

The Concept

The idea is simple: when the user interacts with an input field (by focusing on it or filling), the label text (or placeholder) should animate upwards and shrink in size. This ensures the user always knows what the input field is for, even after they've started typing.

HTML Structure

First, set up the basic HTML structure for Animated Placeholder Input :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Animated Placeholder Input</title>
  </head>
  <body>
    <div class="input-container">
      <input type="text" id="input" placeholder=" " required />
      <label for="input">Placeholder Text</label>
    </div>
  </body>
</html>

Here's what this structure does:

• input-container: This div holds both the input field and the label. It uses relative positioning to allow the label to be positioned precisely over the input field.

• input: The text input where users will type their information. The placeholder=" " attribute is intentionally left with a empty space to make sure the label covers the placeholder area.

• label: This is the label(text) that will serve as the animated placeholder. It will be inside the input field and move up when the field is focused or filled.

CSS Styling

Next, we'll use CSS to style the input field and create the animation effect for the label:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

.input-container {
  position: relative;
  width: 300px;
}

input {
  width: 100%;
  padding: 10px 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: none;
  height: 40px;
}

input:focus,
input:not(:placeholder-shown) {
  outline: none;
  border-color: #007bff;
}

label {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  font-size: 16px;
  color: #999;
  transition: all 0.3s ease;
  pointer-events: none;
  background-color: #f4f4f4;
  padding: 0 5px;
}

input:focus + label,
input:not(:placeholder-shown) + label {
  top: 0px; /* Move the label upwards */
  font-size: 12px;
  color: #007bff;
}

Explanation:

1. Input container: The div container styling has position: relative to position the label relative to the input field.

2. Input Field:

   • The input field takes up 100% of the container's width with padding for comfortable typing.

   • It also includes default border styling that changes color when the field is focused or not empty.

3. Label:

   • The label is absolutely positioned within the container, centered vertically over the input field.

   • The transform: translateY(-50%) centers the label perfectly within the input field.

   • It has a transition effect, making it move smoothly when the input field is focused or filled.

   • The pointer-events: none; ensures that clicking the label won't interfere with focusing on the input field.

4. Label Animation:

   • When the input is focused or not empty (input:focus + label, input:not(:placeholder-shown) + label), the label moves upwards (top: 0px) and shrinks in size.

   • The label color also changes to indicate active input.

Final Thoughts

This simple yet effective technique enhances the usability and visual appeal of your forms. By keeping the label visible and animating it smoothly, users can always see what they’re supposed to type, even after they've started filling in the input. This approach is particularly useful in minimalist designs where you want to keep the interface clean without sacrificing user experience.

With just a few lines of HTML and CSS, you can implement good and neat functional animated placeholder input in your web projects.

Here's an explanation with examples

1. Adding Elements to an Array

We can add values to a JS(JavaScript) array using methods like push(), unshift(), or by directly assigning a value to an index.

let arr = [1, 2, 3]; // Initial array with 3 elements
console.log(arr); // Output: [1, 2, 3]

arr.push(4); // Add an element to the end
console.log(arr); // Output: [1, 2, 3, 4]

arr[5] = 6; // Add an element at a specific index (index 4 will be empty)
console.log(arr); // Output: [1, 2, 3, 4, undefined, 6]

2.Removing Elements from an Array

let arr = [1, 2, 3, 4, 5];
console.log(arr); // Output: [1, 2, 3, 4, 5]

arr.pop(); // Remove the last element
console.log(arr); // Output: [1, 2, 3, 4]

arr.splice(1, 2); // Remove 2 elements starting from index 1
console.log(arr); // Output: [1, 4]

3. Length Property

The length property of an array updates automatically as elements are added or removed.

4.Sparse Arrays

If you assign a value to an index that's larger than the current length, the array becomes sparse, meaning it will have "empty" with undefined values between the defined elements.

const value = [1, 2, 3, 4];
value[8] = 11;  // Assign a value at index 8
console.log(value); //[ 1, 2, 3, 4, <4 undefined items>, 11 ]
console.log(value.length); //9

console.log(value[5]) // ?? try it

Sparse Arrays explained in YouTube video you can check it here

Let me ask you a question based on JS array understanding

What will be the console.log(value[5]) take above code block as question try it in your favorite code editor.

Summary

JavaScript arrays are flexible and can expand or shrink in size as needed. You can add or remove elements dynamically, and the array's length property will automatically adjust to reflect the current size. This dynamic nature makes JavaScript arrays very powerful for handling collections of data.

Overview of the generate OTP Function

The function will generate a random 6-character OTP and print it to the console. Each character is randomly chosen from a set of 62 characters, including 26 uppercase letters, 26 lowercase letters, and 10 digits.

The provided generateOTP function is suitable for basic use cases and study purposes to understand the flow. The focus is on understanding how the OTP generation process works. For real-world applications requiring high security, additional measures should be considered.

Let's break down the Loop for Generating OTP step by step:

for (let i = 0; i < length; i++) {
    const randomIndex = Math.floor(Math.random() * charset.length);
    otp += charset[randomIndex];
}

This loop runs length times, where length is the number provided when calling the function (e.g., 6). Inside the loop:

1. Math.random() generates a random floating-point number between 0 to 1 including 0

2. Multiplying this random number by charset.length (which is 62) scales it to the range [0, 62).

3. Math.floor() rounds the result down to the nearest whole number, giving a random integer between 0 and 61, which corresponds to an index in the charset string.

4. charset[random Index] accesses the character at the randomly chosen index in the charset string.

5. This character is then appended to the otp string.

6. After the loop completes, the function returns the generated OTP string

Conclusion

The provided generateOTP function is suitable for basic use cases, but for higher security requirements, consider using secure methods and best practices for OTP handling. The security of an OTP system depends not only on the generation of secure codes but also on how they are managed, transmitted, and validated.