Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yashi-singh-9/datepicker-ui

Datepicker UI is a simple, static datepicker component built with HTML and CSS. It provides a basic calendar interface for date selection without functionality, serving as a foundation for adding JavaScript interactivity later. Perfect for UI design practice or as a starter project.
https://github.com/yashi-singh-9/datepicker-ui

css html layout layouts positioning roadmap roadmap-project

Last synced: 3 days ago
JSON representation

Host: GitHub
URL: https://github.com/yashi-singh-9/datepicker-ui
Owner: Yashi-Singh-9
License: mit
Created: 2024-09-12T11:57:22.000Z (2 months ago)
Default Branch: main
Last Pushed: 2024-09-12T12:02:19.000Z (2 months ago)
Last Synced: 2024-09-12T23:17:46.520Z (2 months ago)
Topics: css, html, layout, layouts, positioning, roadmap, roadmap-project
Language: HTML
Homepage:
Size: 49.8 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Datepicker UI

## Description
Datepicker UI is a simple, static datepicker component created using only HTML and CSS. It serves as a foundational UI element for selecting dates and can later be enhanced with JavaScript to add interactivity and functionality. The current version is non-functional and designed for demonstration purposes, making it an ideal starting point for learning UI development.

This project is based on the task described on [Roadmap.sh](https://roadmap.sh/projects/datepicker-ui). It is meant to familiarize developers with designing user interfaces using basic web technologies without relying on JavaScript.

### Features:
- Simple, visually appealing calendar UI.
- Custom date input field for `dd/mm/yyyy`.
- Clean layout with a responsive design.
- Navigation buttons for switching months (static for now).
- Hover effects on date cells to enhance user experience.

## Badges
[![HTML](https://img.shields.io/badge/HTML-100%25-success)](https://www.w3.org/TR/html52/) [![CSS](https://img.shields.io/badge/CSS-100%25-blue)](https://www.w3.org/Style/CSS/Overview.en.html)
[![GitHub last commit](https://img.shields.io/github/last-commit/Yashi-Singh-9/Datepicker-UI)](https://github.com/Yashi-Singh-9/Datepicker-UI)

## Visuals
Here’s a preview of the Datepicker UI:

![Datepicker Preview](Screenshot.png)

## Installation
No installation required! Simply download the project files and open the `index.html` file in any modern web browser. Here's how you can get started:

1. Clone the repository or download the zip file.
```bash
git clone https://github.com/Yashi-Singh-9/Datepicker-UI
```
2. Open `index.html` in your browser to view the datepicker UI.
3. You can customize the CSS or add JavaScript for more functionality.

## Usage
This project is currently a static UI for a datepicker. It’s useful for learning or as a starter project. The calendar is displayed when you click the calendar icon, though the functionality can be expanded with JavaScript to handle date selection.

Example usage scenario:
```html

```

## Support
If you encounter any issues or need help with this project, feel free to:
- Submit an issue via GitHub's issue tracker.
- Reach out to me via [LinkedIn](www.linkedin.com/in/yashi-singh-b4143a246).

## Roadmap
Future improvements include:
1. Adding JavaScript functionality for date selection.
2. Supporting dynamic month navigation.
3. Improving responsiveness for mobile devices.
4. Adding multi-language support.

## Contributing
Contributions are welcome! Please submit a pull request with a detailed explanation of what your changes improve. Here's how to contribute:
1. Fork the repository.
2. Create a new branch.
3. Make your changes.
4. Submit a pull request.

## Authors and Acknowledgment
Developed by Yashi Singh. Special thanks to [Roadmap.sh](https://roadmap.sh/) for providing project inspiration.

## License
This project is licensed under the [MIT License](LICENSE).

## Project Status
The project is in its initial phase, and active development is expected for future features and improvements.