I want you to code a simple counter between 0 and 10 which can be decreased
with one button and increased by another and the counter should be styled with CSS. Flexbox should be used at some point to evenly distribute elements in a row or column. There obviously also needs to be a point of using the Flexbox, i.e. adding the attribute should make a visible difference.
● After the App component is loaded into the DOM, it should make an axios HTTP GET
request to the Github repository styled-components with
“[login to view URL]” and display the
● When the counter is at 0, the decrease button should be disabled. Same goes for the
increase button when the counter is at 10.
● When the counter is at 3, another button should appear. After this new button is
clicked, a checkbox should appear. The checkbox should be present for all counter
values, except for 10. It should also not re-render if its props remain the same for
Tip: You can make a [login to view URL] call in the checkbox’s render function to see
if it re-renders when its parent re-renders
● When the checkbox is removed from the DOM, the counter should be reset to 0 if the
checkbox was checked.
● When the counter is at 5, all buttons should have a different text color than they
● After the counter has increased from 6 to 7 (i.e. not from 8 to 7), it should be set to 9
if the checkbox is visible and 8 if it isn’t. You should then call the window’s alert
function saying “I was 6 and now I am [NEW COUNT]”, e.g “I was 6 and now I am 9”
if the checkbox is visible. This needs to be done by injecting the new count into the
string “I was 6 and now I am “, i.e. you can not write to separate versions of the string
depending on the new count.
● No direct DOM manipulation is allowed, e.g. with jQuery or
[login to view URL]
● You are not allowed to add anything other than the root-div (<div id="root"></div>) to
the HTML box.
● You are not allowed to store data in the window’s local/session storage, since that is
not the React “way”. All data needs to come from a state or props.
● Remember to bind any callback functions you pass down as props.
● Think about if you want to use a class or function component for any children to App.
● Think scalability. How many button components do you really need?
● Since you need to access the checked value of the checkbox at some point, it is
advisable for you to make the checkbox a controlled input component.