Menu

Virtual Geek

Tales from real IT system administrators world and non-production environment

HTML JavaScript generate GUID

Here is a small HTML project I created to generate a new GUID each time the "Generate New GUID" button is clicked. Additionally, this project includes a feature that allows you to easily copy the generated GUID to your clipboard by clicking on a copy icon next to the GUID. The project uses basic HTML, CSS, and JavaScript, and it showcases how simple web functionality can be implemented in a lightweight and interactive way.

HTML CSS JAVASCRIPT generate guid copy to clipboard project.png

Below is the complete HTML code. You can save it to .html file and directly open in browser.

Download this html_javascript_guid.html here or it is also available on github.com.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>GUID Generator</title>
    <link rel="stylesheet" href="https://unpkg.com/98.css">
    <style>
        /* Center the .window on the screen */
        .window {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .window-body {
            text-align: center; /* Center align the text and buttons */
        }

        /* Optional: Add some margin between the paragraph and the buttons */
        #guid-display {
            margin-bottom: 20px;
        }

        /* Style the image as a button */
        .copy-icon {
            width: 24px;
            height: 24px;
            cursor: pointer;
            vertical-align: middle;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div class="window" style="width: 480px;">
        <div class="title-bar">
            <div class="title-bar-text">Click to generate a GUID</div>
            <div class="title-bar-controls">
                <button aria-label="Minimize"></button>
                <button aria-label="Maximize"></button>
                <button aria-label="Close"></button>
            </div>
        </div>
        <div class="window-body">
            <p id="guid-container">
                <strong><span id="guid-display">GUID</span></strong>

                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAvElEQVR4nO2XQQ7DMAzD+P9Pcy8osKExkrUk0HNSQbIciIiIWIHD3/GYAOQAiwDLMvt3M8HFF0wAcgBFgOtIHTcTHJ4B0+cdd6EEIAdw1NvBzRFIAHIAr4rAryQAOYAiQDOAhiC1ANUgA9geQIuQbYK0CttbgB5D7niN3Wyp8QNMAHKARYBmgA1BagEnauhmS40fYC1ALeBB3/YImADkAN8UgcdjApADLAI8r96+ZfePJwA5gFfWb0REMMQH4Vh8roHaHsAAAAAASUVORK5CYII=" alt="Copy" class="copy-icon" id="copy-guid"/>                
                <!-- <img src="images/copy.png" alt="Copy" class="copy-icon" id="copy-guid"> -->
            </p>
            <button class="button" id="generate-guid">Generate New GUID</button>
            <p id="display-message" style="color: darkgreen;"></p>
        </div>
    </div>

    <script>
        var element = document.getElementById('guid-display');
        element.style.fontSize = '15px';
        element.style.letterSpacing = "2px";

        function generateGUID() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        }

        function updateGuidDisplay() {
            var guid = generateGUID();
            document.getElementById('guid-display').textContent = guid;
        }

        window.onload = function() {
            updateGuidDisplay();
        };

        document.getElementById('generate-guid').addEventListener('click', function() {
            updateGuidDisplay();
            document.getElementById('display-message').textContent = '';
        });        

        function copyToClipboard(text) {
            var tempInput = document.createElement('input');
            tempInput.value = text;
            document.body.appendChild(tempInput);
            tempInput.select();
            document.execCommand('copy');
            document.body.removeChild(tempInput);
        }

        document.getElementById('copy-guid').addEventListener('click', function() {
            var guidText = document.getElementById('guid-display').textContent;
            copyToClipboard(guidText);
            // alert('GUID copied to clipboard!');
            document.getElementById('display-message').textContent = 'GUID copied to clipboard!';
        });
    </script>
</body>
</html>

Useful Articles
Powershell GUI System Hardware Information
Executing PowerShell script from PHP HTML web server
Send system disk space utilization HTML report Email using PowerShell
Send Email using PowerShell with .net object System.Net.Mail.MailMessage
PowerShell XML OperationStopped: No coercion operator is defined between types 'System.Object&' and 'System.Object'
Powershell Create new file if not exist, if exist Rename file
PowerShell Create XML document with XmlWriter .net object
PowerShell save export data to XML file
Bulk change multiple file names with OneLiner PowerShell command
Resolved PowerShell Visual studio code stuck with 'Starting up PowerShell' in status bar
Building basic simple Web Server using PowerShell

Go Back

 Posted in Devops
  Tags html css devops kubernetes

Comment

Blog Search

Page Views

12086176

Archive

Comments

Follow me on Blogarama