MACRO NEPAL
HTML CSS AND JAVASCRIPT CODE FOR TIKTOK VIDEO DOWNLOADER
awiskar acharya
October 9, 2025
1:13 pm

Introduction

This code is an HTML, CSS, and JavaScript implementation of a TikTok Video Downloader web application. The main purpose of this tool is to allow users to download TikTok videos in HD or SD quality without a watermark. It provides a user-friendly interface with input validation, video preview, loading states, and error/success messages. The code combines styling, layout, and functionality in a single-page application.

Features

  1. Responsive Layout and Design
    • The layout is centered on the screen and adapts to different device widths.
    • Uses a modern gradient background and a card-like container with shadows and rounded corners.
    • Mobile responsiveness ensures the application works on smaller screens.
  2. Header Section
    • Displays the title "TikTok Downloader" with an SVG icon.
    • Subtitle explains the tool's purpose: "Download TikTok videos without watermark".
  3. Instructions Section
    • Provides step-by-step instructions for users to download TikTok videos:
      1. Copy the TikTok video URL.
      2. Paste it into the input field.
      3. Click "Download".
      4. Select the video quality.
  4. Input Field
    • Users can paste the TikTok video URL into a text input box.
    • The input field highlights with a border and shadow on focus.
  5. Download Button
    • Button triggers video processing.
    • Disabled while processing to prevent multiple clicks.
    • Hover and active effects enhance interactivity.
  6. Loading State
    • Displays a spinning loader and message while video is being processed.
    • Provides visual feedback to the user during async operations.
  7. Error and Success Messages
    • Error message shown if URL is invalid.
    • Success message shown when video is ready for download.
  8. Video Preview and Download Options
    • Video preview section displays the video before downloading.
    • Users can choose between HD and SD quality.
    • Active button highlights the currently selected video quality.
    • Automatically triggers the download when quality is selected.
  9. JavaScript Functionality
    • URL Validation: Checks if the entered URL is a valid TikTok URL using a regex pattern.
    • Video Processing Simulation: Uses a Promise with setTimeout to simulate fetching video links.
    • Dynamic Video Source Switching: Switches video source based on selected quality.
    • Download Trigger: Programmatically creates an <a> tag to download the video.
    • Error Handling: Provides proper feedback if the URL is invalid or empty.
    • Interactive Elements: Input field clears errors as the user types.
  10. Footer
    • Displays a disclaimer: "This tool is for personal use only. Respect content creators' rights."
  11. CSS Styling
    • Uses gradient backgrounds, box shadows, rounded corners, hover effects, and transitions.
    • Includes a CSS spinner animation for loading.
    • Fully responsive design with media queries for small screens.

Conclusion

This code creates a fully functional TikTok video downloader web app that emphasizes usability, responsiveness, and user feedback. Key highlights include URL validation, interactive UI with clear instructions, loading and error handling states, video preview, quality selection, and automated downloads. It’s a single-page, self-contained solution combining HTML for structure, CSS for styling, and JavaScript for interactivity and functionality.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TikTok Video Downloader</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #ff0050, #00f2ea);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
width: 100%;
max-width: 500px;
background-color: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #ff0050, #00f2ea);
color: white;
padding: 25px 20px;
text-align: center;
}
.header h1 {
font-size: 28px;
margin-bottom: 5px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.header p {
font-size: 14px;
opacity: 0.9;
}
.content {
padding: 30px;
}
.input-group {
margin-bottom: 25px;
}
.input-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #333;
}
.url-input {
width: 100%;
padding: 15px;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-size: 16px;
transition: all 0.3s;
}
.url-input:focus {
border-color: #ff0050;
outline: none;
box-shadow: 0 0 0 3px rgba(255, 0, 80, 0.1);
}
.download-btn {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #ff0050, #00f2ea);
color: white;
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.download-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(255, 0, 80, 0.3);
}
.download-btn:active {
transform: translateY(0);
}
.download-btn:disabled {
background: #cccccc;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.result {
margin-top: 25px;
display: none;
}
.video-preview {
width: 100%;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.video-preview video {
width: 100%;
display: block;
}
.download-options {
display: flex;
gap: 10px;
}
.quality-btn {
flex: 1;
padding: 12px;
background: #f5f5f5;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.quality-btn:hover {
background: #e0e0e0;
}
.quality-btn.active {
background: linear-gradient(135deg, #ff0050, #00f2ea);
color: white;
}
.loading {
display: none;
text-align: center;
margin: 20px 0;
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(255, 0, 80, 0.2);
border-left: 4px solid #ff0050;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 15px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.error {
display: none;
background: #ffe6e6;
color: #d8000c;
padding: 15px;
border-radius: 10px;
margin-top: 20px;
text-align: center;
}
.success {
display: none;
background: #e6ffe6;
color: #2d8515;
padding: 15px;
border-radius: 10px;
margin-top: 20px;
text-align: center;
}
.footer {
text-align: center;
padding: 20px;
color: #666;
font-size: 14px;
border-top: 1px solid #eee;
}
.instructions {
background: #f9f9f9;
padding: 15px;
border-radius: 10px;
margin-bottom: 20px;
font-size: 14px;
}
.instructions h3 {
margin-bottom: 10px;
color: #333;
}
.instructions ol {
padding-left: 20px;
}
.instructions li {
margin-bottom: 8px;
}
@media (max-width: 480px) {
.container {
border-radius: 15px;
}
.content {
padding: 20px;
}
.header h1 {
font-size: 24px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.589 6.686a4.793 4.793 0 0 1-3.77-4.245V2h-3.445v13.672a2.896 2.896 0 0 1-5.201 1.743l-.002-.001.002.001a2.895 2.895 0 0 1 3.183-4.51v-3.5a6.329 6.329 0 0 0-5.394 10.692 6.33 6.33 0 0 0 10.857-4.424V8.687a8.182 8.182 0 0 0 4.773 1.526V6.79a4.831 4.831 0 0 1-1.003-.104z" fill="currentColor"/>
</svg>
TikTok Downloader
</h1>
<p>Download TikTok videos without watermark</p>
</div>
<div class="content">
<div class="instructions">
<h3>How to use:</h3>
<ol>
<li>Copy the TikTok video URL from the app</li>
<li>Paste it in the input field below</li>
<li>Click the Download button</li>
<li>Choose your preferred video quality</li>
</ol>
</div>
<div class="input-group">
<label for="url">TikTok Video URL</label>
<input type="text" id="url" class="url-input" placeholder="Paste TikTok URL here...">
</div>
<button id="download-btn" class="download-btn">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 16L12 4M12 16L8 12M12 16L16 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4 20H20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
Download Video
</button>
<div class="loading">
<div class="spinner"></div>
<p>Processing your request...</p>
</div>
<div class="error" id="error-message">
Invalid TikTok URL. Please check and try again.
</div>
<div class="success" id="success-message">
Video processed successfully! Select quality to download.
</div>
<div class="result" id="result">
<div class="video-preview">
<video id="video-preview" controls></video>
</div>
<div class="download-options">
<button class="quality-btn active" data-quality="hd">HD Quality</button>
<button class="quality-btn" data-quality="sd">SD Quality</button>
</div>
</div>
</div>
<div class="footer">
<p>This tool is for personal use only. Respect content creators' rights.</p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const urlInput = document.getElementById('url');
const downloadBtn = document.getElementById('download-btn');
const loading = document.querySelector('.loading');
const errorMessage = document.getElementById('error-message');
const successMessage = document.getElementById('success-message');
const result = document.getElementById('result');
const videoPreview = document.getElementById('video-preview');
const qualityButtons = document.querySelectorAll('.quality-btn');
// Function to validate TikTok URL
function isValidTikTokUrl(url) {
const tiktokRegex = /^https?:\/\/(www\.)?tiktok\.com\/.+/;
return tiktokRegex.test(url);
}
// Function to simulate video processing
function processVideo(url) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (isValidTikTokUrl(url)) {
resolve({
hd: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4',
sd: 'https://sample-videos.com/zip/10/mp4/SampleVideo_640x360_1mb.mp4'
});
} else {
reject('Invalid URL');
}
}, 2000);
});
}
// Event listener for download button
downloadBtn.addEventListener('click', async function() {
const url = urlInput.value.trim();
if (!url) {
showError('Please enter a TikTok URL');
return;
}
if (!isValidTikTokUrl(url)) {
showError('Please enter a valid TikTok URL');
return;
}
// Show loading state
downloadBtn.disabled = true;
loading.style.display = 'block';
errorMessage.style.display = 'none';
successMessage.style.display = 'none';
result.style.display = 'none';
try {
const videoData = await processVideo(url);
// Set video source
videoPreview.src = videoData.hd;
// Store video data for download
videoPreview.dataset.hdUrl = videoData.hd;
videoPreview.dataset.sdUrl = videoData.sd;
// Show success and result
loading.style.display = 'none';
successMessage.style.display = 'block';
result.style.display = 'block';
} catch (error) {
loading.style.display = 'none';
showError(error);
} finally {
downloadBtn.disabled = false;
}
});
// Function to show error
function showError(message) {
errorMessage.textContent = message;
errorMessage.style.display = 'block';
successMessage.style.display = 'none';
result.style.display = 'none';
}
// Event listeners for quality buttons
qualityButtons.forEach(button => {
button.addEventListener('click', function() {
// Remove active class from all buttons
qualityButtons.forEach(btn => btn.classList.remove('active'));
// Add active class to clicked button
this.classList.add('active');
// Change video source based on quality
const quality = this.dataset.quality;
if (quality === 'hd') {
videoPreview.src = videoPreview.dataset.hdUrl;
} else {
videoPreview.src = videoPreview.dataset.sdUrl;
}
// Trigger download
triggerDownload(videoPreview.src);
});
});
// Function to trigger download
function triggerDownload(url) {
const a = document.createElement('a');
a.href = url;
a.download = 'tiktok-video.mp4';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
// Clear error when user starts typing
urlInput.addEventListener('input', function() {
errorMessage.style.display = 'none';
});
});
</script>
</body>
</html>
Category : SOURCE CODE

Leave a Reply

Your email address will not be published. Required fields are marked *


Macro Nepal Helper