These are chat archives for FreeCodeCamp/HelpFrontEnd

28th
Jul 2016
Michal Kozlowski
@McBiggos
Jul 28 2016 00:04
I deleted this empty body part in css and it works now
thanks @trip16661
CamperBot
@camperbot
Jul 28 2016 00:05
mcbiggos sends brownie points to @trip16661 :sparkles: :thumbsup: :sparkles:
:cookie: 430 | @trip16661 |http://www.freecodecamp.com/trip16661
Elbert Cortez
@trip16661
Jul 28 2016 00:08

@McBiggos oh lol i went to the wc sorry for late response
Umm something i have to point out is that you are using classes that you dont need
random-background change-background
both are not really needed

also try to always act on DRY principles do not repeat yourself on yor js you have the same procedure in the click even and outside of it, which is repeating yourself

you should wrap it on function
and call it when needed
Michal Kozlowski
@McBiggos
Jul 28 2016 00:26
This message was deleted
Elbert Cortez
@trip16661
Jul 28 2016 00:27
@McBiggos that was fast? xD
Michal Kozlowski
@McBiggos
Jul 28 2016 00:27
I think I got it, but I didn't xD I don't know how to make that without classes
Elbert Cortez
@trip16661
Jul 28 2016 00:28
$(document).ready(randomRGB());
you just need to call the
function and that's it you don't need to say .ready because when the page is create it's ready
also
$(".change-background").on("click", randomRGB());
you need to put it like this
$(".change-background").on("click", randomRGB)
Elbert Cortez
@trip16661
Jul 28 2016 00:35

@McBiggos something like this will work

function randomRGB() {
  var a = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);
  var c = Math.floor(Math.random() * 256);
  var theRGB = "rgb(" + a + "," + b + "," + c + ")";
  $(".random-background").css("background-color", theRGB);
};
randomRGB();
$(".random-background").on("click", randomRGB);

change-background is not needed
so you can change this

.change-background {
  transition: background-color 2.0s ease;
}

for this

.random-background {
  transition: background-color 2.0s ease;
}
anyway im tired good luck I hope i helped a bit to understand it xD
Michal Kozlowski
@McBiggos
Jul 28 2016 00:38
of course you did! thanks once more!
Xavier Velez
@JonSnow08
Jul 28 2016 01:12
 $("#start").click(function() {
     var player = prompt("Would you like to be X's or O's");

    }
can anybody see why this may not be working
Stanley Young
@fatWalrus
Jul 28 2016 01:14
do u want it to print that message on click?
@JonSnow08
Xavier Velez
@JonSnow08
Jul 28 2016 01:14
@fatWalrus I want a dialog box to come up that allows the player to choose X's or O's
Stanley Young
@fatWalrus
Jul 28 2016 01:16
@JonSnow08 try not setting prompt to a variable
Coy Sanders
@coymeetsworld
Jul 28 2016 01:16
you don't have the click function closed out
also make sure you're importing jQuery @JonSnow08
Xavier Velez
@JonSnow08
Jul 28 2016 01:16
I have tried both, no luck
Coy Sanders
@coymeetsworld
Jul 28 2016 01:17
can you show your updated code?
Coy Sanders
@coymeetsworld
Jul 28 2016 01:19
not closed correctly, one too many closing brackets
nirurin
@nirurin
Jul 28 2016 01:53
if the page is in a container-fluid, it should go all the way to both edges of the screen right?
does bootstrap have any default thing that means there's a margin
Coy Sanders
@coymeetsworld
Jul 28 2016 01:55
yeah it has margins @nirurin, do you know how to user your developer tools in the browser (i.e. hitting F12 key)
?
nirurin
@nirurin
Jul 28 2016 01:57
@coymeetsworld yeh I'm looking at that, it says there is no margin
Coy Sanders
@coymeetsworld
Jul 28 2016 01:57
padding?
nirurin
@nirurin
Jul 28 2016 01:57
but I can see a gap down both edges, no matter what size I make the screen.
Coy Sanders
@coymeetsworld
Jul 28 2016 01:57
i was looking at this from a problem yesterday could've sworn I saw it
do you have a codepen link?
I suspect i have a faulty container somewhere, as my navbar also glitches when I scroll down
it should remain the same width as the container... but when it affixs to the top of the screen it stretches to the right off the edge of the screen.
Coy Sanders
@coymeetsworld
Jul 28 2016 02:01
container-fluid has a padding of 15px
container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
nirurin
@nirurin
Jul 28 2016 02:01
ahh ok, that makes sense then, I just dont remember it doing it yesterday haha im sure it went to the edge. Maybe im just tired
Coy Sanders
@coymeetsworld
Jul 28 2016 02:01
yeah maybe :)
nirurin
@nirurin
Jul 28 2016 02:02
Any idea on why the navbar is changing size?
it seems to be expanding by 30px for some reason
Coy Sanders
@coymeetsworld
Jul 28 2016 02:06
not sure, does that chain work? i.e. css().addClass().removeClass() ?
nirurin
@nirurin
Jul 28 2016 02:08
the one that collapses the navbar? yeh that works when I shrink the window below like 500px
its not related to JS, as I can delete everything in the jscript window and the navbar still does it haha
Coy Sanders
@coymeetsworld
Jul 28 2016 02:11
ok i just say that because when i scroll down the navbar changes sizes
you may want to look at simplifying some of the code, you're changing alot of positioning on your own that could be conflicting with what bootstrap has
nirurin
@nirurin
Jul 28 2016 02:13
yeh maybe, im going through some of it now to try and see what I dont need
Coy Sanders
@coymeetsworld
Jul 28 2016 02:13
looks like your affix class
width: 100%
nirurin
@nirurin
Jul 28 2016 02:14
I can make it go all the way to the edges by adding a <div class="row"> which also avoids the navbar issue, but im not sure if thats a solution or just hiding the problem
Coy Sanders
@coymeetsworld
Jul 28 2016 02:14
you should have rows and columns inside your bootstrap container
i would look at the documentation again, i think you're adding alot of things in there that is giving you unwanted results
nirurin
@nirurin
Jul 28 2016 02:15
that may be my issue, my navbar isn't in a row
or a column
in fact nothing is on this page, its all just in containers
Coy Sanders
@coymeetsworld
Jul 28 2016 02:16
there should only be one container
thats another thing
nirurin
@nirurin
Jul 28 2016 02:17
ah, the example I followed had it set up like this, a container for each section
but the example may have just been for general css, not bootstrap specific
Coy Sanders
@coymeetsworld
Jul 28 2016 02:22
hmm guess i could be wrong, but I thought only one class could be a container and everything else goes inside of it
Andre
@mavenface
Jul 28 2016 02:22
I finished the tribute page but when I click "ive completed this challenge" and enter my pen's link and submit. It just stays on the build a tribute page without progressing. Any ideas?
nirurin
@nirurin
Jul 28 2016 02:26
@coymeetsworld not sure tbh, but I may just fork this and try changing the containers to rows instead... not sure if it will make a difference to the navbar width though. Thanks for looking!
CamperBot
@camperbot
Jul 28 2016 02:26
nirurin sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1284 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Ken Haduch
@khaduch
Jul 28 2016 02:27
@mavenface - go to the map and see if it shows that you've completed it? Sometimes the system is a bit glitchy. If it doesn't show that it's completed, just click on it and try again - since you're just posting a link you don't have to worry about losing code or anything.
Andre
@mavenface
Jul 28 2016 02:29
@khaduch thanks ken seems like it was a glitch
CamperBot
@camperbot
Jul 28 2016 02:29
mavenface sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1487 | @khaduch |http://www.freecodecamp.com/khaduch
Coy Sanders
@coymeetsworld
Jul 28 2016 02:31
yeah np @nirurin, yeah try forking or maybe just start from scratch, and slowly start adding CSS and testing it all out
nirurin
@nirurin
Jul 28 2016 02:39
The problem seems to be the affix, but I don't have control over that... it's a bootstrap default. Here's a thread that seems to deal with a similar issue but the solutions don't work for me (probably because I need to alter them and I don't know jscript well enough)
Nicolas DeMari
@ndemari
Jul 28 2016 02:54
Alright so my client wants pictures with quotes into them on this website www.memphisgracepoint.gear.host
nirurin
@nirurin
Jul 28 2016 02:54
@coymeetsworld well... I've found something... strange. Which kind of answers one question but raises another lol.
What do i dooooooooooooo
Where can i find better images to go into those spots
those three spots
nirurin
@nirurin
Jul 28 2016 02:57
you'd need to go to a stock image site probably, or take some yourself.
Nicolas DeMari
@ndemari
Jul 28 2016 02:58
Should i just search for keywords like refresh, revive and restore?
willcodes
@willcodes
Jul 28 2016 03:19
cleaning up my front end projects... would appreciate the feedback. Heres my weather API one, if anyone sees anything funny let me know. (also C/F conversion not yet completed).
Chase
@Belax8
Jul 28 2016 03:21
@ndemari This is a nice place to get free images http://www.freeimages.com/ and then you can just add the caption to the image with photoshop or gimp.
@willcodes I think it looks good. The font size is kind of small for me, but everything else looks good.
willcodes
@willcodes
Jul 28 2016 03:29
@Belax8 thanks your right!! I will bump it up a bit
CamperBot
@camperbot
Jul 28 2016 03:29
:cookie: 417 | @belax8 |http://www.freecodecamp.com/belax8
willcodes sends brownie points to @belax8 :sparkles: :thumbsup: :sparkles:
luis4flames
@luis4flames
Jul 28 2016 03:52
if im creating my web portfolio and ive finished the first page how do i start the tag in html to seperate onto a new section from the first one. I have a picture background on my first "section" and when I create a new <div> nested out of the entire first layout it still appears to come out on it. Been going back and forth messing around with things
I'm basically creating a single page site and want to just scroll passed my first layout i set up.
Esterling Accime
@accimeesterlin
Jul 28 2016 03:55
Willcode your weather app looks great in term of functionality. The designing part not good at all. The JavaScript code is clear, but it can be more clear. Other than that it looks great.
Amelia
@ameliavoncat
Jul 28 2016 04:09
Having a little trouble with the wikipedia viewer project, the ajax function works when I test it on its own, but when I try to have the search submission call it nothing seems to happen.
function searchResult(input){  
  $.ajax({
  url: '//en.wikipedia.org/w/api.php',
  data: { action: 'query', list: 'search', srsearch: input, format: 'json'  },
  dataType: 'jsonp',
  success: function (result) {
    console.log('title', result.query.search[0].title);
    console.log('description', result.query.search[0].snippet);
    }
  });
}
$("#search-form").submit(function(){
  var input = document.getElementById("search-input").value;
    console.log("Input", input); //successfully prints the search term to the console
  searchResult(input); //does nothing
});
mingmingrr
@mingmingrr
Jul 28 2016 04:33
@ameliavoncat try url: '//en.wikipedia.org/w/api.php?callback=?'
Amelia
@ameliavoncat
Jul 28 2016 04:36
thanks, doesn't seem to have gotten it working though
DJ
@qualitymanifest
Jul 28 2016 04:58
@ameliavoncat add event.preventDefault() to the beginning of your submit function, before var submit
idk if that's your issue, but it could be
actually it's probably not given that you are able to see that console.log. can you paste the URL to your codepen? @ameliavoncat
DJ
@qualitymanifest
Jul 28 2016 05:01
@ameliavoncat ok i was right, just add event.preventDefault(); to the beginning of your submit function
@ameliavoncat the problem is that the default action of submitting a <form> is to refresh the page. event.preventDefault(); prevents that
Amelia
@ameliavoncat
Jul 28 2016 05:02
ahh
i'm getting an 'event is not defined' error now
DJ
@qualitymanifest
Jul 28 2016 05:03
save your codepen so i can see what you did
Amelia
@ameliavoncat
Jul 28 2016 05:03
saved
DJ
@qualitymanifest
Jul 28 2016 05:04
...weird. it works for me
Amelia
@ameliavoncat
Jul 28 2016 05:05
got it
had to make event a parameter
thank you!
DJ
@qualitymanifest
Jul 28 2016 05:05
interesting. in my experience you don't have to make it a parameter unless you want to call it something other than "event"
what browser are you using?
Amelia
@ameliavoncat
Jul 28 2016 05:05
firefox
DJ
@qualitymanifest
Jul 28 2016 05:06
weird. works when i try it on ff without naming event as a parameter. oh well
Amelia
@ameliavoncat
Jul 28 2016 05:07
well, it's working now, thanks alot for the help
DJ
@qualitymanifest
Jul 28 2016 05:07
no problem
Amelia
@ameliavoncat
Jul 28 2016 05:11
thanks @qualitymanifest
CamperBot
@camperbot
Jul 28 2016 05:11
ameliavoncat sends brownie points to @qualitymanifest :sparkles: :thumbsup: :sparkles:
:star2: 1299 | @qualitymanifest |http://www.freecodecamp.com/qualitymanifest
Matt Goldwater
@MJGwater
Jul 28 2016 05:29
I'm deciding whether to do the tic-tac-toe or simon project next. If I made the effort to code the Tic Tac Toe game so the computer never loses would that be harder than the Simon project?
what is the best chat room for these types of questions?
DJ
@qualitymanifest
Jul 28 2016 05:42
@Gwater17 yes, much harder. without making it unbeatable, they are about equivalent
Matt Goldwater
@MJGwater
Jul 28 2016 05:45
@qualitymanifest Thanks! I'm going to try to tackle it. How long do you think it should take?
CamperBot
@camperbot
Jul 28 2016 05:45
gwater17 sends brownie points to @qualitymanifest :sparkles: :thumbsup: :sparkles:
:star2: 1300 | @qualitymanifest |http://www.freecodecamp.com/qualitymanifest
DJ
@qualitymanifest
Jul 28 2016 05:48
@Gwater17 that's hard to say since i have no idea where you're at, and i never bothered to make mine unbeatable. simon or non-ai tic tac toe could both be done within a day if you are reasonably comfortable with what you've learned so far
@Gwater17 a long time ago it was required to make tic tac toe unbeatable, but they removed that requirement since it was basically irrelevant to the rest of what you are learning. however, if you still want to make an unbeatable tic tac toe you might want to look into minimax
r2d2
@UsamaHameed
Jul 28 2016 05:51
Does anyone know of a weather API that works on https?
Matt Goldwater
@MJGwater
Jul 28 2016 06:04
@qualitymanifest So far I feel comfortable w/ basic HTML / CSS, JS and jQuery. shouldn't that be enough for this? what would be good to learn next?
Coy Sanders
@coymeetsworld
Jul 28 2016 06:04
making tic-tac-toe unbeatable took me some time, about 3 weeks to get the algorithm right
if you make tic-tac-toe random i think it will be a easier than simon
DJ
@qualitymanifest
Jul 28 2016 06:06
@Gwater17 yes. that's what i meant by "if you are reasonably comfortable with what you've learned so far". unbeatable tic tac toe, however, is on another level. as exemplified by @coymeetsworld
Matt Goldwater
@MJGwater
Jul 28 2016 06:07
@coymeetsworld Hmm maybe Tic-tac-toe isn't the best next project for me then. Could you also answer what was useful that you were learning at my point? The curriculum is basically just projects at this point.
Coy Sanders
@coymeetsworld
Jul 28 2016 06:07
well if you only have tic-tac-toe and simon left there's not many options :)
you'll have to do both eventually just depends on what you want. Simon there's no real wiggle room
tic-tac-toe you don't have to make unbeatable anymore, but if you wanted to you'll learn quite a bit, I know I did and I don't regret it
I actually didn't know until after I completed it that it wasnt a req anymore lol
think it changed right when i started working on it and never looked at the requirements again
DJ
@qualitymanifest
Jul 28 2016 06:08
just make a non-AI tic tac toe. if you want to come back to it later and implement an AI it shouldn't be too hard to fit that into your current tic-tac-toe
Coy Sanders
@coymeetsworld
Jul 28 2016 06:09
yeah, or you can add it as a feature, have user change difficulties
thats what someone suggested to me as a future enhancement
DJ
@qualitymanifest
Jul 28 2016 06:09
@coymeetsworld same! it changed as i was working on it. i think i spent like a week on it and then found out that it was no longer required, and finished it that day haha
Coy Sanders
@coymeetsworld
Jul 28 2016 06:09
lol no regrets though @qualitymanifest, i learned a useful algorithm
as far as other question @Gwater17 not sure what you mean by what was useful, can you clarify?
DJ
@qualitymanifest
Jul 28 2016 06:10
yeah for sure. it sounds really interesting, and maybe i'll come back to it one day. but for now i want to keep working through the map
Matt Goldwater
@MJGwater
Jul 28 2016 06:10
@qualitymanifest @coymeetsworld I was hoping to do only 1 project for each level so I could move at a faster rate. W/o making Tic Tac Toe unbeatable Simon would probably be the better learning experience for me, but I'm worried unbeatable Tic Tac Toe would be too much of a stretch
Coy Sanders
@coymeetsworld
Jul 28 2016 06:11
whats your goal though @Gwater17 ? if its to get the certs you need to complete all of the projects
don't worry about making tic-tac-toe unbeatable, its not a requirement
just an interesting feature you can add to it, and you learn quite a bit
Matt Goldwater
@MJGwater
Jul 28 2016 06:11
@coymeetsworld By what was useful, I just meant what resources outside of FCC you used at this stage that helped you.
@coymeetsworld My goal is just to learn as fast as possible. Figure I can always go back and get the certs
Coy Sanders
@coymeetsworld
Jul 28 2016 06:12
ive actually been focusing more on design and CSS last month or so, read pretty much all of MissingManual CSS
im at a crossroads now since I just completed FCC front-end on monday
I either am going to jump into React for the Data-Vis cert, or learn more core JS, speaking JS was a resource that was recommended to me that I'm going to read, eloquentjavascript was another
but also I want to get other certs so I'm trying to get A+ lol, want to get it by end of October
but I'm going on vacay tomorrow for few days so think I'll just decide when i get back
DJ
@qualitymanifest
Jul 28 2016 06:14
@Gwater17 getting really comfortable with reading docs, if you're not already, is incredibly beneficial
Coy Sanders
@coymeetsworld
Jul 28 2016 06:14
As far as going back to get the certs, odds are you won't do that @Gwater17 :)
DJ
@qualitymanifest
Jul 28 2016 06:14
@coymeetsworld you're trying to finish data vis by october, or everything?
Coy Sanders
@coymeetsworld
Jul 28 2016 06:14
if you don't try to do it now something else will get in the way, while you're focused best thing you can do is stick w/ it
no @qualitymanifest, A+ certification lol
i have no idea how long data vis will take even if i dedicate all my time to it, i have to learn React on my own and I have alot of resources to delve through and see whats good
Matt Goldwater
@MJGwater
Jul 28 2016 06:15
@coymeetsworld Yeah I'm hoping I'll have a job so I won't need to
DJ
@qualitymanifest
Jul 28 2016 06:15
ah, ok. had to google that TBH
Coy Sanders
@coymeetsworld
Jul 28 2016 06:15
what A+ cert?
Matt Goldwater
@MJGwater
Jul 28 2016 06:15
@coymeetsworld what's an A+ certification?
DJ
@qualitymanifest
Jul 28 2016 06:15
@coymeetsworld yes, A+. i paid for a month of codeschool for their ES2015 and react tutorials. they were decent, and enough to get me started.
Coy Sanders
@coymeetsworld
Jul 28 2016 06:15
its a certification that says you're qualified to be a PC/mobile technician
Matt Goldwater
@MJGwater
Jul 28 2016 06:16
@qualitymanifest How do you get more comfortable w/ reading documentation? I admittedly struggle to have the patience for them
Coy Sanders
@coymeetsworld
Jul 28 2016 06:16
it comes from CompTIA and its one of the largest cert organizations in the world
reason I'm going for A+ besides that it has alot of useful information is so that I can go on and do more interesting certs related to Networking, Security, Servers, etc.
I got Linux+ last year just want to continue it
@qualitymanifest yeah code school is ok, I downloaded alot of their material few months back when it was free for a weekend, need to sort through that too I'm not sure if i got anything related to react on that
DJ
@qualitymanifest
Jul 28 2016 06:18
@Gwater17 slogging through docs over and over to find what you need. i found w3schools docs easier to understand at first which helped me graduate to the understanding the real docs at MDN
Coy Sanders
@coymeetsworld
Jul 28 2016 06:18
w3schools docs are not that great though, MDN i thought much better and has nice examples in it
Matt Goldwater
@MJGwater
Jul 28 2016 06:19
@qualitymanifest @coymeetsworld Also curious how deep either of you have gone into jQuery. I kept on running into stuff about AJAX when working on the Twitch project
Coy Sanders
@coymeetsworld
Jul 28 2016 06:19
deep enough I guess, @Gwater17, i would have to look at jQuery docs from time to time but didn't really read anything outside of what was in FCC
what kind of stuff @Gwater17 ? did you do the other intermediate projects because almost all of them require you using an api and making asynchronous calls
Matt Goldwater
@MJGwater
Jul 28 2016 06:21
@coymeetsworld Just did the Twitch project. Had to use FCC's hint to make the API call
Coy Sanders
@coymeetsworld
Jul 28 2016 06:21
wasn't a hint :) they give that to you on purpose lol
Matt Goldwater
@MJGwater
Jul 28 2016 06:21
found Twitch's documentation to be very confusing
Coy Sanders
@coymeetsworld
Jul 28 2016 06:22
wait what hint are you referring to?
oh that I see, yeah thats no big deal
i felt Twitch doc was ok, wiki one was a little rough for me
twitter i was having problems because of their stupid iframes they create in their buttons
DJ
@qualitymanifest
Jul 28 2016 06:23
wiki docs were... extensive
CamperBot
@camperbot
Jul 28 2016 06:23
no wiki entry for: docs were extensive
Coy Sanders
@coymeetsworld
Jul 28 2016 06:23
yeah there was quite a bit
Rohan Mohammad
@reolander
Jul 28 2016 06:33
wiki help
CamperBot
@camperbot
Jul 28 2016 06:33

:point_right: coding help [wiki]

Coding Help

I started this list while doing Algorithms, noticing a few things that were common issues / questions but I think most of them are going to be useful to people coding in general. If you've got some tips to help people code I'd love to hear them.

:pencil: read more about coding help on the FCC Wiki

Rohan Mohammad
@reolander
Jul 28 2016 06:35
wiki build a personal portfolio webpage
CamperBot
@camperbot
Jul 28 2016 06:35
no wiki entry for: build a personal portfolio webpage
Rohan Mohammad
@reolander
Jul 28 2016 06:35
help tribute page
CamperBot
@camperbot
Jul 28 2016 06:35

:point_right: project tribute page [wiki]

Project Tribute Page

This might be the first full webpage you have ever created. Here are some tips to help get you started with this:

:pencil: read more about project tribute page on the FCC Wiki

Rohan Mohammad
@reolander
Jul 28 2016 06:35
help portfolio webpage
CamperBot
@camperbot
Jul 28 2016 06:35
no wiki entry for: portfolio webpage
Rohan Mohammad
@reolander
Jul 28 2016 06:35
help personal portfolio
CamperBot
@camperbot
Jul 28 2016 06:35
no wiki entry for: personal portfolio
kirbyedy
@kirbyedy
Jul 28 2016 06:35
wiki has moved to the forum
CamperBot
@camperbot
Jul 28 2016 06:35
no wiki entry for: has moved to the forum
Rohan Mohammad
@reolander
Jul 28 2016 06:36
help project portfolio webpage
CamperBot
@camperbot
Jul 28 2016 06:36
no wiki entry for: project portfolio webpage
AlexanderNelson
@AlexanderNelson
Jul 28 2016 06:55
My content used to work, then i split it to left/right columns and the columns go over the naver bar instead of under. Any clues? http://codepen.io/AlexanderNelson/full/jAKrGj/
DJ
@qualitymanifest
Jul 28 2016 07:07

@AlexanderNelson add this to your CSS:

.topnav {
  z-index: 1;
}

i'm not sure exactly why you're not experiencing that issue but it probably has something to do with this https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

vínαч puppαl
@vinaypuppal
Jul 28 2016 07:07
@AlexanderNelson add this rule, it would fix that issue
ul.topnav{
z-index: 1;
}
DJ
@qualitymanifest
Jul 28 2016 07:07
jinx
AlexanderNelson
@AlexanderNelson
Jul 28 2016 07:12
@qualitymanifest @vinaypuppal thanks that did it! gonna have to read up on that. I noticed that the gradient on my "open" buttons disappeared and I have combed through the whole thing. Why would that just not work?
CamperBot
@camperbot
Jul 28 2016 07:12
alexandernelson sends brownie points to @qualitymanifest and @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 431 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
:star2: 1302 | @qualitymanifest |http://www.freecodecamp.com/qualitymanifest
Alexander Domikov
@AlexanderDom
Jul 28 2016 08:31
@AlexanderDom
hello everyone
had someone made a script to zoom in/out on image with image placement under the cursor after zooming please :) ? i try to figure out the logic / math to place image
Sorin Ruse
@sorinr
Jul 28 2016 08:35
@AlexanderDom have you tried to do it by css using hover?
Alexander Domikov
@AlexanderDom
Jul 28 2016 08:35
@sorinr everything about css it's ok for me, with transform: scale() and a transition
it's more for place image after zoomed in at same place that before clicking if i was clear
for exemple you click on cat image on his ear, you zoom in image than move image to ear be under your cursor
Sorin Ruse
@sorinr
Jul 28 2016 08:37
@AlexanderDom hope i get it right. let me try something to show u to see if what u need
Alexander Domikov
@AlexanderDom
Jul 28 2016 08:38
@sorinr before you try i have this already http://codepen.io/AlexanderDom/pen/vKAQXO
Sorin Ruse
@sorinr
Jul 28 2016 08:43
@AlexanderDom so, when u click as you said on the ear you want that part of the picture containing the ear to became the central part of the img and zoomed in? am i getting it right?
Alexander Domikov
@AlexanderDom
Jul 28 2016 08:45
@sorinr not really central part, when you click on a part, after it was zoomed it moves(for top left it moves in my case to left and top and same for others) i want that image moves so part where i clicked is again under my cursor
Sorin Ruse
@sorinr
Jul 28 2016 08:48
@AlexanderDom i think i got what you mean. i'll look into it but its not css it will be js for that
Alexander Domikov
@AlexanderDom
Jul 28 2016 08:48
yes its what i said first time :) a script
Islam Ibakaev
@dagman
Jul 28 2016 08:52
hey guys have built a simple counter to try redux stuff and looks like i am missing something.
there are no errors in console btw
can you figure this out?
Sorin Ruse
@sorinr
Jul 28 2016 08:52
@AlexanderDom i have to think about it. it has to be like: get cursor position on click and then move it by x and y as you scale
Alexander Domikov
@AlexanderDom
Jul 28 2016 08:54
thx @sorinr i found this one already but it doesn't work for me http://stackoverflow.com/questions/2028557/how-to-zoom-in-an-image-and-center-it
CamperBot
@camperbot
Jul 28 2016 08:54
alexanderdom sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 574 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jul 28 2016 08:55
@AlexanderDom pretty much the same principle as stated above
Alexander Domikov
@AlexanderDom
Jul 28 2016 09:34
@sorinr it's with canvas element but like i said if i have logic behind it it's ok for me :) thank's for your research
CamperBot
@camperbot
Jul 28 2016 09:34
alexanderdom sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: alexanderdom already gave sorinr points
Liman Abba
@limanCode
Jul 28 2016 11:04
Hi, I am stuck at creating a nav button with immage in it, somebody help pls
Ivan
@ivankishko
Jul 28 2016 11:19
Hi people! Can someone help me? I've made a collapse navbar - for small devices, but links don't work on my iPhone. I've already searched the solution throughout the web but didn't find one. If someone know how to fix this problem i'll appreciate some help (maybe problem is in my code but , here is the link - http://codepen.io/ivankishko/pen/WxJaRx
kirbyedy
@kirbyedy
Jul 28 2016 11:21
hmmm I was trying it in the dev tools
works
but looks bad
Screen Shot 2016-07-28 at 14.21.33.png
Ivan
@ivankishko
Jul 28 2016 11:22
wow
kirbyedy
@kirbyedy
Jul 28 2016 11:23
let me check on the android phone
Fabien Lenoir
@flenoir
Jul 28 2016 11:23
hi all
Ivan
@ivankishko
Jul 28 2016 11:23
hi
kirbyedy
@kirbyedy
Jul 28 2016 11:24
@ivankishko looks the same on my phone
Fabien Lenoir
@flenoir
Jul 28 2016 11:26
i am about to finish my Random Quote machine and i have an issue with the tweet button. i'm using the twitter API an the widget.js. it's basically working but , as i want to change a text value using Jquery it's not working. it seems that the code in my html <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> is overriding my Jquery usage
Ivan
@ivankishko
Jul 28 2016 11:26
@kirbyedy this is so strange
@kirbyedy sorry, try now pls
kirbyedy
@kirbyedy
Jul 28 2016 11:27
@flenoir this is the example code of the most simple tweet button which works:
$("#tweet").on("click", function() {
    window.open("http://twitter.com/home/?status=" + $("#quote").text());
  });
of course you have to adjust it to your needs, so it points to the right elements
@ivankishko looks good now
Fabien Lenoir
@flenoir
Jul 28 2016 11:28
ok i will try this, thanks
Ivan
@ivankishko
Jul 28 2016 11:29
@kirbyedy forgot to delete some css. but links still dont work on phone
kirbyedy
@kirbyedy
Jul 28 2016 11:30
works for me
Ivan
@ivankishko
Jul 28 2016 11:30
so its a safari issue i assume
Fabien Lenoir
@flenoir
Jul 28 2016 11:30
but still, anyone has used the "twitter-share-button" widget ?
Ivan
@ivankishko
Jul 28 2016 11:32
@kirbyedy anyway thanks
CamperBot
@camperbot
Jul 28 2016 11:32
ivankishko sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1298 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
kirbyedy
@kirbyedy
Jul 28 2016 11:32
@ivankishko works in safari for me
on mac, dont have an iphone
Ivan
@ivankishko
Jul 28 2016 11:33
@kirbyedy so its an iOS issue then)
@kirbyedy thank you.
CamperBot
@camperbot
Jul 28 2016 11:33
ivankishko sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:warning: ivankishko already gave kirbyedy points
Michal Kozlowski
@McBiggos
Jul 28 2016 11:34
Hey guys
AlexanderNelson
@AlexanderNelson
Jul 28 2016 11:34
the gradient on my open buttons stopped working. they are now just white no matter what styling i try to apply.http://codepen.io/AlexanderNelson/pen/jAKrGj?editors=1100 it should be applying this .btn {
background: -webkit-linear-gradient(top, #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%); AnyIdeas?
kirbyedy
@kirbyedy
Jul 28 2016 11:34
@ivankishko I noticed this: <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
maybe that link should be served over https like the others
not that it matters... dont know
try to change it
Ivan
@ivankishko
Jul 28 2016 11:35
trying
Michal Kozlowski
@McBiggos
Jul 28 2016 11:37
I've got a question about projects - do I get it right, that my pen doesn't have to look like example - it just has to fulfill user stories? Of course I can do some styling stuff, but main goal is to write a code, that meets user stories requirements?
vaibhav sharma
@vaibsharma
Jul 28 2016 11:37
hello everyone ! I am currently on the twitch tv challenge ,but know I find API is not giving the sufficient info in the seperate tab , and when I am using it in the project its working . How is it possible ?
Ivan
@ivankishko
Jul 28 2016 11:39
@kirbyedy nothing. currently updating my iOS maybe it will help.
Michal Kozlowski
@McBiggos
Jul 28 2016 11:39
Example: Build a Random Quote Machine
I don't have to do whole background-color change on click, I must have button that after clicking it shows new random quote and a button to tweet a quote
Right?
vaibhav sharma
@vaibsharma
Jul 28 2016 11:39
@McBiggos Its not just satisfying user stories ! by styling you got learn a lot ! and by implementing it in the projects is the best way to learn .
kirbyedy
@kirbyedy
Jul 28 2016 11:39
@McBiggos right
vaibhav sharma
@vaibsharma
Jul 28 2016 11:40
and this what you are here for right ?
kirbyedy
@kirbyedy
Jul 28 2016 11:40
@vaibsharma right
Michal Kozlowski
@McBiggos
Jul 28 2016 11:40
@vaibsharma Yeah, yeah, yeah, I know. But I don't have to do styling similar to given in example? I can do my own?
vaibhav sharma
@vaibsharma
Jul 28 2016 11:40
yeah yeah defo
Michal Kozlowski
@McBiggos
Jul 28 2016 11:40
thanks @vaibsharma @kirbyedy
CamperBot
@camperbot
Jul 28 2016 11:40
mcbiggos sends brownie points to @vaibsharma and @kirbyedy :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @vaibsharma |http://www.freecodecamp.com/vaibsharma
:star2: 1299 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
vaibhav sharma
@vaibsharma
Jul 28 2016 11:41
use your creativity as much you can , and build a unique project
hello ! I am currently on the twitch tv challenge ,but know I find API is not giving the sufficient info in the seperate tab , and when I am using it in the project its working . How is it possible ?
Ivan
@ivankishko
Jul 28 2016 11:53
@kirbyedy nope, dont have any idea why this links dont work precisely on iPhone.
@kirbyedy update didnt help
kirbyedy
@kirbyedy
Jul 28 2016 11:59
ugh :(
Sorin Ruse
@sorinr
Jul 28 2016 12:00
@AlexanderDom hi. this is a solution. hope its ok for you: http://codepen.io/sorinr/pen/NAzodP/
Aleksandar S. N.
@Nolorwolf
Jul 28 2016 12:02
Hi, anyone knows why this line :
$(".ysize").height($(window).height() - $("#menu").height());
doesn't work correctly once I resize the pen so that columns stack (sm/xs I guess down from md)? After re-running ofc, it does not update atm :)
Pen: https://codepen.io/Nolorwolf/pen/XKYABq
Alexander Domikov
@AlexanderDom
Jul 28 2016 12:11
@sorinr thank you again, seems like it's it, gonna see what you did there :)
CamperBot
@camperbot
Jul 28 2016 12:11
:cookie: 575 | @sorinr |http://www.freecodecamp.com/sorinr
alexanderdom sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Sorin Ruse
@sorinr
Jul 28 2016 12:16
@AlexanderDom there is something that i don't like. the small image is changing position after multiple click. but this can be solved. let me think
Aleksandar S. N.
@Nolorwolf
Jul 28 2016 12:25
Ignore mine, I just didn't see the problem correctly
Sorin Ruse
@sorinr
Jul 28 2016 12:34
@AlexanderDom updated the pen. now its working the right way
Janine vN
@janine9vn
Jul 28 2016 12:36
I'm having a lot of trouble with ScrollSpy in the bootstrap framework if anyone could take a look: http://codepen.io/janine9vn/pen/qNKoAZ
Alexander Domikov
@AlexanderDom
Jul 28 2016 12:39
@sorinr sorry i was away, gonna see that
Sorin Ruse
@sorinr
Jul 28 2016 12:44
@AlexanderDom ok. let me know if solves your problem
Alexander Domikov
@AlexanderDom
Jul 28 2016 12:49
@sorinr yes thank you, again for your time :)
CamperBot
@camperbot
Jul 28 2016 12:49
alexanderdom sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: alexanderdom already gave sorinr points
Sorin Ruse
@sorinr
Jul 28 2016 12:50
@AlexanderDom welcome. i don't know how it will work in a general context. i made it just for this isolated example you provided
Alexander Domikov
@AlexanderDom
Jul 28 2016 12:51
yes i gonna see for other cases, i passed some time drawing squares and trying to figure out how to calculate this :)
Hamoud Khatar
@skhamoud
Jul 28 2016 12:52
@janine9vn you didnt include the javascript part with and you also didn't give the navs IDs
AlexanderNelson
@AlexanderNelson
Jul 28 2016 12:52
the gradient on my open buttons stopped working. they are now just white no matter what styling i try to apply.http://codepen.io/AlexanderNelson/pen/jAKrGj?editors=1100 it should be applying this .btn {
background: -webkit-linear-gradient(top, #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%); AnyIdeas?
Sorin Ruse
@sorinr
Jul 28 2016 12:55
@AlexanderDom pm me if you need further help
Janine vN
@janine9vn
Jul 28 2016 12:56
@skhamoud I have the JS included under the JS quickadd section though. It's the minified version so it should be there. The nav class has an id attached to it
@ivankishko I've looked at that and a lot of other things, but I'm not sure what I'm doing wrogn
Alexander Domikov
@AlexanderDom
Jul 28 2016 12:56
@sorinr yes :) if you have some questions on css i'm here too
Kevin
@KevinBruland
Jul 28 2016 12:57
Does anyone have any opinions on using a UI kit?
im working on making a new portfolio. At this point, I could definitely make something better looking using a UI kit, but it feels like "cheating"
Ivan
@ivankishko
Jul 28 2016 12:58
@janine9vn well, you dont have that inside your <body> - <body data-spy="scroll" data-target=".navbar" data-offset="50">
@janine9vn try to do things from w3schools step by step - should work
Janine vN
@janine9vn
Jul 28 2016 12:59
@ivankishko I tried that earlier and it wasn't working. But I switched around what loads first in the JS section and that seemed to have helped
Ivan
@ivankishko
Jul 28 2016 13:00
@janine9vn good)
Sorin Ruse
@sorinr
Jul 28 2016 13:01
@AlexanderDom ok i will. happy coding :)
Alexander Domikov
@AlexanderDom
Jul 28 2016 13:01
@sorinr you too :)
i'm on calculator exercice for now, frontend accomplishment is near :D
Hamoud Khatar
@skhamoud
Jul 28 2016 13:02
@janine9vn wait I'll get back to you
Steven Foster
@Rockchalk8985
Jul 28 2016 13:02
I need help what am I doing wrong here. I'm trying to include a bootstrap rounded image of myself but I cant seem to get it to work http://codepen.io/Rockchalk8985/pen/vKmygb
Janine vN
@janine9vn
Jul 28 2016 13:02
@skhamoud I got it actually!
@skhamoud So it's all good.
Sorin Ruse
@sorinr
Jul 28 2016 13:04
@Rockchalk8985 you have to reference that img externaly. codepen does not load from your pc
Daniel Azmitia
@danazm
Jul 28 2016 13:07
Ahh! Not really sure which room to ask this in, so figured I'd start here. Anyone think they can help me figure out why this bootstrap navbar won't collapse properly? Been looking for a way to fix this for hours. :cry: https://codepen.io/m3gapxl/pen/dXKgbm
Steven Foster
@Rockchalk8985
Jul 28 2016 13:10
@sorinr gotcha let me give that a try then
@sorinr thank you
CamperBot
@camperbot
Jul 28 2016 13:10
rockchalk8985 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 576 | @sorinr |http://www.freecodecamp.com/sorinr
Taras Yaremkiv
@Y-Taras
Jul 28 2016 13:15

Hello everyone. :I need a small help. I'm working on the javascript calculator project. I'd like the Calc screen display 0 as soon as the page is loaded, but until a user would press a mouse key on any calculator button.
Below is part of my code with click event listner:

button = document.querySelectorAll("button");
        for (var i = 0; i < button.length; i++) {

            button[i].addEventListener("click", function () {

                buttId = this.id;
                buttClass = this.className;
                buttVal = this.value;

So I have to write the code like
Until I get first click event document.getElementsByClassName("screen")[0].innerHTML = "0"
But I dont know how to implement it in javascript. :worried:

Ivan
@ivankishko
Jul 28 2016 13:17
@m3gapxl <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> Try to remove aria-expanded/
@m3gapxl I dont know what is this for actually but try)
Daniel Azmitia
@danazm
Jul 28 2016 13:19

@ivankishko yeah, that's in there because after a certain point I just gave up and started copy+pasting everything from the bootstrap demo code.

Apparently, I had added the bootstrap css and completely missed adding the JS. <_< It's working now; thanks though.

CamperBot
@camperbot
Jul 28 2016 13:19
m3gapxl sends brownie points to @ivankishko :sparkles: :thumbsup: :sparkles:
:cookie: 169 | @ivankishko |http://www.freecodecamp.com/ivankishko
AlexanderNelson
@AlexanderNelson
Jul 28 2016 13:20
Im just going to post it with the broken buttons soi can continue with the next course. I figure i spent 12 hours on it already and I may end up changing it anyway after i learn the next section.
Janine vN
@janine9vn
Jul 28 2016 13:21
@ivankishko Isn't ARIA for accessibility type things?
Henrique Salguero
@kikosalguero
Jul 28 2016 13:22
Can anyone help me? Why my $.getJSON function is not working?
i just want the name of the city
Sorin Ruse
@sorinr
Jul 28 2016 13:22
@Y-Taras in your document ready function just initialize document.getElementsByClassName("screen")[0].innerHTML = "0"
Stephen James
@sjames1958gm
Jul 28 2016 13:23
@kikosalguero You cannot use a https:// url from a site loaded with https://
Hamoud Khatar
@skhamoud
Jul 28 2016 13:24
@janine9vn ok cool what was it
Janine vN
@janine9vn
Jul 28 2016 13:25
@skhamoud I had to load in the jquery before bootstrap and had the Scrollspy attached to the body. The real problem was not loading in jquery first
Henrique Salguero
@kikosalguero
Jul 28 2016 13:25
@sjames1958gm what i need to change?
Steven Foster
@Rockchalk8985
Jul 28 2016 13:27
I'm trying to include a rounded photo of myself on bootstrap here and it has to be external because of codepen but I'm lost on how to do that. Help please.
Stephen James
@sjames1958gm
Jul 28 2016 13:27
@kikosalguero If you are using chrome you will have an issue, you need https:// to get to the geolocation data. but http:// to get to openweather.
You can connect to codepen with http:// and use an api like ip-api.com for getting location based on ip address rather than from the browser
kirbyedy
@kirbyedy
Jul 28 2016 13:27
@Rockchalk8985 upload on some cloud service
Hamoud Khatar
@skhamoud
Jul 28 2016 13:28
@janine9vn makes sense I couldn't see that so I was starting to be like what ? why isn't this working ? anyway gd luck
kirbyedy
@kirbyedy
Jul 28 2016 13:28
I use dropbox, but you can use something else, like postimg.org
Henrique Salguero
@kikosalguero
Jul 28 2016 13:30
@sjames1958gm Ok i got it, thanks!
CamperBot
@camperbot
Jul 28 2016 13:30
kikosalguero sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 2198 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Sorin Ruse
@sorinr
Jul 28 2016 13:32
@kikosalguero you should use this way: var api = 'https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?lat=23&lon=46&appid=27c7d628d437eed585e012e64ef73cca&lang=en'; and replace the hardcoded lat and lon with the variables you get from geolocation
Taras Yaremkiv
@Y-Taras
Jul 28 2016 13:46
@sorinr :+1: :)
spalqui
@spalqui
Jul 28 2016 13:54
hello guys
can anyone confirm if the twitch api works
it is returning an null object
managed to understand it
only return data on the streams that are online
Stephen James
@sjames1958gm
Jul 28 2016 13:56

@spalqui This is the object I see:

{"stream":null,"_links":{"self":"https://api.twitch.tv/kraken/streams/freecodecamp","channel":"https://api.twitch.tv/kraken/channels/freecodecamp"}}

"stream":null
means the user is offline

Steven Foster
@Rockchalk8985
Jul 28 2016 14:00
Ok i've got my image but its not circular can anyone help take a look here see what I did wrong here.http://codepen.io/Rockchalk8985/pen/vKmygb
John Doe
@codingisfun11
Jul 28 2016 14:01
what 2 do nxt
blob
Joakim Bajoul Kakaei
@Todai88
Jul 28 2016 14:06

Honestly now. This is getting ridiculous...

I've had a few responses on this issue previously, but nothing that actually fixed the issue.
I need the two buttons that are beneath my carousel to be centered underneath it, next to each other and in the same container.
I've tried it a few ways, I've googled it, looked at SO. Nothing has helped me.

Anyone?

https://codepen.io/Todai/pen/grKvjO

Unknown
@Unknownhezipaz
Jul 28 2016 14:06
how do you add image on bootstrap
Unknown
@Unknownhezipaz
Jul 28 2016 14:19
how to make an image circular
willcodes
@willcodes
Jul 28 2016 14:19
@willcodes
hey, trying to make the toggle C/F button for my weather APP... could use a little nudge in the right direction here is my codepen
http://codepen.io/willcodes/pen/bZLWRo
@majedmahmood27 use css and use border-radius:25px;
Stephen James
@sjames1958gm
Jul 28 2016 14:22
@willcodes You are calling findcity() and expecting values back immediately, but find city is async
willcodes
@willcodes
Jul 28 2016 14:25
@sjames1958gm could I call the function again on click and redefine the temps var?
Michal Kozlowski
@McBiggos
Jul 28 2016 14:25

Hi, I have a problem with Build a Random Quote Machine challenge.

There are 2 issues in my code that I can't solve:

  1. When I click the button, my text changes to <p>blablabla</p> - not to blablabla
  2. Every time I click the button, same quote is applied

Here's the pen:
http://codepen.io/McBiggos/pen/EyRRXo/
(Here in small window quote doesn't change at all :/ )

Sorin Ruse
@sorinr
Jul 28 2016 14:26
@Todai88 something like this? https://codepen.io/sorinr/pen/VjdNmb
Joakim Bajoul Kakaei
@Todai88
Jul 28 2016 14:28
@sorinr omfg! Thanks!
CamperBot
@camperbot
Jul 28 2016 14:28
todai88 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 577 | @sorinr |http://www.freecodecamp.com/sorinr
Joakim Bajoul Kakaei
@Todai88
Jul 28 2016 14:29
@sorinr Would you mind telling me what you added / removed?
@sorinr Just so I actually understand wth was happening
Sorin Ruse
@sorinr
Jul 28 2016 14:32
@Todai88 jus a sec. and i'll make the comments on the pen. ok?
Michal Kozlowski
@McBiggos
Jul 28 2016 14:33
Oh, nevermind. I've just found some tutorial and will try to understand what is messed up
Dylan
@dhcodes
Jul 28 2016 14:33
@Todai88 you've just learned that @sorinr is a mystic master of coding
John Doe
@codingisfun11
Jul 28 2016 14:34
blob
help me I am so close :fire:
CamperBot
@camperbot
Jul 28 2016 14:34
no wiki entry for: me i am so close fire
Sorin Ruse
@sorinr
Jul 28 2016 14:35
@dhcodes lol. i'm not yet
Dylan
@dhcodes
Jul 28 2016 14:36
@codingisfun11 don't edit their code
reset your code
and then use .pop() on the array name they give you :)
John Doe
@codingisfun11
Jul 28 2016 14:37
@dhcodes pop comes infront or in back of code.
Dylan
@dhcodes
Jul 28 2016 14:37
see the comment line that says "only change code below this line", that's because you need to write your answer without modifying their code
for the tests to work
@codingisfun11 after
Sorin Ruse
@sorinr
Jul 28 2016 14:37
@Todai88 so. reload that pen provided and take a look in your html part at the div.row containing the buttons. afterwards take a look in css at .next, .prev {} and also way down back bottom of css the last part added
Dylan
@dhcodes
Jul 28 2016 14:39
@codingisfun11 what do you have now?
get it to work?
Janine vN
@janine9vn
Jul 28 2016 14:41
@Todai88 You can try adding flex to make it center style="display: flex; align-items: center" and also just fixing the grid col-md-6 or what have you to get it to not overlap
Unknown
@Unknownhezipaz
Jul 28 2016 14:41
how do I create a body background color which is different to each element color.For example,the one like the portfolio page tasks
readytocode123
@readytocode123
Jul 28 2016 14:43
@majedmahmood27 you have to specify each element differently on your style...then put each color you want for each element

so you could have in your styles:

p{
background: red; 
}

etc.

John Doe
@codingisfun11
Jul 28 2016 14:45
blob
@dhcodes
robert1108
@robert1108
Jul 28 2016 14:47
Hi, I am added Boostrap links to my html page and my css stopped working. How can I solve that please?
Dylan
@dhcodes
Jul 28 2016 14:49
@codingisfun11 i said to reset your code
then you add .pop() to myArray
since they define that for you
Joakim Bajoul Kakaei
@Todai88
Jul 28 2016 14:50
Anyone good at text styling in general?
John Doe
@codingisfun11
Jul 28 2016 14:50
@dhcodes I got 2 green checks I am good expect myArray should only contain [["John", 23]]
Dylan
@dhcodes
Jul 28 2016 14:51
@codingisfun11 what's your code look like now?
you can just copy/paste it here
help rooms
CamperBot
@camperbot
Jul 28 2016 14:51

:point_right: help rooms [wiki]

FreeCodeCamp Chat Rooms

Help Rooms

Chat Room Description Chat Room
HTML/CSS/Bootstrap FreeCodeCamp/Help
JavaScript/Algorithms FreeCodeCamp/HelpJavaScript
Front End FreeCodeCamp/HelpFrontEnd
Data Visualization FreeCodeCamp/HelpDataViz
Back End FreeCodeCamp/HelpBackEnd

Choose the right room for your questions!

See also: :earth_asia: Language Specific | :satellite: Technology | :crystal_ball: Miscellaneous

back to top ↑

:pencil: read more about help rooms on the FCC Wiki

John Doe
@codingisfun11
Jul 28 2016 14:52
@dhcodes
blob
Dylan
@dhcodes
Jul 28 2016 14:52
@codingisfun11 you keep posting the same pic
the original array has two values
right?
if you reset your code?
Unknown
@Unknownhezipaz
Jul 28 2016 14:53
http://codepen.io/majedmahmood23/pen/NAzoQb .The probelm im having is the image is not next to the paragraph text and the paragraph color and the other colors are not coming out correct
Dylan
@dhcodes
Jul 28 2016 14:53
so you need to pop one off the end
@codingisfun11
and then you will have one value left
John Doe
@codingisfun11
Jul 28 2016 14:54
@dhcodes write code line 15.
?
Stephen James
@sjames1958gm
Jul 28 2016 14:56
@willcodes sorry was afk? Did you solve your C/F issue?
Dylan
@dhcodes
Jul 28 2016 15:00
@codingisfun11 ok so the code is this if you reset your code:

// Example
var ourArray = [1,2,3];
var removedFromOurArray = ourArray.pop(); 
// removedFromOurArray now equals 3, and ourArray now equals [1,2]

// Setup
var myArray = [["John", 23], ["cat", 2]];

// Only change code below this line.
var removedFromMyArray;
you need to assign the popped value of myArray to removedFromMyArray
so you change removedFromMyArray to.... what?
@codingisfun11 removedFromMyArray = ....
John Doe
@codingisfun11
Jul 28 2016 15:02
@dhcodes looks like I need to get the 2 from cat off
Dylan
@dhcodes
Jul 28 2016 15:03
@codingisfun11 nope, you need to get that whole sub array off
which you can do by adding pop to my Array
so you can set removedFromMyArray to that
myArray.pop()
does that make sense?
pop() takes off the last item in the array, so by setting the var to that you are both removing it and adding it to the var
John Doe
@codingisfun11
Jul 28 2016 15:05
@dhcodes what the f
@dhcodes it worked...
Dylan
@dhcodes
Jul 28 2016 15:05
cool
but do you understand why?
@codingisfun11 it might help to read this and look at the examples: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop
John Doe
@codingisfun11
Jul 28 2016 15:06
@dhcodes i do not i will read link
Dylan
@dhcodes
Jul 28 2016 15:07
good luck
Jaime
@lettk
Jul 28 2016 15:08
I just started the portfolio and I'm feeling overwhelmed :/
I guess it's time to read a lot about bootstrap
robert1108
@robert1108
Jul 28 2016 15:10
I just started also. You are right.
Jaime
@lettk
Jul 28 2016 15:10
Haha good luck!
John Doe
@codingisfun11
Jul 28 2016 15:12
@dhcodes what is thi used for
robert1108
@robert1108
Jul 28 2016 15:13
@lettk thank you
CamperBot
@camperbot
Jul 28 2016 15:13
robert1108 sends brownie points to @lettk :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @lettk |http://www.freecodecamp.com/lettk
Sorin Ruse
@sorinr
Jul 28 2016 15:16
@Todai88 whats the problem now? :)
Dylan
@dhcodes
Jul 28 2016 15:17
@codingisfun11 what do you mean?
it manipulates an array by removing the last item in the array
Joakim Bajoul Kakaei
@Todai88
Jul 28 2016 15:18
@sorinr no problem atm. Just asked if anyone could point me in the direction of any good text styling. Nothing else:p
Dylan
@dhcodes
Jul 28 2016 15:18
permanently
John Doe
@codingisfun11
Jul 28 2016 15:18
@dhcodes when will you ever need this in coding?
Unknown
@Unknownhezipaz
Jul 28 2016 15:19
i need help with tribute page
Sorin Ruse
@sorinr
Jul 28 2016 15:20
@Todai88 what do u mean by text styling? what font-face to use?
Joakim Bajoul Kakaei
@Todai88
Jul 28 2016 15:20
@sorinr nah, just overall.
Dylan
@dhcodes
Jul 28 2016 15:21
@codingisfun11 ex. you have an array that holds user data filled out in a form. They want to delete the last thing they entered. pop() will do that
Joakim Bajoul Kakaei
@Todai88
Jul 28 2016 15:21
@sorinr i am a bit concerned the text of backside of the cards in the carousel looks like shit.
Sorin Ruse
@sorinr
Jul 28 2016 15:22
@Todai88 ok. i got the idea. let me think
Joakim Bajoul Kakaei
@Todai88
Jul 28 2016 15:23
@sorinr I'm not sure if u saw it, but if u hover over the items in the carousel they will flip over and give some details. :)
Sorin Ruse
@sorinr
Jul 28 2016 15:24
@Todai88 i've seen that
VanioBegic
@VanioBegic
Jul 28 2016 15:26
hello,here is my first tribute page with Lorem Ipsum Filler text,tell me what you think http://codepen.io/TheCoolDrop/full/NAzqod/
Muhammad Hasham
@MohammadHasham
Jul 28 2016 15:26
how can i add whitespaces in js ?
Unknown
@Unknownhezipaz
Jul 28 2016 15:31
is there anyone who can help me as I have problems with the tribute page
Dylan
@dhcodes
Jul 28 2016 15:32
@majedmahmood27 there are loads of people
what's up
can you post your codepen
Unknown
@Unknownhezipaz
Jul 28 2016 15:43
@dhcodes http://codepen.io/majedmahmood23/pen/NAzoQb .I need to move the body into the center so the html red color on the left shows more and to make my image proper circular
John Doe
@codingisfun11
Jul 28 2016 15:45
blob
do i list the items all on same line
or on sepereately on different lines
Dylan
@dhcodes
Jul 28 2016 15:45
@majedmahmood27 brb
sorry
Unknown
@Unknownhezipaz
Jul 28 2016 15:49
@dhcodes no problem I want it to be like the tribute page tasks example is done
Dylan
@dhcodes
Jul 28 2016 15:51
@majedmahmood27 start by adding margin: 0 auto; to your body
Haib Zhang
@nperhb
Jul 28 2016 15:51
hello! The demo always display the text delay a quote https://codepen.io/nperhb/pen/RRyOqZ could someone have solution?
Unknown
@Unknownhezipaz
Jul 28 2016 15:53
@dhcodes done that
Muhammad Hasham
@MohammadHasham
Jul 28 2016 16:03
please can anyone tell me how can i enter a tab space between two words in js?
Diego Souza
@diegosouza
Jul 28 2016 16:08
@MohammadHasham \t
John Doe
@codingisfun11
Jul 28 2016 16:08
blob
so close
Muhammad Hasham
@MohammadHasham
Jul 28 2016 16:09
@diegosouza that is reduced to a single space i want multiple ones to move the text apart
John Doe
@codingisfun11
Jul 28 2016 16:10
never mind got iyt
Unknown
@Unknownhezipaz
Jul 28 2016 16:11
@dhcodes do I have to do anything more as the nevigation bar is not the full width
Diego Souza
@diegosouza
Jul 28 2016 16:17
@MohammadHasham it depends how your editor reads/converts it
@nperhb i could not understand your problem, can you explain it in another way?
Haib Zhang
@nperhb
Jul 28 2016 16:22

@diegosouza https://codepen.io/nperhb/pen/RRyOqZ I just let the code' ' ' $(".quote-content").text(currentQuote);
$(".quote-author").text(currentAuthor); ' ' ' into success: function(response) {
var r = JSON.parse(response);
currentQuote = r.quote;
currentAuthor = r.author;

} but if it out , it would not work

sorry I 'm not sure to use the format
help format
CamperBot
@camperbot
Jul 28 2016 16:24

:point_right: code formatting [wiki]

Multi line Code

```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)

<paste your code here>,
then press [shift + enter ⏎]

``` ⇦ Type 3 backticks, then press [enter ⏎]

Single line Code

This an inline `<paste code here>` code formatting with a single backtick() at _start_ and _end_ around thecode`.

See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics

:pencil: read more about code formatting on the FCC Wiki

Diego Souza
@diegosouza
Jul 28 2016 16:26
@nperhb the problem is the 0 miliseconds in your setTimeout
@nperhb if you you pass 5000 it will probably work
labeebahmad414
@labeebahmad414
Jul 28 2016 16:27
I am working on https://www.freecodecamp.com/challenges/build-a-tribute-page I want to know that would it be fine if I don't come up with my own style and just code similar to tribute page that already has been provided? Also in doing so I would code it myself without looking at code of example provided. Would that be acceptable?
Haib Zhang
@nperhb
Jul 28 2016 16:29
@diegosouza I try but not work
Sorin Ruse
@sorinr
Jul 28 2016 16:31
@labeebahmad414 go on style your way
Diego Souza
@diegosouza
Jul 28 2016 16:33
@nperhb you're facing problems also to set currentQuote and currentAuthor. Move them to the end of your ajax block.
Micheal
@wordaddict
Jul 28 2016 16:36
I am working on the tribute stage guys and trust me I don't even know where to start from
Haib Zhang
@nperhb
Jul 28 2016 16:36
@diegosouza are you sure? sorry, I 'm really could not get it?
Micheal
@wordaddict
Jul 28 2016 16:36
any help will do
Diego Souza
@diegosouza
Jul 28 2016 16:38

@nperhb

    success: function(response) {
      var r = JSON.parse(response);
    $(".quote-content").text(r.quote);
      $(".quote-author").text(r.author);

instead of

    success: function(response) {
      var r = JSON.parse(response);
      currentQuote = r.quote;
      currentAuthor = r.author;
Micheal
@wordaddict
Jul 28 2016 16:39
guys
Haib Zhang
@nperhb
Jul 28 2016 16:40
@diegosouza oh thank you
CamperBot
@camperbot
Jul 28 2016 16:40
:cookie: 12 | @diegosouza |http://www.freecodecamp.com/diegosouza
nperhb sends brownie points to @diegosouza :sparkles: :thumbsup: :sparkles:
Sorin Ruse
@sorinr
Jul 28 2016 16:41
@wordaddict pick a subject you want to present. then make a layout of your page in html part. then try to style in the css part how would you like the elements on that page should look like (color, background, dimensions, alignment, ecc)
Dylan
@dhcodes
Jul 28 2016 16:41
@majedmahmood27 sorry, got pulled away
you still around?
Sorin Ruse
@sorinr
Jul 28 2016 16:41
@dhcodes welcome back :)
Unknown
@Unknownhezipaz
Jul 28 2016 16:41
@dhcodes no problem,yes
Micheal
@wordaddict
Jul 28 2016 16:41
Thanks @sorinr
CamperBot
@camperbot
Jul 28 2016 16:41
wordaddict sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 578 | @sorinr |http://www.freecodecamp.com/sorinr
Dylan
@dhcodes
Jul 28 2016 16:45
@majedmahmood27 did you get it sorted out?
pretty much I would make your body 100% wide and then make a separate container for your picture/intro
and make it 89% wide
give the container the bg color of grey
and let the body bg be red
Unknown
@Unknownhezipaz
Jul 28 2016 16:47
@dhcodes yeah the body is fine but the navigation bar is not full width .Would I put the container in a div class
Dylan
@dhcodes
Jul 28 2016 16:47
yeah @majedmahmood27
the nav bar can do in the body, but before the container
and then the navbar can be width: 100% too
Unknown
@Unknownhezipaz
Jul 28 2016 16:55
@dhcodes i did that but now the image is not circular and not next to the text
Dylan
@dhcodes
Jul 28 2016 16:56
@majedmahmood27 i'm looking at your codepen and don't see the changes
are you working locally?
Liman Abba
@limanCode
Jul 28 2016 17:04
Hi, please I have finished the tribute page but I don't understand how to submit it
How do I submit the page after completion?
Unknown
@Unknownhezipaz
Jul 28 2016 17:08
@dhcodes yes im working from my laptop .Can I send a link again
yeah i just checked the changes dont show up how else can i send it
Dylan
@dhcodes
Jul 28 2016 17:21
@majedmahmood27 here, i forked yours, made some changes and left commetns in the CSS
take a look and make sure you see what I did and why
oh and I got a cat pic because the imgur one wasn't loading for me
scottycb13
@scottycb13
Jul 28 2016 17:40
can anybody give me some clues to get started on the "Build a random quote machine" project. I've done many searches and I can't even find a good URL for quote data in JSON format. Thanks
Darshan
@Dave1089
Jul 28 2016 17:40
@scottycb13 quick google search gives me this https://quotesondesign.com/api-v4-0/
used it tested it and worked fine for me
Muhammad Hasham
@MohammadHasham
Jul 28 2016 17:42
is there anyway in which i can display these images 2 per row
http://codepen.io/Mohammad_Hasham/pen/QEAVWY?editors=1100
Darshan
@Dave1089
Jul 28 2016 17:43
@MohammadHasham using bootstrap grid
Muhammad Hasham
@MohammadHasham
Jul 28 2016 17:44
@Dave1089 tried that already
<div class = "col-md-2">
Darshan
@Dave1089
Jul 28 2016 17:45
@MohammadHasham nope
col-md-6
scottycb13
@scottycb13
Jul 28 2016 17:46
@Dave1089 I'll give that a look. Thanks.
CamperBot
@camperbot
Jul 28 2016 17:46
scottycb13 sends brownie points to @dave1089 :sparkles: :thumbsup: :sparkles:
:cookie: 347 | @dave1089 |http://www.freecodecamp.com/dave1089
Muhammad Hasham
@MohammadHasham
Jul 28 2016 17:46
@Dave1089 i'll just do that!
Darshan
@Dave1089
Jul 28 2016 17:48
@MohammadHasham i think that won't work because u r appending ur channel div
Muhammad Hasham
@MohammadHasham
Jul 28 2016 17:48
@Dave1089 yes,
is there anyway else
Darshan
@Dave1089
Jul 28 2016 17:49
wait.. let me open ur pen
Muhammad Hasham
@MohammadHasham
Jul 28 2016 17:51
okay @Dave1089
Darshan
@Dave1089
Jul 28 2016 17:54
@MohammadHasham somehow ur pen stops fetching json on every refresh
Muhammad Hasham
@MohammadHasham
Jul 28 2016 17:56
@Dave1089 that api takes sometime but it eventually load up :smile:
Darshan
@Dave1089
Jul 28 2016 18:02
@MohammadHasham it doesn't actually
Muhammad Hasham
@MohammadHasham
Jul 28 2016 18:03
:worried: i'll check that again
figured out
u just need to add col-md-6 class to ur appended div in if else condition both
Muhammad Hasham
@MohammadHasham
Jul 28 2016 18:05
@Dave1089 Thanks man!
CamperBot
@camperbot
Jul 28 2016 18:05
mohammadhasham sends brownie points to @dave1089 :sparkles: :thumbsup: :sparkles:
:cookie: 348 | @dave1089 |http://www.freecodecamp.com/dave1089
Muhammad Hasham
@MohammadHasham
Jul 28 2016 18:05
how you did that?
incredible man!
@Dave1089
Darshan
@Dave1089
Jul 28 2016 18:06
@MohammadHasham I haven't changed ur pen so u need to do it, I forked it only so I will delete forked pen
Muhammad Hasham
@MohammadHasham
Jul 28 2016 18:07
Yes! i understood
you added those col-md-6
@Dave1089 Thanks again
CamperBot
@camperbot
Jul 28 2016 18:07
mohammadhasham sends brownie points to @dave1089 :sparkles: :thumbsup: :sparkles:
:warning: mohammadhasham already gave dave1089 points
Tyler Moeller
@TylerMoeller
Jul 28 2016 18:17
@AlexanderNelson Remove the <head> code from your HTML to fix this. You already have bootstrap set up in your codepen settings and don't need it to load it twice. .btn is a bootstrap class and with bootstrap specified again in your HTML, it overwrites your CSS settings.
Rich
@richard-ball
Jul 28 2016 18:23
Where can I find a list of the events that are supported by .addEventListener?
Ian
@IJACOBS
Jul 28 2016 18:25
Hey guys, I really need some help with the wikipedia viewer project. I am able to get the random button to work (easy, I know) and I know how to make the API call to the wikipedia server, but I dont know what to do after that. I dont know what to do with the incoming information and how to organize it to create the proper html elements to display. The FCC lessons dont really cover this, and I havent been able to find enough help with other resources. Can someone point me in the right direction a little bit?
Tyler Moeller
@TylerMoeller
Jul 28 2016 18:25
@richard-ball This is a good reference: https://developer.mozilla.org/en-US/docs/Web/Events
Rich
@richard-ball
Jul 28 2016 18:29
@TylerMoeller thanks
CamperBot
@camperbot
Jul 28 2016 18:29
richard-ball sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 701 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Micheal
@wordaddict
Jul 28 2016 18:33
guys I need help, I don't know what is wrong with this my image code for a tribute project
Jason Luboff
@JLuboff
Jul 28 2016 18:35
Hi all. I'm working on my Weather App and I've been using the IP API to get location, but I'm unhappy with how it works for cellular connection (i.e thinks I'm in a different state due to IP being registered else where). I'm trying to figure out how to use GeoLocation but then switch to IP if Geo can't be used (i.e in Chrome). I believe I need to use an If/Else statement but not sure how to properly write it up. Can anybody give me some pointers/hints? Thanks
Promise Tochi
@Promhize
Jul 28 2016 18:37
@richard-ball just search google for 'addeventlistener mdn'
Sorin Ruse
@sorinr
Jul 28 2016 18:37
@wordaddict link ur pen here
vínαч puppαl
@vinaypuppal
Jul 28 2016 18:38
@JLuboff u can use open weather api with geolocation instead of IP API, by folllowing these steps
  • Load u r codepen over https https://your-pen-url
  • Since open weather api doesnot support https u need to use https://crossorigin.me as proxy server
  • Like https://crossorigin.me/http://api.openweatherapi.com/....
Micheal
@wordaddict
Jul 28 2016 18:38
@sorinr i dont understand what you mean
Tyler Moeller
@TylerMoeller
Jul 28 2016 18:41
@wordaddict Open your browser in incognito/private mode and try to access the URL to your image. If you can't access it, codepen can't access it either.
Sorin Ruse
@sorinr
Jul 28 2016 18:41
@wordaddict you said you have problems with one of your images on the tribute page. how do you imagine i can guess what can be the problem if we don't see the code. just copy paste your codepen link in here so we can see the code
Micheal
@wordaddict
Jul 28 2016 18:42
Thank you @sorinr and @TylerMoeller the url was incorrect, but how do i insert images into my codepen without the pro version?
CamperBot
@camperbot
Jul 28 2016 18:42
wordaddict sends brownie points to @sorinr and @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 580 | @sorinr |http://www.freecodecamp.com/sorinr
:cookie: 702 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Jason Luboff
@JLuboff
Jul 28 2016 18:42
@vinaypuppal Thanks, I'll try this out
CamperBot
@camperbot
Jul 28 2016 18:42
jluboff sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 432 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Promise Tochi
@Promhize
Jul 28 2016 18:42
@IJACOBS you would need to create an html for each result, if you did the api call correctly, you will receive 10 search results, you would then have to loop over it if its an array, or use for...in if the api returned object, when you loop, you can create a div, with 'document.createElement', then you create a create textNode with the value being the result text, check mozilla developer network for document.createElement, you would see other methods for classes, creating textNode and so on, then you would attach everything to your page
Tyler Moeller
@TylerMoeller
Jul 28 2016 18:43
@wordaddict You can use a service like https://postimage.org/. They'll give you a URL you can use in your <img src="url">
Micheal
@wordaddict
Jul 28 2016 18:43
oh Thanks @TylerMoeller i will try it out
CamperBot
@camperbot
Jul 28 2016 18:43
wordaddict sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: wordaddict already gave tylermoeller points
melisa pettaway
@mpettaw2
Jul 28 2016 19:11
hello all. for the twitchtv project how did you guys get the profile icons for the ppl who are not streaming and those who no longer have an account
i was looking at the json for those two and i don't see where images are avaliable
sm-programmer
@sm-programmer
Jul 28 2016 19:22
@mpettaw2 You can use an external service that provides placeholder images for such people. One that is based on user names is Adorable Avatars.
Muhammad Hasham
@MohammadHasham
Jul 28 2016 19:22

http://codepen.io/Mohammad_Hasham/pen/QEAVWY?editors=1100

basically radio buttons are not looking that good can i use there something else and what can it be?

sm-programmer
@sm-programmer
Jul 28 2016 19:24
@MohammadHasham I guess you could use two toggle buttons, which basically are checkboxes. See Bootstrap Toggles for that matter.
Or even the Bootstrap buttons. One can force the "pressed" state by manipulating classes.
Tyler Moeller
@TylerMoeller
Jul 28 2016 19:27
@MohammadHasham You could use a bootstrap drop-down button called "Filter" that has options for All, Online, Offline. http://getbootstrap.com/components/#btn-dropdowns
Diego Souza
@diegosouza
Jul 28 2016 19:27
@MohammadHasham you could have hidden radios and do it through javascript click events in images or whatever triggering the selection
melisa pettaway
@mpettaw2
Jul 28 2016 19:28
@sm-programmer thank you
CamperBot
@camperbot
Jul 28 2016 19:28
mpettaw2 sends brownie points to @sm-programmer :sparkles: :thumbsup: :sparkles:
:cookie: 305 | @sm-programmer |http://www.freecodecamp.com/sm-programmer
Tyler Moeller
@TylerMoeller
Jul 28 2016 19:29
@mpettaw2 For closed accounts, the logo image is at: https://web-cdn.ttvnw.net/images/xarth/dead_glitch.png
For offline logos, you'll need to make another API call to https://api.twitch.tv/kraken/channels/<user name>
Hadouken
@Harry97
Jul 28 2016 19:31
Guys, I have two problems, and it'd appreciated of you if you can help me out. How can I make my setInterval function be called once? and why does "minutes" print the unupdated version of the "#timer" element? https://codepen.io/Hadouken/pen/bEmymd?editors=0010
Muhammad Hasham
@MohammadHasham
Jul 28 2016 19:31
@sm-programmer where shall i add the libraries provided by bootstrap toggle
sm-programmer
@sm-programmer
Jul 28 2016 19:34
@MohammadHasham In CodePen, you click "Settings", and under the CSS and JavaScript tabs, you add the corresponding CSS and JS files listed in the link.
@Harry97 You should check when the seconds underflow (that is, when they reach a negative number), so that only in those circumstances, you reduce by one the number of minutes, and at the same time set the seconds to 59.
spalqui
@spalqui
Jul 28 2016 19:37
http://codepen.io/Spalqui/pen/KrZEry what do you guys think of it so far
Ken Haduch
@khaduch
Jul 28 2016 19:37
@Harry97 - you should, in general, not use the DOM for storage of data that you are going to use later in your code. You should keep your values in javascript variables and output them to the DOM when necessary.
Hadouken
@Harry97
Jul 28 2016 19:37
@khaduch I still haven't completed my count down function and that's okay
my issue is how "minutes" is printing 25 regardless of whether I change the session time or not
Ken Haduch
@khaduch
Jul 28 2016 19:39
@Harry97 - you should also do this when you call setInterval() - save the return value in a variable, because that is the only way you can stop the interval timer, by using that returned value with clearInterval(). If you only want to run setInterval once, then you could use that value in your callback function to stop it. But, perhaps, you would be better using setTimeout because that only runs once.
Hadouken
@Harry97
Jul 28 2016 19:39
and how setInterval gets called repeatedly instead of once
Ken Haduch
@khaduch
Jul 28 2016 19:39
@Harry97 - are you asking why this happens? I mean setInterval being called more than once?
Hadouken
@Harry97
Jul 28 2016 19:40
@khaduch Why it's happening and how do I fix it? :D
Ken Haduch
@khaduch
Jul 28 2016 19:41

@Harry97 - one way to do it is to declare and initialize a variable with a name like intervalID, set it to 0 Then when you call setInterval - you can do something like this:

var intervalID = 0;
if (intervalID === 0) {
    intervalID = setInterval(function, 1000);
}

So you control the setting of setInterval by whether or not you already have an ID. Then when you want to stop it, do this:

clearInterval(intervalID);
intervalID = 0;

So you can restart, the state will be set back to 0 and your setInterval can be invoked and save the new ID value.

@Harry97 - and I think that you are only reading var minutes = $("#sessionLength").html(); one time, when you first start the page.
Hadouken
@Harry97
Jul 28 2016 19:46
Well, I've done something somewhat similar to your method
setting a variable called "state"
but It wasn't yielding the results I wanted
Ken Haduch
@khaduch
Jul 28 2016 19:48
@Harry97 - a problem is that you are not saving the setInterval return and using that in the clearInterval call. You are using the callback function for clearInterval, and that is probably not going to do anything helpful.
Muhammad Hasham
@MohammadHasham
Jul 28 2016 19:50
$("#online").on("click", function(de) {
$("#online").button('toggle');
$('.online').show();
$('.offline').hide();
why is my button not toggling?
Ken Haduch
@khaduch
Jul 28 2016 19:50
@Harry97 - if you do exactly what I did, then it will work. You have to save the setInterval return, and if you are using it as a state control, then test it, and clear it when you run clearInterval.
Hadouken
@Harry97
Jul 28 2016 19:52
@khaduch Thanks a lot! I'mma start fixing things right now.
CamperBot
@camperbot
Jul 28 2016 19:52
harry97 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1490 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Jul 28 2016 19:54
@MohammadHasham - can you post a link to your code? Hard to tell what's going on without more context? But I'm not sure what $("#online").button('toggle'); is. I don't recall a jQuery method .button? And cannot find it with a google search.
@Harry97 - you're welcome.
oiver55
@oiver55
Jul 28 2016 19:58
Any body here understand CSP content security policy?
Muhammad Hasham
@MohammadHasham
Jul 28 2016 19:58
@khaduch figured that out
you were right
now i am using toggleclass instead of button
Thanks
miguelmyers8
@miguelmyers8
Jul 28 2016 20:00
how do i get help on portfolio creating challenge ?
Ken Haduch
@khaduch
Jul 28 2016 20:09
@6ytrenches - I suggest one possible place to look - if you are planning to use Bootstrap. Have a look at the http://w3schools.com/bootstrap lessons, and in particular (after you're comfortable enough with bootstrap) look at their "Bootstrap Themes". They walk you through the design and implementation of some pages that look a lot like the example portfolio. It's a helpful tutorial.
Muhammad Hasham
@MohammadHasham
Jul 28 2016 20:23
why are my images not being targeted by jquery,the buttons are working perfect
but why not images
http://codepen.io/Mohammad_Hasham/pen/QEAVWY?editors=0010
Dario Idrovo
@djidrovo1
Jul 28 2016 20:38
Hi!!!
I need help
:D
my project section image, the first one, why is it not filling in correctly like the other ones?
Dan Santos
@CanIGetAPickle
Jul 28 2016 21:22
@djidrovo1 It's a .png with transparency on both sides, so it appears as transparent
use this link with a white background instead https://s31.postimg.org/9bbkxbtmj/actofhate_1.png
Michal Kozlowski
@McBiggos
Jul 28 2016 21:43
Guys, when you were building random quote machine, you made your own array of quotes, or used some api?
Darshan
@Dave1089
Jul 28 2016 21:43
@McBiggos api
Alique Williams
@AliqueWilliams
Jul 28 2016 21:44
Ali
Api
No way I would build an array of quotes lol
Michal Kozlowski
@McBiggos
Jul 28 2016 21:45
could you tell were can I find good one without installing some libraries (can't understand how to use mashape at this point)
Alique Williams
@AliqueWilliams
Jul 28 2016 21:45
Let me check my project
nirurin
@nirurin
Jul 28 2016 21:45
I understand that there is a way to offset bootstrap columns, so that they appear in the position that you want... but is there any reason to use offset, compared to just putting in an empty column? seems they would both have the same effect?
Michal Kozlowski
@McBiggos
Jul 28 2016 21:45
I tried to do it myself, but I am stuck for a day now :(
Yeah, give me a moment
Link used in getJSON should already return random quote but it doesn't
(according to page where I found it)
and also opening that link in browser
Darshan
@Dave1089
Jul 28 2016 21:53
@McBiggos quick google search gives me https://quotesondesign.com/api-v4-0/ . used , tested and worked for me
Jake Espinoza
@medicinemetasin
Jul 28 2016 21:53
I'm having trouble figuring out why the geolocation function isn't working in CodePen. I copy/pasted code from the FCC lesson in JSON APIs and AJAX and adapted it to my project as such: <code>if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
url += '&lat=' + position.coords.latitude + "&lon=" + position.coords.longitude;
});
//$('h2').text(url);
}</code>
but nothing's happening. Any pointers?
Michal Kozlowski
@McBiggos
Jul 28 2016 21:54
@Dave1089 yeah, I'm trying to use it, but http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=mycallback doesn't return random quote as it should
Jake Espinoza
@medicinemetasin
Jul 28 2016 21:54
Also, ugh. How do I properly tag that code block?
Michal Kozlowski
@McBiggos
Jul 28 2016 21:54
with "```" before and after block
Darshan
@Dave1089
Jul 28 2016 21:55
"http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback="
Jake Espinoza
@medicinemetasin
Jul 28 2016 21:55
@McBiggos Thanks
CamperBot
@camperbot
Jul 28 2016 21:55
medicinemetasin sends brownie points to @mcbiggos :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @mcbiggos |http://www.freecodecamp.com/mcbiggos
Darshan
@Dave1089
Jul 28 2016 21:55
@McBiggos
correct way
Jake Espinoza
@medicinemetasin
Jul 28 2016 21:56
Test:
"" if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { url += '&lat=' + position.coords.latitude + "&lon=" + position.coords.longitude; }); //$('h2').text(url); }""
'''test'''
CamperBot
@camperbot
Jul 28 2016 21:56
:bulb: to format code use backticks! ``` more info
Michal Kozlowski
@McBiggos
Jul 28 2016 21:56
@Dave1089 I've accidentaly pasted you some code from api's page - I'm currently using one you mentioned
Jake Espinoza
@medicinemetasin
Jul 28 2016 21:57
last one, promise
Michal Kozlowski
@McBiggos
Jul 28 2016 21:57
@medicinemetasin without quote tags ""
and not single ' but `
the one above Tab
@Dave1089 and when I enter your link in browser, it returns random quote
but it doesn't in my app
:(
Darshan
@Dave1089
Jul 28 2016 22:01
@McBiggos please paste ur pen link.. let me have a look
note: button doesn't change quote here in gitter, but normally does
Darshan
@Dave1089
Jul 28 2016 22:05
@McBiggos console giving syntax error,, can u find?
that should be the issue
Screen Shot 2016-07-28 at 4.05.47 PM.png
bsandusky
@bsandusky
Jul 28 2016 22:06
@McBiggos <script> $ npm install unirest; </script> seems to be your culprit
Michal Kozlowski
@McBiggos
Jul 28 2016 22:06
hmm... my js box in codepen says there's no issue :/
bsandusky
@bsandusky
Jul 28 2016 22:07
You have this in your index.html file, which is not a valid call from an application. That is a command line installation call.
Michal Kozlowski
@McBiggos
Jul 28 2016 22:07
oh yeah, forgot to remove that after testing some mashape stuff
ok, removed that, thanks @bsandusky
CamperBot
@camperbot
Jul 28 2016 22:08
mcbiggos sends brownie points to @bsandusky :sparkles: :thumbsup: :sparkles:
:cookie: 324 | @bsandusky |http://www.freecodecamp.com/bsandusky
Michal Kozlowski
@McBiggos
Jul 28 2016 22:08
however, it still doesn't work
bsandusky
@bsandusky
Jul 28 2016 22:09
what is not working?
Michal Kozlowski
@McBiggos
Jul 28 2016 22:10
when I click the button, quote should be changed to random one, outsourced from http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=
When I go to that url in browser, random quote shows. However, when I use it in my code, it shows same one everytime
Darshan
@Dave1089
Jul 28 2016 22:12
@McBiggos $.ajaxSetup({ cache: false }); try put at it the beginning of ur script
Michal Kozlowski
@McBiggos
Jul 28 2016 22:14
thanks @Dave1089 , it works <3 Could you tell me, what was wrong and why this line fixed that?
CamperBot
@camperbot
Jul 28 2016 22:14
mcbiggos sends brownie points to @dave1089 :sparkles: :thumbsup: :sparkles:
:cookie: 353 | @dave1089 |http://www.freecodecamp.com/dave1089
Darshan
@Dave1089
Jul 28 2016 22:15
This will prevent all future AJAX requests from being cached..
@McBiggos
Michal Kozlowski
@McBiggos
Jul 28 2016 22:16
Oh, okay. I completely don't get what is going on, so will read about that
Love you guys
Darshan
@Dave1089
Jul 28 2016 22:16
@McBiggos :sparkles: :+1:
Adam
@Adam-Collier
Jul 28 2016 22:18
Hi I am trying to make some ballons with some text (to describe the links) which appear when you hover over the button but I can't even get the div to show up! can somebody help? heres the pen https://codepen.io/AdamCollier/pen/OXvwAw?editors=0100 and this is a similar kind of effect I want to achieve http://travisneilson.com/2014/12/10/32-years-of-poetry.html
fernando
@zaynsantiago
Jul 28 2016 22:28
hey does anyone know how to make it so when u hover over an imagine it has text then when you click it.it will redirect you to another link like an overlay of an image
this may help
fernando
@zaynsantiago
Jul 28 2016 22:32
@Dave1089 yes i want it like that but over my images because i have mutiple images and over each imagine i want to create an overlay so it can be redirected to different things
Darshan
@Dave1089
Jul 28 2016 22:35
@zaynsantiago u just need to wrap your image in anchor with link and put text in overlay span and follow you can do the same with just css :hover property like the above pen I posted
fernando
@zaynsantiago
Jul 28 2016 22:36
how would i do that ?
Darshan
@Dave1089
Jul 28 2016 22:37
@zaynsantiago did u look into the pen I posted?
and try to understand what its doing?
fernando
@zaynsantiago
Jul 28 2016 22:38
yes and i started changing acouple things on it to see how i could use it so far i was able to change what i wanted but not the anchor
Darshan
@Dave1089
Jul 28 2016 22:39
@zaynsantiago paste the link of ur updated codepen
Vercaelus
@Vercaelus
Jul 28 2016 22:41
Howdy y'all. Would anyone be able to help me figure out why my columns dont resize correctly?
fernando
@zaynsantiago
Jul 28 2016 22:43
@Dave1089 yes and i want to make it so you can cover over an imagine and it says something like facebook then you can click it and it will redirect you to my facebook but exactly how ou have ur pen that you showed me
Darshan
@Dave1089
Jul 28 2016 22:44
@zaynsantiago but it seems like you haven't even tried to do the same CSS overlay you can find in the pen I posted... give it try first man! I know you will solve it.. if you then again find any issue, let me know
Kevin Norris
@kevinnorris
Jul 28 2016 22:52
@Vercaelus Seems to be resizing correctly for the classes you have added, how exactly are you wanting it to resize?
fernando
@zaynsantiago
Jul 28 2016 22:53
@Dave1089 thanks man
CamperBot
@camperbot
Jul 28 2016 22:53
zaynsantiago sends brownie points to @dave1089 :sparkles: :thumbsup: :sparkles:
:cookie: 354 | @dave1089 |http://www.freecodecamp.com/dave1089
Vercaelus
@Vercaelus
Jul 28 2016 22:55
@Steedler I'd like for the <p> element to align right and be centered vertically on a full-size screen. At lower screen sizes, I'd like for the text to move below the weather icons, with both th eicon and text centered horizontally
But on the resize, things get weird. The <p> texts overflows below the bottom of the column
fernando
@zaynsantiago
Jul 28 2016 23:00
@Dave1089 hey so i tried it but im trying to figure out how i can overlay it on my picture and not above it http://codepen.io/zayn_santiago/pen/YWaVgq?editors=1000
Kevin Norris
@kevinnorris
Jul 28 2016 23:02
@Vercaelus is the pen working for you? I don't see any icon's all I see are "error" messages.
Vercaelus
@Vercaelus
Jul 28 2016 23:02
You have to go to the actual codepen website
It isnt able to get your location through this chat system
Kevin Norris
@kevinnorris
Jul 28 2016 23:03
Had forgotten to turn off some addon's ;p
Vercaelus
@Vercaelus
Jul 28 2016 23:05
@Steedler No worries :)
Kevin Norris
@kevinnorris
Jul 28 2016 23:12
@Vercaelus when I resize no <p> elements overflow the columns, only at less than 340px width do the icons start to overflow. Am viewing on Chrome.
@Vercaelus However, at larger sizes they are not aligned right, instead they are always below the weather icons. Is this what you are trying to fix?
Vercaelus
@Vercaelus
Jul 28 2016 23:13
@Steedler Hmm... Ive been messing with it, so maybe I accidentally fixed that issue lol. But yes, thats another issue I'm having
@Steedler I'd like for the <p> to be postioned nicely next to the icons, but I'm having an awful time of it
As the screen size decreases, they should move below the icons
EdenSweden
@EdenSweden
Jul 28 2016 23:26
Hi y'all. There is a certain element on the page that I want to always appear at the top of the screen whenever I click a navbar link. It is the last section of my page. I also have a footer on the page. Is there a way to make the margin above the footer automatic so that there is enough space so that the element is always at the top on every screen size?
Vercaelus
@Vercaelus
Jul 28 2016 23:29
@EdenSweden It sounds like you might want to take a look at "display:fixed"
Kevin Norris
@kevinnorris
Jul 28 2016 23:30
@Vercaelus Perhaps the easiest way is to set up another row in your panel-body, then you can adjust the resizing however you want. Something like: <div class="panel-body row"> <div class="col-md-6 col-sm-12"> <canvas id="icon1" class="icon" width="128" height="128"></canvas> </div> <div class="col-md-6 col-sm-12"> <p class="text-center summary">error</p> </div> </div>
Elbert Cortez
@trip16661
Jul 28 2016 23:31
help format
CamperBot
@camperbot
Jul 28 2016 23:31

:point_right: code formatting [wiki]

Multi line Code

```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)

<paste your code here>,
then press [shift + enter ⏎]

``` ⇦ Type 3 backticks, then press [enter ⏎]

Single line Code

This an inline `<paste code here>` code formatting with a single backtick() at _start_ and _end_ around thecode`.

See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics

:pencil: read more about code formatting on the FCC Wiki

Kevin Norris
@kevinnorris
Jul 28 2016 23:32
<div class="panel-body row">
                            <div class="col-md-6 col-sm-12">
                                <canvas id="icon1" class="icon" width="128" height="128"></canvas>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <p class="text-center summary">error</p>
                            </div>
                        </div>
Vercaelus
@Vercaelus
Jul 28 2016 23:32
@Steedler Hm... I was trying to avoid that. But if thats the way its gotta be, then I'll just have to roll with it. Thanks
CamperBot
@camperbot
Jul 28 2016 23:32
vercaelus sends brownie points to @steedler :sparkles: :thumbsup: :sparkles:
:cookie: 321 | @steedler |http://www.freecodecamp.com/steedler
Kevin Norris
@kevinnorris
Jul 28 2016 23:33
@Vercaelus I'm not sure if its the best, but its certainly the easiest, and if your already using bootstrap why not :p
Vercaelus
@Vercaelus
Jul 28 2016 23:34
@Steedler True that!
I'm gonna eventually end up re-doing the whole thing, once I figure out Angular. That ng-repeat is a godsend
nirurin
@nirurin
Jul 28 2016 23:37
can someone explain why this code isnt working on codepen?
http://codepen.io/nirurin/pen/rLANEP
its an exact copy of this - http://www.codeply.com/go/dv4rPK0Xws
Vercaelus
@Vercaelus
Jul 28 2016 23:38
@Steedler Do you know how to center that <canvas> within the column?
Kevin Norris
@kevinnorris
Jul 28 2016 23:38
@Vercaelus Nice design by the way, I like it.
Vercaelus
@Vercaelus
Jul 28 2016 23:38
Thanks! I really appreciate that, I worked pretty hard on it :)
nirurin
@nirurin
Jul 28 2016 23:39
oh... seems bootstrap changed something between 3.3.2 and 3.3.6.... any clue on how I fix it?
Elbert Cortez
@trip16661
Jul 28 2016 23:40
@nirurin what is it that is not working
nirurin
@nirurin
Jul 28 2016 23:40
in the example, the brand is in the middle
which seems that it worked in 3.3.2, but not in 3.3.6
i thought it was something in my code that was breaking it, so i deleted everything and started fresh. turns out bootstrap itself is the issue, no idea why
Elbert Cortez
@trip16661
Jul 28 2016 23:45
@nirurin if you want the logo in the middle
you just need display:inline or inline-block
Kevin Norris
@kevinnorris
Jul 28 2016 23:46
@Vercaelus Make your icon class .icon{ padding: 0; margin: auto; display: block; }
nirurin
@nirurin
Jul 28 2016 23:46
@trip16661 where would that go? none of the examples use that
Elbert Cortez
@trip16661
Jul 28 2016 23:47
@nirurin .navbar-brand img
Vercaelus
@Vercaelus
Jul 28 2016 23:48
@Steedler Nice, that did it!
Elbert Cortez
@trip16661
Jul 28 2016 23:48
and paste
Vercaelus
@Vercaelus
Jul 28 2016 23:48
I really appreciate how helpful you've been, thanks!
Elbert Cortez
@trip16661
Jul 28 2016 23:48
    display: inline-block;
    height: 100%;
and tell me if that's what you wanted :)
Kevin Norris
@kevinnorris
Jul 28 2016 23:48
@Steedler only the left and right padding and margin matter so if you want adjust top and bottom margins padding in the future maybe write out the longhand
No problem
nirurin
@nirurin
Jul 28 2016 23:49
@trip16661 it moves it to the centre, but it messes up the sizing
Elbert Cortez
@trip16661
Jul 28 2016 23:50
oh don't worry
that was something of mine
just delete height:100%
I just though you wanted to put the logo like that
when u say height 100% it adapts its height to the height of its parent
was that what you needed?
Kevin Norris
@kevinnorris
Jul 28 2016 23:51
@Vercaelus That last comment was meant for you, I miss clicked myself haha
nirurin
@nirurin
Jul 28 2016 23:52
@trip16661 oh ok well that does seem to work... I don't understand how it works for other sites without needing the extra display:inline css though
Dario Idrovo
@djidrovo1
Jul 28 2016 23:53
Help
CamperBot
@camperbot
Jul 28 2016 23:53

CamperBot

Hi, I'm CamperBot! I can help you in this chatroom :smile:

Basic Commands:

  • find TOPIC find all entries about topic. e.g. find js
  • wiki TOPIC show contents of topic page
  • thanks @username send brownie points to another user
  • about @username shows info on that user
  • Algorithm BONFIRENAME info on a Algorithm

meet CamperBot in FreeCodeCamp/camperbotPlayground

:pencil: read more about camperbot on the FCC Wiki

Dario Idrovo
@djidrovo1
Jul 28 2016 23:53
Please
why aren't my social media buttons displaying?
Elbert Cortez
@trip16661
Jul 28 2016 23:53
sorry I just gave a little tweaking but to know exactly i need to see the entire code
D:
im kinda lazy xD
nirurin
@nirurin
Jul 28 2016 23:56
@trip16661 haha well that was the entire code, it's only a few lines long. I found out that the issue with the new version of bootstrap is that the align now only works on text, when it used to work on the image as well
so I assume there's a new class or command to align objects/images
Xavier Velez
@JonSnow08
Jul 28 2016 23:57
var LightUp = function(){
   for(var i = 0; i < sequence.length; i++ ){
      switch(sequence[i]){
         case 1:
            $('#1').addClass('.cntrl1active');
            $('#1').removeClass('.cntrl1');

      }
   } 
};
how do I set a timeout to make it light up for a second
Tyler Moeller
@TylerMoeller
Jul 28 2016 23:58
@djidrovo1 In Codepen, click Settings, click CSS, and then paste this in: https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css
nirurin
@nirurin
Jul 28 2016 23:59
@trip16661 ahha... turns out there's a class called "centre-block" that does it for images :) thanks for the help, so glad people like you are on there forums or I'd never figure things out!
CamperBot
@camperbot
Jul 28 2016 23:59
nirurin sends brownie points to @trip16661 :sparkles: :thumbsup: :sparkles:
:cookie: 431 | @trip16661 |http://www.freecodecamp.com/trip16661