Project Title : Address Book

S/w Used : HTML, CSS, JavaScript with LocalStorage for storing data (little Bootstrap)

Framework Used : Text Editor

Description : A small addressbook which is having name, email, contact no, and city which is having CRUD operations.

Till Today :

• From v1.0, design changed completely.
• Code done for Adding new Contact with modal window.
• And whenever new entry added that will get displayed in the table dynamically with del and edit buttons.
• Delete button action also done.
• Alignment I could not able to do well, so took chatGPT help.

To Do:

• Edit action and Search are pending.
• Add New screen is not getting closed after adding – has to be rectified.
• Design should get changed in AddNew screen
• Table – Headings font size should get changed. (As used bootstrap table class – th is not getting changed through css – have to research in it.
• Some Code duplication is there, have to be optimized like keep in one function (inside validationPassed & addNewContact).

Technical WorkFlow:

function validationPassed : This function checks all the fields are not empty.

function getAddrBook : This function returns an Array which extracts the existing contacts from localStorage, if available, and parse it. Otherwise an empty array will be returned.

function addNewContact : If validationPassed, then new contact entry is created from 4 fields (Name, Email, ContactNo and City), together will form an object and pushed into addrBook array (got through getAddrBook) and will get saved into localStorage. showBook() function is getting called immediately to show the added contact.

function showBook() : This is actually a table where rows(contacts) with delete and edit buttons are getting added dynamically and will be shown.

function deleteCont(idx) : As the name suggests it will take the index of the array as input and delete the contact when the delete button pressed.

Output till now :

AddNew Screen:

gitlab : https://gitlab.com/Sugirtha/Kaniyam.git

package taskPkg;

public class MatrixCalc {
	public static void main(String[] args) {
		// 1. MATRIX ADDITION ( A + B )
		// 2. MATRIX MULTIPLICATION ( C*D ) IF C is nxk AND D IS kxm RESULTANT MUST BE
		// nxm
		int[][] A = { { 4, 2, 5 }, { 6, 3, 4 }, { 8, 1, 2 } };
		int[][] B = { { 5, 1, 3 }, { 2, 3, 2 }, { 1, 6, 4 } };
		int[][] C = { { 4, 2 }, { 2, 1 }, { 5, 3 } };
		int[][] D = { { 1, 2, 3 }, { 3, 2, 5 } };
		int[] desc = { 9, 5, 2, 1 };
		int[][] M = new int[C.length][D[0].length];

		MatrixCalc matOp = new MatrixCalc();
		matOp.add(A, B);
		System.out.println("-------------------------");
		matOp.multiply(C, D, M);
		System.out.println("-------------------------");
		matOp.LargestInEachRow(M);
		System.out.println("-------------------------");
		matOp.isDescendingOrder(desc);
	}

	private void add(int[][] A, int[][] B) {
		int r = A.length, c = A[0].length;
		int[][] S = new int[r][c];
		for (int i = 0; i < r; i++) {
			for (int j = 0; j < c; j++) {
				S[i][j] = A[i][j] + B[i][j];
			}
		}
		print2Darray(A, "A");
		print2Darray(B, "B");
		System.out.println("SUM : S = A+B");
		print2Darray(S, "S");
		System.out.println();
	}

	private void multiply(int[][] C, int[][] D, int[][] M) {
		int n = C.length, q = D.length, m = D[0].length;
		for (int i = 0; i < n; i++) {
			for (int j = 0; j < m; j++) {
				for (int k = 0; k < q; k++) {
					M[i][j] += C[i][k] * D[k][j];
				}
			}
		}
		print2Darray(C, "C");
		print2Darray(D, "D");
		System.out.println("MULTIPLY : M = CxD");
		print2Darray(M, "M");
	}

	private void LargestInEachRow(int[][] M) {
		int L[] = new int[M.length];
		System.out.println("LARGEST IN EACH ROW OF : M ");
		System.out.print("[");
		for (int i = 0; i < M.length; i++) {
			L[i] = M[i][0];
			for (int j = 0; j < M[0].length; j++) {
				L[i] = L[i] < M[i][j] ? M[i][j] : L[i];
			}
			System.out.print(" " + L[i] + " ");
		}
		System.out.println("]");
	}

	private void isDescendingOrder(int[] des) {
		boolean desc = true;
		System.out.print("Array des [");
		for (int i = 0; i < des.length; i++) {
			System.out.print(" " + des[i] + " ");
			if (i > 0 && desc && des[i - 1] < des[i])
				desc = false;
		}
		System.out.println("]");
		if (desc)
			System.out.println("Given Array des is In Descending Order");
		else
			System.out.println("Given Array des is NOT In Descending Order");
	}

	private void print2Darray(int[][] ar, String arName) {
		System.out.print("Array " + arName + " : ");
		for (int i = 0; i < ar.length; i++) {
			if (i > 0)
				System.out.print("          ");
			System.out.print("[");
			for (int j = 0; j < ar[0].length; j++) {
				System.out.print(" " + ar[i][j] + " ");
			}
			System.out.println("]");
		}
		System.out.println();
	}

}

OUTPUT:

Project Title : Address Book

S/w Used : HTML, CSS, JavaScript with LocalStorage for storing data (little Bootstrap)

Framework Used : Text Editor

Description : A small addressbook which is having name, email, contact no, and city which is having CRUD operations.

Till Today : Just designed the front screen for Adding New Contact – simple html screen with css only done.

<html>
<head>
 <title>Address Book</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="author" content="Sugirtha">
 <meta name="description" content="Simple AddressBook with Name, Contact No, Email and City">
 <link rel="stylesheet" href="addr.css">
</head>
<body>
 <h3>Simple Address Book</h3>
 <form id="frmAddr" name="formAddr">
 <div class="container">
  <table>
   <tr>
    <th>Name</th>
    <td><input type="text" id="txtName" placeholder="Enter your Name"></td>
   </tr>
   <tr>
    <th>Email</th>
    <td><input type="text" id="txtEmail" placeholder="Enter your Email"></td>
   </tr>
   <tr>
    <th>Contact No.</th>
    <td><input type="text" id="txtPhone" placeholder="ContactNo. including ISD Code"></td>
   </tr>
   <tr>
    <th>City</th>
    <td><input type="text" id="txtCity" placeholder="Enter your City here"></td>
   </tr>
  </table>
   <div class="submitPos">
    <input type="submit" id="btnSubmit" value="SAVE" class="button">
    <input type="button" id="btnCancel" value="CLEAR" class="button">
   </div>

 </div>
 </form>
</body>
</html>

CSS

body
{
    background-color:#3d4543;
    color:white;
}
h3
{
    text-align:center;  
    font-family:Helvetica;
}
input[type=text]
{

    background-color:#bccd95;
    color:black;
    height:30px;
    width:220px;
    border-radius:3px;
    border-color:white;
}
::placeholder
{
    opacity: 1;
    font-family:Helvetica;
    font-size:15px;
}
.container 
{
    background-color:#3d4543;
    position: relative;
    top:4px;
    left:38%;
    width:450px;
    height:350px;
}
.submitPos
{
    position: relative;
    top:38px;
    left:10%;   
}
th
{
    text-align:left;
    font-family:Helvetica;
    font-size:15px;
    font-weight:bold;
}
.button
{
    position:relative;
    color:white;
    border:none;
    border-radius:3px;
    width:100px;
    height:26px;
    margin-left:10px;
    background-color:#303030; 
    border-radius:8px;
    border-bottom:black 2px solid;  
    border-top:2px 303030 solid; 
    font-family:Helvetica;
    font-size:13px;
    font-weight:bold;
}

OUTPUT

Objective: Create and host a personal portfolio website using HTML and CSS.

Step 1: Design Selection

• Objective: Choose a user interface (UI) and user experience (UX) design that aligns with your vision for the portfolio.
• Action:
  • Searched online for a simple and clean portfolio design template.
  • Selected and saved the design to serve as a foundation for your project.

Step 2: Code Reference and Customization

• Objective: Obtain a starting point for your HTML and CSS code and customize it to suit your needs.
• Action:
  • Uploaded the selected design to ChatGPT and requested a sample code.
  • Used the provided code as a reference.
  • Opened the code in Visual Studio Code (VS Code) and began customizing it to reflect your personal information and preferences.
  • Downloaded and included necessary images and emojis, such as your profile photo, ensuring they were all stored in a folder named “portfolio.”

Step 3: Code Implementation and Testing

• Objective: Implement the code and ensure it functions correctly.
• Action:
  • Edited the HTML and CSS files in VS Code, adapting the layout, text, and images to create a personalized portfolio.
  • Regularly saved changes and previewed the website in your browser to ensure it displayed as intended.
  • Made adjustments and refinements until the portfolio met your satisfaction.

(HTML)index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SAKTHIVEL | Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>SAKTHIVEL <span class="highlight">S</span></h1>
        <p>FullStack Developer</p>
    </header>

    <section class="container">
        <div class="sidebar">
            <img src="profile.jpg" alt="sakthi" style="width:150px; height:150px;">
            <h3>SAKTHIVEL SARAVANAN</h3>
            <div class="contact-info">                
                <a href="https://www.linkedin.com/in/sakthivel-saravanan" target="_blank" style="margin-right: 20px;"><img src="linked-in.svg" alt="LinkedIn" style="width:40px; height:40px;"></a>
                <a href="https://github.com/SakthivelS2001" target="_blank"><img src="github.svg" alt="GitHub" style="width:50px; height:45px;"></a>

            </div>
            <div class="details">
                <p><strong>Phone:</strong> +91 9514552154</p>
                <p><strong>Email:</strong> sakthivelricky@gmail.com</p>
                <p><strong>Location:</strong> Velachery, Chennai</p>
                <a href="resume.pdf" target="_blank" class="download-resume">Download Resume</a>
            </div>
        </div>

        <div class="main-content">
            <section class="about">
                <h2>ABOUT ME</h2>
                <p>I'm Sakthivel, a passionate software developer with a strong foundation in computer science, holding a Bachelor's degree in Computer Science from Sri Sankara Arts and Science College, Kanchipuram. Currently, I'm advancing my expertise with a Master's degree in Information Technology from Arignar Anna Arts and Science College, Cheyyar.</p>
                <p>With a deep interest in front-end development, I have honed my skills in HTML, CSS, and JavaScript, creating user-friendly and visually appealing interfaces. My proficiency in Python, along with a basic understanding of SQL and version control using Git/GitHub, equips me to tackle various programming challenges.</p>
                <p>I thrive in collaborative environments where teamwork and innovation are key. I'm also committed to continuous learning, constantly seeking new ways to improve my skills and stay up-to-date with the latest industry trends.</p>
                <p>In addition to my technical abilities, I'm dedicated to overcoming personal challenges like stage fear, which has made me a more confident and effective communicator.</p>
                <p>Whether you're here to explore my work or discuss potential opportunities, I'm excited to connect and share more about how I can contribute to your projects.</p>
            </section>
            
            <section class="skills">
                <h2>Education & Skills</h2>
                <div class="skill-card">
                    <h3>Post Graduate</h3>
                    <p><b>Master's degree, Information Technology <b></p>
                    <p>Marks % : 77 |  Year : 2018 - 2021<p>

                </div>
                <div class="skill-card">
                    <h3>Under Graduate</h3>
                    <p><b>Bachelor's degree, Computer Science <b></p>
                    <p>Marks % : 77 |  Year : 2018 - 2021<p>
                </div>
                <div class="skill-card">
                    <h3>Skills</h3>
                    <p>Python|SQL|HTML|CSS|JAVASCRIPT|Git/Github</p>
                </div>
                <div class="skill-card">
                    <h3>Operating System</h3>
                    <p>Windows | Linux</p>
                </div>
            </section>
        </div>
    </section>
</body>
</html>

(CSS)styles.css:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #f8f8f8;
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

header h1 {
    margin: 0;
    font-size: 32px;
    font-weight: 400;
}

header .highlight {
    color: orange;
    font-weight: 700;
}

header p {
    margin: 5px 0;
    font-size: 18px;
    color: #555;
}

.container {
    display: flex;
    max-width: 1200px;
    margin: 20px auto;
}

.sidebar {
    flex: 1;
    max-width: 300px;
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.sidebar img {
    width: 100px;
    border-radius: 50%;
    margin-bottom: 20px;
}

.contact-info a {
    margin: 0 10px;
}

.details {
    margin-top: 20px;
}

.details p {
    margin: 10px 0;
    font-size: 14px;
}

.download-resume {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: orange;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.main-content {
    flex: 2;
    margin-left: 20px;
}

.about {
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.about h2 {
    font-size: 24px;
    border-bottom: 2px solid orange;
    padding-bottom: 10px;
}

.skills {
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.skills h2 {
    font-size: 24px;
    border-bottom: 2px solid orange;
    padding-bottom: 10px;
}

.skill-card {
    margin-top: 20px;
}

.skill-card h3 {
    font-size: 20px;
    color: orange;
}

.skill-card p {
    font-size: 14px;
    color: #555;
    margin-top: 10px;
}

Now the output was displaying in local browser

Step 4: Web Hosting

• Objective: Host your portfolio online so it can be accessed publicly.
• Action:
  • Chose Neocities.org as your hosting platform, a site known for its ease of use in hosting simple websites.
  • Uploaded the entire project folder (named “portfolio”) to Neocities.org.
  • Successfully received a unique online link for your website, making it accessible to others.

Search the neocities from google and click the official website

Enter your website name you like to host use different name if username taken notify is shown.

Enter the password and Mail ID

And verify the “I am human” Box and click “Create My Site” Button

Now click the Free option.

Enter the verification code from gmail.

click the dashboard to continue.

now we need to upload our project folder

click the “New Folder”

enter the name

folder created

next we upload the files

click the folder

click upload

select the files to upload

now open the index.html file

this was open click to view button on right side top

now our project successfully hosting on internet

copy the above link and share your friends and family

Portfolio Link : https://sakthivels.neocities.org/Sakthivel%20Portfolio/

Git Link : https://github.com/SakthivelS2001/portfolio.git

Step 5: Final Review

• Objective: Ensure everything is working properly and the portfolio is complete.
• Action:
  • Conducted a final review of the live website to verify all elements were displayed correctly.
  • Confirmed that the website was fully functional and ready to share.

Skills Used:

• HTML & CSS: For structuring and styling the website.
• Web Hosting: Using Neocities.org to make your website accessible online.
• VS Code: For code editing and customization.

Outcome: Successfully created and hosted a personalized portfolio website.

Conclusion:

This project marks my first real-time experience in creating and hosting a personal portfolio website. Throughout the process, I gained valuable knowledge and practical skills, which were instrumental in the successful completion of this project.

I would like to extend my gratitude to the following resources that significantly contributed to my learning:

• ChatGPT: For providing guidance and code references that helped shape the structure of my portfolio.
• YouTube Channel: Error Makes Clever: For offering insightful tutorials that deepened my understanding of HTML, CSS, and web development practices.
• Youtube Channel: Brototype Tamil: For sharing practical tips and techniques that enhanced my coding skills.

This project not only allowed me to apply my skills but also provided an opportunity to explore new tools and methods, reinforcing my passion for web development.

<html>
<head>
    <title>Simple Calculator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Sugirtha">
    <meta name="description" content="Calculator using HTML, CSS, JavaScript">   
    <link rel="stylesheet" href="calc.css">
</head>
<body>
    <h2 align="center">CALCULATOR</h2>
<div class="borderContainer">
<div class="container" >
<div class="resultsContainer" ><input type="text" id="results" name="results" class="result" readonly></div>
<div class="numPadContainer">
    <p>
    <input type="button" value="7" class="button black" onclick='calc("7")'>
    <input type="button" value="8" class="button black" onclick='calc("8")'>
    <input type="button" value="9" class="button black" onclick='calc("9")'>
    <input type="button" value="/" class="button opr" onclick='calc("/")'>
    </p>
    <p>
    <input type="button" value="4" class="button black" onclick='calc("4")'>
    <input type="button" value="5" class="button black" onclick='calc("5")'>
    <input type="button" value="6" class="button black" onclick='calc("6")'>
    <input type="button" value="*" class="button opr" onclick='calc("*")'>
   </p>
    <p>
    <input type="button" value="1" class="button black" onclick='calc("1")'>
    <input type="button" value="2" class="button black" onclick='calc("2")'>
    <input type="button" value="3" class="button black" onclick='calc("3")'>
    <input type="button" value="-" class="button opr" onclick='calc("-")'>
    </p>
    <p>
    <input type="button" value="0" class="button black" onclick='calc("0")'>
    <input type="button" value="00" class="button black" onclick='calc("00")'>
    <input type="button" value="." class="button black" onclick='calc(".")'>
    <input type="button" value="+" class="button opr" onclick='calc("+")'>

    </p>
    <p>
    <input type="button" value="mod" class="button opr" onclick='calc("%")'>
    <input type="button" value="C" class="button red" onclick='results.value=""'>
    <input type="button" value="=" class="button orange" onclick='doOper()' >

   </p>
</div>
</div>
</div>
<script>
    var answered=false;
    function calc(val) 
    {
        optrs = "+-*/%"
        if (answered && !optrs.includes(val)) 
        {
         
                //alert("not included opr - clearing ans")
                document.getElementById("results").value="";
                
            
        }
        document.getElementById("results").value += val;
        answered=false;
    }
    function doOper()
    {
        try
        {
            dispAns(eval(document.getElementById("results").value));
            
        }
        catch
        {
            dispAns("Input Error");
        }
    }
    function dispAns(output) 
    {
        document.getElementById("results").value = output;
        answered=true;
    }

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

body 
{
    background-color:black;
    color:lightgrey;
}



.borderContainer 
{
    position:relative;
    top:10px;
    left:36%;
    width:370;
    height:500;
    background-color: lightgrey;
}
.container
{
    position:relative;
    left:8%;
    top:25px;
    width:310px;
    height:450px;
    background-color:#3d4543;
    border-radius:3px;
}
.numPadContainer
{
    position:relative;
    left:25px;
    top:40px; 
}
.result
{
    position:relative;
    left:24px;
    top:28px;
    background-color:#bccd95;
    color:black;
    text-align:right;
    height:40px;
    width:260px;
    border-radius:10px;
    border-color:white;
}
.button
{
    position:relative;
    color:white;
    border:none;
    border-radius:8px;
    cursor:pointer;
    width:48px;
    height:42px;
    margin-left:10px;
}
.button.black
{
    background-color:#303030; 
    border-radius:8px;
    border-bottom:black 2px solid;  
    border-top:2px 303030 solid; 
}
.button.red
{
    background-color:#cf1917;  
    border-bottom:black 2px solid; 
    font-weight:bold;
}
.button.opr
{
    background-color:grey;  
    border-bottom:black 2px solid; 

}
.button.orange
{
    background-color:orange;
    border-bottom:black 2px solid;
    width:110px;
    font-weight:bold;
}

OUTPUT:

Code: TBD

<html>
    <head>
        <title> Password Validation </title>
        <style>
            body {
                background-color:black;
                color:green;
            }
            h1 {
                text-align:center;
                text-decoration:underline;
            }
           .inputTxt{
                color:black;
                background-color:lightgrey;
                border:green 2px solid;
                padding-left:10px;
                width:170px;
                height:24px;
                }
            .lbl {
                 padding:25px;
                 font-weight:bold;
                   
                }
            
            .button {
                background-color:lightgreen;
                color: black;
                border:2px solid green;
                border-radius:15px;
                font-size: 15px;
                vertical-align:9px;
                font-family:"sans-serief";
                font-variant:small-caps;
                font-weight:bold;
                width:170px;
                height:30px;
                text-align:center;
            }
            
        </style>
    </head>
    
    <body>
        <h1 > Password Validation </h1>
            <div align="center">
                <br>
                <form id="frmPw">
                    <table align="center">
                    <tr> 
                        <td> <label for = "idPw" class="lbl"> Password</label> </td>
                        <td> <input type="Password" name="namPw" id="idPw" class="inputTxt" placeholder="Pls enter the Password" minlength=8 maxlength=12>  </td>
                    </tr>
                    </table>
                <br><br>
                <input type="button" value="CLEAR" class="button" onclick="doClear()">&nbsp;&nbsp;
                <input type="submit" value="SUBMIT" class="button" onclick="validatePw()">
                </form>
            </div>
    </body>

    <script>
        function validatePw() {
            const pw = document.getElementById("idPw").value;
            var msg="";
            if (pw.length>12) msg += "Max 12 characters.  Limit exceeded....";
            else if (pw.length<8) msg += "Min 8 characters needed...";
            var containsNumbers = /\d/.test(pw); //TBD
            if (!containsNumbers) msg += "Atleast one digit expected    ";
            var containsUcaseAlphabet = /[A-Z]/.test(pw);  
            if (!containsUcaseAlphabet) msg+="Atleast one Upper Case Alphabet expected  ";
            var containsSpecial = /[!@#$%^&*]/.test(pw); 
            if (!containsSpecial) msg+="Atleast one Special Character expected";             
            if (msg  !== null && msg!='')  //TBD
            {
                alert(msg);
                return false;
            }
            else 
            {
                alert("Password Validation passed successfully...");
                return true;
            }
        }

        function doClear() {
            document.getElementById("frmPw").reset();      
        }
    </script>
</hmtl>

Output:

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scaler=1">
    <style>
        body {
            background-color:black;
            color:green;
        }
        h1 {
            text-align:center;
            font-family:"courier";
            font-size:3em;
        }
        .inputTxt{
            background-color:lightgrey;
            width:250px;
            height:30px;
            color:black;
            border:green 2px solid;
            position:absolute;
            top:85px;
            left:560px;
            padding-left:10px;
            font-size:20px;
            font-family:"courier";
        }
        .todoList {
            border:solid 2px white;
            background-color:lightgreen;
            color:black;
            width:250px;
            position:fixed;
            top:115px;
            left:558px;
        }
        .lstitm {
             border:solid 0.5px green;
        }
        .delBtn {
            background-color:darkgreen;
            color:white;
            cursor:pointer;
            border:solid 2px black;
        }
        .paraText {
            padding:15px;
           // font-weight:bold;
            font-size:20px;
            font-family:"courier";
         }

    </style>
</head>
<body>
    <h1> TO-DO LIST</h1>
    <div id="divToDo" class="todoList"></div>
    <input id="txtInput" class="inputTxt" placeholder="Type your Task">  
    <script>
        var cnt=0;   //Maintain cnt for number of tasks here initialize to 0
        const input = document.getElementById("txtInput");     //Taking text control and assigning in input
        input.addEventListener("keydown",
            function(event) 
            {
                if (event.key=="Enter" && !input.value=="")   //Enter key pressed and textbox is not empty
                {
                    const para = document.createElement("para");
                    para.className="paraText";
                    para.textContent = input.value;           //assigning input value into para

                    const del = document.createElement("span"); //Delete button "x"
                    del.textContent = "X";          
                    del.className = "delBtn";

                    const listitem = document.createElement("div"); //creating parent container for both para(input text) and del
                    listitem.className="lstitm";
                    listitem.appendChild(del);
                    listitem.appendChild(para);

                    const list = document.getElementById("divToDo");  //adding that div listitem into another parent div(id=divToDo)
                    list.appendChild(listitem);
                    cnt++;                              //while adding the listitem, increment the count
                    input.value = "";
    
                    del.addEventListener("click",
                        function() 
                        {
                            cnt--;          //del button pressed, so count decremented and listitem removed
                            this.parentElement.remove();
                            if (cnt==0) 
                            {
                                alert("Wow!  Awesome!!! You have completed all Works!!! Now Plant a Tree...");
                            }
                        });           
                }
            });
    </script>

</body>
</html>

Output:

<html>
    <head>
        <title> SSLC Marks </title>
        <style>
            body 
            {
                background-color:black;
                color:pink;
                font-family:arial;
            }
            h1 
            {
            text-align:center;
            color:pink;
            font-variant:small-caps;
            }

            th {
                background-color:pink;
                color:black;
                font-size: 20px;
                font-variant:small-caps;
               }
           .inputTxt{
                color:black;
                background-color:lightgrey;
                border:green 2px solid;
                padding-left:10px;
                width:170px;
                height:30px;
                font-size:20px;
                font-family:"Arial";
                }
            .lbl {
                 padding:25px;
                 font-weight:bold;
                   
                }
            
            .button {
                background-color:lightgrey;
                color: black;
                border:2px solid pink;
                border-radius:15px;
                font-size: 15px;
                vertical-align:9px;
                font-family:"sans-serief";
                font-variant:small-caps;
                font-weight:bold;
                width:170px;
                height:30px;
                text-align:center;
            }
            .output {
                font-family:"Arial";
                font-size:20px;
                font-weight:bold;
                padding-left:25px;
            }


            
        </style>
    </head>
    
    <body>
        <h1> SSLC Marks </h1>
        <table border="1" align=center>
            <thead>
                <th>Subjects</th> <th>Marks</th> 
            </thead>
            <tbody>
            <form id="frmMarks">
            <tr> 
                <td > <label for = "idTamil" class="lbl"> Tamil</label> </td>
                <td> <input type="text" name="txtTamil" id="idTamil" class="inputTxt">  </td>
            </tr>
            <tr> 
                <td> <label for = "idEng"  class="lbl"> English</label> </td>
                <td> <input type="text" name="txtEng" id="idEng" class="inputTxt"> </td>
            </tr>
            <tr> 
                <td> <label for = "idMath" class="lbl"> Maths</label> </td>
                <td> <input type="text" name="txtMath" id="idMath" class="inputTxt"> </td>
            </tr>
            <tr> 
                <td> <label for = "idSci"  class="lbl"> Science</label> </td>
                <td> <input type="text" name="txtSci" id="idSci" class="inputTxt"> </td>
            </tr>
            <tr> 
                <td> <label for = "idSS"  class="lbl"> Social Science</label> </td>
                <td> <input type="text" name="txtSS" id="idSS" class="inputTxt"> </td>
            </tr>
            <tr><td></td></tr<tr><td></td></tr>
             <tr> 
                <td> <label for = "idTot" class="output">Total Marks</label> </td>
                <td align="center"><output name="totMarks" id="idTot" class="output" form="frmMarks"></output</td>
            </tr>  
             <tr> 
                <td > <label for = "idPercent" class="output">Percentage %</label> </td>
                <td align="center"><output name="percent" id="idPercent" class="output" form="frmMarks"></output</td>
            </tr>  
        </tbody>
        </table>
        <br><br>
        <div align="center">
            <input type="button" value="CLEAR" class="button" onclick="doClear()"> &nbsp;&nbsp;&nbsp;
            <input type="button" value="CALC TOTAL & %"  class="button" onclick="calcTot()">
        </div>
        </form>

    </body>
    
    <script>
        function calcTot() {
            const tot = parseInt(document.querySelector("#idTamil").value) + parseInt(document.querySelector("#idEng").value) + parseInt(document.querySelector("#idMath").value) + parseInt(document.querySelector("#idSci").value) + parseInt(document.querySelector("#idSS").value);
            document.querySelector("#idTot").innerHTML = tot;
            alert(tot/5);
            document.getElementById("idPercent").innerHTML = Math.round((tot/5)*100)/100+"%";
        }
        function doClear() {
            document.querySelector("#frmMarks").reset();
            document.querySelector("#idTot").innerHTML="";    
            document.getElementById("idPercent").innerHTML="";       
        }
    </script>
</hmtl>

Output: