Skip to content

Commit 9ea45a3

Browse files
jzntamjzntam
committed
Add Other Exercise Solutions for Day 7 - jQuery
1 parent b33cf8c commit 9ea45a3

File tree

4 files changed

+121
-0
lines changed

4 files changed

+121
-0
lines changed

‎day_7/other_exercises/jquery_drillz.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
$(document).ready(function() {
2+
// Toggle Class
3+
$("input[type='submit']").on("click", function() {
4+
$(this).toggleClass("btn-primary btn-danger");
5+
})
6+
7+
// Key Logger
8+
$("input[name='name']").keyup(function() {
9+
var textInput = $(this).val();
10+
11+
$("#message").text(textInput)
12+
});
13+
14+
// Personal Info
15+
$("form#info").on("submit", function(event) {
16+
event.preventDefault();
17+
18+
var formData = $('form').serializeArray()
19+
var result = []
20+
21+
for(let input of formData) {
22+
result.push(input.name + ": " + input.value)
23+
}
24+
25+
$("#display").text(result.join(", "))
26+
27+
$("form#info").trigger("reset")
28+
})
29+
});

‎day_7/other_exercises/jquery_quiz.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<style>
6+
div {
7+
margin-bottom: 10px;
8+
}
9+
</style>
10+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
11+
<script type="text/javascript" src="./jquery_quiz.js"></script>
12+
<title></title>
13+
</head>
14+
<body>
15+
<form id="quiz">
16+
<div>
17+
<label>How many sides does a hexagon have?</label>
18+
<div>
19+
<input type="radio" name="hexagon" value='wrong'> <label>five</label>
20+
<input type="radio" name="hexagon" value=true> <label>six</label>
21+
<input type="radio" name="hexagon" value='wrong'> <label>seven</label>
22+
</div>
23+
</div>
24+
<div>
25+
<label>How many wheels does a car have?</label>
26+
<div>
27+
<input type="radio" name="car" value='correct'> <label>four</label>
28+
<input type="radio" name="car" value='wrong'> <label>two</label>
29+
<input type="radio" name="car" value='wrong'> <label>three</label>
30+
</div>
31+
</div>
32+
33+
<div>
34+
<label>What colour is the sky?</label>
35+
<div>
36+
<input type="radio" name="sky" value='wrong'> <label>green</label>
37+
<input type="radio" name="sky" value='wrong'> <label>none</label>
38+
<input type="radio" name="sky" value='correct'> <label>blue</label>
39+
</div>
40+
</div>
41+
<input type="submit">
42+
</form>
43+
<div id="results"></div>
44+
</body>
45+
</html>

‎day_7/other_exercises/jquery_quiz.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
$(document).ready(function() {
2+
$('form#quiz').on('submit', function(event) {
3+
event.preventDefault()
4+
5+
let hexagon = $("input[type='radio'][name='hexagon']:checked").val();
6+
let car = $("input[type='radio'][name='car']:checked").val();
7+
let sky = $("input[type='radio'][name='sky']:checked").val();
8+
9+
$('#results').append(`<p>Your answer for Hexagon is ${hexagon}</p>`)
10+
$('#results').append(`<p>Your answer for Car is ${car}</p>`)
11+
$('#results').append(`<p>Your answer for Sky is ${sky}</p>`)
12+
})
13+
})

‎day_7/other_exercises/listen_for_paste.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Paste</title>
6+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
7+
<script type="text/javascript">
8+
// Plain Old JavaScript Way
9+
document.addEventListener("DOMContentLoaded", function() {
10+
document.addEventListener("paste", function(event) {
11+
let pastedData = event.clipboardData.getData('text')
12+
alert(`This is what you just pasted... ${pastedData}`)
13+
})
14+
})
15+
16+
// jQuery Way
17+
// $(document).bind("paste", function(event){
18+
// let pastedData = event.originalEvent.clipboardData.getData('text');
19+
// alert(`This is what you just pasted... ${pastedData}`)
20+
// });
21+
22+
// Note there are other events you can listen for read more here...
23+
// https://developer.mozilla.org/en-US/docs/Web/Events
24+
</script>
25+
</head>
26+
<body>
27+
<div>
28+
<form id="formy_form">
29+
<input type="text" name="list" id="inputty_put" />
30+
<button>Submit</button>
31+
</form>
32+
</div>
33+
</body>
34+
</html>

0 commit comments

Comments
 (0)