Forked from sandrabosk/check-dom-manipulation.html
Last active
February 12, 2022 10:31
-
-
Save ManishPoduval/6d2baf777707d8847f7df9f17614eec8 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
console.log('INDEX.JS connected'); | |
// ****************************** part 1 ****************************** | |
// this function is invoked once the dom is ready. | |
// check the load eventlistener at the bottom | |
function mySubmitEventListener(){ | |
let myForm = document.querySelector('#new-task-form') | |
myForm.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 ****************************** | |
// 0: create a function first. make sure you invoke the function in the load event listener below | |
// 1: Then get the DOM element that represents 'Update gif' button | |
// 2: add to click handler to it | |
// 3: inside the click listener, 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 | |
// EVERYTHING STARTS FROM HERE | |
window.addEventListener('load', () => { | |
mySubmitEventListener() | |
//... your code goes here | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment