Skip to content
OverviewSolutions
4
Comments
5
Daniel
@dvenomb98

All comments

  • Galina Kostina•150
    @Galina1512Submitted about 2 years ago

    Hi all! I have a problem in this task. Please tell me how to make the button change color when clicked, and the previous one returned to its original state. I would be grateful for any comments and additions

    Time-tracking used JS,CSS, HTML, React

    1
    Daniel•120
    @dvenomb98Posted about 2 years ago

    To your question:

    Set state that you can pass to components.

    For example:

    const [selected, setSelected] = useState("day")

    then you change a style of a button based on selected state.

    I use tailwindCSS for simpler work but u can do it via style attribute.

    const buttons = [{value: "day", label: "Daily"}, {value: "week", label: "Weekly"}, {value: "month", label: "Monthly"}, ]

<div>
{buttons.map(({value, label}) => (

<button 
className={`${selected  === value ? "bg-red" : "bg-neutral"} text-3xl`}
onClick={() => setSelected(value)}>
{label}
</button>

))
</div>
    Marked as helpful
    0
  • Daniel•120
    @dvenomb98Posted about 2 years ago

    To your question: rework your solution so you use flex or grid layout with zero absolute positions. And let me know. I am 100% sure thats problem.

    Marked as helpful
    0
  • Daniel•120
    @dvenomb98Posted about 2 years ago

    Hi, nice work.. few suggestions:

    1/ Todos.js: line 148: could be just todos.length instead of todos.length > 0

    2/ TodoFilter.js: u could create list of buttons and map over instead of copying it every single time with different value.

    something like: const buttons = [{label: Active, value: active}]

    and then u could do something like: buttons.map(b => ( <p classNames={filterStatus === b.value ? "text-red" : "text-blue"} onClick={() => handleClick(b.value)}> {b.label} </p> ))`

    3/ zero needs to use absolute position in project like this. instead use flex or grid

    4/ You really dont need two different states for todos (todos and filtered todos). It is not efficient and doesnt really work like that. Instead try use some filter logic before mapping over to component props.

    U could do: todos.filter(todo => { if (!searchValue) return

    if (searchValue === todo.name) return todo }) .map(t => ( <Todo .{...props} /> )

    just quick example, but you shouldnt really use 2 different states.

    Marked as helpful
    0
  • Daniel•120
    @dvenomb98Posted almost 3 years ago

    What i did was that i created a new css style with other colors and with j query i switch between files, i think its faster solution. Nice work

    0
  • Daniel•120
    @dvenomb98Submitted almost 3 years ago

    Take 2 days, but finally done. Hoping for some feedback!

    I worked on every detail, however forgot to do delete button. Whatever. Nice challenge.

    TO DO APP using J-Query

    1
    Daniel•120
    @dvenomb98Posted almost 3 years ago

    UPDATE: I Added remove button and also did elements sortable. So now its fully complete :-) Hope you enjoy

    0