These are chat archives for FreeCodeCamp/Help

20th
Aug 2017
Daniel Ahn
@danii956
Aug 20 2017 02:28
Is there a way to keep track of boolean values during asynchronous calls? I tried using a global boolean var but it keeps giving me undefined values when I assign it inside an asynchronous function
Gulsvi
@gulsvi
Aug 20 2017 02:31
@danii956 the global variable approach will work, but the variable won't be updated until your asynchronous call is complete.
There's probably a better way - what are you trying to do?
Daniel Ahn
@danii956
Aug 20 2017 02:34
Well, I'm trying to first set the boolean var as celcius and put an onClick function on a tag that will change the text to show either celcius or fahrenheight depending on what the boolean var was set to
so if boolean var == celcius, then set the boolean var = fahrenheit and vice versa
But the problem is it keep showing as undefined for some reason... So I used an arbitrary class called hasCelcius to keep track instead of having a global boolean variable
Gulsvi
@gulsvi
Aug 20 2017 02:36
@danii956 Hard to help without seeing your code, but maybe this explains what's going on:
var myBool;

$.getJSON(weatherapi, function() {
    myBool = false;
}).then(function() {
  console.log(myBool); //false
});

console.log(myBool) //undefined
Daniel Ahn
@danii956
Aug 20 2017 02:37
Yes! That's pretty much it...
Gulsvi
@gulsvi
Aug 20 2017 02:37
If it's for an onclick though, async shouldn't be an issue unless the user is clicking on the button before the data comes back from the API
Or, if you're changing the element that the person clicks on when they click it - then the onclick handler goes away
Daniel Ahn
@danii956
Aug 20 2017 02:38
Hmm... truth be told, I didn't try using the global var in the onClick because when the undefined thing happened. I will try it again
Thanks @SkyC0der
CamperBot
@camperbot
Aug 20 2017 02:38
:star2: 2500 | @skyc0der |http://www.freecodecamp.com/skyc0der
danii956 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
William Watts
@Braillon7
Aug 20 2017 02:42
I'm looking for help to see if someone can find a way to have my search results open in a new window. I tried a few things but nothing is working for me... https://codepen.io/Braillon7/pen/rzdOvZ
Gulsvi
@gulsvi
Aug 20 2017 02:46
@Braillon7 The hyperlinks for your search results, or you want all of your search results in a new page after clicking submit?
William Watts
@Braillon7
Aug 20 2017 02:48
@SkyC0der my search results from the search input that I have on my "wiki search app"
Gulsvi
@gulsvi
Aug 20 2017 02:48
@Braillon7 Add target="_blank" to the URLs you create in your javascript
"<a href='" + data[3][i] + "' target='_blank'>"
William Watts
@Braillon7
Aug 20 2017 02:53
@SkyC0der thank you. this is what I put:
CamperBot
@camperbot
Aug 20 2017 02:53
braillon7 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2501 | @skyc0der |http://www.freecodecamp.com/skyc0der
William Watts
@Braillon7
Aug 20 2017 02:54
$('#output').html('');
for(var i=0;i<data[1].length;i++){
$('#output').prepend("<li><a href= "+data[3][i]+">"+data[1][i] +"</a><p>"+data[2][i]+"'target='_blank'></p></li>"); //and this still doesnt work
Gulsvi
@gulsvi
Aug 20 2017 02:55
@Braillon7 it needs to be a part of your <a> tag - just like you did with your footer links on that page
Seems that footer may have been copied from another pen :)
I was wondering about that inline script to update the year
William Watts
@Braillon7
Aug 20 2017 03:00
Yes. How did you know?
Gulsvi
@gulsvi
Aug 20 2017 03:01
@Braillon7 Sometimes it helps to put your HTML in your JavaScript formatted like:
        $('#output').prepend(
          "<li>" +
            "<a href='" + data[3][i] + "' target='_blank'>" + data[1][i] + "</a>" + 
            "<p>"+data[2][i]+"</p>" + 
          "</li>"
        );
That way, you can clearly see where your <a> link is, and which tags are open/closed
William Watts
@Braillon7
Aug 20 2017 03:06
maybe ive just been up too long coding because i put exactly what you have here and its still not opening the search in a new window for me lol...im stressing out
im gonna get rid of the <p>tag and see if that helps
Gersho
@Gersho
Aug 20 2017 03:07
does the url show properly when you mouse over ? with that many " ' ' " you could have some escaping issues
Rishabh Kashyap
@iamrkcheers
Aug 20 2017 03:08
I am on the FCC Data Visualisation -> React Projects -> Markdown Previewer project.
I am using the 'React Bootstrap' to display the Grid system. However, it doesn't seem to work.
Can anybody help me figure out why ?
https://codepen.io/iamrkcheers/pen/oeEyvo?editors=0010
Any help is appreciated. Thank You.
Gersho
@Gersho
Aug 20 2017 03:10
@SkyC0der @Braillon7 shouldn't <a> be self closing ?
Gulsvi
@gulsvi
Aug 20 2017 03:10
@Gersho No, <a> isn't a void element

These are the ones:

area, base, br, col, embed, hr, img, input, keygen, link, menuitem, meta, param, source, track, wbr

Gersho
@Gersho
Aug 20 2017 03:13
i always mix it up with img >.>
Gulsvi
@gulsvi
Aug 20 2017 03:14
@Braillon7 I gave you the exact code to use above
William Watts
@Braillon7
Aug 20 2017 03:14
i got rid of my <p> tags but the only rid of the css property. so far i just corrected why my search results was coming up in one small column but thats the only progress so far.
i missed that. let me use it and see if that works. youve been a big help thus for @SkyC0der
Joseph
@revisualize
Aug 20 2017 03:18
@Gersho If <a> was self closing how would you include the element to be linked?
William Watts
@Braillon7
Aug 20 2017 03:21
@SkyC0der unless i placed your code in the wrong place that isn't working either. im considering just moving on to the next project and coming back to it. ive been trying to get these results to open to a new window for most of the day
Gulsvi
@gulsvi
Aug 20 2017 03:22
@Braillon7 I just refreshed your codepen and it works for me
William Watts
@Braillon7
Aug 20 2017 03:29
hmmm. it's still not working for me. though if it works for the user im exstatic. are you sure you didn't just click on the random search associated with my logo?
Sam Goldberg
@sgoldber61
Aug 20 2017 03:29
@iamrkcheers You might want to check your console errors. I think it says you need to include jquery for bootstrap.
Rishabh Kashyap
@iamrkcheers
Aug 20 2017 03:33
@sgoldber61 thanks, but it still wont work.
I tried adding the prefix 'ReactBootstrap.' to my 'React Bootstrap tags' but it still won't work (as per the answer given at https://stackoverflow.com/questions/33012499/react-bootstrap-fails-to-render).
Following is my code ..
https://codepen.io/iamrkcheers/pen/oeEyvo?editors=0010
Any help is appreciated. Thank You.
CamperBot
@camperbot
Aug 20 2017 03:33
iamrkcheers sends brownie points to @sgoldber61 :sparkles: :thumbsup: :sparkles:
:cookie: 304 | @sgoldber61 |http://www.freecodecamp.com/sgoldber61
Amit Patel
@AmitP88
Aug 20 2017 03:33
hey guys, I'm making a tile-based game using ReactJS and I've seen that html's canvas API is good for rendering tile maps. Would this work well in a React component though?
btw I'm using codepen for now to make the level
I've tried googling about this, but didn't find anything useful so far
Sam Goldberg
@sgoldber61
Aug 20 2017 03:34
@iamrkcheers first, you should always check the console.log. not the codepen version...
but your actual browser version of the console.log. On firefox, what i use, it's ctrl+shift+k
your problem is that you need to put jquery before bootstrap javascript
Gulsvi
@gulsvi
Aug 20 2017 03:36
@Braillon7 Yeah I'm sure, it's working for me.
Rishabh Kashyap
@iamrkcheers
Aug 20 2017 03:41
@sgoldber61 thanks. Now it shows an error that 'ReactBootstrap' is not defined.
https://codepen.io/iamrkcheers/pen/oeEyvo?editors=0010
CamperBot
@camperbot
Aug 20 2017 03:41
iamrkcheers sends brownie points to @sgoldber61 :sparkles: :thumbsup: :sparkles:
:warning: iamrkcheers already gave sgoldber61 points
Sam Goldberg
@sgoldber61
Aug 20 2017 03:44
unfortunately that will be hard for me to advise on... i just recently finished the markdown previewer project but didn't use reactbootstrap, just react. :(
Rishabh Kashyap
@iamrkcheers
Aug 20 2017 03:45
@sgoldber61 ohh ok . That's no issue. Thanks for ur help anyway.
CamperBot
@camperbot
Aug 20 2017 03:45
iamrkcheers sends brownie points to @sgoldber61 :sparkles: :thumbsup: :sparkles:
:warning: iamrkcheers already gave sgoldber61 points
Ryan Draves
@RyanDraves
Aug 20 2017 03:57
Hello, does anyone have any resources they’d recommend to learn Redux?
heru hartanto
@elukuro
Aug 20 2017 04:48
@RyanDraves Hi I just finished " Modern React with Redux" course from udemy couple week ago, and I think this course is good for learn redux PS: this is not a promotion :smile:
BuntyBru
@BuntyBru
Aug 20 2017 05:10

hello
i have a query,

I was making RANDOM QUOTE GENERATOR
and i dont know how to put a text box displaying the quote in the middle of the page

can anyone help
prakash chandra yadav
@prakashyadav008
Aug 20 2017 05:20
hey a little help here
i am working on the wikipedia viewer project can anyone tell me how should i make th search box move up when showing results
@prakashyadav008 use transition
prakash chandra yadav
@prakashyadav008
Aug 20 2017 05:24
@longnt80 can u give an example or reference
i am a bit confused on how to do it
i want the search box to move up and then show the results below it
i am thinking of using the relative position and then changing the position of the based on the viewport
Gulsvi
@gulsvi
Aug 20 2017 05:29
@prakashyadav008 Something like this with transition like Long was saying: https://s.codepen.io/anon/pen/LjdGXx
prakash chandra yadav
@prakashyadav008
Aug 20 2017 05:34
@SkyC0der ya something like that thanks
CamperBot
@camperbot
Aug 20 2017 05:34
prakashyadav008 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2502 | @skyc0der |http://www.freecodecamp.com/skyc0der
prakash chandra yadav
@prakashyadav008
Aug 20 2017 05:37
@SkyC0der still not familiar with the arrow => syntax in javascript
Gulsvi
@gulsvi
Aug 20 2017 05:37
@prakashyadav008 I changed it to ES5, refresh and there won't be any arrows
form.submit = () => { // code };
The above is the same as:
form.submit = function() { // code };
but no arguments or this objects
prakash chandra yadav
@prakashyadav008
Aug 20 2017 05:45
form.submit are there any other ways to submit form..
@SkyC0der
Rishabh Kashyap
@iamrkcheers
Aug 20 2017 05:46
I am currently at FCC Data Visualisation -> React Projects -> Markdown Previewer.
I am trying to include an 'Ace Editor' from Ace.js.
However, I am getting an error of 'AceEditor is not defined' in the console.
https://codepen.io/iamrkcheers/pen/oeEyvo?editors=0010
Any help is appreciated. Thank You.
Gulsvi
@gulsvi
Aug 20 2017 05:47
@prakashyadav008 What do you mean?
prakash chandra yadav
@prakashyadav008
Aug 20 2017 05:47
@SkyC0der
document.getElementById("form").onsubmit
this or how many ways are there to submit a form
Gulsvi
@gulsvi
Aug 20 2017 05:48
form.onsubmit is the same as that code
and this: $("#form").on("submit", function() {
I guess you could also add an event listener with .addEventListener('submit', function() {
Darren
@DarrenfJ
Aug 20 2017 05:49
evening fCC
Gulsvi
@gulsvi
Aug 20 2017 05:49
evening @DarrenfJ
Darren
@DarrenfJ
Aug 20 2017 05:51
@SkyC0der hey man! how are yah?
Gulsvi
@gulsvi
Aug 20 2017 05:52
Can't complain. How about You? @DarrenfJ
Darren
@DarrenfJ
Aug 20 2017 05:57
@SkyC0der easy mellow weekend :D
Darren
@DarrenfJ
Aug 20 2017 06:17
oh man it's always so quiet in here now
Rishabh Kashyap
@iamrkcheers
Aug 20 2017 06:32
Can anybody point out as to why the 'unexpected identifier' error is showing up in my code.
I am on FCC Data Visualisation -> React projects -> Markdown Previewer
https://codepen.io/iamrkcheers/pen/oeEyvo
Any help is appreciated. Thank You.
Darren
@DarrenfJ
Aug 20 2017 06:35
@iamrkcheers sorry man, wish I could help but i haven't started teh data visualization stuff yet
prakash chandra yadav
@prakashyadav008
Aug 20 2017 06:51
@SkyC0der how to use on click events in CSS
instead of jst hover effect
Gulsvi
@gulsvi
Aug 20 2017 06:52
@prakashyadav008 You can use the :active psuedo selector, but it is only applied when the mouse button is down
prakash chandra yadav
@prakashyadav008
Aug 20 2017 06:53
i hav the hover effect added but that doesnt stay after i click on the search bar
Gulsvi
@gulsvi
Aug 20 2017 06:54
For an <input> element, you can use :focus
#search-bar:focus{
  width:300px;
}
or in JS, onfocus or onblur
prakash chandra yadav
@prakashyadav008
Aug 20 2017 06:55
can we use both
..?
ya both works
Gulsvi
@gulsvi
Aug 20 2017 06:56
You don't want to use both CSS and JS for this
prakash chandra yadav
@prakashyadav008
Aug 20 2017 06:56
fine
Gulsvi
@gulsvi
Aug 20 2017 06:56
choose one or the other
prakash chandra yadav
@prakashyadav008
Aug 20 2017 06:56
i mean like this
#search-bar:focus{
  width:300px;
}
#search-bar:hover{
  width:300px;
}
works fine take a look
Gulsvi
@gulsvi
Aug 20 2017 06:56
Yes, you can do that
prakash chandra yadav
@prakashyadav008
Aug 20 2017 06:58
one more doubt
i hav the search bar and the animation font after that in a div
<div class="section1">
  <input id="search-bar" placeholder="Search"></input>
<div>animation</div>
</div>
but the problem is in positioning since "section-1" is relative and ""search-bar is absolute so the "animation" font doesnt change according to the input search bar
i want the animation to be beside the input search bar so that i can animate a button later
there
Darren
@DarrenfJ
Aug 20 2017 07:04
thanks for the chat @Manish-Giri
CamperBot
@camperbot
Aug 20 2017 07:04
darrenfj sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 6445 | @manish-giri |http://www.freecodecamp.com/manish-giri
Darren
@DarrenfJ
Aug 20 2017 07:04
and thanks @SkyC0der for sticking it out and helping people out
CamperBot
@camperbot
Aug 20 2017 07:04
darrenfj sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2503 | @skyc0der |http://www.freecodecamp.com/skyc0der
Darren
@DarrenfJ
Aug 20 2017 07:04
i'm off to bed.. too sleeeepy to be of any help
Manish Giri
@Manish-Giri
Aug 20 2017 07:04
@DarrenfJ ty
CamperBot
@camperbot
Aug 20 2017 07:04
manish-giri sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 1978 | @darrenfj |http://www.freecodecamp.com/darrenfj
Manish Giri
@Manish-Giri
Aug 20 2017 07:04
22 more
:smile:
Gulsvi
@gulsvi
Aug 20 2017 07:04
@DarrenfJ Thanks to you too! G'night
CamperBot
@camperbot
Aug 20 2017 07:04
skyc0der sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 1979 | @darrenfj |http://www.freecodecamp.com/darrenfj
Gulsvi
@gulsvi
Aug 20 2017 07:05
21 :p
@prakashyadav008 I've got to go - but you don't need to absolute/relative position anything. Just use display: inline-block to position them next to each other.
prakash chandra yadav
@prakashyadav008
Aug 20 2017 07:09
@SkyC0der ill try that
Rishabh Kashyap
@iamrkcheers
Aug 20 2017 09:29
Can anybody point out as to why the 'unexpected identifier' error is showing up in my code.
I am on FCC Data Visualisation -> React projects -> Markdown Previewer
https://codepen.io/iamrkcheers/pen/oeEyvo
Any help is appreciated. Thank You.
Rishabh Kashyap
@iamrkcheers
Aug 20 2017 11:03

Does anyone know how to add 'a:hover' property onto a tag in the 'render()' function of a react component class.

class Developer extends React.Component {
    render() {
        const style = {
            h4 : {
                fontFamily : 'Open Sans Condensed'
            },
            a : {
                color : 'purple',
                textDecoration : 'none'
            }
        };

        return (
            <h4 style={style.h4}>
                <a>
                    Rishabh Kashyap
                </a>
            </h4>
        );
    }
}

Any help is appreciated. Thank You.

Subramanya Chakravarthy
@chakrihacker
Aug 20 2017 11:07
the component is not updating even though props are changed
gishy1
@gishy1
Aug 20 2017 12:21
Hello world!!
need help
image.png
gishy1
@gishy1
Aug 20 2017 12:46
well isnt this akward
koder3
@koder3
Aug 20 2017 12:46
when using url in ajax is it important to mention method lang and format? if so why?
Stephen James
@sjames1958gm
Aug 20 2017 12:52
@koder3 The format is important so you get json back and not XML, the language is important only if the API supports multiple languages.
@gishy1 you cannot use var and () at the same time var is declaring a variable and the () is calling a function
gishy1
@gishy1
Aug 20 2017 12:54
@sjames1958gm im even more confused
Stephen James
@sjames1958gm
Aug 20 2017 12:56
var myGlobalScope(); is invalid - remove the var (not sure why you changed this line).
The instructions say to comment out the console.log(myVar) line
koder3
@koder3
Aug 20 2017 13:05
@sjames1958gm thanks
CamperBot
@camperbot
Aug 20 2017 13:05
koder3 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8343 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Alexandar B
@ace1122sp
Aug 20 2017 13:26
hello :walking:
anyone here familiar with React?
Alexandar B
@ace1122sp
Aug 20 2017 13:32
i want to update my React app on which I've already run npm run build, so in order to update it, do I have to delete build folder first and then run npm run build again?
aozpay
@aozpay
Aug 20 2017 13:40
is there anyone to know QT ?
Alexandar B
@ace1122sp
Aug 20 2017 13:41
what is QT? just curious :D
aozpay
@aozpay
Aug 20 2017 13:42
Qt is cross-platfrom SDK :D
Alexandar B
@ace1122sp
Aug 20 2017 13:43
:+1:
aozpay
@aozpay
Aug 20 2017 13:43
for embedded or desktop
It's up to you
Alexandar B
@ace1122sp
Aug 20 2017 13:43
yeah, i see :D
Mukesh Kumar Angrish
@MukeshAngrish
Aug 20 2017 13:45
Hey guys, I need some help to format the minutes to minutes : seconds in my pomodoro clock app. Can anyone please help. I found some method on stackOverflow but it won’t work.
Alexandar B
@ace1122sp
Aug 20 2017 13:45
@MukeshAngrish i can help.. give me some time to see your code
Mukesh Kumar Angrish
@MukeshAngrish
Aug 20 2017 13:46
Sure
Alexandar B
@ace1122sp
Aug 20 2017 13:54
@MukeshAngrish so, i would suggest you to change line 42 setInterval(sessionCount, 1000) to setInterval(sessionCount, 60000)
so it counts minutes then, and also to add similar function for seconds...
or you can keep the original line 42 and then based on its value(value of seconds) to decrease minutes.. so if a second s is equal to 0, then you decrease your minutes by one..
Rishabh Kashyap
@iamrkcheers
Aug 20 2017 14:05
I am at FCC Data Visualisation -> React Projects -> Camper Leaderboard.
I am trying to populate the 'div' tag in my 'render()' with the json I receive after hitting an api.
Everything is OK with the exception that the console is showing the error 'this.setState' is not a function.
https://codepen.io/iamrkcheers/pen/ayYmMZ?editors=0010
Does someone know how to resolve it.
Any help is appreciated. Thank You.
Stephen James
@sjames1958gm
Aug 20 2017 14:13
@iamrkcheers I don't see that error - I see some error relating to radium
Rishabh Kashyap
@iamrkcheers
Aug 20 2017 14:14
@sjames1958gm nevermind. figured it out. Thanks.
CamperBot
@camperbot
Aug 20 2017 14:14
iamrkcheers sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8346 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Aug 20 2017 14:15
@iamrkcheers Implemented that.setState() ?
Rishabh Kashyap
@iamrkcheers
Aug 20 2017 14:15
@sjames1958gm yes
Mukesh Kumar Angrish
@MukeshAngrish
Aug 20 2017 15:13
@ace1122sp I will try that when I am near my laptop
@ace1122sp thanks btw
CamperBot
@camperbot
Aug 20 2017 15:14
mukeshangrish sends brownie points to @ace1122sp :sparkles: :thumbsup: :sparkles:
:cookie: 399 | @ace1122sp |http://www.freecodecamp.com/ace1122sp
Mukesh Kumar Angrish
@MukeshAngrish
Aug 20 2017 15:37
@ace1122sp as I was analyzing your code. Are you suggesting that I use setInterval for 60000 milliseconds and use a nested setInterval for 1000 milliseconds
artbohr
@artbohr
Aug 20 2017 15:39
Why I can't display anything via the render?
class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = { 
      recent: [],
      alltime: []
    };
  }

  componentDidMount(){

    const ajaxReqs = (url) => {  
      const request = new XMLHttpRequest();
      request.open('GET', url, true);
      request.send();

      request.onload = () => {
        if (request.status >= 200 && request.status < 400) {
          var data = JSON.parse(request.responseText);
          console.log(data);
          return data;
          } 
        };
    }
      this.setState({
        recent: ajaxReqs('https://fcctop100.herokuapp.com/api/fccusers/top/recent'),
        alltime: ajaxReqs('https://fcctop100.herokuapp.com/api/fccusers/top/alltime')
      });

  }

  render(){
    return( 
      <p>{this.state.recent[0]}</p>   
    )
  }  
}

ReactDOM.render(<App/>, document.querySelector(".content"));
Mukesh Kumar Angrish
@MukeshAngrish
Aug 20 2017 15:40
@ace1122sp If you review my code again you will see a commented code for the minutes to seconds. But it didn't work. That's why I asked for help here
artbohr
@artbohr
Aug 20 2017 15:47
hey @MukeshAngrish , check this out: https://www.w3schools.com/howto/howto_js_countdown.asp, there is a pretty good example that can be related to ur problem, it's a counter to but it's the same principle
tho*
Alexandar B
@ace1122sp
Aug 20 2017 15:47
@MukeshAngrish if you don't want to show seconds, but only minutes then you can go with '60000 miliseconds approach'.. but if you want to show both minutes and seconds, then you should set your vas seconds = 60; and with setInterval to 1000ms, you do something like this seconds -= 1; and when your variable seconds comes to 0, then you call some function which decrease your minutes by 1 and set variable seconds back to 60..
just an idea... :D
5millerk
@5millerk
Aug 20 2017 15:52
hey guys, I'm playing around with flexbox to create a sticky footer. Does anyone know what CSS I need to add to make my footer (yellow) reach the edge of the page? Right now the body creates a small border around all the content that I would like to avoid.
ignore the fact that I called it weather app haha I just started playing with this before building my weather app
Alexandar B
@ace1122sp
Aug 20 2017 15:55
@5millerk you can try to add margin:0; on line 3
5millerk
@5millerk
Aug 20 2017 15:56
to #footer, or to body?
html, body
got it
Alexandar B
@ace1122sp
Aug 20 2017 15:56
yeah
5millerk
@5millerk
Aug 20 2017 15:56
that worked perfect
Alexandar B
@ace1122sp
Aug 20 2017 15:56
:D
5millerk
@5millerk
Aug 20 2017 15:56
thanks!
i knew it would be something simple like that ahah
@ace1122sp ty
CamperBot
@camperbot
Aug 20 2017 15:56
5millerk sends brownie points to @ace1122sp :sparkles: :thumbsup: :sparkles:
:cookie: 400 | @ace1122sp |http://www.freecodecamp.com/ace1122sp
Alexandar B
@ace1122sp
Aug 20 2017 15:57
i had exactly the same problem when started with flex :D np
Mukesh Kumar Angrish
@MukeshAngrish
Aug 20 2017 16:23
@artbohr @ace1122sp I did something to the code to convert minutes to minutes : seconds. But looks like I jinxed it. Please help
Alexandar B
@ace1122sp
Aug 20 2017 16:34
@MukeshAngrish i've noticed when you click on timer after the session have starte the ticking speeds up.. i had the same problem with my pomodoro.. you need to make timer button to alternate between start and stop
Mukesh Kumar Angrish
@MukeshAngrish
Aug 20 2017 16:34
How?
Alexandar B
@ace1122sp
Aug 20 2017 16:36
perhaps, you can make some flag and make your function to check each time when the timer has been clicked if it needs to start time or to stop it..
Mukesh Kumar Angrish
@MukeshAngrish
Aug 20 2017 16:41
@ace1122sp Yes I can do that but what could be the stop code like. I cannot figure out how to stop the counter and resume it somehow. Could you give me some hint for that. If not, I would focus on the minutes to minutes : seconds problem that’s bugging me right now
Alexandar B
@ace1122sp
Aug 20 2017 16:47
var clockState = 0;
function startOrStopClock(){
if(clockState) {
//stop time
clockState = 0;
} else {
//start time
clockState = 1;
}
I did something like that in my app
Mukesh Kumar Angrish
@MukeshAngrish
Aug 20 2017 16:51
Okay I think I get it. So your counter function only works if(clockState) is true
Alexandar B
@ace1122sp
Aug 20 2017 16:51
yeah
artbohr
@artbohr
Aug 20 2017 16:52
@MukeshAngrish if I understood you want to display instead of just minutes, minutes and seconds?
Mukesh Kumar Angrish
@MukeshAngrish
Aug 20 2017 16:53
@artbohr Yes. That’s right.
Alexandar B
@ace1122sp
Aug 20 2017 16:54
and also it stops time if it's not true...and from here you can make it to restart your timer or just pause it
Mukesh Kumar Angrish
@MukeshAngrish
Aug 20 2017 17:03
@ace1122sp I’m redoing most of the JS code. Let’s hope for the best. Thanks again
CamperBot
@camperbot
Aug 20 2017 17:03
mukeshangrish sends brownie points to @ace1122sp :sparkles: :thumbsup: :sparkles:
:cookie: 401 | @ace1122sp |http://www.freecodecamp.com/ace1122sp
Alexandar B
@ace1122sp
Aug 20 2017 17:03
np :D :+1:
artbohr
@artbohr
Aug 20 2017 17:03
@MukeshAngrish I took a look at ur code, and first of all you need to declare a variable which will track ur desired session time and convert all the time to one unit and then perform the calculations from there
@MukeshAngrish I really suggest the counter approach I sent you before, you convert all your measurments to milliseconds and from there you display your time performing the calculations which will transform the millisecond to minutes and seconds
@MukeshAngrish for example, you use the "var countDownDate = new Date().getTime()+time601000;" and you have a start point for your counter and then you update the time passed
var now = new Date().getTime();
var distance = countDownDate - now;
var countDownDate = new Date().getTime()+time*60*1000;

var now = new Date().getTime();
var distance = countDownDate - now;
Mukesh Kumar Angrish
@MukeshAngrish
Aug 20 2017 17:08
@artbohr thanks for the approach but If you look at my closely you will realize I already used that approach
CamperBot
@camperbot
Aug 20 2017 17:08
:cookie: 304 | @artbohr |http://www.freecodecamp.com/artbohr
mukeshangrish sends brownie points to @artbohr :sparkles: :thumbsup: :sparkles:
artbohr
@artbohr
Aug 20 2017 17:08
@MukeshAngrish after that you can get your minutes and seconds like that:
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
Mukesh Kumar Angrish
@MukeshAngrish
Aug 20 2017 17:09
$("#timer").on("click", function() {
  $(".row").hide();
  seconds = 60; //convert minutes to seconds
  var sessionTimer = setInterval(sessionCount, 1000);
  //start counter which performs a function every 1000 milliseconds
  function sessionCount() {
    $("#status").html("Session");
    seconds -= 1; //decrease count by 1 every second
    $("#timer").toggleClass("timer-border-green");
    $("#timer").toggleClass("timer-border-yellow");

    if(sessionTime % 60 >= 10)
      showStr = Math.floor(sesionTime / 60) + ":" + (sessionTime % 60);
    else
      showStr = Math.floor(sesionTime / 60) + ":0" + (sessionTime % 60);

    //$("#time").html(sessionTime);
    //Once the sessionTime becomes zero we start the breakTime
    if(sessionTime < 1) {
      clearInterval(sessionTimer);
      //once the sessionCount has ended reset the value automatically
      sessionTime = parseInt($("#session").html());
      breakTime *= 60; 

      var breakTimer = setInterval(breakCount, 1000);
      //similar thing for breakCount
      function breakCount() {
        $("#status").html("Break");
        breakTime -= 1;
        $("#timer").toggleClass("timer-border-red");
        $("#timer").toggleClass("timer-border-blue");
        if(sessionTime % 60 >= 10)
          showStr = Math.floor(sesionTime / 60) + ":" + (sessionTime % 60);
        else
          showStr = Math.floor(sesionTime / 60) + ":0" + (sessionTime % 60);
        //$("#time").html(breakTime);

        if(breakTime < 1) {
          clearInterval(breakTimer);
          breakTime = parseInt($("#break").html());
          $(".row").show();
          sessionTimer = setInterval(sessionCount, 1000);
        }
      }
    }
  };
});
here see this
right now it must be commented in my code as I’m redoing it
artbohr
@artbohr
Aug 20 2017 17:14
@MukeshAngrish I didn't find any use of "new Date().getTime(); and the deduction of the starting point and current point (the time tight now)" to track the time
@MukeshAngrish maybe try to tickle a bit with the plain counter/timer to get the basic functionality of the clock working first
@MukeshAngrish the principle would be getting this "distance" variable updating in the setinterval function every second and then displaying the result of the deduction in your $("#time")
Mukesh Kumar Angrish
@MukeshAngrish
Aug 20 2017 17:18
@artbohr because I’m not showing the user the time remaining to reach a particular date in future. That’s what the code you suggested is doing. I’m just showing the user what time is remaining for their set minutes
artbohr
@artbohr
Aug 20 2017 17:20
@MukeshAngrish well it's the same approach, you are getting a date (right now) then you are getting the date again (after 1 second) with the interval and then you are displaying the desired time 25 minutes (minus) time passed which results in 24 mins 59 seconds (displaying for the user)
Mukesh Kumar Angrish
@MukeshAngrish
Aug 20 2017 17:26
@artbohr I don’t see any use of the getting the time right now as that would mean I have to give my function a new date that would be 25 mins ahead of now. That would be like using smaller roads instead of using the highway. Which I’m using right now. If you have any suggestions to improve my code, do tell. But I don’t think I need to use the concept of dates when I’m only working with minutes and not even hours.
artbohr
@artbohr
Aug 20 2017 18:22
@MukeshAngrish
sessionTime *= 60; //convert minutes to seconds
var sessionTimer = setInterval(sessionCount, 1000);
//start counter which performs a function every 1000 milliseconds
function sessionCount() {
    $("#status").html("Session");
    sessionTime -= 1; //decrease count by 1 every second
    $("#timer").toggleClass("timer-border-green");
    $("#timer").toggleClass("timer-border-yellow");

    var minutes = Math.floor(sessionTime/60);
    var seconds = Math.floor(sessionTime%60);
Antonio Marrero Bonilla
@Hyperchucks
Aug 20 2017 18:24
Anybody good with ASP.Net / C# I need some help with an application
Margaret
@Margaret2
Aug 20 2017 18:27
@Hyperchucks this is for Free code camp stuff - mostly HTML/CSS/JS, you should probably search for another room
Mukesh Kumar Angrish
@MukeshAngrish
Aug 20 2017 18:32
@artbohr you have to be tad more specific, mate. Can’t really conclude anything if you will just show me my code. 😜
koder3
@koder3
Aug 20 2017 18:33
ive realised there are many ways of receiveing data from external sources. however whats more better to use $.getJSON or new XMLHttpRequest(); or using$.ajax
Moisés Man
@moigithub
Aug 20 2017 18:43
ajax is just a wrapper around XMLHttpRequest
and getJSON calls ajax with some predefined parameters
koder3
@koder3
Aug 20 2017 18:46
@moigithub thanks. but what would you prefer to use
CamperBot
@camperbot
Aug 20 2017 18:46
koder3 sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 3599 | @moigithub |http://www.freecodecamp.com/moigithub
Moisés Man
@moigithub
Aug 20 2017 18:46
getjson easier :)
Simey de Klerk
@simeydk
Aug 20 2017 19:01
Hello
Can anyone help me with a very simple bootstrap formatting question, please?
Nahuel Ovejero
@NahuelOvejero
Aug 20 2017 19:22
sure
Johnny
@JohnnyBizzel
Aug 20 2017 20:31
@Simdk8 Without the question it is difficult to say
Simey de Klerk
@simeydk
Aug 20 2017 20:32
Thanks, I came right in another channel. My issue was I was criss-crossing between versions of Boostrap
which was leading to my code giving results different to what I intended :)
artbohr
@artbohr
Aug 20 2017 20:51
@MukeshAngrish I changed the specific lines compared to ur most current version at that moment u just need to compare a couple of lines
@MukeshAngrish "sessionTimer" is your variable where you store your time in multiplied by 60 (which now makes it true seconds, as you are stating in ur comments instead of the 60000 u had before there) then we deduct from it in the session count -=1 to denote that a second has passed and then we convert from the sessionTime variable to minutes and show them below. Seconds takes your sessionTimer variable and applies the module operator to get the seconds that are left, if you change these lines vs the lines u had you get a working timer, which I tested on ur project before at that time.
aRtoo
@artoodeeto
Aug 20 2017 23:07
yow bross. check this out. even though the condition is right it will return the wrong value. its returning [3,4] even though it is less than 5. like whaatt?? crazzyyy bro!
heres the code.

function dropElements(arr, func) {

  for(var i=0; i<arr.length; i++){
    if(func(arr[0])){
      break;
    }else{
      arr.shift();
    }
  }
  return arr;
}
dropElements([1, 2, 3, 4], function(n) {return n > 5;}); //should return [].
Long Nguyen
@longnt80
Aug 20 2017 23:47
@artoodeeto because you modified the arr inside the loop
aRtoo
@artoodeeto
Aug 20 2017 23:47
@longnt80 yea. i created a var again
Long Nguyen
@longnt80
Aug 20 2017 23:49
@artoodeeto why not just use filter?
aRtoo
@artoodeeto
Aug 20 2017 23:50
@longnt80 arr.filter(func) ??
@longnt80 i wanted to but it says to use the shift
Long Nguyen
@longnt80
Aug 20 2017 23:50
yes
i see
aRtoo
@artoodeeto
Aug 20 2017 23:51
@longnt80 but i got now bro. thanks
CamperBot
@camperbot
Aug 20 2017 23:51
artoodeeto sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 518 | @longnt80 |http://www.freecodecamp.com/longnt80
Long Nguyen
@longnt80
Aug 20 2017 23:53
@artoodeeto np
aRtoo
@artoodeeto
Aug 20 2017 23:57
@longnt80 yow bro can i pm you??