Hi I’m trying to convert a document from pure JavaScript into jQuery. Do I have to download something to make jQuery work? If so where do I find it?
Also how do I import it into my HTML?
Here is the code I have so far. the page is supposed to do 3 things
- determine what grade you are in according to age
- Do math, will highlight if the answer is incorrect
- validate that an email is correct
<!Doctype html>
<html>
<head>
<style>
td{
padding-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
padding-left: 20px;
}
.wrong {
background-color: #fa8072;
}
.right {
background-color: transparent;
}
</style>
<title>JavaScript Assignments- Jasmine Lusty</title>
</head>
<body>
<h2>JavaScript Assignment 5 - Jasmine Lusty</h2>
<!-- Grade Html -->
<h4>Grades!</h4>
<p>Select your age from the list.</p>
<select id="mySelect" onchange="age()">
<option value="Grade">Age</option>
<option value="Grade 1">6</option>
<option value="Grade 2">7</option>
<option value="Grade 3">8</option>
<option value="Grade 4">9</option>
<option value="Grade 5">10</option>
<option value="Grade 6">11</option>
</select>
<p id="selectedGrade"></p>
<br>
<!-- Math Html -->
<h4>Math!</h4>
<p>Try to see if you can do the math</p>
<table id="addition-table">
<tbody>
<tr class="Calculation">
<td>5</td>
<td>3</td>
<td><input type="text"></td>
</tr>
<tr class="Calculation">
<td>7</td>
<td>6</td>
<td><input type="text"></td>
</tr>
<tr class="Calculation">
<td>5</td>
<td>5</td>
<td><input type="text"></td>
</tr>
<tr class="Calculation">
<td>8</td>
<td>3</td>
<td><input type="text"></td>
</tr>
<tr class="Calculation">
<td>4</td>
<td>7</td>
<td><input type="text"></td>
</tr>
<tr class="Calculation">
<td>3</td>
<td>9</td>
<td><input type="text"></td>
</tr>
<tr class="Calculation">
<td>8</td>
<td>5</td>
<td><input type="text"></td>
</tr>
<tr class="Calculation">
<td>2</td>
<td>6</td>
<td><input type="text"></td>
</tr>
<tr class="Calculation">
<td>5</td>
<td>9</td>
<td><input type="text"></td>
</tr>
<tr class="Calculation">
<td>6</td>
<td>6</td>
<td><input type="text"></td>
</tr>
</tbody>
</table>
<br>
<!---- Email Html--->
<h4>Email Validation!</h4>
<p>Type in Your Email</p>
<input type="email" id="email">
<br>
<br>
<!--javascript code-->
<script type="text/javascript">
//Age/Grade Code
function age() {
var x = document.getElementById("mySelect").value;
document.getElementById("selectedGrade").innerHTML = "You selected: " + x;
}
</script>
<br>
<script type="text/javascript">
//Math Code
(function( math ) {
'use strict';
var tr = math.querySelectorAll( 'tr' ),
td = math.querySelectorAll( 'td' ),
inp = math.querySelectorAll( 'input' ),
totals = [], c;
for ( c = 0; c < tr.length; c ++ ) {
totals.push( parseFloat( td[ c * 3 ].textContent ) +
parseFloat( td[ c * 3 + 1 ].textContent ) );
inp[ c ].value = ' ';
inp[ c ].addEventListener( 'blur', check_answer( c ), false );
}
function check_answer( c ) {
inp[ c ].onblur = function() {
if( inp[ c ].value == totals[ c ] ) {
tr[ c ].classList.add( 'right' );
}
else {
tr[ c ].classList.remove( 'right' );
tr[ c ].classList.add( 'wrong' );
}
}
}
}( document ) );
</script>
<!---- Email Validation Code--->
<script type="text/javascript">
function validateEmail(email, emailPattern){
emailPattern = (emailPattern instanceof RegExp) ? emailPattern : /[\w-\.]+@([\w-]+\.)+[\w-]{2,4}/;
return matchResults;
}
var email = document.getElementById('email')
email.addEventListener('blur', function (event) {
event.target.style.backgroundColor = event.target.validity.valid
? 'transparent'
: 'red'
})
</script>
<!---- Remove Event Listeners Code ------>
<script type="text/javascript">
window.removeEventListener("beforeunload", "mySelect", false);
window.removeEventListener("beforeunload", check_answer( c ), false );
window.removeEventListener("beforeunload", function (event)
</script>
</body>
</html>