Movie Management System in JavaScript with Source Code

March 15, 2021February 25, 2021 by adones evangelista

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.

Watch the video here to see the full running Movie Management System Project In JavaScript With Source Code

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.

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
        &lt;title&gt;Movie Management System&lt;/title&gt;
        &lt;link rel="stylesheet" href="style.css"&gt;
        &lt;script defer src="https://kit.fontawesome.com/9f767eca8f.js" crossorigin="anonymous"&gt;&lt;/script&gt;
        &lt;script defer src="main.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;header&gt;
          
        &lt;/header&gt;
        &lt;div class="container"&gt;
            &lt;center&gt;&lt;div class="container__header"&gt;
               &lt;img src="images/itsourcecode.png" id="" alt="JS logo" width="1400px" height="150px"&gt;
                
            &lt;/div&gt;&lt;/center&gt;
            &lt;div class="container__movie-system"&gt;
                &lt;nav&gt;
                    &lt;li data-nav-list class="active"&gt;All movies&lt;/li&gt;
                    &lt;li data-nav-list&gt;Action&lt;/li&gt;
                    &lt;li data-nav-list&gt;Comedy&lt;/li&gt;
                    &lt;li data-nav-list&gt;Drama&lt;/li&gt;
                    &lt;li data-nav-list&gt;Horror&lt;/li&gt;
                    &lt;li data-nav-list&gt;Romance&lt;/li&gt;
                &lt;/nav&gt;
                &lt;div class="movie-system__movie-list"&gt;
                    &lt;button class="movie-list__add-movie"&gt;
                        &lt;i class="fas fa-video"&gt;&lt;/i&gt; Add movie
                    &lt;/button&gt;
                    &lt;div class="movie-list__empty-item"&gt;
                        &lt;i class="fas fa-plus fa-7x"&gt;&lt;/i&gt;&lt;br&gt;&lt;br&gt;
                        Click the 'Add Movie' button to enter an entry
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="movie__modal-box"&gt;
                    &lt;div class="movie__modal-content"&gt;
                        &lt;div class="movie__modal-header"&gt;
                            Enter movie credentials
                            &lt;div class="close"&gt;&amp;times&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="movie__add-movie"&gt;
                            &lt;div class="add-movie__genre-image"&gt;&lt;/div&gt;  
                            &lt;div class="add-movie__input-form"&gt;
                                &lt;label for="movie-name"&gt;Enter name of the movie&lt;/label&gt;&lt;br&gt;
                                &lt;input name="name" type="text" id="movie-name" required&gt;&lt;br&gt;

                                &lt;label for="movie-genre"&gt;Choose genre&lt;/label&gt;&lt;br&gt;
                                &lt;select name="genre" id="movie-genre"&gt;
                                    &lt;option value="None"&gt;--Select a genre--&lt;/option&gt;
                                    &lt;option value="Action"&gt;Action&lt;/option&gt;
                                    &lt;option value="Comedy"&gt;Comedy&lt;/option&gt;
                                    &lt;option value="Drama"&gt;Drama&lt;/option&gt;
                                    &lt;option value="Horror"&gt;Horror&lt;/option&gt;
                                    &lt;option value="Romance"&gt;Romance&lt;/option&gt;
                                &lt;/select&gt;&lt;br&gt;

                                &lt;label for="movie-rating"&gt;Enter rating&lt;/label&gt;&lt;br&gt;
                                &lt;select name="rating" id="movie-rating"&gt;
                                    &lt;option value="None"&gt;--Choose rating--&lt;/option&gt;
                                    &lt;option value="0"&gt;0&lt;/option&gt;
                                    &lt;option value="1"&gt;1&lt;/option&gt;
                                    &lt;option value="2"&gt;2&lt;/option&gt;
                                    &lt;option value="3"&gt;3&lt;/option&gt;
                                    &lt;option value="4"&gt;4&lt;/option&gt;
                                    &lt;option value="5"&gt;5&lt;/option&gt;
                                &lt;/select&gt;&lt;br&gt;

                                &lt;label for="movie-description"&gt;Enter description or summary of the movie&lt;/label&gt;&lt;br&gt;
                                &lt;textarea name="description" id="movie-description"&gt;&lt;/textarea&gt;&lt;br&gt;

                                &lt;input type="submit" id="add-movie" value="Add movie"&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;

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.

@import url('https://fonts.googleapis.com/css?family=Roboto&amp;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&#91;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}
}

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.

const navigationBar = document.querySelectorAll('&#91;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 = () =&gt; {
    //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 = '&lt;i class="fas fa-trash-alt fa-2x"&gt;&lt;/i&gt;';
    trashBin.addEventListener('click', () =&gt; {
       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 = () =&gt; {
    const genreLogo = document.querySelector('#movie-genre').value;
    switch(genreLogo) {
        case 'Action':
            return '&lt;img src="images/action.jpg"&gt;';
        case 'Comedy':
            return '&lt;img src="images/comedy.png"&gt;';
        case 'Drama':
            return '&lt;img src="images/drama.jpg"&gt;';
        case 'Horror':
            return '&lt;img src="images/horror.png"&gt;';
        case 'Romance':
            return '&lt;img src="images/romance.jpg"&gt;';
        default:
            return '';
    }
}

//Change the movie ratings
const changeMovieRating = () =&gt; {
    const rating = document.querySelector('#movie-rating').value;
    const remainingStar = 5 - rating;
    let starRatings = '';
    for(let i = 0; i &lt; rating; i++) {
        starRatings += '&lt;i class="fas fa-star" style="margin-right: 4px"&gt;&lt;/i&gt;';
    }
    for(let i = 0; i &lt; remainingStar; i++) {
        starRatings += '&lt;i class="far fa-star" style="margin-right: 4px"&gt;&lt;/i&gt;';
    }
    return starRatings;
}

//Validation of forms
const validation = (title, genre, rating, description) =&gt; {
    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&#91;genre.selectedIndex].value === 'None') {
        genre.style.borderColor = 'red';
        hasErrors = true;
    }
    else {
        genre.style.borderColor = 'white';
    }

    //Rating validation
    if(rating.options&#91;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) =&gt; {
    //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 = () =&gt; movieList.childElementCount &lt;= 2 ? emptyMessage.style.display = 'block' : emptyMessage.style.display = 'none';


//Filter out all movies by genre
const filterMovies = chosenGenre =&gt; {
    const movieItem = Array.from(document.querySelectorAll('.movie-list__movie-item'));
    let selectedGenre = &#91;];

    movieItem.forEach(movie =&gt; movie.style.display = 'flex');
    switch(chosenGenre) {
        case 'Action':
            selectedGenre = movieItem.filter(movie =&gt; movie.children&#91;2].children&#91;1].textContent !== 'Action');
            break;
        case 'Comedy':
            selectedGenre = movieItem.filter(movie =&gt; movie.children&#91;2].children&#91;1].textContent !== 'Comedy');
            break;
        case 'Drama':
            selectedGenre = movieItem.filter(movie =&gt; movie.children&#91;2].children&#91;1].textContent !== 'Drama');
            break;
        case 'Horror':
            selectedGenre = movieItem.filter(movie =&gt; movie.children&#91;2].children&#91;1].textContent !== 'Horror');
            break;
        case 'Romance':
            selectedGenre = movieItem.filter(movie =&gt; movie.children&#91;2].children&#91;1].textContent !== 'Romance');
            break;
        default:
            break;
    }
    selectedGenre.forEach(movie =&gt; movie.style.display = 'none');
}

//Navigation bar setting to active whenever clicked
navigationBar.forEach(navigation =&gt; {
    navigation.addEventListener('click', e =&gt; {
        filterMovies(navigation.textContent);
        const active = document.querySelector('.active');
        active.classList.remove('active');
        navigation.classList.add('active');
    });
});

//For opening of modal box
addMovieButton.addEventListener('click', () =&gt; {
    movieModal.style.display = 'block';
});

//When closing of modal box through x icon
closeMovieModal.addEventListener('click', () =&gt; {
    movieModal.style.display = 'none';
});

//Add movie modal submit button
addMovieToList.addEventListener('click', e =&gt; {
    addMovie(); //Add movies
});

//Selecting genre and changing its logo in modal 
selectGenre.addEventListener('change', e =&gt; {
    genreLogo.innerHTML = changeMovieLogo();
});

//Whenever the user clicks outside the modal
window.addEventListener('click', e =&gt; {
    if(e.target === movieModal) { //If the user clicks outside the modal content
        movieModal.style.display = 'none';
    }
});

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';

}

});

Run Quick Virus Scan for secure Download

Run Quick Scan for safe Download

Downloadable 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 2021 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!

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.

Leave a Comment Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.