1. Workshops
    2. ›
  2. experimental
    3. ›
  3. The Dawgshop

The Dawgshop

Dynamically modify your page with jQuery, dawg. Created by @nguyenbrian, @JevinSidhu, @uditdesai, and @vaibhavyadaram.

Edit on GitHub

The Dawgshop

Thug Life - Tu Pac

Introduction

Links to a live demo and the final code below. This workshop should take around 1 hour.

Live Demo

Final Code

What is this? The Dawgshop™ is an introduction to the basics of JavaScript + jQuery.

We’ll be adding ”, dawg” to the end of whatever you type into an input box — simple, but sweet. You’ll be able to change the word added at your own will.

This slidedeck created by Amy Sorto and modified by Cipher is a great introduction to key concepts. Please take a look through it!

Setting Up Your Files and HTML Document

  1. Make a new folder named, “dawgshop”
  2. Right click on the folder and make a file named index.html
  3. Repeat this step and make 2 more files named style.css and script.js

Formatting Our HTML

Let’s get down to business and get this started!

To have a proper page, we must follow this format

Please do not copy and paste!

<!DOCTYPE html>
<html>
  <head>
    <link href="main.css" rel="stylesheet">
  </head>

  <body>
    <script src="script.js"></script>
  </body>
</html>

Some things to note:

NOTE: Make sure you have closing tags (</script>)

Adding jQuery

As mentioned in the slidedeck, jQuery is a JavaScript library that adds functionality to JavaScript.

JavaScript was created in 1995 — that was 20 years ago (from 2015). Libraries help keep the language powerful and current.

Using the same <script> tag we need to link a jQuery content-delivery network (CDN)

Include the linking of jQuery above your script.js file

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>

Creating the HTML Structure

Our focus for this workshop is the the basics of JavaScript + jQuery. Let’s finish up our HTML first!

Man Typing

Note: All of this must be enclosed by the <body> tag. The closing tag, </body>, should be after your script tags.

Let’s go

Please don’t turn up that hard to our workshop

  1. To enclose our content, we’ll create a <div> tag

This is a container to:

Give the header tag an id of “title”

It should look like this: <h1 id="title">Dawg It Up</h1>

Indent your code!

<input/> is self-enclosed tag for creating an input box. The / is how it closes itself. We’ll be able to type in this box!

Screenshot

Give this input box an id of “text-input”

<input id="text-input"/>

We can give the box “placeholder text” as well!

Add a placeholder attribute (like src is an attribute):

<input id="text-input" placeholder="insert text"/>

<button> is the tag for creating a button

Give this button the text “dawg it”

<button>dawg it</button>

Give this button an id of “go”

<button id="go">dawg it</button>

We’re going to tell the webpage that this is a type-of-something. In this case, it’s a button!

To do this, we’re also going to give this a type attribute.

<div class="dawgit">
  <h1 id="title">Dawg It Up</h1>
  <button type="button" id="go">dawg it</button>
</div>

Look at that beautiful indenting. Is your code indented?

Childish Gambino

  1. Still inside the div, let’s create a space for our dawgified content, let’s create a <p> tag with an id of output.
<p id="output"></p>

<p> stands for paragraph

Whatever text we type into the input box will have “, dawg” added - We will then add the text between the opening and closing

tags - We’ll do this using JavaScript.

Our code should now look like this! (do not copy and paste!):
<body>

    <!-- Our main HTML -->
    <div class="dawgit">
      <h1 id="title">Dawg It Up</h1>
      <input id="text-input" placeholder="insert text">
      <button type="button" id="go">dawg it</button>
      <p id="output"></p>
    </div>

    <!-- JavaScript files, also referred to as simply "scripts" -->
    <script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="script.js"></script>

</body>

CSS

CSS (cascading style sheets) is the styling of our page

We use selectors in CSS that select our HTML tags

We want you to style the page!

If you feel completely lost, no worries! Go back to our older workshops or use those awesome google search skills of yours.

JavaScript + jQuery , dawg

Remember that the variable names in the examples below can be anything you want, but we recommend sticking with ours in order to make the workshop easier to follow!

JavaScript

Let’s open up our JavaScript file now!

Adding a Listener

To begin our JavaScript journey to Thug Land we’ll need to add a listener to listen for a click on our button. 

document.getElementById('go')

This line simply means: Find the element with the the id “go” in the document.

Now we haven’t done anything with this element yet, we want the button to trigger some code when someone presses it so we’ll add .onclick = function() {} to the end of the line

.onclick simply adds a rule to listen for a click on the button and runs whatever is assigned to it.

In this case, = function() {} happens to be assigned to it.

With that known, we can infer that .onclick = function() {} simply means: When a click is registered, run the following function.

To review, so far our code looks like:

document.getElementById('go').onclick = function() {}

which simply says: Find the element with the id of “go” and listen for a click on this element. If there is a registered click, run this function (block of code.)

If you’ve followed along this far, awesome! You’re doing great, we’re almost done. If you’re stuck, turn to a peer!

We a team and we the best.

DJ Khaled

Now that we’ve gotten JavaScript to listen for a click on the button, we need to tell it to do something when it gets a click.

Creating a Variable and Assigning a Value

Every line that we want to execute needs to be inside the curly brackets ( { } ) of function()

Don’t forget to indent it either! Remember, it’ll make it easier to read.

So let’s start with first finding what we need to dawg up.

We’ll be grabbing the value from the input box, and since the id “text-input” is assigned to the box…

That means, whenever someone types into the input box, it will be retrieved with this line of JavaScript!

To do that we need to use:

var inputText = $('#text-input').val();

WHOA HOLD UP DID YOU SEE THAT?????

LOOK AGAIN.

Screenshot

You’re probably wondering what the heck that $ is doing here. Remember the libraries section in the slidedeck?

That is the power of jQuery at work. It took something we would normally use like document.getElementById('text-input') and shortened it to $('#text-input').

Of course, document.getElementById('text-input') would still work if you’d prefer that.

Michael Scott

Note: It finds HTML elements exactly like a CSS Selector would:

Therefore:

var textInput = $('#text-input')

Means the same thing as:

var textInput = document.getElementById('#text-input')

Place .val(); at the end of the line

So to clarify everything, var inputText = $('#text-input').val(); means to take the value of the element text-input and store it into a new variable called inputText.

We’re grabbing the value from the input box, since the id “text-input” is assigned to the box

We’re gonna use this string value to dawg it up later on.

So, we’ve debunked that mystery!

Scooby Doo

document.getElementById('go').onclick = function(){
    var inputText = $('#text-input').val();

  
}

Let’s move on to performing the actual dawging part of the string we got in the last part :basketball:.

Adding the ", Dawg" to the add Variable

We need to store the variable with the words from the input box and then add the word , "dawg" to it

var dawgifiedText = inputText + ", dawg";

This line takes the string we got in the last section (variable inputText) from the input box, adds ", dawg" to the end of it, and then stores it into a new variable named dawgifiedText.

Remember: Whatever is on the right side will be assigned to the left side.

Adding the two strings together is called concatenation. Ya fancy, huh?

What

Alright, now that we’re dawging it up, it’s time to display our up text on the page — fo’shizzle.

Just to make sure, at this point your code should look like this:

document.getElementById('go').onclick = function(){
    var inputText = $('#text-input').val();
    var dawgifiedText = inputText + ", dawg";

}

Displaying the Text

Now we’re going to use: document.getElementById() to find the element on the HTML page by its id.

document.getElementById('output')

This will take care of that job for us

PS: you can use jQuery’s $('') for this as well.

Now we will attach .innerHTML = dawgifiedText; to the end of the line document.getElementById('output').innerHTML

It’s just like $('#text-input').val(); that we used before:

We will now assign the value of dawgifiedText to the <p> tag with the id output:

document.getElementById('output').innerHTML = dawgifiedText;

In plain English, document.getElementById('output').innerHTML = dawgifiedText; means:

Close your curly brackets ( } ), slap a semicolon ( ; ) on the end of it and BAM you’re done!

Final Code:

document.getElementById('go').onclick = function() {
    var inputText = $('#text-input').val();
    var dawgifiedText = inputText + ", dawg";
    document.getElementById('output').innerHTML = dawgifiedText;
};

You are now a JavaScript Legend.

Congratulations! You made your own dawging machine!

Mind Blown

Unless you copy-pasted, then, eh. Maybe only a half-legend.

Your mom thinks you’re special, that’s all that really matters 💯

As a note, you can replace ’, dawg’ with any other text; give it a try!”

Sharing with the Community

Like with previous workshops, let’s set up a link that you can share with others!

  1. Open the terminal by pressing alt + t on the keyboard at the same time. Then type in the following commands:

  2. git add --all

  3. git commit -am "Dawg It Up"

  4. git push origin master

  5. GitHub will now ask you for your username and password.

  6. Go ahead and enter your username and then press the enter key.

  7. Then enter your password and press enter. Note that the characters don’t show up on the screen but rest assured, you are still typing.

  8. Now try to view your game by going to username.github.io/dawgshop

    Make sure to change username to your own username

  9. Post the link to the #shipit on Slack to share your awesome work!

Hacking

Now is the chance to make this project yours! For inspiration, you can look here to see an example of what you can do.

Thanks for completing our workshop ❤

cipher-squad

Move on to the Cringe 101 Workshop afterwards!

How was this workshop?

(your feedback is anonymous + appreciated 💚)

Made something rad?

Share it! 🌟

(posts are editable)

Twitter
Facebook

Want to edit this workshop?

Edit on GitHub