Solve | ||||||
|---|---|---|---|---|---|---|
infinite-autoplay-slider | Infinite Autoplay Slider | As seen on the TailwindCSS website, create a horizontal grid of moving cards that loop infinitely. When hovered over, the cards slow down and are clickable. | MEDIUM | react | PUBLISHED | |
local-storage-custom-hook | Local Storage Custom Hook | Implement a custom hook to get and set values from and to Local Storage. A custom hook is a way (or rather a mechanism) to reuse stateful logic. State and effects inside a custom hook are completely isolated. | EASY | react | PUBLISHED | |
countries-list-with-debounce | Countries List With Debounce | Debouncing is a method of preventing a function from being invoked too often, and instead of waiting a certain amount of time until it was last called before invoking it. A great example of where this is useful is an auto-completing input field that calls an API with the partial input to get a list of possible complete inputs. | EASY | react | PUBLISHED | |
toasts-and-notifications | Toasts And Notifications | Toasts are the small little notification messages that popup on front-end applications to notify the user of some current actions that have happened. Toasts are essential and help in notifying the user of success and error events primarily. In this task, you are required to code a custom Toast component. | MEDIUM | react | PUBLISHED | |
transfer-list | Transfer List | Given a list of checkbox items, transfer checked items from one container to the other. | MEDIUM | react | PUBLISHED | |
feedback-stars | Feedback Stars | Create a feedback rating component that takes in a number of stars and outputs the corresponding star SVGs on the output window. When the user clicks on any of the stars, that stars till that point are highlighted (filled). Once the user hovers over the stars, the stars till that point are highlighted - but not persisted until the user clicks on the star. | MEDIUM | react | PUBLISHED | |
multiple-filters | Multiple Filters | Given a list of products and a list of filters, create a multi-filters buttons bar with a list of filters. If any of the filter is clicked, the list of products should change and reflect the appropriate products. | EASY | react | PUBLISHED | |
countdown-timer | Countdown Timer | A countdown timer has hours, minutes and seconds that count down to 0 when started. In this problem, you are required to create a Countdown component that takes in an input of minutes, that when started, counts down to zero and prints the countdown on the screen. | HARD | react | PUBLISHED | |
todo-list | Todo List | Add new tasks on clicking the "Submit" button. Remove tasks from the Todo List upon clicking the "Delete" button. | MEDIUM | react | PUBLISHED | |
digital-clock | Digital Clock | Create a widget that renders the current time in HH:MM:SS format using a 7-segment digital display. You are free to choose to use 12-hour or a 24-hour display. | MEDIUM | react | ARCHIVED | |
traffic-light | Traffic Light | Build a traffic light where the lights switch from green to yellow to red after predetermined intervals and loop indefinitely. Each light should be lit for the following durations | MEDIUM | react | ARCHIVED | |
tabs | Tabs | Build a tabs component that displays one panel of content at a time depending on the active tab element. Some HTML is provided for you as example contents. | MEDIUM | react | ARCHIVED | |
job-board | Job Board | Build a job board that displays the latest job postings fetched from the Hacker News API, with each posting displaying the job title, poster, and date posted. | MEDIUM | react | ARCHIVED |
Rows per page