These are chat archives for FreeCodeCamp/HelpJavaScript

8th
Apr 2018
Brian Teague
@B-Teague
Apr 08 2018 00:00
hello
oh goody, you are talking about react
kyle-kauzlarich
@kyle-kauzlarich
Apr 08 2018 00:23
@B-Teague got a react question?
Rahsheen Porter
@rahsheen
Apr 08 2018 02:23
Guess not :joy:
Derrick Hsiao
@DerrickHsiao
Apr 08 2018 04:04
How can I pass this challenge?
function wordBlanks(myNoun, myAdjective, myVerb, myAdverb) {
  var result = "";
  // 请把你的代码写在这条注释以下


  // 请把你的代码写在这条注释以上
  return result;
}

wordBlanks("dog", "big", "ran", "quickly");  // 你可以修改这一行来测试你的代码
Rahsheen Porter
@rahsheen
Apr 08 2018 04:06
Try the Hint button
Ken Haduch
@khaduch
Apr 08 2018 04:20
@DerrickHsiao - the basic idea is to use each of the function arguments, which represent words in a sentence (actually just word that you would put together in a string, separated by spaces) and stored in the variable result. You could add extra words to make it more sensible, but just using all of the function argument variables and putting them in a space-separated string would satisfy the requirements. The "Hint" button should give you guidance, as @rahsheen said...
Nazar
@IsaakNazar
Apr 08 2018 06:49
hey everybody!
Priyanka
@pd21
Apr 08 2018 07:22
Hi Can somebody help me with EJS?
I have just started working with EJS
<% if ((<%=i%>) == "partly-cloudy-day") { %>
<h2>Hello</h2>
<% } %>
This seems to not work ..
1Mher1
@1Mher1
Apr 08 2018 09:37
@sjames1958gm again Don't worked https://codepen.io/1Mher1/pen/VXVOYx
1Mher1
@1Mher1
Apr 08 2018 09:57
and please help me to do Write a function that returns an array as a parameter and returns the mean arithmetic of a pair of array elements
For example, avgF ([2,4,5,3,7,8,4]) should return 5, since (2 + 4 + 8 + 6) / 4 = 5 what going wrong in this code https://codepen.io/1Mher1/pen/VXVOYx I must do using recursion
anthonygallina1
@anthonygallina1
Apr 08 2018 10:18
@rahsheen :wave:
:)
Stephen James
@sjames1958gm
Apr 08 2018 12:52
@1Mher1 Do you see the red circle - you have a error Missing a '}'
Nazar
@IsaakNazar
Apr 08 2018 13:09
@sjames1958gm Hi Stephen, are U there?
Stephen James
@sjames1958gm
Apr 08 2018 13:09
Yes
@IsaakNazar Yes
Nazar
@IsaakNazar
Apr 08 2018 13:12
codepen
when user press Edit button forms automatically should filled up. am I in a right direction? Can you suggest anything pls
@sjames1958gm
Stephen James
@sjames1958gm
Apr 08 2018 13:12
@IsaakNazar yes
@IsaakNazar Your modal will need to know if it is edit or add. Or you could have separate modals.
Nazar
@IsaakNazar
Apr 08 2018 13:16
maybe I need Controlled Components ?
@sjames1958gm
Stephen James
@sjames1958gm
Apr 08 2018 13:19
@IsaakNazar I was thinking that you would.
Joshua Arnett
@josha5
Apr 08 2018 13:23
Could anyone help me with why jquery is removing a click event after clicking a submit form button
Nazar
@IsaakNazar
Apr 08 2018 13:23
@sjames1958gm then values from forms should be stored and declared in a parent component?
not inside Modal
Stephen James
@sjames1958gm
Apr 08 2018 13:26
@IsaakNazar I guess it depends on how you want to do it. Your recipe modal could hold the values
Joshua Arnett
@josha5
Apr 08 2018 13:31
@sjames1958gm Hey stephen, could you lend a helping hand lol
Stephen James
@sjames1958gm
Apr 08 2018 13:31
@josha5 I can try
Joshua Arnett
@josha5
Apr 08 2018 13:33
I'm using the giphy API, and generating buttons through jquery. The user is able to add a button of their own and when clicked should populate the page with gifs of the buttons text. After you click the button to add another button the clicks don't register
Currently posting everything to codepen real quick so you can see for yourself
Moisés Man
@moigithub
Apr 08 2018 13:34
"event delegation"
Stephen James
@sjames1958gm
Apr 08 2018 13:34
@josha5 You are adding click handlers to the new buttons after they are added?
Joshua Arnett
@josha5
Apr 08 2018 13:35
$(document).ready(function() {

    let topics = ["conor mcgregor", "floyd mayweather", "brock lesnar", "sage northcutt", "robbie lawler",
    "carlos condit", "rory macdonald", "tyron woodley", "stephen thompson", "jon jones", "eddie alvarez", 
    "justin gaethje"];


    const makeButtons = function() {
        $("#fighterButtons").empty();
        for(var i = 0; i < topics.length; i++) {
            let a = $("<button>");
            $(a).attr("id", "fighterBtn");
            $(a).addClass("btn btn-primary");
            $(a).attr("data-name", topics[i]);
            $(a).text(topics[i]);
            $("#fighterButtons").append(a);
        }
    }

    makeButtons();

    $("button").on("click", function() { 
        let fighter = $(this).text();
        console.log(fighter);
        let queryUrl =  "https://api.giphy.com/v1/gifs/search?q=" 
        + fighter + "&api_key=gkP8twXyLGmS0U6sa82mQ1ZfjNgaeeoW&limit=10";
        console.log(queryUrl);
        $.ajax({
            url: queryUrl,
            method: "GET"
        }).done(function(response) {
            let results = response.data;
            console.log(results);
            for(var i = 0; i < results.length; i++) {
                let fighterDiv = $("<div class='col-md-4'>");
                let gifImage = $("<img>");
                let defaultAnimatedSrc = results[i].images.fixed_height.url;
                let staticSrc = results[i].images.fixed_height_still.url;
                let rating = results[i].rating;
                gifImage.attr("src", staticSrc);
                gifImage.attr("data-animate", defaultAnimatedSrc);
                fighterDiv.prepend(gifImage);
                $("#gifArea").prepend(fighterDiv);
            }
        });
    });

    $("#addFighter").on("click", function(e) {
        e.preventDefault();
        let addedFighter = topics.push($("#fighterInput").val());
        console.log(topics);
        makeButtons();
    });


});
Stephen James
@sjames1958gm
Apr 08 2018 13:37
@josha5
$("button").on("click", function() {
this code is only going to run once, so any new buttons added are not going to have click handlers
@josha5 You can make your anonymous function a named function and when you create the button
$(a).on("click", clickHandlerFunction);
Also, aren't you going to have lots of extra buttons if you rerun the entire array each time you add a fighter?
Joshua Arnett
@josha5
Apr 08 2018 13:41
@sjames1958gm Ahhhh ok thank you very much and as of right now when the function runs only the new buttons are being added
CamperBot
@camperbot
Apr 08 2018 13:41
josha5 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9180 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Apr 08 2018 13:42
Oh, I missed the .empty at the top of the function
Nazar
@IsaakNazar
Apr 08 2018 13:46
@sjames1958gm about separate modals you mean each ingredient will have its own modal, right?
Stephen James
@sjames1958gm
Apr 08 2018 13:46
@IsaakNazar No, I meant there would be an add modal and an edit modal.
An edit modal would use controlled components and not do an add when you clicked save
it is just an idea
Nazar
@IsaakNazar
Apr 08 2018 13:50
@sjames1958gm alright thanx :+1:
CamperBot
@camperbot
Apr 08 2018 13:50
isaaknazar sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9181 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Apr 08 2018 13:50
@IsaakNazar good luck
Nazar
@IsaakNazar
Apr 08 2018 13:50
@sjames1958gm there's no luck without you guys
Joshua Arnett
@josha5
Apr 08 2018 13:52
@sjames1958gm Hey I'm a little confused on the clickHandlerFunction. So am I making my 'a' variable a global variable and then calling my click handler on that and passing in the makeButtons() function?
Stephen James
@sjames1958gm
Apr 08 2018 13:54

@josha5 Well in reality you could move the entire code

$("button").on("click", function() { 
...
})

inside your for loop replacing "button" with a
But it might be easier to read if you didn't use an anonymous function
so the

function() {
...
}

part above just becomes a named function and you use that name instead of the anonymous function

    const makeButtons = function() {
        $("#fighterButtons").empty();
        for(var i = 0; i < topics.length; i++) {
            let a = $("<button>");
            ...
             $(a).on('click', clickHandler);
            $("#fighterButtons").append(a);
        }
    }

   function clickHandler() {
     let fighter = $(this).text();
   ...
   }
For me it is easier to read this way rather than a big anonymous function in the middle of the for loop
Nazar
@IsaakNazar
Apr 08 2018 14:36
@sjames1958gm I've got one more question
@sjames1958gm what if I'll create Modal for each recipe? I've got generic RecipeModal, its shows up when click add recipe, and I want to create modal for each recipe when press edit.
Nazar
@IsaakNazar
Apr 08 2018 14:41
so each recipe will have its own individual Modal
Joshua Arnett
@josha5
Apr 08 2018 14:41
@sjames1958gm Thanks again stephen everything is working had to go grab breakfast haha!
CamperBot
@camperbot
Apr 08 2018 14:41
josha5 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
api offline
Stephen James
@sjames1958gm
Apr 08 2018 14:41
@IsaakNazar Currently you add modal is created but never destroyed? For the edit Modal it would be created when you click edit from the current recipe.
Surely not have a predefined modal for every recipe - seems inefficient memory wise
@josha5 :+1: glad to here. Wasn't sure my explanation was clear.
Nazar
@IsaakNazar
Apr 08 2018 14:44
@sjames1958gm agreed, you're right, as always, thanx
CamperBot
@camperbot
Apr 08 2018 14:44
isaaknazar sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
api offline
Derrick Hsiao
@DerrickHsiao
Apr 08 2018 15:02
Word Blanks
function wordBlanks(myNoun, myAdjective, myVerb, myAdverb) {
  var result = "";
  // 请把你的代码写在这条注释以下


  // 请把你的代码写在这条注释以上
  return result;
}

wordBlanks("dog", "big", "ran", "quickly");  // 你可以修改这一行来测试你的代码
help!
Nazar
@IsaakNazar
Apr 08 2018 15:11
@DerrickHsiao what's a description of the task?
I guess it should be a single sentence? try myAdjective + myNoun +myVerb +myAdverb and space between
Norvin Burrus
@ndburrus
Apr 08 2018 15:55
@DerrickHsiao this may be useful: :sparkles:
Stephen James
@sjames1958gm
Apr 08 2018 16:02
@ndburrus Norvin, your middle name has to be "link" :)
Nazar
@IsaakNazar
Apr 08 2018 16:03
:laughing:
Norvin Burrus
@ndburrus
Apr 08 2018 16:19
@sjames1958gm we have to be careful... never know what will catch on: :sparkles:
Rahsheen Porter
@rahsheen
Apr 08 2018 16:49
@DerrickHsiao You still on this? Did you try the hint button?
JJ Megma
@megma_jj_twitter
Apr 08 2018 18:45
@DerrickHsiao hi. you are return empty string
Stephen James
@sjames1958gm
Apr 08 2018 18:57
@ndburrus lol
Norvin Burrus
@ndburrus
Apr 08 2018 19:02
@sjames1958gm funny reactions... :sparkles:
Stephen James
@sjames1958gm
Apr 08 2018 19:02
@ndburrus I know it is ironic that you posted a link about getting a nickname Mr Link :)
Norvin Burrus
@ndburrus
Apr 08 2018 19:05
@sjames1958gm ...quietly exiting - stage left... "that's all folks, thanks for stopping by!" (waves goodbye). :fire:
CamperBot
@camperbot
Apr 08 2018 19:05
ndburrus sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9182 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
FlashHero
@FlashHero
Apr 08 2018 19:09
How to get the height of an element from another component in reactjs when there's no connection between two components ?
Norvin Burrus
@ndburrus
Apr 08 2018 19:19
@FlashHero these may be useful: :sparkles:
Norvin Burrus
@ndburrus
Apr 08 2018 19:27
@sjames1958gm ...reading
FlashHero
@FlashHero
Apr 08 2018 19:31
@ndburrus thanks
CamperBot
@camperbot
Apr 08 2018 19:31
flashhero sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:star2: 2199 | @ndburrus |http://www.freecodecamp.org/ndburrus
Rahsheen Porter
@rahsheen
Apr 08 2018 19:39
@FlashHero Can I ask why you'd be getting the height of an elementt from an entire other component? Are you using Redux? (not that I'm recommending it, just curious)
FlashHero
@FlashHero
Apr 08 2018 19:43
@rahsheen no I needed to scroll to a certain height of an element, hard coding the value doesn't work for all screens. It's not really an entire different component, just child component to another child component and one component which controls the clicks needs to know the height to scroll
Rahsheen Porter
@rahsheen
Apr 08 2018 19:44
So seems like you could pass the value down? How are you calculating the hieight of this element? Can that not be done in the component that actually needs it?
Or did you solve this already? :)
Norvin Burrus
@ndburrus
Apr 08 2018 19:45
@FlashHero you're welcome! enjoy :+1:
FlashHero
@FlashHero
Apr 08 2018 19:46
@rahsheen no I'm looking through the article @ndburrus recommended
Rahsheen Porter
@rahsheen
Apr 08 2018 19:47
So, if it's a child of a child, you could just pass the value down.
FlashHero
@FlashHero
Apr 08 2018 19:49
@rahsheen I have a main component that displays everything and everything else are child components and you can't pass down the value, it only works if you pass the value down from the parent component
And I got multiple components, so I can't make them all parent components to pass down the props
Rahsheen Porter
@rahsheen
Apr 08 2018 19:51
Not sure what you mean by "make them parent components". You can pass props from any component.
FlashHero
@FlashHero
Apr 08 2018 19:53
@rahsheen every component that has the element that I want to get the height of are child components and you can't pass props from a child component to a child component
Rahsheen Porter
@rahsheen
Apr 08 2018 19:55
That's where you're losing me. you can definitely pass props from a child componentt to a child component. Is this project online somewhere?
If this is latest React, you also can use the new Context API https://medium.com/dailyjs/reacts-%EF%B8%8F-new-context-api-70c9fe01596b
Norvin Burrus
@ndburrus
Apr 08 2018 19:57
@sjames1958gm I think... I feel good about it :sparkles:
FlashHero
@FlashHero
Apr 08 2018 20:00
@rahsheen can you pass props without calling another child component within a child component
Rahsheen Porter
@rahsheen
Apr 08 2018 20:02
That's why I was asking if the project was online. To be clear about the structure. In that case, you'd either think about restructuring your app a bit or use Context....or add an entire state-management framework like Redux/Mobx/whatever.
FlashHero
@FlashHero
Apr 08 2018 20:05
@rahsheen I don't have it online but I'm looking into the context api
@rahsheen thanks appreciate your help
CamperBot
@camperbot
Apr 08 2018 20:05
flashhero sends brownie points to @rahsheen :sparkles: :thumbsup: :sparkles:
:star2: 1457 | @rahsheen |http://www.freecodecamp.org/rahsheen
alpox
@alpox
Apr 08 2018 21:09
@FlashHero the context api should not be used if you can come around. In react 16 there is a new api (dont remember the name) which replaces it. The same behavior is available for react below through the library react-broadcast. Still, i would also not use that one as long as there are other solutions like a state management system kr direct communication (which is no problen when its only parent/child)
@FlashHero i just see that @rahsheen linked to the right context api, the new one, which can be used without much hesitation.
Pjdaze
@Pjdaze
Apr 08 2018 21:18
hey my peeps how is everyone
jusgoose
@gusd773
Apr 08 2018 21:20
does anybody know how to add this to my html as external script? I am trying to learn how to use text editor and not use code pen anymore https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js I am trying to animate the search button to roll out the search box
Matej Bošnjak
@mbosnjak01
Apr 08 2018 21:22
@gusd773 <script src="link"></script>
jusgoose
@gusd773
Apr 08 2018 21:49
thanks @mbosnjak01
CamperBot
@camperbot
Apr 08 2018 21:49
gusd773 sends brownie points to @mbosnjak01 :sparkles: :thumbsup: :sparkles:
:cookie: 260 | @mbosnjak01 |http://www.freecodecamp.org/mbosnjak01