Practices - Day1.Expanding cards
Tags: 50projects50days, css, javascript, programming
Published: 2022-05-24 03:21:52

## CSS

1. `background-image`: background-image: url('relative or absolute url path');
2. `@import vs <link>`:

- `@import` - It is CSS mechanism to include a style sheet. You can use it when you want to hide styles from older browsers, because `@import` can't be recognized by them. You can use it when you want to import style sheets into linked style sheets, in other words, you can use it in the css files that you linked in HTML file.
- `<link>` - It is the HTML mechanism. `<link>` is often more preferred over `@import`. It provides many useful attributes like rel, you can use rel to choose alternate stylesheet, rel="alternate stylesheet"

3. `box-sizing`

- `content-box`: This gives you the default CSS box-sizing behavior. If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px. width&height = content
- `border-box`: It tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements. width&height = border + padding + content
  So when we write css, we often set all elements box-sizing property to be border-box to avoid strange behaviors.
  ```css
  * {
    box-sizing: border-box;
  }
  ```

4. `Flexbox`: It is a one-dimensional layout method for arranging items in rows or columns. Items flex to fill additional space or shrink to fit into smaller spaces. Set `display: flex` property and value to the container element then it will act as a flexbox. The elements inside the container(flexbox) are called flexbox items.

5. `align-items: center & justify-content: center`:

- `align-items`: It defines how flexbox items are aligned according to the <b>cross axis</b>.
  - `align-items: center`: Set it to the containter element then the flexbox items are aligned at the center of the cross axis. By default, the cross axis is vertical. This means the flexbox items will be centered vertically.
- `justify-content`: It defines how flexbox items are aligned according to the <b>main axis</b>.
  - `justify-content: center`: Set it to the container element then the flexbox items are aligned at the center of the main axis.

6. `vh & vw`: Both of them are relative css units. `vh` means relative to 1% of the height of the viewport, `vw` means relative to 1% of the width of the viewport. Viewport = the browser window size. If the viewport is 50cm wide, 1vw = (1% \* 50) cm = 0.5cm.

7. `overflow`: It defines how overflowing content on both horizontal and vertical axis is displayed.

- `overflow: visible`: The overflowing content is <b>visible</b>, while the element itself stays at the specified height.

* `overflow: hidden`: The overflowing content is <b>hidden</b> and can not be accessed.

* `overflow: scroll`: The overflowing content is accessible thanks to a <b>vertical scrollbar</b>.

* `overflow: auto`: The browser decides whether to display a vertical scrollbar or not.

8. `background-size: cover`: The keyword `cover` will resize the background image to make sure the element is <b>fully covered</b>.

9. `border-radius`: It defines the <b>radius</b> of the element's corners.

10. `cursor: pointer`: It sets the mouse cursor to pointer when hovering the element.

11. `transition`: Shorthand property for `transition-property` `transition-duration` `transition-timing-function` and `transition-delay`. Only transition-duration is <b>required</b>.

12. `@media`: The `@media` rule is used in media queries to apply different styles for different media types/devices. For example,

    ```css
    @media (max-width: 480px) {
      .container {
        width: 100vw;
      }
      .panel: nth-of-type(4),
        .panel: nth-of-type(5) {
        display: none;
      }
    }
    ```

## JavaScript

1. `Document.querySelectorAll()`: The `Document` method `querySelectorAll()` returns a static `NodeList` representing a list of the document's elements that match the specified group of selectors. For example,

   ```js
   const panels = document.querySelectorAll(".panel");
   ```

2. `Array.prototype.forEach()`: The `forEach()` method executes a provided function once for each array element. Syntax: forEach((element) => {function})

3. `EventTarget.addEventListener()`: The `addEventListener()` method of the `EventTarget` interface sets up a function that will be called whenever the specified event is delivered to the target.

4. `Element.classList`: The `Element.classList` is a read-only property that returns a live `DOMTokenList` collection of the `class` attributes of the element. This can then be used to manipulate the class list.

5. `DOMTokenList`: The `DOMTokenList` interface represents a set of space-separated tokens. Such a set is returned by `Element.classList` and many others.

6. `DOMTokenList.add()`: The `add()` method of the `DOMTokenList` interface adds the given tokens to the list, omitting any that are already present.

7. `DOMTokenList.remove()`: The `remove()` method of the `DOMTokenList` interface removes the specified tokens from the list.

Code in: [Github](https://github.com/lechang-zhang/50projects50days/tree/master/Day1.Expanding-cards/Solution)