Thursday, December 28, 2023
Wednesday, October 25, 2023
Basic setup of react router
1st react router setup
npm create
vite@latest name-of-your-project -- --template react
npm install
react-router-dom localforage match-sorter sort-by
2nd
tailwind setup
npm install
-D tailwindcss postcss autoprefixer
npx
tailwindcss init -p
3rd
daisy ui
npm i -D daisyui@latest
4th
open code .
5th
add tailwind extra settings
Go to tailwind.config.js
and add this code
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
2nd
index.css add this code
@tailwind
base;
@tailwind
components;
@tailwind
utilities;
6th:
daisy ui extra settings
Go to tailwind.config.js
and add this code
7th:
fix that plugins: [require("daisyui")],
Go to .eslintrc.cjs
file and add
8th
routers setup
Sunday, August 6, 2023
Array.prototype
1. Array.prototype.includes()
The includes() the method determines whether an array includes a certain value among its entries, returning true or false as appropriate.
2. Array.prototype.indexOf()
The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.
3. Array.isArray()
The Array.isArray() static method determines whether the passed value is an Array.
Saturday, July 29, 2023
Friday, July 21, 2023
Wednesday, July 19, 2023
CSS case
1. If you make one block element style margin: 100%; that will take the full width. But if we add any border or any other spacing that will make a horizontal scrolling.
CSS Specificity
| Selector | Specificity Value | Calculation |
|---|---|---|
| p | 1 | 1 |
| p.test | 11 | 1 + 10 |
| p#demo | 101 | 1 + 100 |
| <p style="color: pink;"> | 1000 | 1000 |
| #demo | 100 | 100 |
| .test | 10 | 10 |
| p.test1.test2 | 21 | 1 + 10 + 10 |
| #navbar p#demo | 201 | 100 + 1 + 100 |
| * | 0 | 0 (the universal selector is ignored) |
Tuesday, July 18, 2023
Width and flex
- Width:
- auto
- 100%
- max-content
- min-content
- fit-content
- vw
- row is the default value of flex-direction.
- start is the default value of justify-content.
- stretch is the default value of align-items. (y-axis full height will take).
- justify-content will work (x-axis or horizontal)
- align-items will work (y-axis or vertical)
- justify-content will work (y-axis or vertical)
- align-items will work (x-axis or horizontal)