// 1. get button
// 2. install onclick activity
// 3. after click install the preview box
// 4. create div
// 5. create input to add in div
// 6. add div to preview box

//get button id
var objBtn = document.getElementById('submit');
// onclick
objBtn.onclick = function(){
	var inputName = document.getElementById('nameInput').value;
	var inputAge = document.getElementById('ageInput').value
	var inputAddr = document.getElementById('addrInput').value;

	// create div

	var objDiv = document.createElement('div');
	objDiv.className = 'infoBox';

    // inside the div create elements div
	var objImg = document.createElement('img');
	objImg.className ='insideImg';
	objImg.src = "images/head1.png";
	objDiv.appendChild(objImg);

	var objP1 = document.createElement('p');
	objP1.innerHTML = 'Name：'+ inputName;
	objDiv.appendChild(objP1);

	var objP2 = document.createElement('p');
	objP2.innerHTML ='Age:' + inputAge;
	objDiv.appendChild(objP2);

	var objP3 = document.createElement('p');
	objP2.innerHTML ='Address:' + inputAddr;
	objDiv.appendChild(objP3);

	var objInput = document.createElement('input');
	objInput.type ='button';
	objInput.className ='deleteBtn';
	objInput.value = 'Click to Delete';
	objInput.onclick = function(){
		console.log(this);

		objPreview.removeChild(this.parentNode);
	}
	objDiv.appendChild(objInput);

	var objPreview = document.getElementById('preview');
	objPreview.appendChild(objDiv);


}