<body>
	<form class="form is-light" action="" method>
		<div class="form__header">
			<p class="filename">sign-up.html</p>
			<div class="icon-wrapper">
				<a class=" data-toggle" onclick="showData()">&#128190;</a>
				<a class="toggle">&#127769;</a>
			</div>
		</div>
		<div class="form__body">
			<p>Full name</p>
			<input type="text " class="collect" required>
			<p>Email</p>
			<input type="text " class=" collect" required>
			<p>Phone Number</p>
			<input type="text " class=" collect" required>
			
			<input class="enter " type="button" value="Enter" onclick="return retrieveData(), showData() ">
		</div>
	</form>

	<div class="form-data form">
		<div class="form__header">
			<p class="filename">sign-up.json</p>
			<div class="icon-wrapper">
				<a class=" data-toggle" onclick="showData()">&#128190;</a>
				<a class="toggle">&#127769;</a>
			</div>
		</div>
		<div class="form__body ">
			<pre id="json" class="json-output">
			
			</pre>
		</div>
	</div>

</body>
// Extensions
%placement {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

html {
	background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(3,235,255,1) 0%, rgba(152,70,242,1) 100.2% );
}

// Colour modes 
.is-light {
		background-color: #FAFAFA;
		color: #455A64;
			.form__header {
				background-color: #E0E0E0;
			}
			input {
				box-shadow: inset 0px 0px .5px .5px #CFD8DC;	
			}
			input.enter {
			&:hover {
				background-color: #EEEEEE;
				box-shadow: inset 0px 0px .8px .8px #CFD8DC;
				}
			}	
 }

.is-dark {
	background-color: #263238;
	color: #E0E0E0;
		.form__header {
			background-color: darken(#263238, 5%);
		}
		input {
			background-color: lighten(#263238, 5%) ;
			box-shadow: none;		
			color: white;
		}
		input.enter {
			box-shadow: none;
			color: inherit;
				&:hover {
					background-color: #455A64;
					box-shadow: none;
				}
		}
	
}

.form {   
	@extend %placement;
	box-shadow: 4px 3px 7px 2px #00000040;
	width: 550px;
  	height: 380px;
	border-radius: 10px;
	display: flex; 
	flex-direction: column;
	overflow: hidden;
	font-family: 'Monda', sans-serif;
	font-weight: 300;
	font-size: 13px;
		&__header {
			border-radius:10px 10px 0px 0px;
			display: flex;
			flex-direction: row;
			justify-content: space-between; 
		}
		&__body  {
			padding: 1rem;
			display: flex;
			flex-direction: column;
		}
}

// Form inputs 
input{
	border: 0;
	border-radius: 5px;
	padding: .6rem;
		&:focus{
		outline:none;
	}
}

input.enter{
	margin-top: 1rem;
	font-family: inherit;
	text-transform: uppercase;
	letter-spacing: 1.2px;
}

// Sub-components
.filename{
	margin-left: 20px;
	letter-spacing: 1px;
}

.toggle, .data-toggle {
	cursor: pointer;
	font-size: 20px; 
	padding: .5em;
	border: 0;
	background-color: transparent;
	&:focus{
		outline: none;
	}
}

.icon-wrapper {
	margin-top: 5px;
}


.form-data {
	display: none;
	background-color: #616161;
	color: white;
	.form__header {
		background-color: #424242;
	}
	
}

pre {
	white-space: pre-wrap;
}
/* Dark/light mode controls */
let form = document.querySelector(".form");
let moonToggle = document.querySelector("a.toggle");

function toggleClass() {
	form.classList.toggle("is-light");
	form.classList.toggle("is-dark");
}

moonToggle.addEventListener('click', toggleClass);

// Retrieve data from form 
function retrieveData() {
	let entries = document.querySelectorAll("input.collect");
	let formEntries = {
			name: entries[0].value,
			email: entries[1].value,
			phone: entries[2].value
		}
	let formJSON = JSON.stringify(formEntries);
	let outputTarget = document.querySelector(".json-output");
	//let jsonInsert = document.createElement("code");
	outputTarget.textContent = formJSON;
	//utputTarget.appendChild(jsonInsert);
	
}

// Toggle data pane 


function showData() {
	var dataPane = document.querySelector("div.form-data");
	if ( dataPane.style.display === "none") {
		dataPane.style.display = "block";
	}
	else {
		dataPane.style.display = "none";
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.