Closed ana-nova closed 4 days ago
As a user,
I want to add a color to the theme,
So that I can customize my color scheme according to my preferences.
https://github.com/neuefische/web-react-recap-project/assets/93415777/d0a53ef8-6e31-4ad6-b3f3-560e2bc6b14e
ColorForm
ColorInput
https://github.com/ana-nova/color-theme-creator-app/pull/9
As a user,
I want to add a color to the theme,
So that I can customize my color scheme according to my preferences.
https://github.com/neuefische/web-react-recap-project/assets/93415777/d0a53ef8-6e31-4ad6-b3f3-560e2bc6b14e
Acceptance Criteria
Tasks
ColorForm
component that allows users to submit new colors to the theme.ColorInput
component to handle synchronized text and color inputs, ensuring that they reflect the same value. ( Controlled Inputs )Hints
Hint: ColorForm- Spoiler Alert! 🚨
`./Components/ColorForm/ColorForm.jsx` ```js import ColorInput from "../ColorInput/ColorInput"; import "./ColorForm.css"; export default function ColorForm({ onSubmitColor, initialData = { role: "some color", hex: "#123456", contrastText: "#ffffff" }, }) { function handleSubmit(event) { event.preventDefault(); const formData = new FormData(event.target); const data = Object.fromEntries(formData); onSubmitColor(data); } return ( ); } ```Hint: ColorInput - Spoiler Alert! 🚨
`./ColorInput/ColorInput` ```js import { useState } from "react"; export default function ColorInput({ id, defaultValue }) { const [inputValue, setInputValue] = useState(defaultValue); function handleInputValue(event) { setInputValue(event.target.value); } return ( <> > ); } ```