Copy eSigning Conditional with airSlate SignNow

Copy esigning conditional

this is code.org in design mode create the screens designed in step 6 of your planning guide if you're my student you already haven't completed that let's take a look at the apps though so here was their example right and this one i liked a lot so i'm going to model mine somewhat after this i'm going to say mr kaiser and this is from lesson 12 right this is a good idea for how maybe you want yours to work and it says a different restaurant oh portage bay that's in seattle i love that place based on the price you're willing to pay so this is going to be similar to mine at least aesthetically now oh and this is the planning guide students all right let's get going i'm going to go ahead and walk through the design of mine my app is going to be a fortune teller app all right so i'm gonna get started i'm gonna oh name it fortune teller because i'm not creative that's the id though all right text is going to be fortune teller i'm going to make this idea id title text because you always want to clear on what it is it needs to be easy to understand something like that because now i'm going to make my font huge not that big perfect and centered awesome fortune teller now what do i need well i'm going to ask the person for their name you know makes it more personalized drop it doesn't need to be that big and i'll say name input enter your name right and then what do we want well i need some details for their fortune i was gonna ask because you know it's a fortune uh we're gonna get their favorite color or we're gonna ask them to pick a color i guess so color input and then or no color label pick a color and then i'm going to have a drop down okay and then i need to add options so i'm gonna let them do red green blue purple orange i'm not going to let them choose any color on earth those are their options and the idea will be color drop id okay and then the other thing i'm going to ask for is their age so and i really like the buttons they had on their example so i'm going to do something like that i'm going to use boop and then say up btn for up arrow button and then what's it going to say it's not going to say anything i'm just going to scroll down to get an image don't need to upload it they should have an arrow i'm going to type in arrow yep uh up arrow i'm going to shrink that right 30 by 30 ah one of the big fingers 30 by 35 is great and then i'm just gonna duplicate this right here i'm gonna click duplicate grab and pull and then i'm gonna instead of doing an up arrow i'm gonna go icons arrow again and down arrow okay so then i need to rename or give this an id and this will be down btn all right now what are those going to be changing i'll figure out the fonts and stuff in a second they're going to be changing a number and the number needs a area for us to update and write and that's going to be a text area since it's just one number the text area can be pretty small all right and now we need one one more oh wait i need to name this age text area and if you want to put a default you can i could put in like zero right there's zero years old maybe we can put 20 um either way uh and i'll center that actually i'd like to all right and then i want one more text area down here where their fortune will go now i'm gonna pick a theme nope it's going to be the dark theme perfect or a dark scheme all right design i have my design laid out um i might change this up a bit keep in mind you always can so even after you pick a theme i'm gonna do a border radius of like five on the now on zero on my labels because i want it to be obvious which is a label i'm also going to increase their size i guess oh that's just the height of the box just kidding font like that yeah i'll go up to 14 on both of those and then i also want this to appear like it goes all the way across so i'm going to zero this out boom maybe pull it maybe not oh no i like that boom okay there's my design and i'm gonna keep going uh the one other thing we could do is name the screen since we only have one maybe not super necessary but it's good to have uh id ideas ids that are clear all right main screen run and oh did i just okay i'm gonna do this theme all right blue gold cool all right sorry finish and continue oh it didn't save it i want a different thing i want that theme save okay what do we do now now switch to code mode create variables for your app and the list you create in step four right so you should be using your planning guide step four is what we're gonna be adding so code and i'm gonna add variables without setting them equal to anything right i'm just declaring them so whoop or i could go into block mode here and i know of at least three i want uh because i need their name so i'm gonna call that name and then i need the color choice right so i'll say color and then i'm going to need the age age let me go to design mode where did my oh there's age okay so now now once i get all of those what else will i need well i might need something to store what i am creating but we'll wait on that so name color age cool i'm hitting run i'm hitting finish onward now what create the update screen function add conditional statement to the function what decision will your app make what variables will be used making that decision use the flow chart from your planning guide which you should have filled out don't forget output what will be displayed on the screen also add a comment explaining your function cool well i'll start then i'm going to create some blank lines just to give a space and then uh more blanks and then i'll go into code mode for now i'm going to add a function right here and it's update screen okay my comment will be this considers the input and updates the screen something like that right you're it's going to use the analyzes the if statements so it it has uh conditional expressions in it so i'm going to go into control and i know i need an if else right what do i need to check well first off i want to check if their color is something because again i am outputting a fortune based on their input so if their color is red so to do that i should do color let me move that color equals equals red okay now what am i gonna output well i'm gonna output two different things the rest of their fortune is gonna be standard so to know what i'm gonna output to store it i'm gonna have two other variables and i'm gonna just call them output one and output two for now output one output two okay and then my default fortune will be and maybe i could even write this over here so we can keep it in mind so hello blank right and i'm not going to leave this i'm just showing you hello blank i can see the future your next year is going to be blank and that's the variable that we'll be filling in all right so back to the code now notice i only have color equals equals so we're going to want to consider two things for how their year is going to be it's why we have two inputs all right so i'm gonna consider the color but that's not enough i'm also asking them their age to put out uh what what we think their future is so i'm gonna go to show to text because i have to check two things it's not dependent just on color it's going to be and age and my cutoff will be we'll say 16 because that's you know contentious all right so if their age is greater than 16 here now let me go back to show blocks so this means both of these sides remember would have to be true now so if their color is red and their age is greater than 16 i'm gonna have i'm going to have this output all right so if their colors red and their age is greater than 16 i'm going to say oh yeah i don't think we'll need output 2. i'll say output and i'm gonna do this output will be equal to and whatever i think so if their color is red and their age is 16 i can see your future your next year is going to be rosie yeah i'm creative oh i should probably spell that right okay so if it's red and that that's going to be the output else so if either of these are false is that what we want right we don't want the default so if either of these are false no no no now i want to know that it has to be color is going to be equal to red still but then and and age will be and don't forget less than or equal to right because otherwise 16 is excluded so it's going and keep in mind you can always drag this stuff out i'm typing it but you can always drag it out so less than or oh of course less than or equal to 16. and i mean i don't know let's be nice because you might be this age output uh your your year is going to be and i'm putting a space uh [Music] well yeah let's do that uh your year's going to be rad explanation point all right and that's what output will be equal to so let me get rid of that now what about my other variables okay so i have to keep going on this if and yep if else so now if let's look at our options i'm going to use blue next so if color is equal to equal to blue and i'm oh i'm doing something bad notice these aren't in quotes this isn't going to work this is a string okay so this is a string this should be a string gotta put them in quotes you never you don't want to put numbers in quotes at least not these ones all right so if color is equal to blue and and age i'm gonna have this one be a bit different because i can age is greater than 30 what do i want to have happen well i'm gonna say output will be equal to your year is going to be awful oh wait that's me oh well your year's going to be awful all right now keep in mind again this is only if both of these things are true so we're going to want an else if here with something so if color is equal to blue and age is greater than 30 same idea well what if it isn't well if color is equal equal to blue and and age is less than or equal to 30 because we want to include 30 otherwise it doesn't get included if it's less than or equal to 30 we're gonna say output equals your year is going to be brilliant so now you might be thinking oh but what about all those other colors am i gonna do all of them i could definitely i definitely definitely definitely could but what i'm actually gonna do is so now we know if it is red or if it is blue right because if either of those are true this stuff is said i am gonna now say everything else so if i put an if here if the computer gets to this point i know that those things are not red or blue the reason i know that is because if they are well they either had to pick an age above 16 or less than or equal to so this would pop out or if it was blue one of these had to happen so that means it's not red or blue so this is like the default this is everything else i will check age still so if age is less than 10 i'm gonna say um your year will be let's see output your year will be child ish i'm so funny um else so everyone else we're just gonna use an else because i don't need to check um two things and i'm not trying to fill in the gaps from a different age so if that's not true else your year is going to be colorful okay let me make sure to put a semicolon and go into block mode so it's a bit easier to see all right here i am so here's my big function and it looks huge if this and this then that's the output this and this that's the output now blue this and this that's the output keep in mind if one of these is false it does not run the code inside boom runs this code instead okay and if this is false zoom runs this code instead oh i have a problem though i need age to be okay so i'm gonna do in uh a double statement like we did before because age less than 10 this will override these top two so what i'll do instead of just age less than 10 is i'm gonna say if color does not equal blue and and and we've done this before with three of them color does not equal red and and so we need all of those things to be true age is less than 10. you could also do what's called a nested if which might clean this up a bit but we'll keep with what we're doing so now if age is less than 10 that will run else and i'm going to turn my else into an elsif just like that so let me show you what i have now this way because when it finishes running right so oh yeah they're we'll say they pick red and their age is greater than 10 as greater than 16 then it output will be equal to rosie and it skips the rest of this if but it will still check this if well it's not blue it's red so if i didn't actually check the color that it wasn't equal red this would still run all right we're still not updating the screen though we're just getting the info finally at the bottom here we can do set text okay and then the idea of this thing is did not give it one text area two i'm going to say main area all right and then i'm actually just gonna copy and go to my code paste because i'm going to need that what id main area there we are all right and let me shrink this this would be easier to do in text mode so i'm switching so hello and now i'm going to do quote quote because here we're going to put a variable name right that's going to be where their name is displayed oh it's fighting me there we are wow that was annoying all right so and make sure you have a quote and a quote so hello name okay i can see the future your next year is going to be and that's where my other variable goes in to make this easier to read on code.org no i want to leave it actually all right i have to have it like this your next year's going to be and i don't need a space here because i put a space in front of all of my outputs and punctuation so your next year is going to be plus output okay i should be able to hit enter here i'm not going to leave it like this i just want you to be able to see so your year is going to be plus output is what i have if it also could be easier to make this all a variable that's kind of up to you but all right so let me go into block mode look how long it is your hair is going to be i want to fix this so it's easier to read so what i'm going to do is do a uh temp all right so i've shortened it up some uh let me add this back get rid of that all right so what i did is i just made a variable to store the final output var my text and i have hello name plus name and then i have my text equal to my text plus and then this is the other part of my statement i could just have it all in here but we're having problems reading it so i see the future your year's going to be plus my output so the name variable goes there my output goes here i'm cramming it all into my text right my text hello name then i do my text equals my text plus all that and then i output it here okay now we don't run this yet but we do have the code there all right so i think that's add a comment yep we did that awesome this is looking good so far let's keep uh going okay add on event blocks ah now we're going to make it work in each on event block update the appropriate variable add a call to update screen okay that makes sense so what they're saying there let me go to ui and grab an on event and let me grab a blank space just to make it easier to read all right so i need let's see your name and i the id for that is name input so i'm going to do name input and then so on the event that name input is clicked no because they're going to then type so that's not when they do it let's see how about change so on the event that name input is changed what are we going to do well i want to get the text hey look get text but where do i store it i can get the text where am i putting it well i want to put it in my name variable so i'm headed to variables drag that out and go ahead and type in name name is going to be equal to what was jesus saying which is get text get text what text am i getting i'm getting the name input there we are so name will now be equal to the name input cool that's our first on event and then we need anova on event let me grab a space so you can tell what i'm doing now on this on event we're going to need the color so color drop so on the event that color drop is used do i want click now i'm going to do change for this one again alright so on the event that this changes what do i want well again i'm going to want to get the text this is text so get text but get text what am i going to make it be equal oh right i have a variable color so let's head over to variables drop that in there and color is going to be equal to get text and it's going to be the text of well of color drop right notice name input name input color drop color drop we're grabbing that text all right now your age is going to be slightly different but again on event on the event that age text area oh no we can do these buttons we're going to do each button all right it's working on that so what did i name this up button down button so on the event that the up button is clicked what do we want to have happen well we have an age variable so we're going to have age be equal to age plus 1. another way of writing that is age plus plus but okay so my age variable will then be equal to whatever it used to be equal to plus one if they hit the up button we are not done though because we're going to want to update this number so when they hit that button we'll change what age is equal to and then we want to set the text so we're going to set we're going to change we're going to set the age text area so age text area is going to be changed what am i changing it to well i'm changing it to their age right the word age is my variable what if i want years behind this too i think i do i'm gonna just do plus quotes space years 20 years your age nope i don't want that all right so just their age will appear just a number okay now i need another on event because i need down okay so and i named that down button or down btn and we can say click and once again i want to do age equals age but i want to subtract 1. so age equals age minus 1. another way of writing that is age minus minus and then once again i'm going to do set text age this right here right age text area update their age because it doesn't matter if the age variable changes if we don't ask the computer to grab this text area and push that new number in to it so i'm just going to copy and paste it i did that by highlighting it ctrl c and ctrl v because it's the same piece of code oftentimes if you're repeating code you want a function but we'll all right with that that's just a tiny bit of code okay now with all that said we're still not using our update screen when do we want this screen to be updated well we're going to want it updated anytime they make a change right because their fortune would change so other than name honestly because it wouldn't make sense because they won't have enough info in there so and i could do it on name if i want to use the defaults but i don't so what i'll do now is do function calls remember this makes the function the mouthy thing this asks to run it update screen and i'm going to call it at the end of all of these oh it looks like i'm not allowed to use a the name variable it is a um reserved uh variable in javascript so instead of using name i'm going to say i'm going to say username i guess because i can't use name username so now let me just make sure i don't have that anywhere else i think i had it down here it's a reserved thing meaning they use it in the base of the programming language so it's just like if you tried to write var for something var you can't name something var that's used in another way so username is what i'll do all right let's see this is all looking good so oh there's something we need to start notice i start age equal to 20 in the app but age doesn't even exist uh yet when i hit run here it's going to air out i'm going to hit down none means it doesn't have any idea what i mean because i click down and when i do so the computer says okay h equals h minus 1. well age is equal to nothing nothing what and it gets super confused so how we fix that is we want to set age to be equal to whatever i have it starting on the app so i would do age equals 20 here okay and i capitalize there make sure you're careful let's make sure i yeah so notice their capital here and their lower case here so you really want to be careful with that in order to fix it i can do two things i can change them to lowercase in here which is actually what i'm going to do or you can go through the code and do upper case all right code okay let's give this a try a bit of debugging run i'm gonna say mr geyser and i'm gonna move h hello mr kaiser i see your future i see the future your year is going to be colorful hmm now is that what we're expecting color is equal to red oh i haven't changed color yet got it so let's make sure we set all of these defaults so i just declared them at the top you want these to all equal whatever it says as a default so my default will be red because that's what it starts as try again and down so i haven't written my name so undefined is fine but i'm 19. let's see if that's right if you're if you're older than 16 and red it should be rosy so far so good i'll say mr kaiser and then let me go under 16. yeah rad oh i put a period too oops oh ah all right so now let's say i want blue is the one blue so i'm blue and i'm 16. blue and my age is less than 30 i wish brilliant okay now over 30 like i am [Music] awful and now anything else purple colorful green colorful right that is what we were expecting then what if i'm under the age of 10 though and something else childish that's awesome that's really kind of fun actually to do so this is complicated let's go to the top and i just want to walk you through again so you want to have your variables equal to whatever you're starting with otherwise it airs out i demonstrate that on events name input change so when they change the name i grab that and store it in username using git text i then call update screen because i want to make sure i update the text area with the latest info now on event name drop change color drop so when they pick a color i grab the git text color slap it into my variable that's color and say hey update the screen because i want to check if that new color changes what i am displaying then i have on event up button and down button for the buttons i take my age variable set it equal to what it used to be plus one or minus one depending i use set text here right um i think i could yeah set text works fine actually age text area and then smash that age into there then i update the screen here's my update screen if it's red and and age is greater than 16 and if that's true it doesn't run anything else in this if but it will look at these but it won't matter because it's red if this is false it would look at this else if same thing we're checking all the ages here down here i say color does not equal blue does not equal red because i want to make sure i'm doing anything other than those two colors are these answers and then finally i did this so you could see it i create this variable smash all the text into it and set the text that is awesome tricky tricky tricky stuff i think the update screen was probably the hardest part with all of those ifs and with all of those ands and follow those things cool um i'm excited to hear about your applications what did you make tell me about it below i would love to hear all the cool stuff you guys are doing obviously i love this stuff so yeah onward