Mina  Babayeva Mina Babayeva - 4 months ago 13
Javascript Question

Where to add the mentioned ones(HTML CSS)?

I have these tasks:


  • The label text needs to have
    display:inline-block

  • The label text needs to be
    right-align
    and
    top-align**

  • The labels of the checkbox and the radio needs to have
    width:auto

  • The textarea needs to be
    width:360px
    and
    height:50px



Style rules are added so that the label and input elements become significantly larger when the mouse is moved over them (and return to normal size when the mouse moves away from them). This can be easily achieved by using the hover pseudo-class for all label and input elements e.g.
label:hover
and
input:hover
. For example,
label:hover { font-size:40px }
. Add these in the style section of the web page. I added but it is not working.

The following
<script>
instruction needs to be added before
</body>
, near the end of the file. It is a link to some JavaScript code. After this is added the face image will be immediately shown in the web page after the user selects a file using the file selector (the first input element). The JavaScript code shows the selected image in an img element with
id="preview"
(which should be shown under the file selector). Therefore, please ensure you use this
id
for your
img
. This is not working again

Where do I add it in my code?



<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Creating Form</title>
<style
label:hover { font-size:40px }
input:hover { font-size:40px }
></style>
</head>
<body>
<form action="http://ihome.ust.hk/~rossiter/cgi-bin/show_everything.php "
method="post" enctype="multipart/form-data">
<h1>Please Enter Your Details for our Dating Website</h1>
<fieldset style="background: lightyellow; border:10px solid yellow;margin-bottom:10px;width: 720px;">
<legend>Your Face</legend>
<label for="image" >Your image:</label> <input type="file" name="file to upload" required><br>
<label for="preview">Image Preview:</label> <img src="image005" width="10px" height="10px" id="preview">
</fieldset>
<fieldset style="background: lightyellow;border:10px solid yellow;margin-bottom:10px;width: 720px;">
<legend>Your General Details</legend>
<label for="avatar">Name:</label> <input type="text" name="sth" placeholder="Your full name" required><br>
<label for="avatar" >Gender:</label> <input type="radio" name="Gender" value="Male"required>Male
<input type="radio" name="Gender" value="Female" required>Female<br>
<label for="avatar">Age:</label> <input type="number" required="18"><br>
<label for="avatar">Date of Birth:</label> <input type="date"><br>
<label for="color">Favorite color:</label><input type="color" name="color"><br>
<label for="avatar">Which country:</label>
<select name="cities">
<option value="hk">Hong Kong</option>
<option value="hk">Azerbaijan</option>
<option value="hk">Turkey</option>
<option value="hk">Russia</option><option value="hk">Turkey</option><option value="hk">Japan</option>
</select><br>
</fieldset>
<fieldset style="background: lightyellow;border:10px solid yellow;margin-bottom:10px;width: 720px;">
<legend>Your Indicators</legend>
<label for="height">Height:</label>Short<input type="range" min="0" max="100" step="5" value="50" name="height" >Tall<br>

<label for="salary">Salary:</label>Poor<input type="range" min="0" max="100" step="5" value="50" name="height" >Rich
</fieldset>
<fieldset style="background: lightyellow;border:10px solid yellow;margin-bottom:10px;width: 720px;">
<legend>Your Contact Information</legend>
<label for="avatar">Email:</label><input type="text" name="email" required> <br>
<label for="avatar">Mobile:</label><input type="tel" name="email"> <br>
<label for="avatar">Address</label><textarea width:360px height:50px name="address"></textarea><br>
<label for="avatar" >Method to contact you:</label><input type="checkbox" name="sth" value="Email">Email
<input type="checkbox" name="sth" value="Email">Whatsapp
<input type="checkbox" name="sth" value="Email">In-app chat
</fieldset>

<input type="submit" value="Submit">
</form>
<script src="assignment part3.js"></script>
</body>
</html>




Answer

You have:

<style 
label:hover { font-size:40px }
input:hover { font-size:40px }
></style>

You wanted:

<style>
    label:hover { font-size: 40px; }
    input:hover { font-size: 40px; }
</style>

You also want to check the console for a "404 not found" error. I am a little suspicious of the path you have to the required javascript file. First off, "assignment part3.js" is document relative, meaning we would expect to find it in the current folder. That might not be unexpected for an assignment, However the space in the file name seems potentially wrong.

You have an element with the expected id:

<img src="image005" width="10px" height="10px" id="preview">

so that part seems good. The default image source of "image005" seems to me to want an extension, did you mean for example "image005.png"?