-
Notifications
You must be signed in to change notification settings - Fork 0
/
DOM-assessment-review.html
92 lines (82 loc) · 3.33 KB
/
DOM-assessment-review.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Assessment 3 Review</title>
<style>
h1 {
color: magenta;
}
.runner {
width: 20%;
height: 10%;
background-color: green;
}
body {
background-size: cover;
}
</style>
</head>
<body>
<h1>I don't like this color</h1>
<div class="runner">
<h3>You'll never catch me</h3>
</div>
<input type="text" id="input">
<button id="add-btn">Click to add</button>
<ul id="add-to-me">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<p id="thundercats"><span>Thunder</span> <span>Thunder</span> <span>Thundercats</span> <span>HOOOOOOOO!!!!!!</span></p>
<button id="get-hype">Get Hype</button>
</body>
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
<!-- <script src="assessment-three-review.js"></script> -->
<script>
"use strict";
//Write a function that changes the text color of the <h1> when the <h1> is clicked
//Hard mode: Change the text color to either Blue, Yellow or Red if the b, y or r keys are pressed
$('h1').click(function () {
$(this).css('color', 'blue');
});
//Write a function that causes the runner div to move to the right side of the screen when the mouse moves over it
//Hard mode: Have the div go to the other side of the screen regardless of where it is.
$('.runner').mouseover(function () {
$(this).css('margin-left', 'auto');
});
//Write a function to take the value from the input and append the value onto the ul with the id of add-to-me.
//Hard mode: when you click on an li move it from it's current location to the top of the ul
$('#add-btn').click(function () {
var userInput = $('#input').val();
$('#add-to-me').append('<li>' + userInput + '</li>');
});
// document.getElementById('add-btn').onclick = function () {
// var userInput = document.getElementById('input').value;
// var newLi = document.createElement('li');
// newLi.textContent = userInput;
//
// document.getElementById('add-to-me').appendChild(newLi);
// document.getElementById('input').value = "";
// };
//Write a function that changes the font of all text to comic sans 5 seconds after the page loads
//Hard mode: Change the background to this image after 10 seconds. https://images.pexels.com/photos/2740956/pexels-photo-2740956.jpeg?cs=srgb&dl=black-and-white-laptop-2740956.jpg&fm=jpg
setTimeout(function () {
$('*').css('font-family', 'Comic Sans MS')
}, 5000);
setTimeout(function () {
$('body').css('background-image', 'url("https://images.pexels.com/photos/2740956/pexels-photo-2740956.jpeg?cs=srgb&dl=black-and-white-laptop-2740956.jpg&fm=jpg")')
}, 10000);
//Write a function that bolds the words in the paragraph element with the id of thundercats when the get hype button is pressed
//Hard mode: Bold one word every time the button is pressed
// $('#get-hype').click(function() {
// $('#thundercats').css('font-weight', 'bold');
// });
$('#get-hype').click(function () {
var totalSpans = $('#thundercats span').length;
}
});
</script>
</html>