These are chat archives for FreeCodeCamp/HelpFrontEnd

19th
Oct 2017
Adam Faraj
@adamfaraj
Oct 19 2017 01:13 UTC
anyone here good with resolving CORS stuff?
can anyone tell me why my navbar shadow effect isnt working?
Adam Faraj
@adamfaraj
Oct 19 2017 01:17 UTC
@akosuadenell woo NC in the house
Sorin Ruse
@sorinr
Oct 19 2017 02:32 UTC
@akosuadenell your navbar shadow is there. its only covered by the footer. try adding margin-top: 100px to the footer and you will see it
mstellaluna
@mstellaluna
Oct 19 2017 02:34 UTC
@ShionAt Hello, please be aware advertising in any of the FCC rooms is against our code of conduct which you can read here https://code-of-conduct.freecodecamp.org/. Please remove your post.
Shion
@ShionAt
Oct 19 2017 02:48 UTC
Unfortunately you do not support me
Johnny
@jtan3
Oct 19 2017 03:43 UTC
@adamfaraj what type of CORS stuff?
Adam Faraj
@adamfaraj
Oct 19 2017 04:05 UTC
@jtan3 i got it. but thanks
CamperBot
@camperbot
Oct 19 2017 04:05 UTC
adamfaraj sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 462 | @jtan3 |http://www.freecodecamp.com/jtan3
Fabien SHAN
@X140hu4
Oct 19 2017 05:51 UTC
Starting the random quote machine project yay
Has anyone recommendation for resources on AJAX and JSON?
Markus Kiili
@Masd925
Oct 19 2017 06:02 UTC
@X140hu4 MDN is a good resource. W3Schools JS material is somewhat bad but the JS ajax part seems good.
Fabien SHAN
@X140hu4
Oct 19 2017 06:03 UTC
@Masd925 Ok thanks! :)
CamperBot
@camperbot
Oct 19 2017 06:03 UTC
x140hu4 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4542 | @masd925 |http://www.freecodecamp.com/masd925
Markus Kiili
@Masd925
Oct 19 2017 06:04 UTC
@X140hu4 And jQuery docs if you use jQuery.
Adam Ayd
@adamayd
Oct 19 2017 06:09 UTC
@akosuadenell your drop shadow is working but your footer is covering it up. If I turn off the float: left; on your .sidebar you can see your nav’s drop shadow
alteducation
@alteducation
Oct 19 2017 06:16 UTC
hi could someone help me. i have made this https://www.alternativeeducation.in/learning-spaces not for profit community website with my fcc knowledge. I used a js modal window to display more information when clicked on more information. the trouble is I can only scroll the modal window when the mouse pointer is over it. this makes for terrible ux experience as the user doesnt know he/she needs to keep the mouse pointer over the modal to scroll.
Ashwin
@ashwins93
Oct 19 2017 06:30 UTC
@alteducation I think its a browser specific issue. I'm able to scroll no matter where i have my pointer. Im using firefox
Okay i found it
i mean not the solution but the bug
it happens only for some of the modals
alteducation
@alteducation
Oct 19 2017 06:33 UTC
@ashwins93 i checked with firefox the behavior is you need to scroll from inside the modal the first time before it becomes active to scroll from outside
Ashwin
@ashwins93
Oct 19 2017 06:33 UTC
@alteducation Yeah i noticed it now
alteducation
@alteducation
Oct 19 2017 06:34 UTC
@ashwins93 can you think of some possible fixes for this?
Ashwin
@ashwins93
Oct 19 2017 06:35 UTC
I'll see, i haven't seen this kind of behavior before. Most of the cases the modals fit within the viewport
first time i'm seeing modals taller than viewport
It will even more tougher with mobiles won't it?
alteducation
@alteducation
Oct 19 2017 06:36 UTC
i have given overflow:scroll to accomodate the content
In mobile the modal fits the whole width of the screen so this is not an issue
Ashwin
@ashwins93
Oct 19 2017 06:47 UTC
@alteducation The probelm is there are two scrolls one for body and one for modal. It doesn't detect the scroll for modal until the pointer is over the center modal box
the body scrollbar doesn't show because its height is set to 100vh
if you remove the 100vh you will be able to see 2 scrollbars and clearly see which scrollbar moves when
alteducation
@alteducation
Oct 19 2017 06:48 UTC
@ashwins93 yeah is there a way to disable the body scrollbar alltogether
without having two scrollbars
Ashwin
@ashwins93
Oct 19 2017 06:49 UTC
even with two scrollbars the scroll keeps defaulting to the body content
I think scroll gets triggered based on what content the pointer is pointing to
alteducation
@alteducation
Oct 19 2017 06:51 UTC
should i hide the body content when the modal is active? is that a possible solution?
Ashwin
@ashwins93
Oct 19 2017 06:52 UTC
@alteducation I will ttry that too
its not possible to hide the body content because the modal itself is nested inside
alteducation
@alteducation
Oct 19 2017 06:55 UTC
@ashwins93 shit
Ashwin
@ashwins93
Oct 19 2017 06:59 UTC
@alteducation okay i made something to wrok
try this
alteducation
@alteducation
Oct 19 2017 07:00 UTC
@ashwins93 Yeah
Ashwin
@ashwins93
Oct 19 2017 07:00 UTC
.modal-box {
   width: 70%;
    margin: 100px 15%;
}
also you might wanna remove the max-width restriction
Hold on a second
i saw that you are using bootstrap
you can try this change the class from modal-box to container modal-box
and in the modal-box css rule remove all the rules relating to width and max-width
make sure to remove the even the rules that are inherited
alteducation
@alteducation
Oct 19 2017 07:03 UTC
on this specific page actually i am not using bootstrap. its included in all pages. should i remove that>
?
Ashwin
@ashwins93
Oct 19 2017 07:05 UTC
okay forget bootstrap
i thought the scroll got triggered inside .modal-box
but i was wrong, it gets triggered only inside .modal-body because thats where the text is
the browser is determining what to scroll based on the content present i guess
Middle mouse click to scroll works though
sorry man, i'm out of idea
Ashwin
@ashwins93
Oct 19 2017 07:10 UTC
ideas*
alteducation
@alteducation
Oct 19 2017 07:11 UTC
@ashwins93 this is a weird situation altogether. many users will think the site is broken. I think i should get away from using modals and generate specific pages for each card. I'm using jekyll to generate this page from a data.json file. Currently I dont know how to generate pages from data file in jekyll. have you worked with static site genarators?
Ashwin
@ashwins93
Oct 19 2017 07:11 UTC
@alteducation nope i haven't
you could move the scroll bar to the modal-box to signal the users that they need to scroll inside modal box
alteducation
@alteducation
Oct 19 2017 07:12 UTC
@ashwins93 thanks for working on helping the community. Really appreciate it.
CamperBot
@camperbot
Oct 19 2017 07:12 UTC
alteducation sends brownie points to @ashwins93 :sparkles: :thumbsup: :sparkles:
:cookie: 379 | @ashwins93 |http://www.freecodecamp.com/ashwins93
Ashwin
@ashwins93
Oct 19 2017 07:12 UTC
by setting the modal-box max-height to 100vh and setting the overflow to scroll
Lol but i was of no help
alteducation
@alteducation
Oct 19 2017 07:14 UTC
@ashwins93 that is an ugly hack :smile: I will look into creating specific pages and getting rid of modals.
Ashwin
@ashwins93
Oct 19 2017 07:15 UTC
Yeah that sounds good
In general i believe modals can be displayed if they are within the viewport
if there is content taller than view port height, then it does deserve a separate content area
You can however place all the modal content you have below all the cards and hide it when the page loads
whenever the user clicks a card, you can just $('.cards').fadeOut() and then ('#specifccontent').fadeIn()
alteducation
@alteducation
Oct 19 2017 07:17 UTC
@ashwins93 will try that. that seems like a good solution
Ashwin
@ashwins93
Oct 19 2017 07:17 UTC
in which case you don't have to create a separate page and make a server request
Ghost
@ghost~580ed9c0d73408ce4f309ef0
Oct 19 2017 07:18 UTC
Hello world
Anyone here to help
alteducation
@alteducation
Oct 19 2017 07:18 UTC
@vipuldcoder yeah vipul
Ghost
@ghost~580ed9c0d73408ce4f309ef0
Oct 19 2017 07:18 UTC
Hii @alteducation
Happy Diwali
A festival of lights
Do you have experience in bootstrap
???
alteducation
@alteducation
Oct 19 2017 07:19 UTC
@vipuldcoder little. I will look into your issue
Ghost
@ghost~580ed9c0d73408ce4f309ef0
Oct 19 2017 07:20 UTC
OK issue is of responsive
Ashwin
@ashwins93
Oct 19 2017 07:20 UTC
@vipuldcoder Post your code or a link to codepen
Ghost
@ghost~580ed9c0d73408ce4f309ef0
Oct 19 2017 07:20 UTC
Ashwin
@ashwins93
Oct 19 2017 07:21 UTC
ask for specific issues and please don't ask to ask
Ghost
@ghost~580ed9c0d73408ce4f309ef0
Oct 19 2017 07:21 UTC
Check share link
You get to know
Ashwin
@ashwins93
Oct 19 2017 07:21 UTC
@vipuldcoder Okay i saw it, if you are using bootstrap
you can specify multiple classes
Ghost
@ghost~580ed9c0d73408ce4f309ef0
Oct 19 2017 07:21 UTC
Like
Ashwin
@ashwins93
Oct 19 2017 07:22 UTC
like <div class="col-12 col-sm-9 col-md-6 col-lg-4"
Ghost
@ghost~580ed9c0d73408ce4f309ef0
Oct 19 2017 07:22 UTC
If you
Ashwin
@ashwins93
Oct 19 2017 07:23 UTC

What that code means is that the column will be displayed with a width of

12 columns in very small devices
9 columns on small devices
6 columns on medium devices
4 columns on large devices

when you resize the browser the column will wrap instead of slimming down
Ghost
@ghost~580ed9c0d73408ce4f309ef0
Oct 19 2017 07:24 UTC
Wait let me
Ashwin
@ashwins93
Oct 19 2017 07:25 UTC
okay i see you are using Boostrap 3.3.7
Ghost
@ghost~580ed9c0d73408ce4f309ef0
Oct 19 2017 07:25 UTC
But one can also have one more issue
Yes
Ashwin
@ashwins93
Oct 19 2017 07:26 UTC
the link i sent you is for 4.0.0-beta
Ghost
@ghost~580ed9c0d73408ce4f309ef0
Oct 19 2017 07:26 UTC
Hmm
Ashwin
@ashwins93
Oct 19 2017 07:27 UTC
for 3.3.7 the responsive classes are same
Ghost
@ghost~580ed9c0d73408ce4f309ef0
Oct 19 2017 07:27 UTC
OK
Ashwin
@ashwins93
Oct 19 2017 07:28 UTC
you need to give the classes to the parent container of the element that needs to be responsive
Ghost
@ghost~580ed9c0d73408ce4f309ef0
Oct 19 2017 07:28 UTC
Like
Ashwin
@ashwins93
Oct 19 2017 07:28 UTC
I saw that you have give the col-sm-12 to the div that contains 3 images together
Ghost
@ghost~580ed9c0d73408ce4f309ef0
Oct 19 2017 07:28 UTC
Hmm
Ashwin
@ashwins93
Oct 19 2017 07:28 UTC
what that means is that the 3 images will always stay in a single row irrespective of the width of the viewport
if you want the images to wrap to the next row in case of smaller widths you need to give a class to each of the images
Ghost
@ghost~580ed9c0d73408ce4f309ef0
Oct 19 2017 07:29 UTC
Like
Eating food
Ghost
@ghost~580ed9c0d73408ce4f309ef0
Oct 19 2017 07:42 UTC
Hello
Adam Faraj
@adamfaraj
Oct 19 2017 08:01 UTC
disregarding style/looks and focusing on functionality, what are your guys opinion on this
Jake
@JakeDVirus
Oct 19 2017 08:08 UTC
Out of Adobe CC photoshop and Adobe CC Muse, which Software is best for making mockups? The concern is "Excellence of mockup" not "ease of making it".
P.S. : Muse is known for making responsive prototype
Adam Faraj
@adamfaraj
Oct 19 2017 08:10 UTC
@NeelDVirus Dreamweaver?
Jake
@JakeDVirus
Oct 19 2017 08:11 UTC
@adamfaraj there is some reason i dont want to go for dreamweaver. i want to go for either photoshop or muse
Adam Faraj
@adamfaraj
Oct 19 2017 08:12 UTC
@NeelDVirus probably muse then
Jake
@JakeDVirus
Oct 19 2017 08:12 UTC
@adamfaraj sketchapp is only for mac i guess
@adamfaraj yeah i was thinking that too. does Muse has any limitation as compared to photoshop cc
Adam Faraj
@adamfaraj
Oct 19 2017 08:20 UTC
@NeelDVirus honestly dont know. i don't use that stuff. i just go at it from scratch
Jake
@JakeDVirus
Oct 19 2017 08:22 UTC
@adamfaraj oh thats ok. thanks anyways
CamperBot
@camperbot
Oct 19 2017 08:22 UTC
neeldvirus sends brownie points to @adamfaraj :sparkles: :thumbsup: :sparkles:
:cookie: 290 | @adamfaraj |http://www.freecodecamp.com/adamfaraj
Lone programmer?
@MateoCzyzewski
Oct 19 2017 09:20 UTC
Hello
Henry
@GitHub-Henry
Oct 19 2017 11:05 UTC
any pug aficionados around
rscales02
@rscales02
Oct 19 2017 11:59 UTC
can someone take a look at this codepen and help me understand why nothing is addint to my display?https://codepen.io/rscales02/pen/NaoYpO?editors=1010
also, if someone knows the css trick to move that bottom row left all of like 3px that would be helpful
Markus Kiili
@Masd925
Oct 19 2017 12:08 UTC
@rscales02 The toDisplay function is not on the global scope and those onclick calls cannot call it.
You can place is outside the onload callback.
rscales02
@rscales02
Oct 19 2017 12:09 UTC
@Masd925 it wasn't working without the on load function, now it is... thanks
CamperBot
@camperbot
Oct 19 2017 12:09 UTC
rscales02 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4543 | @masd925 |http://www.freecodecamp.com/masd925
Markus Kiili
@Masd925
Oct 19 2017 12:11 UTC
@rscales02 Best way would be to use addEventListener for handling the click events.
rscales02
@rscales02
Oct 19 2017 12:14 UTC
isn't that covered with the onclick in my html?
Markus Kiili
@Masd925
Oct 19 2017 12:18 UTC
@rscales02 Yes, but you have to use global variables and place some code outside the onload callback for easy fix. Modern way would be to bind the handlers on JS inside an onload handler. That way you can be sure that the DOM is ready to be manipulated.
rscales02
@rscales02
Oct 19 2017 12:41 UTC
so add an event listener like document.getElementByClass('keys').addEventListener('click', toDisplay(9))?
but adding that inside the onload breaks everything, and I am not sure how I would pull the value from each button
would I need to set an id for each separate button and a different event handler?
rscales02
@rscales02
Oct 19 2017 12:50 UTC
upon loading that now sets display to 9 before any click occurs...
Markus Kiili
@Masd925
Oct 19 2017 12:50 UTC
@rscales02 The method is getElementsByClassName and it returns an array-like object that has those elements as elements. You can loop it and assign event handlers to those elements. Even better is to add the click handler to the mother element if possible and inside the callback check what child element (button) was clicked.
rscales02
@rscales02
Oct 19 2017 12:53 UTC
You have totally lost me... add the click handler to the mother element? what is that in this case?
Markus Kiili
@Masd925
Oct 19 2017 12:55 UTC
@rscales02 Some element that contains those buttons. Not sure that is the way to go in this case. Maybe you just loop those element and add the click handlers.
rscales02
@rscales02
Oct 19 2017 13:06 UTC
ok thanks @Masd925
CamperBot
@camperbot
Oct 19 2017 13:06 UTC
rscales02 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
api offline
Ashwin
@ashwins93
Oct 19 2017 13:22 UTC

so add an event listener like document.getElementByClass('keys').addEventListener('click', toDisplay(9))?

the second argument to a listener should be a callback

eric777717
@eric777717
Oct 19 2017 13:23 UTC
Hi Guys!!! I have problems with the follow Pastbin "Build a Personal Portfolio Webpage"
Somebody can help me?
Ken Haduch
@khaduch
Oct 19 2017 13:55 UTC
@eric777717 - you should post a URL or something that people can have a look at. And specific questions about what you have problems with. The easiest way for people to help is if you put your page on CodePen - it's an easier way for people to look at it and offer help.
Spyrantis Theodoros
@thodorisanta
Oct 19 2017 14:53 UTC

okay so i started my "simon game" project and i wanna ask if i should have the #innerCirlce's div inside the #outerCircle's div. And what difference will it make?

https://codepen.io/oshikurou/pen/wrNMjM?editors=1100

Juli Cheng
@julicheng
Oct 19 2017 15:16 UTC

hi there! could someone help me? I'm trying to make my navbar menu items at the top align to the right but it won't let me when i justify-content-end (bootstrap). here is the link to my site

and here is the code for my navbar

<nav class="navbar navbar-expand-lg fixed-top">
            <!-- logo -->
          <a class="navbar-brand" href="#"><img src="logo.png" width="30" height="30" class="icon-img d-inline-block align-top" alt="logo"></a>
          <!-- hamburger button -->
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fa fa-bars" aria-hidden="true"></i>
          </button>

          <div class="collapse navbar-collapse navbar-right" id="navbarTogglerDemo02">
            <ul class="navbar-nav mr-auto mt-2 mt-lg-0 justify-content-end">
              <li class="nav-item">
                <a class="nav-link" href="#home">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#projects">Projects</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#contact">Contact</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="https://juliscodingadventure.wordpress.com/" target="_blank">Blog</a>
                </li>
            </ul>
          </div>
        </nav>
        <!-- navbar end -->
Alexx Martínez
@AlexxMart
Oct 19 2017 15:50 UTC
Hello guys, I've been struggling with the challenge "Inventory Update". I've run a loop to add the items to the new inventory but when it finds an existing item is not just adding the amounts as it should, but it adds the whole item as if it doesn't exist
my code:
function updateInventory(arr1, arr2) {
    // All inventory must be accounted for or you're fired!
    var v = arr1;
  for(var i = 0; i < arr2.length; i++){
  if(arr2[i][1] == arr1[i][1]){
    v.push([arr1[i][0] + arr2[i][0], arr1[i][1]]);
  } else {
    v.push(arr2[i]);
  }
  }

  return v;
}

// Example inventory lists
var curInv = [
    [21, "Bowling Ball"],
    [2, "Dirty Sock"],
    [1, "Hair Pin"],
    [5, "Microphone"]
];

var newInv = [
    [2, "Hair Pin"],
    [3, "Half-Eaten Apple"],
    [67, "Bowling Ball"],
    [7, "Toothpaste"]
];

updateInventory(curInv, newInv);
I tried adding just the name of the items to a new array, but then I don't know how to add the stock of each item once the names have been sorted. Because when the amount is added, ".sort()" doesn't work anymore
Hi guys!! I have problems with this binpass above... I dont undestanding very welll what a really need to do.. First of all, the Java Script and the CSS is difficult to my understanding,
I will aprecciate if someone can help me with that
Sorin Ruse
@sorinr
Oct 19 2017 17:21 UTC
@julicheng add in css:
.navbar-nav{
width: 100%;
}
Juli Cheng
@julicheng
Oct 19 2017 17:28 UTC
@sorinr thanks so much! worked like a charm :sparkles: :smile:
CamperBot
@camperbot
Oct 19 2017 17:28 UTC
julicheng sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1342 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Oct 19 2017 17:28 UTC
@julicheng :+1:
Jessie Cryer
@j-cryer
Oct 19 2017 18:02 UTC
what up what up what up
hey does anyone know an easy way to float a larger version of an image while hovering over said image?
Christopher McCormack
@cmccormack
Oct 19 2017 18:15 UTC
@j-cryer I used something like this:
.thumbnail {
...
  transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
}
.thumbnail:hover {
...
  transform: scale(1.6);
  z-index: 5;
}
You can also put the transition on the hover itself
Onome Sotu
@onomesotu
Oct 19 2017 19:10 UTC
Hello
can anyone help with Javascript api and geo location?
i am trying to pass the var latitude and longitude to the API call, but the variables aren't passed until the user clicks the button again
albertsundjaja
@albertsundjaja
Oct 19 2017 19:17 UTC
what's the general best practice for uploading file to a server? would there be a problem if I use html form input file type? what's the benefit of using ajax to upload files?
Spyrantis Theodoros
@thodorisanta
Oct 19 2017 19:29 UTC

how can i align those squares to be in an order:
1 2
3 4 ??

https://codepen.io/oshikurou/pen/dVaErG?editors=1100

Sorin Ruse
@sorinr
Oct 19 2017 19:48 UTC
@thodorisanta this is what you want to achieve?
Spyrantis Theodoros
@thodorisanta
Oct 19 2017 19:48 UTC
@sorinr right now yes, then im about to turn it to a circle
i think i kinda suck at understanding css
Sorin Ruse
@sorinr
Oct 19 2017 19:50 UTC
@thodorisanta so u want it rounded as one object?
Spyrantis Theodoros
@thodorisanta
Oct 19 2017 19:52 UTC

@sorinr well my final destination is to make them look like those colors in the "simon game" project. thats what im working on now.

https://codepen.io/Em-Ant/full/QbRyqq/

Matej Bošnjak
@mbosnjak01
Oct 19 2017 20:03 UTC
@thodorisanta https://codepen.io/fcccder/pen/YrBoRY check this one
u have to open it :)
OlegVetn
@OlegVetn
Oct 19 2017 20:19 UTC
Всем привет:) Я тут поинтересоваться хотел. Где бы я мог ознакомиться с общими правилами чата 'gitter'?
Could I send an information that not related with programming? And where can I acquainted with rules of this chat?
For instance, if I want to share this video https://www.youtube.com/watch?v=ldK9qvRBkMI to this group.
get acquainted*
quickspeedy
@quickspeedy
Oct 19 2017 20:46 UTC

When I return an object using AJAX call, it returned undefined. Why is that?

function loadSunTime() {
  var URL = "https://api.wunderground.com/api/800715b6ce08dbb1/astronomy/q/IL/Rockford.json"
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if(this.readyState == 4 && this.status == 200) {
      return JSON.parse(this.responseText);
    }
  }
  xhttp.open("GET", URL, true);
  xhttp.send();
}

//ignore the parameter for getWeatherData()
function getWeatherData(jsonObject) {
  var sunJsonObject = loadSunTime();
  console.log("Sun object: " + sunJsonObject);
}

Here is the link to codepen: https://codepen.io/quickspeedy/pen/XeomjK

alpox
@alpox
Oct 19 2017 20:55 UTC
@quickspeedy You return the object from the inner function, not the outer function. Because you get the response in a callback (Much later time than you call the function), this data cannot be returned synchronously. The function body of loadSunTime is already handled and left when your data arrives. Also your console.log in getWeatherData already happened at the point when you get your data
quickspeedy
@quickspeedy
Oct 19 2017 20:58 UTC
Oh ok thanks for the explaination. @alpox I have been researching on how to force a function to stay synchronously, would promise method work in this situation?
CamperBot
@camperbot
Oct 19 2017 20:58 UTC
quickspeedy sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1369 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Oct 19 2017 20:59 UTC
@quickspeedy You cannot force a function to stay synchronous when it has to work asynchronous.
quickspeedy
@quickspeedy
Oct 19 2017 20:59 UTC
All right. Got it. Will have to rewrite my code in another way.
alpox
@alpox
Oct 19 2017 20:59 UTC
The thing that comes (for the eye) closest, would be the ES7 async/await syntax - which is generators and promises behind the scenes and makes the code READ like synchronous even though its NOT
@quickspeedy Promises are one way to handle such a case though, that you see right. But it doesn't make, by any means, make your code synchronous
@quickspeedy Another way is the "old-school-way" which you should maybe learn first - and is widely used
Even though promises are today the better interface, you have to know how callbacks work
quickspeedy
@quickspeedy
Oct 19 2017 21:01 UTC
Ok thanks for the advice @alpox Definitely appreciated it!
CamperBot
@camperbot
Oct 19 2017 21:01 UTC
quickspeedy sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
api offline
alpox
@alpox
Oct 19 2017 21:01 UTC
@quickspeedy For that, you can make your function take one parameter - the callback. A callback is nothing else than a simple function. You call that function with the data you got after it arrived and then you can access it from the other function through defining that function which you pass as argument.
Might sound complicated from my statement, but here is an example of a very simple callback:
function getDataDelayed(cb) {
    // Simulate delayed action. Takes 2 seconds
    setTimeout(function() {
        cb("hey, this is data!");
    }, 2000);
}

function print(received) {
    console.log(received);
}

getDataDelayed(print); // Logs "hey, this is data!" after 2 seconds
quickspeedy
@quickspeedy
Oct 19 2017 21:08 UTC
So how does getDataDelayed(print) work? Seems to me that print is a function and you didn't use getDataDelayed(print()) with a parenthesis?
@alpox
alpox
@alpox
Oct 19 2017 21:09 UTC
@quickspeedy No i didn't :-) the variable print (yea you can see the function name as a variable in which the function is stored) is passed to getDataDelayed as an argument.
So i kinda "pass around" the function like data
in getDataDelayed, the function is available under the name cb (The first argument where i passed the function)
Then, as soon as i get the data, i do the actual function call with the () paranthesis
cb("hey, this is data!")
quickspeedy
@quickspeedy
Oct 19 2017 21:12 UTC
@alpox I think I got it. The callback function looks pretty tricky though!
alpox
@alpox
Oct 19 2017 21:12 UTC
You get used to it :-)
Promises are probably more difficult to grasp for you
So i think its best to first learn callbacks
quickspeedy
@quickspeedy
Oct 19 2017 21:13 UTC
@alpox Yeah I agree with you. Thanks again!
CamperBot
@camperbot
Oct 19 2017 21:13 UTC
quickspeedy sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
api offline
alpox
@alpox
Oct 19 2017 21:14 UTC
@quickspeedy Np :-)
@quickspeedy If you used the functions filter, reduce or map already, you've already seen callbacks. Because you kind of give them callbacks as argument :-)
quickspeedy
@quickspeedy
Oct 19 2017 21:16 UTC
@alpox Yes I feel kind of embarassed that I have used it but never recognized it. I need to make sure I understand callbacks well.
alpox
@alpox
Oct 19 2017 21:17 UTC
@quickspeedy Noone does at first glance :D
quickspeedy
@quickspeedy
Oct 19 2017 21:17 UTC
@alpox Haha, that makes me feel better :smile:
Alexx Martínez
@AlexxMart
Oct 19 2017 23:42 UTC

@AlexxMart
Hello guys, I've been struggling with the challenge "Inventory Update". I've run a loop to add the items to the new inventory but when it finds an existing item is not just adding the amounts as it should, but it adds the whole item as if it doesn't exist

my code:

function updateInventory(arr1, arr2) {
    // All inventory must be accounted for or you're fired!
    var v = arr1;
  for(var i = 0; i < arr2.length; i++){
  if(arr2[i][1] == arr1[i][1]){
    v.push([arr1[i][0] + arr2[i][0], arr1[i][1]]);
  } else {
    v.push(arr2[i]);
  }
  }

  return v;
}

// Example inventory lists
var curInv = [
    [21, "Bowling Ball"],
    [2, "Dirty Sock"],
    [1, "Hair Pin"],
    [5, "Microphone"]
];

var newInv = [
    [2, "Hair Pin"],
    [3, "Half-Eaten Apple"],
    [67, "Bowling Ball"],
    [7, "Toothpaste"]
];

updateInventory(curInv, newInv);

I tried adding just the name of the items to a new array, but then I don't know how to add the stock of each item once the names have been sorted. Because when the amount is added, ".sort()" doesn't work anymore

korzo
@korzo
Oct 19 2017 23:55 UTC
@AlexxMart v === arr1 and you are pushing same things there, so I suppose you have duplicates in v
I would suggest to create temp object and store inventory in it.
It's easier to find "Hair Pin" as a property of object than loop both array every time.
Alexx Martínez
@AlexxMart
Oct 19 2017 23:57 UTC
@korzo but in the loop I use the double bracket notation for each item array[i][0] to compare if the name of the new inventory matches the one already in the array
@korzo that's a good idea, let me try that
korzo
@korzo
Oct 19 2017 23:59 UTC
@AlexxMart yes, but you push then (add new item at the end of array)