🎨 Frontend UI Components

A curated collection of clean, reusable, and production-ready frontend UI components and utilities built using Vanilla JavaScript, focused on real-world UX patterns, state management, and API-driven interfaces.

This repository serves as a personal frontend component library, showcasing practical implementations of commonly asked interview problems and real-world UI utilities.

---

🌐 Live Demo

Explore all components here:

Frontend Utilities Playground
https://akhilbharti510.github.io/frontend-ui-components/

▶️ Live Preview: Click Here

---

✨ What’s Inside

This repository contains multiple independent, self-contained frontend utilities, each built with clean HTML, CSS, and JavaScript.

🔹 JavaScript Utilities

• GitHub Profile Fetcher

  • Name-based search with suggestions
  • Debounced input & caching
  • Keyboard navigation
  • GitHub REST API integration

• Scientific Calculator

  • Keyboard input support
  • Operator normalization
  • DEG / RAD modes
  • Custom math parsing logic

• Timer Utilities

  • Digital clock
  • Stopwatch with lap tracking
  • Countdown timer
  • Accurate interval handling

---

🔹 UI Components

• Tabs / Accordion

  • Clean state management
  • Accessible UI patterns

• Modal Popup

  • Keyboard-accessible modal
  • Focus handling & animations

• Form Validation

  • Client-side validation
  • Clear error messaging

• Counter App

  • State-based updates
  • Increment / decrement / reset

• Dark Mode Toggle

  • CSS variables
  • Theme persistence

---

🛠️ Tech Stack

• HTML5 – Semantic markup
• CSS3 – Modern layouts & theming
• Vanilla JavaScript (ES6+)
  • DOM manipulation
  • Event handling
  • State management
  • Fetch API & async/await

---

🎯 Purpose of This Repository

• Practice and master core frontend concepts
• Build interview-ready UI utilities
• Maintain a scalable component collection
• Demonstrate clean code, UX thinking, and modular design

---

🧾 Resume Highlights

• Built a Frontend UI Components library using Vanilla JavaScript, featuring reusable utilities like GitHub profile search, calculators, timers, and accessible UI components.

🚀 Getting Started

1. Clone the repository

git clone https://github.com/your-username/frontend-ui-components.git
2. Open index.html in your browser
(No build tools or dependencies required)

🔮 Future Enhancements
Add more advanced UI patterns

Component documentation pages

React-based versions of utilities

Improved accessibility and testing

📄 License
This project is open-source and free to use for learning and personal projects.

🙌 Author
Built and maintained by Akhil Bharti