Scribd
Upload
20 views8 pages

Practical 5: Practical On Javascript: 1. Home Page & About Me Form

Uploaded by

Hot Brain
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
20 views8 pages

Practical 5: Practical On Javascript: 1. Home Page & About Me Form

Uploaded by

Hot Brain
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
You are on page 1/ 8

Practical5: Practical on Javascript________________________________________________________________

Practical 5: Practical on Javascript


[Based on a user event, access data on the page and log it in the console (Once admin
submits the form to add any new record, access all form fields data and log it in the
console as name & value pair.)]

Outcome:

1. Home Page & about me form:

2. Image ,Projects & Achievement form:

Manas Vora [922001004056] 66


Practical5: Practical on Javascript________________________________________________________________

3. Skills & Contact form:

HTML:

home.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
}
.navbar {
background-color: #343a40;
}
.navbar-brand, .nav-link {
color: #ffffff !important;
}
.navbar-brand {
font-size: 1.7rem;
font-weight: 600;
Manas Vora [922001004056] 67
Practical5: Practical on Javascript________________________________________________________________

}
.nav-link:hover {
background-color: #495057;
border-radius: 5px;
}
.card {
margin-bottom: 20px;
border-radius: 12px;
}
.card-header {
background-color: #007bff;
color: #fff;
border-radius: 10px 10px 0 0;
text-align: center;
}
.form-label {
font-weight: bold;
}
.btn-primary {
background-color: #0056b3;
border: none;
}
.btn-primary:hover {
background-color: #004085;
}
footer {
background-color: #343a40;
color: #ffffff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>

<!-- Navbar -->


<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand" href="#">Manas Portfolio</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="#">Achievements</a></li>
Manas Vora [922001004056] 68
Practical5: Practical on Javascript________________________________________________________________

<li class="nav-item"><a class="nav-link" href="#">Skills</a></li>


<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>

<!-- Main Container -->


<div class="container my-4">
<div class="row justify-content-center">

<!-- Home Page Form -->


<div class="col-lg-6 col-md-8">
<div class="card">
<div class="card-header"><b>Home Page Details</b></div>
<div class="card-body">
<form class="dynamic-form">
<div class="mb-3">
<label for="name" class="form-label">Your Name</label>
<input type="text" class="form-control" name="name" value="Hi, my name
is Manas">
</div>
<div class="mb-3">
<label for="shortDescription" class="form-label">Short Bio</label>
<input type="text" class="form-control" name="shortDescription"
value="Software Developer passionate about technology.">
</div>
<div class="mb-3">
<label for="tagline" class="form-label">Tagline</label>
<input type="text" class="form-control" name="tagline" placeholder="Enter
a catchy tagline">
</div>
<button type="submit" class="btn btn-primary w-100">Save Changes</button>
</form>
</div>
</div>
</div>

<!-- About Page Form -->


<div class="col-lg-6 col-md-8">
<div class="card">
<div class="card-header"><b>About Me</b></div>
<div class="card-body">
<form class="dynamic-form">
<div class="mb-3">
<label for="aboutMe" class="form-label">About Me</label>
<textarea class="form-control" name="aboutMe" rows="5">I am a Software
Developer with a focus on web technologies...</textarea>
</div>
<div class="mb-3">
Manas Vora [922001004056] 69
Practical5: Practical on Javascript________________________________________________________________

<label for="experience" class="form-label">Experience</label>


<input type="text" class="form-control" name="experience" value="5+
years in Web Development">
</div>
<div class="mb-3">
<label for="location" class="form-label">Location</label>
<input type="text" class="form-control" name="location" value="Mumbai,
India">
</div>
<button type="submit" class="btn btn-primary w-100">Save Changes</button>
</form>
</div>
</div>
</div>

<!-- Projects Form -->


<div class="col-lg-6 col-md-8">
<div class="card">
<div class="card-header"><b>Projects</b></div>
<div class="card-body">
<form class="dynamic-form">
<div class="mb-3">
<label for="projectName" class="form-label">Project Name</label>
<input type="text" class="form-control" name="projectName"
placeholder="Enter your latest project">
</div>
<div class="mb-3">
<label for="projectDesc" class="form-label">Project Description</label>
<textarea class="form-control" name="projectDesc" rows="4"
placeholder="Brief description of the project"></textarea>
</div>
<div class="mb-3">
<label for="projectLink" class="form-label">Project Link</label>
<input type="url" class="form-control" name="projectLink"
placeholder="Project URL (e.g., GitHub)">
</div>
<button type="submit" class="btn btn-primary w-100">Save Project</button>
</form>
</div>
</div>
</div>

<!-- Achievements Form -->


<div class="col-lg-6 col-md-8">
<div class="card">
<div class="card-header"><b>Achievements</b></div>
<div class="card-body">
<form class="dynamic-form">
<div class="mb-3">
<label for="achievementTitle" class="form-label">Achievement Title</label>
Manas Vora [922001004056] 70
Practical5: Practical on Javascript________________________________________________________________

<input type="text" class="form-control" name="achievementTitle"


placeholder="Award or Recognition">
</div>
<div class="mb-3">
<label for="achievementDate" class="form-label">Date</label>
<input type="date" class="form-control" name="achievementDate">
</div>
<button type="submit" class="btn btn-primary w-100">Save
Achievement</button>
</form>
</div>
</div>
</div>

<!-- Skills Form -->


<div class="col-lg-6 col-md-8">
<div class="card">
<div class="card-header"><b>Skills</b></div>
<div class="card-body">
<form class="dynamic-form">
<div class="mb-3">
<label for="skillName" class="form-label">Skill Name</label>
<input type="text" class="form-control" name="skillName"
placeholder="Enter a skill (e.g., JavaScript)">
</div>
<div class="mb-3">
<label for="skillLevel" class="form-label">Proficiency Level</label>
<select class="form-control" name="skillLevel">
<option>Beginner</option>
<option>Intermediate</option>
<option>Advanced</option>
<option>Expert</option>
</select>
</div>
<button type="submit" class="btn btn-primary w-100">Save Skill</button>
</form>
</div>
</div>
</div>

<!-- Contact Form -->


<div class="col-lg-6 col-md-8">
<div class="card">
<div class="card-header"><b>Contact Information</b></div>
<div class="card-body">
<form class="dynamic-form">
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" name="email"
value="[email protected]">
Manas Vora [922001004056] 71
Practical5: Practical on Javascript________________________________________________________________

</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone Number</label>
<input type="text" class="form-control" name="phone" value="+91
1234567890">
</div>
<div class="mb-3">
<label for="linkedin" class="form-label">LinkedIn Profile</label>
<input type="url" class="form-control" name="linkedin"
placeholder="https://linkedin.com/in/your-profile">
</div>
<button type="submit" class="btn btn-primary w-100">Save Contact
Info</button>
</form>
</div>
</div>
</div>

</div>
</div>

<!-- Footer -->


<footer>
<p>&copy; 2024 Manas Portfolio Admin Panel. All Rights Reserved.</p>
</footer>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></
script>
<script src="home.js"></script>
</body>
</html>

Javascript:

Home.js

document.querySelectorAll('.dynamic-form').forEach(form => {
form.addEventListener('submit', function (e) {
e.preventDefault();

const formData = new FormData(form);


const formObject = {};

formData.forEach((value, key) => {


formObject[key] = value;
});

displaySavedData(formObject, form);

console.log("Form submitted data:", formObject);


Manas Vora [922001004056] 72
Practical5: Practical on Javascript________________________________________________________________

alert('Form data saved successfully and displayed below the form.');


});
});

function displaySavedData(data, form) {


const cardBody = form.closest('.card-body');

let savedDataSection = cardBody.querySelector('.saved-data');


if (savedDataSection) {
savedDataSection.remove();
}

savedDataSection = document.createElement('div');
savedDataSection.className = 'saved-data mt-4';

let dataHtml = '<h5>Saved Data:</h5><ul class="list-group">';


Object.keys(data).forEach(key => {
dataHtml += `<li class="list-group-item"><strong>${capitalizeFirstLetter(key)}:</strong> $
{data[key]}</li>`;
});
dataHtml += '</ul>';

savedDataSection.innerHTML = dataHtml;

cardBody.appendChild(savedDataSection);
}

function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}

Manas Vora [922001004056] 73

You might also like