These are chat archives for FreeCodeCamp/HelpJavaScript

26th
Apr 2018
ehutchllew
@ehutchllew
Apr 26 2018 02:12 UTC
@Keggatron might res.params.body or something like that, I forget how it's structured. just console log both the req and res objects and see what is inside them.
Stephen James
@sjames1958gm
Apr 26 2018 02:21 UTC
@Keggatron How have you configured body parser?
Ken Haduch
@khaduch
Apr 26 2018 03:59 UTC
@mgrienauer - just tried the twitch streamer app - looks good on the "not found" user stuff. The only thing that I see as a problem now is the responsive behavior, at least when shrinking the browser window width down to the smallest I can get it. Things don't hold together very well in that case. But it looks good other than that!
Michael Grienauer
@mgrienauer
Apr 26 2018 05:40 UTC
@khaduch thanks ken, yea i still havent done the media queries for mobile but i will soon
anthonygallina1
@anthonygallina1
Apr 26 2018 06:50 UTC
:)
Howdee
whirled
kiinda peaceful here
an quiet :)
Leigh Hobson
@leighhobson89
Apr 26 2018 08:37 UTC
morning guys
every iteration of the following loop overwrites my object before i push it to the array, could someone help me to tweak this script so that i can learn how to add a new 'list item' to my object each time i iterate?
function orbitalPeriod(arr) {
  console.log(arr.length);
  var newArray = [];
  var newObject = {};
  var twoPi = 2 * Math.PI;
  var GM = 398600.4418;
  var earthRadius = 6367.4447;

  for (var i=0;i<arr.length;i++) {
    var avgAlt = arr[i].avgAlt;
    var semiMajorAxis = Math.pow((earthRadius+avgAlt),3);
    var timeToOrbit = Math.round(twoPi * Math.sqrt(semiMajorAxis / GM));

    newObject.name = arr[i].name;
    newObject.orbitalPeriod = timeToOrbit;
    newArray.push(newObject);
  }

  return newArray;
}
returns:
{name: "moon", orbitalPeriod: 2377399},
{name: "moon", orbitalPeriod: 2377399},
{name: "moon", orbitalPeriod: 2377399}]
when the call is:
orbitalPeriod([{name: "iss", avgAlt: 413.6}, {name: "hubble", avgAlt: 556.7}, {name: "moon", avgAlt: 378632.553}]);
Leigh Hobson
@leighhobson89
Apr 26 2018 09:02 UTC
anyone around this morning?
Leigh Hobson
@leighhobson89
Apr 26 2018 09:10 UTC
done it, I had to move my newObject = {} declaration inside my loop.
Blauelf
@Blauelf
Apr 26 2018 09:10 UTC
@leighhobson89 Place newObject = {}; at the start of your loop. Or do something like newArray.push({ name : arr[i].name, orbitalPeriod : timeToOrbit }); without newObject.
Leigh Hobson
@leighhobson89
Apr 26 2018 09:10 UTC
cheers, i just beat you to it!
the second way is interesting, i will make a note of that for future reference
thanks @Blauelf
just a question regarding the information given in the challenge...Is there a preferential reason why they chose to set GM and earthRadius as variables rather than constants? I would have thought unchanging values like these would be more suitable as constants.
i followed suit with my twoPi variable, but I questioned it
Stephen James
@sjames1958gm
Apr 26 2018 09:21 UTC
@leighhobson89 These challenges were created pre-ES6 and const support
Leigh Hobson
@leighhobson89
Apr 26 2018 09:22 UTC
ahh
makes sense then
Michael Grienauer
@mgrienauer
Apr 26 2018 09:36 UTC
@khaduch ok ken i added some mobile responsiveness, would you mind taking one last look? i appreciate the feedback!
Ken Haduch
@khaduch
Apr 26 2018 13:14 UTC
@mgrienauer - nice improvement with the responsive behavior! The only thing that I see that's a little bit of a difficulty, and probably not too important(?) is the activity of the person who is online gets clipped, or at least I thought it did, in some situations? There was one person online "OgamingSC2" and I thought that the thing they were doing had a long description, but now it loks okay. There aren't enough samples to get a good idea of how that part of it works out, but it looks good on a reduced-width browser window. I should check it on my phone just for completeness... and it's okay there, the only thing is that each user's "block" takes up about half of the screen on a portrait mode view. Seems kind of big, but it's definitely not squishing things together... :) Nice work!
Koohyar Movassagh
@Koohyar-m
Apr 26 2018 13:40 UTC
:wave:
Jason Luboff
@JLuboff
Apr 26 2018 15:33 UTC
:wave:
Nazar
@IsaakNazar
Apr 26 2018 15:47 UTC
hey everyone :wave:
Daniel Simeonov
@dbsimeonov
Apr 26 2018 16:23 UTC
Hey guys ;)
Hope you are all well. I need a small favor or tip -
I need to select an item which is inside a parent element and if its possible to select the only child that has certain class or id?
I know I can do it with x.childNodes[3] but the problem is that I'm not sure if its gonna be always with 4th position.
Markus Kiili
@Masd925
Apr 26 2018 16:25 UTC
@dbsimeonov Iterate the x.childNodes and choose the one you need.
You can do it with for example the built-in forEach method.
Daniel Simeonov
@dbsimeonov
Apr 26 2018 16:26 UTC
aa right! thanks
Gulsvi
@gulsvi
Apr 26 2018 16:28 UTC
@dbsimeonov This is an example of finding any element on your page with a given ID:
function findElementById(elementId) {
  const DOM = document.getElementsByTagName("*");
  for(let i = 0; i < DOM.length; i++) {
    if(DOM[i].id === elementId) return DOM[i];
  } 
}
Daniel Simeonov
@dbsimeonov
Apr 26 2018 16:28 UTC
let element;
            x.childNodes.forEach(function(val){
                if(val.classList.contains('drop-menu')){
                    element = val;
                }
            })
            console.log(element);
Gulsvi
@gulsvi
Apr 26 2018 16:29 UTC
Looks good. Use a for loop instead so you can return early when the element is found.
Daniel Simeonov
@dbsimeonov
Apr 26 2018 16:29 UTC
but it gives me that val is undefined..
Markus Kiili
@Masd925
Apr 26 2018 16:29 UTC
@dbsimeonov Remove the else block.
Gulsvi
@gulsvi
Apr 26 2018 16:30 UTC
I think that return is ignored since we can't exit a foreach
edit ninja'd ;)
Daniel Simeonov
@dbsimeonov
Apr 26 2018 16:31 UTC
But still the val is not getting defined..
Gulsvi
@gulsvi
Apr 26 2018 16:32 UTC
What does x refer to?
Daniel Simeonov
@dbsimeonov
Apr 26 2018 16:32 UTC
its the item that user has clicked, and my idea is to select the child to be opened like dropdown menu
Gulsvi
@gulsvi
Apr 26 2018 16:33 UTC
Is x a single element referred to by ID, or a collection of elements?
You may need to loop through x if the latter
Daniel Simeonov
@dbsimeonov
Apr 26 2018 16:33 UTC
it returns me only 1 html li
const dropdownMenu = () =>{
    const items = document.querySelectorAll('.dropdown-item');
    items.forEach(function(x){
        x.addEventListener('click', function(){
            let element;
            x.childNodes.forEach(function(val){
                if(val.classList.contains('drop-menu')){
                    element = val;
                }
            })
        });
    })
}
thats the entire function if it makes it easier
Gulsvi
@gulsvi
Apr 26 2018 16:36 UTC
Ignore those comments lol
Daniel Simeonov
@dbsimeonov
Apr 26 2018 16:36 UTC
so if I use for loop should work?
because assigning ID is kind of complicated for me I think
Gulsvi
@gulsvi
Apr 26 2018 16:37 UTC
Just a guess, but if you're trying to access element outside of your click function(), it will be undefined
out of scope
Daniel Simeonov
@dbsimeonov
Apr 26 2018 16:38 UTC
it will be the element that its clicked, I just need the child of this element
as I said I'm able to select it with .childNode[3]
I will try with for loop now
Gulsvi
@gulsvi
Apr 26 2018 16:40 UTC
I'd need to see the HTML to debug further, just guessing at this point unfortunately
[...x.childNodes].forEach(function(val){
That may be needed to iterate through it
Gulsvi
@gulsvi
Apr 26 2018 17:11 UTC
Solution for anyone interested was to check that the classList exists before doing classList.contains()
:smile: :palm_tree: facepalm
Keegan
@Keggatron
Apr 26 2018 18:59 UTC
I'm trying to set up some validation for a redux-form that I'm using however I'm running into issues with undefined values that I'm unsure how to get out of. Here's the code:
if(values.pizzas){
    values.pizzas.map((pizza, i) => {

      if(values.pizza.details) {
        console.log(pizza)}
        if(values.pizza.details.id){
        console.log('select a size');
        errors.details.id = 'Select a size'
        }  
    })
  }
so what's happening is when I click on add a pizza in my app it add's the pizza however the details key hasn't been added to it yet so the app crashes with Uncaught TypeError: Cannot read property 'details' of undefined. Adding the details comes later when I would select size and toppings etc. So I'm at a loss for how to write this particular function
Jason Luboff
@JLuboff
Apr 26 2018 19:03 UTC
@Keggatron Shouldn't it be
if (pizza.details)...
Keegan
@Keggatron
Apr 26 2018 19:10 UTC
@JLuboff yes I'm an idiot, that is actually right however I'm still getting the error when I get to the details.id portion
Jason Luboff
@JLuboff
Apr 26 2018 19:11 UTC

I assume you changed that to be

if(pizza.details.id)...

?

Keegan
@Keggatron
Apr 26 2018 19:11 UTC
yep
updated:
if(values.pizzas){
    values.pizzas.map((pizza, i) => {

      if(pizza.details) {
        console.log(pizza)}
        if(pizza.details.id){
        console.log('select a size');
        errors.details.id = 'Select a size'
        }  
    })
  }
Jason Luboff
@JLuboff
Apr 26 2018 19:12 UTC
So at that point, pizza.details exist, right? Since it wouldn't get to that second of state,emt
Pieter Stokkink
@forkerino
Apr 26 2018 19:13 UTC
Can't wait for optional chaining to be standardized.
Keegan
@Keggatron
Apr 26 2018 19:14 UTC
yeah pizza.details exist
s
Pieter Stokkink
@forkerino
Apr 26 2018 19:14 UTC
:wave:
Jason Luboff
@JLuboff
Apr 26 2018 19:18 UTC
@forkerino :wave: I'm off to the gym but if you're still around in an hour, talk to you then!
Janina Pohorecki
@janepohorecka
Apr 26 2018 19:20 UTC
Hey guys, I am looking at somebodys code on the internet and I am trying to edit it so that it is full screen. When I change the width and height of the animation it makes it choppy. How can I adjust the wiggly animation to work on any screen size? https://codepen.io/janepoho/pen/PeNBgv?editors=1010
Michael Grienauer
@mgrienauer
Apr 26 2018 19:56 UTC
@khaduch thanks ken, really appreciate the feedback. I think since I've worked alot on styling that project I'm gonna move on to another..out of boredom haha
jusgoose
@gusd773
Apr 26 2018 20:19 UTC
can anybody tell my why my 2 (side column & main area) divs won't move next to each other? I use float left for the side column to move left of the main content area and have my widths set up correctly with margins set accordingly. Style sheets linked into the head on separate file
#content-area .side-column{
    width: 35%;
    margin: 0 2.5%;
    background: red;
    height: 600px;
}

#content-area .main-area{
    float: left;
    width: 55%;
    margin: 0 2.5%;
    background: blue;
    height: 600px;    
}
<section id="content-area">
            <div class="side-column">

            </div>
            <div class="main-area">

            </div>
        </section>
    </body>
</html>
blob
it renders this
blob
jusgoose
@gusd773
Apr 26 2018 20:43 UTC
I know i can just inline block the two divs but I think this should work
Gulsvi
@gulsvi
Apr 26 2018 20:50 UTC
@gusd773 float isn't meant to be used with block level elements as far as I know. the float property was originally designed to allow text to wrap around images
inline-block is the correct way to do it
jusgoose
@gusd773
Apr 26 2018 20:51 UTC
@gulsvi the dude in this tutorial did it without add display inline block into the two divs
@gulsvi I had to do this
#content-area .side-column{
    float: left;
    display: inline-block;
    width: 35%;
    margin: 0 2.5%;
    background: red;
    height: 600px;
}

#content-area .main-area{
    display: inline-block;
    width: 55%;
    margin: 0 2.5%;
    background: blue;
    height: 600px;    
}
Gulsvi
@gulsvi
Apr 26 2018 20:52 UTC
You could remove inline-block from that CSS, but the float will make the first element float over the second one
jusgoose
@gusd773
Apr 26 2018 20:54 UTC
@gulsvi i removed the inline block, left the float left and got this
blob
Gulsvi
@gulsvi
Apr 26 2018 20:55 UTC
Right, the red box is floating over the blue one now
You could add a float to both and they'll be side be side - that's more along the lines of how bootstrap did it in v3.3 @gusd773
#content-area .side-column {
  float: left;
  width: 35%;
  margin: 0 2.5%;
  background: red;
  height: 600px;
}

#content-area .main-area {
  float: left;  
  width: 55%;
  margin: 0 2.5%;
  background: blue;
  height: 600px;
}
jusgoose
@gusd773
Apr 26 2018 20:56 UTC
@gulsvi apologies he did have both floats thank you
Gulsvi
@gulsvi
Apr 26 2018 20:57 UTC
no problem - I don't need the brownies lol, not sure what's up with camperbot
(but much appreciated)
jusgoose
@gusd773
Apr 26 2018 20:57 UTC
@gulsvi slacking off per usual
@gulsvi inline block makes sense why they'd be next to each other but this float left magic doesn't make sense
Gulsvi
@gulsvi
Apr 26 2018 20:58 UTC
float is a bit of magic, unfortunately. Many webdevs have moved away from using floats in favor of flexbox + css grid
The latest version of bootstrap does not use floats as far as I know
===
So... my turn for a JS question :)
What's the most efficient way (in javascript) to split a sentence into individual words?
Jason Luboff
@JLuboff
Apr 26 2018 21:04 UTC
I dunno if its the most efficient...but split() is sure efficiently easy to use :P
Gulsvi
@gulsvi
Apr 26 2018 21:04 UTC
lol, yeah, but that includes punctuation unfortunately
Jason Luboff
@JLuboff
Apr 26 2018 21:05 UTC
Is it not properly spaced?
Or do you not need the period?
You can use regex with split
(if I remember correctly)
Gulsvi
@gulsvi
Apr 26 2018 21:05 UTC
Don't need periods or commas - regex, I thought, was pretty inefficient
.match(/\w+/g) works great, for example, but slow (I think)
Jason Luboff
@JLuboff
Apr 26 2018 21:06 UTC
So replace, followed by split (again., I'm not sure of the efficienceny)
Gulsvi
@gulsvi
Apr 26 2018 21:06 UTC
I'm guessing I have to use charcodes to make it super-efficient
Brad
@bradtaniguchi
Apr 26 2018 21:07 UTC
I mean were talking JS right?
Gulsvi
@gulsvi
Apr 26 2018 21:07 UTC
but then I'm excluding all east asian languages...
yeah, JS
Brad
@bradtaniguchi
Apr 26 2018 21:07 UTC
effecient should't matter unless were talking about parsing like dictionaries or something
especially in this case haha
Gulsvi
@gulsvi
Apr 26 2018 21:07 UTC
or practicing for interview whiteboarding :)
Jason Luboff
@JLuboff
Apr 26 2018 21:08 UTC
You can always test several functions and use console.time() console.timeEnd() to see there run times
Brad
@bradtaniguchi
Apr 26 2018 21:09 UTC
If its a whiteboard question, Id probably not go with regex, its harder to remember, can always be looked up, and more fault prone than doing things "more strung out". Id mention it as a possible solution, but admit youd need to double check with it. I mean yea its not to be regex pro, but cmon haha
jusgoose
@gusd773
Apr 26 2018 21:10 UTC
@gulsvi split
Jason Luboff
@JLuboff
Apr 26 2018 21:10 UTC
@bradtaniguchi What would your solution be? My first to mind is replace->split
Brad
@bradtaniguchi
Apr 26 2018 21:11 UTC
@JLuboff Yea I'd do the same thing
Gulsvi
@gulsvi
Apr 26 2018 21:11 UTC
var len = string.length;
var result = Array(len)
for (i = 0; i < len; i++) {
    result[i] = string[i];
}
that's O(n) but still includes punctuation
The problem with using split, replace, match, etc.. is it's all up to the browser implementation. If we get down to for and while loops, we know the performance of the code
jusgoose
@gusd773
Apr 26 2018 21:23 UTC
@gulsvi how would I set that up for display inline block? It wouldn't work when I added display inline block to the two divs without float and they just stacked up on top of each other
Gulsvi
@gulsvi
Apr 26 2018 21:28 UTC
@gusd773 That's a collapsing margin issue - if you put both divs on the same line of HTML, it will work
<section id="content-area">
  <div class="side-column">

  </div><div class="main-area">

  </div>
</section>
or, use a comment to take up the space:
<section id="content-area">
  <div class="side-column">

  </div><!---
--><div class="main-area">

  </div>
</section>
CSS for the HTML above:
#content-area .side-column {
  display: inline-block;
  width: 35%;
  margin: 0 2.5%;
  background: red;
  height: 600px;
} 

#content-area .main-area {
  display: inline-block;
  width: 55%;
  margin: 0 2.5%;
  background: blue;
  height: 600px;
}
jusgoose
@gusd773
Apr 26 2018 22:13 UTC
@gulsvi just when cyber life was starting to make sense
anthonygallina1
@anthonygallina1
Apr 26 2018 22:23 UTC
@gusd773 thank you
anthonygallina1
@anthonygallina1
Apr 26 2018 22:43 UTC
@bradtaniguchi Hi
jusgoose
@gusd773
Apr 26 2018 22:57 UTC
@anthonygallina1 not sure I did anything but np
anybody know the diff between in tag styling vs in a seperate sheet? Doesn't seem to be too diff but just making sure
Brad
@bradtaniguchi
Apr 26 2018 23:00 UTC
@anthonygallina1 Hello
anthonygallina1
@anthonygallina1
Apr 26 2018 23:01 UTC
The CSS tricks link and the comment on cyber life.
I was looking at my site and some of the animations werent working. I happened to pull it up on linux and chrome book today. And they the animations do work. So I identified with the "just when cyber life was starting to make sense". Comment you made. @gusd773
Hows brad?
@gusd773 @bradtaniguchi :)