yogeshtakeo commented 1 year ago

Clock in JS

Objective

The objective of this exercise is to assess the participants' understanding and proficiency in using the useEffect hook in a React application.

Task Description

You are tasked with creating a simple clock component that displays the current time and updates every second.

Instructions

Create a new React component named Clock.
Inside the Clock component, import the useEffect and useState hooks from the React library.
Use the useState hook to create a state variable named currentTime and initialize it with a default value of the current time.
Display the currentTime value in the component's JSX.
Use the useEffect hook to set up an interval that updates the currentTime every second.
Within the useEffect hook, create a cleanup function that clears the interval when the component is unmounted.
Customize the styling of the component using CSS or a CSS-in-JS solution of your choice.
Test the Clock component by rendering it and verifying that it displays the current time and updates every second.

Additional Requirements

The currentTime value should be formatted as a human-readable time, such as "HH:MM:SS".

Git and GitHub

Create a new GitHub repository for this exercise.
Push your project to the GitHub repository.
Take screenshots of the code in your Clock.js file and the rendered component.
Go to the GitHub repository's issues section and create a new issue.
In the issue's comment section, upload the screenshots of your code and the rendered component.
Include the GitHub repository URL in the comment as well.

Submission

Share the screenshots of your code and the rendered component in the issue's comment section of your GitHub repository. Make sure to include the GitHub repository URL in the comment.

Note: Feel free to use any additional JavaScript or CSS features or syntax to enhance your solution. Provide comments where necessary to explain your code.