These are chat archives for FreeCodeCamp/HelpFrontEnd

11th
Sep 2016
john94
@lpy1994
Sep 11 2016 00:01
nvm
Salomon
@zarruk
Sep 11 2016 00:14
https://codepen.io/zarruk/pen/rrOGQk?editors=1100 Can someone help me: how can I make there is no space between my sections? I already tried it with position:absolute but then some sections end up on top of others.
Eric Weiss
@eweiss17
Sep 11 2016 00:19
@zarruk display:inline-block; helps
Salomon
@zarruk
Sep 11 2016 00:20
@eweiss17 it did! thanks!
CamperBot
@camperbot
Sep 11 2016 00:20
zarruk sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 326 | @eweiss17 |http://www.freecodecamp.com/eweiss17
john94
@lpy1994
Sep 11 2016 00:20
how can i fix the menu and search properties?
Eric Weiss
@eweiss17
Sep 11 2016 00:24
@lpy1994 fix to what?
john94
@lpy1994
Sep 11 2016 00:24
on top
like the menu
Eric Weiss
@eweiss17
Sep 11 2016 00:26
the menu is on the far left and search bar on the far right?
now it fixed, but both are stick together, I need to the search elements to go far right in the container
but if I get rid of “float” in CSS, then both input and menu button would be lower than the search button
john94
@lpy1994
Sep 11 2016 00:43
nvm again
Girzima
@Girzima
Sep 11 2016 01:03
Can anyone help me? I've got a complicated problem
Tony Rivera
@tonyrivera
Sep 11 2016 01:09
Shoot the problem here and Im sure someone will check it out @Girzima
john94
@lpy1994
Sep 11 2016 01:10
nobody check my problem out… crying
Girzima
@Girzima
Sep 11 2016 01:11
I've found some sort of solution but it still isn't to my liking
Clear out the p font in css. I'm trying to get it to scale with screen width without going outside of the div
Not sure if using font-size: 1.8vmin is the solution I need or if it could be better
Basically just looking for it to scale with the image next to it without it going past it when the screen gets smaller. If anyone has some advice on that, throw it at me. I'll be busy elsewhere and will check back
Salomon
@zarruk
Sep 11 2016 01:55
https://codepen.io/zarruk/pen/rrOGQk?editors=1100
Can someone help me: how can I do for the height of the "Wayiro" well be the same height of the background image?
buiphuking
@buiphuking
Sep 11 2016 01:57
i build markdown viewer , any advice guy ???????????????
Kantra
@removed~kantrakantra
Sep 11 2016 02:20

Hey guys, can anybody help me figure out why there's a white bar at the top of my page? It's occurring with both the regular css and the @media screen and (min-width: 512px) wrapped css

http://codepen.io/kantrakantra/pen/kXyVoB?editors=0110

ManBearPigg
@ManBearPigg
Sep 11 2016 03:45
This message was deleted
ManBearPigg
@ManBearPigg
Sep 11 2016 03:54
Omg I finally figured it out, nvm thanks anyways
Suzanne Atkinson
@AdventureBear
Sep 11 2016 04:14
anyone here familiar with bind.js as a lightweight alternative to angular or react?
Muhammad Hasham
@MohammadHasham
Sep 11 2016 05:33
is there a way i can change the text of my paragraph as soon as the picture in carousel changes? how this can be done using JS?
Kate
@lmfaoitskate
Sep 11 2016 05:37
I'm curious. Does your tribute page need to be done using a famous person or could you use just anyone? For example, a family member, friend, family pet, etc.
TrayBanks
@TrayBanks
Sep 11 2016 05:39
Hey guys can someone tell me why I can't resize my images and center them?
http://codepen.io/TrayBanks/pen/NRKvGg
Chase
@Belax8
Sep 11 2016 05:42
@lmfaoitskate You can make it about anyone or anything
Muhammad Hasham
@MohammadHasham
Sep 11 2016 06:28
Has anyone used "emailjs" service?
Muhammad Hasham
@MohammadHasham
Sep 11 2016 07:14
how can i change text when image changes in carousel javascript
Santiago Fernandez
@sf-jd
Sep 11 2016 07:29
@MohammadHasham http://codepen.io/sf-jd/pen/rrOKmJ i'm triggering the change with a button. you only need the code inside.
whatever you are using to trigger the image change, you could use it to trigger the text change as well.
Muhammad Hasham
@MohammadHasham
Sep 11 2016 07:29
@sf-jd thanks
CamperBot
@camperbot
Sep 11 2016 07:29
mohammadhasham sends brownie points to @sf-jd :sparkles: :thumbsup: :sparkles:
:cookie: 227 | @sf-jd |http://www.freecodecamp.com/sf-jd
Santiago Fernandez
@sf-jd
Sep 11 2016 07:29
i used jquery there btw
Muhammad Hasham
@MohammadHasham
Sep 11 2016 07:32
how can i remove auto-slide in carosuel bootstrap
interval: false; should do the trick
Muhammad Hasham
@MohammadHasham
Sep 11 2016 07:36
@sf-jd thanks
CamperBot
@camperbot
Sep 11 2016 07:36
mohammadhasham sends brownie points to @sf-jd :sparkles: :thumbsup: :sparkles:
:warning: mohammadhasham already gave sf-jd points
Muhammad Hasham
@MohammadHasham
Sep 11 2016 07:57
@sorinr Thanks
CamperBot
@camperbot
Sep 11 2016 07:57
mohammadhasham sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 690 | @sorinr |http://www.freecodecamp.com/sorinr
Mohit Sharma
@xxholyChalicexx
Sep 11 2016 08:47
why is this code not working........the one i commented is working all fine.
http://codepen.io/HolyChalice/pen/PzrgxE?editors=1111
RomualdasT
@RomualdasT
Sep 11 2016 09:45
Hello, guys! Can any1 help me find out why id=xx text doesn't change? document.calc.result.value changes succesfully, but p>xx doesn't. Here is my JS: ```
```function calculate(id) {
document.calc.result.value+=id;
if(document.calc.result.value.length > max) {
document.calc.result.value = "Soory, it's too long!";
document.getElementById("xx").innerHTML("hsdfsjd");
}
}
and html:
```<div class="row" id="result">
<form name="calc">
<input type="text" name="result" readonly maxlength="15" />
<p id="xx"></p>
</form>
</div>
Michiel
@MichielHuijse
Sep 11 2016 10:08
@RomualdasT can you please edit your post to the correct markup :D?
use shift enter to apply changes.
function calculate(id) {
  document.calc.result.value+=id;
    if(document.calc.result.value.length > max) {
        document.calc.result.value = "Soory, it's too long!";
        document.getElementById("xx").innerHTML("hsdfsjd");
    }
}
and html:
<div class="row" id="result"> <form name="calc"> <input type="text" name="result" readonly maxlength="15" /> <p id="xx"></p> </form> </div>
greg
@wearenotgroot
Sep 11 2016 10:10

@RomualdasT backticks on their own line
```js

...code
```

Michiel
@MichielHuijse
Sep 11 2016 10:12
@RomualdasT the answer I don't know
Sorin Ruse
@sorinr
Sep 11 2016 11:15
@xxholyChalicexx you need it like:$.getJSON("//api.openweathermap.org/ .... not like $.getJSON("api.openweathermap.org/....
honesty1997
@Honesty1997
Sep 11 2016 12:34
Hey guys need help again
I am working on Local Weather here.And I'm using Open Weather Map api to do it
KD
@Annallon
Sep 11 2016 12:34
has anyone recently done the quotes machie
its driving me nuts n how to do it cos its not displaying the actual quotes on site X_X
using an api as well
honesty1997
@Honesty1997
Sep 11 2016 12:36
I can get all information except weather section.I don't know what caused it.
Richard Smith
@r1chard5mith
Sep 11 2016 12:36
@Annallon Where are you getting the quotes from and where are you trying to display them? I had some issues with http vs. https
Stephen James
@sjames1958gm
Sep 11 2016 12:36
@Honesty1997 var weather = data.weather[0].main; weather is an array -
I would suggest console.log(data) and an examination of the object.
KD
@Annallon
Sep 11 2016 12:36
using the quotes on design api
honesty1997
@Honesty1997
Sep 11 2016 12:36
@sjames1958gm I see!!Thanks!!
KD
@Annallon
Sep 11 2016 12:37
passing it through a rrayfunction and adding it to specific html elements @r1chard5mith
honesty1997
@Honesty1997
Sep 11 2016 12:37
Didn't notice it's an array .......
Richard Smith
@r1chard5mith
Sep 11 2016 12:38
@Annallon I used that one. What bits do you know are working? Are you sure you're getting a response?
KD
@Annallon
Sep 11 2016 12:40
noope.. @r1chard5mith im not even sure if im doing it right LOL
how do I test which bits are working?
Richard Smith
@r1chard5mith
Sep 11 2016 12:42
@Annallon You'll be using something like
$.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(json) {
KD
@Annallon
Sep 11 2016 12:43
that's correct yeah I have that
let me link you
Richard Smith
@r1chard5mith
Sep 11 2016 12:43
(sorry - I'm new to the chat)
KD
@Annallon
Sep 11 2016 12:43
@r1chard5mith nah you're fine :)
Richard Smith
@r1chard5mith
Sep 11 2016 12:43
the first thing you should try doing inside that function is just logging what you get back
to make sure it's something
KD
@Annallon
Sep 11 2016 12:44
how do i test for that though, thats the thing
Stephen James
@sjames1958gm
Sep 11 2016 12:46
@Annallon Check the console - F12 on chrome and see errors. Also that is where console.log() output goes.
Richard Smith
@r1chard5mith
Sep 11 2016 12:46
You need to log it somewhere, are you editing on codepen?
there's a console button down the button that's supposed to mimic the browser console
Stephen James
@sjames1958gm
Sep 11 2016 12:46
@Annallon console.log(quotes)
Richard Smith
@r1chard5mith
Sep 11 2016 12:48
but I'm trying it now, and it doesn't seem to work....
KD
@Annallon
Sep 11 2016 12:50
hmm, i am editing on codepen but console.log isnt working.. @sjames1958gm wer you recommending i use devtools console for this?
Stephen James
@sjames1958gm
Sep 11 2016 12:50
devtools console shows errors (type errors, network errors) as well as console output
@Annallon push is not a function (you need an array to push onto) also quotes is an object, not an array
honesty1997
@Honesty1997
Sep 11 2016 12:51
Sorry to ask again
Stephen James
@sjames1958gm
Sep 11 2016 12:52
@Honesty1997 scr should be src for the icon
KD
@Annallon
Sep 11 2016 12:52
hmmm @sjames1958gm thats why i took the elements of teh objects, then pushed it into quotesArray, which has been defined at the top
honesty1997
@Honesty1997
Sep 11 2016 12:52
wow Really Thanks!!
Richard Smith
@r1chard5mith
Sep 11 2016 12:52
@Annallon console log is actually working and your code is basically working too
if I add console.log(quotes) and then click the button I see the response
You'll need to put this in a separate function and call it once on page load and again on button-click
@Annallon You're pretty close - 'push' is a method of the array so you can use it like array.push(item)
KD
@Annallon
Sep 11 2016 12:57
Oh, do I just need to write like so: quoteArray.push(item)?
Richard Smith
@r1chard5mith
Sep 11 2016 12:57
If you need to find any javascript methods etc. using google, start the search with "mdn" so that you get the mozilla docs, they are the easiest to read
yes :)
KD
@Annallon
Sep 11 2016 12:58
yeah sure, I must have got it mixed up- thanks @r1chard5mith
CamperBot
@camperbot
Sep 11 2016 12:58
annallon sends brownie points to @r1chard5mith :sparkles: :thumbsup: :sparkles:
:cookie: 356 | @r1chard5mith |http://www.freecodecamp.com/r1chard5mith
KD
@Annallon
Sep 11 2016 12:58
hm it now says that the item I am trying to push is not actually defined
also quotes not defined either
Richard Smith
@r1chard5mith
Sep 11 2016 12:59
hehe - this has been the story of my life for the last month solid - so now you try and log the thing that's not defined and figure out why it's not defined :)
KD
@Annallon
Sep 11 2016 13:00
haha urg fiiine if I must :P ty
Richard Smith
@r1chard5mith
Sep 11 2016 13:03
have fun!
Stephen James
@sjames1958gm
Sep 11 2016 13:04
@Annallon Since you only request one quote - you get back an array of 1 item.
Robert Skalko
@RobertSkalko
Sep 11 2016 13:11
Any React gurus here? I try setstate outside of component and get "pen.js:209 Uncaught TypeError: Hello.setState is not a function"
I keep reading it's "bad practise" to re-render from outside, does this mean that react is forcing us to only edit the data from inside the object? I can see that as being helpful but it seems to remove a lot of possibilities..
Stephen James
@sjames1958gm
Sep 11 2016 13:30
@robertx32 You should be able to call setState from outside the object if you have the correct object.
But, you really should keep your components self-contained as much as possible.
Are you willing to share a link?
i fixed it by only rendering after
everything is done
but i can see that being a problem in the future
i tried all kinds of stuff, even making an update method inside component, but it always gives an error
Stephen James
@sjames1958gm
Sep 11 2016 13:33
@robertx32 What everything are you trying to do?
Robert Skalko
@RobertSkalko
Sep 11 2016 13:34
i wanted to be able to update state from outside of component after rendering
Stephen James
@sjames1958gm
Sep 11 2016 13:36
@robertx32 If you need to load the data from localStorage you can do that in getInitialState and save the data in componentDidUpdate
Robert Skalko
@RobertSkalko
Sep 11 2016 13:38
hm, how would I set an interval inside the component?
Stephen James
@sjames1958gm
Sep 11 2016 13:40
@robertx32 You can call setInterval, just like any js. Depends on when you want the timer to start. You need to make sure you stop the timer.
I think that componentWillUnmount is the best place to do that.
@robertx32 For a recipe app why would you need setInterval?
Robert Skalko
@RobertSkalko
Sep 11 2016 13:40
I thought it's easier to save it every sec or 2 then put a save function every time a change happens
Pavan Kulkarni
@pavankrcr
Sep 11 2016 13:41
Hello world
CamperBot
@camperbot
Sep 11 2016 13:41

welcome to FreeCodeCamp @pavankrcr!

Stephen James
@sjames1958gm
Sep 11 2016 13:42
@robertx32 Use the life cycle methods to start/stop the timer.
@pavankrcr hello
Robert Skalko
@RobertSkalko
Sep 11 2016 13:42
ok thank you @sjames1958gm , ill have to read up a bit more, tons of unknowns there
CamperBot
@camperbot
Sep 11 2016 13:42
robertx32 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3220 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Sep 11 2016 13:43
@robertx32 :+1:
Pavan Kulkarni
@pavankrcr
Sep 11 2016 13:44
Anyone working on backend
Muhammad Hasham
@MohammadHasham
Sep 11 2016 13:52
I want that when seconds become zero a minute is decremented along with seconds counter again to start from 59 to zero but it is not happening can anyone help me
http://codepen.io/Mohammad_Hasham/pen/PGwkwo?editors=0010
@sjames1958gm
Stephen James
@sjames1958gm
Sep 11 2016 13:53
It is much easier to mantain a variable with the total seconds countdown and the update the html by getting minutes and seconds from that.
Muhammad Hasham
@MohammadHasham
Sep 11 2016 13:54
so when the seconds become zero then the minute shall update along with second?
@sjames1958gm
but as in pomodoro clock the minutes are made less as 25 than 24 as seconds pass away
can you help me
Clearwood
@Clearwood
Sep 11 2016 13:55
hey i have a problem with typeahead can anybody help me?
$(document).ready(function() {
$("#typeahead").typeahead(
{
        hint: true,
        autoselect: true,
        highlight: true,
        minLength: 1
    },
{
    source: search,
    templates: {
            empty: "no models found yet",
            suggestion: _.template("<p id=\"sug\"><b><%- full_name %>,</b>  <a id=\"model_id_type\"> <%- id %></a></p>")
        }

});
});
$("#typeahead").on("typeahead:selected", function(eventObject, suggestion, name) {
    detail_id(suggestion.id);
});
});
function search(query,cb){
    // get persons matching query (ajax)
    var parameters = {
        query: query
    };
    $.getJSON("search.php", parameters)
    .done(function(data, textStatus, jqXHR) {
        // call typeahead's callback
        cb(data);
    })
    .fail(function(jqXHR, textStatus, errorThrown) {

        // log error to browser's console
        console.log(errorThrown.toString());
    });
}
Stephen James
@sjames1958gm
Sep 11 2016 13:56
@MohammadHasham
  var countdown = 3 * 60 + 25;

  //set on screen data
  $("#value").html(countdown % 60);
  $("#value1").html(Math.floor(countdown / 60));

  $("#value").click(function(){
    timer();
  });

  function subtractSeconds()
  {
    countdown--;
    $("#value").html(countdown % 60);
    $("#value1").html(Math.floor(countdown / 60));

  }
Muhammad Hasham
@MohammadHasham
Sep 11 2016 13:56
@sjames1958gm Thanks
CamperBot
@camperbot
Sep 11 2016 13:56
mohammadhasham sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3221 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Muhammad Hasham
@MohammadHasham
Sep 11 2016 14:00
@sjames1958gm can you explain me about the countdown why it has been initialized with 3*60+25;
Stephen James
@sjames1958gm
Sep 11 2016 14:01
@MohammadHasham That just matched your code above with minutes 3 and 25 seconds
Mikail Bayram
@mikail1998
Sep 11 2016 14:01
http://codepen.io/mikail1998/pen/ozgXzb How will i start the break-time after the session time?
Muhammad Hasham
@MohammadHasham
Sep 11 2016 14:02
i see. :clap:
Stephen James
@sjames1958gm
Sep 11 2016 14:03
@mikail1998 When session time === 0 then you switch to break time. You will need something (state variable) to say that you are in session time or break time.
This is also needed because if you click twice in the circle you get multiple timers running.
Nando Delgado
@nandod1707
Sep 11 2016 14:06
hey guys, i need a little help with the css in my random quote machine, when i resize the window or open it on mobile the buttons stay on top of the quote and I can't figure out how to fix it, can i get a hand? http://codepen.io/nandodelgado/pen/wGZNRb
Mikail Bayram
@mikail1998
Sep 11 2016 14:06
Yeah, @sjames1958gm I wanted to ask that too
I mean about the multiple timers
I figured i would need a boolean
which would state if it is clicked or not
but dont know the syntax...
Stephen James
@sjames1958gm
Sep 11 2016 14:07
@mikail1998 Something like
var clockActive = false;

onClick
  if clockActive then return
  else start clock and clockActive = true
Andrea Rocca
@sfogo5
Sep 11 2016 14:24
Hey guys! Quick one (I’m sure) - I don’t personally code in codepen as I’m not a big fan of it
I was porting my code to it and for some reason, nothing is really showing up
any idea?
here’s the pen
it looks like it’s not accessing one of the AJAX callbacks, for some reason
I think I managed, thanks anyways :)
Mikail Bayram
@mikail1998
Sep 11 2016 14:28
http://codepen.io/mikail1998/pen/ozgXzb @sjames1958gm this is not how its supposed to be right
...
Mikail Bayram
@mikail1998
Sep 11 2016 14:34
@sjames1958gm Thank you
CamperBot
@camperbot
Sep 11 2016 14:34
mikail1998 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3223 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Gatreek92
@Gatreek92
Sep 11 2016 14:44
Hey guys , I'am working on Twitch.Tv api project , and i have a little issue ! i wanna know how to get the channel name and logo when its offline ? could anyone help me plz ?
Bil
@thebiltheory
Sep 11 2016 15:00
@Gatreek92 It’s not finished but check mine. http://codepen.io/TheBilTheory/pen/OXMqgP
Guys, I have a stupid question related to google Maps
r2d2
@UsamaHameed
Sep 11 2016 15:15
@thebiltheory there is no search option
Bil
@thebiltheory
Sep 11 2016 15:16
@UsamaHameed I don’t know if the specs changed, but by the time a search option wasn’t required.
r2d2
@UsamaHameed
Sep 11 2016 15:17
@Gatreek92 if the channel is offline, it will return some sort of offline status in the JSON
Check for that
@thebiltheory I did not realize that and did a search option :P
@mikail1998 when I click, it starts. But when I click again, it messes up.
Elise Rodrigues
@erodri20
Sep 11 2016 15:30
Anyone know anything about installing materialize?
Gatreek92
@Gatreek92
Sep 11 2016 15:52
I just finished the project , @UsamaHameed checked out , and tell me what you think !
https://codepen.io/gatreek/full/NRGGbL/
Jay15
@INVALID000
Sep 11 2016 16:02
pls i need some help i cant figue out how ta align y pic pls help
Gatreek92
@Gatreek92
Sep 11 2016 16:10
@INVALID000 what you want to do ?
Jay15
@INVALID000
Sep 11 2016 16:11
i want to align the grumpy cat pic in th emiddle of all the text but i can't for the life of me remember how to do that
@Gatreek92
Gatreek92
@Gatreek92
Sep 11 2016 16:12
ok ! did you add Bootstrap to your project , or you wanna work without it ? @INVALID000
Jay15
@INVALID000
Sep 11 2016 16:13
sure i want to add bootstrap @Gatreek92
its a link right? @Gatreek92
Gatreek92
@Gatreek92
Sep 11 2016 16:16
you can add it by click on the setting icon , or you can add the link in the <head></head> of your page @INVALID000
Jay15
@INVALID000
Sep 11 2016 16:18
@Gatreek92 awesome what is that link
@Gatreek92 i remember that in the tutorials it said it did it behind the scenes
Gatreek92
@Gatreek92
Sep 11 2016 16:22
Yes that was in the freecodecamp website , but know you are trying to make the project by yourself in codepen so you have to add it if you wanna work with
go to the website getbootstrap.com to find all the documentation about bootstrap and how to add it to your website @INVALID000
Jay15
@INVALID000
Sep 11 2016 16:23
@Gatreek92 ok thnx man you helped so much
CamperBot
@camperbot
Sep 11 2016 16:23
invalid000 sends brownie points to @gatreek92 :sparkles: :thumbsup: :sparkles:
:cookie: 270 | @gatreek92 |http://www.freecodecamp.com/gatreek92
Joseph
@Jar36
Sep 11 2016 17:18
Hello all, so I am attempting my second front end project the portfolio, but I feel a little unprepared. Being that I am very new to coding I am wondering if I should skip this project for now and move on to Java script. Any advice?
Sorin Ruse
@sorinr
Sep 11 2016 17:19
@INVALID000 add this to your css part: img{ display: block; margin: 0 auto; }
Jay15
@INVALID000
Sep 11 2016 17:20
@sorinr cool ty
CamperBot
@camperbot
Sep 11 2016 17:20
invalid000 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 691 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Sep 11 2016 17:20
@INVALID000 welcome
Muhammad Hasham
@MohammadHasham
Sep 11 2016 17:22
how can i make that clicking again the timer to make it pause and than start it again after a click
https://codepen.io/FreeCodeCamp/full/aNyxXR/
like in the provided pen!
@sorinr
Sorin Ruse
@sorinr
Sep 11 2016 17:27
@MohammadHasham i suppose when you make the first click you set the time interval. when you click again you should clear interval. you can use a var to keep track of the interval state (active or cleared) to know what function to toggle
Muhammad Hasham
@MohammadHasham
Sep 11 2016 17:28
@sorinr Thanks
CamperBot
@camperbot
Sep 11 2016 17:28
mohammadhasham sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 692 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Sep 11 2016 17:32
@MohammadHasham welcome
Theodore P.
@Ierofantis
Sep 11 2016 17:40
Hi I want on my codepen to show up the last element of the locations on the box when I push the button.For now I ve done it manually.Does anyone know how can I do this with more efficient way?
Here is my pen https://codepen.io/Ierofantis/pen/vXNOaK
Sorin Ruse
@sorinr
Sep 11 2016 17:46
@Ierofantis i think you should use the zoom to that coordinates
Theodore P.
@Ierofantis
Sep 11 2016 17:47
@sorinr I ve used zoom, i am not sure if I understood what you are saying
Sorin Ruse
@sorinr
Sep 11 2016 17:50
@Ierofantis i think i don't understand right what you mean by " to show up the last element of the locations on the box"
Theodore P.
@Ierofantis
Sep 11 2016 17:53
@sorinr If you on the bottom left there is a box with a button. When you press it you have all the locations that exists in the locations array and before you press it you can see above the button the last location. How I can achieve that with more efficient way
Zheng
@FireFalcon1155
Sep 11 2016 17:53
I'm on the intermidiate challenge, Show the Local Weather. How do i get the weather information from the Weather API to my webpage?
Sorin Ruse
@sorinr
Sep 11 2016 17:58
@Ierofantis why do you use $("#link").prepend instead of $("#link").html ?
@Ierofantis and instead of locations[5][0] i would use locations[locations.lenght-1][0] so when you add more locations to have them added in auto mode
buiphuking
@buiphuking
Sep 11 2016 18:03
can i ask something? how can i anchor react js to html, i'm using atom by the way!
Theodore P.
@Ierofantis
Sep 11 2016 18:06
@sorinr about prepend you are right it is uselles in this situation and about the second you wrote it is a very nice solution indeed but insted of the place it shows me the number on the array.
Is there any possibility to know how to do this that i have now using one div(and not #links and #link). I mean that can i show the last location like it is showing right now and when it slide up to show the rest of the location?
Sorin Ruse
@sorinr
Sep 11 2016 18:09
@Ierofantis sorry it is locations.length-1. i was misspelling the word
Theodore P.
@Ierofantis
Sep 11 2016 18:10
@sorinr i fixed it when i wrote this no problem
Joran de Haan
@LeCoquille
Sep 11 2016 18:10
hey guys. got a little problem with my bootstrap navbar. anyone care to check it out? I don't know how to center my bootstrap collapes navbar button (on small screen). tried loads of stuff, but nothing seems to work...
Sorin Ruse
@sorinr
Sep 11 2016 18:15
@Ierofantis i'll think about it and let you know if i have some idea.
Theodore P.
@Ierofantis
Sep 11 2016 18:15
@sorinr ok thanks
CamperBot
@camperbot
Sep 11 2016 18:15
ierofantis sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 693 | @sorinr |http://www.freecodecamp.com/sorinr
Zheng
@FireFalcon1155
Sep 11 2016 18:23
guys i'm stuck on the intermidiate challenge on Showing Local Weather. i dont even know where to start on how to make a request to the server and then somehow parse the info bounced back.
john94
@lpy1994
Sep 11 2016 18:25
Been there as well, go check someone else's work on codepen, and try to imitate
William Maes
@maeswilliam
Sep 11 2016 18:44
Hello everyone
I tried my first responsive project - can anyone help me with the navigation, i think the rest is fine, any opnion? http://williammaes.tk/Projects/index.html
Joris Labie
@labiej
Sep 11 2016 18:45
What's wrong with the navigation, getting it to work?
William Maes
@maeswilliam
Sep 11 2016 18:45
to put it bluntly it looks like shit
and i'm out of ideas
been working a big part on the weekend on this ;)
Joris Labie
@labiej
Sep 11 2016 18:46
I don't agree, it's elegant
William Maes
@maeswilliam
Sep 11 2016 18:46
i mean in 480 width Joris
for small screens
Joris Labie
@labiej
Sep 11 2016 18:48
I would look into the how of bootstraps solution (the vertical bars that expand)
Not sure how to get that done by yourself though
William Maes
@maeswilliam
Sep 11 2016 18:53
@labiej ah yes with a small button that expands a navigation bar, that seems like a great idea
if it's javascript i'm screwed tough, didn't learn that yet
Joris Labie
@labiej
Sep 11 2016 18:54
Everything is in the link, it's quite basic
For future reference: I hate coding the calculator
William Maes
@maeswilliam
Sep 11 2016 19:03
@labiej doesn't sound exciting isn't it
@labiej but if it sits beautifull on your portfolio, why not??
Joris Labie
@labiej
Sep 11 2016 19:05
It's a nuisance to code
hard to make monkey proof
William Maes
@maeswilliam
Sep 11 2016 19:06
@labiej actually you're way further than me into the program..
@labiej how long have you been at it?
@labiej do you plan to obtain the 3 certificates?
Audrey Dogbeh
@arya45
Sep 11 2016 19:07
Hello everyone! I am working through the Front End projects and I don't really like using Codepen. I code in an external editor and I find the process of copying my code into Codepen a bit tedious (hosting local images, deal with the external CSS or Javascript sources because Codepen expects it in a way that is not the way I wrote my code, etc.) Anyway, I wanted to know what you guys think and whether some of you add their projects directly as pages of their website (if you have one).
Joris Labie
@labiej
Sep 11 2016 19:07
I started last summer but haven't really coded from october to july
@arya45 i just did
@arya45 it's way better than codepen.io, i only codepen to show a small line of code, end results go on a personal page
@arya45 and also .tk is free
Audrey Dogbeh
@arya45
Sep 11 2016 19:09
@maeswilliam thanks for your answer. Yes that is what I was thinking to do as well. Your project looks good :)
CamperBot
@camperbot
Sep 11 2016 19:09
arya45 sends brownie points to @maeswilliam :sparkles: :thumbsup: :sparkles:
:cookie: 133 | @maeswilliam |http://www.freecodecamp.com/maeswilliam
William Maes
@maeswilliam
Sep 11 2016 19:10
@arya45 thanks arya
CamperBot
@camperbot
Sep 11 2016 19:10
maeswilliam sends brownie points to @arya45 :sparkles: :thumbsup: :sparkles:
:cookie: 287 | @arya45 |http://www.freecodecamp.com/arya45
Audrey Dogbeh
@arya45
Sep 11 2016 19:11
I already have a website, so it feels just simpler to do that
William Maes
@maeswilliam
Sep 11 2016 19:11
@arya45 yeah exactly
Darshan
@Dave1089
Sep 11 2016 19:27
anyone has done Markdown Previewer challenge?
Muhammad Hasham
@MohammadHasham
Sep 11 2016 19:36
Can anyone help me with making my minutes to change alongwith my session length
http://codepen.io/Mohammad_Hasham/pen/PGwkwo?editors=0010
Mark
@vinarius
Sep 11 2016 19:42

Not sure why there is a space between my columns. Any ideas?

http://codepen.io/vinarius/pen/QKbZRp

only happens on col-md-* or larger
Joris Labie
@labiej
Sep 11 2016 19:48
@Dave1089 I recently sent it in
LenaSUI
@LenaSUI
Sep 11 2016 19:49
Hi, can anyone help me with my navigation bar? The menu button doesn't display the menu and I don't know how to get the other buttons to link to the right place on my page
Stephen James
@sjames1958gm
Sep 11 2016 19:52
@vinarius You have yellow background on the p tag and blue on the div.
Darshan
@Dave1089
Sep 11 2016 19:56
@labiej Can you tell me what am I missing
https://codepen.io/dave1089/pen/bwNZXV
Stephen James
@sjames1958gm
Sep 11 2016 20:00
@Dave1089 What is the issue?
Darshan
@Dave1089
Sep 11 2016 20:01
@sjames1958gm not getting Enter key relfected in state change
and also not sure how I can use dangerouslySetInnerHTML to parse html when state changes
BobbyB007
@BobbyB007
Sep 11 2016 20:02
Hello everyone
I just started the bonfire algorithms and i think I need to start using my browsers dev tools. Anyone know how to do this on Safari? do I need to down load this? https://developer.apple.com/safari/download/
Stephen James
@sjames1958gm
Sep 11 2016 20:06
@Dave1089
    var theHtml = marked(this.props.text);
    return (
      <div className="entryarea" dangerouslySetInnerHTML={{__html: theHtml}}></div>
    );
@Dave1089 Why are you trying to process the enter key?
@BobbyB007 The devtools are part of the browser
BobbyB007
@BobbyB007
Sep 11 2016 20:08
@sjames1958gm how do i use them? there is always a message that i can run test and print to the console.log()but I can never get it to print anything.
vínαч puppαl
@vinaypuppal
Sep 11 2016 20:08
@Dave1089 https://facebook.github.io/react/tips/dangerously-set-inner-html.html
And the enter key will be handled by marked.js you used it parses that also so don't worry about it.
Stephen James
@sjames1958gm
Sep 11 2016 20:09
@BobbyB007 I am not running safari so maybe someone who is can answer
Darshan
@Dave1089
Sep 11 2016 20:10
@sjames1958gm @vinaypuppal thanks
CamperBot
@camperbot
Sep 11 2016 20:10
dave1089 sends brownie points to @sjames1958gm and @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 494 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
:star2: 3231 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
BobbyB007
@BobbyB007
Sep 11 2016 20:12
@sjames1958gm okay thanks. I think I will try installing the dev tools form the apple site. it looks like that is the answer.
CamperBot
@camperbot
Sep 11 2016 20:12
bobbyb007 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3232 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Sep 11 2016 20:13
@BobbyB007 oh, ok. Good luck
Islam Ibakaev
@dagman
Sep 11 2016 20:17
hey guys it this correct configuration for using sass with css modules?
{
        test: /\.scss$/,
        loaders: [
          "style",
          "css?sourceMap&modules&importLoaders=2&localIdentName=[name]__[local]___[hash:base64:5]",
          "sass?sourceMap&outputStyle='expanded'",
          "postcss"
        ]
      }
Ravi Gupta
@meeravi007
Sep 11 2016 20:27
Screenshot from 2016-09-12 01:53:29.png
i'm using html5 video player and when i'm switching fullscreen mode all the homepage div data is overlapping
billpzt
@billpzt
Sep 11 2016 20:52
Hello everyone! Been working on the Wikipedia Viewer, have no idea how to make it work. Wikipedia has dozens of pages taking about their API and a video but I can't make sense of it to do what I want. Found an example of code at Stack Overflow and copied it, modified the parts I thought needed to be changed for my page, but nothing worked. Any help? Here's the code:
$(document).ready(function(){
        $('#searchWiki').click(function() {
            $.ajax({
                url: 'http://en.wikipedia.org/w/api.php',
                data: { action: 'query', list: 'search', srsearch: $("input[name=Wikipedia]").val(), format: 'json' },
                dataType: 'jsonp',
                success: processResult
            });
        });
    }); 

  function processResult(apiResult){
     for (var i = 0; i < apiResult.query.search.length; i++){
          $('#display-result').append('<p>'+apiResult.query.search[i].title+'</p>');
     }
  }
Zachariah Ottewell
@zottewell
Sep 11 2016 21:41

Hey guys, I'm pretty new to all of this so forgive me for the silly question. I'm building this website for a local band for free to sharpen my skills, and I want to add a dropshadow to the navbar that goes over the top of the image, but when I do the drop shadow like normal, the image hides it. Any tips? PS, using bootstrap if that makes a difference.

http://codepen.io/zottewell-1471653998/pen/rrOdyb

Kantra
@removed~kantrakantra
Sep 11 2016 21:42

Hey guys, can anybody help me figure out how to get the bottom bar with "Terms Privacy Support" (at the very bottom) to become fixed like the top nav bar and stay along the the bottom of the visible portion of the screen?

http://codepen.io/kantrakantra/pen/kXyVoB

vínαч puppαl
@vinaypuppal
Sep 11 2016 21:45
@kantrakantra You need to use position : fixed like below
.bottom{
position: fixed;
    bottom: 0;
    width: 100%;
}
Darshan
@Dave1089
Sep 11 2016 22:00
This message was deleted
Ken Haduch
@khaduch
Sep 11 2016 22:14
@zottewell - I'm not very familiar with this, and I don't see where you are adding the drop shadow - but I found that adding some margin-bottom to the #navbar div exposes the shadow?
Joris Labie
@labiej
Sep 11 2016 22:27
@zottewell It might be possible to fix that using the z-index property
vínαч puppαl
@vinaypuppal
Sep 11 2016 22:43
@zottewell Since there is image below it you cant see shadow so as @khaduch suggested you need provide margin-top to img or margin-bottom
to #navbar to view shadow
or Simple workaround is use inset shadow for #navbar like below
#navbar {
   box-shadow: 0 -8px 8px rgba(0,0,0,0.8) inset
}
Darren
@Diggy696
Sep 11 2016 22:43
on 1st intermediate project front end project - random quote machine, trying to get my button to change some text... would anyone be able to look at my codepen and tell me where I'm going worng?
vínαч puppαl
@vinaypuppal
Sep 11 2016 22:45
@Diggy696 yes
Darren
@Diggy696
Sep 11 2016 22:46
@vinaypuppal thank you! http://codepen.io/Diggy696/pen/WGQLEN
CamperBot
@camperbot
Sep 11 2016 22:46
diggy696 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 495 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Darren
@Diggy696
Sep 11 2016 22:47
@vinaypuppal as of right now - I'm still incredibly confused about the whole API piece- but I'm just trying to see if I can change the quote on a click and i cant seem to get it to work
vínαч puppαl
@vinaypuppal
Sep 11 2016 22:47
@Diggy696 You need to add JQuery to use it in your code , if you new to codepen read this article it will help you https://medium.freecodecamp.com/codepen-tips-and-best-practice-cf926ebd0b11
Darren
@Diggy696
Sep 11 2016 22:49
@vinaypuppal okay i'll read that- but is it essentially just adding code to what I currently have then?
vínαч puppαl
@vinaypuppal
Sep 11 2016 22:49
@Diggy696 add Jquery and move your Javascript code to JS panel of codepen then try it will work.
Darren
@Diggy696
Sep 11 2016 22:52
@vinaypuppal thank you for your help - I'll try adding Jquery and move Javascript to JS panel... while I have you- can you explain the difference between Jquery and Javascript? I fundamentally understand that Javascript is a language- but I dont really see it's application in a website...yet
CamperBot
@camperbot
Sep 11 2016 22:52
:warning: diggy696 already gave vinaypuppal points
diggy696 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
vínαч puppαl
@vinaypuppal
Sep 11 2016 22:54
@Diggy696 JQuery is Javascript library with lot of helper functions to manipulate DOM and with cross browser support.Read more here http://www.w3schools.com/jquery/jquery_intro.asp
Darren
@Diggy696
Sep 11 2016 22:57
@vinaypuppal thank you again for the links- got my script to work - now just have to figure out this API stuff, I appreciate your help
CamperBot
@camperbot
Sep 11 2016 22:57
diggy696 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: diggy696 already gave vinaypuppal points
Eric Weiss
@eweiss17
Sep 11 2016 23:00
Anybody finish the twitch api project and can help me with mine?
vínαч puppαl
@vinaypuppal
Sep 11 2016 23:00
@Diggy696 For random quotes no need to use API but if you prefer you can. Without an API You can create an Array of Quotes and and then pick one randomly and show it to user. Link to some quotes if you want to try without API
https://gist.github.com/signed0/d70780518341e1396e11
Phuc Le
@phuchle
Sep 11 2016 23:01
hey guys does anybody know how to align my name ( in the navbar-brand class) with the rest of the navbar links?
vínαч puppαl
@vinaypuppal
Sep 11 2016 23:04
@phuchle try to give margin-top: 7.5px to navbar-brand and see if it looks good
@eweiss17 whats the issue??
Eric Weiss
@eweiss17
Sep 11 2016 23:05
Basically my links link to the correct url, but it never loads, and I do not know how to check if a channel is active or not.
vínαч puppαl
@vinaypuppal
Sep 11 2016 23:06
@eweiss17 if stream value is null in response then channel is offline otherwise its online but let me check your pen for any other problems
@eweiss17 Are you saying actual TwitchTv site is not loading when you click on stream link??
Eric Weiss
@eweiss17
Sep 11 2016 23:08
Right, That is how I checked if they were online or not. But part of the problems you need to solve is if a channel got deleted or not, which I couldn't figure out how to check on the twitch api page
Phuc Le
@phuchle
Sep 11 2016 23:09
@vinaypuppal thanks that worked perfectly!
CamperBot
@camperbot
Sep 11 2016 23:09
phuchle sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 496 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Eric Weiss
@eweiss17
Sep 11 2016 23:09
It loads but it never loads the stream, I went to the site and found and channel and it has the same exact url but loads normally
vínαч puppαl
@vinaypuppal
Sep 11 2016 23:13
@eweiss17 so you talking about these two channels brunofin and comster404 right. You want to know weather they are active or not
Eric Weiss
@eweiss17
Sep 11 2016 23:14
yes
vínαч puppαl
@vinaypuppal
Sep 11 2016 23:16
@eweiss17 when make request for these channel you will get status code 422 check for that and show in your UI some message that they are inactive
@eweiss17 you get response like this
{
error:"Unprocessable Entity"
message:"Channel 'brunofin' is unavailable"
status:422
}
Eric Weiss
@eweiss17
Sep 11 2016 23:18
I'm really dumb, I never added them to the selection
I just did if online == undefined
which means it was deleted
Kantra
@removed~kantrakantra
Sep 11 2016 23:19

Hey guys, I'm having trouble centering the location marker in section2 of this page (when in mobile-view – screen width below 512px) classed "glyphicon glyphicon-map-marker locationcolor"

I've lost track of what exactly is defining what here. With which class exactly do I define positioning, color, size? I feel like at this point I'm haphazardly applying css to classes without meaningful discretion.

http://codepen.io/kantrakantra/pen/kXyVoB

Eric Weiss
@eweiss17
Sep 11 2016 23:19
Do you know the problem I am having with the url's though?
vínαч puppαl
@vinaypuppal
Sep 11 2016 23:20
@eweiss17 i think its chrome issue sometime it works some time it wont, try to load in firefox or any other browser and check
Eric Weiss
@eweiss17
Sep 11 2016 23:21
@vinaypuppal Okay, thanks for your help, I can fix the minor issues and tidy it up.
CamperBot
@camperbot
Sep 11 2016 23:21
eweiss17 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 497 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
vínαч puppαl
@vinaypuppal
Sep 11 2016 23:21
@eweiss17 :+1:
@kantrakantra you have an media query to centre that icon only when screen size is above 512px thats why its not centred below 512px width of screen
@media screen and (min-width: 512px)
.locationcolor {
    color: white;
    font-size: 170px;
    top: 200px;
    left: 42%;
}
Kantra
@removed~kantrakantra
Sep 11 2016 23:30
@vinaypuppal Yes but I'm trying to get away from using left: 42%;to center, so I've switched to trying to use position: relative; and now I'm completely lost
vínαч puppαl
@vinaypuppal
Sep 11 2016 23:31
@kantrakantra what you want to do exactly ?? do you want to centre it horizontally and vertically??
Kantra
@removed~kantrakantra
Sep 11 2016 23:32
@vinaypuppal yes
Zheng
@FireFalcon1155
Sep 11 2016 23:36
guys I'm stuck on Chunky Monkey, I need to create a function that takes in 2 parameters. the first one is an array and the second one is a number. the array need to be split into n(second param) number of smaller arrays and outputted in an array altogether.
like this:
chunkArrayInGroups(["a", "b", "c", "d"], 2) should return [["a", "b"], ["c", "d"]].
can someone tell me the steps on how to figure it out?
vínαч puppαl
@vinaypuppal
Sep 11 2016 23:36

@kantrakantra apply these styles

#section2 {
position: relative;
}
.locationcolor {
   position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

It would centre horizontally and vertically based on height and width of #section2
And watch these series to understand why https://www.youtube.com/watch?v=kejG8G0dr5U&list=PLqGj3iMvMa4L731ispRfGAabXeRpM4RL6

ManBearPigg
@ManBearPigg
Sep 11 2016 23:45
How can I change the colour of my string called data which is being send through jquery's append method?
socket.on('usernames', function(data, colour) {
  $('#usersInRoom').append($(data).css('color', colour) + "<br/>");
});
vínαч puppαl
@vinaypuppal
Sep 11 2016 23:51
@ManBearPigg if data a String you cant do like that
try this
socket.on('usernames', function(data, colour) {
  $('#usersInRoom').append($('<span>').text(data).css('color', color) + "<br/>");
});
ManBearPigg
@ManBearPigg
Sep 11 2016 23:56

I found a solution

socket.on('usernames', function(data, colour) {
  $('#usersInRoom').append(data.fontcolor(colour) + "<br/>");
});

thanks though vinay :)

vínαч puppαl
@vinaypuppal
Sep 11 2016 23:57
@ManBearPigg :+1: