{"id":19196823,"url":"https://github.com/amulyamachhan/digital-clock","last_synced_at":"2026-04-19T06:40:42.207Z","repository":{"id":237575382,"uuid":"794792478","full_name":"AmulyaMachhan/Digital-Clock","owner":"AmulyaMachhan","description":"This project is a simple React application that displays a digital clock. The clock updates every second to show the current time in a 12-hour format with AM/PM indication.","archived":false,"fork":false,"pushed_at":"2024-07-07T13:19:42.000Z","size":1188,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-04T10:07:38.132Z","etag":null,"topics":["css","deployment","digital-clock","digital-clock-javascript","digitalcloc","html","javascript","react","react-deploy","reactjs"],"latest_commit_sha":null,"homepage":"https://amulyamachhan.github.io/Digital-Clock/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AmulyaMachhan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-02T00:52:36.000Z","updated_at":"2024-07-29T11:02:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"c90ae89b-4bb2-4932-917c-682cf7624552","html_url":"https://github.com/AmulyaMachhan/Digital-Clock","commit_stats":null,"previous_names":["amulyamachhan/digital-clock"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmulyaMachhan%2FDigital-Clock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmulyaMachhan%2FDigital-Clock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmulyaMachhan%2FDigital-Clock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmulyaMachhan%2FDigital-Clock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AmulyaMachhan","download_url":"https://codeload.github.com/AmulyaMachhan/Digital-Clock/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240271531,"owners_count":19774859,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","deployment","digital-clock","digital-clock-javascript","digitalcloc","html","javascript","react","react-deploy","reactjs"],"created_at":"2024-11-09T12:14:35.296Z","updated_at":"2026-04-19T06:40:42.164Z","avatar_url":"https://github.com/AmulyaMachhan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Digital Clock React Application\n\nThis project is a simple React application that displays a digital clock. The clock updates every second to show the current time in a 12-hour format with AM/PM indication.\n\nYou can view this site [here](https://amulyamachhan.github.io/Digital-Clock/).\n\n![amulyamachhan github io_Digital-Clock_ (1)](https://github.com/AmulyaMachhan/Digital-Clock/assets/111338400/ef6268a8-c469-4c79-bd60-ef995edd7dbb)\n\n## Features\n\n- Real-time digital clock that updates every second.\n- Displays time in a 12-hour format with AM/PM indication.\n- Aesthetic background image and custom font for a modern look.\n- Responsive design with centered clock display.\n\n## Getting Started\n\nThese instructions will help you set up and run the project on your local machine for development and testing purposes.\n\n### Prerequisites\n\n- Node.js\n- npm (Node Package Manager) or yarn\n\n### Installation\n\n1. Clone the repository:\n\n    ```bash\n    git clone https://github.com/your-username/digital-clock-react.git\n    cd digital-clock-react\n    ```\n\n2. Install the dependencies:\n\n    ```bash\n    npm install\n    ```\n\n    or\n\n    ```bash\n    yarn install\n    ```\n\n### Running the Application\n\nTo start the development server, run:\n\n```bash\nnpm start\n```\n\nOpen your browser and navigate to `http://localhost:3000` to see the application running.\n\n### Building for Production\n\nTo create a production build of the application, run:\n\n```bash\nnpm run build\n```\n\nThis will generate a `build` folder containing the optimized production-ready files.\n\n### Deployment\n\nTo deploy the application, you can use any static site hosting service like GitHub Pages, Vercel, Netlify, etc. Simply upload the contents of the `build` folder to your hosting service.\n\n## File Structure\n\n```plaintext\nmy-app/\n├── public/\n│   ├── images/\n│   │   └── background.jpg\n│   └── index.html\n├── src/\n│   ├── components/\n│   │   └── App.js\n│   └── App.css\n└── package.json\n```\n\n## Code Overview\n\n### `App.js`\n\n```javascript\nimport { useEffect, useState } from 'react';\nimport './App.css';\n\nfunction App() {\n  const [time, setTime] = useState(new Date());\n\n  useEffect(() =\u003e {\n    const intervalId = setInterval(() =\u003e {\n      setTime(new Date());\n    }, 1000);\n\n    return () =\u003e {\n      clearInterval(intervalId);\n    };\n  }, []);\n\n  function formatTime(time) {\n    let hours = time.getHours();\n    let minutes = time.getMinutes();\n    let seconds = time.getSeconds();\n    let meridiem = hours \u003e= 12 ? \"PM\" : \"AM\";\n\n    hours = hours % 12 || 12; // Convert to 12-hour format\n    hours = hours \u003c 10 ? \"0\" + hours : hours;\n    minutes = minutes \u003c 10 ? \"0\" + minutes : minutes;\n    seconds = seconds \u003c 10 ? \"0\" + seconds : seconds;\n\n    return `${hours} : ${minutes} : ${seconds} ${meridiem}`;\n  }\n\n  return (\n    \u003c\u003e\n      \u003cdiv className=\"clock-container\"\u003e\n        \u003cdiv className=\"clock\"\u003e\n          \u003cspan\u003e{formatTime(time)}\u003c/span\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/\u003e\n  );\n}\n\nexport default App;\n```\n\n### `App.css`\n\n```css\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700\u0026display=swap');\n\nbody {\n  margin: 0;\n  padding: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n  background: url('/images/background.jpg') no-repeat center center/cover;\n  font-family: 'Inter', sans-serif;\n  color: white;\n}\n\n.clock-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n\n.clock {\n  background: rgba(0, 0, 0, 0.7);\n  padding: 20px 40px;\n  border-radius: 10px;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);\n  text-align: center;\n  font-size: 2em;\n  font-weight: bold;\n}\n```\n\n## Contributing\n\nContributions are welcome! Please fork the repository and create a pull request with your changes.\n\n## Acknowledgments\n\n- Inspired by various digital clock designs.\n- Font used: Inter.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famulyamachhan%2Fdigital-clock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famulyamachhan%2Fdigital-clock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famulyamachhan%2Fdigital-clock/lists"}