Build a Covid Tracker App With Vue.js & Tailwind

[Music] what's going on guys in this video we're going to create a covered tracker using vue.js and tailwind so i know that building a covert tracker it might be a little controversial or maybe a little morbid even but it's something that's very relevant so i thought it would be a cool project to do and basically on the landing page here we just have the global cases and deaths so the new cases you can see so basically this is like up to this point today the new cases and then the total overall same thing with the deaths the new in total so this is the global data however we can narrow it down by country like if i wanted to see for instance albania so that'll show us the total the new now it might say zero for the the smaller countries or countries that aren't doing that that bad however if you go to a country where you know there's a lot of cases like my own if we go down to united states you'll see it will show the new cases and the new deaths all right and if we're showing country data we can click this to clear the country and just go back to the global data this is also responsive okay like i said we are going to be using tailwind we're using vue.js3 now as far as the api we're using it's covet19api.com which is one of the best ones that i could find and this was built by kyle redling guys i hope i pronounced that right but this is a really in-depth api there are some premium options for no rate limiting and access to extra endpoints but let's take a look at the documentation real quick and you can see over here all the different endpoints all the different data you can get we're basically dealing with the summary so this is the end point we're going to use which gives us some global data and then it also gives us each individual country but you could go much more in depth you could bring in charts and maybe use something like d3 with graphs and all that create a really nice dashboard so this is more of a simple project but i think it's a nice project to really get you more into vue.js and also working with third-party apis i hope you enjoy it let's go ahead and get into it all right so we're going to get started on our project we're going to be using the view cli to get set up here so this is the cli.v.js.org website if you want to read more about it i'm sure that a lot of you have already used this before but basically you just need to install it globally so you can install it with npm or yarn and then you can just create a project with view create so i'm going to open my terminal up i already have it installed so i'm going to run view create and i'm going to call this view covid tracker and then it's going to ask us a few questions if you're on windows and you're using git bash you might have issues with the arrows so if so just use powershell or something else so as far as the version i'm going to be using version 3 although i did build this in a way where version 2 should be fine to use there might be some small changes but you should be okay but i'm going to choose manually select features and choose this the first two options keep them selected choose view version and babel and then i'm also going to hit space and choose router just because even though this is a it's just a single page with a bunch of components in case i wanted to add more routes later i'm just going to include it when we start off and then i'm going to uncheck linter and we're going to choose version 3 and yes for history mode and then i'm going to choose in dedicated config files and then no for a preset so that'll go ahead and just get things set up for us okay so now we're just going to cd into the folder that we just created and i'm going to open up visual studio code of course you can use any text editor that you want and then visual studio code has an integrated terminal that i'm going to use instead of my my general terminal and then there's some there's a couple things i want to install before we start our dev server so i want to install tailwind and there's there's a few ways to do that but with the cli you can actually add it as a plug-in and it will just set it all up for you so we can do that with view add tailwind and it's going to create some config files i'm going to choose minimal for the tailwind tail and config javascript file and it'll also create this post config sorry post css config file as well and if we look in source assets we have our tailwind css which is bringing in the base components and utilities so it should be all set to use we should be able to use tailwind classes now and then the only other thing i want to install is moment which is a date formatter so we're going to just install that as well once we do that we can do npm run serve and that's going to start our development server on port 8080. so if we go over to let's say http let's do localhost 8080. and it's going to look a little weird just because tailwind is already implemented so it has some conflicting styles but we're going to get rid of all the base styles right now so if we go to source and let's go to our app.view so this is our our main app file or our main app component and this loads the router view so basically any pages or views that we're on by default we have the home dot view page our view component which we're seeing now there's also an above but we don't need the about but whatever we're seeing is going to output here we also have this nav right here that home and about nav we don't need that so i'm going to just get rid of that and then we don't need any styling as well so we'll get rid of all that default styling okay and now this is loading the views home dot view file so in here they're bringing in hello world component from the components folder which we don't need so i'm going to get rid of this import and we can get rid of this we don't need to declare it and then up here in the div let's get rid of these two lines and for now we'll just say hello world okay so we've kind of cleared everything out as far as the about page we don't need this or the about view so we can delete that it will give us an error because the router is looking for it so right here in router index.js this is where you would define any routes we don't need the second one here which is the about so we'll just get rid of that all right so now we have kind of a clean slate now the first thing i want to do is create the header component so this hello world right here i'm just going to rename this to header dot view and we'll get rid of everything that's in this template so clear out the template tags and then let's change the name from hello world to header and we don't need any props here so we can get rid of this stuff here and we don't need any styling since we're using tailwind so we'll get rid of all that and in the template here we'll have a header tag and then let's do a div and we'll say covid-19 tracker and then just to bring this into our app let's go to app.view and since we're bringing in a component here we don't want to bring it into the home page because if we do that and then we add other pages or views and add new routes we'd have to bring it into all of them so i'm going to just bring it into the main app dot view so we do need to add script tags here and we want to import header and we can import that from and we should be able to do at slash components slash header okay and then we do have to have to declare it so let's say export default object and then components and we just want to define in here header so that we can use it up here in our template so up here let's just put in our header tag our header component and we should see that displayed now the router view so everything under the header i want to wrap that in a div and i want that div to have a class of container okay so we'll just move this up here now container tailwind is very i spelled that wrong didn't i tailwind is very low level so the classes like there's no um there's not a lot of predefined styling to classes they basically made to do one thing so adding container doesn't automatically give it you know margin auto and push it to the middle so we could add you know mx auto which is margin auto on the x axis that pushes it over and then we could add some padding but i want to show you can also add default config values so if we go to tailwind config and we go to theme we could say for the container we want to have some defaults such as the center val center we want to set that to true so if i save that it takes a minute because this this has to reload down here and then you'll see that gets pushed to the center and if we want some padding of course we could add it add another class onto onto that div but we can also add it here so i could say padding and we'll set that to 2 rem which should get pushed over okay so there we go so now we have some padding by default on the container class all right so i just wanted to show you that and we want to push that to the middle now let's style the header so we're going to go back to header and just add our classes so for classes i want to first of all let's make this smaller so we can see let's move uh the text to the center so we have a class called text center i do want to have a blue background so we'll do bg blue and then we can do a number here uh the higher the number i'm going to do 800 the higher the darker so we'll do 800 the text is is black though so we want to change that so we'll do text dash white and then let's add some padding so we'll do p dash 4 which will give it padding all around and then also let's do m b so margin bottom let's do mb 10 which will push anything under it down now the text we also want to deal with that so let's give this div a class and i'm going to do text dash 3 xl now on bigger screens so anything medium and above i want the text to be a little bigger so we can do md colon and then let's say text 5xl and what that means is when we hit a certain breakpoint the medium break point you can see that that will then get a little bigger all right i also want to make it bold let's say font dash bold let's actually close this font bold and then let's do mb3 so i just want to add a little bit of spacing under this text here because i'm just going to put the the link to the api and the author right underneath so underneath the div will have a paragraph you don't have to do this i'm just doing it to give credit to the api author so we'll say api by and let's have an a tag i want this link to be light blue so i'm going to give it a class of say text blue 300 and then https and it's going to be covid api or coven19api.com and i'm just going to put the link in here as well and let's just have this open in another tab so we'll set target to underscore blank all right so we just have a link to the api website so that should be it for our header very simple actually no one more thing i want to add an icon to it a little virus icon just to add to the look so let's go back to header and i'm just going to use the font awesome cdn for this which i have let's see where are we where are my bookmarks so i'm going to go to cdnjs.org and just search for font so font awesome i'm going to grab the link tag and i'm going to put that in my public index html put it right above the title okay then we'll close that up and then in the header i'm just going to add right in front of the text here i'm just going to put an i tag with a class of f a and then fa-viruses and then that should give us a little icon there a little logo all right so that's it for the header let's see the app view we can close that up so let's deal with let's let's work in the home now because we want to start to think about fetching our data so i'm going to close that up and the way we're going to do this is we're going to use a life cycle method called created so basically there's a life cycle with certain functions that you can hook into to do certain things and we want to get this data from the api when the page loads so we're going to go down here and say created and this will run right away so if i do a console log here and i come over and open the console you're going to see the one two three okay so this gets called right away that's where we want to make our initial request so the request though i'm going to i'm going to run here i'm sorry the function to make the request i'm going to run here but i'm going to put it in a you know in a dedicated method so we can just say methods up here which is an object make sure you put a comma after this and then let's create a function here we're going to call it fetch we'll say fetch covered data now i do want to make this asynchronous so i'm just going to say async and then we want to make our request put that into a response variable so let's say await and then fetch you can use axios if you'd like now as far as where we're getting this data from if we go to the api website which i'll have a link to in the description and we go to the documentation there's a whole bunch of endpoints to hit to get all different types of data so i mean you could make something really in depth what we're doing is pretty simple so we're using the summary endpoint and what this gives us if we say view more it gives us an object with the global stats so confirmed cases or new confirmed total confirmed new deaths total deaths new recovered total recovered so it gives us that's global for the entire world and then it also has a countries array with that with that data for each country and then at the very bottom there's also the the date and time basically the time stamp of this data so we want to get those three things um so let's go ahead and actually let's grab let's grab the end point so summary and then i'm going to grab this right here and then we'll go ahead and put that right in here so that's what we're going to make our request to and then let's get the json so we want to say const we'll say data equals await res.json and then i'm just going to return from here the data okay so that's our fetch cover data function now we're going to call this down here and created so that it runs right away so to do that and we want the response to be in a variable we'll call that data so we'll say this dot fetch covered data and that's going to be a pr promise so we want to make sure we do a sync here and we want a wait here and then let's just do a console log of data okay and we'll close this up and let's open up our console and we should see our data so we have global actually we should have countries too okay so now yeah global countries date id all right so these these values that we're getting here i want to put these into the state of our component or our view so let's go up here and let's add data so data is going to be a function make sure you have a comma at the end here and then this is going to return an object with our values so the first thing i want to have is a loading state which i'm going to set to true by default and then once we make our requests we'll set that back to we'll set that to false so that we can we don't render we don't try to render the the ui before we actually fetch our data i'm going to have a title as well which the default will be global but if we choose to to look at the data by country then title will be the name of the country but we'll get to that later let's just set it to global for now and then the data date so that's going to be an empty string to begin with but we'll fill it once we get our data from the api same with the stats that'll be the object with like the cases and all that and then countries is going to be an array i want to fill that with the countries and then we're also going to have a loading image which i'm going to put here and i'm going to require it so this is going to be in i'm going to put it in the source assets folder it's just an hourglass gif so i want to basically show this when the when we're actually fetching the data and you can get this from the the repository in the description but this is going to be require and then we want to go into assets slash and then hourglass dot gif all right and that should be good now down here oops i forgot an s so down here once we get the data we want to assign it to these some of these variables up here so we do that by using this dot and then whatever we want to assign let's say data date i'm going to assign that to the data that comes back from the api which has that date value which is this right here and it's these are all uppercase that's just how the api works so then let's also set the stats so the stats i'm going to set to the data that comes in and then global which is this right here so this is going to get put into this dot stats and then let's do the country so this dot countries i'm going to set that to the data that comes in and then countries and then finally i'm going to set this dot loading which is true by default we want to set that to false and then let's go up top here to our template and i'm going to change this div to a main and i don't need a class on this main but i want to do conditional rendering here so we're going to add a v if directive so say v if and we want to set that to not loading so if it's not loading that means we're ready to render our data so for now i'll just say show data and then let's put another main tag under this and here we want to put a v else so basically if it's if it is loading then whatever we put in here is going to show all right i'm actually going to put let's put some classes on this just to style this a little bit so for classes let's do flex we'll make this a flex column and let's align center and justify center and text center and then inside this main here we're going to have a div and i'm going to give this a class or a couple classes let's do text dash gray 500 so this is just going to say fetching data and then we'll do a 3xl for the size let's do margin top 10 and margin bottom 6. and then inside this div we'll just say fetching data and then right under it i'm going to have my image so here the um uh the source since we're binding to this we're going to put a colon in front of this because we're binding that loading image that we have in our data so loading image and then let's just add a couple classes to this so i'm going to do a width dash 24 and let's do m auto so margin auto to uh to center it all right so we might not see that yep so you saw it for a second so whenever the loading state is true it's just going to flash there and if you want you could just test and you could set this loading to true down here and it'll just show it okay so it should look like that all right so now that we're able to fetch the data let's start to create our components where we want to display it so in components i'm going to create a new file and let's call this data title.view so what this is going to have is the date so whatever the the current date and time of the data also whatever the title is which will be global by default but then we'll later on we'll have a country select and then it will show the name of the country so let's create this we're going to have a template and in our template let's have a div give this a class of let's say text center and i know there's a lot of classes we're typing out and stuff but i want this to look nice i didn't just want to show you know an ugly page so and it should also give you some some knowledge on some tailwind classes so h2 let's do class and we'll make this text we'll do 3xl and let's also make this bold so font bold and in the h2 here we're actually going to have a prop that's passed in for text okay we want our double curly braces here and then show whatever text is that's going to get passed in and then we're also going to have the um the date so let's do another div here can i use emmett here let's do a class of text and let's say text 2 xl and then we'll do a class of mt 4 so margin top 4 and then margin bottom 10 and our dates going to go in here now we're going to format the date but just for now i'll put it right in there it's going to be called data date okay and then let's go down here and let's have our script tags and we want to export default the name of this component is data title and it's going to take in some props so the props are going to be text and date data i'm sorry data date okay so those are our props we are going to use moment here and we're going to use a computed function but we'll just keep this for now and then let's go to our home and let's import that component so we're going to go right above our export and let's import data title from and we should be able to just do slash components slash data title and then we need to register it here in components so data title and then let's go up top so right here get rid of this show data and let's put our data title in i actually want to do that so data title which takes in text so we're going to bind our text prop and we're going to set that to whatever the title is which by default if we look down here is global and then we also want the date the date so that's going to be data date and set that to data date okay so there we go now this this doesn't look very good the the date and time so we're going to use moment to uh to format that so we already installed moment at the beginning of the tutorial if you didn't just go ahead and npm install moment and let's go right above this export and let's import moment from moment now what we're going to do is add a computed down here so we want to say computed because we want this to just happen automatically so we're going to have a field called timestamp and we're going to set this to a function and we want to return from here basically our formatted date so let's say moment we're going to pass in our data date prop and then we're just going to format it so dot format and then how we want to format this so we'll do month save and then do and then our year and then for the time let's do let's see after that let's close the sidebar up so after this we'll do a comma and then the hour minutes seconds a and then instead of up here instead of just putting the data date directly we're going to put the computed timestamp let's see i must have messed something up here uh reference error data date is not defined oh i'm sorry since since we're using this down here we have to use this there we go okay so there we go global april 1st 2021 118. all right so that looks good that's our data title component the next thing we're going to want is our data boxes which are going to show the the cases and depths so let's um let's create that we can close up data title let's go under components and let's create a file called data boxes dot view all right and in here we're going to have our template let's close that up and let's um before we do our template let's create our script and we want to export default and have the name here which is data boxes and now this is going to take in the stats so we need to have our props and that's going to take in a stats prop to display and then for now let's just say data boxes i just want this to show on the screen so i'm going to save that in our home let's bring that in so data boxes and we want to add that here as well and then let's see we'll show this right under the data title so data boxes and we want to pass in as a prop here so we want to v bind stats and set that to stats which are going to be the global stats to begin with all right so the component is showing right now we just have data boxes just the text so we have um quite a bit of things quite a bit of styling to do here we want two nice boxes and a grid so let's uh let's add a div actually i'll use emmett here so let's have a div with the class of grid and i'm going to do a class of actually i can't do like this can i because on medium screens i want to do grid to it oh i can do that all right so on medium screens we'll have two columns it'll be stacked on on small screens and then let's add a gap so we'll do gap four and then in here let's do basically we're gonna have two boxes um so this is the first box is gonna have let's do shadow dash md so it'll have a shadow around it let's do bg dash blue uh we'll do blue 100 so it'll be a very light shade and then let's do paragraph 10 paragraph pattern 10 and uh text center and let's make it rounded okay so that's basically the outline of our box and then here we'll have an h3 and let's give this let's do text we'll say text 3xl for this and let's make it text dash blue dash 900 so it'll be just a dark blue and then font bold and let's do margin bottom four and inside this h3 we're going to say cases all right and we can save this just to check it out and then under that h3 we're going to have another div and let's give this a class of text dash 2xl and let's also do an mb and inside here is where we're going to have the total so we'll have the the new cases and the total cases and i'm just going to have a span here with a a class of font bold and in here we'll say new colon and then under that we want the the confirmed cases or i should say the new confirmed remember that we have the data still shown down here no we don't but basically on that stats prop that's passed in we have new confirmed and total confirmed so let's put our stats and we're going to do new i think it's uppercase new confirmed let's just see if that works yep there we go new confirmed and then we also want the total so i'm going to just grab both of these and then let's change this to total and this is going to be total confirmed actually no i did that wrong we want the div to this dip to surround both of them so i'm going to just undo that and i'm going to copy the whole div and then change this and this to total there we go all right and then we want the depth so i'm gonna just copy the the box which is this shadow right here actually i can put a let's say box one so this div ends right here so i'll just grab this whole thing and paste that in so this will be box two and this is going to be deaths and let's change this so it's con this is instead of confirmed both of these so new deaths total deaths let's save that and i'm just going to make the second box a little darker so the second box i'll do a 200 like that and these should be side by side on larger screens now you'll notice that these numbers don't have commas so what we could do is create a method to actually add the commas so under here let's do methods and that's an object and then we want a function or a method called let's call it number with commas so this is going to be a function that takes in a number and i'm actually going to use regular expression here this i i just got this off stack overflow so i'm going to paste this in you guys can just copy it from the repository or you can type this madness out and then all we have to do is wrap these in that method so up here let's do number with commas and just wrap this new confirmed if i save that you'll see that the comma gets added so i'm just going to do that to all of these so this one here make sure you put on the ending parentheses as well so here and here ending parentheses okay so that'll give it all all these numbers they're commas so those are the data boxes now the way we have it is is good if you just want global data but we also want to narrow down now be able to narrow it down by country so in components let's create a new file here called country select dot view and for country select uh let's see let's do our template and let's do our script and export default name is going to be country select and then pro as far as props it's just going to take in the countries um yeah so taking the countries and just for now just say select because i just want to show it on the screen so we'll go back to home and let's bring that in just like our other components so this is going to be country select country select and then let's register it here okay and then we're gonna put this let's see so we have our data boxes i think we should put it below just so when we look at the countries it doesn't cover the boxes so say country select as far as what we want to pass in here remember we want to pass in the countries so let's v bind countries let's to the countries in our state okay so now it shows the select down here so let's go back to country select and let's start to add what we need here so we're going to have a select field name id we don't we don't need that now since this is an input field we want to bind this to data in this component so we do that with v model so we're going to say v model and we're going to call this selected so then down here we just add our data function that will return an object and we have our selected value is going to be 0 by default all right now let's see so we have that this is going to have an a change event but we're going to do that after i first just want to be able to show all the countries because remember those those are getting passed in as props so we should be able to put an option here let's see so we'll do option actually let's do the default option first it's just going to have a value i will say value 0 and it's just going to say select we'll say select country so if we save that we should see down here just to select with select country um but let's let's style this a little bit so the select tag right here we'll add some classes um there is a select oh no it's form select class that we can use let's do margin top one this is going to be block level width we want it to be full we want to have wanted to have a border let's add some padding and let's make it rounded and then let's do margin top let's do margin top 10 not not one okay so now that looks much better so now as far as getting the countries in here we're going to have our option and we need to use a v4 directive here because we need to loop through the countries and and basically output an option for each one so in here let's do v dash 4 equals and what we want to set here is say country so you could call this whatever you want since it's a country that's what i'm calling it and then in and then whatever the data the array we're using which is called countries and then for value we want to bind to that so we want to put a colon in front of it and we'll use the country let's do country.id and the way the api works it's going to be uppercase id okay remember this country is actually an object that has an id it has the the new confirmed the total confirmed and all that data but for the value of this particular op of this select list we want the id and then what we want to display is going to be the country name which is going to be country with uppercase c all right and let's see elements in iteration expect to have v bind key so you can put v bind in front of this but you don't need to this is just a eslint thing so if we save that now you can see we have a list of all of our countries now it doesn't do anything if i select a country nothing happens so what we're going to work on now is our change event so right here in the select let's put let's say at change okay so when this changes we're going to call a method called on change like that and then we're going to create that method down here so let's go under data and say methods and let's say on change so on change we're going to need to basically emit upwards emit an event upwards into our main you know home.view file because we want to change um basically we want to change the stats from being because it's global to begin with but we want to change the stats to then be that particular country stats so to emit an event we can simply do this dot and then money sign emit and then we can give this a custom name we'll call it get country now we need to send the um the country data with it okay so what basically whatever country is selected um so what we can do is go right above this and let's create a variable here called country and we'll set this to this dot countries which is all of them and then let's do a dot find and this will take in a function and we'll say we'll just call it item so for each country is an item then we want to find where the item dot id is equal to whatever this dot selected is okay in fact let's do a console log here of country and see what that gives us so i'm going to open up my console and i'm going to just select the country and you can see it actually gives me a proxy this is how view 3 works but we can see the data right here in the target so we get like the name the code the cases or you know new cases new confirmed all that stuff and then what we want to do is emit that upwards so we're just going to pass that in here like this all right so we'll get rid of that and now since we have this emit get country we can go now go to the country select and we should be able to say at get dash country and then set that to something set that to a function that we want to run you know when this is when this is emitted so we'll call this get country call it get country data okay so then that will fire off and we can add that as an event down here i'm sorry as a method down here so right under fetch covert data make sure there's a comma there then we're going to do get country data and this will actually take in country because down here when we when we did the on change and we emit get country we passed it in here okay and then up above we did that at get country and then we call this so we can pass this in and all we want to do now is set the stats so originally it's set to global right so now we're going to set it to country and then i also want to set the title which is originally set to the string of global we'll set it to the country country which is the the name all right so now let's save that and now if i were to select like let's say albania you'll see it'll change the title and it'll show me the cases and the deaths for albania now in most of the smaller countries or the countries that are doing fairly well are going to be zero for most of the day i guess until they get reported i think that's how it works because if you go to united states where we have you know a ton of cases and deaths it's getting a little better but if we go to united states you'll see this will actually show the new cases for uh for today and the new deaths for today all right so the last thing that i want to do is be able to um to basically clear this and go back to global we can keep changing countries here but i want a button to clear it so it goes back to showing the global cases so what we'll do is we'll add a button at the bottom so let's go under country select and let's put a button here and i'm going to give this a bunch of classes we'll do bg dash let's do bg green 700 text white we'll make it rounded we'll do padding three let's do margin top 10 and when it's in its focus state i don't want any outline so i'm going to set focus colon outline none and on hover let's say hover colon i'm going to say bg green and we'll change it from 700 to 600 on hover okay so we'll have a button and this will just say clear clear country all right now this button um i only want to show if the if a country is showing i don't want it to show to begin with if it's global so what we can do is add on to this and let's put a v if oops so v if and we'll just say in here if stats dot country so if i save that we can see it if i reload and it's global it doesn't show so it's only going to show if i show a country now as far as what we want this to do we want to add a click event so we'll say at click and then we're going to call clear we'll just call it uh i guess clear country data and then let's add that as a method so we're gonna go down here let's go right under get country data and say clear country data now we're going to be making another request so we're going to make this async because all we're going to do is is re-fetch the global data and set that you know set the stats back set the title back um so here we can just do let's first of all do with this dot loading and set that to true because we're going to make a request i should probably spell this right so set that to true and then we can just call this dot fetch covered data but let's put this in a variable called data and set it to await that because that gives us a promise then we can set this dot title i'm just going to set it back to the string of global because that's what we're going to be seeing is the global data and then this dot stats instead of being the individual country we're going to set it to data dot global just like in the beginning and then let's set the loading set that to false because it's done loading all right so now we choose a country it'll show us that data if i choose clear country it refetches and just sets everything back to global okay and if we make this a little bigger it's going to look like this okay so you can just check the stats for any country that you'd like and we can clear it and it'll go back to global and that's it now this is obviously something that's pretty simple it's something we put together in what i don't know 40 minutes or so but this api gives you a lot of data you have a lot of different options to display you could you could implement graphs maybe you know use something like d3 you could create a pretty extensive dashboard and i would i would highly recommend that you build on to this project maybe even have some other routes where you can see like how many cases each day or something like that if you do do something like that please tag me on twitter same thing with any project if you guys ever watch any of my tutorials or courses and you add on to it you change it you make it better i love seeing that stuff so just post it on twitter and tag me and i'd love to see it but that's it guys hopefully you enjoyed this little project and i will see you next time

Channel: Traversy Media

Views: 60,667

Rating: 4.9188643 out of 5

Keywords:

Id: m-MAIpnH9ag

Length: 48min 44sec (2924 seconds)

Published: Fri Apr 23 2021