These are chat archives for FreeCodeCamp/HelpFrontEnd

17th
Jun 2017
Hey guys, I wan to be able to blur only the image and not the text, what am I doing wrong
Please help!!
ChrisAB74
@ChrisAB74
Jun 17 2017 00:01
Any one help me understand why when I scroll things are going infront of my nav-pills
Gulsvi
@gulsvi
Jun 17 2017 00:06

@MauriSg99 Add these CSS properties to your header:

  position: absolute;
  z-index: -1;
  width: 100%;

And take your text out of the <header> (or ideally, define a different element for your blurry background)

ACSlater8
@ACSlater8
Jun 17 2017 00:07
im trying to move my objects but dont know how to properly move them using bootstrap
Gulsvi
@gulsvi
Jun 17 2017 00:09
@ChrisAB74 Add navbar-fixed-top to your <ul> tag for your nav-pills:
<ul class="nav nav-pills nav-justified navbar-fixed-top">
Sunny Wong
@swong194
Jun 17 2017 00:10
@ChrisAB74 set a high z-index
Gulsvi
@gulsvi
Jun 17 2017 00:10
@ACSlater8 What objects are you trying to move?
ACSlater8
@ACSlater8
Jun 17 2017 00:11
the <h> and the <p> on the second page
@SkyC0der im trying to get them further from the side and closer to covering the bubble
Veronica Eulenberg
@HappyViki
Jun 17 2017 00:12
anyone know how to get the json wiki page to show up? I tried this: https://en.wikipedia.org/w/api.php?format=json&titles=India
Long Nguyen
@longnt80
Jun 17 2017 00:14
@MauriSg99
header{
  height: 100vh;
  margin-top: -20px;
  margin-bottom:20px;
}

header .image{
  background-image:url(https://images.pexels.com/photos/7369/startup-photos.jpg?w=940&h=650&auto=compress&cs=tinysrgb);
  background-size: cover; 
  filter: blur(1px);
  -webkit-filter: blur(1px);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  width: 100%;
}
Gulsvi
@gulsvi
Jun 17 2017 00:14
@ACSlater8 To move them down, you can use margin-top on the row that they're located in - give that row a class name and add margin-top in your CSS.
To move them left and right, play around with the size of the columns. For example, this makes the title and the text each take up 50% of the page width on md-sized screens and larger:
<div class="pageTwo">
  <div class="row">
    <div class="col-md-6 text-center">
      <h1>Slater Elkind</h1>
    </div>
    <div class="col-md-6">
      <p>Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture.</p>
    </div>
  </div>
</div>
Mauricio Salas
@MauriSg99
Jun 17 2017 00:15
@longnt80 Thaaaanks! That's exactly what I needed
ACSlater8
@ACSlater8
Jun 17 2017 00:16
@SkyC0der Isn't it bad to use margin in css while using bootstrap. I was told that can affect the responsiveness of the program?
Gulsvi
@gulsvi
Jun 17 2017 00:16
margin-top / margin-bottom is fine
left/right margins can mess things up, yes
ACSlater8
@ACSlater8
Jun 17 2017 00:17
@SkyC0der and what about padding?
Gulsvi
@gulsvi
Jun 17 2017 00:17
It's the same - left/right can mess things up with bootstrap.
Jarren
@Jarren5cent
Jun 17 2017 00:17
Hello friends, I'm trying to learn how to make 2 gifs side by side, i'm not really sure what needs to be done, i'm trying "row" and col-md-4" right now.
https://codepen.io/Jarren5cent/pen/bRpxOQ
Gulsvi
@gulsvi
Jun 17 2017 00:17
Responsive sites are based on screen width, not height
ACSlater8
@ACSlater8
Jun 17 2017 00:17
ok
@SkyC0der so how would i move things left to right without messing it up
ChrisAB74
@ChrisAB74
Jun 17 2017 00:18
Could I get some feedback. I finally got everything working the way it should.
https://s.codepen.io/ChrisAB74/debug/mwOMEd/XBrGRojDQvyM
ACSlater8
@ACSlater8
Jun 17 2017 00:18
@SkyC0der i dont really understand the col command
Gulsvi
@gulsvi
Jun 17 2017 00:19
@ACSlater8 Adjust the 6 in both of those col class names. The numbers have to add up to 12. So, use 3 and 9 or 5 and 7, etc.
a row has 12 columns - col-md-6 = 50% of a row.
(6/12)
Josh Beasley
@joshbeasley
Jun 17 2017 00:20
I'm currently working on the Weather App, and encountered the https error and rewrote my geolocator to use the IP-API to get the latitude and longitude values. For some reason, the function is not obtaining the lat and lon characteristics of the object. Please help! Ive been stuck here for hours. https://codepen.io/joshbeasley/pen/rwWEmM?editors=1011
ACSlater8
@ACSlater8
Jun 17 2017 00:21
@SkyC0der what would happen if i gave one md and the other sm?
Kaz Baig
@kbaig
Jun 17 2017 00:21
@fullmetal7777 im here right now
Gulsvi
@gulsvi
Jun 17 2017 00:22
col-md-6 means make it 6 columns (out of 12) on md-sized screens and bigger. Make it 12/12 on smaller screens.
So, 50% wide on md and bigger, 100% wide on smaller than md
@SkyC0der i moved it down but i still cant get it go over to the right
Jarren
@Jarren5cent
Jun 17 2017 00:24
@SkyC0der thanks, I think you helped me out by answering @ACSlater8
CamperBot
@camperbot
Jun 17 2017 00:24
jarren5cent sends brownie points to @skyc0der and @acslater8 :sparkles: :thumbsup: :sparkles:
:star2: 1746 | @skyc0der |http://www.freecodecamp.com/skyc0der
:warning: @acslater8's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
Gulsvi
@gulsvi
Jun 17 2017 00:24
@ACSlater8 What is 8 + 9 ? :)
You can only have 12 columns inside a <div class="row">
@Jarren5cent happy to help lol
Jarren
@Jarren5cent
Jun 17 2017 00:26
@SkyC0der think you can help me move my gifs up?
https://codepen.io/Jarren5cent/pen/bRpxOQ
Gulsvi
@gulsvi
Jun 17 2017 00:27
@Jarren5cent Start by moving all of your inline styles into your CSS.
It's a lot of padding, absolute positioning, and widths + heights that are going to move things around
ACSlater8
@ACSlater8
Jun 17 2017 00:28
@SkyC0der haha im sorry i know frustrating but i do appreciate the help
Jarren
@Jarren5cent
Jun 17 2017 00:28
so css will help reduce that?
Gulsvi
@gulsvi
Jun 17 2017 00:28
@ACSlater8 No worries, it can be hard to figure out at first
@Jarren5cent No, but it will help to see what's going on better - easier to debug/maintain.
Definitely don't mess with the width of items inside a bootstrap column
Jarren
@Jarren5cent
Jun 17 2017 00:29
ok i'll try
Gulsvi
@gulsvi
Jun 17 2017 00:29
And don't use position absolute for general placement
Jarren
@Jarren5cent
Jun 17 2017 00:30
@SkyC0der if I get rid of that class, the gif disapears
Gulsvi
@gulsvi
Jun 17 2017 00:33
@Jarren5cent This is how to get two images side by side in bootstrap:
  <div class="row">
    <div class="col-sm-6">
      <img class="img-responsive center-block" src="https://media.giphy.com/media/3og0IUD7ANvUg0MAec/giphy.gif">
    </div>
    <div class="col-sm-6">
      <img class="img-responsive center-block" src="https://media.giphy.com/media/3og0IUD7ANvUg0MAec/giphy.gif">
    </div>
  </div>
no inline styling needed, no CSS
Jarren
@Jarren5cent
Jun 17 2017 00:35
I'll use it! thanks for the advice!
Gulsvi
@gulsvi
Jun 17 2017 00:35
@Jarren5cent Since you're using Bootstrap 4, it's slightly different:
  <div class="row">
    <div class="col-sm-6">
      <img class="img-fluid mx-auto d-block" src="https://media.giphy.com/media/3og0IUD7ANvUg0MAec/giphy.gif">
    </div>
    <div class="col-sm-6">
      <img class="img-fluid mx-auto d-block" src="https://media.giphy.com/media/3og0IUD7ANvUg0MAec/giphy.gif">
    </div>
  </div>
ACSlater8
@ACSlater8
Jun 17 2017 00:36
@SkyC0der would i put in a new div in order to move it
Jarren
@Jarren5cent
Jun 17 2017 00:37
@SkyC0der those both worked
Gulsvi
@gulsvi
Jun 17 2017 00:37
@ACSlater8 This would make the text on the left really small (1/12 of a row) and the text on the right really big (11/12 of a row).
  <div class="row">
    <div class="col-sm-1"></div>
    <div class="col-sm-11"></div>
  </div>
@Jarren5cent Resize the screen - only the second chunk of code is responsive for your version of bootstrap
@ACSlater8 This makes the text on the left the same distance from the edge of the screen as the text on the right:
  <div class="row">
    <div class="col-sm-6"></div>
    <div class="col-sm-6"></div>
  </div>
Does that make sense?
Jarren
@Jarren5cent
Jun 17 2017 00:39

metakingnotes

thanks for the lessons @SkyC0der
CamperBot
@camperbot
Jun 17 2017 00:42
jarren5cent sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: jarren5cent already gave skyc0der points
ACSlater8
@ACSlater8
Jun 17 2017 00:43
@SkyC0der i think i got it! thank you
CamperBot
@camperbot
Jun 17 2017 00:43
acslater8 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1747 | @skyc0der |http://www.freecodecamp.com/skyc0der
ACSlater8
@ACSlater8
Jun 17 2017 00:43
@SkyC0der can you take a look to make sure it looks ok?
Will
@Will-is-Coding
Jun 17 2017 00:45
@ACSlater8 You may want to add overflow-x: hidden; to your body CSS, so that the photos aren't wider than the window. Also, the text is difficult to read on the second section, but I suppose that's more obvious. Looking like a good start :thumbsup:
Jarren
@Jarren5cent
Jun 17 2017 00:46
img-fluid mx-auto d-block how do you guys learn all these classes
Long Nguyen
@longnt80
Jun 17 2017 00:47
@Jarren5cent from the bootstrap doc
Gulsvi
@gulsvi
Jun 17 2017 00:47
image.png
Jarren
@Jarren5cent
Jun 17 2017 00:47
and you just keep learning new classes until you know which ones should be used?
thanks for the link, that helps!
Long Nguyen
@longnt80
Jun 17 2017 00:49
@Jarren5cent you need to learn plain css first to understand which property to use
the classes in bootstrap just call that property
Gulsvi
@gulsvi
Jun 17 2017 00:49
@ACSlater8 Your first row has a col-md-11 in it, then another row, with a col-md-2 and a col-md-8.
ACSlater8
@ACSlater8
Jun 17 2017 00:58
yeah but i made a new col so isnt that ok
@SkyC0der i have it in the postion i want but i dont think that it has been coded correctly
@SkyC0der if you open it up to the actual page on codepen its in the right postion i wanted the items like that in the bubble but i dont think i used the col correctly
ACSlater8
@ACSlater8
Jun 17 2017 01:04
@SkyC0der nevermind its all messed up now :(
Jorge
@OrangeKulture
Jun 17 2017 01:16
lol @ the mug
Angelo Hijada
@aymodez
Jun 17 2017 01:21
hi guys
looking for some help
doing my random quote machine project
I'm going to create a button to reset the quote machine to its original image.. but can't seem to figure out how to revert my (2, crossfade effect) photos back to its original
Mauricio Salas
@MauriSg99
Jun 17 2017 01:23
How can I put "Aspiring..." under the main heading, what am I doing wrong with the divs? https://codepen.io/MauriSg/pen/RgKaXx
Angelo Hijada
@aymodez
Jun 17 2017 01:23

my css:

}
.img-container {
width: 45%;
height: auto;
margin-right: auto;
margin-left: auto;
float: center;
display:list-item;
position: relative;
}

.img-container img {
width: 45%;
height: auto;
}
.img-hidden {
bottom:0;
position: absolute;
opacity:0;
filter: alpha(opacity = 0);
width: 100%;
height: auto;
z-index:1000;
transition:opacity 1.5s;
-moz-transition:opacity 1.5s;
-webkit-transition:opacity 1.5s;
display: block;
}

target-hidden:target {

opacity:1;
filter: alpha(opacity = 100);
transition:opacity 1.5s;
-moz-transition:opacity 1.5s;
-webkit-transition:opacity 1.5s;

}

Mauricio Salas
@MauriSg99
Jun 17 2017 01:32
How can I put "Aspiring..." under the main heading, what am I doing wrong with the divs? https://codepen.io/MauriSg/pen/RgKaXx
Ken Haduch
@khaduch
Jun 17 2017 01:34
@MauriSg99 - where are you trying to put "Aspiring..."? I don't see it in your CodePen?
Mauricio Salas
@MauriSg99
Jun 17 2017 01:35
As a subheading, sorry I sent the last update
Ken Haduch
@khaduch
Jun 17 2017 01:39
@MauriSg99 - you are assigning your .h1 class using position: absolute; which puts it out of the normal "flow" of the HTML layout. You would have to also use absolute positioning to get anything else aligned with that, which is going to be a painful way to go. You could try putting both of those in a div element that has position:absolute controlling it, perhaps that would work? Or take away the absolute positioning and use some padding-top to move those title elements down from the very top of the page. And just rely on the normal HTML and browser layout characteristics.
Brian
@BrianCodes33
Jun 17 2017 01:41
can someone help me out w/ this npm error when i run npm start
Mauricio Salas
@MauriSg99
Jun 17 2017 01:44
Thanks @khaduch it worked!
CamperBot
@camperbot
Jun 17 2017 01:44
maurisg99 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3001 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Jun 17 2017 01:56
@MauriSg99 - ok! You're welcome...
glitz20
@glitz20
Jun 17 2017 03:01
Can any help me solve this algorithm? https://www.freecodecamp.com/challenges/sorted-union

function uniteUnique(arr) {
var landak=[];
landak.push(arr[0][0]);
for(var i=0;i<arr.length;i++){
for(var j=1;j<arr[i].length;j++){
for(var k=0;k<landak.length;k++){
if(arr[i][j]!==landak[k]){
landak.push(arr[i][j]);
}
}

}

}

return landak;
}

uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1]);

rajaaa216
@rajaaa216
Jun 17 2017 03:26
Hi i need help in separating my links vertically with some space..any tips?
chunnali
@chunnali
Jun 17 2017 03:36
hey guys, I have a question about how github actually works? Do I work my projects directly on github or do I work on my desktop such as using notepad and copying it over
rajaaa216
@rajaaa216
Jun 17 2017 03:40
any help on aligning my links vertically?
Botenga
@Botenga
Jun 17 2017 03:56
hey guys i am having an isue with my place holder image i put my own link and want it to appear just like the place holders appear but its not working i have tried using anchor and nested a img inside but it dosent work
Mauricio Salas
@MauriSg99
Jun 17 2017 04:26
Why my .sidebar li:hover doesnt work?https://codepen.io/MauriSg/pen/gRgwzP?editors=0100
Johnny
@jtan3
Jun 17 2017 05:06
@MauriSg99 looks like its working
Jayellrey
@Jayellrey
Jun 17 2017 05:09

https://codepen.io/JayEllRei/pen/JJRLma

any comments or critiques?

Johnny
@jtan3
Jun 17 2017 05:12
@Jayellrey you should make the contact section have its own background color to separate your project section
@Jayellrey looks pretty good.
Benjamin Osorio
@wiir
Jun 17 2017 05:23
https://codepen.io/Benjamoni/full/eRgdqP/
when i see it on my phone, its a real mess, what do i do
Mauricio Salas
@MauriSg99
Jun 17 2017 05:23
It's not responsive then
Benjamin Osorio
@wiir
Jun 17 2017 05:23
i see
fdemaa
@fdemaa
Jun 17 2017 05:28
@wiir use bootstrap
Benjamin Osorio
@wiir
Jun 17 2017 05:29
@fdemaa im using the <div class="container-fluid"> but it aint working, am i using it wrong ?
Mauricio Salas
@MauriSg99
Jun 17 2017 05:30
Check on Settings>CSS to see if you are connected to Bootstrap
Benjamin Osorio
@wiir
Jun 17 2017 05:30
@MauriSg99 i am
Check my code, and see what you are missing :)
Hope it helps
Benjamin Osorio
@wiir
Jun 17 2017 05:40
Thanks @MauriSg99
CamperBot
@camperbot
Jun 17 2017 05:40
wiir sends brownie points to @maurisg99 :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @maurisg99 |http://www.freecodecamp.com/maurisg99
ACSlater8
@ACSlater8
Jun 17 2017 05:45
damn thats pretty good
@MauriSg99 can you look at my portfolio pen?
Mauricio Salas
@MauriSg99
Jun 17 2017 05:47
Sure
how can i make it so that my page displays the same way on all screen sizes? @MauriSg99
Mauricio Salas
@MauriSg99
Jun 17 2017 05:50
With Bootstrap
ACSlater8
@ACSlater8
Jun 17 2017 05:50
i know but i dont know how to
Mauricio Salas
@MauriSg99
Jun 17 2017 05:50
Wait, let me check your code
ACSlater8
@ACSlater8
Jun 17 2017 05:50
ive honestly been sturggling with that for about five hours @MauriSg99
Johnny
@jtan3
Jun 17 2017 05:52
@ACSlater8 it shouldn't stay the same on all screen sizes.
ACSlater8
@ACSlater8
Jun 17 2017 05:53
@jtan3 why?
Johnny
@jtan3
Jun 17 2017 05:53
@ACSlater8 you page should resize when your screen is smaller to fit the screen
ACSlater8
@ACSlater8
Jun 17 2017 05:53
yeah thats what i want @jtan3
ACSlater8
@ACSlater8
Jun 17 2017 05:54
the w3 schools isnt very clear on it @jtan3
Johnny
@jtan3
Jun 17 2017 05:55
@ACSlater8 you page does resize. Its just that your section have huge heights so it takes awhile to scroll.
@ACSlater8 look at the picture it should do that
ACSlater8
@ACSlater8
Jun 17 2017 05:56
@jtan3 i want that stuff to shrink into place
@jtan3 ill post my other webpage to show you what i mean
this one shrinks to fit all screens but idk how to get my new one to do that too
Mauricio Salas
@MauriSg99
Jun 17 2017 05:59
You are missing the <div class="row"> and <div class="col-xs-... col-md-...">
ACSlater8
@ACSlater8
Jun 17 2017 05:59
where?
@MauriSg99 i dont seem to be able to find where im missing those two div classes
Mauricio Salas
@MauriSg99
Jun 17 2017 06:07
Sorry, I was comparing your two sites
I saw that on the JWelch site you used <div class="row"> on each section
Redoy
@redoy786
Jun 17 2017 06:09
hello coders.
Mauricio Salas
@MauriSg99
Jun 17 2017 06:09
Check it again on your current site and see if that was the problem
Redoy
@redoy786
Jun 17 2017 06:10
can any one help me to understand about building a tribute page?
Mauricio Salas
@MauriSg99
Jun 17 2017 06:10
What do you need to understand @redoy786 ? :)
Johnny
@jtan3
Jun 17 2017 06:11
@ACSlater8 what does col-md-push-2 do?
Redoy
@redoy786
Jun 17 2017 06:11
my question is should i make a similar web page and can i use any story i do like?
Mauricio Salas
@MauriSg99
Jun 17 2017 06:12
You can use any story you like
Redoy
@redoy786
Jun 17 2017 06:12
@MauriSg99 thanks a lot.
CamperBot
@camperbot
Jun 17 2017 06:12
redoy786 sends brownie points to @maurisg99 :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @maurisg99 |http://www.freecodecamp.com/maurisg99
ACSlater8
@ACSlater8
Jun 17 2017 06:15
@jtan3 it moves it two col to the right
Mauricio Salas
@MauriSg99
Jun 17 2017 06:16
Couple of questions: 1) How can I make the image to fit the page? 2) How can I make the sidebar to be hidden when refreshed? 3) How can I make the Burger Menu to be inside the image and not above? https://codepen.io/MauriSg/pen/gRgwzP?editors=0100
Johnny
@jtan3
Jun 17 2017 06:19
@MauriSg99 you have padding around your image
captainshukla
@captainshukla
Jun 17 2017 06:21
@moT01 Thanks man!
CamperBot
@camperbot
Jun 17 2017 06:21
captainshukla sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 724 | @mot01 |http://www.freecodecamp.com/mot01
Johnny
@jtan3
Jun 17 2017 06:24
@MauriSg99 your class content open makes your menu open
try just content
Rajat
@rajataudichya
Jun 17 2017 06:25
Hi people
Mauricio Salas
@MauriSg99
Jun 17 2017 06:32
@jtan3 Thanks it worked
CamperBot
@camperbot
Jun 17 2017 06:32
maurisg99 sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 412 | @jtan3 |http://www.freecodecamp.com/jtan3
Mauricio Salas
@MauriSg99
Jun 17 2017 06:33
And what about the other things, I have literally no idea haha
Johnny
@jtan3
Jun 17 2017 06:35
@MauriSg99 did you mean you wanted to fill in the white space? where the picture is?
Mauricio Salas
@MauriSg99
Jun 17 2017 06:36
Exactly, it has like a padding but before I added the menu the picture covered the whole page
Johnny
@jtan3
Jun 17 2017 06:37
if you click on the white space and check you dev tools
you'll see padding in the .content{ }
in your css
Johnny
@jtan3
Jun 17 2017 06:43
@MauriSg99 background: url(images/bg.jpg) no-repeat center center fixed add this to your image
mhdns
@mhdns
Jun 17 2017 06:43
is something wrong with mu javascript?
cannot get the timer to pause when i click the circle
Mauricio Salas
@MauriSg99
Jun 17 2017 06:45
@jtan3 I got rid of the padding, but I didnt understand the no-repeat..
Like this:
'background-image:url(https://images.pexels.com/photos/7369/startup-photos.jpg?w=940&h=650&auto=compress&cs=tinysrgb) no-repeat center center fixed;'
????
Mr-Benjamin
@Mr-Benjamin
Jun 17 2017 07:08
is this code correct
<ul class="nav nav-pills nav-justified">
ACSlater8
@ACSlater8
Jun 17 2017 07:10
the portfolio challenge is hard
Mr-Benjamin
@Mr-Benjamin
Jun 17 2017 07:11
@ACSlater8 yeah it is a bit
ACSlater8
@ACSlater8
Jun 17 2017 07:14
how far are you on it benjamin?
shivam gupta
@shivamg11000
Jun 17 2017 07:17
I am trying to fetch data from dark sky api, but the ajax is not working https://codepen.io/shivamg11000/pen/KqNOjo
Hemakshi Sachdev
@hemakshis
Jun 17 2017 07:22
Hey Guys! I am finally done with my Random Quote Machine Challenge...
I would really love to hear your views/feedback... please do visit it :grinning:
https://codepen.io/hemakshis/full/GEjbGb/
Mr-Benjamin
@Mr-Benjamin
Jun 17 2017 07:23
@ACSlater8 well ive redone it twice, I searched into it and found some good content and now got some basics running like nav nav-pils. still floundering but I think in this environment reading and searching is important.
@hemakshis inspired
@ACSlater8 got a little stuck atm with nav justified where it just piles into one corner
ACSlater8
@ACSlater8
Jun 17 2017 07:31
@Mr-Benjamin how long have you worked on it
GrumpyCoder
@grumpycoder100
Jun 17 2017 08:14
Guys how do I make a text be in centre?
*center
Building my Tribute Page currently
Markus Ivancsics
@ivancsicsmarkus
Jun 17 2017 08:15
@grumpycoder100 css:text-align: center
kirontoo
@kirontoo
Jun 17 2017 08:15
@grumpycoder100 select the element and use text-align: center
alpox
@alpox
Jun 17 2017 08:34
@shivamg11000 What you are doing there is no ajax at all. It would be an unfinished way of doing jsonp
@shivamg11000 does anything speak against using jquery for the request?
shivam gupta
@shivamg11000
Jun 17 2017 08:36
@alpox I changed the code
alpox
@alpox
Jun 17 2017 08:36
@shivamg11000 It still looks like that - maybe you didn't save?
shivam gupta
@shivamg11000
Jun 17 2017 08:37
@alpox now i a trying with open weather api
alpox
@alpox
Jun 17 2017 08:37
@shivamg11000 That won't work because the open weather api has no free plan for https - and codepen allows only https now
shivam gupta
@shivamg11000
Jun 17 2017 08:37
Its working on my pc but not on codepen bcs on codepen http:// is not supported
Tring to do jsonp
alpox
@alpox
Jun 17 2017 08:38
@shivamg11000 yes. You cannot use open weather api
Not through codepen
@shivamg11000 If you want to go with jsonp, best is to use jquery for it - otherwise you have to do quite a setup for it
Nastya
@a4evo
Jun 17 2017 09:39

help me please! Whats wrong?
```function getForecast() {
var lat = "";
var lon = "";

if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        lat = position.coords.latitude;
        lon = position.coords.longitude;
        $(".lat").text(lat);
        $(".lon").text(lon);

        var linkAPI = '"https://api.darksky.net/forecast/dd5fb835130b53a3a354d5687b74f6c8/' + lat + ',' + lon + '"';
        $.getJSON(linkAPI, function(json) {
            //$(".api").text(linkAPI);
            $(".api").text(JSON.stringify(json));
        });
    });    
}        

}```
i get coords, link forms right, but i can't get json ((

alpox
@alpox
Jun 17 2017 09:58
@a4evo Its likely that you run into a CORS problem. Try adding ?callback=? to your url (At the end)
Nastya
@a4evo
Jun 17 2017 09:59
@alpox i love you! Thanks! It worked!!!!
CamperBot
@camperbot
Jun 17 2017 09:59
a4evo sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1155 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Jun 17 2017 10:01
@a4evo np :-)
Piyush Tiwari
@piyush805
Jun 17 2017 10:29
For random quote machine.
I want to get .JSON file as an array.
Here i found solution for that https://stackoverflow.com/questions/14540248/how-to-get-an-array-javascript-of-json-file
Then generate a random number and print array object from $(".message" ) in function(json).
How do i do later part? Does JQuery take input like array[num]?
Piyush Tiwari
@piyush805
Jun 17 2017 10:42
Anyone there?
Nastya
@a4evo
Jun 17 2017 10:52
@piyush805 i used quotesondesign.com, the give a random quote
Piyush Tiwari
@piyush805
Jun 17 2017 10:54
API v3.0 @a4evo ?
@piyush805 i don't see a need in array in this case, object is ok
I asked for help yesterday and someone who had done it told to use this as an array and print random object, so i was trying that
teevik
@teevik
Jun 17 2017 11:09
@piyush805 I would recomment using console.log to see how the array you fetch is built
Nastya
@a4evo
Jun 17 2017 11:09
@piyush805 it's already an array of objects, what's the problem?
Piyush Tiwari
@piyush805
Jun 17 2017 11:12
@a4evo I generate a random whole number, feed it to array, then how do i get it int the JQuery code where events trigger with click.
$("#getMessage").on("click", function(){
      // Only change code below this line.
      $.getJSON("https://gist.githubusercontent.com/dmakk767/9375ff01aff76f1788aead1df9a66338/raw/491f8c2e91b7d3b8f1c8230e32d9c9bc1a1adfa6/Quotes.json%2520", function(json) {
$(".message").html(array[num]);

});


});
There is array[num] is doesnt work^
teevik
@teevik
Jun 17 2017 11:13
The array[num] is just a standard object
so array[num].key gives the value for that key
Piyush Tiwari
@piyush805
Jun 17 2017 11:14
$(".message").html(JSON.stringify(json));
There was this which was returning entire page on click
Nastya
@a4evo
Jun 17 2017 11:14
@piyush805 don't you need to generate that num first? and what is array?
teevik
@teevik
Jun 17 2017 11:15
Json.stringify turns an object into a string
Piyush Tiwari
@piyush805
Jun 17 2017 11:15
@teevik I only know what all I learnt from challenges :worried:
Nastya
@a4evo
Jun 17 2017 11:15
$(".message").html(json[0]); try this
Piyush Tiwari
@piyush805
Jun 17 2017 11:15
@a4evo I generated number and array in Javascript panel
Nastya
@a4evo
Jun 17 2017 11:17
@piyush805 the num should be generated on click, as i understand. And you don't need a new array, json you get is already an array
teevik
@teevik
Jun 17 2017 11:20
Why do you fetch it twice?
Once in html and once in js
Piyush Tiwari
@piyush805
Jun 17 2017 11:22
@teevik Exactly! See, the click event happens in js and random number is generated in Html. I am not able to connect the two via code
teevik
@teevik
Jun 17 2017 11:22
You can just run all the code in js part, no difference
Piyush Tiwari
@piyush805
Jun 17 2017 11:23
https://stackoverflow.com/questions/14540248/how-to-get-an-array-javascript-of-json-file In this link i found how to get json file into an array to work with in html
Nastya
@a4evo
Jun 17 2017 11:25
sorry, use it $(".message").html(JSON.stringify(json[0])); and delete everything in <script> in html part
Piyush Tiwari
@piyush805
Jun 17 2017 11:26
@a4evo $(".message").html(json[0]); is not fetching object from json. Only printing the code for random number from inside div with id=message
Nastya
@a4evo
Jun 17 2017 11:26
it's just to have a look what's inside
teevik
@teevik
Jun 17 2017 11:27
The stackoverflow shows how to turn an object into array
You allready get an array in the json
Nastya
@a4evo
Jun 17 2017 11:27
$(".message").html(json[0].quote);
@piyush805 read more about arrays and objects
Piyush Tiwari
@piyush805
Jun 17 2017 11:30
@a4evo the previous one with stringify looked more correct but this ^ and that, both doing nothing.
Yeah :/
teevik
@teevik
Jun 17 2017 11:31
Yeah, you should read up on all the basic concepts
Did stringify work?
Piyush Tiwari
@piyush805
Jun 17 2017 11:31
@teevik no
Nastya
@a4evo
Jun 17 2017 11:31
@piyush805 i changed that in your codepen, and it works
teevik
@teevik
Jun 17 2017 11:31
Make sure you $.getJSON works
Ah
Piyush Tiwari
@piyush805
Jun 17 2017 11:33
@a4evo It's working
Nastya
@a4evo
Jun 17 2017 11:33
@piyush805 i know ))
Piyush Tiwari
@piyush805
Jun 17 2017 11:33
What about random number code?
Nastya
@a4evo
Jun 17 2017 11:34
just change 0 to random number @piyush805
Piyush Tiwari
@piyush805
Jun 17 2017 11:36
@a4evo @teevik Thank you so much! :smile: I'll read more
CamperBot
@camperbot
Jun 17 2017 11:36
piyush805 sends brownie points to @a4evo and @teevik :sparkles: :thumbsup: :sparkles:
:cookie: 134 | @teevik |http://www.freecodecamp.com/teevik
:cookie: 263 | @a4evo |http://www.freecodecamp.com/a4evo
Nastya
@a4evo
Jun 17 2017 11:36
@piyush805 good luck!
teevik
@teevik
Jun 17 2017 11:37
Lol, sorry for being confusing
Piyush Tiwari
@piyush805
Jun 17 2017 11:38
@teevik not at all
teevik
@teevik
Jun 17 2017 11:38
At phone
Piyush Tiwari
@piyush805
Jun 17 2017 11:39
Is doing challenges on phone very difficult? For a few days I've to go out and I don't want to break the streak
@teevik
rishabh81
@rishabh81
Jun 17 2017 11:42
Hi can someone help me understanding recompose library for hoc in react
cumibulat
@cumibulat
Jun 17 2017 11:43
hi all, i'm struggling in finishing the random quote machine.. i can complete the function / logic part, but i'm having hard time in the design part.. i still cannot figure out how to make a box and centre it in the page..
rishabh81
@rishabh81
Jun 17 2017 11:45
Are you using flexbox
??
You need do justifyContent:'center' @cumibulat
And flex:1
cumibulat
@cumibulat
Jun 17 2017 11:47
@rishabh81 haven't tried flexbox.. just struggle with row, panel, wells :D
i'll try flexbox then.. sorry, so we should use the BS4 or BS3 ? in codepen it will use BS4 , but i got some strange behavior when i working the tribute page.. that's why i always use BS3 then..
rishabh81
@rishabh81
Jun 17 2017 11:48
@cumibulat can you send screen shots of your css and design how it looks like
Ken Haduch
@khaduch
Jun 17 2017 11:52
@cumibulat - since the somewhat minimal lessons that FreeCodeCamp has are based on Bootstrap 3, I think that that is a better option to stick with. You can find documentation on BS4, including this https://v4-alpha.getbootstrap.com/migration/ migration document, but I would recommend using V3. Also, CodePen now updated to have a Quick Add for Bootstrap 3, instead of just having the default be V4, so that makes it a little easier to add in. Although it doesn't look like they added that same version-selection option for the bootstrap.js, so beware of that.
cumibulat
@cumibulat
Jun 17 2017 11:56
@rishabh81 err... i have to copy it to the codepen first, because i usually do it in atom locally :D .. but i will give it a try with flexbox..
@khaduch yeah i just check that codepen now have the BS3 option.. is flexbox is already available in BS3 ?
teevik
@teevik
Jun 17 2017 12:01
@piyush805 Probably, never tried it
Krishna Patel
@Shivkrupa9
Jun 17 2017 12:04
Can anyone tell me what is <meta charset="utf-8"> and what exactly meta means
Ravi Kishore Thella
@ravikishorethella
Jun 17 2017 12:06
@Shivkrupa9 it specifies the character encoding
https://www.w3schools.com/TAGs/att_meta_charset.asp
Ken Haduch
@khaduch
Jun 17 2017 12:10
@cumibulat - flexbox is basically a feature of CSS, so it is available in any browser that provides support for it. You can use it without using Bootstrap just by using the flexbox properties. An interesting way to get some exposure to it is with this "game" http://flexboxfroggy.com/ - it walks you through lessons on using the various flexbox settings.
Amanda
@alsmith101
Jun 17 2017 12:15
Hi fellow campers, I'm having trouble trying to centre a navigation bar. It sounds pretty simple, but whatever entering technique I try, it is lying slightly over to the right hand side. If anyone spots anything in my code that's incorrect I would highly appreciate it! Cheers https://codepen.io/smithtech/pen/PjWjKx/
Ken Haduch
@khaduch
Jun 17 2017 12:18
@alsmith101 - there is some padding of 40px in there somewhere- trying to sort out where it is. It might just be a setting on the list?
Amanda
@alsmith101
Jun 17 2017 12:22
@khaduch ah I see, you're right! I took off the ul and just switched it for a regular div and it worked
Ken Haduch
@khaduch
Jun 17 2017 12:22
@alsmith101 - there is 40px padding on the ul element. If you go into your CSS settings for ul and add padding-left: 0; it will override that. Not sure if you want to affect all of your UL elements with that, maybe you can add it to a class for that ul?
Amanda
@alsmith101
Jun 17 2017 12:23
@khaduch cool I'll give that a go, thanks for your help
CamperBot
@camperbot
Jun 17 2017 12:23
alsmith101 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3005 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Jun 17 2017 12:23
@alsmith101 - you're welcome. Good luck!
Toby J. Henderson
@Mr-Henderson
Jun 17 2017 12:57
hello please help with my personal portfolio site... heres what I did... Im basically copying aother site I built from Udemy and converting it to my portfolio site... The site renders great on GIT Hub yet when I open the files in brackets it has a bunch of broken images... I currently have to repos one is the origional travel-site and one is camp-code my portfolio because I camp and code things while camping everywhere... any way please help
ibtehaj raza
@ibtehajraza
Jun 17 2017 12:59
hi there
there is a problem i need to ask
Toby J. Henderson
@Mr-Henderson
Jun 17 2017 12:59
see its a pretty awesome template displaying the use of advanced css and html 3 it seems way better then using bootstrap yet is quite a bit more tough
ibtehaj raza
@ibtehajraza
Jun 17 2017 13:00
jQuery is not working in code pen
Toby J. Henderson
@Mr-Henderson
Jun 17 2017 13:00
ibtehaj raza
@ibtehajraza
Jun 17 2017 13:00
i have enabled it but still no luck
i am at challenge number 1
Toby J. Henderson
@Mr-Henderson
Jun 17 2017 13:00
@ibtehajraza hmm Im sure you cleared cache already and refresh
thats all I can tell you here
ibtehaj raza
@ibtehajraza
Jun 17 2017 13:01
okey let me try
Toby J. Henderson
@Mr-Henderson
Jun 17 2017 13:01
lol i mean css3 and html 5
hmm challenge #1 let me check that
ibtehaj raza
@ibtehajraza
Jun 17 2017 13:03
scripts are not working
Toby J. Henderson
@Mr-Henderson
Jun 17 2017 13:04
hmmm look on youtube there are 3 or 4 guys doing entire challenges all of them... copy paste challenge name... problem solved
I did this one and can copy paste what i did
ibtehaj raza
@ibtehajraza
Jun 17 2017 13:04
ooh okey thanks
Toby J. Henderson
@Mr-Henderson
Jun 17 2017 13:04
np
Veronica Eulenberg
@HappyViki
Jun 17 2017 13:04
How do I get json from wikipedia?
ibtehaj raza
@ibtehajraza
Jun 17 2017 13:04
no but i dont want to copy past
thanks though
Toby J. Henderson
@Mr-Henderson
Jun 17 2017 13:04
what challenge number?
for the JSON wikipedia was that the maps challenge
can you post code here
with back ticks (shift enter) copy paste code then 3 more back ticks
<script>
  $(document).ready(function() {
    $('button').addClass("animated bounce");
  });
</script>

<!-- Only change code above this line. -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>
also dont forget to click chat mode this will allow you to post terminal
Veronica Eulenberg
@HappyViki
Jun 17 2017 13:08
@Mr-Henderson I just need an example link. I can’t find one anywhere. I need a link that gives me the json of a wikipedia page.
Tom
@moT01
Jun 17 2017 13:48
https://en.wikipedia.org/w/api.php?action=query&format=json&generator=random&grnnamespace=0&grnlimit=20&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=6&exlimit=max&callback=? this is what i ended up with for my random wikis after playing with it for quite a while @HappyViki
Veronica Eulenberg
@HappyViki
Jun 17 2017 13:52
@moT01 ooooh thanks
CamperBot
@camperbot
Jun 17 2017 13:52
happyviki sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 725 | @mot01 |http://www.freecodecamp.com/mot01
Lukas
@thegreatkoe
Jun 17 2017 14:16

Hey guys,

i just finished my tribute-page.
I know there are still a few bugs in the code, like the pictures or the the centering of the iframe when scaling the browser window down.
I would really appreciate your feedback. on the page and if you have some tips concerning the bugs please let me know (:

Project link: https://codepen.io/thegreatkoe/full/BZaVGr/

CallMeOrange
@EgnaroDev
Jun 17 2017 14:17
@thegreatkoe the page looks fine to me and nice project
Lukas
@thegreatkoe
Jun 17 2017 14:18
@MCTwoDigitZero thanks mate (:
CamperBot
@camperbot
Jun 17 2017 14:18
thegreatkoe sends brownie points to @mctwodigitzero :sparkles: :thumbsup: :sparkles:
:cookie: 164 | @mctwodigitzero |http://www.freecodecamp.com/mctwodigitzero
CallMeOrange
@EgnaroDev
Jun 17 2017 14:20
@thegreatkoe Is this first time making a project? have you experienced html/css before starting fCC?
Tom
@moT01
Jun 17 2017 14:20
@thegreatkoe some sort of goofy feeling behavior using the vh, but it seems to work good enough
Ravi Kishore Thella
@ravikishorethella
Jun 17 2017 14:20
@thegreatkoe looks good :clap: good work
Lukas
@thegreatkoe
Jun 17 2017 14:23

@MCTwoDigitZero this is my first time making a project!
@moT01 yeah I know, but it was the only way i got the single-page layout to work for me :/ . Would you say working with percentage is the better way?

@ravikishorethella thank you (:

CamperBot
@camperbot
Jun 17 2017 14:23
thegreatkoe sends brownie points to @mctwodigitzero and @mot01 and @ravikishorethella :sparkles: :thumbsup: :sparkles:
:warning: thegreatkoe already gave mctwodigitzero points
:cookie: 726 | @mot01 |http://www.freecodecamp.com/mot01
:cookie: 669 | @ravikishorethella |http://www.freecodecamp.com/ravikishorethella
Ravi Kishore Thella
@ravikishorethella
Jun 17 2017 14:24
@thegreatkoe :+1:
Thomas Lawless
@tlawless94
Jun 17 2017 14:24
Would anyone know why this code generates an infinite number of arrays? newBoard is a tic tac toe board state represented by an array like [0,0,0,0,1,0,2,0,0] with 1's representing a human player's move and 2 a cpu's. Why are my return statements not stopping the recursive calls (this is what I assume is happening)?
function AIMove (newBoard) {

  if (checkWinState(newBoard, 1)){
    console.log("winstate1");
    return -10 + depth;
  } else if (checkWinState(newBoard, 2)){
    console.log("winstate2");
    return 10 - depth;
  } else if (checkStalemate(newBoard)){
    console.log("winstate3");
    return 0;
  }

  depth++;
  var openSpaces = getOpenSpaces(newBoard);
  //not working
  if (playerTurnStatus){
    for (var i = 0; i < openSpaces.length; i++){
      var newBoardCopy = newBoard.slice();
      newBoardCopy[openSpaces[i]] = 1;
      possibleNextStates.push(newBoardCopy);
    }
  } else {
    for (var i = 0; i < openSpaces.length; i++){
    var newBoardCopy = newBoard.slice();
    newBoardCopy[openSpaces[i]] = 2;
    possibleNextStates.push(newBoardCopy);
    }
  }
  playerturnStatus = playerTurnStatus? false: true;
  console.log(possibleNextStates);
  possibleNextStates.forEach(function(state){
    AIMove(state)
  });

}
CallMeOrange
@EgnaroDev
Jun 17 2017 14:31
@thegreatkoe if thats true then you are off to good start
Gulsvi
@gulsvi
Jun 17 2017 14:31
@tlawless94 Just a guess, but could it be the lower case 't' in playerturnStatus = playerTurnStatus? false: true;
Seems playerTurnStatus isn't getting set to false
CallMeOrange
@EgnaroDev
Jun 17 2017 14:32
@SkyC0der I stayed awaken for two days
1.5 days maybe
Lukas
@thegreatkoe
Jun 17 2017 14:32
@MCTwoDigitZero but i have to admit i had to google quite a lot ^^
CallMeOrange
@EgnaroDev
Jun 17 2017 14:32
I see
Gulsvi
@gulsvi
Jun 17 2017 14:32
lol @MCTwoDigitZero why? :)
Thomas Lawless
@tlawless94
Jun 17 2017 14:32
thanks @SkyC0der
CamperBot
@camperbot
Jun 17 2017 14:32
tlawless94 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1749 | @skyc0der |http://www.freecodecamp.com/skyc0der
CallMeOrange
@EgnaroDev
Jun 17 2017 14:33
@SkyC0der I didnt want to sleep lol during watching anime I realized it was already morning
Then went to work on tribute page and I was like "Okay I finished all preparations for tomorrow"
Gulsvi
@gulsvi
Jun 17 2017 14:34
Nice :)
CallMeOrange
@EgnaroDev
Jun 17 2017 14:34
What? tomorrow?
Gulsvi
@gulsvi
Jun 17 2017 14:34
When you hear the birds and you haven't gone to sleep yet....
CallMeOrange
@EgnaroDev
Jun 17 2017 14:34
L
1/2 of halfway there
Lukas
@thegreatkoe
Jun 17 2017 14:35
@MCTwoDigitZero looks really nice!
Gulsvi
@gulsvi
Jun 17 2017 14:36
Very good :)
CallMeOrange
@EgnaroDev
Jun 17 2017 14:36
@thegreatkoe thanks
CamperBot
@camperbot
Jun 17 2017 14:36
mctwodigitzero sends brownie points to @thegreatkoe :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @thegreatkoe |http://www.freecodecamp.com/thegreatkoe
CallMeOrange
@EgnaroDev
Jun 17 2017 14:36
@SkyC0der thanks
CamperBot
@camperbot
Jun 17 2017 14:36
mctwodigitzero sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1750 | @skyc0der |http://www.freecodecamp.com/skyc0der
CallMeOrange
@EgnaroDev
Jun 17 2017 14:36
I think I will be done today then move on to portfolio
@SkyC0der Do you know how to set up website?
Gulsvi
@gulsvi
Jun 17 2017 14:37
I did it once, with DNS settings, apache, etc...
Lukas
@thegreatkoe
Jun 17 2017 14:37
i think i will skip the portfolio for now and do it when i have already done a few more projects (:
Gulsvi
@gulsvi
Jun 17 2017 14:37
Or do you mean just on github?
CallMeOrange
@EgnaroDev
Jun 17 2017 14:38
Like set up your own website
About you, protfolio, etc..
on github? what are you talking about? :/
cumibulat
@cumibulat
Jun 17 2017 14:38
@khaduch thanks a bunch.. will get look into it :D
CamperBot
@camperbot
Jun 17 2017 14:38
cumibulat sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3006 | @khaduch |http://www.freecodecamp.com/khaduch
Gulsvi
@gulsvi
Jun 17 2017 14:39
"website" is a place where people go to look at web pages, hosted on a server
CallMeOrange
@EgnaroDev
Jun 17 2017 14:39
Yeah that...
Gulsvi
@gulsvi
Jun 17 2017 14:39
Do you mean the portfolio project?
CallMeOrange
@EgnaroDev
Jun 17 2017 14:39
Maybe but I want to try to set up my own website
I could but I dont know how to change url :/
Gulsvi
@gulsvi
Jun 17 2017 14:39
Yeah, I set up a server once using digital ocean. It used linux and apache
CallMeOrange
@EgnaroDev
Jun 17 2017 14:40
@SkyC0der Do you have one? Can I see it?
Gulsvi
@gulsvi
Jun 17 2017 14:40
No, it was $5/month and I canceled it
CallMeOrange
@EgnaroDev
Jun 17 2017 14:40
oh
Gulsvi
@gulsvi
Jun 17 2017 14:40
Don't really need it, but wanted to try it
CallMeOrange
@EgnaroDev
Jun 17 2017 14:40
I wish we could set up our own for free...
code... no need for money
code domains somehow... beyond my reach
Gulsvi
@gulsvi
Jun 17 2017 14:41
You can use github pages
CallMeOrange
@EgnaroDev
Jun 17 2017 14:41
What is that?
Gulsvi
@gulsvi
Jun 17 2017 14:41
but no https if you use a custom domain
CallMeOrange
@EgnaroDev
Jun 17 2017 14:41
http?
That's my awesome github pages site lol
CallMeOrange
@EgnaroDev
Jun 17 2017 14:41
lmao
Did you set that up just now?
Gulsvi
@gulsvi
Jun 17 2017 14:42
No, I set that up a while ago
CallMeOrange
@EgnaroDev
Jun 17 2017 14:42
oh
Gulsvi
@gulsvi
Jun 17 2017 14:42
if you create a repository called MCTwoDigitZero.github.io, you can add a index.html file to it and have a web page
CallMeOrange
@EgnaroDev
Jun 17 2017 14:42
Do you require github in domain?
I see
Gulsvi
@gulsvi
Jun 17 2017 14:42
You can buy your own domain, and use that instead ^^ but I haven't done it. They have good instructions
CallMeOrange
@EgnaroDev
Jun 17 2017 14:43
@SkyC0der thanks I will code portfolio then add it to that page
CamperBot
@camperbot
Jun 17 2017 14:43
mctwodigitzero sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: mctwodigitzero already gave skyc0der points
Tom
@moT01
Jun 17 2017 14:43
@thegreatkoe im not sure what way is better, ..ive used both, they both work
CallMeOrange
@EgnaroDev
Jun 17 2017 14:44
Jeez I think my leg has gotten weaker
I think this is what happen you stay awaken for long time
cumibulat
@cumibulat
Jun 17 2017 14:45
anyone can help me with the random quote UI ? how can i make a box in center of my page ?
CallMeOrange
@EgnaroDev
Jun 17 2017 14:45
I should test if I can do back squat my max 225 lbs in this condition..
Im going back working on my project
Gulsvi
@gulsvi
Jun 17 2017 14:47
Don't do squats without sleep :p
@cumibulat You can use a <div>, give it a border, a width, and left/right auto margins to center it.
If you search on Stack Overflow, there are lot of example of putting a box in the center of a page @cumibulat
CallMeOrange
@EgnaroDev
Jun 17 2017 14:49
@SkyC0der yeah lol Pretty sure I will faint if I do usually routine
Panayiotis Mangafas
@mangafas
Jun 17 2017 14:59
hey, im kinda stuck on the Use CSS Animation to Change the Hover State of a Button task. This is my code so far and i dont know what i do wrong.

<style>
  button {
    border-radius: 5px;
    color: white;
    background-color: #4791d0;
    padding: 5px 10px 8px 10px;
  }

  button:hover {
    animation-name: background-color;
    animation-duration: 1000ms;
  }
  @keyframes background-color {
    100% {
      animation-name: 4791d0;

    }
  }


</style>

<button>Register</button>
CallMeOrange
@EgnaroDev
Jun 17 2017 14:59
Have cat got all of your tongues? (Fingers)
Sigh Im too late
@mangafas are you on beta?
Panayiotis Mangafas
@mangafas
Jun 17 2017 15:00
yes
CallMeOrange
@EgnaroDev
Jun 17 2017 15:00
Sorry I wont be able to help with CSS animations
I have no knowledge of it :/
Panayiotis Mangafas
@mangafas
Jun 17 2017 15:01
@MCTwoDigitZero ohh okay... thank for the interest though
CamperBot
@camperbot
Jun 17 2017 15:01
mangafas sends brownie points to @mctwodigitzero :sparkles: :thumbsup: :sparkles:
:cookie: 165 | @mctwodigitzero |http://www.freecodecamp.com/mctwodigitzero
shuja sayyad
@mesut-shuja
Jun 17 2017 15:03
what all libraries to add for bootstrap in notepad ?
i m not getting the same result with notepad?
cumibulat
@cumibulat
Jun 17 2017 15:07
@SkyC0der it do really help.. haha... thank you very much
CamperBot
@camperbot
Jun 17 2017 15:07
cumibulat sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1751 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Jun 17 2017 15:09
@mesut-shuja You can't really add bootstrap to notepad. It's just a text editor, not a HTML editor.
These are the bootstrap files: https://www.bootstrapcdn.com/
Mauricio Salas
@MauriSg99
Jun 17 2017 15:31
@mangafas in your button:hover you didn't add any properties, for example: background: #000000;
You have the animation but nothing to animate
luccifer00
@luccifer00
Jun 17 2017 15:36
hi everyone, i have to make a personal porfolio webpage to get the next level..... https://codepen.io/FreeCodeCamp/full/YqLyXB/. i have to make something like this.... but in before lessons didn't teach us how to make something like that.....
anyone can help me on how or where to look for start?
luccifer00
@luccifer00
Jun 17 2017 15:43
?
cumibulat
@cumibulat
Jun 17 2017 15:47
hi guys, i'm working on my random quote machine.. i'm having difficulties when i want to set my quote to be multiline when it's too long to the box.. i have use white-space: pre; and word-wrap: break-word; but none of it works
Mauricio Salas
@MauriSg99
Jun 17 2017 15:55
@luccifer00 Don't rely only on what they teach us here, investigate and learn how the code is made :) that's what I did with mine.
Ankit Mehta
@ankitmehta1
Jun 17 2017 15:55
I want to add image form my disk , what should i put in the src?
from*
Mauricio Salas
@MauriSg99
Jun 17 2017 15:56
In Codepen?
Ankit Mehta
@ankitmehta1
Jun 17 2017 15:56
yup
Kaz Baig
@kbaig
Jun 17 2017 16:00
@cumibulat could we see the code
Gulsvi
@gulsvi
Jun 17 2017 16:00
@ankitmehta1 Lots of people here use https://postimage.io
Mauricio Salas
@MauriSg99
Jun 17 2017 16:00
The best way to do it is to upload the image to the cloud: Dropbox, Google Drive, iCloud... and then copy the link and paste it in your code <img src="...">
Or that haha @SkyC0der
Ankit Mehta
@ankitmehta1
Jun 17 2017 16:02
@SkyC0der @MauriSg99 ok, thank you
CamperBot
@camperbot
Jun 17 2017 16:02
ankitmehta1 sends brownie points to @skyc0der and @maurisg99 :sparkles: :thumbsup: :sparkles:
:cookie: 123 | @maurisg99 |http://www.freecodecamp.com/maurisg99
:star2: 1754 | @skyc0der |http://www.freecodecamp.com/skyc0der
Kaz Baig
@kbaig
Jun 17 2017 16:02
@luccifer00 The lessons are meant to give you the basics so that you can research and learn on your own! The idea is that you'll learn more this way over if they held your hand the whole way through :)
@luccifer00 You should decide on a basic design and try to ask for help in achieving specific elements here
Josh Beasley
@joshbeasley
Jun 17 2017 16:10
Can anyone find the problem with my Javascript in the Wikipedia Viewer project. The data array isn't showing up in the console, which means my success function isn't being executed. Please help!
Gulsvi
@gulsvi
Jun 17 2017 16:11
@joshbeasley Check your browser's debug console for the error - not the one in codepen.
One small change needed to your code, then everything will work as expected
Usama
@mUsamaDev
Jun 17 2017 16:12

Hey guys!
Can you guide me how do we make these type of headers/slider?

https://www.quantopian.com

Josh Beasley
@joshbeasley
Jun 17 2017 16:12
@SkyC0der How do I check that?
with adobe muse or something like that?
Gulsvi
@gulsvi
Jun 17 2017 16:14
@joshbeasley Ctrl+Shift+J on Windows/Linux, Command+Option+J on Mac.
Josh Beasley
@joshbeasley
Jun 17 2017 16:16
@SkyC0der thanks, i needed to change http to https
CamperBot
@camperbot
Jun 17 2017 16:16
joshbeasley sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1755 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Jun 17 2017 16:16
Yep, that was it
Kaz Baig
@kbaig
Jun 17 2017 16:19
@mUsamaDev I'm sure you'd be able to adapt something from https://www.youtube.com/playlist?list=PLqGj3iMvMa4IyCbhul-PdeiDqmh4ooJzk
Usama
@mUsamaDev
Jun 17 2017 16:34

@kbaig thanks for the link, I have already watched a few videos from this guy. He's awesome! He's teaching the parallax effect. I am more interested in the animations using JS, you see the animations are changing with time. I am confused that how can this be done? I mean using by vanilla JS its very difficult, or by some tool or library?

Thanks!

CamperBot
@camperbot
Jun 17 2017 16:34
musamadev sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 306 | @kbaig |http://www.freecodecamp.com/kbaig
Matthew Pavouris
@mattpavo
Jun 17 2017 16:36

Hey guys. I wan to hide the "Random article" button whenever a query with a character value greater than 1 is entered, but this 'if, else if' statement I'm using in the .click function is not doing the trick:

    if (searchVal.split('').length > 0) {
      $("rando").hide();
    }
    else if (searchVal.split('').length < 1) {
      $("rando").show();
    }

Any hints would be appreciated.
https://codepen.io/mattpavo/pen/BZoRrz

greater than 0* that is
Pradeep
@PRADEEPGUNDLURU
Jun 17 2017 16:40

var myStr='FirstLine\n\"SecondLine\"\rThirdLine'; // Change this line

here it shows the error as "myStr should have encoded text with the proper escape sequences and no spacing."

pls help me out
Zaurbek Zhakupov
@zzhakupov
Jun 17 2017 16:45
Hello guys, I finally completed last back-end Pinterest clone project. Can you please give some feedback or give some tips what to improve, change. Github: https://github.com/zzhakupov/djinterest and live demo https://djinterest.herokuapp.com
Kaz Baig
@kbaig
Jun 17 2017 16:50
@mUsamaDev he does do the kind of stuff you're asking about using vanilla in some other videos. Have you seen his Design + Code a website in 12 hours series? He did something similar-ish to the finance website you linked in the youtube section of the series
Usama
@mUsamaDev
Jun 17 2017 16:55
@kbaig no, let me have a look, thanks :)
CamperBot
@camperbot
Jun 17 2017 16:55
musamadev sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:warning: musamadev already gave kbaig points
Gulsvi
@gulsvi
Jun 17 2017 17:10
@mattpavo If the id of the button is id="rando" you need to select it with $('#rando') instead of $('rando')
This is also a little simpler:
$("#rando").show();        
if (searchVal) $("#rando").hide();
John Meredith
@johnmeredith95
Jun 17 2017 17:15
Hey! Working on my tribute page and having some issues with the Bootstrap columns. It looks fine less on a screen greater than 1200px wide, but once you get below a certain width the text in my first row starts overlapping with the first image, and the last image moves outside of the grey "jumbotron" div. Any advice? https://codepen.io/johnmeredith95/pen/VWmyJe
Vali
@valimikayilov
Jun 17 2017 17:18
guys can you help with this project: https://codepen.io/Geek-Killer/pen/eRBxew
Matthew Pavouris
@mattpavo
Jun 17 2017 17:22
@SkyC0der Ugh! I often make the mistake of excluding the "#" when selecting IDs with jquery. Thank you Sky.
CamperBot
@camperbot
Jun 17 2017 17:22
mattpavo sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1756 | @skyc0der |http://www.freecodecamp.com/skyc0der
Hello911
@Hello911
Jun 17 2017 17:24
@SkyC0der @khaduch Thank you. I got so frustrated I couldnt even see the semicolon
CamperBot
@camperbot
Jun 17 2017 17:24
hello911 sends brownie points to @skyc0der and @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1757 | @skyc0der |http://www.freecodecamp.com/skyc0der
:star2: 3007 | @khaduch |http://www.freecodecamp.com/khaduch
Hemakshi Sachdev
@hemakshis
Jun 17 2017 17:51
@johnmeredith95 either you have to give both the image and para same width i.e. col-md-6 or try reducing the width of your pic so that it fits in the assigned width of col-md-4..
John Meredith
@johnmeredith95
Jun 17 2017 17:59
Awesome, thanks @hemakshis ! Shrinking the img width helped. Now I'm just unsure why the first image stays within the div when the screen width shrinks, but my second img moves outside of the div instead of the column shifting with the div when the screen shrinks?
CamperBot
@camperbot
Jun 17 2017 17:59
johnmeredith95 sends brownie points to @hemakshis :sparkles: :thumbsup: :sparkles:
:cookie: 264 | @hemakshis |http://www.freecodecamp.com/hemakshis
Clever CSS Hax for that fixed navbar :D
Hemakshi Sachdev
@hemakshis
Jun 17 2017 18:06
@johnmeredith95 again same issue.. try reducing the width again so that it fits in the div
John Meredith
@johnmeredith95
Jun 17 2017 18:09
Yeah... I realized as soon as I sent that. Thanks!
Paul
@candlefish
Jun 17 2017 18:10
@johnmeredith95 You can also make a class or id for your image and in its CSS use width:100%. This will make images resize to fit the Bootstrap columns properly.
John Meredith
@johnmeredith95
Jun 17 2017 18:12
Thanks @candlefish ! I think that's what I thought bootstrap columns did automatically for some reason.
CamperBot
@camperbot
Jun 17 2017 18:12
johnmeredith95 sends brownie points to @candlefish :sparkles: :thumbsup: :sparkles:
:cookie: 239 | @candlefish |http://www.freecodecamp.com/candlefish
Paul
@candlefish
Jun 17 2017 18:16
@johnmeredith95 I ran into the same problem and agree with you that Bootstrap should resize images to fit columns by default.
Hamza Saleemi
@Azmah21
Jun 17 2017 18:38
hey guys!
@Azmah21
could someone help me with adding an HTML5, CSS3 and Jquery logo to my portfolio page?
https://codepen.io/Azmah21/pen/gRbQrX
I'm trying to add it in the languages I know section
Nikki L.R.
@nikkilr88
Jun 17 2017 18:40
Could anyone help me with React? I am working on the Recipe Box project, and I can't figure out how to take array items from state and output them as list items.
Roxroy
@roxroy
Jun 17 2017 18:46
@nikkilr88 , the map function would be useful in this case for example,
{props.recipe.ingredients.map(ingredient =>
<li key={id++}>{ingredient}</li>
)}
Nikki L.R.
@nikkilr88
Jun 17 2017 18:50
@roxroy Ah, you messaged me here too. So, like I said... I'm not doing this in render, so I'm not sure what to do.
I have a for loop and when I console.log it, everything looks fine, but it shows up as "[object HTMLUListElement]"
Roxroy
@roxroy
Jun 17 2017 18:54
@nikkilr88 , let me see the code, what is the link?
Ashley Owens
@yelhsa
Jun 17 2017 18:57
@Azmah21 that looks amazing!
Nikki L.R.
@nikkilr88
Jun 17 2017 18:59
@roxroy I think I got it, but it seems kind of messy... Haha. One sec
Hamza Saleemi
@Azmah21
Jun 17 2017 19:02
@yelhsa thanks
Roxroy
@roxroy
Jun 17 2017 19:03
@nikkilr88 , Although it works, you should create a separate component to render the ingredients, instead of directly handling and manipulating the DOM
 var ul = document.createElement("ul");
    for (var i = 0; i < this.state.ingredientsArr.length; i++ ) {
        var li = document.createElement("li");
        li.innerHTML = this.state.ingredientsArr[i];
        ul.appendChild(li);    }
Nikki L.R.
@nikkilr88
Jun 17 2017 19:04
@roxroy I'm still pretty new at this... slowly figuring things out. I don't know how to do that and have it repeat over for each recipe.
Can I render an instance of a component with an onClick function?
Riley
@Riley1435
Jun 17 2017 19:09
My temperature convert button isn't working and i am have trouble sourcing the problem.
Andrew Hickman
@ahickman3
Jun 17 2017 19:09
how would i access one of the quotes? cant seem to figure that out
should be a simple solution i assume
Roxroy
@roxroy
Jun 17 2017 19:11

@nikkilr88 , in your RecipeBox, pass the recipe as a prop , then loop over the li to print the ingredients. Eg {props.recipe.ingredients.map(ingredient =>

<li key={id++}>{ingredient}</li>
)}

Paul
@candlefish
Jun 17 2017 19:12
@Geek-Killer I'm not exactly sure what you want, but here's some suggestions for your FreeCodeCamp codepen project. You should take out all the <br> tags in your paragraphs. If you use good CSS, everything will wrap nicely. Try using text-align: justify in your CSS for the p tag. Immediately after your jumbotron closing div, add a <div class="container"> and put the closing </div> at the very end of your html. In your CSS, give the container class a max-width of something like 800px. This will be nice for readability. Also, by default, the Bootstrap container class will put a small margin on the left and right of everything so your text and images don't go all the way to the edges of the screen. Hope this helps a little.
Moisés Man
@moigithub
Jun 17 2017 19:12
quotes is an array...of objects
using the object name + the key property.. u access the values... @fullmetal7777
Roxroy
@roxroy
Jun 17 2017 19:14
@Riley1435 , you should use just 1 $(document).ready for the page. Remove the one from $("#weatherGrab")
Andrew Hickman
@ahickman3
Jun 17 2017 19:14
@moigithub havnt done much with objects, so if something doesnt look right, its probably because im only slightly sure of what im doing lol
Nikki L.R.
@nikkilr88
Jun 17 2017 19:15
@roxroy Yeah, I know how to use map and render li elements. I don't understand how to make this repeat whenever the user adds a new recipe. I don't know if I am explaining myself well enough. Sorry.
Andrew Hickman
@ahickman3
Jun 17 2017 19:15
@moigithub bascially, need to access each name individually, and each name will have multiple quotes. So itl be a random number, and thatl determine the name. Then another random number determining qhich quote is picked
Moisés Man
@moigithub
Jun 17 2017 19:15
to access arrays elements.. u use brackets and some number/index
arr[0] will access the first element.. on ur quotes case.. this is an object with a single property named "mario"
@fullmetal7777
once u have the object.. using this property u can access its value (which is an array of strings)
teevik
@teevik
Jun 17 2017 19:15
The render() method gets run every time state is changed @nikkilr88
Andrew Hickman
@ahickman3
Jun 17 2017 19:16
i can get the name + the quotes, its getting a specific quote for the name that i cant do. Ive done quotes[1].1, quoted[1][1], etc and notta
Roxroy
@roxroy
Jun 17 2017 19:16
@Riley1435 , also, the document-ready function is not being used correctly, refer to https://learn.jquery.com/using-jquery-core/document-ready/. Use just one for the page and embed the functions within it.
Riley
@Riley1435
Jun 17 2017 19:17
@roxroy okay, anything else you notice?
Nikki L.R.
@nikkilr88
Jun 17 2017 19:17
@teevik I got that... This project just isn't clicking, though. I really don't know how to explain it.
Andrew Hickman
@ahickman3
Jun 17 2017 19:17
@moigithub mind typing out how i would exactly? still not sure what you mean
Nikki L.R.
@nikkilr88
Jun 17 2017 19:17
Do I have to set up localStorage first?
Moisés Man
@moigithub
Jun 17 2017 19:18
@fullmetal7777 to access ARRAYS u use brackets and some index
to access OBJECTS u use the object name + the key/property using dot or bracket notation
arrays is one thing.. object is another thing
arrays are identified by [] :point_left: squaare brackets
objects are identified by { } :point_left: curly brackets
Andrew Hickman
@ahickman3
Jun 17 2017 19:18
@moigithub so, im able to access the object that i want.
teevik
@teevik
Jun 17 2017 19:18
@nikkilr88 If you want it to change when the user adds a new recipe, you can just update state with all the recipes as the user inputs them, and the render method will be automatically run if needed
Andrew Hickman
@ahickman3
Jun 17 2017 19:19
@moigithub so basically ive created a object that contained an array of objects, which each object containing an array or quotes right?
array of quotes*
Nikki L.R.
@nikkilr88
Jun 17 2017 19:19
It's just not clicking... I know it re-renders when the state changes, but I don't get how to have the previously added recipe to remain in the RecipeBox after re-rendering.
Moisés Man
@moigithub
Jun 17 2017 19:20
@fullmetal7777 u created this
quotes = [ ... ] <-- see squares there ? thats an array
this quotes contains {}
like this quotes = [ {...}, {...} ] <-- objects inside the array
soo to access objects values.. FIRST u need to get the array element (which is an object)
THEN once u have the object.. u can access its values
Andrew Hickman
@ahickman3
Jun 17 2017 19:20
@moigithub im pretty familiar with te basics of programming, i use c a bunch in my major, but objects is the only thing that is somewhat new to me
@moigithub i took a java class, but its been like 2 years lol
teevik
@teevik
Jun 17 2017 19:21
@nikkilr88 When you update the props of something, it also re renders
Roxroy
@roxroy
Jun 17 2017 19:21
@Riley1435 , $("#weatherGrab").on("click", its not being called. But it should work after addressing the document ready issue.
Riley
@Riley1435
Jun 17 2017 19:22
i deleted the $(document).ready() before the function
teevik
@teevik
Jun 17 2017 19:22
So could just pass all the recipes as props
Ashutosh Guha
@freecodecampcoderash
Jun 17 2017 19:22
help me guys...... look at the full screenshot and where it is wrong please tell me
Moisés Man
@moigithub
Jun 17 2017 19:22
@fullmetal7777 quotes[0] return the first element which is an object ---> {mario: [....]}
Andrew Hickman
@ahickman3
Jun 17 2017 19:22
@moigithub thats the part i dont get, accessing the specific objects values lol i figured quotes[1][x] would do it since it the fox object has an array of strings
Ashutosh Guha
@freecodecampcoderash
Jun 17 2017 19:22
2017-06-18.png
Moisés Man
@moigithub
Jun 17 2017 19:23
var theFirstObject = quotes[0]
theFirstObject.mario <--- will give u the array value inside this object ["Oh yea", "...."] @fullmetal7777
or using bracket notation theFirstObject["mario"]
Andrew Hickman
@ahickman3
Jun 17 2017 19:23
@moigithub yeah i got that already, it was in the picture lol
Moisés Man
@moigithub
Jun 17 2017 19:24
soo its NOT quotes[0][0]
but quotes[0]["mario"] if u combine both things i said above on a single line @fullmetal7777
or quotes[0].mario
Ashutosh Guha
@freecodecampcoderash
Jun 17 2017 19:24
@moigithub @fullmetal7777 help
Riley
@Riley1435
Jun 17 2017 19:24
@roxroy do i need to use .getJSON when setting JSON data to variables that i use in the function?
Nikki L.R.
@nikkilr88
Jun 17 2017 19:24
@teevik I am using a controlled form. It updates with an onChange function. I would't know how to go about that.
Andrew Hickman
@ahickman3
Jun 17 2017 19:25
@freecodecampcoderash you can generally google each lesson and find ayoutube video over it. I had to do it a couple time for some weird work arounds that fcc expected. Just do that
Roxroy
@roxroy
Jun 17 2017 19:25
@Riley1435 , that part works fine, so leave it as is.
Andrew Hickman
@ahickman3
Jun 17 2017 19:26
@moigithub AHHHHHH there it is lol ok that did it. Ok ima look over it and see if i understand. That you very much man, this object oriented thing messes with my head sometimes lol ive always used c and c++
Riley
@Riley1435
Jun 17 2017 19:26
@roxroy but between $("#weatherGrab") and my if else statement, should i add $.getJSON ?
James Lindsay
@jm535
Jun 17 2017 19:26
Hi all, working on the portfolio challenge. 3 hours now and I can't get the hamburger menu to expand ... Here is the code: https://codepen.io/Jm535/pen/ygZKXN/ If anyone could have a look that would be great :smile:
Andrew Hickman
@ahickman3
Jun 17 2017 19:28
@moigithub so basically quoted[1] is that whole part, basically {fox: [...]} considered as one object. Makes perfect sense
Roxroy
@roxroy
Jun 17 2017 19:28
@Riley1435 , let me take look.
Andrew Hickman
@ahickman3
Jun 17 2017 19:28
@jm535 hamburger menu?
@jm535 i can barely read anything because your font color matches the background lol might wanna consider changing that to white temporarily just so you can see everything
James Lindsay
@jm535
Jun 17 2017 19:29
@fullmetal7777 I do believe thats what they call it.
Yeah, I know, but I am just working on the navbar right now
teevik
@teevik
Jun 17 2017 19:29

@nikkilr88
So you'll have a main component, and inside have an recipe list component and the form.

In the main component you would have a list of all recipes as state, and then once the form gets changed you would change the state to include the new recipe.

In the recipe list you pass the recipes as props, which changes automatically once you change the state in main component.

You could alternatively start using a state framework like redux or reflux, but they can be pretty advanced and often not needed
luccifer00
@luccifer00
Jun 17 2017 19:31
hey there, can someone helpme. i am trying to put a title in the middle of screen.... i just get to center in the top. maybe is becouse i am trying to put a Parallax Scrolling background.... any idea?
Mauricio Salas
@MauriSg99
Jun 17 2017 19:32
Try padding-top
teevik
@teevik
Jun 17 2017 19:33
If you use flexboxes, you can use justify-content and align-items
Mauricio Salas
@MauriSg99
Jun 17 2017 19:33
Yes, also like @teevik said
Markus Ivancsics
@ivancsicsmarkus
Jun 17 2017 19:36
@luccifer00 Without flexbox:
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -50%);
luccifer00
@luccifer00
Jun 17 2017 19:36
thanks @MauriSg99 i was trayind without px
CamperBot
@camperbot
Jun 17 2017 19:36
luccifer00 sends brownie points to @maurisg99 :sparkles: :thumbsup: :sparkles:
:cookie: 125 | @maurisg99 |http://www.freecodecamp.com/maurisg99
luccifer00
@luccifer00
Jun 17 2017 19:37
i will try that @ivancsicsmarkus
Markus Ivancsics
@ivancsicsmarkus
Jun 17 2017 19:38
@luccifer00 It will work.
Just add position relative to the containing element!
Ashley Owens
@yelhsa
Jun 17 2017 19:39
@jm535 I also can't get my dropdown menu to work properly.
Maybe we can figure it out together
James Lindsay
@jm535
Jun 17 2017 19:39
cool, @yelhsa I have to do something for a bit, will be back in about 10 minutes.
Nikki L.R.
@nikkilr88
Jun 17 2017 19:40
@teevik Thanks, I messing around with it now. For the recipes in state, would it be best to use an array?
CamperBot
@camperbot
Jun 17 2017 19:40
nikkilr88 sends brownie points to @teevik :sparkles: :thumbsup: :sparkles:
:cookie: 138 | @teevik |http://www.freecodecamp.com/teevik
James Lindsay
@jm535
Jun 17 2017 19:40
I made my background white so its easier to see, as suggested @fullmetal7777 :thumbsup:
Nikki L.R.
@nikkilr88
Jun 17 2017 19:42
Right now I have an array of arrays
Ashley Owens
@yelhsa
Jun 17 2017 19:42
alright I'm going to grab food in the meantime be back in like 15. @jm535
Nikki L.R.
@nikkilr88
Jun 17 2017 19:43
[[Pizza, [sauce, cheese, etc], [Tacos, [tortillas, meat, sauce]]] ... I don't know it that is the best setup
teevik
@teevik
Jun 17 2017 19:46
@nikkilr88 I would use an array with objects inside
Nikki L.R.
@nikkilr88
Jun 17 2017 19:51
@teevik Thanks!
CamperBot
@camperbot
Jun 17 2017 19:51
nikkilr88 sends brownie points to @teevik :sparkles: :thumbsup: :sparkles:
:warning: nikkilr88 already gave teevik points
teevik
@teevik
Jun 17 2017 19:57
Np, working on learning react too
Nikki L.R.
@nikkilr88
Jun 17 2017 20:08
const recipes = this.props.recipes.map( (recipe, i) => {
    return <li  key={i}><span className="title">{recipe.title}</span><span className="ingredients">{recipe.ing
I have that, and it's working, but I am not sure how to make the ingredients show up as list items.
Ashley Owens
@yelhsa
Jun 17 2017 20:08
back @jm535
Nikki L.R.
@nikkilr88
Jun 17 2017 20:08
Back to my original problem... :D
James Lindsay
@jm535
Jun 17 2017 20:09
can i see your code to compare to mine please @yelhsa ?
teevik
@teevik
Jun 17 2017 20:11
I guess you can also map the ingredients? And make a list or something @nikkilr88
Nikki L.R.
@nikkilr88
Jun 17 2017 20:12
@teevik Trying... so far I've got nothing. :smile:
James Lindsay
@jm535
Jun 17 2017 20:13
I have been following the guide at http://getbootstrap.com/components/#navbar
Ashley Owens
@yelhsa
Jun 17 2017 20:14
and I've been using https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp lol I'll take a look at that if you want to take a look at this one
Nikki L.R.
@nikkilr88
Jun 17 2017 20:14
@teevik Got it!
Mauricio Salas
@MauriSg99
Jun 17 2017 20:15
Hey guys, how can I make a section for About, Portfolio, and Contact? https://codepen.io/MauriSg/pen/gRgwzP?editors=1000
Nikki L.R.
@nikkilr88
Jun 17 2017 20:15
@teevik Thank you so much! I think it I am finally starting to understand this. I really appreciate your help!
CamperBot
@camperbot
Jun 17 2017 20:15
nikkilr88 sends brownie points to @teevik :sparkles: :thumbsup: :sparkles:
:warning: nikkilr88 already gave teevik points
teevik
@teevik
Jun 17 2017 20:17
@MauriSg99 What do you mean by section? A whole new page?
Mauricio Salas
@MauriSg99
Jun 17 2017 20:17
Yes
teevik
@teevik
Jun 17 2017 20:18
Probably impossible with codepen, it's probably easier to just have a single page which lists all the sections
Or you could just start working on it outside of codepen, then you would just be adding new HTML pages
rugano
@rugano
Jun 17 2017 20:19
Hello campers,
Mauricio Salas
@MauriSg99
Jun 17 2017 20:19
Sorry, I meant something like this
Like, you only have to scroll up and donw
down*
teevik
@teevik
Jun 17 2017 20:19
You just add the sections directly to what you already have?
Mauricio Salas
@MauriSg99
Jun 17 2017 20:20
It's not working, how do I do it?
James Lindsay
@jm535
Jun 17 2017 20:20
@yelhsa It seems you are using a dropdown menu for when the menu is minimised. I am not sure that is necessary but I could be wrong.
rugano
@rugano
Jun 17 2017 20:21
Can someone help me identify and correct this bug ,'unexpected token ,' in the codepen here: https://codepen.io/Njue/pen/NgbxBa
teevik
@teevik
Jun 17 2017 20:22

@MauriSg99 You are setting

body{
  overflow: hidden;
}

Which means it won't be able to scroll

Did you make that sidebar yourself?
Ashley Owens
@yelhsa
Jun 17 2017 20:22
@jm535 I'm not sure what you mean?
Mauricio Salas
@MauriSg99
Jun 17 2017 20:24
@teevik yes, I deleted that already, but whatever I write down it shows at the top of the page
teevik
@teevik
Jun 17 2017 20:26
Looks like it's working?
Ashley Owens
@yelhsa
Jun 17 2017 20:26
This is frustrating me @jm535 I think I'm just going to take a break and come back to it later.
thanks anyways
Mauricio Salas
@MauriSg99
Jun 17 2017 20:26
@teevik Yeees! It worked
teevik
@teevik
Jun 17 2017 20:27
Nice
Mauricio Salas
@MauriSg99
Jun 17 2017 20:27
@teevik Thanks!
CamperBot
@camperbot
Jun 17 2017 20:27
maurisg99 sends brownie points to @teevik :sparkles: :thumbsup: :sparkles:
:cookie: 139 | @teevik |http://www.freecodecamp.com/teevik
Mauricio Salas
@MauriSg99
Jun 17 2017 20:30
@teevik Do you know how can I add a link within the same page?
James Lindsay
@jm535
Jun 17 2017 20:33
@yelhsa, you have created two menus, one for expanded and one for minimised. I don't think it is necessary to have to two menus. But, I can't even get mine working so what do I know... lol
Can anyone point us in the right direction please?
teevik
@teevik
Jun 17 2017 20:40
@MauriSg99 You add ID's to the section you want to jump to, and then just use normal anchor tags like <a href="#id">Text</a>
Mauricio Salas
@MauriSg99
Jun 17 2017 20:41
Okay thanks!
Nadja Stojanovic
@nadjastojanovic
Jun 17 2017 20:47
Can somebody help me? I've been trying to solve this problem for days now and I just can't get around it. I'm trying to set the background image full screen, so it covers the entire homepage section and when you scroll down, there's the next section. I've managed to do this on desktop and on android but in iOS Safari it just sets the background image the length of the body instead of using viewport height, which is a problem because my body is very long. Can anyone just give me some advice, please?
comment about this
Benjamin
@DarkInterval
Jun 17 2017 21:21
When coding the Tribute Page, do you use HTML or Bootstrap? I'm a little confused on the difference.
And particularly, I mean when Googling for help. If I wanted to center an image, let's say, would I Google: "HTML center image" or "Bootstrap center image?"
Coy Sanders
@coymeetsworld
Jun 17 2017 21:27
Bootstrap is a CSS library @DarkInterval, HTML is code you use to structure your page. You would use both
if you're not sure of the difference between CSS and HTML is I would review the challenges
JesperKSmith
@JesperKSmith
Jun 17 2017 21:29
Hey all, I'm having some trouble with PHP and MySQL, hope any of you can help - I created a JSFiddle, describing my problem, any help is welcome :)
https://jsfiddle.net/2c3f5u9r/
Benjamin
@DarkInterval
Jun 17 2017 21:31
@coymeetsworld Thanks!
CamperBot
@camperbot
Jun 17 2017 21:31
darkinterval sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 2814 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
onikroo
@onikroo
Jun 17 2017 21:33
Hey there
Does anyone have any advice on getting social media icons through bootstrap?
Hayk Simonyan
@hayksim
Jun 17 2017 21:36
@onikroo use font awsome
Na-Ya
@Na-Ya
Jun 17 2017 21:38
Hi everyone, I am working on the weather API challenge and I am seriously stuck, can anyone point me in the right direction?
I keep getting the error that one of my variables is not defined
for the latitude position
onikroo
@onikroo
Jun 17 2017 21:38
Thank you @hayksim
CamperBot
@camperbot
Jun 17 2017 21:38
onikroo sends brownie points to @hayksim :sparkles: :thumbsup: :sparkles:
:cookie: 125 | @hayksim |http://www.freecodecamp.com/hayksim
Gulsvi
@gulsvi
Jun 17 2017 21:38
@DarkInterval You can search for either. Here's an example of how to use pure HTML/CSS to center an image, or how to do it with Bootstrap: https://codepen.io/skycoder/pen/xqbGor
@Na-Ya I can try to help - can you show your code?
I'm working on the ajax request but despite everything I tried it keeps telling me that lat is not defined
@SkyC0der any tips would be appreciated
Gulsvi
@gulsvi
Jun 17 2017 21:43
@Na-Ya Your lat and long are only defined inside your function(position), if you want to use them outside of that, you'll need to pass them as arguments to another function
 if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude;
    var long = position.coords.longitude;
    getWeather(lat, long);
  });
}

function getWeather(lat, long) {
  $.ajax({
    url: "https://api.darksky.net/forecast/<<<your key>>>/" + lat + "," + long,
    dataType: "jsonp"
  }).done(function(data) {
    console.log("has data arrived?", data);
  }); //closes out ajax
}
Na-Ya
@Na-Ya
Jun 17 2017 21:45
oh wow, thanks that makes a lot of sense
thanks for taking a look @SkyC0der
CamperBot
@camperbot
Jun 17 2017 21:46
na-ya sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1758 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Jun 17 2017 21:48
@Na-Ya I messed up your ajax call - fixed in the sample above
Na-Ya
@Na-Ya
Jun 17 2017 21:54
@SkyC0der now I am getting a 'Access-Control-Allow-Origin' error :/
Gulsvi
@gulsvi
Jun 17 2017 21:55
@Na-Ya Are you using dataType: 'jsonp'?
Na-Ya
@Na-Ya
Jun 17 2017 21:57
@SkyC0der when I tried adding the dataType as jsonp the lat and long returned undefined
Gulsvi
@gulsvi
Jun 17 2017 21:59
@Na-Ya You are getting close, but your ajax syntax is incorrect. Compare to what I provided in the code sample above
your function(data) is in the wrong place
Panayiotis Mangafas
@mangafas
Jun 17 2017 22:01
hey im having a problem with "Create a Media Query" this is my code, it works on the phone at the right but it doesnt get accepted by fcc
<style>
  p {
    font-size: 20px;
  }

  /* Add media query below */
  @media (min-height: 800px){
    #par{
      font-size: 10px;
    }
  }


</style>

<p id="par">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
Na-Ya
@Na-Ya
Jun 17 2017 22:01
ok @SkyC0der , thanks for your help, I will review the documentation and try to correct my ajax syntax
CamperBot
@camperbot
Jun 17 2017 22:01
na-ya sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: na-ya already gave skyc0der points
Gulsvi
@gulsvi
Jun 17 2017 22:06
@mangafas @media (min-width: 800px)
Not min-height
akshayscu
@akshayscu
Jun 17 2017 22:21
hi guys i was going trhu algos in FE section
i am stuck...
var str = "si eye is";
var trimit = str.replace(/+s/g,"");
console.log(trimit);
gives result "si eye is" but not "sieyeis", any thoughts?
Gulsvi
@gulsvi
Jun 17 2017 22:25
@akshayscu I think you mean \s instead of +s
var str = "si eye is";
var trimit = str.replace(/\s/g,"");
console.log(trimit);
I use this site for help with regular expressions - there's a cheat sheet on the right-hand side: http://www.regexpal.com/
akshayscu
@akshayscu
Jun 17 2017 22:26
gotcha @SkyC0der ...haha!!...thanks for the help
typo
onikroo
@onikroo
Jun 17 2017 22:48
Finally completed the basic front end project. Happy!
guru prasad
@guruprasad8212
Jun 17 2017 23:11
hi guys
onikroo
@onikroo
Jun 17 2017 23:12
Hi
guru prasad
@guruprasad8212
Jun 17 2017 23:12
having troube with random quote machine

$(document).ready(function(){
function getNewQuote(){
$.ajax({
url:"http://api.forismatic.com/api/1.0/",
jsonp:"jsonp",
dataType:"jsonp",
data:{
method :"getQuote",
format:"jsonp",
lang:"en"
},

    success:function(response){
        console.log(response.quoteText);
    }
});

}
getNewQuote();
});

when i load the page in chrome i get[ Uncaught SyntaxError: Unexpected token < ]
do ul know what is causing the error
Ashley Owens
@yelhsa
Jun 17 2017 23:17
is there a way to make background-image:url("") show the full image even if there isn't enough stuff to use up all the space?
Ashley Owens
@yelhsa
Jun 17 2017 23:22
nvm i got it. :)
CallMeOrange
@EgnaroDev
Jun 17 2017 23:51
@SkyC0der hey
Do you know how to make a list/menu where you can go to different pages
@yelhsa use background-size: cover;
So the image will fit perfectly to any screen
Gulsvi
@gulsvi
Jun 17 2017 23:54
@MCTwoDigitZero Yeah, like a navbar?
CallMeOrange
@EgnaroDev
Jun 17 2017 23:55
@SkyC0der kinda
Like one symbols with three lines you click it you can choose different page
Cato Myhre
@Zalmez
Jun 17 2017 23:56
can anyone give me some feedback? going to re-size the portfolio images a little bit to make it fit better
CallMeOrange
@EgnaroDev
Jun 17 2017 23:56
You know? One click suddenly change pages
@Zalmez Nice
Gulsvi
@gulsvi
Jun 17 2017 23:57
Yeah, like tabs. Click it and the content below changes - no scrolling.
CallMeOrange
@EgnaroDev
Jun 17 2017 23:58
Yeah I guess
Do you know how?
Gulsvi
@gulsvi
Jun 17 2017 23:58
Ignore Link 2, was using that show someone something, but click links 1,3,4: https://codepen.io/skycoder/pen/XMoJyj
CallMeOrange
@EgnaroDev
Jun 17 2017 23:58
Ok I will check it out
Do I need JS code?
this
$('[data-toggle="tab"]').click(function(e) {
  e.preventDefault();
  $(this).tab('show');
});
Yeah
Gulsvi
@gulsvi
Jun 17 2017 23:59
Yeah, you need that