slate .env file where shopify

hello internet and welcome to this video,in which i'm going to show you how to,make your own,typewriter imitation in simple,javascript html,and css now the reason why i like this,video is because,we use a lot of if statements so if you,want practice,in those this is the perfect video for,you,we are going to be learning how to,essentially push things,into an array if certain conditions are,met,stop at the end of a phrase and then,quickly delete the phrase,and then start again so we're going to,be doing if statements and,nested loops okay if you want to,practice this or if you simply just want,to,recreate your own typewriter effect then,this is the video for you please do,like and subscribe to my channel it,would really mean,a lot if you like this video as it would,keep,me able to keep creating more content,for you guys,so do that and let's do it,okay so the first thing you're going to,notice is my file,setup for this project in vs code i have,simply made,an app.js file an index.html file,a styles css file and put them all in,the root,of my project next up i have some,html boilerplate which simply uh,includes me linking to my styles,sheet so this one making sure the path,is correct,and my app js file making sure the,file is correct to this file also,okay so there we go,now the next thing i want to do,so i've already gone ahead and made the,body,background color dark slate gray so that,if i go to my,index html file and simply copy the path,not the relative path okay the full path,and put it into,my browser,i just get a dark slate gray,background i'm just going to inspect,that here,cool the next thing i want to,do is go back here or we can start here,so any text that's going to appear in,the body okay so anywhere in the body,of my project i want it to be white so,i'm just going to use,color and white and then i also,want it to align at the center so i'm,going to use text,align center,cool now above my script tag this is,important,everything needs to be done above the,script tag,uh so that the js gets read after it,i'm gonna put simply,uh a tag so i'm gonna use,the h1 tag,and i'm gonna give it an id of text,and just keep it blank for now because,we're going to be adding the text,with our javascript so there we go,i'm just going to use quiz like this to,make it consistent with everything else,in this file,in here now i'm actually going to grab,that h1 tag and i gave it an id,so to pick out ids i need to use a hash,and i'm going to pick out the id of text,like so,okay so there we go,at the moment i'm not actually gonna,style it up um,i think it's fine for now but just in,case we want to do anything to it that's,how we,would do so uh so yeah let's carry on,now let's get to writing some javascript,so as we already know we have the script,tag which will,pick up all of our javascript and we,want to start,adding sentences or phrases with our,javascript,to the h1 tag so we can do so so first,off,i'm actually going to grab i'm going to,call it text display,so i'm choosing the uh,context display to store so i'm going to,go into my document,and i'm going to use get element by id,so this is a javascript method that will,essentially allow me to grab,this h1 tag right here by its id,and then i would simply pass through,text and i'm going to store it,as text display so we can use it in our,javascript,file next up i'm going to write the,phrases that i want to be,rotated so it's quite simply i'm just,going to put,hello my name is ania,and then let's have,i love to code and,i love to teach,code so you can have whatever phrases,you like those are my three phrases,okay so the first thing i want to do,is essentially start looping over each,one by printing out each letter so for,this i'm going to use a nested,loop if you haven't done nested loops,before this is the perfect exercise i'm,going to,tell you what i mean so i'm just going,to do this,in a function function loop,okay now,a nested loop works in the fact that i'm,going to have one loop,and in that loop it's gonna be another,loop okay,and it's gonna the middle the central,loop,once that's completed we'll initiate the,outer loop,so that is how i'm essentially gonna get,this,first phrase printed out i'm going to,choose i'm going to loop over,one two three in my first loop so i'm,going to loop,one and then i'm going to enter that,second loop or the next,loop to print one two three and each of,these characters,and once that's complete i'm gonna go to,my outer loop again,and complete this one and so on and so,on,so let's write our outer loop first,if i,is smaller than phrases length,so by phrases length i'm essentially,getting this,and using the length of however many,things are in my,array in this case there are three,things so if i,is smaller than three we keep looping,okay so if i console log for us,phrases i we will see that,okay so that is our outer loop now let's,do our inner loop,now if this we're going to do our second,loop so our nested loop,i'm not going to use i this time let's,use something else,i'm going to use j and if,j is smaller than,and this time i need to get the phrases,so the first,item of our array so we do so like this,we pass through an i,okay so we're going into our array we're,grabbing,this right here so we're grabbing that,if j is smaller than this is,length,then we loop,so i'm just going to put console log,this time phrases i'm gonna go,into the first phrase and then we're,gonna go,into the first character of that first,phrase,so if i run this loop,i'm just going to call it refresh,i is not defined that's right i have not,defined i,i'm actually going to define i up here,let i equal zero and let j,equal zero,refresh,okay so we've printed out here,console printed out phrases i and we've,printed out,the first character of the first,phrase now if i was to go j,plus plus and then put this on a loop,so i'm going to use set timeout,to essentially loop over this again so,i'm going to call the function in here,and let's say every 500 milliseconds,i am printing out h e l l o,o my name is,a-n-i-a and then we go on to the next,one,well we don't yet well at the moment,we're just printing out,this over again so as long as so now we,need to,actually add i so we've,completed printing out the first one we,now,need to go on to the second one if this,is complete,essentially so we can do that,in here as well so there's,our first if statement now if,j suddenly deeply equals,or just equals the phrases,whatever phrase it's in so the first,phrase let's say,length,then we need,to,increment i by one,so now let's refresh that once again,hello actually i'm just going to make,this a bit shorter because it's a bit,long i'm just going to put hello,hi,uh bye so that's just easier for us to,see what's,happening without me to wait a long time,h-e-l-l-o,dot and then printing out,hi it's fine,we have moved on to the next word which,is what we did this i i,so once that word is complete we add,one to i so that we can move on to the,next one and then,essentially we would need to start,looping,again i'm just going to get rid of that,hopefully you understand what we're,doing a little bit here i'm going to get,rid of the console,logs and instead i'm going to be pushing,uh,to a current phrase so i'm going to put,let,current phrase equal,and i'm actually going to make this uh,an empty,array so we're going to be pushing,letters,into the current phrase,okay so let's go into our first loop,if j is smaller than or equal,to the phrases first length well then,i essentially want to get the current,phrase and i want to push,that letter in there so i'm going to get,the phrase,i'm going to get the first phrase i'm,going to put j in there too so i want to,put the a,the h in so let's do that let's see what,that looks like,oh yeah and then um i'm just gonna,actually put it in the text display too,so we can see it,so i'm gonna get the text display so at,the end of this which time it is,called i'm gonna actually just update,whatever the text should be,in html,i'm gonna get the current phrase,whatever the current phrase is,um each time this loop is initiated,we're gonna print,out what is in the array so there we go,h e l l,and it stops cool i'm actually going to,use,uh join on this so if you know the join,javascript method if we just pass,through an empty string it will,essentially,join up each of these without the comma,so now we get h-e-l-l-o,and great dot great,so we are essentially going into this,first item the array,and then using our nested loop we are,printing out,each character of the first item in our,array,now let's get to deleting each character,of the array until it disappears so we,can start printing the second word,so if j as long as a,j is smaller than or equal to the first,phrases,length you want to keep pushing the,letters into our array,if j suddenly equals the phrase,length well,we don't want to uh move on yet we,actually want to delete,everything in it so i would do so,like so,um i'm gonna make a,variable called end is end and give it,true let is,end equals false to start with and as,soon,as we are the end of our first word is,end is going to turn to true,and that's all we're gonna do for now,okay,and now,actually maybe let's turn this is,deleting okay that probably makes more,sense because it's not the,uh end yet the end would be if we reach,the end,once the whole world is deleted and we,can move on to the next one so is,deleting is true,when we get reached the end of this word,we're going to set is leasing to true,and that's all we're going to do,now if is deleting,and j,is smaller than or equal to phrases,i length,okay so once we each reach the end of,the word here so if j is equal,smaller than or equal to we're going to,add,another letter however as soon as it's,equal we change is deleting,and then this comes into play so i'm,actually going to put this above here,because javascript,reads stuff from up to the bottom so i,want this to execute,up here before it reaches that,and now if it's deleting,and j is smaller than the phrases length,so for example if it's here after it is,hit here,is deleting us on the true and we're,down here well we need to keep,minusing so current phrase instead of,pushing,i'm going to use the javascript method,of pop,to get rid of it so we need to,essentially,get rid of that letter so we're going to,be taking away letters this time,and then we're going to decrease j,and now i just need to make sure that,here because these are very similar we,want this to happen,if is deleting so if it's not deleting,so if it's not deleting and j is smaller,than the phrases length,we want to add a letter however if it is,deleting or is leasing is true,and j is smaller than the first phrases,length,then we want to take away a letter and,of course adjust,j accordingly so if i console log j,here go add a letter,j and then here,console log remove a letter,and refresh the four,five six and then we're removing,okay so this is our loop,in action now we need to know,account for what happens when we finish,the array or where j equals zero,so let's do that here if,j equals zero well then essentially we,want to move on,to the next letter so,i would use this i would say i,plus plus and then i would actually,uh reset the word so if,is and we'd also have to say if is,deleting,and j equals zero well we would,essentially,get the current phrase starting,empty array just in case there's,anything left over,and then move on to the next phrase,in our array i would also put is,deleting,as false because we're no longer,deleting okay we're adding letters again,cool and then,let's see how that works so h-e-l-l-o,dot okay,and then we've moved on to the next one,and so on,and there we go we finished now,we want this a loop over and over again,right so,what happens when we finally reach the,final,phrase in our array so let's write some,logic for that,so if is deleting and j equals zero,but also if suddenly we find the i,equals the phrases,length well then,let's just set i back to zero so it,starts,all over again so let's see that in,action,h l l o dot and then,next one h i dot,and then by dot and then it should start,again with,hello we've done it now i want to show,you one last thing,and that is how to get um,the typewriter essentially going at,different speeds,so let's have a think about this well i,want the,timer so const um,or the timer to type randomly but from a,different range,so i'm going to show you how to do that,so,the sped up range that i want,my typewriter to write at it's gonna be,let's say,anything from 80 to 50,milliseconds so randomly to pick that,randomly i would use,math random so this is just from the,documentation,of mdn i would get the math random,javascript method,and i would multiply it so this is how,you do it,80 minus 50 and this is going to be,the minimal value so,if you want to have a read about that,it's literally,math random javascript,and then the developer mozilla,documentation,and i getting a random number,between two values,so this is what i used i simply got a,max and a min,and added them in that will essentially,give me,this example returns a random number,between the specified values,the return value is no lower than and,may possibly equal,min and is less than or not equal to max,so that's what i used for that,so that's gonna be all sped up and then,let's get a normal,speed so i'm gonna use sped up for when,we're deleting,and then the normal speed um once again,i'm gonna use this,but this time i'm gonna set it maybe,from 300 to 200,so let's add the min here,and then put a time so it comes time,if and let's actually make it really,slow down,when we hit um,the end of the word okay,so so maybe we do need,okay let's let's if it's the end,how do we do this so if i,suddenly equals the phrases length,then we know is end is true,but we only want it to be true for this,one instance so we need to essentially,make it make is and false once again,as soon as we uh call this loop again,so there we go and then let is end,start off as false so that will mean,that,when we are at the end of our word and,only when we're at the end of the word,then is end will be true so if is end,so i'm just gonna write um,a statement here if it is the end then i,want us to linger on that last letter,for 2 000,milliseconds otherwise if we are,deleting,then i want to go at the sped,up time otherwise i just want to go at,normal,speed okay and then instead of passing,with 500 here i'm just going to pass,through the time,so a conditional statement so now,you will see the difference,of the typing and how we linger at the,end,each time okay so i'm just going to put,this,back to hello my name is anya,i love to code,i love to teach,and it's refresh hello,my name is ania,it's actually a full stop here i don't,know why i wanted to stop on the full,stop,so this could be,just going to get rid of these console,logs,okay so let's read through this again,let's go to the first word and then,if it is not deleting um,and j is smaller than the phrases length,we want to,keep pushing into our current phrase,that is,fine next up if,it is deleting and j uh is smaller than,the phrases length that want to take,away,that is fine i'm actually going to,just redisplay the word here just to see,if that makes a difference,and that is it thank you so much for,watching this video,hopefully this has gotten you a bit more,used to writing if statements,uh please do like and subscribe to my,channel if you enjoyed this it would,really mean a lot,and yeah do let me know what you think,of the video in the comments,below thanks very much for watching and,i will see you soon

Congratulation! You bave finally finished reading slate .env file where shopify and believe you bave enougb understending slate .env file where shopify

Come on and read the rest of the article!