These are chat archives for FreeCodeCamp/HelpFrontEnd

28th
Jun 2016
Biazus
@Biazus
Jun 28 2016 00:00
Hi, I need some help with bootstrap grids. Whenever I shrink the width of the page the first column adjusts his size and it becomes higher, but the second one doesn't. Here's my pen
http://codepen.io/almanegra/full/KMaeeZ/
it's size*
Jacob Bogers
@jacobbogers
Jun 28 2016 00:02
I present to you "game of life" http://codepen.io/jacobBogers/pen/XKpOqx
Marco Mazzeo
@Doko85
Jun 28 2016 00:03
@dcgoings try to use <a name="about"></a> before the section and see if that fixes it
Dan
@dcgoings
Jun 28 2016 00:03
it did not.
you mean add it before <section id="about">?
Marco Mazzeo
@Doko85
Jun 28 2016 00:04
yes
Dan
@dcgoings
Jun 28 2016 00:04
yeah, no go.
Marco Mazzeo
@Doko85
Jun 28 2016 00:04
try to remove the id on the section
tylerprosper
@removed~tylerprosper
Jun 28 2016 00:05
Hello again
I have another question regarding the position of my center column and width of my page in general
my menu bar is perfect
where i want it
but the center column still scrolls horizontally independent of the menu bar
as if the body is too wide or something
Dan
@dcgoings
Jun 28 2016 00:06
@Doko85 when i do that, clicking about doesnt work at all
Marco Mazzeo
@Doko85
Jun 28 2016 00:07
check this
Dan
@dcgoings
Jun 28 2016 00:10
not sure that helps lol.
i just discovered that it works fine on mobile size, but not large screen.
it's definitely a padding issue i think. i just dont know where.
Marco Mazzeo
@Doko85
Jun 28 2016 00:16
add 35\40px of top padding
anyway it's 2:15am and I'm sleepy
I'd help you more but I wanna wake up early in the morning :\
Dan
@dcgoings
Jun 28 2016 00:17
haha it's okay. i tried adding padding but then i just have huge white space above "about me"
Marco Mazzeo
@Doko85
Jun 28 2016 00:19
add the padding to the text part
no that doesn't work either
Dan
@dcgoings
Jun 28 2016 00:22
:/
Faith Kent
@FaithKent
Jun 28 2016 00:22

I'm getting an unexpected behavior when I hover over the button that generates my random wiki page. The intent is just to have the border glow. Instead the background image is popping forward. Anyone have any guesses how to fix this? I DID finally get it glowing... There is also an random black line across the middle right that I cant seem to pin down the origin of.

https://codepen.io/FaithKent/pen/WxGVwQ?editors=1111

Marco Mazzeo
@Doko85
Jun 28 2016 00:22
<body onload="load()"> I don't think you need this if you are using a document.ready function
Dan
@dcgoings
Jun 28 2016 00:22
oh i was fiddling
that's gone now
i tried googling a solution and someone came up with some script, but it didnt work
Marco Mazzeo
@Doko85
Jun 28 2016 00:26
anyway apparently I'm getting your error as well on my page
since when clicking the button it goes to the start of the section and not at the start of the content division
Dan
@dcgoings
Jun 28 2016 00:26
yours showed the header
yep
i mean, yours was still better than mine
Marco Mazzeo
@Doko85
Jun 28 2016 00:27
anyway I don't get why the <a name=""> method doesn't work on your code
Dan
@dcgoings
Jun 28 2016 00:28
me either
fml
Marco Mazzeo
@Doko85
Jun 28 2016 00:29
anyway I like the way you styled it... gotta follow you to track your progresses
Dan
@dcgoings
Jun 28 2016 00:29
thank you very much. i appreciate that. :)
i still need my contact section and add the projects ive done, but this scrolling issue took over my life for the past few hours so everything else has been on hold.
Faith Kent
@FaithKent
Jun 28 2016 00:33
@dcgoings , it looks like it may be related to how the navbar is floating when its in its expanded view. it takes up more vertical space, and is covering the top of the section you scroll to.
its not the scrolling behavior that is changing but the vertical space the navbar takes up.
Dan
@dcgoings
Jun 28 2016 00:35
so then the solution would be my media queries. the thing im trying to figure out is like.. how can i keep the space (padding) between the h1 header "about me" and the border of the home picture?
like.. just because the navbar is bigger on large screen, ideally i want to keep the padding the same between the about me h1 and the above pic. i cant figure out how to do that.
crammatt
@crammatt
Jun 28 2016 00:36
any one know how to get font awesome to work with code pen?
Dan
@dcgoings
Jun 28 2016 00:37
go to the css settings
OKAY
PROGRESS
I added this to my media query
    #about {
        padding-top: 130px;
    }
BUT now there's a huge gap of white space above about me
Faith Kent
@FaithKent
Jun 28 2016 00:40
thats what I was going to suggest trying
Dan
@dcgoings
Jun 28 2016 00:41
so, you would obviously see it if you chose to scroll
UGH
this is infuriating
Faith Kent
@FaithKent
Jun 28 2016 00:42
you may need to use before and after pseudo elements to dictate what padding to use when.
Dan
@dcgoings
Jun 28 2016 00:46
oh shit
i think i rigged a way
padding-top: 120px;
margin-top: -120px;
Faith Kent
@FaithKent
Jun 28 2016 00:46
ha
Dan
@dcgoings
Jun 28 2016 00:46
not ideal
i actually had a border-top for my about section, which was messed up and overlapped the picture
but i moved it to the picture itself and made it border-bottom which was good
Faith Kent
@FaithKent
Jun 28 2016 00:47
it didnt help for the portfolio section. still scrolls too far.
Dan
@dcgoings
Jun 28 2016 00:47
i feel like there's still an easier way
oh yeah
sec
SHIT
Aaron Taylor
@aarontaylor
Jun 28 2016 00:47
Guys, I just struggled way to hard on the stupid Record Collection task and I been doing this for a while. I finally figured it out.. but whew :/
Anyway, just came to share that since well.. I am exasperated
Faith Kent
@FaithKent
Jun 28 2016 00:48
@aarontaylor kudos on getting past it!
Dan
@dcgoings
Jun 28 2016 00:48
okay so i cant do the same thing, because it goes into the about section
god damn it
i guess i can just add padding-bottom lol
Aaron Taylor
@aarontaylor
Jun 28 2016 00:49
Thank you @FaithKent !
CamperBot
@camperbot
Jun 28 2016 00:49
aarontaylor sends brownie points to @faithkent :sparkles: :thumbsup: :sparkles:
:cookie: 331 | @faithkent |http://www.freecodecamp.com/faithkent
Dan
@dcgoings
Jun 28 2016 00:49
man, this feels so amateur.
Aaron Taylor
@aarontaylor
Jun 28 2016 00:50
@dcgoings I hear you.. I struggle with some of the simplest things too and I have been developing for 25 years ! Just never focused on the front end as much.
Makes me feel amateur as well. Little CSS gotchas everywhere.
Dan
@dcgoings
Jun 28 2016 00:50
i feel like i just missed one simple thing
Aaron Taylor
@aarontaylor
Jun 28 2016 00:50
It's the simplest things..
Dan
@dcgoings
Jun 28 2016 00:50
and now because i missed that one thing, i need to implement four other things to fix it.
Faith Kent
@FaithKent
Jun 28 2016 00:52
here... the second answer looks like it might work. http://stackoverflow.com/questions/11501025/div-anchors-scrolling-too-far
creating an anchor with offset
Dan
@dcgoings
Jun 28 2016 00:55
hmm
Hey guys! Can anybody help me out with my horizontal scroll issue
sorry if im repeating myself here
Faith Kent
@FaithKent
Jun 28 2016 01:00
@tylerprosper , Im assuming you mean you dont want to to offer all that horizontal scroll?
tylerprosper
@removed~tylerprosper
Jun 28 2016 01:00
yes
the background or body is way to wide
and the main column scrolls horizontally
Faith Kent
@FaithKent
Jun 28 2016 01:01
try altering your background-size property to something other than cover
thats my best guess
tylerprosper
@removed~tylerprosper
Jun 28 2016 01:01
ok thank you
Faith Kent
@FaithKent
Jun 28 2016 01:01
let me know if it works, I'm curious.
Dan
@dcgoings
Jun 28 2016 01:02
@FaithKent okay so im making a little more progress
issue now is the portfolio section.. and then im going to probably have the same issues when i code up the contact section.
gjjgjj2
@gjjgjj2
Jun 28 2016 01:13
When it comes to our tribute page, are there things we need to be mindful of to avoid any sort of taking other people's work? In reference to pictures ect?
Faith Kent
@FaithKent
Jun 28 2016 01:13
Im messing with my own now, because it has a similar problem. Im not having any more luck than you at the moment.
Dan
@dcgoings
Jun 28 2016 01:16
okay so
it depends on the height of the navbar
so a 120px height navbar means you would need a 120px padding for your first section, and a -120px margin. this aligns it perfect for the first section.
for the second section, im all out of ideas haha
Faith Kent
@FaithKent
Jun 28 2016 01:20
i MAY have just found something... let me give it a try
Dan
@dcgoings
Jun 28 2016 01:22
    #about {
        padding-top: 120px;
        margin-top: -120px;
        padding-bottom: 120px;
        margin-bottom: -120px;
    }
    #portfolio {
        padding-top: 120px;
        margin-top: -120px;
    }
CamperBot
@camperbot
Jun 28 2016 01:22
you need to ask about @someone!
Dan
@dcgoings
Jun 28 2016 01:23
so this works much better (specific to me because my navbar is 120px)
but
i have a gap above the portfolio h1 now
Toni Shortsleeve
@KoniKodes
Jun 28 2016 01:35
@dcgoings did you fix your navbar to the top?
@dcgoings or try making your padding ems or % instead of px
Faith Kent
@FaithKent
Jun 28 2016 01:42
adding padding to mine appears to have fixed it, but I have a significantly shorter navbar, only 40px
on the widest and smallest settings yours appears to be fixed, but the middle setting it still cuts off half way down the h1.
tylerprosper
@removed~tylerprosper
Jun 28 2016 01:59
@FaithKent so when my browser is in full screen and maximized to a reasonable degree there's no scroll
MinnaB
@MinnaB
Jun 28 2016 01:59
I am looking for a responsive design email editor. Does anyone have any recommendations? I am looking at using a newsletter template but I want to be abe to edit it freely. I'm currently just starting to build my tribute page in FCC-so that gives you a baseline of how much code I've learned.
tylerprosper
@removed~tylerprosper
Jun 28 2016 01:59
but as soon as the screen width becomes lower than a certain amount, the offending horizontal scroll occurs
buiphuking
@buiphuking
Jun 28 2016 02:03
anyone good at angular, i have something to ask
Faith Kent
@FaithKent
Jun 28 2016 02:15
@tylerprosper, its your avatar div. it starts at 39% across, and extends for another 100% of the width, for a total of 139% of the screen width.
tylerprosper
@removed~tylerprosper
Jun 28 2016 02:16
@FaithKent aaaaah
i see thx for finding that
Faith Kent
@FaithKent
Jun 28 2016 02:16
I cant take the credit for that, my husband caught it.
tylerprosper
@removed~tylerprosper
Jun 28 2016 02:18
@FaithKent haha great
Hey, how then would I center it?
without using percentages it sort just sticks to the left of the center column
Mahdi H. Osman
@Mahdi451
Jun 28 2016 02:31
hey can anyone help me with this jQuery challenge?
nvm i got it :)
tylerprosper
@removed~tylerprosper
Jun 28 2016 02:48
@FaithKent nvm I figured it out. Thx
CamperBot
@camperbot
Jun 28 2016 02:48
tylerprosper sends brownie points to @faithkent :sparkles: :thumbsup: :sparkles:
:cookie: 332 | @faithkent |http://www.freecodecamp.com/faithkent
Jack C
@JackCameo
Jun 28 2016 03:05
Hey, can anyone recommend an api for random quotes
Travmatth
@Travmatth
Jun 28 2016 03:08
Jack C
@JackCameo
Jun 28 2016 03:15
@Travmatth thank you
CamperBot
@camperbot
Jun 28 2016 03:15
jackcameo sends brownie points to @travmatth :sparkles: :thumbsup: :sparkles:
:cookie: 289 | @travmatth |http://www.freecodecamp.com/travmatth
Jack C
@JackCameo
Jun 28 2016 03:23
@Travmatth can i use get or does it need to be post
Tommy Izen
@TommyIzen
Jun 28 2016 03:25
Hi everyone. I'm almost finished with my personal portfolio zipline. Is it okay to use Wordpress sites I've made for now in the placeholders?
I don't want to give the impression I'm passing wordpress off as coding skill
Aaron Taylor
@aarontaylor
Jun 28 2016 03:35
I think it is fine to use anything you want as place holders to be honest
But then you can put other pages up as you do them as actual projects
Tommy Izen
@TommyIzen
Jun 28 2016 03:35
cool thanks
Aaron Taylor
@aarontaylor
Jun 28 2016 03:35
I was tempted to put a lot of my past projects up too @TommyIzen and I wasn't sure if I should, but then the more I thought about it, why not?
Rajdeep Roy
@RajdeepRoy
Jun 28 2016 03:38
Guys can you help me with this challenge.
playerNumber should be a number
The variable player should be a string
The value of player should be "Montana"
You should use bracket notation to access testObj
You should be using the variable playerNumber in your bracket notation
1

2
// Setup
3
var testObj = {
4
12 : "Namath",
5
16 : "Montana" ,
6
19 : "Unitas"
7
};
JD Tadlock
@jdtdesigns
Jun 28 2016 04:24
@TommyIzen Custom WordPress development is pretty intense and not easy stuff. So if you can get to that level, it's a true skill. ;)
Tommy Izen
@TommyIzen
Jun 28 2016 04:32
@jdtdesigns No doubt. The most editing I did in WP was finding great themes and editing the css and html.
Got the personal portfolio webpage done it seems http://codepen.io/RedHugh/full/ZOLaQP/
JD Tadlock
@jdtdesigns
Jun 28 2016 04:40
Looks good. @TommyIzen
andreas2249
@andreas2249
Jun 28 2016 04:43

Good evening, Campers. Was trying to test my knowledge and write the Cat Photo App from scratch in a CodePen. Just noticed that my <ul> bullets don't vertically align with <ol> numbers. There's no CSS on them other than font-family -- and I do have Bootstrap unloaded. (In the coding exercise, they do align vertically...) Any thoughts?

Here's a codepen: https://codepen.io/andreas2249/pen/dXNLqj Thanks in advance. :)

(by vertical alignment, I mean to say same indentation level... )
Tommy Izen
@TommyIzen
Jun 28 2016 04:47
Thanks
Thanks @jdtdesigns
CamperBot
@camperbot
Jun 28 2016 04:48
tommyizen sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 582 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Syed Taha
@Spawn12
Jun 28 2016 04:51
var mystr=;
myStr should have encoded text with the proper escape sequences and spacing.
myStr should have two tab characters \t
myStr should have one newline character \n
myStr should have a correctly escaped backslash character \
myStr should not have any spaces in between consecutive escape sequences.
DJ
@qualitymanifest
Jun 28 2016 04:53
@andreas2249 if you look, the text is actually perfectly aligned, it's just the bullet points/numbers are not aligned with each other. i think that's just how they show up.
andreas2249
@andreas2249
Jun 28 2016 04:58
Thank you, @qualitymanifest. I was wondering if it's just the way things were -- until I looked back at the exercise. They're aligned there: https://s31.postimg.org/ggplsv1e3/alignment.png
CamperBot
@camperbot
Jun 28 2016 04:58
andreas2249 sends brownie points to @qualitymanifest :sparkles: :thumbsup: :sparkles:
:star2: 1229 | @qualitymanifest |http://www.freecodecamp.com/qualitymanifest
andreas2249
@andreas2249
Jun 28 2016 04:58
@qualitymanifest, Just lucky alignment? :) (I don't see any CSS in the final exercise that would align them that way... )
DJ
@qualitymanifest
Jun 28 2016 05:01
@andreas2249 idk what kind of styling they might apply to that iframe behind the scenes... and really i wouldn't be too concerned about that. just out of curiosity i made them line up on your pen with
ol {
  margin-left: 10px;
}
ul>li {
  padding-left: 10px;
}
andreas2249
@andreas2249
Jun 28 2016 05:02
Wow, very cool. Thanks for the code. Have a great evening, @qualitymanifest.
CamperBot
@camperbot
Jun 28 2016 05:02
andreas2249 sends brownie points to @qualitymanifest :sparkles: :thumbsup: :sparkles:
:warning: andreas2249 already gave qualitymanifest points
DJ
@qualitymanifest
Jun 28 2016 05:04
@andreas2249 no problem, you too
Dan
@dcgoings
Jun 28 2016 05:23
@FaithKent still around?
i cant get an anchor link to open in a div
on the custom search click
but the random button fires just fine
flaviorcb
@flaviorcb
Jun 28 2016 06:12
Hi guys, I am making the portiolio page using boostrap, but I can not align vertically my menu itens with my logo.... http://codepen.io/flaviorcb/pen/xORzNb
Faith Kent
@FaithKent
Jun 28 2016 06:15
@dcgoings was gone, now back =0)
Dan
@dcgoings
Jun 28 2016 06:16
hey no worries. im still trying to figure this out haha.
i had it nice for about, but portfolio was still ruining my life
ankitguddu96
@ankitguddu96
Jun 28 2016 06:20

Hey guys I made my Tribute page just now. It would be great if you could give in your suggestions. Thanks a ton.

Link : https://codepen.io/Ankit_Agarwal/full/oLBQYx/

Faith Kent
@FaithKent
Jun 28 2016 06:21
@dcgoings So, husband codes for a living and he's pointing me toward JS as the answer to this dilemma. Says the first answer on here is what he would use. http://stackoverflow.com/questions/15139644/scroll-to-id-with-fixed-top-bar
its a simplified version of what he used to do this http://ibiwan.com/newsite/#code
So, proof is in the product I guess, but I haven't tried it yet myself.
Dan
@dcgoings
Jun 28 2016 06:24
testing it out now! ill let you know how it goes
Faith Kent
@FaithKent
Jun 28 2016 06:24
awesome =0)
Faith Kent
@FaithKent
Jun 28 2016 06:38
@ankitguddu96 , looks good! Personally I would center the main image, but it looks like it covers all the required user story points.
ankitguddu96
@ankitguddu96
Jun 28 2016 06:40
@FaithKent Thanks :) This was my first attempt; would definitely keep your inputs in mind for the next project.
CamperBot
@camperbot
Jun 28 2016 06:40
:cookie: 333 | @faithkent |http://www.freecodecamp.com/faithkent
Dan
@dcgoings
Jun 28 2016 06:40
not looking good here, im not all that great with JS yet and can't get it to bite.
CamperBot
@camperbot
Jun 28 2016 06:40
ankitguddu96 sends brownie points to @faithkent :sparkles: :thumbsup: :sparkles:
Faith Kent
@FaithKent
Jun 28 2016 06:44
@dcgoings gimme a minute. Im gonna poke at it.
Faith Kent
@FaithKent
Jun 28 2016 06:53
@dcgoings Here, I forked it and we played with it a bit. You'll need to play with it a bit to get the animation working again, but it scrolls to the right place. It was just a copy paste of that example with the selectors updated for your layout. http://codepen.io/FaithKent/pen/MepJjz?editors=1010
Dan
@dcgoings
Jun 28 2016 07:01
just this was the code, right?
$("#toplinks").on('click','a', function(event){ 
    event.preventDefault();
    var o =  $( $(this).attr("href") ).offset();   
    var sT = o.top - $(".navbar-header").outerHeight(true); // get the fixedbar height
    // compute the correct offset and scroll to it.
    window.scrollTo(0,sT);
});
i swear i made that change to .navbar-header
im not sure what i missed
(just double checking, because i saw two different examples in there from that link)
Faith Kent
@FaithKent
Jun 28 2016 07:05

$("#toplinks, #bottomlinks").on('click','a', function(event){
event.preventDefault();
var o = $( $(this).attr("href") ).offset();
var sT = o.top - $("#fixedbar").outerHeight(true); // get the fixedbar height
// compute the correct offset and scroll to it.
window.scrollTo(0,sT);
});

is the example

Dan
@dcgoings
Jun 28 2016 07:06
so weird. it looks like the only difference is ".navbar-header" which i know i tried. i hate coding haha.
thanks so much @FaithKent & husband :D
CamperBot
@camperbot
Jun 28 2016 07:06
dcgoings sends brownie points to @faithkent :sparkles: :thumbsup: :sparkles:
:cookie: 334 | @faithkent |http://www.freecodecamp.com/faithkent
Faith Kent
@FaithKent
Jun 28 2016 07:06

$(".scroll").on('click', 'a', function(event) {
event.preventDefault();
var o = $($(this).attr("href")).offset();
var sT = o.top - $("#bs-example-navbar-collapse-1").outerHeight(true);

to this

so we changed from the example to your .scroll class, and then to your #bs-example-navbar-collapse-1. and thats all it took.
does that make sense?
Dan
@dcgoings
Jun 28 2016 07:10
it almost did. :D i think the reason i was confused was because the stackoverflow answer was only one of those (the first one). what you just wrote was part of the second answer they gave. i didn't know i was supposed to be using both.
nevermind. just ignore everything im saying.
Faith Kent
@FaithKent
Jun 28 2016 07:13
the two things I just posted were a direct copy paste of the stackoverflow answer and that same paste with their example class and navbar swapped out for yours. We didnt have to pull from more than one answer.
haha, no worries.
Dan
@dcgoings
Jun 28 2016 07:15
okay, well, hmm..
the $(".scroll") version is absolutely not working properly.

however, this was also in the codepen you guys played with:

    $("#toplinks").on('click','a', function(event){ 
    event.preventDefault();
    var o =  $( $(this).attr("href") ).offset();   
    var sT = o.top - $(".navbar-header").outerHeight(true); // get the fixedbar height
    // compute the correct offset and scroll to it.
    window.scrollTo(0,sT);
});

and it appears to work fine, minus the scroll.

THAT is why im confused.
Faith Kent
@FaithKent
Jun 28 2016 07:19
now I'm the confused one because I don't see that specific code in the one im looking at. But im glad it works!
Dan
@dcgoings
Jun 28 2016 07:20
yeah, i dont know what's going on anymore. the codepen you linked isn't even loading anymore. no clue.
thanks again! im going to try and get the animation next!
Faith Kent
@FaithKent
Jun 28 2016 07:21
heh, no idea. good luck! I look forward to seeing the finished product!
Dan
@dcgoings
Jun 28 2016 07:30
OH MY GOD
LOL
@FaithKent so guess what? while im doing some googling about re-implementing the scroll, guess what i find out?
Faith Kent
@FaithKent
Jun 28 2016 07:32
???
Dan
@dcgoings
Jun 28 2016 07:32
$(".scroll").click(function(event) {
        event.preventDefault();
        $("html,body").animate({
            scrollTop: $(this.hash).offset().top
        }, 500);
    });
if i just add " - 120 " to the end of .top, it works perfect.
er, just saved
should be added now
un. real.
Faith Kent
@FaithKent
Jun 28 2016 07:33
it lives!!!!
Dan
@dcgoings
Jun 28 2016 07:34
i mean, the only thing left is to account for the difference in navbar heights, which go 60px 100px 120px.. so i need to find a way to make that dynamic instead of -120
because it wont work when the navbar is 60 or 100
Faith Kent
@FaithKent
Jun 28 2016 07:35
do let me know what you come up with. Im curious.

Im gonna toss MY current dilemma up here and retire for the evening. Unexpected behavior is the zoom on the image when hovering over it, and the strange black line hanging out center right. If anyone has Ideas... Im stymied.

https://codepen.io/FaithKent/pen/jrBrpX

Dan
@dcgoings
Jun 28 2016 07:38

@FaithKent

        $("html,body").animate({
            scrollTop: $(this.hash).offset().top - $(".navbar-default").height()
        }, 500);

unreal. i can't believe the amount of time that took out of me.

- $(".navbar-default").height()
that's all i needed.
@FaithKent background: #222922; is causing the zoom
errr, i lied.
Dan
@dcgoings
Jun 28 2016 07:45

so when you remove

  background: #222922;
  background: -webkit-linear-gradient(#333933, #222922);
  background: -moz-linear-gradient(#333933, #222922);
  background: -o-linear-gradient(#333933, #222922);
  background: -ms-linear-gradient(#333933, #222922);
  background: linear-gradient(#333933, #222922);

all of that, he doesn't zoom anymore. >_>

and

.webdesigntuts-workshop:after {
...
height: 1px;
...
}

needs to be set to 0px;

which removes the line.
Kunal Rastogi
@KaiJoost
Jun 28 2016 07:49
hey
Ogundele Olumide
@Lumexralph
Jun 28 2016 07:51
hello guys, am working on the local weather app, i tried getting data from the server and it keeps giving me an error message "ERR_CONNECTION_REFUSED"
Faith Kent
@FaithKent
Jun 28 2016 07:53
thanks @dcgoings! you are a genius. That has had me stuck and staring blankly ALL afternoon.
CamperBot
@camperbot
Jun 28 2016 07:53
faithkent sends brownie points to @dcgoings :sparkles: :thumbsup: :sparkles:
:cookie: 322 | @dcgoings |http://www.freecodecamp.com/dcgoings
Faith Kent
@FaithKent
Jun 28 2016 07:54
now I may actually be able to sleep tonight!
Dan
@dcgoings
Jun 28 2016 07:54
sounds familiar! haha
im pretty sure i was going to have nightmares about padding-top and scrolling if i couldnt fix my page.
anyways, im off for the night. contact section is tomorrow! thanks again
Krishna Sai Gullapalli
@Krish2704
Jun 28 2016 07:59
just finished my wikipedia viewer project
reviews please :)
kirbyedy
@kirbyedy
Jun 28 2016 08:33
does not work
Uncaught TypeError: Cannot read property 'length' of undefined
Krishna Sai Gullapalli
@Krish2704
Jun 28 2016 08:36
@kirbyedy nah! just changed something. It will work now
kirbyedy
@kirbyedy
Jun 28 2016 08:49
what if I type something crazy
sdhfjasdajksdhf
no error or warning message ?
not needed by the project, just something for you to practice a little bit
Krishna Sai Gullapalli
@Krish2704
Jun 28 2016 09:02
@kirbyedy right! thanks :)
CamperBot
@camperbot
Jun 28 2016 09:02
krish2704 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1165 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Krishna Sai Gullapalli
@Krish2704
Jun 28 2016 09:02
i'll add that
Kunal Rastogi
@KaiJoost
Jun 28 2016 09:09
@Krish2704 bro
@Krish2704 bro
Krishna Sai Gullapalli
@Krish2704
Jun 28 2016 09:12
@KaiJoost yup
Kunal Rastogi
@KaiJoost
Jun 28 2016 09:13
@Krish2704 https://codepen.io/FreeCodeCamp/pen/YqLyXB i want to make a symbol like one under the portfolio heading of this example code.....how do i do it?
Krishna Sai Gullapalli
@Krish2704
Jun 28 2016 09:14
@KaiJoost that's a hr. horizontal rule
Kunal Rastogi
@KaiJoost
Jun 28 2016 09:14
This message was deleted
Krishna Sai Gullapalli
@Krish2704
Jun 28 2016 09:15
<hr>
take a look at this link
Kunal Rastogi
@KaiJoost
Jun 28 2016 09:15
ohk thanx @Krish2704
CamperBot
@camperbot
Jun 28 2016 09:15
kaijoost sends brownie points to @krish2704 :sparkles: :thumbsup: :sparkles:
:warning: kaijoost already gave krish2704 points
Anna
@AnnaRedPanda
Jun 28 2016 09:20
Hi! Can someone help me? I built Show the Local Weather in CodePen yesterday, and it worked. But it doesn't work today. It looks like it doesn't see jQuery and fonts. But when i copy-paste all the code to the new Pen, it works again. What am I doing wrong? The "yesterday pen": https://codepen.io/AnnaRedPanda/pen/KMWaZr and the "today pen": http://s.codepen.io/AnnaRedPanda/debug/KMWWbV
DumeD
@DumeD
Jun 28 2016 09:34
why is there this gap between the navbar and the div? http://codepen.io/emud/pen/KMNYyM
kirbyedy
@kirbyedy
Jun 28 2016 09:40
@AnnaRedPanda make sure all your fonts and external links are served over secure https
@AnnaRedPanda at the moment the are not, so most probably the same situation will happen again
@AnnaRedPanda this is the log from your console
Mixed Content: The page at 'https://codepen.io/AnnaRedPanda/pen/KMW' was loaded over HTTPS, but requested an insecure stylesheet 'http://webfonts.ru/import/airbornepilot.cs'. This request has been blocked; the content must be served over HTTPS.
Anna
@AnnaRedPanda
Jun 28 2016 09:44
thanks! will try to fix it
kirbyedy
@kirbyedy
Jun 28 2016 09:46
@DumeD you have a margin-bottom: 20px; on the navbar
Screen Shot 2016-06-28 at 12.46.39.png
DumeD
@DumeD
Jun 28 2016 09:50
@kirbyedy oh thanks
CamperBot
@camperbot
Jun 28 2016 09:50
dumed sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1166 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Sophia Brandt
@sophiabrandt
Jun 28 2016 09:54
@Volkov-Illya Man, I'm sorry, I think something went wrong when I copy and pasted it. But you get the gist, right? Combine your getQuerySelector and your addEventListener into one function, something like that: http://www.w3schools.com/jsref/met_element_addeventlistener.asp
Taylor Morgan
@tmdesigned
Jun 28 2016 10:01
Does anyone have any suggestions for what to read regarding animations? As in, the way the circle fills up in the pomodoro clock exercise? I dont even know what that kind of animation is called
Hamaad Chughtai
@Hamaad102
Jun 28 2016 10:03
Anyone got a second to help?
Adam Lichter
@spot1000
Jun 28 2016 10:34
@Hamaad102 sure, what do you need?
Sophia Brandt
@sophiabrandt
Jun 28 2016 11:05
@AnnaRedPanda I forked your codepen and tried it out. jquery works (I just added an alert function and that works). My guess is that it has to do with your weather font. If you're using chrome, check the developer tools.
Plus, something seems to block your jQuery API request.
Mixed Content: The page at 'https://codepen.io/AnnaRedPanda/pen/KMWaZr' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://ip-api.com/json'. This request has been blocked; the content must be served over HTTPS.
Taylor Morgan
@tmdesigned
Jun 28 2016 11:11
Can anyone give me a push in the right direction with the pomodoro timer? Even just a resource to read? I am having trouble getting the timer to change once a second without freezing up my interface
right now I am tracking a "running" boolean, and when the user hits start it begins a while loop that runs until the boolean changes (the user hit stop). But, thats not working
Ken Haduch
@khaduch
Jun 28 2016 11:15
@ohiosierra - would you care to post a link to your project? Getting that basic functionality to run is important, maybe I can make some helpful suggestions?
srishti-learner
@srishti-learner
Jun 28 2016 11:20
hey everyone,my weather app was working quite fine till i came to know that it could not work with 'https' calls since any location finding api or methods won't work over it! so, the console keep saying connection refused if i want to open my app by directly clicking the pen on my codepen profile which by default opens up in https mode on my laptop. if anyone can help me out then it would be great or either tell me a way to alert my users that they should only use http protocols!
Taylor Morgan
@tmdesigned
Jun 28 2016 11:20
@khaduch okay, but it is in an embarassingly early state
Ken Haduch
@khaduch
Jun 28 2016 11:21
@ohiosierra - that's okay -we have to start somewhere...
Anna
@AnnaRedPanda
Jun 28 2016 11:23
@sophiabrandt thanks!
CamperBot
@camperbot
Jun 28 2016 11:23
annaredpanda sends brownie points to @sophiabrandt :sparkles: :thumbsup: :sparkles:
:cookie: 316 | @sophiabrandt |http://www.freecodecamp.com/sophiabrandt
Taylor Morgan
@tmdesigned
Jun 28 2016 11:24
@khaduch so I am thinking that the while loop is loading up on the setTimeout functions before they each process
so it loads up say, a million, of them
Ken Haduch
@khaduch
Jun 28 2016 11:24
@ohiosierra - I think that the first thing I would recommend is not to try setTimeout, but use setInterval instead. setInterval repeats the callback function once each interval (probably once per second).
Taylor Morgan
@tmdesigned
Jun 28 2016 11:25
how do you end a setInterval sequence? like how does it check if it should stop
Ken Haduch
@khaduch
Jun 28 2016 11:25
@ohiosierra - I think that you're correct that you have a loop setting up loads of setTimeout calls, because there is nothing to make the loop wait for the timeout to occur.
Taylor Morgan
@tmdesigned
Jun 28 2016 11:26
nevermind
found clearInterval
Ken Haduch
@khaduch
Jun 28 2016 11:26
If you read the page about setInterval, it returns a value that represents the interval timer that was started. You can use that value then to clear it.
Taylor Morgan
@tmdesigned
Jun 28 2016 11:27
thanks @khaduch
CamperBot
@camperbot
Jun 28 2016 11:27
ohiosierra sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1381 | @khaduch |http://www.freecodecamp.com/khaduch
Taylor Morgan
@tmdesigned
Jun 28 2016 11:28
think that may be the push i needed
Ken Haduch
@khaduch
Jun 28 2016 11:28
@ohiosierra - so that means ONE call to start the interval, make sure that you don't have your code allow another one to start while it is running, and then ONE call to stop it. I use the returned intervalID value as a control mechanism - if it is set, you don't start another one. That is in addition to disabling or changing the sense of the "start / stop" button
@ohiosierra - you're welcome - it should get you started on the basic timer operation. Good luck!
Anna
@AnnaRedPanda
Jun 28 2016 11:46
How can I use OpenWeatherMap API in CodePen when this API is http while codepen creates https site
kirbyedy
@kirbyedy
Jun 28 2016 11:49
@AnnaRedPanda openweather api should work, the problem is location of the user
if you use geolocation it wont work
try to use ip location and it should be ok
not accurate as much as geolocation, but at least it will work
Anna
@AnnaRedPanda
Jun 28 2016 11:53
@kirbyedy but browser returns Mixed content error bacause of use http content (openweather) in https site, I thought it's not geolocation problem
kirbyedy
@kirbyedy
Jun 28 2016 11:55
@AnnaRedPanda try to cheat then... use https://crossorigin.me
put that before the openweather api link
Joey
@jwlakd
Jun 28 2016 11:58
I am on the Personal Portfolio Webpage, how can I upload images or do I need to link to the images somewhere else?
Anna
@AnnaRedPanda
Jun 28 2016 11:59
@kirbyedy it looks like it works, thanks!)
CamperBot
@camperbot
Jun 28 2016 11:59
annaredpanda sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1167 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Dylan
@dhcodes
Jun 28 2016 12:01
@jwlakd if you're using codepen, your images need to be hosted elsewhere unless you have a pro account
Joey
@jwlakd
Jun 28 2016 12:02
thanks @dhcodes
CamperBot
@camperbot
Jun 28 2016 12:02
jwlakd sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1130 | @dhcodes |http://www.freecodecamp.com/dhcodes
Andra Zaharia
@zachbpd
Jun 28 2016 12:11
hello! any idea why scroll spy stopped working here: https://codepen.io/zachbpd/pen/mEOJrE?editors=1100
kirbyedy
@kirbyedy
Jun 28 2016 12:23
@zachbpd missing jquery and bootstrap in the settings ?
UDAY PRAPHULLA MALANGAVE
@malangaveuday
Jun 28 2016 12:24
hi guys
```js
Andra Zaharia
@zachbpd
Jun 28 2016 12:24
@kirbyedy didn’t use any jquery, bootstrap is added
kirbyedy
@kirbyedy
Jun 28 2016 12:25
jquery is needed in order for bootstrap to work
Andra Zaharia
@zachbpd
Jun 28 2016 12:26
@kirbyedy added it but it’s still not working :(
kirbyedy
@kirbyedy
Jun 28 2016 12:26
and it should be loaded in that order... first jquery then bootstrap
it does work, I just tried it
Andra Zaharia
@zachbpd
Jun 28 2016 12:26
oh ok, i’ll delete them both and readd
UDAY PRAPHULLA MALANGAVE
@malangaveuday
Jun 28 2016 12:27
var businessData = [{
    "bu_id": 2,
    "tenant_id": 1,
    "company_id": 1,
    "bu_name": "qhhjqqw",
    "created_date": "2016-05-31 10:58:06",
    "updated_date": "2016-05-31 10:58:06",
    "parent_id": null
}, {
    "bu_id": 3,
    "tenant_id": 1,
    "company_id": 1,
    "bu_name": "kqjjk",
    "created_date": "2016-05-31 10:58:12",
    "updated_date": "2016-05-31 10:58:12",
    "parent_id": 2
}, {
    "bu_id": 5,
    "tenant_id": 1,
    "company_id": 1,
    "bu_name": "parent",
    "created_date": "2016-06-28 08:32:34",
    "updated_date": "2016-06-28 08:32:34",
    "parent_id": null
}, {
    "bu_id": 6,
    "tenant_id": 1,
    "company_id": 1,
    "bu_name": "child",
    "created_date": "2016-06-28 08:32:48",
    "updated_date": "2016-06-28 08:32:48",
    "parent_id": 5
}, {
    "bu_id": 7,
    "tenant_id": 1,
    "company_id": 1,
    "bu_name": "child_s child",
    "created_date": "2016-06-28 08:33:16",
    "updated_date": "2016-06-28 08:33:16",
    "parent_id": 6
}];

i want to show this data in parents child relationship
bu_name like:
paren

child
child_s child

i tried using angular ng-repeat but not getting appropriate result

please help me
Andra Zaharia
@zachbpd
Jun 28 2016 12:27
@kirbyedy did you quickadd them? or typed them in?
Lea
@leactz
Jun 28 2016 12:27
@kirbyedy thank you thank you thank you so much!!! i just came here to see why my hamburger toggle button is not toggling and it seems that I came at JUST the right moment... your answer about the order or loading jQuery and Bootstrap correctly just solved that for me
CamperBot
@camperbot
Jun 28 2016 12:27
leactz sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1168 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
kirbyedy
@kirbyedy
Jun 28 2016 12:28
@zachbpd quickadd
@leactz :thumbsup:
Andra Zaharia
@zachbpd
Jun 28 2016 12:30
@kirbyedy still not working.. shoud I add any preprocessors or sth like that?
kirbyedy
@kirbyedy
Jun 28 2016 12:31
no, just with quick add in the codepen setting javascript section first jquery then bootstrap
Nathaniel Nasarow
@Torgian
Jun 28 2016 12:32
hey guys
Andra Zaharia
@zachbpd
Jun 28 2016 12:32
@kirbyedy this is odd..
Nathaniel Nasarow
@Torgian
Jun 28 2016 12:32
can I get a bit of help with this API I'm trying to work with?
kirbyedy
@kirbyedy
Jun 28 2016 12:32
see the image @zachbpd
Screen Shot 2016-06-28 at 15.32.16.png
Nathaniel Nasarow
@Torgian
Jun 28 2016 12:33
mostly just trying to iterate through the JSON array that returns using the forEach jQuery function, but it turned up undefined for some reason
Andra Zaharia
@zachbpd
Jun 28 2016 12:34
@kirbyedy got it, thanks so much!!!!!
CamperBot
@camperbot
Jun 28 2016 12:34
zachbpd sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1170 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
kirbyedy
@kirbyedy
Jun 28 2016 12:34
@Torgian missing: http:// in api call
@Torgian also I am not sure if your getjson line is correct
where did you get it from ?
Nathaniel Nasarow
@Torgian
Jun 28 2016 12:35
Naw, don't need http for this api apparantly
kirbyedy
@kirbyedy
Jun 28 2016 12:35
@Torgian btw using geolocation in chrome wont work
Nathaniel Nasarow
@Torgian
Jun 28 2016 12:35
how come?
oh wait i know why
this is why
Andra Zaharia
@zachbpd
Jun 28 2016 12:36
@Torgian you can use the "http://ip-api.com/json” api to get the latitude and longitude
Nathaniel Nasarow
@Torgian
Jun 28 2016 12:37
ehhh, don't really want to use that.
either way, I'll figure that out later. Right now what I need is a way to figure out why my json.forEach() is coming up undefined
UDAY PRAPHULLA MALANGAVE
@malangaveuday
Jun 28 2016 12:49
I need help in angularjs any one is here?
Max Ho
@maxnathaniel
Jun 28 2016 12:53
@malangaveuday create a plunker, so that it's easier for pple to help
kirbyedy
@kirbyedy
Jun 28 2016 12:53
@Torgian you either dont read or dont understand... the reason why is undefined is because it cant read the location (geolocation does not work) hence the undefined
Nathaniel Nasarow
@Torgian
Jun 28 2016 12:54
No that's not the problem. It has nothing to do with the geolocation (I know about the google Chrome thing and am working on fixing that now)
UDAY PRAPHULLA MALANGAVE
@malangaveuday
Jun 28 2016 12:54
@maxnathaniel yes
Nathaniel Nasarow
@Torgian
Jun 28 2016 12:54
It has to do with the fact that the response is actually not an array, so forEach is invalid
instead, it should work if I use json.weather.forEach, but haven't tested it yet
gonna figure out how to get geolocation data first for google chrome.
kirbyedy
@kirbyedy
Jun 28 2016 13:00
ok ;)
Screen Shot 2016-06-28 at 15.58.51.png
Martialis39
@Martialis39
Jun 28 2016 13:06
hello friends
im trying to draw a cell using canvas and objects and its not working
can anyone take a quick look?
Mert Barış
@mertbaris
Jun 28 2016 13:08
hey pals! I need a help with my jQuery code. I have <input type="text" id="max-value" /> . I will be writing a value inside this <input> and clicking the button afterwards and the written value will be changing the value of my variable called "current". What event should I use on jQuery to make this happen?
Martialis39
@Martialis39
Jun 28 2016 13:08
OK NVM i think I got it >D
greg
@wearenotgroot
Jun 28 2016 13:09

@Torgian the json.weather is an array with objects as items

json.weather.forEach(function(val) {
      var properties  = Object.keys(val);
        console.log(properties);
      });

you get weather as an array due to some location/places have multiply weather conditions(fog, mist etc ...). but the main weather condition is at (weather[0]) item in 0th index

hosoladden
@hosoladden
Jun 28 2016 13:12
Hi, i need help getting my hamburger menu to drop down when pressing it:
greg
@wearenotgroot
Jun 28 2016 13:18
@hosoladden did you add jquery? and bootstrap min js?
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
hosoladden
@hosoladden
Jun 28 2016 13:19
@wearenotgroot Yes i did
@wearenotgroot wait, i did not add bootstrap with the min.js part. Ill try that
@wearenotgroot Adding bootstrap with min.js didn't do anything :/
greg
@wearenotgroot
Jun 28 2016 13:23
@hosoladden it's working here
@hosoladden try and remove everything on the js settings
@hosoladden and re-add jquery first then the bootstrap min js
hosoladden
@hosoladden
Jun 28 2016 13:24
@wearenotgroot ok, ill try! thanks for the help!
CamperBot
@camperbot
Jun 28 2016 13:24
hosoladden sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1182 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
Martialis39
@Martialis39
Jun 28 2016 13:27
OK i could use some help again
I have an array of objects
id like to draw them to the canvas
they are all either not being drawn or being drawn to the same place
Sophia Brandt
@sophiabrandt
Jun 28 2016 13:30
@jwlakd with CodePen you need to upload somewhere else and link to it in your html file.
hosoladden
@hosoladden
Jun 28 2016 13:36
@wearenotgroot I can't seem to get it right. Ive tried to re-add both the jquery and the bootstrap min js several times, but it still won't work for me
greg
@wearenotgroot
Jun 28 2016 13:38
@hosoladden open the dev console and see if there is any error?
hosoladden
@hosoladden
Jun 28 2016 13:49
@wearenotgroot It didn't show any errors? Maybe I'm just tired and need to close it for a while and get back to it in the morning. Thanks anyway for your time!
CamperBot
@camperbot
Jun 28 2016 13:49
hosoladden sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:warning: hosoladden already gave wearenotgroot points
Gabe Pressman
@gpressman
Jun 28 2016 14:09
can anyone explain why these text aligns aren't working?
Gabe Pressman
@gpressman
Jun 28 2016 14:19
Nvm, I got it.
Daniel Bleyer
@danielbleyer
Jun 28 2016 14:20
This message was deleted
Daniel Bleyer
@danielbleyer
Jun 28 2016 14:29
Hi, i’m stuck with the dropdown menu in my navbar. when the screen gets smaller the navbar links collapse into a navbar button. the problem is the button doesn’t work (e.g. no dropdown menu). Any ideas what i’m doing wrong? http://codepen.io/danielbleyer/pen/KMWqeb Thanks in advance for any help :smile:
Wintermutate
@Wintermutate
Jun 28 2016 14:29
hello
@Wintermutate
I am trying to create a button on a website that will take a pdf hosted on the website and generate a email with the pdf as an attachment
is that something thats possible?
Biazus
@Biazus
Jun 28 2016 14:33
good morning guys
Matthew Boland
@mattboland
Jun 28 2016 14:51
@Biazus good work. looks nice and functions well
Gabe Pressman
@gpressman
Jun 28 2016 15:10
does anyone know how to make rems work?
Sujit Karki
@Swoozeki
Jun 28 2016 15:32
@Biazus Looks very nice, and words perfectly. Great job!
*works
@gpressman rem is relative em. It's relative to the html element's font-size, which I think depends on different browsers
so 1rem is base html font-size
Gabe Pressman
@gpressman
Jun 28 2016 15:34
@Swoozeki I read an article and I think em makes more sense, but I'm having trouble getting it to be responsive like I want.
Sujit Karki
@Swoozeki
Jun 28 2016 15:35
for responsive, I usually go for vmin and vmax, but I think thats still new
Suzanne Atkinson
@AdventureBear
Jun 28 2016 15:36
Hey everyone good morning (est)
Sujit Karki
@Swoozeki
Jun 28 2016 15:38
@gpressman what do you mean by responsive text anyway? One that scales in size, or wraps around other elements?
Gabe Pressman
@gpressman
Jun 28 2016 15:39
scales in size
Suzanne Atkinson
@AdventureBear
Jun 28 2016 15:39
I would like some opinions...I'm thinking f about making a learning / quiz tool with scenarios for emts/medics. I have scenarios that require action and decision making, but I would like to make it game like. For example dragging a syringe to a patient figure or clicking a syringe to indicate giving an injection. I'd like ideas for other fun interaction that's not text only. Please pm me if you'd like to discuss a model for this!
Gabe Pressman
@gpressman
Jun 28 2016 15:39
I had a container, and when I shrink to mobile size the container shrinks, but the text remains the same filling up too much space inside it
Sujit Karki
@Swoozeki
Jun 28 2016 15:39
well, em and rem are just like px. They're just relative to something else, while px is absolute, right. @gpressman So, they aren't really the way to go for responsive
go for %
you can use % instead of px, em ,rem , or vmax vmin
or or, use @media query
Gabe Pressman
@gpressman
Jun 28 2016 15:43
% of what?
Dan
@dcgoings
Jun 28 2016 15:59
is there a way within html/css that takes a link and turns it into a thumbnail, showing the page itself in the thumb?
Tyler Moeller
@TylerMoeller
Jun 28 2016 15:59
If that's not what you're looking for, maybe post your code to take a closer look
Dan
@dcgoings
Jun 28 2016 15:59
or is that people just screenshotting and making their own thumbs, usually?
Tyler Moeller
@TylerMoeller
Jun 28 2016 16:00
@dcgoings Yeah, most people just making their own screenshots.
Taylor Morgan
@tmdesigned
Jun 28 2016 16:26
@dcgoings there are ways to do it but not with pure html css. most likely whatever you are looking at is people making thumbnails
DarioRebirth
@DarioRebirth
Jun 28 2016 16:26
hi
Taylor Morgan
@tmdesigned
Jun 28 2016 16:28
anyone know a good resource / link / keyword to search for the animation type used in the pomodoro clock (the slowly filling circle)?
Dan
@dcgoings
Jun 28 2016 16:30
@ohiosierra @TylerMoeller so this is REALLY ambitious, but im trying to get a preview similar to what codepen has. im looking through their source and it looks like it might have to do with iframes, but that's venturing into unknown territory for me.
ehekatlOf
@ehekatlOf
Jun 28 2016 16:39
Hey guys, anyone with experience using IDEs locally instead of codepen?
I tried to link the cdn for jquery locally in visual studio code, but for some reason it's not working properly from my script.js file
I checked with vanilla js and the dependencies are working fine
Biazus
@Biazus
Jun 28 2016 16:41
how can I get the image logos from the offline channels at twitch.tv?
I used "data.stream.channel.logo", but if the channel is offline, it has no stream object
@ehekatlOf can you show your code somehow?
ehekatlOf
@ehekatlOf
Jun 28 2016 16:47
Hm, I'm away from home right now
Just thought I'd ask
But it's the generic thing where you link an src to the jquery cdn with the script tag in your DOM
For whatever reason it works fine on codepen and jsfiddle
But it doesn't want to work in my local IDE
Also @Biazus, look into the error option on your ajax method
Sorin Ruse
@sorinr
Jun 28 2016 16:50
@ehekatlOf do you have some kind of a web server running locally?
ehekatlOf
@ehekatlOf
Jun 28 2016 16:50
Just rememer to set cross browser to true
Oh is that needed? This is my first time trying to work from a local IDE instead of codepen or jsfiddle
Taylor Morgan
@tmdesigned
Jun 28 2016 16:50
@biazus I just used a ? placeholder, which I thought was what the example did
ehekatlOf
@ehekatlOf
Jun 28 2016 16:51
So I can't just link to the cdn directly from a local IDE?
Sorin Ruse
@sorinr
Jun 28 2016 16:55
@ehekatlOf yes you can but if you open your file directly (not using a local server) you may encounter cors problems when calling external resources
ehekatlOf
@ehekatlOf
Jun 28 2016 16:56
I'm actually pretty new to the concept
So at the risk of sounding like a total scrub
What's the easiest way to use jquery in a local IDE?
Sorin Ruse
@sorinr
Jun 28 2016 16:59
@ehekatlOf the local ide is just for developing your page. in order to see it as on a web server its better to have installed a local server of your own to test its functionality. take a look here: https://www.apachefriends.org/ro/index.html but it can be wampp, lampp, ecc
@ehekatlOf i am only coding and testing locally on my machine and only i'm finished i just copy paste the code into codepen
Gabe Pressman
@gpressman
Jun 28 2016 17:04
@TylerMoeller just got back from lunch, thanks
CamperBot
@camperbot
Jun 28 2016 17:04
gpressman sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 625 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Gabe Pressman
@gpressman
Jun 28 2016 17:08
@TylerMoeller I guess the problem now is, what appears huge on my full screen looks tiny on phone size
Tyler Moeller
@TylerMoeller
Jun 28 2016 17:10
@gpressman Is it possible for you to share the code? There may be better options depending on what you're trying to achieve.
@ehekatlOf I can't help with VS Code, but with the Atom Text Editor, you can install a HTML Previewer module that lets you work on your code as if it were all in codepen. jQuery works great. https://atom.io/packages/atom-html-preview
Dan
@dcgoings
Jun 28 2016 17:17
holy shit creating thumbnails at a specific height and width that still look good is hard. jesus.
oliver
@colonelsheep
Jun 28 2016 17:20
dude . what even is. a json
like im doing json exercises right now and idk what json is
Krishna Sai Gullapalli
@Krish2704
Jun 28 2016 17:20
JSON is nothing but a javascript object
Javascript object notation
Dan
@dcgoings
Jun 28 2016 17:21
^^^
Heather Kusmierz
@HKuz
Jun 28 2016 17:21
@ehekatlOf if you aren't familiar with servers, there are two ways you can get jQuery:
1) if you have internet connection, include a script tag in your HTML <head>tag that links to the CDN: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
2) if you want to work offline, go to the jQuery site, download the version you want to use, save the file into the same folder as the other docs for your project, and link the the script that way (something like this, if you had a sub-folder for JS code): <script src="/JS/jquery-2.2.0.min.js"></script>
Dan
@dcgoings
Jun 28 2016 17:22

to expand, this is a JSON:

{"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}

that defines an employees object with an array of three employee records.

oliver
@colonelsheep
Jun 28 2016 17:24
ok, i think i get it. it isnt something you have to import, just something you can do in JS that has a name?
Heather Kusmierz
@HKuz
Jun 28 2016 17:27
@colonelsheep Yes, it's a data structure in javascript that allows you to store items in key/value pairs. It can get more complicated as you nest other data structures (like arrays) as the values, which can lead to some confusion.
Gabe Pressman
@gpressman
Jun 28 2016 17:28
@TylerMoeller to be honest I think I'm going in another direction from how it is now, but I just want to be able to appropriately make things responsive
oliver
@colonelsheep
Jun 28 2016 17:28
neat! yeah it turns out ive used and understood what JSON does all along lol, just didnt recognize it as JSON :sweat_smile:
pad3pad31995
@pad3pad31995
Jun 28 2016 17:28
hi, I am trying to create my first project in codePen and wnat use personal image for my project. Where do I keep an image to access from codePen?
Gabe Pressman
@gpressman
Jun 28 2016 17:29
@TylerMoeller also at work we're using foundation which I'm not familiar with so I'm trying it out on this zipline
flindip
@flindip
Jun 28 2016 17:34
In a very simple sense the difference between JSON and JSONP is the type of data that is being returned? JSON calls will return an object and JSONP will return data? Is that correct?
Tyler Moeller
@TylerMoeller
Jun 28 2016 17:35
@gpressman If you want the text to be different sizes on different-sized devices, you can use media queries to specify exact font sizes for different resolutions. The media queries recommended for foundation are at: http://foundation.zurb.com/sites/docs/v/5.5.3/media-queries.html
The vw trick for responsive text is useful as well, and can be included in those media queries
Biazus
@Biazus
Jun 28 2016 17:37
@flindip pretty much.
JSONP is a way to overcome browser restrictions
JSONP is essentially JSON with some extra code
oliver
@colonelsheep
Jun 28 2016 17:38
@pad3pad31995 just host it on an image hosting site for now.. i like imgur
flindip
@flindip
Jun 28 2016 17:38
@Biazus Also to do JSONP request I can't use the getJSON()call I have to do an AJAX request which is different format?
@Biazus thanks
CamperBot
@camperbot
Jun 28 2016 17:40
flindip sends brownie points to @biazus :sparkles: :thumbsup: :sparkles:
:cookie: 280 | @biazus |http://www.freecodecamp.com/biazus
Tyler Moeller
@TylerMoeller
Jun 28 2016 17:41
@flindip JSONP wraps the JSON response as a function and then embeds it as a script in your page to run from your client. This is one way to work around cross-domain issues. You do JSONP requests with $.getJSON() by adding a callback to the url.
flindip
@flindip
Jun 28 2016 17:42
@TylerMoeller oh, so just add the "callback?" to the end of the url? Otherwise its exactly the same?
@TylerMoeller thanks
CamperBot
@camperbot
Jun 28 2016 17:42
:cookie: 626 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
flindip sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Tyler Moeller
@TylerMoeller
Jun 28 2016 17:43
@flindip Yes, just add a callback - the format depends on the API you are calling. Some more details in the 'jsonp' section on this page: http://api.jquery.com/jquery.getjson/
No callback = json, adding a callback = jsonp if that makes sense :)
flindip
@flindip
Jun 28 2016 17:45
@TylerMoeller kinda, I'll get the url finished and just post it to make sure I have the right idea
ren-lowex
@ren-lowex
Jun 28 2016 17:45
Hey all I have a picture of grace hopper and I need to know how do I add the picture to codepen for project 1
Tyler Moeller
@TylerMoeller
Jun 28 2016 17:45
@ren-lowex Lots of people use https://postimage.org/
ren-lowex
@ren-lowex
Jun 28 2016 17:46
If I put my igage ther how do I call into my pen?
thanks
@TylerMoeller @ren-lowex
If I put my image there how do I call into my pen?
thanks
CamperBot
@camperbot
Jun 28 2016 17:47
ren-lowex sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 627 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jun 28 2016 17:47
@ren-lowex This challenge may be helpful: https://www.freecodecamp.com/challenges/add-images-to-your-website
ren-lowex
@ren-lowex
Jun 28 2016 17:49
I know how to add the image in the html code I just need to know how I add images to codepen. do I have do something special other than give the source url for the image?
Tyler Moeller
@TylerMoeller
Jun 28 2016 17:55
@ren-lowex No, that's it. Just add your img tag to the html with the correct URL for the src and you'll see your image.
kushalm9203
@kushalm9203
Jun 28 2016 18:05
Is "font-weight: bold" the right way to make an element bold in CSS?
It is just not working

whole {

font-weight: bold;
}
Bibek Ghimire
@bibekg
Jun 28 2016 18:10
@kushalm9203 You can wrap the text in <strong></strong>
kushalm9203
@kushalm9203
Jun 28 2016 18:12
@bibekg I want to make the whole thing bold bold
All the paragraphs
lubbersj1
@lubbersj1
Jun 28 2016 18:17
Hey guys, I am on the project that you create your portfolio. I want to do as much I can on my own, but it seems like the example uses a lot of bootstrapping that has not been taught yet. I want to go at to learn the most out of it and understand it the best. How should I go forward?
Sophia Brandt
@sophiabrandt
Jun 28 2016 18:21
@lubbersj1 if you want to use bootstrap, read the documentation and google the rest. Or you could use plain CSS or another framework. It's really up to you.
lubbersj1
@lubbersj1
Jun 28 2016 18:26
@sophiabrandt it just seemed like the example for the project was more advanced than the lessons. I didn't want to fall behind and thought maybe that I missed something from the lessons, but I did not want to use too much framework where it was too much use of work from someone else. I just want to understand what I am doing.
MikeBeers
@MikeBeers
Jun 28 2016 18:50
Can I get some looks at my Simon game. Let me know what issues you see
Sorin Ruse
@sorinr
Jun 28 2016 18:54
@lubbersj1 yes you are right. try learn plain css first then you will understand every css framework afterwards and you will be able to use them to speed your design
Tessa Bradford
@trose1189
Jun 28 2016 18:56
Does anyone know a way to keep a btn-group from wrapping? I'd like it to have responsive sizing instead of breaking to the next line.
Sorin Ruse
@sorinr
Jun 28 2016 18:57
@trose1189 if you pass from desktop view to mobile view, how do u expect your buttons to show up?
Tessa Bradford
@trose1189
Jun 28 2016 18:59
@sorinr Here's what I'm working on. I guess I don't understand your question. I just want the Work Time and Break Time buttons to stay together on smaller screen sizes.
http://codepen.io/trose1189/full/WxxqBr/
Damian Collier
@damianpcollier
Jun 28 2016 19:02
Hi. How do you add images in codepen?
Sorin Ruse
@sorinr
Jun 28 2016 19:03
@trose1189 remove the padding-right: 15px; when on xs-6 using @media query
AnshulDawar
@anshuldawar
Jun 28 2016 19:04
@damianpcollier use assets
Tessa Bradford
@trose1189
Jun 28 2016 19:04
@sorinr Ok, is that on the btn's themselves, or on the whole btn-group?
DroDroGadget
@DroDroGadget
Jun 28 2016 19:05
This message was deleted
anybody know how to get a link to a Codepen project?
@damianpcollier <a><img src="http://ImageHere.jpg"></a>
Damian Collier
@damianpcollier
Jun 28 2016 19:07
where does it store the image though @anshuldawar
Krishna Sai Gullapalli
@Krish2704
Jun 28 2016 19:07
just save your pen and click on the link on the address bar. That's yoour pen link
Damian Collier
@damianpcollier
Jun 28 2016 19:08
If I'm doing one of the freecodecamp projects, where would i put the image?
Sorin Ruse
@sorinr
Jun 28 2016 19:09
@trose1189 its on when your col-xs-6 triggers. u can override it with @media (max-width:768px) {padding-right:0px !important;}
Liberty Montano
@LibertysYarn
Jun 28 2016 19:09
@damianpcollier you could use a flickr or maybe a google drive folder and then link to the image there.
DroDroGadget
@DroDroGadget
Jun 28 2016 19:10
@Krish2704 if the link is opened by someone who has a codepen account will they have access to editor view?
Krishna Sai Gullapalli
@Krish2704
Jun 28 2016 19:10
yup
@trose1189 your portfolio looks awesome
Damian Collier
@damianpcollier
Jun 28 2016 19:10
Thanks @DroDroGadget and @LibertysYarn
CamperBot
@camperbot
Jun 28 2016 19:10
damianpcollier sends brownie points to @drodrogadget and @libertysyarn :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @drodrogadget |http://www.freecodecamp.com/drodrogadget
:cookie: 300 | @libertysyarn |http://www.freecodecamp.com/libertysyarn
DroDroGadget
@DroDroGadget
Jun 28 2016 19:10
is there a way to link if you do not want someone to have access to editor view? @kushalm9203
Sorin Ruse
@sorinr
Jun 28 2016 19:11
@trose1189 you can play with 768px as u wish
Tessa Bradford
@trose1189
Jun 28 2016 19:12
Ok, thanks @sorinr. :)
And thank you @Krish2704
CamperBot
@camperbot
Jun 28 2016 19:12
trose1189 sends brownie points to @sorinr and @krish2704 :sparkles: :thumbsup: :sparkles:
:cookie: 389 | @sorinr |http://www.freecodecamp.com/sorinr
:cookie: 523 | @krish2704 |http://www.freecodecamp.com/krish2704
Sorin Ruse
@sorinr
Jun 28 2016 19:15
@trose1189 welcome
Matthew Walters
@MatW2073
Jun 28 2016 19:16
could someone help me with creating a bootstrap row, I am not sure how to add a div element below the h3 element.
Sorin Ruse
@sorinr
Jun 28 2016 19:18
@MatW2073 <h3>some text</h3><div class="row">some other text</div>
Matthew Walters
@MatW2073
Jun 28 2016 19:19
@sorinr ok thanks
CamperBot
@camperbot
Jun 28 2016 19:19
matw2073 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 390 | @sorinr |http://www.freecodecamp.com/sorinr
Zyberg
@Zyberg
Jun 28 2016 19:26
I have been browsing in CodePen and noticed that some people write html in a weird way, how is it called and where can I learn to use it?
(An example of it would be: https://codepen.io/Scott-Hutcheson/pen/WxpOpz)
Souljerr
@Souljerr
Jun 28 2016 19:27
Hey guys, hows it going?
I was wondering if anyone could help me with a quick question
@Zyberg It's called HAML, although if you click on the bottom right that says view compiled code; you will see that it is written in HTML
Sorin Ruse
@sorinr
Jun 28 2016 19:30
@Zyberg in this pen it is used haml. there are others using jade. if you are not familiar just stick with plain html for the moment
Souljerr
@Souljerr
Jun 28 2016 19:30
@Zyberg I'm kind of interested in learning it now too though lol. It looks sleek
Zyberg
@Zyberg
Jun 28 2016 19:31
@sorinr thank you! Going to look into that some time soon as it looks very interesting to play with ;)
CamperBot
@camperbot
Jun 28 2016 19:31
zyberg sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 392 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jun 28 2016 19:33
@Souljerr you also deserve some brownies. thank you
CamperBot
@camperbot
Jun 28 2016 19:33
sorinr sends brownie points to @souljerr :sparkles: :thumbsup: :sparkles:
:cookie: 5 | @souljerr |http://www.freecodecamp.com/souljerr
Souljerr
@Souljerr
Jun 28 2016 19:34
@sorinr oh, thank you! haha. I appreciate it man, I'll send some your way too! lol
CamperBot
@camperbot
Jun 28 2016 19:34
souljerr sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 393 | @sorinr |http://www.freecodecamp.com/sorinr
Matthew Walters
@MatW2073
Jun 28 2016 19:38

I'm getting errors with the rows in bootstrap and not sure what to do:

Create a div element below the h3 tag, with a class of row.

here is my code:

<div class="container-fluid">
<div class="row">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row "></div>
</div>
</div>

I get an error
Add a div element below your h3 element

Damian Collier
@damianpcollier
Jun 28 2016 19:39
I cannot get my link to images working. How does the portfolio project want this done?
@LibertysYarn I've uploaded an image to google drive. Then copied the link. It just comes up blank. Any ideas. Thanks
CamperBot
@camperbot
Jun 28 2016 19:41
damianpcollier sends brownie points to @libertysyarn :sparkles: :thumbsup: :sparkles:
:warning: damianpcollier already gave libertysyarn points
David Uhlmann
@DavidUhlmann
Jun 28 2016 19:43
Good evening everybody I am trying to finish my tribute page for a while now. Since a couple of days I try to solve a problem with heavy googeling and Youtube but somehow I do not get this right, might somebody here help? It might be trivial but I am runnig against a wall with my damn head
Tyler Moeller
@TylerMoeller
Jun 28 2016 19:43
@damianpcollier Try https://postimage.org instead. Google Drive will not allow you to host images for web pages after August. https://support.google.com/drive/answer/2881970?hl=en
If postimage isn't working either, send us a link to your codepen so we can take a closer look
@DavidUhlmann Send us a link to your pen with a description of the help you need
David Uhlmann
@DavidUhlmann
Jun 28 2016 19:48
@TylerMoeller Here is a link (https://codepen.io/BayerischerSchweizer/pen/vKxdqO) to my pen (sorry for the bad format - I pasted it from Notepad++) Basically my problem is when I execute the page in codepen of in a browser I do not get it right that the whole page appears on the screen, no matter what the screen resulution might be. There is no scroll button and stuff like that.
Matthew Walters
@MatW2073
Jun 28 2016 19:49
This message was deleted
I'm getting errors with the rows in bootstrap and not sure what to do:
Tyler Moeller
@TylerMoeller
Jun 28 2016 19:54
@DavidUhlmann Your div.MainContainer css is causing lots of problems. Delete all of that and start over with one CSS property at a time.
Mainly, it's these ones that are making your page not appear as you want:
div.MainContainer {
    transform: translateX(-50%) translateY(-50%);
    left: 50%;
    top: 50%;
}
thenote
@thenote
Jun 28 2016 19:55

i created tribute page on the saint Swami Vivekananda.

here is the pen link: http://codepen.io/thenote/full/beqLLw/

Damian Collier
@damianpcollier
Jun 28 2016 19:56
postimage does the trick @TylerMoeller thanks
CamperBot
@camperbot
Jun 28 2016 19:56
damianpcollier sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 629 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
David Uhlmann
@DavidUhlmann
Jun 28 2016 19:57
@TylerMoeller So should I delete the whole div.MainContainer CSS?
Tyler Moeller
@TylerMoeller
Jun 28 2016 19:58
@DavidUhlmann Yes. I recommend starting over with styling that section. Only add CSS properties one at a time to get the desired look.
David Uhlmann
@DavidUhlmann
Jun 28 2016 19:59
@TylerMoeller Ok I deleted the whole thing. My idea was to center it in the middle of the page.
Tyler Moeller
@TylerMoeller
Jun 28 2016 20:02
@DavidUhlmann I think this might be what you're trying to do:
.MainContainer {
  background-color: green;
  padding: 2%;
  margin: auto;
  width: 90%;
}
Many people just use bootstrap and the jumbotron class: http://getbootstrap.com/components/#jumbotron
You'll usually get warnings when using padding+width - best to put margins on your text, but that CSS above gives an idea
UtkarshShukla7
@UtkarshShukla7
Jun 28 2016 20:04
@thenote nice page. If any suggestion, you can pull your quote at the center after 750px width.
Sophia Brandt
@sophiabrandt
Jun 28 2016 20:05
@lubbersj1 the lessons in FCC mostly cover the bare basics. It's good if you dive deeper. Just think about what you are interested in. It is better to understand how CSS works than to understand how Bootstrap works. If you know CSS, it's easy to pickup Bootstrap.
There are no further Bootstrap lessons after the portfolio project. So you don't miss out on anything. If you want to do your portfolio in Bootstrap, feel free to do so. If you don't feel fit enough to do Bootstrap, I fear that you need to learn from other resources.
If you like videos:
youtube series: https://www.youtube.com/user/DevTipsForDesigners/search?query=bootstrap
free udemy course on Bootstrap 4: https://www.udemy.com/bootstrap-4/
And there is always the option to pick another framework. For example, I coded my own landing page (it's not really a portfolio site) in SASS with bourbon.io, neats etc.
David Uhlmann
@DavidUhlmann
Jun 28 2016 20:05
@TylerMoeller Ahh thanks very much. I see. The above mentioned pen also used bootstrap and this jumbotron stuff. I did not get a warning because I already used an Editor. I will stay with codepen for now. Thanks very much for your help sir
CamperBot
@camperbot
Jun 28 2016 20:05
daviduhlmann sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 630 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
David Uhlmann
@DavidUhlmann
Jun 28 2016 20:06
This message was deleted
@TylerMoeller thanks
CamperBot
@camperbot
Jun 28 2016 20:06
daviduhlmann sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: daviduhlmann already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Jun 28 2016 20:15
@DavidUhlmann To see the warnings, click the gear icon next to CSS in your codepen and then click the "Analyze CSS" button in the bottom, left-hand corner.
Ahmad Ali
@microcyberz
Jun 28 2016 20:16
In random quote machine project, I am trying to call quotes from http://quotes.stormconsultancy.co.uk/api but my code is not working, can anyone help me? here is my code $(document).ready(function() { $("#btn-id").on("click", function(){ $.getJSON("GET http://quotes.stormconsultancy.co.uk/quotes.json", function(json) { $(".quote").html(JSON.stringify(json)); }); }); });
David Uhlmann
@DavidUhlmann
Jun 28 2016 20:17
@TylerMoeller Wow great it tells me mistakes I made, what a great tool. Thank you so much for your help. Really appreate that!! Greetings from Switzerland to the US
CamperBot
@camperbot
Jun 28 2016 20:17
daviduhlmann sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: daviduhlmann already gave tylermoeller points
Ethan Rose
@ethanrose
Jun 28 2016 20:21
did I code this properly?
$(".search-button").click(function(){
var searchVar = document.getElementById('search-bar');
and there's more
but that part (ignoring the closing brackets)
is that the correct way to get text from an input?
Tyler Moeller
@TylerMoeller
Jun 28 2016 20:23
@aidansven You'll need to use .value: http://www.w3schools.com/jsref/prop_text_value.asp
Ethan Rose
@ethanrose
Jun 28 2016 20:26
@TylerMoeller thank you so much.. that was my problem :)
CamperBot
@camperbot
Jun 28 2016 20:26
aidansven sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 632 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Biazus
@Biazus
Jun 28 2016 21:00
wow roman numeral converter is laborious
flindip
@flindip
Jun 28 2016 21:01
I'm working on the "Wikipedia Viewer." Trying to test for the data to display in the HTML. But it isn't working. Am I making the right JSONP call?
http://codepen.io/flindip/pen/WxpNqP?editors=0010
mcorby17
@mcorby17
Jun 28 2016 21:03
@flindip I'm looking through it rn... first thing I notice is you need to close your div tags in the html I think... not sure if it really affects it but it makes me OCD haha
@flindip second, you don't have $(document).ready in your javascript
i'm kinda confused as to why the first function has a parenthese before it
flindip
@flindip
Jun 28 2016 21:07
@mcorby17 its another format. You don't need $document.ready
Ahmad Ali
@microcyberz
Jun 28 2016 21:08
http://codepen.io/microcyberz/pen/xOqYVj My random quote machine is unable to get data from server with API, any help?
mcorby17
@mcorby17
Jun 28 2016 21:08
@flindip Oh is it not jQuery?
flindip
@flindip
Jun 28 2016 21:09
@mcorby17 yeah but its a different prompt. Its using a overlapping function. Codepen already will recognize it
tylerprosper
@removed~tylerprosper
Jun 28 2016 21:11
Hi guys. I was hoping somebody could help me position my .avatar div element in my codepen: https://codepen.io/tylerprosper/pen/yJVRXj
mcorby17
@mcorby17
Jun 28 2016 21:11
@flindip Oh ok. Anyways yeah there's a different API call that works better i'll check mine
it's something other than query
tylerprosper
@removed~tylerprosper
Jun 28 2016 21:12
the avatar (circular image) moves independently of the column it's positioned inside of when the browser width is changed
mcorby17
@mcorby17
Jun 28 2016 21:12
@flindip try action=opensearch in the api call
Ethan Rose
@ethanrose
Jun 28 2016 21:14
how can I make it so that when I press "enter" a button will be pressed?
I'm trying to fix my search box, I have a search button right next to the text input box, but when I press enter after typing the text, nothing happens
ehekatlOf
@ehekatlOf
Jun 28 2016 21:15
man I still can't get jquery to work right in my IDE
flindip
@flindip
Jun 28 2016 21:15
@mcorby17 yeah, I don't think that is problem. I may have to do something in AJAX format. But, its not the url per se. I plugged it in and nothing. Thanks anyways
CamperBot
@camperbot
Jun 28 2016 21:15
flindip sends brownie points to @mcorby17 :sparkles: :thumbsup: :sparkles:
:cookie: 280 | @mcorby17 |http://www.freecodecamp.com/mcorby17
ehekatlOf
@ehekatlOf
Jun 28 2016 21:15
anyone want to take a look and tell me where I'm messing up?
mcorby17
@mcorby17
Jun 28 2016 21:16
@flindip I remember having a similar problem... I don't remember exactly how I fixed it
Ethan Rose
@ethanrose
Jun 28 2016 21:17
I thought that enter might automatically select the first button, but it doesn't seem to be for me :/
ehekatlOf
@ehekatlOf
Jun 28 2016 21:21
heres the two test files
the first one is the DOM
<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="Untitled-2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

</head>

<body>
    <button>pushMe</button>
    <p>123</p>
</body>
</html>
the next one is the script
$( document ).ready(function() {


$('button').click(function(){
    $('p').text('asdf');
});



});
works totally fine in codepen and JSfiddle
then I drop the DOM into chrome and it tells me no
mcorby17
@mcorby17
Jun 28 2016 21:35
Could someone help me figure out why I get NaN at the end of my names of users who aren't streaming? It's the twitch app http://codepen.io/mcorby17/pen/vKydNE
ehekatlOf
@ehekatlOf
Jun 28 2016 21:36
@mcorby17 error option in $.ajax
if you check the twitch API documentation you'll also notice theres a a separate URL that keeps track of registered users
regardless of stream status
oh nevermind, you're just pulling bad metadata then
and it's returning a falsy value
mcorby17
@mcorby17
Jun 28 2016 21:38
hmmm
ehekatlOf
@ehekatlOf
Jun 28 2016 21:40
yeah
configure an if conditional to check if the stream is active
example
it can't pull the metadata from an offline stream
you can probably just take a shortcut and use ||
mcorby17
@mcorby17
Jun 28 2016 21:43
@ehekatlOf ok thanks!
CamperBot
@camperbot
Jun 28 2016 21:43
mcorby17 sends brownie points to @ehekatlof :sparkles: :thumbsup: :sparkles:
:cookie: 262 | @ehekatlof |http://www.freecodecamp.com/ehekatlof
ehekatlOf
@ehekatlOf
Jun 28 2016 21:43
where you set a function and return two values with ||
it'll always return the truthy value
example
mcorby17
@mcorby17
Jun 28 2016 21:44
@ehekatlOf so you can return 2 values from a function?
ehekatlOf
@ehekatlOf
Jun 28 2016 21:44
yeah
so if you look at kripp's stream
and he's currently offline
and you return your initial defined variable for stream name of a live stream
you can set another variable to slice the tail end of his username from either the self or channel JSON key
they're both the same value if he's live
if he's offline, the function will only return the truthy value
AKA not NaN
mcorby17
@mcorby17
Jun 28 2016 21:46
Ok i'm kinda confused
ehekatlOf
@ehekatlOf
Jun 28 2016 21:46
well, don't worry about then
just define an if then and do it normally
I linked you an example to show you what I meant
notice how the function always returns 1
mcorby17
@mcorby17
Jun 28 2016 21:47
Yeah i'm looking at it
ehekatlOf
@ehekatlOf
Jun 28 2016 21:47
and never false
mcorby17
@mcorby17
Jun 28 2016 21:47
how does it know to return 1?
ehekatlOf
@ehekatlOf
Jun 28 2016 21:47
it's just how it works
mcorby17
@mcorby17
Jun 28 2016 21:47
huh
ehekatlOf
@ehekatlOf
Jun 28 2016 21:47
probably because return false would make the function not be able to fire
mcorby17
@mcorby17
Jun 28 2016 21:50
So I have an if statement that checks if the user is streaming or not... can't I just work off that?
ehekatlOf
@ehekatlOf
Jun 28 2016 21:50
sure
mcorby17
@mcorby17
Jun 28 2016 21:51
And the NaN is coming from my api call right
ehekatlOf
@ehekatlOf
Jun 28 2016 21:51
yup
you're calling an invalid key
can anyone help me with why this locally stored file can't pull jquery properly?
I'm not used to working off an IDE, and I'd rather not have to do everything with vanilla JS
mcorby17
@mcorby17
Jun 28 2016 21:53
Wish I could help
ehekatlOf
@ehekatlOf
Jun 28 2016 21:53
all good dude
we've all got questions haha
mcorby17
@mcorby17
Jun 28 2016 21:54
How come I can output the usernames to the console without the NaN?
ehekatlOf
@ehekatlOf
Jun 28 2016 22:03
oh wtf I figured it out
you have to load jquery before javascript when loading out of a browser
greg
@wearenotgroot
Jun 28 2016 22:05
@mcorby17 remove that extra +

@mcorby17

+ user.display_name +  <-------remove this one     //Not sure why there's NaN
 + "</a>" +

line 40

flindip
@flindip
Jun 28 2016 22:09
@wearenotgroot hey Greg mind taking a look at my "Wikipedia Viewer"? I'm basically just trying to test the data at this point. Trying to get the api-call to display in the div before I go any further. I don't think my API call is correct. Should I do an AJAX request instead?
http://codepen.io/flindip/pen/WxpNqP?editors=0010
gideonlee
@gideonlee
Jun 28 2016 22:15
Hi I'm working on Build a Random Quote Machine. Can someone point me in the right direction to insert my quote/author to Twitter?
Faith Kent
@FaithKent
Jun 28 2016 22:18
@damianpcollier, did you get your image question answered? I just use a free image hosting site and link from there.
Ken Haduch
@khaduch
Jun 28 2016 22:18
@flindip - Hello - I was trying to load the page just to see what was up. You are getting an error in the console "pen.js:35 Uncaught TypeError: Cannot read property 'title' of undefined"
Faith Kent
@FaithKent
Jun 28 2016 22:18
to my knowledge you cant host images from codepen without paying for their upgraded services.
flindip
@flindip
Jun 28 2016 22:20
@khaduch hmm, am I not properly spelling or using proper syntax to define the title property in the API call?
@khaduch thanks
CamperBot
@camperbot
Jun 28 2016 22:20
flindip sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1382 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Jun 28 2016 22:21
@FaithKent @damianpcollier - you are correct - you have to find a hosting service. For example, you CANNOT use "imgur" as a host site, they don't allow it. There are sites that you can use, like postimg.org. I also use my flickr account for some of my own images - that has been working so far. I have seen other people use dropbox (in some way) I haven't tried that.
gjjgjj2
@gjjgjj2
Jun 28 2016 22:22

A couple questions about my tribute page.

-How I can change where my timeline sits on my tribute page? If I leave it text center like the rest of my page,then it is all over the place. When I do text left, then it is too far over but when I add a margin then it doesn't render properly unless it is full screen on my computer and doesn't render properly on my phone either.

-Second, I embedded a video and the video doesn't adjust to the screen it is on due to the height and width added. I am sure there is a fix for both of these things but I am not sure what it is.

Here is my page. I feel like there may be a better way to write some of the code, I am not sure but I am trying to do it without looking too many things up to start. https://codepen.io/gjjgjj2/pen/NrprNX?editors=1100

Ken Haduch
@khaduch
Jun 28 2016 22:23
@flindip - it looks like you are getting a response to your request, just, perhaps not correctly reading the JSON data?
Faith Kent
@FaithKent
Jun 28 2016 22:24
@khaduch @damianpcollier , postimage is the one I have been using. I'm very happy with it.
flindip
@flindip
Jun 28 2016 22:24
@khaduch Its JSONP I know that much.
@khaduch Perhaps I need an AJAX request instead?
greg
@wearenotgroot
Jun 28 2016 22:25
@flindip
(function(){
  var array1=[];
  var html="";

  var init=function(){

    function entry(title, snippet){
  entry.title=title;  
  entry.snippet=snippet;
  }
 $.getJSON("http://en.wikipedia.org/w/api.php?action=query&format=json&list=search&srsearch=wikipedia&callback=?",function(data){

   array1 = data.query.search; //array of objects

   for(var i = 0;i < array1.length; i++)
   {
      html='<div class="entry1"><h1>'+array1[i].title+'</h1><p>'+array1[i].snippet+'</p></div>';
      $("#entries1").append(html);
   }
  });
}
  init();
  })();
flindip
@flindip
Jun 28 2016 22:26
@wearenotgroot I see. I didn't put length parameters for the array. So its writing over it again again?
greg
@wearenotgroot
Jun 28 2016 22:26
@flindip remember you dont need to name an anonymous function
flindip
@flindip
Jun 28 2016 22:26
@wearenotgroot thanks
CamperBot
@camperbot
Jun 28 2016 22:26
flindip sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1184 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
Ken Haduch
@khaduch
Jun 28 2016 22:26
@flindip - well, it is getting a response, so what you are doing is working up to that point. I cannot quite figure out how you are attempting to access teh data, and I hate the way the Chrome dev tools shows the output in one extremely long line! :)
greg
@wearenotgroot
Jun 28 2016 22:27
@flindip also you dont have to push just set array1 equal data.query.search
flindip
@flindip
Jun 28 2016 22:27
@wearenotgroot gotcha
@flindip I forgot that JSONP is not actually giving me an object I believe
mcorby17
@mcorby17
Jun 28 2016 22:33
@wearenotgroot thank you!
CamperBot
@camperbot
Jun 28 2016 22:33
mcorby17 sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1185 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
Tiffany White
@twhite96
Jun 28 2016 22:45
Anyone have any experience with Flexbox?
Need some help putting this text in the center of this rectangle and making it responsive with Flexbox
I’d like to center the tweet bird and the text in this rectangle. It is not responsive yet.
TheGaruda
@TheGaruda
Jun 28 2016 22:47
a
Just started my Tribute Page, stuck on trying to center the grey div http://codepen.io/TheGaruda/pen/KMWNLQ
gjjgjj2
@gjjgjj2
Jun 28 2016 22:55
@TheGaruda It looks center to me- am I wrong?
UtkarshShukla7
@UtkarshShukla7
Jun 28 2016 22:56
@twhite96 add justify-content:center to flex-rectangle and remove its flex-direction:column-reverse and then resize your twitter logo
Taylor Morgan
@tmdesigned
Jun 28 2016 23:14
I know there are no graphics or fancy animations, but this meets the requirements for the Pomodoro Clock, right? https://codepen.io/tmdesigned/pen/xOqdda
miriam-z
@miriam-z
Jun 28 2016 23:16
hi, I have noticed that when using boostrap in my editor the columns are not collapsing at the right breakpoints and I don't know why this is. It seems to work fine on codepen but would like it to work in the same way on my laptop for other editors. Does anyone have any ideas why this is? I would appreaciate any thoughts please.
andreas2249
@andreas2249
Jun 28 2016 23:18
@miriam-z, only a guess: CodePen might have some built-in margins, padding, or other things going on in the panel vs. your Sublime, Atom, or other editor is more "naked" in that regard. Only a guess...
miriam-z
@miriam-z
Jun 28 2016 23:19
@andreas2249 thanks for your thoughts on this. I am using the same links to css, js, jquery but its not correct at all ...
CamperBot
@camperbot
Jun 28 2016 23:19
miriam-z sends brownie points to @andreas2249 :sparkles: :thumbsup: :sparkles:
:cookie: 221 | @andreas2249 |http://www.freecodecamp.com/andreas2249
andreas2249
@andreas2249
Jun 28 2016 23:19
@miriam-z, another idea could be that CodePen is loading up different versions of add-ons (bootstrap, jQuery, etc.) than you're loading in your text editor.
@miriam-z, I understand. Have had the same issue before. It is frustrating. Maybe try dropping some code into jsFiddle and see what you get. I've heard that doesn't pre-load anything.
miriam-z
@miriam-z
Jun 28 2016 23:21
@andreas2249 I am getting the latest ones available and using chrome. The styles are all there it is just the columns are not the correct widths at different device sizes.
Tiffany White
@twhite96
Jun 28 2016 23:21
@UtkarshShukla7 it is not putting the text in the middle of the box. Also, the image isn’t resizing properly.
@UtkarshShukla7 not sure how to size and image with Flexbox
miriam-z
@miriam-z
Jun 28 2016 23:22
@andreas2249 thanks for the tips I kind of need it to work in my editor :) but will try that also...
CamperBot
@camperbot
Jun 28 2016 23:22
miriam-z sends brownie points to @andreas2249 :sparkles: :thumbsup: :sparkles:
:warning: miriam-z already gave andreas2249 points
andreas2249
@andreas2249
Jun 28 2016 23:22
@miriam-z, I'm pretty new at all of this. Sorry I don't have more ideas...
miriam-z
@miriam-z
Jun 28 2016 23:23
@andreas2249 no worries :)

@ohiosierra Your pomodoro clock seems to fit the requirements: User Story: I can start a 25 minute pomodoro, and the timer will go off once 25 minutes has elapsed.

User Story: I can reset the clock for my next pomodoro.

User Story: I can customize the length of each pomodoro.

miriam-z
@miriam-z
Jun 28 2016 23:28
there is no mention here of having any graphics. looks good!
Taylor Morgan
@tmdesigned
Jun 28 2016 23:28
thanks @miriam-z
CamperBot
@camperbot
Jun 28 2016 23:28
ohiosierra sends brownie points to @miriam-z :sparkles: :thumbsup: :sparkles:
:cookie: 128 | @miriam-z |http://www.freecodecamp.com/miriam-z
miriam-z
@miriam-z
Jun 28 2016 23:28
@ohiosierra your welcome
Ken Haduch
@khaduch
Jun 28 2016 23:29
@ohiosierra - hello again. A couple things - when you get down to the single digits in the seconds portion of the display, it displays like this: 0:5 - you need to make it a two-digit value. I don't know if they changed the requirements, but the example project makes a sound at the end of the time period - I think that the video uses the term "the timer goes off" - to me that means that it makes a sound (although I don't think that they actually put that in the user stories?) Looks good so far!
Taylor Morgan
@tmdesigned
Jun 28 2016 23:30
oh, thanks @khaduch. I made a note about the seconds thing but forgot to get back to it. As you can see it progressed a lot from when you last saw it and it just shot down towards negative infinity
CamperBot
@camperbot
Jun 28 2016 23:30
ohiosierra sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1383 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Jun 28 2016 23:32
@ohiosierra - yes, great work on it so far! Lots of progress!
Taylor Morgan
@tmdesigned
Jun 28 2016 23:34
help pomodoro clock
CamperBot
@camperbot
Jun 28 2016 23:34
no wiki entry for: pomodoro clock
Taylor Morgan
@tmdesigned
Jun 28 2016 23:34
help pomodoro timer
CamperBot
@camperbot
Jun 28 2016 23:34
no wiki entry for: pomodoro timer