DIU Assignment & Lab Report Cover Page Generator
Project Overview: The DIU Assignment & Lab Report Cover Page Generator is an interactive, browser-based student productivity tool designed specifically for Dhaka International University (DIU) students. Built with HTML, CSS, and vanilla JavaScript, it eliminates the formatting pain points of using Word templates. The tool provides a dynamic form-based design engine with high-fidelity live preview, preset academic lists, style customizers, and print-ready PDF export options.
Project Objective
The central objective was to address a common recurring friction in university student workflows: designing consistent, professional assignment and lab report cover pages. Manually formatting margins, font families, alignments, department information, teacher designations, signature blocks, and submission dates in word processors is time-consuming and error-prone. This application simplifies this process into a seamless fill-and-export experience.
Key Features & Highlights
-
✓
Smart Real-Time Preview: Students view their inputs instantly updated within an A4-proportioned digital cover page simulation directly on screen.
-
✓
Preset Academic Repositories: Dynamic dropdown filters pre-populated with DIU department lists, faculty directory lists, and teacher designations.
-
✓
Flexible Cover Styling Engine: Controls to toggle font families, primary theme colors, decorative border patterns, and page corner radius options.
-
✓
Submission Toggles: Show/hide signature line sections, custom submission dates, or student ID boxes depending on the course formatting guidelines.
-
✓
High-Resolution Export Pathways: Support for instant local PDF conversion, PNG format downloads, and native browser printing optimization.
Live Utility Showcase
Application Workflow
Form Input
Enter student details, assignment metadata, topics, and course details.
Visual Styling
Customize layouts using border selectors, color pickers, and font drop-downs.
Dynamic Review
Inspect layout, spacing, and dimensions inside the active A4 simulator block.
One-Click Export
Instantly download as PDF/PNG or output to printers using optimized CSS formats.
Feature Breakdown
📝 Smart Form Controls
- ✓ Intuitive text areas for Assignment titles and topic details
- ✓ Dynamic student fields: Name, Roll, Registration No, Session
- ✓ Clean structural segmentation to input teacher-specific designations
🏢 Department Selector
- ✓ Preloaded Dhaka International University department profiles
- ✓ Auto-injects formal department titles onto the preview page
- ✓ Saves students from manual typographic errors in department names
🎨 Custom Style Engine
- ✓ Dynamic color selection: Match specific department branding tones
- ✓ Typography dropdown selectors containing formal standard academic fonts
- ✓ Adjustable border styles (Solid, Dashed, Double) and corner radii
👁️ Visibility Controls
- ✓ Show / Hide checkboxes to tailor specific metadata blocks
- ✓ Toggle signature lines for Student vs. Course Teacher signatures
- ✓ Toggleable submit date layouts matching varying lab structures
💾 PDF & Image Export
- ✓ High-resolution PDF generation with scaled margins
- ✓ PNG format capture for quick document sharing or inserts
- ✓ Completely offline processing directly executed in the browser
🖨️ A4 Print Optimization
- ✓ Targeted print CSS styles that override normal browser previews
- ✓ Hides application sidebars, forms, and custom setting panels automatically
- ✓ Ensures clean borders, exact spacing, and zero page leakage in prints
My Role
I conceived, structured, and implemented this application. I designed the responsive mobile-friendly form interface, wrote the real-time preview data-binding script, compiled the Dhaka International University department/faculty directories, implemented the canvas-to-file generation logic, and optimized the A4 print media styling.
Tech Stack & Tools
Challenges & Key Learnings
A key challenge was formatting the live A4 preview simulator block consistently across small mobile screens without losing layout proportion, while guaranteeing the exported PDF is crisp and fits standard printing boundaries. I resolved this by applying responsive CSS transform scale rules on the simulator container for mobile views, and optimizing print layouts using dedicated print media rules to bypass local browser configurations.
0 Comments:
Post a Comment