These are chat archives for FreeCodeCamp/HelpFrontEnd

18th
Dec 2016
Ghost
@ghost~580ed9c0d73408ce4f309ef0
Dec 18 2016 00:00
Hello bro
Abisai
@Agonzalez756
Dec 18 2016 00:14
Hello guys i've been trying to upload a photo on my desktop to my html file for the portfolio assignment. <img src="abisai-selfie.JPG" alt="Abisai taking a selfie" style="width:128px;height=128px;> what am i doing wrong that my img doesn't upload?/
Gladias
@Gladias
Dec 18 2016 00:51
@Agonzalez756 I think you should change height= to height: but im not sure it it gonna help
sparklie3
@sparklie3
Dec 18 2016 00:55
finished the twitch api challenge, would love any feedback
the link doesn't work if you just click on it, it's a know codepen issue
you have to right click
Addy
@asonder
Dec 18 2016 01:01
Does anyone here have any experience using http://cors-everywhere.herokuapp.com/?
sparklie3
@sparklie3
Dec 18 2016 01:02
@asonder is that your heroku app?
not sure what the question is
Gladias
@Gladias
Dec 18 2016 01:03
Hi guys Im currently working on page with weather and i have a problem because getCurrentPosition is not working on http site so how can i get a user position?
zrholt
@zrholt
Dec 18 2016 01:03
Just finished the tribute page challenge. Any suggestions would be appreciated! Thanks all
Addy
@asonder
Dec 18 2016 01:04
Hey @sparklie3 I'm having some issues with my AJAX call to forismatic.com, and cors-everywhere was suggested to me. Can't get it to work tho so I'm wondering if anyone has ever used it.
sparklie3
@sparklie3
Dec 18 2016 01:04
can i see some code?
and what is cors-everywhere?
are you referring to the issue know was cors http://enable-cors.org/
sparklie3
@sparklie3
Dec 18 2016 01:05
or is cors-everywhere something specific
@asonder can you paste the code or show me your repo instead of giving me a website to visit?
for example, you can paste like this
my code
that way, i don't have to go to my console and try to hunt to see what's up
Addy
@asonder
Dec 18 2016 01:06
sure, not a problem

document.addEventListener('DOMContentLoaded', function(retrieveFirstQuote) {
var quoteKey = Math.floor((Math.random() * 100000) + 1);
var scriptEl = document.createElement('script');
scriptEl.setAttribute('src', 'https://cors-anywhere.herokuapp.com/http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&jsonp=showQuote&lang=en&key=' + quoteKey);
pos = document.getElementById('scriptContainer');
pos.appendChild(scriptEl);
});

document.getElementById("newQuote").addEventListener("click", createScript);

function createScript() {
var newQuoteKey = Math.floor((Math.random() * 100000) + 1);
var newScriptEl = document.createElement('script');
newScriptEl.setAttribute('src', 'https://cors-anywhere.herokuapp.com/http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&jsonp=showQuote&lang=en&key=' + newQuoteKey);
pos = document.getElementById('scriptContainer');
pos.appendChild(newScriptEl);
}

function showQuote(data) {
var quoteText = data.quoteText;
var el = document.getElementById('quote-text');
el.innerHTML = quoteText;
var quoteAuthor = data.quoteAuthor;
el = document.getElementById('quote-author');
if (quoteAuthor.length) {
el.innerHTML = '- ' + quoteAuthor;
} else(el.innerHTML = '-Author unknown');

if (quoteText.length > 140) {
    var encoded = encodeURIComponent(quoteText.substr(0, 137) + '...');
    var icon = document.getElementById('social');
    icon.innerHTML = '<a href=\"https:\/\/crossorigin.me\/http:\/\/twitter.com\/intent\/tweet?text\=' + encoded + '\" target\=\"_blank\"><i class=\"fa fa-twitter fa-3x\" aria-hidden\=\"true\"><\/i><\/a>';

} else {
    var encoded = encodeURIComponent(quoteText);
    var icon = document.getElementById('social');
    icon.innerHTML = '<a href=\"https:\/\/twitter.com\/intent\/tweet?text\=' + encoded + '\" target\=\"_blank\"><i class=\"fa fa-twitter fa-3x\" aria-hidden\=\"true\"><\/i><\/a>';

}

}

sparklie3
@sparklie3
Dec 18 2016 01:08
sorry, can you paste it once more in the code block
i can then copy it to my local and see what's going on
so i see you are trying to connget to this api call forismatic
but you are doing it through this cors-anywhere?
ah, i see
so are trying to solve this cors issue
Addy
@asonder
Dec 18 2016 01:10
no problem. trying to figure out how to paste into the code block...
sparklie3
@sparklie3
Dec 18 2016 01:10
you can just type /```/
it's the ```
and then you hit enger
enter
and you have the ability to paste the entire codeblock
but to help you, i went to the url in your code
https://cors-anywhere.herokuapp.com/http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&jsonp=showQuote&lang=en&key=
and if you just go there with your own browser, you see the error
Missing required request header. Must specify one of: origin,x-requested-with
like it says, you need to set the request header
Abisai
@Agonzalez756
Dec 18 2016 01:13
@Gladias your are so right it is : instead of = thank you but unfortunately my img isn't displaying I still can't retrieve it from my computer and upload it
Addy
@asonder
Dec 18 2016 01:13
do you know how to set that? i'm having trouble figuring that out
CamperBot
@camperbot
Dec 18 2016 01:13
agonzalez756 sends brownie points to @gladias :sparkles: :thumbsup: :sparkles:
:cookie: 262 | @gladias |http://www.freecodecamp.com/gladias
sparklie3
@sparklie3
Dec 18 2016 01:13
sure, you are writing it entirely in javascript without any help from jquery
so i'm a little less familiar, but
it'd be let me look it up
it says you do it by myReq.setRequestHeader(header, value);
Addy
@asonder
Dec 18 2016 01:15
cool thank you for your help. i'll try that
sparklie3
@sparklie3
Dec 18 2016 01:15
but just looking at your code
and i'm less familiar with it, it's a little hard to read
but i don't see any xml request you are actually making to this cor-anywhere end-point
Addy
@asonder
Dec 18 2016 01:17
yeah, i actually was using jsonp, which i forgot about. that's why there's no xml request. but i'm thinking now that the reason why cors-anywhere is not working is because it is expecting the xml request
thanks for taking a look at it
sparklie3
@sparklie3
Dec 18 2016 01:20
np
if you are getting jsonp and their api doc says it supports jsonp
you don't need to go through this cors-anywhere
Wheeler Weise
@OmicronPersei
Dec 18 2016 02:50
Hello, I have a question about setting font families to element tags. The course is complaining that the h2 tag still does not use the font Lobster, nor does it degrade to Monospace when Lobster is not available. I believe the css style code is correct. Any ideas?
Walid Ashri
@walidashri
Dec 18 2016 02:58
@OmicronPersei show code please
how do I align the ada lovelace photo?
Ken Haduch
@khaduch
Dec 18 2016 03:35
@themandotexe - I'm not exactly sure what you are trying to do with your page. How are you looking to "align" the photo?
A couple things that I see right off - the entire HTML content should probably be wrapped in a <div class="container-fluid"> or using the container class. The img-responsive on a div is not going to be helpful. That should be applied as a class on your <img> elements. And I don't think that you've properly balanced your HTML tags - it seems that there is a problem with the div elements, at least? Try the HTML Tidy option on the HTML panel dropdown (the down arrow on the right of that panel) and it will indent the code for you, perhaps making it easier to check for the tag problems.
I would suggest that you start with those changes and then ask another time, please be a little more specific about the alignment that you are trying to achive.
Ken Haduch
@khaduch
Dec 18 2016 03:50
@asonder - I don't know if you figured out the code posting syntax - you can check this link: https://github.com/freecodecamp/freecodecamp/wiki/code-formatting for a description of the markdown syntax to do that.
Tiffany White
@twhite96
Dec 18 2016 04:13
@inci-august you need to pass icon into your add Skycons object
Addy
@asonder
Dec 18 2016 04:46
thanks @khaduch
CamperBot
@camperbot
Dec 18 2016 04:46
asonder sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2125 | @khaduch |http://www.freecodecamp.com/khaduch
Michael Karpinski
@karpimpski
Dec 18 2016 04:46
hey guys, how do I stop overflow on a flex div? I have a div with a height of 100%. when you click it an element, placed under the screen, comes up. it has to be contained in the flex element for centering, but I want overflow to be hidden. here's my work so far: https://preview.c9users.io/karpimpski/javascript-30/Mike30/05_flex_panel/index.html?_c9_id=livepreview2&_c9_host=https://ide.c9.io
Spyrantis Theodoros
@thodorisanta
Dec 18 2016 04:47
this code is suppose to return the number of vowels in a sentece. what did i do wrong?
function getCount(str) {
  var vowelsCount = 0;
  var vowels = [a, e, i, o, u];
  // enter your majic here
  var res = str.split("");
  for(var i=0;i<res.length;i++){
    if(res[i]=vowels){
    vowelsCount+=1;
    }
  }  
  return vowelsCount;
}
Michael Karpinski
@karpimpski
Dec 18 2016 04:48
@thodorisanta you code is checking if res[i] is equal to the array vowels
essentially, it's saying "this letter is equal to this group of letters." it will always be false
also, if statements require 2 or 3 equals signs, you only have 1 there
Ken Haduch
@khaduch
Dec 18 2016 04:49
@thodorisanta - not only that, which @karpimpski said, but you need multiple == or === for an equality check. (And I see that he just added that, too.... :) ) And you can just do vowelsCount++ to increment the count, once you have the logic corrected. And you don't really need to split the string.
Michael Karpinski
@karpimpski
Dec 18 2016 04:51
also, I figured out my overflow problem. I applied overflow: hidden to my body element before and it didn't work (maybe I didn't refresh?). it's working fine now. please do check out my project at https://preview.c9users.io/karpimpski/javascript-30/Mike30/05_flex_panel/index.html?_c9_id=livepreview2&_c9_host=https://ide.c9.io and let me know what you think of it! :)
Spyrantis Theodoros
@thodorisanta
Dec 18 2016 04:54
@karpimpski how can i make it to check if a letter is equal to one of the vowels?
Michael Karpinski
@karpimpski
Dec 18 2016 04:54
@thodorisanta using the indexOf method on an array would be my bet
as an example, if res[i] was 's' and you ran vowels.indexOf(res[i]) it would give you -1
if you ran vowels.indexOf(res[i]) and res[i] was a, then it WOULD return 0 if your array was set up right. all of your letters should be wrapped in quotation marks
Samip
@samipsairam
Dec 18 2016 05:01
Hi how will I be able to insert pics into slider, I want put pics that is on certain website
I want to use link of pic and want is as source
<div class="carousel-inner">
<div class="item active">
<img src="https://unsplash.com/photos/hU9gx8YfVK4.jpg" alt="Cassatte Image">
Spyrantis Theodoros
@thodorisanta
Dec 18 2016 05:02
@karpimpski
whats wrong now :/ why it returns me the number or characters of the string
function getCount(str) {
  var vowelsCount = 0;
  var vowels = ["a", "e", "i", "o", "u"];
  // enter your majic here
  var res = str.split("");
  for(var i=0;i<res.length;i++){
    if(vowels.indexOf(res[i])){
    vowelsCount++;
    }
  }  
  return vowelsCount;
}
Samip
@samipsairam
Dec 18 2016 05:06
<div class="item">
<img src="https://unsplash.com/collections/335772/night?photo=SmLuEzJvw4U" alt="Apple logo at night">
Michael Karpinski
@karpimpski
Dec 18 2016 05:08
@thodorisanta you need to check if the index is greater than 0
remember, if an element isn't in the array, it will return -1
sorry, make it greater than or equal to 0
Spyrantis Theodoros
@thodorisanta
Dec 18 2016 05:36
@karpimpski done it :) when it return 0 and when something postive above 0?
Michael Karpinski
@karpimpski
Dec 18 2016 05:40
yep! if it returns 0 or greater then that means the element is in the array
Spyrantis Theodoros
@thodorisanta
Dec 18 2016 05:41
@karpimpski but when does it return 0 and when something above it
Sorin Ruse
@sorinr
Dec 18 2016 05:44
@thodorisanta in order of this if(vowels.indexOf(res[i])) to work the expression inside of if() must return true or 1
Ashish verma
@ashish1500616
Dec 18 2016 05:46
@sorinr
http://codepen.io/ashish1500616/pen/NbEMer
geolocation is not working with http do you know to get it work??
Sorin Ruse
@sorinr
Dec 18 2016 05:53
@bitian1506 you can load your pen over https and geolocation will work but the openweather api will not work unless u have a paid account. you can try using or another weather api like apixu that works both http and https or change your location search by ip
@thodorisanta you can also use array.filter in combination with array.includes functions
Ashish verma
@ashish1500616
Dec 18 2016 06:00
@sorinr how to load over https??because on local host is working fine.
Sorin Ruse
@sorinr
Dec 18 2016 06:02
@bitian1506 https://codepen.io/urusername/pen/penid you have it the search bar of your browser
toccomy
@toccomy
Dec 18 2016 06:06
How do you do slow scroll on profile page? I managed to get scroll function by clicking on tabs but it doesnt slowly scroll down
Ashish verma
@ashish1500616
Dec 18 2016 06:10
@sorinr srry?I didnt get your point..??
toccomy
@toccomy
Dec 18 2016 06:15
@sorinr wonderful! Thanks a lot!a
CamperBot
@camperbot
Dec 18 2016 06:15
toccomy sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 969 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Dec 18 2016 06:15
@toccomy welcome
Pramod Potdar
@ppmakeitcount
Dec 18 2016 06:17
hey guys. In random-quote-machine challenge is it possible to get quotes and authors from any website? or there are only specific sites which allow to access data?
Sorin Ruse
@sorinr
Dec 18 2016 06:18
@PP-MakeItCount just search for "free quotes api". you will find a lot
Pramod Potdar
@ppmakeitcount
Dec 18 2016 06:21
@sorinr hey thanks. :+1:
CamperBot
@camperbot
Dec 18 2016 06:21
pp-makeitcount sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 970 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Dec 18 2016 06:22
@PP-MakeItCount welcome
Yanuar
@Yanuarpr
Dec 18 2016 06:23
help
Sorin Ruse
@sorinr
Dec 18 2016 06:26
@Yanuarpr just ask the question. if we know, we'll give an answer
Yanuar
@Yanuarpr
Dec 18 2016 06:26
what this mean? Mixed Content: The page at 'https://codepen.io/yanuar/pen/BQvzWr?editors=1010' was loaded over HTTPS, but requested an insecure script 'http://ip-api.com/json/?callback=jQuery311023294394844429078_1482041771423&_=1482041771424'. This request has been blocked; the content must be served over HTTPS.
Sorin Ruse
@sorinr
Dec 18 2016 06:27
@Yanuarpr delete the https:// and let only codepen.io.......
Yanuar
@Yanuarpr
Dec 18 2016 06:29
ok i try
Spyrantis Theodoros
@thodorisanta
Dec 18 2016 06:32
@sorinr yeah, but when it returns true and when 1
Ashish verma
@ashish1500616
Dec 18 2016 06:34
yanuar u from patna??
Yanuar
@Yanuarpr
Dec 18 2016 06:34
@sorinr thank,s its ok now
CamperBot
@camperbot
Dec 18 2016 06:34
yanuarpr sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 971 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Dec 18 2016 06:34
@thodorisanta you must know. its your function :)
Ashish verma
@ashish1500616
Dec 18 2016 06:35
@Yanuarpr u from patna??
Yanuar
@Yanuarpr
Dec 18 2016 06:35
@bitian1506 i'm from indo
Ashish verma
@ashish1500616
Dec 18 2016 06:35
ok....
Sorin Ruse
@sorinr
Dec 18 2016 06:36
@thodorisanta 1 is like true and 0 like false
Spyrantis Theodoros
@thodorisanta
Dec 18 2016 06:36
@sorinr then what is -1 for
Sorin Ruse
@sorinr
Dec 18 2016 06:36
@thodorisanta false
Franco Rufo
@francorufo
Dec 18 2016 06:56

http://codepen.io/franorufo/full/rWoXee/

My <ul> making the word "welcome" fades away upwards. Will this give me any problem when i add on more stuffz or can I ignore it?

Spyrantis Theodoros
@thodorisanta
Dec 18 2016 07:23
in this project i have to square every digit of a number.For example, if we run 9119 through the function, 811181 will come out. what did i do wrong?
function squareDigits(num){
  //may the code be with you
  var res = num.split("");
  for(var i=0;i<res.length;i++){
    res[i] = res[i]*res[i];
  }
  return res.join("");
}
Sorin Ruse
@sorinr
Dec 18 2016 07:30
@thodorisanta i would use an intermediate array like var myarr = []; then instead of res[i] = [res[i]+... i would myarr.push(res[i]*res[i]) then return myarr.join
Adi2Point0
@Adi2Point0
Dec 18 2016 07:35
@sorinr : That's not a issue. Problem is with this line var res = num.split(""); He's calling .split on Number. Correct code should be var res = num.toString().split("");
either this or pass in string.
Also, why would you create separate myArr ?
Pramod Potdar
@ppmakeitcount
Dec 18 2016 07:42
hey how we can know properties of data we received from getJSON function??
Adi2Point0
@Adi2Point0
Dec 18 2016 07:44

@PP-MakeItCount : Assuming you get your data in the variable response, you can use

var properties = Object.keys(response);

example

var response = {
  "firstName":"Pramod",
  "middleName":"Raghunath"
  "lastName": "Potdar"
};
var properties = Object.keys(response); // ["firstName","middleName","lastName"]
luoren
@monsterzzz
Dec 18 2016 07:50
could anyone help me...
click 778 why output 778?
clike *778
click 778*
why output *778?
Pramod Potdar
@ppmakeitcount
Dec 18 2016 07:57
@Adi2Point0 hey how to know which is quote and which author in quote machine challenge.
Adi2Point0
@Adi2Point0
Dec 18 2016 07:57
@PP-MakeItCount what's the response that you're getting?
Pramod Potdar
@ppmakeitcount
Dec 18 2016 07:58
i am not getting any response. 😕
Adi2Point0
@Adi2Point0
Dec 18 2016 07:59
@PP-MakeItCount Show your code
Pramod Potdar
@ppmakeitcount
Dec 18 2016 08:01
actually i am using gitter on mobile. i will send you my code personally aftersome time when i get to my laptop. thank @Adi2Point0
CamperBot
@camperbot
Dec 18 2016 08:01
pp-makeitcount sends brownie points to @adi2point0 :sparkles: :thumbsup: :sparkles:
:cookie: 200 | @adi2point0 |http://www.freecodecamp.com/adi2point0
Sorin Ruse
@sorinr
Dec 18 2016 08:03
@Adi2Point0 yep. ur right. didn't noticed the passed in var its a number.
Spyrantis Theodoros
@thodorisanta
Dec 18 2016 08:06
@sorinr what is wrong in my code though? :P
Adi2Point0
@Adi2Point0
Dec 18 2016 08:08
@thodorisanta :point_up: December 18, 2016 1:05 PM
Spyrantis Theodoros
@thodorisanta
Dec 18 2016 08:09
@Adi2Point0 whaat?
Adi2Point0
@Adi2Point0
Dec 18 2016 08:09
@thodorisanta Use this code
function squareDigits(num){
  //may the code be with you
  //var res = num.split("");
  var res = num.toString().split("");
  for(var i=0;i<res.length;i++){
    res[i] = res[i]*res[i];
  }
  return res.join("");
}
Spyrantis Theodoros
@thodorisanta
Dec 18 2016 08:12
@Adi2Point0 https://www.codewars.com/kata/square-every-digit/train/javascript i try it and it takes it as false
@thodorisanta i think i need to make it var instead of a string at the end. how can i do that
Adi2Point0
@Adi2Point0
Dec 18 2016 08:13
@thodorisanta : just return it as integer.
function squareDigits(num){
  //may the code be with you
  //var res = num.split("");
  var res = num.toString().split("");
  for(var i=0;i<res.length;i++){
    res[i] = res[i]*res[i];
  }
  return parseInt(res.join(""));
}
@thodorisanta This works too
function squareDigits(num){
  return +num
          .toString()
          .split('')
          .map(d => d*d)
          .join('');
}
Spyrantis Theodoros
@thodorisanta
Dec 18 2016 08:17
@Adi2Point0 thanks
CamperBot
@camperbot
Dec 18 2016 08:17
thodorisanta sends brownie points to @adi2point0 :sparkles: :thumbsup: :sparkles:
:cookie: 203 | @adi2point0 |http://www.freecodecamp.com/adi2point0
Adil Shah
@pkmonster3
Dec 18 2016 08:27
hi guys
bambooch
@bambooch
Dec 18 2016 08:52

Hello, can anyone tell me what is wrong with the code? The picture wont load.

<html>
<body>
<img src="http://infed.org/mobi/wp-content/uploads/2013/01/karl-marx-wikimedia-commons.jpgl"/>
</body>
</html>

Sorin Ruse
@sorinr
Dec 18 2016 08:54
@bambooch .jpgl??
Abisai
@Agonzalez756
Dec 18 2016 08:55
@bambooch try taking out the l after the jpg if you copy and paste that link it doesnt work and you don't need that / before the closing tag
bambooch
@bambooch
Dec 18 2016 08:55
wow
never would have found that out haha
thank you :D
c0d0er
@c0d0er
Dec 18 2016 08:56
i know localStorage, but what does Hint: You should prefix your local storage keys on CodePen, i.e. _username_recipes mean in https://www.freecodecamp.com/challenges/build-a-recipe-box?
dpnw
@dpnw
Dec 18 2016 09:06
Hello! I'm working on the tribute page and have a few basic questions.
R31Z
@R31Z
Dec 18 2016 09:06
ask away @petersdan
dpnw
@dpnw
Dec 18 2016 09:07
awesome. Ok - here's the link
excuse my lack of creativity - just wanted to get to the layout rather than the concept
if you go down to line 17, you'll notice that I've kept out the last'>' for the h3 closing tag
when I add that back in, the bullets no longer fall in center, next to the text
Blessed
@nullx5
Dec 18 2016 09:11
@petersdan nice.
Sorin Ruse
@sorinr
Dec 18 2016 09:11
@c0d0er when you save a new receipt into a key in the localstorage(when usintg .setItem) just make the key something like '_c0d0er_receipes'.
dpnw
@dpnw
Dec 18 2016 09:11
I tried removing text-center in hopes that the col classes specified would sort out the centering, but it doesn't. Kind of confused though. I'm looking at Quincy's code and he's not using any text-center for the div containing the text for the rest of page
@nullx5 thanks!
CamperBot
@camperbot
Dec 18 2016 09:11
petersdan sends brownie points to @nullx5 :sparkles: :thumbsup: :sparkles:
:cookie: 130 | @nullx5 |http://www.freecodecamp.com/nullx5
R31Z
@R31Z
Dec 18 2016 09:11
that's weird.. i'll have a look
c0d0er
@c0d0er
Dec 18 2016 09:13
@sorinr so should be like this console.log(localStorage)===>{'_c0d0er_recipes': 'box'}?
Blessed
@nullx5
Dec 18 2016 09:13
dpnw
@dpnw
Dec 18 2016 09:15
@nullx5 looks good
Sorin Ruse
@sorinr
Dec 18 2016 09:15
@c0d0er it will be more like console.log(localStorage.getItem('_c0d0er_receipes');
kirbyedy
@kirbyedy
Dec 18 2016 09:16
hello people
Sorin Ruse
@sorinr
Dec 18 2016 09:16
@kirbyedy hi there
kirbyedy
@kirbyedy
Dec 18 2016 09:17
facing a strange problem, I have a very simple html, css site, couple of line of code for smooth scrolling, linked jquery library, yet my links dont work as soon as I link that library
once its removed, the smooth scroll does not work, and the links are working
ks-mai
@ks-mai
Dec 18 2016 09:18
Looking for feedback on my wikipedia viewer :) http://codepen.io/ksmai/pen/YpdLOR
kirbyedy
@kirbyedy
Dec 18 2016 09:18
tried different versions of jquery but problem remains
Sorin Ruse
@sorinr
Dec 18 2016 09:19
@kirbyedy can you share the pen link?
kirbyedy
@kirbyedy
Dec 18 2016 09:19
I found out that this line of code creates, the problem, yet I can not remove it, since then it is creating anoying flicker effect
<script>
    $('a').click(function(e){
    e.preventDefault();
    $('body, html').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 1000);
});
  </script>
its the e.preventDefault()
well its not on the codepen, its locally
I would like to push it on github, since it should be like a portfolio site
but I already have this one page about me
Sorin Ruse
@sorinr
Dec 18 2016 09:21
@kirbyedy try make <a href="javascript:void(0)">
kirbyedy
@kirbyedy
Dec 18 2016 09:21
any suggestions ?
hang on but the ahref should take me to another page
if I put that is it going to work ?
Blessed
@nullx5
Dec 18 2016 09:22
i want to make image and h1, responsive, any idea.
kirbyedy
@kirbyedy
Dec 18 2016 09:23
<div class="flex4 parent">
          <div class="child bg-six">
              <a href="https://s.codepen.io/kirbyedy/debug/Nxxezm" target="_blank">Analog Clock</a>
          </div>
I do have a link in each container
dpnw
@dpnw
Dec 18 2016 09:25
can anyone help me with an issue I post at 1:07?
thnknoutloud
@thnknoutloud
Dec 18 2016 09:27
how can I like to another spot on the page?
Sorin Ruse
@sorinr
Dec 18 2016 09:27
@kirbyedy here some quick code js part taken from css-tricks: example
kirbyedy
@kirbyedy
Dec 18 2016 09:29
@sorinr thank you I will try to use that instead of jquery
CamperBot
@camperbot
Dec 18 2016 09:30
kirbyedy sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 972 | @sorinr |http://www.freecodecamp.com/sorinr
kirbyedy
@kirbyedy
Dec 18 2016 09:31
I will also try to find solution for smooth scroll without jquery
Sorin Ruse
@sorinr
Dec 18 2016 09:31
@kirbyedy i have jq 3.1.0 loaded in codepen settings
kirbyedy
@kirbyedy
Dec 18 2016 09:31
I mean for me is pointless to load the library just for that
yes I see
pure javascript or even css would be nice
@sorinr the code you gave me works, btw. thanks again
CamperBot
@camperbot
Dec 18 2016 09:33
kirbyedy sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: kirbyedy already gave sorinr points
kirbyedy
@kirbyedy
Dec 18 2016 09:34
where did you host your portfolio?
Sorin Ruse
@sorinr
Dec 18 2016 09:41
@kirbyedy local somewhere on my pc and on codepen but i'm working on a complete new version
c0d0er
@c0d0er
Dec 18 2016 09:41

@sorinr then will this console.log(localStorage.getItem('_c0d0er_receipes') return 'box'?

@c0d0er it will be more like console.log(localStorage.getItem('_c0d0er_receipes');

kirbyedy
@kirbyedy
Dec 18 2016 09:41
ah cool
I just want to avoid paying for hosting at the moment
Sorin Ruse
@sorinr
Dec 18 2016 09:44
@c0d0er who is "box"? what do you want to get from the local storage key and how do u save data in there? make me understand
c0d0er
@c0d0er
Dec 18 2016 09:45
@sorinr just example, the box can be anything, but keypoint is that must use _recipe_box as a key, correct?
Sorin Ruse
@sorinr
Dec 18 2016 09:50
@c0d0er i haven't looked at the example but they r advising to use some prefix for the keys you r storing in the localstorage just to not override other possible keys with same name. you can have "keyname":{json object in here} then using localstorage.getItem("keyname") you just grab all json object in there and use it as u want
c0d0er
@c0d0er
Dec 18 2016 09:51
@sorinr so the key point here is to use underscore _ in front of the key of localStorage, correct?
Sorin Ruse
@sorinr
Dec 18 2016 09:55
@c0d0er i think this is the point
c0d0er
@c0d0er
Dec 18 2016 09:55
@sorinr thanks!
CamperBot
@camperbot
Dec 18 2016 09:55
c0d0er sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 973 | @sorinr |http://www.freecodecamp.com/sorinr
Pankaj Singh
@aa3pankaj
Dec 18 2016 10:54
how many times i can submit my project link?
?
HendPro12
@HendPro12
Dec 18 2016 10:59
hi all. This is my first time using the chat
can someone give me some guidance on my codepen?https://codepen.io/HendPro12/pen/zoeORJ
Im trying to bring in the left and right sides of my innermost bootstrap well
so that the sides are very close to the border of the image
everything Ive tried moves the image over to the left or right sides instead of keeping it centered
Rajat
@rajataudichya
Dec 18 2016 11:15
hello, I have made an html contact form that I need to submit to a database and show a thank you modal pop-up please can any one help me I am really not understanding which language should I use
Stein Gee
@Stiino0
Dec 18 2016 11:17
Hi everyone
I have a question about the Random Quote Machine
Because I'm having difficulties with getting JSON from an API (forismatic)
I'm reading about CORS....
C
@engineerwithoutfear
Dec 18 2016 11:18
@HendPro12 What do you want to do exactly? Make the image fill more of the white?
Stein Gee
@Stiino0
Dec 18 2016 11:18
And I tried the options people have been suggesting but I still can't make it work. Can anyone tell me where to go from here?
HendPro12
@HendPro12
Dec 18 2016 11:19
@engineerwithoutfear no, I dont want the image to grow. I just want a small sliver of white around the left and right sides of the image
Stein Gee
@Stiino0
Dec 18 2016 11:19
I get this when I open the URL itself... header is required?
Origin: header is required
Rimi.
@Codevotee
Dec 18 2016 11:22
@Stiino0 you could store the api link in a variable like var api = "http://..."; then do $.getJSON(api, function(json){});instead of writing the whole link
Stein Gee
@Stiino0
Dec 18 2016 11:23
Sounds like good practice
But it doesn't change anything right?
Rimi.
@Codevotee
Dec 18 2016 11:24
Nope
alpox
@alpox
Dec 18 2016 11:24
@Stiino0 Use this as url:
http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?
Stein Gee
@Stiino0
Dec 18 2016 11:24
Put it in a var
Thx Rimi
Thx @APRim05
CamperBot
@camperbot
Dec 18 2016 11:24
stiino0 sends brownie points to @aprim05 :sparkles: :thumbsup: :sparkles:
:cookie: 471 | @aprim05 |http://www.freecodecamp.com/aprim05
Stein Gee
@Stiino0
Dec 18 2016 11:25
@alpox with the crossorigin also?
alpox
@alpox
Dec 18 2016 11:25
@Stiino0 No, without
Stein Gee
@Stiino0
Dec 18 2016 11:25
ok
omg
I get a reply
ahahahhaa
alpox
@alpox
Dec 18 2016 11:25
:-)
Stein Gee
@Stiino0
Dec 18 2016 11:26
@alpox, care to explain?
I'm very curious
I see jsonP
&jsonp=?
alpox
@alpox
Dec 18 2016 11:27
@Stiino0 Yeah that is another kind of request which does not go through a normal ajax method. Its used for CORS requests mostly
alpox
@alpox
Dec 18 2016 11:28
What it does, is adding a script tag to the DOM and specifies a function which gets called when the script is loaded.
Stein Gee
@Stiino0
Dec 18 2016 11:29
Nice. and this reroutes the CORS issue?
Or not really
alpox
@alpox
Dec 18 2016 11:30
@Stiino0 It doesn't do rerouting. It just circumvents the browser security :-/
Its kind of a nasty trick ^^
HendPro12
@HendPro12
Dec 18 2016 11:30
can someone give me some guidance on my codepen?https://codepen.io/HendPro12/pen/zoeORJ
Im trying to bring in the left and right sides of my innermost bootstrap well
so that the sides are very close to the border of the image
everything Ive tried moves the image over to the left or right sides instead of keeping it centered
Stein Gee
@Stiino0
Dec 18 2016 11:32
@alpox so this isn't something I should use on my own websites with APIs? because of the script that is added? If the website then gets hacked I could get bad scripts on my pages?
alpox
@alpox
Dec 18 2016 11:33
@Stiino0 I am no expert when it comes to security. I just know that it circumvents the protection of the browser and calls some foreign method coming in.
My guess is, that when someone hacks or proxies the foreign website, he can run any code in the context of your code which can be quite a security leak.
Stein Gee
@Stiino0
Dec 18 2016 11:34
but thx @alpox , I can continue now. I'll read up some more on jsonp and try to come back when I have the "real" solution for this CORS problem haha
CamperBot
@camperbot
Dec 18 2016 11:34
stiino0 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 701 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Dec 18 2016 11:34
But browser apps are never totally protected
JSONP is the normal solution for this problem
Stein Gee
@Stiino0
Dec 18 2016 11:34
because we are on Codepen
right? That's why it's the normal solution
?
alpox
@alpox
Dec 18 2016 11:36
Best would be not to call foreign domains for data (Like using foreign apis). Not sure if you can do much else.
A good API would want you to provide an API key for authorization and then set the access origins header when you call it with this key, so there would be a protection
Stein Gee
@Stiino0
Dec 18 2016 11:36
Aha
got it
alpox
@alpox
Dec 18 2016 11:36
I would say such open apis without any registration or something are maybe always a security problem
Stein Gee
@Stiino0
Dec 18 2016 11:36
I understand, sounds logical
R31Z
@R31Z
Dec 18 2016 11:36
Good to see you guys very dedicated
Stein Gee
@Stiino0
Dec 18 2016 11:37
Thx again @alpox. I'm continuing the challenge ^^
CamperBot
@camperbot
Dec 18 2016 11:37
stiino0 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: stiino0 already gave alpox points
alpox
@alpox
Dec 18 2016 11:39
@Stiino0 Alright, go ahead :-) and np
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 18 2016 11:44
https://mr-kumar-abhishek.github.io/observe-twitch-tv/ <-- someone tell me what else do I need to add to complete the user story ?
Callum Ward
@callumquick
Dec 18 2016 11:58
@Mr-Kumar-Abhishek channel images maybe?
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 18 2016 11:59
@callumquick between it looks ugly isn't it ? xD
C
@engineerwithoutfear
Dec 18 2016 12:04
@HendPro12 Change #primary-img's width to 100%, then remove padding as needed from #inner (eg, padding: 0px)
Callum Ward
@callumquick
Dec 18 2016 12:04
It could just do with a little decoration :)
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 18 2016 12:06
@engineerwithoutfear nice user name :)
C
@engineerwithoutfear
Dec 18 2016 12:06
@Stiino0 Yeah the jsonp workaround you discovered works all right, you can also use https://crossorigin.me/ but the site goes down a lot. :(
HendPro12
@HendPro12
Dec 18 2016 12:08
@engineerwithoutfear thanks. however I didnt want the image size to grow. additionally when I adjust padding as you suggest it doesnt bring in the sides of the well. Instead it keeps them where they are and shrinks the img
CamperBot
@camperbot
Dec 18 2016 12:08
hendpro12 sends brownie points to @engineerwithoutfear :sparkles: :thumbsup: :sparkles:
:cookie: 312 | @engineerwithoutfear |http://www.freecodecamp.com/engineerwithoutfear
C
@engineerwithoutfear
Dec 18 2016 12:08
@HendPro12 I might be misunderstanding what you were trying to do
@HendPro12 "Im trying to bring in the left and right sides of my innermost bootstrap well
so that the sides are very close to the border of the image" inner bootstrap well = div with the white background?
Pramod Potdar
@ppmakeitcount
Dec 18 2016 12:13
hey guys need help with random quote challenge. please check below code pen. I have done mose of the things. but still its not getting any random quote. it only displays the hard coded quote and author everytime. any help plz.
HendPro12
@HendPro12
Dec 18 2016 12:14
@engineerwithoutfear yes. I want to keep the img basically at its current size and I want to reduce the white background width on the left and right sides of the image.
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 18 2016 12:16
User Story: I will see a placeholder notification if a streamer has closed their Twitch account (or the account never existed). You can verify this works by adding brunofin and comster404 to your array of Twitch streamers. >> what does this user story mean ?? what exactly do I have to do ?
C
@engineerwithoutfear
Dec 18 2016 12:18
@HendPro12 to reduce the white background use padding-left: 3px;
padding-right: 3px; in #inner instead of padding: 0; (can change 3px to whatever size you prefer of course)
@HendPro12 Fixed width images aren't usually a great idea (it's usually better to set it to a % so it's proportional to the window size across devices), but you can limit its size by using (for example) min-width: 100px; and/or max-width: 200px; on #inner.
@HendPro12 If you hover over a div and right click and select inspect in chrome, it'll take you to a secret menu where you can see the values have been calculated for your styles and you can also toggle 'em on and off to see what effect they have
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 18 2016 12:35
User Story: I will see a placeholder notification if a streamer has closed their Twitch account (or the account never existed). You can verify this works by adding brunofin and comster404 to your array of Twitch streamers. >> what does this user story mean ?? what exactly do I have to do ?
C
@engineerwithoutfear
Dec 18 2016 12:51

@Mr-Kumar-Abhishek You basically have three possibilities: user is online, user is offline, user is non-existent. It wants you to cover all three cases. If the user is non-existent, it will give an error message.

https://forum.freecodecamp.com/t/best-way-to-check-for-deactivated-twitch-accounts/25312/3

Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 18 2016 12:53
@engineerwithoutfear thanks a lot it made my task more easier :)
CamperBot
@camperbot
Dec 18 2016 12:53
mr-kumar-abhishek sends brownie points to @engineerwithoutfear :sparkles: :thumbsup: :sparkles:
:cookie: 313 | @engineerwithoutfear |http://www.freecodecamp.com/engineerwithoutfear
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 18 2016 12:55
@engineerwithoutfear i could figure out that either null or undefined is the case for offline and non-existent and or deleted accounts
C
@engineerwithoutfear
Dec 18 2016 12:56
@Mr-Kumar-Abhishek Glad to hear it. :) It's important to learn about error handling, which I think is the point of that part of the project. Otherwise your code doesn't know wtf to do when it hits an unexpected 404 (or null, undefined, etc) and may shit itself in confusion.
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 18 2016 12:59
@engineerwithoutfear i just have to separate which are non-existent and which are offline , currently my code deals with both of the same way
@engineerwithoutfear i just have to separate which are non-existent and which are offline , currently my code deals with both of them * the same way
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 18 2016 13:15
between could I have some examples of calculators ?? for inspiration on the design part ~
U-ways
@U-ways
Dec 18 2016 13:17
@Mr-Kumar-Abhishek Some design examples: https://codepen.io/tag/calculator/ ! You can find such things in Codepen! :D
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 18 2016 13:18
@U-ways oh okay, thanks a lot ! :D
CamperBot
@camperbot
Dec 18 2016 13:18
mr-kumar-abhishek sends brownie points to @u-ways :sparkles: :thumbsup: :sparkles:
:cookie: 610 | @u-ways |http://www.freecodecamp.com/u-ways
Silvietta
@Ayvlis
Dec 18 2016 13:42
thank you @marxcom !
CamperBot
@camperbot
Dec 18 2016 13:42
ayvlis sends brownie points to @marxcom :sparkles: :thumbsup: :sparkles:
:cookie: 226 | @marxcom |http://www.freecodecamp.com/marxcom
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 18 2016 13:43
https://codepen.io/FreeCodeCamp/full/rLJZrA/ <--this almost look real :p
https://codepen.io/FreeCodeCamp/full/rLJZrA/ <--this almost looks real :p
Callum Ward
@callumquick
Dec 18 2016 14:18
It is well designed indeed
Supergood
@supergoods
Dec 18 2016 14:19
Imgur is not working in codepen <img>
Mahak Narayan Singh
@makkBit
Dec 18 2016 14:23
@supergoods maybe because imgur uses http instead of https that's why codepen is blocked it. Save ur desired image on dropbox, google drive instead which provide https to use on codepen
Supergood
@supergoods
Dec 18 2016 14:31
@makkBit imgur.com uses https://
but still cannot upload
Mahak Narayan Singh
@makkBit
Dec 18 2016 14:31
@supergoods codepen link plz
Supergood
@supergoods
Dec 18 2016 14:32
zoWxpb
Mahak Narayan Singh
@makkBit
Dec 18 2016 14:38
@supergoods u r using the link of the web page of the image. instead use the link of the image(not the web page).
<img src="https://i.imgur.com/C99UvsQ.jpg"
right click on the image and select copy image address to get the link of the image
Supergood
@supergoods
Dec 18 2016 14:39
Ok i try thanks in advance
Ken Haduch
@khaduch
Dec 18 2016 14:39
@supergoods - imgur does attempt to block cross-linked images, if you check their terms and conditions
Supergood
@supergoods
Dec 18 2016 14:39
@makkBit
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 18 2016 14:40
@supergoods google cloudinary ~
Fabio Di Pane
@saylos
Dec 18 2016 14:45
Hi guys, regarding the LocalWeatherApp, I'm getting wrong data, especially the current temperature, is it due to something wrong in my code?
http://codepen.io/saylos/pen/BQGNYd?editors=1010
Sorin Ruse
@sorinr
Dec 18 2016 14:51
@saylos think you get the temp in kelvin. the implicit value
Callum Ward
@callumquick
Dec 18 2016 14:53
@saylos Also when you're constructing your API call URL you just add location, but location isn't formatted as a query i.e. it should be something more like ?city=location
Fabio Di Pane
@saylos
Dec 18 2016 14:54
@sorinr but it should be the standard value, and I changed del metric format in metric
Sorin Ruse
@sorinr
Dec 18 2016 14:56
@saylos i've seen. think the problem is in the api url. @callumquick already pointed it out
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 18 2016 14:56
say.... for checking non-existant channels in twitch tv I have to check the page status huh ?? Is my thinking a bit far fetched ??
I am using json api ...
say.... for checking non-existent channels in twitch tv I have to check the page status huh ?? Is my thinking a bit far fetched ??
Fabio Di Pane
@saylos
Dec 18 2016 14:57

@callumquick @sorinr

var api = "http://api.openweathermap.org/data/2.5/weather?q=";
  var apiKey = "&APPID=ec6611f96c0cf92af37c2127168a7027";
  var format = "&units=metric";

  var locationApi = api + location + format + apiKey;

and this is the api example: api.openweathermap.org/data/2.5/weather?q=London

var location should be formatted as "London"
@callumquick @sorinr I'll try as you tell
Callum Ward
@callumquick
Dec 18 2016 14:59
@saylos You're right, it works with "London", but have you checked that what you're getting back from ip-api.com is of that format?
@saylos Actually, your app works for me
Fabio Di Pane
@saylos
Dec 18 2016 15:00
@callumquick it should be the city displated above
*displayed
Callum Ward
@callumquick
Dec 18 2016 15:00
blob
Check your console messages and see if any calls are being blocked on your end by the client
Supergood
@supergoods
Dec 18 2016 15:02
@makkBit still not working....
Fabio Di Pane
@saylos
Dec 18 2016 15:03
@callumquick ahahahah it gives me same temperature and weather, only location changes :smile:
Supergood
@supergoods
Dec 18 2016 15:03
eventhough i try your <img src="https://i.imgur.com/C99UvsQ.jpg".
toccomy
@toccomy
Dec 18 2016 15:04
How do I overlay text, buttons, etc over images. Im attempting to do this on my profile page
Mahak Narayan Singh
@makkBit
Dec 18 2016 15:04
image showed up when i tried what i told u in your pen @supergoods
is there any error showing up in console?
Supergood
@supergoods
Dec 18 2016 15:07
I just copy and paste your syntax.
not showing in my result page.
Mahak Narayan Singh
@makkBit
Dec 18 2016 15:08
did u tried reloading ur pen after the copy and paste?
Supergood
@supergoods
Dec 18 2016 15:09
Yaa several times
Now i m in ipad is there any thing?
Mahak Narayan Singh
@makkBit
Dec 18 2016 15:10
just check this pen if image is showing or not.
http://codepen.io/makkBit/pen/rWPVxY?editors=1010
Supergood
@supergoods
Dec 18 2016 15:11
@makkBit working
Mahak Narayan Singh
@makkBit
Dec 18 2016 15:11
@supergoods check the html code to know what were u doing wroing.
*wrong
Supergood
@supergoods
Dec 18 2016 15:18
Ok i checked and didn't find out the error.
Mahak Narayan Singh
@makkBit
Dec 18 2016 15:19
I changed the src="" part. just make sure u are doing it right. theres no other problem.
Supergood
@supergoods
Dec 18 2016 15:25
@makkBit You send a second pen is not working show 404
@makkBit
Supergood
@supergoods
Dec 18 2016 15:31
Hello
misterkc007
@misterkc007
Dec 18 2016 15:47
Hello everybody !
Henz
@pilotwhiterabbit
Dec 18 2016 16:01
Hello! Why is that my toggle menu won't open when using a smaller screen? http://codepen.io/pilotwhiterabbit/pen/BQvRdL
Kyle
@kpaarman
Dec 18 2016 16:03
Hey guys. Not sure if this is the right place to ask the question. Trying to make a portfolio page and i want my header section to fill the screen and then only as you scroll, does the next section appear. like on this webpage and others https://blackrockdigital.github.io/startbootstrap-creative/ What css is used to make it happen, cannot figure it out -_-
Callum Ward
@callumquick
Dec 18 2016 16:15
@kpaarman You can set a div to be height: 100% and width: 100%, then it will be the same size of the screen (but only that tall, so when you scroll you'll scroll past it!)
Kyle
@kpaarman
Dec 18 2016 16:16
@callumquick thanks! will play around with that now
CamperBot
@camperbot
Dec 18 2016 16:16
kpaarman sends brownie points to @callumquick :sparkles: :thumbsup: :sparkles:
:cookie: 313 | @callumquick |http://www.freecodecamp.com/callumquick
Callum Ward
@callumquick
Dec 18 2016 16:16
@pilotwhiterabbit Using the navbar and other more advanced features like small screen toggle requires the Bootstrap JS file as well as it's CSS file
@pilotwhiterabbit Make sure you include the JS file as well in your Codepen
Henz
@pilotwhiterabbit
Dec 18 2016 16:25
Thanks @callumquick !! managed to toggle the menu but need to figure out now how to style it. Thanks for your help!
CamperBot
@camperbot
Dec 18 2016 16:25
pilotwhiterabbit sends brownie points to @callumquick :sparkles: :thumbsup: :sparkles:
:cookie: 314 | @callumquick |http://www.freecodecamp.com/callumquick
LukasLy
@LukasLy
Dec 18 2016 16:32
hello, i am making the tribute page and I can't make space between the jumbotron box a top margin, can anyone help?
Henz
@pilotwhiterabbit
Dec 18 2016 16:44
share your codepen.
LukasLy
@LukasLy
Dec 18 2016 17:13
RakeshNerkar
@Rakesh18754
Dec 18 2016 17:36
$("#widgetDiv,.multi-chart-parent").find("div[id^='menu']").get(i).children[0].childNodes[1].prepend(titleSpan);

gives this error

Uncaught TypeError: $(...).find(...).get(...).children[0].childNodes[1].prepend is not a function
I think this get(i).children[0].childNodes[1] is related to javascript
and prepend belengs to Jquery ...am i right pls help as I am new to front end...
alpox
@alpox
Dec 18 2016 17:38
@Rakesh18754 jQuery is javascript too. Its a javascript library.
The part in this line which goes through jquery is:
$("#widgetDiv,.multi-chart-parent").find("div[id^='menu']").get(i)
after here you deal with normal javascript
.children[0].childNodes[1].prepend(titleSpan);
RakeshNerkar
@Rakesh18754
Dec 18 2016 17:39
@alpox can u tell me what i am doing wrong ...
@alpox geting errror as ].prepend is not a function
alpox
@alpox
Dec 18 2016 17:40
@Rakesh18754 That means that .childNodes[1] is not defined. So there probably are no 2 children in your array
I would need some context to help you out better.
Or it could mean that .prepend is no function as it says :-)
RakeshNerkar
@Rakesh18754
Dec 18 2016 17:42
Screenshot from 2016-12-18 23:11:25.png
alpox
@alpox
Dec 18 2016 17:42
You probably wanted to do:
`.children[0].children[1].prepend(titleSpan);
RakeshNerkar
@Rakesh18754
Dec 18 2016 17:42
@alpox .childNodes[1] when i log this it reutrne the above code
@alpox then i want to prepend a div to it
alpox
@alpox
Dec 18 2016 17:44
@Rakesh18754 Do you have a codepen or something?
RakeshNerkar
@Rakesh18754
Dec 18 2016 17:44
no
@alpox i tried ur code also ..but still same error..
is their any thing wrong in the syntax....as i am usng jquery and JS to gether
?
alpox
@alpox
Dec 18 2016 17:46
@Rakesh18754 Do you have an online version of the webpage?
RakeshNerkar
@Rakesh18754
Dec 18 2016 17:46
@alpox Sorry ...once again no
alpox
@alpox
Dec 18 2016 17:46
@Rakesh18754 There should be no problem. But my guess is that the divs don't lay like you want them to be
RakeshNerkar
@Rakesh18754
Dec 18 2016 17:46
can u check the img
alpox
@alpox
Dec 18 2016 17:47
I did
But this is not much context to me
RakeshNerkar
@Rakesh18754
Dec 18 2016 17:47
as its getting logged as an element
right
so how can i prepend a diuv to it now
?
alpox
@alpox
Dec 18 2016 17:47
Yea if its getting logged as an element it usually has a prepend operation.
RakeshNerkar
@Rakesh18754
Dec 18 2016 17:48
@alpox yes...bcoz console says.....prepend is not a \function
this has happend to me before aslo
LukasLy
@LukasLy
Dec 18 2016 17:48
How do I center bullets with the centered text?
RakeshNerkar
@Rakesh18754
Dec 18 2016 17:48
@alpox dont know what i am doing wrons:(
alpox
@alpox
Dec 18 2016 17:49
@Rakesh18754 What browser do you use?
RakeshNerkar
@Rakesh18754
Dec 18 2016 17:49
chrome
@alpox any suggestions?
alpox
@alpox
Dec 18 2016 17:52
@Rakesh18754 Hmm i would check of what type that childNodes[1] is
typeof .....childNodes[1]
RakeshNerkar
@Rakesh18754
Dec 18 2016 17:54
@alpox i did this
 console.log(typeof $("#widgetDiv,.multi-chart-parent").find("div[id^='menu']").get(i).children[0].childNodes[1]);
it says object
Kyle W Pilkinton
@tadake
Dec 18 2016 17:54
hey guys im trying to create an effect where theres a text box of a certain width and the overflows hidden but i would like it to scroll over slowly to show the rest of the text then back again. does anyone know how to do this?
Fabio Di Pane
@saylos
Dec 18 2016 17:55
hi guys, I'm defenitely stack with the weather app..am I obligated to use Ajax, jsonp or something similar? because I'm gettin crazy to make it work:
http://codepen.io/saylos/pen/BQGNYd
alpox
@alpox
Dec 18 2016 17:56
@saylos Yes you are
RakeshNerkar
@Rakesh18754
Dec 18 2016 17:56

@alpox i did this

 console.log(typeof $("#widgetDiv,.multi-chart-parent").find("div[id^='menu']").get(i).children[0].childNodes[1]);

it returns objetc

alpox
@alpox
Dec 18 2016 17:56
getJSON is the right way to go @saylos
@Rakesh18754 Sounds about right.
Sorin Ruse
@sorinr
Dec 18 2016 17:56
@LukasLy 60px; not 60xp;
alpox
@alpox
Dec 18 2016 17:57
@Rakesh18754 But what kind of object is the question :-/
RakeshNerkar
@Rakesh18754
Dec 18 2016 17:57
how do i identify that? @alpox
Fabio Di Pane
@saylos
Dec 18 2016 17:57
@alpox I did it, but i'm not good to pass the city location obtained to the url of openWeatherMap
LukasLy
@LukasLy
Dec 18 2016 17:57
@sorinr thanks
CamperBot
@camperbot
Dec 18 2016 17:57
lukasly sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 975 | @sorinr |http://www.freecodecamp.com/sorinr
alpox
@alpox
Dec 18 2016 17:58
@saylos openweather has a specification for that: https://openweathermap.org/current
RakeshNerkar
@Rakesh18754
Dec 18 2016 17:59
@alpox is their any other synta in JS for prepend
Fabio Di Pane
@saylos
Dec 18 2016 17:59
@alpox yeah I know, I'm using that in every way, it's about a day I'm working on it. pls give a check
Sorin Ruse
@sorinr
Dec 18 2016 17:59
@LukasLy welcome
@saylos Your latitude and longitude are undefined. You try to make an asynchronous call to the navigator.geolocation.getCurrentPosition.
Since this call gets its data in an asynchronous matter, you get your latitude and longitude AFTER you do the api call with getJSON.
Fabio Di Pane
@saylos
Dec 18 2016 18:03
@alpox sorry, I had to save, now it's the right one
alpox
@alpox
Dec 18 2016 18:03
@saylos Anyway, since there is newly a protection for using navigator.geolocation.getCurrentPosition in an unsave environment, you cannot retrieve the lat and long in a http context anymore. This works only on https://. Since openweatherapp does only support a http context for free users, you have no chance to go with that.
You will need an external api for retrieving the position of the user.
@saylos ah okay. So i wrote useless text :D
@saylos Still the same issue though (The 1. i told)
Fabio Di Pane
@saylos
Dec 18 2016 18:04
@alpox realy sorry :smile:
RakeshNerkar
@Rakesh18754
Dec 18 2016 18:05

@alpox

var titleSpan = $(" <b class='chart-header'>"+getModelName[i]+"</b>");

this is what i am trying to prepend is their any mistake in this?

kenobijr
@kenobijr
Dec 18 2016 18:05
@saylos u can get lat and lon here:
RakeshNerkar
@Rakesh18754
Dec 18 2016 18:05
@alpox whether $ should be present or not?
@alpox
$("#"+uniqueDivID+" .portlet-head").prepend(titleSpan);
this thing works correctly
alpox
@alpox
Dec 18 2016 18:07
@Rakesh18754 There shouldn't be any except getModelName[i] could be undefined. And probably most of the web people would call <b> deprecated and should be replaced by some css
Fabio Di Pane
@saylos
Dec 18 2016 18:07
@kenobijr @alpox yep, I used it, and I stored it in a var location. The problem is that when I pass it in the openWeatherApp Url to get json values, it doesn't work
alpox
@alpox
Dec 18 2016 18:07
@saylos Yes, because the variable is not set yet, when you do the openWeather call
You have to go sure that the code for calling the weather api gets executed after you got the data from the first call to the ip api
Fabio Di Pane
@saylos
Dec 18 2016 18:08
@alpox :worried:
alpox
@alpox
Dec 18 2016 18:08
@Rakesh18754 Both looks correct.
Fabio Di Pane
@saylos
Dec 18 2016 18:09
@alpox do you have a link or something I could study to understand it, so I don't annoy you anymore
alpox
@alpox
Dec 18 2016 18:09
@Rakesh18754 The .prepend in the last code you sent, is the jquery implementation of prepend then
@saylos Sadly i didn't yet find any link which would describe this properly. I would maybe have to make one once
tusharparekh
@tusharparekh
Dec 18 2016 18:10
Hello World !!
CamperBot
@camperbot
Dec 18 2016 18:10

welcome to FreeCodeCamp @tusharparekh!

RakeshNerkar
@Rakesh18754
Dec 18 2016 18:10
@alpox yes
tusharparekh
@tusharparekh
Dec 18 2016 18:11
how are u all guys !!! Want to join
How do I start getting coding challenges here ?
RakeshNerkar
@Rakesh18754
Dec 18 2016 18:12
@alpox checked that also ...it is defined
tusharparekh
@tusharparekh
Dec 18 2016 18:12
First time here can anybody help
kenobijr
@kenobijr
Dec 18 2016 18:12
@saylos make two functions: getlocation and getweather. place the api calls inside these functions. first execute getlocation to get let and lon. at the end inside this function, call getweather and pass lat and lon as arguments to it. thats my solution and it works
Fabio Di Pane
@saylos
Dec 18 2016 18:12
@alpox Man, you're a jenious! "You have to go sure that the code for calling the weather api gets executed after you got the data from the first call to the ip api"...so I tried to put the Weather app request inside the ip-api request...and it did it!!! thanks a lot
CamperBot
@camperbot
Dec 18 2016 18:12
saylos sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 702 | @alpox |http://www.freecodecamp.com/alpox
Adel
@AdelMahjoub
Dec 18 2016 18:12
@tusharparekh try to ask @camperbot
tusharparekh
@tusharparekh
Dec 18 2016 18:13
thanks for the tip !!
alpox
@alpox
Dec 18 2016 18:13
@saylos :-) that should do the trick, yup
Adel
@AdelMahjoub
Dec 18 2016 18:13
@tusharparekh but ask @camperbot in private
Fabio Di Pane
@saylos
Dec 18 2016 18:14
@alpox :+1:
alpox
@alpox
Dec 18 2016 18:17
@Rakesh18754 Its bit hard to help when you don't have any reference ^^
Jake
@NeelDVirus
Dec 18 2016 18:38
sorry some creepy thing happened in this msg.
Jake
@NeelDVirus
Dec 18 2016 18:43

Strange behavious with the two instance(instance explain in the bottom), 1st instance shows normal behaviour, the starnge behaviour 2nd instance is beyond my ability to comprehend. need help guys
(please copy paste the code as i cant post this in code version which went wrong in previous try. sorry for inconvenience)

<!DOCTYPE html>

<html>
<head>
<title>Clear</title>
<style type="text/css">
.main {
width: 750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
border: 2px solid red;
background-color: green;
overflow: hidden;
}
p {
width: 230px;
margin: 5px;
padding: 5px;
background-color: #efefef;
}
.clear {
clear: both;}
.left {
float: left;}
.right {
float:right;
}
.plain {
overflow: hidden;
background-color: grey;
/delete this border property and check the code again/
border: 5px solid black;
}
</style>
</head>
<body>
<div class="main">
<h1>The Evolution of the Bicycle</h1>
<p class="left">In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster.</p>
<p class="left">The device know as the Draisienne (or "hobby horse") was made of wood, and propelled by pushing your feed on the ground in a gliding movement.</p>
<p class="left">.It was not seen a suitable for any place other than a well maintained pathway. </p>
<p class="left">In 1865, the velocipede (meaning "fast foot") attached pedals to the front wheel, but its wooden structure made it extremely uncomfortable.</p>

<div class="plain">1870 the first all-metal machine appeared. The pedals were attached directly to the front wheel. 1870 the first all-metal machine appeared. The pedals were attached directly to the front wheel. 1870 the first all-metal machine appeared. The pedals were attached directly to the front wheel.</div>

<p class="left">In 1870 the first all-metal machine appeared. The pedals were attached directly to the front wheel. </p>
<p class="left"> Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
</div>
</body>
</html>

1st-instance: First run this code to view the page (especially the black border).
2nd-instance: now delete the border property in the .plain selector and run the code again
sorry some creepy thing happened in this msg.

Tom
@moT01
Dec 18 2016 19:00
@NeelDVirus whats the problem
C
@engineerwithoutfear
Dec 18 2016 19:00
@NeelDVirus Put it on Codepen plz it's hard to read in a chat window
Tom
@moT01
Dec 18 2016 19:03
@NeelDVirus removing the overflow: hidden; seemed to fix it
or adding your left class to that div
Lindsay Anchors
@nzey
Dec 18 2016 19:05
Can someone help me with vertical alignment? I got a basic Twitchtv app working, but could not for the life of me figure out how to vertically align the table contents. On my td elements in the chrome developer tools, I see: .table td { vertical-align: top}. I can change that to middle in the devtools, but when I try to set vertical align in the same say in my own css, there's no effect. https://codepen.io/Sorolla/pen/mOaboO
Tom
@moT01
Dec 18 2016 19:07
@nzey its probly aligning the way you want because something else is overriding it
in css theres a heirarchy of what effect will take place based on the value of what is being selected, ...the more selectors you use the higher the value(sort of)
meaning table td {} will take precedence over td{}
Jake
@NeelDVirus
Dec 18 2016 19:10
@moT01 removing overflow:hidden welcomes another issue, the float element flow out of the border of its containing element.
Tom
@moT01
Dec 18 2016 19:11
try keeping it and adding class "left" to your div, ...might work
class="plain left"
Lindsay Anchors
@nzey
Dec 18 2016 19:12
@moT01 yeh, I tried using the .table td selector in my css, and it didn't seem to change anything. The computed 'vertical-align' is still top.
Jake
@NeelDVirus
Dec 18 2016 19:12
@moT01 and just out of curiousity i want to know why that happened logically and technically
Jichoat
@Jichoat
Dec 18 2016 19:12
Anyone want to give me some tips or pointers for my current webpage build? http://codepen.io/Jicho/full/LbMoMw/
Jake
@NeelDVirus
Dec 18 2016 19:13
@engineerwithoutfear i dont know how to embed my code in code pen, i am new in FCC. kindly explain explain how to
C
@engineerwithoutfear
Dec 18 2016 19:13
Tom
@moT01
Dec 18 2016 19:13
@NeelDVirus well i tried to explain it, im not sure how it works exactly, but your td{} has a value of lets say 1, cause theres one selector, ...table td{} has a value of lets say 2, because theres two selectors, ...that's not how it works exactly but sort of
so something with a higher value is overriding your td{}
so if you put table td{color:red} and td{color:blue} red will override the blue
oh, im sorry, im answering the wrong questions
Lindsay Anchors
@nzey
Dec 18 2016 19:18
@moT01 figured it out. I need to be more specific to override bootstrap's default, and I wrote "vertically-align" not "vertical-align"
Jake
@NeelDVirus
Dec 18 2016 19:19
@moT01 well acording to you removing the overflow:hidden will fix teh bug. But what about the red border which then dont contain the float element
Tom
@moT01
Dec 18 2016 19:19
@NeelDVirus yea, css is something i have to play around with till i get things the way i want, im not sure why the plain class got so big when you removed the border
removing the overflow did seem to fix it, but then you ran into another issue, the red border issue im assuming, ...im not sure, ...put in it a codepen and ill take another look if you want
did leaving the overflow, and adding the left class not work either?
Tom
@moT01
Dec 18 2016 19:27
@Jichoat it looks solid, ...its a work in progress, the only thing i can spot thats a problem is when you shrink the window your menu labels go outside the blue
CamperBot
@camperbot
Dec 18 2016 19:47
neeldvirus sends brownie points to @engineerwithoutfear :sparkles: :thumbsup: :sparkles:
:cookie: 316 | @engineerwithoutfear |http://www.freecodecamp.com/engineerwithoutfear
Jake
@NeelDVirus
Dec 18 2016 19:47
@moT01 adding the left class solve the issue (just as the border property in .plain). i am expecting just a brief explaination about what's happening under the hood
https://codepen.io/neel111/pen/QGYyYj
@engineerwithoutfear thanks for the help regarding code pen. now you can check it
CamperBot
@camperbot
Dec 18 2016 19:47
neeldvirus sends brownie points to @mot01 and @engineerwithoutfear :sparkles: :thumbsup: :sparkles:
:warning: neeldvirus already gave engineerwithoutfear points
:cookie: 418 | @mot01 |http://www.freecodecamp.com/mot01
William Cross
@williamtech814
Dec 18 2016 20:02
I'm a bit confused on this challenge: Stand in Line
Here's my code, I'm not sure what I'm doing wrong:

function nextInLine(arr, item) {
// Your code here
arr.push(item);
arr.shift();
return arr[0]; // Change this line
}

// Test Setup
var testArr = [1,2,3,4,5];

// Display Code
console.log("Before: " + JSON.stringify(testArr));
console.log(nextInLine(testArr, 6)); // Modify this line to test
console.log("After: " + JSON.stringify(testArr));

Henz
@pilotwhiterabbit
Dec 18 2016 20:21
Hello again! I got stuck on this Portfolio page. How do I make a paragraph on right and the form on the left? http://codepen.io/pilotwhiterabbit/pen/BQvRdL
Bakri
@POIbakri
Dec 18 2016 20:51
hey guys I'm struggling to change my font size
<div class="font-size:15px">
A future Chosen for us not by us</div>
ive kinda forgetton
is anyone there?
hello??
Vicfs
@Vicfs
Dec 18 2016 20:57
you need to do it in css, the class="" is just an element
alpox
@alpox
Dec 18 2016 21:16
@POIbakri you wanna exchange class with style if you want to do inline styling. Otherwise go with @Vicfs
Vicfs
@Vicfs
Dec 18 2016 21:18
he could probably just go with headings for what he's trying to achieve
alpox
@alpox
Dec 18 2016 21:27
Yea probably
Suman kharel
@sumankharel
Dec 18 2016 21:49
@pilotwhiterabbit You can do it with 3 divs. First one for class="row" and other two for class="col-md-6"
Henz
@pilotwhiterabbit
Dec 18 2016 22:01
thanks @sumankharel ! That's how I did it! :)
CamperBot
@camperbot
Dec 18 2016 22:01
pilotwhiterabbit sends brownie points to @sumankharel :sparkles: :thumbsup: :sparkles:
:cookie: 2 | @sumankharel |http://www.freecodecamp.com/sumankharel
Bakri
@POIbakri
Dec 18 2016 22:09
how do I make spaces between my paragraphs using <p>
??
Henz
@pilotwhiterabbit
Dec 18 2016 22:11
What do you mean by space?
Do you mean the spaces between lines of text? Change your line-height in css.
Vicfs
@Vicfs
Dec 18 2016 22:14
it depends, you could use margins or <br> for example depending on what your scope is
Emily Mendez
@emilypmendez
Dec 18 2016 22:24
<br> is defined as a breaking point in paragraph text @POIbakri
Brandon
@chunb
Dec 18 2016 22:50
For the tic tac toe game, is it an unspoken requirement that we implement the minmax algorithm? Or can I just use an alternate, "non-smart" method for the computer?
Tom
@moT01
Dec 18 2016 22:52
you could do it however you want.
Brandon
@chunb
Dec 18 2016 22:52
@moT01 All right, full speed ahead then
Tom
@moT01
Dec 18 2016 22:52
but yea, you probly want a game where the computer doesn't completely suck
nobody's grading your project
Brandon
@chunb
Dec 18 2016 22:53
@moT01 Completely suck, or unpredictable? :)
Tom
@moT01
Dec 18 2016 22:56
the difference being? completely sucks - the computer actively lets you win, and unpredictable you just win most of the time
Pieter Stokkink
@forkerino
Dec 18 2016 22:57
what is the minmax algorithm?
@chunb
I solved it already, but would like to know if there's a better way.
Tom
@moT01
Dec 18 2016 22:59
@POIbakri still need help?
Bakri
@POIbakri
Dec 18 2016 23:01
Cheers @moT01 I've done it this the best I could do so have a look let me know what u think http://cdpn.io/vybKdx
Tom
@moT01
Dec 18 2016 23:01
you probly want something like, ... <div style="font-size:px;>
that's inline styling, ...most people probly use a separate .css file for styling, i would recommend that
looks like you figured it out
must be your tribute page
looks good enough for me
i would just do all the styling in the css section like i said
Bakri
@POIbakri
Dec 18 2016 23:06
@moT01 thanks
CamperBot
@camperbot
Dec 18 2016 23:06
poibakri sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 419 | @mot01 |http://www.freecodecamp.com/mot01
Icah Banton
@remdata
Dec 18 2016 23:26
I am trying to set the background color of my tribute challenge as follows but it dose not seem to be working, can anyone show me what I am doing wrong: <body bgcolor="gray"> <div> ... </div> ... <div>...</div></body>
Tom
@moT01
Dec 18 2016 23:32
try <body style="background-color: grey;">
but as i told bakri, i would put all my style in a separate .css file, or the css section of codepen
Icah Banton
@remdata
Dec 18 2016 23:35
@moT01 thanks.
CamperBot
@camperbot
Dec 18 2016 23:35
remdata sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 420 | @mot01 |http://www.freecodecamp.com/mot01
Nicolas Muniz
@nicolasmuniz7
Dec 18 2016 23:48
Hello, guys im in the twitch api challenge
im having problems with de Client id thing..
anyone can help me ?
ive already created an account , registered my app and got the Client ID
But when i put headers:{"Client-ID":myID} it keeps responding bad request No client id specified
Please.. anyone can help me ??
Silvietta
@Ayvlis
Dec 18 2016 23:52
@nicolasmuniz7 I didn't tried that challenge yet, but maybe you should do smt like {"Client-ID":"myID"} (the quotes)
just guessing
Nicolas Muniz
@nicolasmuniz7
Dec 18 2016 23:53
@Ayvlis Thanks for your answer, yeah, im doing that.. what i typed here was just an example
CamperBot
@camperbot
Dec 18 2016 23:53
nicolasmuniz7 sends brownie points to @ayvlis :sparkles: :thumbsup: :sparkles:
:cookie: 91 | @ayvlis |http://www.freecodecamp.com/ayvlis
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 18 2016 23:54
is this look realistic enough ?? https://mr-kumar-abhishek.github.io/js-calculator/
Silvietta
@Ayvlis
Dec 18 2016 23:54
@nicolasmuniz7 let me have a look then