フォームの内容を元に任意のUIに遷移

Result

フォームの内容から別のUIに遷移する、みたいなの
やってる事は割とシンプルで、作成ボタンをクリックするとレイアウト全体を包括する親ブロックのclassを別のclassと入れ替えてCSSで見た目を整えてるだけです
サンプルはバッジっぽいUIですが他にも応用できますね

何かに使えそうかなぁと思ったので備忘録です
例えば非予約なイベント会場等で来場者カードを作る時に来場者にタブレットで入力してもらうと来場者カード発行の手続きプロセスを簡略できる、とか

jQuery

//ボタンクリックで全体のclassを入れ替えて、フォーム内容とカードUIをトグル
$(".js-switch").click(function() {
	$(".main-content").toggleClass("as-card");
});


//画像を送信前にプレビューする
var reader = new FileReader();
reader.onload = function(e) {
	$("#imager").attr("src", e.target.result);
};

function readURL(input) {
	if (input.files && input.files[0]) {
		$("#imager").css("visibility",'visible');
		reader.readAsDataURL(input.files[0]);
	}
}

$("#image-input").change(function() {
	readURL(this);
});

HTML及びCSSはPenをご参照下さい

via

CSS Grid: Form to Badge