Movies From A Hat

The entire list is stored as an array. We'll pull a movie at random and then remove it from the list.

by xdumaine

HTML

<div class="selection-container">
    <button id="selectBtn">Select A Movie</button>
    <p id="selection" style="display: none"></p>
</div>

<div class="previous-selection-container">
    <h2>Previous Selections</h2>
    <ul id="watched">
    </ul>
    
    <h2>Future Selections</h2>
    <ul id="movies">
        
    </ul>
</div>

CSS

body{
    background: #eee;
}
.selection-container{
    text-align: center;
    background: #fff;
    margin: 20px;
    padding: 20px;
    color: #fff;
    border: 1px solid #ccc;
}

button{
    transition: opacity .25s;
    background: #c00;
    border: none;
    color: #fff;
    padding: 8px 10px;
    border-radius: 5px;
    cursor: pointer;
}

button:hover{
    opacity: .7;
    transition: opacity .25s;
}

.selection-container p{
    font-family: georiga, times, serif;
    color: #999;
    margin-top: 30px;
    margin-bottom: 0px;
    font-size: 1em;
}

.selection-container p span{
    font-family: arial, sans-serif;
    color: #000;
    display: block;
    font-weight: bold;
    margin-top: 10px;
    font-size: 2em;  
    line-height: 1.4em;
}

.selection-container p span a {
    color: #000;
    text-decoration: none;
}

.selection-container p span a:hover{
    color: #c00;
}

.previous-selection-container{
    margin: 20px;
    text-align: center;
}

.previous-selection-container h2{
    font-size: 1em;
    font-weight: bold;
    font-family: arial, sans-serif;
}

.previous-selection-container ul{
    list-style: none;
    font-size: .8em;
    padding: 0;
}

.previous-selection-container span{
    font-style: italic;   
    color: #999;
}

.previous-selection-container a{
    color: #999;
    text-decoration: none;
}

.previous-selection-container a:hover{
    color: #c00;
}

.previous-selection-container ul{
    line-height: 1.5em;
}

JavaScript

var movies = [
    ["Roman Holiday (1953)","http://www.imdb.com/title/tt0046250/"],
    ["The Magnificent Seven (1960)","http://www.imdb.com/title/tt0054047/"],
    ["Yojimbo (1961)","http://www.imdb.com/title/tt0055630/"],
    ["The Birds (1963)","http://www.imdb.com/title/tt0056869/"],
    ["Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb (1964)","http://www.imdb.com/title/tt0057012/","2015-02-07"],
    ["The Andromeda Strain (1971)","http://www.imdb.com/title/tt0066769/"],
    ["Enter the Dragon (1973)","http://www.imdb.com/title/tt0070034/"],
    ["Westworld (1973)","http://www.imdb.com/title/tt0070909/"],
    ["Monty Python and the Holy Grail (1975)","http://www.imdb.com/title/tt0071853/"],
    ["The Jerk (1979)","http://www.imdb.com/title/tt0079367/"],
    ["Super Fuzz (1980)","http://www.imdb.com/title/tt0082924/"],
    ["The Natural (1984)","http://www.imdb.com/title/tt0087781/"],
    ["The Adventures of Buckaroo Banzai Across the 8th Dimension (1984)","http://www.imdb.com/title/tt0086856/"],
    ["Better Off Dead… (1985)","http://www.imdb.com/title/tt0088794/"],
    ["Spies Like Us (1985)","http://www.imdb.com/title/tt0090056/"],
    ["Big Trouble in Little China (1986)","http://www.imdb.com/title/tt0090728/"],
    ["The Golden Child (1986)","http://www.imdb.com/title/tt0091129/"],
    ["Raising Arizona (1987)","http://www.imdb.com/title/tt0093822/"],
    ["Akira (1988)","http://www.imdb.com/title/tt0094625/"],
    ["Bull Durham (1988)","http://www.imdb.com/title/tt0094812/"],
    ["The Serpent and the Rainbow (1988)","http://www.imdb.com/title/tt0096071/"],
    ["Willow (1988)","http://www.imdb.com/title/tt0096446/"],
    ["Nothing But Trouble (1991)","http://www.imdb.com/title/tt0102558/"],
    ["The Meteor Man (1993)","http://www.imdb.com/title/tt0107563/"],
    ["Stargate (1994)","http://www.imdb.com/title/tt0111282/"],
    ["Congo (1995)","http://www.imdb.com/title/tt0112715/"],
    ["Twelve Monkeys...