Scribd
Upload
13 views3 pages

PRACTCAL6

The document provides a solution to create a plain HTML page for a BSc Hons CS course. It includes details like the course fee, eligibility criteria, list of papers with credits, and future career possibilities. A button is included to style the page using jQuery. When clicked, the button redesigns the complete page by changing CSS properties like background color, padding, and adding styling to headings, lists and the button.

Uploaded by

Sakshi Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views3 pages

PRACTCAL6

The document provides a solution to create a plain HTML page for a BSc Hons CS course. It includes details like the course fee, eligibility criteria, list of papers with credits, and future career possibilities. A button is included to style the page using jQuery. When clicked, the button redesigns the complete page by changing CSS properties like background color, padding, and adding styling to headings, lists and the button.

Uploaded by

Sakshi Sharma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

SAKSHI SHARMA

21/5005

Create a plain HTML page for B.Sc. Hons


CS course, mentioning details like fee,
eligibility criteria, papers with names and
credits, and future possibilities after the
course. A button for styling should be
there at bottom of the page. On clicking
on this button JavaScript should redesign
the complete page using jQuery in a nice
presentable way.

SOLUTION:-
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>B.Sc. Hons CS Course</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div id="course-details">
<h1>B.Sc. Hons Computer Science</h1>
<p><strong>Fee:</strong> Contact the university for current fee details.</p>
<p><strong>Eligibility Criteria:</strong> Minimum 50% marks in 10+2 with
Mathematics as a subject.</p>

<h2>Course Papers</h2>
<ul>
<li>Introduction to Computer Science (Credits: 3)</li>
<li>Data Structures and Algorithms (Credits: 4)</li>
<li>Database Management Systems (Credits: 3)</li>
<li>Operating Systems (Credits: 3)</li>
<!-- Add more papers as needed -->
</ul>

<h2>Future Possibilities</h2>
<p>After completing B.Sc. Hons CS, students can pursue various career paths,
including:</p>
<ul>
<li>Software Developer</li>
<li>Data Analyst</li>
<li>System Administrator</li>
<li>Computer Science Researcher</li>
<!-- Add more possibilities as needed -->
</ul>
</div>

<button id="style-button">Style Page</button>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS
/* Add your default styles here */
#course-details {
max-width: 600px;
margin: 20px auto;
}

h1, h2 {
color: #333;
}

ul {
list-style-type: none;
padding: 0;
}

button {
margin: 20px;
padding: 10px;
font-size: 16px;
}

JAVASCRIPT
$(document).ready(function() {
$('#style-button').click(function() {
// Redesign the complete page using jQuery
$('#course-details').css({
'background-color': '#f5f5f5',
'padding': '20px',
'border-radius': '10px',
'box-shadow': '0 0 10px rgba(0, 0, 0, 0.1)'
});

$('h1, h2').css('color', '#4285f4');

$('ul').css({
'margin-left': '20px',
'padding-left': '20px',
'border-left': '2px solid #4285f4'
});

$('button').css({
'background-color': '#4285f4',
'color': '#fff',
'cursor': 'not-allowed'
}).prop('disabled', true).text('Page Styled');
});
});

You might also like