coding challenge #4
Udemy complete JavaScript Jonas S
by trentHarlem
HTML
<p>
// Coding Challenge #4
</p>
<p>
Write a program that receives a list of variable names written in underscore_case and convert them to camelCase.<br>
<br>
The input will come from a textarea inserted into the DOM (see code below), and conversion will happen when the button is pressed.<br>
<br>
THIS TEST DATA (pasted to textarea)<br>
underscore_case<br>
first_name<br>
Some_Variable <br>
calculate_AGE<br>
delayed_departure<br>
<br>
SHOULD PRODUCE THIS OUTPUT (5 separate console.log outputs)<br>
<p>
underscoreCase ✅<br>
firstName ✅✅<br>
someVariable ✅✅✅<br>
calculateAge ✅✅✅✅<br>
delayedDeparture ✅✅✅✅✅<br>
</p>
<br>
HINT 1: Remember which character defines a new line in the textarea 😉<br>
HINT 2: The solution only needs to work for a variable made out of 2 words, like a_b<br>
HINT 3: Start without worrying about the ✅. Tackle that only after you have the variable name conversion working 😉<br>
HINT 4: This challenge is difficult on purpose, so start watching the solution in case you're stuck. Then pause and continue!<br>
<br>
Afterwards, test with your own test data!
<br>
GOOD LUCK 😀
</p>
CSS
body {
font: 1.1em system-ui;
background-color: dodgerblue;
}
textarea {
width: 50%;
border-radius: 10px;
}
button {
border-radius: 10px;
margin: 10px;
height: 40px;
width: 80px;
background-color: yellowgreen;
}
JavaScript
document.body.append(document.createElement('textarea'));
document.body.append(document.createElement('button'));
document.querySelector('button').addEventListener('click', function() {
const text = document.querySelector('textarea').value;
console.log(text)
const arr = text.split('\n');
let temp = [];
for (let [i, v] of arr.entries()) {
temp = [];
const t = v.trim().toLowerCase().split('_');
const tOne = t[1]
temp.push(t[0], tOne.replace(tOne[0], tOne[0].toUpperCase()))
console.log(temp.join('').padEnd(22) + '✅'.repeat(i + 1))
}
return temp.join('')
})