Created
October 26, 2017 15:01
-
-
Save marsicdev/b843579633e03414a0700183994687ce to your computer and use it in GitHub Desktop.
Movie form example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function Movie(title, length, genre) { | |
| this.title = title; | |
| this.length = length; | |
| this.genre = genre; | |
| } | |
| Movie.prototype.getInfo = function () { | |
| return this.title + ", " + this.genre; | |
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Array to store all our movies | |
| var movies = []; | |
| function createMovie() { | |
| // Get references to elements | |
| var titleElement = document.getElementById("movie-title"); | |
| var lengthElement = document.getElementById("movie-length"); | |
| var genreSelectElement = document.getElementById("genre-select"); | |
| var genreOptionElement = genreSelectElement[genreSelectElement.selectedIndex]; | |
| var movieListElement = document.getElementById("movie-list"); | |
| var errorElement = document.getElementById("error"); | |
| // Get element values | |
| var title = titleElement.value; | |
| var length = lengthElement.value; | |
| var genre = genreOptionElement.value; | |
| // Validate form | |
| var isInvalidForm = !title || !length || (genre === "none"); | |
| if (isInvalidForm) { | |
| errorElement.textContent = "Error"; | |
| return; | |
| } | |
| // Reset error if any | |
| errorElement.textContent = ""; | |
| // Create movie object | |
| var movie = new Movie(title, length, genre); | |
| // Add movie to list of movies | |
| movies.push(movie); | |
| // | |
| movieListElement.innerHTML = createListHTML(movies); | |
| titleElement.value = ""; | |
| lengthElement.value = ""; | |
| } | |
| function createListHTML(array) { | |
| // Building our HTML starting with | |
| // open <ul> tag | |
| var movieListHTML = "<ul>"; | |
| // Iterate array and for each element create | |
| // new <li> element and append to string | |
| for (var i = 0; i < array.length; i++) { | |
| var film = array[i]; | |
| movieListHTML += "<li>" + film.getInfo() + "</li>" | |
| } | |
| // Finish list by closed </ul> | |
| movieListHTML += "</ul>" | |
| // Return formated html string | |
| return movieListHTML; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Movie list</title> | |
| <link rel="stylesheet" href="./main.css"> | |
| <script src="./entities.js"></script> | |
| <script src="./form.js"></script> | |
| </head> | |
| <body> | |
| <h1>Movie list</h1> | |
| <form> | |
| <input type="text" id="movie-title" value="" placeholder="Title"> | |
| <input type="number" id="movie-length" value="" placeholder="Length"> | |
| <select name="genre-select" id="genre-select"> | |
| <option value="none">-</option> | |
| <option value="action">action</option> | |
| <option value="drama">drama</option> | |
| <option value="commedy">commedy</option> | |
| </select> | |
| <div id="error"></div> | |
| <input type="button" onclick="createMovie()" value="Create movie"> | |
| <hr> | |
| <div id="movie-list"></div> | |
| </form> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment