https://github.com/yashi-singh-9/calendar-viewer-component
Build a responsive Calendar Viewer Component that displays the current month, year, and days of the week. Users can navigate between months, with the current day highlighted. Include hover states for all elements and ensure the design closely matches the provided layout.
https://github.com/yashi-singh-9/calendar-viewer-component
css frontend frontendpro html javascript less less-preprocessor
Last synced: 3 months ago
JSON representation
Build a responsive Calendar Viewer Component that displays the current month, year, and days of the week. Users can navigate between months, with the current day highlighted. Include hover states for all elements and ensure the design closely matches the provided layout.
- Host: GitHub
- URL: https://github.com/yashi-singh-9/calendar-viewer-component
- Owner: Yashi-Singh-9
- License: mit
- Created: 2025-03-09T04:03:34.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-03-09T04:10:13.000Z (3 months ago)
- Last Synced: 2025-03-09T05:18:05.796Z (3 months ago)
- Topics: css, frontend, frontendpro, html, javascript, less, less-preprocessor
- Language: Less
- Homepage: https://yashi-singh-9.github.io/Calendar-Viewer-Component/
- Size: 307 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Calendar Viewer Component
This is a solution to the [Calendar Viewer Component Challenge](https://www.frontendpro.dev/frontend-coding-challenges/calendar-viewer-component-KnvtY1kLkwCisNB2LTsG) on FrontendPro. The challenge involves creating a dynamic calendar component where users can navigate between months and view the current date highlighted.
## Table of Contents
- [Overview](#overview)
- [The Challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [Installation and Setup](#installation-and-setup)
- [Installing LESS Preprocessor](#installing-less-preprocessor)
- [Running the LESS Compiler](#running-the-less-compiler)
- [Built With](#built-with)
- [Features](#features)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
## Overview
### The Challenge
Users should be able to:
- View a calendar displaying the current month
- Navigate between months using previous and next buttons
- See the current day highlighted
### Screenshot
### Links
- [Solution URL](https://www.frontendpro.dev/frontend-coding-challenges/calendar-viewer-component-KnvtY1kLkwCisNB2LTsG/solutions/q99jkAaqMkXhPnhMGlFM)
- [Live Site URL](https://yashi-singh-9.github.io/Calendar-Viewer-Component/)
## Installation and Setup
To run this project locally, follow these steps:
### Installing LESS Preprocessor
This project uses LESS as a CSS preprocessor. To install it, you need Node.js and npm installed on your system.
1. Install [Node.js](https://nodejs.org/) if you haven't already.
2. Open a terminal and run the following command to install LESS globally:
```sh
npm install -g less
```
### Running the LESS Compiler
To compile the LESS file into CSS, run:
```sh
lessc assets/style.less assets/style.css
```
You can also set up a watcher to automatically compile LESS when changes are made:
```sh
less-watch-compiler assets assets
```
## Built With
- Semantic HTML5
- LESS (CSS Preprocessor)
- JavaScript (Vanilla JS)
- Font Awesome Icons
## Features
- Dynamic calendar rendering based on the current date
- Previous and next month navigation
- Current day highlighting
- Responsive design
## Author
- LinkedIn - [Yashi Singh](https://www.linkedin.com/in/yashi-singh-b4143a246)
- FrontendPro - [FrontendPro Challenges](https://www.frontendpro.dev/frontend-coding-challenges)
## Acknowledgments
Thanks to [FrontendPro](https://www.frontendpro.dev/) for providing this challenge and an opportunity to enhance frontend development skills.