Zero-dependency web application for grading and assessment workflows

A production-grade, single-page web application for managing assessment workflows. Built with vanilla JavaScript (no frameworks or dependencies), demonstrating modern web development practices including responsive design, local data persistence, and interactive UI patterns.

• ✅ Zero Dependencies - Pure HTML5, CSS3, and vanilla JavaScript
• ✅ Responsive Design - CSS Grid and Flexbox layouts
• ✅ Local Persistence - LocalStorage for data management
• ✅ Interactive UI - Real-time updates and dynamic rendering
• ✅ Export Functionality - Download results as JSON
• ✅ Professional UX - Smooth animations and intuitive interface

• HTML5 - Semantic markup
• CSS3 - Grid, Flexbox, CSS Variables, animations
• JavaScript (ES6+) - Modules, Classes, async/await
• LocalStorage API - Data persistence

Simply open index.html in your browser - no build step required!

Or use a local server:

# Python
python -m http.server 8000

# Node.js  
npx serve

# Then visit: http://localhost:8000

1. Open index.html in your browser
2. Add assessment criteria and categories
3. Input candidate information
4. Score assessments interactively
5. View real-time calculations and rankings
6. Export data as JSON

interactive-assessment-app-template/
├── index.html              # Main application
├── css/
│   └── styles.css          # Styling
├── js/
│   ├── app.js              # Application logic
│   ├── storage.js          # LocalStorage management
│   └── utils.js            # Helper functions
├── examples/
│   └── sample-data.json    # Example data
├── .gitignore
├── LICENSE
└── README.md

const criteria = [
    {
        id: 'technical_skills',
        name: 'Technical Skills',
        weight: 0.4,
        maxScore: 100
    },
    {
        id: 'problem_solving',
        name: 'Problem Solving',
        weight: 0.3,
        maxScore: 100
    }
];

function calculateScore(assessment) {
    return assessment.criteria.reduce((total, criterion) => {
        return total + (criterion.score * criterion.weight);
    }, 0);
}

• Technical assessment workflows
• Interview scorecards
• Performance review tools
• Skills evaluation systems
• Portfolio assessment platforms

MIT License - Free to use and modify

This template demonstrates:

• Modern frontend development without frameworks
• Production-grade code organization
• Responsive design best practices
• Interactive UI patterns
• Data persistence strategies

Author: Toussaint Rwego
GitHub: @Rweg