[Rik] Last week Kanye West launched his ownalbum art cover generator for his new album "Ye"called "Yenerator" or "Yenerator"I don't really know how to say it cause I'm old.But let's have a look at how it works.Basically you get this image and you can just typesomething like "Superhi was here"and then you can save it and put it anywhere you want.Now in the past I actually made two unofficialalbum art generators.The first one was for Drake's album cover"If You're Reading This It's Too Late."We called it "Ifyouretypingthisitstoolate.com"and all you need to do is just start typing"Superhi was here"and again I did an unofficial canny onecalled thelifeofpab.lol"Superhi was here" againapologies for the domain nameit was not a great editwe made it very very quickly.So I made these two with me and my friend Simon Whybray,both our names are down in the corner down there,and both of them had several million hits.We even got covered on places like MTVso there's our two names Rick and Simonand places like Complex as well for both of them.Both of them were made very very very very quicklyand I'm gonna show you in the next two videos.First of all I'm gonna talk about how we made this onesecond one we'll talk about this,and then we'll talk about how this one was made too.

So let's think about how this works.When I type on the page suddenly our letters appearas the kind of artwork.So if I type Superhi was herebasically what we're doing is we're havingsome kind of text is appearing on the page.Now there's a few ways to do thisthere's no one right way as with anythingin digital designthere's not always one right way.So let's think about how we do this.Now I've set up a very simple project to begin with.I've just got a div tag with the words"start typing" in there.In my STYLE.CSS I've got some of this setup already doneso basically come up with the right font sizeand line height.And the font I'll talk about why it's lower caseand breakword if we just type too many lettersso it doesn't kind of break the site.And essentially what we've done is we've got a font.Simon basically designed this fontand he kind of wrote it out and it looks like this.Now all I'm gonna do is put this into my project.Now this is a TTFand we could use a different type of fontit could be OTFbut basically I've got this in my project.Now the first thing I need to dois to actually add this to my CSS,and to do that what we're gonna do is we're just gonna saywell this isn't a default font,this is actually a font faceand what the name of this font face is.Well this one is called Drake Neuewhich is the name that Simon gave itand the source is just what we've called it down thereit's a URL and it's going to be "drakeneue.ttf".Now we haven't used this in the project yetbecause we're still using arial across the whole pageso I'm just gonna change arial to be drake neue.Now basically it's the same name as this,if I call this something else I just need toreplace it there.So what I've got now is just starttyping in the correct letters.What I need to do next is actually make things do thingson type.Now the way that I'm gonna do this is actuallyin a slightly different way than the way it currently works.The way it currently works is this is just a text areathat types things out.Now what I'm actually gonna do is replace the divthat's currently there in our index.htmland instead actually just have a hidden type areathat's across the whole page,so when I click anywhere on the pagewhen I start typing this div this text updates.So to do that I'm gonna do two things in my index.htmlThe first one is I'm gonna add in a text area.Now I'm not gonna do anything else in here for nowbut I could type in like "start typing" as well.Now what this will do on my page is I'll have"start typing" hereand further down the page I've got "Start typing".Now the reason why the "s" isn't appearingis because it's not in the font.Simon again made this all lower caseso I'm just gonna change that to "start typing"with a lower case.So if I change this at the momentI want this thing to change.Now I can't do this using just CSS.I need some javascript to do this.So what I'm gonna do is I'm gonna also add script.Now I'm gonna call this one "drake.js"cause obviously it's to do with Drake,and I need to add this to my index.htmlso in my script I'm gonna add in drake.jsNow what I do want to do is whenever I change anythingin my text area I want it to update up here.Now in my code I've just got my div margin button hereso I'm just gonna reduce this down to 100so I can see both at the same time.So I've got "start typing" and then "start typing".Now if I do start typing in hereit doesn't update.Now this is a thing I want to dowhenever I change this I want this div tag to updatein the same way.So in my javascript the first thing I want to dois listen to my text area.So on my page on my documentI'm gonna do a querySelector.

Now I'm not gonna do a querySelector "all"there's only one text area on this page.So I'm gonna look out for one text area.Now I could add a class to this such as "drake"if there was a class on the text area,but for now I'm just gonna keep it very very basic.And what I'm gonna do is add an event listener.What do I want to listen out for?Well I want to listen out for a key up eventso what I want to do is whenever I press the keyand lift with my finger off the keyboardthat's when I want to update things.So I'm gonna do "key up".What do I want to do when I've done the key up?Well comma, I'm gonna run a function.So I'm gonna do function,round brackets,curly brackets.Now I don't need any kind of event in here.I'm not going to listen to where it is on the pageor what key's been typed.All I want to do is replace what's been writtenin the text area into the div.So I'm just gonna open these curly brackets upand what I need to do first of all is actually find that divso I'm gonna do "document.querySelector"and what do I want to select?Well in this case there's only one div on the pageso I'm gonna select that.Now what I want to change is the content of this.Just the div from the text area.So I'm gonna do".innerHTML"and this is now gonna change the HTML to something else.So I'm just gonna do let's say "test123" for now.If I go back to the page,currently it will say "start typing"and as soon as I press a keyit will change to "TEST123".So I've typed "R"but it doesn't say that up here.It just says "TEST123" and if I type any more keysit still says the same thing.How do I do this?Well we want to find this text area's content.Now it's not in the HTML.What we actually want to find is the value of this.Because it's a kind of input field.So when we've done a key up,we want to find this.This is a special word in javascript.It means the thing that we're currently talking aboutin this function.We're talking about the text areawhat do you want to find in that text area?The ".value".So now if I go back to the pageand I start typing "Superhi was here"we get the same thing and again if I deletewe get all of that back.Now if I do go back to nothing at allcurrently it's an empty div.So maybe I want to do some test.And the way that I do some test is say well,if this value is something completely different like,if it's empty for instance,what do you want to do?So to do that what I'm gonna dois actually gonna separate this out into two things.I'm gonna get rid of this.We'll put it back in in a minute.But what I'm gonna do is save this divto an element.And I'm gonna save it to a constant called "div".So "div" is just equals to somewhere on the pagewe're selecting the div tag.Then what I want to do is do a check.So if this value,again this isn't the div,it's to do with the text area,is not empty,what do you want to do?Well then we want to change the innerHTMLto be equal to "this.value".Bascially what we had to begin with.But if it isn't which is it's empty,then we want to do something else.We want to do div.innerHTML = "start typing".

So what we're doing here is basically if there's nothingin this text area at allalways put "start typing" to make it look likeit's doing something.So now if I do "superhi" and then deleteand as soon as I delete the last letterit will then say "start typing" again.Now one thing I want to do is actuallyget rid of this text area.I want this to be anywhere on the pageso if I click on the page and start typingI can see it.Now we just want to alter the look and feel of this.So we need to go back to our start sheet.So the bottom of my start sheet,I'm gonna add some space down here so we can see.I'm just gonna do "textarea."I want this text area to be everywhere on the page.So I'm gonna make it "position is fixed"and I'm gonna keep it in the top left corner,and I'm gonna make it 100% width and 100% heightso it's everywhere on the page.And now you can see that's the boxyou can't see through this.So basically I can't see the underlying div.So how do I make it show the underlying div?Basically I make it see-through.And to do that I'm gonna add capacity is not one but zero.So now if I go to the page and I click anywhereI can start typing.I can say superhiagain there's already something in there,"superhi was here".

So again if I refresh that page I can just click refreshin that corner.At the moment if I click and type extrait's because we've already got "start typing" in there.That's because in my index.HTMLthere's already some content in there.So I just get rid of it nowand go back to the page.As soon as I start typing I've got my Drake generator.

With the lifeofpab.lolwe're actually using a lot more div tags in hereso when I type all of them do it at the same time.And we're basically using the same kind of conceptas the last one.Now I've kind of mocked up a quick one in here.What we're doing here is basically having lots of divsthat are kind of like placed in sectionsso there's basically a section tag with lots of divsinside it.They're using absolute positioning to put them in place.Now I won't talk about it too much but what I'll talk aboutis what we have currently which is five divs.And what we have here is one two three four fivewe've got that text area again from the last oneand this same script called kanye.js this timeinstead of Drake.But we've got the same content in here.Now if I do start typing on the pagewhat'll happen is we're only doing it for the first div,and that's because in my codewe're finding just the one div.Now obviously what we want to do is find each individual divand change it on the page.So how do we update our content?Now what we want to dois instead of it being the querySelector,because that's just the first one,we're gonna change this one to the querySelectorAll.Now this isn't now a div.It's a single div.It's actually multiple so I'm gonna change this to "divs"with an "s" on the end so it's plural.But this only affects div at the moment,so how do we get around that?So what we want to do is loop over each individual divso that it's not just the first one,it's all of them.So to do that what I'm gonna have is for each of the divsso I'm gonna pick the divs and then for each of thosewhat I'm gonna do is pick the individual divfor each individual one and thendo something to it.So I'm gonna open that little bit outand what I'm gonna do is I'm gonna move this code,this "if" and "else" statement into here.And again I'm just gonna format it so that it looksa little bit more readable so it's just a bit more indentedthere we go.So what I'm doing here is in the text areawhenever I'm listening to a key upwhich is when I press the letter,find all of the divs on the page,and then for each individual divcheck the value of the text area and if it's thatmake it the value for each individual one.So now if I go back to the page and start typing,we can see that updates in the same way.So all I've done there is I've just changed what it wasfrom 1 to a loop over all of those divs instead.

So hopefully now the yenerator doesn't look too complex.It's quite similar to the Drake one.Now with the font that we're actually usingI actually found through a product you can actually see hereTim Bowman and Yung Jakebasically made this together.It's seems like it's an official oneand they used Calligrapher to actually make that fontand I've actually just downloaded it from the font.It's from the site yungjake.ttfand I'll just talk about how I've quickly just made this.So again this is very similar codeto what we had in the first project.It's text area with the div,and we're just changing the value to the theme that we want.Now in that index.HTML I've just put the div in the section.Now the section is gonna be the imageand the div is gonna be the text itselfand we're moving the div into the center.So what I have currently is this is the whole section,and this middle bit is just the div,and in my CSS again this should look fairly similar.At the top of the page I've got my font facewith Yung Jake cause he wrote the font.Font family is used thereand that's font size and font weight and line height.The text color is there and then what I'm doing is justmoving the div into the middle of this whole section,just giving the div a max width and text line centerif it goes on multiple lines and just like beforemaking the text area see-through.So we've just made something again"Superhi was here" and this is looking good.So that's all you need to do to make a very very simplealbum cover generator.It can get you multiple of millions of views.It's something that our two unofficial ones gotand lots of press coverageand all in only a few lines of code.

If you liked this video you'd really love ourFoundation HTML, CSS, and Javascript course.