Vanilla JavaScript Search App | Wikipedia API

[Music] hi my name is dave today we're going to build a search app that is a clone of a very popular search engine you've probably used before we're going to use html5 sas compiled to css3 and vanilla javascript we're going to start with a mobile first design that is responsive and we're going to add accessibility features throughout and then we're going to use fetch along with async a weight to request data from the wikipedia api to feed our search results a quick thank you to brad traversy for this collaboration i appreciate the opportunity and it's an honor to contribute to such an outstanding repository of information like traversing media a few quick notes about me i'm a father and support autism awareness i'm also an instructor and developer and if you like this tutorial please check out my channel and you can connect with me on twitter linkedin and reddit let's get started creating our search app today you can see i have a folder in vs code and it is empty it is named search underscore app and we're going to create our first file and that will be the index dot html file and in this file i'll start by typing an exclamation mark and there you can see it says emit abbreviation i'll choose that and it gives me the skeleton of a outline of a page really very very minimal but it has the basics i'm going to go ahead and press ctrl b to hide the file tree so we get just a little more room and you can see i've got document just a generic title i'm going to type search me because that will be the name of our search app i can save that now today we're going to use live server it's an extension that will launch the app and you can see my example app over here that i've already created that we're looking at and it is using live server click on your extensions icon in vs code type in live server and it should come right up there you can see the live server extension and you want to install that it makes it very easy to launch your own dev server and we'll be using that to test our code to see how it looks it updates changes right away and we'll also use javascript imports today and you can't do that by just loading a file out of a folder you have to use a server environment to use javascript imports and you can see this go live button down here in visual studio code at the bottom where my mouse is and if i click that it will take our project live on the server so make sure you install that back to the file tree and i'll hide that once again and now just to see that our page is working i'm going to put a hello world in h1 on the page save that and we'll go ahead and launch live server and there it is so we do have our page working here's our example and so i will open this in the same dev tools view as our example and we have a basic iphone 5 a very small screen because we want to design from the smallest viewport out to larger screens so you can see it's 320 pixels wide which is pretty small it's usually one of the smallest ones available currently as i make this video okay there's our hello world and now that we know it's working as we see over here i can get rid of that and let's take a quick look at our example that has the search me logo the search bar a space for search results and we can even test out how it works once there we go get a list of dave's and we can clear that out hit enter and clear everything that's great so let's move over here and we'll start to look at how our skeleton comes together and what else we put on the page so now that we have the basics we will put in some links up in the head section eventually for style sheets and to pull in javascript but right now we'll leave that as it is and we'll start with our first semantic element which is a main element the more we use semantic elements the better because it is good for accessibility and speaking of accessibility we want to follow the header hierarchy as we go to different spots within our page and even if we're not showing the header on the page we want to create those headers so a screen reader can follow them because it's very common to navigate by header using a screen reader and i'm giving this header a class of off-screen that's because we will not see the header on the page we will actually set it to a position off-screen the screen reader will still be able to read it and for the text i'll put search me a wikipedia powered search engine okay and good we've already got our code wrapping so it wrapped down to another line and that's just so we can see it instead of getting rid of our example over here okay now we'll create a section within our main element and this section will be one of two and this will be the search entry section this is the section that will have our search bar and let's look at our example one more time this will be this top section the second area will be the results so this is our search entry and then search results in this section i'll go ahead and create another header that once again will be off screen but we'll make it more accessible and easy for a screen reader to follow and i'll say search term entry is what we'll just label this as essentially now i'll create a div underneath and i'm going to give this a class of logo and there you can see our search me logo for the logo i'm going to set an aria hidden attribute equal to true we won't really need the logo to be visible to a screen reader and that's because we've given this h2 right above to say what the section is about this will not add any new information whatsoever so it can be skipped right over and go straight to the entry without delay now for now at least i'll just put the word logo here that will get changed or you know what let me put search me here but it will just be basic basic text and we can see that when we look over here there's our search me after that div we will have a form and the form is where we'll actually be entering search terms so we need to give it an id and we'll call it search bar because it is a container for everything within the form and we'll give it a class of search bar as well usually use the id with javascript selectors and at the same time we'll use the class for css and putting style to that form okay we'll give a label element and the label element will also be set to off screen this will describe the input and every input should have a label and the four attribute needs to match the id of the input element that we're pairing it with and four will give a description and this will be enter a search term or phrase after the label we can start our text input and it'll have an id of search the type will be text and i'll set auto complete to off although this is a preference you could leave it on it will not suggest smart search terms it would just suggest things you've previously typed okay there's the end of the input and we'll start with a div now and this div is going to be let me show you an example i'll say hey here this x appears and without text it does not appear we want this to essentially be a button but we don't want it to take the place of the submit button and the button the actual button element closest to our text input is what will be triggered if we press enter in the text input and we don't want it to be the clear we want it to actually submit a search if we press enter so we're going to make this button out of a div so the other button that submits the search gets the default behavior this div will have an id equal to clear and we'll give it some class definitions it will be none because at first we'll set the display to none it will have a button class and then it will have a clear class as well we'll give it a roll of button which is important in the accessibility tree of the page now this will need a tab index of zero normally buttons are already within the tab index however this being a div we need to go ahead and give it that tab index and we'll give it an aria label of clear search terms yeah that makes sense clear search terms okay and i think that's all we need there oh within the button we'll actually end up pulling in a font awesome icon right now i'll just put an x so that will resemble what will go there now let's go ahead with our button and we start with a button element and i'll give it an id equal to search button class will be button and then also a search button class because there's a generic button class that will apply to more than one button and then we'll have some things apply specifically to this button and we'll give it an aria label this aria label will say submit button within the button this would be the text on the button for now i'll just say search and the future will put another font awesome icon in that spot and that should be the end of our section now we will move to the results section we'll give this another semantic element of section and a class of results within this section we'll have another h2 and we'll also send this h2 off screen with the off screen class we will define and then we'll put a description of search results in this h2 from there we'll start a div and have this as a class of statsbar and inside this statsbar class we'll have another div with an id of stats oh we won't end it yet we'll give it a class equal to stats as well and then i'll give it an aria live attribute and this aria live attribute will be set to assertive now within this div is where we'll see the display of the results so if i search for dachshund we see displaying 11 results that is the stats right here and the stats bar in general so we give it this aria live attribute of assertive because we want the screen reader to announce how many results were found after a search is completed and that's exactly what happens with an aria live section okay after the stats we'll actually have the search results so this will be another div we'll give it an id of search results and we'll also give it a class of search results now these search results will be dynamically created i will pull in some static information just so we can style the page like we're getting right here but right now i will skip past that and we want to go down to the footer section right below the main semantic elements and there isn't a whole lot that goes in the footer but just enough we want to go ahead and knock that out so we'll have a paragraph element and inside this this paragraph element we'll have a span element and it will have an aria hidden attribute equal to true and that is because we're hiding let's go ahead and clear this out so you can see at the very bottom here it says powered by wikipedia and there are two less than symbols at the beginning and two greater than symbols at the end and they're really just for looks we don't need the screen right reader to read less than less than or greater than greater than and so i want to give them an array a hidden attribute and we'll set that to true and then we can put the symbol for less than n twice and lt there we go and lt semicolon and now we have our two less thans and then we can give a space and say powered by another space and put in the link to wikipedia to give credit where credit is due for our search results wikipedia.org there we go and we'll give this a target attribute equal to blank so it will open links in a new tab and then the text for the link will be wikipedia and then just like we did with the less than we'll give another space and we'll have another span and we'll have an aria hidden attribute once again and set that equal to true and that could be let's stop right there that could be and gt semicolon for greater than and gt semicolon and we'll save that and that is the end of the footer now we can move back to the search results and let's go ahead once again and i'll search docsin because that is the example i've got to bring in as well here's what we have so far as far as just looking at our html but here are the results we will get and of course we'll have to style all of that but let's go ahead and pull in the html for one search result just this top dachshund right here the top dog so to speak well let's start i'll type some of it and then i'll put in the details so we'll go div and we'll have a class equal to result item this will be the container for the overall item and then the div within that will be the class equal to result title so there is the title just says dachshund in this one and this will be a link and the link will of course have an href attribute i'll leave that empty for now because we'll pull that in then it will have dachshund in this example the next div will have a class equal to result contents this is a container div for one or possibly two elements i say possibly because not every result has a thumbnail image to go along with it so you can see some of these results do not have thumbnails however the first two do and they all have text we can handle that by making this result contents container a flex box and the results can either span the entire box if there's only one or if there's two they can just space themselves out as we indicate in the style so in this example i'll go ahead and create a div for an image because this information i'll pull in has one class equals result image and that will have an image with a source attribute that we'll pull in here in a minute and it will also have an alt attribute and that will be the title just like the link that we have given it and then after the result image will also have a div with the class equal to result text i'll scroll up just a little in this result text will have a paragraph with a class equal to result description and now we'll get our description inside of that paragraph so we'll save that and now we can pull in some of this information let's quickly go to firefox now before we cover everything with a javascript i will go over the search string that will pull the resulting data from wikipedia but for now i'll just zoom in a little so you can see this better and we'll look at what we get from wikipedia here's the title dachshund which i already put in the title area and as the alt tag for the image if a thumbnail exists it will provide a thumbnail you can see some results down here don't have a thumbnail but if a thumbnail does exist it will provide a thumbnail and give us the source for that so we can copy that and then it will also give us an extract and we can tell the wikipedia api how many characters we want the extract to return and so later on we'll be looking at how wide is our viewport and determine how many characters we want returned from the wikipedia api but for now we're going to copy in this source and i will come back and copy the extract and we will paste that into our code so we have the image source that goes right here and then down here is where we will put the extract and i will copy that in right here and paste that and now we have our result item and it will have pulled in the title and has pulled in the resulting thumbnail image and the alt text for that and it is pulled in the description and now i'll pull chrome back up this is what it will look like after we style it right now our html shows this and this is the raw html but we have completed everything about the html except the logo which we will do as we style it and we will need to pull in some font awesome icons and we will be pulling in a font from google fonts as well let's go ahead and pull in those other libraries we need for our project and put them in our html file we'll go to the site cdnjs and i can reload it so it looks just like what it will when you first go there and here you can see you can search libraries so we're going to search for font awesome and right away font awesome comes up we'll click that and you can click this link that says copy link tag and it will contain everything you need to paste it right into your project so we'll come back to vs code and we'll be up here near the top let's go before the title and we can paste in this full tag that we copied and it has the link to the library from cdnjs it also has an integrity attribute and a cross origin attribute and that is just fine we'll pull in those icons in just a little bit so now we've got the font awesome library we need to go back once again to chrome and we'll go to fonts.google.com and here we're going to click on roboto now it's here for me right away if it's not search for roboto for you and scroll down until you see regular 400 that's the one we want i'll click select this style and there view selected style it may come up for you right away if not you'll have to do what i just did and we will click in here and copy these links and then below you see it says in the css we want to refer to our font family as roboto in quotes with a capital r and then a fallback of sans serif which is fine but we want to copy these links here i'll copy those with ctrl c we'll come back to vs code and right underneath where we put in our font awesome library i'll paste in these links from google i'm going to go ahead and tab this over just to make it a little more uniform and that pulls in the roboto font that we will need as well now we'll go ahead and pull in those font awesome icons come back to chrome once again remember we pulled in the library from cdnjs.com but now we need to go to font awesome dot com slash icons you don't really need that part of the url as you can see it should just reload if we go font awesome dot com slash icons and you can search for any icon we're going to search for the search icon see it's the first one that comes up once we get to the search icon page we want to click right here where it says i class and then f a s f a search and it will copy that html for us we can come back to vs code and instead of the word submit or the word search actually is what we left in here we're going to paste in this icon element and have that be in our page instead and we can come back to chrome and take a look and now we have an icon element instead of the word search that's good let's go back once again to the font awesome page back up to where we can search again and instead of search i'm going to search for the letter x and we'll scroll down a little ways and we'll see times once the times page comes up do the exact same thing find the i class f a s f a times and click that to copy the html tag we'll go back to visual studio code and instead of the x we'll paste in that font awesome icon now we can check that and we also have the x showing in our html with those resources now added to our page we are ready to start styling this raw html we have so it starts to look more like what we have here and once again i'll compare with the result of dachshund and this looks much more like what we want versus the raw html however we are on our way and when we start styling we're going to use sas that actually compiles to css i'll press ctrl b and that brings up the file tree once again and now i'm going to create a folder and this folder will be named sas and in the sas folder i'm going to create the first file and that will be called style dot scss now to work with sas we'll be using live sas compiler so go to your extensions in vs code instead of live server now search for live sas and that should come up here it is the third one down live sas compiler if you don't already have that install live sas compiler and then you'll see you'll get a watch sass button that will appear in vs code and once we start writing the sas and we have it watch our sas it will compile it as we make changes to css that we can pull into our project back here at the file tree i've got the style.scss now i'm going to go ahead type import underscore base and a semicolon i don't need to put the scss after that but partials in sas start with underscores so i'm going to create another file over here in our sas folder that is underscorebase.scss there we go and now i can save this without an error since the file exists and in base i'm going to just copy and paste some colors because i like to define the variables at the very beginning and i'll also have a font stack variable but i don't want to take up the time to type each one you can definitely pause the video and copy these you can see i'm going to pull in colors for a search bar border a stats color the search bar border by the way is around our form that is the search bar the stats color displays the 11 results for dachshunds here a clear button color and that button color is the the gray right here for the x the background color is white the font color is black and then the logo colors that you can see are styled very much after a familiar search engine the link visited color as you see here with docs and racing the link outline color we'll see that only when we tab through and it highlights the links and then the font stack as well as the normal link color i don't think i mentioned but all of these are pre-defined and once again you can pause and copy those down if you would like the next thing i'm going to define is a flex definition and this will be using inheritance in sas and we'll be able to pull this in with the extend keyword i'm just going to type in a couple of properties i almost always use when i'm using flexbox and have a set the same almost all of the time so i don't have to type those again and again so i've defined this for use for inheritance and now i'll define a mixin in sas it'll be called flex column and this flex column is going to pull in using the keyword extend that flex uh inheritance that i set up there before so extend and then percent flex and now i'll put a couple of more properties in here flex direction equal to column and a justify content equal to flex start then i need another mixin equal to flex center which will be very similar but not quite the same i'm going to put in pull in the extend once again flex we inherit those properties and then justify content and as you might guess by the name center is what we want there after that we start in on what looks like basic css just some things i always do this is the page reset padding 0 margin 0 and box sizing of border box then we'll have the html and the body element and we'll set a few things there the background color already has a variable defined for that from our variables list the color again has a variable the width will be the full viewport width 100 vw the min height will be 100 viewport height so the full page that you can view in the viewport font family this is what we learned from google fonts it is the font stack we defined that has roboto and then the font size and this sets the defaults for the page and especially with fault size i will continue to refer back to this with rem units throughout the styling of the rest of the app the main element i'm going to use an include and then i can pull in that flex column mixin that we defined and then i'll also give it a min height and i'll use calc here and this will be 100 viewport height the full viewport height minus 60 pixels now below the main we'll have the footer and this is where we'll identify those 60 pixels give the footer a width of 100 percent as it may be in side of some other container so we'll just give a full hundred percent of what it has available to it and then a height oops height of 60 pixels and there's those 60 pixels that we subtracted from the full viewport heights for the main and now we can pull in a media query i don't think i defined the media query above no i didn't so we need to define one more mixin and this mixin the mq for media query and it will take a size variable and then we'll type at media only screen and min width will always work from small screens outward to larger screens and then at content this will make it easier to write media queries as we go and you'll see that as we write this footer media query now we'll include flex center which is a mixing we previously defined now we'll add the paragraph to the footer and it will have a color or stats color that we defined earlier with a variable a font size of 0.5 rem and then we'll include a media query and here we'll put in 768 pixels which is tablet size ipad tablet font size of one rem for the paragraph and now we also have a link inside the paragraph so this is nested and this color of the link will be the stats color so that gives the i'll empty this out this displaying 11 results has the same color as we see the powered by wikipedia at the bottom now only one other style to add here and this is for image elements and we'll give image elements a block display setting so that eliminates any space it tries to add underneath let's drag this window over and see if we can get that watch sass button to show up there it needed to be just a little wider i'm going to click watch sas and it says it is watching so now we can close this output window i'll drag this back and now that it started watching the sas you can see it created this dist folder and inside the disk folder is a css folder and i've got a style.min.css and a style.min.css.map we won't use the map but the style.min.css is what we need to pull into our index.html now when you start live sas compiler it may not create and probably won't a dist folder for you and maybe not a css folder it might just put it right beside your scss and that's all in the settings so if you go to file preferences settings then you can type live sas just to see those settings start to show up and you can see it has several settings that come up and it says they can all be edited inside of this settings.json so if you click there in here you'll see where i have my settings i have format equal to compressed and that's what minifies my css and then i tell it to give it the extension name of dot min.css and that indicates it's kind of the universal indicator that the css is minified and then i tell it the save path should be in a dist folder and then a css folder and that is why i get a dist and a css folder so you can change those settings and have it save the css where you want it to be saved and you can identify whether you want it compressed or not likewise you can decide whether you want it to have the.min.css or maybe just.css those settings are up to you i'm going to close this out don't save close the settings we've had the base now we need to go ahead and create a shared classes mixin and so i'll create another file let's underscore shared classes.scss this file contains classes that i may share between other areas of the page not just for one area specifically and this is a good place to put some of these color classes so i'll start with blue and then we'll have a color and we'll say logo dash blue as we defined in our variables earlier now i'm going to copy this and paste it a few times and then we'll just change out this color so instead of just blue we also have red yellow whoops i guess i'll have to type that twice green and now there is something else i want to add and that is this exclamation mark right here before i do that i'll go ahead and save this and we'll import our mixin and shared classes we've saved that now let's see well we won't see any of the changes yet so let's go to our index html i'm going to hide the file tree again just we get some more room we need to go ahead and put in the link that links to our css i have the rel attribute equals style sheet and then the href attribute for a link tag and here you can see vs code says i have a dist folder then i have a css folder and then it shows the css files and i want the one that is not map there we go and then just a slash and greater than symbol to close out the tag now i'm pulling my css styles into the project so let's see how it looks so far over here in our not our this is our example this is the raw file that we're working on well we've got bigger font we definitely don't have things styled exactly like we want to end up i'll search for docs and again so we can compare there we go and over here we have a much larger font looking page right now so let's go ahead and make some more changes and back in the shared class we defined these colors so now we want to go ahead and apply some of them i'm going to paste this into the html in the logo area just so you can see what we're doing for each letter instead of it just saying search me where the logo is we want to apply a different color to each letter so when i paste that in i need to tab these over to make it a little more uniform you can see what we're doing we're applying blue to s red to e yellowed a when you can of course match the colors up here in the logo as well all within span elements and then at the very end i have an exclaimed class and you can see this exclamation mark is not only red which it has the red class applied to but it is rotated just a little bit so we need to create this exclaim class and that should go you can see the colors have already applied here and the exclamation mark just looks normal but this will change quite a bit but first of all we want it to tilt a little let's go to this shared classes and let's define that uh exclaim class so we need to change the display of the exclamation mark to inline block in order to transform it we'll set the font size just a little larger than the other letters so i believe they were at two rem we'll set this at two and a half now we'll transform and we will rotate 12 degrees not a huge amount just a little bit i'm going to go ahead and include a media query here so it can ramp up as the page gets larger and we'll set that to 5 rms now if we look back at this page you can see we have a larger exclamation mark and it has rotated that 12 degrees now we have just a few other classes to add to this shared classes partial an important one is the off-screen class this will take some of the things we don't really want on the page but we do want available to a screen reader and we'll take and set those off of the page so we've got an absolute position and then we send them left 10 000 pixels and now if we look a lot of what we were seeing here before is gone let me comment this out real quick and you can see the difference we had all of these headings that we will no longer have on the screen although the headings will still exist and be available to screen readers the other two classes we will keep are a nun class so this will make sure that we are not displaying this x until we do so programmatically with javascript and that's when someone starts typing into the input field and the x is now gone it's there but it's just not displaying and then a flex class so we can tell the x to display later and apply that class when we do want it to show all right we have two more sas partials to create i'll show the file tree once again by pressing ctrl b and we need to create a partial for the search entry area so we'll start that with underscore search entry dot s-c-s-s we will go to the style file and we will import this underscore search entry i should mention that sas now supports an at use keyword instead of the at import but i don't think live sas compiler supports that yet so i'm still using the at import to import these partials into our main sas file okay the search entry we're going to start out with a class that is a container class for everything else in the area and we will include the flex column mixin we defined and we'll give some padding on the top about 40 pixels just so we get a little bit of space between the top and the rest of the web app logo here you can see that spaced it down a little bit now we'll come down and define the logo class and we'll give that some letter spacing of minus 5 pixels and that will pull those letters together just a little bit the font size 2 rem and then a font weight of just a little bit bolder than normal so 600 and a margin bottom of 0.5 rem let's go ahead and give a media query here and once again 768 pixels that's where i like to start the media queries that's tablet size like ipad size font size 4 rem and then letter spacing of minus 10 pixels and we'll save that and you can see our logo now looks more like it should the search bar definition for the class search bar and remember the search bar is the overall form that contains the input and the button so we'll give that a width of 90 viewport width units there we go display flex and a border two pixels solid and then it gets a search bar border we defined and then a border radius of 500 pixels that will round that off and then a padding 0.15 rem and then 0.25 rem 0.15 rem again so that's top and bottom have the same but then the right and left do not because this last one gets 0.75 rem and then we'll go ahead and put a media query here as well we include mq 768 pixels and we'll drop that width to 80 viewport width units and a padding 1.25 rem on top and bottom and 1.5 rem on left and right once we get up to a tablet size let's go ahead and put one more media query here for once we get beyond a ipad pro size so any screen larger than 1025 pixels we'll say with 60 viewport units so we're keeping that search bar a little bit smaller as the page gets huge we don't want it to look too strange still within the search bar let's go ahead and style the input which is a text input and we'll go ahead and identify that with input type equals text we could identify this in several different ways but this is a good example how to target an input by the attribute that it has and so we'll set this to flex grow of one and that will let the text box fill out that extra space and then font size 0.75 rem text align to the left and letter spacing of 0.1 rem very small there get rid of that extra semicolon border let's get rid of the border set that to zero outline we'll set that to zero two but that means we need to identify that in some other way if we're accessing the app through keyboard if it has the focus we need to somehow indicate that this input does have the focus and you need to especially be aware of that if you remove the outline min width 150 pixels and then we'll set the include keyword for another media query and once again start at tablet size font size is going to equal 1.25 rem let's scroll up so we can see a little bit more of that on the screen we've got our media query there that's the end of the input and so now we're ready to style the buttons we'll address the button class first because this applies to all buttons we have a cursor of pointer border zero background transparent because here we will just want the font awesome icons to show and not necessarily an actual color button to show 48 pixels for min width and for min height and this is because that's about the size of a finger or thumb and we really don't ever want buttons to be smaller than 48 by 48 outline once again none and once again we'll need to address that in some other way if we're removing that outline okay now the icon element within the button class and this will be our font icons or font awesome icons there we go so font awesome five free is the font family font size 1rem and then we'll include a media query 768 pixels font size let it ramp up a little when the screen gets larger and save that there's the icon and i'm using an extension called bracket pair colorizer 2 that helps see these nested elements and i can show you that as well matter of fact if we come over here to our extensions icon i can search for bracket pair colorizer 2 and this is what you want to find if you want those lines in your code like i have that connects the curly braces back here and i'm going to hide the file tree to give us some more room this was the end of the button class but now i also need to address the hover and the focus because we removed those outlines so button hover comma and the button class and this is the focus pseudo class there we go and now within that i'll put the icon because these are inside and i'm going to set the padding on the bottom to 0.5 rem and then the border bottom width to one pixel and the border bottom style to solid there we go now to actually see the mouse over work with that i'll have to go out of dev tools for a second but now there you go when i go over that magnifying glass you can see it raises just a little bit it puts that padding in there it puts the underline and we're going to end up changing color as well okay we're back into the dev tools look and there is that for the hover now we need the search button class and we'll define hover and search button will also define focus there these are pseudo classes as well and inside of this we'll put the eye and i'll say color logo green and this is where we'll see that magnifying glass change to green so i'll come back out of dev tools again and now it changes to green when we mouse over uh or when we hover as well uh hover or focus actually so we can tab over to it and have it change to green as well okay back out to dev tools again and there was that now we need the clear button which would be the x we actually need to do the same thing for it although we're not looking at it right now i should possibly remove that none class that hides it so we can see it for just a little bit and inside here we'll say color and this will be the red color that is a red x okay the none class let me show the file tree again just so i can go into the html find that clear button here's our form here's the div with the clear id and it has the none class let's remove that just so we can see the button for a little bit and there it is it's not where we want it right now but it will be in just a little bit so once again out of devtools mouse over it turns red if we tab it is now red that's exactly what we want there i'm going to show the file tree again just so i can get back to our search entry scss and after we have set these pseudo classes on clear we need to go ahead and define the search button class we set pseudo classes for it up there just a little bit before while we were doing the pseudo classes and inside the search button class i'm just going to put a media query no other specific definitions from what we had when it gets larger we want a little padding on the left of about one rem and then the clear class has a few more definitions once again i'll scroll up i'm going to hide the file tree justify content center align items center but notice it doesn't have a display here and that is because we're defining the display property with classes either the none or the flex class so color stats color and that is the the gray color border right then solid and then clear button color and so that will put a little border to the right when it shows up and we've seen that on a very familiar search engine that does the same thing 768 pixels and inside here we'll add a padding of zero on the top and bottom and one rem on the left and the right one more pseudo class to add and that is the search bar hover and the search bar focus but dash within and this means anything that has focus within the search bar and the search bar class is our form anything that gets that focus will apply this style to the form which is the search bar class we'll give that a 0 2 pixel 5 pixel 2 pixel that is a box shadow you've got an inset offset a blur and i'm thinking maybe radius i can't remember for sure you can look that up on mdm for the details i had to play around with it a little bit to get it to look like a very familiar search engine once we save that now if i exit out of dev tools once again when we mouse over this is the hover or when we have focus within the form you can see we get that nice shadow around the edges here now our x still doesn't look quite right we will adjust that but everything else is pretty much like we want within the search bar to show how the x icon will look correctly when the display flex is provided i'll go ahead and put a display flex in here and now you can see the x is where we want it to be however when i remove that it doesn't have the display property of flex and it doesn't go to the right place however we don't need to apply that right now because once again that will be none so let's go back to our html file and apply that none class once again to the clear button here it is and we have the button class here's none and we'll apply that now we'll apply flex programmatically in the future the other thing we need to do notice our magnifying glass is still black here so our search class besides the font awesome classes also needs the blue class to match the blue we have in our logo and that looks correct just one more partial to go and we will be finished styling our app you can see now our prototype is looking much more like the working solution that we have over here of course you can see the results don't quite look the same yet and that's the last partial we need is the search results so once again highlighting the sas folder we can add a search results.scss and we can go to the style file and import that import underscore search results save that file and back at the search results file we start out with the results class which is the container for everything else within and we'll include and pull in a flex column mixing and give the container some padding 0.5 rem and 1 rem and a width of 90 viewport width units and then we'll include a media query at seven whoops 768 pixels and that width will be 75 viewport unit width oh that's all we need in that query but we will do one more media query and that will be 1025 pixels and that width will be 55 viewport unit width then we're ready for the stats bar and this is where we see the results coming we don't have those on the page to look at so much now so we could go back and look at the example we have in our finished product here where it says displaying 11 results so we give that stats bar container a width of 100 of whatever container it's within and then set the stats class color stats color and the font size a little smaller here 0.75 rem and then a media query and we'll set the font size just a little larger when the screen gets larger okay after the stats and then we have the stats bar we have the search results section that would be the search results class and we'll give it a width of 100 percent now within the search results class we'll have the result item and we'll include the flex column mixin again width of 100 padding 0.25 and oops rem and 0 on the left and right and we'll include a media query here 768 pixels as well here we'll change the padding to 0.5 rem and 0. and that is the result item inside the result item though we have some other nested classes one is the result title let's scroll up so you can see a little better and i'm going to go ahead and hide that file tree again there we go width of 100 and let's look at our prototype and see how things change if they do with the 100 text to line left and then font size 1rem line height 1.5 rem and then a margin bottom 0.25 rem overflow there we go overflow and this will keep long titles from overflowing the page we'll go back to the working prototype here you can see this list of female detective and then it doesn't try to make the page large or scroll off it just ends in these ellipses this is what we're going to do with this overflow property and a couple of other properties so we have overflow hidden and then white dash space is going to equal to oh i'm sorry no wrap and then text overflow set that to ellipsis and then some padding and this padding is to give a little bit of room for the outline when you do focus on these links and you're tabbing through the page the outline needs to show and if we set the overflow to hidden it could cut off that outline so we're just putting a little bit of space around the links so the outline will show okay include media query 768 pixels and we'll say font size 1.5 rem line height 1.75 rem and margin bottom also be adjusted to 0.5 ram that is the result title uh but within the title we'll have links because the title is made up of links so any link the anchor tag this color it will get the link color and then text decoration none that will remove the default underline and then the cursor will change to a pointer when you point at the link now we have some pseudo classes for these links first one is visited and that color will be the link visited color we defined the next will be hover once again let's scroll to get a little more room here and here's the text decoration when we hover we'll bring back that underline and then finally the pseudo class of focus and this is when we'll apply the outline two picks solid link outline color there we go oh we do have an error there we go and now we're ready for the result contents you can see with bracket pair colorizer i can see from the result title from the beginning to the end and now we're ready for the result contents class display of the result contents set to flex and the width is 100 now the result contents class hold the result image we'll put a margin on the right side of the image so the text isn't right up against it and then it also has result text this result text will set flex grow to 1 so it can fill out the space font size of 14 pixels line height 20 pixels max height 60 pixels overflow will be hidden once again text overflow whoa will be ellipsis then we'll include a media query 768 pixels font size 1 rem line height 28 pixels and now this looks much more like it should let's look at our example and you can see the first result dachshund has the thumbnail of the dachshund in the description and this looks very much like our example we are now ready to begin building the javascript for our application so let's show the file tree once again and we need to create a js folder and inside this js folder i'm going to create a dot js file that will serve as the main javascript file in the project now in the index html let's hide the file tree we need to include the javascript i need to insert the javascript right underneath the link tag so i'll put the script tag and from there i need to provide a source and that will start with dot js or dot slash js and there we can see our folder and then main js and visual studio code helps out with that and then we need to give a type attribute and the type equals module and then there is the closing script tag we need that module type so we can use modules with our code and once again you need to be using a local dev server like live server to work with modules you can't just load them from a folder and have them work so we do need that local dev server running like i have here on port 5501 and that's how you see our example and all the changes we make i'll show the file tree again and we will select the main js file and we'll start writing our javascript the first thing we'll put in our javascript is a document listener so we put an add event listener right on the document and we'll listen for the ready state change event and we'll pass the event into this function and then we'll say if event dot target dot ready state equals complete that means our page has loaded everything and we're ready to initialize our app and then we call the init app function and that is the end of the listener that we put and now we'll define our init app function and now inside this init app function we're going to set the focus and we'll set the focus immediately on the text input and besides that we'll have four listeners and we'll have three listeners that we apply to the dom that have to do with the clear text button and if i come back to our working example that is when we start typing this x appears and when we're we do not have anything there it disappears so these three listeners will all be about the clear text but then we'll have one listener on the form so let's define that right now so a variable named form document.getelementbyid and that is the search bar is the form and then the form will add an event listener we're going to listen for the submit event of the form and we're going to call a function called submit the search so now we can define submit the search underneath and submit the search is what i'll call a procedural workflow function that is it's going to call other functions in the order that we need them so it kind of aggregates these other functions together and calls everything we need at once here right as the app loads so submit the search well not right as the app loads actually when the form event listener here's the submit event so we'll pass in the event or submit the search and the first thing we want to do is prevent the default behavior of the form because the form reloads the page and we don't want that and then we need to delete search results so i'll just comment that in here as one of the steps we'll delete search results to display the new search results and then we will process the search and then we'll set the focus which once again we've already seen set the focus twice so that is probably where we should head next now set the focus is going to be inside one of the files we import oh we have a quick error we'll fix that with the submit event we need a comma there and we've contained that error now we need to define the set the focus event and that will be inside search bar js so let's go ahead and create that we'll be exporting this function so we'll use the export keyword and we'll say set search focus let's say set search focus that makes more sense this will be an arrow function we're going to select document get element by id we're going to select that search input and call the focus method and that's a fairly simple function right there which is great we typically only want our functions to do one thing come back to the main file and we need to import that function now i did not mean to collapse that there we go we will import curly braces and it's set search focus from dot slash search bar dot js now we can take that set search focus function and we can paste it where we need it now that we've completed the set search focus let's go ahead and define the process search results or process the search function it is another procedural type function so we will not uh put it inside one of the modules we'll just have it right here we'll start with process the search this will be an async function because we're going to start interacting with the wikipedia api let me give us some room by hiding the file tree and now we're going to clear the stats line when we start so that will be another function that we call and then we'll need to get the search term so we'll say const search term equals get search term and now we need to define that git search term function so we'll save this and we need to go back and add a another module this module will be called data functions dot js we'll define our get search term function starting with export construct get search term there's an arrow function and we'll first start with a raw let me go ahead and hide the file tree again raw search term and that will be equal to the document dot get element by id and it's the search which is the input and then dot value dot trim there we go whoops we'll get rid of that space and so that grabs the value out of the text box and it trims the white space at each end now i'm going to define a regex and this regex is going to look for multiple spaces in a row within the search term or phrase so this will look for here's what we're looking for just a space and then two or more of those in a row and another slash and then gi there global okay so this is going to look for more than one space so the word kansas city has or the phrase kansas city has a space in there so does saint louis between of course the period after saint st period space lewis any kind of word like that or a phrase like blueberry space pie that's fine but we don't want two spaces and that's how we define that so now i'll say const search term equals raw search term dot replace all and i'll pass in this reg x looking for that single space and that's what we replace it with so if we find two spaces with the reg x we just replace it with one or if we find three this is actually two or more spaces is what the regex will identify in a row okay and then we just need to return the search term and now i need to take get search term and go back to our main and import this as well so we'll say import get search term from dot slash data functions.js now if we once again look at our process the search we need to put a quick check if the search term is essentially empty just return we don't need to go any further there's no need to call the api or get involved with anything else if the search term is empty but if it's not we will continue and we'll get a result array back and that will be where we start the async await process because we will need to await the results from this function retrieve search results and we'll pass in the search term that we're looking for so now we need to define retrieve search results and that will also go into the data functions file export const retrieve search results async that receives the search term i'm going to define a wiki search string and that will be set equal to get wiki search string which is a function and that will receive the search term so now we need to define git wiki search string there we go get wiki search string equals search term and the first thing we're going to do is call another function that will pass a value into the search string and this is const max carriers we can tell the wikipedia api the maximum amount of characters we want to receive back and we're going to determine that by looking at the viewport width so now let's define this max cares function and work our way back actually get max cares so cost git max characters is what that stands for we have to define the width of what our current screen is so we'll get that either through window dot inner width or from document dot body dot client width it's one of those two either way we'll get a value back that will be our viewport width and then we'll say let max characters and now this will all be based on a decision here so we can say if the width that we have acquired is less than 414 x characters equals 65. if the width is greater than or equal to four hundred and fourteen and the width is less than fourteen hundred max cares equals one hundred if the width is greater than or equal to 1400 then max cares is equal to 130 characters and then we just return max cares and that is just going to tell wikipedia how many characters in the extract of the topic that we want for each search item returned so we've defined max cares and now we need to go to the next line in our get wiki search string and that will define the raw search string now i'm going to paste this in but then we will look at the individual aspects of this wikipedia api let me go ahead and tell the code to wrap that is a rather long string that we are passing to the api the wikipedia api is not the easiest one i've ever seen to work with however i am going to provide links in the description below this video where you can dive in and look at each parameter i'm going to go ahead and paste in just for a quick discussion the same search string but broken down parameter by parameter on a line so as you can see we are sending to the wikipedia api and then the action we're performing is a query and now we're doing a what is called a generator search there are different options with the wikipedia api this generator will allow us to search for more than one property and in this query we're searching for page images and for extracts and so a generator will help us not have to do more than one query it will generate results for both of these properties combined essentially and then any kind of generator has to be prefixed with a g in these two areas and here is say the term for this example i've just got the word dave in here but this would be whatever the search term is and then the limit is 20. and i'm limiting the search to 20 for this tutorial you could get more results but you would have to use a continuation token and then ask for more results from the api and that would possibly be through recursion which may be beyond the scope of this tutorial right now although it could be a great tutorial to follow up this follow up on with this beyond that this example says we want 130 characters and then this is the extraction intro which must be there to get multiple extractions this says we want text and this says we want the max which is 120 characters and then we want format json and then this origin equals with the wild card that helps us be unauthenticated and not receive a course error and i once again i will give links to all of these issues and details about the wikipedia api it should be below in the description for this video as we break down this you can see i'm inserting the search term for the gsr search parameter and i'm also inserting what we calculate for max characters for the extract characters field continuing with the get wiki search string after we define the raw search string we need to define the search string and the difference there being is needs to be encoded and so we call in code uri and we pass in the raw search string and this could encode spaces in different characters that are within the url string there that might not work otherwise say for example once again the phrase kansas city that space would be represented with a percent 20 you wouldn't just have a space in your string and this encode uri will take care of that for us and then we can return the search string now we will come back to the retrieve search results function and continue with what we have there so the next is const wiki search results and that's going to equal a weight request data and we'll pass in the wiki search string that we encoded now we need to define the helper function request data and request data will be an async function and it will accept the search string we'll start request data with a try block we'll define a response and that response will await the result of a fetch request for the search string once we get a response we can define data and that data will await the response to be converted to json with the json method and then once we have data we can return the data after the try we will put a catch just in case there's an error and i'll just put console error and we'll log that error to the console once again we'll return to the retrieve search results function and now we need to define an empty array called result array and we'll say if wiki search results dot has own property so we're looking for a property in the json and this property is query oops we need both of those and then if that property exists because has own property will return a boolean either true or false we'll say the result array equals process results and then we can pass in the wiki search results dot query because it has the query property of true dot pages and then we can return the result array which note this does leave the possibility for there to be an empty array because if this is false it will skip right over this now as we look at process wiki results we will once again want to look at the api data returned from the wikipedia api so let's come down to the bottom and start defining this final data function and pass in the results now let's go back to firefox and look at that data we get so here's our query that we're looking for and we said if it has the property query then pass in the results dot query dot pages and that's great now we have each of these numbers as a single result so the numbers are the keys and so here we'll refer to this as a key within the query.pages then we can use bracket notation and say key and then we can access the title we can access the thumbnail dot source to get the image and we can access the extract and get the text as well and that's what we'll do as we programmatically loop through the results we receive okay the process wiki results function start with const result array and once again have a blank array here and now we use object dot keys and pass in the results and this will let us use four each with the object because now we've turned it into an array of the keys and so we'll pass each key and now we can retrieve all the other information we need through this for each loop so we'll define the id as the key that would be the number that we saw for each item there in the api data the const title will equal results then we'll use bracket notation and pass in the key if i can spell and then we'll say dot title to get the title property then we'll define text and that will be results once again bracket notation for the key and then dot extract that was the descriptive text then i'll say const image but an image may or may not result exist so we'll say results key dot has own property once again to check for the property thumbnail whether it exists or not and this will end up being true or false and since that will be true or false we can say do a ternary statement and say if it is true then the image will be equal to results key dot thumbnail dot source however if it is false we'll just set the image variable equal to null and now we can build the actual object that we want to pass into our result array so here i'll have id equals id variable title equals the title variable image equals the image variable and text equals the text variable save that but we're not quite finished we need to have the result array after we've finished the for each loop actually we haven't finished the for each loop yet sorry the result array will push the item into the array we are still within the loop here as you see from the blue line all the way down to here now after the loop is over then we want to return the result array from the function let's head back to our main js file and i'll once again hide the file tree and we can see we have got a result array that should have now received results from our await retrieve search results function so we can check if the result array dot length in other words if there are results we're going to build search results and then we'll call our set stats line function here so let's go ahead and tag some of these to do's that you see throughout here with a to do and if i type to do colon i have an extension that actually highlights that for me and i'll show you that extension in just a second i'll go ahead and put these to-do's in here so we don't miss any in the future as we're letting several build up now now if i type or click on my extensions and i type to do you can see to do highlight and that's the extension i'm using to highlight my to do's which comes in very handy sometimes and so now we want to build search results and that will happen inside a file named search results i'll show the file tree again and we can add a file named searchresults.js let's look at this js file it says there's an error hold that out oh and the error is because we have not done anything yet after our if statement where i've got build search results so let's go ahead and get rid of this to do and we'll type build search results and we'll pass in this result array we can save that now we need to import a build search results if it exists so we'll do that at the top as well we have our search bar this is from the search result now so this will be import curly braces build search results from dot slash search results.js now we go to search results hide the file tree and we start the function export const build search results we'll pass in the result array and we'll use this result array to call for each now for each result we will loop through create a result item and this will call a helper function called create result item and we'll pass in the result from there we will also define result contents and this will equal document.create element and it will be a div and then we'll have result contents dot class list dot add result contents and this should relate if you remember to the html we looked at when we made our static entry for these results because we are now dynamically creating this information that you see here for the dachshund so classlist add result contents and then we say if the result has an image we're going to define a result image and create oops create the result image and pass in the result once again and then we will result content dot append result image and then the result text will equal another helper function named create result text and clearly we're going to have to create these helper functions after we're finished then result contents dot append will append the result text and then result item will append the result contents and then we'll define the search results as document dot get element by id and we'll grab that search results div we defined and then we'll append the result item to the search results as one of the items and we'll create an item every time we loop through here so that's good except these other functions don't exist yet so we need to go through and create all of these helper functions so the first one would be create result item it receives the result as well when we create an item on the page there are several steps so the first would be cost result item equals document dot whoops dot create element and we'll create a div and then the result item.classlist dot add add result item class then we'll create the result title create element once again another div and then just like we did with the other we'll have the result title dot class list dot add result title now our link which is the title and that's going to be create element but it's not a div it's an anchor and the link.href is going to equal and now we need to pull in the wikipedia url and the result id so i will go ahead and paste this just like we get it out of the api but we get the result id out of the api but we need to refer to the page with this url in front of it right here and that will allow the link to be correct and then we'll have link dot text content equal to the result.title and we'll have link dot target equal to underscore blank and then the result title dot append will append the link to the title and then the item we will append the result title then we'll return the result item after create result item we need create result image that receives the result as a parameter and it will be const result image equals document dot create element and we'll create a div again and then result image.classlist dot add result image and then we'll define the image that will be document.create element and that is an image tag and then the image oops img source will equal the result dot image and then the image dot alt tag will equal result dot title result image dot append the image itself and then we'll return whoops return the result image now that we've created create result image we have one more to go and that is create result text that will also receive the result and it will be a similar function again const result text equals document dot create element and that will be a div and then result text dot class list dot add and that will be result text and then const result description will equal a document.create element and this will be a paragraph paragraph element then we'll take the result description in classlist dot add result description and then we'll take that result description once again and we'll say text content equals the result.text and we'll say result text dot append result description and then we'll return the result text now that we've completed the helper functions for our build search result function let's once again look at the file tree and we have an error let's go back and we have an extra s in the const definition we'll save that now let's look at the file tree and go back to the main and we'll hide the file tree again so we can see everything and we're in our process the search function and now we've defined build search results so we need to clear the stats line and set the stats line in order to complete this function and once again a reminder the stats line is where it says displaying 11 results here so let's define the clear the stats line function and that will take us back to the search results and we'll scroll to the bottom hide the file tree and we'll type export const clear stats line make this an arrow function and we'll say document git element by id and we'll pass in stats and we'll set the text content of stats to an empty string so we'll take clear stats line we'll go back to the main js file and this was our to do for clear the stats line and we also need to import that from the same file that has build search results we can save that scroll back down and there it is now we're ready to define the set the stats line function show the file tree again go to the search results file hide the file tree we'll start with export const set stats line equal and this will receive the number of results so we'll set the stats line variable equal to document dot get element by id and once again stats and then we can say if the number of results which this will be the length of the array so if there are results within the array and 0 would be false so anything that is not 0 here could be true so we'll just say if number of results then we can say stats line dot text content equals and we'll use a template literal string displaying number of results results period need to wrap this there we go however we could also have an else what's going on here there we go in our else could be stats line dot text content equals sorry no results and that is our set stats line function so we'll once again show the file tree go back to the main file hide the file tree choose set stats line now this needs to receive the result array dot length when it is called and then we need to go to the top and import this function as well we'll save that now that we've imported three functions from the same file you can see my code went ahead and wrapped and it's got one function on each line with a comma after it except the last function so here's the full import statement from line two to line six only one more function to define for our procedure here with the submit the search and that is the delete search results function so let's go ahead and create that we'll have delete search results and we will be importing this from the same file as the build search results and i'm going to put it first because it's actually the first function created and now let's go ahead and look at the file tree one more time our search results file hide the file tree and i'll define it at the top because of that as well it is the first one called in the procedure as far as functions from this uh module so const and it was delete the search results and give just a little space here between that and the next function we'll start with a parent element variable and there we'll say document dot get element by id and that's going to be the search results container and from there we'll define a child variable and we'll say that is the parent element dot last element child and now we can say while the child exists parent element dot remove child and then we'll pass in the child so we're removing that element that we've identified but then we'll reassign that variable to the next child and that will be the last element child since the other one has been removed and as long as one of those exists this loop will continue until it has deleted all the elements within that container that we've identified and that is the delete search results function now let's go back to the main.js file and we have our submit the search function complete and our procedural function is complete so all that leaves us with are the three listeners for the clear text let's look at how we want this to function clear that out and once i start typing the x shows up i'll go ahead and get out of devtools for a second because we also want it to have the behavior of when i click on it it clears the field also when i tab and it has focus and i press enter it clears the field and of course you have to type to get it show back up when i tab and it has focus and i press space it clears the field so those are the three different listeners we're going to work with let's go back to our javascript and look at the file tree and back to our search bar dot js file hide the file tree once again and we're going to export each of these functions individually and the first one we'll have is show clear text button and this is the one that will make the clear text button show up the x once we start typing and that's the behavior we want right now we'll exit out of this right now we do not have that behavior what we're working with so we'll define search have that be equal to document.getelementbyid and search which is the text input and then we'll define clear which is document dot get element by id and clear which is the x the div button we have with the x icon in it and now we can say if search dot value dot length so if the length of the input is greater we don't want node value there there we go ah that doesn't work either p a let's go l u dot length so we can get without getting the wrong thing typed in search.value.length is greater than zero so another way to say that is just if search.value.length if it's true because if it's 0 that would be false and there we could have clear.classlist dot remove and we remove the none class so it will display but it's not a flex display when we do that so we need clear dot class list dot add and we'll add the flex class and then we can have an else which will be just the opposite and that will be clear dot class list dot add none and clear dot flex we'll save that and now let's copy the function name and show the file tree again to go back to our main.js file hide the file tree we need to import that it's coming from the same file as the search or set search focus so there we have it and now we need to add the event listener here is one of our three event listeners so let's define search here that will be equal to document dot get element by id and that's the search and then search dot add event listener we'll be listening for the input event in the text box and then we'll call the show there we go show clear text button function let's save that now let's try it out and yes it shows up it doesn't work yet we can't clear anything by clicking on it but it does show up and if we remove the text it disappears now we're down to needing to add two listeners one will be for the click event when the button is showing and the other will be for the key down and we'll be listening for the enter or the space bar so the enter key or the space bar on the key down event so let's start by defining the clear search text function clear search text another arrow function oh and this will receive an event and send them we'll call event dot prevent default then we'll go document.getelement by id and we'll get the search once again and we'll set the value equal to an empty string then we'll define our clear document.get and it's the clear id and then we'll say clear.classlist.ad and we'll change it back to not displaying the x with the class of none and clear.classlist.remove and that was flex and then we'll call the set search focus function so we get the correct focus and while we're here let's go ahead and define the other one that is export clear push listener i guess that could be clear key listener but i called it clear push listener then we're pushing the key so if event dot key equals and that's a strict equals enter or event dot key strict equals a space then we'll have event dot prevent default once again because we really don't want to type the space or the enter we don't want to add a space to our input text i'll have document dot hit element by id and select clear and then we'll call the click method which we'll call our other listener here which is the clear search text we'll go back to our main js file and we'll add the other two listeners so we can remove this other to-do and for both of them we'll need to define the clear so we'll say cons clear equals document dot get element by id and select the clear id and then we'll have clear dot add event listener and the first one we're listening for the click pass in the event well no we won't need to pass in the event there we all ready to find the function we'll just call clear search text save that and let's get an idea here we need to of course pull clear search text in up above so there we go we'll save that and now if i click on this it does clear the text however if i press enter it didn't do anything that we need it i mean i guess i didn't have the focus on there try to attempt to search there if i get focus and i press enter it doesn't do anything if i press the space bar it doesn't do anything only if i click it so we need to go ahead and import in this other function as well let's go back to get the name of that function one more time it was clear push listener so in the main section here we'll import this last function and then hide the file tree one more time and here once again we'll add an event listener to the clear button and this event listener is listening for the key down event and then it will call the clear push listener and that's where we're listening for the enter key or the space uh key when we have focus here we go when we have focus so there's the space great so tab over get focus on the x press enter and it clears now this is working as we expect it to and we'll do a search we're not getting results so we're going to check the error and in our console it says retrieve search results is not defined at process the search therefore we forgot to import retrieve search results which would be one of our data functions and so put that in there from our data functions import and now we should be good to go let's go ahead and type the word docsin wiki search results is not defined at retrieve search results that is in the data functions i'm going to hide the file tree so we can get a better look wiki search results it looks like we have a typo or two here because we've got an e creeping into our spelling of wiki and let's check the others yes there it is again and that looks like it may be okay one more time and now we have search results let's go ahead and make this a little bit larger and refresh the page we can get rid of our static result now so let's go to our file tree get our index html hide that again and we can comment out or totally remove the result item that we have and we'll comment that out there we go and everything's good we'll type in dachshund one more time and we're getting search results excellent let's type in hey tab over can clear we can type in dave tab tab enter more results there great let's look at full screen clear that out and we can type in music and let's tab over clear that and let's type in rock music all right so if we clear out and we just press enter great if we make nonsense i think we're missing the search results let's look at that one more time yes it's not telling us how many search results we need to find out what is going on there if we go back to our code and we'll make that smaller once again we're in searchresults.js and i've definitely got an error for some tired eyes here because i define stat line but somehow this became set stats line so we need to fix that and i believe if we change both of those to stat line and save we'll probably start seeing some results let's go ahead and look at a larger version once again and type dave displaying 20 results excellent let's try dachshund which i have done before and we know it has 11. there we go excellent and if we type some gibberish we press enter there's four results for whatever that is so let's try more gibberish sorry no results that's what we wanted now i moused over that so the red was showing but tabbing through we get what we expect there too and then if i press enter again and just have a blank entry it will even clear out the display line now let's check the accessibility scores of our app i will once again go to dev tools by pressing control shift and i i'm going to pull this over to get some more room and instead of the console i want the lighthouse tab we'll select only accessibility and we'll generate a report 100 excellent that's what we wanted now let's copy this url and we'll go to firefox and i have an idea firefox will have an id or two of its own there's the app we'll just test it out seems like it's working just fine we'll go to the accessibility tab in firefox and i'm going to zoom this in quite a bit so we can see better there we go now let's check each one of these contrast no problems with contrast excellent keyboard there are a couple of things that identified on the keyboard that we'll talk about and text labels no problems with text labels so let's talk about the two things firefox has identified one is it says focusable element which is the input element here may be missing focus styling but we know it's not and that's because we're using the focus within and so when we hover over anything inside the form and when the input has this focus it gets the same type of box shadow that we're used to seeing in a major search engine and that is using the focus within rather than putting the specific focus on the box because showing a rectangle in there doesn't look so great but this works so they're just letting us know about that that is the entry field now if i type something there of course the other disappeared so let's check for that issue again here we go here's the other problem it says it says clickable elements must be focusable and should have interactive semantics well we know this actually is let me go ahead and type again so there i can have the tab index on it we have focus on that right now they're talking about the x that we created we created a button from a div also said it should have interactive semantics and that means it should work it should do something and it certainly does we can trigger it with the space bar we can trigger it with the inner key when it has focus it does all of those things but it's saying it's the element i believe their critique disappeared one more time so i'll put keys back again and say none then we say keyboard and it should find it the reason they're saying that about an element specifically here it is with this static text is because the way font awesome works and it's that icon let's come back to our html and look at i need to pull the file tree up and look at the font awesome icons and what we get here we go this is a font awesome icon with the i and so is this and this is the one in question what we get here is an element rather than typing a word if this was just the letter x i doubt if this would have a problem with that but because it's an element it is triggered through testing however we have proven that we're doing everything we're supposed to with that when we come back and look at how it actually functions because it does get the focus and it does have interaction okay let's go back to chrome and in chrome let's just look at a full screen view click the three dots to the top right go to more tools and extensions and you can install an extension for chrome called the chromevox classic extension let's turn that on chromevox spoken feedback is ready search me tab excellent so we can navigate this search me a wikipedia-powered search engine search term entry enter i clicked and it started to read the entire page when i just clicked randomly which it tends to do however uh edit text we can navigate this by tab submit button button wikipedia link footer or section enter a search term we can navigate through the chromevox controls which with windows shift alt is the chromevox key and then i can press in for next header or up and down to just navigate to everything so i'll use up and down right now search term entry heading 2 search me a wikipedia-powered search engine heading 1. there you go you're seeing that are hearing the header a hierarchy for the web app so there we're at the h1 section search term entry heading 2. nice and then if we wanted we could do the shift alt plus the letter in and then the letter h section search results take something to the next header so we're navigating by header so we'll go back section submit button edit text and try submitting some things here d a c h s u d return submit button button displaying 11 results there's our assertive announcement where it read the announcements because we have that aria live attribute set and we put it to assertive so now we can tab clear search terms enter a search term or phrase let's search for dave again button displaying 20 results excellent now let's go ahead and move through the results the tab will take us to each of the titles clear search terms submit button section dave grohl link dave brubeck link dave mustain link but dave roll if we use the chromevox key again on windows it's shift alt i believe apple it's command control but this is shift alt and i'll go down dave grohl david eric roll born january 14th 1969 is an american musician singer and songwriter he was the drummer for rock band nirvana ellipsis nice so we're reading everything now including the alt text on the image dave roll david eric roll orange link but if we tab dave roll link dave brubeck dave mustain dave matthews band axel dave mustain dave brubeck dave grohl section clear search terms enter a search term or phrase button and everything works as expected wrapping up the tutorial with some oversights and corrections first let's start in the html file at the form that has the id search bar and class search bar for accessibility reasons a landmark role we could add just put role attribute and search for the form now some would suggest adding type equals search to the input text as well however i'm not going to do that i'll show you why in google chrome when we put type equals search it adds its own clear button as part of the input when you begin to type in a way it's nice to take advantage of built-in features of an element however testing in firefox that feature is not cross browser so firefox does not have it also uh it's not in the tab order i can't tab to the x and then clear the field like we do with our current solution so what i want to do is leave the type as a text input type and then we just want to add the role of search box to the text input and that gives the correct role for accessibility and yet it will leave the behavior the way we want it so we can have the actual clear button as part of the tab order and it works cross browser as well now let's open the file tree and go to the search entry partial in our sas and i've marked a to-do area actually i highlighted it twice but i did annotate this during the video outline was set to zero actually should be set to none it didn't really change the result much but none is the proper value to have there i hope you caught the annotation earlier and then in the search results partial i also annotated this during the video but i left off the rem on the margin bottom here and those are the mistakes i caught while going back through congratulations on completing the app we've used html5 sas compiled a css3 and vanilla javascript to build a search app clone of a very popular search engine we started with a mobile-first design that is responsive and we added accessibility features throughout we also used fetch along with async a weight to request data from the wikipedia api to feed our search results this app is far from perfect and i don't think they're ever complete let me know what features you would like to add to the app in the comments below i hope this tutorial helped you out and if it did check out my channel for more content like this thanks for watching

Channel: Traversy Media

Views: 59,931

Keywords: javascript, vanilla javascript, javascript search app, sass, html5, fetch api, async/await, javascript tutorial

Id: Dk6Wopar10k

Length: 133min 10sec (7990 seconds)

Published: Mon Dec 28 2020