How to get the value of text input field using react
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import {useRef} from 'react'

export default function App() {

	const inputRef = useRef(''); //create ref for input value
	
	function handleSubmit(e){
	
		e.preventDefault()
		
		console.log(inputRef.current.value) //access value from input
		
		}
	
	return (
	
		<form onSubmit={handleSubmit}>
		
		{/* assign ref */}
		
		<input ref={inputRef}></input>
		
		<button type="submit">Do the thing</button>
		
		</form>
	
	);
}
How do you round to 1 decimal place in Javascript?

(a / b).toFixed(1)

CSS Tips

margin:auto centers the element (You can set the margin property to auto to horizontally center the element within its container.)
![[Pasted image 20220702174126.png]]

  • Content - The content of the box, where text and images appear
  • Padding - Clears an area around the content. The padding is transparent
  • Border - A border that goes around the padding and content
  • Margin - Clears an area outside the border. The margin is transparent

Use flexbox when needed.
https://www.w3schools.com/css/css3_flexbox.asp
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

1
2
3
background-repeat: no-repeat;
background-position: center;
background-size: cover;

adding image in jsx: try import image from "./xxx/image.jpg"

<div style={{ "text-align": "center" }}> to centre an, iframe at least
auto=1 and allow="autoplay" for iframe

Responsive: use auto/proportional unit and minimum/maximum baseline

Netlify build problem:

Generally, libraries that choose to fail on warnings presume their users will want to fix the issues causing the warnings. If this isn’t practical for your use case, you can override the CI variable by adding CI=’’ to the beginning of your site build command. For example:
CI='' npm run build

date-fns
1
2
3
4
5
6
7
8
9
10
11
const [time, setTime] = useState(new Date());
useEffect(
      () => {
        const intervalId = setInterval(() => {
          setTime(new Date());
        });
        return () => {
          clearInterval(intervalId)
        }
      }
    )

current time update👆
const dates = [new Date(2022, 6, 1)] set new date
const msg = format(time, 'yyyy年MM月dd日HH:mm:ss') format date

Get duration, then just do some division on the ms value

1
2
3
4
5
6
7
const getDaysBetweenDates = (dateOne, dateTwo) => {
      let differenceInMs = dateTwo.getTime() - dateOne.getTime()
      if (differenceInMs < 0) {
        differenceInMs = dateOne.getTime() - dateTwo.getTime()
      }
      return convertMsToDays(differenceInMs)
    }

![[Pasted image 20220702180415.png]]