These are chat archives for FreeCodeCamp/HelpFrontEnd

23rd
Dec 2016
emamadordev
@emamadordev
Dec 23 2016 00:34
heys guys! I'm doing the Simon game challenge. For some reason at the end of my setInterval it doesn't remove the classes that i want. the function is called gameAi. warning: not mobile friendly just yet. Anyways, take a look: https://codepen.io/emmanuelamador/full/MbLexM/
Trevor
@electrostaticfleece
Dec 23 2016 00:45
@emamador Just took a look at this and think I have the answer, are you still here?
emamadordev
@emamadordev
Dec 23 2016 00:45
@electrostaticfleece yeah?
Trevor
@electrostaticfleece
Dec 23 2016 00:46
Cool. So the explanation is kind of in depth, so before I begin are you aware of the event loop?
emamadordev
@emamadordev
Dec 23 2016 00:46
you mean like for loop?
Trevor
@electrostaticfleece
Dec 23 2016 00:48
No, it has to do with the Javascript engine. But the simple explanation of it goes a little like this: When you call setTimeout it doesn't execute synchronously.
So you're calling setTimeout within your if and else If blocks
So, it doesn't get added until 500 miliseconds later
emamadordev
@emamadordev
Dec 23 2016 00:49
yeah i noticed that.
Trevor
@electrostaticfleece
Dec 23 2016 00:49
So when the javascript engine processes your code it does it really really fast right
emamadordev
@emamadordev
Dec 23 2016 00:49
yeah like in less than a second
Trevor
@electrostaticfleece
Dec 23 2016 00:50
yeah, so in a few miliseconds
Tzvetlin Velev
@tvelev92
Dec 23 2016 00:50
guys
i am confused on something
Trevor
@electrostaticfleece
Dec 23 2016 00:51
What ends up happening is that when you call remove class it calls it BEFORE you even added the class
Tzvetlin Velev
@tvelev92
Dec 23 2016 00:51
I have a div with id "content" for the projects list
Trevor
@electrostaticfleece
Dec 23 2016 00:51
because you set it to execute 500 miliseconds later
Tzvetlin Velev
@tvelev92
Dec 23 2016 00:51
and I am curious why adding #content to the css element a{} makes it so it doenst work any more
emamadordev
@emamadordev
Dec 23 2016 00:51
@electrostaticfleece oh!
Trevor
@electrostaticfleece
Dec 23 2016 00:51
And interestingly even if it was 0 milliseconds later it still wouldn't execute Due to the event loop
Tzvetlin Velev
@tvelev92
Dec 23 2016 00:51
im just trying to figure out how to target specific anchors for the future rather than just all <a> tags getting affected
emamadordev
@emamadordev
Dec 23 2016 00:51
@electrostaticfleece i didn't notice that.
Trevor
@electrostaticfleece
Dec 23 2016 00:52
Which is super complex... but I'll leave you a link that discusses it in depth if you're interested
Here's the link It's a really great talk on the subject
emamadordev
@emamadordev
Dec 23 2016 00:53
@electrostaticfleece ok thanks. very helpful.
CamperBot
@camperbot
Dec 23 2016 00:53
emamador sends brownie points to @electrostaticfleece :sparkles: :thumbsup: :sparkles:
:cookie: 388 | @electrostaticfleece |http://www.freecodecamp.com/electrostaticfleece
Robert
@SovereignRob1
Dec 23 2016 00:53
im working on my tribute page project and i want to put my h1,h2, and image inside a box thats a different color than the rest of the page. How do i do this?
Trevor
@electrostaticfleece
Dec 23 2016 00:54
NP @emamador . Just an FYI solving this problem initially can be really tough... so pm me if you have any questions.
emamadordev
@emamadordev
Dec 23 2016 00:55
@electrostaticfleece ok i fixed it. lol
Tyler Moeller
@TylerMoeller
Dec 23 2016 00:57
@emamador A more graceful fix might be to use jQuery's .queue() method. For example, add a class, wait 500ms, remove a class:
$('.toprightcorner').addClass('lightred').delay(500).queue(function() {
  $('.toprightcorner').removeClass('lightred')
});
Trevor
@electrostaticfleece
Dec 23 2016 00:57
Good to hear!
Tyler Moeller
@TylerMoeller
Dec 23 2016 00:58
Great explanation, BTW, @electrostaticfleece the event loop is very important for timing like this
emamadordev
@emamadordev
Dec 23 2016 00:59
@electrostaticfleece yeah. thanks very much @TylerMoeller oh nice i didn't know about the delay or queue methods. time to study some more.
CamperBot
@camperbot
Dec 23 2016 00:59
emamador sends brownie points to @electrostaticfleece and @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1197 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
:warning: emamador already gave electrostaticfleece points
Tyler Moeller
@TylerMoeller
Dec 23 2016 01:00
@emamador There's also the .promise() method that is also useful for these kinds of things:
$('.toprightcorner').addClass('lightred').delay(1000).promise().done(function() {
  $('.toprightcorner').removeClass('lightred')
});
Trevor
@electrostaticfleece
Dec 23 2016 01:02
@TylerMoeller Thanks for following up with the jQuery methods. I haven't used jQuery in a while and it definitely helps to see a working example.
CamperBot
@camperbot
Dec 23 2016 01:02
electrostaticfleece sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1198 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Robert
@SovereignRob1
Dec 23 2016 01:03
can anyone help me?
Tzvetlin Velev
@tvelev92
Dec 23 2016 01:03
@SovereignRob1 what with?
Robert
@SovereignRob1
Dec 23 2016 01:03
im working on my tribute page project and i want to put my h1,h2, and image inside a box thats a different color than the rest of the page. How do i do this?
Tzvetlin Velev
@tvelev92
Dec 23 2016 01:03
@SovereignRob1 im down to try
try
Robert
@SovereignRob1
Dec 23 2016 01:04
im a beginner so im sure its easy
Tzvetlin Velev
@tvelev92
Dec 23 2016 01:04
put it all in a <div class = "jumbotron"> </div>
emamadordev
@emamadordev
Dec 23 2016 01:04
title: Microsoft releases HoloJS, allowing JavaScript developers to make HoloLens apps
Robert
@SovereignRob1
Dec 23 2016 01:04
ok. never heard of jumbotron. lol
Tzvetlin Velev
@tvelev92
Dec 23 2016 01:05
its part of boostrap
emamadordev
@emamadordev
Dec 23 2016 01:05
All kinds of javascript. All kinds.
Robert
@SovereignRob1
Dec 23 2016 01:06
i thought i was doing good through the challenges or whatever and now im at the first project and feel like i dont know anything. lol
very overwhelming
Trevor
@electrostaticfleece
Dec 23 2016 01:06
@tvelev92 w/r/t your question. It looks like in your css your using Ids, which target a single instance and need an id attribute added to your html <element id="myId"></element>
You use Ids to access a single html element
emamadordev
@emamadordev
Dec 23 2016 01:07
@SovereignRob1 this happened to me too. Just take it one step at a time. it will come to you.
Robert
@SovereignRob1
Dec 23 2016 01:07
thanks @tvelev92
CamperBot
@camperbot
Dec 23 2016 01:07
sovereignrob1 sends brownie points to @tvelev92 :sparkles: :thumbsup: :sparkles:
:cookie: 305 | @tvelev92 |http://www.freecodecamp.com/tvelev92
Angarita
@Angarita
Dec 23 2016 01:08
Hi everyone! I´m trying to eliminate those white stripes in between the navbar and jumbotron
https://i.gyazo.com/13871df31a98ebed60f64df0f02faa9a.png
Trevor
@electrostaticfleece
Dec 23 2016 01:08
To access multiple html elements you add classes which in css use the following syntax .class { color: red; }
Tzvetlin Velev
@tvelev92
Dec 23 2016 01:09
@SovereignRob1 try wrapping that in another div with class = "container-fluid
Robert
@SovereignRob1
Dec 23 2016 01:11
ok, i did that. i also tried container and i like the way it brings it in to fit the text and image. does it matter which i use?
thanks @tvelev92
CamperBot
@camperbot
Dec 23 2016 01:11
sovereignrob1 sends brownie points to @tvelev92 :sparkles: :thumbsup: :sparkles:
:warning: sovereignrob1 already gave tvelev92 points
Trevor
@electrostaticfleece
Dec 23 2016 01:14
If anyone here needs any one-on-one help or just wants to chat about about development, feel free to PM me. I've finished up all of the Front end development / data viz / and almost all of the back-end FCC curriculum. I just got hired as a front-end developer for IBM, but don't start until late January. So I'm looking to help anyone else out that is on a similar path any way I can.
Robert
@SovereignRob1
Dec 23 2016 01:18
@electrostaticfleece i followed you. i will definitely look you up for help. I need all i can get right now. lol
Trevor
@electrostaticfleece
Dec 23 2016 01:21
@SovereignRob1 Sweet! Just saw that. Are you really out of Dallas? The job I just took is Austin like 1000 miles away from where I live right now, haha.
Robert
@SovereignRob1
Dec 23 2016 01:23
yeah. well, a suburb of dallas, but in the metroplex
Trevor
@electrostaticfleece
Dec 23 2016 01:24
Nice! That's a great place to be if you're looking for jobs in tech. I'm out of Oregon and I think there may be like 100 JS developer jobs in total.
Robert
@SovereignRob1
Dec 23 2016 01:25
yeah. im looking to go down the same route you are. its gonna be a fun road
Trevor
@electrostaticfleece
Dec 23 2016 01:27
It's definitely a lot of fun. Really difficult, but probably one of the most rewarding things I've done.
Evan Kalvis
@evan17gr
Dec 23 2016 01:29
@electrostaticfleece what's the best way to understand JavaScript because I can't get my head around it
grantknaver
@grantknaver
Dec 23 2016 01:32
anyone open to help me out with something real quick
any ideas why my bind events only work once?
Trevor
@electrostaticfleece
Dec 23 2016 01:34
@evan17gr That's a pretty big question. Maybe you could let me know what you're confused about and we can tackle that first
Evan Kalvis
@evan17gr
Dec 23 2016 01:36
I just find the syntax of js really weird
I understand what objects,functions,arrays,variables etc mean but I can't apply them when writing code
Trevor
@electrostaticfleece
Dec 23 2016 01:40
@evan17gr Ah, I get what you're saying that can be really confusing. hmmm... I can try to explain it to you, the best way might be a visual explanation. Do you have google hangouts?
Evan Kalvis
@evan17gr
Dec 23 2016 01:41
Can I use my phone for that or do I need a laptop ?
Trevor
@electrostaticfleece
Dec 23 2016 01:43
You probably need a laptop
Evan Kalvis
@evan17gr
Dec 23 2016 01:44
I can't really use a laptop rn
Can I add you and we could talk about it tomorrow?
Because i don't live in the USA and its quite late
Trevor
@electrostaticfleece
Dec 23 2016 01:46
Yeah, no problem! That works for me.
Yanuar
@Yanuarpr
Dec 23 2016 02:33
Help i can't get JSON respon from this site https://api.twitch.tv/kraken/streams/freecodecamp?callback=?
CamperBot
@camperbot
Dec 23 2016 02:33
no wiki entry for: i cant get json respon from this site httpsapitwitchtvkrakenstreamsfreecodecampcallback
Meamya Christie
@meamya
Dec 23 2016 02:35
@Angarita try adding a negative top margin to the jumbotron. That's how I get rid of mine.
Nick Janne
@njanne19
Dec 23 2016 02:47
Can someone help me with a keyframes animation problem
Angarita
@Angarita
Dec 23 2016 02:50
@meamya Thanks! thats actually how I solved it
CamperBot
@camperbot
Dec 23 2016 02:50
angarita sends brownie points to @meamya :sparkles: :thumbsup: :sparkles:
:cookie: 9 | @meamya |http://www.freecodecamp.com/meamya
Trevor
@electrostaticfleece
Dec 23 2016 02:50
@njanne19 I can give it a shot what's up?
Nick Janne
@njanne19
Dec 23 2016 02:51
Ok so I have a keyframes animation that I like and it activates when I hover over with (.myClassName:hover) but when I remove my cursor it snaps back to normal and looks bad
how do I get it to ease back out
Trevor
@electrostaticfleece
Dec 23 2016 02:53
So this happens because onHover it adds the .myClassName:hover right.
So you'll have to add an animation/transition to the .myClassName
Nick Janne
@njanne19
Dec 23 2016 02:53
Um I can show you my code maybe it'll make more sense
Meamya Christie
@meamya
Dec 23 2016 02:54
@Angarita nice
Trevor
@electrostaticfleece
Dec 23 2016 02:54
Because when you're no longer hovering over it so the psuedo class .myClassName:hover is no longer active
Nick Janne
@njanne19
Dec 23 2016 02:54
Yes that would make sense
however how can I get it to like fade out
Trevor
@electrostaticfleece
Dec 23 2016 02:55
set opacity to 0
add a transition
Nick Janne
@njanne19
Dec 23 2016 02:56
how could I implement that into my code so when I remove the mouse it does those things
Trevor
@electrostaticfleece
Dec 23 2016 02:56
Send me your code so I can get a better look at the problem
Angarita
@Angarita
Dec 23 2016 02:57
Do you guys know how I may make a "col-sm-6" in bootstrap the whole pag long?
Nick Janne
@njanne19
Dec 23 2016 02:57

CSS:
.itemBackground {
background-color: none;

}
@keyframes colorchange2 {
  0% {background-color: inherit; }
  100% {background-color: blue; }
}

.bigButton:hover {
  -webkit-animation: colorchange2 1s forwards; /* Safari 4+ */
  -moz-animation:    colorchange2 1s forwards; /* Fx 5+ */
  -o-animation:      colorchange2 1s forwards; /* Opera 12+ */
  animation:         colorchange2 1s forwards; /* IE 10+, Fx 29+ */
  animation-fill-mode:both;
  animation-timing-function:ease-out;
}

HTML:
<a class="itembackground bigButton btn" href="#">
<h2>Freshman</h2>
<ul class="freshmanList">
<h4>English I</h4>
<h4>Algebra II</h4>
<h4>Biology I</h4>
<h4>Health</h4>
<h4>Spanish II Honors</h4>
<h4>Global History</h4>
<h4>Christian Thought</li>
</ul>
</a>

Meamya Christie
@meamya
Dec 23 2016 02:59
@Angarita try <div class="fluid-container">
<div class="col-md-6">
Angarita
@Angarita
Dec 23 2016 03:03
@meamya What I´m traying to say is how can I put that "insert a dope img" the whole pag long or a little bit lo
nger
https://i.gyazo.com/7a4232e6ad9be198098b13bf9a1ca64a.png
Trevor
@electrostaticfleece
Dec 23 2016 03:06
@njanne19 Ok, so I don't think you need animations for this
You can just use transitions
try this
.bigButton {
  transition: background-color 2s;
  -webkit-transition: background-color 2s;
}

.bigButton:hover {
  background-color: blue;
}
I think that's what you're looking for, but I'm not entirely sure.
Meamya Christie
@meamya
Dec 23 2016 03:10
@Angarita so the other solution will make it the width of the page. To make it the cover the length of the page maybe set the image length to 100%
Trevor
@electrostaticfleece
Dec 23 2016 03:11
Also, for your html trying using li elements instead of h4 elements. And I'm not sure if you intended to wrap all of it in an a tag or not?
Nick Janne
@njanne19
Dec 23 2016 03:12
I know about li elements however for the desired look I'm using h4 for the time being
maybe not beutiful but functional
Trevor
@electrostaticfleece
Dec 23 2016 03:14
You can also style the li elements using css
Can someone please tell me why they keys do multiple inputs?
Michael Karpinski
@karpimpski
Dec 23 2016 03:43
any clue why this isn't working? it logs the correct ingredients, but always removes the last one on my page.
class EditBox extends React.Component {
  submit(event){
    var ingredients = [];
    for(var i = 0; i < document.querySelectorAll('input').length; i++){
      ingredients.push(document.querySelectorAll('input')[i].value); 
    }
    this.props.recipe.ingredients = ingredients;
    ReactDOM.render(<Recipe recipe={this.props.recipe} />, document.querySelector('#box'));
  }

  add(){
    this.props.recipe.ingredients.push('');
    ReactDOM.render(<EditBox recipe={this.props.recipe} />, document.querySelector('#box'));
  }

  remove(event){
    this.props.recipe.ingredients.splice(this.props.recipe.ingredients.indexOf(event.target.parentElement.children[0].value), 1);
    console.log(this.props.recipe.ingredients.join(' - '));
    ReactDOM.render(<EditBox recipe={this.props.recipe} />, document.querySelector('#box'));
  }

  render() {
    return (
      <div className='edit'>
        <i className='icon-check form' onClick={this.submit.bind(this)}></i>
        <i className='icon-plus' onClick={this.add.bind(this)}></i>
        <div className='name'>{this.props.recipe.name}</div>
        <div className='ingredients'>
          {console.log(this.props.recipe.ingredients)}
          {this.props.recipe.ingredients.map((ingredient, index) => {
            return (
              <div className='edit_field row' key={index}>
                <input type='text' defaultValue={ingredient}></input>
                <i className='icon-remove-circle' onClick={this.remove.bind(this)}></i>
              </div>
            )
          })}
        </div>
      </div>
    )
  }
}
Trevor
@electrostaticfleece
Dec 23 2016 03:49
@karpimpski Do you have a pen for this? I can try playing around with it if you do.
Michael Karpinski
@karpimpski
Dec 23 2016 04:01
I'll make one in just a little bit and mention you. thanks!
Angarita
@Angarita
Dec 23 2016 04:23
Hi! can you guys give me some feedback on my portafolio page
http://codepen.io/AngaritaCodeCamper/pen/BQEGvW?editors=1100
Sid Kasat
@sidkasat
Dec 23 2016 04:27
Hey guys,
I was making my portfolio page on CodePen and I wanted to add my image to it. Does anyone know how that is possible?
InSugyo
@Luich
Dec 23 2016 04:28
  channelArr.forEach(function(channel) {
    $.ajax ({
      url: baseUrl + "streams/" + channel,
      dataType:"jsonp",
      type: "GET",
      accept: "application/javascript",
      success: function(data) {
        if(data.stream !== null) {
          data.online = true;
        } else {
          data.online = false;
        }

        channels.push(data);
      }
    })
  })
why thir forEach is not a function?
@sidkasat Find image hosting site and upload the image. And copy the source url and paste at img tag's src attribute.
Tom
@moT01
Dec 23 2016 04:34
@Angarita looks good
looks like the nav area has a little rounded corners that show white behind
Adi2Point0
@Adi2Point0
Dec 23 2016 05:09
@Luich I don't see where you are using forEach.

also, you can simplify this code yours

 success: function(data) {
        if(data.stream !== null) {
          data.online = true;
        } else {
          data.online = false;
        }

        channels.push(data);
}

to

success: function(data) {
  data.online = data.stream !== null;
  channels.push(data);
}
Ken Haduch
@khaduch
Dec 23 2016 05:13
@sidkasat - you have to put your image file on a place on the internet that is accessible via an http transfer - you can use dropbox, or a site like https://postimg.org that lets you upload and link to your image.
InSugyo
@Luich
Dec 23 2016 05:13
@Adi2Point0 Thanks. forEach was my mistake. I sent wrong arg(ㅡㅡ)a;;
CamperBot
@camperbot
Dec 23 2016 05:13
luich sends brownie points to @adi2point0 :sparkles: :thumbsup: :sparkles:
:cookie: 235 | @adi2point0 |http://www.freecodecamp.com/adi2point0
John P Penaloza
@johnpyp
Dec 23 2016 05:16
Hey guys, could someone help here: http://codepen.io/johnpyp/pen/mOgvKa
I can't figure out why my scrollspy isn't working.
Rajat
@rajataudichya
Dec 23 2016 05:35

I have made a site which consist of around 10 pages all ending with .html. ( home.html, about.html).

I wish to remove .html extension and change my URLs for example rajat.com/about.html to rajat.com/buy-products-from-me in all my webpages in an easier and less time consuming way as I have already linked my pages

Is there a way to solve this

Jesse
@lookinahead13
Dec 23 2016 05:42
If I take away the bullet points with .... ul {
list-style-type: none;
} ---- in CSS ....... but still have it listed in HTML as an unordered list with the tags...... Is it still an unoredered list or would it just be centered text after the bullet points are removed?
alpox
@alpox
Dec 23 2016 05:57
@lookinahead13 is this a philisophical question? :thought_balloon:
Perumal Prabhu
@perumalprabhup
Dec 23 2016 05:58
how to complete this task
``` function sumAll(arr) {

var max=Math.max(null,arr);
return max;
}

sumAll([1, 4]);
```

alpox
@alpox
Dec 23 2016 05:59
@perumalprabhup according to the null in the line, i guess you were looking for Math. max. apply
John P Penaloza
@johnpyp
Dec 23 2016 05:59
Anyone have any ideas for my question? Scrollspy from bootstrap isn't working: http://codepen.io/johnpyp/pen/mOgvKa
badalsaibo
@heyDante
Dec 23 2016 06:08
<ul class="nav navbar-nav navbar-right"> navbar-right doesn't work in codepen
John P Penaloza
@johnpyp
Dec 23 2016 06:08
do you think that is the problem?
badalsaibo
@heyDante
Dec 23 2016 06:08
no im talking about my problem.
navbar-right doesnt seem to work
John P Penaloza
@johnpyp
Dec 23 2016 06:08
oh ooops
XD
grantknaver
@grantknaver
Dec 23 2016 06:24
anyone free to answer some questions
Tom
@moT01
Dec 23 2016 06:24
whats up
grantknaver
@grantknaver
Dec 23 2016 06:25
Im trying to get fell up a containing div with the ID of #entries with content from an AJAX request? Does that sound like somethin you can help with?
Tom
@moT01
Dec 23 2016 06:26
i can try
grantknaver
@grantknaver
Dec 23 2016 06:26
awesome. so here is my code
It seems to be ignoring the first index of the channels var, that I am using to establish the url I am pulling the AJAX request from any ideas
navbar-right doesn't seems to work. Any help?
Tom
@moT01
Dec 23 2016 06:33
@grantknaver im not sure i see what youre saying
JackVizl
@JackVizl
Dec 23 2016 06:34
can someone please give me some help with the calculator project?
grantknaver
@grantknaver
Dec 23 2016 06:37
I am trying to fill up the div with the id of #entries with div containing a : logo, link and status. The first for some reason when the $.each() method involving my url seems to not be cycling through the channels var, which is responsible for the url.
John P Penaloza
@johnpyp
Dec 23 2016 06:38
Anyone to help here? For some reason scrollspy isn't workinghttp://codepen.io/johnpyp/pen/mOgvKa
Tom
@moT01
Dec 23 2016 06:41
@grantknaver k now i think i understand a little better
Tom
@moT01
Dec 23 2016 06:48
the image and still will go into the html for me by putting the .html(content) in the if/else{}
stuff*
John P Penaloza
@johnpyp
Dec 23 2016 06:50
oh nvm guys
fixed it
grantknaver
@grantknaver
Dec 23 2016 06:55
@moT01 any help would be appreciated
Frostyjayy
@Frostyjayy
Dec 23 2016 06:56
Is anyone have strong ROR skills? I am having a huge issue. /please-help
Naveen
@hope4
Dec 23 2016 07:00
@moT01 hello , can you please help me to solve this issue
i created a port folio page in code pen ,now i want to make it online, i just want to knw how to make it online so that if i give up the link then anyone can see it.
PankajKaushik78
@PankajKaushik78
Dec 23 2016 07:32
Can someone explain me use of "this" keyword in JS in simple language ???????
Jacob Gougehenour
@TurnALeafCoding
Dec 23 2016 07:53
Anyone remember how to center an image? If not I'll look back and try to figure it out
Adi2Point0
@Adi2Point0
Dec 23 2016 07:54
@PankajKaushik78 : This in JS refers to the parent scope
Ende
@LeForteXL
Dec 23 2016 08:35
@hope4 look for web hosting services online
Jacob Gougehenour
@TurnALeafCoding
Dec 23 2016 08:39
@AlvinII thanks
CamperBot
@camperbot
Dec 23 2016 08:39
turnaleafcoding sends brownie points to @alvinii :sparkles: :thumbsup: :sparkles:
:cookie: 133 | @alvinii |http://www.freecodecamp.com/alvinii
Ende
@LeForteXL
Dec 23 2016 08:40
@TurnALeafCoding align was actually deprecated in html5, my fault.
trieucrew
@trieucrew
Dec 23 2016 08:40
Hey everyone I am currently working on the weather app right now. I am having trouble with functions. Currently I have two functions: getLoc() and displayWeather(). I want to call displayWeather after I get the results from getLoc(). I'm pretty sure that I have to do this asynchronously, but I don't know how. I've looked up documentations on chaining methods with jQuery's deferred object, but no success. Any suggestions?
Jacob Gougehenour
@TurnALeafCoding
Dec 23 2016 08:41
@AlvinII It's okay thank you for trying though
CamperBot
@camperbot
Dec 23 2016 08:41
turnaleafcoding sends brownie points to @alvinii :sparkles: :thumbsup: :sparkles:
:warning: turnaleafcoding already gave alvinii points
Ende
@LeForteXL
Dec 23 2016 08:43
@TurnALeafCoding use vertical-align:middle see this link https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
let me know if it works, I'm working on JS, very cool stuff
Jacob Gougehenour
@TurnALeafCoding
Dec 23 2016 08:46
@AlvinII it worked, thank you
CamperBot
@camperbot
Dec 23 2016 08:46
turnaleafcoding sends brownie points to @alvinii :sparkles: :thumbsup: :sparkles:
:warning: turnaleafcoding already gave alvinii points
Ende
@LeForteXL
Dec 23 2016 08:46
maybeits margin:auto, that probably is it
@TurnALeafCoding margin: auto; in css is another way
Jacob Gougehenour
@TurnALeafCoding
Dec 23 2016 08:49
@AlvinII That might be easier than writing all of that lol
Apoorv Mishra
@apoorv-mishra
Dec 23 2016 08:49
Hi, can we use something like data-target=".navbar-fixed-top" instead of data-target="navbar-fixed-top".Will it be correct to do so?
Ende
@LeForteXL
Dec 23 2016 08:50
hahaha yeah, but use that site for any references. It helps me out a lot. I know nothing. I actually just learned something :-)
@apoorv-mishra .navbar isn't valid
@apoorv-mishra .navbar is used to specify that its a class
Apoorv Mishra
@apoorv-mishra
Dec 23 2016 08:54
@AlvinII But, I used html validator and it didn't show any error
Ende
@LeForteXL
Dec 23 2016 08:56
@apoorv-mishra I know ive seen the data-type. I'm looking through the getbootstrap website
Apoorv Mishra
@apoorv-mishra
Dec 23 2016 08:57
@AlvinII Is it mentioned there, that it is invalid ?
Ende
@LeForteXL
Dec 23 2016 08:58
@apoorv-mishra looking still. hold on
Apoorv Mishra
@apoorv-mishra
Dec 23 2016 08:58
@AlvinII Alright!
Ende
@LeForteXL
Dec 23 2016 08:59
@apoorv-mishra <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
that's how it should be used
Apoorv Mishra
@apoorv-mishra
Dec 23 2016 09:00
@AlvinII ok, thanks :)
CamperBot
@camperbot
Dec 23 2016 09:00
apoorv-mishra sends brownie points to @alvinii :sparkles: :thumbsup: :sparkles:
:cookie: 134 | @alvinii |http://www.freecodecamp.com/alvinii
Ende
@LeForteXL
Dec 23 2016 09:01
@apoorv-mishra just a tip, look a the source code given for the examples under the get started page at http://getbootstrap.com/getting-started/
Apoorv Mishra
@apoorv-mishra
Dec 23 2016 09:01
@AlvinII ok
Apoorv Mishra
@apoorv-mishra
Dec 23 2016 09:10
@AlvinII Hey, check this. They have used data-target=".navbar".
Ende
@LeForteXL
Dec 23 2016 09:18
@apoorv-mishra I'd beware of that. I would stick to what the developers of bootstrap use. check out this : https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*
@AlvinII ids are more specific than classes, which is why they are used when getting data from a specific source
Ende
@LeForteXL
Dec 23 2016 09:35
Here is my portfotlio page: https://codepen.io/EndePointe/pen/PbVLLE
Critiques are encouraged! :)
Marianissimus
@Marianissimus
Dec 23 2016 09:55
@AlvinII nice. you can always use placeholder images from sites like - http://placehold.it/ - and you can even define the width / height for your images here.
also, i would recommend you declare the width of the image in css, not inline as you did.
Ashan Mohammed
@AshanMohammed
Dec 23 2016 10:00
Hello Guys!

Why doesn't the alert doesn't work in my js

homeImageSlider();    
var count=1;
function homeImageSlider{ 
    var nowimg = "slider"+count;
    var nextimg = "slider"+2;
    document.getElementById(nowimg).style.display = "none";
    document.getElementById(nextimg).style.display = "block";
    setTimeout(homeImageSlider, 3000);
}

alert("hELLO");

The first function works but alert doesn't work.
Note = I am using the same JavaScript file in multiple pages

Santosh Kumar
@santosh
Dec 23 2016 10:10
How to write this in jQuery? If <figcaption> is empty, remove it's parent's parent.
Jack Lyons
@JackEdwardLyons
Dec 23 2016 10:25
@santosh have you tried chaining .parent().parent()
that's possible
Rajat
@rajataudichya
Dec 23 2016 10:38
guy have made a form on html but the form is not accepting input text when entered from mobile
why??
Clyde Lobo
@oppiniated
Dec 23 2016 10:42
@rajataudichya can't really debug without the code
Rajat
@rajataudichya
Dec 23 2016 10:42
Thanks @oppiniated
CamperBot
@camperbot
Dec 23 2016 10:42
rajataudichya sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 463 | @oppiniated |http://www.freecodecamp.com/oppiniated
Purcea Robert
@RobertPurcea
Dec 23 2016 11:16
hey all I'm trying to make a slider for some images, and the next step I want to do is add a little description when the user hovers over the preview images on top, but is seems like even if I did set the z-index on the description, it still gets covered buy the big images, which z-index is lower.
http://codepen.io/Robertb4/pen/ObGEZe?editors=1100
crystal
@crystalYY
Dec 23 2016 12:12
anyone can help me review this project,thank you! https://codepen.io/crystalYY/pen/VmdWpR
ankitchawrai
@ankitchawrai
Dec 23 2016 12:32
Luke Melaia
@LMelaia
Dec 23 2016 14:00
How do you get the users position on codepen? navigator.geolocation.getCurrentPosition is https only now...
Ken Haduch
@khaduch
Dec 23 2016 15:55
@LMelaia - looks like you didn't get an answer here? One way to do it is to use a different service to get location, an easy one is http://ip-api.com/json . It gives you location based on the IP address, which is possibly somewhat inaccurate, but at least it works over http:// You can always try geolocation (I think that it still works on FireFox, so if someone happens to be using it, it will work) and fall back to an alternate method. You can also look at the information posted in this discussion on the FreeCodeCamp forumor issues list: FreeCodeCamp/FreeCodeCamp#9145. I hope that helps?
@crystalYY - your tribute page looks good, good work!
Ralph Nahra
@Rallph
Dec 23 2016 16:33
hey guys I'm working on my random quote page and for some reason the buttons aren't aligning and I can't figure out why. Could someone give me a hand?
http://codepen.io/Rallph/pen/Obmdod
Luke Melaia
@LMelaia
Dec 23 2016 16:39
@khaduch thank you, although I got a solution. Found one off stackoverflow (complicated, but works)
CamperBot
@camperbot
Dec 23 2016 16:39
:star2: 2147 | @khaduch |http://www.freecodecamp.com/khaduch
lmelaia sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
Ilyes
@ilyes-bch
Dec 23 2016 17:23
@Rallph try using pull-right and pull-left classes in bootstrap
Jesse
@lookinahead13
Dec 23 2016 17:59
@alpox Actually, nope! Well....It could be I guess if a "NOOB" wasn't asking it! :smile: . I was asking because i had completed my first codepen and I couldn't get my bullet points aligned without being indented. I added the CSS to take them out completely with the code but looking at it afterwards, I thought: " I could've done the same thing with align-middle in html.....
Ankit Agarwal
@ankit-prgmr
Dec 23 2016 18:07
Hey guys I'm working on my portfolio page, I have almost finished it. I'm stuck at one point. I have a parent container inside which I have child container. Now I want my footer to stretch across the width of the screen but I'm unable to do that appropriately. I have used following CSS properties
position:absolute;
left:0;
right:0;
for my footer div, but when I scroll through my portfolio page, footer width also starts scrolling. Can anyone help me resolve this issue?
Sid Kasat
@sidkasat
Dec 23 2016 18:08

For some reason, I am not able to split my cols ( in 8 and 4) for my portfolio. Here is the code-

<header>
<div class="container-fluid">
<div class="row background">
<div class="col-md-6">
<p class="intro-background">Here will be the intro about me</p>
</div>
<div class="col-md-6">
<img class="profile-pic thin-black-border" src="http://res.cloudinary.com/sidkasat/image/upload/v1482468064/sid_bpcjzc.jpg" alt="Hey! It's Sid here."></div>
</div>
</div>
</div>
</header>

Marianissimus
@Marianissimus
Dec 23 2016 18:08
@ankit-prgmr niice work. what's wrong with the footer, i don't get it?
Ankit Agarwal
@ankit-prgmr
Dec 23 2016 18:09
@Marianissimus Thanks. Try scrolling through the page, you will see some white space along the right side of the footer
CamperBot
@camperbot
Dec 23 2016 18:09
ankit-prgmr sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @marianissimus |http://www.freecodecamp.com/marianissimus
Marianissimus
@Marianissimus
Dec 23 2016 18:13
@ankit-prgmr why do you need the div <div class="footerDiv" above the row? around there seems to be the problem
Marianissimus
@Marianissimus
Dec 23 2016 18:18
@ankit-prgmr you've got a div in a div in a div... it's going too deep, i think that's unnecessary. try applying a container-fluid class to one of the higher divs if you want it to span the entire width of the screen
Ankit Agarwal
@ankit-prgmr
Dec 23 2016 18:18
@Marianissimus I can get rid of the row. No issue in that. But Inside my container div I have 3 child divs of About, Portfolio and Contact. So to show footer inside Contact div I want my footer div to extend through the page
Marianissimus
@Marianissimus
Dec 23 2016 18:23
@ankit-prgmr here is the problem: the row has some default margins in bootstrap: row {
/ margin-right: -15px; /
/* margin-left: -15px
Ralph Nahra
@Rallph
Dec 23 2016 18:23
@ilyes-bch sorry i got super distracted, but what I actually mean is that I want both buttons to be on the same line
Marianissimus
@Marianissimus
Dec 23 2016 18:24
give that row an id, and apply some rules to override the margins in css: #thebloddyrow {margin-right: 0; margin-left: 0}
Ankit Agarwal
@ankit-prgmr
Dec 23 2016 18:24
@Marianissimus haha cool. Let me try that. Thank you so much
CamperBot
@camperbot
Dec 23 2016 18:24
ankit-prgmr sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:warning: ankit-prgmr already gave marianissimus points
Ralph Nahra
@Rallph
Dec 23 2016 19:43
Hey guys I'm having trouble finding some resources on tweet buttons, specifically pre-populating it with page content
AJ Robisch
@AJFelidae
Dec 23 2016 19:55
Hey, i've started work on my random quote machine (not polished at all yet). Could someone explain why clicking the button doesn't do anything? https://codepen.io/Aviendhaast/pen/xRNGyP
I can never seem to get jquery on click events to work
at least with html/css changes
Rami
@RNwebdk
Dec 23 2016 20:04
hi, i am looking for a vertical menu where you can slide by finger and by clicking on arrow up and down. any suggestions ?
Jesse
@lookinahead13
Dec 23 2016 20:14
Question: for the Portfolio page, should we have learned about the scrolling nav bar and fixed images that are used in the example up to this point? I'm just wondering if I had missed some things or if it's just "wingin'-it"
Martine Ross
@moi238
Dec 23 2016 20:21
@lookinahead13 the scrolling navbar isn't in any of the tutorials up to that point it's more of a googling to find out how to do those things
Nathan Hannig
@nathanhannig
Dec 23 2016 20:56
Can someone with CSS knowledge help explain why my inside divs can't match the total width of the parent div? Otherwise it breaks the inside div to a new line.... I want two inside divs per row. My inside div is 302px and outside div is 610px. So it is under the total wisth if you have two per row. http://codepen.io/breakpoint/pen/mOgvQo?editors=0110
Ryan Holinshead
@rholinshead
Dec 23 2016 21:03
I'm doing the jQuery challenge "Use jQuery to Modify the Entire Page" and it looks like when trying to submit with a typeError, the error is not shown in the phone screen. Fixing the error in the code so that the code is correct will then perform the correct animation in the phone screen but then the old type error is displayed in the phone screen despite the error not being present anymore
For example, I added "$("body").addClas("animated hinge");" and then tried to submit. It did not say there was a typeError or anything, just the red x under run tests. Note that addClas should be addClass. Changing it to addClass and letting the animated run correctly hinges but then the typeError "TypeError: $(...).addClas is not a function" is displayed in the screen even though it is no longer an error
Arin
@arinarjani
Dec 23 2016 21:53

@breakpoint25 I used flexbox in the container div to achieve this: http://i.imgur.com/e89ctPB.png

Is that what you wanted? Edited the height of each color to get rid of the bottom "gap", then made the container wider and made each color wider to fix the side "gap"

marko bogdanovic
@okramovic
Dec 23 2016 21:58
hi, any ideas whats wrong here? my mozilla s console says blocked loading mixed active content
its the weather forecast thing
https://codepen.io/okramovic/pen/eBaZLg?editors=1011
Arin
@arinarjani
Dec 23 2016 22:07
@okramovic line 11 has a strange URL. That might be something
marko bogdanovic
@okramovic
Dec 23 2016 22:09
@arinarjani it was someones suggestion to use proxy, now its just https with OWM but that doesnt make it work..
marko bogdanovic
@okramovic
Dec 23 2016 22:21
@arinarjani ehm, i progressed now and it shows empty data "{}" a bit stupid question, but how would you suggest to test if it works? because i believe it is working one
Arin
@arinarjani
Dec 23 2016 22:23
@okramovic I think you have to wait 10 minutes before trying to get information again. This is because you are using a free account.
@okramovic I used http://simpleweatherjs.com/ and did not have the 10 minute wait times
marko bogdanovic
@okramovic
Dec 23 2016 22:25
so if i ask for data twice in 10 minutes, i get no data on second request?? is that why its empty??
Arin
@arinarjani
Dec 23 2016 22:26
I think so. In the console it is saying refused connection
alpox
@alpox
Dec 23 2016 22:28
@breakpoint25 take a look at http://www.w3schools.com/cssref/css3_pr_box-sizing.asp this may help you out. Also go sure that there is no padding defined on the outside div and no margin on the inside div if you want them to match petfectly
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 23 2016 22:33
someone help me with tic tac toe ~
https://gist.github.com/Mr-Kumar-Abhishek/161b022b6f0047e60394b0c920bc1a3d am I doing something wrong with the judge function ??
marko bogdanovic
@okramovic
Dec 23 2016 22:37
@arinarjani thanks for making this clear.. im now trying to use another weather service which allows for 10 calls in a minute which is much better for my needs:)
CamperBot
@camperbot
Dec 23 2016 22:37
okramovic sends brownie points to @arinarjani :sparkles: :thumbsup: :sparkles:
:cookie: 290 | @arinarjani |http://www.freecodecamp.com/arinarjani
alpox
@alpox
Dec 23 2016 22:40
@Mr-Kumar-Abhishek as far as i see you loop only through the winroutes. dont you have to test boardFill for the actual values because winroutes define only indices?
Also, you test for 1 OR 2 which makes one route win if there are stones set, no matter if they are mixed or not
@okramovic why not the suggested openweatherdata?
I dont think there is any limit except for forecast stuff
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 23 2016 22:45
@alpox thanks :)
CamperBot
@camperbot
Dec 23 2016 22:45
mr-kumar-abhishek sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 710 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Dec 23 2016 22:45
@Mr-Kumar-Abhishek np :)
marko bogdanovic
@okramovic
Dec 23 2016 22:50
it says you can send one request in ten minutes. since i had little clue what i was doing while requesting data from OWM i decided to try another suggested service so that i know that it does send me data more often then each 10 minutes. i used weather underground and im finally successfull in this first step to receive data
alpox
@alpox
Dec 23 2016 22:51
alright, but i never heard about these 10 min. for other people here it used to work fine
you probably used the wrong endpoint or run into another issue?
alpox
@alpox
Dec 23 2016 22:57
@okramovic what i see is that you use navigator to retrieve the ip. that most likely brought you into troubles eith ow
marko bogdanovic
@okramovic
Dec 23 2016 23:00
im not sure i far enough to understand what you mean.. could you explain in more basic words please?
alpox
@alpox
Dec 23 2016 23:05
the mavigator api works only if you access codepen with https. Otherwise you get an error or no location at all. But if you access codepen with https, you have to access openweather with https. But owm has no plan for free https access. You are forced to use http for it. Therefore you cannot use navigator to get the current location. you need another open ip location api.
Thats how most people here have done it
use http, for codepen and owm, and an external ip location api.
marko bogdanovic
@okramovic
Dec 23 2016 23:13
aha, now i think i do get it. how about using crossover.me or how was it? it was suggestion from other guys but it didnt help. could some proxy help in this problem? using navigator and https but just modifying the OWM link i send requests to?
alpox
@alpox
Dec 23 2016 23:14
crossorigin.me
That wont help you in this case
That is to circumvent the CORS (cross origin request problem, which you dont run into.
cross origin request sharing*
marko bogdanovic
@okramovic
Dec 23 2016 23:17
hm, thanks a lot!
alpox
@alpox
Dec 23 2016 23:17
np :)
marko bogdanovic
@okramovic
Dec 23 2016 23:25
but still one thing is wierd - i wasnt using geolocation in my API request, just ID of some city and it didnt work either. navigator API shouldnt be the problem then, no?
Brandon
@chunb
Dec 23 2016 23:45
I'm working on the simon game, and the "removeClass" isn't working. I need it to stop the button glow for the simon sequence: http://codepen.io/bchun/pen/RoOqZw?editors=0010
@okramovic Instead of using navigator, try using this: http://ip-api.com/json. It worked great for my Weather App, and you don't need that "https" at the beginning of your url
alpox
@alpox
Dec 23 2016 23:47
@okramovic Your code for the owm api call was never entered, since the callback to getCurrentPosition was not fired at all.
And most people use the location api which @chunb suggests you.
Jesse
@lookinahead13
Dec 23 2016 23:53
@moi238 Thank-You!
CamperBot
@camperbot
Dec 23 2016 23:53
:cookie: 151 | @moi238 |http://www.freecodecamp.com/moi238
lookinahead13 sends brownie points to @moi238 :sparkles: :thumbsup: :sparkles:
Brandon
@chunb
Dec 23 2016 23:59
Okay, figured it out. In setTimeout, the function you call can't accept any variables. :|