These are chat archives for FreeCodeCamp/HelpJavaScript

28th
Nov 2017
AbrisM
@AbrisM
Nov 28 2017 00:26
Hi does anyone know how to convert jquery into Javascript? This is the jquery i'm trying to convert $(".heading").each(function() {
var $this, colors;
$this = $(this);
colors = getColors();
$this.css({"backgroundColor": colors[0], "color": colors[1], "fontFamily": getFont()});
}); It's for line 55 to line 66 in the code here https://jsfiddle.net/tf7nb6yz/
Jason Luboff
@JLuboff
Nov 28 2017 01:02
@tiagocorreiaalmeida No..haven't been around. First tiem on a computer since last tuesday
Randell Dawson
@RandellDawson
Nov 28 2017 01:06
@AbrisM - If you mean convert to vanilla JavaScript, then how about the following:
document.querySelectorAll(".heading").forEach(function(head) {
  var colors = getColors();
  head.setAttribute("style", "backgroundColor: " + colors[0] + "; color: " + colors[1] + "; fontFamily: " + getFont() + ";");
});
AbrisM
@AbrisM
Nov 28 2017 01:12
@randelldawson Hmm, I think that might just work. What about? $("body").keyup(function(e) {
var colors = getColors();
if((e.which>=65&&e.which<=90)||e.which==88||e.which==90||(e.which>=48&&e.which<=57)) {
("<div class='letter'>"+String.fromCharCode(e.which)+"</div>").appendTo(".paper").css({"backgroundColor": colors[0], "color": colors[1], "fontFamily": getFont(), "fontSize": getSize(), "padding": getPadding(), "marginRight": getMargin(), "transform": getTransform()}).wrap("<div class='zoom'>");
} Thank you for helping btw, I am almost finished with just these last parts
CamperBot
@camperbot
Nov 28 2017 01:12
abrism sends brownie points to @randelldawson :sparkles: :thumbsup: :sparkles:
:cookie: 308 | @randelldawson |http://www.freecodecamp.org/randelldawson
Randell Dawson
@RandellDawson
Nov 28 2017 01:18
@AbrisM - If you study the code I provided, you should be able to come up with a vanilla JavaScript solution for this other part. Try to make it work and if you get stuck, then post an update JSFiddle link and someone can take a look. You will need to use the addEventListener function to get the keyup part to work. Also, you need to review the documentation for addEventListener to make sure you understand how to get the key code values. When all else fails, you can use console.log statements for the variable named "e" to see what properties it has which you could use. The css part will be exactly the same as what I did in the previous code.
FlashHero
@FlashHero
Nov 28 2017 01:32
anyone on ?
Brad
@bradtaniguchi
Nov 28 2017 01:34
@FlashHero hello
FlashHero
@FlashHero
Nov 28 2017 01:34
hi
https://codepen.io/flash_boy/pen/YEOaPy It functions well but if you click the button too many times it miss calculates the time and returns NaN, so is that fine ?
Brad
@bradtaniguchi
Nov 28 2017 01:45

@FlashHero It looks like its because your calculating the time with

 count = parseInt($('#show').text()) * 60;
     console.log('test: ', count, '=', $('#show').text());
     click++;
    ...
     if (click % 2 == 0) {
         var arr = $('#show').text().split(':');
         var min = parseInt(arr[0]);
         var sec = parseInt(arr[1]);
         resume = (min * 60) + sec;
         $('#show').text('break');
         clearInterval(stop);
     }

But, you change the text to 'break' at the end, and the next time you click, it calculates 'break' * 60, which results in NaN

FlashHero
@FlashHero
Nov 28 2017 01:49
@bradtaniguchi oh i see thanks man, so am i good to go, does it work on your computer now
CamperBot
@camperbot
Nov 28 2017 01:49
flashhero sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
:cookie: 317 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
Brad
@bradtaniguchi
Nov 28 2017 01:50
@FlashHero Yea it looks like the original issue has been fixed, np and goodluck :)
FlashHero
@FlashHero
Nov 28 2017 01:52
now, on to the other project
Lean Junio
@leanjunio
Nov 28 2017 06:49
Hey guys, what did you use to learn Passport.js? Just the docs?
alpox
@alpox
Nov 28 2017 07:45
@leanjunio Pretty much
dofyk
@dofyk
Nov 28 2017 09:28
could anyone help me with my JS assignment please? I am not that great at coding and just a starter basically. I just have a bug that i don't know how to solve
@dofyk post the error
or wait, should it be put the error ?
dofyk
@dofyk
Nov 28 2017 09:35
So it'
So it's a bit complicated but i'll try to explain
Adel
@AdelMahjoub
Nov 28 2017 09:36
@dofyk where is the error :fire:
dofyk
@dofyk
Nov 28 2017 09:37
I am trying to spawn multiple triangles which is drawTerry function randomly on canvas by pressing Space bar but it wouldn't stay on canvas and disapear
it's in spawnTerry function
Adel
@AdelMahjoub
Nov 28 2017 09:37
@dofyk so you want them to disappear after drawing ?
dofyk
@dofyk
Nov 28 2017 09:37
i want them to always stay on canvas
and move as a group when arrows on keyboard are pressed
basically im adding them to an array
Adel
@AdelMahjoub
Nov 28 2017 09:38
@dofyk ok, let me try the code
dofyk
@dofyk
Nov 28 2017 09:38
thank you
Adel
@AdelMahjoub
Nov 28 2017 09:39
@dofyk no problem
dofyk
@dofyk
Nov 28 2017 09:41
sorry let me send you html
Adel
@AdelMahjoub
Nov 28 2017 09:42
@dofyk so you don't want the triangle to cross the canvas borders ?
dofyk
@dofyk
Nov 28 2017 09:43
yes i want them to stay in canvas
when they hit borders they just stop
like hitting a wall
Adel
@AdelMahjoub
Nov 28 2017 09:43
@dofyk actually they stop when they hit the wall
dofyk
@dofyk
Nov 28 2017 09:44
yes it's already done
I just have problems with drawing them and moving together
Adel
@AdelMahjoub
Nov 28 2017 09:46
@dofyk I see what you mean, you want all the triangles to stay on the canvas and move
dofyk
@dofyk
Nov 28 2017 09:46
yes like a group
It also only spawns triangles in the bottom right, I was trying to fix that as well but i can never let it show up at random places around the canvas but only either in corners or small part of canvas
Adel
@AdelMahjoub
Nov 28 2017 10:25
@dofyk I made them move all together, but for the rest, most of the code should change
@dofyk each time you create a new TinyTerry you need to keep trak of that object
@dofyk so on each keydown, all terrys in the array should redraw
dofyk
@dofyk
Nov 28 2017 10:27
yeah i was thinking this way but i didnt know how to make them do it
because in console it was giving them random x; and y; but i wasn
wasn't sure how to make them to draw at those x and y
Adel
@AdelMahjoub
Nov 28 2017 10:29
@dofyk you need to make some changes, first a TinyTerry object, with properties and a draw function
@dofyk so that way, each TinyTerry can draw itself
dofyk
@dofyk
Nov 28 2017 10:29
okay, make sense
Adel
@AdelMahjoub
Nov 28 2017 10:30
@dofyk and each time you press a key, all those TinyTerry should update their x or y and redraw
@dofyk so when you press space, a new TinyTerry instance is added to the TinyTerry array
@dofyk and on each keydown, you loop the TinyTerry array and update their coords and redraw
dofyk
@dofyk
Nov 28 2017 10:32
so i would update it in doKeyDown function?
Adel
@AdelMahjoub
Nov 28 2017 10:33
@dofyk you also need to make all the coords relative to each TinyTerry, not a global x and y, because you don't want them all in the same position
@dofyk you need to update the turn functions
dofyk
@dofyk
Nov 28 2017 10:35
but if i set x and y not global then my drawTerry would not work and most of the code as well
Adel
@AdelMahjoub
Nov 28 2017 10:37
@dofyk yes, most of the code should change, but you'll write less code
dofyk
@dofyk
Nov 28 2017 10:40
Sorry for bothering too much, and also thanks for helping so much. Since there is a lot of things to change, what would be the best to start with?
Adel
@AdelMahjoub
Nov 28 2017 10:55
@dofyk a TinyTerry object
dofyk
@dofyk
Nov 28 2017 11:05
Okay, thanks a lot anyways. I'll try my best to fix it.
Alexander Køpke
@alexanderkopke
Nov 28 2017 11:45
a
Ghost
@ghost~59cdefc7d73408ce4f77dab0
Nov 28 2017 12:08
Hi guys
image.png
This is an element of my ul
I want to space out the <i> and <a> how can I do that?
it looks like this currently
image.png
Markus Kiili
@Masd925
Nov 28 2017 12:14
@parthprakash1 Try margin or padding css properties.
Ghost
@ghost~59cdefc7d73408ce4f77dab0
Nov 28 2017 12:23
Alright @Masd925 Thx
CamperBot
@camperbot
Nov 28 2017 12:23
parthprakash1 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4585 | @masd925 |http://www.freecodecamp.org/masd925
Adel
@AdelMahjoub
Nov 28 2017 12:47
@dofyk You can add the rotation in the draw TinyTerry function, relative to the direction. Now the TinyTerries spawn at random positions withing the canvas range, and all moves together. https://gist.github.com/dofyk/8b615adbe3bd5a271d8dccf3d4eaa244#gistcomment-2270488
@dofyk for the html, add any div, and pass a reference to that div for the Renderer.render method
Adel
@AdelMahjoub
Nov 28 2017 12:57
@dofyk what changes is the TinyTerry class, each time you hit space you add an instance of TinyTerry on an array that holds all the instances, and for each movement you call the draw method of each TinyTerry
class TinyTerry {

    /**
     * TinyTerry instances constructor
     * @param {{x: number, y: number, side: number, fillStyle: string, strokeStyle: string, speed: number}} props 
     */
    constructor(props = {}) {
      this.x = props['x'] || 0;
      this.y = props['y'] || 0;
      this.speed = 10;
      this.side = props['side'] || 20;
      this.fillStyle = props['fillStyle'] || 'black';
      this.strokeStyle = props['strokeStyle'] || 'red';
    }

    /**
     * Draw an equilateral trinagle
     * @param {CanvasRenderingContext2D} ctx 
     */
    draw(ctx) {
      let h = (this.side * Math.sqrt(3) / 2);
      ctx.save();
      ctx.strokeStyle = this.strokeStyle;
      ctx.fillStyle = this.fillStyle;
      ctx.translate(this.x, this.y);
      ctx.beginPath();
      ctx.moveTo(0, - h / 2);
      ctx.lineTo( - this.side / 2, h / 2);
      ctx.lineTo(this.side / 2, h / 2);
      ctx.lineTo(0, -h / 2);
      ctx.stroke();
      ctx.fill(); 
      ctx.closePath();
      ctx.restore();
    }

    /**
     * Update TinyTerry position
     * @param {CanvasRenderingContext2D} ctx 
     */
    update(ctx) {
      let vy = 0;
      let vx = 0; 
      if(controls.up && !controls.down){
        vy = -this.speed;
      }
      if(controls.down && !controls.up){
        vy = this.speed;
      }
      if(controls.left && !controls.right){
        vx = -this.speed;
      }
      if(controls.right && !controls.left){
        vx = this.speed;
      }
      if(!controls.up && !controls.down){
        vy = 0;
      }
      if(!controls.left && !controls.right){
        vx = 0;
      }
      this.x += vx;
      this.y += vy;

      this.x = Math.max(0, Math.min(this.x, ctx.canvas.width));
      this.y = Math.max(0, Math.min(this.y, ctx.canvas.height));
    }
  }
Ronique Ricketts
@RoniqueRicketts
Nov 28 2017 13:00
Hey guys any wordpress devs here?
wcc0326
@wcc0326
Nov 28 2017 14:24
修改函数abTest当a或b小于0时,函数立即返回一个undefined并退出。
karinafarina
@karinafarina
Nov 28 2017 14:25
// Setup
var myObj = {
  gift: "pony",
  pet: "kitten",
  bed: "sleigh"
};

function checkObj(checkProp) {
  // Your Code Here

  if(myObj.hasOwnProperty(checkProp)){
    return checkProp;
  } else {
  return "Not Found";
  }
}

// Test your code by modifying these values
checkObj("gift");
Long Nguyen
@longnt80
Nov 28 2017 14:30
what does the !! called?
Stephen James
@sjames1958gm
Nov 28 2017 14:32
@karinafarina You need to return the value of the property in myObj, not just the property passed in
@longnt80 Are you asking what is !! called? I am not sure it has a name, maybe bang bang?
Long Nguyen
@longnt80
Nov 28 2017 14:33
@sjames1958gm it is used to turn string to boolean, right?
Stephen James
@sjames1958gm
Nov 28 2017 14:34
well anything to a boolean.
Maybe not objects.
Long Nguyen
@longnt80
Nov 28 2017 14:34
@sjames1958gm thanks, I got it. Yeah, it is bang bang or double bangs
CamperBot
@camperbot
Nov 28 2017 14:34
longnt80 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8720 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
karinafarina
@karinafarina
Nov 28 2017 14:39
@sjames1958gm , how?
Stephen James
@sjames1958gm
Nov 28 2017 14:40
@karinafarina The previous lesson with playerNumber showed how to use
a variable to get the property value from an object.
var player = testObj[playerNumber];
karinafarina
@karinafarina
Nov 28 2017 14:46
Is It possible that my mind just doesn't work this way? This is the third time I have tried to learn JS and Ihave always had such a difficult time. I was alway good at math and logic but my mind just seems to not think in this way.
// Setup
var myObj = {
  gift: "pony",
  pet: "kitten",
  bed: "sleigh"
};

function checkObj(checkProp) {
  // Your Code Here

  if(myObj.hasOwnProperty(checkProp)){
    return checkProp[myObj];
  } else {
  return "Not Found";
  }
}

// Test your code by modifying these values
checkObj("gift");
Moisés Man
@moigithub
Nov 28 2017 14:50
object variable should be left side...
karinafarina
@karinafarina
Nov 28 2017 14:55
@moigithub I don't understand what you mean
Moisés Man
@moigithub
Nov 28 2017 14:55
u have 2 variables...
myObj and checkProp
karinafarina
@karinafarina
Nov 28 2017 14:56
I got it,thank you
Stephen James
@sjames1958gm
Nov 28 2017 15:02
@karinafarina A lot of the time it is just getting your head around the syntax and what it implies.
I would think that being good at math should help.
Nerando Johnson
@Nerajno
Nov 28 2017 15:07
I need a bit of help
var channels =["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "brunofin", "comster404","RealKraftyy?"];
//Runs Jquery
$(document).ready(function(){
  // Fetches FCC Stream info and api status call
  //The main api
  var url2 = "https://wind-bow.glitch.me/twitch-api/streams/";
  var i = 0;
  while (i <channels.length){
    //Adds the channels from the array
    var url3 = url2+channels[i];
    var channel_listing = channels[i];
    // console.log(url3);
    $.getJSON(url3,function(data){
    //   // console.log(url3);
      var exercise = data.stream;
      // var title = data.stream.channel.display_name;
      console.log(exercise);
      if (exercise === null) {
        console.log("The "+channel_listing +" is Offline");
      }else {
        var title = data.stream.channel.display_name;
        console.log(title);
    //     // var url3 = url2+channels[i];
    //     // console.log(url3);
    //     // console.log("This array number"+ counter);
      }
    });
    i++;
  }
  });
So i am trying to get the channel_listing to iterate through and print array[i] in each loop( i think i jus figured it out )
Stephen James
@sjames1958gm
Nov 28 2017 15:20
@Nerajno Because of closure every callback shares the channel_listing variable which is the value from the last iteration.
Nerando Johnson
@Nerajno
Nov 28 2017 15:21
@sjames1958gm . lost
@sjames1958gm what would i have to do ?
Stephen James
@sjames1958gm
Nov 28 2017 15:24

@Nerajno You can use a for loop with let instead of var.
Then move var channel_listing = channels[i]; this inside the callback.

for (let i = 0; i < channels.length) {
}

let has different variable scoping than var

karinafarina
@karinafarina
Nov 28 2017 15:24
Thanks @sjames1958gm I'll keep trying
CamperBot
@camperbot
Nov 28 2017 15:24
karinafarina sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8721 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Nov 28 2017 15:25
@karinafarina Keep at it and keep asking!
Nerando Johnson
@Nerajno
Nov 28 2017 15:34
ok lemmie try
talk later i got wrk in 1/2 hr
Bryan Reese
@breese8009
Nov 28 2017 15:44
trying to understand....what is docker? https://docs.docker.com/docker-for-mac/install/
Stephen James
@sjames1958gm
Nov 28 2017 15:46
@breese8009 docker creates a virtual environment, so that you can run virtual machines 'inside' your system.
Bryan Reese
@breese8009
Nov 28 2017 15:47
@sjames1958gm can you give me an example of that/?
Stephen James
@sjames1958gm
Nov 28 2017 15:47
I have some software that only runs on an older version of Linux, so I use docker to create a system running that S/W.
docker provides interfaces such as networking and mounting of disks so that you can interact from the virtual system
with the real world
Christopher
@bradley1492
Nov 28 2017 15:48

Hey guys, I am working on the https://www.freecodecamp.org/challenges/smallest-common-multiple challenge. I managed to put the range of numbers to an array and I ordered it from highest to lowest.
Now I created Nested For-Loops but I can't write them out correctly.


function smallestCommons(arr) {

  let maximum = Math.max.apply(null, arr);
  let minimum = Math.min.apply(null, arr);
  let place = [];
  for (let i = minimum; i <= maximum; i++) {
    place.push(i);
  }
  // the numbers between and inclusive arr[0] and arr[1] get pushed to the place array 

  place.sort(function(a, b){return b-a;});
  // this reverses the order of the place array from max to min

for (let j = 0; j < place.length; j++) {
   for (let k = 0; k < 10; k++) {
     if (k % place[0] == 0 & k % place[1] == 0) {
       console.log(k); 
     }
   }
 }   


}// end for
// Here I test if I can find the number by which there is no remain for the range of the array.

  return arr;
}


smallestCommons([1,5]);

This Code has major flaws. Its just meant to show my current state. I have two questions here that I can't seem to figure out myself.

In the inner loop condition of the nested loop, how can I dynamically know which number is high enough to give me a correct output number.

My second question is if the loop structure is correct or should the inner loop be the outer loop and vice versa?

Bryan Reese
@breese8009
Nov 28 2017 15:48
@sjames1958gm i c, thank you !
CamperBot
@camperbot
Nov 28 2017 15:48
breese8009 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8722 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Nov 28 2017 15:49
The loop structure should be reversed. And your candidate numbers loop should run until success.
@breese8009 :+1:
@bradley1492 Your for loop to build the place array could run from maximum to minimum so you don't have to subsequently sort it
Christopher
@bradley1492
Nov 28 2017 15:50
This message was deleted
Stephen James
@sjames1958gm
Nov 28 2017 15:50
@bradley1492 When every number in the place array divides evenly into the candidate number then success
Christopher
@bradley1492
Nov 28 2017 15:51
@sjames1958gm But can I define that in for (let i = 0; HERE; i++)?
Stephen James
@sjames1958gm
Nov 28 2017 15:53
@bradley1492 Not sure I understand your question.
Christopher
@bradley1492
Nov 28 2017 15:54
@sjames1958gm Yes i thought so now. In my current inner for-loop. How do I define the upper limit of the counter variable? I cannot know the upper limit.
Stephen James
@sjames1958gm
Nov 28 2017 15:56
The outer loop should be your candidate numbers. If your candidate numbers are multiples of the largest number, then eventually you will find an answer
The answer is bounded, so you don't have to know.
candidate number = max
found = false
while (!found) {
    if candidate number divides by all of places array, found = true
    else candidate number += max
}
Christopher
@bradley1492
Nov 28 2017 16:10
@sjames1958gm Hm I sort of understand your answer but say I have an outer for-loop. Then I would write for(let i = 0; i < multiples of largest number; i++) but how would I define how often i would multiply the largest number? Or how big would the multiple be?
@sjames1958gm Okay I think i can sort of grasp. I have to use a while loop to be more flexible instead of a for-loop!
Stephen James
@sjames1958gm
Nov 28 2017 16:21
@bradley1492 You could use a for loop
for (let num = max, found=false; !found; num += max)
Then num is your candidate number and you set found = true inside the loop
It is not made clear in FCC that a for loop is not fixed to being for indexes, you can use it with other conditions as well
Christopher
@bradley1492
Nov 28 2017 16:25
@sjames1958gm Thats what I originally wanted to know. Max is the highest number of my array numbers from arr[0] and arr[1] is it?!
Stephen James
@sjames1958gm
Nov 28 2017 16:26
@bradley1492 Yes
Christopher
@bradley1492
Nov 28 2017 16:26
@sjames1958gm alright thanks for the help. This must be enough for me to try solving the problem again! :)
CamperBot
@camperbot
Nov 28 2017 16:26
bradley1492 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8723 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Nov 28 2017 16:26
:+1:
Stephen James
@sjames1958gm
Nov 28 2017 19:30
https://frontendmasters.com/
Frontend masters has free kyle simpson courses this week.
Kelechi Chinaka
@ke1echi
Nov 28 2017 19:33
nice
Brad
@bradtaniguchi
Nov 28 2017 19:52
@sjames1958gm Thank you
CamperBot
@camperbot
Nov 28 2017 19:52
bradtaniguchi sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8724 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Nov 28 2017 19:53
@bradtaniguchi :+1:
Tiago Correia
@tiagocorreiaalmeida
Nov 28 2017 20:15
image.png
anyone?
Christopher McCormack
@cmccormack
Nov 28 2017 20:21
Are you showing the whole error @tiagocorreiaalmeida ?
Tiago Correia
@tiagocorreiaalmeida
Nov 28 2017 20:21
yeah at least the one I get back I installed babel-cli globally and babel-preset-env and babel-preset-react as project dependencies
Christopher McCormack
@cmccormack
Nov 28 2017 20:22
if you're running from command line babel either has to be global or you need to run it from node modules
you can run that command from an npm script as well then you don't need to specify node_modules, it will use it by default
can you show the whole cli entry though? Looks like it might be cut off at --preset
And for what it's work, using webpack might be a bit easier

Straight from Babel's CLI page:

Note: These instructions use the excellent npx command to run the locally installed executables. You can drop it inside of an npm run script or you may instead execute with the relative path instead. ./node_modules/.bin/babel

You can try out npx, I've not used it before but looks pretty useful
Tiago Correia
@tiagocorreiaalmeida
Nov 28 2017 20:27
image.png
and its installed globally
image.png
Christopher McCormack
@cmccormack
Nov 28 2017 20:28
I think that's your problem
you're running global babel but local react preset
Tiago Correia
@tiagocorreiaalmeida
Nov 28 2017 20:29
well the course told me to do it, im new to it so I was just trying to figure out were to move, if you say so lets try the other way around
Christopher McCormack
@cmccormack
Nov 28 2017 20:29
try running it like this: ./node_modules/.bin/babel src/app....
verify it's in there first
Tiago Correia
@tiagocorreiaalmeida
Nov 28 2017 20:30
image.png
I always run into some strange errors ahaha
Christopher McCormack
@cmccormack
Nov 28 2017 20:33
try adding the relative path to the react preset in your node modules
Tiago Correia
@tiagocorreiaalmeida
Nov 28 2017 20:35
image.png
I think it worked :D
Christopher McCormack
@cmccormack
Nov 28 2017 20:35
another method is to try and install the react preset globally and test it out, but that is not optimal
Awesome, now you have to figure out why your jsx is causing issues :)
Tiago Correia
@tiagocorreiaalmeida
Nov 28 2017 20:38
I guess I did but now im having issues wit the paths oh lord :D
JeremyWeisener
@JeremyWeisener
Nov 28 2017 20:39
Hi, I'm currently having a little trouble on one of the projects and was wondering if anyone might have a moment to spare to check what might be the problem. I have my code on CodePen and I keep getting the error SyntaxError: expected expression, got '<' I don't know what's wrong with it :/
Christopher McCormack
@cmccormack
Nov 28 2017 20:41
@JeremyWeisener have you saved? You have obvious errors in your codepen that are identified using red marks
@JeremyWeisener your css preprocessor should probably be SCSS, not SASS
Tiago Correia
@tiagocorreiaalmeida
Nov 28 2017 20:43
@cmccormack
let template = <p>Test paragraph</p>;
let appRoot = document.getElementById("app");

ReactDOM.render(template,appRoot);
uh do you spot any issue?
cause if I render it as template string it works so I would say that's a problem with the react preset but its suposed to be working I would say?
Christopher McCormack
@cmccormack
Nov 28 2017 20:44
nope - but you can test it in codepen pretty easily
codepen is a great scratchpad for react as it's so much easier to setup then local :)
hmm
that may not be a proper component, give me a sec
JeremyWeisener
@JeremyWeisener
Nov 28 2017 20:49
@cmccormack For some reason I wasn't getting the red dot on the bottom right, had to refresh the page for it to pop up. Thanks ! Although now I'm stuck with the problem of too much recursion even though all the loops are .maps or for loops with defined # of iterations. nothing in componentDidUpdate() changing the state. And when I change from Sass to SCSS the error becomes Error: regexp too big >.< oh boy
CamperBot
@camperbot
Nov 28 2017 20:49
jeremyweisener sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1277 | @cmccormack |http://www.freecodecamp.org/cmccormack
Christopher McCormack
@cmccormack
Nov 28 2017 20:50
@tiagocorreiaalmeida try this:
let Template = (props) => (<p>Test paragraph</p>)
let appRoot = document.getElementById("app");

ReactDOM.render(<Template />,appRoot);
Tiago Correia
@tiagocorreiaalmeida
Nov 28 2017 20:51
image.png
Christopher McCormack
@cmccormack
Nov 28 2017 20:51
@JeremyWeisener I didn't see that regex error but yeah you def have a recursion issue
Tiago Correia
@tiagocorreiaalmeida
Nov 28 2017 20:51
image.png
Christopher McCormack
@cmccormack
Nov 28 2017 20:51
@tiagocorreiaalmeida it's not liking your JSX
btw @tiagocorreiaalmeida babel and all it's presets are devdependencies
Tiago Correia
@tiagocorreiaalmeida
Nov 28 2017 20:53
yy I forgot about that
but this should be running tough
or at least I think it should
Christopher McCormack
@cmccormack
Nov 28 2017 20:54
try swapping the order of your presets
put env last
that's how my webpack babel config is configured and it's working, anyhow
but in the presets it loads last to first, not sure about cli
Tiago Correia
@tiagocorreiaalmeida
Nov 28 2017 20:57
now trhwos errors saying it doesnt finds any of the presets
tought this would be more fun ahaha
Christopher McCormack
@cmccormack
Nov 28 2017 20:57
the way you're doing it is not fun
don't know why your class would have you start with babel cli
can you at least use a .babelrc file?
Tiago Correia
@tiagocorreiaalmeida
Nov 28 2017 20:58
im free to do anything as long as it works :D , how do I set it up?
Stephen James
@sjames1958gm
Nov 28 2017 20:58
@JeremyWeisener In your onClick - in View - don't use () as you will update the state while rendering which causes re-rendering loop
<button type="button" onClick={props.toggleDarkness}>Toggle Darkness</button>
Christopher McCormack
@cmccormack
Nov 28 2017 20:58
I might suggest you change it up just a little - run babel from your package.json file by adding a script like "babel": "babel ....",
@sjames1958gm nice
@tiagocorreiaalmeida when you run modules from package.json scripts it will use your packages node_modules folder by default
makes it a bit easier than having to add relative paths
Tiago Correia
@tiagocorreiaalmeida
Nov 28 2017 21:00
alot of things to escape tough :D but lets see where it goes
Christopher McCormack
@cmccormack
Nov 28 2017 21:00
may help with the preset loading as well, from what I've been reading here - babel/babel#3757
Tiago Correia
@tiagocorreiaalmeida
Nov 28 2017 21:02
image.png
worked ehehe
Christopher McCormack
@cmccormack
Nov 28 2017 21:02
much better!
and your app runs?
Tiago Correia
@tiagocorreiaalmeida
Nov 28 2017 21:02
had to place back the env and react order or the server wouldnt watch it and stop right after
yeah .D
thanks @cmccormack
CamperBot
@camperbot
Nov 28 2017 21:02
tiagocorreiaalmeida sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1278 | @cmccormack |http://www.freecodecamp.org/cmccormack
Christopher McCormack
@cmccormack
Nov 28 2017 21:03
np - and I would suggest making a .babelrc file so making changes is a little easier
It can contain nothing more complex than something like the following:
{
  "presets": ["env", "es2015", "react"]
}
Tiago Correia
@tiagocorreiaalmeida
Nov 28 2017 21:03
will take a look at it tomorrow, just wanna grasp some of the real basics today :D
Christopher McCormack
@cmccormack
Nov 28 2017 21:03
I was using "babel-preset-es2015": "^6.24.1", but you don't have to
JeremyWeisener
@JeremyWeisener
Nov 28 2017 21:04
@sjames1958gm I was just getting back on to say that I had found that one, toggleDarkness() was changing the state and causing it to run again! Thank you! I used an anonymous function instead, I like them incase I want the button to run another function too I can just add it on. Thanks for taking the time to help, you rock! :)
CamperBot
@camperbot
Nov 28 2017 21:04
jeremyweisener sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
Tiago Correia
@tiagocorreiaalmeida
Nov 28 2017 21:04
big thanks @cmccormack
CamperBot
@camperbot
Nov 28 2017 21:04
:star2: 8725 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Christopher McCormack
@cmccormack
Nov 28 2017 21:04
@tiagocorreiaalmeida sure :thumbsup: thanks for helping me learn a few things too :)
CamperBot
@camperbot
Nov 28 2017 21:04
cmccormack sends brownie points to @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
:cookie: 458 | @tiagocorreiaalmeida |http://www.freecodecamp.org/tiagocorreiaalmeida
Tiago Correia
@tiagocorreiaalmeida
Nov 28 2017 21:04
yeah the use of that is just turn code from es5 above into es5 for what I saw
for browser support
Stephen James
@sjames1958gm
Nov 28 2017 21:04
@JeremyWeisener :+1: you're welcome
Tiago Correia
@tiagocorreiaalmeida
Nov 28 2017 21:04
so you can use new stuff and still having it working everywhere
Christopher McCormack
@cmccormack
Nov 28 2017 21:05
@tiagocorreiaalmeida yeah that sounds accurate - I think env can do it as well if you specify options but it never quite worked for me when I was trying to do some stuff with legacy IE
it gets pretty complicated if you have to support anything IE10 or below
lots of polyfills
Devin Miller
@edwin0258
Nov 28 2017 21:22
Anyone want to try my kata? Could use more JS feedback. https://www.codewars.com/kata/game-of-go
Christopher McCormack
@cmccormack
Nov 28 2017 21:28
I'll give it a try if I find some time :)
Devin Miller
@edwin0258
Nov 28 2017 21:32
Awesome :)
Dovydas Stirpeika
@Giveback007
Nov 28 2017 23:21
Hey there @cmccormack
Christopher McCormack
@cmccormack
Nov 28 2017 23:35
@Giveback007 Hey! Sorry was away
@Giveback007 How's the job?