<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Basic AJAX Project</title>
  <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="main.css">
  <script src="custom-script.js"></script>
</head>
<body>
  <div class="contained">
    <div class="heading">
      <h1>Basic AJAX Project</h1>
    </div>
    <section class="grid-70 main">
      <h2>Availability</h2>
      <div id="availability">
										
			</div>
		</section>
	</div>
</body>
</html>
// Availablity

var xhr = new XMLHttpRequest(),
    d = new Date(),
    m = d.getMonth(),
    months,
    statusHTML,
    monthsMax;
    
xhr.onreadystatechange = function () {
  if(xhr.readyState === 4 && xhr.status === 200) {
    months = JSON.parse(xhr.responseText);
    statusHTML = '<ul>';
    monthsMax = months.length;
    for (var i=0; i < monthsMax; i += 1) {
      if (months[i].available === true) {
        statusHTML += '<li class="month borderBtn cv yes';
      } else {
        statusHTML += '<li class="month borderBtn cv no';
      }
      if (i === m) {
        statusHTML += ' current">';
      } else {
        statusHTML += '">';
      }
      statusHTML += months[i].month + '</li>';
    }
	statusHTML += '</ul>';
  document.getElementById('availability').innerHTML = statusHTML;  
	}
}
xhr.open('GET', 'availability.json', true);
xhr.send();


	
@charset "UTF-8";

html,
body,
div,
h1,
h2,
p,
ul,
li,
aside,
footer,
section {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ul {
  list-style: none;
}

li {
  display: inline-block;
}

aside,
footer,
section {
  display: block;
}

body {
  background: #edeff0;
  padding: 50px 0 0;
  font-family: "Varela Round", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 62.5%;
}

.contained {
  background: white;
  padding: 30px 15px;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
}

.heading {
  margin-bottom: 20px;
}

h1,
h2 {
  font-size: 2.4em;
  font-weight: 500;
  margin-bottom: 8px;
  color: #384047;
  line-height: 1.2;
}

h2 {
  font-size: 1.8em;
}

#availability ul {
  width: 100%;
  margin: 0 auto;
}

.month.borderBtn.cv {
  padding: 5px;
  position: relative;
  overflow: hidden;
  margin: 0 4px;
  color: #363b3f;
  cursor: default;
  border: 1px solid #e3e5e5;
  margin-top: 15px;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: all 0.3s ease-in, 0s;
  -moz-transition: all 0.3s ease-in, 0s;
  -o-transition: all 0.3s ease-in, 0s;
  -ms-transition: all 0.3s ease-in, 0s;
  transition: all 0.3s ease-in, 0s;
}

.month.borderBtn.cv.no:hover {
  text-decoration: none;
  color: #e3e5e5;
}

.month.borderBtn.cv.no {
  color: #e3e5e5;
}

.month.borderBtn.cv.no:before,
.month.borderBtn.cv.no:after {
  position: absolute;
  content: '';
  background: #e3e5e5;
  display: block;
  width: 115%;
  height: 1px;
  -webkit-transform: rotate(38deg);
  -moz-transform: rotate(38deg);
  -ms-transform: rotate(38deg);
  -o-transform: rotate(38deg);
  transform: rotate(-38deg);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.month.borderBtn.cv.no:after {
  -webkit-transform: rotate(38deg);
  -moz-transform: rotate(38deg);
  -ms-transform: rotate(38deg);
  -o-transform: rotate(38deg);
  transform: rotate(38deg);
}

#about .subtitle {
  color: #363b3f;
  font-size: 24px;
  text-transform: uppercase;
}

.month.borderBtn.cv.current {
  border-bottom-color: #428bca;
  border-bottom-width: 2px;
}
# Basic AJAX Project

Basic AJAX Project making a call to a JSON file. Dynamically creating a sidebar widget through pure Javascript and updating the page.
[
  {
   "month": "Jan",
   "available": false
  },
  {
   "month": "Feb",
   "available": false
  },
  {
   "month": "Mar",
   "available": false
  },
  {
   "month": "Apr",
   "available": false
  },
  {
   "month": "May",
   "available": false
  },
  {
   "month": "Jun",
   "available": false
  },
  {
   "month": "Jul",
   "available": false
  },
  {
   "month": "Aug",
   "available": false
  },
  {
   "month": "Sep",
   "available": false
  },
  {
   "month": "Oct",
   "available": true
  },
  {
   "month": "Nov",
   "available": true
  },
  {
   "month": "Dec",
   "available": true
  }
]