An interactive web application for learning and visualizing the Shortest Job First (SJF) CPU Scheduling Algorithm
[](https://sjf-cpu-scheduling-visualizer.vercel.app)
An interactive web application for learning and visualizing the Shortest Job First (SJF) CPU Scheduling Algorithm
[
Found a bug? Have a suggestion?
- ๐ Open an issue
- ๐ฌ Start a discussion
- โญ Star this repo if you find it helpful
- Overview
- Features
- Demo
- Getting Started
- How to Use
- Technologies
- Project Structure
- Contributing
- License
This project is an educational tool designed to help students and educators understand CPU scheduling algorithms, specifically comparing SJF (Shortest Job First) with FCFS (First Come First Serve).
- ๐ Visual Learning: See algorithms execute step-by-step
- ๐ Side-by-Side Comparison: Understand why SJF is more efficient
- ๐ฎ Interactive: Make predictions and test your knowledge
- ๐ฑ Modern UI: Beautiful gradient design with dark mode
- ๐ Educational: Perfect for OS coursework and presentations
- Standard Mode: Quick side-by-side visualization
- Real-Time Mode: Step-by-step execution with detailed logging
- โ Gantt Chart Visualization: See process execution timeline
- โ Process Queue Display: Real-time ready queue status
- โ Flowchart Diagram: Algorithm decision-making flow
- โ Performance Metrics: Average Wait Time, Turnaround Time, CPU Utilization
- โ Dynamic Animations: Spinning gear on executing process, glowing timeline marker
- ๐ Quiz System: 3 questions to test your understanding
- ๐ฏ Prediction Game: Guess which algorithm performs better
- ๐ 4 Example Scenarios: From basic to complex cases
- ๐ก Algorithm Insights: Educational tips and best practices
- ๐ Gradient UI: Purple-pink theme with glassmorphism
- ๐ Dark Mode: Eye-friendly dark theme toggle
- ๐ฑ Responsive: Works on desktop, tablet, and mobile
- โก Smooth Animations: 60fps performance with particle effects
- ๐ Built-in Docs Page: Comprehensive guide accessible via "Docs" button
- ๐ Performance Dashboard: Real-time analytics and charts
- ๐ Sound Effects: Audio feedback for interactions (optional)
๐ Try it now!
Experience the interactive visualizer with:
- โจ Side-by-side FCFS vs SJF comparison
- ๐ฌ Real-time step-by-step animation
- ๐ Interactive quiz system
- ๐ Beautiful dark mode
- ๐ Performance analytics dashboard
- A modern web browser (Chrome, Firefox, Safari, Edge)
- No installation or build process required!
-
Clone the repository
git clone https://github.com/NAITHICK/sjf-cpu-scheduling-visualizer.git cd sjf-cpu-scheduling-visualizer -
Open in browser
# Option 1: Double-click index.html # Option 2: Use Python server python -m http.server 8000 # Then open http://localhost:8000 # Option 3: Use Node.js server npx http-server -p 8000 # Then open http://localhost:8000
-
Start learning!
- No dependencies to install
- No build process needed
- Just open and use!
-
Load an Example
- Click one of the 4 example buttons (Basic, SJF Advantage, etc.)
- Or manually add processes with arrival time and burst time
-
Choose Animation Mode
- Standard: Fast comparison of both algorithms
- Real-Time: Slow step-by-step execution with logging
-
Start Simulation
- Make a prediction (optional)
- Click "Start Simulation"
- Watch the magic happen!
Process Name: P1
Arrival Time: 0 (when process arrives)
Burst Time: 5 (CPU time needed)
- Gantt Chart: Visual timeline of process execution
- Metrics Table: Wait Time, Turnaround Time for each process
- Averages: Compare FCFS vs SJF efficiency
- Improvement: See how much better SJF performs
- Complete a simulation to unlock quiz
- Answer 3 multiple-choice questions
- Get instant feedback with explanations
- Track your score!
- HTML5: Semantic structure
- CSS3: Modern styling with custom properties
- JavaScript (ES6+): Vanilla JS, no frameworks
- Canvas API: Charts and particle effects
- Web Audio API: Sound effects
- LocalStorage: Save preferences and scores
- CSS Animations: 60fps smooth transitions
- Font: Inter (Google Fonts)
- Icons: Font Awesome 6
- Colors: Purple-Pink gradient theme
- Effects: Glassmorphism, backdrop-filter, box-shadows
sjf-visualizer/
โ
โโโ index.html # Main application page
โโโ docs.html # Documentation page
โโโ style.css # Main stylesheet
โโโ docs-style.css # Documentation styles
โโโ script.js # Core application logic
โโโ vercel.json # Deployment configuration
โโโ README.md # This file
| File | Purpose | Lines |
|---|---|---|
index.html |
Main UI with all sections | ~210 |
script.js |
SJF/FCFS algorithms, animations, quiz | ~1100 |
style.css |
Modern gradient design, dark mode | ~1480 |
docs.html |
Comprehensive documentation | ~200 |
- ๐ Operating Systems Courses: Visualize CPU scheduling
- ๏ฟฝโ๐ซ Teachers: Demonstrate algorithm efficiency
- ๐จโ๐ Students: Study for exams with interactive learning
- ๐ Presentations: Concept map visualization
- ๐ป Self-Learning: Understand scheduling algorithms
- Understand how SJF and FCFS algorithms work
- Compare algorithm efficiency with real examples
- Calculate Wait Time and Turnaround Time
- Recognize when SJF outperforms FCFS
- Learn about non-preemptive scheduling
Contributions are welcome! Here's how you can help:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Add more scheduling algorithms (Round Robin, Priority)
- Add more quiz questions
- Improve mobile responsiveness
- Add multi-language support
- Create video tutorials
This project is licensed under the MIT License - see the LICENSE file for details.
You are free to:
- โ Use for personal learning
- โ Use for educational purposes
- โ Modify and distribute
- โ Use commercially
Created for Operating Systems Coursework
- ๏ฟฝ GitHub: @NAITHICK
- ๐ Live Demo: sjf-cpu-scheduling-visualizer.vercel.app
- ๏ฟฝ Contact: naithickaccha@gmail.com
- Operating Systems concepts from textbooks and courses
- Inspiration from various CPU scheduling visualizers
- Modern UI design trends and best practices
- Open-source community for tools and resources
Found a bug? Have a suggestion?
- ๐ Open an issue
- ๐ฌ Start a discussion
- โญ Star this repo if you find it helpful!
Made with โค๏ธ for Computer Science Education