Assignments Of Class 5 - Buttons and Alerts
Assignment 1: Create Basic Buttons
Problem Statement: Create a webpage with three buttons: "Primary," "Secondary," and "Danger." Style them using btn-primary, btn-secondary, and btn-danger.
Steps to Solution
1. Set up HTML:
Begin with a basic HTML structure.
2. Link Bootstrap:
Include the Bootstrap CSS using a CDN.
3. Add Buttons:
Use <button> tags and assign Bootstrap button classes (btn-primary, btn-secondary, and btn-danger).
Code Solution
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic Buttons</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-danger">Danger</button>
</div>
</body>
</html>
Assignment 2: Add Button Sizes
Problem Statement: Create three buttons labeled "Large," "Default," and "Small" with sizes btn-lg, default, and btn-sm.
Steps to Solution
1. Set up the basic HTML structure and link Bootstrap.
2. Add <button> elements with btn-lg for large, default size (no class), and btn-sm for small.
Code Solution
html
Copy code
<div class="container mt-5">
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-sm">Small</button>
</div>
Assignment 3: Add a Disabled Button
Problem Statement: Create a "Submit" button and make it disabled.
Steps to Solution
1. Create a button with the btn-primary class.
2. Add the disabled attribute to the button.
Code Solution
html
Copy code
<div class="container mt-5">
<button class="btn btn-primary" disabled>Submit</button>
</div>
Assignment 4: Create Alerts for Success and Error
Problem Statement: Display two alerts: one for success and one for error using alert-success and alert-danger.
Steps to Solution
1. Add a div with the alert alert-success class for success messages.
2. Add another div with the alert alert-danger class for error messages.
Code Solution
html
Copy code
<div class="container mt-5">
<div class="alert alert-success" role="alert">
Operation completed successfully!
</div>
<div class="alert alert-danger" role="alert">
An error occurred. Please try again.
</div>
</div>
Assignment 5: Add Dismissible Alert
Problem Statement: Create a dismissible warning alert.
Steps to Solution
1. Use the alert-dismissible class to make the alert closable.
2. Add a button with the btn-close class for closing the alert.
Code Solution
html
Copy code
<div class="container mt-5">
<div class="alert alert-warning alert-dismissible fade show" role="alert">
Warning! Proceed with caution.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
Assignment 6: Style a Link as a Button
Problem Statement: Create a hyperlink styled as a button with the label "Visit."
Steps to Solution
1. Use an <a> tag and apply the btn and btn-info classes.
Code Solution
html
Copy code
<div class="container mt-5">
<a href="https://example.com" class="btn btn-info">Visit</a>
</div>
Assignment 7: Create a Page with Multiple Alerts
Problem Statement: Create success, error, and info alerts on a single page.
Steps to Solution
1. Add three div elements, each with appropriate alert classes (alert-success, alert-danger, alert-info).
Code Solution
html
Copy code
<div class="container mt-5">
<div class="alert alert-success" role="alert">
Success alert message!
</div>
<div class="alert alert-danger" role="alert">
Error alert message!
</div>
<div class="alert alert-info" role="alert">
Information alert message!
</div>
</div>
Assignment 8: Create a Button to Trigger an Alert
Problem Statement: Create a button that triggers an alert (basic JS implementation).
Steps to Solution
1. Add a button with an onclick attribute.
2. Use JavaScript to display an alert message when the button is clicked.
Code Solution
html
Copy code
<div class="container mt-5">
<button class="btn btn-primary" onclick="showAlert()">Click Me</button>
</div>
<script>
function showAlert() {
alert("Button clicked!");
}
</script>
Assignment 9: Create a Themed Buttons Section
Problem Statement: Add a set of buttons using all Bootstrap button styles (primary, secondary, success, etc.).
Steps to Solution
1. Create multiple <button> elements with appropriate classes (btn-primary, btn-secondary, etc.).
Code Solution
html
Copy code
<div class="container mt-5">
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
</div>
Assignment 10: Add a Navbar with Buttons
Problem Statement: Create a simple navbar with buttons styled as navigation links.
Steps to Solution
1. Use a <nav> element to create a navbar.
2. Add <button> elements styled as navigation links.
Code Solution
html
Copy code
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<button class="btn btn-primary">Home</button>
<button class="btn btn-secondary">About</button>
<button class="btn btn-success">Contact</button>
</div>
</nav>
No comments:
Post a Comment