Clock In / Out Web App - Google Sheets

all right so in this video we're gonna do a web  app to clock in and clock out and i'm going to   basically take my other clock in and clock out  video that i did with google forms and basically   just change the form to be a web app so basically  if i just go to the form currently we have this   form where we can enter clocking clock out as  an action and then employee id and verification   code and whatever we submit it's going to this  worksheet and basically it's going to enter   clocking clock out depending on what's selected  in the form and then it's gonna do employee id and   verification code and the time stamp automatically  just goes in here when we submit the form so the   problem with the current setup is that if we clock  in then we can go back and clock in again or we   can clock out multiple times and there's nothing  in google forms to prevent this from happening   right so we can just keep adding more records and  there's no difference if it's a clocking or clock   out or whatever and the second problem we have  is that when the verification code doesn't match   it's still going to let this thing true now we did  some sort of conditional formatting to highlight   it if that happens but it would be nicer to just  not let that person to clock in or clock out   if they don't have the correct verification code  so as far as the whole setup i'm going to leave it   the same so if you don't know how this whole thing  works i'm gonna link to the video that shows all   the formulas and everything else i did here to  make this thing work but for us we basically are   going to replace this form with a web app so i'll  go to tools and script editor in this google sheet   and we'll rename this project so let's start  building the html for this form so i'm going to   go ahead and add a new file html let's just call  it form and basically here i'm gonna use metro ui   to build the form mostly so i'll go  to metroui.org.ua go to get started   so let's just find our starter template here there it is so i'm just going to copy all of this   go to my editor and just replace all of this  with that starter template so now in the body   of this we're going to build the form so i'm  going to go back to this let's go to components and i'm gonna try to find the form see form  components so let's start with i guess input similar to this inputs right  in here so we need two of those   one for employee id and the  other one for verification code   so as you can see it's just an input box  and this is an input box with a little like   label username so i think that's what i'm going  to use i'm going to just copy this go back to our   script i'm going to start by removing this  h1 and let's start by first creating a form and in this form we'll start adding those  inputs this is one and i need another one   so i'll just copy paste this and the  first one is going to be employee id and the second one is our verification code  just like that so i'm going to go back to my   documentation here we're going to need some sort  of button to submit this so i'm going to go to   here under base under forms let's see if we have  it in here see we have a form this also has a nice   structure if you wanted to do this this way which  we probably will do so we probably want to wrap   this inputs inside of this divs as they show here  just to have some sort of spacing and structure   here so i'm just gonna copy this and go back and  put our first input inside of this div and then   close the div right after the input element and  then we'll repeat the same for our second input just like that i'm gonna go back to  this if we don't need the check box here   we do need the button see the submit data so  i'm just gonna copy this last div form group and paste it below these tab it in just to  align all of these to be nice and i'm going   to use the button the first one so i'm gonna  actually do two buttons one of them will be   clock in and i'm gonna copy paste that button  and for this one it's gonna be clock out   so let me just zoom out a little bit so mainly  pretty much this is what i did this is that   form that i just built and inside of that form  we have two of our inputs two of our buttons   i'm gonna go ahead and add ids to some of  these elements so i'm gonna start with the form   so i'm gonna add an id to my form to make sure  we can find this form so this will be main form   then i'm going to add an id to our input this will be our employee id and our verification code i'll just call it v code  and then i'm gonna also add a type to this buttons and finally add some sort of  data attribute to be able to know   which button it is so the first one  i'm gonna do data dash action so for this it will be clock in and we'll do the same for our clock out that's that and finally below this  form we'll have some sort of div   to do some sort of output message  let's just give this an id message all right we'll probably  restyle all of this a little bit   later on but for now that should be  most of what we need out of our form   now let's try to see what this looks  like so we need to load this form html   as a web app so to do that we're going to go to  our code gs and we're going to make a function   we're gonna call this one do get and what  we're gonna do this is a special name do get   function which is our web app endpoint so we're  gonna just return html so what we need to return   is basically this html file so i'm gonna take  html service create html output from file   and the file we're gonna use is that form  file this is this file name right here   and i think that should be good enough for us so  i'm gonna just save this let's try to see what   this looks like so i'm gonna deploy this as a web  app so i'm going to go under deploy new deployment   we're going to select the type right here web  app some name so in this we should choose anyone   really because in the end of the day we want  this to be publicly accessible for anybody to   go in and enter whatever they have to do so in  my case for training purposes i'm just gonna   leave it only myself that's good enough and  it should execute as you i'm gonna deploy this this is going to create the actual link to the  app itself but we're not going to use this during   development for development i'm going to click  done go to same deploy and go to test deployments   and right here we have our  dev link so if i click on that   it should basically show us what we've done  so far so we have this employee id where we   can enter our employee id we have verification  code here and then we have clocking and clock out now the first problem with our form is going to be  right now if i enter some sort of employee id and   some sort of verification code when i hit clocking  or clock out it's going to submit the form to   this action page which doesn't exist so  basically to nowhere and we get here so   we want to make sure that doesn't happen  when we click on sign in and sign out   let's just refresh this so it gets back to our  previous page so now i'm going to go back to our app and we're going to continue right here go  back to our form html and do our work in here   so i'm going to go below this metro script  and add my own script tag and this is where   i'm going to be writing my code at least the  front-end side of the code will all go in here so in here i'm going to start by  first creating a global variable and that will be an object to hold all of those  things in it now what i want to do when the page   loads i want to start by getting access  to all the things i'm gonna need from here   so i'm gonna get access to the form itself i'm  gonna basically store references to this input   this input this button and this button  so all five things that i have ids for   i want to make sure i get to those as a  matter of fact i didn't actually store a   reference for these buttons as an id so let's  do that so i'll just use this same clock in and clock out for those so i'm going to go in here and we'll basically  create a function within this object to run   when the page loads i'm going to call it  onload and that's going to be a function   and this function needs to run when the whole  thing loads so for that we're gonna do document add event listener everything here is  case sensitive so you want to be careful   so the event we're going to listen is when the  page loads so that's the dom content loaded and when that happens after this  comma we're going to run this function so as soon as the page loads because of  this event listener it's going to run this   function and this is where we're going to do  what we need to do so we're going to start   getting references to all of  those things we have on top   and we're going to store all of them inside of  this object so i'll just do some names for this so i need the form the employee id input box code then we have two buttons and then  finally we have the message box so we're going to find all of  those things by their ids so i'm   going to do document get element  by id and the id for the form is right in here main form and we're going to do the same thing  for all of the rest of these elements so the input element for  employee id this the id is this and you can probably see where this is going let's actually call this clock in so now we have references to all of these things  that we care about out of that html so we can work   with those so let's start first by stopping  the form from sending all of that to another   page which is this form right in here so for that  we'll basically add an event listener to the form and the event will be submit and when that event  happens we want to run some sort of function that   function doesn't exist anymore but we're going to  create that function inside of this object again   i'm just gonna take that and do a function   on submit and what i want to do here i just want  to stop it from going to that non-existing action so we'll just create this function here  after this bracket that's closing this   right here let's actually just comment  this so we know what this is for so now i'm going to create  this function right here and the way this function is going to work  it will accept this e argument from the form   submission itself from this event and on  that e there is this method prevent default so what this is going to do right now  if i just go back and refresh this dev   page if i go here and enter something and click  on clock in see doesn't send me to that blank   page so that's what that prevent default does  it stops that from going to that action page   now we can handle our actions however we like  them now the next thing i want to do i want to   add an event to my clock in so i'm going to take  the button and add an event listener for that   and when somebody clicks on that button  i want to trigger a function again again within that object we're going to create a  function i'm going to call this i guess clock in   actually out too because i'm going to use the  same function for clocking in and clocking out so   i'm going to call it clocking out so as of right  now we'll just think about this as just clock in so i'm going to create that  function again below this and that's gonna run when somebody  clicks on that clocking button   due to this event listener now what do  we want to happen when somebody clicks   on that clocking button we want to basically go  grab the employee id and verification code and   submit it to our backend to basically  compare if that matches the employee   id and verification code for that employee and  if it does then we want to go in here and add   a new line to our data worksheet so all of  that back-end stuff we're going to do with   a back-end function from the front-end side the  only thing we need to worry about is just grabbing   this information from this employee  id box in this verification code box so we can do that by using this references so this  input right in here will have a reference to that   input so if we do dot value that should  get us what's the value inside of that box   and all of that will store in an object  that will submit let's just call this payload and inside of this payload  we're gonna have employee id let's just move these two separate lines all of this can be on the same line  but this is probably a little cleaner   so comma then we're gonna do that second input value so that's our verification code and then finally what type of action this is  so action in this case is going to be clock in so that's the payload for this let's actually  just comment this function end as well and this one too so now we basically have to send this  information to the back end to basically   run whatever we need to run so we're going to  do that by running google dot script dot run followed by the function name from the back  end that currently doesn't exist so we'll   just call that function clock in out and to that  function we're going to just pass this payload   from right here i'm gonna save this now we  need to create this function in our server   side to accept that payload and do something  with it so that we're gonna do in this code gs   site so we're gonna create that function and that  function is going to accept that payload over here   for now i'm just going to leave that empty so  we can test this before i actually add that   let's just copy and paste that example for  a payload for now over here and the way   this is going to look when it's actually passed  correctly this is going to be one of those ids   so for example that could be like this one  let's actually use this one two two two two two and this will be three three three three  three and the action will be clocking so when this is submitted to our server we  need to do a few checks but for right now i   don't want to do any checks yet i just want to  grab this information and just put it in this   data right in here as a new line so just build  the regular functionality of a regular google form   so far so we need to basically add  this timestamp action employee id and   verification code in this particular  order to this worksheet called data   and to do that we're going to  basically add a reference to   our current spreadsheet so we're going to take  our spreadsheet app get active spreadsheet so in this spreadsheet we want to store a  reference to our worksheet called data so   we'll take that ss and get sheet by name and the  name is going to be data so that refers to this   name right in there so now we should have  access to this ws data and to that we can append   a row so basically add a new row and  i'm gonna do a set of brackets like this   and this will be an array of those things so  the first thing is gonna be the time stamp   so we can get that by simply just doing  new date object in javascript comma   then the second thing is going to be  the action so that's going to be that payload.action then we have employee id and then finally the last column here  is verification code v code from here   now we want to run this to make sure that our  function actually works and we also give all the   permissions it needs to run so i'm going  to save this and run this function clocking   out so i'm going to change this to this  particular function run this function give all the permissions it needs and as you can see it was executed no errors  so if i go back and check this clock in and out   see we have this new line added  with the current timestamp and date   so for now i'm going to comment this and i'm going  to add that payload here as a parameter to this   function save this so this way we should be able  to now run this function from our html side from   here and this is that same function clocking  out and we're passing that payload from here   to that so right now if i go back to my form  refresh this and we're going to add an id so now let's click clock in and  see what happens if anything   all right let's go check our spreadsheet  seems like we got our new line so good so   our function works we're able to trigger it  and enter the line if i go back and change   this information to let's say eight nine and  click clock in again let's go back and check see a new line added with this information the  thing we want to do probably after we clock in   we don't want to keep this employee id and  verification code here we want to just clear   that after this is done to do that i'm going  to go back and add a success handler to this and the idea of this is going  to be if this clocking out   function in our back end on our server side  is successful it's going to trigger this   success handler so now this is going  to be our success handler over here   and after it's submitted i want to basically  just create a function in here to trigger once this is submitted let's actually do uh   an arrow function here it doesn't really matter  both ways would work just fine so what i'll do   i'll just grab those same two inputs  and clear them so i'll take this first input value and make it equal to blank  and then we'll take the second input value and make it equal to blank so this  should just help us to clear that form   after the submission so if i  go back and reload this thing if i click clock in see after submitted it will clear these boxes  and we should have our line entered here   so all of that works just fine so the next  step i want to do i want to make sure our   clock out button also works so right  now clock out doesn't really do anything so i want to make sure it works and  i want to be able to use the same   function i just did this for both  clocking and clock out so to be able   to do that instead of hard coding this clock  in in here i'm just going to pass an event   to this function and that event is going to pass  because we're basically assigning this function   clocking out over here to the click event to  this particular button the clocking button   and that button will refer to whatever button  we basically grabbed so in this case this one   so inside of that button i did this data action  attribute with this clocking as a reference   so i'm going to access that clocking from  here from this data action and to do that i'll go back to this and we'll have  this e and that e has this target   attribute so that would refer to the current  element that particular input element itself   and inside of that element we'll have data  set which will refer to all those data   attributes in that element and we need the data  attribute called action so that action refers to see this part see data dash whatever is after  the dash action that refers to that action part   so the data set is the all this data dash  attributes and you could have multiples like   for example see here there's data role and then  data prepend so this would be the data set and dot   role would refer to this and dot prepend  would refer to this in our case it's just   one anyways but we're going to do data  action to get to this clock in value so i'm going to go back so that's  that e target.dataset.action   so right now i'm going to just save this  and make sure our clocking still works   so if this works properly it should  just automatically set this to clock in so i'm going to refresh this put something in  here and some verification code hit clock in   clears let's go check see clock in maybe we should  just do it the same way we did in our spreadsheet   with uppercase like this and to do that we  just need to set the actual data attribute right in here to be not this one but this  one to be clock in see this one this data   action and this one will set it to clock out i  assume i did it this way in a spreadsheet too   so at this point all i have to do for  my clock out to work is just go in here and add an event listener so i'm just  going to copy and paste this and instead   of assigning to the clock in button i'm just  going to assign it to the clock out button   and i'm going to add the same  click event to this other button   but i'm gonna trigger the same function and  what's gonna happen it's gonna get the same target   action value now from the clock out button which  says clock out so now it should just work for both   so i should be able to now go refresh this and i'm  going to type something and if i click clock in we have our clock in as you can  see and then if i go in here and do clock out that should now be clock out so all of that  works just fine i'm going to delete all of these now we have our clock in and clock out it  works depending on the button you click   at this point we need to start doing some checks  so we don't want this to just automatically go in   whatever employee id and verification we enter  we want to cross check does that employee id   and verification code exist before we actually  clock in and clock out so that we're gonna do   on our server side right in here and again what  i'm going to do for now i'm just going to remove   this payload from here and i'm going to uncomment  this to build this back-end functionality for that   so what we need to do we need to first  go to this employees worksheet and check   does the employee id and verification code  match to whatever submitted so let's just   store a reference to this employee's worksheet  so we'll do that by doing another variable here and we'll do the same get sheet by name only  this time the worksheet is called employees   so right here let's go get the data from this  employees spreadsheet so we need the data   that's in here pretty much and i'm gonna just need  this much of this data so i'm gonna start from the   second row go until the last row and grab the  first two columns out of this so we'll take this and get range and we're going to start from the  second row first column and the number of rows is   going to depend on how many rows we already have  so if the last row is six then we need to get five   items because the first one is gonna be ids and  we're gonna have one two three four five even   though the last row is gonna say six so what we're  gonna do here we're gonna take that worksheet get last row in that minus one  for that headers and we need to   get this data for the first two columns so two get values to get all the data  and we'll store this in a variable and i'm going to call this employee data so that  employee data at this point is going to refer   to this data right here and inside of this data  we need to check if we have an employee id and   verification code that match whatever employee  id and verification code we have from here   so what i'm going to do i'm  just going to filter my data and for each row in that data  i'm going to check if the row 0   which is the first column in that row equals  to employee id so payload.amp id which is this   and then at the same time i want to make sure  that the second column which is the column   of verification codes in that array equals to  payload dot vcode which is our verification code   so this is going to filter our table and it's  going to basically just leave the ones that   match this employee id and this verification  code in that array so we'll just say matching   employee actually i'll do employees  even though we should only have just one   there is going to be a little problem with  this filtering and the reason for that is   because when we get these ids and verification  codes from the form they're going to come back   as a string like this and when we check  to our spreadsheet values right here these are going to be numbers and because of that  they're not going to match so what i'm going to   do i'm going to add two string to the spreadsheet  values to convert them to text and then we'll do   the check so now we should have this matching  employees array which should basically return   a single row of data if all this filtering goes  well if we get zero that means there was no match   if we get more than one that means there's  something fishy going on here so the only time   we're going to say that this was valid is  when there is only a single match so we'll   just simply add an if statement and we'll say if  that matching employees.length is not equal to one   then we know something is not right so what we'll  do we'll throw an error also just add a return   here just in case so essentially what i'm doing  here i'm checking if we have a single row matching   from our employees table then we know they  have a valid employee id and verification code   if not then we're gonna do this error and we're  gonna stop the execution of the rest of this code   just like that so this should basically  just stop us from adding a new record if we   don't have a valid employee id or verification  code so to test this we're going to comment   this and we're going to pass the payload here  as an argument and then we'll go ahead and do   the check to see what happens so let's just do a  test so i'm going to go ahead and go under deploy   test deployments and let's just open this link  this is our form so let's try this this is my data   let's just try to enter some random employee id  and verification code and see if we get a new line so i'll go in here and add some number  and another number and click clock in and hopefully nothing should happen so as you can see i get no new lines now  if i try a valid one so let's try this and click clock in again see that cleared this because that worked  if i go back see this is actually in here   so now let's try to clock out and enter a valid  employee id but not a valid verification code so i'm going to click clock out nothing is going on nothing is in here if  i go back and correct my verification code   click the same button again we're good so all of that is  great so we're able to actually   check this and prevent this now it would be nice  to have some sort of error message showing up   in case there is an error instead of just  doing nothing at all so for that what we'll do   we'll go back to our html and basically this  is where our success is now what's going to   happen is that when you use this google script  run in addition to this with success handler   we can also do this other callback which is going  to be when it fails so instead of success we're   going to change this and over here it's going to  be the function that's going to run when there   is an error and that error is going to be that  fro error that i did so in case that happens   this is what's gonna get triggered and  we're gonna do whatever we're gonna do here   right in this brackets and what i'll do i'll  just basically display the error message so   right in here so what i'll do actually i'll just  add a class here to hide this message by default   the non should do that from metro ui that's  a class to hide this div so what i'll do   i'll just add an error right here that's my error  message and by default it's going to be hidden   now what's going to happen i want this to display  this error message when there is a problem   so we can access that by accessing this we  already have a reference to that message element   so we'll just go to this section here and we'll  take that and to the class list of that element   actually from the classlist we're going  to remove that class called the none so what this is gonna do if i go  back and enter let's just refresh   this and enter some random id and  verification code if i click clock in   see we get our error message this error will  stay here forever as you can see so what i'm   going to do after we display this error maybe in  like three seconds or two seconds we'll just hide   the error message and the way we're gonna do  that after we do this to basically display   the error message we'll do set timeout and in  this we're going to basically have a function   that's going to run and after that we're going to  have the time in milliseconds so we'll do like in   three seconds three thousand milliseconds so over  here in this brackets is pretty much what's gonna   run so what i want to do i just want to basically  have pretty much this line only instead of remove   we'll add the class so if i save this at this  point and get back to my form refresh this type   some number here or not a number it doesn't matter  and click clock in see we got an error message   now in about three seconds see that is  gone good it works and it's not submitting   that to our spreadsheet now the next thing i  want to check if somebody is clocked out we   don't want them to clock out again or if they're  clocked in we don't want them to clock in again   so what i need to do i need to basically  now take this table and filter this table to   employee ids that match the employee id that was  entered and for example if it was this two two two   two it will filter this results to only the  rows that have two two two two two in them   so to do that let's go back to our back function  after this if statement so what we'll do we'll   go to that data this ws data and we need to do  something very similar to this thing right here   only we're going to get the data from here instead  of getting it from here so i'll go back in here   copy that line paste it over here and here  instead of getting from this employees   worksheet we'll get it from this ws data worksheet  we're gonna start from the second row we're gonna   start from well technically we don't really need  this so i guess let's start from column number two and then we're gonna get it from this ws data  worksheet from last row again minus one and   we're gonna do two columns to  get this and this employee id   these two columns so that two is still valid  right here now let's change this variable name well actually let's call it ids data   so what i'll do in this i'll again  filter this similar to this one and for each row we're going to pass a callback   and in this array and if you remember i got the  array starting from the second column like this   so inside of this we need to check in the second  column if employee id is the correct id and the   second column will be 0 1 in that array so that's  going to be r 1 we'll convert it to string again   i'm going to check if that equals to  that employee id that was passed to us and this will return our new array with filtered data that will match that particular  id now from this matching ids we need to   make sure we get what's the action for the  latest one so out of the list we get we need   to get the latest action in the list and to  do that let's just create a constant here we'll take that matching id's data  and we need to get inside of the last   row of this data so to do that we'll  take that array and get the length   and do minus one because ray counts starts  from zero so we need to offset that by one   to get to the latest element so that should  get us to the latest one from our array now   that will get us the whole row like this now  from that row we need to get this employee id   which is the second item in the list so that  would be zero one so i'm gonna do another set of   brackets and do one to get to the correct value  so this should give us our latest action but this   is only gonna work in case that person already has  something in this table if this is the first time   they're submitting something they're not going to  be in this table so what i'll do i'll check here and say if the length of that array that was  returned equals to zero meaning we got nothing   then what we're gonna do we're gonna basically  say the last one was clock out now the reason   i'm doing that clock out is because what i  want to do i want to make sure they clock in   next if they never had any record then the next  thing they have to do is clock in and even if   they had something in that particular table if the  last one is clock out then they need to clock in   so basically that will equalize those two things  and at this point that should give us what the   latest action is so what we're going to do at  this point we're going to add another if statement and we want to check if the latest action equals to whatever they're trying to do now so  let's say right now the action they're doing   they're trying to do clock out again right  so that's going to be this payload dot action so basically if they try to do  the same thing as their latest action   so if the last time what they did was a clock  out we don't want the new one to be clocked out   we know there is an error and if they clocked  in we can't have them clocking again so we'll   just throw an error pretty much exactly the same  way right in here in case they try to do this   so another thing that's probably worth to  check in addition to this is to make sure   they didn't do any trickery to pass an action  that's neither one of these things so the only   valid actions will be sign in and sign out and  we should probably check for that before we run   any of this code going forward so what i'll  do i'll well let's actually just copy this   if statement and just put it right on  top here before anything else happens   and what we'll do we'll do an array here  of valid options clocking comma clock out   and if that includes this bracket shouldn't be here so we'll check if  whatever is passed is in this array and we'll do   that by basically doing payload action so we'll  do payload.action so if this payload action is   not clocking or clock out then we're going to  consider that an error and stop the execution   so let's see if all of this works so i'm  going to save this go back reload this thing   let's start by just entering some random  id and some random verification code   click clock in and that should give us an error  and that should also not go in our spreadsheet   now let's try to clock out this person again with  this employee id and this verification code so   i'm gonna go back here and do two two two two two  three three three three three and click clock out and as you can see we got an error and that   shouldn't be added here to the  spreadsheet so we don't have a second   clock out here now let's go back and take  that same information and just click clock in so apparently we got an error that's  not good let's go check what i did   incorrectly clock in let's make  sure the action is the same doesn't look like that's the  problem let's go back to our code so i'm gonna have to console.log  some things here to see what happens   so let's just add a console log and  we'll just console log this latest action   and also we'll add another console log to log  this matching ids let's also add a console log to this so let's check if it's actually passing this so i'll save this go back and reload the form and do my two two two two two hit clock in we  got an error that wasn't done here let's go back   to our code and i'm gonna go on the left under  executions to take a look at this console logs see it says failed let's open  that and see what happened so it says it failed it gives us that error and  it seems like it's happening on this line 13.   let's go back and lighten 13 is well  it's pretty much here so it's not even   getting to any of this stuff it just fails  in this check i'm not seeing anything that's   incorrect here let's also  just console log the payload right in here save this reload and try this again let's go back and check our executions  again and see what's going on so see action is clock in seems to be correct oh of course so i'm checking if this is in  the list and of course it's in the list so we   should check if it's not in the list than thrown  error so this exclamation sign is missing here   so well a little bit of debugging i guess doesn't  hurt so we'll save this go back and take a look   at this again reload this thing again two two  two two two and then i'm gonna click clock in so that went through and as you can see   that's in all right that's good so now let's go  back and try to clock in again using the same data clock in now that's not good that shouldn't  have happened so now we have to go   check what else i got wrong so our logs should  help us so let's take a look at our execution   the last one initial check passed so  here is my problem see i did that log   which gives me the latest action and instead of  that being clocking or clock out it was the id   and that's because this should  be the first column so zero   not one so i'll save that go back and reload this  let's try this again let's just delete the last   clock in out of here and try this  one more time so two two two two two   we'll get this right at  some point there it is error   so we got an error it didn't actually do  that now let's go back and try to clock out now this not worked because it's a valid action   see clocks out no problem if i go back and  try to clock out again it shouldn't work error good but i should be able to clock in and i did good so that works the only thing  i want to check is what happens if it's   somebody who's not in this list  so let's just go to employees   and add another employee here  i'll just give this person some id and some sort of verification code   okay so that's that so let's go and try to  log in using this information so we shouldn't   be able to sign out but we should be able to  sign in let's just refresh this just in case so i'm going to try to clock out error that didn't work good so now let's try to clock in and that went true and we got our  data in very good seems to be working   the only thing left to do is probably just make  this look a little nicer from the ui perspective   so i'll just add a little bit of  container around this whole thing   so i'll go back to my form and right around this  whole thing we'll add a div with a class container and we'll close this div after the whole thing  is over basically after this thing all the way   down here and what this is gonna do it's  just gonna add some margins paddings see   so that's a little better  let's add a little bit of   line around this whole thing so we should  be able to do something like a panel let's try to find those see this so i'm  gonna put this inside of that container and close that right above tab all of this in save this should add a little  bit of line around this see just like that we   should probably also make this a lot smaller so  what we'll do we'll add a class to this panel   to this div we'll call it like main box  or something and we'll style that main box   right here below the style sheets we'll do  our styles so i'll add a style container and right in here we'll do that class  dot main box to refer to that class   and we'll just do a max width  something like 300 pixels   semicolon to finish the line save this go back  and reload see that makes it a lot smaller we   probably want to center this in the middle  of this whole thing so we should be able to   use flex boxes to do this and they should have  some flexbox classes for this let's search flex see there's this d-flex   that's for the main container so in our case the  main container is going to be this so i'll add   that to this we also need to center the content  inside of that container which should be see this   right here which is this flex justify center class  so i'm just going to copy that from here go back and paste it here save that and  at this point if i reload this   that's centered we probably need a little bit of  padding or margin from the top to push this down   we'll just add a padding to the main  container to the top so here i'll just do pb   padding bottom three as a size we can do four  for more two for less something like that well that didn't seem to work very well   oh actually the padding top we want to  do the padding top of the main container   that creates a little bit of space and i think  they had some sort of title here for our panels let's go back to the panel see this  panel title apparently we just have to do   this attribute so i'll just copy that go back to this panel we'll add this  attribute and change this title so if i reload this see we got  the panel we got all of this   the only thing probably left to do is  to also style the actual error message this let's add a class to the div and i'm going to copy that and go back to the top   and add some styles to this too i  will just add some background color background let's spell that  correctly let's do color   white for the text and maybe  some paddings for the whole thing let's just see what this looks like so i'm just  going to save this refresh and just click clock in   see we got the error message  we probably wanted that to be   smaller and also to be pushed down a little bit i don't know about 7 pixels  maybe add some rounding to this and then also just push that down a little bit so  i'll just use bootstrap classes for this right in   here i'll do mt for margin top and do like four or  something like that so let's save that and reload   if i click clock in we got our error message i do clock out we got our  error message too and if we do things correctly apparently clocking i couldn't do  do we already have that person yep   we already have that person clocked  in so i'm gonna go ahead and clock out good works just fine so that should do it

Channel: Learn Google Spreadsheets

Views: 22,509

Keywords: Clock In, clock out, web, app, google sheets

Id: KGhGWuTjJwc

Length: 63min 47sec (3827 seconds)

Published: Thu Apr 22 2021