Screen Recorder Tool

Download Video

body { font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #ff9a9e, #fad0c4); text-align: center; padding: 20px; } .container { max-width: 600px; margin: auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); } h1 { color: #333; } video { width: 100%; border-radius: 10px; margin-top: 10px; background: black; } .buttons { margin-top: 20px; } button { padding: 10px 15px; margin: 5px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; } #start { background-color: #4CAF50; color: white; } #start:hover { background-color: #45a049; } #stop { background-color: #f44336; color: white; } #stop:hover { background-color: #d32f2f; } a#download { display: inline-block; padding: 10px 15px; background: #2196F3; color: white; text-decoration: none; border-radius: 5px; font-size: 16px; } a#download:hover { background: #1976D2; } let recorder; let stream; let recordedChunks = []; const startButton = document.getElementById("start"); const stopButton = document.getElementById("stop"); const downloadLink = document.getElementById("download"); const videoPreview = document.getElementById("preview"); startButton.addEventListener("click", async () => { try { stream = await navigator.mediaDevices.getDisplayMedia({ video: { mediaSource: "screen" }, audio: true }); videoPreview.srcObject = stream; recorder = new RecordRTC(stream, { type: 'video', mimeType: 'video/webm', disableLogs: true }); recorder.startRecording(); startButton.disabled = true; stopButton.disabled = false; } catch (error) { console.error("Error accessing screen: ", error); } }); stopButton.addEventListener("click", () => { recorder.stopRecording(() => { let blob = recorder.getBlob(); let url = URL.createObjectURL(blob); downloadLink.href = url; downloadLink.download = "screen-recording.webm"; downloadLink.style.display = "inline-block"; stopButton.disabled = true; startButton.disabled = false; videoPreview.srcObject = null; stream.getTracks().forEach(track => track.stop()); }); });

BMI Calculator Tool

BMI Calculator

Height (cm):

Weight (kg):

/* styles.css */ body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; padding: 0; } .container { text-align: center; } h1 { color: #333; } #calculator { padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } label { font-size: 16px; margin-right: 10px; } input[type="number"] { padding: 10px; font-size: 16px; border-radius: 5px; border: 1px solid #ccc; margin-right: 10px; } button { background-color: #3498db; color: #fff; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; border-radius: 5px; margin-top: 10px; } #result { font-size: 24px; margin-top: 10px; } // scripts.js function calculateBMI() { const height = parseFloat(document.getElementById('height').value); const weight = parseFloat(document.getElementById('weight').value); if (isNaN(height) || isNaN(weight)) { alert('Please enter valid values for height and weight.'); return; } const bmi = (weight / ((height / 100) ** 2)).toFixed(2); let category; if (bmi < 18.5) { category = 'Underweight'; } else if (bmi < 24.9) { category = 'Normal weight'; } else if (bmi < 29.9) { category = 'Overweight'; } else { category = 'Obese'; } document.getElementById('result').textContent = `Your BMI is ${bmi}. You are ${category}.`; }

Currency Converter Tool

Currency Converter

From:

To:

/* styles.css */ body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; padding: 0; } .container { text-align: center; } h1 { color: #333; } #converter { padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } label { font-size: 16px; margin-right: 10px; } input[type="number"] { padding: 10px; font-size: 16px; border-radius: 5px; border: 1px solid #ccc; margin-right: 10px; } select { padding: 10px; font-size: 16px; border-radius: 5px; border: 1px solid #ccc; } button { background-color: #3498db; color: #fff; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; border-radius: 5px; margin-top: 10px; } #converted-amount { font-size: 24px; margin-top: 10px; } // scripts.js async function fetchCurrencies() { const response = await fetch('https://api.exchangerate-api.com/v4/latest/USD'); const data = await response.json(); const currencies = Object.keys(data.rates); const fromCurrencySelect = document.getElementById('from-currency'); const toCurrencySelect = document.getElementById('to-currency'); currencies.forEach(currency => { const option = document.createElement('option'); option.value = currency; option.textContent = currency; fromCurrencySelect.appendChild(option); const option2 = document.createElement('option'); option2.value = currency; option2.textContent = currency; toCurrencySelect.appendChild(option2); }); } fetchCurrencies(); async function convert() { const fromCurrency = document.getElementById('from-currency').value; const toCurrency = document.getElementById('to-currency').value; const amount = parseFloat(document.getElementById('amount').value); if (isNaN(amount)) { alert('Please enter a valid amount.'); return; } const response = await fetch(`https://api.exchangerate-api.com/v4/latest/${fromCurrency}`); const data = await response.json(); const rate = data.rates[toCurrency]; const convertedAmount = (amount * rate).toFixed(2); document.getElementById('converted-amount').textContent = `${amount} ${fromCurrency} = ${convertedAmount} ${toCurrency}`; }

Weather Forecast Widget

/* styles.css */ body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; padding: 0; } .container { text-align: center; } h1 { color: #333; } #weather-widget { padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } #location { margin-bottom: 20px; } input[type="text"] { padding: 10px; font-size: 16px; border-radius: 5px; border: 1px solid #ccc; } button { background-color: #3498db; color: #fff; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; border-radius: 5px; margin-left: 10px; } #weather-info p { font-size: 18px; margin: 5px 0; } // scripts.js async function getWeather() { const cityInput = document.getElementById('city-input').value.trim(); if (cityInput === '') { alert('Please enter a city.'); return; } const API_KEY = 'YOUR_API_KEY'; // Replace with your OpenWeatherMap API key const API_URL = `https://api.openweathermap.org/data/2.5/weather?q=${cityInput}&appid=${API_KEY}&units=metric`; try { const response = await fetch(API_URL); const data = await response.json(); if (data.cod === '404') { alert('City not found. Please enter a valid city.'); return; } displayWeather(data); } catch (error) { console.error('Error fetching weather data:', error); alert('An error occurred while fetching weather data. Please try again later.'); } } function displayWeather(data) { const description = data.weather[0].description; const temperature = `${data.main.temp}°C`; const humidity = `Humidity: ${data.main.humidity}%`; const windSpeed = `Wind Speed: ${data.wind.speed} m/s`; document.getElementById('weather-description').textContent = `Weather: ${description}`; document.getElementById('temperature').textContent = `Temperature: ${temperature}`; document.getElementById('humidity').textContent = humidity; document.getElementById('wind-speed').textContent = windSpeed; }

Random Quote Generator Tool

Random Quote Generator

Loading...

/* styles.css */ body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; padding: 0; } .container { text-align: center; } h1 { color: #333; } #quote-container { padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } #quote-text { font-size: 24px; margin-bottom: 20px; } #new-quote-btn { background-color: #3498db; color: #fff; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; border-radius: 5px; } // scripts.js async function getRandomQuote() { const response = await fetch('https://zenquotes.io/api/random'); const data = await response.json(); const quote = data[0].q; document.getElementById('quote-text').textContent = `"${quote}"`; } getRandomQuote();

Todo List Application

Todo List

/* styles.css */ body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; padding: 0; } .container { text-align: center; } h1 { color: #333; } #todo-form { margin-bottom: 20px; } input[type="text"] { padding: 10px; font-size: 16px; border-radius: 5px; border: 1px solid #ccc; } button { background-color: #3498db; color: #fff; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; border-radius: 5px; margin-left: 10px; } ul { list-style-type: none; padding: 0; } li { display: flex; align-items: center; margin-bottom: 10px; } .delete-btn { background-color: #e74c3c; color: #fff; border: none; padding: 5px 10px; font-size: 14px; cursor: pointer; border-radius: 5px; margin-left: 10px; } .completed { text-decoration: line-through; } // scripts.js const todoInput = document.getElementById('todo-input'); const todoList = document.getElementById('todo-list'); function addTodo() { const todoText = todoInput.value.trim(); if (todoText === '') { alert('Please enter a task.'); return; } const todoItem = createTodoItem(todoText); todoList.appendChild(todoItem); todoInput.value = ''; } function createTodoItem(todoText) { const todoItem = document.createElement('li'); todoItem.textContent = todoText; const deleteBtn = document.createElement('button'); deleteBtn.textContent = 'Delete'; deleteBtn.classList.add('delete-btn'); deleteBtn.onclick = function() { todoItem.remove(); }; const completeCheckbox = document.createElement('input'); completeCheckbox.type = 'checkbox'; completeCheckbox.onchange = function() { if (completeCheckbox.checked) { todoItem.classList.add('completed'); } else { todoItem.classList.remove('completed'); } }; todoItem.appendChild(completeCheckbox); todoItem.appendChild(deleteBtn); return todoItem; }

Pomodoro Timer Tool

Pomodoro Timer

25:00

/* styles.css */ body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; padding: 0; } .container { text-align: center; } h1 { color: #333; } #timer { margin-bottom: 20px; } #timer-display { font-size: 48px; margin-bottom: 10px; } button { background-color: #3498db; color: #fff; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; border-radius: 5px; margin: 0 10px; } button:disabled { background-color: #ccc; cursor: not-allowed; } // scripts.js let countdownInterval; let totalTime = 25 * 60; // 25 minutes in seconds let timeLeft = totalTime; let isBreakTime = false; function startTimer() { if (!countdownInterval) { countdownInterval = setInterval(updateTimer, 1000); document.getElementById('startBtn').disabled = true; } } function updateTimer() { const minutes = Math.floor(timeLeft / 60); const seconds = timeLeft % 60; const displayMinutes = String(minutes).padStart(2, '0'); const displaySeconds = String(seconds).padStart(2, '0'); document.getElementById('timer-display').textContent = `${displayMinutes}:${displaySeconds}`; if (timeLeft === 0) { clearInterval(countdownInterval); if (isBreakTime) { isBreakTime = false; totalTime = 25 * 60; // Reset to work time } else { isBreakTime = true; totalTime = 5 * 60; // Set break time to 5 minutes } timeLeft = totalTime; countdownInterval = null; document.getElementById('startBtn').disabled = false; } else { timeLeft--; } } function resetTimer() { clearInterval(countdownInterval); countdownInterval = null; timeLeft = totalTime; document.getElementById('timer-display').textContent = '25:00'; document.getElementById('startBtn').disabled = false; }

Countdown Timer Tool

Countdown Timer

/* styles.css */ body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; padding: 0; } .container { text-align: center; } h1 { color: #333; } #timer { margin-bottom: 20px; } input[type="datetime-local"] { padding: 10px; font-size: 16px; border-radius: 5px; border: 1px solid #ccc; } button { background-color: #3498db; color: #fff; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; border-radius: 5px; } #countdown-display { font-size: 24px; } // scripts.js let countdownInterval; function startCountdown() { const datetimeInput = document.getElementById('datetime-input').value; const targetDate = new Date(datetimeInput).getTime(); if (isNaN(targetDate)) { alert('Please enter a valid date and time.'); return; } countdownInterval = setInterval(function() { const currentDate = new Date().getTime(); const timeRemaining = targetDate - currentDate; if (timeRemaining <= 0) { clearInterval(countdownInterval); document.getElementById('countdown-display').innerHTML = 'Countdown expired'; } else { const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24)); const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000); document.getElementById('countdown-display').innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`; } }, 1000); }

Password Strength Checker Tool

Password Strength Checker

/* styles.css */ body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; padding: 0; } .container { text-align: center; } h1 { color: #333; } input[type="password"] { width: 300px; padding: 10px; font-size: 16px; border-radius: 5px; border: 1px solid #ccc; } #strength-meter { margin-top: 20px; width: 300px; height: 20px; border-radius: 5px; background-color: #eee; } #strength-meter div { height: 100%; border-radius: 5px; transition: width 0.3s ease; } #strength-meter .weak { background-color: #ff6666; } #strength-meter .medium { background-color: #ffd966; } #strength-meter .strong { background-color: #66ff66; } // scripts.js const passwordInput = document.getElementById('password'); const strengthMeter = document.getElementById('strength-meter'); passwordInput.addEventListener('input', () => { const password = passwordInput.value; const strength = calculatePasswordStrength(password); updateStrengthMeter(strength); }); function calculatePasswordStrength(password) { let score = 0; if (password.length < 8) { return score; } score += password.length * 4; score += countUppercaseLetters(password) * 2; score += countNumbers(password) * 4; score += countSymbols(password) * 6; score += bonusPoints(password); return Math.min(Math.floor(score / 100), 10); } function countUppercaseLetters(password) { return password.replace(/[^A-Z]/g, '').length; } function countNumbers(password) { return password.replace(/[^0-9]/g, '').length; } function countSymbols(password) { return password.replace(/[A-Za-z0-9]/g, '').length; } function bonusPoints(password) { let bonus = 0; if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) { bonus += 10; } if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) { bonus += 15; } if (password.match(/([!,@,#,$,%,^,&,*,?,_,~])/)) { bonus += 20; } return bonus; } function updateStrengthMeter(strength) { const meter = strengthMeter.querySelector('div'); meter.style.width = `${strength * 10}%`; meter.className = ''; if (strength < 4) { meter.classList.add('weak'); } else if (strength < 7) { meter.classList.add('medium'); } else { meter.classList.add('strong'); } }

Markdown Editor Tool

Markdown Editor

/* styles.css */ body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; padding: 0; } .container { text-align: center; } h1 { color: #333; } .editor-container { display: flex; } textarea { width: 50%; height: 400px; padding: 10px; font-size: 16px; border-radius: 5px 0 0 5px; border: 1px solid #ccc; resize: none; } #preview { width: 50%; height: 400px; padding: 10px; font-size: 16px; border-radius: 0 5px 5px 0; border: 1px solid #ccc; overflow-y: auto; } // scripts.js const markdownInput = document.getElementById('markdown-input'); const preview = document.getElementById('preview'); markdownInput.addEventListener('input', updatePreview); function updatePreview() { const markdownText = markdownInput.value; const htmlText = marked(markdownText); preview.innerHTML = htmlText; }

Recipe Finder Application

Recipe Finder

Select Cuisine American Italian Mexican Asian Select Diet Balanced High-Protein Low-Carb Low-Fat

Fully Functional Screen Recorder Tool

Screen Recorder

Text to PDF converter Tool

Text to PDF Converter

Arial Times New Roman Courier New Verdana Tahoma

Countdown Timer Tool

Countdown Timer

Hours:
Minutes:
Seconds:

00:00:00

Lorem Ipsum Generator Tool

Lorem Ipsum Generator

Number of Paragraphs:

Number of Words per Paragraph:

Responsive Navbar Generator Tool

Home About Services Contact ☰

Password Generator Tool

Password Generator

Password Length:

Include Uppercase Letters:
Include Lowercase Letters:
Include Numbers:
Include Symbols:

HTML Table Generator Tool

HTML Table Generator

Number of Rows:

Number of Columns:

Tooltip Generator Tool

Tooltip Generator

Tooltip Content:

Tooltip Position:
Top Bottom Left Right
Tooltip Background Color:

File Uploader Tool

Drag & Drop files here or click to select files