We're celebrating a new year and new skills, by offering a 21% discount off all courses and collections at checkout! ✨
September 20th 2017
This week, freelance copywriter Joe Coleman launched his new site called Get Coleman. We talk about how it was made and how to make your own
- Hey everyone!I just wanted to talk today about Joe Coleman's website.So, the idea is that you have this little slider,at the bottom of the page,and as you slide from left to right,the copy changes.So I just wanted to talk about howyou can make that very very quickly.So I've set up a few things on my project already.I've set up a div tag, a class phrase,and I set my first phrase in there, just my name.Now I've given it some style already, kinda pre written.Font family's Helvetica, font size, it's quite large.Blank background, color is white.I've also set div dot phrase, div with class of phrase,into the middle of the page, I'm using a position absolute,and then moving it back upon itself using transfore.I've also placed the input at the bottom of the page,and kinda positioned it in the right place.Now the input we haven't added to our site yet,so let's add that first of all.So I'm gonna add in my index dot html, an input field.Now input fields can take a lot of different typesthe default is just a text area.But we don't want a text area,what we want to do is a set phrase of a different type.Now this type that we're gonna useis quite a new one, that's called range.So now this will turn into this kind of slider instead.Now this by default goes from zero to a hundred.Now we don't want it going from zero to a hundred,we want it to go to set phrases.Now, in my copy dot JS, which I'm gonna talk about exacting,we've got seven different phrases.We want it to go from not zero to seven, but zero to six.So zero, one, two, three, four, five, six.
It's seven in total.Now computers usually count from zero,so we want to kinda match.We're gonna start at zero,go to a maximum of six, not seven.So, on my input type, what I want to addis a maximum value of six.
So now, on my input, I can go from,zero, one, two, three, four, five, and six.
Now if I just refresh my type,this will go in the middle to begin with.Now we want to start on the left hand side at zero.So we're just gonna a value equal to zero, to start itat all times, whenever we load page on the left hand side.So if I refresh my page now,it's always at that left hand side to begin with.Now what do I want to do next?When I move this input type, I want to changethis copy to be the right phrase.
So, I've already added two files,I've added my jquery dot JS,which I've downloaded from jquery dot com.I put in on my desktop as jquery dot JS,just dragged into my project.And then I've made my own copy dot JS file.This currently contains one thing,it's a variable called phrases, which is an array,which is a list, of strings.All the phrases that we want.So, we started with Rik, then Rik Lomas,then Rik Lomas is a teacher, and so on up to six,well it's actually seven, but zero to six.Now what we want to do is, we want to run some code.We want to say, "well, depending on what my input is,change to be the phrase in this list."So we need to add both jquery and copy dot JS to our inputs,and so our index dot html, come up first of all.So I'm just going to add two script tags,the first one is gonna be jquery dot JS,'cuz I need to have jquery loadedbefore I can anything with it.Next, I'm going to add my file, which is called copy dot JS.So I've added jquery 'cuz I need it first and then my file,which I called copy dot JS, it could be calledphrase dot JS, it doesn't really matter.Now what you want to do, whenever I move this inputand change it, I want to run a function.The function that I runis going to pick one of these phrases,depending on the input, and change the div tag.So what you would do,is select the input first of all, the jquery.I want to run something on in events.Now, there's also different kinds of events we can use,this one has a special one just for sliders, called input.So whenever we touch this, not when we let go,but when we touch itit will run this function every single time.We want to run something when we move our slider.Now, I value the function, just to make ita little bit easier to read, oh, my curly brackets out.Now, what do I want to do?Well, I need to first of all,to find the number this slider is on.So to do that, I'm just gonna give ourselvesa little bit more room.I will make a new variable called, value.Now this is going to be equal to, in jquery,the input that we talked about currently, this.Now this, it's not a, it is a special word,there's no quotes around it because it's a special word.We wanna find this input's value.Now, val is just jquery but then we can use eventjust to get the value out of that.Next, we know this value's in between zero and six.But what we want to do is get the correct phrasebased on this value.So I'm going to make one more variable called, phrase.Not phrases, just phrase.This is going to be equal tosomething in this phrases list.Which one do you want to pick?Well it depends on this value.When I find something in phrases,and then select it from this list using square brackets,which value, the new value is gonna be.Now we're not doing anything with this phrase just yet.What do you want to do?Well, I wanna replace this text, into here.
I wanna move it into this div class phrase.So my copy dot JS, the next line I'm gonna do,is I'm gonna select this div dot phrase,and I'm gonna change the html of thisto be this new variable called phrase.So when I move this around the page now,this will change, depending on which input I'm at.
Now I could have lots of different kind of phrases.On the Joe Coleman website,obviously he's written a lot of copy,he's obviously a very good copy writer.Now there's other things we could add into this page,for instance, when we go to this far end,it adds lots of images in that as well.
Or we'd use one more thing that's here,in each statement to say, if this value is a certain number,show this image or hide this image.So that's all we need to do to make Joe Coleman's website.It's fairly straight forward.