update style

src/script/components/body/footer-section.js

@@ -1,35 +1,35 @@
 class FooterSection extends HTMLElement {
-  constructor () {
-    super()
-    this.shadowDOM = this.attachShadow({ mode: 'open' })
+  constructor() {
+    super();
+    this.shadowDOM = this.attachShadow({ mode: "open" });
   }
 
-  connectedCallback () {
-    this.render()
-    this.addEventListeners()
+  connectedCallback() {
+    this.render();
+    this.addEventListeners();
   }
 
-  addEventListeners () {
-    const h5Element = this.shadowDOM.querySelector('h5')
-    h5Element.addEventListener('click', this.reset)
-    h5Element.addEventListener('mouseover', () => this.changeText(h5Element))
-    h5Element.addEventListener('mouseout', () => this.resetText(h5Element))
+  addEventListeners() {
+    const h5Element = this.shadowDOM.querySelector("h5");
+    h5Element.addEventListener("click", this.reset);
+    h5Element.addEventListener("mouseover", () => this.changeText(h5Element));
+    h5Element.addEventListener("mouseout", () => this.resetText(h5Element));
   }
 
-  reset () {
-    sessionStorage.clear()
-    location.reload()
+  reset() {
+    sessionStorage.clear();
+    location.reload();
   }
 
-  changeText (element) {
-    element.innerText = 'reset data'
+  changeText(element) {
+    element.innerText = "reset data";
   }
 
-  resetText (element) {
-    element.innerHTML = 'by ©ariafatah0711'
+  resetText(element) {
+    element.innerHTML = "by ©ariafatah0711";
   }
 
-  render () {
+  render() {
     this.shadowDOM.innerHTML = `
     <div class="footer">
         <style>
@@ -48,16 +48,16 @@ class FooterSection extends HTMLElement {
                 margin-bottom: 0; 
             }
             .footer h5:hover {
-                background-color: #fc5f9b;
+                background-color: var(--col-2);
             }
         </style>
 
         <h5>
             by &copy;ariafatah0711
         </h5>
     </div>
-    `
+    `;
   }
 }
 
-customElements.define('footer-section', FooterSection)
+customElements.define("footer-section", FooterSection);

src/script/components/body/header-navbar.js

@@ -1,93 +1,103 @@
-import $ from 'jquery'
+import $ from "jquery";
 
 class headerNavbar extends HTMLElement {
-  constructor () {
-    super()
-    this.render()
-    this.toggleMenu()
+  constructor() {
+    super();
+    this.render();
+    this.toggleMenu();
   }
 
-  toggleMenu () {
-    $('#nav-btn').click(() => {
-      $('.menu').toggleClass('hidden-menu')
-    })
+  toggleMenu() {
+    $("#nav-btn").click(() => {
+      $(".menu").toggleClass("hidden-menu");
+    });
   }
 
-  render () {
+  render() {
     this.innerHTML = `
-    <style>
-      header-navbar {
-          height: 50px; max-height: 50px;
-          position: relative;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          border-bottom: 1px solid black;
-      }
-      header-navbar h1.tittle {
-          font-size: 1.35rem;
-      }
-      .navbar .menu {
-          display: flex;
-          gap: 25px;
-      }
-
-      .navbar a, a::after {position: relative;}
-      .navbar a::after{
-          content: ""; position: absolute;
-          bottom: -3px; left: 0;
-          width: 0; height: 0.2rem;
-          background: var(--main-color);
-          transition: width 0.3s ease;
-      }
-      .navbar a:hover::after{
-        width: 100%;
-      }
-      .navbar a {
-        cursor: pointer;
-      }
-
-      .navbar-list {display: none;}
-      #nav-btn {display: none;}
-
-      @media (max-width:600px) {
-        .hidden-menu {display: none !important;}
-        #nav-btn {display: flex;}
-        .navbar .menu {
-            width: 100%;
-            padding: 10px 0;
-            margin-top: 25px;
-            position: absolute;
-            left: 0;
+      <style>
+        header-navbar {
+            height: 50px; max-height: 50px;
+            position: relative;
             display: flex;
-            flex-direction: column;
-            justify-content: center;
-            background-color: #efefef;
-            z-index: 5;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 0.5px solid var(--text);
         }
-        .navbar .menu a {
-            text-align: center;
+        header-navbar h1.tittle {
+            font-size: 1.35rem;
+            z-index: 5
         }
-        .navbar a::after{display: none;}
-        .navbar-list {
+        .navbar .menu {
             display: flex;
+            gap: 25px;
+            z-index: 5
+        }
+
+        .navbar a, a::after {position: relative;}
+        .navbar a::after{
+            content: ""; position: absolute;
+            bottom: -3px; left: 0;
+            width: 0; height: 0.2rem;
+            background: var(--main-color);
+            transition: width 0.3s ease;
+        }
+        .navbar a:hover::after{
+          width: 100%;
+        }
+        .navbar a {
+          cursor: pointer;
+          z-index: 5
+        }
+
+        .navbar-list {display: none;}
+        #nav-btn {
+          display: none;
+          z-index: 10;
+          padding-right: 15px;
+          transform: scale(1.5);
+        }
+
+        @media (max-width:600px) {
+          .hidden-menu {display: none !important;}
+          #nav-btn {display: flex;}
+          .navbar .menu {
+              width: 100%;
+              padding: 10px 0;
+              margin-top: 35px;
+              position: absolute;
+              left: 0;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              background-color: #efefef;
+              z-index: 5;
+              background: var(--col-2) !important;
+          }
+          .navbar .menu a {
+              text-align: center;
+          }
+          .navbar a::after{display: none;}
+          .navbar-list {
+              display: flex;
+          }
         }
-      }
-    </style>
+      </style>
 
       <h1 class="tittle">AnimeLab</h1>
-        <nav class="navbar">
-            <div class="menu hidden-menu">
-                <a class="nav-link" data-section="home">home</a>
-                <a class="nav-link" data-section="anime">anime</a>
-                <a class="nav-link" data-section="manga">manga</a>
-                <a class="nav-link" data-section="characters">characters</a>
-            </div>
-            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-            <i id="nav-btn" class="fa fa-list navbar-list"></i>
+      <nav class="navbar">
+        <div class="menu hidden-menu">
+            <a class="nav-link" data-section="home">home</a>
+            <a class="nav-link" data-section="anime">anime</a>
+            <a class="nav-link" data-section="manga">manga</a>
+            <a class="nav-link" data-section="characters">characters</a>
+        </div>
+        <i id="nav-btn" class="fa fa-list navbar-list">#</i>
         </nav>
-    `
+        `;
+    // <script src="https://kit.fontawesome.com/c90c144b50.js" crossorigin="anonymous"></script>
+    // <i id="nav-btn" class="fa fa-list navbar-list"></i>
   }
 }
 
-customElements.define('header-navbar', headerNavbar)
+customElements.define("header-navbar", headerNavbar);

src/script/components/result-list.js

@@ -1,9 +1,9 @@
 class ResultList extends HTMLElement {
-  connectedCallback () {
-    this.render()
+  connectedCallback() {
+    this.render();
   }
 
-  render () {
+  render() {
     this.innerHTML = `
         <style>
             .list .container {
@@ -39,7 +39,7 @@ class ResultList extends HTMLElement {
                 overflow: hidden;
             }
             .card:hover {
-                background: #efefef;
+                background: #efefef
             }
             
             img {
@@ -78,17 +78,17 @@ class ResultList extends HTMLElement {
                 grid-template-columns: repeat(2, 25% auto);
                 flex-direction: column;
               }
-              .list .container.top .card span h1 {
-                font-size: 1.5rem;
-                text-align: left;
-              }
-              .list .container.top .card span p {
-                display: flex;
-                font-size: 0.75rem;
-                white-space: wrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-              }
+            .list .container.top .card span h1 {
+              font-size: 1.5rem;
+              text-align: left;
+            }
+            .list .container.top .card span p {
+              display: flex;
+              font-size: 0.75rem;
+              white-space: wrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
         </style>
 
         <home-list id="home" class="home"></home-list>
@@ -98,8 +98,8 @@ class ResultList extends HTMLElement {
         <top-anime-list id="top-anime" class="list"></top-anime-list>
         <top-manga-list id="top-manga" class="list"></top-manga-list>
         <top-characters-list id="top-characters" class="list"></top-characters-list>
-    `
+    `;
   }
 }
 
-customElements.define('result-list', ResultList)
+customElements.define("result-list", ResultList);

src/style/style.css

@@ -1,6 +1,12 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
 :root {
     --main-color: #d3ad7f;
+
+    --main-color: #F0ECE5;
+    --text: #161A30;
+    --bg-color: #B6BBC4;
+    --col-1: #B6BBC4;
+    --col-2: #3498db;
 }
 * {
     font-family: 'Poppins', Tahoma ,sans-serif;
@@ -10,6 +16,7 @@
     text-decoration: none;
     text-transform: capitalize;
     user-select: none;
+    color: var(--text);
 }
 
 body {
@@ -42,4 +49,14 @@ footer-section {
     justify-content: center;
     align-items: end;
     flex-grow: 1;
+}
+
+/* styling ulang */
+.card:hover h1,
+.card:hover p {
+    color: var(--col-2) !important;
+}
+
+header-navbar {
+    background: var(--bg-color);
 }