sakibalhasannaim

Text Repeater Website Source Code

Jul 23rd, 2023
358
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.09 KB | Source Code | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Text Repeater</title>
  7. <style>
  8. body {
  9. font-family: Arial, sans-serif;
  10. background-color: #f9f9f9;
  11. text-align: center;
  12. padding: 20px;
  13. margin: 0;
  14. }
  15.  
  16. .container {
  17. max-width: 100%;
  18. margin: 0 auto;
  19. background-color: #ffffff;
  20. padding: 20px;
  21. border-radius: 10px;
  22. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  23. }
  24.  
  25. h1 {
  26. color: #007BFF;
  27. }
  28.  
  29. input[type="text"], input[type="number"], button {
  30. width: 100%;
  31. padding: 10px;
  32. margin: 5px;
  33. border: 2px solid #007BFF;
  34. border-radius: 5px;
  35. font-size: 16px;
  36. background-color: #f1f1f1;
  37. outline: none;
  38. transition: background-color 0.3s ease;
  39. }
  40.  
  41. input[type="text"]:focus, input[type="number"]:focus, button:focus {
  42. background-color: #e2e2e2;
  43. }
  44.  
  45. button {
  46. cursor: pointer;
  47. color: white;
  48. background-color: #007BFF;
  49. transition: background-color 0.3s ease;
  50. }
  51.  
  52. button:hover {
  53. background-color: #0056b3;
  54. }
  55.  
  56. #outputText {
  57. margin-top: 15px;
  58. padding: 10px;
  59. border: 2px solid #007BFF;
  60. border-radius: 5px;
  61. font-size: 18px;
  62. background-color: #f1f1f1;
  63. }
  64. </style>
  65. </head>
  66. <body>
  67. <div class="container">
  68. <h1>Text Repeater</h1>
  69. <input type="text" id="textToRepeat" placeholder="Enter your text">
  70. <input type="number" id="repeatCount" placeholder="Repeat count">
  71. <button onclick="repeatText()">Repeat Text</button>
  72. <button onclick="copyText()">Copy Text</button>
  73. <div id="outputText"></div>
  74. </div>
  75.  
  76. <script>
  77. function repeatText() {
  78. const textToRepeat = document.getElementById('textToRepeat').value;
  79. const repeatCount = document.getElementById('repeatCount').value;
  80. const outputText = document.getElementById('outputText');
  81. let repeatedText = '';
  82.  
  83. for (let i = 0; i < repeatCount; i++) {
  84. repeatedText += textToRepeat + ' ';
  85. }
  86.  
  87. outputText.textContent = repeatedText;
  88. }
  89.  
  90. function copyText() {
  91. const outputText = document.getElementById('outputText');
  92. const textArea = document.createElement('textarea');
  93. textArea.value = outputText.textContent;
  94. document.body.appendChild(textArea);
  95. textArea.select();
  96. document.execCommand('copy');
  97. document.body.removeChild(textArea);
  98. alert('Text has been copied successfully!');
  99. }
  100. </script>
  101. </body>
  102. </html>
  103.  
Advertisement
Add Comment
Please, Sign In to add comment