Seeking help for my mini CRUD project created using vanilla JS and HTML. The main challenge is to dynamically add or remove items from an array of movies and display the updated list without refreshing the page since the movie data is hard-coded.
The issue arises when trying to prevent duplicate arrays from being displayed on the page each time a title is added or removed.
If anyone has a solution to this problem, it would be greatly appreciated!
Below is a snippet of the current code:
window.onload = function () {
//Hard-coded array of movies - data.
// No database connection so array resets on page refresh.
var movies = [
'The Shawshank Redemption', 'The Godfather', 'Star Wars: Episode V - The Empire Strikes Back',
'Forrest Gump', 'The Perks of Being a Wallflower', 'The Dark Knight', 'Changeling', 'It\'s a Wonderful Life',
'The Silence of the Lambs', '8 Mile', 'The Breakfast Club', 'Django Unchained', 'Silver Linings Playbook',
'The Shining', 'Seven', 'American Beauty', 'Pulp Fiction', 'Zero Dark Thirty', 'Argo', 'The Hurt Locker'
];
// DOM manipulation variables
// var movieList = document.getElementById("movie-list__container");
var videoInput = document.getElementById("videoInput");
var addVideo = document.getElementById("addVideo");
var removeVideo = document.getElementById("removeVideo");
var alertMsg = document.getElementById("alertMsg");
var autocomplete = document.getElementById("autocomplete");
var searchResults = document.getElementById("search-results");
var movieListResults = document.getElementById("movie-list-results");
listMovies();
function listMovies() {
movies.sort();
for (i = 0; i < movies.length; i++) {
movieListResults.innerHTML += "<li>" + movies[i] + "</li>"
};
}
addVideo.onclick = addMovies;
function addMovies() {
var title = videoInput.value;
if (add(movies, title)) {
videoInput.value = "";
searchResults.innerHTML = '';
movieListResults.innerHTML += "<li>" + title + "</li>";
alertMsg.classList.remove("fail");
alertMsg.classList.add("success");
alertMsg.innerHTML = "Title was inserted successfully";
} else {
alertMsg.innerText = 'Please add a video title';
alertMsg.classList.remove("success");
alertMsg.classList.add("fail");
}
}
function add(data, title) {
if (title == "") {
return false;
} else {
data.push(title);
return true;
}
}
autocomplete.onkeyup = function () {
var results = [];
var userInput = this.value;
searchResults.innerHTML = "";
if (userInput != "") {
results = search(movies, userInput);
searchResults.style.display = "block";
if (results.length == 0) {
searchResults.innerHTML += "<li>Not found</li>";
searchResults.style.color = "grey";
} else {
searchResults.style.color = "black";
for (i = 0; i < results.length; i++) {
searchResults.innerHTML += "<li>" + results[i] + "</li>";
}
}
}
};
function search(data, input) {
var results = [];
for (i = 0; i < data.length; i++) {
if (input.toLowerCase() === data[i].slice(0, input.length).toLowerCase()) {
results.push(data[i]);
}
}
return results;
}
removeVideo.onclick = deleteMovie;
function deleteMovie() {
var title = videoInput.value;
if (title === "") {
alertMsg.innerHTML = 'Please enter the title you want to remove';
alertMsg.classList.add("fail");
} else {
if (remove(movies, title)) {
alertMsg.innerHTML = "Title has been successfully removed";
alertMsg.classList.add("success");
} else {
alertMsg.innerHTML = "Title not found";
alertMsg.classList.add("fail");
}
}
}
function remove(data, title) {
for (var i = 0; i < data.length; i++) {
if (title.toLowerCase() === data[i].toLowerCase()) {
data.splice(i, 1);
return true;
}
}
return false;
}
}; //End of window.onload