DEV Community

Badhon Roy
Badhon Roy

Posted on

First HTML coding😊

<!DOCTYPE html>




Neon Word 2007 - Enhanced Edition
<br> body {<br> margin: 0;<br> padding: 0;<br> font-family: &#39;Calibri&#39;, sans-serif;<br> background-color: #1a1a1a;<br> color: #fff;<br> }<br> .container {<br> max-width: 1000px;<br> margin: 20px auto;<br> background: #2e2e2e;<br> border-radius: 5px;<br> box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);<br> }<br> .ribbon {<br> background: linear-gradient(to bottom, #005566, #003d4d);<br> padding: 10px;<br> display: flex;<br> justify-content: space-around;<br> align-items: center;<br> border-bottom: 2px solid #00b7ea;<br> }<br> .ribbon button, .ribbon select, .ribbon input {<br> background: #0078d7;<br> color: white;<br> border: none;<br> padding: 5px 10px;<br> margin: 2px;<br> border-radius: 3px;<br> cursor: pointer;<br> text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff;<br> }<br> .ribbon button:hover {<br> background: #005ba1;<br> }<br> .editor {<br> padding: 20px;<br> min-height: 500px;<br> background: #000;<br> border: 1px solid #00b7ea;<br> outline: none;<br> color: #fff;<br> font-size: 16px;<br> overflow-y: auto;<br> white-space: pre-wrap;<br> text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 15px #00ffff, 0 0 20px #00ff00;<br> animation: neonGlow 1.5s ease-in-out infinite alternate;<br> }<br> .editor:focus {<br> box-shadow: 0 0 15px #00ffff inset;<br> }<br> @keyframes neonGlow {<br> from {<br> text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 0 0 15px #00ffff, 0 0 20px #00ff00;<br> }<br> to {<br> text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff, 0 0 40px #00ff00;<br> }<br> }<br> .status-bar {<br> background: #003d4d;<br> padding: 5px;<br> text-align: right;<br> color: #fff;<br> font-size: 12px;<br> text-shadow: 0 0 5px #00ffff;<br> }<br>



<!-- Ribbon Interface (Inspired by Word 2007) -->

Bold
Italic
Underline

Normal
8pt
10pt
12pt
14pt
18pt
24pt
36pt


Align Left
Align Center
Align Right
Save
Clear
    <!-- Editable Area with Neon Effect -->
    <div class="editor" contenteditable="true" spellcheck="true">
        Type your text here...
    </div>

    <!-- Status Bar -->
    <div class="status-bar" id="statusBar">
        Words: 0 | Characters: 0
    </div>
</div>

<script>
    const editor = document.querySelector('.editor');
    const statusBar = document.getElementById('statusBar');

    // Update word and character count
    editor.addEventListener('input', () => {
        const text = editor.innerText.trim();
        const words = text.split(/\s+/).filter(word => word.length > 0).length;
        const chars = text.length;
        statusBar.innerText = `Words: ${words} | Characters: ${chars}`;
    });

    // Save document as text file
    function saveDocument() {
        const text = editor.innerText;
        const blob = new Blob([text], { type: 'text/plain' });
        const a = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = 'NeonWordDoc.txt';
        a.click();
    }

    // Clear the editor
    function clearDocument() {
        editor.innerText = '';
        statusBar.innerText = 'Words: 0 | Characters: 0';
    }

    // Prevent default Enter key behavior to mimic Word's paragraph spacing
    editor.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') {
            e.preventDefault();
            document.execCommand('insertHTML', false, '<div><br></div>');
        }
    });
</script>

Top comments (0)