These are chat archives for FreeCodeCamp/HelpFrontEnd

1st
Jun 2017
firas omrane
@firou1925
Jun 01 2017 00:40
is anyone here!!
Koderkid1936
@Koderkid1936
Jun 01 2017 00:43
if I know the concepts of OOP and know the basics of Java conditions/loops arrays etc for me to be able to answer basic exercise questions, how long would it take to build a simple tic tac toe game?
firas omrane
@firou1925
Jun 01 2017 00:44
personally I dont know
Gulsvi
@gulsvi
Jun 01 2017 00:45
@Koderkid1936 By the time we get to the tic-tac-toe project, they expect it to take about 40 hours. We know more than the basics at that point.
Hours estimated by topic are listed here: https://www.freecodecamp.com/map
@firou1925 What's the question?
firas omrane
@firou1925
Jun 01 2017 00:46
one minute
@SkyC0der I cant fix the grid division with bootstrap and the background image is not shown full
Gulsvi
@gulsvi
Jun 01 2017 00:50
@firou1925 You will need to add Bootstrap to your project to use the grid. The background will repeat by default. You can use the background-repeat property to modify that behavior.
https://www.w3schools.com/cssref/pr_background-repeat.asp
https://www.bootstrapcdn.com/
firas omrane
@firou1925
Jun 01 2017 00:51
I added it in the head
Gulsvi
@gulsvi
Jun 01 2017 00:52
@firou1925 This is what I see in the <head>
  <head>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <title>Weather application</title>
  </head>
That's font awesome, not Bootstrap.
firas omrane
@firou1925
Jun 01 2017 00:53
ah ok
firas omrane
@firou1925
Jun 01 2017 00:53
got it
fdemaa
@fdemaa
Jun 01 2017 00:56
anyone know why my photo is not appearing?
https://codepen.io/fdemaa/pen/oWOMMX?editors=1100
firas omrane
@firou1925
Jun 01 2017 00:56
@SkyC0der thanku
CamperBot
@camperbot
Jun 01 2017 00:56
firou1925 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1566 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Jun 01 2017 00:59
@fdemaa Which photo?
Brian
@Cornielle
Jun 01 2017 01:01
Hello Guys
firas omrane
@firou1925
Jun 01 2017 01:02
hello
Brian
@Cornielle
Jun 01 2017 01:02
how its going @firou1925
@fdemaa hello , let me see
Jose Mendoza
@jmendozav
Jun 01 2017 01:03
@fdemaa I can see the whole thing
Gulsvi
@gulsvi
Jun 01 2017 01:03
Welcome, @Cornielle
Brian
@Cornielle
Jun 01 2017 01:03
@SkyC0der thx
CamperBot
@camperbot
Jun 01 2017 01:03
cornielle sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1567 | @skyc0der |http://www.freecodecamp.com/skyc0der
firas omrane
@firou1925
Jun 01 2017 01:04
good I am really happy finding help whenever I need
fdemaa
@fdemaa
Jun 01 2017 01:04
The photo that i put on the aboutme
section
to the right of my bio
Gulsvi
@gulsvi
Jun 01 2017 01:04
The picture of you?
fdemaa
@fdemaa
Jun 01 2017 01:04
Yes
Gulsvi
@gulsvi
Jun 01 2017 01:04
I see it fine
fdemaa
@fdemaa
Jun 01 2017 01:05
i have like a little empty rectangle
:worried:
weird
Gulsvi
@gulsvi
Jun 01 2017 01:06
I'm not sure what to say...
Brian
@Cornielle
Jun 01 2017 01:06
@fdemaa i cant see your photo in the link of your code , doesnt work
Gulsvi
@gulsvi
Jun 01 2017 01:06
Only one picture, right? You wearing a tank top with a wave on it
fdemaa
@fdemaa
Jun 01 2017 01:06
yeah
that one
why is not working ?
Gulsvi
@gulsvi
Jun 01 2017 01:07
ni idea...
maybe try a different image host?
fdemaa
@fdemaa
Jun 01 2017 01:07
i will put another img and try
Gulsvi
@gulsvi
Jun 01 2017 01:08
nvm, if your Bob marley tribute works, you profile picture should work too
Brian
@Cornielle
Jun 01 2017 01:08
probably the reason is because you need to make a click for open the img
when you go to the link you need to do a click and them open the img
just add that img between the folder that bob marley img is and done
fdemaa
@fdemaa
Jun 01 2017 01:09
@Cornielle yeah i think its because of that, i will try antoher img; anyway i dont have any "serious photos" haha
okey i will try that
Brian
@Cornielle
Jun 01 2017 01:10
@fdemaa jajaja no probem
problem
fdemaa
@fdemaa
Jun 01 2017 01:17
it works now
i just save it as png
insted of jpg
ZaynMalloc
@ZaynMalloc
Jun 01 2017 01:21
I need help. I'm trying to center the image so I could complete the one of the test. https://codepen.io/zachgacer/pen/KmOVbG
Brian
@Cornielle
Jun 01 2017 01:21
Good @fdemaa
fdemaa
@fdemaa
Jun 01 2017 01:22
center-block
?
ZaynMalloc
@ZaynMalloc
Jun 01 2017 01:24
@fdemaa It worked thanks
CamperBot
@camperbot
Jun 01 2017 01:24
zaynmalloc sends brownie points to @fdemaa :sparkles: :thumbsup: :sparkles:
:cookie: 128 | @fdemaa |http://www.freecodecamp.com/fdemaa
fdemaa
@fdemaa
Jun 01 2017 01:25
:+1:
Pedro Juan
@PedroJuan91
Jun 01 2017 01:27
hi guys... can you see the error of my code... hehehe newbie here...

var dataInfo = function(){
this.temp;
this.country;
this.weather;
if (weather){
this.temp= weather.currently.temperature;
this.country = weather.timezone;
this.weather = weather.icon;
}
}

inquireData = new dataInfo();
displayTemp.innerHTML = inquireData.temp;
displayPlace.innerHTML = inquireData.country;
displayWeather.innerHTML = inquireData.weather;

i get a result of undefine
Brian
@Cornielle
Jun 01 2017 01:29
@fdemaa how you write that? center-block, what kind of tag or property of css is that xd
ZaynMalloc
@ZaynMalloc
Jun 01 2017 01:33
@Cornielle I used display:block. Basically, I made the image into block of its own and apply the margin properties to it. https://www.w3.org/Style/Examples/007/center.en.html
Brian
@Cornielle
Jun 01 2017 01:37
@ZaynMalloc ok , nice i know about that but i was confuse because he said center-block xd
bitcoinabdi
@bitcoinabdi
Jun 01 2017 01:56
good evening i have my wikipedia app done someone please look at my background am having trouble resizing it .https://codepen.io/abdihakim/full/BRXyGJ/
the ball does not appear in smaller screen
any ideas
Tom
@moT01
Jun 01 2017 01:58
@firou1925 looks like its workinhg
Nikki L.R.
@nikkilr88
Jun 01 2017 01:58
Could anyone tell my why fetch() isn't working here? https://ide.c9.io/nicolesattler/react-test
Tom
@moT01
Jun 01 2017 01:58
not sure if all the user stories are done or not
Nikki L.R.
@nikkilr88
Jun 01 2017 01:59

Could anyone tell my why fetch() isn't working here? https://ide.c9.io/nicolesattler/react-test

I have it running in CodePen just fine.

Tom
@moT01
Jun 01 2017 01:59
could use some more info, ...city name, ...a conditions or something @firou1925
@bitcoinabdi not sure exactly what your issue it, ...but the background is based on vh
firas omrane
@firou1925
Jun 01 2017 02:02
@moT01 ok
Tom
@moT01
Jun 01 2017 02:02
maybe try vmin ? so it stays in the window
bitcoinabdi
@bitcoinabdi
Jun 01 2017 02:02
@moT01 VH?
Gulsvi
@gulsvi
Jun 01 2017 02:02
@bitcoinabdi Add this to your body's CSS and the background-image will "resize" better:
  background-position: center center;
bitcoinabdi
@bitcoinabdi
Jun 01 2017 02:03
@SkyC0der thanks
CamperBot
@camperbot
Jun 01 2017 02:03
bitcoinabdi sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1568 | @skyc0der |http://www.freecodecamp.com/skyc0der
fdemaa
@fdemaa
Jun 01 2017 02:03
@Cornielle its a bootstrap class that i used, when i put the bootstrap class "image- responsive", if i want to align to the center i have to use "center-block", to center those images
bitcoinabdi
@bitcoinabdi
Jun 01 2017 02:03
@moT01 thanks
CamperBot
@camperbot
Jun 01 2017 02:03
bitcoinabdi sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 677 | @mot01 |http://www.freecodecamp.com/mot01
Gulsvi
@gulsvi
Jun 01 2017 02:04
@bitcoinabdi I think your Wikipedia logo image would look better if you used a max-width instead of a width in percentage. It gets very small on mobile screens the way you have it now. For example:
.heading img{
  border-radius:10px;
  max-width: 50px;
}
fdemaa
@fdemaa
Jun 01 2017 02:04
@SkyC0der ski what do you think about the background responsive ? Its decent ?
Also i dont kwno why i had a space between the background and the navbar ?
https://codepen.io/fdemaa/pen/oWOMMX?editors=0100
Gulsvi
@gulsvi
Jun 01 2017 02:06
@fdemaa Nice work - very decent :)
To fix the space, move this from your body {} padding-top: 70px; to your .homesection
canapacoder
@canapacoder
Jun 01 2017 02:08
quick question on my first project of building a tribute page, what does it mean fulfill user stories for number 2
Gulsvi
@gulsvi
Jun 01 2017 02:19
@canapacoder Think of user stories as requirements from the perspective of someone visiting your Tribute Page when it is complete. When I visit your tribute page on the web:
  • I can view a tribute page with an image and text.
  • I can click on a link that will take me to an external website with further information on the topic.
So, at a basic level, your tribute page must have some text, an image, and a link to an external website with more info on the person you decide to tribute.
Amit Patel
@AmitP88
Jun 01 2017 02:21
hey guys, I'm nearly done with my portfolio site and just wanted to see what you guys think: https://amitp88.github.io/New-Portfolio/ I know there are better ways to do the portfolio section for my projects, but I kinda like the way it's laid out (tired of using slideshows lol)
firas omrane
@firou1925
Jun 01 2017 02:23
Dillon Orr
@dillorr
Jun 01 2017 02:25
Sorry for the probably simple problem, but I'm not sure why i can't add a second <div> element after my navigation bar https://codepen.io/dillorr/pen/aWxOYK
<div>
<h1>
hello
</h1>
</div>
this follows my navBar div
@AmitP88 I really like your portfolio! very clean and crisp. Only suggestion i have style wise is perhaps making the contact me section display horizontal, but thats just a personal opinion
Amit Patel
@AmitP88
Jun 01 2017 02:27
@dillorr oh yeah, you mean for larger screensizes right?
@dillorr and thanks btw! :D
CamperBot
@camperbot
Jun 01 2017 02:28
amitp88 sends brownie points to @dillorr :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @dillorr |http://www.freecodecamp.com/dillorr
Dillon Orr
@dillorr
Jun 01 2017 02:28
right! I'm on a desktop, and it seemed kind of bare around the list
Gulsvi
@gulsvi
Jun 01 2017 02:28
@dillorr You have white text on a white background :)
body{
  font-family: 'Raleway', sans-serif;
  color: black;
  padding-top: 30px;
}
Dillon Orr
@dillorr
Jun 01 2017 02:29
well would you look at that
Gulsvi
@gulsvi
Jun 01 2017 02:29
Add some padding it to push it down below your navbar
And give your navbar a z-index so stuff stays behind it
Dillon Orr
@dillorr
Jun 01 2017 02:29
thanks @SkyC0der !
CamperBot
@camperbot
Jun 01 2017 02:29
dillorr sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1569 | @skyc0der |http://www.freecodecamp.com/skyc0der
Amit Patel
@AmitP88
Jun 01 2017 02:29
@dillorr for sure, I'll see if I can break the list into two columns only for laptop/desktop screens. I'm hoping I can get this portfolio site done by early tomorrow so I can start applying for junior positions asap lol
Gulsvi
@gulsvi
Jun 01 2017 02:30
No problem! I like the easy questions
@AmitP88 This one has a similar feel to what you're doing - would be nice to move your sections over the first header image you have: https://vickylai.io/
The portfolio images could use some more padding/margins between them - they are a bit big in my opinion, but overall great work.
Dillon Orr
@dillorr
Jun 01 2017 02:32
@AmitP88 good luck with the rest of your project, and good luck with the job hunt
fdemaa
@fdemaa
Jun 01 2017 02:32
@SkyC0der thanks sky! one last thing that is bother me is that when i rezie the browser to the range of xs to md i have a scroll bar on the bottom :
CamperBot
@camperbot
Jun 01 2017 02:32
fdemaa sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1570 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Jun 01 2017 02:33
@fdemaa This trick helps me debug those issues - add this to your CSS:
* {
  border: 1px solid black;
}
It will put a border around everything and show you what element is going off the page.
fdemaa
@fdemaa
Jun 01 2017 02:34
Ah thats nice
!!
thanks
that * is like a selector for all things ?
Amit Patel
@AmitP88
Jun 01 2017 02:34
@SkyC0der yeah, I had a feeling the portfolio images were a bit claustrophobic lol. also, what do you mean by moving the sections over the first header image? I'm not sure if I can do that since the image in the 2nd section is also parallax
@dillorr thanks bro! :D
CamperBot
@camperbot
Jun 01 2017 02:34
amitp88 sends brownie points to @dillorr :sparkles: :thumbsup: :sparkles:
:warning: amitp88 already gave dillorr points
Gulsvi
@gulsvi
Jun 01 2017 02:37
@AmitP88 Hmmm, I guess yours is similar in that regard. I think she has so much more contrast, it jumped out at me as a little more 'parallaxy' I guess :p
Amit Patel
@AmitP88
Jun 01 2017 02:38
@SkyC0der lol she does use a lot of white
@SkyC0der I tried making my site like that once and all that white hurt my eyes haha
Gulsvi
@gulsvi
Jun 01 2017 02:38
I think I would go darker for my portfolio for sure :) @AmitP88
This one is fun: http://jakealbaugh.com/
Amit Patel
@AmitP88
Jun 01 2017 02:40
@SkyC0der oh that is crazy! damn, I wish I could do that haha. that guy is definitely experienced
Gulsvi
@gulsvi
Jun 01 2017 02:40
Yeah, that guy has some talent lol
Amit Patel
@AmitP88
Jun 01 2017 02:41
@SkyC0der lol I always have to google what I want to do if I want to incorporate css animations
Gulsvi
@gulsvi
Jun 01 2017 02:41
This one is great too: http://getcoleman.com/
Very simple, nice slider, and advertises what he does
Amit Patel
@AmitP88
Jun 01 2017 02:43
lmao that's wacky as hell
Josh Beasley
@joshbeasley
Jun 01 2017 03:00
I'm having some trouble setting up the navbar for my portfolio page. I want to pull some of the pills to the right but the class isn't working.Any ideas? https://codepen.io/joshbeasley/pen/ybddJV
Adam
@adamakers
Jun 01 2017 03:02

quick question on prototypes...
Lets say I have this code:

function Person(saying) {
  this.saying = saying;
  this.tacos = 'taco express';
  this.me = false;
}

Person.prototype.talk = function() {
  console.log('I say: ' + this.saying);
}

console.log(Person.prototype);

it returns the Person function object, but without any of the properties, just the method. Anyone know why?

mboesiger90
@mboesiger90
Jun 01 2017 03:14
help I am stuck with the random quote machine. It does not generate a code with this:

$(document).ready(function(){
$.ajax({
type: 'GET',
dataType: 'json',
url: '/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
success:function(data){
$(".quote").html(data.qouteText + "<br>" + data.qouteAuthor)
}
});
$("#getQoute").on("click", function (){

$.ajax({
type: 'GET',
dataType: 'json',
url: '/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
success:function(data){
$(".quote").html(data.qouteText + "<br>" + data.qouteAuthor)
}
});
cache: false;
});
});

ZaynMalloc
@ZaynMalloc
Jun 01 2017 03:19
@adamakers I think the problem might be that you did not create a new person object.
fdemaa
@fdemaa
Jun 01 2017 03:20
using negative margins is not a good solutions right ? xd
ZaynMalloc
@ZaynMalloc
Jun 01 2017 03:20

@adamakers function Person(saying) {
this.saying = saying;
this.tacos = 'taco express';
this.me = false;
}

Person.prototype.talk = function() {
console.log('I say: ' + this.saying);
}

var newPerson = new Person('Hello')

console.log(newPerson.talk());

Dillon Orr
@dillorr
Jun 01 2017 03:21
What's the best way to add a headshot to my portfolio page? i have an image hosted on google images but none of the links work
I can't get a direct link to the image
had the same issue with imgur
Gulsvi
@gulsvi
Jun 01 2017 03:23
@joshbeasley This section of the Bootstrap docs talks about aligning your nav components: https://v4-alpha.getbootstrap.com/components/navs/#horizontal-alignment
Adam
@adamakers
Jun 01 2017 03:24
@ZaynMalloc it does similar thing here:
function Person(name, gender) {
  this.name = 5;
  this.gender = 5;
}
Person.prototype.lastname = 'marsh';
Person.prototype.introduce = function() {
  console.log('Hi my name is ' + this.name + ' and I am a ' + this.gender);
}

var stan = new Person('Stanley', 'male');

console.log(Person.prototype);
Gulsvi
@gulsvi
Jun 01 2017 03:24
@mboesiger90 Hint - the URL you have should start with https:// your URL is:
'/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1'
@dillorr Use a service like https://postimage.org, that's what most people use here without any issues.
Dillon Orr
@dillorr
Jun 01 2017 03:27
I'll give it a shot, thanks again @SkyC0der
CamperBot
@camperbot
Jun 01 2017 03:27
dillorr sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: dillorr already gave skyc0der points
fdemaa
@fdemaa
Jun 01 2017 03:27
@SkyC0der when i remove the padding from my body,and put it in my div, my image is got cut, and it doesn't matter if put other height to the image, it wont display.
If i use margin-top: with a negative value, is a bad solution ?
mboesiger90
@mboesiger90
Jun 01 2017 03:29
ah yes thank you sky but when I changed that it still doesnt work
Gulsvi
@gulsvi
Jun 01 2017 03:29
@mboesiger90 What does your URL look like now?
I went with a different API
Gulsvi
@gulsvi
Jun 01 2017 03:30
@fdemaa A better solution, in that case, is to move your home section above your navbar, like:
<div id="home"></div>
  <div class="container-fluid  homesection">  
  <nav class="navbar  navbar-inverse navbar-fixed-top custom1">
@mboesiger90 That API is not documented very well - I can give you the exact URL to use if you want, but you may not learn much about reading API documentation. Up to you.
I'd personally take a closer look at the code examples and instructions at the first API you were trying to use: https://quotesondesign.com/api-v4-0/
mboesiger90
@mboesiger90
Jun 01 2017 03:31
ok thank you
ZaynMalloc
@ZaynMalloc
Jun 01 2017 03:32

@adamakers function Person(name, gender) {
this.name = name;
this.gender = gender;
}
Person.prototype.lastname = 'marsh';
Person.prototype.introduce = function() {
console.log('Hi my name is ' + this.name + ' and I am a ' + this.gender);
}

var stan = new Person('Stanley', 'male');

console.log(stan.introduce());

Gulsvi
@gulsvi
Jun 01 2017 03:32
Once you get more familiar with calling APIs, displaying data on the page, etc, you can branch out and try to figure out other APIs.
Adam
@adamakers
Jun 01 2017 03:32
@ZaynMalloc I figured it out. It does not show the properties in the console because those properties are not a part of the prototype property, but instead are tied directly to the object
mboesiger90
@mboesiger90
Jun 01 2017 03:32
Ok thank you I am really struggling to understand ajax and apis
Dillon Orr
@dillorr
Jun 01 2017 03:33
@SkyC0der you mentioned earlier z-index: -1; for my navigation bar, which i applied to that class, but now my new image is the only thing that covers it up when scrolling
everything else scrolls under the nav bar like it's supposed to
ZaynMalloc
@ZaynMalloc
Jun 01 2017 03:33
@adamakers oh, good to know
Gulsvi
@gulsvi
Jun 01 2017 03:33
@mboesiger90 Don't let it get you down :) it's a tough concept, but it will click eventually and then seem fairly simple.
Just takes getting it right a few times
Adam
@adamakers
Jun 01 2017 03:33
@ZaynMalloc Thanks!
CamperBot
@camperbot
Jun 01 2017 03:33
adamakers sends brownie points to @zaynmalloc :sparkles: :thumbsup: :sparkles:
:cookie: 254 | @zaynmalloc |http://www.freecodecamp.com/zaynmalloc
Gulsvi
@gulsvi
Jun 01 2017 03:34
@dillorr You'll want to use a positive number for your z-index. I don't think I recommended a negative one :) but if I did, I'm sorry about that. -1 puts your element behind everything else.
Dillon Orr
@dillorr
Jun 01 2017 03:35
whoops! got it
Gulsvi
@gulsvi
Jun 01 2017 03:35

For example, this is what Bootstrap does for their Fixed navbar class:

.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
}

@dillorr
From: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css

fdemaa
@fdemaa
Jun 01 2017 03:37
@SkyC0der still the white space, i think i will add the negative margin to each mediaqueries :shipit:
mboesiger90
@mboesiger90
Jun 01 2017 03:39
is there anything in particular I can read up on to help me understand APIs better?
Josh Beasley
@joshbeasley
Jun 01 2017 03:42
@SkyC0der the justify-content-end class allowed me to move the entire nav bar, but not individual pills
fdemaa
@fdemaa
Jun 01 2017 03:53
@SkyC0der okey i do it like you ! but why that works ? moving the id home up there ?
Gulsvi
@gulsvi
Jun 01 2017 03:55
@joshbeasley I misread, thought you wanted it all over to the right. I think you're looking for a navbar, not nav-pills in that case. https://codepen.io/skycoder/pen/VboOYK?editors=1000
@fdemaa This way, the navbar is on top of your background image instead of above it :) it's the same as using the <header> tag.
fdemaa
@fdemaa
Jun 01 2017 03:57
okay i never thought about that !you are years ahead of me haha
Gulsvi
@gulsvi
Jun 01 2017 04:00
Only 3 months lol :)
fdemaa
@fdemaa
Jun 01 2017 04:02
:clap:
fdemaa
@fdemaa
Jun 01 2017 04:08
Im going sleep thanks for the help @SkyC0der
CamperBot
@camperbot
Jun 01 2017 04:08
fdemaa sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1571 | @skyc0der |http://www.freecodecamp.com/skyc0der
rfvergeldedios
@rfvergeldedios
Jun 01 2017 05:12
Hi everyone, question, can a second getJSON be nested within a getJSON?
Johnny
@jtan3
Jun 01 2017 05:16
@rfvergeldedios i believe so.
Vincent Yan
@envincebal
Jun 01 2017 05:20
Hey guys, I finished my Weather App, but I noticed a delay in retrieving the data from the weather API. I've spent hours trying to figure out why. Any help would be appreciated.
fdemaa
@fdemaa
Jun 01 2017 05:24
@envincebal how do you make those projects images ? with some picture editor ?
i m looking at your portfolio
Im sorry but i dont know any of js, im doing the portfolio and tribue pages :shipit:
You can also google a bunch of screen capture sites and they will do just fine as well.
fdemaa
@fdemaa
Jun 01 2017 05:30
@envincebal thanks man ! by the way , any quick feedback ?
https://codepen.io/fdemaa/pen/oWOMMX
Its horrible but im still a noob haha
CamperBot
@camperbot
Jun 01 2017 05:30
fdemaa sends brownie points to @envincebal :sparkles: :thumbsup: :sparkles:
:cookie: 279 | @envincebal |http://www.freecodecamp.com/envincebal
Vincent Yan
@envincebal
Jun 01 2017 05:34
@fdemaa very nice! I like it, especially the navbar. One thing I would suggest is wrapping all your HTML in a div starting at the About Me section and use the class "container" that way everything is more centered.
fdemaa
@fdemaa
Jun 01 2017 05:38

@envincebal thanks man! Yes i forgot a bout that;

Also do you visit any others pages like this one ?

I did some codecademy but i find it too limited, and they are others pages that are premium. :worried:

I mean i just look for info in google, but do you have any others things to help you out ?

CamperBot
@camperbot
Jun 01 2017 05:38
fdemaa sends brownie points to @envincebal :sparkles: :thumbsup: :sparkles:
:warning: fdemaa already gave envincebal points
fdemaa
@fdemaa
Jun 01 2017 05:39
I feel like a bit lost, they are too many things to learn haha
Johnny
@jtan3
Jun 01 2017 05:40
@fdemaa you can youtube tons of stuff
fdemaa
@fdemaa
Jun 01 2017 05:40
@jtan3 yes im using also this page thats call w3school or something like that, wich is great
:+1:
Vincent Yan
@envincebal
Jun 01 2017 05:42
Yeah Codecademy is a good intro but not enough. Mostly I just google stuff. I mainly use Mozilla Developer Network site. It's really comprehensive stuff and a good reference. Also here's a link to a great list of resources I use for front end in general. http://codingheroes.io/resources/
w3schools is quite controversial because many devs say lots of the info is outdated. MDN is much better.
fdemaa
@fdemaa
Jun 01 2017 05:45

@envincebal i didn't know that about w3schools; Great info man ! Appreciate, and good luck with your project!

@jtan3 :+1: Thanks!

CamperBot
@camperbot
Jun 01 2017 05:45
fdemaa sends brownie points to @envincebal and @jtan3 :sparkles: :thumbsup: :sparkles:
:warning: fdemaa already gave envincebal points
:cookie: 390 | @jtan3 |http://www.freecodecamp.com/jtan3
Riley
@Riley1435
Jun 01 2017 05:46
can someone help me with the intermediate front end project, "show the local weather?"
Vincent Yan
@envincebal
Jun 01 2017 05:46
@fdemaa thanks you too.
CamperBot
@camperbot
Jun 01 2017 05:46
envincebal sends brownie points to @fdemaa :sparkles: :thumbsup: :sparkles:
:cookie: 129 | @fdemaa |http://www.freecodecamp.com/fdemaa
Johnny
@jtan3
Jun 01 2017 05:47
@Riley1435 sure
Riley
@Riley1435
Jun 01 2017 05:47
how do i link a portion of my code into the chat?
Johnny
@jtan3
Jun 01 2017 05:48
if you're working on codepen you can link that
wondering why its not displaying the local temperature
Netrunner21
@Netrunner21
Jun 01 2017 05:50
try this
change text() to html()
$("#tempFar").html(data.temperature + "°" + "F");
Riley
@Riley1435
Jun 01 2017 05:52
i tried that and it still does not work
Netrunner21
@Netrunner21
Jun 01 2017 05:52
hmm, let me look at hime
mine*
Johnny
@jtan3
Jun 01 2017 05:53
@Riley1435 if you go to your developer tools and console you'll see an error
@Riley1435 Ctrl + Shift + J
@Riley1435 to open console
Netrunner21
@Netrunner21
Jun 01 2017 05:54
@jtan3 good catch
@Riley1435 add ?callback=? to the end of your url
its either a workaround for APIs that restrict access, or it helps codepen in some way. I'm not sure.
Riley
@Riley1435
Jun 01 2017 05:56
okay yeah the api has a cross origin error
now it says undefined. im thinking data.temperature is not calling the right object in the JSON data
Netrunner21
@Netrunner21
Jun 01 2017 05:59
Mine was data.currently.temperature
there's an extra step in the object notation to index
Riley
@Riley1435
Jun 01 2017 06:00
I tired that earlier and i figured it didnt work
but now it should work since the problem was the url
thanks for the help
makes sense after opening the link and viewing the data again
Netrunner21
@Netrunner21
Jun 01 2017 06:01
no problem
leomartin
@abhirupleo
Jun 01 2017 06:03
Can someone help me with the random quote generator
app?
Johnny
@jtan3
Jun 01 2017 06:04
@abhirupleo ask away
leomartin
@abhirupleo
Jun 01 2017 06:05
So here is my js code

function generatecolor(){
var color=['#27303B','#F67858','#1182C7','#EC9A4E','#8666F2','#97E59A',''];
var random= Math.floor(Math.random()*color.length);
$("html body").animate({backgroundColor:color[random]}, 1200);
}

function getquote(){
$.ajax({

                    headers: {
                              "X-Mashape-Key": "HL5Yr3E9RZmshc7CyNeA0JrwnjD7p1H6dKVjsnDjlYdeqTgBW9",
                              Accept: "application/json",
                              "Content-Type": "application/x-www-form-urlencoded"
                            },
                        url: 'https://andruxnet-random-famous-quotes.p.mashape.com/cat=',
                        success: function(r){
                        if(typeof(r)=='String'){
                            r=JSON.parse(r);
                            console.log('hey');
                            console.log(r.quote);
                            $("#text").text(r.quote);
                        }
                    }
            });

}

$(document).ready(function() {
$('body').animate({backgroundColor:'#02CE9C'}, 1200);
$('.getquote').on('click', function(event) {
generatecolor();
getquote();
/ Act on the event /
});
});

and here is my html
<body>
<div class="container-fluid">
<div class="row">
<div class="quote-box col-xs-6 col-xs-offset-2">
<div class="quote-text">
<i class="fa fa-quote-left fa-3x" aria-hidden="true"></i>
<span id="text"></span>
</div>
<br>
<button class="btn btn-primary twitter"><i class="fa fa-twitter fa-lg"></i></button>
<button class="btn btn-primary facebook"><i class="fa fa-facebook-official fa-lg"></i></button>
<button class="btn btn-primary getquote">Get Quote</button>
</div>
</div>
</div>
</body>
i have been trying to get this to work for two days now
Johnny
@jtan3
Jun 01 2017 06:06
@abhirupleo send your codepen link
leomartin
@abhirupleo
Jun 01 2017 06:06
but i can't seem to get any resonse from the site
Netrunner21
@Netrunner21
Jun 01 2017 06:08
I have a general question about text() vs html()
leomartin
@abhirupleo
Jun 01 2017 06:08
ask i will try to help @Netrunner21
Riley
@Riley1435
Jun 01 2017 06:08
ive read .text is more secure than .html. I don't remember why, but i remember reading it.
Netrunner21
@Netrunner21
Jun 01 2017 06:09
I see a lot of people using text(), but I'm curious because I think sometimes what's being passed through needs HTML elements tags. My quote generator did, for instance. Wouldn't it be better just to use html() and conver all bases?
cover*
leomartin
@abhirupleo
Jun 01 2017 06:10
Not if you
have already styled it and have placed a span
Riley
@Riley1435
Jun 01 2017 06:10
i used text() on my quote generator and i remember switching it from html() because i read it was more secure
leomartin
@abhirupleo
Jun 01 2017 06:10
then you just need to pass the text you get in response from the ajax request it reduces the complexity ofyour js code
rather than complexity it increases the brevity of your code
using text
why bother with using html tags in js if you can do all the html work in the html file and just pass the text request
it will reduce the mistakes you make
Johnny
@jtan3
Jun 01 2017 06:12
@abhirupleo haven't used ajax too often. I have forgotten how to set it up.
Netrunner21
@Netrunner21
Jun 01 2017 06:13
The API I used had preset tags such as <p> and <br />. But I understand what you're saying.
this might help @Netrunner21
its okay @jtan3
Netrunner21
@Netrunner21
Jun 01 2017 06:13
It also had HTML styling such as &8221; that needed filtering, but that has nothing to do with text() or html()
leomartin
@abhirupleo
Jun 01 2017 06:14
yes
Netrunner21
@Netrunner21
Jun 01 2017 06:15
@abhirupleo Thats the one I saw about ten minutes ago and prompted the question. I figured why not pass the tags through with HTML where text() sets everything to plain text. I got what you were saying though.
leomartin
@abhirupleo
Jun 01 2017 06:16
+1:
kirbyedy
@kirbyedy
Jun 01 2017 06:16
@abhirupleo dunno about your code
but this one is a working example
$(document).ready(function() {


  $.ajax({
    url: 'https://andruxnet-random-famous-quotes.p.mashape.com/cat=', // The URL to the API. You can get this by clicking on "Show CURL example" from an API profile
    type: 'GET', // The HTTP Method
    data: {}, // Additional parameters here
    datatype: 'json',
    success: function(data) { alert(JSON.stringify(data)); },
    error: function(err) { alert(err); },
    beforeSend: function(xhr) {
    xhr.setRequestHeader("X-Mashape-Authorization", "HL5Yr3E9RZmshc7CyNeA0JrwnjD7p1H6dKVjsnDjlYdeqTgBW9"); // Enter here your Mashape key
    }
});


});
Netrunner21
@Netrunner21
Jun 01 2017 06:18
question #2 ... $.ajax versus $getJSON
kirbyedy
@kirbyedy
Jun 01 2017 06:19
I think you have more control over ajax
Netrunner21
@Netrunner21
Jun 01 2017 06:20
more options I guess
looks prettier lol
Johnny
@jtan3
Jun 01 2017 06:22
https://codepen.io/jtan3/pen/ZKMRdW?editors=0010 How can I get my "session time" to count by 1. When I put my session*=60 outside my click function and it breaks my "session time" control.
Netrunner21
@Netrunner21
Jun 01 2017 06:30
Made some changes to my Wiki Viewer. What do you guys think?
Johnny
@jtan3
Jun 01 2017 06:32
@Netrunner21 I like the hover effects !
Netrunner21
@Netrunner21
Jun 01 2017 06:35
Thanks. I has taken some time to get everything looking right
It *
mboesiger90
@mboesiger90
Jun 01 2017 06:35

So I have this working now but some of the quotes are too long from this API. Is there someway I can add a string.length filter to the filter that goes with the URL or do I have to completely reorder my coding

$(document).ready(function(){
$.ajax({
cache: false,
url: 'https://quotesondesign.com/wp-json/posts?filter[orderby]=rand',
success:function(data){
var post = data.shift();
$(".quote").html(post.content);
$(".author").html("-" + post.title);
}
});
$("#getQuote").on('click', function (e){
e.preventDefault;
$.ajax({
cache: false,
url: 'https://quotesondesign.com/wp-json/posts?filter[orderby]=rand',
success:function(data){
var post = data.shift();
$(".quote").html(post.content);
$(".author").html("-" + post.title);
}
});
});
});
$("#tweet").click(function(){
var tweetQuote = $(".quote").text() + "-" + $(".author").text();
var tweetLink = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(tweetQuote);
window.open(tweetLink, '_blank')
});

Netrunner21
@Netrunner21
Jun 01 2017 06:37
@mboesiger90 Your code only has to send the tweet to twitter. It's ok if it's too long. Interesting though if you truly did want to filter the quotes you could absoluly use a string.length type condition
I used the same API. You could test the length, and if it's too long have your code grab another random link.
mboesiger90
@mboesiger90
Jun 01 2017 06:39
yeah I tried that in the filter that I have within my url but that doesnt seem to work
Netrunner21
@Netrunner21
Jun 01 2017 06:39
random quote, sorry
mboesiger90
@mboesiger90
Jun 01 2017 06:39
oh or you mean make an if statement?
Netrunner21
@Netrunner21
Jun 01 2017 06:40
yeah, so basically it checks the length and if it's too long it doesn't get passed on, it reruns the code and grabs another quote.
That API has a lot of long ones though
mboesiger90
@mboesiger90
Jun 01 2017 06:41
ok that would work
This API has too many quotes that are too long and then they mess up my layout haha
Pranav Reddy
@ne0ng0d
Jun 01 2017 06:42
Guys how do I start working on the portfolio?
Netrunner21
@Netrunner21
Jun 01 2017 06:42
I understand, otherwise its a decent API
mboesiger90
@mboesiger90
Jun 01 2017 06:43
google ideas and templates to get an idea
Netrunner21
@Netrunner21
Jun 01 2017 06:43
@ne0ng0d make a new pen, and add the stuff you want like bootstrap, animate.css, font awesome, jquery, etc.
That's my process of getting started
Honestly though I skipped that one. I'm going to do it when I finish all my projects. The portfolio is layout heavy and I'm not very good at design, hah.
Pranav Reddy
@ne0ng0d
Jun 01 2017 06:45
Thanks @Netrunner21
CamperBot
@camperbot
Jun 01 2017 06:45
ne0ng0d sends brownie points to @netrunner21 :sparkles: :thumbsup: :sparkles:
:cookie: 327 | @netrunner21 |http://www.freecodecamp.com/netrunner21
Netrunner21
@Netrunner21
Jun 01 2017 06:45
@ne0ng0d You're welcome
mboesiger90
@mboesiger90
Jun 01 2017 06:47
haha I had so much trouble picking a color scheme for my portfolio and now I hate it anyway so I will definitely be going back to redesign it with my newfound knowledge
Pranav Reddy
@ne0ng0d
Jun 01 2017 06:47
but how do I do things like the buttons doing different function adding a menu bar and adding multiple pictures next to each other and adding icons to different websites
Saeed Jassani
@saeedjassani
Jun 01 2017 06:48
hello, i need help in "Random Quote Machine" project
how can i change the backgrount color of my bootstrap button?
mboesiger90
@mboesiger90
Jun 01 2017 06:49
make a class, assign the class to the button, and change the background-color in the class
Netrunner21
@Netrunner21
Jun 01 2017 06:50
@ne0ng0d there are several ways. You can add onclick="function()" to make buttons do things.
Saeed Jassani
@saeedjassani
Jun 01 2017 06:50
@mboesiger90 i tried color: white !important;
to btn-default class of bootstrap
Netrunner21
@Netrunner21
Jun 01 2017 06:50
@ne0ng0d bootstrap has sample menus that you can copy/paste
Saeed Jassani
@saeedjassani
Jun 01 2017 06:51
but the ripple effect goes away
kirbyedy
@kirbyedy
Jun 01 2017 06:52
@saeedjassani you have to target the button in css
Netrunner21
@Netrunner21
Jun 01 2017 06:52
@ne0ng0d adding multiple pictures would require the use of inline or inline block css styles, and not the block display style. There may be easier ways to do it in bootstrap though, I'm not sure.
kirbyedy
@kirbyedy
Jun 01 2017 06:52
color will refer to the text inside the button
mboesiger90
@mboesiger90
Jun 01 2017 06:52
@saeedjassani this is my little excerpt. .btnNPos { position: absolute; bottom: 10px; left: 20%; background-color: black; color: #ffffff; }
CamperBot
@camperbot
Jun 01 2017 06:52
:bulb: to format code use backticks! ``` more info
kirbyedy
@kirbyedy
Jun 01 2017 06:52
most probably you need background-color @saeedjassani
mboesiger90
@mboesiger90
Jun 01 2017 06:53
oops sorry i never get that right but that is my css class for the button. The button is black and the text is white
Saeed Jassani
@saeedjassani
Jun 01 2017 06:53
oh sorry, document.getElementById('refresh').setAttribute('style', 'background-color:' + colors[0] + '; !important');
i need to color it dynamically
so i have used javascript to change the background color
but the problem is, the ripple effect on the button goes away
<button id="refresh" class="btn btn-default">New Quote</button>
@mboesiger90 @kirbyedy you can see my pen
kirbyedy
@kirbyedy
Jun 01 2017 06:57
hmmm well it does change for me
its working...
Pendramon
@Pendramon
Jun 01 2017 06:58
what ripple effect?
Saeed Jassani
@saeedjassani
Jun 01 2017 06:58
when you hover over the "new quote" button, the cursor doesnt change
Netrunner21
@Netrunner21
Jun 01 2017 06:59
How do you get small snippets of code to have the gray background on here (not the backtick method that has black background with markup)
Saeed Jassani
@saeedjassani
Jun 01 2017 06:59
and the default behavior (of indicating that the button has been hovered upon) is gone @Pendramon
small snippet @Netrunner21
put it in ``
Netrunner21
@Netrunner21
Jun 01 2017 06:59
ok like this
nice
Thanks @saeedjassani
CamperBot
@camperbot
Jun 01 2017 06:59
netrunner21 sends brownie points to @saeedjassani :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @saeedjassani |http://www.freecodecamp.com/saeedjassani
Saeed Jassani
@saeedjassani
Jun 01 2017 07:00
NP
Pendramon
@Pendramon
Jun 01 2017 07:00
@saeedjassani i see no code for animating the button hover
Saeed Jassani
@saeedjassani
Jun 01 2017 07:01
have you seen the behavior on default button?
the behavior is default, it does not need any code
Pendramon
@Pendramon
Jun 01 2017 07:02
Oh you mean the ripple effect is part of bootstrap?
Saeed Jassani
@saeedjassani
Jun 01 2017 07:02
yes
Pendramon
@Pendramon
Jun 01 2017 07:02
let me check
You are using bootstrap v4 or v3?
@saeedjassani
Saeed Jassani
@saeedjassani
Jun 01 2017 07:04
not exactly the ripple effect, but it does indicate that the button has been hovered
i want my button to be exactly like this
Pendramon
@Pendramon
Jun 01 2017 07:05
So as the background color changes the button to change aswell?
Saeed Jassani
@saeedjassani
Jun 01 2017 07:06
yes
Pendramon
@Pendramon
Jun 01 2017 07:06
That is not done by bootstrap but i will try to set it up
Saeed Jassani
@saeedjassani
Jun 01 2017 07:07
https://www.w3schools.com/bootstrap/bootstrap_buttons.asp see this @Pendramon , it is done by bootstrap too
Mohak Chaturvedi
@lucky73
Jun 01 2017 07:09
i am writing this code
<script>
$(document).ready(function() {
$("h3").addClass("animated slideInRight");
});
</script>
shows error unexpected token illegal
why
Pendramon
@Pendramon
Jun 01 2017 07:11
@saeedjassani Its just button hover and button active it doesn't change the background color on the page tho
@saeedjassani also your button is set to change to the first color of the colors array you need to do a for loop or something so it changes to different colors
h1tag
@h1tag
Jun 01 2017 07:18
@lucky73 on Codepen?
Mohak Chaturvedi
@lucky73
Jun 01 2017 07:18
@h1tag yes
h1tag
@h1tag
Jun 01 2017 07:18
@lucky73 @lucky73 did you add jQuery in the settings?
Mohak Chaturvedi
@lucky73
Jun 01 2017 07:19
yes i have added it
h1tag
@h1tag
Jun 01 2017 07:19
@lucky73 try putting the js code in the js box/section
and remove the script tags of course, when u put it there
Mohak Chaturvedi
@lucky73
Jun 01 2017 07:20
let me try
Pendramon
@Pendramon
Jun 01 2017 07:20
@saeedjassani also there is no need to set the box's style background-color in js you can just do it in css
or is there let me check what you have done xd
Mohak Chaturvedi
@lucky73
Jun 01 2017 07:22
@h1tag it is working now i thing the script tags are the problem
@h1tag thank you
CamperBot
@camperbot
Jun 01 2017 07:23
lucky73 sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 816 | @h1tag |http://www.freecodecamp.com/h1tag
h1tag
@h1tag
Jun 01 2017 07:23
@lucky73 yea, you have to put the js code in the js section on Codepen
leomartin
@abhirupleo
Jun 01 2017 07:31
how do i implement the tweet button in the quote machine
?
yunyanliu
@yunyanliu
Jun 01 2017 07:33
How to implement the function that click a tag of navbar, then go to relevant area in the same webpage?
Pendramon
@Pendramon
Jun 01 2017 07:34
@saeedjassani Here it is i just implemented a random number generator between 0 and the length of the colors array
h1tag
@h1tag
Jun 01 2017 07:36
@yunyanliu you can use anchor elements with ids
for example:
<a href="#about">about</a>

<div id = "about">
<!-- content -->
</div>
yunyanliu
@yunyanliu
Jun 01 2017 07:38
thank you, @h1tag
CamperBot
@camperbot
Jun 01 2017 07:38
yunyanliu sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 817 | @h1tag |http://www.freecodecamp.com/h1tag
Saeed Jassani
@saeedjassani
Jun 01 2017 07:43
@Pendramon thanks for that, but I was going to implement random number generator myself
CamperBot
@camperbot
Jun 01 2017 07:43
saeedjassani sends brownie points to @pendramon :sparkles: :thumbsup: :sparkles:
:cookie: 134 | @pendramon |http://www.freecodecamp.com/pendramon
need help in navbar!
i already added navbar-right class For "about " but it didn't go in that way.
help me out
Shukhrat
@mshukhrat
Jun 01 2017 07:50
Hey guys! I have an issues with adding image to my webpage in codepen can somebody help me with fixing this? https://codepen.io/Shukrhat/pen/EmqqRJ
prince verma
@verma-o
Jun 01 2017 07:52
@mshukhrat where you want to add an image in your code?
Hoang Thanh Tu
@hoangthanhtu
Jun 01 2017 07:52
@mshukhrat where is place that you want to add image?
Shukhrat
@mshukhrat
Jun 01 2017 07:54
thank you guys! I`m done
BangYuWen
@bangyuwen
Jun 01 2017 08:04
Hello, does anyone's dark sky api still works now?
It worked yesterday.
https://jsbin.com/bapahuquyi/edit?js,console
This is the console Error code:
Fetch API cannot load https://api.darksky.net/forecast/abc151891e74f78923426c014ba187e4/37.8267,-122.4233. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://null.jsbin.com' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
h1tag
@h1tag
Jun 01 2017 08:07
@bangyuwen add ?callback=? at the end of the darsky url
prince verma
@verma-o
Jun 01 2017 08:10
https://codepen.io/flintsky1/pen/EmBbBG
anyone ? need help in class called "navbar-right "
?
BangYuWen
@bangyuwen
Jun 01 2017 08:12
@h1tag
Do you mean like this? It still can't work haha
https://jsbin.com/bapahuquyi/edit?js,console
h1tag
@h1tag
Jun 01 2017 08:15
@bangyuwen it should work with getJSON. Don't know about fetch
BangYuWen
@bangyuwen
Jun 01 2017 08:25
@h1tag I'm trying AJAX now. But it seems not working.
I'll try getJSON later!
h1tag
@h1tag
Jun 01 2017 08:27
@bangyuwen I think in ajax you have to set dataType to jsonp
alpox
@alpox
Jun 01 2017 08:29
@bangyuwen if you want to use fetch, you can use crossorigin.me
BangYuWen
@bangyuwen
Jun 01 2017 08:33
@alpox I fixed it with adding prefix https://cors-anywhere.herokuapp.com/. THX a lot.
CamperBot
@camperbot
Jun 01 2017 08:33
bangyuwen sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1119 | @alpox |http://www.freecodecamp.com/alpox
BangYuWen
@bangyuwen
Jun 01 2017 08:33
@h1tag THX a lot,! I fixed it!
CamperBot
@camperbot
Jun 01 2017 08:33
bangyuwen sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 819 | @h1tag |http://www.freecodecamp.com/h1tag
h1tag
@h1tag
Jun 01 2017 08:34
@alpox hey, do you know the juggling async exercise in the continue working with nodejs servers challenge?
If yes, then can you give me a hint/hints on how to solve it
@bangyuwen YW!
Ayush Kumar
@Gr8ayu
Jun 01 2017 08:45

function destroyer(arr) {
  // Remove all the values
  var z="";
 var y=arguments[0];
  var x=[];  
  x= y.filter(function(a){

    for(var d=0;d<arguments.length;d++)
      {
        return "a";
      }//z+='\n';




 });


 return x; 
}

destroyer([1, 2, 3, 1, 2, 3], 4, 5);
what should be the out put of these code ???
alpox
@alpox
Jun 01 2017 08:46
@h1tag i didnt do any challenges of the backend. What is it about?
Radek
@radekjohn
Jun 01 2017 08:46
Hi, look at my tic-tac-toe!
h1tag
@h1tag
Jun 01 2017 08:47

@alpox

you need to use http.get(). However, this time you will be provided with
three URLs as the first three command-line arguments.

You must collect the complete content provided to you by each of the URLs
and print it to the console (stdout). You don't need to print out the
length, just the data as a String; one line per URL. The catch is that you
must print them out in the same order as the URLs are provided to you as
command-line arguments.

Adrian Padurean
@Securiteru
Jun 01 2017 08:48
@SkyC0der You gave me some feedback, regarding first point: I have no idea what Bootstrap 3/4 is, I just used those functions :-?
alpox
@alpox
Jun 01 2017 08:50
@h1tag Possible solutions:
  1. Load each content one after another (Start the next only if the last finished)
  2. Load them parallel and set the result to an exact position in an array (In the order you need them) and keep a counter which you increment each time the request of one came back. Then, you always test if the counter is 3 already. In that case, you got them all and the results are in the right order in the array.
  3. Put all calls into promises and use Promise.all to wait for them all to finish. The result will be in order.
h1tag
@h1tag
Jun 01 2017 08:52
@alpox there are also hints with the exercise (but I need more hints :smile:) . Do you want me to pm you the hints (because they're somewhat long)? Or post them in the backend room ? (maybe this will give you more context)
alpox
@alpox
Jun 01 2017 08:52
@h1tag private message would be best i guess :D
@radekjohn Maybe i'm missing out if its needed but i see no AI :D
h1tag
@h1tag
Jun 01 2017 08:54
@alpox Thank you. I pm'ed you
CamperBot
@camperbot
Jun 01 2017 08:54
h1tag sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1120 | @alpox |http://www.freecodecamp.com/alpox
h1tag
@h1tag
Jun 01 2017 08:54
@Securiteru are you using the same classes you learned in freecodecamp?
if yes, then you have to add Bootstrap 3 not 4
Radek
@radekjohn
Jun 01 2017 08:55
@alpox well, i did not used minimax. I just made strategy for every move. there are just nine of them
Pendramon
@Pendramon
Jun 01 2017 08:56
I never actually get to use bootstrap for my web pages x)
alpox
@alpox
Jun 01 2017 08:58
@radekjohn Hmm i just thought it needs at least a dumb one. I might be wrong
Radek
@radekjohn
Jun 01 2017 08:58
@alpox Do you think that AI was part of the assignment?
alpox
@alpox
Jun 01 2017 08:58
But i mean that the AI doesn't do anything and i have to set everything myself :D
@radekjohn 3. userstory: User Story: I can play a game of Tic Tac Toe with the computer. sounded for me like that
Not against myself :D
Jacky
@skywards1910
Jun 01 2017 08:59
read many thing but have not work in any real project. What should i do now?:worried:
Radek
@radekjohn
Jun 01 2017 09:00
@alpox to be honest, i tryed to implement minimax, but I failed
alpox
@alpox
Jun 01 2017 09:00
@skywards1910 Only read or also practiced?
Radek
@radekjohn
Jun 01 2017 09:00
@alpox did you choose the number of players one?
alpox
@alpox
Jun 01 2017 09:00
@radekjohn I think it doesn't have to be minimax - i guess a random placement of stones would do it too for this challenge
Jacky
@skywards1910
Jun 01 2017 09:01
@alpox practiced also
alpox
@alpox
Jun 01 2017 09:01
@radekjohn No i didn't
And i wondered why i can play without doing that :D
@radekjohn The gameboard should not be available before one chose all options - because i can now play, choose an option, and play on
Radek
@radekjohn
Jun 01 2017 09:02
@alpox zero players = computer against computer, one player = human gainst computer, two players = human against human
@alpox yes, I see. that can be fixed
alpox
@alpox
Jun 01 2017 09:03
@radekjohn Seems to work else :D
Radek
@radekjohn
Jun 01 2017 09:03
@alpox the code is very messy, because I had to do something else for about 2 months
@alpox It is the main reason why I was not able to implement minimax
Pendramon
@Pendramon
Jun 01 2017 09:04
That Clever AI is unbeatable xd
alpox
@alpox
Jun 01 2017 09:05
@radekjohn Your AI code is endless :D looks like minimax would be easier than that xD
@Pendramon I just beat it :-/
Radek
@radekjohn
Jun 01 2017 09:05
@Pendramon it is not it is not minimax
@alpox it is long but easy to understand
alpox
@alpox
Jun 01 2017 09:06
@radekjohn Not to me :D
Pendramon
@Pendramon
Jun 01 2017 09:06
Holy code thats alot xd
alpox
@alpox
Jun 01 2017 09:06
@Pendramon It seems to be easy to beat - just did it again :D
@Pendramon Have fun trying to beat mine :D
Pendramon
@Pendramon
Jun 01 2017 09:07
Dude if it goes first no way to beat it in clever mode
Radek
@radekjohn
Jun 01 2017 09:09
@alpox first it tryes to occupy central square. than it tryes to make row of its own two squares. than it is looking for row of two to win. if there is no such row, it is looking for such row owned by enemy to prevent him from winning. thats all
minimax is unbeatable by definition
alpox
@alpox
Jun 01 2017 09:10
@radekjohn yea minimax is pretty badass
No way to beat
I used it in my tictactoe
Radek
@radekjohn
Jun 01 2017 09:10
@alpox i will try to implement it next time
Pendramon
@Pendramon
Jun 01 2017 09:13
minimax is just block the middle for computer not to win xd
alpox
@alpox
Jun 01 2017 09:14
@Pendramon Nope :D
Pendramon
@Pendramon
Jun 01 2017 09:14
unless it goes first and puts middle then just put next to it and continue placing where he will win xd
Cato Myhre
@Zalmez
Jun 01 2017 09:14
can anyone help me with the spyscroll?
Radek
@radekjohn
Jun 01 2017 09:15
i have somewhere a funciton which blocks the board, but i do not remember its name :-)
Cato Myhre
@Zalmez
Jun 01 2017 09:15
can't get it to work q.q
alpox
@alpox
Jun 01 2017 09:15
@Pendramon My minimax doesn't even put it in the middle in the first iteration :D
Pendramon
@Pendramon
Jun 01 2017 09:15
or not nvm
It does if you reset it a couple of times
Cato Myhre
@Zalmez
Jun 01 2017 09:16
I have just used some place holder text for now, far from done. just want some of the basic looks to be there
alpox
@alpox
Jun 01 2017 09:16
Minimax is sometimes funny that it prefers a guaranteed win over a direct win
Pendramon
@Pendramon
Jun 01 2017 09:19
Oh yea just noticed that xd
rfvergeldedios
@rfvergeldedios
Jun 01 2017 09:19
Hi, may I ask for advice please? I don't understand why getJSON only picks up the last item of my array despite the variable used changes value at the start of the for-loop (getJSON at line 24 ). https://codepen.io/RafaelVD/pen/MogWRv?editors=0010
alpox
@alpox
Jun 01 2017 09:19
@Zalmez You have to add jQuery before adding the javascript for bootstrap v4 otherwise it doesn't work
Pendramon
@Pendramon
Jun 01 2017 09:20
okay i give up you cant win over minimax xd
alpox
@alpox
Jun 01 2017 09:20
:D nop
Pendramon
@Pendramon
Jun 01 2017 09:20
its just draw after draw
alpox
@alpox
Jun 01 2017 09:21
@rfvergeldedios i doesn't change anymore when the callback runs - it already arrived at the last item
@rfvergeldedios Use let i instead of var i in the for loop
h1tag
@h1tag
Jun 01 2017 09:23
@alpox also the for loop doesn't wait for getJSON to get the results, right?
Radek
@radekjohn
Jun 01 2017 09:23
OK, i am donne. the board is off until the player chooses everything
alpox
@alpox
Jun 01 2017 09:23
@h1tag One moment i'm looking. Still something off :D might be true
@h1tag But yea the for loop doesn't wait
This shouldn't matter though if you use let
Aaha
Its because of the other variables
var chnUser = 'https://wind-bow.glitch.me/twitch-api/users/'+channels[a];    
var userName = chnUser.substring(44, chnUser.length);;
It works if these both are defined with let
let chnUser = 'https://wind-bow.glitch.me/twitch-api/users/'+channels[a];    
let userName = chnUser.substring(44, chnUser.length);;
h1tag
@h1tag
Jun 01 2017 09:25

@alpox

This shouldn't matter though if you use let

why?

Faisal
@Faisa1khan
Jun 01 2017 09:25
image.png
alpox
@alpox
Jun 01 2017 09:27
@h1tag it matters when you use var to define a variable - because a variable declared with var is defined in full function scope - if you change it in another iteration, the value will have changed in the whole function (Also for the last iteration)
If you use let, the variable will be block scoped - means that it will preserve its state and will only be defined in its own block of code. This makes it possible that the variable stays the same if you do an asynchronous request and use the variable in the same block
Its bit hard to understand for new people here, but i usually tell to use let instead of var for that they don't have to rewrite the whole loop stuff :-)
@rfvergeldedios :point_up: 1. Juni 2017 11:23
Cato Myhre
@Zalmez
Jun 01 2017 09:28
@alpox wut, explain a little more.
Faisal
@Faisa1khan
Jun 01 2017 09:28
plzzz help why the navbar ain't align properly https://codepen.io/Hackplacea/pen/BZBBxO?editors=1000#0
Cato Myhre
@Zalmez
Jun 01 2017 09:28
like how?
alpox
@alpox
Jun 01 2017 09:28
@Zalmez You mean the jquery thing?
Cato Myhre
@Zalmez
Jun 01 2017 09:28
yeah
alpox
@alpox
Jun 01 2017 09:28
@Zalmez In the settings -> javascript
You have now bootstrap on the first line
h1tag
@h1tag
Jun 01 2017 09:28
@alpox I read that in YDKJS, but I think I need to review it. Thank you
CamperBot
@camperbot
Jun 01 2017 09:28
h1tag sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: h1tag already gave alpox points
alpox
@alpox
Jun 01 2017 09:29
But that won't work. Bootstrap depends on jquery - it cannot work without it. @Zalmez
Therefore, jQuery has to be on the first line and bootstrap on the second (jQuery must be loaded before the boostrap javascript loads)
Radek
@radekjohn
Jun 01 2017 09:29
OK, thanks a lot for consultations. see you all later
alpox
@alpox
Jun 01 2017 09:29
@radekjohn :wave:
Faisal
@Faisa1khan
Jun 01 2017 09:30
@alpox plzzz help why the navbar ain't align properly https://codepen.io/Hackplacea/pen/BZBBxO?editors=1000#0
Cato Myhre
@Zalmez
Jun 01 2017 09:30
hmm, is there a way for codepen to set it as a priority? can't see anything in the settings
rfvergeldedios
@rfvergeldedios
Jun 01 2017 09:31
@alpox So, 'let' works like a local variable in a function? In my case it attaches to the for-loop?
alpox
@alpox
Jun 01 2017 09:31
@Hackplacea You use bootstrap version 3 definitions but included version 4 of bootstrap in your pen.
Your navbar works when you remove the bootstrap css and add this instead:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Its a link to the css of version 3
@rfvergeldedios let works like a local variable in a block - so it attaches to always one iteration of the for-loop.
It would also be defined only in its own if block if you define it there:
if(true) {
    let foo = "bar";
    console.log(foo);
}
console.log(foo); // ERROR!!!
While:
if(true) {
    var foo = "bar";
    console.log(foo);
}
console.log(foo); // Prints "bar"
Matthias Lang
@MatLang
Jun 01 2017 09:34
Hey guys, currently working on the Build a tribute page. (https://codepen.io/ltcMatt/pen/wewvwO) I want to align the two portrait pictures in such a way that the two of them are under each other, and on the right of them the text is displayed. I tried doing that with bootstrap. Can you guys please help me out how to do this? Thanks.
Cato Myhre
@Zalmez
Jun 01 2017 09:34
@alpox ty XD mb
CamperBot
@camperbot
Jun 01 2017 09:34
:star2: 1121 | @alpox |http://www.freecodecamp.com/alpox
zalmez sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
alpox
@alpox
Jun 01 2017 09:34
@Zalmez No - it just loads the scripts in order in which they are added - first line first, second line second etc.
Cato Myhre
@Zalmez
Jun 01 2017 09:35
it works now ^^ I'm just not thinking logically atm. I didn't even add the jquery /facepalm
Faisal
@Faisa1khan
Jun 01 2017 09:36
@alpox look now its showing like that , still not align properly https://codepen.io/Hackplacea/pen/BZBBxO?editors=1000#0
alpox
@alpox
Jun 01 2017 09:36

@MatLang You almost got it. You forgot to close a div :-)

<img src="http://ecell.in/blog/wp-content/uploads/2016/06/elon-musk.jpg" class="img-fluid img-thumbnail" alt="Musk laughing at a conference">
</div>

:point_up: added the </div>

@Hackplacea You gotta remove the other bootstrap css :D
Matthias Lang
@MatLang
Jun 01 2017 09:37
@alpox Wow thx a lot! Sometimes the answer is so obvious :D
CamperBot
@camperbot
Jun 01 2017 09:37
matlang sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1122 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Jun 01 2017 09:38
@MatLang :D can confirm
h1tag
@h1tag
Jun 01 2017 09:38
@alpox but I thought the problem with using a for loop with async, is that the for loop won't wait for the result and will finish executing before it gets all the results, for example it will execute the code after the for loop which displays the results on the page without having the full results
Faisal
@Faisa1khan
Jun 01 2017 09:38
@alpox man! finally i got it thanks alot smile:
CamperBot
@camperbot
Jun 01 2017 09:38
hackplacea sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1123 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Jun 01 2017 09:40
@h1tag Why shouldn't it have the full results? You add the contents to the page inside of the callback - when you know that you have the data.
@h1tag The usual problem with it is just that inside of the callback, if you try to access variables you defined inside of the for loop but outside of the callback, these variables will have the state of the last iteration of the for loop instead of the value they had when the callback was called.
And this issue you can circumvent with using let
h1tag
@h1tag
Jun 01 2017 09:44
@alpox Got it ;)
Jonathan Cunanan
@jcunanan05
Jun 01 2017 09:44
how do you make dashboard pages? is it full of ajax requests? or is it just static and you have templates like the fixed navbar or side bar
rfvergeldedios
@rfvergeldedios
Jun 01 2017 09:45
@alpox Same here. Thank You.
CamperBot
@camperbot
Jun 01 2017 09:45
rfvergeldedios sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1124 | @alpox |http://www.freecodecamp.com/alpox
h1tag
@h1tag
Jun 01 2017 09:45
@alpox Thank you :)
CamperBot
@camperbot
Jun 01 2017 09:45
h1tag sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: h1tag already gave alpox points
alpox
@alpox
Jun 01 2017 09:46
@jcunanan05 Thats totally individual. Its done in all the possible ways :D
h1tag
@h1tag
Jun 01 2017 09:46
Sometimes it works and send more than one brownie, but not this time :/
alpox
@alpox
Jun 01 2017 09:47
@h1tag Don't worry, i don't need them :D
h1tag
@h1tag
Jun 01 2017 09:47
:+1:
But it's a nice way to show appreciation
alpox
@alpox
Jun 01 2017 09:48
@h1tag :D yea a fun way too
Jonathan Cunanan
@jcunanan05
Jun 01 2017 09:48
thanks @alpox well do you do both? uhmm when do you decide to do one or the other ? :)
CamperBot
@camperbot
Jun 01 2017 09:48
jcunanan05 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1125 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Jun 01 2017 09:49
@jcunanan05 I write all my pages with clientside rendering - usually react. So i just have templating with ajax :-)
Jonathan Cunanan
@jcunanan05
Jun 01 2017 09:49
sorry newbie here just deciding when to start things haha
Adrian Padurean
@Securiteru
Jun 01 2017 09:50
Guys, can I assign a class to all images from CSS? I was thinking something like
img {
max-width: 100%;
class: img-thumbnail center-block img-responsive;
}
alpox
@alpox
Jun 01 2017 09:52
@Securiteru You cannot assign classes from css - its no language which does anything else than styling
@Securiteru If you want to do that you have to use javascript
Adrian Padurean
@Securiteru
Jun 01 2017 09:54
like this? $(document).ready(function(){
$("img").addClass("img-thumbnail center-block img-responsive");
});
alpox
@alpox
Jun 01 2017 09:54
@Securiteru Yup :D
Jonathan Cunanan
@jcunanan05
Jun 01 2017 09:54
thanks @alpox to what extend of knowledge in js do you think we can handle learning using js frameworks? :)
CamperBot
@camperbot
Jun 01 2017 09:54
jcunanan05 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: jcunanan05 already gave alpox points
alpox
@alpox
Jun 01 2017 09:55
@jcunanan05 Can you specify your question? :-)
Jonathan Cunanan
@jcunanan05
Jun 01 2017 09:56
@alpox when is the time you know while practicing js, it's time i could start writing on a framework? haha
alpox
@alpox
Jun 01 2017 09:57
@jcunanan05 I guess the time you want to be more flexible when building a webpage :D
Mostly when you feel the need for a datarich application or flexibly changing content
MadsSN
@MadsSN
Jun 01 2017 10:00
Ahh this twitch api thing is stupid -.-
Jonathan Cunanan
@jcunanan05
Jun 01 2017 10:01
@alpox ohh i kinda get the picture now. when you operate on dynamic datas.. what do you think of vue? it kinda ships out of the box with the framework i'm learning now, laravel, I'm not sure whether to learn it or not :worried: :) haha
alpox
@alpox
Jun 01 2017 10:02
@jcunanan05 If you use laravel, just go ahead and do so. Vue sounds like a great framework
Adrian Padurean
@Securiteru
Jun 01 2017 10:03
@alpox, it's not doing what I asked :(
alpox
@alpox
Jun 01 2017 10:04
@Securiteru Did you include jquery?
Adrian Padurean
@Securiteru
Jun 01 2017 10:05
@alpox, I did, yes
@alpox, the syntax is correct in this form? "
$(document).ready(function(){
$("img").addClass("img-thumbnail center-block img-responsive");
});" ?
Jonathan Cunanan
@jcunanan05
Jun 01 2017 10:08
ok thanks so much @alpox for the good advices that you gave :) :fire: :clap:
i'm kinda torn because react is popular than vue and they say angular is hard and such :))
and with front end i'm kinda a clean slate for now. haha
CamperBot
@camperbot
Jun 01 2017 10:08
jcunanan05 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: jcunanan05 already gave alpox points
Toby Pagan
@WarMonkeyX
Jun 01 2017 10:09
Hey everyone. I have a quick question. Is it a good idea to learn HTML Pug at the beginning of learning or just learn standard HTML first?
alpox
@alpox
Jun 01 2017 10:13
@Securiteru Looks alright to me. If you have a pen, you can show
Henry
@GitHub-Henry
Jun 01 2017 10:16
@WarMonkeyX HTML cuz it is the foundation
Toby Pagan
@WarMonkeyX
Jun 01 2017 10:19
Ok, kinda what I thought, but wanted to get an opinion from people more advanced than me haha, Thanks @GitHub-Henry
CamperBot
@camperbot
Jun 01 2017 10:19
warmonkeyx sends brownie points to @github-henry :sparkles: :thumbsup: :sparkles:
:cookie: 335 | @github-henry |http://www.freecodecamp.com/github-henry
Pendramon
@Pendramon
Jun 01 2017 10:19
Transition on visibility doesn't work? like slowly fade in/fade out
Matthias Lang
@MatLang
Jun 01 2017 10:20
Here's my tribute page thus far: https://codepen.io/ltcMatt/full/wewvwO/. Would really appreciate any feedback. I'm somehow worried about the col-md design. When the window is big it kinda looks decent. Thx.
Adrian Padurean
@Securiteru
Jun 01 2017 10:21
@MatLang, I also made one about Elon, lol! Also, in the top right side you can change view to /full/ and well it's a little better for showcasing it :D
Henry
@GitHub-Henry
Jun 01 2017 10:22
@MatLang is this correct Leaves Stanford PhD program after two days to help found Zip2 my mistake
Matthias Lang
@MatLang
Jun 01 2017 10:22
@Securiteru haha that's pretty cool! Although he has some weird character traits at times I absolutely like him :)
Adrian Padurean
@Securiteru
Jun 01 2017 10:24
@GitHub-Henry, huh? are you asking me if the information is correct? :-o I don't know. I found this: "In 1995, at age 24, Musk moved to California to begin a PhD in applied physics and materials science at Stanford University, but left the program after two days to pursue his entrepreneurial aspirations in the areas of the Internet, renewable energy and outer space.[40][47] In 2002, he became a U.S. citizen.[48][49]"
Matthias Lang
@MatLang
Jun 01 2017 10:25
@GitHub-Henry not sure about the loan but pretty sure that he left Stanford pretty early.
Henry
@GitHub-Henry
Jun 01 2017 10:26
@MatLang the question is about grammar not fact, found perhaps should be fund?
Abhimanyu Ray
@maad-boy
Jun 01 2017 10:27
how to set background img to body in codepen
i am having problem related to links
Matthias Lang
@MatLang
Jun 01 2017 10:27
@GitHub-Henry hm I think found is the correct word for it.
Henry
@GitHub-Henry
Jun 01 2017 10:29
@MatLang so he found Zip2 with a 28000 loan?
Pendramon
@Pendramon
Jun 01 2017 10:29
xd
Henry
@GitHub-Henry
Jun 01 2017 10:29
@MatLang now I get what you are saying, he was a founding member with a loan of 28k
Adrian Padurean
@Securiteru
Jun 01 2017 10:30
@maad-boy https://www.w3schools.com/html/html_images.asp this website is really good
Matthias Lang
@MatLang
Jun 01 2017 10:30
@GitHub-Henry lol, yes that is what I meant :D
Henry
@GitHub-Henry
Jun 01 2017 10:31
@MatLang took me long enough, interesting guy, good tribute
Pendramon
@Pendramon
Jun 01 2017 10:31
Is it somehow possible to jump straight to JSON APIs? like i just want to learn it i don't want my progress to save.
Adrian Padurean
@Securiteru
Jun 01 2017 10:32
Matthias Lang
@MatLang
Jun 01 2017 10:32
@GitHub-Henry I highly recommend his book: Elon Musk: Tesla, SpaceX, and the Quest for a Fantastic Future. In case you want to know more about him. Was just hearing the audio book in the last few weeks. His mindset is amazing. Thanks for having a look at my page :)
CamperBot
@camperbot
Jun 01 2017 10:32
matlang sends brownie points to @github-henry :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @github-henry |http://www.freecodecamp.com/github-henry
Matthias Lang
@MatLang
Jun 01 2017 10:33
@Securiteru will have a look at it after launch, sorry need to go right now. BRB.
Abhimanyu Ray
@maad-boy
Jun 01 2017 10:33
can someone help me with img links in codepen
Adrian Padurean
@Securiteru
Jun 01 2017 10:34
@maad-boy, yes, wsup?
Abhimanyu Ray
@maad-boy
Jun 01 2017 10:36
@Securiteru this is my code for image "<img src = "https://www.123rf.com/photo_23842787_two-dead-trunks-in-very-hot-and-dry-desert-by-sunset-360-degrees-panoramic-effect.html?term=very%2Bhot" target = "_blank">" its not working its somthing related to links
@Securiteru this is my code for image "<img src = "https://www.123rf.com/photo_23842787_two-dead-trunks-in-very-hot-and-dry-desert-by-sunset-360-degrees-panoramic-effect.html?term=very%2Bhot" target = "_blank">" its not working its somthing related to links
Pendramon
@Pendramon
Jun 01 2017 10:37
Anyone knows if it is somehow possible to jump straight to JSON APIs? like i just want to learn it i don't want my progress to save on freeCodeCamp. Or do you know any good tutorials on it other than freeCodeCamp?
oh nvm apparently i can just do them if i wanted to xd
Henry
@GitHub-Henry
Jun 01 2017 10:40
@Securiteru Elon is certainly an amazing man, interesting to learn about him with your tribute.
Adrian Padurean
@Securiteru
Jun 01 2017 10:40
@GitHub-Henry Thx! :D
CamperBot
@camperbot
Jun 01 2017 10:40
securiteru sends brownie points to @github-henry :sparkles: :thumbsup: :sparkles:
:cookie: 337 | @github-henry |http://www.freecodecamp.com/github-henry
Abhimanyu Ray
@maad-boy
Jun 01 2017 10:44
@Securiteru sir please can you help me with img tag link
Adrian Padurean
@Securiteru
Jun 01 2017 10:45
@maad-boy, try this: <img src="https://www.123rf.com/photo_23842787_two-dead-trunks-in-very-hot-and-dry-desert-by-sunset-360-degrees-panoramic-effect.html?term=very%2Bhot" target = "blank">
I sent you a private message, it's on the left side :D
Abhimanyu Ray
@maad-boy
Jun 01 2017 10:46
@Securiteru ok sir let me check
Adrian Padurean
@Securiteru
Jun 01 2017 10:47
also, that link is odd..the site itself is not a picture, it's a full website, this is the picture link: https://previews.123rf.com/images/elenaphotos21/elenaphotos211311/elenaphotos21131100071/23842787-Two-dead-trunks-in-very-hot-and-dry-desert-by-sunset-360-degrees-panoramic-effect-Stock-Photo.jpg" but it has a watermark
kirbyedy
@kirbyedy
Jun 01 2017 11:13
in order to use that picture you have to pay for it
do not use watermarked pictures, as it is copyright infringment
Adrian Padurean
@Securiteru
Jun 01 2017 11:14
He won't publish the picture anywhere, he's just using it for this project :-? is it bad?
Emilio Gumayagay
@ergumayagay
Jun 01 2017 11:16
hi guys I need some tips on the zipline portfolio project. here is what I'm able to create so far https://codepen.io/ergumayagay/full/oWKJXO/ maybe you could suggest things which I can add, thanks in advance
Adrian Padurean
@Securiteru
Jun 01 2017 11:17
I say it's looking good! :D
kirbyedy
@kirbyedy
Jun 01 2017 11:19
@ergumayagay good start, the problem I found is the positioning, once I click on the About button, this happens
make sure the section name is visible
Screen Shot 2017-06-01 at 14.18.33.png
I guess the same would happen with portfolio link, but since its not big enough, cant be seen at the moment
Emilio Gumayagay
@ergumayagay
Jun 01 2017 11:20
@kirbyedy yah honestly I've noticed that, I can't seem to find any solution to make the section heading visible
@kirbyedy i thinks its a size issue
kirbyedy
@kirbyedy
Jun 01 2017 11:20
you should use offset top
Emilio Gumayagay
@ergumayagay
Jun 01 2017 11:21
@kirbyedy Oh wait i'll try to do that
@kirbyedy hey this is akward, how to i do that offset thingy
kirbyedy
@kirbyedy
Jun 01 2017 11:25
something like this: offset().top-100
here is the documentation for it
Emilio Gumayagay
@ergumayagay
Jun 01 2017 11:28
@kirbyedy oh thanks, honestly i didnt dive into jquery that much yet
CamperBot
@camperbot
Jun 01 2017 11:28
:star2: 2089 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
ergumayagay sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
Emilio Gumayagay
@ergumayagay
Jun 01 2017 11:44
@kirbyedy is there any way to do that without using jquery yet?
Emilio Gumayagay
@ergumayagay
Jun 01 2017 12:07
my internal links on my panels don't work properly can anyone tell me whats wrong https://codepen.io/ergumayagay/details/oWKJXO/
Adrian Padurean
@Securiteru
Jun 01 2017 12:12
Uhm guys, weird question: where do I find a list of DIV classes?
h1tag
@h1tag
Jun 01 2017 12:15
@Securiteru you mean Bootstrap classes?
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:19
@Securiteru ? you make them up so there is none.
<div class="kitteh"> <h1>My kitteh div</h1></div>
Adrian Padurean
@Securiteru
Jun 01 2017 12:21
what do you mean you make them? I know you can create your own sure but classes like "container-liquid" are from a source, right?
yes bootstrap classes for divs
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:23
Ah yes, if you're using a framework, they'll be documented in your framework. https://v4-alpha.getbootstrap.com/components
Brian
@Cornielle
Jun 01 2017 12:23
Good Morning ppl
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:23
hello @Cornielle :coffee:
Brian
@Cornielle
Jun 01 2017 12:24
@baseballpoetess :)
Adrian Padurean
@Securiteru
Jun 01 2017 12:24
@Jhinox, yes, that would be it, ty!
CamperBot
@camperbot
Jun 01 2017 12:24
securiteru sends brownie points to @jhinox :sparkles: :thumbsup: :sparkles:
:cookie: 246 | @jhinox |http://www.freecodecamp.com/jhinox
Brian
@Cornielle
Jun 01 2017 12:26
@baseballpoetess mag , i want to make 3 rounded buttons , but i cant keep in the center these buttons i want the buttons are in center with margin and full responsive , you know about a code that works perfectly? look that template
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:26
Okay, in the center of your <div> ?
Brian
@Cornielle
Jun 01 2017 12:27
look
uhmm yess
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:28
Are you trying to replicate that?
Brian
@Cornielle
Jun 01 2017 12:28
in the bottom we have 3 buttons and if you resize you will see that have responsive perfectly i want to make that
yes
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:29
Brian
@Cornielle
Jun 01 2017 12:29
:/ my work is to strange , and my objetive is try to replicate that section
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:29
(in terms of positioning? ) if so, yes, I know how.
Brian
@Cornielle
Jun 01 2017 12:30
ok looks good but look that when i open the html or js , the buttons change your structure
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:30
YOu have to click it -- the preview is wrong and shows them on the left
Brian
@Cornielle
Jun 01 2017 12:30
i think is positioning , you re right thats my basic big problem
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:31
Okay, if you look at the CSS in my codepen .... i have a <buttons> div and 3 buttons.
Brian
@Cornielle
Jun 01 2017 12:31
@baseballpoetess oh is true
right
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:31
*2
typo
You could add more buttons and they'd spread in the space alloted.
Fork it and copy one of the buttons and you'll see it work.
Brian
@Cornielle
Jun 01 2017 12:32
let me see okay
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:32
The css for each button shows how it's constructed....they're different IDs becuase they do different things but they're the same .... stuff inside.
Brian
@Cornielle
Jun 01 2017 12:33
@baseballpoetess works pretty nice
what is the different bewteen percent and pixels in the case of margins and paddings?
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:33
I was gonna do facebook but decided to move on, that's how I know 3 buttons or 4 or whatever would work.
% is a percentage of the ...space. pixels is number of pixels.
Brian
@Cornielle
Jun 01 2017 12:35
ok , understood
thanks @baseballpoetess
CamperBot
@camperbot
Jun 01 2017 12:35
cornielle sends brownie points to @baseballpoetess :sparkles: :thumbsup: :sparkles:
:cookie: 443 | @baseballpoetess |http://www.freecodecamp.com/baseballpoetess
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:35
you're welcome.
Brian
@Cornielle
Jun 01 2017 12:35
i will to study your structure in css more and i will try with that
the js is mandatory?
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:35
The js is for the random quote and tweeting it, not for the spacing of the buttons.
so you don't need to look at it.
Brian
@Cornielle
Jun 01 2017 12:36
@baseballpoetess Good :smile:
@baseballpoetess omg align-items?? in the dom that property work for divs?
is the similar sentence like float:left, float:right? etc.?
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:40
Yeah, I'm just learning it. I read about it on w3schools
I think it's useful for .... multiples whereas left-right is good if you have two of something.
Brian
@Cornielle
Jun 01 2017 12:41
these things is when certainly persons cant understand , this part of my life is called happyness XD
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:41
:cake:
Brian
@Cornielle
Jun 01 2017 12:41
you say two things or more?
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:42
more than two.
But 2 is okay.
I originally had 3 cuz I was gonna do facebook too.
I decided to move forward since facebook wasn't in the user story.
Brian
@Cornielle
Jun 01 2017 12:43
okay
goo
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:44
One would be okay. It's ... you can scale it if you start it out with one.
Brian
@Cornielle
Jun 01 2017 12:46
okay , good
but look in this case i try to coment the align but i didnt see the effect
i try to look it
for example right now i dont have align-item , and works fine
but i just have the 3 buttons
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:48
Oh, okay.
Brian
@Cornielle
Jun 01 2017 12:49
i see the display flex is more important
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:49
Yes.
Brian
@Cornielle
Jun 01 2017 12:49
i will read about align and display , is too important
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:49
I have to go. I'll be back on later though.
It's 7:50ish here and I need to shower ... lol
Brian
@Cornielle
Jun 01 2017 12:50
@baseballpoetess ok thanks for all
CamperBot
@camperbot
Jun 01 2017 12:50
cornielle sends brownie points to @baseballpoetess :sparkles: :thumbsup: :sparkles:
:warning: cornielle already gave baseballpoetess points
Brian
@Cornielle
Jun 01 2017 12:50
jejeje good
kirbyedy
@kirbyedy
Jun 01 2017 13:00
@ergumayagay maybe here: http://youmightnotneedjquery.com/
Tardigra
@Tardigra
Jun 01 2017 13:18
Hi there, I am currently working on the "local Weather" app. How do you deal with Icons? Did you upgrade CodePen to Pro or can you recommend weather-icons ready to use without downloading them? --- Thank's for your help.
Nikola Mitrovic
@mitar06
Jun 01 2017 13:48
Hello, I am no the local weather app too, and a can't seem to get anything form the API, any ideas why?
Brandon Blackwell
@Radlerz1
Jun 01 2017 13:48
send your pen
h1tag
@h1tag
Jun 01 2017 13:52
@mitar06 if you're using openweather, use another one like: darksky or apixu
Brandon Blackwell
@Radlerz1
Jun 01 2017 13:55
your using the sample call?
h1tag
@h1tag
Jun 01 2017 13:56
add ?callback=? at the end
@mitar06
if you check the browser you're getting a CORS error, this fixes it
Nikola Mitrovic
@mitar06
Jun 01 2017 13:58
Thanks, that did the trick, why is this necessary?
h1tag
@h1tag
Jun 01 2017 14:04
@mitar06 read the comments in this code: https://codepen.io/skycoder/pen/EmdVBL
Thanks @SkyC0der
CamperBot
@camperbot
Jun 01 2017 14:06
h1tag sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1572 | @skyc0der |http://www.freecodecamp.com/skyc0der
Nikola Mitrovic
@mitar06
Jun 01 2017 14:07
Thanks @h1tag
CamperBot
@camperbot
Jun 01 2017 14:07
mitar06 sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 820 | @h1tag |http://www.freecodecamp.com/h1tag
rfvergeldedios
@rfvergeldedios
Jun 01 2017 14:11
Hi, Having trouble getting the logic down on the Twitch Tv API. So, I can now display if an account is inactive or does not exist and if the stream is online. What I'm stuck in is would I have to nest getJSONs to retrieve /users/ data and /streams/ data to display users with existing accounts but are offline?
Brandon Blackwell
@Radlerz1
Jun 01 2017 14:14
can you rephrase that question? I don't fully understand what your asking @rfvergeldedios
rfvergeldedios
@rfvergeldedios
Jun 01 2017 14:16
So, to get the non-existing account, I accessed /users/ to figure out which accounts in the given array are inactive/non-existing. To get the active and currently online streams, I went to /streams/.
What I'm stuck in right now is how to filter and display the accounts that exist but are offline?
prince verma
@verma-o
Jun 01 2017 14:25
<header >

 <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
     <div class="navbar-header">
        <a href="#" class="navbar-brand">
         <img src="https://openclipart.org/download/244323/ColoredMandala.svg" alt="image " class="svg-img img-responsive" />
         </a>
        <div class="collapse navbar-collapse navbarHeader">
         <ul class="nav navbar-nav navbar-right">
            <a href="#">About</a>
            </ul>
         </div>
        </div>

     </div>

    </nav>

</header>
Why is that "about " is not showing ?
on the screen
rfvergeldedios
@rfvergeldedios
Jun 01 2017 14:26
@verma-o try to add <li> before and </li> after
prince verma
@verma-o
Jun 01 2017 14:27
i just did, still not showing
i am facing this problem for like 4 hour and frustrated now
Brandon Blackwell
@Radlerz1
Jun 01 2017 14:30
<li><a>whatever goes here</a></li>
prince verma
@verma-o
Jun 01 2017 14:30

 <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
     <div class="navbar-header">
        <a href="#" class="navbar-brand">
         <img src="https://openclipart.org/download/244323/ColoredMandala.svg" alt="image " class="svg-img img-responsive" />
         </a>
        <div class="collapse navbar-collapse navbarHeader">
         <ul class="nav navbar-nav navbar-right">
            <li><a href="#">About</a></li>
            </ul>
         </div>
        </div>

     </div>

    </nav>
i did still not working :worried:
Brandon Blackwell
@Radlerz1
Jun 01 2017 14:31
@rfvergeldedios try calling and api with a user offline and a user online. Than use that info to manipulate what data you want to retrieve/display
Idk I was up to late. I'm drawing blanks myself today quite a lot
rfvergeldedios
@rfvergeldedios
Jun 01 2017 14:36
@Radlerz1 Going through /users/ and /channels/ to see if i missed something. Is there a way to view the api data so that it doesn't look like a one line of text that came from notepad.exe? At least have the variables and data arranged like an xml file.
Brandon Blackwell
@Radlerz1
Jun 01 2017 14:37
something like this maybe
what I use
rfvergeldedios
@rfvergeldedios
Jun 01 2017 14:38
@Radlerz1 Thanks. I was running out of eyedrops. :)
CamperBot
@camperbot
Jun 01 2017 14:38
rfvergeldedios sends brownie points to @radlerz1 :sparkles: :thumbsup: :sparkles:
:cookie: 298 | @radlerz1 |http://www.freecodecamp.com/radlerz1
Brandon Blackwell
@Radlerz1
Jun 01 2017 14:38
haha yeah that makes thing way easier
Brian
@Cornielle
Jun 01 2017 14:42
HELLO friends , i have a questions
question*
What is necesary to know and to have , for make a webpage like freepik , pixabay etc?
Ayush Kumar
@Gr8ayu
Jun 01 2017 14:51
what is the link of bootstrap that should be added in head ??
Ken Haduch
@khaduch
Jun 01 2017 14:58
@Gr8ayu - you probably want Version 3? this link: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Gulsvi
@gulsvi
Jun 01 2017 14:59
@Gr8ayu It depends on which version you want to use. Here is the documentation for Bootstrap 3 and 4 - the links to the CSS and JS for those versions can be found in the getting started sections:
Ayush Kumar
@Gr8ayu
Jun 01 2017 14:59
@SkyC0der @khaduch thnx
CamperBot
@camperbot
Jun 01 2017 14:59
gr8ayu sends brownie points to @skyc0der and @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1573 | @skyc0der |http://www.freecodecamp.com/skyc0der
:star2: 2933 | @khaduch |http://www.freecodecamp.com/khaduch
Gulsvi
@gulsvi
Jun 01 2017 15:00
@Cornielle Most people here use https://postimage.org for images
Ayush Kumar
@Gr8ayu
Jun 01 2017 15:00
I am coding on codepen and someone told me that its default bootstrap version doesnt support much
Brian
@Cornielle
Jun 01 2017 15:01
@SkyC0der ok , i see that :)
@SkyC0der but im talking about how works that business
Gulsvi
@gulsvi
Jun 01 2017 15:01

@Gr8ayu Correct, the default is version 4, we learn version 3 at Free Code Camp. Click "Settings", then "CSS" and add this one:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

Then click "JavaScript" and add these two libraries (the order is important, jQuery must go first):
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

Ayush Kumar
@Gr8ayu
Jun 01 2017 15:02
@SkyC0der what is the use of these javascript library ??
Gulsvi
@gulsvi
Jun 01 2017 15:03
@Cornielle Maybe this will help :) http://www.wikihow.com/Set-up-an-Image-Hosting-Site
@Gr8ayu Bootstrap has some features that require JavaScript. Their javascript library uses jQuery: http://getbootstrap.com/javascript/
If you don't use those features, you don't need to add jQuery or Bootstrap.js
Ken Haduch
@khaduch
Jun 01 2017 15:06
@Gr8ayu - the default for CodePen's bootstrap "quick adds" is V4. It supports a lot (maybe most) of the previous version, but you have to account for several differences that exist. Some of the changes are significant. Since the lessons are based on V3, it's best to stay with that for now. In addition, V4 is "alpha" version, so it might change as time goes on. There is a migration document that lists differences, if you want to see what's there. https://v4-alpha.getbootstrap.com/migration/ - if you are up for making the switch, and tracking ongoing changes that might happen, using V4 is fine. I would say that V3 is the path of least resistance at this point in time?
Gulsvi
@gulsvi
Jun 01 2017 15:06
@Cornielle As far as making money - I'm guessing most image hosting sites use ads and harvest data about what users are doing on their site.
Brian
@Cornielle
Jun 01 2017 15:07
@SkyC0der is true , i agree
Ayush Kumar
@Gr8ayu
Jun 01 2017 15:13
@khaduch @SkyC0der thnx for telling me these in detail.
CamperBot
@camperbot
Jun 01 2017 15:13
gr8ayu sends brownie points to @khaduch and @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: gr8ayu already gave skyc0der points
:warning: gr8ayu already gave khaduch points
Ken Haduch
@khaduch
Jun 01 2017 15:15
@Gr8ayu :+1:
Kevin
@mybaseball52
Jun 01 2017 15:18
HI, I want to ask the challenge Build a Random Quote Machine, hoiw can I make the post be tweet? I wrote like this
$("#tweet").click(function(){
    if(!inIframe()) {
      openURL('https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor));
    }
  })
Ayush Kumar
@Gr8ayu
Jun 01 2017 15:19
@khaduch is there any code to make <div> appear in center of screen vertically?
@SkyC0der
Gulsvi
@gulsvi
Jun 01 2017 15:20
@Gr8ayu What code have you tried so far?
Happy to help you fix it if it isn't working for you
@mybaseball52 What does inIframe() do?
Ayush Kumar
@Gr8ayu
Jun 01 2017 15:21
@SkyC0der I dont know anything like that for vertical , for horizontal align:auto;
PipsChips
@PipsChips
Jun 01 2017 15:21
Hi! Could someone pls check my JS code, and help me getting JSON object for the 'Show the Local Weather' project:
https://codepen.io/PipsChips/pen/XpYvdm
Give that stuff a try first, if it doesn't work, show us your code and we can see how to help ^^ :)
Kevin
@mybaseball52
Jun 01 2017 15:22
@SkyC0der
It does
function inIframe () { try { return window.self !== window.top; } catch (e) { return true; } }
Gulsvi
@gulsvi
Jun 01 2017 15:23
@mybaseball52 I'm curious, what is the purpose of that code?
PipsChips
@PipsChips
Jun 01 2017 15:23
srry, pls check this one: https://codepen.io/PipsChips/pen/XpYvdm
Gulsvi
@gulsvi
Jun 01 2017 15:23
(I didn't need anything like that for my Tweet button)
Kevin
@mybaseball52
Jun 01 2017 15:24
@SkyC0der Oh, I just learn from the sample code.
Gulsvi
@gulsvi
Jun 01 2017 15:25
@PipsChips Open your browser's debug console (Ctrl+Shift+J on Windows/Linux, Command + Option + J on Mac)
@Securiteru You're welcome
@mybaseball52 Your code looks good to me - I just don't understand what your inIframe function is used for.
Kevin
@mybaseball52
Jun 01 2017 15:30
@SkyC0der I courious how can you tweet the quote, is there any guide to follow it?
I search the words "tweet a post" and yet get what I want
Andrew Hickman
@ahickman3
Jun 01 2017 15:30
quick question, when i use vh it sets the height of that text box in relation to (even tho the parent does not have position: relative) the parent block, but when i use rem, it sets the text block in relation to the web page. Any idea why that is so?
Gulsvi
@gulsvi
Jun 01 2017 15:30
@mybaseball52 This is the documentation on the twitter website: https://dev.twitter.com/web/tweet-button/web-intent
Basically: https://twitter.com/intent/tweet?text=hello world to tweet the text "hello world"
Kevin
@mybaseball52
Jun 01 2017 15:31
@SkyC0der
Oh, thank you!
CamperBot
@camperbot
Jun 01 2017 15:31
mybaseball52 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1574 | @skyc0der |http://www.freecodecamp.com/skyc0der
Andrew Hickman
@ahickman3
Jun 01 2017 15:32
trying to learn responsive design and its goin eh lol anyone know the logic?
Gulsvi
@gulsvi
Jun 01 2017 15:32
@fullmetal7777 vh should be relative to the viewport, rem should be relative to the font size you have set for html or body
Andrew Hickman
@ahickman3
Jun 01 2017 15:33
@SkyC0der the text is in a div block, and thats what getting the property. So top: 34rem with change the position relative to the viewport, while #vh will change the position relative to its div block parent
Gulsvi
@gulsvi
Jun 01 2017 15:34
@fullmetal7777 Change the font-size of your body element and see how your top: 34rem changes
vh has no relation to a div block or parent element - it is completely relative to your viewport (the size of your browser window)
5vh = 5% the height of your window
Andrew Hickman
@ahickman3
Jun 01 2017 15:36
@SkyC0der i do understand that part, ive done a little research on em and rem to atleast understand how they work, but its changing the view in relation to different elements thats confusing me.
@SkyC0der I think i may have figure it out. my background picture actually going above the viewport, but i guess its still technically in html? so the top of the page is farther up than the viewport? im not sure. Bottom with vh works but top with vh does not work as id expect it
@fullmetal7777 basically with top: #vh its acting like the page goes higher than can actually be viewed
Gulsvi
@gulsvi
Jun 01 2017 15:38
@fullmetal7777 I'm not sure what you're looking at :) but if you can show me what's going on, I can try and help explain it better
Andrew Hickman
@ahickman3
Jun 01 2017 15:38
@SkyC0der codepen messes up my view completely, but i can atleast put my code in there and you can throw it on your ide and view it? sorry for the trouble lol
@fullmetal7777 so bascially, bottom: #vh under .scuba-text works as you would think, but top: #vh does not
Gulsvi
@gulsvi
Jun 01 2017 15:40
@fullmetal7777 Codepen is "messing up your code" because you aren't using the settings correctly.
Andrew Hickman
@ahickman3
Jun 01 2017 15:40
@fullmetal7777 i have no clue why codepen fudged up the view so much, but it looks fine when i open it through chrome, also all the images are getting from urls. Here the code on a website im hosting http://andrewsawesomesite.com/
Ejikemeuwa Eric Nnanna
@melete90
Jun 01 2017 15:40
Hi guys, <div class="jumbotron"></div> doesn't work. please what do I do?
Gulsvi
@gulsvi
Jun 01 2017 15:41

All of this:

<script src="https://use.fontawesome.com/717f3e0b5b.js"></script>
<link rel="stylesheet" href="main.css">
<link href='https://fonts.googleapis.com/css?family=Cinzel|Alegreya SC' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Cinzel' rel='stylesheet'>

<html>
    <head>
        <title>Tribute to My Father</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

Needs to go in the settings section

Andrew Hickman
@ahickman3
Jun 01 2017 15:41
@SkyC0der It loads correctly on the website though? Seems to be codepen to me, but maybe im missing something
@SkyC0der id trust it working on chrome than codepen lol
Gulsvi
@gulsvi
Jun 01 2017 15:41
@fullmetal7777 codepen's HTML panel should only have the stuff between your <body> tags.
everything else goes in settings - then it will work like anywhere else
Andrew Hickman
@ahickman3
Jun 01 2017 15:42
@SkyC0der ahh im sure there was a reason, i just had no clue. Sorry about that, never knew that lol
Gulsvi
@gulsvi
Jun 01 2017 15:43
Plus, I'm not sure how your website is working elsewhere when you have fonts and stylesheets defined outside of your <html> tags
JD Tadlock
@jdtdesigns
Jun 01 2017 15:43
@fullmetal7777 You should also avoid the use of floats these days. Flexbox's support is strong ;)
Gulsvi
@gulsvi
Jun 01 2017 15:44
@fullmetal7777 Set it up this way for starters and see if you're noticing the same behavior: https://codepen.io/skycoder/pen/RgbKLq?editors=1000
Andrew Hickman
@ahickman3
Jun 01 2017 15:45
@SkyC0der i took off the scripts in the html and still no change :/ also i linked them correctly in the settings first. I always figured you linked everything outside of the html tag. See, these are the important things that i need to be learning, so thank you lol
CamperBot
@camperbot
Jun 01 2017 15:45
fullmetal7777 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1575 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Jun 01 2017 15:46
@fullmetal7777 This is a good reference: https://github.com/joshbuchea/HEAD
Andrew Hickman
@ahickman3
Jun 01 2017 15:47
@jdtdesigns which part do yo umean by floats?
Ejikemeuwa Eric Nnanna
@melete90
Jun 01 2017 15:47
<div class="jumbotron"></div> does not work on my computer, what do i do?
Gulsvi
@gulsvi
Jun 01 2017 15:48
And, yeah, as long as you don't care about Internet Explorer, you can use flexbox and ditch the floats. Otherwise, it gets messy.
Think JD's referring to:
#nav-head-text{
    float: left;
    margin: 1px 0 0 0;
}
PipsChips
@PipsChips
Jun 01 2017 15:48
@SkyC0der
srry, this one is the last version:
https://codepen.io/PipsChips/pen/XpYvdm
Andrew Hickman
@ahickman3
Jun 01 2017 15:48
@SkyC0der so removie the head, html and body tag? is that the only changes you made? aside from adding all the external links in the settings, which i did
Gulsvi
@gulsvi
Jun 01 2017 15:49
@fullmetal7777 And I put your <script> at the very bottom of the HTML panel
@PipsChips Everything must use HTTPS now in codepen - your HTTPS proxy is blocked because it's ultimately going through a HTTP endpoint.
PipsChips
@PipsChips
Jun 01 2017 15:50
I've changed the http-image with a htttps-animation, and tried to get json using https://crossorigin.me/ as an url's prefix
Andrew Hickman
@ahickman3
Jun 01 2017 15:51
@SkyC0der what i would set the display to flex and use margin to move the div objects?
Gulsvi
@gulsvi
Jun 01 2017 15:51
Mixed Content: The page at 'https://s.codepen.io/PipsChips/pen/XpYvdm?editors=0010' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.openweathermap.org/data/2.5/weather?......'. This request has been blocked; the content must be served over HTTPS.
@fullmetal7777 You would use flexbox justify-content I believe: https://css-tricks.com/almanac/properties/j/justify-content/
@PipsChips The only fix for your weather app is to host it on a different server or use a different Weather API that supports HTTPS for free (like Dark Sky)
Andrew Hickman
@ahickman3
Jun 01 2017 15:54
@SkyC0der okie doke, i fixed that, lemme re-upload my stuff, one sec.
PipsChips
@PipsChips
Jun 01 2017 15:55
@SkyC0der
ok, thnx. gonna try that site
CamperBot
@camperbot
Jun 01 2017 15:55
pipschips sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1576 | @skyc0der |http://www.freecodecamp.com/skyc0der
JD Tadlock
@jdtdesigns
Jun 01 2017 15:55
Here's some global stats for browser usage. Unless your site is directed towards an older clientele, there's no reason to support ie 10 and below. IE11 supports flexbox with prefixes. http://gs.statcounter.com/
Gulsvi
@gulsvi
Jun 01 2017 15:55
@PipsChips Good luck :+1: this is a pain for many people right now :(
Andrew Hickman
@ahickman3
Jun 01 2017 15:56
@SkyC0der https://codepen.io/fullmetal7777/pen/bWzegK things are atleast showing up now, but still trash view lol http://andrewsawesomesite.com/ is what it should look like
@SkyC0der i think its not showing that first background images. I had a lot of trouble getting images to show up on codepen until i eventually just gave up on it
@SkyC0der i used like 4 different image hosting website and still nothing
Gulsvi
@gulsvi
Jun 01 2017 15:57
@fullmetal7777 with class names like this <li class="nav-links">, are you supposed to have bootstrap in your project? Or just using the same class names?
Andrew Hickman
@ahickman3
Jun 01 2017 15:58
@SkyC0der no bootstrap, wanted to do this all without it so i could learn as much as possible. Id say worth it so far though, i have learned a lot. Want to try to get the responsive design solo on the first shot
@SkyC0der its just coincidence, i didnt even know that was a class name on bootstrap lol
Gulsvi
@gulsvi
Jun 01 2017 15:58
I learned that by using bootstrap, getting comfortable with it, and then by studying how bootstrap did it. :)
@fullmetal7777 This conversation started around vh and rem - what are you looking for help with exactly? :p
JD Tadlock
@jdtdesigns
Jun 01 2017 15:59
I always recommend starting with vanilla css, then moving to BS. If you don't know what BS is doing, you can kind of get the mindset that it's what css is.
Gulsvi
@gulsvi
Jun 01 2017 16:00
And you did say it was a quick question lol
Top down, or bottom up. Different ways to learn things I guess
JD Tadlock
@jdtdesigns
Jun 01 2017 16:00
I do recommend learning jQuery before vanilla though ;)
Gulsvi
@gulsvi
Jun 01 2017 16:01
Free Code Camp goes Top down by teaching Bootstrap + jQuery I guess
Many would argue that just creates devs who don't know how to code though...
JD Tadlock
@jdtdesigns
Jun 01 2017 16:02
It gives you an understanding in human words what javascript is doing
so when you jump into vanilla document.body.style.display = 'none'; makes a little sense ;)
Deepanshu Chug
@deepanshuchg
Jun 01 2017 16:03
can somebody help me with some css? I want to display 4 boxes align as in microsoft's logo.
Andrew Hickman
@ahickman3
Jun 01 2017 16:04
@SkyC0der yeah you can bet ill be using it from now on. but if i had used it i doubt i would have ever even realized how responsive design works. okay so the original question was regarding the text in front of the first background image (which isnt showing up on codepen at all, i guess just look at my website). When i try to position the text with top= #vh, and minimize the page, it acts like the top of the page goes beyond the browser and positions it with respect to that. But when i use bottom=#vh, it works as you would expect with mizmizzing (always stays #vh away from the bottom of the viewport). Now, i know that a good bit of the first background image goes above the page, so its hidden, but the viewport doesnt extend to that i thought?
Gulsvi
@gulsvi
Jun 01 2017 16:04
@fullmetal7777 I didn't mean to scare you away, happy to help by the way :)
Andrew Hickman
@ahickman3
Jun 01 2017 16:04
@SkyC0der was just writing a huge block a text haha your a great help. Any bit of information i get down helps me a ton
Gulsvi
@gulsvi
Jun 01 2017 16:04
lol, okay
Andrew Hickman
@ahickman3
Jun 01 2017 16:05
@SkyC0der Just trying to be a sponge-like as possible. I am one with the knowledge-sponge
Gulsvi
@gulsvi
Jun 01 2017 16:05
I am one with the sponge, the sponge is with me
@fullmetal7777 To answer that vh question, I think it'll help to have less code. You have a lot of complicated things going on in your web page right now.
(Just to explain the concept and see the conflicts)
Like this, seems overly-complex:
.scuba-bg{
    background-image: url("http://res.cloudinary.com/dfnn1jyt7/image/upload/v1495832716/pic1_lulilj.jpg");
    background-position: center;           /*this will keep the background picture centered no matter the browser size*/
    background-size: cover;                /*scale background image so that it completely covers the background (may crop image)*/
    background-repeat: no-repeat; 
    background-attachment: fixed;          /*create parallax scrolling affect by fixing image to background block*/
    transform: translateY(-173px);         /*used to move picture up, margins wouldnt work because picture is fixed*/
    margin-bottom: -270px;                 /*crop bottom of picture*/
    height: 100%;                          /*will show the whole picture*/
    overflow: hidden;
/*    border-style: solid;
    border-color: yellow;        */    
}
Andrew Hickman
@ahickman3
Jun 01 2017 16:08
@SkyC0der haha exactly, this guy gets it. See, bottom = 60vh positions it 60% away from the bottom, as id expect. But top = 60vh positions it like 20% away from the top, as i wouldnt expect lol thought the whole point of vh was that is positions with respect to the point on the page where its currently and #vh away from wherever.
Its actually a lot less messy from the night before lol i went through everything and tried to understand the logic and took out a bunch of filler. But yeah, the image stuff gets messy
Gulsvi
@gulsvi
Jun 01 2017 16:09
@fullmetal7777 I think this is because of the transform you're doing
I mean, if you get a single picture, and the only CSS you apply to it is your top/bottom settings, it will work as expected
Andrew Hickman
@ahickman3
Jun 01 2017 16:10
@SkyC0der its the only way i could get the image to bump up :/ i wanted to image to be perfect. I wanted it to be centered. even as i was minimizing the page. Also, i wanted it to be bumped up a little and i wanted it to be fixed to create a parallax scrolling effect
Gulsvi
@gulsvi
Jun 01 2017 16:10
As soon as you start transforming, relative/absolute positioning things, using negative margins or big margins, you're taking everything out of the normal flow of the page.
Andrew Hickman
@ahickman3
Jun 01 2017 16:11
@SkyC0der so it goes from a normal X+1 function to x^2-y^3+root(459) bascially lol
Gulsvi
@gulsvi
Jun 01 2017 16:11
Exactly lol
Andrew Hickman
@ahickman3
Jun 01 2017 16:11
@SkyC0der man, web dev is tricky lol
Gulsvi
@gulsvi
Jun 01 2017 16:12
For responsive design, you're much better off using media queries - different sized images and different image placement depending on the screen size rather than a one-size-fits-all approach
Andrew Hickman
@ahickman3
Jun 01 2017 16:12
@SkyC0der so if i absolutely have to get some weird code going on for an object, i just have to deal with it and work around it basically? The code for that image is as condensed as possible, and i tried everything to get it all to work together and thats what i came up with.
@SkyC0der Actually, mediaquery is what im getting into now. My first task was the get the text on the first background image ("Mark Hickman") so scale using mediaquery. Then i started looking at the vh and all that and things got off track
Gulsvi
@gulsvi
Jun 01 2017 16:14
@fullmetal7777 Play around with media queries some more - very important for responsive design. If you study the way bootstrap does it, you'll see they have it everywhere.
Flexbox ends up relieving us from the need for that to an extent, but for background image placement, font size adjustment, etc... media queries are really the way to go
image.png
image.png
Andrew Hickman
@ahickman3
Jun 01 2017 16:17
@SkyC0der which is exactly what i want to get into. Im going to try to get this site mobile-ready (hpoefully its not an impossible task at this point), add one more section, and call it quits for that. One question, i red a couple people say start from mobile and work your way up, but wouldnt having your website design done and then working on condensing it be easier? sounds like the way to go for me
@fullmetal7777 ahaha i dont even drink coffee, but if i get one of those mugs for my birthday, i might have to pick up a new habbit
Gulsvi
@gulsvi
Jun 01 2017 16:19
@fullmetal7777 I've only been doing this for a few months and I haven't designed any full sites yet. My guess is that it's easier to start small and scale up.
"Mobile First" is something I see a lot
Andrew Hickman
@ahickman3
Jun 01 2017 16:21
@SkyC0der oh damn, I didnt realize that. The idea of being as knowledgeable as SkyC0der in a few months, now ive got something to look forward to :D
Gulsvi
@gulsvi
Jun 01 2017 16:21
Before you think about the mobile version of your page, you need good content though :) so it's really, content first, then mobile, then desktop
Thanks for the compliment :)
kbernie
@kbernie
Jun 01 2017 16:22
Hello! I started to learn front end, when you work on back-end usually you have a requirements.txt file with the things you use; is there something similar convention for front end? Like now I'm trying out Bootstrap framework and Font Awesome toolkit and I want to keep track of technologies I use
Gulsvi
@gulsvi
Jun 01 2017 16:22
You can learn a lot here in these chat rooms to be honest - different problems to solve nearly every day
Ejikemeuwa Eric Nnanna
@melete90
Jun 01 2017 16:23
Hi guys, <div class="jumbotron"></div> doesn't work on my system. please what do I do?
Gulsvi
@gulsvi
Jun 01 2017 16:24
@melete90 How have you set up bootstrap?
Andrew Hickman
@ahickman3
Jun 01 2017 16:31
@SkyC0der yeah screw that, im not even messing with responsive design on this site, im so fed up with it haha but the next one, thats where its at.
JD Tadlock
@jdtdesigns
Jun 01 2017 16:32
@fullmetal7777 Once you learn Sass, responsive design will be much less of a pain. :D
Andrew Hickman
@ahickman3
Jun 01 2017 16:33
@jdtdesigns yeah ive probably spent over 40 hours on this site alone because of not using bootstrap. I wanna learn some new stuff at this point, probably makes more sense to move along and get into JS etc and everything will be much easier rather than trying to crank it out using something that may not work best anyways.
Gulsvi
@gulsvi
Jun 01 2017 16:36
@deepanshuchg what is your code like now? Happy to take a look
JD Tadlock
@jdtdesigns
Jun 01 2017 16:37
@fullmetal7777 I wouldn't get so stressed over a couple days or even months with this stuff. The reality is, the normal person can take years to get to an advanced level with css. It's a pretty expansive language and can do amazing things. If you're more interested in the programmatic side of things, learning css basics and maybe some intermediate stuff will be all you need. Not everyone wants or needs to be a front end designer. ;)
Ejikemeuwa Eric Nnanna
@melete90
Jun 01 2017 16:39
@SkyC0der I went on settings-javascript-quickadd-bootsrtap
bootstrap*
Gulsvi
@gulsvi
Jun 01 2017 16:39
@melete90 You'll need to do that on settings -> CSS -> quick add -> bootstrap for the CSS library
javascript only enables this stuff, but the CSS is required for it to work: https://v4-alpha.getbootstrap.com/getting-started/javascript/
Ejikemeuwa Eric Nnanna
@melete90
Jun 01 2017 16:42
@SkyC0der okay, thanks
CamperBot
@camperbot
Jun 01 2017 16:42
melete90 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1577 | @skyc0der |http://www.freecodecamp.com/skyc0der
Nikki L.R.
@nikkilr88
Jun 01 2017 16:42
Is there anyone here who knows how to work with Cloud9? I made a React project with "create-react-app", but I can't figure out how to run "npm run build"
JD Tadlock
@jdtdesigns
Jun 01 2017 16:44
@nikkilr88 There should be a terminal at the bottom that you use to run commands.
Nikki L.R.
@nikkilr88
Jun 01 2017 16:45
@jdtdesigns Yeah
image.png
Am I using the wrong one?
JD Tadlock
@jdtdesigns
Jun 01 2017 16:46
did you npm install?
and did you type npm run build
Nikki L.R.
@nikkilr88
Jun 01 2017 16:46
@jdtdesigns Had to cd to project folder
JD Tadlock
@jdtdesigns
Jun 01 2017 16:47
;)
it's just like working locally
vínαч puppαl
@vinaypuppal
Jun 01 2017 16:47
@nikkilr88 It seems you are in workspace folder on terminal cd react-test and run npm run build
Nikki L.R.
@nikkilr88
Jun 01 2017 16:47
@jdtdesigns It looks like it's working now. I hope I don't screw it up... Hahaha
@vinaypuppal That was it :D
@jdtdesigns I have never done this... Not even locally.
JD Tadlock
@jdtdesigns
Jun 01 2017 16:48
jumpin in to cloud9 before local, you go girl :D
Nick Danvers
@Ravenor222
Jun 01 2017 17:03
Hey guys, I'm just fiddling around with bootstrap in Codepen, I'm wondering how I'm able to add a "container" or basically just a big box where I will input information in front of my background image, https://codepen.io/Ravenor222/pen/bRbqzo is the code pen, thanks in advance guys
SavvasLimassol
@SavvasLimassol
Jun 01 2017 17:10
Hello guys, I am working on my portfolio and I want to split the page into sections similar to the example there is in the challenge. How should I do this? Should I use tables?
Elizabeth Paul
@Kowalatam
Jun 01 2017 17:12
@SavvasLimassol you could use container-fliud
@Ravenor222 You can style the container with the background image instead of the html
SavvasLimassol
@SavvasLimassol
Jun 01 2017 17:15
Already tried but the div doesn't reach to the edges of the browser and I don't know why. I'm a noob :p
Elizabeth Paul
@Kowalatam
Jun 01 2017 17:15
use "container-fluid"
@SavvasLimassol use "container-fluid" instead of container
Nick Danvers
@Ravenor222
Jun 01 2017 17:17
@Kowalatam So I would use the container for the image, and then rows inside?
https://codepen.io/Ravenor222/pen/OWjXej is something I made before I knew what bootstrap was, im hoping to have a similar effect where I can scroll down the page, have a consistent block in the middle where I can write things with the background image in the back
sorry, I too am a noob
I have included bootstrap but it does not feel like the bootstrap classes are taking effect =-S
SavvasLimassol
@SavvasLimassol
Jun 01 2017 17:21
@Kowalatam I did, still not working. I took a screenshot, I would appreciate it if you gave it a look. :P http://prntscr.com/feqwjp
Elizabeth Paul
@Kowalatam
Jun 01 2017 17:21
@SavvasLimassol Oh yeah, sorry diidn't read your message well :(
@SavvasLimassol You want to split it into two ?, where you have text on one side and image on the other rigth ?
SavvasLimassol
@SavvasLimassol
Jun 01 2017 17:22
Yeah notice how it doesn't spread to the edges? :P How do I fix that?
I just want to have a top bar then a banner of some sort, after a section where the projects will go then a section with info about me, how to contact me and whatnot.
Elizabeth Paul
@Kowalatam
Jun 01 2017 17:25
@SavvasLimassol For the top bar, u need a "Navbar"
SavvasLimassol
@SavvasLimassol
Jun 01 2017 17:25
I'll google that right away, thank you very much. :smile:
vínαч puppαl
@vinaypuppal
Jun 01 2017 17:26

@SavvasLimassol

Yeah notice how it doesn't spread to the edges? :stuck_out_tongue: How do I fix that?

By default bootstrap adds

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
}

So you need to override them to remove that padding

.container-fluid {
    padding-right: 0;
    padding-left: 0;
}
SavvasLimassol
@SavvasLimassol
Jun 01 2017 17:27
That fixed it, thanks!
@Kowalatam Thanks. You have been very helpful. :smile:
CamperBot
@camperbot
Jun 01 2017 17:28
savvaslimassol sends brownie points to @kowalatam :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @kowalatam |http://www.freecodecamp.com/kowalatam
vínαч puppαl
@vinaypuppal
Jun 01 2017 17:28

@SavvasLimassol

Hello guys, I am working on my portfolio and I want to split the page into sections similar to the example there is in the challenge. How should I do this? Should I use tables?

Tables is not recommended , use bootstrap grids http://getbootstrap.com/css/#grid

SavvasLimassol
@SavvasLimassol
Jun 01 2017 17:29
Thank you. @vinaypuppal
CamperBot
@camperbot
Jun 01 2017 17:29
savvaslimassol sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 700 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
SavvasLimassol
@SavvasLimassol
Jun 01 2017 17:30
@vinaypuppal It's all very confusing and you guys are very helpful. :P
Elizabeth Paul
@Kowalatam
Jun 01 2017 17:32
@SavvasLimassol . You are welcome.. im kinda new at this too. :)
Joe Skowronek
@jskowronek
Jun 01 2017 17:47
Where can find help with creating nav bars and how to have it navigate correctly by scrolling through the page
Tom
@moT01
Jun 01 2017 17:51
@jskowronek right here
to have it scroll itself down the page, i would say to use some javascript
thats all for scrolling
maybe save that for last, ...i would find a video for help creating one, and start with linking it to different sections of the page
Tom
@moT01
Jun 01 2017 17:58
https://www.youtube.com/watch?v=_ovlvYH782c this looks like it might be decent
Karan Nandha
@karann7
Jun 01 2017 17:59
Anyone here lives in Sacramento????
Nick Danvers
@Ravenor222
Jun 01 2017 18:00
I'm just wondering if anyone can tell me why the following code pen doesnt seem to follow bootstrap/column sizes, I've mostly been coding on my desktop not on codepen it kind of feels unresponsive to bootstrap commands that ive been learning? ty sorry for being a hastle
the dashes are there to illustrate the issue, I can change the class to any col- size however nothing seems to change, I have the bootstrap setting in codepen enabled
ty
Tom
@moT01
Jun 01 2017 18:01
@Ravenor222 using the correct version of bootstrap?
Netrunner21
@Netrunner21
Jun 01 2017 18:05
Does anyone know of a legit version of safari for windows? I downloaded one to run tests on the browser and it hates codepen and won't run.
Gulsvi
@gulsvi
Jun 01 2017 18:07
@vinaypuppal @SavvasLimassol When using .container-fluid or .container, we use a .row class inside to offset the padding. That's the recommended approach compared to overriding bootstrap defaults. Here's the CSS for .container-fluid and .row from https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}
<div class="container-fluid">
  <div class="row">Full width content</div>
</div>
Nick Danvers
@Ravenor222
Jun 01 2017 18:08
@moT01 Ive simply gone to the settings for CSS and added bootstrap in the only way i've seen possible
vínαч puppαl
@vinaypuppal
Jun 01 2017 18:08
@SkyC0der :+1: okay
Tom
@moT01
Jun 01 2017 18:09
you can copy and paste a different version in there
im not sure if that's what the problem is, but ive seen a number of people do that
Gulsvi
@gulsvi
Jun 01 2017 18:10
@Ravenor222 From looking at your code, you have bootstrap 4 set up correctly. You are using the class med instead of md though
Tom
@moT01
Jun 01 2017 18:10
remove your 4 and paste that in there
Gulsvi
@gulsvi
Jun 01 2017 18:10

This:

    <div class="row">
      <div class="col-med-6"></div>
      <div class="col-med-6"></div>
    </div>

Should be:

    <div class="row">
      <div class="col-md-6"></div>
      <div class="col-md-6"></div>
    </div>
Nick Danvers
@Ravenor222
Jun 01 2017 18:16
@SkyC0der ah thank you,
CamperBot
@camperbot
Jun 01 2017 18:16
ravenor222 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1578 | @skyc0der |http://www.freecodecamp.com/skyc0der
Nick Danvers
@Ravenor222
Jun 01 2017 18:16
One thing still is that it adjusts length wise
Pagnito
@Pagnito
Jun 01 2017 18:16
@SkyC0der hey u here?
Gulsvi
@gulsvi
Jun 01 2017 18:16
Yeah, hi @Pagnito
Pagnito
@Pagnito
Jun 01 2017 18:16
sweeet
Gulsvi
@gulsvi
Jun 01 2017 18:16
@Ravenor222 length wise?
Nick Danvers
@Ravenor222
Jun 01 2017 18:16
Is there a style setting I should be giving it to set it to go by width?
Pagnito
@Pagnito
Jun 01 2017 18:17
hey i been busy so i havent looked at ur code, i glanced at it, but there some things i dont understand
hold on ill post the things i dont
Nick Danvers
@Ravenor222
Jun 01 2017 18:17
When I adjust the value of the col-md-#, it goes up and down, as opposed to adjusting in its width
Pagnito
@Pagnito
Jun 01 2017 18:17
 $({})
Gulsvi
@gulsvi
Jun 01 2017 18:18
@Ravenor222 there can be a maximum of 12 columns in a row. if you have all 12 columns in use, they get taller as you add more content.
Pagnito
@Pagnito
Jun 01 2017 18:18
(color => next =>
Thomas Lawless
@tlawless94
Jun 01 2017 18:18
would anyone know how to stop my textBox div from moving when there's no text in it? Here's my project:
https://codepen.io/tlawless94/pen/dRbOjR
Tom
@moT01
Jun 01 2017 18:19
try this code in there instead of no text &nbsp;
Gulsvi
@gulsvi
Jun 01 2017 18:19
@Pagnito The first one, the empty braces, sets up an empty object to hold the queue. https://stackoverflow.com/questions/29263068/empty-curly-braces-inside-jquery
Nick Danvers
@Ravenor222
Jun 01 2017 18:20
@SkyC0der hmm, If for example im hoping to but 4 boxes, 2 in each row, i would use col-md-6, two for each row, so it should go one on top of another correct?
Rick Riggs
@wikiwiggs
Jun 01 2017 18:20
@tlawless94 definitely use &nbsp; instead of 5 good call @SkyC0der.
Gulsvi
@gulsvi
Jun 01 2017 18:20
@Pagnito For the second one color => next => it's the same as function(color) {function (next) {
Pagnito
@Pagnito
Jun 01 2017 18:20
i see thanks
Thomas Lawless
@tlawless94
Jun 01 2017 18:21
thanks @moT01 @wikiwiggs
CamperBot
@camperbot
Jun 01 2017 18:21
tlawless94 sends brownie points to @mot01 and @wikiwiggs :sparkles: :thumbsup: :sparkles:
:cookie: 678 | @mot01 |http://www.freecodecamp.com/mot01
:cookie: 321 | @wikiwiggs |http://www.freecodecamp.com/wikiwiggs
Pagnito
@Pagnito
Jun 01 2017 18:21
@SkyC0der thanks
CamperBot
@camperbot
Jun 01 2017 18:21
pagnito sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1579 | @skyc0der |http://www.freecodecamp.com/skyc0der
Pagnito
@Pagnito
Jun 01 2017 18:21
whats '_fx"?
Gulsvi
@gulsvi
Jun 01 2017 18:21
@Ravenor222 2 col-md-6 columns would be side by side next to each other in a row (6 + 6 = 12)
@Pagnito "_fx" is the default name of the queue. Took me a while to understand queue to be honest, and that code took around 15min of fiddling around to get right lol. Start here to getting a better understanding of it: http://api.jquery.com/queue/
The next function is the callback function
Pagnito
@Pagnito
Jun 01 2017 18:23
ok sweet thanks, yet i used queue before but i still beraly understand it
Gulsvi
@gulsvi
Jun 01 2017 18:23
It goes way beyond what I've done in that codepen - still over my head a bit :)
Had fun messing around with it - added a function to make random colors light up
Guess that means I don't have to do the simon project now :p
Rick Riggs
@wikiwiggs
Jun 01 2017 18:25
@SkyC0der I just finished the Simon project.
No JQuery though, that was tough.
Gulsvi
@gulsvi
Jun 01 2017 18:25
Nice, congrats, certified front-end developer :)
How did you make the colors light up? setTimeout?
Badet Marian-Claudiu
@bmc95
Jun 01 2017 18:25
Hello guys,I`m new here,nice to meet you!
Nick Danvers
@Ravenor222
Jun 01 2017 18:25
sry, im fiddling around with it and I guess its no longer doing what it was doing before,
Gulsvi
@gulsvi
Jun 01 2017 18:26
Welcome, @bmc95 !
Rick Riggs
@wikiwiggs
Jun 01 2017 18:26
@SkyC0der So proud of it: https://www.freecodecamp.com/wikiwiggs/front-end-certification
Yeah a mix between setTimeout and setInterval
Gulsvi
@gulsvi
Jun 01 2017 18:27
Nice work! :)
Rick Riggs
@wikiwiggs
Jun 01 2017 18:27
@SkyC0der Thanks
CamperBot
@camperbot
Jun 01 2017 18:27
wikiwiggs sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1580 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Jun 01 2017 18:27
This is what I was thinking of using for Simon https://codepen.io/skycoder/pen/NjQYNW?editors=0011
Thanks to @Pagnito for making me think hard about it... and forcing me to brush up on .queue()
CamperBot
@camperbot
Jun 01 2017 18:28
skyc0der sends brownie points to @pagnito :sparkles: :thumbsup: :sparkles:
:cookie: 248 | @pagnito |http://www.freecodecamp.com/pagnito
Pagnito
@Pagnito
Jun 01 2017 18:28
haha no problem i suppose
Gulsvi
@gulsvi
Jun 01 2017 18:28
I think I may learn the web audio api next and make my own sounds
Rick Riggs
@wikiwiggs
Jun 01 2017 18:28
@SkyC0der I used canvas:
https://codepen.io/wikiwiggs/pen/MmNBwy
Gulsvi
@gulsvi
Jun 01 2017 18:29
Canvas! Nice :) I want to get better at that
Nick Danvers
@Ravenor222
Jun 01 2017 18:29
sry another thing is that when i've used bootstrap on desktop files as opposed to codepen, ive never had it where things are going outside the container
Gulsvi
@gulsvi
Jun 01 2017 18:31
@Ravenor222 I'm not sure about your local environment, but you need to use the img-fluid class on your images to keep them inside their container/columns
    <div class="col-md-6">
      <img class="img-fluid" src="http://via.placeholder.com/350x150"
    </div>
Try to use https: everywhere too if you can - it will save you some headaches down the road
Rick Riggs
@wikiwiggs
Jun 01 2017 18:32
I haven't used canvas all that much myself, but what I did do was make everything parametric, so now I can reflect back and play with page size scaling. It should be ready for dynamics.
Nick Danvers
@Ravenor222
Jun 01 2017 18:32
@SkyC0der thanks again
CamperBot
@camperbot
Jun 01 2017 18:32
ravenor222 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: ravenor222 already gave skyc0der points
Gulsvi
@gulsvi
Jun 01 2017 18:33
no problem!
Andrew Hickman
@ahickman3
Jun 01 2017 18:38
@jdtdesigns i appreciate the kind words. Im just taking it one day at a time really, i just figure anything i get learned is one step closer.
Onome Sotu
@onomesotu
Jun 01 2017 18:45
hello
@SkyC0der you're around?
Gulsvi
@gulsvi
Jun 01 2017 18:46
@onomesotu hello
Onome Sotu
@onomesotu
Jun 01 2017 18:46
I still struggling with this bloody twitter button
here is my html
and js
<div id="footer">
<div class="container"> <p class="text-center">Onome Sotu &copy;2017 | All rights reserved |</p><a class="tweetQuote" href="#" target="_blank"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></a> </div> </div>