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)