These are chat archives for FreeCodeCamp/HelpFrontEnd

5th
Oct 2018
Fernando
@lestairon
Oct 05 2018 00:12
image.png
Help, how can i arrange them horizontally?
col-md-6 is not working as i'd like to
It isn't putting 2 divs per row
image.png
AJ Brommy
@AJ-Brommy
Oct 05 2018 01:11
I don't remember how to use bootstrap, if that's what this is, which it looks like. However, I think from what I can see, is that either your two items inside each div are display:block set instead of inline-blocks. Or the items are too wide to both sit side by side for their container and therefore move onto the next line.
Fernando
@lestairon
Oct 05 2018 01:13
Is there a way to put them horizontally even if is too wide for the container?
AJ Brommy
@AJ-Brommy
Oct 05 2018 01:13
i'm actually confused
you could yes, set it to scroll, but you'd have a scroll bar, which you won't want
are you wanting 2 divs per row, or 6? i thought sol-md-6 basically means 6 medium columns?
*col-md-6
Fernando
@lestairon
Oct 05 2018 01:15
What i want to do is have like a form divided in 2 segments, the first one is shown when you enter the page and the second one is hidden.
AJ Brommy
@AJ-Brommy
Oct 05 2018 01:16
2 segments? meaning 2 columns?
Fernando
@lestairon
Oct 05 2018 01:16
Once you finish with the first segment, the second one appears from the right
AJ Brommy
@AJ-Brommy
Oct 05 2018 01:17
so you need 2 divs. one on right set to hidden.
Fernando
@lestairon
Oct 05 2018 01:17
How can i put the second div on the right?
I was trying using a list
AJ Brommy
@AJ-Brommy
Oct 05 2018 01:18
many ways. you can you css to make them inline-blocks. which is how i would do it. or you could float one to the right of the other.
Fernando
@lestairon
Oct 05 2018 01:18
An horizontal list
AJ Brommy
@AJ-Brommy
Oct 05 2018 01:20
well i can't see why that shouldn't work, if you wanted to do that.
but i haven't used bootstrap in over a year so i haven't a clue how the features work to know whats wrong
Fernando
@lestairon
Oct 05 2018 01:22
I was just trying to do it with boostrap, i'd rather to do it without it
AJ Brommy
@AJ-Brommy
Oct 05 2018 01:23
do you know how to use CSS?
Fernando
@lestairon
Oct 05 2018 01:23
Let me try with divs
AJ Brommy
@AJ-Brommy
Oct 05 2018 01:23
ok
Fernando
@lestairon
Oct 05 2018 01:23
Yeah, not in depth, but i know how to use it
inline-block for both divs, right?
AJ Brommy
@AJ-Brommy
Oct 05 2018 01:25
ok, well use a class or id for each div so you know which is for which to style, then set them both to use display:inline-block; and the one on the right to be visibility:hidden; comment it out while you are working on it so you can see tho lol
Fernando
@lestairon
Oct 05 2018 01:26
I was thinking to do it with a container with overflow:hidden
Just have the right one outside the container, then slide it in the container
I think i found the problem
Jesus, it was somenthing so absurd
Now i'm tilted
btw, thanks @AJ-Brommy
What happened to the cookie bot?
Fernando
@lestairon
Oct 05 2018 01:33
I found the problem, but it doesn't make sense to me
The images i'm using are too big for the page and they automatically hop to a new line
But i don't want them to go to a new line, just to stay on the right
AJ Brommy
@AJ-Brommy
Oct 05 2018 01:46
i'm not sure, shouldn't go to new line if overflow is hidden
Fernando
@lestairon
Oct 05 2018 01:48
It does
I wonder if Bootstrap is messing with me
AJ Brommy
@AJ-Brommy
Oct 05 2018 01:49
so are you using 3 divs then? a container div, with 2 inside?
Fernando
@lestairon
Oct 05 2018 01:49
Yeah
AJ Brommy
@AJ-Brommy
Oct 05 2018 01:49
can i see the css for those 3?
well and the html would be useful
do you use codepen? or similar? it would make this easier?
Fernando
@lestairon
Oct 05 2018 01:52
I think i can't use codepen at all, since i'm loading stuff on the page with php
image.png
This is the html
image.png
This is the css
AJ Brommy
@AJ-Brommy
Oct 05 2018 04:25
i think its because it needs to be one item that is bigger than 700px..
because its two items, although inline-blocks, the 2nd still ends up on a new row...
make it wider and see if they eventually sit side by side, then you will know. but, that doesn't help solve it lol
AJ Brommy
@AJ-Brommy
Oct 05 2018 04:30
maybe you need an inner container with a specific width, bigger than 700px, with the two divs side by side inside
@lestairon
you might want to look at this also https://www.w3schools.com/cssref/pr_pos_overflow.asp as you might want to use auto, or something else
Shekhar Ramola
@shekharramola
Oct 05 2018 07:34
how can I change the format from MM/DD/YYYT to DD/MM/YYYY
Koohyar Movassagh
@Koohyar-m
Oct 05 2018 14:28
Hi guys, I need a little help with Pomodoro Timer project
Koohyar Movassagh
@Koohyar-m
Oct 05 2018 14:34

I am making it in React and coding in VSC, prblem is after the session timer is finished, break count down doesnt start. I Set start button to call handleTimer() method. I have if conditions inside so when timeless >=0 it lunches the break timer but for somereason it doesn’t. But when I press start button again it works. I am not sure what the problem. code:

import React, {Component} from 'react';
import SessionDisplay from './SessionDisplay';
import BreakDisplay from './BreakDisplay';

class TimeLeft extends Component {
  constructor(props){
    super(props)
    this.state = {
      timeSess: 0.1,
      timeBreak: 5,
    }

  this.handleTimer = this.handleTimer.bind(this);
  this.handleStop = this.handleStop.bind(this);
  this.counter = this.counter.bind(this);
  this.counterB = this.counterB.bind(this);

  this.incrementTime = this.incrementTime.bind(this);
  this.decrementTime = this.decrementTime.bind(this);
  this.decrementBreak = this.decrementBreak.bind(this);
  this.incrementBreak = this.incrementBreak.bind(this);
}



counter() {
  if(this.state.timeSess > 0){
  this.setState({
    timeSess: (this.state.timeSess * 60 - 1) / 60,
  })
  }    
}

counterB() {
  if(this.state.timeBreak > 0){
  this.setState({
    timeBreak: (this.state.timeBreak * 60 - 1) / 60
    })
  }
}

handleTimer() {
  if(this.state.timeSess > 0){
    this.timerS = setInterval(this.counter,1000);
  }else{
    this.timerb = setInterval(this.counterB,1000);
  }
}

handleStop() {
  clearInterval(this.timerG);
  clearInterval(this.timerb);
}

incrementTime(){
  if(this.state.timeSess < 60){
    this.setState({
      timeSess: this.state.timeSess * + 1
    })
  }
}

decrementTime(){
  if(this.state.timeSess > 0){    
    this.setState({
    timeSess: this.state.timeSess - 1
    })
  }
}

incrementBreak(){
  if(this.state.timeBreak < 60){
  this.setState({
    timeBreak: this.state.timeBreak + 1
  })
}
}

decrementBreak(){
  if(this.state.timeBreak > 0){
  this.setState({
    timeBreak: this.state.timeBreak - 1
  })
}
}

  render(){
    const toSecs = this.state.timeSess * 60;
    const mm = Math.floor(toSecs / 60);
    const ss = Math.floor(toSecs - (mm* 60));

    const toSecsB = this.state.timeBreak * 60;
    const mmB = Math.floor(toSecsB / 60);
    const ssB = Math.floor(toSecsB - (mmB* 60));

    let showTimer = <h1 className="display-2">{mm}:{ss}</h1>
    let showBreak = <h1 className="display-2">{mmB}:{ssB}</h1>

    return(
      <div>
        {this.state.timeSess >= 0 ? showTimer: showBreak}
        <div className="row ">
          <div className="col center-text"><button id="interval" className="btn btn-primary btn-lg " onClick={this.handleTimer}>Start</button>
          <button id="reset" className="btn btn-danger btn-lg" onClick={this.handleStop}>Stop</button></div>
        </div>
        <div className="col">
        <div className="row">
        <div className="col"><SessionDisplay passTimeSess={this.state.timeSess} incTime={this.incrementTime} decTime={this.decrementTime} /></div>
        <div className="col"><BreakDisplay passTimeBreak={this.state.timeBreak} incBreak={this.incrementBreak} decBreak={this.decrementBreak}/></div>
        </div>
        </div>
      </div>

    )
  }
}

export default TimeLeft;

Edit: I suspect handleTimer() method doesn’t check the state after it is called so it doesn’t know to call the Break timer after Session timer.

ehutchllew
@ehutchllew
Oct 05 2018 14:46
@ConnectCodes You could try having an if condition wrapped around a recursive call of handleTimer... Once it hits 0, you then move on to break.
Koohyar Movassagh
@Koohyar-m
Oct 05 2018 14:53
@ehutchllew Interedsting do you mean something like this :
handleTimer() {
  for(var i = 0; i < 100; i++){
    if(this.state.timeSess > 0){
      this.timerS = setInterval(this.counter,1000);
    }else{
      this.timerb = setInterval(this.counterB,1000);
    }
  }
}
ehutchllew
@ehutchllew
Oct 05 2018 14:55
@ConnectCodes probably more like:
handleTimer(){
    setTimeout(() =>{
        if(...){ //some comparison if your timer is stillr unning
           this.handleTimer()
       else{
          this.handleBreak()
}
}, 1000)
something like that perhaps? I haven't given it a huge amount of thought, but that might be a different way to look at it
Koohyar Movassagh
@Koohyar-m
Oct 05 2018 14:59
something like that perhaps? I haven't given it a huge amount of thought, but that might be a different way to look at it .
Very interesting I will give it a shot. Thanks
@ehutchllew Thanks
lmilliken
@lmilliken
Oct 05 2018 15:43
hi everyone, wondering if you can point me to the correct dev tool to figure out why this page is loading again after the "Search" button is clicked https://network.futureearth.org/test/ca-consortium
Eric Weiss
@eweiss17
Oct 05 2018 16:05
@lmilliken err... are you working on the source code?
lmilliken
@lmilliken
Oct 05 2018 16:22
@eweiss17 , it's an embedded herokuapp, but I learned what was going on. It's a React app and the Search button was submitting an action, so we just needed to preventDefault()
Eric Weiss
@eweiss17
Oct 05 2018 16:24
:ghost:
my bad :thumbsup:
lmilliken
@lmilliken
Oct 05 2018 16:26
I'm told that this is a common problem
Christopher
@bradley1492
Oct 05 2018 17:15
Hello, just out of curiosity, is it considered a bad practice declaring padding on the body element inside of css?
ehutchllew
@ehutchllew
Oct 05 2018 19:02
@bradley1492 No, that's perfectly fine.
AJ Brommy
@AJ-Brommy
Oct 05 2018 19:17
@bradley1492 I think one has to be a little careful with it tho, if you do width 100% but also have padding it will make it wider than 100% making a scroll bar
Christopher
@bradley1492
Oct 05 2018 19:39
@AJ-Brommy @ehutchllew Hm I think I should have added that I am talking specifically about doing it while using bootstrap....
AJ Brommy
@AJ-Brommy
Oct 05 2018 19:55
I'm not very experienced with bootstrap i'm afraid
ehutchllew
@ehutchllew
Oct 05 2018 20:03
@AJ-Brommy having a child element width: '100%' will only calculate available space after the padding.
@bradley1492 Also, it doesn't matter what CSS library you're using. You can add whatever you like to the base CSS.
AJ Brommy
@AJ-Brommy
Oct 05 2018 20:14
Well I've had problems with it before - just saying
Just tested it...
body{
  width:100%;
  background-color:red;
  padding:10px;
}
creates a scrollbar
oh i've just noticed you're talking about child elements. I was talking about the body.
yes if you create a div inside with 100% width it will be the width inside of the padding.
ehutchllew
@ehutchllew
Oct 05 2018 20:21
is there a good reason to put width: 100% on body though?
I'm not a web designer though, so I'm not sure.
Brad
@bradtaniguchi
Oct 05 2018 20:36
@ehutchllew how about is there a reason to NOT put it on the body? Off the top of my head I know some browsers apply some margin to the body to, for no reason.
Christopher
@bradley1492
Oct 05 2018 20:42

Hm yeah essentially my problem is that in here, my h1 overflows and creates a scrollbar in responsive mode, but I didn't declare any custom css really, earlier I had some padding on the body, but now, there's nothing left, so I am a bit unsure what's causing it?

https://codepen.io/bradley1492/pen/wYzKaB

Yeah I added a class of text-nowrapto a part of my h1 but what else do I then have to do, to prevent that part of the h1 from overflowing out of the screen?

ehutchllew
@ehutchllew
Oct 05 2018 20:47
@bradtaniguchi How does adding width to body fix its margin issue?
i don't think i've ever used a width on body, i have used margin: 0 but never width.
Brad
@bradtaniguchi
Oct 05 2018 20:49
shrugs
Brad Collins
@BradleyCollins
Oct 05 2018 20:50
ive used 100% width on the body so that the page elements extend all the way to the edge of the browser window, otherwise theres always that little white space on the sides
ehutchllew
@ehutchllew
Oct 05 2018 20:51
doesn't that usually occur when you have an element that slightly extends beyond the body though?
Christopher
@bradley1492
Oct 05 2018 21:03
In my above example is there a possibility of keeping the words outdoor-design together while in responsive mode? Is it a good idea to limit the width of the viewport in order to ensure the two words not flowing out of the viewport? Say 400px or something..
ehutchllew
@ehutchllew
Oct 05 2018 21:17
@bradley1492 if you just reduced the font size when it's on a mobile screen, you should be okay
Christopher
@bradley1492
Oct 05 2018 21:19
@ehutchllew oh thanks, that's great, I am so cautios with everything, caus I am afraid of "destroying osme bootstrap stuff"
ehutchllew
@ehutchllew
Oct 05 2018 21:20
@bradley1492 that's how you learn, just change things and destroy things :)
Christopher
@bradley1492
Oct 05 2018 21:26
hahahahaha yeah I guess that's right :)
Christopher
@bradley1492
Oct 05 2018 21:52
Also does anyone know how to keep the color of the active class for nav elements unchanged when hovering over it.
Why can't I adress the active class with .active:hover{color: red}?
https://codepen.io/bradley1492/pen/wYzKaB
Fabien SHAN
@X140hu4
Oct 05 2018 22:10
@bradley1492 I think it is because of CSS specificity
You can calculate the specificity of your selectors here: https://specificity.keegan.st/
Fabien SHAN
@X140hu4
Oct 05 2018 22:20
Another thing, bootstrap will have higher specificity in some cases so you would either need to use !important or have a selector with higher specificity, in which case using the inspecting tool of your browser will be helpful.