These are chat archives for FreeCodeCamp/HelpJavaScript

15th
Jun 2018
JJ Megma
@megma_jj_twitter
Jun 15 2018 01:37
In React how do I make it so I don't have to refresh the page when I submit a form
Claudio Restifo
@Marmiz
Jun 15 2018 02:23
@megma_jj_twitter e.preventDefault()
that's not react, that's how submitting forms works by default in every browser :)
Blauelf
@Blauelf
Jun 15 2018 04:35
@JLuboff I'm using old.reddit.com for that reason :P
179443544
@179443544
Jun 15 2018 08:33
console.log(lookUp("Akira","likes"))
Aakash Srivastav
@aakashsr
Jun 15 2018 08:57
Hello friends
How does "index of()" works in js?
Blauelf
@Blauelf
Jun 15 2018 09:19
@aakashsr There's an indexOf in arrays, do you mean that one? It would compare the values like === does, and return the first matching index, or -1 if none found.
This also means it won't find the index of a NaN, as it equals nothing, not even itself.
Nazar
@IsaakNazar
Jun 15 2018 09:39
truly true
Blauelf
@Blauelf
Jun 15 2018 09:54
And also there's indexOf in strings, which searches for substrings and returns the index where the first match would start (or, again, -1 if none found)
Phil
@mremotoo
Jun 15 2018 12:26
I want to fade in and fade out each h1s one at a time, however, I'm not achieving it. Can you help?
Here's the code:
I basically want to show the h1 one at a time and center on the page and not simultaneously animate
Jack Shijin
@Jackshijin
Jun 15 2018 12:47
begin coding.
Simon Cordova
@gbsimon87
Jun 15 2018 12:50
@mremotoo You could probably just use CSS transitions to achieve that result
Aditya
@ezioda004
Jun 15 2018 14:29

@mremotoo You can wrap the statements inside a setTimeout.

$("div h1").each(function(i){
  setTimeout((i)=>{
        $(this).delay(2000 * i).fadeIn(2000, function(){
        $(this).delay(2000 * 1).fadeOut(2000);
    });
  }, 6000 * i);
});

Working demo

Jason Luboff
@JLuboff
Jun 15 2018 15:08
:wave:
Christopher McCormack
@cmccormack
Jun 15 2018 15:11
@JLuboff howdy
Tom
@moT01
Jun 15 2018 15:13
:ant:
Jason Luboff
@JLuboff
Jun 15 2018 15:16
Whats up guys
Christopher McCormack
@cmccormack
Jun 15 2018 15:18
nm man thinking of doing the next responsive web design project
you?
Jason Luboff
@JLuboff
Jun 15 2018 15:19
Just starting the day.. Gotta work on some SQL stuff
Christopher McCormack
@cmccormack
Jun 15 2018 15:21
@JLuboff seems you're doing that a lot lately
Jason Luboff
@JLuboff
Jun 15 2018 15:21
Seems I am
I want to take the exam soon
Well.. the first one
But also want to finish this app lol
Christopher McCormack
@cmccormack
Jun 15 2018 15:27
Good thing you're working with it in production, should help with the exam I imagine
Jason Luboff
@JLuboff
Jun 15 2018 15:28
Ya it's definitely helping, although.. still a lot of subjects that aren't something I'd say I'd work with frequently...so have to practice them
Josh Queen
@josh-queen
Jun 15 2018 15:29
Hi guys, wondering if you can help me with the arguments object
Jason Luboff
@JLuboff
Jun 15 2018 15:29
@Kohota107 Sure, whats your question
Josh Queen
@josh-queen
Jun 15 2018 15:29
I know it's an array-like object, but that you can't use the usual array functions on it
function likes(names) {

  if (arguments[0].length = 1 && arguments[0] == "") {
    return "no one likes this";
  } else if (arguments[0].length = 1) {
    return arguments[1] + " likes this";
    } else if (arguments.length = 2) {
      return arguments[0] + " and " + arguments[1] + " like this";
      }

}
So I'm trying to access properties with indexes, but it's not really working
Jason Luboff
@JLuboff
Jun 15 2018 15:29
You can convert it into an array
at which point, you can use array methods
Here's methods from the MDN docs that show how to:
var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);

// ES2015
const args = Array.from(arguments);
Josh Queen
@josh-queen
Jun 15 2018 15:30
Ahh, perfect, thanks
As an aside, what does the 'prototype' function actually do?
Code seems to work whether you include it or not
Christopher McCormack
@cmccormack
Jun 15 2018 15:36
@Kohota107 there's a lot to understand about objects and inheritance, better to read something like https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects
Josh Queen
@josh-queen
Jun 15 2018 15:37
Thanks
Jason Luboff
@JLuboff
Jun 15 2018 15:40
@cmccormack I should probably read that too...I've never really understand the purpose of prototype.. but.. looks like its essentially just the ineritance of the origininating object
And the properties of that original object
Christopher McCormack
@cmccormack
Jun 15 2018 15:44
yeah so if you wanted to add a method to all of your existing objects as well as new you can add to the prototype
Josh Queen
@josh-queen
Jun 15 2018 15:46
Do I need to be able to convert the arguments object to an array in any case? I just want to be able to access an array of strings at argument[0]
Christopher McCormack
@cmccormack
Jun 15 2018 15:47
You can reference it directly
arguments[0]
koder3
@koder3
Jun 15 2018 15:47
image.png
image.png
Josh Queen
@josh-queen
Jun 15 2018 15:48
That's fine, but how would I access a string in that array at a particular index?
arguments[0][1] doesn't work for example
koder3
@koder3
Jun 15 2018 15:49
https://imgur.com/a/VlT88O1 why does it say im not using template strings?
Blauelf
@Blauelf
Jun 15 2018 15:49
@Kohota107 Are your "names" given as an array, or as individual arguments? Your code features a parameter names that would take the first argument. Did you mean ES6-style ...names? (makes it an array of all the remaining arguments, obviously must come last)
Jason Luboff
@JLuboff
Jun 15 2018 15:50
@koder3 I think you should be using a loop (or map ideally I think)
Josh Queen
@josh-queen
Jun 15 2018 15:50
Yes, you're quire right
I'm being an idiot
ht
Christopher McCormack
@cmccormack
Jun 15 2018 15:51
@koder3 you're returning a string, I think it wants an Array
koder3
@koder3
Jun 15 2018 15:55
const result = {
success: ["max-length", "no-amd", "prefer-arrow-functions"],
failure: ["no-var", "var-on-top", "linebreak"],
skipped: ["id-blacklist", "no-dup-keys"]
};
function makeList(arr) {
"use strict";

const resultDisplayArray = arr.map((val) => {
return <li class="text-warning">${val}</li>

})

return resultDisplayArray;
}
/**

makeList(result.failure) should return:
[ <li class="text-warning">no-var</li>,
<li class="text-warning">var-on-top</li>,
<li class="text-warning">linebreak</li> ]
**/
const resultDisplayArray = makeList(result.failure);
console.log(resultDisplayArray)
okay this works
@cmccormack @JLuboff thanks
Christopher McCormack
@cmccormack
Jun 15 2018 15:56
@koder3 np
koder3
@koder3
Jun 15 2018 15:56
but why didnt it say im using template strings in the first piece of code i posted?
Christopher McCormack
@cmccormack
Jun 15 2018 15:57
It did in the output, not sure why it didn't on the checklist
koder3
@koder3
Jun 15 2018 16:00
its weird i thought im supposed to return a string
i dont know where it said return an array
and btw does anyone know how to use Dark Mode? I turned it on in the settings and it works there but it doesnt work when I'm on a challenge.
Christopher McCormack
@cmccormack
Jun 15 2018 16:04
It says return a list but should probably read as return an Array
koder3
@koder3
Jun 15 2018 16:04
Alright
Maks Ushakov
@maks-ushakov
Jun 15 2018 16:24
@koder3 For template sting use backtrick
let a = "Booom!!";
const resule = `<p>Say ${a}</p> `;
Brad
@bradtaniguchi
Jun 15 2018 16:58
backtick, backtrick sounds more badass tho :P
Jason Luboff
@JLuboff
Jun 15 2018 17:11
@bradtaniguchi Sounds like a bad rap group
Brad
@bradtaniguchi
Jun 15 2018 17:11
If I ever make a rap group it will be called the backticks :sunglasses:
Kaz Baig
@kbaig
Jun 15 2018 17:11
the backtrick boys
Markus Kiili
@Masd925
Jun 15 2018 17:11
:wave:
Jason Luboff
@JLuboff
Jun 15 2018 17:11
:joy:
@Masd925 Yo
Markus Kiili
@Masd925
Jun 15 2018 17:12
@JLuboff What's up?
Jason Luboff
@JLuboff
Jun 15 2018 17:13
Its Friday. But...been pretty busy so far. You
Kaz Baig
@kbaig
Jun 15 2018 17:14
I'm in full Friday mode
Went home for a bit to unbox my new PC case. Gonna build in that bad boy in a couple days :+1:
@JLuboff how is the conf room booking project going
Markus Kiili
@Masd925
Jun 15 2018 17:15
@JLuboff Pretty tired after two weeks at new job. Using Mac (never touched one) and linux (little experience) all the time, plus new languages, frameworks and editors etc. Maybe I am just too old for this :older_man:
Kaz Baig
@kbaig
Jun 15 2018 17:16
@Masd925 Never too old! Why are they making you use a mac if you've never touched one before?
Blauelf
@Blauelf
Jun 15 2018 17:16
@Masd925 vi?
Markus Kiili
@Masd925
Jun 15 2018 17:16
@kbaig Hard to say really.
@Blauelf Only one guy is using vi.
Kaz Baig
@kbaig
Jun 15 2018 17:17
@Masd925 I'd expect them to give you what you're productive with :/
Jason Luboff
@JLuboff
Jun 15 2018 17:17
@kbaig Why a new case? And its all done. It was done the other day just had to fix that issue with the Pi going to sleep or whatever. The project itself was done long ago, although I had converted it to use Node/Mongo (as opposed to PHP and a JSON file) a few months back. Still need to make so0me validation changes but eh. I'll get to it. I'd still ideally get the fucking Microsoft API to work but for now having the receptionist input meetings is fine (before she had to walk to each conference room and write on a white board)
@Masd925 Oh they;re not that difficult to get used to! Plus, most terminal commands from Linux work in OS X
Blauelf
@Blauelf
Jun 15 2018 17:18
@Masd925 It's always available if you need to ssh into some remote unix system. And I know people who claim to be most efficient with that, and sed and awk and all those tools.
Brad
@bradtaniguchi
Jun 15 2018 17:18
man giving a new guy vi/vim to work sounds unforgiving haha
Kaz Baig
@kbaig
Jun 15 2018 17:18
@JLuboff You're using a microsoft api to send calendar invites when they book the room?
Is that because people use outlook?
Jason Luboff
@JLuboff
Jun 15 2018 17:18
Oh...and you can make it talk. In terminal say I like burgers
@kbaig No, I want to use the API but can never get it to work right. If I could, I would use that to auto populate the signs. No bookings are done from the sign, strictly just for viewing
Shows if a meeting is currntly taking place and all the days meetings
Along with times, etc
Kaz Baig
@kbaig
Jun 15 2018 17:19
@JLuboff ahh I get you. That would be a lot better when you get the chance to get it to work
@JLuboff Because I'm a pc building addict and this new case just came out with insane features for the price
Markus Kiili
@Masd925
Jun 15 2018 17:20
@JLuboff Yes. Problem is mostly that I don't learn by doing things at fast pace. I learn by reading and then doing.
Jason Luboff
@JLuboff
Jun 15 2018 17:21
@kbaig I'vew had two issues with it (the API), first is the token. You have to login to get the token and I haven't figured out a way to automate that (given its been a while since I tried) and the token is only good for 1 hour I think. Second is that the conference rooms are resources, meaning they don't have a login...so..that presents an issue lol
@Masd925 Ah...I'm more of a hands on learner my self
Brad
@bradtaniguchi
Jun 15 2018 17:21
I gotta bring it up, since I read about it one time and thought is was cool AF. You can setup the entire room-booking system into google app script, integrate with user's calendar, sheets, and provide a font-end. Always wanted to try XD
Kaz Baig
@kbaig
Jun 15 2018 17:21
@JLuboff you sure it's not like a paid thing?
Jason Luboff
@JLuboff
Jun 15 2018 17:25
@kbaig Paid thing for which part?
Kaz Baig
@kbaig
Jun 15 2018 17:26
@JLuboff like you can pay for a more permanent token
idk
Jason Luboff
@JLuboff
Jun 15 2018 17:26
Oh...I've never seen anything in the API docs about that
Kaz Baig
@kbaig
Jun 15 2018 17:26
@JLuboff I'm reading the docs. I don't think that's it
Brad
@bradtaniguchi
Jun 15 2018 17:30
grrr I gotta rant, why is it I spent like 2 days working on a parser, get it working 100%, and then I get requested that is needs to suddenly work differently in 50% of the cases -_-
Kaz Baig
@kbaig
Jun 15 2018 17:32
@bradtaniguchi :rage4:
Brad
@bradtaniguchi
Jun 15 2018 17:32
god I can't spell
Jason Luboff
@JLuboff
Jun 15 2018 17:36
@kbaig Mmm...not sure if I read that exactly but looks like same ocncepot. I don't want anyone to need to login in ever, if that makes sense
I don't want any user interaction perhaps thats how I should word it
Kaz Baig
@kbaig
Jun 15 2018 17:38
@JLuboff What is the workflow exactly? Do people book conference rooms by scheduling meetings with the accounts representing each room?
Jason Luboff
@JLuboff
Jun 15 2018 17:39
@kbaig Typically, they call or email the receptionist to book it. Only a few people actually book it through Outlook (the proper way)
Kaz Baig
@kbaig
Jun 15 2018 17:40
@JLuboff Shouldn't you be able to use the API to have the rooms auto-accept meeting requests and manage everything that way then?
The receptionist could log in to the rooms through regular credentials or could use some portal you create
Jason Luboff
@JLuboff
Jun 15 2018 17:48
@kbaig I'd have to create a whole different system for that. The signs themselves are strictly for viewing. Outlook is already used to manage the Rooms so no reason to create a seperate system
Kaz Baig
@kbaig
Jun 15 2018 17:49
@JLuboff ahhh kk
jusgoose
@gusd773
Jun 15 2018 19:30
need help centering the title in the nav bar vertically dont know how
https://codepen.io/gusd773/pen/aKyepO
Christopher McCormack
@cmccormack
Jun 15 2018 19:38
@gusd773 for navs it can be easier to not set the height of the nav, and set a padding on the text element so the padding determines the size of the nav
Using flexbox is also a nice way to do it
jusgoose
@gusd773
Jun 15 2018 19:39
@cmccormack so your saying I should or should not add padding on the text?
never used flexbox
you're*
Christopher McCormack
@cmccormack
Jun 15 2018 19:43
Padding on the text. I try to avoid images as they make it a bit more difficult. You can use line-height if you don't want to use flexbox but you should definitely take a look at flexbox when you get a chance
Maybe avoid using header/p tags as well so you have more control - those have built in margins I believe
Brad
@bradtaniguchi
Jun 15 2018 19:58
damn how did vue catch up to react on github stars, haha
Christopher McCormack
@cmccormack
Jun 15 2018 20:04
it's been around longer and developers are testing it out as it gets updated maybe?
I may try it on my next projects just so I get a feel for it
Brad
@bradtaniguchi
Jun 15 2018 20:05
I was going to say it was bots or something haha
Christopher McCormack
@cmccormack
Jun 15 2018 20:06
There could be more campaigning, it's definitely possible
Reading the shit-show about it on Reddit today led me to believe a lot of developers may use these tools but don't really have a good idea of how they work or what they actually do
Brad
@bradtaniguchi
Jun 15 2018 20:15
I'll stick to my Angular corner, where no one knows what the hell is going on :P
Jason Luboff
@JLuboff
Jun 15 2018 20:27
What should I go for...React...or Vue... dun dun dun
Kaz Baig
@kbaig
Jun 15 2018 20:33
Vue is easier to pick up
From what I've heard, people who get over the learning hump with React tend to stay with React
Jason Luboff
@JLuboff
Jun 15 2018 20:37
I see I see
Christopher McCormack
@cmccormack
Jun 15 2018 20:44
People in that thread either don't know or tend to overlook that React is just Javascript, it's not even really a framework but more of a library. You don't need JSX to use it, you don't need webpack to use it, those are all tools that make it easier to build a larger project, that's all
Brad
@bradtaniguchi
Jun 15 2018 20:46
image.png
:P
Kaz Baig
@kbaig
Jun 15 2018 20:52
@cmccormack a lot of purists who hate JSX tend to come out of the woodwork on r/webdev
jusgoose
@gusd773
Jun 15 2018 20:54
anyway I can make the link text transition to black when I hover over the link button? the text only changes to black when I hover dircetly over the text.
https://codepen.io/gusd773/pen/aKyepO
Christopher McCormack
@cmccormack
Jun 15 2018 20:58
@kbaig I feel like those people haven't spent enough time with it
Brad
@bradtaniguchi
Jun 15 2018 21:10
I mean, if you spend enough time doing anything your bound to feel better about it, simply because you understand it.
jusgoose
@gusd773
Jun 15 2018 21:12
@bradtaniguchi fax b
Brad
@bradtaniguchi
Jun 15 2018 21:12
@gusd773 just to be clear I was talking about vue/react discussion, not your question haha
jusgoose
@gusd773
Jun 15 2018 21:13
lol i know man i'm just agreeing, I can finally do a crappy nav bar whereas before I didn't even know where to start
Henry
@GitHub-Henry
Jun 15 2018 21:23
@JLuboff I think market demand for React is larger than Vue or Angular
Brad
@bradtaniguchi
Jun 15 2018 21:32
Yes it is
Jason Luboff
@JLuboff
Jun 15 2018 21:56
Ya I think I'll still stick to learning React when I can
Brad
@bradtaniguchi
Jun 15 2018 21:59
I still haven't gotten around it learning it :/
Jason Luboff
@JLuboff
Jun 15 2018 22:07
@bradtaniguchi Full time jobs, am I right?
Brad
@bradtaniguchi
Jun 15 2018 22:19
Yup haha, and all my side projects go into more "exotic" stuff, at least for me (all that fancy backend tech :P)
Jason Luboff
@JLuboff
Jun 15 2018 22:20
You make it sound dirty
Brad
@bradtaniguchi
Jun 15 2018 23:01
mmmmmm that backend XD
Jason Luboff
@JLuboff
Jun 15 2018 23:01
I do much prefer backend than front end.
Brad
@bradtaniguchi
Jun 15 2018 23:10
heheh :trollface:
Jason Luboff
@JLuboff
Jun 15 2018 23:13

Can I use object destructuring inside an object? I.E

const messageData = {
            Name: approver.Name,
            Email: approver.Email,
            RequestID: approver.RequestID,
          };

Can the above be changed to

const messageData = {
            { Name }: approver,
            { Email }: approver,
            { RequestID }: approver,
          };

?