Bardacoon
Bardacoon
PostsComments
KPCKevin Powell - Community
Created by Bardacoon on 6/22/2024 in #front-end
Why is there a margin/padding?
Why when you run the animation by clicking on the checkbox, it scrolls the text creating some padding/margin on the bottom of the card?https://codepen.io/Bard-the-scripter/pen/vYwjKKo?editors=1100
8 replies
KPCKevin Powell - Community
Created by Bardacoon on 5/11/2024 in #front-end
How to make child of absolute parent be relative to the other parent
I have something like this 
<div class="relative parent">
    <div class="absolute child1">
        <div class="absolute child2"></div>
    </div>
</div>
<div class="relative parent">
    <div class="absolute child1">
        <div class="absolute child2"></div>
    </div>
</div>
How can I make the child2 be relative to the parent (not child1)?
2 replies
KPCKevin Powell - Community
Created by Bardacoon on 2/6/2024 in #back-end
How do you fetch instagram?
I see some websites that can fetch an instagram profile and get all their posts, reels and videos by simply typing the username and I don't understand how they do it because it's so fast. I've tried scraping instagram's profile by doing this: 
const fs = require("fs")
const url = "https://instagram.com/instagram"

async function Scrape() {

    const headers = new Headers()

    const res = await fetch(url)
    const data = await res.text()

    fs.writeFile("result.html", data, err => {
        if(err) {
            console.log(err)
        } else {
            console.log("file written successfully")
        }
    })

}

Scrape()
const fs = require("fs")
const url = "https://instagram.com/instagram"

async function Scrape() {

    const headers = new Headers()

    const res = await fetch(url)
    const data = await res.text()

    fs.writeFile("result.html", data, err => {
        if(err) {
            console.log(err)
        } else {
            console.log("file written successfully")
        }
    })

}

Scrape()
But in result.html I only get a sorry there's nothing here page. How do they do it? For example go to https://igdownloader.app/ and type https://instagram.com/instagram
2 replies
KPCKevin Powell - Community
Created by Bardacoon on 12/16/2023 in #front-end
How to create a gallery with flex for images
Probably a beginner question. Let's say you have something like this: https://codepen.io/Bard-the-scripter/pen/yLZmBEw. So, just some very big images. Can I have the image to be at least X pixels wide and at most Y pixels wide, but always fill the screen width?
5 replies
KPCKevin Powell - Community
Created by Bardacoon on 12/3/2023 in #front-end
Why is "~" not working?
This is the code: https://codepen.io/Bard-the-scripter/pen/zYeMELM I want to create a custom cursor and it works. but when I hover over a .btn or something else, I want to scale it or increase the width. The problem is that it doesnt work. In the developer tools I can't even see that bit of code being applied.
4 replies
KPCKevin Powell - Community
Created by Bardacoon on 11/19/2023 in #front-end
How to select previous sibling
If you run this code, the .last button will increase its width when the .central button gets :hover, but the same thing wont happen to .first, I guess because it's before .central, how do I make this work? 
<div class="flex">
  <button class="first">ciao</button>
  <button class="center">aaaaaaa</button>
  <button class="last">ciao</button>
</div>
<div class="flex">
  <button class="first">ciao</button>
  <button class="center">aaaaaaa</button>
  <button class="last">ciao</button>
</div>
.flex {
  display: flex;
  flex-direction: row;
  background: red;
  max-width: 200px;
}

.center {
  flex-grow: 1;
}

.center:hover + .last,
.center:hover + .first {
  max-width: 100px;
}

.first,
.last {
  max-width: 0;
  overflow: hidden;
}
.flex {
  display: flex;
  flex-direction: row;
  background: red;
  max-width: 200px;
}

.center {
  flex-grow: 1;
}

.center:hover + .last,
.center:hover + .first {
  max-width: 100px;
}

.first,
.last {
  max-width: 0;
  overflow: hidden;
}
9 replies
KPCKevin Powell - Community
Created by Bardacoon on 11/6/2023 in #front-end
Grid as a child of a flex doesn't work properly
No description
5 replies