Standalone JS Playground

About this tiny project

JavaScript is a powerful language that runs natively in the browser and can interact with whatever is on the page. However, it can be a bit tricky to see it in action without that interaction with the browser. This is where this playground comes in, we are doing some ✨🪄magic🪄✨ to show you the output of your code in the browser.

Now, this is not dark magic or anything. We are simply leveraging JavaScript's flexibility and expanding the functionality of built-in Web APIs, in this case, the console. If you are VERY curious, and because we have nothing to hide 🫣, checkout the assets/js/DOMConsole.js file. You will eventually learn how to do this and more, and more importantly, why and how it works!

Instructions

Find the index.js file in the sidebar of your code editor and let's work! To output to our special console you can use console.log(), console.info(), console.warn() and console.error(). Check index.js to see an example.

For every exercise in the bootcamp that involves JavaScript execution in a browser context BUT without directly manipulating elements in the browser, this playgroud will be your best friend. Most likely, those exercises are the ones during your first week of JavaScript, but hell, you need the tools and we provide!

• Clone this project into your local machine (please change the name-of-exercise bit)

git clone git@github.com:WBSCodingSchool/Standalone-JS-Playground.git name-of-exercise

• If you are working on exercises on our online Playground

  • Click the download button

  • Extract the script.js and instructions.md file from the downloaded .zip

  • Copy the contents of said file into index.js

  • Copy the instructions.md file into the root of your name-of-exercise directory

  • Either open index.html and right click on anywhere in the file, or simply right click on the name of the file in the sidebar and select Show Preview

    ⚠️ You need to have the Live Preview extension installed!

  • Well, start working!

• Of course, you can also use this playground to simply create snippets or anything :D

If you have any feedback, please reach out to your instructor <3