// selectors
const textarea = document.querySelector('.code');
const lineNumbers = document.querySelector('.line-numbers');
const wrapLines = document.querySelector('#wrap-lines');

// Add event listeners
textarea.addEventListener('input', updateLineNumbers); // add new line numbers
textarea.addEventListener('scroll', syncScroll); // sync scrolling 
lineNumbers.addEventListener('scroll', syncLineScroll); // sync scrolling

function toggleWrap() {
  textarea.style.whiteSpace = wrapLines.checked ? 'pre-wrap' : 'nowrap';
}

// Synchronize vertical scrolling of line numbers with textarea
function syncScroll() {
  lineNumbers.scrollTop = textarea.scrollTop;
}
// Synchronize vertical scrolling of textarea with line numbers.
function syncLineScroll() {
  textarea.scrollTop = lineNumbers.scrollTop;
}

function updateLineNumbers() {
  const lines = textarea.value.split('\n').length;
  const lineNumbersHTML = Array.from({length: lines}, (_, i) => i + 1).join('<br>');
  lineNumbers.innerHTML = lineNumbersHTML;
}
// Initial setup
updateLineNumbers();

// selectors
const textarea = document.querySelector('.code');
const lineNumbers = document.querySelector('.line-numbers');
const wrapLines = document.querySelector('#wrap-lines');

// Add event listeners
textarea.addEventListener('input', updateLineNumbers); // add new line numbers
textarea.addEventListener('scroll', syncScroll); // sync scrolling 
lineNumbers.addEventListener('scroll', syncLineScroll); // sync scrolling

function toggleWrap() {
  textarea.style.whiteSpace = wrapLines.checked ? 'pre-wrap' : 'nowrap';
}

// Synchronize vertical scrolling of line numbers with textarea
function syncScroll() {
  lineNumbers.scrollTop = textarea.scrollTop;
}
// Synchronize vertical scrolling of textarea with line numbers.
function syncLineScroll() {
  textarea.scrollTop = lineNumbers.scrollTop;
}

function updateLineNumbers() {
  const lines = textarea.value.split('\n').length;
  const lineNumbersHTML = Array.from({length: lines}, (_, i) => i + 1).join('<br>');
  lineNumbers.innerHTML = lineNumbersHTML;
}
// Initial setup
updateLineNumbers();

  <h1>Line number</h1>
  <input type="checkbox" id="wrap-lines" class="wrap-lines" onchange="toggleWrap()">
  <label for="wrap-lines" class="checkbox-label" >Wrap lines</label>
  <div class="editor">
    <div class="line-numbers disable-select"></div>
    <textarea id="code" class="code" placeholder="Write something.. "></textarea>
  </div>

  <h1>Line number</h1>
  <input type="checkbox" id="wrap-lines" class="wrap-lines" onchange="toggleWrap()">
  <label for="wrap-lines" class="checkbox-label" >Wrap lines</label>
  <div class="editor">
    <div class="line-numbers disable-select"></div>
    <textarea id="code" class="code" placeholder="Write something.. "></textarea>
  </div>

body {
  font-family: monospace;
}
/* Optional: Prevent text selection for specific elements */
.disable-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#wrap-lines[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 20px;
  width: 20px;
  border: 1px solid black;
}
#wrap-lines[type=checkbox]::before {
  content: ".";
  color: transparent;
  height: 14px;
  width: 14px;
  padding-top: 2px;
  padding-left: 2px;
  border: 1px solid white;
  display: inline-block;
}
#wrap-lines[type=checkbox]:checked {
  background-color: black;
}
.checkbox-label {
  font-size: 16px;
}
.editor {
  display: flex;
  max-height: 50%;
  border: solid black;
}
.line-numbers {
  text-align: right;
  font-size: 16px;
  max-height: 50%;
  overflow-y: auto;
  padding-right: 5px;
  padding-left: 5px;
  padding-top: 2px;
}
.line-numbers::-webkit-scrollbar {
  display: none;
}
.code {
  flex: 1;
  font-size: 16px;
  outline: none;
  border: none;
  border-left: 0.5px solid black;
  resize: none;
  padding-top: 2px;
}

body {
  font-family: monospace;
}
/* Optional: Prevent text selection for specific elements */
.disable-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#wrap-lines[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 20px;
  width: 20px;
  border: 1px solid black;
}
#wrap-lines[type=checkbox]::before {
  content: ".";
  color: transparent;
  height: 14px;
  width: 14px;
  padding-top: 2px;
  padding-left: 2px;
  border: 1px solid white;
  display: inline-block;
}
#wrap-lines[type=checkbox]:checked {
  background-color: black;
}
.checkbox-label {
  font-size: 16px;
}
.editor {
  display: flex;
  max-height: 50%;
  border: solid black;
}
.line-numbers {
  text-align: right;
  font-size: 16px;
  max-height: 50%;
  overflow-y: auto;
  padding-right: 5px;
  padding-left: 5px;
  padding-top: 2px;
}
.line-numbers::-webkit-scrollbar {
  display: none;
}
.code {
  flex: 1;
  font-size: 16px;
  outline: none;
  border: none;
  border-left: 0.5px solid black;
  resize: none;
  padding-top: 2px;
}