Skip to content

Adnan Ahmad / Assignments

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 37843215 37843215dac685e1808e9552caf236e452afd3c0 by Adnan Ahmad
Options

firts commit

0 parents
Inline Side-by-side
Showing 59 changed files with 1212 additions and 0 deletions
<?php
$databaseHost = 'localhost';
$databaseName = 'songs_db';
$databaseUsername = 'root';
$databasePassword = 'root';
$mysqli = mysqli_connect($databaseHost, $databaseUsername, $databasePassword, $databaseName);
?>
\ No newline at end of file
<?php
include_once("config.php");
if($_POST['action']==="Delete"){
$id = $_POST['id'];
$query = "DELETE FROM songs WHERE id = $id;";
if(mysqli_query($mysqli,$query)){
echo "Item DELETE Successfully!";
}else{
echo "Item DELETE Faild!";
}
}elseif(!empty($_POST['song_id'])){
$song = $_POST['song_name'];
$singer = $_POST['singer_name'];
$ratings = $_POST['ratings'];
$id = $_POST['song_id'];
if(!empty($_FILES["myimage"]["name"])){
$target_file = "songimages/".basename($_FILES["myimage"]["name"]);
$status = move_uploaded_file($_FILES["myimage"]["tmp_name"],$target_file);
$query = "UPDATE songs
SET song_name = '$song', artist_name = '$singer', song_img = '$target_file', rating_no = '$ratings'WHERE id = $id;";
}else{
$query = "UPDATE songs
SET song_name = '$song', artist_name = '$singer', rating_no = '$ratings'WHERE id = $id;";
}
if(mysqli_query($mysqli,$query)){
echo "Item UPDATE Successfully!";
}else{
echo "Item UPDATE Faild!";
}
}else{
if(!empty($_FILES["myimage"]["name"])){
$song = $_POST['song_name'];
$singer = $_POST['singer_name'];
$ratings = $_POST['ratings'];
$target_file = "songimages/".basename($_FILES["myimage"]["name"]);
$status = move_uploaded_file($_FILES["myimage"]["tmp_name"],$target_file);
$query = "INSERT INTO songs (song_name,artist_name,song_img,rating_no) VALUES ('$song','$singer','$target_file','$ratings')";
if(mysqli_query($mysqli,$query) && $status){
echo "Item Inserted Successfully!";
}else{
echo "Item Inserted Faild!";
}
}else{
echo "Item Inserted Faild!";
}
}
?>
<?php
include_once("config.php");
$item = array();
if(isset($_POST['id'])){
$query = mysqli_query($mysqli,"select * from songs where id = '".$_POST['id']."'");
$i = 0;
while($row = mysqli_fetch_assoc($query)){
$item['id'] = $row['id'];
$item['song'] = $row['song_name'];
$item['singer'] = $row['artist_name'];
$item['image'] = $row['song_img'];
$item['positive_rating'] = $row['rating_no'];
}
}else
{
$query = mysqli_query($mysqli,"select * from songs");
$i = 0;
while($row = mysqli_fetch_assoc($query)){
$item[$i]['id'] = $row['id'];
$item[$i]['song'] = $row['song_name'];
$item[$i]['singer'] = $row['artist_name'];
$item[$i]['image'] = $row['song_img'];
$item[$i]['positive_rating'] = $row['rating_no'];
$i++;
}
}
echo(json_encode($item));
?>
\ No newline at end of file

38.5 KB

25.5 KB

30.1 KB

17.3 KB
<!DOCTYPE html>
<html>
<head>
<title>Assignment No.1</title>
</head>
<body>
adnan
<div class="header">
<div class="left">
<img src="images/dubl-arow-left.png" alt="dubl-arow-left">
<img src="images/black-arow.png" alt="black-arow">
<img src="images/dubl-arow-right.png" alt="dubl-arow-right">
</div>
<div class="center">
<img src="images/apple.png" alt="apple">
<img src="images/list.png" alt="list">
</div>
<div class="right">
<img src="images/user.png" alt="user">adnan
<img src="images/down-arow.png" alt="down-arow">
<input type="text" name="search_files" placeholder="search files">
</div>
</div>
</body>
</html>
\ No newline at end of file

1011 Bytes

1000 Bytes

982 Bytes
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<!--<script src="script/script.js"></script>-->
<script src="script/jquery.js"></script>
<title>Assignment No.1</title>
</head>
<body>
<div class="header">
<div class="left">
<a href="#"><img src="images/dubl-arow-left.png" alt="dubl-arow-left" ></a>
<a href="#"><img src="images/black-arow.png" alt="black-arow" ></a>
<a href="#"><img src="images/dubl-arow-right.png" alt="dubl-arow-right" ></a>
<input type="range" min="1" max="100" value="20" class="slider">
</div>
<div class="center">
<img src="images/apple.png" alt="apple" style="padding: 10px;">
<a href="#"><img src="images/list.png" alt="list" style="float: right; padding: 5px;"></a>
</div>
<div class="right">
<img src="images/user.png" alt="user"><p>adnan</p>
<a href="#"><img src="images/down-arow.png" alt="down-arow"></a>
<input type="text" name="search_files" id="SearchByArtistName" onsearch="myFunction()" placeholder="&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Search Library">
<a href="#"><img src="images/dubl-arow.png" alt="dubl-arow" style="float: right; padding: 2px;"></a>
</div>
</div>
<div class="clear"></div>
<div class="second-header">
<div class="left">
<a href="#"><img src="images/music.png" alt="music" ></a>
<a href="#"><img src="images/vedio.png" alt="vedio" ></a>
<a href="#"><img src="images/screen.png" alt="screen" ></a>
<a href="#"><img src="images/dotes.png" alt="dotes" ></a>
<button type="button" name="add" id="add" class="btn btn-warning" data-toggle="modal" data-target= "#ItemModel">Add new item</button>
</div>
<div class="center">
<p style=" font-family: sans-serif;margin: 5px;">My Music <span>Playlists</span></p>
</div>
<div class="right">
<p id="sortAlbums">Sort by: </p>
<ul>
<li><a href="#" id="ArtistClick" >Artist</a></li>
<li><a href="#" id="RatingClick" >Rating</a></li>
</ul>
<p>Albums</p>
<img src="images/down-arow2.png" alt="down-arow2">
</div>
</div>
<div class="clear"></div>
<div class="main-div">
<div class="left-div">
<p class="show-text">Library</p>
<div class="heading" style="background-color: #DBDBDB;padding: 5px;">
<img src="images/music2.png" alt="music2" style="padding: 0 5px;vertical-align: middle;"><b>Music</b></div>
<div class="items">
<p class="show-text" style="padding-top: 20px;">Playlists</p>
<ul>
<li><img src="images/geni.png" alt="geni">Genuis </li>
<li><img src="images/setting.png" alt="setting"><a href="#">90's Music</a></li>
<li><img src="images/setting.png" alt="setting"><a href="#">Classical Music</a></li>
<li><img src="images/setting.png" alt="setting"><a href="#">Music Videos</a></li>
<li><img src="images/setting.png" alt="setting"><a href="#">My Top Rated</a></li>
<li><img src="images/setting.png" alt="setting"><a href="#">Recently Added</a></li>
<li><img src="images/setting.png" alt="setting"><a href="#">Recently Played</a></li>
<li><img src="images/setting.png" alt="setting"><a href="#">Top 25 Most Played</a></li>
<li><img src="images/itune.png" alt="itune"><a href="#">iTunes Artwork Screen Saaa</a></li>
<li><img src="images/itune.png" alt="itune"><a href="#">iTunes Artwork Screen Saaa</a></li>
<li><img src="images/itune.png" alt="itune"><a href="#">iTunes Artwork Screen Saaa</a></li>
<li><img src="images/itune.png" alt="itune"><a href="#">iTunes Artwork Screen Saaa</a></li>
<li><img src="images/itune.png" alt="itune"><a href="#">iTunes Artwork Screen Saaa</a></li>
<li><img src="images/itune.png" alt="itune"><a href="#">iTunes Artwork Screen Saaa</a></li>
<li><img src="images/itune.png" alt="itune"><a href="#">iTunes Artwork Screen Saaa</a></li>
<li><img src="images/itune.png" alt="itune"><a href="#">iTunes Artwork Screen Saaa</a></li>
<li><img src="images/itune.png" alt="itune"><a href="#">iTunes Artwork Screen Saaa</a></li>
<li><img src="images/itune.png" alt="itune"><a href="#">Playlist</a></li>
</ul>
<div class="buttom">
<img src="images/pkus.png" alt="pkus"><img src="images/setting2.png" alt="setting2">
</div>
</div>
</div>
<div class="right-div" id="mainRightDiv" >
<!--
<div class="item">
<div class="dropdown">
<img src="images/1.png" alt="1st image">
<div class="dropdown-content">
<a href="item.php">Insert New Item</a>
<a href="#">Update</a>
<a href="#">Delete</a>
</div>
</div>
<p class="song">Jayanta Bhai ki Luv Saaa</p>
<p class="singer">Atif Aslam</p>
<a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
<a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
<a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
<a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
<a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
</div>
<div class="item">
<img src="images/2.png" alt="2nd image">
<p class="song">Twelve Ft Amrinder Gaaaa</p>
<p class="singer">Bilal Saeed (DjPunjab.Caaaaa</p>
<a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
<a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
<a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
<a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
<a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
</div>
<div class="item">
<img src="images/3.png" alt="3rd image">
<p class="song">The Lion of Punjab</p>
<p class="singer">Dilijit</p>
<a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
<a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
<a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
<a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
<a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
</div>
<div class="item">
<img src="images/4.png" alt="4th image">
<p class="song">Khiladi 786</p>
<p class="singer">Himesh Remshammiya</p>
<a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
<a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
<a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
<a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
<a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
</div>
<div class="item">
<img src="images/5.png" alt="5th image">
<p class="song">PTI Songs-PTITigersaaaa</p>
<p class="singer">PTITigers.com</p>
<a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
<a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
<a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
<a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
<a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
</div>
<div class="item">
<img src="images/2.png" alt="2nd image">
<p class="song">Stars Dance [TEH-SOaaaaa</p>
<p class="singer">Selena Gomez</p>
<a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
<a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
<a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
<a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
<a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
</div>
<div class="item">
<img src="images/6.png" alt="6th image">
<p class="song">Bewafaa (2005)</p>
<p class="singer">Udit Narayan</p>
<a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
<a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
<a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
<a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
<a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
</div>
<div class="item">
<img src="images/7.png" alt="7th image">
<p class="song">One Pound Fish (Remaaaa</p>
<p class="singer">%C2%A3 1 Fish Man</p>
<a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
<a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
<a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
<a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
<a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
</div>
<div class="item">
<img src="images/2.png" alt="2nd image">
<p class="song">Unknown Album</p>
<p class="singer">Unknown Artist</p>
<a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
<a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
<a href="#"><img src="images/star.png" alt="star rated" class = "rating"></a>
<a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
<a href="#"><img src="images/star2.png" alt="star un rated" class = "rating"></a>
</div>
-->
</div>
<div class="clear"></div>
</div>
<div id="ItemModel" class="modal fade" role = "dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"> Item </h4>
</div>
<div class="modal-body">
<form id="item_form" action="insert.php" enctype="multipart/form-data" method="post">
<p>Song Name</p>
<input type="hidden" id = "song_id_item" name="song_id" class="form-control">
<input type="text" id = "song_name_item" name="song_name" class="form-control" required >
<p>Singer Name</p>
<input type="text" id = "singer_name_item" name="singer_name" class="form-control" required>
<p>Image</p>
<input type="file" name="myimage" id = "song_image_item">
<select class="form-control" id = "ratings" name="ratings" required>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<input type="submit" id="sub" name="save" class="form-control btn-info">
</form>
</div>
<div class="modal-footer">
<p id="form-message"></p>
<button type="button" class="btn btn-default" data-dismiss = "modal">close</button>
</div>
</div>
</div>
</div>
<div class="footer">
<p>9 albums, 40 minutes, 47.4 MB</p>
</div>
</body>
</html>
\ No newline at end of file
$(document).ready(function(){
items = [];
/*items = [
{
image: "images/1.png",
song: "Jayanta Bhai ki Luv Saaa",
singer: "Atif Aslam",
positive_rating:3
},
{
image: "images/2.png",
song: "Twelve Ft Amrinder Gaaaa",
singer: "Bilal Saeed (DjPunjab.Caaaaa",
positive_rating:3
},
{
image: "images/3.png",
song: "The Lion of Punjab",
singer: "Dilijit",
positive_rating:3
},
{
image: "images/4.png",
song: "Khiladi 786",
singer: "Himesh Remshammiya",
positive_rating:3
},
{
image: "images/5.png",
song: "PTI Songs-PTITigersaaaa",
singer: "PTITigers.com",
positive_rating:3
},
{
image: "images/2.png",
song: "Stars Dance [TEH-SOaaaaa",
singer: "Selena Gomez",
positive_rating:3
},
{
image: "images/6.png",
song: "Bewafaa (2005)",
singer: "Udit Narayan",
positive_rating:3
},
{
image: "images/7.png",
song: "One Pound Fish (Remaaaa",
singer: "$1 Fish Man",
positive_rating:3
},
{
image: "images/2.png",
song: "Unknown Album",
singer: "Unknown Artist",
positive_rating:3
}
];
*/
ratingImages = {rating:"images/star.png",
no_rating:"images/star2.png"};
// get data from database through ajax
$.ajax({
type:'GET',
url: '/Assignment/get.php',
success: function (data){
items = JSON.parse(data);
//console.log(items);
DisplayItems(items);
}
});
var DisplayItems = function (items){
var item = "";
var SubItem = "";
var i = 0;
var j = 0;
for (i = 0; i<items.length; i++){
item += "<div class='item'>" + "<div class='dropdown'>" + "<img src=" + items[i].image + " alt='Song image'>" + "<div class='dropdown-content'><a href='#' class = 'UpdateItems' value = '" + items[i].id + "' data-toggle='modal' data-target= '#ItemModel'>" + "Update" + "</a><a href='#' class = 'DeleteItem' value = '" + items[i].id + "'>" + "Delete" + "</a></div></div>" +
"<p class='song' id = 'song_name'>" + items[i].song + "</p>"+
"<p class='singer'>" + items[i].singer + "</p>";
for(j = 0; j<items[i].positive_rating; j++ ){
SubItem += "<a href='#'><img src=" + ratingImages.rating + " alt='star rated' class = 'rating'></a>";
}
for(j; j < 5; j++){
SubItem += "<a href='#'><img src=" + ratingImages.no_rating + " alt='star un rated' class = 'rating'></a>";
}
item += SubItem;
SubItem = "";
item += "</div>";
}
$("#mainRightDiv").append(item);
}
//DisplayItems();
// Sort By Singer Name
$("#ArtistClick").click(function(){
items.sort(function(a,b) {return (a.singer > b.singer) ? 1 : ((b.singer > a.singer) ? -1 : 0);} );
$("#mainRightDiv").empty();
DisplayItems(items);
});
// Sort By Ratings
$("#RatingClick").click(function(){
items.sort(function(a,b) {return b.positive_rating - a.positive_rating;});
$("#mainRightDiv").empty();
DisplayItems(items);
});
// Search By Singer Name
$("#SearchByArtistName").keyup(function(){
SearchValue = $(this).val();
var item = "";
var SubItem = "";
ArtistNameArray = [];
n = 0;
items_length = items.length;
for(n = 0; n<items_length; n++){
if(items[n].singer.toLowerCase().search(SearchValue.toLowerCase())>=0){
ArtistNameArray.push(items[n])
}
}
if(ArtistNameArray.length===0){
tag = "<div> <p> " + "No Result Found" + " </p></div>";
$("#mainRightDiv").html(tag);
}
else{
item = "";
for(n = 0; n<ArtistNameArray.length; n++){
item += "<div class='item'>" + "<img src=" + ArtistNameArray[n].image + " alt='Song image'>" +
"<p class='song'>" + ArtistNameArray[n].song + "</p>"+
"<p class='singer'>" + ArtistNameArray[n].singer + "</p>";
for(j = 0; j<ArtistNameArray[n].positive_rating; j++ ){
SubItem += "<a href='#'><img src=" + ratingImages.rating + " alt='star rated' class = 'rating'></a>";
}
for(j; j < 5; j++){
SubItem += "<a href='#'><img src=" + ratingImages.no_rating + " alt='star un rated' class = 'rating'></a>";
}
item += SubItem;
SubItem = "";
item += "</div>";
}
//console.log(item);
$('#mainRightDiv').html(item);
}
});
// data inserted
$('#item_form').on('submit', function (e) {
console.log('here');
e.preventDefault();
data = new FormData(document.getElementById('item_form'));
$.ajax({
type: 'POST',
url: '/Assignment/database.php',
data: data,
cache: false,
processData: false,
contentType: false,
success: function (info) {
document.getElementById("item_form").reset();
alert(info);
}
});
});
// update items
$('body').on('click', '.UpdateItems',function () {
id = $(this).attr('value');
$.ajax({
type:'POST',
url: '/Assignment/get.php',
data:{'id':id},
datatype: 'JSON',
success: function (data){
item = JSON.parse(data);
$('#song_id_item').val(item['id']);
$('#song_name_item').val(item['song']);
$('#singer_name_item').val(item['singer']);
$('#song_image_item').html(item['image']);
$('#ratings').val(item['positive_rating']);
}
});
});
// Delete item
$('body').on('click', '.DeleteItem',function () {
id = $(this).attr('value');
action = "Delete";
if(confirm('Are you sure you want to delete this?')){
$.ajax({
type:'POST',
url: '/Assignment/database.php',
data:{'id':id, 'action':action},
success: function (info){
alert(info);
}
});
}
});
});
document.addEventListener("DOMContentLoaded", function(event) {
try{
items = [
{
image: "images/1.png",
song: "Jayanta Bhai ki Luv Saaa",
singer: "Atif Aslam",
positive_rating:3
},
{
image: "images/2.png",
song: "Twelve Ft Amrinder Gaaaa",
singer: "Bilal Saeed (DjPunjab.Caaaaa",
positive_rating:3
},
{
image: "images/3.png",
song: "The Lion of Punjab",
singer: "Dilijit",
positive_rating:3
},
{
image: "images/4.png",
song: "Khiladi 786",
singer: "Himesh Remshammiya",
positive_rating:3
},
{
image: "images/5.png",
song: "PTI Songs-PTITigersaaaa",
singer: "PTITigers.com",
positive_rating:3
},
{
image: "images/2.png",
song: "Stars Dance [TEH-SOaaaaa",
singer: "Selena Gomez",
positive_rating:3
},
{
image: "images/6.png",
song: "Bewafaa (2005)",
singer: "Udit Narayan",
positive_rating:3
},
{
image: "images/7.png",
song: "One Pound Fish (Remaaaa",
singer: "$1 Fish Man",
positive_rating:3
},
{
image: "images/2.png",
song: "Unknown Album",
singer: "Unknown Artist",
positive_rating:3
}
];
ratingImages = {rating:"images/star.png",
no_rating:"images/star2.png"};
//var items_div = document.getElementsByClassName("main_right_div");
function DisplayItems(){
items_length = items.length;
for(i = 0; i<items_length; i++){
item = document.createElement("div");
item.classList.add("item");
song_img = document.createElement("img");
song_img.setAttribute('src', items[i].image);
song_img.setAttribute('alt', 'song image');
song = document.createElement("p");
song.classList.add("song");
singer = document.createElement("p");
singer.classList.add("singer");
song_name = document.createTextNode(items[i].song);
singer_name = document.createTextNode(items[i].singer);
song.appendChild(song_name);
singer.appendChild(singer_name);
element = document.getElementById("mainRightDiv");
item.appendChild(song_img);
item.appendChild(song);
item.appendChild(singer);
j = 0;
for(j; j<items[i].positive_rating; j++){
Rating_img = document.createElement("img");
Rating_img.setAttribute('src', ratingImages.rating);
Rating_img.setAttribute('alt', 'Rating image');
anchor = document.createElement('a');
anchor.setAttribute('class', 'rating');
anchor.setAttribute('href', '#');
anchor.appendChild(Rating_img);
item.appendChild(anchor);
}
for(j; j<5; j++){
Rating_img = document.createElement("img");
Rating_img.setAttribute('src', ratingImages.no_rating);
Rating_img.setAttribute('alt', 'No Rating image');
anchor = document.createElement('a');
anchor.setAttribute('class', 'rating');
anchor.setAttribute('href', '#');
anchor.appendChild(Rating_img);
item.appendChild(anchor);
}
oldItems = document.getElementsByClassName("item");
if(oldItems[i]!=undefined){
element.replaceChild(item, oldItems[i]);
}
else{
element.appendChild(item);
}
}
}
// onload event Listner
window.addEventListener("load", DisplayItems);
// function to sort array on the basis of Artist Name
var ArtistSort = document.getElementById("ArtistClick");
if (ArtistSort.addEventListener) {
ArtistSort.addEventListener("click", SortByArtist);
} else if (ArtistSort.attachEvent) {
ArtistSort.attachEvent("onclick", SortByArtist);
}
function SortByArtist(){
items.sort(function(a,b) {return (a.singer > b.singer) ? 1 : ((b.singer > a.singer) ? -1 : 0);} );
DisplayItems();
}
// Sort by Ratings
var RatingSort = document.getElementById("RatingClick");
if (RatingSort.addEventListener) {
RatingSort.addEventListener("click", SortByRatings);
} else if (RatingSort.attachEvent) {
RatingSort.attachEvent("onclick", SortByRatings);
}
function SortByRatings(){
items.sort(function(a,b) {return a.positive_rating - b.positive_rating;});
DisplayItems();
}
// Seach By Artist Name
Search = document.getElementById("SearchByArtistName");
Search.addEventListener('keyup',SearchByName);
function SearchByName(){
ArtistNameArray = [];
ParentDiv = document.createElement("div");
//PresentItems = document.getElementsByClassName("item");
n = 0;
items_length = items.length;
for(n = 0; n<items_length; n++){
if(items[n].singer.toLowerCase().search(Search.value.toLowerCase())>=0){
ArtistNameArray.push(items[n])
}
}
if(ArtistNameArray.length===0){
tag = document.createElement("p");
msg = document.createTextNode("No Result Found");
tag.appendChild(msg);
ParentDiv.appendChild(tag)
document.getElementById("mainRightDiv").innerHTML = ParentDiv.innerHTML;
console.log("NO RESULT");
}
else{
for(n = 0; n<ArtistNameArray.length; n++){
item = document.createElement("div");
item.classList.add("item");
song_img = document.createElement("img");
song_img.setAttribute('src', ArtistNameArray[n].image);
song_img.setAttribute('alt', 'song image');
song = document.createElement("p");
song.classList.add("song");
singer = document.createElement("p");
singer.classList.add("singer");
song_name = document.createTextNode(ArtistNameArray[n].song);
singer_name = document.createTextNode(ArtistNameArray[n].singer);
song.appendChild(song_name);
singer.appendChild(singer_name);
element = document.getElementById("mainRightDiv");
item.appendChild(song_img);
item.appendChild(song);
item.appendChild(singer);
j = 0;
for(j; j<ArtistNameArray[n].positive_rating; j++){
Rating_img = document.createElement("img");
Rating_img.setAttribute('src', ratingImages.rating);
Rating_img.setAttribute('alt', 'Rating image');
anchor = document.createElement('a');
anchor.setAttribute('class', 'rating');
anchor.setAttribute('href', '#');
anchor.appendChild(Rating_img);
item.appendChild(anchor);
}
for(j; j<5; j++){
Rating_img = document.createElement("img");
Rating_img.setAttribute('src', ratingImages.no_rating);
Rating_img.setAttribute('alt', 'No Rating image');
anchor = document.createElement('a');
anchor.setAttribute('class', 'rating');
anchor.setAttribute('href', '#');
anchor.appendChild(Rating_img);
item.appendChild(anchor);
}
ParentDiv.appendChild(item);
}
console.log(ParentDiv);
document.getElementById("mainRightDiv").innerHTML = ParentDiv.innerHTML;
}
}
}
catch(err){
alert(err);
}
});
body{
margin: 0;
padding: 0;
width: 100% auto;
font-family: sans-serif;
}
.clear{
clear: both;
}
.header {
background-color: #D6D6D6;
display: inline-block;
border-bottom: 1px solid #AEAEAE;
width: 100%;
}
.header .left {
float: left;
width: 33%;
height: 50px;
padding: 5px 0px;
text-align: center;
}
.header .left img{
padding: 15px 5px;
}
.slider {
-webkit-appearance: none;
width: 40%;
height: 4px;
background: #ABABAB;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
float: right;
margin: 27px 25px 27px 0;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
background: transparent url(images/circal.png) no-repeat center center;
background-size: contain;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
.header .center {
background-color: #EEEEEF;
float: left;
width: 33%;
height: 50px;
padding: 5px 0px;
text-align: center;
border-right: 1px solid #AEAEAE;
border-left: 1px solid #AEAEAE;
}
.header .right {
float: left;
width: 33%;
height: 50px;
padding: 5px 0px;
text-align: center;
}
.header .right p{
display: inline-block;
padding: 5px;
}
.header .right input{
background-image: url(images/search.png);
background-repeat: no-repeat;
background-position: 5px;
border-radius: 15px;
/* padding: 3px; */
border-bottom-style: none;
margin-left: 40px;
margin-right: -40px;
width: 40%;
}
.second-header{
display: inline-block;
width: 100%;
}
.second-header .left {
float: left;
width: 33%;
height: 30px;
padding: 5px 0px;
}
.second-header .left button {
float: right;
font-size: 12px;
padding: 5px;
}
.second-header .left img{
padding: 0px 5px;
vertical-align: middle;
}
.second-header .center {
float: left;
width: 33%;
height: 30px;
padding: 5px 0px;
text-align: center;
}
.second-header .right {
font-family: sans-serif;
float: left;
width: 33%;
height: 30px;
text-align: right;
}
.second-header .center p span {
color: #2464BD;
background-color: #D5E3F7;
padding: 5px;
border-radius: 5px;
margin: 10px;
}
.second-header .right p{
display: inline-block;
margin: 0;
}
.second-header .right ul{
display: inline-block;
margin: 0;
padding: 10px;
}
.second-header .right ul li{
display: inline-block;
padding: 0px 15px;
margin: 0;
border-right: 1px solid #818181;
}
.second-header .right ul li:last-child{
border-right: none;
}
.second-header .right ul li a{
text-decoration: none;
}
.main-div{
height: 700px;
border-bottom: 1px solid #DFDFDF;
border-top: 1px solid #DFDFDF;
}
.main-div .left-div{
width: 16%;
float: left;
border-right: 1px solid #DFDFDF;
font-size: 12px;
margin-right: 11px;
}
.main-div .right-div{
width: 83%;
float: left;
}
.main-div .left-div .show-text{
margin: 0;
color: #999AA2;
padding: 5px;
}
.main-div .left-div ul{
display: block;
margin: 0;
padding: 0;
padding-top: 5px;
}
.main-div .left-div ul li{
display: block;
padding: 0px 10px;
margin: 0;
padding-top: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.main-div .left-div ul li a {
color: black;
text-decoration: none;
}
.main-div .left-div ul li a:hover {
background-color: #DBDBDB;
}
.main-div .left-div ul li img{
padding-right: 3px;
}
.main-div .left-div .buttom{
width: 100%;
margin-top: 92px;
border-top: 1px solid #F6F6F6;
}
.main-div .left-div .buttom img{
padding: 5px;
}
.main-div .right-div .item{
display: inline-block;
padding: 15px;
width: 16%;
border: 1px solid transparent;
}
.main-div .right-div .item:hover {
cursor: pointer;
border: 1px solid black;
}
.main-div .right-div .item .song{
margin: 5px 0px;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.main-div .right-div .item .singer{
margin: 5px 0px;
font-size: 11px;
color: #999AA2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.main-div .right-div .item .rating{
padding: 1px;
}
.footer p{
text-align: center;
background-color: #DCDCDC;
padding: 5px;
font-size: 12px;
margin: 0;
border-top: 1px solid #b1afaf;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd}
.dropdown:hover .dropdown-content {
display: block;
}
\ No newline at end of file