Mood Board Tutorial

Let's build a Todo-List!

Learning Objectives:

  • On-Submit Events

  • On-Click Events

  • DOM Element Creation

  • DOM Element Insertion

  • DOM Element Removal

Step 0: Set Up

Starter Code [download]

Create a folder called day_4 and create three files inside of it:

day_4

index.html

styles.css

index.js

Now, copy this paste this code into them:

index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Mood Board</title>

        <link href="styles.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        
        <script
          src="https://code.jquery.com/jquery-3.4.1.min.js"
          integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
          crossorigin="anonymous"></script>
        <script src="index.js"></script>
    </body>
</html>

Ask your Mood Board Questions on Parthean Community.

Step 1: Adding the Form

In our Mood Board, we have a form. Specifically, the form is at the top of the screen and it's where we input our image URLs.

To add a form, we use a <form> tag in HTML. Within forms, too, we can add specific inputs. These inputs range from simple text inputs, to dropdown inputs, checkboxes, and more. For our purposes, we just need to be able to input a URL and then submit it.

So within the body tag, insert the following code:

<div class="form_container"> <!-- We'll use this to style our form in css -->
    <form id="form_id"> <!-- This is our form. We'll use this ID in Javascript -->
        <input placeholder="Image URL..." type="text" id="link_input">
        <br> <!-- This is a breakline, used to put our text input and button on two separate lines -->
        <input type="submit">
    </form>
</div>

Go ahead and refresh your page -- what do you see?

If you want to make the form look a bit better, you can add the following css code to styles.css:

body {
    margin: 0px;
}

.form_container {
    width: 100%;
    margin: 0px;
    padding: 40px 0px;
    align-content: center;
    border-bottom: 1px solid lightgrey;
}

input[type=text] {
  width: 60%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-left: 20%;
}

input[type=submit] {
  width: 40%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 30%;
}

input[type=submit]:hover {
  background-color: #45a049;
}

Ask your Mood Board Questions on Parthean Community.

Step 2: Form Submission

Now, we have to accept our form submission -- this is where Javascript comes in.

In order to accept inputs from an HTML form, we have to create an event-listener. This is Javascript code that listens for specific events. In this case, the event will be a form submission. Insert the following code into your index.js file:

$("#form_id").submit(function(e) {
  e.preventDefault(); // Try removing this code to see what happens
  
  // More code to go here
});

This code is our event listener. So any time our form (with an id of #form_id ) is submitted, we'll run the code between the brackets.

Next, we need to read what the user typed into the text input. To do so, paste the following code into your file:

var text_input = document.getElementById('link_input'); // Get the HTML element
alert(text_input.value) // Read that HTML Element's value (and alert it to for now)
text_input.value=""; // Clear the input so the user can input more URLs

Now, we can read our user's input, but we're just alerting the url. Instead, we want to be using that url to insert an image into the screen. So let's call another function, called createNewImage to do so. Here's what your code should look like now:

function createNewImage(textInput) {
  // Your Code Here
}


$("#form_id").submit(function(e) {
    e.preventDefault();

  var text_input = document.getElementById('link_input');
  createNewImage(text_input.value);
  text_input.value="";
});

Ask your Mood Board Questions on Parthean Community.

Step 3: Inserting Images to the Webpage

Now that we have our URLs, we need to insert images into the page.

To do so, we first want to create a new <img> object. Here's how:

function createNewImage(textInput) {
  // Create a new img object and call it elem
  var elem = document.createElement("img");
}

In HTML, img object look like this: <img src="URL_TO_THE_IMAGE">. But so far, we've just created an <img> object with no attributes. So it looks like this: <img>.

To add that src attribute that we need, we can insert this code:

function createNewImage(textInput) {
  var elem = document.createElement("img");
  elem.src = textInput; // Give the img object a src attribute
}

Now, our <img> object looks like this: <img src="URL_TO_THE_IMAGE">. Great! But we need to insert it onto the page.

When we want to insert our images onto the page, we have to have a specific location for them to go. As such, we must add the following <div> element in our HTML:

<div id="container">
    <!-- In Javascript, you'll be inserting
         the images here -->
</div>

Now, let's add some Javascript to insert our images into this <div> object:

function createNewImage(textInput) {
  var elem = document.createElement("img");
  elem.src = textInput;
  
  // We first get the "container" div element
  // Then we append a child (our image) to it!
  document.getElementById("container").appendChild(elem);
}

If you notice, the images look all wonky. to fix that, add the following to your css code:

#container {
    position: relative;
    height:100%;
}

img {
    height: 300px;
    margin: 3px;
}

Ask your Mood Board Questions on Parthean Community.

That's it!

You did it! You made a Mood Board application using DOM manipulation. Congrats!

Want to show off your work? Post your results on Parthean Community.

PreviousDay 4NextDay 5

Last updated