Completed

React, Flexbox

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.

Specifications

● 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

repository’s description returned by the request with the javascript “alert” function.

● 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

performance reasons.

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

otherwise have.

● 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.

Requirements

● 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.

Tips

● 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.

Skills: Javascript, CSS, HTML, React.js Framework

See more: react-flexbox-grid github, can t resolve react flexbox grid, react flexbox grid styled components, react native flexbox, how to use flex in react js, react layout, react flexbox layout, react native grid, html input box char count, count word input coldfusion, count numbers input text area, limit word count javascript input box, find count part outsource input data, mips string count words input, phpmyadmin import csv invalid field count csv input, reset tweet count, reset twitter count, reset twitter tweet count, count reset javascript, reset page count canon lbp 3300

About the Employer:
( 1 review ) Kristianstad, Sweden

Project ID: #23455930

Awarded to:

debojyotidev

Hello sir. I can do it in no time by maintaining all react standards and best practices. Everything will be done according to the doc. I will add a simple and minimalistic design with css3 flexbox. I have been workin More

$30 USD in 2 days
(4 Reviews)
3.0

5 freelancers are bidding on average $43 for this job

vaibhavAP

5 years experience in Reactjs / Redux / Angular /Vue / Nodejs / ASP.NET / PHP / Django / Backned - Frontend development! All of our programming skills: *Front-end: - HTML, HTML5, JSON. - JAVASCRIPT (Ajax, AngularJS More

$35 USD in 5 days
(24 Reviews)
4.5
mtroz310

Dear, Client. My recent project: [login to view URL] (Node/Express + React + Redux + Firebase storage/store + MongoDB) My potofolio: [login to view URL] My portofolio: htt More

$100 USD in 1 day
(1 Review)
0.0
RawanAlrajabi

Hi there, I've read your job description and I know I'm new here but I Know I can do this, my last 2 projects were in react and one of them was focused on flexbox. you also got me curious to why are you using this fo More

$30 USD in 2 days
(0 Reviews)
0.0
MohamedKhaled98

hi there, I have very good experience in React and its core principles, JS6 and OOP I can implement your component with best practice and code design and really high components structure I will implement your counter u More

$20 USD in 1 day
(0 Reviews)
0.0