please help witb coding! this is a beginner level class! second picture is what it is...

Question

Question

please help witb coding! this is a beginner level class! second picture is what it is suppose to look like
3 - A A A EVENE Äv 21 Never email your code to anyone. Maintain the standards of academic honesty discussed in lecture and in

3 - A A A EVENE Äv 21 Never email your code to anyone. Maintain the standards of academic honesty discussed in lecture and in

8. The tds at the bottom, that are to hold the final grade and the letter grade, are to be empty, but need to have ids so tha

please help witb coding! this is a beginner level class! second picture is what it is...

3 - A A A EVENE Äv 21 Never email your code to anyone. Maintain the standards of academic honesty discussed in lecture and in previous labs. The work you turn in must be your work not copied from anywhere. • You should use Firefox or Chrome for the browser for testing your code, NOT Internet Explorer. Part I-lab12xxx.html - Due at the end of class 1. Insert an h2 that includes your first and last name and your section 2. Insert an h1 that says CSCE 102 Grade Calculator. 3. Give the h1 an id. 4. Create a table similar to the one in the diagram below. The first column contains headings for the rows. (You can use th for these. The second column uses tds that contain input elements (for the slider controls and the number boxes) as shown in the diagram Note: To create the box to enter the grades you will use a box that looks like a textbox but you will use type "number" instead of type="text". If numbers are not entered in these boxes some browsers will inform you and some will not let you enter a value that is not a number. (Although, with type "number" the data type is just the same as if it were in a textbox or from a prompt. They are strings and if you try to add it will concatenate instead. But since there is no string operation of multiplication you will actually not need to use porscEloat or parseInit since you will be multiplying by the weights before you add. You can of course use porscEloat or purseloit Go to W3Schools: https://www.w3schools.com/tags/att input type number.asp and look at how this works. You can set the max and min values that can be entered in the box. We are setting the min grades to be zero and the max to be 100 on the slider (although you may have extra credit and have a grade greater than 100.) 5. Use a slider for providing numbered input. Read Page:340 in the textbook for more details about creating a slider. 6. Use the label element to insert the min and max on either side of the slider a shown in the diagram below. You can put the input element inside of the label element So there is an opening label tag, then zero for the min, the image element followed by 100 for the max (you can put a space in in front of 100 using &nbs) and then the closing label tag. See page 326 #1 in your textbook. When the user changes the value on a slider by sliding, update the text in the third column of the table with the value from the slider. (Hint: Use the onclick or cachange event handler, and update the text in the Id in the third column of the table. You will use an assignment statement to set the walue in the w. As you do with textboxes and the number boxes use BetEleocotById("the id goes here").value for the slider value. 8. The tds at the bottom, that are to hold the final grade and the letter grade, are to be left empty, but need to have ids so that you can fill them later. Test your code in Firefox and Chrome (not Explorer)

engineering Computer-Science

Add a comment Improve this question Transcribed image text

Answer 1

Answer #1

****This requires some effort so please drop a like if you are satisfied with the solution****

index.html:

<html>

<body>

<h1 id="title">CSCE 102 Grade Calculator</h1>

<div>

<tr><th>Final Exam</th>

<tr><th>Project</th>

<tr><th>Quizzes</th>

<tr><td colspan="3"><button style="width:100%">Calculate Grade</button></td></tr>

<tr><th>Score:</th>

<tr><th>Letter:</th>

</table>

</div>

</body>

</html>

style.css:

table {

border-collapse: collapse;

}

table,th,td{

border: 1px solid black;

}

script.js:

function test1(){

document.getElementById("test1val").innerHTML=document.getElementById("exam1").value;

}

function test2(){

document.getElementById("test2val").innerHTML=document.getElementById("exam2").value;

}

function Fexam(){

document.getElementById("FexamVal").innerHTML=document.getElementById("Fexam").value;

}

Output Screenshot:

Code Screenshot:

Add a comment

Answer 2

please help witb coding! this is a beginner level class! second picture is what it is...

Homework Answers

Add Answer to:
please help witb coding! this is a beginner level class! second picture is what it is...

Post as a guest

Earn Coins

I NEED SOME HELP WITH THIS PLEASE :) 1. Create a data entry form on one...

can you do this js and html question. ill give you the html and js and...

We want to create a program which prints off what letter grade an individual receives based...

Write the code in python, if you cannot answer all the question please dont anser, thanx very much. Please gimme a scr...

Please help. I need a very simple code. For a CS 1 class. Write a program...

*PLEASE USE AN ARRAY NOT A POINTER****** Detailed Specification: Write six basic functions for the BST:...

PLEASE HELP: EASY CODE. Using your template create a webpage that contains a div. Give the...

URGENT HELP NEEDED: JQuery. PLEASE POST SCREEN SHOTS Task 1: Downloading jQuery Right-click the link to...

X86 Assembly language lab: TITLE Lab 3: assembly language fundamentals ;;;;; Q1: Don't...

i need the code that goes within the <script> opening and closing following the insturctions of...

please help witb coding! this is a beginner level class! second picture is what it is...

Homework Answers

Add Answer to: please help witb coding! this is a beginner level class! second picture is what it is...

Post as a guest

Earn Coins

Add Answer to:
please help witb coding! this is a beginner level class! second picture is what it is...