These are chat archives for FreeCodeCamp/HelpFrontEnd

27th
Apr 2017
Lara Carvalho
@ltoller
Apr 27 2017 00:05
Just like @moT01 I have some real trouble making my footer for example (it's always the footer) take 100% of the width, it doesn't care that I wrote it as block element, it only behaves like I want when I set the body as flex
Tom
@moT01
Apr 27 2017 00:07
min-width 100% ?
Gulsvi
@gulsvi
Apr 27 2017 00:10
@ltoller Sometimes you need margin: 0 on the body to get it full width.
Do this to help debug, it will show you what elements have margins that might be interfering:
* {
  border: 1px solid black;
}
Du5tDevil
@Du5tDevil
Apr 27 2017 00:12
Would anyone be able to help me with some JS funtions on the weather app project? You view my project here. Here is what I am trying to accomplish:
The F next to the temperature is a button. I am trying to make the button change the variables "fc" and "units" using a function. The "fc" variable changes the F to a C and vice versa. The "units" variable passes a string, either "imperial" or "metric", into the API string so that the temperature returned is either in Fahrenheit or Celsius. However, the button simply does not function. Any help would be greatly appreciated.
Lara Carvalho
@ltoller
Apr 27 2017 00:12
Thank you @SkyCoder01, I'll try this later, but I think I remember setting margin and padding to 0 and nothing happening
CamperBot
@camperbot
Apr 27 2017 00:12
ltoller sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1202 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 27 2017 00:13
@ltoller Feel free to share a codepen link if you need some help. Good luck.
Omid Heravi
@omidv28
Apr 27 2017 00:27
hey guys, can anyone help me with the twitch api/endpoint? it's not working
john carnegie
@johncarnegie
Apr 27 2017 00:33
Hey guys, I need some help. I am doing the challenge "Build a Personal Portfolio Webpage". I am stuck with two things. 1. How can I make the whole page responsive on all devices. I am using bootstrap too. For instance, I can use <div class="row"> and <div class="col-xs-6" to put two pictures in the same row on my MAC. But when it comes to the ipad, it does not switch from 2 pictures in the same row to one picture in the same road like in the Example. And the text is also not responsive in all devices. 2. I want to keep the navigation bar or the head bar to stay and move down and up when I scroll down or up. I used CSS position: fixed, but it does not work well. Here is my link: https://codepen.io/johncarnegie/pen/WjoBwx. Please help me. I just start learning code for more than a week. Thanks all.
jump020305
@jump020305
Apr 27 2017 00:37
  • I created arrow images using css.
  • but the problem is i need to add the .down-arrow class to the div when the accordion opens up.
  • right now I added one image but not sure how to add the other image.
  • can you guys tell me how to fix it
  • providing my code below
  • working fiddle http://jsfiddle.net/b4L6kyg4/26/
.down-arrow {
    -ms-transform: rotate(-55deg);
    transform: rotate(-55deg);
}

.up-arrow {
    border-top: .33em solid red;
    border-right: .33em solid red;
    border-bottom: 0;
    border-left: 0;
    width: .9em;
    height: .9em;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    transition: all .7s ease;
    -ms-transform: rotate(129deg);
    transform: rotate(129deg);
}
Spyrantis Theodoros
@thodorisanta
Apr 27 2017 00:39
i just finished with the 2 player mode on tic tac toe. Any tips or ideas on how i should do the player vs AI ? cause i have completely no clue :/
Gulsvi
@gulsvi
Apr 27 2017 01:01
@jump020305 When I did that project, I used a unicode symbol instead of CSS. &#9660;: http://codepen.io/skycoder/pen/bWdaNY?editors=1010
Tom
@moT01
Apr 27 2017 01:06
@thodorisanta i made a pretty simple ai, ...
had it check for winning spots, ...then check for blocking spots, then added a few cases for some stuff in between
its almost unbeatable, ...i missed one case that if you play it right and he picks the wrong random spot you can win
Jorge
@OrangeKulture
Apr 27 2017 02:01
hey peeps
jaizon
@jaizon
Apr 27 2017 02:04
hello
Paradox5
@Paradox5
Apr 27 2017 02:08
Hey
Elliot Zeng Yi
@elliotzengyi
Apr 27 2017 02:17
var romanNumbers = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
var romanSymbols = {
  1000: "M", 
  900: "CM",
  500: "D", 
  400: "CD",
  100: "C", 
  90: "XC",
  50: "L", 
  40: "XL",
  10: "X", 
  9: "IX",
  5: "V", 
  4: "IV",
  1: "I"
};

function findSymbol(num) {

  for (var i = 0; i < romanNumbers.length; i++ ){
   if (num >= romanNumbers[i]) {
     return romanNumbers[i];
   }
  }

}

function convert(num) {

  var remainNum = num;
  var romanNum = "";
  var tempNum = 0;

  while (remainNum > 0) {
    tempNum = findSymbol(remainNum);
    romanNum += romanSymbols[tempNum];
    remainNum -= tempNum;
  }

  return romanNum;

}

convert(97);
hello. this works but i think there's a better way.
any advices?
Jorge
@OrangeKulture
Apr 27 2017 02:23
@elliotzengyi as long as it works ... i mean i guess there's always a better way
@elliotzengyi my solution
function convertToRoman(num) {
  var str = num.toString();
  var length = str.length;
  var resp = [];
  var count = length;
  str = str.split('');
  var answer = '';

 var romNum = {
1: 'I',2: 'II',3: 'III',4: 'IV',5: 'V',6: 'VI',7: 'VII',8: 'VIII',9: 'IX',10: 'X',20: 'XX',
30: 'XXX',40: 'XL',50: 'L',60: 'LX',70: 'LXX',80: 'LXXX',90: 'XC',100: 'C',200: 'CC',300: 'CCC',400: 'CD',
500: 'D',600: 'DC',700: 'DCC',800: 'DCCC',900: 'CM',1000: 'M',2000: 'MM',3000: 'MMM'
 }; 

  for(var i = 0;i<length;i++){
    if(count==4){
        resp.push(romNum[str[i]*1000]);
        count-=1;
      }else if(count==3){
        resp.push(romNum[str[i]*100]);
        count-=1;
      }else if(count==2){
        resp.push(romNum[str[i]*10]);
        count-=1;
      }else{
        resp.push(romNum[str[i]]);
        count-=1;
      }
  }
  answer = resp.join('');
  return answer;
}
convertToRoman(3955);
Elliot Zeng Yi
@elliotzengyi
Apr 27 2017 02:24
thank you.
I will learn your way too
Jorge
@OrangeKulture
Apr 27 2017 02:24
sure! .. and with that i dont mean my solution is better
not at all .. i just meant I always feel I can do better with my code than I actually do
Elliot Zeng Yi
@elliotzengyi
Apr 27 2017 02:25
it's good to learn other solutions, thanks @OrangeKulture
CamperBot
@camperbot
Apr 27 2017 02:25
elliotzengyi sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 339 | @orangekulture |http://www.freecodecamp.com/orangekulture
Jorge
@OrangeKulture
Apr 27 2017 02:25
sure thing, welcome!
Elliot Zeng Yi
@elliotzengyi
Apr 27 2017 02:27
your solution is very interesting! I've never thought about to convert the number to string!
Jorge
@OrangeKulture
Apr 27 2017 02:28
@elliotzengyi thanks .. yeah that;s kinda how it came out for me, but im sure there's plenty of better ways to do it
CamperBot
@camperbot
Apr 27 2017 02:28
:warning: @elliotzengyi's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
orangekulture sends brownie points to @elliotzengyi :sparkles: :thumbsup: :sparkles:
Robert Yao
@yaohaixiao
Apr 27 2017 02:41
I get this error for the weather app "Mixed Content: The page at 'https://codepen.io/yaohaixiao/pen/qmdarb' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://ipinfo.io/json'. This request has been blocked; the content must be served over HTTPS."
Johnny
@jtan3
Apr 27 2017 02:58
@yaohaixiao try using http:// for you codepen url
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 03:00
or https for ipinfo.io as https is always better.
every time you choose http over https, Edward Snowden punches a bunny in the face.
Johnny
@jtan3
Apr 27 2017 03:03
@sevensixtwo762 but https won't work for openweather since that's the paid version right?
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 03:04
seems that way.
I'm just about to start that project actually. I got my api key last night, and have a pen ready. just haven't started.
Johnny
@jtan3
Apr 27 2017 03:07
I would suggest finding another weather api other than openweather. If you don't want to deal with that mixed content issue.
Paradox5
@Paradox5
Apr 27 2017 03:08
I dont know why they recommend that one
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 03:12
apixu has a free plan, 5000 requests/month, https available
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 03:20
I just verified that it works with lat and long for my city. it gives a lot of info too.
h1tag
@h1tag
Apr 27 2017 03:36

every time you choose http over https, Edward Snowden punches a bunny in the face.

lol

Khoa Le
@Zacele
Apr 27 2017 03:41
hey guys
here is my WeatherAPI demo I just paste on codepen
why is in my local machine the app works but when I pass it to codepen it cannot do What i have create inside my JS file
Johnny
@jtan3
Apr 27 2017 03:44
@Zacele try using http:// for you codepen url
Khoa Le
@Zacele
Apr 27 2017 03:44
@jtan3 thanls
anyway http://codepen.io/Zacele/pen/JNEJjq the next thing is that I cannot toggle between Celcius and Farenheit by click on the span I created
what's wrong with my code
Khoa Le
@Zacele
Apr 27 2017 03:59
anybody here ????
Sandesh Shrestha
@UnovaXan
Apr 27 2017 04:00
yep
Khoa Le
@Zacele
Apr 27 2017 04:05
could u take a look at my code
Muhammad Osama Mazhar
@amasomazhar
Apr 27 2017 04:14
Hi i am new in this room so Greetings everyone
Zhanibek
@zhann1982
Apr 27 2017 04:17
Hello friends! I am trying to use google's custom search API. But I always get 0 results for any query. Can you look at my pen (console.log) http://codepen.io/zhann1982/pen/ybabmG
@amasomazhar assalamu aleikum!
Muhammad Osama Mazhar
@amasomazhar
Apr 27 2017 04:21
Walikum Salam
Can you please help me how to use codepan
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 04:21
who you calling friend, bro?
Muhammad Osama Mazhar
@amasomazhar
Apr 27 2017 04:22
I am new so i hope everyone is my friend now...
Zhanibek
@zhann1982
Apr 27 2017 04:23
@amasomazhar Ok. But I am not proffy in codepen. i will try to help you
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 04:27
@zhann1982 it looks like "data.items" is undefined. I don't know babel, and I'm not sure how that changes things. I noticed that you're using let instead of var.
you're also calling the search on keyup, but it doesn't always work? are you trying to do autocomplete?
Zhanibek
@zhann1982
Apr 27 2017 04:32
@sevensixtwo762 . yes. you are right. But there must be items somewhere in data that returns from api? If you noticed "totalresult" is always 0.
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 04:33
data object does not have "items" key
it has kind,url,queries,searchInformation
at least not the object that you're getting back. maybe catch that error in your code so that it can keep going?
Khoa Le
@Zacele
Apr 27 2017 04:39
how could we toggle search in jQuery
I mean toggle Text
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 04:46
@zhann1982 turn off the fancy trigger and enable the button until you know that bit works.
toggle it on and off?
@Zacele do you want to be able to make it disappear?
create a css class that applies display:none or visibility:hidden and use jQuery to add the class where you need it.
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 04:52
jQuery has .show() and .hide() methods too
remember, google is your friend. almost every question you could ask about programming is easily answered with a well crafted search.
This should be compulsory reading for people new to programming and related disciplines. http://www.catb.org/esr/faqs/smart-questions.html
Khoa Le
@Zacele
Apr 27 2017 04:57
@sevensixtwo762 example like when I press it it will change from 'a' to 'b' and reverse
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 04:59
when I searched for a slightly improved question "how do I toggle text in jquery", your answer was the third result.
You seem to have skipped "search" in "read-search-ask"
Zhanibek
@zhann1982
Apr 27 2017 05:01
@sevensixtwo762 thanks!
CamperBot
@camperbot
Apr 27 2017 05:01
zhann1982 sends brownie points to @sevensixtwo762 :sparkles: :thumbsup: :sparkles:
:cookie: 291 | @sevensixtwo762 |http://www.freecodecamp.com/sevensixtwo762
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 05:02
@zhann1982 did you make any progress?
Khoa Le
@Zacele
Apr 27 2017 05:02
@sevensixtwo762 I did search but seem like the toogle() method is not the right way to do it
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 05:03
no, you're right. that's to toggle something on and off. I thought that's what you mean.
you just want to change some text.
Zhanibek
@zhann1982
Apr 27 2017 05:03
@sevensixtwo762 I will continue later. I have to read docs on google api first
Khoa Le
@Zacele
Apr 27 2017 05:05
@sevensixtwo762 YEP, i just want to change the text from 'a' : to 'b' and reverse it
'b' to 'a'
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 05:06
http://lmgtfy.com/?q=change+text+with+jquery This used to be popular in IRC when people would ask simple questions. Now it's banned because people think it's mean.
Khoa Le
@Zacele
Apr 27 2017 05:07
alright
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 05:21
I wasn't sure if you were asking a question, but it looks to be working fine!
Adel
@AdelMahjoub
Apr 27 2017 05:22
it was some examples for @Zacele
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 05:22
oh right! sorry, I thought it was him, but I didn't think that would be very helpful.
but whatever.
Adel
@AdelMahjoub
Apr 27 2017 05:25
that was the question right, toggle rendered values on click ?
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 05:27
yes, but the point is to learn how to do it, and being given the answer on a platter isn't going to help him learn.
Adel
@AdelMahjoub
Apr 27 2017 05:28
woops, sorry I thought he was asking for a solution
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 05:28
he might have been, but this channel is for help, not solutions!
did you just type out that pen after he asked?
Adel
@AdelMahjoub
Apr 27 2017 05:33
yes
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 05:33
thanks @AdelMahjoub
CamperBot
@camperbot
Apr 27 2017 05:33
sevensixtwo762 sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 446 | @adelmahjoub |http://www.freecodecamp.com/adelmahjoub
Muhammad Osama Mazhar
@amasomazhar
Apr 27 2017 05:34
Hi Guys how to insert image in codepan
Adel
@AdelMahjoub
Apr 27 2017 05:34
@sevensixtwo762 free brownies ? why you thank me
CamperBot
@camperbot
Apr 27 2017 05:34
adelmahjoub sends brownie points to @sevensixtwo762 :sparkles: :thumbsup: :sparkles:
:cookie: 292 | @sevensixtwo762 |http://www.freecodecamp.com/sevensixtwo762
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 05:35
lol you're welcome. I was just curious about how far you'd gone on fcc so far
I could have asked, I know
Adel
@AdelMahjoub
Apr 27 2017 05:35
@amasomazhar you can upload your images here
@sevensixtwo762 I'm in the last backend section, but had been busy for a while
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 05:36
@amasomazhar you could use imgur. @AdelMahjoub I hadn't thought of the forums!
that's interesting. you can post your projects elsewhere? I was going to check out your quote machine, as that's what I last finished, but got a 404 from your domain.
Adel
@AdelMahjoub
Apr 27 2017 05:38
this one ? https://dev.adel-mahjoub.fr/quotes/ @sevensixtwo762
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 05:38
this is the link from your FCC profile https://quotes-api.adel-mahjoub.fr/index.php
Adel
@AdelMahjoub
Apr 27 2017 05:39
oh , that link is dead, thanks for pointing that I'll update it
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 05:39
did you use wikiquote?
fantastic job!
h1tag
@h1tag
Apr 27 2017 05:40
@amasomazhar you have to host it somewhere first, like https://postimage.io/ , but don't use https://imgur.com/ with codepen
Adel
@AdelMahjoub
Apr 27 2017 05:40
@sevensixtwo762 I bought a quotes database for 5$ lol
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 05:40
ooh. I thought it was wikiquotes, and their api hurt my brain
it had categories and all sorts of fun bits.
Khoa Le
@Zacele
Apr 27 2017 05:41
@sevensixtwo762 hey man , you didn't help at at all ok ? I post my codepen in here and you didn't even bother check it and answer like a smart-ass
Adel
@AdelMahjoub
Apr 27 2017 05:42
@sevensixtwo762 this was the pen for the random quotes https://codepen.io/SultanCodeCamper/full/rrYRYv/
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 05:46
You're right @Zacele I'm sorry. Your pen paste was above the fold when I came back to chat. I only saw your question about how to toggle text in jquery
but I still maintain that that wasn't a good question.
Khoa Le
@Zacele
Apr 27 2017 05:47
I'm struggling with this challenge on how to change text via jQuery
@sevensixtwo762 it's alright man
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 05:49
the word "temperature" disappears when you click on it. you're doing something
I'm not sure what you're doing, but I think .toggle() doesn't take the parameters that you're giving it.
Adel
@AdelMahjoub
Apr 27 2017 05:51
@Zacele you want to absolutly use jQuery toggle or any other solution ?
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 05:51
the first is duration, the second is optional callback
oh it's options object
@Zacele none of the <head> information should be in the HTML input box
all external references go in the pen settings. any of the gear buttons will open the options.]
Khoa Le
@Zacele
Apr 27 2017 05:56
so I should remove the html tag ?
Adel
@AdelMahjoub
Apr 27 2017 05:56
Note: This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of arguments passed.
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 05:56
all js, css, and <head> stuff like meta go in the options.
yes. you should remove <html> and everything within <head>
Khoa Le
@Zacele
Apr 27 2017 05:57
just did
I'm working on a new version at my local machine
Jean-Paul Sauve
@jp-sauve
Apr 27 2017 05:57
oh i see. ok.
Khoa Le
@Zacele
Apr 27 2017 06:01
now I run into another problem
I just updated the pen
@sevensixtwo762 could you take a look why my inside that switch loop my return string could not converted into the normal format
<br>Broken Clouds<br>89.6 &degF
Khoa Le
@Zacele
Apr 27 2017 06:12
Wowwww
change InnerText to InnerHTML
wFez
@wFez
Apr 27 2017 06:38
https://codepen.io/wfaiz/pen/XRpWgw
hi can check this why i fail to add the image on the background
Khoa Le
@Zacele
Apr 27 2017 06:42
@wFez try background-image : url()
Khoa Le
@Zacele
Apr 27 2017 06:52
@wFez it is working
wFez
@wFez
Apr 27 2017 07:05
@Zacele its still the same
Khoa Le
@Zacele
Apr 27 2017 07:08
oh you cannot have background image inside a div
you can only have it in the body or the html element
@wFez
try to use it inside body {}
Darth Skywalker
@adityaparab
Apr 27 2017 07:16

@Zacele

oh you cannot have background image inside a div

Wrong. You can...

you can only have it in the body or the html element

Wrong!

Khoa Le
@Zacele
Apr 27 2017 07:17
@adityaparab oops
Darth Skywalker
@adityaparab
Apr 27 2017 07:17

you can only have it in the body or the html element

Take out the word only and you're 100% correct.

Khoa Le
@Zacele
Apr 27 2017 07:20
but in case of @wFez he put the background-image inside the div there it cannot show
@wFez body{
background-color:#1a1a1a !important;
background-image:url("http://timmatic.com/i/2016/12/dark-blue-sky-wallpaper-wide.jpg");
}
André
@pennyJack
Apr 27 2017 07:22
Hey guys, can anyone explain why I should use both css properties on a wrappe/container "width: 100%" and "max-width: 960px"? It does not make any sense to me since from my understanding "max-width" would always be applied anyway (i.e. be always 100% of the viewport but not larger than 960px), yet I still see this kind of structure a lot.
Khoa Le
@Zacele
Apr 27 2017 07:22

body{
  background-color:#1a1a1a !important;
 background-image:url("http://timmatic.com/i/2016/12/dark-blue-sky-wallpaper-wide.jpg");
}
Alexander Domikov
@AlexanderDom
Apr 27 2017 07:31
@abhishek9650 sorry was busy :)
Henry
@GitHub-Henry
Apr 27 2017 07:31
@pennyJack a view port can be various sizes, for example a phone may only have a 400px viewport. in such a case the phone will never have a viewport larger than 400px. max-width 960px means if the browser can expand the largest viewport that will be used is 960px.
max-width for a phone would be 400px
Alexander Domikov
@AlexanderDom
Apr 27 2017 07:32
width not max-width :)
max-width gonna stay 960, and because of width 100% width gonna be 400
Henry
@GitHub-Henry
Apr 27 2017 07:33
if the phone had a viewport of 400 it would never get to 960
so for the phone max width 100% would be 400
Alexander Domikov
@AlexanderDom
Apr 27 2017 07:34
i dont say that width gonna be 960, i'm talking about final width
no, width not max width
forget it it's not so important i hope @pennyJack got answer for his question :)
Henry
@GitHub-Henry
Apr 27 2017 07:35
max width 960 would only apply to a browser with the ability to have a viewport size of 960 or greater
actually if you're doing responsive design and coding it yourself, it's kind of important
Alexander Domikov
@AlexanderDom
Apr 27 2017 07:36
yes, so under 960 it's not max-width, it's width that applied
that, what, i try to say
i said that about that i'm not agree with you, that it's not important :)
Henry
@GitHub-Henry
Apr 27 2017 07:37
max-width 960 applies to browsers that have the ability to have a viewport of 960 or larger. max 100% would apply to browsers that can not get to 960
like a small phone
Alexander Domikov
@AlexanderDom
Apr 27 2017 07:38
i give up :)
André
@pennyJack
Apr 27 2017 07:38
yes but why do i need width then in the first place? I mean max-width would totally satisfy each viewport size, even on a phone max-width would act as width: 100%. The point is, I don't know what's width: 100% good for if you have max-width already declared anyway.
Alexander Domikov
@AlexanderDom
Apr 27 2017 07:38
@pennyJack
if your element is a "block" element (i gonna explain the concept)
Henry
@GitHub-Henry
Apr 27 2017 07:38
cuz it will affect how your elelments are positioned on a web page
play around with various setting to see how the different setting affect thiings
codepen.io is good for such things
Alexander Domikov
@AlexanderDom
Apr 27 2017 07:39
like <div> or titles <h1>,...<h6> or <p> and more others, they are by default width:100%
they take all the width of parent bloc
André
@pennyJack
Apr 27 2017 07:39
yes
Alexander Domikov
@AlexanderDom
Apr 27 2017 07:39
so often you don't even need to put width: 100%
just max-width
André
@pennyJack
Apr 27 2017 07:41
thats what Im saying :D
cehu
@cehu
Apr 27 2017 07:41
I am trying to change the code font for Brackets; after I change it if I change the size of it it will go back to default :(
can anyone help pls
Alexander Domikov
@AlexanderDom
Apr 27 2017 07:41
so width:100% it's more for other elements like images or not blocks elements that you've added display block :)
or other displays
other then inline, or none
Henry
@GitHub-Henry
Apr 27 2017 07:42
@cehu worst case uninstall, reinstall
i don't use brackets
Atom.io
Alexander Domikov
@AlexanderDom
Apr 27 2017 07:43
or you change it in a wrong file/way
that is overwritten by default
Henry
@GitHub-Henry
Apr 27 2017 07:46
@pennyJack consistency is a reason to explicitly code how you want things to appear. some browsers may display things one way and other browsers may display things another way,
André
@pennyJack
Apr 27 2017 07:46
.wrapper{
width: 100%;
max-width: 960px;
margin: 0 auto;
}
Henry
@GitHub-Henry
Apr 27 2017 07:47
if you want things to appear the same way in all browsers you should explicitly code it
André
@pennyJack
Apr 27 2017 07:47
Sorry maybe it's my lack of knowledge or IDK but I still don't get why both width and max-width are defined in this snippet I just posted :D
Henry
@GitHub-Henry
Apr 27 2017 07:48
@pennyJack review what i wrote and ask about the part you don't understand
CodingDoc
@CodingDoc
Apr 27 2017 07:50
does this tutorial teach us how to use bootstrap in a normal IDE? If I copy the code I'm working on and add the bootstrap link that it gave, none of the bootstrap edits function properly.
Anna
@AnnaVih
Apr 27 2017 07:52
hi!Need a help. I doing my portfolio project with bootstrap... when i open it on my laptop it is full responsive but when i try to open page from my phone the site is destroyed...i do not know where is problem.....
Фото 27.04.17, 8 45 13.png
Фото 27.04.17, 0 13 02 (1).png
h1tag
@h1tag
Apr 27 2017 07:55
@CodingDoc which tutorial and which bootstrap link?
here is my codepen for the weather challenge
There are 2 problems that I've encountred
one is that I cannot apply the google font into my project
Alexander Domikov
@AlexanderDom
Apr 27 2017 07:56
@GitHub-Henry i can assure you that every blocks elements have width:100% even for very old internet explorer, so you don't to put rules that are already applied
Khoa Le
@Zacele
Apr 27 2017 07:56
second is that I have set up the specific range of icon to match the right background but seem like it does not respond
        if(weatherData.weather[0].id.toString() === /[801-804]/g){
        $('body').css("background-image", 'url(' + backgroundImg[4] + ')');
        } else if(weatherData.weather[0].id.toString() === /[600-622]/g){
            $('body').css("background-image", 'url(' + backgroundImg[3] + ')');
        } else if(weatherData.weather[0].id.toString() === /[500-531]/g){
            $('body').css("background-image", 'url(' + backgroundImg[1] + ')');
        } else if(weatherData.weather[0].id.toString() ===/[300-321]/g){
            $('body').css("background-image", 'url(' + backgroundImg[2] + ')');
        } else if(weatherData.weather[0].id.toString() === /[200-232]/g){
            $('body').css("background-image", 'url(' + backgroundImg[5] + ')');
        } else {
            $('body').css("background-image", 'url(' + backgroundImg[0] + ')');
        }
it only match the last case
Alexander Domikov
@AlexanderDom
Apr 27 2017 07:57
@pennyJack width forces your block to take a certain width, max-width its superior to it it puts a limit not to overpass
Henry
@GitHub-Henry
Apr 27 2017 07:58
@AlexanderDom you may be right 100%, but not all browsers display all element the same, which is why i like to be explicit about how i want my element laid out on my pages, not sure if you've run across browser inconsistency that way
Alexander Domikov
@AlexanderDom
Apr 27 2017 07:58
like on a road you can say i gonna acelerate maximum that i can but you can put a limitation on certain speed
Khoa Le
@Zacele
Apr 27 2017 07:59
@sevensixtwo762 http://codepen.io/Zacele/pen/JNEJjq hey man could you check this out for me abit, one is that I cannot apply google font into the project which is it works on my local machine and try the method@import (url),
second i that my matching background vs the id of the weather seem not working at all, it only match the last case
Henry
@GitHub-Henry
Apr 27 2017 07:59
i use a standard set of resets helps out @AlexanderDom
Alexander Domikov
@AlexanderDom
Apr 27 2017 07:59
@GitHub-Henry , width: 100% it's very old rule, if your talking about css3 rules or even others yes you have autoprefixer for it
Henry
@GitHub-Henry
Apr 27 2017 07:59
I even use a standard template to help out also
Alexander Domikov
@AlexanderDom
Apr 27 2017 08:00
yes, yes, you talking to all other thing
i don't talked about default rules on elements i talked just about width 100% on blocks elemnts, i never said that, normalize or resets are bad thing
Henry
@GitHub-Henry
Apr 27 2017 08:02
@Zacele i've had the same problem, to get around it, i've added the font's to my projects, and i server my projects on freesites like github pages
Connor Murphy
@papasmurph
Apr 27 2017 08:02
@GitHub-Henry What templates/resets are you using? Out of curiosity
Henry
@GitHub-Henry
Apr 27 2017 08:03
normalize and reset
are common
html5 boilerplate is also a good starting place
i add fonts, and scss and a few other things i like in my projects
Alexander Domikov
@AlexanderDom
Apr 27 2017 08:04
just they dont do same thing (normalize and reset)
Henry
@GitHub-Henry
Apr 27 2017 08:04
gulp, min, concat, etc
they are different, with the same purpose
Alexander Domikov
@AlexanderDom
Apr 27 2017 08:04
and boilerplate can be too much for small projects
Henry
@GitHub-Henry
Apr 27 2017 08:05
i customize my starter template so it's the way i like it
Alexander Domikov
@AlexanderDom
Apr 27 2017 08:05
no, resets reset all rule to 0 exemple margin: 0, on the other hand normalize put same rule on everbody more all paragraphs have 1em margin-top
Connor Murphy
@papasmurph
Apr 27 2017 08:06
@Zacele You're falling foul of cors.
Khoa Le
@Zacele
Apr 27 2017 08:06
@papasmurph what do you mean ?
Henry
@GitHub-Henry
Apr 27 2017 08:07
@AlexanderDom i find i have to tweek cuz i like more control over spacing with my headers, paragraphs, etc..
Connor Murphy
@papasmurph
Apr 27 2017 08:09
@AlexanderDom @GitHub-Henry Personally, I don't really use them but when I do I agree it has got to be normalzise and html5 boilerplate but as @AlexanderDom said sometimes the boilerplate is to much
Alexander Domikov
@AlexanderDom
Apr 27 2017 08:09
@GitHub-Henry i stopped use normalize and reset, i look source code to see sometimes what rule they apply, but often i write my own rules, because often * { margin: 0; padding: 0 } it's not necessary
yes boilerplate has many default files that you don't need actually
it depends what you wanna do like project
Connor Murphy
@papasmurph
Apr 27 2017 08:09
@Zacele Cross origin domain policy. If you open up the console it'll give you more details
Henry
@GitHub-Henry
Apr 27 2017 08:11
@AlexanderDom you'd think you wouldn't get any spacing with * { margin: 0; padding: 0 }, but i've found i do with headers and paragraphs, cuz chrome puts it there, i find i need to explicitly remove spacing around those elements
Alexander Domikov
@AlexanderDom
Apr 27 2017 08:11
it must be other rule or chrome specific styles
Henry
@GitHub-Henry
Apr 27 2017 08:11
chrome specific styles i think
Connor Murphy
@papasmurph
Apr 27 2017 08:12
I hate using the * selector but sometimes it really is necessary to margin/padding 0. Yh browsers have specific default styles, not just chrome
Henry
@GitHub-Henry
Apr 27 2017 08:12
i think each browser has it's own set of styles applied to elements
Alexander Domikov
@AlexanderDom
Apr 27 2017 08:12
@papasmurph one time when you can use it without fear
* { box-sizing: border-box }
Henry
@GitHub-Henry
Apr 27 2017 08:12
i like it with fonts also
Alexander Domikov
@AlexanderDom
Apr 27 2017 08:13
*:before,*:after { box-sizing: inherit; }
CodingDoc
@CodingDoc
Apr 27 2017 08:13
@fortMaximus the bootstrap tutorial in freecodecamp. I've created the buttons, but attempted to use the designs outside of the freecodecamp IDE, using brackets, and the design doesn't translate. And the <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> that codecamp stated is all we needed to get bootstrap
André
@pennyJack
Apr 27 2017 08:13

@pennyJack width forces your block to take a certain width, max-width its superior to it it puts a limit not to overpass

That's exactly what I mean. When max-width is superior and overrides width anyway, why the heck should I use width then in the same rule? If I omit it and max width remains the only property nothing happens at all.

Alexander Domikov
@AlexanderDom
Apr 27 2017 08:14
no @pennyJack until you're not on 960px screen or bigger
Connor Murphy
@papasmurph
Apr 27 2017 08:14
I mainly dislike it because of speed issues but sometimes I just cba to write the same 2 lines on a number of elements
Alexander Domikov
@AlexanderDom
Apr 27 2017 08:14
it never applied
André
@pennyJack
Apr 27 2017 08:14
oh okay
Alexander Domikov
@AlexanderDom
Apr 27 2017 08:14
@papasmurph for box-sizing it's ok, there was tests
André
@pennyJack
Apr 27 2017 08:14
I thougth is always applies
it
Alexander Domikov
@AlexanderDom
Apr 27 2017 08:14
no :)
Connor Murphy
@papasmurph
Apr 27 2017 08:15
Got a link to that @AlexanderDom
Alexander Domikov
@AlexanderDom
Apr 27 2017 08:15
Paul Irish
André
@pennyJack
Apr 27 2017 08:19
This is so confusing, because it seems like it always applies but the reason it seems so is that width: defaults 100% in chrome
h1tag
@h1tag
Apr 27 2017 08:20
@CodingDoc add https: infront of the bootstrap link
Henry
@GitHub-Henry
Apr 27 2017 08:21
@pennyJack to truly test you need devices with various screen widths for you to see the differences
Alexander Domikov
@AlexanderDom
Apr 27 2017 08:21
no not saw html version thank's :)
@pennyJack you have device mode on many browser dev tools
or you have tools like http://bradfrost.com/demo/ish/
you can add an url and it gonna resize it
André
@pennyJack
Apr 27 2017 08:28
The thing I was so confused is that I thought that max-width kind of always applies, i.e. if your browser windows becomes larger than the defined amount of px (say 960px) it limits the width to that value but if you shrink your browser, max-width then automatically turns to 100%, i.e essentially. it doesn't get bigger than 960px but shrinks accordingly if you shrink your viewport, al because of the max-width property. I think someone that it in a tutorial and it seems to make perfect sense. But if you follow this logic, setting width 100% does not make any sense anymore, since max-width takes care of that as well. But it's not max-width but rather the default value of the browser which mostly is 100%. So i understand now why I better set it explicitly since if a browses default value might not be width: 100% you may have a problem. But come on guys this is really confusing if you think about it. :D
Alexander Domikov
@AlexanderDom
Apr 27 2017 08:29
no, it's not turn in too 100%, it's just don't apply
like i said it's like limitation on speed on a car you never gonna see it works until you reach maximal speed :)
André
@pennyJack
Apr 27 2017 08:30
yes i just said that max.width doesn't apply
if you are below the defined value
Alexander Domikov
@AlexanderDom
Apr 27 2017 08:31
max-width then automatically turns to 100%
:)
Henry
@GitHub-Henry
Apr 27 2017 08:31
anyone see this front end resource http://styleguides.io/ good reading
André
@pennyJack
Apr 27 2017 08:31
Come on quote the whole sentence
that I thought that max-width kind of always applies
Anyway thanks @AlexanderDom and @GitHub-Henry
CamperBot
@camperbot
Apr 27 2017 08:32
pennyjack sends brownie points to @alexanderdom and @github-henry :sparkles: :thumbsup: :sparkles:
:cookie: 406 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
:cookie: 316 | @github-henry |http://www.freecodecamp.com/github-henry
Alexander Domikov
@AlexanderDom
Apr 27 2017 08:33
you're welcome you gonna come back here when you gonna see max-width, min-width adventures with display flex ;)
Henry
@GitHub-Henry
Apr 27 2017 08:33
@pennyJack there is a lot to wrap your head around, good luck with it
Alexander Domikov
@AlexanderDom
Apr 27 2017 08:34
yes it's evolves everyday, keep learning and trying what you've learned
André
@pennyJack
Apr 27 2017 08:34
:+1:
André
@pennyJack
Apr 27 2017 08:52
By the way guys just to be clear: does any browser actually have a different width default value than 100%?
Alexander Domikov
@AlexanderDom
Apr 27 2017 08:53
for block elements ? no
in doubt, you can always see "calculated style" in your dev tools
André
@pennyJack
Apr 27 2017 08:54
so you could omit width: 100% for block level elemts
?
Henry
@GitHub-Henry
Apr 27 2017 08:54
International box-sizing Awareness Day, Feb 1st
https://css-tricks.com/international-box-sizing-awareness-day/
Alexander Domikov
@AlexanderDom
Apr 27 2017 08:54
^^
yes
try it you gonna see
there are other rules that you don't need to put, because they don't have effects, like put display: block on a floating element or position other than static... And other but we gonna let you try
Bogdan
@oblanao
Apr 27 2017 08:58
Hello, guys! Trying to use the @font-face CSS rule

`@font-face {
font-family: 'LCDfont';
src: url('https://www.monteoru.ro/LCDfont.eot'); / IE9 Compat Modes /
src: url('https://www.monteoru.ro/LCDfont.eot?#iefix') format('embedded-opentype'), / IE6-IE8 /
url('https://www.monteoru.ro/LCDfont.woff2') format('woff2'), / Super Modern Browsers /
url('https://www.monteoru.ro/LCDfont.woff') format('woff'), / Pretty Modern Browsers /
url('https://www.monteoru.ro/LCDfont.TTF') format('truetype'), / Safari, Android, iOS /

}`

and then #idSelector {font-family:'LCDfont';} but nothing happens
checked the URLs twice, so what could this be ?
Alexander Domikov
@AlexanderDom
Apr 27 2017 09:00
look in network tab in dev tools
does your fon't is there
Capture d’écran 2017-04-27 à 11.00.41.png
Bogdan
@oblanao
Apr 27 2017 09:01
nope it's not
what is the reason for this?
given the URLs are fine
Alexander Domikov
@AlexanderDom
Apr 27 2017 09:02
perhaps your calling an https source within an http page
Bogdan
@oblanao
Apr 27 2017 09:02
yeah this should be it. let me check please
yeah removed the "s" from https and now the font is in in the network tab in dev tools but the element is not styled
Alexander Domikov
@AlexanderDom
Apr 27 2017 09:04
i gonna try on codepen
Bogdan
@oblanao
Apr 27 2017 09:06
in the network tab in dev tools, the font appear with different URL, something like fonts.gstatic.com and the preview is like a normal font, not the digital one I uploaded
Alexander Domikov
@AlexanderDom
Apr 27 2017 09:09
look in console, are having errors ?
Bogdan
@oblanao
Apr 27 2017 09:10
yeah right now I spotted one
Access to Font at 'http://www.monteoru.ro/digitalFont.ttf' from origin 'http://s.codepen.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.
note: just changed the URL to a different font
Alexander Domikov
@AlexanderDom
Apr 27 2017 09:11
i tryied to open all of your urls in a browser
and all are 404 pages
?
Alexander Domikov
@AlexanderDom
Apr 27 2017 09:12
no but urls in your font-face
Bogdan
@oblanao
Apr 27 2017 09:12
if I click the link it will automatically download the font files, for each of the URLS made public here on gitter
Alexander Domikov
@AlexanderDom
Apr 27 2017 09:13
not font-face urls like https://www.monteoru.ro/LCDfont.eot for me
digitalfont it was ok
Bogdan
@oblanao
Apr 27 2017 09:13
i just deleted the files from above
only digitalFont.ttf available now, and I am encountering errors for it
the CORS error that is
Henry
@GitHub-Henry
Apr 27 2017 09:18
Alexander Domikov
@AlexanderDom
Apr 27 2017 09:19
i tryied :(
without success url('http://crossorigin.me/https://www.monteoru.ro/digitalFont.ttf')
Bogdan
@oblanao
Apr 27 2017 09:20
yeah, think I'll stick to google fonts :))
@AlexanderDom @GitHub-Henry thanks anyway!
CamperBot
@camperbot
Apr 27 2017 09:20
oblanao sends brownie points to @alexanderdom and @github-henry :sparkles: :thumbsup: :sparkles:
:cookie: 407 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
:cookie: 317 | @github-henry |http://www.freecodecamp.com/github-henry
Henry
@GitHub-Henry
Apr 27 2017 09:22
here's another similar resource https://cors-anywhere.herokuapp.com/
Alexander Domikov
@AlexanderDom
Apr 27 2017 09:23
sorry @oblanao
Henry
@GitHub-Henry
Apr 27 2017 09:26
Those are resources others mention help overcome the CORS problem. I've been using hosting from repo which doesn't have the CORS problems.
Khoa Le
@Zacele
Apr 27 2017 09:28
could anyone take a look at my pen
the JS line from 25-47
why I cannot add the background to the specific range of icons i set up
it only return the default case which is the last else
Khoa Le
@Zacele
Apr 27 2017 09:30
http://codepen.io/Zacele/pen/JNEJjq/ please take a look at it. Thanks. js file from line 25-47
Anna
@AnnaVih
Apr 27 2017 09:41
guys can i use in codePen tag <body>?
Khoa Le
@Zacele
Apr 27 2017 09:42
what do u mean Anna?
Anna
@AnnaVih
Apr 27 2017 09:43
i want to put <body data-spy="scroll" data-target=".navbar" data-offset="65">
@Zacele but i see that in codePen i should to put all content after body
Khoa Le
@Zacele
Apr 27 2017 09:48
isn't that belong to the <nav> tag
Alexander Domikov
@AlexanderDom
Apr 27 2017 09:48
you can only add classes on it, you can't add data attributes
in codepen
Capture d’écran 2017-04-27 à 11.48.37.png
sorry you can't add things on body from codepen, perhaps in codepen projects
yes in codepen project you can
Anna
@AnnaVih
Apr 27 2017 09:50
@AlexanderDom so how i can use it??
Alexander Domikov
@AlexanderDom
Apr 27 2017 09:51
when you click on your profil in codepen you can choose new pen, new post, new project
Capture d’écran 2017-04-27 à 11.50.53.png
Anna
@AnnaVih
Apr 27 2017 09:52
@AlexanderDom and?
Alexander Domikov
@AlexanderDom
Apr 27 2017 09:53
and, now, you have total access on your html file
Henry
@GitHub-Henry
Apr 27 2017 09:53
Anna
@AnnaVih
Apr 27 2017 09:57
@AlexanderDom i can to see access to my html file
Alexander Domikov
@AlexanderDom
Apr 27 2017 09:57
it's on your left
in project root
Capture d’écran 2017-04-27 à 11.57.35.png
index.html
Anna
@AnnaVih
Apr 27 2017 10:06
@AlexanderDom
when you click on your profil in codepen you can choose new pen, new post, new project
Alexander Domikov
@AlexanderDom
Apr 27 2017 10:06
yes choose new project from there
Anna
@AnnaVih
Apr 27 2017 10:09
@AlexanderDom and now?
Alexander Domikov
@AlexanderDom
Apr 27 2017 10:10
you have access tou your index.html on the left
you add all your needed files, css, js
and here you go
Bogdan
@oblanao
Apr 27 2017 10:14
@GitHub-Henry thanks for the link to bypass CORS error, worked!
CamperBot
@camperbot
Apr 27 2017 10:14
oblanao sends brownie points to @github-henry :sparkles: :thumbsup: :sparkles:
:warning: oblanao already gave github-henry points
Bogdan
@oblanao
Apr 27 2017 10:15
I would like to create a message with a font awesome "replacing" a letter, but using <p id="breakMessage">You are <span><i class="fa fa-smile-o"></i></span>n Break!</p> just takes the text after span on the next line
I tried applying white-space: nowrap to the <span> element but still the same result
Alexander Domikov
@AlexanderDom
Apr 27 2017 10:19
need to see your code :)
Bogdan
@oblanao
Apr 27 2017 10:19
figured it out, needed to apply nowrap to <p> element instead. Thanks!
Dany Din
@danydin
Apr 27 2017 10:31
hey guys, may i figure in which language a specific site built from looking at it source/console code? (the backend language/which frameworks/etc?)
Bogdan
@oblanao
Apr 27 2017 10:32
hello, working on the Pomodoro Clock Project, almost finished. Please take a look: http://codepen.io/oblanao/full/BRQOPg/ Any feedback welcome! Thanks
Marianissimus
@Marianissimus
Apr 27 2017 10:32
@danydin there are sites that try to tell you that. something like "what is this site made with". try to google...
Dany Din
@danydin
Apr 27 2017 10:33
@Marianissimus ok thanks!! later on i'll try figure how they do it..
Thomas
@sjurs1
Apr 27 2017 10:34
Hi guys! I'm working on a portfolio page, currently setting up buttons to navigate throughout the page. I guess it's the FCC challenge 119. I don't know if I'm doing something weird with Bootstrap grids, because I feel like the concept in itself isn't hard to grasp. I want the buttons on the right side, and I thought I could use grids to make that happen. Take a look if you want! https://codepen.io/sjurs1/pen/dWNdJr
Marianissimus
@Marianissimus
Apr 27 2017 10:37
@sjurs1 hi. the xs class is for extra-small devices (like phones). you'll have problems testing this xs in a desktop environment
Thomas
@sjurs1
Apr 27 2017 10:38
I played around using the lg class too, and doing it again now I see it's worked. I think I made a weird mistake earlier making it not work then. D'oh! Thanks
André
@pennyJack
Apr 27 2017 10:45
Hey guys, I have another (probably dumb) question: if someone defines some basic layout defaults like say "max-width: 960px" and "margin: 0 auto" to center it on the page, I always see that they apply those styles to a separate container (e.g. a div), which wraps everything else and is a direct descendant of the body element. Why do we need it? Why not apply those basic styles to the body in the first place? :D
Marianissimus
@Marianissimus
Apr 27 2017 10:52
@pennyJack That's a good question, but I don't think there's a general rule. It depends on the needs of the project. Sometimes you may need an extra container to add some padding, for instance, or maybe you want something to flow in the body... and so on. If you can get away with it in your project, just do it, add margin 0 auto to your body. :)
André
@pennyJack
Apr 27 2017 10:59
@Marianissimus Great thanks! Already had the feeling it might be that reason. Was just wondering if there may be some not so obvious reason for doing so. :)
CamperBot
@camperbot
Apr 27 2017 10:59
pennyjack sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 387 | @marianissimus |http://www.freecodecamp.com/marianissimus
Marianissimus
@Marianissimus
Apr 27 2017 11:00
you're welcome
Bogdan
@oblanao
Apr 27 2017 11:12
anyone on my Pomodoro project, please? http://codepen.io/oblanao/full/BRQOPg/
Jesse Jafa
@awareness481
Apr 27 2017 11:25

So if JSON is like this

{
"stream": {
         //(...)
        },
"channel": {
            "mature": false,
            "partner": true,
            "status": "RERUN: Geeden vs. avilo (ZvT) - WCS Austin Challenger NA - Qualifier #1",
         (...)

Do I just need to write this to get the status value?

//Assume the rest of my code is correct
    success (data) {
      document.getElementById("twitch").innerHTML = data["channel"]["status"];
    }
alpox
@alpox
Apr 27 2017 11:34
@tstusr441 Yup that
@tstusr441 Or even simpler: data.channel.status
Jesse Jafa
@awareness481
Apr 27 2017 11:35
Thanks @alpox, one more question, is dot notation favored over brackets generally?
CamperBot
@camperbot
Apr 27 2017 11:35
tstusr441 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 987 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Apr 27 2017 11:36
@tstusr441 Dot always when possible
Jesse Jafa
@awareness481
Apr 27 2017 11:36
Alright mate, thanks again :)
Wew, just saw that codepen has a debug mode, saves a lot of time trying to use Chrome Console. Seriously everyone here should know about this :P
abhishek
@abhishek9650
Apr 27 2017 11:39
https://codepen.io/abhishek9650/pen/NjdzPP i am unable to set the background for the id #portfolio ...
Amadeusz
@AmekxOne
Apr 27 2017 11:44
Hey. In the Build a Random Quote Machine challenge, am I exptected to use jQuery or vanilla JS? Or whatever I feel comfortable with?
Alexander Domikov
@AlexanderDom
Apr 27 2017 11:45
hey @abhishek9650 :)
abhishek
@abhishek9650
Apr 27 2017 11:46
@AlexanderDom heyy man
need help
Jesse Jafa
@awareness481
Apr 27 2017 11:46
@AmekxOne I think removing display:inline; should work
Alexander Domikov
@AlexanderDom
Apr 27 2017 11:46
why you put this profile picture :(
Jesse Jafa
@awareness481
Apr 27 2017 11:46
@AmekxOne on #portofolio
h1tag
@h1tag
Apr 27 2017 11:47
@AmekxOne whatever in all the projects
Amadeusz
@AmekxOne
Apr 27 2017 11:47
@tstusr441 I think you were ment to reply to @abhishek9650 ;)
Jesse Jafa
@awareness481
Apr 27 2017 11:47
Sorry I meant to tag @abhishek9650
Amadeusz
@AmekxOne
Apr 27 2017 11:47
@fortMaximus Okay thanks!
CamperBot
@camperbot
Apr 27 2017 11:47
amekxone sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 746 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
abhishek
@abhishek9650
Apr 27 2017 11:47
@AlexanderDom he is our lord and saviour
lol
Jesse Jafa
@awareness481
Apr 27 2017 11:47
Yes, @abhishek9650 Removing display:inline; on #portofolio should work
abhishek
@abhishek9650
Apr 27 2017 11:48
@tstusr441 it worked thank you
CamperBot
@camperbot
Apr 27 2017 11:48
:cookie: 300 | @tstusr441 |http://www.freecodecamp.com/tstusr441
abhishek9650 sends brownie points to @tstusr441 :sparkles: :thumbsup: :sparkles:
Jesse Jafa
@awareness481
Apr 27 2017 11:48
:)
abhishek
@abhishek9650
Apr 27 2017 11:50
@abhishek9650 by the way this pic is temporary... i will edit all these in final touch ups.... i was not getting any idea test.. so i chose this one... lol
Alexander Domikov
@AlexanderDom
Apr 27 2017 11:52
you have kittens too ^^ https://placekitten.com/
abhishek
@abhishek9650
Apr 27 2017 11:54
@AlexanderDom haha lol kittens.... :sparkles:
Jesse Jafa
@awareness481
Apr 27 2017 12:26
So I was getting a CORS error but I fixed it. However I don't understand why it works. If use ?callback= it doesn't work however if I just a question mark at the end of the url it works..
$( document ).ready(function() {

  $.ajax ({
    url: "https://wind-bow.gomix.me/twitch-api/streams/ESL_SC2?",
    type: "GET",
    dataType: "jsonp",
    success (data) {
      document.getElementById("twitch").innerHTML = data["stream"]["channel"]["status"];
    }

  });

});
Jesse Jafa
@awareness481
Apr 27 2017 12:28

From Twitch API Documentation:

All API endpoints support JSON-P by providing a callback parameter with the request:

h1tag
@h1tag
Apr 27 2017 12:28
@tstusr441 read the jsonp section on this page: https://api.jquery.com/jQuery.getJSON/

JSONP

If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details.

Jesse Jafa
@awareness481
Apr 27 2017 12:32

@fortMaximus From the ajax() doc page in dataType:

"jsonp": Loads in a JSON block using JSONP. Adds an extra "?callback=?" to the end of your URL to specify the callback. Disables caching by appending a query string parameter, "_=[TIMESTAMP]", to the URL unless the cache option is set to true.

Does this mean that dataType: "jsonp" adds ?callback=? on its own to the url?

h1tag
@h1tag
Apr 27 2017 12:34
yes
Abdallah Sarhan
@AbdallahSarhan
Apr 27 2017 12:34
please, for (Mutations - Basic Algorithm ..) this soln what it's wrong ?
Jesse Jafa
@awareness481
Apr 27 2017 12:34
@fortMaximus That's pretty sweet, thanks a lot of your help mate
CamperBot
@camperbot
Apr 27 2017 12:34
tstusr441 sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 747 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Abdallah Sarhan
@AbdallahSarhan
Apr 27 2017 12:34

function mutation(arr) {

  for (var i = 0 ; i< arr[0].length; i++){
    var val , patt;
    for (var j = 0 ; j< arr[1].length; j++){
      patt = /arr[1][j]/ig;}
    val = arr[0].search(patt,0);
    if (val > -1 ) {
      return true;}
    else {return false;} 

  }
}
Marianissimus
@Marianissimus
Apr 27 2017 12:50
@AbdallahSarhan hi, what is this? // var val , patt;// you're just initializing two variables with no assignment? why?
Abdallah Sarhan
@AbdallahSarhan
Apr 27 2017 12:51
it's ok to do this btw xD
the wrong is stupidity of JS doesn't accept REG-EXP to have a variable inside!
like this
Alexander Domikov
@AlexanderDom
Apr 27 2017 13:13
did you tried patt = new RegExp(arr[1][j], 'gi'); ?
Tom
@moT01
Apr 27 2017 13:14
@AbdallahSarhan i was thinking something like..... patt.search(arr[0])
not sure, just throwing thoughts out there
Alexander Domikov
@AlexanderDom
Apr 27 2017 13:15
but patt gonna change with each for iteration and it's last value of array that gonna stay in regex
and it's more HelpJavascript channel question ;) there are more regex pro there by the way
Abdallah Sarhan
@AbdallahSarhan
Apr 27 2017 13:29
@moT01 the proplem is i don't look for the whole element to be in the second as it is, may it got reversed or messed with the same letters and it should accept it !
@AlexanderDom Yes i did post it there too previously xD
mikou-mouad
@mikou-mouad
Apr 27 2017 13:30
guys pleas is the setTimeOut() function work as a thread?
i m doing the simon game
and it executes at the end of the code
Tom
@moT01
Apr 27 2017 13:36
@AbdallahSarhan do you need to be cycling through arr[0]?
Alexander Domikov
@AlexanderDom
Apr 27 2017 13:42
@mikou-mouad i'm not even on this exercice :( must finished pomodoro !!!! ><
mikou-mouad
@mikou-mouad
Apr 27 2017 13:46
ok thanks sorry
Alexander Domikov
@AlexanderDom
Apr 27 2017 13:48
don't be sorry :) it's me, i'm too lazy it gonna be one year that i started this exercice if its not already
Edward Huang
@edwardGunawan
Apr 27 2017 13:49
Is there any possible way to assign expires on the cache on metadata on a static file, if I am just using CSS HTML and JS and deplying it using github?
like metadata name="expires" doesn't work
h1tag
@h1tag
Apr 27 2017 13:49

it gonna be one year that i started this exercice

you made me feel good about myself

Edward Huang
@edwardGunawan
Apr 27 2017 13:49
it won't cache the static files
Alexander Domikov
@AlexanderDom
Apr 27 2017 13:50
expires it's for cookies normally i think not sure
Edward Huang
@edwardGunawan
Apr 27 2017 13:51
yeah, how about cache-control? cause I check on a lot of the site, and they cache their static file mostly from the server which is from .htaccess
but I am just developing using JS CSS and HTML, and deployed it using github. it is a single page app
Alexander Domikov
@AlexanderDom
Apr 27 2017 13:51
if i understand your problem there technique to add text like ?v something after file
that forces recharging on file
Abdallah Sarhan
@AbdallahSarhan
Apr 27 2017 13:52
@moT01 yes that's it but i'm kinda out of ill, so i can't concentrate so much xD
Alexander Domikov
@AlexanderDom
Apr 27 2017 13:54
@fortMaximus i do too many things at same time and most of all i started learn seriously guitar in january so, i must choose very well for what use my time :)
Edward Huang
@edwardGunawan
Apr 27 2017 13:54
@AlexanderDom what do you mean by adding ?v after the file route like a query string? I tested my website on google developer page test and it said that it need to leverage browser cache, however I am not sure how to do that with deploying through github, cause usually we can control the cache intake using .htaccess if you are running it on the server such as apache
it said "Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network."
Alexander Domikov
@AlexanderDom
Apr 27 2017 13:55
@edwardGunawan like style.css?v=409d9da
you change that value on your site and for browser it's another file
not same style.css
Edward Huang
@edwardGunawan
Apr 27 2017 13:56
@AlexanderDom ohh i see! let me try that out then, what will be the argument mean? and do I also do the same thing for image file either?
Amadeusz
@AmekxOne
Apr 27 2017 13:57
Hi, I have a question about jQuery. I have this code, how can I make it replace the appended content everytime the click event happens?
$("#newQuote").on("click", function(){
     $("#quote").append(a[0].content + "<p>&mdash; " + a[0].title + "</p>")
    });
h1tag
@h1tag
Apr 27 2017 13:58
@AmekxOne use .html() instead
Alexander Domikov
@AlexanderDom
Apr 27 2017 13:58
fort was faster ^^
Amadeusz
@AmekxOne
Apr 27 2017 13:58
@fortMaximus oh cool it works, thanks
CamperBot
@camperbot
Apr 27 2017 13:58
:cookie: 748 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Jesse Jafa
@awareness481
Apr 27 2017 13:59
For the Twitch API Challenge is there another route except sending 1 api request for each individual channel? I can't find a different way to get information from many channels using FCC's limited commands.
CamperBot
@camperbot
Apr 27 2017 13:59
amekxone sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
Edward Huang
@edwardGunawan
Apr 27 2017 13:59
I seee! THanks @AlexanderDom I appreciated it!
CamperBot
@camperbot
Apr 27 2017 13:59
edwardgunawan sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 408 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
Alexander Domikov
@AlexanderDom
Apr 27 2017 14:00
you're welcome @edwardGunawan
Paradox5
@Paradox5
Apr 27 2017 14:04
Hello
Alexander Domikov
@AlexanderDom
Apr 27 2017 14:10
Hello hello
CodingDoc
@CodingDoc
Apr 27 2017 14:13
@fortMaximus That did the trick. Thanks!
CamperBot
@camperbot
Apr 27 2017 14:13
codingdoc sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 749 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Aaron
@apalm1341
Apr 27 2017 14:13
hey all. I am trying to make it so that I have images pop up instead of the X's and O's pop up on my tic tac toe game board for when players play each other for both styles of games (one player and two player)
Tom
@moT01
Apr 27 2017 14:24
that's exactly what my nes looks like stretched out on my flat screen
@apalm1341 you put a <span> in there when clicked im guessing on quick inspection? couldn't you just put an <img> in there
Aaron
@apalm1341
Apr 27 2017 14:32
@moT01 where r u talking about in my code?
Tom
@moT01
Apr 27 2017 14:33
i just looked at the inspector, ...im taking a look at the code now, not sure if ill find a way for ya
Tom
@moT01
Apr 27 2017 14:45
i dunno man, ...doesn't seem to be a real easy way there
maybe change the X and O buttons in the html, to images with that class
then you would have to follow that through and change and bunch of other things to accommodate
or <img> inside the <button> i feel like thats where you would have to start
Chandreu Vijay
@chandreu
Apr 27 2017 15:04
Help: Regarding the button in this pen below. Why the css for :active and :visited not working ?
https://codepen.io/chandreu/pen/PmWxaK
Alexander Domikov
@AlexanderDom
Apr 27 2017 15:05
@chandreu it's working
just you add same background color that default state
i mean your rule
Chandreu Vijay
@chandreu
Apr 27 2017 15:06
Is it ? Well, it turns blue when i hold click on the button. And remains blue after release.
Alexander Domikov
@AlexanderDom
Apr 27 2017 15:06
it's same background-color for default state and hover and visited
Chandreu Vijay
@chandreu
Apr 27 2017 15:07
I wanted it to remain green.
Alexander Domikov
@AlexanderDom
Apr 27 2017 15:07
if your want other you need to separate rules
it's .btn-primary rule that apply that
Emmanuel
@chriemma
Apr 27 2017 15:07
pls i need clue on how to make tribute page
Alexander Domikov
@AlexanderDom
Apr 27 2017 15:08
when you click it's focus state i think
no it's active state rule
it's bypassing your rule, because it's .btn-primary:active:hover
it bootstrap css file, so it's have more weight over your .btn:active
Chandreu Vijay
@chandreu
Apr 27 2017 15:16
Thanks Alex! I managed to get it working. It no longer stays blue after click, the :focus did the job. And bypassed the bootstrap rule with !important.
Alexander Domikov
@AlexanderDom
Apr 27 2017 15:19
you can just re use same rule or, little tip actually
.btn.btn works perfectly
but has bigger weight for selector
so just .btn.btn:active gonna work
Chandreu Vijay
@chandreu
Apr 27 2017 15:20
let me try that.
it worked! Awesome! I feel so stupid now for using !important.
Thanks again Alex!!!
Alexander Domikov
@AlexanderDom
Apr 27 2017 15:31
you're welcome, don't feel stupid :) we learn every day
Danny
@dannybrown37
Apr 27 2017 15:31
Why is CodePen telling me that my <div> element is a child of the <h1> and can't be, and the same for my <p> element?
CSS styles are being inherited, and I don't want them to be, but I can't figure out why I'm doing wrong
Alexander Domikov
@AlexanderDom
Apr 27 2017 15:31
don't really understand your first question @dannybrown37
Danny
@dannybrown37
Apr 27 2017 15:31
The <div> and <p> elements are not embedded within the H1. They're completely separate
Alexander Domikov
@AlexanderDom
Apr 27 2017 15:32
ok
Danny
@dannybrown37
Apr 27 2017 15:32
I'm not really sure how to phrase it. I have CSS styles applied to the class .title, but then they are being inherited in the class .intro, and I have no idea why
I'm new to this. Is there a way to easily share my CodePen info?
Alexander Domikov
@AlexanderDom
Apr 27 2017 15:33
so @dannybrown37 , <p> and all titles <h1>...<h6> accepts only inline elements for children
i gonna explain
<div> it's a block element
instead of <div> you can put a <span> inside your <h1>
same for <p> it's a block element
Gulsvi
@gulsvi
Apr 27 2017 15:34
@dannybrown37 make sure you have a closing </h1> tag. It could be misspelled or missing a < > as well
Danny
@dannybrown37
Apr 27 2017 15:34
The problem is that I don't want anything else in the h1. I want to move on, but it's making everything child elements without me asking.
Alexander Domikov
@AlexanderDom
Apr 27 2017 15:34
so you can't put neither <p> or <div> inside your <h1>
it's a rule for browsers and rule of W3C so you need to change your element
Danny
@dannybrown37
Apr 27 2017 15:36
I appreciate the assistance. Unfortunately, this isn't the problem, because the only thing inside my h1 element is text.
Alexander Domikov
@AlexanderDom
Apr 27 2017 15:36
so if you want to move on, use span in your h1 there are plenty other inline elements but span have no default styles so
so... i didn't understand your question
did you have a codepen ?
Danny
@dannybrown37
Apr 27 2017 15:37
Yes, I don't know how to share. This is my first day.
Gulsvi
@gulsvi
Apr 27 2017 15:37
@dannybrown37 Are you sure </h1> is there? Not </hl>or </hI>
Danny
@dannybrown37
Apr 27 2017 15:37
</h1> is there
Alexander Domikov
@AlexanderDom
Apr 27 2017 15:37
create a pen
then paste codepen's url here
save your pen
Didn't realize I could just share the URL directly; figured one would need to sign in.
Gulsvi
@gulsvi
Apr 27 2017 15:38
It's </hL> not </h1>
Danny
@dannybrown37
Apr 27 2017 15:39
You are brilliant, Sky!
Looked like 1 to me
Gulsvi
@gulsvi
Apr 27 2017 15:39
Happens here a lot :)
Danny
@dannybrown37
Apr 27 2017 15:39
Not even sure how I did that, but thank you so much for noting :)
Gulsvi
@gulsvi
Apr 27 2017 15:39
On to the next line! :)
Danny
@dannybrown37
Apr 27 2017 15:39
Indeed. Many thanks again!
Alexander Domikov
@AlexanderDom
Apr 27 2017 15:41
if you say thanks with @ name of user it gonna have a point :)
Edward Huang
@edwardGunawan
Apr 27 2017 15:45
Is there any possible way to set up https in your domain in namecheap when you connect to your github page? I'm using a student discount for name cheap, which is a .me, but idk how to let it redirect to https?
Chandreu Vijay
@chandreu
Apr 27 2017 15:51
Thank you @AlexanderDom. Wasn't aware of the @ selector earlier. :smile: :+1:
CamperBot
@camperbot
Apr 27 2017 15:51
chandreu sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 409 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
Danny
@dannybrown37
Apr 27 2017 15:53
Thank you @AlexanderDom and @SkyCoder101 also was not aware
CamperBot
@camperbot
Apr 27 2017 15:53
dannybrown37 sends brownie points to @alexanderdom and @skycoder101 :sparkles: :thumbsup: :sparkles:
:warning: @skycoder101's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
:cookie: 410 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
Gulsvi
@gulsvi
Apr 27 2017 15:54
@edwardGunawan HTTPS is not supported on github pages using custom domains: https://help.github.com/articles/securing-your-github-pages-site-with-https/
Alexander Domikov
@AlexanderDom
Apr 27 2017 15:54
you're welcome :) @chandreu and @dannybrown37
Jorge
@OrangeKulture
Apr 27 2017 15:55
hey guys ..good morning
Gulsvi
@gulsvi
Apr 27 2017 15:56
Good morning :)
Alexander Domikov
@AlexanderDom
Apr 27 2017 15:57
good evening in europe :)
Jorge
@OrangeKulture
Apr 27 2017 15:57
another day, more code .. :grin:
LeNard Simmons
@seconds2work
Apr 27 2017 15:59
Hi everyone, I have a couple of questions about the first project. Do I have to use the codepen editor? Can I host the project on my own website?
Tom
@moT01
Apr 27 2017 16:01
@seconds2work create it however you want, ...but they do ask for a codepen link to your project when youre done with it
ive been creating locally and copy/pasting to codepen when i finish
LeNard Simmons
@seconds2work
Apr 27 2017 16:04
@moT01 thanks moT01. I created the project locally. when I copy and paste, it don't look the same.
CamperBot
@camperbot
Apr 27 2017 16:04
seconds2work sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 643 | @mot01 |http://www.freecodecamp.com/mot01
jaizon
@jaizon
Apr 27 2017 16:05
Hello guys, anyone good with bootstraps to help me here? I did this in a hurry, but now I feel like the looks of it is more important than project itself . when the screen changes it gets a weird look. http://codepen.io/jaizon/pen/pPEJRL
Gulsvi
@gulsvi
Apr 27 2017 16:05

@seconds2work Yes, you can host your project on your own website. No need to use codepen at all. From: https://www.freecodecamp.com/about/

Do I have to use CodePen for the front end projects?

As long as your code is publicly viewable, and you have a live demo, you can use whatever you want.

LeNard Simmons
@seconds2work
Apr 27 2017 16:06
@SkyCoder01 thanks, I'm looking into this right now
CamperBot
@camperbot
Apr 27 2017 16:06
seconds2work sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1203 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 27 2017 16:08
@jaizon Your css is overriding some of the behavior of bootstrap that helps it look nice on different screen sizes. For example, this CSS overrides img-fluid and the grid system:
.work-img {
  display: inline-block;
  float: right;
  width: 40%;
  height: 15rem; 
}
jaizon
@jaizon
Apr 27 2017 16:08
@SkyCoder01 So we can host it to github instead?
Gulsvi
@gulsvi
Apr 27 2017 16:08
Yes, github works great @jaizon
jaizon
@jaizon
Apr 27 2017 16:09
@SkyCoder01 this hole section or some of it ?
Gulsvi
@gulsvi
Apr 27 2017 16:09
@jaizon You can host the entire project (all of it) on github.
Or are you asking about your CSS? sorry
jaizon
@jaizon
Apr 27 2017 16:10
css lol
Gulsvi
@gulsvi
Apr 27 2017 16:10
lol, yeah, a lot of your CSS is not letting bootstrap do its job. Adding floats and widths, for example.
LeNard Simmons
@seconds2work
Apr 27 2017 16:10
Thank you all, I'm going to host a live demo on my site. I'm still getting use to using this.
jaizon
@jaizon
Apr 27 2017 16:10
I @SkyCoder01 I didn't know they would accept my project hosted outsid eof codepen
Gulsvi
@gulsvi
Apr 27 2017 16:11
Yeah, lots of people don't like codepen :) I really like it a lot though, it just takes some getting used to. Github is much more powerful though - bug tracking, history, etc.
jaizon
@jaizon
Apr 27 2017 16:12
Codepen is betterforyou to show your code, but sometimes you just want to show your project
I like to host my own files
Bogdan
@oblanao
Apr 27 2017 16:12
Hello guys, trying for the third time to get some feedback. Please tell me what you think. Thanks ! http://codepen.io/oblanao/full/BRQOPg/
jaizon
@jaizon
Apr 27 2017 16:14
blob
@oblanao on small scrrens
Bogdan
@oblanao
Apr 27 2017 16:14
@jaizon what resolution is that? seems very narrow screen
jaizon
@jaizon
Apr 27 2017 16:15
@oblanao I'm just resizing, but the h1 and ps are getting rouge
kirbyedy
@kirbyedy
Apr 27 2017 16:17
@oblanao once I start the timer, the bottom is stuck to the edge of the browser
jaizon
@jaizon
Apr 27 2017 16:17
going rogue
Alexander Domikov
@AlexanderDom
Apr 27 2017 16:17
almost there
Paradox5
@Paradox5
Apr 27 2017 16:20
Hello
Mates
cuylerconry
@cuylerconry
Apr 27 2017 16:22
Hello, I am currently trying to build my tribute page and everytime i add text it makes the whole page much longer i have no idea why. here is a link to my page https://codepen.io/Topsy/pen/RVKGJY
jaizon
@jaizon
Apr 27 2017 16:22
Hello
Gulsvi
@gulsvi
Apr 27 2017 16:24
@cuylerconry This line in your css will make every line of text 1800px tall: line-height: 1800px;
cuylerconry
@cuylerconry
Apr 27 2017 16:26
thank you
jaizon
@jaizon
Apr 27 2017 16:26
Also, he have set a lot of things in the body, pls, put all your css into the css section for better "human" reading
Gulsvi
@gulsvi
Apr 27 2017 16:26
Ninja'd
gulptech
@gulptech
Apr 27 2017 16:28
and class should not have have ()
Gulsvi
@gulsvi
Apr 27 2017 16:40
@jaizon Another thought - maybe use the card component in bootstrap for your "works" section? https://v4-alpha.getbootstrap.com/components/card/#kitchen-sink
Your images should be the same height and text the same length to make it look more uniform, but that could look more organized than how you have it now and it will be responsive.
jaizon
@jaizon
Apr 27 2017 16:43
I thought about the cards @SkyCoder01 , but I was having a lot of problems when I did that now I'm reworking this and my portfolio
Will Foster
@Will5592
Apr 27 2017 16:43
Maybe a silly question, but if you want to use flex box techniques in your css, do you have to link to something? Or is it just part of CSS3?
jaizon
@jaizon
Apr 27 2017 16:44
Isn't it bootstraps4?
Tom
@moT01
Apr 27 2017 16:46
@Will5592 its part of css
Will Foster
@Will5592
Apr 27 2017 16:47
great thanks
Gulsvi
@gulsvi
Apr 27 2017 16:47
@Will5592 If you want to support older browsers, you'll need a library. Otherwise, it's just a part of CSS, like Tom says.
Obviously would look better with images that are all the same size - they'd stretch to the edges and respond better. Same length of text would make the cards all the same height.
Will Foster
@Will5592
Apr 27 2017 16:52
@SkyCoder01 Awesome, thats a great site, thanks!
CamperBot
@camperbot
Apr 27 2017 16:52
will5592 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1204 | @skycoder01 |http://www.freecodecamp.com/skycoder01
jaizon
@jaizon
Apr 27 2017 16:52
@SkyCoder01 Thank you, I'll study the code right now. by the way, if you have any time give a feedback on my portfolio ;) it's my current task http://codepen.io/jaizon/pen/LyRjVQ
CamperBot
@camperbot
Apr 27 2017 16:52
jaizon sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1205 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Jorge
@OrangeKulture
Apr 27 2017 16:55
I wonder why they didn't use includes() on the explanation challenges for manipulating arrays
Gulsvi
@gulsvi
Apr 27 2017 16:55
@jaizon Off to a great start - you have a good eye for design. My portfolio is a constant work in progress and just looks like a template lol, yours looks very unique.
Jorge
@OrangeKulture
Apr 27 2017 16:55
it's definitely a good one to know
Gulsvi
@gulsvi
Apr 27 2017 16:55
.includes() is ES6 I think
Wish they at least taught some ES6 - some very convenient additions
Jorge
@OrangeKulture
Apr 27 2017 16:56
yeah dude, i use loops for everything :( im sure my code sucks tremendous amounts
Gulsvi
@gulsvi
Apr 27 2017 16:56
I just discovered .find() the other day... no need to loop at all lol https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
I've been doing it all wrong haha
jaizon
@jaizon
Apr 27 2017 16:57
@SkyCoder01 codepen is a pain, I'll host it on github again, it's hard to cross-match all the dependencies, as I work with a self-hosted template ofbootstraps
Tom
@moT01
Apr 27 2017 16:57
@jaizon looks good, ...that image is really big it lags a little for me when i resize my browser
maybe just me
jaizon
@jaizon
Apr 27 2017 16:58
@moT01 it has to be, otherwise it would be blurri for lg screens
Jorge
@OrangeKulture
Apr 27 2017 16:58
yeah .. sometimes i get pretty discouraged by the whole thing, i feel like i'm not getting things as fast as I should and then I discover a whole new set of things I'm supposed to know and don't ..
Gulsvi
@gulsvi
Apr 27 2017 16:58
@jaizon Yeah, it's difficult to export to codepen. Much easier the other way around.
I read the docs from top to bottom like a manual, but when something gets added later, I have no idea... I never saw .find() before, or just skimmed past it and forgot about it maybe.
Jorge
@OrangeKulture
Apr 27 2017 17:03
I just feel that maybe it would be good to have more examples and working challenges with javascript before you get to the algorithms ..
jaizon
@jaizon
Apr 27 2017 17:05
well, I know nothing about JS right now lol
Jorge
@OrangeKulture
Apr 27 2017 17:06
i thought i did know a little bit of the basics, but now I feel like i don't, at all .. it really is the opposite of motivating, whatever that word might be
mamun
@fsdmamun
Apr 27 2017 17:09
hi sky
Gulsvi
@gulsvi
Apr 27 2017 17:11
Hello @fsdmamun
jaizon
@jaizon
Apr 27 2017 17:12
@SkyCoder01 now it's on github, way better this way https://jaizon.github.io
Gulsvi
@gulsvi
Apr 27 2017 17:17
@jaizon Good work getting it deployed. I see a security issue - looks like you have a couple of http:// links that should be https://
jaizon
@jaizon
Apr 27 2017 17:19
@SkyCoder01 in which on e, portfolio or tribute?
Gulsvi
@gulsvi
Apr 27 2017 17:20
@jaizon Your github.io page
image.png
It's because of that placeholder image and, I think perhaps, your livereload script
jaizon
@jaizon
Apr 27 2017 17:21
I edit it on sublime text with livereloader and forgot to erase this script, lol
mamun
@fsdmamun
Apr 27 2017 17:25
blob
jaizon
@jaizon
Apr 27 2017 17:25
@SkyCoder01 the placeholder is from placehold.it, I cant get rid ofthis unless I change that
@fsdmamun now, I have to download the image from placehold.it and host it myself
Gulsvi
@gulsvi
Apr 27 2017 17:49
@jaizon can't you use https://placehold.it/250x250?
Or: https://dummyimage.com/250x250
But since it's temporary anyway, I wouldn't worry about it :)
jaizon
@jaizon
Apr 27 2017 17:50
@SkyCoder01 I've just hosted it myself
Gulsvi
@gulsvi
Apr 27 2017 17:50
That works too!
jaizon
@jaizon
Apr 27 2017 17:51
Isthere a site to placehold random images?
Or: http://source.unsplash.com/category/nature/250x250
Change "nature" to a different category - they have a bunch
KatSaldivar
@KatSaldivar
Apr 27 2017 17:53
I need some help with the Symmetric Difference Algorithm. It is passing all tests except for one. sym([1, 1, 2, 5], [2, 2, 3, 5], [3, 4, 5, 5]) should contain only three elements. and it is returning [1, 1, 4, 5] .

function sym(args) {
  //puts arguments into an array
  var argsArray= [].slice.call(arguments);
  //callback function to iterate through multiple arrays for reduce
  function symDiff(arr1, arr2){
    //creates array to store unique values
    var uniqueVals = [];
    for (var i=0; i<arr1.length; i++){
      //checks if the value isn't in arr2 and if it isn't in the unique values arr
      if(arr2.indexOf(arr1[i])<0 && uniqueVals.indexOf(arr1[i]<0)){
        //adds it to unique values if its unique
        uniqueVals.push(arr1[i]);
      }
    }

 arr2.forEach(function(item){
   if(arr1.indexOf(item)<0 && uniqueVals.indexOf(item)<0)
     uniqueVals.push(item);
 });
      return uniqueVals;
  }
  return argsArray.reduce(symDiff);
}
isn't arr2.indexOf(arr1[i])<0 && uniqueVals.indexOf(arr1[i]<0 supposed to solve this issue? why would the 1 show up twice?
Chris
@bestintown23
Apr 27 2017 18:00
how to make my <p> tag start from the far left of the page? http://codepen.io/bestintown23/pen/ybyOqb
jaizon
@jaizon
Apr 27 2017 18:03
@bestintown23 you mean indentation or the whole paragraph ?
Buhaianu Remus
@Remus432
Apr 27 2017 18:04
hey guys anyone here experienced with RegExr?
kirbyedy
@kirbyedy
Apr 27 2017 18:13
@bestintown23 well you have 100px padding on your <p> element... so... yeah... :D
Daniel Romero
@Ranacode
Apr 27 2017 18:14
Hey guys, in my browser , the image on my profile card that i'm building today is centered on all resolutions screens but in codepen it doesn't works, i have all the bootstrap cdn's i used on my local folder.
Don't know why actually the image is not centered
ok guys don't worry, i actually repair it xD
just overriding a css class
Will Foster
@Will5592
Apr 27 2017 18:37
Is it bad that I've just looked through my css, and out of 265 lines or so, I've not used a single class? Just specified elements and IDs
omarraza
@omarraza
Apr 27 2017 18:38
If I'm dynamically creating multiple HMTL <a> element via JS, can I not use CSS to style them?
Pagnito
@Pagnito
Apr 27 2017 18:49
i seem to have crashed my FCC page by making a infinite loop and now everytime i reopen that algorithm yhe code ia still there and it keeps crashing
i dont understand tho my loop has i<num and num = 10 as the argument in yhe call
Gulsvi
@gulsvi
Apr 27 2017 18:51
I think you'll have to reinstall windows to get it working again
:p
I've done that with codepen too many time :/ takes down the whole browser and I lose all my work...
@Will5592 It's a better practice to use classes, mainly so you can take your CSS from one project to the next one and reuse it.
(Other experts can correct me if I'm wrong about that)
Pagnito
@Pagnito
Apr 27 2017 18:55
@SkyCoder01 reinstall my whole OS????? whaaaat no way r u serious
i hope disable link works but i gotta rewrite it from my ohone reql quik
Gulsvi
@gulsvi
Apr 27 2017 18:59
lol
Pagnito
@Pagnito
Apr 27 2017 18:59
oh sweet the disabled link worked lol. that was scare
Sebastian Friedersen
@ElBastero
Apr 27 2017 19:02
Hey everyone, I al trying to make a Portfolio page but I am struggling with the navigation. Does codepen have any issues with bootstrap navigation?
Pagnito
@Pagnito
Apr 27 2017 19:11
@ElBastero r u sure ur cdn is right?
@ElBastero codepen seems to run bootstrap v4 now. but it doesnt seem to have that cdn in the menu...im nit sure what the deal is...but ive been going to v4 bootsyrap site to get the cdn
Carlos García de Castro
@garciadecastro
Apr 27 2017 19:28

Hey everyone, I have just started to bilt my portfolio but I have problem in Code Pen with bootstrap.
I have writen:

<div class "container-fluid">
<ul class="nav nav-pills">
<li>
<a href="#">Carlos de Castro</a>
</li>

</div>
I do not have any button
Gulsvi
@gulsvi
Apr 27 2017 19:31

@ElBastero
There are two versions of bootstrap - codepen gives you version 4 if you use the "Quick-add" menu in Settings. Free Code Camp teaches us version 3.
Version 3 Docs: http://getbootstrap.com/
Version 4 Docs: https://v4-alpha.getbootstrap.com

If you want to use version 3 in Codepen, click Settings and then click "CSS" and use this link: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

@garciadecastro It will look like a button when you add the 'active' class:
<div class "container-fluid">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#">Carlos de Castro</a>
    </li>
  </ul>
</div>
Carlos García de Castro
@garciadecastro
Apr 27 2017 19:35
@SkyCoder01 Thank! Your links works perfectly
CamperBot
@camperbot
Apr 27 2017 19:35
garciadecastro sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1207 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Chris
@bestintown23
Apr 27 2017 19:50
how can i move the wording on my home page down to the center of the left side. http://codepen.io/bestintown23/pen/ybyOqb
Chris
@bestintown23
Apr 27 2017 19:56
how can i move my <p> element directly down from where it is? http://codepen.io/bestintown23/pen/ybyOqb
Waqas Abbasi
@Waqas909
Apr 27 2017 20:12
For the pomodoro clock Do I need a sound or something to complete the challenge?
Ken Haduch
@khaduch
Apr 27 2017 20:30
@Waqas909 - the description of the challenge says something like the timer "goes off" - so I think that it means a sound, and I think that the example uses a sound at the end of each period.
Khoa Le
@Zacele
Apr 27 2017 20:38
here is the pen for the wikipedia Clone of mine
why in the console.log the value that return to me is an array with HTTM elements inside it but not the actual data that we get from the API
I really don't get it
Waqas Abbasi
@Waqas909
Apr 27 2017 20:41

Hello guys!
I think I've finally finished my Pomodoro Clock!

Please Have a look and provide feedback!
Any Feedback is appreciated :-)
http://codepen.io/Waqas909/full/evQvog/

The looks aren't the flashiest but my aim was mainly the functionality
graciolli-f
@graciolli-f
Apr 27 2017 20:49
Hi guys, question: I'm trying to call the Open Weather API from CodePen and it won't let me call an http because codepen is https, but there is no https version of OpenWeather app... how do I resolve this conflict?
Khoa Le
@Zacele
Apr 27 2017 21:00
just use http://yourcodepenurl @graciolli-f
instead of https
having a problem is that my output is a [object HTMLInputElement] instead of the value
jaizon
@jaizon
Apr 27 2017 21:01
Gratz !
Khoa Le
@Zacele
Apr 27 2017 21:01
don't know how to fix it
Gulsvi
@gulsvi
Apr 27 2017 21:05
@graciolli-f Weather Underground, Dark Sky, and Apixu are all good weather APIs that support HTTPS for free. I've used both Weather Underground and Dark Sky. Weather Underground is probably the easier of the two to figure out.
@Zacele Can you post your codepen link - lots of reasons why that might be happening.
Pagnito
@Pagnito
Apr 27 2017 21:07
@SkyCoder01 one challenge away from common multiples that u were talking about and wondering about what u were saying hehe
Gulsvi
@gulsvi
Apr 27 2017 21:08
nvm @Zacele I see it above :p
haha good luck @Pagnito :)
graciolli-f
@graciolli-f
Apr 27 2017 21:08
Thank you, @SkyCoder01 - I'll try that.
CamperBot
@camperbot
Apr 27 2017 21:08
graciolli-f sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1210 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Khoa Le
@Zacele
Apr 27 2017 21:08
@SkyCoder01 ok man, please take a look, it drive me crazy for the last 2 hours
Pagnito
@Pagnito
Apr 27 2017 21:08
@SkyCoder01 thanks hehe
CamperBot
@camperbot
Apr 27 2017 21:08
pagnito sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1211 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 27 2017 21:10
@Zacele Add console.log(searchValue) after you set that variable to see why you're getting that as your search result:
var searchValue = $('searchvalue').val();
console.log(searchValue);
Might help you debug it better - the error is an easy fix
jaizon
@jaizon
Apr 27 2017 21:16
Sky is our hero lol
caseym94
@caseym94
Apr 27 2017 21:30
hello, I'm struggling to get these 2 boxes aligned
https://codepen.io/caseym/pen/xdqKBQ
I got it, float:left; worked
brandon-louis
@brandon-louis
Apr 27 2017 21:34
Anyone done the twitch tv project, what api did you use, still can't figure out how to get the right one. It'll work really quickly then throw up an error after a while
Tom
@moT01
Apr 27 2017 21:36
@brandon-louis
https://wind-bow.glitch.me/twitch-api/channels/freecodecamp/
https://wind-bow.glitch.me/twitch-api/streams/freecodecamp/
https://wind-bow.glitch.me/twitch-api/users/freecodecamp/
brandon-louis
@brandon-louis
Apr 27 2017 21:38
@moT01 looks like they work, thank you.
CamperBot
@camperbot
Apr 27 2017 21:38
brandon-louis sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 644 | @mot01 |http://www.freecodecamp.com/mot01
jump020305
@jump020305
Apr 27 2017 23:34

@all

  • I had working code in react class
  • but when I changed to React.Component the whole UI is breaking.
  • debugged the code I think problem will be this function onSelect.
  • since if I give console statements its not printing anything.
  • can you tell me how to fix it.
  • i even checked the css it is same.
    working fiddle
    not working fiddle http://jsfiddle.net/b4L6kyg4/64/
    providing code below http://jsfiddle.net/b4L6kyg4/41/

class Accordion extends React.Component {
constructor(props) {
super(props);
this.state = { selected: this.props.selected };
this.onSelect = this.onSelect.bind(this);
this.enhanceSection = this.enhanceSection.bind(this);

    //this.child.props = { id: child.props.id };

}

enhanceSection(child) {

//var child;
//var props;

console.log("enhanceSection");

//debugger;


var selectedId = this.state.selected,
       id = child.props.id;

    return React.cloneElement(child, {
        key: id,
        // private attributes/methods that the Section component works with
        _selected: id === selectedId,
        _onSelect: this.onSelect
    });

}

onSelect(id) {
console.log("onSelect");

    if (this.state.selected === id) {
      console.log("onSelect if");
      console.log("his.state.selected---->" + this.state.selected);
      this.setState({selected: ""});
    } else {

        console.log("onSelect else");

        this.setState({selected: id});
    } 

}

render() {
console.log("render");
//debugger;

var children = React.Children.map(
        this.props.children, this.enhanceSection);

return (
  <div className="accordion">
    <p> testing </p>
      {children}
  </div>
);

}

}

class sectionAccordion extends React.Component {

onSelect() {
console.log("onSelect");
debugger;

this.props._onSelect(this.props.id);

}

render() {
console.log("render");

    console.log("accordion / the Accordion Section component");
    var className = 'accordion-section' + (this.props._selected ? ' selected' : '');

    return (
        <div className={className}>
            <h3 onClick={this.onSelect}>
                {this.props.title}
            </h3>

                            <div className="up-arrow"></div>



            <div onClick={this.onSelect} className="body">
                {this.props.children}
            </div>
        </div>
    );

}

}

React.render((

<div>

    <div className="accordionTesting">
        <Accordion selected="">
          <sectionAccordion title="Section 1" id="1">
              Section 1 content
          </sectionAccordion>
          <sectionAccordion title="Section 2" id="2">
              Section 2 content
          </sectionAccordion>
          <sectionAccordion title="Section 3" id="3">
              Section 3 content
          </sectionAccordion>
      </Accordion>
    </div>

    <div className="accordionTesting">
        <Accordion selected="">
          <sectionAccordion title="Section 3" id="4">
              Section 3 content
          </sectionAccordion>
          <sectionAccordion title="Section 4" id="5">
              Section 4 content
          </sectionAccordion>
          <sectionAccordion title="Section 5" id="6">
              Section 5 content
          </sectionAccordion>
        </Accordion>
    </div>

  </div>

), document.getElementById('example'));