These are chat archives for FreeCodeCamp/HelpFrontEnd

4th
Apr 2017
jdaquino
@jdaquino
Apr 04 2017 00:38
hi there
Could anyone spare a minute to help with the portfolio project?
I am having trouble centering images on my portfolio
the images to be replaced by the incoming projects dont center, they are always on the left side
Gulsvi
@gulsvi
Apr 04 2017 00:43
@jdaquino You are using Bootstrap 3 classes (well, col-xs-12, panel, panel-primary), but you have a Bootstrap 4 navbar and Bootstrap 4 CSS added to your project. Maybe you want to try the Bootstrap 4 cards instead? https://v4-alpha.getbootstrap.com/components/card/
jdaquino
@jdaquino
Apr 04 2017 00:43
Do you think a) that is the problem? b) it could be added on codepen.io?
the cards
Gulsvi
@gulsvi
Apr 04 2017 00:44
Yes, the cards will work fine on codepen
jdaquino
@jdaquino
Apr 04 2017 00:45
thanks, @SkyCoder01 , Ill read it
CamperBot
@camperbot
Apr 04 2017 00:45
jdaquino sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 853 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 04 2017 00:45
They are centered fine if you make your screen smaller, but you need to fix the classes you are using first to make them centered for all screen sizes @jdaquino Good luck!
PtLeon
@PtLeon
Apr 04 2017 01:02
hi guys, can someone tell me how to initial the setting of bootstrap in codepen? my bootstrap code didn't look good. what things should be in the "Stuff for <head>"? thanks
Timothy J. Sayre
@buckyinsfo
Apr 04 2017 01:04
@PtLeon - click the settings tab and select CSS.
PtLeon
@PtLeon
Apr 04 2017 01:07
thanks, it looks good now! just curious, is default address broken?
Timothy J. Sayre
@buckyinsfo
Apr 04 2017 01:08
Not sure. I just use that one.
PtLeon
@PtLeon
Apr 04 2017 01:08
thanks so much, have a good one
Rob
@s31181
Apr 04 2017 01:55
hey guys i was wondering why my code wasn't working i'm trying to animate a scroll when an anchor tag is clicked, but its not working
$(document).ready(function() {
  $('.burger-container').click(function() {
    $('.burger').toggleClass('open');
    $('.nav').toggleClass('slide_out');
    console.log('click');
  });

  $(window).click(function() {
    $('.burger').removeClass('open');
    $('.nav').removeClass('slide_out');
    console.log('i took a shit');
  });
  $('.burger-container').click(function(event) {
    event.stopPropagation();
    console.log('holy crap');
  });

  $('a[href^="#"]').on('click', function(event) {
    event.preventDefault();
    var target = this.hash;
    var $target = $(target);
    console.log($target);
    $('body').animate({
      'scrollTop':$target.offset().top},
      1000, 'swing');
    });
});
sorry for the profanity
its that last function that's giving me trouble
Tom
@moT01
Apr 04 2017 02:07
@s31181 getting anything after that onclick?
Rob
@s31181
Apr 04 2017 02:08
yeah - so after the $target i put a console log
it prints
but the animation just isn't going
Tom
@moT01
Apr 04 2017 02:09
got a pen?
Rob
@s31181
Apr 04 2017 02:09
i'm not doing this project on codepen :/
should i try this bit on it?
Tom
@moT01
Apr 04 2017 02:10
no, helps for people to help
but, if that's logging, it only leaves 3 lines of code
Rob
@s31181
Apr 04 2017 02:10
yeah
thanks for the help #moT01
@moT01 thanks
CamperBot
@camperbot
Apr 04 2017 02:11
s31181 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 603 | @mot01 |http://www.freecodecamp.com/mot01
WillGITCode
@WillGITCode
Apr 04 2017 02:11
I am just starting the random quote machine challenge. I am unable to center a div element and I dont know why. It should be so simple with many ways to achieve. Any ideas http://codepen.io/Wilhelmburn/pen/LWajMN
@s31181
Rob
@s31181
Apr 04 2017 02:15
yeah i've been here :/ i tried all 'em
Tom
@moT01
Apr 04 2017 02:16
hmm
Rob
@s31181
Apr 04 2017 02:16
my theory is there's something in the lines above that's just mucking up the whole thing
Tom
@moT01
Apr 04 2017 02:16
tried it without the 'swing'?
got jquery included?
Rob
@s31181
Apr 04 2017 02:18
yeah jquery is all loaded
its how all the other bits of code is working
Tom
@moT01
Apr 04 2017 02:20
maybe, ...doesn't look like there's anything in there to me that would affect it
Saboor Malik
@MathematicsCoding
Apr 04 2017 02:22
Hey I forgot the code in css how to change the element text into different font?
Tom
@moT01
Apr 04 2017 02:23
@s31181 not sure if itll help but here's some code i used that worked, ...
    $(".nav-btn").click(function (event) {
        $('html, body').animate({
            scrollTop: $($.attr(this, 'href')).offset().top - 100
        }, 500);
        event.preventDefault();
    });
Saboor Malik
@MathematicsCoding
Apr 04 2017 02:24
...
h2 {font: italic}
In css
Saboor Malik
@MathematicsCoding
Apr 04 2017 02:26
font-style
OF course
Thanks @moT01
CamperBot
@camperbot
Apr 04 2017 02:26
mathematicscoding sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 604 | @mot01 |http://www.freecodecamp.com/mot01
Saboor Malik
@MathematicsCoding
Apr 04 2017 02:35
hey How do I make a text that surround white with black background?
Roxroy
@roxroy
Apr 04 2017 02:36

@MathematicsCoding , this what you are looking for

<h2 class="white">Random Quote Rewritten</h2>

Saboor Malik
@MathematicsCoding
Apr 04 2017 02:36
Not the text
Tom
@moT01
Apr 04 2017 02:37
you can put all the styling for a single element together, ...your h2...
h2 {
 color: red;
 something else: here;
}
Saboor Malik
@MathematicsCoding
Apr 04 2017 02:37
Yeah I know :p
@roxroy not the text like a circle of them is white?
Tom
@moT01
Apr 04 2017 02:37
i think youre looking for background-color
Saboor Malik
@MathematicsCoding
Apr 04 2017 02:38
Yeah exactly
It works thanks but...
Never mind the desings looks better than I thought
Roxroy
@roxroy
Apr 04 2017 02:40
@MathematicsCoding , np
Rob
@s31181
Apr 04 2017 02:41
@moT01 no go :/ thanks man
CamperBot
@camperbot
Apr 04 2017 02:41
s31181 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:warning: s31181 already gave mot01 points
Saboor Malik
@MathematicsCoding
Apr 04 2017 02:41
Can someone say thanks to me?
So I can reach 300..
:(
Tom
@moT01
Apr 04 2017 02:42
well, if you feel like putting on a pen for me i would play around with it and might get it, ...other than that i don't know what the problem is
Saboor Malik
@MathematicsCoding
Apr 04 2017 02:43
Me?
Tom
@moT01
Apr 04 2017 02:43
no @s31181
Saboor Malik
@MathematicsCoding
Apr 04 2017 02:43
oh :p
@moT01 Might I have a cookie?
Tom
@moT01
Apr 04 2017 02:45
sorry man
gotta earn it
Saboor Malik
@MathematicsCoding
Apr 04 2017 02:47
...
You know I could just go to video challenges and complete one challenge..
Never mind that :cookie:
Rob
@s31181
Apr 04 2017 02:49
so i'm running it and i looked at the console for the code i'm running it says $target.offSet().top is not a funtion
V Arun Kumar
@arunvkumr
Apr 04 2017 02:50
Hey guys, i'm working on wikipedia project and want some feedback, this is what i have so far. design is not complete and many more things still need to add( random article button and enter to search etc..).
https://codepen.io/arunkumrv/full/jBdjWM/
Tom
@moT01
Apr 04 2017 02:51
capital S?
maybe target has to go in parenthesis
$($target).offset()
Rob
@s31181
Apr 04 2017 02:52
ahhh you're getting closer it says top is not defined
Tom
@moT01
Apr 04 2017 02:53
@arunvkumr looks pretty good, would be nice if you could search when you hit enter or click the button
V Arun Kumar
@arunvkumr
Apr 04 2017 02:56
@moT01 are you not able to see the result? i did add button click, enter button is not yet implemented i'm working on it now. but button click should work.
Tom
@moT01
Apr 04 2017 02:56
yea i can see them
it just only works with the button click
its looking good though
i could say a little more, but im sure you have that stuff left to do
V Arun Kumar
@arunvkumr
Apr 04 2017 02:58
@moT01 oh thanks... as of now that is what i have done. i'm working on adding enter button.
@moT01 please do share your concerns, i will try to implement them.
Tom
@moT01
Apr 04 2017 02:59
could use some sort of title or logo at the top or something
few missing semicolons if you analyze your js, ...not a real problem, something i might do
could maybe open the links in a new tab, ...again my preference
i dunno, it says search wiki, ...so i guess you really might not even need a title or logo
Rob
@s31181
Apr 04 2017 03:13
@moT01 it works!
on other browsers...
just not my main one
chrome
V Arun Kumar
@arunvkumr
Apr 04 2017 03:15
@moT01 fixed some bugs and added those things(except enter button). how about now. https://codepen.io/arunkumrv/full/jBdjWM/
Tom
@moT01
Apr 04 2017 03:17
looks great
V Arun Kumar
@arunvkumr
Apr 04 2017 03:18
@moT01 thanks
CamperBot
@camperbot
Apr 04 2017 03:18
arunvkumr sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 605 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Apr 04 2017 03:19
i used a url to get a bunch of random wiki things instead of just taking someone to a random page
meaning like 10 random things showed up as if you searched for them, then they could be clicked on and taken to the page
i thought it was a nice feature
https://en.wikipedia.org/w/api.php?action=query&format=json&generator=random&grnnamespace=0&grnlimit=20&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=6&exlimit=max&callback=? that's the url i used if your interested, ...may need to tweak it a bit
V Arun Kumar
@arunvkumr
Apr 04 2017 03:21
@moT01 oh yea, that sounds cool. will try to implement that. thanks
CamperBot
@camperbot
Apr 04 2017 03:21
arunvkumr sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:warning: arunvkumr already gave mot01 points
one of my projects i was happier with
jdaquino
@jdaquino
Apr 04 2017 03:44
Hi there
V Arun Kumar
@arunvkumr
Apr 04 2017 03:44
@moT01 nice,looks great :+1:
jdaquino
@jdaquino
Apr 04 2017 03:45
do you know how to center a card without col-??-?? ?
I mean, I want my card to be centered even when on small screen, w/o having to have blank spaces (col-md-4) at the sides
Tom
@moT01
Apr 04 2017 03:47
@arunvkumr thanks
CamperBot
@camperbot
Apr 04 2017 03:47
mot01 sends brownie points to @arunvkumr :sparkles: :thumbsup: :sparkles:
:cookie: 576 | @arunvkumr |http://www.freecodecamp.com/arunvkumr
jdaquino
@jdaquino
Apr 04 2017 03:47
the contact card
V Arun Kumar
@arunvkumr
Apr 04 2017 03:47
@jdaquino try col-md-4 col-md-offset-4, what it does is it shifts the elem 4 grid away from start.
Mohamed Derhalli
@derhallim
Apr 04 2017 04:30
@jdaquino looks good :)
Hey campers I am trying to make the two images horizontally centered But while resizing the browser it moves away from the center.
Its workig fine in full sceen
Im reading it now
shivam gupta
@shivamg11000
Apr 04 2017 04:39
I have read that a bi
bit
but for now I want solution
jdaquino
@jdaquino
Apr 04 2017 04:49
BTW, here is a error <div class=cont3-1><p>ARISE,
Ashan Mohammed
@AshanMohammed
Apr 04 2017 04:50
@fortMaximus Thanks!
CamperBot
@camperbot
Apr 04 2017 04:50
ashanmohammed sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 692 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Jandy
@zyh95
Apr 04 2017 04:56
hey,guys ,i'm working on the danmu app ,it can work ,but I'cant found the data in my wilddog database.Any body has a similar experience? And how can i resolve it?
Esther
@esmlee
Apr 04 2017 05:52
Hi guys. I have a quick question- I'm confused as to why the assignment for "Build a Tribute Page" only uses HTML and one line of CSS Code. I just completed the jQuery part, and from my understanding, jQuery is under Javascript... so why is everything under HTML? (I haven't gone over the general Javascript lesson yet)
Mohamed Derhalli
@derhallim
Apr 04 2017 06:03
@esmlee tribute page doesn't need JS, that's why
Jor
@joreyesl
Apr 04 2017 06:04
@esmlee The tribute page works fine as a static page, no JS needed
Zach
@Moose1551
Apr 04 2017 06:31
Hello, everyone. I have a question that I'm sure has a simple answer.
If I were to try to select a class from an ejs file, what would I use instead of "var button = document.querySelectorAll(".mode")" in my app.js?
Luis Eduardo Dávila Campos
@xXSentryBotXx
Apr 04 2017 06:41
hi @Moose1551 I think you can use "var button = document.getElementsByClassName('mode')"
alpox
@alpox
Apr 04 2017 07:19
@Moose1551 actually the line you showed should be fine too
@Moose1551 the kind of templating language you use does not matter to javascript, all the things like ejs are translated to the same DOM objects from the browser
@esmlee jquery is a javascript library, thats right. But the main focus of query is the manipulation of a website through manually change the html and css shown on page
Derek B. McIntire
@derekbmcintire
Apr 04 2017 07:48
Hey everyone, I am having some issues with my weather app and I don't know if it's just my internet connection or the app. When I view it in full page or editors view it doesn't work. When I switch over to debug view it still doesn't work, but then when I refresh it, it works fine. Here's my pen, if anyone can just view it and tell me if it gives you your location and current weather that would be great - http://codepen.io/derekbmcintire/full/LWadKo/
Muhammad Hasham
@MohammadHasham
Apr 04 2017 07:50
can anyone explain offsetHeight as compared to offsetTop in a simple way?
Derek B. McIntire
@derekbmcintire
Apr 04 2017 08:05
hello?
alpox
@alpox
Apr 04 2017 08:09
@derekbmcintire Works fine here xD
Derek B. McIntire
@derekbmcintire
Apr 04 2017 08:12
Okay, must be my connection, thank you!
rfvergeldedios
@rfvergeldedios
Apr 04 2017 08:14
Question re: Twitch JSON API zipline, are we required to .getJSON all the channels (item #9) in the array or any number of those listed?
alpox
@alpox
Apr 04 2017 08:17
@rfvergeldedios You can choose any channels you'd like
Dany Din
@danydin
Apr 04 2017 08:22
how to choose the text from: select>options elements through js
rfvergeldedios
@rfvergeldedios
Apr 04 2017 08:29
@alpox ok. thanks.
CamperBot
@camperbot
Apr 04 2017 08:29
rfvergeldedios sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 910 | @alpox |http://www.freecodecamp.com/alpox
Aravind Reddy
@aravind1078
Apr 04 2017 08:31
iam doing random quote machine
hey guys
need help
iam getting button next to text
how to move it to the right
in the same box
Waqar Ahmad Khan
@bhali16
Apr 04 2017 08:43
hi
i want to know can i design my portfolio using wordpress ?
h1tag
@h1tag
Apr 04 2017 08:51
@aravind1078 search
Dany Din
@danydin
Apr 04 2017 08:53
how to choose the text from: select>options elements through js
h1tag
@h1tag
Apr 04 2017 08:58
@danydin did you try searching
Dany Din
@danydin
Apr 04 2017 09:00
nah i ask here
relikt
@reliktus
Apr 04 2017 09:06
@fortMaximus Could You look at my Pen:
Iv got problem with getting data from wiki api
cross origin error in browser console
searched in google but cant figure it out
h1tag
@h1tag
Apr 04 2017 09:12
@reliktus you have to set the &callback=? <-- like this, so that the request will be treated as a jsonp request and this will solve the cross origin
Dany Din
@danydin
Apr 04 2017 09:15
@fortMaximus ye thanks
CamperBot
@camperbot
Apr 04 2017 09:15
danydin sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 693 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
relikt
@reliktus
Apr 04 2017 09:16
@fortMaximus thank You
CamperBot
@camperbot
Apr 04 2017 09:16
:cookie: 694 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
reliktus sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
relikt
@reliktus
Apr 04 2017 09:16
That was so easy, tahnks
does it apply to all api cross origin problem ?
I mean is that rule universal ?
h1tag
@h1tag
Apr 04 2017 09:18
it should
relikt
@reliktus
Apr 04 2017 09:19
thank You again
back to codding :smile:
h1tag
@h1tag
Apr 04 2017 09:19
but I didnt work with the quotesondesign api
I had to use &_jsonp=?
@reliktus
relikt
@reliktus
Apr 04 2017 09:35
yeap You helped me with quotedesing api too if i remember
but i had a problem with mixed content (http/https)
ok once again thank you
h1tag
@h1tag
Apr 04 2017 09:37
@reliktus You're welcome :smiley:
V Arun Kumar
@arunvkumr
Apr 04 2017 09:41
Hey guys, i'm have completed wikipedia project i think, have a look and give some feedback. https://codepen.io/arunkumrv/full/jBdjWM/
kirbyedy
@kirbyedy
Apr 04 2017 09:47
@arunvkumr errrr does not work for me
and this is the error from the console: Uncaught SyntaxError: Invalid or unexpected token
h1tag
@h1tag
Apr 04 2017 09:48
I don't see the text when typing in the search box, and no results too
and the random button doesn't work too
V Arun Kumar
@arunvkumr
Apr 04 2017 09:49
@kirbyedy yep, doing some changes so that's why it's giving error. i'm fixing it will be working in a moment.
h1tag
@h1tag
Apr 04 2017 09:50
How you ask us to give feedback and still unfinished :confused:
V Arun Kumar
@arunvkumr
Apr 04 2017 09:50
@kirbyedy @fortMaximus i'll do the changes later, you guys can check it now.
h1tag
@h1tag
Apr 04 2017 09:51
@arunvkumr it shows the result without clicking the button, is that what you intended?
also still can't see the text I type in the search box
and random doesn't work
V Arun Kumar
@arunvkumr
Apr 04 2017 09:53
@fortMaximus yup, thought it would be cool to that, really i can see the text. random actually generates random topics and displays in the result, instead of taking it to the random page.
h1tag
@h1tag
Apr 04 2017 09:54
random actually generates random topics and displays in the result, instead of taking it to the random page.
didn't notice it. So, yea, random is working
the text doesn't show on FF
@arunvkumr
V Arun Kumar
@arunvkumr
Apr 04 2017 09:57
@fortMaximus you can't see the text you are typing, what did you type? and should i remove the result without clicking button.
h1tag
@h1tag
Apr 04 2017 09:57
aaa
that's what I typed
the text in the search box doesn't show on Firefox, but shows on chrome
V Arun Kumar
@arunvkumr
Apr 04 2017 09:59
@fortMaximus hmm, thanks i'll look into it.
CamperBot
@camperbot
Apr 04 2017 09:59
arunvkumr sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 695 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
V Arun Kumar
@arunvkumr
Apr 04 2017 10:01
@fortMaximus and should i keep the without clicking search or show result on clicking search?
h1tag
@h1tag
Apr 04 2017 10:04
@arunvkumr yea, keep it (nice feature), but the search button is obsolete (it doesn't do anything different), so instead remove the button
:+1:
Shashank Kumar
@shashank893
Apr 04 2017 10:06
Hi everyone.
I have created the below portfolio.Please comment on what can be better. :)
https://codepen.io/kumar93/pen/ZewNbY
h1tag
@h1tag
Apr 04 2017 10:07
@shashank893 we can't see it in full view, you to have to verify your email
Shashank Kumar
@shashank893
Apr 04 2017 10:09
@fortMaximus I have verified the email at the time of signup only.
Can you please tell where can I check it again?
heroiczero
@heroiczero
Apr 04 2017 10:10
@shashank893 the pink text is not really visible and There is a blank area after the title
V Arun Kumar
@arunvkumr
Apr 04 2017 10:11
@fortMaximus hmm, fixed the firefox text issue. alright i'm on to remove the search button :+1:
@arunvkumr :+1:
Shashank Kumar
@shashank893
Apr 04 2017 10:19
@heroiczero I have fixed the pink text issue :) but this doubt "There is a blank area after the title" I am not getting :(
can you please tell me more on wat you mean by that @heroiczero
heroiczero
@heroiczero
Apr 04 2017 10:21
@shashank893 the <img> is not showing for me
Keon Samuel
@keonsam
Apr 04 2017 10:25
@SkyCoder01
the forEach worked
now I got to find a way to sort the online and offline.
drowningpool5
@drowningpool5
Apr 04 2017 10:35
Hi guys, how can i get started with Build a Pomodoro Clock project... I honestly don't know, where should I start.. if you could help me/have any advices I'd be very happy
Keon Samuel
@keonsam
Apr 04 2017 10:36
just start coding
Shashank Kumar
@shashank893
Apr 04 2017 10:36
http://codepen.io/kumar93/pen/ZewNbY @heroiczero .
Can you please check it now?
Actually I am able to see the image
Keon Samuel
@keonsam
Apr 04 2017 10:37
@shashank893 what you need help with?
Shashank Kumar
@shashank893
Apr 04 2017 10:39
@keonsam I just wanted to ask does it look fine or not and how to increase the space between the link(twitter,facebook,instagram)
@heroiczero sry this is the correct link
http://codepen.io/kumar93/pen/ZewNbY
Keon Samuel
@keonsam
Apr 04 2017 10:40
space on the same line is always row
heroiczero
@heroiczero
Apr 04 2017 10:41
@shashank893 Good Job :+1:
V Arun Kumar
@arunvkumr
Apr 04 2017 10:41
@shashank893 the pink text is killing my eyes, change it to something so that it doesn't hurt people's eyes. a dark color should be good on light background.
Keon Samuel
@keonsam
Apr 04 2017 10:41
that is red lol
too much color action
Shashank Kumar
@shashank893
Apr 04 2017 10:41
@arunvkumr I changed it ...actually sent the wromg link earlier :P
http://codepen.io/kumar93/pen/ZewNbY
V Arun Kumar
@arunvkumr
Apr 04 2017 10:42
@shashank893 yea, now its much better :smile: :+1:
Shashank Kumar
@shashank893
Apr 04 2017 10:42
yep I was trying something unique @keonsam :P :P
drowningpool5
@drowningpool5
Apr 04 2017 10:42
Did anyone here make a Promodoro Clock? :) and perhaps has some advices for me on how to get started? :)
Shashank Kumar
@shashank893
Apr 04 2017 10:42
thanks @arunvkumr @heroiczero :)
CamperBot
@camperbot
Apr 04 2017 10:42
shashank893 sends brownie points to @arunvkumr and @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 1089 | @heroiczero |http://www.freecodecamp.com/heroiczero
:cookie: 577 | @arunvkumr |http://www.freecodecamp.com/arunvkumr
drowningpool5
@drowningpool5
Apr 04 2017 10:44
I havent done twitch.tv API project yet, is that a clue though?
@keonsam
Keon Samuel
@keonsam
Apr 04 2017 10:45
at the top part where the all online and offline is. what was used to create that effect?
is it Jquery?
drowningpool5
@drowningpool5
Apr 04 2017 10:46
@keonsam yes it was, why?
Keon Samuel
@keonsam
Apr 04 2017 10:46
cool
drowningpool5
@drowningpool5
Apr 04 2017 10:46
@keonsam xD
V Arun Kumar
@arunvkumr
Apr 04 2017 10:51
@moT01 thanks for your help :smile: , this is what i have made.
https://codepen.io/arunkumrv/full/wJOEzd/
CamperBot
@camperbot
Apr 04 2017 10:51
arunvkumr sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 606 | @mot01 |http://www.freecodecamp.com/mot01
Shashank Kumar
@shashank893
Apr 04 2017 10:53
awesome @arunvkumr (y)
  • :)
drowningpool5
@drowningpool5
Apr 04 2017 10:54
@arunvkumr nice :)
V Arun Kumar
@arunvkumr
Apr 04 2017 11:03
@shashank893 @drowningpool5 thanks :smile:
CamperBot
@camperbot
Apr 04 2017 11:03
arunvkumr sends brownie points to @shashank893 and @drowningpool5 :sparkles: :thumbsup: :sparkles:
:warning: @drowningpool5's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
:cookie: 121 | @shashank893 |http://www.freecodecamp.com/shashank893
Keon Samuel
@keonsam
Apr 04 2017 11:35
hey
should I go to freecodecamp beta instead of this?
Marco
@heyitscino
Apr 04 2017 11:36
anyone having trouble with 'Selecting from many options with Switch Statements'
rfvergeldedios
@rfvergeldedios
Apr 04 2017 12:01
Hi, I'm having trouble searching the twitch data via JSON. I keep getting error 403 (not authorized?). This is the url variable I'm using to test: https://wind-bow.glitch.me/twitch-api/search/streams?q=ESL_SC2
Andres Diaz-Pinto
@diazandr3s
Apr 04 2017 12:11
@rfvergeldedios Hi
instead
just delete search
rfvergeldedios
@rfvergeldedios
Apr 04 2017 12:12
@diazandr3s ok. thank you.
CamperBot
@camperbot
Apr 04 2017 12:12
rfvergeldedios sends brownie points to @diazandr3s :sparkles: :thumbsup: :sparkles:
:cookie: 282 | @diazandr3s |http://www.freecodecamp.com/diazandr3s
Jordy
@JordyDew
Apr 04 2017 12:15
Hi all. Before I aks you my question, I would like to say two things: 1stly, I am completely blind, so I can't have any access to pictures... (I say this because I have already had some problems with that on other websites) :-) 2ndly, my English is not that good, so please, keep it as simple as pissble... Thanks for your understanding!!! :-) :-) And now, my question. I hope this room is the good one, btw... But I have to nest an anchor element into a paragraph, but the FCC system doesn't want to accept what I've typed... It's very strange. Is there someone who can help me, please? Thanks. (Btw, can I add here some code, or not?)
h1tag
@h1tag
Apr 04 2017 12:17
@JordyDew yes, you can add code here.
Jordy
@JordyDew
Apr 04 2017 12:25
So, that's a bit of the code I wrote:
<h2 class="red-text">CatPhotoApp</h2>
<p>View more <a href="http://freecatphotoapp.com">cat photos</a></p>
<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
Keon Samuel
@keonsam
Apr 04 2017 12:28
how can you used a computer when you are blind?
@JordyDew
h1tag
@h1tag
Apr 04 2017 12:32
@JordyDew there was a www. in the href value
Jordy
@JordyDew
Apr 04 2017 12:39
@keonsam I use a brailledisplay, which shows the screen row by row of 40 charachters in braille. I also use synthetic speech to hear what's on my computer's screen... I never use a mouse, but all with the keyboard... I mostly use Windows, but I can also use Linux or MacOS. Yeah, it's tricky to tell :p
@fortMaximus Thank you very much!!! I am stupid! haha
CamperBot
@camperbot
Apr 04 2017 12:40
jordydew sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 700 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
h1tag
@h1tag
Apr 04 2017 12:41
@JordyDew no, that requirement is stupid or you may have changed the text by mistake
Jordy
@JordyDew
Apr 04 2017 12:43
No, I didn't change anything, but it works now! I am sent to the next challenge :-)
lamarcusknight
@lamarcusknight
Apr 04 2017 13:04
can someone help with gettting this Local weather api started
h1tag
@h1tag
Apr 04 2017 13:05
@lamarcusknight which api's are u using?
kirbyedy
@kirbyedy
Apr 04 2017 13:05
@lamarcusknight you have to be more specific, we cant see your screen :D
lamarcusknight
@lamarcusknight
Apr 04 2017 13:06
havent got started reading and trying to see where do I start. I am apart of a group that did this project but I mised the meeting now I am trying to set it up so I am on page this coming unday
h1tag
@h1tag
Apr 04 2017 13:09
@lamarcusknight don't use the recommended weather api (openweather) because it doesn't use https
lamarcusknight
@lamarcusknight
Apr 04 2017 13:10
what should i use
h1tag
@h1tag
Apr 04 2017 13:10
search for another one or use APIXU
that will be my tip
kirbyedy
@kirbyedy
Apr 04 2017 13:21
I used darksky
and wunderground
Jason
@jasonetaylor
Apr 04 2017 13:49
@fortMaximus Just curious, for this project why deter using it because it doesn't have https??
Moisés Man
@moigithub
Apr 04 2017 13:53
@jasonetaylor IF u chrome built-in geolocation.. it only works if u use https (secure protocol)
soo if u use https.. all ur content MUST also be served from secure sites
soo IF u use OWeather since it dont have support for https (not free version at least) u will get a mixed content error
Jason
@jasonetaylor
Apr 04 2017 13:54
@moigithub I understand. I forgot that Chrome switched geolocation to https only.
Moisés Man
@moigithub
Apr 04 2017 13:55
but i think.. ppl should use openweather.. so they HIT those problems... and learn how to solve
probably at the end.. they will switch to another api.. but at least they will know WHY
Keon Samuel
@keonsam
Apr 04 2017 14:01
oh man
can anyone suggest how I can use to filter this?
h1tag
@h1tag
Apr 04 2017 14:03
@jasonetaylor Why would anyone use http in 2017?! lol
Keon Samuel
@keonsam
Apr 04 2017 14:03
the li
Jason
@jasonetaylor
Apr 04 2017 14:04
@fortMaximus I guess because the site doesn’t have a cert installed? Otherwise they should be.
h1tag
@h1tag
Apr 04 2017 14:04
if it doesn't have, then they should immediately switch to another
Jason
@jasonetaylor
Apr 04 2017 14:07
@keonsam Use javascript to show or hide the streamers that match the filter. You could set a class or an html data attribute on load based on the online/offline info you get back from the API. Then when someone clicks the online button it hides any element with a class or data attribute of “offline” etc..
Jason
@jasonetaylor
Apr 04 2017 14:11
@fortMaximus everyone will be eventually
A lot of little sites will need to pony up cash for a cert or find hosts who offer openssl solutions
Jason
@jasonetaylor
Apr 04 2017 14:28
@keonsam here is a forked version of your code: http://codepen.io/mrjasonetaylor/pen/YZggVd?editors=0010
mrAitai
@mrAitai
Apr 04 2017 14:30
have done my portfolio. Could anyone give me feedback?
http://codepen.io/Aitai/full/zZeGbp/
Tom
@moT01
Apr 04 2017 14:37
@mrAitai looks good enough to move on if you want,
the pictures get skinny as you shrink the window, they don't scale right
Okonkwo Afam
@AfamO
Apr 04 2017 14:37
Hello Guys!
Tom
@moT01
Apr 04 2017 14:38
along with some other problems with resonsiveness
but i would move on, ...you will go back and redo it after a while
@AfamO hey
Okonkwo Afam
@AfamO
Apr 04 2017 14:38
Fine
I am currently working on advanced algorithm:
Inventory Update
Can someone help me check if this taste case is correct.
Here is the test case:
updateInventory([[21, "Bowling Ball"], [2, "Dirty Sock"], [1, "Hair Pin"], [5, "Microphone"]], [[2, "Hair Pin"], [3, "Half-Eaten Apple"], [67, "Bowling Ball"], [7, "Toothpaste"]]) should return [[88, "Bowling Ball"], [2, "Dirty Sock"], [3, "Hair Pin"], [3, "Half-Eaten Apple"], [5, "Microphone"], [7, "Toothpaste"]].
Roxroy
@roxroy
Apr 04 2017 14:40
@mrAitai , Cats galore. Once suggestion, move your <link tag to the codepen Settings section. Nice scrolling effect using JS. Good.
Tom
@moT01
Apr 04 2017 14:42
@AfamO any code to go with it?
Okonkwo Afam
@AfamO
Apr 04 2017 14:42
Sure

Here is the code. It is quite long::
function updateInventory(arr1, arr2) {
// All inventory must be accounted for or you're fired!
console.log("Initial Inventory=="+arr1+" and "+arr2);
if(arr1.length===0)
{
arr1=arr2;
}
else if(arr2.length===0)
{

    }

else
{
for(var i=0;i<arr2.length;i++)
{
var rightInventoryEntry=arr2[i];
var id=rightInventoryEntry[0];
var rightItem=rightInventoryEntry[1];
var counter=0;
//Start inner loop
for(var j=0;j<arr1.length;j++)
{
var leftInventoryEntry=arr1[j];
var leftItem=leftInventoryEntry[1];
var index=leftItem.indexOf(rightItem);
console.log("At "+i+" Left Item= "+leftItem+" While Right Item ="+rightItem);
if(leftItem===rightItem)
{

              console.log(rightInventoryEntry+" found in "+arr1);
              leftInventoryEntry[0]=id;//Overwrite the Id
              leftInventoryEntry[1]=rightItem;//Overwrite the item              
              arr1[j]=leftInventoryEntry;
              index=getIndex(arr1,rightItem);
              console.log("IndexOf "+rightInventoryEntry+"="+index);
              if(index===-1)
                {
                   arr1[j]=rightInventoryEntry;
                   //if this inventory is not already there?
                }
               else
                 {

                    console.log(rightInventoryEntry+" IT IS ALREADY HERE");
                 }

          }
          else
          {
             counter++;
             if(counter==arr1.length)//Has it finished looping and found no march, then add it
               {
                  arr1.push(rightInventoryEntry);
                  console.log(rightInventoryEntry+" not found in "+arr1+" added  it to"+rightInventoryEntry);
               }

          }

    }//End inner loop
 }//End Outer Loop
}

console.log("Final Inventory=="+arr1);
var sortedArr=arr1.sort(sortMe);
arr1.sort(function(a, b) { return (a[1] < b[1] ? -1 : (a[1] > b[1] ? 1 : 0)); });
console.log("Sorted Inventory=="+arr1);
return arr1;
}

// Example inventory lists
var curInv = [
[21, "Bowling Ball"],
[2, "Dirty Sock"],
[1, "Hair Pin"],
[5, "Microphone"]
];

var newInv = [
[2, "Hair Pin"],
[3, "Half-Eaten Apple"],
[67, "Bowling Ball"],
[7, "Toothpaste"]
];
function getIndex(arr,item)
{
var index=-1;
for(var i=0;i<arr.length;i++)
{
var rightInventoryEntry=arr[i];
if(rightInventoryEntry[1]===item)
{
index=i;
break;
}
}
return index;

}
updateInventory(curInv, newInv);

Tom
@moT01
Apr 04 2017 14:45
click the edit button at the top right of your message, and format it so we can read it
there's a little button at the bottom right with an M and a down arrow, shows you how to format
Okonkwo Afam
@AfamO
Apr 04 2017 14:47
Ok @moT01
Thank you
CamperBot
@camperbot
Apr 04 2017 14:47
afamo sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 607 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Apr 04 2017 14:50
just needs three ` at the top and bottom of the code
mrAitai
@mrAitai
Apr 04 2017 14:51
@moT01 Thanks
CamperBot
@camperbot
Apr 04 2017 14:51
mraitai sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 608 | @mot01 |http://www.freecodecamp.com/mot01
drowningpool5
@drowningpool5
Apr 04 2017 15:15
Did anyone here make promodoro clock yet, and would be willing to give me some hints on how to get started with the project? :D
Aravind Reddy
@aravind1078
Apr 04 2017 15:17
how to link my random quote generator with twitter
to post the tweet
can someone tell me why I'm getting this error for my call to the weather api?
it gives me this error. i registered... but i'm not sure what to do with the key once I'm registered
AbradolfLinclr
@AbradolfLinclr
Apr 04 2017 15:32
?
Tom
@moT01
Apr 04 2017 15:33
@drowningpool5 i like to start with functionality, ...could make a button that just says play and when you hit it some timer goes at 1 second intervals
Jorge
@OrangeKulture
Apr 04 2017 15:33
hey guys
@aravind1078 https://twitter.com/intent/tweet/?text=" + quote + " " + author --- my code
@OrangeKulture hey
@AbradolfLinclr the key needs to go at the end of the url i think
might have an example in their docs
Roxroy
@roxroy
Apr 04 2017 15:37
@AbradolfLinclr , $.getJSON(weatherAPI) should be $.getJSON(weatherURL)
Tom
@moT01
Apr 04 2017 15:37
or if you use an ajax call you can put it in as one of its parameters i think, ...i would go the first way
AbradolfLinclr
@AbradolfLinclr
Apr 04 2017 15:40
@moT01 thank you! got it!
CamperBot
@camperbot
Apr 04 2017 15:40
abradolflinclr sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 609 | @mot01 |http://www.freecodecamp.com/mot01
AbradolfLinclr
@AbradolfLinclr
Apr 04 2017 15:40
@moT01 i figured it was at the end but i didn't know the format
Tom
@moT01
Apr 04 2017 15:44
there ya go
Gulsvi
@gulsvi
Apr 04 2017 15:55
@aravind1078 Here are the instructions on setting up a URL to send a tweet: https://dev.twitter.com/web/tweet-button/web-intent. The text you send needs to be encoded, which is a part of the challenge in figuring out how to send the tweet. :)
DmitriiVacula
@DmitriiVacula
Apr 04 2017 15:55
Can someone tell me please how do I make a png image resize to different windows sizes? Just when I resize the browser window the image doesn't resize with the page. Please help
Jorge
@OrangeKulture
Apr 04 2017 15:56
@DmitriiVacula replied on the other chat i think ...
@DmitriiVacula u talking about browser window size .. or ?
DmitriiVacula
@DmitriiVacula
Apr 04 2017 15:57
@OrangeKulture I mean when I make the browser window smaller (let's say half of my monitor) the image stays the same size
AbradolfLinclr
@AbradolfLinclr
Apr 04 2017 15:57
http://codepen.io/Abradolf_Linclr/pen/NpobbZ?editors=1111 ... how would you go about debugging this to see why my getJSON isnt making the correct call?
Gulsvi
@gulsvi
Apr 04 2017 15:57

@DmitriiVacula In bootstrap 3, use the img-responsive class, in bootstrap 4 use img-fluid. With plain CSS, it's:

img {
  max-width: 100%;
}

^^ That code will make the image always 100% of the width of it's outer container

Jorge
@OrangeKulture
Apr 04 2017 15:58
@DmitriiVacula yeah img-responsive should work or 100% width
DmitriiVacula
@DmitriiVacula
Apr 04 2017 15:59
@SkyCoder01 let me try @OrangeKulture
drowningpool5
@drowningpool5
Apr 04 2017 15:59
@moT01 ty
CamperBot
@camperbot
Apr 04 2017 15:59
drowningpool5 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 610 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Apr 04 2017 15:59
@AbradolfLinclr you could start by making a url manually, and going to it to see if you get the info you want
Gulsvi
@gulsvi
Apr 04 2017 16:00
@AbradolfLinclr That's a tough one - because debugging tools will only tell you that it's a 404 error, but when you open the link in your browser manually, it will work fine.
Tom
@moT01
Apr 04 2017 16:00
if that work, plug it into the getJSON and see if itll work there
Gulsvi
@gulsvi
Apr 04 2017 16:00
Your browser adds http:// to the front of a URL if it's missing, getJSON doesn't
DmitriiVacula
@DmitriiVacula
Apr 04 2017 16:00
@SkyCoder01 @OrangeKulture worked like magic THANKS
CamperBot
@camperbot
Apr 04 2017 16:00
dmitriivacula sends brownie points to @skycoder01 and @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 253 | @orangekulture |http://www.freecodecamp.com/orangekulture
:cookie: 855 | @skycoder01 |http://www.freecodecamp.com/skycoder01
AbradolfLinclr
@AbradolfLinclr
Apr 04 2017 16:00
@moT01 my link works in a http not secured
and i think that's what I already attempted to do
.weather is part of the object they gave me
Jorge
@OrangeKulture
Apr 04 2017 16:01
can i get brownies with my brownie points?
AbradolfLinclr
@AbradolfLinclr
Apr 04 2017 16:02
@SkyCoder01 so where do i start?
Gulsvi
@gulsvi
Apr 04 2017 16:02
@AbradolfLinclr I think this is one of those errors that comes with experience, like finding why a variable is undefined because you forgot the var keyword
You would start with Ctrl+Shift+J - open the debugging console in your browser
You would see the URL does not start with http://
From hitting that issue in the past, you would then go "oh yea!" I need to put http:// in front of the URL, getJSON needs that :)
Then you would change your code to use http://
var weatherURL = "http://api.openweathermap.org/data/2.5/weather?lat=" +
AbradolfLinclr
@AbradolfLinclr
Apr 04 2017 16:06
ahhh I think I can take it from here again! thanks as always... the debugging console in the browser is a huge part i overlooked
Gulsvi
@gulsvi
Apr 04 2017 16:07
Yeah, the debug console is much better than codepen's console sometimes.
h1tag
@h1tag
Apr 04 2017 16:07
most of the time
Gulsvi
@gulsvi
Apr 04 2017 16:07
@AbradolfLinclr Another thing you can do is add a .fail() function to your getJSON for better logging:
  $.getJSON(weatherURL).done(function(data){
        console.log(data.weather);
  }).fail(console.error);
That would have just told you the same though: 404, not found
AbradolfLinclr
@AbradolfLinclr
Apr 04 2017 16:09
oh alright. very nice!
im excited finally get to do the fun stuff lol
DmitriiVacula
@DmitriiVacula
Apr 04 2017 16:26
Can someone tell me please how to align perfectly in the center (equal margin left right touching the main border) the 3 animal images on this website http://dmitriivacula.uphero.com/days/day7/animalplanet.html ?
Aravind Reddy
@aravind1078
Apr 04 2017 16:26
@SkyCoder01 how to tweet my quote i tried everything but by clicking its not even opening the external link
Gulsvi
@gulsvi
Apr 04 2017 16:26
@aravind1078 If you are in codepen, you will have to use target="_blank" on your URL to open it in a new tab
Aravind Reddy
@aravind1078
Apr 04 2017 16:26
i alreaady did
Gulsvi
@gulsvi
Apr 04 2017 16:27
Can you share your code?
I don't know what else the problem would be without seeing the code unfortunately, if you followed the instructions at the link I gave
Aravind Reddy
@aravind1078
Apr 04 2017 16:27
<a class="button btn tweet-q quote-btn " id="tweet-quote" title="Tweet this quote" target="_blank">
Gulsvi
@gulsvi
Apr 04 2017 16:28
@aravind1078 where is your href=?
Aravind Reddy
@aravind1078
Apr 04 2017 16:28
iam using
jquery
on click
h1tag
@h1tag
Apr 04 2017 16:29
@aravind1078 share the pen url (copy it from the address bar)
Jorge
@OrangeKulture
Apr 04 2017 16:29
@DmitriiVacula You have to use margins, most likely (haven't looked at the code). You can align center all elements from the parent element.
Gulsvi
@gulsvi
Apr 04 2017 16:29
@aravind1078 If you have a codepen, share the URL of your codepen, or share your jQuery code too
Ene Catalin
@EneCatalin
Apr 04 2017 16:31
hey guys, I am trying to make bootstraps active effect work when I hover over a menu item. I already made the dropdown item drop and let me select the items but I also want it to have the look it gets when you click on it if you get what I mean
so, is there an easy way to do this ( google keeps sending me to ways of editing the way bootstrap looks if you click on it which doesn't matter to me)
Aravind Reddy
@aravind1078
Apr 04 2017 16:32
@SkyCoder01 $(document).ready(function(){
$("#tweet-quote").click(function(){
location.href = "https://twitter.com/intent/tweet/?text=";
});
});
Gulsvi
@gulsvi
Apr 04 2017 16:33
@aravind1078 You should add the href attribute to your URL when you click the quote button, not the tweet button. The tweet button is already a clickable link, so no click function is needed. Here are some instructions for adding the href attribute to your URL with jQuery using the attr() method: http://stackoverflow.com/questions/179713/how-to-change-the-href-for-a-hyperlink-using-jquery
Jorge
@OrangeKulture
Apr 04 2017 16:33
@DmitriiVacula i would suggest not using the row cols at first while you do your markup, specially if you are using only the col-md, although this is just a personal preference.
Gulsvi
@gulsvi
Apr 04 2017 16:36
@EneCatalin If you want an element to look different when you hover, you can use the :hover pseudo class. If you want to change the look of it when it is active, you can use the :focus pseudo class, or use JavaScript to add a class that applies a certain style. https://www.w3schools.com/css/css_pseudo_classes.asp. Not sure if that answers your question! If not, share your codepen and maybe give an example of steps and results.
Ene Catalin
@EneCatalin
Apr 04 2017 16:37
no, I mean with bootstrap, is it ok if I post a pic with my project ?
Gulsvi
@gulsvi
Apr 04 2017 16:37
Sure, I'm having trouble visualizing what you need :) so a picture would help
DmitriiVacula
@DmitriiVacula
Apr 04 2017 16:37
@OrangeKulture @SkyCoder01 so can you tell me please how to center the 3 images?
Ene Catalin
@EneCatalin
Apr 04 2017 16:37
blob
Jorge
@OrangeKulture
Apr 04 2017 16:37
@DmitriiVacula I would delete all of the meta data, to begin with .. you can include that in the 'Settings > HTML'
PedroCSilva
@PedroCSilva
Apr 04 2017 16:37
Hello! I have 25 free minutes to help :D
Ene Catalin
@EneCatalin
Apr 04 2017 16:37
so I want to make that happen when I hover over it, not click
I am using bootstrap
DmitriiVacula
@DmitriiVacula
Apr 04 2017 16:38
@OrangeKulture I'm writing the code on atom not codepen
Ene Catalin
@EneCatalin
Apr 04 2017 16:38
I can even give you the site I am trying to copy to get a better idea if it's still not clear :D
Gulsvi
@gulsvi
Apr 04 2017 16:38
@EneCatalin You can do that with the :hover pseudo class. Right-click the element when it is active and click "Inspect", you can then study the CSS that it uses. Apply that same CSS on :hover in your CSS.
Jorge
@OrangeKulture
Apr 04 2017 16:39
@DmitriiVacula ahh ok sorry, at first glance, I would change margins on container to margin: 20px auto;
Ene Catalin
@EneCatalin
Apr 04 2017 16:39
ohhhhhhhhhh
Jorge
@OrangeKulture
Apr 04 2017 16:39
@DmitriiVacula give me a sec to try out your code
Ene Catalin
@EneCatalin
Apr 04 2017 16:39
right, makes sense, thanks I will go try it out
Gulsvi
@gulsvi
Apr 04 2017 16:39
@EneCatalin Like this (as a basic example):
.nav-link:hover {
  background-color: gray;
}
of course, use the right class name and color :)
Ene Catalin
@EneCatalin
Apr 04 2017 16:39
I actually like the one bootstrap uses for the effect :D
Gulsvi
@gulsvi
Apr 04 2017 16:41
@DmitriiVacula Add the center-block class to your images to center them.
for example:
<img src="images/giraffes.png" alt="Cute Giraffes" class="img-responsive center-block" id="giraffes">
Jorge
@OrangeKulture
Apr 04 2017 16:42
@OrangeKulture yeah.. the row is also giving margin to the right, the center block class will do it
*left
DmitriiVacula
@DmitriiVacula
Apr 04 2017 16:43
@SkyCoder01 added and they changed but still unequal margin left and right
Aravind Reddy
@aravind1078
Apr 04 2017 16:43
@SkyCoder01 ok i did this
<a href="https://twitter.com/intent/tweet/?text="class="button btn input-group-button quote-btn " id="tweet-quote" title="Tweet this quote!" target="_blank">
now
i need to add my quote to the text
what to do
Ene Catalin
@EneCatalin
Apr 04 2017 16:44
ok I managed to do it thanks a ton :D
Gulsvi
@gulsvi
Apr 04 2017 16:44
no problem, glad you got it @EneCatalin :)
@aravind1078 Use the .attr() method in jQuery to add text to that href value. They show you how to use .attr() in jQuery here: http://stackoverflow.com/questions/179713/how-to-change-the-href-for-a-hyperlink-using-jquery
@DmitriiVacula I think I'd need to see the actual pictures, it's hard to debug when the images don't work. Can you update your pen with the full link to the images?
Sometimes you can debug issues like this by putting a border around everything in your page:
* {
  border: 1px solid black;
}
Jorge
@OrangeKulture
Apr 04 2017 16:46
yeah it's hard without the actual images
DmitriiVacula
@DmitriiVacula
Apr 04 2017 16:47
@SkyCoder01 @OrangeKulture SORRY guys just added center block to just two images not all 3, added to all 3 and worked A HUGE HUG FROM ME AND THANKS A LOT !
CamperBot
@camperbot
Apr 04 2017 16:47
dmitriivacula sends brownie points to @skycoder01 and @orangekulture :sparkles: :thumbsup: :sparkles:
:warning: dmitriivacula already gave orangekulture points
:warning: dmitriivacula already gave skycoder01 points
Gulsvi
@gulsvi
Apr 04 2017 16:47
:)
Jorge
@OrangeKulture
Apr 04 2017 16:48
awesome stuff! i think it was mostly Sky, can't take credit :(
Gulsvi
@gulsvi
Apr 04 2017 16:48
Well, neither of us get brownies anyway, so just pat ourselves on the back :)
Jorge
@OrangeKulture
Apr 04 2017 16:50
Maan .. im not really sure calling brownie points is a good idea .. ever since I started coding here i've been craving brownies so bad
Gulsvi
@gulsvi
Apr 04 2017 16:51
haha, they should be called karma like on reddit or something not related to food
Chadwick
@chadwickdx
Apr 04 2017 16:53
hello guts, a question , how i put my code pen in the freecode camp? wuere is the option for take my code pen
ty
Jorge
@OrangeKulture
Apr 04 2017 16:53
yeah, for sure! I mean, I don't have a problem eating brownies, I have a problem with having to drive somewhere to get them .. im lazy like that
Gulsvi
@gulsvi
Apr 04 2017 16:53
lol
Aravind Reddy
@aravind1078
Apr 04 2017 16:53
i changed but not wroking
Jorge
@OrangeKulture
Apr 04 2017 16:54
@chadwickdx include your URL
Chadwick
@chadwickdx
Apr 04 2017 16:54
ty man
Gulsvi
@gulsvi
Apr 04 2017 16:56

@aravind1078 Here's a simple example.
Let's say I want to add https://google.com to my link. My HTML is:

<a target="_blank" id="google-link">Google</a>

My jQuery would be:

$('#google-link').attr('href', 'https://google.com')
Aravind Reddy
@aravind1078
Apr 04 2017 16:57
yaa but i need to add my qoute to it how to do that
@SkyCoder01
Gulsvi
@gulsvi
Apr 04 2017 16:58
@aravind1078 You can use a variable in place of https://google.com in the code above
var url = 'https://google.com/' + searchTerm;
$('#google-link').attr('href', url);
Trying to give example to help you figure it out instead of giving you the answer. Hope it's helping :/
Jorge
@OrangeKulture
Apr 04 2017 16:59
@chadwickdx sure thing!
Aravind Reddy
@aravind1078
Apr 04 2017 16:59
@SkyCoder01 your trying to teach me somthing iam glad you are not getting irritated but still tring to help me thank a lot man
CamperBot
@camperbot
Apr 04 2017 16:59
aravind1078 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 856 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Aravind Reddy
@aravind1078
Apr 04 2017 17:00
thanks a lot @SkyCoder01
CamperBot
@camperbot
Apr 04 2017 17:00
aravind1078 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: aravind1078 already gave skycoder01 points
Gulsvi
@gulsvi
Apr 04 2017 17:01

No problem, I'd rather help you figure it out than just give you the answer :)
99% of the info you need to get the URL working is at:

The rest comes from the JavaScript you learned in the exercises leading up to this project. Sometimes it's hard to put it all together

Jorge
@OrangeKulture
Apr 04 2017 17:10
this ROT13 Cipher challenge sure is a lot of fun!
Aravind Reddy
@aravind1078
Apr 04 2017 17:11
@SkyCoder01
var url1='https://twitter.com/intent/tweet/?text='+arr[ran]+" "+auth[ran];
$('.tweet-quote').attr('href',url1);
i did this
is there anything wrong
Jordy
@JordyDew
Apr 04 2017 17:12
Hi again. Is it possible to skip the challenges about Bootstrap, because of my blindness? They're accessible to do, but I'll never use bootstrap...
Gulsvi
@gulsvi
Apr 04 2017 17:13
@aravind1078 That's close, try adding a console.log() to debug. You will be able to copy/paste the URL from the console and try to open the link manually:
var url1='https://twitter.com/intent/tweet/?text='+arr[ran]+" "+auth[ran];
console.log(url1);
$('.tweet-quote').attr('href',url1);
What you have should work as long as your arr[ran] and auth[ran] variables are in scope
@JordyDew Yes, you can skip bootstrap. They are all optional. The only required challenges have an asterisk at the end of the name *
Aravind Reddy
@aravind1078
Apr 04 2017 17:18
@SkyCoder01 i did but nothing showing up on the screen
Gulsvi
@gulsvi
Apr 04 2017 17:20
@aravind1078 There's one small bug in your code. tweet-quote is an ID, but you have a . in front of it in your jQuery.
Change that and your link will work :)
Jordy
@JordyDew
Apr 04 2017 17:21

SkyCoder01 Thanks! Could you give one example of a required challenge, please?

Aravind Reddy
@aravind1078
Apr 04 2017 17:21
ohhh god it haunted me
thanks @SkyCoder01
CamperBot
@camperbot
Apr 04 2017 17:22
aravind1078 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: aravind1078 already gave skycoder01 points
Aravind Reddy
@aravind1078
Apr 04 2017 17:22
you saved me today thanks a lot man
@SkyCoder01
Gulsvi
@gulsvi
Apr 04 2017 17:23
@JordyDew You're welcome. One example is: Reverse a String *
@aravind1078 You're welcome! Glad to help :)
Jorge
@OrangeKulture
Apr 04 2017 17:24
Any of you guys finished the basic algorithm scripts yet?
Aravind Reddy
@aravind1078
Apr 04 2017 17:24
yeah i did @OrangeKulture
drowningpool5
@drowningpool5
Apr 04 2017 17:24
Hi guys, why nerd is not equal to two? :)
var lol = 25;
var num = $("#display2");
var nerd = 1;

if (nerd === 1) {
  $("#circle").on("click", function() {
      nerd++;
      window.setInterval(function() {
        lol -= 1;
        num.html(lol);
  }, 1000);
  });
}
console.log(nerd);
Jordy
@JordyDew
Apr 04 2017 17:24
Thank you, @SkyCoder01 !!!
CamperBot
@camperbot
Apr 04 2017 17:24
jordydew sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 857 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Jorge
@OrangeKulture
Apr 04 2017 17:25
@aravind1078 how did you log the space " "?
ahh duuh
i think i got it
nope i dont
Jason
@jasonetaylor
Apr 04 2017 17:25
@drowningpool5 because you will need to increment nerd in the loop. nerd++
Gulsvi
@gulsvi
Apr 04 2017 17:25
@JordyDew This link lists all the challenges: https://www.freecodecamp.com/map
The required ones are in the sections: "Basic Front End Development Projects", "Basic Algorithm Scripting", "Intermediate Front End Development Projects", "Intermediate Algorithm Scripting", and "Advanced Front End Development Projects"
Good luck!
Aravind Reddy
@aravind1078
Apr 04 2017 17:26
@OrangeKulture what question you are taking about
Jason
@jasonetaylor
Apr 04 2017 17:26
@drowningpool5 oops, i looked right over your incrementing nerd. Let me take a second look
Jorge
@OrangeKulture
Apr 04 2017 17:26
I think Sky is having a brownie party today
drowningpool5
@drowningpool5
Apr 04 2017 17:26
@jasonetaylor okay, np :)
Gulsvi
@gulsvi
Apr 04 2017 17:26
lol, going to get that free trip to vegas
Jorge
@OrangeKulture
Apr 04 2017 17:27
@aravind1078 lol sorry .. yeah that was vague, to say the least, sorry. The Cipher challenge
free trip to vegas? whut? @SkyCoder01
Gulsvi
@gulsvi
Apr 04 2017 17:27
I'm just kidding, brownie points are worthless lol @OrangeKulture
Would be nice if we could at least use them to get a laptop sticker or something.
Jorge
@OrangeKulture
Apr 04 2017 17:28
yeah i know .. i was just hoping you'd say something like: " yeah going to vegas! wanna come with? " @SkyCoder01
Gulsvi
@gulsvi
Apr 04 2017 17:28
You know, free services giving us stuff for free :p ... my world....
haha
gulptech
@gulptech
Apr 04 2017 17:29
@drowningpool5 you console.log before you click. the circle :)
Jason
@jasonetaylor
Apr 04 2017 17:29
@drowningpool5 it’s probably because you have the click event wrapper in the if. Do you want it to incremenet nerd by 1 each time the button is clicked?
Jorge
@OrangeKulture
Apr 04 2017 17:30
so on the Cipher challenge, for anyone else reading .. i pass the coded string, i.e "SERR PBQR PNZC" which would be "FREE CODE CAMP" .. im able to return "FREECODECAMP"
drowningpool5
@drowningpool5
Apr 04 2017 17:30
@jasonetaylor yes
@gulptech hmmm, ye makes sense :)
Aravind Reddy
@aravind1078
Apr 04 2017 17:30
@OrangeKulture
String.prototype.charCodeAt()
String.fromCharCode()
gulptech
@gulptech
Apr 04 2017 17:30
which is why it logs 1
Keon Samuel
@keonsam
Apr 04 2017 17:31
hey Jason I have been trying a couple different function to try filter my list for a while now. Can you point me in the right direction?
@jasonetaylor
Aravind Reddy
@aravind1078
Apr 04 2017 17:31
@OrangeKulture
String.prototype.charCodeAt()
String.fromCharCode()
these
will help
go through them
Jason
@jasonetaylor
Apr 04 2017 17:32
@keonsam Keon, did the codepen i sent back make sense? Does it not do what you are looking to do?
Jorge
@OrangeKulture
Apr 04 2017 17:32
yeah im aware of the string built ins .. im just not sure how to get the space onto the array which will then be converted to a string
Keon Samuel
@keonsam
Apr 04 2017 17:32
I didn't see it probably afk
drowningpool5
@drowningpool5
Apr 04 2017 17:33
@gulptech @jasonetaylor thanks guys :)
CamperBot
@camperbot
Apr 04 2017 17:33
drowningpool5 sends brownie points to @gulptech and @jasonetaylor :sparkles: :thumbsup: :sparkles:
:cookie: 176 | @jasonetaylor |http://www.freecodecamp.com/jasonetaylor
:cookie: 230 | @gulptech |http://www.freecodecamp.com/gulptech
Jason
@jasonetaylor
Apr 04 2017 17:34
@drowningpool5 did you get it working?
Keon Samuel
@keonsam
Apr 04 2017 17:35
@jasonetaylor what do you suggest using .filter()?
Jason
@jasonetaylor
Apr 04 2017 17:37
@keonsam oh ok. I didn’t realize you meant specifically with the filter method. Let me update the codepen and repost it
drowningpool5
@drowningpool5
Apr 04 2017 17:37
@jasonetaylor it was working all along, i just misplaced the console.log()
Jason
@jasonetaylor
Apr 04 2017 17:37
@drowningpool5 ok cool. I thought maybe it was getting caught up in the if wrapper
drowningpool5
@drowningpool5
Apr 04 2017 17:38
@jasonetaylor ye true
@jasonetaylor could be a possible problem aswell yes
Keon Samuel
@keonsam
Apr 04 2017 17:44
@jasonetaylor thanks bro
CamperBot
@camperbot
Apr 04 2017 17:44
keonsam sends brownie points to @jasonetaylor :sparkles: :thumbsup: :sparkles:
:cookie: 177 | @jasonetaylor |http://www.freecodecamp.com/jasonetaylor
Jason
@jasonetaylor
Apr 04 2017 17:45
@keonsam no problem. There’s a few different ways you could do this but I just piggy-backed off of what I previously wrote. In this example, the .filter method is not even necessary but it works this was as well.
jmgumina
@jmgumina
Apr 04 2017 17:46
Hi all, i am working on the Random quote generator and i cannot get my buttons to work. The reTweet Button will not take you to an external page. http://codepen.io/jNewbie/pen/rybBoL/
Any help would be appreciated, thank you
Keon Samuel
@keonsam
Apr 04 2017 17:46
I got to figure out that complex coding
CritterForDinner
@CritterForDinner
Apr 04 2017 17:47
anyone have any experience with bootstraps scrollspy? I'm having trouble with my nav elements lighting up when I scroll to the diff sections
Keon Samuel
@keonsam
Apr 04 2017 17:47
I think the only thing there that I don't fully understand yet is the "this".
Gulsvi
@gulsvi
Apr 04 2017 17:48
@CritterForDinner Yeah, do you have a codepen link by chance?
@keonsam It might be easier to add the status as a class rather than in a custom data attribute. Then you can do:
  $('#offline').on('click', () => {
    $('.offline').show();
    $('.online, .closed').hide();
  });
Jason
@jasonetaylor
Apr 04 2017 17:48
@keonsam i just updated the transition to fade instead of hide/show as well.
CritterForDinner
@CritterForDinner
Apr 04 2017 17:48
Jason
@jasonetaylor
Apr 04 2017 17:49
@SkyCoder01 yep, you could do a class instead. Whatever approach you prefer.
@keonsam it’s not too complex really. I can update with comments explaining whats going on if it’ll help
Gulsvi
@gulsvi
Apr 04 2017 17:50
@CritterForDinner Scrollspy needs to be initialized, I don't see any javascript in your pen. Let me see if that's the only issue
Aravind Reddy
@aravind1078
Apr 04 2017 17:54
@OrangeKulture you dont need to add sapce inside array elements you can afterwards add sapce like
str1+=str2+" "+str3;
Jason
@jasonetaylor
Apr 04 2017 17:57
@keonsam I added comments in the JS.
Keon Samuel
@keonsam
Apr 04 2017 17:58
@jasonetaylor cool thanks
CamperBot
@camperbot
Apr 04 2017 17:58
keonsam sends brownie points to @jasonetaylor :sparkles: :thumbsup: :sparkles:
:warning: keonsam already gave jasonetaylor points
Gulsvi
@gulsvi
Apr 04 2017 17:59

@CritterForDinner A few changes needed. dataspy should be data-spy:

  <body id="about" data-spy="scroll" data-target=".nav">

You need to initialize scrollspy:

$(document).ready(function() {
  $('body').scrollspy({target: '.nav'});
});

And you need to style your active navbar links in your css, for example:

.active {
  background-color: white;
}
Jason
@jasonetaylor
Apr 04 2017 18:00
@keonsam $(this) is always the context. There are three buttons. When I click one, I want that specific button to set the variable to the buttons data attribute value.
Keon Samuel
@keonsam
Apr 04 2017 18:02
oh that is the reason for the button id cool
Jason
@jasonetaylor
Apr 04 2017 18:02
@SkyCoder01 I haven’t tried using newer JS syntax in codepen. Is it natively supported or do you have to select ES2015/2016/etc..?
Gulsvi
@gulsvi
Apr 04 2017 18:03
@jasonetaylor I think arrow functions work now without transpiling. I use babel as a preprocessor though, just to be safe.
Jason
@jasonetaylor
Apr 04 2017 18:03
@keonsam yep. I added the ID in the html. It’s about creating hooks.
@SkyCoder01 ok thanks!
CamperBot
@camperbot
Apr 04 2017 18:03
jasonetaylor sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 858 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Jason
@jasonetaylor
Apr 04 2017 18:04
@keonsam let me know if you need me to explain any further. I’d rather you walk away understanding rather than just having it done.
Gulsvi
@gulsvi
Apr 04 2017 18:04
Actually, in my twitch project, I just realized I'm not using a preprocessor and it has been working fine for me in Firefox/Chrome.
gulptech
@gulptech
Apr 04 2017 18:05
@SkyCoder01 javascript initialization of data-spy it not needed in this case since the data-target is included.
CritterForDinner
@CritterForDinner
Apr 04 2017 18:06
@SkyCoder01 Thanks. Thats exactly the fix I needed.
CamperBot
@camperbot
Apr 04 2017 18:06
critterfordinner sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 859 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 04 2017 18:06
@CritterForDinner It looks like you may not need the JavaScript according to @gulptech
gulptech
@gulptech
Apr 04 2017 18:06
the only issue was the data-spy instead of dataspy
Jason
@jasonetaylor
Apr 04 2017 18:06
good to know @SkyCoder01 I’m assuming they have it worked in now w/o needing Babel.
Only broken in IE11 and Opera Mini, old versions of iOS and Android
Jason
@jasonetaylor
Apr 04 2017 18:08
downside, if your user base uses <IE11, your age breaks… ugh
page, not age lol
Gulsvi
@gulsvi
Apr 04 2017 18:08
Both :)
Jason
@jasonetaylor
Apr 04 2017 18:08
lol
CritterForDinner
@CritterForDinner
Apr 04 2017 18:26
@SkyCoder01 @gulptech yep, its working without the JavaScript. Thanks.
CamperBot
@camperbot
Apr 04 2017 18:26
critterfordinner sends brownie points to @skycoder01 and @gulptech :sparkles: :thumbsup: :sparkles:
:warning: critterfordinner already gave skycoder01 points
:cookie: 231 | @gulptech |http://www.freecodecamp.com/gulptech
Jorge
@OrangeKulture
Apr 04 2017 18:51
hey guys .. whats the difference between $('#myTag').on('click',function(){}) and $('#myTag').click(function(){});
is it just the JS ES version .. or ?
im used to using the 2nd one
Johnathon Sykes
@seesykescode
Apr 04 2017 18:57

Question on weather app: what API’s are everyone using? OpenWeatherAPi seems to be blocked on codepen (and doesn’t work for me locally, assuming that’s CORS in the way) and Wunderground doesn’t seem to have an easy way of grabbing weather by coordinates.

Any suggestions?

@OrangeKulture There’s no functional difference. “.on” uses less memory, I believe...
Jorge
@OrangeKulture
Apr 04 2017 18:59
how come @SkyCoder01 has the nice background and code indentation and mine sucks? :S
@johndsykes86 thanks a lot !
CamperBot
@camperbot
Apr 04 2017 18:59
orangekulture sends brownie points to @johndsykes86 :sparkles: :thumbsup: :sparkles:
:cookie: 255 | @johndsykes86 |http://www.freecodecamp.com/johndsykes86
Johnathon Sykes
@seesykescode
Apr 04 2017 18:59
you’re welcome :)
Gulsvi
@gulsvi
Apr 04 2017 19:00
I read somewhere that they changed how events get binded so they started recommending to use .on() whenever possible
like $('selector').load() doesn't work anymore, so you have to use .on('load'), along with some other examples
Jorge
@OrangeKulture
Apr 04 2017 19:01
@SkyCoder01 ahh ok ! gotcha .. thanks !
CamperBot
@camperbot
Apr 04 2017 19:01
orangekulture sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 860 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Jorge
@OrangeKulture
Apr 04 2017 19:01
dammit .. i wanted that brownie for myself :D
Gulsvi
@gulsvi
Apr 04 2017 19:02
haha :)
Jorge
@OrangeKulture
Apr 04 2017 19:03
j/k appreciate the help
Jason
@jasonetaylor
Apr 04 2017 19:03
@SkyCoder01 Yep, jQuery updated the binding awhile ago. You can still use .bind(), .click() if you are using jquery v1.x but It might be completely gone in version 2 and higher.
@johndsykes86 did you try openweatherapi with jsonp rather json as the data type?
@SkyCoder01 your twitch page looks good!
Gulsvi
@gulsvi
Apr 04 2017 19:07
Thanks! Still some improvements to be made though :) always, with code I guess :p
I think with .on it also makes it easier to attach multiple events, like $('#myTag').on('click touchstart', .....
Jorge
@OrangeKulture
Apr 04 2017 19:10
@SkyCoder01 definitely makes sense for multiple events, awesome stuff !
Jason
@jasonetaylor
Apr 04 2017 19:13
agreed
Isan Bothra
@isanbothra
Apr 04 2017 19:16
not able to set text-decoration property to none... any suggestion??
how to set image alignment using bootstrap 4??
Jason
@jasonetaylor
Apr 04 2017 19:18
text-decoration:none!important
@isanbothra do you have some code we can look at in a codepen or something? It’s hard to help without seeing what might be causing an issue
Jordy
@JordyDew
Apr 04 2017 19:20
I am here for the third time, today :-) This time with a strange question:
What is a "tribute page"?
a stupid question, but I really don't know.
Jason
@jasonetaylor
Apr 04 2017 19:21
@JordyDew It’s just something you would like to showcase. I did mine on the company Kentucky Fried Chicken. lol. It can be whatever you want.
Jorge
@OrangeKulture
Apr 04 2017 19:22
@jasonetaylor KFC lol awesome! now i wanna take a loot at it
I wish we could open the FCC profile rather than the github profile from the chat n forums ..
Jason
@jasonetaylor
Apr 04 2017 19:23
I’ll post the link however KFC.com removed some of the images I was using. I just pulled them from their servers ..so..oops : http://codepen.io/mrjasonetaylor/pen/NNmLbw
Jorge
@OrangeKulture
Apr 04 2017 19:24
@jasonetaylor ohh that sucks for the images
Jason
@jasonetaylor
Apr 04 2017 19:24
yeah, the cached view still shows them but if you go to codepen they are gone…oh well
Jorge
@OrangeKulture
Apr 04 2017 19:24
ohh yah the first images are gone .. how dare they. Looks awesome tho !
Jason
@jasonetaylor
Apr 04 2017 19:24
looked better with the big plate of chicken.. lol.. thanks tho
Jorge
@OrangeKulture
Apr 04 2017 19:26
definitely .. im glad i stay in shape, this FCC has given me a lot of cravings, mostly brownies :S now im reaaally thinking about some getting some chicken !
i should avoid coding in here while hungry
Isan Bothra
@isanbothra
Apr 04 2017 19:26
@jasonetaylor have a look at it:
Jason
@jasonetaylor
Apr 04 2017 19:26
lol, how funny
Jason
@jasonetaylor
Apr 04 2017 19:30
@isanbothra I would try to avoid inline styles if you are going to use bootstrap. You’ll just end up fighting with the framework. What isn’t aligned how you want it? I’m not sure what it’s supposed to look like.
gulptech
@gulptech
Apr 04 2017 19:32
who needs brownie points…now i need KFC
Isan Bothra
@isanbothra
Apr 04 2017 19:32
@jasonetaylor could you explain me what to do??
i used inline style but its not working so i am searching for any alternative to align my image. @jasonetaylor
Jason
@jasonetaylor
Apr 04 2017 19:35
@isanbothra do you want your image aligned far left and to the top or something? I guess that’s what I am after is where do you want it to sit? I assume not on the text like it currently is.
Jordy
@JordyDew
Apr 04 2017 19:35
@jasonetaylor Thanks for your explanation and your example!
CamperBot
@camperbot
Apr 04 2017 19:35
jordydew sends brownie points to @jasonetaylor :sparkles: :thumbsup: :sparkles:
:cookie: 178 | @jasonetaylor |http://www.freecodecamp.com/jasonetaylor
Jason
@jasonetaylor
Apr 04 2017 19:36
@JordyDew you’re welcome!
gulptech
@gulptech
Apr 04 2017 19:36
@jasonetaylor just for you: http://codepen.io/anon/pen/evoNmw
Isan Bothra
@isanbothra
Apr 04 2017 19:37
i want it to be aligned center when i restore my window. @jasonetaylor
Jason
@jasonetaylor
Apr 04 2017 19:37
@gulptech awesome! how’d you get the images back?
Jorge
@OrangeKulture
Apr 04 2017 19:37
I think Jason has created a snow ball effect with the whol;e KFC thing
gulptech
@gulptech
Apr 04 2017 19:37
google search using site:kfc.com :)
Jason
@jasonetaylor
Apr 04 2017 19:39
@gulptech set thanks!
CamperBot
@camperbot
Apr 04 2017 19:39
jasonetaylor sends brownie points to @gulptech :sparkles: :thumbsup: :sparkles:
:cookie: 232 | @gulptech |http://www.freecodecamp.com/gulptech
Jason
@jasonetaylor
Apr 04 2017 19:39
sweet!
i cannot type today
gulptech
@gulptech
Apr 04 2017 19:44
@isanbothra you would need to be more specific on what you are trying to accomplish. Do you want your image between both text ?
Isan Bothra
@isanbothra
Apr 04 2017 19:47
no ....by default it is aligned left i want to be aligned centered in its grid when seeing in small size window. @gulptech
gulptech
@gulptech
Apr 04 2017 19:47
@isanbothra on another note…since you are using bootstrap 4, the col-xs is now removed. You may want to change the columns to be “col-12 col-sm-4"
or just col-4 (to always be 4)
Isan Bothra
@isanbothra
Apr 04 2017 19:50
"col-md-4" is available or not??
@gulptech
KatSaldivar
@KatSaldivar
Apr 04 2017 19:51
I'm working on the roman numeral converter and running into an issue stating "TypeError: number.split() is not a function.
function convertToRoman(num) {
var number = [num];
var numberArr = number.split("");

  return numberArr;
}

convertToRoman(33);
gulptech
@gulptech
Apr 04 2017 19:51
@isanbothra col-, col-sm,col-md, col-lg are your options so yes
Isan Bothra
@isanbothra
Apr 04 2017 19:53
but still when resizing window image is getting left aligned
gulptech
@gulptech
Apr 04 2017 19:54
@isanbothra i would change your div to be col-12 not col-4
you want all 12 columns not just 4 for small screen
Isan Bothra
@isanbothra
Apr 04 2017 19:55
i am also not able to set text-decoration property to none for my name tab in navigation bar @gulptech
gulptech
@gulptech
Apr 04 2017 19:55
once you make that change add these two classes: mx-auto d-block to your image
Keon Samuel
@keonsam
Apr 04 2017 19:55
Access to Font at 'https://production-assets.codepen.io/assets/telefon/bold/af889c53-1ee3-4868…50-3-b7a87e0fbd213943fae0c0ef5985635dd43fa9c24876b2725127a13ccaf4ab6a.woff' from origin 'http://codepen.io' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://codepen.io' that is not equal to the supplied origin. Origin 'http://codepen.io' is therefore not allowed access.
Isan Bothra
@isanbothra
Apr 04 2017 19:56
yes i tried it but it is still not working out with "col-12" also @gulptech
gulptech
@gulptech
Apr 04 2017 19:58
@isanbothra show me where you have text-decoration?
@isanbothra you are still missing the 2 classes for your image
Isan Bothra
@isanbothra
Apr 04 2017 20:00
what are they?? @gulptech
gulptech
@gulptech
Apr 04 2017 20:00
once you make that change add these two classes: mx-auto d-block to your image
@SkyCoder01
Gulsvi
@gulsvi
Apr 04 2017 20:02
Oops wrong number lol
Isan Bothra
@isanbothra
Apr 04 2017 20:02
"mx-auto d-block " can you explain me what this classes will do??
Gulsvi
@gulsvi
Apr 04 2017 20:03
@KatSaldivar .split() only works on strings. When you put num in brackets as [num] it is an array.
var numberArr = num.toString().split(""); // ['3', '3']
@keonsam what's up?
Zay
@incognitonerd
Apr 04 2017 20:04
hey wuts up everyone? i just returned to fcc after not using it close to a year. i started the challenges over and i dont understand why my solution is working for link to external pages with anchor elements challenge. heres my solution: <a href="http://freecatphotoapp.com">cat photos</a>
Keon Samuel
@keonsam
Apr 04 2017 20:04
I don't know why the buttons stop working on my pen.
Gulsvi
@gulsvi
Apr 04 2017 20:05
That's some really complicated code you're using (overly complicated). Probably best to work with @jasonetaylor on that one. :)
Isan Bothra
@isanbothra
Apr 04 2017 20:05
li #mytab:hover{
background-color: #e0e0d1;
color:grey;
text-decoration: none;
}
li #mytab:visited {
text-decoration: none;
color:grey;
}
li #mytab:active {
text-decoration: none;
color:grey;
}
Gulsvi
@gulsvi
Apr 04 2017 20:05
I'm happy to walk you through a simpler approach though if you want
Isan Bothra
@isanbothra
Apr 04 2017 20:06
@gulptech
Gulsvi
@gulsvi
Apr 04 2017 20:07
@keonsam I would just add a class for offline, online, closed to each user. Then $('.offline').hide() or $('.offline').show() depending on what button you click
@keonsam can ou send me the pen link again?
Isan Bothra
@isanbothra
Apr 04 2017 20:08
yeah !! exactly like this.. @jasonetaylor
gulptech
@gulptech
Apr 04 2017 20:09
did you not want 3 columns when larger ?
Isan Bothra
@isanbothra
Apr 04 2017 20:09
yeah i want it... @gulptech
Jason
@jasonetaylor
Apr 04 2017 20:09
@isanbothra it was pretty much what gulptech said. I made the div col-12 and added those classes to the image. I made the sibling divs col-6 each
Isan Bothra
@isanbothra
Apr 04 2017 20:12
yeah ok.. but what about the text-decoration propety?
@gulptech
@jasonetaylor
Jason
@jasonetaylor
Apr 04 2017 20:12
@keonsam in the switch statement, pass the correct ID values that you used in the HTML. So for case 1, use case “All” instead of case “all_btn” and so on
@isanbothra which text isn’t acting the way you want it?
gulptech
@gulptech
Apr 04 2017 20:12
@isanbothra I don’t see any underline in your navbar
Isan Bothra
@isanbothra
Apr 04 2017 20:13
my name on navigation bar when clicking it visited tab shows underline.
@gulptech
@jasonetaylor
Jason
@jasonetaylor
Apr 04 2017 20:13
a:visited{text-decoration:none}
not sure you can handle that in bootstrap, you may have to extend the style with your own custom styles and put it in that stylesheet
Keon Samuel
@keonsam
Apr 04 2017 20:14
my god lol
Isan Bothra
@isanbothra
Apr 04 2017 20:14
li #mytab:hover{
background-color: #e0e0d1;
color:grey;
text-decoration: none;
}
li #mytab:visited {
text-decoration: none;
color:grey;
}
li #mytab:active {
text-decoration: none;
color:grey;
}
is it right or wrong??
Keon Samuel
@keonsam
Apr 04 2017 20:15
thanks bro
Isan Bothra
@isanbothra
Apr 04 2017 20:15
@jasonetaylor
@gulptech
Jason
@jasonetaylor
Apr 04 2017 20:17
@isanbothra it seems like it only has the underline on focus, not visited. As soon as you click somewhere else the underline goes away. so, #mytab:focus{text-decoration:none}
it’s actually a weird behavior for a link
Isan Bothra
@isanbothra
Apr 04 2017 20:19
yeah!! great job.. thanks @jasonetaylor
CamperBot
@camperbot
Apr 04 2017 20:19
isanbothra sends brownie points to @jasonetaylor :sparkles: :thumbsup: :sparkles:
:cookie: 179 | @jasonetaylor |http://www.freecodecamp.com/jasonetaylor
Jason
@jasonetaylor
Apr 04 2017 20:19
did that work?
Keon Samuel
@keonsam
Apr 04 2017 20:20
yes thank you
Isan Bothra
@isanbothra
Apr 04 2017 20:20
yeah .. it worked.. finally releaved..
@jasonetaylor
Jason
@jasonetaylor
Apr 04 2017 20:20
awesome, glad it worked for both of you
Keon Samuel
@keonsam
Apr 04 2017 20:20
@jasonetaylor are you a front-end developer yet?
Jason
@jasonetaylor
Apr 04 2017 20:21
@keonsam I am. I do it every day. I come here to help others and I learn something myself every time.
Keon Samuel
@keonsam
Apr 04 2017 20:22
cool I can see you got some skills.
Jason
@jasonetaylor
Apr 04 2017 20:24
thanks Keon, i just recognize certain patterns and have lots of experience debugging
Steven Failla
@Stevo99
Apr 04 2017 20:24
im stuck and can really use some help. Im working on my twitch tv project and Im using 3 div col-md-4 grid system and it seems the rows are pushed left instead of centered. PLEASE HELP https://codepen.io/Stevo914/pen/gmqvXZ
gulptech
@gulptech
Apr 04 2017 20:28
@Stevo99 for your All, online, etc ?
Steven Failla
@Stevo99
Apr 04 2017 20:29
@gulptech ??
Jason
@jasonetaylor
Apr 04 2017 20:30
@Stevo99 what isn’t aligned properly? The All, Online, Offline titles?
Steven Failla
@Stevo99
Apr 04 2017 20:30
oh yes they are aligned left for some reason I want them to be 3 even rows under users
gulptech
@gulptech
Apr 04 2017 20:31
add a container class to the div above the div with class row2
Steven Failla
@Stevo99
Apr 04 2017 20:31
let me try
Jason
@jasonetaylor
Apr 04 2017 20:33
add col-md-12 class to .output1 div
gulptech
@gulptech
Apr 04 2017 20:35
so many ways to fix it :)
Gulsvi
@gulsvi
Apr 04 2017 20:35
only one right way to fix it though... :)
Way too many divs
Steven Failla
@Stevo99
Apr 04 2017 20:35
@jasonetaylor It worked thanx bro
CamperBot
@camperbot
Apr 04 2017 20:35
stevo99 sends brownie points to @jasonetaylor :sparkles: :thumbsup: :sparkles:
:cookie: 180 | @jasonetaylor |http://www.freecodecamp.com/jasonetaylor
gulptech
@gulptech
Apr 04 2017 20:35
for bootstrap…i always go container->row->col
KatSaldivar
@KatSaldivar
Apr 04 2017 20:36
@SkyCoder01 thank you. Thats what I thought. but I'm not sure how I can split a number into an array. when I googled it it looked really difficult/confusing.
CamperBot
@camperbot
Apr 04 2017 20:36
katsaldivar sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 861 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Steven Failla
@Stevo99
Apr 04 2017 20:36
@SkyCoder01 yea there are a lot of divs left over from a previous design i still have to go through and take out all the unnecessary divs lol
@SkyCoder01 @gulptech thanks for the input appreciate it
CamperBot
@camperbot
Apr 04 2017 20:37
stevo99 sends brownie points to @skycoder01 and @gulptech :sparkles: :thumbsup: :sparkles:
:cookie: 862 | @skycoder01 |http://www.freecodecamp.com/skycoder01
:cookie: 233 | @gulptech |http://www.freecodecamp.com/gulptech
Jason
@jasonetaylor
Apr 04 2017 20:38
@Stevo99 no problem
@gulptech same here. I go in that order as well
gulptech
@gulptech
Apr 04 2017 20:40
especially if you use bootstrap 4..no container sometimes gives strange results
Gulsvi
@gulsvi
Apr 04 2017 20:42
@Stevo99 Good luck with the project, I had a lot of fun with that one
@KatSaldivar Yeah, you have to use .toString() to convert the number to a string first. You can then use parseInt()or Number() to convert it back to a number.
var num = 123456789;
var numberArray = num.toString().split('').map(val => Number(val));
Johnathon Sykes
@seesykescode
Apr 04 2017 21:10
@jasonetaylor when I tried it locally, it didnt work. When I tried it on codepen, it was being blocked by codepen
KatSaldivar
@KatSaldivar
Apr 04 2017 21:14
@SkyCoder01 Thanks!
CamperBot
@camperbot
Apr 04 2017 21:14
katsaldivar sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: katsaldivar already gave skycoder01 points
Johnathon Sykes
@seesykescode
Apr 04 2017 21:19
@jasonetaylor I end up getting a Cross Origin error locally and with codepen, I get a 404 message.
Federico Dente
@fez994
Apr 04 2017 21:30
Hi guys, i'm really struggling with the Twitch project, not the js part but with align everything with css. I don't know how to align the img on the left and the text on the right ( in a responsive way) here is my code http://codepen.io/fez994/pen/GrbqrN
I tried with bootstrap as you can see on my html but i still can't align imgs and text properly
Isan Bothra
@isanbothra
Apr 04 2017 21:34
how to highlight the link for the page that is being viewed??
means the active page??
@fez994 you want your image and text to be in the same line??
Federico Dente
@fez994
Apr 04 2017 21:37
@isanbothra yep
Isan Bothra
@isanbothra
Apr 04 2017 21:38
@fez994 try to use grid property in css
Johnathon Sykes
@seesykescode
Apr 04 2017 21:56

I’m still having issues with codepen and the OpenWeatherApi, can someone maybe look at my codepen and see what I may have wrong. Just gives me a 404 error in console.

https://codepen.io/johndsykes86/pen/oZONxy

aislingw
@aislingw
Apr 04 2017 21:57
@fez994 From a purely css point of view - if I was creating something like this I would usually put each img/text pair in its own div. So div class="box" then that div would have the two divs within it
@fez994 This would make it easier to style them together. You will probably have to restructure your javscript though. A tip for figuring out css divs and where they're at - put a background-color on them, or borders. You could also look into flexbox or grid but you should be able to do something like this without - not that there is anything wrong at all with flexbox or grid, they're great, but if you don't know them it's just something else to be worrying about!
Federico Dente
@fez994
Apr 04 2017 22:00

Haven't i done it?

<div class="container" id="online-content">

    <div id="img-online"></div>
    <div id="content"></div>

</div>

@aislingw

I tried flexbox but still can't figure it out
KatSaldivar
@KatSaldivar
Apr 04 2017 22:01
@johndsykes86 I believe you need http:// in front of the url api.openweathermap.org
Johnathon Sykes
@seesykescode
Apr 04 2017 22:03
I changed so much, I forgot to add that in there. Thank you! @KatSaldivar
CamperBot
@camperbot
Apr 04 2017 22:03
johndsykes86 sends brownie points to @katsaldivar :sparkles: :thumbsup: :sparkles:
:cookie: 279 | @katsaldivar |http://www.freecodecamp.com/katsaldivar
KatSaldivar
@KatSaldivar
Apr 04 2017 22:03
@johndsykes86 Also, it looks like you are calling the forecast. I think all you need is the current weather, so that might make it more complicated.
your welcome!
Johnathon Sykes
@seesykescode
Apr 04 2017 22:04
I wanted to call the forecast to make sure my API call worked, I’ll be grabbing current weather later.
Maximino V. Jardin III
@ma5one1
Apr 04 2017 22:04
Hello folks! Can someone check why my <div id="vid"> wont line up in the middle when the screen becomes XS?? Is it my CSS. I can't figure this one out. Please take a look.http://codepen.io/oakleaf510/pen/bqZgVN
Johnathon Sykes
@seesykescode
Apr 04 2017 22:07
just reading through the API documentation.
aislingw
@aislingw
Apr 04 2017 22:07
@fez994 Actually you are just ending up with 3 divs - the container outside everything and then the image one on the left with everything below each other and the content on the right with everything below each other. You could put widths on them though - that would help
Federico Dente
@fez994
Apr 04 2017 22:12
@aislingw mm i see now, but how can i store 1 img and the text on one div, and the other img and text on another one?
Maximino V. Jardin III
@ma5one1
Apr 04 2017 22:17
@fez994 it sounds like you need to plan your nesting accordingly to what your visually showing.
aislingw
@aislingw
Apr 04 2017 22:17
@fez994 I'm no jquery expert which is why I'm on this site but I would look into not appending everything to the divs as you are - for each item concatenate together a new div "row" (not necessarily a bootstrap row, just a row) and add that to the page somehow? Maybe append each row to the overall container?
Simo
@SimoOmis10
Apr 04 2017 22:18
hello
Bazita
@bazita
Apr 04 2017 22:47
do you know any good webRadio about coding ?
Federico Dente
@fez994
Apr 04 2017 23:05
@aislingw i figure out a solution with bootstrap, thanks for the help
CamperBot
@camperbot
Apr 04 2017 23:05
fez994 sends brownie points to @aislingw :sparkles: :thumbsup: :sparkles:
:cookie: 139 | @aislingw |http://www.freecodecamp.com/aislingw
Alan Saber
@Alan95
Apr 04 2017 23:09
hey, can anyone tell me why my input-bar is not going to the top of the side after i am pressing enter? (margin-top: -340px). https://codepen.io/BearCoding/pen/JWzEra
Gulsvi
@gulsvi
Apr 04 2017 23:12
@ma5one1 There is no col-xs-* class in Bootstrap 4. Use col-12 instead, and use the text-center class on the row with id="vid". Then remove the CSS settings you have that pushes them off to the left.
Your best option though is to make your videos responsive. Apply a 16:9 padding and put them each in their own bootstrap column.
@Alan95 The syntax is off a bit, use this:
$(".main").animate({
  'margin-top': -340
}, 1000)
Alan Saber
@Alan95
Apr 04 2017 23:15
i got it with $(".main").animate({
  "marginTop" : "10px"

}, 1000)
somehow the -= didnt work
thanks @SkyCoder01
CamperBot
@camperbot
Apr 04 2017 23:16
alan95 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 864 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 04 2017 23:16
That will work too, but yeah, the -= didn't work
Make it bounce when it's done :p
      $(".main").animate({
        "marginTop": "10px"
      }, 1000, function() {
        $('.main').addClass('animated bounce');
      });
Alan Saber
@Alan95
Apr 04 2017 23:18
haah good idea
i ll try it
Gulsvi
@gulsvi
Apr 04 2017 23:20
It reminded me of a pen I made a while back where I was trying to do the same http://codepen.io/skycoder/pen/NdJVPd
But, it's easy to go overboard with animations lol
Alan Saber
@Alan95
Apr 04 2017 23:23
thats looks great! especially the hanging submit button lol :D
Gulsvi
@gulsvi
Apr 04 2017 23:33
haha thanks! It's all animate.css though. I didn't use it in my final project, just something to play around with