How to Easily Create Pill Buttons (Tags) with HTML & CSS

แชร์
ฝัง
  • เผยแพร่เมื่อ 19 ธ.ค. 2024

ความคิดเห็น • 14

  • @michaelwhitley2081
    @michaelwhitley2081 6 วันที่ผ่านมา

    That’s so easy… when you know!! Fantastic lesson!! Thank you 🙏

  • @linchen5913
    @linchen5913 2 ปีที่แล้ว +4

    Wow, I was expecting more complicated ways of doing it and the video ends! I am amazed by how easy it was to do these. Thank you for sharing.

  • @AliBaba-hn8tv
    @AliBaba-hn8tv 10 หลายเดือนก่อน

    Very nice and easy explanation, thanks.

  • @Usaid-u5u
    @Usaid-u5u ปีที่แล้ว

    Thank you Brother ,Its Really Help full for me

  • @semasus3830
    @semasus3830 2 ปีที่แล้ว +2

    2:50 1 em is 16 px btw not 12 px.

  • @jotape8417
    @jotape8417 2 ปีที่แล้ว

    Hey what is your visual studio theme and how do you make it so that the letters appears smoothly as you write?

  • @TheBorninmotion
    @TheBorninmotion 2 ปีที่แล้ว

    please do more web components tuts !

  • @constantine9074
    @constantine9074 ปีที่แล้ว

    I used radiobuttons for background color, this way pill--selected has the same background color on reload

  • @TomasMisura
    @TomasMisura 2 ปีที่แล้ว

    i am not sure if you've already done video for that but would you please consider make a tutorial how to create simple tagging system?

    • @suelingsusu1339
      @suelingsusu1339 2 ปีที่แล้ว +1

      here is a script that would do what you asked ... just replace the one in the video with this one... add a few more buttons and see what happens...
      document.querySelectorAll(".pill").forEach((pill) => {
      pill.addEventListener("click", () => {
      document.querySelectorAll(".pill--selected").forEach((p) => {
      p.classList.remove("pill--selected");
      });
      pill.classList.add("pill--selected");
      });
      });

    • @TomasMisura
      @TomasMisura 2 ปีที่แล้ว +1

      @@suelingsusu1339 Thank you dude, much appreciated :),

  • @Salah-YT
    @Salah-YT 2 ปีที่แล้ว +1

    ok bro nice but it will be more helpful if u do a video about algorithms step by step and teach us how we solve a problem I'm done with HTML and CSS so please if u can thx

  • @محمودالبحيري-ق8ر
    @محمودالبحيري-ق8ر 2 ปีที่แล้ว +1

    first view

  • @suelingsusu1339
    @suelingsusu1339 2 ปีที่แล้ว

    @dcode... this is a better script ... it unselects previously selected buttons and selects the clicked one
    document.querySelectorAll(".pill").forEach((pill) => {
    pill.addEventListener("click", () => {
    document.querySelectorAll(".pill--selected").forEach((p) => {
    p.classList.remove("pill--selected");
    });
    pill.classList.add("pill--selected");
    });
    });