All right, guys, it's time for the final project of the module, which is an upgraded and up-styled 1
Band Generator Project. 2
So we're going to be building a dynamic website using EJS and all of the fun features that comes with EJS 3
that we learned about in this module. 4
So this is what we're going to be building a fully-styled and fully-functional Band Name Generator. 5
We've got a button that's going to generate us random names that we can use for our band name or maybe 6
for your startup name, whatever it is you want. 7
And we're going to be practicing some of the things that we learned about EJS, Templating, Partials 8
and all of the different tags that we've seen. 9
Go ahead and download the starting project, unzip it and open it up inside VS Code. 10
As always, we're going to start off by installing the required node modules using npm i 11
and once you've done that you can use Nodemon to run the solution.js so that you can see what 12
it should look like. 13
So let's go to our localhost:3000 with our server up and running using the solution files, you can 14
see that the first thing that happens is we get an h1 that says, "Welcome to the Band Generator." And we've 15
got a button that's going to generate a new random band name each time we click on it. 16
So maybe you want to call your new band, "boiling hearing", or maybe it should be "appropriate job". 17
Actually, these are pretty good names, "moral hamburger". 18
But notice some of the different parts of our website. 19
We've got dynamically generated content being put onto the front end. 20
We've got styling, we've got a footer that is generating dynamic code to figure out the current year 21
that we're in to create the copyright. 22
And if you look inside the index.js, you can see all of the different steps that are required to get 23
this project up and running outlined for you. 24
Follow the steps one by one, Step 1. through to Step 4. 25
And I've got some hints in there which you can choose to ignore or you can use them. 26
But either way, this is the end result that you are looking to achieve. 27
Pause the video now and give this final project a go. 28
All right. 29
I hope you've managed to follow each of the steps. 30
If you got stuck, 31
use some of the hints and try to figure your way through the difficulties. 32
Don't worry if you get stuck, 33
that is the point of programming, 34
as long as you push through and you learn something and you break through a barrier, any sort of barrier, 35
a small barrier, then you're already achieving something. 36
Let's run through the solution together. 37
Step 1. is to make the GET route work. 38
So let's go ahead and res.render our index.js. 39
And every step of the way, 40
let's go ahead and test our result to make sure that it is doing what we want it to do. 41
Let's go to our home page localhost:3000. 42
We've got our h1 showing up. 43
We've got our button showing up and that's pretty much step 1, complete. 44
Step 2. is to make the generate name functionality work so that when we click on the "Generate Name" 45
button, it should hit up this route 46
and then we're going to randomly pick an adjective from this list of adjectives and randomly pick a 47
noun from this list of nouns down here and then send it to index.ejs as a response and then make it show 48
up in the h1. 49
So in order to get our random adjective, we tap in to the array of adjectives, we use Math.random() to 50
generate a random number between 0 and 1. 51
Multiply it by the length of the array and then use Math.floor() in order to round it down to the nearest 52
whole number, 53
and then we use that to pick out an item from that array. 54
So we learned about all of these things in our JavaScript modules. 55
If this is at all confusing, be sure to revise the relevant sections in the JavaScript lessons. 56
We do the same thing with our noun and then we're ready to send it over using re.render. 57
So we're again rendering the index.ejs page, but this time we're passing in some local data. 58
The data that we want to add is an adjective and that is going to be our const randomAdj, and then 59
we're going to add a noun over as well, which is our randomNoun. 60
Now in our index.ejs file, we can pick up these local variables under the name, adjective and noun. 61
Let's go over to our views folder, find our index.ejs and complete the other part of step 2, which 62
is to actually show our h1 as the adjective and noun. 63
So we're going to need some EJS tags and we're going to need the one where we have an output showing to 64
show our adjective and then after a space show our noun. 65
So that way it's always adjective noun. 66
So be like shining star, 67
etcetera. 68
Now let's just check to make sure this actually works. 69
Let's hit Save, go back, click on "Generate Name," 70
we're getting these adjectives and nouns coming through. 71
The other part of step two is we want to show the adjective and noun 72
if the button is clicked and we actually get an adjective and noun sent over. 73
But when we first load up our website to our home page, we only want it to show the default h1. 74
Now, at the moment this doesn't work because we're trying to tap into a variable called adjective and 75
one called noun that does not yet exist because it hasn't been sent over from the POST route. 76
We've seen this previously, 77
what we need to do is to add an if-statement. 78
Let's go ahead and write our if-statement as if we were just writing normal JavaScript, even though 79
we're inside an EJS file, which is basically HTML, we want to say if locals.adjective exists and 80
locals.noun exists, then we're going to go ahead and render this h1, 81
but otherwise we're going to render the default h1. 82
And for all of this JavaScript to actually work, we of course need to add the relevant EJS tags to wrap 83
around the JavaScript. And the syntax highlighting in our VS code should be good enough for us to see 84
all the bits that we need to add this. 85
So we got rid of all the errors, we've got our JavaScript in, and now let's hit Save and try it out 86
again. 87
Let's Refresh our home page. 88
We get the default h1, click on the button, we get the h1 with the adjective and noun. 89
So we're now ready for Step 3. 90
Step 3 is to make our styling show up. 91
So we've got all of these CSS code in our main.css, inside a folder called styles, inside a folder 92
called public. 93
Firstly, the hint is CSS files are static files. 94
So that was my hint for you to remember 95
we need to use the middleware, which is express.static 96
and then we can add in the location of our static files, which is basically in the path 97
of the public folder. 98
Now the next step is to add in the CSS. In our header.ejs where we have the head tag. 99
That's where we usually have our link to the style sheet. 100
The style sheet is going to be at a path that's relative to where we specified our static folder, 101
so in the public folder. So starting from the public folder, in order to navigate to main.css, 102
we have to go to styles/main.css. And now we need to inject this header into the index.ejs 103
right here. 104
We're going to use that special EJS tag, angle bracket, percentage, minus, "include" and then it's the path to 105
the header file, which is relative to the views folder. 106
So it's partials/header.ejs. 107
Let's close off the bracket and let's make sure we add our footer as well. 108
So just change this to footer, hit Save. 109
Let's go back to our home page and go to the root localhost:3000. 110
We can see our styling being applied both when we go to the root and also when we submit the button 111
and generate our band names. 112
Now the last thing we need to fix is this part that comes from the footer. 113
So if we take a look at step 4, it's to add a dynamic year to the footer. 114
Normally you'll see copyright, copyright symbol and then the year, so it'll be 2000 and something, 115
right? 116
But you'll see a lot of people who write this and I am also lazy in that way. 117
Sometimes you just put the current year and then two years past and it looks kind of silly. 118
So a really simple way is of course to use JavaScript to get the actual current year and then to insert 119
it into the footer. 120
Let's take a look at the footer.ejs 121
This is where our step 4 is, and we basically want to replace this 200X with a dynamic year. 122
If you don't know how to get the current year using JavaScript, then we can always Google and StackOverflow 123
tells us this is how we do it. 124
new Date().getFullYear(). 125
We've already used new Date() many times to generate the current date and then by using the getFullYear() 126
method, we can pull out the current year. 127
Essentially, this line of code is what we need to insert into our footer. 128
I wanted you to remember that in order to generate JavaScript code that can have an output, we use 129
this set of EJS tags and then it's just a case of adding the new Date.getFullYear and let's hit Save. 130
And let's go back to our home page and Refresh the homepage and you can see the current year show up 131
at the bottom. 132
There you have it. 133
That's the whole project completed. 134
It looks pretty cool and it uses all the things that you learned in this module and hopefully, you were 135
able to revise and practice some of the things you learned by building this awesome website. 136
And if you come up with a genius idea based on your own website, be sure to share it in the Q&A and 137
let me know what your band, "easy-going gerbil" or "silky oak" is all about. 138
Maybe linked to your SoundCloud, 139
I'd love to check it out.