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

Поделиться
HTML-код
  • Опубликовано: 29 окт 2024

Комментарии • 13

  • @bushigi5913
    @bushigi5913 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 8 месяцев назад

    Very nice and easy explanation, thanks.

  • @Usaid-u5u
    @Usaid-u5u Год назад

    Thank you Brother ,Its Really Help full for me

  • @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?

  • @constantine9074
    @constantine9074 Год назад

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

  • @TheBorninmotion
    @TheBorninmotion 2 года назад

    please do more web components tuts !

  • @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 :),

  • @semasus3830
    @semasus3830 2 года назад +2

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

  • @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");
    });
    });