These are chat archives for FreeCodeCamp/HelpFrontEnd

3rd
Aug 2018
abraham anak agung
@padunk
Aug 03 2018 01:30

@zootechdrum change it to:

          <Editor 
            input = {this.state.input} 
            handleChange={this.handleChange}
            condition={this.state.condition}/>

// on your textarea:
      <textarea 
        id="editor"
        className= { this.props.condition ? "toggled buttons" : "buttons" }
        onChange={this.props.handleChange} 
        value={this.props.input} >

You have to change your css class in your textarea, not the div parent.

and don't forget to change your div parent into this <div id="toolbar">Editor<i onClick={ this.handleClick } className="far fa-edit"></i></div>
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 03 2018 02:37
@bradtaniguchi Thank you for your insight! Few questions: where is my indentation off? Should i always be left justified, even with nested if statements? Also, what actions am i repeating? I tried refactoring a lot of actions in my external functions, but im suspicious that im not wise enough to see the redundancies that may still be there.
Brad
@bradtaniguchi
Aug 03 2018 03:04
@willybeans Run a linter/auto formatter on your code, your indentation should be 2 or 4 spaces for each "block" of code (any code between {})
Nathan
@natertot12
Aug 03 2018 04:16
Screen Shot 2018-08-02 at 11.38.29 PM 2.png
Hey guys, so I recently decided to update my portfolio page. However, I'm having a problem that happens sporadically and I can't figure it out. Every so often my page shifts to the left and it looks like this. Has this happened to anyone before?
Thanks in advance!
I've even tried setting min-width: 100% !important; & width: 100% !important; on body and html and it still does it.
glitz20
@glitz20
Aug 03 2018 04:26
hey guys, what is the simplest to route to a new page onClick in react?
abraham anak agung
@padunk
Aug 03 2018 04:26
@sabin20 use react router Link or history.push(pathname)
glitz20
@glitz20
Aug 03 2018 04:29
@padunk do I need to import anything to use history.push(pathname)?
because I am getting this error right now
Line 27: Unexpected use of 'history' no-restricted-globals
@padunk
 handleClick(e) {
        e.preventDefault();
        console.log(this.props.history)
        history.push('/description/' + this.props.obj._id);
    }

    render() {
        return (
            <tr onClick={this.handleClick}>
                <td>
                    {this.props.obj._id}
so this is what I did
abraham anak agung
@padunk
Aug 03 2018 04:32
@sabin20 BrowserRouter, Switch, Route.
This is what my index.js looks like:
<BrowserRouter>
  <App />
</BrowserRouter>

// App
<Switch>
  <Route exact path='/' component={Home} />
  <Route path='/about' component={About} />
</Switch>
then u can have history, location and match as props
Claudio Restifo
@Marmiz
Aug 03 2018 04:33

@sabin20 history is a global variable reserved in JS.

history.push(

is trying to access that.
Perhaps this.props.history.push(...)
is what you are looking for

abraham anak agung
@padunk
Aug 03 2018 04:35
@Marmiz good afternoon :wave:
glitz20
@glitz20
Aug 03 2018 04:36
@Marmiz getting this error
TypeError: Cannot read property 'push' of undefined
Claudio Restifo
@Marmiz
Aug 03 2018 04:36
@padunk :wave:
@sabin20 because you are not passing history (again)
glitz20
@glitz20
Aug 03 2018 04:36
how should I pass the history?
Claudio Restifo
@Marmiz
Aug 03 2018 04:37
it's passed to the render component of the route, from that point on you have to pass it manually to any sub-component like i told you yesterday

example:

<route render={A}>

A will have history, match, location props to it

But if you need B to have history, and is a child of A simply pass it like any other prop in react.
<A>
  <B history={this.props.history} />
</A>
 console.log(this.props.history)
what is logging? Undefined I guess
mustimuu
@mustimuu
Aug 03 2018 07:36
Hey guys
I want to implement a data-filter in php
After i used get_termid what do i do
Christopher
@bradley1492
Aug 03 2018 08:12
@tiagocorreiaalmeida Ah yess thanks for the tip yesterday, the overflow property was what I was looking for. :)
zootechdrum
@zootechdrum
Aug 03 2018 14:13
@padunk Thank you. I was stuck on that for days
Lia-Sue-Kim
@Lia-Sue-Kim
Aug 03 2018 16:18
if you by domain and hosting and your website is empty.How designing companies find you?
I mean i dont know how they find my email and my full name sending me email if i need something
like they want to design and develop my website
when you owe a website is somewhere is written your name and email?
Donnie
@Donnie-D
Aug 03 2018 16:46
I have a question :thought_balloon: . When we create a link to target an element somewhere down on the same long page and when we click on that link, usually the target element appears right on the top of our page. Is there any way we could adjust the position of the target element so it would not appear on the top of the page and would show just a litle bit down may be?
newmoon
@newmoon
Aug 03 2018 17:02
@Donnie-D Yes, this is possible. Either with JavaScript or by adding padding with CSS to the top of the element you navigate to
Donnie
@Donnie-D
Aug 03 2018 17:05
@newmoon I would like it without JS at the moment. adding padding with CSS to the top of the element you navigate to ....... ??? :confused:
so here is the page just for example
I have linked the input element and the submit button to the links in the top navigation. But when I click on the link buttons they target elements hide behind the header
Mois├ęs Man
@moigithub
Aug 03 2018 17:10
#video {padding-top: 500px; }
Donnie
@Donnie-D
Aug 03 2018 17:19
@moigithub that makes the situation worse :smile:
newmoon
@newmoon
Aug 03 2018 17:20

@Donnie-D This won't work for linking to input fields - but for any section element or div container-style element, it works great:

#video {
  padding-top: 100px;
  margin-top: -100px;
}

It's a common issue with fixed navbars - that's one of many ways to work around it. @fejkens had a similar issue a few days ago :point_up:

The JS fix is pretty simple too:
window.addEventListener("hashchange", () => scrollBy(0, -150));
adjust -150 as needed
fejkens
@fejkens
Aug 03 2018 17:37
@newmoon :heart:
Donnie
@Donnie-D
Aug 03 2018 17:42
@newmoon :question: how can i save your solution so i could come back later and look :laughing: I have got kids around
newmoon
@newmoon
Aug 03 2018 17:42
@Donnie-D Copy and paste it into a codepen and save it for later
Donnie
@Donnie-D
Aug 03 2018 17:42
this has always been my problem on gitter main chat
newmoon
@newmoon
Aug 03 2018 17:44
I think it's important to understand why these solutions fix the problem - then you won't need to rely so much on looking them up again later. You'll know the keywords to use to find it in a web search. I didn't know that stuff off the top of my head.
Donnie
@Donnie-D
Aug 03 2018 17:45
yes probably thats one feasible idea for now :thumbsup: Gitter should create some bookmark sort of options to save certain parts of our conversation
newmoon
@newmoon
Aug 03 2018 17:45
You can alt+right-click the time to generate a link to the comment
Donnie
@Donnie-D
Aug 03 2018 17:45
@newmoon I agree with you 100%.
newmoon
@newmoon
Aug 03 2018 17:45
Save that link in your bookmarks folder
Donnie
@Donnie-D
Aug 03 2018 17:47
i am doing alt + right click but there is apparently nothing happening
newmoon
@newmoon
Aug 03 2018 17:49
maybe try a left click? :)
If you hover over the time, it will show the instructions
Still learning gitter myself :)
Donnie
@Donnie-D
Aug 03 2018 17:51
got it :thumbsup:
@newmoon thanks
yozhikvtumane
@yozhikvtumane
Aug 03 2018 18:03
Hello!
What's up with Create a Horizontal Line Using the hr Element ? I can't pass tests
Lia-Sue-Kim
@Lia-Sue-Kim
Aug 03 2018 18:42

I have index page in public_html and in the same folder i have images folder so when i link from index to images like that it doesnt work

<link rel="icon" type="image/png" href="images/nevci.png">

yozhikvtumane
@yozhikvtumane
Aug 03 2018 18:44
@Lia-Sue-Kim use img tag
<img src="images/nevci.png">
Lia-Sue-Kim
@Lia-Sue-Kim
Aug 03 2018 18:44
it's for tab
alpox
@alpox
Aug 03 2018 18:44
@Lia-Sue-Kim do not include images with link unless you have to show special app icons for mobile or tab icons
Lia-Sue-Kim
@Lia-Sue-Kim
Aug 03 2018 18:45
when you see a picture or logo in your website that you host in a hosting
it is for tab actually
before the title you put logo or pic whatever
alpox
@alpox
Aug 03 2018 18:46
@Lia-Sue-Kim I'm not sure if it can load your icon like this for the tab (Have to look it up) because the general name for that icon is favicon.ico (.ico format)
Maybe favicon.png? :D It would be weird if the name matters though
@Lia-Sue-Kim Ofc. try to use the path href="/images/nevci.png" (add a /)
Lia-Sue-Kim
@Lia-Sue-Kim
Aug 03 2018 18:48
ffc.png
ok
it doesnt work as well

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>
<meta charset="utf-8">
<title>Nevci </title>
<link rel="icon" type="image/png" href="/images/nevci.png">
<link rel="stylesheet" href="main.css">
</head>

<body>

</body>

</html>

yozhikvtumane
@yozhikvtumane
Aug 03 2018 19:08
href="images/favicon.png">
Lia-Sue-Kim
@Lia-Sue-Kim
Aug 03 2018 19:08
do i have to rename it
yozhikvtumane
@yozhikvtumane
Aug 03 2018 19:08
yeah
Lia-Sue-Kim
@Lia-Sue-Kim
Aug 03 2018 19:08
but why
i mean is the word favicon has a meaning to the browser
ok i will try
yozhikvtumane
@yozhikvtumane
Aug 03 2018 19:13
maybe I am not right
=D
Lia-Sue-Kim
@Lia-Sue-Kim
Aug 03 2018 19:14
it works in browser but not in real website
i mean when you use it with hosting
thanks buddy
yozhikvtumane
@yozhikvtumane
Aug 03 2018 19:14
try reloading by pressin ctrl+f5
this will clean the cache
and also you can check the console
for errors
Lia-Sue-Kim
@Lia-Sue-Kim
Aug 03 2018 19:33
when you link correctly it won't show
even w3validator
alpox
@alpox
Aug 03 2018 19:35
The favicon is one of the most aggressively cached thing in browsers
Im not sure if ctrl-f5 would be enough :X
Lia-Sue-Kim
@Lia-Sue-Kim
Aug 03 2018 19:36
in firefox it works fine but don't kniow what is wrong with chrome
alpox
@alpox
Aug 03 2018 19:38
@Lia-Sue-Kim Most likely cache
Lia-Sue-Kim
@Lia-Sue-Kim
Aug 03 2018 19:43
yes thanks
it works now
tundeiness
@tundeiness
Aug 03 2018 20:30
hI guys. Here is my modest product landing page created since I had to restart some new FCC projects. Please help critique..I need feedback especially it behaviour in mobile devices. Thanks. and Prolly help drop a solution as well? https://codepen.io/highness/full/eKaogZ/
Tom
@moT01
Aug 03 2018 22:33
@tundeiness looks pretty responsive to me
the navbar doesnt look great
like the gray backgrounds on the buttons and logo should be transparent of something
i actually just watched that video the other day
the footer could use some space below it
tundeiness
@tundeiness
Aug 03 2018 22:35
@moT01 oh you did? :)
Tom
@moT01
Aug 03 2018 22:35
i did
im not sure what to think about that guy - but his videos are solid
tundeiness
@tundeiness
Aug 03 2018 22:37
@moT01 hmmm...will take a look at it again...the picture background was just the idea that came to mind at the time of design.
@moT01 yes...dope videos.
Tom
@moT01
Aug 03 2018 22:38
nothing wrong with the picture
but the buttons have a solid gray bar behind them that extends to the middle
tundeiness
@tundeiness
Aug 03 2018 22:39
@moT01 with respect to the navbar, I will adjust accordingly...I noticed it as well but I was in a hurry to submit...I had wasted too much time on the design.
@moT01 at the navbar? hmmm...did you notice the hover pattern or it's not showing up at your end?
Tom
@moT01
Aug 03 2018 22:42
oh
crap
forget all I said
i just installed a night mode add on to my browser
yea, the night mode gave the background I was talking about to your links
looks better with it off
footer could still use some paddings or something
Screen Shot 2018-08-03 at 5.44.14 PM.png