These are chat archives for FreeCodeCamp/HelpFrontEnd

19th
Dec 2016
AudioGen
@AudioGen
Dec 19 2016 00:04
How do you do the twitter tweet
?
Josaped Moreno
@androuino
Dec 19 2016 00:05
hello, I'm doing the Wikipedia Viewer and I would like to add a functionality that if the user's keyword doesn't match I will tell the user that there's no article found. Here's my pen: http://codepen.io/shaolin30/full/ZBrqJJ/
Thanks in advance.
Waqas Abbasi
@Waqas909
Dec 19 2016 00:15

Any alternative to Asyn: false ?? My CodePen Freezes. I have an ajax request Inside a for loop, and to retrieve the data before the loop finishes, I added Asyn: false but that freezes the website (When it's frozen it is fetching all the data required) PLease have look and offer solutions. THank you.

http://codepen.io/Waqas909/pen/MbZVJx?editors=0011

Tom
@moT01
Dec 19 2016 00:18
@androuino im trying you put together a url, with one of those keywords in, to see what it would return... then maybe put a little logic in there that if the object.length === 0 you could return the text you want
aRtoo
@artoodeeto
Dec 19 2016 00:37
hi guys how do you make ur flex box centered?? http://codepen.io/artoo/pen/ZBbYyM?editors=1100
hi guys how do you make ur flex box center?? check code please. thank you. http://codepen.io/artoo/pen/ZBbYyM?editors=1100
Tom
@moT01
Dec 19 2016 00:43
@artoodeeto
.head_text {
  margin-left: auto;
  margin-right: auto;
}
Henz
@pilotwhiterabbit
Dec 19 2016 01:12
Active nav buttons won't change as I scroll the page. Any ideas? http://codepen.io/pilotwhiterabbit/pen/BQvRdL
DennisLoska
@DennisLoska
Dec 19 2016 01:14

@artoodeeto
You have to define the paddings and margins of your flex-box-children. A quick way is to give margin left and right to the most left/right children:

#tjc {
        margin-left: 25%;
}

#hos {
      margin-right: 25%;
}

You can use diferent percentages of course.

Another way would be to give all children the same padding and or margin - that will center it horizontally.

you need to take the 100%-childrenWidth/2 is the way to go
Ken Haduch
@khaduch
Dec 19 2016 01:31
@pilotwhiterabbit - you are getting a syntax error when the page is scrolled - Uncaught Error: Syntax error, unrecognized expression: [href=#top]
Tyler Moeller
@TylerMoeller
Dec 19 2016 02:04
@Waqas909 You can loop through it with a method that uses a callback, like .forEach or .map.
Ken Haduch
@khaduch
Dec 19 2016 02:09
@pilotwhiterabbit - I did two things to change your code and it kind of works - I modified that .filter to look like this: .filter("[href='#"+id+"']"), to put quotes around the ID value. And I added a class .active { background-color: red; } which I am seeing highlight the background of the items. There is one little snag - the Homea navbar item stays highlighted as you have it set up right now?
I changed the HTML slightly - the "Home" element is getting the class "active" on the anchor, I moved it to the <li class="active"><a href="#top">Home</a></li> element. The code is attaching the class to the <li> elements, so I just started with that on the initial page load.
aRtoo
@artoodeeto
Dec 19 2016 02:11
what is the right way to put a background image?? background-image: url('Desert_new/volunteer/volunteer.png');

what is the right way to put a background image??
this is how I put it. nothing is showing.

background-image: url('Desert_new/volunteer/volunteer.png');

Ken Haduch
@khaduch
Dec 19 2016 02:12
@artoodeeto - you probably need a fully-qualified http:// url, you don't have that. Depending on whether or not you are local or on codepen? If you're on codepen, you probably have to have a full URL to get the image.
aRtoo
@artoodeeto
Dec 19 2016 02:13
@khaduch what if im not using a url??
Ken Haduch
@khaduch
Dec 19 2016 02:13
@artoodeeto - where is your image located?
aRtoo
@artoodeeto
Dec 19 2016 02:13
inside a folder
Ken Haduch
@khaduch
Dec 19 2016 02:14
@artoodeeto - are you running this on your local system? I need a little more context...
aRtoo
@artoodeeto
Dec 19 2016 02:15

@khaduch yea. heres the location C:\Users\aRtoo\Desktop\web_dev\DESEEEERT\Desert_new\volunteer

my index and css are insinde the Desert_new folder

Ken Haduch
@khaduch
Dec 19 2016 02:17
@artoodeeto - you can, perhaps, open the developer console and see if there are any errors listed? It would show what it is trying to access it, what the full path would be?
aRtoo
@artoodeeto
Dec 19 2016 02:19
C:\Users\aRtoo\Desktop\web_dev\DESEEEERT\Desert_new\volunteer\Volunteer.jpg this is the full path
Ken Haduch
@khaduch
Dec 19 2016 02:19
@artoodeeto - try putting backslash characters in your path name rather than forward slash? And capitalize the file name? I've seen some times when it is case sensitive?
Waqas Abbasi
@Waqas909
Dec 19 2016 02:26

@Waqas909 You can loop through it with a method that uses a callback, like .forEach or .map.

@TylerMoeller But does it not have the same effect? Does it wait for all the api calls to be done before finishing?

Ken Haduch
@khaduch
Dec 19 2016 02:27

@artoodeeto - I see one other thing on this page: https://developer.mozilla.org/en-US/docs/Web/CSS/url -

The URL may be unquoted, or quoted by single or double quotes. Relative URLs are allowed and are relative to the URL of the stylesheet (not to the URL of the web page).

So - relative to the URL of the stylesheet - would that make a difference? In that case, it might just be background-image: url('volunteer/volunteer.png'); or background-image: url('volunteer/Volunteer.png');

Tyler Moeller
@TylerMoeller
Dec 19 2016 02:28
aRtoo
@artoodeeto
Dec 19 2016 02:29
@khaduch thank you ill try
CamperBot
@camperbot
Dec 19 2016 02:29
artoodeeto sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2128 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Dec 19 2016 02:30
@artoodeeto - let me know if that works?
Tyler Moeller
@TylerMoeller
Dec 19 2016 02:32
For people not in the USA, wondering if the time and units show up correctly according to your location? https://codepen.io/TylerMoeller/pen/woRygW?editors=0110
Ken Haduch
@khaduch
Dec 19 2016 02:36
@TylerMoeller - I'm in the US, and it isn't working for me, at least not the first load... I just get this blue line racing across the screen...
Tyler Moeller
@TylerMoeller
Dec 19 2016 02:36
Hmm, any errors in your console? Wondering if it's the API or my code
Ken Haduch
@khaduch
Dec 19 2016 02:37
@TylerMoeller - reloaded, and it displayed the weather. It's a few miles off (again, in the USA) but looks okay otherwise.
@TylerMoeller - there was initially an error in the console: Uncaught ReferenceError: currentConditionsURL is not defined at getWeatherData (pen.js:61) at success (pen.js:81)
Tyler Moeller
@TylerMoeller
Dec 19 2016 02:38
Thanks @khaduch, I'm seeing that loading issue sometimes but not getting errors in the console. I'll try to narrow it down - maybe add a timeout as a last resort.
CamperBot
@camperbot
Dec 19 2016 02:38
tylermoeller sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2129 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Dec 19 2016 02:39
@TylerMoeller - you're welcome. There is also an error loading some font - Access to Font at 'https://production-assets.codepen.io/assets/telefon/bold/af889c53-1ee3-4868…50-3-b7a87e0fbd213943fae0c0ef5985635dd43fa9c24876b2725127a13ccaf4ab6a.woff' from origin 'https://codepen.io' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://codepen.io' that is not equal to the supplied origin. Origin 'https://codepen.io' is therefore not allowed access.
Tyler Moeller
@TylerMoeller
Dec 19 2016 02:39
^^ Lots of pens seems to be reporting that - I'm guessing it's a codepen issue, but not sure yet. Thanks again!
Ken Haduch
@khaduch
Dec 19 2016 02:39
that might be a codepen issue...
Kamil Malek
@KamilMalek
Dec 19 2016 02:42
Hey guys how can I do the lights on effects in Simon Game with jquery? I've been using addClass() for a lighter color of shade and fadeIn().fadeOut() method but none of that really satisfies me - does anyone know of a better way?
Tyler Moeller
@TylerMoeller
Dec 19 2016 02:54
@KamilMalek You can use CSS to change the opacity from 0.5, for example, to 1.0 when the light button is :active.
Kamil Malek
@KamilMalek
Dec 19 2016 03:03
@TylerMoeller Thanks a lot, that really helped :)
CamperBot
@camperbot
Dec 19 2016 03:03
kamilmalek sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1168 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tom
@moT01
Dec 19 2016 03:28
does a space in a regular expression cause problems?
toccomy
@toccomy
Dec 19 2016 04:37
Hello all ..I've been working on this profile days for number of painstaking days...Im just ready to move on...What I did realize it's impossible to fully know all of the code for bootstrap css etc but simply know how to research the answer and figure into your existing code. Is this really the key to being a developer?
In any case any feedback on my page are welcome..good or bad..thanks in advance. http://codepen.io/toccomy/full/vyvebL/
luoren
@monsterzzz
Dec 19 2016 04:48
could you help me to evaluate and test my project...
Tom
@moT01
Dec 19 2016 04:49
i would say you need to be able to figure things out on the go that you don't know, ...but also the more you know and have memorized the better you understand things and the faster you can do things @toccomy
@toccomy a lot of the text is hard to read against those backgrounds, ...specifically the medocc area
@toccomy when you shrink the window way down, your layout gets out of whack
@toccomy you probly learned a ton figuring out all that css and stuff, ...now its in your arsenal
Tom
@moT01
Dec 19 2016 04:56
@monsterzzz it works, the computer isn't exactly a grandmaster
Zaurbek Zhakupov
@zzhakupov
Dec 19 2016 04:56
Hello guys can I have some React help?
toccomy
@toccomy
Dec 19 2016 04:57
@moT01 Thanks for your comment...I just added <strong></strong> to make text more readable. How do I correct for shrinkage..I thought <div class="container"> and class="col-lg-12 automatically adjusts
CamperBot
@camperbot
Dec 19 2016 04:57
toccomy sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 422 | @mot01 |http://www.freecodecamp.com/mot01
Ken Haduch
@khaduch
Dec 19 2016 04:57
@monsterzzz - I tried it - the results were that I feel like a tic-tac-toe champ! :) But it does work - and I guess they took away the requirement for it to be unbeatable, so looks good! :)
Tom
@moT01
Dec 19 2016 04:58
@toccomy add more classes for smaller window sizes
col-lg-12 means it will use 12 columns on a large window
toccomy
@toccomy
Dec 19 2016 04:59
@moT01 like "col-xs-6"?
Tom
@moT01
Dec 19 2016 04:59
yea
luoren
@monsterzzz
Dec 19 2016 05:00
@khaduch thanks~!
CamperBot
@camperbot
Dec 19 2016 05:00
monsterzzz sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2130 | @khaduch |http://www.freecodecamp.com/khaduch
toccomy
@toccomy
Dec 19 2016 05:00
@moT01 Thanks! Will try now
CamperBot
@camperbot
Dec 19 2016 05:00
toccomy sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:warning: toccomy already gave mot01 points
Adam Faraj
@adamfaraj
Dec 19 2016 05:00
Hello all
luoren
@monsterzzz
Dec 19 2016 05:01
@moT01 thanks ... make computer be a grandmaster is hard..
CamperBot
@camperbot
Dec 19 2016 05:01
monsterzzz sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 423 | @mot01 |http://www.freecodecamp.com/mot01
Adam Faraj
@adamfaraj
Dec 19 2016 05:01
I have a quick question
I'm trying to build my personal portfolio webpage
and trying to pin my nav menu
here's my CSS code:

h1{
text-align: right;
color: purple;
margin: 50px;
background-color: purple;
padding: 25px;

}

doing this:
h1{
text-align: right;
color: purple;
margin: 50px;
background-color: purple;
padding: 25px;
position: fixed;
}
my menu is fixed, but changes the position all together
Tom
@moT01
Dec 19 2016 05:04
you could probly adjust it from where it gets fixed to, with some like top: 10px; lines
Adam Faraj
@adamfaraj
Dec 19 2016 05:05
excellent @moT01
Ken Haduch
@khaduch
Dec 19 2016 05:06

@toccomy - you might have some malformed HTML - it looks like your footer blends into the other content as the window is narrowed, And I agree about the text being hard to read on the busy background. You might be able to put some transparent background color in those divs to try and offset the text from the background, if you want to keep using those busy background images.

Also, you need to add jquery.js and bootstrap.js in your JS external plugins for the collapsed navbar to expand.

I just ran your page through the validator at validator.w3.org - there are many errors that it is reporting in the HTML page. You can run it and check and try to fix things if you go to that site and get the frame source for your page, copy it and paste it into the code area, then check. Some of the errors could just be cascading because of something wrong early on, but there are so many it's hard to tell...

Adam Faraj
@adamfaraj
Dec 19 2016 05:06
that worked, but the rest of the purple bar is gone
Tom
@moT01
Dec 19 2016 05:07
so make it bigger again
Adam Faraj
@adamfaraj
Dec 19 2016 05:08
how do i do that
Tom
@moT01
Dec 19 2016 05:08
width: 100%:
Anita
@achao26
Dec 19 2016 05:08
hey guys i am also starting my portfolio page but did i miss the part where they taught us on how to make a navigation bar? ie. linking to different parts of the page?
Adam Faraj
@adamfaraj
Dec 19 2016 05:09
@achao26 nope. you didn't miss it. they just throw you into that shit
just start researching
that's what I did
toccomy
@toccomy
Dec 19 2016 05:10
@khaduch Ken Thanks! I will try that now. I feel like ive been working on this nonstop for 5 days...maybe im trying to get to fancy with it
CamperBot
@camperbot
Dec 19 2016 05:10
toccomy sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2131 | @khaduch |http://www.freecodecamp.com/khaduch
Anita
@achao26
Dec 19 2016 05:10
@adamfaraj haha thanks. i was like wtf
CamperBot
@camperbot
Dec 19 2016 05:10
achao26 sends brownie points to @adamfaraj :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @adamfaraj |http://www.freecodecamp.com/adamfaraj
Adam Faraj
@adamfaraj
Dec 19 2016 05:12
@achao26 yeah. i have no idea what i'm doing. but it's probably the best way to learn
@moT01 so i did width:100%; but there's still just this sliver of white space on the right.
Tom
@moT01
Dec 19 2016 05:14
your body comes with a default margin, you want to remove it
Pramod Potdar
@ppmakeitcount
Dec 19 2016 05:14
hello guys. I am trying to make Local weather app. I took look at example code pen. I have no idea about the code written in javascript pannel. Can anybody tell me "What things i should know to build the app on my own. Without copy pasting any code. " and what are some helpful resources.
Adam Faraj
@adamfaraj
Dec 19 2016 05:15
thanks @moT01
CamperBot
@camperbot
Dec 19 2016 05:15
adamfaraj sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 424 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Dec 19 2016 05:18
@PP-MakeItCount some of the examples they give use forms of javascript im not familiar with, ...angular or other libraries, ...i learned a lot of jquery seems to work fine for the projects, ...you must have used it in the quote machine
toccomy
@toccomy
Dec 19 2016 05:22
@khaduch so something like this $('.dropdown-toggle').dropdown()?
Adam Faraj
@adamfaraj
Dec 19 2016 05:24
@moT01 so I'm trying to put a small paragraph after the nav menu
<div class="Menu">
<nav>
<h1> <a href="#"> About</a> <a href="#"> Portfolio</a> <a href="#"> Contact </a>
</h1>
</nav>
</div>
<div>
<p1>Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture.
</p1>
</div>
and p1 is sitting above my h1....
i don't understand
Pramod Potdar
@ppmakeitcount
Dec 19 2016 05:31
@moT01 actually for my quote machine i need to copy paste some of the code. And now i dont want to repeat it. I should be able work things on my own. Thats why i need some help. What are things i should learn first before coding weather app.
Javier Rivera
@jrivera27
Dec 19 2016 06:17

Hey Guys, I had created a carousel for my pics and it was working fine, I went to work on something else within the code and noticed that it had stopped working. Can someone please take a quick look at the carousel code and provide a little feedback on what you think might have happened? ``` <div class="container">
<div class="row">
<div class="col-sm-12">

    <div id="my-slider" class="carousel slide" data-ride="carousel">

      <!-- Indicators dot nav -->
      <ol class="carousel-indicators">
        <li data-target="#my-slider" data-slide-to "0" class="active"></li>
        <li data-target="#my-slider" data-slide-to "1"></li>
        <li data-target="#my-slider" data-slide-to "2"></li>
      </ol>


      <!-- Wrapper for slides -->

      <div class="carousel-inner">

        <div class="item active">
          <img src="http://www.jasagroproducts.com/wp-content/uploads/2016/08/under-construction-1.jpg" alt="Construction" class="img-responsive">
          <div class="carousel-caption">
            <h2><Whatever Text></h2>
          </div>

        </div>

        <div class="item">
          <img src="https://lh3.googleusercontent.com/-JgJWbfGSI4g/Tr9Tgrk1SGI/AAAAAAAAAIU/uDc_-XOl4gY/s600/under-construction.png" alt="Construction" class="img-responsive">
          <div class="carousel-caption">
            <h2><Whatever Text></h2>
          </div>

        </div>

        <div class="item">
          <img src="http://vector.me/files/images/2/3/237567/website_under_construction.jpg" alt="Construction" class="img-responsive">
          <div class="carousel-caption">
            <h2><Whatever Text></h2>
          </div>

        </div>


      <!-- Controls or Next and Prev buttons -->

      <a class="left carousel-control" href="#my-slider" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>

      <a class="right carousel-control" href="#my-slider" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>

   </div>

          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
          <script src="js/bootstrap.js"></script>


  </div>
</div>

</div> ```

Fernand
@Ferdyboy81
Dec 19 2016 06:42
hi everyone, i have a question. On my index.html my navbar and logo are white, how can i change this to my subpage help.html?
Sorin Ruse
@sorinr
Dec 19 2016 07:01
@Ferdyboy81 as you have separate files, i suppose on each one you have the same navigation structure so, if you only need to change the apperance of the navbar in one file i would create a help-navbar class and style it in css. ofc you should add this class to your nav element in the help.html file
Fernand
@Ferdyboy81
Dec 19 2016 07:02
@sorinr thank you!
CamperBot
@camperbot
Dec 19 2016 07:02
ferdyboy81 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 976 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Dec 19 2016 07:02
@Ferdyboy81 welcome
Fernand
@Ferdyboy81
Dec 19 2016 07:03
@sorinr so im just pretty much going to copy & paste the navbar code from my index.html to help.html and from help.html just add that class right?
Sorin Ruse
@sorinr
Dec 19 2016 07:05
@Ferdyboy81 yep. u can name your class as u wish. i said help-navbar its easier to know to witch element it refers
dpnw
@dpnw
Dec 19 2016 07:13

Hey all - I'm doing the tribute page and having weird issues with the markup. The bullets In my un-ordered list are not being centered by the .text-center class in it's surrounding div, but the text is centering. It got more confusing when I noticed the following: The h3 that's above the ul is missing a bracket from it's closing tag and as a result, the bullets center properly. If you go to line 17 in the codepen link below, you'll see what I'm talking about.

http://codepen.io/volunteerfire/pen/ObaxWb

Ashan Mohammed
@AshanMohammed
Dec 19 2016 07:15
Hello Guys! how do i center a div inside another div which has class row?
<div class="container">
     <div class="row">
        <div class="contactdiv  col-lg-8 col-md-8 col-sm-10 col-xs-12 center-block">

        </div>
     </div>   
   </div>
.contactdiv{
     background-color: rgb(200,200,200);
     height: 500px;
    margin:0 auto;
 }
Ashan Mohammed
@AshanMohammed
Dec 19 2016 07:20
@dpnw Check this out! I have done a small change to your CSS
http://codepen.io/ashan_zeroxster/pen/vybmBv
dpnw
@dpnw
Dec 19 2016 07:30
@AshanMohammed thanks so much! I just looked it over - is what you added in the CSS the only change that was necessary?
CamperBot
@camperbot
Dec 19 2016 07:30
dpnw sends brownie points to @ashanmohammed :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @ashanmohammed |http://www.freecodecamp.com/ashanmohammed
Ashan Mohammed
@AshanMohammed
Dec 19 2016 07:32
@dpnw Yes! That's all you need.
dpnw
@dpnw
Dec 19 2016 07:35
Ok, great
Pramod Potdar
@ppmakeitcount
Dec 19 2016 08:23
$.getJSON("http://api.openweathermap.org/data/2.5/forecast/daily?q=Montpellier&mode=json&units=metric&cnt=10" ,function(data) {
    console.log(data);
});
Hey guys this above code for weather app is giving error like : unauthroized 401
any idea what is going wrong.
PankajKaushik78
@PankajKaushik78
Dec 19 2016 08:44
hello world
CamperBot
@camperbot
Dec 19 2016 08:44

welcome to FreeCodeCamp @PankajKaushik78!

PankajKaushik78
@PankajKaushik78
Dec 19 2016 08:45
my challenge is make it
FirstLine
\SecondLine\
ThirdLine
var myStr="FirstLine \n\SecondLine\ \rThirdLine";
whats the error in my code
help please :smile:
CamperBot
@camperbot
Dec 19 2016 08:45
no wiki entry for: please smile
Sorin Ruse
@sorinr
Dec 19 2016 08:55
@PP-MakeItCount you need to register and get an api key. its free
alpox
@alpox
Dec 19 2016 09:36
@PP-MakeItCount You have to include your API key
@sorinr oups :-)
Fatah N
@fatahn
Dec 19 2016 09:56

hey guys. I would appreciate a little help with forEach & filter in this code

[1,2].forEach(function(elem){
     diff = [1,2,3,4,5,6,7].filter(function(value){
     return value !== elem;
       });
    });

I basically want to filter out 1 & 2 from the larger [1,2,3,4,5,6,7] array

Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 19 2016 10:05
https://mr-kumar-abhishek.github.io/js-calculator/ <-- need some input on the design , is it okay enough to put the functionality now ?
Sonja
@sonjaSch
Dec 19 2016 10:19
Hi guys :)
I stuck in the weather app challange..
can anyone help me?
Sorin Ruse
@sorinr
Dec 19 2016 10:21
@Mr-Kumar-Abhishek the button shadows are not quite right but you can refine them later. its a nice design
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 19 2016 10:22
@sorinr yeah, I have to give proper inline shadows etc.... thanks :)
CamperBot
@camperbot
Dec 19 2016 10:22
mr-kumar-abhishek sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 977 | @sorinr |http://www.freecodecamp.com/sorinr
Pramod Potdar
@ppmakeitcount
Dec 19 2016 11:12
$.getJSON("http://ipinfo.io/json", function(response){
  console.log(response);
  var myCity = response.city;
  //console.log(myCity);
  var wApi = "api.openweathermap.org/data/2.5/weather?q=";
  var appid = "&APPID=15630c4ea38aeb18ffe04c3829b5d899"
  var units = "&units=metric";

  $.ajax

  $.getJSON('api.openweathermap.org/data/2.5/weather?q='+myCity+'&APPID=15630c4ea38aeb18ffe04c3829b5d899&units=metric', function(data){
    console.log(data);
  })
})
hey guys can anyone tell me whats wrong in this code. why code pen dont get responese.
if i copy paste the url the i get reponse but when using getJSON it just gives 404 error
Nikhil Goyal
@ngoyal100894
Dec 19 2016 11:18

Hi I am doing this problem https://www.freecodecamp.com/challenges/caesars-cipher
here is my code

var newString = "";
function rot13(str) { // LBH QVQ VG!
  for(i=0;i<str.length; i++){
    var charCode = str.charCodeAt(i);
    if(65<=charCode<=77){
      charCode += 13;
    }
    else if(78<=charCode<=90){
      charCode -= 13;
    }
    else{
      charCode = charCode;
    }
   newString += String.fromCharCode(charCode);
  }
  return newString;
}

// Change the inputs below to test
rot13("SERR PBQR PNZC");

I dont know where am i wrong but the out put is "`R-]O-][gP" which means it is not evaluating my second condition that is (78<=charCode<=90) .. i dont know why . Can you guys help?

Ken Haduch
@khaduch
Dec 19 2016 11:57
@ngoyal100894 - you cannot combine the test conditions into one compound test. It would have to be broken up into charCode >= 78 && charCode <= 90 or something along those lines.
Same for the other check.
HendPro12
@HendPro12
Dec 19 2016 12:14
Hello all. Can someone help me identify why my collapsing navbar button wont open? Im guessing that codepen isnt loading jquery before bootstrap but I dont know how to set the load order of that in codepen. http://codepen.io/HendPro12/pen/LbqzVB
heroiczero
@heroiczero
Dec 19 2016 12:19
@HendPro12 i do not think you are using jquery and i see your nav-bar fine in that page
HendPro12
@HendPro12
Dec 19 2016 12:20
@heroiczero but if you resize the page and click the button, you are seeing the inner buttons reappear?
yasingecer
@yasingecer
Dec 19 2016 12:27
hello to all. I've bit of a weird problem. i gave background color to a certain <div>. I can't see it in default zoom in chrome, but i can see it when i zoom in 200%. what might be the problem?
Callum Ward
@callumquick
Dec 19 2016 12:36
@HendPro12 You have JQuery, but you don't have the Bootstrap JS file which uses JQuery, JQuery is a dependency of the Bootstrap JS file, but won't actually activate the bootstrap components on its own!
@HendPro12 https://www.bootstrapcdn.com/ The second CDN link on this page is for the JS file
HendPro12
@HendPro12
Dec 19 2016 12:37
@callumquick Awesome :) thanks!
CamperBot
@camperbot
Dec 19 2016 12:37
hendpro12 sends brownie points to @callumquick :sparkles: :thumbsup: :sparkles:
:cookie: 315 | @callumquick |http://www.freecodecamp.com/callumquick
HendPro12
@HendPro12
Dec 19 2016 12:37
@callumquick its working now
Callum Ward
@callumquick
Dec 19 2016 12:38
@HendPro12 Np :)
Blaise
@Blaisebev
Dec 19 2016 12:55
hi guys! I am having some trouble lining up 3 images in the portfolio section. I am using <div class="row> but I can't seem to get them lined up. any tips? http://codepen.io/Blaisebev/full/ENdjox/
Marianissimus
@Marianissimus
Dec 19 2016 12:58
@Blaisebev hi. col-whatever-12 is actually class=row, so you can change that. furthermore, you have some new divs that are inside that row, but not inside one of the 3 col-md-4. This is what causes the problem - you have content outside the total 12 columns span
Blaise
@Blaisebev
Dec 19 2016 12:59
awesome, thank you for the advice! @Marianissimus
CamperBot
@camperbot
Dec 19 2016 12:59
blaisebev sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 219 | @marianissimus |http://www.freecodecamp.com/marianissimus

Good morning. I'm trying to get a countdown on the pomodoro project. I'd love some insight as to what is wrong with my code - instead of displaying the seconds from 59-0 it jumps directly to 1
html:

<body>
  <div>
    <p id="time">25 : 00</p>
  </div>
  <div>
    <input type="text" id="howLong" placeholder="how many minutes?">
    <button id="submit-time" onclick="setTime();">set timer</button>
  </div>
  <button onclick="startClock();">START</button>
  <button>STOP</button>
  <button onclick="restart();">RESET</button>
</body>

JS:

var timeInput = 25;
var minutes = 25;
var seconds = 0;

function setTime()
{
  timeInput = document.getElementById("howLong").value;
  minutes = timeInput;
  console.log(minutes);
  document.getElementById("time").innerHTML = minutes + " : " + seconds;
}

var intervId;

function startClock() {
      intervId = setInterval(countDown, 1000);
    }

    function countDown() {
      for (var sec = 59; sec >0; sec--) {
      document.getElementById("time").innerHTML = minutes + " : " + sec;
      };
    }

function restart() {
  minutes = timeInput;
  document.getElementById("time").innerHTML = minutes  + " : " + seconds;
}
Pieter Stokkink
@forkerino
Dec 19 2016 13:19
@mltr You are setting your clock 59 times in your countDown function.
so you wait one second with startClock and then it just counts down 59 times in quick succession (because of the for loop).
Robert Purcea
@RobertPurcea
Dec 19 2016 13:24
function Grid(width, height) {
  this.space = new Array(width * height);
  this.width = width;
  this.height = height;
}
Grid.prototype.isInside = function(vector) {
  return vector.x >= 0 && vector.x < this.width &&
         vector.y >= 0 && vector.y < this.height;
};
Is there a reason why the author of this book adds "isInside" after the Grid constructor, and not in it like he does with "width, space and height"?
Pieter Stokkink
@forkerino
Dec 19 2016 13:27
@Robertb4 yes!
If you put it inside, with every instance you create, you also copy the function, using, with large numbers of Grid objects, quite a bit of unnecessary memory
If you put it outside the constructor with a .prototype the function is attached to the prototype (like, for example, Array.prototype.reverse()).
And only one copy will remain in memory
Which can be called for all separate Grid objects.
Robert Purcea
@RobertPurcea
Dec 19 2016 13:30
oh got it thank you @forkerino
CamperBot
@camperbot
Dec 19 2016 13:30
robertb4 sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
:cookie: 404 | @forkerino |http://www.freecodecamp.com/forkerino
Pieter Stokkink
@forkerino
Dec 19 2016 13:31
@Robertb4 :thumbsup:
Bakri
@POIbakri
Dec 19 2016 13:50
ive just got to creating my portfolio page
I'm just clueless now I don't know where to start
anyone want to help
Sorin Ruse
@sorinr
Dec 19 2016 13:59
@POIbakri you will need some kind of navigation on the page that will point to some info sections on the page(about, portfolio, contact, etc). fill the sections with some content(text, imgs) but you can also put only some placeholders for the beggining .in a simple way thats it
Peter Steele
@PeterHSteele
Dec 19 2016 14:02
Does anyone know of an easy way to use audio in a codepen project? I'm trying to include a button push sound but it seems like most sites with free sounds don't want you to direct link to them
Mahak Narayan Singh
@makkBit
Dec 19 2016 14:05
@PeterHSteele
using js
var sound = new Audio('<your audio file>');
sound.play();
Johnathan Mullen
@MrJkmullen
Dec 19 2016 14:05
Could someone assist me with the Jasmine testing software please
Peter Steele
@PeterHSteele
Dec 19 2016 14:07
@makkBit so I don't need to upload it to codepen anywhere for it to work? thanks
CamperBot
@camperbot
Dec 19 2016 14:07
peterhsteele sends brownie points to @makkbit :sparkles: :thumbsup: :sparkles:
:cookie: 369 | @makkbit |http://www.freecodecamp.com/makkbit
Bakri
@POIbakri
Dec 19 2016 14:08
@sorinr thanks could I stay in touch in case I need help im starting to get frustrated lol
CamperBot
@camperbot
Dec 19 2016 14:08
poibakri sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 978 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Dec 19 2016 14:09
@POIbakri yep
Mahak Narayan Singh
@makkBit
Dec 19 2016 14:14
@PeterHSteele it should be uploaded to assects in codepen, which is a paid feature.
you can do something like this..
//html file
<audio id="redSound" preload="auto" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3">
//js file
document.getElementById('redSound).play();
Peter Steele
@PeterHSteele
Dec 19 2016 14:16
@makkBit ah cool. thanks again
CamperBot
@camperbot
Dec 19 2016 14:16
peterhsteele sends brownie points to @makkbit :sparkles: :thumbsup: :sparkles:
:warning: peterhsteele already gave makkbit points
Mahak Narayan Singh
@makkBit
Dec 19 2016 14:17
:+1:
Ken Haduch
@khaduch
Dec 19 2016 14:24
@mltr - Hello there - you have to make your counter counting down a function of the setInterval callback function - so that each time the interval timer triggers (once per second) your callback function is decrementing your counter.
A suggestion for an easier way to track the time remaining is to keep the count in seconds, and just convert to the mm:ss format as you write the output to your screen. That way you do not have to manipulate minutes and seconds in the process. Good luck!
Fabio Di Pane
@saylos
Dec 19 2016 14:41
I know, it's a stupid question but I don't remember..How can I put the numbers displayed next to the icons under them?
http://codepen.io/saylos/pen/BQGNYd?editors=0010
playingwithinfinity
@playingwithinfinity
Dec 19 2016 14:53
How can I put my button in the center of the screen? http://codepen.io/jimpix/pen/PbVRpm
Marianissimus
@Marianissimus
Dec 19 2016 14:54
@playingwithinfinity you can place it inside a div with a class text-center applied to it. a row could work
playingwithinfinity
@playingwithinfinity
Dec 19 2016 14:56
@Marianissimus Got it.
Marianissimus
@Marianissimus
Dec 19 2016 14:56
@playingwithinfinity the idea is that text-center is applied to the child-elements, so that <element1 class="text-center"><element2></element1> - in here, element1 centers element2 inside of it
Fabio Di Pane
@saylos
Dec 19 2016 15:11
pls guys, how can I put under the sunrise/sunset icons those numbers? http://codepen.io/saylos/pen/BQGNYd?editors=1000
Peter Steele
@PeterHSteele
Dec 19 2016 15:14

Hey guys, I'm trying to run an animation that briefly changes the color of a button when it is pressed by adding/removing a class in jquery. Here's the css for the class:

.bttnPress{
  animation: .5s 1 bttnPress ;
}

@keyframes bttnPress{
  0%: {background:rgb(5,225,119)}
  50%: {background:rgb(19,227,87)}
}

and the jquery that toggles it:

function remove(){
     $(".digit").removeClass("bttnPress");
   }

  $(".digit").click(function(){
      $(this).addClass("bttnPress")
      var timeOutId = window.setTimeout(remove,500);

If you guys have any suggestions let me know.

Marianissimus
@Marianissimus
Dec 19 2016 15:14
@saylos everything in there appears to be in one row only, so of course it will go for as long as the row is. try breaking it intro columns (col-sm-4 or whatever). also, your class col-md-12 is equal to a row, so you could just call it that
Tyler Moeller
@TylerMoeller
Dec 19 2016 15:15
@saylos <img> is an inline element, meaning it doesn't create a new line. To create a new line, use a block-level element such as <div>, <p>, etc.
Fabio Di Pane
@saylos
Dec 19 2016 15:17
@Marianissimus @TylerMoeller yes I cold create a new row, but what I'd like to do is leaving every number under the corresponding icon, so that when the display size is reduced, they will remain under the corresponding one
Marianissimus
@Marianissimus
Dec 19 2016 15:19
@saylos no, you need to break that row into multiple columns (not more rows). OR you can use a table, that would work just fine.
you need these numbers - 1482126480 - below the images?
what else?
Fabio Di Pane
@saylos
Dec 19 2016 15:20
@Marianissimus just that
Marianissimus
@Marianissimus
Dec 19 2016 15:21
let's think of another solution
Fabio Di Pane
@saylos
Dec 19 2016 15:21
if I create two colums col-md-6, with a big screen they will be too far eacth other
Tyler Moeller
@TylerMoeller
Dec 19 2016 15:22
@PeterHSteele If you're trying to remove a class, wait 500ms and then add a class, you can use jQuery's .queue() and .delay() methods:
$('.digit').removeClass('bttnPress')
           .delay(500)
           .queue(function() {
  $('.digit').addClass('bttnPress')
            .dequeue()
});
Marianissimus
@Marianissimus
Dec 19 2016 15:22
@saylos you can make 2 col-md-6 with the left column aligning to right and the right aligning to left, but I think we can find something easier
Joseph Padgett
@Jspadgett82
Dec 19 2016 15:23
@saylos Well I was going to say what @Marianissimus just said, but I don’t know how to do it easier. I’m not that far along lol
Fabio Di Pane
@saylos
Dec 19 2016 15:23
@Marianissimus I was trying that :smile: what do you suggest? using margin-right and margin-left?
Marianissimus
@Marianissimus
Dec 19 2016 15:24
no, actually using captions - i found this example <figcaption class="figure-caption">A caption for the above image.</figcaption>
how do you call those numbers? by ids? classes? I'm just a beginner in javascript
Fabio Di Pane
@saylos
Dec 19 2016 15:27
@Marianissimus ids
@Marianissimus I'm a little confused because I have to handle classes and tags in html, but too in javascript
Marianissimus
@Marianissimus
Dec 19 2016 15:30
i see. we're both confused here... ok, split them first into 2 col-sm-6. inside each of the columns create two rows - one for the image, one for the text. then we format / finalize the style
Tyler Moeller
@TylerMoeller
Dec 19 2016 15:30
@saylos @Marianissimus @Jspadgett82 You can nest rows beneath columns to keep content together:
    <div class="row">
      <div class="col-xs-3 col-xs-offset-2">Image
        <div class="row">
          <div class="col-xs-12">
          Text below the image
          </div>
        </div>
      </div>
      <div class="col-xs-3 col-xs-offset-2">Image
        <div class="row">
          <div class="col-xs-12">
          Text below the image
          </div>
        </div>
      </div>
    </div>
Marianissimus
@Marianissimus
Dec 19 2016 15:30
you can do the same thing with a table - less modern, but also effective
Tyler Moeller
@TylerMoeller
Dec 19 2016 15:31
Adjust columns and offsets as needed, but it gets complicated
Fabio Di Pane
@saylos
Dec 19 2016 15:33
@TylerMoeller @Marianissimus Yes, it's getting more complicated than I expected :smile:
Peter Steele
@PeterHSteele
Dec 19 2016 15:33
@TylerMoeller thanks, that delay method is cool. The animation still isn't working though, did you see any problem with the css? The idea is to add the css class with the animation and remove it once the animation is over. thanks again
Marianissimus
@Marianissimus
Dec 19 2016 15:34
@saylos or try table
<table>
<tr>
<td>image1</td><td>image2</td>
</tr>
<tr>
<td>text1</td><td>text2</td>
</tr>
</table>
CamperBot
@camperbot
Dec 19 2016 15:34
peterhsteele sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1169 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Fabio Di Pane
@saylos
Dec 19 2016 15:34
@TylerMoeller @Marianissimus thanks guys
CamperBot
@camperbot
Dec 19 2016 15:34
saylos sends brownie points to @tylermoeller and @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 233 | @marianissimus |http://www.freecodecamp.com/marianissimus
:star2: 1170 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Calat
@latimercaleb
Dec 19 2016 15:38
hi guys, starting my front end journey again. Since I fell off my goal is to try to complete this all during the winter break. Here.... I.... go!
Joseph Padgett
@Jspadgett82
Dec 19 2016 15:39
@Kaz-Rodgers Good luck!
Tyler Moeller
@TylerMoeller
Dec 19 2016 15:39
@PeterHSteele The CSS animation and keyframes shouldn't be needed - you can just add classes and remove classes with delays as needed using jquery
Dave
@dkalaluhi
Dec 19 2016 15:39
Hey room, quick question about codepen....How is js rendered? does it put what needs to be put in <head>?
Tyler Moeller
@TylerMoeller
Dec 19 2016 15:40
But then again, I may not be understanding exactly what effect you're trying to achieve ;)
Dave
@dkalaluhi
Dec 19 2016 15:40
<head>
  <script>
...
jamesjd54
@jamesjd54
Dec 19 2016 15:40
so for "build a tribute page" am I just trying to make a page that looks similar to the example one? they kind of lost me with step 2 linking to the "user stories" wikipedia page. what does that have to do with anything?
Dave
@dkalaluhi
Dec 19 2016 15:41
@jamesjd54 just a link back to the tribute person
tributed?
Calat
@latimercaleb
Dec 19 2016 15:41
@dkalaluhi codepen renders Js automatically you don't need script tags. It has a pane for html5,css3 and js
Dave
@dkalaluhi
Dec 19 2016 15:41
@Kaz-Rodgers Ok - thought so, I just wanted to be sure. Thanks!!!
CamperBot
@camperbot
Dec 19 2016 15:41
dkalaluhi sends brownie points to @kaz-rodgers :sparkles: :thumbsup: :sparkles:
:cookie: 254 | @kaz-rodgers |http://www.freecodecamp.com/kaz-rodgers
jamesjd54
@jamesjd54
Dec 19 2016 15:42
ya like at the bottom of the page make a link to their wiki or webs ite
but what im saying is on the freecodecamp page
steps 2 and 3 say "user story"
and im completely lost on what those steps mean
Dave
@dkalaluhi
Dec 19 2016 15:43
@jamesjd54 those would be your spec: As a "user" of this tribute page, can you click a link that takes you to the wiki article/website of the person
jamesjd54
@jamesjd54
Dec 19 2016 15:43
ohhh so its kind of like testing if the page actually works
Dave
@dkalaluhi
Dec 19 2016 15:43
yup
you can think of them as goals from a user's perspective
jamesjd54
@jamesjd54
Dec 19 2016 15:44
alright cool. and so all i have to do here is make a page that has a picture and facts about whatever person I choose and successfully links the user to another website about this person
it's not pretty - but it satisfies the spec
Alas, I'm a sys admin...not an artist :)
jamesjd54
@jamesjd54
Dec 19 2016 15:45
nice dave, im sure mine wont look that good
Calat
@latimercaleb
Dec 19 2016 15:46
Guys I have a question about Atom. Is it worth it?
jamesjd54
@jamesjd54
Dec 19 2016 15:46
this is my first time coding without the step by step instructions from this program
so its nice they let me loose, but i honestly dont even know where to start
PankajKaushik78
@PankajKaushik78
Dec 19 2016 15:46
hello
hello world
CamperBot
@camperbot
Dec 19 2016 15:46

welcome to FreeCodeCamp @PankajKaushik78!

Dave
@dkalaluhi
Dec 19 2016 15:47
@jamesjd54 you have be more visually inclined than me!!!
Tom
@moT01
Dec 19 2016 15:47
@Kaz-Rodgers isn't atom free?
jamesjd54
@jamesjd54
Dec 19 2016 15:47
think ill just mmake every single letter of text bounce
that looks good right
PankajKaushik78
@PankajKaushik78
Dec 19 2016 15:48
please someone help me in challenger 159
Dave
@dkalaluhi
Dec 19 2016 15:48
you specs on processors? I'm your guy. Memory bandwidth, yup. Something that looks pretty....I go into fetal position and cry
PankajKaushik78
@PankajKaushik78
Dec 19 2016 15:48
challenge no. 159

```function wordBlanks(myNoun, myAdjective, myVerb, myAdverb) {
var result = "";
// Your code below this line
myNoun="cat ";
myAdjective="hit ";
myVerb="little ";
myAdverb="slowly";

result= myNoun + myAdjective + myVerb + myAdverb;

// Your code above this line
return result;
}

// Change the words here to test your function
wordBlanks("cat", "little", "hit", "slowly");
```

jamesjd54
@jamesjd54
Dec 19 2016 15:48
well my career is finance so im clueless about literally everything
Calat
@latimercaleb
Dec 19 2016 15:48
@moT01 yes it is, and it's being hyped up by github
Dave
@dkalaluhi
Dec 19 2016 15:50
@PankajKaushik78
return myNoun + myVerb.....
Tyler Moeller
@TylerMoeller
Dec 19 2016 15:50
Free is worth it :) I use Atom - it's a great text editor
Tom
@moT01
Dec 19 2016 15:50
being that it's free, i would say it's worth a try. I use brackets, no complaints
Dave
@dkalaluhi
Dec 19 2016 15:52
@PankajKaushik78 but there are strings that you will have to concatenate to your return
PankajKaushik78
@PankajKaushik78
Dec 19 2016 15:53
hello @TylerMoeller
Kevin Deems
@kevindweb
Dec 19 2016 15:53
hey guys I'm doing the twitchTV json API challenge. The only problem I am having is linking the name of the channel to the actual page. When i click on the link it bring me to a blank twitch page, but when i copy the exact link in another tab, it works. What is going on?
Calat
@latimercaleb
Dec 19 2016 15:54
@moT01 thanks for the input
CamperBot
@camperbot
Dec 19 2016 15:54
kaz-rodgers sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 426 | @mot01 |http://www.freecodecamp.com/mot01
Tyler Moeller
@TylerMoeller
Dec 19 2016 15:54
Hello @PankajKaushik78
Tom
@moT01
Dec 19 2016 15:55
@kevindweb this is no help, ...but someone else was having a similar problem the other day, it worked when we opened the url by typing or pasting it in, ...but the links to that page wouldn't work
@kevindweb we didn't figure it out
Kevin Deems
@kevindweb
Dec 19 2016 15:55
Oh, can I still submit the challenge, and just note it in my script?
because everything else works, like the logos, the callback,
Tom
@moT01
Dec 19 2016 15:56
if you want, i wont stop ya
Kevin Deems
@kevindweb
Dec 19 2016 15:56
do you know if the other person did?
because there doesn't seem to be anything online with this
Tom
@moT01
Dec 19 2016 15:57
not while we were working on it
Peter Steele
@PeterHSteele
Dec 19 2016 15:57
@TylerMoeller oh yeah that's totally true! Cool. It's still being weird - for some reason I have to double click for the color change to take effect even though everything else fires after one click, any ideas on that? last thing, i promise
Tyler Moeller
@TylerMoeller
Dec 19 2016 15:59
@kevindweb It's a known problem - the only way to open it in a new tab is to right-click the link and select "open in new tab" - the "_blank" setting isn't working. FreeCodeCamp/freecodecamp#1340
@PeterHSteele Hard to tell what's going on without seeing all of the code - do you have a codepen link?
Peter Steele
@PeterHSteele
Dec 19 2016 16:02
yeah, relevant section starts at js line 11 - thanks
Peter Steele
@PeterHSteele
Dec 19 2016 16:08
@TylerMoeller
Tyler Moeller
@TylerMoeller
Dec 19 2016 16:08
Thanks, I'll take a look
@PeterHSteele The .dequeue() needs to go inside the callback:
    $(this).addClass('bttnPress').delay(500).queue(function() {
      $(this).removeClass('bttnPress').dequeue();
    });
Nitin Chandran Nair
@NitinNair89
Dec 19 2016 16:11
Hey everyone
Tyler Moeller
@TylerMoeller
Dec 19 2016 16:11
Hi Nitin
Nitin Chandran Nair
@NitinNair89
Dec 19 2016 16:12
:)
Peter Steele
@PeterHSteele
Dec 19 2016 16:13
@TylerMoeller amazing, thanks
CamperBot
@camperbot
Dec 19 2016 16:13
peterhsteele sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: peterhsteele already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Dec 19 2016 16:14
Also, @PeterHSteele Not sure if this answers your question about creating a sound from earlier, but you can use the Web Audio API: http://codepen.io/TylerMoeller/pen/ObdQGR
That's just a simple example, but if you're motivated to learn more, you can create custom sounds of all types.
Dave
@dkalaluhi
Dec 19 2016 16:23
Woah, Type-O is learning code! @PeterHSteele
@PankajKaushik78 you good, or need more hints?
PankajKaushik78
@PankajKaushik78
Dec 19 2016 16:25
thanks @dkalaluhi :smile:
CamperBot
@camperbot
Dec 19 2016 16:25
pankajkaushik78 sends brownie points to @dkalaluhi :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @dkalaluhi |http://www.freecodecamp.com/dkalaluhi
Peter Steele
@PeterHSteele
Dec 19 2016 16:29
@TylerMoeller neat, I was looking into web audio earlier but got kind of overwhelmed by the documentation. So there's no server request required to access it? Definitely appreciate the example
Tyler Moeller
@TylerMoeller
Dec 19 2016 16:30
@PeterHSteele Yeah, it all happens on the client, no server requests. This is sometimes better for mobile devices where caching large files can be a problem.
Peter Steele
@PeterHSteele
Dec 19 2016 16:30
@dkalaluhi gotta make money in the afterlife somehow
Dave
@dkalaluhi
Dec 19 2016 16:31
@PeterHSteele lol, and you cut your hair!
Has anybody used http://forismatic.com for their random quote machine?
Pankaj Singh
@aa3pankaj
Dec 19 2016 16:37
how many time i can submit my project link?
and can i change my project link in any other submission for same project
alpox
@alpox
Dec 19 2016 16:39
@dkalaluhi just lately ive seen someone using it
@Dave gotta use type=jsonp&jsonp=? in the url
@dkalaluhi i mean
Javier Rivera
@jrivera27
Dec 19 2016 17:36
```<div class="container">
<div class="row">
<div class="col-sm-12">
    <div id="my-slider" class="carousel slide" data-ride="carousel">

      <!-- Indicators dot nav -->
      <ol class="carousel-indicators">
        <li data-target="#my-slider" data-slide-to "0" class="active"></li>
        <li data-target="#my-slider" data-slide-to "1"></li>
        <li data-target="#my-slider" data-slide-to "2"></li>
      </ol>


      <!-- Wrapper for slides -->

      <div class="carousel-inner">

        <div class="item active">
          <img src="http://www.jasagroproducts.com/wp-content/uploads/2016/08/under-construction-1.jpg" alt="Construction" class="img-responsive">
          <div class="carousel-caption">
            <h2><Whatever Text></h2>
          </div>

        </div>

        <div class="item">
          <img src="https://lh3.googleusercontent.com/-JgJWbfGSI4g/Tr9Tgrk1SGI/AAAAAAAAAIU/uDc_-XOl4gY/s600/under-construction.png" alt="Construction" class="img-responsive">
          <div class="carousel-caption">
            <h2><Whatever Text></h2>
          </div>

        </div>

        <div class="item">
          <img src="http://vector.me/files/images/2/3/237567/website_under_construction.jpg" alt="Construction" class="img-responsive">
          <div class="carousel-caption">
            <h2><Whatever Text></h2>
          </div>

        </div>


      <!-- Controls or Next and Prev buttons -->

      <a class="left carousel-control" href="#my-slider" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>

      <a class="right carousel-control" href="#my-slider" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>

   </div>``` Hey Guys, I had created a carousel for my pics and it was working fine, I went to work on something else within the code and noticed that it had stopped working. Can someone please take a quick look at the carousel code and provide a little feedback on what you think might have happened?
Sorin Ruse
@sorinr
Dec 19 2016 17:36
@aa3pankaj you can submit it only once but you can change it later as many times as you want
Pankaj Singh
@aa3pankaj
Dec 19 2016 17:37
@sorinr i was new to codepen and i actually thought that fork is used to get the editor window, then i re submitted again as link changed
what should i do now to submit again
Sorin Ruse
@sorinr
Dec 19 2016 17:39
@aa3pankaj nothing. if you submitted a pen link and after mad some changes on the pen anyone loading that link will see the latest changes
Pankaj Singh
@aa3pankaj
Dec 19 2016 17:40
but i deleted my original one that i submitted, and as i forked it
i edited in the forked one
Sorin Ruse
@sorinr
Dec 19 2016 17:40
@jrivera27 lol. its kinda:
Bugs will appear in one part of a working program when another 'unrelated' part is modified.
Javier Rivera
@jrivera27
Dec 19 2016 17:42
@sorinr how should I go about troubleshooting this lol, I have looked over at what could have happened but I can't pin point it?
Sorin Ruse
@sorinr
Dec 19 2016 17:44
@aa3pankaj then just go back to the challenge and resubmit the new link
Pankaj Singh
@aa3pankaj
Dec 19 2016 17:46
@sorinr thats what i was asking, whether that will be considered or not.
Sorin Ruse
@sorinr
Dec 19 2016 17:50
@aa3pankaj yes. it will be considered. i don't think there will be a problem. u can also ask on the main fcc channel
@jrivera27 did you made some changes in js part?
Javier Rivera
@jrivera27
Dec 19 2016 17:53
@sorinr not that i'm aware of, when I wrote the code and it was working I saved it and moved on to another part of my project
Sorin Ruse
@sorinr
Dec 19 2016 17:58
@jrivera27 then something you have changed in css? can you post the link of the pen? its hard to get whats going on only seeing some html code
@jrivera27 do you still have jquery and after bootstrap.js loaded into the pen?
Sorin Ruse
@sorinr
Dec 19 2016 18:02
@jrivera27 just solved it by doing nothing: example carousel
Javier Rivera
@jrivera27
Dec 19 2016 18:03
@sorinr so do you think it's something after my code?
Tyler Moeller
@TylerMoeller
Dec 19 2016 18:05
@sorinr Do you get the right date and time format showing up under the location? https://s.codepen.io/TylerMoeller/debug/woRygW
Can't (easily) test different user locales...and trying to make sure I did it right ;)
Sorin Ruse
@sorinr
Dec 19 2016 18:07
@TylerMoeller i goet it as "Monday, 8:06 PM" ofc its my time and its normal
Tyler Moeller
@TylerMoeller
Dec 19 2016 18:07
Hmmm, should it be in 24hr format for your locale?
20:06?
Sorin Ruse
@sorinr
Dec 19 2016 18:09
@TylerMoeller why don't u use moment.js one of the best libs on dealing with dates and times?
Tyler Moeller
@TylerMoeller
Dec 19 2016 18:10
I don't want to pull in an extra 5kb of data just for the time format
John
@johnshelb
Dec 19 2016 18:15
Could anyone point me to a resource explaining how to embed the tweet-this-quote link? I've been sneaking peeks at the code from the example, but there are several parts I don't understand. Thanks!
Sorin Ruse
@sorinr
Dec 19 2016 18:20
@TylerMoeller then why not use js .date() with the format you want? like .date('M-d-yyy') or any other format you want
Tyler Moeller
@TylerMoeller
Dec 19 2016 18:21
That's what I'm doing (at least trying to do :)) with .toLocaleTimeString() and .toLocaleDateString() @sorinr I think I fixed it with navigator.language? https://s.codepen.io/TylerMoeller/debug/woRygW
That might only look at your browser's language though....and language is not the same as a system locale
May just need to dive in and see how they do it in moment.js
Sorin Ruse
@sorinr
Dec 19 2016 18:22
@TylerMoeller for the formats you can read here: http://momentjs.com/docs/#/displaying/ they r the same for date() as the moment its around date() :)
Sorin Ruse
@sorinr
Dec 19 2016 18:35
@TylerMoeller for me the location its :+1:
Zaurbek Zhakupov
@zzhakupov
Dec 19 2016 18:44
Hello guys can you please help me, I'm on game of life challenge and when my react tries to render all 1600 divs with their own state it takes him 10 seconds to do this.
Jason Ahlstrand
@Jasonca2
Dec 19 2016 19:03
Screen Shot 2016-12-19 at 1.03.05 PM.png
How do I get these elements to line up
Sorin Ruse
@sorinr
Dec 19 2016 19:11
@TylerMoeller here something i would do on that pen: 1. all temperatures(eather C or F) to just integer no decimals; 2. i would make this <span id="degree-units">°C | °F</span> like <span id="degree-units"><b class="active">°C</b> | <b>°F</b></span> and i would switch only the class active from one <b> to another maybe with an active class having same color as the weather icon. its just an idea
Peter Steele
@PeterHSteele
Dec 19 2016 19:14
@Jasonca2 tough to tell without code, it almost looks like you're adding additional margin between the text and its input as you travel across the top row
Sorin Ruse
@sorinr
Dec 19 2016 19:18
@Jasonca2 at first glance i would go for your form as display: table; and maybe also necessary to make your inputs as display: cell; but your all context is also important to understand whats going on in there. if you can link the pen to see the code, maybe we can be more helpfull
Tyler Moeller
@TylerMoeller
Dec 19 2016 19:20
Thanks for taking a look @sorinr !
CamperBot
@camperbot
Dec 19 2016 19:20
:cookie: 979 | @sorinr |http://www.freecodecamp.com/sorinr
tylermoeller sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Sorin Ruse
@sorinr
Dec 19 2016 19:23
@TylerMoeller np. anytime
Peter Steele
@PeterHSteele
Dec 19 2016 19:30
I know someone was asking about forismatic api for the quote machine earlier. I used forismatic and it was working at one point but now it's throwing a mixed content error - did you ever get it to work? I have "jsonp" selected as both the datatype and jsonp properties of my $.ajax method.
$.ajax({
      url: "http://api.forismatic.com/api/1.0/",
      data:{
        format:"jsonp",
        method: "getQuote",
        lang: "en"
      },
      dataType:"jsonp",
      jsonp:"jsonp"
      })
    .done(addQuote);
    });
Ruxandra Anghel
@ruxiang05
Dec 19 2016 19:33
I'm having a hard time styling those damn hrs in the portfolio project
Sorin Ruse
@sorinr
Dec 19 2016 19:34
@PeterHSteele maybe you r loading your codepen over https
@ruxiang05 why? whats the problem in styling the <hr>?
@PeterHSteele or your ajax call its not right
Ruxandra Anghel
@ruxiang05
Dec 19 2016 19:40
@sorinr nevermind found a solution
Sorin Ruse
@sorinr
Dec 19 2016 19:40
@ruxiang05 :+1:
Dominick White
@DominickW
Dec 19 2016 19:43
Hello everyone, I am now starting my development of my Tribute Page and I have no idea where to start (besides having my person selected). Any advice would be greatly appreciated. Thanks!
Peter Steele
@PeterHSteele
Dec 19 2016 19:45
@sorinr yup, I was loading over https. codepen seems to do that automatically, which is annoying. thank you!
CamperBot
@camperbot
Dec 19 2016 19:45
:cookie: 981 | @sorinr |http://www.freecodecamp.com/sorinr
peterhsteele sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Sorin Ruse
@sorinr
Dec 19 2016 19:47
@PeterHSteele np. it happens also to me. as i have pens working on https and pens working only on http and many times i forget to switch :)
watergs
@watergs
Dec 19 2016 20:10
@DominickW Hey Dominick, Even I started out my development of Tribute page recently, and I'm halfway done through a lot of struggle. Have you looked at the example provided?
Jacob
@jdc101214
Dec 19 2016 20:11
Why is this code not working?
function rot13(str) { // LBH QVQ VG!
  var str1 = "";
  for(var i = 0; i < str.length; i++){
    str1 = str1 + str[i].charCodeAt(13);
  }
 return str1;
}

// Change the inputs below to test
rot13("SERR PBQR PNZC");
watergs
@watergs
Dec 19 2016 20:12
@jdc101214 , I haven't reached JS yet, but I do know a little bit of coding.
What exactly are you trying to achieve here?
Read that
watergs
@watergs
Dec 19 2016 20:16
why don't you try str1=str1+str[i+13];
wait, i meant shift the character
Jacob
@jdc101214
Dec 19 2016 20:16
That would move it 13 places in the index, not in the alphabet.
@watergs
watergs
@watergs
Dec 19 2016 20:17
yeah, just noticed that, i meant shift the character
Jacob
@jdc101214
Dec 19 2016 20:18
What do you mean? @watergs
shift character?
watergs
@watergs
Dec 19 2016 20:18
char=charCodeAt(i)+13
str1=str1+char
Jacob
@jdc101214
Dec 19 2016 20:18
Let me try that.
watergs
@watergs
Dec 19 2016 20:18
char here is a symbol
It's been a long time since I've done coding in Java or JS, so don't exactly remember how they work
watergs
@watergs
Dec 19 2016 20:24

function rot13(str) { // LBH QVQ VG!
var str1 = "";
for(var i = 0; i < str.length; i++){
a=charCodeAt(str[i])+13;
res=String.fromCharCode(a);
str1[i] = str1[i] +a;
}
return str1;
}

// Change the inputs below to test
rot13("SERR PBQR PNZC");

@jdc101214 try this, it should work
str1[i]=str1[i]+res; **
Jason Ahlstrand
@Jasonca2
Dec 19 2016 20:47
@PeterHSteele Here is a link to the code pen I did of it. http://codepen.io/Jaosnca1/pen/ZBwVWE
I'm having trouble getting the form elements to line up correctly.
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 19 2016 21:08
could someone help me what I am doing wrong with string replace ?? https://github.com/Mr-Kumar-Abhishek/js-calculator/blob/test/js/main.js
Dominick White
@DominickW
Dec 19 2016 21:12
@watergs yeah, I found some help from a couple videos online. Really helped me through the page.
Jerry Purvis
@MessiaHack
Dec 19 2016 21:39

http://codepen.io/MessiaHack/pen/MbLeEL

Why is my new quote button not working?

Jerry Purvis
@MessiaHack
Dec 19 2016 22:27
where is everybody in FrontEnd today?
Jason Luboff
@JLuboff
Dec 19 2016 22:28
Most people are probably on holiday. I know I only get on gitter while I'm at work
aRtoo
@artoodeeto
Dec 19 2016 22:30

how do you put a background in css?? this is the full path
C:\Users\aRtoo\Desktop\web_dev\DESEEEERT\Desert_new\volunteer\volunteer.png

and this is my css path: background-image: url('/volunteer/volunteer.png');

Jason Luboff
@JLuboff
Dec 19 2016 22:31
@artoodeeto Is your css file in the Desert_new folder?
aRtoo
@artoodeeto
Dec 19 2016 22:32
yes sir
@JLuboff yes sir
Jason Luboff
@JLuboff
Dec 19 2016 22:32
Have you tried using the console and element inspector in Chrome to verify its resolving to the correct path?
Also, are you running a webserver on your computer? I am, so I just use the full path that way
Walter V. Santos
@theunmanifested
Dec 19 2016 22:41
Need some clarification, please. I am currently doing the "Build a Tribute Page" as part of the Basic Front End Development Projects. I am done, but not particularly super proud of my tribute page. On the video tutorial, it says not to look at the Editor's View of the example tribute page. Does this mean that we just click the "I've completed this challenge" button and include a link to my CodePen, or am I supposed to go back on my FCC Map and get it looking a bit better?
Jerry Purvis
@MessiaHack
Dec 19 2016 22:42
@BriseSoleiln2siast if you aren't super proud of it, I would suggest trying to make it look better. Always give your best effort :)
Walter V. Santos
@theunmanifested
Dec 19 2016 22:44
Thanks @MessiaHack. I will definitely try to get it looking a bit better.
CamperBot
@camperbot
Dec 19 2016 22:44
brisesoleiln2siast sends brownie points to @messiahack :sparkles: :thumbsup: :sparkles:
:cookie: 275 | @messiahack |http://www.freecodecamp.com/messiahack
Jerry Purvis
@MessiaHack
Dec 19 2016 22:45

http://codepen.io/MessiaHack/pen/MbLeEL

Why is my container div preventing the buttons from functioning?

aRtoo
@artoodeeto
Dec 19 2016 22:52
hi guys i have a drop down button. but i have one issue on it. i have 2 monitors a landscape and a portrait . when i transition the browser to other screen the drop down button will move. code pen is here: http://codepen.io/artoo/pen/ZBbYyM?editors=1100
Tom
@moT01
Dec 19 2016 22:56
@artoodeeto im not sure i would worry about that too much right away
aRtoo
@artoodeeto
Dec 19 2016 22:57
@moT01 sorry im making project i just need to fix this. but thanks anyway
CamperBot
@camperbot
Dec 19 2016 22:57
artoodeeto sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 429 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Dec 19 2016 22:57
well, i dont have two screens so i cant really see the problem
aRtoo
@artoodeeto
Dec 19 2016 22:58
@moT01 hahaha. you can change the width of the browser
Tom
@moT01
Dec 19 2016 22:59
no need to laugh, i did that, didn't see your problem
you mean how the one button will wrap down below the others?
aRtoo
@artoodeeto
Dec 19 2016 23:05
@moT01 the problem is when i change the width the drop down button will change its position. it wont go underneath the main button.
Uros Tadic
@urketadic
Dec 19 2016 23:07
Guys can someone add to my code and make it so it accepts minutes + hours aswell
function stopwatch () {
  var seconds = 00; 
  var tens = 00; 
  var appendTens = document.getElementById("tens")
  var appendSeconds = document.getElementById("seconds")
  var buttonStart = document.getElementById('button-start');
  var buttonStop = document.getElementById('button-stop');
  var buttonReset = document.getElementById('button-reset');

  buttonStart.onclick = function() {
     clearInterval(Interval);
     Interval = setInterval(startTimer, 10);
    $("#button-start").css({'color':'red',
                         'font-weight': 'bolder'});
    $("#button-stop").css('color', 'green');
    $("#button-reset").css('color', 'green');
    setTimeout(function(){        $("#pi").focus(); },50)
  }
    buttonStop.onclick = function() {
       $("#button-stop").css({'color':'red',
                        'font-weight': 'bolder'});
    $("#button-start").css('color', 'green');
    $("#button-reset").css('color', 'green');
    clearInterval(Interval);
  }
  buttonReset.onclick = function() {
     $("#button-reset").css({'color':'red',
                      'font-weight': 'bolder'});
    $("#button-stop").css('color', 'green');
    $("#button-start").css('color', 'green');
    clearInterval(Interval);
    tens = "00";
      seconds = "00";
    appendTens.innerHTML = tens;
      appendSeconds.innerHTML = seconds;
  }
  function startTimer () {
    tens++; 
    if(tens < 9){
      appendTens.innerHTML = "0" + tens;
    }
    if (tens > 9){
      appendTens.innerHTML = tens;
    } 
    if (tens > 99) {
      console.log("seconds");
      seconds++;
      appendSeconds.innerHTML = "0" + seconds;
      tens = 0;
      appendTens.innerHTML = "0" + 0;
    }
    if (seconds > 9){
      appendSeconds.innerHTML = seconds;
    }
Paweł Karniej
@Karniej
Dec 19 2016 23:24
Hello guys, what do you think about this Random Quote challange project?

<p data-height="265" data-theme-id="0" data-slug-hash="yVZPwr" data-default-tab="js,result" data-user="Karniej" data-embed-version="2" data-pen-title="yVZPwr" class="codepen">See the Pen <a href="http://codepen.io/Karniej/pen/yVZPwr/">yVZPwr</a> by Karniej (<a href="http://codepen.io/Karniej">@Karniej</a>) on <a href="http://codepen.io">CodePen</a>.</p>

<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

Tom
@moT01
Dec 19 2016 23:28
@Karniej looks great
Paweł Karniej
@Karniej
Dec 19 2016 23:29
@moT01 thanks
CamperBot
@camperbot
Dec 19 2016 23:29
karniej sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 430 | @mot01 |http://www.freecodecamp.com/mot01
Abubakar Gabdo
@Atiku2039
Dec 19 2016 23:38
hello guys, how do i upload a background image?
Jason Luboff
@JLuboff
Dec 19 2016 23:41
@Atiku2039 You need to upload it to an image hosting server, I used photobucket
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 19 2016 23:41
Abubakar Gabdo
@Atiku2039
Dec 19 2016 23:42
@JLuboff thanks, trying it out
CamperBot
@camperbot
Dec 19 2016 23:42
atiku2039 sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 498 | @jluboff |http://www.freecodecamp.com/jluboff
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 19 2016 23:43
Jason Luboff
@JLuboff
Dec 19 2016 23:43
@Mr-Kumar-Abhishek One thing I notice right away, after hitting equals (=), I can no longer manipulate my returned number
Tom
@moT01
Dec 19 2016 23:44
@Mr-Kumar-Abhishek too many decimals
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 19 2016 23:46
@JLuboff the top equation stays the same with your last input of the number ....that is if you don't press a number again but an operator instead
Tom
@moT01
Dec 19 2016 23:46
the plus and divide look too alike, ...minor issue probly could leave if you want
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 19 2016 23:46
@JLuboff if you press a number then you are trying to calculate something new
Jason Luboff
@JLuboff
Dec 19 2016 23:47
@Mr-Kumar-Abhishek Try 6+3 = * 3
@Mr-Kumar-Abhishek That should give 9 followed by 27\
But it gives zero
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 19 2016 23:48
@JLuboff checking ~
@JLuboff it gives 33 as per BODMAS ~
what ?
o.O
great :P
lisps evaluate :D
@JLuboff direct input from keyboard should be disabled ..
Jason Luboff
@JLuboff
Dec 19 2016 23:53
I wasn't using keyboard input...just mouse
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 19 2016 23:55
@JLuboff no, so how did you put = sign ?/
Jason Luboff
@JLuboff
Dec 19 2016 23:55
...I hit the equal sign on your calculator..
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 19 2016 23:56
@JLuboff hmm... that breaks the eval function?? 0.o
Jason Luboff
@JLuboff
Dec 19 2016 23:57
@Mr-Kumar-Abhishek With my calculator, I create an array that I would push the values to and then when = was pressed, I would have the eval function run and only clear my array when AC was pressed or my limit was hit
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 19 2016 23:58
@JLuboff you are right it does.... it actually added more numbers from ... I need to re-evaluate the eval function