Burn

02CSS/Day07/notes/notes.md

@@ -0,0 +1,220 @@
+# Lecture 07: Animation in CSS
+
+- [Lecture 07: Animation in CSS](#lecture-07-animation-in-css)
+    - [Part 1: What is an Animation? (The First Principle)](#part-1-what-is-an-animation-the-first-principle)
+    - [Part 2: Creating the Storyboard with @keyframes](#part-2-creating-the-storyboard-with-keyframes)
+    - [Part 3: Applying the Animation with the animation Property](#part-3-applying-the-animation-with-the-animation-property)
+    - [Part 4: Controlling the Animation's Repetition](#part-4-controlling-the-animations-repetition)
+    - [Part 5: Animating Size - A Practical "Progress Bar" Project](#part-5-animating-size---a-practical-progress-bar-project)
+
+
+<br>
+<br>
+
+
+### Part 1: What is an Animation? (The First Principle)
+
+- **The Fundamental Truth:** An animation is a **change in style over a period of time**.
+- **The Analogy: A Sunset**
+    - "Think about a sunset. At 6 PM, the sky is bright blue. This is the **start state**.
+    - By 7 PM, the sky is a deep orange. This is the **end state**.
+    - The sunset itself is the **animation**—the gradual, smooth change from blue to orange over the course of one hour (the **duration**)."
+- **The Core Problem:** A normal CSS rule, like .sky { background-color: blue; }, only defines a single moment in time. How do we describe the entire sunset from start to finish?
+- **The Logical Solution: A Two-Part System**
+
+    "CSS solves this by giving us a two-part system:"
+
+    1. **The Storyboard (@keyframes):** "First, we describe the key moments of our story. We define what the sky looks like at the beginning and at the end. This 'storyboard' is called a **@keyframes** rule."
+    2. **The Director (animation property):** "Second, we tell an element (our 'sky') to perform this story. We use the **animation** property to give it directions, like how long the sunset should take."
+
+---
+
+### Part 2: Creating the Storyboard with @keyframes
+
+- **The First Principle:** An animation is defined by its key states. The simplest animation has a beginning and an end.
+- **The Syntax:** code CSS
+
+    ```css
+    @keyframes animation-name {
+      from { /* Start styles */ }
+      to { /* End styles */ }
+    }
+    ```
+
+    - **@keyframes**: The special command to start defining an animation.
+    - **animation-name**: A name you invent for your storyboard.
+- **Practical Example: The "Sunset" Animation** code CSS
+
+    Let's create the storyboard for our sunset. We will animate the background-color.
+
+    ```css
+    @keyframes sunset-effect {
+      from {
+        background-color: #87CEEB; /* A bright Sky Blue */
+      }
+      to {
+        background-color: #FF4500; /* A deep OrangeRed */
+      }
+    }
+    ```
+
+    - **Explain:** "This storyboard is named sunset-effect. It tells a simple story: start as sky blue, end as orange-red. The browser will automatically figure out all the in-between colors to make the change smooth."
+
+---
+
+### Part 3: Applying the Animation with the animation Property
+
+- **The First Principle:** A storyboard needs an element to apply it to.
+- **The Core Problem:** How do we tell our <div> to use the sunset-effect storyboard, and how long should it take?
+- **The Solution:** The animation property (and its individual parts).
+- **Building it up Step-by-Step:** code Html code CSS
+
+
+    ```css
+    <div class="sky"></div>
+    ```
+
+    ```css
+    /* Don't forget to include the @keyframes rule from above! */
+
+    .sky {
+      height: 200px;
+      width: 200px;
+      background-color: #87CEEB; /* The starting color */
+
+      /* --- Let's give our director the instructions --- */
+
+      /* 1. Which storyboard to use? (Required) */
+      animation-name: sunset-effect;
+
+      /* 2. How long should the animation take? (Required) */
+      animation-duration: 5s; /* 5 seconds */
+    }
+    ```
+
+    - **Result (Live Demo):** When the page loads, the box will start as sky blue and smoothly change to orange-red over 5 seconds. But then it stops.
+
+---
+
+### Part 4: Controlling the Animation's Repetition
+
+- **The Problem:** The animation only plays once. How do we make it loop or go back and forth?
+- **The Solution:** Introduce two new "director's instructions."
+    1. **animation-iteration-count (How Many Times?):**
+        - Controls how many times the animation repeats.
+        - **infinite**: The keyword for a loop that never ends.
+
+        ```css
+        .sky {
+          /* ... other animation properties ... */
+          animation-iteration-count: infinite;
+        }
+        ```
+
+        - **Result:** The box will animate from blue to orange, then instantly **snap back** to blue and start over, forever. This snap is jarring.
+    2. **animation-direction (How to Loop Smoothly?):**
+        - **The Problem:** The "snap back" at the end of the loop doesn't look like a real sunset and sunrise. We need it to animate backwards smoothly.
+        - **The Solution:** The alternate value.
+        - **alternate**: This tells the animation to play forwards (from -> to) on the first run, then backwards (to -> from) on the second run, and so on.
+        - **Example:** code CSS
+
+            ```css
+            .sky {
+              /* ... other animation properties ... */
+              animation-iteration-count: infinite;
+              animation-direction: alternate;
+            }
+            ```
+
+        - **Result:** A perfect day/night cycle. The box will smoothly animate from blue to orange (the sunset), and then smoothly back from orange to blue (the sunrise), forever.
+
+---
+
+### Part 5: Animating Size - A Practical "Progress Bar" Project
+
+*This project introduces animating a different property, width, and the concept of what happens after an animation ends.*
+
+- **The Goal:** Create a bar that fills up from left to right, once.
+- **HTML:** A container <div> and a fill <div>. code Html
+
+
+    ```css
+    <div class="progress-container">
+      <div class="progress-fill"></div>
+    </div>
+    ```
+
+- **The CSS Storyboard:** code CSS
+
+
+    ```css
+    @keyframes fill-the-bar {
+      from {
+        width: 0%;
+      }
+      to {
+        width: 100%;
+      }
+    }
+    ```
+
+- **The CSS Director's Instructions:** code CSS
+
+
+    ```css
+    .progress-fill {
+      height: 30px;
+      background-color: #4CAF50; /* Green */
+      width: 0; /* Important: It starts at 0 width */
+
+      animation-name: fill-the-bar;
+      animation-duration: 4s;
+
+      /* What happens when it's done? */
+      animation-fill-mode: forwards;
+    }
+    ```
+
+- **Introducing animation-fill-mode:**
+    - **The Problem:** By default, once our 4-second animation is over, the .progress-fill element will snap back to its original style (width: 0;). The bar would fill up and then instantly become empty again.
+    - **The Solution:** animation-fill-mode: forwards;. This is a crucial instruction that tells the browser: "After the animation is finished, **keep the styles from the final (to) keyframe**."
+    - **Result:** The progress bar animates from 0% to 100% width and then **stays full**.
+
+<table>
+    <thead>
+        <tr>
+            <th>fill-mode</th>
+            <th>Behavior During delay</th>
+            <th>Behavior After Animation Ends</th>
+            <th>Use Case</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>none (Default)</td>
+            <td>Shows element's resting style.</td>
+            <td>Reverts to element's resting style.</td>
+            <td>Simple looping animations where the start/end states match.</td>
+        </tr>
+        <tr>
+            <td>forwards</td>
+            <td>Shows element's resting style.</td>
+            <td>Retains the last keyframe's style.</td>
+            <td>Animations that need to "stick" in their final state (e.g., a fade-out).</td>
+        </tr>
+        <tr>
+            <td>backwards</td>
+            <td>Applies the first keyframe's style.</td>
+            <td>Reverts to element's resting style.</td>
+            <td>Animations with a delay that need a specific starting state (e.g., a fade-in).</td>
+        </tr>
+        <tr>
+            <td>both</td>
+            <td>Applies the first keyframe's style.</td>
+            <td>Retains the last keyframe's style.</td>
+            <td>The "all-in-one" solution for delayed, one-shot animation</td>
+        </tr>
+    </tbody>
+</table>
+
+

02CSS/Day08/notes/notes.md

@@ -0,0 +1,140 @@
+# Lecture 08: CSS Transition and transformation
+
+- [Lecture 08: CSS Transition and transformation](#lecture-08-css-transition-and-transformation)
+    - [Part 1 - The transform Property - The Change](#part-1---thetransformproperty---the-change)
+    - [Part 2 - The transition Property - The Smoothness](#part-2---thetransitionproperty---the-smoothness)
+    - [Part 3 - Practical Example - The Interactive "Lifting Card"](#part-3---practical-example---the-interactive-lifting-card)
+
+### Part 1 - The transform Property - The Change
+
+- **First Principle:** We need a way to visually alter an element (move, resize, rotate) **without** disrupting the layout of the elements around it.
+- **Analogy:** Using margin to move an element is like shoving someone in a crowded line—everyone else has to shift. Using transform is like that person levitating up and moving—no one else in the line is affected. It's much smoother and more efficient for the browser.
+
+The transform property applies a function to an element *after* the page layout is calculated.
+
+**The 4 Core Transform Functions:**
+
+**1. translate() - To Move**
+
+Moves an element along the X (horizontal) and/or Y (vertical) axis.
+
+- **transform: translateX(50px);** // Moves 50px to the right.
+- **transform: translateY(-20px);** // Moves 20px up.
+- **transform: translate(50px, -20px);** // Moves 50px right AND 20px up.
+
+**2. scale() - To Resize**
+
+Makes an element larger or smaller from its center point.
+
+- **transform: scale(1.2);** // Makes the element 20% larger.
+- **transform: scale(0.9);** // Makes the element 10% smaller.
+
+**3. rotate() - To Turn**
+
+Rotates an element around its center point.
+
+- **transform: rotate(45deg);** // Rotates 45 degrees clockwise.
+- **transform: rotate(-10deg);** // Rotates 10 degrees counter-clockwise.
+
+**4. skew() - To Distort**
+
+Slants an element along an axis.
+
+- **transform: skewX(15deg);** // Slants horizontally.
+
+**Combining Transforms:** You can apply multiple functions in one line. The order matters!
+
+transform: translateX(50px) rotate(10deg) scale(1.2);
+
+---
+
+### Part 2 - The transition Property - The Smoothness
+
+- **First Principle:** Changes on a webpage should feel natural, not instant. A door swings open; it doesn't teleport. A transition is what makes a change in style happen smoothly over time.
+- **The Core Problem:** When you use a pseudo-class like :hover to change a style, the change is instant and jarring.
+
+    ```css
+    .button:hover { background-color: red; } /* Instantly snaps to red */
+    ```
+
+- **The Solution:** The transition property. You apply it to the **base element** (not the :hover state). It tells the browser to "watch" for changes and animate them smoothly.
+
+**The Anatomy of a transition:**
+
+The transition property is a shorthand for four sub-properties. The syntax is:
+
+transition: property duration timing-function delay;
+
+**1. transition-property (What to Animate)**
+
+The CSS property you want to animate.
+
+- **background-color**: Animates only the background color.
+- **transform**: Animates only the transform.
+- **all**: (Most common) Animates any property that changes.
+
+**2. transition-duration (How Long)**
+
+The time the animation should take.
+
+- **0.3s** (0.3 seconds) or **300ms** (300 milliseconds). Values between 0.2s and 0.5s feel the most natural for UI interactions.
+
+**3. transition-timing-function (The Pacing)**
+
+The "speed curve" of the animation.
+
+- **ease**: (Default) Starts slow, speeds up, ends slow. Feels natural.
+- **linear**: A constant, robotic speed.
+- **ease-in-out**: A slightly more pronounced version of ease. A very popular choice.
+
+**4. transition-delay (When to Start)**
+
+An optional delay before the transition begins (e.g., 1s).
+
+---
+
+### Part 3 - Practical Example - The Interactive "Lifting Card"
+
+This project combines everything we've learned to create a professional UI effect.
+
+- **The Goal:** Create a card that smoothly "lifts" and grows when the user hovers over it.
+
+```html
+<div class="card">
+    <h3>Hover Over Me</h3>
+    <p>See the smooth transition and transform effect.</p>
+</div>
+```
+
+- 
+
+    ```css
+    .card {
+      width: 250px;
+      padding: 20px;
+      background-color: white;
+      border-radius: 8px;
+      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+
+      /*
+       * STEP 1: Add the transition instruction to the BASE state.
+       * We're telling it to watch the 'transform' and 'box-shadow' properties
+       * and animate any changes over 0.3 seconds.
+      */
+      transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+    }
+
+    /*
+     * STEP 2: Define the 'hover' state.
+     * This is what we want the card to look like when the user's mouse is over it.
+    */
+    .card:hover {
+      /* Lifts the card up by 10 pixels */
+      transform: translateY(-10px);
+
+      /* Make the shadow larger and softer to enhance the "lifted" effect */
+      box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+    }
+    ```
+
+- **How it Works:** When you hover, the browser sees the new transform and box-shadow styles in the :hover rule. Because the base .card rule has a transition property watching them, the browser doesn't snap to the new styles. Instead, it creates a smooth, 0.3-second animation to the new state. When you move the mouse away, it does the same thing in reverse.

03JS/Day09/index.js

@@ -130,8 +130,8 @@
 
 // function meet(callback){
 //     console.log("I am going to meet someone");
-//     // dance(); hardcode (Reusable)
-//     // code hota jisko marta
+    // dance(); hardcode (Reusable)
+    // code hota jisko marta
 //     callback();
 //     console.log("I have finished meeting");
 // }