These are chat archives for FreeCodeCamp/HelpFrontEnd

5th
Aug 2018
Next gigi hadid💁
@1Droka_twitter
Aug 05 2018 02:11
story#8 : <nav id="navbar"> </nav>
story#9: <nav id="navbar"> <p>hellp</p></nav>
story#10: <nav id="navbar"> <p>hellp</p>
<a href="#" class= "nav-link">
</nav>
@tundeiness
is there any one can help in back-end part ?
newmoon
@newmoon
Aug 05 2018 02:16
@1Droka_twitter <header> element, I think you mean. Not <p>.
What back-end part are you referring to?
Next gigi hadid💁
@1Droka_twitter
Aug 05 2018 02:17
@newmoon yes <header> not< p> you are right
input type="file"
i want to insert it in the database
in post form
$filename=$_FILES['file']['name'];
$filetmp=$_FILES['file']['tmp_name'];
move_uploaded_file($filetmp,"imgs/".$filename);
newmoon
@newmoon
Aug 05 2018 02:19
I don't think there's any PHP in Free Code Camp's curriculum. You may want to try somewhere else.
Next gigi hadid💁
@1Droka_twitter
Aug 05 2018 02:19
i used this once and worked , now i get errors in the first two lie
newmoon
@newmoon
Aug 05 2018 02:19
I don't know any PHP. Sorry :(
Next gigi hadid💁
@1Droka_twitter
Aug 05 2018 02:20
oh okay thanks for replying
glitz20
@glitz20
Aug 05 2018 02:58
any body here knows about react router?
Nazar
@IsaakNazar
Aug 05 2018 03:38
@sabin20 you can post you question here, I believe someone has an answer
Ashan Mohammed
@AshanMohammed
Aug 05 2018 04:26
@padunk Thanks mate
glitz20
@glitz20
Aug 05 2018 06:21
hey guys I donot know why my router in react is not working
I have this in index.js
ReactDOM.render(
    <Router>
        <div>
            <Route exact path='/' component={App} />
            <Route path='/add-item' component={AddItem} />
            <Route path='/edit/:id' component={EditItem} />
            <Route path="/signup" component={Signup} />
            <Route path="/login" component={LoginForm} />

            <Route path='/description/:id' component={Description} />
        </div>

    </Router>,
and this in app.js
render() {
    return (
      <div className="App">

        <Navbar updateUser={this.updateUser} loggedIn={this.state.loggedIn} />
        {/* greet user if logged in: */}
        {this.state.loggedIn &&
          <p>Join the party, {this.state.username}!</p>
        }
        {/* Routes to different components */}
        <Route
          exact path="/home"
          component={Home} />
        <Route
          path="/login"
          render={() =>
            <LoginForm
              updateUser={this.updateUser}
            />}
        />

            {/*<Route
          path="/signup"
          render={() =>
            <Signup/>}
            />*/}


            <div>
                <Link to="/add-item" className="btn btn-primary">Add New</Link>
                <IndexItem />
            </div>


      </div>
    );
but my login isn't functioning
glitz20
@glitz20
Aug 05 2018 06:27
it however works when I render just <App /> in index.js
So, there is problem with routinh
*routing
alpox
@alpox
Aug 05 2018 06:57
@sabin20 you need to put a Switch around your routes in index.js
James Itum
@isemaj_gitlab
Aug 05 2018 07:05
Hi, I read on stackoverflow (https://stackoverflow.com/questions/27796938/) that combining col and row at the same element (e.g. class="col row align-items-center") when using bootstrap is not a good idea. Which is what I did here https://codepen.io/isemaj/pen/mjjVje. But nesting row inside col as what is suggested on the stackoverflow doesn't work either https://codepen.io/isemaj/pen/yqqeGK.
inovramadani
@inovramadani
Aug 05 2018 07:24
Hi guys, I'm learning redux now, stuck on this lesson:
https://learn.freecodecamp.org/front-end-libraries/redux/handle-an-action-in-the-store
const defaultState = {
  login: false
};

const reducer = (state = defaultState, action) => {
  // change code below this line
  if (action.type === 'LOGIN') {
    state.login = true;
  }
  return state;
  // change code above this line
};

const store = Redux.createStore(reducer);

const loginAction = () => {
  return {
    type: 'LOGIN'
  }
};
// running test
The store should be initialized with an object with property login set to false.
Cannot create property 'login' on boolean 'false'
If the action is not of type LOGIN, the store should return the current state.
// tests completed
Aditya
@ezioda004
Aug 05 2018 07:29
@inovramadani You need to return the state itself ie object. So like if the action.type matches then return the state with login: true otherwise return the state which was passed to the reducer.
inovramadani
@inovramadani
Aug 05 2018 07:30
awesome, thanks @ezioda004 !
Aditya
@ezioda004
Aug 05 2018 07:31
:thumbsup:
Ashan Mohammed
@AshanMohammed
Aug 05 2018 07:32
guys help
Why does the all 3 features align correctly. It seems like the first feature add more margin to the left https://codepen.io/ashan_zeroxster/pen/mjpYdz?editors=1000
inovramadani
@inovramadani
Aug 05 2018 08:02

help [again] please...
https://learn.freecodecamp.org/front-end-libraries/redux/send-action-data-to-the-store

const ADD_NOTE = 'ADD_NOTE';

const notesReducer = (state = 'Initial State', action) => {
  switch(action.type) {
    // change code below this line
    case ADD_NOTE: 
      return {text: action.text}; 
      break;
    // change code above this line
    default:
      return state;
  }
};

const addNoteText = (note) => {
  // change code below this line
  return {
    type : ADD_NOTE,
    text : note
  };
  // change code above this line
};

const store = Redux.createStore(notesReducer);

console.log(store.getState());
store.dispatch(addNoteText('Hello!'));
console.log(store.getState());

// running test
Dispatching an action of type ADD_NOTE with the addNoteText action creator should update the state to the string passed to the action creator.
// tests completed

inovramadani
@inovramadani
Aug 05 2018 08:12
why is the code above not able to pass the test? Indeed i got {text: "hello"} on the console.
inovramadani
@inovramadani
Aug 05 2018 08:17
oh found it already, what's expected is the value itself and not an object
mustimuu
@mustimuu
Aug 05 2018 10:41
Can someone help me ?
When i start my xaamp i start apache and mysql.
I created a folder in the htdocs folder.
htdocs/testphp/test.php
Now i want to edit the test.php in the localhost but i can't do it because it want to connect to a database.
It redirects me to a wordpress installaton proces, but it should't do so, because it is just a file where i want to test some stuff?
yozhikvtumane
@yozhikvtumane
Aug 05 2018 12:52
@mustimuu why it shouldn't redirect you to WP installation?
do you try to open a folder or test.php file itself?
tundeiness
@tundeiness
Aug 05 2018 13:14
@JohnnyBizzel here please: https://codepen.io/highness/pen/eKaogZ
@1Droka_twitter How about this:
User Story #3: The first element within each .main-section should be a header element which contains text that describes the topic of that section.
User Story #4: Each section element with the class of main-section should also have an id that corresponds with the text of each header contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header "Javascript and Java" should have a corresponding id="Javascript_and_Java").
User Story #5: The .main-section elements should contain at least 10 p elements total (not each).
User Story #6: The .main-section elements should contain at least 5 code elements total (not each).
User Story #7: The .main-section elements should contain at least 5 li items total (not each). ?
Johnny
@JohnnyBizzel
Aug 05 2018 13:16
@tundeiness when I run it, it passes all tests :+1:
mustimuu
@mustimuu
Aug 05 2018 14:23

Hi!
As you can see the show-all is within the partner-filter.
So if i give the "partner-filter" float right the "show-all" div will ofcourse go with, because it is in the same div. But if i but the "show-all" out of the div, it wont aline with the partner-filter div, because the div is in the way.
I want the "show-all" and "partner-filter" to align with each other.
The "show-all" should float to the left and "partner-filter" to the right.

<div class="partner-filter">
<div class="show-all">
Alle partnere
</div>

<div class="sort-order">
    A-Z
</div>
<span class="partner-filter-title">
    Sorter efter:
</span>
This message was deleted
tundeiness
@tundeiness
Aug 05 2018 15:55
@JohnnyBizzel Thanks!!
glitz20
@glitz20
Aug 05 2018 16:44
@alpox how do I implement switch in my case? the document is unclear to me
mustimuu
@mustimuu
Aug 05 2018 16:56
Hello
who is using visuel code here ?
mustimuu
@mustimuu
Aug 05 2018 17:09
@mustimuu
can someone help me ?
I want the text to stand under the image, but it get inside the 4 col grid in bootstrap
alpox
@alpox
Aug 05 2018 17:38
@sabin20 you just put it around the <Route>elements in your index.js (one switch around all of them)
glitz20
@glitz20
Aug 05 2018 17:50
@alpox yeah I had done that, but it is still not working
alpox
@alpox
Aug 05 2018 17:50
@sabin20 can I see?
glitz20
@glitz20
Aug 05 2018 17:50
ReactDOM.render(
    <Router>

        <div>
            <Switch>
            <Route exact path='/' component={App} />
            <Route path='/add-item' component={AddItem} />
            <Route path='/edit/:id' component={EditItem} />
            <Route path="/signup" component={Signup} />
                <Route path="/login" component={LoginForm} />
                <Route path="/home" component={Home} />


                <Route path='/description/:id' component={Description} />
            </Switch>
        </div>

    </Router>,
@alpox
alpox
@alpox
Aug 05 2018 17:51
@sabin20 This looks right. I wonder what exactly does not work now? (What happens)
@sabin20 I just see that you have a /login route in the index.js and one in app.js (2 times /login). Is that intended? You'd render two times a LoginForm
glitz20
@glitz20
Aug 05 2018 17:56
@alpox no
So, login is working, but it is not directed to the home page after that
@alpox should I remove the the from the index.js?
alpox
@alpox
Aug 05 2018 17:58
@sabin20 Back to home from where?
glitz20
@glitz20
Aug 05 2018 18:03
after succesful login
  console.log(response)
                if (response.status === 200) {
                    // update App.js state
                    this.props.updateUser({
                        loggedIn: true,
                        username: response.data.username
                    })
                    // update the state to redirect to home
                    this.setState({
                        redirectTo: '/'
                    })
this is form login-form
glitz20
@glitz20
Aug 05 2018 18:10
@alpox
alpox
@alpox
Aug 05 2018 18:10
And where do you redirect?
/ does not go to home btw.
/home does
inovramadani
@inovramadani
Aug 05 2018 18:31
glitz20
@glitz20
Aug 05 2018 18:35
@alpox I am sorry, I mean app.js
Moisés Man
@moigithub
Aug 05 2018 18:39
if put ur code on codesandbox or stackblitz... maybe easier to check @sabin20
@moigithub
Moisés Man
@moigithub
Aug 05 2018 19:01
https://stackblitz.com/edit/react-7ecbxw?file=index.js might help
using history object to navigate using code
glitz20
@glitz20
Aug 05 2018 19:20
@ I am using state to redirect to
@moigithub
alpox
@alpox
Aug 05 2018 19:56
@sabin20 just using componrnt state does not redirect
glitz20
@glitz20
Aug 05 2018 19:57
It works when I just add <App/> in router in index.js though
alpox
@alpox
Aug 05 2018 20:00
@sabin20 rather when you use a Redirect component - i saw you do that though
glitz20
@glitz20
Aug 05 2018 20:00
@alpox how can redirect to app.js then?
and in index.js is it good practise to just do:
ReactDOM.render(
    <Router>

       <App />

    </Router>,
and add everything in app. js or do smth like
ReactDOM.render(
    <Router>

        <div>
            <Switch>
            <Route exact path='/' component={App} />
            <Route path='/add-item' component={AddItem} />
            <Route path='/edit/:id' component={EditItem} />
            <Route path="/signup" component={Signup} />
                <Route path="/login" component={LoginForm} />
                <Route path="/home" component={Home} />


                <Route path='/description/:id' component={Description} />
            </Switch>
        </div>

    </Router>,
alpox
@alpox
Aug 05 2018 20:03
@sabin20 you likely already do but you render the Login twice - once in App.js and once in index.js
Choose one place and stick with it
Except you need it like this...
glitz20
@glitz20
Aug 05 2018 20:08
/login doesnot work when I remove route from index.js
alpox
@alpox
Aug 05 2018 20:09
@sabin20 btw what you said is good practice and usually done
You usually have App in the index.js and the routes in App.js
@sabin20 yes it doesnt work anymore because the first route is not matched anymore. The /login inside of App.js cannot be triggered due to the exact prop you pass to the route to App in the index.js
But better put the <App /> in index.js and the routes in App.js
glitz20
@glitz20
Aug 05 2018 20:11
@alpox yeah I should do that
should I put all the router in app.js
just like
<Router>
 <Route exact path='/' component={App} />
            <Route path='/add-item' component={AddItem} />
            <Route path='/edit/:id' component={EditItem} />
            <Route path="/signup" component={Signup} />
</Router>
alpox
@alpox
Aug 05 2018 20:17
No you can leave the Router in index.js
zootechdrum
@zootechdrum
Aug 05 2018 22:05
hello
how can i center my radio elements in my survey form
as it stands now the radio buttons go all the way to left of my survey form
I want it to be centered
nevermind
lol
Lia-Sue-Kim
@Lia-Sue-Kim
Aug 05 2018 22:39
if you want to go for backend how can you measure that basics of threee core languages for web html css and js?
Lia-Sue-Kim
@Lia-Sue-Kim
Aug 05 2018 23:26
@zootechdrum horizontally you can do it with block elements i believe
glitz20
@glitz20
Aug 05 2018 23:39
@alpox so how should I put routes in App.js? I do have some but it isn't working
when I have both <App/> and route path in <router> in index.js, I get this error
A <Router> may have only one child element