Last active
May 25, 2023 09:40
-
-
Save makedonkavasilevaa/2fd2dc393476e22083034f4f2944ac03 to your computer and use it in GitHub Desktop.
Solved test for OneInside
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment