D3 Examples - TV Episode Guide

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>T.V.</title>
    <style>
        div {
            /* border: 1px solid crimson; */
            margin: auto;
            max-width: 750px;
            width: 100%;
        }
        div#info {
            max-width: 750px;
            width: 75%;
        }
        h1, h4 {
            margin: auto;
            text-align: center;
            width: 75%;
        }
        input[type="text"] {
            display: block;
            margin : auto;
            max-width: 400px;
            width: 75%;
        }
        div#buttonDiv {
            max-width: 500px;
        }
        button#getdata {
            display: block;
            margin : 5px auto;
            max-width: 150px;
            width: 50%;
        }
        .button {
            background: crimson;
            border: 2.5px solid white;
            border-radius: 20px;
            color: white;
            font-size: 20px;
            line-height: 20px;
            padding: 5px;
            text-align: center;
            width: 10%;
        }
        .button:hover {
            background: black;
            color: white;
            cursor: pointer;
        }
        text {
            pointer-events:none;
        }
        .axis path,
        .axis line {
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;
        }
    </style>
    <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
</head>
<body>
    <div id="header">
        <h1>TV Episode Guide</h1>
        <h4>Search for the IMDb ratings of your favorite TV show</h4>
        <br>
        <input type="text" id="title" value="" placeholder="Enter TV series">
        <button id="getdata" class="button">Search</button>
    </div>
​
    <div id="content">
        <div id="info"></div>
        <div id="chartContainer"></div>
    </div>
​
    <script src="app.js" type="text/javascript"></script>
</body>
</html>
    