Scribd
Upload
9 views5 pages

Pet Information Form in JavaScript

The document describes a solution to create a pet information form that accepts a pet's name, age, weight, type, and favorite thing. It includes HTML, CSS, and JavaScript code. When submitted, the form data is used to create a Pet object that is logged to the console along with its equivalent JSON.

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
9 views5 pages

Pet Information Form in JavaScript

The document describes a solution to create a pet information form that accepts a pet's name, age, weight, type, and favorite thing. It includes HTML, CSS, and JavaScript code. When submitted, the form data is used to create a Pet object that is logged to the console along with its equivalent JSON.

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

Sakshi Sharma

21/5005

Create a form that takes data about a pet.


The form must be well designed and
should accept the pet’s name, age,
weight, type, and what it likes most. At the
submission of this form create a Pet
object in JavaScript filled with these
values and log that object and equivalent
JSON on the console.

Solution:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Pet Information Form</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>

<div class="container">
<h1>Pet Information Form</h1>
<form id="petForm">
<label for="petName">Name:</label>
<input type="text" id="petName" name="petName"
required>

<label for="petAge">Age:</label>
<input type="number" id="petAge" name="petAge"
required>

<label for="petWeight">Weight (kg):</label>


<input type="number" id="petWeight"
name="petWeight" step="0.1" required>

<label for="petType">Type:</label>
<input type="text" id="petType" name="petType"
required>

<label for="petLikes">What it likes most:</label>


<input type="text" id="petLikes" name="petLikes"
required>

<button type="button"
onclick="submitForm()">Submit</button>
</form>
</div>

<script src="[Link]"></script>
</body>
</html>
CSS([Link])
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
}

.container {
max-width: 400px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
}

form {
display: flex;
flex-direction: column;
}

label {
margin-top: 10px;
}

input {
margin-bottom: 10px;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
}

button {
padding: 10px;
background-color: #4285f4;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}

button:hover {
background-color: #317ae2;
}
JAVASCRIPT([Link])
function submitForm() {
// Get form values
var petName =
[Link]('petName').value;
var petAge =
parseInt([Link]('petAge').value);
var petWeight =
parseFloat([Link]('petWeight').value);
var petType = [Link]('petType').value;
var petLikes = [Link]('petLikes').value;
// Create Pet object
var petObject = {
name: petName,
age: petAge,
weight: petWeight,
type: petType,
likes: petLikes
};

// Log Pet object and its equivalent JSON


[Link]('Pet Object:', petObject);
[Link]('Equivalent JSON:', [Link](petObject));
}

You might also like