Fork and clone this lab, then complete the drills below.
Given the following HTML page:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<title>Fruits</title>
</head>
<body>
<h1>Fruits</h1>
<h2 class="div">Orange</h2>
<div>
<p>Cherry</p>
<p id="h2">Banana</p>
</div>
</body>
</html>What would be the output of the following jQuery commands?
$('h1').text();$('h2').text();$('#h2').text();$('.div').text();$('#div').text();$(div).text();Make your guesses before running the code. You can check your answers by opening http://jsbin.com, copying the HTML into the HTML tab, and copying the jQuery commands into the Console tab.
Given the following HTML page:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<script src="animals-script.js"></script>
<title>SPIRIT ANIMAL</title>
</head>
<body>
<h1>My spirit animal is a:</h1>
<div id="favorite">bunny</div>
</body>
</html>Write JavaScript to do the following:
- Log the contents of the
divto the console. - Change the text content of the
divto be "bear" instead of "bunny" - Change the content of the
divto show this picture of a bear instead of text: http://i.imgur.com/SHxgKJv.png
The HTML file and JavaScript stub file are available in this git repository in the directory animals. Put your JavaScript in animals-script.js and load animals.html to test your answers.
Open the contents of cookies/cookies.html in Chrome. You should see something like:
Modify cookies-script.js and cookies.html to accomplish the following:
- Log a message "Baking a cookie" to the console when the "BAKE a cookie" button is clicked.
- Implement "BAKE a cookie": Insert an image with source cookie.png into the div with id="plate" when the "BAKE a cookie" button is clicked. You should be able to add multiple cookies into the div.
- Implement "EAT ALL the cookies": Remove all the cookies from the pink plate when "EAT ALL the cookies" button is clicked.
- Implement "EAT a cookie": Remove a single cookie from the pink plate when the "EAT a cookie" button is clicked.
Remember the form in the Deli Counter lab? Now you've learned enough to understand the contents of the index.html and lib/app.js file!
Take some time to look through those files again and describe in English how it works to your neighbor: https://github.com/learn-co-students/js-deli-counter-google-cssi-test-2015
Open the contents of todo/todo.html in Chrome. You should see something like:
Modify todo-script.js and todo.html to accomplish the following:
- Log the contents of the text input when the "Add" button is clicked.
- Implement "Add": Insert the contents of the text input at the end of the ol list when the "Add" button is clicked. Clear the contents of the text input when this happens.
- Implement "Submit on enter": Pressing enter while focused on the text box should trigger the same behavior as clicking the "Add" button.
- EXTRA CREDIT Warning: These are both quite tricky due to some jQuery quirks. Only proceed if you're VERY comfortable with everything we've done so far - and comfortable using Google for help!
- Implement "Cross off": Clicking each list item should cross the item off the list by making it appear with a
strikethrough it. - Implement "Delete": Add a "Delete" button next to every item of the list. Clicking this button should remove the item from the list.
Given the following wontwork.html page:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<script src="wontwork-script.js"></script>
<title>Weather Report</title>
</head>
<body>
<h1 id="weather">Rainy :(</h1>
</body>
</html>And the following wontwork-script.js file:
function magicWand() {
$('#weather').text('Sunny!');
}
magicWand();Answer the following questions:
- When you load
wontwork.html, what appears in theh1: "Sunny!" or "Rainy :("? Why? - Modifying only
wontwork-script.js, how do you fix this bug?
The HTML file and JavaScript stub file are available in this git repository in the directory wontwork.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
