Scribd Logo
Upload

Welcome to Scribd!

  • PRACTCAL6

    Uploaded by

    Sakshi Sharma
    4 views3 pages
    its about practical to make website using html,javascript and css

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    its about practical to make website using html,javascript and css

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    4 views3 pages

    PRACTCAL6

    Uploaded by

    Sakshi Sharma
    its about practical to make website using html,javascript and css

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 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