Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy won't jQuery work in my project?
    primarykey
    data
    text
    <p>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.</p> <p><img src="https://i.stack.imgur.com/oCIo0.png" alt="screenshot of login form"></p> <p>Here is my index.html:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;DNA Translator&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="stylesheet.css"/&gt; &lt;script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script&gt; type="text/javascript" src="script.js"&lt;/script&gt; &lt;script&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="content"&gt; &lt;form&gt; DNA: &lt;input type="text" name="dna" placeholder="DNA"&gt;&lt;br&gt; mRNA: &lt;input type="text" name="mrna" placeholder="mRNA"&gt;&lt;br&gt; tRNA: &lt;input type="text" name="trna" placeholder="tRNA"&lt;br&gt; Amino Acids: &lt;input type="text" name="aminoAcids" placeholder="Amino Acids"&lt;br&gt; &lt;/form&gt; &lt;button id="button" type="button"&gt;Tanslate&lt;/button&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Here is my stylesheet.css:</p> <pre><code>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 } </code></pre> <p>Here is the script.js:</p> <pre><code>$(document).ready(function() { $('#button').mouseenter(function() { $('#button').fadeTo('slow', 1); }); $('#button').mouseleave(function() { $('#button').fadeTo('slow', 0.7); }); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload