Tell us what’s happening:
I can’t pass these tests despite apparently working in the Preview:
2. You should use the useState hook.
5. You should pass #ffffff as the initial value to your useState call.
14. When your #color-input value is changed, your #color-picker-container should change its background color to reflect that value.
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 [color, setColor] = useState('#ffffff');
function handlePickColor(e) {
setColor(e.target.value);
}
return (
<div id="color-picker-container" style={{ backgroundColor: color }}>
<input
id="color-input"
type="color"
value={color}
color={color}
onChange={handlePickColor}
/>
</div>
);
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:143.0) Gecko/20100101 Firefox/143.0
Challenge Information:
Build a Color Picker App - Build a Color Picker App
https://www.freecodecamp.org/learn/full-stack-developer/lab-color-picker/build-a-color-picker-app