sandrabosk/check-dom-manipulation.html

## check-dom-manipulation.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOM - manipulation</title>
  </head>
  <body>
    <!-- part 1 -->
    <h1>To Do List</h1>

    <form action="#" id="new-task-form">
      <label for="task-input"> Task: </label>
      <input type="text" name="task" id="task-input" />

      <label for="owner-input">Owner:</label>
      <input type="text" name="owner" id="owner-input" />
      <button class="btn-submit">Submit</button>
    </form>

    <div>
      <ul id="tasks-list"></ul>
    </div>

    <!-- part 2 -->
    <div>
      <iframe
        class="three-minions"
        src="https://giphy.com/embed/MOWPkhRAUbR7i"
        width="480"
        height="217"
        frameborder="0"
        class="giphy-embed"
        allowfullscreen
      ></iframe>
      </p>
    </div>
    <button id="update-button">Update gif</button>
    <script src="index.js"></script>
  </body>
</html>

## index.js
console.log('INDEX.JS connected');

// ****************************** part 1 ******************************

document.querySelector('#new-task-form').addEventListener('submit', e => {
  e.preventDefault();

  // 1: get the input from user related to the new task and the owner of the task

  // 2: append it to the DOM

  // 3: clear the form after the submission

  // ... your code here

});

// ****************************** part 2 ******************************

// 1: get the DOM element that represents 'Update gif' button
// 2: add to click handler to it
// 3: get the DOM element that represents 'iframe tag'
// 4. change the attribute source to point to 'https://giphy.com/embed/1MTLxzwvOnvmE' after clicking on the 'Update gif' button

// 5: bonus: make it so every time you  click on the 'Update gif' button, a different gif (one of these two) appears
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>DOM - manipulation</title>
	</head>
	<body>
	<!-- part 1 -->
	<h1>To Do List</h1>

	<form action="#" id="new-task-form">
	<label for="task-input"> Task: </label>
	<input type="text" name="task" id="task-input" />

	<label for="owner-input">Owner:</label>
	<input type="text" name="owner" id="owner-input" />
	<button class="btn-submit">Submit</button>
	</form>

	<div>
	<ul id="tasks-list"></ul>
	</div>

	<!-- part 2 -->
	<div>
	<iframe
	class="three-minions"
	src="https://giphy.com/embed/MOWPkhRAUbR7i"
	width="480"
	height="217"
	frameborder="0"
	class="giphy-embed"
	allowfullscreen
	></iframe>
	</p>
	</div>
	<button id="update-button">Update gif</button>
	<script src="index.js"></script>
	</body>
	</html>
	console.log('INDEX.JS connected');

	// **************************** part 1 ****************************

	document.querySelector('#new-task-form').addEventListener('submit', e => {
	e.preventDefault();

	// 1: get the input from user related to the new task and the owner of the task

	// 2: append it to the DOM

	// 3: clear the form after the submission

	// ... your code here

	});

	// **************************** part 2 ****************************

	// 1: get the DOM element that represents 'Update gif' button
	// 2: add to click handler to it
	// 3: get the DOM element that represents 'iframe tag'
	// 4. change the attribute source to point to 'https://giphy.com/embed/1MTLxzwvOnvmE' after clicking on the 'Update gif' button

	// 5: bonus: make it so every time you click on the 'Update gif' button, a different gif (one of these two) appears