These are chat archives for FreeCodeCamp/Help

8th
Jul 2018
Kyle Holm
@thekholm80
Jul 08 2018 00:02
@hensn5250 it does seem a bit odd, worrying about screen readers being able to see things that aren't on the page
i've seen some folks suggest putting content especially for screen readers that doesn't get visibly rendered to the page, but this seems a bit different
John
@taloloy18
Jul 08 2018 01:34
hi guys. can you help me with this
What's the code that was lacking? Your input tag should have a name attribute with a value of date.
Karma Drukpa
@coderkarma
Jul 08 2018 01:38
<input type="date" id="pickdate" name="date">
you got to do that @taloloy18
asked for id, name and date
John
@taloloy18
Jul 08 2018 01:39
Still it has same result
I already tried puting that one.
Karma Drukpa
@coderkarma
Jul 08 2018 01:40
Mine is working absolutely fine.
John
@taloloy18
Jul 08 2018 01:41
Done
Thanks. I put semi colon rather that =.
Karma Drukpa
@coderkarma
Jul 08 2018 01:42
good
Nazar
@IsaakNazar
Jul 08 2018 07:10
beautiful day today
John
@taloloy18
Jul 08 2018 07:54
https://codepen.io/taloloy18/pen/qKepMj what's lacking with my code?
Declare a @media query for devices with a height less than or equal to 800px.
Mohammed Boudad
@matrixersp
Jul 08 2018 08:00
@taloloy18 The font is too small
What do you want to achieve?
John
@taloloy18
Jul 08 2018 08:01
It was the font given for the p tag.
Mohammed Boudad
@matrixersp
Jul 08 2018 08:02
Why would you use this small text?
Who can read this
John
@taloloy18
Jul 08 2018 08:02
Your p element should have the font-size of 10px when the device height is less than or equal to 800px.
that was for the challenge that is why I change the p tag
Mohammed Boudad
@matrixersp
Jul 08 2018 08:08
@taloloy18
Here's how it should look like
  p {
    font-size: 20px;
  }

  /* Add media query below */
@media(max-height:800px){ /* CSS Rules */
  p {
    font-size: 10px;
  }
}
John
@taloloy18
Jul 08 2018 08:12
It run with me but can you give me the reason why you add another p tag? Thanks!
Adish Jain
@Adishjain58
Jul 08 2018 08:15
@taloloy18 because in media queries you have to define on which class or id or tag.. that specific style should be applied
John
@taloloy18
Jul 08 2018 08:16
ok Thank you to both of you @Adishjain58 and @matrixersp ! XD
balakrishna222111
@balakrishna222111
Jul 08 2018 15:21
How do i solve this problem The value for the src attribute on the source tag should match the link in the instructions exactly. https://learn.freecodecamp.org/responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element
May Kittens Devour Your Soul
@diomed
Jul 08 2018 15:45
@balakrishna222111 how did u try to solve it?
Stephen James
@sjames1958gm
Jul 08 2018 15:47
@balakrishna222111 Post the code you added.
Mohammed Boudad
@matrixersp
Jul 08 2018 16:10
@balakrishna222111 copy and the link and paste it in src tag
glitz20
@glitz20
Jul 08 2018 17:36
how can I assign the value of a state in react?
this.state = {value: '', items: '', category:'tottenham'};
return user.category === {this.state.category}
is not working
Kyle Holm
@thekholm80
Jul 08 2018 17:45
you assign the initial value in the constructor (or just state property if you're going constructor-less), any change to state's value has to be done through setState()
example:
class MyComponent extends React.Component {
  constructor() {
    super();

    this.state = { name: '' };  // initial state

    this.changeName = this.changeName.bind(this);
  }

  changeName(value) {
    this.setState({ name: value });  // changing state
  }

  // rest of component
}
glitz20
@glitz20
Jul 08 2018 17:48
@thekholm80 yeah,so how can assign the initial value of my state to user.category?
Kyle Holm
@thekholm80
Jul 08 2018 17:49
you set the initial state in the constructor
where i have the comment // initial state
glitz20
@glitz20
Jul 08 2018 17:50
Yeah I have done that, but
 return user.category === { this.state.category }
is not working
Kyle Holm
@thekholm80
Jul 08 2018 17:50
that's an evaluation statement, so return will be either true or false
glitz20
@glitz20
Jul 08 2018 17:50
 this.state = {value: '', items: '', category:'tottenham'};
Kyle Holm
@thekholm80
Jul 08 2018 17:50
that's how === works
glitz20
@glitz20
Jul 08 2018 17:51
tabRow(){
        if (this.state.items instanceof Array) {
            let real = this.state.items.filter(function (user) {
                return user.category === { this.state.category }
            })
        return real.map(function(object, i){
            return <TableRow obj={object} key={i} />;
        })
      }
    }
oh sorry, this is the whole function
when I replace this.state.category by "tottenham", it works
Kyle Holm
@thekholm80
Jul 08 2018 17:54
you probably want to remove the {} around this.state.category
you can't direct-compare objects like that
image.png
and i'm guessing the value of user.category is a string, not an object
glitz20
@glitz20
Jul 08 2018 17:56
yeah its a string
how can I convert this.state.category into a function?
Kyle Holm
@thekholm80
Jul 08 2018 17:58
reassign it using setState() probably, but are you sure that's what you want to do?
glitz20
@glitz20
Jul 08 2018 17:59
what is the best way?
so, can't I do anything using default value of state?
Kyle Holm
@thekholm80
Jul 08 2018 18:01
you can do plenty using default values of state, but your questions make me wonder if maybe brushing up on some javascript fundamentals would be a great help for you?
glitz20
@glitz20
Jul 08 2018 18:01
*sorry my question was how can I convert this.state.category into a string?
Kyle Holm
@thekholm80
Jul 08 2018 18:01
glitz20
@glitz20
Jul 08 2018 18:04
I removed curly braces, but it is still not working
Kyle Holm
@thekholm80
Jul 08 2018 18:04
start logging variables to see if you're getting the values you're expecting
glitz20
@glitz20
Jul 08 2018 18:05
yeah I am getting it
glitz20
@glitz20
Jul 08 2018 20:14
return user.category === this.state.category.toString()
I did try this but its not working
Aditya
@ezioda004
Jul 08 2018 20:27
@sabin20 Is this.state.category an object? or string? From your previous message it seems like a string then .toString wont really change anything.
glitz20
@glitz20
Jul 08 2018 20:27
 this.state = {value: '', items: '', category:'realmadrid'};
So this is the state of category.
@ezioda004 so how should I compare the state with user.category then, which is a string?
Henry
@GitHub-Henry
Jul 08 2018 20:29
I'm trying to understand my React app. It works, but when I look in my dist folder I don't see bundle.js. My html references bundle.js. So, how is my html referencing a file that I don't see.
Aditya
@ezioda004
Jul 08 2018 20:31

@sabin20 You have

let real = this.state.items.filter(function (user) {
                return user.category === { this.state.category }
            })

But in your state items is an empty string, so I'm guessing you're updating items as an array, can you show the updated items list?

Kyle Holm
@thekholm80
Jul 08 2018 20:32
@GitHub-Henry one (or all) of my editors will hide any files i have in my .gitignore, maybe it's that?
i can still see them in my normal file explorer, just not in the editor tree
Henry
@GitHub-Henry
Jul 08 2018 20:32
@thekholm80 even with file explorer?
the files are not visible with file explorer
Kyle Holm
@thekholm80
Jul 08 2018 20:33
is this after doing a final build, or are you still in development?
Henry
@GitHub-Henry
Jul 08 2018 20:33
Dev
glitz20
@glitz20
Jul 08 2018 20:33
Screenshot (115).png
@ezioda004 yeah
Henry
@GitHub-Henry
Jul 08 2018 20:34
I'm using the webpack web dev server
glitz20
@glitz20
Jul 08 2018 20:34

It works when I do

return user.category === "realmadrid"

@ezioda004

Kyle Holm
@thekholm80
Jul 08 2018 20:34
that's probably it then, you haven't actually built the bundle.js yet and webpack dev server is working magic in the background
Henry
@GitHub-Henry
Jul 08 2018 20:34
How do I build for deployment
I haven't read about that yet
glitz20
@glitz20
Jul 08 2018 20:35
@ezioda004 but I want to make it work using state
Kyle Holm
@thekholm80
Jul 08 2018 20:35
not sure how your scripts are set up, with CRA i think it's just npm run build
Aditya
@ezioda004
Jul 08 2018 20:35
@sabin20 Can you console.log(this.state.category) right above the return statement?
Henry
@GitHub-Henry
Jul 08 2018 20:36
I'll have to find the docs on that, thanks
I did npm run-script build and it built my bundle.js file
thank you
Kyle Holm
@thekholm80
Jul 08 2018 20:38
:+1:
glitz20
@glitz20
Jul 08 2018 20:39
@ezioda004 I see no changes
Aditya
@ezioda004
Jul 08 2018 20:41
Well, its not suppose to fix it but for debugging purpose, the problem seems to be coming from this.state.category, so check what you're getting in the console and try to debug.
glitz20
@glitz20
Jul 08 2018 20:42
@ezioda004 yeah when I do {this.state.category} I get the name
glitz20
@glitz20
Jul 08 2018 20:48
@ezioda004 how can convert this.state.caegory into string>
or how should I approach this one?
Aditya
@ezioda004
Jul 08 2018 20:52
Is it not a string in the first place? console.log(typeof this.state.category) what does it return in the console?
Mehdi Amlal
@mehdiamlal
Jul 08 2018 21:00
Hey guys! I'm trying to make a weather app, just for fun, but I have some issues with axios and express.
Kyle Holm
@thekholm80
Jul 08 2018 21:01
what kind of issues?
glitz20
@glitz20
Jul 08 2018 21:02
@ezioda004 its in string
Mehdi Amlal
@mehdiamlal
Jul 08 2018 21:02
When I send a get request from my route handler I don't get the json data, but an error
Kyle Holm
@thekholm80
Jul 08 2018 21:02
what is the error?
Mehdi Amlal
@mehdiamlal
Jul 08 2018 21:03
app.get('/weather', (req, res) => {
    const location = encodeURIComponent(req.body.location);
    axios.get(`https://eu1.locationiq.org/v1/search.php?key=909672d81813ee&q=${location}&format=json`)
    .then((result) => {
        res.send(result);
    })
    .catch((error) => {
        res.send(error);
    });
});
It's app.post, sorry
Kyle Holm
@thekholm80
Jul 08 2018 21:04
have you logged location and result?
to make sure they're what you're expecting?
Mehdi Amlal
@mehdiamlal
Jul 08 2018 21:04
I tried the code outside the route handler, and it works
Aditya
@ezioda004
Jul 08 2018 21:04
@mehdiamlal Then user.category === this.state.category should work, but since its not working then its some other issue, which is harder to debug without looking at the actual app.
Kyle Holm
@thekholm80
Jul 08 2018 21:05
so, what is the error? and have you logged location and result to see if they're what you're expecting?
Mehdi Amlal
@mehdiamlal
Jul 08 2018 21:09
const express = require('express');
const bodyParser = require('body-parser');
const axios = require('axios');

const app = express();

app.use(express.static(__dirname + '/public'));

app.use(bodyParser.urlencoded());

app.post('/', (req, res) => {
    const location = encodeURIComponent(req.body.location);
    axios.get(`https://eu1.locationiq.org/v1/search.php?key=909672d81813ee&q=${location}&format=json`)
    .then((result) => {
        res.send(result);
    })
    .catch((error) => {
        res.send(error);
    });
});

app.listen(3000, () => {
    console.log('Server up and running on port 3000!');
});
This is the code for the app
Kyle Holm
@thekholm80
Jul 08 2018 21:10
so when you say you're getting an error, do you mean an error is showing up in your console?
because if that's the case it would be super useful to see what that error is
Mehdi Amlal
@mehdiamlal
Jul 08 2018 21:11
No, I mean the promise is rejected
Nabil Tharwat
@KL13NT
Jul 08 2018 21:12
Umm, guys, I came to FCC a while back but had to stop for about 11 months. When I came back I can't find "Back-end Certifications" when I'm sure it was there before they updated the whole thing. Am I imagining things or...??
Kyle Holm
@thekholm80
Jul 08 2018 21:12
okay, so ... i tried your api in postman and got a good response. have you tried console.log(location) after const location = encodeURIComponent(req.body.location); to see if your location variable is what you're expecting?
glitz20
@glitz20
Jul 08 2018 21:12
@ezioda004 But, putting "realmadrid" instead of this.state. category works
Kyle Holm
@thekholm80
Jul 08 2018 21:13
@KL13NT the back end certs have been split into several different certifications in the new curriculum
but you can still earn the old back end cert, log in, click Settings and scroll to the bottom
under Legacy Certificates
Nabil Tharwat
@KL13NT
Jul 08 2018 21:14
Oh, thanks for the quick reply! One more thing, was there a JSON tutorial before/is it there now?
Mehdi Amlal
@mehdiamlal
Jul 08 2018 21:15
@thekholm80 Yes, it is, but still doesn't work
Kyle Holm
@thekholm80
Jul 08 2018 21:15
@mehdiamlal is there anything in your console?
Mehdi Amlal
@mehdiamlal
Jul 08 2018 21:16
just the value of location
Kyle Holm
@thekholm80
Jul 08 2018 21:17
in your error handler can you try
    .catch((error) => {
        throw error;
        // res.send(error);
    });
Nabil Tharwat
@KL13NT
Jul 08 2018 21:17
@thekholm80 Hmm, not sure there is, thanks for the help!
i haven't looked too much at the new curriculum, sorry
Aditya
@ezioda004
Jul 08 2018 21:18
@KL13NT Theres some over here https://learn.freecodecamp.org/data-visualization/json-apis-and-ajax not sure why its in data viz section.
Kyle Holm
@thekholm80
Jul 08 2018 21:19
oh man
why under data visualization? i'd have never guessed lol
Nabil Tharwat
@KL13NT
Jul 08 2018 21:19
Neither would I
Aditya
@ezioda004
Jul 08 2018 21:19
¯_(ツ)_/¯
Nabil Tharwat
@KL13NT
Jul 08 2018 21:20
But at least it's there, so!
glitz20
@glitz20
Jul 08 2018 21:20
@thekholm80 so I checked data type for this.state.category, in console which shows as string

But I don't understand why

return user.category === this.state.category

is not working

Kyle Holm
@thekholm80
Jul 08 2018 21:21
what is the value of user.category?
glitz20
@glitz20
Jul 08 2018 21:28
@thekholm80 its data type is string
Kyle Holm
@thekholm80
Jul 08 2018 21:28
not quite what i was asking
glitz20
@glitz20
Jul 08 2018 21:28
but for the value, I get an error
Kyle Holm
@thekholm80
Jul 08 2018 21:29
what is the error?
glitz20
@glitz20
Jul 08 2018 21:30
TypeError: Cannot read property 'state' of undefined
Kyle Holm
@thekholm80
Jul 08 2018 21:30
so
sounds like you didn't bind the class method
Mehdi Amlal
@mehdiamlal
Jul 08 2018 21:38
@thekholm80 maybe I should try with request instead of axios
Kyle Holm
@thekholm80
Jul 08 2018 21:38
i use axios all the time
but you do you
Mehdi Amlal
@mehdiamlal
Jul 08 2018 21:39
It’s really weird that it doesn’t work inside the route handler
Kyle Holm
@thekholm80
Jul 08 2018 21:40
how are you hitting that endpoint?
Mehdi Amlal
@mehdiamlal
Jul 08 2018 21:41
Wym
Kyle Holm
@thekholm80
Jul 08 2018 21:42
because it doesn't seem like you're serving a front end from express, so i'm guessing however you're testing that route is cross-origin?
perhaps you need to enable cors for testing
Mehdi Amlal
@mehdiamlal
Jul 08 2018 21:43
I’m serving static assets
Kyle Holm
@thekholm80
Jul 08 2018 21:43
ah, okay
and all you're getting in the browser is a promise rejection error?
glitz20
@glitz20
Jul 08 2018 21:46
@thekholm80 I did bind this way
  this.tabRow = this.tabRow.bind(this);
but I am getting the same error
Mehdi Amlal
@mehdiamlal
Jul 08 2018 21:46
The “/“ route returns an html file, which has a text input, where the user can type his/her location and then submit it. However instead of getting the JSON data I get the rejection error
Kyle Holm
@thekholm80
Jul 08 2018 21:46
@mehdiamlal what does the error say?
@sabin20 sorry, I have no clue how to help you
Mehdi Amlal
@mehdiamlal
Jul 08 2018 21:47
It’s an empty object
Kyle Holm
@thekholm80
Jul 08 2018 21:47
can you screen shot it?
or copy/paste it?
Mehdi Amlal
@mehdiamlal
Jul 08 2018 21:48
{ }
Instead of getting a json object with the geolocation data
Kyle Holm
@thekholm80
Jul 08 2018 21:48
that's just an object, you said there's an error?
also, you should res.send(result.data) you don't need to send the rest of the result object
Mehdi Amlal
@mehdiamlal
Jul 08 2018 21:50
Yeah, apparently when the promise gets rejected, it returns an empty object
glitz20
@glitz20
Jul 08 2018 21:50

@thekholm80 is

this.tabRow = this.tabRow.bind(this);

the right way to bind though

?
Mehdi Amlal
@mehdiamlal
Jul 08 2018 21:50
But what I’d like to know is why it gets rejected
Only inside the route handler
Kyle Holm
@thekholm80
Jul 08 2018 21:51
are you just using the form method to post?
or are you using jquery?
Mehdi Amlal
@mehdiamlal
Jul 08 2018 21:52
Yes
I’m using the form
Kyle Holm
@thekholm80
Jul 08 2018 21:53
i'm not certain you can get a response through the html form submit
Moisés Man
@moigithub
Jul 08 2018 21:54
:point_up: 8 de julio de 2018 12:45 :point_left: here an example of binding.. inside the constructor @sabin20
Kyle Holm
@thekholm80
Jul 08 2018 21:54
i'm reading through MDN right now
Mehdi Amlal
@mehdiamlal
Jul 08 2018 21:57
I parsed the body of the request
Using body-parser
Kyle Holm
@thekholm80
Jul 08 2018 21:57
@mehdiamlal everything i've seen on stack overflow says that you can't capture a response from the form submit, most everyone suggests using an api client instead
since you're already using axios, that shouldn't be a big deal
Mehdi Amlal
@mehdiamlal
Jul 08 2018 21:58
What does it mean that I can’t capture a response from the form submit?
Kyle Holm
@thekholm80
Jul 08 2018 21:58
your express is sending a response
your front end can't catch that response triggered by a form action
Mehdi Amlal
@mehdiamlal
Jul 08 2018 22:00
So what should I do?
Kyle Holm
@thekholm80
Jul 08 2018 22:00
everything i'm reading is suggesting using something like ajax or axios to make the post request, then you can catch and use the response
do something like
Mehdi Amlal
@mehdiamlal
Jul 08 2018 22:01
So there’s no way I can use data sent from my html form?
Kyle Holm
@thekholm80
Jul 08 2018 22:01
that's not what i'm saying at all
i'm saying you need to go about it another way
if you give me a second i'll give you an example
Kyle Holm
@thekholm80
Jul 08 2018 22:09
@mehdiamlal so something like
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script>
    const axios = require('axios');

    function sendData() {
      const name = document.getElementById('name').value;
      axios.post('/', { name })
      .then(response => {
        console.log(response);
      })
      .catch(err => { throw err });
    }
  </script>
</head>
<body>
  <form>
    <input type='text' id='name' />
    <button onClick='sendData()'>Submit</button>
  </form>
</body>
</html>
you'll have to poll the DOM for each form item's value and build a request object, but it's not that hard
Mehdi Amlal
@mehdiamlal
Jul 08 2018 22:10
Oh gotcha
Thanks buddy
Kyle Holm
@thekholm80
Jul 08 2018 22:11
:+1:
hmm, now that i think about it i don't think you can require() like that in an html file
surely there's a cdn for axios, or you could use fetch()
Kyle Holm
@thekholm80
Jul 08 2018 22:16
oh yeah, <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
JobaGoba
@hareboter1
Jul 08 2018 22:17

how to do this ? :Let's try to add an image to our website:

Insert an img tag, before the h2 element.

Now set the src attribute so that it points to this url:

https://bit.ly/fcc-relaxing-cat

Finally don't forget to give your image an alt text.

Kyle Holm
@thekholm80
Jul 08 2018 22:18
what did you try?
JobaGoba
@hareboter1
Jul 08 2018 22:18
nothing for now i don't know how to do it
iam a bigginer
Kyle Holm
@thekholm80
Jul 08 2018 22:19
the lesson lays out exactly what to do, i don't know that i could add anything to it
image.png
JobaGoba
@hareboter1
Jul 08 2018 22:24
test1.PNG
should i write img element here ?
Kyle Holm
@thekholm80
Jul 08 2018 22:24
yes
Insert an img tag, before the h2 element.
JobaGoba
@hareboter1
Jul 08 2018 22:26
test2.PNG
Finally don't forget to give your image an alt text. how to do this step ?
Kyle Holm
@thekholm80
Jul 08 2018 22:27
put an alt attribute inside the element, with some text
Moisés Man
@moigithub
Jul 08 2018 22:27
there are an example on the instructions...
JobaGoba
@hareboter1
Jul 08 2018 22:31
test3.PNG
like this ? btw why the src and alt goes red ?
Kyle Holm
@thekholm80
Jul 08 2018 22:32
the editor has a built in syntax highlighter
it's just so you can see it easily
JobaGoba
@hareboter1
Jul 08 2018 22:33
ok thx
Aditya
@ezioda004
Jul 08 2018 22:42
@thekholm80 Yeah require() wont work but import axios will work with <script type = "module"> and assuming theres a web server.
Kyle Holm
@thekholm80
Jul 08 2018 22:43
i think maybe i skipped to react too quickly, i missed a lot of that stuff
Aditya
@ezioda004
Jul 08 2018 22:45

In https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/understand-the-differences-between-import-and-require
It says

The lessons in this section handle non-browser features. import, and the statements we introduce in the rest of these lessons, won't work on a browser directly. However, we can use various tools to create code out of this to make it work in browser.

It is a browser feature now :D
Kyle Holm
@thekholm80
Jul 08 2018 22:46
interesting
Rayster15
@Rayster15
Jul 08 2018 23:03
what does it mean when it says "the main element should have two paragraph elements as children"?
Moisés Man
@moigithub
Jul 08 2018 23:08
<main> element
<p> paragraph element
most html tags have a open and closing tag.. ie <main> ... </main>
child elemnts are placed inside those tags @Rayster15