TikTok Video Downloader
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
.container {
max-width: 500px;
margin: 0 auto;
text-align: center;
}
h1 {
color: #333;
}
form {
margin-top: 50px;
}
input[type="text"] {
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: none;
width: 70%;
margin-right: 10px;
}
button[type="submit"] {
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: none;
background-color: #ff5722;
color: #fff;
cursor: pointer;
}
#error-msg {
color: red;
margin-top: 20px;
}
const form = document.querySelector('#form');
const urlInput = document.querySelector('#url');
const errorMsg = document.querySelector('#error-msg');
const downloadBtn = document.querySelector('#download-btn');
form.addEventListener('submit', e => {
e.preventDefault();
const url = urlInput.value;
if (!url) {
errorMsg.textContent = 'Please enter a valid TikTok video URL';
return;
}
downloadBtn.textContent = 'Downloading...';
downloadBtn.disabled = true;
const downloadUrl = `https://www.tiktok.com/oembed?url=${encodeURIComponent(url)}`;
fetch(downloadUrl)
.then(response => response.json())
.then(data => {
const videoUrl = data.video_url;
const a = document.createElement('a');
a.href = videoUrl;
a.download = 'tiktok_video.mp4';
a.click();
downloadBtn.textContent = 'Download';
downloadBtn.disabled = false;
urlInput.value = '';
errorMsg.textContent = '';
})
.catch(error => {
errorMsg.textContent = 'An error occurred, please try again later';
downloadBtn.textContent = 'Download';
downloadBtn.disabled = false;
});
});
No comments:
Post a Comment