Skip to content

Instantly share code, notes, and snippets.

@desoga10

desoga10/index.html

Created April 8, 2019 14:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save desoga10/8412b2a05c316bf6d3a86214f8b1ca5d to your computer and use it in GitHub Desktop.
Save desoga10/8412b2a05c316bf6d3a86214f8b1ca5d to your computer and use it in GitHub Desktop.
Download ZIP
Data table
Raw
index.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<title>Player Register App</title>
</head>
<body>
<!-- Navbar Section -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark d-flex justify-content-center">
<h1 class="pl-4 text-white" id="header">
<i class="far fa-futbol pr-3"></i>
Soccer Player Register App
</h1>
</nav>
<!-- Form Section -->
<div class=" container mt-4">
<div class="pt-5 form row">
<div class="col-lg-12 card-body">
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="firstname">First Name</label>
<input type="text" class="form-control" id="firstname" placeholder="First Name" required />
</div>
<div class="form-group col-md-6">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" id="lastname" placeholder="Last Name" required />
</div>
</div>
<div class="form-group">
<label for="inputAddress">Residence</label>
<input type="text" class="form-control" id="inputAddress" placeholder="123 Cotes Str" required />
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputPosition">Position</label>
<input type="text" class="form-control" id="inputPosition" required />
</div>
<div class="form-group col-md-4">
<label for="inputCountry">Country</label>
<select id="inputCountry" class="form-control" required>
<option selected>Choose...</option>
<option>USA</option>
<option>Argentina</option>
<option>Iran</option>
<option>Australia</option>
<option>Nigeria</option>
<option>France</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputJersey">Jersey Number</label>
<input type="number" class="form-control" id="inputJersey" required />
</div>
</div>
<button type="submit" class="btn btn-primary">
Register Player
</button>
</form>
</div>
</div>
</div>
<!-- Table Section -->
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Residence</th>
<th>Position</th>
<th>Country</th>
<th>Jersey Number</th>
<th>Delete</th>
</tr>
</thead>
<tbody id="playerlist">
</tbody>
</table>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment