Movielist - JavaScript Code
JAVASCRIPT CODE
2 // Select the movie list container and the forms
3 const list = document.querySelector('#movie-list ul');
4 const forms = document.forms;
5
6 // delete movie
7 list.addEventListener('click', (e) => {
8 if (e.target.className === 'delete') {
9 const li = e.target.parentElement;
10 li.parentNode.removeChild(li);
11 }
12 });
13
14 // add movie
15 const addForm = forms['add-movie'];
16 addForm.addEventListener('submit', function (e) {
17 e.preventDefault(); // prevent form from submitting and reloading page
18
19 // creating elements
20 const value = addForm.querySelector('input[type="text"]').value;
21 const li = document.createElement('li');
22 const movieName = document.createElement('span');
23 const deleteBtn = document.createElement('span');
24
25 // add text content
26 movieName.textContent = value;
27 deleteBtn.textContent = 'delete';
28
29 // add classes for styling or selecting
30 movieName.classList.add('name');
31 deleteBtn.classList.add('delete');
32
33 // append spans to li
34 li.appendChild(movieName);
35 li.appendChild(deleteBtn);
36
37 // append li to the list
38 list.appendChild(li);
39 });
40 });
Summary of the Script:
Lines 1–4: Wait for the DOM to fully load and then select necessary DOM elements.
Lines 6–12: Listen for clicks on the movie list and remove a movie if the delete button is clicked.
Lines 14–39: Listen for form submission, create a new list item (li) with the movie name and delete button, and append it to the movie list without reloading the page.
-----Some Questions------
Q1: What is className in line 8?
A: It checks if the clicked element has the class "delete" to identify delete buttons.
---
Q2: What is e?
A: e is the event object automatically passed to the event listener. It holds details like what was clicked, form data, etc.
---
Q3: How could you take e? It's not assigned anywhere.
A: e is automatically passed by the browser to the event function when the event happens — no need to assign it manually.
---
Q4: I can’t understand preventDefault()
A: It stops the browser’s default action (like refreshing the page when a form submits) so JavaScript can handle it instead.
---
Q5: Is line 20 an input line?
A: Yes, it gets the value typed in the input box and stores it in the value variable.
---
Q6: What is span in lines 22, 23?
A: span creates inline HTML elements — used here to show the movie name and a delete button.
---
Q7: What are classList and styling in lines 30, 31?
A: classList.add() adds a class to the element. Then, CSS styles that class (JavaScript only adds the class name).
---
Q8: What are li and list in line 38?
A: li is a new list item (movie), and list is the <ul> element in your HTML. The movie gets added to that list.
-----------------
HTML CODE
<!DOCTYPE html>
<html>
<head>
<title>Movie List</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="movie-list">
<h1>My Movie List</h1>
<form id="add-movie" name="add-movie">
<input type="text" placeholder="Add a movie">
<button type="submit">Add</button>
</form>
<ul>
<!-- Movies will appear here -->
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
CSS CODE
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
padding: 20px;
}
#movie-list {
max-width: 400px;
margin: auto;
background: white;
padding: 20px;
border-radius: 8px;
}
ul {
list-style: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
padding: 10px;
margin: 5px 0;
background: #e0e0e0;
border-radius: 4px;
}
.name {
font-weight: bold;
}
.delete {
color: red;
cursor: pointer;
}
SAMPLE IMAGE
Comments
Post a Comment