Scribd
Upload
7 views7 pages

Web Developement

The document is an assignment by Riya Sahu for a Web Development course, detailing various CSS display properties and their effects. It includes JavaScript programs for adding numbers, checking even or odd numbers, event handling, and changing background colors. Additionally, it discusses Bootstrap, its advantages, and commonly used components with syntax examples.

Uploaded by

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

Web Developement

The document is an assignment by Riya Sahu for a Web Development course, detailing various CSS display properties and their effects. It includes JavaScript programs for adding numbers, checking even or odd numbers, event handling, and changing background colors. Additionally, it discusses Bootstrap, its advantages, and commonly used components with syntax examples.

Uploaded by

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

ASSIGNMENT

NAME : RIYA SAHU


PROGRAM : BCA
COURSE : WEB DEVELOPMENT-1
ROLL NO : 240BCA057
FACULTY : PROF. BHAWANA SHARMA

Q1 List different display property values and explain their effects using CSS.

Answer

 block: Elements take up the full width available.


 Example: <div>, <p>
 inline: Elements take only as much width as needed.
 Example: <span>, <a>
 inline-block: Like inline, but allows setting width and height.
 none: Hides the element from the page.
 flex: Makes the container a flex container for flexible layouts.
 grid: Enables grid layout system.
Q2 Write a program in JavaScript to add two numbers entered by the user.

Answer

How it works:
.prompt() is used to get input from the user.
.parseFloat() converts the input from string to a floating-point
number. .The two numbers are added and shown using alert().

3 Question:Write a JS program to check whether a number is even or odd using


if-else.

prompt() takes input from the user


. parseInt() converts the input into an integer.
% (modulus operator) checks the remainder when dividing by 2.
If remainder is 0 → Even; otherwise → Odd.

4 Question: What is event handling in JavaScript? Demonstrate with a


mouseover event.
Answer: Event Handling in JavaScript refers to the process of responding to
user actions (events) such as clicks, key presses, mouse movements, form
submissions, etc
 JavaScript allows us to "handle" these events by assigning functions
(event handlers) to run when an event occurs.
 Example: mouseover Event Let's demonstrate mouseover (which triggers
when the mouse pointer moves over an element)

5 Questions: Write a program where clicking a button changes the background color of a
web page.

ANSWER
The change Background() function generates a random color When the button is clicked, it
sets that color as the background of the using style background Color.
6 Questions: What is Bootstrap? Mention its advantages in web development.
Answer: Bootstrap is a free, open-source front-end framework used to create responsive and
mobile-first websites quickly and easily. It provides ready-made HTML, CSS, and JavaScript
components for building user interfaces like buttons, forms, modals, navigation bars, grids,
etc.
It was originally developed by Twitter engineers and is now maintained as an open-source
project.

 Advantages of Bootstrap in Web Development:


1Responsive Design ○ Automatically adjusts layout for desktops, tablets, and mobile devices
using its responsive grid system.
2 Pre-designed Components ○ Offers built-in UI components (buttons, modals, alerts,
carousels, forms, etc.), saving time and effort.
3 Cross-Browser Compatibility ○ Works well on all modern browsers like Chrome, Firefox,
Safari, Edge, etc.
4 . Easy to use Even beginners can use it easily by linking the Bootstrap CDN and using pre-
defined classes.
5. Customizable ○ You can override Bootstrap styles or customize it using Sass variables.
6. Time-Saving ○ Speeds up development by reducing the need to write custom CSS or
JavaScript for common elements.
7. Strong Community Support ○ Well-documented and supported by a large developer
community, so help and tutorials are widely available.

7 Question :List and explain at least 5 commonly used Bootstrap components


with syntax.
Answer: 1. Button Used to trigger actions or link to pages. Syntax: <button class="btn btn-
primary">Click Me</button>
Common Classes:
. btn: Base class for buttons.
. btn-primary, btn-success, btn-danger, btn-warning: Color variants.
2. Alert Used to show messages like success, error, warning, etc.
Syntax:
<div class="alert alert-success" role="alert">
Operation completed successfully!
</div>
Common Variants:
. alert-success (green), alert-danger (red), alert-warning (yellow), alert-info (blue)
3. Navbar (Navigation Bar)
Used to create responsive navigation headers.
Syntax
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">MySite</a>
<div class="collapse navbar-collapse"> <ul class="navbar-nav"> <li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</div>
</nav>
4. Card
Used to display content inside a flexible box with padding and borders.
Syntax:
<div class="card" style="width: 18rem;">
<img src="image.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Some quick text.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
5. Modal Used for pop-up dialog boxes or forms.
syntax
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-
target="#myModal">
Open Modal
</button>
<!-- Modal structure -->
<div class="modal fade" id="myModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal Title</h5>
<button type="button" class="btn-close"
data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
This is a modal body.
</div>
</div>
</div>
</div>

You might also like