Yearly School Report Card
Yearly School Report Card
/* Basic CSS styles */
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}
h1 {
margin: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
text-align: left;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px;
}
.card {
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin: 10px;
padding: 20px;
width: 30%;
}
@media screen and (max-width: 768px) {
.card {
width: 100%;
}
}
button[type="submit"] {
margin: 20px;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
}
const form = document.getElementById('input-form');
const reportCardContainer = document.getElementById('report-card-container');
form.addEventListener('submit', generateReportCard);
function generateReportCard(event) {
event.preventDefault();
// Get input values
const name = document.getElementById('name').value;
const classValue = document.getElementById('class').value;
const roll = document.getElementById('roll').value;
const section = document.getElementById('section').value;
// Check if all input fields are filled
if (!name || !classValue || !roll || !section) {
alert('Please fill in all fields.');
return;
}
// Generate report card HTML
const reportCardHTML = `
${name}
| Subject |
Grade |
| English |
${getGrade()} |
| Math |
${getGrade()} |
| Science |
${getGrade()} |
| Social Studies |
${getGrade()} |
`;
// Add report card HTML to container
reportCardContainer.innerHTML = reportCardHTML;
// Print report card as PDF
printReportCard();
}
function getGrade() {
// Randomly generate a letter grade (A, B, C, D, or F)
const grades = ['A', 'B', 'C', 'D', 'F'];
const randomIndex = Math.floor(Math.random() * grades.length);
return grades[randomIndex];
}
function printReportCard() {
// Get report card container
const reportCard = reportCardContainer.querySelector('.card');
// Create new jsPDF document
const doc = new jsPDF();
// Add report card HTML to document
doc.html(reportCard, {
callback: function () {
// Save PDF file
doc.save('report-card.pdf');
},
});
}
