deprecated – WATS3020 – Mad Libs Project


hello web developers this is Shawn and I
am here to give you a little introduction to the mad libs assignment
from WATS 3020 so if we take a look at the repo
here on github this is the source repository in the SU web dev account. If
you scroll down here on the readme you will see a description of what we’re
going to do we are going to basically populate a bunch of variables and then
use those variables to fill in the blanks on a mad libs style project and
the point of this is just to get a little bit used to the syntax of
JavaScript and how it feels and then also to give everybody a chance to sort
of work out how they’re going to work on things what editors they’re going to use
and how they’re going to run their code is they work on it so the first thing
that we want to do is fork this repository I’m going to fork it into my
personal account and once this is complete then we will be able to clone
it to our local development environment so I’m going to clone it there I’m going
to jump into my terminal I’m on a Mac you could be on you know windows using
commander or bash on a boon to on Windows or whatever you could be on a
host environment like cloud 9 or code anywhere but I’m going to clone this
into my direct into my temp directory here so get clone and I’m going to paste
in that URL and it’s going to clone for me I’m going to move into that directory
and and then I’m going to open these files in my preferred text editor which
is sublime text so now we have all of the files open
from the source repository and we can get an idea we can review the readme
here if we want to or we can look at it on github we can look at the index.html
this this the mad libs text is Oh captain my captain by Walt Whitman and
and then of course we can go into the main J’s file and we can start filling
in all of these – dues so basically we’re going to use a lot of these prompt
commands just to define all of these different variables so so I’m going to
so if we look at this we can see that we have a prompt we give the user a prompt
they’re going to fill in some text that is going to be stored in the variable
like we’ve named it here and then if we scroll down to the bottom of this file
what we see is that we’ve got a bunch of Story text and we can see that that
variable is being um popped into that text and that’s going to create our
Madlib effect so all we need to do is mark make our way through all of these
variables and honestly this is a lot of typing out these prompts so I’m going to
do this really quickly and put it on a timer apps and then I will come back
once I’ve gotten all these prompts taken care of you now that I finished filling in all the
words the next thing that we have to do is um write the lines of code that will
collect a little number from the user so that’s basically the same thing that we
were doing before with the prompt statement so we’re going to call this
user number as it’s specified we’ll ask them for their lucky number hopefully it
will make it extra good then we need to generate two more numbers called number
two and number three this is going to allow us to practice with a little bit
with our operations so I’ll say let number two equal user number two the
fourth hour and then I’ll say let number three equal user number divided by
number two plus number two divided by 12 now that we’ve populated all these lines
we can we should be able to test our code and run it hopefully that wasn’t
too difficult the point was just to get a little bit used to writing some of
this JavaScript but now that we’ve got this done we can actually run it and so
to run the code I’m actually going to use a command that is a Python command
so I’m going to go back into my repository here on the terminal and I’m
going to run a command that is a Python – M simple HTTP server 8000 now if your
system is configured to run Python 3 by default you’ll need to use a different
command but which is linked in our resources for the week but for now a lot
of systems are still configured to use Python 2x by default and that’s what my
Mac is configured so I’m going to use this and it’s going
to open up it’s going to start a web server that I can then run that that is
running and then I can then hit it on in my web browser in the localhost so I can
test out and see if my code works so I’m going to click back over to the web
browser and pull up a new tab and if I just go to localhost colon 8080 what is
the full name I’m just going to put in a bunch of information I’m not going to
read it out but and so here we have it now you can see
that our Texas has been successfully put in our section numbers are all crazy
with the number that I entered and then the numbers that we calculated we have
King as the honorific this poem becomes about the train instead of the ship
we have conspicuous noted use of whoopee cushions being heard in every stanza so
this has been successful and we’re previewing this in our browser here
running on localhost and the at the port 8000 because we have this HTTP server
running here and so when we want to kill this HTTP server we can just hit ctrl C
and then that stops the HTTP server to refresh this we would see that there’s
no site there anymore now that that HTTP server is not running so what I can do
next is commit my code and this is just like a normal project so I run get
status I’m going to add my changes and then I’m going to push those to
origin and then after I push those to my origin I’m going to I’m going to do a
get check out – be gah – pages so that’s going to make a new branch called
gh-pages and check that out and then I’m going to just do a git push
– you origin gh-pages colon gh-pages now this is the usual command that we use to
push a local branch up to a remote server and to update the reference so
that this local branch will reference the remote branch as it’s um as it’s its
parent branch and and we’re going to call that branch gh-pages in both places
I mean a little typo but I got that fixed now so when I enter there and we
will push that and so that’s great now we can refresh this repository here let
me see that my change set is pushed to the master branch I can look at my
gh-pages branch and I see that that is basically the same as the master branch
which is correct and if I go into settings here and scroll down I can see
that I have my site deployed and it’s going to give me the same um it’s going
to give me the same a question so I’m going to fill those out really really
quickly I’ll put this on time ops so here we go we’ve got it running on
our server we see all of the results as we’re supposed to see them and it’s a
fun little exercise so you can always dress this up with some styling you can
do a lot more things with the JavaScript you have a model here feel free to poke
at it and change things around try out all sorts of new stuff and see just
start getting a feel for how JavaScript works and how the syntax of JavaScript
works especially make sure that you note the way that we’re using the line
Indians the semicolon line Indians we’re using these parentheses to indicate that
we’re calling a function will dive into functions more later but that’s what
that is we have to wrap strings in these quotes
and we’re declaring these variables here using the let statement in this case
technically we could be using the VAR statement but we probably don’t want to
be using the constant statement and we um we should really go back through and
change these comments we don’t need all of these comments now that we’ve written
all of this we can put in one summary comment that here we’re just collecting
data from the user and here we’re manipulating some of that data and then
here we’re putting that data into the page so this has been a really quick
demonstration of how to complete the mad libs assignment from watch 3020 from the
introduction to programming with JavaScript of course hopefully this went
well for you and good luck trying out on your own I
encourage you to do so take care bye

Leave a Reply

Your email address will not be published. Required fields are marked *