diff --git a/.gitignore b/.gitignore index 496ee2c..393fcce 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,5 @@ -.DS_Store \ No newline at end of file +.DS_Store +node_modules +package.json +package-lock.json +app.js diff --git a/assets/css/style.css b/assets/css/style.css index c9f7559..6ec20ac 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -19,7 +19,7 @@ form h3 { display: flex; justify-content: center; padding: 25px !important; - margin: 15px 0; + margin-bottom: 15px; } .jumbotron img { margin-right: 40px; @@ -35,13 +35,43 @@ form h3 { margin-right: 15px; flex: 1; } - -#event-genre { +body { + background: url(../images/kuva4_nettiin.jpg) center; +} +#favorites { + display: none; +} +.signDiv { + display: flex; + justify-content: space-between; +} +#signIn, +#favorites, +#out { + margin: 10px 0; +} +#out { + display: none; +} +#event-genre, +#signIn, +#favorites, +.fav, +#out { height: 38px; width: 150px; background-color: black; + border-radius: 5px; color: white; } +.greet { + font-size: 18pt; + color: whitesmoke; +} +a { + color: indigo; + margin: 5px 0; +} .main-carousel { padding: 10px; margin-bottom: 50px; @@ -65,11 +95,47 @@ form h3 { width: 50%; padding: 0 !important; } -.eventDiv { +.h { + margin-bottom: 10px; + padding-top: 5px; +} +button { + cursor: pointer; +} +#close, +.h { + text-align: center; +} +.favList, +#close { + background-color: black; + border-radius: 5px; + color: red; +} +.favList { + padding: 5px 15px; +} +#close { + padding: 0 10px; +} +.eventDiv, +#savedEvents { background-color: rgba(250, 219, 200, 0.8); padding: 15px; margin: 10px; + display: flex; + flex-direction: column; +} +#savedEvents { + display: none; + border-radius: 5px; + flex-direction: column; +} +.rowEvents { + display: flex; + justify-content: space-between; } + .image { width: 100%; } @@ -98,24 +164,23 @@ form h3 { } #mainbody { - display: none; + /* display: none; */ } #intro { - margin-left:0; - height:100vh; - font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; - overflow:hidden; + margin-left: 0; + height: 100vh; + font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; + overflow: hidden; } - .color { display: grid; - grid-template-columns: repeat(10,auto); + grid-template-columns: repeat(10, auto); } .div { - height:100vh; + height: 100vh; } #test-0 { font-size: 5em; @@ -125,8 +190,8 @@ form h3 { opacity: 0; z-index: 2; } -#logo{ - width:10%; +#logo { + width: 10%; } #test-1 { font-size: 5em; @@ -169,28 +234,21 @@ form h3 { z-index: 2; } -#playlistDiv -{ - width: 100%; - display: flex; - justify-content: space-around; - margin-top: 2%; - +#playlistDiv { + width: 100%; + display: flex; + justify-content: space-around; + margin-top: 2%; } -#playlist -{ - width: 25%; - position: relative; - +#playlist { + width: 25%; + position: relative; } -#playlist img -{ - - max-width: 100%; - max-height: 100%; - height: auto; - width: auto; - +#playlist img { + max-width: 100%; + max-height: 100%; + height: auto; + width: auto; } diff --git a/assets/javascript/animate.js b/assets/javascript/animate.js index 78bc040..c9db517 100644 --- a/assets/javascript/animate.js +++ b/assets/javascript/animate.js @@ -1,10 +1,10 @@ -function gradientChange(){ - for(i=0; i<10; i++){ - var newDiv = $("
"); - newDiv.addClass('div'); - newDiv.addClass('c'+i); - $(".color").append(newDiv); -} +function gradientChange() { + for (i = 0; i < 10; i++) { + var newDiv = $("
"); + newDiv.addClass("div"); + newDiv.addClass("c" + i); + $(".color").append(newDiv); + } } gradientChange(); @@ -13,85 +13,97 @@ var step = 1; var purpleCount = 0; // Change Color to create a gradient wave flow of colors -function dynoColor(){ - for(i=0; i<10; i++){ - var red = 25*i + count; - var green = 25*i + count; +function dynoColor() { + for (i = 0; i < 10; i++) { + var red = 25 * i + count; + var green = 25 * i + count; var blue = 25 * i + count; - $(".c"+i).css("backgroundColor", "rgb(" + red + "," + green + "," + blue + ")"); + $(".c" + i).css( + "backgroundColor", + "rgb(" + red + "," + green + "," + blue + ")" + ); } - count=count+step*1.5; + count = count + step * 1.5; } -var dyno = setInterval(dynoColor,50); - -function purpleColor(){ +var dyno = setInterval(dynoColor, 50); - for(i=0; i<10; i++){ - var red = 5*i + 230 - purpleCount; - var green = 5*i + 210 - purpleCount; - var blue = 5*i+ 250 - purpleCount; - $(".c"+i).css("backgroundColor", "rgb(" + red + "," + green + "," + blue + ")"); +function purpleColor() { + for (i = 0; i < 10; i++) { + var red = 5 * i + 230 - purpleCount; + var green = 5 * i + 210 - purpleCount; + var blue = 5 * i + 250 - purpleCount; + $(".c" + i).css( + "backgroundColor", + "rgb(" + red + "," + green + "," + blue + ")" + ); } - purpleCount = purpleCount+step * 3; + purpleCount = purpleCount + step * 3; } - - - - +// tl.add ({ +// targets: '.div', +// width:'100%', +// opacity:'0.8', +// delay:anime.stagger(100) +// }) // Anime.js Animations var tl = anime.timeline({ - easing: 'easeOutExpo', - duration: 750 - }) + easing: "easeOutExpo", + duration: 750 +}); - tl.add ({ - targets: '.div', - width:'100%', - opacity:'0.8', - delay:anime.stagger(100) - }) - - tl.add ({ - targets: '.c3, .c4, .c5, .c6, .c7, .c8, .c9', - width: '75%', - opacity: '0.8', - }) +tl.add({ + targets: ".div", + width: "100%", + opacity: "0.8", + delay: anime.stagger(100) +}); - tl.add ({ - targets: '.c0, .c1, .c2', - width: '0%', - opacity: '0.8', - }) - tl.add ({ - targets: '#test-0', - top:'16%', - opacity: 1, - delay:anime.stagger(500) - }) - for (i=0; i<6;i++){ - tl.add ({ - targets: '#test-1, #test-2, #test-3, #test-4, #test-5', - top:'20%', +tl.add({ + targets: ".c3, .c4, .c5, .c6, .c7, .c8, .c9", + width: "75%", + opacity: "0.8" +}); + +tl.add({ + targets: ".c0, .c1, .c2", + width: "0%", + opacity: "0.8" +}); +tl.add({ + targets: "#test-0", + top: "16%", + opacity: 1, + delay: anime.stagger(500) +}); +for (i = 0; i < 6; i++) { + tl.add({ + targets: "#test-1, #test-2, #test-3, #test-4, #test-5", + top: "20%", opacity: 1, - delay:anime.stagger(500) - }) + delay: anime.stagger(500) + }); } -function funBackground(){ -$("body").addClass('uk-animation-fade'); -$("body").css("background", "url('assets/images/kuva4_nettiin.jpg')"); +function funBackground() { + $("body").addClass("uk-animation-fade"); + $("body").css("background", "url('assets/images/kuva4_nettiin.jpg')"); } -function loadMain(){ -clearInterval(dyno); -setInterval(purpleColor,50); -$("#intro").addClass('animated lightSpeedOut delay-1s').delay(2000).fadeOut(); -setTimeout(funBackground,2500); -$("#mainbody").delay(2500).fadeIn(); -console.log("Fade out") +function loadMain() { + clearInterval(dyno); + setInterval(purpleColor, 50); + $("#intro") + .addClass("animated lightSpeedOut delay-1s") + .delay(2000) + .fadeOut(); + setTimeout(funBackground, 2500); + $("#mainbody") + .delay(2500) + .fadeIn(); + console.log("Fade out"); } -$(document).ready(function(){ -setTimeout(loadMain,7000); -console.log("doc ready chk") -}); \ No newline at end of file +$(document).ready(function() { + setTimeout(loadMain, 7000); + console.log("doc ready chk"); +}); diff --git a/assets/javascript/script.js b/assets/javascript/script.js index 14d95ec..7b76a8b 100644 --- a/assets/javascript/script.js +++ b/assets/javascript/script.js @@ -20,13 +20,12 @@ function getLocation() { var geogate = true; function error(err) { -console.log(err.code) -if (err.code === 1) { - geogate = false; -} + console.log(err.code); + if (err.code === 1) { + geogate = false; + } } - function showPosition(position) { console.log( "Latitude: " + @@ -48,17 +47,19 @@ function getURL() { var date = $("#date").val(); var queryURL; var basicURL; - + if (geogate) { - basicURL = "https://www.eventbriteapi.com/v3/events/search/?sort_by=date&categories=103&token=HCI6R2VNZXBSOAT5UBT2&expand=venue&location.latitude=" + - userlat + - "&location.longitude=" + - userlong + - "&location.within=100mi";} - else if (!geogate) { - basicURL = "https://www.eventbriteapi.com/v3/events/search/?sort_by=date&categories=103&token=HCI6R2VNZXBSOAT5UBT2&expand=venue" + basicURL = + "https://www.eventbriteapi.com/v3/events/search/?sort_by=date&categories=103&token=HCI6R2VNZXBSOAT5UBT2&expand=venue&location.latitude=" + + userlat + + "&location.longitude=" + + userlong + + "&location.within=100mi"; + } else if (!geogate) { + basicURL = + "https://www.eventbriteapi.com/v3/events/search/?sort_by=date&categories=103&token=HCI6R2VNZXBSOAT5UBT2&expand=venue"; } - + queryURL = basicURL; if (price !== "Any price") { @@ -99,20 +100,50 @@ function displayEvent() { var eventName = $("

").text(events[i].name.text); var eventSum = $("

").text(events[i].summary); var venueName = $("

").html("Venue: " + events[i].venue.name); - var eventTimeStart = events[i].start.local.split("T") - var eventStart = $("

").html("Date: " + eventTimeStart[0] + "
" + "Time: " + eventTimeStart[1]); - var eventPlace = $("

").html("Address: " + events[i].venue.address.localized_address_display); + var eventTimeStart = events[i].start.local.split("T"); + var eventStart = $("

").html( + "Date: " + + eventTimeStart[0] + + "
" + + "Time: " + + eventTimeStart[1] + ); + var eventPlace = $("

").html( + "Address: " + events[i].venue.address.localized_address_display + ); var eventURL = $("", { href: events[i].url, text: "read more" }); + debugger; + var fav = $(" +

+ +
+ +
+

+
- +

pinME

@@ -125,31 +145,43 @@

Search your event

- + +
+
+
♡ favorites
+ +
+ +
+
+
+
+
+ +
-
-
- +
- + - + + +