Почему я не могу использовать функции поиска в html и javascript? - PullRequest
Новая
       11

Почему я не могу использовать функции поиска в html и javascript?

1 голос
/ 29 апреля 2020

Я пытаюсь создать веб-сайт с текстами песен, используя API Musixmatch, и хочу применить пользовательский элемент, shadow DOM, webpack и т. Д. c.

, но у меня проблема с поиском функция, потому что она не может искать, хотя я уже создал эту функцию в sr c -> script -> data -> data-source. js и песнях. js

Прошу вас помогите, спасибо:)

enter image description here

и результат пока не определен: (

index. html

document.addEventListener("DOMContentLoaded", main);
/* Dasar */

* {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}

:root {
    --warna-hitam:#333333;
    --warna-ungu:  #2c072c;
    --warna-pink: #ff536e;
    --warna-putih: #FFFAF0;
    --gradasi: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);
    --bayangan: rgba(0, 0, 0, 0.2);
}

h1,h2,h3{
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}

h4,h5,h6,p {
    font-family: 'Poppins', sans-serif;
}

.section {
    padding: 4rem 1.5rem;
    display: block;
}

body,
button,
input,
select,
textarea{
    font-family: 'Montserrat', sans-serif;  
}

.container {
    text-align: center;
    margin: 0;
}

/* ----------------------------------- */


/*Form Pencarian*/

form {
    width:1200px;
    margin:50px auto;
}
.search {
    padding:20px 30px;
    border-radius: 15px;
    background:rgba(197, 190, 190, 0.2);
    border:0px solid #dbdbdb;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
}
.button {
    position:relative;
    padding:18px 24px;
    border-radius: 12px;
    margin-left: 10px;
    left:-8px;
    background-color:#FF8C00;
    color:#fafafa;
    font-family: 'Montserrat', sans-serif;
    font-weight: bolder;
    font-size: 18px;
}
.button:hover  {
    background-color:#fafafa;
    color:#FF8C00;
}

/* ----------------------------------- */

/* Card */

.cards-list {
    z-index: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
  
.card {
    margin: 30px auto;
    width: 300px;
    height: 300px;
    border-radius: 40px;
  box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22);
    cursor: pointer;
    transition: 0.4s;
}
  
.card .card_image {
    width: inherit;
    height: inherit;
    border-radius: 40px;
}
  
.card .card_image img {
    width: inherit;
    height: inherit;
    border-radius: 40px;
    object-fit: cover;
}
  
.card .card_title {
    text-align: center;
    border-radius: 0px 0px 40px 40px;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 30px;
    margin-top: -80px;
    height: 40px;
}
  
.card:hover {
    transform: scale(0.9, 0.9);
    box-shadow: 5px 5px 30px 15px rgba(0,0,0,0.25), 
      -5px -5px 30px 15px rgba(0,0,0,0.22);
}
  
.title-white {
    color: white;
}
  
.title-black {
    color: black;
}
  
@media all and (max-width: 500px) {
    .card-list {
      /* On small screens, we are no longer using row direction but column */
      flex-direction: column;
    }
}

/* ----------------------------------- */

/* Menu Navigasi */

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    box-shadow: rgba(0, 0, 0, 0.2);
    overflow: hidden;
    background-color: var(--warna-ungu);
}

ul.topnav li {
    float: left;
}

ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

ul.topnav li a:hover {
    background-color: #111;
}

ul.topnav li.icon {
    display: none;
}

/* ----------------------------------- */

/* Text Heading */

.heading {
    margin: 20px;
    font-size: 2rem ;
    color: var(--warna-pink);
}

.subtitle {
    margin: 15px;
    text-align: center;
    font-size: 1.2rem;
    color: #3f4957;
}

/* ----------------------------------- */



/* FONT */
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

/* ----------------------------------- */



/* Footer */

footer{
    display: flex;
    flex-direction: column;
    margin: 20px 0px;
    padding: 30px 30px;
    background-color: var(---warna-putih);
    color: #3f4957;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
}

/* ----------------------------------- */

/* RENSPONSIVE */

/* Saat lebar layar kurang dari 680 pixel, sembunyikan semua menu item kecuali item yang pertama yaitu("Home"). Tampilkan juga list item yang berisi link untuk membuka menu yaitu (li.icon) */
@media screen and (max-width:680px) {
    ul.topnav li:not(:first-child) {
        display: none;
    }
    ul.topnav li.icon {
      float: right;
      display: inline-block;
    }
  }
  
/* Class dengan nama "responsive" akan ditambahkan oleh JavaScript saat user mengklik icon. Munculnya Class ini akan mendisplay isi list menu 
  */


@media screen and (max-width:680px) {
    ul.topnav.responsive {position: relative;}
    ul.topnav.responsive li.icon {
      position: absolute;
      right: 0;
      top: 0;
    }

ul.topnav.responsive li {
      float: none;
      display: inline;
    }

ul.topnav.responsive li a {
      display: block;
      text-align: left;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style/style.css">
    <script src="https://kit.fontawesome.com/1cb0b252aa.js" crossorigin="anonymous"></script>
    <link rel="shortcut icon" href="src/img/favicon.png">
    <title>DapatLirik</title>
</head>

<header>

    <nav id="appBar" class="app-bar">
        <ul class="topnav">
            <li><a href="#"><i class="fas fa-music"></i>Dapat<strong>Lirik</strong></a></li>
            <li><a href="https://www.instagram.com/ihsandroid/">About Us</a></li>
            <li><a href="#find-lyrics">Find Lyrics</a></li>
            <li class="icon">
                <a href="javascript:void(0);" onclick="myMenu()">☰</a>
            </li>
        </ul>
    </nav>

</header>

<body>
    <main>  
        
        <!-- Search Lagu -->
        <section>
        <h3 class="heading" id="find-lyrics" ><span><i class="fab fa-mixcloud fa-2x"></i></span> Lirik Favorit Anda Disini!</h3>
        <p class="subtitle">Temukan Lirik Lagu favorit anda dengan satu klik saja!</p>

            <div class="container search-container" id="search-container">
                <form id="track.search">
                    <input class="search" type="search" placeholder="Ketik Judul Lagu/Lirik" id="searchElement" required>	
                    <input class="button" type="button" id="searchButtonElement" value="Cari">		
                </form>
            </div>

        </section>

        


        <!-- Top 8 Tracks -->
        <section>
        <h3 class="heading"><span><i class="fas fa-microphone-alt fa-2x"></i></span>Top 8 Lirik Terfavorit</h3>
        <p class="subtitle">8 Lirik Lagu Terfavorit Akhir-Akhir Ini</p>

        <div id="songList"></div>

        </section>

        <!-- Card -->
        <div class="cards-list" id="songList">
  
            <div class="card 1" id="artist.albums.get">
              <div class="card_image"> <img src="https://i.redd.it/b3esnz5ra34y.jpg" /> </div>
              <div class="card_title title-white">
                <p>Card Title</p>
              </div>
            </div>
            
              <div class="card 2">
              <div class="card_image" id="artist.albums.get">
                <img src="https://cdn.blackmilkclothing.com/media/wysiwyg/Wallpapers/PhoneWallpapers_FloralCoral.jpg" />
                </div>
              <div class="card_title title-white">
                <p>Card Title</p>
              </div>
            </div>
            
            <div class="card 3">
              <div class="card_image" id="artist.albums.get">
                <img src="https://media.giphy.com/media/10SvWCbt1ytWCc/giphy.gif" />
              </div>
              <div class="card_title">
                <p>Card Title</p>
              </div>
            </div>
              
            <div class="card 4">
              <div class="card_image" id="artist.albums.get">
                <img src="https://media.giphy.com/media/LwIyvaNcnzsD6/giphy.gif" />
                </div>
              <div class="card_title title-black">
                <p>Card Title</p>
              </div>
            </div>

            <div class="card 5">
                <div class="card_image" id="artist.albums.get"> <img src="https://i.redd.it/b3esnz5ra34y.jpg" /> </div>
                <div class="card_title title-white">
                  <p>Card Title</p>
                </div>
              </div>
              
                <div class="card 6">
                <div class="card_image" id="artist.albums.get">
                  <img src="https://cdn.blackmilkclothing.com/media/wysiwyg/Wallpapers/PhoneWallpapers_FloralCoral.jpg" />
                  </div>
                <div class="card_title title-white">
                  <p>Card Title</p>
                </div>
              </div>
              
              <div class="card 7">
                <div class="card_image" id="artist.albums.get">
                  <img src="https://media.giphy.com/media/10SvWCbt1ytWCc/giphy.gif" />
                </div>
                <div class="card_title">
                  <p>Card Title</p>
                </div>
              </div>
                
            <div class="card 8">
                <div class="card_image" id="artist.albums.get">
                  <img src="https://media.giphy.com/media/LwIyvaNcnzsD6/giphy.gif" />
                  </div>
                <div class="card_title title-black">
                  <p>Card Title</p>
                </div>
            </div>
            
        </div>

    </main>

<!-- Javascript Disini -->
<script>
    const myMenu = () => {
        document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
    }
</script>

<script src="src/script/data/songs.js"></script>
<script src="src/script/data/data-source.js"></script>
<script src="src/script/view/main.js"></script>
<script src="app.js"></script>

</body>

<footer>
    <h3><i class="fas fa-music"></i>Dapat<strong>Lirik</strong> 2020 - By <span><i class="fab fa-instagram"></i></span>Ihsandroid </h3>
</footer>

</html>

//data-source.js

function DataSource(onSuccess, onFailed) {
    this.onSuccess = onSuccess;
    this.onFailed = onFailed;
}

DataSource.prototype.searchSongs = function (keyword) {

    const filteredSongs = songs.filter(songs => songs.name.toUpperCase().includes(keyword.toUpperCase()));

    if (filteredSongs.length) {
        this.onSuccess(filteredSongs);
    } else {
        this.onFailed(`${keyword} is not found`);
    }
};

//songs.js
const songs = [
    {
        "track_id": 15445219,
        "track_name": "Alejandro",
        "has_lyrics": 1,
        "album_name": "The Fame Monster",
        "artist_id": 378462,
        "artist_name": "Lady Gaga",
        "updated_time": "2017-01-08T07:30:05Z"
    },
    {
        "track_id": 15445219,
        "track_name": "Alejandro",
        "has_lyrics": 1,
        "album_name": "The Fame Monster",
        "artist_id": 378462,
        "artist_name": "Lady Gaga",
        "updated_time": "2017-01-08T07:30:05Z"
    },
    {
        "track_id": 15445219,
        "track_name": "Alejandro",
        "has_lyrics": 1,
        "album_name": "The Fame Monster",
        "artist_id": 378462,
        "artist_name": "Lady Gaga",
        "updated_time": "2017-01-08T07:30:05Z"
    }
]

main.js

const main = () => {
    const searchElement = document.querySelector("#searchElement");
    const buttonSearchElement = document.querySelector("#searchButtonElement");
    const songsListElement = document.querySelector("#songList");

    const onButtonSearchClicked = () => {
        const dataSource = new DataSource(renderResult, fallbackResult);
        dataSource.searchSongs(searchElement.value);
    };

    const renderResult = results => {
        songsListElement.innerHTML = "";
        results.forEach(songs => {
            const {name, album, description} = songs

            const songsElement = document.createElement("div");
            songsElement.setAttribute("class", "songs");

            songsElement.innerHTML = `<img class="songs-album" src="' + ${album} + '" alt="Songs Album">
            <div class="songs-info">
            <h2>${name}</h2>
            <p>${description}</p>
            </div>`;
            
            songsListElement.appendChild(songsElement);
        }) 
    };

    const fallbackResult = message => {
        songsListElement.innerHTML = "";
        songsListElement.innerHTML += `<h2 class="placeholder">${message}</h2>`;
    };

    
    buttonSearchElement.addEventListener("click", onButtonSearchClicked);
};

Это мой код на GITHUB:

НАЖМИТЕ ЗДЕСЬ

Ответы [ 2 ]

0 голосов
/ 29 апреля 2020

Я вижу два вопроса здесь. 1) поле имени не является частью объекта песни / json в файле массивов песен (песен. js). Либо измените имя поля на один из ключей, по которым вы хотите выполнить поиск (track_name, album_name и т. Д. c), если вы хотите выполнить поиск по имени, оно должно быть 

songs.filter(songs => songs.track_name.toUpperCase().includes(keyword.toUpperCase()));

2) Вы используете имя , альбом, поля описания в функции renderResult.

измените их на track_name, album_name et c. 

const renderResult = (results) => {
    songsListElement.innerHTML = '';
    results.forEach((songs) => {
      const { track_name, album_name, updated_time } = songs;

      const songsElement = document.createElement('div');
      songsElement.setAttribute('class', 'songs');

      songsElement.innerHTML = `<img class="songs-album" src="' + ${album_name} + '" alt="Songs Album">
            <div class="songs-info">
            <h2>${track_name}</h2>
            <p>${updated_time}</p>
            </div>`;

      songsListElement.appendChild(songsElement);
    });

После этого я вижу, что вы также пытаетесь загрузить некоторые изображения. Вам нужно поставить изображения с названиями песен, чтобы загрузить его с локального

0 голосов
/ 29 апреля 2020

Вы вызываете toUpperCase () для song.name, это поле, которое не существует для объектов в песнях. Вы имели в виду songs.track_name?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...