CS202 ASSIGNMENT 1 SOLUTION FALL 2023 | CS202 ASSIGNMENT 1 SOLUTION 2023 | CS202 ASSIGNMENT 1 2023 | FUNDAMENTALS OF FRONT-END DEVELOPMENT | VuTech
Visit Website For More Solutions
www.vutechofficial.blogspot.com
KINDLY, DON’T COPY PASTE
Question No. 1
Imagine you've been contracted by a local animal shelter, "Paws & Tails Rescue," to build a user-friendly website that allows visitors to adopt available pets. Your task is to design and develop the front-end of the website. Your web page should look like the sample web page given below.
Sample Web Page:
Solution Instructions:
- Use basic HTML, which you have learnt till Lecture 7 to design your web page as sample page.
- You also have to use HTML basic tags, HTML Table tags, HTML Form tags and HTML Form elements like input, label, button etc to design sample web page.
- The background color (bgcolor) of the table should be wheat.
- For “Preferred Pet Species” add 4 options to the drop-down list like dog, cat, rabbit, and other.
Solution Code:
<!DOCTYPE html>
<html>
<head>
<title>Paws & Tails Rescue Adoption Form</title>
<style>
table {
background-color: wheat;
border: 1px solid black;
}
td {
padding: 10px;
}
input, select {
width: 100%;
}
</style>
</head>
<body>
<h1>Paws & Tails Rescue Adoption Form</h1>
<form action="/action_page.php" method="post">
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td>Phone:</td>
<td><input type="tel" name="phone"></td>
</tr>
<tr>
<td>Address:</td>
<td><input type="text" name="address"></td>
</tr>
<tr>
<td>Preferred Pet(s):</td>
<td><input type="text" name="preferred_pets"></td>
</tr>
<tr>
<td>Preferred Pet Species:</td>
<td><select name="preferred_pet_species">
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="rabbit">Rabbit</option>
<option value="other">Other</option>
</select></td>
</tr>
<tr>
<td>Are you interested in adopting more than one pet?</td>
<td><input type="radio" name="adopt_multiple_pets" value="yes"> Yes
<input type="radio" name="adopt_multiple_pets" value="no"> No</td>
</tr>
<tr>
<td>Preferred Pet Size:</td>
<td><select name="preferred_pet_size">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select></td>
</tr>
<tr>
<td colspan="1"><input type="submit" value="Submit"></td>
<td colspan="1"><input type="reset" value="Reset"></td>
</tr>
</table>
</form>
</body>
</html>