From b214b1343920f20dd95f928b28cb97358cde4a65 Mon Sep 17 00:00:00 2001 From: Khalid Hossain Date: Thu, 14 Mar 2024 17:55:27 +0600 Subject: [PATCH] Hide failed to load thumbnails --- index.html | 53 +++++++++++++++++++---------------------------------- script.js | 18 ++++++++++++------ styles.css | 22 ++++++++++++++++------ 3 files changed, 47 insertions(+), 46 deletions(-) diff --git a/index.html b/index.html index 3b40ad5..6614354 100644 --- a/index.html +++ b/index.html @@ -12,51 +12,36 @@
-
-

Thumbnailed

 -
-
- - +
+
+ +

Thumbnailed

+ +
+
+ + +
-
diff --git a/script.js b/script.js index ad174db..9a68d5b 100644 --- a/script.js +++ b/script.js @@ -10,20 +10,27 @@ let images = document.querySelectorAll('.thumbnail'); * @type {HTMLButtonElement} button */ let button = document.getElementById('input-btn'); -/** - * @type {HTMLDivElement} div - */ -let display = document.getElementById('display'); /** * @type {HTMLLinkElement} favicon */ let link = document.querySelector("link[rel~='icon']"); -input.addEventListener('focus', () => {input.select()}); +input.addEventListener('focus', () => { input.select() }); input.addEventListener('change', processThumbnail); input.addEventListener('input', processThumbnail); button.addEventListener('click', processThumbnail); +images.forEach(image => image.addEventListener('load', e => { + /** + * @type {HTMLImageElement} + */ + let thumb = e.target; + if (thumb.naturalWidth == 120 && thumb.naturalHeight == 90) { + thumb.parentElement.classList.add('hidden'); + } else { + thumb.parentElement.classList.remove('hidden'); + } +})); processThumbnail(); if (!link) { @@ -57,7 +64,6 @@ function processThumbnail() { for (let i = 0; i < images.length; i++) { images[i].src = thumbURLS[i]; } - display.classList.remove("hidden"); } /** diff --git a/styles.css b/styles.css index cbd6ca0..1b47dc5 100644 --- a/styles.css +++ b/styles.css @@ -47,19 +47,29 @@ input:not(:focus)::selection { } header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 15px 50px; background-color: var(--background-color); color: var(--text-color); + display: flex; + justify-content: center; + align-items: center; position: fixed; width: 100%; top: 0; left: 0; + height: 80px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.2); } +.header-content { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px; + margin: auto; + width: 100%; + max-width: 1200px; +} + .site-id a { text-decoration: none; color: var(--text-color); @@ -96,7 +106,7 @@ main { } .input-container input { - min-width: 48ch; + min-width: 44ch; } .input-container button:hover, .input-container button:active{ @@ -132,7 +142,7 @@ main { justify-content: center; align-items: center; flex-direction: column; - max-width: 1020px; + max-width: 1200px; padding: 10px; margin: auto; }