Update README.md

Add devcontainer for easy development setup

.devcontainer/devcontainer.json

@@ -0,0 +1,23 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
+{
+	"name": "Node.js",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/javascript-node:0-18",
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	"forwardPorts": [3000],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	//write post create command npm install & npm run hot
+	"postCreateCommand": "npm install"
+
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}

README.md

@@ -4,7 +4,7 @@ This is a browser based software for creating pixel art
 
 The tool can be viewed online here: https://lospec.com/pixel-editor
 
-## How to contribute
+## Before contributing
 
 Before starting to work, please open an issue for discussion so that we can organize the work without creating too many conflicts. If your contribution is going to fix a bug, please
  make a fork and use the bug-fixes branch. If you want to work on a new feature, please use the new-feature branch instead.
@@ -44,13 +44,20 @@ Suggestions / Planned features:
 ## How to Contribute
 
 ### Requirements
-
-You must have node.js and git installed.
+No requirements if you want to use Github's Codespaces. If you prefer to setup your environment on desktop, you'll need to have node.js and git installed.
 
 You also need `npm` in version 7 (because of 2nd version of lockfile which was introduced there) which comes with Node.js 15 or newer. To simplify installation of proper versions you can make use of [nvm](https://github.com/nvm-sh/nvm#installing-and-updating) and run `nvm install` – it will activate proper Node.js version in your current command prompt session.
 
 ### Contribution Workflow
 
+#### Github Codespaces
+1. Click **Fork** above. It will automatically create a copy of this repository and add it to your account.
+2. At the top of this page, select the branch you want to work on.
+3. Click on "Code". Select the "Codespaces" submenu and click on "Create codespace on **branch name**".
+4. Run `npm install`. Then run `npm run hot`: it will open a popup containing the editor, so make sure to disable your adblock if you're using one.
+
+#### Desktop environment
+
 1. Click **Fork** above. It will automatically create a copy of this repository and add it to your account.
 2. Clone the repository to your computer.
 3. Open the folder in command prompt and run **`npm install`**

js/ColorModule.js

@@ -158,14 +158,15 @@ const ColorModule = (() => {
      */
     function addColorButtonEvent() {
         //generate random color
-        const newColor = new Color("hsv", Math.floor(Math.random()*360), Math.floor(Math.random()*100), Math.floor(Math.random()*100)).hex;
-
-        //remove current color selection
-        document.querySelector('#colors-menu li.selected')?.classList.remove('selected');
+        const newColor = new Color("hsv", Math.floor(Math.random()*360), Math.floor(Math.random()*100), Math.floor(Math.random()*100)).hex;  
 
         //add new color and make it selected
         let addedColor = addColor(newColor);
         addedColor.classList.add('selected');
+
+        //remove previous color selection
+        document.querySelector('#colors-menu li.selected')?.classList.remove('selected');
+
         addedColor.style.width = squareSize + "px";
         addedColor.style.height = squareSize + "px";
         updateCurrentColor(newColor);