These are chat archives for FreeCodeCamp/HelpFrontEnd

4th
Oct 2016
Chris Cullen
@123xylem
Oct 04 2016 00:08
http://codepen.io/123xylem/pen/jrAKPN?editors=0011
can someone help me debug why my Simon game stops evaluating userinput to cpu Input after user gets it wrong?
Ken Haduch
@khaduch
Oct 04 2016 01:00
@123xylem - I'm not sure what you're looking for, but I just tried it and it is sitting here beeping after round 4, about once per second. I just tried it again, and it did something similar - after three rounds, it is just beeping, I cannot see it flashing. But reset does clear it.
@123xylem - maybe on the third try it does that after two moves? It doesn't seem to flash the colors very consistently, and they are really quick flashes, hard to see them.
Walid Ashri
@walidashri
Oct 04 2016 01:08
@c0d0er
c0d0er
@c0d0er
Oct 04 2016 01:36
@walidashri thanks
CamperBot
@camperbot
Oct 04 2016 01:36
c0d0er sends brownie points to @walidashri :sparkles: :thumbsup: :sparkles:
:cookie: 333 | @walidashri |http://www.freecodecamp.com/walidashri
c0d0er
@c0d0er
Oct 04 2016 01:42
@jdtdesigns thanks!
CamperBot
@camperbot
Oct 04 2016 01:42
c0d0er sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 646 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Henry Cabello
@hacu9
Oct 04 2016 02:12
http://codepen.io/cabello986/pen/EgwJKV?editors=0010 anyone mind checking why the "cpu" isnt playing correctly?
c0d0er
@c0d0er
Oct 04 2016 02:14
does anybody know why my offline and online click doesnt work? http://codepen.io/c0d0er/pen/RGLxpQ?editors=1000
Chris Cullen
@123xylem
Oct 04 2016 02:17
@khaduch the flashes are an animate problem... its just aesthetics for now... the main problem is after you get it wrongand it replays the last sequence (if it does) it doesnt allow you to retrigger the sequence after you input your clicks again
it stops comparing user to cpuSequence after it goes wrong
Michael Karpinski
@karpimpski
Oct 04 2016 02:23
hey guys, is there a way to use document.querySelectorAll or document.getElementsByTagName to change every instance without looping through an array?
Ken Haduch
@khaduch
Oct 04 2016 03:08
@123xylem - I cannot really get into understanding all of the code, but something that looks suspicious to me is the function lastSeq(). The thing that I think might be wrong is that you have the for loop there, and within that, you are creating a setInterval function, but to me it seems that that will make multiple setInterval timers running? It might work? But to me it seems like a bad thing. I would try to have one setInterval running, and having it sequence through the array of moves, so only one interval timer to stop, and only one interval timer acting to play the sequence of notes / colors? Does that make sense? I would have to really study the code a while longer to get any better ideas, so that's a quick guess at something that might be causing you some problems.
sebusch
@sebusch
Oct 04 2016 03:18
@c0d0er it looks like the click works for the first element with the id you select. html id's should all be unique for this reason. Perhaps you could try using a class identifier for online/offline instead of id.
c0d0er
@c0d0er
Oct 04 2016 03:18
@sebusch thanks!
CamperBot
@camperbot
Oct 04 2016 03:18
c0d0er sends brownie points to @sebusch :sparkles: :thumbsup: :sparkles:
:cookie: 321 | @sebusch |http://www.freecodecamp.com/sebusch
Ken Haduch
@khaduch
Oct 04 2016 03:21
@c0d0er I was just seeing the same thing - you have multiple ID values of #onArea, and #offArea - that is not valid HTML, and I"m guessing that jQuery doesn't handle multiple ID matches for the selector.
c0d0er
@c0d0er
Oct 04 2016 03:22
@khaduch thanks! very good to know!
CamperBot
@camperbot
Oct 04 2016 03:22
c0d0er sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1750 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Oct 04 2016 03:25
@c0d0er - yes, it works nicely if you use class="onArea", and class="offArea" when you create your divs, and change your click handlers to select .onArea and .offArea classes. You will have to do something about your closed accounts, too, if you want to handle those - maybe turn them off if you select either online or offline, and back on if you select "All"?
c0d0er
@c0d0er
Oct 04 2016 03:26
@khaduch yep, thanks for the additional check!
CamperBot
@camperbot
Oct 04 2016 03:26
c0d0er sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: c0d0er already gave khaduch points
Aaron Bell
@awb715
Oct 04 2016 03:39
can anyone review my first tribute page
i think the colors got in the way and i saw the example didnt use and CSS while I used a ton of CSS to create my page, so im not sure if it is considered okay. It was my first project ever from scratch
Ken Haduch
@khaduch
Oct 04 2016 03:58
@awb715 - just took a look at your page, it looks great on a wide enough screen - I like the topic, color selection, and look of the page. One problem with having those fixed padding and rather large margins on your .box class is that as the screen gets narrow, it starts to really "squeeze" the text and that center column to make it more difficult to read, and it even moves the text outside of the box. You could use a media query and tweak that setting, or maybe try using percentages instead of fixed values for those to see if it will work a little better? It's a nice first effort, though - good luck!
Luke
@lukede
Oct 04 2016 04:00
For the random quote machine, is the lesson checking whether we can link to an external database (of quotes) or whether we can program javascript to display random quotes from an array? Perhaps it doesn't matter.
Henry Cabello
@hacu9
Oct 04 2016 04:01
It doesnt really matter,the point is you working with JSON i believe
Luke
@lukede
Oct 04 2016 04:05
@hacu9 thanks for the reply. Don't know why I need to know...
CamperBot
@camperbot
Oct 04 2016 04:05
lukede sends brownie points to @hacu9 :sparkles: :thumbsup: :sparkles:
:cookie: 288 | @hacu9 |http://www.freecodecamp.com/hacu9
Henry Cabello
@hacu9
Oct 04 2016 04:05
Yw,if you already know how to work with JSON try using an external API
Ken Haduch
@khaduch
Oct 04 2016 04:07
@lukede - I don't know if they've changed the description and requirements for that. It used to be an early project in the sequence, but they moved it to a later series of challenges. I don't know if the idea was to move it later so that you might be more familiar with API interactions, etc. The example project is definitely based on an array or fixed set of quotes - I think that the idea is to be able to design the app to have access to multiple quotes - you can use your own list, or pull from one of the sites out on the net like "quotesondesign", etc.
Stephen
@stephepush
Oct 04 2016 04:09
So I'm trying to make my quote generator responsive but I can't get the quote div to the middle of the screen. Could someone take a look at my codepen?
http://codepen.io/stephepush/pen/dXQKjW?editors=1000
Luke
@lukede
Oct 04 2016 04:10
@khaduch It's now in the intermediate project front end development. Thanks for the input
CamperBot
@camperbot
Oct 04 2016 04:10
lukede sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1751 | @khaduch |http://www.freecodecamp.com/khaduch
Luke
@lukede
Oct 04 2016 04:14
@stephepush I'm on the same project (I won't look at your code because I want to figure out the random quote generator by myself). Did you try using bootstrap?
to create the columns?
Aaron Bell
@awb715
Oct 04 2016 04:15
@khaduch thanks for the help
CamperBot
@camperbot
Oct 04 2016 04:15
awb715 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1752 | @khaduch |http://www.freecodecamp.com/khaduch
Stephen
@stephepush
Oct 04 2016 04:15
@luke: I finished the project. I'm trying to make it responsive with bootstrap, so yes
Aaron Bell
@awb715
Oct 04 2016 04:16
imhaving trouble figuring out how to apply percentages
that would make it fit better on all screens right
avi twito
@aviTwito
Oct 04 2016 05:01
hello everyone
i need help with the Portfolio page task. i`m trying to make for a start a simple navigation bar like in the 1st example here: http://www.w3schools.com/bootstrap/bootstrap_navbar.aspbut this is what i get: http://codepen.io/avitt/pen/mAqVmp?editors=1100 cany anyone tell me what am i doing wrong?
Annu Nirmal
@annunirmal
Oct 04 2016 05:30

topic:local weather map

can't get my js code working, which should displays city,country,temperature,category,weather description,humidity and wind speed
here is the code:
http://codepen.io/nirmalannu/pen/ORgxjb?editors=1010

Edgar Gil
@EdgarrGil
Oct 04 2016 05:31
hello, world
CamperBot
@camperbot
Oct 04 2016 05:31

welcome to FreeCodeCamp @EdgarrGil!

Edgar Gil
@EdgarrGil
Oct 04 2016 05:34
why are your images showing so big
Annu Nirmal
@annunirmal
Oct 04 2016 05:37
@EdgarrGil i did that intentionally, have to work on that later. right now the priority is the display temperature and city
Annu Nirmal
@annunirmal
Oct 04 2016 05:43
@aviTwito you can check out this one for you mistakes
http://codepen.io/nirmalannu/pen/XjJbdw
JD Tadlock
@jdtdesigns
Oct 04 2016 05:44
@c0d0er I went ahead and coded up a twitch app to show you how you to iterate and append html . I also created the 3 status buttons to switch between all, online, offline to show you a way to do that. Hope this helps. I didn't comment much so let me know if you have questions. ;) http://jsbin.com/sojopam/edit?js,output
I also made it responsive to give you an idea about responsive design.
Evan W
@Dirtier
Oct 04 2016 07:44
Anyone have any idea why I can successfully call the wiki api, iterate through the objects and console.log them but any time I try to take those objects and move them outside of the ajax call into an array, I get nothing
marclennis
@marclennis
Oct 04 2016 07:46
im on my tribute page is there site i could use for fonts?
Evan W
@Dirtier
Oct 04 2016 07:46
I can see them in the array in the real console I think, but not on codepen. and if I try to access like array1 it shows undefined instead of an object
kirbyedy
@kirbyedy
Oct 04 2016 07:47
shouldnt the call be get and not post ?
Evan W
@Dirtier
Oct 04 2016 07:49
dont think so, the API documentation says post
its for the wikipedia search api
not that it really matters, because I can successfully call the API and console.log the data object
I just can't really do anything with it after that for some reason O.o
I think its post bc you send it a search query and then it returns the results? idk
kirbyedy
@kirbyedy
Oct 04 2016 07:52
hmm ok
mine looks like this:
$.ajax({
        url: apiWiki,
        type: 'GET',
        dataType: 'jsonp',
        success: function(data)
Evan W
@Dirtier
Oct 04 2016 07:53
thats probably for a different wiki api though right
theres a bunch of them
kirbyedy
@kirbyedy
Oct 04 2016 07:53
maybe
most probably
cant really understand your code
but where is the search term ?
Evan W
@Dirtier
Oct 04 2016 07:57
at the bottom, getRes('football') -- just for testing
getRes is the function that includes the ajax call
kirbyedy
@kirbyedy
Oct 04 2016 08:04
right
Annu Nirmal
@annunirmal
Oct 04 2016 08:40
can you guys help me with this code for geolocation, my js code is not working at line 5
http://codepen.io/nirmalannu/pen/ORgxjb?editors=1011
kirbyedy
@kirbyedy
Oct 04 2016 08:45
@annunirmal start your codepen link with https://
Bryan Park
@BryanP37
Oct 04 2016 08:52
Does anyone know why this doesn't animate in IE when it works fine on other browsers?
marclennis
@marclennis
Oct 04 2016 09:19
help
the image i put is not showing up..
kirbyedy
@kirbyedy
Oct 04 2016 09:21
because you spelled it wrong
its img src
not scr
marclennis
@marclennis
Oct 04 2016 09:22
hahahahaha sorry..hahahaha
Leow Wei Xiang
@boyboi86
Oct 04 2016 10:20
I need some help on my personal project
I want to create a follower/following for my react/redux app
I will leave a link below. Any kind soul who have exp pls update me. I set up the mongoose many 2 many rs already.
This is the app. currently without follower and following https://glacial-cove-64389.herokuapp.com/
why the image is corrupt?...
Spyrantis Theodoros
@thodorisanta
Oct 04 2016 11:04

http://codepen.io/oshikurou/pen/LkvoyX

this is for the "Build a Random Quote Machine" project. and i want to make the page to show a quote once the page loads but a random one every time you refresh. can you help me?

Sorin Ruse
@sorinr
Oct 04 2016 11:05
@marclennis i think the src url should be photo url
marclennis
@marclennis
Oct 04 2016 11:17
how to put it in a photo url? @sorinr
Sorin Ruse
@sorinr
Oct 04 2016 11:20
@marclennis just cut the image.php?pic=/ part from your src url
ADIL KARMOUZI
@mradil16
Oct 04 2016 11:30
Hi everyone , can you tell me please how can I resize text within input field ?
Sorin Ruse
@sorinr
Oct 04 2016 12:18
@mradil16 what do you mean by resize? font-size or no of chars you can write in the input?
ADIL KARMOUZI
@mradil16
Oct 04 2016 12:29
@sorinr I solved the problem thank you , now I have another issue , I have a wide message input , and I want that the wrritten message fil the whole input field , instead of the first line only . How can I do this ?
CamperBot
@camperbot
Oct 04 2016 12:29
mradil16 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 761 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Oct 04 2016 12:31
@mradil16 use textarea html tag instead of input
nirilan
@nirilan
Oct 04 2016 12:32
Hi everyone, I have now reached the "Build your own portfolio" stage. Should I even try reaching the level of the example page or should it be something very basic? This is a little frustrating as I feel that I have nowhere near enough knowledge for this project...
Sorin Ruse
@sorinr
Oct 04 2016 12:37
@nirilan it can be basic in the beginning and you can add more content in the future. important is to have some sections on your page like about you, portfolio (here you can put some placeholders that you will replace later) and a contact section
nirilan
@nirilan
Oct 04 2016 12:38
@sorinr OK Thanks!
CamperBot
@camperbot
Oct 04 2016 12:38
nirilan sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 762 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Oct 04 2016 12:38
@nirilan welcome
ADIL KARMOUZI
@mradil16
Oct 04 2016 12:39
@sorinr it works like a charm , thank you
CamperBot
@camperbot
Oct 04 2016 12:39
mradil16 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: mradil16 already gave sorinr points
Sorin Ruse
@sorinr
Oct 04 2016 12:43
@mradil16 :+1:
Ken Haduch
@khaduch
Oct 04 2016 13:17
@nirilan - I'll mention this site that I found helpful, especially if you're thinking of using bootstrap, or just want to get some other idea about how to set up a portfolio page, but they use bootstrap. w3schools.com/bootstrap has lessons on individual elements of Bootstrap, as well as a section on "themes" that walks through the design and implementation of pages that look a lot like what you might want for a portfolio. A handy resource, I think...
c0d0er
@c0d0er
Oct 04 2016 14:14
@jdtdesigns thank you so much, i really appreciate! still checking..
CamperBot
@camperbot
Oct 04 2016 14:14
c0d0er sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 647 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
c0d0er
@c0d0er
Oct 04 2016 14:15
right now all the streams in my code are in one block without any separate line, does anybody know how to make a line to seperate all the strems? here is the code link: http://codepen.io/c0d0er/pen/RGLxpQ?editors=0100
Hèlen Grives
@mesmoiron
Oct 04 2016 14:26
Hi is someone starting or doing his/her own front-end project at the moment as a side project? I'm looking for someone who is willing to discuss little bits of pre process considerations. That would give more structure because doing a project on your own entails lots of tiny decisions. I have trouble focusing and deciding between the possibities. I think that's experience all about. Pm me. I'm at the design front-end ideas stage at the moment.
TrayBanks
@TrayBanks
Oct 04 2016 14:34
Can someone please help me with the JS challenge: Accessing nested objects? I am not sure how to approach it other than the obvious var gloveBoxContents = "maps"; As always I would appreciate it if you didn't just give me the answer as I plan to be as great as you guys one day...
// Setup
var myStorage = {
  "car": {
    "inside": {
      "glove box": "maps",
      "passenger seat": "crumbs"
     },
    "outside": {
      "trunk": "jack"
    }
  }
};

// Only change code below this line

var gloveBoxContents = "maps"; // Change this line
christocarr
@christocarr
Oct 04 2016 14:48
how would I add <link href="https://fonts.googleapis.com/css?family=Oswald|Roboto" rel="stylesheet"> to codepen?
JD Tadlock
@jdtdesigns
Oct 04 2016 14:49
@TrayBanks They are wanting you to get the value of 'glove box' from the myStorage object. You will need to use dot notation and bracket notation to get the value. Look up accessing nested objects with dot notation/bracket notation. That should lead you to the right answer. ;)
@christocarr Settings->HTML->Stuff for head box
Sorin Ruse
@sorinr
Oct 04 2016 14:56
@c0d0er something like this? twitch
christocarr
@christocarr
Oct 04 2016 15:02
@jdtdesigns :+1:
JD Tadlock
@jdtdesigns
Oct 04 2016 15:07
@c0d0er That was @sorinr lol. Here's what I would suggest changing your css to:
#twitchDiv {
  margin-top: 40px;
  padding: 0 20px;
  color: black;
  padding-bottom: 5px;
  border-radius: 10px;
  text-align: left;
}

@media (min-width: 850px) {
  #twitchDiv {
    padding: 0 10%;
  }
}

.onArea, .offArea, .closedArea {
  background-color: lightgreen;
  padding: 15px;
  margin: 10px 0;
  border-radius: 3px;
}
Sorin Ruse
@sorinr
Oct 04 2016 15:08
@jdtdesigns :)
Jordan Bartholomew
@tourdejord
Oct 04 2016 15:41
Hello everyone! Can anyone explain what part of a contact form designates which email the form information is sent to?
html preferably
Carlos Esteban Lopez Jaramillo
@luchillo17
Oct 04 2016 15:49
Hi, may i ask what's the current front end way of dealing with tabular data? say WebSql is being deprecated in almost all web browsers except Chrome, and as far as i can tell it seems once IndexedDB 2 is out WebSql will also go out (of the Chrome support).
JD Tadlock
@jdtdesigns
Oct 04 2016 15:56
@Luchillo Localstorage ;)
@tourdejord To send an email, you'll need a server side language like php. The form will have an action that will submit to the current page or another and a method POST. The php script would then run the POST data through an email server to send the information.
Personacode
@Personacode
Oct 04 2016 16:12
I have added a clickable link inside my picture, but the problem is it's clickable throughout the entire width of my page. How do I just make the image clickble?
Jason Luboff
@JLuboff
Oct 04 2016 16:13
@Personacode Move the <a href="..."> into your div instead of outside it
Brandon
@chunb
Oct 04 2016 16:13
Click events don't work in CodePen. I wanted to have a button on my random quote machine to generate a new quote. Anyone have a different suggestion?
Jason Luboff
@JLuboff
Oct 04 2016 16:14
Put it infront of img, not div is what I'm saying @Personacode
@chunb Click events do work in Codepen
Personacode
@Personacode
Oct 04 2016 16:15
I know what you mean. Thank you, I'll try that
Brandon
@chunb
Oct 04 2016 16:15
@JLuboff $(document).ready(function() {
$("#getMessage").on("click", function(){
// Only change code below this line.
$(".message").html("Here is the message");
// Only change code above this line.
});
});
This didn't work in codepen
Jason Luboff
@JLuboff
Oct 04 2016 16:15
@chunb Can you post your codepen?
Sorin Ruse
@sorinr
Oct 04 2016 16:16
@Personacode #picture { width: 100px; margin:auto; } not id=picture { width: 100px; margin:auto; }
Personacode
@Personacode
Oct 04 2016 16:17
sorin that also makes my text only 100px for some reason
Brandon
@chunb
Oct 04 2016 16:17
@JLuboff
Brandon
@chunb
Oct 04 2016 16:17

<script>
$(document).ready(function() {
$("#newQuote").on("click", function(){

$(".quote").html("Here is the quote");

});
}); </script>

<div class="container-fluid"> <div class="background">
<body>
<center>
<div class="col-xs-12 well quote"> Quote goes here </div> <br>
</center>
<a href="https://twitter.com/intent/tweet" target="_blank"><img src="http://c4lpt.co.uk/top100tools/wp-content/uploads/2012/12/Twitter-Logo.png"></a> <br>

<button id="newQuote" class="btn btn-primary config"> New Quote </button>
</body>
</div> </div>

Jason Luboff
@JLuboff
Oct 04 2016 16:18
@Personacode Its becuase your text is also in the same div container
Jason Luboff
@JLuboff
Oct 04 2016 16:19
@chunb You need to load jquery and place your jQuery script in the JS box
It works then
@chunb Click on the gear next to JS and use Quick-Add at the bottom to select jQuery
Personacode
@Personacode
Oct 04 2016 16:20
I don't see how my text is inside the same div. I have an open and closed div at the beginning and end of my picture elements
Brandon
@chunb
Oct 04 2016 16:20
@JLuboff Ahh that makes sense. I tried putting that part in JS section and it didn't work. Thanks
CamperBot
@camperbot
Oct 04 2016 16:20
:cookie: 383 | @jluboff |http://www.freecodecamp.com/jluboff
chunb sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
Jason Luboff
@JLuboff
Oct 04 2016 16:21
:+1: @chunb
@Personacode Check your open and closing div tags again
Personacode
@Personacode
Oct 04 2016 16:21
<div id="picture"> <a href="https://en.wikipedia.org/wiki/Solid_Snake"> <div> <img src="https://upload.wikimedia.org/wikipedia/en/9/9d/Solid_Snake.png"> </a> </div>
Jason Luboff
@JLuboff
Oct 04 2016 16:21
@Personacode You'll see that you open the first one, "picture" then open a second one, then close one (thus picture is still open) and then open an additional one thus now having two open divs and placing the second div within the picture div
Personacode
@Personacode
Oct 04 2016 16:22
ah good eye. I didn't catch that
I didn't realize I had a second open one
Jason Luboff
@JLuboff
Oct 04 2016 16:22
:+1:
Personacode
@Personacode
Oct 04 2016 16:22
It works now. Thanks so much Jluboff
:D
Jason Luboff
@JLuboff
Oct 04 2016 16:22
Glad to help
JD Tadlock
@jdtdesigns
Oct 04 2016 16:30
@Personacode There's a lot of missing closing divs, extra elements not being used and you really need to start using indentation in your html and css. I made a class 'center' that just does a text-align: center on any element you put it on. Look at the way I indent my code. You need to do this because it's easier to read for you and others. ;) https://codepen.io/jdtadlock/pen/dpkQJb?editors=1000
also, refrain from adding spaces in your text elements before and after the text. Not sure why you did this, but it's bad practice
Jordan Bartholomew
@tourdejord
Oct 04 2016 16:45
@jdtdesigns thank you for the php recommendation. It seems I need to buck up and learn php already.
CamperBot
@camperbot
Oct 04 2016 16:45
tourdejord sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 648 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
xSnowpeltx
@xSnowpeltx
Oct 04 2016 16:56
I'm so confused. I can't get my api to generate a quote for the quote machine project. Can someone take a look at my code and see what I'm doing wrong? https://codepen.io/xSnowpeltx/pen/xEPQoK
im using the api from here https://quotesondesign.com/api-v4-0/
Vido Sun
@Vidosss
Oct 04 2016 16:58
Hi guys, I have two disorders(<ul>) and set as "col-xs-6". I wanna to let it be center in which "col-xs-6", how to code.....Help
Sorin Ruse
@sorinr
Oct 04 2016 16:59
@xSnowpeltx first, in pen settings->javascript part load jquery. then load your pen over http not https
Jason Luboff
@JLuboff
Oct 04 2016 16:59
@Vidosss Not sure I completely understand, but you can add the 'text-center' class to your div to center text within?
Annu Nirmal
@annunirmal
Oct 04 2016 17:00
can you help me finding. why font 'Josefin Slab' not working in my code
https://codepen.io/nirmalannu/pen/ORgxjb
can you help me finding. why font 'Josefin Slab' not working in my code
https://codepen.io/nirmalannu/pen/ORgxjb
xSnowpeltx
@xSnowpeltx
Oct 04 2016 17:01
okay I did that but it still doesn't work http://codepen.io/xSnowpeltx/pen/xEPQoK
Tyler Moeller
@TylerMoeller
Oct 04 2016 17:05
@annunirmal change your link to: <link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet">
Vido Sun
@Vidosss
Oct 04 2016 17:06
@JLuboff nope, text-center just let text be center, but the "." before the text cannt be center. I need that is center in the "col-xs-6" and the order is left align.
Annu Nirmal
@annunirmal
Oct 04 2016 17:06
@TylerMoeller okay let me try
Tyler Moeller
@TylerMoeller
Oct 04 2016 17:06

@xSnowpeltx Your API URL is incorrect:

 url: '/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',

^^ That points to http://codepen.io/xSnowpeltx/pen/xEPQoK/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1' which does not exist.

Jason Luboff
@JLuboff
Oct 04 2016 17:07
@Vidosss Ok gotcha. Try changing col-xs-6 to "col-xs-4 col-xs-offset-2"
Annu Nirmal
@annunirmal
Oct 04 2016 17:08
@TylerMoeller not working
Tyler Moeller
@TylerMoeller
Oct 04 2016 17:08
@annunirmal You didn't copy/paste what I put above.
Annu Nirmal
@annunirmal
Oct 04 2016 17:09
@TylerMoeller i did
Jason Luboff
@JLuboff
Oct 04 2016 17:09
@annunirmal You need to add <link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet"> to the head section of your HTML settings and then add serif to the end of your font-family call
@annunirmal font-family: 'Josefin Slab', serif;
Tyler Moeller
@TylerMoeller
Oct 04 2016 17:10
@annunirmal You have:
<link href="http://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet" type="text/css" />
Use this instead:
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet">
^^ This is what you need to copy/paste, exactly as is...
@annunirmal I'd also recomend just using one class for your font considering every class is the same font and size
Sorin Ruse
@sorinr
Oct 04 2016 17:11
@xSnowpeltx what is this url in the ajax call: $.ajax({ url: '/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1', ?
Annu Nirmal
@annunirmal
Oct 04 2016 17:11
@TylerMoeller oops!! thanks a lot :)
CamperBot
@camperbot
Oct 04 2016 17:11
annunirmal sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 868 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
xSnowpeltx
@xSnowpeltx
Oct 04 2016 17:11
@sorinr its from here https://quotesondesign.com/api-v4-0/
Sorin Ruse
@sorinr
Oct 04 2016 17:13
@xSnowpeltx yep
xSnowpeltx
@xSnowpeltx
Oct 04 2016 17:14
... it still isnt working...
Vido Sun
@Vidosss
Oct 04 2016 17:16
@JLuboff Cool! That's it! Thanks a lot!
CamperBot
@camperbot
Oct 04 2016 17:16
vidosss sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 384 | @jluboff |http://www.freecodecamp.com/jluboff
JD Tadlock
@jdtdesigns
Oct 04 2016 17:16
@xSnowpeltx You have a lot of errors which I'm currently cleaning up. And just so you and everyone knows, quotesondesign's random quote request doesn't work correctly. It will only load a new quote on page refresh. You need to grab 30 quotes, which I believe is the max, from the API, store them in an array and use that array of quotes for random generation.
I'll have it working in a minute for you. ;)
c0d0er
@c0d0er
Oct 04 2016 17:21
@sorinr @jdtdesigns Thanks, if I want to do like this there is no any space between streams and only one line to separate the streams, how could I do? Example picture:
CamperBot
@camperbot
Oct 04 2016 17:21
c0d0er sends brownie points to @sorinr and @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 763 | @sorinr |http://www.freecodecamp.com/sorinr
:cookie: 649 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
xSnowpeltx
@xSnowpeltx
Oct 04 2016 17:25
thanks a lot @jdtdesigns I dunno how to send brownie points\
CamperBot
@camperbot
Oct 04 2016 17:25
xsnowpeltx sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 650 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
xSnowpeltx
@xSnowpeltx
Oct 04 2016 17:26
oh ok there
Sorin Ruse
@sorinr
Oct 04 2016 17:28
@jdtdesigns :+1: thank u
CamperBot
@camperbot
Oct 04 2016 17:28
sorinr sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 651 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Oct 04 2016 17:36
@xSnowpeltx Here ya go. Look it over. I didn't do anything crazy. I did some adjustments in the html/css and pretty much recoded the js. But the js should be easy to read. ;) http://codepen.io/jdtadlock/pen/ALbYbB?editors=0010
Sorin Ruse
@sorinr
Oct 04 2016 17:37
@jdtdesigns :+1:
@c0d0er plz do not more use camel case for your ids or classes, all lowercase will be just fine
xSnowpeltx
@xSnowpeltx
Oct 04 2016 17:39
@jdtdesigns Thanks so much!
CamperBot
@camperbot
Oct 04 2016 17:39
xsnowpeltx sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: xsnowpeltx already gave jdtdesigns points
JD Tadlock
@jdtdesigns
Oct 04 2016 17:42
@xSnowpeltx I just fixed the getColor function too. You were missing the () after Math.random().
risheak
@risheak
Oct 04 2016 17:42
Do I have to include the codepen css explicitally ?
Sorin Ruse
@sorinr
Oct 04 2016 17:43
@risheak what do u mean?
risheak
@risheak
Oct 04 2016 17:44
How to increase the font size of the name of tributee ?
xSnowpeltx
@xSnowpeltx
Oct 04 2016 17:47
@jdtdesigns youre a lifesaver
Personacode
@Personacode
Oct 04 2016 17:47
Why isn't my background image working? body { backround: url(http://www.imgbase.info/images/safe-wallpapers/video_games/metal_gear_solid/16802_metal_gear_solid.jpg) ;}
Joseph Parkton
@hippybear
Oct 04 2016 17:49
@Personacode change that to background-image:
JD Tadlock
@jdtdesigns
Oct 04 2016 17:50
@Personacode just change backround to background ;)
Personacode
@Personacode
Oct 04 2016 17:51
I misspelled background lol
Aaron Bell
@awb715
Oct 04 2016 17:51
I was wondering if anyone could critique my work
Personacode
@Personacode
Oct 04 2016 17:51
forgot the g
c0d0er
@c0d0er
Oct 04 2016 17:53
@sorinr good to know thanks!
CamperBot
@camperbot
Oct 04 2016 17:53
c0d0er sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: c0d0er already gave sorinr points
risheak
@risheak
Oct 04 2016 17:53
How to add image in codepen ?
Joseph Parkton
@hippybear
Oct 04 2016 17:56
@risheak you have to use a reference link, codepen doesnt allow uploads
Sorin Ruse
@sorinr
Oct 04 2016 17:59
here is how we feel when our code works as supposed to: see min 1:52 {thunder](https://www.youtube.com/watch?v=n_GFN3a0yj0)
risheak
@risheak
Oct 04 2016 18:02
Sorin Ruse
@sorinr
Oct 04 2016 18:06
@risheak coz he's dead :)
@risheak try: https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Steve_Jobs_with_red_shawl_edit2.jpg/421px-Steve_Jobs_with_red_shawl_edit2.jpg
risheak
@risheak
Oct 04 2016 18:10
It worked. But how ?
Sorin Ruse
@sorinr
Oct 04 2016 18:11
@risheak its a matter of url
Joseph Parkton
@hippybear
Oct 04 2016 18:13
@risheak also your code is a little borked
risheak
@risheak
Oct 04 2016 18:13
What's the issue ?
Joseph Parkton
@hippybear
Oct 04 2016 18:14
multiple
there is no space between the element property and the value (class="someclass" <= correct class = "someclass" <= wont work)
your jumbotron should be contained
div class="container" > div class="row" > div class="jumbotron"
Mikail Bayram
@mikail1998
Oct 04 2016 18:35
http://codepen.io/mikail1998/pen/VKmwwE?editors=1111 Why doesnt my click function work?
Jason Luboff
@JLuboff
Oct 04 2016 18:36
@mikail1998 You don't have jQuery loaded in the JS Settings
Mikail Bayram
@mikail1998
Oct 04 2016 18:37
@JLuboff cant believe i missed that
omG!!!!
Jason Luboff
@JLuboff
Oct 04 2016 18:37
Also, keep in mind that you want to use an ID for a unique element, and a class for shared elements
Mikail Bayram
@mikail1998
Oct 04 2016 18:37
thank you
@JLuboff
@JLuboff thank you
CamperBot
@camperbot
Oct 04 2016 18:38
mikail1998 sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 385 | @jluboff |http://www.freecodecamp.com/jluboff
Jason Luboff
@JLuboff
Oct 04 2016 18:38
:+1:
Mikail Bayram
@mikail1998
Oct 04 2016 18:38
and may i ask why>
what is the difference?
Jason Luboff
@JLuboff
Oct 04 2016 18:39
Just the rules of css :smile: You'll find that right now by using the ID, only the top left box will work. But if you change them all the class, they'll all work
Use a class when you want to consistently style multiple elements throughout the page/site. Classes are useful when you have, or possibly will have in the future, more than one element that shares the same style. An example may be a div of "comments" or a certain list style to use for related links.

Additionally, a given element can have more than one class associated with it, while an element can only have one id. For example, you can give a div two classes whose styles will both take effect.

Furthermore, note that classes are often used to define behavioral styles in addition to visual ones. For example, the jQuery form validator plugin heavily uses classes to define the validation behavior of elements (e.g. required or not, or defining the type of input format)

Examples of class names are: tag, comment, toolbar-button, warning-message, or email.

Use the ID when you have a single element on the page that will take the style. Remember that IDs must be unique. In your case this may be the correct option, as there presumably will only be one "main" div on the page.

Examples of ids are: main-content, header, footer, or left-sidebar.
Ugh..don't know why that formatted like that, but thats a decent explanation from an user on stack overflow (http://stackoverflow.com/questions/12889362/difference-between-id-and-class-in-css-and-when-to-use-it)
Mikail Bayram
@mikail1998
Oct 04 2016 18:42
@JLuboff once again thank you
CamperBot
@camperbot
Oct 04 2016 18:42
mikail1998 sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:warning: mikail1998 already gave jluboff points
Joseph Parkton
@hippybear
Oct 04 2016 18:42
This message was deleted
hmmph
ohh booo
Use a class when you want to consistently style multiple elements throughout the page/site. Classes are useful when you have, or possibly will have in the future, more than one element that shares the same style. An example may be a div of "comments" or a certain list style to use for related links. Additionally, a given element can have more than one class associated with it, while an element can only have one id. For example, you can give a div two classes whose styles will both take effect.
Furthermore, note that classes are often used to define behavioral styles in addition to visual ones. For example, the jQuery form validator plugin heavily uses classes to define the validation behavior of elements (e.g. required or not, or defining the type of input format)
Examples of class names are: tag, comment, toolbar-button, warning-message, or email.
Use the ID when you have a single element on the page that will take the style. Remember that IDs must be unique. In your case this may be the correct option, as there presumably will only be one "main" div on the page.
Examples of ids are: main-content, header, footer, or left-sidebar.
\0/
too many linebreaks lol
Jason Luboff
@JLuboff
Oct 04 2016 18:44
@hippybear Thanks for cleaning that up
CamperBot
@camperbot
Oct 04 2016 18:44
jluboff sends brownie points to @hippybear :sparkles: :thumbsup: :sparkles:
:cookie: 444 | @hippybear |http://www.freecodecamp.com/hippybear
Aiden
@AidenMead
Oct 04 2016 18:47
Hey all! I am having a heck of a time with parsing APIs and displaying the data in a usable format. Anyone have any good resources or articles to better explain? I've been stuck on the random quote challenge for a while. I've gone back and re-done the API lessons, scoured YouTube, read instruction books, and all that it has done is confuse me more.
Mikail Bayram
@mikail1998
Oct 04 2016 18:47
http://codepen.io/mikail1998/pen/VKmwwE now when i click one box all others have X`s
Im really trying not to name each box seperately but I think that will be the case
:worried:
Eldar Tinjić
@EldarT90
Oct 04 2016 18:48
@mikail1998 $(".box").text('X');
that means add X to all elements that has class box which is all X
you should have ids for every box or use selector (this)
$(this).text("X") *
also you can use eq() to select particular element of same class
Mikail Bayram
@mikail1998
Oct 04 2016 18:50
eq()?
@EldarT90 are you from Balkans :D
Eldar Tinjić
@EldarT90
Oct 04 2016 18:51
also add fixed width height for your boxes so you dont get bumpy effect once you insert something in it
@mikail1998 yes i am, but you dont need eq() in this case, maybe later; for now you use (this)
as i said: $(this).text("X") will work fine
Mikail Bayram
@mikail1998
Oct 04 2016 18:52
@EldarT90 too brate
hvala
@EldarT90 thank you
CamperBot
@camperbot
Oct 04 2016 18:52
mikail1998 sends brownie points to @eldart90 :sparkles: :thumbsup: :sparkles:
:cookie: 390 | @eldart90 |http://www.freecodecamp.com/eldart90
Eldar Tinjić
@EldarT90
Oct 04 2016 18:52
@mikail1998 ma nista, ako jos treba nesto pitaj dok sam online - sorry for native language, we will continue on english
Mikail Bayram
@mikail1998
Oct 04 2016 18:53
@EldarT90 may I send you a pm on our native language :D
If i stuck ofcourse
JD Tadlock
@jdtdesigns
Oct 04 2016 18:53
@AidenMead Do you have a codepen?
Eldar Tinjić
@EldarT90
Oct 04 2016 18:53
@mikail1998 ofc mate
invizzble
@invizzble
Oct 04 2016 19:00
Does somebody know why my $.getJSON or $.ajax won't work on the openweather api? it keeps giving me an error message (the message is just error...)
JD Tadlock
@jdtdesigns
Oct 04 2016 19:01
@invizzble Can you post your codepend?
Joseph Parkton
@hippybear
Oct 04 2016 19:04
@AidenMead POSTMAN https://www.getpostman.com/
formats your json all pretty and easy to read
JD Tadlock
@jdtdesigns
Oct 04 2016 19:08
@invizzble You can't load codepen with https and use openweather unless you have a a premium account. Because you can't use the navigator on chrome without https, use an ip locator(http://ip-api.com/json) and use navigator for other browsers. ;)
Let me know you if you need to know how.
Joseph Parkton
@hippybear
Oct 04 2016 19:15
or get a cloud9 account
free, plus better
xSnowpeltx
@xSnowpeltx
Oct 04 2016 19:18
for some reason I cant change the :visited color on my links. I write out '''.btn:visited { color: white;}''' (white is the usual color), but the button text turns black once i click it
CamperBot
@camperbot
Oct 04 2016 19:18
:bulb: to format code use backticks! ``` more info
xSnowpeltx
@xSnowpeltx
Oct 04 2016 19:21
im not sure if its visited actually. the text turns black after i click the button but if i click somewhere else on the page, the color goes back to white
invizzble
@invizzble
Oct 04 2016 19:22
@jdtdesigns Thanks a lot, it helped ;) now i'll just figure out how to interect with the object :p
CamperBot
@camperbot
Oct 04 2016 19:22
invizzble sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 652 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
xSnowpeltx
@xSnowpeltx
Oct 04 2016 19:35
@jdtdesigns @invizzble so you use that ip locator to find the person's location while loaded in http?
Personacode
@Personacode
Oct 04 2016 19:36
Hey guys how does this look? http://codepen.io/PersonaCode/pen/VKAKgy
invizzble
@invizzble
Oct 04 2016 19:36
@xSnowpeltx yup, it's pretty easy to use (just another getJSON) and it gives you the right answer
@Personacode your first website?
Personacode
@Personacode
Oct 04 2016 19:38
yeah
JD Tadlock
@jdtdesigns
Oct 04 2016 19:38
@xSnowpeltx what @invizzble said
invizzble
@invizzble
Oct 04 2016 19:39
@Personacode not but ;) I hope you still know there's room for improvement but it's certainly a good start! :)
@Personacode *bad, not but...
Personacode
@Personacode
Oct 04 2016 19:39
haha yeah definitely room for improvement. But I'm happy with it so far
just wanted to know if I made any coding errors
invizzble
@invizzble
Oct 04 2016 19:40
@jdtdesigns The ip api worked for me but and i can acces openweathermap object completely except for the weather part, everything in there's undefined (the rest of the object is defined and if I stringify it, i can see it's actually there). Do you have any idea what it could be? :)
JD Tadlock
@jdtdesigns
Oct 04 2016 19:41
@invizzble pretty sure it's just the order of your ajax requests
remember ajax is asynchronous so it doesn't come back instantly
js will request the data then keep running your code while it waits
because of this, you need to make sure the data has been received before using it in the app
an easy way with jQuery is using .done() after a getJSON
Personacode
@Personacode
Oct 04 2016 19:45
does my background appear blue? http://codepen.io/PersonaCode/pen/VKAKgy
or can you see an image there?
invizzble
@invizzble
Oct 04 2016 19:46
@Personacode image
Personacode
@Personacode
Oct 04 2016 19:48
I mean an image taking up the whole background
can you see that?
invizzble
@invizzble
Oct 04 2016 19:49
@jdtdesigns The problem wasn't that ajax works asynchronous (although it's good to know ;) ), the weather object is an array of the different objects (bracket notation)(in my case with only one element but I can imagine if you request multiple cities...) so I should've just used data.weather[0].main
@Personacode Yes it's taking up my entire webpage ;)
Personacode
@Personacode
Oct 04 2016 19:50
weird. I can't see it at all ...
and when i can see it, you can't
since I removed the http I cannot see it
Jason Luboff
@JLuboff
Oct 04 2016 19:51
@Personacode You can't use imgur images. They do not alllow hotlinking. It may work once or twice, but will always break
@Personacode Use a different image hosting service like photobucket.com
Personacode
@Personacode
Oct 04 2016 19:51
what img host should I use then?
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 19:51
Ive just deleted all the code from my portfolio page.
Personacode
@Personacode
Oct 04 2016 19:51
ok
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 19:52
The example doesnt help whatsoever.
I havent learned any Javascript or half of the code that's been used in it.
Patrick Fitzgerald
@mrpf1
Oct 04 2016 19:55
Hi
JD Tadlock
@jdtdesigns
Oct 04 2016 19:56
@invizzble nice ;)
Patrick Fitzgerald
@mrpf1
Oct 04 2016 19:56
Trying to work out why data[0][0] is giving me a letter - where data is a group of nested arrays. Any ideas?
invizzble
@invizzble
Oct 04 2016 19:57
@mrpf1 what context
Patrick Fitzgerald
@mrpf1
Oct 04 2016 19:58
@invizzble the wikipedia challenge on freecode : [
"test",
[
"Test",
"Testosterone",
"Test (assessment)", - trying to access the second set of strings using array notation
@invizzble - the array comes from a getJSON query
invizzble
@invizzble
Oct 04 2016 19:59
@mrpf1 haven't gotten there yet but i'll let you know if i find something out about it :)
Patrick Fitzgerald
@mrpf1
Oct 04 2016 19:59
@invizzble Thanks. Good to know it's not so obvious.
CamperBot
@camperbot
Oct 04 2016 19:59
mrpf1 sends brownie points to @invizzble :sparkles: :thumbsup: :sparkles:
:cookie: 264 | @invizzble |http://www.freecodecamp.com/invizzble
Jason Luboff
@JLuboff
Oct 04 2016 20:01
@mrpf1 You are returned an array with four elements. The first element is just the search term if I remember correctly. We are interested in index 1-3. See what you get with data[1][0], data[2][0], and data[3][0]
U-ways
@U-ways
Oct 04 2016 20:02
@mrpf1 As @JLuboff said :D
Pete
@petegarvin1
Oct 04 2016 20:07
@Personacode i use cloudinary for my image hosting
its pretty simple
Personacode
@Personacode
Oct 04 2016 20:16
ok my picture should show up now instead of the light-blue background http://codepen.io/PersonaCode/pen/VKAKgy
I'm going to move onto portfolio
bkd705
@bkd705
Oct 04 2016 20:36
yoo anyone want some help?
Jason Luboff
@JLuboff
Oct 04 2016 20:46
@bkd705 Nope lol. Just fixed my Twitch API though (due to them requiring client id now)
xSnowpeltx
@xSnowpeltx
Oct 04 2016 20:46
i just can't seem to figure out how to call jsons right. I use $.getJSON("url", function(data) {}); with a url that works when i put it in browser, and set an var equal to JSON.parse(data) and then call the attributes from that var but nothing happens
Stephen James
@sjames1958gm
Oct 04 2016 20:47
@xSnowpeltx Any errors in the devtools console?
Jason Luboff
@JLuboff
Oct 04 2016 20:47
@xSnowpeltx Inside your JSON call, place a console.log(data)...does it reutrn anything?
xSnowpeltx
@xSnowpeltx
Oct 04 2016 20:48
wheres the devtools console?
Stephen James
@sjames1958gm
Oct 04 2016 20:48
@xSnowpeltx If you are on chrome it is F12 to access the devtools
xSnowpeltx
@xSnowpeltx
Oct 04 2016 20:49
oh just realized i need to put http in front whoops
Stephen James
@sjames1958gm
Oct 04 2016 20:49
@xSnowpeltx :)
xSnowpeltx
@xSnowpeltx
Oct 04 2016 20:50
well i fixed that, i get the objects in the console, must be somethign wrong with my data
or how im calling it
Tyler Napier
@dtnapier
Oct 04 2016 20:51
Can anyone help me? I can't center my header text for mobile devices. It's always slightly right of center. http://codepen.io/dtnapier/pen/wzPoLG?editors=1100
xSnowpeltx
@xSnowpeltx
Oct 04 2016 20:52
@dtnapier have you tried text-align: center in the css?
Tyler Napier
@dtnapier
Oct 04 2016 20:54
just tried it. It's still slightly right.
Jason Luboff
@JLuboff
Oct 04 2016 20:55
@dtnapier Viewing via Developer Tools in Chrome, I tried a couple different mobile sizes...and it seems ok?
Tyler Napier
@dtnapier
Oct 04 2016 20:56
Yea it's barely noticeable on my iphone 6
Jason Luboff
@JLuboff
Oct 04 2016 20:57
@dtnapier I had to take my ruler to it..but ya...it is ever so slightly more to the right
Tyler Napier
@dtnapier
Oct 04 2016 20:58
@JLuboff weird huh? I;ve been googling for the past hour
Jason Luboff
@JLuboff
Oct 04 2016 20:58
@xSnowpeltx Looking at the console, you're getting the data. I don't think you need the var objw though
xSnowpeltx
@xSnowpeltx
Oct 04 2016 20:59
well now things are slightly better
Jason Luboff
@JLuboff
Oct 04 2016 21:02
@dtnapier Ya I'm not sure why its doing that. I see that technically you have text-center twice, once in the h element and once in the css for header, but removing the header one didnt seem to make a difference
Tyler Napier
@dtnapier
Oct 04 2016 21:03
@JLuboff Yea I was tyring whatever I could. I just measured on /full view. It's actually offcenter there too but harder to tell
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 21:03
Hello, how do i make the hover on my links the same size as the nav bar?
Evan W
@Dirtier
Oct 04 2016 21:03
Can someone help me figure out why my array keeps showing as undefined? But when I look in the Chome console I can see the objects in it... Something really weird is going on
Tyler Napier
@dtnapier
Oct 04 2016 21:03
@JLuboff so maybe it's just the picture. I'll try something else. thanks
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 21:03
the hover color goes around the text, not the height or width of my "button"
CamperBot
@camperbot
Oct 04 2016 21:03
dtnapier sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 386 | @jluboff |http://www.freecodecamp.com/jluboff
Jason Luboff
@JLuboff
Oct 04 2016 21:04
@dtnapier A couple of things to note, you're missing the <div class="row"> before your <div class="col-xs-12"> which may affect some mobile responsiveness. http://getbootstrap.com/css/#grid check out the Bootstrap documentation
Evan W
@Dirtier
Oct 04 2016 21:04
I can successfully call the API, get the search objects, and console.log them inside the success object's function
JD Tadlock
@jdtdesigns
Oct 04 2016 21:04
@dtnapier It's your styling. Your fighting BS and basic styling principles.
Evan W
@Dirtier
Oct 04 2016 21:04
but when I try to move them or anything, I get undefined =/
Tyler Napier
@dtnapier
Oct 04 2016 21:06
@jdtdesigns can you elaborate? an example?
Evan W
@Dirtier
Oct 04 2016 21:07
@dtnapier if your header is just test, why not take it out of all those divs and stuff and just put it in the outside container and just use text-align:center
text*
Tyler Napier
@dtnapier
Oct 04 2016 21:10
@jdtdesigns yea much better. I think that fixed it. Thanks!
CamperBot
@camperbot
Oct 04 2016 21:10
dtnapier sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 653 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Evan W
@Dirtier
Oct 04 2016 21:10
@dtnapier I think you're just making it a little too complicated. Either make it col-xs-12 and use text-align:center or you can make it a smaller column like col-xs-8 and surround it with two other divs with col-xs-2, inside a row
Jason Luboff
@JLuboff
Oct 04 2016 21:10
@Dirtier The cleaner way to do that would be only using one div, with an offset
Evan W
@Dirtier
Oct 04 2016 21:11
Yea, its easier to wrap your head around when you're just learning it though
to just know that it needs to add up to 12
Jason Luboff
@JLuboff
Oct 04 2016 21:11
True
But when I discovered offset, it made things so much better/cleaner/easier
Evan W
@Dirtier
Oct 04 2016 21:11
Honestly you dont even need it, it does it for you
You can use a col-xs-8, put 1 col-xs-2 before it and it will always be centered
Tyler Napier
@dtnapier
Oct 04 2016 21:12
good stuff guys
Evan W
@Dirtier
Oct 04 2016 21:13
Anyone pretty good with ajax? O.o I'm having a really weird problem
JD Tadlock
@jdtdesigns
Oct 04 2016 21:13
what's the issue @Dirtier
Evan W
@Dirtier
Oct 04 2016 21:14
I'm able to call the wiki search API, get the search objects and console.log them
but when I try to move them to an array, the codepen console says it's empty, but the Chrome console will actually show them inside the array
but if I try to call like arr1 to get the second object, it gives me undefined
So Im not able to do anything with the search objects I'm getting
JD Tadlock
@jdtdesigns
Oct 04 2016 21:15
you mean arr[1]?
Evan W
@Dirtier
Oct 04 2016 21:15
Yes, this chat room formats it weird sometimes
thats what I typed lol
arr1
idk why it does that
arr[ 1 ]
Jason Luboff
@JLuboff
Oct 04 2016 21:15
what about arr[1][0]?
JD Tadlock
@jdtdesigns
Oct 04 2016 21:15
can you post the codepen?
Jason Luboff
@JLuboff
Oct 04 2016 21:16
I know with getJSON, the returned result is a 4 element multi-dimensional array. So to access the title, I use data[1][i], for content data[2][i], etc
@Dirtier
Evan W
@Dirtier
Oct 04 2016 21:16
@JLuboff jQuery.Deferred exception: Cannot read property '0' of undefined" "TypeError: Cannot read property '0' of undefined
@JLuboff this is returning a bunch of objects inside other objects
@JLuboff data.query.search
search[i] are the final objects
well the individual objects, so I need to get search.title and search.snippet for each data.query.search object, and I can console.log them fine, but just can't move them O.o
JD Tadlock
@jdtdesigns
Oct 04 2016 21:18
@Dirtier Your code looks like you mixed a lot of things from other code, but not what you need to do.
Jason Luboff
@JLuboff
Oct 04 2016 21:18
Hmmm...ya..I'll let someone else step in here haha
Evan W
@Dirtier
Oct 04 2016 21:19
@jdtdesigns ? wdu mean
I've been tinkering with it for hours, moving shit around trying to get it to work lol
inside the ready function, outside, using a constructor instead of an array blah blah
I just dont understand why I cant simply push the individual objects outside of the success objects function
JD Tadlock
@jdtdesigns
Oct 04 2016 21:21
@Dirtier And the console.log() simply doesn't work because you're calling it below the ajax request
Evan W
@Dirtier
Oct 04 2016 21:21
JD Tadlock
@jdtdesigns
Oct 04 2016 21:21
ajax is async, it won't be there when the js compiler hits that console.log() line
Evan W
@Dirtier
Oct 04 2016 21:21
no, console.log(item) inside the $.each iteration and it will work
the console.log below is me seeing if they were pushed to the array
or not
and if you check in the chrome console, it will show they were. but in codepens console it shows nothing, and I can't access them
so this console.log(results) is me checking to see if the results were pushed to the results array, outside the ajax call, inside the getRes function
and in the ready function I am calling the getRes function with the search query, and saving it's return into 'res'
@jdtdesigns why wouldn't it be if I pushed it into an array outside of the ajax
JD Tadlock
@jdtdesigns
Oct 04 2016 21:25
because you need to do things in order of 'when' the data will be received, not in a linear order
Evan W
@Dirtier
Oct 04 2016 21:26
I'm confused. shouldn't the call to getRes call the API? and then when it's 'successful' it should iterate over that array, and move those objects into an array inside the getRes functino
and then that function, after the ajax call, returns the array. I don't see whats wrong with that
JD Tadlock
@jdtdesigns
Oct 04 2016 21:27
@Dirtier This will work
const results = []

const ready = () => {    
    const res = getRes('football');
}

const getRes = (str) => {
    const base = 'https://en.wikipedia.org/w/api.php',
    prefix = '?action=query&list=search&format=json&srsearch=',
    suffix = '&callback=?';

    $.getJSON(base + prefix + + str + suffix, data => {
        $.each(data.query.search, (i, item) => {
            results.push([item.title,item.snippet])
        })
    }).done(() => console.log(results))
}

ready()
.done() is a jQuery method that will wait until the data comes back before doing something else
Evan W
@Dirtier
Oct 04 2016 21:28
isn't that kind of the same as success?
Idk I'm just confused as to why what I was doing wouldnt work lol
JD Tadlock
@jdtdesigns
Oct 04 2016 21:28
.success is deprecated in jQuery 3.1
Evan W
@Dirtier
Oct 04 2016 21:28
like even if its async, I thought success meant it was done
hmm ok
JD Tadlock
@jdtdesigns
Oct 04 2016 21:29
it's .done() and .fail() now for status
Evan W
@Dirtier
Oct 04 2016 21:30
Ok, thanks @jdtdesigns. See I tried moving it all to another array completely outside too and nothing would work. I tried literally every combination I could think of lol, so you're saying it was bc it was ajax?
CamperBot
@camperbot
Oct 04 2016 21:30
dirtier sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 654 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Oct 04 2016 21:30
and btw, when you have 1 line in a callback, you don't need brackets in es6
// this
const ready = () => {    
    const res = getRes('football');
}
// can be this
const ready = () => getRes('football')
Evan W
@Dirtier
Oct 04 2016 21:31
@jdtdesigns Yea I know, I previously had like 6 lines from my constructor
I was just making new objects out of the search objects
as I said, this thing is a frankenstein at this point lol I've been messing with it for far too long
Tyler Napier
@dtnapier
Oct 04 2016 21:33
@jdtdesigns @Dirtier I think I just fixed it by adding .container-fluid to my h1 and h2 element on a whim. Now it's right on center. Thanks!
CamperBot
@camperbot
Oct 04 2016 21:33
dtnapier sends brownie points to @jdtdesigns and @dirtier :sparkles: :thumbsup: :sparkles:
:warning: dtnapier already gave jdtdesigns points
:cookie: 244 | @dirtier |http://www.freecodecamp.com/dirtier
Evan W
@Dirtier
Oct 04 2016 21:34
@dtnapier container-fluid will be the full width of the page, instead of having margins on each side as long as you know that
@dtnapier btw I would suggest using reset or normalize from now on if you aren't already
Tyler Napier
@dtnapier
Oct 04 2016 21:35
That sounds the same in practice
Evan W
@Dirtier
Oct 04 2016 21:35
@dtnapier Well kind of, centering should be the same for both if you're doing it with boostrap
Tyler Napier
@dtnapier
Oct 04 2016 21:36
what are reset and normalize?
Evan W
@Dirtier
Oct 04 2016 21:36
@dtnapier But yea, start using reset or normalize, I use reset. hit the CSS cog and check 'Reset'. It will get rid of all the default margins and paddings for you so stuff acts the way it's supposed to across different environments
JD Tadlock
@jdtdesigns
Oct 04 2016 21:36
@dtnapier the <head></head> doesn't go in the html panel
You set the title in Settings
Tyler Napier
@dtnapier
Oct 04 2016 21:36
I'll google it
Evan W
@Dirtier
Oct 04 2016 21:37
@dtnapier they basically do this for you, automatically
Tyler Napier
@dtnapier
Oct 04 2016 21:37
ok thanks. I'll play around
Evan W
@Dirtier
Oct 04 2016 21:37
margin:0;
padding:0;
@dtnapier just hit the CSS cog, and go to where it says reset and normalize and hit the little question mark
it will tell you all about them
under CSS Base
@jdtdesigns But yea thanks, I just needed them outside so I could start playing w/ Vue :P big help.
CamperBot
@camperbot
Oct 04 2016 21:40
dirtier sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: dirtier already gave jdtdesigns points
Evan W
@Dirtier
Oct 04 2016 21:45
@jdtdesigns Btw, how did you know that you'd be able to use $.getJSON ? When I tried that the first time it said that I needed additional Headers and shit
JD Tadlock
@jdtdesigns
Oct 04 2016 21:46
@Dirtier Well, you've spent hours, i've spent years banging my head ;)
$.ajax is usually the standard example for all apis
Evan W
@Dirtier
Oct 04 2016 21:47
Haha I meant I'd spent hours on this specific problem. When I spend that long on one thing and make 0 progress I get tempted to just delete it
Yea see I guess I just dont know when to use which, bc typically I use $.getJSON for simple APIs, but sometimes I'll think it's simple and then it will ask for headers and what-not
JD Tadlock
@jdtdesigns
Oct 04 2016 21:49
@Dirtier You get better and better at knowing what every console error means
I know what most are referring to now, so I do this or that based on my errors
Islam Ibakaev
@dagman
Oct 04 2016 21:50
hey guys can you explain this citation
When browser-React encounters HTML rendered by server-React, it just adds event listeners.
JD Tadlock
@jdtdesigns
Oct 04 2016 21:50
if specific header info or any querky params were needed, the console would have let me know
@Dirtier
Evan W
@Dirtier
Oct 04 2016 21:59
@jdtdesigns Oh and instead of ready() at the bottom, shouldn't it be $(document).ready(ready)? How would it know when the page is actually done loading with just ready()? Or is it just because it's at the bottom so it would have to be ready?
JD Tadlock
@jdtdesigns
Oct 04 2016 22:01
@Dirtier the script is loaded before </body> so it will be ready
it's the standard these days anyways
.ready() is kinda obsolete
Evan W
@Dirtier
Oct 04 2016 22:02
Ok cool
So I was kind of using a hybrid of the two lol, or just a different way or writing the old version I guess O.o
I have a friend who's actually a professional web developer and he teaches me these things without explaining the little stuff like that
Patrick Fitzgerald
@mrpf1
Oct 04 2016 23:20
@JLuboff @U-ways It works! Many thanks. Need more array practice!
CamperBot
@camperbot
Oct 04 2016 23:20
mrpf1 sends brownie points to @jluboff and @u-ways :sparkles: :thumbsup: :sparkles:
:cookie: 387 | @jluboff |http://www.freecodecamp.com/jluboff
:cookie: 475 | @u-ways |http://www.freecodecamp.com/u-ways
Jason Luboff
@JLuboff
Oct 04 2016 23:20
:+1:
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 23:21
Hello, I want to have a paragraph on the left side and an image on the right, but everytime i try, they never line up correctly.
ive tried inline blocks and div styling. nothing seems to make them line up and centered.
Jason Luboff
@JLuboff
Oct 04 2016 23:25
@DoYouLoveGames There's built in styling with Bootstrap for that...let me see if I can find it
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 23:28
okay great.
ive been stuck trying to figure this out for hours
Jason Luboff
@JLuboff
Oct 04 2016 23:29
http://getbootstrap.com/components/#media see if thats what you're trying to do
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 23:30
not quite
i want a paragraph on the left side of the page, and an image on the right side. the same size, and equal distance away from each other and the right and left margins
kind of like thumbnails, but one would be an image.
Evan W
@Dirtier
Oct 04 2016 23:32
@DoYouLoveGames have you tried using pull-left and pull-right?
Jason Luboff
@JLuboff
Oct 04 2016 23:32
Ah. Do you have it in codepen?
Evan W
@Dirtier
Oct 04 2016 23:32
@DoYouLoveGames <p class='pull-left'><img class='pull-right'>
And then surround those in a row
<div class='row'>
   <div class='col-xs-12'>
      <p class='pull-left'></p>
      <img class='pull-right' />
   </div>
</div>
Or get rid of the div with the col-xs-12
I suppose you could just pull the p left and leave the img as is too
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 23:36
do you use ' or "?
Evan W
@Dirtier
Oct 04 2016 23:36
doesnt matter
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 23:36
ok, that didnt work then
Evan W
@Dirtier
Oct 04 2016 23:36
is it a codepen?
let me see
You probably have something conflicting with it
in your CSS
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 23:37
ok do i just send the link in here to my codepen?
Evan W
@Dirtier
Oct 04 2016 23:37
Just delete every other positioning you have on those items and try that, you want the height of the row to be equal to whatever is tallest as wel
Yes
just copy the link and paste it in here
Make sure its saved so we can see what you've done
Evan W
@Dirtier
Oct 04 2016 23:38
Ok one sec
lemme look at it
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 23:39
i want the paragraph on the left, justified or centered with small margins, and the picture on the right, with equal spacing.
Evan W
@Dirtier
Oct 04 2016 23:39
Oh
You arent even using bootstrap
That's why it didnt work lol
I thought someone said you were using bootstrap
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 23:40
haha this is killing me -_-
Jason Luboff
@JLuboff
Oct 04 2016 23:40
I had mentioned the Media built in class with bootstrap earlier
Evan W
@Dirtier
Oct 04 2016 23:41
Bootstrap would definitely be the easiest way to do this
also you're using p1 in your CSS, I don't think p1 is anything
is it? O.o
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 23:41
only h1-6 then?
idk im a noob at this.
Evan W
@Dirtier
Oct 04 2016 23:42
Yea those are for headers
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 23:42
this camp is frustrating also because it just says figure it out on your own. the example they give has code in it that wasn't even covered in the lessons.
Evan W
@Dirtier
Oct 04 2016 23:42
like header text, h1 is biggest, others are smaller
p is just paragraph
so to select p in CSS you would either select all p's with p { } or give your p and ID
or add a class to it
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 23:43
i just tried to use p1 because i figured id have more paragraphs with different styles
Evan W
@Dirtier
Oct 04 2016 23:44
then just give them different IDs
you can have an unlimited amount
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 23:45
okay
Evan W
@Dirtier
Oct 04 2016 23:45
like <p id='p1'>
then you select that in your CSS with #p1 {}
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 23:45
then i can use css p1{
gotcha
but that doesnt solve my alignment problem ;(
Evan W
@Dirtier
Oct 04 2016 23:47
Yea Im fixing it
Got them aligned now but fixing your background
You should really go through the bootstrap problems
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 23:47
<3
Jason Luboff
@JLuboff
Oct 04 2016 23:47
FCC is very much here's some lessons, now do this task that we didn't necessarily cover but research and learn. You may want to take some of the courses at http://codecademy.com it helped fill some holes for me since they're a lot more hands holding
Evan W
@Dirtier
Oct 04 2016 23:47
helps a ton
Yea I started at codecademy a long time ago, <3 it
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 23:48
ive been using w3schools
but basically jumping around to learn what i need to get through this lesson
Jason Luboff
@JLuboff
Oct 04 2016 23:49
I use w3schools as sublimental material, but I personally have never used it as a main learning tool
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 23:49
ive already restarted this portfolio page twice
Evan W
@Dirtier
Oct 04 2016 23:49
@DoYouLoveGames Ok its done
I used bootstrap though, if you need help with it ill walk you through it
Also I wouldn't use static widths on images
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 23:49
so essentially what youre saying is, learn the languages from other websites and then complete the camp after?
Evan W
@Dirtier
Oct 04 2016 23:50
It really fucks everything up when you make the screen smaller
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 23:50
@dirtier like :auto?
Evan W
@Dirtier
Oct 04 2016 23:50
@DoYouLoveGames No, learn from here, if you find something you don't know, go try and learn it from somewhere else
Ok so Codecademy goes really in-depth with the basics
But doesnt cover as much as FCC
Thats the trade-off
FCC covers a ton, but doesn't go nearly as in-depth with a lot of stuff
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 23:51
fcc is really vague a lot of the time
on codepen you use bootstrap in your html box or css?
Ok so that works kind of weird in here, but I only changed the stuff you needed. Personally I would start from scratch and design it all with Bootstrap
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 23:54
That would entail learning bootstrap -_-
guess i have to start over lol
Evan W
@Dirtier
Oct 04 2016 23:54
trust me
its something you want to know
it makes everything so much easier
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 23:54
the fcc lessons on bootstrap taught me almost nothing
Evan W
@Dirtier
Oct 04 2016 23:55
Do you want me to just show you how to do it regularly?
I would definitely recommend bootstrap though
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 23:55
if you dont mind
Evan W
@Dirtier
Oct 04 2016 23:55
Ok, one minute again lol
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 23:55
i will take your advice, i just want to finish this damn portfolio
Evan W
@Dirtier
Oct 04 2016 23:57
btw, when you give something an id
it's just <p id='p1'>
no #
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 23:58
ahh alright
Evan W
@Dirtier
Oct 04 2016 23:58
the # is for selecting p1 in CSS
ID's get #p1 and classes get a .
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 23:58
so for image sizes you just want to use a percentage?
Evan W
@Dirtier
Oct 04 2016 23:58
so id='p1' is #p1 in CSS, class='p1' is .p1 in CSS
Edgar Gil
@EdgarrGil
Oct 04 2016 23:58
Yes
Evan W
@Dirtier
Oct 04 2016 23:58
Ehh, it really depends what element you have it wrapped in
Edgar Gil
@EdgarrGil
Oct 04 2016 23:59
Thas true also but even then u can still target then with css
Evan W
@Dirtier
Oct 04 2016 23:59
Bc it's the % of the parent element, the container. Not % overall
DoYouLoveGames
@DoYouLoveGames
Oct 04 2016 23:59
ohhhhhhhhhh
that helps a lot