These are chat archives for FreeCodeCamp/HelpFrontEnd

31st
Aug 2016
Vik
@vvang044
Aug 31 2016 00:45
@coffeebeanzz let me check that code
Armaan Roshani
@armaanhammer
Aug 31 2016 01:51
Hey guys,
I'm working on the Chunky Monkey waypoint, and I'm stuck.
Here's my code:
function chunkArrayInGroups(arr, size) {
  // Break it up.
  console.log("<<<<<----->>>>>");
  var index = 0;
  var newArr = [];
  //newArr[0] = [''];
  //console.log("newArr[0][0]: ", newArr[0][0]);
  for (var i=0; /* i*size < arr.length*/ i < 2; ++i) {
    newArr[i] = [''];
    for (var j=0; j<size; ++j) {
      //console.log("newArr[i][j]: ", newArr[i][j]);
      //console.log("arr[index]: ", arr[index]);

      newArr[i][j] = arr[index];
      ++index;
    }
  }
  //console.log(arr, newArr);
  return newArr;
}
it seems like either the newArr[i][j] assignment statements or the arr[index] lookup statements are failing.
Armaan Roshani
@armaanhammer
Aug 31 2016 02:00
Ok, nevermind. I figured it out.
Vik
@vvang044
Aug 31 2016 02:35
@coffeebeanzz hey thank you for the hint
CamperBot
@camperbot
Aug 31 2016 02:35
vvang044 sends brownie points to @coffeebeanzz :sparkles: :thumbsup: :sparkles:
:star2: 1038 | @coffeebeanzz |http://www.freecodecamp.com/coffeebeanzz
ZZPot
@ZZPot
Aug 31 2016 03:06
jquery.css() work very slow
it waits while new css will be aplied
how to make it async?
jquery.css() works very slow. It waits while css will be aplied. How to do it async way?
ZZPot
@ZZPot
Aug 31 2016 03:22
how to place block object in the center of parent object?
top, left and other stuff works only for borders
Arthur
@bunsofstone
Aug 31 2016 04:05
I hope to chat around with you guys soon!
Michael Karpinski
@karpimpski
Aug 31 2016 04:18
do any of you guys know a way to generate sass code with pure, vanilla JavaScript? I'm making a fairly large-scale front-end project without using any front-end frameworks. vanilla JS, HTML, and CSS (with only a teeny bit of pre-processing :P )
and so far it's including a ton of repetitive sass code/files that i wish i could put into a function
Daniel
@DanielMW34
Aug 31 2016 05:35
Anybody complete the Wikipedia exercise yet? I have a question regarding the structure of displaying the data. For loop? What do you think works best?
Henry Cabello
@hacu9
Aug 31 2016 07:02
So i was wondering how to make the tweet button work and i guess ill have to work with something like this n change the values for every quote ? https://twitter.com/intent/tweet?text=something%20like%20this
Pradnya Joshi
@pradxj07
Aug 31 2016 07:33
@hacu9, you are right.
Henry Cabello
@hacu9
Aug 31 2016 07:34

<a id="tweet"
target="_blank"
class="twitter-share-button"
href="https://twitter.com/share"
data-size="large"
data-url="http://codepen.io/cabello986/full/qNZaZA/"
data-via="RandomQuoteMachine"

data-hashtags="Quote"
data-text="">
Tweet
</a>

Found this to work better,just gotta change the data-text
Jack Lyons
@JackEdwardLyons
Aug 31 2016 08:59
hey guys im pretty much done with my calculator, any feedback would be awesome!
Henry Cabello
@hacu9
Aug 31 2016 09:02
@JackEdwardLyons Seems pretty nice
Jack Lyons
@JackEdwardLyons
Aug 31 2016 09:05
@hacu9 is the button meant to be in the middle of the screen?
thanks @hacu9
CamperBot
@camperbot
Aug 31 2016 09:05
jackedwardlyons sends brownie points to @hacu9 :sparkles: :thumbsup: :sparkles:
:cookie: 264 | @hacu9 |http://www.freecodecamp.com/hacu9
Henry Cabello
@hacu9
Aug 31 2016 09:06
Kinda xD i might move it down alitle bit
done
Jack Lyons
@JackEdwardLyons
Aug 31 2016 09:08
yeah maybe centre it
using positioning isn't generally a recommended way to do things in this case @hacu9
using something like margin: 0 auto will centre it
but its cool, it's functional -- but from a user experience point of view, i wouldnt know that I could tweet (maybe make some text show (on each button click) that says "click here to tweet"
@hacu9
I like the colour change on click :)
Henry Cabello
@hacu9
Aug 31 2016 09:11
@JackEdwardLyons thanks,ill work on that xD
CamperBot
@camperbot
Aug 31 2016 09:11
hacu9 sends brownie points to @jackedwardlyons :sparkles: :thumbsup: :sparkles:
:cookie: 323 | @jackedwardlyons |http://www.freecodecamp.com/jackedwardlyons
Jack Lyons
@JackEdwardLyons
Aug 31 2016 09:11
you could randomize it so you also get a new color every time
Henry Cabello
@hacu9
Aug 31 2016 09:13
i tried randomizing it,like i did with the j but i kept getting the same colors
thought it woudnt work for some reason and just left it like that
Jack Lyons
@JackEdwardLyons
Aug 31 2016 09:13
something like this
function randomColor() { var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); return "rgb(" + r + ", " + g + ", " + b + ")"; }
function randomColor() {
  var r = Math.floor(Math.random() * 256);
  var g = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);
  return "rgb(" + r + ", " + g + ", " + b + ")";    
}
that might work
function randomColor() {
  var r = Math.floor(Math.random() * 256);
  var g = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);
  return "rgb(" + r + ", " + g + ", " + b + ")";    
}
 document.getElementById("style").style.backgroundColor = randomColor();
@hacu9
but then you would need to put the text in a div with a light background, because some random colors might be dark and then you couldn't read the text
so maybe a div with a light color that is semi transparent @hacu9
Henry Cabello
@hacu9
Aug 31 2016 09:18
That sounds nice,ill ty xD
try
deepakSpatil
@deepakSpatil
Aug 31 2016 10:59
any one knows what is the use of a har file?
Darth Skywalker
@adityaparab
Aug 31 2016 11:00
@deepakSpatil sounds like some archive file . rar tar war etc
Safbek
@safbek
Aug 31 2016 11:28
hi! if i am setting margin/padding for a navigation my header's background-image is stretching very ugly. what is that? help me, please.
Darth Skywalker
@adityaparab
Aug 31 2016 11:32
@safbek you have a code pen or something?
George Zaharia
@Franel13
Aug 31 2016 11:42
Hello
I need some help with the Wikipedia Viewer, can you guys make requests to their API?
Darth Skywalker
@adityaparab
Aug 31 2016 11:44
@Franel13 Yes
George Zaharia
@Franel13
Aug 31 2016 11:45
Can someone explain why i get this error?
"No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://seed-twister.hyperdev.space' is therefore not allowed access."
@Franel13 what is your full API url?
Darth Skywalker
@adityaparab
Aug 31 2016 11:47
This is cross domain request, so you're gonna have to add &callback=?" at the end of your URL
@Franel13
George Zaharia
@Franel13
Aug 31 2016 11:48
Ooh
@adityaparab So same as the others API requests, right?
Darth Skywalker
@adityaparab
Aug 31 2016 11:50
Right! Same as other "CORS disabled cross domain" API requests
George Zaharia
@Franel13
Aug 31 2016 11:51
@adityaparab So if I had an API key I wouldn't have to use the "&callback=?" ,right?
Darth Skywalker
@adityaparab
Aug 31 2016 11:52
@Franel13 : API key is different. CORS is different
George Zaharia
@Franel13
Aug 31 2016 11:52
@adityaparab Can you explain me?
Darth Skywalker
@adityaparab
Aug 31 2016 11:52
API has nothing to do with cross origin requests. It is merely a means of authorization.
Tamarcuse
@Tamarcuse
Aug 31 2016 11:53
how can I use multiple selectors in jQuerry?
George Zaharia
@Franel13
Aug 31 2016 11:54
@adityaparab Whell the API are cross origin requests reciever, right?
@Tamarcuse Post a piece of code
Safbek
@safbek
Aug 31 2016 11:55
@adityaparab yeah, here is my code: http://codepen.io/safbek/pen/BLBOxd
Darth Skywalker
@adityaparab
Aug 31 2016 11:55
CORS - Cross Origin Resource Sharing is a method where a specific set of origin related headers are set. So that the server would entertain requests originating from a domain that is different from the domain of the server.
API Key - is a a header set to authorize whether the request is allowed to access particular resource or not. Irrespective or origin.
George Zaharia
@Franel13
Aug 31 2016 11:56
@adityaparab Thx
CamperBot
@camperbot
Aug 31 2016 11:56
franel13 sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 661 | @adityaparab |http://www.freecodecamp.com/adityaparab
George Zaharia
@Franel13
Aug 31 2016 11:57
@adityaparab So many things you should take care of
Tamarcuse
@Tamarcuse
Aug 31 2016 11:59
say I have 3 button and I want the text of the button that was clicked to be changed,
instead of rewriting code for each button can I generelize it to one command?
 $("#box1, #box2, #box3, #box4, #box5, #box6, #box7, #box8, #box9").click(function(){

  });
George Zaharia
@Franel13
Aug 31 2016 12:00
$("button").click();
Tamarcuse
@Tamarcuse
Aug 31 2016 12:11
but each click is different, it changes the text of the clicked button.
it's not multiple buttons which do the same
The Jared Wilcurt
@TheJaredWilcurt
Aug 31 2016 12:16
$('button').click(function () {
    var textFromButtonClicked = $(this).text();
    console.log(textFromButtonClicked);
    var idOfClickedButton = $(this).attr('id');
    console.log(idOfClickedButton);
});
@Tamarcuse
Tamarcuse
@Tamarcuse
Aug 31 2016 12:18
@TheJaredWilcurt thanks!
CamperBot
@camperbot
Aug 31 2016 12:18
tamarcuse sends brownie points to @thejaredwilcurt :sparkles: :thumbsup: :sparkles:
:cookie: 35 | @thejaredwilcurt |http://www.freecodecamp.com/thejaredwilcurt
lackodan
@lackodan
Aug 31 2016 12:42
Could anyone help me figure out Javascript execution order please? I'm having a problem with the Local Weather app that I don't understand.
George Zaharia
@Franel13
Aug 31 2016 12:44
@adityaparab Thx
CamperBot
@camperbot
Aug 31 2016 12:44
franel13 sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:warning: franel13 already gave adityaparab points
Stephen James
@sjames1958gm
Aug 31 2016 12:44
@lackodan Do you have a link?
lackodan
@lackodan
Aug 31 2016 12:45
Sure, just wanted to check if someone was available first. Here's the pen: codepen.io/lackodan/pen/ORLgxP/
What I'd like to know is zhy line 174 doens't appear to have any effect. Normally, that's what the suggestion text should say if the user's geolocation info isn't known, but it seems like if I execute setWeather() at line 171, line 174 is ignored.
It would make sense to me if setWeather was a callback function (and finished executing AFTER line 174, but I don't believe it is...
Stephen James
@sjames1958gm
Aug 31 2016 12:54
@lackodan Isn't set weather aync (calls getJSON), so when the weather is returned it overwrites the suggestion text?
lackodan
@lackodan
Aug 31 2016 12:55
Aha. I guess setWeather itself isn't async, but the getJSON calls in it are. I completely forgot about that. Thanks!
I mean, thanks @sjames1958gm
CamperBot
@camperbot
Aug 31 2016 12:56
lackodan sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 2978 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
lackodan
@lackodan
Aug 31 2016 12:56
Wouldn't want to deny you the brownie points. :P
Stephen James
@sjames1958gm
Aug 31 2016 12:56
@lackodan :+1: You can see the text for a split second
@lackodan :)
lackodan
@lackodan
Aug 31 2016 12:56
I figured it would have to be something like that. Now to figure out how to get around it.
In my opinion, the code structure looks like crap already, I can't imagine convoluting it even more. :(
What are my options here. Should I try using timeouts to force the proper execution?
Stephen James
@sjames1958gm
Aug 31 2016 13:02
You could use another element just for this suggestion and hide it in the getWeather callback? Or use a setTimeout to call the getWeather, long enough to see the suggestion?
setTimeout(getWeather, 1500); Something like that
lackodan
@lackodan
Aug 31 2016 13:05
Tried it, but it doesn't seem to work at all.
The timeout I mean.
Stephen James
@sjames1958gm
Aug 31 2016 13:22
@lackodan I like the look now with the parenthesis.
lackodan
@lackodan
Aug 31 2016 13:25
Haha, thanks. I like that better that the default way of putting all closing parenthesis and semicolons on one line, but I still feel like I'm using way too many functions.
Maybe that's just because I'm used to Python.
But I feel like there should be a cleaner way to implement this.
I used your first suggestion by the way. I'm now just using an empty div that only shows a message if the geolocation isn't found.
I don't like doing it this way, but I want to move on. I'll figure it out later. ˆˆ
himanhsu
@Himanshu54
Aug 31 2016 13:42
@jarenescueta731 yeah that was a silly mistake . I figured it out . Thanks for help though.
CamperBot
@camperbot
Aug 31 2016 13:42
himanshu54 sends brownie points to @jarenescueta731 :sparkles: :thumbsup: :sparkles:
:cookie: 366 | @jarenescueta731 |http://www.freecodecamp.com/jarenescueta731
Edward L. McGehee
@ELMcGehee
Aug 31 2016 14:07
Is anyone else just starting on "Build a Tribute Page'? And want to pair up or help each other out as we go along?
Abdulah Hamzic
@hamzicabdulah
Aug 31 2016 14:07
hey guys, what is used in the freecodecamp Pomodoro example (https://codepen.io/FreeCodeCamp/full/aNyxXR) for the filling animation on the circle? (I don't wanna look at the actual code)
can that be achieved without knowing SVG or Canvas
vínαч puppαl
@vinaypuppal
Aug 31 2016 14:12
@hamzicabdulah yes it can be done only with CSS no need of SVG or Canvas
Abdulah Hamzic
@hamzicabdulah
Aug 31 2016 14:15
@vinaypuppal thank you
CamperBot
@camperbot
Aug 31 2016 14:15
hamzicabdulah sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 474 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Suraj Prasad
@suraj18gts
Aug 31 2016 14:28
hey.....can anyone help me n Random Quote Machine??
Bhushan Patil
@mrpatil007
Aug 31 2016 14:31
@suraj18gts which type of help
Tim
@TimmDay
Aug 31 2016 14:36
I'm doing the 'Get Geolocation Data' challenge, in the jquery and JSON part, and I am confused!
I am using the FCC suggested code, but am not seeing any coordinates returned in the browser - despite being told that I have completed the task successfully.
Anyone got any ideas?
Edward L. McGehee
@ELMcGehee
Aug 31 2016 14:40
can anyone help me with centering an img?
Tim
@TimmDay
Aug 31 2016 14:41
@ELMcGehee hav you tried putting margin: 0 auto; in the css?
Edward L. McGehee
@ELMcGehee
Aug 31 2016 14:43
@TimmDay like <img class="margin:0 auto"?
<style>
h2 {color: blue;}
</style>
but with margin instead of color right?
Tim
@TimmDay
Aug 31 2016 14:48
nah, in the css
img {
img {
margin: 0 auto;
}
Edward L. McGehee
@ELMcGehee
Aug 31 2016 14:48
thanks @TimmDay
CamperBot
@camperbot
Aug 31 2016 14:48
elmcgehee sends brownie points to @timmday :sparkles: :thumbsup: :sparkles:
:cookie: 277 | @timmday |http://www.freecodecamp.com/timmday
Tim
@TimmDay
Aug 31 2016 14:48
this margin setting sets the top and bottom margins to 0, and the left/right margins to auto, which has the effect of centering it
Suraj Prasad
@suraj18gts
Aug 31 2016 14:54
@mrpatil007
i have written the code but it is not showing me the quotes
Suraj Prasad
@suraj18gts
Aug 31 2016 15:03
@mrpatil007 ?????
the doer
@ewathedoer
Aug 31 2016 15:07
This message was deleted
Norvin Burrus
@ndburrus
Aug 31 2016 15:17
@suraj18gts '''
CamperBot
@camperbot
Aug 31 2016 15:17
:bulb: to format code use backticks! ``` more info
Bhushan Patil
@mrpatil007
Aug 31 2016 15:22
@suraj18gts can you send the pen link here
Suraj Prasad
@suraj18gts
Aug 31 2016 15:31
jrandallhansen
@jrandallhansen
Aug 31 2016 15:35
@suraj18gts I am not getting any functionality in your quote generator. are you stuck?
if so I have some suggestions
Bhushan Patil
@mrpatil007
Aug 31 2016 15:35
@suraj18gts i suggest you either use array or api
jrandallhansen
@jrandallhansen
Aug 31 2016 15:36
@mrpatil007 he is kind of using a mix of both of them. its like he is trying to create his own internal api on the page. requesting a JSON from two lines above
Bhushan Patil
@mrpatil007
Aug 31 2016 15:36
@jrandallhansen ya :smile:
jrandallhansen
@jrandallhansen
Aug 31 2016 15:37
just use an array, generate a random number within the range of the array length and display the corresponding quote. then for the link just insert the current quote into the src value using jquery
@suraj18gts
or using just vanilla JS
Aaron
@apalm1341
Aug 31 2016 15:43
@apalm1341
Hey all. Could you guys please help me?
http://codepen.io/ap1341/pen/bZXjdd
My padding/margins got screwed up on some of my pages so now there is some white space I don't want.
And my box/block on first page/home page, whatever you call it, is screwed up and mixed in with nav bar too
sentedelviento
@sentedelviento
Aug 31 2016 16:24
Hey guys, I have a question.
I created the same exact page twice.
I used a different method of creating the page.
Can you guys tell me which one you think is preferable, and why?
Both of these things don't work for mobile but
I'm wondering which technique is better
Sorin Ruse
@sorinr
Aug 31 2016 16:42
@sentedelviento first get rid of height: 90vh; in the css part of #wrap {} because your border will be only for 96vh. second its a lot strange to me that you used an ul->li combination for each verse of the sonnet
sentedelviento
@sentedelviento
Aug 31 2016 16:42
The html is irrelevant to what I'm asking. It is weird, but it was a challenge given to me by someone else, I am only editing the CSS
If I get rid of the height of 96vh, I can't vertically center it without using absolute position
I want the border to take up 96% of the viewport height.
I want there to be a small gap on the top and bottom.
James Bond
@Dman89
Aug 31 2016 16:44
I've completed a project, a scrolling background. I would like your feedback (channel) on my JavaScript or anything I could do better.
http://codepen.io/livinglegendparagon/full/jrNdNZ/
Brandon Porter
@Octoprism
Aug 31 2016 16:44
Hey guys i have a question. Codepen is not working for me, for some reason i can only input text in the css window and not the html or js ones, so i was wondering if anyone knows what the problem may be, and if there is any alternative platform to use in order to complete my freecodecamp challenges, such as the tribute page? Thanks.
Sorin Ruse
@sorinr
Aug 31 2016 16:51
@sentedelviento you can use flex to center vertically
sentedelviento
@sentedelviento
Aug 31 2016 16:56
but is that better than what I'm doing now? are there disadvantages to having a height of 96vh?
Jamie Ridding
@Themayu
Aug 31 2016 16:59
Is this a good way to use jQuery.when() with an unknown amount of AJAX calls:
// [requests] contains an array of 8 different AJAX requests
// parseStreamInfo() simply outputs the `arguments` array in the console
jQuery.when.apply(jQuery, requests).then(parseStreamInfo);
Sorin Ruse
@sorinr
Aug 31 2016 17:01
@sentedelviento do you need something like challange ?
Gary Holland
@garyhollandxyz
Aug 31 2016 17:07
It seems to be completely hit and miss whether Code Pen loads the images that I'm using in my tribute page. Are there any known issues with using images hosted on imgur?
Sorin Ruse
@sorinr
Aug 31 2016 17:09
@hgary yes
sentedelviento
@sentedelviento
Aug 31 2016 17:15
damit @sorinr
thanks
thanks @sorinr
CamperBot
@camperbot
Aug 31 2016 17:15
sentedelviento sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 683 | @sorinr |http://www.freecodecamp.com/sorinr
sentedelviento
@sentedelviento
Aug 31 2016 17:15
that is beautiful
well, I need something that doesn't scroll
it should all fit on one page
Patrick Outler
@poutler
Aug 31 2016 17:16
Anyone know how to fix the padding right issue with Bootstrap modals? v4 alpha 3, using the static modal exmaple in the docs
Sorin Ruse
@sorinr
Aug 31 2016 17:16
@sentedelviento welcome. just made some little changes to see it better on mobile. just relaod that pen
Gary Holland
@garyhollandxyz
Aug 31 2016 17:20
@sorinr damn. Is there a recommended place to host images instead? Dropbox maybe?
Sorin Ruse
@sorinr
Aug 31 2016 17:21
@hgary yes. you can use dropbox. i have used it in some of my pens
vínαч puppαl
@vinaypuppal
Aug 31 2016 17:22
@hgary you can even use http://www.cloudinary.com
Gary Holland
@garyhollandxyz
Aug 31 2016 17:22
@sorinr Thanks :)
CamperBot
@camperbot
Aug 31 2016 17:22
hgary sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 684 | @sorinr |http://www.freecodecamp.com/sorinr
Gary Holland
@garyhollandxyz
Aug 31 2016 17:23
@vinaypuppal I'm not familiar with that. I'll take a look, thank you :)
CamperBot
@camperbot
Aug 31 2016 17:23
hgary sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 475 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Sorin Ruse
@sorinr
Aug 31 2016 17:28
@hgary @vinaypuppal cloudinary its ok but their free band width its quite low. i used it and they tried to force me to upgrade the free account to a pay one., so i just :wave: them
vínαч puppαl
@vinaypuppal
Aug 31 2016 17:32
@sorinr 5GB monthly Bandwidth is sufficient for demo project's I think. If you go for production projects then you may need to upgrade. And I got few extra bandwidth 8GB by following them on Twitter and liking their FB page :smile:
Sorin Ruse
@sorinr
Aug 31 2016 17:34
@vinaypuppal in one of my proj i had an mp4 video file. probably for imgs will be ok
vínαч puppαl
@vinaypuppal
Aug 31 2016 17:37
@sorinr so did @hgary asked for images only so I suggested. I using it from 1yr never crossed free limits till now. Yes may be your video files are large and one video transformation takes two are three times more bandwidth according to their docs. So that's the reason you exhausted free limit.
Drew Dusang
@dmdusang
Aug 31 2016 17:53
hello everyone, I'm having some trouble with building a responsive search bar, is willing to check out my codepen?
Joffrey Nolting
@Yovvel
Aug 31 2016 17:59
show me
not sure if i can help, bu i can try
so the class .wrapper-search has it's "white-space" attribute set to "nowrap" This is because without it, the search bar will resize with browser width but pushes all other inline block elements to the next line
but with it, everything stays on one line, but the search bar refuses to resize
Joffrey Nolting
@Yovvel
Aug 31 2016 18:05
Yes i see, but i think that is the only way to do it, maybe you can try to use bootstrap to divide the left logo, the search bar and right buttons in 3 collums
MubashirAliSiddiqui.
@mubashiralisiddiqui
Aug 31 2016 18:05
I dont understand what i should make in my codepen.io can any one suggest
Joffrey Nolting
@Yovvel
Aug 31 2016 18:05
@mubashiralisiddiqui what project are you on?
MubashirAliSiddiqui.
@mubashiralisiddiqui
Aug 31 2016 18:06
bulild a tribute page
Joffrey Nolting
@Yovvel
Aug 31 2016 18:07
oke, is your question about choosing a person to create a tribute? or how to start coding te site?
MubashirAliSiddiqui.
@mubashiralisiddiqui
Aug 31 2016 18:09
yeah i dont understand how to start coding site how to give the image because when i give the link to other site its no t render is there any folder option in code pen so that i first download the image and then give the link
Joffrey Nolting
@Yovvel
Aug 31 2016 18:10
the image must be hosted somewhere on the internet
MubashirAliSiddiqui.
@mubashiralisiddiqui
Aug 31 2016 18:10
ok
Joffrey Nolting
@Yovvel
Aug 31 2016 18:10
can you show me the code about that image?
MubashirAliSiddiqui.
@mubashiralisiddiqui
Aug 31 2016 18:10
i am using the image by google
still stuck on the chaining part of the project.
Joffrey Nolting
@Yovvel
Aug 31 2016 18:12
@mubashiralisiddiqui <img scr="your google link" alt="some text">
MubashirAliSiddiqui.
@mubashiralisiddiqui
Aug 31 2016 18:13
the image is not render i do the same thing
Joffrey Nolting
@Yovvel
Aug 31 2016 18:16
@mubashiralisiddiqui can you give me your code?
probalby the wrong link.
MubashirAliSiddiqui.
@mubashiralisiddiqui
Aug 31 2016 18:17
its work now when i use the other link
Joffrey Nolting
@Yovvel
Aug 31 2016 18:17
ok, try to look at both of them, one of the ends with something like .jpg or .bmp or .png
MubashirAliSiddiqui.
@mubashiralisiddiqui
Aug 31 2016 18:18
but tell me i am new in this field i just started javascript how can i make the .io app by using java script
i can make using html and css but not javascript
Joffrey Nolting
@Yovvel
Aug 31 2016 18:19
dunno, not that far yet
MubashirAliSiddiqui.
@mubashiralisiddiqui
Aug 31 2016 18:20
what???
dunno??
Joffrey Nolting
@Yovvel
Aug 31 2016 18:21
i dont know
Daniel Plewnarz
@DANOSAUR55
Aug 31 2016 18:27
btw that's <img src and not <img scr in case that was the issue
BenBryant
@BenBryant
Aug 31 2016 18:55
Hi, just joined this chat. I'm about to start the tribute page build. Probably be here quite a lot!
Joakim Bajoul Kakaei
@Todai88
Aug 31 2016 18:55
Quick question. How would I go about aligning my <input>'s top with the top of it's parent?
If anyone would care to have a look at my pen the input I am referring to is "search-text" and it's parent is "search-wrapper":
(Click the icon to see my issue)
https://codepen.io/Todai/pen/jrNLvp
Jonathan Garland
@Garlandjon95
Aug 31 2016 19:05
Hey guys I need some help, I'm trying to put vector icons on my portfolio, and I dont even know the elements to use or anything
Steven Foster
@Rockchalk8985
Aug 31 2016 19:07
Haven't been on in a while and trying to add photos to my thumbnail code. Can anyone remind me what I need to do drawing a blank here
billpzt
@billpzt
Aug 31 2016 19:41
Hey everyone! This Random Quote Generator challenge is really annoying me: I built a very basic page but have absolutely NO idea how to implement the random quote API. I've been reading some API tutorials online, I've even gone back and redone the API challenges here, but there's really no good explanation anywhere. The Free Code Camp explanations kind of make sense when you consider them in that exercise's specific context, but I don't know how to modify those ideas to use in my situation. I understand the general idea about the JSON format, and that you have to get the info you want from somewhere. That's about it.
Piotr Brasiński
@pq25
Aug 31 2016 19:43
Hello guys. I've built random quote generator and it works perfectly well in brackets' live preview but it doesn't generate new quotes in codepen...
Parker Mitchell
@RParkerM
Aug 31 2016 19:44
@billpzt You can use a form of API to get random quotes from a source, and then randomly pick from the quotes you recieved, and there's possibly an API that just gives you a random quote, but you're not actually required to use any API for the quote machine
billpzt
@billpzt
Aug 31 2016 19:47
@RParkerM Yeah, I understand that. The problem is exactly how to do that! I Googled random quote APIs and found several pages. Have no idea how to use them in my page. And I know I could just hardcode the quotes in my HTML but then I won't learn to use APIs, which is important to learn...
I've got the button, got the area where the quote is supposed to appear... and now I'm got a huge "gap" in my knowledge where I don't know what to do next.
Parker Mitchell
@RParkerM
Aug 31 2016 19:51
@pq25 It seems to work fine for me, unless I accidentally select some of the text near the author. (not sure why it doesn't work in that case)
@billpzt Do you know how to retrieve JSON from an API?
baciualexandru
@baciualexandru
Aug 31 2016 19:53
developers from Detroit Michigan here? PM me
billpzt
@billpzt
Aug 31 2016 19:55
@billpzt Do you know how to retrieve JSON from an API?
@RParkerM Nope. The FCC lesson / challenge touches on that very briefly, I think, but I didn't understand. And I think I saw that mentioned in the tutorials I read too...
The most I've been able to figure out is I need a on button click event handler, which I copied from the challenge. That's it.
Parker Mitchell
@RParkerM
Aug 31 2016 19:59
Okay! That's a start. I'm scouring through the FCC projects in order to find something that will help you. I'm trying to remember where I learned how to do it. I'll check if the MDN has good examples that will help you
billpzt
@billpzt
Aug 31 2016 20:00
@RParkerM :+1:
What's MDN?
Drew Dusang
@dmdusang
Aug 31 2016 20:01
@Yovvel Thanks for looking man. I went with putting everything in a display:flex container
CamperBot
@camperbot
Aug 31 2016 20:01
dmdusang sends brownie points to @yovvel :sparkles: :thumbsup: :sparkles:
:cookie: 234 | @yovvel |http://www.freecodecamp.com/yovvel
Drew Dusang
@dmdusang
Aug 31 2016 20:01
works pretty well
Parker Mitchell
@RParkerM
Aug 31 2016 20:02
Mozilla Developer Network, it's usually really good for anything related to the DOM and browser APIs
It looks like for all of my projects involving getting JSON, I used jQuery, specifically the $.getJSON and $.ajax methods
billpzt
@billpzt
Aug 31 2016 20:02
@RParkerM I also copied a part of the challenge's code that supposedly fetches the JSON, but then don't know how to alter it to make it work for me...
Parker Mitchell
@RParkerM
Aug 31 2016 20:03
@billpzt Yeah, it looks like the FCC challenge doesn't really explain how it works and the parameters
I'm assuming you're talking about the one that uses the FCC Cat Api to get JSON using $.getJSON?
billpzt
@billpzt
Aug 31 2016 20:04
@RParkerM Exactly! It's all copy / paste! I knew I wasn't THAT stupid hahaha
Andrea Rocca
@sfogo5
Aug 31 2016 20:06
Hey guys! I’ve just finished the V1 of the quote machine
How bad does it look from 1 to 10000000? LOL
Parker Mitchell
@RParkerM
Aug 31 2016 20:07
This message was deleted
baciualexandru
@baciualexandru
Aug 31 2016 20:07
developrs from michigan detroit here?
billpzt
@billpzt
Aug 31 2016 20:07
I'm assuming you're talking about the one that uses the FCC Cat Api to get JSON using $.getJSON?
@RParkerM Yep, that's the one
Parker Mitchell
@RParkerM
Aug 31 2016 20:07
whoops, I accidentally deleted my post
I usually use jQuery's getJSON method like this
var url="http://urlForJSON"
$.getJSON(url, function(data){
  //This function will be called when the data is finished loading from the site you reference in url
  //the variable data should hold the JSON data you are looking for, you can use this to get the data
  //from your API
});
depending on the API you use to get quotes, it may be more difficult though
Does this help at all?
billpzt
@billpzt
Aug 31 2016 20:11
@RParkerM Ok, that makes more sense than what I've been reading so far
I'll see what I can do from here, thanks! @RParkerM
CamperBot
@camperbot
Aug 31 2016 20:11
billpzt sends brownie points to @rparkerm :sparkles: :thumbsup: :sparkles:
:cookie: 301 | @rparkerm |http://www.freecodecamp.com/rparkerm
Parker Mitchell
@RParkerM
Aug 31 2016 20:14
@billpzt You're welcome. Feel free to send me a message or notify me with @ if you need more help! I also noticed that the quotesondesign api page(the first result of googling for 'random quote api') gives an example of using their API with getJSON
Kevin Norris
@kevinnorris
Aug 31 2016 20:19
@sfogo5 Looks good, I like the images with each quote.
Andrea Rocca
@sfogo5
Aug 31 2016 20:19
@Steedler thanks! I think that the functionalities are alright, just the look and feel it’s kinda bad ahah
CamperBot
@camperbot
Aug 31 2016 20:19
sfogo5 sends brownie points to @steedler :sparkles: :thumbsup: :sparkles:
:cookie: 327 | @steedler |http://www.freecodecamp.com/steedler
Steven Foster
@Rockchalk8985
Aug 31 2016 20:20
Haven't been on in a while and trying to add photos to my thumbnail code. Can anyone remind me what I need to do drawing a blank here
Andrea Rocca
@sfogo5
Aug 31 2016 20:22
@Rockchalk8985 what do you mean? Do you want to set the src to something different or what?
Dylan
@dhcodes
Aug 31 2016 20:23
@Rockchalk8985 replace src="125x125.jpg" with src="linktoyourfile"
billpzt
@billpzt
Aug 31 2016 20:26
@RParkerM Cool, I'll look that up! Thanks again!
CamperBot
@camperbot
Aug 31 2016 20:26
billpzt sends brownie points to @rparkerm :sparkles: :thumbsup: :sparkles:
:warning: billpzt already gave rparkerm points
Aaron
@apalm1341
Aug 31 2016 20:26
http://codepen.io/ap1341/pen/bZXjdd Hey all. Could you let me know what you think of my portfolio project? I would greatly appreciate it
I have some concerns:1. making my form active/working and what to do about that
2.Do you think it looks better to center my form?
3.Not sure if I should make nav bar transparent like rest of page at very top of 1st page cause at very top of 1st page it's more darker black
4.On the About me section, should I do anything to fix up some of my words being next to the sun in the background picture?
5.If I click on Aaron M. Palm in nav bar, it won't scroll to very top of 1st page. Should I be concerned about this?
6.How should I go about adding media queries and making it work across all browsers if I should be worried about this at all?
Dylan
@dhcodes
Aug 31 2016 20:28
  1. You need to tie it to something like a database or google form spreadsheet
  2. center it
  3. I like it as it, but make the fade much faster
  4. add a text-shadow or add a filter to the img
  5. your call, but wouldn't be too hard to add an anchor to the top
  6. yes, mobile first design is super important: read this:https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
@apalm1341
vínαч puppαl
@vinaypuppal
Aug 31 2016 20:34
@apalm1341 you can use https://formspree.io/ API to handle contact form
Just send your form to their API URL and they will forward it to your email.
Aaron
@apalm1341
Aug 31 2016 20:34
@dhcodes thank-you so much for the awesome feedback
CamperBot
@camperbot
Aug 31 2016 20:34
apalm1341 sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1376 | @dhcodes |http://www.freecodecamp.com/dhcodes
vínαч puppαl
@vinaypuppal
Aug 31 2016 20:35
@apalm1341 and note Formspree is free for 1000 submissions per email each month. which would be sufficient i think.
Dylan
@dhcodes
Aug 31 2016 20:39
@apalm1341 there may be a way to have it generate an email to you every time the form is submitted too
idk
Gryff Coates
@mrbrit2
Aug 31 2016 20:39

http://codepen.io/mrbrit/full/kXKvLd/

Hey all, mind checking out my random quote generators so see if you can see anything wrong with it :)

vínαч puppαl
@vinaypuppal
Aug 31 2016 20:44
@mrbrit2 .quoteBox is far right of screen. make it appear at centre. You can do that by
.quoteBox{
 margin-left: auto;
margin-right: auto;
}
Dylan
@dhcodes
Aug 31 2016 20:47
@mrbrit2 worked for me. Also some quotes have an extra space before the " at the end.
Piotr Brasiński
@pq25
Aug 31 2016 21:10
http://codepen.io/pq25/pen/ZpzkZr Hi, my random quote generator works well with mozilla, but when i open it with chrome I cannot generate any quotes.
Whenever I click the button I get the message in my console - XMLHttpRequest cannot load http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=40&callback=. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access. Could you please tell me how to fix this?
Jason Luboff
@JLuboff
Aug 31 2016 21:11
@pq25 Did you verify you're running Codepen over http instead of https when in Chrome?
Draidel
@Draidel
Aug 31 2016 21:12
Hello, anyone could tell me why my timeline column isnt centered?
Parker Mitchell
@RParkerM
Aug 31 2016 21:15
@Draidel It looks like it works to me? What issue are you having?
billpzt
@billpzt
Aug 31 2016 21:15
So... Still struggling to understand APIs here... My code doesn't work and I have no idea why. Any help? Here goes:
$(document).ready(function() {
  $('#newQuoteButton').on('click', function() {
    var url="http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1"
$.getJSON(url, function(data){
  $('#blockquote').html(data);
});
  });
the doer
@ewathedoer
Aug 31 2016 21:15
@Draidel use text-center class instead of col-centered
Draidel
@Draidel
Aug 31 2016 21:15
@RParkerM well, the timeline is not centered, its a bit on the left
@ewathedoer i will try that !
the doer
@ewathedoer
Aug 31 2016 21:16
it works @Draidel, I checked it
Draidel
@Draidel
Aug 31 2016 21:17
@ewathedoer thanks !
CamperBot
@camperbot
Aug 31 2016 21:17
draidel sends brownie points to @ewathedoer :sparkles: :thumbsup: :sparkles:
:cookie: 483 | @ewathedoer |http://www.freecodecamp.com/ewathedoer
Piotr Brasiński
@pq25
Aug 31 2016 21:19
@JLuboff I got this message mentioned above in console when I'm opening site with http://
Draidel
@Draidel
Aug 31 2016 21:19
@ewathedoer one last question. What is the correct div to add the text-center class? container, row or col ?
the doer
@ewathedoer
Aug 31 2016 21:20
@Draidel I’ve added it to the div with the class col-6
Jason Luboff
@JLuboff
Aug 31 2016 21:21
@pq25 I misread what you had wrote, I thought the error was mentioning https, not http, my mistake :(
Draidel
@Draidel
Aug 31 2016 21:21
@ewathedoer good
Im trying to disable adding two operations at the same time
but unsuccessful so far
could anyone help?
Piotr Brasiński
@pq25
Aug 31 2016 21:25
@JLuboff no problem :) Do you have any idea how to make it work for chrome? When I copy the code to brackets and open it with live preview in chrome it works perfectly well. This issue only happens when i try to open my pen from codepen via chrome...
Jason Luboff
@JLuboff
Aug 31 2016 21:27
@pq25 I just popped it into Chrome, and the quotes are working
Clear console too
Piotr Brasiński
@pq25
Aug 31 2016 21:27
@JLuboff damn its weird :D
Jason Luboff
@JLuboff
Aug 31 2016 21:28
Do you maybe have any extensions/add-on's in chrome?
Also, I'm running Chrome within Windows..are you using a different operating system?
Junaidrai
@junaidrai
Aug 31 2016 21:31
hey guys i have a project challenge for portfolio website !!
but the sample website they give me link to... image to this website are all corrupt or i dont know image are not opening broken image link icon shown !!https://codepen.io/FreeCodeCamp/full/YqLyXB/
please help :smile:
Jason Luboff
@JLuboff
Aug 31 2016 21:32
@junaidrai Ya images are broken, I'm guessing their host is down. Doesn't change the layout though
Piotr Brasiński
@pq25
Aug 31 2016 21:32
@JLuboff I have windows 7. Disabled all my extensions and problem still occurs. Tried it with opera and ie - worked well. I'll reinstall my chrome - maybe it will help :P
Jason Luboff
@JLuboff
Aug 31 2016 21:33
@pq25 Ya Windows 10 here, but I believe Chrome versions are still the same between them. I'd say it is an issue with your chrome as opposed to your code, so thats a positive!
Draidel
@Draidel
Aug 31 2016 21:38
@ewathedoer Look, the content is centere but the column is not
Junaidrai
@junaidrai
Aug 31 2016 21:39
so try it with another browser you guys saying ?
Draidel
@Draidel
Aug 31 2016 21:40
@RParkerM the column is centered for you ?
Jason Luboff
@JLuboff
Aug 31 2016 21:41
@junaidrai No...the images are down currently, a different browser shouldn't make a difference, but the fact that the images are down does not change the overall functionality of the webpage
Junaidrai
@junaidrai
Aug 31 2016 21:42
1st image is round so how would i know... how images are shaped !!
can i ask for another portfolio website ??
Jason Luboff
@JLuboff
Aug 31 2016 21:43
@junaidrai Your portfolio does not need to match the example, it is only an example. You should be creating your own that has your own flair
Junaidrai
@junaidrai
Aug 31 2016 21:45
okay !! :smile: thanks @JLuboff appreciated !! Then i am gonna start making it :+1:
CamperBot
@camperbot
Aug 31 2016 21:45
junaidrai sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 335 | @jluboff |http://www.freecodecamp.com/jluboff
Jason Luboff
@JLuboff
Aug 31 2016 21:46
:+1:
Mikail Bayram
@mikail1998
Aug 31 2016 21:51
Could anyone help me with my problem pleaase
Jason Luboff
@JLuboff
Aug 31 2016 21:53
@mikail1998 you can always post your question and see if someone has an answer
Mikail Bayram
@mikail1998
Aug 31 2016 21:53
I posted
but no one answered yet...
@mikail1998
http://codepen.io/mikail1998/pen/pbQjVN
Im trying to disable adding two operations at the same time
but unsuccessful so far
could anyone help?
Stephen James
@sjames1958gm
Aug 31 2016 21:56
@mikail1998 @mikail1998 You'll probably need to maintain state, such as number entered operator entered, etc.
Mikail Bayram
@mikail1998
Aug 31 2016 21:57
@sjames1958gm im sorry but i cant follow you. Could you be more specific?
Stephen James
@sjames1958gm
Aug 31 2016 22:02
@mikail1998 A variable that indicates the state of the calculator.
var state = "start"; this means that you will accept numbers.
After a number is entered state="number" then you will accept number or operator
When a operator is entered you state = "operator";
In the "operator" you ignore operator button clicks.
You can draw a diagram that shows the state and what happens for each button click.
Mikail Bayram
@mikail1998
Aug 31 2016 22:03
@sjames1958gm i will definitely try that thanks
CamperBot
@camperbot
Aug 31 2016 22:03
mikail1998 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 2990 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Aug 31 2016 22:03
@mikail1998 Good luck!
You can google state machine or state diagram for further research
melisa pettaway
@mpettaw2
Aug 31 2016 22:05
so i am starting on the pomodoro clock challenge....i am not sure where to start.
yes... i am idea hunting again
Mikail Bayram
@mikail1998
Aug 31 2016 22:07
@sjames1958gm o my God there was no need for that
i just put the str variable underneath on.click function
and everything was just fine
Alexander Domikov
@AlexanderDom
Aug 31 2016 22:08
@mpettaw2 me too i'm there
Stephen James
@sjames1958gm
Aug 31 2016 22:10
@mikail1998 :)
Alexander Domikov
@AlexanderDom
Aug 31 2016 22:10
i thought about create variables for pomodoro time and pause inside same function and while pomodoro is not ended every one second i verify :) (just idea because of lazyness i do everything but exercise ><)
they've talked about ringing sound so i read about web audio api even if i haven't heared a sound on reference codepen :(
What do you think?
tyl-er
@tyl-er
Aug 31 2016 22:37

Having trouble with the Wikipedia viewer. It looks like codepen stops reading my JS when I get to the async line of my ajax function. Right now I just want to log the json to the console.

$(document).ready(function() {

$("#search").on("click", function() {
//Code for seach button

var searchTerm = $("#searchTerm").val();
//set input text = variable
var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchTerm + "&limit=10&namespace=0&format=jsonfm"
  //"https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchTerm + "&limit=10&namespace=0&format=jsonfm"
  // need to set api url = variable  

$.ajax({
  type: "GET",
  url: url,
  contentType: "application/json; charset=utf-8",
  async: false,
  dataType: "json",
  success: function(data, textStatus, jqXHR) {
    console.log(data);
  },
  error: function(errorMessage) {}
    //ajax statement
});

});

});

http://codepen.io/tyl-er/pen/ALAyjq?editors=0001

tyl-er
@tyl-er
Aug 31 2016 22:47
Saw a small mistake url = https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchTerm + "&limit=10&namespace=0&format=jsonfm&callback=?
tyl-er
@tyl-er
Aug 31 2016 22:55
any ideas?
Matt K
@mkrump
Aug 31 2016 23:12
Would some kind soul be willing to chat about layout? :smile: https://codepen.io/okeydoke/pen/rrBEvm
can't shrink the bottom row
Matt K
@mkrump
Aug 31 2016 23:22
@tyl-er seemed like it was working to me. do you mind explaining a the issue a bit more?
Stephen James
@sjames1958gm
Aug 31 2016 23:30
@tyl-er Worked fine for me, both click and enter (I would move the common code to a function and call it from each handler)
Micah Lewis
@EastML
Aug 31 2016 23:45
Is anyone having trouble running bootstrap in codepen? It's been working up until I opened it today. I tried my own project, as well as viewing a few others and it's just not formatting in bootstrap at all.