These are chat archives for FreeCodeCamp/HelpFrontEnd

29th
Aug 2018
Donnie
@Donnie-D
Aug 29 2018 01:03
I am actually stuck on using a css selection. Can anybody see to it please?
https://codepen.io/Donnie-D/pen/xJNYKK?editors=1100
All I want is , to show and hide my nav-link elements upon the click on the burger menu in smaller screen
abraham anak agung
@padunk
Aug 29 2018 01:26

@Donnie-D use #mobile-menu:checked ~ .nav-link and your html:

  <input id='mobile-menu' type='checkbox'>
  <a class='nav-link' href='#loseWeight'>How to lose weight</a>

or better, wrap the link into a div

      <input id='mobile-menu' type='checkbox'>
     <div class='menu-content'>
      <a class='nav-link' href='#loseWeight'>How to lose weight</a>
and use #mobile-menu:checked ~ .menu-content
Donnie
@Donnie-D
Aug 29 2018 01:35
@padunk doesn't work . I tried that I am afraid
abraham anak agung
@padunk
Aug 29 2018 01:36
@Donnie-D it working here, wait, i put it in new codepen
Donnie
@Donnie-D
Aug 29 2018 01:42
@padunk I can see that you have put the nav-links in a div and put that div into the header. I wanted the nav-links to be out of the header if possible
The problem I am coming across is finding a css selector that can select the nav-links as they are placed in my code.
abraham anak agung
@padunk
Aug 29 2018 02:00
@Donnie-D maybe this can help https://www.w3schools.com/cssref/css_selectors.asp. Anyway you can take your input out of the header and put it on top of the nav-link
Donnie
@Donnie-D
Aug 29 2018 02:04
So if my input element i.e., burger icon is in a container element (lets call that container element as header) and my target elements (that I want to show or hide when I check or uncheck my input element / burger icon) are out of that header then we can't select those elemenst using css? Just want to get my facts straight here please @padunk
abraham anak agung
@padunk
Aug 29 2018 02:06
@Donnie-D The only way i learn from tutorial using css selector ~ is that the target elements need to be directly precede by the input check element cause p ~ ul in css means Selects every <ul> element that are preceded by a <p> element.
I've been playing with it several time using other selector and it is not working.
newmoon
@newmoon
Aug 29 2018 02:07
@Donnie-D CSS only allows us to select siblings and children. I think you're trying to access a cousin - if that's a term in HTML. Basically, we can't select parents, their siblings, or their children.
This is a great case for reorganizing your HTML if you must use CSS (Customers won't have JS Enabled). Or, just use JS:
document.getElementById("burger-menu").onclick = () => {
  document.querySelectorAll(".nav-link").forEach(link => {
    if (link.style.display === "block") {
      link.style.display = "none";
    } else {
      link.style.display = "block";
    }
  });
};
^ that can be simplified with a class that hides/shows elements and using .toggle() instead
Donnie
@Donnie-D
Aug 29 2018 02:12
@newmoon I wanted to complete this pen using css and html only. so CSS only allows us to select siblings and children?
newmoon
@newmoon
Aug 29 2018 02:12
That's correct
Donnie
@Donnie-D
Aug 29 2018 02:13
thanks
sometimes such simple explanations ease a lot of headaches
@newmoon
Yashwardhan Pauranik
@yashwp
Aug 29 2018 09:19
My code is throwing error when I want to delete item from index in this this.brief.pictures.splice(index, 1); .
Error is TypeError: Cannot delete property '0' of [object Array] at Array.splice. What wrong in the code?
  deleteImage(id: number) {
    this.apolloService.mutateWithRefetch(DeleteImageMutation, {attachment_id: id}, [this.refetchBrief])
      .subscribe((res: any) => {
          const index = this.brief.pictures.findIndex((i: any) => res.attachmentDestroy.id === i.id);
          if (index > -1) {
             this.brief.pictures.splice(index, 1);  //  TypeError: Cannot delete property '0' of [object Array]  at Array.splice
          }
        },
        (err: any) => {
          this.errorService.showErrorModal(err.networkError);
        });
  }
Stephen James
@sjames1958gm
Aug 29 2018 11:46
@yashwp Maybe console.log(this.brief.pictures) before the splice
Also, don't know the environment, but is it possible that this.brief.pictures is somehow immutable?
Jefferson
@jeffersonnnn
Aug 29 2018 11:51
hi guys, this is a newbie question but i just want to understand something.
i am trying to get the length of my array after getting away all duplicates, but i can't seem to pas my test cases
var removeDuplicates = function(nums) {
      var backpage = [...new Set(nums)];
      return backpage.length;
};
NikolaNbgd
@NikolaNbgd
Aug 29 2018 12:07
Hi guys, does anyone have experience with background shapes?
I would appreciate some help :)
Morchid Chellali
@Morched23MJ
Aug 29 2018 15:28
@jeffersonnnn, perhaps you can't use that ... there? Try returning directly like this: return new Set(nums);
Know that I haven't reached Data Structures yet, but I know Set removes duplicates.
alpox
@alpox
Aug 29 2018 15:41
@jeffersonnnn why not new Set(nums).size. No need to transform the set to an array again if you only want to know the number of items
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 29 2018 17:04

Im trying to conditionally render a form in react. My "add" button is displaying the form properly. But when i hit submit on the form im getting two errors:
Uncaught TypeError: Cannot read property 'setState' of undefined
and
react-dom.development.js?61bb:145 Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development

I tried sending the state down to a separate button, and it works fine. It closes the div. Its only on the submit button im getting an error. Im wondering, perhaps i need to just use the 'handleClick' event instead?

Here is my code:

Add component:

import React, { Component } from 'react';

class AddStudents extends Component {
  render() {

    return (
      <div className='add_students'>
//this is my test button and its closing the div like i want
        <button className="btn btn-info" onClick={this.props.test}>Add Student</button>
        <div className="form">
//this is the broken button that throws error
          <form onSubmit={this.props.handleSubmit}>

            <div className="form-group">
              <label>Name:</label>
              <input type="text" className="form-control" id="student_name" name="name" />
            </div>

            <div className="form-group">
              <label>Age:</label>
              <input type="text" className="form-control" id='student_age' name="age" />
            </div>

            <div className="form-group">
              <label>Contact: </label>
              <input type="text" className="form-control" id="student_email" placeholder="Email" />
            </div>

            <input className="btn btn-primary" type="submit" value="Submit" />
          </form>
        </div>
      </div>
    );
  }
}

export default AddStudents;

here is my main app component:

import React, { Component } from 'react';
import Students from './Components/Students';
import AddStudents from './Components/AddStudents'

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      students: [''],
      show_add_student: false
    };
    this.getStudents = this.getStudents.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    if(this.state.show_add_student === false) {
      this.setState({show_add_student: true});
    } else {
      this.setState({show_add_student: false});
    }
  }
//here is the broken function that is sending error:
  handleSubmit(e){
    e.preventDefault();
    this.setState({show_add_student: false});
  }

  render() {

    return (
      <div className="container-fluid">
//here is the button that displays/closes the form div properly
        <div className="row">
          <div className="col text-right">
            <button className="btn btn-info" onClick={this.handleClick}>Add Student</button>
          </div>
        </div>
//here is the problem div: 
          <div className="student_view_right">
            {
              this.state.show_add_student ?
                <AddStudents handleSubmit={this.handleSubmit} test={this.handleClick} />
                : null
            }

          </div>


        </div>
      </div>

    );
  }
}

export default App;
Brad
@bradtaniguchi
Aug 29 2018 17:06
@willybeans Could you put this on stackblitz or codepen so people can mess aroudn with it? Might help with getting help (hehe)
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 29 2018 17:06
yea my bad
im mostly asking for the error itself. why doesnt my onsubmit function have "access" to the state?
Brad
@bradtaniguchi
Aug 29 2018 17:08
ah, let me look over it and see if I see anything obvious, even tho I'm not a react guy
@willybeans aren't you suppose to be binding all the methods to your class or something?
basically the this in the method doesn't know what class it is in, you are using bind on other things (getStudents for example) but nothing for the handleSubmit
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 29 2018 17:11
the methods are bound to this.
like i said the handleClick event is doing what i want it to do. but when i try to do that very same event in handleSubmit it throws an error.
Brad
@bradtaniguchi
Aug 29 2018 17:13
You did this to your handleClick this.handleClick = this.handleClick.bind(this);
but you didn't do that for your handleSubmit
Aditya
@ezioda004
Aug 29 2018 17:14
^ I dont see you binding for handleSubmit either.
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 29 2018 17:14
let me see...
Aditya
@ezioda004
Aug 29 2018 17:15
handleSubmit = (e) => { }should probably resolve if it is binding issue
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 29 2018 17:15
im a dingus. its fixed. thanks guys
mindlessly assumed it was there without actually reading
Morchid Chellali
@Morched23MJ
Aug 29 2018 17:26
Is there a free software to design website templates, as an alternative to Photoshop?
AJ Brommy
@AJ-Brommy
Aug 29 2018 17:28
There's GIMP in Linux. I dunno if it is available for windows tho
Morchid Chellali
@Morched23MJ
Aug 29 2018 17:29
GIMP is powerful? D:
AJ Brommy
@AJ-Brommy
Aug 29 2018 17:38
Fairly, you'll have to learn the tools, but it has layers etc
Brad
@bradtaniguchi
Aug 29 2018 17:40
gimp is good enough, takes some getting used to tho, lots of googling required haha
newmoon
@newmoon
Aug 29 2018 17:53
Paint.net is good too!
Donnie
@Donnie-D
Aug 29 2018 19:05
I would really really appreciate if somone could take a moment to solve this confusion as to why when I click on the go to top button in case 1 (if the anchor tag with spacer id is outside the main element) the page in small screens behaves as it should. And when I click on the go to top button in case 2 (if we cut and paste the the anchor tag with the spacer id is inside the main element) the page in the small screen / resized view doesn't behave as expected.
I have not yet adjusted the links from the top nav as per yet.
https://codepen.io/Donnie-D/pen/xJNYKK?editors=1100
Keegan
@Keggatron
Aug 29 2018 20:30
Hi guys, does anyone know of any reasons why one couldn't use browserRouter multiple times in an application?
Tiago Correia
@tiagocorreiaalmeida
Aug 29 2018 20:56
why would you need tough?
Keegan
@Keggatron
Aug 29 2018 21:02
well I'm using the Semantic-UI tabs.
one sec
so I've wrapped the Tab component in the BrowserRouter in that example
Now the rest of my actual app is also wrapped in a BrowserRouter component
it was essentially the only way I could get it to work properly
elsewise, for some tabs, the urls would change however the components wouldn't render
niniyzni
@niniyzni
Aug 29 2018 21:25

hi,

  • I am trying to include google maps in angular component.
  • but I am getting the below error.
  • can you tell me how to fix it.
  • providing my code below.

https://stackblitz.com/edit/angular-mmjq7q?file=src%2Fapp%2Fapp.component.ts


import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';



    // Create the Google Map…
let map = new google.maps.Map(d3.select("#map").node(), {
  zoom: 8,
  center: new google.maps.LatLng(37.76487, -122.41948),
  mapTypeId: google.maps.MapTypeId.TERRAIN
});

}
aenkirch
@aenkirch
Aug 29 2018 21:57
Hi guys ! I' trying to use the modulus on line 42 of my JS code to be able to display the correct amount of seconds on my React Pomodoro Clock... But Modulus does not work.. Any solution ? Thanks in advance ! https://codepen.io/aenkirch/pen/EeNarR/
korzo
@korzo
Aug 29 2018 22:21
@aenkirch What do you mean by "Modulus does not work" ?
I think problem is, that you don't set this.state.secs to 59 when minute pass