makedonkavasilevaa/test.html

## test.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Eczar&display=swap" rel="stylesheet">
</head>
<body>
<div class="mainContainer">
    <div class="card" id="card">
        <div class="front" id="front">
            <img src="https://cdn3.iconfinder.com/data/icons/virtual-notebook/16/button_rotate-512.png"
                 style="height: 25px;width: 25px; float: right" id="FlipCard"><br>
            <img src="https://polarsteps.s3.amazonaws.com/u_1760778/02f27b14-3ed8-4a18-a2c1-db33731a97af_profile.jpg"
                 style="width: 150px; height: 150px; border: black solid 1px;" id="profilePic"><br>
            <h3 id="firstName"> First name</h3>
            <h3 id="lastName"> Last name</h3>
            <img src="https://www.freepnglogos.com/uploads/pin-png/location-pin-connectsafely-37.png"
                 style="width: 15px; height: 15px; display: inline;">
            <h3 id="officeLocation" style="display: inline"> Office location</h3>
        </div>
        <div class="back" id="back">
            <input type="url" id="image" placeholder="Paste Image URL" style="width: 200px; height: 45px">
            <input type="text" id="name" placeholder="Enter your first name" style="width: 200px;">
            <input type="text" id="surname" placeholder="Enter your last name" style="width: 200px;"><br>
            <img src="https://www.freepnglogos.com/uploads/pin-png/location-pin-connectsafely-37.png"
                 style="width: 15px; height: 15px; display: inline;">
            <input type="text" id="location" placeholder="Enter your office" style="width: 180px;"><br>
            <button onclick="cancel()" style="background: indianred; float: left;">Cancel</button>
            <button onclick="save()" style="background: white; float: right;">Save</button>
        </div>
    </div>
</div>

</body>
<style>

    *{
        font-family: "Eczar";
        font-size: 14px;

    }

    body {
        background: white;
    }

    .mainContainer {
        position: absolute;
        border: black solid 1px;
        border-radius: 5px;
        width: 250px;
        height: 300px;
        text-align: center;
        padding: 10px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    input {
        border: black solid 1px;
        border-radius: 5px;
        text-align: center;
        padding: 5px;
        margin: 10px;
    }

    button {
        border: black solid 1px;
        border-radius: 5px;
        margin: 10px;
        padding: 10px;
    }

    .card {
        position: relative;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transition: all 0.8s ease;
    }

    .front {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        background: white;
        color: black;
        text-align: center;
    }

    .back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        background: white;
        color: black;
        text-align: center;
        transform: rotateY(180deg);
    }

    .flipCard {
        transform: rotateY(180deg);
    }

</style>

<script>

    const card = document.getElementById("FlipCard");
    const rotate = document.getElementById("card");

    card.addEventListener("click", flipCard);

    function flipCard() {
        rotate.classList.toggle("flipCard");
    }

    const profilePic = document.getElementById("profilePic");
    const firstName = document.getElementById("firstName");
    const lastName = document.getElementById("lastName");
    const officeLocation = document.getElementById("officeLocation");

    function cancel() {
        rotate.classList.toggle("flipCard");
    }

    function save() {
        const input = document.getElementsByTagName("input");
        let image = document.getElementById("image").value;
        let name = document.getElementById("name").value;
        let surname = document.getElementById("surname").value;
        let office = document.getElementById("location").value;

        if (image == "" || name == "" || surname == "" || office == "") {
            alert("You haven't compleated all the inputs!")
        } else {
            profilePic.setAttribute("src", "" + image + "");
            profilePic.style.width = "150px";
            profilePic.style.height = "150px";
            firstName.innerHTML = name;
            lastName.innerHTML = surname;
            officeLocation.innerHTML = office;
            rotate.classList.toggle("flipCard");
        }
    }
</script>

</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Eczar&display=swap" rel="stylesheet">
	</head>
	<body>
	<div class="mainContainer">
	<div class="card" id="card">
	<div class="front" id="front">
	<img src="https://cdn3.iconfinder.com/data/icons/virtual-notebook/16/button_rotate-512.png"
	style="height: 25px;width: 25px; float: right" id="FlipCard"><br>
	<img src="https://polarsteps.s3.amazonaws.com/u_1760778/02f27b14-3ed8-4a18-a2c1-db33731a97af_profile.jpg"
	style="width: 150px; height: 150px; border: black solid 1px;" id="profilePic"><br>
	<h3 id="firstName"> First name</h3>
	<h3 id="lastName"> Last name</h3>
	<img src="https://www.freepnglogos.com/uploads/pin-png/location-pin-connectsafely-37.png"
	style="width: 15px; height: 15px; display: inline;">
	<h3 id="officeLocation" style="display: inline"> Office location</h3>
	</div>
	<div class="back" id="back">
	<input type="url" id="image" placeholder="Paste Image URL" style="width: 200px; height: 45px">
	<input type="text" id="name" placeholder="Enter your first name" style="width: 200px;">
	<input type="text" id="surname" placeholder="Enter your last name" style="width: 200px;"><br>
	<img src="https://www.freepnglogos.com/uploads/pin-png/location-pin-connectsafely-37.png"
	style="width: 15px; height: 15px; display: inline;">
	<input type="text" id="location" placeholder="Enter your office" style="width: 180px;"><br>
	<button onclick="cancel()" style="background: indianred; float: left;">Cancel</button>
	<button onclick="save()" style="background: white; float: right;">Save</button>
	</div>
	</div>
	</div>

	</body>
	<style>

	*{
	font-family: "Eczar";
	font-size: 14px;

	}

	body {
	background: white;
	}

	.mainContainer {
	position: absolute;
	border: black solid 1px;
	border-radius: 5px;
	width: 250px;
	height: 300px;
	text-align: center;
	padding: 10px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}

	input {
	border: black solid 1px;
	border-radius: 5px;
	text-align: center;
	padding: 5px;
	margin: 10px;
	}

	button {
	border: black solid 1px;
	border-radius: 5px;
	margin: 10px;
	padding: 10px;
	}

	.card {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: all 0.8s ease;
	}

	.front {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	background: white;
	color: black;
	text-align: center;
	}

	.back {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	background: white;
	color: black;
	text-align: center;
	transform: rotateY(180deg);
	}

	.flipCard {
	transform: rotateY(180deg);
	}

	</style>

	<script>

	const card = document.getElementById("FlipCard");
	const rotate = document.getElementById("card");

	card.addEventListener("click", flipCard);

	function flipCard() {
	rotate.classList.toggle("flipCard");
	}

	const profilePic = document.getElementById("profilePic");
	const firstName = document.getElementById("firstName");
	const lastName = document.getElementById("lastName");
	const officeLocation = document.getElementById("officeLocation");

	function cancel() {
	rotate.classList.toggle("flipCard");
	}

	function save() {
	const input = document.getElementsByTagName("input");
	let image = document.getElementById("image").value;
	let name = document.getElementById("name").value;
	let surname = document.getElementById("surname").value;
	let office = document.getElementById("location").value;

	if (image == "" \|\| name == "" \|\| surname == "" \|\| office == "") {
	alert("You haven't compleated all the inputs!")
	} else {
	profilePic.setAttribute("src", "" + image + "");
	profilePic.style.width = "150px";
	profilePic.style.height = "150px";
	firstName.innerHTML = name;
	lastName.innerHTML = surname;
	officeLocation.innerHTML = office;
	rotate.classList.toggle("flipCard");
	}
	}
	</script>

	</html>