A comprehensive collection of vanilla JavaScript projects demonstrating modern web development techniques, DOM manipulation, and interactive user interfaces. Each project is self-contained with its own documentation and showcases different aspects of JavaScript fundamentals.
This repository serves as a portfolio of vanilla JavaScript projects built to master core JavaScript concepts without relying on frameworks or libraries. Each project focuses on specific JavaScript features and demonstrates practical implementations of web development fundamentals.
- 📚 Learning Resource - Study real-world JavaScript implementations
- 💼 Portfolio Showcase - Demonstrate coding skills and best practices
- 🎯 Skill Development - Practice DOM manipulation, event handling, and modern ES6+ features
- 🔧 Code Reference - Reusable components and patterns for future projects
Modern profile card generator with stunning animations and glassmorphism effects
A dynamic profile card generator that creates visually stunning profile cards with custom information. Built with vanilla JavaScript and modern CSS techniques, featuring a beautiful dark theme with purple gradients, glassmorphism effects, and smooth animations.
Key Features:
- 🎨 Glassmorphism Design - Modern frosted glass effect with backdrop blur
- ✨ Gradient Themes - Beautiful purple and blue gradient color schemes
- 🎯 Animated Borders - Rotating gradient borders on profile pictures
- 🚀 Dynamic Card Generation - Create unlimited profile cards on the fly
- 💫 Popup Animation - Cards appear with an eye-catching bubble/pop effect
- 📱 Fully Responsive - Mobile-first approach with intelligent layout
- 🎨 Form Validation - Built-in HTML5 validation for data integrity
- 🔄 Auto-Reset - Form automatically clears after submission
Use Cases:
- Team member showcases
- Portfolio websites
- Employee directories
- Social media profile displays
- Event attendee lists
Technologies:
Real-time form validation with instant feedback and professional dark theme UI
A production-ready authentication form validator that provides real-time feedback as users type. Features a sleek dark theme interface with live password strength indicators and comprehensive validation rules.
Key Features:
- ⚡ Real-time validation - Instant feedback on every keystroke
- 🔒 Smart password checker - Live requirement updates with visual indicators
- ✉️ RFC-compliant email validation - Industry-standard regex patterns
- 🎨 Professional dark theme - Modern, eye-friendly interface
- 📱 Fully responsive design - Perfect on all devices
- ✅ Visual feedback system - Color-coded borders and success/error messages
Technologies:
View Project | Live Demo | Documentation
Intelligent dark/light mode switcher with OS theme detection and persistent preferences
A sophisticated theme switching system that automatically detects your operating system's theme preference and allows manual customization. Built with vanilla JavaScript, it demonstrates modern browser APIs and user preference management.
Key Features:
- 🌓 Automatic OS Theme Detection - Detects and applies system dark/light mode
- 💾 Persistent Storage - Saves user preferences using localStorage
- 🔄 Real-time Sync - Updates when OS theme changes
- 🎯 Smart Preference Management - User choice overrides system settings
- 🎨 Smooth Transitions - Professional CSS animations (0.4s)
- ⚡ Lightweight - Only ~2.5KB total bundle size
- 📱 Fully Responsive - Works on all devices
Technical Highlights:
window.matchMedia()API for OS theme detectionprefers-color-schememedia query- Event listener lifecycle management
- localStorage API for data persistence
- Clean class-based theme toggling
Technologies:
Simple even and odd number checker using vanilla JavaScript, HTML, and CSS
A project to validate if a number is even or odd in real-time, with clean UI and instant feedback.
Key Features:
🔢 Real-time number validation
🎨 Simple, clean UI
⚡ Instant feedback
Technologies: HTML, CSS, JavaScript
View Project | Live Demo
Classic Rock-Paper-Scissors game built with vanilla JavaScript
Interactive game with dynamic score tracking and animations.
Key Features:
✊ Dynamic game logic
🎯 Score tracking
🎨 Visual feedback for player and computer choices
Technologies: HTML, CSS, JavaScript
View Project | Live Demo
A basic calculator for arithmetic operations using vanilla JavaScript
Perform addition, subtraction, multiplication, and division with live input.
Key Features:
🔢 Basic arithmetic operations
🎨 Responsive UI
⚡ Instant calculation results
Technologies: HTML, CSS, JavaScript
View Project | Live Demo
A simple payroll tax calculator built with JavaScript
Calculate salary, tax deductions, and net pay dynamically.
Key Features:
💰 Income and tax calculation
📊 Instant results
🎨 Clean UI
Technologies: HTML, CSS, JavaScript
View Project | Live Demo
Generate strong random passwords with user-selected criteria
Customize password length and complexity.
Key Features:
🔐 Random password generation
⚙️ Customizable length and symbols
🎨 Simple and clean interface
Technologies: HTML, CSS, JavaScript
View Project | Live Demo
Interactive todo list with countdown timer for tasks
Keep track of tasks and manage time effectively.
Key Features:
✅ Add and remove tasks
⏱ Timer for task focus
🎨 Responsive interface
Technologies: HTML, CSS, JavaScript
View Project | Live Demo
Simple weather application fetching real-time data from an API
Check the current weather of any city with dynamic UI updates.
Key Features:
🌦 Fetch weather data via API
📍 Search for cities
🎨 Dynamic UI updates
Technologies: HTML, CSS, JavaScript
View Project | Live Demo
-
Card Creation
- Each user object has
name,pic, andbio. - JS creates a
<div class="card">with:<img>for the picture.blur-layerfor glassy overlay.contentdiv containing<h3>and<p>.
- Each user object has
-
Carousel
.cards-trackuses CSS keyframes for infinite scroll.- Hover pauses the animation for better UX.
-
Search Filter
- Input listens for
inputevents. - Filters cards in real-time:
- Empty → show carousel
- Typed → show filtered grid layout
- Input listens for
-
Responsive Animations
- Cards scale, lift, and shadow on hover.
- Fade-in animation on load.
- Mobile-friendly resizing.
user-search-filter-cards/ │ ├─ index.html # HTML container and search input ├─ style.css # CSS for carousel, cards, animations, blur ├─ script.js # JavaScript logic for creating cards and filtering ├─ README.md # Project documentation └─ assets/ # Optional folder for images/GIFs
- HTML5 – Semantic markup for structure and accessibility
- CSS3 – Flexbox, grid, gradients, animations, hover effects, and responsive design
- JavaScript (ES6+) – DOM manipulation, event listeners, dynamic card creation, filtering
- Unsplash Images – Free high-quality placeholder images for users
git clone https://github.com/anjumhere/Core-Javascript-Projects-.git
Navigate to project folder:
cd user-search-filter-cards
Open index.html in your browser:
open index.html
Type in the search input to dynamically filter users.
## 🌟 Author
## Adnan Anjum
## GitHub: @anjumhere
_______________________________________________________________________________________________________________________________
More projects will be added regularly. Star this repo to stay updated! ⭐
### 🚀 Getting Started
### Prerequisites
- A modern web browser (Chrome 76+, Firefox 67+, Safari 12.1+, or Edge 79+)
- Basic understanding of HTML, CSS, and JavaScript
- A code editor (VS Code recommended)
- Git installed on your machine
### Quick Start
1. **Clone the repository**
```bash
git clone https://github.com/anjumhere/Core-Javascript-Projects-.git
cd Core-Javascript-Projects-- Navigate to any project
# For ProfilePop
cd Dynamic-Profile-Card-Generator
# For Email Validator
cd Email-and-Password-Validation
# For Theme Toggle
cd Theme-toggle-with-localStorage- Open in browser
Simply open index.html in your browser, or use Live Server extension in VS Code for hot reload.
- Navigate to any project folder
- Double-click
index.html - The project will open in your default browser
- Install Live Server in VS Code
- Right-click on
index.html - Select "Open with Live Server"
- Project opens with hot reload capability
- HTML5 - Semantic markup and structure
- CSS3 - Modern styling and animations
- JavaScript (ES6+) - Vanilla JavaScript without frameworks
- DOM Manipulation & Element Creation
- Event Handling & Event Listeners
- ES6+ Features (Arrow Functions, Template Literals)
- Browser APIs (localStorage, matchMedia)
- Form Validation & Handling
- Real-time Input Processing
- Dynamic Content Generation
- State Management
- Event Listener Lifecycle Management
- Array Methods & Iteration
- Flexbox & Grid Layout
- CSS Transitions & Animations
- Custom Properties (CSS Variables)
- Responsive Design
- Mobile-First Approach
- Glassmorphism & Modern UI Effects
- Gradient Design
- Backdrop Filters
By exploring these projects, you'll learn:
- ✅ DOM Manipulation and Traversal
- ✅ Dynamic Element Creation & Appending
- ✅ Event Listeners and Event Delegation
- ✅ Browser Storage APIs (localStorage)
- ✅ Media Query API (matchMedia)
- ✅ Form Handling and Validation
- ✅ Real-time Input Processing
- ✅ ES6+ Syntax and Features
- ✅ State Management Patterns
- ✅ Responsive Design Principles
- ✅ Modern CSS Techniques (Flexbox & Grid)
- ✅ Smooth Animations and Transitions
- ✅ Keyframe Animations
- ✅ Glassmorphism Effects
- ✅ Theme Switching Implementation
- ✅ Gradient Design
- ✅ Mobile-First Approach
- ✅ Clean and Readable Code
- ✅ Semantic HTML Structure
- ✅ Separation of Concerns
- ✅ Memory Management (Event Listener Cleanup)
- ✅ Browser Compatibility
- ✅ User Preference Respect
- ✅ Performance Optimization
Contributions, issues, and feature requests are welcome!
- Fork the Project
- Create a Feature Branch
git checkout -b feature/AmazingProject
- Commit Changes
git commit -m 'Add some AmazingProject' - Push to Branch
git push origin feature/AmazingProject
- Open a Pull Request
- Create a new folder with a descriptive name
- Include all necessary files (HTML, CSS, JS)
- Add a comprehensive README.md
- Follow the existing project structure
- Ensure code is well-commented
- Test across multiple browsers
- Use meaningful variable and function names
- Write clean, readable code
- Add comments for complex logic
- Follow ES6+ JavaScript standards
- Ensure responsive design
- Test for cross-browser compatibility
This project is licensed under the MIT License.
MIT License
Copyright (c) 2025 Anjum
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
Anjum
- 🐱 GitHub: @anjumhere
- 📧 Email: anjumcode12@gmail.com
Passionate web developer focused on creating practical, educational, and well-documented projects. I believe in learning by building and sharing knowledge with the community. These projects represent my journey in mastering JavaScript fundamentals.
- 📖 Check individual project README files
- 💡 Open an issue
- 📧 Contact me via email
- ⭐ Star this repository
- 🍴 Fork it for your own learning
- 📢 Share it with others
- 🤝 Contribute your own projects
- MDN Web Docs - Comprehensive JavaScript documentation
- JavaScript.info - Excellent learning resource
- CSS Tricks - Amazing CSS tutorials and tips
- Stack Overflow Community - Problem-solving support
- GitHub Community - Inspiration and collaboration
- MDN JavaScript Guide
- JavaScript.info
- Can I Use - Browser compatibility checker
- CSS Tricks - CSS reference and tutorials
If this repository helped you, please consider:
⭐ Starring the repository
🍴 Forking for your own learning
📢 Sharing with others
🤝 Contributing your projects
Made with ❤️ by Anjum