Sheyna, Monica & Casey

.gitignore

@@ -0,0 +1,37 @@
+# Compiled source #
+###################
+*.com
+*.class
+*.dll
+*.exe
+*.o
+*.so
+
+# Packages #
+############
+# it's better to unpack these files and commit the raw source
+# git has its own built in compression methods
+*.7z
+*.dmg
+*.gz
+*.iso
+*.jar
+*.rar
+*.tar
+*.zip
+
+# Logs and databases #
+######################
+*.log
+*.sql
+*.sqlite
+
+# OS generated files #
+######################
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db

README.md

@@ -0,0 +1,4 @@
+Build a Javascript Thing Assignment
+JSON, Ajax, jQuery fade and more JavaScript were added to the previous assignment.
+Collaborators were Sheyna, Casey and Monica
+This assignment builds upon Casey and Henok's previous assignment. It is coded so that the user can enter any number and it will randomly generate Henok's favorite, most loved albums. A jQuery fade was implemented to make the website extra beautiful. Also, JavaScript code was inserted that tracks the time of the day. The files were altered to use JSON and Ajax. 

sheyna_monica_casey/.gitignore

@@ -0,0 +1,37 @@
+# Compiled source #
+###################
+*.com
+*.class
+*.dll
+*.exe
+*.o
+*.so
+
+# Packages #
+############
+# it's better to unpack these files and commit the raw source
+# git has its own built in compression methods
+*.7z
+*.dmg
+*.gz
+*.iso
+*.jar
+*.rar
+*.tar
+*.zip
+
+# Logs and databases #
+######################
+*.log
+*.sql
+*.sqlite
+
+# OS generated files #
+######################
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db

sheyna_monica_casey/README.md

@@ -0,0 +1,3 @@
+#Built a JavaScript Thingy
+##Built and coded by Sheyna, Casey and Monica
+###We redid Henok's and Casey's top album website to randomly generate a music recommendation 

sheyna_monica_casey/add-content.js

@@ -0,0 +1,15 @@
+var today = new Date();
+var hourNow = today.getHours();
+var greeting;
+
+if (hourNow > 18) {
+  greeting = 'Good evening! Why are you at CF so late??....yeah that is right, javascript is totally keeping track of time :)';
+} else if (hourNow > 12) {
+  greeting = 'Good afternoon!, user....yeah, javascript is totally keeping track the time of day :)';
+} else if (hourNow > 0) {
+  greeting = 'Good morning user!!...yeah, javascript is totally keeping track of the time of day :)';
+} else {
+  greeting = 'Welcome CF user!!!!!!';
+}
+
+document.write('<h2>' + greeting + '</h2>');

sheyna_monica_casey/albums.json

@@ -0,0 +1,37 @@
+[
+  {
+    "imageURL": "http://thissongissick.com/wp-content/uploads/2014/10/Run-The-Jewels.jpg",
+    "imageAlt": "Run The Jewels 2",
+    "caption": "Run The Jewels - Run The Jewels 2",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor.",
+    "youTubeURL": "https://www.youtube.com/watch?v=Hd1dTrFdZkA"
+  },
+  {
+    "imageURL": "http://cdn4.pitchfork.com/news/55815/fc741210.jpg",
+    "imageAlt": "Black Moon Spell" ,
+    "caption": "King Tuff - Black Moon Spell",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor.",
+    "youTubeURL": "https://www.youtube.com/watch?v=9ufWAU8RjC8"
+  },
+  {
+    "imageURL": "http://www.aux.tv/wp-content/uploads/2014/04/freddie-gibbs-madlib-pinata.jpg",
+    "imageAlt": "Pinata",
+    "caption": "Freddie Gibbs & Madlib - Pinata",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor.",
+    "youTubeURL": "https://www.youtube.com/watch?v=98nUZ938oiU"
+  },
+  {
+    "imageURL": "http://cdn4.pitchfork.com/news/53290/1e766e86.jpg",
+    "imageAlt": "Present Tense",
+    "caption": "Wild Beasts - Present Tense",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor.",
+    "youTubeURL": "https://www.youtube.com/watch?v=9IIbbFIQTKI&list=PLaXEUnRhowO5T2vMgPCrH0XjBnyIeyml2"
+  },
+  {
+    "imageURL": "http://www.rockleak.com/uploads/posts/2014-07/1406054962_hippiesabotage-sunny-cover.jpg",
+    "imageAlt": "Sunny",
+    "caption": "Hippie Sabotage - Sunny",
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum tempus nulla a tempor. Nulla porttitor diam sed ligula sollicitudin fermentum. Ut sit amet tristique nisl. Donec in laoreet lorem. Integer volutpat lacus sem. In eget laoreet tortor. In auctor tortor ipsum, non euismod nisl dignissim vel. Sed non dolor.",
+    "youTubeURL": "https://www.youtube.com/watch?v=zfnyoKu7ptw&list=PLQ83U7ao7jjBC1A5WNEdxxhEl8pmdbGXN"
+  }
+]

sheyna_monica_casey/fade-2.js

@@ -0,0 +1,17 @@
+<script src="jquery-1.11.1.min.js"></script>
+       <script>
+         $(function() {
+          $("body").fadeToggle(800).fadeToggle(3000);
+         });
+         </script>
+         <script>
+         $(function() {
+
+          $(".nav-hov").on("mouseover", function() {
+            var navId = $(this).attr("data-navId");
+            $("#"+navId).fadeOut(800).fadeIn(1200);
+          });
+        });
+
+
+       </script>

sheyna_monica_casey/fade.js

@@ -0,0 +1,3 @@
+$(function() {
+  $("body").fadeToggle(800).fadeToggle(3000);
+});

sheyna_monica_casey/function.js

@@ -0,0 +1,32 @@
+window.onload = function() {
+  var album1 = document.getElementById('album1');
+  var album2 = document.getElementById('album2');
+  var album3 = document.getElementById('album3');
+  var album4 = document.getElementById('album4');
+  var album5 = document.getElementById('album5');
+
+  function setDisplayNone() {
+    album1.style.display = 'none';
+    album2.style.display = 'none';
+    album3.style.display = 'none';
+    album4.style.display = 'none';
+    album5.style.display = 'none';
+  }
+  setDisplayNone();
+
+  var userNumber = prompt("Enter any number and we will give you an amazing music recommendation");
+
+  var numberParsed = parseInt(userNumber);
+
+  if (numberParsed % 8 === 0) {
+    album1.style.display = 'block';
+  } else if (numberParsed % 7 === 0) {
+    album2.style.display = 'block';
+  } else if (numberParsed % 5 === 0) {
+    album3.style.display = 'block';
+	} else if (numberParsed % 2 === 0) {
+    album4.style.display = 'block';
+  } else {
+    album5.style.display = 'block';
+  }
+};

sheyna_monica_casey/index.html

@@ -0,0 +1,28 @@
+<DOCTYPE html>
+<html>
+  <head>
+  <link href='http://fonts.googleapis.com/css?family=Arimo:700italic' rel='stylesheet' type='text/css'>
+  <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
+  <link rel="stylesheet" href="style.css">
+  <meta charset='utf-8'>
+  <title>Top Albums According to Henok</title>
+  </head>
+  <body>
+    <main>
+      <h2 ><script src="add-content.js"></script></h2>
+      <header>
+        <h1 class="header">Henok's Most Beloved Albums</h1>
+      </header>
+    <section>
+      <div class="wrapper">
+        <article class="albums" id="RecommendedAlbum">
+        </article>
+      </div>
+    </section>
+    </main>
+  <script src="jquery-1.11.1.min.js"></script>
+  <script src="recommendAnAlbum_with_jquery.js"></script>
+  <script src="fade.js"></script>
+  <script src="add-content.js"></script>
+  </body>
+</html>

sheyna_monica_casey/recommendAnAlbum.js

@@ -0,0 +1,35 @@
+function getAlbum(albumNumber) {
+  var xhr = new XMLHttpRequest();
+  xhr.open('GET', 'albums.json');
+  xhr.onreadystatechange = function () {
+    if(xhr.readyState === 4 && xhr.status === 200) {
+      var albums = JSON.parse(xhr.responseText);
+      var statusHTML = '<figure><img src="' + albums[albumNumber].imageURL + '" \
+        alt="' + albums[albumNumber].imageAlt + '" class="winner">\
+        <figcaption>' + albums[albumNumber].caption + '</figcaption>\
+        </figure> <p class="description">' + albums[albumNumber].description + '</p>\
+        <button><a href="' + albums[albumNumber].youTubeURL + '">Find</a></button>';
+
+      document.getElementById('RecommendedAlbum').innerHTML = statusHTML;
+    }
+  };
+  xhr.send();
+}
+
+window.onload = function() {
+  var userNumber = prompt("Enter any number and we will give you an amazing music recommendation");
+
+  var numberParsed = parseInt(userNumber);
+
+  if (numberParsed % 8 === 0) {
+    getAlbum(0);
+  } else if (numberParsed % 7 === 0) {
+    getAlbum(1);
+  } else if (numberParsed % 5 === 0) {
+    getAlbum(2);
+  } else if (numberParsed % 2 === 0) {
+    getAlbum(3);
+  } else {
+    getAlbum(4);
+  }
+}

sheyna_monica_casey/recommendAnAlbum_with_jquery.js

@@ -0,0 +1,35 @@
+function getAlbum(albumNumber) {
+  var url = "albums.json";
+  $.getJSON(url, function(data) {
+    var albums = data;
+    var albumFigure = '<figure><img src="' + albums[albumNumber].imageURL + '"';
+    var albumFigureAlt = 'alt="' + albums[albumNumber].imageAlt + '"';
+    var albumClass = 'class="winner">';
+    var albumFigCaption = '<figcaption>' + albums[albumNumber].caption + '</figcaption>';
+    var albumCloseFig = '</figure>';
+    $('#RecommendedAlbum').append(albumFigure + albumFigureAlt + albumClass + albumFigCaption + albumCloseFig);
+    $('#RecommendedAlbum').append('<p class="description">' + albums[albumNumber].description + '</p>');
+    var albumBtnStart = '<button>';
+    var albumBtnLink = '<a href="' + albums[albumNumber].youTubeURL + '">Find</a>';
+    var albumBtnClose = '</button>';
+    $('#RecommendedAlbum').append(albumBtnStart + albumBtnLink + albumBtnClose);
+  });
+};
+
+$(document).ready(function() {
+  var userNumber = prompt("Enter any number and we will give you an amazing music recommendation");
+
+  var numberParsed = parseInt(userNumber);
+
+  if (numberParsed % 7 === 0) {
+    getAlbum(0);
+  } else if (numberParsed % 5 === 0) {
+    getAlbum(1);
+  } else if (numberParsed % 3 === 0) {
+    getAlbum(2);
+  } else if (numberParsed % 2 === 0) {
+    getAlbum(3);
+  } else {
+    getAlbum(4);
+  }
+});