Dovah Posts - Answer Overflow

Dovah

Posts Comments

KPCKevin Powell - Community

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

More elegant fit for elements auto stacking than grid-template-columns: repeat(auto-fit, n);

77 replies

KPCKevin Powell - Community

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

Fixed element not scrollable when resizing mobile screen?Bottom of the screen is eating the element.

So I have this element that is like a confirmation of order that pops when you are done and is fixed positioned. However, when I resize mobile view to smaller screen, vertically, it slowly stats disappearing from the bottom up and is not scrollabe. Element CSS:

css 
.order-confirmed {
    position: fixed;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    background-color: #fff;
    width: 100vw;
    height: 87vh;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 2.5rem 1.5rem;
}

css 
.order-confirmed {
    position: fixed;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    background-color: #fff;
    width: 100vw;
    height: 87vh;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 2.5rem 1.5rem;
}

36 replies

KPCKevin Powell - Community

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

Changing "accent-color" on radio button, changes color of space between border and inner circle?

13 replies

KPCKevin Powell - Community

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

How to change live input for input="text"?

To be more specific, if a user is typing something, I need to slightly change his input after specific requirements are met. Requirements are these: 1)Input="text" needs to only take numbers. Nothing else is permitted. 2)If first character user enters is "0" nothing is shown in input field. 3)When he enters his 4th number, "," is auto added in front of the first digit. Ex: "1,000" 4)Every next number moves comma to the next digit Ex: "10,000" ; "100,000" 5) When 7 digit number is typed, new comma is added in front of the first digit Ex: "1,000,000" 6)Repeat all that to the infinity

28 replies

KPCKevin Powell - Community

•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

Gaming

Programming