PRT1. Webdev: Coding a commenting system with vanilla JavaScript. HDComments

everyone this is Dylan of harmonic design and we're gonna be live coding a commenting system a system that we can kind of integrate into any kind of site or you know CMS I'll probably end up making a second part to this video where I'll convert this plug-in into a wordpress plugin so um since pretty much every plugin I have is prefixed with HD for home Monica's on I guess we'll call this one HD comments let us get right into it so I haven't really thought this out or planned that out as far as design or layout or even really functionality so we'll be kind of figuring out as we go and figuring out the best way to code certain features what features we need what fields we need how we want to arrange them we'll be figuring out out as we go but we're not going to be using view we're not going to be using react we're not going to be using any kind of CSS preprocessor we're gonna we're not gonna be using babel or anything like that we're kind of going really native and bare-bones and the reason we're gonna be using vanilla JavaScript especially because it's by far the most performant it outperforms view and outperforms reacted significantly outperforms jQuery it's the fastest most optimized you know kind of a way to do it and it's also really compatible and lightweight basically when you load a site that just uses vanilla JavaScript they don't need to really download any extra libraries it's just the browser already has it loaded and initiated so if you're using a site that isn't already using jQuery like for instance jQuery comes prepackaged with pretty much every WordPress site I don't even think it's really impossible to have WordPress without jQuery these days somebody plugged into all that requirement but we're not gonna be using it simply because you know we want this to be able to work not just a wordpress but any other kind of site as well so the first thing we need is I guess we'll need a index.html we'll need a stylesheet and we'll need our primary script file so basically in a bun - you can have things called templates so I automatically created these and they're already prefilled with certain information but we'll be changing and editing that so let's open this up in our visual studio code so here we are we we have it open so we have index this the JavaScript and the CSS file so it's open up the index file so once again this is based off of my you know default template I use for HTML files just to help me get started and cleaning things up but we don't need a lot of this we're gonna be keeping the main HTML document kind of like the body and the head and all that simply so that we can actually display and view what the commenting system looks like somewhat on a real life site but really you know we won't be we won't have that we don't need that we want to keep this kind of bare-bones as well we'll keep this is pretty much what we'll have so we will be loading our script file and we'll want to basically wrap everything inside a div so we'll call it div ID equals HD comments so basically everything inside of here is gonna be the actual commenting system the rest is just to help us develop in style I'm in fact if you want to make it even easier we can actually put the stylesheet included down here as well so basically when we actually kind of deploy this on a site this is what we're deploying here the rest will actually be already part of of your site um next let's go over to the JavaScript file so once again my default template we kind of got a console log wrapped inside of a jQuery ready function but we don't need that we're not gonna be using jQuery we're using just good old vanilla so let's get rid of that and make this called um I don't know HD comments and it's that way we can just easily see you know when we load up the HTML we can see that yes the scripts actually connected and we can start doing like timer function stuff like that if we end up wanting to fine-tune performance that much it's just a format that a bit nicer now we got the style sheets once again this is the kind of like default style sheet but as you can see we're doing stuff on the HTML document and you know we're selecting every attribute here which is really not performing you know we got stuff in the body you know we got actually we can delete all this we're not gonna be using any of that let's just keep this fairly rare bones I'm actually gonna come we can we can delete this but we're actually gonna come back to this all selector and a moment but I'm let's actually let's let's load up this index file so here we have the the index file here so as you can see it's just a blank document because you know we haven't done anything yet so the first thing we want to do is we want to kind of style this a little bit better so remember everything's gonna be inside this div HD comments but since we just to help us develop install it's actually add a wrapper div so let's put everything inside of a wrapper div that way we can do this let's do a margin 10% top bottom and auto left writes no way this kind of helps position things a bit better we'll go on with 100% and a max width of 800 pixels now this would normally be this kind of wrapper function be actually controlled by your WordPress theme or your whatever your site you're using but we're just kind of putting this in ourselves just to help us develop and test so now we're gonna want to style the HD commerce main div so this is now where we're actually getting to the HD commerce coding and we're gonna want to let's just give it a small border let's go with an e border and let's give it some padding I like a leg whitespace whitespace is great for designs let's give it a 40 pixel padding so now if we go back to the HTML document we'll actually get to see something or not let's load up so there's the rapper why aren't we seeing so that I spell HD comments wrong oh I did I put HD Commerce that's stupid okay comments let's try that again there we go okay helps if I actually write down the name of the corrective so as you can see so we got the wrapper div here that is kind of centers it makes it a maximum 800 pixels wide and then we got the actual comments div itself which is display:block naturally and we gave it a small little border so basically everything inside this box is where we're going to kind of keep or we're gonna house the HD comments code so to get back into this so the reason I originally had this was obviously install the HTML as box-sizing border box I forgot what was called for a moment there right so I called it box-sizing border box and then basically I make everything else inherit that and the reason for that is because it's a bit more performant we remember we don't want to override the styles of any of like the main theme or the main site we only want to override the styles that belong to HD comments so I'm just going to update this so there we go so now only siblings of HD comments will actually get the property of border box and that's going to come in just really useful when we start putting in inputs and stuff like that so what's next here so what we need what do we need I guess so let's put in a title so let's make it in an h3 which i think is just the kind of natural progression I mean generally speaking the page will have an h1 maybe several h2s maybe even a couple H threes but I feel like you know this isn't like a super high valued title is you know an HD just feels appropriate to me so we'll call it um leave a reply right and just to show you so now we have the title lever apply so basically we don't want to style the comments too much because we want it to kind of inherit those styles from your site as much as possible so if your site has a block background white text then we want ours to also mimic that so I'm not going to be doing things they can manually applying font families or Eve font sizes or colors or anything like that because we want your site to inherit as much as possible so you also remember that as you build this out it's actually not gonna look as good as it could look here on the dev site because we're not using those custom sizes fonts or padding's but if you were to kind of input this like copy and paste it on another site that has nice styling this will inherit those nice tiles as well so we got lever apply so I guess know the best way to think about it is every comments section really has sir every cut every comment needs to kind of sections it needs some it needs a section for someone to actually write a comment to reply to a comment and then it needs a section to actually display the comments so let's actually create divs for each of those sections so we'll call the first div HDC so what we're gonna prefix everything with HDC that way in case this site for instance already has a div called comments we're not accidentally selecting the active by putting a prefix before kind of all of our classes and ID's we're ensuring that we're only selecting what we actually want to select so we'll call this HDC create comments so everything inside of here will basically be the comment form and then we'll have another div here and we'll call it's ID equals H DS by the way I noticed I didn't actually put an ID equals in here that's awkward there so Google will call this on HDC comments this is where the actual comments themselves will display so now we need to think about what fields we actually need when creating a comment so we need the actual comment itself so let's create a label and what should the ID will advise we'll do a HDC we'll go HDC comment input sure that that makes sense you want to like basically you want to label things very specific so like you can look at the HTC comment input and you kind of know what it's going to be and we'll make it a text area on what else do we need we need a email right we'll call it email input and this will be a standard input actually it'll be a email input right and then we need a nickname or I guess we'll just call it your name and it'll just be a regular text input there we go so now we have those kind of three inputs it's gonna look really ugly though let's actually take a look so that's what it looks like super ugly but we got the label textarea your email and your name so let's actually um style this a lot nicer so let's go back to the editor here so what we want to use we want to basically give each of these a custom class name I mean even though they each have unique IDs and I can just target the ID directly we want them it's probably just easier to just have them all have a same in custom class so we'll call it on class equals HDC input you know what we're gonna want to do the same with the labels as well so it's give the labels a custom so the reason why I'm doing this I could do something like I could target for instance HD comments label and that will basically target and style every single label inside the HD common stiff and that would work very well problem is is not very performant because the way that CSS works is it goes from the right left so if I were to do something like HD comments label and then something something in here what your browser actually does is it first selects every single label on the site and then it filters out and tries to figure out which labels actually belong to HD comments so for example if you have a page with a lot of labels on that's a lot of extra calculations and filtering that your browser needs to do to figure out should I style this or not well if I just use a direct class then it doesn't need to filter instead of just selecting every label then filtering it just only selects every element to that class and then styles it doesn't need to figure out whether should I or shouldn't I style it it just styles it so it's much faster if you actually do direct classes as much as possible so what do we have we have HDC on the score label so we want this to display block we want to give it a bit of a margin on the bottom maybe I don't know eight pixels just to create a bit of spacing and padding so for instance if I go back now we'll see that now this is a full block element so it'll actually expand the full width right and it's now got that eight pixel padding or sort margin underneath it to create a bit of space between the label and the element but now we need to style the inputs because those are super ugly so without HDC inputs so what do we want here we want let's give it a full width with 100% let's give it some padding what's a good padding I'll maybe we'll go for 12 pixels and 16 pixels let's give a border what's a good border maybe see so this should now start to look a lot nicer still doesn't quite look nice but it looks a lot nicer so one thing I want to point out is basically right here is the reason why or one of the main reasons why we have border box sizing without that if I have the width at 100% here without that what we'll see happen is that see now it extends too far it goes past the padding so in order to avoid that all we need to basically do something like this I need to go count - 16 pixels to offset the 16 pixels here that way we don't extend too far so that it's something like that this this should theoretically yeah see the reloads oh actually because of course I need to double it up instead of 16 I need to actually double it up to 32 because the padding's on both sides left and right so in order to avoid issues and incompatibilities like that we can just do a hundred percent and have the box sizing in there and we know that it's never we know that it's going to be contained and it's gonna be sizing the right way so now we got this somewhat working but we this really makes sense to have the comments here and then underneath email but underneath we can probably display this in a grid and also we want to add a bit of bit more rows to this it's not quite long enough is it so it's uh do the rows first so we're gonna go edit our text area we're going to go rows equals six so now we know this is a bit longer and nicer to get more I don't know bit more space to type but what we want to do now is we want to put this in the column so let's use CSS squared this is a great chance to use CSS great so what we're gonna want to do is we're gonna want to put these elements here inside a div and we're going to stall it as a grits we're gonna go div id equals HDC comments no I just realized I uh so HTC comments what would be a good thing to call this some comments Tom talked I guess because it's really this is your contact information right it's your email in your name so it's kind of like contact information I don't know make sense to me so now we got that and now what we want to do is we want to have this in one column and this in two columns so what I could do is I could each actually target pretty much like first element second element you know and be like you know span one span or sorry you know stuff like that will expand to four and make these spend two and make these span two but it's probably easier to just put these inside another div and you'll see why soon so there we go so this is the Dave that we're gonna turn into a grid and we're gonna set it into two columns so each element will be its own column which is why we wrap these inside of Dave that way the label doesn't become its own column and the input doesn't become its own column so let's go and turn that into a grid so it's really really easy where it's gonna go display grid and now we need to set what the grid size is so its grid template columns and we're going to go one far went afar so what fr means and what does it actually mean free space but I mean think of it as like free space so for instance if I was to just do one fr that means it will expand 100% why not far when fr means 50% 50% you know one-third one-third one-third one-fourth one-fourth one-fourth or I could do something like um you know one-third two-third you know so kind of splits it evenly that way but we want it to be one fr one fr so what we're gonna also need is we're gonna need something called a grid gap and I'm gonna show you why so now we have it in a nice grid we got left side right side it works great but see how they're still touching there's no gap so I mean I could accomplish that with for instance padding but it's better to use gap in this case so we're going to go grid column gap and let's do uh so our normal padding here is forty pixels or so we should probably half that and do twenty pixels and now we've got a nice gap here but now the problem is that there's not enough room between here but luckily all of this is inside the one divs so we can actually just add margin to it let's do them margin top twenty pixels there we go that looks a little nicer you know what I'm kind of thinking that maybe we should do 40 here as well maybe we should make the grid gap 40 let's test it out see how that looks yeah you know what I don't know that just feels a bit better for the spacing now as you can see we're starting to get an actual form here now so those do we need we need a the submit button we need to submit this is there any other if you know what you know beef so I want to add in reactions so basically all my blogged is on by pixel I have I used discus and I hate discus cuz they do ads they who knows what they do with personal private information they're not gdpr compliance and worst of all this just slows down your site so much because they freaking load so much JavaScript and scripting and tracking and analytics it slows your site down but one thing that I do like about them is they implemented reactions so I've been actually using discus andhe's on my pixel for for a while now but the problem is despite writing what I obviously by ously think are really good articles very long articles you know anywhere from 8 to 15 minute read times and despite my analytics showing me that people seem to actually be reading the full things I don't really get a lot of comments my articles might only get one two maybe five comments so as a creator it's kind of hard for me to judge the value are people actually enjoying it do they like it do they dislike it do they have a problem with a certain part of it do they like my writing style I have no idea what discus did is they implement and reactions so people can don't even need to actually comment they can submit a reaction like this made me happy thumbs up or this made me laugh where this made me sad and what I notice is that articles that I would write an article that still only gets one or two comments on it but I also got like 20 reactions on it so it's good for me as a content creator that actually get to have some kind of feedback so I think having reactions in any kind of commenting system is is a good thing to have so let's we'll figure out a way to add actions so where should we so I guess you know what we'll probably do with this we'll probably have another grid so we'll do this grid I don't know maybe two-thirds one-third so this first box will have the reactions well sale expect two reactions you can select that emoji and then we'll have the submit button here let's go ahead and build something like that so here's contents and we'll call this next one I don't want to just call it reactions because it also contains the submit button so let's call it let's just call it footer I'm sure there's a better word and I can voice rename it later for now let's call it splitter and once again we're gonna have two divs inside of this this we're still even though the size of the columns may be different still just gonna be two columns so this first div is going to be four reactions that's actually give this an ID of reactions HDC comment reactions and this will be actually we don't even need this to be a div because the way grid works it styles elements so a div is an element but you know what else is an element just the button buttons an element so we actually don't need to wrap this button inside a div you can just style it directly let's give this ID actually see let's just call it HDC submit not somewhat submit and we'll give it a class we'll give it a class actually I'm trying to think whether we'll actually have any other buttons that I don't even think we actually need any other buttons in the system I can't think of why we'd I mean not not a button but we'd be styled like this one so you can actually just we can actually just use the ID to style it directly since we don't need you know we wouldn't lose any performance by doing it that way so now inside here we're gonna want to have I guess we'll call it an h4 tag because it's not quite as important as lever apply but we'll call it on reactions and then we'll have I don't know some spans we're will actually put the emoji in so let's actually you figure out what emojis he wants um smile emoji actually you know let's do it let's do a thumbs up let's do a thumbs up emoji so we'll do a thumbs up emoji we'll do um what else do we need we need a laugh right oh that was a funny article that's laughs so do you want rolling on the floor what we're gonna have us we're gonna have a sad laugh as well so the fact are those tears on these I don't want to confuse people and think that it might be sad or crying so let's do with the grinning the grinning squinty face um what else do we need we need um angry we need angry emoji so do we all that's too angry that's that's like hatred let's just do this emoji so they got like laughs angry I guess we need sad so I guess this one here yeah this is probably the best one crying face then let's do like love or like I love this or heart kits or I don't think I want to use yeah I don't want to use an actual heart what I'd rather keep it on the same like so it's like they're all the kind of smiley emojis exception to the thumbs up there we go so now we have no we have emojis so let's give these each a class so that we can style them bit easier like what's again I could do something like HDC owners who are calm and underscore reactions span I could do that to select them all but the problem is like I said it would then select every single span on the page and then kind of go backwards to figure out what span actually belongs to HDC underscore calm and underscore reactions by adding a direct class it's just much better on when the browser actually asked to target and paint so we'll call this HDC reaction and we're also gonna meet a custom data attribute um data reaction tools and this is going to be for when we target the reaction with JavaScript it's like when you click on one of these reactions we're gonna want to store what that reaction is in some kind of variable so we'll call this like we'll call this laughs we'll call this angry they'll call this sad and we'll call this love so there we go so this is gonna look really ugly this is gonna look ugly yeah so everything's just kind of because we don't have columns they don't have any formatting or positioning we don't have really anything right now so it's good style this out now so I guess the first thing we're gonna want is we're gonna want to create the grid so let's create that great so we'll go on display its grid go through template columns and we'll go so the reactions will give as much room as they can and the emoji is are the submit button we only cut out let's put a max width of 80 pixels so what that means is that it doesn't matter how big or small this gets we're gonna reserved 80 pixels here and then the rest is gonna be for the reactions so doesn't really matter how big the the buttons always gonna have 80 pixels to work with do we even want a grid gap or margin I don't know yet let's see what it looks like after before we get into that but actually what's actually show you what it looks like so now we actually got you know two columns here one thing you can see is that the buttons kind of fitting 100% of height and all that and we'll get into fixing that in a bit but right now let's get rid it see the problem is this is an h4 element which means it's a block element which means it's expanding the full width of of the of the first column so we don't want that we want it to be an inline block that way it goes to the left of the emojis so let's give this a custom style as well so we'll call it actually we will give it an ID HDC reaction title this way we can style it directly so we'll see now that it's actually lined up a bit better so one thing we want to do is because this entire row is gonna be kind of it's not like it's not like this row where it's like we got a label and a text box in the row like each of these columns is the same height see that see how each columns the same height for us each columns the same height here so that's the way grid works but you'll notice that it's kind of weirdly positioned and how like the emojis aren't really centered right and the Smit buns going like the full height so what we're gonna do is we're going to we're going to change the alignment so we're gonna go grid or sock shadow only think we need so it's just a line items we're gonna go Center and that should fix some of those alignment issues yeah so now submit is like not expanding the full height and it's just like it's native natural and it's centered so the next thing I guess we might want to style HD reaction right so let's get so let's style those emojis so what we won't want to give it some padding we don't need to give it a lot of its just give it a 10 pixel padding it's also okay you're gonna so let's give it a border one pixel will solve it but we're gonna make it a transparent border and then what we're gonna do is going to go HDC reaction hover we're going to go border one pixel solid and we'll go out on a C and I'll I'll go over why I gave it a transparent border in a sec so now now we got some padding so there's a bit nicer spacing when your mouse over we get a bores that we know we can easily see which one we're male stoever so this is the reason that I put in the transparent border is because if I don't do that when we mouse over we're basically creating an extra border so now what I'm else over see how everything kind of moves over to pixels to the right of the selected one the reason for that is because when I mouse over I'm adding an extra pixel on the left and an extra pixel on the right that the previously exist there so by having the border transparent it's now kind of reserving the space for the border it's just not rendering the color for it and we also want to give cursor:pointer that way users know that these emoticons are selectable they're clickable so now the next and what so we don't think it is to show you the responsiveness or what I mean that see how this submit button always has it the submit buttons by far the most important interaction there so we need to make sure that we always have that extra that we have enough room for it so it's actually um style that's MIT but now because the default is pretty ugly and unassuming let's do so I mean this is kind of where things get a little complicated so as we want to style the button but we also want as much of the native styling to be inherited by your theme or your site as possible the problem is I have no idea of your theme already has button styled or their theme ease is a specific or special class to style buttons I have no idea so um we're just gonna style it ourselves for this there are ways that you can kind of do the best kind of mismatch as you can but for us we're just gonna we're just gonna style the button ourselves so we'll do on the background we'll give it the same padding as our inputs which was what did it all so we went with 12 and 16 12 pixels and 16 pixels and we want to set the color to sort of white and now we should have a button that doesn't completely look like ass oh and we need to get rid of the border as well sorry so let's give it a border:none so you see how it's got that kind of puzzlement and now it's just kind of like a flat so there we go this is pretty much the front end of the actual a book of the lever reply form this is the kind of standard CSS H kind of layout I think it looks pretty good I mean I guess we could have maybe put reactions maybe in its own column up top or something like that like above to leave the comments the way kind of discus does it but actually you like it here on this bottom bar as well I think it looks you know I think it's a really good smart idea for the formatting so now now we get to do a bit of the the fun part we got to basically now do the JavaScript so what were you so what do we actually need to do a job so I guess we need to validate this so we need to make sure that when you submit we need to make sure that you actually have a comment written that you've actually written and emailed it to follow date the email to make sure that you didn't just go you know when you make sure that it's actually formatted somewhat like an email would be formatted and we want to make sure that you know you didn't just do spaces and allow that to submit we want to make sure that you know you actually real content so we want to make sure that for instance um you know forgive the commenter you know maybe the comment should be a minimum ten characters maybe your name should be a minimum five characters or something like that we don't evaluation like that we want to make sure that when you select an action it actually visually shows the user that an action has been that a that a reaction has been selected and we want to somehow save that as a variables that we can send that in the form when we submit and we want to basically disable the form you know we don't even want this to be able to submit until these three fields i've been filled out reactions will make optional optional sorry so we'll kind of do it in that way i think it could work pretty good so we need to kind of figure out what we want to do first i guess the first thing you want to do is you want to kind of outline our elements we want to get our elements set up so that we can easily reference them in vanilla JavaScript so let's do that first so now we're gonna head over to our script file so the first thing we want to do is we want to well the elements are never gonna change an element an element like the submit button is always going to be the submit fund we're not changing we're going to change attributes and stats of it but we're never gonna change the reference to it so we can actually store these in a something I like to do I mean I not every programmer like to do this way I'm sure some people think it's great idea other people might think is a terrible idea but this is what I like to kind of put whenever I like to kind of put all my elements when I reference them inside an object so we'll call it um HD c PL that'll be the name of our object so what do we need first we need the submit button so we need the submit button we need the comment button we need the email button so the email text like input textarea the name text area and we need the reactions and we need to reference all the reactions not just the selected one so the way that you do a selection in jet and vanilla javascript is a little annoying like in jQuery you just do something like this you just do you know boom you selected it right JavaScript it's a bit more annoying you basically got to go document dot get element by ID and then the ID so it's actually a camel case this well I was expecting it to autofill but I guess because I had the column here at dinner autofill and then the ID so what do we name and we named it on the HCC submit right let's verify that the HDC submit and then our email is actually the comment just the first radius so HDC comment input HDC email input is what we called it right named inputs and now we're going to change it up a bit so we're gonna go documents dot yet elements by class name and this is going to basically be an array it's gonna end up storing as an array and we named it oh just the HTC reaction so I don't think Lisa at this point I don't think we need anything else here so I'm actually getting an error here what did I screw up I screwed something up so I'm getting a Lindh error oh that's embarrassing equals that's super embarrassing okay there we go so now basically we can reference any of our elements so if you ever want to reference the Smith poem we can just go HDC you know dot submit and we now have access to that element so now the next thing we want is we want to what is the next thing we want I guess what we want to do is we want to visually show when we're allowed to submit so right now the submit button is filled in as in as far as the user the design the flow is concerned you can submit this right now so what we want to do is we want to make this we want to disable this so I don't know if you can really see it but when I click it it see how it's got the the focus border the blue border that is default in Chrome so what we actually going to do is we're going to disable it so we're gonna disable that button so now it doesn't look any different but you'll notice I'm clicking it but we're no longer getting that focus because it's disabled so we can no longer click this fun so what we need to do is we need to actually show that so let's go back to our CSS stylesheet and let's actually give it like an opacity of like I don't know 0.4 something really low so that it looks kind of yeah see now it looks great out it looks like it's disabled and what we'll do is once we kind of type stuff and validate the information and validate that we're able to submit we'll give it a new class called I don't know enabled and we'll remove that opacity give it a 100% opacity that way the user can visually see oh I can see I'm allowed to submit now so we'll get so we'll create a class so we'll call it um HDC submits enabled and we'll give it an opacity of 1 so that's the only change once the button is enabled we add that class and it'll it'll now have that opacity so let's go back to the script so what we need to do is we need to we need we need like an on key up event that way we can kind of validate every time the user presses a button we can then validate the fields and see whether we should enable or disable the the submit button so what we'll do is we'll so we'll create a we'll create a new function we'll call function HDC can submits sure why not so this is the function HTC can't submit and every time this function runs we'll check the required fields so now what we need to do is we need to figure out when to run this function and to do that we're going to basically need to do something called event listeners let's create a new function called HDC set the event listeners you know what just for like you like here's the thing can submit is basically like a boolean like it's my own little personal coding sentence because this function is basically gonna it basically accessible and can we submit yes or no true or false I always like to do boolean says kind of like can submit can something is something you know you kind of write it as that kind of thing but it's for the sake of of keeping the kind of same naming conventions I will still mean it can submit but I'll just do it as an underscore just to make things a bit easier to follow so here's a function called HD C set event listeners and here's where we'll set listeners so basically the site will check but will be sea Krait and actions like anytime a certain actions performed will run a function and the action we want is we want to add an event listener for KeyUp so what we'll do is we'll do we cannot choose so now we can start targeting those the this constant here the objects constant so you know HDC underscore yell dot comment dot odd event listener and that's the event listener so what we so what we do so the way the event listener works it's kind of like the first parameter is action and the second parameter is the function that you want to run when that action occurs so our action is going to be key up so every time the key you're typing and the key goes up we're going to run the function and the function we're running is HDC can submit so we're going to want to do that for the comments the email and the name so what this means is now every single time you type something in here here or here this function is gonna fire off but first we need to actually invoke this function so let's uh let's actually get that function running as soon as the doc as soon as the following so now that we have our event listeners we can actually start doing stuff inside of here so what we want to do is we want to first we want to get the value of each of these so we'll call um let's comment equal HDC yell dot comments dot and value dot no notnot volley to stop Valley dot trim and there's a the reason we're using trim is because BC what we're doing right now is we're first just gonna check does this input even have content is there even any content here but we want to basically make sure that the content isn't just an empty or blank space we want to make sure it's content of substance so the first thing we're doing is we're checking you know we're restoring the values inside a very variables so we're gonna want to do that for comments and we're gonna want to do it for the email and name great no that's not supposed to be great so now we have variables storing the data that are trimmed so now what we need to do is we need to check ok do all three of these have data right do all three of these have data so we're gonna go if comment does not equal blank and email does not equal empty blank and name does not equal blank then continue and you know what there's actually a better way to do this let's actually um it was actually a yeah there's actually a much better way to do this so instead of checking for blank because we're already because we've already trimmed we can actually go um dot length got length is greater than um I don't let's go for so this now means is we're now checking to make sure that the comment is greater than for the email is greater than four and the name is greater than four so we not only were not checking to make sure that that has content that the content isn't blank because we're trimming it we're making sure that the content actually has a value that's somewhat reasonable so if this happens then we can do something and if this doesn't happen then we can do something else so what we need to do is we need to determine what that something is so if if this succeeds that essentially means there's still some we're validating we need to do so for instance we'll need to validate the email but basically what this means is that you know that's the Fernau let's just assume that if these parameters are true then we'll want to basically enable the submit button so what we're gonna want to do is we're going to we're gonna want to use a class list we're gonna want to add a class list the submit button to enable it on the class what do we call it we call 2hdc submit and Mabel so we're gonna want to add that class so we're gonna go on HDC e l dot submits why do I always write sum of mutts dot submit dot classless dodd boom so these things happen we're gonna want to we're gonna want to add that class if it doesn't happen then we're going to want to remove that class right because you could start typing something at one box have everything fill up then you can maybe go and delete another box before you submit so we need to also do the reverse to make sure that if it doesn't follow true we need to undo the enable we also remember Roxanne we actually um started the actual submit button itself disabled it's not actually clickable so we also want to remove that parameter to of disabling it so the way we do that is actually not really remember how we do it how do we do it I think it's just something actually don't remember how to do that like you want if you would think it would be like a get out of you but it's not dot submits I think it might be something like disabled equals false I think it might be something like that inside a console hog there so let's actually test this out so right now we're disabled let's check out the console log Kent of null on 25 so where did I screw up here 25 so it's saying that it can't find its saying it can't find HD CL comment so do I have the wrong input now that's the right input so why isn't this working here what do I I screwed something up what is it let's just test to see whether it's all of them or just um yeah so it's doing it to all of them that's interesting let's do a quick test here I know I'm obviously missing something stupid so it's actually output the constant and see whether there's any nodes in there okay so all of the nodes are null except for reactions so the reaction zone so they so looks like the problem is all wait so we must be I must have screwed up this document dot get element by ID right oh I'm an idiot okay I see the problem this is key guys this is a really stupid so I'm not supposed to have the hash tag here the dollar sign let's see that was I was in jQuery mode and I yeah and I still like so sorry yeah because it already targeting the ID you're not supposed to put the hash tag in so I'm sorry well that was stupid that was on me so now it should work except it's not sporadic to is not an object why am I making Oh another really stupid problem sorry guys all of a sudden I record myself when I make the most amateur mistakes possible yes that's not supposed to be in quotes you just call the function that's oh my god that's embarrassing okay we yeah we got this really simple thing working now so basically this shouldn't work if I do a a it won't work if I do that it won't work if I do this it won't work and the reason it's not working is because this isn't five characters remember we check to make sure it's over four characters so no no and it's enabled so it says good to go which means we made it this far but you'll notice something still didn't work right so I have no idea whether okay so the enabled work so the so it enabled that worked would you notice that it didn't change the opacity so I see here so it did add the class and it tried to set opacity as one but this but the default overrode it so why did the default overrode it did I not have it high enough okay I see well you know what let's just stop for the sake of time let's just give this an important which is something you really should do I should probably rearrange these so that's a priority changes but you know that's just simple there we go so as you can see it actually enabled and if I do it disables again but we didn't actually disable the submit button so we need to disable a submit button on that as well which should be as simple as true should be as simple as that right and that's clickable and okay it's disabled in perfect so that's now working on one thing you might have noticed is that despite having fueled inputs here I haven't actually wrapped them inside a form and the reason for that is because we're kind of cheating in order to one of the things that were doing to help avoid spam and BOTS from targeting this form is by not actually having a forum a lot of automated spam bots they first check for forms that they can submit to the fact that these inputs aren't actually in a form reduces the chance of them even attempting to submit it and we're gonna be basically using a jock this submitted instead of submitting the form directly anyways so there isn't really the advantages of having of actually using a form I personally feel just dumped outweigh the disadvantages at this point which is why even though the button may be enabled when I click Submit it's not actually trying to submit a form because a form doesn't exist so one thing we want to do is we also want to validate this email because right now this shouldn't validate it's not an email as it should be forced to look like that right so what we're gonna do is we're gonna once again do a little tiny cheat and we're going to go back to one of my other plugins so for instance HD forms is a wordpress plugin I have and we're gonna steal some JavaScript already wrote to validate to validate emails so I don't remember what I called the function so I called it hdf validate email address so where's okay so here's the function so we're gonna steal this function from HD forums and you're gonna see why so this is what the function looks like as you can see this isn't something I could have just written offhand here on a live video but basically this uses a regular expression to parse the email and return a boolean so this accepts an e so this accepts an email address parses it validates it with the Reg X uses a test and returns a boolean either true or false if it's true it validates it's about an email every returns false it's not a valid email address so one thing we want to do is once again up here in our Ken Schmitt once we verify that yes there is data we also want to validate the email address so we're gonna wrap this inside of there I'm going to I will do another else should probably put this inside its own function just to be a bit more you know up to abstract a bit more about for the sake of this video we're just gonna do two else's that repeat the same color so now we should have a working email address so this will not validate good see how it's not validating the spider-man content now this also shouldn't validate because it recognizes this as not a real email address because I got these special characters but as soon as I do this boom validated if I were to get rid of the odds symbol unlocks again so we know election you have some decent front-end JavaScript form validation here and as you can see it's done in vanilla JavaScript and ice this isn't a lot of code this is pretty small and bare-boned code vanilla JavaScript pretty simple if you don't make stupid mistakes like putting a hash tag where you're not supposed to have one because you know you haven't really had your coffee I mean it's been sitting here getting cold for the entire video and I've been drinking it because I've been talking so I mean it's pretty easy we don't need reacts we don't need to manage all those states we don't need jQuery to do Dom manipulation and get field values we can do it very easily with just classic JavaScript and it's much it's a much smaller file size since we're not importing all these edition libraries as well so probably the next thing we need now is to be able to select these reactions so remember this here and the objects because we're not doing IDs basically this will return molar than one element so it'll return an array if you do get elements by class name and they're only happens to be one element with that class name it'll still return an array it's just it'll have an array of only one value so what we're gonna do is we're gonna also want to set event listeners but we're gonna want to set an event event listener for every single reaction in the array so we're gonna do a for loop we're going to go for let I equals zero while I is less than HDC l dot reactions dot sorry month i plus plus so basically however many reactions we are it's going to take that total and it's going to loop that many times so now we can do another event listener so we're gonna go reaction I which is how far into the loop we are and it started key up we're doing click what you're doing on click so this is now going to create a new event listener for every single reaction so this will work independently I could add another twenty emojis and we wouldn't need to modify our JavaScript at all it'll still work what we do need though is we need to we don't want to validate the can submit what we're doing we want a new function so HDC select emoji you know what let's add another variable here so it's two let's actually do two more barrels let's can submit equal false lets reaction equal null and well I'll get into why I decided to put in a can submit boolean but what we want to do is we want to basically toggle this so here we want to do can submit equals true true and then both here in both the falses you want to disable the camp this way when we actually click the submit button you want to first check is this true or false if it's true continue it's false just don't do anything and that is for security because right now this is disabled but I could always modify this I could always just modify the Dom boom now I know it's clickable again right so the fact that we're modifying that actually check into the JavaScript directly is just an extra layer validation and extra little layer of security so now let's create let's actually create this function so basically the element we click is going to be the element that we're gonna want to add a custom class to so just like how he had this custom class we also want a custom class for the reaction so let's do HD reactions selected it will give it a border one pixel solid let's make it darker so instead of C let's do you want ro9 give it a slightly darker gray so we'll add this class to whatever element we select so I guess the first thing you want to do is we want to get the value of of the element so we're going to want to store yes so we're gonna want to store that value in the variable reaction so we currently set reaction to null so by default reactions gonna be no but if you select the reaction by the way I should probably actually consistently call these reactions instead of emojis so if you actually select a reaction that we want to store the tholly of that reaction so what we're gonna do is we're going to want to go this which will automatically it was actually only type in there so we've reaction equals this dot yet attributes and I believe I called it data reaction so the realest no reaction will contain the value of the selected reaction so now what we want to do is we want to add the class we want to go this dot started this dot plus list add we want to add the name of that of the new class was selected so there we go so what we're doing is we're storing the value of the reaction in a variable and we're adding the class HT reactor second now the problem is what happens if you changed mine I select copy OHA mine I'm gonna click sod the problem is we're not actually removing that class list so did you show you how that would look so boom boom why isn't this working cannot read property zero on line 45 what did I screw up this time guys oh I see it's supposed to be called reactions that I only had it as reaction so that's another that's like what's stupid mistake number five there we go so as you can see it's keeping the class I mean it'll be updating the value correctly but it's not removing the class of the previously selected reaction so we need to before we add ours we need to actually remove whichever one is already existing so let's go on let Trev which will understand for previous that previously selected action Google Documents dot get elements by class name and we're going to search for an element with that costing the problem is is what if this is the first time we've selected if this is the first time we select him and this is gonna basically return null it's gonna there isn't gonna be one so now what we need to do is we have to go if Fred so only if prep exists are we gonna go probe class list dot and move HDC reaction if I didn't have this improv then basically if this was the first one we selected it would try to remove something from some that doesn't exist and it would give us an error so first we need to so that's why we have a wrap in it and then if statement to test it so now that this should work remove undefined wait now what um mine 39 oh I already mentioned to you the reason why I told you that I'm basically the get elements by class names is always an array so I need to set it as target the first element in the array and they'll only be one or least they should only be one there we go ah ha ha no it's working so that's stupid mistake number six I've made okay so we're now storing that state so now the next thing to do is actually figure out what to do once we submit

Channel: Harmonic Design

Views: 2,317

Keywords: webdev, html, javascript, css, css grid, cssgrid, vanilla javascript, live coding, serverless, harmonic design, wordpress, comment, commenting, developer, development, vscode, coder, web development, how to, web dev, javascript comment system, code javascript comment system, web dev how to code comment system

Id: Kv56Eww9lQI

Length: 68min 39sec (4119 seconds)

Published: Sat May 11 2019