These are chat archives for FreeCodeCamp/HelpFrontEnd

9th
Sep 2016
jrandallhansen
@jrandallhansen
Sep 09 2016 00:01
@TylerMoeller what is "jsonp"?
Tyler Moeller
@TylerMoeller
Sep 09 2016 00:02
@jrandallhansen The Wikipedia API doesn't allow data transfer between two different domain names, JSONP allows you to work around this.
jrandallhansen
@jrandallhansen
Sep 09 2016 00:02
@TylerMoeller thanks
CamperBot
@camperbot
Sep 09 2016 00:02
jrandallhansen sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 813 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Sep 09 2016 00:03
@jrandallhansen Sure, here's some more info: https://cameronspear.com/blog/exactly-what-is-jsonp/
Greg Duncan
@GregatGit
Sep 09 2016 00:22
test
babycannotsay
@babycannotsay
Sep 09 2016 02:38
I get stuck about bootstrap.https://codepen.io/giggle/pen/vXOqbj?editors=1000 why can't show navs when I resize to xs and click the collapsed button. Can someone help me?
Alex S.
@aszwet1
Sep 09 2016 02:39
@babycannotsay you're missing the bootstrap jscript cdn?
babycannotsay
@babycannotsay
Sep 09 2016 02:39
it's right. thanks.
Alex S.
@aszwet1
Sep 09 2016 02:48
@babycannotsay it isn't right. If you go to the javascript settings, you need to add bootstrap in there too I think, and also, that's the exact code from the project example isn't it? naughty naughty.
I tested it using browserling, and got it to work fine
babycannotsay
@babycannotsay
Sep 09 2016 02:51
@aszwet1 sorry..i miss bootstrap jscript cdn when you did not remind me.So I think it's right.but i get stuck again..now let me see what you say and think again.
Sean L. Gallagher
@718Rogue
Sep 09 2016 02:51
Hi guys, I'm trying to complete this https://codepen.io/FreeCodeCamp/full/NNvBQW/ challenge right now and I'm trying to put a caption under my image but I can't figure out how to get the caption within the border and I'd rather somebody explain it to me than cheat and look at the example code. Is the image not supposed to be within a border? I read somewhere Googling for solutions just now that it's impossible to put anything on top of a border.
babycannotsay
@babycannotsay
Sep 09 2016 02:58
@aszwet1 when i got stuck,i indeed read the code from the project example.But before that, i wrote the code almost.Because i learn bootstrap a few months ago and i refer to the website http://v3.bootcss.com/components/#navbar-default . so i am a naughty..
jrandallhansen
@jrandallhansen
Sep 09 2016 02:58
@718Rogue assuming you are using bootstrap then just apply class="caption" to your text
Alex S.
@aszwet1
Sep 09 2016 02:58
@718rouge take a look at bootstrap's site: http://getbootstrap.com/components/#thumbnails
babycannotsay
@babycannotsay
Sep 09 2016 02:58
@aszwet1 not naughty.
jrandallhansen
@jrandallhansen
Sep 09 2016 02:59
@aszwet1 he isnt looking to implement a thumbnail however. he wants to have caption text underneath his image
Sean L. Gallagher
@718Rogue
Sep 09 2016 03:00
ok i'll try and figure that out and if i still have problems i'll let you know. thanks @jrandallhansen !
jrandallhansen
@jrandallhansen
Sep 09 2016 03:00
@aszwet1 aww i see it shows the use of captions right underneath as well
CamperBot
@camperbot
Sep 09 2016 03:00
718rogue sends brownie points to @jrandallhansen :sparkles: :thumbsup: :sparkles:
:cookie: 324 | @jrandallhansen |http://www.freecodecamp.com/jrandallhansen
jrandallhansen
@jrandallhansen
Sep 09 2016 03:00
@718Rogue the link that @aszwet1 shared shows how use a caption div perfectly. very easy
Sean L. Gallagher
@718Rogue
Sep 09 2016 03:01
also, when i try to set notifications to only me it still gives me notifications for all messages. am i missing something or is chrome just being weird?
for this chat room
jrandallhansen
@jrandallhansen
Sep 09 2016 03:01
can anyone take a look at my WikiViewer project and see if you can figure out how to get the links to open in a new tab? thanks
babycannotsay
@babycannotsay
Sep 09 2016 03:05
@aszwet1 it can't be showed in the website codepen. But it can be showed when i use other tool..i am tired..why..
fadyboy
@fadyboy
Sep 09 2016 03:20
Hi all, I'm trying to add weather app project to codepen. My application works on my pc but when I add it to codepen, it doesn't work because there's this message "getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS". Has anyone else used navigator.geolocation for their weather app?
gregg durishan
@GreggDurishan
Sep 09 2016 03:22
@jrandallhansen hovering over a link i see such as https://en.wikipedia.org/wiki/Einstein_on_the_Beachtarget=%22_blank%22 ... you're missing a space so that target="_blank" is separate ie <a href="http://www.moo.com/" target="_blank">moo</a>. btw that page took FOREVER to load
fadyboy
@fadyboy
Sep 09 2016 03:27
Ok, I've had to add "https://" to my codepen url https://codepen.io/aofadero/full/wzaVZv/ in order for it to work and also add "https://" to my weather api url for it to work
Sammy
@ManBearPigg
Sep 09 2016 03:42

I logged the following:

console.log(io.nsps['/'].adapter.rooms[socket.room]);

and it returned the following:

Room { sockets: { '/#O6L2als5FU-VfHSoAAAA': true }, length: 1 }

How might I edit console.log so that it returns the length value? I tried .length, .sockets.length, I also added 1 to the end. These were all unsuccessful. This should be basic javascript but I cant get it :(

That was 1 in square brackets I tried adding to the end, sry
Helena
@poigirl2001
Sep 09 2016 03:55
Will you please check out my site (codedbyhelena.wixsite.com/codedbyhelena) and tell me if you see ads? I know I'm using a service for the site but I coded the matching game and the site is an easy way to display my work for now. When I learn more I will make my own site from scratch with html
Michael Cavataio
@MCavataio
Sep 09 2016 04:51
@ManBearPigg you should be able to run
console.log(io.nsps['/'].adapter.rooms[socket.room].length)
TrayBanks
@TrayBanks
Sep 09 2016 05:41
Can someone look at my code and tell why everything below Portfolio is clickable to my link???? And also if you could find out why I have so much space between my contact me and my info form that would be great as well.
http://codepen.io/TrayBanks/pen/NRKvGg/
KaviJo
@KaviJo
Sep 09 2016 05:42
hello everyone, I am doing the twitch tv challenge and having some issues with the code. based on what i have so far, the name, status and the "not online" logo should already appear, but when i run it, nothing shows up. any help would be greatly appreciated
kirbyedy
@kirbyedy
Sep 09 2016 05:48
@KaviJo your console says: Failed to load resource: the server responded with a status of 400 (Bad Request)
which is not a correct link
KaviJo
@KaviJo
Sep 09 2016 06:07
@kirbyedy yea, the ogamingsc2 is closed. isnt the data2.error supposed to bring back the logo?
kirbyedy
@kirbyedy
Sep 09 2016 06:10
no, ogamingsc2 is not closed, in fact it is streaming right now
check the link
freecodecamp for example is offline
KaviJo
@KaviJo
Sep 09 2016 06:12
@kirbyedy oic i havent done the online ones yet but my issues is nothing at all is showing up under logo, displayname and status. is my callback wrong?
KaviJo
@KaviJo
Sep 09 2016 06:16
@kirbyedy ok i have removed the callback part but nothing has changed as far as the display goes. still all blank
William Maes
@maeswilliam
Sep 09 2016 06:29
http://codepen.io/Tywin32/pen/jrbNxz - Why is my span not centred?
I know i can use .mainheader and it works like that
but h1, span should work right?
nevermind
Anshul Sanghi
@anshap1719
Sep 09 2016 06:38
Let me check...
Amit Patel
@AmitP88
Sep 09 2016 06:46
hey guys, I'm taking the time to organize my code and I was just wondering if there's a way to create a table of contents for my html code, where the user can click on it and it'll take them to specific lines in the text editor
that way it'll make it convenient to go to specific parts of my code instead of doing all that scrolling
Tegan Ambrosa
@Spambrah
Sep 09 2016 07:15
cmd + f?
Alexander Domikov
@AlexanderDom
Sep 09 2016 07:38
@AmitP88 <a href="#myContent">Go to myContent</a><div id="myContent"></div> that's can do the work
you create a list with anchor links like this and give ids to your elements and tada
or you want really do something for you text editor ? you can create some Readme in comments at the begining of your file
the doer
@ewathedoer
Sep 09 2016 08:11
@maeswilliam move text-align: center; to the level higher that is your header, then it works, because it’s set to the parent
William Maes
@maeswilliam
Sep 09 2016 08:12
@ewathedoer cheers
the doer
@ewathedoer
Sep 09 2016 08:14
@maeswilliam hope it helped
Duarte Frazão
@Duarte-Frazao
Sep 09 2016 08:31
Hi guys! Does someone has knowledge on php?
Shamikk
@Shamikk
Sep 09 2016 08:36
Good morning everyone :)
Rada
@Radascript
Sep 09 2016 08:37
is there a way to css select all immediate children without specifying the child type? Like for eg, ul>li{} will get all <li> children, .class>h3 will get all <h3> children, but what if I want to get all immediate children regarless of type?
nvm got it
Shamikk
@Shamikk
Sep 09 2016 08:37
does anybody know how to force bootstrap's dropdown to work in codepen? I can't even run the default boostrap example code...
Darth Skywalker
@adityaparab
Sep 09 2016 08:39
@Shamikk Share your pen
kirbyedy
@kirbyedy
Sep 09 2016 08:39
@Shamikk did you link the jquery and bootstrap library to your pen ?
Darth Skywalker
@adityaparab
Sep 09 2016 08:39
@Radascript : parent > *
Shamikk
@Shamikk
Sep 09 2016 08:39
@kirbyedy sure I did :)
My pen: http://codepen.io/Mikka/pen/jrbOBd
Rada
@Radascript
Sep 09 2016 08:40
@adityaparab cool thanks!
CamperBot
@camperbot
Sep 09 2016 08:40
:cookie: 693 | @adityaparab |http://www.freecodecamp.com/adityaparab
radascript sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
kirbyedy
@kirbyedy
Sep 09 2016 08:40
@Shamikk no you did not :)
Darth Skywalker
@adityaparab
Sep 09 2016 08:40
@Shamikk : You forgot to include bootstrap js file
kirbyedy
@kirbyedy
Sep 09 2016 08:40
you need another one where your jquery is bootstrap.js
Darth Skywalker
@adityaparab
Sep 09 2016 08:40
Just include it from the settings and and it will work correctly.
kirbyedy
@kirbyedy
Sep 09 2016 08:40
not only bootstrap.css
Darth Skywalker
@adityaparab
Sep 09 2016 08:41
@Radascript : it will work but that is a really bad idea :D
Shamikk
@Shamikk
Sep 09 2016 08:42
@kirbyedy @adityaparab you are absolutely right, and I think I need another coffee - I haven't seen that before :) Maybe the names should be ordered alphabetically?. Added the bootstrap in the js section, and it works great
@kirbyedy @adityaparab thanks a lot :)
CamperBot
@camperbot
Sep 09 2016 08:42
shamikk sends brownie points to @kirbyedy and @adityaparab :sparkles: :thumbsup: :sparkles:
:star2: 1367 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
:cookie: 694 | @adityaparab |http://www.freecodecamp.com/adityaparab
Darth Skywalker
@adityaparab
Sep 09 2016 08:42
Because CSS properties that you don't explicitly set on the element are inherited from it's parent (the upward hierarchy). So saying parent > * is entirely pointless.
Rada
@Radascript
Sep 09 2016 08:42
@adityaparab idk if i'm being too hacky. When I set a certain padding on a parent it fucks my layout, but when I set margin on children it
's ok
Darth Skywalker
@adityaparab
Sep 09 2016 08:43
@Radascript code please
elminsterrr
@elminsterrr
Sep 09 2016 08:47

Hi guys! Anyone here has finished Intermediate Algorithm Scripting? :smile:

Intermediate Algorithm Scripting/Spinal Tap Case
Convert a string to spinal case. Spinal case is all-lowercase-words-joined-by-dashes.

I have created something like this:

function spinalCase(str) {
//The RegExp constructor creates a regular expression
// object for matching text with a pattern.
  var pattern = /\s/g;
  var toLowerCase = str.toLowerCase();
  var newstr = toLowerCase.replace(pattern, '-');
  return newstr;
}

spinalCase('This Is Spinal Tap');

But I don't have any idea how can I detect this spinalCase("thisIsSpinalTap") and change it to that "this-is-spinal-tap"? Any ideas?

kirbyedy
@kirbyedy
Sep 09 2016 08:49
@elminsterrr with regex ? on capital letters maybe ?
with split()
elminsterrr
@elminsterrr
Sep 09 2016 08:50
@kirbyedy if( /[A-Z]/.test(str) ) like this?
kirbyedy
@kirbyedy
Sep 09 2016 08:51
str.split(/(?=[A-Z])/)
elminsterrr
@elminsterrr
Sep 09 2016 08:51
nice avatar by the way :smile:
Ok, I will check it @kirbyedy :+1:
kirbyedy
@kirbyedy
Sep 09 2016 08:52
:D
Nazim Abdimomunov
@dm-nz
Sep 09 2016 08:58
This message was deleted
Hello everyone! My weather app works fine on localhost, but doesn’t work on CodePen. Can you give me a hint? https://codepen.io/Dominaz/pen/pEvOYa
Kuba Rdzak
@qubkon
Sep 09 2016 09:15
@dm-nz just a guess but maybe it's because of location permission in browser?
kirbyedy
@kirbyedy
Sep 09 2016 09:34
@dm-nz check your console, it says mixed content
elminsterrr
@elminsterrr
Sep 09 2016 09:36

@kirbyedy Thx, it worked!
But can you help me decode this RegEx?

function spinalCase(str) {
  var test = str.split(/(?=[A-Z])/);
  return test;
}

spinalCase("thisIsSpinalTap");

What does /(?=[A-Z])/ mean exactly?

CamperBot
@camperbot
Sep 09 2016 09:36
elminsterrr sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1368 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
D0tM
@D0tM
Sep 09 2016 09:37
@D0tM
hi i have a question, there is a way to target safari with jquery?
i am trying this $(document).ready(function() {
if ($.browser.safari) {
$("#portfolio > figure").css('max-width', '300px');
$("#about_us > figure").css('max-width', '385px');
}
});
kirbyedy
@kirbyedy
Sep 09 2016 09:40
@elminsterrr ?= means optional character
which is in the bracket... which are capital letters A to Z
Greg Duncan
@GregatGit
Sep 09 2016 09:43
@dm-nz in chrome your pen is https which means it can't make http requests - only http - try removing the s from https in the address bar
elminsterrr
@elminsterrr
Sep 09 2016 09:43
@kirbyedy So every time RegEx finds one capital letter form A to Z It will split that string, correct?
kirbyedy
@kirbyedy
Sep 09 2016 09:43
maybe I did not explain well
?= Match a suffix but exclude it from capture.
from docs
I am terrible at explaining
elminsterrr
@elminsterrr
Sep 09 2016 09:45
@kirbyedy RegEx are confusing, without ?= I'm getting this:
function spinalCase(str) {
  var test = str.split(/([A-Z])/);
  return test;
}

spinalCase("thisIsSpinalTap");

=> [ 'this', 'I', 's', 'S', 'pinal', 'T', 'ap' ]
kirbyedy
@kirbyedy
Sep 09 2016 09:45
@GregatGit the only problem is he is using geolocation, so I think it will not work in chrome :(
elminsterrr
@elminsterrr
Sep 09 2016 09:46
so It is then splitting after capital character as well...
Jayesh Bhatia
@Jay-20
Sep 09 2016 09:50
Can someone PLEASE tell me what changes do we have to make in the weather project so as to make it work on chrome???
Nazim Abdimomunov
@dm-nz
Sep 09 2016 09:51
@kirbyedy @GregatGit thanks guys!
CamperBot
@camperbot
Sep 09 2016 09:51
dm-nz sends brownie points to @kirbyedy and @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 761 | @gregatgit |http://www.freecodecamp.com/gregatgit
:star2: 1369 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Stephen James
@sjames1958gm
Sep 09 2016 09:51
@Jay-20 1) connect with https:// to allow geolocation 2) use a proxy for openweather - https://crossorigin.me/
Or use an api for location http://ip-api.com/json
Jayesh Bhatia
@Jay-20
Sep 09 2016 09:52

@sjames1958gm like this? $(document).ready(function(){

var latitude;
var longitude;
$.getJSON("http://ip-api.com/json",function(data2){
latitude=data2.lat;
longitude= data2.lon;
console.log(latitude);
});
});

Stephen James
@sjames1958gm
Sep 09 2016 09:53
@Jay-20 Yes
@Jay-20 You will need to make your next API call inside the callback
Jayesh Bhatia
@Jay-20
Sep 09 2016 09:54
@sjames1958gm but i tried this is not working either!
Oops sorry didnt read that okay will try that Thanks ! @sjames1958gm
CamperBot
@camperbot
Sep 09 2016 09:55
jay-20 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3175 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Sep 09 2016 09:59
@elminsterrr My reading is that /(?=[A-Z])/ is this
Matches x only if x is followed by y. on the MDN webpage. I can only think that with nothing before the ( that
It splits right before each capital letter.
BTW, it is (?:) that matches but doesn't capture
kirbyedy
@kirbyedy
Sep 09 2016 10:00
@dm-nz there is a cheat, if you put https://crossorigin.me in front of your link it will work
but your codepen link has to start with https:// as well
in other words, either all with https or all links with http, then you wont get that mixed content error
but keep in mind that geolocation wont work in chrome with http links, so you will have to use something else to get the user location, like ip lcoation
sepide
@sepideeee
Sep 09 2016 10:21
hey there for building a random quote machine is it required to use API for the random quotes or we can put some quotes manually in our code?
kirbyedy
@kirbyedy
Sep 09 2016 10:50
@sepideeee you can make your own array of quotes
Klaus Mana
@KlausMana
Sep 09 2016 10:55
anyone can help me?
I am encountering some bugs
Ilya Kostichenko
@n0Entity
Sep 09 2016 10:55
?
Klaus Mana
@KlausMana
Sep 09 2016 10:55
so I am doing the Weather API
like the challenge sorry
and I am trying to get the temperature and convert it to celsius
but whenever I add the code to do this my whole page crashes
do I need to post my code?
Ilya Kostichenko
@n0Entity
Sep 09 2016 10:57
yes
and comment the crap of code which you entering before crash
Klaus Mana
@KlausMana
Sep 09 2016 10:59

HTML :

<center><h1 id = "title">WeatherCaster</h1></center>
<div class="container">
<center><img src = "#" id = "testimg"></center>
  <p id = "description"></p>
  <center><p id = "temperature"></p></center>
</div>

CSS :

@import 'https://fonts.googleapis.com/css?family=Oswald';

body {

JavaScript :

$( document ).ready(function() {
  $.ajax ({url : "http://ip-api.com/json"
    }).done(function(data) {
      Weather(data.lat,data.lon);
    }).fail(function(err) {
      console.log(err);
  });

});

function Weather(latitude , longtitude){
  console.log(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"
}).done(function(json){
  console.log(json);
  var Location = json.name + " , " + json.sys.country;
  var currentWeather = json.weather[0].description;
  var timeGet = new Date();
  var time = timeGet.getTime();
  var sunrise = json.sys.sunrise;
  var sunset = json.sys.sunset;
  var ico;
 // var Fahrenheit = Math.floor(json.main.temp);
 // var Celsius = Math.floor((Fahrenheit * 9 / 5) - 32);
 // var Temperature = Celsius;
 // document.GetElementById("temperature").html(Temperature);


  if(currentWeather == "clear sky"){
    if(time > sunset || time < sunrise){
      var ico = "https://s9.postimg.org/7ak2dla3f/Clear_Sky_Night.png";
      document.getElementById("testimg").setAttribute("src" , ico);
      $('body').css('background-image', 'url(https://s21.postimg.org/lfd9y978z/Clear_Sky_Night.jpg)');
    }else{
      var ico = "https://s9.postimg.org/asw29zazf/Clear_Sky.png";
      document.getElementById("testimg").setAttribute("src" , ico);
      $('body').css('background-image' , 'url(https://s15.postimg.org/u38v1i3k7/Clear_Sky.jpg)');
    }
  }

  if(currentWeather == "few clouds"){
    if(time > sunset || time < sunrise){
      var ico = "https://s9.postimg.org/xy6gvzg4b/Few_Clouds_Night.png";
      document.getElementById("testimg").setAttribute("src" , ico);
      $('body').css('background-image' , 'url(https://s21.postimg.org/tm59ptxbn/Few_Clouds_Night.jpg)');
    }else{
      var ico = "https://s9.postimg.org/j0xzuz2vv/Few_Clouds.png";
      document.getElementById("testimg").setAttribute("src" , ico);
      $('body').css('background-image' , 'url(https://s15.postimg.org/y0w4qwqdj/Few_Clouds.jpg)' );
    }
  }

  if(currentWeather == "scattered clouds"){

      var ico = "https://s9.postimg.org/xpdhjsspn/Scattered_Clouds.png";
      document.getElementById("testimg").setAttribute("src" , ico);
      $('body').css('background-image' , 'url(https://s15.postimg.org/d7ybg8n7r/Scattered_Clouds.jpg)' );
  }

  if(currentWeather == "broken clouds"){

      var ico = "https://s9.postimg.org/415n74lzv/Broken_Clouds.png";
      document.getElementById("testimg").setAttribute("src" , ico);
      $('body').css('background-image' , 'url(https://s15.postimg.org/d1g0zeop3/Broken_Clouds.jpg)');
  }

  if(currentWeather == "shower rain"){

      var ico = "https://s9.postimg.org/8kmh6dt97/Shower_Rain.png";
      document.getElementById("testimg").setAttribute("src" , ico);
      $('body').css('background-image' , 'url(https://s15.postimg.org/yvn9qonlz/Shower_Rain.jpg)');
  }

    if(currentWeather == "rain"){

      var ico = "https://s9.postimg.org/cr2q7z3h7/Rain.png";
      document.getElementById("testimg").setAttribute("src" , ico);
      $('body').css('background-image' , 'url(https://s15.postimg.org/qnlc5ovpj/Rain.jpg)');
  }

     if(currentWeather == "thunderstorm"){

      var ico = "https://s9.postimg.org/7kw6aoe3f/Thunderstorm.png";
      document.getElementById("testimg").setAttribute("src" , ico);
      $('body').css('background-image' , 'url(https://s15.postimg.org/lha6ungxz/Thunderstorm.jpg)' );
  }

     if(currentWeather == "snow"){

      var ico = "https://s9.postimg.org/52ah9zsd7/Snow.png";
      document.getElementById("testimg").setAttribute("src" , ico);
      $(
ouch, that's a lot
oops css is not complete, although I don't think I really need to post it all :stuck_out_tongue:
Ilya Kostichenko
@n0Entity
Sep 09 2016 11:00
you can codepen it :D
Klaus Mana
@KlausMana
Sep 09 2016 11:00
shall I post my codepen link?
Ilya Kostichenko
@n0Entity
Sep 09 2016 11:00
why not?
the code that crashes it is from the declaration of the Fahrenheit variable to the assignment of Temperature to the element with ID temperature
when I remove it, the page runs :/
Joris Labie
@labiej
Sep 09 2016 11:10
Hey, anybody knows a good script to scale font-size to fit it's container (viewport units)?
kirbyedy
@kirbyedy
Sep 09 2016 11:10
@KlausMana just a question, where is that temperature in your html that you are trying to get ?
Klaus Mana
@KlausMana
Sep 09 2016 11:11
i figured it out
it was a typo on my document.GetElementByID
the g needs to be lowercase
Murali Kumar Chintala
@muralikumarch
Sep 09 2016 11:16
@718Rogue <div class="thumbnail">
<image src=""></image><div class="caption text-center">caption
</div>
</div> use this
Bludfire
@Bludfire
Sep 09 2016 11:33
I cant change the color of "a" element
how can i change? i think it should be cause of "href" thing
Darth Skywalker
@adityaparab
Sep 09 2016 11:34

@Bludfire

a{
  color : "some color";
}

??

Bludfire
@Bludfire
Sep 09 2016 11:35
It didnt work
Darth Skywalker
@adityaparab
Sep 09 2016 11:35
@Bludfire : It must! Show your code please
Bludfire
@Bludfire
Sep 09 2016 11:35
<ul class="nav navbar-nav navbar-right">
<li><a type="active" class="scrollable">About</a></li>
<li><a class="scrollable">Portfolio</a></li>
<li><a class="scrollable">Contact</a></li>
</ul>
Murali Kumar Chintala
@muralikumarch
Sep 09 2016 11:36
Someone help me to start single page portfolio application "Build a Personal Portfolio Webpage" Lession 121
Darth Skywalker
@adityaparab
Sep 09 2016 11:37
@Bludfire : Yes. and where is your css?
@muralikumarch What do you need help with?
Bludfire
@Bludfire
Sep 09 2016 11:38
a {
color:white;
}
Just this
Murali Kumar Chintala
@muralikumarch
Sep 09 2016 11:39
@adityaparab Hi..i need just start..how to build single page...give me some basic layout kind of stuff
Darth Skywalker
@adityaparab
Sep 09 2016 11:39
@Bludfire : It must work. What do you mean when you say it doesn't work?
do you mean you can't see the text?
Bludfire
@Bludfire
Sep 09 2016 11:39
Like i cant see a white text
Darth Skywalker
@adityaparab
Sep 09 2016 11:40
@Bludfire : Is your background also white? lol
Bludfire
@Bludfire
Sep 09 2016 11:40
nope it is purple
:smile:
Darth Skywalker
@adityaparab
Sep 09 2016 11:40
Share your full code.
Bludfire
@Bludfire
Sep 09 2016 11:40
okay
Darth Skywalker
@adityaparab
Sep 09 2016 11:40
codepen would be great, if available
Bludfire
@Bludfire
Sep 09 2016 11:41
<banner>

<div id="banner" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="row">
<div class="col-xs-3">
<a href="#top" class="scrollable"><img class="img" src="http://qlip.in/sites/default/files/qlip.png" class="logo" title="qlip | UI/UX Design and Development"></a>
</div>
<div id="menu" class="col-md-9">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class=" icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<nav id="navbar" class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li><a>Portfolio</a></li>
<li><a>Contact</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</banner>
Darth Skywalker
@adityaparab
Sep 09 2016 11:41
@muralikumarch " Stick to the basic template as shown in the example project.
Bludfire
@Bludfire
Sep 09 2016 11:41

body{
margin:0;
padding:0;
color:#666;
background:#888;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 20px;
font-color:white;
}

banner {

background-color:purple;
height:75px;
}
.img {
height:55px;
padding-top:15px;
}

menu {

padding-top:10px;

}
a {
color:white;
}

uh i found
error thing
Darth Skywalker
@adityaparab
Sep 09 2016 11:42
Strange, I put it on codepen and it works fine
Bludfire
@Bludfire
Sep 09 2016 11:43
Uh it failed again
idunno it looks fine but still there is an error
But i changed a elements to li elements and it worked better
Faiz Ahmed
@Faiz7412
Sep 09 2016 12:01
Hi!
I am trying to implement this, so I copied the css and js code. Made an html file with proper syntax. And then upon opening it, it's just a plain blank page
Can anyone help me with this?
Muhammad Hasham
@MohammadHasham
Sep 09 2016 12:10
how can i apply border bottom to only the text as an underline instead of the whole page
 text-decoration: none;
    border-bottom: 2px solid white;
@adityaparab
This is my css
U-ways
@U-ways
Sep 09 2016 12:32
@MohammadHasham text-decoration: underline; a bit late though haha
Muhammad Hasham
@MohammadHasham
Sep 09 2016 12:44
but i want a thin border bottom bwloe my text
@U-ways
Faiz Ahmed
@Faiz7412
Sep 09 2016 12:52
Hi everyone!
So I was trying to implement this: http://codepen.io/devilishalchemist/pen/LERvpM
the code for it is here: https://github.com/Faiz7412/pageflip
and I made a github page for it: http://faiz.io/pageflip/
But I'm not able to emulate the animations that were there
(I have been awake since 50 hours so maybe I'm missing something really simple, I need to finish this in few hours so would appreciate any help!
Joris Labie
@labiej
Sep 09 2016 12:54
You need to include jquery
i.e. add <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
It does need some fixing for small screens though @Faiz7412
Faiz Ahmed
@Faiz7412
Sep 09 2016 13:02
Thanks @labiej !
CamperBot
@camperbot
Sep 09 2016 13:02
faiz7412 sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 445 | @labiej |http://www.freecodecamp.com/labiej
Faiz Ahmed
@Faiz7412
Sep 09 2016 13:02
I added jquery <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
and the custom js right before the closing </body> tag
it still doesnt work
do I need to add 2.1.3 one? I tried it with stable version of 3.x
as well
Any thing else you find missing? @labiej
oh damn
wait
Since I'm already going off due to lack of sleep, I made changes in other html file lying in a folder right before pageflip XD
Chase
@Belax8
Sep 09 2016 13:07
@Faiz7412 Move your javascript to the end of the html file
Faiz Ahmed
@Faiz7412
Sep 09 2016 13:08
Yes, moved it. :)
Thanks @Belax8
CamperBot
@camperbot
Sep 09 2016 13:08
faiz7412 sends brownie points to @belax8 :sparkles: :thumbsup: :sparkles:
:cookie: 439 | @belax8 |http://www.freecodecamp.com/belax8
Joris Labie
@labiej
Sep 09 2016 13:09
It works but the font-awesome stuff is all jumbled up
Faiz Ahmed
@Faiz7412
Sep 09 2016 13:09
yeah
I added font-awesome.min.css
in stylesheet
Joris Labie
@labiej
Sep 09 2016 13:11
You need to download the fonts and add them to your repo
or go for the a cdn
miriam-z
@miriam-z
Sep 09 2016 13:15
hi for some reason my images are not loading within my html the paths are correct although I am using sass as well what could be the reason?
U-ways
@U-ways
Sep 09 2016 13:15
@MohammadHasham border-bottom: 1px solid black; the border-bottom property you're using should work!
Maybe you have a white page and cannot see the border because you picked a white border?
Chase
@Belax8
Sep 09 2016 13:16
@miriam-z Do you have a link that you could share so we can look at it?
Joris Labie
@labiej
Sep 09 2016 13:17
@miriam-z check the developer console, its possible a mixed source issue (http vs https)
miriam-z
@miriam-z
Sep 09 2016 13:18
@labiej thanks will check
CamperBot
@camperbot
Sep 09 2016 13:18
miriam-z sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 446 | @labiej |http://www.freecodecamp.com/labiej
miriam-z
@miriam-z
Sep 09 2016 13:21
@Belax8 my images are located here: /public/src/assets/img and my index.html is placed on the root. I have tried every variation of path and still nothing loads
Chris Cullen
@123xylem
Sep 09 2016 13:21
ive made some custom alerts and added css.. its a bad ai but could you review my TICTACTOE?!
U-ways
@U-ways
Sep 09 2016 13:22
@123xylem sometimes when I play the game my "O" doesn't appear. As if the character did not load?
@123xylem Nice job overall!
@123xylem If I choose "X" then "O" twice, your AI will also play "O" with me. That's all I could find haha goodluck!
Chris Cullen
@123xylem
Sep 09 2016 13:25
@U-ways :) thanks .. yea i know abou that bug... when i tried togglin a noclick class to them buttons after a choice it stopped my cpu working and i thought to fix that small bug it wasnt wort so much effort
CamperBot
@camperbot
Sep 09 2016 13:25
123xylem sends brownie points to @u-ways :sparkles: :thumbsup: :sparkles:
:cookie: 356 | @u-ways |http://www.freecodecamp.com/u-ways
U-ways
@U-ways
Sep 09 2016 13:25
@miriam-z Is it possible that I could see a bit of your img HTML related tags and any CSS related for it?
@123xylem Haha true, make it all work first then think about the polishing :P Industrial motto!
Joris Labie
@labiej
Sep 09 2016 13:27
Then we need to see your code @miriam-z
miriam-z
@miriam-z
Sep 09 2016 13:28
@labiej @U-ways @Belax8 <div class="container-fluid"> <h3 id="cards-title">Why choose our sightseeing bus tours&#63;</h3> <div id="home-tiles" class="row"> <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> <a href="public/src/assets/img/card-bus-md.jpg"> <div id="card-bus">Hop-on, Hop-off<span> As many times as you choose</span></div> </a> </div> <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> <a href="public/src/assets/img/card-route-md.jpg"> <div id="card-route">Our Amazing Routes<span>See Paris by day and night</span></div> </a> </div> <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> <a href="public/src/assets/img/card-cruise-md.jpg"> <div id="card-cruise">Free River Cruise<span>One ticket, two experiences</span></div> </a> </div> <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> <a href="public/src/assets/img/card-guide-md.jpg"> <div id="card-guide">Live Guides<span>With renowned local knowledge</span></div> </a> </div> </div> </div>
the images are being placed in the html although I have also tried this using background url in css
and still they do not load although my editor picks up the image path so they are clearly in the folder
U-ways
@U-ways
Sep 09 2016 13:30
@miriam-z <a href="public/src/assets/img/card-route-md.jpg"> Use img tag instead of the a tag for images. one moment let me provide an example
Chase
@Belax8
Sep 09 2016 13:30
@miriam-z maybe use an img tag and not an a tag
miriam-z
@miriam-z
Sep 09 2016 13:30
aaah yes
U-ways
@U-ways
Sep 09 2016 13:30
<img src="public/src/assets/img/card-route-md.jpg">
miriam-z
@miriam-z
Sep 09 2016 13:30
that was a very basic one!
U-ways
@U-ways
Sep 09 2016 13:31
@miriam-z Haha don't worry! Goodluck!
miriam-z
@miriam-z
Sep 09 2016 13:31
@labiej @U-ways @Belax8 thanks I will try this
CamperBot
@camperbot
Sep 09 2016 13:31
miriam-z sends brownie points to @labiej and @u-ways and @belax8 :sparkles: :thumbsup: :sparkles:
:cookie: 357 | @u-ways |http://www.freecodecamp.com/u-ways
:warning: miriam-z already gave labiej points
:cookie: 440 | @belax8 |http://www.freecodecamp.com/belax8
Joris Labie
@labiej
Sep 09 2016 13:32
I think you'd want to use <img src="./public/src/assets/img/card-route-md.jpg" >, better to avoid possible ambiguities
U-ways
@U-ways
Sep 09 2016 13:33

@miriam-z

<a href="links goes here">
    <img src="./public/src/assets/img/card-route-md.jpg">
    <div id="card-route">Our Amazing Routes<span>See Paris by day and night</span></div>
</a>

Something like that perhaps? o:

( @labiej Thanks for the path tip haha)

CamperBot
@camperbot
Sep 09 2016 13:33
u-ways sends brownie points to @miriam-z and @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 248 | @miriam-z |http://www.freecodecamp.com/miriam-z
:cookie: 447 | @labiej |http://www.freecodecamp.com/labiej
miriam-z
@miriam-z
Sep 09 2016 13:34
@labiej @U-ways thanks again and for the brownie points!
CamperBot
@camperbot
Sep 09 2016 13:34
miriam-z sends brownie points to @labiej and @u-ways :sparkles: :thumbsup: :sparkles:
:warning: miriam-z already gave u-ways points
:warning: miriam-z already gave labiej points
Muhammad Hasham
@MohammadHasham
Sep 09 2016 13:36
@U-ways actually the border is there but it just occupies the whole page width
blob
How can i draw these progress circles
U-ways
@U-ways
Sep 09 2016 13:38
Ohh, borders occupy their parents width. So you will need to change the parents width in order to configure that or <div class="border"></div> use this empty div for a quick border!
Muhammad Hasham
@MohammadHasham
Sep 09 2016 13:39
okay i'll try
miriam-z
@miriam-z
Sep 09 2016 13:42
I am checking the developer tools and it says there is a 404 error and it cannot get the image. The img src tag is not the issue here
Ahmed Amine
@aabh
Sep 09 2016 13:42
hallo i have question : each pixel in 8-bits RGB color from 0 to 255 ? i mean R:0-255 G:0-255 B:0-255 \ RGB (157,45,241) is that a color in 8-bits RGB ?
Chase
@Belax8
Sep 09 2016 13:44
@miriam-z 404 means Not Found, so maybe your path is wrong
U-ways
@U-ways
Sep 09 2016 13:45
404 error means the file is not found, should be a server related problem or the path is wrong.
(if the path ./public/src/assets/img/card-route-md.jpg did not work, try: public/src/assets/img/card-route-md.jpg)
Chase
@Belax8
Sep 09 2016 13:45
@miriam-z Maybe take off ./ so it doesn't try to find the root directory. Like <img src="public/src/assets/img/card-route-md.jpg" >
miriam-z
@miriam-z
Sep 09 2016 13:46
@Belax8 doesn’t work either
Chase
@Belax8
Sep 09 2016 13:47
@miriam-z Where is your index.html file? Is it in the public folder or outside of it?
miriam-z
@miriam-z
Sep 09 2016 13:48
inside it
Chase
@Belax8
Sep 09 2016 13:48
@miriam-z So maybe try <img src="src/assets/img/card-route-md.jpg" >
Muhammad Hasham
@MohammadHasham
Sep 09 2016 13:48
how can i make progress circles like these is there a library or shall i do that with html,css
blob
U-ways
@U-ways
Sep 09 2016 13:49
@MohammadHasham There should be a library somewhere for that. No clue where though :c
Muhammad Hasham
@MohammadHasham
Sep 09 2016 13:49
@U-ways Okay
miriam-z
@miriam-z
Sep 09 2016 13:49
This message was deleted
on the root like so: public/src/assets - css - img - js - stylesheets index.html
Chase
@Belax8
Sep 09 2016 13:51
@miriam-z Ok so maybe just try <img src="img/card-route-md.jpg" > You have to think of the path from the HTML file not the full path
Joris Labie
@labiej
Sep 09 2016 13:54
The folder that contains your html is the "root" of your folder structure
miriam-z
@miriam-z
Sep 09 2016 13:54
@Belax8 no luck
Joris Labie
@labiej
Sep 09 2016 13:55
Can you try and show us the folder structure (by using a screenshot for example)
miriam-z
@miriam-z
Sep 09 2016 13:55
@labiej the index.html is at the root of this folder yes
Joris Labie
@labiej
Sep 09 2016 13:55
But what is "this folder"? Is that public?
In other words in which folder does "index.html" sit?
jrandallhansen
@jrandallhansen
Sep 09 2016 14:03
i am having trouble triggering my AJAX function when the user presses enter on the search bar instead of pressing the search button. can anyone spot my problem? https://codepen.io/jrandall/pen/gwONZy?editors=0010
Chase
@Belax8
Sep 09 2016 14:06
@jrandallhansen It worked for me. . .
r2d2
@UsamaHameed
Sep 09 2016 14:06
Worrks for me too
jrandallhansen
@jrandallhansen
Sep 09 2016 14:07
i just had to reload the page... lol. thanks
sorry haha
that was the easiest fix ive had yet!
Darth Skywalker
@adityaparab
Sep 09 2016 14:08

@jrandallhansen : Slight mistake. It will work for some people and won't work for others, depending on their browsers.

However, this is a generic way to make sure it works everywhere

 if (e.which == 13) { //Enter key pressed
      //$('#searchButton').click(); //Trigger search button click event
      $('#searchButton').trigger('click',{}); //Trigger search button click event
    }
.click is meant to be used as .addEventListenerequivalent. So refrain from violating standards even though it seems to work in short run. It will help you avoid the likelihood of running into pretty nasty and ugly issues in the long run.
@UsamaHameed Greetings!
r2d2
@UsamaHameed
Sep 09 2016 14:10
Hi @adityaparab
Pietrooh
@Pietrooh
Sep 09 2016 14:12
hi everybody
im having a problem
Screenshot (2).png
Faiz Ahmed
@Faiz7412
Sep 09 2016 14:13
@labiej Thanks for your help, Joris.
CamperBot
@camperbot
Sep 09 2016 14:13
faiz7412 sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 448 | @labiej |http://www.freecodecamp.com/labiej
jrandallhansen
@jrandallhansen
Sep 09 2016 14:13
@adityaparab so .click should ONLY be used in place of .on('click',{}) essentially??
Faiz Ahmed
@Faiz7412
Sep 09 2016 14:14
Can you guide me further on how to fix it for small screens? Only if you have time.
Darth Skywalker
@adityaparab
Sep 09 2016 14:14
@jrandallhansen : Nope. .click and .on('click' are equivalent. If you want to trigger the event on certain element then refrain from using .click. Use .trigger instead.
Muhammad Hasham
@MohammadHasham
Sep 09 2016 14:15
Can anyone tell me how to use this library?
https://kimmobrunfeldt.github.io/progressbar.js/
@adityaparab
i can't get the documentation right?
Darth Skywalker
@adityaparab
Sep 09 2016 14:15
@MohammadHasham let me check
Muhammad Hasham
@MohammadHasham
Sep 09 2016 14:16
@adityaparab okay :smile:
Darth Skywalker
@adityaparab
Sep 09 2016 14:17
@MohammadHasham : Using that require won't work directly in the browser. You will need some module loader to pull that off. Like Browserify or Webpack.
Muhammad Hasham
@MohammadHasham
Sep 09 2016 14:17
@adityaparab so is there any other library that could work directly in browser actually i want to make progress circles
jrandallhansen
@jrandallhansen
Sep 09 2016 14:17
@adityaparab right. so only use .click as shorthand for .on('click') right? or are there other uses ?
Joris Labie
@labiej
Sep 09 2016 14:18
You can load the js and use it directly normally, check out a react example on codepen to see how it works
Darth Skywalker
@adityaparab
Sep 09 2016 14:18
@jrandallhansen : Correct. No other uses. Although I prefer using .on syntax. for .click sounds a little counter intuitive to me.
Joris Labie
@labiej
Sep 09 2016 14:18
e.g. the markdown previewer https://codepen.io/labiej/pen/dXwvLy
Darth Skywalker
@adityaparab
Sep 09 2016 14:19
jrandallhansen
@jrandallhansen
Sep 09 2016 14:19
@adityaparab I like .click since it is shorter lol
Muhammad Hasham
@MohammadHasham
Sep 09 2016 14:20
actually i am worrking on sublime can you tell me how can i make use of it?
@adityaparab
Joris Labie
@labiej
Sep 09 2016 14:20
@jrandallhansen does .click accept a reference to a function?
Darth Skywalker
@adityaparab
Sep 09 2016 14:20
@MohammadHasham Then put a script tag in your index.html and set it's src to above url
Muhammad Hasham
@MohammadHasham
Sep 09 2016 14:21
okay
Darth Skywalker
@adityaparab
Sep 09 2016 14:21
@jrandallhansen : I agree. It's personal choice though. Nothing wrong with that :D
Although, you might wanna consider the problem you ran into due to the naming. :D .click does sound like you're triggering a even as well :D
Muhammad Hasham
@MohammadHasham
Sep 09 2016 14:22
I have added that as src now what shall i do?
@adityaparab
Darth Skywalker
@adityaparab
Sep 09 2016 14:23

@MohammadHasham

var bar = new ProgressBar.Line('#container', {easing: 'easeInOut'});
bar.animate(1);  // Value from 0.0 to 1.0

Same as explained in that tutorial

jrandallhansen
@jrandallhansen
Sep 09 2016 14:23
@adityaparab well it apparently 'works' to trigger the event. but it is nice to get this clarification. i edited an answer on stackoverflow to detail that difference. @labiej yes it does. $("#yourButton").click(function(){}); is the format
Bhavik
@BhavikSheth
Sep 09 2016 14:23
Hey guys, I am having trouble with the TwitchTV Project. I load the TwitchTV Streams API for a channel to check whether it is online, offline, or the account has been closed. I then load the Channels API for the same channel to get information like the logo, name, url etc based on the status of the channel. Now what I have a problem with is sometimes the Channels API has started to load before the Streams API has finished getting the status of the channel. This causes the status to be undefined when the Channels API loads causing some the results on my project to be wrong. http://codepen.io/BhavikSheth/full/KgwJWB/
I know that both brunofin and comster404 channels are closed but sometimes they show Offline
Darth Skywalker
@adityaparab
Sep 09 2016 14:24
@MohammadHasham Alternatively, if you've npm installed progressbar.js you can also set the src to node_modules/path/to/progressbarjs depending on folder structure
instead of using the cdn url
Muhammad Hasham
@MohammadHasham
Sep 09 2016 14:25
No i dont have npm
i am trying to do the way you have told
@adityaparab
Darth Skywalker
@adityaparab
Sep 09 2016 14:26
okay. then use that cdn url.
Bhavik
@BhavikSheth
Sep 09 2016 14:26
I console logged the status and it showed that the Channels API had finished loading first causing the status to be undefined
Darth Skywalker
@adityaparab
Sep 09 2016 14:26
@jrandallhansen :+1:
Muhammad Hasham
@MohammadHasham
Sep 09 2016 14:26
$(document).ready(function(){

var bar = new ProgressBar.Line('.c100 p25', {easing: 'easeInOut'});
bar.animate(1);

});
@adityaparab nothing is there on the screen
am i doing right?
jrandallhansen
@jrandallhansen
Sep 09 2016 14:26
i highly recommend the "JSON formatter" chrome extension to anyone who hasn't installed it. so nice to have
Darth Skywalker
@adityaparab
Sep 09 2016 14:27
@MohammadHasham any error in console?
Muhammad Hasham
@MohammadHasham
Sep 09 2016 14:27
No there are no errors plugins have been reloaded
@adityaparab
Darth Skywalker
@adityaparab
Sep 09 2016 14:28
@MohammadHasham : Can you do a console.log(ProgressBar); and see if it's getting set properly?
Muhammad Hasham
@MohammadHasham
Sep 09 2016 14:31
ok i'll check that
@adityaparab
Darth Skywalker
@adityaparab
Sep 09 2016 14:34
Muhammad Hasham
@MohammadHasham
Sep 09 2016 14:34
@adityaparab Thanks
CamperBot
@camperbot
Sep 09 2016 14:34
mohammadhasham sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 695 | @adityaparab |http://www.freecodecamp.com/adityaparab
Husam
@7usam
Sep 09 2016 14:34
Hello guys
is there a way where I can delete all saved achievments on challanges ?
I wanna start over from scratch
Bludfire
@Bludfire
Sep 09 2016 14:44
hey i cant send my pen
Tom
@Torayx
Sep 09 2016 14:57
i have a question pertaining to using an anchor element as a button
nvm found it -.-
Tom
@Torayx
Sep 09 2016 15:46
im having trouble with the buttons on my navbar making you scroll to the appropriate section
right now as it is, everytime you click on one of the buttons, it just reopens my pen
vínαч puppαl
@vinaypuppal
Sep 09 2016 15:59
@Torayx You have to use Link to an element with a specified id within a page to goto that part of page.
<a href="#contact">Contact</a>
Reference: http://www.w3schools.com/tags/att_a_href.asp
Tom
@Torayx
Sep 09 2016 16:00
ive done that
just resends me to the page
<a role="button" href="#Contact" target="_blank" class="btn btn-default"><b>Contact</b></a>
vínαч puppαl
@vinaypuppal
Sep 09 2016 16:00
@Torayx link to your pen
i also just screwed up the size of the navbar so if you could help with that as well -.-
vínαч puppαl
@vinaypuppal
Sep 09 2016 16:01
@Torayx First remove target="_blank" on links and let me check if any other issues
Tom
@Torayx
Sep 09 2016 16:02
that was 1 of the things i was trying :/ but i removed em
also not sure why my navbar got huge all of a sudden when all morning its been the small size i needed
oh i think i found out that answer
vínαч puppαl
@vinaypuppal
Sep 09 2016 16:07
@Torayx <h1 id="About" class="text-center"><u>About</u></h1> you used id=#About
it should be only id=About and on links it should be href=#About
Tom
@Torayx
Sep 09 2016 16:09
ooooooh
duh
Got it!
@vinaypuppal Thanks so much!
CamperBot
@camperbot
Sep 09 2016 16:10
torayx sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 486 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Tom
@Torayx
Sep 09 2016 16:10
one more quick question if you have time
vínαч puppαl
@vinaypuppal
Sep 09 2016 16:11
yes
Tom
@Torayx
Sep 09 2016 16:11
i originally had the 3 buttons in the navbar on the righthand side using float:right
doesnt seem to work now
any suggestions for having them on the righthand side?
vínαч puppαl
@vinaypuppal
Sep 09 2016 16:18
@Torayx use bootstrap nav component properly http://getbootstrap.com/components/#navbar
You did not close few tags properly may be thats causing problem see above link for reference
Tom
@Torayx
Sep 09 2016 16:23
ok i will review thank you again
vínαч puppαl
@vinaypuppal
Sep 09 2016 16:23
@Torayx And also include First Jquery.js and then bootstrap.js in JS panel of your pen
Klaus Mana
@KlausMana
Sep 09 2016 16:38
hey idk why but my whole page is white after adding some js code
may I post the codepen link because the code is quite long
The code that broke it is
 $("#celsius").on("click", function(){
  Temperature = Celsius;
  TemperatureString = Temperature.toString() + "°"; 
  $("#temperature").html(TemperatureString);
       });

  $("#fahrenheit").on("click", function(){
  Temperature = Fahrenheit;
  TemperatureString = Temperature.toString() + "°"; 
  $("#temperature").html(TemperatureString);
       });
Zelite
@zelite
Sep 09 2016 16:41
Hi, i am working on my calculator: https://zelite.github.io/JavaScript-Calculator/
Anyone knows how to prevent the text of the calculator display to be selectable?
Klaus Mana
@KlausMana
Sep 09 2016 16:41
selectable?
you mean the select cursor not to display?
add a class pointer for the buttons, then on css, in this class do cursor : pointer;
Zelite
@zelite
Sep 09 2016 16:44
at the moment you can highlight the text there
is there a possibility to prevent that?
Klaus Mana
@KlausMana
Sep 09 2016 16:47
oh ok
to this class
David
@DavidLi-Minxiao
Sep 09 2016 16:47
Hey guys, could I get some help on the Portfolio?
Klaus Mana
@KlausMana
Sep 09 2016 16:47
add user-select : none;
@arvendragon what do you need?
David
@DavidLi-Minxiao
Sep 09 2016 16:47
I'm trying to remove the outline that appears when you focus on a form element
this is my code:
Klaus Mana
@KlausMana
Sep 09 2016 16:47
can you post your codepen link please?
David
@DavidLi-Minxiao
Sep 09 2016 16:48

.form{
border: none;
border-bottom: 1px solid lightgrey;
background-color: #e6e6e6;
margin:10px;
padding-top: 20px;
padding-bottom: 20px;
font-size: 1.5em;
box-shadow:none;
outline:none;
}

*:focus {
outline:none;
outline-style:none;
box-shadow:none;
border-color:inherit;
-webkit-box-shadow: none;
}

Joris Labie
@labiej
Sep 09 2016 16:48
Why wouldn't you want that? @zelite
@labiej the example didn't have it, and I'm trying to recreate it as much as I can
Joris Labie
@labiej
Sep 09 2016 16:49
Forgot to add a name (was asking zelite), lemme check your question
I used
border: none
  outline: none
  -webkit-box-shadow: none
  -moz-box-shadow: none
  box-shadow: none
David
@DavidLi-Minxiao
Sep 09 2016 16:50
hmm, im missing the moz part
i don't recall which was for what browser
but gonna test that
Joris Labie
@labiej
Sep 09 2016 16:50
to get rid of the shiny stuff for a textarea
David
@DavidLi-Minxiao
Sep 09 2016 16:51
@labiej what's the CSS selector that you use?
the input HTML element, the .form class, form:focus, or what?
Joris Labie
@labiej
Sep 09 2016 16:51
I used textarea:focus
Jason Luboff
@JLuboff
Sep 09 2016 16:51
@arvendragon moz is for "Moz"illa Firefox
Joris Labie
@labiej
Sep 09 2016 16:52
In fact I used #left textarea:focus but that's because I wrote it in Sass
David
@DavidLi-Minxiao
Sep 09 2016 16:53
@labiej that code isn't working for me for some reason
textarea:focus{
border: none;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
Joris Labie
@labiej
Sep 09 2016 16:54
Well your form uses inputs and textareas so you need to do it for both, lemme check real quick
David
@DavidLi-Minxiao
Sep 09 2016 16:55
@labiej i'm an idiot. I was testing it for textarea but clicking on the inputs. Thank you for the help xD
CamperBot
@camperbot
Sep 09 2016 16:55
arvendragon sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 449 | @labiej |http://www.freecodecamp.com/labiej
Joris Labie
@labiej
Sep 09 2016 16:56
The easiest way is to use
.form-control:focus{
  border: none;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
That'll affect all of them at once :-)
David
@DavidLi-Minxiao
Sep 09 2016 16:57
opposite of focus is :blur right?
David Darius
@DavidDarius
Sep 09 2016 16:59
i can receive some feedback? : https://codepen.io/DavidDarius/pen/kkrWOq
David
@DavidLi-Minxiao
Sep 09 2016 17:00
@labiej thank you for your help! that solution worked, but i needed to use a :not(:focus) to get rid of the opposite transition. do you know if there's a better solution?
CamperBot
@camperbot
Sep 09 2016 17:00
:warning: arvendragon already gave labiej points
arvendragon sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
David
@DavidLi-Minxiao
Sep 09 2016 17:01
@DavidDarius your buttons aren't highlighting based on your scroll position, are you using scrollspy?
honesty1997
@Honesty1997
Sep 09 2016 17:01
I have some issues on the tweet button.This is my work
https://codepen.io/Honesty1997/pen/YGPBww
After I change the quote,the tweet content doesn't change as well.
Joris Labie
@labiej
Sep 09 2016 17:02
@arvendragon I have no clue
David
@DavidLi-Minxiao
Sep 09 2016 17:04

@DavidDarius another comment, your navbar isn't collapsing properly. if you intended to have a giant fixed menu, i'd recommend against that.

your image links are also broken

David Darius
@DavidDarius
Sep 09 2016 17:04
@arvendragon are broken beacuse i didnt have anything to show
David
@DavidLi-Minxiao
Sep 09 2016 17:08
@DavidDarius fair enough, it looks like its coming together nicely. the only real code-related concerns i'd have would be about your navbar, as i've mentioned
i would also move the styling to the CSS part instead of using style comments in HTML
if you're using bootstrap, why not use the built-in functionalities of its navbar? it's much easier to set up
and you should probably load bootstrap's javascript library too
Hung Nguyen
@hungnguyen1895
Sep 09 2016 17:10
https://codepen.io/hungnguyen1895/pen/vXOoBa can somebody take a look at my first challenge and give me a feedback, please ?
tadalox
@tadalox
Sep 09 2016 17:13
hey, please give feedback. Its quote machine http://codepen.io/tadalox/pen/BLNQrY
vínαч puppαl
@vinaypuppal
Sep 09 2016 17:14
@Honesty1997 Since you loaded Twitter widget you cant access your twitter-share-button from JS it will be replaced by iframe you can verify that chrome dev tools. So use your own a tag style it as button and change its href in JS dynamically using http://twitter.com/share?text=your quote and author
David
@DavidLi-Minxiao
Sep 09 2016 17:15
@hungnguyen1895 it seems fine! you could use more built-in features, i.e. <b> instead of <span + class/css>, or BootStrap's own quote functionalities, but other than that what you did works
Hung Nguyen
@hungnguyen1895
Sep 09 2016 17:16
thank you, I was wondering how to make the image center but does not consider like a block element
David
@DavidLi-Minxiao
Sep 09 2016 17:17
why not keep it a block element?
also, general help question, how do you get those boxes around code in chat? :smile:
tadalox
@tadalox
Sep 09 2016 17:18
hey, please give feedback. Its quote machine
http://codepen.io/tadalox/full/BLNQrY
vínαч puppαl
@vinaypuppal
Sep 09 2016 17:20
@tadalox Nice Design. one suggestion give .quotesquare some min-height so it won't flicker when quote text is small
@arvendragon use backtics ``` around code https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Code-Formatting
tadalox
@tadalox
Sep 09 2016 17:25
@vinaypuppal ok, thanks a lot
CamperBot
@camperbot
Sep 09 2016 17:25
tadalox sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 487 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
David
@DavidLi-Minxiao
Sep 09 2016 17:27
hello
thank's @vinaypuppal :smile:
CamperBot
@camperbot
Sep 09 2016 17:27
arvendragon sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 488 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Ryan Williams
@Ryanwfile
Sep 09 2016 17:32
Can someone familiar with bootstrap carousels please help me, I am trying to have any image under a certain height gain a top property of 120px but I am not sure how to affect the appropriate image. Thank you for any help. This is the javascript code
function imgChk()
{
  var allImg = document.querySelectorAll('.item > img');
  console.log(allImg.length);
  console.log(allImg[0]);
  console.log(allImg[0].height);
  console.log(allImg[5]);
  console.log(allImg[5].height);  

for (var i =0;i<allImg.length; i++)
  {
    if (allImg[i].height < 350)
    {
      $(allImg[i]).css('top', '120px')
      /*#myCarousel.carousel.slide is the element I need to affect but I'm not certain how to target a specific image this way, :active doesn't work*/
    }
  }

}
David
@DavidLi-Minxiao
Sep 09 2016 17:38
Hey, could someone criticize this portfolio?
http://codepen.io/arvendragon/pen/dpoRrW
Nissan Azizov
@na21
Sep 09 2016 17:46
Hi everyone, I'm trying to create a page in .net where I have a list of "parameters" to the left side of the screen. Clicking on one will bring up each parameter's list of items in the center with checkboxes and a running list of items selected to the right of this listview. What is the best way to do this? AJAX?
vínαч puppαl
@vinaypuppal
Sep 09 2016 18:01
@arvendragon Looks Good. Some suggestions contact form looks narrow on small screen i.e below 480px you can tweak padding for that div.row using media queries and for PORTFOLIO images you can add links to those respective sites, so when we click on image it takes to that site .
Theodore P.
@Ierofantis
Sep 09 2016 18:31
This message was deleted
This message was deleted
This message was deleted
Kuba Rdzak
@qubkon
Sep 09 2016 18:59
@arvendragon 1) your light class is not centered (or is it intentional?) 2) your GitHub icon is a bit off from the rest 3) well... overall pretty solid
Jay15
@INVALID000
Sep 09 2016 19:03
ok so i was sent here for a jquery qyestion
<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
    $("#target2").appendTo("#right-well");
    $("#target5").clone().appendTo("#left-well");
    $("#target1").parent().css("background-color", "red");
    $("#right-well").children().css("color", "orange");
    $("#left-well").children().css("color", "green");
    $(".target:nth-child(2)").addClass("animated bounce");
    $("target:even").addClass("animated shake");

  });
</script>
the challenge is to target even numbered elements
idk what im doing wrong
linnk99
@linnk99
Sep 09 2016 19:05
Hi everyone!
Can somebody rate my tribute page from 1 to 5 please?!
http://codepen.io/linnk99/full/LRVvEQ/
Kuba Rdzak
@qubkon
Sep 09 2016 19:10
@linnk99 is the font color white?
@linnk99 it is, never mind. well... overall I think it's 4.5/5. not 5 because you can and some line-height so the text will be more reading-friendly
@linnk99 also, some spacing here and there
linnk99
@linnk99
Sep 09 2016 19:13
@qubkon Thanks! I'll take it on mind so I can improve it :)
CamperBot
@camperbot
Sep 09 2016 19:13
linnk99 sends brownie points to @qubkon :sparkles: :thumbsup: :sparkles:
:cookie: 108 | @qubkon |http://www.freecodecamp.com/qubkon
Kuba Rdzak
@qubkon
Sep 09 2016 19:14
@linnk99 you're welcome - have fun :)
U-ways
@U-ways
Sep 09 2016 19:27
@tadalox Your quote machine is awesome _
Phuc Le
@phuchle
Sep 09 2016 19:33
hey guys can anybody tell me why my navbar is stacking like this?
LenaSUI
@LenaSUI
Sep 09 2016 19:42
Bildschirmfoto 2016-09-09 um 21.40.26.png
Does anybody know how I only make the background image transparent?
vínαч puppαl
@vinaypuppal
Sep 09 2016 19:46
@phuchle you added wrong class here <ul class="nav nav-navbar"> it should be <ul class="nav navbar-nav">
Phuc Le
@phuchle
Sep 09 2016 19:46
@vinaypuppal thank you!
CamperBot
@camperbot
Sep 09 2016 19:46
:cookie: 489 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
phuchle sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
sentedelviento
@sentedelviento
Sep 09 2016 19:59
Hey, has anyone completed the React markup project?
JitteryJoe
@JitteryJoe
Sep 09 2016 20:21
hey all, I broke my Wikipedia viewer and I can't figure out how. Any help is appreciated!
$.ajax({
      url: 'https://en.wikipedia.org/w/api.php',
      data: {
        action: 'query',
        list: 'search',
        srsearch: $("#search").val(),
        format: 'json',
      },
      dataType: 'jsonp',
      success: function(data) {
       [some function]
        }
      },
      error: console.log("error")
    });
Taras Yaremkiv
@Y-Taras
Sep 09 2016 21:02
Hi everybody. Is there anybody who can help me with minimax algorithm
I'm doing a tic tac toe game btw)
mzedlach
@mzedlach
Sep 09 2016 21:30
Hey everyone :grinning: I'm trying to do the portfolio page. In my CSS, I'd like to change the logo so that it has the "Righteous" font type and colour #38302E but it's not applying. Im not sure why. I added the font link at the top and I'm sure everything is in the correct div's. Thoughts? http://codepen.io/mzedl/pen/dXQkdq
Eric Weiss
@eweiss17
Sep 09 2016 21:40
@JitteryJoe This is what I used.... If that helps
 var search = $('#searchbox').val();
      // API request to wikipedia
      $.getJSON('https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&limit=8&search='+search+'&callback=?',
        function(data) {
@mzedlach I am looking into it now
mzedlach
@mzedlach
Sep 09 2016 21:43
I got the font type answered... it has to be in the html
Eric Weiss
@eweiss17
Sep 09 2016 21:44
@mzedlach Okay, you can get rid of the html tag and head tag at the top of your html. They are embedded.
you can also link that font at the head section of html under settings.... just make it cleaner
greg
@wearenotgroot
Sep 09 2016 21:44
@mzedlach put it in the html settings
Chance103
@Chance103
Sep 09 2016 21:46
This message was deleted
greg
@wearenotgroot
Sep 09 2016 21:47
@Chance103 show us what you got? also ---->https://gitter.im/FreeCodeCamp/HelpJavaScript
mzedlach
@mzedlach
Sep 09 2016 21:47
@wearenotgroot So I figured that one out so far, but why is the font colour not applying?
Chance103
@Chance103
Sep 09 2016 21:48
This message was deleted
Eric Weiss
@eweiss17
Sep 09 2016 21:49
@mzedlach apply the color to the a tag
mzedlach
@mzedlach
Sep 09 2016 21:50
why can't I put it in the logo class?
@eweiss17
Eric Weiss
@eweiss17
Sep 09 2016 21:52
I messaged you privately , it'd be easier just to talk there
It is being overridden is the short answer
Garrus Napp
@GarrusNapp
Sep 09 2016 22:11
any1 here? Need help with little jQuery
Gabriel Alexandre
@GabrielShaad
Sep 09 2016 22:12
Hello world! How are you guys doing?
CamperBot
@camperbot
Sep 09 2016 22:12

welcome to FreeCodeCamp @GabrielShaad!

Gabriel Alexandre
@GabrielShaad
Sep 09 2016 22:12
Can I have your feedback on my Portfolio page so far? https://codepen.io/gabrielshaad/full/BzLRdm/
Garrus Napp
@GarrusNapp
Sep 09 2016 22:15
@GabrielShaad header looks cool, in portfolio thing I'd change that animation to be played when u hover on actual picture, right now it does it when you have a mouse just close to it, little thing but somehow irritates me a bit :D, also fix connect to be maybe more confined? would look better imho
@GabrielShaad other than that looks very nice, grats
Gabriel Alexandre
@GabrielShaad
Sep 09 2016 22:17
@GarrusNapp Thanks for the feedback! I'll do this.
CamperBot
@camperbot
Sep 09 2016 22:17
gabrielshaad sends brownie points to @garrusnapp :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @garrusnapp |http://www.freecodecamp.com/garrusnapp
Brian
@zero2sixty
Sep 09 2016 22:17
Hello everyone, finally finished my tribute page and learned a lot and kept adding and adding. I used quite a bit of media queries to allow the text format to remain the same depending on the device being used. I welcome your feedback, thanks!
Eric Weiss
@eweiss17
Sep 09 2016 22:22
@zero2sixty Looks nice!
U-ways
@U-ways
Sep 09 2016 22:24
@zero2sixty That looks really nice (Y)
Brian
@zero2sixty
Sep 09 2016 22:25
Thank you both!
U-ways
@U-ways
Sep 09 2016 22:26
@zero2sixty Nice one page Portfolio! If you want, you can later add smooth scroll! https://css-tricks.com/snippets/jquery/smooth-scrolling
This message was deleted
CamperBot
@camperbot
Sep 09 2016 22:27

welcome to FreeCodeCamp @U-ways!

U-ways
@U-ways
Sep 09 2016 22:27
@camperbot :D
RosaRend
@RosaRend
Sep 09 2016 22:36
I forgot how do you center an image?
Anyone?
Garrus Napp
@GarrusNapp
Sep 09 2016 22:42
@RosaRend text-align: center
RosaRend
@RosaRend
Sep 09 2016 22:44
@GarrusNapp That's for an image?
Garrus Napp
@GarrusNapp
Sep 09 2016 22:44
@RosaRend should work ;)
Brian
@zero2sixty
Sep 09 2016 22:44
you can also try <img src="pic.jpg" alt="pic" width="20" height="20" align="middle">
RosaRend
@RosaRend
Sep 09 2016 22:45
@GarrusNapp Thank You.
CamperBot
@camperbot
Sep 09 2016 22:45
rosarend sends brownie points to @garrusnapp :sparkles: :thumbsup: :sparkles:
:cookie: 312 | @garrusnapp |http://www.freecodecamp.com/garrusnapp
Garrus Napp
@GarrusNapp
Sep 09 2016 22:45
@RosaRend :)
RosaRend
@RosaRend
Sep 09 2016 22:46
@zero2sixty Thank You.
CamperBot
@camperbot
Sep 09 2016 22:46
rosarend sends brownie points to @zero2sixty :sparkles: :thumbsup: :sparkles:
:cookie: 140 | @zero2sixty |http://www.freecodecamp.com/zero2sixty
Garrus Napp
@GarrusNapp
Sep 09 2016 22:48
$("input").html("worked") why doesn't it work guys? You can't change input label with jQuery?
Tyler Moeller
@TylerMoeller
Sep 09 2016 23:01
@GarrusNapp You need to use a <label> tag for radio buttons:
<input id="wth" type="radio" name="choice"><label for="choice">WHATS</label>
and then do $('label[for=choice]').html('worked');
More info: http://stackoverflow.com/questions/5795499/changing-text-of-radio-button
Garrus Napp
@GarrusNapp
Sep 09 2016 23:02
@TylerMoeller Thank you, I searched on SO but couldn't find anything :)
CamperBot
@camperbot
Sep 09 2016 23:02
garrusnapp sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 814 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Lakylelyttle2019
@Lakylelyttle2019
Sep 09 2016 23:10
Any tribute topics? I'm bad at making choices..
Garrus Napp
@GarrusNapp
Sep 09 2016 23:10
@Lakylelyttle2019 harambe
Gabriel Alexandre
@GabrielShaad
Sep 09 2016 23:12
@U-ways I added the smooth scroll! Thanks.
CamperBot
@camperbot
Sep 09 2016 23:12
gabrielshaad sends brownie points to @u-ways :sparkles: :thumbsup: :sparkles:
:cookie: 374 | @u-ways |http://www.freecodecamp.com/u-ways
seanmckee
@seanmckee
Sep 09 2016 23:41
how do I make the scrolling navigation bar in the portfolio project?