Untitled

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Javascript Timetable</title>
        <!-- <link rel="stylesheet" type="text/css" href="../css/css.css"> -->
        <style type="text/css">
#timeTableBody {
    text-align: center;
    line-height: 1.9em;
    font-style: italic;
    font-family: Georgia, "Time New Roman", Times, serif;
    color: #444444;
    border-color: black;
    border-width: 1px;
    border-style: dotted;
    background-color: #a7cece;
    padding: 25px;
    margin: 30px;
}
        </style>
        <script type="text/javascript">
// attach listener to window.load
window.addEventListener('load', function () {
    document.getElementById('clickme').addEventListener('click', myFunction, false);
}, false);

// function definition gets hoisted so after is okay for this example
function myFunction() {
    var x,
        d = document.getElementById('usersDay').value,
        y = parseInt(d);
    switch (y) {
        case 0:
            x=alert("Lectures on day 0? Really?");
            break;

        case 1:
            x="On Monday we have: CS1004 Lectures at 11:00 - 12:00 am & 14:00 - 15:00pm | CS1701 Lab at 15:00 - 16:00pm";
            break;

        case 2:
            x="On Tuesday we have: CS1701/CS1702 Netball Hall lab from 9:00 - 10:00am | CS1005 Lecture from 10:00 - 11:00 | CS1005 Lab from 11:00 - 12:00 | CS1701 Lecture from 15:00 - 16 :00 | CS1702 Lab from 15:00 - 17:00";
            break;

        case 3:
            x="On Wednesday we have: No Lectures (We're Green Group)";
            break;

        case 4:
            x="On Thursday we have: CS1703 Lecture from 09:00 - 10:00 | CS1703 Lab from 10:00 - 11:00 | CS1702 Lecture from 14:00 - 15:00";
            break;

        case 5:
            x="On Friday we have: No lectures!";
            break;

        case 6:
            x="No Lectures/Labs on Saturday";
            break;

        case 7:
            x="No Lectures/Labs on Sunday";
            break;

        default:
            alert("Please input a number between 1 and 7. 1 for Monday, 2 for Tuesday and so on...");
            break;
    }
    document.getElementById("demo").innerHTML=x;
}
        </script>
    </head>
    <body id="timeTableBody">
        <p>Type in the day of the week in the text box (numbers 1 to 7) and click 'search' to view our timetable on the chosen day</p>

        <input type="number" min="1" max="7" id="usersDay" />
        <button id="clickme">search</button>

        <p id="demo"></p>
    </body>
</html>