These are chat archives for FreeCodeCamp/HelpFrontEnd

14th
Nov 2016
Andrei Luca
@AndreiLuca99
Nov 14 2016 00:28
hello.
I wanna use github source code on codepen
how can I do?
Andrei Luca
@AndreiLuca99
Nov 14 2016 00:33
@official-shawnkemp Hey, bro.
How can I use github source files on CodePen?
can you tell me how to ?
makleriux
@makleriux
Nov 14 2016 00:34
Hi Lads, i have problems with JS project, have to build wikipedia random machine but API is blockig me. Cross-Origin Request Blocked:...... Anyone can help me?

@AndreiLuca99 you can add font direcly in HTML window

<link href="https://fonts.googleapis.com/css?family=Oswald|Shrikhand" rel="stylesheet">

Andrei Luca
@AndreiLuca99
Nov 14 2016 00:37
oh, thanks @makleriux
CamperBot
@camperbot
Nov 14 2016 00:37
andreiluca99 sends brownie points to @makleriux :sparkles: :thumbsup: :sparkles:
:cookie: 265 | @makleriux |http://www.freecodecamp.com/makleriux
Andrei Luca
@AndreiLuca99
Nov 14 2016 00:40
@camperbot. Then how can i use github source code on CodePen?
Michael Karpinski
@karpimpski
Nov 14 2016 01:05
hey, I set up this simple script to add an event listener when iterating through an array, but only the last element's listener works.
function roll(diceQuantity){
    document.querySelector('#dice_area').innerHTML = "";
    var rolledDice = [];
    for(var i = 0; i < diceQuantity; i++){
        document.querySelector('#dice_area').innerHTML += "<div class='die'></div>";
        var num = Math.floor((Math.random() * 6) + 1);
        var currentDie = document.querySelectorAll('.die')[i];
        currentDie.innerHTML = num;
        rolledDice.push(currentDie);
    }

    for(var j = 0; j < rolledDice.length; j++){
        rolledDice[j].addEventListener('click', function(){
            alert(this.innerHTML);
        });
    }
}

document.querySelector('#roll').addEventListener('click', function(){
    roll(6);
});
I simplified it a bit:
function roll(diceQuantity){
    document.querySelector('#dice_area').innerHTML = "";
    var rolledDice = [];
    for(var i = 0; i < diceQuantity; i++){
        var num = Math.floor((Math.random() * 6) + 1);
        document.querySelector('#dice_area').innerHTML += "<div class='die'>"+num+"</div>";
        rolledDice.push(document.querySelectorAll('.die')[i]);
    }

    for(var j = 0; j < rolledDice.length; j++){
        rolledDice[j].addEventListener('click', function(){
            alert(this.innerHTML);
        });
    }
}

document.querySelector('#roll').addEventListener('click', function(){
    roll(2);
});
Patrick
@SweetmanTech
Nov 14 2016 01:17

Trying to make 3 lists in a single row
'''

<div class="row">
<div class="row">
<div>
<ul class="list-group row col-xs-4">
<li class="list-group-item">Row1</li>
<li class="list-group-item">Row2</li>
<li class="list-group-item">Row3</li>
<li class="list-group-item">Row4</li>
<li class="list-group-item">Row5</li>
</ul>

<ul class="list-group row col-xs-4">
 <li class="list-group-item">Row1</li>
 <li class="list-group-item">Row2</li>
 <li class="list-group-item">Row3</li>
 <li class="list-group-item">Row4</li>
 <li class="list-group-item">Row5</li>

</ul>

<ul class="list-group row col-xs-4">
 <li class="list-group-item">Row1</li>
 <li class="list-group-item">Row2</li>
 <li class="list-group-item">Row3</li>
 <li class="list-group-item">Row4</li>
 <li class="list-group-item">Row5</li>

</ul>
</div>
'''

CamperBot
@camperbot
Nov 14 2016 01:17
:bulb: to format code use backticks! ``` more info
Tom
@moT01
Nov 14 2016 01:18
@SweetmanTech what is it you want
3 columns
Patrick
@SweetmanTech
Nov 14 2016 01:18
currently I have 3 lists, but they are left justified
I would like them to be centered
Tom
@moT01
Nov 14 2016 01:19
i center things ofter with margin-left: auto and margin-right: auto
Patrick
@SweetmanTech
Nov 14 2016 01:21
@moT01
<div class="row" style="margin-left:auto margin-right:auto"> did not work
Tom
@moT01
Nov 14 2016 01:22
i dont do inline styling, try it in your css
.row { margin-left: auto; margin-right: auto; }
any luck?
Patrick
@SweetmanTech
Nov 14 2016 01:25
yup! Thank you :)
Tom
@moT01
Nov 14 2016 01:26
and if you add max-width: 100%; it will keep things from going out of their containers when the window shrinks
might not need it with those bootstrap classes
Manish Giri
@Manish-Giri
Nov 14 2016 02:08

need some help with positioning my footer for the calculator project. I have a button at the bottom of the page

<div id="instructions">
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal">
      Launch Instructions
    </button>

but the positioning is set to fixed

#instructions {
  position: fixed;
  left: 44%;
  bottom: 0px;
  z-index: 1049;
  font-family: 'Courgette', cursive;
}

#instructions button {

  text-transform: uppercase;
  opacity: 0.6;
}

and the problem arises when you shrink down the browser, because of the positioning, the button appears to come up above the calculator itself. How can I fix this so that the button remains at the bottom always

Tom
@moT01
Nov 14 2016 02:12
@Manish-Giri not sure, id have to play around with it
try absolute position maybe
im doing the calculator as well
Walid Ashri
@walidashri
Nov 14 2016 02:16
@Manish-Giri try @ madia css styling
Manish Giri
@Manish-Giri
Nov 14 2016 02:17
@walidashri you mean media queries?
Walid Ashri
@walidashri
Nov 14 2016 02:20
@Manish-Giri yes if u need a special style at small screen size and u can't adjust the large screen css to be responsive I use somthing like
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Manish Giri
@Manish-Giri
Nov 14 2016 02:22

@walidashri I can create the rule w/ media query -

@media screen and (max-height: 300px) {

}

just not sure how to make the footer stay "under" the calculator, maybe I need to change z-index.

Walid Ashri
@walidashri
Nov 14 2016 02:32
@Manish-Giri are using bootstrap?
Jax
@jax11000
Nov 14 2016 03:31
can someone give me a hand with this random quote generator thing?
Tom
@moT01
Nov 14 2016 03:42
@jax11000 whats up
Jax
@jax11000
Nov 14 2016 03:57
http://codepen.io/Jax11000/pen/MbyGrv @moT01 confused as to why my button isnt generating a quote
Tom
@moT01
Nov 14 2016 04:01
gotta do some troubleshooting, ..i put a console.log(data) in your function, got nothing back, ...so your function isnt getting called, or your .getjson isnt getting the data
Jax
@jax11000
Nov 14 2016 04:02
@moT01 i appreciate the help, thought i did everything right but i guess not
Tom
@moT01
Nov 14 2016 04:04
might be something with jsonp
Jax
@jax11000
Nov 14 2016 04:05
what might i do to fix it?
Tom
@moT01
Nov 14 2016 04:07
well if you go to ur url, ...it brings up an object or something with a ? in front
if you change the jsonp in the url to json you get an object
that might be part of the problem, but i dont think its all of it
might not be a problem at all im not sure
Jax
@jax11000
Nov 14 2016 04:09
well i changed it but it still didnt pop up any quotes
Tom
@moT01
Nov 14 2016 04:11
i think its where you declare you variables, ...might be, ...all the variables are in blue
where you call getquote in the .getjson its yellow
i dont think its finding it, ...try putting it all the document.ready
yea still not working but that probly is a problem
Jax
@jax11000
Nov 14 2016 04:15
i wonder what it is, i dont see how i created the variables wrong.
MysticalMrCool
@MysticalMrCool
Nov 14 2016 04:21

hey guys I'm working on the second project where you have to make a portfolio webpage and I'm stuck with fluid formatting. So far the page is looking how I want it when you view it in Full Page mode https://codepen.io/MysticalMrCool/full/LbNXqe/
but not when you view it Editor View mode https://codepen.io/MysticalMrCool/pen/LbNXqe/

how do i make my name at the top fluid

Tom
@moT01
Nov 14 2016 04:24
what do you mean by fluid
looks the same on both pages for me
@jax11000 yea you need to work on your .getjson call, ...another way to do it is .ajax
i would comment everything out and just make that connection
make sure it works, then go back and fill it in
MysticalMrCool
@MysticalMrCool
Nov 14 2016 04:30
if you click on the first link you can see that the name is to the right on the image, but when the screen has a smaller width the name overlaps the photo
Tom
@moT01
Nov 14 2016 04:36
i dont know much bootstrap, ...do you want your name to stay where it is
i bet messing with the display might do it
display: inline block maybe
Bcrea
@Bcrea
Nov 14 2016 05:25
couldn't get the twitter button to tweet the current Quote but kinda finished the Random Quote Machine challenge :smile: any thoughts advice?? http://codepen.io/Bcrea/full/dpBKoE/
Ghost
@ghost~580ed9c0d73408ce4f309ef0
Nov 14 2016 05:43
Check out this
dsillydude
@dsillydude
Nov 14 2016 05:54
@MysticalMrCool you can use margin tricks to put it on the top
Merryl
@MerrylArok
Nov 14 2016 06:02
Can someone help me figure out where im screwing up?
function palindrome(str) {
  // Good luck!
  var cleanStr=str.replace(/[^\da-zA-Z]+/g, "").toLowerCase();  
  var reverseStr= function(cleanStr){    
    for(var i=cleanStr.length-1,rev=""; i>=0;i--){
    rev+=cleanStr.charAt(i);}  
  return rev;};

  if(cleanStr===reverseStr){return true;}else{return false;}
}

palindrome("eye");
Abhishek Kumar
@Mr-Kumar-Abhishek
Nov 14 2016 06:06
is it necessary to use codepen for frontend projects ??
codepen runs very slow on my home pc and can't use the other pc at work
Sorin Ruse
@sorinr
Nov 14 2016 06:08
@Mr-Kumar-Abhishek you can work locally and when you are ready copy the code to codepen
Abhishek Kumar
@Mr-Kumar-Abhishek
Nov 14 2016 06:09
@sorinr could just host it in github pages ??
@sorinr and add the link to FCC ??
c0d0er
@c0d0er
Nov 14 2016 06:10
@nankeuriseu thanks
CamperBot
@camperbot
Nov 14 2016 06:10
c0d0er sends brownie points to @nankeuriseu :sparkles: :thumbsup: :sparkles:
:cookie: 379 | @nankeuriseu |http://www.freecodecamp.com/nankeuriseu
Christopher Campbell
@nankeuriseu
Nov 14 2016 06:11
@Mr-Kumar-Abhishek You can always build on your machine, and then upload the finished product to CodePen.
Oh!
Haha
Thanks, @sorinr. You beat me to it. :)
CamperBot
@camperbot
Nov 14 2016 06:12
nankeuriseu sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 851 | @sorinr |http://www.freecodecamp.com/sorinr
Christopher Campbell
@nankeuriseu
Nov 14 2016 06:12
@Mr-Kumar-Abhishek Right now, you have to submit CodePen links. This is supposed to change in the future.
When? We don’t know yet. :)
Abhishek Kumar
@Mr-Kumar-Abhishek
Nov 14 2016 06:15
@nankeuriseu but it is really difficult to upload in codepen from here (trust me) I will add it in this somewhere http://mr-kumar-abhishek.github.io/
Sorin Ruse
@sorinr
Nov 14 2016 06:15
@Mr-Kumar-Abhishek i think there is no restriction in that. the FCC asks you for the link so why not linking the functional app from github but wait also for some other answers. I've developed locally on my machine then just uploaded the code to codepen and link to FCC the codepen.
Christopher Campbell
@nankeuriseu
Nov 14 2016 06:17
@Mr-Kumar-Abhishek Have you tried a different browser? Or, is it the website that runs slow?
Also, you might check to see if you are using any extensions that might be conflicting with CodePen.
Abhishek Kumar
@Mr-Kumar-Abhishek
Nov 14 2016 06:18
@Mr-Kumar-Abhishek no the website runs slow, the only solution if not github pages is that I will have to make a specialized browser for this machine and codepen with QT library and c++
@nankeuriseu no the website runs slow, the only solution if not github pages is that I will have to make a specialized browser for this machine and codepen with QT library and c++
Christopher Campbell
@nankeuriseu
Nov 14 2016 06:19
When you say the website runs slow, do you mean it downloads slowly or the JavaScript runs slowly?
What OS? (Linux?) What browser?
Sorin Ruse
@sorinr
Nov 14 2016 06:21
@Mr-Kumar-Abhishek i don't get what the problem is to develop locally and then copy paste the code to codepen
Abhishek Kumar
@Mr-Kumar-Abhishek
Nov 14 2016 06:21
@nankeuriseu well the main problem is low processing power so heavy weight sites such as codepen don't run good with firefox (as firefox is itself heavy )
Christopher Campbell
@nankeuriseu
Nov 14 2016 06:22
What version of FireFox?
Abhishek Kumar
@Mr-Kumar-Abhishek
Nov 14 2016 06:22
@nankeuriseu there are other light weight browsers but they are not with updated web browser engines such as webkit or gecko
Sorin Ruse
@sorinr
Nov 14 2016 06:23
@Mr-Kumar-Abhishek why not try the latest of opera
Christopher Campbell
@nankeuriseu
Nov 14 2016 06:23
I don’t know what OS you’re using, so I can’t make a suggestion.
Sorin Ruse
@sorinr
Nov 14 2016 06:23
@Mr-Kumar-Abhishek its quite nice and fast at least for me
Abhishek Kumar
@Mr-Kumar-Abhishek
Nov 14 2016 06:23
@nankeuriseu currently I am using firefox esr 45
@sorinr okay I will search if they have built it for arm architecture :)
Christopher Campbell
@nankeuriseu
Nov 14 2016 06:24
You mention QT, so I suspect you’re talking about Linux. Opera and Chrome are available for Linux.
Ah, ARM.
Are you working on a tablet by chance?
Android?
Abhishek Kumar
@Mr-Kumar-Abhishek
Nov 14 2016 06:25
built the machine myself :x it is a linux box
debian
buying the machine costed too much ~
Christopher Campbell
@nankeuriseu
Nov 14 2016 06:27
Are you comfortable with the command line?
Abhishek Kumar
@Mr-Kumar-Abhishek
Nov 14 2016 06:27
of course lol
Christopher Campbell
@nankeuriseu
Nov 14 2016 06:28
There is a version of Chromium for Debian. You could try that.
It seems Debian drops ARM support for Chromium in the packages, so you’d have to build it. :(
Abhishek Kumar
@Mr-Kumar-Abhishek
Nov 14 2016 06:31
@nankeuriseu hmm.... can't I just use github pages , far easier ... even if i build chromium there is guarantee it will be fast on this slow pc , will it be fast ??
Christopher Campbell
@nankeuriseu
Nov 14 2016 06:32
Maybe? When you complete the projects, one of the things you’re supposed to submit is a codepen link.
So, I don’t know.
When the new curriculum is put into place, all apps will be developed on FreeCodeCamp without the need for CodePen.
But, as mentioned, there is still no precise date on when it’ll be finished.
Could you put the end project on a USB drive and upload it from another computer? Maybe at the library or an Internet cafe? Friends computer?
I know that’s not ideal. :) I’m just trying to help you with solutions.
Abhishek Kumar
@Mr-Kumar-Abhishek
Nov 14 2016 06:35
@nankeuriseu I will use the library but it will be difficult get help if I get stuck in projects midway
Christopher Campbell
@nankeuriseu
Nov 14 2016 06:35
You could go to the main FreeCodeCamp channel and post a message to the mods or Quincy. Or you might be able to ask via GitHub.
You could use GitHub Pages along the way. Post it there to get help.
Many of us know how to view source on web pages. :)
Alternatively, you could try something like JS Fiddle for building it and sharing for help.
Abhishek Kumar
@Mr-Kumar-Abhishek
Nov 14 2016 06:38
@nankeuriseu okay , thanks I will do that thanks a lot ! :D @sorinr
CamperBot
@camperbot
Nov 14 2016 06:38
mr-kumar-abhishek sends brownie points to @nankeuriseu and @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 852 | @sorinr |http://www.freecodecamp.com/sorinr
:cookie: 380 | @nankeuriseu |http://www.freecodecamp.com/nankeuriseu
Jax
@jax11000
Nov 14 2016 06:38
can someone tell me why my button isnt changing my divs color? http://codepen.io/Jax11000/pen/MbyGrv
Christopher Campbell
@nankeuriseu
Nov 14 2016 06:39
@Mr-Kumar-Abhishek Welcome. Too bad I couldn’t be more help.
@jax11000 You need to add Bootstrap.
Click settings at the top. Click CSS. Then under “Quick-add” select Bootstrap.
@jax11000 Get it?
Jax
@jax11000
Nov 14 2016 06:42
@nankeuriseu thanks
CamperBot
@camperbot
Nov 14 2016 06:42
jax11000 sends brownie points to @nankeuriseu :sparkles: :thumbsup: :sparkles:
:cookie: 381 | @nankeuriseu |http://www.freecodecamp.com/nankeuriseu
Christopher Campbell
@nankeuriseu
Nov 14 2016 06:42
Easy to overlook that. I’ve done that plenty of times. :)
Jax
@jax11000
Nov 14 2016 06:43
@nankeuriseu actually its still not changing color :p but yeah i went through like an hour process of rewriting my JS just because i forgot the jQuery
Christopher Campbell
@nankeuriseu
Nov 14 2016 06:44
It’s working for me. Try to refresh.
Jax
@jax11000
Nov 14 2016 06:45
maybe doesnt work with chrome? its supposed to change the color of the text field where the quote is on click
Sorin Ruse
@sorinr
Nov 14 2016 06:51
@jax11000 this is what you want to achive?quotes
Jax
@jax11000
Nov 14 2016 06:52
@sorinr exactly that
@jax11000 thank you
CamperBot
@camperbot
Nov 14 2016 06:52
sorry jax11000, you can't send brownie points to yourself! :sparkles: :sparkles:
Jax
@jax11000
Nov 14 2016 06:52
@sorinr oops lol thank you
CamperBot
@camperbot
Nov 14 2016 06:52
jax11000 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 853 | @sorinr |http://www.freecodecamp.com/sorinr
Christopher Campbell
@nankeuriseu
Nov 14 2016 06:52
Haha
Sorin Ruse
@sorinr
Nov 14 2016 06:54
@jax11000 just replace the 'black' color with some other color coz you will have black text on black background and you will not see the quote
Jax
@jax11000
Nov 14 2016 06:54
@sorinr youre a saint
Sorin Ruse
@sorinr
Nov 14 2016 06:57
@jax11000 i will also try to reorganize the js code a little coz its kinda spaghetti code right now :) I just made only some quick changes to make it work
Jax
@jax11000
Nov 14 2016 07:00
@sorinr yeah im not really comfortable with it at all right now. css and html i feel totally fine. but js is just giving me all kinds of hang ups. not sure why
sahilverma13
@sahilverma13
Nov 14 2016 07:11
Hey everyone!
Fairly new to front end dev
Can someone give me some useful tips for CSS
Or some sample websites from where I can get the CSS codes
Sorin Ruse
@sorinr
Nov 14 2016 07:13
Tessa
@TheTessaMurphy
Nov 14 2016 07:18
@sahilverma13 http://www.w3schools.com/css/default.asp Lots of good information here.
Alex
@Joshua-A-Smith
Nov 14 2016 07:35
Do i need jquery if Im good at javascript
Sorin Ruse
@sorinr
Nov 14 2016 07:50
@Joshua-A-Smith nope. jquery is in fact javascript
Levi
@MalangeLevi
Nov 14 2016 09:23
some one here has done cloud9? please...need help
Karen McCulloch
@kazzacarrot
Nov 14 2016 09:33
jquery will really speed up development though @Joshua-A-Smith
Vijith Nair
@wizelmagnifico
Nov 14 2016 09:44
how do i get these to align side by side?
Eric Boateng Kwarteng
@eric1loaf
Nov 14 2016 09:45
@wizelmagnifico details
Vijith Nair
@wizelmagnifico
Nov 14 2016 09:47
well i am building a portfolio
nd i have a div in which i want an img and some text side by side
bt instead the text is below the div
can u help me @eric1loaf ?
Eric Boateng Kwarteng
@eric1loaf
Nov 14 2016 10:03
@wizelmagnifico use the 'row' class before dividing them into columns
J Player
@Heyjp
Nov 14 2016 10:04
@wizelmagnifico if it's inside a div you could always try using float: left
Thayyeb salim
@Thayyebsalim
Nov 14 2016 10:07
guys I'm absolutely stuck in the portfolio making process
https://codepen.io/Thayyeb_Itachi/pen/rWxMxJ
Eric Boateng Kwarteng
@eric1loaf
Nov 14 2016 10:07
@wizelmagnifico example <div class='row'> and then divide them into columns using the .col-md-6 class. Remember, u can change the number to suit what u like
Sorin Ruse
@sorinr
Nov 14 2016 10:07
@wizelmagnifico ok. are u going to use bootstrap or just write your own css?
Eric Boateng Kwarteng
@eric1loaf
Nov 14 2016 10:13
@wizelmagnifico bootstrap
Vijith Nair
@wizelmagnifico
Nov 14 2016 10:14
oh yeh
i forgot <div class="row">
*yeah
Eric Boateng Kwarteng
@eric1loaf
Nov 14 2016 10:15
@wizelmagnifico
J Player
@Heyjp
Nov 14 2016 10:15
@Thayyebsalim what exactly are you stuck on? I'd suggest looking at the layout of the example and just copying the structure.
Eric Boateng Kwarteng
@eric1loaf
Nov 14 2016 10:15
@wizelmagnifico 😀
Vijith Nair
@wizelmagnifico
Nov 14 2016 10:15
thnx @eric1loaf and @sorinr
CamperBot
@camperbot
Nov 14 2016 10:15
wizelmagnifico sends brownie points to @eric1loaf and @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 142 | @eric1loaf |http://www.freecodecamp.com/eric1loaf
:cookie: 854 | @sorinr |http://www.freecodecamp.com/sorinr
Vijith Nair
@wizelmagnifico
Nov 14 2016 10:16
i have been dividing them into columns but forgot abt the rows
Eric Boateng Kwarteng
@eric1loaf
Nov 14 2016 10:16
@wizelmagnifico u are welcome. Let me have a feel of ur final work when it's done
Vijith Nair
@wizelmagnifico
Nov 14 2016 10:16
for sure
i'll private msg my code pen link
Eric Boateng Kwarteng
@eric1loaf
Nov 14 2016 10:17
@wizelmagnifico 👍
Sorin Ruse
@sorinr
Nov 14 2016 10:17
@wizelmagnifico you can also take a look at the flexbox as an alternative to the bootstrap grid.
Vijith Nair
@wizelmagnifico
Nov 14 2016 10:18
what is a flex box?
@sorinr
Eric Boateng Kwarteng
@eric1loaf
Nov 14 2016 10:19
@sorinr this is my first time of hearing it; flex box
Sorin Ruse
@sorinr
Nov 14 2016 10:20
@wizelmagnifico here some info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and some videos as well flexbox
Vijith Nair
@wizelmagnifico
Nov 14 2016 10:21
thnx @sorinr
CamperBot
@camperbot
Nov 14 2016 10:21
wizelmagnifico sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: wizelmagnifico already gave sorinr points
Abhishek Kumar
@Mr-Kumar-Abhishek
Nov 14 2016 10:31
@nankeuriseu started working on random quote machine :) a lot easier working offline https://mr-kumar-abhishek.github.io/random-quote-machine/ , repo https://github.com/Mr-Kumar-Abhishek/random-quote-machine
@nankeuriseu doing it codepen was really, really slow thanks again for the suggestions and help :p
CamperBot
@camperbot
Nov 14 2016 10:33
:cookie: 387 | @nankeuriseu |http://www.freecodecamp.com/nankeuriseu
mr-kumar-abhishek sends brownie points to @nankeuriseu :sparkles: :thumbsup: :sparkles:
Abhishek Kumar
@Mr-Kumar-Abhishek
Nov 14 2016 10:51
Now major things are to remove css gradients and give some transparency some transitions and ....let's see random background images :D
Tiago Fuelber
@TiagoFuelber
Nov 14 2016 12:29
People, I dont understand why my 'div' #about has a extra space in the right. https://codepen.io/tfuelber/pen/mArpZL
Artur Arsalanov
@kurumkan
Nov 14 2016 12:41
@TiagoFuelber Hello from div#about { I removed width
@TiagoFuelber also fluid-container class doesn't exist. change it to container-fluid. Also - in the end there is closing center tag - but without open tag.
Tiago Fuelber
@TiagoFuelber
Nov 14 2016 12:42
@kurumkan kkkk omg. thanks!
CamperBot
@camperbot
Nov 14 2016 12:43
tiagofuelber sends brownie points to @kurumkan :sparkles: :thumbsup: :sparkles:
:cookie: 378 | @kurumkan |http://www.freecodecamp.com/kurumkan
Artur Arsalanov
@kurumkan
Nov 14 2016 12:43
@TiagoFuelber NM. Also you could use jumbtron for about.
Tiago Fuelber
@TiagoFuelber
Nov 14 2016 12:46
@kurumkan what is jumbtron? I wll made a little research. Now the that problem is fixed but all content of my page has white borders in both sides.
Artur Arsalanov
@kurumkan
Nov 14 2016 12:52
@TiagoFuelber about padding left and right - the problem is - you must put row div inside container- fluid - and that row div should not be inside any other elements
@TiagoFuelber but just make section - inside row. and remove row from the section
Tiago Fuelber
@TiagoFuelber
Nov 14 2016 12:53
@kurumkan ok, I'll try here
@TiagoFuelber jumbotron - it's just standart way to create landings for bootstrap. http://www.w3schools.com/bootstrap/bootstrap_jumbotron_header.asp but you can do well without it =P
Levi
@MalangeLevi
Nov 14 2016 13:23
do u know how to create dist tag?
yaswanth
@yaswanth7201
Nov 14 2016 13:48
how to Convert Celsius to Fahrenheit
D O R C ¥
@Dorcy-ndg3
Nov 14 2016 14:02
@yaswanth7201 multiply and divide the values given in the instructions with the celcious variable
Lars Jönsson
@devpaps
Nov 14 2016 14:11
Hey guys! Anyone know how to get the background image tinted but not in the center as in this picture. I have tried with blend-modes and inset border. I think its easy, but i just cant figure it out. :D
yaswanth
@yaswanth7201
Nov 14 2016 14:17
got it
buiphuking
@buiphuking
Nov 14 2016 14:50
i have a doom question, if i know wordpress very well, do i need to learn css3, javascript ????????????????????????????????????????????????
kat-mag
@kat-mag
Nov 14 2016 15:23
@buiphuking do you want to just use ready stuff for wordpress? Or do something yourself?
April Kimble
@aprilk77
Nov 14 2016 15:31
I have a question on the build a personal portfolio webpage project
TatjanaBezsazna
@TatjanaBezsazna
Nov 14 2016 15:33

Hello everyone, I am trying to start my twitch TV project, however, I can't get any data from API at all. What do I do wrong?

$.getJSON("https://wind-bow.hyperdev.space/twitch-api/channels/freecodecamp?callback=?", function(data){
console.log(data);
})

kat-mag
@kat-mag
Nov 14 2016 15:33
@aprilk77 just ask your question
@TatjanaBezsazna did you add jquery?
@TatjanaBezsazna and that semicolon at the end? :D
TatjanaBezsazna
@TatjanaBezsazna
Nov 14 2016 15:35
Damn, you'r a genius
@kat-mag You are a genius, not me
:D
@kat-mag Thank you a lot :D
CamperBot
@camperbot
Nov 14 2016 15:36
:cookie: 415 | @kat-mag |http://www.freecodecamp.com/kat-mag
tatjanabezsazna sends brownie points to @kat-mag :sparkles: :thumbsup: :sparkles:
kat-mag
@kat-mag
Nov 14 2016 15:37
@TatjanaBezsazna no problem
LiYang
@jusheng
Nov 14 2016 15:51
坎坎坷坷
Clyde Lobo
@oppiniated
Nov 14 2016 16:07
@devpaps came up with something real quick. I guess it can be done better and with lesser tags http://jsbin.com/jepebevulo/edit?html,css,output
Jamie
@lgcbtc
Nov 14 2016 16:10
hey all, for the portfolio zipline, i am assuming that I need to look at a whole bunch of page sources to give me the skills to complete it.... is that how everyone else did this? I dont remember doing any nav bar challenges so far.....
MeliLondon
@MeliLondon
Nov 14 2016 16:15
Hello all!!! I've now reached the Build A Tribute Page project. I'm totally new to coding, but I wouldn't mind pairing with someone so we can support each other :-)
Martine Ross
@moi238
Nov 14 2016 16:17
@lgcbtc I'm still in the process of doing mine. For the navbar I just googled it and read a few different blogs and websites it took a bit of work but it's working now :smile:
Jamie
@lgcbtc
Nov 14 2016 16:18
@moi238 thanks Martine, yeah ok. I was thinking I had maybe missed something in the previous challenges... google it is :)
CamperBot
@camperbot
Nov 14 2016 16:18
lgcbtc sends brownie points to @moi238 :sparkles: :thumbsup: :sparkles:
:cookie: 129 | @moi238 |http://www.freecodecamp.com/moi238
Martine Ross
@moi238
Nov 14 2016 16:19
@lgcbtc took me ages to work that out!
Jamie
@lgcbtc
Nov 14 2016 16:20
@moi238 the body/background formatting thats worrying me most... ill start with the nav bar and then stress out about the rest haha
@MeliLondon Meli, if you need any help let me know, I just finished mine.
MeliLondon
@MeliLondon
Nov 14 2016 16:25
Thank you @lgcbtc , will certainly do
CamperBot
@camperbot
Nov 14 2016 16:25
:cookie: 121 | @lgcbtc |http://www.freecodecamp.com/lgcbtc
melilondon sends brownie points to @lgcbtc :sparkles: :thumbsup: :sparkles:
Lars Jönsson
@devpaps
Nov 14 2016 16:38
@oppiniated Great! Why didn’t i think of that! :D Thanks a lot!
CamperBot
@camperbot
Nov 14 2016 16:38
devpaps sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 358 | @oppiniated |http://www.freecodecamp.com/oppiniated
aqm225
@aqm225
Nov 14 2016 16:46
how do i build the tribute page
what editor do i use
Jamie
@lgcbtc
Nov 14 2016 16:48
@aqm225 use codepen.io
@aqm225 you need to paste the link of your page in to finish the project
aqm225
@aqm225
Nov 14 2016 16:49
thanks
Jamie
@lgcbtc
Nov 14 2016 16:50
@aqm225 remember to click the username before responding :) thanks
CamperBot
@camperbot
Nov 14 2016 16:50
lgcbtc sends brownie points to @aqm225 :sparkles: :thumbsup: :sparkles:
:cookie: 87 | @aqm225 |http://www.freecodecamp.com/aqm225
Thinh Cao
@tcao2
Nov 14 2016 16:59
I have just completed the Twitch API Challenge. Please give me some feedback (especially on my code structure and quality)
Jason Luboff
@JLuboff
Nov 14 2016 17:04
@tcao2 I think design wise, it could use some work. Code wise, it seems to work properly. I can see all, only online, or only offline.
Thinh Cao
@tcao2
Nov 14 2016 17:04
thank you for your feedback
yes, I don't really care about the design tbh, as that can be changed later
what about my code quality though? Like the way I structure it and such
not just the functionality of the program
Spyrantis Theodoros
@thodorisanta
Nov 14 2016 17:05
kat-mag
@kat-mag
Nov 14 2016 17:09
@thodorisanta yeah, that one sucks ;d but it's pretty easy once you work through the algorithm
@thodorisanta take a look at the process: invade romans ;p
Qieän
@UnicornCat
Nov 14 2016 17:59
Hey everyone.... I'm new to coding am on the Build a Tribute page task.. how do I get image links? I've tried grabbing an image off google but that is does not show on code pen when I input the link.. thanks so much!
Thayyeb salim
@Thayyebsalim
Nov 14 2016 18:00
@UnicornCat how come?
Qieän
@UnicornCat
Nov 14 2016 18:00
dunno
<img scr="http://media.gizmodo.co.uk/wp-content/uploads/2013/12/alan-turing.jpg" alt="Alan Turing">
Thayyeb salim
@Thayyebsalim
Nov 14 2016 18:01
paste link
Qieän
@UnicornCat
Nov 14 2016 18:01
and the image does not show
this is the link direct from the image
I've just started on the Tirbute project
Thayyeb salim
@Thayyebsalim
Nov 14 2016 18:02
@UnicornCat src not scr
Qieän
@UnicornCat
Nov 14 2016 18:03
lol @Thayyebsalim thank you! I guess I really need to work on my attention to detail. now it works!
CamperBot
@camperbot
Nov 14 2016 18:03
unicorncat sends brownie points to @thayyebsalim :sparkles: :thumbsup: :sparkles:
:cookie: 132 | @thayyebsalim |http://www.freecodecamp.com/thayyebsalim
Thayyeb salim
@Thayyebsalim
Nov 14 2016 18:03
happens :smile: :thumbsup:
Justin Pierson
@jpmitchellpierson
Nov 14 2016 18:06
Working on the portfolio project. I have everything done except my buttons don't show the text inside them unless I hover over them
Tom
@moT01
Nov 14 2016 18:06
link it
Justin Pierson
@jpmitchellpierson
Nov 14 2016 18:06
Is there a way I can drag screenshots into this?
Tom
@moT01
Nov 14 2016 18:07
i dont know
ive seen people put screen shots on here so theres some way to do it
if its on codepen you can put the link up to give me the best chance of being able to help
I don't have a portfolio so everything there is just a placeholder
Tom
@moT01
Nov 14 2016 18:14
i think its cause your text color is the same color as your background color
Justin Pierson
@jpmitchellpierson
Nov 14 2016 18:15
gotcha
thanks
Tom
@moT01
Nov 14 2016 18:17
you can move all that styling to your css area, i think it makes things easier to work with
it works either way
Sorin Ruse
@sorinr
Nov 14 2016 18:18
@jpmitchellpierson first try to make your navigation menu mobile friendly
Justin Pierson
@jpmitchellpierson
Nov 14 2016 18:19
Is that one of the user stories?
Sorin Ruse
@sorinr
Nov 14 2016 18:21
@jpmitchellpierson you need also cut ctrl-x and paste ctrl-v all what you have defined between <style></style> tags into the css part of the pen
Justin Pierson
@jpmitchellpierson
Nov 14 2016 18:22
Why?
Tom
@moT01
Nov 14 2016 18:22
you dont have to but most people would probly do it that way, like i said its easier to work with
Justin Pierson
@jpmitchellpierson
Nov 14 2016 18:23
Yeah I understand I can just put all of that in CSS. Personally I guess I just prefer it this way
Sorin Ruse
@sorinr
Nov 14 2016 18:24
@jpmitchellpierson if u saw the codepen IDE has some parts like html,css, javascript. so if you are working locally i would suggest you to copy paste the corresponding code accordingly but its up to you
Justin Pierson
@jpmitchellpierson
Nov 14 2016 18:25
IDE?
Sorin Ruse
@sorinr
Nov 14 2016 18:26
@jpmitchellpierson the integrated development enverionment
Justin Pierson
@jpmitchellpierson
Nov 14 2016 18:26
Yeah I saw there are different places for html/css/js
I just did it this way so it would all be in one window
Really just trying to finish this one user story so if you know how I can change the text color from the background color, that's really all I'm looking for at this point
Sorin Ruse
@sorinr
Nov 14 2016 18:28
@jpmitchellpierson its ok. but when you ask for help with some problem in javascript we all will tendn to look in the codepen js part to see what going wrong with your functions
Justin Pierson
@jpmitchellpierson
Nov 14 2016 18:28
I haven't even gotten to javascript in freecodecamp
How could I have asked for help in javascript?
Sorin Ruse
@sorinr
Nov 14 2016 18:29
@jpmitchellpierson it was just an example. all i said above its valid also for html or css part
Justin Pierson
@jpmitchellpierson
Nov 14 2016 18:30
ok. if anyone can tell me how to change the text color, that would be very helpful
Sorin Ruse
@sorinr
Nov 14 2016 18:31
@jpmitchellpierson background color of what element do you want to change?
Justin Pierson
@jpmitchellpierson
Nov 14 2016 18:31
the text in the buttons doesn't show up unless you hover over it
Thayyeb salim
@Thayyebsalim
Nov 14 2016 18:34
I need a little help I can't change the height of the nav bar
https://codepen.io/Thayyeb_Itachi/pen/rWxMxJ
Tom
@moT01
Nov 14 2016 18:34
@jpmitchellpierson i think its the <a> the default text color is blue for a link
Justin Pierson
@jpmitchellpierson
Nov 14 2016 18:36
that makes sense. it changed when i made it a link
Tom
@moT01
Nov 14 2016 18:36
@Thayyebsalim height: 300px;
and those bootstrap classes have default colors as well
primary is blue
Justin Pierson
@jpmitchellpierson
Nov 14 2016 18:37
Yeah I wanted the button to be blue
@sorinr so how do i change the color of the text without removing the link?
Thayyeb salim
@Thayyebsalim
Nov 14 2016 18:38
but can you do it with like min height that way it is responsive
Tom
@moT01
Nov 14 2016 18:39
@jpmitchellpierson #instagram a {color:black;}
Justin Pierson
@jpmitchellpierson
Nov 14 2016 18:41
@moT01 didn't work
Sorin Ruse
@sorinr
Nov 14 2016 18:41
@jpmitchellpierson you can add this to style: a { color: #fff; }
Tom
@moT01
Nov 14 2016 18:41
did for me
instaGram
Justin Pierson
@jpmitchellpierson
Nov 14 2016 18:42
got it
Awesome. Thanks guys
Tom
@moT01
Nov 14 2016 18:42
min-height im not sure would keep it responsive @Thayyebsalim
Thayyeb salim
@Thayyebsalim
Nov 14 2016 18:43
ahh ok thank you @moT01
CamperBot
@camperbot
Nov 14 2016 18:43
thayyebsalim sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 312 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Nov 14 2016 18:43
max is better i think
i dont know why min-height isnt working though
Thayyeb salim
@Thayyebsalim
Nov 14 2016 18:44

me too @moT01

i dont know why min-height isnt working though

Tyler Moeller
@TylerMoeller
Nov 14 2016 18:50
@Thayyebsalim min-height isn't working because bootstrap.css is overriding your codepen's css. min-height is set to 50px by default: https://github.com/twbs/bootstrap/blob/v3-dev/dist/css/bootstrap.css#L4168
To have your CSS override bootstrap's, take all of the files out of your <head> section in your HTML and place them in your Codepen Settings for CSS and JS instead.
Tom
@moT01
Nov 14 2016 18:53
@TylerMoeller hey, have you used a parallax effect much?
Tyler Moeller
@TylerMoeller
Nov 14 2016 18:53
@moT01 Just this one in a few websites: http://materializecss.com/parallax.html
Kind of an old school design philosophy now - was very popular a few years ago
Tom
@moT01
Nov 14 2016 18:55
well, when i add a little function to control the background scroll speed it adds all this extra space to the bottom of the page
cant find a way to stop it
Tyler Moeller
@TylerMoeller
Nov 14 2016 18:55
If you have a pen, I can take a look and see if another set of eyes helps
Tyler Moeller
@TylerMoeller
Nov 14 2016 18:56
That's a lot of extra space, lol
Tom
@moT01
Nov 14 2016 18:56
yes it is
ive played around with it, tried a number of things
Tyler Moeller
@TylerMoeller
Nov 14 2016 18:59
Chrome says it's your <html> height, all outside of the body...but changing HTML height to 100% doesn't help. Will keep looking, have a phone call now
Tom
@moT01
Nov 14 2016 19:00
k, thanks @TylerMoeller
CamperBot
@camperbot
Nov 14 2016 19:00
mot01 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 931 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Brian
@BrianCodes33
Nov 14 2016 19:03
can someone help me through an algorithm please
Tom
@moT01
Nov 14 2016 19:04
@BrianCodes33 whats up
i can try
Thayyeb salim
@Thayyebsalim
Nov 14 2016 19:14
@TylerMoeller
thanks
Brian
@BrianCodes33
Nov 14 2016 19:19
ok so if im trying to find the min and max values in an array and then add up the values by omitting these nums, how would i do that
Adam Jacks
@AdamHJ123
Nov 14 2016 19:21
Hey guys, anyone fancy helping me out with some CSS? I'm really struggling to make my designs look good. I've tried many different styles for my portfolio but I can't fill the boxes and make them look nice. Mind helping me out? http://s.codepen.io/AdamHJacks/debug/NAmkzr
Brian
@BrianCodes33
Nov 14 2016 19:24
start by changing the font- with larger fonts you want it to be less bold
find a better color scheme
CamperBot
@camperbot
Nov 14 2016 19:25
find a better color scheme
nothing found
Adam Jacks
@AdamHJ123
Nov 14 2016 19:25
I like the colours, it's sort of supposed to be flashy
Wanted it to be colourful haha
I think I can leave the font for now
It's more just how I can make the boxes look good
Brian
@BrianCodes33
Nov 14 2016 19:27
maybe remove the boxes all together
its hard on the eyes
Adam Jacks
@AdamHJ123
Nov 14 2016 19:31
I like the boxes, I just can't work out how to many the content inside look good
Brian
@BrianCodes33
Nov 14 2016 19:33
in the green box move the text more over to the right
Tom
@moT01
Nov 14 2016 19:33
@BrianCodes33 you could have two variables min and max = to array [0] to start, then cycle through the array and say if array[i] < min set min to array[i] same thing for max
then cycle through the array again and delete min and max
while at the same time adding the rest of them
Brian
@BrianCodes33
Nov 14 2016 19:34
hmm i see
that is interesting didn’t think of thst
that
Tom
@moT01
Nov 14 2016 19:34
or instead of deleting, just add them unless = to min
Brian
@BrianCodes33
Nov 14 2016 19:34
so i would need to use reduce
as a callback
Jason Luboff
@JLuboff
Nov 14 2016 19:35
Anybody by chance have any experience using the Outlook REST API?
Tom
@moT01
Nov 14 2016 19:36
thats just something quick off the top of my head, i dont think you need reduce in the way i would have gone
Brian
@BrianCodes33
Nov 14 2016 19:36
@moT01 here is challenge
Tom
@moT01
Nov 14 2016 19:38
yea i dont have an account
Brian
@BrianCodes33
Nov 14 2016 19:38
oh
Tom
@moT01
Nov 14 2016 19:39
i will have to check that out though
Brian
@BrianCodes33
Nov 14 2016 19:43
function sumArray(array) {  
  array.sort(function(a,b){
    return a - b;
    }  
   }
  }
Thayyeb salim
@Thayyebsalim
Nov 14 2016 19:51
now i cant change the background colour
Tom
@moT01
Nov 14 2016 19:57
@Thayyebsalim what background color
Thayyeb salim
@Thayyebsalim
Nov 14 2016 19:57
background color of divs
Tom
@moT01
Nov 14 2016 19:58
what one, maybe nothing there
if the div is 0px x 0px theres nothing to change
Thayyeb salim
@Thayyebsalim
Nov 14 2016 19:59
@moT01 not working
Tom
@moT01
Nov 14 2016 19:59
but its probly bootstraps classes like i think tyler said, those classes are all pre styled i think
Thayyeb salim
@Thayyebsalim
Nov 14 2016 20:00
@moT01 no there was a stupid mistake from me
Tom
@moT01
Nov 14 2016 20:01
u got it then?
Soumyojyoti Majumdar
@SoumyoNawab8
Nov 14 2016 20:01
need help....Linkedin icon need to be navigated correctly just down of "around the web"
Thayyeb salim
@Thayyebsalim
Nov 14 2016 20:04
@moT01 yep thanks
CamperBot
@camperbot
Nov 14 2016 20:04
thayyebsalim sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 313 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Nov 14 2016 20:05
@Soumyoahona200 i dunno man, try some things on it... float right maybe
MysticalMrCool
@MysticalMrCool
Nov 14 2016 20:06
@dsillydude hey thanks for the response, I've messed around with margins and i'm using bootstrap rows and columns for the top banner but I still can't work it out, got any ideas?
CamperBot
@camperbot
Nov 14 2016 20:06
mysticalmrcool sends brownie points to @dsillydude :sparkles: :thumbsup: :sparkles:
:cookie: 129 | @dsillydude |http://www.freecodecamp.com/dsillydude
markramortar
@markramortar
Nov 14 2016 20:14
Heyo everybody!
Somebody willing to rate my Tribute-Page i just finished?
Would love some feedback!
http://codepen.io/markramortar/full/KNMzmQ/
Thanks!
Tom
@moT01
Nov 14 2016 20:15
looks pretty good
little too black and white for me, maybe some color, ...just my thoughts
when you shrink the window the picture goes out of its frame a hair
kat-mag
@kat-mag
Nov 14 2016 20:16
@markramortar Yaaay ;3 it looks just like the example we were given
markramortar
@markramortar
Nov 14 2016 20:17
ahh, i see, @moT01
will try to fix it now, thank you :)
CamperBot
@camperbot
Nov 14 2016 20:17
markramortar sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 314 | @mot01 |http://www.freecodecamp.com/mot01
markramortar
@markramortar
Nov 14 2016 20:19
@kat-mag thats what i was aiming for :D thanks
CamperBot
@camperbot
Nov 14 2016 20:19
markramortar sends brownie points to @kat-mag :sparkles: :thumbsup: :sparkles:
:cookie: 416 | @kat-mag |http://www.freecodecamp.com/kat-mag
sanath chandra
@yarsunny
Nov 14 2016 20:20
@Soumyoahona200 Indent your properly
 <div class="row" id="footCon">
         <div class="col-xs-6">
            <div class="footNam1"> Made by <a href="#" id="advLg">Soumyojyoti</a></div>
         </div>
      </div>
      <div class="col-xs-7">
         <a href="https://in.linkedin.com/in/soumyojyoti-majumdar-774b23130" target="blank"><img src="https://activerain-store.s3.amazonaws.com/image_store/uploads/3/6/4/4/5/ar132336132954
kat-mag
@kat-mag
Nov 14 2016 20:20
@markramortar Explosion of creativity, I see
Tom
@moT01
Nov 14 2016 20:21
@kat-mag calm down now, its the tribute page
sanath chandra
@yarsunny
Nov 14 2016 20:21
@Soumyoahona200 you are adding <div class="col-xs-7”> outside row and make col-xs-7 to col-xs-6
total column count in a grid layout cant be more than 12
@Soumyoahona200 http://codepen.io/anon/pen/bBeWbB. Add required paddings
kat-mag
@kat-mag
Nov 14 2016 20:23
@moT01 that's where it all begins xD
Tom
@moT01
Nov 14 2016 20:25
yup, they asked to make it like that
Thinh Cao
@tcao2
Nov 14 2016 20:48
@thodorisanta use if-else statement, start from the highest value down and assign the Roman character accordingly
Muhammad Hasham
@MohammadHasham
Nov 14 2016 20:51
 <div class = "image1">
    <img src="Images/pictureOne.jpg" />
    </div>
    <!--FigCaption 1 & 2-->
     <div class = "image2">
    <img src="Images/pictureTwo.jpg" />
    </div>
    <!--FigCaption 1 & 2-->
     <div class = "image3">
    <img src="Images/pictureThree.jpg" />
    </div>
     <!--FigCaption 1 & 2-->
     <div class = "image4">
    <img src="Images/pictureFour.jpg" />
    </div>
How can i enter caption below for each and every image i have given them width of 20% each so that hey could fit in a single row but now i want to enter some caption below each image in the next row how can i do that?
Jake
@Jaketh
Nov 14 2016 20:54
do you want it below the image or beside the image?
I think I get what you're asking for. set the divs that contain the images, to: width:20%; display:inline-block; box-sizing: border-box;
then you could just put the text under the image inside the div. probably put a <br> tag between them. probably a good idea to put the text inside a <p> tag
Jake
@Jaketh
Nov 14 2016 20:59
or, sorry you said 4 images so width would be 25%
Henri Millet
@henri533
Nov 14 2016 20:59
Capture d’écran 2016-11-14 à 21.57.37.png
Hello, I'm struggling with a little something. In the CSS part of the editor, I get this error I don't find out how to correct :
Jake
@Jaketh
Nov 14 2016 21:00
probably shouldn't make a habit of capitalizing the images file either.
@henri533 If you're not linking to a style sheet, probably shouldn't label it as a style sheet.
@henri533 is that the html snippet of code that google fonts gave you?
Md.Ibrahim Khan
@ibrahim67778
Nov 14 2016 21:01
https://www.freecodecamp.com/challenges/create-a-set-of-checkboxes#?solution=%0A%3Clink%20href%3D%22https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DLobster%22%20rel%3D%22stylesheet%22%20type%3D%22text%2Fcss%22%3E%0A%3Cstyle%3E%0A%20%20.red-text%20%7B%0A%20%20%20%20color%3A%20red%3B%0A%20%20%7D%0A%0A%20%20h2%20%7B%0A%20%20%20%20font-family%3A%20Lobster%2C%20Monospace%3B%0A%20%20%7D%0A%0A%20%20p%20%7B%0A%20%20%20%20font-size%3A%2016px%3B%0A%20%20%20%20font-family%3A%20Monospace%3B%0A%20%20%7D%0A%0A%20%20.thick-green-border%20%7B%0A%20%20%20%20border-color%3A%20green%3B%0A%20%20%20%20border-width%3A%2010px%3B%0A%20%20%20%20border-style%3A%20solid%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%7D%0A%0A%20%20.smaller-image%20%7B%0A%20%20%20%20width%3A%20100px%3B%0A%20%20%7D%0A%3C%2Fstyle%3E%0A%0A%3Ch2%20class%3D%22red-text%22%3ECatPhotoApp%3C%2Fh2%3E%0A%0A%3Cp%3EClick%20here%20for%20%3Ca%20href%3D%22%23%22%3Ecat%20photos%3C%2Fa%3E.%3C%2Fp%3E%0A%0A%3Ca%20href%3D%22%23%22%3E%3Cimg%20class%3D%22smaller-image%20thick-green-border%22%20alt%3D%22A%20cute%20orange%20cat%20lying%20on%20its%20back.%20%22%20src%3D%22https%3A%2F%2Fbit.ly%2Ffcc-relaxing-cat%22%3E%3C%2Fa%3E%0A%0A%3Cp%3EThings%20cats%20love%3A%3C%2Fp%3E%0A%3Cul%3E%0A%20%20%3Cli%3Ecat%20nip%3C%2Fli%3E%0A%20%20%3Cli%3Elaser%20pointers%3C%2Fli%3E%0A%20%20%3Cli%3Elasagna%3C%2Fli%3E%0A%3C%2Ful%3E%0A%3Cp%3ETop%203%20things%20cats%20hate%3A%3C%2Fp%3E%0A%3Col%3E%0A%20%20%3Cli%3Eflea%20treatment%3C%2Fli%3E%0A%20%20%3Cli%3Ethunder%3C%2Fli%3E%0A%20%20%3Cli%3Eother%20cats%3C%2Fli%3E%0A%3C%2Fol%3E%0A%3Cform%20fccfaa%3D%22%2Fsubmit-cat-photo%22%3E%0A%20%20%3Clabel%3E%3Cinput%20type%3D%22radio%22%20name%3D%22indoor-outdoor%22%3E%20Indoor%3C%2Flabel%3E%0A%20%20%3Clabel%3E%3Cinput%20type%3D%22radio%22%20name%3D%22indoor-outdoor%22%3E%20Outdoor%3C%2Flabel%3E%0A%20%20%0A%20%20%0A%20%20%20%3Clebel%3E%20%3Cinput%20type%3D%22checkbox%22%20name%3D%22personality%22%3E%20loving%3C%2Flebel%3E%0A%20%20%20%3Clebel%3E%20%20%3Cinput%20type%3D%22checkbox%22%20name%3D%22personality%22%3Ecaring%20%3C%2Flebel%3E%0A%20%20%20%20%3Clebel%3E%20%3Cinput%20type%3D%22checkbox%22%20name%3D%22personality%22%3E%20rude%3C%2Flebel%3E%0A%20%20%0A%20%20%0A%20%20%0A%20%20%3Cinput%20type%3D%22text%22%20placeholder%3D%22cat%20photo%20URL%22%20required%3E%0A%20%20%0A%20%20%0A%20%20%0A%20%20%3Cbutton%20type%3D%22submit%22%3ESubmit%3C%2Fbutton%3E%0A%3C%2Fform%3E%0A
help me in this code
Tom
@moT01
Nov 14 2016 21:02
i think you have you css in the html area maybe @henri533
Henri Millet
@henri533
Nov 14 2016 21:02
@Jaketh Yes, this is the code I found on Google font
@moT01 It's in the CSS area
Jan
@burning-monk
Nov 14 2016 21:03
Jake
@Jaketh
Nov 14 2016 21:03
try removing the type="css" part. @henri533
Tom
@moT01
Nov 14 2016 21:03
is the link in the html area
Henri Millet
@henri533
Nov 14 2016 21:04
@moT01 Nop, the link is in the CSS area
Tom
@moT01
Nov 14 2016 21:04
i think it should be in the html area
Jake
@Jaketh
Nov 14 2016 21:05
would be a lot easier to trouble shoot if it were a code pen and not a screen shot :D
Henri Millet
@henri533
Nov 14 2016 21:05
@moT01 I'll give it a try
@Jaketh I didn't know that, thanks for the advice ! I'm entirely new to coding ahah
CamperBot
@camperbot
Nov 14 2016 21:05
henri533 sends brownie points to @jaketh :sparkles: :thumbsup: :sparkles:
:cookie: 318 | @jaketh |http://www.freecodecamp.com/jaketh
Jake
@Jaketh
Nov 14 2016 21:06
@ibrahim67778 you're going to need a way more specific question.
@henri533 no worries. everyone starts somewhere.
Tom
@moT01
Nov 14 2016 21:07
@ibrahim67778 label
Henri Millet
@henri533
Nov 14 2016 21:08
@moT01 Thanks a lot, my problem was solved by putting it in the HTML section ! I didn't know it was supposed to be there since the FreeCodeCamp editor isn't divide in three part ;)
CamperBot
@camperbot
Nov 14 2016 21:08
henri533 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 315 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Nov 14 2016 21:09
i think the fcc editor just does the css within the html, ...which is allowed
with the use of <style> tags
Jake
@Jaketh
Nov 14 2016 21:10
definitely easiest when you're starting.
Grey
@1gitGrey
Nov 14 2016 21:43
Hello world
CamperBot
@camperbot
Nov 14 2016 21:44

welcome to FreeCodeCamp @1gitGrey!

Jake
@Jaketh
Nov 14 2016 21:53
welcome @1gitGrey
Ariel Santos Roitman
@ArielSantosR
Nov 14 2016 21:58
hello
alguien habla español?
Tyler Moeller
@TylerMoeller
Nov 14 2016 22:14
@moT01 I forked your pen, but had to make some html, css, and JS changes to get the effect working correctly. Is this codepen kind of what you were looking to accomplish? Still some formatting/beautifying to make it look better, but that should show the effect for you. The main code change was:
$(document).on('scroll',function(e) {
  $('body').attr('style', 'background-position: center ' + (window.scrollY*-1)/7 + 'px');
});
tcar
@tcar
Nov 14 2016 22:16
question about simon game... how can disable clicking when computer is playing? here is my codepen...http://codepen.io/Tcar/pen/GNZWGg
Tom
@moT01
Nov 14 2016 22:24
@TylerMoeller hey thanks, wow.
CamperBot
@camperbot
Nov 14 2016 22:24
:cookie: 932 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
mot01 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Tom
@moT01
Nov 14 2016 22:24
i see you simplified my thumbnail image area
Tyler Moeller
@TylerMoeller
Nov 14 2016 22:25
Yeah, had to simplify everything to understand the code a little better in case it was stopping the parallax from working.
Well....'simplify' meaning write it in my own way :)
Tom
@moT01
Nov 14 2016 22:27
no problem, always nice to see another persons way of doing it
yea i looked at some stack overflow stuff on that keyup way of getting the query, i kept it as a form cause i was more familiar
Tom
@moT01
Nov 14 2016 22:32
didnt like my 300 character long lines either?
or probly more
Tyler Moeller
@TylerMoeller
Nov 14 2016 22:33
I've used <form> before to simplify that, but it wasn't working for some reason - I didn't want to change too much code, so just made a quick workaround
I may have stripped out other stuff on accident - I don't remember modifying anything about the 300 character long lines :) just tried to get to the basic parallax stuff
Or, if you're talking about your code, my editor complains if they're longer than 100
Tom
@moT01
Nov 14 2016 22:37
what editor
yes i was talking about my code
the jumble of appended html all smashed into one long line
Tyler Moeller
@TylerMoeller
Nov 14 2016 22:38

Atom with jscs for linting. I agree with it most of the time, like in this example it's easier to read when it's on multiple lines:

      $('.contentwrap').append(
        '<div class="contentwrap2">' +
          '<div class="title">' + v.title + '</div>' +
          '<div class="article">' + v.extract + '</div>' +
          '<a href="https://en.wikipedia.org/?curid=' + v.pageid +
            '" class="moreinfo" target="_blank">MORE' +
          '</a>' +
        '</div>'
      );

compared to:

$('.contentwrap').append('<div class="contentwrap2"><div class="title">' + v.title + '</div><div class="article">' + v.extract + '</div><a href="https://en.wikipedia.org/?curid=' + v.pageid + '" class="moreinfo" target="_blank">MORE</a></div>');
Brian
@BrianCodes33
Nov 14 2016 22:38
so if i want to create an algorithm to reverse the numbers in an array
do i decrement a for loop
Tom
@moT01
Nov 14 2016 22:39
ill have to try that out, ...use brackets most of the time
Jason Luboff
@JLuboff
Nov 14 2016 22:39
Anybody know if you can use PHP with Codepen?
Tyler Moeller
@TylerMoeller
Nov 14 2016 22:40
@BrianCodes33 There is a .reverse() method that works for arrays: http://www.w3schools.com/jsref/jsref_reverse.asp
Jake
@Jaketh
Nov 14 2016 22:41
@JLuboff negative. php is a server side language.
can run php locally in mamp though.
Stefan
@st3fun1
Nov 14 2016 22:41
guys how do I center nav list items on small screens in Bootstrap?
Brian
@BrianCodes33
Nov 14 2016 22:41
function digitize(n) {
  n.reverse();
}
how would i do it though?
Jason Luboff
@JLuboff
Nov 14 2016 22:42
@Jaketh Thanks. Trying to understand this Outlook REST API and I haven't found a good solution using JS...so looks like I may have to do it with PHP and was trying to avoid having to work locally but oh well
CamperBot
@camperbot
Nov 14 2016 22:42
jluboff sends brownie points to @jaketh :sparkles: :thumbsup: :sparkles:
:cookie: 319 | @jaketh |http://www.freecodecamp.com/jaketh
Stefan
@st3fun1
Nov 14 2016 22:43
i can't find any helper class for my task
and my media query doesn't work for small screens
@Jaketh
when I press the sandwich button, I should see the list items centered
Jake
@Jaketh
Nov 14 2016 22:45
@JLuboff I *think there is a .JS solution
Stefan
@st3fun1
Nov 14 2016 22:45
here is the code

@media screen and (max-width:767){
    .navbar-custom .navbar-collapse .navbar-right ul li{
        display: inline-block;
        float:none;
    }
    .navbar-custom .navbar-collapse ul{
        text-align:center;
    }
}
nvm
Jason Luboff
@JLuboff
Nov 14 2016 22:45
@Jaketh I found a node.js solution, but I haven't worked with node.js before and my javascript is still limited (currently working on the FCC Pomodoro projecT)
Stefan
@st3fun1
Nov 14 2016 22:45
spotted the problem
i forgot to add the px for max-width
Tom
@moT01
Nov 14 2016 22:46
@BrianCodes33 maybe n = n.reverse() return n
Jake
@Jaketh
Nov 14 2016 22:46
@JLuboff is your php skill further along than the js skill?
@st3fun1 all good then?
Jason Luboff
@JLuboff
Nov 14 2016 22:46
@Jaketh It too is limited haha but the API documentation goes over it with PHP
Stefan
@st3fun1
Nov 14 2016 22:47
@Jaketh yeah thanks anyway :D
CamperBot
@camperbot
Nov 14 2016 22:47
st3fun1 sends brownie points to @jaketh :sparkles: :thumbsup: :sparkles:
:cookie: 320 | @jaketh |http://www.freecodecamp.com/jaketh
Jake
@Jaketh
Nov 14 2016 22:49
If theres only good documentation in php you might have to go that rougt. but, @JLuboff php being server side... can be a lot more difficult to work with. You'll need to run it either on a localhost application like mamp/wamp/lamp... and anytime you make a syntax error you're likely to get a very unhelpful empty white page. There's code you can put into you php files to get them to announce your errors, but just in general the environment is a lot less forgiving than javascript.
hamzaballouk
@hamzaballouk
Nov 14 2016 22:50
who can help me in navbar please for my personal portofolio how to ccreate it
Jason Luboff
@JLuboff
Nov 14 2016 22:51
@Jaketh Gotcha. Ultimately I'm trying to create a conference room sign that I can have link to our conference room calendar and then I can display the upcoming events, if the room is available/busy, etc
Jake
@Jaketh
Nov 14 2016 22:51
that'll be a helluva project. respect for going for it.
I haven't built anything to do with microsoft's services/apis/.NET/Azure.... but I don't hear the nicest things.
Jason Luboff
@JLuboff
Nov 14 2016 22:52
If I could just get it to pull JSON data...it'd be easy(ish) lol.
Ya I've been trying to wrap my head around the API for a couple days...its taking me longert then I'd like to admit to understanding
Jake
@Jaketh
Nov 14 2016 22:54
I've spent days learning about single wordpress plugsins. if you can wrap your head around an azure service in a week I'm impressed.
Jason Luboff
@JLuboff
Nov 14 2016 22:54
Damn...thats not instilling much confidence here...haha
Jake
@Jaketh
Nov 14 2016 22:55
meh. I'm nobody. You've got this. (and wordpress is a cluster %$^@)
Jason Luboff
@JLuboff
Nov 14 2016 22:56
Thanks bud!
Luan Millnitz
@millnitzluan
Nov 14 2016 23:02
Hello my friends
JD Tadlock
@jdtdesigns
Nov 14 2016 23:15
@JLuboff You're trying to create a digital sign for the wall of the office with calendar data?
Jason Luboff
@JLuboff
Nov 14 2016 23:16
@jdtdesigns Yes
JD Tadlock
@jdtdesigns
Nov 14 2016 23:16
is the calendar running in WP?
Jason Luboff
@JLuboff
Nov 14 2016 23:17
No, we use Office365 as our e-mail provider. I'm attempting to get the calendar data directly from that
JD Tadlock
@jdtdesigns
Nov 14 2016 23:18
have you gotten any data from it yet?
Jason Luboff
@JLuboff
Nov 14 2016 23:18
No, still trying to understand how to get the data heh
JD Tadlock
@jdtdesigns
Nov 14 2016 23:20
what is the office365 service that shows calendar data?
Jason Luboff
@JLuboff
Nov 14 2016 23:20
https://msdn.microsoft.com/en-us/office/office365/api/calendar-rest-operations This is the API that I'm trying to understand to use (its Microsofts own)
Stefan
@st3fun1
Nov 14 2016 23:22
guys i need help with someting related to ExpressJS
Jan
@burning-monk
Nov 14 2016 23:53
@JLuboff do you need to use it?
Jason Luboff
@JLuboff
Nov 14 2016 23:54
I don't have to...but I'd like to have calendar integration so that there is no need to maintain a secondary calendar (which would actually be a total of 3)
Jan
@burning-monk
Nov 14 2016 23:58
a calendar integration in what?
Jason Luboff
@JLuboff
Nov 14 2016 23:59
I'm wanting to make Digital Signage for a conference room. Thus I want to list the day's calendar events along with a visual cue for available/busy/soon to be busy