Scribd Logo
Upload

Welcome to Scribd!

  • 12 views

    HTML Marks

    Uploaded by

    Tofeeq Ur Rehman FASTNU
    The document contains code for a web form that allows users to enter subject marks, calculates the total marks, percentage, and grade. It includes CSS for styling inputs, buttons, and form layout. JavaScript code handles form submission, calculations, and outputting results.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd

    HTML Marks

    Uploaded by

    Tofeeq Ur Rehman FASTNU
    12 views4 pages
    The document contains code for a web form that allows users to enter subject marks, calculates the total marks, percentage, and grade. It includes CSS for styling inputs, buttons, and form layout. JavaScript code handles form submission, calculations, and outputting results.

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document contains code for a web form that allows users to enter subject marks, calculates the total marks, percentage, and grade. It includes CSS for styling inputs, buttons, and form layout. JavaScript code handles form submission, calculations, and outputting results.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    12 views4 pages

    HTML Marks

    Uploaded by

    Tofeeq Ur Rehman FASTNU
    The document contains code for a web form that allows users to enter subject marks, calculates the total marks, percentage, and grade. It includes CSS for styling inputs, buttons, and form layout. JavaScript code handles form submission, calculations, and outputting results.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    You are on page 1of 4

    <!

    doctype html>
    <html>
    <head>
    <style>
    .input{width: 86px;
    height: 26px;
    margin: 7px;
    border-radius: 15px;
    border: solid 3px gainsboro;
    outline: none;
    margin-left: 155px
    }
    .form{
    color: #FFF;
    border: solid 4px #666860;
    font-size: 17px;
    text-align: center;
    background-color: #A80F4F;
    min-height: 500px;
    width: 500px;
    margin: auto;
    border-bottom-right-radius:200px;
    border-top-left-radius:200px;

    }
    .btn{
    width: 112px;
    height: 50px;
    color: #fff;
    background: #06F;
    border-radius: 10px;
    border-color: #A1C7FF;
    cursor: pointer;
    outline:none;
    }
    .btn:hover{
    background:#7B9DD2;
    }
    .show{
    width: 86px;
    height: 26px;
    margin-left: 132px;
    border-radius: 15px;
    border: solid 3px gainsboro;
    outline: none;
    }

    .you-are{
    width: 200px;
    height: 35px;
    border-radius: 15px;
    border: solid 3px gainsboro;
    outline: none;
    }

    .nameshow{
    width: 201px;
    height: 28px;
    border-radius: 15px;
    border: solid 3px gainsboro;
    outline: none;
    margin-right: 35px;
    }

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    }

    </style>

    <meta charset="utf-8">
    <title>Untitled Document</title>
    </head>

    <body> <div class="form">


    <h2>Calculation Marks</h2>
    <h3 style="color:#F00;" id="error"></h3>
    Your Name is: &nbsp; <input type="text" name="name" class="nameshow"
    id="name" placeholder="write name">
    <br>
    <h2>Enter your Subject Marks</h2>
    Urdu &nbsp;&nbsp; <input type="number" name="base" class="input"
    id="urdu" placeholder="enter number">
    <br>
    Physics <input type="number" name="base" class="input"
    id="physics" placeholder="enter number">
    <br>
    Math &nbsp;&nbsp;&nbsp; <input type="number" name="base"
    class="input" id="math" placeholder="enter number">
    <br>
    Islamyat <input type="number" name="base" class="input"
    id="islamyat" placeholder="enter number">
    <br>
    English &nbsp; <input type="number" name="base" class="input"
    id="english" placeholder="enter number">
    <br>
    Pakstudy <input type="number" name="height" class="input"
    id="studay" placeholder="enter number">
    <br>
    Computer <input type="number" name="height" class="input" id="computer"
    placeholder="enter number">
    <br>
    <input type="submit" class="btn" value="submit"
    onclick="test2()">
    <h4>Total Marks <input type="number" class="show" id="marks"></h4>
    <h4>Persentage: <input type="text" class="show" id="per"></h4>
    <h4>Grade:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text"
    class="show" id="grad"></h4>
    <h4>You are:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input
    type="text" class="you-are" id="nameshow"></h4>

    </div>
    <script>
    go=confirm(" Design by Hasan Raza if you want source code then click Cancle other
    than click OK thanks ");
    if(go==false){

    window.location="http://www.webitechdaily.com/marks-calculation-in-
    java-script-click-download/";
    }

    function test2(){
    var
    u=parseInt(document.getElementById("urdu").value);

    var
    p=parseInt(document.getElementById("physics").value);

    var
    m=parseInt(document.getElementById("math").value);

    var
    i=parseInt(document.getElementById("islamyat").value);

    var
    e=parseInt(document.getElementById("english").value);

    var
    s=parseInt(document.getElementById("studay").value);

    var
    c=parseInt(document.getElementById("computer").value);

    var name=document.getElementById("name").value;
    if(name==''||u==''|| p==''|| m==''|| i==''|| e==''||
    s==''||c==''){

    document.getElementById("error").innerHTML="Please ALL Field Required";


    }
    else{
    var totlemarks=u+p+m+i+e+s+c;

    var persentge=(totlemarks/700)*100;

    var persentge=persentge.toFixed(2);

    document.getElementById("marks").value=totlemarks;

    document.getElementById("nameshow").value=name;

    var
    p=document.getElementById("per");p.value=persentge;

    if(persentge>80&&persentge<=100){

    grade="A+";
    }
    if(persentge>70&&persentge<80){
    grade="A";}

    if(persentge>=60&&persentge<70){

    grade="B";
    }

    if(persentge>=50&&persentge<60){

    grade="C";
    }

    if(persentge>=40&&persentge<50){

    grade="D";
    }

    if(persentge>=33&&persentge<40){

    grade="E";
    }

    if(persentge<33){

    grade="F";
    }

    document.getElementById("grad").value=grade;

    }
    }

    </script>
    </body>
    </html>

    You might also like