Skip to content
Open
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions client/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules
dist
87 changes: 87 additions & 0 deletions client/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
body{
font-family: sans-serif;
}
.main{
align-items: center;
padding: 15px;
display: flex;
justify-content: center;
margin-bottom: 40px;
margin-top: 20px;
}
#load_button{
padding: 10px;
font-size: 16px;
font-weight: 600;
border-radius: 10px;
}

#table_tag{
width: 100%;
border: 2px solid;
border-radius: 10px;
border-color: darkgray;
padding: 5px;
padding-top: 10px;
padding-bottom: 10px;
box-shadow: 2px 5px 2px gainsboro;
border-collapse: separate;
border-spacing: 0 1em;
display:none;


}

#table_tag tr{
border-bottom: 2px solid;
}
#table_tag th{
font-size: 20px;
padding: 10px;
text-align: center;
}
#table_tag td{
text-align: center;
font-size: 1em;
/* box-sizing: border-box; */

}
td input{
height: 30px;
font-size: 1em;
background-color: white;

}
.btn{
margin-right: 10px;
background-color: dodgerblue;
color: white;
border-radius: 12px;
}
.btn1{
background-color: coral;
border-radius: 12px;
}

#input_tag{
/* display: flex; */
justify-content: space-around;
text-align: center;
font-size: 1em;
margin-bottom: 10px;
display:none;
}

#input_tag input{
height: 30px;
font-size: 1em;
background-color: white;
border-color: #cbb3b3;
border-radius: 10px;
}
#btn{
padding: 10px;
padding-bottom: 25px;
background-color: dodgerblue !important;
color:white
}
28 changes: 28 additions & 0 deletions client/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assignment 5</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="main">
<button id="load_button">Load Data</button>
</div>
<form id="input_tag">
<input type="text" placeholder="First Name" required/>
<input type="text" placeholder="Middle Name" />
<input type="text" placeholder="Last Name" required/>
<input type="email" placeholder="Email" required/>
<input type="number" placeholder="Phone Number" required/>
<input type="text" placeholder="Role" required />
<input type="text" placeholder="Address" required />
<input type="submit" id="btn" value="Add User" />
<input type="reset" id="reset" hidden/>
</form>
<table id="table_tag"></table>
<script type="module" src="./dist/tabular.js"></script>
</body>
</html>
Loading