About
Explore
Events & Classes
Support Us
Join
Sign In
Lilla Mardiui
View Project Page
Run
Fullscreen
Online Textboard v0.0.3
HTML
CSS
JS
<!-- Welcome to Online Textboard! Here, you can type text for showcasing (eg. a video) This is version 0.0.3. Any suggestions, reviews or complaints, just message Lilla Mardiui. --> <html> <head> <title>Whiteboard</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> </head> <body> <label><center>Text Color</center></label> <div class="row"> <button onclick="changeColor('red', 'content')" style="background-color: red;"></button> <button onclick="changeColor('orange', 'content')" style="background-color: orange;"></button> <button onclick="changeColor('yellow', 'content')" style="background-color: yellow;"></button> <button onclick="changeColor('green', 'content')" style="background-color: green;"></button> <button onclick="changeColor('blue', 'content')" style="background-color: blue;"></button> <button onclick="changeColor('indigo', 'content')" style="background-color: indigo;"></button> <button onclick="changeColor('violet', 'content')" style="background-color: violet;"></button> <button onclick="changeColor('black', 'content')" style="background-color: black;"></button> <button onclick="changeColor('white', 'content')" style="background-color: white;"></button> </div> <label><center>Background Color</center></label> <div class="row"> <button onclick="changeBg('red', 'content')" style="background-color: red;"></button> <button onclick="changeBg('orange', 'content')" style="background-color: orange;"></button> <button onclick="changeBg('yellow', 'content')" style="background-color: yellow;"></button> <button onclick="changeBg('green', 'content')" style="background-color: green;"></button> <button onclick="changeBg('blue', 'content')" style="background-color: blue;"></button> <button onclick="changeBg('indigo', 'content')" style="background-color: indigo;"></button> <button onclick="changeBg('violet', 'content')" style="background-color: violet;"></button> <button onclick="changeBg('black', 'content')" style="background-color: black;"></button> <button onclick="changeBg('white', 'content')" style="background-color: white;"></button> </div> <label><center>Font Style</center></label> <div class="row"> <button onclick="changeFont('Arial,sans-serif', 'content')" style="font-family: Arial; font-size: 10px;">Arial</button> <button onclick="changeFont('Lucida Console,monospace', 'content')" style="font-family: Lucida Console; font-size: 5px;">Lucida</button> <button onclick="changeFont('Georgia,serif', 'content')" style="font-family: Georgia; font-size: 5px;">Georgia</button> <button onclick="changeFont('Impact,sans-serif', 'content')" style="font-family: Impact; font-size: 5px;">Impact</button> <button onclick="changeFont('Comic Sans MS, sans-serif', 'content')" style="font-family: Comic Sans MS; font-size: 5px;">Comic <br> Sans</button> <button onclick="changeFont('Courier New, monospace', 'content')" style="font-family: Courier New; font-size: 5px;">Courier <br> New</button> </div> <div id="content" contenteditable="true"></div> </body> </html>
html { font-family: "Helevetica", sans-serif; } *:focus { outline: none; } body { color: #333; font-weight: 100; max-width: 50em; margin: 0 auto; background-color: #b7b7b7; border: 1px solid black; } div:focus { outline: none; } #content { padding: 10px; word-break: break-word; font-size: 24px; font-family: Arial; overflow: auto; height: 200px; margin: 0; color: black; background-color: white; } button { border-radius: 50%; width: 30px; height: 30px; border: 1px solid black; margin-left: 2px; margin-right: 2px; } .row { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; margin-bottom: 10px; } label { text-align: center; }
function changeColor(color, element) { document.getElementById(element).style.color = color; } function changeBg(bg, element) { document.getElementById(element).style.background = bg; } function changeFont(font, element) { document.getElementById(element).style.fontFamily = font; }
About
Explore
Events & Classes
Support Us
Join
Sign In
.png)