These are chat archives for FreeCodeCamp/HelpFrontEnd

18th
Mar 2018
DarkxPunk
@DarkxPunk
Mar 18 2018 00:57
Aloha
Amit Patel
@AmitP88
Mar 18 2018 00:59

hey guys, I'm trying to get my counter to show 00 : 59 when the countdown starts (instead I get 0 : -1, then 00: 58, etc). how do I fix this? (btw, I really don't want to have to scrap my code for this if possible)

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

kerafyrm02
@kerafyrm02
Mar 18 2018 01:20
I think you need to chnge this
if (seconds <= 0){
Need to include 0.
Line 30.
Anyone need help?
James you there?
DarkxPunk
@DarkxPunk
Mar 18 2018 01:31
How is everyone ronight?
tonight*
Stephen James
@sjames1958gm
Mar 18 2018 01:32
@AmitP88 When you subtract from seconds you need to check if < 0 then subtract from minutes and reset seconds to 59
You need this in the timer function
Alex
@LosAngalex
Mar 18 2018 01:35
Hi everyone. I could use some assistance. I'm building a site for someone and I've only used HTML/CSS. When I pushed the site up to github, none of the images show up and I get a weird error when inspected that says "[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience." Here is the site: https://losangalex.github.io/liztristram/ if anyone knows what the issue/fix is, please message me.
kerafyrm02
@kerafyrm02
Mar 18 2018 01:36
Stephen you there?
Stephen James
@sjames1958gm
Mar 18 2018 01:36
@kerafyrm02 I am a Stephen :)
kerafyrm02
@kerafyrm02
Mar 18 2018 01:36
Are you familiar with prototypes?
Stephen James
@sjames1958gm
Mar 18 2018 01:37
@LosAngalex Are you using Ajax to load your images?
@kerafyrm02 Somewhat, no expert
Alex
@LosAngalex
Mar 18 2018 01:38
@sjames1958gm I don't know. I'm using github large files which I downloaded on my computer since the images are large files... I don't know if that could be the issue...
kerafyrm02
@kerafyrm02
Mar 18 2018 01:38
@Alex your img src doesnt include the right address to your images
JoEezy
@JoEeeezy_twitter
Mar 18 2018 01:38
@LosAngalex are you using jquery on that page?
Stephen James
@sjames1958gm
Mar 18 2018 01:38
@LosAngalex Once you push your code to github, you wont be able to use local files
kerafyrm02
@kerafyrm02
Mar 18 2018 01:38
ok if i create an object using object.create() how do i add a prototype method to it?
Alex
@LosAngalex
Mar 18 2018 01:39
All of the images are pushed to github... I do it the way I usually do it, I don't know why this is any different.
kerafyrm02
@kerafyrm02
Mar 18 2018 01:39
whats the url to the images alex
<img class="container" src="assets/port/SucculentII.png"> (will not work)
Alex
@LosAngalex
Mar 18 2018 01:41
Then I don't know what to do... All the asset files are here https://github.com/LosAngalex/liztristram/tree/master/assets
So what do I do? I mean, when I made my own page I used local files and it works fine, I am very confused.
What link do I use then?
Stephen James
@sjames1958gm
Mar 18 2018 01:47
@LosAngalex This is the file location that is being loaded
https://losangalex.github.io/liztristram/assets/port/VeggieStripBrinjals.png
DarkxPunk
@DarkxPunk
Mar 18 2018 01:48
I have never used Github but is that seriously how it works? Images are not stored the same place you upload them from? Like they get put in a completely different place… That is silly as hell.
kerafyrm02
@kerafyrm02
Mar 18 2018 01:48
I nver use the site
Where did you go Stephen?
Alex
@LosAngalex
Mar 18 2018 01:49
Thank you @sjames1958gm
CamperBot
@camperbot
Mar 18 2018 01:49
losangalex sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9109 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Liam Docherty
@ldocherty1
Mar 18 2018 01:50

Hi how can I add JS smooth scroll to my homepage button? I keep trying to follow the steps but I must be getting something wrong as it isn't working. I removed the code as if someone could add it in and show me it would be much appreciated. https://github.com/cferdinandi/smooth-scroll

btn btn-primary btn-xl bounceInDown animated js-scroll-trigger

Here is my code https://github.com/ldocherty1/Unit28_Assignment1

Alex
@LosAngalex
Mar 18 2018 01:50
Maybe its because I'm using github lfs for the first time which maybe takes my files to a "different" location or something.. I'm not sure. Because every time I've made a site I've been able to use the link to a local file and it works.
kerafyrm02
@kerafyrm02
Mar 18 2018 01:51
Is your homepage button down?
Alex
@LosAngalex
Mar 18 2018 01:51
As long as I push the files to github, it works perfectly. This site has been driving me crazy because it's not working like anything else I've done. I'm going to have A LOT more questions...
kerafyrm02
@kerafyrm02
Mar 18 2018 01:51
$('html, body').animate({
    scrollTop: $("name_of_div").offset().top
 }, 2000);
Alex
@LosAngalex
Mar 18 2018 01:52
Thank you all, I'll be back with my next set of questions shortly.
Stephen James
@sjames1958gm
Mar 18 2018 01:54
@kerafyrm02 I am not sure
kerafyrm02
@kerafyrm02
Mar 18 2018 01:54
:(
DarkxPunk
@DarkxPunk
Mar 18 2018 01:55
@LosAngalex Yes it is the Github LFS
@LosAngalex Why are you hosting the site on Github anyway?
Stephen James
@sjames1958gm
Mar 18 2018 01:57
@kerafyrm02 Isn't it the contsructor of the object that has the prototype
Alex
@LosAngalex
Mar 18 2018 01:59
@DarkxPunk Because that's all I know.
DarkxPunk
@DarkxPunk
Mar 18 2018 02:03
@LosAngalex I highly recommend using codepen XD
Especially if you are just prototyping or showing examples, keeps your sites code and assets private.
Alex
@LosAngalex
Mar 18 2018 02:04
Codepen was not able to host the size of my image files
DarkxPunk
@DarkxPunk
Mar 18 2018 02:04
How big are these files xD
Alex
@LosAngalex
Mar 18 2018 02:04
Too dang big.
I fixed the images so far using the links from github, so that is somewhat solved... The page takes days to load though but I think that can be optimized or whatever. Now I have some basic container/css issues. I'm very out of practice. This is my first project in months and I feel like I've forgotten everything.
DarkxPunk
@DarkxPunk
Mar 18 2018 02:07
Why are web files massive?
Web files should be at most a megabyte or two
Alex
@LosAngalex
Mar 18 2018 02:09
They were sent to me that way via dropbox. I then downloaded them and stored them locally and had to use Github LFS to push them on to Github. I'm now using the Github hosted image weblinks to link the images on to my site. It could just be my computer. here is the "fixed" site: https://losangalex.github.io/liztristram/
So my initial issue that I came to this forum about was regarding the CSS containers that I have to hold the images, but then I ran into that other issue about the images not even showing up.
I think what I'm going to do is just get everything on the site, add the pages, add the text, etc. Then once everything is actually on there, I'll worry more about it not looking like absolute poop.
Bye for now - thanks again, all
Oros Alexandru
@AlexOros
Mar 18 2018 04:34
@ldocherty1 Here is a cool jQuery smooth scrolling effect
$(document).ready(function(){
    // Add smooth scrolling to all links
    $(".a-class").on('click', function(event) {

      // Make sure this.hash has a value before overriding default behavior
      if (this.hash !== "") {
        // Prevent default anchor click behavior
        event.preventDefault();

        // Store hash
        var hash = this.hash;

        // Using jQuery's animate() method to add smooth page scroll
        // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
        $('html, body').animate({
          scrollTop: $(hash).offset().top
        }, 800, function(){

          // Add hash (#) to URL when done scrolling (default click behavior)
          window.location.hash = hash;
        });
      } // End if
    });
  });
You must add jQuery first
DarkxPunk
@DarkxPunk
Mar 18 2018 05:17
I may be missing something but I am using flex and order is not working as expected...
Amit Patel
@AmitP88
Mar 18 2018 05:18

hey guys, I'm trying to get the expired function to run when the timer reaches 00:00, but it's not working and for the life of me I can't figure out why. I kept toying around with things trying to see if it would work, but no luck so far

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

DarkxPunk
@DarkxPunk
Mar 18 2018 05:18
If you have a flex column with two different elements, say divs and spans, and they are mixed up, no specific order. If you make all the divs order: 2 and all the spans order: 1 shouldent all the spans sit at the top and the divs sit at the bottom?
DarkxPunk
@DarkxPunk
Mar 18 2018 05:31

@AmitP88 if( minutes == 0 && seconds == 0){
expired();
}
seconds_div.innerHTML = ('0'+ (--seconds)).slice(-2);

},1000);
}

I made some progress XD
Fixed it
if((minutes === 1)&&(seconds === 0)){
  minutes_div.innerHTML = '0' + 0;
  seconds = 60;
  seconds_div.innerHTML = seconds;

}

seconds_div.innerHTML = ('0'+ (--seconds)).slice(-2);

// if timer runs out (reaches 00:00)
if( minutes == 0 && seconds == 0){
  expired();
}

},1000);
}

Order was off
Your code + formatting needs a hella lot of cleaning though XD
Sorin Ruse
@sorinr
Mar 18 2018 05:40
@DarkxPunk they are. here an example
DarkxPunk
@DarkxPunk
Mar 18 2018 05:41
@sorinr Yeah, I am a moron. I forgot to add the : beside order XD
It is late XD
Sorin Ruse
@sorinr
Mar 18 2018 05:42
@DarkxPunk :+1:
Amit Patel
@AmitP88
Mar 18 2018 05:44
@DarkxPunk hmmm, I tried your solution, but it still doesn't work on my end. the timer still restarts the countdown after 00:00
function run(){
  interval = setInterval(function(){

    // if countdown is on final minute
    if((minutes === 1)&&(seconds === 0)){
      minutes_div.innerHTML = '0' + 0;
      seconds = 60;
      seconds_div.innerHTML = seconds;
   }

    seconds_div.innerHTML = ('0'+ (--seconds)).slice(-2);    

    // if timer runs out (reaches 00:00)
    if(minutes == 0 && seconds == 0){
      expired();
    }    


  },1000);
}
DarkxPunk
@DarkxPunk
Mar 18 2018 05:44
You gotta also modify the expired() function
I wrote up there the fix
@AmitP88
Amit Patel
@AmitP88
Mar 18 2018 05:48
@DarkxPunk I'm looking at what you wrote earlier, but I don't see the modified expired function
DarkxPunk
@DarkxPunk
Mar 18 2018 05:54
@AmitP88 Sorry it is late at night and I am clearly not all here, I see where I mucked it up, let me see if I can fix it. I modified the timer to make it shorter and that fixed it, but when you go back to one minute it breaks again so give me a second
Amit Patel
@AmitP88
Mar 18 2018 05:54
@DarkxPunk ah I see. ok, no worries :)
DarkxPunk
@DarkxPunk
Mar 18 2018 06:04

@AmitP88 '''if( minutes == 1 && seconds == 0 ){
minutes = 0;
minutes_div.innerHTML = '0' + minutes;
seconds = 60;
seconds_div.innerHTML = seconds;
}

seconds_div.innerHTML = ('0' + --seconds);    

// if timer runs out (reaches 00:00)
if(minutes == 0 && seconds == 0){
  expired();
}    

},1000);
}’''

CamperBot
@camperbot
Mar 18 2018 06:04
:bulb: to format code use backticks! ``` more info
Nazar
@IsaakNazar
Mar 18 2018 06:04
@AmitP88 hey Amit, what's the purpose of expired functjon?
DarkxPunk
@DarkxPunk
Mar 18 2018 06:05

``` if( minutes == 1 && seconds == 0 ){
minutes = 0;
minutes_div.innerHTML = '0' + minutes;
seconds = 60;
seconds_div.innerHTML = seconds;
}

seconds_div.innerHTML = ('0' + --seconds);    

// if timer runs out (reaches 00:00)
if(minutes == 0 && seconds == 0){
  expired();
}    

},1000);
} ```

Okay I dont know how to use these functions at this time of night
But this fixed it XD
Nazar
@IsaakNazar
Mar 18 2018 06:05
Ah, sorry I see the comments :smile:
DarkxPunk
@DarkxPunk
Mar 18 2018 06:06
if( minutes == 1 && seconds == 0 ){
      minutes = 0;
      minutes_div.innerHTML = '0' + minutes;
      seconds = 60;
      seconds_div.innerHTML = seconds;
   }

    seconds_div.innerHTML = ('0' + --seconds);    

    // if timer runs out (reaches 00:00)
    if(minutes == 0 && seconds == 0){
      expired();
    }    


  },1000);
}
HA
I DID IT
pats self on back
Amit Patel
@AmitP88
Mar 18 2018 06:07
@DarkxPunk thanks bro, I'm testing it out right now (running the timer down atm)
CamperBot
@camperbot
Mar 18 2018 06:07
amitp88 sends brownie points to @darkxpunk :sparkles: :thumbsup: :sparkles:
:cookie: 113 | @darkxpunk |http://www.freecodecamp.org/darkxpunk
Amit Patel
@AmitP88
Mar 18 2018 06:07
@IsaakNazar lol ;)
DarkxPunk
@DarkxPunk
Mar 18 2018 06:07
T- XD
Amit Patel
@AmitP88
Mar 18 2018 06:08
@DarkxPunk it works! thanks bro! :D
CamperBot
@camperbot
Mar 18 2018 06:08
amitp88 sends brownie points to @darkxpunk :sparkles: :thumbsup: :sparkles:
api offline
DarkxPunk
@DarkxPunk
Mar 18 2018 06:08
@AmitP88 No problem
Now I go to bed on a high note XD
Amit Patel
@AmitP88
Mar 18 2018 06:08
@DarkxPunk I'll study how your solution works :)
@DarkxPunk good night man lol
Nazar
@IsaakNazar
Mar 18 2018 06:09
see you later alligator :smile:
Amit Patel
@AmitP88
Mar 18 2018 06:09
looks like I still have a lot to improve on in my javascript
DarkxPunk
@DarkxPunk
Mar 18 2018 06:09
@AmitP88 Honestly a big issue with your code is it is over complicated and you try and isolate things that dont need isolating. Study the code and the function behind it, then open a new pen and rewrite the code again following purely the logic behind it. You will refine it far better. Good Luck.
:sleeping:
Amit Patel
@AmitP88
Mar 18 2018 06:11
@DarkxPunk thanks man. Yeah, I thought I was taking a more modular approach, but the more I tried to add to it, the more complicated it seemed. @sjames1958gm suggested that I use more math functionality to have the time in seconds, then convert it to minutes
CamperBot
@camperbot
Mar 18 2018 06:11
amitp88 sends brownie points to @darkxpunk and @sjames1958gm :sparkles: :thumbsup: :sparkles:
api offline
:star2: 9110 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Amit Patel
@AmitP88
Mar 18 2018 06:11
@DarkxPunk I might try it that way on refactor, that way I can see how both methods work
DarkxPunk
@DarkxPunk
Mar 18 2018 06:14
I’d agree with @sjames1958gm
Amit Patel
@AmitP88
Mar 18 2018 06:14
yeah, that seems like a good way. I guess I was just afraid of throwing out my old code when I came so far lol
coderNewby
@coderNewby
Mar 18 2018 06:35
thanks @DarrenfJ for all your help, finishing up bootstrap!! :D
CamperBot
@camperbot
Mar 18 2018 06:35
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2427 | @darrenfj |http://www.freecodecamp.org/darrenfj
kerafyrm02
@kerafyrm02
Mar 18 2018 13:08
Anyone here good with prototypes?
Markus Kiili
@Masd925
Mar 18 2018 13:11
@kerafyrm02 What prototypes are you talking about?
kerafyrm02
@kerafyrm02
Mar 18 2018 13:23
Hi
Are you still there Markus?
@Masd925
JS prototypes.
Markus Kiili
@Masd925
Mar 18 2018 13:25
@kerafyrm02 Yes. Ask away.
kerafyrm02
@kerafyrm02
Mar 18 2018 13:30
Ok how do I add a prototype to a object literal using Object.create()
ie
(function(){

    //Example 1
    function Employee(name, age){
        this.name = name;
        this.age = age;
    }

    var Joe = new Employee('Joe', 21);

    Employee.prototype.describe_me = function(){
        console.log('My name is ' + this.name + ' and I am ' + this.age);
    }

    //Joe.describe_me();

    //Example 2
    var Employee2 = {
        name: 'Sue',
        age: '21',
    };


    var Sue = Object.create(Employee2);


})();
How would I add a describe_me method to Employee2 without adding it inside the object literal
via prototype
like used in first example
Stephen James
@sjames1958gm
Mar 18 2018 13:33
@kerafyrm02 For the first example you are adding the function to the constructor of Joe (basically)
so Employee2.constructor.prototype.describe_me =
VaseJS
@VaseJS
Mar 18 2018 13:33
currying seems to be one solution
Stephen James
@sjames1958gm
Mar 18 2018 13:34
But then you are adding it to the Object constructor so every object.
Markus Kiili
@Masd925
Mar 18 2018 13:35
@kerafyrm02 You don't wan't to create another employee with new?
kerafyrm02
@kerafyrm02
Mar 18 2018 13:35
Right Markus. I want to add prototypes on the fly without using new.
using Object.create instead
And not on the constructor.. but on the prototype
Markus Kiili
@Masd925
Mar 18 2018 13:37
@kerafyrm02 You can use Object.create to set the prototype of the new object and also add properties. Changing the prototype of an existing object (to some other object) is not a good idea.
kerafyrm02
@kerafyrm02
Mar 18 2018 13:38
When you say change does that include adding to?
Markus Kiili
@Masd925
Mar 18 2018 13:39
@kerafyrm02 No, but the prototype of an object created by an object literal is Object.prototype.
As @sjames1958gm said.
Stephen James
@sjames1958gm
Mar 18 2018 13:39
var o = Object.create({});
o.constructor.prototype === Object.prototype
true
kerafyrm02
@kerafyrm02
Mar 18 2018 13:40
oh
those two lines are so helpful
ok back to experimenting ! thanks both of you
Stephen James
@sjames1958gm
Mar 18 2018 13:41
@kerafyrm02 :+1:
Markus Kiili
@Masd925
Mar 18 2018 13:42
@kerafyrm02 One of the hardest subjects in JS.
kerafyrm02
@kerafyrm02
Mar 18 2018 13:42
Yeah- im really trying to get my head around it
Markus Kiili
@Masd925
Mar 18 2018 13:45
@sjames1958gm I think that using Object.getPrototypeOf instead of .constructor.prototype is a bit better, because the constructor property is not used internally at all, and developers might not set is correctly when they implement prototype chains.
kerafyrm02
@kerafyrm02
Mar 18 2018 13:45
So Stephen is it only possible to add a prototype method using the new method?
Or Markus
function Employee(name, age){
    this.name = name;
    this.age = age;
}

var Joe = new Employee('Joe', 21);
var Sara = new Employee('Sarah', 22);

Employee.prototype.describe_me = function(){
    console.log('My name is ' + this.name + ' and I am ' + this.age);
}
In this example describe_me is not attached to the constructor, so there's only one copy of the describe_me method. I'm just trying to create a similar block of code using object literal and object.create
Markus Kiili
@Masd925
Mar 18 2018 13:49
@kerafyrm02 You can create a new (prototype) object and use it as a prototype object of a new object you create with Object.create().
Is that what you are trying to do?
kerafyrm02
@kerafyrm02
Mar 18 2018 13:51
If I rewrote the code above to:
function Employee(name, age){
        this.name = name;
        this.age = age;
        this.describe_me = function(){
                console.log('My name is ' + this.name + ' and I am ' + this.age);
        }
    }
Then both instances of Employee would have that method
Markus Kiili
@Masd925
Mar 18 2018 13:52
Yes.
kerafyrm02
@kerafyrm02
Mar 18 2018 13:52
By adding it to prototype i save memory. But i dont want to use the new method
i want to use the object.create method
Markus Kiili
@Masd925
Mar 18 2018 13:52
@kerafyrm02 this.describe_me = ...
kerafyrm02
@kerafyrm02
Mar 18 2018 13:53
right typo
but do you understand what im trying to do? It's my understanding Javascript was never intended to use new but did so to accomidate transition programmers. I want to learn the other approach as well
Markus Kiili
@Masd925
Mar 18 2018 13:58
@kerafyrm02 Maybe something like this:
var pro = {
  describe_me: function(){console.log('My name is ' + this.name + ' and I am ' + this.age);}
};

var myObj = Object.create(pro);
myObj.name = "John";
myObj.age = 15;
myObj.describe_me(); // My name is John and I am 15
kerafyrm02
@kerafyrm02
Mar 18 2018 13:58
so it has to be part of the object literal?
can i add it later like you do with the other method
ie
Markus Kiili
@Masd925
Mar 18 2018 13:59
@kerafyrm02 You can add it later.
kerafyrm02
@kerafyrm02
Mar 18 2018 13:59
myObj.prototype.describe_me = function(){}
i tried that and i get errors
using the constructor method i can add the prototype whenever i want
it doesnt seem like i can with object literals
Markus Kiili
@Masd925
Mar 18 2018 14:01
var pro = {};
var myObj = Object.create(pro);
pro.describe_me = function(){console.log('My name is ' + this.name + ' and I am ' + this.age);};
myObj.name = "John";
myObj.age = 15;
myObj.describe_me(); // My name is John and I am 15
You could also use Object.getPrototypeOf(myObj).describe_me = ...
@kerafyrm02
kerafyrm02
@kerafyrm02
Mar 18 2018 14:02
OH! So i don't need to add 'prototype' explicitly
it's just {object}.{method} with object literals to be placed on its prototype
Markus Kiili
@Masd925
Mar 18 2018 14:03
@kerafyrm02 .prototype is a property of a constructor function. It holds the object that will be the prototype object of all the new objects created with that constructor using new.
Objects don't generally have a .prototype property.
kerafyrm02
@kerafyrm02
Mar 18 2018 14:04
ok now it makes sense
That was the missing link
whats the point behind of using getPrototypeOf() vs just doing {myObj}.{method}
Markus Kiili
@Masd925
Mar 18 2018 14:05
@kerafyrm02 It gives you the prototype object. You can access the prototype chain using it.
kerafyrm02
@kerafyrm02
Mar 18 2018 14:07
Do you have any good links on this stuff?
YOu have been very helpful
Markus Kiili
@Masd925
Mar 18 2018 14:08
@kerafyrm02 MDN has stuff about objects and such things.
You also have to just generate some objects and prototypes and console.log all the things out if you wan't to learn it totally.
kerafyrm02
@kerafyrm02
Mar 18 2018 14:11
yeah
thats what ive been doing
Markus Kiili
@Masd925
Mar 18 2018 14:12
:+1:
kerafyrm02
@kerafyrm02
Mar 18 2018 14:13
How do i assign a name to the prototype so it doesnt just say (Object)
Markus Kiili
@Masd925
Mar 18 2018 14:28
@kerafyrm02 You don't.
Liam Docherty
@ldocherty1
Mar 18 2018 15:52
@AlexOros Thanks for the coding help earlier. Sorry since it was 4am and I'm from the UK I went to bed.
CamperBot
@camperbot
Mar 18 2018 15:52
ldocherty1 sends brownie points to @alexoros :sparkles: :thumbsup: :sparkles:
:cookie: 259 | @alexoros |http://www.freecodecamp.org/alexoros
jenseo
@jenseo
Mar 18 2018 15:56
Hi guys, any PHP array gurus around here? :smile:
Matej Bošnjak
@mbosnjak01
Mar 18 2018 15:57
$array = [];
you good
:D
jenseo
@jenseo
Mar 18 2018 15:57
:D
Matej Bošnjak
@mbosnjak01
Mar 18 2018 15:58
what kind of help you need with array?
jenseo
@jenseo
Mar 18 2018 15:59
@mbosnjak01 , I'm building an app where I fetch information from an API and I have this array that I need to modify a bit, but having a hard time getting it the way I want to after countless hours of trying/googling etc :)
Matej Bošnjak
@mbosnjak01
Mar 18 2018 16:00
modify how?
jenseo
@jenseo
Mar 18 2018 16:00
Let me show you what it looks like
Matej Bošnjak
@mbosnjak01
Mar 18 2018 16:00
like, be speific xD
jenseo
@jenseo
Mar 18 2018 16:03
It's multidimensional and looks like this (in json, which I convert to PHP)
[{"id":227,"tag":{"id":1,"name":"bantning","language":"sv"},"sku":"G2500100"},{"id":228,"tag":{"id":87,"name":"link-name","blommor":"sv"},"sku":"F5601780"},{"id":227,"tag":{"id":5,"name":"hundar","language":"sv"},"sku":"FK59398273"}]
Matej Bošnjak
@mbosnjak01
Mar 18 2018 16:05
so what do you want to do with it?
modify how?
jenseo
@jenseo
Mar 18 2018 16:05

What I need to do is, merge every key with the same id and fetch the "tag" + "name" field from each of the matching fields.

So id 227 for instance would become:

´´´
[{"id":227,"tag":{"name":"bantning"}{"name":"hundar"}}]
´´´

Matej Bošnjak
@mbosnjak01
Mar 18 2018 16:06
hmm
jenseo
@jenseo
Mar 18 2018 16:06
[{"id":227,"tag":{"name":"bantning"}{"name":"hundar"}}]
Matej Bošnjak
@mbosnjak01
Mar 18 2018 16:07
can't you just get data from that array and push it in another array in desired way and then use that other array to display data?
jenseo
@jenseo
Mar 18 2018 16:07
I've looked some at merge_array_recursive but haven't figured it out
Yes, it would be perfectly fine to construct a new array, but not sure how though
So it would look something like:
Array item
 - id
           -tag
                           -name
                           -name
So far, when I try to add the name items to the tag field, it overwrites the one already there, making it only display one name
Matej Bošnjak
@mbosnjak01
Mar 18 2018 16:11
not sure what this is tho XD
[
{
id:[
{
tag: [
{tag1: name1},
{tag2: name2},
{tag3: name3}
]
}
]
}
]
this? XD
I'd need to do some tests, didn't work with php for more than a year now
jenseo
@jenseo
Mar 18 2018 16:12
Yeah, that would work
Matej Bošnjak
@mbosnjak01
Mar 18 2018 16:12
but i still think the easiest way is to construct a new array in desired way with data from the first array
I used to do that with js and json before
jenseo
@jenseo
Mar 18 2018 16:12
Yes, that would be totally doable
But need to do it with php though
DarkxPunk
@DarkxPunk
Mar 18 2018 16:17
Can you have a css grid add columns based on the content?
jenseo
@jenseo
Mar 18 2018 16:25
@DarkxPunk depends on what language you're working in, if you're working with php for instance, you could for instance use if statements to check the amount of content and add the css columns accordingly
Stephen James
@sjames1958gm
Mar 18 2018 16:25
@jenseo Wouldn't an object with the keys of id: be easier to construct?
{
   "227": ["bantning", "hundar"]
}
jenseo
@jenseo
Mar 18 2018 16:26
@sjames1958gm Hmm, that's not a bad idea!
Stephen James
@sjames1958gm
Mar 18 2018 16:27
Then as you process your array if the object already has that id, just push the new name
otherwise add that id with a new array ["namevalue"]
jenseo
@jenseo
Mar 18 2018 16:27
Not sure how I add the name keys to the object though, without overwriting them
Ah, nice
So I could use array_push right?
Haven't used it before
Stephen James
@sjames1958gm
Mar 18 2018 16:28
exactly
You could use
obj[key] = obj[key].concat(["newName"]);
jenseo
@jenseo
Mar 18 2018 16:28
Beautiful! I think that will be perfect for this!
Thank you so much, will get straight to work!
Stephen James
@sjames1958gm
Mar 18 2018 16:29
:+1:
Joshua Swift
@joshuaswift
Mar 18 2018 16:56
Hey guys, I'm working on my portfolio and for some reason the list of interests in the About section isnt staying within the div
anybody have any ideas?
There's 5 items on the list but the 5th one doesn't stay on the page
Darren
@DarrenfJ
Mar 18 2018 17:06
right on the progress! @coderNewby
and thanks @coderNewby for the challenges.. always makes me have to learn more myself ;)
CamperBot
@camperbot
Mar 18 2018 17:07
:cookie: 94 | @codernewby |http://www.freecodecamp.org/codernewby
darrenfj sends brownie points to @codernewby :sparkles: :thumbsup: :sparkles:
Ivan Ngundela
@ingundela
Mar 18 2018 18:57
hello everyone, may you please help me to fix my humburger menu for my project https://ingundela.github.io/morep/
How do I make menu visible like making it white and also on a click the background should be while the same when I scroll down
G-4-R-Y
@G-4-R-Y
Mar 18 2018 19:14
hey guys, can anyone help me on finding out whats wrong in this code? it doesn't work when it comes to the big numbers in Smallest Common Multiple:
function smallestCommons(arr) {
  var scmultiple;
  var numbers = [];
  arr.sort(function (a, b) {
    return a - b;
  });
  var firstInArr = arr[0];
  var secondInArr = arr[1];
  for (var b = firstInArr; b <= secondInArr; b++) {
    numbers.push(b);
  }
  for (var i = 1; scmultiple == undefined; i++) {
    var validDivisors = [];
    for (var a = 0; a < numbers.length; a++) {
      if (i % numbers[a] == 0) {
        validDivisors.push(numbers[a]);
      }
    if (validDivisors.length == numbers.length) {
      scmultiple = i;
    }}}
  return scmultiple;
}
it just returns scmultiple as undefined
Brad
@bradtaniguchi
Mar 18 2018 19:16
@G-4-R-Y whats up with the multiple curly brackets near the last return there? Seems like you need to format the code
G-4-R-Y
@G-4-R-Y
Mar 18 2018 19:18
one of them was out of place lol
but, respectively, one for the if statement and the other 2 for the for loops
i already corrected it but it didn't work anyway
function smallestCommons(arr) {
  var scmultiple;
  var numbers = [];
  arr.sort(function (a, b) {
    return a - b;
  });
  var firstInArr = arr[0];
  var secondInArr = arr[1];
  for (var b = firstInArr; b <= secondInArr; b++) {
    numbers.push(b);
  }
  for (var i = 1; scmultiple == undefined; i++) {
    var validDivisors = [];
    for (var a = 0; a < numbers.length; a++) {
      if (i % numbers[a] == 0) {
        validDivisors.push(numbers[a]);
      }}
    if (validDivisors.length == numbers.length) {
      scmultiple = i;
    }}
  return scmultiple;
}
Sly Fox
@Gurukorgi
Mar 18 2018 19:23
is there any java programmer here ?
Markus Kiili
@Masd925
Mar 18 2018 19:24
@Gurukorgi I know some java.
Sly Fox
@Gurukorgi
Mar 18 2018 19:25
@Masd925 have you used the JoptionPane to create display Gui output to the user before ?
i parsed it to int and now i want to use exception to prevent the user from crashing my program by inpting a character or a string
Markus Kiili
@Masd925
Mar 18 2018 19:28
@Gurukorgi Another way might be to check the input and then proceed accordingly.
Sly Fox
@Gurukorgi
Mar 18 2018 19:29
@Masd925 how
Markus Kiili
@Masd925
Mar 18 2018 19:29
I have done some swing and awt interfaces previously.
Brad
@bradtaniguchi
Mar 18 2018 19:29
while refreshing on this issue (and all the java gui stuff I learned a while back) I found this SO article
@Gurukorgi
Markus Kiili
@Masd925
Mar 18 2018 19:30
My experience is also from years back.
Ivan Ngundela
@ingundela
Mar 18 2018 19:31
hello everyone, may you please help me to fix my humburger menu for my project https://ingundela.github.io/morep/
on a mobile view, when page load it should have a white menu icon.. and on scroll i should be dark(the way it is now)… how to I change the this bootstrap icon to white
please help
Sly Fox
@Gurukorgi
Mar 18 2018 19:34
Exception in thread "main" java.lang.RuntimeException: JOptionPane: parentComponent does not have a valid parent
niniyzni
@niniyzni
Mar 18 2018 20:00

Hi,

  • I am new to angular 2
  • my functionality is working fine in fiddle but when I put in the code base I am getting below errors.

app/components/playing-cables/downlink-bulk-update.ts(82,12): error TS2339: Property 'options' does not exist on type 'JQuery'.
app/components/playing-cables/downlink-bulk-update.ts(99,21): error TS2339: Property 'Default' does not exist on type 'string'.

        storedPreferences.Default = {
        dropdown.options = function(data, selectedKey) {

https://gist.github.com/niniyzni/f13970f55af61602ee24b01c7ebbc099

Brad
@bradtaniguchi
Mar 18 2018 20:01
@niniyzni These are typescript errors. Can you post a larger snippet of the code that breaks? You need to probably provide more information to typescript (or provide any), otherwise its assuming your doing something wrong with your code
Sly Fox
@Gurukorgi
Mar 18 2018 20:01
@Masd925 @Masd925 cool
Martynas
@FlintMayers
Mar 18 2018 20:03
i am trying to update one item in an array which is in state
var todos = this.state.todoItemList.slice();

    todos[0].props.title = false;
    this.setState({todoItemList: todos});
I make a copy of original state and then change it but it still complains
how would i go about doing it?
Brad
@bradtaniguchi
Mar 18 2018 20:05
when you say complains what do you mean? I'm not a React guy so I could be wrong, but shouldn't you be able to access the variable by reference? (since its an object) so your not copying anything but references when you use slice.
Stephen James
@sjames1958gm
Mar 18 2018 20:06
@FlintMayers You are still mutating the first value in the array -
@FlintMayers What @bradtaniguchi said
Martynas
@FlintMayers
Mar 18 2018 20:06
@sjames1958gm but i create a new array with slice()
how can i modify array before using setState
Stephen James
@sjames1958gm
Mar 18 2018 20:06
@FlintMayers You are making a new array that references all of the items in the old array.
Martynas
@FlintMayers
Mar 18 2018 20:07
so i need to create an enitirely new array then
slice() won't cut it then, any suggestions?
Stephen James
@sjames1958gm
Mar 18 2018 20:07
@FlintMayers The slice is ok, but you need to replace the first item in the new array with a copy of that itme
todos[0] = {...todos[0], title: false} using destructuring
Martynas
@FlintMayers
Mar 18 2018 20:12
@sjames1958gm the method you provided add a key:value but its not in the props array
what i meant is that it added a new title property but not in props:
@sjames1958gm maybe i am looking at the problem not in react way
i know exactly what i want to do but it just doesnt work with this framework
completeItem(itemId){

    var todos = this.state.todoItemList.slice();
  }
I want to loop over todos find the one matching id and modify it's props and then setState with new todos
what i have tried so far
    var todos = this.state.todoItemList.slice();
    var todosUpdated = todos.map((todo) => {
      if(todo.id == itemId) {
        todo.active = !todo.active;
      }
    });
    this.setState({todoItemList: todosUpdated});
Stephen James
@sjames1958gm
Mar 18 2018 20:19
@FlintMayers Your map needs to return a value each time.
      if(todo.id == itemId) {
        todo = {...todo, active: !todo.active;
      }
     return todo;
niniyzni
@niniyzni
Mar 18 2018 20:23
@bradtaniguchi hey I have given the whole code in gist
Martynas
@FlintMayers
Mar 18 2018 20:24
@sjames1958gm thanks, i think i almost got it, the problem is i want to change props
CamperBot
@camperbot
Mar 18 2018 20:24
flintmayers sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9111 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Martynas
@FlintMayers
Mar 18 2018 20:24
something like
todo = {...todo, props.active: !todo.props.active}
but it throws an error
niniyzni
@niniyzni
Mar 18 2018 20:25
@bradtaniguchi here its is
    var dropdown = $('#cars');
        dropdown.options = function(data, selectedKey) {
          var self = this;
          var newOptions = '<option value="Default">Default</option>'; //create one objec to save new options
          $.each(data, function(ix, val) {
           var selected = (val == selectedKey) ? 'selected="selected"' : '';
              if (val != 'Default') {
                newOptions += '<option value="' + val + '" ' + selected + '>' + val + '</option>';
             }
            //data.push(option);
          });
          self.html(newOptions);
          self.change();
        }
        //var array = ['one', 'two', 'three'];
        var array = [];
        var storedPreferences = localStorage.getItem('preferences');
        storedPreferences = (storedPreferences) ? JSON.parse(storedPreferences) : {};
        storedPreferences.Default = {
            columns: [0,1,2],
        };
Martynas
@FlintMayers
Mar 18 2018 20:26
@sjames1958gm why something like this would not work then todo = {...todo}; todo.props.active = false;
I am creating a new object with destructurization and the updating property
Stephen James
@sjames1958gm
Mar 18 2018 20:27
@FlintMayers
todo = {...todo, props: {...todo.props, active: !todo.props.active}} will this work, copying at each level, Yikes :)
@FlintMayers props is part of the original state as well, so if you mutate that you have to copy first
Martynas
@FlintMayers
Mar 18 2018 20:28
@sjames1958gm it works, thank you! so i neeed to make a copy for everything i want to change?
CamperBot
@camperbot
Mar 18 2018 20:28
flintmayers sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
api offline
Martynas
@FlintMayers
Mar 18 2018 20:28
let's say i have a million items and i know the exact item i want to change
Stephen James
@sjames1958gm
Mar 18 2018 20:28
@FlintMayers Yeah, at each level, because arrays / objects are reference they are still linked back to the original state object
Martynas
@FlintMayers
Mar 18 2018 20:28
i still have to make a copy of the whole item array?
Stephen James
@sjames1958gm
Mar 18 2018 20:29
@FlintMayers yes. That is the nature of react immutable state
Brad
@bradtaniguchi
Mar 18 2018 20:57
@niniyzni First of all, angular doesn't need jquery and you shouldn't use it unless a library you need requires it

for the first error you can fix the typescript errors by placing this line at the top of the controller's .ts file.

declare const jQuery: any;

This basically tells typescript there is a variable available called jQuery and it can be anything.

The second error can be fixed by changing this line:

 var storedPreferences = localStorage.getItem('preferences');

to this:

 var storedPreferences: any = localStorage.getItem('preferences');

That should do the same thing as the jquery fix, in both cases your basically not using typescript as any is kind of a "don't check this" type.

jenseo
@jenseo
Mar 18 2018 21:06

Hey everyone, have a quick PHP question:

If I have this json array:

[{"id":227,"tag":{"id":1,"name":"bantning","linkRewrite":"bantning","language":"sv"},"sku":"G2500100"}]

and then declare the following (where $item represents the array object):

$id = $item['id'];

it seems like both "id: 227" and "id: 1" is added as an array to the variable (if my tests are correct). Is it possible to only fetch the first level of the array object? In other words, only "id: 227" in this case? Can I specify the depth somehow?

jenseo
@jenseo
Mar 18 2018 21:14
(So my problem is that there are 2 id fields inside each item and I need to fetch only the one in the upper level)
Stephen James
@sjames1958gm
Mar 18 2018 21:16
@jenseo I would think at the $item level if you "index" the array you will get the entire object. I am not versed in PHP though
Brad
@bradtaniguchi
Mar 18 2018 21:17
@jenseo Try to ask this in the main room, I know there's a few PHP people here, idk if any are in this room tho. I agree with @sjames1958gm I don't think just because they are both 'id' is the reason.
kerafyrm02
@kerafyrm02
Mar 18 2018 21:18
Hi ppl
Who needed help in PHP?
jenseo
@jenseo
Mar 18 2018 21:19
Thank you so much! @sjames1958gm and @bradtaniguchi
CamperBot
@camperbot
Mar 18 2018 21:19
jenseo sends brownie points to @sjames1958gm and @bradtaniguchi :sparkles: :thumbsup: :sparkles:
:cookie: 422 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
:star2: 9113 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
kerafyrm02
@kerafyrm02
Mar 18 2018 21:19
im a php programmer
jenseo
@jenseo
Mar 18 2018 21:19
@kerafyrm02 I did :)
Brad
@bradtaniguchi
Mar 18 2018 21:19
haha
kerafyrm02
@kerafyrm02
Mar 18 2018 21:19
You figure it out?
jenseo
@jenseo
Mar 18 2018 21:19
Would really appreciate some help :)
Brad
@bradtaniguchi
Mar 18 2018 21:19
@jenseo np :D
kerafyrm02
@kerafyrm02
Mar 18 2018 21:20
Whats the question if you didnt get help.
jenseo
@jenseo
Mar 18 2018 21:20
The one I posted 14 minutes ago @kerafyrm02
Like 10 posts up
kerafyrm02
@kerafyrm02
Mar 18 2018 21:21
What are you trying to do?
It's not really clear to me what your objective is.
jenseo
@jenseo
Mar 18 2018 21:21
I'm trying to fetch only the first id in the top level
kerafyrm02
@kerafyrm02
Mar 18 2018 21:21
Of a json object?
jenseo
@jenseo
Mar 18 2018 21:21
So in the example, only 227 and not 1
kerafyrm02
@kerafyrm02
Mar 18 2018 21:22
$id = json_decode($json)->id;
jenseo
@jenseo
Mar 18 2018 21:22
Yeah, it's decoded with json_decode, true though
The decode is already done, so it's already an array
kerafyrm02
@kerafyrm02
Mar 18 2018 21:23
can you vardump your results here
of th variable
or in pm
jenseo
@jenseo
Mar 18 2018 21:23

You gave me an idea, would this work you think:

$id = ($item)->id;

from an array I mean
kerafyrm02
@kerafyrm02
Mar 18 2018 21:24
if it's an arrray then you need [0]
but json objects are objects in php
so you need to use ->
if item is array
it's $item[0]->id
if you vardump the variable i can tell you instantly how to access it
jenseo
@jenseo
Mar 18 2018 21:27
Give me a sec, need to isolate it from the rest of the function
niniyzni
@niniyzni
Mar 18 2018 22:10

@bradtaniguchi hey thanks for your reply...those errors went away I used the same logic at other places but error not going...any ides ahow to fix the below errors

https://gist.github.com/niniyzni/f13970f55af61602ee24b01c7ebbc099


app/components/-update.ts(101,21): error TS2339: Property 'Default' does not exist on type 'string'.
app/components/-update.ts(104,32): error TS2407: The right-hand side of a 'for...in' statement must be of type 'any', an object type or a type parameter.
app/components/-update.ts(141,5): error TS2322: Type '{}' is not assignable to type 'string'.
app/components/-update.ts(163,6): error TS2322: Type '{}' is not assignable to type 'string'.
app/components/-update.ts(171,5): error TS2450: Left-hand side of assignment expression cannot be a constant or a read-only property.
app/components/-update.ts(176,21): error TS2407: The right-hand side of a 'for...in' statement must be of type 'any', an object type or a type parameter.
app/components/-update.ts(179,84): error TS2339: Property 'columns' does not exist on type 'string'.
app/components/-update.ts(212,32): error TS2339: Property 'columns' does not exist on type 'string'.
CamperBot
@camperbot
Mar 18 2018 22:10
niniyzni sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
:cookie: 423 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
Brad
@bradtaniguchi
Mar 18 2018 22:27
@niniyzni the other errors are more severe basically all of them except the for...in errors are saying your inital type definitions are wrong/ or your doing something your not suppose to, for example if your variable is a string, you can check the columns property.
niniyzni
@niniyzni
Mar 18 2018 22:29
@bradtaniguchi can you tell me how to fix it
Brad
@bradtaniguchi
Mar 18 2018 22:33
Fix all of your errors on an individual basis? Its all use cases of the what you actually want, needs to reflect what your telling typescript.
niniyzni
@niniyzni
Mar 18 2018 22:35
@bradtaniguchi ok thanks
CamperBot
@camperbot
Mar 18 2018 22:35
niniyzni sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
api offline
niniyzni
@niniyzni
Mar 18 2018 22:51
@bradtaniguchi thanks
CamperBot
@camperbot
Mar 18 2018 22:51
niniyzni sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
api offline
Brad
@bradtaniguchi
Mar 18 2018 22:51
@niniyzni np :)
niniyzni
@niniyzni
Mar 18 2018 22:53
@bradtaniguchi I am trying not able to achieve...can you update in my gist...please
Brad
@bradtaniguchi
Mar 18 2018 22:53
a 500 line gist?
After looking at the gist I must ask why are you using angular anyways? There's no real angular code.
niniyzni
@niniyzni
Mar 18 2018 22:59
since my codebase is angular
@niniyzni I am trying to convert this fiddle from jquery to angular2 http://jsfiddle.net/zyxkujmL/
@bradtaniguchi I am trying to convert this fiddle from jquery to angular2 http://jsfiddle.net/zyxkujmL/
Brad
@bradtaniguchi
Mar 18 2018 23:01
If you want to convert it why don't you remove jquery entirely then? and do everything "the angular way"
@niniyzni
niniyzni
@niniyzni
Mar 18 2018 23:02
@bradtaniguchi not sure how to do...can you help me
Brad
@bradtaniguchi
Mar 18 2018 23:02
Why not read about how to use angular then?
@niniyzni
niniyzni
@niniyzni
Mar 18 2018 23:12
@bradtaniguchi hey any idea how to get drop down menu value in angular 2
Brad
@bradtaniguchi
Mar 18 2018 23:15
@niniyzni Most implementations I see used are using libs since there's multiple ways to create/use dropdowns. But you should be able to use the normal html5 dropdown in most cases, fancier stuff might require you to create your own directives/components, or using someone elses
niniyzni
@niniyzni
Mar 18 2018 23:24
@bradtaniguchi hey plunker in app.component.ts I am trying to display my grid...but its not showing any idea https://plnkr.co/edit/xavnTLGJFjQOSJ26VnsQ?p=preview
@bradtaniguchi I even included kendo library
Brad
@bradtaniguchi
Mar 18 2018 23:30
@niniyzni I'll check it out later, currently on mobile. Send a PM with the link I'll look at it. Also most angular examples are hosted on stackblitz now, since plunker is unreliable and slow
niniyzni
@niniyzni
Mar 18 2018 23:44
@bradtaniguchi hey I tried in stackblitz too...but its not working https://stackblitz.com/edit/angular2-notification-test-pz4kng?file=app%2Ffirst%2Ffirst.component.ts