Giter Club home page Giter Club logo

coding-task-react's Introduction

React.js Counter Task

Welcome to the React.js Counter Task! This task involves implementing a counter functionality in a React.js project. You will need to clone the project, update specific files, and push your code back to your own repository.

Task Overview

Your task is to implement the following functionality in the existing React.js project:

  1. Increment/Decrement Button Logic: Implement logic to increase or decrease the count by 1 on button click.
  2. Custom Amount Addition: Add an input box where users can enter any amount. Implement functionality so that when the "Add Amount" button is clicked, the count gets increased by the entered amount.
  3. Conditional Increase: Implement a feature to only increase the count by the amount entered in the input box when the current count value is odd.

Getting Started

  1. Clone the Repository: First, you need to clone the repository to your local machine.

    git clone [repository-url]
  2. Navigate to the Project Directory:

    cd [project-directory]
  3. Install Dependencies:

    npm install

    or if you're using yarn:

    yarn install

Files to Update

You will need to make changes in the following files. Look for comments in each file for specific instructions:

  • counterSlice.ts: Update the Redux slice to handle the new actions.
  • thunks.ts: Implement count conditional update[if odd] logic here.
  • Counter.tsx: Update the React component to implement the new UI and logic.

Requirements

  • Correctly implement all the functionalities as described above.
  • Ensure that you add proper types to your code (TypeScript).
  • Write clean and readable code with proper comments.
  • Make sure the application compiles and runs without errors.

Submission

Once you have implemented the required functionality:

  1. Commit your changes with a meaningful commit message.

    git commit -m "Implement counter functionality"
  2. Push your changes to your own repository.

    git push origin [your-branch-name]
  3. Submit the repo url to [email protected] and cc [email protected] and [email protected]

Evaluation Criteria

  • Correct implementation of the functionalities.
  • Code quality and adherence to standard coding practices.
  • Use of TypeScript for type safety.
  • Creativity and problem-solving skills.

Extra Points

  • Extra points will be awarded for adding additional useful features or UI enhancements beyond the basic requirements.
  • Clean code and proper usage of Git (e.g., meaningful commit messages) will also be considered for extra points.

Good luck with your task!

coding-task-react's People

Contributors

pankajyadav05 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.