In this post I will utilize the fundamentals of Javascript for dynamic content in a stylish webpage.

Dynamic Content Using Javascript

Construction of Webpages

I figured I would touch on the main elements that would be used to build a webpage.

html	the coding language used to create the actual elements we see. Text, images, link, etc.
css	the styling of the HTML document. This is used to determine where and how the HTML elements are displayed. Can be used to capture user interaction events to change UI.
PHP	PHP is the server side scripting language. Used for backend for data management. Primary used for database retrieval.
Javascript	This is the client side scripting language. The advantage of using Javascript is async loading. Meaning the whole HTML document will not need to be reload to update a change in data. It can be used to update the UI as well as the data supplied to the webpage.

Now with this understanding of using Javascript, I will show you a simple example of using it to load HTML elements from supplied data. The data in this example is a static list created in the script but the code could be changed for a dynamically retrieved list.

Code

Here I will supply the elements in the webpage example and explain the important elements.

General Page Setup

Simple page with a center div. The Javascript elements will be created inside the centered div when the script is called.

body onload="buildUI()"

this attribute is used to call the Javascript function called buildUI() when the document is done loading

<!DOCTYPE html>
<html>
<head>
<title>Javascript</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

/*CSS code here*/

</style>
</head>
<body onload="buildUI()">
    <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>
<script>

//Javascript code here

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

CSS

CSS styling for the webpage. General setup for the main HTML document with a centered div.

.center

width	is set to 90% because the hover effect we will set will make the child elements grow.
margin	auto will help center content in page

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: 100vw;
	height: 100vh;
	margin: auto;
	padding: 0;
}

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

Javascript Dynamic Content Created In Div

.list

display	using the DOM Table display properties
margin	auto for centering content
padding	0 for no padding

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

UL To Hold List Items

ul

width

parent element of object that will have a hover effect. Reduce size so they element doesn't grow out of screen.

ul {
	width: 90%;
}

List Item - The Dynamic Content

li

display	block properties used
padding	slight space around list items
margin	to center element
transition	animates all element attributes with a duration of 1 sec after user moves cursor away from element

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

Data In List Item

li span

display	lines items in a single row
width	sets the width of each element to 30% of the parent. In our example, there are 3 elements in each list row

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

List Hover Effect

li:hover

box-shadow	when user hovers, creates a shadow around the element
background-color	change the background color when user hovers over element

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

Change Text For List Hover Effect

li:hover span

color	change the text color on list hover
padding	add some more padding to the text when user hovers over list
transform	scales the size of the text by a multiplier of 2 on hover

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

List Heading Styling

.header

Simple styling of the list header element.

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

Column Names For List Items

.header span

These elements are styled the same as the dynamically create content by Javascript so the text lines up vertically.

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

Javascript

Here I will breakdown the main parts.

const names	a static list of usernames
buildUI	the function called when the document is ready. This loads the dynamic content. The script will find the classname of "list". The variable is returned as an array. We just need the first instance, which is the only instance in the document. A for loop is used to build the content.
randomName	simple math function to get a number between 0 and 10. This is returned to be used as the index of the names array to build the content.
randomChoice	just a silly added column put into the list to show more dynamic content creation. The function returns "Yes" if the random number it creates is even or "No" if odd.
removeItem	added this function to show how to implement Javascript with user interactions to UI

	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();
	}

Result

Hope this was useful.