These are chat archives for FreeCodeCamp/Help

20th
Oct 2018
codeloopy
@codeloopy
Oct 20 2018 03:39 UTC
hello!
quick JS question guys: to add an element to the DOM and a class and perhaps content and styles, etc… is there a way to add an element with a class laready to the parent element in the DOM?
… hope I’m being clear
abraham anak agung
@padunk
Oct 20 2018 04:09 UTC
@codeloopy you can use appendto add elements to the DOM
Anand Potukuchi
@anandpotukchi
Oct 20 2018 05:24 UTC
anyone embed a twitter timeline on their website
?
Anand Potukuchi
@anandpotukchi
Oct 20 2018 06:10 UTC
@ezioda004
handleKeyPress (e) {

     this.setState({
      id: e.target.firstElementChild.getAttribute("id"),
      sound:  e.target.firstElementChild.getAttribute("src")
    }, () => {

      let audio = document.getElementById(this.state.id);
       if(e.keyCode === this.state.id.charCodeAt()) {
      audio.play();
      audio.currentTime = 0;
       }
    });
  }
what's wrong with my function
@cmccormack
@thekholm80
Anand Potukuchi
@anandpotukchi
Oct 20 2018 06:48 UTC
please help
Aditya
@ezioda004
Oct 20 2018 06:49 UTC
@anandpotukchi And where is this this method being called?
Anand Potukuchi
@anandpotukchi
Oct 20 2018 06:51 UTC
compnentDidMount() and componentWillUnmount()
@ezioda004
Aditya
@ezioda004
Oct 20 2018 06:54 UTC
@anandpotukchi If you want others to take a look at your code, you should post the relevant code. I can't keep taking a guess.
Anand Potukuchi
@anandpotukchi
Oct 20 2018 06:54 UTC
true
Aditya
@ezioda004
Oct 20 2018 06:56 UTC
@anandpotukchi Open console and check the error. Fix them one by one.
psyperl
@psyperl
Oct 20 2018 08:37 UTC
greetings
Niraj Nandish
@Nirajn2311
Oct 20 2018 10:04 UTC
Anyone know of a good project to do with vue
Niraj Nandish
@Nirajn2311
Oct 20 2018 10:16 UTC
Also could someone give me a review for my vue counter app - https://vue-counter-app.herokuapp.com/ - @diomed
May Kittens Devour Your Soul
@diomed
Oct 20 2018 11:43 UTC
it's counter productive
ba dum tsss
Niraj Nandish
@Nirajn2311
Oct 20 2018 11:49 UTC
@diomed i cant seem to put github fa icon, can you help me out
May Kittens Devour Your Soul
@diomed
Oct 20 2018 11:50 UTC
where is your font-awesome
Niraj Nandish
@Nirajn2311
Oct 20 2018 11:51 UTC
i am importing the github icon in main js
from fa's brand svg icons package
May Kittens Devour Your Soul
@diomed
Oct 20 2018 11:56 UTC
@Nirajn2311 hmmm... what if you add font-awesome in css: https://vue-counter-app.herokuapp.com/css/app.e3f6b083.css
in list of fonts
Niraj Nandish
@Nirajn2311
Oct 20 2018 11:56 UTC
@diomed figured it out, seems we have to mention the font type in an array
like :icon="['fab','github']"
as it was by default set to fas
May Kittens Devour Your Soul
@diomed
Oct 20 2018 12:03 UTC
font awesome became trash with version 5 if you not pro :-|
Niraj Nandish
@Nirajn2311
Oct 20 2018 12:58 UTC
@diomed is there anyway to change the font size in vuetify button
May Kittens Devour Your Soul
@diomed
Oct 20 2018 12:59 UTC
@Nirajn2311 mby add a custom class? or smth
IDK, what am I? a :cat: or webdev?
Niraj Nandish
@Nirajn2311
Oct 20 2018 13:02 UTC
If you aint a webdev, then why are you here?
Someone ban this :cat:
@Nirajn2311 mby add a custom class? or smth
it didnt work
Aditya
@ezioda004
Oct 20 2018 13:02 UTC
Spider-cat, Spider-cat, Does whatever a Spider-cat does.
Niraj Nandish
@Nirajn2311
Oct 20 2018 13:05 UTC
@ezioda004 #24280 and other PRs by same author are spam
May Kittens Devour Your Soul
@diomed
Oct 20 2018 13:06 UTC
@Nirajn2311 I am FCC's pet :cat:
Niraj Nandish
@Nirajn2311
Oct 20 2018 13:07 UTC
@diomed I thought that was @faraco jobs, since he's much more cuter than you
May Kittens Devour Your Soul
@diomed
Oct 20 2018 13:07 UTC
:unamused:
who?
that Nermal?
pfft
May Kittens Devour Your Soul
@diomed
Oct 20 2018 13:15 UTC
@Nirajn2311 btw. I'm pretty sure from my understanding... that faraco is actually a she
Aditya
@ezioda004
Oct 20 2018 13:16 UTC
@Nirajn2311 Closed, I'm not even bothering marking invalid at this point or he'll keep opening more PR's.
May Kittens Devour Your Soul
@diomed
Oct 20 2018 13:17 UTC
@ezioda004 you should mark all PR's you closed with #floor is lava
that way they'll know they lost
Aditya
@ezioda004
Oct 20 2018 13:18 UTC
@diomed I was thinking more like marking them with a new tag "If you open another PR I'm unleashing diomed after you"
May Kittens Devour Your Soul
@diomed
Oct 20 2018 13:27 UTC
I'm not your dog!
Aditya
@ezioda004
Oct 20 2018 13:30 UTC
:cat:, :dog:, :dolphin: its the same thing
Anand Potukuchi
@anandpotukchi
Oct 20 2018 13:43 UTC
i still can't find what's wrong
someone please hep me
Anand Potukuchi
@anandpotukchi
Oct 20 2018 13:48 UTC
@cmccormack are you there?
May Kittens Devour Your Soul
@diomed
Oct 20 2018 13:54 UTC

MEOW

I hit wrong button and scared myself to death with @anandpotukchi 's drum
Anand Potukuchi
@anandpotukchi
Oct 20 2018 14:02 UTC
anybody?
@anandpotukchi whats the problem?
Anand Potukuchi
@anandpotukchi
Oct 20 2018 14:11 UTC
@moT01 keyrpess are not working
there's a typo for starters
in your event listener
see it?
Anand Potukuchi
@anandpotukchi
Oct 20 2018 14:15 UTC
@moT01 where
  componentDidMount() {
    document.addventListener('keydown', this.handleKeyPress)
  }
Anand Potukuchi
@anandpotukchi
Oct 20 2018 14:16 UTC
@moT01 fixed
is that enough to get you on track or do you want me to take a look at more?
Anand Potukuchi
@anandpotukchi
Oct 20 2018 14:17 UTC
please do
i put this in there to check if it working...
  handleKeyPress (e) {
    console.log(e);
so now when you press a key, you can see e will log to the console, so the keypress is working
k, now I changed it to this...
  handleKeyPress (e) {
    console.log(e.target.firstElementChild.getAttribute('id'));
give it a try and tell me what you see
?
Anand Potukuchi
@anandpotukchi
Oct 20 2018 14:33 UTC
sill loading
something's off
Aditya
@ezioda004
Oct 20 2018 14:35 UTC
let audio = document.getElementById(this.state.id)e; remove that unwanted e at the end.
well, i'm not sure there - save it and ill reload the pen
Anand Potukuchi
@anandpotukchi
Oct 20 2018 14:36 UTC
done
wanna try logging that now?
Anand Potukuchi
@anandpotukchi
Oct 20 2018 14:38 UTC
loggin null @moT01
so does that tell you anything?
Anand Potukuchi
@anandpotukchi
Oct 20 2018 14:38 UTC
yeah
learnt an imporant lesson
use console log
yes, very important
what else does it tell you?
Anand Potukuchi
@anandpotukchi
Oct 20 2018 14:45 UTC
the id isn working
correct
Niraj Nandish
@Nirajn2311
Oct 20 2018 14:46 UTC
@moT01 how are you with vue?
so i would go back to console.log(e) again, and look through those properties to find something to give you the id if that's what you're after
@Nirajn2311 not good
what's the problem
Niraj Nandish
@Nirajn2311
Oct 20 2018 14:48 UTC
I want to change the test size of the buttons
I used vuetify to make the buttons
not sure - won't just changing the text size in the css work?
Niraj Nandish
@Nirajn2311
Oct 20 2018 14:53 UTC
@moT01 check now, i just pushed another change
what am I checking, did it work?
Niraj Nandish
@Nirajn2311
Oct 20 2018 14:54 UTC
Also i have set font-size, but the text in the buttons doesnt change
code.png
👆 @moT01 the .vue file
checking the dev tools, it shows font-size 14px - so your font size of 30px is getting overridden by something down the line
if you added !important to the font-size:30px it would probably work.... font-size: 30px !important;
that's probably not the best way to fix it - but it's a good way to check if your properties are being overridden by something else
cause adding that will give it the most value
the tools show the 14px size coming from .v-btn
so you could try putting that in the css, .v-btn { font-size: 30px; }
Niraj Nandish
@Nirajn2311
Oct 20 2018 15:02 UTC
so you could try putting that in the css, .v-btn { font-size: 30px; }
That also didnt work
neither of those worked
?
Niraj Nandish
@Nirajn2311
Oct 20 2018 15:03 UTC
Nope
hmm
Niraj Nandish
@Nirajn2311
Oct 20 2018 15:04 UTC
@moT01 found it, i had to put the font size in .v-btn__content { font-size: 30px; }, that was overriding the apps font size
Now i just have to figure out how to change the size of the button 🤔🤔🤔
i was checking the vuetify docs - https://vuetifyjs.com/en/components/buttons - might be something in there to help so you dont have to add custom css, not sure
Anand Potukuchi
@anandpotukchi
Oct 20 2018 15:24 UTC
@moT01 please help me
@anandpotukchi what is e.state.value
put this in there again...
  handleKeyPress (e) {
    console.log(e);
run it, press a button, and check the real console
Christopher McCormack
@cmccormack
Oct 20 2018 15:26 UTC
@anandpotukchi yo you rang?
Anand Potukuchi
@anandpotukchi
Oct 20 2018 15:28 UTC
yeah
cant get keypress to work
really
Anand Potukuchi
@anandpotukchi
Oct 20 2018 15:29 UTC
an im trying to figure it out
im trying to walk you through it
Christopher McCormack
@cmccormack
Oct 20 2018 15:29 UTC
@anandpotukchi make sure you're using the dev console not the codepen console if you're looking for errors
When I see the Codepen console open when I click a link I'm almost always certain you're looking at the wrong console, missing potential errors
Codepen console only shows a limited output
@anandpotukchi did you do :point_up: October 20, 2018 8:25 AM?
Anand Potukuchi
@anandpotukchi
Oct 20 2018 15:32 UTC
yeah
e is an object that is now logged in the console, you can use any of those properties in there to get your id
the first one is altKey
e.altKey would give you false
do any of the other properties look like they can give you the id you're looking for?
Christopher McCormack
@cmccormack
Oct 20 2018 15:39 UTC
check out the elements/classnames
Momozor
@momozor
Oct 20 2018 15:41 UTC
purrrr
i dont get it @cmccormack
Christopher McCormack
@cmccormack
Oct 20 2018 15:42 UTC
@moT01 in the dev console?
don't read the article, just check it out in dev console
i still dont get what you're trying to show me
Christopher McCormack
@cmccormack
Oct 20 2018 15:45 UTC
Just thought it was weird all the classes are emojis
I don't know how that could be useful
ohhh
yea, that's different
i was checking the console
is that what the article talks about?
Anand Potukuchi
@anandpotukchi
Oct 20 2018 15:48 UTC
hw to open browser cosole
@anandpotukchi right click, then inspect, then the console tab
(on chrome or firefox)
if you're using any other browser, switch
Christopher McCormack
@cmccormack
Oct 20 2018 15:50 UTC
@moT01 nope, was just reading it and wanted to see how they did the animated button effect
which is pretty neat
but the emojis are... I don't know
initially vomit inducing, but then I realized even normal text names aren't that useful when scrolling through classes
Momozor
@momozor
Oct 20 2018 15:50 UTC
Ah..that explains why I can't find the browser console till to this day in lynx
Christopher McCormack
@cmccormack
Oct 20 2018 15:51 UTC
@faraco pssh it's all about browsh now
better than emojis i think
Christopher McCormack
@cmccormack
Oct 20 2018 15:53 UTC
@moT01 they don't appear to have any relation to their actual function, which leads me to believe this is some post processing fun they're doing
maybe not if you find the right emojis
Niraj Nandish
@Nirajn2311
Oct 20 2018 15:55 UTC
Can anyone give me any idea for any vue project
Christopher McCormack
@cmccormack
Oct 20 2018 15:56 UTC
@Nirajn2311 make an app that pulls all your games from different platforms and displays them in a sortable fashion
Niraj Nandish
@Nirajn2311
Oct 20 2018 15:56 UTC
@moT01 is it possible to change the type of button when the screen size is reduced
im sure there's a way, what do you want to happen
or at least a way to make that happen
Momozor
@momozor
Oct 20 2018 15:57 UTC
@Nirajn2311 Make an app that helps people make another app.
@cmccormack i might have to try that
Momozor
@momozor
Oct 20 2018 15:58 UTC

@cmccormack pssh it's all about browsh now

:scream_cat:

Christopher McCormack
@cmccormack
Oct 20 2018 16:00 UTC
Is there a way to modify a form action before it submits?
Christopher McCormack
@cmccormack
Oct 20 2018 16:00 UTC
@moT01 I like it
thatll mess with some peoples heads
@cmccormack i would think you can change it with JS before it submits to the backend
Christopher McCormack
@cmccormack
Oct 20 2018 16:03 UTC
Yeah I think so, I forgot to remove e.preventDefault() so testing again
thanks
Niraj Nandish
@Nirajn2311
Oct 20 2018 16:05 UTC
@moT01 i was thinking of changing the text to icons and make the buttons round when screen size is a mobile
i would think you can put a media query in there and add some styles
actually, you might need a little more to change the icons
might need to do that with JS
Niraj Nandish
@Nirajn2311
Oct 20 2018 16:12 UTC
We can use media queries when the style changes are from our side
but these are predefined attributes
Anand Potukuchi
@anandpotukchi
Oct 20 2018 16:22 UTC
@moT01 the console is empty
I logged e
Christopher McCormack
@cmccormack
Oct 20 2018 16:28 UTC
@moT01 I feel like the redirect requirement on the user stories for the message board is kind of dumb, do you think it would still pass if the redirect was done only on the frontend?
@anandpotukchi it should show the object after you press a button
@cmccormack what user story is it?
Christopher McCormack
@cmccormack
Oct 20 2018 16:33 UTC
@moT01 the thread and reply posts
i think it will pass, cause im not sure there's any actual verification tests
Christopher McCormack
@cmccormack
Oct 20 2018 16:33 UTC
I'm not either :)
you just need to put in a url and submit
Christopher McCormack
@cmccormack
Oct 20 2018 16:33 UTC
I just don't get why an API would include a redirect on the backend
well, it says "Recomend" in the user stories
so it's not a specific requirement
Christopher McCormack
@cmccormack
Oct 20 2018 16:36 UTC
Good call
thanks
Anand Potukuchi
@anandpotukchi
Oct 20 2018 16:36 UTC
@moT01 TypeError: _this2.state.id is null; can't access its "charCodeAt" property
there's an object like you said
but...?
Christopher McCormack
@cmccormack
Oct 20 2018 16:39 UTC
@anandpotukchi events don't have a state property
Aditya
@ezioda004
Oct 20 2018 16:40 UTC
@thekholm80 How to design a website
Kyle Holm
@thekholm80
Oct 20 2018 16:41 UTC
@ezioda004 at first i thought it was funny, then i got sad because it's too accurate
Christopher McCormack
@cmccormack
Oct 20 2018 16:41 UTC
Is it at least responsive??
Aditya
@ezioda004
Oct 20 2018 16:42 UTC
Its a progressive web app XXL which runs even after your phone dies
Anand Potukuchi
@anandpotukchi
Oct 20 2018 16:42 UTC
@moT01 currentTarget
is this what i need?
no
key is what i used to get it working
see how its value is the letter you pressed
Christopher McCormack
@cmccormack
Oct 20 2018 16:44 UTC
currentTarget is where the event is actually attached, so if you attached it to document it would always be document element
Momozor
@momozor
Oct 20 2018 16:44 UTC
@ezioda004 did you just read my mind?

How to design a website

:crying_cat_face:

Christopher McCormack
@cmccormack
Oct 20 2018 16:46 UTC
How did it get the city without access to navigator??
Anand Potukuchi
@anandpotukchi
Oct 20 2018 16:47 UTC
:thought_balloon:
Christopher McCormack
@cmccormack
Oct 20 2018 16:47 UTC
I feel like there should be another popup for GDPR as well :)
Aditya
@ezioda004
Oct 20 2018 16:47 UTC
@faraco Yes, let me guess now you're thinking "Why do we park in the driveway and drive on the parkway?"
Christopher McCormack
@cmccormack
Oct 20 2018 16:48 UTC
I park in my car park
aptly named
Aditya
@ezioda004
Oct 20 2018 16:50 UTC
@cmccormack You have a car park? I'll have to charge you extra in my next monthly email for donation
Christopher McCormack
@cmccormack
Oct 20 2018 16:50 UTC
Hah
Maybe I should call it a car hole
Aditya
@ezioda004
Oct 20 2018 16:52 UTC
aptly named
Christopher McCormack
@cmccormack
Oct 20 2018 16:55 UTC
Perhaps that will lower my donation requirement haha
Anand Potukuchi
@anandpotukchi
Oct 20 2018 17:07 UTC
design failure
my drum machine sucks
gotta build anoher one later
its fine
still not getting it?
Anand Potukuchi
@anandpotukchi
Oct 20 2018 17:12 UTC
nope
these two lines are what we found out weren't working...
      id: e.target.firstElementChild.getAttribute("id"),
      sound:  e.target.firstElementChild.getAttribute("src")
remember they logged null
Momozor
@momozor
Oct 20 2018 17:13 UTC
:eyes:
Anand Potukuchi
@anandpotukchi
Oct 20 2018 17:13 UTC
I gotta revise my conceppt and sat again
bye
i got it working by changing those two lines
Anand Potukuchi
@anandpotukchi
Oct 20 2018 17:14 UTC
tomorrow
it's 10:45
@cmccormack you game a little right?
Christopher McCormack
@cmccormack
Oct 20 2018 17:17 UTC
@moT01 yeah
playing Horizon right now
what console
or pc
Christopher McCormack
@cmccormack
Oct 20 2018 17:18 UTC
PC, PS4, Switch, Wii U
360 sometimes
well, i came across this game when I was making my dungeon crawler a while back - https://www.spelunkyworld.com/ - i recommend it
Christopher McCormack
@cmccormack
Oct 20 2018 17:20 UTC
I got into that for a little bit, it was pretty great
I like that kind of game
its addicting
ReesesLover123
@ReesesLover123
Oct 20 2018 17:24 UTC
<!DOCTYPE html>
<html>
<head>
    <title>Super Duper Dynaic Form</title>
    <script>
        function go( ) {
            ta = document.getElementById("ta");
            w = window.open("", "targ", "");
            w.document.open();
            w.document.write(ta.value);
            w.document.close();
        }
    </script>
</head>
<body onkeyup='go()' onload='go()'>
    <form>
        <textarea id='ta' rows='40' cols='100'>
                 <html>
                 </html>
        </textarea>               
    </form>
</body>
</html>
Christopher McCormack
@cmccormack
Oct 20 2018 17:24 UTC
They have it on Switch? That would be great. :heart: my Switch
ReesesLover123
@ReesesLover123
Oct 20 2018 17:24 UTC
When I try to open it with chrome, it just displays the full html.
Any idea why?
Christopher McCormack
@cmccormack
Oct 20 2018 17:24 UTC
@ReesesLover123 when pasting code, you can use markdown to display it properly. ctrl + shift + m/ command + ctrl + m (mac) will show you the syntax
ReesesLover123
@ReesesLover123
Oct 20 2018 17:25 UTC
'''
Testing123
'''
Christopher McCormack
@cmccormack
Oct 20 2018 17:26 UTC
Is that right for windows, ctrl + shift + m?
@ReesesLover123 backticks, ```
you can edit your previous posts as well, FYI
@ReesesLover123 what is the file extension?
:thumbsup:
ReesesLover123
@ReesesLover123
Oct 20 2018 17:27 UTC
.txt - I'm on a Windows 8 Laptop atm
Christopher McCormack
@cmccormack
Oct 20 2018 17:27 UTC
html should be .html
ReesesLover123
@ReesesLover123
Oct 20 2018 17:27 UTC
I feel incredibly stupid now, sorry I missed that. Thanks!
Christopher McCormack
@cmccormack
Oct 20 2018 17:28 UTC
haha no worries