Find Jobs
Hire Freelancers

React, Flexbox

$10-30 USD

Completed
Posted about 4 years ago

$10-30 USD

Paid on delivery
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.
Project ID: 23455930

About the project

4 proposals
Remote project
Active 4 yrs ago

Looking to make some money?

Benefits of bidding on Freelancer

Set your budget and timeframe
Get paid for your work
Outline your proposal
It's free to sign up and bid on jobs
Awarded to:
User Avatar
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 working with Javascript and it's libraries (React/Angular/jQuery) for 4+ years. So I might be the best fit for the job You can check my profile and reviews.
$30 USD in 2 days
5.0 (17 reviews)
4.9
4.9
4 freelancers are bidding on average $29 USD for this job
User Avatar
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 / 2 / 4 / 5 / 6 / 7 / 8, ReactJS - Redux, Jquery),VUE.js,ASP.NET. - CSS, CSS3, Twitter Bootstrap, Less, Sass, Scss, Responsive, Material. - Mobile apps: React Native,Ionic, Swift, ObjectiveC. - Page speed optimize *Backend Skills: - Python (Django), ROR, PHP (Framework: CAKEPHP, Yii, Laravel, Ci), Node.js, C#. - MVC, OOP, CURL, MongoDB, Postgres, MySQL, Rest APIs. *Other skills: - Git, Heroku, SVN, Bitbucket, HG, Linux, Mac - Vagrant, VirtualBox, Gulp, Grunt - AMZ S3, AWS EC2 FREE support after delivery up to 4-6 weeks4 years experience in Reactjs / Redux / Angular / Nodejs / PHP / Django / Backned - Frontend development!
$35 USD in 5 days
4.8 (28 reviews)
4.6
4.6
User Avatar
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 using Axios and lifecycle hocks. I'm also expert in CSS3, SASS so I can manipulate very good flexbox design for your Requirements: 1- never direct DOM manipulation or using jquery because it's bad for performance so better using setState. 2- the project will be well-done structure components. 3- saving data it will be in the state of react component for your tips: using bind when declaring a function or using ES6 arrow function => to avoid referring to the global object. kindly check my portfolio and see an example of React App. greetings, Khalid.
$20 USD in 1 day
5.0 (1 review)
2.0
2.0
User Avatar
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 for? and what should the third button say after it appears? message me to talk more about it, and I'll gladly make it work for you, I'm hard working and I take the job serious.
$30 USD in 2 days
4.9 (2 reviews)
1.0
1.0

About the client

Flag of SWEDEN
Kristianstad, Sweden
4.9
5
Payment method verified
Member since Dec 13, 2019

Client Verification

Thanks! We’ve emailed you a link to claim your free credit.
Something went wrong while sending your email. Please try again.
Registered Users Total Jobs Posted
Freelancer ® is a registered Trademark of Freelancer Technology Pty Limited (ACN 142 189 759)
Copyright © 2024 Freelancer Technology Pty Limited (ACN 142 189 759)
Loading preview
Permission granted for Geolocation.
Your login session has expired and you have been logged out. Please log in again.