Malik Posts - Answer Overflow

Malik

•Created by Malik on 9/2/2024 in #front-end

Styled File Input Keyboard Accessible

How do I make this file input keyboard accessible without using js. Codepen: https://codepen.io/Arslan-Akbar/pen/OJeBMLp

4 replies

KPCKevin Powell - Community

•Created by Malik on 9/29/2023 in #front-end

Icon inside Button

21 replies

KPCKevin Powell - Community

•Created by Malik on 8/12/2023 in #front-end

Index issue maybe

7 replies

KPCKevin Powell - Community

•Created by Malik on 6/24/2023 in #front-end

Date part to milliseconds.

I've this time 2023-05-25T11:18:45.752Z . How do I get only the date part and change it to milliseconds. I know I can change the whole datetime to seconds by

const date = new Date().getTime();

const date = new Date().getTime();

But this takes the full datetime.

12 replies

KPCKevin Powell - Community

•Created by Malik on 6/10/2023 in #front-end

Top Layer

2 replies

KPCKevin Powell - Community

•Created by Malik on 5/24/2023 in #front-end

Pseudo On Visited Link

I want the pseudo element to disappear when a link is visited but it's not working. I could be doing something wrong. Need help. https://codepen.io/Arslan-Akbar/pen/mdzvgzB

5 replies

KPCKevin Powell - Community

•Created by Malik on 5/21/2023 in #front-end

Download button

How to make a download button that starts downloading the content as you click it. I tried anchor tag with download attribute. But for me it just opens up in new tab. As i've seen on multiple videos on youtube their content just starts downloading & they're not using any javascript or anything. Would like to get some help on that.

//doesn't matter if it's image or pdf they all open in new tab.
<a href="./my.pdf" download>Download</a>

//doesn't matter if it's image or pdf they all open in new tab.
<a href="./my.pdf" download>Download</a>

3 replies

KPCKevin Powell - Community

•Created by Malik on 5/12/2023 in #front-end

Dropdown is behind content

3 replies

KPCKevin Powell - Community

•Created by Malik on 5/9/2023 in #front-end

Download anchor tag

I want the download to start as you click it but it opens the file in new/same tab than either you click download if pdf or right click save image as if it's an image.

<a href="./padfile.pdf" download="PDF File">Download</a>

<a href="./padfile.pdf" download="PDF File">Download</a>

6 replies

KPCKevin Powell - Community

•Created by Malik on 4/26/2023 in #front-end

filter two things

I've got an array and I'm using filter() on it to get a new array. I'm comparing it from a value from input with the name property in the array. but I want it to use another value too to check if it includes that from the property tagname, what should I do.

result = data.filter(
      card => {
        return card.Name.toLowerCase().replace(/ /g, '').includes(inputvalue)
      })

result = data.filter(
      card => {
        return card.Name.toLowerCase().replace(/ /g, '').includes(inputvalue)
      })

but I want to do something like, this is probably wrong but

return card.Name.toLowerCase().replace(/ /g, '').includes(inputvalue)
card.tagname.toLowerCase().replace(/ /g, '').includes(inputvalue) //This one turns gray and not reachable what could I do here.

return card.Name.toLowerCase().replace(/ /g, '').includes(inputvalue)
card.tagname.toLowerCase().replace(/ /g, '').includes(inputvalue) //This one turns gray and not reachable what could I do here.

2 replies

KPCKevin Powell - Community

•Created by Malik on 4/26/2023 in #front-end

Search Preview

I'm trying to make a searchbar using json data and want to show the result preview of the result depending on the input. I've been successful in using filter() to get an array and now want to use that data to show the preview like image, name etc & I've done it but, Problem: The issue is after the first input whatever array i get the preview uses that and doesn't matter after that whatever input I used it doesn't use the furthur filtered down array. Like it's now continuously not using the result array, just on the first input. Issue found: (need new solution) it does use the current result and shows the preview as i want now the issue is it does it under the previous preview and doesn't resets it. How should I get it to reset or remove the previous html on every input

const SearchResultCard = document.querySelector("template");
const cardContainer = document.querySelector("[data-contianer]");
const search = document.querySelector(".search_bar");


search.addEventListener("input" , (e) => {
fetch("../../data.json")
.then(res => res.json())
.then(data => showInfo(data));

  const value = e.target.value.toLowerCase().replace(/ /g, '')
  
  function showInfo(data){
  const result = data.filter(
      filtered => {
        return filtered.Name.toLowerCase().replace(/ /g, '').includes(value);
      })

      console.log(result)
    result.map(cards => {
    const previewCard = SearchResultCard.content.cloneNode(true).children[0]
    const image = previewCard.querySelector("[data-image]")
    const name = previewCard.querySelector("[data-name]")
    const url = previewCard.querySelector("[data-pageUrl]")
    image.src = cards.Image
    image.alt = cards.Image_Alt
    name.textContent = cards.Name
    url.href = cards.slug
    cardContainer.append(previewCard)
    })
  }
  });

const SearchResultCard = document.querySelector("template");
const cardContainer = document.querySelector("[data-contianer]");
const search = document.querySelector(".search_bar");


search.addEventListener("input" , (e) => {
fetch("../../data.json")
.then(res => res.json())
.then(data => showInfo(data));

  const value = e.target.value.toLowerCase().replace(/ /g, '')
  
  function showInfo(data){
  const result = data.filter(
      filtered => {
        return filtered.Name.toLowerCase().replace(/ /g, '').includes(value);
      })

      console.log(result)
    result.map(cards => {
    const previewCard = SearchResultCard.content.cloneNode(true).children[0]
    const image = previewCard.querySelector("[data-image]")
    const name = previewCard.querySelector("[data-name]")
    const url = previewCard.querySelector("[data-pageUrl]")
    image.src = cards.Image
    image.alt = cards.Image_Alt
    name.textContent = cards.Name
    url.href = cards.slug
    cardContainer.append(previewCard)
    })
  }
  });

12 replies

KPCKevin Powell - Community

•Created by Malik on 4/25/2023 in #front-end

Two arrays

I've got one array that I fetch from my local json file.

[
{"name":"namestring",
 "img": "imgsrc"},
{"name":"namestring2",
 "img": "imgsrc2"},
{"name":"namestring3",
 "img": "imgsrc3"}
]

[
{"name":"namestring",
 "img": "imgsrc"},
{"name":"namestring2",
 "img": "imgsrc2"},
{"name":"namestring3",
 "img": "imgsrc3"}
]

let cards = []

fetch("/data.json")
.then(res => res.json())
.then(data => {
  cards = data.map(cards => {
     return {Name: cards.name, Img: cards.img}
  })
})

let cards = []

fetch("/data.json")
.then(res => res.json())
.then(data => {
  cards = data.map(cards => {
     return {Name: cards.name, Img: cards.img}
  })
})

and say I've an empty array

let result = []

let result = []

I've a event listener on the input and

search.addEventListener("input" , (e) => {
  const value = e.target.value.toLowerCase()
  cards.forEach( card => {
  card.Name.toLowerCase().includes(value)
  })
});

search.addEventListener("input" , (e) => {
  const value = e.target.value.toLowerCase()
  cards.forEach( card => {
  card.Name.toLowerCase().includes(value)
  })
});

what I want to happen is if the input value is equal to the name from the array cards I want that whole object to be pushed to array result other wise return. Still learning javascript so would appreciate a visual example or a topic i should look for.

2 replies

KPCKevin Powell - Community

•Created by Malik on 4/22/2023 in #front-end

Cards

2 replies

KPCKevin Powell - Community

•Created by Malik on 4/20/2023 in #front-end

Javascript for different pages.

I've a single file of js with multiple scripts for different pages. Issue is I'm getting one element on a page that is not available on the other page, because of that the script of that page doesn't work. What should be the approach here. Make a different js files for different pages. Or is there another way.

8 replies

KPCKevin Powell - Community

•Created by Malik on 4/17/2023 in #front-end

Javascript In astro

4 replies

KPCKevin Powell - Community

•Created by Malik on 4/14/2023 in #front-end

Flex box

8 replies

KPCKevin Powell - Community

•Created by Malik on 4/14/2023 in #front-end

CSS Selector

2 replies

KPCKevin Powell - Community

•Created by Malik on 4/14/2023 in #front-end

Span Icon overflow in form

3 replies

KPCKevin Powell - Community

•Created by Malik on 4/11/2023 in #front-end

Why is the footer squeezing.

9 replies

KPCKevin Powell - Community

•Created by Malik on 4/10/2023 in #front-end

Component transfer from one html file to another using Javascript.

Is it possible that using querySelector i get one component say a card from one html and insert it into another html page.(no click function the second page auto fetches it from the other page) I think I can use querySelectorAll to get the component. But dont know how to insert it or if it's possible. If there is any video or you can show just a single code.

29 replies

Gaming

Programming