Hey Developers! 👋 I hope you enjoy this little project.

FYI: useState helps us to re-render the web page. You can learn more here w3schools

1. Install Vite + give your project a name (Javascript Sucks!) and choose React/typescript

npm create vite@latest

2. Install Chakra UI

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

3. Set up a Javascript Sucks! component function

import { Heading } from '@chakra-ui/react'

const JavascriptSucks = () => {

  return <Heading>Javascript Sucks!</Heading>
}

export default JavascriptSucks

4. Set up some logic and pass it into the heading

import { Heading } from '@chakra-ui/react'

const JavascriptSucks = () => {
  let title = "Javascript Sucks!"

  return <Heading>{title}</Heading>
}

export default JavascriptSucks

5. Setup button

import { Button, Heading } from '@chakra-ui/react'

const JavascriptSucks = () => {
  let title = "Javascript Sucks!"

  return (
    <>
    <Heading size='lg' fontSize='50px'>{title}</Heading>
    <Button>
    oh no you didnt!
    </Button>
  </>
  )
}

export default JavascriptSucks

6. Add the onClick event to the button

import { Button, Heading } from '@chakra-ui/react'

const JavascriptSucks = () => {
  let title = "Javascript Sucks!"

  return (
    <>
    <Heading size='lg' fontSize='50px'>{title}</Heading>
    <Button onClick={handleClick}>
    oh no, you didn't!
    </Button>
  </>
  )
}

export default JavascriptSucks

7. Add handleClick function

import { Button, Heading } from '@chakra-ui/react'

const JavascriptSucks = () => {
  let title = "Javascript Sucks!"
  const handleClick = () => {
     title = "Hell no! JS is the bee's knees!"
     console.log(title)
  };

  return (
    <>
    <Heading size='lg' fontSize='50px'>{title}</Heading>
    <Button onClick={handleClick}>
    oh no you didnt!
    </Button>
  </>
  )
}

export default JavascriptSucks

8. Setup useState

import { Button, Heading } from '@chakra-ui/react'
import React, {useState} from 'react';

const JavascriptSucks = () => {
  const [js, setJs] = useState("Javascript Sucks!");
  const handleClick = () => {
     setJs("Hell no! JS is the bee's knees!")
     console.log(js)
  };

  return (
    <>
    <Heading size='lg' fontSize='50px'>{js}</Heading>
    <Button onClick={handleClick}>
    oh no, you didn't!
    </Button>
  </>
  )
}

export default JavascriptSucks

9. Set up toggle

import { Button, Heading } from '@chakra-ui/react'
import React, {useState} from 'react';

const JavascriptSucks = () => {
  const [js, setJs] = useState("Javascript Sucks!");
  const handleClick = () => {
    if (js === 'Javascript Sucks!') {
     setJs("Hell no! JS is the bee's knees!")
    } else {
      setJs ('Javascript Sucks!')
    }

  };

  return (
    <>
    <Heading size='lg' fontSize='50px'>{js}</Heading>
    <Button onClick={handleClick}>
    oh no you didnt!
    </Button>
  </>
  )
}

export default JavascriptSucks