Когда я запускаю Build Webpack, ошибка отображения моего сайта (беспорядок) - PullRequest
Новая
       15

Когда я запускаю Build Webpack, ошибка отображения моего сайта (беспорядок)

1 голос
/ 02 мая 2020

Когда NPM Run Build Webpack был успешным, но общий внешний вид сайта Messy Website, точнее, меню навигации (главное меню) и нижнего колонтитула (меню вниз), мог быть ошибкой в ​​пользовательском элементе, но Я не знаю местоположение ошибки.

Это мой пример кода: 

let MenuUtamaElement = document.querySelector("menu-utama");
let MenuBawahElement = document.querySelector("menu-bawah");
let ContentNewsElement = document.querySelector("menu-bawah");

$(document).ready(function () {

  let url = "http://newsapi.org/v2/top-headlines?country=id&category=technology&apiKey=ca5b6461d1d543d893339c704b9836ea";

  $.ajax({
    url: url,
    method: "GET",
    dataType: "JSON",

    beforeSend: () => {
      $(".progress").show();
    },

    complete: () => {
      $(".progress").hide();
    },

    success: function (newsdata) {
      let output = "";
      let latestNews = newsdata.articles;
      for (let i in latestNews) {
        output += `
          <div class="col l6 m4 s12">
          <div class="card medium hoverable">
            <div class="card-image">
              <img src="${latestNews[i].urlToImage}" class="responsive-img" alt="${latestNews[i].title}">
            </div>
            <div class="card-content">
              <span class="card-title activator"><i class="material-icons right">more_vert</i></span>
              <h6 class="truncate"><a href="${latestNews[i].url}" target="_blank" title="${latestNews[i].title}">${latestNews[i].title}</a></h6>
              <p><b>Sumber</b>: ${latestNews[i].source.name} </p>
            </div>

            <div class="card-reveal">
              <span class="card-title"><i class="material-icons right">close</i></span>
              <p><b>Deskripsi</b>: ${latestNews[i].description}</p>
            </div>

            <div class="card-action light-blue darken-3">
              <a href="${latestNews[i].url}" target="_blank" class="btn yellow darken-3"><span class="material-icons">
              label_important
              </span>Selanjutnya</a>
            </div>
           </div>
          </div>
        `;
      }

      if (output !== "") {
        $("#newsResults").html(output);
      }

    },

    error: function () {
      let errorMsg = `<div class="errorMsg center">Mohon Maad ada yang error</div>`;
      $("#newsResults").html(errorMsg);
    }
  })

});
/*!
 * Materialize v1.0.0 (http://materializecss.com)
 * Copyright 2014-2017 Materialize
 * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
 */


 #loader {
    height: 100vh;
    align-items: center;
    display: flex;
    justify-content: center;

}

.progress {
    display: none;
}

.errorMsg {
    font-size: 34px;
    height: 100vh;
    align-items: center;
    display: flex;
    justify-content: center;
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Berita Mantap</title>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<link rel="stylesheet" href="css/materialize.min.css">
</head>
<body>
	<!-- Tampilan Web -->
	<menu-utama></menu-utama>
			<content-news></content-news>
	<menu-bawah></menu-bawah>

	<!-- Javascript Disini -->
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="js/materialize.min.js"></script>
	<script src="js/app.js"></script>
	<script src="js/menu-utama.js"></script>
	<script src="js/content-news.js"></script>
	<script src="js/menu-bawah.js"></script>
</body>
</html>

Вот пример моего исходного кода:

https://github.com/hahamen-ihs/berita-satu

Пожалуйста, помогите, сестренка, большое спасибо:)

...