Thursday, 8 August 2013

Why won't jQuery work in my project?

Why won't jQuery work in my project?

I'm working on a small project for a friend. I recently learned jQuery on
Codecademy, and this is my first time incorporating it in to a web page.
However, it doesn't work and I'm not sure why. Also, if someone could
direct me on how to center the text boxes, and so on, to look like the
image linked below, please let me know.
Link to Image
Here is my index.html:
<!DOCTYPE html>
<html>
<head>
<title>DNA Translator</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script> type="text/javascript" src="script.js"</script>
<script></script>
</head>
<body>
<div id="content">
<form>
DNA: <input type="text" name="dna" placeholder="DNA"><br>
mRNA: <input type="text" name="mrna" placeholder="mRNA"><br>
tRNA: <input type="text" name="trna" placeholder="tRNA"<br>
Amino Acids: <input type="text" name="aminoAcids"
placeholder="Amino Acids"<br>
</form>
<button id="button" type="button">Tanslate</button>
</div>
</body>
</html>
Here is my stylesheet.css:
h2 {
font-family:arial;
}
form {
display: inline-block;
}
#content {
margin-top: 200px;
margin-left: auto;
margin-right: auto;
}
#button{
opacity: 0.7;
display: inline-block;
height:25px;
width:300px;
background-color:#293FE3;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
/*display: block;*/
margin: 30px auto;
}
input[type="text"]
{
display:/*block;*/ inline-block;
height:20px;
padding:4px 6px;
margin-bottom:10px;
font-size:14px;
line-height:20px;
color:#555;
vertical-align:middle;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px
background-color:#fff;
border:1px solid #ccc;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition:border linear .2s,box-shadow linear .2s;
-moz-transition:border linear .2s,box-shadow linear .2s;
-o-transition:border linear .2s,box-shadow linear .2s;
transition:border linear .2s,box-shadow linear .2s
}

No comments:

Post a Comment