WTHSILT

Developer
Songkick
Size
4,222 Kb
Views
24,288
  1. WTHSILT Previews
  2. WTHSILT HTML Codes
  3. WTHSILT CSS Codes
  4. WTHSILT JS Codes

How do I make an wthsilt?

What is a wthsilt? How do you make a wthsilt? This script and codes were developed by Songkick on 18 October 2022, Tuesday.

WTHSILT Previews
IQ Test

WTHSILT - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>WTHSILT</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="overlay"></div>
<div class="artist-image"></div>
<div class="audio-player"></div>
<div class="content-wrap"> <img class="logo" src="http://www.alexshellim.com/songkick/wtf/img/logo.png" /> <div class="main"> <h1 id="text">what the hell should i listen to?</h1> </div> <section id="fetch"> <input type="text" placeholder="Songkick username" id="term" /> <span class="no-username"></span> <span class="no-account">Don't have an account? <a href="https://accounts.songkick.com/signup/" target="_blank">Sign up</a></span> <button id="search">Help me!</button> <div class="external-links"></div> </section> </div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

WTHSILT - Script Codes CSS Codes

body{ font-family:helvetica; font-weight:300; margin:0; padding:0; color:#fff;
}
.overlay, .artist-image{ position:absolute; height:100%; width:100%;
}
.overlay{ background:#f00846; z-index:-1; mix-blend-mode: multiply;
}
.artist-image{ z-index:-2; background-size:cover; background-repeat:no-repeat; background-position:top center; background-attachment:fixed; -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%);
}
a{ color:#fff;
}
.logo{ max-width:50px; margin-bottom:20px; display:none;
}
h1{ font-weight:300; text-transform:uppercase; font-size:60px; margin:0;
}
.content-wrap{ padding-left:100px; width:100%; max-width:900px; padding-top:100px; padding-right:20px; box-sizing: border-box;
}
#fetch{ width:100%; max-width:300px; margin-top:20px;
}
input, .no-username, #search, .no-account{ width:100%; display:block;
}
.no-username{ text-align:center;
}
.no-account{ text-align:center; font-size:12px; font-weight: 100; margin-top:20px; display:block;
}
.no-account a{ color:#fff;
}
input{ -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; border-radius:0; border:0; border-bottom:3px solid #fff; background:transparent; color:#fff; font-weight:300; font-size:20px; text-align:left; background-repeat: no-repeat; box-shadow:none; outline:none; min-height:40px; letter-spacing:0.1em;
}
::-webkit-input-placeholder { color:rgba(255,255,255,0.7); font-weight:100;
}
::-moz-placeholder { color:rgba(255,255,255,0.7); font-weight:100;
}
::-ms-input-placeholder { color:rgba(255,255,255,0.7); font-weight:100;
}
.no-username{ margin:20px 0; font-size:12px;
}
button{ font-weight:700; text-transform:uppercase; background:transparent; color:#fff; border:none; border-radius:50px; padding:10px; min-height:50px; font-size:16px; margin-top:20px; border:2px solid #fff; box-shadow:none; outline:none;
}
button:hover{ cursor:pointer; color:#f80046; background:#fff;
}
a.ext-link.spotify,a.ext-link.sk { display: inline-block; margin-top: 10px; border: 2px solid #fff; border-radius: 50px; text-align: center; padding: 10px; text-transform: uppercase; font-weight: 600; margin-bottom: 0; font-size: 12px; text-decoration: none; min-width: 235px;
}
.sk-logo { height: 30px; vertical-align: middle; margin-left: 10px;
}
.fa-spotify { /* float: right; */ margin-left: 10px; font-size: 36px; vertical-align: middle;
}
a.ext-link.spotify:hover{ background-color:#2ebd59; border-color:#2ebd59; cursor:pointer;
}
a.ext-link.sk:hover{ background-color:#f00846; border-color:#f00846; cursor:pointer;
}
@media only screen and (max-width:479px){ .content-wrap{ padding-left:0; padding-top:40px; padding-right:0; padding:20px; } h1{ font-size:40px; } #fetch{ max-width:none; } .external-links{ text-align:center; }
}

WTHSILT - Script Codes JS Codes

$(document).ready(function(){
//get username
var getUser = function(){ var user = $('#term').val(); if (user == '') { $('.no-username').html("Enter a valid username."); } else { $('.no-username').html(""); $('.main').html("<h1 id='text'>You actually <i>like</i> some of this stuff?!</h1>"); $.getJSON("https://api.songkick.com/api/3.0/users/" + user + "/artists/tracked.json?apikey=biWgPnIRTnRGH9Dc&jsoncallback=?", function(json){ console.log(json); // THIS IS OK // create array of all songkick artists var artists = json.resultsPage.results.artist; // select one artist at random artist = _.sample(artists); //add links to spotify and songkick $('.external-links').html('<div class="ext-link-wrap"><a class="ext-link spotify" target="_blank">I want more!</a><i class="fa fa-spotify" aria-hidden="true"></i></div><div class="ext-link-wrap"><a class="ext-link sk" target="_blank">see them live</a><img class="sk-logo" src="http://www.alexshellim.com/songkick/wtf/img/sk.png" /></div>'); //add href attribute to songkick button - this uses the random selection from the artists variable $(".sk").attr("href", artist.uri); // SPOTIFY CALL ... console.log(artist.displayName); $('.main').html("<h1 id='text'>why don\'t you listen to " + artist.displayName + "?</h1>"); // search spotify for artist $.getJSON("https://api.spotify.com/v1/search?q=" + artist.displayName + "&type=artist", function(json) { // pull first artist from results var spotify_artist = json.artists.items[0]; //insert artist image into background var image = json.artists.items[0].images[1]; $('.artist-image').css('background-image', 'url(' + image.url + ')'); //add href attribute to spotify button var spotify_link = json.artists.items[0].external_urls; $(".spotify").attr("href", spotify_link.spotify); //create array of button messages var next = ["nah, hit me again!", "hahaha! no. next.", "next! before someone hears", "gimme another!", "keep going...", "so last year, next!"]; next_artist = _.sample(next); //change button text $('button#search').text(next_artist); // search spotify for top tracks $.getJSON("https://api.spotify.com/v1/artists/" + spotify_artist.id + "/top-tracks?country=US", function(json) { // select top track at random var sample = _.sample(json.tracks); // add audio to player div $(".audio-player").html("<audio autoplay='true'><source src='" + sample.preview_url + "' type='audio/mpeg' /></audio>"); // $("audio").html("<source src='" + sample.preview_url + "' type='audio/mpeg' />"); // $("audio")[0].play(); }); }); }).fail(function() { // THIS IS BAD console.log("error"); $('.main').html("<h1 id='text'>Nope. you\'re gonna have to <a href='https://accounts.songkick.com/signup/' target='_blank'>create a songkick account</a></h1>"); }); } return false; } $('#search').click(getUser); $('#term').keyup(function(event){ if(event.keyCode == 13){ getUser(); } });
});
WTHSILT - Script Codes
WTHSILT - Script Codes
Home Page Home
Developer Songkick
Username songkick
Uploaded October 18, 2022
Rating 3
Size 4,222 Kb
Views 24,288
Do you need developer help for WTHSILT?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Songkick (songkick) Script Codes
Name
Super Songkick
Most Popular Artists on Songkick
Songkick Tourbox Partners
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!