Javascript

by r2creations24

HTML

<div class="center"> 
	<div>
			<div class="header">Main Header</div>
			<div class="header"><span>ID</span><span>Username</span><span>Drink Coffee?</span></div>
			<ul class="list"></ul>
	</div>
</div>

CSS

html {
	background-color: #004e5c;
}

body {
	color: whitesmoke;
  background-color: #004e5c;
	display: flex;
	flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
	width: 100%;
	margin: auto;
	padding: 0;
}

.center {
	width: 90%;
	margin: auto;
}

.list {
	display: table;
	margin: auto;
	padding: 0;
}

ul {
	width: 90%;
}

li {
	display: block;
	padding: 10px;
	margin: auto;
	transition: all 1s;
}

li span {
	display: inline-block;
    width: 30%;
}

li:hover {
	box-shadow: 0 1px 20px 2px #9bd3ddb5;
    background-color: white;
}

li:hover span {
	color: black;
	padding: 10px 0;
    transform: scale(2);
}

.header {
	padding: 15px;
	text-align: center;
	border-left: black 2px solid;
	border-bottom: black 2px solid;
	background-color: coral;
}

.header span {
	display: inline-block;
    width: 30%;
}/*CSS code here*/

JavaScript

const names = ["Tom", "Chris", "Jessica", "Paul", "Randy", "Joe", "Melissa", "Chuck", "Karen", "Wiston"];

	function buildUI(){
		var listElement = document.getElementsByClassName("list")[0];
		for(let i = 1; i < 11; i++){
			listElement.innerHTML += `<li onclick="removeItem(this);"><span>${i}</span><span>${names[randomName()]}</span><span>${randomChoice()}</span></li>`;
		}
	}

	function randomName(){
		var randomNum = Math.floor(Math.random() * 10);
		return randomNum;
	}

	function randomChoice(){
		var randomNum = Math.floor(Math.random() * 10);
		return randomNum % 2 ? "Yes" : "No";
	}
  
	function removeItem(element){
		element.remove();
	}
  
 buildUI();