These are chat archives for FreeCodeCamp/HelpFrontEnd

24th
Aug 2018
Bharath Kumar Reddy
@reddy-bharathkumar
Aug 24 2018 10:45
guys, can someone please check my code and help me. I am not able to select the radio buttons properly, not sure what I'm missing
https://codepen.io/reddy-bharathkumar/full/xawxbJ
Thorbjørn Bruarøy
@The2rB
Aug 24 2018 13:16
I'm able to select them (as in click on them - and they get selected)
Bharath Kumar Reddy
@reddy-bharathkumar
Aug 24 2018 13:19
in correct order?
like, if I select the first radio button it's highlighting the 3rd one in my case
Michael
@Jumbledwords
Aug 24 2018 13:43
Hi. I'm working on the Product Landing Page Project, and I was wondering if anybody could give me any ideas about a product that has plenty of not copyrighted material to work with
nevermind, I've got an idea
newmoon
@newmoon
Aug 24 2018 14:06
@bradley1492 There may be more CSS depending on the layout required, but not necessarily more advanced. Knowing how to work with inline vs block elements is important whether you use flexbox/grid or not.
AJ Brommy
@AJ-Brommy
Aug 24 2018 14:32
@reddy-bharathkumar I can't see the problem :/
Bharath Kumar Reddy
@reddy-bharathkumar
Aug 24 2018 14:33
Hi, it's working fine now..
thanks
Gianpaolo
@gianpaolodatu
Aug 24 2018 17:14
Guys I have a question about the Survey Project. one of the test suit's requirements is "13. Inside the form element, I can select a field from one or more groups of radio buttons. Each group should be grouped using the name attribute." so I wrote this piece of HTML
<label for="definitely">
<input id="definitely" type="radio" name="recommend"> Definitely
</label>
<label for="maybe">
<input id="maybe" type="radio" name="recommend">Maybe
</label>
<label for="not-sure">
<input id="not-sure" type="radio" name="recommend">Not sure
</label>
Yet it still doesn't pass as right, any idea why?
Christopher McCormack
@cmccormack
Aug 24 2018 17:17
@gianpaolodatu you can usually click on the failed test and get a more specific reason why it failed
@gianpaolodatu also don't wrap your inputs in a label
the text should go within the label element but the input does not
hmm scratch that, I guess you can do it either way
if you nest it like that you don't need the for attribute however
Gianpaolo
@gianpaolodatu
Aug 24 2018 17:19
I'm following the example from the Basic HTML lessons...
What is the other way?
Christopher McCormack
@cmccormack
Aug 24 2018 17:20
<label for="not-sure">Not sure</label>
<input id="not-sure" type="radio" name="recommend">
Gianpaolo
@gianpaolodatu
Aug 24 2018 17:20
Got it, thanks
Christopher McCormack
@cmccormack
Aug 24 2018 17:20
I believe for allows you to click the text to select the input
but if you wrap it you don't need it
newmoon
@newmoon
Aug 24 2018 17:20
It's valid either way - pros and cons to each approach
Christopher McCormack
@cmccormack
Aug 24 2018 17:20
This probably wont resolve your issue, just noticed it
newmoon
@newmoon
Aug 24 2018 17:21
If you want the label somewhere else on the page, don't wrap it around the input. Otherwise, it's perfectly valid.
Christopher McCormack
@cmccormack
Aug 24 2018 17:21
@newmoon yeah I did correct myself above
newmoon
@newmoon
Aug 24 2018 17:21
Yep, clarifying for @gianpaolodatu not you @cmccormack :p
Christopher McCormack
@cmccormack
Aug 24 2018 17:21
I always thought it was weird having a text and an input sibling
newmoon
@newmoon
Aug 24 2018 17:22
The text does feel orphaned that way
Like, I need a span around the text or something lol
Christopher McCormack
@cmccormack
Aug 24 2018 17:22
right? That's what the label is for!
that's why I don't nest personally
also makes it easier to add margins/etc...
newmoon
@newmoon
Aug 24 2018 17:23
I think Materialize requires it nested for their label effects, but I may be wrong. That's where I first saw it that way
No, I'm wrong. Not sure where I saw it that way.
Gianpaolo
@gianpaolodatu
Aug 24 2018 17:23
Ah got it, "All your radio-buttons must have a value attribute : expected 3 to equal 0 "
that's the error
Christopher McCormack
@cmccormack
Aug 24 2018 17:23
Materialize does their stuff totally different
I think the button itself is not the input, the label is, something like that
it's odd
@gianpaolodatu nice, all done now?
Gianpaolo
@gianpaolodatu
Aug 24 2018 17:25
HMM, just gotta do the valid e-mail/phone number thing
Is that doable with CSS/HTML only?
Christopher McCormack
@cmccormack
Aug 24 2018 17:26
yes
for the tests
normally you would want to clean it up on the backend first before adding to db though
Gianpaolo
@gianpaolodatu
Aug 24 2018 17:28
I haven't done any Back-end stuff yet so maybe at a later time
Christopher McCormack
@cmccormack
Aug 24 2018 17:30
Yup just tossing that out there
You can use type for some validations, pattern for more complex validations
Gianpaolo
@gianpaolodatu
Aug 24 2018 17:32
Regular expressions?
Christopher McCormack
@cmccormack
Aug 24 2018 17:37
yes
Gianpaolo
@gianpaolodatu
Aug 24 2018 17:46
Ok, passed all the tests. Now I gotta make this form beautiful
Is using flexbox a good idea? Or should I just use plain CSS with some queries?
Christopher McCormack
@cmccormack
Aug 24 2018 17:59
@gianpaolodatu I think flexbox is a fairly simple way of making much nicer layout with minimal config
you can still use queries though
Chris Tram
@ctram
Aug 24 2018 19:22
Hey all, I want to use fetch() to make a request to a server; the server then responds with a 302 redirect to another path with the same origin, so no CORS. From what I've read, I would expect the browser to follow the redirect but that is not what I have been experiencing. Instead, the browser is receiving redirect and it makes a GET request to the redirect location and receives the correct response (in this case, HTML), but the browser does not update the DOM, any suggestions?
So to clarify, I suppose the browser is acting as expected, it does follow the redirect, but my problem is that the browser does NOT update the DOM with the last response it receives.
More info: If you manually navigate to the path that will respond with a redirect, the browser will follow the redirect and update the DOM as expected. The issue here is when I am trying to follow a direct via fetch(). I have a button that will trigger a fetch() upon it being clicked.
Stephen James
@sjames1958gm
Aug 24 2018 19:50
@ctram What is your code doing with the fetch response? When you use fetch your code has to process the response
Chris Tram
@ctram
Aug 24 2018 19:51
function redirect() {
    const headers = new Headers();
    headers.append('Accept', 'text/html');
    fetch('http://localhost:3000/say', { headers}).then(res => {
      return res.text();
    }).then(body => {
      debugger
    })
  }
@sjames1958gm
Stephen James
@sjames1958gm
Aug 24 2018 19:52
The parameter to the then will contain the data from the file, if you want it to go into the DOM you will need to put it there yourself
J. Guidry
@J-Guidry
Aug 24 2018 20:19

For those who know React, I have a simon game I've been making with Reactjs. I have a boolean to disable clicking when a sequence is playing but it doesn't work. I used sourcemaps and React dev tools on Chrome in my local repo to try to find the problem, but the best I could do is seeing that the boolean toggling is happening when I set breakpoints but it is not reflected in react dev tools and buttons are still clickable. Aside from that, the app works if you don't click during a sequence and you don't double click a color. I haven't done the strict button or created the win condition yet for winning 20 turns.

I have a glitch repo with the code and a gist with the steps/psueudocode. I have been working on this for a while. I appreciate any help.
https://gist.github.com/J-Guidry/55422112c2e62b0ef3b389d91b90681e
https://glitch.com/edit/#!/reactjs-simongame

Christopher McCormack
@cmccormack
Aug 24 2018 20:22
@J-Guidry is this your toggle?
toggleClickable(){
        this.setState({clickable: this.state.clickable = !this.state.clickable});
    }
It would make more sense for you to not use a toggle function if you are trying to specifically set it to clickable or not
Also you don't want to try and store a value in state, that's what setState is for in the first place.
toggleClickable() {
    this.setState( prevState => ({
        clickable: !prevState.clickable,
    }));
 }
J. Guidry
@J-Guidry
Aug 24 2018 20:28

I tried both

this.state.clickable = !this.state.clickable

and

!prevState.clickable
The 2nd one will toggle it to false when it is my turn to click on the 2nd turn
I will make that change now on the glitch
Christopher McCormack
@cmccormack
Aug 24 2018 20:37
@J-Guidry you should never be using this.state.clickable = !this.state.clickable
setState is to set state
might behoove you to add a boolean parameter to your toggleClickable so you can pass a boolean value that you want to specifically set, for any scenario you want to update the clickable state but want it set a specific way
J. Guidry
@J-Guidry
Aug 24 2018 20:40
@cmccormack If I set a parameter, how would I use it in set state? As a third argument? I think that was a callback function if I remember right
Looks like the start button creates errors saying clickable is undefined when the change was made
SN
@SNoon85_twitter
Aug 24 2018 20:44
Hi All, curious how to get animations that you can make in After Effects over into an app. Like how do advanced animations carry over to programming? Example: https://cdn.dribbble.com/users/32512/screenshots/4034207/natural_mobile_dribbble25.gif
I can make these in After Effects, but Im a newbie and I am having a hard time understanding how you could incorporate these into an app, like an AI voice app. Many thanks!
Christopher McCormack
@cmccormack
Aug 24 2018 20:53
@J-Guidry you can just do something like
toggleClickable(set) {
    this.setState( prevState => ({
        clickable: set || !prevState.clickable,
    }));
 }
probably want a better name than that
J. Guidry
@J-Guidry
Aug 24 2018 20:53
@cmccormack Trying it now
Christopher McCormack
@cmccormack
Aug 24 2018 20:54
@SNoon85_twitter Do you want these to be clickable or just animations?
SN
@SNoon85_twitter
Aug 24 2018 20:55
It would just be animations of the AI talking
obviously "reactive animations" to the sound waves of the voice when answering a question. Similar to Siri
Christopher McCormack
@cmccormack
Aug 24 2018 20:56
Does after effects have a web api?
SN
@SNoon85_twitter
Aug 24 2018 20:56
Im not sure actually, I will look into that. I dont think so
Christopher McCormack
@cmccormack
Aug 24 2018 20:57
I have no idea how this would be done, btw. I imagine you would need something to take input to produce the animated output. This looks complex, so I imagine it would be a library you would have to import
J. Guidry
@J-Guidry
Aug 24 2018 20:57
@cmccormack no good. clickable still false/disabled at 2nd turn
Christopher McCormack
@cmccormack
Aug 24 2018 20:57
@J-Guidry I wasn't really answering how to fix that problem, just pointing out flaws in your function
J. Guidry
@J-Guidry
Aug 24 2018 20:57
Perhaps I need to rethink the logic somewhere or place the toggleClickable call elsewhere
SN
@SNoon85_twitter
Aug 24 2018 20:57
this is what I found "https://www.adobe.io/apis/creativecloud/aftereffects.html" so maybe it is possible via API.
Christopher McCormack
@cmccormack
Aug 24 2018 20:58
@J-Guidry yes I was going to suggest exactly that
follow your logic and see where it's failing. log what the state is and what you think it should be and compare
SN
@SNoon85_twitter
Aug 24 2018 20:59
Thanks @cmccormack for suggestion, this should yield something!
Christopher McCormack
@cmccormack
Aug 24 2018 21:02
@SNoon85_twitter good luck
SN
@SNoon85_twitter
Aug 24 2018 21:02
thank you!
Christopher McCormack
@cmccormack
Aug 24 2018 21:08
Chris Tram
@ctram
Aug 24 2018 21:09

@sjames1958gm

The parameter to the then will contain the data from the file, if you want it to go into the DOM you will need to put it there yourself

How do you make it go to the DOM? directly manipulating document?

SN
@SNoon85_twitter
Aug 24 2018 21:10
@cmccormack perfect, will check that out also.
Chris Tram
@ctram
Aug 24 2018 22:36
@sjames1958gm Thanks! So it is incorrect to expect the browser to automatically update the DOM when receiving a 302 redirect response via a fetch() ?
Stephen James
@sjames1958gm
Aug 24 2018 22:37
Yes when you use fetch you are asking for the data to be provided to your JavaScript code
Chris Tram
@ctram
Aug 24 2018 22:38
@sjames1958gm Great, thanks for the help!