Image Clip Animation

Quellcode

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>

<style>
.wrapper{width: 443px; border-radius: 7px; background: #fff; padding: 10px 5px 20px; box-shadow: 0 10px 15px rgba(0,0,0,0.05);}
.wrapper :where(textarea, input, select, button){width: 100%; outline: none; border: none; font-size: 17px; border-radius: 5px;}
.wrapper :where(textarea, input)::placeholder{color: red; opacity: 0.6;}
.wrapper :where(textarea, input):focus{box-shadow: 0px 2px 4px rgba(0,0,0,0.08);}
.wrapper textarea{height: 100px; resize: yes; padding: 8px 8px; font-size: 17.6px; border: 1px solid #ccc;}
.wrapper .file-options{display: flex; margin-top: 10px; align-items: center; justify-content: space-between;}
.file-options .option{width: calc(100% / 2 - 8px);}
.option label{font-size: 17px;}
.option :where(input, .select-menu){height: 50px; padding: 0 13px; margin-top: 6px; border-radius: 5px; border: 1px solid #bfbfbf;}
.option .select-menu select{height: 50px; background: none;}
.wrapper .save-btn{color: #fff; cursor: pointer; opacity: 0.6; padding: 16px 0; margin-top: 20px; pointer-events: none; background: #17A2B8;}
.save-btn:hover{background: #148c9f;}
textarea:valid ~ .save-btn{opacity: 1; pointer-events: auto; transition: all 0.3s ease;}
@media screen and (max-width: 475px) {
.wrapper{padding: 25px 18px 30px;}
.wrapper :where(textarea, input, select, button, label){font-size: 16px!important;}
.file-options .option{width: calc(100% / 2 - 5px);}
.option :where(input, .select-menu){padding: 0 10px;}
.wrapper .save-btn{padding: 15px 0;}
</style>
</head>

<body>
<div class="wrapper">
<textarea spellcheck="false" placeholder="Schreibe etwas zum Speichern" required>Schreibe etwas zum Speichern </textarea>
<div class="file-options">
<div class="option file-name">
<label>Datei Name</label>
<input type="text" spellcheck="false" placeholder="Dateiname eingeben">
</div>
<div class="option save-as">
<label>Speichern als</label>
<div class="select-menu">
<select>
<option value="text/plain">Text Datei (.txt)</option>
<option value="text/javascript">JS Datei (.js)</option>
<option value="text/html">HTML Datei (.html)</option>
<option value="image/svg+xml">SVG Datei (.svg)</option>
<option value="application/msword">Doc Datei (.doc)</option>
<option value="application/vnd.ms-powerpoint">PPT Datei (.ppt)</option>
</select>
</div>
</div>
</div>
<button class="save-btn" type="button">Datei speichern</button>
</div>
<script>
const textarea = document.querySelector("textarea"),
fileNameInput = document.querySelector(".file-name input"),
selectMenu = document.querySelector(".save-as select"),
saveBtn = document.querySelector(".save-btn");
selectMenu.addEventListener("change", () => {
const selectedFormat = selectMenu.options[selectMenu.selectedIndex].text;
saveBtn.innerText = `Save As ${selectedFormat.split(" ")[0]} File`;});
saveBtn.addEventListener("click", () => {
const blob = new Blob([textarea.value], {type: selectMenu.value});
const fileUrl = URL.createObjectURL(blob);
const link = document.createElement("a");
link.download = fileNameInput.value;
link.href = fileUrl;
link.click();});
</script>
</body>

</html>