drawing board (yawn web)

Interactive Drawing Board
Posted: 22 September 2023

Place your cursor or finger on the screen and hold down primary button or press and hold screen to start drawing. Release the primary button or lift your finger to stop drawing. Choose different colors to brighten up your art. When you are finished, you can hit the reset button to clear the screen. Before clearing the screen, you can use the PrintScreen key to capture your art. This drawing board is like an Etch A Sketch—once you reset the board, your art is gone!

		  
CSS
.drawingboardcontainer {
	position: relative;
	margin: 0;
	display: flex;
	flex-direction: column;
	height: auto;
	justify-content: center;
	align-items: center;
}

.rectangle {
	position: relative;
	border: 3px solid black;
	border-radius: 5px;
	background-color: #f0f0f0;
	width: 400px;
	height: 400px;
}

.dot {
	position: absolute;
	border-radius: 50%;
	width: 4px;
	height: 4px;
}

.drawingboard-reset-button (
    background-color: beige;
	border: 1px solid red;
)

.color-buttons {
	margin-top: 16px;
}

.color-button {
	border: 3px solid transparent;
	border-radius: 5px;
	box-shadow: 0px 0px 5px rgba(100, 100, 100, 0.8);
	margin: 16px 5px;
	padding: 5px 5px;
	width: 50px;
	font-size: 10px;
}

.color-button[data-color="black"] {
	border-color: black;
}

.color-button[data-color="red"] {
	border-color: red;	
}

.color-button[data-color="yellow"] {
	border-color: yellow;
}

.color-button[data-color="green"] {
	border-color: green;
}

.color-button[data-color="blue"] {
	border-color: blue;
}

.color-button[data-color="white"] {
	border-color: white;
}

#resetButton {
	margin-top: 12px;
}
		  
HTML		  
<div class="drawingboardcontainer">
<div class="rectangle-wrapper">
<div class="rectangle" id="drawingArea"></div>
</div>
<div class="color-buttons">
<button class="color-button" data-color="black">Black</button>
<button class="color-button" data-color="red">Red</button>
<button class="color-button" data-color="yellow">Yellow</button>
<button class="color-button" data-color="green">Green</button>
<button class="color-button" data-color="blue">Blue</button>
<button class="color-button" data-color="white">white</button>
</div>
<button class="drawingboard-reset-button" id="resetButton">Reset</button>
</div>

Javascript
// Get the copy button and code block elements
const copyButton = document.querySelector('.copy-button');
const codeBlock = document.querySelector('code');

// Add a click event listener to the copy button
copyButton.addEventListener('click', () => {
  // Create a new range and select the code block's content
  const range = document.createRange();
  range.selectNode(codeBlock);

  // Add the range to the clipboard
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);

  // Copy the selected text to the clipboard
  document.execCommand('copy');

  // Clean up the selection
  selection.removeAllRanges();

  // Update the copy button text temporarily
  copyButton.textContent = 'Copied!';
  setTimeout(() => {
    copyButton.textContent = 'Copy';
  }, 1500);
});