These are chat archives for FreeCodeCamp/HelpFrontEnd

4th
Jan 2018
David Belmares
@DavidBelmares
Jan 04 2018 00:45
image.png
I came across this in the article for the Arguments object. Can anyone please explain what this code means? I am really confused
Ilyes
@ilyes-bch
Jan 04 2018 00:47
@DavidBelmares It means when you're inside a function and you want to apply some array functions on the arguments object .. you need to convert it to an array first
David Belmares
@DavidBelmares
Jan 04 2018 00:48
I know that but I'm wondering what the purpose for each line is
Ilyes
@ilyes-bch
Jan 04 2018 00:48
they are equivalent
David Belmares
@DavidBelmares
Jan 04 2018 00:49
Oh so each line is each a different method for converting it to an array?
Bjorn van de Peut
@bjorno43
Jan 04 2018 00:50
@DavidBelmares You might be interested in reading the answer to this question on Stack Overflow: https://stackoverflow.com/questions/7056925/how-does-array-prototype-slice-call-work
Ilyes
@ilyes-bch
Jan 04 2018 00:50
yes you have 3 ways to convert it to an array .. the third one is using ES2015
@DavidBelmares
David Belmares
@DavidBelmares
Jan 04 2018 00:53
@ilyes-bch @bjorno43 thanks
CamperBot
@camperbot
Jan 04 2018 00:53
davidbelmares sends brownie points to @ilyes-bch and @bjorno43 :sparkles: :thumbsup: :sparkles:
:cookie: 169 | @bjorno43 |http://www.freecodecamp.org/bjorno43
:cookie: 357 | @ilyes-bch |http://www.freecodecamp.org/ilyes-bch
Ilyes
@ilyes-bch
Jan 04 2018 00:54
it has been a year since I last got a brownie :0
Bjorn van de Peut
@bjorno43
Jan 04 2018 00:55
@ilyes-bch Here, have a second: arigato :P
CamperBot
@camperbot
Jan 04 2018 00:55
bjorno43 sends brownie points to @ilyes-bch :sparkles: :thumbsup: :sparkles:
:cookie: 358 | @ilyes-bch |http://www.freecodecamp.org/ilyes-bch
Ilyes
@ilyes-bch
Jan 04 2018 00:55
oh my gosh! xie xie @bjorno43
it works with arigato and not with xie xie ?
@bjorno43 謝謝
Bjorn van de Peut
@bjorno43
Jan 04 2018 00:57
Haha. It only works with certain words and languages. It doesn't recognise Dutch or German either
Ilyes
@ilyes-bch
Jan 04 2018 00:58
@bjorno43 شكرا
@bjorno43 merci
CamperBot
@camperbot
Jan 04 2018 00:58
ilyes-bch sends brownie points to @bjorno43 :sparkles: :thumbsup: :sparkles:
:cookie: 170 | @bjorno43 |http://www.freecodecamp.org/bjorno43
Ilyes
@ilyes-bch
Jan 04 2018 00:59
ok it works with french!
David Belmares
@DavidBelmares
Jan 04 2018 01:00
I'm having an awful time trying to figure out the filter and arguments function. I'm supposed to filter out the specified items out of an array (first item of input array) in this exercise


function destroyer(arr) {
  // Remove all the values
  var args = Array.prototype.slice.call(arguments);


  for (i = 0; i < arr.length; i++){
    args[i] = arr[i+1];
  }



  var output = arr.filter(word != args);


  return output;

}

destroyer([1, 2, 3, 1, 2, 3], 2, 3);
Ilyes
@ilyes-bch
Jan 04 2018 01:04
@DavidBelmares filter accepts a function, but you passed a boolean expression, trying passing this as an argument: function(word) { return / your expression here /}
pay attention that word is a value of an array while args is an array
Stephen James
@sjames1958gm
Jan 04 2018 01:05

@DavidBelmares filter requires a function to be passed as an argument. You need to return false from that function for any value from arr that is in the remaining args.

   return arr.filter(function(element) { return element % 2 === 0; })

this is an example of filtering out odd numbers (returning true for even numbers

David Belmares
@DavidBelmares
Jan 04 2018 01:09
@ilyes-bch @sjames1958gm Thanks so much... I understand it a little better now, but how do I return true if the element being tested exists in args?
return arr.filter(function(element) { return element == args; });
CamperBot
@camperbot
Jan 04 2018 01:09
davidbelmares sends brownie points to @ilyes-bch and @sjames1958gm :sparkles: :thumbsup: :sparkles:
api offline
:star2: 8817 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Jan 04 2018 01:09
@DavidBelmares args is an array, perhaps there is a function that searches arrays for a value?
David Belmares
@DavidBelmares
Jan 04 2018 01:12
Tried this, but not working still
  return arr.filter(function(element) { return element == args.indexOf(element); });
Oh wait
That's comparing the actual element to the index of that in args
hmm
Also tried this just now and won't work either
  return arr.filter(function(element) { var indexOfArgs = args.indexOf(element); return element == args[indexOfArgs]; });
Stephen James
@sjames1958gm
Jan 04 2018 01:33
@DavidBelmares What does indexOf return?
David Belmares
@DavidBelmares
Jan 04 2018 01:34
the index of a specific value in the array
Stephen James
@sjames1958gm
Jan 04 2018 01:34
@DavidBelmares Ok, what if the value is not in the array?
David Belmares
@DavidBelmares
Jan 04 2018 01:34
I'm not sure
Stephen James
@sjames1958gm
Jan 04 2018 01:35
@DavidBelmares From MDN The first index of the element in the array; -1 if not found.
David Belmares
@DavidBelmares
Jan 04 2018 01:35
for the sake of this exercise though I don't think that's an issue
Stephen James
@sjames1958gm
Jan 04 2018 01:36
@DavidBelmares Hmm, aren't you supposed to make a decision based on whether element is in args or not?
David Belmares
@DavidBelmares
Jan 04 2018 01:36
Maybe, but that'd be hard to fit in a single line. I'll see what I can do
Stephen James
@sjames1958gm
Jan 04 2018 01:37
@DavidBelmares good luck
romanguillermo
@romanguillermo
Jan 04 2018 02:42
h
hi
Im having trouble with the random quote machine project form the intermediate front end projects. i have most of it done just can't figure out how to make a brand new quote come up when my button is clicked again.
Gersho
@Gersho
Jan 04 2018 02:45
@romanguillermo try
  $.ajaxSetup({
    cache: false
  });
romanguillermo
@romanguillermo
Jan 04 2018 02:47
@Gersho where would i place it?
Gersho
@Gersho
Jan 04 2018 02:48
anywhere before the call, right at the start after $(document).ready(function() { is fine
it forces to make a new call even if you already have data present (like using ctrl +F5 instead of F5à
romanguillermo
@romanguillermo
Jan 04 2018 02:52
hm, not sure what you mean i tried it but i dont know, you can see my code here https://codepen.io/groman52/pen/KZvxQv
Gersho
@Gersho
Jan 04 2018 02:54
oh ok i was assuming you were using a quote api
let's have a look
Gersho
@Gersho
Jan 04 2018 02:59
try that way
$(document).ready(function(){

  $("#getQuote").click(function(){
  $("#quote").fadeOut(500, function() {
    var a=Math.floor(Math.random()*12);
    var newQuote= (quotes[a]);
   $("#quote").html('<p>'+newQuote+'</p>');
   $("#quote").fadeIn(500)

});
and remove those var from line 15/16
the way you had put it, a was being evaluated only once, that's why you always had the same quote
iso
@iso1048
Jan 04 2018 03:00
@romanguillermo you want to generate a random number and then assign the newQuote each time the button is clicked
too late
romanguillermo
@romanguillermo
Jan 04 2018 03:03
omg thank you lol, such a simple mistake
Thanks for the help
Gersho
@Gersho
Jan 04 2018 03:03
np flies away
Ikonik-Koder
@Ikonik-Koder
Jan 04 2018 03:08
Hello World!
Lisa Copeland
@lisacopeland
Jan 04 2018 04:12
@Ikonik-Koder Hello!
Ken Haduch
@khaduch
Jan 04 2018 04:14
@Ikonik-Koder - hello and welcome to freeCodeCamp!
Ikonik-Koder
@Ikonik-Koder
Jan 04 2018 04:15
@khaduch lol I've been here before but thanks!
CamperBot
@camperbot
Jan 04 2018 04:15
ikonik-koder sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3647 | @khaduch |http://www.freecodecamp.org/khaduch
Ken Haduch
@khaduch
Jan 04 2018 04:19
@Ikonik-Koder - well, you're welcome! :)
romanguillermo
@romanguillermo
Jan 04 2018 04:20
how do you make a button take you to a link?
$("#tweet").click(function(){
window.location= "https://twitter.com/intent/tweet";
}); this does not seem to work
dmorel89
@dmorel89
Jan 04 2018 04:38
Has anyone taken the Colt steele Bootcamp training from Udemy?
Im trying to complement both FCC and that course.
Jacob Colborn
@jcolborn-dropdeadgames
Jan 04 2018 04:41
@dmorel89 I just started that course about 2 weeks ago.
dmorel89
@dmorel89
Jan 04 2018 04:42
I started a couple of days ago alongside the FCC.
Jacob Colborn
@jcolborn-dropdeadgames
Jan 04 2018 04:42
@dmorel89 It's a really good course. Colt is thorough with his explanations and gives plenty of exercise and work to reinforce what is going on.
dmorel89
@dmorel89
Jan 04 2018 04:43
Thanks @jcolborn-dropdeadgames . Got the course on a really good deal.
CamperBot
@camperbot
Jan 04 2018 04:43
dmorel89 sends brownie points to @jcolborn-dropdeadgames :sparkles: :thumbsup: :sparkles:
:cookie: 229 | @jcolborn-dropdeadgames |http://www.freecodecamp.org/jcolborn-dropdeadgames
Jacob Colborn
@jcolborn-dropdeadgames
Jan 04 2018 04:43
I don't think the HTML or CSS is much more in depth than I got with FCC but the Javascript sections are great to fill some of the gaps.
dmorel89
@dmorel89
Jan 04 2018 04:44
Funny @jcolborn-dropdeadgames I was going to tell you about that topic.
@jcolborn-dropdeadgames Im actually in the CSS section on the bootcamp and on FCC on JQuerry. Want to see what Colton brings. But definitely loving it. Last question. Where are you right now in the bootcamp? Front end or back end?
Bjorn van de Peut
@bjorno43
Jan 04 2018 04:49
@romanguillermo You're close. To correctly redirect with JS, use window.location.href = 'https://twitter.com/intent/tweet';
Jacob Colborn
@jcolborn-dropdeadgames
Jan 04 2018 05:04
@dmorel89 I am still on the front end part.Currently on Section 11
romanguillermo
@romanguillermo
Jan 04 2018 05:06
@bjorno43 hm i tried it but still doesnt seem to work?
Bjorn van de Peut
@bjorno43
Jan 04 2018 05:06
@romanguillermo Did you check the browser console for errors?
romanguillermo
@romanguillermo
Jan 04 2018 05:10
how
Bjorn van de Peut
@bjorno43
Jan 04 2018 05:10
Which browser are you using?
romanguillermo
@romanguillermo
Jan 04 2018 05:11
chrome
Bjorn van de Peut
@bjorno43
Jan 04 2018 05:12
Are you using Windows?
romanguillermo
@romanguillermo
Jan 04 2018 05:12
yes
Bjorn van de Peut
@bjorno43
Jan 04 2018 05:13
Alright. When you have Chrome open, press Ctrl+Shift+J. That should open up the browser console
Henry
@GitHub-Henry
Jan 04 2018 05:13
or F12
or Ctrl + Shift + I
romanguillermo
@romanguillermo
Jan 04 2018 05:14
oh yea it says refused to dislay the link i have
Terrance Corley
@terrancecorley
Jan 04 2018 05:15
Any web designers on here?
Bjorn van de Peut
@bjorno43
Jan 04 2018 05:16
@terrancecorley This is the front end help room. So I assume there are a couple of web designers here
romanguillermo
@romanguillermo
Jan 04 2018 05:17
says this - Refused to display 'https://twitter.com/intent/tweet' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".
Terrance Corley
@terrancecorley
Jan 04 2018 05:18
@bjorno43 I'm looking for someone willing to work pro bono on my portoflio website. I can program the design, I'm just not an innate designer.
I would include credit in the footer of the site and write you a testimonial.
Bjorn van de Peut
@bjorno43
Jan 04 2018 05:19
@romanguillermo That means that the website you're trying to show inside an iframe, doesn't allow you to do that. It's a security measure put in place by them
@terrancecorley I see you've already joined the LetsPair chatroom. That's most likely the best place to ask your question. Just leave it there. Others will be able to see it later on when they come online and tag you if they're interested
Terrance Corley
@terrancecorley
Jan 04 2018 05:23
@bjorno43 Cool, I'll do that. Thanks.
CamperBot
@camperbot
Jan 04 2018 05:23
terrancecorley sends brownie points to @bjorno43 :sparkles: :thumbsup: :sparkles:
:cookie: 172 | @bjorno43 |http://www.freecodecamp.org/bjorno43
Chase
@hmmChase
Jan 04 2018 05:34
can someone help me refactor a JS function?
Bjorn van de Peut
@bjorno43
Jan 04 2018 05:37
@hmmChase I would suggest that you post your code (use Codepen if it's too large for the chat) and explain what the function does or is supposed to do and what you would like to change about it. If someone is able to help you out, (s)he will
Chase
@hmmChase
Jan 04 2018 05:38
function pageLoad() {
  for (var i = 0; i < localStorage.length; i++) {
    if ((JSON.parse(Object.values(localStorage)[i]).completed) === 'notComplete') {
      countCount++;
      if (countCount < 11) {
        prependIdea(JSON.parse(Object.values(localStorage)[i]));
      };
    };
  };
};
Bjorn van de Peut
@bjorno43
Jan 04 2018 05:39
'''
CamperBot
@camperbot
Jan 04 2018 05:39
:bulb: to format code use backticks! ``` more info
Chase
@hmmChase
Jan 04 2018 05:39
ty
the function renders only 10 items from localstorage when the page is loaded
Bjorn van de Peut
@bjorno43
Jan 04 2018 05:43
And what's your question?
Chase
@hmmChase
Jan 04 2018 05:44
how can i refactor it to not use nested if statements
Bjorn van de Peut
@bjorno43
Jan 04 2018 05:46
Do you wish to keep the option to only render 10 items?
Chase
@hmmChase
Jan 04 2018 05:46
yea
i forgot to include the global variable var countCount = 0;
Bjorn van de Peut
@bjorno43
Jan 04 2018 05:48
Change i < localStorage.length; to i < 11; Now you can safely remove the countCount variable and the nested if-statement
However, that could cause issues in case localStorage.length; is smaller than 10
Chase
@hmmChase
Jan 04 2018 05:53
weirdly it adds 9 items to the page
and in the console is a strange error
Bjorn van de Peut
@bjorno43
Jan 04 2018 05:54
So you could create a variable outside of the for loop that holds it's value and use that instead. Something like:
function pageLoad() {
    var storage = localStorage.length > 10 ? 11 : localStorage.length;
    for (var i = 0; i < storage; i++) {
        if ((JSON.parse(Object.values(localStorage)[i]).completed) === 'notComplete') {
            prependIdea(JSON.parse(Object.values(localStorage)[i]));
        };
    };
};
Chase
@hmmChase
Jan 04 2018 05:56
that one doesn't add items to the page but is something for me to think about
sorry
it does
Bjorn van de Peut
@bjorno43
Jan 04 2018 05:58
:)
Chase
@hmmChase
Jan 04 2018 05:58
i had a brace problem
its adding 11 items to the page
Bjorn van de Peut
@bjorno43
Jan 04 2018 05:59
Hmm. That's a bit odd, but you can easily fix that by changing the number 11 to 10 inside the code
Chase
@hmmChase
Jan 04 2018 06:00
yeah, that worked great
thank you soo much
Bjorn van de Peut
@bjorno43
Jan 04 2018 06:00
No problem :)
Joseph A. Sangine
@HTML-joe
Jan 04 2018 06:14
I have got it down to so few errors
someone please help me with where i am going wrong here
Tiago Correia
@tiagocorreiaalmeida
Jan 04 2018 08:48
you had an extra )
other that I think would be better if you would find out what's missing :D
line 80
kartikeya Jain
@kartikeyaja
Jan 04 2018 09:30
Can anyone suggest me some good final year projects?
Bjorn van de Peut
@bjorno43
Jan 04 2018 09:35
@kartikeyaja Clerify "final year". A 6th grader project would be very different from a University student
kartikeya Jain
@kartikeyaja
Jan 04 2018 09:43
@bjorno43 I am a University student and I am in my Final year of Bachelors in Technology. I want to know some major projects which I can do in my final year
Bjorn van de Peut
@bjorno43
Jan 04 2018 09:45
@kartikeyaja What kind of projects do you have in mind? Which languages do you have experience with?
kartikeya Jain
@kartikeyaja
Jan 04 2018 09:51
@bjorno43 I know Java, C , C++ and Python
Bjorn van de Peut
@bjorno43
Jan 04 2018 09:57
@kartikeyaja Unfortunetely I don't have any experience with those languages myself. As for some project ideas I would focus my attention on something that's actually useful in today's society and shows of some skills. Perhaps a pair programming application that involves real time collaboration with operational transformation is a good idea
EN1STE
@tascioglu
Jan 04 2018 10:18
hi all
am I at the right place when having a little issue with cypress?
kartikeya Jain
@kartikeyaja
Jan 04 2018 10:24
@bjorno43 can you explain more on that
jujuvie
@jujuvie
Jan 04 2018 10:28
hello
I seek evangelize link
I see it is an open source
EN1STE
@tascioglu
Jan 04 2018 10:31
@jujuvie are you writing to me?
jujuvie
@jujuvie
Jan 04 2018 10:31
fix the bug
yes
EN1STE
@tascioglu
Jan 04 2018 10:31
ok..
yes it's open source
but that's not the problem
jujuvie
@jujuvie
Jan 04 2018 10:32
ok is it running
EN1STE
@tascioglu
Jan 04 2018 10:32
i have two laptops.. one my own, one at work.. installed cypress on both.. when I run my testcases on my own laptop, everything works..
but..
when i do it on my computer at work.. I get a message "The requested URL//__/ was not found on this server" after running the test with chrome..
strange thing, it is working with electron..
some people said it could be security limitations for chrome at work.. could it be?
jujuvie
@jujuvie
Jan 04 2018 10:34
I don't know it so much but is it the same server
Davis Jaunbruns
@davis4acca
Jan 04 2018 10:34

Hi, i'm planning to make a responsive app with React and CSS grid. I know how both work but i'm struggling to turn my sketch into a plan of how to implement it.

Can anyone help?

jujuvie
@jujuvie
Jan 04 2018 10:35
ok me I'm beginner and I seek Something like github that can help me in my code..
Daniel Romero
@Ranacode
Jan 04 2018 10:35
maybe start with the mockup of your application @davis4acca
jujuvie
@jujuvie
Jan 04 2018 10:36
it is code to create a website
Daniel Romero
@Ranacode
Jan 04 2018 10:36
Do a simple prototype that resembles the idea you have in your head
jujuvie
@jujuvie
Jan 04 2018 10:36
lol
Davis Jaunbruns
@davis4acca
Jan 04 2018 10:42
@Ranacode Hi, i've done the mockup and i broke it down to React components. I'm more struggling with implementing the layout with css grid
Daniel Romero
@Ranacode
Jan 04 2018 10:43
aaa sorry
Well, you can try the styled-components library and setup the css grid properties inside them
It's a more approachable way to apply styles thinking on react components
It's so easy to use
const Container = styled.div`
 width: 100%;
padding: 0.5;
color: white;
`
and so on...
then you can apply insnide your components like this
<Container /> or <Container></Container>
Davis Jaunbruns
@davis4acca
Jan 04 2018 10:50
Thanks i will look into it
Deepak Manjunath
@Deepak2322
Jan 04 2018 11:37
there is some mystery space in my unordered list, how to get rid of it ? i have p tags inside li
line-height doesn't apply
Bjorn van de Peut
@bjorno43
Jan 04 2018 11:41
@kartikeyaja A pair programming app is a program where multiple developers can collaborate on their projects. I don't know if you're formilliar with Teamviewer, but it's something simular to that. Except that only the IDE is available to everyone in the session. Operational Transformation allowes multiple users to edit a single textarea simultaneously. It provides multiple cursors instead of 1 like normally.
Stephen James
@sjames1958gm
Jan 04 2018 11:55
@Deepak2322 You can use the devtools inspector to see if there is padding or margin that you can remove
Davis Jaunbruns
@davis4acca
Jan 04 2018 12:31
@Ranacode the styled components look really really cool
Daniel Romero
@Ranacode
Jan 04 2018 12:32
I hope you could get the things done around your project :P
Davis Jaunbruns
@davis4acca
Jan 04 2018 12:33
@Ranacode I haven't done anything yet lol. But i can see the power of styled components.
kartikeya Jain
@kartikeyaja
Jan 04 2018 12:59
@bjorno43 okay
Thanks for the help 😊
CamperBot
@camperbot
Jan 04 2018 12:59
kartikeyaja sends brownie points to @bjorno43 :sparkles: :thumbsup: :sparkles:
:cookie: 173 | @bjorno43 |http://www.freecodecamp.org/bjorno43
EN1STE
@tascioglu
Jan 04 2018 13:54
so nobody can or want to help?
cypress-io/cypress#1147
Marc
@MWBauer
Jan 04 2018 14:50
Morning everyone!
Marc
@MWBauer
Jan 04 2018 14:56
@tascioglu I wish I could, but I haven't gotten that far.
Shubham Sharma
@shubham1604
Jan 04 2018 14:58
Hey. I want to change the search icon to textboox upon clicking it. How do i do that?
As they have done in the wikipedia viewer
Marc
@MWBauer
Jan 04 2018 15:00
I'm working on that right now. I have a text field and then the search icon. I don't like how disjointed it looks.
Shubham Sharma
@shubham1604
Jan 04 2018 15:02
I dont understand how the transition works
Marc
@MWBauer
Jan 04 2018 15:03
Did you do the input field?
<input type="text"
Shubham Sharma
@shubham1604
Jan 04 2018 15:04
I know how to create a text box. I also know how to get the icon. What I dont get is how the icon transitions to the text box so beautifully
Bjorn van de Peut
@bjorno43
Jan 04 2018 15:05
@shubham1604 Mind sharing me a link to the example?
Marc
@MWBauer
Jan 04 2018 15:05
I must have closed the window but I had a couple of answers to that.
Shubham Sharma
@shubham1604
Jan 04 2018 15:06
Sure. I' ll PM you
Okay. I won't PM. Have a look at yhe wikipedia viewer
Third project in the intermediate front end projects
@bjorno43
I'll be back.
Bjorn van de Peut
@bjorno43
Jan 04 2018 15:08
Thanks, I've found it :)
Shubham Sharma
@shubham1604
Jan 04 2018 15:14
Yes. So what do you think how its done ?
Bjorn van de Peut
@bjorno43
Jan 04 2018 15:16
It's done using CSS transitions
Using :focus to initiate the transition most likely
glandon22
@glandon22
Jan 04 2018 15:17
you can use jQuery to add and remove classes to the container, and the classes have the animation
thats how the search bar in the project is made i believe
Bjorn van de Peut
@bjorno43
Jan 04 2018 15:19
No that's not how it works. Changing classes would instantly change the layout
glandon22
@glandon22
Jan 04 2018 15:21
thats exactly what you need to do, update the DOM from the image/icon to the search bar
example
you could do it without jquery, but in the fcc project it looks like thats how its done
Bjorn van de Peut
@bjorno43
Jan 04 2018 15:23
In that example, jQuery does change the class. But CSS keyframes are used for the animation
glandon22
@glandon22
Jan 04 2018 15:23
ya
youre right
EN1STE
@tascioglu
Jan 04 2018 15:34
@MWBauer no problem my friend ;)
dinesh
@1532j0004kg
Jan 04 2018 16:23
needs to do calculator in fcc?
primuscovenant
@primuscovenant
Jan 04 2018 17:44
@heroiczero thx
CamperBot
@camperbot
Jan 04 2018 17:44
primuscovenant sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2126 | @heroiczero |http://www.freecodecamp.org/heroiczero
Devansh-Anhal
@Devansh-Anhal
Jan 04 2018 18:16

Hey can anyone help me with this <form action="/submit-cat-photo" id="cat-photo-form">

cat-photo-form{

background-color: green;

}

<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>

<form action="/submit-cat-photo" id="cat-photo-form">
#cat-photo-form{
background-color: green;
}

<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
it is 46th challenge
Bjorn van de Peut
@bjorno43
Jan 04 2018 18:16
'''
CamperBot
@camperbot
Jan 04 2018 18:16
:bulb: to format code use backticks! ``` more info
Devansh-Anhal
@Devansh-Anhal
Jan 04 2018 18:16
usse an id attribute to style an elemnet

```<form action="/submit-cat-photo" id="cat-photo-form">

cat-photo-form{

background-color: green;

}

<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>

Bjorn van de Peut
@bjorno43
Jan 04 2018 18:17
3 backticks here
Code here
3 backticks here
Eric Weiss
@eweiss17
Jan 04 2018 18:17
'''
CamperBot
@camperbot
Jan 04 2018 18:17
:bulb: to format code use backticks! ``` more info
Devansh-Anhal
@Devansh-Anhal
Jan 04 2018 18:17
<form action="/submit-cat-photo" id="cat-photo-form">
  #cat-photo-form{
    background-color: green;
  }

  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
thanks :D
Bjorn van de Peut
@bjorno43
Jan 04 2018 18:18
np :)
Devansh-Anhal
@Devansh-Anhal
Jan 04 2018 18:18
well the problem i am getting is i am not getting the color green
Eric Weiss
@eweiss17
Jan 04 2018 18:18
you have css within your html?
you need it within <style> tags
  #cat-photo-form{
    background-color: green;
  }
move that
Devansh-Anhal
@Devansh-Anhal
Jan 04 2018 18:20
gottit
thanks :D
r2d2
@UsamaHameed
Jan 04 2018 18:27
hey, how do I prevenet js from drropping the last zero from 142.30?
alpox
@alpox
Jan 04 2018 18:33
@UsamaHameed you mean in its string representation? You have to format the number that way especially.
Joseph A. Sangine
@HTML-joe
Jan 04 2018 19:00
FINALLY ERROR FREE
now why wont it work
I cant seam to figure out this picture bit
by picture bit I am inquiring as to why the final if and else statments are not changing the background based off of the temperature data
Eric Weiss
@eweiss17
Jan 04 2018 19:06
@HTML-joe it's all white besides 1 button?
   if (conversion===true)


      {$("#cel").html(ftemp.toFixed(2)+ "   F°");
          conversion=false;}
i would reccomend formatting differently
better formatting i think
Jacob Pieczynski
@JacobPie
Jan 04 2018 19:16
How can I put the border on the About Me evenly under it? https://codepen.io/JakePie/pen/aEyYqw
Eric Weiss
@eweiss17
Jan 04 2018 19:19
@HTML-joe
  $("#but").click(function() {
        if (conversion) {
          $("#cel").html(ftemp.toFixed(2) + "   F°");
          conversion = false;
        } else {
          $("#cel").html(ctemp.toFixed(2) + "   C°");
          conversion = true;
        }
      });
upper right corner - 'Tidy JS' helps
if you check the console you can get good infromation of what is not working.
image.png
maybe not this time though
Eric Weiss
@eweiss17
Jan 04 2018 19:24
line 10
```
if (navigator.geolocation) {
navigator is just being pulled from nowhere?
Stephen James
@sjames1958gm
Jan 04 2018 19:31
@eweiss17 navigator is a browser global
@HTML-joe There is a "tidy js" option in the drop down menu - try that to see what "correctly" formatted js looks like
Eric Weiss
@eweiss17
Jan 04 2018 19:34
Navigator.geolocation returns an object, is an if statement appropriate there?
also in your css..... get rid of color: white;
Stephen James
@sjames1958gm
Jan 04 2018 19:35
@HTML-joe You'll need to put your $.getJSON inside the geolocation callback - because it is asynchronous
Eric Weiss
@eweiss17
Jan 04 2018 19:39
I got it working
i have it forked, if u can't figure it out i can share it
Joseph A. Sangine
@HTML-joe
Jan 04 2018 19:45
@eweiss17 yes please
Jacob Pieczynski
@JacobPie
Jan 04 2018 20:01
How can I use the .replaceWith() jQuery in https://codepen.io/JakePie/pen/aEyYqw to switch to the next screen without making the #two at the top of the screen?
Joseph A. Sangine
@HTML-joe
Jan 04 2018 20:07
@eweiss17 I have that much so far as well my issue is with the final if statments not displaying the url based off of the temperature
Renan Arend
@yosemitea
Jan 04 2018 21:11
Why is my alt class not appearing under the image? https://codepen.io/yosemitea/pen/Mroxrb
Kaz Baig
@kbaig
Jan 04 2018 21:31
@yosemitea what do you mean by alt class
Renan Arend
@yosemitea
Jan 04 2018 21:38
@kbaig oh, actually I'm full of shit, I meant the alt attribute inside the img
Stephen James
@sjames1958gm
Jan 04 2018 21:46
@yosemitea alt only shows if the image cannot be loaded.
Renan Arend
@yosemitea
Jan 04 2018 21:52
god dammit, thanks
Stephan Lamoureux
@slamoureux
Jan 04 2018 22:13
my background image doesn't show on mobile, will media queries take care of that?
Kaz Baig
@kbaig
Jan 04 2018 22:24
@slamoureux Just by making the browser smaller, the image is still showing so it must be a different issue. You would want to look up if the browser you're using on mobile supports the feature
Stephan Lamoureux
@slamoureux
Jan 04 2018 22:25
maybe its a codepen issue then and not the actual page
Stephan Lamoureux
@slamoureux
Jan 04 2018 22:44
at least that's what i'm going with. Works on my machine ¯_(ツ)_/¯