Last active
April 27, 2016 17:36
-
-
Save dcanchola/10d39610bee1713c6f89875470411ba2 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var zodiac = [ | |
{ | |
"name":"Aries", | |
"start":"March 21, 2016 00:00:00", | |
"end":"April 20, 2016 23:59:59" | |
}, | |
{ | |
"name":"Taurus", | |
"start":"April 21, 2016 00:00:00", | |
"end":"May 21, 2016 23:59:59" | |
}, | |
{ | |
"name":"Gemini", | |
"start":"May 22, 2016 00:00:00", | |
"end":"June 21, 2016 23:59:59" | |
}, | |
{ | |
"name":"Cancer", | |
"start":"June 22, 2016 00:00:00", | |
"end":"July 22, 2016 23:59:59" | |
}, | |
{ | |
"name":"Leo", | |
"start":"July 23, 2016 00:00:00", | |
"end":"August 22, 2016 23:59:59" | |
}, | |
{ | |
"name":"Virgo", | |
"start":"August 23, 2016 00:00:00", | |
"end":"September 23, 2016 23:59:59" | |
}, | |
{ | |
"name":"Libra", | |
"start":"September 24, 2016 00:00:00", | |
"end":"October 23, 2016 23:59:59" | |
}, | |
{ | |
"name":"Scorpio", | |
"start":"October 24, 2016 00:00:00", | |
"end":"November 22, 2016 23:59:59" | |
}, | |
{ | |
"name":"Sagittarius", | |
"start":"November 23, 2016 00:00:00", | |
"end":"December 21, 2016 23:59:59" | |
}, | |
{ | |
"name":"Capricorn", | |
"start":"December 22, 2016 00:00:00", | |
"end":"January 20, 2016 23:59:59" | |
}, | |
{ | |
"name":"Aquarius", | |
"start":"January 21, 2016 00:00:00", | |
"end":"February 19, 2016 23:59:59" | |
}, | |
{ | |
"name":"Pisces", | |
"start":"February 20, 2016 00:00:00", | |
"end":"March 20, 2016 23:59:59" | |
} | |
] | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
This JavaScript sample was developed for a project that tells users their | |
zodiac signs according to the birthday they input. I created a JSON file of | |
the zodiac sign data including the months and timespans involved and | |
retreived it with an AJAX request. The data is parsed into milliseconds and | |
therefore becomes easily comparable to discover which zodiac sign matches | |
with which month. | |
*/ | |
var xmlhttp = new XMLHttpRequest(); | |
var url = "./data/zodiac.txt"; | |
xmlhttp.onreadystatechange = function() { | |
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { | |
var myArr = JSON.parse(xmlhttp.responseText); | |
getZodiac(myArr, convertBirthday, removeFlexItems); | |
} | |
}; | |
//Send the request on the click of the button | |
window.onload = function() { | |
var button = document.querySelector(".submit"); | |
button.addEventListener('click', function() { | |
xmlhttp.open("GET", url, true); | |
xmlhttp.send(); | |
}); | |
}; | |
//Get zodiac sign according to birthday | |
function getZodiac(arr, getBirthday, removeItems) { | |
var birthday = getBirthday(); | |
//Loop through the array of data to find out which zodiac sign they are | |
for(var i = 0; i < arr.length; i++) { | |
var name = arr[i].name; | |
var symbol = arr[i].symbol; | |
//Convert start & end dates to date objects and milliseconds | |
var start = arr[i].start; | |
var startDate = new Date(start); | |
parsedStart = Date.parse(startDate); | |
var end = arr[i].end; | |
var endDate = new Date(end); | |
parsedEnd = Date.parse(endDate); | |
//If the given birthday falls between certain dates, it finds their zodiac sign | |
if (birthday >= parsedStart && birthday <= parsedEnd) { | |
console.log("Zodiac is " + name); | |
var getDiv = document.getElementsByClassName("yourZodiac"); | |
var bdayMonth = document.getElementsByClassName("month"); | |
var bdayDay = document.getElementsByClassName("day"); | |
getDiv[0].innerHTML = symbol + "<br>" + name + "<br>" + bdayMonth[0].value + " " + bdayDay[0].value; | |
} | |
} | |
//Removes the default items in the container | |
removeItems(); | |
} | |
//Removes the default items in the container to show your zodiac | |
function removeFlexItems() { | |
var getFlex = document.getElementsByClassName("flex-item"); | |
for(var index = 0; index < getFlex.length; index++) { | |
getFlex[index].style.display = "none"; | |
} | |
} | |
//Convert birthday to date in milliseconds | |
function convertBirthday() { | |
//Get birthday month & date | |
var month = document.getElementsByClassName("month"); | |
var day = document.getElementsByClassName("day"); | |
var bdayString = month[0].value + " " + day[0].value; | |
//Convert to a string that could be converted to Date object | |
if (month[0].value == "December" && day[0].value > 21) { | |
bdayString += ", 2015 12:00:00"; | |
} else { | |
bdayString += ", 2016 12:00:00"; | |
} | |
console.log(bdayString); | |
var birthday = new Date(bdayString); | |
var parsedBday = Date.parse(birthday); | |
return parsedBday; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment