Build a Color Picker App - Build a Color Picker App

Curriculum Help
1

Tell us what’s happening:

I cannot pass task 14 and the background color of the div element is not changing.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Color Picker</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.5/babel.min.js"></script>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      src="index.jsx"
    ></script>
</head>

<body>
    <div id="root"></div>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      data-presets="react"
      data-type="module"
    >
      import { ColorPicker } from './index.jsx';
      ReactDOM.createRoot(document.getElementById('root')).render(<ColorPicker />);
    </script>
</body>

</html>

/* file: styles.css */
body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
}

#color-picker-container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #ffffff;
}

input[type="color"] {
    position: absolute;
    margin-top: 50px;
    height: 40px;
}

/* file: index.jsx */
const { useState } = React;

export const ColorPicker = () => {
  const inputEl = document.getElementById("color-input")
  const divEl = document.getElementById("color-picker-container")
  const [isColor, setIsColor] = useState("#ffffff")

  const handleColorChange = () => {
    setIsColor(
      isColor = inputEl.value
    )
  }
  return(
<div id="color-picker-container" style={{backgroundColor: {isColor}}}>
<input id="color-input" type="color" onChange={handleColorChange} value={isColor}/>
</div>
  )
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/152.0.0.0 Safari/537.36

Challenge Information:

Build a Color Picker App - Build a Color Picker App

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-color-picker/67bf4350777ac6ffdc027745.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Hi @Emmysifire,

Is this the way a setter function works in React?

Since the input’s change event is triggering the handler that calls the setter function, what object can you pass in to find the color change? Maybe review the theory lectures for examples.

Happy coding

3

No. I didn’t know mutation is a crime in react :joy: