These are chat archives for FreeCodeCamp/HelpJavaScript

18th
Feb 2018
Waleed Assaf
@Jinxlaw
Feb 18 02:47
hey guys
can someone give me a small hint for this challenge
I have a feeling the solution is simple, but my brain shutdown
Ronique Ricketts
@RoniqueRicketts
Feb 18 02:49

const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
let arr2;
(function() {
  "use strict";
  arr2 = function arrays(...arr){
   return  arrays(arr2);
  }; // change this line
})();
console.log(arr2);
what am I doing wrong.
AbrisM
@AbrisM
Feb 18 03:47
Hi does anyone know how to write a declaration for a rectangle with an existing name?
Like chickenFoot?
AbrisM
@AbrisM
Feb 18 04:34
okay I found out how
Rectangle chickenFoot = new Rectangle (60,60,300,300);
Ken Haduch
@khaduch
Feb 18 05:04

@Jinxlaw - did you get past that exercise on "return early pattern for functions"? The basic idea is that you have a test at the start of the function:

if ( a < 0 || b < 0) {
    return undefined;
}

The point is that when you do a return then the function ends and no other code within the function is executed.

@RoniqueRicketts - were you able to get past that one "use the spread operator" ? You don't need to use a function to do that - you can just do arr2 = [...arr1]; - I think that the example makes it look a little more complicated than it is...
Tai Jones
@taiJones00
Feb 18 05:59
Hi could I have a little help on this one?
      type: "GET",
      url: "https://api.twitch.tv/helix/games/top",
      dataType: "json",
      headers: {
        "Client-ID": "45xl07xrqmlmthds24jqic5cw013ek"
        // 'Authorization':  'Bearer ' + OAUTH_ACCESS_TOKEN
      },
      success: function(result) {
        var box_art;
        var name;
        var width;
        var height;
        for (let i = 0; i < 20; i++) {
        console.log(result["data"][i]);
        console.log(result["data"][i]["box_art_url"]);
        console.log(result["data"][i]["name"]);
          box_art = result["data"][i]["box_art_url"]; // The problem is from here down, dealing with displaying the boxart
          width = /[{width}]/; //Below is an example of the box_art response
          height = /[{height}]/; //"https://static-cdn.jtvnw.net/ttv-boxart/The%20Elder%20Scrolls%20V:%20Skyrim-{width}x{height}.jpg"
          box_art = box_art.replace(width, 100); // And so I try to change the {width} and {height} to 100 with regEx
          box_art = box_art.replace(height, 100);// And that doesn't work for some reason
          name = result["data"][i]["name"]; // The name is displaying just fine
          $(".dynamic").append(`<div class = "row"><div class = "col-md-4"><img src = "${box_art}"/><h4>${name}</h4></div></div>`)
        }
      }
    });
Brad
@bradtaniguchi
Feb 18 06:02
@taiJones00 Is resizing an image with regex an actual thing?
Tai Jones
@taiJones00
Feb 18 06:03
Well I remember I can change a string's value using regEx and the replace method. Also when I hardcode that example URL with 100 in the {width} and {height} slots, the picture shows
Meaning that the URL isn't changing the way i'd like when I use the replace method
Brad
@bradtaniguchi
Feb 18 06:04
Ah I see what your doing, took me a little to realize it, after you replace the values what does the box_art string look like after?
Tai Jones
@taiJones00
Feb 18 06:04
hm I could use console.log to find out
Brad
@bradtaniguchi
Feb 18 06:04
Also javascript variable naming conventions dont use underscores, they use camelCase. just FYI
Tai Jones
@taiJones00
Feb 18 06:05
Okay although I only named it that way because that's how it's labeled in the JSON
Okay so I did console.log and the URL hasn't changed one bit
Brad
@bradtaniguchi
Feb 18 06:05
Ah I see, i'd change it to camel case for consistency with the js code
Tai Jones
@taiJones00
Feb 18 06:05
So maybe it's my regex
I will
Brad
@bradtaniguchi
Feb 18 06:06
Its possible, Id also try to change the numbers to strings like '100', but thats just a guess, idk how replace works with a number argument
Tai Jones
@taiJones00
Feb 18 06:06
that may work
i'll try it
Brad
@bradtaniguchi
Feb 18 06:08
I mean alternativly you could try to use normal css/html to change the size of the image on your end instead of changing the URL.
Tai Jones
@taiJones00
Feb 18 06:08
It doesn't work. Now i'm mostly sure it's the regex
Well not really because I have to change the URL to be used for the img src and html/css can't do that
Brad
@bradtaniguchi
Feb 18 06:09
Hmm yes
Remove the two square brackets in the regex, that's for selecting the letters w,i,d,t,h, not the word
I was debuging it here:
Tai Jones
@taiJones00
Feb 18 06:11
Eureka! Thank you @bradtaniguchi
CamperBot
@camperbot
Feb 18 06:11
taijones00 sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
:cookie: 380 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
Brad
@bradtaniguchi
Feb 18 06:12
@taiJones00 np :D
Tai Jones
@taiJones00
Feb 18 06:14
Want to work on another problem? @bradtaniguchi
Brad
@bradtaniguchi
Feb 18 06:17
haha depends on the problem XD
@taiJones00
Tai Jones
@taiJones00
Feb 18 06:19
Okay the images weren't reacting with bootstrap and col-x-4
Brad
@bradtaniguchi
Feb 18 06:22
@taiJones00 Where am I too see the issue?
Oh nevermind I found em, but what are they suppose to look like?
Tai Jones
@taiJones00
Feb 18 06:23
Well I had the images there but they weren't what I was going for
Twitch.tv
The main page of this site on a mobile phone shows what I want to have
Thomas Faller
@thomasfaller
Feb 18 06:27
Facing a bit of a challenge here guys!
I need to create a webapp that searches a mySQL Table and display the result.
I don’t know PHP at all so I went for a NodeJs approach using the mysql package but I only went so far...
I have my server.js successfully fetching data from the mySQL table and I have my interface with a HTML table ready to receive the data but I can’t seem to find how to hook the 2 together.
Brad
@bradtaniguchi
Feb 18 06:30
@thomasfaller Are you using a front-end framework/jquery/ vanilla javascript or are you rendering the data on the serverside?
Thomas Faller
@thomasfaller
Feb 18 06:32
Hmmm both, that’s the problem aha. So far the data is only rendering on the server-side. Here’s the server.js:
const express = require('express');
const mysql = require('mysql');
const app = express();

const pool = mysql.createPool({
    host: 'localhost',
    user: 'root',
    password: 'root',
    database: "healthwave_db",
    charset: 'utf8'
});


const sql = "select * from medicines where product_name='Paracetamol'";

pool.query(sql, (err, res) => {
    if ( err ) {
        console.log('Error in your query');
    } else {
        console.log(res);
    }
});
This works perfectly and with a loop I’m even getting my row in HTML format such as
<tr><th scope=“row”>1</th><td>Paracetamol</td><td>100</td><td>4.95</td></tr><tr>
Brad
@bradtaniguchi
Feb 18 06:33
Hmm so if your getting the data in the HTML whats the problem it seems like
Thomas Faller
@thomasfaller
Feb 18 06:33
And my front code is this:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Healthwave WebApp</title>
</head>
<body>

    <form onsubmit="searchDb()">
        <input type="text" name="fname" placeholder="Search product...">
        <input id="searchBtn" class="btn btn-primary" type="submit" value="Search">
    </form>

    <table class="table table-striped">
            <thead>
              <tr>
                <th scope="col">Id</th>
                <th scope="col">Product name</th>
                <th scope="col">Pack size</th>
                <th scope="col">Price</th>
              </tr>
            </thead>
            <tbody>

              <!-- DATA GOES HERE -->


            </tbody>
          </table>



    <script src="script.js"></script>
    <script src="server.js"></script>
</body>
</html>
Sorry I meant I’m able to format the data in a string such as <tr><th scope=“row”>1</th><td>Paracetamol</td><td>100</td><td>4.95</td></tr><tr>
Brad
@bradtaniguchi
Feb 18 06:36
Whoa your server.js is on the clientside?
whats the script.js look like?
Thomas Faller
@thomasfaller
Feb 18 06:37
It’s empty right now, I was going to add the eventlistener and all but I’ve never done server-side thing before.
So maybe my approach is not the right one.
The aim is to have a web interface that updates based on queries sent to the mySQL.
Brad
@bradtaniguchi
Feb 18 06:40
@thomasfaller You need to pick an architectural choice at this point, you have the server-side correct, but need to think about how you want to get the data to the user. There's really 2 overall choices.
  1. server-side rendering, where you do what PHP does(and other languages) and create the html with the data in it dynamically and send it to the user. This is more of the old-school way of doing things in most cases
  2. async rendering, where you ship the html and javascript off and when the html+js loads the js makes requests for the data to endpoints provided by your backend. (frameworks like angular/react)
You can mix and match the two, but those are the two main choices
Thomas Faller
@thomasfaller
Feb 18 06:41
I see, I’m not too bad at React so I might try this direction.
Have no clue in PHP aha
Brad
@bradtaniguchi
Feb 18 06:42
@thomasfaller Yes, and PHP is old school, and if you have experience with react Id go that route. The one thing you will have to learn is building the endpoints for your server, so react and the clientside can make requests for the data
the Express library is the main thing people use for this sort of stuff to handle request/responses made to the nodejs server, so Id defiantly start there.
Thomas Faller
@thomasfaller
Feb 18 06:44
Right! Thanks @bradtaniguchi !
CamperBot
@camperbot
Feb 18 06:44
thomasfaller sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
:cookie: 381 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
Brad
@bradtaniguchi
Feb 18 06:44
@thomasfaller np and goodluck :D
Thomas Faller
@thomasfaller
Feb 18 06:57

Thanks! You know it’s exactly that type of situation where you learn the most I think. The guys in that small company want to hire me and there’s just that other guy in the shortlis.
Thing is, they work with WP and I’ve never done PHP and I only like how to install WP on my mac aha.

They sent me that monster of an assignement which I know I have litle chance to complete but I’ve learned so much over the weekend already!

Brad
@bradtaniguchi
Feb 18 07:06
@thomasfaller Oh wow so your creating a full stack website over the weekend pretty much then?
Thomas Faller
@thomasfaller
Feb 18 07:07
Now that you say it like this it does sound impressive aha
I guess so yeah
Tai Jones
@taiJones00
Feb 18 07:09
Hiya
So I have this pretty big bug here
Brad
@bradtaniguchi
Feb 18 07:09
@thomasfaller Yea I'm pretty impressed :D
Tai Jones
@taiJones00
Feb 18 07:09
If you go on mobile and click on one of the links in the sidebar and then try scrolling, you can't
Tai Jones
@taiJones00
Feb 18 07:18
My phone was being weird. Nevermind it works
Thomas Faller
@thomasfaller
Feb 18 07:44
If anyone in there is familiar with MySQL, any advantage in using createPool instead of createConnection ? Seems like the pool allows more but I really don’t know
Brad
@bradtaniguchi
Feb 18 07:47
@thomasfaller Id post this in the main FreeCodeCamp room, more general topics there, rather than the javascript room
Thomas Faller
@thomasfaller
Feb 18 07:47
oh yeah sory aha
Brad
@bradtaniguchi
Feb 18 07:47
(but both rooms aren't active atm cuse of the time)
Thomas Faller
@thomasfaller
Feb 18 07:47
Yeah I’m in Ireland aha
Brad
@bradtaniguchi
Feb 18 07:52
cool, i'm on the west coast of the USA so It late here, but not that late (midnight)
Zunaid Aslam
@Zunaid-Aslam
Feb 18 15:32
I am in the show local weather project. And I am trying to see if I get the Long and Lat. I tried using this code in codepen.io, it's not working. Can you tell me why?

 $(document).ready(function() {

  var api = 'https://fcc-weather-api.glitch.me/';

   $.getJSON(api, function(data){
       console.log(data.coord.lon);

  });
});
Aditya
@ezioda004
Feb 18 15:35
@Zunaid-Aslam You need to use navigator.geolocationto access the users coordinates, check this previous challenge out.
Zunaid Aslam
@Zunaid-Aslam
Feb 18 15:36
Will it work then?
Aditya
@ezioda004
Feb 18 15:36
And pass the coordinates from that to the above API
It should, yes.
Zunaid Aslam
@Zunaid-Aslam
Feb 18 15:37
For some reason I don't think this is the issue. I used another API and console.logged and it worked
Let me show you the code.
Aditya
@ezioda004
Feb 18 15:39
Well for this https://fcc-weather-api.glitch.me/ requires you to pass lat and log which returns the weather object that you need to work with.
Zunaid Aslam
@Zunaid-Aslam
Feb 18 15:41
Ok let me try that way
Zunaid Aslam
@Zunaid-Aslam
Feb 18 15:48
@ezioda004 Shouldn't I be able to log out the value of long and lat by retreaving those values from API just using that code?
Aditya
@ezioda004
Feb 18 15:49
@Zunaid-Aslam You should be, yes
Zunaid Aslam
@Zunaid-Aslam
Feb 18 15:50
But it doesn't log out
Aditya
@ezioda004
Feb 18 15:50
Can I see your code?
Zunaid Aslam
@Zunaid-Aslam
Feb 18 15:50
I am trying to figure out why it's not logging out the latitude
I just used this in codepen

 $(document).ready(function() {

  var api = 'https://fcc-weather-api.glitch.me/';

   $.getJSON(api, function(data){
       console.log(data.coord.lon);

  });
});
I mean i used alert too
It doesn't give any allert
Aditya
@ezioda004
Feb 18 15:51
Oh no, I thought you meant navigator.geolocation. The above code wont work, just try console.log(data) and you'll see why
Zunaid Aslam
@Zunaid-Aslam
Feb 18 15:53
ok
$ is not defined
How should I write the code so that I can just show the longitude?
I am trying to figure out how I can fetch and show. I have another way of doing it which I will try if this fails. But I saw in a tutorial that I guy was using this code to fetch and show. I wanted to test it to understand the whole process.
Aditya
@ezioda004
Feb 18 15:56
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
    console.log(position);
    });
}
Zunaid Aslam
@Zunaid-Aslam
Feb 18 15:56
BTW thank you for all the help so far @ezioda004
CamperBot
@camperbot
Feb 18 15:56
zunaid-aslam sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 464 | @ezioda004 |http://www.freecodecamp.org/ezioda004
Zunaid Aslam
@Zunaid-Aslam
Feb 18 15:56
geolocation way works, i tried it
Aditya
@ezioda004
Feb 18 15:57
Visit this page, it tells you how to use the API
You have to make request like this https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139
Ronique Ricketts
@RoniqueRicketts
Feb 18 18:37
@khaduch yes I fixed that one
function getLength(str) {
  "use strict";
  const length = {x : str.length};
  const {x : len } = length;
  return len;
}

console.log(getLength('FreeCodeCamp'));
why isn't this working for https://beta.freecodecamp.org/en/challenges/es6/use-destructuring-assignment-to-assign-variables-from-objects
AbrisM
@AbrisM
Feb 18 18:39
Does anyone know of a program or excercise where we can convert bits and bytes?
Ken Haduch
@khaduch
Feb 18 19:00
@RoniqueRicketts - I had to think about that one a little, what you need to do is set len to a value, and use the fact that a string is an object that has length as a property. You have to use the renaming. So you want to set the property str.length into the variable const, actually, len. It can be done in one line of code where they say to "change this line". A hint - think of the str as an object, and it has a property length: 12 for example - you would create such an object with str = { length: 12}, but that already exists. You just have to use it in the spread operator variable assignment.
Ronique Ricketts
@RoniqueRicketts
Feb 18 19:08
@khaduch still lost :(
Ken Haduch
@khaduch
Feb 18 19:14

@RoniqueRicketts - so if you follow along with the example, you have the function argument, str which has a property within it named length. If you create a constant with this line of code

const { length } = str;

you will create a new variable, a constant, named length, and it will contain the string length, which you can also obtain with the object property reference str.length. Now, they show a method for using that destructuring to get the value from the str, which is length, and rename it to the variable name that you want, which is len using the : in the appropriate place.

It only requires one line to do this assignment. You do not have to use str.length, but you have to use str, and you have to create a variable named len using the value of length that is a property of the object str. (as I said, I had to think about this one for a little while because it was not immediately obvious to me to think of solving this little challenge in the way that they want it to be solved.)

if you can post your updated code, then we can see what's happening.
Ronique Ricketts
@RoniqueRicketts
Feb 18 19:20
function getLength(str) {
  "use strict";

  // change code below this line
  const {length} = str.length; // change this
  // change code above this line
  const {len} = length; 
  return len;

}

console.log(getLength('FreeCodeCamp'));
function getLength(str) {
  "use strict";
  const {length} = str;
  return length;
}

console.log(getLength('FreeCodeCamp'));
Ken Haduch
@khaduch
Feb 18 19:25

@RoniqueRicketts - what they want you to do here is similar to the example that they show:

const { x : a, y : b, z : c } = voxel // a = 3.6, b = 7.4, c = 6.54

Except in this case, you have an object str that is going to be on the right hand side. That object has a property length. The destructuring statement:

const { length } = str; // this creates a variable "length" with the value of "str.length"

will "pull" the value from the object str's length property into a variable named length. You just have to apply the renaming operation to make const { length : len } to copy the value from the length property to a variable len --- only one line is necessary. And they only want you to change one line - the test might not work if you change more than one line. They want to see the renaming.

as they call it "destructuring with reassignment", so you would need the {length : len} part in there.
Ronique Ricketts
@RoniqueRicketts
Feb 18 19:30
@khaduch thanks man, I don't think my mind is as clear. Thanks for pointing me in the right direction
function getLength(str) {
 const { length : len } = str;
  return len;
}

console.log(getLength('FreeCodeCamp'));
CamperBot
@camperbot
Feb 18 19:30
roniquericketts sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3740 | @khaduch |http://www.freecodecamp.org/khaduch
Ken Haduch
@khaduch
Feb 18 19:36
@RoniqueRicketts - well, it's a new concept, and what I find with some of these is that they just don't fit too easily with things that you already know, to some extent. It's a nice new feature of the language that I haven't gotten comfortable using just yet. I think you just slowly acquire this knowledge and ways to use it. Good luck with the next exercises - I'm not doing the beta version so it's good to see some of the lessons and help to firm up the knowledge of these new concepts!
Ronique Ricketts
@RoniqueRicketts
Feb 18 19:39
@khaduch Yes I am just interested in ES6
I really wanna get comfortable with the new syntax and all the added features.
Ronique Ricketts
@RoniqueRicketts
Feb 18 20:45
have another flaw
const LOCAL_FORECAST = {
  today: { min: 72, max: 83 },
  tomorrow: { min: 73.3, max: 84.6 }
};

function getMaxOfTmrw(forecast) {
  "use strict";
  // change code below this line
  const {tomorrow: {max: maxOfTomorrow}} = LOCAL_FORECAST ; // change this line
  // change code above this line
  return maxOfTomorrow;
}

console.log(getMaxOfTmrw(LOCAL_FORECAST));
Stephen James
@sjames1958gm
Feb 18 20:51
Use the function argument not the global.
Ronique Ricketts
@RoniqueRicketts
Feb 18 20:52
oh u smart guy. hmm that makes more sense now. Thanks. @sjames1958gm
CamperBot
@camperbot
Feb 18 20:52
:star2: 8994 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Feb 18 20:53
Seen this same error before
Ronique Ricketts
@RoniqueRicketts
Feb 18 20:55
@sjames1958gm lol. well haven't we all but I didn't expect it
Sometime the things that we help other people with catch us and we don't even see it.
Stephen James
@sjames1958gm
Feb 18 20:57
:+1: