Free Tools Code
This code is one piece of code for each tool. That means the code includes the html, CSS, and Javascript in the code. We hope you enjoy the tools and benefit from them. We are not responsible for any issues to your site or any other related issues from the code. To the best of our knowledge this is good code and should work perfectly in your site.
Tool 1: Calculator
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calculator Tool</title> <style> body { font-family: sans-serif; background-color: #2a2e32; color: #fff; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .tool-container { background-color: #333; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); padding: 20px; width: 300px; text-align: left; } input[type="number"] { background-color: #444; color: #eee; padding: 8px; margin-bottom: 5px; border: none; border-radius: 4px; width: 90%; } button { background-color: #4a90e2; color: #fff; padding: 8px 10px; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease; } button:hover { background-color: #3676c0; } #calc-result { margin-top: 10px; color: #eee; } </style> </head> <body> <div class="tool-container"> <h2>Calculator</h2> <input type="number" id="calc-num1" placeholder="Number 1" /> <input type="number" id="calc-num2" placeholder="Number 2" /> <div style="display: flex; gap: 5px;"> <button onclick="calculate('add')">+</button> <button onclick="calculate('subtract')">-</button> <button onclick="calculate('multiply')">×</button> <button onclick="calculate('divide')">÷</button> </div> <p id="calc-result">Result: </p> </div> <script> function calculate(operation) { let num1 = parseFloat(document.getElementById('calc-num1').value) || 0; let num2 = parseFloat(document.getElementById('calc-num2').value) || 0; let result = 0; switch (operation) { case 'add': result = num1 + num2; break; case 'subtract': result = num1 - num2; break; case 'multiply': result = num1 * num2; break; case 'divide': result = num2 !== 0 ? num1 / num2 : "Cannot divide by 0"; break; } document.getElementById('calc-result').textContent = "Result: " + result; } </script> </body> </html>
Use code with caution.Html
Tool 2: Random Number Generator
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Random Number Tool</title> <style> body { font-family: sans-serif; background-color: #2a2e32; color: #fff; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .tool-container { background-color: #333; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); padding: 20px; width: 300px; text-align: left; } input[type="number"] { background-color: #444; color: #eee; padding: 8px; margin-bottom: 5px; border: none; border-radius: 4px; width: 40%; } button { background-color: #4a90e2; color: #fff; padding: 8px 10px; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease; } button:hover { background-color: #3676c0; } #random-number{ margin-top: 10px; color: #eee; } </style> </head> <body> <div class="tool-container"> <h2>Random Number</h2> <input type="number" id="min-num" placeholder="Min" /> <input type="number" id="max-num" placeholder="Max" style="margin-left: 5%;" /> <button onclick="generateRandomNumber()">Generate</button> <p id="random-number">Number: </p> </div> <script> function generateRandomNumber() { let min = parseInt(document.getElementById('min-num').value) || 0; let max = parseInt(document.getElementById('max-num').value) || 100; if(min > max){ [min, max] = [max, min] } const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min; document.getElementById('random-number').textContent = 'Number: ' + randomNumber; } </script> </body> </html>
Use code with caution.Html
Tool 3: Text Reverser
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Text Reverser Tool</title> <style> body { font-family: sans-serif; background-color: #2a2e32; color: #fff; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .tool-container { background-color: #333; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); padding: 20px; width: 300px; text-align: left; } input[type="text"] { background-color: #444; color: #eee; padding: 8px; margin-bottom: 5px; border: none; border-radius: 4px; width: 90%; } button { background-color: #4a90e2; color: #fff; padding: 8px 10px; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease; } button:hover { background-color: #3676c0; } #reversed-text { margin-top: 10px; color: #eee; } </style> </head> <body> <div class="tool-container"> <h2>Text Reverser</h2> <input type="text" id="text-input" placeholder="Enter Text" /> <button onclick="reverseText()">Reverse</button> <p id="reversed-text">Reversed: </p> </div> <script> function reverseText() { const inputText = document.getElementById('text-input').value; const reversedText = inputText.split('').reverse().join(''); document.getElementById('reversed-text').textContent = 'Reversed: ' + reversedText; } </script> </body> </html>
Use code with caution.Html
Tool 4: To Upper Case
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>To Upper Case Tool</title> <style> body { font-family: sans-serif; background-color: #2a2e32; color: #fff; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .tool-container { background-color: #333; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); padding: 20px; width: 300px; text-align: left; } input[type="text"] { background-color: #444; color: #eee; padding: 8px; margin-bottom: 5px; border: none; border-radius: 4px; width: 90%; } button { background-color: #4a90e2; color: #fff; padding: 8px 10px; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease; } button:hover { background-color: #3676c0; } #upper-case-text { margin-top: 10px; color: #eee; } </style> </head> <body> <div class="tool-container"> <h2>To Upper Case</h2> <input type="text" id="text-input-upper" placeholder="Enter Text" /> <button onclick="toUpper()">To Upper Case</button> <p id="upper-case-text">To Upper Case: </p> </div> <script> function toUpper() { const inputText = document.getElementById('text-input-upper').value; const upperText = inputText.toUpperCase(); document.getElementById('upper-case-text').textContent = 'To Upper Case: ' + upperText; } </script> </body> </html>
Use code with caution.Html
Tool 5: To Lower Case
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>To Lower Case Tool</title> <style> body { font-family: sans-serif; background-color: #2a2e32; color: #fff; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .tool-container { background-color: #333; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); padding: 20px; width: 300px; text-align: left; } input[type="text"] { background-color: #444; color: #eee; padding: 8px; margin-bottom: 5px; border: none; border-radius: 4px; width: 90%; } button { background-color: #4a90e2; color: #fff; padding: 8px 10px; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease; } button:hover { background-color: #3676c0; } #lower-case-text{ margin-top: 10px; color: #eee; } </style> </head> <body> <div class="tool-container"> <h2>To Lower Case</h2> <input type="text" id="text-input-lower" placeholder="Enter Text" /> <button onclick="toLower()">To Lower Case</button> <p id="lower-case-text">To Lower Case: </p> </div> <script> function toLower() { const inputText = document.getElementById('text-input-lower').value; const lowerText = inputText.toLowerCase(); document.getElementById('lower-case-text').textContent = 'To Lower Case: ' + lowerText; } </script> </body> </html>
Use code with caution.Html
Tool 6: Character Counter
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Character Counter Tool</title> <style> body { font-family: sans-serif; background-color: #2a2e32; color: #fff; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .tool-container { background-color: #333; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); padding: 20px; width: 300px; text-align: left; } input[type="text"] { background-color: #444; color: #eee; padding: 8px; margin-bottom: 5px; border: none; border-radius: 4px; width: 90%; } button { background-color: #4a90e2; color: #fff; padding: 8px 10px; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease; } button:hover { background-color: #3676c0; } #char-count { margin-top: 10px; color: #eee; } </style> </head> <body> <div class="tool-container"> <h2>Character Counter</h2> <input type="text" id="text-input-count" placeholder="Enter Text" /> <button onclick="countChars()">Count</button> <p id="char-count">Character count: </p> </div> <script> function countChars() { const inputText = document.getElementById('text-input-count').value; const charCount = inputText.length; document.getElementById('char-count').textContent = 'Character count: ' + charCount; } </script> </body> </html>
Use code with caution.Html
Tool 7: Word Counter
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Word Counter Tool</title> <style> body { font-family: sans-serif; background-color: #2a2e32; color: #fff; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .tool-container { background-color: #333; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); padding: 20px; width: 300px; text-align: left; } input[type="text"] { background-color: #444; color: #eee; padding: 8px; margin-bottom: 5px; border: none; border-radius: 4px; width: 90%; } button { background-color: #4a90e2; color: #fff; padding: 8px 10px; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease; } button:hover { background-color: #3676c0; } #word-count{ margin-top: 10px; color: #eee; } </style> </head> <body> <div class="tool-container"> <h2>Word Counter</h2> <input type="text" id="text-input-word" placeholder="Enter Text" /> <button onclick="countWords()">Count</button> <p id="word-count">Word Count: </p> </div> <script> function countWords() { const inputText = document.getElementById('text-input-word').value; const wordCount = inputText.trim().split(/\s+/).filter(Boolean).length; document.getElementById('word-count').textContent = 'Word Count: ' + wordCount; } </script> </body> </html>
Use code with caution.Html
Tool 8: Simple Timer
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple Timer Tool</title> <style> body { font-family: sans-serif; background-color: #2a2e32; color: #fff; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .tool-container { background-color: #333; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); padding: 20px; width: 300px; text-align: center; } button { background-color: #4a90e2; color: #fff; padding: 8px 10px; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease; } button:hover { background-color: #3676c0; } #timer-display { font-size: 2em; margin-bottom: 10px; color:#eee } </style> </head> <body> <div class="tool-container"> <h2>Simple Timer</h2> <p id="timer-display">00:00:00</p> <div style = "display:flex; gap: 5px; justify-content: center;"> <button onclick="startTimer()">Start</button> <button onclick="stopTimer()">Stop</button> <button onclick="resetTimer()">Reset</button> </div> </div> <script> let timerInterval; let seconds = 0; function startTimer() { if(!timerInterval){ timerInterval = setInterval(updateTimer, 1000) } } function stopTimer() { clearInterval(timerInterval); timerInterval = null; } function resetTimer(){ stopTimer(); seconds = 0; updateTimer(); } function updateTimer(){ seconds++; const hours = String(Math.floor(seconds / 3600)).padStart(2, '0'); const minutes = String(Math.floor((seconds % 3600) / 60)).padStart(2, '0'); const secs = String(seconds % 60).padStart(2, '0'); document.getElementById('timer-display').textContent = hours + ':' + minutes + ':' + secs } </script> </body> </html>
Use code with caution.Html
Tool 9: Simple Clock
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple Clock Tool</title> <style> body { font-family: sans-serif; background-color: #2a2e32; color: #fff; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .tool-container { background-color: #333; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); padding: 20px; width: 300px; text-align: center; } #clock-display { font-size: 2em; color:#eee } </style> </head> <body> <div class="tool-container"> <h2>Simple Clock</h2> <p id="clock-display"></p> </div> <script> function updateClock() { const now = new Date(); const hours = String(now.getHours()).padStart(2, '0'); const minutes = String(now.getMinutes()).padStart(2, '0'); const seconds = String(now.getSeconds()).padStart(2, '0'); document.getElementById('clock-display').textContent = hours + ':' + minutes + ':' + seconds; } setInterval(updateClock, 1000) updateClock() </script> </body> </html>
Use code with caution.Html
Tool 10: Password Generator
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Password Generator Tool</title> <style> body { font-family: sans-serif; background-color: #2a2e32; color: #fff; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .tool-container { background-color: #333; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); padding: 20px; width: 300px; text-align: left; } input[type="number"] { background-color: #444; color: #eee; padding: 8px; margin-bottom: 5px; border: none; border-radius: 4px; width: 50%; } button { background-color: #4a90e2; color: #fff; padding: 8px 10px; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease; } button:hover { background-color: #3676c0; } #pass-result{ margin-top: 10px; color: #eee; } </style> </head> <body> <div class="tool-container"> <h2>Password Generator</h2> <input type="number" id="pass-length" placeholder="Password Length" /> <button onclick="generatePassword()">Generate</button> <p id="pass-result">Password: </p> </div> <script> function generatePassword() { const length = parseInt(document.getElementById('pass-length').value) || 10; const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()'; let password = ''; for (let i = 0; i < length; i++) { password += characters.charAt(Math.floor(Math.random() * characters.length)); } document.getElementById('pass-result').textContent = 'Password: ' + password; } </script> </body> </html>
Tools
Free tools to enhance your one page website.
CONTACT US
Growth
© 2025. All rights reserved.