Dovah Posts - Answer Overflow

Dovah

•Created by Dovah on 7/2/2024 in #front-end

How to make this number "1234567890" into "1,234,567,890"?

So a whole number to separate by commas, so I can format it to look like that? Important thing is for it go from last digit, so in this case "0", and every 3 digt to plant a comma.

3 replies

KPCKevin Powell - Community

•Created by Dovah on 6/30/2024 in #front-end

How to get to differently named array-items when iterating over the whole array?

87 replies

KPCKevin Powell - Community

•Created by Dovah on 2/15/2024 in #front-end

What to do so that page loads when API calls are finished?

https://snazzy-tiramisu-4033f2.netlify.app/ My JS lags behind since it is dealing with API, and first thing that loads is just the regular HTML I have, and then it process the API. What to do so that it loads the finished page? I also think the way I setup my functions are slowing the code down, but I'm not sure. It goes something like this --->

let data;
async firstAPIFunction() {
//do something
data = firstAPIFunction.data;
secondAPIFunction();
}
let secondData;
async secondAPIFunction(){
  //use data to get secondData;
  //secondData = secondAPIFunction.data;
  //fill HTML with it
}

document.addEventListener('DOMContentLoaded', () => {
    firstAPIFunction();
    changeMoreCSSHTML();
})

function changeMoreCSSHTML() {
  //does something to CSS and HTML after API has finished
}

let data;
async firstAPIFunction() {
//do something
data = firstAPIFunction.data;
secondAPIFunction();
}
let secondData;
async secondAPIFunction(){
  //use data to get secondData;
  //secondData = secondAPIFunction.data;
  //fill HTML with it
}

document.addEventListener('DOMContentLoaded', () => {
    firstAPIFunction();
    changeMoreCSSHTML();
})

function changeMoreCSSHTML() {
  //does something to CSS and HTML after API has finished
}

You can check the actual code in the link of course.

25 replies

KPCKevin Powell - Community

•Created by Dovah on 2/13/2024 in #front-end

Help with finishing touches on this "FrontEndMentor" project? Few small bugs.

10 replies

KPCKevin Powell - Community

•Created by Dovah on 2/12/2024 in #front-end

Idea for auto-width animation?

Basically, for my element to have a smooth, auto width transition when content of it is changed. Example: https://codepen.io/DovahTheKiin/pen/vYPQXXB

1 replies

KPCKevin Powell - Community

•Created by Dovah on 2/10/2024 in #front-end

Best way to animate height increase upwards?

Basically for animation of the element to start from the bottom towards top, instead the default that goes downwards? One solution I saw is to set overflow:hidden; to the body and hide element outside of the viewport, but it creates responsive problems on certain screen sizes.

11 replies

KPCKevin Powell - Community

•Created by Dovah on 2/10/2024 in #front-end

How to prevent height:100svh; from eating the whole page when collapsing it vertically?

When you put height:100svh; and start resizing it vertically, page starts losing elements, on both top and bot, instead of being able to scroll at some point?

5 replies

KPCKevin Powell - Community

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

Help with simple height animation?

https://codepen.io/DovahTheKiin/pen/BabqBGE I want to make second div change it's height and that first one, together with it's content to follow it, but I want to avoid any hard-coded values. something like this Kevin's video: https://www.youtube.com/watch?v=B_n4YONte5A I also need for second div to be glued to the bottom of the body all the time, without absolute units. I remember seeing code something like this for "glued to the bottom" problem.

.container {
  display:grid;
  grid-template-rows: auto 1fr;
}

.container {
  display:grid;
  grid-template-rows: auto 1fr;
}

3 replies

KPCKevin Powell - Community

•Created by Dovah on 2/8/2024 in #front-end

How to recreate this effect? (Figma settings inside)

1 replies

KPCKevin Powell - Community

•Created by Dovah on 1/1/2024 in #front-end

Help with highlighting a singular list element on click.

Click target is highlighted, while other elements, if they were ones being highlighted beforehand, lose it. JS in this example is what I was suggested to do here some time ago: https://codepen.io/DovahTheKiin/pen/WNmQOqM Problem with this method is that if you click on any child element, it does not apply the class on the parent element. This link was suggested to me multiple times here as well, but it suffers from the same problem: https://gomakethings.com/listening-for-events-on-multiple-elements-using-javascript-event-delegation/

if (event.target.matches('.click-me')) {
        // Do something...
    }

if (event.target.matches('.click-me')) {
        // Do something...
    }

If you click on any child element of the "matches" element, event is not working.

4 replies

KPCKevin Powell - Community

•Created by Dovah on 7/31/2023 in #front-end

Unable to input into a textfield?

Hello! I was practicing automation on a website, and found out that I'm unable to input into a input field? I tried all of these:

input.setAttribute("value", "100");

input.setAttribute("value", "100");

input.value = 100;

input.value = 100;

input.value = 100;
input.dispatchEvent(
new Event("input", { bubbles: true, cancelable: true })

input.value = 100;
input.dispatchEvent(
new Event("input", { bubbles: true, cancelable: true })

Last one should be the modern way of doing it, but while it did input it, it did not save it. Anyone knows what is the problem?

68 replies

KPCKevin Powell - Community

•Created by Dovah on 6/9/2023 in #front-end

How to use fonts from local folder?

18 replies

KPCKevin Powell - Community

•Created by Dovah on 6/7/2023 in #front-end

Separate HTML files VS injecting data via JSON for super similar content?

In project I'm doing, I have multiple pages that have exact same structure and differentiate only in pictures and text they use, but everything, structure vise is the same. My question is, what is standard and better for performance? When you click on the menu links, do I just point it towards separate html file, or do I just inject all that different info via JSON? Project allowes me to choose what I want to do, but I'm just wondering what is better! Cheers!

21 replies

KPCKevin Powell - Community

•Created by Dovah on 5/29/2023 in #front-end

Drag events not working on mobile version. What is alternative?

I have a list that you can order at will by dragging it's items to the position you want. I'm using dragstart, dragover, drop etc. events for it, however they do not work on mobile version. I saw touchstart, touchend events, but they seem much more coplicated to work with. Is that only option I have or are there other options?

2 replies

KPCKevin Powell - Community

•Created by Dovah on 5/19/2023 in #os-and-tools

Can I select 2 different tabs in the same time and input in them at the same time?

Kinda a weird and stupid question, but hear me out. I'm practicing design a bit, and I have 2 different designs for the form, and I can't decide which one is better. Is there a way to split 2 tabs and input my keyboard in both of them in the same time so I can see in real time how effects perform? It's driving me nuts. 😦

7 replies

KPCKevin Powell - Community

•Created by Dovah on 3/31/2023 in #front-end

How do I save whole HTML page with changes in localStorage, and load it up upon browser refresh?

WITH WORKING JS* It does not need to be HTML, it can be <body> or even <container> (in my case, container is named "refresh-div"). Project link: https://astonishing-cupcake-035f30.netlify.app/

const htmlContent = document.querySelector(".refresh-div").innerHTML;
localStorage.setItem('newPage', htmlContent);

const htmlContent = document.querySelector(".refresh-div").innerHTML;
localStorage.setItem('newPage', htmlContent);

const refressLul = document.querySelector(".refresh-div")
if(pageAccessedByReload === true) {
  refressLul.innerHTML = localStorage.getItem("newPage"); 
}

const refressLul = document.querySelector(".refresh-div")
if(pageAccessedByReload === true) {
  refressLul.innerHTML = localStorage.getItem("newPage"); 
}

Code above is what I was doing. While it does load changed HTML, some JS is not working at all. Any ideas on how to properly do it? Try adding comments, saving those changes, then loading them upon refresh with all of the things working properly(reply, edit, delete etc.)

14 replies

KPCKevin Powell - Community

•Created by Dovah on 3/30/2023 in #front-end

How to find index of an Object inside of querySelectorAll?

I need index of element inside of NodeList...

const testlul = document.querySelectorAll(".comment-box")
document.addEventListener('click', (e) => {
    if(e.target.matches(".comment-box")) {
        let targetLul = e.target;
        console.log(testlul.indexOf(targetLul))
    }
})

const testlul = document.querySelectorAll(".comment-box")
document.addEventListener('click', (e) => {
    if(e.target.matches(".comment-box")) {
        let targetLul = e.target;
        console.log(testlul.indexOf(targetLul))
    }
})

Something like this, but it does not work.

35 replies

KPCKevin Powell - Community

•Created by Dovah on 3/29/2023 in #front-end

Function for calculating time between when comment was posted and now? (elapsed time)

Hello! I have a task in my current project where I need to calculate time between when comment was posted and now. So If comment was posted 2 days ago, it will say "2 days ago" etc. Now, my question is, is there a built in function or whatever that shows elapsed time between in whatever format you want? So, seconds, minutes, hours, days, week, months years etc. Or do I need to write that code myself? Since it looks like something basic that should be built in. Cheers!

44 replies

KPCKevin Powell - Community

•Created by Dovah on 3/24/2023 in #front-end

How save changes to HTML on reload?

So if I dynamically add HTML elements, and reload the page, for it to not return to default but to be shown with the changes. I'm wondering is there simple code for it?

const htmlContent = document.querySelector("body").innerHTML;
        console.log(htmlContent)
        localStorage.setItem('newPage', htmlContent);

const htmlContent = document.querySelector("body").innerHTML;
        console.log(htmlContent)
        localStorage.setItem('newPage', htmlContent);

const pageAccessedByReload = (
    (window.performance.navigation && window.performance.navigation.type === 1) ||
      window.performance
        .getEntriesByType('navigation')
        .map((nav) => nav.type)
        .includes('reload')
  );
  
  if(pageAccessedByReload === true) {
    console.log("lul");
    let str = document.querySelector("body");
    str.innerHTML = localStorage.getItem("newPage");
    var parser = new DOMParser();
    var doc = parser.parseFromString(str, 'text/html');
    doc.body;
  }

const pageAccessedByReload = (
    (window.performance.navigation && window.performance.navigation.type === 1) ||
      window.performance
        .getEntriesByType('navigation')
        .map((nav) => nav.type)
        .includes('reload')
  );
  
  if(pageAccessedByReload === true) {
    console.log("lul");
    let str = document.querySelector("body");
    str.innerHTML = localStorage.getItem("newPage");
    var parser = new DOMParser();
    var doc = parser.parseFromString(str, 'text/html');
    doc.body;
  }

This is something I found on the google but It's not working the best...

2 replies

KPCKevin Powell - Community

•Created by Dovah on 3/24/2023 in #front-end

Weird button hitbox(click-area?)

44 replies

Gaming

Programming