How to fix spacing in JavaScript | Smarter Dev | Page 1

nimble echo Oct 4, 2023, 6:51 AM

#

that is what I have so far

#

I need it to look like this

#

#

@pliant sleet if you are free would you be able to help me with this?

pliant sleet Oct 4, 2023, 6:52 AM

#

I'm cooking but after I can what's up

nimble echo Oct 4, 2023, 6:52 AM

#

its like a similar thing from last time

#

but in this case Im printing it to a site instead of the console and its not as simple as storing it into two strings

#

ive been at this one for hours and im just stuck lol

#

all the defeceit stuff doesnt work on this one since for some reason its not tracking the location of the cord in the line

pliant sleet Oct 4, 2023, 7:38 AM

#

oh

#

i'm done eating

nimble echo Oct 4, 2023, 7:38 AM

#

Oh okay

#

I’m still clueless on this

pliant sleet Oct 4, 2023, 7:39 AM

#

is whitespacing not working on the site?

#

did u look at the html?

nimble echo Oct 4, 2023, 7:39 AM

#

Wdym?

#

it seems like the defeceit variable is doing nothing

#

this is the only line that is giving it a space: chords += inner + " "

pliant sleet Oct 4, 2023, 7:40 AM

#

I mean it was working on console but you are trying to adapt it to a website and it's not working?

nimble echo Oct 4, 2023, 7:41 AM

#

the one on the console was slightly different but yeah

pliant sleet Oct 4, 2023, 7:41 AM

#

or you mean your uploading the code to an online website and it's console is not doing the right thing?

#

can I see the code that you are using for the online one?

nimble echo Oct 4, 2023, 7:41 AM

#

thats my code for the online one

#

this is my code for the console one:

#


fs.readFile('songs/sister_golden_hair.txt', function(err, data) {
  if(err) throw err
  let array = data.toString().split("\n")

  for (let line of array) {
    lyrics = ""
    chords = ""
    let defeceit = 0;

    for (i = 0; i < line.length; i++) {
        if (line[i] == "[") {
            let inner = ""
            for (j = i + 1; j < line.length; j++) {
                if (line[j] == "]") {
                    break
                }
                inner += line[j]
                i = j + 1
            }
            chords += inner + " "
            defeceit += inner.length + 1
        }
        else {

            lyrics += line[i]
            if (defeceit == 0)
                chords += " "
            else defeceit--
        }
    }
    console.log(chords)
    console.log(lyrics)
  }
})

console.log("DONE") ```

#

code for online one:```
function parseChordProFormat(chordProLinesArray) {
//parse the song lines with embedded
//chord pro chords and add them to DOM

console.log('type of input: ' + typeof chordProLinesArray)

//add the lines of text to html <p> elements
let textDiv = document.getElementById("text-area")
textDiv.innerHTML = '' //clear the html

for (let i = 0; i < chordProLinesArray.length; i++) {
let line = chordProLinesArray[i]
lyrics = ""
chords = ""
check = ""
let defeceit = 0;

console.log(line)

for (k = 0; k < line.length; k++) {
  if (line[k] == "[") {
    let inner = ""
    for (j = k + 1; j < line.length; j++) {
      if (line[j] == "]") {
        //lyrics += `<span class="chord">${inner}</span>`
        break
      }
      inner += line[j]
      k = j + 1
  }
  chords += inner + " "
  defeceit += inner.length + 1 //line does nothing

}
else {
lyrics += line[k]
if (defeceit == 0)
chords += " "
else defeceit--
}
}
textDiv.innerHTML = textDiv.innerHTML + <span class="chord">${chords}</span> + <p> ${lyrics}</p>
}
}```

nimble echo Oct 4, 2023, 7:43 AM

#

nimble echo code for online one:``` function parseChordProFormat(chordProLinesArray) { //...

this is the one I'm trying to make work

#

but it seems like the defeceit += inner.length + 1 does nothing so all the defeceit stuff is useless as it doesnt work and doesnt create any spacing

#

if you got anything that could help me Id appreciate it

pliant sleet Oct 4, 2023, 7:53 AM

#

try putting if (defeceit == 0)
chords += " " where you have if (defeceit == 0)
chords += " "

#

@nimble echo

nimble echo Oct 4, 2023, 7:54 AM

#

ok

#

that worked ...

#

😭

#

what does chords += " " this mean/do?

pliant sleet Oct 4, 2023, 7:56 AM

#

nbsp is non breaking space I think

#

it adds spaces so that the html formatting doesn't collapse the text I think

nimble echo Oct 4, 2023, 7:56 AM

#

non breaking space?

nimble echo Oct 4, 2023, 7:56 AM

#

pliant sleet it adds spaces so that the html formatting doesn't collapse the text I think

oh

pliant sleet Oct 4, 2023, 7:56 AM

#

like line break like \n

nimble echo Oct 4, 2023, 7:56 AM

#

so thats why it was all gathered up

#

i was wondering why that line was doing nothing 😭

#

thanks a lot tho been staring at this for hours now

#

also one more thing

#

you got any idea how to remove the floating space line underneath it?

#

pliant sleet Oct 4, 2023, 7:59 AM

#

can you adjust the css?

nimble echo Oct 4, 2023, 7:59 AM

#

yeah

pliant sleet Oct 4, 2023, 7:59 AM

#

oh maybe remove the margin or padding on the span and paragraph tags

#

or make it a lower number

nimble echo Oct 4, 2023, 8:00 AM

#

wdym?

#

my teach said something about <pre></pre>

#

instead of <p> </p>

#

but im not really sure where to put that

pliant sleet Oct 4, 2023, 8:06 AM

#

oh maybe just use pre then

#

put it where you put the p and spans

#

<pre> </pre> instead of <p> </p> and <span> </span>

nimble echo Oct 4, 2023, 8:07 AM

#

textDiv.innerHTML = textDiv.innerHTML + <pre class="chord">${chords}</pre> + <pre> ${lyrics}</pre>

#

#

any idea why this is happening?

pliant sleet Oct 4, 2023, 8:11 AM

#

it puts it back into monospace like how the console was

#

but also you need to put it for the chords

nimble echo Oct 4, 2023, 8:13 AM

#

how would i do that?

pliant sleet Oct 4, 2023, 8:15 AM

#

change <pre class="chord"> to <pre>

nimble echo Oct 4, 2023, 8:15 AM

#

oh ok

#

#

now it looks like this

pliant sleet Oct 4, 2023, 8:16 AM

#

is there a lyrics class in the css?

#

you need for it to be how it was in the first photo that you sent?

nimble echo Oct 4, 2023, 8:16 AM

#

i have this ``` <style>
/*element selectors: */
body {
background: #dddddd
}

p {
  font-size: large;
  font-weight: bold;
  font-family: "Courier", Monospace;
  color: blue;
}
/* class selectors: */
.chord {
  font-size: large;
  font-weight: bold;
  font-family: "Courier", Monospace;
  color: green;
}

/*id selectors: */

</style> ```

nimble echo Oct 4, 2023, 8:17 AM

#

pliant sleet you need for it to be how it was in the first photo that you sent?

yeah

pliant sleet Oct 4, 2023, 8:17 AM

#

make a .lyrics class and copy the lyrics class contents except for the color

#

in the css

nimble echo Oct 4, 2023, 8:18 AM

#

wait what?

#

i make a new class?

pliant sleet Oct 4, 2023, 8:19 AM

#

if you want to use pre yeah

#

cause you need to change the color

#

to blue

nimble echo Oct 4, 2023, 8:20 AM

#

and i copy the stuff from p?

nimble echo Oct 4, 2023, 8:20 AM

#

pliant sleet to blue

what about the green?

pliant sleet Oct 4, 2023, 8:20 AM

#

the green is in chords so it's still good

nimble echo Oct 4, 2023, 8:20 AM

#

it doesnt show as green?

pliant sleet Oct 4, 2023, 8:21 AM

#

you can use <pre class="chord"> and <pre class="lyrics"> for the lyrics and chords

#

the green disappeared cause you removed the class cause I thought your professor wanted you to use pre to make it like the console

#

but you said it needs to be like the first pic

nimble echo Oct 4, 2023, 8:22 AM

#

textDiv.innerHTML = textDiv.innerHTML + <pre class="chord">${chords}</pre> + <pre class> ${lyrics}</pre>
}

#

i got this

pliant sleet Oct 4, 2023, 8:22 AM

#

<pre class="lyrics"> ${lyrics}</pre>

nimble echo Oct 4, 2023, 8:22 AM

#

      font-size: large;
      font-weight: bold;
      font-family: "Courier", Monospace;
      color: blue;
    }
    /* class selectors: */
    .chord {
      font-size: large;
      font-weight: bold;
      font-family: "Courier", Monospace;
      color: green;
    }
    .lyrics {
      font-size: large;
      font-weight: bold;
      font-family: "Courier", Monospace;
    } ```

pliant sleet Oct 4, 2023, 8:22 AM

#

lyrics {
font-size: large;
font-weight: bold;
font-family: "Courier", Monospace;
}

#

in that part add color:blue; at the end

nimble echo Oct 4, 2023, 8:23 AM

#

kk

#

#

still random space in between and not blue lol

pliant sleet Oct 4, 2023, 8:25 AM

#

can I see the css?

nimble echo Oct 4, 2023, 8:26 AM

#

      background: #dddddd
    }

    p {
      font-size: large;
      font-weight: bold;
      font-family: "Courier", Monospace;
      color: blue;
    }
    /* class selectors: */
    .chord {
      font-size: large;
      font-weight: bold;
      font-family: "Courier", Monospace;
      color: green;
    }
    .lyrics {
      font-size: large;
      font-weight: bold;
      font-family: "Courier", Monospace;
      color: blue;
    } ```

pliant sleet Oct 4, 2023, 8:26 AM

#

ok can I see the code now?

nimble echo Oct 4, 2023, 8:26 AM

#

  //parse the song lines with embedded
  //chord pro chords and add them to DOM

  console.log('type of input: ' + typeof chordProLinesArray)

  //add the lines of text to html <p> elements
  let textDiv = document.getElementById("text-area")
  textDiv.innerHTML = '' //clear the html

  for (let i = 0; i < chordProLinesArray.length; i++) {
    let line = chordProLinesArray[i]
    lyrics = ""
    chords = ""
    let defeceit = 0;

    console.log(line)

    for (k = 0; k < line.length; k++) {
      if (line[k] == "[") {
        let inner = ""
        for (j = k + 1; j < line.length; j++) {
          if (line[j] == "]") {
            break
          }
          inner += line[j]
          k = j + 1
      }
      chords += inner + " "
      defeceit += inner.length + 1
  }
  else {
    lyrics += line[k]
    if (defeceit == 0)
    chords += "&nbsp;"
  else defeceit--
  }
}
textDiv.innerHTML = textDiv.innerHTML + `<pre class="chord">${chords}</pre>` + `<pre class="lyrics"> ${lyrics}</pre>`
}
} ```

#

wait it fixed itself but there is still random space

pliant sleet Oct 4, 2023, 8:32 AM

#

margin:0px 0px -20px 0px;

#

maybe try that in chords css

nimble echo Oct 4, 2023, 8:32 AM

#

ok

#

oh that worked thanks

#

but everything is misaligned lol

#

pliant sleet Oct 4, 2023, 8:35 AM

#

try changing chords += inner + " " to chords += inner + " "

nimble echo Oct 4, 2023, 8:35 AM

#

ok

#

#

still messed up

#

i figured it out thanks

pliant sleet Oct 4, 2023, 8:39 AM

#

oh what was it?

nimble echo Oct 4, 2023, 8:41 AM

#

i just used this ``` body {
background: #dddddd
}

p {
  font-size: large;
  font-weight: bold;
  font-family: "Courier", Monospace;
  color: blue;
}
/* class selectors: */
.chord {
  font-size: large;
  font-weight: bold;
  font-family: "Courier", Monospace;
  color: green;
  margin:0px 0px -20px 0px;
} ```

#

and this ``` function parseChordProFormat(chordProLinesArray) {
//parse the song lines with embedded
//chord pro chords and add them to DOM

console.log('type of input: ' + typeof chordProLinesArray)

//add the lines of text to html <p> elements
let textDiv = document.getElementById("text-area")
textDiv.innerHTML = '' //clear the html

for (let i = 0; i < chordProLinesArray.length; i++) {
let line = chordProLinesArray[i]
lyrics = ""
chords = ""
let defeceit = 0;

console.log(line)

for (k = 0; k < line.length; k++) {
  if (line[k] == "[") {
    let inner = ""
    for (j = k + 1; j < line.length; j++) {
      if (line[j] == "]") {
        break
      }
      inner += line[j]
      k = j + 1
  }
  chords += inner + " "
  defeceit += inner.length + 1

}
else {
lyrics += line[k]
if (defeceit == 0)
chords += " "
else defeceit--
}
}
textDiv.innerHTML = textDiv.innerHTML + <pre class="chord">${chords}</pre> + <p> ${lyrics}</p>
}
} ```

pliant sleet Oct 4, 2023, 8:46 AM

#

oh ok congrats you got it under control

nimble echo Oct 4, 2023, 8:57 AM

#

Thanks to your help I appreciate it and sorry for the bother

pliant sleet Oct 4, 2023, 9:13 AM

#

nimble echo Thanks to your help I appreciate it and sorry for the bother

no prob @nimble echo

nimble echo Oct 4, 2023, 11:08 AM

#

hi @pliant sleet I had another question I was wondering if you could help me

#

  //add the lines of text to html <p> elements
  let textDiv = document.getElementById("text-area")
  textDiv.innerHTML = '' //clear the html

  const noteMap = {
    'A': 'A#',
    'A#': 'Bb',
    'Bb': 'A',
    'B': 'C',
    'C': 'C#',
    'C#': 'Db',
    'Db': 'C',
    'D': 'D#',
    'D#': 'Eb',
    'Eb': 'D',
    'E': 'F',
    'F': 'F#',
    'F#': 'Gb',
    'Gb': 'F',
    'G': 'G#',
    'G#': 'Ab',
    'Ab': 'G'
  };

  for (let i = 0; i < chordProLinesArray.length; i++) {
    const line = chordProLinesArray[i];
    let lyrics = "";
    let chords = "";

    for (let k = 0; k < line.length; k++) {
      if (line[k] === "[") {
        let inner = "";
        for (let j = k + 1; j < line.length; j++) {
          if (line[j] === "]") {
            break;
          }
          inner += line[j];
          k = j + 1;
        }
        let transposedChord = inner;
        if (transposeUp) {
          transposedChord = transposedChord.replace(/[A-G][#b]?/g, match => {
            if (noteMap.hasOwnProperty(match)) {
              return noteMap[match];
            }
            return match; // Return unchanged if not found in noteMap
          });
        }
        chords += transposedChord + " ";
      } else {
        lyrics += line[k];
      }
    }

    textDiv.innerHTML += `<pre class="chord">${chords}</pre>` + `<p>${lyrics}</p>`;
  }
} ```

#

this is my code so far

#

If the user presses the "Transpose Up" button the chords should be transposed up one semitone (or half-step) as they say in music. That is, an Am7 chord should be become A#m7 (or Bbm7), F#7 should become G7, Ebmin should become Emin etc. (see below for more explanation of what chord transposition means.)

#

#

something like this

pliant sleet Oct 4, 2023, 11:10 AM

#

oh I think I get the idea

#

what happens when you run your code?

nimble echo Oct 4, 2023, 11:11 AM

#

well when i run it i get the output as before

#

but when I click the Transpose Up button it just brings me back to this page:

#

pliant sleet Oct 4, 2023, 11:13 AM

#

how are you handling the button click?

#

with an event handler or like button with onclick?

nimble echo Oct 4, 2023, 11:14 AM

#

event handler

pliant sleet Oct 4, 2023, 11:14 AM

#

can I see the event handler?

nimble echo Oct 4, 2023, 11:14 AM

#

  transposeUp()
} ```

#

this is the event listener document.getElementById('transposeup_button').addEventListener('click', transposeUpButton)

pliant sleet Oct 4, 2023, 11:15 AM

#

transposeup is missing arguments isn't it?

nimble echo Oct 4, 2023, 11:15 AM

#

wdym?

#

like chordProLinesArray, transposeUp?

pliant sleet Oct 4, 2023, 11:15 AM

#

yeah

nimble echo Oct 4, 2023, 11:16 AM

#

when I add that the button stops working

pliant sleet Oct 4, 2023, 11:17 AM

#

what is the transposeUp Parameter?

nimble echo Oct 4, 2023, 11:18 AM

#

idk tbh

pliant sleet Oct 4, 2023, 11:20 AM

#

lol what?

#

how is it supposed to work?

#

like just tell me in english what you wanted the function to accomplish

nimble echo Oct 4, 2023, 11:21 AM

#

if transpose up button is pressed then make sure to update the cords every single time button is pressed to hold new buttons
for(i = 0; i < cords.length; i++) or you can even use a while loop.
check every single cords for each condition if(cord[i] = A) -> cords[i] = A# break, else if(cord[i] = A#) -> cords[i] = A# break, and so on.
Each time a cord is checked and it matches, break the loop then increment cord array by one and go through the loop again until all values in loop are checked.
Make sure to only replace the Capital Letters in the cords and replace them with the new ones such as F#m -> Gm.

#

this is what i wrote to try and break it down for myself

pliant sleet Oct 4, 2023, 11:23 AM

#

if(cord[i] = A#) -> cords[i] = A# break, and so on. is this line supposed to be A#->B?

nimble echo Oct 4, 2023, 11:23 AM

#

yeah

#

i just copied and pasted it just for a basic idea

#

#

its all lined up according to this

pliant sleet Oct 4, 2023, 11:24 AM

#

ok so the input you need for the function is just the chordProLinesArray?

nimble echo Oct 4, 2023, 11:25 AM

#

well yeah

#

basically I was thinking I just create a bunch of if and else if statements to check if each value of the chords match and if they do I would store them inside of a new string and keep the old chords within a string and I would print out the new chords in place of the old chords keeping the same lyrics

#

but I have no idea if this would work

pliant sleet Oct 4, 2023, 11:26 AM

#

wait is transpose up only available after the page is rendered?

nimble echo Oct 4, 2023, 11:26 AM

#

mostly due to the fact my button isnt working properly

pliant sleet Oct 4, 2023, 11:26 AM

#

I think that you had the right idea

nimble echo Oct 4, 2023, 11:26 AM

#

pliant sleet wait is transpose up only available after the page is rendered?

it should only work after you have inputted a song

#

it will still appear tho

pliant sleet Oct 4, 2023, 11:27 AM

#

you don't have to reuse the entire text

nimble echo Oct 4, 2023, 11:27 AM

#

i understand the logic behind all of this its just kinda of hard to implement without any prior knowledge

nimble echo Oct 4, 2023, 11:27 AM

#

pliant sleet you don't have to reuse the entire text

wdym?

pliant sleet Oct 4, 2023, 11:27 AM

#

you just need to modify the text that is there already

nimble echo Oct 4, 2023, 11:27 AM

#

should I be using a map or is just doing a bunch of if and else fine?

pliant sleet Oct 4, 2023, 11:27 AM

#

map is going to be a lot cleaner

nimble echo Oct 4, 2023, 11:28 AM

#

honestly I forgot how maps work lol

#

I just heard someone else used them

pliant sleet Oct 4, 2023, 11:28 AM

#

ok well your technically using an object

nimble echo Oct 4, 2023, 11:28 AM

#

i was just gonna spam if and else if

pliant sleet Oct 4, 2023, 11:28 AM

#

but you can use it like a map

#

the way to use them is mapname[key] returns the value at the key

nimble echo Oct 4, 2023, 11:29 AM

#

ok

pliant sleet Oct 4, 2023, 11:29 AM

#

const noteMap = {
    'A': 'A#',
    'A#': 'Bb',
    'Bb': 'A',```||

#

so from that small sample say chords[i] = 'A'

#

you would just do replace(chords[i],notemap[chords[i]])

nimble echo Oct 4, 2023, 11:31 AM

#

ok

#

but how is this more efficient then just using a bunch of if and else if because wouldnt i still need to check the values across using if and else if?

pliant sleet Oct 4, 2023, 11:33 AM

#

well I dunno at the microprocessor level if it's more efficient or not especially on a small size

#

but think about it like this

#

the map is like a phone book with peoples name and phone numbers

#

and you can instantly check where someones name is

#

and the if else way is like going from the top to the bottom checking if you are at the right name or not

nimble echo Oct 4, 2023, 11:34 AM

#

oh okay

#

could you explain how this works? transposedChord = transposedChord.replace(/[A-G][#b]?/g, match => { if (noteMap.hasOwnProperty(match)) { return noteMap[match];

pliant sleet Oct 4, 2023, 11:35 AM

#

but the main its gonna be a lot more easy to read

nimble echo Oct 4, 2023, 11:35 AM

#

pliant sleet but the main its gonna be a lot more easy to read

yeah I understand now

#

I can just create a map which is kinda like a list and just search through it instantly

pliant sleet Oct 4, 2023, 11:36 AM

#

it's like an array using with keys instead of indexes

#

like it goes right to the spot

#

it doesn't search

nimble echo Oct 4, 2023, 11:37 AM

#

ok

pliant sleet Oct 4, 2023, 11:37 AM

#

just like chords[i] doesn't go from 0 to i-1 when looking for chords[i]

#

it just goes to the right spot

nimble echo Oct 4, 2023, 11:38 AM

#

yeah I understand that

#

but i dont understand what this means: transposedChord = transposedChord.replace(/[A-G][#b]?/g, match => { if (noteMap.hasOwnProperty(match)) { return noteMap[match];

pliant sleet Oct 4, 2023, 11:38 AM

#

does this currently work?

nimble echo Oct 4, 2023, 11:38 AM

#

pliant sleet does this currently work?

thats the thing

#

i have no idea

#

my button is just broken or somethign

pliant sleet Oct 4, 2023, 11:39 AM

#

let me see

nimble echo Oct 4, 2023, 11:39 AM

#

I thought it was my code at first

nimble echo Oct 4, 2023, 11:39 AM

#

pliant sleet let me see

what do you wanna see?

pliant sleet Oct 4, 2023, 11:39 AM

#

I mean I'm gonna check it

nimble echo Oct 4, 2023, 11:39 AM

#

wait

#

I fixed it

#

but

#

i got another problem now lol

pliant sleet Oct 4, 2023, 11:40 AM

#

whats the new problem?

nimble echo Oct 4, 2023, 11:41 AM

#

after transposing once it does this

#

#

it doesnt line up

#

and there is another thing

#

you should be able to keep clicking the transpose up button and it transposes over and over

#

but it only works once

#

  //add the lines of text to html <p> elements
  let textDiv = document.getElementById("text-area")
  textDiv.innerHTML = '' //clear the html

  const noteMap = {
    'A': 'A#',
    'A#': 'Bb',
    'Bb': 'A',
    'B': 'C',
    'C': 'C#',
    'C#': 'Db',
    'Db': 'C',
    'D': 'D#',
    'D#': 'Eb',
    'Eb': 'D',
    'E': 'F',
    'F': 'F#',
    'F#': 'Gb',
    'Gb': 'F',
    'G': 'G#',
    'G#': 'Ab',
    'Ab': 'G'
  };

  for (let i = 0; i < chordProLinesArray.length; i++) {
    const line = chordProLinesArray[i];
    let lyrics = "";
    let chords = "";

    for (let k = 0; k < line.length; k++) {
      if (line[k] === "[") {
        let inner = "";
        for (let j = k + 1; j < line.length; j++) {
          if (line[j] === "]") {
            break;
          }
          inner += line[j];
          k = j + 1;
        }
        let transposedChord = inner;
          transposedChord = transposedChord.replace(/[A-G][#b]?/g, match => {
            if (noteMap.hasOwnProperty(match)) {
              return noteMap[match];
            }
            return match; // Return unchanged if not found in noteMap
          });
        chords += transposedChord + " ";
      } else {
        lyrics += line[k];
      }
    }

    textDiv.innerHTML += `<pre class="chord">${chords}</pre>` + `<p>${lyrics}</p>`;
  }
} ```

#

this is my code now

pliant sleet Oct 4, 2023, 11:42 AM

#

ok so this was part of what I was asking befor

#

e

#

isn't proChordLinesArray the original that you loaded from the file?

#

so if you keep running it on the original

#

your gonna keep transposing the original not whats on the screen already

nimble echo Oct 4, 2023, 11:43 AM

#

how would I replace it?

#

I wanted to replace it with a new array like set it = to a new one

#

but I also want to keep the old values

#

becasue after transposing 12 times in a row it should reset back to where it started

#

But yeah I see the issue now it looks like it just keeps transposing the old values

pliant sleet Oct 4, 2023, 11:45 AM

#

maybe just have the transpose code update what you have

#

not rewrite everything

nimble echo Oct 4, 2023, 11:45 AM

#

pliant sleet maybe just have the transpose code update what you have

how would i go about doing that?

#

i realize id have to overwrite the previous value with the new ones

#

but I also want to store the first chords

#

im guessing they stay inside the chordProLinesArray so I can just leave that for now

pliant sleet Oct 4, 2023, 11:47 AM

#

well if you have the original

#

and you want to keep transposing

#

then you can have a transpose method that takes in a number and keeps transposing it based on a number parameter

nimble echo Oct 4, 2023, 11:49 AM

#

so i would set that number parameter = 11

#

or 12

pliant sleet Oct 4, 2023, 11:49 AM

#

no I mean for the first transpose it would probably be 0

#

or you can just have 0 mean that you don't transpose at all

#

and have the original

#

and have 1 be the first transpose

nimble echo Oct 4, 2023, 11:50 AM

#

pliant sleet then you can have a transpose method that takes in a number and keeps transposin...

not sure i really understand the whole transpose method thing

#

but i understand what you mean by number parameter

pliant sleet Oct 4, 2023, 11:51 AM

#

then have a for loop like for(i=0; i<number;i++) transpose the text that is already there

#

a transpose method takes what you already have and transposes it once

nimble echo Oct 4, 2023, 11:52 AM

#

hmm

#

yeah Im still confused on how to implement that

#

like i understand you are looping through each time till you get 12 transposes but I am not sure what you would write in the for loop to update the chords each time

pliant sleet Oct 4, 2023, 11:56 AM

#

that is the main problem atm

#

but did u understand the code you were asking about

#

that I was asking if it worked?

#

transposedChord = transposedChord.replace(/[A-G][#b]?/g, match => {
            if (noteMap.hasOwnProperty(match)) {
              return noteMap[match];
            }
            return match; // Return unchanged if not found in noteMap
          });```

#

this part

nimble echo Oct 4, 2023, 11:57 AM

#

i think so Ill try and explain it and you let me know if what im saying is wrong

#

Its basically replacing the transposedChord and checking if it matches with the map(/[A-G][#b]?/g, match =>) then if it does it returns it to match if it does not match anything in the map it does not return anything and it stays the same

#

if the chord values do not match leave it alone if matched with something replace using the map

pliant sleet Oct 4, 2023, 11:59 AM

#

yeah mostly

#

match is the return from the regular expression

#

stored as a string

nimble echo Oct 4, 2023, 12:00 PM

#

Return from the regular expression?

pliant sleet Oct 4, 2023, 12:00 PM

#

yeah

nimble echo Oct 4, 2023, 12:00 PM

#

Oh like the main song

#

It’s just the original chords?

pliant sleet Oct 4, 2023, 12:02 PM

#

the place that you have it in the code it makes it whatever you found inside the [ ]

#

it looks for a character from A-G followed by either # or B or nothing

#

[A-G] means match anything in that range

nimble echo Oct 4, 2023, 12:04 PM

#

yeah i understand that

pliant sleet Oct 4, 2023, 12:04 PM

#

[] means any of the options inside of here

nimble echo Oct 4, 2023, 12:04 PM

#

what does ?/g, match => mean?

pliant sleet Oct 4, 2023, 12:04 PM

#

and the ? just means 0 or 1 of the previous things

nimble echo Oct 4, 2023, 12:04 PM

#

0 or 1?

#

oh

#

like if it has 0 or 1 of the things in the map

pliant sleet Oct 4, 2023, 12:05 PM

#

yeah like it's optionally at the end

#

nah it's the characters

#

[#b]

#

so first character must be ABCDEFG

#

and it must be followed by either # or b or nothing

nimble echo Oct 4, 2023, 12:06 PM

#

how does it know abcdefg?

pliant sleet Oct 4, 2023, 12:06 PM

#

[A-G]

#

it's a range

nimble echo Oct 4, 2023, 12:06 PM

#

thats cool didnt know javascript did that

pliant sleet Oct 4, 2023, 12:06 PM

#

[A-Z] would be all uppercase letters

#

it's regular expression though

#

it's in javascript but it's like it's own thing

nimble echo Oct 4, 2023, 12:07 PM

#

#b does it not check for them together how does it know to check for each individually?

pliant sleet Oct 4, 2023, 12:07 PM

#

like it's regular expressions being used in javascript

nimble echo Oct 4, 2023, 12:07 PM

#

pliant sleet like it's regular expressions being used in javascript

oh okay

pliant sleet Oct 4, 2023, 12:08 PM

#

cause [#b] means look for a character matching one of these options

#

so [A-G] could also be written as [ABCDEFG] also

nimble echo Oct 4, 2023, 12:08 PM

#

so if i did [AD] it would check for both A and D individually just not together right?

pliant sleet Oct 4, 2023, 12:09 PM

#

Yeah

#

for together you would just do AD

#

https://regexr.com/

RegExr

RegExr: Learn, Build, & Test RegEx

RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp).

nimble echo Oct 4, 2023, 12:09 PM

#

well this would have been helpful to know if my teacher actually taught us javascript or the syntax for it 😭

pliant sleet Oct 4, 2023, 12:09 PM

#

you can use this site

#

to get a hang of it

nimble echo Oct 4, 2023, 12:09 PM

#

thanks

pliant sleet Oct 4, 2023, 12:09 PM

#

np

#

ok so the ? means match 0 or 1 of the previous character

#

/g means global and it's not really necessary

#

but it's when you are looking for multiple things that match

#

if you remove it it will just look for the first one that matches

#

sorry it is necessary

#

cause you have mutliple matches per line

nimble echo Oct 4, 2023, 12:11 PM

#

oh alright

#

thanks for explaining that though i do understand that much now

pliant sleet Oct 4, 2023, 12:12 PM

#

so the is just the string that that match returns

#

like if the regular expression matches something the output would be the match variable

#

and it's being used as the input of a function

#

you have seen arrow functions before?

nimble echo Oct 4, 2023, 12:13 PM

#

nope

pliant sleet Oct 4, 2023, 12:14 PM

#

function functionName(match) { is about the same as match => {

#

there is some technical differences but it's roughly the same in the way it's being used

#

you can change it to the first version and it should still work

#

but it's more writing

nimble echo Oct 4, 2023, 12:15 PM

#

so return match is just the input of the function now?

pliant sleet Oct 4, 2023, 12:15 PM

#

yeah a function that determines what to use to replace the matches with

nimble echo Oct 4, 2023, 12:16 PM

#

then each time match is stored within TransposedChord?

pliant sleet Oct 4, 2023, 12:17 PM

#

result of the function is stored in transposedChord

nimble echo Oct 4, 2023, 12:17 PM

#

so what it was changed to would be stored in the transposedChord

#

okay I understand that now

#

but how would i go about being able to keep clicking the transpose up button and it transposes over and over

#

Cause I’m still not sure about that

pliant sleet Oct 4, 2023, 12:20 PM

#

so there was 2 main options

nimble echo Oct 4, 2023, 12:20 PM

#

I understand I would loop this part

#

transposedChord = transposedChord.replace(/[A-G][#b]?/g, match => {
            if (noteMap.hasOwnProperty(match)) {
              return noteMap[match];
            }
            return match; // Return unchanged if not found in noteMap
          });```

pliant sleet Oct 4, 2023, 12:20 PM

#

you can store the original and keep transposing it

#

or you can take what you have already

#

and just edit it

nimble echo Oct 4, 2023, 12:21 PM

#

Whatever is simplest tbh I don’t have the brain power for this right now lol

#

Which would be easier?

pliant sleet Oct 4, 2023, 12:22 PM

#

maybe just editing what you have

#

the chords will be inside <pre class="chord">${chords}</pre>

#

in there

nimble echo Oct 4, 2023, 12:23 PM

#

?

pliant sleet Oct 4, 2023, 12:23 PM

#

so you can search the textDiv.innerHTML for the opening tags <pre class="chord">then replace the insides

nimble echo Oct 4, 2023, 12:24 PM

#

huh

#

what about stroing the original and keep transposing it?

pliant sleet Oct 4, 2023, 12:25 PM

#

you have to modify the code and store it maybe a global variable or make a datastructure to hold it

#

it would be an array of strings 1 for each line of chords

nimble echo Oct 4, 2023, 12:26 PM

#

pliant sleet so you can search the textDiv.innerHTML for the opening tags <pre class="chord">...

how would i do this one?

#

where whould i search for it and how owuld i search for it?

pliant sleet Oct 4, 2023, 12:27 PM

#

you can just use regex again

#

you know how to see the html in a browser?

nimble echo Oct 4, 2023, 12:27 PM

#

uhh like through the console?

pliant sleet Oct 4, 2023, 12:28 PM

#

not quite the console but in chrome it's like in the same general area

nimble echo Oct 4, 2023, 12:28 PM

#

inspect into the console?

pliant sleet Oct 4, 2023, 12:28 PM

#

yeah

nimble echo Oct 4, 2023, 12:28 PM

#

pliant sleet not quite the console but in chrome it's like in the same general area

oh ok

pliant sleet Oct 4, 2023, 12:28 PM

#

but look at the html output

#

and specifically where the <pre class="chords"> are

nimble echo Oct 4, 2023, 12:29 PM

#

i dont see it

#

pliant sleet Oct 4, 2023, 12:30 PM

#

it's in elements

nimble echo Oct 4, 2023, 12:30 PM

#

pliant sleet Oct 4, 2023, 12:30 PM

#

yeah can you copy the div's contents?

nimble echo Oct 4, 2023, 12:31 PM

#

copy them how?

pliant sleet Oct 4, 2023, 12:31 PM

#

from div id =text-area to </div>

#

like select it then copy with the mouse or ctrl c

#

you can right click copy

nimble echo Oct 4, 2023, 12:31 PM

#

it doesnt let me highlight it

#

<div id="text-area"><pre class="chord"></pre><p>Never My Love -The Association</p><pre class="chord"></pre><p> </p><pre class="chord">C# G#/C A </pre><p>You ask me if there'll come a time,</p><pre class="chord">F#/A# C#/G# </pre><p> When I grow tired of you.</p><pre class="chord">A#m C# F# C# </pre><p>Never my love, never my love.</p><pre class="chord">C# G#/C A </pre><p>You wonder if this heart of mine,</p><pre class="chord">F#/A# C#/G# </pre><p>Will lose its desire for you.</p><pre class="chord">A#m C# F# C# </pre><p>Never my love, never my love.</p><pre class="chord"></pre><p></p><pre class="chord"></pre><p></p></div>

pliant sleet Oct 4, 2023, 12:32 PM

#

you got it

nimble echo Oct 4, 2023, 12:32 PM

#

ok

#

Now what?

pliant sleet Oct 4, 2023, 12:35 PM

#

1 min

nimble echo Oct 4, 2023, 12:35 PM

#

kk

pliant sleet Oct 4, 2023, 12:42 PM

#

why does it say G#/C?

nimble echo Oct 4, 2023, 12:42 PM

#

#

there are many different songs

pliant sleet Oct 4, 2023, 12:43 PM

#

where are the / coming from though?

nimble echo Oct 4, 2023, 12:43 PM

#

it should work the same for any of them

#

this one has / in it

#

#

it originally looks like this

pliant sleet Oct 4, 2023, 12:43 PM

#

ohhh

nimble echo Oct 4, 2023, 12:43 PM

#

yeah

#

the spacing on all of them is also messed up

#

at least after you transponse lol

#

i just wanna finish the tranposing up and down and the spacing then i can finally sleep lol

#

but it should be pretty simple to do tranposing down after doing tranposing up

#

id just reverse the map and make it go from G-A

nimble echo Oct 4, 2023, 12:46 PM

#

pliant sleet ohhh

im still pretty confused

pliant sleet Oct 4, 2023, 12:47 PM

#

oh maybe just make another map it might be easier

#

and do the reverse

#

but you can search throught the map you already have to find the right key from the value

#

what are you confused about ?

nimble echo Oct 4, 2023, 12:48 PM

#

im confused on how to make it work multiple times the transposing

pliant sleet Oct 4, 2023, 12:49 PM

#

you need the original stored if you want to just run a loop on the original

nimble echo Oct 4, 2023, 12:49 PM

#

i wanna be able to transpose the value over and over until it hits 12 times then it goes back to what it was orginally

#

it should keep transposing each time

pliant sleet Oct 4, 2023, 12:51 PM

#

so you need to store the chord lines

#

when you first get them

#

from the file

nimble echo Oct 4, 2023, 12:52 PM

#

is it not orignally stored in chordProLinesArray?

pliant sleet Oct 4, 2023, 12:54 PM

#

nimble echo code for online one:``` function parseChordProFormat(chordProLinesArray) { //...

if its the same as this it looks like it contains chords in it in this format [A] or [G#] as well as the lyrics

#

so it's just the input from the file before it gets converted

#

it looks like it's the file input not really an array of just the chords

#

if you were to run the regex on the entire file input it will match like A shining star if it's a lyric

#

and change it to A# shining star

#

thats what it looks like to me but you are the one making it so tell me if that is incorrect

nimble echo Oct 4, 2023, 12:57 PM

#

pliant sleet it looks like it's the file input not really an array of just the chords

yeah

pliant sleet Oct 4, 2023, 1:00 PM

#

<div id="text-area"><pre class="chord"></pre><p>Never My Love -The Association</p><pre class="chord"></pre><p> </p><pre class="chord">C# G#/C A </pre><p>You ask me if there'll come a time,</p><pre class="chord">F#/A# C#/G# </pre><p> When I grow tired of you.</p><pre class="chord">A#m C# F# C# </pre><p>Never my love, never my love.</p><pre class="chord">C# G#/C A </pre><p>You wonder if this heart of mine,</p><pre class="chord">F#/A# C#/G# </pre><p>Will lose its desire for you.</p><pre class="chord">A#m C# F# C# </pre><p>Never my love, never my love.</p><pre class="chord"></pre><p></p><pre class="chord"></pre><p></p></div>

#

try copying that

#

https://regexr.com/

RegExr

RegExr: Learn, Build, & Test RegEx

RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp).

#

going to this site

#

put it into the text

#

#

and try that regex in the expression

nimble echo Oct 4, 2023, 1:01 PM

#

ok 1 min

pliant sleet Oct 4, 2023, 1:01 PM

#

and make the flag global

nimble echo Oct 4, 2023, 1:05 PM

#

it says no match

pliant sleet Oct 4, 2023, 1:05 PM

#

does it look like that?

#

#

my screen looks like this

nimble echo Oct 4, 2023, 1:06 PM

#

pliant sleet Oct 4, 2023, 1:06 PM

#

oh put the thing I said to copy in the text

#

where it says regexer was created by ....

#

and put the other part in the top

nimble echo Oct 4, 2023, 1:07 PM

#

ok

#

pliant sleet Oct 4, 2023, 1:08 PM

#

so thats basically the inner html

#

and that regex will get match wit hthose parts which is the chords

#

from there we just need to replace the parts inside that

nimble echo Oct 4, 2023, 1:09 PM

#

ok?

#

wdym replace

pliant sleet Oct 4, 2023, 1:09 PM

#

the same way you had your transpose method replacing stuff

nimble echo Oct 4, 2023, 1:10 PM

#

where would this go?

#

is this for transposing over and over?

pliant sleet Oct 4, 2023, 1:11 PM

#

this would edit what you have over and over

#

cause to run the loop you need to store the original chords

nimble echo Oct 4, 2023, 1:12 PM

#

yeah

pliant sleet Oct 4, 2023, 1:12 PM

#

but proChordsLine is not the original chords it's the original unparsed ifle

nimble echo Oct 4, 2023, 1:12 PM

#

so where would this new code go?

pliant sleet Oct 4, 2023, 1:12 PM

#

filre

#

file

nimble echo Oct 4, 2023, 1:13 PM

#

?

pliant sleet Oct 4, 2023, 1:13 PM

#

my typing is horrible someone is messaging me

nimble echo Oct 4, 2023, 1:13 PM

#

oh lol

pliant sleet Oct 4, 2023, 1:13 PM

#

pliant sleet but proChordsLine is not the original chords it's the original unparsed ifle

this part was suppose to be unparsed file

nimble echo Oct 4, 2023, 1:14 PM

#

this is unparsed file? <pre class="chord">[A-z#b/ ]*</pre>

pliant sleet Oct 4, 2023, 1:16 PM

#

thats what you have

#

oh sorry

#

thats just the regex

#

to find the inner parts

#

#

you have the innerhtml already stored

#

from your first method

#

so for me I'm just simulating the innerhtml cause I don't have an actual dom

#

but it's stored roughly like that

#

chordtext would be the transposed version

#

and you just take the innerhtml and replaceAll by looking for the matching tags

#

pretags is the result of the match of the <pre class="chord"> some chords in here</pre>

#

then you would return what you already have as your transpose function

#

so it would transpose what is inside the <pre> tags only

nimble echo Oct 4, 2023, 1:20 PM

#

what would i replace innerhtml with like in my code?

pliant sleet Oct 4, 2023, 1:20 PM

#

it's called innerhtml something

#

its in a div or something

nimble echo Oct 4, 2023, 1:21 PM

#

textDiv.innerHTML

pliant sleet Oct 4, 2023, 1:21 PM

#

yeah

#

that is the html inside of the text div in the html

nimble echo Oct 4, 2023, 1:21 PM

#

i have it declared at the end

#

what about preTags?

pliant sleet Oct 4, 2023, 1:22 PM

#

pretags is the regex to find just things that match between a starting and ending pre tag which has class=chord

#

it returns what you saw on regexr

nimble echo Oct 4, 2023, 1:23 PM

#

yeah but where do i declare pretags?

pliant sleet Oct 4, 2023, 1:23 PM

#

it's an arrow function it doesn't need to be declared

nimble echo Oct 4, 2023, 1:23 PM

#

oh ok

pliant sleet Oct 4, 2023, 1:23 PM

#

it works just like match => worked

#

#

so pretags is what is highlighted in blue for every iteration

#

one at a time

#

replaceAll is like a loop that runs replace multipletimes starting where the previous replace ended so that it doesn't keep replacing the same text

nimble echo Oct 4, 2023, 1:27 PM

#

#

its not working

pliant sleet Oct 4, 2023, 1:28 PM

#

ok since you are just updating what you already have in the transpose function

#

you just really need that

#

you don't really need all the other code that you copied before

nimble echo Oct 4, 2023, 1:29 PM

#

pliant sleet Oct 4, 2023, 1:29 PM

#

inside the transposeChord function

nimble echo Oct 4, 2023, 1:29 PM

#

pliant sleet inside the transposeChord function

?

pliant sleet Oct 4, 2023, 1:29 PM

#

all you really need is textDiv.innerhtml =

#

the transposedchord is just what I titled it in my editor

#

the entire function is transposeChord(){}

nimble echo Oct 4, 2023, 1:31 PM

#

pliant sleet Oct 4, 2023, 1:31 PM

#

and put the thing I just said in between the brackets

nimble echo Oct 4, 2023, 1:31 PM

#

pliant sleet and put the thing I just said in between the brackets

is this not it?

pliant sleet Oct 4, 2023, 1:31 PM

#

you still have unrelated things

nimble echo Oct 4, 2023, 1:32 PM

#

  //add the lines of text to html <p> elements
  let textDiv = document.getElementById("text-area")
  textDiv.innerHTML = '' //clear the html

  const noteMap = {
    'A': 'A#',
    'A#': 'Bb',
    'Bb': 'A',
    'B': 'C',
    'C': 'C#',
    'C#': 'Db',
    'Db': 'C',
    'D': 'D#',
    'D#': 'Eb',
    'Eb': 'D',
    'E': 'F',
    'F': 'F#',
    'F#': 'Gb',
    'Gb': 'F',
    'G': 'G#',
    'G#': 'Ab',
    'Ab': 'G'
  };

  for (let i = 0; i < chordProLinesArray.length; i++) {
    const line = chordProLinesArray[i];
    let lyrics = "";
    let chords = "";

    for (let k = 0; k < line.length; k++) {
      if (line[k] === "[") {
        let inner = "";
        for (let j = k + 1; j < line.length; j++) {
          if (line[j] === "]") {
            break;
          }
          inner += line[j];
          k = j + 1;
        }
        let transposedChord = inner;
          transposedChord = textDiv.innerHTML.replaceAll(/(pre class="chord">)([A-z#b\/ ]*)(<\/pre>)/g, preTags => {
          return preTags.replace(/[A-G][#b]?/g, match => {
            if (match in noteMap) {
              return noteMap[match];
            }
            return match; // Return unchanged if not found in noteMap
          });

    textDiv.innerHTML += `<pre class="chord">${chords}</pre>` + `<p>${lyrics}</p>`;
  }
} ```

#

this is my code so far

pliant sleet Oct 4, 2023, 1:33 PM

#

 function transposeUp(){
  let textDiv = document.getElementById("text-area")
  const noteMap = {
    'A': 'A#',
    'A#': 'Bb',
    'Bb': 'A',
    'B': 'C',
    'C': 'C#',
    'C#': 'Db',
    'Db': 'C',
    'D': 'D#',
    'D#': 'Eb',
    'Eb': 'D',
    'E': 'F',
    'F': 'F#',
    'F#': 'Gb',
    'Gb': 'F',
    'G': 'G#',
    'G#': 'Ab',
    'Ab': 'G'
  };
textDiv.innerHTML=textDiv.innerHTML.replaceAll(/(pre class="chord">)([A-z#b\/ ]*)(<\/pre>)/g, preTags => {
          return preTags.replace(/[A-G][#b]?/g, match => {
            if (match in noteMap) {
              return noteMap[match];
            }
            return match; // Return unchanged if not found in noteMap
          });



} ```

#

I didn't check the { and )

#

but it should look something like that

#

the brackets and parentheses

nimble echo Oct 4, 2023, 1:35 PM

#

ok

#

doesnt work at all now

pliant sleet Oct 4, 2023, 1:36 PM

#

were all the brackets and parentheses correct?

nimble echo Oct 4, 2023, 1:37 PM

#

yes

#

  //add the lines of text to html <p> elements
  let textDiv = document.getElementById("text-area")
  textDiv.innerHTML = '' //clear the html

  const noteMap = {
    'A': 'A#',
    'A#': 'Bb',
    'Bb': 'A',
    'B': 'C',
    'C': 'C#',
    'C#': 'Db',
    'Db': 'C',
    'D': 'D#',
    'D#': 'Eb',
    'Eb': 'D',
    'E': 'F',
    'F': 'F#',
    'F#': 'Gb',
    'Gb': 'F',
    'G': 'G#',
    'G#': 'Ab',
    'Ab': 'G'
  };
  textDiv.innerHTML=textDiv.innerHTML.replaceAll(/(pre class="chord">)([A-z#b\/ ]*)(<\/pre>)/g, preTags => {
            return preTags.replace(/[A-G][#b]?/g, match => {
              if (match in noteMap) {
                return noteMap[match];
              }
              return match; // Return unchanged if not found in noteMap
            });
  
  
  
  })} ```

pliant sleet Oct 4, 2023, 1:38 PM

#

you cleared the html

#

on like the second line or so

#

you need to remove that

#

4th line

nimble echo Oct 4, 2023, 1:38 PM

#

kk

pliant sleet Oct 4, 2023, 1:39 PM

#

also if (match in noteMap) I wrote it that way but you were using hasownproperty

#

you can put it back

nimble echo Oct 4, 2023, 1:39 PM

#

ok

pliant sleet Oct 4, 2023, 1:39 PM

#

your if statement was fine how it was

nimble echo Oct 4, 2023, 1:39 PM

#

cause the button doest nothing lol

pliant sleet Oct 4, 2023, 1:39 PM

#

the button doesn't work at all now?

nimble echo Oct 4, 2023, 1:40 PM

#

you can just spam it

#

and it doesnt nothing

pliant sleet Oct 4, 2023, 1:41 PM

#

let me see the code again?

nimble echo Oct 4, 2023, 1:41 PM

#

  //add the lines of text to html <p> elements
  let textDiv = document.getElementById("text-area")
  //textDiv.innerHTML = '' //clear the html

  const noteMap = {
    'A': 'A#',
    'A#': 'Bb',
    'Bb': 'A',
    'B': 'C',
    'C': 'C#',
    'C#': 'Db',
    'Db': 'C',
    'D': 'D#',
    'D#': 'Eb',
    'Eb': 'D',
    'E': 'F',
    'F': 'F#',
    'F#': 'Gb',
    'Gb': 'F',
    'G': 'G#',
    'G#': 'Ab',
    'Ab': 'G'
  };
  textDiv.innerHTML=textDiv.innerHTML.replaceAll(/(pre class="chord">)([A-z#b\/ ]*)(<\/pre>)/g, preTags => {
            return preTags.replace(/[A-G][#b]?/g, match => {
              if (noteMap.hasOwnProperty(match)) {
                return noteMap[match];
              }
              return match; // Return unchanged if not found in noteMap
            });
  
  
  
  })}

#

any idea?

pliant sleet Oct 4, 2023, 1:45 PM

#

when u had it clearing the html was it coming up blank for the chords?

#

or was it doing nothing?

nimble echo Oct 4, 2023, 1:45 PM

#

it would just bring me to the front page

#

the code i had earlier would work once

pliant sleet Oct 4, 2023, 1:47 PM

#

looks good

#

but maybe add console.log("transpose started")

#

right under the transposeup function

#

then check the console when u press the button

#

to see if the button is registering

#

#

right there

nimble echo Oct 4, 2023, 1:48 PM

#

doesnt work

pliant sleet Oct 4, 2023, 1:48 PM

#

check the eventhandler then

#

did u change something in it?

nimble echo Oct 4, 2023, 1:49 PM

#

no

#

this is what my buttonhandeler use to look like

#

#

#

it is this now

pliant sleet Oct 4, 2023, 1:50 PM

#

try putting a console.log in there

#

before transpose up

#

and see if you get something on the console when u press the button

nimble echo Oct 4, 2023, 1:50 PM

#

#

it prints nothing

pliant sleet Oct 4, 2023, 1:51 PM

#

did you change anything you can think of?

nimble echo Oct 4, 2023, 1:51 PM

#

transposeUp is taking nothing in right now

#

so that is probably why it is doing nothing

pliant sleet Oct 4, 2023, 1:51 PM

#

it was just taking in the song.songlines before

nimble echo Oct 4, 2023, 1:52 PM

#

yeah

pliant sleet Oct 4, 2023, 1:52 PM

#

you can try putting that back in if you want though

nimble echo Oct 4, 2023, 1:52 PM

#

now its taking in nothing lol

pliant sleet Oct 4, 2023, 1:52 PM

#

but I don't think it will make a difference

#

it should at least be printing to the console

nimble echo Oct 4, 2023, 1:53 PM

#

now it is

pliant sleet Oct 4, 2023, 1:53 PM

#

it is printing to the console?

nimble echo Oct 4, 2023, 1:53 PM

#

yes

pliant sleet Oct 4, 2023, 1:53 PM

#

ok thats good

#

is it changing the inner html?

nimble echo Oct 4, 2023, 1:54 PM

#

pliant sleet Oct 4, 2023, 1:55 PM

#

is it working now?

nimble echo Oct 4, 2023, 1:57 PM

#

wdym?

pliant sleet Oct 4, 2023, 1:57 PM

#

is the transpose button actually changing the text now?

nimble echo Oct 4, 2023, 1:57 PM

#

no

#

it doesnt nothing

#

all it does is print out transpose started

pliant sleet Oct 4, 2023, 1:57 PM

#

it just prints transpose started?

nimble echo Oct 4, 2023, 1:57 PM

#

pliant sleet Oct 4, 2023, 1:59 PM

#

try uncommenting that

#

and pressing the button after saving

#

see if it blanks out the html

nimble echo Oct 4, 2023, 2:00 PM

#

it just deleted the text

#

pliant sleet Oct 4, 2023, 2:00 PM

#

so thats good

nimble echo Oct 4, 2023, 2:01 PM

#

?

#

how is that good lol

pliant sleet Oct 4, 2023, 2:01 PM

#

cause its capable of modifying it

#

ok comment that bck

#

back

nimble echo Oct 4, 2023, 2:01 PM

#

ok

pliant sleet Oct 4, 2023, 2:03 PM

#

textDiv.innerHTML=textDiv.innerHTML.replaceAll(/(pre class="chord">) 
``` try changing this part to += instead of equal

#

it should add a copy of the text

nimble echo Oct 4, 2023, 2:03 PM

#

which part?

pliant sleet Oct 4, 2023, 2:03 PM

#

with the modifications

#

the = after html

#

to +=

nimble echo Oct 4, 2023, 2:04 PM

#

its just making copies now

pliant sleet Oct 4, 2023, 2:04 PM

#

can you show me?

nimble echo Oct 4, 2023, 2:05 PM

#

pliant sleet Oct 4, 2023, 2:08 PM

#

maybe the " in the class is breaking the innerhtml

nimble echo Oct 4, 2023, 2:09 PM

#

idk

pliant sleet Oct 4, 2023, 2:10 PM

#

(pre class="chord"> try changing that, to this (<pre.*?>

#

in the transpose up

#

if that doesn't work try splitting this up

#

textDiv.innerHTML=textDiv.innerHTML

#

into
let text= textDiv.innerHTML
textDiv.innerHTML=text.replace...

#

all that other stuff

nimble echo Oct 4, 2023, 2:13 PM

#

it works but one slight problem

#

#

its also modifying the title

pliant sleet Oct 4, 2023, 2:14 PM

#

put the title in a paragraph tag

#

<p>

#

cause it's search for pre tags

nimble echo Oct 4, 2023, 2:15 PM

#

where do i do that?

pliant sleet Oct 4, 2023, 2:15 PM

#

where do you write the title?

#

can u send the main code

#

like the one that parses the file and writes the initial html

#

not the transpose one

nimble echo Oct 4, 2023, 2:16 PM

#

These functions handle parsing the chord-pro text format
*/

function parseChordProFormat(chordProLinesArray) {
  //parse the song lines with embedded
  //chord pro chords and add them to DOM

  console.log('type of input: ' + typeof chordProLinesArray)

  //add the lines of text to html <p> elements
  let textDiv = document.getElementById("text-area")
  textDiv.innerHTML = '' //clear the html

  for (let i = 0; i < chordProLinesArray.length; i++) {
    let line = chordProLinesArray[i]
    lyrics = ""
    chords = ""
    let defeceit = 0;

    console.log(line)

    for (k = 0; k < line.length; k++) {
      if (line[k] == "[") {
        let inner = ""
        for (j = k + 1; j < line.length; j++) {
          if (line[j] == "]") {
            break
          }
          inner += line[j]
          k = j + 1
      }
      chords += inner + " "
      defeceit += inner.length + 1
  }
  else {
    lyrics += line[k]
    if (defeceit == 0)
    chords += "&nbsp;"
  else defeceit--
  }
}
textDiv.innerHTML = textDiv.innerHTML + `<pre class="chord">${chords}</pre>` + `<p> ${lyrics}</p>`
}
}

function transposeUp(){
  console.log("transpose started")
  //add the lines of text to html <p> elements
  let textDiv = document.getElementById("text-area")
  //textDiv.innerHTML = '' //clear the html

  const noteMap = {
    'A': 'A#',
    'A#': 'Bb',
    'Bb': 'A',
    'B': 'C',
    'C': 'C#',
    'C#': 'Db',
    'Db': 'C',
    'D': 'D#',
    'D#': 'Eb',
    'Eb': 'D',
    'E': 'F',
    'F': 'F#',
    'F#': 'Gb',
    'Gb': 'F',
    'G': 'G#',
    'G#': 'Ab',
    'Ab': 'G'
  };
  textDiv.innerHTML=textDiv.innerHTML.replaceAll(/(<pre.*?>)([A-z#b\/ ]*)(<\/pre>)/g, preTags => {
            return preTags.replace(/[A-G][#b]?/g, match => {
              if (noteMap.hasOwnProperty(match)) {
                return noteMap[match];
              }
              return match; // Return unchanged if not found in noteMap
            });
  
  
  
  })}

#

this one?

pliant sleet Oct 4, 2023, 2:17 PM

#

yeah

#

check the html in the browser

#

and look at the tags around the title

#

see if it is in pre tags or p tags

nimble echo Oct 4, 2023, 2:18 PM

#

#

like this?

pliant sleet Oct 4, 2023, 2:18 PM

#

yeah but you are in the style section

#

inspect where the actual title is

nimble echo Oct 4, 2023, 2:19 PM

#

#

i see

#

this is my full index.html ``` <!DOCTYPE html>

<html>
<head>
<title>2406</title>
<style>
/*element selectors: */
body {
background: #dddddd
}

p {
  font-size: large;
  font-weight: bold;
  font-family: "Courier", Monospace;
  color: blue;
}
/* class selectors: */
.chord {
  font-size: large;
  font-weight: bold;
  font-family: "Courier", Monospace;
  color: green;
  margin:0px 0px -20px 0px;
}

/*id selectors: */

</style>
</head>
<body>
<div id="text-area"></div>
<br>
<input type="text" id="userTextField" name="userTextField" value="" size="60" />
<input type="button" id="submit_button" value="Submit Request">
<br>
<input type="button" id="transposeup_button" value="Transpose Up">
<input type="button" id="transposedown_button" value="Transpose Down">

</body>
</html>

pliant sleet Oct 4, 2023, 2:20 PM

#

it has to be in the browser

#

cause you actual html file is like a template of what to do

#

it's like instructions not what is going to actually show up

nimble echo Oct 4, 2023, 2:21 PM

#

uhh one more thing

#

its only going through 3 different updates

pliant sleet Oct 4, 2023, 2:21 PM

#

what happens after?

nimble echo Oct 4, 2023, 2:22 PM

#

it just loops

#

like it will start on F > F# > Gb > F and so on

pliant sleet Oct 4, 2023, 2:23 PM

#

#

is it caused by this?

nimble echo Oct 4, 2023, 2:23 PM

#

yes

pliant sleet Oct 4, 2023, 2:23 PM

#

#

you have to adjust your map

#

I noticed that earlier

#

put the correct values

#

just go through from A to G and make sure that each input goes to a new output and only loops when you end at G or whatever then loops to A if thats whats supposed to happen

#

#

can you copy from the div to verse 1

#

and paste it in here

#

it doesn't look like golden hair should be included in the regex

#

maybe there is a missing closing tag for pre or something

nimble echo Oct 4, 2023, 2:31 PM

#

<div id="text-area"><pre class="chord"> </pre><p> Sister Abolden Hair -Bbmerica</p><pre class="chord"> </pre><p> verse1:</p><pre class="chord"> Ab G#min </pre><p> Well I tried to make it sunday but I got so damned depressed</p><pre class="chord"> Bb Ab G#min </pre><p> That I set my sights on monday and I got myself undressed</p><pre class="chord"> Abmin G#min Bb </pre><p> I ain't ready for the alter, but I do agree there's times</p><pre class="chord"> Abmin Bb Ab Absus2 Ab </pre><p> When a woman sure can be a friend of mine </p><pre class="chord"></pre><p> </p></div>

#

is this right?

pliant sleet Oct 4, 2023, 2:31 PM

#

lol I dunno

#

check the file you have

#

that tells you

#

looks wrong though

#

cause there are 2 Fs

#

and 2 A's

#

each input should be unique

#

and each output should be unique

nimble echo Oct 4, 2023, 2:33 PM

#

ugh idk anymore

pliant sleet Oct 4, 2023, 2:33 PM

#

I dunno much about music

nimble echo Oct 4, 2023, 2:33 PM

#

im too tired to think properly

pliant sleet Oct 4, 2023, 2:33 PM

#

but i think it's supposed to go up in notes or whatever

#

like A->A#->B->B#->C->C# and so on

#

and I guess G# if it exists leads back to A

#

but just follow that thing you showed me at the start

nimble echo Oct 4, 2023, 2:36 PM

#

i fixed it for the most part

#

#

If you end up going off the table you would wrap around to the start -i.e. do a mod 12 operation on the index sum.

#

idk how to do that

#

do i just set Ab = A at the end of the list?

pliant sleet Oct 4, 2023, 2:37 PM

#

if Ab is the final thing yeah

#

#

I believe you're looking to map it like that

nimble echo Oct 4, 2023, 2:39 PM

#

it ends up like this if you click it too much

#

#

#

Bb isnt equal to anything

pliant sleet Oct 4, 2023, 2:40 PM

#

cause Bb has no map

#

doesn't bb map to b?

#

you have 2 A's

#

like 2 normal A's

#

and an A#

nimble echo Oct 4, 2023, 2:41 PM

#

what would i change what to?

pliant sleet Oct 4, 2023, 2:42 PM

#

you need an input on the left of the map

#

and an output on the right

#

like A:A# is good

#

then A#:Bb I think

#

then Bb:B

#

then B:C or B:B#

#

I forgot the order

#

it should be on that thing you linked

#

can u paste the link?

#

with the info

#

that you had earlier?

nimble echo Oct 4, 2023, 2:44 PM

#

#

its just an image like this

pliant sleet Oct 4, 2023, 2:46 PM

#

#

I believe it goes like that

#

but maybe some notes cannot be transposed I'm not sure

#

maybe ask your professor if it is not the way I made the arrows

nimble echo Oct 4, 2023, 2:49 PM

#

oh sweet it works thanks

pliant sleet Oct 4, 2023, 2:50 PM

#

you got it working now?

#

do you understand what was wrong now?

#

like what the problem was versus what you were expecting?

nimble echo Oct 4, 2023, 2:51 PM

#

yeah

#

i still just dont understand one thing

#

if the note is transposed up 12 times how would i reset back to its original postion?

pliant sleet Oct 4, 2023, 2:52 PM

#

well that I dunno

#

is that whats supposed to happen

#

I dunno anything about transposing or like instruments and notes

#

it just sounded like what you expected to happen

nimble echo Oct 4, 2023, 2:53 PM

#

pliant sleet it just sounded like what you expected to happen

oh no

#

thats not what I mean

#

like you know the original cords right

pliant sleet Oct 4, 2023, 2:54 PM

#

ok

nimble echo Oct 4, 2023, 2:54 PM

#

pliant sleet Oct 4, 2023, 2:54 PM

#

yeah

nimble echo Oct 4, 2023, 2:55 PM

#

after up button is pressed 12 times it should auto reset to this

#

also the title keeps changing lol

pliant sleet Oct 4, 2023, 2:55 PM

#

where does 12 come from?

#

the title is from the regex

#

it's selecting everythign

#

cause the class one was not working with the innerhtml

nimble echo Oct 4, 2023, 2:55 PM

#

pliant sleet where does 12 come from?

its just something random our teacher gave us

#

(If a note, or chord, is transposed up or down 12 semitones it is considered to be back at the original key.)

nimble echo Oct 4, 2023, 2:57 PM

#

pliant sleet the title is from the regex

how to fix that?

pliant sleet Oct 4, 2023, 2:57 PM

#

what happens when you transpose it 12 times now?

#

how many items are in the map?

nimble echo Oct 4, 2023, 2:58 PM

#

17

#

pliant sleet Oct 4, 2023, 2:58 PM

#

oh

nimble echo Oct 4, 2023, 2:59 PM

#

#

this happens after 12 times

pliant sleet Oct 4, 2023, 2:59 PM

#

#

the mapping might be like this

#

then there are 12 versions

#

so if you map the top row

#

then you need to map Bb Db Eb Gb and Ab from the bottom row

#

I don't quite understand it though

#

cause if you have it starting with A

#

how do you choose A# or Bb

nimble echo Oct 4, 2023, 3:01 PM

#

#

this is all we are given

pliant sleet Oct 4, 2023, 3:03 PM

#

looks like the are equivalent

#

maybe you can use either naming convention

#

I really dunno

nimble echo Oct 4, 2023, 3:04 PM

#

oh damn

#

quick question

#

if i wanted to transpose down I would just flip the map right?

#

              return preTags.replace(/[G-A][#b]?/g, match => {
                if (noteMap.hasOwnProperty(match)) {
                  return noteMap[match];
                }
                return match; // Return unchanged if not found in noteMap
              });
    
    
    
    })} ```

#

cause I changed [A-G] -> [G-A]

#

and that is fine right?

pliant sleet Oct 4, 2023, 3:07 PM

#

sec i need to use the bathroom

nimble echo Oct 4, 2023, 3:08 PM

#

kk

#

    //add the lines of text to html <p> elements
    let textDiv = document.getElementById("text-area")
    //textDiv.innerHTML = '' //clear the html
  
    const noteMaps = {
      'Ab': 'A',
      'G#': 'Ab',
      'G': 'G#',
      'Gb': 'G',
      'F#': 'Gb',
      'F': 'F#',
      'E': 'F',
      'Eb': 'E',
      'D#': 'Eb',
      'D': 'D#',
      'Db': 'D',
      'C#': 'Db',
      'C': 'C#',
      'B': 'C',
      'Bb': 'B',
      'A#': 'Bb',
      'A': 'A#',
    };
    textDiv.innerHTML=textDiv.innerHTML.replaceAll(/(<pre.*?>)([A-z#b\/ ]*)(<\/pre>)/g, preTagss => {
              return preTagss.replace(/[G-A][#b]?/g, match => {
                if (noteMaps.hasOwnProperty(match)) {
                  return noteMaps[match];
                }
                return match; // Return unchanged if not found in noteMap
              });
    
    
    
    })} ```

#

that is my code and it doesnt work at all lol

pliant sleet Oct 4, 2023, 3:11 PM

#

remove the duplicates

#

so if you map the top row
then you need to map Bb Db Eb Gb and Ab from the bottom row

#

you need 12 +5 = 17 maps

#

directly for the top row and then add the ones listed from the bottom row

nimble echo Oct 4, 2023, 3:13 PM

#

what duplicates?

#

i have 17?

pliant sleet Oct 4, 2023, 3:14 PM

#

<pre class.?></pre>/g

#

try that regex

#

omh

#

omg

#

discord

#

this regex

nimble echo Oct 4, 2023, 3:15 PM

#

instead of which one?

pliant sleet Oct 4, 2023, 3:15 PM

#

hopefully that will fix the song title issue

nimble echo Oct 4, 2023, 3:17 PM

#

pliant sleet Oct 4, 2023, 3:17 PM

#

yeah

nimble echo Oct 4, 2023, 3:17 PM

#

doesnt work at all lol

pliant sleet Oct 4, 2023, 3:18 PM

#

can I see the updated one?

nimble echo Oct 4, 2023, 3:18 PM

#

which one?

#

transpose up or down?

pliant sleet Oct 4, 2023, 3:19 PM

#

nimble echo

this

#

oh thats it

#

prob cause you have 2 /g

nimble echo Oct 4, 2023, 3:20 PM

#

    //add the lines of text to html <p> elements
    let textDiv = document.getElementById("text-area")
    //textDiv.innerHTML = '' //clear the html
  
    const noteMaps = {
      'Ab': 'A',
      'G#': 'Ab',
      'G': 'G#',
      'Gb': 'G',
      'F#': 'Gb',
      'F': 'F#',
      'E': 'F',
      'Eb': 'E',
      'D#': 'Eb',
      'D': 'D#',
      'Db': 'D',
      'C#': 'Db',
      'C': 'C#',
      'B': 'C',
      'Bb': 'B',
      'A#': 'Bb',
      'A': 'A#',
    };
    textDiv.innerHTML=textDiv.innerHTML.replaceAll(/(<pre class.*?>*<\/pre>)/g, preTagss => {
              return preTagss.replace(/[G-A][#b]?/g, match => {
                if (noteMaps.hasOwnProperty(match)) {
                  return noteMaps[match];
                }
                return match; // Return unchanged if not found in noteMap
              });
    
    
    
    })} ```

#

i removed it

pliant sleet Oct 4, 2023, 3:21 PM

#

pliant sleet

try removing the parantheses

#

but it should be ok with them

nimble echo Oct 4, 2023, 3:21 PM

#

wait where

pliant sleet Oct 4, 2023, 3:22 PM

#

it's ok it should work like that

#

is it working?

nimble echo Oct 4, 2023, 3:23 PM

#

i didnt change anything lol

#

still broken

#

its cause of the transposeDown one

#

also

#

you were right

#

it is supposed to be like this

pliant sleet Oct 4, 2023, 3:24 PM

#

nice

nimble echo Oct 4, 2023, 3:25 PM

#

pliant sleet nice

how would i map this?

pliant sleet Oct 4, 2023, 3:26 PM

#

with the 17 map entries

#

the A# and Bb are equivalent

nimble echo Oct 4, 2023, 3:26 PM

#

#

like this?

pliant sleet Oct 4, 2023, 3:26 PM

#

no

#

cause A#->B and Bb->B

nimble echo Oct 4, 2023, 3:27 PM

#

but also A# -> B

pliant sleet Oct 4, 2023, 3:27 PM

#

yeah

#

the right hand of the map won't be unique

#

but the left hand side should be

nimble echo Oct 4, 2023, 3:28 PM

#

oh okay

#

how do i make it so i can transpose down with this function? ``` function transposeDown(){
//add the lines of text to html <p> elements
let textDiv = document.getElementById("text-area")
//textDiv.innerHTML = '' //clear the html

const noteMaps = {
  'Ab': 'A',
  'G#': 'Ab',
  'G': 'G#',
  'Gb': 'G',
  'F#': 'Gb',
  'F': 'F#',
  'E': 'F',
  'Eb': 'E',
  'D#': 'Eb',
  'D': 'D#',
  'Db': 'D',
  'C#': 'Db',
  'C': 'C#',
  'B': 'C',
  'Bb': 'B',
  'A#': 'Bb',
  'A': 'A#',
};
textDiv.innerHTML=textDiv.innerHTML.replaceAll(/(<pre class.*?>*<\/pre>)/g, preTagss => {
          return preTagss.replace(/[G-A][#b]?/g, match => {
            if (noteMaps.hasOwnProperty(match)) {
              return noteMaps[match];
            }
            return match; // Return unchanged if not found in noteMap
          });



})}```

pliant sleet Oct 4, 2023, 3:29 PM

#

C#-> D not db

nimble echo Oct 4, 2023, 3:30 PM

#

pliant sleet Oct 4, 2023, 3:30 PM

#

#

this is the map

nimble echo Oct 4, 2023, 3:33 PM

#

#

so like this?

pliant sleet Oct 4, 2023, 3:35 PM

#

G# goes to A

#

Ab==G#

nimble echo Oct 4, 2023, 3:40 PM

#

so like this?

#

okay i got it

#

    //add the lines of text to html <p> elements
    let textDiv = document.getElementById("text-area")
    //textDiv.innerHTML = '' //clear the html
  
    const noteMaps = {
      'Ab': 'A',
      'G#': 'Ab',
      'G': 'G#',
      'Gb': 'G',
      'F#': 'Gb',
      'F': 'F#',
      'E': 'F',
      'Eb': 'E',
      'D#': 'Eb',
      'D': 'D#',
      'Db': 'D',
      'C#': 'D',
      'C': 'C#',
      'B': 'C',
      'Bb': 'B',
      'A#': 'Bb',
      'A': 'A#',
    };
    textDiv.innerHTML=textDiv.innerHTML.replaceAll(/(<pre class.*?>*<\/pre>)/g, preTagss => {
              return preTagss.replace(/[G-A][#b]?/g, match => {
                if (noteMaps.hasOwnProperty(match)) {
                  return noteMaps[match];
                }
                return match; // Return unchanged if not found in noteMap
              });
    
    
    
    })} ```

#

how do i make this function work?

#

If the user presses the "Transpose Down" button the chords should be transposed down one semitone (or half-step) as they say in music. That is, an Am7 chord should be become Abm7 (or G#m7), F#7 should become F7, Ebmin should become Dmin etc.

pliant sleet Oct 4, 2023, 3:43 PM

#

Ebmin

#

is there things listed like this way in the notes

#

like the song lyrics?

#

or chords rather

nimble echo Oct 4, 2023, 3:44 PM

#

you know like transposing up

#

its that but backwards

#

so we would be going downwards

#

pliant sleet Oct 4, 2023, 3:44 PM

#

so you can use the same code

nimble echo Oct 4, 2023, 3:44 PM

#

this in reverse

pliant sleet Oct 4, 2023, 3:44 PM

#

but change the map

nimble echo Oct 4, 2023, 3:44 PM

#

it will work?

#

i just flip the map?

pliant sleet Oct 4, 2023, 3:45 PM

#

you need a flipped map

nimble echo Oct 4, 2023, 3:45 PM

#

kk i try

pliant sleet Oct 4, 2023, 3:47 PM

#

you have an error in one of your ranges

#

you put G-A somewhere

#

in one of the regex

#

but it's A-G

nimble echo Oct 4, 2023, 3:49 PM

#

    //add the lines of text to html <p> elements
    let textDiv = document.getElementById("text-area")
  //textDiv.innerHTML = '' //clear the html

  const noteMap = {
    'Ab': 'G#',
    'G#': 'A',
    'G': 'G#',
    'Gb': 'G',
    'F#': 'G',
    'F': 'F#',
    'E': 'F',
    'Eb': 'E',
    'D#': 'E',
    'D': 'D#',
    'Db': 'D',
    'C#': 'D',
    'C': 'C#',
    'B': 'C',
    'Bb': 'B',
    'A#': 'B',
    'A': 'A#'
  };
  textDiv.innerHTML=textDiv.innerHTML.replaceAll(/(<pre.*?>)([A-z#b\/ ]*)(<\/pre>)/g, preTags => {
            return preTags.replace(/[A-G][#b]?/g, match => {
              if (noteMap.hasOwnProperty(match)) {
                return noteMap[match];
              }
              return match; // Return unchanged if not found in noteMap
            });
  
  
  
  })}

#

this one doesnt work lol

#

it functions as a transpose Up button instead of down

pliant sleet Oct 4, 2023, 3:51 PM

#

show the transpose down eventhandler

#

also why is a going to A#

nimble echo Oct 4, 2023, 3:52 PM

#

  transposeDown()
} ```

pliant sleet Oct 4, 2023, 3:52 PM

#

isn't it A#-> A

#

nimble echo Oct 4, 2023, 3:53 PM

#

oh shoot

#

i realized what i did was wrong

#

i flipped the entire map instead of the values

#

myb

pliant sleet Oct 4, 2023, 3:54 PM

#

oh you mean from bottom to top or something?

#

the ordering of the values from bottom to top doesn't matter in maps

nimble echo Oct 4, 2023, 3:55 PM

#

pliant sleet oh you mean from bottom to top or something?

yeah lol

pliant sleet Oct 4, 2023, 3:55 PM

#

just the keys and values

nimble echo Oct 4, 2023, 3:55 PM

#

yeah i cant think properly lol i just wanna get this done so i can sleep

pliant sleet Oct 4, 2023, 3:55 PM

#

they are actually called unordered maps in some languages

nimble echo Oct 4, 2023, 3:55 PM

#

like in java?

pliant sleet Oct 4, 2023, 3:56 PM

#

I don't remember in java

#

I think in cpp its like that

#

but I really don't remember

#

you can look up unordered maps if you want and find out

#

try that regex

#

it should match just the pretags

nimble echo Oct 4, 2023, 4:03 PM

#

thanks it worked

#

i just flipped the values

pliant sleet Oct 4, 2023, 4:04 PM

#

do you understand all of what is going on

nimble echo Oct 4, 2023, 4:04 PM

#

for the most part yeah

pliant sleet Oct 4, 2023, 4:04 PM

#

you should really go over it after you sleep

#

make sure you understand

nimble echo Oct 4, 2023, 4:04 PM

#

yeah im gonna

#

but yeah i do understand 90% of whats going on thanks to you

#

I just gotta do this when transposing the chords of the orignal key should be shown in green but if the chords have been transposed they should appear in red. That way if the user is transposing up and down they will always recognize when they are back to the original key by the colour of the chords. So again: use a red colour to show any transposed chords and a green colour to show chords of the original key.

#

oh yeah

#

#

this thing is still being weird

#

the title keeps getting like that

pliant sleet Oct 4, 2023, 4:07 PM

#

you changed the regex in both functions?

#

got to save the red thing for another day though

#

I have stuff to do

nimble echo Oct 4, 2023, 4:09 PM

#

Oh for sure

pliant sleet Oct 4, 2023, 4:09 PM

#

did u change the regex in both function

#

s?

nimble echo Oct 4, 2023, 4:09 PM

#

Thanks for the help I appreciate it

pliant sleet Oct 4, 2023, 4:09 PM

#

no prob

#

I can finish with the original task though

nimble echo Oct 4, 2023, 4:09 PM

#

#

they both look like this

nimble echo Oct 4, 2023, 4:09 PM

#

pliant sleet I can finish with the original task though

👍

pliant sleet Oct 4, 2023, 4:10 PM

#

#1159019748378550342 message

#

try changing them to that

nimble echo Oct 4, 2023, 4:10 PM

#

kk

#

thanks a lot it worked

pliant sleet Oct 4, 2023, 4:11 PM

#

ok nice

nimble echo Oct 4, 2023, 4:11 PM

#

what did that even do?

pliant sleet Oct 4, 2023, 4:12 PM

#

the first version looked like it was matching everything

#

do you know what greedy is vs lazy?

nimble echo Oct 4, 2023, 4:12 PM

#

no idea

pliant sleet Oct 4, 2023, 4:13 PM

#

say you have 123456789123456789123456789

#

and you want to match 1 wildcard 9

#

it can match either 123456789 or the whole thing

nimble echo Oct 4, 2023, 4:14 PM

#

yeah

pliant sleet Oct 4, 2023, 4:14 PM

#

lazy is the smaller one

#

greedy is the larger one

#

it was being greedy

nimble echo Oct 4, 2023, 4:14 PM

#

oh so it was taking it all instead of a small amount it only needs

pliant sleet Oct 4, 2023, 4:14 PM

#

yeah

nimble echo Oct 4, 2023, 4:15 PM

#

oh sweet

#

welp ima head to bed you enjoy the rest of your day and i really appreciate the help sorry for the bother!

pliant sleet Oct 4, 2023, 4:17 PM

#

ok take care

nimble echo Oct 5, 2023, 2:04 AM

#

@pliant sleet I was able to get the code to do this

#

#

but idk why its like this lol

#

i cant tell why it doesnt account for the characters behind it

#How to fix spacing in JavaScript