rusco · June 13, 2024 08:23
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            display: flex;
            min-height: 98vh;
            align-items: center;
            background-color: #f8f9fa;
        }

        .container {
            padding: 1rem 2.5rem 1.5rem 2.5rem;
            margin: auto;
        }

        .card {
            animation: 0.9s ease-in-out 0s 1 fadeIn;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            transition: 0.3s;
        }

        .card-color {
            background: rgb(235, 235, 235);
            background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(252, 252, 252, 1) 42%, rgba(255, 255, 255, 1) 100%);
        }

        .card:hover {
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        }

        .form-row {
            margin-top: 1rem !important;
            margin-bottom: 1rem !important;
            padding: 0.5rem;
        }

        .form-row label {
            display: block;
        }

        .input-text {
            font-weight: 500;
            background-color: #f0f0f0;
            padding: 0.6rem 0.3rem 0.6rem 0.6rem;
            border-width: 0;
            border-radius: 0.3rem;
            outline: none;
        }

        .input-text-block {
            display: block;
        }

        .input-text:focus {
            border-color: 1px solid #444;
        }

        .input-text:disabled {
            opacity: 0.7;
            cursor: auto;
        }

        .btn-submit,
        .btn-edit {
            padding: 0.7rem;
            text-decoration: none;
            color: #FFF;
            border: none;
            border-radius: 0.8rem;
            font-weight: bold;
        }

        .btn-submit {
            background-color: #000;
            width: 100%;
        }

        .btn-edit {
            background-color: transparent;
        }

        path {
            fill: #aaa;
        }

        button:hover {
            opacity: 0.9;
        }

        button:focus {
            opacity: 1;
        }

        button:hover,
        button:focus {
            cursor: pointer;
        }

        button:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }

        .d-flex {
            display: flex;
        }

        .justify-content-end {
            justify-content: end;
            justify-content: flex-end;

        }

        .m-2 {
            margin: 2rem;
        }

        .my-1 {
            margin-top: 1rem;
            margin-bottom: 1rem;
        }

        .mx-auto {
            margin-right: auto;
            margin-left: auto;
        }

        .w-100 {
            width: 100%;
        }

        .text-center {
            text-align: center;
        }
    </style>
    <title>Form to API, 13.06.2023</title>
 </head>

 <body>
    <div class="container card card-color">
        <form action="" id="sampleForm">
            <h2>Sample Form to JSON API</h2>
            <div class="form-row">
                <label for="FirstName">First Name</label>
                <input type="text" class="input-text input-text-block w-100" id="FirstName" name="FirstName">
            </div>
            <div class="form-row">
                <label for="LastName">Last Name</label>
                <input type="text" class="input-text input-text-block w-100" id="LastName" name="LastName">
            </div>
            <div class="form-row">
                <label for="Email">Email</label>
                <input type="email" class="input-text input-text-block w-100" id="Email" name="Email">
            </div>
            <div class="form-row mx-auto">
                <button type="submit" class="btn-submit" id="btnSubmit">
                    Submit
                </button>
            </div>
        </form>
    </div>
    <script type="text/javascript">
        //date: 13.06.2024
        const sampleForm = document.querySelector("#sampleForm");
        if (sampleForm) {
            sampleForm.addEventListener("submit", (evt) => {
                evt.preventDefault();
                let form = new FormData(sampleForm);
                let entries = Object.fromEntries(form);
                let jsonData = JSON.stringify(entries);
                console.log("jsonData:  ", jsonData);
            });
        }
    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	body {
	display: flex;
	min-height: 98vh;
	align-items: center;
	background-color: #f8f9fa;
	}

	.container {
	padding: 1rem 2.5rem 1.5rem 2.5rem;
	margin: auto;
	}

	.card {
	animation: 0.9s ease-in-out 0s 1 fadeIn;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	border-radius: 5px;
	transition: 0.3s;
	}

	.card-color {
	background: rgb(235, 235, 235);
	background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(252, 252, 252, 1) 42%, rgba(255, 255, 255, 1) 100%);
	}

	.card:hover {
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
	}

	.form-row {
	margin-top: 1rem !important;
	margin-bottom: 1rem !important;
	padding: 0.5rem;
	}

	.form-row label {
	display: block;
	}

	.input-text {
	font-weight: 500;
	background-color: #f0f0f0;
	padding: 0.6rem 0.3rem 0.6rem 0.6rem;
	border-width: 0;
	border-radius: 0.3rem;
	outline: none;
	}

	.input-text-block {
	display: block;
	}

	.input-text:focus {
	border-color: 1px solid #444;
	}

	.input-text:disabled {
	opacity: 0.7;
	cursor: auto;
	}

	.btn-submit,
	.btn-edit {
	padding: 0.7rem;
	text-decoration: none;
	color: #FFF;
	border: none;
	border-radius: 0.8rem;
	font-weight: bold;
	}

	.btn-submit {
	background-color: #000;
	width: 100%;
	}

	.btn-edit {
	background-color: transparent;
	}

	path {
	fill: #aaa;
	}

	button:hover {
	opacity: 0.9;
	}

	button:focus {
	opacity: 1;
	}

	button:hover,
	button:focus {
	cursor: pointer;
	}

	button:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	}

	.d-flex {
	display: flex;
	}

	.justify-content-end {
	justify-content: end;
	justify-content: flex-end;

	}

	.m-2 {
	margin: 2rem;
	}

	.my-1 {
	margin-top: 1rem;
	margin-bottom: 1rem;
	}

	.mx-auto {
	margin-right: auto;
	margin-left: auto;
	}

	.w-100 {
	width: 100%;
	}

	.text-center {
	text-align: center;
	}
	</style>
	<title>Form to API, 13.06.2023</title>
	</head>

	<body>
	<div class="container card card-color">
	<form action="" id="sampleForm">
	<h2>Sample Form to JSON API</h2>
	<div class="form-row">
	<label for="FirstName">First Name</label>
	<input type="text" class="input-text input-text-block w-100" id="FirstName" name="FirstName">
	</div>
	<div class="form-row">
	<label for="LastName">Last Name</label>
	<input type="text" class="input-text input-text-block w-100" id="LastName" name="LastName">
	</div>
	<div class="form-row">
	<label for="Email">Email</label>
	<input type="email" class="input-text input-text-block w-100" id="Email" name="Email">
	</div>
	<div class="form-row mx-auto">
	<button type="submit" class="btn-submit" id="btnSubmit">
	Submit
	</button>
	</div>
	</form>
	</div>
	<script type="text/javascript">
	//date: 13.06.2024
	const sampleForm = document.querySelector("#sampleForm");
	if (sampleForm) {
	sampleForm.addEventListener("submit", (evt) => {
	evt.preventDefault();
	let form = new FormData(sampleForm);
	let entries = Object.fromEntries(form);
	let jsonData = JSON.stringify(entries);
	console.log("jsonData: ", jsonData);
	});
	}
	</script>
	</body>

	</html>