These are chat archives for FreeCodeCamp/HelpFrontEnd

3rd
Jun 2017
r0ulito
@r0ulito
Jun 03 2017 00:01
@GingerJava beware /!\ https://codepen.io/G1nger/full/gWyvNp/ the text is not in the target cloud ;)
Victor Chastinet
@VChastinet
Jun 03 2017 00:02
@ravikishorethella thanks, i'll try the easy way :D
CamperBot
@camperbot
Jun 03 2017 00:02
vchastinet sends brownie points to @ravikishorethella :sparkles: :thumbsup: :sparkles:
:cookie: 374 | @ravikishorethella |http://www.freecodecamp.com/ravikishorethella
r0ulito
@r0ulito
Jun 03 2017 00:03
@GingerJava the switch celcius/fareinheit doesn't work ;)
Victor Chastinet
@VChastinet
Jun 03 2017 00:06
@GingerJava i'ts saying they can't find me here in Brazil :(
Tyler Johnson
@tylerjj17
Jun 03 2017 00:41
Hello im working on the random quote generator and im using arrays for the quotes. How could i have it so it doesnt repeat any quotes?
https://codepen.io/tylerjj17/full/EXYEOo/
Gulsvi
@gulsvi
Jun 03 2017 00:42
@R0ulito You can use | vertical bar in regular expressions to say "or", but I think for that example, encodeURIComponent() is what you want instead of encodeURI() - then the .replace may not be needed?
@tylerjj17 Y (".quote").text(); will tell you what quote you currently have on the page. You can compare that with the randomQuote variable - if it's the same, call getQuote() again and get another random quote.
Jody LeCompte
@jodylecompte
Jun 03 2017 00:44
@tylerjj17 I would jus use a random number between 0 and length of array - 1
It will repeat sometimes, but its enough I think
Joshua
@jfc246
Jun 03 2017 00:56

can anyone give me their thoughts on this?

https://codepen.io/jfc246/pen/rrRNgp

if anyone would like help email at the address
Ravi Kishore Thella
@ravikishorethella
Jun 03 2017 01:14
@VChastinet :thumbsup:
jmnietert
@jmnietert
Jun 03 2017 01:44
can anyone help with some js
fdemaa
@fdemaa
Jun 03 2017 01:56
@jfc246 make it responsive
Hammad
@newnewb
Jun 03 2017 02:04
how do i get over this error in code pen?
XMLHttpRequest cannot load https://api.darksky.net/forecast/(hiding my api key)/(hiding my coords). No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://codepen.io' is therefore not allowed access.
Ghost
@ghost~59209a78d73408ce4f6102e8
Jun 03 2017 02:28
@jfc246 try putting a margin on the top of your body element to keep your nav from overlapping your first div
Ken Haduch
@khaduch
Jun 03 2017 02:48
@jmnietert - did you get help with your JS question?
Jhon
@JhonattasFerreira
Jun 03 2017 03:02
image.png
Hi, I have a problem. I can not put a h1 tag in the center of the screen.
I already put the "text-center" class and it still did not work. Anyone have any tips?
<div class="container-fluid">
   <div class="row">
        <h1 class="text-center">About</h1>
    </div>
</div>
Miguel T Rivera
@mtrivera
Jun 03 2017 03:19
@JhonattasFerreira Are you using Bootstrap?
Jhon
@JhonattasFerreira
Jun 03 2017 03:21
@mtrivera
Yes, I'm using bootstrap. Figure out what the problem was. I had forgotten the "col" class. Ty
CamperBot
@camperbot
Jun 03 2017 03:21
jhonattasferreira sends brownie points to @mtrivera :sparkles: :thumbsup: :sparkles:
:cookie: 313 | @mtrivera |http://www.freecodecamp.com/mtrivera
Harutyun Galadzhyan
@TheOriginalHush
Jun 03 2017 03:46
Can someone tell me why the i varibale stays at 5 in a for loop?
Pedro Coelho
@PedroAMCoelho
Jun 03 2017 03:50
hi people, how can i import fonts like neosansregular to my projects?
Pedro Coelho
@PedroAMCoelho
Jun 03 2017 03:55
@SkyC0der hi sky, are you here?
Ken Haduch
@khaduch
Jun 03 2017 03:59
@PedroAMCoelho - does this font exist on the web in a usable format? Like in the Google fonts?
Pedro Coelho
@PedroAMCoelho
Jun 03 2017 04:00
@khaduch yes, i just saw it in a website. take a look at wow, a page just about me - https://web.archive.org/web/20100917033359/http://adhamdannaway.com/about/
i dont know how these guys use these fonts
Ken Haduch
@khaduch
Jun 03 2017 04:03
@TheOriginalHush - you are using a for loop to kick off your ajax requests, but the requests are processed asynchronously, and the results returned some time later in the sequence. The value of i is incremented with each loop in the for loop, and ends up at 5. It retains that value as each return is made. I think that if you change the var i to let i (using a new ES6 feature) it will work, it will capture the value of the variable with each iteration of the loop. You can read about the effect that you're seeing now in this article: http://javascriptissexy.com/understand-javascript-closures-with-ease/ - in the section "Closures Gone Awry".
Ken Haduch
@khaduch
Jun 03 2017 04:09
@PedroAMCoelho - it looks like they might have those fonts loaded locally on their own site - some fonts have to be purchased. Your easiest route to use is to go to the google fonts page and find something similar to that font style and use that. https://fonts.google.com - you can look at the fonts there and select any that you want to use. You might find something of a similar style.
Gulsvi
@gulsvi
Jun 03 2017 04:12
@PedroAMCoelho Looks like you can access that font here: https://github.com/RebelAlliance/www.rebelalliance.se/tree/master/fonts
But https://fonts.google.com will be easiest to use
Aata-allah
@Atalaa
Jun 03 2017 04:23

can somebody explain to me why i dont have the shadow hover effect for my "new quote" button please ?
```<div class = "container-fluid">

<h1>Random Quote Machine</h1>
<p id = "description">
Here are some of the best known     cinematographic quotes. Will you succeed in guessing them ?
</p>
<div class="text-center w3-container">
  <button type="button" class="btn w3-btn w3-black">New Quote</button>
</div>    
<div class="quotes">
  <h5 id="chuck"></h5>
</div>

```

can somebody explain to me why i dont have the shadow hover effect for my "new quote" button please ?
<div class = "container-fluid">

    <h1>Random Quote Machine</h1>
    <p id = "description">
    Here are some of the best known     cinematographic quotes. Will you succeed in guessing them ?
    </p>
    <div class="text-center w3-container">
      <button type="button" class="btn w3-btn w3-black">New Quote</button>
    </div>    
    <div class="quotes">
      <h5 id="chuck"></h5>
    </div>
tom42s
@tom42s
Jun 03 2017 04:30
Hey just doing the random quote project, I've got it working but it seems really slow. Anyone know why? https://codepen.io/tom42s/pen/JJPzgZ
Botenga
@Botenga
Jun 03 2017 04:34
hey I need some help with my protfolio project I am having issues add the special characters </> in the text.
also my headshot image is not resizing even though i have img-responsive
Markus Ivancsics
@ivancsicsmarkus
Jun 03 2017 04:42
@Botenga What’s wrong? You are adding that </> to your breaktwo element.
@Botenga The image responsive is not working because you added 130 px margin on the left.
Botenga
@Botenga
Jun 03 2017 04:43
yeah im trying to add it to my breakone and two
my breaks are both hr's
alright let me try taking it out and see if img-resp works
Markus Ivancsics
@ivancsicsmarkus
Jun 03 2017 04:45
@Botenga I think it won’t really, because you used a lot of other extra styling… You have to use bootstrap at everywhere in layouts, or build on your own, but you can’t mix them.
Botenga
@Botenga
Jun 03 2017 04:47
@ivancsicsmarkus are you talking about the img
Markus Ivancsics
@ivancsicsmarkus
Jun 03 2017 04:47
@Botenga Everything else. You use a lot of margins.
@Botenga And width and others...
Botenga
@Botenga
Jun 03 2017 04:48
isnt there a way just to make the whole page responsive
Markus Ivancsics
@ivancsicsmarkus
Jun 03 2017 04:48
@Botenga Bootstrap use those too so you break bootstrap’s settings and it won’t fit.
@Botenga There is.
Botenga
@Botenga
Jun 03 2017 04:49
@ivancsicsmarkus so your saying I
should go back and put my margins and width in bootstrap and the img-response will work.
Markus Ivancsics
@ivancsicsmarkus
Jun 03 2017 04:50
@Botenga What do you mean: put my margins and width in bootstrap?
@Botenga I say you should use bootstrap for your layout.
Botenga
@Botenga
Jun 03 2017 04:52
@ivancsicsmarkus can you elaborate more on bootstrapm layout
you mean use only bootstrap.
Anthony Moore
@GigaHaise
Jun 03 2017 04:54
hey guys
Adam Bohannon
@abohannon
Jun 03 2017 04:54
Anyone else having problems getting this to run? https://codepen.io/freeCodeCamp/full/bELRjV
Markus Ivancsics
@ivancsicsmarkus
Jun 03 2017 04:54
@Botenga Yes. But for colors and things like this, you can use your own css.
Anthony Moore
@GigaHaise
Jun 03 2017 04:54
I was wondering if someone could answer something about the TwitchTv API
Markus Ivancsics
@ivancsicsmarkus
Jun 03 2017 04:55
@abohannon Yes. Change ipinfo’s URL to start with https!
Adam Bohannon
@abohannon
Jun 03 2017 04:55
@ivancsicsmarkus thanks!
Anthony Moore
@GigaHaise
Jun 03 2017 04:55
I noticed in the codepen example, even if a channel is offline it still grabbed the channel's thumbnail and link. But when I call the object of a channel that isn't currently streaming, it comes back null as expected with no thumbnail or link.
Botenga
@Botenga
Jun 03 2017 04:56
@ivancsicsmarkus alright im going to try and take out my margins and widths and heights and use them in the bootstrap layout instead
Markus Ivancsics
@ivancsicsmarkus
Jun 03 2017 04:56
@GigaHaise You can get stream and channel info.
Anthony Moore
@GigaHaise
Jun 03 2017 04:57
you can get the channel info even if its not streaming live?
Markus Ivancsics
@ivancsicsmarkus
Jun 03 2017 04:57
@GigaHaise Yes.
Anthony Moore
@GigaHaise
Jun 03 2017 04:59
ah I see
thanks
Ravi Kishore Thella
@ravikishorethella
Jun 03 2017 05:02
Anthony Moore
@GigaHaise
Jun 03 2017 05:02
looks pretty cool
Ravi Kishore Thella
@ravikishorethella
Jun 03 2017 05:03
@GigaHaise :thumbsup:
Ankit Padia
@InsaneSkull
Jun 03 2017 05:04
@ravikishorethella :+1:
Ravi Kishore Thella
@ravikishorethella
Jun 03 2017 05:05
@InsaneSkull @GigaHaise thanks
CamperBot
@camperbot
Jun 03 2017 05:05
ravikishorethella sends brownie points to @insaneskull and @gigahaise :sparkles: :thumbsup: :sparkles:
:cookie: 261 | @gigahaise |http://www.freecodecamp.com/gigahaise
:cookie: 368 | @insaneskull |http://www.freecodecamp.com/insaneskull
Zach Berwaldt
@zberwaldt
Jun 03 2017 05:11
Hello, I am lost on this project. I've done the Read and Search but haven't really found anything that helps
Anthony Moore
@GigaHaise
Jun 03 2017 05:13
it looks like you got geolocation working but no weather api
darksky is what you'll want
Zach Berwaldt
@zberwaldt
Jun 03 2017 05:13
That is what I am using
But because of security I get a "Allow no cross origin" or something
Anthony Moore
@GigaHaise
Jun 03 2017 05:14
ohh yeah, now I see it
I had an error like that too
so you'll want to use ajax to fetch the weather object
Zach Berwaldt
@zberwaldt
Jun 03 2017 05:15
Access-Control-Allow-Origin...I ran into this yesterday so I switched to the other one, but because the other API is http it doesn't mesh with codepen so now I'm back to darksky
Anthony Moore
@GigaHaise
Jun 03 2017 05:16
you just need to specify the type of request as "GET"
Zach Berwaldt
@zberwaldt
Jun 03 2017 05:16
I did that also, this time I'm trying to use the fetch API
Anthony Moore
@GigaHaise
Jun 03 2017 05:17
fetch API...hmm
Zach Berwaldt
@zberwaldt
Jun 03 2017 05:18
I'll go set up some AJAX real quick
Anthony Moore
@GigaHaise
Jun 03 2017 05:19
alright sounds good
Zach Berwaldt
@zberwaldt
Jun 03 2017 05:25
Should I resend the link?
Anthony Moore
@GigaHaise
Jun 03 2017 05:26
nah I got it
Zach Berwaldt
@zberwaldt
Jun 03 2017 05:26
Cool, thank you for your help @GigaHaise
CamperBot
@camperbot
Jun 03 2017 05:26
spiredarc sends brownie points to @gigahaise :sparkles: :thumbsup: :sparkles:
:cookie: 262 | @gigahaise |http://www.freecodecamp.com/gigahaise
Anthony Moore
@GigaHaise
Jun 03 2017 05:27
no problem
now, I notice you aren't using jquery
that just a preference?
Zach Berwaldt
@zberwaldt
Jun 03 2017 05:28
50: I don't know it that well, 50: I figured I should learn to do it the hard way
Anthony Moore
@GigaHaise
Jun 03 2017 05:28
I see
so you'll want to follow this to get the ajax set up vanilla
I'm not too familiar with the vanilla ajax myself
Zach Berwaldt
@zberwaldt
Jun 03 2017 05:31
Thank you, regardless @GigaHaise
CamperBot
@camperbot
Jun 03 2017 05:31
spiredarc sends brownie points to @gigahaise :sparkles: :thumbsup: :sparkles:
:warning: spiredarc already gave gigahaise points
Anthony Moore
@GigaHaise
Jun 03 2017 05:33
if that doesn't help, I can show you how I did it
Zach Berwaldt
@zberwaldt
Jun 03 2017 05:34
I'll let you know, I should probably go read up on AJAX
Anthony Moore
@GigaHaise
Jun 03 2017 05:34
alright sounds good
Henry
@GitHub-Henry
Jun 03 2017 06:03
@spiredarc if you are learning AJAX you might also read up on promises, they go hand in hand
Johnny
@jtan3
Jun 03 2017 06:05
@GitHub-Henry is promises something we should all learn?
Henry
@GitHub-Henry
Jun 03 2017 06:05
if you are doing AJAX, then you should probably learn about promises
@jtan3 did you do the weather app yet?
Johnny
@jtan3
Jun 03 2017 06:05
@GitHub-Henry i know getJSON
im on the pomodoro clock
Henry
@GitHub-Henry
Jun 03 2017 06:06
what api did you use for weather?
Johnny
@jtan3
Jun 03 2017 06:06
weather underground
Nasridean
@Nasridean
Jun 03 2017 06:08
Hi, everyone! How to install API?
Henry
@GitHub-Henry
Jun 03 2017 06:08
@jtan3 look at this code using promises to do 2 AJAX calls, 1 to get location, the other to get weather. look at the console to see the results. what do you think? https://codepen.io/fccHenry/pen/rwBOgp?editors=0010
Nasridean
@Nasridean
Jun 03 2017 06:09
I'm stuck on weather project.
h1tag
@h1tag
Jun 03 2017 06:09
@Nasridean you don't need to install it, you just need a request URL
Nasridean
@Nasridean
Jun 03 2017 06:10
@h1tag could you show some example?
Henry
@GitHub-Henry
Jun 03 2017 06:10
@Nasridean check out my weather code to get an idea of how to get location and weather data.
data is in the console, but you could do whatever you want with the data once you get it. it is the heart of the weather app.
Nasridean
@Nasridean
Jun 03 2017 06:12
@GitHub-Henry could you give the link to your code?
Henry
@GitHub-Henry
Jun 03 2017 06:12
23:08 has the link
you need to look at the console to see the data
both location and weather data are in the console
abraham anak agung
@padunk
Jun 03 2017 06:13
@Nasridean API
Johnny
@jtan3
Jun 03 2017 06:18
@GitHub-Henry i guess i should add promises to my to-do-list
Henry
@GitHub-Henry
Jun 03 2017 06:18
how does using promises compare to not using them?
think about your code to do the same thing without promises.
Nasridean
@Nasridean
Jun 03 2017 06:19
@GitHub-Henry that's where the case is, that's why I can't see the weather. The browser blocks it by default showing a danger message in the console.
Henry
@GitHub-Henry
Jun 03 2017 06:20
the msg on mine says use the browser console cuz the weather data is to large
bottom line for me is, if you are gonna do ajax calls, you should really consider doing them with promises.
Henry
@GitHub-Henry
Jun 03 2017 06:25
perhaps i'm the only one that thinks promises are cool
Nasridean
@Nasridean
Jun 03 2017 06:27
Could anyone explain me in a few words what promises are?
Clinton Shepard
@Taslack
Jun 03 2017 06:27
@GitHub-Henry No you are not.
Johnny
@jtan3
Jun 03 2017 06:28
should a person starting the weather project even dive into promises?
Henry
@GitHub-Henry
Jun 03 2017 06:28
@Taslack don't hear much about them in these parts, but they really should be when ajax projects start
@jtan3 i think a person should learn ajax and promises about the same time, cuz the work together very well
@jtan3 like shoes and shoe laces, they really go together
Clinton Shepard
@Taslack
Jun 03 2017 06:30
Ya it should be in taught or mentioned in the jquery/ajax section. But I think it is realtively kind of a newish idea for it to be in there.
Johnny
@jtan3
Jun 03 2017 06:30
@GitHub-Henry oh.
Clinton Shepard
@Taslack
Jun 03 2017 06:32
But it does not mean that a person should not go and learn it on their own.
Henry
@GitHub-Henry
Jun 03 2017 06:32
@Taslack maybe they will add it to the new version of fcc, currently in beta
Johnny
@jtan3
Jun 03 2017 06:33
just from reading the docs you guys learned promises?
Clinton Shepard
@Taslack
Jun 03 2017 06:33
Possibly, would not be a bad thing. Webdev moves so damn fast with new and improved tech.
@jtan3 Yes, very handy to know.
Henry
@GitHub-Henry
Jun 03 2017 06:34
@jtan3 here's a link i like https://www.promisejs.org/
Johnny
@jtan3
Jun 03 2017 06:34
@GitHub-Henry thanks
CamperBot
@camperbot
Jun 03 2017 06:34
jtan3 sends brownie points to @github-henry :sparkles: :thumbsup: :sparkles:
:cookie: 340 | @github-henry |http://www.freecodecamp.com/github-henry
Clinton Shepard
@Taslack
Jun 03 2017 06:34
@jtan3 Just about to send you what @GitHub-Henry sent you.
Johnny
@jtan3
Jun 03 2017 06:35
@Taslack thanks
CamperBot
@camperbot
Jun 03 2017 06:35
jtan3 sends brownie points to @taslack :sparkles: :thumbsup: :sparkles:
:cookie: 356 | @taslack |http://www.freecodecamp.com/taslack
Henry
@GitHub-Henry
Jun 03 2017 06:35
it really is good stuff
Clinton Shepard
@Taslack
Jun 03 2017 06:35
It is what actually helped me to wrap my head around asyncronous calls.
AKA jquery
Henry
@GitHub-Henry
Jun 03 2017 06:36
@Taslack yeah, i think promises with jQuery really should go together
Clinton Shepard
@Taslack
Jun 03 2017 06:37
@GitHub-Henry Ya you are exactly right, took me a good 4 days to realize my data was just sitting there because it was retrieved after all my code was exicuted.
Henry
@GitHub-Henry
Jun 03 2017 06:38
at this link https://codepen.io/fccHenry/pen/rwBOgp?editors=0010 i have the same promise done twice, once without jQuery and once with jQuery. the jQuery version requires so much less code
Clinton Shepard
@Taslack
Jun 03 2017 06:38
@GitHub-Henry And that is a constant question here as well for the weather app.
Henry
@GitHub-Henry
Jun 03 2017 06:40
@Taslack takes time to understand promises, but i think it's well worth the time
Clinton Shepard
@Taslack
Jun 03 2017 06:41
@GitHub-Henry LOL, oh yes. Just wish I didnt waste 4 days because I had no idea about them. I happened on promises on accident to with a duckduckgo search.
Pedro Coelho
@PedroAMCoelho
Jun 03 2017 06:42
hey guys, i need everybody's opinion on a thing
Clinton Shepard
@Taslack
Jun 03 2017 06:42
@PedroAMCoelho Would you accept one opinion on something?
Pedro Coelho
@PedroAMCoelho
Jun 03 2017 06:43
do you think my section 2's about is too big ? I mean, i should cut some parts?
Henry
@GitHub-Henry
Jun 03 2017 06:43
@Taslack i found them cuz i want to learn promises, generators, and deconstructors. i still need to figure out generators and deconstructors
Pedro Coelho
@PedroAMCoelho
Jun 03 2017 06:43
maybe i wrote too much
@Taslack sure, could you take a look and give ur opinion? :)
Clinton Shepard
@Taslack
Jun 03 2017 06:45
@PedroAMCoelho No looks fine, if you want to shorten it then add some interests then you can. But not necassary at this point.
@PedroAMCoelho You will/should be constentantly evolving that section.
Pedro Coelho
@PedroAMCoelho
Jun 03 2017 06:46
@Taslack do you think ppl will have patience to read until the end? hehe
Martialis39
@Martialis39
Jun 03 2017 06:47
Hi! Wanted some help! For some reason my JS is not working, maybe a different set of eyes is useful
Pedro Coelho
@PedroAMCoelho
Jun 03 2017 06:47
@Taslack yes, i will :) my fear is too much content there for one to read
Martialis39
@Martialis39
Jun 03 2017 06:47
let editor = document.getElementById("editorSection");
function submitGridSide(){

  var input = document.getElementById('grid-size');

  if (input.value > 0 ) {

    GRIDSIZE = parseInt(input.value);
    console.log(GRIDSIZE*CELL_SIZE + "px");
    editor.style.width = GRIDSIZE*CELL_SIZE + "px";
    console.log(editor.style.width);
    editor.style.height = GRIDSIZE*CELL_SIZE + "px";
    editor.setAttribute("style","border:2px solid black");
    input.value = "0";

    for (var i = 0; i < GRIDSIZE; i++) {
      for (var j = 0; j < GRIDSIZE; j++) {

        var c = new Cell(i, j);
        GRID.push(c);
        c.draw();

      }
    }
    console.log(GRID);
  } else if (input.value < 0) {
    input.value = "0";
  }
}
Clinton Shepard
@Taslack
Jun 03 2017 06:47
@PedroAMCoelho Ya they will, its short and quick. But dont spend too much time on it unless you are actually applying for jobs at this point.
Martialis39
@Martialis39
Jun 03 2017 06:47
for some reason I cannot change the width and height as id like
or as I am imagining it
Pedro Coelho
@PedroAMCoelho
Jun 03 2017 06:48
@Taslack i will apply in the next 6 months - 1 year
Clinton Shepard
@Taslack
Jun 03 2017 06:49
@PedroAMCoelho Looks good, fill out the page then move onto the next challenge. ;-)
Pedro Coelho
@PedroAMCoelho
Jun 03 2017 06:49
@Taslack i will talk about my skills in the next section
Clinton Shepard
@Taslack
Jun 03 2017 06:51
@PedroAMCoelho Your design aspects are very good, its going to be a very nice looking page.
Pedro Coelho
@PedroAMCoelho
Jun 03 2017 06:55
@Taslack thanks clint :D I confess i was having a hard time to find a cool design. I'm glad you liked
CamperBot
@camperbot
Jun 03 2017 06:55
pedroamcoelho sends brownie points to @taslack :sparkles: :thumbsup: :sparkles:
:cookie: 357 | @taslack |http://www.freecodecamp.com/taslack
Martialis39
@Martialis39
Jun 03 2017 07:02
HEllo all, could I please get some help with this? I am attempting to set the width and height with JS, but it doesnt work https://codepen.io/martialis39/pen/gROWZo
István Kozma
@Manfred28
Jun 03 2017 07:03
@GitHub-Henry FYI, you can do it this way too: https://codepen.io/Manfred28/pen/RgwVqZ?editors=0010
Clinton Shepard
@Taslack
Jun 03 2017 07:18
@Martialis39 So are you trying create a box? So when I enter 4, I get a 4 x 4 grid?
Martialis39
@Martialis39
Jun 03 2017 07:27
Yup that is the goal
but its not really working, I tried setting the height and width manually to say 100px each and enter a value of 10
but even that doesnt work, I cant get all my divs to line up, there is whitespace between the rows
ok scratch my last remark, I used float and it worked
István Kozma
@Manfred28
Jun 03 2017 07:33
you might want to make all that css as a css class, and simply add the class to the element
well, maybe not all that, but there is no reason for the border to be in js
Martialis39
@Martialis39
Jun 03 2017 07:34
ok I actually got it to work
I have no idea why it works now :D
István Kozma
@Manfred28
Jun 03 2017 07:36
seems to be the same to me
Karan Nandha
@karann7
Jun 03 2017 07:37
can you guys please check my site out and let me know suggestions for improvement
https://karann7.github.io/barber_blues/
Clinton Shepard
@Taslack
Jun 03 2017 07:40
@Martialis39 Still not working for me, but what you have to look at is how you adding the divs to you html. As you have it now you are just creating a line of divs...and not defining a row.
Martialis39
@Martialis39
Jun 03 2017 07:42
@Taslack I changed the Cell CSS To float:right
and that did the trick
and also I set the box sizing to border box for the cells
here is the updated code
Clinton Shepard
@Taslack
Jun 03 2017 07:45
@Manfred28 Booking an appoint opens up a different tab....giving the feeling of going to a seperate page. You wanna avoid that. Maybe have a hidden div that unhides when you click on the Book Appointment button.
István Kozma
@Manfred28
Jun 03 2017 07:46
?
@Taslack are you sure you meant to send that to me?
Clinton Shepard
@Taslack
Jun 03 2017 07:46
@karann7 When selecting a service, I can select multiple....I do not believe this is intended.
@Manfred28 Oops nope.
@karann7 Booking an appoint opens up a different tab....giving the feeling of going to a seperate page. You wanna avoid that. Maybe have a hidden div that unhides when you click on the Book Appointment button.
Karan Nandha
@karann7
Jun 03 2017 07:47
@Taslack what do you mean
@Taslack the appointment has to be made on a different website lol
Clinton Shepard
@Taslack
Jun 03 2017 07:48
@karann7 Have it open in the same window, instead of a different tab.
Karan Nandha
@karann7
Jun 03 2017 07:48
@Taslack i still want people to have the main site open don't want to redirect them entierly
Clinton Shepard
@Taslack
Jun 03 2017 07:50
@karann7 If you like, but I will tell you as a user.....thats annoying.
István Kozma
@Manfred28
Jun 03 2017 07:51
@Martialis39 for the record, setAttribute was working as intended in your example, so you could have just done
"editor.setAttribute("style","border:2px solid black; width: " + size + "; height: " + size);"
but its weird that element.style.width was not working
Karan Nandha
@karann7
Jun 03 2017 07:51
@Taslack okay noted
Martialis39
@Martialis39
Jun 03 2017 07:52
@Manfred28 Thanks! ; ) Yeah! Weird indeed
CamperBot
@camperbot
Jun 03 2017 07:52
martialis39 sends brownie points to @manfred28 :sparkles: :thumbsup: :sparkles:
:cookie: 164 | @manfred28 |http://www.freecodecamp.com/manfred28
Clinton Shepard
@Taslack
Jun 03 2017 07:52
Probably the primary reason to come to the site is to book an appointment. You want to focus your site around that.
Raspal Seni
@raspal
Jun 03 2017 07:52
@karann7 see if you like this for appointments: http://easyappointments.org/
Clinton Shepard
@Taslack
Jun 03 2017 07:53
@karann7 You appointment booking flows nice....its just getting there is tedious.
@karann7 What @raspal has is a great example.
István Kozma
@Manfred28
Jun 03 2017 07:54

although I got it working by doing
var size = GRIDSIZE * CELL_SIZE + "px";
editor.style.width = size;

instead of calculating it in the same line

Martialis39
@Martialis39
Jun 03 2017 07:55
@Manfred28 Ok, just for my edification
Karan Nandha
@karann7
Jun 03 2017 07:55
@raspal i can't change how the appointments are booked for this client they have their own system with square and that's what they want to keep @Taslack
Martialis39
@Martialis39
Jun 03 2017 07:55
do you have any idea why that may be the case?
István Kozma
@Manfred28
Jun 03 2017 07:57
haha
Clinton Shepard
@Taslack
Jun 03 2017 07:57
@karann7 The site looks good, scales nicely. Only thing I would change is opening in a different tab.
István Kozma
@Manfred28
Jun 03 2017 07:57
yeah finally figured it out
your setAttribute was resetting the other things
you should use either the .style syntax or use setAttribute at once for all values
basically
editor.setAttribute("style","border:2px solid black");
this was resetting every other style you set up beforehand
that was educational >_>
@Martialis39 (pinged in case you only check this much later)
Karan Nandha
@karann7
Jun 03 2017 08:01
@Taslack gotcha thanks! I have to fix the background color for the 3 sections and add more images in the carousel and i think i should be good
CamperBot
@camperbot
Jun 03 2017 08:01
karann7 sends brownie points to @taslack :sparkles: :thumbsup: :sparkles:
:cookie: 358 | @taslack |http://www.freecodecamp.com/taslack
Martialis39
@Martialis39
Jun 03 2017 08:01
@Manfred28 Wow thats educational indeed! Thanks a bunch!
CamperBot
@camperbot
Jun 03 2017 08:01
martialis39 sends brownie points to @manfred28 :sparkles: :thumbsup: :sparkles:
:warning: martialis39 already gave manfred28 points
codebook92
@codebook92
Jun 03 2017 08:26
check out the new project its not responsive yet ill fix it soon https://codepen.io/codebook92/full/YVoKpa/
@All provide your feed backs
Cole Chambers
@colechamberss
Jun 03 2017 08:27
Hey guys, just finished my tribute page, I'd love to hear feedback! https://codepen.io/colechamberss/full/qmvjqB/
codebook92
@codebook92
Jun 03 2017 08:33
@colechamberss nice work
link at last
@colechamberss fanpage link not working
Ken Haduch
@khaduch
Jun 03 2017 08:46
@colechamberss - it looks pretty good on mobile. The link doesn't click, but I cannot log in to codepen on my phone to check that code at the moment.
Saeed Jassani
@saeedjassani
Jun 03 2017 08:53
hello, i just started the Weather app project and the sample pen provided is not working!
getting this error in JS console Mixed Content: The page at 'https://codepen.io/freeCodeCamp/full/bELRjV/' was loaded over HTTPS, but requested an insecure script 'http://ipinfo.io/json?callback=angular.callbacks._0'. This request has been blocked; the content must be served over HTTPS.
any help/hints?
Jorge
@OrangeKulture
Jun 03 2017 08:55
@saeedjassani codepen is not gonna let you load the info over http ..
Saeed Jassani
@saeedjassani
Jun 03 2017 08:55
yeah, but the pen given as reference by fCC is using it
Jorge
@OrangeKulture
Jun 03 2017 08:55
u either use a proxy, or find an API who sends info over https
Long Nguyen
@longnt80
Jun 03 2017 08:56
@saeedjassani change to https://ipinfo.io/json?callback=angular.callbacks._0
Jorge
@OrangeKulture
Jun 03 2017 08:56
thats outdated
Long Nguyen
@longnt80
Jun 03 2017 08:57
@OrangeKulture you need to find another api
Ken Haduch
@khaduch
Jun 03 2017 08:58
@colechamberss - add target='_blank' to your fan page URL. That will make it open in a separate browser tab.
Long Nguyen
@longnt80
Jun 03 2017 08:59
@OrangeKulture use apixu.com
Cole Chambers
@colechamberss
Jun 03 2017 09:13
thank you @khaduch and @codebook92 for the feedback!
CamperBot
@camperbot
Jun 03 2017 09:13
colechamberss sends brownie points to @khaduch and @codebook92 :sparkles: :thumbsup: :sparkles:
:cookie: 126 | @codebook92 |http://www.freecodecamp.com/codebook92
:star2: 2938 | @khaduch |http://www.freecodecamp.com/khaduch
Mr. Apex
@Apex005
Jun 03 2017 09:54
Hi guys, I'm just about starting my first project (building a tribute page) and I really don't know how to go about it. Someone should please help me out
h1tag
@h1tag
Jun 03 2017 10:08
@Apex005 reverse engineer the example project using what you've learned
Mr. Apex
@Apex005
Jun 03 2017 10:54
thanks @h1tag :)
CamperBot
@camperbot
Jun 03 2017 10:54
apex005 sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 828 | @h1tag |http://www.freecodecamp.com/h1tag
Muhammad Hasham
@MohammadHasham
Jun 03 2017 10:55
Henry
@GitHub-Henry
Jun 03 2017 11:02
@Manfred28 didn't know about fetch, looks interesting, appreciate your sharing the info
@MohammadHasham nice except i found 2 errors, after pressing the tweet button, both the tweet button and your name disappear. https://www.screencast.com/t/d0iWaiao
Tom
@moT01
Jun 03 2017 11:09
@MohammadHasham i didn't have those errors
looks good for me, cept maybe too big a margin when you shrink the window, ...looks a little goofy
Henry
@GitHub-Henry
Jun 03 2017 11:10
@moT01 @MohammadHasham that's why i do screen shots, cuz seeing is believing, what a good quote. =)
Tom
@moT01
Jun 03 2017 11:12
strange that that would happen
5nai3r
@5nai3r
Jun 03 2017 11:14
Hello world !
here is my js calculator i would love to hear your opinion about it
https://codepen.io/5nai3r/full/mwdBPr/
Tom
@moT01
Jun 03 2017 11:17
@5nai3r i like the clear effect
there's an issue with using multiple decimals
also operating with decimals
5nai3r
@5nai3r
Jun 03 2017 11:18
ohhh
can you explain to me a liitle :p a bout these issue
Tom
@moT01
Jun 03 2017 11:19
also leading 0's
you can press 0 a bunch at the beginning
you can use a decimal more than once
and if you multiply, say 2.2 x 2.2 you get the wrong result
Henry
@GitHub-Henry
Jun 03 2017 11:20
@5nai3r looks good, found that numbers over flowed the display area. i agree with Tom a real calculator does not accept leading zeros, yours does. and a little extra padding in the display area so the numbers fit comfortably in the display area would probably be good. https://www.screencast.com/t/ZGbQZfwkc9C
5nai3r
@5nai3r
Jun 03 2017 11:20
ooh that's true :worried: that bunch of zero make no sense
Henry
@GitHub-Henry
Jun 03 2017 11:21
@5nai3r but, you are well on your way to a nice calculator
5nai3r
@5nai3r
Jun 03 2017 11:21
and multiplication i'll try to fix it
thanky you @GitHub-Henry
CamperBot
@camperbot
Jun 03 2017 11:22
5nai3r sends brownie points to @github-henry :sparkles: :thumbsup: :sparkles:
:cookie: 341 | @github-henry |http://www.freecodecamp.com/github-henry
Henry
@GitHub-Henry
Jun 03 2017 11:22
@5nai3r keep up the good work, you'll get there
Tom
@moT01
Jun 03 2017 11:22
yea, i had all those problems i think
5nai3r
@5nai3r
Jun 03 2017 11:24
the multiply issue is weird 2.52.5 work fine but 2.22.2 give wrong result
2.5X2.5 and 2.2X2.2
MadsSN
@MadsSN
Jun 03 2017 11:42
@5nai3r Maybe it's a rounding error thing?
5nai3r
@5nai3r
Jun 03 2017 11:43
i fixed the leading zeros and decimal now can be used one time only :smile:
@MadsSN maybe i'll try rounding it
math.floor maybe
Tom
@moT01
Jun 03 2017 11:44
it the way decimals are stored in the computer, ...it can't do it or something
MadsSN
@MadsSN
Jun 03 2017 11:45
@5nai3r Rather Math.round I guess to ensure it goes the right way?
5nai3r
@5nai3r
Jun 03 2017 11:45
even microsoft have a problem with math hhh try sqrt(4) -2 in windows calculator
MadsSN
@MadsSN
Jun 03 2017 11:46
@5nai3r Maybe also limit so you cannot press multiple +-/* in a row?
5nai3r
@5nai3r
Jun 03 2017 11:47
ohhh i missed that
i'll fix it
MadsSN
@MadsSN
Jun 03 2017 11:49
@5nai3r Otherwise a small thing - Afterwards you press "=" and then you press any number it add this to the string, instead of clearing or having the option to do additional +-/*
@MadsSN But it looks great otherwise - Much nicer javascript code than mine ;)
5nai3r
@5nai3r
Jun 03 2017 11:50
yeah i'll add condition after pressing = if you enter nulber it will clear or you can do a + - * /
number*
Brian
@Cornielle
Jun 03 2017 12:01
Hello World people
5nai3r
@5nai3r
Jun 03 2017 12:03
Hello
MadsSN
@MadsSN
Jun 03 2017 12:04
Hey :)
Brian
@Cornielle
Jun 03 2017 12:04
;)
Henry
@GitHub-Henry
Jun 03 2017 12:06
@5nai3r i know you are working hard at making improvements, here's something else to see. https://www.screencast.com/t/yrnsB7W14Y i'm sure you're already on it.
5nai3r
@5nai3r
Jun 03 2017 12:08
yeah i'm working on it i'm just thinkin of what i can do
maybe i can make the fonst size smaller but isn't really good user experiance
maybe i'll add scroll bar if result is too big
or just make the output field wider
Robert
@Ashkya
Jun 03 2017 12:12
Anyone knows any Google font similiar to StarmiX ?
MadsSN
@MadsSN
Jun 03 2017 12:12
If the result is too big change to sciences result - e+19 or so?
Or limit the amount of numbers to a certain amount in comparison to how they fit?
5nai3r
@5nai3r
Jun 03 2017 12:14
ahh that's right it will look more professional with sciences result
Yahia
@y-zaky
Jun 03 2017 12:18
yo guys..... I'm trying to write a function that loops through displaying my buttons.
so in the first click on id="button", button disappears, then button2appears, then this keeps going .
on the final button, it starts the process again. so afterbutton4 is clicked, button 4 hides then button appears again.
Is a for loop the best way to do this? I'm a little stumped, but I'm only using vanilla js no frameworks xD
https://codepen.io/bowssy88/project/editor/DzvNdk/
5nai3r
@5nai3r
Jun 03 2017 12:21
for (i=0, i<butarray.length , i++) {

}  // remove this extra bracket 
  but1.style.display="none";
}
@bowssy88
Brian
@Cornielle
Jun 03 2017 12:22
wtf?
5nai3r
@5nai3r
Jun 03 2017 12:22
and use butarray[i] instead of but1
Brian
@Cornielle
Jun 03 2017 12:22
why is commented that line?
5nai3r
@5nai3r
Jun 03 2017 12:23
for (var i=0; i<butarray.length ; i++) {
  butarray[i].style.display="none";
}
it should look like that
Yahia
@y-zaky
Jun 03 2017 12:25
@5nai3r that doesn't work dude ... even if it did, what will happen when we get to butarray[3]? i want it do loop through again
hit refresh
rfvergeldedios
@rfvergeldedios
Jun 03 2017 12:29
At Last! Finally got the Twitch API function working. Just need to redecorate. https://codepen.io/RafaelVD/pen/MogWRv?editors=0001
5nai3r
@5nai3r
Jun 03 2017 12:29
i didn't get it what you want to do @bowssy88
Yahia
@y-zaky
Jun 03 2017 12:29
so in the first click on id="button1", button1 disappears, then button2appears, then this keeps going .
on the final button, it starts the process again. so afterbutton4 is clicked, button 4 hides then button1 appears again.
Is a for loop the best way to do this? I'm a little stumped, but I'm only using vanilla js no frameworks xD
@5nai3r
MadsSN
@MadsSN
Jun 03 2017 12:30
A for loop would not be the way to go through it
5nai3r
@5nai3r
Jun 03 2017 12:30
so you don't need a for loop
MadsSN
@MadsSN
Jun 03 2017 12:31
@bowssy88 If it's just 4 buttons i'd just make each of them there own click function since I expect them to have a unique purpose?
5nai3r
@5nai3r
Jun 03 2017 12:32
get clicked button eventthen do
this.style.display="none";
and get the next index button and do .style.display="block"; .. etc
and if nex index is greater then number of button reset it to 0
Yahia
@y-zaky
Jun 03 2017 12:34
@MadsSN @5nai3r this is for my random quote machine. instead of a normal button people click to generate quotes, i wanted the button to keep moving in every click ..... thats why i thought i need a loop, because the movement never stops
what about using: button = (button + 1) % 4;
display id = "button" + button
5nai3r
@5nai3r
Jun 03 2017 12:35
aahhh if that just use one button
and change it's position every time
way simpler
MadsSN
@MadsSN
Jun 03 2017 12:36
@bowssy88 aahhh if that just use one button ahhh if that just use one button and change it by editing it's position.
Or be tricky or continous move it around and make it a challenge to hit it?
Yahia
@y-zaky
Jun 03 2017 12:37
@5nai3r @MadsSN how ? :o
yes best to just use one button
and then change its html every time ?
i mean inner.html...
as each button has different text
5nai3r
@5nai3r
Jun 03 2017 12:39
to change the content yeah you cand do that
and for postion just use css
Yahia
@y-zaky
Jun 03 2017 12:40
@5nai3r can you show me what my javascript would look like?
5nai3r
@5nai3r
Jun 03 2017 12:40
you can change its position property from javascript of give it a class and then use regular css
something like
Yahia
@y-zaky
Jun 03 2017 12:41
@5nai3r what ?
5nai3r
@5nai3r
Jun 03 2017 12:41
this.style.position
or give it a class
i preffer work with classes
Yahia
@y-zaky
Jun 03 2017 12:41
can u show example :s
MadsSN
@MadsSN
Jun 03 2017 12:42
Give me a moment :) I'll try to make something up
5nai3r
@5nai3r
Jun 03 2017 12:42
var d = document.getElementById("div1");
d.className += " otherclass";
and in the css file do
.otherclass{
left :50px
right:10px
}
just an example change it to fit your need
Yahia
@y-zaky
Jun 03 2017 12:44
@5nai3r but how do you keep moving it around continuously ?
Tyler Johnson
@tylerjj17
Jun 03 2017 12:44
How could i add it so it shares the quote as a tweet
https://codepen.io/tylerjj17/full/EXYEOo/
5nai3r
@5nai3r
Jun 03 2017 12:46
ahh moving continuously so i think you are looking fo javascript animation
Yahia
@y-zaky
Jun 03 2017 12:46
nono
5nai3r
@5nai3r
Jun 03 2017 12:47
this may help you
Yahia
@y-zaky
Jun 03 2017 12:47
so the button moves to position 1 CLICK, pos 2 , CLICK, pos 3, CLICK, pos 1 , Click, pos 2, CLICK @5nai3r
thats what i mean
5nai3r
@5nai3r
Jun 03 2017 12:47
so it's fixed postion pos1 2 3 4 ...
MadsSN
@MadsSN
Jun 03 2017 12:48
Try do something of this sort? @bowssy88 Have a button, manipulate the text, and change the position by however you like. Math random maybe?
5nai3r
@5nai3r
Jun 03 2017 12:48
not moving continuously
Yahia
@y-zaky
Jun 03 2017 12:50

@MadsSN so how do i keep it going for ever? as in :

button Position 1, CLICK, button pos 2, CLICK, button pos 3, CLICK, button pos 1, CLICK ...?

MadsSN
@MadsSN
Jun 03 2017 12:51
Maybe make an if statement? That if is in a certain position move somewhere else?
Should pose no problem
Yahia
@y-zaky
Jun 03 2017 12:51
@MadsSN can you show me :s sorry for that
5nai3r
@5nai3r
Jun 03 2017 12:53
@tylerjj17 use tweet url https://twitter.com/home?status=" your text "
Just for showing the principal
Yahia
@y-zaky
Jun 03 2017 13:00
@MadsSN dude your a genius , thank you !
CamperBot
@camperbot
Jun 03 2017 13:00
bowssy88 sends brownie points to @madssn :sparkles: :thumbsup: :sparkles:
:cookie: 300 | @madssn |http://www.freecodecamp.com/madssn
Yahia
@y-zaky
Jun 03 2017 13:00
now I'm trying to read and understand the code
MadsSN
@MadsSN
Jun 03 2017 13:06
It's just based on whenever you click a button, you call the specified function and it runs that code.
Yahia
@y-zaky
Jun 03 2017 13:08
@MadsSN dude, why is it not working
it is saying button is undefined
Screen Shot 2017-06-03 at 14.08.01.png
Yahia
@y-zaky
Jun 03 2017 13:20
@MadsSN thank you so much, got it to work
CamperBot
@camperbot
Jun 03 2017 13:20
bowssy88 sends brownie points to @madssn :sparkles: :thumbsup: :sparkles:
:warning: bowssy88 already gave madssn points
Yahia
@y-zaky
Jun 03 2017 13:26
@MadsSN how can i make them move to random positions?
MadsSN
@MadsSN
Jun 03 2017 13:27
I guess math random?
Could probably end up working with some fiddling
Toby J. Henderson
@Mr-Henderson
Jun 03 2017 13:30
how can i navigate to conversation from yesterday to reference it??
Roxroy
@roxroy
Jun 03 2017 13:32
@Mr-Henderson , This is what I do when I want to check previous chat. Scroll up and the beginning of the day and use the browser search feature to find my name.
Sem Gebresilassie
@semosem
Jun 03 2017 14:08

HELP!
function palindrome(str) {
// Good luck!

str= str.replace(/_|[^\w\d]/g,"");
str=str.toLowerCase();
var rev=str.split('').reverse('');

for(var i=0;i<str.length;i++){

if(str.split('')[i]==rev[i]){

   return true;

} else{

   return false;

}

}

}
palindrome("_E+yz");

firas omrane
@firou1925
Jun 03 2017 14:15
@semosem what is the problem!!?
rfvergeldedios
@rfvergeldedios
Jun 03 2017 14:18
May I ask for review of Twitch API before submitting? https://codepen.io/RafaelVD/pen/MogWRv/?editors=1001
MadsSN
@MadsSN
Jun 03 2017 14:22
@rfvergeldedios Probably center your text some more, make channel names/or icons into links, and maybe even out your "hover". Compare offline to online when you hover on them :)
Sem Gebresilassie
@semosem
Jun 03 2017 14:23
@firou1925 thats what I am trying to figure out, the code doesn't work : (
rfvergeldedios
@rfvergeldedios
Jun 03 2017 14:23
Ok. Thank you.
@MadsSN Ok. Thank you.
CamperBot
@camperbot
Jun 03 2017 14:24
:cookie: 301 | @madssn |http://www.freecodecamp.com/madssn
rfvergeldedios sends brownie points to @madssn :sparkles: :thumbsup: :sparkles:
firas omrane
@firou1925
Jun 03 2017 14:24
@semosem which test case is not working
copy your code in this online js editor and try with it https://repl.it/languages/javascript
Sem Gebresilassie
@semosem
Jun 03 2017 14:25
firas omrane
@firou1925
Jun 03 2017 14:27
@semosem ok try to debug it with me
Sem Gebresilassie
@semosem
Jun 03 2017 14:27
@firou1925 aright
firas omrane
@firou1925
Jun 03 2017 14:29
@semosem are u sure about the use of this str.replace(/_|[^\w\d]/g,"");
Sem Gebresilassie
@semosem
Jun 03 2017 14:30
@firou1925 not entirely sure but what I was trying is to remove everything that is not a word or digit. i should remove \d
str.replace(/_|[^\w]/g,"");
this should do it
firas omrane
@firou1925
Jun 03 2017 14:32
@semosem u can't compare arrays like strings you have to loop through it
@semosem like the old code
@semosem do u get it!!!?
Sem Gebresilassie
@semosem
Jun 03 2017 14:33
@firou1925 got it i pasted the wrong code
Sem Gebresilassie
@semosem
Jun 03 2017 14:38
@firou1925 Thanks man! Finally got it working now. I shouldn't have put the return statement inside the loop
CamperBot
@camperbot
Jun 03 2017 14:38
semosem sends brownie points to @firou1925 :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @firou1925 |http://www.freecodecamp.com/firou1925
firas omrane
@firou1925
Jun 03 2017 14:39
@semosem u are retuening true after the first loop
Sem Gebresilassie
@semosem
Jun 03 2017 14:39
@firou1925 that was the issue
firas omrane
@firou1925
Jun 03 2017 14:39
@semosem try to find it yourself else I am here to help
@semosem so u have to set a variable as true and then change it if the condition is not true
@semosem try to complete it https://repl.it/I44M/1
firas omrane
@firou1925
Jun 03 2017 14:47
@semosem got it?
priyanka bhalla
@priyanka-bhalla
Jun 03 2017 14:57
m having error please help
firas omrane
@firou1925
Jun 03 2017 14:59
@priyanka-bhalla try with this API mentionned in FCC
Use HTML5 Geolocation to get user location and then use the Dark Sky API which uses an HTTP Secure connection for the weather. Also, be sure to connect to CodePen.io via https://.
Jen
@jenhurd8
Jun 03 2017 15:00
Hello, hoping someone can help with my portfolio page issue. On android phones, the navbar covers up my text
Looks like it does the same on this page
Nadir Dogar
@ndogar
Jun 03 2017 15:02
hey guys, need a bit of help. page is not responsive to device's width without importing bootstrap via CDN. but when i do that the whole styling gets overridden. https://codepen.io/ndogar/pen/XgrQeY
Pagnito
@Pagnito
Jun 03 2017 15:05

cant understand why this code wont work

   function yourTurn(){
      console.log(whosTurn)
   if(whosTurn==1){
    $('#simonWrap').click(function(event){     
      var target = event.target;
      if(target==greenBtn){
      punchedInCombo.push('green');
    } else if(target==redBtn){
      punchedInCombo.push('red');
    } else if(target==yellowBtn){
      punchedInCombo.push('yellow');
    } else if(target==blueBtn){
      punchedInCombo.push('blue');
    }

      console.log(punchedInCombo)
        });
       }
     }

i t doesn pass any of the if statements, i console.log the even.target and it gives me the target right, but doesnt pass the if statement tho it should

Jake
@JakeDVirus
Jun 03 2017 15:05
i was expecting a background image covering full viewport but it doesnt happen because no content was there inside the section element. what should i do here?
https://jsfiddle.net/NeelDVirus/x00frL12/
priyanka bhalla
@priyanka-bhalla
Jun 03 2017 15:05
@firou1925 i dont know how to use dark sky api
firas omrane
@firou1925
Jun 03 2017 15:06
@priyanka-bhalla sign up here https://darksky.net/dev/
@priyanka-bhalla they will give u an exemple
@priyanka-bhalla and use the secret key they give to you
Ayush Kumar
@Gr8ayu
Jun 03 2017 15:09
https://codepen.io/gr8ayu/pen/jwOLNq?editors=0110 what I am doing wrong in //LINE1 in javascript section
firas omrane
@firou1925
Jun 03 2017 15:10
@priyanka-bhalla this is an exemple https://darksky.net/dev/docs/forecast
do u got it?
Ayush Kumar
@Gr8ayu
Jun 03 2017 15:11
@firou1925 no
firas omrane
@firou1925
Jun 03 2017 15:13
@Gr8ayu I can't find any error in LINE1
@Gr8ayu save refresh it
Ayush Kumar
@Gr8ayu
Jun 03 2017 15:15
@firou1925 according to //LINE1 "CHANNEL NAME" in red block should be replaced by "cretetion"
Tom
@moT01
Jun 03 2017 15:17
@Pagnito any luck?
priyanka bhalla
@priyanka-bhalla
Jun 03 2017 15:17
@firou1925 m trying
Ayush Kumar
@Gr8ayu
Jun 03 2017 15:18
@priyanka-bhalla https://codepen.io/gr8ayu/pen/pwzarG this will help you
firas omrane
@firou1925
Jun 03 2017 15:19
@Gr8ayu I can't help sorry
Ayush Kumar
@Gr8ayu
Jun 03 2017 15:19
@firou1925 kk thnx
CamperBot
@camperbot
Jun 03 2017 15:19
gr8ayu sends brownie points to @firou1925 :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @firou1925 |http://www.freecodecamp.com/firou1925
Pagnito
@Pagnito
Jun 03 2017 15:20
@moT01 nah
Tom
@moT01
Jun 03 2017 15:21
do you need to be looking for string?
'greenBtn' instead of greenBtn
Pagnito
@Pagnito
Jun 03 2017 15:23
greenBtn is a variable
firas omrane
@firou1925
Jun 03 2017 15:24
@priyanka-bhalla u have also to read this to undersrand the CORS problem
Pagnito
@Pagnito
Jun 03 2017 15:24
it hold the simon colored buttons
firas omrane
@firou1925
Jun 03 2017 15:24
@priyanka-bhalla and to deal with it whenever u will find it
Tom
@moT01
Jun 03 2017 15:24
something must be off with the test
Pagnito
@Pagnito
Jun 03 2017 15:24
yea i feel u
Tom
@moT01
Jun 03 2017 15:25
you could put an else at the end and log something to see that it is getting to the test and just none of them are passing
Pagnito
@Pagnito
Jun 03 2017 15:25
i tried using difirent slectors too
Tom
@moT01
Jun 03 2017 15:25
i suppose you don't have a pen to share? or else you would have
line 85
i resaved it, check it again in case something isnt the way i showed it
rfvergeldedios
@rfvergeldedios
Jun 03 2017 15:33
Twitch API updates ready. May I ask for review please? https://codepen.io/RafaelVD/pen/MogWRv/?editors=1011
Tom
@moT01
Jun 03 2017 15:33
your target isnt right i think @Pagnito
Pagnito
@Pagnito
Jun 03 2017 15:33
hmm, how so, i mean i know its targets fault, but i just dont know wh
why*
Tom
@moT01
Jun 03 2017 15:34
cause the target is like the whole html element
lemme play with it a second yet
Pagnito
@Pagnito
Jun 03 2017 15:35
nah, the click is binded to the table, not the target
ima go back to my old code real quik and see, i always got a problem with this damn even.target but somehow always manage to do it
Tom
@moT01
Jun 03 2017 15:38
your greenBtn is an object, and your target is an html element
Ayush Kumar
@Gr8ayu
Jun 03 2017 15:38
@rfvergeldedios :+1:
Pagnito
@Pagnito
Jun 03 2017 15:41
i see thanks
@moT01 thanks
rfvergeldedios
@rfvergeldedios
Jun 03 2017 15:41
@Gr8ayu Thank You.
CamperBot
@camperbot
Jun 03 2017 15:41
rfvergeldedios sends brownie points to @gr8ayu :sparkles: :thumbsup: :sparkles:
:cookie: 277 | @gr8ayu |http://www.freecodecamp.com/gr8ayu
Tom
@moT01
Jun 03 2017 15:42
i might be getting close
@Pagnito https://codepen.io/moT01/pen/gROvYw?editors=1011
Pagnito
@Pagnito
Jun 03 2017 15:44
i ended up using if hasClass('color')
thanks tho
Tom
@moT01
Jun 03 2017 15:45
alright
Pagnito
@Pagnito
Jun 03 2017 15:46
@moT01 thats actually a great way to do it too, thanks ill keep that in mind, i shouldve thought of that instead
CamperBot
@camperbot
Jun 03 2017 15:46
pagnito sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 683 | @mot01 |http://www.freecodecamp.com/mot01
Deepanshu Chug
@deepanshuchg
Jun 03 2017 15:46
how can i use background-color propery here: $(".red").css("color", "yellow");
nvm got it
sinjecht
@sinjecht
Jun 03 2017 15:49
Can someone tell me how to return a random element of an array?
Pagnito
@Pagnito
Jun 03 2017 15:51
@sinjecht you can make a random number
@sinjecht and by simply saying array[randomNumber] u get a random array element
Deepanshu Chug
@deepanshuchg
Jun 03 2017 15:51
put this in a for loop var random=Math.floor((Math.random() * 10) + 1);
This will create a random number between 1 to 10
sinjecht
@sinjecht
Jun 03 2017 15:52
I know how to use .random and .math to make numbers. I want to get a random element out of an array.
Jack Lyons
@JackEdwardLyons
Jun 03 2017 15:52
or, use the array length instead of 10
Tom
@moT01
Jun 03 2017 15:52
@Pagnito as long as it works
Jack Lyons
@JackEdwardLyons
Jun 03 2017 15:52
use Math random with the array length @sinjecht
Pagnito
@Pagnito
Jun 03 2017 15:52
@moT01 hehe
@sinjecht when u put array[randomnumber] u get a random element from the array
because u acces them by numbers
thus if the number is random, the element is random
Deepanshu Chug
@deepanshuchg
Jun 03 2017 15:54
@sinjecht generate a random number between 0 to array size and use array[random]
sinjecht
@sinjecht
Jun 03 2017 15:58

Like this? <!--Note:The template file will be copied to a new file. When you change the code of the template file you can create new file with this base code. -->

<html>

<!--javascript here--->
<script>
function get(){
var quote=["you","me","her","him","he","she"];
document.getElementById("q").innerHTML=quote[random];
};
</script>
<style>
body{
background-color:black;
text-align:center;
color:white;

}
.border{
border-color:white;
border-top:50px;
}

</style>
<div class="border">
<body>
<br>
<br>
<h1 id="q">hi</h1>
<br>
<input type="button" value="Get Quote" onClick=get(); <br>

</body>
</div>
</html>

This didn't work.
rugano
@rugano
Jun 03 2017 15:59
Hello campers,how do i correct the bugs in my Twitch.tv here?: https://codepen.io/Njue/pen/KmOVPX
Aata-allah
@Atalaa
Jun 03 2017 16:01

Hello,
i want to remove Serif using Sans-serif in CSS but nothing change in my H5 element.

h5{
  color:white;
  font-family: Georgia, sans-serif;
  font-size: 20px;
  line-height: 150%;
}

https://codepen.io/Atalaa/pen/ZyEEEY

sinjecht
@sinjecht
Jun 03 2017 16:02
Close it with ;
Aata-allah
@Atalaa
Jun 03 2017 16:03
@sinjecht What ?
sinjecht
@sinjecht
Jun 03 2017 16:03
font-family, you have a (,) it needs to be (;)
;
Aata-allah
@Atalaa
Jun 03 2017 16:07
@sinjecht i dont know what your talking about, i have "," in the right place
sinjecht
@sinjecht
Jun 03 2017 16:09
Font-family:Georgia; do that.
Adam Bohannon
@abohannon
Jun 03 2017 16:33
Hi all - I still can't seem to get this to function. I changed the JSON feed to https. Anyone else having issues? All it shows is my city. No weather data or any other functionality. https://codepen.io/freeCodeCamp/pen/bELRjV?editors=0010
AbdullahMuhammed5
@AbdullahMuhammed5
Jun 03 2017 16:37
Hi, I have a problem with nav bar
it doesn't work
I'm including bootstrap
AbdullahMuhammed5
@AbdullahMuhammed5
Jun 03 2017 16:43
here is the code

<header>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type"text/css">
</header>

<div class ="container-fluid">
<ul class ="nav nav-pills">
<li class ="pull-right"><a href="#">Abdullah Muhammed</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>

Mr. Apex
@Apex005
Jun 03 2017 16:48
hi, please take a sec to have a look at my "tribute page" https://codepen.io/apex005/full/BZawVY
Jen
@jenhurd8
Jun 03 2017 16:51
very nice @Apex005
Mr. Apex
@Apex005
Jun 03 2017 16:53
thanks @jenhurd8
CamperBot
@camperbot
Jun 03 2017 16:53
apex005 sends brownie points to @jenhurd8 :sparkles: :thumbsup: :sparkles:
:cookie: 230 | @jenhurd8 |http://www.freecodecamp.com/jenhurd8
Adam Bohannon
@abohannon
Jun 03 2017 16:55
@Apex005 looks great!
sinjecht
@sinjecht
Jun 03 2017 17:03
Can you do multiple Id tags with getElementById with one event?
kirontoo
@kirontoo
Jun 03 2017 17:22
hey guys! what do you think of my portfolio? btw the image carousel doesn't on codepen for some reason https://codepen.io/kironto/pen/vZYdPZ
@sinjecht it would be better to group them in a class and then selecting them with querySelector
Jen
@jenhurd8
Jun 03 2017 17:27
Looks good @kirontoo , do u know if the contact me form actually works? I left it out since I read it needs outlook? or something like that...
kirontoo
@kirontoo
Jun 03 2017 17:29
@jenhurd8 the form doesn't actually work, you can type things in and it'll check for requirements but the submit button doesn't actually send in anything. Idk anything about outook, haven't tried that yet :)
Jen
@jenhurd8
Jun 03 2017 17:30
ahh ok thank you, good to know because eventually I want to share my portfolio :) thanks @kirontoo
CamperBot
@camperbot
Jun 03 2017 17:30
jenhurd8 sends brownie points to @kirontoo :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @kirontoo |http://www.freecodecamp.com/kirontoo
Saeed Jassani
@saeedjassani
Jun 03 2017 17:35
hello, i need help in finding weather icons for my Local Weather project
is there any API for that?
i am using darksky API to get the weather information
Janina Pohorecki
@janepohorecka
Jun 03 2017 17:37
@janepohorecka
Hey guys!!
I am working on the random quote generator.. I have the logic down for the actual generator.. What I want to do now is on click animations.. All my quotes are zen buddhist by nature and each time the user clicks on "new quote" I want a picture of a flower to animate into a bamboo or something like that
I am not sure how advanced it is to make animations of this nature..
Roxroy
@roxroy
Jun 03 2017 17:37
@saeedjassani , The API itself doesn't come with any icons: instead, it provides a generic icon property so you can select whatever icons you like! If you want to use the same icon set we use on darksky.net, check out our Skycons library, http://darkskyapp.github.io/skycons/ ...
Saeed Jassani
@saeedjassani
Jun 03 2017 17:39
@roxroy thanks a lot! it's great
CamperBot
@camperbot
Jun 03 2017 17:39
saeedjassani sends brownie points to @roxroy :sparkles: :thumbsup: :sparkles:
:cookie: 922 | @roxroy |http://www.freecodecamp.com/roxroy
Saeed Jassani
@saeedjassani
Jun 03 2017 17:41
@kirontoo your portfolio looks great! but if you have time, try looking for "Parallax".. It looks good on one-page apps especially portfolios
Tim Mannino
@kettultim
Jun 03 2017 17:44
dear lord I have a little JS/API issue I can’t wrap my head around - anyone able to 1on1 help me for a sec?
kirontoo
@kirontoo
Jun 03 2017 17:44
@saeedjassani Parallax looks pretty cool! thanks for the suggestion!
CamperBot
@camperbot
Jun 03 2017 17:44
kirontoo sends brownie points to @saeedjassani :sparkles: :thumbsup: :sparkles:
:cookie: 273 | @saeedjassani |http://www.freecodecamp.com/saeedjassani
Saeed Jassani
@saeedjassani
Jun 03 2017 17:45
hi @abohannon, it is not functioning for me as well. I just started my project referring to the User stories... If you get any example project, share it with me as well!
@kirontoo Anytime
Adam Bohannon
@abohannon
Jun 03 2017 17:49
@saeedjassani will do!
alpox
@alpox
Jun 03 2017 17:56
@abohannon @saeedjassani due to the recent move of codepen to go all https,you wont be able to use openweathermap anymore at all because openweathermap does not support https in its free plan (only payed). Please take a look at the alternatives like darksky
Saeed Jassani
@saeedjassani
Jun 03 2017 17:58
@alpox we need a project for reference, I'm already using dark sky API
alpox
@alpox
Jun 03 2017 18:00
@saeedjassani for reference? Do you mean for layout?
Saeed Jassani
@saeedjassani
Jun 03 2017 18:01
Yeah, just to get an idea of how I can improve my UI
alpox
@alpox
Jun 03 2017 18:02
@saeedjassani you really dont have to do anything else than shoe the actual celcius/fahrenheit at your location, together with an icon for the current weather
@saeedjassani i used to have one but it uses openweathermap. I did not update it since so its kinda in a broken state
Hmm but i could maybe update it for short
Saeed Jassani
@saeedjassani
Jun 03 2017 18:06
Great, inform me when you update it
Tom
@moT01
Jun 03 2017 18:08
@janepohorecka a fade out, and fade in would be pretty easy, or a number of other transitions. but if you want to actually like animate the shape of the flower into another shape, sounds tough
JR Woods
@jrwoods42
Jun 03 2017 18:11
Hello coders! I'm working on the Random Quote Machine and can't get the API to work. Could someone look at my code and tell me what I'm doing wrong? I can't figure it out, and it may be driving me a little crazy... https://codepen.io/jrwoods42/pen/GmVewV
Tom
@moT01
Jun 03 2017 18:13
@jrwoods42 use httpsto make the json call
JohnRagbir
@JohnRagbir
Jun 03 2017 18:16
can anyone help me with the session Return Early PAttern for Functions?

// Setup
function abTest(a, b) {
// Only change code below this line
function abTest(){
if ("a < 0 || b < 0")
return undefined;
}

// Only change code above this line

return Math.round(Math.pow(Math.sqrt(a) + Math.sqrt(b), 2));
}

// Change values below to test your code
abTest(2,-2);
returns that 2 out of 6 tests will show a green checkmark

Janina Pohorecki
@janepohorecka
Jun 03 2017 18:17
@moT01 I do imagine it will be tough.. Do you know where I could start?
JohnRagbir
@JohnRagbir
Jun 03 2017 18:17
but if i take out the second “function abTest() {“ then 4 out of the 6 tests show a green checkmark
or rather vice versa
JR Woods
@jrwoods42
Jun 03 2017 18:18
@moT01 Thanks, at least it's doing something now... but it's showing up as undefined. Any suggestions?
CamperBot
@camperbot
Jun 03 2017 18:18
jrwoods42 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 684 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Jun 03 2017 18:19
@janepohorecka probly photo shop right? or another editor, i dont know no
Ghost
@ghost~59209a78d73408ce4f6102e8
Jun 03 2017 18:20
How do you do a collapsable nav (for small devices) in bootstrap 3 rather than 4?
JR Woods
@jrwoods42
Jun 03 2017 18:21
never mind, I figured it out... thanks again @moT01 !!
CamperBot
@camperbot
Jun 03 2017 18:21
jrwoods42 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:warning: jrwoods42 already gave mot01 points
Tom
@moT01
Jun 03 2017 18:21
@jrwoods42 i dont see a .quote or .author in your object
Janina Pohorecki
@janepohorecka
Jun 03 2017 18:21
@moT01 Is it a matter of making SVGs?
Tom
@moT01
Jun 03 2017 18:22
what kind of images are you working with
like photos
or something you made or want to make
with paint or photoshop
didn't check it out much, but it might be worth a look
JohnRagbir
@JohnRagbir
Jun 03 2017 18:29
nevermind, i figured it out
Janina Pohorecki
@janepohorecka
Jun 03 2017 18:29
@moT01 Thank you so much!!!
CamperBot
@camperbot
Jun 03 2017 18:29
:cookie: 685 | @mot01 |http://www.freecodecamp.com/mot01
janepohorecka sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
Janina Pohorecki
@janepohorecka
Jun 03 2017 18:30
This might be challenging to implement but I have an idea in mind ;)
Ayush Kumar
@Gr8ayu
Jun 03 2017 18:31
I want to wait till async function loads .. How can I do that ???
alpox
@alpox
Jun 03 2017 18:34
@Gr8ayu Run the code you want in the callback of the async function
Ayush Kumar
@Gr8ayu
Jun 03 2017 18:39
@alpox see console https://codepen.io/gr8ayu/pen/Rgwybv?editors=1010 , here loop content is running even after loop is over.
@alpox I want it to run in one direction
alpox
@alpox
Jun 03 2017 18:43
@Gr8ayu Well the loop is synchronous - the call you do inside of the loop is asynchronous. All calls you do will provide their results later - when the loop already finished
Ayush Kumar
@Gr8ayu
Jun 03 2017 18:44
@alpox so if I want to store all data in a array , how can I do that
@alpox or is there any way that loop will wait till code fetch data
I don't know much about async and sync function , I just know that since .getJSON needs to get data from server it executes slow than loop
alpox
@alpox
Jun 03 2017 18:47
@Gr8ayu No the loop itself surely won't wait. (There would be a method but... just never, ever do it please - so i'm not going to tell you.)
You should just call all rest of your code - which has to be done after you got your data - when your callback arrived (the function you passed to $.getJSON)
Ayush Kumar
@Gr8ayu
Jun 03 2017 18:55
I need to call .getJSON several times so should I call all at once and store it
@alpox https://codepen.io/gr8ayu/pen/Rgwybv?editors=1010 I have tried to store in this way , is it OK ??
alpox
@alpox
Jun 03 2017 18:57
@Gr8ayu Depends on what you want to execute afterwards. If you want to wait for them all to be loaded, you have to create a counter or something to count how many requests already came back and only call something if the counter arrived at the number of iterations you did.
Another way would be to use Promises which make this step a lot easier - but they are hard to understand for newcomers
It might be the easiest to just perform a task for a specific element - once it arrived.
Like show exactly the item which just arrived on the page
Ayush Kumar
@Gr8ayu
Jun 03 2017 19:05
@alpox i am working on this https://codepen.io/gr8ayu/pen/jwOLNq?editors=0010 I tried to keep .getJSON inside loop(with counter i) but that just messed up whole process .please Tell how should I proceed . I want all data should be stored in a variable and when I start loop (counter i) It should execute in synchronous manner
alpox
@alpox
Jun 03 2017 19:07
@Gr8ayu You cannot just run asynchronous code in synchronous manner - thats just not how it works ;-)
Ayush Kumar
@Gr8ayu
Jun 03 2017 19:07
@alpox if I will separate them in different function then ??
alpox
@alpox
Jun 03 2017 19:07
@Gr8ayu I suggest you to not use a global data store like json, but make a function which takes one input at a time to do the computation
Ayush Kumar
@Gr8ayu
Jun 03 2017 19:08
@alpox I dont want that loop(counter j ) keep executing when loop( counter i ) start executing
alpox
@alpox
Jun 03 2017 19:08
@Gr8ayu
for(...) {
    $.getJSON(..., function(data) {
        handleChannel(data);
    });
}

function handleChannel(channelData) {
    // Do something with channelData.
    // Probably add it to the DOM
}
@Gr8ayu You can follow this lineup
@Gr8ayu you don't need 2 for loops
Ayush Kumar
@Gr8ayu
Jun 03 2017 19:11
@alpox will it not interrupt the sync of another loop
alpox
@alpox
Jun 03 2017 19:11
@Gr8ayu The sync of another loop?
Ayush Kumar
@Gr8ayu
Jun 03 2017 19:13
I need about 8 .getJSON then I have to use its data to customize channels of twitch(channel name , onnline/offline).........
alpox
@alpox
Jun 03 2017 19:13
Yes
You can do that with the lineup :point_up: 3. Juni 2017 21:08
Ayush Kumar
@Gr8ayu
Jun 03 2017 19:13
I loop to get all data .... another loop to coustomize.........
alpox
@alpox
Jun 03 2017 19:14
@Gr8ayu In the lineup - you can customize in handleChannel
The for loop gets the data
Ayush Kumar
@Gr8ayu
Jun 03 2017 19:14
where you have given comment there I have to write codes to coustomize ??
1code1
@1code1
Jun 03 2017 19:15
Hey everyone I just got to the first project of designing a tribute page! my questions is there are a few youtube videos and articles on ppl and how they did it. should I watch them and follow along or try to do it from scratch alone
alpox
@alpox
Jun 03 2017 19:15
I wrote there that you can do something with channelData there :D @Gr8ayu
so thats the customizing
1code1
@1code1
Jun 03 2017 19:16
I don't think I could do it all alone but just wondering how other ppl did it
Ayush Kumar
@Gr8ayu
Jun 03 2017 19:17
@alpox just consider before .getJSON send its first data , the loop start executing
@alpox I am just afraid to this becuause I have rewritten my codes 3 times already
please dont mind for asking silly questions
alpox
@alpox
Jun 03 2017 19:19
@Gr8ayu You can ask all silly questions you want :D i don't think anyone here minds
And usually a silly question is no silly question
Tom
@moT01
Jun 03 2017 19:19
@1code1 i would try and come up with something different that fulfills the user stories
unless you can't get anywhere
maybe watch the videos or look at others' code for ideas
1code1
@1code1
Jun 03 2017 19:20
@moT01 ok ty
CamperBot
@camperbot
Jun 03 2017 19:20
1code1 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 686 | @mot01 |http://www.freecodecamp.com/mot01
alpox
@alpox
Jun 03 2017 19:21
@Gr8ayu I can imagine that you're afraid to do it - i'm just telling that there are multiple ways to do it, but running 2 for loops after each other is not one of them ;-) Because you cannot synchronously know when you get which data back
Matthew Pavouris
@mattpavo
Jun 03 2017 19:21
Hi. Could someone tell me why the newly generated quote doesn't go from X opacity to 1 after clicking the "New quote" button?
https://codepen.io/mattpavo/pen/oWKmqW
Ayush Kumar
@Gr8ayu
Jun 03 2017 19:21
@alpox thanks a lot....
CamperBot
@camperbot
Jun 03 2017 19:21
gr8ayu sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1133 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Jun 03 2017 19:21
They can even come unsorted @Gr8ayu
@Gr8ayu Thats why the usual approach is to just do something with the data once it arrived.
Ofc. there are methods which make the whole process much easier, but i'm not sure if its appropriate for beginners. Just a little view and you can decide:
Tom
@moT01
Jun 03 2017 19:23
@mattpavo are you not correctly targeting things?
i see a .quote and .author in the js, but not html
alpox
@alpox
Jun 03 2017 19:24
@Gr8ayu
var channels = [...];
Promise.all(
    channels.map(function(channel) {
        return $.getJSON(<urlforchannel>);
    })
).then(function(arrayWithChannelData) {
    // arrayWithChannelData is an array with the data of all channels
   // sorted like the array channels!
    for(let i = 0; i < arrayWithChannelData.length; i++) {
        // Customize data for one channel here.
    }
});
Ayush Kumar
@Gr8ayu
Jun 03 2017 19:24
@alpox first I thought to write all html elements beforehand , but then I changed my mind and added elements through javascript ( hoping I'll learn it better) but it complecated code
Tom
@moT01
Jun 03 2017 19:24
@mattpavo i do see them now
i think it's cause you create those classes in the js
Ayush Kumar
@Gr8ayu
Jun 03 2017 19:25
@alpox what are inside channels
data from getJSON ??
alpox
@alpox
Jun 03 2017 19:25
@Gr8ayu this probably: ["ESL_SC2", "FreeCodeCamp", "cretetion"]
Just channel names
Matthew Pavouris
@mattpavo
Jun 03 2017 19:27
@moT01 Yes, Tom. But I'm just wondering why the opacity doesn't change after clicking "New quote". I know there's something wrong with the placement of the method, but I don't know what
the initial "fadeTo" works, the "fadeOut" works, but that's it
Ayush Kumar
@Gr8ayu
Jun 03 2017 19:27
@alpox and .all() is method of promise ??
alpox
@alpox
Jun 03 2017 19:27
@Gr8ayu $.getJSON returns a Promise which is an object on which you can call .then to run something when the data did come.
channels.map therefore gives you an array where each channel name is mapped to a Promise which waits for the data to come.
Promise.all takes that array and waits for all of the promises inside the given array to fulfill.
So in the final function you pass to .then you get an array of all the data for each of the channels
Ayush Kumar
@Gr8ayu
Jun 03 2017 19:28
@alpox I think its going over my head
alpox
@alpox
Jun 03 2017 19:28
@Gr8ayu Thats why i said its not really appropriate for beginners :-)
Ayush Kumar
@Gr8ayu
Jun 03 2017 19:28
@alpox :smile:
alpox
@alpox
Jun 03 2017 19:29
@Gr8ayu Its probably better to just work with functions which you invoke at the right time - as i described earlier
If you really want to wait until ALL data did arrive, you have to keep a counter
Ayush Kumar
@Gr8ayu
Jun 03 2017 19:29
@alpox I think I can use this by copying and using , but that won't benefit me in learning
alpox
@alpox
Jun 03 2017 19:29
Not really, no @Gr8ayu
Do what you understand
@Gr8ayu No, var channels = ["ESL_SC2", "FreeCodeCamp", "cretetion"]
Tom
@moT01
Jun 03 2017 19:31
@mattpavo i think the fadeout changes the display to none
alpox
@alpox
Jun 03 2017 19:31
@Gr8ayu thats inside channels
Ayush Kumar
@Gr8ayu
Jun 03 2017 19:31
@alpox I want to call all data in loop 1 , and coustomize in loop2 , bot I am afraid that before loop 1 will end it will start executing loop 2
alpox
@alpox
Jun 03 2017 19:31
Oups
I got confused sry :D
My chat sometimes scrolls up and i don't notice
Tom
@moT01
Jun 03 2017 19:32
so when you do the fadeTo it doesn't exist yet, try fadeIn instead maybe
Ayush Kumar
@Gr8ayu
Jun 03 2017 19:32
ok no problem
Tom
@moT01
Jun 03 2017 19:32
or something like that
alpox
@alpox
Jun 03 2017 19:32
@Gr8ayu Actually loop 2 would have ended before you get any data from loop 1 ;-)
Ayush Kumar
@Gr8ayu
Jun 03 2017 19:34
@alpox how so many people have completed this project with this much of knowledge taught by FCC :smile:
alpox
@alpox
Jun 03 2017 19:34
@Gr8ayu What you can do is:
var json = [];
var counter = 0;
for(...) {
    $.getJSON(url, function(data) {
        json[i] = data;
        counter++;
        if(counter === names.length)
            handleChannels();
    });
}

function handleChannels() {
    // json is filled with all data here
    for(...) {
        // Customize here
    }
}
@Gr8ayu Same struggling as you do :-)
Yahia
@y-zaky
Jun 03 2017 19:35

hey all, i have a question... line 31 of my JS console.log(data) the data should store the result of the API call back for the random quote machine ? or am i mistaken ?

https://codepen.io/bowssy88/project/editor/DzvNdk/

Matthew Pavouris
@mattpavo
Jun 03 2017 19:35
@moT01 I initially did fadeIn; it works, but it fades in the quote that was just faded out instead of the newly generated quote
Ayush Kumar
@Gr8ayu
Jun 03 2017 19:37
@alpox so without getting data , handleChannels() will not execute ??
alpox
@alpox
Jun 03 2017 19:37
@Gr8ayu Well as you see i used a counter which will be increased each time the data of one channel arrived
@Gr8ayu If all channels got their data - counter === names.length - you call handleChannels()
And only in that case
So you are sure that all data has arrived
Tom
@moT01
Jun 03 2017 19:38
@mattpavo wierd, you change the html before you fade it out. so when you fade it back in it should be the new onw
Ayush Kumar
@Gr8ayu
Jun 03 2017 19:39
@alpox what if increase counter before getting data ??
alpox
@alpox
Jun 03 2017 19:39
@Gr8ayu Well that doesn't happen here
@Gr8ayu You shouldn't do it either :D
Ayush Kumar
@Gr8ayu
Jun 03 2017 19:41

```

var json = [];
var counter = 0;
for(...) {
$.getJSON(url, function(data) {
json[i] = data;
counter++;

        handleChannels(data);
});

}

function handleChannels(data) {
// json is filled with all data here
for(...) {
// Customize here
}
}

``` @alpox I think your previous code passing data as argument may help

Matthew Pavouris
@mattpavo
Jun 03 2017 19:41
@moT01 Yeah, I can't figure it out
Ayush Kumar
@Gr8ayu
Jun 03 2017 19:42
@alpox how long you are going to stay online ??
alpox
@alpox
Jun 03 2017 19:42
@Gr8ayu Heheh one step in a good direction.
But actually that would be the layout i gave you at the beginning already - but you kept wanting to loop :D
@Gr8ayu So we would be back to
for(...) {
    $.getJSON(..., function(data) {
        handleChannel(data);
    });
}

function handleChannel(channelData) {
    // Do something with channelData.
    // Probably add it to the DOM
}
@Gr8ayu In that case - with passing data - you don't have to keep track of a counter
But you don't know the order of the elements
It might matter to you or it might not - that is up to you
@Gr8ayu I won't stay up all too long i guess, maybe 2 hours from now but i don't know how much time i have to answer
Ayush Kumar
@Gr8ayu
Jun 03 2017 19:44
@alpox just tell me whether is there any possibility that handleChannel(data); will execute without waiting for data
alpox
@alpox
Jun 03 2017 19:45
@Gr8ayu No
But in this code here - handleChannel is called with data when the data has arrived
Ayush Kumar
@Gr8ayu
Jun 03 2017 19:46
@alpox thats more than enough , I just wanted to tell you whether code worked or not . I can also tell that in private
Hello911
@Hello911
Jun 03 2017 21:14
How can I imporve my JSON? I dont feel ready to build random quote generator. I cannt figure out the connection between JS and HTML.
Faiz Ahmed
@Faiz7412
Jun 03 2017 21:17
has anyone here got particle js got working smoothly on mobile?
It gets ugly on smaller screen
Kevin Nolan
@betaalpha987
Jun 03 2017 21:28
@Hello911 what do you want to improve in? Reading and writing to json?
@Hello911 To improve your awareness of the link between JS and HTML I suggest creating full HTML pages that have both HTML and JS in them, and communicate between the two a lot. Eg. type out the examples on this page: https://www.w3schools.com/js/js_output.asp
Aata-allah
@Atalaa
Jun 03 2017 21:35
Question, why my bootstrap button is white in laptopt , but in cellphone no ?
Kevin Nolan
@betaalpha987
Jun 03 2017 21:36
@Atalaa Does the button change colour if you maakr your browser window really narrow on your laptop?
Aata-allah
@Atalaa
Jun 03 2017 21:37
@betaalpha987 it change color in cellphone, let me check about laptop
@betaalpha987 nope the color stay the same wich is fine, but in my smartphone it change for black
Kevin Nolan
@betaalpha987
Jun 03 2017 21:40
Hmmm, unsure then. Do you have a link to the code?
Aata-allah
@Atalaa
Jun 03 2017 21:41
Kevin Nolan
@betaalpha987
Jun 03 2017 21:42
@Atalaa Checking it out...
Aata-allah
@Atalaa
Jun 03 2017 21:43
what do u mean
@betaalpha987 im on laptop now
@betaalpha987 ok thx
CamperBot
@camperbot
Jun 03 2017 21:43
atalaa sends brownie points to @betaalpha987 :sparkles: :thumbsup: :sparkles:
:cookie: 291 | @betaalpha987 |http://www.freecodecamp.com/betaalpha987
Kevin Nolan
@betaalpha987
Jun 03 2017 21:52
Cheers :) I'm guessing it's because the button hasn't had its default state set for background colour, only its hover state...
Kevin Nolan
@betaalpha987
Jun 03 2017 22:00
@Atalaa Yup, when I added:
.w3-hover-black {
background-color: white;
}
to the css I got the button appearing as white on mobile while not hovered the same as how it looks on desktop.
Aata-allah
@Atalaa
Jun 03 2017 22:01
@betaalpha987 but if you add this, it will change to the laptop this time no ?
@betaalpha987 no its not good cuz i will have a white over on laptopp
Kevin Nolan
@betaalpha987
Jun 03 2017 22:12
@Atalaa Do you want the button to be white with black text unhovered, and black with white text hovered? On both mobile and laptop?
Aata-allah
@Atalaa
Jun 03 2017 22:13
i dont want to change anything, i just want the smartphone are the same page than laptop, i think use meta tag @betaalpha987
Kevin Nolan
@betaalpha987
Jun 03 2017 22:16
Okay, best of luck @Atalaa
Aata-allah
@Atalaa
Jun 03 2017 22:16
thx
Zhanibek
@zhann1982
Jun 03 2017 22:20
hello everybody! I have installed jquery via npm. Then i added it to my js file with 'require' . But it's not working. What i am doing wrong?
vínαч puppαl
@vinaypuppal
Jun 03 2017 22:35
@zhann1982 'require' only works in NodeJS code. If you want to use it in client side code you need to use some module bundler like browerify or webpack
RightAlt
@RightAlt
Jun 03 2017 22:41
I´m on my first challenge and I want image to be centered- but it doesn´t
<div class="container">
<div class="jumbotron">
<div class="page header">
<div class= "row">
<div class="col-md-12">
<h1 class="text-center corm">Mark Persson</h1>

<img src=" http://www.contrarie.com/wp- content/uploads/2014/09/Markus-Persson.jpg" alt="Markus_Persson">
</div>
</div>
</div>
</div>
why?
corm is my CSS class for font
added 1 more </div> but still it´s not in center
Gulsvi
@gulsvi
Jun 03 2017 22:46
@RightAlt Add text-center to the <div> element surrounding your <img>
<div class="col-md-12 text-center">
https://codepen.io/skycoder/pen/xqbGor
RightAlt
@RightAlt
Jun 03 2017 22:48
@SkyC0der Thank you alot! :)
CamperBot
@camperbot
Jun 03 2017 22:48
rightalt sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1606 | @skyc0der |http://www.freecodecamp.com/skyc0der
Pagnito
@Pagnito
Jun 03 2017 22:56
gottq shitty lil problem, anyone ca help?
Tom
@moT01
Jun 03 2017 22:58
i can try
when i get the last botton wrong, it wont recognize it cuz it seems the check loop will start before its pushed into the array
line 122 is where i push into the punchedInArray
line 143 is where i have a loop checking each element of both arrays
Tom
@moT01
Jun 03 2017 23:03
haha
not when you get the second to last wrong though
Pagnito
@Pagnito
Jun 03 2017 23:03
yea it works except when u get the last one wrong
even tho it will console.log both arrays
and show that both arrays have th elements at question
RightAlt
@RightAlt
Jun 03 2017 23:06

<h1 class="text-center corm">Markus Persson</h1>

<div class="thumbnail text-center"><img src="http://www.contrarie.com/wp- content/uploads/2014/09/Markus-Persson.jpg">
<div class="caption text-center">Markus Persson also known as xNotch or Notch</div>
</div>

why i´m not getting thumbnail over the picture and text?
Pagnito
@Pagnito
Jun 03 2017 23:07
@Pagnito weird, even if i console.log the arrays in the loop, it shows that punchedIn array has that last pushed element
Tom
@moT01
Jun 03 2017 23:10
yea, i see this
looking still, no suspects
Tom
@moT01
Jun 03 2017 23:28
@Pagnito console.log your i
getting a wierd value, ...guessing its the cause
Request for reviews.
Tom
@moT01
Jun 03 2017 23:36
@Pagnito okay i think i got it
it passes the same length test before it can cycle through the for loop, once you hit that length
the array gets the right length, but the way its set up, ...the for loop cycles through the first index again to see if it matches and then the lengths are the same so it doesn't finish
Tyler Johnson
@tylerjj17
Jun 03 2017 23:39

i need help with sharing with twitter in the random quote machine

i have
$("#twitter").on("click", function() {
window.location='http://twitter.com/home?status=(function(getQuote())';
});
but it isnt working

https://codepen.io/tylerjj17/full/EXYEOo/

Clinton Shepard
@Taslack
Jun 03 2017 23:40
@tylerjj17 You function can not be inside the quotes.
Tom
@moT01
Jun 03 2017 23:40
@tylerjj17 window.open("https://twitter.com/intent/tweet/?text=" + $(".quote").text() + " " + $(".author").text()); everyone does it like this for the most part
@Taslack looks pretty good, ...i think there's supposed to be an icon or picture depending on the conditions
Clinton Shepard
@Taslack
Jun 03 2017 23:42
@moT01 Yes, are you not getting any?
Tom
@moT01
Jun 03 2017 23:42
did you do that whole flag css
i thought it didn't quite look like an image
Clinton Shepard
@Taslack
Jun 03 2017 23:43
@Taslack The flag stars should change to the weather icon....and the background pic should be representative as well.
@moT01 LOL, yep entirely in css.....easiest part of the project.
Tom
@moT01
Jun 03 2017 23:43
could be my old browser not helping
ill test on my chrome
but no, im not getting an icon
Clinton Shepard
@Taslack
Jun 03 2017 23:44
Hmmm, what browser?
@moT01 And thanks for checking it out.
CamperBot
@camperbot
Jun 03 2017 23:44
taslack sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 687 | @mot01 |http://www.freecodecamp.com/mot01
goodm0urning
@goodm0urning
Jun 03 2017 23:46
Hey guys, I'm still having trouble with my weather machine. Can someone take a look at my pen and help my figure out why I'm getting a failure to call the API?
Tom
@moT01
Jun 03 2017 23:48
@Taslack yea, it's just stars and text over there too, ...my browsers are quite old
Clinton Shepard
@Taslack
Jun 03 2017 23:49
Yes I have a bit of jquery in there....might be screwy with some of the older browsers. I will investigate further.
@moT01 Thanks
CamperBot
@camperbot
Jun 03 2017 23:49
taslack sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:warning: taslack already gave mot01 points
Tom
@moT01
Jun 03 2017 23:49
@goodm0urning you need to use apixu i think works, ...or dark sky
they're different weather api's, ...openweathermap won't work with codepen anymore im told
goodm0urning
@goodm0urning
Jun 03 2017 23:49
OH
That would have been cool to know. I'll try that, thank you
thank you @moT01
CamperBot
@camperbot
Jun 03 2017 23:50
goodm0urning sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 688 | @mot01 |http://www.freecodecamp.com/mot01
Clinton Shepard
@Taslack
Jun 03 2017 23:50
@moT01 Ya thats why I am revisiting this....but i got it to work with https://cors-anywhere.herokuapp.com
Tom
@moT01
Jun 03 2017 23:51
maybe you can better explain the problem to him then
Clinton Shepard
@Taslack
Jun 03 2017 23:52
@goodm0urning So codepen just switched to https....and you will get the old "Mixed Content" error
@goodm0urning Try using wunderground.com....it should serve you up nicely.
Sidafa Conde
@sconde
Jun 03 2017 23:53

Hello All,

I could use some feedback
https://codepen.io/sconde/full/PmMYrL/

Clinton Shepard
@Taslack
Jun 03 2017 23:53
@goodm0urning And remember from now anything that you link too outside of codepen will have to be https://
Tom
@moT01
Jun 03 2017 23:54
@sconde looks pretty good, ...the picture doesn't seem to match the conditions. but it's a picture anyway
says clear sky for me, and its a picture of clouds
Sidafa Conde
@sconde
Jun 03 2017 23:54
Ok. Cool. I'll get on it
Clinton Shepard
@Taslack
Jun 03 2017 23:54
@moT01 Ya think its https://cors-anywhere.herokuapp.com that is screwy with some of the older browersers due to cors goodness/badness.
Sidafa Conde
@sconde
Jun 03 2017 23:55
@moT01 thank you
CamperBot
@camperbot
Jun 03 2017 23:55
sconde sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 689 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Jun 03 2017 23:55
@Taslack im getting all the data
temp, location, condition
and wind speed
Clinton Shepard
@Taslack
Jun 03 2017 23:56
@moT01 Well crap...then its my shoddy code.
@sconde Looks good, position is really off for me, But thats not your fault, just how I have internet and you doing an IP based location. ;-) If you want to improve that you can, but I would just recommend moving to the next project.
Tom
@moT01
Jun 03 2017 23:59
@Taslack i think you need to put quotes around the image urls