Coding competition

#javascript #productivity #devto #notifications
So I am going to start a coding competition so we can code stuff. Try to code the best project. Here is mine:

<!DOCTYPE html>
<html>
<head>
    <title>SuccessOS</title>
    <style>
        body {
            font-family: 'Courier New', monospace;
            background-color: #0078D7;
            color: white;
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow: hidden;
        }

        #desktop {
            height: calc(100% - 30px);
            padding: 10px;
            position: relative;
        }

        #taskbar {
            background-color: #005A9E;
            height: 30px;
            width: 100%;
            position: fixed;
            bottom: 0;
            display: flex;
            align-items: center;
            padding: 0 10px;
        }

        #start-button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }

        .window {
            background-color: white;
            color: black;
            width: 300px;
            height: 200px;
            position: absolute;
            border: 1px solid #005A9E;
            box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
        }

        .window-header {
            background-color: #005A9E;
            color: white;
            padding: 5px;
            display: flex;
            justify-content: space-between;
        }

        .window-content {
            padding: 10px;
        }

        .icon {
            width: 64px;
            text-align: center;
            margin: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="desktop">
        <div class="icon" onclick="openApp('success')">
            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSJ3aGl0ZSIgZD0iTTI1NiA4QzExOSA4IDggMTE5IDggMjU2czExMSAyNDggMjQ4IDI0OCAyNDgtMTExIDI0OC0yNDhTMzkzIDggMjU2IDh6bTExMy4zIDMwMS4xTDIzNiAyNDMuOGwtNTguOSA2NS4zLTU4LjktNjUuMy0zMC4zIDI3LjEgODkuMiAxMDAuNSA4OS4yLTEwMC41LTMwLjMtMjcuMXptMC0xMTQuNEwtMjM2IDEzNi4ybC01OC45IDY1LjMtNTguOS02NS4zLTMwLjMgMjcuMSA4OS4yIDEwMC41IDg5LjItMTAwLjUtMzAuMy0yNy4xeiIvPjwvc3ZnPg==" width="48" height="48">
            <div>Success</div>
        </div>
    </div>

    <div id="taskbar">
        <button id="start-button" onclick="showStartMenu()">Start</button>
        <div id="clock" style="margin-left: auto;"></div>
    </div>

    <script>
        // Update clock
        function updateClock() {
            const now = new Date();
            document.getElementById('clock').textContent = now.toLocaleTimeString();
        }
        setInterval(updateClock, 1000);
        updateClock();

        // Open an application
        function openApp(appName) {
            const desktop = document.getElementById('desktop');
            const window = document.createElement('div');
            window.className = 'window';
            window.style.left = (Math.random() * 200) + 'px';
            window.style.top = (Math.random() * 100) + 'px';

            window.innerHTML = `
                <div class="window-header">
                    <span>${appName}</span>
                    <span onclick="this.parentNode.parentNode.remove()">X</span>
                </div>
                <div class="window-content">
                    <h2>Success!</h2>
                    <p>You're running ${appName} on SuccessOS!</p>
                    <p>Everything you do here will be successful!</p>
                </div>
            `;

            desktop.appendChild(window);

            // Make window draggable
            let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
            window.querySelector('.window-header').onmousedown = dragMouseDown;

            function dragMouseDown(e) {
                e = e || window.event;
                e.preventDefault();
                pos3 = e.clientX;
                pos4 = e.clientY;
                document.onmouseup = closeDragElement;
                document.onmousemove = elementDrag;
            }

            function elementDrag(e) {
                e = e || window.event;
                e.preventDefault();
                pos1 = pos3 - e.clientX;
                pos2 = pos4 - e.clientY;
                pos3 = e.clientX;
                pos4 = e.clientY;
                window.style.top = (window.offsetTop - pos2) + "px";
                window.style.left = (window.offsetLeft - pos1) + "px";
            }

            function closeDragElement() {
                document.onmouseup = null;
                document.onmousemove = null;
            }
        }

        // Show start menu
        function showStartMenu() {
            openApp('Start Menu');
        }
    </script>
</body>
</html>
Thank you!
Forem Open Source Core

Coding competition

Top comments (0)
