Web Programming - Assignment

Question 6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML and JavaScript Example</title>
<style>
table {
width: 50%;
border-collapse: collapse;
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
th {
background-color: #f2f2f2;
</style>
</head>
<body>
<h2>Student Grades</h2>

<table>
<thead>
<tr>
<th>Student Name</th>
<th>Marks</th>
<th>Grade</th>
</tr>
</thead>
<tbody id="studentTableBody">

</tbody>
</table>
<script>
// Array of student objects with names and marks
const students = [
{name: 'Palak', marks: 86},
{name: 'payal', marks: 81},
{name: 'Chetan', marks: 88},
{name: 'Nimita', marks: 95},
{name: 'Sneha', marks: 68},
{name: 'Sayan', marks: 75}
];
// Function to compute the average marks
function computeAverage(students) {
let sum = 0;
for (let i = 0; i < students.length; i++) {
sum += students[i].marks;
return sum / students.length;

}
// Function to compute the grade based on marks
function computeGrade(marks) {
if (marks < 60) {
return 'F';
} else if (marks < 70) {
return 'D';
return 'C';
return 'B';
} else {
return 'A';
// Compute the average marks
const averageMarks = computeAverage(students);
// Add students and their grades to the table
const tableBody = document.getElementById('studentTableBody');
for (let i = 0; i < students.length; i++) {
const student = students[i];
// Create table row and cells
const row = document.createElement('tr');
const nameCell = document.createElement('td');
const marksCell = document.createElement('td');
const gradeCell = document.createElement('td');

// Set the cell values
nameCell.textContent = student.name;
marksCell.textContent = student.marks;
gradeCell.textContent = computeGrade(student.marks);
// Append the cells to the row
row.appendChild(nameCell);
row.appendChild(marksCell);
row.appendChild(gradeCell);
// Append the row to the table body
tableBody.appendChild(row);
// Display the average marks and the corresponding grade
const avgMarksSpan = document.createElement('span');
avgMarksSpan.textContent = `Average marks: ${averageMarks.toFixed(2)}`;
document.body.appendChild(avgMarksSpan);
const avgGradeSpan = document.createElement('span');
avgGradeSpan.textContent = `Grade: ${computeGrade(averageMarks)}`;
document.body.appendChild(avgGradeSpan);
</script>
</body>
</html>
Question 7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CV Example</title>
<style>
table {
border-collapse: collapse;
width: 70%;
margin: 0 auto;
th, td {
padding: 10px;
border: 1px solid black;
th {
background-color: #f2f2f2;
h4 {
text-align: center;
margin: 10px 0;
</style>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2"><h1>John Doe</h1></th>
</tr>
<tr>
<th>Contact Information</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>Email: john.doe@example.com</p>
<p>Phone: 123-456-7890</p>
</td>
<td>
<p>123 Main Street</p>
<p>City, State, Zip</p>
</td>
</tr>
</tbody>
<thead>
<tr>
<th colspan="2"><h2>Education</h2></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h4>Bachelor of Science in Computer Science</h4>
<p>University of XYZ</p>
<p>Graduated: May 2018</p>
</td>
<td>
<h4>Associate of Arts in Liberal Arts</h4>
<p>Community College of ABC</p>
<p>Graduated: May 2015</p>
</td>
</tr>
</tbody>
<thead>
<tr>
<th colspan="2"><h2>Experience</h2></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<h4>Software Engineer</h4>
<p>Company 123</p>
<p>June 2018 - Present</p>
<ul>
<li>Developed and maintained web applications using HTML, CSS, and

JavaScript.</li>
<li>Collaborated with cross-functional teams to define, design, and ship new

features.</li>
<li>Worked on bug fixing and improving application performance.</li>
</ul>
</td>
</tr>
<tr>
<td colspan="2">
<h4>Web Developer Intern</h4>
<p>Company 456</p>
<p>January 2017 - May 2017</p>
<ul>
<li>Assisted in the development of company's website using HTML, CSS, and

JavaScript.</li>
<li>Created responsive designs for various devices.</li>
<li>Collaborated with the team to ensure the website met company

standards.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Question 8
<?php
class Calculator {
private $result;
public function __construct() {
$this->result = 0;
public function add($number) {
$this->result += $number;
public function subtract($number) {
$this->result -= $number;
public function getResult() {
return $this->result;
$calculator = new Calculator();
$calculator->add(4);
$calculator->add(5);
$calculator->subtract(3);
$result = $calculator->getResult();
echo "Result: " . $result;
?>
Question 9
<table width="400px" cellspacing="0px" cellpadding="0px" border="1px">

<?php
for($row=1;$row<=8;$row++)
echo "<tr>";
for($column=1;$column<=8;$column++)
$total=$row+$column;
if($total%2==0)
echo "<td height=35px width=30px bgcolor=#FFFFFF></td>";
else
echo "<td height=35px width=30px bgcolor=#000000></td>";
echo "</tr>";
?>
</table>
Question 10
<!DOCTYPE html>
<html>
<body>
<h2>Electricity Bill Calculator</h2>
<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
Units: <input type="number" name="units" min="1">
<input type="submit">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$units = $_POST["units"];
$cost = 0;
if ($units <= 40) {
$cost = $units * 3.50;
} else if ($units <= 120) {
$cost = 40 * 3.50 + ($units - 40) * 4.00;
} else if ($units <= 240) {
$cost = 40 * 3.50 + 80 * 4.00 + ($units - 120) * 5.20;
} else {
$cost = 40 * 3.50 + 80 * 4.00 + 120 * 5.20 + ($units - 240) * 6.50;
}
echo "The cost of " . $units . " units is: " . $cost;
?>
</body>
</html>

Web Programming - Assignment

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Programming - Assignment

Uploaded by

Copyright:

Available Formats

Question 6

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>HTML and JavaScript Example</title>

border-bottom: 1px solid #ddd;

// Array of student objects with names and marks

{name: 'Palak', marks: 86},

{name: 'payal', marks: 81},

{name: 'Chetan', marks: 88},

{name: 'Nimita', marks: 95},

{name: 'Sneha', marks: 68},

{name: 'Sayan', marks: 75}

// Function to compute the average marks

for (let i = 0; i < students.length; i++) {

return sum / students.length;

// Function to compute the grade based on marks

if (marks < 60) {

} else if (marks < 70) {

} else if (marks < 80) {

} else if (marks < 90) {

// Compute the average marks

const averageMarks = computeAverage(students);

// Add students and their grades to the table

const tableBody = document.getElementById('studentTableBody');

for (let i = 0; i < students.length; i++) {

const student = students[i];

// Create table row and cells

const row = document.createElement('tr');

const nameCell = document.createElement('td');

const marksCell = document.createElement('td');

const gradeCell = document.createElement('td');

// Append the cells to the row

// Append the row to the table body

// Display the average marks and the corresponding grade

const avgMarksSpan = document.createElement('span');

avgMarksSpan.textContent = `Average marks: ${averageMarks.toFixed(2)}`;

const avgGradeSpan = document.createElement('span');

avgGradeSpan.textContent = `Grade: ${computeGrade(averageMarks)}`;

<meta name="viewport" content="width=device-width, initial-scale=1.0">

border: 1px solid black;

<th colspan="2"><h1>John Doe</h1></th>

<p>123 Main Street</p>

<p>City, State, Zip</p>

<h4>Bachelor of Science in Computer Science</h4>

<p>Graduated: May 2018</p>

<h4>Associate of Arts in Liberal Arts</h4>

<p>Community College of ABC</p>

<p>Graduated: May 2015</p>

<p>June 2018 - Present</p>

<li>Developed and maintained web applications using HTML, CSS, and

<li>Collaborated with cross-functional teams to define, design, and ship new

<li>Worked on bug fixing and improving application performance.</li>

<h4>Web Developer Intern</h4>

<p>January 2017 - May 2017</p>

<li>Assisted in the development of company's website using HTML, CSS, and

<li>Created responsive designs for various devices.</li>

<li>Collaborated with the team to ensure the website met company

public function __construct() {

public function add($number) {

public function subtract($number) {

public function getResult() {

$calculator = new Calculator();

echo "Result: " . $result;