These are chat archives for FreeCodeCamp/HelpFrontEnd

12th
Jun 2018
TonyRednil
@TonyRednil
Jun 12 2018 00:02
@bradtaniguchi hey wait a second. Did freecodecamp get rid of the weather forecast app project? I can't find it anymore.
Brad
@bradtaniguchi
Jun 12 2018 00:07
@TonyRednil Haha I dont know, they did update the curriculum, IDK if the project got removed tho, no idea.
There were a lot of problems with it (CORS issues and API changes)
TonyRednil
@TonyRednil
Jun 12 2018 00:15
@bradtaniguchi damn, that feels like a waste of time now...
Brad
@bradtaniguchi
Jun 12 2018 00:18
@TonyRednil If you learned something how is it a waste of time?
Gulsvi
@gulsvi
Jun 12 2018 00:55
@TonyRednil It's still a project, but not one that contributes toward the newer certificates. https://learn.freecodecamp.org/coding-interview-prep/take-home-projects/show-the-local-weather
When you finish the project, go to your settings at: https://www.freecodecamp.org/settings
And add the link under "Legacy Certification Settings" - you can still save your progress toward those older certificates.
Brad
@bradtaniguchi
Jun 12 2018 00:57
Ah I see, it still goes toward the responsive front-end design cert I guess right?
Gulsvi
@gulsvi
Jun 12 2018 00:58
To answer your initial question @TonyRednil (and @bradtaniguchi) yes, you can view all outputs of the Weather API. The one FCC chose to use is the Open Weather Map API and the documentation is listed here: https://openweathermap.org/current
To see how to get the icon for your weather, see: https://openweathermap.org/weather-conditions
@bradtaniguchi No, it does not. Check out https://learn.freecodecamp.org to see which projects go toward each of the newer certificates.
These are the projects for that cert:
Build a Tribute Page
Build a Survey Form
Build a Product Landing Page
Build a Technical Documentation Page
Build a Personal Portfolio Webpage
Brad
@bradtaniguchi
Jun 12 2018 00:59
Oh I see It isn't under there anymore
Sorry I didn't read :P
Victor De Los Santos
@rdelosh
Jun 12 2018 01:14
ever since I started working , I completely abandoned FCC maybe I should go back
ehutchllew
@ehutchllew
Jun 12 2018 02:07
@rdelosh sounds about right
Does anyone know how to do it?
Tom
@moT01
Jun 12 2018 02:46
what does you code look like @mpmaan ?
mpmaan
@mpmaan
Jun 12 2018 02:47
<style>
  body {
    background: url(' https://i.imgur.com/MJAkxbh.png');
  }
</style>
It works but I can't pass the test
ehutchllew
@ehutchllew
Jun 12 2018 02:48
@mpmaan take out the space in your string
mpmaan
@mpmaan
Jun 12 2018 02:48
thanks
i could not see it earlier because of the line break just after '(' on the website
Marc
@MWBauer
Jun 12 2018 05:00
how does one use the @import command?
Marc
@MWBauer
Jun 12 2018 05:43
nvm. Not useful for what I'm doing. But thank you.
Zack Adams
@MindForCode_twitter
Jun 12 2018 05:52
test
Hey guys
Dhaval Vira
@dhavalveera
Jun 12 2018 05:52
hey
Zack Adams
@MindForCode_twitter
Jun 12 2018 05:52
I habve a quick question
Dhaval Vira
@dhavalveera
Jun 12 2018 05:53
Yeah, ask
Zack Adams
@MindForCode_twitter
Jun 12 2018 05:53

let converter = function(farenheit){
let kelvin = (farenheit-32)/1.8 +273.15
let celsius = (farenheit -32) * 5/9

let temp={
    farenheit: `farenhiet is ${farenheit}`,
    celsius: `celsius is ${celsius}`,
    kelvin: `kelvin is ${kelvin}`
}
return temp

}

let f = converter(32)

console.log(f.celsius)
console.log(f.farenheit)
console.log(f.kelvin)

in
this example. F is an object because converter() is returning an object
is this correct?
Dhaval Vira
@dhavalveera
Jun 12 2018 05:54
Sorry @MindForCode_twitter I am not familiar with JS
Zack Adams
@MindForCode_twitter
Jun 12 2018 05:54
okay thank you for taking a look regardless!
Dhaval Vira
@dhavalveera
Jun 12 2018 05:55
Sorry for the Inconvenience
Aditya
@ezioda004
Jun 12 2018 05:55
@MindForCode_twitter Yes, since you're returning temp its an object.
Zack Adams
@mindforcode
Jun 12 2018 05:56
Thanks @ezioda004
Gitter has been acting up for me lately with the security token issue
I usually use the client app
buiphuking
@buiphuking
Jun 12 2018 07:49
sorry guy but,
anyone good at laravel here?
asumirio
@asumirioo
Jun 12 2018 08:46
Which framework do you use guys? 😊😊😊
abraham anak agung
@padunk
Jun 12 2018 08:48
@asumirioo react :smile:
Josh Single
@jkyereh
Jun 12 2018 10:37
Hi everyone
Been out of fcc for sometime now, apparently I can't move past javascript
Looks too tough for me
Charlie Waite
@charliearlie
Jun 12 2018 10:40
What do you find tough? Algorithms? Building a project?
Josh Single
@jkyereh
Jun 12 2018 11:07
Oooh... I just logged in to fcc, looks like there's been a rebuild, and I've lost all my data....
I'm confused.... Anyone experiencing this?
@charliearlie the whole js thing looks tough for me
Charlie Waite
@charliearlie
Jun 12 2018 11:18
Yeah, there's a new curriculum now. And it seems tough at first but once you think of a project and start building it, you start learning things in small pieces. React helped me learn JavaScript a lot!
Josh Single
@jkyereh
Jun 12 2018 11:40
Alright.... I realized I logged in with a different email.... I have my data though, but have do the new projects for the new curriculum
@charliearlie I'm gonna start afresh, really need to face javascript and conquer it.... ☺
mpmaan
@mpmaan
Jun 12 2018 11:42
does anybody use vscode here?
how can i open more than 3 files simultaneously?
Josh Single
@jkyereh
Jun 12 2018 11:46
@charliearlie so is react somehow easy?
Charlie Waite
@charliearlie
Jun 12 2018 11:56
It's not easy but it's JavaScript. Most of the time you'll be writing JS, along with JSX.
But once you learn React, it does start to feel simple. That's until you start using Redux anyway!
Simon Cordova
@gbsimon87
Jun 12 2018 12:24
Hi guys, need some help.
I've got an input field which I'd only like the last number to be visible, and all the other ones to be a '*' - like a pin pad
Any ideas?
Jacob Colborn
@jcolborn-dropdeadgames
Jun 12 2018 12:52
There is a jquery plugin that can be used called MobilePasswords. Here is the link to the github repo https://github.com/panzj/jquery-mobilePassword/blob/master/js/jquery.mobilePassword.js. You can just edit the input types in your js to use the mobilePassword() function.
Simon Cordova
@gbsimon87
Jun 12 2018 13:11
@jcolborn-dropdeadgames Unfortunately it is for a React app and I can't use jQuery here, and definitely no plugins :(
I suppose I'm looking to use native JS methods such as slice, splice, etc and getting the prevState and converting them all to * and only allowing the user to see the last digit inputted
Been much tougher than anticipated
Jacob Colborn
@jcolborn-dropdeadgames
Jun 12 2018 13:21
So, for native JS you can use slice and splice and if you combine that with onKeyDown or onKeyPress (depending on your React version). Just listen for the key press and when the second one comes in change the already input character to hidden.
MoisΓ©s Man
@moigithub
Jun 12 2018 14:12
class InputPad extends Component {
  state = {inputText: ''};

  handleKey=(e)=>{
    let k=e.key;
    this.setState(prevState=>({inputText: prevState.inputText + k}));
  }

  render(){
    const {inputText}=this.state;
    const showStars = inputText.slice(-1).padStart(inputText.length,"*");
    return (
      <>
            <input type="text" 
                value={showStars} 
                onKeyPress={this.handleKey} />
            <p>{this.state.inputText}</p>
      </>
    );
  }
}
https://stackblitz.com/edit/react-pionmt
Josh Single
@jkyereh
Jun 12 2018 14:15
@charliearlie alright
Simon Cordova
@gbsimon87
Jun 12 2018 14:37
thanks @moigithub @jcolborn-dropdeadgames
Christopher McCormack
@cmccormack
Jun 12 2018 15:20
Hi all - I think I'm about done with my nightlife app, would you mind testing it out and providing feedback? You can authenticate using Twitter Oauth. I'm using Miami as a test search.
https://meetuptonight.herokuapp.com
Simon Cordova
@gbsimon87
Jun 12 2018 16:08
@cmccormack
Just checking it out, good stuff buds!
Quick suggestion, I think the images should be clickable with the same link as the respective search.
Christopher McCormack
@cmccormack
Jun 12 2018 16:09
@gbsimon87 oh great suggestion!
Simon Cordova
@gbsimon87
Jun 12 2018 16:09
It was the first thing I tried to be honest, I went to the image instead of the link as they have more real estate for the mouse
I'll let you know if anything else! :)
Simon Cordova
@gbsimon87
Jun 12 2018 16:15

@cmccormack
One other suggestion.
The 'I want to go' div implies a link, where as the 'x people going' is not a link, is an informative piece of data.

I'd personally style them differently, perhaps simply removing the border from the 'x people going' div.

Hope that makes sense.

Christopher McCormack
@cmccormack
Jun 12 2018 16:15
@gbsimon87 it is a link
but only if people are going
Simon Cordova
@gbsimon87
Jun 12 2018 16:16
Oh, so it will show you who is going?
Christopher McCormack
@cmccormack
Jun 12 2018 16:20
@gbsimon87 yup, just a simple menu that lists the names
Simon Cordova
@gbsimon87
Jun 12 2018 16:22
@cmccormack cool Ill login to Twitter and check it out
Remember I'm just here providing positive criticism / suggestions - in no way knocking at all ok
Christopher McCormack
@cmccormack
Jun 12 2018 16:22
@gbsimon87 no worries, I appreciate it!
Simon Cordova
@gbsimon87
Jun 12 2018 16:26
image.png
@cmccormack
At 1279px and lower there is a white background showing on the right hand side
Lastly, in mobile, the two divs aforementioned need a quick touch up ...
image.png
@cmccormack
That should get you going. Cheers and great job honestly
Christopher McCormack
@cmccormack
Jun 12 2018 16:29
@gbsimon87 the first issue is fixed in dev, the second I"m not sure I'll touch, that's a really small size lol. I may make it reflow at a very low size to flex column though
@gbsimon87 thank you again for all your feedback it's very useful
Simon Cordova
@gbsimon87
Jun 12 2018 16:29
@cmccormack
No worries man, keep it up!
@cmccormack
Just a quick note though, at the two agencies I've worked for we QA'd for 320px as lots of people still use the iPhone 5
320px and up**
Christopher McCormack
@cmccormack
Jun 12 2018 16:30
@gbsimon87 alright maybe I'll have to bust out my old iphone 4 and test on that as well haha
Simon Cordova
@gbsimon87
Jun 12 2018 16:31
Lol, I feel you, it's a pain
Christopher McCormack
@cmccormack
Jun 12 2018 16:33
You try to catch everything but there's always something missed haha
Simon Cordova
@gbsimon87
Jun 12 2018 16:35
There's always something.
Was just looking at your CSS though, I think you could add a media query to the outer div that has padding 40px to be '40px 0' when max-width is 475
Christopher McCormack
@cmccormack
Jun 12 2018 16:36
I think that's being put there by material UI as part of my media query but I"m not sure why, in the meantime I followed @NJM8 suggestion to just cut it off with a overflow: none :D
Nate Mallison
@NJM8
Jun 12 2018 16:38
If the device is too small I always just serve a giant red page that says "UPGRADE YOU CHEAPSKATE"
Simon Cordova
@gbsimon87
Jun 12 2018 16:38
@NJM8 lololol
Nate Mallison
@NJM8
Jun 12 2018 16:38
πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚
nah that would be terrible
Simon Cordova
@gbsimon87
Jun 12 2018 16:40
@cmccormack not sure if overflow hidden would do it...
image.png
Christopher McCormack
@cmccormack
Jun 12 2018 16:41
@gbsimon87 it worked when applying it to the css attached to the main element
Simon Cordova
@gbsimon87
Jun 12 2018 16:41

but with the width around 475px, then you don't have to worry about text length etc...
but it's all in perspective...

Anyways I need to get back to this fun react project of mine that I've been ripping my head with

@cmccormack
Oh really, ok nice then!
Christopher McCormack
@cmccormack
Jun 12 2018 16:41
I can't read that css haha it's all generated from JSS
but I did add padding: 40 0 to the container and it did seem to fix it
Simon Cordova
@gbsimon87
Jun 12 2018 16:42
Cool, just remember it needs to be in the media query so it doesn't affect the rest of your layout as it looks totally fine otherwise :)
Christopher McCormack
@cmccormack
Jun 12 2018 16:45
I was wrong padding didn't work there, I'll keep playing with it but overflow seems to be the only thing working so far
I'm sure I can get it but don't know how much I want to investigate haha
Helio Goncalves
@srlhyo
Jun 12 2018 18:56
guys... what's the best way to align an image inside a div?
Gulsvi
@gulsvi
Jun 12 2018 19:14
@srlhyo What have you tried so far that needs improvement?
Lots of ways to align an image, but depends on your goals. If you can share the code, it might help answer the question better.
TonyRednil
@TonyRednil
Jun 12 2018 19:57
Hey guys, quick question. With the radio form element is it the name that prevents users from selecting more than one option? I was just putting one in and when I didn't have the name I could select all three options but when I put in the name it only let me pick one.
Christopher McCormack
@cmccormack
Jun 12 2018 20:01
@TonyRednil correct. name groups the radio buttons
TonyRednil
@TonyRednil
Jun 12 2018 20:02
@cmccormack Ok thanks, also in my code can you tell me why when I remove the div around my radio buttons it groups all the text on the far right and not in by the buttons?
https://codepen.io/TonyRednil/pen/WyjxGy?editors=1000
Norvin Burrus
@ndburrus
Jun 12 2018 20:03
@srlhyo this may be helpful :sparkles:
Christopher McCormack
@cmccormack
Jun 12 2018 20:07
@TonyRednil don't put bootstrap grid classes on your input
that's going to mess it all up
wrap each input and name in a div with the grid class instead, and use label for inputs when you can
TonyRednil
@TonyRednil
Jun 12 2018 20:07
@cmccormack I was trying not to do that however when I did it scrunched all three options onto the left side of the page and I didn't like how that looked.
Christopher McCormack
@cmccormack
Jun 12 2018 20:08
You may want to read up on how bootstrap grid works, you should have a hierarchy of divs with classes container > row > col
Also don't use both versions of bootstrap - use one or the other
TonyRednil
@TonyRednil
Jun 12 2018 20:10
@cmccormack yeah, it's been a while since I messed with this stuff. Now that you bring it up I do recall each one needing to have it's own division. On the topic of research W3schools vs MDN is there any real reason to use one over the other or are they pretty interchangeable? Which bootstrap would you recommend?
Christopher McCormack
@cmccormack
Jun 12 2018 20:10
I think that's causing your test issues
@TonyRednil Use whatever bootstrap you prefer - you should determine that by the api docs and the advantages. You should try and read through all the docs on a library you want to use
MDN is usually preferred over W3 but W3 sometimes has good examples
TonyRednil
@TonyRednil
Jun 12 2018 20:12
@cmccormack I'm definitely trying to do more reading. That's what I've found. Also just doing direct google searches W3 seems to pop up more.
TonyRednil
@TonyRednil
Jun 12 2018 20:19
Also, should I have jQuery and jQuery UI enabled?
Christopher McCormack
@cmccormack
Jun 12 2018 20:20
@TonyRednil probably some bootstrap components require it
Keegan
@Keggatron
Jun 12 2018 20:20
Hey there, does anyone have any experience or know of any good resources for creating a landing page using React? I've been looking through this but was a bit unsure is that typically how developers break the landing page components down.
TonyRednil
@TonyRednil
Jun 12 2018 20:20
@cmccormack yeah, I also read that jQuery UI is built based on jQuery so it kinda requires it
Keegan
@Keggatron
Jun 12 2018 20:21
He's got the page broken down into village - neighbourhoods - blocks - houses. Is this typical?
alt
Also, should there be that many components?
TonyRednil
@TonyRednil
Jun 12 2018 20:22
Oh, and one last thing. In radio forms is a vertical layout better or a horizontal layout? I've been looking online and it seems pretty mixed.
Christopher McCormack
@cmccormack
Jun 12 2018 20:24
@TonyRednil it's however you want :)
TonyRednil
@TonyRednil
Jun 12 2018 20:25
ok, freeCodeCamp's little flame icon, is that font awesome? Does anyone know?
looking at the code it looks like it's their own custom image.
Christopher McCormack
@cmccormack
Jun 12 2018 20:29
yeah it's an image
TonyRednil
@TonyRednil
Jun 12 2018 20:29
@cmccormack thanks
TonyRednil
@TonyRednil
Jun 12 2018 21:19
https://codepen.io/TonyRednil/pen/WyjxGy?editors=0010
can someone help me figure out why my "Night Mode" button isn't doing anything?
Chris
@bestintown23
Jun 12 2018 21:24
Good Afternoon, what are some good websites for image upload? My job blocked postimages.org
Christopher McCormack
@cmccormack
Jun 12 2018 21:33
@TonyRednil you should move that functionality outside of your submit click handler
TonyRednil
@TonyRednil
Jun 12 2018 22:25
@cmccormack omg wow. Thanks lol
Christopher McCormack
@cmccormack
Jun 12 2018 22:26
@TonyRednil np
include*engine
@newtothat
Jun 12 2018 22:39
if you learn math online at websites like khan academy and you finish them one by one .Is it the same as finishing math at school? or any other website that teaches by order?
I am asking because I don't wanna waste my time only in there if it doesn't cover all math subjects
it is kinda written there that they follow common core which I don't know what it means.I just come from non-speaking country and learning math by myself in english
So if anyone is good at math and can answer this question or just tell me where else I can learn it please type in here whatever you think or can suggest
include*engine
@newtothat
Jun 12 2018 22:45
sorry i meant i come from a non-english speaking country
Christopher McCormack
@cmccormack
Jun 12 2018 22:49
@newtothat I think khan academy does a pretty good job of doing it in order. Everything you learn in math should be something that you already have a foundation for, so you'll know you're progressing if you have already learned the building blocks of a new topic
include*engine
@newtothat
Jun 12 2018 22:53
@cmccormack Today I was talking to my boss' daughter a 6. grade girl .And i asked her what is she learning in school about math difficulties and its subject name.She told me about Greek letter β€œΟ€β€ Ο€-number and I didnt know what to say.and didnt ask anymore
Christopher McCormack
@cmccormack
Jun 12 2018 22:54
Pi?
include*engine
@newtothat
Jun 12 2018 22:54
so this kid kinda knows math better than me and I asked myself if the way im learning is the right way
yeah
my math isnt that good
Christopher McCormack
@cmccormack
Jun 12 2018 22:54
No better time to brush up than now
include*engine
@newtothat
Jun 12 2018 22:55
what do you mean?
Sorry i didn't get it but thanks for answering my question
TonyRednil
@TonyRednil
Jun 12 2018 22:57
Is document.getElementByTagName("body").style.backgroundColor="black"; not a thing?
I read about it online but I can't get it to work I code pen.
Christopher McCormack
@cmccormack
Jun 12 2018 23:04
@TonyRednil it appears to return an HTMLCollection, try accessing the first element first document.getElementByTagName("body")[0].style.backgroundColor="black";
that may not work one sec
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:06
that's fine @cmccormack but you might want to create a helper function to avoid hardoding the array index
Christopher McCormack
@cmccormack
Jun 12 2018 23:07
@MelMacaluso this isn't my code they can do as they wish :)
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:07
ie.
function nodeListToArray(nodelist) {
    return Array.from(nodelist);
  }

  export default nodeListToArray;
TonyRednil
@TonyRednil
Jun 12 2018 23:10
@cmccormack should I maybe just assign an id to the body tag?
Christopher McCormack
@cmccormack
Jun 12 2018 23:10
@TonyRednil you can use querySelector
TonyRednil
@TonyRednil
Jun 12 2018 23:11
@cmccormack oh boy. Another new method to learn lol.
Christopher McCormack
@cmccormack
Jun 12 2018 23:11
So I did notice if you try to access an element in the collectino before the page loads you'll get an error, even if the selector provides a result
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:11
if you assign an id and then getElementById you can avoid the hardcoding of the array index, or as @cmccormack suggestes that's another way of doing it
Christopher McCormack
@cmccormack
Jun 12 2018 23:11
so make sure your code is run after the element has already been added to the DOM
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:12
which means
window.addEventListener("load", YOURFUNCTION, false)
Christopher McCormack
@cmccormack
Jun 12 2018 23:12
There aren't that many of them @TonyRednil :) I tend to mostly use these three - getElementById, querySelector, querySelectorAll
or just load the script at the bottom of body. I've gotten lazier and that's by far the laziest and easiest way to do it haha
that's also how a lot of utilities do it
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:13
ahahahahah
that's true, unless you start messing with js frameworks
TonyRednil
@TonyRednil
Jun 12 2018 23:13
@cmccormack I have put this code inside of $(document).ready(function(){..... how do I load the script at the bottom of the body?
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:13
but then you wouldn't do that and you'd use lifeCycles
Christopher McCormack
@cmccormack
Jun 12 2018 23:13
My React apps all have my bundle loading at the bottom of my body as well
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:14
Never coded in React but I image there are methods as created(), mounted() etc.?
Christopher McCormack
@cmccormack
Jun 12 2018 23:14
@TonyRednil
  <body>
    // All html goes here
    <script src="custom.js"></script>
  </body>
@MelMacaluso With React you simply mount the entire React app on a single element in the html
TonyRednil
@TonyRednil
Jun 12 2018 23:15
@cmccormack wait, you can do something like that in codepen? That looks like something you would need a text editor for.
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:15
in codepen you'd have to do what I suggested :joy:
Christopher McCormack
@cmccormack
Jun 12 2018 23:15

so you may have an index file with a body that only contains:

  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>

and your React app has a ReactDOM method that binds the top level component to that divv

Mel Macaluso
@MelMacaluso
Jun 12 2018 23:16
ah that's like in vue
Christopher McCormack
@cmccormack
Jun 12 2018 23:16
This message was deleted
TonyRednil
@TonyRednil
Jun 12 2018 23:16
@MelMacaluso
What was that?
Christopher McCormack
@cmccormack
Jun 12 2018 23:16
@TonyRednil codepen also does that by default I believe
just look at the source
yeah vue has that el property right?
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:16
yep exactly
which in 80% of cases is targetting just one ID element
which ecompasses where you predict you will have your js framework main focus point
TonyRednil
@TonyRednil
Jun 12 2018 23:17
@cmccormack sigh so should I put this function after the document ready?
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:18
inside
TonyRednil
@TonyRednil
Jun 12 2018 23:18
That's where it is now and isn't working
Christopher McCormack
@cmccormack
Jun 12 2018 23:18
you don't need document.ready in codepen
what isn't working
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:18
link codepen
I'm having problems with my Night Mode button again
Christopher McCormack
@cmccormack
Jun 12 2018 23:19
@TonyRednil I forgot to mention earlier but you should have jQuery above any dependencies of jQuery in your javascript settings
TonyRednil
@TonyRednil
Jun 12 2018 23:21
@cmccormack ok I think I fixed that
Christopher McCormack
@cmccormack
Jun 12 2018 23:22
@TonyRednil document.getElementsByTagName("body")[0].style.backgroundColor = "black";
but honestly
Christopher McCormack
@cmccormack
Jun 12 2018 23:23
your function wasn't named correctly
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:23
i'd be better if you define some consts
ie. const button = document.getElementById("color");
Christopher McCormack
@cmccormack
Jun 12 2018 23:23
agreed make it easier on yourself!
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:23
I almost died
editing
Christopher McCormack
@cmccormack
Jun 12 2018 23:23
and if you're using jquery anyway, use jquery selectors!
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:24
also that
TonyRednil
@TonyRednil
Jun 12 2018 23:24
Wait, I need that 0? I didn't see that in the documentation. @MelMacaluso what are you getting at?
Christopher McCormack
@cmccormack
Jun 12 2018 23:24
$('body') sure is a lot easier
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:24
big suggestion would be code in vanilla javascript
to start with
Christopher McCormack
@cmccormack
Jun 12 2018 23:24
I think this project even states you should not use jquery
TonyRednil
@TonyRednil
Jun 12 2018 23:25
I like typing the javascript better but if jQuery is really all that much easier. @MelMacaluso what is vanilla javascript?
Christopher McCormack
@cmccormack
Jun 12 2018 23:25
You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React.
I gotta run ttyl
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:25
see you!
vanilla javascript is what jQuery is based on
TonyRednil
@TonyRednil
Jun 12 2018 23:25
@cmccormack I got most of this stuff without the javascript. Later.
Kingsley
@Kingwindie
Jun 12 2018 23:26
@NJM8 yes,that was one of the problems,i every time i scrolled halfway through the window,it was adding a ton of buttons,but what i ended up doing was creating a button in html and hiding it by default,and then display it once i scrolled up to a certain point
TonyRednil
@TonyRednil
Jun 12 2018 23:26
@MelMacaluso how is it different from what I've been using?
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:26
think of jQuery like a compilation of functions that reduce the amount of coding
TonyRednil
@TonyRednil
Jun 12 2018 23:27
Yeah I just don't like all the special characters
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:27
example: jQuery $('body') while vanilla javascript document.getElementsByTagName("BODY")[0]
TonyRednil
@TonyRednil
Jun 12 2018 23:27
So what I'm using is vanilla javascript?
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:27
is a mixture
you wrapped in a jQuery function some vanilla javascript
jQuery, usually, is quickly recognised by its "$"
TonyRednil
@TonyRednil
Jun 12 2018 23:29
Well idk what the vanilla javascript of $('document').ready(function(){}); is....
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:29
I said that earlier
which means
window.addEventListener("load", YOURFUNCTION, false).
but you don't need that anyway
if you see in my pen I put that out of the ready function
TonyRednil
@TonyRednil
Jun 12 2018 23:30
Codepen already puts that in in the background or something?
I'm confused as to why I don't need it.
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:32
I believe it does not quite sure honestly
TonyRednil
@TonyRednil
Jun 12 2018 23:33
I guess freecodecamp teaches you of it because you need it when you start working with a code editor I guess.
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:33
Well eventListeners are very important so no harm done there
ahah
TonyRednil
@TonyRednil
Jun 12 2018 23:35
Does body have to be capitalized? I think I fixed everything you guys said and it's still not working.
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:36
I literally posted the working pen
TonyRednil
@TonyRednil
Jun 12 2018 23:38
Ok so you posted the function outside of the document ready. However I removed that from my code entirely because it wasn't needed?
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:38
that's fine
the less code the better, you don't need code that does nothing
TonyRednil
@TonyRednil
Jun 12 2018 23:39
But I should still put the code that you put at the top up there?
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:39
in this case, you can put it wherever
is a click event listener that can go anywhere in this case
TonyRednil
@TonyRednil
Jun 12 2018 23:41
I'm looking at my code compared to yours and I can't tell why mine isn't working still.... https://codepen.io/TonyRednil/pen/WyjxGy
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:42
is in line 2
have a look and try to identify it
it's a typo
TonyRednil
@TonyRednil
Jun 12 2018 23:46
I feel so stupid right now
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:47
it happens to literally everyone
from junior to senior devs
so no worries lol
TonyRednil
@TonyRednil
Jun 12 2018 23:47
I'm still not finding it.... -_-
Mel Macaluso
@MelMacaluso
Jun 12 2018 23:47
also open up your browser console
and see what happens when you click on the button
console lor warn / errors are also a good clue
TonyRednil
@TonyRednil
Jun 12 2018 23:50
Line 2 of my js right?
roxxlen
@roxxlen
Jun 12 2018 23:50
what's that all about ?
can't understand what he want me to do
TonyRednil
@TonyRednil
Jun 12 2018 23:54
ok, so in vanilla javascript commands when do I need to use element instead of elements?