These are chat archives for FreeCodeCamp/HelpFrontEnd

21st
Jun 2016
Bailey
@coder7215
Jun 21 2016 00:08
Any ideas?
Julie
@jurijuri
Jun 21 2016 00:12
Hey y'all! I'm almost done with my random quote generator, but I'm having trouble updating my Twitter button. Can you help? http://codepen.io/jurijuri/pen/ezdxQw
JD Tadlock
@jdtdesigns
Jun 21 2016 00:18
@coder7215 I'm not sure what you're wanting to achieve.
Bailey
@coder7215
Jun 21 2016 00:20
@jdtdesigns I ideally would like the image to not only stay within the #about div that it is supposed to be in, but also get smaller when the screen gets smaller (resize with the screen). Again, here is my pen: https://codepen.io/coder7215/pen/YWqemv?editors=1100 Does that make sense? :)
Jack Lyons
@JackEdwardLyons
Jun 21 2016 00:23
have you tried the class img-responsive? @coder7215
that makes images scale with the window size
JD Tadlock
@jdtdesigns
Jun 21 2016 00:24
@coder7215
<img class="img-responsive" src="http://grsf.org/wp-content/uploads/2015/05/Bailey-Bestul.jpg" alt="Bailey Bestul">
Bailey
@coder7215
Jun 21 2016 00:24
@JackEdwardLyons I did put that in my code . . . and now image seems way too large.
JD Tadlock
@jdtdesigns
Jun 21 2016 00:24
@coder7215 img-responsive does not control the size
it simply does not allow the image to overflow outside it's parent
Jack Lyons
@JackEdwardLyons
Jun 21 2016 00:25
max-width ? @coder7215
JD Tadlock
@jdtdesigns
Jun 21 2016 00:25
@JackEdwardLyons That's all img-responsive is
Bailey
@coder7215
Jun 21 2016 00:25
Ah hah! I think that did it.
Let me check. Thanks @JackEdwardLyons and @jdtdesigns
CamperBot
@camperbot
Jun 21 2016 00:25
coder7215 sends brownie points to @jackedwardlyons and @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 304 | @jackedwardlyons |http://www.freecodecamp.com/jackedwardlyons
:cookie: 534 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Tyler Moeller
@TylerMoeller
Jun 21 2016 00:25
@jdtdesigns @JackEdwardLyons To catch you guys up, he sees no difference in the image size by using this code:
<div class="container-fluid" id="about">
  <div class="row">
    <div class="col-xs-4" id="selfPhoto">
      <img class="img-responsive" src="http://grsf.org/wp-content/uploads/2015/05/Bailey-Bestul.jpg" alt="Bailey Bestul">
    </div>
    <div class="col-xs-8">
      <h3>Hello friends.</h3>
    </div>
  </div>
</div>
@coder7215 Unless you didn't copy/paste that code :)
JD Tadlock
@jdtdesigns
Jun 21 2016 00:26
@TylerMoeller It made a difference when I used it lol.
Tyler Moeller
@TylerMoeller
Jun 21 2016 00:26
Lol
Jack Lyons
@JackEdwardLyons
Jun 21 2016 00:26
img needs a width
Dan Logajan
@hiltydiggs
Jun 21 2016 00:26
@JackEdwardLyons so I came up with a most likely crappy solution to that challenge
Jack Lyons
@JackEdwardLyons
Jun 21 2016 00:26
@coder7215 make it 300px
Dan Logajan
@hiltydiggs
Jun 21 2016 00:27
@JackEdwardLyons did you finish it already?
Jack Lyons
@JackEdwardLyons
Jun 21 2016 00:27
nah, im trying now to push the new object into the array
but dont know how... :\
i know this is wrong... but my brain is fried tbh @hiltydiggs
for ( var i = 0; i < collection.length; i++ ) {
    if ( collection[i].hasOwnProperty(testKey) ) {
      arr.push(testKey + testValue);
      }
    }
Bailey
@coder7215
Jun 21 2016 00:31
Okay I think I got it. What do you think: https://codepen.io/coder7215/pen/ezdoXr?editors=1100
Ugh! Now why is it exiting the div it is in when I post it in chat? Is there a way to solve that issue?
Jack Lyons
@JackEdwardLyons
Jun 21 2016 00:32
why does this work
 arr.push({ testKey : testValue} );
Dan Logajan
@hiltydiggs
Jun 21 2016 00:32
@JackEdwardLyons I'm just going to put my whole solution out so that I can hopefully learn what's wrong with my approach from others. But it passes all tests.
function whereAreYou(collection, source) {
  var arr = [];
  // Only change code below this line
  var testKeys = Object.keys(source),
      rqrd = testKeys.length,
      collectionLength = collection.length,
      i,
      j,
      matched,
      currentKey,
      currentItem;

  for (i = 0; i < collectionLength; i++) {
    matched = 0;
    currentItem = collection[i];

    for (j = 0; j < rqrd; j++) {
      currentKey = testKeys[j];
      if (currentItem.hasOwnProperty(currentKey) && currentItem[currentKey] === source[currentKey]) {
        matched++;
      }
    }
    if (matched === rqrd) {
      arr.push(currentItem);
    }
  }
  // Only change code above this line
  return arr;
}

whereAreYou([{ "a": 1, "b": 2 }, { "a": 1 }, { "a": 1, "b": 2, "c": 2 }], { "a": 1, "c": 2 });
Stephen James
@sjames1958gm
Jun 21 2016 00:33
@JackEdwardLyons you are pushing an object literal which is valid
DuskyPixel
@DuskyPixel
Jun 21 2016 00:33
@JackEdwardLyons try arr.push(testValue);
Bailey
@coder7215
Jun 21 2016 00:33
Yikes. You all probably think I'm crazy . . . :P
Oh! Because the COLUMN will only change the HORIZONTAL size . . . so how do I change the VERTICAL size? Can Bootstrap do that?
Jack Lyons
@JackEdwardLyons
Jun 21 2016 00:34
i get this arr.push({ testKey : testValue} );
i thought I wanted to push the key and the value?
DuskyPixel
@DuskyPixel
Jun 21 2016 00:35
what lesson are you on?
Dan Logajan
@hiltydiggs
Jun 21 2016 00:35
Bailey
@coder7215
Jun 21 2016 00:36
Ah! I think I got it!
:)
Dan Logajan
@hiltydiggs
Jun 21 2016 00:36
@JackEdwardLyons you want to push the whole object if it contains all key/values in the source object.
Jack Lyons
@JackEdwardLyons
Jun 21 2016 00:37
yeah
so wouldnt i do testKey + testValue ? @hiltydiggs
Dan Logajan
@hiltydiggs
Jun 21 2016 00:39
@JackEdwardLyons look at my solution above and see if you can deconstruct it. I lead you down a slightly wrong path originally, I believe.
Chidders
@Chidders
Jun 21 2016 00:40
for the "build a tribute page" am i supposed to already know how to build it by heart or is it ok to go back to my cat app for reference
Dan Logajan
@hiltydiggs
Jun 21 2016 00:41
@Chidders you can use all the reference and documentation you want.
Julie
@jurijuri
Jun 21 2016 00:41
@Chidders I go back to my earlier pages all the time :)
Chidders
@Chidders
Jun 21 2016 00:41
oh alright thanks i didn't want to be cheating myself
Jack Lyons
@JackEdwardLyons
Jun 21 2016 00:41
wow ok... looks complicated @hiltydiggs why did you make a variable called rqrd..whats that stand for
actually, nah it looks ok.. thanks
but wondering why you named that variable
Dan Logajan
@hiltydiggs
Jun 21 2016 00:45
@JackEdwardLyons storing the length in a variable is more efficient in a for loop because the loop doesn't need to re-look up the length property of the array every time through the loop. It's a tiny efficiency, but just practicing best-practices I guess. rqrd stands for required in this case and I named it that because it's the number of matches required for the object to match the test case.
@JackEdwardLyons like I said, there's probably a much better way to do this challenge. I was hoping somebody else would provide insight.
Jack Lyons
@JackEdwardLyons
Jun 21 2016 00:48
nah, i get it now... just takes me a loooong time to understand the logic... i want to be able to write these scripts from scratch but find it soo damn hard to do
Dan Logajan
@hiltydiggs
Jun 21 2016 00:53
I'm know for sure it will start to make more sense to you as long as you keep at it. It's definitely frustrating at times, but if it was easy we wouldn't get paid!
Jack Lyons
@JackEdwardLyons
Jun 21 2016 00:55
in this case does matched ++ mean that it will add new objects? i thought it was only reserved for numbers?
@hiltydiggs
Dan Logajan
@hiltydiggs
Jun 21 2016 00:58
matched is a value that starts at 0 each time through the i loop. If the conditions in the if statement are met, matched++ adds one to the value of matched.
The currentItem.hasOwnProperty part was unnecessary.
function whereAreYou(collection, source) {
  var arr = [];
  // Only change code below this line
  var testKeys = Object.keys(source),
      rqrd = testKeys.length,
      collectionLength = collection.length,
      i,
      j,
      matched,
      currentKey,
      currentItem;

  for (i = 0; i < collectionLength; i++) {
    matched = 0;
    currentItem = collection[i];

    for (j = 0; j < rqrd; j++) {
      currentKey = testKeys[j];
      if (currentItem[currentKey] === source[currentKey]) {
        matched++;
      }
    }
    if (matched === rqrd) {
      arr.push(currentItem);
    }
  }
  // Only change code above this line
  return arr;
}

whereAreYou([{ "a": 1, "b": 2 }, { "a": 1 }, { "a": 1, "b": 2, "c": 2 }], { "a": 1, "c": 2 });
Gabriel Alexandre
@GabrielShaad
Jun 21 2016 01:24
Hello world! I am developing my Portfolio page and I have an issue with the navbar. When it is small, the list of links becomes vertical, but I want it horizontal, like when it is in a big screen. How can I do it?
http://codepen.io/gabrielshaad/pen/BzLRdm?editors=1100
CamperBot
@camperbot
Jun 21 2016 01:24

welcome to FreeCodeCamp @GabrielShaad!

Gabriel Alexandre
@GabrielShaad
Jun 21 2016 01:25
Oh, and it is also overlapping the website.
I tried modifying the padding of the body like it is mentioned in the Bootstrap documentation, but it seems it failed.
Jack Lyons
@JackEdwardLyons
Jun 21 2016 01:27
hey im wondering why my console.log in the nested loop isn't working?

function whereAreYou(collection, source) {
  // What's in a name?
  var arr = [];

  /* Set variables */
  var sourceKey = Object.keys(source); // create array for source key
  console.log(sourceKey);

  var testKey = Object.keys(source)[0]; // show source key as string
  console.log(testKey);

  var testValue = source[testKey]; // show source value as string
  console.log(testValue);


for ( var i = 0; i < collection.length; i++ ) {
    var collectedItems = collection[i];

  for (var j = 0; j < source.length; j++ ) {
    if ( collection[i].hasOwnProperty(sourceKey[j]) ) {
      console.log("hellllllllooooo?");
    }
  }  
}

  return arr;
}

whereAreYou([{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }], { last: "Capulet" });
Dan Logajan
@hiltydiggs
Jun 21 2016 01:48
@JackEdwardLyons I see it. source is an object, so it doesn't have a length property.
Jack Lyons
@JackEdwardLyons
Jun 21 2016 01:48
ah ok
so...
Dan Logajan
@hiltydiggs
Jun 21 2016 01:49
you could use sourceKey.length
Islam Ibakaev
@dagman
Jun 21 2016 01:50
@JackEdwardLyons what about this :smile:
function whereAreYou(first, second){
  var cond = JSON.stringify(second).slice(1, -1).split(',');
  console.log(cond);
  return first
  .map(function(el) {
    return JSON.stringify(el);
  })
  .filter(function(el) {
      for(var condition of cond) {
          if(!el.includes(condition)) return false;
      }
      return true;
  })
  .map(function(el) {
      return JSON.parse(el);
  });
}
@JackEdwardLyons have just made it for u
Jack Lyons
@JackEdwardLyons
Jun 21 2016 01:50
haha my eyes just glaze over that code
thanks @dagman
CamperBot
@camperbot
Jun 21 2016 01:50
jackedwardlyons sends brownie points to @dagman :sparkles: :thumbsup: :sparkles:
:cookie: 586 | @dagman |http://www.freecodecamp.com/dagman
Jack Lyons
@JackEdwardLyons
Jun 21 2016 01:50
but i have no idea whats going
Islam Ibakaev
@dagman
Jun 21 2016 01:51
@JackEdwardLyons it is not hard at all
Jack Lyons
@JackEdwardLyons
Jun 21 2016 01:51
so you slice away the brackets on source ?
Islam Ibakaev
@dagman
Jun 21 2016 01:51
@JackEdwardLyons yep
Jack Lyons
@JackEdwardLyons
Jun 21 2016 01:52
then return first right away? why?
Islam Ibakaev
@dagman
Jun 21 2016 01:54
@JackEdwardLyons the first get under .map .fiter and .map
Dan Logajan
@hiltydiggs
Jun 21 2016 01:54
@dagman nice work!
Islam Ibakaev
@dagman
Jun 21 2016 01:55
@JackEdwardLyons you should check docs on this methods and also JSON.stringify and JSON.parse and i bet all stuff suddenly will be easy to understand
@hiltydiggs thx :smile:
CamperBot
@camperbot
Jun 21 2016 01:55
dagman sends brownie points to @hiltydiggs :sparkles: :thumbsup: :sparkles:
:cookie: 554 | @hiltydiggs |http://www.freecodecamp.com/hiltydiggs
Jack Lyons
@JackEdwardLyons
Jun 21 2016 01:55
ok thanks @dagman
CamperBot
@camperbot
Jun 21 2016 01:55
jackedwardlyons sends brownie points to @dagman :sparkles: :thumbsup: :sparkles:
:warning: jackedwardlyons already gave dagman points
Islam Ibakaev
@dagman
Jun 21 2016 01:56
@JackEdwardLyons yw
Gabriel Alexandre
@GabrielShaad
Jun 21 2016 01:56
Any help with the navbar?
Jack Lyons
@JackEdwardLyons
Jun 21 2016 02:05
can someone please explain nested for loops with variables that have something like this
variable[i][j]
when it is nested in two loops
what does that mean
Greg Duncan
@GregatGit
Jun 21 2016 02:09
@JackEdwardLyons i simple one would be to console.log each number in this arr var myArr = [ [1, 2 ], [3, 4 ] ];

@JackEdwardLyons

var myArr = [ [1,2], [3,4]];

for (var i = 0; i < myArr.length; i++){
    for (var j = 0; j < myArr[i].length; j++)
        console.log(myArr[i][j]);
}

the second for loop is nested in the first

Jack Lyons
@JackEdwardLyons
Jun 21 2016 02:15
ah ok
so its not like bracket notation?
so it adds [i] first then [j]
Greg Duncan
@GregatGit
Jun 21 2016 02:18
console.log(myArr[1][0]); / / => 3
@JackEdwardLyons there is no adding
Jack Lyons
@JackEdwardLyons
Jun 21 2016 02:20
it displays
Greg Duncan
@GregatGit
Jun 21 2016 02:21
it accesses it
var myArr = [ [1,2], [3,4]];
myArr[0][1] = 'apple';

for (var i = 0; i < myArr.length; i++){
    for (var j = 0; j < myArr[i].length; j++)
        console.log(myArr[i][j]);
}
that for loop would put out
1
apple
3
4
Greg Duncan
@GregatGit
Jun 21 2016 02:35
@JackEdwardLyons I looked at your code
source.length is undefined
Jack Lyons
@JackEdwardLyons
Jun 21 2016 02:36
ok
Greg Duncan
@GregatGit
Jun 21 2016 02:36
source is an object.
Jack Lyons
@JackEdwardLyons
Jun 21 2016 02:36
thanks @GregatGit i think i got it
CamperBot
@camperbot
Jun 21 2016 02:36
jackedwardlyons sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 612 | @gregatgit |http://www.freecodecamp.com/gregatgit
Jack Lyons
@JackEdwardLyons
Jun 21 2016 02:38
yeah, so this code...
collection[i][sourceKey[j]]
how does it work?
Greg Duncan
@GregatGit
Jun 21 2016 02:41
@JackEdwardLyons do you know how to run a snippet in the chrome dev tools?
collection[i][sourceKey[j]] - collection is an array so collection[i] will give you the first thing in the collection that happens to be an object
becauce collection[i] is an object if you put a property in [] after it - since sourceKey[j] is a string
Lars
@Oppenheimer1
Jun 21 2016 02:54
is anyone around I can ask code questions to?
Greg Duncan
@GregatGit
Jun 21 2016 02:57
@Oppenheimer1 we might be able to help
Lars
@Oppenheimer1
Jun 21 2016 02:59
I just figured it out. I was trying to see why my code wasn't passing all the tests but it's because I built it to pass the function and not to remove items from the array using shift but here's what I had for the Drop it algorithm
function dropElements(arr, func) {
// Drop them elements.
var newArr = [];
for(var i=0; i<arr.length; i++){
if(func(arr[i]) === true){
newArr.push(arr[i]);
}
}
return newArr;
}
dropElements([1, 2, 3], function(n) {return n < 3; });
also how do I get my code to display like code and not like this in a post
Greg Duncan
@GregatGit
Jun 21 2016 03:01
``` on a seperate line before and after the code
you can just edit your post above
Dan Logajan
@hiltydiggs
Jun 21 2016 03:01
use three backticks (left of the '1' key) before and after the code
Greg Duncan
@GregatGit
Jun 21 2016 03:03
This message was deleted
CamperBot
@camperbot
Jun 21 2016 03:03
:bulb: to format code use backticks! ``` more info
Lars
@Oppenheimer1
Jun 21 2016 03:04
I love that robot thing. It's like Iron Man's assistant friend before it became that Superhero Vison character.
cool, thx Greg and Dan
Dan Logajan
@hiltydiggs
Jun 21 2016 03:05
var arrayOfObjects = [{"a": 5}, {"b": 7}, {"c": 9}];
//to access an array item, we use it's index (starting from 0) in square brackets
//so arrayOfObjects[0] === {"a": 5}, arrayOfObjects[1] === {"b": 7}, arrayOfObjects[2] === {"c": 9}
@JackEdwardLyons
Abdoul rachid ayouba
@abdoul-rachid
Jun 21 2016 03:06

<style>
.red-text {
color: red;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

how do i create an entry for p elements and set up the font-size to 16px
i have been struggling on this, any help would appreciated
Dan Logajan
@hiltydiggs
Jun 21 2016 03:08
In css, html elements are just selected with their name
p {
  font-size: 16px;
}
Abdoul rachid ayouba
@abdoul-rachid
Jun 21 2016 03:09
the question says inside the same style class
Dan Logajan
@hiltydiggs
Jun 21 2016 03:10
<style>
.red-text {
  color: red;
  font-size: 16px;
}
</style>
Abdoul rachid ayouba
@abdoul-rachid
Jun 21 2016 03:10
that's exactly what i'm doing but it's wrong
Dan Logajan
@hiltydiggs
Jun 21 2016 03:11
Does it say inside the style element or class?
OceanMountains
@OceanMountains
Jun 21 2016 03:11

I'm trying to finish up the Twitch API project. I can't figure out why channels that are "online" show up as "offline." I used an if/else to display if shows are offline/unavailable/online. Right now, the "unavailable" shows display as "unavailable" so it is working to some extent. Anyone have any insight?

http://codepen.io/OceanMountains/pen/MewxWO

Dan Logajan
@hiltydiggs
Jun 21 2016 03:12
<style>
.red-text {
  color: red;
}

p {
  font-size: 16px;
}
</style>
OceanMountains
@OceanMountains
Jun 21 2016 03:22
(it doesn't run in Chrome but will run in other browsers)
Dan Logajan
@hiltydiggs
Jun 21 2016 03:23
@OceanMountains sorry, I don't see the problem off hand.
OceanMountains
@OceanMountains
Jun 21 2016 03:24
Thanks for taking a look @hiltydiggs. I feel like I'm close.
CamperBot
@camperbot
Jun 21 2016 03:24
oceanmountains sends brownie points to @hiltydiggs :sparkles: :thumbsup: :sparkles:
:cookie: 555 | @hiltydiggs |http://www.freecodecamp.com/hiltydiggs
Dan Logajan
@hiltydiggs
Jun 21 2016 03:27
@OceanMountains off subject, but I would also recommend creating a constructor function or something for the $scope.stream objects. As it is now, if you wanted to add/remove/edit users you have to do it in multiple locations. var channels = [...] could be used to create the objects and it would be more maintainable. Just a small suggestion.
OceanMountains
@OceanMountains
Jun 21 2016 03:31
Yeah that's a good call as that part of that code is a jumble and pretty repetitive. That would help simplify it better.
Suzanne Atkinson
@AdventureBear
Jun 21 2016 03:43
Hey guys, wikipedia viewer API question...I'm getting a returned query, but it lists an article ID, and the extract of the page is under that ID in the object. How do I access it programatically if the ID is changing with each query?
Greg Duncan
@GregatGit
Jun 21 2016 03:54
@AdventureBear can we see your pen
Suzanne Atkinson
@AdventureBear
Jun 21 2016 03:58
sure I broke the rules and just looked at the query in the example. I never would have come up with the same ones
Greg Duncan
@GregatGit
Jun 21 2016 03:58
@OceanMountains @OceanMountains is right about your pen - it should be build in such a way that just by adding the channel name it will generate everything you need.
Suzanne Atkinson
@AdventureBear
Jun 21 2016 04:00
@GregatGit I think the answer is that I need to enumerate through the returned value whether it's one return or several
Greg Duncan
@GregatGit
Jun 21 2016 04:01
@AdventureBear var myKeys = Object.keys(data.query.pages);
OceanMountains
@OceanMountains
Jun 21 2016 04:01
@AdventureBear when I did that project I used a JSONP callback to return 10 suggestions in json format based on my search query.
Greg Duncan
@GregatGit
Jun 21 2016 04:02
that will give you an array of all the pages
@AdventureBear trying to figure out wikipedia's api is more art than science - best just to get your app working
Suzanne Atkinson
@AdventureBear
Jun 21 2016 04:04
yeah there are a ton of params.
thansk for the tips. What I have so far came together quickly.
of course there are only a few elements
OceanMountains
@OceanMountains
Jun 21 2016 04:20
All right @GregatGit I appreciate your input.
buiphuking
@buiphuking
Jun 21 2016 04:22
sorry guys, but i wanna ask something out of code a bit, do you know any free software or apps show vocabulary on desktop to learn vocabulary???????/
Greg Duncan
@GregatGit
Jun 21 2016 04:26
@buiphuking www.duolingo.com
buiphuking
@buiphuking
Jun 21 2016 04:27
thanks @GregatGit
CamperBot
@camperbot
Jun 21 2016 04:27
buiphuking sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 613 | @gregatgit |http://www.freecodecamp.com/gregatgit
Chong Park
@ElisePark
Jun 21 2016 04:39
Hello
Suzanne Atkinson
@AdventureBear
Jun 21 2016 04:42
yay it's working @GregatGit ! it's not perfect but it does the job. Couple of improvements would be clickable titles, cool hover effects, and being able to search more than once in a row. I don't know why it' won't search a 2nd time.
Greg Duncan
@GregatGit
Jun 21 2016 04:43
@AdventureBear looking great
Suzanne Atkinson
@AdventureBear
Jun 21 2016 04:46
thanks!
Javier von Marées
@JavierVMR
Jun 21 2016 04:53
Hello! im using codepen for the first assignment of front end course, but I cant make jquery work
in the html well i have <div class="container fluid" id="Second-body">
<h1 class="red-text" id="target1">Leo Tolstoy</h1>
</div>
made up some classes and ids such as in the course's example to try to target them, but when i write the following in the JS window, nothing happens $(document).ready(function() {
$("#Second-body").children().css("text-align", "center");
$("#target1").css("color", "red");
$(".red-text").css("color", "red");
});
anyone can explain me :c? CSS input works fine
DJ
@qualitymanifest
Jun 21 2016 04:58
@JavierVMR paste the link to your codepen, it's shorter and better than a code snippet
Javier von Marées
@JavierVMR
Jun 21 2016 05:01
mmm let me see
Suzanne Atkinson
@AdventureBear
Jun 21 2016 05:02
@JavierVMR did you include jquery in your codepen in the settings?
Suzanne Atkinson
@AdventureBear
Jun 21 2016 05:03
I"m ready to start SIMON! It seems like this is largely a test in CSS positioning, plus the logic of the game. Is that right?
Javier von Marées
@JavierVMR
Jun 21 2016 05:03
I put in the fast setups the bootstrap
Suzanne Atkinson
@AdventureBear
Jun 21 2016 05:04
go to settings - > javascript -> quick add (at the bottom) and select jquery
Javier von Marées
@JavierVMR
Jun 21 2016 05:04
aaah jaaa! that was :) thanks @AdventureBear
CamperBot
@camperbot
Jun 21 2016 05:04
javiervmr sends brownie points to @adventurebear :sparkles: :thumbsup: :sparkles:
:cookie: 444 | @adventurebear |http://www.freecodecamp.com/adventurebear
Suzanne Atkinson
@AdventureBear
Jun 21 2016 05:04
:) you're welcome
I try to give a little when I take from the help room here. :)
good luck
DJ
@qualitymanifest
Jun 21 2016 05:05
@AdventureBear pretty much, yeah. you will likely find yourself using setInterval and/or setTimeout
Martialis39
@Martialis39
Jun 21 2016 05:22
@AdventureBear yeah TBH I found the most difficult bit to be how to present the sequence to the player AND THEN listening for the player to input it
@AdventureBear I think Calc and or TicTacToe are most CSS focused since you CAN stray from the original Simon design
Suzanne Atkinson
@AdventureBear
Jun 21 2016 05:29
@Martialis39 OK, i've done both of those, so that's good to hear. I have this after a few minutes of tinkering with positioning. CSS positining is NOT a strong point, so these challenges are tedious for me. I like to get the look right first, then the functioning is a little easier.
looks pretty lopsided, lol.
thanks @Martialis39 @qualitymanifest
CamperBot
@camperbot
Jun 21 2016 05:32
adventurebear sends brownie points to @martialis39 and @qualitymanifest :sparkles: :thumbsup: :sparkles:
:star2: 1214 | @qualitymanifest |http://www.freecodecamp.com/qualitymanifest
:cookie: 325 | @martialis39 |http://www.freecodecamp.com/martialis39
Martialis39
@Martialis39
Jun 21 2016 05:32
Sure : )
Suzanne Atkinson
@AdventureBear
Jun 21 2016 05:36
@qualitymanifest I like your portfolio project. Where did you learn the style from for the parallax?
DJ
@qualitymanifest
Jun 21 2016 05:49
@AdventureBear that's funny, i really don't like my portfolio, just threw it together to finish the front end cert. i don't think it's a "true" parallax, since the background doesn't move at all. but i think the main things for that effect were setting up the background images to cover their divs, and giving each of the main divs (home, about, portfolio, etc) min-height: 100vh;
@AdventureBear anyway, thanks :wink2:
CamperBot
@camperbot
Jun 21 2016 05:50
qualitymanifest sends brownie points to @adventurebear :sparkles: :thumbsup: :sparkles:
:cookie: 445 | @adventurebear |http://www.freecodecamp.com/adventurebear
Can someone help me with placeholder notifcation if the user does not exist?
I'm assuming i need to add another if statement?
or else
Martialis39
@Martialis39
Jun 21 2016 06:32
tbh I didnt even bother with that
but thinking about
it
dont you get an error if it doesnt exist?
then you should be able to handle it in the request itself
Lemmy
@imnotlammy
Jun 21 2016 06:32
User Story: I will see a placeholder notification if a streamer has closed their Twitch account (or the account never existed). You can verify this works by adding brunofin and comster404 to your array of Twitch streamers.
@Martialis39
pzoladkiewicz
@pzoladkiewicz
Jun 21 2016 06:56
@imnotlammy for account closed check "data.status". Its == 422 if its closed
Lemmy
@imnotlammy
Jun 21 2016 06:56
@pzoladkiewicz thanks
CamperBot
@camperbot
Jun 21 2016 06:56
imnotlammy sends brownie points to @pzoladkiewicz :sparkles: :thumbsup: :sparkles:
:cookie: 282 | @pzoladkiewicz |http://www.freecodecamp.com/pzoladkiewicz
Lemmy
@imnotlammy
Jun 21 2016 06:56
Will give it a try
Lemmy
@imnotlammy
Jun 21 2016 07:15
        if (data.status !== 404) {
          var description = data.status;
        }
        else {
          var description = "user not found";
        }
This is what I tried, but doesnt seem to work @pzoladkiewicz
tried with data.status == 422 also
ok never mind fixed it =.=
pzoladkiewicz
@pzoladkiewicz
Jun 21 2016 07:33
@imnotlammy was afk. Glad I could help :)
GenghisJohn2016
@GenghisJohn2016
Jun 21 2016 08:09
Good morning all
noob question if I may, and of course I don't expect anyone to tell me the code, just a hint....
Sorin Ruse
@sorinr
Jun 21 2016 08:11
@GenghisJohn2016 hi. whats the problem?
GenghisJohn2016
@GenghisJohn2016
Jun 21 2016 08:11
I'm doing the first project, A Tribute Page. On the Sample there's a frame or border around everything that makes it look quite nice..... Any hints on how to achieve that? Here is a link to the project I'm doing (the example). https://codepen.io/FreeCodeCamp/full/NNvBQW/
I know we've covered this, it apparently has simply fallen out of my brain
Sorin Ruse
@sorinr
Jun 21 2016 08:12
@GenghisJohn2016 border-radius: 6px; and also add your border thickness you wish
GenghisJohn2016
@GenghisJohn2016
Jun 21 2016 08:12
div I presume?
sorry, was trying to give you kudos
I appreciate it
Sorin Ruse
@sorinr
Jun 21 2016 08:14
@GenghisJohn2016 later after u solve the problem :)
dagao.wei
@liangshun
Jun 21 2016 09:00
var collectionCopy = JSON.parse(stringify(collection));
var collectionCopy = JSON.parse(stringify(collection));
ReferenceError: stringify is not defined
change like this : var collectionCopy = JSON.parse(JSON.stringify(collection));
will be ok
lilyliterate
@lilyliterate
Jun 21 2016 09:01
^
dagao.wei
@liangshun
Jun 21 2016 09:01
this is a bug?

// Keep a copy of the collection for tests
var collectionCopy = JSON.parse(JSON.stringify(collection));

// Only change code below this line
function updateRecords(id, prop, value) {

return collection;
}

lilyliterate
@lilyliterate
Jun 21 2016 09:02
Does that work?
dagao.wei
@liangshun
Jun 21 2016 09:02
if like this:

// Keep a copy of the collection for tests
var collectionCopy = JSON.parse(stringify(collection));

// Only change code below this line
function updateRecords(id, prop, value) {

return collection;
}

Al
@shimoal
Jun 21 2016 09:02
Hi everyone! I'm kind of new to this and I'm working on the Random Quote Machine project. I really want to try to use an API, probably Quotes on Design, but I'm really struggling. Does anyone have any resources to learn more about how to use APIs?
dagao.wei
@liangshun
Jun 21 2016 09:02
there will be error
lilyliterate
@lilyliterate
Jun 21 2016 09:03
JSON.parse() and JSON.stringify() are from the same library of methods. You need to have JSON. before stringify.
Sorin Ruse
@sorinr
Jun 21 2016 09:03
@shimoal take an inspiration from my pen here: http://codepen.io/sorinr/pen/VaJKrw
dagao.wei
@liangshun
Jun 21 2016 09:04
@lilyliterate freecodecamp the 211th topic, no use JSON.stringify only use stringify
lilyliterate
@lilyliterate
Jun 21 2016 09:05
What is the name of the topic?
dagao.wei
@liangshun
Jun 21 2016 09:05
@lilyliterate name is “Record Collection"
lilyliterate
@lilyliterate
Jun 21 2016 09:06
What exactly is the error it is passing you?
dagao.wei
@liangshun
Jun 21 2016 09:07
ReferenceError: stringify is not defined
Al
@shimoal
Jun 21 2016 09:07
@sorinr Thank you! It should be very useful to have a working example while I continue trying to figure this out haha
CamperBot
@camperbot
Jun 21 2016 09:07
shimoal sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 371 | @sorinr |http://www.freecodecamp.com/sorinr
dagao.wei
@liangshun
Jun 21 2016 09:07
maybe one bug
lilyliterate
@lilyliterate
Jun 21 2016 09:08
Stringify() is not a function. JSON.stringify() is.
dagao.wei
@liangshun
Jun 21 2016 09:08
https://www.freecodecamp.com/challenges/record-collection#?solution=%0A%2F%2F%20Setup%0Avar%20collection%20%3D%20%7B%0A%20%20%20%20%222548%22%3A%20%7B%0A%20%20%20%20%20%20%22album%22%3A%20%22Slippery%20When%20Wet%22%2C%0A%20%20%20%20%20%20%22artist%22%3A%20%22Bon%20Jovi%22%2C%0A%20%20%20%20%20%20tracks%3A%20%5B%20%0A%20%20%20%20%20%20%20%20%22Let%20It%20Rock%22%2C%20%0A%20%20%20%20%20%20%20%20%22You%20Give%20Love%20a%20Bad%20Name%22%20%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%2C%0A%20%20%20%20%222468%22%3A%20%7B%0A%20%20%20%20%20%20%22album%22%3A%20%221999%22%2C%0A%20%20%20%20%20%20%22artist%22%3A%20%22Prince%22%2C%0A%20%20%20%20%20%20%22tracks%22%3A%20%5B%20%0A%20%20%20%20%20%20%20%20%221999%22%2C%20%0A%20%20%20%20%20%20%20%20%22Little%20Red%20Corvette%22%20%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%2C%0A%20%20%20%20%221245%22%3A%20%7B%0A%20%20%20%20%20%20%22artist%22%3A%20%22Robert%20Palmer%22%2C%0A%20%20%20%20%20%20%22tracks%22%3A%20%5B%20%5D%0A%20%20%20%20%7D%2C%0A%20%20%20%20%225439%22%3A%20%7B%0A%20%20%20%20%20%20%22album%22%3A%20%22ABBA%20Gold%22%0A%20%20%20%20%7D%0A%7D%3B%0A%2F%2F%20Keep%20a%20copy%20of%20the%20collection%20for%20tests%0Avar%20collectionCopy%20%3D%20JSON.parse(stringify(collection))%3B%0A%0A%2F%2F%20Only%20change%20code%20below%20this%20line%0Afunction%20updateRecords(id%2C%20prop%2C%20value)%20%7B%0A%0A%0A%20%20return%20collection%3B%0A%7D%0A%0A%2F%2F%20Alter%20values%20below%20to%20test%20your%20code%0AupdateRecords(5439%2C%20%22artist%22%2C%20%22ABBA%22)%3B%0A%0A
ABHIII
@aviralsharma1997
Jun 21 2016 09:09
@shimoal I have also just started on it ...want to pair???
lilyliterate
@lilyliterate
Jun 21 2016 09:09
// Keep a copy of the collection for tests
var collectionCopy = JSON.parse(JSON.stringify(collection));
That is the functioning code @liangshun - stringify on its own dows not exist, hence the error.
dagao.wei
@liangshun
Jun 21 2016 09:10
@lilyliterate thank you a lot
CamperBot
@camperbot
Jun 21 2016 09:10
liangshun sends brownie points to @lilyliterate :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @lilyliterate |http://www.freecodecamp.com/lilyliterate
Al
@shimoal
Jun 21 2016 09:11
@aviralsharma1997 yeah I'm down to pair but my schedule is kinda wacky. Is there a way to send a PM on here?
dagao.wei
@liangshun
Jun 21 2016 09:11
ABHIII
@aviralsharma1997
Jun 21 2016 09:13
M trying for tht @shimoal
Sorin Ruse
@sorinr
Jun 21 2016 09:14
@shimoal ok. it was just for inspiration. just try to understand how things are working and make it on your own
Al
@shimoal
Jun 21 2016 09:17
oh yeah, that's exactly what I mean. Thank you for that. I'm still looking for more resources too
ABHIII
@aviralsharma1997
Jun 21 2016 09:20
is there a way for pc here??
somebody??
Sorin Ruse
@sorinr
Jun 21 2016 09:26
@aviralsharma1997 what do u mean by pc?
ABHIII
@aviralsharma1997
Jun 21 2016 09:26
@shimoal i have sent u a msg in pc ,, please check
@sorinr its done btw ,personal chat
Sorin Ruse
@sorinr
Jun 21 2016 09:27
@aviralsharma1997 ok. i was thinking that was what you mean. :)
ABHIII
@aviralsharma1997
Jun 21 2016 09:28
:smile:
@sorinr i m on the same challenge the random quote machine i saw ur pen it was pretty good
@sorinr would u suggest some more resources for that
Sorin Ruse
@sorinr
Jun 21 2016 09:31
@aviralsharma1997 just make a google search for free api quotes and see which one you like more.
ABHIII
@aviralsharma1997
Jun 21 2016 09:32
@sorinr okk , this has been the best project so far.....taking time
Sorin Ruse
@sorinr
Jun 21 2016 09:35
@aviralsharma1997 then just take ur time. no hurry if you want it done just the way you want it
Thabani Manzini
@ThabaniM
Jun 21 2016 09:48
hello ppl i am trying to finalize my portfolio before submitting. but i am not sure which link to use on my portfolio page that will link to my various projects. the fact that some pages look different in full page mode to the debug view is a concern as well
Al
@shimoal
Jun 21 2016 09:56
@aviralsharma1997 Ok, I'll reply later tonight! My break at work is up. Talk to you all later!
Michał Bociek
@Auron91
Jun 21 2016 10:09
Hello All! I have a noob question. Can i style text in CSS? i mean i want to do emphasis and center the text.
Michał Bociek
@Auron91
Jun 21 2016 10:16
Ok i figured out that i can: h1{ class: text-center} but still cant find how to emphasis it
Hamaad Chughtai
@Hamaad102
Jun 21 2016 10:18
Anyone available to help?
Cross Richards
@crossrichards
Jun 21 2016 10:19
Hello World.
CamperBot
@camperbot
Jun 21 2016 10:19

welcome to FreeCodeCamp @crossrichards!

Hamaad Chughtai
@Hamaad102
Jun 21 2016 10:20
@ThabaniM you're gonna have to spend more time on the portfolio, it doesn't seem to be responsive
Sorin Ruse
@sorinr
Jun 21 2016 10:24
@ThabaniM the color u are using for .info class its not quite visible on that background. if you want to keep the color then just try to add a text-shadow to it. and the opacity for .thumbnail its too low. it messes with the backgrond
Cross Richards
@crossrichards
Jun 21 2016 10:26
Just start Build a Tribute Page. I have never written any code other than what I did in freeCodeCamp. In rule #3, what libraries is it referring to and where do I find them? I don't want to cheat, I want to give it an honest crack at making a tribute page. Also not too sure what to do on Pens.
Sorin Ruse
@sorinr
Jun 21 2016 10:29
@crossrichards do not use any libraries yet. just try to make it on your own using just html and css.
Cross Richards
@crossrichards
Jun 21 2016 10:31
@sorinr Ok, Thanks.
CamperBot
@camperbot
Jun 21 2016 10:31
crossrichards sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 372 | @sorinr |http://www.freecodecamp.com/sorinr
Tbuglc
@tbuglc
Jun 21 2016 10:32
help format
CamperBot
@camperbot
Jun 21 2016 10:32

:point_right: code formatting [wiki]

Multi line Code

```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)

<paste your code here>,
then press [shift + enter ⏎]

``` ⇦ Type 3 backticks, then press [enter ⏎]

Single line Code

This an inline `<paste code here>` code formatting with a single backtick() at _start_ and _end_ around thecode`.

See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics

:pencil: read more about code formatting on the FCC Wiki

Sorin Ruse
@sorinr
Jun 21 2016 10:34
@tbuglc format what?
@Auron91 em tag
Tbuglc
@tbuglc
Jun 21 2016 10:38
@sorinr : just for making code readable. In fact I'd just like to show one friend
Niush Sitaula
@Niush
Jun 21 2016 10:38
@96street Check the comment in your Pen !!
Sorin Ruse
@sorinr
Jun 21 2016 10:40
@tbuglc look at what @camperbot told above about showing code
buiphuking
@buiphuking
Jun 21 2016 10:44
https://postimg.org/image/nrdpvh9fl/
plz someone check my algorithm simon game, this is right or wrong
Thabani Manzini
@ThabaniM
Jun 21 2016 10:47
@Hamaad102 what do you mean not responsive to what
Hamaad Chughtai
@Hamaad102
Jun 21 2016 10:50
when you shrink the viewport @ThabaniM nothing happens. The purpose of the portfolio project is to create a website that will change it's shape to best fit the users screen
by viewport I mean like the browser window
Thabani Manzini
@ThabaniM
Jun 21 2016 10:51
@sorinr where does text come in is there text thats not visible?
@Hamaad102 oh i see i was trying to add some bootstrap but that seemed to be causing more trouble than it was worth guess i'l have to go back to it
@Hamaad102 what about the thumbnail links to the various projects, what link do you use
Sorin Ruse
@sorinr
Jun 21 2016 10:54
@ThabaniM on the css classes i've mentioned
Taylor Morgan
@tmdesigned
Jun 21 2016 10:56
Is anyone familiar with css clip paths? I have it clipping an image down, but can't figure out how to re-align the resulting smaller shape to the top of its parent container
Thabani Manzini
@ThabaniM
Jun 21 2016 10:58
@sorinr changed to white color are you content with that and please tell me what link do you use to link to various front end projects. like at the bottom there are thumbnail pics but those are supposed to be my projects
@sorinr as you know codepen has different views editors, debug and full page
See how it should be moved to top?
Sorin Ruse
@sorinr
Jun 21 2016 11:08
@ThabaniM take a look here to understand what i mean: http://codepen.io/sorinr/pen/RRowde
Greg Duncan
@GregatGit
Jun 21 2016 11:09
@ohiosierra in code pen everything in the html is wrapped in the body and html tags - so you can delete the head tag - I suggest you put everything after container-fluid in a jumbotron
Greg Duncan
@GregatGit
Jun 21 2016 11:17
@ohiosierra your class clipped is making it all behave wierd
Thabani Manzini
@ThabaniM
Jun 21 2016 11:21
@sorinr the text on the info class seems to be the least of my worries on your example. is does the bottom of the page with the thumbnails really look like that
Taylor Morgan
@tmdesigned
Jun 21 2016 11:21
Thank you for the tip @Gregagit. The clipped class is just trying to cut down the image to a better dimension. I know I could do that with photoshop but trying to practice doing it dynamically
CamperBot
@camperbot
Jun 21 2016 11:21
ohiosierra sends brownie points to @gregagit :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for gregagit
Sorin Ruse
@sorinr
Jun 21 2016 11:25
@ThabaniM i understood. what was ur initial idea to happen to the thumbnails in every state: hover , active ecc ?
Thabani Manzini
@ThabaniM
Jun 21 2016 11:27
@sorinr i just wanted the background to be visible, the one you cant see but i can see from my side in all my views
@sorinr the background is a red curtain with a trophy in the foreground which was being hidden by the thumbnails
so i compromised so it can be seen most of the time at least
Sorin Ruse
@sorinr
Jun 21 2016 11:29
@ThabaniM yes but when you hove the image it gives it some transparancy
Thabani Manzini
@ThabaniM
Jun 21 2016 11:29
@sorinr default is transparent and when you hover it should stop the transparency
@sorinr did you change the code or is that how it looks on your browser/computer
Sorin Ruse
@sorinr
Jun 21 2016 11:34
@ThabaniM yes but this is what i was trying to tell you. about what? i've just added text-shadow: 0px 2px 2px rgba(0,0,0, 0.9); to class .info p
@ThabaniM try ask me one question and wait for reply. otherwise we found readind different replies and neither of us don't know witch was the question
@ThabaniM as it is your code, when asking a question you should point out where do you think is the problem and what do you want to achive
Greg Duncan
@GregatGit
Jun 21 2016 11:45
This message was deleted
Peret Etienne
@Arcades2
Jun 21 2016 11:46
Hello can someone help me on that ? When i reduce the window, the button appear but does nothing : http://goo.gl/JQD5fY
Thabani Manzini
@ThabaniM
Jun 21 2016 11:47
@sorinr I am not sure what the problem is , i was thinking maybe it is because you are using a different browser, i didn't even know there was was this problem of the images going haywire at the bottom and background not being visible remember my initial question was about something else
Ankur sharma
@ankur1163
Jun 21 2016 11:52
anyone know How i can convert html page to pdf?
Sorin Ruse
@sorinr
Jun 21 2016 11:52
@ThabaniM i'm using chrome
Niush Sitaula
@Niush
Jun 21 2016 11:52
@ankur1163 Right click on the page and select print.........
Then, Change destination into PDF
Greg Duncan
@GregatGit
Jun 21 2016 11:54
@Arcades2 just go to here and compare how they did it to how you did it http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_scrollspy&stacked=h
Thabani Manzini
@ThabaniM
Jun 21 2016 11:54
@sorinr damn me too, i don't get why the bottom of the page is messed up from your side while perfectly fine for me
Sorin Ruse
@sorinr
Jun 21 2016 11:56
@ThabaniM i just forked your initial pen and only added that text-shadow
Thabani Manzini
@ThabaniM
Jun 21 2016 11:56
@sorinr but even your first look at my pen before forking was messed up?
Sorin Ruse
@sorinr
Jun 21 2016 12:01
@ThabaniM very strange the forked pen with your original pen does not look the same on my browser
gitgenie
@gitgenie
Jun 21 2016 12:03
@Arcades2 hi! even I am stuck with the same problem..
Peret Etienne
@Arcades2
Jun 21 2016 12:04
@gitgenie I tell you if i find the solution
Ankur sharma
@ankur1163
Jun 21 2016 12:04
@Niush it doesnt work
Thabani Manzini
@ThabaniM
Jun 21 2016 12:04
@sorinr wtf is going on, i was getting worked up at the fact that my buttons images were not centered in the full page view but was centered in debug, but this has multipied my problems and i have no idea what to do
Ankur sharma
@ankur1163
Jun 21 2016 12:04
its paid site. But, I dont want to buy monthly
gitgenie
@gitgenie
Jun 21 2016 12:04
@Arcades2 thanks.. i am trying too ..
CamperBot
@camperbot
Jun 21 2016 12:04
gitgenie sends brownie points to @arcades2 :sparkles: :thumbsup: :sparkles:
:cookie: 123 | @arcades2 |http://www.freecodecamp.com/arcades2
Ankur sharma
@ankur1163
Jun 21 2016 12:04
membership
How to convert this page to pdf with proper formatting and everything
Sorin Ruse
@sorinr
Jun 21 2016 12:08
@ThabaniM i don't get it eather. thake a look at the forked pen here: http://codepen.io/sorinr/full/RRowde/ and compare it to your original one here: http://codepen.io/ThabaniM/full/YwzbNq/
Thabani Manzini
@ThabaniM
Jun 21 2016 12:11
@sorinr so lesson here is don't fork? but check my buttons aren't centred even in my original pen unlike debug mode where its dead center
@sorinr the important thing here is what will people see when they try to see my portfolio and my other projects
Sorin Ruse
@sorinr
Jun 21 2016 12:14
@ThabaniM f..k. then develop locally as I'm doing, test, test and test and afterwards just upload to codepen
Thabani Manzini
@ThabaniM
Jun 21 2016 12:17
@sorinr shit but i am done, i want to claim my front end certificate. I am sick of the sight of some of these projects
Sorin Ruse
@sorinr
Jun 21 2016 12:19
@ThabaniM this was your goal to get that pice of "paper" stating that you can get recgonized as a "front end developer?
Thabani Manzini
@ThabaniM
Jun 21 2016 12:22
@sorinr yeah so i can apply for jobs and shit
@sorinr but when they see a messed up page there is no chance of that
Sorin Ruse
@sorinr
Jun 21 2016 12:26
. @ThabaniM if you think your presumed employer will like to see only your good code ur wrong. you can also make them see the wronge code and how u have progressed. they want to see your capacity to progress
evude
@evude
Jun 21 2016 12:26
I am struggling to get the twitter button working on the random quote generator. I tried reading the twitter api, but couldn't quite get my head around it. Could someone point me in the right direction?
Thabani Manzini
@ThabaniM
Jun 21 2016 12:32
@sorinr oh i see so there is no need to try and shorten the code, especially the early code when you dont know what you doing
Sorin Ruse
@sorinr
Jun 21 2016 12:33
@evude you can inspire from here if it helps: http://codepen.io/sorinr/pen/VaJKrw
Tony Johnson
@tnyjhnsn
Jun 21 2016 12:33
@evude check the twitter web intents… https://dev.twitter.com/web/intents
Sophia Brandt
@sophiabrandt
Jun 21 2016 12:33
@evude https://dev.twitter.com/web/tweet-button/web-intent basically you need a CSS button where you manipulate the href
Sorin Ruse
@sorinr
Jun 21 2016 12:34
@ThabaniM yep. try to understand what ur doing first. then you will have full control on it
Francesco Mungari
@Francesco-Mungari
Jun 21 2016 12:34
guys I'm doing the Tribute page...how do I center the lists? (ordered and unordered) I've already googled it with scarce to no results :( help is appreciated
Tony Johnson
@tnyjhnsn
Jun 21 2016 12:34
@evude @sophiabrandt <- this link is better :)
evude
@evude
Jun 21 2016 12:34
@tony-tosp @sophiabrandt Thanks. That is exactly what I was looking for.
CamperBot
@camperbot
Jun 21 2016 12:34
evude sends brownie points to @tony-tosp and @sophiabrandt :sparkles: :thumbsup: :sparkles:
:cookie: 304 | @sophiabrandt |http://www.freecodecamp.com/sophiabrandt
:cookie: 285 | @tony-tosp |http://www.freecodecamp.com/tony-tosp
Sophia Brandt
@sophiabrandt
Jun 21 2016 12:36
@sorinr that's pretty sweet, my js code looks much more complicated. Also, nice and clean look.
Francesco Mungari
@Francesco-Mungari
Jun 21 2016 12:40
Also I alredy tried the "align=center" but the numbers and the points remain to the left :(
Sorin Ruse
@sorinr
Jun 21 2016 12:40
@sophiabrandt do you think Sophia, that when you show up your code everyone will understand what was in your mind to achieve with that code? if the answer is yes. be sure u have written the "right" code :) this is what i think
Francesco Mungari
@Francesco-Mungari
Jun 21 2016 12:42
that's about rown, mine is a column ^^"
rows*
Taylor Morgan
@tmdesigned
Jun 21 2016 12:44
@Francesco-Mungari do you want the whole list centered as a group, or each bullet item centered individually
Sophia Brandt
@sophiabrandt
Jun 21 2016 12:45

@sorinr true!
From http://speakingjs.com/es5/ch26.html

Good code is like a textbook
...
Code should explain what is happening; it should be self-explanatory. To write such code, use descriptive identifiers and break up long functions (or methods) into smaller subfunctions. If those functions are small enough and have meaningful names, you can often avoid comments.

Sorin Ruse
@sorinr
Jun 21 2016 12:49
@sophiabrandt I agree. why writing infinite functions and have to give always comments on them and not try to find solutions to reduced them and make them more clear and understandable with no need for comments?
Francesco Mungari
@Francesco-Mungari
Jun 21 2016 12:50
@ohiosierra Is there a difference?
Taylor Morgan
@tmdesigned
Jun 21 2016 12:52
@Francesco-Mungari yes. If you want the whole list centered as a group, then they will have a left-justified left side, but the whole list will be in the middle of the parent container
@Francesco-Mungari If you want the items centered individually, then they will each be centered depending on their length, so in other words the left side of the list would not be a straight line
Francesco Mungari
@Francesco-Mungari
Jun 21 2016 12:53
@ohiosierra Individually sounds best :) how do I do that? In the "tutorials" before the challenge they never mention it
Taylor Morgan
@tmdesigned
Jun 21 2016 12:54
@Francesco-Mungari Well try it and see. For that, put text-align:center in your UL's style, and list-style-position: inside in your LI's styles
Francesco Mungari
@Francesco-Mungari
Jun 21 2016 12:55
@ohiosierra Thanks a lot mate :) and sorry for potentially bad English
CamperBot
@camperbot
Jun 21 2016 12:55
:cookie: 65 | @ohiosierra |http://www.freecodecamp.com/ohiosierra
francesco-mungari sends brownie points to @ohiosierra :sparkles: :thumbsup: :sparkles:
Taylor Morgan
@tmdesigned
Jun 21 2016 12:55
No problem
flindip
@flindip
Jun 21 2016 12:56
I'm kinda getting familiar with JSon? I'm using repel.it to test it. Do I have to add it externally? It doesn't recognize the "$" Jquery call. Doesn't recognize the variable...
Francesco Mungari
@Francesco-Mungari
Jun 21 2016 12:56
@ohiosierra After "position:" what do I have to type?
Taylor Morgan
@tmdesigned
Jun 21 2016 12:56
inside
kirbyedy
@kirbyedy
Jun 21 2016 12:57
@flindip repel.it ? are you sure ? :D www.repel.it
flindip
@flindip
Jun 21 2016 12:58
@kirbyedy heh, my bad. repel.it
kirbyedy
@kirbyedy
Jun 21 2016 12:58
-e :)
Francesco Mungari
@Francesco-Mungari
Jun 21 2016 12:58
It doesen't work :/
kirbyedy
@kirbyedy
Jun 21 2016 13:00
that does not look nice :D
Laurendv
@Laurendv
Jun 21 2016 13:11
Hello guys I don't understand why my toggle button does not work on codepen http://codepen.io/laurendvu/pen/PzbqPG?editors=1100
it should work, the code is definitely write but when i shrank the window and I hit the toggle button the menu doesnt show up :(
flindip
@flindip
Jun 21 2016 13:14
Another quick question when doing the weather app project. Can write the Javascript(Jquery)code first and then do the HTML/Bootstrap?
Laurendv
@Laurendv
Jun 21 2016 13:15
@flindip you can but I think it's better to have it at the end for speed reasons :)
flindip
@flindip
Jun 21 2016 13:15
@Laurendv gotcha. I just wanna learn the new stuff first and then refresh on the old stuff
@Laurendv thanks
CamperBot
@camperbot
Jun 21 2016 13:16
flindip sends brownie points to @laurendv :sparkles: :thumbsup: :sparkles:
:cookie: 279 | @laurendv |http://www.freecodecamp.com/laurendv
Laurendv
@Laurendv
Jun 21 2016 13:16
@flindip no bother, you won't need a whole lot of html / bootstrap anyway :p I did it recently and I think the main difficulty resides in the js :)
Ken Haduch
@khaduch
Jun 21 2016 13:18
@Laurendv - you need to include jquery.js and bootstrap.js in the JS external resources list. And they have to be added in that order.
John Doe
@codingisfun11
Jun 21 2016 13:18
https://codepen.io/CodingKaz/pen/ZOpqVN here is my tribute page. It was confusing I had to look at example code att times. whatever gets me to code right?
Huy Nguyen Thuong
@NguyenThuongHuy
Jun 21 2016 13:18
hi guys i have a problem im doing random quote machine and if inside the quote have semicolon it will be cut off when i tweet. Can anyone help? Here is my code

$("#twitter").on("click", function() {
      var quoteText = data.quoteText;
      var twitter = "https://twitter.com/intent/tweet?text=" + quoteText + " " + "-" + " " + data.quoteAuthor;
      window.open(twitter, "twitter");
Laurendv
@Laurendv
Jun 21 2016 13:19
@khaduch thanks I thought so I first, but I thought as well that including bootstrap through de parameters was enough, so it got me confused :P thanks a lot
CamperBot
@camperbot
Jun 21 2016 13:19
laurendv sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1361 | @khaduch |http://www.freecodecamp.com/khaduch
Francesco Mungari
@Francesco-Mungari
Jun 21 2016 13:19
I tried to center them myself and like @ohiosierra said...still nothing...here's the result :/
Taylor Morgan
@tmdesigned
Jun 21 2016 13:21
@Francesco-Mungari when I add the line I told you to your CSS, it works instantly
li{
list-style-position: inside;
}
Francesco Mungari
@Francesco-Mungari
Jun 21 2016 13:22
To the css! I thought I had to add it to the html ^^"
Taylor Morgan
@tmdesigned
Jun 21 2016 13:22
yes so in the future, when you see curly braces { } you aren't dealing with HTML anymore
Francesco Mungari
@Francesco-Mungari
Jun 21 2016 13:23
@ohiosierra Thanks again, and sorry for the mistake :D I didn't see the curly braces before tho.
CamperBot
@camperbot
Jun 21 2016 13:23
francesco-mungari sends brownie points to @ohiosierra :sparkles: :thumbsup: :sparkles:
:warning: francesco-mungari already gave ohiosierra points
Karolina Kluz
@karolinaKluz
Jun 21 2016 13:23
@Francesco-Mungari why are you using align=center? Maybe you could try another ways to center? https://css-tricks.com/centering-css-complete-guide/
Francesco Mungari
@Francesco-Mungari
Jun 21 2016 13:23
@karolinaKluz Thanks :)
CamperBot
@camperbot
Jun 21 2016 13:23
francesco-mungari sends brownie points to @karolinakluz :sparkles: :thumbsup: :sparkles:
:cookie: 320 | @karolinakluz |http://www.freecodecamp.com/karolinakluz
Taylor Morgan
@tmdesigned
Jun 21 2016 13:24
Gee maybe in the future I should ask who you are building a tribute page for, first
Sophia Brandt
@sophiabrandt
Jun 21 2016 13:26
@NguyenThuongHuy can you post the complete pen so we can debug it? ATM I can't see why it doesn't work.
Francesco Mungari
@Francesco-Mungari
Jun 21 2016 13:28
I was bored and GTAV was just in front of me...I guess it was kinda automatic xD
marcimmediato
@marcimmediato
Jun 21 2016 13:31
Morning all.
John Doe
@codingisfun11
Jun 21 2016 13:32
marcimmediato
@marcimmediato
Jun 21 2016 13:32
Wanted to get some opinions on my portfolio project. https://codepen.io/immediato/full/XKKyWd/
Sorin Ruse
@sorinr
Jun 21 2016 13:37
@marcimmediato not bad but on a scroll of the mouse i can see actually all of the page. there is no "transition" between "pages"
UtkarshShukla7
@UtkarshShukla7
Jun 21 2016 13:38
@codingisfun11 image isn't responsive. add img-responsive class to img
marcimmediato
@marcimmediato
Jun 21 2016 13:39
@sorinr I wanted a one page site. Not 100% sure what you mean
Taylor Morgan
@tmdesigned
Jun 21 2016 13:40
@marcimmediato I think he means usually on one page sites, you add spacing so that only one section at a time is on the screen and they almost seem like different pages
@marcimmediato as it is, there's not much need for the links at the top because I can see the whole page at once
marcimmediato
@marcimmediato
Jun 21 2016 13:42
Oh! That makes sense. Good idea.
John Doe
@codingisfun11
Jun 21 2016 13:49
@UtkarshShukla7 how do I add img responsive?
@UtkarshShukla7 <img class="img-rounded img-responsive" /> ?????????
Mitul Shah
@mitul-s
Jun 21 2016 13:51
@codingisfun11 that's right
@codingisfun11 though you'll need an src as well for the actual image
tadalox
@tadalox
Jun 21 2016 13:52
hello, please help. Why this code does not work?

$(document).ready(function() {

$("#getMessage").on("click", function(){
  // Only change code below this line.

  $.getJSON("http://quotesondesign.com/api/3.0/api-3.0.json", function(json) {

$(".message").html("lalala");
});

  // Only change code above this line.
});
<div class="container-fluid">
<div class = "row text-center">
<div class = "col-xs-12 well message">
The message will go here
</div><button id = "getMessage" class = "btn btn-primary">
Get Message
</button>
</div>
Karthik
@Karthik1611
Jun 21 2016 13:55
@tadalox you should comment like this <!-- Text -->
UtkarshShukla7
@UtkarshShukla7
Jun 21 2016 13:55
@codingisfun11
<img src ="https://media.gq.com/photos/56ba67abb89407780bd7cc92/master/pass/Kanye-West-Style-2016-02-09-16.jpg" class="img-responsive">

<img src = "http://in2.ccio.co/5D/w7/M3/202450945718635011UVLUNQuSc.jpg" class="img-responsive">
Karthik
@Karthik1611
Jun 21 2016 13:55
your way of commenting is not valid in HTML
Sorin Ruse
@sorinr
Jun 21 2016 13:55
@ohiosierra yes. that i was meant. just make a section of a page looks like an eantire page
tadalox
@tadalox
Jun 21 2016 13:57
@Karthik1611 ok, but problem is not with commenting, I can't get data in JSON format on another url
How to get data via API in JSON on another url?
Sundeep
@pidugusundeep
Jun 21 2016 14:00
anyone here implemented cards ?
tadalox
@tadalox
Jun 21 2016 14:01

@tadalox
hello, please help. Why this code does not work?
$(document).ready(function() {

$("#getMessage").on("click", function(){
  // Only change code below this line.

  $.getJSON("http://quotesondesign.com/api/3.0/api-3.0.json", function(json) {

$(".message").html("lalala");
});

  // Only change code above this line.
});

<div class="container-fluid">
<div class = "row text-center">
<div class = "col-xs-12 well message">
The message will go here
</div><button id = "getMessage" class = "btn btn-primary">
Get Message
</button>
</div>

John Doe
@codingisfun11
Jun 21 2016 14:05
@UtkarshShukla7 the page looks a lot neater how did you do that!
UtkarshShukla7
@UtkarshShukla7
Jun 21 2016 14:06
@codingisfun11 its a class defined in the bootstrap library .You can use many such classes to make your page responsive
John Doe
@codingisfun11
Jun 21 2016 14:06
@UtkarshShukla7 I thought we were only limted to html css, etc I never knew we could try to use other lanaguages.
@UtkarshShukla7 I am saying this because they only give you 3 boxes to code in
@UtkarshShukla7 js,html, css
UtkarshShukla7
@UtkarshShukla7
Jun 21 2016 14:07
@codingisfun11 well there are many such frameworks .Well I think you already added bootstrap library
before me telling you to use that class
John Doe
@codingisfun11
Jun 21 2016 14:08
@UtkarshShukla7 hmmmm ok I am starting to understand
@UtkarshShukla7 I added external css I think that is whats happening.
UtkarshShukla7
@UtkarshShukla7
Jun 21 2016 14:08
these libraries can be linked in your pen using the gear icon provided next to html,css ,javascript
@codingisfun11 yep
@codingisfun11 these libraries have predefined css and js which you can use after linking them to your pen
these can also be added by using link tags and script tags in the head tag of your html document
John Doe
@codingisfun11
Jun 21 2016 14:11
@UtkarshShukla7 I dont know what script tags are. I will figure it out tho
flindip
@flindip
Jun 21 2016 14:11
Does anyone know how to link Jquery using just a JS compiler. It seems you call it in HTML. But I'm not using HTML on repl.it
UtkarshShukla7
@UtkarshShukla7
Jun 21 2016 14:11
@codingisfun11 :+1:
Taylor Morgan
@tmdesigned
Jun 21 2016 14:15
@flindip you can call it using AJAX and then eval it, but it has to be on the same domain, I think
flindip
@flindip
Jun 21 2016 14:15
@ohiosierra So its mostly just linked through HTML?
Taylor Morgan
@tmdesigned
Jun 21 2016 14:16
@flindip think so
@flindip what are you using on repl.it
@flindip just the javascript window?
Sundeep
@pidugusundeep
Jun 21 2016 14:17
anyone worked on cards ?
material design ?
flindip
@flindip
Jun 21 2016 14:18
@ohiosierra yeah, I'm just doing the JS on the workstation. Doesn't use any HTML code.
@ohiosierra thanks
CamperBot
@camperbot
Jun 21 2016 14:18
flindip sends brownie points to @ohiosierra :sparkles: :thumbsup: :sparkles:
:cookie: 66 | @ohiosierra |http://www.freecodecamp.com/ohiosierra
flindip
@flindip
Jun 21 2016 14:18
@ohiosierra don't have enough familiarity with AJAX
Taylor Morgan
@tmdesigned
Jun 21 2016 14:19
@flindip so I think the model there is you are working on a single JS file. using jquery is bringing in a separate individual file. So its kind of breaking the bounds of that system. Java is often used as standalone, but (in my experience) not javascript.
@flindip I'd transfer over into the joint HTML/CSS/JS workflow there, copy and paste your JS into it
@flindip but that's just my understanding
flindip
@flindip
Jun 21 2016 14:20
@ohiosierra I gotcha. I can just use codepen's compiler. I guess if I wanna test Jquery I can't really use repel.it. Not a big deal
Taylor Morgan
@tmdesigned
Jun 21 2016 14:21
@flindip well you can, repl.it has a joint HTML/CSS/JS workflow just like codepen
flindip
@flindip
Jun 21 2016 14:22
@ohiosierra yeah, thats true. I guess I can just do that. Thanks
CamperBot
@camperbot
Jun 21 2016 14:22
flindip sends brownie points to @ohiosierra :sparkles: :thumbsup: :sparkles:
:warning: flindip already gave ohiosierra points
Taylor Morgan
@tmdesigned
Jun 21 2016 14:22
no prob
Sundeep
@pidugusundeep
Jun 21 2016 14:22
material design @ohiosierra
@ohiosierra can u help me with cards
Taylor Morgan
@tmdesigned
Jun 21 2016 14:23
@pidugusundeep sorry not familiar
Sundeep
@pidugusundeep
Jun 21 2016 14:23
@flindip can u help me with cards material design
flindip
@flindip
Jun 21 2016 14:26
@pidugusundeep what do you need?
Sundeep
@pidugusundeep
Jun 21 2016 14:27
@flindip hii are you familier with cards ?
i want to align the cards inline and iam unable to do that could you please help me out with this @flindip
flindip
@flindip
Jun 21 2016 14:29
@pidugusundeep Sorry I'm not familiar with that. I'm fairly mediocre at Bootstrap atm.
Sundeep
@pidugusundeep
Jun 21 2016 14:29
@flindip fine thanks !
CamperBot
@camperbot
Jun 21 2016 14:29
pidugusundeep sends brownie points to @flindip :sparkles: :thumbsup: :sparkles:
:cookie: 281 | @flindip |http://www.freecodecamp.com/flindip
flindip
@flindip
Jun 21 2016 14:34

If I'm using JSON for an API. I just wanna test that I'm linked in with it. How do I display it in JS?

$.getJSON("http://ip-api.com/json");
console.log(JSON.stringify(data));

Is it something like that or do I have to create a variable/array?

marcimmediato
@marcimmediato
Jun 21 2016 14:36
@sorinr do you think it will look silly to have such little content taking up a whole page?
John Doe
@codingisfun11
Jun 21 2016 14:38
https://codepen.io/CodingKaz/pen/ZOpqVN anyfeedback would help. I just want to know when I am done with the tribute page.
Huy Nguyen Thuong
@NguyenThuongHuy
Jun 21 2016 14:45
@sophiabrandt sorry i didnt see your comment, it was solved.
hi guys i just finished random quote machine, any feedback is welcome
http://s.codepen.io/huynguyenthuong/debug/YWWxjX
JD Tadlock
@jdtdesigns
Jun 21 2016 14:48
$.getJSON('http://ip-api.com/json', function(data) {
  console.log(data);
});
@flindip
IndiraShrestha
@IndiraShrestha
Jun 21 2016 15:02
Hi I am working on generating random quote generator challenge
and here is the link to my code pen
not sure where i did wrong
JD Tadlock
@jdtdesigns
Jun 21 2016 15:11
@IndiraShrestha There are about 10 different errors in your code. You might want to look over the api and $.getJSON again
where did you see loadJSON?
IndiraShrestha
@IndiraShrestha
Jun 21 2016 15:12
I looked up for some youtube videos
JD Tadlock
@jdtdesigns
Jun 21 2016 15:13
@IndiraShrestha loadJSON is probably just a function someone created using a standard xml request
flindip
@flindip
Jun 21 2016 15:14
@jdtdesigns Yeah, I got it for whatever reason its not displaying in repel.it compiler. It works in codepen though
@jdtdesigns thanks
CamperBot
@camperbot
Jun 21 2016 15:14
flindip sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 535 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jun 21 2016 15:15
@flindip probably because jquery doesn't work on repl.it ;)
it's vanilla js
flindip
@flindip
Jun 21 2016 15:16
@jdtdesigns LOL. Yeah I tried linking it in their cross platform workstation. I guess it doesn't work there either
IndiraShrestha
@IndiraShrestha
Jun 21 2016 15:16
@jdtdesigns I will go through the material again
flindip
@flindip
Jun 21 2016 15:17
the one with HTML/CSS/JS. I linked it with the HTML. But, I guess it still doesn't work. Oh well, I guess I will only use codepen for this assignment. Not a big deal.
Austin Miles
@Nolo900
Jun 21 2016 15:17
@flindip do you know what I'm doing wrong here? $.getJSON isn't working for me either: https://codepen.io/abm/pen/vKYWNy
JD Tadlock
@jdtdesigns
Jun 21 2016 15:17
@flindip You can use jsbin or jsfiddle
@Nolo900 You can't load openweather over https unless you pay for a premium account
Austin Miles
@Nolo900
Jun 21 2016 15:18
Is there anything else that needs to be configured in codepen for ajax use besides the Jquery library?
Charlotte N.
@clnquacky
Jun 21 2016 15:18
What am I missing here? I am thinking it is something in the syntax for the calculator http://codepen.io/clnquacky/pen/RRamNV?editors=0010
flindip
@flindip
Jun 21 2016 15:18
@Nolo900 your further along than I am. Probably not the person to ask
Austin Miles
@Nolo900
Jun 21 2016 15:19
@jdtdesigns Ahh, that makes sense... thx
CamperBot
@camperbot
Jun 21 2016 15:19
nolo900 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 536 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jun 21 2016 15:19
@Nolo900 You'll need to use an ip locator api for chrome and geolocation for other browsers
Dan Logajan
@hiltydiggs
Jun 21 2016 15:19
Hello, all. Looking for some jQuery help. Here's a link to the codepen with comments in the js of the problem. I want to append to a single element in an array of elements.
JD Tadlock
@jdtdesigns
Jun 21 2016 15:21
@clnquacky $("#.clearsall") is your problem
you need to either select an id or select a class
Austin Miles
@Nolo900
Jun 21 2016 15:21
@jdtdesigns I'm currently in Spain and can only use the browser geoLocation feature if in https... So I guess Im out of luck?
Charlotte N.
@clnquacky
Jun 21 2016 15:21
okay.. Thank you.. Let me go play with that @jdtdesigns
CamperBot
@camperbot
Jun 21 2016 15:21
clnquacky sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 537 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jun 21 2016 15:22
@Nolo900 Doesn't matter where you are. You can use http://ip-api.com/json to return location based on ip address. For other browsers you use navigator.
Charlotte N.
@clnquacky
Jun 21 2016 15:24
@jdtdesigns Thank you. I knew it was something simple and small.. That worked
CamperBot
@camperbot
Jun 21 2016 15:24
clnquacky sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: clnquacky already gave jdtdesigns points
JD Tadlock
@jdtdesigns
Jun 21 2016 15:25
if ( window.chrome ) {
  $.getJSON('http://ip-api.com/json', function(json) {
    // save the data
  });
} else {
  if ( navigator.geolocation ) {
  navigator.geolocation.getCurrentPosition(function(data) {
    // save the data
  });
}
@Nolo900
Austin Miles
@Nolo900
Jun 21 2016 15:28
@jdtdesigns myBrowser wont return geoLocation data from the brower without https, are you saying to use the ip-api to get my geolocation data for the weatherapi call?
JD Tadlock
@jdtdesigns
Jun 21 2016 15:28
@Nolo900 Don't run codepen in https. It won't work with OpenWeather
Austin Miles
@Nolo900
Jun 21 2016 15:29
I get this error "ERROR(1): Only secure origins are allowed (see: https://goo.gl/Y0ZkNV)."
JD Tadlock
@jdtdesigns
Jun 21 2016 15:29
@Nolo900 post your codepen
Austin Miles
@Nolo900
Jun 21 2016 15:31
JD Tadlock
@jdtdesigns
Jun 21 2016 15:32
@Nolo900 You need to do what I said above with the if/else.
Austin Miles
@Nolo900
Jun 21 2016 15:33
@jdtdesigns Ok, I'll try that, thanks.
CamperBot
@camperbot
Jun 21 2016 15:33
nolo900 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: nolo900 already gave jdtdesigns points
JD Tadlock
@jdtdesigns
Jun 21 2016 15:34
@Nolo900 Also, you're not processing the data right. You need to get the location, then fire a function to get the weather. The json request to OpenWeather needs the location.
Austin Miles
@Nolo900
Jun 21 2016 16:03
@jdtdesigns I thought that's what I was doing. I wanted to get the coordinates, put them into variables, then pass those into the weather request URL, I just ran into issues with these errors. I'm also having a hard time getting used to the JS syntax, all these nested functions and brackets/semicolons are killing me.
JD Tadlock
@jdtdesigns
Jun 21 2016 16:05
@Nolo900 The joys of learning new languages. ;)
Dan Logajan
@hiltydiggs
Jun 21 2016 16:06
Still working on this problem: http://codepen.io/dlogajan/pen/vKyOmG if anyone has insight. Thanks.
JD Tadlock
@jdtdesigns
Jun 21 2016 16:09
@hiltydiggs Are you trying to setup a click event to add the token when the user clicks?
Dan Logajan
@hiltydiggs
Jun 21 2016 16:10
Eventually. Right now I'm just trying to append the image to a single div, but it only inserts as a string.
JD Tadlock
@jdtdesigns
Jun 21 2016 16:10
Also, you're selecting the first square wrong. Since it is a jquery object collection, you need to use squares.first().append(xMarker); or squares.eq(0).append(xMarker);
Dan Logajan
@hiltydiggs
Jun 21 2016 16:11
@jdtdesigns ah ha! Thank you. That's what I was looking for.
CamperBot
@camperbot
Jun 21 2016 16:11
hiltydiggs sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 538 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Austin Miles
@Nolo900
Jun 21 2016 16:11
@jdtdesigns What do you think of this approach? Am I not accessing the JSON data correctly? http://codepen.io/abm/pen/vKYWNy
Dinesh
@Dinesh9387
Jun 21 2016 16:12
Guys, how can i get the navigation bar to overlap with the background image???
Dan Logajan
@hiltydiggs
Jun 21 2016 16:13
@Dinesh9387 have a link?
Dan Logajan
@hiltydiggs
Jun 21 2016 16:14
@Dinesh9387 apply your background image in css instead of an inline img html element
Dinesh
@Dinesh9387
Jun 21 2016 16:15
i cant think of anything further... all i ended up doing was to get the nav bar buttons on top of the background image
Dinesh
@Dinesh9387
Jun 21 2016 16:16
@hiltydiggs cud u elaborate pls??
anyone can help me, please ?
thanks
JD Tadlock
@jdtdesigns
Jun 21 2016 16:21
$(document).ready(function() {
  var posLog;
  var posLat;

  var init = function() {
    getLocation();
  };

  var getLocation = function() {
    if (window.chrome) {
      $.getJSON('http://ip-api.com/json', function(json) {
        posLog = json.lon;
        posLat = json.lat;

        getWeather();
      })
    } else {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(data) {
          posLog = data.coords.longitude;
          posLat = data.coords.latitude;

          getWeather();
        });
      }
    }
  };

  var getWeather = function() {
    $.getJSON(
      "http://api.openweathermap.org/data/2.5/weather?lat=" + posLat + "&lon=" + posLog + "&appid=433719a5f94053c00f278be7e806c268",
      function(data) {
        // Success! Do stuff with data.
        $('#userLatitude').text(posLat);
        $('#userLongitude').text(posLog);
      });
  };

  init();
});
@Nolo900
functions are your friend
Dan Logajan
@hiltydiggs
Jun 21 2016 16:27
@Dinesh9387
body {
  background: url("http://wallpaper.pickywallpapers.com/1920x1080/wood-board.jpg");
}
Normally put it on your wrapping div. And remove the <img> from your html.
Hristijan Gjorgjievski
@hristijankiko
Jun 21 2016 16:44
Anyone knows why my random quote generator generates only one quote then just shows the same one every time i press the button? http://codepen.io/hristijankiko/pen/VjKmwL
JD Tadlock
@jdtdesigns
Jun 21 2016 16:45
@hristijankiko The random quote url doesn't work on quotesondesign. You can return 30 quotes and save them to an array, then use that to get random quotes.
Hristijan Gjorgjievski
@hristijankiko
Jun 21 2016 16:47
@jdtdesigns but is it not doable with an API?
JD Tadlock
@jdtdesigns
Jun 21 2016 16:48
@hristijankiko You get the 30 quotes from the api, then loop through the returned json and push the quotes to an array. Then use that array to get random quotes.
There are plenty of apis that have working random quote urls though.
Hristijan Gjorgjievski
@hristijankiko
Jun 21 2016 16:49
ahh okay
Syahri Ramadhan
@SPMechanic
Jun 21 2016 16:51
Erm, got a bit stuck on project "Build a Tribute"
my codepen here
i just confused, how to centered <LI> element..what Bootstrap class that i must utilize? I hack my way to center the DIV element using css (got it from stack-overflow), but it not working for unordered list. :(
Syahri Ramadhan
@SPMechanic
Jun 21 2016 16:57
but i did not found any class suitable for my needs, i am just clueless...what did i miss?
andreas2249
@andreas2249
Jun 21 2016 16:58
Good morning, Campers. Anyone know how to center an image inside a <figure> element? When my 'Portfolio' is stretched to full width, the images stay pushed to the left -- leaving a large space to the right. I think centering the image is a reasonable fix. Here's my CodePen (click 'Portfolio' link to see it): https://codepen.io/andreas2249/pen/ezdbEe
Daniel Cartín
@Danielcv93
Jun 21 2016 17:06
hi, how can I make a button carry out an action of Java Script?**
Sorin Ruse
@sorinr
Jun 21 2016 17:07
@jdtdesigns thank's for your yesterday message " @sorinr It's still not clearing each timeout. Each time you type, it starts a new timeout that gets results. This causes a stack of timeouts that fire one after another. You need to clear the timeout each time the user starts typing before creating the timeout to get results. ;)" regarding my wikipedia app. You suggest that on keyup event to "clear" the stack of all previous calls?
CamperBot
@camperbot
Jun 21 2016 17:07
sorinr sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 539 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
andreas2249
@andreas2249
Jun 21 2016 17:07
@Danielcv93, here's the basic format: <button onclick="myFunction()">Click me</button>
Sorin Ruse
@sorinr
Jun 21 2016 17:09
@andreas2249 you mean making the img full page width? take a look here. https://css-tricks.com/perfect-full-page-background-image/
JD Tadlock
@jdtdesigns
Jun 21 2016 17:13
@sorinr However the timeout is fired needs to be cleared. clearTimeout(window.delaySearch) would be a typical way to do it
andreas2249
@andreas2249
Jun 21 2016 17:13
@sorinr, thank you for your prompt reply. When the entire page is stretched to full page, the image is pushed to the left, leaving a gaping space on the right (looks outta balance). Example
CamperBot
@camperbot
Jun 21 2016 17:13
:cookie: 373 | @sorinr |http://www.freecodecamp.com/sorinr
andreas2249 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
andreas2249
@andreas2249
Jun 21 2016 17:14
( @sorinr, background image is fine, thanks... It's the images inside the <figure> elements on the 'Portfolio' page that I'd like to center.)
CamperBot
@camperbot
Jun 21 2016 17:14
andreas2249 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: andreas2249 already gave sorinr points
how can i get the about tab to the top right corner??
"about" tab
CamperBot
@camperbot
Jun 21 2016 17:24
you need to ask about @someone!
Dinesh
@Dinesh9387
Jun 21 2016 17:26
@hiltydiggs hey mahn, u still there???
DJ Pelland
@dna113p
Jun 21 2016 17:36
@Dinesh9387 do you mean the navigation buttons?
Akhil Kr.
@aj17kr
Jun 21 2016 17:37
Hi , can anyone help me understanding how do i implement smooth scrolling in navbar a links ? like in this site :- https://codepen.io/FreeCodeCamp/full/YqLyXB/
Sorin Ruse
@sorinr
Jun 21 2016 17:37
@jdtdesigns what will solve this approach? my intention was to make a "live search" from the input data. it is normal to make 100 http calls for 100 keypressed. i have added that debounce="10" attribute to delay between key press time and reactivity time(when function is called)
Dinesh
@Dinesh9387
Jun 21 2016 17:37
@dna113p yeah
@dna113p for some reason, style="float:right;" is not putting the about button at the top right corner
Akhil Kr.
@aj17kr
Jun 21 2016 17:39
anybody please help regarding smooth scrolling
Matthew Boland
@mattboland
Jun 21 2016 17:44
anyone here familiar with react have a moment to help?
andreas2249
@andreas2249
Jun 21 2016 17:45
@mattboland, trying to learn react, myself. There is a dedicated room for react here: https://gitter.im/chat-rooms/reactjs
Matthew Boland
@mattboland
Jun 21 2016 17:46
@andreas2249 appreciate it.
andreas2249
@andreas2249
Jun 21 2016 17:46
:)
DJ Pelland
@dna113p
Jun 21 2016 17:49
@Dinesh9387 sorry didn't see you rresponse. It looks like you maybe need to put a width on your topleft class in your css. You are containing your navigation in the div with class topleft... however, topleft width will just be as big as its contents unless you set the width.
@Dinesh9387 so you are setting your #about to float: right... but the right side of that parent div is exactly where your about button is at
@Dinesh9387 try adding width: 100% to .topleft
flindip
@flindip
Jun 21 2016 17:50
Working on "Local weather app" I'm in the process of trying to implement geographic location api and insert the lat and lon values into the weather api. Am I on the right track?
$(document).ready(function() {
$.getJSON("http://ip-api.com/json/?callback=?", function(data) {
});
var getLocation=function(data){
var lat= data.lat;
var lon= data.lon;
}
$.getJson("api.openweathermap.org/data/2.5/weather?lat="+lat"&lon="+lon)

});
the last part of the code is what I am trying to make sure is inserting those values.
JD Tadlock
@jdtdesigns
Jun 21 2016 17:51
@sorinr clear the debounce before starting the debounce
Dinesh
@Dinesh9387
Jun 21 2016 17:53
@dna113p oh yeah... i DID NOT see that!!!! Thanks a lot dude :) it worked now :+1:
CamperBot
@camperbot
Jun 21 2016 17:53
dinesh9387 sends brownie points to @dna113p :sparkles: :thumbsup: :sparkles:
:cookie: 329 | @dna113p |http://www.freecodecamp.com/dna113p
greg
@wearenotgroot
Jun 21 2016 17:53
@flindip read about asynchronous functions
flindip
@flindip
Jun 21 2016 17:54
@wearenotgroot Is my top function blocking the second one?
Sorin Ruse
@sorinr
Jun 21 2016 17:54
@jdtdesigns do you know how vue.js reactivity is working? if yes just gimme a clue on how to clear an already triggered instance
greg
@wearenotgroot
Jun 21 2016 17:56
@flindip to be able to get the values of lat and lon the second $.getJSON should be inside the callback function of the first one
Syahri Ramadhan
@SPMechanic
Jun 21 2016 17:57
Hello, there.. can i get any help for my project?
Paul Borawski
@iAmNawa
Jun 21 2016 17:58
@SPMechanic How can I help??
greg
@wearenotgroot
Jun 21 2016 18:00
@flindip
$(document).ready(function() {
$.getJSON("http://ip-api.com/json/?callback=?", function(data) {

       $.getJSON("https://api.openweathermap.org/data/2.5/weather?lat="+data.lat+"&lon="+data.lon+"&APPID=....");
      });

});
flindip
@flindip
Jun 21 2016 18:01

@wearenotgroot I gotcha. how about this:

$(document).ready(function() {
$.getJSON("http://ip-api.com/json/?callback=?", function(data) {
var getLocation=function(data){
var lat= data.lat;
var lon= data.lon;
}
$.getJson("api.openweathermap.org/data/2.5/weather?lat="+lat"&lon="+lon), function(data){

});

});

});

thanks

CamperBot
@camperbot
Jun 21 2016 18:01
flindip sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1149 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
JD Tadlock
@jdtdesigns
Jun 21 2016 18:02
@sorinr Instead of using debounce, just use a setTimeout
greg
@wearenotgroot
Jun 21 2016 18:03
@flindip also the recommended way of using $.getJSON
$.getJSON(url).done(callback).fail(errorCallback);
@flindip remember JSON part is all caps
Sorin Ruse
@sorinr
Jun 21 2016 18:07
@jdtdesigns you mean to setTimeout on searchWiki? to delay the calls until for some interval no keyup event its comming up?
Syahri Ramadhan
@SPMechanic
Jun 21 2016 18:08
@iAmNawa THis my codepen.: http://codepen.io/pen/

i just confused, how to centered <LI> element..what Bootstrap class that i must utilize? I hack my way to center the DIV element using css (got it from stack-overflow), but it not working for unordered list. :(
got my Bootstrap class reference from here: https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/

but i did not found any class suitable for my needs, i am just clueless...what did i miss?

JD Tadlock
@jdtdesigns
Jun 21 2016 18:09
clearTimeout(window.delaySearch);

window.delaySearch = setTimeout(function() {
  // fire the search
}, 1200);
@sorinr
Paul Borawski
@iAmNawa
Jun 21 2016 18:10
@SPMechanic You can probably write that whole page in just html and css
@SPMechanic That codepen you are sending is empty though
Syahri Ramadhan
@SPMechanic
Jun 21 2016 18:11
@SPMechanic That codepen you are sending is empty though
ooh, sorry..here: http://codepen.io/ramadhan/pen/xOEmWy
@iAmNawa : here the codepen, still confuse using codepen itself...sorry, i am newbie: >> http://codepen.io/ramadhan/pen/xOEmWy
JD Tadlock
@jdtdesigns
Jun 21 2016 18:13
@sorinr I'm trying to get you to figure out the logic on your own. Just think it through or write it out piece by piece then code it.
Paul Borawski
@iAmNawa
Jun 21 2016 18:13
@SPMechanic Are you doing your tribute page to the Doctor or picking someone yourself?
Syahri Ramadhan
@SPMechanic
Jun 21 2016 18:14

@iAmNawa

@SPMechanic You can probably write that whole page in just html and css

yes, but yesterday i asked the same question before..whether i am utilize Boostrap or pure html+css, and the asnweri got from fellow camper from channel #HELP, it must use Bootstrap.

Paul Borawski
@iAmNawa
Jun 21 2016 18:14
@SPMechanic I private messaged you, continue conversation there
chibisan352
@chibisan352
Jun 21 2016 18:15
I'm so confused on how to get started..
What did you guys start with when doing the tribute page?
andreas2249
@andreas2249
Jun 21 2016 18:21

@chibisan352, I always start a project with pencil and paper. I make a quick sketch what I'd like a page to look like (drawing squares). Then for each of those squares, determine where I'm going to have <div> or <section> breaks, text, buttons, etc.

Once I'm satisfied that's the goal, I then write the basic structure of the page filling it with dummy text, images, etc. I'll then add links and wire up the buttons (connect buttons to links)

This is a generalization, the idea being "begin with the end in mind" but spend more time initially planning a project early on rather than just coding a project.
Daniel Cartín
@Danielcv93
Jun 21 2016 18:22
i just need some help
why it doesn´t show the quotes?
pleaaaase! :(
greg
@wearenotgroot
Jun 21 2016 18:25
@Danielcv93 did you add jquery? on codepen JS settings
@Danielcv93 also a bunch of syntax error
Sorin Ruse
@sorinr
Jun 21 2016 18:26
@jdtdesigns yes but u r suggesting me only to "delay" a new http call to the api not canceling the previous ones. debounce in vue this is making: it delayes "reactivity"
greg
@wearenotgroot
Jun 21 2016 18:27
@Danielcv93 line 5 forgotten semicolon, line 10 Math.random is a function/method forgotten parenthesis ()
Daniel Cartín
@Danielcv93
Jun 21 2016 18:27
yes, i add it! but doesn't run!
ok, i add it, what else do you see? :/
greg
@wearenotgroot
Jun 21 2016 18:29
@Danielcv93 you need to fix a bunch of error first
Sorin Ruse
@sorinr
Jun 21 2016 18:29
@jdtdesigns try to fork my pen here and show me what you intend to explain to me: http://codepen.io/sorinr/pen/LZVqmJ
greg
@wearenotgroot
Jun 21 2016 18:29
@Danielcv93 check the dev console it will point out what/where the errors are
JD Tadlock
@jdtdesigns
Jun 21 2016 18:29
@sorinr You're simply canceling the previous call to the api on each key press and starting a new delay before searching. This will keep the delays from stacking up.
greg
@wearenotgroot
Jun 21 2016 18:31
@Danielcv93 take out runrandom function and put it outside that annonymous function
gitgenie
@gitgenie
Jun 21 2016 18:32
HI guys.. Please review my portfolio . tell me what you liked and what you didn't. Suggestions most welcome:)https://codepen.io/gitginie/pen/ZObgbV
Sorin Ruse
@sorinr
Jun 21 2016 18:32
@jdtdesigns how to cancel prev calls if they are reactively called?
Daniel Cartín
@Danielcv93
Jun 21 2016 18:35
@wearenotgroot you're a hgenious ! what was i supose to put it outside the function?
Jonathan
@JonKaric
Jun 21 2016 18:36
@gitgenie The title and description of yourself i feel needs to be vertically centerd. The yellow section is a bit strong on the eyes, kinda hard to see the white text. and i'd say bring the container smaller on larger devices, especially the contact section.
@gitgenie other than that the design is really nice. great choice of font
greg
@wearenotgroot
Jun 21 2016 18:37
@Danielcv93 well to be able to access the runrandom function you need to create/declare it where other can access it meaning in higher scope. since it was inside another function(anonymous) the scope is hidden
Daniel Cartín
@Danielcv93
Jun 21 2016 18:38
ok, i'll take that in mind!
greg
@wearenotgroot
Jun 21 2016 18:38
@Danielcv93 another suggestion is to combine the quotes and the speaker array into one
Daniel Cartín
@Danielcv93
Jun 21 2016 18:38
thanks @wearenotgroot
CamperBot
@camperbot
Jun 21 2016 18:38
danielcv93 sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1150 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
gitgenie
@gitgenie
Jun 21 2016 18:38
@JonKaric Noted. I shall take care of it.thank you very much
greg
@wearenotgroot
Jun 21 2016 18:39
@Danielcv93 meaning making an array of objects instead
quotes = [
{
  quote:"...",  
  speaker: "...."
},
   ...
];
Sorin Ruse
@sorinr
Jun 21 2016 18:41
@gitgenie just try to add some smooth transition between #links
andreas2249
@andreas2249
Jun 21 2016 18:42

@gitgenie, very nice. I especially liked how your portfolio page kept the images centered despite the page size. Also liked how they stacked when reducing page size/width.

Depending how far you want to go with you, you might consider keeping the menu links always visible when the page is scrolled down.

Very nice. :)

gitgenie
@gitgenie
Jun 21 2016 18:43
@sorinr @andreas2249 thanks guys , i shall take care of that
CamperBot
@camperbot
Jun 21 2016 18:43
gitgenie sends brownie points to @sorinr and @andreas2249 :sparkles: :thumbsup: :sparkles:
:cookie: 374 | @sorinr |http://www.freecodecamp.com/sorinr
:warning: could not find receiver for andreas2249
Lars
@Oppenheimer1
Jun 21 2016 18:43
This passes the test but only because I tweaked it to pass the last test. Any suggestions for improving this code would be greatly appreciated.
   function dropElements(arr, func) {
  // Drop them elements.
      var x = [];
      for(var i=0; i<arr.length; i++){
    if(func(arr[i]) === true){
        return arr.slice(i,arr.length);
    }
    if(func(arr[arr.length-1]) === false && func(arr[arr.length-2]) === false){
        return x;
    }
}
}
dropElements([1, 2, 3, 4], function(n) {return n > 5;});
Lars
@Oppenheimer1
Jun 21 2016 18:51
ok, I think this next code is acceptable but I'm taking suggestions on how to refractor this.
function dropElements(arr, func) {
  // Drop them elements.
  var x = [];
  for(var i=0; i<arr.length; i++){
    if(func(arr[i]) === true){
        return arr.slice(i,arr.length);
    }
    if(func(arr[arr.length-1]) === false && func(arr[arr.length-2]) === false  &&   func(arr[arr.length-3]) === false && func(arr[arr.length-4]) === false && func(arr[arr.length-5]) === false){
        return x;
    }
}
}
Mickey H
@nganhthien
Jun 21 2016 18:52
anyone help me disjoint 2 section overlap pls :worried:(
IndiraShrestha
@IndiraShrestha
Jun 21 2016 19:00
@jdtdesigns after your suggestion about learning more about the $.getJSON. I read through some material and wanted to console.log the data from the API
This message was deleted
flindip
@flindip
Jun 21 2016 19:06

trying to check if the lat/log values are being implemented in my weather app. Here is the code:

$(document).ready(function() {
$.getJSON("http://ip-api.com/json/?callback=?", function(data) {
var getLocation=function(data){
var lat= data.lat;
var lon= data.lon;
}
$.getJson("api.openweathermap.org/data/2.5/weather?lat="+lat"&lon="+lon), function(data){
console.log(data);
});

});

});

getting "Unexpected string literal '&lon='. Expected ')' to end a argument list."

greg
@wearenotgroot
Jun 21 2016 19:06
@IndiraShrestha should it be data.quoteText and so on?
andreas2249
@andreas2249
Jun 21 2016 19:07
@flindip, might need a + here to start...
+lat"&lon
greg
@wearenotgroot
Jun 21 2016 19:08
@IndiraShrestha also put the randomGenerateQuote outside the .ready
@IndiraShrestha
//scope
function randomGenerateQuote(data){
    var QuoteGenerated = data.quoteText;
    var QuoteAuthor = data.quoteAuthor;
    $('.quote-text').text(QuoteGenerated);
}

$(document).ready(function(){
  var key = Math.floor(Math.random() * 10000 + 1);

  $.getJSON('http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&Key='+ key +'&jsonp=randomGenerateQuote&callback=?',randomGenerateQuote);


});
IndiraShrestha
@IndiraShrestha
Jun 21 2016 19:10
@wearenotgroot I am trying to understand the JSON and have been watching tons of youtube video as well as documentation for it and I feel like i am struggling to grasp the concept of JSON
flindip
@flindip
Jun 21 2016 19:10
@andreas2249 I get "Unexpected token ')'"
IndiraShrestha
@IndiraShrestha
Jun 21 2016 19:10
@wearenotgroot Thank you for your help but quick question
CamperBot
@camperbot
Jun 21 2016 19:10
indirashrestha sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1151 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
flindip
@flindip
Jun 21 2016 19:10
@andreas2249 thanks
CamperBot
@camperbot
Jun 21 2016 19:10
flindip sends brownie points to @andreas2249 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for andreas2249
andreas2249
@andreas2249
Jun 21 2016 19:10
@flindip, +lat+"&lon... (I know nothing about this -- only guessing coz it looks like you're concatenating... Ignore it if I'm totally off base)
IndiraShrestha
@IndiraShrestha
Jun 21 2016 19:11
why should the function randomGenerateQuote be outside the document ready function when we load the data?
greg
@wearenotgroot
Jun 21 2016 19:12
@IndiraShrestha it's a scope issue
IndiraShrestha
@IndiraShrestha
Jun 21 2016 19:13
@wearenotgroot is there any material i could refer to?
Hassan Algoz
@HassanAlgoz
Jun 21 2016 19:14
I think the question should be "why should it be inside document ready"?
Sujit Karki
@Swoozeki
Jun 21 2016 19:14
@IndiraShrestha what about JSON are you having trouble with?
greg
@wearenotgroot
Jun 21 2016 19:14
Hassan Algoz
@HassanAlgoz
Jun 21 2016 19:15
@IndiraShrestha I think the question should be "why should it be inside document ready"?
@IndiraShrestha Because it is just a function, it does not get executed unless you call it
Suzanne Atkinson
@AdventureBear
Jun 21 2016 19:15
suggestions wanted for making my Simon "pretty" before I start coding the logic. I know it doesn't need to be but I can enjoy it more that way. This is the hard part for me so spending time on the front end of the project forces me to learn CSS better. Here is my pen:
IndiraShrestha
@IndiraShrestha
Jun 21 2016 19:15
@HassanAlgoz It didnt work when i had it inside document ready function
What I want is perfectly concentric circles. I've played with both pixels and percentages and the box model is throwing me off. I want gutters evenly spaced at the edges and the center. So figuring out the exact heigth/width and top / left settings is what's bugging me.
IndiraShrestha
@IndiraShrestha
Jun 21 2016 19:16
@Swoozeki i think i am having trouble grasping the scope issue
@Swoozeki also i wanted to get the JSON of the http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&key=1231&callback=? but having trouble getting it
JD Tadlock
@jdtdesigns
Jun 21 2016 19:19
@AdventureBear Using absolutes and exact widths/heights is a way to do it. http://codepen.io/jdtadlock/pen/EyVbOM
Sujit Karki
@Swoozeki
Jun 21 2016 19:20
@IndiraShrestha the link you gave me doesnt actually have data
IndiraShrestha
@IndiraShrestha
Jun 21 2016 19:20
@Swoozeki In the codepen I am using the API
Suzanne Atkinson
@AdventureBear
Jun 21 2016 19:21
@jdtdesigns I tried exact pixels before but I'm getting so confused ... the radius of the inner circles isn't matching. DO you have a hint for me to help figure it out before I look at your code?
IndiraShrestha
@IndiraShrestha
Jun 21 2016 19:21
and i used generateRandomQuote function
and i tried to console.log(data); but it's not working
JD Tadlock
@jdtdesigns
Jun 21 2016 19:21
@sorinr Referring to 'this' in the vue instance is basically impossible in a nested function because the instance is unnamed. You need to use a setTimeout and not a debounce or whatever it is you're using. The setTimeout uses a callback which will change the scope of this which will cause it to not work.
Hassan Algoz
@HassanAlgoz
Jun 21 2016 19:21
Press F12 and check the console for errors
I get this: net::ERR_CONNECTION_REFUSED whenever I make a GET request although when I copy and paste the URL into the browser I actually get the JSON result ok
Any idea how to solve this problem?
I am using this API http://api.openweathermap.org
Sujit Karki
@Swoozeki
Jun 21 2016 19:23
@IndiraShrestha hold on, let me check
flindip
@flindip
Jun 21 2016 19:23
@jdtdesigns About JSFiddle: I'm trying to run a bit of code to test it. I plugged in JQuery but its not returning anything. Any ideas?
Hassan Algoz
@HassanAlgoz
Jun 21 2016 19:25
@IndiraShrestha Press F12 and see the console for errors
JD Tadlock
@jdtdesigns
Jun 21 2016 19:26
Sorin Ruse
@sorinr
Jun 21 2016 19:27
@jdtdesigns I have imagined it will not work within the vue scope. As I decided to do this project just for fun using vue i'll let it unchanged. Anyaway, I give u a big thank you for your patiance and all support.
CamperBot
@camperbot
Jun 21 2016 19:27
sorinr sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 540 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jun 21 2016 19:27
You need to add jquery under the JS tab->Javascript button->Frameworks & extensions
@flindip
faraz
@silentarrowz
Jun 21 2016 19:27
hi, I need help building those round trapezoidal buttons for the simon game - am kind of stuck. please help
Gabriel Alexandre
@GabrielShaad
Jun 21 2016 19:27
Hello world! Is anyone available to give me a help with a navbar?
CamperBot
@camperbot
Jun 21 2016 19:27

welcome to FreeCodeCamp @GabrielShaad!

flindip
@flindip
Jun 21 2016 19:28
@jdtdesigns I did
perhaps I'm not requesting the right console.log?
Sujit Karki
@Swoozeki
Jun 21 2016 19:28
@IndiraShrestha I see the problem
you have jsonp as the type
make it json
IndiraShrestha
@IndiraShrestha
Jun 21 2016 19:28
I thought i need to parse it
i mean use jsonp to pad it?
this is the api i am using
JD Tadlock
@jdtdesigns
Jun 21 2016 19:29
@flindip right click on the bottom right box and hit inspect
faraz
@silentarrowz
Jun 21 2016 19:30
@AdventureBear @jdtdesigns could you help me out a bit?? I am kinda stuck trying to make the trapezoidal buttons for the simon game
greg
@wearenotgroot
Jun 21 2016 19:30
@IndiraShrestha for some reason is jsonp="a specific function name" . it doesnt see the function if it's inside the ,ready
@IndiraShrestha but if you change it to jsonp=? instead you can put it anywhere(or just use anonymous function)
$.getJSON('http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&Key='+ key +'&jsonp=?', function(data){console.log(data)});
flindip
@flindip
Jun 21 2016 19:32
@jdtdesigns Ahh, I see it's blocked
greg
@wearenotgroot
Jun 21 2016 19:32
@IndiraShrestha
$(document).ready(function(){
  var key = Math.floor(Math.random() * 10000 + 1);

  function randomGenerateQuote(data){
    var QuoteGenerated = data.quoteText;
    var QuoteAuthor = data.quoteAuthor;
    $('.quote-text').text(QuoteGenerated);
    $('.quote-author').text(QuoteAuthor);
  }

  $.getJSON('http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&Key='+ key +'&jsonp=?', randomGenerateQuote);

});
Suzanne Atkinson
@AdventureBear
Jun 21 2016 19:32
@silentarrowz I can help with part of it!
do you have a link to your pen?
flindip
@flindip
Jun 21 2016 19:33
@jdtdesigns [Warning] [blocked] The page at https://fiddle.jshell.net/_display/ was not allowed to run insecure content from http://ip-api.com/json/?callback=jQuery30004728052420541644_1466537786401&_=1466537786402. (jquery-3.0.0.js, line 9434)
@jdtdesigns Codepen console is too small to display it apparently.
@jdtdesigns thanks
CamperBot
@camperbot
Jun 21 2016 19:34
flindip sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 541 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
IndiraShrestha
@IndiraShrestha
Jun 21 2016 19:34
@wearenotgroot I have added your comment in my codepen
Suzanne Atkinson
@AdventureBear
Jun 21 2016 19:34
@silentarrowz review this fiddle, and see if it gives you ideas for the basic shape
IndiraShrestha
@IndiraShrestha
Jun 21 2016 19:34
Will definitely go over it with going over the the documentation
Gabriel Alexandre
@GabrielShaad
Jun 21 2016 19:34
I want to center the navbar links. How can I do it? http://codepen.io/gabrielshaad/pen/BzLRdm?editors=1100
JD Tadlock
@jdtdesigns
Jun 21 2016 19:34
@AdventureBear http://codepen.io/jdtadlock/pen/aZBZMw?editors=1100 to get you started
Suzanne Atkinson
@AdventureBear
Jun 21 2016 19:34
then getting four of them to line up involves positioning
faraz
@silentarrowz
Jun 21 2016 19:35
@AdventureBear well, what i have built is kind of pathetic, but here's the link - http://codepen.io/silentarrowz/pen/QEKgxW
Suzanne Atkinson
@AdventureBear
Jun 21 2016 19:35
@jdtdesigns genious! Thanks.
CamperBot
@camperbot
Jun 21 2016 19:35
adventurebear sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 542 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Suzanne Atkinson
@AdventureBear
Jun 21 2016 19:36
@silentarrowz what if you think about your pen as four separate quadrants instead of a circle divided by lines.
faraz
@silentarrowz
Jun 21 2016 19:37
I was thinking I'd build two circles and put 4 lines, horizontal and vertical but then I'd thought putting colors on them would be tough, because those lines really dont separate the circle
@AdventureBear
Suzanne Atkinson
@AdventureBear
Jun 21 2016 19:37
if you look at the link @jdtdesigns just sent me you'll see my solution so far. but try to see if you can come up with a different idea than what you're currently doing. I would start with this:
faraz
@silentarrowz
Jun 21 2016 19:38
but 4 quadrants will look like quarter circle and not like the shape given
Suzanne Atkinson
@AdventureBear
Jun 21 2016 19:38
<div class="base">

  <div class="top left"></div>
  <div class="top right"></div>
  <div class="bottom left"></div>
  <div class="bottom right"></div>

  </div>
JD Tadlock
@jdtdesigns
Jun 21 2016 19:38
@flindip It's just due to you running jsfiddle from https. You remove the https from the url and it'll work.
faraz
@silentarrowz
Jun 21 2016 19:38
@AdventureBear which link is it again??
Suzanne Atkinson
@AdventureBear
Jun 21 2016 19:38
@silentarrowz what about four quarter circles ?
faraz
@silentarrowz
Jun 21 2016 19:39
I mean 4 quarter circles are not trapezoids, that's all @AdventureBear
Suzanne Atkinson
@AdventureBear
Jun 21 2016 19:39
well you can use this one for now
Oh I see what you mean. It's a layer cake! the empty spot int he middle is another overlying div
IndiraShrestha
@IndiraShrestha
Jun 21 2016 19:40
@wearenotgroot What other comment's suggestion do you have for my code?
I feel like I understand when i see the correct answer/code but with the wrong code i am not sure why it doesn't work and i would like to work on it
faraz
@silentarrowz
Jun 21 2016 19:42
so, you mean I put another circle on top of the circle with the 4 parts and I'll get the trapezoids?? @AdventureBear wow, that sounds good. but will the top part really hide the mid portion of the circle below. I mean , it should otherwise we wont get that same look. @AdventureBear
@AdventureBear but I like the idea lot. then there's just one job left and that is to hide the below lying circle
greg
@wearenotgroot
Jun 21 2016 19:44
@IndiraShrestha it depends on the api. different api will require different parameter pass to the request and will give different response
Aaron Hanna
@AaronHanna
Jun 21 2016 19:44
var loc = {};

if ('geolocation' in navigator) {
  navigator.geolocation.getCurrentPosition(function success(pos){
    loc.lat = pos.coords.latitude;
    loc.lng = pos.coords.longitude;    
  });
}
loc at beginning = undefined
during if statment = {lat: 123, lng:123}
after if statement = undefined
Can anyone explain why the values that are put into the "loc" object revert back to undefined after the if statement is done?
Suzanne Atkinson
@AdventureBear
Jun 21 2016 19:45
well you can just not give it a background color @silentarrowz . I gave it a background color to try and make it look like a base. If you uncomment my "controls" div, you'll see a better outcome.
I'm just being super picky right now.
greg
@wearenotgroot
Jun 21 2016 19:46
@IndiraShrestha oh btw the recommended use of $.getJSON
$.getJSON(url).done(callback).fail(errorCallback);
faraz
@silentarrowz
Jun 21 2016 19:47
@AdventureBear yeah, that looks just the way we want. just need to reduce the size of the inner circle
Ell3Ell3
@Ell3Ell3
Jun 21 2016 19:47
Hi guys
I have this problem with the local wheater challenge:
Mixed Content: The page at 'https://s.codepen.io/Fen24/debug/jqGKNm' was loaded over HTTPS, but requested an insecure image 'http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/agsquare.png'. This content should also be served over HTTPS.
pen.js:38
How can i get the icon with https?
Suzanne Atkinson
@AdventureBear
Jun 21 2016 19:47
@silentarrowz OK, take a look at this now! http://codepen.io/AdventureBear/pen/BzLgVb?editors=1100
refresh the pen
it's gorgeous! Thanks @jdtdesigns ... I needed to add the box sizing property to not drive myself crazy
CamperBot
@camperbot
Jun 21 2016 19:48
adventurebear sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: adventurebear already gave jdtdesigns points
faraz
@silentarrowz
Jun 21 2016 19:48
wow! that's just the right size. excellent work @AdventureBear
that will surely help a lot . thanks @AdventureBear
CamperBot
@camperbot
Jun 21 2016 19:49
:cookie: 446 | @adventurebear |http://www.freecodecamp.com/adventurebear
silentarrowz sends brownie points to @adventurebear :sparkles: :thumbsup: :sparkles:
Sujit Karki
@Swoozeki
Jun 21 2016 19:50
@IndiraShrestha I was perplexed by that problem too, so I did a bit of searching and found a answer: http://stackoverflow.com/questions/11175029/jquery-jsonp-not-calling-the-callback
faraz
@silentarrowz
Jun 21 2016 19:50
by the way, did you happen to complete the tic tac toe thing??
Yukti Kathuria
@ykathur2
Jun 21 2016 19:50
Hey guys, I have reached the stage where I am supposed to build a tribute page. My question was whether I am supposed to replicate the exact app that Free Code Camp provides me or I can choose any topic/person to design my page!
faraz
@silentarrowz
Jun 21 2016 19:51
I mean the tic tac toe . I mean the app. or should I say game?? @AdventureBear
Aaron Hanna
@AaronHanna
Jun 21 2016 19:51
@ykathur2 Make it your own!
faraz
@silentarrowz
Jun 21 2016 19:51
@ykathur2 you can choose anything
Yukti Kathuria
@ykathur2
Jun 21 2016 19:52
Thanks @AaronHanna @silentarrowz
CamperBot
@camperbot
Jun 21 2016 19:52
ykathur2 sends brownie points to @aaronhanna and @silentarrowz :sparkles: :thumbsup: :sparkles:
:cookie: 265 | @aaronhanna |http://www.freecodecamp.com/aaronhanna
:cookie: 331 | @silentarrowz |http://www.freecodecamp.com/silentarrowz
Gabriel Alexandre
@GabrielShaad
Jun 21 2016 19:55
Is anybody available to help please?!
I tried everything that I can to center the navbar and it does not work: http://codepen.io/gabrielshaad/pen/BzLRdm?editors=1100
faraz
@silentarrowz
Jun 21 2016 19:56
@GabrielShaad try putting it in a container div
Suzanne Atkinson
@AdventureBear
Jun 21 2016 19:57
@silentarrowz yes it's here: http://codepen.io/AdventureBear/pen/jWqVYq
Aaron Hanna
@AaronHanna
Jun 21 2016 19:57
var loc = {};

if ('geolocation' in navigator) {
  navigator.geolocation.getCurrentPosition(function success(pos){
    loc.lat = pos.coords.latitude;
    loc.lng = pos.coords.longitude;    
  });
}
loc at beginning = undefined
during if statment = {lat: 123, lng:123}
after if statement = undefined
Can anyone explain why the values that are put into the "loc" object revert back to undefined after the if statement is done?
Gabriel Alexandre
@GabrielShaad
Jun 21 2016 19:57
@silentarrowz And how I center it?
Suzanne Atkinson
@AdventureBear
Jun 21 2016 19:57
@silentarrowz it has a "human" mode where you play 2 player, and an "easy" mode where the conputer is smart but not unbeatable.
IndiraShrestha
@IndiraShrestha
Jun 21 2016 19:57
@wearenotgroot I made some changes as per your suggestion
Suzanne Atkinson
@AdventureBear
Jun 21 2016 19:57
I have yet to implement the unbeatable mode
IndiraShrestha
@IndiraShrestha
Jun 21 2016 19:57
http://codepen.io/Indira_Leite/pen/rLMQYL?editors=0010
faraz
@silentarrowz
Jun 21 2016 19:58
well, @AdventureBear . I tried it long ago, but somehow couldnt figure out how to make the computer smart. the algorithm seems too difficult
IndiraShrestha
@IndiraShrestha
Jun 21 2016 19:58
@wearenotgroot the error is unexpected identifier
faraz
@silentarrowz
Jun 21 2016 19:59
@GabrielShaad what exactly do you want to center? the text in the navbar or the full navbar?
putting it inside a container will put a gap between the edge of the page and the navbar and that's what I thought you wanted
@silentarrowz what does this code do in simon game
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@AdventureBear
Gabriel Alexandre
@GabrielShaad
Jun 21 2016 20:01
@silentarrowz The text is already centered, what I want to center is the li elements when the page is on small resolution.
faraz
@silentarrowz
Jun 21 2016 20:01
what does this code do in simon game
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
greg
@wearenotgroot
Jun 21 2016 20:02
@IndiraShrestha you forgot ? on the url
Jonathan
@JonKaric
Jun 21 2016 20:02
@silentarrowz Some elements add extra margin/padding. the * targets ALL elements, and box-sizing changes how the box model works
greg
@wearenotgroot
Jun 21 2016 20:02
@IndiraShrestha /?method
faraz
@silentarrowz
Jun 21 2016 20:02
@GabrielShaad no, usually what is done is that the links disappear into a small button that shows you the links when clicked on
IndiraShrestha
@IndiraShrestha
Jun 21 2016 20:02
@wearenotgroot var url ='http://api.forismatic.com/api/1.0/method=getQuote&format=jsonp&lang=en&Key='+ key +'&jsonp=?';
faraz
@silentarrowz
Jun 21 2016 20:02
try looking for the hamburger button
IndiraShrestha
@IndiraShrestha
Jun 21 2016 20:02
this is my url
faraz
@silentarrowz
Jun 21 2016 20:02
@GabrielShaad
Suzanne Atkinson
@AdventureBear
Jun 21 2016 20:02
@silentarrowz the box-sizing attribute of border-box means that all the margin & padding will be part of the total width of the div (box). In the orginal css specs padding/margins added to the size of the div. So width: 100, margin: 10px would be an element 120px wide (original 100 plus 10 on right and 10 on left.
Gabriel Alexandre
@GabrielShaad
Jun 21 2016 20:03
@silentarrowz I see, a toggle would be better in this case.
greg
@wearenotgroot
Jun 21 2016 20:03

@IndiraShrestha

                                         this guy
                                             |
                                             v
var url ='http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&Key='+ key +'&jsonp=?';

the ? between / and method

Suzanne Atkinson
@AdventureBear
Jun 21 2016 20:03
that makes it super difficult to do layout like hte mysimon. by using box sizing, the elements will remeain whatever width you chose to start
faraz
@silentarrowz
Jun 21 2016 20:03
@GabrielShaad yeah, that's what I mean
Gabriel Alexandre
@GabrielShaad
Jun 21 2016 20:03
@silentarrowz Thank you very much!