Build a Dynamic Table with Sorting | HTML, CSS & JavaScript Frontend Mini Projects | Dylan Israel

Поділитися
Вставка
  • Опубліковано 18 січ 2025

КОМЕНТАРІ • 63

  • @CodingTutorials360
    @CodingTutorials360  5 років тому +3

    My latest course for just $9.99. Ace your front end interviews with the '100 Front End Interview Questions Challenge'!!!
    www.udemy.com/100-front-end-interview-questions-challenge/?couponCode=CODINGGOD

    • @tikokuk
      @tikokuk 5 років тому

      why it is not free))

  • @JulieJau
    @JulieJau 5 років тому +4

    Thank you, Dylan. You do these things so quickly, I'm still on drawing little diagrams to keep things straight in my head. But I know that if i keep practising and get the patterns down, it will become easier.

    • @GavishSethi
      @GavishSethi 3 роки тому

      Not working

    • @aviralpruthi4240
      @aviralpruthi4240 2 роки тому

      please tell the suitable project description in few words
      I have to add it to my resume as a mini project

  • @prhasn
    @prhasn 3 роки тому +1

    Excellent. Thank you.

  • @Kyle_Sherrington
    @Kyle_Sherrington 4 роки тому +3

    9:48 This string interpolation doesn't work in VSCode (1.52.1) for me. The "${person.name}" isn't changing color in the code, and it's literally injecting those characters into the HTML.

    • @CodingTutorials360
      @CodingTutorials360  4 роки тому +3

      You need to use `` backticks.

    • @Kyle_Sherrington
      @Kyle_Sherrington 4 роки тому

      @@CodingTutorials360 Ahh yes, I started researching the issue. Backticks. Thanks Dylan!

    • @phillosopherguitarist2673
      @phillosopherguitarist2673 2 роки тому

      @@CodingTutorials360 Hi Dylan, somehow this is not working, no matter which ticks I use, doing this 2022 in current VSCode. Where could the issue now be? Thank you already for your answer!

    • @erickbecker7604
      @erickbecker7604 2 роки тому

      @@phillosopherguitarist2673 by is dont worked too :/

    • @mrzippy768
      @mrzippy768 2 роки тому

      I'm also facing the same issue🤧😢.
      plzz help

  • @irustv7674
    @irustv7674 5 років тому +10

    Here is variant for text:
    1. modify this part of "swith(dataType)":
    switch(dataType) {
    case 'number':
    sortNumberColumn(sortDirection, columnName);
    break
    case 'string':
    sortTextColumn(sortDirection, columnName);
    break
    }
    2. after functiom sortNumberColumn add this:
    function sortTextColumn(sort, columnName) {
    personData = personData.sort((p1, p2) => {
    return sort ? (p1[columnName] > p2[columnName]) - (p1[columnName] < p2[columnName]) : (p2[columnName] > p1[columnName]) - (p2[columnName] < p1[columnName])
    });
    }

  • @quadturboR
    @quadturboR 2 роки тому

    This tutorial is a great job! It helps me a lot. Thank you!

  • @chaabiamal4856
    @chaabiamal4856 3 роки тому

    Thank youuuu so much

  • @honeypatre
    @honeypatre 4 роки тому +1

    This one really helped me a lot!!!!!

  • @okuratnywidz3196
    @okuratnywidz3196 4 роки тому +1

    thank you for this tutorial : )

  • @CodingJourney
    @CodingJourney 5 років тому +1

    Very nice Dylan, thanks!!

  • @bharatkalyan9941
    @bharatkalyan9941 3 роки тому +1

    Could you please tell me
    How to add load more for the above example

  • @sitalasandhyabehera8956
    @sitalasandhyabehera8956 3 роки тому

    Nice content

  • @sentineladigital
    @sentineladigital 5 років тому +2

    Muito obrigado, continue assim. me ajudou muito. :-)

  • @rachelng9166
    @rachelng9166 3 роки тому +1

    Thank you Dylan! Awesome work. Will you be able to do another video for async data source?

    • @aviralpruthi4240
      @aviralpruthi4240 2 роки тому

      please tell the suitable project description in few words
      I have to add it to my resume as a mini project

  • @markleodionisio2669
    @markleodionisio2669 4 роки тому

    Thank you sir

  • @zelow79
    @zelow79 4 роки тому +2

    So, how would you sort the name column?

  • @DRocksRecords
    @DRocksRecords 5 років тому +1

    This is one of the most valuable tutorial I had the chance to find regarding table manipulations in general all languages together (Autohotkey, Java, C#, Python, JavaScript).
    Thanks so much, subscribed and might buy your udemy 360 course on js, cheers

  • @nextgensolver
    @nextgensolver 4 роки тому

    Thanks alot for this bro

  • @damiajayi4670
    @damiajayi4670 4 роки тому

    Thanks a lot for this

  • @gilvan7388
    @gilvan7388 4 роки тому

    Very good tutorial

  • @jaygan3603
    @jaygan3603 3 роки тому +1

    how do you connect the array to the backend ?

  • @pareshsolanki929
    @pareshsolanki929 5 років тому

    Thanks Dylan excellent!

  • @bentaylor1153
    @bentaylor1153 2 роки тому

    Do you have this in a git repo anywhere?

  • @pareshsolanki929
    @pareshsolanki929 5 років тому

    I watched it live Thanks

  • @sairajdas6692
    @sairajdas6692 5 років тому +2

    Isn't it a good practice to include script tags in the end?

  • @athertonsecretary4385
    @athertonsecretary4385 4 роки тому +1

    To while away the hours of Covid lockdown, I've been trying to teach myself js. I've created a few 'retro' games which seem to work well but would like to add a high score table to them, one where you can input your name if you succeed in getting the highest score. At the moment I'm struggling to find a course on UA-cam, not wanting to go down the Unity route - too complicated for this old man to master! Is it possible to run a high score course, say to update a minesweeper game? Regards, Lev

  • @lucanthony2209
    @lucanthony2209 5 років тому +2

    Hey Dylan, great video. You inspire me to continue and keep pushing myself in my coding journey. Can you build a similar table by getting data from a plateform like eventbrite?

    • @aviralpruthi4240
      @aviralpruthi4240 2 роки тому

      please tell the suitable project description in few words
      I have to add it to my resume as a mini project

  • @user-dh8dd3pe1i
    @user-dh8dd3pe1i 5 років тому

    Cool sir

  • @mikapilke910
    @mikapilke910 5 років тому +1

    Great job with the tutorial! I love it how you left some loose end hanging. While creating a table with columns that has both numbers and strings it felt a bit frustrating not to get the solution for sorting those strings, especially after trying 30 different approaches and breaking the whole table on the way. Many times. But after a small break and a bit studying all of the sudden things just fell into their place and it started to work like a charm. Not sure what happened or why it exactly even works but at least I'm a one tiny little step closer to my goals. :)
    Ohh, the frustration you get while trying to get the simpliest s**t to work. Or even respond in some way. Or at least not to break everything. But still there's something weirdly fashinating in this whole thing.

  • @Toru-desu
    @Toru-desu 3 роки тому

    How do I sort String?

  • @bikramchettri9405
    @bikramchettri9405 5 років тому +1

    Can you teach how to do multi step form?

  • @AnujJoshi7
    @AnujJoshi7 3 роки тому

    adding another columns gives XSS error. any solution?

  • @aviralpruthi4240
    @aviralpruthi4240 2 роки тому

    Anyone please tell the suitable project description in few words
    I have to add it to my resume as a mini project

  • @disrespectfulgames7626
    @disrespectfulgames7626 4 роки тому +2

    Is anyone else having trouble with string interpolation on visual code.

  • @sweetteamcformerlymrterras9075
    @sweetteamcformerlymrterras9075 5 років тому +1

    Hey Dylan, I think an error is that you put it at the end of the head right after style, it is best to put it at the end of the body not head. It's what my teacher suggested to all of us.

  • @hugomeyer9027
    @hugomeyer9027 4 роки тому

    What is the IDE used in this video called?

  • @CHLOROPHILOU
    @CHLOROPHILOU Рік тому

    columnName is not defined. so the function sortColumn doesn't work.

  • @erickbecker7604
    @erickbecker7604 2 роки тому

    uf the names under my thead name and age is not listet why ? i belive i type the same code in my editor :/

  • @brivvy
    @brivvy 5 років тому +1

    #TeamThugNasty

  • @kurmangee58
    @kurmangee58 5 років тому +1

    Line 38:
    When i run the program, this is the content of the cells:
    "${person.name}" and "${person.age}".
    The program doesnt get the actual data from the array.
    In addition, when I open my code in the editor, i don't get any suggestions after the dot when i type in "${person.}.
    Can someone help me?

    • @scotthope
      @scotthope 5 років тому +2

      The reason your template literals, "${person.name}" and "${person.age}", are not evaluating, is because you have surrounded them with double quotes. You must surround them with the backtick character instead ( ` ) (also known as a grave accent) otherwise they won't work. On my keyboard it is to the left of the [ 1 ] key.

    • @irustv7674
      @irustv7674 5 років тому

      Or you can use this variant: dataHtml += '' + person.name + '' + person.age + '';

  • @cityoflaveen
    @cityoflaveen 5 років тому +1

    Hello Dylan, I have followed your tutorial step by step, for some reason I can't display anything on my browser, other than table hander . Anyway you can help me? I hope you get this.

  • @yashpadia940
    @yashpadia940 5 років тому

    Can i get the code?

  • @xjlonelystar
    @xjlonelystar 4 роки тому

    nice shirt

  • @emerillan3246
    @emerillan3246 4 роки тому

    Thanks! I not used your code, but `${val}` was useful. :D

  • @gtipsolutions
    @gtipsolutions 2 роки тому

    adio is really low