These are chat archives for FreeCodeCamp/HelpFrontEnd

10th
Apr 2018
German Gamboa Gonzalez
@germangamboa95
Apr 10 2018 01:54
Guys I need a hand testing a chat thing I am trying to build. I just want to make sure that things are going into the db properly https://germangamboa95.github.io/RPSFirebase.io
UnorthodoxThing
@UnorthodoxThing
Apr 10 2018 02:45
Hmm.. I'm having trouble with my dropdown menu. I don't think I know how to use the pseudo ':checked' properly. :/
Does anyone have an idea on how I should approach this or solve it? Are my html okay?
LydaTech
@lydatech
Apr 10 2018 02:55
@UnorthodoxThing your html is not structured correctly
@UnorthodoxThing are you here? I dont want to go into a lot of detail if youre not around
UnorthodoxThing
@UnorthodoxThing
Apr 10 2018 03:02
yes, im here :)
You can pm if it's easier @lydatech
LydaTech
@lydatech
Apr 10 2018 03:03
@UnorthodoxThing do you have a mockup of what you want it to do?
UnorthodoxThing
@UnorthodoxThing
Apr 10 2018 03:07
@lydatech I couldn't really find a good learning material online, so it is kinda more like trial and error. I wanted to be checkbox dropdown menu. When clicked, the bar is highlighted and shows its submenu. Hovering over any of the menus gives highlight, except on the clicked or when checked on the menu (that has submenus). I don't think I understand the checkbox dropdown menu thoroughly either.
LydaTech
@lydatech
Apr 10 2018 03:14
@UnorthodoxThing first you need to simplify your nav
<nav>
  <ul>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Menu</a>
      <ul>
        <li><a href="#">Sub-Item</a></li>
        <li><a href="#">Sub-Item</a></li>
        <li><a href="#">Sub-Item</a></li>
        <li><a href="#">Sub-Item</a></li>
        <li><a href="#">Sub-Item</a></li>
      </ul>
    </li>
    <li><a href="#">Item</a></li>
  </ul>
</nav>
Heathercoraje
@Heathercoraje
Apr 10 2018 03:59
Hi everyone! I deployed my first react app. I would love to hear some feedbacks if you have a min or two! getThingsDone, my repo
Quincy Larson
@QuincyLarson
Apr 10 2018 04:12
@Heathercoraje Awesome! I tried it and wasn't able to break it :)
Christopher McCormack
@cmccormack
Apr 10 2018 04:12
@Heathercoraje Looks great so far!
Quincy Larson
@QuincyLarson
Apr 10 2018 04:12
Congrats on deploying your first React project!
Corey Lewis
@cursiv3
Apr 10 2018 04:12
@Heathercoraje looks good on my nexus 5
Heathercoraje
@Heathercoraje
Apr 10 2018 04:12
@QuincyLarson oh, thank you. I read your articles on medium but did not know you exist physically!
CamperBot
@camperbot
Apr 10 2018 04:12
heathercoraje sends brownie points to @quincylarson :sparkles: :thumbsup: :sparkles:
:star2: 1401 | @quincylarson |http://www.freecodecamp.org/quincylarson
Heathercoraje
@Heathercoraje
Apr 10 2018 04:13
@cmccormack Thanks!
Quincy Larson
@QuincyLarson
Apr 10 2018 04:13
@Heathercoraje Physically? Just here on the internet mostly ;)
Heathercoraje
@Heathercoraje
Apr 10 2018 04:13
@cursiv3 a bit clumsy with responsiveness but thanks!
CamperBot
@camperbot
Apr 10 2018 04:13
heathercoraje sends brownie points to @cursiv3 :sparkles: :thumbsup: :sparkles:
:cookie: 306 | @cursiv3 |http://www.freecodecamp.org/cursiv3
Christopher McCormack
@cmccormack
Apr 10 2018 04:13
One thing I would consider is to change the checkbox to an X or a trashcan icon or something - wasn't intuitive that it would delete the item
Heathercoraje
@Heathercoraje
Apr 10 2018 04:14
@QuincyLarson Jaja the world is indeed small. I am tackling to get a first dev job now while working on BE certificate on FCC. I have been inspired by your story. Thank you
CamperBot
@camperbot
Apr 10 2018 04:14
heathercoraje sends brownie points to @quincylarson :sparkles: :thumbsup: :sparkles:
api offline
dinesh
@1532j0004kg
Apr 10 2018 04:14
where u learned Rjs?
Corey Lewis
@cursiv3
Apr 10 2018 04:14
@Heathercoraje not at all, I just checked it out in landscape too and it looks great, also realized you can do multiple categories that way, nice!
Heathercoraje
@Heathercoraje
Apr 10 2018 04:15
@cmccormack makes sense.
dinesh
@1532j0004kg
Apr 10 2018 04:15
@Heathercoraje
Heathercoraje
@Heathercoraje
Apr 10 2018 04:15
@1532j0004kg oh, I am reading fullstack react and friends
but this app I built it while reading Get Started part of react docs.
Boo Far
@vapidlyrapid
Apr 10 2018 04:16
@lydatech thank you
CamperBot
@camperbot
Apr 10 2018 04:16
vapidlyrapid sends brownie points to @lydatech :sparkles: :thumbsup: :sparkles:
:star2: 2773 | @lydatech |http://www.freecodecamp.org/lydatech
dinesh
@1532j0004kg
Apr 10 2018 04:16
@Heathercoraje ok
:+1:
Heathercoraje
@Heathercoraje
Apr 10 2018 04:16
I am not fully happy about this code design for this app because I am learning so much with the fullstack react and friend.
Dhaval Vira
@dhavalveera
Apr 10 2018 04:16
oh
Ken Haduch
@khaduch
Apr 10 2018 04:17
@Heathercoraje - hey there! I like the look of your site, even before doing anything... I wasn't sure about how to check things off - I thought that the checkbox would cross out the item, marking it "done" instead of deleting it? Then I added the item back in and found that clicking the name crossed it off. I think that the operation of the controls are not too clear? But you get used to it. The responsive behavior is a little undesirable, at least as far as shrinking the window width, the font size gets really tiny.
But I think that you are doing well with the app in general - looks like you are getting the hang of React? Congrats!
Heathercoraje
@Heathercoraje
Apr 10 2018 04:23
@khaduch Hi Ken! App definitely need more responsiveness. Thank you for the feeback regarding the how-to-use aspect of app.
CamperBot
@camperbot
Apr 10 2018 04:23
heathercoraje sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3860 | @khaduch |http://www.freecodecamp.org/khaduch
Heathercoraje
@Heathercoraje
Apr 10 2018 04:23
@khaduch Yeah, react so far so good!
Ken Haduch
@khaduch
Apr 10 2018 04:24
@Heathercoraje :+1:
Christopher McCormack
@cmccormack
Apr 10 2018 04:25
@Heathercoraje are you using material css?
Heathercoraje
@Heathercoraje
Apr 10 2018 04:26
@cmccormack nope. just vanilla so far.
Christopher McCormack
@cmccormack
Apr 10 2018 04:26
ah ok your buttons looked very material, very nice :) there are several great Material libraries for React if you are interested, should at least make responsiveness easy.
Lazizxon Akromov
@LazizkhonAkrom_twitter
Apr 10 2018 04:29
@ndburrus @khaduch Thank you for your comments, I will check and correct them!
CamperBot
@camperbot
Apr 10 2018 04:29
lazizkhonakrom_twitter sends brownie points to @ndburrus and @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2201 | @ndburrus |http://www.freecodecamp.org/ndburrus
:star2: 3861 | @khaduch |http://www.freecodecamp.org/khaduch
Heathercoraje
@Heathercoraje
Apr 10 2018 04:32
@cmccormack what do you recommend?
Christopher McCormack
@cmccormack
Apr 10 2018 04:34
@Heathercoraje you could try out https://material-ui-next.com/
I personally am not using it, I found some limitations I didn't feel like working around so instead I wrapped materialize-css in my own Components, but that gets tedious the more you try to do
Heathercoraje
@Heathercoraje
Apr 10 2018 04:37
the design package itself is very nice.
but I also understand you start to see limitations..
Norvin Burrus
@ndburrus
Apr 10 2018 04:37
@LazizkhonAkrom_twitter you're welcome! ...also see helpful comments from @sjames1958gm :point_up: April 9, 2018 8:29 AM :sparkles:
Heathercoraje
@Heathercoraje
Apr 10 2018 04:37
I am not a big fan of bootstrap for that reason but I am surely looking for a tool for responsiveness
Christopher McCormack
@cmccormack
Apr 10 2018 04:40
My next project I may just strip the CSS I need from a framework for responsiveness and do the rest myself
UnorthodoxThing
@UnorthodoxThing
Apr 10 2018 04:41
@lydatech Thankyou for the link. I thought I had to put each new menu title within a div if I ever create one menu title as a checkbox. Does that mean, for the one that I want to make into a dropdown checkbox is the only one I should put in a div container with its own input and label attribute?
CamperBot
@camperbot
Apr 10 2018 04:41
unorthodoxthing sends brownie points to @lydatech :sparkles: :thumbsup: :sparkles:
:star2: 2774 | @lydatech |http://www.freecodecamp.org/lydatech
Ghost
@ghost~5928d90bd73408ce4f629b9e
Apr 10 2018 05:08
is it a bad practice to use native append/prepend methods for making dynamic data in reactjs?
I'm working on an application that uses socket.io i can't really think of anything that i can make a component render when the event is emitted other than using append/prepend.
coderNewby
@coderNewby
Apr 10 2018 05:10
@DarrenfJ thanks for the help
CamperBot
@camperbot
Apr 10 2018 05:10
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2457 | @darrenfj |http://www.freecodecamp.org/darrenfj
UnorthodoxThing
@UnorthodoxThing
Apr 10 2018 05:15

@lydatech
I re-did my html... are the following more recommended for the tutorial link you've given me?

<div class="nav">
<ul>
<li><a href="#"></a>Home</li>
<li><a href="#"></a>About Us</li>
<li><a href="#">Menu</a>
<div class="dropdown-menu">
<input type="checkbox" id="A">
<label for="A"></label>
<ul>
<li><a href="#">Pastas To Go</a></li>
<li><a href="#">Sauces To Go</a></li>
<li><a href="#">Ready Meals...</a>
<div class="dropdown-readymeals">
<input type="checkbox" id="A-C">
<label for="A-C"></label>
<ul>
<li><a href="#">Arancinis</a></li>
<li><a href="#">Garlic Bread</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li><a href="#">Find Us</a></li>
</ul>

</div>

TonyRednil
@TonyRednil
Apr 10 2018 05:34
Hey guys, I'm having some troubles with my Manipulating Complex Objects lesson. I don't really understand what it is asking me for when it asks for a "album". I thought it was just asking me for something like the Daft Punk complex array example but that isn't working. It says "{" is an unexpected variable and it's asking for "[" to match what was in line 2. I'm so lost....

This is the code I've been attempting to use.

var myMusic = [
{
"artist": "Billy Joel",
"title": "Piano Man",
"release_year": 1973,
"formats": [
"CS",
"8T",
"LP" ],
"gold": true
}
{
"artist": "Daft Punk",
"title": "Homework",
"release_year": 1997,
"formats": [
"CD",
"Cassette",
"LP" ],
"gold": true
};// Add record here
];

Claudio Restifo
@Marmiz
Apr 10 2018 05:43
@TonyRednil you forgot the comma to separate objects (EDIT: any values for that matter) in an array:
[{},{}]
TonyRednil
@TonyRednil
Apr 10 2018 05:44
@Marmiz It is still telling me that "{" is an unexpected token.
Norvin Burrus
@ndburrus
Apr 10 2018 05:45

@TonyRednil need to remove final ]; :sparkles:

 [
"CD",
"Cassette",
"LP" ],

...is already closed.

Claudio Restifo
@Marmiz
Apr 10 2018 05:45
what about the semicolon at the end of the array?
that ^

you wrote an array as:

[{} {};]

not a valid syntax

TonyRednil
@TonyRednil
Apr 10 2018 05:45
Removing the semicolon worked.....I feel kinda stupid....
Thanks guys.
Norvin Burrus
@ndburrus
Apr 10 2018 05:46
@TonyRednil don't, you're not :) you're welcome, drive on! :sparkles:
paulsda
@paulsda
Apr 10 2018 05:48
Anybody know what happened to the main FCC general chat room?
Brad
@bradtaniguchi
Apr 10 2018 05:52
@paulsda It was removed last week
TonyRednil
@TonyRednil
Apr 10 2018 05:55
Interesting. Did anyone have any problems logging in for the last like month? For some reason when I was trying to sign in to gitter on the website, app, or desktop app as soon as I clicked log in to get to the username and password screen all I would get is a blank white screen nothing. Tonight is the first time I've been able to log in for like two months....
Norvin Burrus
@ndburrus
Apr 10 2018 05:59
@paulsda ....background info here: freeCodeCamp/freeCodeCamp#15613 :sparkles:
...no, i haven't experienced any login issues...
UnorthodoxThing
@UnorthodoxThing
Apr 10 2018 06:26
Can anyone help me with my html/css only checkbox dropdown menu?? I have at least two submenus. I'm not sure how to get it display when checked. https://codepen.io/UnorthodoxThing/pen/paMBQB :(
Sebastian Andil
@selrond
Apr 10 2018 07:09

Hey there, anybody know why this

https://wikipedia.org/w/api.php?action=query&format=json&origin=*&prop=extracts&list=&continue=&titles=&generator=search&callback=&formatversion=1&exsentences=3&exintro=1&explaintext=1&exsectionformat=plain&gsrsearch=javascript

gives me this error?

Failed to load https://wikipedia.org/w/api.php?action=query&format=json&gin=*&prop=extracts&list=&continue=&titles=&generator=search&callback=&formatversion=1&exsentences=3&exintro=1&explaintext=1&exsectionformat=plain&gsrsearch=kosice: Redirect from 'https://wikipedia.org/w/api.php?action=query&format=json&gin=*&prop=extracts&list=&continue=&titles=&generator=search&callback=&formatversion=1&exsentences=3&exintro=1&explaintext=1&exsectionformat=plain&gsrsearch=kosice' to 'https://www.wikipedia.org/w/api.php?action=query&format=json&gin=*&prop=extracts&list=&continue=&titles=&generator=search&callback=&formatversion=1&exsentences=3&exintro=1&explaintext=1&exsectionformat=plain&gsrsearch=kosice' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
I did set the origin=* as Wikipedia suggests
image.png
Brian
@BrianCodes33
Apr 10 2018 07:17
@UnorthodoxThing can you be more specific
Jefferson
@jeffersonnnn
Apr 10 2018 07:18
is it possible to build an entire slack bot in react and redux.
if AWS lambdas are a possbility, then no problem. But i'd love to build a slack bot in R & R.
UnorthodoxThing
@UnorthodoxThing
Apr 10 2018 07:30
@BrianCodes33 I have a menu, and in that menu is a sub menu. I want it to display the menu when I click on it and toggle on the pseudo checkbox. The sub menu would also have its own checkbox menu. However, I'm not sure how to make this result with only html/css. :worried: I've received a comment it is counter-productive (my approach) and should use javascript to do this. Even so, I'm not sure how to incorporate JavaScript into this.
Brian
@BrianCodes33
Apr 10 2018 07:36
you could do a hide() show() with jquery. or vanilla js can do the trick. but its hard to give you any input w/ no code
UnorthodoxThing
@UnorthodoxThing
Apr 10 2018 07:50
Brian
@BrianCodes33
Apr 10 2018 08:02
i cant see what u want to do by showing me all your code. you need to isolate the issue so i can look at it
Avinash Chaudhary
@imperishableavinash
Apr 10 2018 08:15
Can some one help
https://codepen.io/imperishableavinash/live/pLGrex Can some one tell me why input not toggling After clicking on fa icon plus The code clicking fa is on last line of js file
Brian
@BrianCodes33
Apr 10 2018 08:53
looks like you might be targeting the wrong element
maybe i am wrong
Avinash Chaudhary
@imperishableavinash
Apr 10 2018 08:59
No I am targeting plus icon see last line in js. When plus icon clicked it must toggle input
Brian
@BrianCodes33
Apr 10 2018 09:00
i am trying to figure it out too but the console log isnt firing
Markus Kiili
@Masd925
Apr 10 2018 09:01
@imperishableavinash I think that you need to import js files from the codepen settings and not from html.
I also see corresponding errors on the browser developer tools console.
Brian
@BrianCodes33
Apr 10 2018 09:04
why isnt the console log firing on the .fa-plus? @Masd925
Stephen James
@sjames1958gm
Apr 10 2018 09:04
@imperishableavinash I have had issue with trying to use fa classes for click handlers, perhaps put a wrapper div around it and register on that
Marianissimus
@Marianissimus
Apr 10 2018 09:05
Ok, the main problem is with the "defer" attribute given to your font-awesome script @imperishableavinash
Stephen James
@sjames1958gm
Apr 10 2018 09:05
@imperishableavinash The fa code replaces the i element when the page renders so it could be losing your registration
Marianissimus
@Marianissimus
Apr 10 2018 09:05
remove it from line 16
then you can select the font-awesome properly
and do something like
$(document).ready(function(){
  $(".fa-plus").click(function(){
    $("Input[type='text']").fadeToggle("fast", "linear"); 
  });
})
Avinash Chaudhary
@imperishableavinash
Apr 10 2018 09:07
I tried on div wrapping but no success
Marianissimus
@Marianissimus
Apr 10 2018 09:07
what happened was that "defer" says "load font awesome when page finished loading"; however, your js is already loaded by then
so the code won't run, since the font-awesome icon is not yet loaded...
Avinash Chaudhary
@imperishableavinash
Apr 10 2018 09:09
Did this code worked which you gave
Wait I am opening laptop
Stephen James
@sjames1958gm
Apr 10 2018 09:11
@imperishableavinash Wrapping a div worked for me (messed up the styling)
@Marianissimus is right, because the FA code removes the <i> and replaces it with a svg
And your click handler is removed when the <i> is removed, so you need to make sure your js runs after the FA code
Avinash Chaudhary
@imperishableavinash
Apr 10 2018 09:11
Where to put div around fa icon?
I am not targeting I I targeted fa-trash class
Stephen James
@sjames1958gm
Apr 10 2018 09:13
@imperishableavinash <div class="assignclickhere"><i></i></div> there will be issues with styling
Avinash Chaudhary
@imperishableavinash
Apr 10 2018 09:13
So I should target assignclickhere
Stephen James
@sjames1958gm
Apr 10 2018 09:15
@imperishableavinash Yes, and use assignclickhere { float: right} in the css
Marianissimus
@Marianissimus
Apr 10 2018 09:15
I told you I got it @imperishableavinash
https://codepen.io/marianissimus/pen/LdqOWM
Avinash Chaudhary
@imperishableavinash
Apr 10 2018 09:15
Yah it's worked thank you
But I have to make div inline now
😌
I should use span instead div
Stephen James
@sjames1958gm
Apr 10 2018 09:18
@imperishableavinash Like you did for the todos?
Avinash Chaudhary
@imperishableavinash
Apr 10 2018 09:21
Thanks all. Problem solved just added div with a class and instead of .fa-plus I targeted that div's class in css and js both
Stephen James
@sjames1958gm
Apr 10 2018 09:25
@imperishableavinash :+1:
Javier Pons
@JavierPons
Apr 10 2018 10:00
hi there!
Stephen James
@sjames1958gm
Apr 10 2018 10:01
@JavierPons :wave:
Javier Pons
@JavierPons
Apr 10 2018 10:01
anyone can send a middle web - JS exercise to resolve?
If its possible a cool one
@sjames1958gm :hand:
or recommend a place where to find JS exercises.... :)
Marianissimus
@Marianissimus
Apr 10 2018 10:03
have you tried codewars, codefights, or someting similar? @JavierPons
Javier Pons
@JavierPons
Apr 10 2018 10:04
not very much
@Marianissimus do you recommend?
Marianissimus
@Marianissimus
Apr 10 2018 10:06
yes, you can try them. some of the challenges seem a bit too mathematical - for me, at least. but there are others I really enjoyed, like this one: https://www.codewars.com/kata/514a024011ea4fb54200004b
Javier Pons
@JavierPons
Apr 10 2018 10:06
@Marianissimus :+1:
Javier Pons
@JavierPons
Apr 10 2018 10:14
In codefight, they ask some point to open the lock
:worried:
Marianissimus
@Marianissimus
Apr 10 2018 10:17
do them in order, the locks will unlock
also, beware of poorly explained challenges - you will not be given all the info or passing cases, which can be a little infuriating; but... c'est la vie
UnorthodoxThing
@UnorthodoxThing
Apr 10 2018 10:18
@BrianCodes33 Hi, I decided to ditch the html/css code ONLY method. I am not use to JavaScript but I really want to get the result of having double dropdown menus by toggling-clicking on and off switch. I cleared out some unnecessary code (hopefully it's easier to read. I do have some bits of old code lying around but they are commented out. https://codepen.io/UnorthodoxThing/full/oENvEX/
The problem I have now is when I click on 'Read Meals' (the submenu) its list of its own won't come out. The second problem is when I click elsewhere the menu is still open.
Does anyone else know how to approach this?
Marianissimus
@Marianissimus
Apr 10 2018 10:22
why do you have 2 identical classes: .show1 { display: block; } .show2 { display: block; } ?
anyway, to achieve this, you would be better off with either jQuery, or Bootstrap, a combination of them or another library; you will have a lot of trouble with vanilla javascript only at this time @UnorthodoxThing
UnorthodoxThing
@UnorthodoxThing
Apr 10 2018 10:29
@Marianissimus I wasn't really sure if it was working or not-- Im not sure when to use JavaScript on html/css. Thanks for the tip, do you know where I could start learning JQuery? Or whichever is more suitable for the job -- Bootstrap too?
CamperBot
@camperbot
Apr 10 2018 10:30
unorthodoxthing sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 486 | @marianissimus |http://www.freecodecamp.org/marianissimus
Marianissimus
@Marianissimus
Apr 10 2018 10:32
If you already know bootstrap, you can just copy-paste the code from their site and customize it according to your needs: https://getbootstrap.com/docs/4.0/components/dropdowns/ However, if you don't know how to do that, go for jQuery, it will be more helpful on the long run; I can't recommend you a single course, but the jQuery site is pretty good; you will also find resources on w3schools and in other places;
Javier Pons
@JavierPons
Apr 10 2018 10:41
some advise
function getCount(str) {
  var vowelsCount = 0;

 if((str == 'a' ) || (str == 'e')  || (str == 'i') || (str == 'o') || (str =='u')) {
      vowelsCount += vowelsCount; 

 }

  return vowelsCount;
}
Marianissimus
@Marianissimus
Apr 10 2018 10:42
what you're saying is just "if string is equal to a vowel, add 1 to the vowels count"; I think it should be if string CONTAINS a vowel, right? @JavierPons
Javier Pons
@JavierPons
Apr 10 2018 10:53
function getCount(str) {
  var vowelsCount = 0;
  var vowel = (aeiou);

  for ( var i = 0; i < vowel.length; i++){
      if( vowel.indexOf(str[i]) !==-1) {
      vowelsCount += 1;
      }
  }


  return vowelsCount;
}
its the same error if vowel is array
Marianissimus
@Marianissimus
Apr 10 2018 10:55
your array is not quite right; it should be : var wovel = ["a", "e", "i", "o", "i"]
and the loop is not really right, either; you just loop through the vowel array, not through the string, too
Javier Pons
@JavierPons
Apr 10 2018 10:56
yes
Marianissimus
@Marianissimus
Apr 10 2018 10:56
so you only compare array[1] to string[1], but this is not right
Javier Pons
@JavierPons
Apr 10 2018 10:58
well this will be next challenge
now I must go. @Marianissimus thnx!
CamperBot
@camperbot
Apr 10 2018 10:58
javierpons sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 487 | @marianissimus |http://www.freecodecamp.org/marianissimus
UnorthodoxThing
@UnorthodoxThing
Apr 10 2018 11:01
@Marianissimus Is it better to learn JQuery over Bootstrap??
Marianissimus
@Marianissimus
Apr 10 2018 11:03
Bootstrap uses jQuery, too. It's better if you want to use javascript for visual effects, animations, etc
UnorthodoxThing
@UnorthodoxThing
Apr 10 2018 11:06
I do want to be a full-stack Web-developer and software developer/engineer at the end of the day.
@Marianissimus does that make a difference?
Marianissimus
@Marianissimus
Apr 10 2018 11:08
I'm not employed in the field, but I guess you should know both bootstrap and jQuery; they are not about doing things BETTER than with vanilla javascript, but they are about doing things FASTER, and I think this will matter when you get the job
also, if you have to choose, go for jQuery; bootstrap is on the downhill, at least for projects when you can use css grids instead of it;
UnorthodoxThing
@UnorthodoxThing
Apr 10 2018 11:13
ah, thanks very much. I guess JQuery is a safe pick.
n1zzy
@n1zzy
Apr 10 2018 11:31

hello! can someone tell me what type is arr in

function uniteUnique(arr) {
    console.log(arr);
}

uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1]);

and why only the first array gets console logged?

[ 1, 3, 2 ]
[Finished in 0.2s]
how can I make it log the rest of the arrays?
Claudio Restifo
@Marmiz
Apr 10 2018 11:32

@UnorthodoxThing Bootstrap is a CSS library, JQuery is a Javascipt library.

Is like asking if you should know to learn how to use a bush trimmer or a lawn mower.
two tools for two different jobs

UnorthodoxThing
@UnorthodoxThing
Apr 10 2018 11:36
Oh, I didn't know. Why do you need a library for CSS?
n1zzy
@n1zzy
Apr 10 2018 11:44
hello?
LydaTech
@lydatech
Apr 10 2018 11:45
@UnorthodoxThing HTML is for logical structuring of your content. CSS is the presentation of that structure. JS adds interactivity to it.
bootstrap is a framework. It includes pre defined classes to quickly display the CSS part of your website using those classes. It also uses jquery to enable interactivity to components like a carousel or a dropdown menu.
n1zzy
@n1zzy
Apr 10 2018 11:56
isn't this exercised flawed?
the funciton's argument will always be the first array
how can I know if there are more arguments to this function?

if it were

uniteUnique([[1, 3, 2], [5, 2, 1, 4], [2, 1]]);

instead of

uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1]);
then it should've worked
Markus Kiili
@Masd925
Apr 10 2018 12:01
@n1zzy You can get all the passed arguments and the number of them using the arguments object.
You can use arguments[i] and arguments.length.
n1zzy
@n1zzy
Apr 10 2018 12:03
lol it worked
thanks @Masd925
CamperBot
@camperbot
Apr 10 2018 12:03
n1zzy sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4771 | @masd925 |http://www.freecodecamp.org/masd925
Nate Mallison
@NJM8
Apr 10 2018 12:51
Hey all, can I get some reviews of my Simon game? Thanks! It is currently set to only go 5 rounds so it's easy to test the ending functions. https://www.natethedev.com/FreeCodeCampFrontEndProjects/simonSays/
Tom
@moT01
Apr 10 2018 12:58
@NJM8 looks good - only problem i see is that when the user clicks two buttons too fast the sound doesn't play
yea, something got messed up when I try to play too fast
for the most part its real good
Nate Mallison
@NJM8
Apr 10 2018 13:03
Thanks @moT01, The sound can be fixed, are you on Chrome? I had problems with the sounds in general on chrome
CamperBot
@camperbot
Apr 10 2018 13:03
njm8 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:star2: 1031 | @mot01 |http://www.freecodecamp.org/mot01
Tom
@moT01
Apr 10 2018 13:03
firefox
i had a similar problem making a drum machine - fixed it by creating the sound in js when the button is clicked
UnorthodoxThing
@UnorthodoxThing
Apr 10 2018 13:06
@lydatech oh thankyou for the clarification. :D
CamperBot
@camperbot
Apr 10 2018 13:06
unorthodoxthing sends brownie points to @lydatech :sparkles: :thumbsup: :sparkles:
:star2: 2775 | @lydatech |http://www.freecodecamp.org/lydatech
Amal Shukla
@amal1994
Apr 10 2018 13:07
Hey Guys,
I wanted some serious help
My current application is implemented in Angular.
We are thinking of separating out static site from our web application as static site usually changes a lot and also jquery plugins are more easily available than the angular counterparts in respect of both implmentation and customisation.
What should be a better way to do it?
Seriously need suggestion from you guys
Nate Mallison
@NJM8
Apr 10 2018 13:08
@moT01 I'm doing this:
  function playSound(event){
    let sound = document.querySelector(`[data-key="${event.target.dataset.id}"]`);
    sound.play();
  }
where the id matches the id of the audio element
  <audio src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" data-key="1"></audio>
  <audio src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3" data-key="2"></audio>
  <audio src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3" data-key="3"></audio>
  <audio src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3" data-key="4"></audio>
@amal1994 Is your application and static site served in different URL's or are they tied together?
Tom
@moT01
Apr 10 2018 13:14
@NJM8 https://github.com/moT01/javascript30/blob/master/drumkit/main.js here's my drum kit js file - at the bottom i play the sounds
Nate Mallison
@NJM8
Apr 10 2018 13:16
@moT01 I have tried that in my Pomodoro timer but had problems hosting the sounds. I had the thought that putting them in the audio element pre-loads them so you don't have to fetch them on use
not sure if that is true
Tom
@moT01
Apr 10 2018 13:20
not sure - i think it might be - but then you're using the same audio each time, so on the second click the audio wont start again cause the first one is still playing (seems to work like that in my head anyway)
Nate Mallison
@NJM8
Apr 10 2018 13:21
Yes, I remember in JS30 he set the currentTime to 0 or something
Tom
@moT01
Apr 10 2018 13:25
yea, probly other ways to do it
n1zzy
@n1zzy
Apr 10 2018 13:29
@Masd925 do you have any idea what I'm doing wrong here:
function convertHTML(str) {
    var toReplace = {
        "&":"&​amp;",
        "<":"&​lt;",
        ">":"&​gt;",
        "\"":"&​quot;",
        "'":"&​apos;"
    };
    str = str.replace(/&|<|>|"|'/gi,function(matched) {
        return toReplace[matched];
    });
    return str;
}
if I run this locally it works fine
but for some reason it doesn't work in FCC
Ken Haduch
@khaduch
Apr 10 2018 13:35
@n1zzy - hello - I just tried copying and pasting your code into a new window for that challenge, and when I pasted it, I got some kind of strange character between the & and the characters such as amp - it showed up as a red dot on the screen. Maybe if you just tried deleting the & and retyping it into the code editor it would work? I was able to just go into the code editor on my browser and delete the thing that it showing up as a red dot, and it passed the first test, I assume it would do that for the others? (If I examine your code in the devtools, it does seem that there is some extra character code in there, perhaps from your local editor?)
n1zzy
@n1zzy
Apr 10 2018 13:39
yep that worked... still don't know why but thanks @khaduch
CamperBot
@camperbot
Apr 10 2018 13:39
n1zzy sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3864 | @khaduch |http://www.freecodecamp.org/khaduch
Ken Haduch
@khaduch
Apr 10 2018 13:41
@n1zzy - what are you using for a local editor? It might have substituted or inserted a Unicode character when dealing with the HTML entities? I saw this (posting a screenshot next) in the editor.
image.png
n1zzy
@n1zzy
Apr 10 2018 13:42
@khaduch sublime text
Marvin Hsu
@mooyxu
Apr 10 2018 13:42
:)
n1zzy
@n1zzy
Apr 10 2018 13:42
with node.js as build system
zero errors every thing runs perfectly
Ken Haduch
@khaduch
Apr 10 2018 13:43
did you see the same thing? In the devtools, looking at the code as you posted it above, I see this (another screenshot)
image.png
n1zzy
@n1zzy
Apr 10 2018 13:43
yes, after deleting that it worked just fine
as I know Sublime uses UTF-8 encoding... I think
maybe should've changed it?
Ken Haduch
@khaduch
Apr 10 2018 13:45
perhaps copying and pasting from sublime into the FCC editor doesn't work cleanly? Maybe it gets some additional characters that you don't see, because of syntax highlighting or something? (I'm only guessing.)
well, anyway, glad that it worked - might be something to investigate, or at least keep an eye on it for any future exercises...
n1zzy
@n1zzy
Apr 10 2018 13:47
yeah hope this was the last exercise that required regexp xD
Ken Haduch
@khaduch
Apr 10 2018 13:48
@n1zzy - no, there will be more regexp, I'm sure...
n1zzy
@n1zzy
Apr 10 2018 13:49
( ͡ಥ ͜ʖ ͡ಥ)
Joshua Frias
@Juke-Magic
Apr 10 2018 13:50
guys help
how can i center the content inside the rectangle
the logo and all
Christian
@Neralizer
Apr 10 2018 13:51
Hey all, can anyone help me with my cel to fahr web app?
I can't seem to get the fahrenheit temp to show up in html
Joshua Frias
@Juke-Magic
Apr 10 2018 13:52
shoot i got it
Stephen James
@sjames1958gm
Apr 10 2018 13:53
@Neralizer In your devtools Uncaught TypeError: "#num".val is not a function
looks like you might be missing a $
Christian
@Neralizer
Apr 10 2018 13:57
Stephen! Thank you! @sjames1958gm
CamperBot
@camperbot
Apr 10 2018 13:57
neralizer sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9187 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Christian
@Neralizer
Apr 10 2018 13:58
commiserations on Chelsea's recent form
Tony Hudson
@ngohungphuc
Apr 10 2018 14:17
hi everyone im cant find root cause of this error can some one help me
https://github.com/react-bootstrap-table/react-bootstrap-table2
NikolaNbgd
@NikolaNbgd
Apr 10 2018 14:21
Hello folks. I have a form and I want to save my data in google sheets on submit. Form is integrated, I'm receiving data on email, but google sheets are empty. Does anyone know how can I do this? Thanks in advance.
Stephen James
@sjames1958gm
Apr 10 2018 14:31
@Neralizer Yeah. FA cup is the only hope for success this season
Darren
@DarrenfJ
Apr 10 2018 14:40
@coderNewby gotcher back. thanks!
CamperBot
@camperbot
Apr 10 2018 14:40
darrenfj sends brownie points to @codernewby :sparkles: :thumbsup: :sparkles:
:cookie: 146 | @codernewby |http://www.freecodecamp.org/codernewby
creator0323
@Amasian
Apr 10 2018 14:40

I am trying to apply my Javascript to my HTML file. If the insertion code is like following , where do I need to locate my Javascript file?thank you for your attention and precious time. :)

<script type="text/javascript" src="script.js"></script>

Stephen James
@sjames1958gm
Apr 10 2018 14:42
@Amasian The script.js file would be in the same directory as your html file
creator0323
@Amasian
Apr 10 2018 14:43
if I put HTML file in public_HTML folder, I can also put JS file in the same folder?
Marianissimus
@Marianissimus
Apr 10 2018 14:47
you can put any file wherever you like if you then link it properly @Amasian
kerafyrm02
@kerafyrm02
Apr 10 2018 14:48
typically the JS files are on the public side
creator0323
@Amasian
Apr 10 2018 14:54
@Marianissimus @sjames1958gm @kerafyrm02 thank you for your reply!
CamperBot
@camperbot
Apr 10 2018 14:54
amasian sends brownie points to @marianissimus and @sjames1958gm and @kerafyrm02 :sparkles: :thumbsup: :sparkles:
:cookie: 290 | @kerafyrm02 |http://www.freecodecamp.org/kerafyrm02
:star2: 9188 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
:cookie: 489 | @marianissimus |http://www.freecodecamp.org/marianissimus
krckyboy
@krckyboy
Apr 10 2018 15:05
So I'm trying to select an element which is generated through back-end through JavaScript (templates, modules or whatever it's called). When I try to select it through the app.js, it cannot select that generated HTML element, but from the console it can (because it has been generated at the time I type into the console). How can I actually select the element that is going to be generated (for example some SVG elements which will replace the <i> tags through back-end)? Do I use some kind of outer function that will call my code once the website has been rendered?
kerafyrm02
@kerafyrm02
Apr 10 2018 15:09
jeez
$(window).on("load", function(){
     //whatever code
});
krckyboy
@krckyboy
Apr 10 2018 15:12
That's JQuery. Is there an JS alternative? And I tried using window.onload or what it's called but it didn't work.
@kerafyrm02 Is that JQuery?
kerafyrm02
@kerafyrm02
Apr 10 2018 15:12
window.onload = function(){};
yes
krckyboy
@krckyboy
Apr 10 2018 15:13
alright I'll try right away, maybe I messed something up.
kerafyrm02
@kerafyrm02
Apr 10 2018 15:13
but this is javascript
though-- why not add jquery it's like super small file
krckyboy
@krckyboy
Apr 10 2018 15:13
@kerafyrm02 Cause I am just learning JS, don't want to jump into JQuery, as well, right now.
kerafyrm02
@kerafyrm02
Apr 10 2018 15:13
ok
krckyboy
@krckyboy
Apr 10 2018 15:14
And now when I put my code inside window.onload thingy, it says that variable which I am trying to select isn't defined.
kerafyrm02
@kerafyrm02
Apr 10 2018 15:14
has to be in same scope
which variable?
krckyboy
@krckyboy
Apr 10 2018 15:15

window.onload = function () {
    // rating stars za http://localhost:4333/en/Belgrade/Salons/Hair-care/basic-en

    var voteContainer = document.getElementsByClassName('comment-vote');
    // selektuje queue od voteContainera
    voteContainer = voteContainer[0].children[1]
    // selektuje sve zvezdice
    //var zvezdice = voteContainer.getElementsByTagName('svg');
    var probaZvezda = document.querySelectorAll(".comment-vote svg");
    var zvezdice = voteContainer.children;
    var zvezdica1 = zvezdice[0];

    voteContainer.addEventListener('click', function (event) {
        var target = event.target;
        if (target == voteContainer.children[0]) {
            console.log('zvezdica 1 kliknuta');
        } else if (target == zvezdica2) {
            console.log('zvezdica 1 kliknuta');
        } else if (target == zvezdica3) {
            console.log('zvezdica 2 kliknuta');
        } else if (target == zvezdica4) {
            console.log('zvezdica 3 kliknuta');
        } else if (target == zvezdica5) {
            console.log('zvezdica 4 kliknuta');
        }
    })

};
zvezdica1
Although ignore zvezdica2, 3, 4, etc.. I removed it intentionally.
kerafyrm02
@kerafyrm02
Apr 10 2018 15:16
zvezdica1 reads undefined?
krckyboy
@krckyboy
Apr 10 2018 15:16
VM12133:1 Uncaught ReferenceError: zvezdica1 is not defined
    at <anonymous>:1:1
kerafyrm02
@kerafyrm02
Apr 10 2018 15:17
does you element get deleted somewhere else?
krckyboy
@krckyboy
Apr 10 2018 15:17
I'm trying to call it in the console and I get that error.
Hm, should be deleted. Like, if I put it out of the window.onload (out of that scope), all that code, then it returns an element, but returns an element which is there in the html code, BEFORE rendering.
kerafyrm02
@kerafyrm02
Apr 10 2018 15:18
do
krckyboy
@krckyboy
Apr 10 2018 15:18
So I don't think it's being deleted.
Let me show you what I mean.
kerafyrm02
@kerafyrm02
Apr 10 2018 15:19
var probaZvezda = document.querySelectorAll(".comment-vote svg");
console.log(probaZvezda.length); //<-- add this
i bet it gives you 0.
krckyboy
@krckyboy
Apr 10 2018 15:20
Do you want me to do that inside window.onload or out?
kerafyrm02
@kerafyrm02
Apr 10 2018 15:21
add console.log right after that line i printed
krckyboy
@krckyboy
Apr 10 2018 15:21
No, no. I get that. Nevermind, I'll do it both ways and show you the result.
kerafyrm02
@kerafyrm02
Apr 10 2018 15:21
You showed me code- add it after var probaZvezda = document.querySelectorAll(".comment-vote svg");
krckyboy
@krckyboy
Apr 10 2018 15:21
It returns 5.
But when I try to access the variable, it shows me the error
kerafyrm02
@kerafyrm02
Apr 10 2018 15:22
ok
do this
krckyboy
@krckyboy
Apr 10 2018 15:22
5
probaZvezda
VM12421:1 Uncaught ReferenceError: probaZvezda is not defined
    at <anonymous>:1:1
(anonymous) @ VM12421:1
kerafyrm02
@kerafyrm02
Apr 10 2018 15:22
console.log(voteContainer);
hensn5250
@hensn5250
Apr 10 2018 15:22
voteContainer = voteContainer[0].children[1]// assigns singel value
var zvezdice = voteContainer.children;   //check if this element has child elements
zvezdica1 = zvezdice[0]; //if above does not have child elements, zvezdice will be 0, therefore 0[0] gives undefined
krckyboy
@krckyboy
Apr 10 2018 15:23
@kerafyrm02 That consoles out a span.queue which is a container of the star elements (SVG elements).
kerafyrm02
@kerafyrm02
Apr 10 2018 15:24
is it an array?
if it's not an array voteContainer[0] wont work
not with children anyways
hensn5250
@hensn5250
Apr 10 2018 15:24
why are you assigning voteContainer to itself?
@hensn5250 Just a moment, please. I'll look into my code.
hensn5250
@hensn5250
Apr 10 2018 15:26
@kerafyrm02 How's it going?
kerafyrm02
@kerafyrm02
Apr 10 2018 15:26
console.log(typeof voteContainer));
hi
krckyboy
@krckyboy
Apr 10 2018 15:26
@hensn5250
var voteContainer = document.getElementsByClassName('comment-vote'); // this is selecting the outer container, basically
    // selektuje queue od voteContainera
    voteContainer = voteContainer[0].children[1] // this is selecting the main container of the rating stars (I do it this way because the structure of the rating stars is similar, so just to make sure I am selecting the right one
kerafyrm02
@kerafyrm02
Apr 10 2018 15:27
do
console.log(typeof voteContainer));
hensn5250
@hensn5250
Apr 10 2018 15:27
@kerafyrm02 you helped me with a project a while back. Thanks. Everything worked out
CamperBot
@camperbot
Apr 10 2018 15:27
hensn5250 sends brownie points to @kerafyrm02 :sparkles: :thumbsup: :sparkles:
:cookie: 291 | @kerafyrm02 |http://www.freecodecamp.org/kerafyrm02
kerafyrm02
@kerafyrm02
Apr 10 2018 15:27
Nice - glad it workd out.
krckyboy
@krckyboy
Apr 10 2018 15:29
@kerafyrm02 Object, it says
kerafyrm02
@kerafyrm02
Apr 10 2018 15:29
ok yeah so voteContainer[0] wont work
just give that container an id
and use getElementById
And i take that back., it can work., but it's too ambigious.
krckyboy
@krckyboy
Apr 10 2018 15:34
I don't understand why it can console out log the voteContainer, but it cannot actually hold the value (when I type voteContainer in the console).
Amal Shukla
@amal1994
Apr 10 2018 15:36
@NJM8 - they are tied together in the same folder
kerafyrm02
@kerafyrm02
Apr 10 2018 15:37
i dont understand your question
well i have to go soon
krckyboy
@krckyboy
Apr 10 2018 15:38
@kerafyrm02
window.onload = function () {
    // rating stars za http://localhost:4333/en/Belgrade/Salons/Hair-care/basic-en

    // selecting container of queue
    var voteContainer = document.getElementsByClassName('comment-vote');
    // selecting queue (queue is the container of all stars
    voteContainer = voteContainer[0].children[1];
    console.log(voteContainer); // it returns .queue element
    // selecting all stars
    //var zvezdice = voteContainer.getElementsByTagName('svg');
    var zvezdice = voteContainer.children;
    var zvezdica1 = voteContainer.children[0];
    console.log(zvezdica1); // this prints out the correct element (the generated SVG)
    var zvezdica2 = voteContainer.children[1];
    var zvezdica3 = voteContainer.children[2];
    var zvezdica4 = voteContainer.children[3];
    var zvezdica5 = voteContainer.children[4];

    voteContainer.addEventListener('click', function (event) {
        var target = event.target;
        if (target == zvezdica1) {
            console.log('zvezdica 1 has been clicked'); // this doesn't go off when being clicked
        } else if (target == zvezdica2) {
            console.log('zvezdica 1 kliknuta'); // neither does this
        }
    })


};
Nate Mallison
@NJM8
Apr 10 2018 15:39
@amal1994 And what about from the users point of view? I guess what I'm getting at is just thinking about how the user gets to your app. If it appears separate to them than you would be more open to changes, but if there is seamless transition between app and page then you could easily make it static without affecting user experience
kerafyrm02
@kerafyrm02
Apr 10 2018 15:39
So this issue is the click event?
krckyboy
@krckyboy
Apr 10 2018 15:39
@kerafyrm02 The console.log parts are correct. They correct elements are being printed out to the console. But when I try to actually select the variable, it says undefined (when I try to get the zvezdica1 to the console by calling it, for example).
kerafyrm02
@kerafyrm02
Apr 10 2018 15:40
your message reads "console.log(zvezdica1); // this prints out the correct element (the generated SVG)"
krckyboy
@krckyboy
Apr 10 2018 15:41
Yes, and when I type in zvezdica1 to the console, it gives me that it hasn't been defined.
kerafyrm02
@kerafyrm02
Apr 10 2018 15:41
so im confused. Does it print out the element or does it say undefined?
krckyboy
@krckyboy
Apr 10 2018 15:41
One second, gif incoming.
@kerafyrm02
window.onload = function () {
    // rating stars za http://localhost:4333/en/Belgrade/Salons/Hair-care/basic-en

    // selecting container of queue
    var voteContainer = document.getElementsByClassName('comment-vote');
    // selecting queue (queue is the container of all stars
    voteContainer = voteContainer[0].children[1];
    console.log(voteContainer); // it returns .queue element
    // selecting all stars
    //var zvezdice = voteContainer.getElementsByTagName('svg');
    var zvezdice = voteContainer.children;
    var zvezdica1 = voteContainer.children[0];
    console.log(zvezdica1); // this prints out the correct element (the generated SVG)
    var zvezdica2 = voteContainer.children[1];
    var zvezdica3 = voteContainer.children[2];
    var zvezdica4 = voteContainer.children[3];
    var zvezdica5 = voteContainer.children[4];

    voteContainer.addEventListener('click', function (event) {
        var target = event.target;
        if (target == zvezdica1) {
            console.log('zvezdica 1 has been clicked'); // this doesn't go off when being clicked
        } else if (target == zvezdica2) {
            console.log('zvezdica 1 kliknuta'); // neither does this
        }
    })


};
That being the code.
And one thing to mention, if I run all of this code out of the window.onload function, it runs, but it selects the wrong elements (the ones from the page source, not the dynamically generated SVG elements).
kerafyrm02
@kerafyrm02
Apr 10 2018 15:44
If you just type in the variable into the console log like that
it has to be a part of the window object
if you are wanting to see it that way
then do
window.zvezdica1 = zvezdica1;
but- word of caution- don't clutter your window object with variables.- you almost never want to do this
Subhankar paul
@Decoder-Paul
Apr 10 2018 15:46
@NikolaNbgd I suppose google apps script might help
kerafyrm02
@kerafyrm02
Apr 10 2018 15:46
you have to add that code inside that function
after zvezdia1 has been defined
krckyboy
@krckyboy
Apr 10 2018 15:47
Yeah, I see that. Hm.
kerafyrm02
@kerafyrm02
Apr 10 2018 15:47
What's your objective?
krckyboy
@krckyboy
Apr 10 2018 15:48

@kerafyrm02 Hm, it's a bit confusing.

Right, my objective is to select each of the stars (5 stars), and make the rating system with stars. When a user click on a 3rd star, for example, then first three stars will be colored.

kerafyrm02
@kerafyrm02
Apr 10 2018 15:48
ok all JS right?
krckyboy
@krckyboy
Apr 10 2018 15:49
@kerafyrm02 Yup. Well the project uses JQuery, but I really want to use JS since I am learning it.
And the problem was not being able to select the rendered (new) objects.
Like, in page source, there are no SVG elements (in HTML, obviously), but when the page renders, the part of the page looks like this.. and notice the <i> elements being commented out.

@kerafyrm02 I'm not running away from JQuery, I will have to learn it, but I'd really like to stick to JS, just so I understand it all step by step.

So the first problem was selecting those rendered SVGs, and with window.onload, it works, but I couldn't manipulate those variables (zvezdica1) I thought, since it returns undefined, right? But now you say that window.zvezdica isn't a good practice to use, so what should be my next step?

@kerafyrm02 Thank you so much for the help you provided so far.
CamperBot
@camperbot
Apr 10 2018 15:52
krckyboy sends brownie points to @kerafyrm02 :sparkles: :thumbsup: :sparkles:
:cookie: 292 | @kerafyrm02 |http://www.freecodecamp.org/kerafyrm02
krckyboy
@krckyboy
Apr 10 2018 15:52
@hensn5250 Also thanks for pointing that out, the single value thingy.
@hensn5250 Thanks
CamperBot
@camperbot
Apr 10 2018 15:52
krckyboy sends brownie points to @hensn5250 :sparkles: :thumbsup: :sparkles:
:cookie: 327 | @hensn5250 |http://www.freecodecamp.org/hensn5250
kerafyrm02
@kerafyrm02
Apr 10 2018 15:52
<div id="review_container">
 <div class="review_container">
  <div class="stars_container"></div>
 </div>
 <div class="review_container">
  <div class="stars_container"></div>
 </div>
</div>
if you're looking to make something like reviews with stars here's a basic example
the reason it becomes svg afterwards is because you have a JS file thats doing it
most likely a 3rd party js file
krckyboy
@krckyboy
Apr 10 2018 15:54
Is that font awesome doing it?
Since it's fa fa-star.
It doesn't matter, anyway.
kerafyrm02
@kerafyrm02
Apr 10 2018 15:54
you could disable it to find it
krckyboy
@krckyboy
Apr 10 2018 15:54
Alrighty.
kerafyrm02
@kerafyrm02
Apr 10 2018 15:55
in your <head> section look for different <script src=""> lines
it would have to be one of those js files
but anyways with that review example
you could just make your own
krckyboy
@krckyboy
Apr 10 2018 15:59
@kerafyrm02 Actually, this DOES work.
voteContainer.addEventListener('click', function (event) {
        var target = event.target;
        if (target == zvezdica1) {
            console.log('star 1 / zvezdica1 has been clicked'); // this WORKS now
        } else if (target == zvezdica2) {
            console.log(event.target);
            console.log('zvezdica2 / star 2 has been clicked'); // this TOO
        }
    })
@kerafyrm02 Is it a good practice to use window.zvezdica1 = zvezdica1; just so you would try to debug in the first phase of coding?
kerafyrm02
@kerafyrm02
Apr 10 2018 16:03
no
just add
debugger;
in your code
Bozhidar Dimitrov
@phiratio
Apr 10 2018 16:04
what was the name of that type of number
2.5
number with .
25/2 is decimal
what was 2.5 called
kerafyrm02
@kerafyrm02
Apr 10 2018 16:04
huh?
Bozhidar Dimitrov
@phiratio
Apr 10 2018 16:04
i need it for function naming
kerafyrm02
@kerafyrm02
Apr 10 2018 16:04
i dont understand your question
Bozhidar Dimitrov
@phiratio
Apr 10 2018 16:05
how do you name this number 2.6
number who is not round
kerafyrm02
@kerafyrm02
Apr 10 2018 16:05
var ?
parseFloat
Bozhidar Dimitrov
@phiratio
Apr 10 2018 16:05
in english/math term
float
yep
thx
kerafyrm02
@kerafyrm02
Apr 10 2018 16:05
yup
i have to go-- later ppl
krckyboy
@krckyboy
Apr 10 2018 16:08
@kerafyrm02 Take care. Thanks again for everything.
CamperBot
@camperbot
Apr 10 2018 16:08
krckyboy sends brownie points to @kerafyrm02 :sparkles: :thumbsup: :sparkles:
api offline
Bozhidar Dimitrov
@phiratio
Apr 10 2018 16:10
hm how to call function that prepares some input to be sent as data(POST request)
prepareInputForSend?
alpox
@alpox
Apr 10 2018 16:14
@phiratio doesn't sound bad. or transformInput or so
Bozhidar Dimitrov
@phiratio
Apr 10 2018 16:14
i settled to prepareDataToBeSent
because it makes data in form which will be sent
that naming is killing me sometimes
Christopher Cardoso
@kriscard
Apr 10 2018 16:27
Hi guys ! I created a bootstrap modal with a Youtube video on it but when I close the modal the Youtube video still playing. I try many things with Jquery but it doesn’t work. Do you have some tips to stop a YT video when you close a modal please? Thanks in advance for your answer
Christopher Cardoso
@kriscard
Apr 10 2018 17:06
Thanks :)
Norvin Burrus
@ndburrus
Apr 10 2018 17:10
@kriscard you're welcome! enjoy :sparkles:
Bozhidar Dimitrov
@phiratio
Apr 10 2018 17:43
how can i confirm current action with y/n in console?
Eric Weiss
@eweiss17
Apr 10 2018 18:30
explain?
CamperBot
@camperbot
Apr 10 2018 18:30

freeCodeCamp Wiki:

:point_right: The freeCodeCamp wiki can be found on our forum.
Please follow the link and search there.
alpox
@alpox
Apr 10 2018 18:31
@phiratio just write y and enter
Nate Mallison
@NJM8
Apr 10 2018 18:51
y
there
:smile:
Botenga
@Botenga
Apr 10 2018 19:52
hey can anyone help me with an issue i have been having with my form. Im trying to add the values of the delivery information in my delivInfo object. Then display it on the bottom where it says Deliver To.
Amit Patel
@AmitP88
Apr 10 2018 19:59

hey guys, I'm trying to change the color of the minutes circle depending on which radio button the user clicks on (work = red color or break = blue color). However, I can't seem to get it to work and I've tried console.logging to see what's going on but it seems fine

https://codepen.io/AmitP88/pen/ZxWRmx?editors=0010

Markus Kiili
@Masd925
Apr 10 2018 20:04
@AmitP88 You have some errors on the browser developer tools console.
creator0323
@Amasian
Apr 10 2018 20:04
how can I get my current address with latitude and longitude information? Do I need to use another API for that? if so, What could it be? thank you!
Gulsvi
@gulsvi
Apr 10 2018 20:05
@Botenga Remove .value, it should be: delivSummary.innerHTML += "<p>" + delivInfo[prop] + "</p>";
Amit Patel
@AmitP88
Apr 10 2018 20:07

@Masd925 oh I know about those

<circle> attribute r: Unexpected end of attribute. Expected length, "".

Those errors were there before though when I was getting my minutes and seconds circles working. I don't think there's a way around them, since I have to definite the attribute in my javascript based on the minutes and seconds

Markus Kiili
@Masd925
Apr 10 2018 20:09
@AmitP88 ok
Botenga
@Botenga
Apr 10 2018 20:10
@gulsvi thanks
CamperBot
@camperbot
Apr 10 2018 20:10
botenga sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2698 | @gulsvi |http://www.freecodecamp.org/gulsvi
Botenga
@Botenga
Apr 10 2018 20:12
But one question why after it prints the object it displays undefine under it?
Gulsvi
@gulsvi
Apr 10 2018 20:13
@AmitP88 I think you need to hook up an onclick event, something like this as an example:
minute_stroke.style.stroke = "#af111c";

work_button.onclick = changeProgressBarColor;
break_button.onclick = changeProgressBarColor;

function changeProgressBarColor() {
  if (work_button.checked) {
    minute_stroke.style.stroke = "#af111c"; // red
  } else if (break_button.checked) {
    minute_stroke.style.stroke = "#00CED1"; // blue
  }
}
@Botenga That's from your console.log - comment out the line after and you won't get undefined
    for(prop in delivInfo){
        delivSummary.innerHTML += "<p>" + delivInfo[prop]+ "</p>";
        // console.log(delivSummary.innerHTML += "<p>" + delivInfo.prop + "</p>");
    }
Amit Patel
@AmitP88
Apr 10 2018 20:14
@gulsvi ooooh I see. That makes sense. I thought I wouldn't need to use onclick since I was checking for work_button.check, but i'll give it a shot
Gulsvi
@gulsvi
Apr 10 2018 20:16
onchange may be better since those are checkboxes - I'm not 100% sure of the best practice there, but onclick works for me. Something has to trigger your javascript to actually go and see which one is checked, otherwise, it only runs once on page load.
Botenga
@Botenga
Apr 10 2018 20:16
yea it work
*worked
Gulsvi
@gulsvi
Apr 10 2018 20:16
Glad you got it
Amit Patel
@AmitP88
Apr 10 2018 20:22
@gulsvi I understand now. thanks for your help :)
so basically even with radio buttons, onclick still has to be used (as opposed to radio.checked), and now I know why
CamperBot
@camperbot
Apr 10 2018 20:22
amitp88 sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2699 | @gulsvi |http://www.freecodecamp.org/gulsvi
Gulsvi
@gulsvi
Apr 10 2018 20:27
Glad that helped!
Alexander R Bott
@Abott1222
Apr 10 2018 20:29
@Amasian you need the browser geolocation api
creator0323
@Amasian
Apr 10 2018 20:33
@Abott1222 I figured out latitude and logitude of current location. but i don't know where can I get the address correspond to the latitude and longitude and how to connect them. all of these are possible only using Geolocation API?
Markus Kiili
@Masd925
Apr 10 2018 20:35
@Amasian I think that Google maps has an api that gives an address from coordinates.
Gulsvi
@gulsvi
Apr 10 2018 20:36
@Amasian It's more difficult to get a city name from a latitude/longitude. I assume this is for the weather project, and if so, many weather APIs include the city name in the response. Otherwise, check out "Reverse Geocoding" in the Google Maps JavaScript API
creator0323
@Amasian
Apr 10 2018 20:37
@gulsvi Yes, I am working on FFC local weather app project. I really appreciate your help!
@Masd925 thank you for your precious reply!
CamperBot
@camperbot
Apr 10 2018 20:37
amasian sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4773 | @masd925 |http://www.freecodecamp.org/masd925
Gulsvi
@gulsvi
Apr 10 2018 20:38
@Amasian In that case, yes, the FCC Weather API gives you the city name, so no need to do any reverse geocoding :)
creator0323
@Amasian
Apr 10 2018 20:38
@gulsvi thank you again :)
CamperBot
@camperbot
Apr 10 2018 20:38
amasian sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2700 | @gulsvi |http://www.freecodecamp.org/gulsvi
Gulsvi
@gulsvi
Apr 10 2018 20:59
Here's how to do it with the Google Maps JavaScript API: https://codepen.io/gulsvi/pen/JLzdRb?editors=0010
Jefferson
@jeffersonnnn
Apr 10 2018 21:30
Hi guys, does anyone know what tech I need to add to React and Redux build a Twitter web client?
Gulsvi
@gulsvi
Apr 10 2018 21:35
@jeffersonnnn Depends on the features you want. You might want to read how Twitter Engineering built Twitter Lite with React, Redux, and more: https://blog.twitter.com/engineering/en_us/topics/open-source/2017/how-we-built-twitter-lite.html
creator0323
@Amasian
Apr 10 2018 21:47
Where can I study on super basic API? I am new to API and I read MDN article(https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction) explaining on the concept but i still don't get how to use them and the most of methods. Is there any web site or articles describing on real basic of API in Javascript?
Jefferson
@jeffersonnnn
Apr 10 2018 22:01
@gulsvi thanks man. That link was helpful
CamperBot
@camperbot
Apr 10 2018 22:01
jeffersonnnn sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2701 | @gulsvi |http://www.freecodecamp.org/gulsvi
Peter Steele
@PeterHSteele
Apr 10 2018 22:06
I'm trying to create a reference in the constructor of my react class using React.createRef but getting a console error that says react.createRef is not a function. Any ideas?
hey why is it saying my check is undefined on line 14.
Christopher McCormack
@cmccormack
Apr 10 2018 22:16

@Botenga legend is a sibling not sure why you're targeting it - maybe use something more specific like

var crustOpt = document.querySelectorAll("input[name='crust']");

instead

Brittany Rutherford
@brittanyrutherford
Apr 10 2018 22:16
anyone good with chrome dev tools?
Botenga
@Botenga
Apr 10 2018 22:27
@cmccormack thanks .
CamperBot
@camperbot
Apr 10 2018 22:27
botenga sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1404 | @cmccormack |http://www.freecodecamp.org/cmccormack
Gulsvi
@gulsvi
Apr 10 2018 22:31
@brittanyrutherford What's your question?
Brittany Rutherford
@brittanyrutherford
Apr 10 2018 22:31
@gulsvi sometimes I have a slider, or a dropdown list
and I want to freeze the browser while I troubleshoot a css issue
without the slider to go to the next slide
I know u can use F8 to do something similar and stop the chrome process, but it doesn't reflect the ui changes while u do them
Gulsvi
@gulsvi
Apr 10 2018 22:33
If it's a pure CSS carousel, I don't know how - if javascript moves it to the next slide, it's definitely possible with chrome dev tools
Brittany Rutherford
@brittanyrutherford
Apr 10 2018 22:34
hmm
Gulsvi
@gulsvi
Apr 10 2018 22:35
Like you said, F8 should work for the Javascript Case... unfortunately, I'm not sure if it's possible unless JS is involved. Someone else here may know perhaps
If you can share the slider/code, it might help
Christopher McCormack
@cmccormack
Apr 10 2018 22:37
You can usually have that element open in your dev tools and see if a class is changed when the carousel is moving or dropdown is clicked or whatever
Gulsvi
@gulsvi
Apr 10 2018 22:38
I wonder if the Animation Inspector would help stop everything for inspection before the next slide - depends on the implementation
Christopher McCormack
@cmccormack
Apr 10 2018 22:38
What would you get out of that though?
it's either javascript changing classes or css animations of some sort I bet, if the latter you can just browse the css
if javascript many times they make the changes by adding or removing classes instead of directly changing styles or whatever
Brittany Rutherford
@brittanyrutherford
Apr 10 2018 22:43
ummm
:(
Christopher McCormack
@cmccormack
Apr 10 2018 22:46
Do you have an example site?
Botenga
@Botenga
Apr 10 2018 22:53
var content = "hello";
if(content != undefine){
run}
eeflores
@eeflores
Apr 10 2018 22:53
undefined?
Botenga
@Botenga
Apr 10 2018 22:53
would this if statement work
if there is any content in the varaible
that what im trying to do
eeflores
@eeflores
Apr 10 2018 22:54
undefine -> undefined
Botenga
@Botenga
Apr 10 2018 22:54
->
what s that
Botenga
@Botenga
Apr 10 2018 22:55
would that if run if i did
eeflores
@eeflores
Apr 10 2018 22:55
equality operator may need to be !==
Botenga
@Botenga
Apr 10 2018 22:56
okay
Stephen James
@sjames1958gm
Apr 10 2018 22:56
@Botenga "hello" != undefined would be true
Botenga
@Botenga
Apr 10 2018 22:56
leet me give it a try
Gulsvi
@gulsvi
Apr 10 2018 22:56
use typeof to check for undefined
if (typeof content === undefined)
eeflores
@eeflores
Apr 10 2018 22:57
or in this case: if (typeof content !== undefined) {
Gulsvi
@gulsvi
Apr 10 2018 22:59
If this is for that pizza ordering app and you're checking for a property of an object, use hasOwnProperty - so confusing, so many ways to do it
Botenga
@Botenga
Apr 10 2018 23:00
hahaha
true
so many ways
include*engine
@newtothat
Apr 10 2018 23:58
wamp or xamp server?