JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<!DOCTYPE html>
<?php
?>
<html>
  <head>
    <title>Gaspy Calendar Project</title>
    
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <script type="text/javascript" src="jquery-migrate-1.1.0.js"></script>

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

  <!--   <link rel="shortcut icon" href="images/favicon.ico" /> -->

  </head>
  <body>
    <div id="main">
      <div id="calendar" align="center">
        <div id="yearPicker">
          <a class="buttons" id="previous" href="#">&lt;&lt;</a><span id="year">2012</span><a class="buttons" id="next" href="#">&gt;&gt;</a>
        </div>
        <div id="monthPicker">
          <a href="#" id="month">Jan</a>
          <a href="#" id="month">Feb</a>
          <a href="#" id="month">Mar</a>
          <a href="#" id="month">Apr</a>
          <a href="#" id="month">May</a>
          <a href="#" id="month">Jun</a>
          <a href="#" id="month">Jul</a>
          <a href="#" id="month">Aug</a>
          <a href="#" id="month">Sep</a>
          <a href="#" id="month">Oct</a>
          <a href="#" id="month">Nov</a>
          <a href="#" id="month">Dec</a>
        </div>
        <div id="personsList">
          <i>-no month selected-</i>
        </div>
      </div>
      <div id="addPersons">
        <u>Add Persons Form</u>
        <form id="addPersonsForm" name="addPersonsForm" method="post" action="">
          <p class="field">
            <input id="personName" name="personName" type="textBox" placeholder="Name of Contributor" />
          </p>
          <p class="field">
            <span id="amountDue">$</span>
            <input id="contributionDue" name="contributionDue" type="number" value="10" />
          </p>
          <p class="field">
            <input id="contributionCycle" name="contributionCycle" type="range" value="1" min="1" max="12" />
            <span id="amountCycle">every month</span>
   ...

CSS

* {
  padding: 0px;
  margin: 0px;
}

.clearer {clear: both;}

#main
{
  height: 600px;
  width: 900px;
  border: 2px solid #000;
}

.field
{
  border: 2px solid #000;
}

#calendar
{
/*  border: 2px solid orange;*/
  width: 49%;
  float: left;
}

#addPersons
{
/*  border: 2px solid purple;*/
  width: 49%;
  float: right;
}

#yearPicker
{
  width: 400px;
/*  border: 2px solid #00ff00;*/
}

#monthPicker
{
  width: 400px;
/*  border: 2px solid #ff0000;*/
}

#personsList
{
  width: 400px;
/*  border: 2px solid #0000ff;*/
}

.buttons, .buttons:focus, .buttons:hover
{
  text-decoration: none;
  color: #000;
}

#month, #month:focus, #month:hover
{
  text-decoration: none;
}

#month
{
  color: #0000ff;
/*  border: 2px solid #000;*/
}

#month:hover
{
  color: #00ff00;
}

#infoSubmitted {

    cursor: pointer;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0));
    background: -moz-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
    background: -webkit-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
    background: -o-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
    background: -ms-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
    background: linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0',GradientType=0);

    background-color: #3d94f6;

    -moz-border-radius: 19px;
    -webkit-border-radius: 19px;
    border-radius: 19px;

    border: 1px solid #337fed;

    margin-top: 5px;

    display: block;
    color :#fff;
    font-family: arial;
    font-size: 15px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;

    text-shadow: 0px 1px 0px #1570cd;

}
#infoSubmitted:active {
    position: relative;
    top: 1px;
}

JavaScript

var year = "";
var plural = "";

$(document).ready(function () {

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

    //deals with position of main
    var windowWidth = Math.round($(window).width() / 2);
    var divWidth = Math.round($("#main").width() / 2);

    var left = windowWidth - divWidth;
    $("#main").css("margin-left", left);
  });

  //deals with positioning of main when window is resized
  $(window).on("resize", function () {

    //deals with position of main
    windowWidth = Math.round($(window).width() / 2);
    divWidth = Math.round($("#main").width() / 2);

    var left = windowWidth - divWidth;
    $("#main").css("margin-left", left);     
  });

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

    year = parseInt($("#year").html());
    year++;

    $("#year").html(year);
    $("#personsList").html("<i>-no month selected-</i>");
  });

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

    year = parseInt($("#year").html());
    year--;

    $("#year").html(year);
    $("#personsList").html("<i>-no month selected-</i>");
  });

  $("#monthPicker").children().on("click", function () {

    $("#personsList").html("<i>" + $("#year").html() + " " + $(this).html() + "</i>");
  });

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

    if ($("#contributionCycle").val() == 1)
    {
      $("#amountCycle").html("every month");
      plural = "every month";
    }
    else if ($("#contributionCycle").val() != 1)
    {
      $("#amountCycle").html("every " + $("#contributionCycle").val() + " months");
    }
  });

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

    event.preventDefault();

    if ($("#personName").val() != "")
    {
      var contributorNameSelected = $("#personName").val();
      var contributionDueSelected = $("#contributionDue").val();
      var contributionCycleSelected = $("#contributionCycle").val();
      
      if (contributionCycleSelected == 1)
      {
        plural = "every month";
      }
      else if (contributionCycleSelected >= 1)
     ...