Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joserafael0160/clock
A basic clock made with HTML, PostCSS and JS
https://github.com/joserafael0160/clock
basic-clock clock clock-web html javascript postcss web-clock
Last synced: 3 months ago
JSON representation
A basic clock made with HTML, PostCSS and JS
- Host: GitHub
- URL: https://github.com/joserafael0160/clock
- Owner: joserafael0160
- License: mit
- Created: 2024-04-17T21:47:02.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-05-13T04:04:20.000Z (8 months ago)
- Last Synced: 2024-10-11T00:21:52.721Z (3 months ago)
- Topics: basic-clock, clock, clock-web, html, javascript, postcss, web-clock
- Language: HTML
- Homepage: https://joserafael0160.github.io/Clock/
- Size: 465 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Clock
>If you want to read this readme in **Spanish**
>- [**Spanish README**](https://github.com/joserafael0160/Clock/blob/main/readme.es.md)
## 📜 About
The Simple Clock I’ve developed is a web application that provides a clean and easy-to-read time display. It’s perfect for any device, whether it’s a computer or mobile browser. The clock updates every second to ensure accurate timekeeping. 💜
## 👀 Preview
In a PC (1920x1080)
In a iPhone SE (375x667)
## 💬 Features
- **Functional Clock**: The web page features a functional clock that provides a clear and easy-to-read time display. It updates every second to ensure accurate timekeeping
- **Favicon Support**: Support for a wide range of favicon sizes has been added, ensuring that the site’s icon displays correctly on all devices and platforms.
- **Open Graph and Twitter Tags**: Open Graph and Twitter meta tags have been included, which optimize the preview of the website on social platforms like Facebook and Twitter.
- **Cross-Browser Compatibility**: The web page uses the `X-UA-Compatible` meta tag, which helps ensure compatibility with multiple browsers, especially older versions of Internet Explorer.
- **GitHub Link**: The web page includes a link to the GitHub repository, allowing users to view and contribute to the project’s source code.
## 🧰 Stack
- [**Vite**](https://vitejs.dev/) - It’s a fast and flexible tool for building and testing JavaScript applications.
- [**HTML**](https://developer.mozilla.org/es/docs/Web/HTML) - It’s the standard markup language for web pages.
- [**PostCSS**](https://postcss.org/) - It allows you to use modern CSS features and plugins to write and process CSS with JavaScript.
- [**JavaScript**](https://developer.mozilla.org/es/docs/Web/JavaScript) - It’s the world’s most popular programming language.
- [**ESLint**](https://eslint.org/) - It’s an open-source tool that helps you find and fix problems with your JavaScript code.
- [**Stylelint**](https://stylelint.io/) - It’s a tool that checks your CSS code for syntax, features, and conventions
## 🚀 Getting Starter
1. **Fork** or clone this repository
```bash
git clone [email protected]:joserafael0160/Clock.git
```
2. Install the dependencies:
- I used [**bun**](https://bun.sh) to install and manage the dependencies.
```bash
# Install bun for MacOS, WSL & Linux:
curl -fsSL https://bun.sh/install | bash
# Install bun for Windows:
powershell -c "iwr bun.sh/install.ps1|iex"
# Install with bun:
bun install
```
- or you can use [**pnpm**](https://pnpm.io):
```bash
# Install pnpm globally if you don't have it:
npm install -g pnpm
# Install dependencies:
pnpm install
```
3. Run the development server:
```bash
# Run with bun:
bun run dev
# Run with pnpm:
pnpm run dev
```
## 🧞 Commands
| | Command | Action |
| :--- | :-------- | :-------------------------------------------- |
| ⚙️ | `dev` | Starts local dev server. |
| ⚙️ | `build` | Build your production site to `./dist/`. |
| ⚙️ | `preview` | Preview your build locally, before deploying. |
| ⚙️ | `deploy` | Deploy your website to github pages. |
## 🤝 Contributions
Contributions are always welcome! Whether you’re reporting bugs, requesting new features, or improving existing functionalities, your help is **greatly appreciated**.
If you have any suggestions that could improve the project, please make a [_fork_](https://github.com/joserafael0160/Clock/fork) of the repository and create a [_pull request_](https://github.com/joserafael0160/Clock/pulls). You can also simply open an [_issue_](https://github.com/joserafael0160/Clock/issues) with the “enhancement” label.
Here is a quick guide:
1. Make a [_fork_](https://github.com/joserafael0160/Clock/fork) of the Project
2. Clone your [_fork_](https://github.com/joserafael0160/Clock/fork) (`git clone `)
3. Add the original repository as remote (`git remote add upstream `)
4. Create your Feature Branch (`git switch -c feature/NewFeature`)
5. Make your Changes (`git commit -m 'Add: some NewFeature'`)
6. Push to the Branch (`git push origin feature/NewFeature`)
7. Open a [_pull request_](https://github.com/joserafael0160/Clock/pulls)
## 🔑 License
[MIT](https://github.com/joserafael0160/Clock/blob/main/LICENSE)
## 🙏 Support
Don't forget to leave a star ⭐️
✌️
A project created by @joserafael0160