These are chat archives for FreeCodeCamp/HelpFrontEnd

7th
Sep 2016
mjcreate
@mjcreate
Sep 07 2016 00:58
I finished my Tribute page - anyone want to give feedback? It's kind of corny I think. http://codepen.io/mjcreate/pen/YGPzdd
Alex S.
@aszwet1
Sep 07 2016 01:03
@mjcreate I think it looks quite nice! it scales nicely, the changing font types throughout is a little choppy, and maybe emphasize some of the bullet points, but otherwise great job imo!
Ok, I know this is something dumb. on the first circle (when the screen size is small, so using the xs column sizes, the first circle (or top left) when clicked throws the other circle wayyy down, but the other ones work fine. any help? http://codepen.io/swetz/pen/yaymBa
mjcreate
@mjcreate
Sep 07 2016 01:15
@aszwet1 oh thanks for catching that!
CamperBot
@camperbot
Sep 07 2016 01:15
mjcreate sends brownie points to @aszwet1 :sparkles: :thumbsup: :sparkles:
:cookie: 125 | @aszwet1 |http://www.freecodecamp.com/aszwet1
Stephen
@stephepush
Sep 07 2016 01:37
is it me or is the wikipedia api documentation a joke?
Greg Duncan
@GregatGit
Sep 07 2016 01:41
This message was deleted
@stephepush if you look through the api you can see the different parameters sent via this api
Stephen
@stephepush
Sep 07 2016 01:49
@GregatGit, lol there are parameters for the parameters. Nice.
Thank you though, @GregatGit
CamperBot
@camperbot
Sep 07 2016 01:49
stephepush sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 759 | @gregatgit |http://www.freecodecamp.com/gregatgit
Greg Duncan
@GregatGit
Sep 07 2016 01:51
hope it helps :+1:
sjbowler1992
@sjbowler1992
Sep 07 2016 02:26
Really have no idea to go about the augmented edition Javascript challenge
Addition
Stephen James
@sjames1958gm
Sep 07 2016 02:28
@sjbowler1992 myVar = myVar + 5; can be replaced with myVar += 5
You need to make similar changes to the code given
Glory Wong Zhaohui
@GloryWong
Sep 07 2016 03:08
Chrome give me a message "provisional headers are shown", anyone can tell me how to find the specific reason?
Glory Wong Zhaohui
@GloryWong
Sep 07 2016 03:19
lol
丑小鸭
@chouXiaoYaJS
Sep 07 2016 04:25
。。。。。
Gang Zhao
@crumpx
Sep 07 2016 04:25
...
丑小鸭
@chouXiaoYaJS
Sep 07 2016 04:26
额!!
Gang Zhao
@crumpx
Sep 07 2016 04:26
maybe it was something being blocked by adblocker
丑小鸭
@chouXiaoYaJS
Sep 07 2016 04:27
我只会说日常用语 5555~~~~
StoneGu
@shguxudong
Sep 07 2016 05:35
@crumpx hi
hello
Jordan Bartholomew
@tourdejord
Sep 07 2016 05:41
With bootstrap - how do I center all content within a div?
Hello @StoneGu
AR Setiawan
@arra-sy
Sep 07 2016 05:43
@tourdejord maybe use "text-center" class?
sharkantropo
@sharkantropo
Sep 07 2016 06:25
Hey people, It is possible to make the button perform another different actions when clicked again? I want to create a button to perform "show" and then "hide" after another click.
billpzt
@billpzt
Sep 07 2016 06:34
Hey everyone! Working on the Get Local Weather challenge. I'm still very unsure of what I'm doing, but I went slowly and think my code should work perhaps with minor modifications. Problem is I refreshed my CodePen page and now it won't load! Here's the link: http://codepen.io/billpzt/pen/EgjawL
@sharkantropo I don't know if there's some function that does this already, but you could do something inside the button like a counter, like a variable that's either a 1 or a 0. If you click the button and it's a 0, it adds a 1. If it's a 1, it resets to 0. Then based on if it's a 1 or a 0, you can make it do something different...
Carina
@Carina-Hu
Sep 07 2016 07:46
hello world!
CamperBot
@camperbot
Sep 07 2016 07:46

welcome to FreeCodeCamp @Carina-Hu!

William Maes
@maeswilliam
Sep 07 2016 07:51
@Carina-Hu konishowa
Carina
@Carina-Hu
Sep 07 2016 07:54
@maeswilliam hahaThank you .I'm not a Japaness.I come from China~
@maeswilliam thank you ~
CamperBot
@camperbot
Sep 07 2016 07:58
carina-hu sends brownie points to @maeswilliam :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @maeswilliam |http://www.freecodecamp.com/maeswilliam
William Maes
@maeswilliam
Sep 07 2016 08:08
@Carina-Hu haha i know, i was messing with you :D
@Carina-Hu good luch and havefun Carina
@maeswilliam @Carina-Hu luck*
Carina
@Carina-Hu
Sep 07 2016 08:09
@maeswilliam haha~nothing serious~thank you~~~
c0d0er
@c0d0er
Sep 07 2016 08:11
Hi everybody, I have completed JSON APIs and Ajax, but feel that i have learned NOTHING since i just copy and paste the provided code in the directed space, according to your experience, where should i go to learn again this JSON APIs and Ajax? do you have any good recourses to learn all these 3?
@Carina-Hu could you use freecodecamp and gitter in Xian?
Vos
@KrisVos130
Sep 07 2016 08:13
@c0d0er I don't know of any websites specifically to train that. What I would do is look at the documentation for Ajax and such, and mess around with some APIs with that in Codepen
Carina
@Carina-Hu
Sep 07 2016 08:13
@c0d0er of course I can~~
@c0d0er I 'm using it right now~~
c0d0er
@c0d0er
Sep 07 2016 08:15
@KrisVos130 thanks!
CamperBot
@camperbot
Sep 07 2016 08:15
c0d0er sends brownie points to @krisvos130 :sparkles: :thumbsup: :sparkles:
:cookie: 490 | @krisvos130 |http://www.freecodecamp.com/krisvos130
Vos
@KrisVos130
Sep 07 2016 08:15
No probem
c0d0er
@c0d0er
Sep 07 2016 08:20
@Carina-Hu awesome! do you need to use vpn?
Carina
@Carina-Hu
Sep 07 2016 08:22
@c0d0er haha~ I use nothing .I only need to turn on the computer~
Jordan Bartholomew
@tourdejord
Sep 07 2016 08:24
Im at the same place. Keep searching. What I understand is that it's meant to make you learn how to search for answers as real coders do. You are on the right track. I think.
c0d0er
@c0d0er
Sep 07 2016 08:43
@tourdejord are you talking with with me? if yes, sorry didnt realized
Joris Labie
@labiej
Sep 07 2016 09:38
@c0d0er Just try to build the quote machine, it'll help you understand what's happening
c0d0er
@c0d0er
Sep 07 2016 09:38
@labiej thanks
CamperBot
@camperbot
Sep 07 2016 09:38
c0d0er sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 441 | @labiej |http://www.freecodecamp.com/labiej
Mikail Bayram
@mikail1998
Sep 07 2016 10:40
Im working on the pomodoro clock challenge and i dont know how to start a stopwatch, i have the html css and some jquery for adjusting the clock but I dont have the "main part", I would be appreciate a little hint or something so i can have a clue where and how to star http://codepen.io/mikail1998/pen/ozgXzb
start**
Zach Valenta
@zachvalenta
Sep 07 2016 11:21
@mikail1998 I don't have an answer for this but just commenting to cheer you on a bit!
Looking good so far!
Stephen James
@sjames1958gm
Sep 07 2016 11:22
@mikail1998 Using setInterval(func, 1000) Allows a function to be called once a second and can be your timer.
research setInterval at mdn
@mikail1998 You'll need to capture the return from setInterval in case you want to pause the clock.
you have an extra ) in your setInterval call - use analyze JS feature in the drop down
Mikail Bayram
@mikail1998
Sep 07 2016 11:25
@sjames1958gm oh yes I just saw that like 5 minutes ago, I have an idea how to it now at least :D
Stephen James
@sjames1958gm
Sep 07 2016 11:25
@mikail1998 :+1: did not see how long ago you posted. :)
Mikail Bayram
@mikail1998
Sep 07 2016 11:27
@zachvalenta I started loosing hope when no one answered but thanks for the positive energy :P
CamperBot
@camperbot
Sep 07 2016 11:27
mikail1998 sends brownie points to @zachvalenta :sparkles: :thumbsup: :sparkles:
:cookie: 342 | @zachvalenta |http://www.freecodecamp.com/zachvalenta
greg
@wearenotgroot
Sep 07 2016 11:33
@mikail1998 remember to store the interval id to a variable so you can stop it later(clearInterval(intervalID))
var intervalID = setInterval(func, 1000);

....

clearInterval(intervalID);
Mikail Bayram
@mikail1998
Sep 07 2016 11:34
@wearenotgroot ahh okay thank you.
CamperBot
@camperbot
Sep 07 2016 11:34
mikail1998 sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1585 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
Mikail Bayram
@mikail1998
Sep 07 2016 11:35
I just cant get how to actually start the interval
for now im just trying to start the clock to go every second on number less
later i will adjust it ofcourse but so far nothing...
greg
@wearenotgroot
Sep 07 2016 11:37
@mikail1998 check your dev console for errors
@mikail1998 try using .text instead of .html also use result--
$("#clock").on('click', function(){
   var str =   $("#pomodoro1").html();
  var result = parseInt(str);
   setInterval(function(){
     //use .text, .html is a bit slow and lag since its rebuilding the html inside that <p>
     $("#pomodoro1").text(result--);  //<--------result-- so the new value is stored in result
   }, 1000);
});
Mikail Bayram
@mikail1998
Sep 07 2016 11:42
@wearenotgroot yeeeeeaah it works
thanks so much :D
greg
@wearenotgroot
Sep 07 2016 11:42
@mikail1998 :+1:
@mikail1998 another suggestion is having a named function for that interval instead of an anonymous one. And declare it outside the click event callback so it will much easier to manage
Mikail Bayram
@mikail1998
Sep 07 2016 12:04
This message was deleted
This message was deleted
@wearenotgroot
$("#clock").on('click', function(){
   var str =   $("#pomodoro1").html();
  var result = parseInt(str);
function interval (){
  $("#pomodoro1").text(result--); 
} 
  var timeOut = setInterval(
     interval//<--------result-- so the new value is stored in result
   , 1000);
like this?
greg
@wearenotgroot
Sep 07 2016 12:15
@mikail1998 check you pm :+1:
Thomas Magnus
@tmag298
Sep 07 2016 12:32
Hey campers! Can anyone help with this? I'm trying to round and border and image, but the image will only stay rounded if not bordered. I would really appreciate the help!
<div class="container-fluid">
<div class="col-md-4">
<div class="row">
<center><img class="img-rounded thin-grey-border" alt="profile picture" src=https://d13yacurqjgara.cloudfront.net/users/219762/screenshots/2351573/saitama.png height=200px width=200px></img></center>
</div>
</div>
</div>
Abdulah Hamzic
@hamzicabdulah
Sep 07 2016 12:33
Hey guys, anyone more experienced with animation (and/or video games) here? I know a thing or two about CSS animatons/transitions, but I would like to know what is the best way to create animations. And I'd like a few other questions answered, like: what is better for animation — canvas or SVG? Is it worth learning these two? Is Canvas good for creating HTML games? What are some good resources for learning SVG and Canvas and animation in general? Please, anyone who is more knowledgeable on animation, provide an answer. Thanks!
Thomas Magnus
@tmag298
Sep 07 2016 12:33
CSS

body{
background-color:#D8F9F9
}

.thin-grey-border{
border-radius: 20%;
border-style: groove;
border-width: 10px;
border-color: grey;
}

丑小鸭
@chouXiaoYaJS
Sep 07 2016 12:34
good
Chase
@Belax8
Sep 07 2016 12:42
@tmag298 What seems to be the problem? I copied your code and it seemed to work for me.
Julian Montague
@roastchicken
Sep 07 2016 13:28
I'm not sure why my <div class="result"> isn't centering. https://codepen.io/roastchicken/pen/KrOEZv
Nvm, I decided to go with a max width instead of display: inline-block
Ken Haduch
@khaduch
Sep 07 2016 13:37
@tmag298 - depending on who is checking the code (the testing code might be picky, or maybe the browser) it looks like you are missing a semicolon ; after you declaration of background-color:#D8F9F9 - not sure if that would cause a problem?
@tmag298 - the value for your src attribute should also be enclosed in quotes (I was just scrolling up and looking at earlier posts.)
whbob
@whbob
Sep 07 2016 13:47
I'm building a tribute page in FreeCodeCamp. I can't get this code to put a link on the page. It turns blue, it is underlined, but when I mouse over it does not change to a hand and does not go to the link when clicked. The page name is valid, the text in quotes when put in a new tab will bring you to the web link . Can anyone see my mistakes?
<h2 More information at this <a href:="https://en.wikipedia.org/wiki/Vostok_Station" target="_blank"> Wikipedia_Page </a>.
</h2>
Ken Haduch
@khaduch
Sep 07 2016 13:49

@tmag298 - last try... :) the CSS for the img-rounded class is this:

.img-rounded {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

and your .thin-grey-border class definition is this:

.thin-grey-border{
border-radius: 20%;
border-style: groove;
border-width: 10px;
border-color: grey;
}

so you do have a conflict in some of the properties that you are trying to use - the Bootstrap class has a very small radius set on the corners, you have a 20% radius for all corners, so you are most likely overriding the Bootstrap settings. It is perfectly fine to do that if you wish, but it appears that things are working as they should be.

@whbob - you should not have the : after your href:= attribute setting. That might help... In other words, just href=
Meet Mangukiya
@meetmangukiya
Sep 07 2016 13:53
How can I make a heading tag and paragraph tag appear on same line ?
Alexander Domikov
@AlexanderDom
Sep 07 2016 13:54
@meetmangukiya with display: inline-block or inline for both or float: left for first, there are many possibilities
Meet Mangukiya
@meetmangukiya
Sep 07 2016 13:57
@AlexanderDom would it be the same for getting a heading and an anchor on same line to create a header?
Alexander Domikov
@AlexanderDom
Sep 07 2016 13:58
when you say anchor you mean <a href> @meetmangukiya ?
Meet Mangukiya
@meetmangukiya
Sep 07 2016 13:58
yeah
Ken Haduch
@khaduch
Sep 07 2016 14:00
@meetmangukiya - instead of a paragraph tag, you could use a <span>, which is an inline element that allows you to apply different styling to a span of text? Maybe that would be easier to use?
Alexander Domikov
@AlexanderDom
Sep 07 2016 14:00
you can put it in your header like <header><a> or <h1>Text<a>
yes if you put something inside your header you can use <span> element
Ken Haduch
@khaduch
Sep 07 2016 14:02
@AlexanderDom @meetmangukiya - it is probable not valid to do this: <h1>Text<a> because you cannot always nest any element anywhere - I think that heading tags are one of those places where you cannot (or are not supposed to) nest other elements?
Meet Mangukiya
@meetmangukiya
Sep 07 2016 14:03
@khaduch I ain't nesting
<h1>Heading</h1>
<nav>
    <a>anchor 1</a>
    <a> anchor2 </a>
</nav>
Alexander Domikov
@AlexanderDom
Sep 07 2016 14:03
@khaduch it's perfectly valide to do <h1><a href="">Text</a></h1> since html 5 even <a href=""><h1></h1></a> it's ok
whbob
@whbob
Sep 07 2016 14:05
Removed the colon and removed the <h2> tags to get the <a> link</a> to work. Thanks so much :)
Ken Haduch
@khaduch
Sep 07 2016 14:06
@AlexanderDom - oh, my bad... I'm probably confused with some other nesting that is not permitted... carry on, then! :) And thanks for the corrected information!
CamperBot
@camperbot
Sep 07 2016 14:06
khaduch sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 379 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
Joshua Faggion
@joshfaggion11
Sep 07 2016 14:08
:)
hey guys
Ken Haduch
@khaduch
Sep 07 2016 14:08
@joshfaggion11 - hey there.......
Alexander Domikov
@AlexanderDom
Sep 07 2016 14:09
hey hey @joshfaggion11
Rajat Shankar
@Rajatk95828
Sep 07 2016 14:09
I am going to start the first project? any tips?
Darth Skywalker
@adityaparab
Sep 07 2016 14:09
@Rajatk95828 : Just start! :D
Ready Fire Aim!
Rajat Shankar
@Rajatk95828
Sep 07 2016 14:10
lol ok
it can be about anyone right?
Darth Skywalker
@adityaparab
Sep 07 2016 14:10
You're the rocket! Not a petty bullet! Course correction can happen any time!
Alexander Domikov
@AlexanderDom
Sep 07 2016 14:11
no problem @khaduch :)
Ken Haduch
@khaduch
Sep 07 2016 14:11
@Rajatk95828 - my advice - keep it simple... It can be about anyone - but don't make it too complex with a lot of small text to read - someone that you can easily get some highlights to present. It's easier to do for a first project, and easier to get it looking good!
@AlexanderDom - I'm definitely a bit of a dinosaur when it comes to HTML 5 stuff - apparently this was not valid before 5 came along...
Alexander Domikov
@AlexanderDom
Sep 07 2016 14:12
yes, finish first all the project you can rework it after
<a> who wraps block elements yes it wasn't @khaduch
Darth Skywalker
@adityaparab
Sep 07 2016 14:12
I dedicated my tribute page to the legendary Peter Griffin
Alexander Domikov
@AlexanderDom
Sep 07 2016 14:13
^^ normal with your profile image
Darth Skywalker
@adityaparab
Sep 07 2016 14:13
:D
Alexander Domikov
@AlexanderDom
Sep 07 2016 14:13
me to Quentin Tarantino :p
Darth Skywalker
@adityaparab
Sep 07 2016 14:14
:D
Meet Mangukiya
@meetmangukiya
Sep 07 2016 14:15

Ready Fire Aim!

Ready aim fire :/

Darth Skywalker
@adityaparab
Sep 07 2016 14:15
@meetmangukiya : That's a recipe for mediocrity! Ready fire aim is the new cool!
Meet Mangukiya
@meetmangukiya
Sep 07 2016 14:15

Course correction can happen any time!

Ok, I get it, my bad :(

Darth Skywalker
@adityaparab
Sep 07 2016 14:16
:D
Meet Mangukiya
@meetmangukiya
Sep 07 2016 14:25
Why'd this not work
div > header > h1{
    /*props*/
}
Alexander Domikov
@AlexanderDom
Sep 07 2016 14:26

@meetmangukiya is your html is

<div>
  <header>
    <h1></h1>
  </header>
</div>

?

Meet Mangukiya
@meetmangukiya
Sep 07 2016 14:26
yep
Alexander Domikov
@AlexanderDom
Sep 07 2016 14:26
so you have misspelled some css rule =)
Meet Mangukiya
@meetmangukiya
Sep 07 2016 14:27

nope , just

h1{
    /*props*/
}

works well

Alexander Domikov
@AlexanderDom
Sep 07 2016 14:27
show us both your css & html please
Meet Mangukiya
@meetmangukiya
Sep 07 2016 14:28
I did a nesting mistake sorry :(
Alexander Domikov
@AlexanderDom
Sep 07 2016 14:28
it happens ;)
Salomon May
@sollymay
Sep 07 2016 14:59
Good morning guys!
10 challenges away from getting my Front End Certificate. :D
most of it thanks to all of you
Pradnya Joshi
@pradxj07
Sep 07 2016 15:04
@sollymay , great going! All the best...
Alexander Domikov
@AlexanderDom
Sep 07 2016 15:08
@sollymay Great job
Leon Ormes
@leonormes
Sep 07 2016 15:08
Hi people. While making my tribute page I was thinking about readability and typeface and such. I was seaerching about for ways to easily manage this when I stumbled on typecast. Here is the help video. http://support.typecast.com/customer/portal/articles/1337056
Thomas Magnus
@tmag298
Sep 07 2016 15:29
@khaduch Thank you for your help! Sadly, adding that img-rounded to my CSS has now made the image entirely square! I've also simply removed the thin-grey-boarder, but that does not make the image circular.
CamperBot
@camperbot
Sep 07 2016 15:29
tmag298 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1639 | @khaduch |http://www.freecodecamp.com/khaduch
Thomas Magnus
@tmag298
Sep 07 2016 15:30
@Belax8 It worked for you? As in the image is circular and bordered?
Ken Haduch
@khaduch
Sep 07 2016 15:31
@tmag298 - that img-rounded only does a small radius on the corners. img-circle would put a 50% radius on the image, which would make it circular. If the image is square, then it would appear as a circle. If the image is rectangular, then it would appear as an ellipse. And you could still use your grey border class, if you remove the border-radius setting.
Alejandro
@alejandroariasag
Sep 07 2016 15:39

Hello guys! I'm new with this, and I have been developing a website for a cleint on upwork.com

I wanted to know how do you normally show the result to the client, do you have your own servers + domain, or do you use any web app that you upload the files to?

Thank you in advance :-)
the doer
@ewathedoer
Sep 07 2016 16:02
@alejandroariasag it all depends on the contract and what you decided before. You can show it on dev server first and later move it to production when all set, agreed and approved.
It all depends on contract and what you decided before but leaving at least a bit of security for yourself is useful. @alejandroariasag
Alejandro
@alejandroariasag
Sep 07 2016 16:16
@ewathedoer I understand, but I was wondering if there is any dev server out there that I can use? Any special tool? Or do I have to get my own?
Diego Urenia
@drurenia
Sep 07 2016 16:23
Hello everyone! I was wondering what are you'all using more to layout your projects: floats, inline-block or flexbox? There are so much options that it makes me crazy sometimes. I'm also well aware that there's no silver bullet here, but I would like to know some thoughts in that regard. :)
the doer
@ewathedoer
Sep 07 2016 16:31
@alejandroariasag I use my own because it’s easier and I totally control who sees what.
@drurenia currently I’m learninf and discovering flexbox, it’s really powerful so I’d recommend it instead of playing with floats.
Under this movie you’ll find the list of materials to learn it https://www.youtube.com/watch?v=hg5X7XFdpWc @drurenia
sebtn
@sebtn
Sep 07 2016 16:41
hey guys im a bit stuck on the pomodoro clock any tips would be great pls check this.post
http://forum.freecodecamp.com/t/chain-the-two-pomodoro-timers/34825
kevincauto
@kevincauto
Sep 07 2016 16:47
I'm working on the simon project. My JavaScript file does not seem to be read in at all. Basic onclick function is not firing. The file located in the js folder and is named script.js. Am I missing something silly?
<!DOCTYPE html>
<html>
  <head>
    <title>Simon</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body>
<div class="holder">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="yellow"></div>
    <div class="green"></div>
</div>
    <div class="inner">
      <div class="row">
                <button type="button" name="button" class="btn btn-primary" onclick="start()">Start</button>
        <!-- .roundedOne -->
        <div class="roundedOne">
          <input type="checkbox" value="None" id="roundedOne" name="check" checked />
          <label for="roundedOne"></label>
        </div>
        <!-- end .roundedOne -->
        <input type="text" name="count" value="--" disabled="disabled">
      </div>
      <div class="row">
      <center>
        <section title=".slideThree">
            <!-- .slideThree -->
            <div class="slideThree" >
              <input type="checkbox" value="None" id="slideThree" name="check"  />
              <label for="slideThree" ></label>
            </div>
            <!-- end .slideThree -->
          </section>
      </center>
      </div>
    </div>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>
Diego Urenia
@drurenia
Sep 07 2016 16:50
@ewathedoer I watched your video as soon as it came out (they are great, btw). Although it made me realise I had one more option to layout my pages (which is great), it also came with more doubts haha You said you were learning flexbox now, so what have you been using until you found out flexbox?
the doer
@ewathedoer
Sep 07 2016 16:53
@drurenia what’s the other option? curious :) I was aligning them by floats and positioning by absolute or fixed depending on the situation. Generally I’m fresh to flexbox but I see huge difference in how helpful it is. BTW Thanks for watching and the feedback!
CamperBot
@camperbot
Sep 07 2016 16:53
ewathedoer sends brownie points to @drurenia :sparkles: :thumbsup: :sparkles:
:cookie: 309 | @drurenia |http://www.freecodecamp.com/drurenia
Tyler Moeller
@TylerMoeller
Sep 07 2016 16:53

@sebtn The reason it keeps doing the break time is because you are always setting duration to the break-length value:

       if (timer == 0) {
        clearInterval(clock)        
        var duration = (document.getElementById('break-length').innerHTML)*60
        startTimer(duration, display)
        clearInterval(clock) 
        }

Set a variable that will tell you what "mode" the timer is in (break or session) and change the mode every time the timer reaches 0. You can then know whether or not to read document.getElementById('break-length').innerHTML or document.getElementById('session-length').innerHTML

kevincauto
@kevincauto
Sep 07 2016 16:55
I think I figured my problem out. It seems like my link to the javaScript page was ok. It was the JavaScript itself that had some errors. Thank you to anyone who was looking into that.
Ken Haduch
@khaduch
Sep 07 2016 16:57

@sebtn - I'll make a few suggestions, looking at your post.

  • Store all of your values in javascript variables, do not read from the DOM. The DOM should generally be "output only".
  • Keep a flag value to indicate which phase of the timer operation you are in - session or break, and then when you run out of time on the current phase, select the one that you aren't in, update all of the times, flip the flag, and let it go again! (That's probably the area you are stuck in! Only switching to the break time... so try that, make a variable that will essentially toggle between session and break, and you can make your code act accordingly.)

That is my helpful hints on that - looks like you're getting things up and running?

Diego Urenia
@drurenia
Sep 07 2016 16:59
@ewathedoer The other one is using inline-block, but there is a drawback regarding the empty space they create in some circunstances, which you can eliminate with some magic tricks that I don't really appreciate, but, overall, people recommend it over the float approach in most of the times, since floats were not create for such job and they also need the clearfix method in some circunstances as well. (I am pretty new to frontend development and I can be wrong about this kind of stuff, I am a Java backend dev for 7 years now and I am struggling to get into the frontend world)
the doer
@ewathedoer
Sep 07 2016 17:02
@drurenia we are all learning ;) good luck and I’d really go for flexbox since it’s already supported by majority of browsers and seems to make the job pretty easily
Diego Urenia
@drurenia
Sep 07 2016 17:04
@ewathedoer thanks, I'll give it a try because looks like it comes down to which one suits me best
CamperBot
@camperbot
Sep 07 2016 17:04
drurenia sends brownie points to @ewathedoer :sparkles: :thumbsup: :sparkles:
:cookie: 499 | @ewathedoer |http://www.freecodecamp.com/ewathedoer
the doer
@ewathedoer
Sep 07 2016 17:05
Hope to hear you soon how it worked for you. Have fun with flexbox!
Diego Urenia
@drurenia
Sep 07 2016 17:06
Sure thing! And I hope to see new videos soon as well. Keep up the good work.
the doer
@ewathedoer
Sep 07 2016 17:07
I’ll do my best. This week majority of the time I’m doing a project for a client, so I cannot show this kind of work, but I hope to make more from my side projects and learning since tomorrow. It’s a tough week ;) @drurenia see you on YT
Diego Urenia
@drurenia
Sep 07 2016 17:08
cya!!
the doer
@ewathedoer
Sep 07 2016 17:09
:)
sebtn
@sebtn
Sep 07 2016 17:10
Thanks @khaduch @TylerMoeller will try the suggestion, what should i keep in mind when building a flag or mode checker?
CamperBot
@camperbot
Sep 07 2016 17:10
sebtn sends brownie points to @khaduch and @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 794 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
:star2: 1640 | @khaduch |http://www.freecodecamp.com/khaduch
Tyler Moeller
@TylerMoeller
Sep 07 2016 17:12
@sebtn Variable scope is one to keep in mind. You'll probably want to set the flag first in your start() function and then pass it to your startTimer function startTimer(duration, display, mode).
Ken Haduch
@khaduch
Sep 07 2016 17:14

@sebtn - mainly that you know what it is doing? You might do something like this, as an example:

var session = true; // this means you are in the "session" time

// your code...
if (session) {
    // we are in the session time, switch to the break time
    timer = breakTime;
    session = false; // now it means we are in the break
    // start the timer or let it continue running with new count
} else {
    timer = sessionTime;
    session = true;
    // start the timer or let it continue running with the session count
}

a rough idea.
and as @TylerMoeller points out - you want to make sure that the scope is such that you can access it in all of your functions.

sebtn
@sebtn
Sep 07 2016 17:18
awesome :) will check it out
Daniel
@DanielMW34
Sep 07 2016 17:50

Hello. I am having some trouble with my TwitchTV app, in particular, the for loop I am using seems to only be returning data for the LAST variable (twitch username) in my array. This is not making any sense to me. Anyone care to help troubleshoot, I have been over this several times and cannot identify why this is happening. Link to pen below code.

$(document).ready(function() {
  var twitchUserArr = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
  for (i = 0; i < (twitchUserArr.length); i++) {
    var twitchUser = twitchUserArr[i];
    var API = "https://api.twitch.tv/kraken/streams/" + twitchUser + "?callback=?";
    var url = "https://www.twitch.tv/" + twitchUser;
    $.getJSON(API, function(data) {
      if ((data.stream) === null) {
        $("#notStreaming").append("<a class=" + "'" + "list-group-item notStreaming" + "'" + " href=" + "'" + url +"'" + "><h3>" + twitchUser + "</h3><h4>" + "      status: offline" + "</h4></a>")        
      } else if ((data.error) === "Not Found") {
        $("#accountClosed").append("<a class=" + "'" + "list-group-item accountClosed" + "'" + " href=" + "'" + url +"'" + "><h3>" + twitchUser + "</h3><h4>" + "      status: account closed" + "</h4></a>")
      } else {
        var status = (data.stream.channel.status);
        $("#streaming").append("<a class=" + "'" + "list-group-item streaming" + "'" + " href=" + "'" + url +"'" + "><h3>" + twitchUser + "</h3><h4>" + " status: " + status + "</h4></a>")
      }
    });
  }
});

http://codepen.io/Daniel_Widrich/pen/YGzokv

Stephen James
@sjames1958gm
Sep 07 2016 17:53
@DanielMW34 Do to the nature of closure (concerning your callback function) all the callbacks share the same twitchUser variable, which by the time
each callback runs is equal to the last user.
replace this
for (i = 0; i < (twitchUserArr.length); i++) {
with
twitchUserArr.forEach(function(twitchUser) {
And each callback has a different context.
Make sure to add the closing )
Dale
@dwhale84
Sep 07 2016 17:54
hey guys, I'm working on the spinal-tap-case challenge, and I can't figure out one detail of it. It's specifically not working in the test examples where there are no spaces between words. I've tried writing an If-statement that will add a space before a capital letter if there is none, but it's not working and I'm not sure why. Can someone take a look?
function spinalCase(str) {
  // "It's such a fine line between stupid, and clever."
  // --David St. Hubbins
  var array = str.split("");
  for (i = 0; i < array.length; i++) {
    if (array[i] === /[A-Z]/ && array[i-1] !== " ") {
     array = array.splice(i - 1, 0, " ");
    }
    array[i] = array[i].toLowerCase();
    if (array[i] === " " || array[i] === "_") {
      array[i] = "-";
    }
  }
  console.log(array);
  str = array.join("");
  return str;
}

spinalCase('This Is Spinal Tap');
Daniel
@DanielMW34
Sep 07 2016 17:56
@sjames1958gm Hmmm.... I am going to have to read into this, I don't doubt your solution is correct, I just haven't deciphered "why" yours is correct. I thought due to the nature of closures (inner vs outer functions), I would be able to pass the variable "twitchUser" to the callback, and run the callback each time the for loop loops...
@sjames1958gm thank you
CamperBot
@camperbot
Sep 07 2016 17:56
danielmw34 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3132 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Klaus Mana
@KlausMana
Sep 07 2016 17:56
hwy
Daniel
@DanielMW34
Sep 07 2016 17:57
@sjames1958gm ...again :)
Klaus Mana
@KlausMana
Sep 07 2016 17:57
I need help
with API's
like how do you implement them?
and how do you like... use them?
?
kevincauto
@kevincauto
Sep 07 2016 17:59
Which project are you working on @KlausMana ?
Klaus Mana
@KlausMana
Sep 07 2016 17:59
The Weather One
i need to get the openweathermap api
i just don't know how @kevincauto
kevincauto
@kevincauto
Sep 07 2016 18:01
Ok let me look at my project and see what I did.
Klaus Mana
@KlausMana
Sep 07 2016 18:01
ok ty
kevincauto
@kevincauto
Sep 07 2016 18:04
This is the basic idea using jQuery.
function updateWeather(city,system) {

  //connect to open weather map API
    var icon;
    var apiKey = "3249f284576e7eda04afba6c2277493f";
    $.ajax({
      dataType: "json",
      url: "http://api.openweathermap.org/data/2.5/weather?q=" + city + ",usa&units=" + system + "&APPID=" + apiKey,
      type: "GET",
      success: function(json) { 

       alert("This worked.  Now use the JSON object.")

    }, error: function() {
      alert('Error obtaining IP');

    }
  }); 
}
That is my API, you need to go on the site and register for your own. (It's free)
*API key
Klaus Mana
@KlausMana
Sep 07 2016 18:05
i have
i just wanted to know
how does the whole API implementation thing work?
kevincauto
@kevincauto
Sep 07 2016 18:06
json is that variable. You just use dot notation of bracket notation
json.main.temp
Klaus Mana
@KlausMana
Sep 07 2016 18:07
where did you use the var apiKey you created?
oh nvm i see it now
i still don't get the whole idea though :/
so you declare a data type
the url of the api
kevincauto
@kevincauto
Sep 07 2016 18:09
So that connects to openWeather,
and you should return a JSON file.
If you use this example:
Michael Addro
@Subbycoon
Sep 07 2016 18:10
Hey guys I was directed to come over here for some help...
Can someone help me figure out why there are these weird gaps between my backgrounds?
kevincauto
@kevincauto
Sep 07 2016 18:10
You can open that right in the browser and see that json object @KlausMana
Klaus Mana
@KlausMana
Sep 07 2016 18:11
so this JSON contains some values right?
and i need to use this values
say "weather"
kevincauto
@kevincauto
Sep 07 2016 18:11
right.
Klaus Mana
@KlausMana
Sep 07 2016 18:12
how do i access these again?
kevincauto
@kevincauto
Sep 07 2016 18:12
so weather would be json.weather
Klaus Mana
@KlausMana
Sep 07 2016 18:12
oh so they are stored in the json variable?
kevincauto
@kevincauto
Sep 07 2016 18:12
right.
Klaus Mana
@KlausMana
Sep 07 2016 18:13
wow thanks @kevincauto i think i get it now
CamperBot
@camperbot
Sep 07 2016 18:13
klausmana sends brownie points to @kevincauto :sparkles: :thumbsup: :sparkles:
:cookie: 305 | @kevincauto |http://www.freecodecamp.com/kevincauto
Klaus Mana
@KlausMana
Sep 07 2016 18:13
you've helped me a bnch
kevincauto
@kevincauto
Sep 07 2016 18:13
json.weather[0].description for instance
Michael Addro
@Subbycoon
Sep 07 2016 18:13
I could use some help...
kevincauto
@kevincauto
Sep 07 2016 18:13
would be "scattered clouds"
@Subbycoon I can take a look
what are you referencing? The white horizontal space?
I have 3 different sections with 3 different backgrounds
And there are weird gaps between them
kevincauto
@kevincauto
Sep 07 2016 18:19
So the big white space? http://prntscr.com/cfbh9t
Michael Addro
@Subbycoon
Sep 07 2016 18:20
Yes that and the smaller one between the Recent and Contact sections
kevincauto
@kevincauto
Sep 07 2016 18:22
right now it looks like the backgrounds are in the <p> tags
You may want to try making the background classes in the larger divs
Michael Addro
@Subbycoon
Sep 07 2016 18:23
Yes, because I wanted each paragraph to have its own background. Let me try rearranging them
kevincauto
@kevincauto
Sep 07 2016 18:23
Break the website into three large divs and give each div the class with the background
Michael Addro
@Subbycoon
Sep 07 2016 18:23
One second
kevincauto
@kevincauto
Sep 07 2016 18:23
You can put the <p> tag within the divs
Michael Addro
@Subbycoon
Sep 07 2016 18:26
Well whatever I did now all of the gaps are huge...
kevincauto
@kevincauto
Sep 07 2016 18:27
Ok I one moment. I'll straigten you out.
basically this is what you want:
<ul>
  <li><a class="active" href="#about">About</a></li>
  <li><a href="#recent">Recent</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>
  <div class="row home-background"></div>
  <div class="row recent-background"></div>
  <div class="row contact-background"></div>
in your css
add a class for row:
.row{
 height: 500px
}
That will give you three rows, 500px in height, with your backgrounds.
Then you can add in the <p> </p> with your information in between the div sections
Michael Addro
@Subbycoon
Sep 07 2016 18:31
So should I just add the above to my current CSS or delete everything and put just that?
kevincauto
@kevincauto
Sep 07 2016 18:32
just add it in
Klaus Mana
@KlausMana
Sep 07 2016 18:33
@kevincauto will this code allow me to get the api?
function Weather(latitude , longtitude){

var apiKey  = "fffc77f90fb489748fe36ae1b79ac8b5";

$.ajax ({
  dataType : "json",
  url : "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longtitude + "&APPID=" + apiKey,
  type : "GET",
});
}
after I set the values of latitude and longtitude of course
Michael Addro
@Subbycoon
Sep 07 2016 18:35
OK it didnt do what I thought it would but I may be able to work with it
Let me test this out
kevincauto
@kevincauto
Sep 07 2016 18:35
@KlausMana yes I believe you can use the lattitude and longitude!
@Subbycoon you can go into the editor view. I didn't change anything in your css, just added the .row class
Michael Addro
@Subbycoon
Sep 07 2016 18:38
Ok see I did that and when I start adding in my content for my <p></p> it makes that gap again
kevincauto
@kevincauto
Sep 07 2016 18:38
ok let me check it out.
Michael Addro
@Subbycoon
Sep 07 2016 18:39
Whoops nevermind
I fixed it
Toni Shortsleeve
@KoniKodes
Sep 07 2016 18:40
@Subbycoon You didn't link to each section. Try naming each row background as an id for the href to go to.
Steven Cruz
@itsstoiven
Sep 07 2016 18:41
Can someone please help me with my random quote generator
Toni Shortsleeve
@KoniKodes
Sep 07 2016 18:41
@itsstoiven what is wrong?
Michael Addro
@Subbycoon
Sep 07 2016 18:41
@KoniKodes What do you mean? If I click the links it takes me to those sections properly for me...
Steven Cruz
@itsstoiven
Sep 07 2016 18:42
@KoniKodes something is wrong with passing in the API. it used to work a couple months ago but I can't figure out what's the issue. No quotes are showing up :worried:
Toni Shortsleeve
@KoniKodes
Sep 07 2016 18:42
@Subbycoon I'm sorry. The link changes color but doesn't take me to that section.
@itsstoiven You will need your quote page to go to https:// instead of http:// . Look at how your reach twitter.
Michael Addro
@Subbycoon
Sep 07 2016 18:44
@kevincauto Thank you SO much for helping
CamperBot
@camperbot
Sep 07 2016 18:44
subbycoon sends brownie points to @kevincauto :sparkles: :thumbsup: :sparkles:
:cookie: 306 | @kevincauto |http://www.freecodecamp.com/kevincauto
Steven Cruz
@itsstoiven
Sep 07 2016 18:44
@KoniKodes i've tried that but it didn't make a difference
Toni Shortsleeve
@KoniKodes
Sep 07 2016 18:45
@itsstoiven About two months ago Google changed the rules on api security. Let me look at something else.
Steven Cruz
@itsstoiven
Sep 07 2016 18:45
@KoniKodes ahh okay. please let me know if there's any work around
Toni Shortsleeve
@KoniKodes
Sep 07 2016 18:47
Steven Cruz
@itsstoiven
Sep 07 2016 18:52
@KoniKodes sorry, im not sure how that's relevant. i thought i was using jsonp correctly since i was using a callback function in my code
Tyler Moeller
@TylerMoeller
Sep 07 2016 18:54
@itsstoiven Load your codepen over http link and change the API call to use HTTP. Forismatic does not support HTTPS.
Steven Cruz
@itsstoiven
Sep 07 2016 18:55
@TylerMoeller that's what it was initially, but it wasn't working
Tyler Moeller
@TylerMoeller
Sep 07 2016 18:56
@itsstoiven It works for me. What browser are you using?
Klaus Mana
@KlausMana
Sep 07 2016 18:56
is this legit?
latitude = navigator.geolocation.getCurrentPosition(function(position){
  return position.coords.latitude;
});
Steven Cruz
@itsstoiven
Sep 07 2016 18:56
@TylerMoeller ive tried testing both on chrome and firefox. it shows no quote at all
Klaus Mana
@KlausMana
Sep 07 2016 18:56
will this store the latitude inside variable 'latitude'?
Tyler Moeller
@TylerMoeller
Sep 07 2016 18:57
@itsstoiven Are you 100% sure you are loading your pen over HTTP instead of HTTPS? http://codepen.io/itsstoiven/pen/pyqQqq?editors=0110
Klaus Mana
@KlausMana
Sep 07 2016 18:58
can someone look at my code please?
Toni Shortsleeve
@KoniKodes
Sep 07 2016 18:59
@KlausMana what is your pen?
Steven Cruz
@itsstoiven
Sep 07 2016 18:59
@TylerMoeller ah i see. sorry about that. it works perfectly fine! is there any way to work around the https call or is it just completely restricted to http?
Tyler Moeller
@TylerMoeller
Sep 07 2016 19:00
@itsstoiven This is an ugly hack, but you can use a HTTPS proxy with your API:
if (window.location.protocol !== 'http:') url = 'https://crossorigin.me/' + url;
@KlausMana Your code is correct, but will only work over HTTPS on Chrome.
Klaus Mana
@KlausMana
Sep 07 2016 19:01
how do I make it so it works in other browsers too?
Toni Shortsleeve
@KoniKodes
Sep 07 2016 19:01
or try wunderground
Klaus Mana
@KlausMana
Sep 07 2016 19:01
and why will it only run over https in chrome @TylerMoeller ?
Toni Shortsleeve
@KoniKodes
Sep 07 2016 19:02
@TylerMoeller I've read about some issues with crossorigin.me, although I don't remember what they were.
Tyler Moeller
@TylerMoeller
Sep 07 2016 19:02
@KlausMana You'll need to use a location API that supports HTTP, but it will be less accurate. Something like http://ip-api.com/json
Klaus Mana
@KlausMana
Sep 07 2016 19:02
nice
Tyler Moeller
@TylerMoeller
Sep 07 2016 19:02
@KoniKodes Yeah, it's really just a hack. I don't recommend it
Klaus Mana
@KlausMana
Sep 07 2016 19:02
how do I implement that?
do I need like a key?
Tyler Moeller
@TylerMoeller
Sep 07 2016 19:03
@KlausMana For security purposes, google requires accurate location over HTTPS. That's why it won't work over HTTP in chrome. To use that API, just do a getJSON call and parse the JSON.
No key needed
Klaus Mana
@KlausMana
Sep 07 2016 19:03
erm
idk how to do that :stuck_out_tongue:
Toni Shortsleeve
@KoniKodes
Sep 07 2016 19:04
@KlausMana wunderground.com has a secure api. It requires a key, but it free when you sign up.
Steven Cruz
@itsstoiven
Sep 07 2016 19:04
@TylerMoeller ahhh okay. thanks a bunch for the help!
CamperBot
@camperbot
Sep 07 2016 19:04
itsstoiven sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 795 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Sep 07 2016 19:05
@KlausMana You are off to a good start with your ajax call to the OpenWeatherMap API. It's the same approach for http://ip-api.com/json
Klaus Mana
@KlausMana
Sep 07 2016 19:06
so same as that?
ok ty
so after implementing that all I have to do is latitude = json.lat;?
or json.lat(); ?
@TylerMoeller
Tyler Moeller
@TylerMoeller
Sep 07 2016 19:12
@KlausMana From looking at your pen, you haven't added jQuery to your Codepen settings yet. Your $.ajax call will fail until you add that. This should do what you want:
$.ajax ({
  url : "http://ip-api.com/json"
}).done(function(data) {
  alert(data.lat + ',' + data.lon);
}).fail(function(err) {
  console.log(err);
});
Use that to figure out how to set the variables and pass them to the weather API.
Klaus Mana
@KlausMana
Sep 07 2016 19:12
ok
Klaus Mana
@KlausMana
Sep 07 2016 19:17
can working in ms edge be a problem for me?
@TylerMoeller ok, so is this good?
function Weather(latitude , longtitude){

  $.ajax ({
  url : "http://ip-api.com/json"
}).done(function(data) {
  alert(data.lat + ',' + data.lon);
}).fail(function(err) {
  console.log(err);
});
  latitude = data.lat;
  longtitude = data.lon;
var apiKey  = "fffc77f90fb489748fe36ae1b79ac8b5";

$.ajax ({
  dataType : "json",
  url : "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longtitude + "&APPID=" + apiKey,
  type : "GET"
});
}

console.log();
i'm sorry for the disturbance, just that I don't quite get these stuff so well, there were too little to none tutorials on freecodecamp about the use of API's and jQuery, and I haven't looked anywhere else than here
People, if somebody could help me on this Tribute Page project. Is there a way to make the text smaller without compromising its size in smaller screens?
Toni Shortsleeve
@KoniKodes
Sep 07 2016 19:34
@luscariot You can set your font size to em which is a little more fluid than px. 1em is usually the size of the font-size (12-16px), if you console your page in Google and inspect the elements, it will tell you what the font is. Then you can work on it from there.
@KlausMana try youtube search API and you should find some good videos to help.
Sorin Ruse
@sorinr
Sep 07 2016 19:35
@KlausMana your js part is not well structured. it should be something like weather app
Toni Shortsleeve
@KoniKodes
Sep 07 2016 19:36
@sorinr good to see you.
luscariot
@luscariot
Sep 07 2016 19:36
@KoniKodes Thank you! But the thing is I wanted to make the text block (like margin and stuff) look smaller, like to fit inside the image margin. If I change the size of margin or padding, the text looks weird in smaller screens. I'm not sure if I'm making any sense...
CamperBot
@camperbot
Sep 07 2016 19:36
:cookie: 364 | @konikodes |http://www.freecodecamp.com/konikodes
luscariot sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
Sorin Ruse
@sorinr
Sep 07 2016 19:39
@KoniKodes hi there. glad to see u too
Toni Shortsleeve
@KoniKodes
Sep 07 2016 19:40
@luscariot You are using bootstrap, so you take advantage of it. Make your container class include container-fluid, and this may help.
@sorinr How have you been?
Sorin Ruse
@sorinr
Sep 07 2016 19:41
@KoniKodes just fine tnx. working on a travel portal
Toni Shortsleeve
@KoniKodes
Sep 07 2016 19:42
@sorinr That's cool. l'm at the promodora clock and came in here to take a break.
David
@DavidLi-Minxiao
Sep 07 2016 19:42
Hey guys, any reason why my background colors aren't showing?
CSS would be:
body{
background-color: #000000;
}
.about{
background-color: #f2f2f2;
}
CamperBot
@camperbot
Sep 07 2016 19:42
you need to ask about @someone!
Toni Shortsleeve
@KoniKodes
Sep 07 2016 19:43
@arvendragon what is your pen?
Calling Bootstrap
Tyler Moeller
@TylerMoeller
Sep 07 2016 19:43
@KlausMana notice how you have the .done(function(data)... after your call to ip-api.com? That's where you parse the json. You'll also need that for your weather API call. The main issue aside from that is variable scope. This may be a good refresher: https://www.freecodecamp.com/challenges/global-vs-local-scope-in-functions
Toni Shortsleeve
@KoniKodes
Sep 07 2016 19:45
@arvendragon first, in codepen you don't need the <head>. You want to change the settings in the upper right hand corner under css to bring in bootstrap , and JS to bring in the js version.
Gustavo
@gustavocd
Sep 07 2016 19:45
Hi. I was wondering where can I find free resources to use in my portfolio? such as images, videos, and so on
Toni Shortsleeve
@KoniKodes
Sep 07 2016 19:46
@gustavocd https://pixabay.com/ has a great source for photos, but I think you will need to host them on a different secure platform.
David
@DavidLi-Minxiao
Sep 07 2016 19:46
@KoniKodes for some reason removing the head solved that problem, thank you!
CamperBot
@camperbot
Sep 07 2016 19:46
arvendragon sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 365 | @konikodes |http://www.freecodecamp.com/konikodes
Tyler Moeller
@TylerMoeller
Sep 07 2016 19:47
@gustavocd This is also a good list: https://github.com/neutraltone/awesome-stock-resources
Toni Shortsleeve
@KoniKodes
Sep 07 2016 19:47
@arvendragon Great! You may want to add the bootstrap js (Quick Add dropdown) as well.
Sorin Ruse
@sorinr
Sep 07 2016 19:47
@KoniKodes me too. just a break from airports, routes, hotels, city events, ecc :)
Toni Shortsleeve
@KoniKodes
Sep 07 2016 19:48
@TylerMoeller This is a great resource! Thank you for sharing.
CamperBot
@camperbot
Sep 07 2016 19:48
konikodes sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 796 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Toni Shortsleeve
@KoniKodes
Sep 07 2016 19:48
@sorinr All the fun stuff, right?
Tyler Moeller
@TylerMoeller
Sep 07 2016 19:50
@KoniKodes Of course! The "Awesome Lists" on github are really helpful, there are awesome lists for just about everything.
Toni Shortsleeve
@KoniKodes
Sep 07 2016 19:50
@TylerMoeller :-) I'm still exploring all that github has to offer.
David
@DavidLi-Minxiao
Sep 07 2016 19:51
Actually rip, I'm still having problems with CSS selectors. It seem like in the CodePen, the HTML elements can be properly selected but ID/Class tags aren't working well
Sorin Ruse
@sorinr
Sep 07 2016 19:51
@KoniKodes yes. kind of challenging stuff coz i have to update different parts of the page based on live search data
Toni Shortsleeve
@KoniKodes
Sep 07 2016 19:52
@sorinr Wow, I'm having enough problems getting my searches and autocompletes to work. I can't wait to see what you do with it.
Sorin Ruse
@sorinr
Sep 07 2016 19:54
@KoniKodes it will take a while to decide first if i go for vue.js or react
Toni Shortsleeve
@KoniKodes
Sep 07 2016 19:55
@arvendragon It's looking better. Your id/class should be addressed in css. I've only seen the class section so far, and that worked on your background change.
@sorinr Which do you prefer?
Sorin Ruse
@sorinr
Sep 07 2016 20:01
@KoniKodes i tend to go for vue more but for the moment i'm not excluding react
Toni Shortsleeve
@KoniKodes
Sep 07 2016 20:02
@sorinr I've been researching react, but have touched it yet. I'm not familiar with vue.
Sorin Ruse
@sorinr
Sep 07 2016 20:07
@KoniKodes what i don't like about react is that i have to move my "html" to js
Toni Shortsleeve
@KoniKodes
Sep 07 2016 20:15
@sorinr Oh. That would change my whole mindset. Maybe I should look into vue first.
Toni Shortsleeve
@KoniKodes
Sep 07 2016 20:45
Back to my clock. See you later.
ivanposavec
@ivanposavec
Sep 07 2016 21:11
I need quickly contact form for one site. can someone help me with that?
Nicholas D Shaw
@NicholasDShaw
Sep 07 2016 21:12
hey @ivanposavec sure
send me a pm
ivanposavec
@ivanposavec
Sep 07 2016 21:12
@NicholasDShaw can you send me the pm? because i am lost in this chat.. lol
Chase
@Belax8
Sep 07 2016 21:25
slow day?
Sarah
@UnholyAvenger
Sep 07 2016 21:25
Newb here, working on my front-end tribute page. Problem: I've nested everything in a div element with class "container-fluid" but the image will not resize with the rest of it. Am I missing something?
Chase
@Belax8
Sep 07 2016 21:26
@UnholyAvenger do you have a link to share so we can see the code?
Sorry about that, and thanks.
Chase
@Belax8
Sep 07 2016 21:30
@UnholyAvenger give your image a class and then in your css put width: 100%; in that class
Like <img src="https://d.ibtimes.co.uk/en/full/1467924/aung-san-suu-kyi.jpg" alt="Supporters of Aung San Suu Kyi hold posters bearing her image" class="testing"> in your html and then .testing {width: 100%;} in your css
Sarah
@UnholyAvenger
Sep 07 2016 21:37
It's alive!!!!!! Thank you sooooo much!
Chase
@Belax8
Sep 07 2016 21:37
Anytime! :smile:
Sarah
@UnholyAvenger
Sep 07 2016 21:41
Virtual hugs for chase!
it took me 3 days to finish
something
Nicholas D Shaw
@NicholasDShaw
Sep 07 2016 22:02
Hey Robert, not bad, maybe include a link to your facebook page instead of telling people to look you up.
<a href="url to your facebook page">Follow me on Facebook</a>
Robert
@PredaRobert
Sep 07 2016 22:09
@NicholasDShaw Thank you that is the plan
CamperBot
@camperbot
Sep 07 2016 22:09
predarobert sends brownie points to @nicholasdshaw :sparkles: :thumbsup: :sparkles:
:cookie: 249 | @nicholasdshaw |http://www.freecodecamp.com/nicholasdshaw
Nicholas D Shaw
@NicholasDShaw
Sep 07 2016 22:12
@camperbot how do you get brownie points?
Jason Luboff
@JLuboff
Sep 07 2016 22:13
You just mention somebody and then say thanks/thank you/etc
Nicholas D Shaw
@NicholasDShaw
Sep 07 2016 22:14
@JLuboff cool, thank you
CamperBot
@camperbot
Sep 07 2016 22:14
nicholasdshaw sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 353 | @jluboff |http://www.freecodecamp.com/jluboff
Nicholas D Shaw
@NicholasDShaw
Sep 07 2016 22:14
;)
Evan Crowe
@ezcrowe
Sep 07 2016 22:16
Quick question! For some reason my Twitter icon image is not acting as a link like I am wanting. Is there something in my code that is causing this?
Code:
<div class="container-fluid" id="contact">
<h3 class="contact">Contact me.</h3>
<br>
<div class="contact-row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<a ref="http://www.twitter.com" target="_blank">
<img class="img-responsive center-block" width="100" height="auto" style="margin-bottom:40px" src="http://icons.iconarchive.com/icons/sicons/basic-round-social/512/twitter-icon.png" alt="Twitter Logo">
</a>
</div>
Anna
@Anntol
Sep 07 2016 22:21
@ezcrowe a href
Evan Crowe
@ezcrowe
Sep 07 2016 22:21
Ah! Missed that! Thanks @Anntol
CamperBot
@camperbot
Sep 07 2016 22:21
ezcrowe sends brownie points to @anntol :sparkles: :thumbsup: :sparkles:
:cookie: 364 | @anntol |http://www.freecodecamp.com/anntol
LordYamanouchi
@LordYamanouchi
Sep 07 2016 22:25
Hey does anyone know how I can modify this code to toggle between display: block or none?
$(".glass").click(function(){
  $("input").css("display", "block");

});
Nicholas D Shaw
@NicholasDShaw
Sep 07 2016 22:38
Evan Crowe
@ezcrowe
Sep 07 2016 22:39
My Navbar will collapse but once collapsed when I click the collapsed icon nothing happens. It doesn't expand. Any thoughts?
My code:
<!--Start of Navigation Bar-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#home">Evan Crowe</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!--End of Navigation Bar-->
Evan Crowe
@ezcrowe
Sep 07 2016 22:46
However, I just tried copied the same code into w3schools.com test editor and it worked as it should but not when I try it in CodePen
Tyler Moeller
@TylerMoeller
Sep 07 2016 22:56
@ezcrowe Open your codepen settings and click "JavaScript". Add jQuery first and then Bootstrap.js.
Nicholas D Shaw
@NicholasDShaw
Sep 07 2016 22:59
@ezcrowe link to the code pen please?
@TylerMoeller I just did. It didn't seem to change my problem. Just linked the Pen above
Tyler Moeller
@TylerMoeller
Sep 07 2016 23:05
@ezcrowe You added jQuery-ui instead of jQuery.
Two different libraries
Evan Crowe
@ezcrowe
Sep 07 2016 23:07
Fixed! Thanks @TylerMoeller
CamperBot
@camperbot
Sep 07 2016 23:07
ezcrowe sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 798 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Hossein
@Hox1374
Sep 07 2016 23:08
i' m challenge 117 now what do you do ?
Ken Haduch
@khaduch
Sep 07 2016 23:21
@itsstoiven - just load your page using http:// instead of https:// - maybe you should put a reminder note at the top? (I see that @KoniKodes posted this same solution... quite a while ago. I guess I'm way behind on the chat stream! ;) )
Tyler Moeller
@TylerMoeller
Sep 07 2016 23:22
Where are people finding numbers for the challenges?
Ken Haduch
@khaduch
Sep 07 2016 23:23
@TylerMoeller - they take the brownie points value, prominently displayed at the top of the page. @Hox1374 - you need to post the name of the challenge, the numbers are irrelevant to the sequence of the challenges.
Tyler Moeller
@TylerMoeller
Sep 07 2016 23:23
Ahhh lol, thanks @khaduch Big mystery solved!
CamperBot
@camperbot
Sep 07 2016 23:23
tylermoeller sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1641 | @khaduch |http://www.freecodecamp.com/khaduch
will
@williezerocool
Sep 07 2016 23:55
how do i share my project from codePen to FCC?
Tyler Moeller
@TylerMoeller
Sep 07 2016 23:55
@williezerocool Just use the URL from the address bar in your browser
will
@williezerocool
Sep 07 2016 23:59
thanks