Page 301 - Web Applications (803) Class 12
P. 301

margin-bottom: 1rem;
                     }

                     button {
                         background-color: #333;
                         color: #fff;

                         border: none;
                         padding: 0.5rem 1rem;
                         cursor: pointer;

                     }
                     #edit-section.hidden {
                         display: none;

                     }
                 File3: Pscript.js

                     // Get elements from the DOM
                     const editButton = document.getElementById(‘edit-button’);

                     const editSection = document.getElementById(‘edit-section’);
                     const profileForm = document.getElementById(‘profile-form’);
                     const nameElement = document.getElementById(‘name’);

                     const ageElement = document.getElementById(‘age’);
                     const locationElement = document.getElementById(‘location’);
                     const editName = document.getElementById(‘edit-name’);
                     const editAge = document.getElementById(‘edit-age’);

                     const editLocation = document.getElementById(‘edit-location’);
                     // Event listener for the “Edit Profile” button
                     editButton.addEventListener(‘click’, () => {

                         editSection.classList.toggle(‘hidden’);
                         nameElement.classList.toggle(‘hidden’);
                         ageElement.classList.toggle(‘hidden’);
                         locationElement.classList.toggle(‘hidden’);

                         // Pre-fill form fields with existing data
                         editName.value = nameElement.textContent;
                         editAge.value = ageElement.textContent;

                         editLocation.value = locationElement.textContent;
                     });
                     // Event listener for the profile form submission
                     profileForm.addEventListener(‘submit’, (e) => {

                         e.preventDefault();
                         // Update the profile information with the new values


                                                                                                          Projects   299
   296   297   298   299   300   301   302   303   304   305   306