Movie Management System in JavaScript with Source Code
The Movie Management System in JavaScript is a simple project designed in JavaScript language using HTML and CSS platform. It is very easy to use the features of this Movie Management System, so even users would not find it difficult to use the system. In the text fields, you simply type or pick any movie of your choice and on the Add Movie button you write the details of the movie. You can easily delete any movies if you want to drop them from the list.
This movie management system has action movies, drama, comedy , drama, horror, romance, and many more, there are many film genres to choose from. The user has the option to add a movie and create a list of movies with their descriptions in this Movie Management System, such as name, category, place ratings and you can also write a brief summary of the movie.
This simple mini project for Movie Management System in JavaScript is complete and totally error free and also includes a downloadable Source Code for free, just find the downloadable source code below and click to start downloading. Before you start to click the download now first you must click the Run Quick Scan for secure Download.
These are the following features of Movie Management System in JavaScript
- Homepage – In the homepage you can see the all movies, action, comedy, drama, horror, and romance.
- All Movies – using this system you can see all the movies genre.
- Manage Add Action Movies – using this system you can add action movies.
- Add Comedy Movies – using this system you can add comedy movies.
- Manage Add Drama Movies – using this system you can add drama movies.
- Add Horror Movies – using this system you can add horror movies.
- Manage Add Romance Movies – using this system you can add romance movies.
- Delete Movies – using this system you can also delete movies.
I have here a suggested list of Best JavaScript Projects with Source Code Free to download and I’m sure this can help you to improve your skills in JavaScript programming and web development as a whole.
Anyway if you want level up your knowledge in programming especially JavaScript Programming, try this new article I’ve made for you Best JavaScript Projects With Source Code For Beginners 2021.
To start creating a Movie Management System in JavaScript with Source Code, make sure that you have any platform in creating a JavaScript, bootstrap, and HTML installed in your computer, in my case I will use Sublime Text.
Movie Management System in JavaScript Steps on how to create a project
Time needed: 5 minutes.
Here’s the Steps on How to Create a Movie Management System in JavaScript with Source Code
- Step 1: Open Sublime Text.
First, after installing sublime text IDE, click “open” to start.
- Step 2: Create a HTML file.
Next, click “file” and select “save as” and named it “index.html“.
- Step 3: Create a JavaScript file.
Then, click “file” and select “save as” and named it “script.js“.
- Step 4: Create a CSS file.
Last, click “file” and select “save as” and named it “style.css“.
- Step 5: The actual code.
Finally, You are free to copy the code given below and paste to your different file created.
Code for the index.html in Movie Management System in JavaScript
In the code given below, which is the code contains the interface of the application. This code will show the form that will be use in html.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Movie Management System</title> <link rel="stylesheet" href="style.css"> <script defer src="https://kit.fontawesome.com/9f767eca8f.js" crossorigin="anonymous"></script> <script defer src="main.js"></script> </head> <body> <header> </header> <div class="container"> <center><div class="container__header"> <img src="images/itsourcecode.png" id="" alt="JS logo" width="1400px" height="150px"> </div></center> <div class="container__movie-system"> <nav> <li data-nav-list class="active">All movies</li> <li data-nav-list>Action</li> <li data-nav-list>Comedy</li> <li data-nav-list>Drama</li> <li data-nav-list>Horror</li> <li data-nav-list>Romance</li> </nav> <div class="movie-system__movie-list"> <button class="movie-list__add-movie"> <i class="fas fa-video"></i> Add movie </button> <div class="movie-list__empty-item"> <i class="fas fa-plus fa-7x"></i><br><br> Click the 'Add Movie' button to enter an entry </div> </div> <div class="movie__modal-box"> <div class="movie__modal-content"> <div class="movie__modal-header"> Enter movie credentials <div class="close">&times</div> </div> <div class="movie__add-movie"> <div class="add-movie__genre-image"></div> <div class="add-movie__input-form"> <label for="movie-name">Enter name of the movie</label><br> <input name="name" type="text" id="movie-name" required><br> <label for="movie-genre">Choose genre</label><br> <select name="genre" id="movie-genre"> <option value="None">--Select a genre--</option> <option value="Action">Action</option> <option value="Comedy">Comedy</option> <option value="Drama">Drama</option> <option value="Horror">Horror</option> <option value="Romance">Romance</option> </select><br> <label for="movie-rating">Enter rating</label><br> <select name="rating" id="movie-rating"> <option value="None">--Choose rating--</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select><br> <label for="movie-description">Enter description or summary of the movie</label><br> <textarea name="description" id="movie-description"></textarea><br> <input type="submit" id="add-movie" value="Add movie"> </div> </div> </div> </div> </div> </div> </body> </html> |
Code for the style.css in Movie Management System in JavaScript
In the code given below, which is the code contains the interface design of the application. This code will show the form that will be use for designing.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 |
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); :root { --red: rgb(229,9,20); --white: rgb(255, 255, 255); --black: rgb(0, 0, 0); } * { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; } /*Background image*/ body { position: absolute; background-color: blue; background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; overflow-y: hidden; } /*Background image owner*/ header { padding: 10px; color: black; background-color: white; width: 250px; opacity: 0.7; } h3 { font-size: 16px; color: black; } p { margin: 10px auto; } /*Logo*/ #logo { width: 80px; margin-right: 20px; font-size: 90px; color: rgb(204,204,0); } .container { width: 1300px; height: 500px; background-color: rgb(210, 210, 210); box-shadow: 15px 13px 5px 0px rgba(71, 71, 71, 0.75); margin: 0 20px; padding: 10px 10px 20px 10px; } /*Header part*/ .container__header { display: flex; background-color: darkblue; } .container__title { margin-top: 5px; } /*Navigation bar*/ nav { background-color: green; text-align: center; } li { display: inline-block; text-align: center; padding: 20px; margin: 5px; border-radius: 10px; transition: 0.3s; } li:hover { padding: 19px; border-collapse: collapse; border: 1px solid var(--white); } .active { background-color: var(--white); color: #0D7B75; } /*Movie filter system*/ .container__movie-system { margin: 10px 0; width: 100%; height: 420px; background: rgb(0, 0, 0); color: white; } .movie-system__movie-list { height: 350px; overflow: auto; display: grid; grid-template-columns: repeat(2, 1fr); min-width: 0; background-color: yellowgreen; } .movie-list__add-movie { grid-column: 1/3; height: 50px; padding: 10px; margin: 10px 10px 0 10px; text-align: center; font-size: 20px; font-weight: bold; cursor: pointer; background-color: transparent; color: var(--white); border: solid 1px var(--white); outline: none; transition: 0.5s all; } .movie-list__add-movie:hover { background-color: red; border: 1px solid #0D7B75; } .movie-list__empty-item { display: block; grid-column: 1/3; color: gray; font-size: 20px; height: 250px; margin: 10px; padding-top: 20px; text-align: center; } .movie-list__movie-item { display: flex; height: 150px; margin: 10px; padding: 10px; border: 2px solid var(--white); overflow: hidden; transition: 0.5s all; } .movie-list__movie-item:hover { border-color: #0D7B75; } .movie-logo { text-align: center; margin: auto; padding: 10px; width: 200px; color: #0D7B75; } .movie-description { width: 100%; } .movie-genre { padding: 5px 0; } .movie-rating { padding: 5px 0; color: #0D7B75; } /*Add movie modal box*/ .movie__modal-box { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-color: rgb(255, 255, 255, 0.5); animation-name: open-modal; animation-duration: 1s; } .movie__modal-content { width: 50%; height: 70%; margin: 5% auto; background-color: yellowgreen; animation-name: open-modal-content; animation-duration: 1s; } .movie__modal-header { background-color: yellowgreen; padding: 10px; font-size: 25px; font-weight: bold; text-align: center; } .movie__add-movie { display: flex; background-color: blue; } .add-movie__genre-image { margin: 10px; padding: 10% 10px; border: 2px solid var(--white); width: 80%; text-align: center; font-size: 30px; color: #0D7B75; } .add-movie__input-form { margin: 10px 10px 10px 0; display: block; padding: 0 10px; font-size: 16px; width: 100%; color: white; } input[type="text"], select, textarea { background-color: transparent; border: solid 2px var(--white); color: var(--white); padding: 3px; margin: 5px 0; width: 100%; } select { width: 102.5%; } textarea { resize: none; height: 100px; } option { background-color: var(--black); } .trash-icon { cursor: pointer; transition: 0.5s all; } .trash-icon:hover { color: #0D7B75; } #add-movie { background-color: green; color: var(--white); border: solid transparent; font-size: 20px; padding: 5px; width: 102.5%; cursor: pointer; } .close { margin: -10px 5px; float: right; font-size: 40px; cursor: pointer; } @keyframes open-modal { from{opacity: 0} to{opacity: 1} } @keyframes open-modal-content { from{opacity: 0; margin: 0 auto} to{opacity: 1; margin: 5% auto} } |
Code for the script.js in Movie Management System in JavaScript
In the code given below, which is the code contains the interface function of the application. This code will show the function of the form that will be use in html.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 |
const navigationBar = document.querySelectorAll('[data-nav-list]'); const addMovieButton = document.querySelector('.movie-list__add-movie'); const movieModal = document.querySelector('.movie__modal-box'); const closeMovieModal = document.querySelector('.close'); //Adding movie into the list const addMovieToList = document.querySelector('#add-movie'); const movieList = document.querySelector('.movie-system__movie-list'); const selectGenre = document.querySelector('#movie-genre'); const genreLogo = document.querySelector('.add-movie__genre-image'); //Removing the empty message display const emptyMessage = document.querySelector('.movie-list__empty-item'); //Add movie into the list const addMovie = () => { //Create a new item const newMovieItem = document.createElement('div'); newMovieItem.className = 'movie-list__movie-item'; //Place of movie description container const newMovieDescriptionContainer = document.createElement('div'); newMovieDescriptionContainer.className = 'movie-description'; //Place of trash bin for delete const trashBin = document.createElement('div'); trashBin.className = 'trash-icon'; trashBin.innerHTML = '<i class="fas fa-trash-alt fa-2x"></i>'; trashBin.addEventListener('click', () => { movieList.removeChild(newMovieItem); //Display empty message displayEmptyMessage(); }); //Place of logo const newMovieLogo = document.createElement('div'); newMovieLogo.className = 'movie-logo'; newMovieLogo.innerHTML = changeMovieLogo(); //Movie title const newMovieTitle = document.createElement('h2'); newMovieTitle.textContent = document.querySelector('#movie-name').value; //Movie genre const newMovieGenre = document.createElement('div'); newMovieGenre.classList = 'movie-genre'; newMovieGenre.textContent = document.querySelector('#movie-genre').value; //Movie rating const newMovieRating = document.createElement('div'); newMovieRating.className = 'movie-rating'; newMovieRating.innerHTML = changeMovieRating(); //Movie description const newMovieDescription = document.createElement('p'); newMovieDescription.textContent = document.querySelector('#movie-description').value; //Validation in the add movie form if(validation( document.querySelector('#movie-name'), document.querySelector('#movie-genre'), document.querySelector('#movie-rating'), document.querySelector('#movie-description') )) { movieModal.style.display = 'block'; return; } //Append the description information inside the container newMovieDescriptionContainer.appendChild(newMovieTitle); newMovieDescriptionContainer.appendChild(newMovieGenre); newMovieDescriptionContainer.appendChild(newMovieRating); newMovieDescriptionContainer.appendChild(newMovieDescription); //Append the container newMovieItem.appendChild(trashBin); newMovieItem.appendChild(newMovieLogo); newMovieItem.appendChild(newMovieDescriptionContainer) //Add the movie list into the container movieList.appendChild(newMovieItem); //Close modal as the item is listed movieModal.style.display = 'none'; clearFormat(document.querySelector('#movie-name'), document.querySelector('#movie-genre'), document.querySelector('#movie-rating'), document.querySelector('#movie-description') ); //Remove empty message displayEmptyMessage(); } //Change the logo of movie according to genre const changeMovieLogo = () => { const genreLogo = document.querySelector('#movie-genre').value; switch(genreLogo) { case 'Action': return '<img src="images/action.jpg">'; case 'Comedy': return '<img src="images/comedy.png">'; case 'Drama': return '<img src="images/drama.jpg">'; case 'Horror': return '<img src="images/horror.png">'; case 'Romance': return '<img src="images/romance.jpg">'; default: return ''; } } //Change the movie ratings const changeMovieRating = () => { const rating = document.querySelector('#movie-rating').value; const remainingStar = 5 - rating; let starRatings = ''; for(let i = 0; i < rating; i++) { starRatings += '<i class="fas fa-star" style="margin-right: 4px"></i>'; } for(let i = 0; i < remainingStar; i++) { starRatings += '<i class="far fa-star" style="margin-right: 4px"></i>'; } return starRatings; } //Validation of forms const validation = (title, genre, rating, description) => { let hasErrors = false; //Naming validation if(title.value === undefined || title.value === '') { title.style.borderColor = 'red'; hasErrors = true; } else { title.style.borderColor = 'white'; } //Genre validation if(genre.options[genre.selectedIndex].value === 'None') { genre.style.borderColor = 'red'; hasErrors = true; } else { genre.style.borderColor = 'white'; } //Rating validation if(rating.options[rating.selectedIndex].value === 'None') { rating.style.borderColor = 'red'; hasErrors = true; } else { rating.style.borderColor = 'white'; } //Description validation if(description.value === undefined || description.value === '') { description.style.borderColor = 'red'; hasErrors = true; } else { description.style.borderColor = 'white'; } //Return if it has errors return hasErrors; } //Clear error formatting as the movie item is sent const clearFormat = (title, genre, rating, description) => { //Remove image genreLogo.innerHTML =''; //Default border colors title.style.borderColor = 'white'; genre.style.borderColor = 'white'; rating.style.borderColor = 'white'; description.style.borderColor = 'white'; //Clear all values title.value = ''; genre.value = 'None'; rating.value = 'None'; description.value = ''; } //Whether to display the empty message or not depending on the number of movies const displayEmptyMessage = () => movieList.childElementCount <= 2 ? emptyMessage.style.display = 'block' : emptyMessage.style.display = 'none'; //Filter out all movies by genre const filterMovies = chosenGenre => { const movieItem = Array.from(document.querySelectorAll('.movie-list__movie-item')); let selectedGenre = []; movieItem.forEach(movie => movie.style.display = 'flex'); switch(chosenGenre) { case 'Action': selectedGenre = movieItem.filter(movie => movie.children[2].children[1].textContent !== 'Action'); break; case 'Comedy': selectedGenre = movieItem.filter(movie => movie.children[2].children[1].textContent !== 'Comedy'); break; case 'Drama': selectedGenre = movieItem.filter(movie => movie.children[2].children[1].textContent !== 'Drama'); break; case 'Horror': selectedGenre = movieItem.filter(movie => movie.children[2].children[1].textContent !== 'Horror'); break; case 'Romance': selectedGenre = movieItem.filter(movie => movie.children[2].children[1].textContent !== 'Romance'); break; default: break; } selectedGenre.forEach(movie => movie.style.display = 'none'); } //Navigation bar setting to active whenever clicked navigationBar.forEach(navigation => { navigation.addEventListener('click', e => { filterMovies(navigation.textContent); const active = document.querySelector('.active'); active.classList.remove('active'); navigation.classList.add('active'); }); }); //For opening of modal box addMovieButton.addEventListener('click', () => { movieModal.style.display = 'block'; }); //When closing of modal box through x icon closeMovieModal.addEventListener('click', () => { movieModal.style.display = 'none'; }); //Add movie modal submit button addMovieToList.addEventListener('click', e => { addMovie(); //Add movies }); //Selecting genre and changing its logo in modal selectGenre.addEventListener('change', e => { genreLogo.innerHTML = changeMovieLogo(); }); //Whenever the user clicks outside the modal window.addEventListener('click', e => { if(e.target === movieModal) { //If the user clicks outside the modal content movieModal.style.display = 'none'; } }); |
ABOUT PROJECT | PROJECT DETAILS |
---|---|
Project Name : | Movie Management System in JavaScript |
Project Platform : | JavaScript |
Programming Language Used: | php,javascript,html,css |
Developer Name : | itsourcecode.com |
IDE Tool (Recommended): | Sublime |
Project Type : | Web Application |
Database: | None |
Upload Date: | February 25, 2021 |
Run Quick Virus Scan for secure Download
Run Quick Scan for safe DownloadDownloadable Source Code
How to setup the Movie Management System in JavaScript with Source Code
- Download the zip file.
- Download and install XAMPP
- Run the XAMPP control panel and start MySQL and Apache
- Go to C:\xampp\htdocs and extract the downloaded zip file (movie-system) inside the folder.
How to run the Movie Management System in JavaScript with Source Code
- Open the chrome/browser and go to http://localhost/movie-system/

Summary
In summary, this 2022 Movie Management System in JavaScript with Source Code can be useful to students or professional who wants to learn web development using JavaScript programming language and it is used html and css platform. This project can also be modified to fit your personal requirements. Hope this project will help you to improve your skills. Happy coding!
Related Articles
- To Do List Project in Python with Source Code | Video | 2020
- Currency Converter In Python With Source Code
- Music Player In JavaScript With Source Code
- CRUD Operation In JavaScript With Source Code
- Fibonacci Series In JavaScript With Source Code
- Calculator In JavaScript Source Code
- Library System in JavaScript with Source Code
- Random Password Generator in JavaScript with Source Code
- Ecommerce in JavaScript Framework with Source Code
- JavaScript Snake Game with Source Code
- Typing Game in JavaScript with Source Code
Inquiries
If you have any questions or suggestions about Movie Management System in JavaScript with Source Code, please feel free to leave a comment below.