IT430 Assignment 2 Solution and Discussion

zareen

Assignment No. 02
Semester:Fall 2019
E-Commerce–IT430
Total Marks: 15

Due Date: 02-12-2019
Objectives:
After solving this assignment, students will learn about:
• HTML tags and handling of HTML tags.
• Form creation and form elements handling in HTML.
• Knowledge about JAVASCRIPT functions and JAVASCRIPTevents.
Instructions:
Please read the following instructions carefully before submitting assignment:
It should be clear that your assignment will not get any credit if:
 The assignment is submitted after due date.
 The assignment is submitted via email.
 The assignment is copied from Internet or from any other student.
 The submitted assignment does not open or file is corrupt.
 It is in some format other than.html.
 Students are required to submit HTML code file only with .html extension.
 Don’t upload word format file(.doc) etc.
For any query about the assignment, contact at it430u.edu.pk

Question Statement:

Develop \ Create a web page using Html and JavaScript for the purpose of Grade Calculation as shown below:

Solution guidelines of this web page are given as follows:
• Create Heading “Grade Book Calculator” using H2 tag and Welcome to online Grade Book calculator using H4 tag.
• Create text boxes forStudent ID,Name, Father Name. Show your student ID,Name ,father name respectively.
• CNIC format Should be followed as provided default value.
• Before clicking on Grade Book button user must enter all subject marks otherwise alert message box should be shown like the following:

• Create two buttons labeled as Grade Book and Reset. On onClick event of Grade Book,the JavaScript function “Gradecal()”should be called to check whether subject marks entered or not. Alert Message should be shown in case of error. If subject marks are entered in the text boxes then, Math+English+Computer/3as an average will be calculated and shown in ‘Average Marks’ text Box.
• Grade should be calculated on the basis of average marks and shown in the alert message box. Following table should be used to calculate Grades.

Grade calculation Grade
Average >= 85 A+
Average <=84 or Average >= 74 A
Average <= 73 or Average >= 66 B
Average < =65 or Average >= 51 C
Average <=50 or Average >= 40 D
Average <40 F

Best of Luck

cyberian

Solution:

<html>
  <head>
    <title>Grade Book Calculator</title>
	<script>
	  
 


function Gradecal()
 {		
       
	    
 if(window.document.frmStuGradeCal.Seng.value == "")
            {	
             window.confirm("English Marks are missing");
            }	

	else if(window.document.frmStuGradeCal.Smath.value == "")
            {	
             window.confirm("Math Marks are missing");
            }	

    else if(window.document.frmStuGradeCal.Scom.value == "")
            {	
             window.confirm("Computer Marks are missing");
            }	

     

		if(window.document.frmStuGradeCal.Tmarks.value >= 85)
            {	
             window.confirm("Your Grade is A+");
            }	

else if(window.document.frmStuGradeCal.Tmarks.value == 84 || window.document.frmStuGradeCal.Tmarks.value  >= 74)
            {	
             window.confirm("Your Grade is A");
            }	
else if(window.document.frmStuGradeCal.Tmarks.value == 73 || window.document.frmStuGradeCal.Tmarks.value  >= 66)
            {	
             window.confirm("Your Grade is B");
            }	

else if(window.document.frmStuGradeCal.Tmarks.value == 65 || window.document.frmStuGradeCal.Tmarks.value  >= 51)
            {	
             window.confirm("Your Grade is C");
            }	
else if(window.document.frmStuGradeCal.Tmarks.value == 50 || window.document.frmStuGradeCal.Tmarks.value  >= 40)
            {	
             window.confirm("Your Grade is D");
            }	


else if (window.document.frmStuGradeCal.Tmarks.value < 40)
            {	
             window.confirm("You are Fail");
            }	


         
      

				  
   }  



function focusOut() 
{



document.getElementById("yes8").value= (parseFloat(frmStuGradeCal.yes5.value) +  parseFloat(frmStuGradeCal.yes6.value)+parseFloat(frmStuGradeCal.yes7.value))/3;


	

}

function reset() 
{
     	document.getElementById("yes").value = "";
     	document.getElementById("yes1").value = "";
	document.getElementById("yes2").value = "";
     	document.getElementById("yes3").value = "";
	document.getElementById("yes4").value = "";
     	document.getElementById("yes5").value = "";
	document.getElementById("yes6").value = "";
	document.getElementById("yes7").value = "";
        document.getElementById("yes8").value = "";
}

	  
	</script>
  </head>
    <body>
     <h2 align= "Center"style="background-color:DodgerBlue;"> Grade  Book Calculator</h2>
     <h3 align= "Center"style="background-color:DodgerBlue;"> Welcome to online Grade Book  Calculator</h3>
       <form name="frmStuGradeCal" align="center">
         <table align="center">
           <tr><td>Student ID: </td><td><input type ="text" id="yes" Name="StuId" value = BC123456789 ><td  bgcolor="#FF0000">*Write your own VUID </td></td></tr><br>
           <tr><td>Name: </td><td><input type ="text" id="yes1" Name="StuName" value = "Aamir Latif" ></td></tr><br>
           <tr><td>Father Name:</td><td><input type ="text" id="yes2" Name="FatherName" value = "Abdul Latif" ></td></tr><br>
                             
			
<tr><td>CNIC:</td><td><input type ="text" id="yes4" maxlength="15" Name="StuCnic" value = "33100-1100321-5"> <td  bgcolor="#FF0000">*e.g 33100-1100321-5</td> </td></tr><br>
<tr><td>English*:</td><td><input type ="number" id="yes5" Name="Seng" onfocusout="focusOut()"></td></tr><br>
<tr><td>Math*:</td><td><input type ="number" id="yes6" Name="Smath" onfocusout="focusOut()"></td></tr><br>
<tr><td>Camputer*:</td><td><input type ="number" id="yes7" Name="Scom" onfocusout="focusOut()"></td></tr><br>
<tr><td>Average Marks:</td><td><input type ="number" id="yes8" Name="Tmarks" disabled></td></tr><br>

                 
           </table>
		   
         <input type="button" name="btncalculator" value=" Grade Book" onclick= "Gradecal()">
		         

</tr>

<tr>  </tr>

<tr >

<td >  


<input type="button" value="Reset" onClick="this.form.reset()" >
</td>

</tr>

<tr>
<td  colspan = 2>
You can press reset button for another Grade Book Calculation</td>
</tr>



       </form>
    </body>

</html>

zareen

<!DOCTYPE html>

<html>

<head> 
<title>IT430 ASSIGNMENT NO 2 
</title> 
</head>

<body bgcolor="@B6D53B"> 
<center> 
<h2>Grade Book Calculator</h2> 
<h4 >Welcom To Grade Book Calculator</h4>

<form id="myform"> 
<table> 
<tr>
<td>
Student_ID:
</td>
<td>
<input id="studentid" oninvalid="alert('Please Enter Student_ID ')"
type="text" placeholder="Enter your VU ID" required="required" /> 
</td>
</tr>
<tr>
<td>
Name:
</td>
<td>
<input id="nameid" oninvalid="alert('Please Enter Name ')"
type="text" required="required" /> 
</td>
</tr>

<tr>
<td>
Father Name:
</td>
<td>
<input id="fathernameid" oninvalid="alert('Please Enter Father Name ')"
type="text" required="required" /> 
</td>
</tr> 

<tr>
<td>
CNIC:
</td>
<td><input id="cnicid" pattern="^[0-9+]{5}-[0-9+]{7}-[0-9]{1}$" oninvalid="alert('Please Enter CNIC ')"
type="text" required="required" /> 
</td>
</tr>

<tr>
<td>
English:
</td>
<td><input type="text" id="englishid" oninvalid="alert('Please Enter English Marks ')"
name="english" required="required" /> 
</td>
</tr>

<tr>
<td>
Computer:
</td>
<td><input type="text" id="computerid" oninvalid="alert('Please Enter Computer Marks ')"
name="computer" required="required" /> 
</td>
</tr>
<tr>
<td>
Math:
</td>
<td><input type="text" id="mathid" oninvalid="alert('Please Enter Math Marks ')"
name="math" required="required" /> 
</td>
</tr>

<tr>
<td>
<input type="submit" onclick="calculate()"/>
<input type="reset">
</td>

</table>
</form> 
</center>

<script> 
function calculate(){
var field1 = parseInt(document.getElementById("englishid").value);
var field2 = parseInt(document.getElementById("computerid").value);
var field3 = parseInt(document.getElementById("mathid").value);

var result = (field1+field2+field3)/3;
alert(result);

}

</script>

</body>

</html>

zareen

@SQA-Master
please join chat room for solution code

Chat Room

cyberian

Solution:

<html>
  <head>
    <title>Grade Book Calculator</title>
	<script>
	  
 


function Gradecal()
 {		
       
	    
 if(window.document.frmStuGradeCal.Seng.value == "")
            {	
             window.confirm("English Marks are missing");
            }	

	else if(window.document.frmStuGradeCal.Smath.value == "")
            {	
             window.confirm("Math Marks are missing");
            }	

    else if(window.document.frmStuGradeCal.Scom.value == "")
            {	
             window.confirm("Computer Marks are missing");
            }	

     

		if(window.document.frmStuGradeCal.Tmarks.value >= 85)
            {	
             window.confirm("Your Grade is A+");
            }	

else if(window.document.frmStuGradeCal.Tmarks.value == 84 || window.document.frmStuGradeCal.Tmarks.value  >= 74)
            {	
             window.confirm("Your Grade is A");
            }	
else if(window.document.frmStuGradeCal.Tmarks.value == 73 || window.document.frmStuGradeCal.Tmarks.value  >= 66)
            {	
             window.confirm("Your Grade is B");
            }	

else if(window.document.frmStuGradeCal.Tmarks.value == 65 || window.document.frmStuGradeCal.Tmarks.value  >= 51)
            {	
             window.confirm("Your Grade is C");
            }	
else if(window.document.frmStuGradeCal.Tmarks.value == 50 || window.document.frmStuGradeCal.Tmarks.value  >= 40)
            {	
             window.confirm("Your Grade is D");
            }	


else if (window.document.frmStuGradeCal.Tmarks.value < 40)
            {	
             window.confirm("You are Fail");
            }	


         
      

				  
   }  



function focusOut() 
{



document.getElementById("yes8").value= (parseFloat(frmStuGradeCal.yes5.value) +  parseFloat(frmStuGradeCal.yes6.value)+parseFloat(frmStuGradeCal.yes7.value))/3;


	

}

function reset() 
{
     	document.getElementById("yes").value = "";
     	document.getElementById("yes1").value = "";
	document.getElementById("yes2").value = "";
     	document.getElementById("yes3").value = "";
	document.getElementById("yes4").value = "";
     	document.getElementById("yes5").value = "";
	document.getElementById("yes6").value = "";
	document.getElementById("yes7").value = "";
        document.getElementById("yes8").value = "";
}

	  
	</script>
  </head>
    <body>
     <h2 align= "Center"style="background-color:DodgerBlue;"> Grade  Book Calculator</h2>
     <h3 align= "Center"style="background-color:DodgerBlue;"> Welcome to online Grade Book  Calculator</h3>
       <form name="frmStuGradeCal" align="center">
         <table align="center">
           <tr><td>Student ID: </td><td><input type ="text" id="yes" Name="StuId" value = BC123456789 ><td  bgcolor="#FF0000">*Write your own VUID </td></td></tr><br>
           <tr><td>Name: </td><td><input type ="text" id="yes1" Name="StuName" value = "Aamir Latif" ></td></tr><br>
           <tr><td>Father Name:</td><td><input type ="text" id="yes2" Name="FatherName" value = "Abdul Latif" ></td></tr><br>
                             
			
<tr><td>CNIC:</td><td><input type ="text" id="yes4" maxlength="15" Name="StuCnic" value = "33100-1100321-5"> <td  bgcolor="#FF0000">*e.g 33100-1100321-5</td> </td></tr><br>
<tr><td>English*:</td><td><input type ="number" id="yes5" Name="Seng" onfocusout="focusOut()"></td></tr><br>
<tr><td>Math*:</td><td><input type ="number" id="yes6" Name="Smath" onfocusout="focusOut()"></td></tr><br>
<tr><td>Camputer*:</td><td><input type ="number" id="yes7" Name="Scom" onfocusout="focusOut()"></td></tr><br>
<tr><td>Average Marks:</td><td><input type ="number" id="yes8" Name="Tmarks" disabled></td></tr><br>

                 
           </table>
		   
         <input type="button" name="btncalculator" value=" Grade Book" onclick= "Gradecal()">
		         

</tr>

<tr>  </tr>

<tr >

<td >  


<input type="button" value="Reset" onClick="this.form.reset()" >
</td>

</tr>

<tr>
<td  colspan = 2>
You can press reset button for another Grade Book Calculation</td>
</tr>



       </form>
    </body>

</html>

zareen

zareen

Assignment Available only for Cyberian Chat Room! Members
Please check Live Streaming

zareen

zareen

@SQA-Master
Solution is crating team ASAP!

zareen

Comping Soon Solution!

SQA Master

Please send solution of this Assignment