Summary

In this example below you will see how to do a Summary with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by alexnewman, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright alexnewman ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Summary</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <main>
	<article>
	<h2>Banking</h2>
	<section>
		<div class="summary-container positive">
			<div class="main-summary">
				<div class="total-value summary-item">
					<dt>Net Deposit</dt>
					<dd>+£1,100</dd>
				</div>
				<div class="main-item-summary">
					<div class="summary-item">
						<dd>£1,600</dd>
						<dt>Deposits</dt>
					</div>
					<div class="summary-item">
						<dd>£500</dd>
						<dt>Withdrawals</dt>
					</div>
				</div>
			</div>
		</div>
		<div class="details-container">
			<div class="detail-item">
				<dt>Deposit Count:</dt>
				<dd>100</dd>
			</div>
			<div class="detail-item">
				<dt>Withdrawal Count:</dt>
				<dd>5</dd>
			</div>
			<div class="detail-item">
				<dt>Avg. Deposit:</dt>
				<dd>£160</dd>
			</div>
			<div class="detail-item">
				<dt>Avg. Withdrawals:</dt>
				<dd>£100</dd>
			</div>
		</div>
	</section>
</article>
	<article>
		<h2>Gaming</h2>
		<section>
			<div class="summary-container negative">
				<div class="main-summary">
					<div class="total-value summary-item">
						<dt>Net Hold</dt>
						<dd>-£1,500</dd>
					</div>
					<div class="main-item-summary">
						<div class="summary-item">
							<dd>£1,500</dd>
							<dt>Stakes</dt>
						</div>
						<div class="summary-item">
							<dd>£3,000</dd>
							<dt>Wins</dt>
						</div>
					</div>
				</div>
			</div>
			<div class="details-container">
				<div class="detail-item">
					<dt>Avg. Stake:</dt>
					<dd>£20</dd>
				</div>
				<div class="detail-item">
					<dt>Largest Win:</dt>
					<dd>£500</dd>
				</div>
				<div class="detail-item">
					<dt>Cash:Bonus Stake Ratio:</dt>
					<dd>80:20</dd>
				</div>
			</div>
		</section>
	</article>
	<article>
		<h2>Bonusing</h2>
		<section>
			<div class="summary-container negative">
				<div class="main-summary">
					<div class="total-value summary-item">
						<dt>Net Deposit - Bonus</dt>
						<dd>-£700</dd>
					</div>
					<div class="main-item-summary">
						<div class="summary-item">
							<dd>£1,100</dd>
							<dt>Net Deposit</dt>
						</div>
						<div class="summary-item">
							<dd>£1,800</dd>
							<dt>Bonus Amount</dt>
						</div>
					</div>
				</div>
			</div>
			<div class="details-container">
				<div class="detail-item">
					<dt>Bonus Fulfilment:</dt>
					<dd>£800</dd>
				</div>
				<div class="detail-item">
					<dt>Avg. Bonus Amount:</dt>
					<dd>£500</dd>
				</div>
				<div class="detail-item">
					<dt>Adjustment:Bonus Ratio:</dt>
					<dd>20:80</dd>
				</div>
				<div class="detail-item">
					<dt>Bonus Count</dt>
					<dd>165</dd>
				</div>
			</div>
		</section>
	</article>
</main>
<footer>
	<button data-value="positive">Make Positive</button>
	<button data-value="negative">Make Negative</button>
	<button data-value="neutral">Make Neutral</button>
</footer>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/alexnewman/summary-LeYzNe */
article {
  margin: 0 10px;
  padding: 10px;
  max-width: 45rem;
}

section {
  background: #eaeaea;
  padding: 15px;
  font-family: roboto,Arial,Sans-Serif;
  font-weight: 500;
}

.main-summary {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 10px;
  color: #1f1f1f;
}
.positive .main-summary, .negative .main-summary {
  color: #fff;
}
.positive .main-summary {
  background: #4ea300;
}
.negative .main-summary {
  background: #da302b;
}
.main-summary dt,
.main-summary dd {
  margin: 0;
  display: inline;
}
.main-summary dd {
  font-weight: bold;
}

.main-item-summary {
  display: flex;
  width: 100%;
  opacity: 0.8;
}
.main-item-summary dd {
  font-size: 22px;
}
.main-item-summary dt {
  font-size: 13px;
}

.summary-item {
  display: flex;
  flex-direction: column;
  width: 50%;
  align-items: center;
}

.summary-container {
  display: flex;
  background: #fff;
  flex-direction: column;
}

.total-container {
  margin-left: 1rem;
}

.total-value {
  width: 100%;
  margin-bottom: 15px;
}
.total-value dd {
  font-size: 45px;
  font-weight: bold;
}

.details-container {
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  color: #1f1f1f;
}
.details-container dt,
.details-container dd {
  margin: 0;
}
.details-container dd {
  font-weight: bold;
}
.details-container dt {
  margin-right: 5px;
  opacity: 0.7;
}

.detail-item {
  display: flex;
  margin: 15px 0 0;
  min-width: 50%;
}
.detail-item:nth-child(even) {
  justify-content: flex-end;
  margin-left: auto;
}

html {
  font-size: 10px;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  align-content: space-around;
  flex-direction: column;
  background: #fff;
  font-size: 1.6rem;
}

main {
  height: 100%;
  width: 100%;
  justify-content: center;
  display: flex;
}

* {
  -webkit-font-smoothing: antialiased;
}

footer {
  margin-bottom: auto;
  align-self: flex-start;
}


/*Downloaded from https://www.codeseek.co/alexnewman/summary-LeYzNe */
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

[].concat(_toConsumableArray(document.querySelectorAll('button'))).forEach(function (el) {
	el.addEventListener('click', function (e) {
		var container = document.querySelector('.summary-container');
		console.log(container);
		container.classList = e.target.dataset.value + ' summary-container';
	});
});

Comments