These are chat archives for FreeCodeCamp/HelpFrontEnd

17th
Sep 2016
Thomas Magnus
@tmag298
Sep 17 2016 00:01
Hey campers, I have a question. How can I move an element down and center it? To do this, would I have to set up a grid view of some kind? In general, what is the best strategy to move small objects around a page?
Brady
@soccer99
Sep 17 2016 00:02
@tmag298 What do you mean moving small objects? Do you mean animate them to move?
Dean Lai
@Deansidious
Sep 17 2016 00:02
Hi ,regarding the codepen challenge to build a tribute page. Is it a freestyle challenge where I could do any topic that I want? As long as I kinda tribute it to someone?
Thomas Magnus
@tmag298
Sep 17 2016 00:03
@soccer99 Nah, I'm just trying to move around an <a> element with the text "Top" to a certain position. I want it downwards of the area it now is. I have to set up a grid for this, right?
Really I'm asking what is the best method to have control over the position of elements on your page. Like is setting up a grid the best/easiest way?
Brady
@soccer99
Sep 17 2016 00:04
I would go with something like Bootstrap CSS to handle that
For grids
You can do absolute positioning but that will ruin the responsiveness of your page
jrandallhansen
@jrandallhansen
Sep 17 2016 00:07
@AshriSoft thank you
CamperBot
@camperbot
Sep 17 2016 00:07
jrandallhansen sends brownie points to @ashrisoft :sparkles: :thumbsup: :sparkles:
:cookie: 301 | @ashrisoft |http://www.freecodecamp.com/ashrisoft
Thomas Magnus
@tmag298
Sep 17 2016 00:09
What would bootstrap give me that normal CSS does not? Doesn't normal CSS possess the box-sizing property?
Brady
@soccer99
Sep 17 2016 00:12
Pre-written css, haha. Its just a library to speed up development
Thomas Magnus
@tmag298
Sep 17 2016 00:14
Bootstrap is? Also, do you have to download it or is there some way to read it into an HTML file?
jrandallhansen
@jrandallhansen
Sep 17 2016 00:14
@AshriSoft do you have any info on what the "redirect URI" is when using the twitch.tv api for the assignment on codepen?
Thomas Magnus
@tmag298
Sep 17 2016 00:15
But now that I've downloaded it will it just function automatically with any HTML or CSS I write? Guessing this is not the case
wait nvm that was a dumb question thankyou for your help @soccer99
CamperBot
@camperbot
Sep 17 2016 00:16
tmag298 sends brownie points to @soccer99 :sparkles: :thumbsup: :sparkles:
:cookie: 30 | @soccer99 |http://www.freecodecamp.com/soccer99
jrandallhansen
@jrandallhansen
Sep 17 2016 00:17
@tmag298 bootstrap is essentially a HUGE CSS file that has a bunch of classes already built in. you provide a <link> to the bootstrap file just like any CSS file you might write yourself
@tmag298 once it is linked, you can use the built in classes to quickly style the site into a responsive grid or quickly implement many common components
Walid Ashri
@walidashri
Sep 17 2016 00:44
@jrandallhansen https://api.twitch.tv/kraken/streams/"channel name"? client_id="yourid" ss was not around
Thomas Magnus
@tmag298
Sep 17 2016 00:48
thankyou @jrandallhansen
CamperBot
@camperbot
Sep 17 2016 00:48
tmag298 sends brownie points to @jrandallhansen :sparkles: :thumbsup: :sparkles:
:cookie: 326 | @jrandallhansen |http://www.freecodecamp.com/jrandallhansen
jrandallhansen
@jrandallhansen
Sep 17 2016 00:51
@AshriSoft i am confused by your response
Walid Ashri
@walidashri
Sep 17 2016 00:52
'https://api.twitch.tv/kraken/streams/"channel name"? client_id="yourid"' @jrandallhansen
change channel name to the channel you want & 'yourid' with you app id
jrandallhansen
@jrandallhansen
Sep 17 2016 00:54
@AshriSoft oh sorry I understand now. that is not what i was asking however. when registering for a client ID with twitch.tv they ask you to provide a "Redirect URI" that is apparently standard for all requests from a single client ID
Dean Lai
@Deansidious
Sep 17 2016 00:56
Hi guys, im trying to do an html page for the challenge "build a tribute page". Im trying to put something like this <h1 class="red-text text-center">OG Miracle</h1> , but the text doesnt change at all. May i know what went wrong?
Thomas Magnus
@tmag298
Sep 17 2016 00:58
@jrandallhansen @soccer99 I still have a remaining question though. How does one use the column system to move an element up or down?
Like how can you center items using the column system available in bootstrap?
jrandallhansen
@jrandallhansen
Sep 17 2016 00:59
@tmag298 you need to read some documentation or do a tutorial to learn more about that. i am not sure what a great bootstrap tutorial is. but really basic CSS would apply too. you want to use margin and padding to create the space you want
Thomas Magnus
@tmag298
Sep 17 2016 01:00
@jrandallhansen Word, that's what I figured.
jrandallhansen
@jrandallhansen
Sep 17 2016 01:00
@Deansidious have you written the appropriate CSS to style those classes? if not then the classes may be applied but they mean nothing
Thomas Magnus
@tmag298
Sep 17 2016 01:00
thanks @jrandallhansen
CamperBot
@camperbot
Sep 17 2016 01:00
tmag298 sends brownie points to @jrandallhansen :sparkles: :thumbsup: :sparkles:
:warning: tmag298 already gave jrandallhansen points
jrandallhansen
@jrandallhansen
Sep 17 2016 01:01
@tmag298 no problem. CSS is a nightmare to me. i wish i had good resources to refer you to. google for some tutorials
can anyone help my debug my ajax call to twitch.tv? ever since they changed to require a client ID i cant get any functionality
nevermind no need to provide the link. i figured it out with help from @AshriSoft
Dean Lai
@Deansidious
Sep 17 2016 01:04
@jrandallhansen ah yeah, that helped me. Thanks, but one more question.. how do i put text-center on the css column? I did that for red-text, but not text center.
CamperBot
@camperbot
Sep 17 2016 01:04
deansidious sends brownie points to @jrandallhansen :sparkles: :thumbsup: :sparkles:
:cookie: 327 | @jrandallhansen |http://www.freecodecamp.com/jrandallhansen
jrandallhansen
@jrandallhansen
Sep 17 2016 01:11
@Deansidious there are tons of rules about centering different content but text is usually pretty easy. google "text alignment CSS" to learn the rules
Dean Lai
@Deansidious
Sep 17 2016 01:14
@jrandallhansen yeah, ive found out the way..., the reason i asked was because i saw how the example video didnt use the css column whatsoever and i was wondering why mine didnt appear.
jrandallhansen
@jrandallhansen
Sep 17 2016 01:16
@Deansidious they probably have loaded the popular css/js framework called bootstrap in which those classes are prebuilt in. bootstrap is the easiest way to quickly style your projects
Mohamed
@chromax
Sep 17 2016 01:59
Hello Guys
I 've just finished Biggener Algo
but i dont feel so hot with my algo for ROT13
can some one check it out
This message was deleted

function rot13(str) { // LBH QVQ VG!

var strArr = str.split(/\s/g);
var decodedArr = strArr.map(function(val){

var wordArr = val.split('');

return wordArr.map(function(val){
if(val.charCodeAt(0) >= 65 && val.charCodeAt(0) <= 90){
    if((val.charCodeAt(0)-13) >= 65 && (val.charCodeAt(0)-13) <= 90 )
  {
    return String.fromCharCode(val.charCodeAt(0)-13);

  }
  else if((val.charCodeAt(0)-13) < 65) //69 
   {
      return String.fromCharCode(90 - (13 - (val.charCodeAt(0) - 65)) + 1);          
   }
}else{
  return String.fromCharCode(val.charCodeAt(0));
}

}).join('');

});

return decodedArr.join(' ');
}

// Change the inputs below to test
rot13("SERR PBQR PNZC");

Thomas Magnus
@tmag298
Sep 17 2016 02:08
Can anyone please tell me how to move an elements down vertically on a webpage?? I've watched a bunch of youtube videos and read a lot about the bootstrap grid system, but cannot grasp how the grid system can be used to move elements down vertically. I understand I could just use a combination of <br> and <center> but this would be sloppy and not teach me anything. The following is a link to the pen I'm working on. Any help is really appretiated! http://codepen.io/tmags298/pen/zKBxZo?editors=1000
Mohamed
@chromax
Sep 17 2016 02:11
you can use div element to organize your page it will and then apply bootstrap
Thomas Magnus
@tmag298
Sep 17 2016 02:11
What classes would be in the div element
Mohamed
@chromax
Sep 17 2016 02:12
no need for classes divs insert breaks automatically after it
i think you need to work on your html more , try to check derek banas HTML tutorial
it's very good
Thomas Magnus
@tmag298
Sep 17 2016 02:13
Yes but wouldn't I have to use like 10 <div>'s then?
Mohamed
@chromax
Sep 17 2016 02:14
will div is a god in html you will use it to structure your web page in any decent way
Mohamed
@chromax
Sep 17 2016 02:19
bunch of my messages has been removed
i dont know if this bad internet or what ? but i think i got the message through
Fer
@Fercken
Sep 17 2016 02:22
Hi everyone!
I hope everybody's doing fine
May I share with you my tribute page in order to get feedback from you, guys?
the bootstrap grid system is ... tricky?
I don't know how to explain it, but I needed to do some research about it
Mohamed
@chromax
Sep 17 2016 02:27
(Y) i hope you had fun coding it
Fer
@Fercken
Sep 17 2016 02:28
A lot, Mohamed, alot
I've been reading a lot about bootstrap's css and it's impressive, well, to me of course
AzLuv
@AzLuv
Sep 17 2016 02:36
hello world
CamperBot
@camperbot
Sep 17 2016 02:36

welcome to FreeCodeCamp @AzLuv!

Fer
@Fercken
Sep 17 2016 02:40
hello AzLuv
AzLuv
@AzLuv
Sep 17 2016 02:41
@Fercken nice tribute bro
Rafael J. Rodriguez
@Rafase282
Sep 17 2016 02:42
Hello, anyone experienced with iframes and jquery?
Koundinya Tripurari
@ktripurari310
Sep 17 2016 02:47
Hi folks, I am now started building a Tribute page. I have completed writing all the code in CodePen.io. I dont find any button to compile and see how my page looks like. Can someone help me with this issue?
jrandallhansen
@jrandallhansen
Sep 17 2016 02:58
it should be automatically updating as you write your code
it is essentially an online IDE. it doesnt let you publish the code really for use but rather provides a runtime environment. can you copy the URL to your project here? i will take a look
AzLuv
@AzLuv
Sep 17 2016 02:59
@ktripurari310 go to Change View and click on full page
bkd705
@bkd705
Sep 17 2016 03:06
yooo
Fer
@Fercken
Sep 17 2016 03:55
Thank you so much @AzLuv
CamperBot
@camperbot
Sep 17 2016 03:55
fercken sends brownie points to @azluv :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @azluv |http://www.freecodecamp.com/azluv
Sorin Ruse
@sorinr
Sep 17 2016 03:55
@Rafase282 hi Rafa. what is the problem?
Siddhesh Ranade
@icychains24
Sep 17 2016 04:29
Hello. I recently started using Webkit for a basic webpage. However, Webkit isn't supported by Firefox, which uses Gecko. So the question arises: how am I supposed to know which web browser a visitor to my webpage will be using, since a Webkit page will not display properly on certain browsers (vice versa)? Or should I avoid Webkit entirely?
Rafael J. Rodriguez
@Rafase282
Sep 17 2016 04:30
@sorinr I was able to solve that problem with some help. I still have some issues with other areas.
Currently I have a <a> that I want it to run a function before going to the new site.
Sorin Ruse
@sorinr
Sep 17 2016 04:33
@Rafase282 the <a> its within an <iframe> ?
Rafael J. Rodriguez
@Rafase282
Sep 17 2016 04:33
yes
I generate it from js
Sorin Ruse
@sorinr
Sep 17 2016 04:35
think u can inject that function in the iframe within a new <script> tag
Rafael J. Rodriguez
@Rafase282
Sep 17 2016 04:36
I am injecting the code int he first place, to a squarespace site
I created the html form js and added it to the frame
Sorin Ruse
@sorinr
Sep 17 2016 04:37
and the a does not trigger the injected event?
Rafael J. Rodriguez
@Rafase282
Sep 17 2016 04:38
it goes to the site but I don't see anythign on the console, there should be a log
then there is another that is supposed to work when I click the checkout button but it gets called by itself sometimes.
Sorin Ruse
@sorinr
Sep 17 2016 04:41
@Rafase282 any chance to be an id name conflict somewhere?
Rafael J. Rodriguez
@Rafase282
Sep 17 2016 04:41
Not sure, let me check.
nope
only one
Sorin Ruse
@sorinr
Sep 17 2016 04:47
just for testing: if you inject that a and the function into the main doc not the iframe do you get something on the console?
Sorin Ruse
@sorinr
Sep 17 2016 04:53
@Rafase282 found this: http://stackoverflow.com/questions/18369410/how-to-add-javascript-code-into-existing-iframe-using-jquery not sure if will help you. its something also about escaping the injected <script> tags
Rafael J. Rodriguez
@Rafase282
Sep 17 2016 04:54
Do you have skype? I can show you.
Sorin Ruse
@sorinr
Sep 17 2016 04:57
i have to reinstall it. is there any link you can provide for the moment? i also have to go out with my dog but i'll look into it later. maybe i can come up with some idea
Mohammed Khaled
@khaledMohammed000
Sep 17 2016 04:59
Can anyone explain pub-sub , Observer , EventEmitter pattern and howthey differ and also when to use which ?
Rafael J. Rodriguez
@Rafase282
Sep 17 2016 05:02
@sorinr It's not my site so I can't provide access to the code.
Stefania Delprete
@astrastefania
Sep 17 2016 07:35

Hello there, can you why the link is not clickable in here?
https://codepen.io/physte3/pen/wzBpgr

I added the target='_blank' in the a element for the link, any clue? Thanks!

Stefania Delprete
@astrastefania
Sep 17 2016 07:42
Yeah, fix it! :D Thanks anyway :D
Sorin Ruse
@sorinr
Sep 17 2016 07:44
@physte3 in your css container class just change to this: margin: 20px auto; to have the container centered horizontally on the page
Joffrey Nolting
@Yovvel
Sep 17 2016 07:55
@physte3 the link is working to me..
Sorin Ruse
@sorinr
Sep 17 2016 08:03
@physte3 and try to move all your inline style to the css "external" part. u can give that divs an id or class to have them easier selected in the css
Stefania Delprete
@astrastefania
Sep 17 2016 08:05
@sorinr thanks, I removed a css class because wasn't working. That's why I have inline style :D I'll try again
CamperBot
@camperbot
Sep 17 2016 08:05
physte3 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 709 | @sorinr |http://www.freecodecamp.com/sorinr
Stefania Delprete
@astrastefania
Sep 17 2016 08:09
more-pspace.png
I don't understand why the css class .more-pspace is not working...
(now is padding: ... not padding = ... same, mh...)
Sorin Ruse
@sorinr
Sep 17 2016 08:16
@physte3 its working. if you look in the devtools at boxmodel of that html tag you have 20px of padding
Stefania Delprete
@astrastefania
Sep 17 2016 08:17
Strange, why it's looks different with inline style for me?
Sorin Ruse
@sorinr
Sep 17 2016 08:18
@physte3 witch tag?
Stefania Delprete
@astrastefania
Sep 17 2016 08:18
I used it for the Dirac pic and the quote, both under the video
there's more space around (padding) when I used inline style than the css class
Sorin Ruse
@sorinr
Sep 17 2016 08:21
@physte3 nope. its impossible. inline style or class adds the same padding to the element
Stefania Delprete
@astrastefania
Sep 17 2016 08:24
OK, I'll do some experiments, thanks @sorinr!
CamperBot
@camperbot
Sep 17 2016 08:24
physte3 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: physte3 already gave sorinr points
Sorin Ruse
@sorinr
Sep 17 2016 08:27
@physte3 i've seen ur #fff background. if you want to see where you apply a class you can make the bg color to red. its more visible. then you cut it out :)
Stefania Delprete
@astrastefania
Sep 17 2016 08:30
@sorinr, yes, I was trying to visualize the padding! :D
Sorin Ruse
@sorinr
Sep 17 2016 08:31
@physte3 good choise for visual debugging :)
Stefania Delprete
@astrastefania
Sep 17 2016 08:33
@sorinr, any suggestion to do not have that huge DIrac head under the video on smaller devices? It looks good on desktop and huge on smaller screen, I'm searching to be more responsive on that.
Stefania Delprete
@astrastefania
Sep 17 2016 08:38
the image 'explodes' under 993px screens :D
Sorin Ruse
@sorinr
Sep 17 2016 08:39
@physte3 use @media queries to change layout as u wish for smaller screens
Stefania Delprete
@astrastefania
Sep 17 2016 08:47
@sorinr, nice! I was here https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries It smaller! Now I'm thinking about delete it for small screen directly :D
Sorin Ruse
@sorinr
Sep 17 2016 08:50
@physte3 mdn its a good source of info. i am instead, a lot of times, using css-tricks site because i can get more practical examples when need to clarify something
Stefania Delprete
@astrastefania
Sep 17 2016 09:01
@sorinr so I see, I'll keep it in mind!
Siddhesh Ranade
@icychains24
Sep 17 2016 09:23
Hello. I recently started using Webkit for a basic webpage. However, Webkit isn't supported by Firefox, which uses Gecko. So the question arises: how am I supposed to know which web browser a visitor to my webpage will be using, since a Webkit page will not display properly on certain browsers (vice versa)? Or should I avoid Webkit entirely?
_
Brian Liu
@bliu9883
Sep 17 2016 09:43
hey guys i just finished my weather app! hoping for some feedback :) https://codepen.io/bliu9883/pen/ORXEkK
r2d2
@UsamaHameed
Sep 17 2016 09:48
@bliu9883 you can add a degree sign on top of the temperature number
njwda
@njwda
Sep 17 2016 10:19
@bliu9883 It's not working for me bro.
Joran de Haan
@LeCoquille
Sep 17 2016 10:35
hi! I can't seem to get my contact page right on small screenm. tried everything. somebody any idea? https://codepen.io/LeCoquille/pen/zKxvqo
  1. there's to much space between the form and the screen border
  1. I can't resize my linkedin widget so it fits on the page
Ken Haduch
@khaduch
Sep 17 2016 11:49

@LeCoquille - one thing that might help a little, not sure, though - the "proper" way to use CodePen - here is some tips:
On CodePen, the HTML panel should only have HTML elements in it - but not the <html>, <head>, <body>, <style>, <script> and their closing tags. There are places in the HTML config for things that you might want to put into the head of the page, the CSS tab and config is for all CSS code and external sheets, and the JS tab for all JS-related info. Doing things other than that result in invalid HTML. That being said, it doesn't always cause a problem, but it could result in conflicts and things being loaded in an order that could cause problems, and definitely I've seen problems on mobile devices with some of these things.

A couple other things that I see is that there are some places where you are using the Bootstrap grid column classes, but it is not nested in a "row" div. That might help with responsive behavior?

Siva Sarath
@Siva-Sarath
Sep 17 2016 11:54
hi guys, i'm stuck at building a random quote machine. I have no idea how to get started. could someone give me the idea and resources needed?
Richard Smith
@r1chard5mith
Sep 17 2016 12:02
@Siva-Sarath You need to find a quote api to call
karolinan
@karolinan
Sep 17 2016 12:16
Hi so im just starting to build my tribute page
but i do not yet remember all the codes
can i use some reference material for this??
Stephen James
@sjames1958gm
Sep 17 2016 12:18
@Siva-Sarath You could start first with an array of quotes and build the structure of the page and the controls to get a new quote from the array, or you
could start with an API that retrieves quotes, make that retrieval work then build the structure.
coffeebeanzz
@coffeebeanzz
Sep 17 2016 12:23
@karolinan yes always feel free to use reference material
karolinan
@karolinan
Sep 17 2016 12:25
@coffeebeanzz cool thanks, do you know if freecodecamp has some html doc for reference, or would you suggest going by the map of what i completed
CamperBot
@camperbot
Sep 17 2016 12:25
karolinan sends brownie points to @coffeebeanzz :sparkles: :thumbsup: :sparkles:
:star2: 1086 | @coffeebeanzz |http://www.freecodecamp.com/coffeebeanzz
coffeebeanzz
@coffeebeanzz
Sep 17 2016 12:25
@karolinan this is a good reference filled with links https://css-tricks.com/almanac/
karolinan
@karolinan
Sep 17 2016 12:26
@coffeebeanzz awesome thanks! to you have something like this for html as well
CamperBot
@camperbot
Sep 17 2016 12:26
karolinan sends brownie points to @coffeebeanzz :sparkles: :thumbsup: :sparkles:
:warning: karolinan already gave coffeebeanzz points
coffeebeanzz
@coffeebeanzz
Sep 17 2016 12:26
@karolinan FCC doesn't have a specific reference but this will also help http://learn.shayhowe.com/html-css/building-your-first-web-page/
karolinan
@karolinan
Sep 17 2016 12:26
@coffeebeanzz sorry i only started learning code earlieer this week
coffeebeanzz
@coffeebeanzz
Sep 17 2016 12:27
np @karolinan we all start somewhere :)
karolinan
@karolinan
Sep 17 2016 12:27
@coffeebeanzz that looks helpful thanks
CamperBot
@camperbot
Sep 17 2016 12:27
karolinan sends brownie points to @coffeebeanzz :sparkles: :thumbsup: :sparkles:
:warning: karolinan already gave coffeebeanzz points
coffeebeanzz
@coffeebeanzz
Sep 17 2016 12:27
@karolinan also Udemy has alot of free courses right now
karolinan
@karolinan
Sep 17 2016 12:29
@coffeebeanzz that looks cool as well this udemy
really love this page as well!
Mark Wilkins
@mwilkins91
Sep 17 2016 12:31
Hi everyone, I have just reached the "Build a Random Quote Machine" challenge, and I don't even really know where to start with this one. Can anyone offer any advice on how to start a project like this?
coffeebeanzz
@coffeebeanzz
Sep 17 2016 12:39
@mwilkins91 I used the Forismatics website. Each API is different but should contain the documentation you need to implement it.
I started with the design and a sample quote, then went from there
Lidia Wisniewska
@lidiawisniewska
Sep 17 2016 13:06
Hi everyone! I'm working on my wikipedia viewer and I'm stuck right now. was wondering if someone could have a look at my code and maybe give some directions?
:)
Hakki Riza Kucuk
@archetypum
Sep 17 2016 13:20
Hi everyone! I just reached to the chanllenge about making a tribute page, in FronEndDev Map.
My question is, can I just copy-paste the content of the tribute page from somewhere else?
I mean, not the code of course, But I think there is no need to write the content on our own, right?
Mark Wilkins
@mwilkins91
Sep 17 2016 13:26
@coffeebeanzz Thanks for the pointers! I will try to start with that.
CamperBot
@camperbot
Sep 17 2016 13:26
mwilkins91 sends brownie points to @coffeebeanzz :sparkles: :thumbsup: :sparkles:
:star2: 1092 | @coffeebeanzz |http://www.freecodecamp.com/coffeebeanzz
coffeebeanzz
@coffeebeanzz
Sep 17 2016 13:27
np good luck @mwilkins91 :)
Akhilesh Chobey
@Akhilesh28
Sep 17 2016 13:41
Hi everyone. Why dont the images in my portfolio fit properly in the div when the size of window is reduced?
And even the background isn't being applied to the portfolioclass
Sorin Ruse
@sorinr
Sep 17 2016 14:20
@Akhilesh28 if you want that bg color you should make it; background: #080808 !important; to override the bootstrap default
Sorin Ruse
@sorinr
Sep 17 2016 14:34
@Akhilesh28 as for the imgs in your portfolio, you are using wrong the row-col bootstrap grid. on each row the sum of the columns on each display size should be 12
Seth Murphy
@sethmurphy18
Sep 17 2016 14:43
Hey guys, can anyone give me some feedback on my weather app?
http://codepen.io/sethmurphy18/full/dpGBJr/
Joran de Haan
@LeCoquille
Sep 17 2016 14:45
@khaduch i've got a row class for my contact section, so that's probably not it. thanks anyway!
CamperBot
@camperbot
Sep 17 2016 14:45
lecoquille sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1690 | @khaduch |http://www.freecodecamp.com/khaduch
Piyush Danej
@piyushdanej
Sep 17 2016 14:49
So @Akhilesh28 did you use a template for your page ?
Hey guys , need some help in my css
Seth Murphy
@sethmurphy18
Sep 17 2016 14:51
glhf with that...I had a heck of a time on the css with my weather app. React and CSS do not play nicely...
Piyush Danej
@piyushdanej
Sep 17 2016 14:52
na mine is pure html and css
Seth Murphy
@sethmurphy18
Sep 17 2016 14:52
What is the issue then? As long as it's not flexboxes I probably know at least a working idea.
Piyush Danej
@piyushdanej
Sep 17 2016 14:52
nope not flex boxes
So i was doing some transition and transform with the divs and their borders
I'll show you the code

//

<body>
<div id = main>
<div id="top">

    </div>
    <div id="left">

    </div>
</div>

</body>
//

now comes the css

//

main{

height:500px;
width:100%;
border:1.2px solid blue;

}

top{

width: 1%;
margin-left: auto;
margin-right: auto;
margin-top:30%;
height:1px;
transform: scale(70,2);
margin-bottom: 0px;
border-bottom : 1px solid gray;
transition : transform 2s , border-bottom 2s;    
}

left{

margin-top: 24.5%;
width:1px;

height:1%;
border-right:1px solid black;
margin-left: 50%;
transform : scale(2,58);
transition: transform 2s , border-right 2s;

}
//

basically it makes a T with animated div's borders. in the centre of the page
Seth Murphy
@sethmurphy18
Sep 17 2016 14:55
So, if I understand that CSS right, you're trying to make the borders pop (essentially grow and then shrink back down)?
Ah ok
Piyush Danej
@piyushdanej
Sep 17 2016 14:56
just grow not shrink
Exactly

now the problem is , it only works if I put a
//

<input type="button" name="CLICK" value="click">
//
in the page

just a vague non-important button
if I remove the button , the transition wont happen on page load .
Seth Murphy
@sethmurphy18
Sep 17 2016 14:59
Hmm...I'm not 100% sure about that one. Animations aren't really my strong point in CSS. I find them confusing.
Piyush Danej
@piyushdanej
Sep 17 2016 14:59
Well , I just started using transitions but this button thing has me all wondering and stuff
Akhilesh Chobey
@Akhilesh28
Sep 17 2016 15:18
Thanks @sorinr
CamperBot
@camperbot
Sep 17 2016 15:18
akhilesh28 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 710 | @sorinr |http://www.freecodecamp.com/sorinr
Akhilesh Chobey
@Akhilesh28
Sep 17 2016 15:19
@piyushdanej template as in I made everything in Sublime Text first from ground up. Just for the nav-bar I used the hotkeys in the editor which made the job quicker. Everything else was made by me :)
honesty1997
@Honesty1997
Sep 17 2016 15:20
Does anybody do the twitch.Tv project recently?
I constantly get a message below:
Object {
error: "Bad Request",
message: "No client id specified",
status: 400
}
When I try to use the api Free Code Camp provided.
$.getJSON('https://api.twitch.tv/kraken/streams/freecodecamp?callback=?', function(data) {
console.log(data);
});
Like this.
kirbyedy
@kirbyedy
Sep 17 2016 15:58
@Honesty1997 you have to register on twitter and obtain your client id
vxm007
@vxm007
Sep 17 2016 17:30
Could somebody please help me with the first portfolio page project?
Harry Adel
@harryadel
Sep 17 2016 17:33
Guys, do you think it's not that big of a deal if I skipped Simon game project and moved on to learning react?
@vxm007 yeah sure thing
send us your Codepen, so that we can have a look
Vladislav Lasmann
@VladislavLasmann
Sep 17 2016 17:36
Hey guys, can anyone tell me how if theres a special class for top-borders on top of the site: https://codepen.io/FreeCodeCamp/full/NNvBQW/
mine just look like this
http://codepen.io/v4/full/xEOyyW/
Harry Adel
@harryadel
Sep 17 2016 17:38
@dracul3a What do you mean? I checked both Codepens and they look identical
Vladislav Lasmann
@VladislavLasmann
Sep 17 2016 17:39
@Harry97 I mean the top border over "Written and coded by Quincy Larson." on the bottom(sorry not top) of the site
Harry Adel
@harryadel
Sep 17 2016 17:41
@dracul3a gotcha, what do you want to do it with it exactly?
Vladislav Lasmann
@VladislavLasmann
Sep 17 2016 17:43

@Harry97 i just want that mine look the same as on the original site. i seems for me, that there may is a special class for borders like this.

<p style="border-top: 0.5px solid #000"></p>

Harry Adel
@harryadel
Sep 17 2016 17:44
@dracul3a I guess you may refering to something called hr
Vladislav Lasmann
@VladislavLasmann
Sep 17 2016 17:44
i tried : <p style="border-top: 0.5px solid #000"></p>
but theres is another color and the space between the text
@dracul3a I believe you can achieve the same effect using border but with adding opacity
Vladislav Lasmann
@VladislavLasmann
Sep 17 2016 17:46
@Harry97 WOW! Thank you so much!
I just searched about 10 mins on the web :+1:
CamperBot
@camperbot
Sep 17 2016 17:46
dracul3a sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:cookie: 250 | @harry97 |http://www.freecodecamp.com/harry97
Harry Adel
@harryadel
Sep 17 2016 17:48
@dracul3a It's ok, man, and well done on your project! ;)
Vladislav Lasmann
@VladislavLasmann
Sep 17 2016 17:50
@Harry97 thanks :smile:
CamperBot
@camperbot
Sep 17 2016 17:50
dracul3a sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:warning: dracul3a already gave harry97 points
Mark Wilkins
@mwilkins91
Sep 17 2016 18:09
Hey guys, can anyone offer me a suggestion on how to do a slow transition between two background colors, when I change the background color via a javascript function?
Harry Adel
@harryadel
Sep 17 2016 18:12
@mwilkins91 ain't a pro, but just suggesting http://www.w3schools.com/jquery/eff_animate.asp
James Clarke
@JamesRClarke
Sep 17 2016 19:23
Harry Adel
@harryadel
Sep 17 2016 19:25
@JamesRClarke try to center the text and to the image responsive
Nicole Horn
@N1CKL3
Sep 17 2016 19:26
Okay I'm trying to clarify. An element is identified as having an open and end tag. A class are the things within the element, such as body, div, etc. Attributes are the things that make up the class, such as color, font, etc. Is that a proper understanding?
Harry Adel
@harryadel
Sep 17 2016 19:27
hmm @N1CKL3 try to think of classes as more of gender
Jaco Oversluizen
@oversluizen
Sep 17 2016 19:28
how can I add images to my codepen?
can I upload?
Gang Zhao
@crumpx
Sep 17 2016 19:29
external link
Harry Adel
@harryadel
Sep 17 2016 19:29
@oversluizen you can only upload if you are pro member of their site
Gang Zhao
@crumpx
Sep 17 2016 19:29
you can upload img to other filehosting service and link them
Harry Adel
@harryadel
Sep 17 2016 19:29
otherwise like @crumpx said, use external link
Jaco Oversluizen
@oversluizen
Sep 17 2016 19:29
okay thanks @Harry97
CamperBot
@camperbot
Sep 17 2016 19:29
oversluizen sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:cookie: 251 | @harry97 |http://www.freecodecamp.com/harry97
Jaco Oversluizen
@oversluizen
Sep 17 2016 19:30
what are brownie points ;)
Gang Zhao
@crumpx
Sep 17 2016 19:30
free beer :D
Harry Adel
@harryadel
Sep 17 2016 19:30
@oversluizen I guess a way in order to identify how helpful you're to the community
Nicole Horn
@N1CKL3
Sep 17 2016 19:30
@Harry97 Hmm. Okay so if we were to apply this to something in the real world...An element could be equated to the species of CAT. The class could be the different species of cats, such as Domestic long hair, savanah, etc. The attributes can be the specific characteristics that make up the class. I hope that's right because if it is then that makes a whole lot of sense.
Harry Adel
@harryadel
Sep 17 2016 19:30
It's kinda funny :D
Gang Zhao
@crumpx
Sep 17 2016 19:31
are we talking about html element and class and attribute? xD
Harry Adel
@harryadel
Sep 17 2016 19:31
@crumpx yeah using metaphors :D
Nicole Horn
@N1CKL3
Sep 17 2016 19:32
@crumpx lol yeah. The lessons kind of confused me on the actual definitions of them. I understand it when I go to code but if someone were to ask me what they are I would have a hard time explaining it
@Harry97 Is that a decent comparison?
Harry Adel
@harryadel
Sep 17 2016 19:33
@N1CKL3 hmm. try to think of it this way: you are a teacher and want to create a way to classify student in your school, so element'd be student of different years like <div> for seniors and <span> for junior high
classes are genders so they can be assigned to multiple student of different years without a problem
attributes are properties of student like hair color, eye color, and height
so they many student share them too
and finally id is like social security number
It's super unique to the point where only one student can have it
Gang Zhao
@crumpx
Sep 17 2016 19:36
@N1CKL3 elements are <p>hello</p>, <h1> ok </h1> and such
class, is <p class='text-center'>hello</p>. 'text-center' is the class
Nicole Horn
@N1CKL3
Sep 17 2016 19:37
@Harry97 Ahhh okay...I get it. You are trying to group certain things together but it doesn't necessarily mean you need to keep minimizing the pool. Rather you're applying the classes to the elements to style them so certain class attributes could potentially overlap themselves, like the same font for 2 separate classes but different size font for those same classes.
Gang Zhao
@crumpx
Sep 17 2016 19:37
it describes which css class this <p></p> element should use
Nicole Horn
@N1CKL3
Sep 17 2016 19:37
hopefully i explained that properly but it makes sense in my head
Harry Adel
@harryadel
Sep 17 2016 19:38
@crumpx :+1: @N1CKL3 using metaphors to further understand things is really nice but make sure to apply your knowledge by building projects
just like math you can't get good at it just by reading you gotta solve problems
Gang Zhao
@crumpx
Sep 17 2016 19:38
attributes are <p id='aword'.>hi</p>, id is one of the attributes of this p element
so what's the id attribute of this p element :)
Nicole Horn
@N1CKL3
Sep 17 2016 19:40
id='aword' is the attribute you are applying to the paragraph element. The content of the element is "hi". The class is id?
@crumpx
Gang Zhao
@crumpx
Sep 17 2016 19:41
class is also an attribute
it tells p which css method(class) it should use to present itself
Nicole Horn
@N1CKL3
Sep 17 2016 19:42
@crumpx so the terms can be used interchangeably
?
Gang Zhao
@crumpx
Sep 17 2016 19:43
<style>
.hello {
    background-color: black;
    color: white;
    margin: 20px 0 20px 0;
    padding: 20px;
} 
</style>

<p id='name' class='hello'> hello world </p>
in style i create a class, it's name hello
that's css code there
so in my <p> i give this p element an attribute 'id' and another attribute 'class'
so i can later refer to this p element by using this 'id'
make sense?
your name is an attribute of you. so is your height and such
<person name='Nicole Horn' height='170'></person>
xD
Nicole Horn
@N1CKL3
Sep 17 2016 19:48
Yeah it does. I'm going to save that for future reference! Thanks a bunch! I'm really new to coding. I started 3 days ago and I'm about 8 lessons away from finishing the first 5 hr segment.
@crumpx
Gang Zhao
@crumpx
Sep 17 2016 19:49
keep it up :) these weird terms will make sense to you sooner or later.
Nicole Horn
@N1CKL3
Sep 17 2016 19:49
Taking me a lot longer than 5 hrs cuz I'm taking notes as I go. I feel like this is equivalent to when you take economics for the first time and realize that the terms supply and demand aren't what you've been taught your entire life XD
On a side note, nice hat :3
@crumpx
Gang Zhao
@crumpx
Sep 17 2016 19:51
@N1CKL3 haha thanks i don't own it, just took picture with it in a mall and told everyone i killed that beast last winter.....
CamperBot
@camperbot
Sep 17 2016 19:51
crumpx sends brownie points to @n1ckl3 :sparkles: :thumbsup: :sparkles:
:cookie: 57 | @n1ckl3 |http://www.freecodecamp.com/n1ckl3
Nicole Horn
@N1CKL3
Sep 17 2016 19:58
@crumpx Btw hear are your points...Hopefully! Thanks!
CamperBot
@camperbot
Sep 17 2016 19:58
n1ckl3 sends brownie points to @crumpx :sparkles: :thumbsup: :sparkles:
:cookie: 369 | @crumpx |http://www.freecodecamp.com/crumpx
Gang Zhao
@crumpx
Sep 17 2016 20:01
you're welcome xD
Stefan
@st3fun1
Sep 17 2016 20:37
Hi everyone. I need help with a regex for the following strings: '2+8-8' and '2+8--8', i want to extract the last number with the sign ex '-' only if there is another sign ahead of it, else just extract the number;
Gang Zhao
@crumpx
Sep 17 2016 21:13
\d+\d(-)?(-)?(\d) maybe
but regex has no logic, you gotta do the logic part yourself.
@st3fun1 Sorry I responded to wrong person.
Mohammad Albarmawi
@malbarmawi
Sep 17 2016 21:43
This my project at codepen , css spin loader wihtout any javascript it will help with front end project
https://codepen.io/mbarmawi/pen/dpXJbr
Justin Kishbaugh
@jkishbaugh
Sep 17 2016 21:52
Hoping for a little help here I can't get the wikipedia info to load. https://codepen.io/kishju/pen/amvVgp
Erick Delfin
@Nifled
Sep 17 2016 22:13
Hello, I;m having trouble with the positioning on my portfolio. So theres one div, where I position it to fixed (because i want the container to stay put) and it just disappears:
TLDR: changed position to fixed, container disappeared, help :worried:
Trommelochse
@Trommelochse
Sep 17 2016 22:14
@Nifled do you have a link to your codepen?
Erick Delfin
@Nifled
Sep 17 2016 22:21
This message was deleted
This message was deleted
This message was deleted
This message was deleted
This message was deleted
Manny
@Alloffices
Sep 17 2016 22:34
@mbarmawi Really love this pen man! Keep up the good work
Amit Patel
@AmitP88
Sep 17 2016 22:52
:P
Jesseniah
@Jesseniah
Sep 17 2016 23:19
Hi my name is Jesseniah and today I will learn the fundamentals of HTML
Istvan Kokuti
@zaturek
Sep 17 2016 23:22
Hello guys! I need some help with my random quote generator. I don't understand why my get_quote() function doesn't work. http://codepen.io/zaturek/pen/ZpYZoR
Hy Jesseniah! Welcome here! :)
Michael Bomholt
@bomholtm
Sep 17 2016 23:51
Has anyone a clue how to add a click and hold down event to a span with pure JS? Basically clicking and holding it down should do different actions. Only finding stuff with jQuery though
Nam Nguyen
@denominatortron
Sep 17 2016 23:53
@bomholt onmousedown?
er, onclick + specifickeydown for mouse?
Michael Bomholt
@bomholtm
Sep 17 2016 23:54
@denominatortron with holding down i mean like for 2 seconds vor something
So basically i have an element and when i click it it does something
Now i want to implement another action if i click and dont release for some time
samson
@samcampc
Sep 17 2016 23:58
how do you build Tribute Page