Movie Review Generator

by alexbfree

HTML

<label for="title">Title:</label>
<br/>
<input type="text" id="title" name="title" placeholder="enter title">
<label for="year">Year:</label>
    <input type="text" id="year" name="year" placeholder="enter year"><br/>
<label for="country">Country:</label>
<input type="text" id="country" name="country" placeholder="enter country">
<br/>
<label for="rating">Director:</label>
<input type="text" id="director" name="director" placeholder="enter director">
<label for="length">Length (mins):</label>
<input type="text" id="length" name="length" placeholder="enter length in minutes">
<br/>
<label for="imageHTML">Image HTML</label>
<input type="text" id="imageHTML" name="imageHTML" placeholder="enter image HTML">
<br/>
<label for="review">Review:</label>
<br/>
<textarea rows="5" cols="100" id="review" name="review" placeholder="enter review"></textarea>
<br/>
<label for="rating">Rating:</label>
<input type="text" id="rating" name="rating" placeholder="enter rating">
<br/>
<label for="fantasialink">Fantasia Link:</label>
    <input type="text" id="fantasialink" name="fantasialink" placeholder="enter fantasia link"><a id="fantasiaclick" TARGET="_BLANK">link</a> | <a id="fantasiagoogle" TARGET="_BLANK">google</a>
<br/>
<label for="imdblink">IMDB Link:</label>
<input type="text" id="imdblink" name="imdblink" placeholder="enter imdb link"><a id="imdbclick" TARGET="_BLANK">link</a> | <a id="imdbgoogle" TARGET="_BLANK">google</a>
<br/>
<label for="imdbdateslink">IMDB Dates Link:</label>
<input type="text" id="imdbdateslink" name="imdbdateslink" placeholder="enter imdb dates link"><a id="imdbdatesclick" TARGET="_BLANK">link</a> | <a id="imdbdatesgoogle" TARGET="_BLANK">google</a>
<br/>
<label for="availability">Availability Text:</label>
<input type="text" id="availability" name="availability" placeholder="enter availability">
<br/>
<label for="trailerlink">Trailer Link:</label>
<input type="text" id="trailerlink" name="trailerlink" placeholder="enter trailer link"><a...

CSS

/*
Theme Name: Modest
Theme URI: http://www.elegantthemes.com/gallery/
Version: 1.4
Description: 2 Column theme from Elegant Themes
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
*/

/*------------------------------------------------*/

/*-----------------[RESET]------------------------*/

/*------------------------------------------------*/

/* http://meyerweb.com/eric/tools/css/reset/ */

/* v1.0 | 20080212 */
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content: none;
}
/* remember to define focus styles! */
 :focus {
    outline: 0;
}
/* remember to highlight inserts somehow! */
 ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
 table {
    border-collapse: collapse;
    border-spacing: 0;
}
/*------------------------------------------------*/

/*-----------------[BASIC STYLES]-----------------*/

/*------------------------------------------------*/
 body {
    line-height: 18px;
    font-family:'Droid Sans', arial, serif;
    font-size: 12px;
    color: #3c3c3c;
    background: url(http://alexbowyer.com/wp-content/themes/Modest/images/footer-bg.png);
}
a {
    text-decoration: none;
    color: #00b7f3;
}
a:hover {
    text-decoration: underline;
}
.clear {
    clear: both;
}
.ui-tabs-hide {
    display: none;
}
br.clear {
    margin: 0px;
    padding: 0px;
}
h1, h2, h3, h4, h5, h6 {
   ...

JavaScript

String.prototype.capitalize = function () {
    return this.charAt(0).toUpperCase() + this.slice(1);
};

function generate() {
    var country = $('#country').val().capitalize();
    var country_lc = country.toLowerCase();
    var title = $('#title').val();
    var anchor = title.replace(/\s+/g, '-').toLowerCase();
    var year = $('#year').val();
    var director = $('#director').val();
    var filmlength = $('#length').val();
    var rating = $('#rating').val();
    var review = $('#review').val();
    var rating = $('#rating').val();
    var imgHTML = $('#imageHTML').val();
    var fantasialink = $('#fantasialink').val();
    var imdblink = $('#imdblink').val();
        var imdbdateslink = $('#imdbdateslink').val();
    var availability = $('#availability').val();
    var trailerlink = $('#trailerlink').val();
    var spoilers = $('#spoilers').val();
    var out = "<hr />";

    out += '<h1><a name="' + country + '"></a>' + country + '</h1>';
    out += '<div class="movierow"><a name="'+anchor+'">';
    out += '<a href="' + fantasialink + '">';
    out += imgHTML+'</a>';
    out += '<h2>' + title + ' (' + country + ', ' + year;
    if (filmlength) {
        out += ', ' + filmlength + ' mins';
    }
    out += ')</h2>';
    out += '<h3>Directed by ' + director + '</h3>';
    out += '<p>' + review + '</p>';
    out += '<p>';
    out += '<strong>Rating:</strong> ' + rating + '<br />';
    out += '<strong>Availability:</strong> ' + availability + ' <a href="' + imdbdateslink + '">more</a><br />';
    out += '<strong>Links:</strong> ';
    out += '<a href="' + fantasialink + '">Fantasia</a> | ';
    out += '<a href="' + imdblink + '">IMDb</a> | ';
    out += '<a href="' + trailerlink + '">Trailer</a> (' + spoilers + ')';
    out += '</p></div>';
    out += '<p>View the <a href="http://www.fantasiafestival.com/2013/en/films-schedule/films/country:' + country_lc + '">full list of movies from ';
    out += country + " shown at Fantasia 2013</a>.</p>";
    out +=...