# 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 {% embed url="" %} ## Step 0: Set Up ### Starter Code \[[download](https://drive.google.com/open?id=1OTX_fsJi2EYxBTdzizrsqpj1lamvAuJP)] 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: {% tabs %} {% tab title="index.html" %} {% code title="index.html" %} ```markup Mood Board ``` {% endcode %} {% endtab %} {% tab title="styles.css" %} {% code title="styles.css" %} ```css /* Your css code here */ ``` {% endcode %} {% endtab %} {% tab title="index.js" %} {% code title="index.js" %} ```javascript // Your Code Here ``` {% endcode %} {% endtab %} {% endtabs %} {% hint style="info" %} Ask your **Mood Board Questions**[ **on** **Parthean Community**](https://platform.parthean.com/Home?c=d5788cdc-759d-44f6-bf32-9745611be7f0\&v=97833a84-e45a-4c7c-bbf6-7e9888a2cd71). {% endhint %} ## 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 `
` 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: ```markup

``` 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`: ```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; } ``` {% hint style="info" %} Ask your **Mood Board Questions**[ **on** **Parthean Community**](https://platform.parthean.com/Home?c=d5788cdc-759d-44f6-bf32-9745611be7f0\&v=97833a84-e45a-4c7c-bbf6-7e9888a2cd71). {% endhint %} ## 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: ```javascript $("#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: ```javascript 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: ```javascript 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=""; }); ``` {% hint style="info" %} Ask your **Mood Board Questions**[ **on** **Parthean Community**](https://platform.parthean.com/Home?c=d5788cdc-759d-44f6-bf32-9745611be7f0\&v=97833a84-e45a-4c7c-bbf6-7e9888a2cd71). {% endhint %} ## 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 `` object. Here's how: ```javascript function createNewImage(textInput) { // Create a new img object and call it elem var elem = document.createElement("img"); } ``` In HTML, `img` object look like this: ``. But so far, we've just created an `` object with no attributes. So it looks like this: ``. To add that `src` attribute that we need, we can insert this code: ```javascript function createNewImage(textInput) { var elem = document.createElement("img"); elem.src = textInput; // Give the img object a src attribute } ``` Now, our `` object looks like this: ``. 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 `
` element in our HTML: ```markup
``` Now, let's add some Javascript to insert our images into this `
` object: ```javascript 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: ```css #container { position: relative; height:100%; } img { height: 300px; margin: 3px; } ``` {% hint style="info" %} Ask your **Mood Board Questions**[ **on** **Parthean Community**](https://platform.parthean.com/Home?c=d5788cdc-759d-44f6-bf32-9745611be7f0\&v=97833a84-e45a-4c7c-bbf6-7e9888a2cd71). {% endhint %} ## That's it! You did it! You made a Mood Board application using DOM manipulation. Congrats! {% hint style="success" %} Want to show off your work? [Post your results on Parthean Community](https://platform.parthean.com). {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://parthean.gitbook.io/web-dev-in-10-days/day-4/mood-board-tutorial.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.