These are chat archives for FreeCodeCamp/HelpFrontEnd

24th
Sep 2017
Alexx Martínez
@AlexxMart
Sep 24 2017 00:11

Hello, I'm working on the weather app challenge and I can't seem to find a way to use the JSON information in my HTML treating it like a regular object.

When I try to add the information to my page it simply does nothing

the problem is between the lines 55 and 59 of my Javascript
piteto
@piteto
Sep 24 2017 00:14
@AlexxMart textContent is a pure javascript method, use jquery's .text() instead: newTemp.text(celsius);
Or use JavaScript instead of jQuery:
var newTemp = document.getElementsByClassName('temp')[0];
newTemp.textContent = celsius;
Alexx Martínez
@AlexxMart
Sep 24 2017 00:18
Thanks @piteto that did the trick
CamperBot
@camperbot
Sep 24 2017 00:18
alexxmart sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 146 | @piteto |http://www.freecodecamp.com/piteto
Alexx Martínez
@AlexxMart
Sep 24 2017 00:19
I never stopped to realize that there was a different method for jquery or JS, I always used the one I had there at first but I never had jQuery in my document before
piteto
@piteto
Sep 24 2017 00:20
It can get confusing switching between the two - usually best to use one or the other :)
Julian Rios
@riosj
Sep 24 2017 00:27
public void setOperands(int op1, int op2) {
       operand1 = op1;
       operand2 = op2;
    }

public void divide(int quotient, int remainder) {
        if(operand2 == 0){
           System.out.println("You cannot divide by zero!");
           return setOperands;
        }

Is there away to use a return to prompt a user to input new parameters in java? I can't figure this one out.
Pete Givens
@petegivens
Sep 24 2017 00:28
@JanShah I'm using the Dialog component as a login modal. and I want the title to be a mix of text and another React component, but i can't figure out how to do it
return (
      <div>
        <RaisedButton label="Login" onClick={this.handleOpen} />
        <Dialog
          title={<CreateAccountLink />} // When I insert a component here, the title text styles are overritten
          actions={actions}
          modal={true}
          open={this.state.open}
        >
          <div style={{textAlign: 'center'}}>
            <form>
              <TextField
                hintText="Username"
                floatingLabelText="Username"
              /><br />
              <TextField
                hintText="Password"
                floatingLabelText="Password"
                type="password"
              /><br />
              <TextField
                hintText="Confirm Password"
                floatingLabelText="Confirm Password"
                type="password"
                errorText="Passwords don't match"
              /><br />
            </form>
          </div>
        </Dialog>
      </div>
    );
Jan Shah
@JanShah
Sep 24 2017 00:34
whats the content of createAccountLink component? @petegivens
<Dialog
  actions={actions}
  modal={true}
  open={this.state.open}
>
  <CreateAccountLink />
 //other content
</Dialog>
have you tried this?
Pete Givens
@petegivens
Sep 24 2017 00:38
const CreateAccountLink = () => (
  <span>Login or <a href="#">Create Account!</a></span>
)
No..I like the styling of the Dialog title and I'd like to preserve it
just not sure if I have to copy the styles manually or if there is some easier way
Jan Shah
@JanShah
Sep 24 2017 00:40
if you want to retain the style try removing the span tag
Pete Givens
@petegivens
Sep 24 2017 00:41
like this?
const CreateAccountLink = () => (
  Login or <a href="#">Create Account!</a>
)
It won't compile that way
doesn't every react component have to return a single html element?
Jan Shah
@JanShah
Sep 24 2017 00:43
@petegivens sorry mate, give me sec to write some stuff out and see what comes back
Pete Givens
@petegivens
Sep 24 2017 00:43
@JanShah thank you :)
CamperBot
@camperbot
Sep 24 2017 00:43
petegivens sends brownie points to @janshah :sparkles: :thumbsup: :sparkles:
:cookie: 545 | @janshah |http://www.freecodecamp.com/janshah
Jan Shah
@JanShah
Sep 24 2017 00:46
@petegivens I've tried, it retains the style with your original code
have you tried calling createAccountLink as a function
I've tried that and it works the same way, keeps the original style of the heading
Pete Givens
@petegivens
Sep 24 2017 00:50
weird
can i do pictures in here?
Jan Shah
@JanShah
Sep 24 2017 00:50
@petegivens now I get what you mean about the style changing, it takes the margins away and makes it look compact
use a div instead of span
Pete Givens
@petegivens
Sep 24 2017 00:52
div doesn't work for me either :\
Jan Shah
@JanShah
Sep 24 2017 00:52
image.png
@petegivens
Pete Givens
@petegivens
Sep 24 2017 00:53
:[
Jan Shah
@JanShah
Sep 24 2017 00:53
        const createAccountLink =()=>{
            return <div>Login or <a href="#">Create Account!</a></div>
        }
//then
         title={createAccountLink()}
@petegivens is that not right?
Pete Givens
@petegivens
Sep 24 2017 00:54
ohh I didn't invoke the function
I was using it like a component
Jan Shah
@JanShah
Sep 24 2017 00:54
I mentioned that earlier
Pete Givens
@petegivens
Sep 24 2017 00:54
<CreateAccountLink />
hrm
Jan Shah
@JanShah
Sep 24 2017 00:55
sorry, I didn't, I must have been just thinking out loud or somethin
Pete Givens
@petegivens
Sep 24 2017 00:55
no you did actually
my bad
thanks for the help :)
Zara Otamias
@zotamias
Sep 24 2017 01:25
Almost done with my Wikipedia Viewer project, but I would love to have any suggestions & feedback to improve https://codepen.io/zotamias/pen/KXzZyQ
especially having the search results open in a new tab, that's definitely the problem that I'm still struggling to figure out
Jan Shah
@JanShah
Sep 24 2017 01:47
This message was deleted
Allister
@AlyxMoon
Sep 24 2017 01:47

@zotamias Looks good so far!
Some design suggestions I would have:
1) Add some margin between the search bar and the buttons, having them touching just feels a little weird. Alternatively, put them all on the same line.
2) Make the individual search results more distinct, like say having a background/padding/border or something, so they stand out a bit more.

And about the new tab, you don't need a function for that. You're on the right idea in your HTML where you are already doing this (with the Random button), to open in a new tab an anchor elements needs an attribute target="_blank" to open in a new tab. Just add that in to the JS code where you create the entries, and you're golden!

Jan Shah
@JanShah
Sep 24 2017 01:51
    $("#result").click(function(event) {
      window.open(event.target);
    });
@zotamias
Allister
@AlyxMoon
Sep 24 2017 01:54
But you don't really need that. No need to write JS when good ol' hardy HTML does the trick :)
Jan Shah
@JanShah
Sep 24 2017 01:55
I really like javascript
Geekomatic
@Geekomatic
Sep 24 2017 01:58
Anyone wants to try and break my calculator ? https://codepen.io/Geekomatic/pen/weNBxq?editors=0010
Allister
@AlyxMoon
Sep 24 2017 02:04
@Geekomatic That's well done, especially when I think bad on my horrid attempt at it xD
The one insignificantly minor critique I could find was that, semantically speaking, it seemed a bit weird to have your calculator wrapped in a form element. But everything is good.
Oh, and if you overflow the number, it just gets a new number from the length of the string instead (for example, type out 25 1's and then add 1).
Geekomatic
@Geekomatic
Sep 24 2017 02:08
Huh. Turns into a 1.111111...e+24 notation, and breaks my code. No idea how to prevent that. Cap the max size maybe ? I haven't touched the html in a while lol, the <form> doesn't even have an end tag. TY for your input. @AlyxMoon
CamperBot
@camperbot
Sep 24 2017 02:08
geekomatic sends brownie points to @alyxmoon :sparkles: :thumbsup: :sparkles:
Zara Otamias
@zotamias
Sep 24 2017 02:08
thanks @AlyxMoon for the suggestions, especially for the design part! Still playing around with the background and other design stuff, but it is definitely helpful to know your input where I can improve on this project.
CamperBot
@camperbot
Sep 24 2017 02:08
:cookie: 415 | @alyxmoon |http://www.freecodecamp.com/alyxmoon
zotamias sends brownie points to @alyxmoon :sparkles: :thumbsup: :sparkles:
:cookie: 416 | @alyxmoon |http://www.freecodecamp.com/alyxmoon
Zara Otamias
@zotamias
Sep 24 2017 02:10
thanks @JanShah for the suggestion! I'll definitely try that solution to test it out.
CamperBot
@camperbot
Sep 24 2017 02:10
zotamias sends brownie points to @janshah :sparkles: :thumbsup: :sparkles:
:cookie: 546 | @janshah |http://www.freecodecamp.com/janshah
Allister
@AlyxMoon
Sep 24 2017 02:10
@Geekomatic Yeah I worked with the numbers the same way, and my calculator probably does the same thing, so I didn't think of how to handle the problem. Just not allowing the number to get past a certain length seems like a good way. I just checked the default calculator program on my computer and it seems to do that.
@zotamias Pleasure to help, everything is all solid, you got all the best parts done :)
Geekomatic
@Geekomatic
Sep 24 2017 02:11
Fair enough. Will do.
Kent Saeteurn
@sansae
Sep 24 2017 02:21
@X140hu4 hey bro, thanks for the response; yeah, i tried it, it didn't work. haha, that was the first thing i thought about doing; i thought maybe i had to escape the character or something; i've tested this thoroughly and it seems in javascript, you simply can not do a return of \n; if you console.log it, it works fine, but not on return
CamperBot
@camperbot
Sep 24 2017 02:21
sansae sends brownie points to @x140hu4 :sparkles: :thumbsup: :sparkles:
:cookie: 279 | @x140hu4 |http://www.freecodecamp.com/x140hu4
ivanabojic
@ivanabojic
Sep 24 2017 02:26
Hi, I need help with my Simon Memory game. I do not understand why the elements are moving when the text is changed. Flexbox is used. Left container has colored notes, right commands. The quickest way to see the shift is toggling start/stop button. There is more: when message is displayed, when counter changes and so on. At the moment game is set to 5 steps instead of 20 for easy testing. Thanks.
Kent Saeteurn
@sansae
Sep 24 2017 02:26

@X140hu4 i'm basically working on retrieving items from an array of objects, and displaying them in a "flat list";
i.e

name, age, height
name, age, height
name, age, height...

instead of

name, age, height, name, age, height...

i can console.log it, which displays it nicely, but console.logging it defeats the purpose of testing it against my test function (i'm doing that tdd stuff)

Geekomatic
@Geekomatic
Sep 24 2017 02:29
I don't see what's not supposed to move. Unless you're talking about the clicking boxes, but that seems like a clever way to display the sequence.
ivanabojic
@ivanabojic
Sep 24 2017 02:35
This is strange. I resize the window, tried it again, and it doesn't move. I can't explain what is happening. The boh I was talking about was a control box with: start/stop, counter, strict mode on/off and message. It used to shift. For example: when stop is clicked the whole box shifted left for about 5px, then when start is clicked it shifted right for about 5px. The same thing will happen when counter changes, or message is displayed.
Geekomatic
@Geekomatic
Sep 24 2017 02:37
Can't see anything. Slap a box-sizing : border-box; on it for good measure maybe ?
ivanabojic
@ivanabojic
Sep 24 2017 02:38
Thanks @Geekomatic
CamperBot
@camperbot
Sep 24 2017 02:38
ivanabojic sends brownie points to @geekomatic :sparkles: :thumbsup: :sparkles:
:cookie: 372 | @geekomatic |http://www.freecodecamp.com/geekomatic
Fabien SHAN
@X140hu4
Sep 24 2017 03:04
@sansae Oh ok :) good to know haha. Did you work it out?
I discovered what TDD was yesterday when trying to do a kata on codewars. I haven't totally got a hang of it yet
Long Nguyen
@longnt80
Sep 24 2017 03:25
anyone knows React? How can I display nested object using list: https://codepen.io/longnt80/pen/MEbWbN?editors=0011
Gersho
@Gersho
Sep 24 2017 04:22
@longnt80 i haven't really started actually doing react but i've done a few lessons, one thing surprises me, you're not using classes ?
Long Nguyen
@longnt80
Sep 24 2017 04:24
@Gersho I'm trying the simple method using the function
should I use class all the time?
Gersho
@Gersho
Sep 24 2017 04:24
don't ask me :D but the codeacademy lessons revolve around classes
Long Nguyen
@longnt80
Sep 24 2017 04:25
@Gersho well I figured out how to work with nested object btw
Gersho
@Gersho
Sep 24 2017 04:27
here's an exemple from codeacademy you might find relevant
import React from 'react';
import ReactDOM from 'react-dom';
import { List } from './List';

class App extends React.Component {
  render() {
    return (
      <div>
        <List type='Living Musician'>
          <li>Sachiko M</li>
          <li>Harvey Sid Fisher</li>
          <li>test</li>
        </List>
        <List type='Living Cat Musician'>
          <li>Nora the Piano Cat</li>
        </List>
      </div>
    );
  }
}

ReactDOM.render(
  <App />, 
  document.getElementById('app')
);
import React from 'react';

export class List extends React.Component {
  render() {
    let titleText = `Favorite ${this.props.type}`;
    if (this.props.children instanceof Array) {
        titleText += 's';
    }
    return (
      <div>
        <h1>{titleText}</h1>
        <ul>{this.props.children}</ul>
      </div>
    );
  }
}
Long Nguyen
@longnt80
Sep 24 2017 04:28
@Gersho yeah, I will convert the exercise from function to class later
@Gersho btw, can you spot the error: https://codepen.io/longnt80/pen/MEbWbN?editors=0011
Gersho
@Gersho
Sep 24 2017 04:29
i don't know if i can spot errors since i'm still new at react but it's also good training to read other people stuff so let's have a look =)
Long Nguyen
@longnt80
Sep 24 2017 04:29
@Gersho I tried to extract the nested list to another component
Gersho
@Gersho
Sep 24 2017 04:30
i'm getting an error but i don't know how to reach the error msg lol
Long Nguyen
@longnt80
Sep 24 2017 04:32
@Gersho here's what I got from the console: Uncaught SyntaxError: Unexpected token <
where I returned inside the Seasons component:
<ul>
      {season}
    </ul>
Gersho
@Gersho
Sep 24 2017 04:33
i'm not sure line 48 should be between curly braces
Kent Saeteurn
@sansae
Sep 24 2017 04:33
@X140hu4 yeah, i'm still getting the hang of it as well. i was told a lot of companies do tdd. pros and cons, but since i'm just beginning, i'm keeping things simple in my tests. i'm finding that tdd does in fact help with writing better code as it forces me to think about the edge cases. the drawback is that it takes me longer to write a working solution cuz i'm left overthinking things. (i secretly think tdd sucks; i'm more the type that likes to find some middle ground where what i do depends on how difficult the challenge is; i guess i don't practice "true" tdd)
Long Nguyen
@longnt80
Sep 24 2017 04:34
@Gersho yeah, very simple :D
@Gersho thanks
CamperBot
@camperbot
Sep 24 2017 04:34
longnt80 sends brownie points to @gersho :sparkles: :thumbsup: :sparkles:
:cookie: 446 | @gersho |http://www.freecodecamp.com/gersho
Long Nguyen
@longnt80
Sep 24 2017 04:34
still have troule with the syntax, just I like when I started with js
Gersho
@Gersho
Sep 24 2017 04:34
oh that was that ? wow i feel great finding it :D
when typing jsx i remember {} are used to have standard js inside it, and your line looked like it was in jsx
Long Nguyen
@longnt80
Sep 24 2017 04:36
now I will convert that to class method
Gersho
@Gersho
Sep 24 2017 04:49
is there a difference between react.js and react.min.js ? (the first one appears in your external sources, the second is the one suggested by codepen if i use quick add)
linkin-park
@linkin-park
Sep 24 2017 04:50
min is for minified version
Gersho
@Gersho
Sep 24 2017 04:51
oh ok, thanks @linkin-park as long as they both work the same way ^^ it's for a codepen project not for the next big thing that will make me rich
CamperBot
@camperbot
Sep 24 2017 04:51
gersho sends brownie points to @linkin-park :sparkles: :thumbsup: :sparkles:
:cookie: 35 | @linkin-park |http://www.freecodecamp.com/linkin-park
linkin-park
@linkin-park
Sep 24 2017 04:51
they should work the same
min is preferred in production
Gersho
@Gersho
Sep 24 2017 04:51
well should be lighter ^^
linkin-park
@linkin-park
Sep 24 2017 04:52
i came across situation where modifying jquery.js
and minfying it
minfying version hides the easy of readability of source code and ligther version
Refath
@Refath
Sep 24 2017 05:09
Hey folks
Gersho
@Gersho
Sep 24 2017 05:20
:wave:
linkin-park
@linkin-park
Sep 24 2017 05:23
hello_atom
linkin-park
@linkin-park
Sep 24 2017 05:44
back to fb main panel well all i could yesterday was header shit!
ChristianLLewis
@ChristianLLewis
Sep 24 2017 06:29
Hey everyone, kinda new to this room. I'd like to open by asking if anyone here has created dashboards that feature charts.
Gersho
@Gersho
Sep 24 2017 06:30
welcome ! but no sorry i haven't
you should link your project and additional information, maybe someone passing by later will know
linkin-park
@linkin-park
Sep 24 2017 06:31
might be :/ long back! using canvas :(
Sewwandi Dharmapriya
@SewwandiD
Sep 24 2017 06:55
<script> $(document).ready(function() { $("#target1").css("color", "red"); $("#target4").html("<em>target4</em>"); }); </script>
Hi, This code is not working
I can't find any error
Can somebody help me please!
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target4").html("<em>target4</em>");
  });
</script>
Gersho
@Gersho
Sep 24 2017 06:57
i can't find anything wrong either
Sewwandi Dharmapriya
@SewwandiD
Sep 24 2017 06:58
Hm.. but I' can't go to the next level.
Gersho
@Gersho
Sep 24 2017 06:58
try copying it, reseting your lesson and paste it back, might be a whitespace issue
linkin-park
@linkin-park
Sep 24 2017 06:58
can you give me the link to your question
Gersho
@Gersho
Sep 24 2017 06:58
oh yeah, the code works, but maybe you're not doing what's asked xD
Sewwandi Dharmapriya
@SewwandiD
Sep 24 2017 06:59
Waht??
Gersho
@Gersho
Sep 24 2017 07:00
no i checked and it's ok
linkin-park
@linkin-park
Sep 24 2017 07:00
use text or remove element tag
Sewwandi Dharmapriya
@SewwandiD
Sep 24 2017 07:00
*what's my mistake
Gersho
@Gersho
Sep 24 2017 07:00
oh
Sewwandi Dharmapriya
@SewwandiD
Sep 24 2017 07:00
Can't use .text() here neh..
Gersho
@Gersho
Sep 24 2017 07:00
you forgot a #
iso
@iso1048
Sep 24 2017 07:01
@SewwandiD you forgot #
oh, too slow
Gersho
@Gersho
Sep 24 2017 07:01
he's using html, but you're missing the # in the em
@gothamknight yeah but it was on my 10th time reading it
Sewwandi Dharmapriya
@SewwandiD
Sep 24 2017 07:01
@gothamknight @Gersho Thanks..
CamperBot
@camperbot
Sep 24 2017 07:01
sewwandid sends brownie points to @gothamknight and @gersho :sparkles: :thumbsup: :sparkles:
:cookie: 450 | @gersho |http://www.freecodecamp.com/gersho
:cookie: 434 | @gothamknight |http://www.freecodecamp.com/gothamknight
ChristianLLewis
@ChristianLLewis
Sep 24 2017 07:10
Thansk @Gersho, I haven't got anything much made to show, but I'm just trying to map out how to create a dashboard where users can click to create a new chart, set the parameters and then it's occupied by data from my database. This chart is saved in a list charts assigned to that dashboard, so every time they revisit that dashboard page they've got their dashboard displaying everything how they created it. It should be as simple as an AJAX request of the list of charts, then populate the page with html to render the charts, but I've been running in circles for the past day trying to make that work. Not a biggy, I'll figure it out eventually.
Gersho
@Gersho
Sep 24 2017 07:11
you should separate each step of the process (the ajax call, the html backbone, the rendering, ...) to get a better idea of what works and what doesn't
ChristianLLewis
@ChristianLLewis
Sep 24 2017 07:13
Yeah I've just decided to step back and clear my head, watch some tutorials. I'm very new to web dev, so I do get lost and make a mess easily.
Gersho
@Gersho
Sep 24 2017 07:16
yeah taking a step back is the idea (the step list thing is to allow for a different angle, and once you've broken it in small steps, you can lookup what you lack)
linkin-park
@linkin-park
Sep 24 2017 08:01
definetly need to learn to write css in a simpler form :)
Gersho
@Gersho
Sep 24 2017 08:02
simple css ? you wish
https://i.imgur.com/Q3cUg29.gif
linkin-park
@linkin-park
Sep 24 2017 08:04
rofl!
its hard to find what i missed or f! when working with it.
Gersho
@Gersho
Sep 24 2017 08:10
i'm not a big fan of css
it's like someone looked at how word handle your presentation when you try to move an image a bit and said "hold my beer"
linkin-park @linkin-park listening https://www.youtube.com/watch?v=Wod-MudLNPA
ChristianLLewis
@ChristianLLewis
Sep 24 2017 08:25
Oh the whole html and css paradigm is just a disgustingly unintuitive design process. I can't believe it's still the industry standard for making websites. Someone with the knowledge should start a whole new process where you simply draw it like in Illustrator and then define the dimensions with parametric modelling techniques. I'd be working on that right now if I had the knowledge and time.
Gersho
@Gersho
Sep 24 2017 08:27
because habits die hard, are you using Qwerty/Azerty or whatever your local variant is ?
those were designed to prevent you from typing too fast
ChristianLLewis
@ChristianLLewis
Sep 24 2017 08:29
That's another good point. But at least I could figure out qwerty and no one really complains about it. Everyone else still hates CSS. :P
linkin-park
@linkin-park
Sep 24 2017 08:32
there is no replacement of html css js :'( although transpiler exist from top to bottom
ChristianLLewis
@ChristianLLewis
Sep 24 2017 09:42
Javascript is really no more difficult than other languages, it's just the whole 'type a series cryptic words and punctuation to describe how a visual layout should appear' thing that HTML and CSS are guilty of.
Martialis39
@Martialis39
Sep 24 2017 11:10
hello all, wanted to ask some help
I am starting to look into React, but I know that I need lots of other things as well (babel, webpack) to use it. The why is a bit unclear
does anyone have a go-to article for getting started with REact?
heroiczero
@heroiczero
Sep 24 2017 11:24
@Martialis39 https://github.com/rwieruch/the-road-to-learn-react maybe this book will help you
@Martialis39 if you like it you can support the author here(https://leanpub.com/the-road-to-learn-react)
Fredrik Strand Oseberg
@FredrikOseberg
Sep 24 2017 11:43
Anyone know why state is not being updated in this code? The ajax requests are being made, data is coming back. It initially set’s up data correctly from componentDidMount, but then the price state is not updated even as new data comes in.
    componentDidMount() {
        this.getCoinData();
        this.interval = setInterval(() => {
            this.getCoinData();
        }, 10000);
    }

    componentWillUnmount() {
        clearInterval(this.interval);
    }

    getCoinData() {
        const data = axios.get(`http://coincap.io/page/${this.props.symbol}`).then(response => {
            this.setState({ price: response.data.price });
        });
    }
linkin-park
@linkin-park
Sep 24 2017 11:49
@heroiczero thanks awesome!
CamperBot
@camperbot
Sep 24 2017 11:49
linkin-park sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 1766 | @heroiczero |http://www.freecodecamp.com/heroiczero
heroiczero
@heroiczero
Sep 24 2017 11:52
@linkin-park TY
CamperBot
@camperbot
Sep 24 2017 11:52
heroiczero sends brownie points to @linkin-park :sparkles: :thumbsup: :sparkles:
:cookie: 36 | @linkin-park |http://www.freecodecamp.com/linkin-park
linkin-park
@linkin-park
Sep 24 2017 11:54
@heroiczero is it possible to achieve similar ui gui for radio option and drop down in all browser ?
heroiczero
@heroiczero
Sep 24 2017 11:59
@linkin-park probably could make radio with https://www.freecodecamp.org/challenges/create-a-set-of-radio-buttons and this is a nice example of Dropdown menu, but it depends how you want to design it, and how you want to make it look like
linkin-park
@linkin-park
Sep 24 2017 12:02
well in pc the looks is completely different and mac its different look
for dropdown and radio button @heroiczero
heroiczero
@heroiczero
Sep 24 2017 12:09
@linkin-park maybe you need -webkit-appearance:none; to remove the strong OSX influence, but sometime that how the browser are designed, so you can't do anything about it.
linkin-park
@linkin-park
Sep 24 2017 12:32
still working on fb ui thing :'(
linkin-park
@linkin-park
Sep 24 2017 12:38
@heroiczero cheerup !
linkin-park
@linkin-park
Sep 24 2017 12:44
cheer me up @heroiczero
heroiczero
@heroiczero
Sep 24 2017 13:32
@linkin-park Well that looks almost exactly like the Facebook sign up page nice job :+1: . :star:
linkin-park
@linkin-park
Sep 24 2017 13:47
lol :P
@heroiczero have a question for you this involves you to look at my code
    .section-2-inp-meta>input[type='radio']>label{
        font-size:22px;
    }
fails
but this seems to work
.section-2-inp-meta>label{
font-size:22px ;
}
@heroiczero
heroiczero
@heroiczero
Sep 24 2017 14:08
@linkin-park inputs are self-closing HTML elements. meaning <input /> similar to <img /> and here is a list http://xahlee.info/js/html5_non-closing_tag.html
@linkin-park so label cannot be a child of input
linkin-park
@linkin-park
Sep 24 2017 14:10
wait a min .. <input type=radio><label> FCC </label></input>
isnt this enclosing label ?
heroiczero
@heroiczero
Sep 24 2017 14:11
@linkin-park all inputs are like <input type="radio"/> like that
@linkin-park self close so you dont need the </input>
@linkin-park you could make your <label><input/> text</label> so you can click any part of the text to select the input
linkin-park
@linkin-park
Sep 24 2017 14:13
Oh! got it
ChristianLLewis
@ChristianLLewis
Sep 24 2017 14:45

Sorry if this is too far off the topic of front end, ignore me if you don't want to answer it. Just don't want to annoy the people over at Stack Overflow yet.

Alright, I'm doing an AJAX request for chart data in my prototype website. This is probably not a great way to do it, but it's the best I can figure out for now - I've made a script that takes the chart data and builds html around it to inject into the website. Here's the code that builds the html string with the chart data:

function renderHTML(data) {
    for(var i = 0; i <= data.chartSheet.length - 1; i++){
        var chartName = data.chartSheet[i].chartName;
        var chartId   = data.chartSheet[i].chartId;
        var chartData = data.chartSheet[i];
        var htmlString = "";

        htmlString =     "<div class='chart-region'>";
        htmlString +=        "<div class='chart-item'>";
        htmlString +=            "<h3>" + chartName + "</h3>";
        htmlString +=            "<canvas id='" + chartId + "' width='400' height='200'></canvas>";
        htmlString +=        "</div>";
        htmlString +=    "</div>";
        htmlString +=    "<script>";
        htmlString +=        "var ctx = document.getElementById('" + chartId + "');"
        htmlString +=        "var " + chartId + " = new Chart(ctx, " + chartData + ");"
        htmlString +=    "</script>";
    };
    reportContainer.insertAdjacentHTML('beforeend', htmlString);
}

data is a JSON file which looks like this:

{
    "userId": "USER_ID",
    "chartSheet": 
    [
        {
            "chartName": "AJAX Line Chart",
            "chartId": "CHART_ID",
            "type": "line",
            "data": {
                "labels": ["January", "February", "March", "April", "May", "June", "July"],
                "datasets": [{
                    "label": "My First dataset",
                    "backgroundColor": "rgba(255, 81, 130, 0.9)",
                    "borderColor": "rgb(255, 81, 130)",
                    "borderWidth": "0",
                    "data": [5, 10, 5, 2, 20, 22, 41]
                }, {
                    "label": "My Second dataset",
                    "backgroundColor": "rgba(0, 164, 239, 0.9)",
                    "borderColor": "rgba(0, 164, 239, 1)",
                    "borderWidth": "0",
                    "data": [12, 5, 20, 15, 32, 39, 30]
                }]
            },
            "options": {}
        }
    ]
}

My problem is that it almost works, but when I load the website this section:

"var " + chartId + " = new Chart(ctx, " + chartData + ");"

looks like this in the Chrome inspector:
Chrome console

Liam Docherty
@ldocherty1
Sep 24 2017 14:49
@ChristianLLewis Maybe try a forum post if no one answers it.
ChristianLLewis
@ChristianLLewis
Sep 24 2017 14:58
@ldocherty1 I'll try that tomorrow morning. For now I'll go to bed and hope someone bothers to answer me.
By the way, just to clarify - the problem is that the chart isn't loading, I suspect it's because the console is reading [object Object] instead of the actual chart data.
WangShuangshuang
@sarahwss
Sep 24 2017 16:04
hello
can you see my message
Is there something wrong
Wong Kai Chong 黄恺聪
@DrWongKC
Sep 24 2017 16:08
Hi yes
Hi there
Liam Docherty
@ldocherty1
Sep 24 2017 16:25

When I adjust my media query height % nothing happens to the height of my image. Is my max sizes correct?

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) {
  .parallax {
    height: 50%;
  }
 }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767px) {
  .parallax{
    height: 70%;
 }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) {
  .parallax{
    height: 64%; }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) {
.parallax{
    height: 75%; }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
  .parallax{
    height: 90%; }

https://jsfiddle.net/srcdbyrm/

Refath
@Refath
Sep 24 2017 16:49
Hey folks
Liam Docherty
@ldocherty1
Sep 24 2017 16:50
@Refath Hey
Refath
@Refath
Sep 24 2017 16:50
anyone mind leaving a review of my chrome app?
Jorge
@OrangeKulture
Sep 24 2017 16:54
@ldocherty1 it all depends on the container that's holding the image
also, u have to specify a width
Liam Docherty
@ldocherty1
Sep 24 2017 16:57
@OrangeKulture All good I got it working now
thanks though
Jorge
@OrangeKulture
Sep 24 2017 16:57
sure thing :thumbsup:
linkin-park
@linkin-park
Sep 24 2017 17:41
my life sucks!
why cant change the width of a text in a span/div ?
aka when text over div/span width it must be hidden :(
<span style='width:10;'><a href="#" '>Why do i need to provide my date of birth</a></span>
santhoshbalaguru001
@santhoshbalaguru001
Sep 24 2017 17:48
@santhoshbalaguru001
https://codepen.io/santh/pen/qPbBjQ I added image on page four in css its not showing correctly
pls help me out
Geekomatic
@Geekomatic
Sep 24 2017 17:53
@linkin-park forgot a "px" there. Not sure what you're trying to do.
John
@AnonymousLords
Sep 24 2017 17:54
rooms
CamperBot
@camperbot
Sep 24 2017 17:54

freeCodeCamp rooms:

:point_right: Here is a list of our official chat rooms
screw it!
Geekomatic
@Geekomatic
Sep 24 2017 17:57
@linkin-park don't think you have the right value for text-overflow.
John
@AnonymousLords
Sep 24 2017 17:57
rooms
CamperBot
@camperbot
Sep 24 2017 17:57

freeCodeCamp rooms:

:point_right: Here is a list of our official chat rooms
linkin-park
@linkin-park
Sep 24 2017 17:59
with changes i found its working on mentioning overflow-x:hidden
thats stupid!
StrategyIsKey23
@23beyblade
Sep 24 2017 17:59
hey does anyone know what the class container fluid does?
linkin-park
@linkin-park
Sep 24 2017 17:59
for this it fails
and what is the purpose of span
why this behavior exist only for block level
Geekomatic
@Geekomatic
Sep 24 2017 18:01
overflow and text-overflow don't have the same usable values
text-overflow:clip should work I believe
santhoshbalaguru001
@santhoshbalaguru001
Sep 24 2017 18:04
anyone is there?
Refath
@Refath
Sep 24 2017 18:05
Hey guys
I'm a teenager who just finished building his web app
Wondering if anyone could take the time to post a review?
Geekomatic
@Geekomatic
Sep 24 2017 19:19
Need people to break my pomodorro clock https://codepen.io/Geekomatic/pen/NgmMZd
ADIL KARMOUZI
@mradil16
Sep 24 2017 20:20
Guys . can I build the following layout using flex-box ? : https://codepen.io/mradil16/full/Nabydj/
if yes . how to do so ?
iso
@iso1048
Sep 24 2017 20:23
@mradil16 I'm no expert but you should be able to. You could specify the alignment for each container within the flex-box using the align-self property.
@mradil16 have you used flex-box before?
ADIL KARMOUZI
@mradil16
Sep 24 2017 20:26
no it's the first time I use this concept
iso
@iso1048
Sep 24 2017 20:28
@mradil16 this is good: http://flexboxfroggy.com/
ADIL KARMOUZI
@mradil16
Sep 24 2017 20:31
thank you
LydaTech
@lydatech
Sep 24 2017 20:46
@mradil16 http://flexboxzombies.com/p/flexbox-zombies is a cute way to learn
Elizabeth Paul
@Kowalatam
Sep 24 2017 21:10
@Geekomatic Nice :+1: .. just noticed the triangle for your tictactoe is small... i.e X and o's show outside it.. except if thats how u wanted it.. cool
Geekomatic
@Geekomatic
Sep 24 2017 22:50
completely outside or just sligthly clipping ? if so it's intended. @Kowalatam Ty for your input.
CamperBot
@camperbot
Sep 24 2017 22:50
geekomatic sends brownie points to @kowalatam :sparkles: :thumbsup: :sparkles:
:cookie: 318 | @kowalatam |http://www.freecodecamp.com/kowalatam
Ismail Hozain
@ismailhozain
Sep 24 2017 23:41
hey guys im having trouble with the twitch api any help please?
here is my pen
..
Miguel T Rivera
@mtrivera
Sep 24 2017 23:51
@ismailhozain Twitch recently changed their API, Idk if the one provided by freeCodeCamp works anymore. Mine worked fine before, but now it does not work at all.
Ismail Hozain
@ismailhozain
Sep 24 2017 23:51
uh so do i have to go get an api key now ?
iso
@iso1048
Sep 24 2017 23:53
@ismailhozain i dont think you will have to. you can complete the challenge using the following routes:
https://wind-bow.glitch.me/twitch-api/streams/[user]
https://wind-bow.glitch.me/twitch-api/channels/[user]
Ismail Hozain
@ismailhozain
Sep 24 2017 23:54
do i use both or one or the other
?
i used both.
Ismail Hozain
@ismailhozain
Sep 24 2017 23:55
ok
Gersho
@Gersho
Sep 24 2017 23:55
@ismailhozain depends on your need, they don't return the same data
Ismail Hozain
@ismailhozain
Sep 24 2017 23:55
i'll try my hand at both i kinda stink at apis so i will give it a shot
Gersho
@Gersho
Sep 24 2017 23:55
i only used the steams one, but you can use both
Ismail Hozain
@ismailhozain
Sep 24 2017 23:56
ok thanks
Gersho
@Gersho
Sep 24 2017 23:56
that's what the projects are for, playing around with things and learn so go have fun ^^
hifede
@hifede
Sep 24 2017 23:58
hey there! hi guys! I've been struggling with trying to make my portfolio page mobile responsive by putting my rows into containers. however, now my navbar brand and the contact form have both moved to the right of the page, and it still doesnt fit a mobile screen well. i tried adding <body data-spy="scroll" data-target=".navbar" data-offset="0"> to HTML head in settings but it didnt help. could anyone help me on what to do ? https://codepen.io/arolf_flora/full/WEoYmd/