These are chat archives for FreeCodeCamp/HelpJavaScript

4th
Feb 2018
Janina Pohorecki
@janepohorecka
Feb 04 2018 00:49
Hey guys. My problem is understanding javascript and how to truly use it in a timely, efficient manner. I am looking for reading/resource recommendations to properly learn the language from the bottom up.. Currently I am trying to manipulate SVG bezier curves so that I get a wavy animation. I have tried all day to implement this and all I am left with is a bunch of scribbles connected to my <button> tags. It's pretty frustrating to say the least. https://codepen.io/janepoho/pen/payygM
Randell Dawson
@RandellDawson
Feb 04 2018 01:21
@janepohorecka What exactly are you trying to accomplish with the bezier curves? What do you want the animation to do?
Janina Pohorecki
@janepohorecka
Feb 04 2018 01:24
@randelldawson I want it to look like this:
Screen Shot 2018-02-03 at 6.01.15 PM.png
@randelldawson I saw this on a website and I want to recreate it
CamperBot
@camperbot
Feb 04 2018 02:33
flashhero sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1533 | @alpox |http://www.freecodecamp.org/alpox
Randell Dawson
@RandellDawson
Feb 04 2018 03:52
@janepohorecka Did you take a peak at the site's html/css/JavaScript to see how they did it? I would start there and then figure out what various tweaks to the code do to the waves, which will help you gain an understanding of how to implement something similar but not necessarily the same.
Janina Pohorecki
@janepohorecka
Feb 04 2018 03:56
@randelldawson I have not. I've worked on it a little further and now I am here: https://codepen.io/janepoho/pen/mXPEZV
@randelldawson the ultimate goal is this:
Screen Shot 2018-02-03 at 8.02.50 PM.png
Maks Ushakov
@maks-ushakov
Feb 04 2018 08:26

@janepohorecka
My DevTools console says your code has an error in attr d

Do you want static SVG picture or it will be dynamic?
You know you can use realative coordinates

Razvan Jackson
@RazvanJackson
Feb 04 2018 08:33
Hey guys!
console.log(this.props.users.users, this.props.users[1])
why this.props.users.users shows me an array
and this.props.users[1] = undefined in React?
Razvan Jackson
@RazvanJackson
Feb 04 2018 08:40
My bad :)
Any React users here?
Maks Ushakov
@maks-ushakov
Feb 04 2018 08:46
@RazvanJackson
I'm not React but what this.props.users show. I guess it will be Object.
try it and this.props.users.users[1]
Razvan Jackson
@RazvanJackson
Feb 04 2018 08:47
@maks-ushakov It's working. Thanks :)
CamperBot
@camperbot
Feb 04 2018 08:47
razvanjackson sends brownie points to @maks-ushakov :sparkles: :thumbsup: :sparkles:
:cookie: 375 | @maks-ushakov |http://www.freecodecamp.org/maks-ushakov
Razvan Jackson
@RazvanJackson
Feb 04 2018 08:47
@maks-ushakov Even if i found it myself but now i have another problem
renderUsers(){
       console.log(this.props.users.users[0])
    }

    render(){
        this.renderUsers()
        return (<h1>Sal</h1>)
    }
this logs the users then say
{name: "Razvan", age: 18}
UserList.js:10 Uncaught TypeError: Cannot read property '0' of undefined
but it finds it...
Quantomistro3178
@Quantomistro3178
Feb 04 2018 08:48
How can I make a <p> element mimic the value typed into a <textarea>? Is Angular the only way to do that?
Razvan Jackson
@RazvanJackson
Feb 04 2018 08:48
@Quantomistro3178 I think you can do it with jQuery
Quantomistro3178
@Quantomistro3178
Feb 04 2018 08:49
@RazvanJackson How?
Razvan Jackson
@RazvanJackson
Feb 04 2018 08:49
@Quantomistro3178 2sec to open codepen and let me try
@Quantomistro3178 Here you go
$(document).ready(function(){
  $('input').on('input', function(){
    console.log(this.value)
    $('p').text(this.value)
  });
});
<input>
<p></p>
Whenever you input smth in input the value of p changes
Quantomistro3178
@Quantomistro3178
Feb 04 2018 08:55
@RazvanJackson What about textarea?
Razvan Jackson
@RazvanJackson
Feb 04 2018 08:57
change input with textarea ...
Quantomistro3178
@Quantomistro3178
Feb 04 2018 08:58
@RazvanJackson Could you please explain me your code?
Razvan Jackson
@RazvanJackson
Feb 04 2018 08:58
@Quantomistro3178 Yes
<textarea></textarea>
<p></p>
this is the HTML don't think you need an explanation
Quantomistro3178
@Quantomistro3178
Feb 04 2018 08:59
Yeah, just the jQuery bit
Razvan Jackson
@RazvanJackson
Feb 04 2018 09:01
$(document).ready(function(){ // After the document is ready / full compiled or smth like that
  $('textarea').on('input', function(){ // $('textarea') get the tag textarea and add an event to it with '.on'('input') means whenever you type smth, then there's a callback function that get the p tag('p') and set it's innerHTML with the value of the textarea
    $('p').text(this.value)
  });
});
@Quantomistro3178 If you don't know jQuery watch some tuts and you'll get it. It's very easy
Quantomistro3178
@Quantomistro3178
Feb 04 2018 09:03
@RazvanJackson Ok thanks!
CamperBot
@camperbot
Feb 04 2018 09:03
quantomistro3178 sends brownie points to @razvanjackson :sparkles: :thumbsup: :sparkles:
:cookie: 280 | @razvanjackson |http://www.freecodecamp.org/razvanjackson
Razvan Jackson
@RazvanJackson
Feb 04 2018 09:03
@Quantomistro3178 You're welcome
Maks Ushakov
@maks-ushakov
Feb 04 2018 09:23
@RazvanJackson
what is line 10 on UserList.js?
Razvan Jackson
@RazvanJackson
Feb 04 2018 12:58
A React User on?
Stephen James
@sjames1958gm
Feb 04 2018 12:59
@RazvanJackson I am here
Tiago Correia
@tiagocorreiaalmeida
Feb 04 2018 13:03
does anyone know if its possible to change glitch asset's url?
Kelechi Chinaka
@ke1echi
Feb 04 2018 14:15
:wave: guys
Matej BoĆĄnjak
@mbosnjak01
Feb 04 2018 14:16
:wave:
Kelechi Chinaka
@ke1echi
Feb 04 2018 14:17
function scramble(str1, str2) {
  str1 = str1.split``;
  for (let i = 0; i < str2.length; i++) {
    if (str1.includes(str2[i])) {
      str1.splice(str1.indexOf(str2[i]),1,"");
    }else {
      return false;
    }
  }
  return true;
}
passes all test but timesout..any help with optimization
Sweet Coding :)
@SweetCodingInc
Feb 04 2018 14:17
@kelechy what's this syntax?
str1.split``; ?
shouldn't it be str1.split('');?
Kelechi Chinaka
@ke1echi
Feb 04 2018 14:19
same thing..just using backticks @SweetCodingInc
Sweet Coding :)
@SweetCodingInc
Feb 04 2018 14:21
@kelechy yeah.. I was asking about brackets
Kelechi Chinaka
@ke1echi
Feb 04 2018 14:22
doesnt go with brackets @SweetCodingInc
FlashHero
@FlashHero
Feb 04 2018 14:25
@RazvanJackson put curly braces around this.props.users.users[0]
Simon Cordova
@gbsimon87
Feb 04 2018 14:31
@sabahatullah Good to see you here buddy! hahaha
Good afternoon all...
Sweet Coding :)
@SweetCodingInc
Feb 04 2018 14:47
@kelechy I did it like this an I'm able to score 62/64
and passed all the performance tests
function getObjNotation(str){
  var obj = {}
  for(var i=0; i<str.length;i++){

   if(obj.hasOwnProperty(str[i])){
      obj[str[i]] += 1;
    } else {
      obj[str[i]] = 1;
    }
  }
  return obj;
}

function scramble(str1, str2) {
  var _str1, _str2;
  str1.length > str2.length ? (_str1 = str2, _str2=str1) : (_str1=str1, _str2=str2);

  var str1Obj = getObjNotation(_str1);
 var str2Obj = getObjNotation(_str2);
 var keys = Object.keys(str1Obj);
 for(var i=0; i< keys.length; i++){
   var k = keys[i];
   var c1 = str1Obj[k];
   var c2 = str2Obj[k];

   if(c2){
     if(c2 < c1) return false;
   } else {
     return false;
   }

 }
 return true;
}
I'm missing some small corner case
Stephen James
@sjames1958gm
Feb 04 2018 14:52
@kelechy Passed the tests - the key was to not search the whole arr1 each time
function scramble(str1, str2) {
  let arr1 = str1.split('').sort();
  let arr2 = str2.split('').sort();
  let base = 0;
   return arr2.every(arr2, c => {
     let ndx = arr1.indexOf(c, base);
     if (ndx == -1) {
       return false;
     }
     else {
       base = ndx + 1;
       return true;
     }
   })
}
Sweet Coding :)
@SweetCodingInc
Feb 04 2018 14:54
@sjames1958gm cool....
I guess code wars has put in place place some sissy perf tests...
those prototype methods absolutely bomb when there are like millions of elements in array :laughing:
Kelechi Chinaka
@ke1echi
Feb 04 2018 14:55
what was your logic like? @sjames1958gm
Sweet Coding :)
@SweetCodingInc
Feb 04 2018 14:56
I like this part .sort(); though...
Kelechi Chinaka
@ke1echi
Feb 04 2018 14:56
so what happens to the remain 2 test? :smile: @SweetCodingInc
Sweet Coding :)
@SweetCodingInc
Feb 04 2018 14:56
easy to do preemptive return...
@kelechy I solved it...
was a small semantic bug
Stephen James
@sjames1958gm
Feb 04 2018 14:57
@kelechy sort the strings so they had similar order, each search for the letter starts one after the last one found (handles duplicate letters)
The key was to shorten the search
Kelechi Chinaka
@ke1echi
Feb 04 2018 15:05
each search for the letter starts one after the last one found (handles duplicate letters) thats not really clear to me @sjames1958gm
Stephen James
@sjames1958gm
Feb 04 2018 15:07
@kelechy let ndx = arr1.indexOf(c, base); see base here it starts at one and is set to the index after the last match
so a second letter of the same value will match not match the first occurance of the same letter.
tundeiness
@tundeiness
Feb 04 2018 15:11
i need help please
$.ajax({

      type: "GET",
      url: wikiLink,
      async: false,
      dataType: "json",
      success: function(data) {
        //console.log('search successful');
        //console.log(data[2][0]);
        let pre = document.getElementByClassName("container");
        let dDiv = document.createElement("div");
        dDiv.Id = "content";
        let subDivs = document.createElement("div");
        subDivs.Id = "subs"
        dDiv.appenChild(subDivs);
        pre.appenChild(dDiv);

        dDiv.style.cssText = "color: green; border: 1px solid black; width: 900px;"

        subDivs.style.cssText = "background: yellow; border: 1px solid green; width: 900px;"

        for (var i = 0; i < data[2].length; i++) {   
          subDivs.innerHTML += (
  "<p>" + data[2][i] + "</p>" +
  "<p><a href=" + data[3][i] + "></a></p>"
  );

        }
      },

      error: function(errorMessage) {
        alert("error");
      }
    });
  });
Stephen James
@sjames1958gm
Feb 04 2018 15:55
@tundeiness what's the issue?
Nazar
@IsaakNazar
Feb 04 2018 16:05
@sjames1958gm hi Stephen :)
I'm currently struggling on calculator project so there's an issue
example
I type on input: 12.3+32.14.3-0.23 (just random numbers) . How to prevent from typing more than 1 .(dot) in a value?
the same question for operators (+ -
/)
Nazar
@IsaakNazar
Feb 04 2018 16:13
[here's the link](https://codepen.io/NazarIsaak/pen/GywzRR)
Stephen James
@sjames1958gm
Feb 04 2018 16:14
@IsaakNazar Well when they press . check if the current entry already has a . ? I assume you a function that is called on button press?
Pieter Stokkink
@forkerino
Feb 04 2018 16:14
@IsaakNazar Are you storing the currently typed number somewhere? In that case it is just a simple check to see if it is there.
Stephen James
@sjames1958gm
Feb 04 2018 16:14
@forkerino :+1:
Pieter Stokkink
@forkerino
Feb 04 2018 16:14
@sjames1958gm :v:
Tiago Correia
@tiagocorreiaalmeida
Feb 04 2018 16:15
does anyone around here have react js projects hosted on glitch?
when I upload the build files it doesnt upload's someof them not sure why
Pieter Stokkink
@forkerino
Feb 04 2018 16:15
never used glitch
Tiago Correia
@tiagocorreiaalmeida
Feb 04 2018 16:15
crap and heroku was giving me some strange errors :\
btw hey :D
Pieter Stokkink
@forkerino
Feb 04 2018 16:16
:wave:
What did heroku say?
Simon Cordova
@gbsimon87
Feb 04 2018 16:18
good aft
Tiago Correia
@tiagocorreiaalmeida
Feb 04 2018 16:18
sec will duplicate the project folder and start all over again to see if I get there this time if I run into an issue again wil llet you know and thanks :D
Nazar
@IsaakNazar
Feb 04 2018 16:23
@forkerino @sjames1958gm
12.3 ++ 32...45 **++321..000 this is a single string before clicking = button
so is it a good way to fix it with regexp?
Pieter Stokkink
@forkerino
Feb 04 2018 16:25
@IsaakNazar That's a problematic approach, in my opinion, because the regexp would need to take into account too many different possibilities. Easier to just keep track of one number that is being entered, until you hit an operator like + - * / =
Nazar
@IsaakNazar
Feb 04 2018 16:27
@forkerino yes you are right , but then I have to change my entire code , or almost :(
Pieter Stokkink
@forkerino
Feb 04 2018 16:27
@IsaakNazar well, sometimes we learn the hard way. Happens all the time.
Nazar
@IsaakNazar
Feb 04 2018 16:28
@forkerino :+1:
Pieter Stokkink
@forkerino
Feb 04 2018 16:28
@IsaakNazar I often had this in the past. Now I put more time into thinking it out before actually writing some code
but it still happens at times
some problems are just too complex to think out completely all the edge cases you will encounter
^ that grammar sucks, for example
:joy:
Nazar
@IsaakNazar
Feb 04 2018 16:33
@forkerino that's very good advice :+1:
FlashHero
@FlashHero
Feb 04 2018 16:35
@IsaakNazar If the current entered character is an operator then maybe you can check if the last entered character is an operator if yes then don't allow it to be entered
have an array of character that aren't allowed to be re written for example ['*','/','+','-']and check with the current entered character, if it's one of them, then don't allow it to be entered.
Nazar
@IsaakNazar
Feb 04 2018 16:42
@FlashHero what about 1.2.3333.... or 0000.....0.0.0.04356 and between them a lot of operators with some dots etc
FlashHero
@FlashHero
Feb 04 2018 16:56
@IsaakNazar include the dots in the array, don't allow repetition of dots and only allow one dot in a string of numbers for example 0.0..0 only allow one dot if the user has already entered a dot then don't allow it to be entered again only one dot is allowed and you can use split function to split between operators and check if that string already has a dot. I think that would work but I'm not sure
Nazar
@IsaakNazar
Feb 04 2018 17:03
@FlashHero good point, I'll think about that thx :+1:
CamperBot
@camperbot
Feb 04 2018 17:03
isaaknazar sends brownie points to @flashhero :sparkles: :thumbsup: :sparkles:
:cookie: 320 | @flashhero |http://www.freecodecamp.org/flashhero
Brian
@BrianCodes33
Feb 04 2018 17:49
anyone know how to make an svg element larger without using illustrator to change dimensions? I tried changing it in HTML and CSS but to no avail it stays the same height & width
Tiago Correia
@tiagocorreiaalmeida
Feb 04 2018 17:51
@forkerino by any luck do you still around?
you can give it a class and change its width and height
Janina Pohorecki
@janepohorecka
Feb 04 2018 17:57
@maks-ushakov I would like it to be dynamic.. I am not sure how to implement relative coordinates in a SVG
Brian
@BrianCodes33
Feb 04 2018 17:59
it stays fixed
Tiago Correia
@tiagocorreiaalmeida
Feb 04 2018 18:03
image.png
alpox
@alpox
Feb 04 2018 18:04
@tiagocorreiaalmeida Seems you did not install @babel/register
Tiago Correia
@tiagocorreiaalmeida
Feb 04 2018 18:05
I think I spotted the issue even tough it was in the apckage I think heroku is 2 smart for me :D
had it as devDependencies probably that's the issue :D
alpox
@alpox
Feb 04 2018 18:09
Yeaa if you use babel like this not only in development you should add it to normal dependencies :D
FlashHero
@FlashHero
Feb 04 2018 21:08
Should I learn flux or redux after reactjs ?
Stephen James
@sjames1958gm
Feb 04 2018 21:19
@FlashHero redux seems to be more popular now
FlashHero
@FlashHero
Feb 04 2018 21:27
@sjames1958gm ok thanks. I think i got a good grip on reactjs, now moving on to redux
CamperBot
@camperbot
Feb 04 2018 21:27
flashhero sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8937 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Feb 04 2018 21:35
@FlashHero good luck, redux can be challenging at first.
FlashHero
@FlashHero
Feb 04 2018 21:41

@sjames1958gm thanks. I had a question about reactjs if you have time

class Routes extends React.Component{
    render(){
        return(
            <main>
            <Route exact path='/' component={App}/>
            <Route exact path='/intro' component={Intro}/>
            <Route exact path='/home' component={App}/>
            </main>
            )
    }
}
ReactDOM.render(<BrowserRouter>
    <Routes />
    </BrowserRouter>, document.getElementById("app"));

Here why does every component rendered through one of the routes are nested within document.getElementById('app') because I don't want every component to be within document.getElementById('app'), it changes the whole style of the component and doesn't look the way it's expected.

CamperBot
@camperbot
Feb 04 2018 21:41
flashhero sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
api offline
Cengiz Gonen
@cetico
Feb 04 2018 22:42
@FlashHero facebook/create-react-app#1568
Stephen James
@sjames1958gm
Feb 04 2018 22:57
@FlashHero The app component is just the hook for putting your components into the DOM - your app component generally doesn't have any styling
FlashHero
@FlashHero
Feb 04 2018 23:00
@sjames1958gm so, I styled the #app in a way that it would be in the middle of the page, so does that mean every component will be in the middle of the page since they're within the #app element
FlashHero
@FlashHero
Feb 04 2018 23:06
@sjames1958gm your app component generally doesn't have any styling so you mean document.getElementById("app") doesn't need styling ?