Setup the following files.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Nashville Software School</title>
</head>
<body>
<article id="powerList">
<section id="flight" class="power disabled">
Flight
</section>
<section id="mindreading" class="power disabled">
Mind Reading
</section>
<section id="xray" class="power disabled">
X-ray Vision
</section>
</article>
<button id="activate-flight">Activate Flight</button>
<button id="activate-mindreading">Activate Mind Reading</button>
<button id="activate-xray">Active X-ray Vision</button>
<button id="activate-all">Active All Powers</button>
<button id="deactivate-all">Deactive All Powers</button>
<script src="powers.js"></script>
</body>
</html>powers.js
/*
In the following code, replace `event` with the correct string to handle
a click event on the button. Then write the function that has instructions
for activating the corresponding power. The function should...
1. Remove the `disabled` class
2. Add the `enabled` class
*/
document.querySelector("#activate-flight").addEventListener(event, handlerFunction)
/*
Now write two more event handlers that activate the other two powers
when the corresponding buttons are clicked.
*/
/*
Write two more event handlers for activating and deactivating all powers
when the corresponding buttons are clicked. You will need to use the
`document.querySelectorAll()` method for these.
*/Open this simple drag & drop JSFiddle project and copy all of the code into a local project in your workspace directory.
The user should be able to drag one of the middle cards into either the top box, or the bottom box. However, there's a problem with the way the code currently works. There's also a couple changes you need to make.
- If you drag one of the cards into the top/bottom box, and then drag another card into the first one, you get a nested card. You need to prevent this from happening.
- The user should only be able to drag one card into either box. Use the childNodes property to ensure that, if a card is already in the box, another can't be added.
- The user should be able to move a card from the top/bottom box back to the middle.
These commands are a helpful quick start. You may choose to ignore them completely and create your own directory structure. If you choose to use this recommendation, just copy the commands below and paste. It doesn't matter what directory you are currently in.
mkdir -p ~/workspace/exercises/javascript/cards && cd $_
touch index.html
touch cards.js
touch cards.css
-
Create an HTML page that contains a text area and a button labeled Create.
-
When the user enters in text into the text area and then clicks the create button, use a factory function that creates a new DOM component that has a border, and includes it's own delete button.
-
Insert that new component into the DOM.
-
When the user clicks the Delete button, the containing card, and no other cards, should then be removed from the DOM. Not just made invisible, actually removed from the DOM.
Pro tip: The cards id attribute, and the button's id attribute should share some common value. Then, when the button is clicked, find the corresponding parent DOM component. Remember the split() method on a string? That will be helpful.
<article class="card" id="card--1">
<div>Hey, I entered some text</div>
<div>
<button id="delete--1">Delete This Card</button>
</div>
</article>
<article class="card" id="card--2">
<div>Hey, I entered some text</div>
<div>
<button id="delete--2">Delete This Card</button>
</div>
</article>