These are chat archives for FreeCodeCamp/Help

13th
Mar 2019
JGB
@jgrantbrown
Mar 13 00:21
Ugh i drink iced coffee so@always feel the knee deep in it.
Rahul Nayak
@pragyes31
Mar 13 05:06

hi guys, am working on Simon game app and for now have a test button. On clicking it, a randomly generated color is pushed to botPattern array variable and then I want to loop over the array and play audio for each array item depending on the item/color stored.

Now the problem is all the sounds are playing at once and not one after the another. So I have clicked let's say 2nd or 3rd time, all the color sounds in the array play at once. How do I solve this.

here is the code : https://codesandbox.io/s/00v44vrxj0

Hitting the test button calls generateColorSequence function

All I want is for first array item to play, then the 2nd and so on so forth
Any ideas about how to, solve it?
four-tong
@four-tong
Mar 13 05:42

hello,please,my code:

<style>
.smaller-image{
width:100px;
}
</style>
<img class="samller-image" src="/images/relaxing-cat.jpg">

any wrong in it?

it seems couldn't work
Henry
@GitHub-Henry
Mar 13 05:49
@four-tong
.smaller-image

class="samller-image"
four-tong
@four-tong
Mar 13 05:54
god,
I may be silly,
Henry
@GitHub-Henry
Mar 13 05:56
everyone makes mistakes
four-tong
@four-tong
Mar 13 05:57
haha,draw the lesson,thanks
Bjorn van de Peut
@bjorno43
Mar 13 13:55
:wave:
Rahul Nayak
@pragyes31
Mar 13 15:32
Anyone who can help with the simon game app issue i am having above?
Jason Luboff
@JLuboff
Mar 13 15:35
@pragyes31 I used multiple setTimeout, with one of them being in a loop
for(let i = 0; i < myArray.length; i++){
setTimeout(() => { }, 500 * (i + 1))
}
Bjorn van de Peut
@bjorno43
Mar 13 15:38
Working with multiple timers.. that's just asking for trouble :P
Jason Luboff
@JLuboff
Mar 13 15:39
:shrug: The second timeout was to change the color back
Bjorn van de Peut
@bjorno43
Mar 13 15:41
I would probably initiate the first color at the beginning and use a callback to change the color back. At least something in that direction. With multiple timers you are at great risk of creating a browser memory leak. So the only safe way to work with them is by using a mechanic that confirms the previous timer is ended / destroyed
Though I guess one could use setInterval instead and use that to loop through an array. Seems much safer to me
Engjell Bislimi
@Engjell00
Mar 13 17:16
image.png
hello guys im trying to create a hamburger menu in css but my li keeps being in vertical how can i put them in horizontal
Kaz Baig
@kbaig
Mar 13 17:35
@Engjell00 either make the lis inline or their parent flex
Engjell Bislimi
@Engjell00
Mar 13 17:52
@kbaig i did and it doesnt nothing.
Christopher McCormack
@cmccormack
Mar 13 17:53
@Engjell00 you'll have to provide more detail, all you showed was a cropped image. do you have this in codepen or similar, or can you put it in one so we can play with it?
Engjell Bislimi
@Engjell00
Mar 13 17:55
Ok hold on. I will make a codepen!
im not sure why it isnt working on my codepen ..
Engjell Bislimi
@Engjell00
Mar 13 18:11
image.png
Engjell Bislimi
@Engjell00
Mar 13 18:18
the hamburger is suppose to be on top of everything but it seems like he goes under the div?
Engjell Bislimi
@Engjell00
Mar 13 18:40
if this isnt clear at all. just tell me i will delete of this. i'm really bad at sending css problems.
Christopher McCormack
@cmccormack
Mar 13 18:59
@Engjell00 you can make your ul display: flex instead of display: inlineto make it inline
you're kind of mix and matching there
Engjell Bislimi
@Engjell00
Mar 13 19:18
@cmccormack yeah eve with the flex it doesnt align horizontal they just people all weirdly place vertically
Christopher McCormack
@cmccormack
Mar 13 19:19
@Engjell00 so this isn't what you're looking for?
strictly speaking of horizontal vs vertical
Wes Gray
@wesgray76
Mar 13 19:22
hello everyone
Engjell Bislimi
@Engjell00
Mar 13 19:23
I really want them to be horizontally under the logo
Wes Gray
@wesgray76
Mar 13 19:24
does anyone know when Free Code Camp 7.0 is supposed to kick off
Christopher McCormack
@cmccormack
Mar 13 19:28
@wesgray76 you can read about it here but I suspect it will be a while
Wes Gray
@wesgray76
Mar 13 19:30
okay thanks.
idris
@idris12
Mar 13 22:41
why doesnt this show me the value
Christopher McCormack
@cmccormack
Mar 13 22:43
what @idris12 ?
idris
@idris12
Mar 13 22:44
num3.PNG
num1.PNG
num2.PNG
Christopher McCormack
@cmccormack
Mar 13 22:44
your P element should probably be p fyi
@idris12 try moving your two DOM element selectors showResult and val inside your showNumber function
idris
@idris12
Mar 13 22:49
wow thanks it worked
but why didnt it work with the global scope because i want to pass the val as an argument in the fuction
but if its inside it wont work right
Christopher McCormack
@cmccormack
Mar 13 22:52
@idris12 if you add val outside the function, you will only ever have the value of the input when the page rendered, it will never update.
you can test that by giving the input an initial value
idris
@idris12
Mar 13 22:53
yes your right it shows undefined good to know thank you
Christopher McCormack
@cmccormack
Mar 13 22:54
@idris12 :thumbsup:
idris
@idris12
Mar 13 23:01
@cmccormack heres the problem now when i write 5 the value in the argument it doent work
num4.PNG
Christopher McCormack
@cmccormack
Mar 13 23:04
@idris12 it's working fine it appears
val is a string
even if it wasn't, the length would be 1 if you put 5 in
so it's printing 0 to the console, which is what a loop of 1 starting at 0 would print
Bjorn van de Peut
@bjorno43
Mar 13 23:06
@idris12 There are a number of issues with that code:
function showNumber(val) <-- are you passing a parameter to the function here?
The p variable is never used.
The val variable overwrites the function parameter
idris
@idris12
Mar 13 23:07
the p is do display what i want to display later
function showNumber(val)<-- are you passing a parameter to the function here? yes i wanted to make the dom global but it wouldnt display the result
Bjorn van de Peut
@bjorno43
Mar 13 23:10
The moment you talk global is the moment most of use get very scared :P But ok. What I ment is: When you call the function, do you pass the parameter along? As it's mandatory the way you coded it.
idris
@idris12
Mar 13 23:10
lemme write the whole code first and maybe u can correct me on how to manipulate the dom
its an algorithm challenge
Bjorn van de Peut
@bjorno43
Mar 13 23:11
That would definitely be a good place to start. It's a whole lot easier for us to help you if we have access to the code itself :)
idris
@idris12
Mar 13 23:15
ok thanks @bjorno43
idris
@idris12
Mar 13 23:35
@bjorno43 ok am back you here
Bjorn van de Peut
@bjorno43
Mar 13 23:36
Ye I'm still here
nsonhouse
@nsonhouse
Mar 13 23:37
Hello all. Please advise. I need to create and populate a table. The data will be populated from a for loop so I can not define the number of rows. Any suggestions?
ok so that the code the algorithm is when a user inputs
1

it should display
1

if a user input 2 it should show
1
22

if a user input 3 it should show
1

22
333
and so on
idris
@idris12
Mar 13 23:49
@bjorno43 did u check it out
Bjorn van de Peut
@bjorno43
Mar 13 23:50

@idris12 So what is your question? You already have it completely working there. All there is left to do is implement the user input:

document.addEventListener("DOMContentLoaded", function(event) {
    var element = document.getElementById('submitBtn');

    element.addEventListener("click", function(e) {
        var val = document.getElementById('txtInput').value;

        showNumber(val);
    });
});

Haven't tested this, but should work.

nsonhouse
@nsonhouse
Mar 13 23:51
Can anyone help with table creation and populating it ?
Bjorn van de Peut
@bjorno43
Mar 13 23:54

@nsonhouse This is pretty trivial to do. Should be something like:

var html = '<table><tbody>';

for( var i = 0; i < yourDataArray.length; i++){
    html += '<tr>';
    html += '<td>'+ data_here +'</td>';
    html += '</tr>';
}

html += '</tbody></table>';

Then just implement html into the DOM

idris
@idris12
Mar 13 23:56
@bjorno43 thanks i didnt know about this domcontent loaded but its displaying the final result which is 55555
instead of
1
22
333
4444
55555
Bjorn van de Peut
@bjorno43
Mar 13 23:57
@idris12 The domcontent loaded ensures that the browser loaded the HTML before executing the Javascript. Otherwise Javascript will try to select an element that doesn't exist yet because the browser isn't finished loading.
idris
@idris12
Mar 13 23:59
@bjorno43 i see thanks