Details: As you've heard me say countless times, in a technical course, details are extremely important. So every little quotation, naming conventions, etc, etc are things that must be respected. It's not hard, but it does require practice of the various concepts as they have been discussed during lecture.
Your page will be fairly short and simple, but will allow you to simulate rolling 1 or 2 dice.
Have a heading that says something like "Greg's Gambling". Apply a border to his heading, and make it 300 pixels wide. Style this as an internal style.
Your page will simply have two buttons on it.
One button should say: Roll 1 Die and the other button should say Roll 2 Dice
If the user clicks the button saying to roll a single die, the button should invoke a function that outputs a random number between 1 and 6. I will explain how to do this below.
If the user clicks the button saying to roll two dice, the button should invoke a different function that outputs a random number between 1 and 12. I will explain how to do this below.
As mentioned, every time the user clicks the button saying Roll 1 Die, your function should output (to an alert window) a random number between 1 and 6. In other words, your function will contain only a single line of code, namely be a single alert() statement. Inside your alert function, you will have the code:
Math.floor(Math.random() * 6)+1
This code genereates a random number between 1 and 6, i.e. simulating the sum obtained by rolling 1 die. The alert box will simply output that number.
Similarly, every time the user clicks the button saying Roll 2 Dice, your function should output to an alert window, a random number between 1 and 12. In other words, your function will be a single alert() statement. Inside your alert function, you will have the code:
Math.floor(Math.random() * 12)+1
This function should output an alert window showing a number between 1 and 12.
You are designing a prototype of a web page to help people estimate the resale value of their used car.
On your page you are going to ask people the make and model of their car, the year, the mileage, the condition, and whether or not it has ever been in a flood.
Your page should have a heading section in <h1>. For example, you could call it: "Used Car Value Estimator".
Your page should also have an image. Use any image you like. Include a height and width attribute to your image. However, be sure to try to keep the proportions intact. For example, if you make the height 50% of its original height, the width should also be 50%.
At the top of the page include a small blurb. For example, you could write: "How much can you get?" The text should be in a slightly smaller font than the rest of the text on the page. The text should also be in bold. Of course, you should use CSS to make these changes.
Next, create a form in which you include the following form elements. Hopefully it goes without saying that every form element should be preceded by a prompt to the user. Tip: Remember to place this prompt inside a <label> tag.
A text field asking for the make
A text field asking for the model
A select box asking for the year. (To save you time, just put the past three years, i.e. 2024, 2023, 2022).
A text field asking for the mileage
A radio button asking for the condition. Have buttons for
Great
Good
Fair
Poor
A checkbox that says: "Check here if the vehicle has ever been in a flood."
A button that says "Calculate Vehicle Value".
Have an external style sheet in which you:
Make the page 550 pixels wide by applying it to the body tag. You may need to look up how to resize a page using a reference such as MDN or W3 Schools. Note: If our image is wider then the size of your page, it may cause the page to look a bit funny. If this is the case, you will want to resize your image
Look up at least 1 other style that we have not yet discussed in class and apply it somewhere on your web page.
Other notes:
People often ask if they can do more, e.g. additional styles, etc. The answer is, of course!! Definitely have fun with it – but don't do so at the expense of the required elements of the assignment. Be sure to get the key requirements taken care of first, and then feel free to add on!
Explain what is meant by a "programming convention" as it applies to writing HTML code. Research this topic and write a very short summary (no more than 1 paragraph) on the topic.
Write your answer as an HTML comment at the bottom of your web page.
Upload all documents to the D2L submissions folder.
Upload the pages to the web server, and submit the URLs as a comment. (This step is very important - so do not neglect it!) And remember to upload any accessory files such as external CSS files, images, etc.