Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Nick Yates
Nick Yates
8,621 Points

I have a bunch of questions from my previous class that didn't explain it correctly, and I would like assistance.

all these questions below are on my last quiz for my current college class that I'm taking on Web Design, but the way its structured, I didn't learn properly, thats why Im making the switch to treehouse. I'm wanting to get started as soon as I can but I keep getting stuck on these questions below, if theres anyway someone could provide the answers with in depth explanations so I understand, because right now I'm at a loss and want to start treehouse as soon as possible :) Thank you!

These are in Regard to HTML.

  1. [2] Write the one line JavaScript statement that would take the value of the dognameinput field and place it in a variable called dname.

  2. [1] You have a function named “maxqnty” that tests the number entered is a number less than 50. Rewrite the following statement so that the function “maxqnty” will be triggered when the user clicks on the submit button.

<input type=”button” id=”submit” value=”submit” />

  1. [1] Write the code for a keyword meta tag that could be used for a Web site that specializes in real estate in Glendale.

  2. [1] Write the statement that you would need in a robots.txt file so that the page mystuff.html is not indexed by search engines.

  3. [1] Write the entire statement that you would have in your web page to link it to mymobile.css that is for mobile devices.

  4. [1] Write the statement you would have near the bottom of your page, in order to reference a file named distancecalc.js that is in the scripts folder which is directly under the folder that this page is in.

  5. [1] #main has a z-index of 10 and # navaccent has a z-index of 20. Write the attribute-value pair that will put #navsuff on the layer on top of #main and #navaccent.

  6. [1] Given #info {font-size: 16px;} Rewrite the following so that the text “start” uses info – do not use the div tag to do this). If you do not start, then you will not finish.

2 Answers

anil rahman
anil rahman
7,786 Points
anil rahman
anil rahman
7,786 Points
  1. var nameValue = document.getElementById("uniqueID").value;

That is the structure of the one line javascript. What this does is say ok you have your html input tag such s a text box. <input type="text" name="name" id="uniqueID" value="value" /> It's got a id, we use that id to act as its name when we want to say im calling that box.

So var dname = document.getElementById("dognameinput").value; This is the javascript part which takes the value of the box which in your case is dognameinput, and places it into the dname variable.

var dname - this bit decalres the variable var meaning its of the type var and dname being the name we have given this variable. then by using the equals we assign the variable to whatever we put after that equals sign. In this case it's document.getElementById(), this is the basic javascript to reference a html tag/elemttn you have by it's id. Our id will be called dognameinput. So we are saying get the element by id and its name is dognameinput and then once we have that box and its id just give me its value back. Thats why you see .value at the end of the line.

  1. Similar thing with this one also you have your html input type but seen as though it;s javascript you can just use the quick <button></button> tags.

<button onclick="myFunction()">Submit</button>

<script> function myFunction() { //do number check here
document.getElementById("field2").value = document.getElementById("field1").value; } </script>

This is just some example syntax code. The function mentioned in your question would look something like that myFunction() above but called maxqnty().

The only thing needed to answer that question is the button tag part at the top. The onclick attribute you see: <button onclick="maxqnty()"> This is what actually does the bit that says ok, when he clicks on me im going to call this maxqnty() function by using my handy onclick attribute here in my tag and that will tell maxqnty() to do it's job.

  1. The meta tag only shows data about other data. This keyword part can help with web rankings in search engines and such if you were googling cars per say and you had those keywords it would find your site and try put it higher in the ranking. Although i;. not sure if this is a good idea anymore or not.

<meta name="keywords" content="Real estate, Glendale, House, Property">

It just has the usual self closing meta tag. it's name we have given is keywords and we have given it some values. Those keywords are then picked up and used.

  1. Not sure about that one.

  2. When linking external css files you use the <link> tag.

<link rel="stylesheet" href="mystyle.css">

Thats all you should need to link a style sheet. The rel = stylesheet part just says that the relationship between this file is that its a css stylesheet file. The href part is the actual source of the file/ the name of that file where it's located.

The question also states for mobile devices so this extra line about the <link> tag could be required.

<meta name="viewport" content="width=device-width, initial-scale=1">

You can google that to find out exactly what it does but it's what you normally see at the top of html files to denote the correct displaying of the webpage on mobile devices.

  1. This is usually in the bottom of the <body> tag like this: <body> //other work here and tags and such

<script src="myscripts.js"></script> </body>

So it's the usual script tag when working with javascript. The only thing needed is an src attribute in the opening script tag. This just says the file name. Or if it was in a folder then just write it like this to say its in this folder and the file is this:

<script src="scripts/myscripts.js"></script>

  1. The easiest way to think of this z-index attribute is a stack so like a stack of pancakes. So you have 20 pancakes. number 1 is at the top and number 20 is on bottom so same rule with z-index. z-index of 1 means its at the very top and z-index 20 means its at the bottom.

main is z-index: 10

navaccent is z-index: 20

So far then you now know that #navaccent is the bottom of our pile at 20 z-index and #main is in the middle with 10 z-index.

They wanted you to now add a new z-index to one of the elements in the stack called:

navstuff

It says this needs to be above both #main and #navaccent. Well we know navaccent is at the 20 position of our layered stack so it needs to be higher up than that. Also we know that main is at the 10 position so we need to be higher than that also so to be higher than both we could just call the pancake above 10 which is number 9 #navstuff. This would give #navstuff z-index: 9 and mean that it is now layered above the other two. The z-index of 1 is of highest importance meaning it will show up on top of everything else.

  1. #info {font-size: 16px;} So for this you have this info id not class remember so you can only reference it in one tag. You want some text to have these properties by using this #info id. To do this would be to just go to the tag where the text is located such as <p id="info">The text.</p. By giving the P tag the id of info the text it holds will now get the styles associated from this line we saw. #info {font-size: 16px;}

Hopefully this was helpful. I'm only a beginner too so yeah keep at it :)

anil rahman
anil rahman
7,786 Points

Sorry all the number formatting and stuff went weird when i submitted just remember each time you see a new number such as 1. or 2. it's referencing the next question in your list.

Nick Yates
Nick Yates
8,621 Points
Nick Yates
Nick Yates
8,621 Points

Thank you so much I already submitted what I thought it was but I got very close I got a couple wrong which you helped explain why, so I very much appreciate it, Thanks so much!!