JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<!DOCTYPE html>
<?php

session_start();

if(!isset($_SESSION['session_name'])){
    header("Location: splash.php");
}

?>
<html>
    <head>
        <title>Personal Organizer</title>

        <script type="text/javascript" src="scripts/jquery-1.8.3.js"></script>

        <script type="text/javascript" src="scripts/home.js"></script>
        <link rel="stylesheet" media="screen" type="text/css" href="css/home.css"/>

    </head>
    <body>
        <div id="settings">
            <div id="border">
                <div>
                    <form method="post" action="">
                        <input id="logoutButton" name="logout" type="submit" value="Logout">
                        <?php
                        if(isset($_POST['logout']))
                        {
                            session_start();
                            unset($_SESSION);
                            session_destroy();
                            header("Location: splash.php");
                            exit;
                        }
                        ?>
                    </form>
                </div>
                <div id="option">
                    <a href="options.php">Options</a>
                </div>
            </div>
        </div>
        <div id="container">
            <div id="main">
                <div id="user" align="center"><?php echo $_SESSION['session_name'] ?></div>
                <div id="boxes">
                    <a href="pages/kan/ics4u.php">
                        <div id="subject">Computer Science</div>
                    </a>
                    <a href="#addsubject">
                        <div id="addsubject"><img src="images/add.png" /></div>
                    </a>
                </div>
                <div id="addwindowcontainer">
                    <div id="addwindow">
                        <a id="close" href="#"><img src="images/close-button.png"/></a>
                        <form method="get" action="">
                   ...

CSS

/* CSS Reset */
* { margin:0; padding:0; }

body {
    background-color: #eaf0f3;
}

#main {
    width: 960px;
    height: 768px;
}

#boxes {
    margin-left: 100px;
}

#subject, #addsubject {
    width: 120px;
    height: 125px;
    font-family: "Segoe UI Light",Arial,Serif;
    font-size: 20pt;
    color: #fff;
    text-align: right;
    padding-right: 5px;
    margin: 10px 10px 10px 10px;
    position: relative;
    float:left;
}

#subject {
    background-color: #ff0000;
}

#user {
    font-family: "Segoe UI",Arial,Serif;
    font-size: 36pt;
    margin-bottom: 50px;
}

#addwindowcontainer {
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

#addwindow {
    background-color: #eaf0f3;
    width: 600px;
    height: 400px;
    z-index: 999999;
    top: 50%;
    left: 50%;
    margin-left: -300px;
    margin-top: -300px;
    position: absolute;
}

#close {
    float: right;
    margin-top: 3px;
    margin-right: 5px;
}

#courseChooser {
    display: none;
}

a, a:active, a:link, a:visited {
    text-decoration: none;
    color: #000000;
}

.clearer {clear: both}

#settings {
    margin-right: 25%;
    float: right;
    cursor: pointer;
    background-image: url("../images/settings-button.png");
    width: 32px;
    height: 32px;
}

#option, #logoutButton {
    border: 1px solid #999999;
    background-color: #d9d9d9;
    text-decoration: none;
    font-size: 12pt;
    font-family: "Segoe UI",Arial,Serif;
}

#option {
    width: 49px;
    padding: 3px 12px 3px 3px;
}

#logoutButton {
    cursor: pointer;
    margin-top:32px;
    padding: 3px 12px 3px 3px;
    border-bottom-style: none;
}

#option:hover, #logoutButton:hover{
    background-color: #d0d0d0;
}

JavaScript

$(document).ready(function () {

    $("#addwindowcontainer").hide();

    $("#settings>div").hide();

    $(window).on("load", function () {

        var windowWidth = Math.round($(window).width() / 2);

        var divWidth = Math.round($("#main").width() / 2);

        var left = windowWidth - divWidth;

        $("#main").css("margin-left", left);

        $("#container").css("height", $(window).height() - 10);
    });

    $(window).on("resize", function () {

        windowWidth = Math.round($(window).width() / 2);

        divWidth = Math.round($("#main").width() / 2);

        left = windowWidth - divWidth;

        $("#main").css("margin-left", left);

        $("#container").css("height", $(window).height() - 10);
        
    });

    $("#addsubject").on("click", function () {

        $("#addwindowcontainer").fadeIn("slow");

    });

    $("#close").on("click", function () {

        $("#addwindowcontainer").fadeOut("slow");
        $("#courseChooser").css("display", "none");

    });

    $("#teacherChooser").on("change", function () {

        $("#courseChooser").css("display", "block");

        var teacherSelected = $("#teacherChooser").val();

        console.log(teacherSelected);

        $.ajax({
            type: "POST",
            data: {teacher: teacherSelected},
            async: false,
            success: function(data){
                console.log(data);
            }
        });
    });

    $("#settings").on("click", function () {
        if ($("#settings").hasClass("opened")) {
            $("#settings").removeClass("opened");
            $("#settings>div").css("display", "none");
        }
        else {
            $("#settings").addClass("opened");
            $("#settings>div").css("display", "block");
        }
    });

    $("#container").on("click", function() {
        if ($("#settings").hasClass("opened")) {
            $("#settings").removeClass("opened");
            $("#settings>div").css("display", "none");
        }

...