These are chat archives for FreeCodeCamp/HelpFrontEnd

8th
Dec 2016
Mitchell
@mitchell931993
Dec 08 2016 00:09
Hey guys, whats the correct way to trigger a method of a child component in react
Zachary
@Bazill03
Dec 08 2016 00:13
Alright, I got the very basics of my coin flipper working. Any advice on how to make it prettier? http://codepen.io/Bazill/pen/vygZaK
Mitchell
@mitchell931993
Dec 08 2016 00:14
Very cards against humanity-esque
Is there a unicode coin you might be able to throw in there somewhere
AJ
@ClaudeDebussy
Dec 08 2016 00:16

Hi everyone, I am wondering if any of you might be able to help me with a quick problem I am having with html / css.

https://jsfiddle.net/ClaudeDebussy/bhsmmob4/

In the above code, how can I make it so the three div elements, when viewed in desktop (large viewport) size, remain on the same line BUT have a few pixels of whitespace between them?

I tried adding <margin> to the .box class, but everything ends up pushing the final box to the next line.

Mitchell
@mitchell931993
Dec 08 2016 00:16
What about padding? is that internal?
Yeah, try padding
AJ
@ClaudeDebussy
Dec 08 2016 00:17
Ok I will try, thanks!
Zachary
@Bazill03
Dec 08 2016 00:18
@mitchell931993 Yeah I wanted to try to move to an icon once I have assets. I don't know of any unicode coins.
Is there a decent way to make them animate over time? I tried adding .slideUp(500) but for whatever reason it won't continue the loop.
I assume the program completes the loop before the first one even slides up.
Tyler Moeller
@TylerMoeller
Dec 08 2016 00:21
@Bazill03 Cool idea :) You could do something like this: http://codepen.io/mlhaufe/pen/vOQyYb
Zachary
@Bazill03
Dec 08 2016 00:23
@TylerMoeller A much smaller version of that animation would be very cool :) What I'd really like along with a little coin image is a graph that shows the heads to tails ratio as it flips.
AJ
@ClaudeDebussy
Dec 08 2016 00:25

https://jsfiddle.net/ClaudeDebussy/bhsmmob4/

as the screen is made smaller (eg mobile), why do the black borders around the <div> elements disappear?

Greg D
@mosaic-greg
Dec 08 2016 00:28
@ClaudeDebussy sounds like bootstrap styling. You might be able to override it with !important in your css
AJ
@ClaudeDebussy
Dec 08 2016 00:29
@mosaic-greg thanks, but I made the sylesheet myself! Eugh! :worried:
CamperBot
@camperbot
Dec 08 2016 00:29
claudedebussy sends brownie points to @mosaic-greg :sparkles: :thumbsup: :sparkles:
:cookie: 413 | @mosaic-greg |http://www.freecodecamp.com/mosaic-greg
Uros Tadic
@urketadic
Dec 08 2016 00:33
Guys can someone please implement something in my javascript project? @http://codepen.io/urketadic/pen/YpLgBX
I want number to turn red if its wrong and not in sequence with pi. Its really difficult for me to keep count and compare with everything.
Tyler Moeller
@TylerMoeller
Dec 08 2016 00:34
@ClaudeDebussy You're missing a closing bracket on line 148 of your CSS }
AJ
@ClaudeDebussy
Dec 08 2016 00:35
@TylerMoeller :O :O :O
THANK YOU!
Tyler Moeller
@TylerMoeller
Dec 08 2016 00:35
Welcome :)
AJ
@ClaudeDebussy
Dec 08 2016 00:35
how do i send you brownie points or whatever :smile: @TylerMoeller
Tyler Moeller
@TylerMoeller
Dec 08 2016 00:36
Don't worry about it lol, but for future reference, just put the name and thanks all on the same line :)
AJ
@ClaudeDebussy
Dec 08 2016 00:36
@TylerMoeller thanks a lot!
CamperBot
@camperbot
Dec 08 2016 00:36
claudedebussy sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1103 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Dec 08 2016 00:38
@urketadic Check out jQuery's .css() method: $(selector).css('color', 'red');
http://api.jquery.com/css/
aRtoo
@artoodeeto
Dec 08 2016 00:39
Hi guys can you make responsive webpage without bootstrap?
AJ
@ClaudeDebussy
Dec 08 2016 00:40

@artoodeeto Yes

check out one i am working on. It is

https://jsfiddle.net/ClaudeDebussy/bhsmmob4

Uros Tadic
@urketadic
Dec 08 2016 00:40
yes i know about .css iv tried adding it
but it doesnt work
AJ
@ClaudeDebussy
Dec 08 2016 00:40
…it is really basic but the divs respond to changing the size of the viewport
Tyler Moeller
@TylerMoeller
Dec 08 2016 00:41
@urketadic Can you add it back? I'll try to see why it isn't working
Uros Tadic
@urketadic
Dec 08 2016 00:42
okj
like iv added old code now
but how an i implement css with it
we need to keep count of backspaces and everything
aRtoo
@artoodeeto
Dec 08 2016 00:45
@ClaudeDebussy thank you dude
CamperBot
@camperbot
Dec 08 2016 00:45
artoodeeto sends brownie points to @claudedebussy :sparkles: :thumbsup: :sparkles:
:cookie: 140 | @claudedebussy |http://www.freecodecamp.com/claudedebussy
aRtoo
@artoodeeto
Dec 08 2016 00:46
hi guys. i have some newbie issues. why is it i cant make the Loremipsum header to go center center? i have the codepen. http://codepen.io/artoo/pen/ZBbYyM?editors=1100
Zachary
@Bazill03
Dec 08 2016 00:49
Weird so in my coin flipper I got the finish button to clear by using $(output).html(""). Now it won't append to the div anymore.
grantknaver
@grantknaver
Dec 08 2016 00:51
can anyone help me understand what a generator is mediawiki
tommy
@tommygebru
Dec 08 2016 00:59
@artoodeeto you want the text to be in the middle of the div veritcally?
aRtoo
@artoodeeto
Dec 08 2016 00:59
@tommygebru yes sir
tommy
@tommygebru
Dec 08 2016 00:59
i use flexbox for this issue
aRtoo
@artoodeeto
Dec 08 2016 01:00
@tommygebru it bothers me when i put a margin of 50% the whole header goes down
tommy
@tommygebru
Dec 08 2016 01:00
or you can try padding?
aRtoo
@artoodeeto
Dec 08 2016 01:00
@tommygebru tried padding too.
tommy
@tommygebru
Dec 08 2016 01:00
margin is outside space of the element targeted
padding is inside space so if its
.blue-div{padding-top: 100px;}
it should come out nicely for the text only being moved down
or
Peter
@xor4
Dec 08 2016 01:01
In wikipedia viewer challenge when I use a loop to get article data from API, why is there a "undefined" string above the output from the API?
I have no idea where it's coming from
tommy
@tommygebru
Dec 08 2016 01:01
.h1-text{margin-top:100px;} should achieve the same effect
share code @xor4
Type something in the input then press enter and you will see what I mean
Uros Tadic
@urketadic
Dec 08 2016 01:10
Does any1 have enough knowledge in javascript to do this?
http://codepen.io/urketadic/pen/YpLgBX
I need numbers to turn red if they are wrong automaticly.
Moisés Man
@moigithub
Dec 08 2016 01:12

cuz u concatenating

for(var i = 0; i < data[1].length; i++){
                        html += "<div class='well'>"; // <--- here

initial html variable value is undefined...
@xor4
var html = ""; //<<<< try initializing as empty string

Peter
@xor4
Dec 08 2016 01:15
Thanks @moigithub
Worked
CamperBot
@camperbot
Dec 08 2016 01:15
xor4 sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 2286 | @moigithub |http://www.freecodecamp.com/moigithub
Tyler Moeller
@TylerMoeller
Dec 08 2016 01:17
@artoodeeto To center text vertically, make the height of the text equal to the line-height. Since the parent container is 300px tall, try this:
.lorem{
  text-align: center;
  height: 300px;
  line-height: 300px;
}
Johnny
@JohnnyBizzel
Dec 08 2016 01:20
@urketadic It is not clear from the instructions what is happening.
Uros Tadic
@urketadic
Dec 08 2016 01:24
Johnny i am making a program for my friend to learn the PI
currently i have the submit button
what i wnat is for number to automaticly turn red when its wrong
and not in pi sequence
Tyler Moeller
@TylerMoeller
Dec 08 2016 01:24
@artoodeeto I don't understand the question
Uros Tadic
@urketadic
Dec 08 2016 01:32
nvm il get it fixed
tommy
@tommygebru
Dec 08 2016 01:38
@TylerMoeller can i get a second pair of eyes :eyes: on this?
https://tommygebru.github.io/twitch-streamer/
aside from the 3 errors in jsconsole
there seems to be an odd issue where the "x" on the non-existent streamers dont show up immediately
i had to click on the false streamer and when i get 404 page i click "back" and then refresh the page and then the "x" shows up and i can delete the 2 false streamers
Zachary
@Bazill03
Dec 08 2016 01:39
@urketadic So if you put 14158 you want 8 to turn red?
Tyler Moeller
@TylerMoeller
Dec 08 2016 01:55
@tommygebru I'm seeing 27 errors and 2 warnings. Could you put in codepen?
tommy
@tommygebru
Dec 08 2016 01:56
oh man is that because of the adblock extensions I disabled 2 myself and they all went away
@TylerMoeller
emamadordev
@emamadordev
Dec 08 2016 01:56
why doesn't this offset when using bootstrap's offset class? I've been trying to fix this for hours. my gawd!! i'm going insane.
http://codepen.io/emmanuelamador/pen/bBKVbd
Tyler Moeller
@TylerMoeller
Dec 08 2016 01:56
Ahh, could be - it does say "ERR_BLOCKED_BY_CLIENT" @tommygebru
tommy
@tommygebru
Dec 08 2016 01:57
@TylerMoeller currently these are my errors i am seeing
let me know if its the same for you :smile:
Screen Shot 2016-12-07 at 5.57.28 PM.png
Tyler Moeller
@TylerMoeller
Dec 08 2016 01:58
@emamador <div class="col-md-3 col-md-offset-4 redbg">
@tommygebru not turning off my adblocker lol :) it's on for a reason haha
tommy
@tommygebru
Dec 08 2016 01:59
yeah
Tyler Moeller
@TylerMoeller
Dec 08 2016 01:59
api.mixpanel, ttvnw.net
tommy
@tommygebru
Dec 08 2016 01:59
usually i keep 1 when making projects but it seems to be affected by both this time!
Zachary
@Bazill03
Dec 08 2016 02:00
@urketadic You'd need to run the verification through a for loop to check each one and color them individually.
tommy
@tommygebru
Dec 08 2016 02:00
@TylerMoeller the second
ttvnw.net
doesnt work
@TylerMoeller is mixpanel for me?
Tyler Moeller
@TylerMoeller
Dec 08 2016 02:01
Those are just some of the sites that get blocked
emamadordev
@emamadordev
Dec 08 2016 02:02
@TylerMoeller oh my god i'm dumb. thank you. i was following bootstrap's example code for offsetting . now that i look at the url I think that's the newer version of bootstrap. offsetting is written differently in the newer version. take a look: https://v4-alpha.getbootstrap.com/layout/grid/#example-offsetting-columns
CamperBot
@camperbot
Dec 08 2016 02:02
emamador sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1104 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Dec 08 2016 02:03
@emamador Yeah, they changed a lot in v4...and they stopped updating the v3 documents in august, so the v4 docs show up ahead of search results a lot of the time. Very frustrating...
emamadordev
@emamadordev
Dec 08 2016 02:06
@TylerMoeller wow i didn't even know there was a newer version. i'm gonna go take a look at it. thanks again.
CamperBot
@camperbot
Dec 08 2016 02:06
emamador sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: emamador already gave tylermoeller points
ionut
@ionutinz
Dec 08 2016 02:11
Hey, can someone point me out what am i doing wrong that the last col is getting out of the well ? https://codepen.io/ionutinz/full/mOKyQB/
Tyler Moeller
@TylerMoeller
Dec 08 2016 02:12
@ionutinz There are no spaces in that text, so you would have to use CSS to tell it to break the word up:
.col-md-2 {
  word-break: break-word;
}
Use a different class though ^^ that's just an example
ionut
@ionutinz
Dec 08 2016 02:13
oh, wow. thanks @TylerMoeller :)
CamperBot
@camperbot
Dec 08 2016 02:13
ionutinz sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1105 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
c0d0er
@c0d0er
Dec 08 2016 03:07
@TylerMoeller thanks
CamperBot
@camperbot
Dec 08 2016 03:07
c0d0er sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1107 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Levis
@alevis
Dec 08 2016 03:18
hi
Tom
@moT01
Dec 08 2016 03:18
@alevis hi
Levis
@alevis
Dec 08 2016 03:19
@c0d0er it shows something when I run it here
i'm currently working on the arguments optional challenge at freecodecampy
but I'm stuck
c0d0er
@c0d0er
Dec 08 2016 03:20
@alevis thanks!
CamperBot
@camperbot
Dec 08 2016 03:20
c0d0er sends brownie points to @alevis :sparkles: :thumbsup: :sparkles:
:cookie: 289 | @alevis |http://www.freecodecamp.com/alevis
Tom
@moT01
Dec 08 2016 03:21
@alevis yea
try some wd-40
Levis
@alevis
Dec 08 2016 03:22
what's that?
Tom
@moT01
Dec 08 2016 03:22
lubricant
a joke, ...whats the problem
got a pen?
Tyler Moeller
@TylerMoeller
Dec 08 2016 03:25
@alevis You'll get better help for the JavaScript challenges over at: https://gitter.im/FreeCodeCamp/HelpJavaScript
Levis
@alevis
Dec 08 2016 03:25
@TylerMoeller thanks!
CamperBot
@camperbot
Dec 08 2016 03:25
alevis sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1108 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Joshua Berger
@onewebdeveloper
Dec 08 2016 03:29
Having some trouble with some bootstrap coding. When I collapse my browser window it properly creates the compressed drop-down menu, but when I click on it nothing happens.

<body>

<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-targer="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class="navbar-brand">Marvin Minsky</a>
</div><!-- Navbar Header -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#Biography">| Biography |</a>
<li><a href="#Academic">| Academic Accomplishments |</a>
<li><a href="#Wikipedia">| Wikipedia Article |</a>
<li><a href="#Other">| Other Links |</a>
</ul>
</div>
</div><!-- end container -->
</nav><!-- end navbar -->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</body>
</html>

Tom
@moT01
Dec 08 2016 03:31
@onewebdeveloper i probly cant help with the bootstrap, but i may see a syntax problem
data-targer
Ken Haduch
@khaduch
Dec 08 2016 03:32
@onewebdeveloper - make sure that you have loaded jquery.js and bootstrap.js in your JS panel (if you are using CodePen) and ordering is important - jquery first, bootstrap.js second. AND IT IS A JAVASCRIPT FILE - a companion to bootstrap.css.
Tom
@moT01
Dec 08 2016 03:32
i assume its supposed to be target, ...may be your problem
Joshua Berger
@onewebdeveloper
Dec 08 2016 03:34
@moT01 Thanks. That didn't solve the problem but it was certainly a problem
CamperBot
@camperbot
Dec 08 2016 03:34
onewebdeveloper sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 342 | @mot01 |http://www.freecodecamp.com/mot01
Joshua Berger
@onewebdeveloper
Dec 08 2016 03:37
@khaduch Thanks. Awesome! It works now.
CamperBot
@camperbot
Dec 08 2016 03:37
onewebdeveloper sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2056 | @khaduch |http://www.freecodecamp.com/khaduch
fadyboy
@fadyboy
Dec 08 2016 03:39
Hi all, I'm having a challenge with my twitchtv app. At the moment I'm making 2 api calls, 1 to get the user stream and a 2nd to get the user details so that I can get their logo image. I have the relevant data but how to render it in my html so that each user has a row of data is where the challenge is
Michael Karpinski
@karpimpski
Dec 08 2016 03:39
does anybody have a good resource for a short tutorial for React? I just finished one but I still don't feel like I understand it. I'm able to complete all of the quizzes for it, but I feel like I don't understand it as good as I should. thanks!
@fadyboy are you aware of innerHTML and how it works? it's a string that you append to.
say you had a table that you could access using a JavaScript variable called table. you would simple say table.innerHTML += '<tr>INFORMATION HERE</tr>'
just like plain HTML! only you can add dynamic JS content
fadyboy
@fadyboy
Dec 08 2016 03:42
@karpimpski I see what you mean, so I could use a table and populate it dynamically, I'll give that a try and see how I get on. Tx
CamperBot
@camperbot
Dec 08 2016 03:42
fadyboy sends brownie points to @karpimpski :sparkles: :thumbsup: :sparkles:
:cookie: 401 | @karpimpski |http://www.freecodecamp.com/karpimpski
Michael Karpinski
@karpimpski
Dec 08 2016 03:43
@fadyboy sure thing, mention me if you need some more help!
Nathanael-M
@Nathanael-M
Dec 08 2016 04:56
I'm having a heckuva time with Scrollspy. Primarily with making it apply to a bit more of a stylized menu. Anyone got any experience with that?
@karpimpski Try codecademy maybe? They're reliable and have a React course.
Michael Karpinski
@karpimpski
Dec 08 2016 04:59
@Nathanael-M didn't know they had one! I'll definitely do that then, thanks
CamperBot
@camperbot
Dec 08 2016 04:59
karpimpski sends brownie points to @nathanael-m :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for nathanael-m
Ashan Mohammed
@AshanMohammed
Dec 08 2016 06:15

Hello Guys! Can anybody tell me how to modify the repo in GitHub so i can use it to launch my own Product. https://github.com/harrystech/prelaunchr#developer-setup

The problem is i couldn't find the index.html file to start working. can anybody help

grantknaver
@grantknaver
Dec 08 2016 06:21
what is wrong about this event haddler that makes it not prevent default and does anyone know why .val() does not work but .value does?
```

```
```
$("form").find("input").keypress(function(e){
  if(e.which === 13) {
    this.form.submit(function(evt){
    evt.preventDefault();
    var subject = mainInput.value;
      //put searchResults
        alert(subject);

        var url =  "https://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts|pageimages&generator=search&exsentences=&exlimit=max&exintro=1&explaintext=1&piprop=thumbnail|name&pithumbsize=50&pilimit=max&gsrsearch=" + subject + "&gsrnamespace=0&gsrlimit=10"; 

      //function getJSON
    });
```
any ideas
Sorin Ruse
@sorinr
Dec 08 2016 06:27
@grantknaver val() is jquery value is vanilla javascript
cng
@ngcharnon
Dec 08 2016 06:27
How do I center a text enclosed in a <h3> element?
Sorin Ruse
@sorinr
Dec 08 2016 06:28
@ngcharnon use text-center class if using bootstrap or margin: 0 auto in css otherwise
grantknaver
@grantknaver
Dec 08 2016 06:29
I know but I am using both
which you cant do lol
you have any idea how to get the submit function to preventDefault
@sorinr
any ideas
Sorin Ruse
@sorinr
Dec 08 2016 06:35
@grantknaver here my example
grantknaver
@grantknaver
Dec 08 2016 06:37
does the search even work for that
Sorin Ruse
@sorinr
Dec 08 2016 06:40
@grantknaver yep. just reload the example and check it
Henry Cabello
@hacu9
Dec 08 2016 06:40
Hey guys! I can't think of any good colors for the blocks http://codepen.io/cabello986/pen/WoybqL
Any help ideas?
Nathanael-M
@Nathanael-M
Dec 08 2016 06:41
Slick as heck!
Try going on Adobe Kuler for some palette inspiration!
grantknaver
@grantknaver
Dec 08 2016 06:42
wow
Henry Cabello
@hacu9
Dec 08 2016 06:43
any fedback btw xD
Nathanael-M
@Nathanael-M
Dec 08 2016 06:43
Really cool idea, man.
Henry Cabello
@hacu9
Dec 08 2016 06:48
thanks xD Nice colors btw just gotta figure out how to properly color use em
Nathanael-M
@Nathanael-M
Dec 08 2016 06:48
Kuler is great inspiration.
grantknaver
@grantknaver
Dec 08 2016 06:49
how did you get the the alert to sound you didnt even call the function
@sorinr
Sorin Ruse
@sorinr
Dec 08 2016 06:51
@grantknaver witch function? you you fill the input and press enter (key 13) it executes the code inside the if statement so it executes the alert. look also in html at the opening form tag
grantknaver
@grantknaver
Dec 08 2016 06:54
I see it I didnt check the html. it makes sense
Henry Cabello
@hacu9
Dec 08 2016 06:54
grantknaver
@grantknaver
Dec 08 2016 07:05
@sorinr you still there
Sorin Ruse
@sorinr
Dec 08 2016 07:11
@grantknaver yep
grantknaver
@grantknaver
Dec 08 2016 07:17
the submit function is not taking
Sorin Ruse
@sorinr
Dec 08 2016 07:20
@grantknaver what do you mean?
grantknaver
@grantknaver
Dec 08 2016 07:21
when I try to get the form to submit the prevent default doesnt happen
```
me stuck
Sorin Ruse
@sorinr
Dec 08 2016 07:26
@grantknaver you just have to "sumbit" it manually if you prevent default. the prevent works. as you see when filling the input and press enter it shows the input content then it alerts you "form not submitted" and the input remains with the same value. that means the submission is prevented
@grantknaver otherwise the input field gets cleared of his value
grantknaver
@grantknaver
Dec 08 2016 07:30
its and I follow you, but what do you mean by manually
what was messing me up was I was trying to use two different event objects and it jst was not working
but what do you mean manually
Sorin Ruse
@sorinr
Dec 08 2016 07:35
@grantknaver reload my pen and input a string and press enter. you should see the constructed url ready for the api call
@grantknaver sorry didn't saw you already have a function for using the api. just a sec
Uzair Ali
@uajkhan
Dec 08 2016 07:40
If I want to upload a picture into my portfolio where should I upload it ?
kirbyedy
@kirbyedy
Dec 08 2016 07:41
@uajkhan use some cloud service
Uzair Ali
@uajkhan
Dec 08 2016 07:41
@kirbyedy would you care to suggest some good service ?
kirbyedy
@kirbyedy
Dec 08 2016 07:42
I use dropbox. You can use github as well, or sites like postimg.org
Uzair Ali
@uajkhan
Dec 08 2016 07:42
@kirbyedy ty
CamperBot
@camperbot
Dec 08 2016 07:42
uajkhan sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1633 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Sorin Ruse
@sorinr
Dec 08 2016 07:45
@grantknaver reload it now. input something, hit enter and look into the console. u will see the api response
Sorin Ruse
@sorinr
Dec 08 2016 07:50
@grantknaver i have also added an alert with the response. then you do whatever you want with the response
Uzair Ali
@uajkhan
Dec 08 2016 07:52
http://codepen.io/uajkhan/pen/yVEJdj
guys how can i place the image next to the description inside the jumbotoron ?
Sorin Ruse
@sorinr
Dec 08 2016 07:54
@uajkhan it is class="col-md-4" not class=".col-md-4"
@uajkhan same for the other div
Uzair Ali
@uajkhan
Dec 08 2016 07:55
@sorinr oh
@sorinr its still the same
Sorin Ruse
@sorinr
Dec 08 2016 07:58
@uajkhan make the img class="img-responsive"
Uzair Ali
@uajkhan
Dec 08 2016 07:59
@sorinr it is
Michael Karpinski
@karpimpski
Dec 08 2016 08:00

does anybody know how FCC aligns both their images and text vertically? I can only get 1 to work at a time by using line-height or vertical-align. I set it up like this: <td><img src={this.props.img}></img>{this.props.username}</td>

sorry, I meant for the Camper Leaderboard project

Sorin Ruse
@sorinr
Dec 08 2016 08:00
@uajkhan lol. seen it after. if you make class="col-md-3" instead of class="col-md-4" it works but its not normal
Uzair Ali
@uajkhan
Dec 08 2016 08:01
@sorinr but aren't there supposed to be 12 grid blocks ?
@uajkhan still its a bit down
Sorin Ruse
@sorinr
Dec 08 2016 08:02
@uajkhan yep. thats why i said its not normal
Uzair Ali
@uajkhan
Dec 08 2016 08:02
@sorinr any clue how to fix it ?
@sorinr ok i got it the padding was fudging up the grids but still its a bit down
Sorin Ruse
@sorinr
Dec 08 2016 08:08
@uajkhan its because the img iz 400px height. you can try img{margin-top: -100px;}
Uzair Ali
@uajkhan
Dec 08 2016 08:10
okay let me try
is there any class to centre align two divs horizontally ?
@sorinr
Sorin Ruse
@sorinr
Dec 08 2016 08:12
@uajkhan try class="text-center"
Uzair Ali
@uajkhan
Dec 08 2016 08:15
well i think css did the work quite right @sorinr
does it look good now ?
Sorin Ruse
@sorinr
Dec 08 2016 08:20
@uajkhan i think its ok
Ashan Mohammed
@AshanMohammed
Dec 08 2016 08:21
how do i read user input from console? I am trying to solve hackerrank challenges
Sorin Ruse
@sorinr
Dec 08 2016 08:23
@uajkhan for the desktop. but it looks wired on mobile. so how do you want the text and img be centered? both horizontally and vertically inside the jumbotron?
Uzair Ali
@uajkhan
Dec 08 2016 08:26
@sorinr I am making this only for desktop it's not responsive at all
I only wanted to center them horizontally next to each other , If I were going for a responsive design then I would have wanted it align vertically too
Sorin Ruse
@sorinr
Dec 08 2016 08:29
@uajkhan if you want also responsive you will have to deal with the margins using @media queries
Uzair Ali
@uajkhan
Dec 08 2016 08:31
@sorinr @media what's that ?
@sorinr I thought for responsive max and min width's along with percentages work best
Uzair Ali
@uajkhan
Dec 08 2016 08:34
@sorinr that's what i meant min and max widths but had no clue what media was
@sorinr This seems a bit ahead of my course so I will look at it later for sure
@sorinr and btw Thank you so much :)
CamperBot
@camperbot
Dec 08 2016 08:36
uajkhan sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 915 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Dec 08 2016 08:36
@uajkhan welcome
Michael Karpinski
@karpimpski
Dec 08 2016 08:37
http://codepen.io/karpimpski/pen/xRzZoO check out my Leaderboard app! I haven't finished styling, but all of the JS code is done. I was recently against using React, but after learning it better and seeing how useful it is, especially for this project, I'm glad I got to learn it. please let me know what you think of my JS code and maybe some tips for styling. thank you :)
sorry, linked the c9. will change that to codepen in 1 sec
kirbyedy
@kirbyedy
Dec 08 2016 08:50
@karpimpski nice, if you could add an sort option it would be even better
so sort by all time points, or 30 days point, or by name
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 10:04
hello could some help me with my weather app ?
hello could someone help me with my weather app ?? https://gist.github.com/Mr-Kumar-Abhishek/5ae9f146c0239e3eb00fcad399c7cec0 I am trying to toggle temperature the live version without these changes https://mr-kumar-abhishek.github.io/weather/
Heama Sadagopan
@Heama-s
Dec 08 2016 10:10
Hi can anyone help me to add a image in codepen
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 10:10
@Heama-s use cloudinary
Heama Sadagopan
@Heama-s
Dec 08 2016 10:10
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 10:11
@Heama-s use cloudinary http://cloudinary.com/ .. looking at the pen...
Heama Sadagopan
@Heama-s
Dec 08 2016 10:11
thanks @Mr-Kumar-Abhishek
Marianissimus
@Marianissimus
Dec 08 2016 10:11
@Heama-s where would you like to add an image?
CamperBot
@camperbot
Dec 08 2016 10:11
heama-s sends brownie points to @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:cookie: 425 | @mr-kumar-abhishek |http://www.freecodecamp.com/mr-kumar-abhishek
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 10:12
@Heama-s for this tribute page ??
Heama Sadagopan
@Heama-s
Dec 08 2016 10:12
@Marianissimus as resource i wanted to add in codepen, so that i can use that image in source
@Mr-Kumar-Abhishek I am developing that page in code pen
Marianissimus
@Marianissimus
Dec 08 2016 10:13
ah, i don't think you can do that. I mean, I read that you need to buy a subsrciption plan. Otherwise, use urls like you already have: <img src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg">
Heama Sadagopan
@Heama-s
Dec 08 2016 10:14
@Marianissimus got it
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 10:14
@Heama-s okay use cloudinary for keeping images then add the url of the image as such <img src="https://url/img.png">
Marianissimus
@Marianissimus
Dec 08 2016 10:15
here, asset hosting (such as images) is only for codepen pro: https://blog.codepen.io/documentation/pro-features/asset-hosting/
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 10:15
@Heama-s i could give a free invite for cloudinary it is free
@Marianissimus using cloudinary CDN is a better option :)
@Marianissimus between could you help me with my weather app ?/
Marianissimus
@Marianissimus
Dec 08 2016 10:18
only with the html and css, just a beginner in js @Heama-s
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 10:19
@Marianissimus mine is js problem :/
Marianissimus
@Marianissimus
Dec 08 2016 10:19
sorry :(
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 10:20
hmm... I would see if i could get any help in the forums
hmm... I would see if i could get any help in the for
hmm... I would see if i could get any help in the forums *
this is a slack time for chats isn't it ?
Marianissimus
@Marianissimus
Dec 08 2016 10:21
hmm... i would see if i could get... bla bla... we're here
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 10:22
right then , could someone help me with my weather app ?? https://gist.github.com/Mr-Kumar-Abhishek/5ae9f146c0239e3eb00fcad399c7cec0 I am trying to toggle temperature the live version without these changes https://mr-kumar-abhishek.github.io/weather/
ionut
@ionutinz
Dec 08 2016 10:23
hey
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 10:23
@ionutinz hello
Marko
@Aywaar
Dec 08 2016 10:30
Hey all, need some help. I want to make my text to "squeeze" inside its container. The container is fixed to 100% size of the page and I want the text inside it to "mold" itself to fit the page no matter the font type or size and not overflow otside the container. Any ideas?
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 10:31
@Aywaar link of the project ?/
Marko
@Aywaar
Dec 08 2016 10:32
This will be the first thing to do, so no code yet, the link would be an empty page
word-wrap douesnt do the trick, anything else I can do?
ionut
@ionutinz
Dec 08 2016 10:32
Can someone give me an idea of what should i do to make these 4 images on the right, grouped 2 with 2 ? there's enough space https://codepen.io/ionutinz/full/mOKyQB/
kirbyedy
@kirbyedy
Dec 08 2016 10:34
@Aywaar I think you answered your question... overflow hidden
ionut
@ionutinz
Dec 08 2016 10:34
i made a row inside the third column where there's all the things from the logo down
but not sure if thats the right way
Marianissimus
@Marianissimus
Dec 08 2016 10:35
@ionutinz you can split that col-sm-whatever it is in 2. 1. Add a row in it. 2. Add two equal columns - col-whatever-6 in it.
@ionutinz what i mean is nest a row in that column. and split that row in two columns
Marko
@Aywaar
Dec 08 2016 10:36
@kirbyedy nah man, the text then just goes outside the conatiner and is hiden, cant even scroll to it. I want the the text to "squeeze" like a marshmallow between fingers
kirbyedy
@kirbyedy
Dec 08 2016 10:37
then try with overflow auto
Suman kharel
@sumankharel
Dec 08 2016 10:38
Hi, i want to Build a Random Quote Machine. It has asked for use of APIs. What kind of API should i use?
Marko
@Aywaar
Dec 08 2016 10:39
@kirbyedy heh, that doesnt squeeze the text, just expands my container to fit the text and gives me a slider :)
kirbyedy
@kirbyedy
Dec 08 2016 10:39
I guess I dont understand what are you trying to do
Marko
@Aywaar
Dec 08 2016 10:40
ok, gimme a minute @kirbyedy
there
ionut
@ionutinz
Dec 08 2016 10:46
thanks @Marianissimus
CamperBot
@camperbot
Dec 08 2016 10:47
ionutinz sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 173 | @marianissimus |http://www.freecodecamp.com/marianissimus
:P
Marianissimus
@Marianissimus
Dec 08 2016 10:47
:)) @forkerino
Marko
@Aywaar
Dec 08 2016 10:48
@forkerino hahahahhaha, i need to get that mug. This is litteraly my first piece of coding and my first problem.
Marianissimus
@Marianissimus
Dec 08 2016 10:49
that should be my background. unfortunately, it tiles... :)
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 10:49
@Aywaar could you give a js fiddle or codepen or a live project of what you want to do ??
Pieter Stokkink
@forkerino
Dec 08 2016 10:51
@Aywaar You could start by making your font smaller. :)
Pieter Stokkink
@forkerino
Dec 08 2016 10:51
You can't tell css to make something big and small at the same time.
Marko
@Aywaar
Dec 08 2016 10:52
I dont want it to be smaller, the img I linked up there is what I want, big font but squished
@kirbyedy I feel more like im in process than metamorphosis:)
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 10:57
@Aywaar Question 1: do you want the font size to remain same ?
Pieter Stokkink
@forkerino
Dec 08 2016 10:57
@Aywaar CSS can only squeeze the text until the letter's boundaries touch (so where the right part of the A touches the left part of the Y). It can't make the letters less wide or overlap.
Marko
@Aywaar
Dec 08 2016 10:57
yes
Pieter Stokkink
@forkerino
Dec 08 2016 10:57
What you can do is make an image out of it using your favorite imaging software (ms paint ftw!) and use that as a background.
Marko
@Aywaar
Dec 08 2016 10:58
@forkerino thats what I needed to hear
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 10:58
@Aywaar Question 2: do you want the container size to be same too ?
Pieter Stokkink
@forkerino
Dec 08 2016 10:58
There might be some JS libraries that do this, but that's something for a later stage.
Marko
@Aywaar
Dec 08 2016 10:58
@Aywaar I would like for it to be the size of the vrowser window
browser*
@forkerino thats a good idea
ionut
@ionutinz
Dec 08 2016 11:00
How can I make a text responsive ? a big title
cause at this point it just out of the container
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 11:01
@Aywaar you could increase the container size to fully occupy the screen , or else you could do some thing like this https://codepen.io/Mr-Kumar-Abhishek/pen/eBKWdp lol
Pieter Stokkink
@forkerino
Dec 08 2016 11:01
@Mr-Kumar-Abhishek Nice one, I didn't know about the letter-spacing property!
Marko
@Aywaar
Dec 08 2016 11:02
@Mr-Kumar-Abhishek haha, no, but thanks anyway, I think Im gonna go with @forkerino 's advice and use an image.
CamperBot
@camperbot
Dec 08 2016 11:02
:cookie: 426 | @mr-kumar-abhishek |http://www.freecodecamp.com/mr-kumar-abhishek
:cookie: 304 | @forkerino |http://www.freecodecamp.com/forkerino
aywaar sends brownie points to @mr-kumar-abhishek and @forkerino :sparkles: :thumbsup: :sparkles:
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 11:02
@Aywaar my suggestion would be to choose different font though
Pieter Stokkink
@forkerino
Dec 08 2016 11:02
I was gonna say the same.
Look for an ultra thin font somewhere, I'm sure they exist
Marko
@Aywaar
Dec 08 2016 11:03
@forkerino ye, thats also a good idea, But I would like the header for the page to be dependant on screen size if thats even possible.
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 11:04
@Aywaar header could be depend on the screen size
ionut
@ionutinz
Dec 08 2016 11:11
how can i color the background of a div, without it affecting the text color aswell?
other than using wells
A_A
@Otto-AA
Dec 08 2016 11:12
@ionutinz what about background-color: yourcolor ?
R31Z
@R31Z
Dec 08 2016 11:12
yup! what Otto said
ionut
@ionutinz
Dec 08 2016 11:13
i did that, but it changes text aswell...https://codepen.io/ionutinz/full/mOKyQB/ at the footer of the page
A_A
@Otto-AA
Dec 08 2016 11:15
I don't think it's affecting the text, but just that the grey text is barely readable anyways
Pieter Stokkink
@forkerino
Dec 08 2016 11:15
@ionutinz It is the same color as all the other text on the page, no?
A_A
@Otto-AA
Dec 08 2016 11:16
give it background-color: aqua if you don't get what we mean :)
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 11:18
@ionutinz you could use alpha value too if you want to set the transparency . (you know for some color combination which make each other look hideous )
R31Z
@R31Z
Dec 08 2016 11:19
@ionutinz what bground color did you want?
Shivank Sharma
@shivanksharma91
Dec 08 2016 11:21
hi i am trying to replicate this as an exercise, but not able to align the image and the content in same manner, i am using bootstrap
[blob]blob
R31Z
@R31Z
Dec 08 2016 11:22
@ionutinz if you wish to change your gray-bg class to a different color, you need to change it from your css
Marko
@Aywaar
Dec 08 2016 11:23
@forkerino @Mr-Kumar-Abhishek Could this be it?: http://jquery-textfill.github.io/
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 11:24
@Aywaar that is a good plugin but it defeats your purpose of keeping the same font-size :)
Pieter Stokkink
@forkerino
Dec 08 2016 11:24
Yeah, it will just make the font smaller to fit the screen.
Marko
@Aywaar
Dec 08 2016 11:26
bah.... back to google-fu
Fabio Di Pane
@saylos
Dec 08 2016 11:28
Guys, have you ever had the impression that what will be asked in the challanges is not discussed during the lessons?! I'm struggling trying to create my RandomQuoteMachine, and watching the example, nothing used there (eg. $.ajax({
headers: {.... etc.) was discussed during the lessons. Pratically my notes are useless, and I'd like not to copy-paste things found on the internet without understanding. Could you please give me a good word or tell me your experience? Is it a good way to learn how to code?
Marko
@Aywaar
Dec 08 2016 11:30
@saylos same place you are now buddy. Finished 100 lessons. Just started coding a couple of hours ago. Stuck on the first line of code :)
Pieter Stokkink
@forkerino
Dec 08 2016 11:30
@saylos You could use $.ajax calls for this challenge, but you could also use the $.getJSON method, which was used during the lessons (it is just a shorthand for an ajax call).
I do agree that the API lessons are a little short and too much focused on copy-pasting code instead of writing it yourself and understanding it, but this makes the challenges more challenging. You have to dig deeper and learn how to find solutions to the problem you are facing.
Marko
@Aywaar
Dec 08 2016 11:31
yup, what @forkerino said
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 11:31
could some one help me testing this if everything works correctly I don't have geolocation in my system so I am can't test it ... https://mr-kumar-abhishek.github.io/weather/
Marianissimus
@Marianissimus
Dec 08 2016 11:32
@Mr-Kumar-Abhishek works fine for me
A_A
@Otto-AA
Dec 08 2016 11:32
grafik.png
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 11:32
@Marianissimus toggle of temperature too when it is clicked ??
A_A
@Otto-AA
Dec 08 2016 11:32
Works for me using firefox
yeah, that too
Marianissimus
@Marianissimus
Dec 08 2016 11:33
toggle in f just fine. fully responsive as well:)
R31Z
@R31Z
Dec 08 2016 11:34
Firefox works but not on Chrome
Pieter Stokkink
@forkerino
Dec 08 2016 11:35
@Mr-Kumar-Abhishek Mostly works, background shows snowy landscape, but it is 20 degrees celsius here.... :P
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 11:35
thanks a lot for the help ! @Otto-AA @Marianissimus , @R31Z Chrome no good ? :(
CamperBot
@camperbot
Dec 08 2016 11:35
mr-kumar-abhishek sends brownie points to @otto-aa and @marianissimus and @r31z :sparkles: :thumbsup: :sparkles:
:cookie: 145 | @r31z |http://www.freecodecamp.com/r31z
:cookie: 376 | @otto-aa |http://www.freecodecamp.com/otto-aa
:cookie: 175 | @marianissimus |http://www.freecodecamp.com/marianissimus
Pieter Stokkink
@forkerino
Dec 08 2016 11:35
@Mr-Kumar-Abhishek I'm using chrome.
R31Z
@R31Z
Dec 08 2016 11:36
My Chrome needs to be updated.. i might as well do that now ;)
Fabio Di Pane
@saylos
Dec 08 2016 11:36
@forkerino Yep I understand that but with a better study base I could focus on more important issues, not just how to start..
Ok I will do it as I did it before, good luck to you too @Aywaa , let's keep in touch
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 11:36
@forkerino I was thinking of adding weather Icons for it... Mr-Kumar-Abhishek/weather#5
Pieter Stokkink
@forkerino
Dec 08 2016 11:38
@Mr-Kumar-Abhishek Yes, seems like a good idea. You could use the weather description instead of the precise condition to narrow the number of icons down.
Shivank Sharma
@shivanksharma91
Dec 08 2016 11:39
hi i am trying to replicate this as an exercise, but not able to align the image and the content in same manner, i am using bootstrap https://codepen.io/shivanksharma91/full/MbVXWy/
Pieter Stokkink
@forkerino
Dec 08 2016 11:39
@saylos Just see the challenge as further studying, not as a simple application of what you have learned.
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 11:39
@forkerino oh okay , Didn't thought of that thanks ! :D
CamperBot
@camperbot
Dec 08 2016 11:39
mr-kumar-abhishek sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
:cookie: 306 | @forkerino |http://www.freecodecamp.com/forkerino
Fabio Di Pane
@saylos
Dec 08 2016 11:42
@forkerino thanks, sometimes a few encouraging words can do a lot
CamperBot
@camperbot
Dec 08 2016 11:42
saylos sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
:cookie: 307 | @forkerino |http://www.freecodecamp.com/forkerino
elminsterrr
@elminsterrr
Dec 08 2016 11:51
Hello guys! Do you know what trick can I use in CSS in my calculator to make my textbox autoscroll when I put number like this: 777777777777777888888, because now it shows only this part 77777777777777 and I want it to show last digs like this: 77777888888
J Player
@Heyjp
Dec 08 2016 11:56
@elminsterrr you could text align right on the screen
Pieter Stokkink
@forkerino
Dec 08 2016 11:56
@Heyjp No, that doesn't work, the overflow still goes to the right.
I think there is no CSS solution. You can use JS.
elminsterrr
@elminsterrr
Dec 08 2016 11:58
yes it doesn't work
@forkerino What Js solution do you think will solve it?
J Player
@Heyjp
Dec 08 2016 11:59
@elminsterrr add direction : rtl to screen
Pieter Stokkink
@forkerino
Dec 08 2016 12:00
@Heyjp Wow, that works!
@Heyjp thanks!
CamperBot
@camperbot
Dec 08 2016 12:00
forkerino sends brownie points to @heyjp :sparkles: :thumbsup: :sparkles:
:cookie: 416 | @heyjp |http://www.freecodecamp.com/heyjp
J Player
@Heyjp
Dec 08 2016 12:01
stackoverflow to the rescue again :D
elminsterrr
@elminsterrr
Dec 08 2016 12:01
brilliant @Heyjp Thanks!
CamperBot
@camperbot
Dec 08 2016 12:01
elminsterrr sends brownie points to @heyjp :sparkles: :thumbsup: :sparkles:
:cookie: 417 | @heyjp |http://www.freecodecamp.com/heyjp
Pieter Stokkink
@forkerino
Dec 08 2016 12:02
@elminsterrr Check Heyjp's solution. I was overcomplicating things again. However, if you would want to use a JS solution, you'd have to create a variable with the current digits you want on the screen and just display those. i.e. store the number in a separate variable than what is shown on screen and only display the latter.
elminsterrr
@elminsterrr
Dec 08 2016 12:03
@forkerino nice! Thanks for your help guys!
CamperBot
@camperbot
Dec 08 2016 12:03
elminsterrr sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
:cookie: 308 | @forkerino |http://www.freecodecamp.com/forkerino
J Player
@Heyjp
Dec 08 2016 12:04
I think there is a lot to get out of your solution @forkerino at least you have options on how to handle the extra values, maybe even display them in a different way.
Pieter Stokkink
@forkerino
Dec 08 2016 12:06
:)
Agree! Now that I think of it.
Tom Tam
@tomtam6
Dec 08 2016 12:56
Hi, I'm looking for a guide on the Twitch Zipline, YouTube doesn't go into detail enough. Thanks.
Pieter Stokkink
@forkerino
Dec 08 2016 12:58
What is your obstacle @tomtam6 ?
Tom Tam
@tomtam6
Dec 08 2016 13:15
Sorry currently traveling. Will reply within 30m
Tom Tam
@tomtam6
Dec 08 2016 14:01
Hi @forkerino
Pieter Stokkink
@forkerino
Dec 08 2016 14:02
hi
Tom Tam
@tomtam6
Dec 08 2016 14:03
I'm seeking a breakdown of how to utilize the twitch API. What to loop through to display what's being asked.
Pieter Stokkink
@forkerino
Dec 08 2016 14:04
Ok.
Tom Tam
@tomtam6
Dec 08 2016 14:04
I see examples of jquery with a JSON.get technique and also I think I've seen another user use an Ajax technique
Pieter Stokkink
@forkerino
Dec 08 2016 14:04
It can be done with both.
Tom Tam
@tomtam6
Dec 08 2016 14:04
I see.
Pieter Stokkink
@forkerino
Dec 08 2016 14:05
But you will need two separate calls for every user, because not all information is available in either.
Tom Tam
@tomtam6
Dec 08 2016 14:05
In the previous Wikipedia Zipline I followed an Ajax approach. But I would also like to understand how it differs from JSON.get as well.
Pieter Stokkink
@forkerino
Dec 08 2016 14:05
So you will need to make a call to /streams/(username) and to channel/(username)
Tom Tam
@tomtam6
Dec 08 2016 14:06
Ok
Pieter Stokkink
@forkerino
Dec 08 2016 14:06
.getJSON is a short form of .ajax() with certain options passed in
Tom Tam
@tomtam6
Dec 08 2016 14:06
I see
Tom Tam
@tomtam6
Dec 08 2016 14:06
Thanks
Pieter Stokkink
@forkerino
Dec 08 2016 14:07
How I did it: first do an api call to the stream and retrieve the info and then afterwards to the channel to get the rest of the info that is needed on the page that I was building.
Tom Tam
@tomtam6
Dec 08 2016 14:10
What comes next, storing those values and iterating with a for loop to extract key and values on both stream and channel?
Pieter Stokkink
@forkerino
Dec 08 2016 14:10
well the json object is quite big, so it is easier to just take what you need.
store them in temporary variables and append to the html on your page.
Tom Tam
@tomtam6
Dec 08 2016 14:19
Like the previous Wikipedia Zipline, the information we need is accessed through indices on the json object right?
Shivank Sharma
@shivanksharma91
Dec 08 2016 14:20
hi, anyone knows, how to change bootstrap's navbar opacity?
Uzair Ali
@uajkhan
Dec 08 2016 14:25
I think you need to change the opacity for .default-navba
bar*
just a guess don't go crazy if it doesn't work
Pieter Stokkink
@forkerino
Dec 08 2016 14:26
@tomtam6 Yes
Shivank Sharma
@shivanksharma91
Dec 08 2016 14:27
@tomtam6 i got it, by just changing .navbar{opacity:0.9} property. thanks
CamperBot
@camperbot
Dec 08 2016 14:27
shivanksharma91 sends brownie points to @tomtam6 :sparkles: :thumbsup: :sparkles:
:cookie: 287 | @tomtam6 |http://www.freecodecamp.com/tomtam6
Tom Tam
@tomtam6
Dec 08 2016 14:30
Thanks for providing your solution, now I know how
Tom Tam
@tomtam6
Dec 08 2016 14:47
@forkerino Thank you
CamperBot
@camperbot
Dec 08 2016 14:47
tomtam6 sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
:cookie: 316 | @forkerino |http://www.freecodecamp.com/forkerino
Pieter Stokkink
@forkerino
Dec 08 2016 14:47
:thumbsup:
Simon Cordova
@gbsimon87
Dec 08 2016 14:56
Hey guys...
I was wondering if someone could please help me with some input slider functionality issues...
Clyde Lobo
@oppiniated
Dec 08 2016 15:06
@gbsimon87 What issues do you have?
Uzair Ali
@uajkhan
Dec 08 2016 15:08
guys is this looking good ?
http://codepen.io/uajkhan/full/qqKPwx/
open in another page because its not reponsive
Shivank Sharma
@shivanksharma91
Dec 08 2016 15:09
@uajkhan nice
Uzair Ali
@uajkhan
Dec 08 2016 15:09
@shivanksharma91 here it looks bad
Fabio Di Pane
@saylos
Dec 08 2016 15:10
@forkerino is it a start?
$("#getQuote").on("click", function(){

    $.getJson("https://andruxnet-random-famous-quotes.p.mashape.com/?cat=famous", function(json){

      ......


  });
Clyde Lobo
@oppiniated
Dec 08 2016 15:10
@uajkhan looks bad, also I would not recommend such deep nesting of css .navbar-default .navbar-nav .open .dropdown-menu > .active > a
That's 6 level of nesting
Uzair Ali
@uajkhan
Dec 08 2016 15:12
@oppiniated how should I do it then
I used a nav bar generator that game me this
Clyde Lobo
@oppiniated
Dec 08 2016 15:12
@uajkhan I'd not recommend using a generator code, try making the navbar yourself
Uzair Ali
@uajkhan
Dec 08 2016 15:14
@oppiniated dude free code camp told us nothing about nav bars and BS nav bars are mostly shit
@oppiniated and i want to scrollspy this Can it be done easily ?
Clyde Lobo
@oppiniated
Dec 08 2016 15:14
@uajkhan scrollspy?
Uzair Ali
@uajkhan
Dec 08 2016 15:15
@oppiniated that thingy where the menu act's as a scroll
Clyde Lobo
@oppiniated
Dec 08 2016 15:15
@uajkhan freecodecamp gives you the push in the right direction, it can't teach you everything, you need to read, code, make mistakes and learn
Uzair Ali
@uajkhan
Dec 08 2016 15:16
Clyde Lobo
@oppiniated
Dec 08 2016 15:16
@uajkhan You can do that with css, you will not get the scroll effect
Or use scrollTop method provided by jquery
Uzair Ali
@uajkhan
Dec 08 2016 15:16
@oppiniated elaborate a bit
@oppiniated scrollspy is a BS plugin
Clyde Lobo
@oppiniated
Dec 08 2016 15:20
for a css only solution, @uajkhan http://www.w3schools.com/html/html_links.asp read the HTML Links - Create a Bookmark section
Tyler Moeller
@TylerMoeller
Dec 08 2016 15:20
@uajkhan Make your site responsive and fix the backgrounds so they aren't all different sizes. If you click the down arrow in the top, right-hand corner of codepen's CSS panel, you can analyze your CSS. It will point out a few errors to fix.
Also, codepen adds <html>, <head>, and <body> tags for you. add stuff to your <head> in the settings.
Uzair Ali
@uajkhan
Dec 08 2016 15:23
Portfolio is hard enough and I thought it would be better if I go for a fixed container instead of responsive
and I tried it and got no errors
@TylerMoeller what stuff
Tyler Moeller
@TylerMoeller
Dec 08 2016 15:23
@uajkhan This:
    <head>
        <link href="https://fonts.googleapis.com/css?family=Cantarell" rel="stylesheet">

    </head>
Uzair Ali
@uajkhan
Dec 08 2016 15:23
@oppiniated that is neat but I think bs would be a better option
@TylerMoeller I have addes that
Tyler Moeller
@TylerMoeller
Dec 08 2016 15:24
This is also very useful if you want to add more to <head>: https://github.com/joshbuchea/HEAD
blob
@uajkhan Yeah, it needs to go in your codepen settings, not your HTML panel.
Uzair Ali
@uajkhan
Dec 08 2016 15:25
oh shi*
no one told me about that @TylerMoeller
Clyde Lobo
@oppiniated
Dec 08 2016 15:25
@uajkhan the problem is, with using a custom solution, you would not know the underlying code and logic. If you still want to use it, try reading the code and understanding what is being done, it may be difficult initially, but you should try
Tyler Moeller
@TylerMoeller
Dec 08 2016 15:25
Take the tour for a few more details: https://codepen.io/pen/tour/welcome/start
Uzair Ali
@uajkhan
Dec 08 2016 15:26
@oppiniated I am reading it and trying to understand it
@TylerMoeller hahaha I think I do need that tour
@TylerMoeller You said something about boxes
boxes not having same size
Tyler Moeller
@TylerMoeller
Dec 08 2016 15:27
blob
^^ the right side - gray boxes are sized differently
Uzair Ali
@uajkhan
Dec 08 2016 15:28
@TylerMoeller I seriously don't know why that is happening. You got any clue ?
@TylerMoeller my screen is a bit smaller and I didn't see that up till now
Tyler Moeller
@TylerMoeller
Dec 08 2016 15:29
Set the background color at the body level instead of on individual divs if you want a uniform background color
Uros Tadic
@urketadic
Dec 08 2016 15:29
Yo can someone change this -> https://jsfiddle.net/ebv5n64j/ so it accepts values even after number is wrong. I mean numbers should still be green if correct and red if wrong and things that are not numbers should not get accepted, but you shouldnt be blocked from typing.
if u make a mistake u wont be able to move on until u fix that mistake, i dont want that
Uzair Ali
@uajkhan
Dec 08 2016 15:30
@TylerMoeller got it. I think
EmmyPlayz
@EmmyPlayz
Dec 08 2016 15:30
Im working on the portfolio page and im trying to add the different like blocks of color like how have the little taskbar at the top and im not sure i know how to do it can someone pm me with some tips or pointers please and thank you
Uzair Ali
@uajkhan
Dec 08 2016 15:32
@TylerMoeller I don't got it :P
I am sorry! Will you explain a little
Tyler Moeller
@TylerMoeller
Dec 08 2016 15:32
@uajkhan
body {
    background-color: #ededed;
}
That's what I mean by applying CSS settings to the <body>
Uzair Ali
@uajkhan
Dec 08 2016 15:32
@TylerMoeller oh thankyou
CamperBot
@camperbot
Dec 08 2016 15:32
uajkhan sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1109 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Dec 08 2016 15:34
Welcome
Uzair Ali
@uajkhan
Dec 08 2016 15:35
@TylerMoeller getting this error Don't use IDs in selectors.
"Don't use IDs in selectors. "
EmmyPlayz
@EmmyPlayz
Dec 08 2016 15:37
Anyone have a good place to learn more about navbars and headers? pm me please
Tyler Moeller
@TylerMoeller
Dec 08 2016 15:37
There should be a link next to the error @uajkhan
I ignore that one though, tbh :)
Alexander Domikov
@AlexanderDom
Dec 08 2016 15:39
@uajkhan so you used id in your css selector, use a class instead
Tyler Moeller
@TylerMoeller
Dec 08 2016 15:39
Most of the errors will be listed here: http://csslint.net/about.html
Uzair Ali
@uajkhan
Dec 08 2016 15:39
@TylerMoeller yeah google wasn't of much help
everyone seemed to be dodging the question
@AlexanderDom but why shouldn't one use id's ?
Alexander Domikov
@AlexanderDom
Dec 08 2016 15:40
in your css you have a rule who starts with #
because of specificity, what it means ?! it means that for 1) you can have only one id with same name in your page
so best case to use it it's form inputs (you need it for couple <label for="id-of-input"><input id=""id-of-input"">
Uzair Ali
@uajkhan
Dec 08 2016 15:41
@AlexanderDom if if have two <P> tags with the id lets say #text-center
will it only work on one ? @AlexanderDom
Alexander Domikov
@AlexanderDom
Dec 08 2016 15:42
or for javascript but often you add same behavior on many blocks
so even in this case you gonna need class instead of id
Uzair Ali
@uajkhan
Dec 08 2016 15:42
got it @AlexanderDom
now my lassstt question
how can I centre allign nav bar buttons ?
like all of them
Alexander Domikov
@AlexanderDom
Dec 08 2016 15:44
and so to come back on specificity, it means that you selector (#myelement) has much more "force" than a class selector, if you wanna change and id behavior, you must create other selector with an id or worse use !important bazooka
Clyde Lobo
@oppiniated
Dec 08 2016 15:44
@uajkhan code?
Uzair Ali
@uajkhan
Dec 08 2016 15:44
wth is !important bazooka :D
same one that you hated
Alexander Domikov
@AlexanderDom
Dec 08 2016 15:45
Uzair Ali
@uajkhan
Dec 08 2016 15:45
@AlexanderDom will sure do
Alexander Domikov
@AlexanderDom
Dec 08 2016 15:45
.my-class { text-align: center!important; }
that is important bazooka
why bazooka ?! because it's overpower all the selectors
Uzair Ali
@uajkhan
Dec 08 2016 15:46
ok got it
it's used in conjunction with class to emphasize some property @AlexanderDom
hahaha alright
Hebert Phillipe
@hiltypro
Dec 08 2016 15:47

Hi Guys,
How are you?

Please could you evaluate my Simon Game?
http://codepen.io/hilty/full/BQrEEv/

Any feedback and advice is appreciated. =)
Cheers,

Alexander Domikov
@AlexanderDom
Dec 08 2016 15:48
@uajkhan
Specifishity
Uzair Ali
@uajkhan
Dec 08 2016 15:49
@AlexanderDom hahah got it
Alexander Domikov
@AlexanderDom
Dec 08 2016 15:49
just a reminder but you need to read and reread and reread and try after to understand :)

they say same on css lint page :)
Don't use IDs in selectors

IDs shouldn't be used in selectors because these rules are too tightly coupled with the HTML and have no possibility of reuse. It's much preferred to use classes in selectors and then apply a class to an element in the page.

Nathanael-M
@Nathanael-M
Dec 08 2016 15:53
Question, @AlexanderDom , about the fish pic.
Alexander Domikov
@AlexanderDom
Dec 08 2016 15:53
yes ?
Nathanael-M
@Nathanael-M
Dec 08 2016 15:53
And CSS Specificity in general...
Picture 3 and 4.
Pieter Stokkink
@forkerino
Dec 08 2016 15:54
@saylos Yes, it is a start. You can console.log(json) to see how it works and what values you need to access.
Alexander Domikov
@AlexanderDom
Dec 08 2016 15:54
li > ul ?
Nathanael-M
@Nathanael-M
Dec 08 2016 15:54
Picture 3 says "li > ul" and 4 expands it to "ul li p a etc"
So why is there a ">" in 3 and just spaces in 4?
Alexander Domikov
@AlexanderDom
Dec 08 2016 15:54
yes, so > it's used for a direct child
Nathanael-M
@Nathanael-M
Dec 08 2016 15:54
Does not > target an element inside of the first element?
Goootcha. Gotcha. And the spaces are just for targeting a bunch of elements.
Fabio Di Pane
@saylos
Dec 08 2016 15:55
@forkerino ok thanks
CamperBot
@camperbot
Dec 08 2016 15:55
saylos sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
:cookie: 317 | @forkerino |http://www.freecodecamp.com/forkerino
Alexander Domikov
@AlexanderDom
Dec 08 2016 15:55
like <p><span> it gonna work with p > span
Nathanael-M
@Nathanael-M
Dec 08 2016 15:55
Awesome. Thanks a lot, @AlexanderDom.
CamperBot
@camperbot
Dec 08 2016 15:55
nathanael-m sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 396 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
Nathanael-M
@Nathanael-M
Dec 08 2016 15:55
That picture is amazing/
Alexander Domikov
@AlexanderDom
Dec 08 2016 15:56
it's just to say that +, > and ~ works same like two element selectors
yes, not mine, it comes from this article http://www.standardista.com/css3/css-specificity/
Uros Tadic
@urketadic
Dec 08 2016 15:57
@Bazill03 U there
Nathanael-M
@Nathanael-M
Dec 08 2016 15:59
Could you daisy chain the > symbol? Like, .cow > p > span? To only target spans inside of p inside an element with the class .cow?
Alexander Domikov
@AlexanderDom
Dec 08 2016 15:59
and @Nathanael-M it's often used for ul > li couples so if you have this exemple : .my-list > li gonna add a style only on first li not on li inside first li
<ul class="my-list">
  <li>
     <ul>
        <li></li>
     </ul>
  </li>
</ul>
yes you can @Nathanael-M or you can create a class .cow-element
it's easier to maintain
Sorin Ruse
@sorinr
Dec 08 2016 16:01
@uajkhan as @TylerMoeller said i would also use a contrast background applied to the body to see where my elements are styled wrong
Nathanael-M
@Nathanael-M
Dec 08 2016 16:01
Okay, cool. Whereas just ul > li would target all list elements directly inside an unordered list.
What would be the functional difference between .cow and .cow-element exactly?
Sorry for bugging you about this. There are just these little nagging things in CSS that I don't get to ask people about much.
Alexander Domikov
@AlexanderDom
Dec 08 2016 16:02
yes, you can use ul > * because normally in html norm you must have only <li> as direct child of <ul>
Nathanael-M
@Nathanael-M
Dec 08 2016 16:03
And that targets every element inside ul ...
That's way too cool.
Awesome! Thanks a ton, @AlexanderDom !
CamperBot
@camperbot
Dec 08 2016 16:03
nathanael-m sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:warning: nathanael-m already gave alexanderdom points
Nathanael-M
@Nathanael-M
Dec 08 2016 16:03
Seriously helpful!
Alexander Domikov
@AlexanderDom
Dec 08 2016 16:04
.cow-element it's just me using BEM naming convention, Bem it's Block Element Modifier, so your bloc is cow, element it can be i don't know grass, so it's gonna be .cow-grass
and if you have some other grass, you can call it .cow-grass--other
just a naming convention
and in this case --other it's a Modifier
Nathanael-M
@Nathanael-M
Dec 08 2016 16:05
Awesome. Clear hierarchy and such.
Alexander Domikov
@AlexanderDom
Dec 08 2016 16:06
Nathanael-M
@Nathanael-M
Dec 08 2016 16:09
That's really clever.
Alexander Domikov
@AlexanderDom
Dec 08 2016 16:09
:)
yes because, often don't know how to name your elements, so it's nice if you have a methodology
Nathanael-M
@Nathanael-M
Dec 08 2016 16:10
Yeah. And it works around memory if you have a naming system that dictates how you name things. You can reverse engineer it.
Antonious Stewart
@Antonious-Stewart
Dec 08 2016 16:13
I'm trying to center a box in the middle of my screen for a tribute page and I'm having a lot of trouble with it! any ideas how to get it center.
Alexander Domikov
@AlexanderDom
Dec 08 2016 16:13
@Nathanael-M last BOOM advice for today ^^, perhaps you don't know attribute selector, like [class*=cow], what it does, it selects all element have word cow inside his class, not just class="cow", class="mySupercow", or "cowWhoSaidThat" works too, everywhere :D
Nathanael-M
@Nathanael-M
Dec 08 2016 16:14
Are you kidding me...
Wow. I definitely did not know about that. Wow.
Alexander Domikov
@AlexanderDom
Dec 08 2016 16:15
=] happy to share it
Nathanael-M
@Nathanael-M
Dec 08 2016 16:15
That's so powerful, especially if you have a consistent naming convention.
Alexander Domikov
@AlexanderDom
Dec 08 2016 16:15
yes sir
Nathanael-M
@Nathanael-M
Dec 08 2016 16:16
Well thanks a lot, man.
I'm excited to start another project, haha. Want to put all this to the test.
Alexander Domikov
@AlexanderDom
Dec 08 2016 16:16
nice ;) you're welcome
Nathanael-M
@Nathanael-M
Dec 08 2016 16:18
Bookmarking it.
Fabio Di Pane
@saylos
Dec 08 2016 16:22
Ok I admit it, I'm ratling in the dark..pls show me the light..
$("#getQuote").on("click", function(){

  var quoteAPI = "https://andruxnet-random-famous-quotes.p.mashape.com/?cat=famous";

  $.getJson(quoteAPI, function(json){

    var html="";
    json.forEach(function(val){
      html += "<div class='quote'>";
      html += "<h1> '"+ val.quote + "'</h1>";
    });
    $(".quote").html(html);

    });

});
sergiomgaspar
@sergiomgaspar
Dec 08 2016 16:23
Hi all
Sorin Ruse
@sorinr
Dec 08 2016 16:23
@AlexanderDom yep the bem convention is nice. i most of the time worked on an object element naming convention
sergiomgaspar
@sergiomgaspar
Dec 08 2016 16:23
any CSS experts who can help me with my (probably very basic) "bug"? :P
Clyde Lobo
@oppiniated
Dec 08 2016 16:23
@AlexanderDom @Nathanael-M http://flukeout.github.io/# a game for css selectors
Alexander Domikov
@AlexanderDom
Dec 08 2016 16:24
:)
Clyde Lobo
@oppiniated
Dec 08 2016 16:24
@sergiomgaspar may be I can help. I do not consider myself an expert
Alexander Domikov
@AlexanderDom
Dec 08 2016 16:24
there are, others, SMACSS, OOCSS, SuitCSS and surely more other
@sergiomgaspar we can try :]
sergiomgaspar
@sergiomgaspar
Dec 08 2016 16:25
for my wikipedia search ( https://codepen.io/sergiomgaspar/pen/wojOaK ) i can get the footer to remain in the bottom of the page.. when i get results the results "frame" surpasses the footer position :S
Pieter Stokkink
@forkerino
Dec 08 2016 16:25

Hi, I'm building a pomodoro clock and have a problem with the setInterval function. I want to pass in arguments into the callback and tried the following:

interval = setInterval(function(){startClock(seconds,clock-element)},1000);

But this doesn't seem to start the clock. If I hardcode the arguments, it works fine (using setInterval(startClock,1000);).

Tyler Moeller
@TylerMoeller
Dec 08 2016 16:25
@saylos getJson should be getJSON, it is case-sensitive. Also, it looks like you need an API key to use that quote API, according to: https://andruxnet-random-famous-quotes.p.mashape.com/?cat=famous
Alexander Domikov
@AlexanderDom
Dec 08 2016 16:26
@sergiomgaspar have you tryed position: fixed; bottom : 0 ?
Fabio Di Pane
@saylos
Dec 08 2016 16:27
@TylerMoeller ok I saw the upCases, and I found the key explained here https://market.mashape.com/andruxnet/random-famous-quotes but it doesn't show how to add it in JS
sergiomgaspar
@sergiomgaspar
Dec 08 2016 16:28
@AlexanderDom nice guess!! (told you it was a "dumb" mistake eheh).. i was using position relative.. the "fixed" fixed it (punt intended) :D
Alexander Domikov
@AlexanderDom
Dec 08 2016 16:29
@sergiomgaspar it's not dumb, we can't know everything from the start :)
sergiomgaspar
@sergiomgaspar
Dec 08 2016 16:29
@AlexanderDom lol.. sure.. thx again for the help ;)
CamperBot
@camperbot
Dec 08 2016 16:29
sergiomgaspar sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 397 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
Alexander Domikov
@AlexanderDom
Dec 08 2016 16:29
you're welcome
Tyler Moeller
@TylerMoeller
Dec 08 2016 16:30
@saylos This may help you get started: http://stackoverflow.com/questions/36393052/use-api-with-api-key-using-javascript
There are better-explained APIs out there though, if you don't mind using something different. This one is explained very well: https://quotesondesign.com/api-v4-0/
Fabio Di Pane
@saylos
Dec 08 2016 16:36
@TylerMoeller great, thanks a lot!
CamperBot
@camperbot
Dec 08 2016 16:36
saylos sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1110 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Fabio Di Pane
@saylos
Dec 08 2016 16:44
@TylerMoeller see the situation, I guess I'm loosing something along the road
https://codepen.io/saylos/pen/BQxYey?editors=0010
Michael Karpinski
@karpimpski
Dec 08 2016 16:46
@kirbyedy thanks for the feedback! you can sort by alltime and 30 day points. I'll see what I can do about alphabetically
CamperBot
@camperbot
Dec 08 2016 16:46
karpimpski sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1637 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Michael Karpinski
@karpimpski
Dec 08 2016 16:47
hey guys, I just finished the JS for the leaderboard project. Every time I load the table I add event listeners to the top 30 and all time <th> elements because I'm re-making them. is that necessary? do I need to make the listener every time, or is that ineffecient? http://codepen.io/karpimpski/pen/xRzZoO
Tyler Moeller
@TylerMoeller
Dec 08 2016 16:48
@saylos To investigate this further, open your browser's developer console. Ctrl+Shift+J on Windows, Command+Shift+J on Mac.
After you click the quote button, you should see the error you need to investigate.
Fabio Di Pane
@saylos
Dec 08 2016 16:54
@TylerMoeller Linux?
Tyler Moeller
@TylerMoeller
Dec 08 2016 16:55
@saylos It should be the same as Windows on Linux, but depends on the browser. Or, F12 sometimes works too.
Zaurbek Zhakupov
@zzhakupov
Dec 08 2016 17:05
Guys how to make bootstrap work with react
Help pls bootstrap classes don't work in react
CamperBot
@camperbot
Dec 08 2016 17:05
no wiki entry for: pls bootstrap classes dont work in react
Jason Gresalfi
@jgresalfi
Dec 08 2016 17:07
Hello everyone - with both the Wikipedia viewer and now the Twitch project I’m working on, I’m running into CORS issues when testing the API. There’s a hacky extension for Chrome that adds a response header to get around this, but has anyone come up with a good solution in their JS? I am using vanilla JS
Fabio Di Pane
@saylos
Dec 08 2016 17:13
@TylerMoeller :+1:
kirbyedy
@kirbyedy
Dec 08 2016 17:14
@jgresalfi doesn`t adding callback=? to your api call solve the issue ?
Rob McDonald
@McRobbah
Dec 08 2016 17:14
I have been working on my personal portfolio webpage for 3 days now, mostly because I am pushing myself further than probably necessary. As a result, I have read and searched a ton, which is great because I am pushing myself further. However, I can't seem to get my background image to stop repeating. I have used in CSS background-repeat:no-repeat and repeat-1. It will not work though. When I attempt these codes my background image just disappears entirely. If I remove these commands then the background image reappears, but is repeating again. How can I get this to stop repeating, please?
kirbyedy
@kirbyedy
Dec 08 2016 17:15
@McRobbah can we see your pen ?
Rob McDonald
@McRobbah
Dec 08 2016 17:15
Sure, just a second.
I removed the background-repeat commands so you can see the repeating pattern.
Jason Gresalfi
@jgresalfi
Dec 08 2016 17:18
@kirbyedy I think that’s for using JSONP no?
Then you embed the callback function in a script element on your page…i think…?
I’m trying to use CORS with a plain vanilla JS xhr request and just can’t figure it out…not sure it’s possible
kirbyedy
@kirbyedy
Dec 08 2016 17:20
@jgresalfi uh I did not work with xhr :(
Jason Gresalfi
@jgresalfi
Dec 08 2016 17:21
:-) That’s cool. Thanks anyway. I got it working with jQuery for some other projects and want to get it working without a library.
Possibly cannot do it, maybe over my head. Will keep banging head on keyboard.
kirbyedy
@kirbyedy
Dec 08 2016 17:22
@McRobbah background-size: cover;
add it to you body
Rob McDonald
@McRobbah
Dec 08 2016 17:24
@kirbyedy I just tried that and it disappeared again.
You should see it in my pen now.
Tyler Moeller
@TylerMoeller
Dec 08 2016 17:25
@jgresalfi Much easier with jQuery :) with xhtml, you need to add the script http://stackoverflow.com/a/22780569
kirbyedy
@kirbyedy
Dec 08 2016 17:26
@McRobbah close the previous attibute with ;
Rob McDonald
@McRobbah
Dec 08 2016 17:29
@kirbyedy Thank you so much!
Doh! My head hurts from banging it so much and it was all over such a minor detail. I need to get better at remembering to close things.
CamperBot
@camperbot
Dec 08 2016 17:29
:star2: 1638 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
mcrobbah sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
AJ
@ClaudeDebussy
Dec 08 2016 17:40

https://jsfiddle.net/ClaudeDebussy/bhsmmob4/8/

Hi, I posted this yesterday but still haven’t been able to figure it out... In this responsive webpage, how can I make it so the three gray div boxes have some space between them AND do not spill over to the next line?

If I use the margin CSS property on my .box class, it makes the third div spill over to the next line.

Thanks in advance!

Sorin Ruse
@sorinr
Dec 08 2016 17:43
@ClaudeDebussy ithink you just don't interpret the bootstrap grid the right way
AJ
@ClaudeDebussy
Dec 08 2016 17:43
@sorinr I am not using Bootstrap
Jason Gresalfi
@jgresalfi
Dec 08 2016 17:46
@TylerMoeller Yeah, that’s JSONP and that’s a no-no from a best practices standpoint. You’re leveraging the fact that scripts that load content from a remote source aren’t affected by same-origin rules. I’m also pretty sure the dummy API FCC set up for the Twitch project won’t allow that
jQuery is like the Corleone family. Just when you think you’re out…they pull you back in!
Tyler Moeller
@TylerMoeller
Dec 08 2016 17:47
@jgresalfi Sure, you need to trust the endpoint due to security risks. Only other way around it with a non-CORS-enabled API is to build your own CORS proxy as far as I know
AJ
@ClaudeDebussy
Dec 08 2016 17:48
@sorinr But I think you're right that it has to do with the divisions. With the added margin it must be going over '100%'
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 17:48
@ClaudeDebussy if you are still online help me understand what you want to do ?? just separate the 3 divs ??
Jason Gresalfi
@jgresalfi
Dec 08 2016 17:48
@TylerMoeller Yep, I think you’re right. Why didn’t the FCC folks allow for CORS i wonder
AJ
@ClaudeDebussy
Dec 08 2016 17:48
@Mr-Kumar-Abhishek I want 10px of space between the three divs, WITHOUT having the third one spill over to the next line
Jason Gresalfi
@jgresalfi
Dec 08 2016 17:49
@TylerMoeller I think it’s just a matter of setting the response header on the server side, but I’m not totally sure
Tyler Moeller
@TylerMoeller
Dec 08 2016 17:49
I haven't gotten into the back-end coding yet, they may cover it there, but it would be a lot to consume for first-time front-end projects I imagine. @jgresalfi
Jason Gresalfi
@jgresalfi
Dec 08 2016 17:49
@TylerMoeller Indeed
AJ
@ClaudeDebussy
Dec 08 2016 17:49
@Mr-Kumar-Abhishek If i add margin: 10px; to the .box class, it spills over to the next line
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 17:50
@ClaudeDebussy you need a new class probably , let me fiddle around ~
AJ
@ClaudeDebussy
Dec 08 2016 17:50
@Mr-Kumar-Abhishek Thank you!!
CamperBot
@camperbot
Dec 08 2016 17:50
claudedebussy sends brownie points to @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:cookie: 427 | @mr-kumar-abhishek |http://www.freecodecamp.com/mr-kumar-abhishek
Sorin Ruse
@sorinr
Dec 08 2016 17:50
@ClaudeDebussy when you go over the bs grid full width of 100% the element that exceed it will float: left thatmean on the next row
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 17:51
@ClaudeDebussy is this what you want ?/ https://jsfiddle.net/bhsmmob4/11/
AJ
@ClaudeDebussy
Dec 08 2016 17:52
@sorinr thanks, that makes sense! Is there a simple way (without recalculating the screen divisions or adding 2 <divs> between the elements) to make it so it doesn't exceed 100%?
CamperBot
@camperbot
Dec 08 2016 17:52
claudedebussy sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 916 | @sorinr |http://www.freecodecamp.com/sorinr
AJ
@ClaudeDebussy
Dec 08 2016 17:53
@Mr-Kumar-Abhishek Yes, I want the space between them vertically, but also between them horizontally when they are all on the same line (above 992px screen resolution)
desktop.png
@Mr-Kumar-Abhishek like the above image
Tyler Moeller
@TylerMoeller
Dec 08 2016 17:55
@ClaudeDebussy Easiest way is to house the contents inside another div within each column. http://stackoverflow.com/questions/19010845/how-do-i-add-a-margin-between-bootstrap-columns-without-wrapping
I have an example here, look at the css classes .event and .content to get a better idea. http://codepen.io/TylerMoeller/pen/zoRRXm?editors=1100
AJ
@ClaudeDebussy
Dec 08 2016 17:55
@TylerMoeller Thanks, I will have a look
CamperBot
@camperbot
Dec 08 2016 17:55
claudedebussy sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1111 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 17:55
@ClaudeDebussy i see... that is pretty easy using media-queries , hold on I will show you
Tyler Moeller
@TylerMoeller
Dec 08 2016 17:56
.event is the class applied to each column, .content is for the contents inside each column
KedeXx
@KedeXx
Dec 08 2016 17:58
is there anyone that would help me with frontend on my idea for website
Tyler Moeller
@TylerMoeller
Dec 08 2016 18:04
@KedeXx There are people willing to pair up at https://gitter.im/FreeCodeCamp/LetsPair
If you have a technical question though, happy to help here
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 18:05
@ClaudeDebussy https://jsfiddle.net/bhsmmob4/14/ this is strange there is there is no inheritance here
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 18:12
@KedeXx here is an idea / inspiration for you http://onioneyethemes.com/tao/
AJ
@ClaudeDebussy
Dec 08 2016 18:15
@Mr-Kumar-Abhishek Thanks for having a look... I still can't figure it out. I am going to try redoing it with Tyler's idea of putting each one in a div and then padding it
CamperBot
@camperbot
Dec 08 2016 18:15
claudedebussy sends brownie points to @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:warning: claudedebussy already gave mr-kumar-abhishek points
Sorin Ruse
@sorinr
Dec 08 2016 18:19
@ClaudeDebussy you have to understand more the bs grid system. you can have 4 <div class="col-xs-3 col-md-6 col-lg-12"> nested in a <div class="row"> and you will see that on mobiles(xs) you will see 3 columns align in a row and when you enlarge the screen you will pass to 2 half screen columns and one column floated left(below on another row) and when on desktop you will have one column per row
AJ
@ClaudeDebussy
Dec 08 2016 18:20
@sorinr I want when lg: 3 in a row, when md: 2 in a row and 3rd taking up whole width, and with sm: 1 per row
tablet.png
mobile.png
Sorin Ruse
@sorinr
Dec 08 2016 18:24
@ClaudeDebussy so you need something like: col-lg-3 col-md-6 col-xs-12
@ClaudeDebussy what do you understand by lg, md, sm or xs?
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 18:25
could someone tell me if there is any free CDN service to host my assets ??
AJ
@ClaudeDebussy
Dec 08 2016 18:25
@sorinr If I do col-lg-3, it won’t be centered will it? Because it adds to 9 not 12?
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 18:26
I hate hotlinking it with github repo
Sorin Ruse
@sorinr
Dec 08 2016 18:26
@ClaudeDebussy if you have 4 columns with class="col-lg-3" will split in 3 columns on wider screens
@ClaudeDebussy if you have only 3 columns with class="col-lg-3" you will have them in a row with free 1 col space on right
AJ
@ClaudeDebussy
Dec 08 2016 18:30

'''

<div> <!-- This will contain the three boxes -->
<div class="col-lg-4 col-md-6 col-sm-12 box"><div class="boxpad"><div class="toprightbox chicken">Chicken</div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis</p>
</div></div>

        <div class="col-lg-4 col-md-6 col-sm-12 box"><div class="boxpad"><div class="toprightbox beef">Beef</div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis</p></div></div>

        <div class="col-lg-4 col-md-12 col-sm-12 box"><div class="boxpad"><div class="toprightbox sushi">Sushi</div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis</p></div></div>

    </div> 

'''

test

CamperBot
@camperbot
Dec 08 2016 18:30
:bulb: to format code use backticks! ``` more info
AJ
@ClaudeDebussy
Dec 08 2016 18:30
<div>  <!-- This will contain the three boxes -->
            <div class="col-lg-4 col-md-6 col-sm-12 box"><div class="boxpad"><div class="toprightbox chicken">Chicken</div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis</p>
            </div></div>

            <div class="col-lg-4 col-md-6 col-sm-12 box"><div class="boxpad"><div class="toprightbox beef">Beef</div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis</p></div></div>

            <div class="col-lg-4 col-md-12 col-sm-12 box"><div class="boxpad"><div class="toprightbox sushi">Sushi</div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis</p></div></div>

        </div>
Sorin Ruse
@sorinr
Dec 08 2016 18:30
@ClaudeDebussy in that case u can use col-lg-offset-xx
AJ
@ClaudeDebussy
Dec 08 2016 18:31
@sorinr I made my own stylesheet, not bootsrap. Will col-lh-offset-xx do anything?
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 18:31
@ClaudeDebussy so you were using bootstrap ??
AJ
@ClaudeDebussy
Dec 08 2016 18:32
no
I divided up the percentages and all myself, not bootstrap
/********** Large devices only **********/
@media (min-width: 992px) {.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
  float: left;
    border: 2px solid black;
  }
  .col-lg-1 {
    width: 8.33%;
  }
  .col-lg-2 {
    width: 16.66%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.33%;
  }
  .col-lg-5 {
    width: 41.66%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.33%;
  }
  .col-lg-8 {
    width: 66.66%;
  }
  .col-lg-9 {
    width: 74.99%;
  }
  .col-lg-10 {
    width: 83.33%;
  }
  .col-lg-11 {
    width: 91.66%;
  }
  .col-lg-12 {
    width: 100%;
  }
}
Sorin Ruse
@sorinr
Dec 08 2016 18:32
@ClaudeDebussy u kidding me. u now say that you made the same classes as bootstrap but your own styling
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 18:33
@ClaudeDebussy your own grid system right ?? :)
AJ
@ClaudeDebussy
Dec 08 2016 18:33
@sorinr yes I named it similarly
but I am not using bootsrap, i said that above
and it's in my fiddle
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 18:34
@ClaudeDebussy your own grid system right ?? you need something to offset ... for every respective class...
AJ
@ClaudeDebussy
Dec 08 2016 18:34

@Mr-Kumar-Abhishek Yes! My own system. Here is the full CSS code:

```

Navid Dezashibi
@dezashibi
Dec 08 2016 18:34
Dear Coders, Hey there
AJ
@ClaudeDebussy
Dec 08 2016 18:34
html {
    font-family: Arial, Helvetica, sans-serif;
}

/********** Base styles **********/
* {
    box-sizing: border-box;
}

#container {
    /*width: 90%;*/
    margin: 0 auto;    
    max-width: 1200px;
}

h1 {
    margin-bottom: 20px;
    text-align: center;
    letter-spacing: 2px;
    word-spacing: 3px;
}

.box {
    /*border: 5px solid brown;*/
    background-color: lightgray;
    /*width: 90%;*/
    height: auto;
    margin-right: auto;
    margin-left: auto;
    font-family: Helvetica;
    /*color: black;*/
    padding: 30px;
    position: relative;
}

.boxpad {
    padding: 5px;
}

.toprightbox {
    position: absolute;
    top: 0;
    right: 0;
    border: 2px solid;
    padding: 5px 45px 5px 45px;
    text-align: center;
    border-color: black;
    letter-spacing: 2px;
    margin: -2px -2px 0px 0px;
}

.chicken {
    background-color: #ff9ba3;
}

.beef {
    background-color: #f44b59;
    color: white;
}

.sushi {
    background-color: #e8cf96;

}

/********** Large devices only **********/
@media (min-width: 992px) {.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
  float: left;
    border: 2px solid black;
  }
  .col-lg-1 {
    width: 8.33%;
  }
  .col-lg-2 {
    width: 16.66%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.33%;
  }
  .col-lg-5 {
    width: 41.66%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.33%;
  }
  .col-lg-8 {
    width: 66.66%;
  }
  .col-lg-9 {
    width: 74.99%;
  }
  .col-lg-10 {
    width: 83.33%;
  }
  .col-lg-11 {
    width: 91.66%;
  }
  .col-lg-12 {
    width: 100%;
  }
}

/********** Medium devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
    border: 2px solid black;
  }
  .col-md-1 {
    width: 8.33%;
  }
  .col-md-2 {
    width: 16.66%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33.33%;
  }
  .col-md-5 {
    width: 41.66%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-7 {
    width: 58.33%;
  }
  .col-md-8 {
    width: 66.66%;
  }
  .col-md-9 {
    width: 74.99%;
  }
  .col-md-10 {
    width: 83.33%;
  }
  .col-md-11 {
    width: 91.66%;
  }
  .col-md-12 {
    width: 100%;
  }
}

@media (max-width: 767px) {.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
    border: 2px solid black;
  }
  .col-sm-1 {
    width: 8.33%;
  }
  .col-sm-2 {
    width: 16.66%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-4 {
    width: 33.33%;
  }
  .col-sm-5 {
    width: 41.66%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-7 {
    width: 58.33%;
  }
  .col-sm-8 {
    width: 66.66%;
  }
  .col-sm-9 {
    width: 74.99%;
  }
  .col-sm-10 {
    width: 83.33%;
  }
  .col-sm-11 {
    width: 91.66%;
  }
  .col-sm-12 {
    width: 100%;
  }
}
Sorin Ruse
@sorinr
Dec 08 2016 18:35
@ClaudeDebussy maybe after i was looking at it
Navid Dezashibi
@dezashibi
Dec 08 2016 18:35
I have a problem with ajax getting an api json content
AJ
@ClaudeDebussy
Dec 08 2016 18:35
@sorinr ok
Navid Dezashibi
@dezashibi
Dec 08 2016 18:35
I want to get quotes from http://api.forismatic.com/api/1.0/
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 18:36
@ClaudeDebussy http://j4n.co/blog/Creating-your-own-css-grid-system <--- you might want to read this .... or some similar stuff before you continue
Navid Dezashibi
@dezashibi
Dec 08 2016 18:36
this is my code :
AJ
@ClaudeDebussy
Dec 08 2016 18:36
@Mr-Kumar-Abhishek thanks, that will be helpful
CamperBot
@camperbot
Dec 08 2016 18:36
claudedebussy sends brownie points to @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:warning: claudedebussy already gave mr-kumar-abhishek points
Navid Dezashibi
@dezashibi
Dec 08 2016 18:36
$("#showQuote").on("click",function(){
//$("#quote").html('This works');
var data = {
method: "getQuote",
key: null,
format: "json",
lang: "en"
};
$.getJSON({
dataType: "json",
type: "GET",
url: "http://api.forismatic.com/api/1.0/",
data: data,
success: function(data) {
alert(data);
}
});
});
this is the error :
jquery.min.js:4 Mixed Content: The page at 'https://codepen.io/dezashibi/pen/MbQqdj' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.forismatic.com/api/1.0/?method=getQuote&key=&format=json&lang=en'. This request has been blocked; the content must be served over HTTPS.
send @ jquery.min.js:4
ajax @ jquery.min.js:4
r.(anonymous function) @ jquery.min.js:4
getJSON @ jquery.min.js:4
(anonymous) @ pen.js:8
dispatch @ jquery.min.js:3
q.handle @ jquery.min.js:3
jquery.min.js:4 XMLHttpRequest cannot load http://api.forismatic.com/api/1.0/?method=getQuote&key=&format=json&lang=en. Failed to start loading.
Tyler Moeller
@TylerMoeller
Dec 08 2016 18:38
@ClaudeDebussy Worth noting - that example I gave was using bootstrap. Here is your example, but made with bootstrap. I'd avoid creating your grid system unless it's just for practice - at least use something that's well tested already across all browsers and screen sizes.
AJ
@ClaudeDebussy
Dec 08 2016 18:39
@TylerMoeller Yeah, I should've been more clear. This is for an assignment where we are not supposed to use any existing framework. I appreciate the help!
Uros Tadic
@urketadic
Dec 08 2016 18:40
Yo i am almost done with my project, i need someone to help me fix javascript functionality. -> http://codepen.io/urketadic/pen/zoaRgd?editors=1010
If you scroll down to //color the mistake right away in javascript, you will see this is the part thats making trouble.
I am trying to color numbers in red if they are not in right sequence. It is kinda working but the problem is if i do numbers then do backspace few times, the correct number wont be correct anymore, because agues the input count is messed up now. Can anyone restrict this and fix it?
Tyler Moeller
@TylerMoeller
Dec 08 2016 18:41
@dezashibi https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Code-Formatting :)
You're getting that error because your codepen is loaded over HTTPS (secure) and you're trying to access resources over HTTP (not secure). Load your codepen over HTTP instead.
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 18:42
@ClaudeDebussy also start using codepen instead ... jsfiddle has its limits most suited for js developments
Navid Dezashibi
@dezashibi
Dec 08 2016 18:42
@TylerMoeller :smile: Thank you for your help, I didn't know that really!!!
CamperBot
@camperbot
Dec 08 2016 18:43
dezashibi sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1112 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
AJ
@ClaudeDebussy
Dec 08 2016 18:43
@Mr-Kumar-Abhishek noted!
Need help !
My code isn't fetching the wuote
*q
its a random quote generator
Zachary
@Bazill03
Dec 08 2016 18:46
@urketadic Where's the submit button? Are you just doing color coding?
Aryan Agal
@grubdragon
Dec 08 2016 18:46
Mostly I need help with my JS
It isn't fetching the quote at all
or maybe not dislaying it
hard to tell
Abhisek Pattnaik
@abhisekp
Dec 08 2016 18:47
@Mr-Kumar-Abhishek JSBin ftw! :heartpulse:

could someone tell me if there is any free CDN service to host my assets ?? :point_up: December 8, 2016 11:55 PM

@Mr-Kumar-Abhishek upload to github and ..... http://rawgit.com :D

Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 18:50
@abhisekp thanks for the reminder I have forgotten jsbin ... it came when I was going into development haitus :)
CamperBot
@camperbot
Dec 08 2016 18:50
mr-kumar-abhishek sends brownie points to @abhisekp :sparkles: :thumbsup: :sparkles:
:star2: 3257 | @abhisekp |http://www.freecodecamp.com/abhisekp
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 18:51
@abhisekp yeah I hate hotlinking wht rawgit :/
@abhisekp yeah I hate hotlinking with rawgit :/ *
Abhisek Pattnaik
@abhisekp
Dec 08 2016 18:52
that's not hotlinking .... it's softlinking
it begs for getting linked
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 18:53
@abhisekp corrected * softlinking
@abhisekp :p
Abhisek Pattnaik
@abhisekp
Dec 08 2016 18:54
lol
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 18:54
@abhisekp still I would rather put it over a CDN
Sorin Ruse
@sorinr
Dec 08 2016 18:55
@ClaudeDebussy sorry. u where right . u said ur not using boostrap but seeing the same classes as bootstrap i thought you are using it for the grid part.
AJ
@ClaudeDebussy
Dec 08 2016 18:56
@sorinr Tyler was also confused so I wasn't as clear as I could've been! You guys have put me in the right direction, though
Sorin Ruse
@sorinr
Dec 08 2016 18:57
@ClaudeDebussy :+1:
Uros Tadic
@urketadic
Dec 08 2016 19:04
@Bazill03 Yes i removed submit and replaced it with Clear because thats how my friend wanted it
Zachary
@Bazill03
Dec 08 2016 19:04
@urketadic That's more intuitive anyway. I threw in what little pi I knew and only got red. Slammed on my numpad a bit and saw a couple greens.
Leigh Hobson
@leighhobson89
Dec 08 2016 19:07
hi all, i am trying to access an image stored in a shared folder on my one drive to put in a <img> tag on code pen. For some reason the image wont shoe despit the link being the correct one. does code pen have a problem with external images?
Sorin Ruse
@sorinr
Dec 08 2016 19:11
@leighhobson89 you cannot load on codepen imgs, files etc from your own pc. must upload them some other externaly part
Gudeta G
@gude432
Dec 08 2016 19:11
Leigh, codepen works with external images. Is your shared folder publicly accessible?
EmmyPlayz
@EmmyPlayz
Dec 08 2016 19:13

http://codepen.io/EmmyPlayz/pen/qqKpBz

can you tell me whats wrong with my scrolling function every time i click a button on the navbar it only scrolls to the bio section if you find it can you pm me so i can easily get tips

Joseph Padgett
@Jspadgett82
Dec 08 2016 19:13

Hey folks. Is there anyone that could help me out here? I’ve got this:

http://codepen.io/Jspadgett82/pen/XKdjOv

Content isn’t in yet, I’m just trying to figure out why my button pushes in jQuery aren’t applying the css styling of the relative positioning at the top on click.

Uros Tadic
@urketadic
Dec 08 2016 19:16
@Bazil03 What do you mean its more intuitive
its working if u set it in options
but if u press backspace the inputcount gets lost and its all messed up
Uros Tadic
@urketadic
Dec 08 2016 19:21
like for some reason its working if i press backspace once and then re-enter number
but if i press backspace few times, it messes up everything
right numbers are no longer correct
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 19:24
:/
softlinking with raw git doesn't work for css
Tim Pittman
@pittman021
Dec 08 2016 19:27
Hi All - I need help with Bootstrap + VanillaJS. How do I add <div> to a page dynamically, if the entire page is wrapped in bootrap <div class="container-fluid">. You cannot appendChild() to a non-parent node, correct?
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 19:28
oh well here comes another sub module ....
Tyler Moeller
@TylerMoeller
Dec 08 2016 19:30
@Jspadgett82 Everything seems to be working fine, maybe you fixed it since posting. Your section titles are getting hidden by the navbar, you can read here for solutions: twbs/bootstrap#1768
Joseph Padgett
@Jspadgett82
Dec 08 2016 19:32
@TylerMoeller I will check that out, thank you. The About Me button does not go up and get hidden, but clicking on the other two do. That’s what I was trying to get at. Can’t figure out why it does so.
CamperBot
@camperbot
Dec 08 2016 19:32
jspadgett82 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1113 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Dec 08 2016 19:35
@Jspadgett82 Ah, I see - that's because you aren't linking to #aboutme, you are linking to the top of the page # in your navbar for the About link.
Change the URL to: <a href="#About" id="aboutButton" class="link">About Me</a> and you'll notice the same problem
Joseph Padgett
@Jspadgett82
Dec 08 2016 19:39
@TylerMoeller Hah! Totally didn’t see that. I was switching between my previous usage of sections into trying differently, forgot I didn’t change it all. But now it works. On to the next issue. Thanks again!
CamperBot
@camperbot
Dec 08 2016 19:39
jspadgett82 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: jspadgett82 already gave tylermoeller points
Islam Ibakaev
@dagman
Dec 08 2016 19:44

i am building recipe app and my stack is react, redux, react-router, node, express, mongo, mongoose.
so i have authentication done with json web tokens.
created a User model using mongoose to save and store registered users in mongo database.
the user schema is very easy and looks like this

const UserSchema = new mongoose.Schema({
  email: {
    type: String,
    index: { unique: true }
  },
  password: String,
  name: String
});

when user log in he got redirected to /recipes where he can see all his recipes.
so the question about recipes data. As soon as every user has his individual recipes it means i need create a Recipes model using mongoose . and i have to models now: Users and Recipes.
So how can i link a user from Users model with his recipes from Recipes model?

Uros Tadic
@urketadic
Dec 08 2016 19:46
@Bazil03 Its fixed now
Uros Tadic
@urketadic
Dec 08 2016 20:03
why is numpad not working
when i have ((code >= 48 && code <= 57) || (code >= 96 && code <=105)) added
else if ((code >= 48 && code <= 57) || (code >= 96 && code <=105)) {
  var inputNumber = code - 48;
var numSpan;
AaronMatthewHarpt
@AaronMatthewHarpt
Dec 08 2016 20:07
Does anyone know how to get the twitter link for the Random Quote Machine project to tweet the quote when clicked? If this is the wrong place to ask this, let me know where else to ask. Thanks
Uros Tadic
@urketadic
Dec 08 2016 20:09
You can go to my codepen iv done it
its urketadic
urketadic Quote machine
AaronMatthewHarpt
@AaronMatthewHarpt
Dec 08 2016 20:12
Ok, thanks. What I am specifically wanting is the url path. Are you suggesting I copy it from your tweetIt() function?
Uros Tadic
@urketadic
Dec 08 2016 20:13
do you understand what is going on
in tweet it function
AaronMatthewHarpt
@AaronMatthewHarpt
Dec 08 2016 20:15
I understand that you are getting an element with the id of quote, and storing that in the variable phrase. I don't completely understand this, encodeURIComponent(phrase) + '&url=' + 'http://codepen.io/urketadic/pen/zBKppa';
ionut
@ionutinz
Dec 08 2016 20:18
hey guys
Marko Rajkovic
@marko88ks
Dec 08 2016 20:18
Anyone know a good site with pictures??
ionut
@ionutinz
Dec 08 2016 20:19
Do you have any idea how can I make the text "responsive" ? i have a big h1 but when the display is small, it gets out of the WELL...
Tyler Moeller
@TylerMoeller
Dec 08 2016 20:19
@marko88ks This has lots of links: https://github.com/neutraltone/awesome-stock-resources
Marko Rajkovic
@marko88ks
Dec 08 2016 20:20
@TylerMoeller thanks man
CamperBot
@camperbot
Dec 08 2016 20:20
marko88ks sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1114 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
PierreProgramer
@PierreProgramer
Dec 08 2016 20:21
hey can someane help me
Sorin Ruse
@sorinr
Dec 08 2016 20:22
@ionutinz you can use media queries to style your font-size for smaller screens
@ionutinz don't tel me u passionate of LOL
PierreProgramer
@PierreProgramer
Dec 08 2016 20:24
can someone help me with a javascript challenge
AaronMatthewHarpt
@AaronMatthewHarpt
Dec 08 2016 20:25
@urketadic I appear to have a solution. Thanks for your help.
CamperBot
@camperbot
Dec 08 2016 20:25
aaronmatthewharpt sends brownie points to @urketadic :sparkles: :thumbsup: :sparkles:
:cookie: 277 | @urketadic |http://www.freecodecamp.com/urketadic
ionut
@ionutinz
Dec 08 2016 20:25
@sorinr i am :smile:
Sorin Ruse
@sorinr
Dec 08 2016 20:26
@ionutinz i'l pm u
Gustaf
@plouchous
Dec 08 2016 20:40
How am I supposed to make a portfolio from scratch with the amount of knowledge I got?
next level challenge
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 20:41
@plouchous start stumble read search ask :)
@plouchous if you really have no clue , break your portfolio down in to tasks
@plouchous start by making a container , then a navbar with bootstrap , refer bootstrap docs
Adel
@AdelMahjoub
Dec 08 2016 20:45
@plouchous pen and paper,draw it then translate it
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 20:49
@AdelMahjoub thanks :)
CamperBot
@camperbot
Dec 08 2016 20:49
mr-kumar-abhishek sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 369 | @adelmahjoub |http://www.freecodecamp.com/adelmahjoub
Adel
@AdelMahjoub
Dec 08 2016 20:50
@Mr-Kumar-Abhishek thanks
CamperBot
@camperbot
Dec 08 2016 20:50
adelmahjoub sends brownie points to @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:cookie: 428 | @mr-kumar-abhishek |http://www.freecodecamp.com/mr-kumar-abhishek
Jason Gresalfi
@jgresalfi
Dec 08 2016 20:51
If anyone has been dealing with CORS-related issues on any of the FCC projects, I stumbled across this as a really nice solution that requires no code changes: https://github.com/Rob--W/cors-anywhere
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 20:51
@AdelMahjoub for what ? ._.
Tyler Moeller
@TylerMoeller
Dec 08 2016 20:52
@jgresalfi There's also https://crossorigin.me, but the same issue applies as using JSONP - MiTM attacks or script injection unless you trust the proxy.
Adel
@AdelMahjoub
Dec 08 2016 20:53
@Mr-Kumar-Abhishek I wonder why, you thanked me first
Tyler Moeller
@TylerMoeller
Dec 08 2016 20:53
The only way around that is to build your own CORS proxy with the code hosted on that site on your own server
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 20:53
@AdelMahjoub for giving the advice to draw on paper first ,,, :) it really opens your creativity
@TylerMoeller there are more free php servers than npm one I suppose ~
Jason Gresalfi
@jgresalfi
Dec 08 2016 20:55
@TylerMoeller Well, that will be a project for another day. I’m going to take my chances with the above solution, the dev seems pretty transparent and the documentation he provides seems pretty solid.
Adel
@AdelMahjoub
Dec 08 2016 20:55
you can use Wamp or Mamp and make a post ajax request to your local server then the local server make a get request then echo it
Tyler Moeller
@TylerMoeller
Dec 08 2016 20:56
Wikipedia and Twitch are also transparent and accountable API Endpoints for JSONP
Chris
@bestintown23
Dec 08 2016 21:03
var myStr= "I am a \"double quoted\"string inside \"double quotes\"."; what is wrong with my work in this challenge?
_
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 21:09
i am doing the most brainless task right now and it is breaking my shoulders
case entry for each weather type ~
total 49
Sorin Ruse
@sorinr
Dec 08 2016 21:12
@ionutinz i would add some space around the signature champions. u can use padding or margin. witch ever is best for u
Lewis
@LewisLA
Dec 08 2016 21:16
Is it better practice to break up large chunks of text with multiple paragraph (<p>) tags or with multiple line breaks? or something else??
Sachin Tyagi
@ideasachin
Dec 08 2016 21:27
anyone who can help on this excercise: Build a Personal Portfolio Webpage
Adel
@AdelMahjoub
Dec 08 2016 21:28
@ideasachin what kind of help
ionut
@ionutinz
Dec 08 2016 21:30
Sachin Tyagi
@ideasachin
Dec 08 2016 21:39
@AdelMahjoub background-images is not working in my design.
until I am not giving position absolute and width and height.
alpox
@alpox
Dec 08 2016 21:39
@ideasachin background-image
Sachin Tyagi
@ideasachin
Dec 08 2016 21:39
I know.
Adel
@AdelMahjoub
Dec 08 2016 21:39
@ideasachin post a link
alpox
@alpox
Dec 08 2016 21:40
we may be able to help better when you provide a codepen link @ideasachin
@ideasachin What often is the case, is that there is not enough content in the page to make the body take full width/height and so the body collapses. What i often put in my css is:
html, body {
    height: 100%;
    min-height: 100%;
}
That sometimes help
Sam Griffen
@ssgriffen
Dec 08 2016 21:41
Anyone have any thoughts on how to handle the multiplying twitter button? Once you click new quote http://codepen.io/ssgriffen/pen/NRQbap?editors=1010
alpox
@alpox
Dec 08 2016 21:42
@ideasachin Seems the css i posted should help out
Adel
@AdelMahjoub
Dec 08 2016 21:43
@ideasachin the navbar fixed is hiding the next content, and the section with the background is not high enough to show the background
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 21:44
I need some major help here with weather app if any one know git then please help
alpox
@alpox
Dec 08 2016 21:44
@ssgriffen You can remove the old tweet button before you create a new one.
Usually, you would create a button directly in the html and only refresh the src attribute on it. Then, though, you use specific urls for twitter and not the automatic twitter button creator
@Mr-Kumar-Abhishek I do, but not much time here :-)
Sachin Tyagi
@ideasachin
Dec 08 2016 21:45
@AdelMahjoub If I am adding multiple section with background images, they overlap eachother and last image is displaying.
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 21:46
@alpox the problem is small if you know git from command line :)
@alpox do you know git from command line ? :curious:
alpox
@alpox
Dec 08 2016 21:47
@ideasachin They do not really overlap. One is just hidden behind the navbar as @AdelMahjoub already states.
You can set height: 100% on both sections to see
@Mr-Kumar-Abhishek sure
Sam Griffen
@ssgriffen
Dec 08 2016 21:47
@alpox When I try removing it the next one doesnt show? Am I not removing it correctly? See the line I put in in the click event http://codepen.io/ssgriffen/pen/NRQbap?editors=1010
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 21:49
@alpox git clone --recursive https://github.com/Mr-Kumar-Abhishek/weather.git if you have time then clone this and checkout to test branch
alpox
@alpox
Dec 08 2016 21:50
@ssgriffen Thats because you don't remove the first-child as you probably think you do. You remove the container.
@ssgriffen Try: $("#tweet-container > *").remove();
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 21:51
@alpox size is around 200 mb or soo
Sam Griffen
@ssgriffen
Dec 08 2016 21:51
@alpox thanks
CamperBot
@camperbot
Dec 08 2016 21:51
ssgriffen sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 681 | @alpox |http://www.freecodecamp.com/alpox
Sam Griffen
@ssgriffen
Dec 08 2016 21:52
@alpox why doesn't this work thought? $("#tweet-container").remove();
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 08 2016 21:52
@alpox git branch -a