Learn to Code Timer App Using Javascript and React

In this blog you will learn to code timer app using javascript and react.

Step 1: Setup React Project

  1. Install Node.js and npm (Node Package Manager) if you haven’t already.
  2. Open your command prompt or terminal and navigate to the desired directory for your project.
  3. Run the following command to create a new React project:
   npx create-react-app digital-watch

The command npx create-react-app digital-watch creates a new directory named digital-watch with the necessary project files and dependencies.

  1. Navigate into the project directory:
   cd digital-watch
  1. Open the project in your preferred code editor.

Step 2: Create the Watch Functional Component

  1. In the “src” directory, create a new file called “Watch.js”.
  2. Open “Watch.js” and add the following code:
import React, { useState, useEffect } from "react";
const Watch = () => {
  const [time, setTime] = useState(new Date());
  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date());
    }, 1000);
    return () => clearInterval(interval);
  }, []);
  return (
    <div className="watch">
      <h1>{time.toLocaleTimeString()}</h1>
    </div>
  );
};
export default Watch;
The Watch component is responsible for displaying the current time. It uses React hooks, specifically useState and useEffect, which are functions provided by React to manage state and handle side effects. The time state variable holds the current time, and setTime is a function to update the time state. The useEffect hook is used to run code when the component is mounted (first rendered) and when it is unmounted (removed from the screen). Inside the useEffect hook, an interval is set up using setInterval to update the time every second by calling setTime(new Date()). The Watch component renders the current time inside an <h1> element.

Step 3: In Index.js add the following code.

import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
createRoot(document.getElementById("root")).render(<App />);

In index.js file as you can see this renders the <App /> component in element with id root in index.html file

Step 4: Update App Component

  1. Open “App.js” in the “src” directory.
  2. Clear the existing code and replace it with the following code:
import React from "react";
import Watch from "./Watch";
import "./App.css";
const App = () => {
  return (
    <div className="app">
      <div className="website-url">
      <a href="https://codingissimple.com">Coding is Simple</a>
      </div>
      <Watch />
    </div>
  );
};
export default App;
  • The App component is the main component of the application. It imports the Watch component and a CSS file for styling. Inside the App component, there is a <div> element with the class website-url, which contains a link to a website. The Watch component is rendered below the website URL inside another <div> element.

Step 4: Style the Components

  1. Open “App.css” in the “src” directory.
  2. Add the following CSS code:
.website-url {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
}
.website-url a {
  color: rgb(18, 15, 210);
  text-decoration: none;
  font-weight: bold;
}
.website-url a:hover {
  color: #f00;
}
.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80vh;
  background-color: #f2f2f2;
}
.watch {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 100px;
  background-color: #333;
  color: #fff;
  font-family: "Arial", sans-serif;
  font-size: 0.8rem;
  border-radius: 10%; */
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
  overflow: hidden; /* Added line to hide overflowing content */
}
.watch h1 {
  margin: 0;
  padding: 0;
  width: 100%; /* Added line to ensure time takes full width */
  text-align: center; /* Added line to center the text horizontally */
}

The file structure for the timer application using Create React App would typically look like this:

digital-watch/
  ├── node_modules/
  ├── public/
  │   ├── index.html
  │   └── ...
  ├── src/
  │   ├── App.js
  │   ├── index.js
  │   ├── Watch.js
  │   ├── App.css
  │   └── ...
  ├── package.json
  ├── package-lock.json
  ├── README.md
  └── ...
  • node_modules/: This directory contains the dependencies (external libraries and packages) required by the project. It is created and managed by npm (Node Package Manager).
  • public/: This directory contains the static files that are publicly accessible, such as the HTML file(s) and other assets. The main HTML file is usually named index.html.
  • src/: This directory contains the source code of your application.
  • App.js: This file defines the main component of your application (App component). It typically acts as the container component that renders other components and manages the application’s state.
  • index.js: This file is the entry point of your React application. It renders the App component and mounts it into the HTML element with the id root in the public/index.html file.
  • Watch.js: This file contains the Watch component that displays the digital watch and handles the time-related logic.
  • App.css: This file contains CSS styles specific to the App component and its child components.
  • Other files: You may have other components, CSS files, or additional JavaScript files depending on your application’s complexity.
  • package.json and package-lock.json: These files store metadata about your project and manage the project’s dependencies.
  • README.md: This file typically contains documentation and instructions for running or setting up the project.

The file structure may vary depending on your specific project setup or if you organize your code differently. Delete the files src/App.css, src/App.test.js, src/logo.svg, and src/setupTests.js. You can delete all other files which we don’t require for this app .

Step 5: Run the Application

  1. In the command prompt or terminal, make sure you are in the root directory of your project (“digital-watch”).
  2. Run the following command to start the development server:
   npm start
  1. Open your web browser and visit http://localhost:3000 to see the timer in action.

You have now learned to code timer app using javascript and react ! The watch component updates every second to display the current time. Feel free to modify the styling or add additional features as per your requirements.

Don't Miss Out! Subscribe to Read Our Latest Blogs.

If you found this blog helpful, share it on social media.

Subscription form (#5)

Leave a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Scroll to Top