Welcome to WebDev PlayGround!

PROJECT SETTINGS

Project Name

Author

Download Sample Website Project
sample.wdpg | 2kB

You can download this project and then import to see how projects work. By all means, feel free to modify it as much as you want and use for whatever project of yours. It was supposed to be better but I messed up, more info in the project.

This is a quick documentation to help you get started:

HOME TAB gives you access to this documentation, as well as saving and loading projects. Basically, essential stuff.

OPTIONS TAB is the place full of options and functions like exporting your website! You can change many things about your website there! Some more advanced than others, but still useful! Besides that, you can also use it to change the <head> tag, as you can only edit the body tag using the editor.

EDITOR TAB is the place you will probably spend the most time at, as you can edit your code right there! HTML, CSS, JavaScript, all in one place! It also gives you access to special widget designing tools to make your job easier! Note: Special widget deigning tools are not available on mobile.

PREVIEW TAB is the place where the magic happens! Your code will be transformed into a <div> element, which acts like a container for your website! This is also why I recommend you not to style all <div> elements directly (using the div CSS selector), since this can change the entire website. Yeah, including the original design of this playground. However, I've decided that for the sake of experiments, feel free to change anything on this playground as well, if you want it all back, just refresh the website.

THE SYMBOLS IN THE TOP RIGHT CORNER are two (shocking). The one that looks like something to write is the changelog. The weird one is a toggle between Light Mode and Dark Mode. Some people like Light Mode better, but since my eyes hurt from it, the default setting is Dark Mode.

Now you are ready to begin! Play some beats and have fun!

If you have no idea how you ended up here, you can return to the homepage.
Press Ctrl+Q at any time to enable/disable contenteditable on this website. If you aren't sure about what it means, it would be better to avoid it. Or not, have fun! Note, that it won't work on tools.

Website Core


                            <!DOCTYPE html>

                            <html>

                              <head>

                                <link
                            rel="stylesheet"
                            href="style.css"/>



                                <title></title>


                                <link
                            rel="icon"
                            type="image/x-icon"
                            href=""/>



                              </head>

                              <body>

                                <script
                            src="main.js"></script>

                                HTML CONTENT

                              </body>

                            </html>

Reserved Keywords

You can use these on your website, however, they won't function anymore after exporting.

r (Variable/Element): Holds the :root element.
layouts (Object): Holds all layouts and input elements on this website.
mode (Variable/Number): Holds info about the current display mode (Light/Dark).
editable (Variable/Number): Holds info about the current contenteditable state (Enabled/Disabled).
currentScreen (Variable/String): Holds info about the current screen ('home', 'options', 'editor', 'preview' or 'tool').
toggleMode (Function, Parameterless): Toggles between light mode and dark mode.
setScreen (Function, Parameter x =string, Parameter tool =string): Changes the screen. The parameter x must be one of currentScreen values.
handleKeydown (Function, Parameter e =KeyBoard Event): Handles key press.
Export (Function, Parameterless): Exports the website according to the current parameters.
exportProject (Function, Parameterless): Exports the project according to the current parameters.
importProject (Function, Parameterless): Imports a project.
currentTab (Variable/String): Holds info about the current editor tab ('html', 'css', 'cssm' or 'js').
setTab (Function, Parameter x =string): Changes the editor tab. The parameter must be one of currentTab values.
syntaxHelp (Function, Parameter x =string): Help with syntax. The parameter must be one of currentTab values.
addch (Function, Parameter str =string, place =string, char =string): Inserts char into str at current position within place. The place parameter must be one of currentTab values.
deletion (Variable/Boolean): True when the last pressed key was Backspace or Delete.
fontSize (Object): Holds info about the current font size, along with an array of possible font sizes.
changeFontSize (Function, Parameter how =string): Changes the font size. The parameter must be either '+' or '-'.
previewFunction (Function, Parameter x =number): Triggers an action based on the parameter. If x=1, changes the preview mode to mobile. If x=2, changes the preview mode to full screen.
previewState (Object): Holds info about the current preview state.
uniquecss (Variable/Boolean): Checks whether you have enabled independent CSS for mobile.
toggleCssDependency (Function, Parameterless): Toggles the uniquecss variable and changes the required styles.
downloadUnit (Function, Parameterless): Downloads the current editor tab's content as a corresponding file.

Settings

Custom Head Tag Code (Won't work in Preview)

Independent CSS for Mobile

Export

Export As:

Single HTML File will download the website as a single file, with the script and styles directly injected inside. Anyone can launch this file on their device and use it without the need of any other files or organisation. Exporting as Separate Files is useful when you are building a website, as each file has it's own role. The HTML tag will have the necessary connections to the other two files.

HTML File Name:

.html

If you chose exporting as multiple files, don't forget to press "Allow" when your browser informs you about downloading multiple files! Some browsers might warn you about downloading JavaScript files, you will need to choose "Keep" or "Allow" when asked about the main.js file.

HTML

Global CSS

Mobile CSS

JavaScript

TOOLS

Cool JavaScript tools are coming soon! You will be able to find them here!

10/5/24
Added the Button Creator tool.

9/20/24
Finished the Button Designer tool.

9/18/24
Updated the Button Designer tool in Preview Mode.

9/16/24
Standardized the border radii of buttons.
Added the Button Designer tool in Preview Mode.

9/15/24
Prepared the setScreen function for tools.
Fixed reserved functions not showing 'cssm' between the values of currentTab.

9/2/24
Added the ability to download individual files using a new download button in the toolbar.
Toolbar now displays throughout the entire container, instead of in the center only.
The button to Increase/Decrease font size now says what it does on hover.

8/31/24
Fixed font size not changing.
New (and proper) sample project.

8/26/24
The website was released.

Website Core

Reserved Keywords

Settings

Export

-

14

px

+

TOOLS