These are chat archives for FreeCodeCamp/HelpFrontEnd

30th
Apr 2017
jaizon
@jaizon
Apr 30 2017 00:35
Can anyone help me finding out why my navbar is getting behind my background on the last section? http://codepen.io/jaizon/pen/VbbvKJ?editors=1100
and srry about the css code, I'musing a scss compiler
Keon Samuel
@keonsam
Apr 30 2017 00:44
navbar are so old school nav is better
jaizon
@jaizon
Apr 30 2017 00:45
Isn't even a real navbar, I just made the buttons with divs >weight + height
So I've added a fixed position to it
Gulsvi
@gulsvi
Apr 30 2017 00:46
I think Keon's trolling
jaizon
@jaizon
Apr 30 2017 00:47
:octocat:
Jorge
@OrangeKulture
Apr 30 2017 00:50
hey guys
jaizon
@jaizon
Apr 30 2017 00:51
hi
Chris
@bestintown23
Apr 30 2017 00:51
what could prevent my page from having the overflow? I have to scroll to see my footer. when I would just like it on the bottom of the page without scrolling. Thanks. http://codepen.io/bestintown23/pen/ybyOqb
jaizon
@jaizon
Apr 30 2017 00:53
Srry, you want your page to have no scrolling?
just the fixed image with the elements on it?
Ronique Ricketts
@RoniqueRicketts
Apr 30 2017 01:36
Hi guys
I need help with some flexbox issues
Vamp
@the-vampiire
Apr 30 2017 01:38
what are the issues
Ronique Ricketts
@RoniqueRicketts
Apr 30 2017 01:40
@the-vampiire I wanted to get the tv stations to be in flex boxed that shows in a 3*3 grid system
Keon Samuel
@keonsam
Apr 30 2017 01:42
@MathematicsCoding you dissappeared?
@RoniqueRicketts how do get work in Jamaica?
Ronique Ricketts
@RoniqueRicketts
Apr 30 2017 01:44
@keonsam Are you talking about coding jobs?
Keon Samuel
@keonsam
Apr 30 2017 01:44
yes
Ronique Ricketts
@RoniqueRicketts
Apr 30 2017 01:45
@keonsam well I am currently not working as a developer but Most developers I know are working for Foreign companies remotely.
Gulsvi
@gulsvi
Apr 30 2017 01:45
@RoniqueRicketts For a row with 3 columns, your HTML would look like:
      <div class="row">
        <div class="col-3"><img class="img-fluid" src=" . . . " alt=" . . . "></div>
        <div class="col-3"> name </div>
        <div class="col-3"> Views </div>
      </div>
Keon Samuel
@keonsam
Apr 30 2017 01:45
I am from the caribbean too but haven't seen a web developer vacancy in the newspaper.
Gulsvi
@gulsvi
Apr 30 2017 01:46
if you want 3*3 like a tic-tac-toe board, it's going to get more complicated.
Ronique Ricketts
@RoniqueRicketts
Apr 30 2017 01:46
@keonsam Yes its hard for us in this side. Which Country do you live in?
Keon Samuel
@keonsam
Apr 30 2017 01:46
SVG
Ronique Ricketts
@RoniqueRicketts
Apr 30 2017 01:47
@SkyCoder01 on my code I am asking where I went wrong.
Jennifer vdh
@jennifervdh
Apr 30 2017 01:47
hello everyone
Keon Samuel
@keonsam
Apr 30 2017 01:47
Saint Vincent.
know where that is?
Ronique Ricketts
@RoniqueRicketts
Apr 30 2017 01:48
@keonsam I have applied for a few jobs and have reached the testing section and upon hearing that I am Jamaican I was rejected.
Keon Samuel
@keonsam
Apr 30 2017 01:48
lol.
remote?
Ronique Ricketts
@RoniqueRicketts
Apr 30 2017 01:48
@keonsam Yes I do know where you are..
Gulsvi
@gulsvi
Apr 30 2017 01:49
@RoniqueRicketts The first issue I see is that you are using some bootstrap 3 classes, but have bootstrap 4 added to your project. The two versions are not compatible. The other issue is that you are not implementing the grid system. The code I put above will help you get started implementing it correctly.
Jennifer vdh
@jennifervdh
Apr 30 2017 01:49
I'm starting to work on my tribute page but now I've forgotten how to do everything
Gulsvi
@gulsvi
Apr 30 2017 01:50
@jennifervdh You can always do challenges again - or just dive into the bootstrap documentation and start learning from there. The components section is useful to see what kind of content you can add: http://getbootstrap.com/components/
Jennifer vdh
@jennifervdh
Apr 30 2017 01:54
thank you @SkyCoder01
CamperBot
@camperbot
Apr 30 2017 01:54
jennifervdh sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1228 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Ronique Ricketts
@RoniqueRicketts
Apr 30 2017 01:54
@SkyCoder01 thnaks
@jennifervdh I know the feeling I started over coding in January and Now doing the projects
Keon Samuel
@keonsam
Apr 30 2017 01:58
lol I finished the front-end in 6 weeks.
Eduar Tua
@eduartua
Apr 30 2017 01:58
OMG Congrats
For me is going to take longer
@keonsam
Ronique Ricketts
@RoniqueRicketts
Apr 30 2017 01:59
that's great. So are you jumping to backend now?
Keon Samuel
@keonsam
Apr 30 2017 02:00
maybe front end don't look too good for remote and freelancing.
Ronique Ricketts
@RoniqueRicketts
Apr 30 2017 02:01
@keonsam Yes so get the backend cert and build some things. I have something I want to build
Keon Samuel
@keonsam
Apr 30 2017 02:02
cool we will talk then.
Ronique Ricketts
@RoniqueRicketts
Apr 30 2017 02:02
@keonsam Hey do you have Digicel in your country?
Keon Samuel
@keonsam
Apr 30 2017 02:04
yes
Eduar Tua
@eduartua
Apr 30 2017 02:05
@jennifervdh Keep open the boostrap documentation while coding the page, Also if you don't remember something just go back. It takes times and feels like you wanna quit but don't quit. Only persistence will make you a good developer
Ronique Ricketts
@RoniqueRicketts
Apr 30 2017 02:05
@keonsam we can link up them bro
Eduar Tua
@eduartua
Apr 30 2017 02:06
I am from the Caribbean too
Keon Samuel
@keonsam
Apr 30 2017 02:06
I am thinking flow, digicel and government, but I don't think they will take anyone without a university degree.
Ronique Ricketts
@RoniqueRicketts
Apr 30 2017 02:06
Really? where in the caribbean? @eduartua
Eduar Tua
@eduartua
Apr 30 2017 02:06
I am from Venezuela
From the coast
Ronique Ricketts
@RoniqueRicketts
Apr 30 2017 02:07
@keonsam same thing here but I still wanna build apps and publish them and hope it gets an audience.
Jennifer vdh
@jennifervdh
Apr 30 2017 02:12
Oh I'm never quitting. This is my ticketout of poverty
Ronique Ricketts
@RoniqueRicketts
Apr 30 2017 02:14
@jennifervdh lol i know the feeling
I love coding but sometimes it doesn't love me.
Keon Samuel
@keonsam
Apr 30 2017 02:14
@jennifervdh where you from?
Jennifer vdh
@jennifervdh
Apr 30 2017 02:14
Ontario Canada
Ronique Ricketts
@RoniqueRicketts
Apr 30 2017 02:15
@jennifervdh I heard Canada is a nice place to work and raise a family
Jennifer vdh
@jennifervdh
Apr 30 2017 02:15
I'm actuallon disability but I hate being on it so I'm getting off of it
Keon Samuel
@keonsam
Apr 30 2017 02:15
what poverty in Canada?
Jennifer vdh
@jennifervdh
Apr 30 2017 02:15
my space bar doesn't work all the time
Eduar Tua
@eduartua
Apr 30 2017 02:18
@jennifervdh If you work hard it is going to pay you back! So keep doing it
Jennifer vdh
@jennifervdh
Apr 30 2017 02:19
Ontario is trialling a basic income right now but it's only in 3 cities
Eduar Tua
@eduartua
Apr 30 2017 02:19
I have to plan how to make money to buy my own computer. I am using one computer from the office
Keon Samuel
@keonsam
Apr 30 2017 02:21
I have plans to be a millionaire.
Ronique Ricketts
@RoniqueRicketts
Apr 30 2017 02:22
@keonsam What are you currently moving on to?
Keon Samuel
@keonsam
Apr 30 2017 02:22
react
Eduar Tua
@eduartua
Apr 30 2017 02:23
Guys, Where are you learning react?
Ronique Ricketts
@RoniqueRicketts
Apr 30 2017 02:23
http://beta.freecodecamp.com has a link to reactjs
Keon Samuel
@keonsam
Apr 30 2017 02:24
I currently doing the codecademy to get the basic down.
Eduar Tua
@eduartua
Apr 30 2017 02:24
should I finish here first and then move? Or can I try it now?
Ronique Ricketts
@RoniqueRicketts
Apr 30 2017 02:25
@eduartua you can do it now. I started over with beta when it came out in January/February
Keon Samuel
@keonsam
Apr 30 2017 02:25
how far are you?
Eduar Tua
@eduartua
Apr 30 2017 02:25
I am doing the first algorithm challenges
Keon Samuel
@keonsam
Apr 30 2017 02:26
did you finish the advance algorithm on freecodecamp?
Ronique Ricketts
@RoniqueRicketts
Apr 30 2017 02:26
@keonsam n the main freecodecamp I am just finishing up the twitch tv and on beta I should be starting the reactjs part
I haven't done any algorithms.
I just wanna build the things. With practice the algorithms will get better.
Keon Samuel
@keonsam
Apr 30 2017 02:31
just keep going.
Ronique Ricketts
@RoniqueRicketts
Apr 30 2017 02:33
@keonsam Wanna get my designs better so that I can build full app with Nodejs and the front end technologies. I already know how to request and add info to a server I just gotta get my frontend skills up to par
Keon Samuel
@keonsam
Apr 30 2017 02:36
wow, do you go to university?
Ronique Ricketts
@RoniqueRicketts
Apr 30 2017 02:38
@keonsam NO, I started freecodecamp last year then stopped. So I am just coming back to it. I did the courses on MDN
It helps me to understand JavaScript and they Introduce you to NodeJS and Express.
Keon Samuel
@keonsam
Apr 30 2017 02:40
ok cool.
DJ
@dekjohnson21
Apr 30 2017 02:41
Would anyone be able to look at my code and help tell me where I went wrong? Ha. I've just started learning and I've already hit a snag.
I'm playing around with the tribute challenge and have an issue with the padding, I think, to the right. https://codepen.io/dekjohnson21/pen/jmmPgy
Ronique Ricketts
@RoniqueRicketts
Apr 30 2017 02:42
@keonsam I am off guys. Gn.
Keon Samuel
@keonsam
Apr 30 2017 02:42
Goodnight to you.
Eduar Tua
@eduartua
Apr 30 2017 02:43
Have a good night
@dekjohnson21 Where is the problem?
DJ
@dekjohnson21
Apr 30 2017 02:47
So the dark gray border created by the container is much more narrow on the right side than the left. Though, they should be the same.
Eduar Tua
@eduartua
Apr 30 2017 02:53
Let me check
Roxroy
@roxroy
Apr 30 2017 02:54
@dekjohnson21 , I see what you are saying let me check it
anfusion
@anfusion
Apr 30 2017 02:54
Ezcuzi, wondering if anyone couldn't help with a padding/margin problem on my pen...
jaizon
@jaizon
Apr 30 2017 02:56
@anfusion what's your problem?
anfusion
@anfusion
Apr 30 2017 02:57
@jaizon hey. so, i wanna put some padding between the "Wonder what's in store?" bit and the top edge of the background div. And i can do that, but it doesnt fill with the background color of the div its in... its probably basic but i cant get it goin, any ideas?
https://codepen.io/anfusion/pen/wdJOBW
jaizon
@jaizon
Apr 30 2017 02:58
@anfusion Try with margin then
Roxroy
@roxroy
Apr 30 2017 03:01
@anfusion , add padding : 20px; to the results_container class. You can adjust the number to suite your need.
anfusion
@anfusion
Apr 30 2017 03:01
ok lemme try
Eduar Tua
@eduartua
Apr 30 2017 03:01
@anfusion You can change margin but have to change also the numbers of columns. It has 7 columns and if you add margin the element is going to fall down to the next level
anfusion
@anfusion
Apr 30 2017 03:03
@roxroy that did it thanks !
CamperBot
@camperbot
Apr 30 2017 03:03
anfusion sends brownie points to @roxroy :sparkles: :thumbsup: :sparkles:
:cookie: 789 | @roxroy |http://www.freecodecamp.com/roxroy
anfusion
@anfusion
Apr 30 2017 03:04
@eduartua oh yep? ill have a fiddle see what happens chz
Roxroy
@roxroy
Apr 30 2017 03:05
@anfusion , no problem, now you can continue working on optimus prime.
jonathanpuc
@jonathanpuc
Apr 30 2017 03:05
Hi guys! I'm doing the TWITCH API project and I just have to questions.. For some reason comster404 and brunofin names are returning as undefined, also for those who dont have logos how do I insert a temporary placeholder? Here is my code, excuse me if its a bit messy! Thank you in advance.
anfusion
@anfusion
Apr 30 2017 03:06
@roxroy hehe u know it, chz
Roxroy
@roxroy
Apr 30 2017 03:08
@anfusion , Yep. I am a autobot fan.
anfusion
@anfusion
Apr 30 2017 03:11
niceee
Ken Haduch
@khaduch
Apr 30 2017 03:32
@jonathanpuc - it looks like "comster404" does not have an account (at least not on the current setup using wind-bow?) so you are trying to get the name from the returned data and it isn't there. Same thing for "brunofin" - it looks like you would have to be checking the error status. As for a placeholder, you can make something up, or I have seen people access some placeholder site, not sure of the name - but a search for it looks like https://www.placehold.it/ is a site for that, and an article about it is here: https://www.longren.io/image-placeholders/ - so that might help? http://lorempixel.com/ looks like another one.
jonathanpuc
@jonathanpuc
Apr 30 2017 03:47
Yeah I had a feeling it was because of the change to wind-bow that I'm having this issue. And in regards to the logo the issue I was having was what code to write to get the browser to render my own image if a logo did not exist, I think i've got it now though. Thanks Ken.
Gulsvi
@gulsvi
Apr 30 2017 03:55
@jonathanpuc Those two users are provided as part of the challenge because your code needs to handle non-existent accounts. Nothing to do with wind-bow, it's part of the challenge :)
For a placeholder image, you may also consider using the image that twitch uses for non-existent users: You can see it here: https://www.twitch.tv/404
The resource is here: https://web-cdn.ttvnw.net/images/xarth/dead_glitch.png
jonathanpuc
@jonathanpuc
Apr 30 2017 03:56
@SkyCoder01 oh okay, darn it. I've been struggling with it for so long. Don't know why it wont return the right data!
Gulsvi
@gulsvi
Apr 30 2017 03:57
Twitch is really complicated :) lots of stuff going on!
jonathanpuc
@jonathanpuc
Apr 30 2017 03:58
@SkyCoder01 Never mind I just got it! :D
Gulsvi
@gulsvi
Apr 30 2017 03:58
Good job :+1:
:)
arslantx
@arslantx
Apr 30 2017 05:38
Does any one of you have problems with codepen. There's something wrong with their cdn integration. I built my random quote project with Visual Studio Code and it runs perfectly, however no matter what I do I can't get it run on Codepen.
h1tag
@h1tag
Apr 30 2017 05:40
@arslantx share the pen link
h1tag
@h1tag
Apr 30 2017 06:00
@arslantx check the browser console, you have an error
arslantx
@arslantx
Apr 30 2017 06:03
yes it can't reach the json source. But it works when I run the file locally. very strange.
h1tag
@h1tag
Apr 30 2017 06:03
yes, click on "learn more" beside the error
I suggest you use a different API, because after I fixed the errors, it's still not working
arslantx
@arslantx
Apr 30 2017 06:09
Solved. Problem is HTTPS.
i should've said found the problem. not solved.
h1tag
@h1tag
Apr 30 2017 06:09
is it working now?
arslantx
@arslantx
Apr 30 2017 06:09
i don't know how to solve it.
h1tag
@h1tag
Apr 30 2017 06:09
i see
arslantx
@arslantx
Apr 30 2017 06:09
when I open it with http it works
h1tag
@h1tag
Apr 30 2017 06:09
it seems this api doesn't support https
so use a different api
Lucas Mazzitelli
@duffmckagan
Apr 30 2017 06:10

<html lang="en">
<head>

<title>Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:bold,light" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>

<style>
#font{

font-family:'Open Sans',bold;
}


</style>

<div class="jumbotron text-center">
<h1 id="font">Full Stack Developer</h1>
<p id="lol">Soy un todo terreno, preparado para cubrir todas las necesidades</p><p id="lols"> desde el backend, pasando por el front end y un entusiasta diseñador UX/UI
</div>

</body>
</html>

</html>

why my css turns in light font if i put bold?? i dont get it,
Lucas Mazzitelli
@duffmckagan
Apr 30 2017 06:17
@duffmckagan https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight thanks dude, sorry for my english
CamperBot
@camperbot
Apr 30 2017 06:17
sorry duffmckagan, you can't send brownie points to yourself! :sparkles: :sparkles:
Lucas Mazzitelli
@duffmckagan
Apr 30 2017 06:18
@fortMaximus thanks dude, sorry for my english
mendogentleman
@mendogentleman
Apr 30 2017 06:18
@duffmckagan you should declare a font-weight within your style tag and apply the bold there
Vikas Saraf
@saraf007
Apr 30 2017 07:04
i need some help with my submit text area
it is coming on left lower corner and i want to on left upper corner
<label for="subject">Message:</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:100px"></textarea><br>
and css is
textarea {
width: 80%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
}
please help asap
shivam gupta
@shivamg11000
Apr 30 2017 07:10
hey campers I have redesigned my tribute page.
Have a look at it.
http://codepen.io/shivamg11000/full/yMrxQq/
Semak
@drdextar
Apr 30 2017 09:37
I am working on the wikipedia viewer and i am able to get the api response using jsonp.
now i am not sure how i can the Array item into the page.
h1tag
@h1tag
Apr 30 2017 09:42
@drdextar you'll have to access the property that you want to display (from the returned object)
Semak
@drdextar
Apr 30 2017 09:44
@fortMaximus do i need to use the append function for appending the property.
h1tag
@h1tag
Apr 30 2017 09:45
@drdextar yes
Sreeram
@sreeram004
Apr 30 2017 09:47
i am working on the weather app. i use open weather map api. i have made the api key and i am getting correct response from browser. i tried to call the api from js. but its not working. https://codepen.io/Spectre004/pen/oWWLrX
Semak
@drdextar
Apr 30 2017 09:48
@fortMaximus i believe the difficult part was to get the API response correctly.
h1tag
@h1tag
Apr 30 2017 09:48
@sreeram004 if you check the browser console, you'll see a mixed content error
@drdextar yes
Sreeram
@sreeram004
Apr 30 2017 09:49
@fortMaximus why is that happening.?
h1tag
@h1tag
Apr 30 2017 09:50
@sreeram004 there's a learn more link beside the error, click on it
Sreeram
@sreeram004
Apr 30 2017 09:52
@fortMaximus let me seee
@fortMaximus i can't really understand what the problem is.. :(
h1tag
@h1tag
Apr 30 2017 09:54
@sreeram004 did u check the "learn more" link?
h1tag
@h1tag
Apr 30 2017 10:01
basically this error happens when you have http and https in the same page
Sreeram
@sreeram004
Apr 30 2017 10:01
@fortMaximus yes. i tried changing to https.. still i dont get the result
h1tag
@h1tag
Apr 30 2017 10:02
@sreeram004 yea, because openweather doesn't support https
so, use another api, like: darksky, apixu
Sreeram
@sreeram004
Apr 30 2017 10:02
so what can i do.? go for another api.?
ok..let me try.. ty
Sreeram
@sreeram004
Apr 30 2017 10:10
@fortMaximus well, i tried using dark sky. still no result
naveenmehta
@naveenmehta
Apr 30 2017 10:14
hey i am in trouble anyone there for help..?
Sreeram
@sreeram004
Apr 30 2017 10:14
@fortMaximus i used apixu. now it worked fine.
Brandon Blackwell
@Radlerz1
Apr 30 2017 10:15
hello can I get someone in pm to help me with something quick?
naveenmehta
@naveenmehta
Apr 30 2017 11:02
hello
anyone
how can i add two backgrounds inn a single web pge
using css only
Keon Samuel
@keonsam
Apr 30 2017 11:08
div
a changing background or two different background on one page?
Ashan Mohammed
@AshanMohammed
Apr 30 2017 11:24
Hello,
I am working on xampp local server. When i link my external stylesheet to php inside the head tag and when i open it, it doesn't work. But when i change the .php file to .html file and open the file without using local server it work.
Help please
what you guys think?
jonathanpuc
@jonathanpuc
Apr 30 2017 11:33
@shadownet94 nice! I'm a big fan of Tesla!
marco seoane
@marcoseoane
Apr 30 2017 11:35
my second image is way off the page when viewed in thise mode is there a way to fix that
heroiczero
@heroiczero
Apr 30 2017 11:37
@shadownet94 i cant see the first image but good job and nice text
jonathanpuc
@jonathanpuc
Apr 30 2017 11:37
It's fine for me in this chat?
marco seoane
@marcoseoane
Apr 30 2017 11:38
cant think why the second image doesnt resive
resize*
jonathanpuc
@jonathanpuc
Apr 30 2017 11:40
oh i get you
marco seoane
@marcoseoane
Apr 30 2017 11:40
can anyone help me with the whole user story thing for this challenge
jonathanpuc
@jonathanpuc
Apr 30 2017 11:40
in your CSS. Write "img { width:100%}"
marco seoane
@marcoseoane
Apr 30 2017 11:40
thanks bro
jonathanpuc
@jonathanpuc
Apr 30 2017 11:40
should work, no worries man
marco seoane
@marcoseoane
Apr 30 2017 11:42
what does the whole user story thing mean
lost on this part
is it adding some kind of commentary in the cde
code
jonathanpuc
@jonathanpuc
Apr 30 2017 11:46
nah, it means that the person who is on site is able to experience this or that. Its kind of like guidelines of what your site should be able to provide or do for the user.
marco seoane
@marcoseoane
Apr 30 2017 11:47
so i dont have to add anything in to accomplish that part of the task?
jonathanpuc
@jonathanpuc
Apr 30 2017 11:47
let me have a look at the challenge to make sure, 1 sec
marco seoane
@marcoseoane
Apr 30 2017 11:47
just the fact that have a tribute page with image and text and a link that takes the user to an external source of further information mean that ive done that part
?
thanks
jonathanpuc
@jonathanpuc
Apr 30 2017 11:47

User Story: I can view a tribute page with an image and text.

User Story: I can click on a link that will take me to an external website with further information on the topic.

Yep you fulfilled all those stories!
you can move on :)
marco seoane
@marcoseoane
Apr 30 2017 11:48
thanks bro
nice
jonathanpuc
@jonathanpuc
Apr 30 2017 11:48
welcome
good job
marco seoane
@marcoseoane
Apr 30 2017 11:48
for someone whos been coding for three days was my first page a job well done then?
ah thanks! much appreciated
jonathanpuc
@jonathanpuc
Apr 30 2017 11:49
yeah pretty impressive! but everyone learns at a different rate, you can even spice up your tribute page later down the road when you learn more
this is my tribute page
marco seoane
@marcoseoane
Apr 30 2017 11:51
thats awesome!
will keep trucking forward!
jonathanpuc
@jonathanpuc
Apr 30 2017 11:51
goodluck!
Khoa Le
@Zacele
Apr 30 2017 11:53
@jonathanpuc are U a Vietnamese ??
jonathanpuc
@jonathanpuc
Apr 30 2017 12:08
@Zacele no my heritage is east timorese and chinese, born in Australia
Khoa Le
@Zacele
Apr 30 2017 12:08
oh nice anyway your tribute page about Kobe is pretty dope
jonathanpuc
@jonathanpuc
Apr 30 2017 12:09
thanks man :)
Jakub Kałamarz
@kkalamarz
Apr 30 2017 13:35
Hello, can any1 tell me, why every element of html is displayed in new line?
Roxroy
@roxroy
Apr 30 2017 13:42
@kkalamarz , it is one line of text that is wrapped so that it fits in to the white box. If you make the box bigger it will take up less lines.
Jakub Kałamarz
@kkalamarz
Apr 30 2017 13:43
@roxroy When i use bootstrap col-md-6 for two element, it should be one next to another?
jump020305
@jump020305
Apr 30 2017 13:44

@all when i click section 1 section 1 content opens.

when i click section 1 content back it closes but when it closes i see it two times.
when section 1 body is about to close i see section 1 content but green background is dissappeared
i debugged the code when i printed children it printed section 1 only once.
i debugged react addon.js code...there also it called setValueForProperty for only once.
providing my code in the fiddle.
http://jsfiddle.net/b4L6kyg4/79/

Roxroy
@roxroy
Apr 30 2017 13:45
@kkalamarz , that would work in bootstrap 3.3.7 but you are using BS4, which has different classes for the grid.
Jakub Kałamarz
@kkalamarz
Apr 30 2017 13:45
@roxroy I will look at bootstrap4 doc
@roxroy thanks
CamperBot
@camperbot
Apr 30 2017 13:45
kkalamarz sends brownie points to @roxroy :sparkles: :thumbsup: :sparkles:
:cookie: 796 | @roxroy |http://www.freecodecamp.com/roxroy
Vanessa Valentine Laurentz
@vanessavalentine
Apr 30 2017 13:48
@jonathanpuc wow what a awesome tribute page you got there! did you learn all that in just free code camp? how long have you been coding?
Does anyone knows how to use a picture for a background? i just started on the portfolio
Bill Hefty
@bhefty
Apr 30 2017 13:53
@vanessavalentine you can use CSS background: url("https://image.jpg");
Sreeram
@sreeram004
Apr 30 2017 14:20
i was doing the weather app challenge.. it was working fine.. now it stopped working. i may have miss clicked or done something unknowingly. help me to fix this. http://codepen.io/Spectre004/pen/oWWLrX/
colourmein13
@colourmein13
Apr 30 2017 14:44
I'm doing the Dr. Norman challenge
What link should I add to the src attribute to add the image?
Roxroy
@roxroy
Apr 30 2017 14:59
@sreeram004 , its an issue with codepen. Try this link, notice it is using https not http
.
@colourmein13 , can;' find that challenge, can you check for the exact name.
Yahia
@y-zaky
Apr 30 2017 15:03
hi guys
why is free code camp not accepting this?
<style>
  .red-text {

    color: red;

  }
</style>

<h2>CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
Use a CSS Class to Style an Element ...
Roxroy
@roxroy
Apr 30 2017 15:04
@bowssy88 , you are missing the class="red-text' for the element. That is how you apply a style to an element.
Yahia
@y-zaky
Apr 30 2017 15:05
@roxroy
<style>
  .red-text {

    color: red;
    class="red.text";
  }
</style>

<h2>CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
@roxroy still wrong? surely now its o
k
Roxroy
@roxroy
Apr 30 2017 15:07
@bowssy88 , no no.. You cannot put it there. you would use it like <h2 class= "red-text">CatPhotoApp</h2>, or what ever class the instructions says
@bowssy88 , what is the name of the challenge you are on?
Yahia
@y-zaky
Apr 30 2017 15:08
@roxroy thank you !
CamperBot
@camperbot
Apr 30 2017 15:08
bowssy88 sends brownie points to @roxroy :sparkles: :thumbsup: :sparkles:
:cookie: 801 | @roxroy |http://www.freecodecamp.com/roxroy
Yahia
@y-zaky
Apr 30 2017 15:09
done :)
Roxroy
@roxroy
Apr 30 2017 15:09
@bowssy88 , good work.
Yahia
@y-zaky
Apr 30 2017 15:09
it was Use a CSS Class to Style an Element
Roxroy
@roxroy
Apr 30 2017 15:10
@bowssy88 , Cool. Carry on and ping me if you have questions.
Yahia
@y-zaky
Apr 30 2017 15:22
@roxroy know whats wrong here bro?
<style>
  .red-text {
    color: red;

  }

  .p {
    font-size: 16px;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

<p> Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. </p>
Change the don't size of an element
is the task
font*
$(document).ready(function() {
    $('.channels').children().each(function () {
        var name = $(this).children("h2.channel-name").text();
        console.log(name);
        var jsonData = setTwitchStreams(name); //
        var status = "Offline";
        if (jsonData.status != null && typeof jsonData.status != 'undefined') {
          status = jsonData.status;
        } 
        $(this).children("h2.channel-status").text(status);
    });
});
Roxroy
@roxroy
Apr 30 2017 15:27
@bowssy88 , `<p class="red-text">' will make it red, to change the font size you want to edit p { font-size: 16px; }.
Tegh
@teghmehta
Apr 30 2017 15:27
I want to get the status and set it, but its saying that the status is undefined
colourmein13
@colourmein13
Apr 30 2017 15:28
@roxroy Build a tribute challenge
I've added a class to the img element that has border radius: 50% but it doesn't make the image circular
Roxroy
@roxroy
Apr 30 2017 15:30
@colourmein13 , what is the link to the pen?
Yahia
@y-zaky
Apr 30 2017 15:34
@roxroy
<style>
  .red-text {
    color: red;
    font-size: 16px;

  }


</style>

<h2 class="red-text">CatPhotoApp</h2>

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

<p> Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. </p>
whats wrong? still not working
Roxroy
@roxroy
Apr 30 2017 15:38
@bowssy88 , can you remind me of the name of the challenge you are on?
Yahia
@y-zaky
Apr 30 2017 15:39
Change the font size of an element
@roxroy
Roxroy
@roxroy
Apr 30 2017 15:42
@bowssy88 , add back the p { font-size: 16px; } to the styles and remove font-size: 16px; from the .red-text style
Gabriel
@xGabey
Apr 30 2017 15:42
quick question all; I made my twitch app in january of this year, and it worked. Now all of a sudden, the code stopped working and only my markup and design executes. Was there an api update?!?!
Yahia
@y-zaky
Apr 30 2017 15:43
@roxroy still no joy !!
<style>
  .red-text {
    color: red;

  }

  .p {
     font-size: 16px; 
  }


</style>

<h2 class="red-text">CatPhotoApp</h2>

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

<p> Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. </p>
Roxroy
@roxroy
Apr 30 2017 15:43
@xGabey , there was no API change. i have to adjust mine as well.
Gabriel
@xGabey
Apr 30 2017 15:43
@roxroy ok and how did you adjust yours?
sry just a bit confused.
Yahia
@y-zaky
Apr 30 2017 15:44
@roxroy this task is so easy but why is it not letting me pass
Roxroy
@roxroy
Apr 30 2017 15:44
@bowssy88 , I seem change .p { top {` you dont need the . in this case.
Yahia
@y-zaky
Apr 30 2017 15:45
@roxroy yay thank you !
CamperBot
@camperbot
Apr 30 2017 15:45
bowssy88 sends brownie points to @roxroy :sparkles: :thumbsup: :sparkles:
:warning: bowssy88 already gave roxroy points
Yahia
@y-zaky
Apr 30 2017 15:45
@roxroy why don't you need the . ?
i thought all style you need . ?
Roxroy
@roxroy
Apr 30 2017 15:46
@bowssy88 .p would be a class named p, p is the <p> tag
@xGabey , I don't specifically remember. What is the link to your code?
Yahia
@y-zaky
Apr 30 2017 15:47
thanks got it
Roxroy
@roxroy
Apr 30 2017 15:48
@bowssy88 , np. :+1:
Gabriel
@xGabey
Apr 30 2017 15:50
it used to work fine.
Yahia
@y-zaky
Apr 30 2017 15:52
@roxroy
i want to make h2 only have font Lobster
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
  .red-text {
    color: red;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }
</style>

<h2 class="red-text" font-family=Lobster >CatPhotoApp</h2>

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
not working
what do i do?
Gabriel
@xGabey
Apr 30 2017 15:53
@bowssy88 just go into css add a class selector for red text and give it the font family of lobster
Yahia
@y-zaky
Apr 30 2017 15:54
@xGabey but then my p will also be lobster
the p must remain monospace font
Gabriel
@xGabey
Apr 30 2017 15:54
ok, then add another class inside the same class tag with a space and call that one. like font-changer.
Yahia
@y-zaky
Apr 30 2017 15:54
@xGabey what do u mean
Gabriel
@xGabey
Apr 30 2017 15:54
just inside class="red-text font-changer" then add the font in font-changer in your css.
Yahia
@y-zaky
Apr 30 2017 15:55
@xGabey don't understand..... in the same line i currently have font-family = lobster>
?
Roxroy
@roxroy
Apr 30 2017 15:56
@xGabey , here is the reason why it does not work
XMLHttpRequest cannot load https://wind-bow.gomix.me/twitch-api/channels/storbeck. Redirect from 'https://wind-bow.gomix.me/twitch-api/channels/storbeck' to 'https://wind-bow.glitch.me/twitch-api/channels/storbeck' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.
Yahia
@y-zaky
Apr 30 2017 15:56
any ideas guys? @roxroy
Gabriel
@xGabey
Apr 30 2017 15:58
@roxroy cool, hang on...
Yahia
@y-zaky
Apr 30 2017 15:58
@xGabey help please !
Gabriel
@xGabey
Apr 30 2017 15:59
@bowssy88 wait a minute, please.
Yahia
@y-zaky
Apr 30 2017 15:59
@xGabey can i write font family i this line
<h2 class="red-text" >CatPhotoApp</h2>
that way only that line gets it
Gabriel
@xGabey
Apr 30 2017 16:01
@roxroy ty!
CamperBot
@camperbot
Apr 30 2017 16:01
xgabey sends brownie points to @roxroy :sparkles: :thumbsup: :sparkles:
:cookie: 805 | @roxroy |http://www.freecodecamp.com/roxroy
Gabriel
@xGabey
Apr 30 2017 16:01
@bowssy88 ok, so
Roxroy
@roxroy
Apr 30 2017 16:02
@xGabey , there you good. You are back in business.
Yahia
@y-zaky
Apr 30 2017 16:02
i ended up doing this... not sure if its cheating
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
  .red-text {
    color: red;
    font-family: Lobster
  }

  p {
    font-size: 16px;
    font-family: Monospace;
    color:red;
  }
</style>

<h2 class="red-text"  >CatPhotoApp</h2>

<p >Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p >Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
just deleted the class from p
Gabriel
@xGabey
Apr 30 2017 16:02
@bowssy88 cool
Yahia
@y-zaky
Apr 30 2017 16:02
and edited .red-text
Gabriel
@xGabey
Apr 30 2017 16:03
@roxroy yep all set! I actually figured that out before i asked, but forgot to change both calls. Appreciate it!
Yahia
@y-zaky
Apr 30 2017 16:03
@xGabey thank you, what were you going to suggest before i sent that?
CamperBot
@camperbot
Apr 30 2017 16:03
bowssy88 sends brownie points to @xgabey :sparkles: :thumbsup: :sparkles:
:cookie: 335 | @xgabey |http://www.freecodecamp.com/xgabey
Gabriel
@xGabey
Apr 30 2017 16:04
@bowssy88 so where you have red-text as a class, inside those quotes just add a space and put another class of any other name. And then put that class in your css like .this-other-class {
and lobster font in here}
sry if that was confuing
confusing*
kyewilliams
@kyewilliams
Apr 30 2017 16:08
Hey guys, by any chance someone can tell me where's the error in my coding: .pageOne{
background:url("https://unsplash.com/collections/780567/my-first-collection/20be3e672abae63be436d31db2e4f863?photo=3N5ccOE3wGg");
background-size:cover;
}
I'm trying to add an image to my portfolio and I hit a wall.
marco seoane
@marcoseoane
Apr 30 2017 16:26
whatsup people, can anyone clarify this for me. im on the challenge where you have to make a portfolio page, and it says use bootstrap to help put some of it together. will i have to load bootstrap in the code (started watching some tuts on bootstrap and saw the guy specifying to load bootstrap in the code)
kyewilliams
@kyewilliams
Apr 30 2017 16:34
@shadownet94 settings-click on CSS-go down to quick add-click bootstrap. I think that's what you're asking, Marco
_
marco seoane
@marcoseoane
Apr 30 2017 16:35
thanks mate
yeah was just asking if theres anything i need to do to enable the use of bootstrap or is codepen all set to go
Rocky-Balboa
@Rocky-Balboa
Apr 30 2017 16:45
Hi Guys, Could please somebody help me with one thing in my portfolio page?
Spyrantis Theodoros
@thodorisanta
Apr 30 2017 16:51
any tips on doing the bot on the tic tac toe project :worried:
Roxroy
@roxroy
Apr 30 2017 17:01
@Rocky-Balboa , what is the issue and the link to the page?
Rocky-Balboa
@Rocky-Balboa
Apr 30 2017 17:02
@roxroy Nvm now i fucked it all up :D
Roxroy
@roxroy
Apr 30 2017 17:03
@Rocky-Balboa , can have a look to see whether I can help. What is the link?
Rocky-Balboa
@Rocky-Balboa
Apr 30 2017 17:04
@roxroy Can you just tell me one thing
Roxroy
@roxroy
Apr 30 2017 17:04
@Rocky-Balboa , sure
Rocky-Balboa
@Rocky-Balboa
Apr 30 2017 17:05
@roxroy so i want to use boostrap to create something like : (all in one row and 4 columns ) 1col = text 2col=image 3col=image 4col=img
Yahia
@y-zaky
Apr 30 2017 17:05
@xGabey thanks got it
CamperBot
@camperbot
Apr 30 2017 17:05
bowssy88 sends brownie points to @xgabey :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @xgabey |http://www.freecodecamp.com/xgabey
Yahia
@y-zaky
Apr 30 2017 17:05
thanks @bowssy88
CamperBot
@camperbot
Apr 30 2017 17:05
sorry bowssy88, you can't send brownie points to yourself! :sparkles: :sparkles:
Rocky-Balboa
@Rocky-Balboa
Apr 30 2017 17:05
@roxroy So do i think correctly: i do <div class="container"> <div class="row"> and then i put 4 div col blebleble inside ?
Roxroy
@roxroy
Apr 30 2017 17:07
@Rocky-Balboa , yes the row part will look like this
<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>
Rocky-Balboa
@Rocky-Balboa
Apr 30 2017 17:08
so i did it: and it doesn't look like 4 cols in 1 row
what i did wrong?

<div class="container firstcol">
<section id="section-1">
<div class="row">
<div class="col-xs-4 col-sm-4 col-lg-4">
<h1>My Name</h1>
<h2><em>I will be front end web developer soon!</em></h2>
</div>

  <div class="col-xs-2 col-sm-2 col-lg-2 pad">
    <a href="https://www.facebook.com/"><img class="social" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-128.png"></img></a>
    </div> 

      <div class="col-xs-2 col-sm-2 col-lg-2 pad">
    <a href="https://www.facebook.com/"><img class="social" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-linkedin-128.png"></img></a> </div> 


    <div class="col-xs-2 col-sm-2 col-lg-2 pad">
    <a href="https://www.facebook.com/"><img class="social" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/github-128.png"></img></a>
    </div>

</div>
</div>

Roxroy
@roxroy
Apr 30 2017 17:10
@Rocky-Balboa , you are using <div class="col-xs-2 col-sm-2 col-lg-2 pad"> which is not <div class="col-xs-4 col-sm-4 col-lg-4 pad">
Rocky-Balboa
@Rocky-Balboa
Apr 30 2017 17:10
@roxroy should it be 12 in summarY?
@roxroy i want the first column to be bigger
@roxroy Doesn't matter i fixed it XD I had to many margins in css on .pad class :DDDd
@roxroy Thank you tough :D
Roxroy
@roxroy
Apr 30 2017 17:11
@Rocky-Balboa , all the columns should add up to 12,
Rocky-Balboa
@Rocky-Balboa
Apr 30 2017 17:12
@roxroy That too, but i just noticed that my .pad class had 20 padding and 20% margin i'm, dumb
@roxroy Thank you
CamperBot
@camperbot
Apr 30 2017 17:12
rocky-balboa sends brownie points to @roxroy :sparkles: :thumbsup: :sparkles:
:cookie: 806 | @roxroy |http://www.freecodecamp.com/roxroy
Rocky-Balboa
@Rocky-Balboa
Apr 30 2017 17:13
@roxroy i'm working on this https://codepen.io/Rocky-Balboa/pen/KmmgGL?editors=1100 but i messed up with all the divs collums which im repairing them now
Roxroy
@roxroy
Apr 30 2017 17:13
@Rocky-Balboa , so it was also the pad class. no problem
Rocky-Balboa
@Rocky-Balboa
Apr 30 2017 17:19
@roxroy Sorry can you help me again please? :)
Roxroy
@roxroy
Apr 30 2017 17:20
@Rocky-Balboa , what's up?
Rocky-Balboa
@Rocky-Balboa
Apr 30 2017 17:21
@roxroy why does the background from about me and my project connecting together, and the one from my projects and contact me not ?
Roxroy
@roxroy
Apr 30 2017 17:25
@Rocky-Balboa , your ending tags for the div are broken. The open and closing do not match.
Rocky-Balboa
@Rocky-Balboa
Apr 30 2017 17:25
@roxroy In contact me section?
Matt
@Misaiah
Apr 30 2017 17:26
Hello All! Can someone help me with if/else statements?
Rocky-Balboa
@Rocky-Balboa
Apr 30 2017 17:29
@roxroy I think i fixed all the tags but still nothing changes
Roxroy
@roxroy
Apr 30 2017 17:31
@Rocky-Balboa , I notice that you are using BS4, and not Bootstrap 3, Is there a reason for that?
Rocky-Balboa
@Rocky-Balboa
Apr 30 2017 17:32
@roxroy You mean the nav?
@roxroy ye, i know i though that its good to use 4, i can change nav pretty quick right now i have problem with these backgrounds that just dont connect
Roxroy
@roxroy
Apr 30 2017 17:34
@Rocky-Balboa , no in the setting page you are using BS4, The class name are different. Many BS3 classes have a different name in BS4, many don't work at all. Plus FCC is based on BS3
Rocky-Balboa
@Rocky-Balboa
Apr 30 2017 17:35
@roxroy och how do i change it to bootstrap 3? i can add only bootstrap 4
@roxroy when i click quick add it adds bootstrap 4
Roxroy
@roxroy
Apr 30 2017 17:38
@Rocky-Balboa , try https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Rocky-Balboa
@Rocky-Balboa
Apr 30 2017 17:38
@roxroy Thanks seems like it work, my background still dont work tough :/
CamperBot
@camperbot
Apr 30 2017 17:38
rocky-balboa sends brownie points to @roxroy :sparkles: :thumbsup: :sparkles:
:warning: rocky-balboa already gave roxroy points
Roxroy
@roxroy
Apr 30 2017 17:45
@Rocky-Balboa , try changing <div class="container content"> to <div class="container project"> to see the effects. You have 2 of them
Rocky-Balboa
@Rocky-Balboa
Apr 30 2017 17:46
@roxroy WORKS!
@roxroy I love you mean
@roxroy Mate
@roxroy can you tell me why did it happen so i can avoid it in the future?
Roxroy
@roxroy
Apr 30 2017 17:51
@Rocky-Balboa , it is because you included the class content that had a style that affected the layout. The lesson here is to only use the styles you define and need.
Rocky-Balboa
@Rocky-Balboa
Apr 30 2017 17:52
@roxroy Thank you bud
CamperBot
@camperbot
Apr 30 2017 17:52
rocky-balboa sends brownie points to @roxroy :sparkles: :thumbsup: :sparkles:
:warning: rocky-balboa already gave roxroy points
Rocky-Balboa
@Rocky-Balboa
Apr 30 2017 17:52
@roxroy I will remember that lesson because i was sitting 2 hours trying to figure out what is wrong
Matt
@Misaiah
Apr 30 2017 17:52
@roxroy you think you could help me out?
Roxroy
@roxroy
Apr 30 2017 17:54
@Misaiah , need to do some thing like .. var word = document.getElementById("word").value; //by id to get the data from the input field
Matt
@Misaiah
Apr 30 2017 17:55
I understand the array and document.getElementById("").....but why ".value;" and "//by id"?
@roxroy
Roxroy
@roxroy
Apr 30 2017 17:56
@Misaiah , that gives you the value that was entered by the user
@Misaiah , you first get the field and then extract the value that was keyed in
Matt
@Misaiah
Apr 30 2017 17:58

hmmmm.

so it would be something like...

if(tbox1 = "") {
document.getElementById("tbox1").value = alert("this field must be keyed in")
}

@roxroy
Roxroy
@roxroy
Apr 30 2017 18:01
@Misaiah , no var lastName = document.getElementById("tbox2").value; this gives you the lastName.
You can then alert(lastName) or so some thing like if (lastName === 'smith') alert (" Good day ");
Jorge
@OrangeKulture
Apr 30 2017 18:01
hey hows it going guys
Roxroy
@roxroy
Apr 30 2017 18:03
@OrangeKulture , it is busy here. Hope you can help some of the campers questions.
Matt
@Misaiah
Apr 30 2017 18:03
@roxroy ....for the variable, can I use the input id's to link to the specific textbox?
because I have 4 textboxes I would like to make specific to a different string
Roxroy
@roxroy
Apr 30 2017 18:03
@Misaiah , btw. What challenge are one
Jorge
@OrangeKulture
Apr 30 2017 18:03
@roxroy yeah i see everyone is up and about today!
sure thing !
Matt
@Misaiah
Apr 30 2017 18:04
I branched away from the input challenges to try and do it myself for a better understanding@roxroy
@roxroy
r2d2
@UsamaHameed
Apr 30 2017 18:05
What is the difference between npm run and just npm?
Jorge
@OrangeKulture
Apr 30 2017 18:06
@UsamaHameed think it has to do with the scripts packages
@UsamaHameed if you do run, then you need to provide a command for npm to run .. if u just go npm it will list all scripts
something along those lines, can't remember 100% tho, sry .. maybe BackEnd can help you out
Matt
@Misaiah
Apr 30 2017 18:08
I appreciate the help @roxroy
r2d2
@UsamaHameed
Apr 30 2017 18:08
Is there a room for backend?
Jorge
@OrangeKulture
Apr 30 2017 18:08
@UsamaHameed sure is .. HelpBackEnd
Roxroy
@roxroy
Apr 30 2017 18:08
@Misaiah , follow the order of the challenges as it build on the next one.
Matt
@Misaiah
Apr 30 2017 18:10
I will try @roxroy . I try and get into the habit of not only doing the challenges, but seeing if I can do it outside on my own too. and thats why I am where I am
Thanks again @roxroy
CamperBot
@camperbot
Apr 30 2017 18:10
misaiah sends brownie points to @roxroy :sparkles: :thumbsup: :sparkles:
:cookie: 807 | @roxroy |http://www.freecodecamp.com/roxroy
r2d2
@UsamaHameed
Apr 30 2017 18:11
thanks @OrangeKulture
CamperBot
@camperbot
Apr 30 2017 18:11
:cookie: 350 | @orangekulture |http://www.freecodecamp.com/orangekulture
usamahameed sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
Jorge
@OrangeKulture
Apr 30 2017 18:12
sure thing @UsamaHameed
Matt
@Misaiah
Apr 30 2017 18:13
=-Zxfghjkl;'
][0987654321`1234567890-
Roxroy
@roxroy
Apr 30 2017 18:13
@Misaiah , That is correct, but the best way to learn is to follow a good roadmap and although it is good to skip ahead, you should not jump ahead too many steps. Otherwise you get lost and frustrated.
@UsamaHameed , are you doing the backend challenges, which one are you one.
Yahia
@y-zaky
Apr 30 2017 18:14
hi guys i have a question
Matt
@Misaiah
Apr 30 2017 18:14
@roxroy HAHA thats very true. This can be very frustrating...especially when you have an idea you cant yet generate lol
Yahia
@y-zaky
Apr 30 2017 18:15
why must related <label/> elements have the same name?
r2d2
@UsamaHameed
Apr 30 2017 18:15
@roxroy I am learning react on pluralsight
Yahia
@y-zaky
Apr 30 2017 18:15
why is that important?
also why must All related checkbox inputs should have the same name attribute.
what is the importance
Roxroy
@roxroy
Apr 30 2017 18:16
@UsamaHameed , Nice. I also used that site to prep for it as well.
Jorge
@OrangeKulture
Apr 30 2017 18:16
btw guys, if you are having some trouble with the Twitch API, let me know .. think i got it working fine
any hockey fans? :snowflake:
@bowssy88 u need a way of referencing the label input
r2d2
@UsamaHameed
Apr 30 2017 18:18
football :P
@roxroy the curriculum is very good
Jorge
@OrangeKulture
Apr 30 2017 18:19
You would normally want to do something with that input and you need to grab it form the elements .. that + syntax
@UsamaHameed well yeah obvs football .. im from Costa Rica dude
Yahia
@y-zaky
Apr 30 2017 18:19
@OrangeKulture thanks
CamperBot
@camperbot
Apr 30 2017 18:19
bowssy88 sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 351 | @orangekulture |http://www.freecodecamp.com/orangekulture
Jorge
@OrangeKulture
Apr 30 2017 18:20
@bowssy88 sure
Yahia
@y-zaky
Apr 30 2017 18:21
@OrangeKulture but when will we be able to reference all the same labels
like do you have an example of when the fact that we names all the labels the same actually becomes useful?
Roxroy
@roxroy
Apr 30 2017 18:22
@UsamaHameed , it use it as much as I can. The videos are high quality and professionally done. Always a great leaning experience and I feel much smarter at the end. I sure you think the same way too.
Jorge
@OrangeKulture
Apr 30 2017 18:23
@bowssy88 think i do .. hold on
@bowssy88 this is part of a little fun JS quiz i did ..
<h3>1. In which HTML element do we put in Javascript code?</h3>
    <input type="radio" name="q1" value="a" id="q1a"> a. &lt;js&gt; <br>
    <input type="radio" name="q1" value="b" id="q1b"> b. &lt;script&gt; <br>
    <input type="radio" name="q1" value="c" id="q1c"> c. &lt;body&gt; <br>
    <input type="radio" name="q1" value="d" id="q1d"> d. &lt;link&gt; <br>

    <h3>2. Which HTML attribute is used to reference an external Javascript file?</h3>
    <input type="radio" name="q2" value="a" id="q2a"> a. src <br>
    <input type="radio" name="q2" value="b" id="q2b"> b. rel <br>
    <input type="radio" name="q2" value="c" id="q2c"> c. type <br>
    <input type="radio" name="q2" value="d" id="q2d"> d. href <br>
so .. for the JS, you would do something like this:
//get user input
    var q1 = document.forms['quiz']['q1'].value
    var q2 = document.forms['quiz']['q2'].value
    var q3 = document.forms['quiz']['q3'].value
    var q4 = document.forms['quiz']['q4'].value
    var q5 = document.forms['quiz']['q5'].value
@bowssy88 so as you see... we need all q1s to be the same in order to compare to an array of correct answers
r2d2
@UsamaHameed
Apr 30 2017 18:42
@roxroy yes
did you pay for it? @roxroy
Roxroy
@roxroy
Apr 30 2017 18:48
@UsamaHameed , yes I have a subscription. I am now learning about redux to see what is about.
r2d2
@UsamaHameed
Apr 30 2017 18:49
I am doing Building apps with react and redux using ES6
Roxroy
@roxroy
Apr 30 2017 18:53
@UsamaHameed , crazy, I watch that right now as well.
r2d2
@UsamaHameed
Apr 30 2017 18:54
LOL
I am at Module 4: ES6 stateless component
A kind gentleman was offering free one month subscriptions to pluralsight. I got one. Now I think it would be worth it to subscribe.
Roxroy
@roxroy
Apr 30 2017 19:00
@UsamaHameed , started with a 3 month trial at the end decided that it was worth it. I have learnt so much in a short time. Well worth every dollar. I highly recommend it anyone who looking for good paid content and to learn faster.
r2d2
@UsamaHameed
Apr 30 2017 19:03
How much does the subscription cost?
@roxroy
Roxroy
@roxroy
Apr 30 2017 19:11
@UsamaHameed it is US$300 per year.. For now you should make the most use of the trial and learn as much as you can from the site.
Yahia
@y-zaky
Apr 30 2017 19:13
@OrangeKulture thank you so much, very well explained
CamperBot
@camperbot
Apr 30 2017 19:13
bowssy88 sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:warning: bowssy88 already gave orangekulture points
r2d2
@UsamaHameed
Apr 30 2017 19:17
I heard that if you have an .edu email address, you can get a 6 months subscription for free
Jorge
@OrangeKulture
Apr 30 2017 19:17
@bowssy88 sure thing, welcome
Patrick Freitas
@patrickfreitasp
Apr 30 2017 19:37
Hello!
r2d2
@UsamaHameed
Apr 30 2017 19:38
Hi
Amit Patel
@AmitP88
Apr 30 2017 19:45
hey guys, can I ask for your opinion on something? I'm a Udacity graduate (front end) and I've completed my first client website and have two more clients interested in having their websites done too. I'm aiming to get them finished by the end of next month. I'm hoping that if I get these two websites done, then i'll have three client websites, a Udacity front end certification, a portfolio site, and an online resume. With all these things, would it be feasable to start applying for junior developer roles in say June?
Sara
@skd726
Apr 30 2017 19:50
Hello, I"m working on the random quote machine challenge. I am having trouble aligning my tweet function and "next quote" button, so I put them in a row. but this made my button a lot bigger for some reason. does anyone know why?
Jorge
@OrangeKulture
Apr 30 2017 19:50
can we see your pen?
Roxroy
@roxroy
Apr 30 2017 19:55
@skd726 , you can add the pull-right class, class="btn btn-info pull-right"
Will Foster
@Will5592
Apr 30 2017 19:55
Does anyone know of a way of hosting your website for free without advertising? So if I wrote all my code in a text editor for example. Maybe GitHub does this, I haven't learnt what it is/used for yet.
Garo
@Garabed96
Apr 30 2017 19:56
Stuck on the Local weather api, I don't get how to connect the api with jsonp
trying to use darksky btw
Jorge
@OrangeKulture
Apr 30 2017 19:56
@skd726 i removed the footer cuz atm you can see very well .. if you want it next to the tweet, i just added class "next" to the button, and then i did
.next {
  margin-bottom: 26px;
}
not ideal tho, cuz you might get funny looking mobile and tablets
i would probably use flex, tbh .. make the icon n button separate divs and position them accordingly .. same height, diff widths
Sara
@skd726
Apr 30 2017 19:58
okay thanks @OrangeKulture
CamperBot
@camperbot
Apr 30 2017 19:58
skd726 sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 352 | @orangekulture |http://www.freecodecamp.com/orangekulture
Sara
@skd726
Apr 30 2017 19:58
and thank you @roxroy
CamperBot
@camperbot
Apr 30 2017 19:58
:cookie: 808 | @roxroy |http://www.freecodecamp.com/roxroy
skd726 sends brownie points to @roxroy :sparkles: :thumbsup: :sparkles:
Jorge
@OrangeKulture
Apr 30 2017 19:59
@skd726 did you get it tho? happy to help if u are still unclear
it really all depends on exactly how you want it to look
Fredrik Strand Oseberg
@FredrikOseberg
Apr 30 2017 20:00
@Will5592 Heroku has a free tier you can use to host your websites
Zachary
@Bazill03
Apr 30 2017 20:02
Hey everyone, I'm having a little trouble with the weather app. I'm using a function to pull the lat and long and store them in a variable. Then, in another function I'm using that variable to modify the request to the weather API. For some reason the variable is not getting modified in the location function. Any ideas? https://codepen.io/Bazill/pen/MbmpaB?editors=1111
Jorge
@OrangeKulture
Apr 30 2017 20:02
@Garabed96 are you getting a response?
Sara
@skd726
Apr 30 2017 20:03
still working on it, I'll let you know @OrangeKulture
Jorge
@OrangeKulture
Apr 30 2017 20:04
@Bazill03 firstly the lat and long are outside the doc.ready, they won't be accessible even inside that function
@Bazill03 also, it would be best to declare, use and modify the lat and long variables within the same function
Zachary
@Bazill03
Apr 30 2017 20:07
@OrangeKulture They were originally inside the doc.ready and the issues were still there. So I need to move the location function inside the weather function?
Garo
@Garabed96
Apr 30 2017 20:12
@OrangeKulture https://github.com/electricimp/DarkSky/blob/master/README.md if I go down to example and use that in my code is that allowed
I'm trying to find out how to even call the info from the json file, I tried using xml but I got an Access-control allow origin error
so I switched to darksky
Zachary
@Bazill03
Apr 30 2017 20:13
@Garabed96 Also you might want to disable ad blockers. Otherwise your browser might block the request.
Jorge
@OrangeKulture
Apr 30 2017 20:15
@Bazill03 there has been some issues with codepen lately .. so to be honest, I am not 100% sure what the correct way to get it would be, in theory, now should work better since it's always served over HTTPS, so it means that geolocation should in theory work
@Bazill03 u dont need to move the variables lat and long inside if you dont want to, but u need to be able to modify them on the geolocation call and inside that if statement, you would make the API request
@Garabed96 yeah that's probably because you are using chrome ..
Zachary
@Bazill03
Apr 30 2017 20:16
@OrangeKulture The geolocation I'm using does work. However when I assign the lat and long variables in the location function they don't assign. Instead I get the weather for (0,0)
Garo
@Garabed96
Apr 30 2017 20:17
ya I get the lat and long, it even sent it to openweather network but they're not compatible because geolocation uses https and openweather uses http
Jorge
@OrangeKulture
Apr 30 2017 20:18
@Bazill03 i think you now have to pass in header params to the request, no so sure ..
Zachary
@Bazill03
Apr 30 2017 20:18
@Garabed96 Yeah, use darksky. Openweather not accepting https makes it unusable.
Jorge
@OrangeKulture
Apr 30 2017 20:18
i have to debug mine .. it was working fine and now it's not, i do have a proxy for https on openweather, so that must be the problem
Zachary
@Bazill03
Apr 30 2017 20:19
@OrangeKulture lol, that's exactly what I'm doing. Damned thing used to work.
Garo
@Garabed96
Apr 30 2017 20:19
@Bazill03 can you link me anything that would help, I believe I need to use JSONP
Jorge
@OrangeKulture
Apr 30 2017 20:19
yeah .. it has something to do with that, most likely .. i think we need to switch over to dark sky
and @Garabed96 .. sry forgot to follow up, so u mean the JSON call for the .. weather app?
Garo
@Garabed96
Apr 30 2017 20:20
ya
Zachary
@Bazill03
Apr 30 2017 20:20
You'll have to sign up.
Jorge
@OrangeKulture
Apr 30 2017 20:20
@Garabed96 whats the code you are using for the API call?
Zachary
@Bazill03
Apr 30 2017 20:24
This works, but is much messier than I wanted since everything is crammed into a single function. https://codepen.io/Bazill/pen/MbmpaB?editors=1111
Garo
@Garabed96
Apr 30 2017 20:24
@Bazill03 @OrangeKulture I'm already signed up, I have the api key in my codepen, Im looking at the example code on its github
looking at timeMachineRequest Callbacks
Zachary
@Bazill03
Apr 30 2017 20:25
@Garabed96 Link your pen.
has nothing in it lol
Zachary
@Bazill03
Apr 30 2017 20:29
@Garabed96 Put your request in a function, not a variable.
Garo
@Garabed96
Apr 30 2017 20:32
is that the error?
Gulsvi
@gulsvi
Apr 30 2017 21:01
@Garabed96 You're getting a cross origin error. Use your browser's debug console to see the error (Ctrl+Shift+J). When using $.getJSON, the way to work around that issue in most cases is to add callback=? as a parameter to your API URL:
var url = "https://api.darksky.net/forecast/" + api_key + "/" + lat + "," + long + "?callback=?";
Paradox5
@Paradox5
Apr 30 2017 21:12
Pin
Corri Taylor
@corritaylor
Apr 30 2017 21:54
@Bazill03 That is great!
Chasen Bettinger
@chasen-bettinger
Apr 30 2017 21:54
Has anyone completed the Weather App front end project recently? I need help
Corri Taylor
@corritaylor
Apr 30 2017 21:59
Before I pull my hair out, do we go back to our portofolio after we finish the basic training. I’m not feeling how it looks, but it meets all the requirements. My Portfolio
the0ffh
@the0ffh
Apr 30 2017 22:01
@chasen-bettinger I did. What is your problem?
Chasen Bettinger
@chasen-bettinger
Apr 30 2017 22:03
@the0ffh did you use OWM?
for your API calls
the0ffh
@the0ffh
Apr 30 2017 22:03
no, yahoo
keyless ;)
Chasen Bettinger
@chasen-bettinger
Apr 30 2017 22:04
@the0ffh okay thank you. Every time I made an API call to OWM I'd get a 404 from codepen
CamperBot
@camperbot
Apr 30 2017 22:04
chasen-bettinger sends brownie points to @the0ffh :sparkles: :thumbsup: :sparkles:
:cookie: 317 | @the0ffh |http://www.freecodecamp.com/the0ffh
the0ffh
@the0ffh
Apr 30 2017 22:04
@chasen-bettinger Do you have CORS related issue?
@chasen-bettinger hold on a moment
can you post the full url you are using?
Chasen Bettinger
@chasen-bettinger
Apr 30 2017 22:05
ya
'api.openweathermap.org/data/2.5/weather?lat=' + latitude + '&lon=' + longitude + '&APPID=
the0ffh
@the0ffh
Apr 30 2017 22:06
damn.. it needs a key. One moment.
btw did you check it directly in a browser?
Chasen Bettinger
@chasen-bettinger
Apr 30 2017 22:07
yea
the0ffh
@the0ffh
Apr 30 2017 22:07
I'm trying to find out which proxy did i use
Put this right before your url
https://cors-anywhere.herokuapp.com/
Chasen Bettinger
@chasen-bettinger
Apr 30 2017 22:09
worked
@the0ffh you rock
@the0ffh thank you
CamperBot
@camperbot
Apr 30 2017 22:09
chasen-bettinger sends brownie points to @the0ffh :sparkles: :thumbsup: :sparkles:
:warning: chasen-bettinger already gave the0ffh points
the0ffh
@the0ffh
Apr 30 2017 22:09
yay! :D
no problem ;)
I've had a lot of problems with mysterious 404 on codepen recently. It came out that the codepen is switching to https only.
btw(2) I know it might sound rude (if so - not intended), but check this out :smile:
https://www.google.pl/#q=OWM+api+404+codepen
Chasen Bettinger
@chasen-bettinger
Apr 30 2017 22:13
oh im a dumbass lol
i was just confused when it first happened because in the console it told me to contact codepen
i should have just google'd
the0ffh
@the0ffh
Apr 30 2017 22:14
the console output can be 'fun' sometimes, I admit it
since you are on the weather app, check out the weather glyph icons:
https://cdnjs.com/libraries/weather-icons
Zachary
@Bazill03
Apr 30 2017 22:25
@corritaylor For sure. You can change it whenever you want. Whenever I finish a project I go back and add it in.
daveygf
@daveygf
Apr 30 2017 22:39
hello
question on the tribute page project
Can someone help me with?
I'm using the <div class="jumbotron"> and it is not showing up as a grey background as I would expect.
Jennifer vdh
@jennifervdh
Apr 30 2017 22:45
@daveygf I'm having the same problem
daveygf
@daveygf
Apr 30 2017 22:45
really?
ok. that is two of us.
the sample tribute page works. I even looked at the html source for it and mine is the same..
Jennifer vdh
@jennifervdh
Apr 30 2017 22:46
the margins are colored
I don't like knowing why my code is wrong
not knowing
daveygf
@daveygf
Apr 30 2017 22:52
I see a great example on w3 schools.
still my attempt does not work.
in codepen
Corri Taylor
@corritaylor
Apr 30 2017 22:54
@Bazill03 Thank you!
CamperBot
@camperbot
Apr 30 2017 22:54
corritaylor sends brownie points to @bazill03 :sparkles: :thumbsup: :sparkles:
:cookie: 287 | @bazill03 |http://www.freecodecamp.com/bazill03
PreatzalGamer99
@PreatzalGamer99
Apr 30 2017 22:57
does this look good
daveygf
@daveygf
Apr 30 2017 22:58
looks good
Zachary
@Bazill03
Apr 30 2017 23:06
@PreatzalGamer99 Might want to center some things.
PreatzalGamer99
@PreatzalGamer99
Apr 30 2017 23:08
i know and that is what i need help with
Brittany Rutherford
@brittanyrutherford
Apr 30 2017 23:08

do we need to write this even after referencing normalize.css?

margin: 0; padding: 0;

doesn't normalize.css make this for us? why do we need to write it again?

Zachary
@Bazill03
Apr 30 2017 23:09
@PreatzalGamer99 Are you trying to avoid using bootstrap?
PreatzalGamer99
@PreatzalGamer99
Apr 30 2017 23:09
no
Zachary
@Bazill03
Apr 30 2017 23:09
@PreatzalGamer99 Import bootstrap and that text-center class you're already using will work.
PreatzalGamer99
@PreatzalGamer99
Apr 30 2017 23:11
and how do i do that
Zachary
@Bazill03
Apr 30 2017 23:12
@PreatzalGamer99 Settings at the top right. Under CSS use the quick-add at the bottom to add bootstrap.
PreatzalGamer99
@PreatzalGamer99
Apr 30 2017 23:20
so how do i add it in the code
and where?
Zachary
@Bazill03
Apr 30 2017 23:21
Well your "Tribute to Bob Marley" h2 already has a class of "text-center" doesn't it?
PreatzalGamer99
@PreatzalGamer99
Apr 30 2017 23:21
yes
Zachary
@Bazill03
Apr 30 2017 23:22
Is that text now centered?
jump020305
@jump020305
Apr 30 2017 23:24

@all - i am new to js. I have written accordion code
onSelect(id) {

  • I am trying to increase the performance of the code.
  • In my code I have used onSelect function in both the components.
  • is it possible to combine to into one.so that it will be faster
  • providing my code below...

http://jsfiddle.net/b4L6kyg4/89/

class Accordion extends React.Component {
  constructor(props) {
    super(props);
    this.state = { selected: props.selected };
    this.enhanceSection = this.enhanceSection.bind(this);
    this.onSelect = this.onSelect.bind(this);
  }
  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,
            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);

    console.log("children----->" + JSON.stringify(children));

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

}


class SectionAccordion extends React.Component {
  constructor(props) {
    super(props);
    this.onSelect = this.onSelect.bind(this)
  };

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


    this.props.onSelect(this.props.id);
  }

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


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

        return (
            <div className={className}>
                <div className = "mobile-accordion-question-title mobile-submenu-dropmenuHeader">

                  <h3 onClick={this.onSelect}>
                      {this.props.title}
                  </h3>

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




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

  }

}


React.render((

    <div className="form-section">

        <div className="accordionTesting">
            <h2 className="mobile-h2 mobile-accordionTitle">kick 1</h2>

            <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">
            <h2 className="mobile-h2 mobile-accordionTitle">kick 2</h2>

            <Accordion selected="">
              <SectionAccordion title="Section 3" id="4">
                  Section 3
PreatzalGamer99
@PreatzalGamer99
Apr 30 2017 23:35
does this look good
Zachary
@Bazill03
Apr 30 2017 23:37
@PreatzalGamer99 Much better but you'll want to center the image caption and fix the tribute misspelling.
PreatzalGamer99
@PreatzalGamer99
Apr 30 2017 23:38
what mispelling?
and how do I center the caption
Zachary
@Bazill03
Apr 30 2017 23:41
@PreatzalGamer99 Move the caption into it's own paragraph and center that. Tribute is misspelled as tirbute.
PreatzalGamer99
@PreatzalGamer99
Apr 30 2017 23:43
I see the misspelling
Zachary
@Bazill03
Apr 30 2017 23:46
@PreatzalGamer99 Lookin good
looks good?
Johnny
@jtan3
Apr 30 2017 23:58
@PreatzalGamer99 maybe a different color for the text. It's kinda hard to read.