These are chat archives for FreeCodeCamp/HelpFrontEnd

25th
Feb 2017
iso
@iso1048
Feb 25 2017 00:40
blob
why does the spacing between the contact methods not increase?
Johnny
@jtan3
Feb 25 2017 00:51
@gothamknight try margin-top or bottom
iso
@iso1048
Feb 25 2017 00:59
@jtan3 didnt work. Do you know why it isnt?
Vered Rekanati
@veredrec
Feb 25 2017 00:59
@thodorisanta Maybe try to code it in a way that it can calculate more than one operation and two numbers. From what I saw, there is only the option to have one operation and two numbers.
@gothamknight can you send the link to codepen?
Oh. why is the contact, portfolio, about staggered?
Vered Rekanati
@veredrec
Feb 25 2017 01:03
@gothamknight I'm not sure I understand your question. What are you trying to do?
iso
@iso1048
Feb 25 2017 01:05
Im trying to do two things. 1. increasing spacing between email, freecodecamp, facebook. 2. understand why contact,portfolio subheading are appearing in a diagonal line rather than being vertically aligned together.
Vered Rekanati
@veredrec
Feb 25 2017 01:07
@gothamknight for the first thing - do you mean the <h3>? If you do, try to give <h3> in the css width: 100% and margin: 0 auto; so it would center all af them
iso
@iso1048
Feb 25 2017 01:08
I mean the h2
shall i try what you said on the h2?
Vered Rekanati
@veredrec
Feb 25 2017 01:08
@gothamknight for the second one - you can give your <h6> margin-bottom: 20px or something like that, or give it a line-height of 200% or something like that, play with it
@gothamknight ah, you mean in the menu? it looks fine to me. I don't see the diagonal... let me check again
Johnny
@jtan3
Feb 25 2017 01:12
@gothamknight you mean when you resize to mobile the navbar doesn't stack/
Vered Rekanati
@veredrec
Feb 25 2017 01:15
@gothamknight oh, on a small screen it is diagonal, now I see... :) You can set the size in your code to other sizes in Bootstrap. so instead of having only "col-md-2" set one to "col-sm-XXX" as well.
Johnny
@jtan3
Feb 25 2017 01:16
@gothamknight i think in your html you have text-right/center/left that might be why it staggers
iso
@iso1048
Feb 25 2017 01:21
Thanks for your help @jtan3 and @veredrec. i solved both issues
CamperBot
@camperbot
Feb 25 2017 01:21
gothamknight sends brownie points to @jtan3 and @veredrec :sparkles: :thumbsup: :sparkles:
:cookie: 307 | @veredrec |http://www.freecodecamp.com/veredrec
:cookie: 318 | @jtan3 |http://www.freecodecamp.com/jtan3
Jakumozo
@Jakumozo
Feb 25 2017 02:12
could someone help me? It seems the variables are supposed to be global, although it does not seem to be like that... when I want to show the values I need, it cant get it
http://codepen.io/Kromel/pen/ryaMjr
Moisés Man
@moigithub
Feb 25 2017 02:14
@Jakumozo problem is ajax calls are asynchronous.. by the time the success callback is called.. mst probably ur loop will already finished.. soo i value is no longer the same as when the ajax was called
Jakumozo
@Jakumozo
Feb 25 2017 02:20
@moigithub is there something what could wait for a function to be completed? Or maybe do functions one by one?
Eberechi Akoma
@EAkoma
Feb 25 2017 02:28
hello guys! I am having a tiny issue with my weather app. When I click the temperature to change from Celsius to Fahrenheit ... my onclick won't fire on the first click... but it works after that? I can't find the issue in my onclick function.
Moisés Man
@moigithub
Feb 25 2017 02:29
@Jakumozo one way to make it work is keeping i value on a "local scope" using functions
ie:
for (var i=0; i<len; i++){ 
   doSomething( i );   //pass i value
function doSomething( i ) {
   // i will be on the function scope
}
Jakumozo
@Jakumozo
Feb 25 2017 02:30
@moigithub thanks, I will try to do sth
CamperBot
@camperbot
Feb 25 2017 02:30
jakumozo sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 2742 | @moigithub |http://www.freecodecamp.com/moigithub
Ben Carp
@carpben
Feb 25 2017 02:31
Is this channel also a space for feedback? If so here is my Wikipedia viewer pen: https://codepen.io/bencarp/full/NdQNJr/
Tom
@moT01
Feb 25 2017 02:33
could use a little responsiveness
when you shrink the window the stuff just gets cut off
Manuel Almeida
@netstudenton
Feb 25 2017 02:33
Hello I"ve just finished Front-End stack !! Finally !!!
Tom
@moT01
Feb 25 2017 02:34
but it looks solid, ...seems to be working properly, and meets all the project requirements that i can tell
@netstudenton nice work
M Denise
@colemanallme
Feb 25 2017 02:35
@netstudenton Congrats
Tom
@moT01
Feb 25 2017 02:36
how long did it take ya?
Eberechi Akoma
@EAkoma
Feb 25 2017 02:38
@EAkoma
hello guys! I am having a tiny issue with my weather app. When I click the temperature to change from Celsius to Fahrenheit ... my onclick won't fire on the first click... but it works after that? I can't find the issue in my onclick function.
http://codepen.io/EbereAko/full/oBKqKj/
Moisés Man
@moigithub
Feb 25 2017 02:41
@EAkoma ur initial value is set to C format
and ur flag is true...
soo when u "click" it calculates to C format again...
change starting value var flag= false
Manuel Almeida
@netstudenton
Feb 25 2017 02:43
@moT01 2 month with 3 week of break (say laziness)
Tom
@moT01
Feb 25 2017 02:45
yea, i spent like 6 months on it
two months is really fast
@netstudenton
ESLMiguel
@ESLMiguel
Feb 25 2017 02:45
woah 2 months?
@netstudenton did you have previous coding experience?
Manuel Almeida
@netstudenton
Feb 25 2017 02:47
@ESLMiguel @moT01 I have bachelor degree on Computer Science
ESLMiguel
@ESLMiguel
Feb 25 2017 02:47
@netstudenton Ah ok makes sense now
Ken Haduch
@khaduch
Feb 25 2017 02:53
@netstudenton - congratulations!
Prakash Shiwakoti
@pshiwakoti1
Feb 25 2017 02:56
Hello guys I am on Twitchtv JSON API challenge
What does this Twitch TV does
Im not clear conceptually
although I read the user stories and watched the video
Tom
@moT01
Feb 25 2017 02:58
@pshiwakoti1 use the twitch api to display the channels, and if theyre online, offline, or do not exist
theres three different urls to get info for the channels
Prakash Shiwakoti
@pshiwakoti1
Feb 25 2017 02:58
ok
twitch basically means live videos channels?
Nitin Chandran Nair
@NitinNair89
Feb 25 2017 02:59
Check the Twitch TV website @pshiwakoti1 You will get an idea
Prakash Shiwakoti
@pshiwakoti1
Feb 25 2017 02:59
ok
thanks
the link to Free Code Camp doesn't load the page. I can't tell what it does
Nitin Chandran Nair
@NitinNair89
Feb 25 2017 03:09
twitch.tv
lmlicerio
@lmlicerio
Feb 25 2017 03:49
Just starting my tribute page. Im excited
Ben Carp
@carpben
Feb 25 2017 04:23
Quite a strange problem - In this example https://codepen.io/freeCodeCamp/full/Myvqmo , when I click the Free Code camp channel, it doen't complete loading. But when I open a new browser and copy the URL it loads. Any idea what is going on?
It only happnes in Google Chrome, even after reloading.
Jakumozo
@Jakumozo
Feb 25 2017 04:27
Could someone have a look at my code? Can it work this way? As I noticed in the challenge it just proceeds the information when the page is loaded and then just shows or hides the streams? http://codepen.io/Kromel/pen/ryaMjr
Chris Cullen
@123xylem
Feb 25 2017 04:55
Im trying to send a message that is word X the number after word... BUt the for loop doesnt seem to recognise the number or work at all. What am i missing?!!
app.get("/repeat/:word/:num",function(req,res){
    var num=req.params.num;                   //num = the num value
    var word=req.params.word;                //word is the word value
    var number=parseInt(num);                 //i change num from string to int
    for(i=0;i<number.length;i++){                //for loop goes as long as num length
word+=  word;    }                                            //and word gets word added to it as many times as num says
Andrew Nichols
@frenata
Feb 25 2017 05:05
word += word is only mutating your local copy
req.params.word will not be changed at all
Moisés Man
@moigithub
Feb 25 2017 05:05
number dont have length property
Andrew Nichols
@frenata
Feb 25 2017 05:06
also that, just say i<number
as a sidenote, for(i=0 ... you just leaked a global variable i. use let i=0
John Alcher
@alchermd
Feb 25 2017 05:43

Hey fellas, I'm looking for some advice. Basically, I have two divs on top of each other.

<div class="div1">
   <div class="div2">I'm hidden by default. Hover to show me</div>
</div>

I've already written a script that when div1 is hovered:
1.) Changes the size of div1to make a "floating" effect.
2.) Makes div2 appear.

But the problem is that once div2 is visible, hovering over it (div2) stops the floating animation for div1. I'm wondering if any of you guys know a way to make div2 "unhoverable".

Thanks!

Jackson
@jacksonbrim
Feb 25 2017 06:05
Hi all. for the personal portfolio page are we supposed to know how to make the navigation buttons activate / link to another part on the page?
DJ
@qualitymanifest
Feb 25 2017 06:11
@jacksonbrim you're probably going to have to do research for every project
Jackson
@jacksonbrim
Feb 25 2017 06:11
Yeah, I did this a year ago and recognize that. I'm just going through and refreshing myself. Going to go for it again.
DJ
@qualitymanifest
Feb 25 2017 06:13
@jacksonbrim basically what you do is you give the element you're trying to link to an ID, and the link in the navbar a href attribute that points to that ID
Jackson
@jacksonbrim
Feb 25 2017 06:14
@qualitymanifest ahh thanks for that. I'm trying to use materialize css instead of bootstrap.
CamperBot
@camperbot
Feb 25 2017 06:14
jacksonbrim sends brownie points to @qualitymanifest :sparkles: :thumbsup: :sparkles:
:star2: 1520 | @qualitymanifest |http://www.freecodecamp.com/qualitymanifest
Jackson
@jacksonbrim
Feb 25 2017 06:15
Probably would've been easier to just use the bootstrap stuff.
DJ
@qualitymanifest
Feb 25 2017 06:15
i haven't used materialize, but that aspect - linking within the same page - will be the same
Jackson
@jacksonbrim
Feb 25 2017 06:16
@qualitymanifest thanks. I'm a bit rusty.
CamperBot
@camperbot
Feb 25 2017 06:16
jacksonbrim sends brownie points to @qualitymanifest :sparkles: :thumbsup: :sparkles:
:warning: jacksonbrim already gave qualitymanifest points
DJ
@qualitymanifest
Feb 25 2017 06:16
np :+1:
rugano
@rugano
Feb 25 2017 07:35
Hello campers.Am i supposed to use Pug inHTML in Personal portfolio website project?
How should i set the CSS in the editor to work properly for my personal portfolio website?
Sorin Ruse
@sorinr
Feb 25 2017 07:39
@rugano take a look at pen settings html preprocessors dropdown :)
rugano
@rugano
Feb 25 2017 07:41
ok @sorinr then i do what next?
Sorin Ruse
@sorinr
Feb 25 2017 07:42
@rugano whatever u want coz u r free to use any library you want in your projects. don't think you r forced to use one lib or another
@rugano go for plain html and css first
rugano
@rugano
Feb 25 2017 07:48
ok,will css and html produce the required results excluding jQuery.because i have deleted my project two times when i failed to get the desired outcome?
do i need jQuery for my personal portfolio website project?
rugano
@rugano
Feb 25 2017 07:59
@alchermd feel free to read about CSS hover at www.3schools.com.
Do i require jQuery for personal portfolio website project?
Ben Carp
@carpben
Feb 25 2017 08:01
hi! In the Wikipedia task, I'm trying to either justify either center the control buttons, using this bootstrap classes:
"btn-group-justified", "center-block", "btn-group-centered".
unfotunately it does not succeed. Pen: http://codepen.io/bencarp/pen/WpbEoj
Any suggestions? Thanks!
rugano
@rugano
Feb 25 2017 08:05
good work
sahilmalhotra24
@sahilmalhotra24
Feb 25 2017 08:08
can anyone tell me how to upload Project in freecodecamp ?
Ben Carp
@carpben
Feb 25 2017 08:29

hi! In the Wikipedia task, I'm trying to either justify either center the control buttons, using this bootstrap classes:
"btn-group-justified", "center-block", "btn-group-centered". unfotunately it does not succeed.
Also, I'm trying to center the <main> element, using this code:

<main class="center-block">
main {  max-width: 1100px;}

Pen: http://codepen.io/bencarp/pen/WpbEoj
Any suggestions? Thanks!

Ayush Bahuguna
@relentless-coder
Feb 25 2017 08:56
Hi, I need help with something, I am changing the position of li items dynamically. I am manipulating the value of 'left' to move the items, which is working great, the problem is that when I am trying to retrieve that value using this code var limit = $('.plans-select > ul > li').css('left') the value of limit is always zero, even though the value of left is changing
Spyrantis Theodoros
@thodorisanta
Feb 25 2017 09:04

@veredrec "Maybe try to code it in a way that it can calculate more than one operation and two numbers. From what I saw, there is only the option to have one operation and two numbers."

isnt that how i did it?

Joel
@okmarq
Feb 25 2017 09:13
Can someone help me with this code?
i'm trying to generate 4 random non-repeating numbers but so far no luck
what am i doing wrong here
thanks
buiphuking
@buiphuking
Feb 25 2017 09:40
anyone good at code theme wordpress, i want to ask something?, plz hep me
René
@RenevandenHeuvel
Feb 25 2017 09:56

Code

<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md8 col-md-offset-2">

Question

What does this code mean? I know about the grid system in bootstrap, but can't reason how the tribute page behaves because of it.

My codepen

http://codepen.io/FccRene/pen/EWxMZb

Linus
@nusli
Feb 25 2017 10:05
I'd like to use some of my own pictures for a project. Is there any upload service you can recommend?
Justin Jones
@koreanjones
Feb 25 2017 10:10
hello people can someone take a look at my quote machine. i still need to add the tweet function http://codepen.io/KoreanJones/pen/RpNpdo is this good so far?
Andro Castor
@AndroCastor
Feb 25 2017 10:10
@nusli Actuaclly, you can use github
Joel
@okmarq
Feb 25 2017 10:18
who knows how to generate 4 random non-repeating numbers
Andrew Nichols
@frenata
Feb 25 2017 10:18
A little bit of a contradiction, IMO, since random numbers might repeat.
But you could just generate random numbers and discard them if they match what you already have
Andro Castor
@AndroCastor
Feb 25 2017 10:20
I'm working on the portfolio challenge, trying out different things. I've fixed the background, but when I add a row-col suddenly it adds a horizontal scrollbar.. but why?
Andrew Nichols
@frenata
Feb 25 2017 10:23
function getRandom() {....}

function getUniqueRandoms(n){
  let arr = [];
  for(let i=0;i<n;i++){
    while(let rand = getRandom()){
       if(!arr.includes(rand) {
         arr.push(rand);
         break;
       }
    }
}}
....something along those lines @okmarq
ESLMiguel
@ESLMiguel
Feb 25 2017 10:59
Can someone check if my code is asking for your location?
http://s.codepen.io/nthd3gr33/debug/JEgddr/DqADdEJoQpKA
Andrew Nichols
@frenata
Feb 25 2017 11:02
Not on chrome, which disables geolocation on HTTP
FF it works fine.
ESLMiguel
@ESLMiguel
Feb 25 2017 11:02
ok thanks
Andrew Nichols
@frenata
Feb 25 2017 11:03
You should probably at least have a fallback if geolocation fails. Or look into how to get it working via HTTPS
ESLMiguel
@ESLMiguel
Feb 25 2017 11:05
thanks for the pointers @frenata
CamperBot
@camperbot
Feb 25 2017 11:05
eslmiguel sends brownie points to @frenata :sparkles: :thumbsup: :sparkles:
:cookie: 393 | @frenata |http://www.freecodecamp.com/frenata
Andro Castor
@AndroCastor
Feb 25 2017 11:14
Can someone tell me how to remove the classic blue url-underscore line in the navigation bar when hovering on the link?
https://codepen.io/AndroCastor/pen/RpNLrV
Joel
@okmarq
Feb 25 2017 11:15
thanks @frenata i'll check it out
CamperBot
@camperbot
Feb 25 2017 11:15
okmarq sends brownie points to @frenata :sparkles: :thumbsup: :sparkles:
:cookie: 394 | @frenata |http://www.freecodecamp.com/frenata
René
@RenevandenHeuvel
Feb 25 2017 11:24

Hi guys, can anyone help me:

Code

<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md8 col-md-offset-2">

Question
What does this code mean? I know about the grid system in bootstrap, but can't reason how the tribute page behaves because of it.

h1tag
@h1tag
Feb 25 2017 11:25
@AndroCastor
a:hover {
  /* Applies to links under the pointer */
  text-decoration:  none;}
Andro Castor
@AndroCastor
Feb 25 2017 11:26
Aw dammit, I am blind.. I just saw I remembered it in the li a { section.. thanks @fortMaximus
CamperBot
@camperbot
Feb 25 2017 11:26
androcastor sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 467 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Andro Castor
@AndroCastor
Feb 25 2017 11:29
@RenevandenHeuvel The code changes behavior depending on the size of the screen, so when on small screens it goes all 12 rows, when on small it uses 10 rows offset by 1 row, on medium 8 rows offset by 2 rows..
sorry, when on xtrasmall it goes 12 rows, of course
xsmall is phone-ish, small is tablets, md & lg desktops,
Andrew Nichols
@frenata
Feb 25 2017 11:36
The mess that is the class definition of that div is a good example of my problem with bootstrap. :angry:
h1tag
@h1tag
Feb 25 2017 11:38
@frenata how can you get the same result with flexbox or a better framework?
Andrew Nichols
@frenata
Feb 25 2017 11:39
I'm not really a designer, so it's not really my problem. I know there exist cleaner patterns though.
Presentation should not be mixed with content though.
René
@RenevandenHeuvel
Feb 25 2017 11:40
@frenata, off course i see, but what does the offset-1, or offset -2 mean?
@frenata thx, i read it up. The offset is when you make the screen smaller, it the row can be reduced by one if I am right.
CamperBot
@camperbot
Feb 25 2017 11:44
renevandenheuvel sends brownie points to @frenata :sparkles: :thumbsup: :sparkles:
:cookie: 396 | @frenata |http://www.freecodecamp.com/frenata
René
@RenevandenHeuvel
Feb 25 2017 11:48

Challenge: "Build a Personal Portfolio Webpage"

Question: What are your experiences with these kinds of exercises? The instruction is not to look at the code. But there is so much new in this code. There is no way I could build this app on my own.

evanworth
@evanworth
Feb 25 2017 11:50
I'm trying to make a simple well and nothing is happening... is there something that I could be missing in the stylesheet? maybe how i "connect" to bootstrap?
h1tag
@h1tag
Feb 25 2017 11:54
@RenevandenHeuvel like?
@evanworth try this version of Bootstrap: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7
h1tag
@h1tag
Feb 25 2017 11:56
@RenevandenHeuvel yea, I read the challenge name above. But I mean what things do you find new in this challenge/code?
Andro Castor
@AndroCastor
Feb 25 2017 12:03
@RenevandenHeuvel There is a reason the Front End Development Projects is listed at 50 hours. It is a massive task, that takes a lot of research on your own.
I've just started on it like you, so I feel your pain
that requires a lot of research on your own*
René
@RenevandenHeuvel
Feb 25 2017 12:04
@fortMaximus those are to many things to say. Half of the code in html / css and javascript is new to me
Andro Castor
@AndroCastor
Feb 25 2017 12:04
Only half..?! Shite, now I feel stupid
ESLMiguel
@ESLMiguel
Feb 25 2017 12:06
@RenevandenHeuvel ive watched a lot of tutorials on youtube on html, css and js while making my projects
to be expected if you are new at coding
René
@RenevandenHeuvel
Feb 25 2017 12:07
@AndroCastor I think I landed in this task because I had reconfigered windows and the cookies weren't saved. So I couldn't continu where I was befor in the challenges. I must have accidentally clicked somewhere wich led me to this task. I haven't been here for 50 hours yet, so I am going to check the schedule again to see where I should continue with the tasks.
Andro Castor
@AndroCastor
Feb 25 2017 12:07
@fortMaximus Using google I ended up here to start out with the cool top menu bar
René
@RenevandenHeuvel
Feb 25 2017 12:07
@AndroCastor @ESLMiguel @fortMaximus thx
CamperBot
@camperbot
Feb 25 2017 12:07
renevandenheuvel sends brownie points to @androcastor and @eslmiguel and @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 468 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
:cookie: 121 | @androcastor |http://www.freecodecamp.com/androcastor
:cookie: 320 | @eslmiguel |http://www.freecodecamp.com/eslmiguel
ESLMiguel
@ESLMiguel
Feb 25 2017 12:08
@RenevandenHeuvel if you want some suggestions for beginner tutorials on youtube, let me know
Andro Castor
@AndroCastor
Feb 25 2017 12:08
@fortMaximus Oh no, thats not what I meant.. Youre not 50 hours in.. that part of the map is estimated to take 50 hours..
So like 25 hours for the tribute and 25 for the portfolio.. something like that
h1tag
@h1tag
Feb 25 2017 12:09
@AndroCastor yea, but they gave you the basics and the other stuff you to learn by yourself
Andro Castor
@AndroCastor
Feb 25 2017 12:10
Oh sorry, that was supposed to be to René :smile:
But I agreee
I am psyked to just be this far into the portfolio https://codepen.io/AndroCastor/full/RpNLrV
Loooong way ahead of me
ESLMiguel
@ESLMiguel
Feb 25 2017 12:12
any feedback on the design of my weather app? too simple?
http://codepen.io/nthd3gr33/pen/JEgddr?editors=1111
Andro Castor
@AndroCastor
Feb 25 2017 12:12
Hang in there @RenevandenHeuvel
René
@RenevandenHeuvel
Feb 25 2017 12:12
@ESLMiguel Well I started end november with coding about 15 hourse a week, but I still am a beginner. Always good to have some advice for tutorials. thx
CamperBot
@camperbot
Feb 25 2017 12:12
renevandenheuvel sends brownie points to @eslmiguel :sparkles: :thumbsup: :sparkles:
:warning: renevandenheuvel already gave eslmiguel points
ESLMiguel
@ESLMiguel
Feb 25 2017 12:13
@RenevandenHeuvel I'm still very new myself :smirk_cat:
René
@RenevandenHeuvel
Feb 25 2017 12:13
@AndroCastor yes i saw it in the map, I am supposed to make this assignment. I will just study the code and see where I can give it an practical approach thx
CamperBot
@camperbot
Feb 25 2017 12:13
renevandenheuvel sends brownie points to @androcastor :sparkles: :thumbsup: :sparkles:
:warning: renevandenheuvel already gave androcastor points
René
@RenevandenHeuvel
Feb 25 2017 12:13
@ESLMiguel Goodluck! :)
ESLMiguel
@ESLMiguel
Feb 25 2017 12:14
@RenevandenHeuvel did you already make the tribute page?
h1tag
@h1tag
Feb 25 2017 12:18
@RenevandenHeuvel also, keep in mind that you don't have to perfect it like the example given to you, especially if you're still a beginner. You can do the best you can now, and then you keep adding to it, when you learn stuff later
René
@RenevandenHeuvel
Feb 25 2017 12:24
@ESLMiguel yes, i did that one yesterday.
@fortMaximus didn't knew that, I thought it was an assignment that had to be finished. Ok, I starting on it now. thx
CamperBot
@camperbot
Feb 25 2017 12:25
renevandenheuvel sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:warning: renevandenheuvel already gave fortmaximus points
h1tag
@h1tag
Feb 25 2017 12:26
@RenevandenHeuvel yea, you have to finish it to get the certificate
Andro Castor
@AndroCastor
Feb 25 2017 12:26
@RenevandenHeuvel Just complete the bare essentials.. and return to it later to perfect it
René
@RenevandenHeuvel
Feb 25 2017 12:27
@AndroCastor @fortMaximus Yes eventually, but I understand I have some some, so I can go on and later finish the taks after acquired skills in the next challenges
@AndroCastor @fortMaximus (understand i have some space)
h1tag
@h1tag
Feb 25 2017 12:28
but what I mean you can build a project that passes the requirements and if you don't like something in it like the style or some functionality, you can edit it or add it to later
I didn't mean to skip it
René
@RenevandenHeuvel
Feb 25 2017 12:38
I am working on this task without skipping it, I just don't understand why there is so much in it wich i didn't learn about here. At same time that is also making it a real challenge
ESLMiguel
@ESLMiguel
Feb 25 2017 12:41
Can someone check if the temp, weather icon, location, and weather description are showing up in the boxes (please use firefox)
http://codepen.io/nthd3gr33/pen/JEgddr?editors=1111
Nadeem Gorsi
@DimGujjar
Feb 25 2017 12:41

Hi, Campers
Have any body made any plan or strategy about finishing the camp.
Like what number of challenges required to finish the camp or {this} certificate.

I want to finish at least 1 certification in one year ..
How many daily point do I need to code?

ESLMiguel
@ESLMiguel
Feb 25 2017 12:42
Just want to make sure i have everything working before i switch out geolocation
@DimGujjar it depends on if you have prior experience coding and how much time you have to focus on FCC
Nadeem Gorsi
@DimGujjar
Feb 25 2017 12:47
@ESLMiguel I have some experience in coding and doing a job at a small software house.
I'm intermediate web developer in HTML CSS JS JQuery and php.
Moisés Man
@moigithub
Feb 25 2017 12:48
if u already know.. probably first cert in 1 or 3 months 2-4hour day
ESLMiguel
@ESLMiguel
Feb 25 2017 12:48
then you can do the front end probably fairly fast
Nadeem Gorsi
@DimGujjar
Feb 25 2017 12:49
Thanks @moigithub @ESLMiguel :)
CamperBot
@camperbot
Feb 25 2017 12:49
dimgujjar sends brownie points to @moigithub and @eslmiguel :sparkles: :thumbsup: :sparkles:
:cookie: 321 | @eslmiguel |http://www.freecodecamp.com/eslmiguel
:star2: 2743 | @moigithub |http://www.freecodecamp.com/moigithub
Nadeem Gorsi
@DimGujjar
Feb 25 2017 12:52
@camperBot how can I send brownie points to someone.
ESLMiguel
@ESLMiguel
Feb 25 2017 12:57
you already did
@DimGujjar you just say 'thanks' and tag someones name
like this - thanks @DimGujjar
CamperBot
@camperbot
Feb 25 2017 12:57
eslmiguel sends brownie points to @dimgujjar :sparkles: :thumbsup: :sparkles:
:cookie: 33 | @dimgujjar |http://www.freecodecamp.com/dimgujjar
Brandon
@bd1887
Feb 25 2017 12:58
@ESLMiguel He just conned you into giving him free brownie points by getting you to tag him while saying thanks
CamperBot
@camperbot
Feb 25 2017 12:58
bd1887 sends brownie points to @eslmiguel :sparkles: :thumbsup: :sparkles:
:cookie: 322 | @eslmiguel |http://www.freecodecamp.com/eslmiguel
Nadeem Gorsi
@DimGujjar
Feb 25 2017 13:03
thanks @camperbot thanks @bd1887 @ESLMiguel
CamperBot
@camperbot
Feb 25 2017 13:03
dimgujjar sends brownie points to @camperbot and @bd1887 and @eslmiguel :sparkles: :thumbsup: :sparkles:
:warning: dimgujjar already gave eslmiguel points
:star2: 3035 | @camperbot |http://www.freecodecamp.com/camperbot
:cookie: 344 | @bd1887 |http://www.freecodecamp.com/bd1887
ESLMiguel
@ESLMiguel
Feb 25 2017 13:25
I am missing something really simple here. Can someone look at line 4 of my JS code. The locationRequest var is not showing up as valid for some reason. Is it possibly because I am doing 2 JSON calls?
http://codepen.io/nthd3gr33/pen/JEgddr?editors=1111
Marine
@MLCrepe
Feb 25 2017 13:31
@ESLMiguel kinda confused why you're using XMLHttpRequest
ESLMiguel
@ESLMiguel
Feb 25 2017 13:31
i am not using jQuery
Just pure vanilla JS
Marine
@MLCrepe
Feb 25 2017 13:33
@ESLMiguel ah yh my bad didn't notice. Looking into it
ESLMiguel
@ESLMiguel
Feb 25 2017 13:34
@MLCrepe thanks
CamperBot
@camperbot
Feb 25 2017 13:34
eslmiguel sends brownie points to @mlcrepe :sparkles: :thumbsup: :sparkles:
:cookie: 277 | @mlcrepe |http://www.freecodecamp.com/mlcrepe
alpox
@alpox
Feb 25 2017 13:36
@ESLMiguel just for information: there is a new api on the way for vanilla javascript for such requests. Browser compability is there for all newest major browsers, but not older ones:
ESLMiguel
@ESLMiguel
Feb 25 2017 13:39
@alpox woah cool
@alpox thanks!
Marine
@MLCrepe
Feb 25 2017 13:50
@MLCrepe seems you found your answer on another channel ? Sorry for not being much help
ESLMiguel
@ESLMiguel
Feb 25 2017 13:50
I have made some progress, yes
its all good :)
Marine
@MLCrepe
Feb 25 2017 13:52
@ESLMiguel btw saw your message. It works on Chrome for me. It just doesn't work on https because your calls are on http
@ESLMiguel nothing you can do about that
ESLMiguel
@ESLMiguel
Feb 25 2017 13:54
but i was told i need to find a workaround to also work on chrome
alpox
@alpox
Feb 25 2017 13:57
@ESLMiguel change https://ip-api.com/json to http://ip-api.com/json
(Remove the s in https)
ESLMiguel
@ESLMiguel
Feb 25 2017 13:57
@alpox i tried both ways i believe
alpox
@alpox
Feb 25 2017 13:57
@ESLMiguel Works here on chrome without it :-)
ESLMiguel
@ESLMiguel
Feb 25 2017 13:58
on my pen??
alpox
@alpox
Feb 25 2017 13:58
yup
Marine
@MLCrepe
Feb 25 2017 13:58
@ESLMiguel yh same for me
@ESLMiguel even freecodecamp demo doesn't work in https so i wouldn't worry
ESLMiguel
@ESLMiguel
Feb 25 2017 13:58
what about firefox?
its working!
got it working on both
this one took forever
@alpox @MLCrepe thanks so much for your help :smiley_cat:
CamperBot
@camperbot
Feb 25 2017 14:01
eslmiguel sends brownie points to @alpox and @mlcrepe :sparkles: :thumbsup: :sparkles:
:warning: eslmiguel already gave mlcrepe points
:cookie: 799 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Feb 25 2017 14:02
@ESLMiguel One reason why freecodecamp suggests using jquery at the beginning.
I would recommend to go without it at the beginning though. Freecodecamp just tells to use because they want you to learn server interactions and ajax requests much too early
ESLMiguel
@ESLMiguel
Feb 25 2017 14:03
@alpox thats why i am learning vanilla JS. I was advised not to move to jQuery yet. I agree about FCC moving to api stuff a bit too fast
Also, I was told that if I walk into an interview and only know jQuery, without really understanding vanilla, I would have much lower chances
alpox
@alpox
Feb 25 2017 14:04
Thats about right @ESLMiguel
Lots of companies are moving away from jQuery anyway
I wouldn't want to include it in my stack anymore either
ESLMiguel
@ESLMiguel
Feb 25 2017 14:05
glad to hear the advice I got was sound
a lot of people here thought i was crazy when they saw i wasnt using jquery in my code lol
alpox
@alpox
Feb 25 2017 14:06
You definitely are not, but for an early learning stage this is really maybe bit much
Marine
@MLCrepe
Feb 25 2017 14:06
Well most devs are lazy and are used to Jquery. Probably the reason :p
alpox
@alpox
Feb 25 2017 14:07
Its not so much about lazy. No sane developer would want to use XMLHttpRequests all over their code. Most just write their own request wrapper once and use it then - but FCC people are not yet able to do so
I myself would just write a fetch API polyfill and go with that
ESLMiguel
@ESLMiguel
Feb 25 2017 14:08
I didnt even know about fetch
alpox
@alpox
Feb 25 2017 14:08
Or use https://github.com/github/fetch (Already an open source polyfill)
ESLMiguel
@ESLMiguel
Feb 25 2017 14:08
that wouldve saved me a lot of time
but i feel like i learned a lot in this process
for what its worth
alpox
@alpox
Feb 25 2017 14:09
@ESLMiguel Sure, its always good to have written plain javascript xmlhttprequests at least once to know what its doing
ESLMiguel
@ESLMiguel
Feb 25 2017 14:09
just gotta code the onclick function to change from C->F->C and then I will move on to the next project anyways
@alpox that was my plan. to use only vanilla js for the first two intermediate projects then move on to using libraries
alpox
@alpox
Feb 25 2017 14:10
:thumbsup:
Kevin
@AnaRobynn
Feb 25 2017 14:14
Is there a way to preventDefault a css pseudo-element from being activated?
Marine
@MLCrepe
Feb 25 2017 14:15
@rangelke can you explain your issue ?
Kevin
@AnaRobynn
Feb 25 2017 14:16
I have div, inside it another div. when I click the outer div some stylles get applied using :active, when I click the inner div I don't want those styles applied to the outer div
I thought of using stopPropagation / preventDefault, but it seems they don't work with css pseudo-classes
alpox
@alpox
Feb 25 2017 14:18

@rangelke You have to overwrite the default styles like:

*:active,
*:focus {
    outline: none;
}

If you as example want to remove the default blue border around active objects

Kevin
@AnaRobynn
Feb 25 2017 14:20
Ill show my pen
harris121301
@harris121301
Feb 25 2017 14:21
guys is @hairball9 there
guys can i ask for help
alpox
@alpox
Feb 25 2017 14:21
Sure, this chat is here for that
Kevin
@AnaRobynn
Feb 25 2017 14:21
@harris121301 Sure man
harris121301
@harris121301
Feb 25 2017 14:22
how can i make a personal portfolio hehehe
Kevin
@AnaRobynn
Feb 25 2017 14:22
@alpox @MLCrepe https://codepen.io/rangelke/pen/XMWeWW
You can see when you click some style get applied, but I don't want to apply the clicked style when I click on the twitter button
@harris121301 I skipped personal portfolio, because I thought I need more experience with css and javascript
I suck at UI, but trying to improve
before I make my portfolio
harris121301
@harris121301
Feb 25 2017 14:24
ah okay thank you @rangelke
CamperBot
@camperbot
Feb 25 2017 14:24
harris121301 sends brownie points to @rangelke :sparkles: :thumbsup: :sparkles:
:cookie: 11 | @rangelke |http://www.freecodecamp.com/rangelke
alpox
@alpox
Feb 25 2017 14:24
@rangelke That is exactly the case i gave you some css for to remove it :-)
Kevin
@AnaRobynn
Feb 25 2017 14:25
Aah alright, will try it out. I can't think atm, cause I need to go to the toilet :D
lol
alpox
@alpox
Feb 25 2017 14:25
:D know that feeling
harris121301
@harris121301
Feb 25 2017 14:25
hahaha
alpox
@alpox
Feb 25 2017 14:26
@rangelke Btw. a cursor: pointer on the button would go nicely :-)
Kevin
@AnaRobynn
Feb 25 2017 14:27
@alpox The twitter one?
alpox
@alpox
Feb 25 2017 14:27
yup
ESLMiguel
@ESLMiguel
Feb 25 2017 14:28
@rangelke I skipped my portfolio page too.
Kevin
@AnaRobynn
Feb 25 2017 14:31
@alpox So from what I understand you are saying I should target the outer div, style it with javascript on the moment I click on the inner div?
alpox
@alpox
Feb 25 2017 14:31
@rangelke No javascript involved, no
Kevin
@AnaRobynn
Feb 25 2017 14:32
I'm not following then :P
Hmmm on a second thought I think our cases are different from each other
No?
alpox
@alpox
Feb 25 2017 14:33
@rangelke Give the button a class: <button class="twitter-button">, then add the css:
.twitter-button {
    cursor: pointer;
}
.twitter-button:active,
.twitter-button:focus {
    outline: none;
}
Kevin
@AnaRobynn
Feb 25 2017 14:33
Yeah, no, that's not what I'm going for
I think
alpox
@alpox
Feb 25 2017 14:33
What are you going for then :D
Kevin
@AnaRobynn
Feb 25 2017 14:34
Whenever I click on the twitter button, I don't want to trigger
main>blockquote:active { margin-top: 0.2rem; box-shadow: 0.1rem 0.1rem 0.05rem 0.05rem black; /* transitions all changed properties */ transition: all 0.1s ease-in-out; background-color: hsla(10, 0%, 0%, 0.2); }
the twitter button sits inside the blockquote
so whenever I click on the twitter one, I click on the blockQuote as well
which triggers the :active on blockquote
Or is the cleaner option to declare the button outside the blockquote and hack it to align to top?
alpox
@alpox
Feb 25 2017 14:41
@rangelke Thats the only option i can think about... let me try
Okay that doesn't get clean :D
But do you need that active style on the blockquote?
Kevin
@AnaRobynn
Feb 25 2017 14:49
@alpox Oh wow
main>blockquote:active:not(blockquote>button:active) {
    margin-top: 0.2rem;
    box-shadow: 0.1rem 0.1rem 0.05rem 0.05rem black;
    /* transitions all changed properties */
    transition: all 0.1s ease-in-out;
    background-color: hsla(10, 0%, 0%, 0.2);
}
Genious
alpox
@alpox
Feb 25 2017 14:51
@rangelke Was just about something like that :D
Nice work!
Now the normal animation does not work either though
Kevin
@AnaRobynn
Feb 25 2017 14:56
Damn, didn't see that.
Gulsvi
@gulsvi
Feb 25 2017 14:58

If you don't mind using jQuery, this might be an option:

$('.parent').on('mousedown touchstart', e => {
  if(e.target.className === 'child') return;
  $(e.target).addClass('active');
}).on('mouseup touchend', e => {
  $(e.target).removeClass('active');
})

Replace 'active' with a class that gives you that button press style you want to achieve.

And of course, replace .parent and .child with your blockquote and button classes
alpox
@alpox
Feb 25 2017 15:01
@rangelke :not() only works on the selected elements. Children and descendants cannot be applied to the inner selector of not
Vikram
@vikramnr
Feb 25 2017 15:23
aside p{} .. Is this rule work when I have p tag inside a div/ or any other tag..?
Need help with this rule >>
Vikram
@vikramnr
Feb 25 2017 15:32
@alpox can you help me with this query
ESLMiguel
@ESLMiguel
Feb 25 2017 15:35
I can not figure out how to get this button to toggle...any help?
http://codepen.io/nthd3gr33/pen/JEgddr?editors=1111
The button for changing C to F to C
Around line 40 in the JS code
forewarning, this is vanilla JS :scream_cat:
Gulsvi
@gulsvi
Feb 25 2017 15:43
@vikramnr Yes, try testing it out:
<style>
p {
  color: blue;
}  
</style>
<p>hello</p>
<div>
  <p>hello2</p>
</div>
Jared de Guzman
@JDVariadic
Feb 25 2017 15:48

Hey Guys! Can someone help me fix this problem in the website. There's this small white space at the bottom most part and I can't seem to remove it.

http://codepen.io/JDVariadic/pen/GrepOB

ESLMiguel
@ESLMiguel
Feb 25 2017 15:49
@JDVariadic I dont see a small white space
@JDVariadic oh wait it shows up on firefox but not chrome...weird
dont know what to tell ya
Jared de Guzman
@JDVariadic
Feb 25 2017 15:50
@ESLMiguel yeah, Im using firefox... ty anyways I'll see what I can do
CamperBot
@camperbot
Feb 25 2017 15:50
jdvariadic sends brownie points to @eslmiguel :sparkles: :thumbsup: :sparkles:
:cookie: 323 | @eslmiguel |http://www.freecodecamp.com/eslmiguel
ESLMiguel
@ESLMiguel
Feb 25 2017 15:51
Good luck!
Vered Rekanati
@veredrec
Feb 25 2017 15:51
@thodorisanta When I looked at your claculator yesterday I tried to make several operations (like 2+4+7-5) but I couldn't, that's why I wrote this comment. Did you figure it out?
Gulsvi
@gulsvi
Feb 25 2017 15:57

@JDVariadic The easy fix is to make your body the same background color as your footer:

body {
  margin: 0;
  background-color: #1d1e22;
}

I don't know why that line is showing up though... I believe your <footer> elements should not be wrapped in a div - you might try playing around with that too if you want.

ESLMiguel
@ESLMiguel
Feb 25 2017 16:05
Ok so I am done with the first 2 intermediate projects (in vanilla JS). Going to use a library for the 3rd one (wikipedia). I assume i should just learn jQuery? Any other suggestions?
Vikram
@vikramnr
Feb 25 2017 16:08
@SkyCoder01 Thanks
CamperBot
@camperbot
Feb 25 2017 16:08
vikramnr sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 341 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Tainted3vil
@Tainted3vil
Feb 25 2017 16:17
hey guys. is there a better editor than codepen. the layout is beginning to grate on me
ESLMiguel
@ESLMiguel
Feb 25 2017 16:17
@Tainted3vil i downloaded brackets. a lot of people use atom too
other more experienced people probably know of others
Tainted3vil
@Tainted3vil
Feb 25 2017 16:18
@ESLMiguel thanks ive just found brackets. will give that a go
CamperBot
@camperbot
Feb 25 2017 16:18
tainted3vil sends brownie points to @eslmiguel :sparkles: :thumbsup: :sparkles:
:cookie: 325 | @eslmiguel |http://www.freecodecamp.com/eslmiguel
Andrew Nichols
@frenata
Feb 25 2017 16:19
As always my answer to the editor question is vim.
Spyrantis Theodoros
@thodorisanta
Feb 25 2017 16:37

@veredrec i think so. i did a couple general changes in my code. you can check it :)

https://codepen.io/oshikurou/pen/jyKLyg?editors=0011

Ken Haduch
@khaduch
Feb 25 2017 16:40

@Tainted3vil - note to say that the CodePen editor is wonderful, but there is a set of features https://blog.codepen.io/documentation/editor/key-bindings/ that are available and probably infrequently used. One thing about using an external editor is that if you are going to end up posting your work using CodePen, there is probably a fair amount of work to getting everything set up properly there, because of CodePen's API. And you might not need help with projects, but having it in CodePen also makes it easier for people to follow up with help on questions.

But it's up to your personal preference and what works for you - just thought that I would offer that additional tidbit of information... :) Cheers!

Brandon
@bd1887
Feb 25 2017 17:02
@thodorisanta It's easy to overlook, but you shouldn't be able to input more than one decimal point
René
@RenevandenHeuvel
Feb 25 2017 17:02
I just want to say it's great figuring stuff out
Brandon
@bd1887
Feb 25 2017 17:05
@thodorisanta you can fix it by including an indexOf() check
Spyrantis Theodoros
@thodorisanta
Feb 25 2017 17:06
@bd1887 what do you mean "more than one decimal point"?
oh
how can i fix that again? :P
Brandon
@bd1887
Feb 25 2017 17:11
@thodorisanta The indexOf() method will return -1 if one string doesn't contain another string. Otherwise, it returns the index.
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf
@thodorisanta Looks like you can put it in your locked button check somewhere
r2d2
@UsamaHameed
Feb 25 2017 17:25
Can someone please test this? It is a speech recognition app. Please allow it to use your mic.
http://nativespeechrecognition.herokuapp.com/
Brandon
@bd1887
Feb 25 2017 17:26

@thodorisanta So for example

console.log($("#screen").html().indexOf('.'));

will return -1 if there aren't any decimal points on your screen yet. Otherwise, it will return some other number greater than -1.

alpox
@alpox
Feb 25 2017 17:27
@vikramnr If you just put p{} it applies to all p elements on the page - no matter where they are
René
@RenevandenHeuvel
Feb 25 2017 17:41
@UsamaHameed , that's awesome, it works
@UsamaHameed did you make it?
r2d2
@UsamaHameed
Feb 25 2017 17:43
Yeah. I followed the tutorial on javascript30.com @RenevandenHeuvel
René
@RenevandenHeuvel
Feb 25 2017 17:43
It doesn't seem to work all the time
r2d2
@UsamaHameed
Feb 25 2017 17:43
It's not perfect
René
@RenevandenHeuvel
Feb 25 2017 17:43
@UsamaHameed but the time it worked was fun
r2d2
@UsamaHameed
Feb 25 2017 17:44
I will work on it some more
What problem did you get?
What were you saying when it broke?
René
@RenevandenHeuvel
Feb 25 2017 17:45
I am talking to it, but the speech isn't detected
now it worked partially
I said hallo and it came on
Much better now
Philipp_Lypniakov
@RAYDENFilipp
Feb 25 2017 17:52
Can anyone tell me why Collapsible Navbar doesn't work properly?
http://codepen.io/RAYDENFilipp/full/mRZyvQ/
René
@RenevandenHeuvel
Feb 25 2017 17:52
@UsamaHameed thanks for posting, i bookmarked it and may take this course later. Happy coding!
Spyrantis Theodoros
@thodorisanta
Feb 25 2017 17:52
@bd1887 yeah but the point is to not let the array to accept another "."
CamperBot
@camperbot
Feb 25 2017 17:52
:cookie: 561 | @usamahameed |http://www.freecodecamp.com/usamahameed
renevandenheuvel sends brownie points to @usamahameed :sparkles: :thumbsup: :sparkles:
r2d2
@UsamaHameed
Feb 25 2017 17:54
It isn't perfect as I said lol
Kevin
@AnaRobynn
Feb 25 2017 18:00
Is it good practice to get child elements using: element.children?
or bad?
Sorin Ruse
@sorinr
Feb 25 2017 18:05
@RAYDENFilipp in settings load jquery and after bootstrap.js
Philipp_Lypniakov
@RAYDENFilipp
Feb 25 2017 18:07
@sorinr it seems not working his way
@sorinr this*
Sorin Ruse
@sorinr
Feb 25 2017 18:08
@RAYDENFilipp its working. take a look here
Philipp_Lypniakov
@RAYDENFilipp
Feb 25 2017 18:14
@sorinr i see, you added those in JavaScript section, that's how it works! Great thanks!
CamperBot
@camperbot
Feb 25 2017 18:14
raydenfilipp sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1183 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Feb 25 2017 18:14
@RAYDENFilipp welcome
Cory
@cfirst
Feb 25 2017 18:15
Hello
I'm trying to manipulate the Portfolio header of my Div3 object and it's currently floating in the top left of the page instead of next to it...
See here:

html:

<div class="container" id="margin">
        <div id="div3">
            <h2> Portfolio</h2>
        </div>

CSS:

#div3 {
    position: absolute;
    left: -30px;
    top: 50%;
    display: inline-block;
    transform: rotate(-90deg);
    font-size: 20px;
    font-weight: 700;
    font-family: 'Source Serif Pro', serif;
}
Any help would be much appreciated ;D
Cory
@cfirst
Feb 25 2017 18:20
The problem seems to be with position: absolute;
Oh i think I got it
Woo, I did.
Christopher
@bradley1492
Feb 25 2017 19:04
hey, a very basic question here. What is it called that the colors in this link are transitioning from darker to lighter??? :smile: https://maniacdev.com/wp-content/uploads/2013/12/Sol.png
Sorin Ruse
@sorinr
Feb 25 2017 19:08
@cfirst change position to position: relative; to have the h2 into the portfolio container
@bradley1492 gradient
rawlieg
@rawlieg
Feb 25 2017 19:09
Hey im having some trouble getting the api for y weather app to work. keep getting errors involving https with codepen and was wondering if there is a way around it
Sorin Ruse
@sorinr
Feb 25 2017 19:11
@rawlieg if you want to use openweather you have to use an ip location service(both working on http). if you want to use geolocation(https only working) you need to change the weather api to something like apixu.com, weather wounderground, etc apis that support https for free plans
rawlieg
@rawlieg
Feb 25 2017 19:13
ok thanks i'll give that a shot
Christopher
@bradley1492
Feb 25 2017 19:19
@sorinr thanks a lot
CamperBot
@camperbot
Feb 25 2017 19:19
bradley1492 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1184 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Feb 25 2017 19:20
@bradley1492 welcome
Agrim
@scooterman751
Feb 25 2017 19:20
i've a problem
when i try to view my navbar at less than 768px
it goes into the button toggle thingy
but when i click it
it doesn't expand
here's my code:
<head>
    <title>Agrim's Portfolio Page</title>
</head>

<body>
    <!--Navbar-->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbarItemCollapse" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand" href="#" target="_blank">My Portfolio</a>
            </div>
            <div class="collapse navbar-collapse navbarItemCollapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#home"><i class="glyphicon glyphicon-home" id="home-margin"></i>Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#portfolio">Portfolio</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!--End Navbar-->

    <!--Home-->

</body>
Sorin Ruse
@sorinr
Feb 25 2017 19:22
@scooterman751 see :point_up: February 25, 2017 8:05 PM
@scooterman751 supposing u r using codepen :)
Agrim
@scooterman751
Feb 25 2017 19:24
@sorinr yes
@sorinr thansk it works now
:D
lol
Sorin Ruse
@sorinr
Feb 25 2017 19:24
@scooterman751 welcome
Ankur sharma
@ankur1163
Feb 25 2017 19:25
i am facing strange issue
font awesome just doesnt work
can someone help me out
WiseKodama
@WiseKodama
Feb 25 2017 19:25
Did you add the link to the project?
Link to codepen if you can
Sorin Ruse
@sorinr
Feb 25 2017 19:27
@ankur1163 what version do u use? what icons do you want to show?
Ankur sharma
@ankur1163
Feb 25 2017 19:27
    <title>Pinterest </title>
    <link rel='stylesheet' href='/stylesheets/style.css' />


    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="stylesheets/font-awesome-4.7.0/css/font-awesome.min.css">


    <!-- Optional theme -->
@WiseKodama and @sorinr
Sorin Ruse
@sorinr
Feb 25 2017 19:28
@ankur1163 and whats the problem?
Ankur sharma
@ankur1163
Feb 25 2017 19:29
i dont see font awesome
i should add this link @WiseKodama
WiseKodama
@WiseKodama
Feb 25 2017 19:29
<i class="fa fa-twitter"></i>
Are you calling it like that?
Sorin Ruse
@sorinr
Feb 25 2017 19:30
@ankur1163 and why do you load twice fa lib? comment out the link to local and let only the maxcdn
Ankur sharma
@ankur1163
Feb 25 2017 19:30
yes
ok @sorinr
can you check please
click Mypins
can someone tell me , if font awesome is loaded or not
to me it looks like it isnt loaded
@sorinr @WiseKodama
any idea why this is happening?
may be the font awesome is not loading
WiseKodama
@WiseKodama
Feb 25 2017 19:35
I honestly wouldn't know, the page is not displaying anything
Sorin Ruse
@sorinr
Feb 25 2017 19:36
@ankur1163 now you are not loading it anymore. i said to comment out this<link rel="stylesheet" href="stylesheets/font-awesome-4.7.0/css/font-awesome.min.css"> because you have this <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
Ankur sharma
@ankur1163
Feb 25 2017 19:37
@sorinr i have this code
<head>
    <title>Pinterest </title>
    <link rel='stylesheet' href='/stylesheets/style.css' />


    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <!-- Latest compiled and minified CSS -->



    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">

  </head>
  <body>
@WiseKodama click Mypins link
Sorin Ruse
@sorinr
Feb 25 2017 19:40
snapshot.PNG
@ankur1163 show me where you have it
Pierre Humberdroz
@phumberdroz
Feb 25 2017 19:41
Hey anyone in here that knows about webpack and maybe react-toolkit ? :)
Ankur sharma
@ankur1163
Feb 25 2017 19:41
you are right @sorinr
but thats my code
<!DOCTYPE html>
<html>
  <head>
    <title>Pinterest </title>
    <link rel='stylesheet' href='/stylesheets/style.css' />


    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <!-- Latest compiled and minified CSS -->



    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">

  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript" src="/build/bundle.js"></script>

  </body>
</html>
@phumberdroz ask away, I know a bit about webpack
@sorinr i just checked
Pierre Humberdroz
@phumberdroz
Feb 25 2017 19:43
@ankur1163
I am trying to use mern.io (https://github.com/Hashnode/mern-starter) and sadly I can not get react-toolkit correctly.
I tried to add a scss-loader
to my configs.
Ankur sharma
@ankur1163
Feb 25 2017 19:44
still in front end when i load site,
i dont see font awesome
but thats trange
@phumberdroz what you want to do ?
Pierre Humberdroz
@phumberdroz
Feb 25 2017 19:45
add the react components from react-toolkit into my project that is based on mern.io boilerplate.
Ankur sharma
@ankur1163
Feb 25 2017 19:47
@phumberdroz sorry dont know. I have not used any starter kits or react toolkit, so I dont know
webpack is definitely confusing
whats the error you are getting?
the way I did , i created project in express then manually included react stuff in it. i didnt use create react app from facebook
then, i included simple css using bootstrap
Ehsan Shadmehri
@ehsansh
Feb 25 2017 19:48
Hi, I have a webpage with more than 40 js files. Is it good to convert all js files into 1 file? If I do, that file would 1MB. Is it really good?
Ankur sharma
@ankur1163
Feb 25 2017 19:50
@ehsansh thats the way it should be done
there is tool known as webpack
it does that
on all project in backend, we use webpack
Ehsan Shadmehri
@ehsansh
Feb 25 2017 19:52
@ankur1163 Yes like grunt or other task runners. Do you have any idea to reduce the bandwidth usage by huge js files? Is it possible to load these files from other free servers?
Ankur sharma
@ankur1163
Feb 25 2017 19:53
yeah like grunt
@ehsansh
but webpack is best right now and its better than grunt
I dont think you can reduce file sizes
the one thing you can do is
minimize connection points
<link rel=
its better if we have minimum amount of files calling through <link href = method
as you move along and go into react
the front end wil become really large
right now, my js file for front end if 4 mb
Ehsan Shadmehri
@ehsansh
Feb 25 2017 19:55
I read an article why not to load videos on our host and use youtube or other free services I wonder if it is possible to do the same for other huge files like js files
For example using dropbox? Is it logical? in order to reduce the bandwidth usage
sennator
@sennator2
Feb 25 2017 19:58
hi guys
i have a problem which i'm not sure how to solve. I'm making a website and in serbian we have some special letters like ć. My problem is that these letters get displayed properly in chrome but not in mozilla and ie
i'm using google fonts, font poppins
I wouldn't bother you here but i dont know how to find solution for this problem
iso
@iso1048
Feb 25 2017 20:23
how do I center inline buttons?
Sorin Ruse
@sorinr
Feb 25 2017 20:24
@sennator2 when loading your fonts think u should also apply the &subset=all to get you all diacritics for that font if they exist :)
sennator
@sennator2
Feb 25 2017 20:27
@sorinr i did but it still wont work
Sorin Ruse
@sorinr
Feb 25 2017 20:31
@sennator2 can you show how did you made the link? maybe something wrong in there
@sennator2 here whats available from google fonts: <link href="https://fonts.googleapis.com/css?family=Poppins&subset=devanagari,latin-ext" rel="stylesheet">
sennator
@sennator2
Feb 25 2017 20:33
@sorinr here's mine <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&subset=latin-ext" rel="stylesheet">
Sorin Ruse
@sorinr
Feb 25 2017 20:39
@sennator2 think your wanted char its not into the subset for this font. sorry but for the moment have no idea how you can solve this
sennator
@sennator2
Feb 25 2017 20:41
@sorinr thanks for trying
CamperBot
@camperbot
Feb 25 2017 20:41
sennator2 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1186 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Feb 25 2017 20:42
@sennator2 welcome. if i come up with an idea, i'll let u know
@sennator2 btw. i see poppins its a sans serif font. have you tried in css: font-family: "Poppins", sans serif ?
sennator
@sennator2
Feb 25 2017 20:49
@sorinr i did... it seems to be some unicode problem, but i dont even know what that means
looks like a long night ahead of me :)
Sorin Ruse
@sorinr
Feb 25 2017 20:53
@sennator2 if you want to write some text in your serbian, what fonts are you usually use?
@sennator2 i mean web text
alpox
@alpox
Feb 25 2017 20:53
@sennator2 Are that cyrillic letters?
sennator
@sennator2
Feb 25 2017 20:54
@sorinr all regular fonts work
@alpox no it 's latin
alpox
@alpox
Feb 25 2017 20:56
@sennator2 did you try the css unicode-range: U+0400-04FF; ?
In addition to font-family
Sorin Ruse
@sorinr
Feb 25 2017 20:56
@sennator2 so if you r going to use arial instead of poppins for example your special char will show ok?
alpox
@alpox
Feb 25 2017 20:58
@sennator2 You would have to find out where in the unicode range the letters are, which you need - the block i showed is the slawish unicode block. Not sure if its in there what you need
sennator
@sennator2
Feb 25 2017 20:59
@sorinr yeah arial should work
@alpox thanks man, i'll check that out
CamperBot
@camperbot
Feb 25 2017 20:59
sennator2 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 800 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Feb 25 2017 21:00
@sennator2 Ah if you use some special font it can be that your letters are not supported. You have to take a font which surely includes them.
Sorin Ruse
@sorinr
Feb 25 2017 21:00
@sennator2 then try to make it font-family: "Poppins", Arial, sans serif as a fallback
sennator
@sennator2
Feb 25 2017 21:00

@alpox should css look like this

font-family: 'Poppins', sans-serif;
unicode-range: U+0400-04FF;

alpox
@alpox
Feb 25 2017 21:01
@sennator2 Yes - but as @sorinr points out, you probably need a fallback for the case that Poppins doesn't support the special letters
But poppins should support it actually
sennator
@sennator2
Feb 25 2017 21:02
@sorinr @alpox thanks for suggestions guys
CamperBot
@camperbot
Feb 25 2017 21:02
sennator2 sends brownie points to @sorinr and @alpox :sparkles: :thumbsup: :sparkles:
:warning: sennator2 already gave sorinr points
:warning: sennator2 already gave alpox points
sennator
@sennator2
Feb 25 2017 21:02
really means a lot ;)
Sorin Ruse
@sorinr
Feb 25 2017 21:02
@sennator2 hope some of the ideas solves ur problem :)
alpox
@alpox
Feb 25 2017 21:04
I hope so too @sennator2 :-)
@sennator2 I just made a test in codepen on mozilla - worked without a problem with your font link
Can you maybe give us a reference to your pen so we can see?
Prakash Shiwakoti
@pshiwakoti1
Feb 25 2017 21:41
hello guys Im getting the following error The classes container (1) text-center (1) row (1) col-md-4 (3) are used in the HTML but not found in any stylesheet.
Tyler Moeller
@TylerMoeller
Feb 25 2017 21:42
@pshiwakoti1 You can ignore that error. Codepen doesn't know about stylesheets you link to remotely
Prakash Shiwakoti
@pshiwakoti1
Feb 25 2017 21:43
@TylerMoeller I can't see the desired output though
I want to break my page into 3 columns
Tyler Moeller
@TylerMoeller
Feb 25 2017 21:43
@pshiwakoti1 Can you share your codepen?
Jean Marco Romero
@volkranium
Feb 25 2017 21:46
Hey guys just finished my personal website
its not totally done
jeanromero.com
im having some problem on small viewports with thumbnail image
Prakash Shiwakoti
@pshiwakoti1
Feb 25 2017 21:49
hi @TylerMoeller did you look at my page?
Tyler Moeller
@TylerMoeller
Feb 25 2017 21:49
@pshiwakoti1 Yes, just now. You don't have bootstrap linked to your project
Prakash Shiwakoti
@pshiwakoti1
Feb 25 2017 21:50
i think I have linked it
Tyler Moeller
@TylerMoeller
Feb 25 2017 21:50
Click Settings, Click CSS, and add this link: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Prakash Shiwakoti
@pshiwakoti1
Feb 25 2017 21:50
thanks
Tyler Moeller
@TylerMoeller
Feb 25 2017 21:51
Prakash Shiwakoti
@pshiwakoti1
Feb 25 2017 21:51
@TylerMoeller thanks its working now
CamperBot
@camperbot
Feb 25 2017 21:51
pshiwakoti1 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1509 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
WiseKodama
@WiseKodama
Feb 25 2017 22:09
Greetings everyone, I am doing the RegExp challenge for US telephone numbers
How can I check if it only contains one parentheses?
alpox
@alpox
Feb 25 2017 22:13
@WiseKodama I think you are asking the wrong question :-) You can always match parantheses at any place and if you want only one pair in the match, you just go sure that you don't match other parantheses.
So there is not one way to answer that
WiseKodama
@WiseKodama
Feb 25 2017 22:14
...
No I asked if there is a way to check a string and see if it only has one(1) parentheses either ( or )
Prakash Shiwakoti
@pshiwakoti1
Feb 25 2017 22:15
can anyone tell me why I cant see the status of Free Code Camp on TWitch TV? Here is my penCode
WiseKodama
@WiseKodama
Feb 25 2017 22:16
check the instructions
You need to use the other api
Prakash Shiwakoti
@pshiwakoti1
Feb 25 2017 22:16
ok
WiseKodama
@WiseKodama
Feb 25 2017 22:17
this one requires a cliend ID
there will be a link
alpox
@alpox
Feb 25 2017 22:17
@WiseKodama Hmm at one position or in the whole string? If you mean at one position: /\(|\)/; this would match exactly one of each
WiseKodama
@WiseKodama
Feb 25 2017 22:17
in the whole string
I want to check if the string has for example an opening parentheses but no closing or vice versa
if it doesn't have a matching pair
@pshiwakoti1 let me know if you need a link
alpox
@alpox
Feb 25 2017 22:20
@WiseKodama /^([^(]*\)[^(]*)|([^)]*\([^)]*)$ This would match exactly what you say... Yea its long :-/
WiseKodama
@WiseKodama
Feb 25 2017 22:20
That's what she said
Let me test that rq
alpox
@alpox
Feb 25 2017 22:21
I hope its right - its untested
@WiseKodama You don't have to use such a construct for the telephone number challenge though
WiseKodama
@WiseKodama
Feb 25 2017 22:23
Well my current RegExp works for all except when there's a parentheses without a match
alpox
@alpox
Feb 25 2017 22:23
If you would match /^.*\(.*\).*$/ as example, it wouldn't accept anything without both ( and )
WiseKodama
@WiseKodama
Feb 25 2017 22:25
/^((+\d{1,2}|1)[\s.-]?)?(?2-9\d{2})?[\s.-]?\d{3}[\s.-]?\d{4}$/
This is what I have atm
where would I insert that in this case?
alpox
@alpox
Feb 25 2017 22:26
@WiseKodama This gives me invalid expression :-/
Can you put it in backticks once? gitter swallows some characters else
WiseKodama
@WiseKodama
Feb 25 2017 22:28
var re = new RegExp(/^((+\d{1,2}|1)[\s.-]?)?(?2-9\d{2})?[\s.-]?\d{3}[\s.-]?\d{4}$/);
how do i insert code?
alpox
@alpox
Feb 25 2017 22:28
Ah see it... the 2-9 the [] were swallowed
Because gitter takes markdown
@WiseKodama just use one ` at the beginning and one ` at the end
Backticks
WiseKodama
@WiseKodama
Feb 25 2017 22:29
\var re = new RegExp(/^((+\d{1,2}|1)[\s.-]?)?(?2-9\d{2})?[\s.-]?\d{3}[\s.-]?\d{4}$/);\
oh back ticks
alpox
@alpox
Feb 25 2017 22:29
@WiseKodama Almost :D
WiseKodama
@WiseKodama
Feb 25 2017 22:30
var re = new RegExp(/^((\+\d{1,2}|1)[\s.-]?)?\(?[2-9](?!11)\d{2}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/);
alpox
@alpox
Feb 25 2017 22:30
Thx
WiseKodama
@WiseKodama
Feb 25 2017 22:30
Don't know where backticks are on my keyboard
had to copy yours
alpox
@alpox
Feb 25 2017 22:31
Okay ^^
works too
WiseKodama
@WiseKodama
Feb 25 2017 22:31
var re = new RegExp(/^((\+\d{1,2}|1)[\s.-]?)?\(?[2-9](?!11)\d{2}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/); return re.test(str);
This is passes all the test except for the ones with only half a parantheses pair
like 1 555) 555 5555
alpox
@alpox
Feb 25 2017 22:33
@WiseKodama Hmm what i would do is two cases with | --> (\(...\)|...) where you fill out the dots for the part with parantheses or without
Sadly the dot parts are repetitions
Prakash Shiwakoti
@pshiwakoti1
Feb 25 2017 22:34
"jQuery.Deferred exception: url is not defined" "ReferenceError: url is not defined at HTMLDocument.<anonymous> (pen.js:46:11) at j (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:29948) at k (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:30262)" undefined
alpox
@alpox
Feb 25 2017 22:34
So you would remove the ? after the \( and \) and put the whole thing into that form where you replicate the inner part @WiseKodama
Prakash Shiwakoti
@pshiwakoti1
Feb 25 2017 22:34
I can't tell why im getting this error
alpox
@alpox
Feb 25 2017 22:34
@pshiwakoti1 Seems there is the variable url not defined where it is needed
WiseKodama
@WiseKodama
Feb 25 2017 22:35
@alpox that is confusing :worried:
Prakash Shiwakoti
@pshiwakoti1
Feb 25 2017 22:35
@alpox I have defined the var url
can u please check it for me
alpox
@alpox
Feb 25 2017 22:35
@pshiwakoti1 Did you make a jquery call where the url was undefined on call?
@pshiwakoti1 If you give me the codepen yes
@WiseKodama Yea it is a bit ^^ sadly its still the best option you have
alpox
@alpox
Feb 25 2017 22:37
@WiseKodama I corrected your code so it works - with the way i told you:
/^((\+\d{1,2}|1)[\s.-]?)?(\([2-9](?!11)\d{2}\)|[2-9](?!11)\d{2})[\s.-]?\d{3}[\s.-]?\d{4}$/;
WiseKodama
@WiseKodama
Feb 25 2017 22:37
@alpox Thank you so much!
CamperBot
@camperbot
Feb 25 2017 22:37
wisekodama sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 801 | @alpox |http://www.freecodecamp.com/alpox
WiseKodama
@WiseKodama
Feb 25 2017 22:38
@pshiwakoti1 You did not change the api yet
Let me grab the links for you
Prakash Shiwakoti
@pshiwakoti1
Feb 25 2017 22:38
ok
please
alpox
@alpox
Feb 25 2017 22:38
@pshiwakoti1 You got a jquery error because you added slick after jquery in the settings.
Also, the link you put there is not available as @WiseKodama states.
Prakash Shiwakoti
@pshiwakoti1
Feb 25 2017 22:39
which link do i use then
This is the api you need to use
Check the other link I pasted
Cory
@cfirst
Feb 25 2017 22:41
Hey I'm back with another question
Why is the 'Contact Me' H2 header behaving differently from the 'About Me' and 'Portfolio' h2 headers?
alpox
@alpox
Feb 25 2017 22:42
@cfirst how different? They look the same to me
@cfirst Maybe you meant that the portfolio header behaves differently - not the contact me? Because the portfolio header does not show
Cory
@cfirst
Feb 25 2017 22:45
@alpox Oops forgot to save the changes
Prakash Shiwakoti
@pshiwakoti1
Feb 25 2017 22:48
still no success
i changed the api
alpox
@alpox
Feb 25 2017 22:51
@cfirst Its the width of the contact me. The transform rotate just changes how you see the element on screen but not its actual position in the DOM which is still unrotated. It rotates around its center in with and height - so it rotates more right for an element which has more width.
Prakash Shiwakoti
@pshiwakoti1
Feb 25 2017 22:53
@alpox may I ask you why my api doesn't work
alpox
@alpox
Feb 25 2017 22:56
@pshiwakoti1 See https://wind-bow.gomix.me/ for documentation. At the moment you try to access the root node of the api without giving any channel search string or anything. This cannot find something.
@pshiwakoti1 One example of a call would be the call to https://wind-bow.gomix.me/twitch-api/channels/freecodecamp which asks for information about the freecodecamp channel.
Cory
@cfirst
Feb 25 2017 22:58
@alpox But the width of the div boxes are all the same
alpox
@alpox
Feb 25 2017 22:58
@cfirst But not of the h2 elements which you rotate
@cfirst Thats because the text Contact me is longer than Portfolio as example
Cory
@cfirst
Feb 25 2017 22:59
@aplox What's the fix? Do I need to set a max-width on the h2 elements?
alpox
@alpox
Feb 25 2017 22:59
@cfirst transform: translateX(-50%) rotate(-90deg); this is the fix :-)
Cory
@cfirst
Feb 25 2017 23:01
@alpox Can you explain how works? :D
Or why it's working.
alpox
@alpox
Feb 25 2017 23:02
@cfirst transform: translateX(-50%) moves the elements half of their width to the left - this makes sure that all h2 line up in their center - where they are rotated afterwards
So before the rotation, the center of all h2 are exactly in a vertical line
Cory
@cfirst
Feb 25 2017 23:05
in relation to the width of the h2 elements themselves?
alpox
@alpox
Feb 25 2017 23:05
@cfirst Yup
Cory
@cfirst
Feb 25 2017 23:06
@aplox I need to read up on how objects and elements interact because I still don't quite understand why things end up a certain way when i manipulate them. And it's almost always not in the way I expect.
alpox
@alpox
Feb 25 2017 23:06
@cfirst Thats usual when learning html/css :D
I'm in it for some years now and am still sometimes a bit puzzled
@cfirst Using flexbox makes some things much easier though ;-)
Cory
@cfirst
Feb 25 2017 23:08
@alpox Will look into that
Christopher
@bradley1492
Feb 25 2017 23:09
Hey, I am just working at the weather app. I am trying to exchange the default weather icons with these ones https://www.npmjs.com/package/weather-icons. In the usage description it says i should insert the font folder one above the css folder. But how could i do that in codepen??
alpox
@alpox
Feb 25 2017 23:09
@cfirst Just be aware of the non-compability with IE9
Cory
@cfirst
Feb 25 2017 23:09
My next question: So ideally, I'm going to create a grid, with four squares, on top of my Portfoli div to showcase recent projects. How should I go about starting that...
Then you can click through and it'll take you to a separate page with all the info about that project
alpox
@alpox
Feb 25 2017 23:10
@cfirst Well flexbox would be one thing which can create such grids quite well. Another approach would be to create inline divs (nasty) or floating block divs (I dont like that so much either...)
Usually, for beginners, there is bootstrap which is great for creating simple grids
But it seems you want to go native - which is a good choice IMO
Cory
@cfirst
Feb 25 2017 23:11
Sounds like flexbox should be my focus.
alpox
@alpox
Feb 25 2017 23:12
@cfirst Yep, as long as you don't care about compability with old browsers
cant figure out why my offset isnt moving my list to the center anyone?
alpox
@alpox
Feb 25 2017 23:12
@bradley1492 You simply cant :-/ you would have to host the pictures somewhere on the internet yourself on some hosting service - probably github would work for that
Christopher
@bradley1492
Feb 25 2017 23:15
@alpox Thanks for the answer. Okay i think this would be too complicated. How did others go about exchanging the icons from openweathermap??
CamperBot
@camperbot
Feb 25 2017 23:15
bradley1492 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 802 | @alpox |http://www.freecodecamp.com/alpox
Johnny
@jtan3
Feb 25 2017 23:15
@bradley1492 try adding these in your codepen? https://cdnjs.com/libraries/weather-icons
alpox
@alpox
Feb 25 2017 23:16
@Pagnito According to the bootstrap docs for bootstrap version 4 its now offset-md-1 and offset-sm-1 instead of col-md-offset-1... https://v4-alpha.getbootstrap.com/layout/grid/#offsetting-columns
Christopher
@bradley1492
Feb 25 2017 23:17
@jtan3 thaaaaanks this is exactly what i was looking for!!! :)
alpox
@alpox
Feb 25 2017 23:17
@bradley1492 Yup CDN's can do the hosting for you too :-) its amazing what one can find on them
Christopher
@bradley1492
Feb 25 2017 23:18
@alpox Great I'll stick to that a lot when working with codepen!!
alpox
@alpox
Feb 25 2017 23:18
@bradley1492 :-) good choice
Cory
@cfirst
Feb 25 2017 23:18
@alpox I'm wondering if I can write JS to detect the browser type and adjust accordingly?
But everyone really should be on newer browsers :3
alpox
@alpox
Feb 25 2017 23:19
@cfirst There are polyfills ofc. but they base on javascript - see https://modernizr.com/
But i would usually tell IE9 users to switch to a new one anyway if they complain
I think all web devs will be so glad when once the IE's are out of the world :D
alpox
@alpox
Feb 25 2017 23:27
@cfirst If you need normal flexbox support for all browsers you can use https://github.com/jonathantneal/flexibility
Prakash Shiwakoti
@pshiwakoti1
Feb 25 2017 23:36
guys when I do console.log(data2) for this getJSON url https://wind-bow.gomix.me/twitch-api/channels it doesn't show any data. Is it the right url?
Johnny
@jtan3
Feb 25 2017 23:37
@pshiwakoti1 you need to add an account name after it
Prakash Shiwakoti
@pshiwakoti1
Feb 25 2017 23:37
oh ok
alpox
@alpox
Feb 25 2017 23:37
@pshiwakoti1 As i said, you can test with adding /freecodecamp
Johnny
@jtan3
Feb 25 2017 23:38
@pshiwakoti1 https://wind-bow.gomix.me/twitch-api/channels/ESL_SC2 try and online account and offline account
Spyrantis Theodoros
@thodorisanta
Feb 25 2017 23:56

I just finished with my calculator project. Tell me your thoughts, what i should do differently ,what you would do different, coment on my JS and rate it from 1-10 :)

https://codepen.io/oshikurou/pen/jyKLyg?editors=0011