Loading

lastfm user search (WIP)

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>lastfm user search (WIP)</title>
  <link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,400,700" rel="stylesheet">
  
  <link rel='stylesheet prefetch' href='https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <header>
	<h1>LastFM User Search</h1>
	<div class="search-container">
		<input type="text" id="searchUser" placeholder="Search for a LastFM user...">
		<button id="btn"><span class="fa fa-search" aria-hidden="true"></span> Search</button>
	</div>
</header>
<section>
	<div id="error"></div>
	<div class="profile-container">
		<div id="avatar"><img id="avatar-image" src=""></div>
		<div class="cc">
			<div id="username"></div>
			<div id="location"></div>
			<div id="url"></div>
		</div>

	</div>
</section>
  
    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
/* photo credit: Lucian Moldovan https://unsplash.com/photos/1mpYnNXHeHA */
* {
  box-sizing: border-box;
}

body {
  color: #222222;
  font-family: "Fira Sans", sans-serif;
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  height: 250px;
  background: url("https://images.unsplash.com/photo-1482862549707-f63cb32c5fd9?dpr=1.25&auto=format&fit=crop&w=1500&h=844&q=80&cs=tinysrgb&crop=&bg=");
  background-position: bottom;
  background-size: cover;
  display: flex;
  align-items: center;
  flex-direction: column;
}

header h1 {
  color: #fff;
}

.search-container {
  background: #fff;
  width: 900px;
  height: 50px;
  padding: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  margin: 30px auto;
}

input#searchUser {
  flex: 1;
  font-size: 15px;
  border: none;
  outline: 0;
}

button#btn {
  background: none;
  color: #222222;
  font-size: 15px;
  font-weight: bold;
  border: none;
  cursor: pointer;
}
button#btn:hover {
  background: #fff;
  color: #B90000;
}

section {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 30px 0;
  align-items: center;
}

#error {
  margin-bottom: 30px;
  color: #B90000;
  font-size: 30px;
  font-weight: bold;
}

.profile-container {
  border: 1px solid #111111;
  box-shadow: 0.5px 0.5px 0.5px #222222;
  width: 700px;
  height: 200px;
  border-radius: 5px;
}

#username {
  font-size: 20px;
  font-weight: bold;
}

#url {
  margin-top: 40px;
}

#url a {
  color: #B90000;
  font-size: 30px;
  text-decoration: none;
}
#url a:hover {
  color: #fff;
}
/* Downloaded from https://ahoj.co.uk/ */
var btn, urlAPI, usernameAPI, avatarAPI, locationAPI, errorMessage;

var btn = document.getElementById("btn");
var urlAPI = document.getElementById("url");
var usernameAPI = document.getElementById("username");
var avatarAPI = document.getElementById("avatar-image");
var locationAPI = document.getElementById("location");
var apiKey = 'e64ebd1bb3d300a71a40ad321f3fa27d';
var errorMessage = document.getElementById("error");

btn.addEventListener("click", function(e) {

	e.preventDefault();

	var searchUser = document.getElementById("searchUser").value;

	console.log(searchUser);
	//MR_TheOutsider

	// if no value on search, send alert
	if (!searchUser.length) {
		alert("Please search for a user");
	} else {

		btn.innerHTML = '<span class="fa fa-spinner" aria-hidden="true"></span> Loading...';

		var requestProfile = new XMLHttpRequest();

		requestProfile.open('GET', 'https://ws.audioscrobbler.com/2.0/?method=user.getinfo&user=' + searchUser + '&api_key=' + apiKey + '&format=json');

		requestProfile.onload = function() {
			if (requestProfile.status >= 200 && requestProfile.status < 400) {

				var profileLoaded = JSON.parse(requestProfile.responseText);

				console.log(profileLoaded);

				// if user is not found, do something
				if (profileLoaded.message === 'User not found') {
					errorMessage.innerHTML = "<p> User not found. </p>";
					btn.innerHTML = '<span class="fa fa-search" aria-hidden="true"></span> Search';
				} else {

					renderHTML(profileLoaded);

					btn.innerHTML = '<span class="fa fa-search" aria-hidden="true"></span> Search';

					console.log(profileLoaded);
				}
			}
		}

		requestProfile.onerror = function() {
			console.log("Connection error");
		};

		requestProfile.send();

	};

	function renderHTML(data) {
		var urlString = "";
		var usernameString = "";
		var locationString = "";
		var avatar = "";
		var imageHref = "#text";

		usernameString += "<p>" + data.user.name + "</p>";
		urlString += data.user.url;
		locationString += data.user.country;
		avatar += data.user.image[1][imageHref];
		console.log(avatar);

		usernameAPI.innerHTML = usernameString;
		avatarAPI.setAttribute("src", avatar);
		locationAPI.innerHTML = locationString;
		urlAPI.innerHTML = '<a target="_blank" href="' + urlString + '">' + "<i class='fa fa-external-link'></i>" + '</a>';

	}
});

This awesome code is write by Marina Marques, you can se more from this user in the personal repository