These are chat archives for FreeCodeCamp/HelpFrontEnd

14th
Apr 2018
could somebody revise my code .... it still not working
please
Ken Haduch
@khaduch
Apr 14 2018 01:16
@roxxlen - Did you check your developer console and see that there is an error? I see that you have a function named place but I don't see where it is being invoked? I also see one place where you have a mistyped word " sucess", but not sure if that's really the first problem at this point...
Brad
@bradtaniguchi
Apr 14 2018 01:16
@roxxlen Whats wrong with it?
Ken Haduch
@khaduch
Apr 14 2018 01:17
@roxxlen - you are invoking getWeather() but I think that you might want to invoke place first?
roxxlen
@roxxlen
Apr 14 2018 01:18
i tried to modify it
var latitude = null,
longitude = null;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
})};
getWeather([latitude, longitude]);
});
put this bulk of code inside the ready()
@bradtaniguchi just can't find out the difference compared with https://codepen.io/roxxlen/pen/OvaWyb
Brad
@bradtaniguchi
Apr 14 2018 01:22
@roxxlen From the code you posted it looks like you as to get the current position, which is async, then get the weather. What if it takes 10 seconds to get the position?
Your getWeather function will take in null, which is probably whats happeneing.
Move the getWeather function into the callback of getCurrentPosition
roxxlen
@roxxlen
Apr 14 2018 01:24
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
getWeather([latitude, longitude]);})};
like this ?
Brad
@bradtaniguchi
Apr 14 2018 01:25
yes, also format your code using three ` characters on lines before and after your code(thats not quotes, its the things on the ~ key)
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function (position) {
    latitude = position.coords.latitude;
    longitude = position.coords.longitude;
    getWeather([latitude, longitude]);
  });
}
roxxlen
@roxxlen
Apr 14 2018 01:26
still not work
@khaduch the console returned the longitude and the latitude
Brad
@bradtaniguchi
Apr 14 2018 01:34
idk whats not working, cuse I don't have your code. Could be anything
Ken Haduch
@khaduch
Apr 14 2018 01:35

@roxxlen - I found a couple things. One,

  • that success that was misspelled sucess somewhere in the code (I think it might have been in the getWeather function
  • within the $(document).ready() callback, instead of calling getWeather() I called place()
  • within the getWeather() function, at the top of the success function, I added a data = JSON.parse(data); because it didn't look like the data was parsed, just a string (which usually doesn't seem to be the case, but that's what I observed and corrected with that parse call)
  • instead of $(".city") you have an ID value, so change it to $("#city") for storing the city information.

then it seems to be working up to that point.

Ken Haduch
@khaduch
Apr 14 2018 01:43
@roxxlen - with your latest version (which I just reloaded) fix the sucess misspelling in getWeather and change the .city to #city when you are updating the city, and it is working then.
roxxlen
@roxxlen
Apr 14 2018 01:45
@khaduch could you please paste the code inside $(document).ready(function(){}) ?
cause i modified so many places
Ken Haduch
@khaduch
Apr 14 2018 01:46
@roxxlen - Just hold on - let me reload your latest version if you have saved it and I'll take another look.
Ken Haduch
@khaduch
Apr 14 2018 01:53
@roxxlen - make sure that you have that data = JSON.parse(data); in there for the getWeather success function. And change the $(".city") to $("#city") and I think that it should work to update the city and the temnperature value.
although I might be confused about which version I have opened if you are / were making changes and saving. I should just fork the pen that I have with the changes and let you compare it to what you have.
roxxlen
@roxxlen
Apr 14 2018 01:55
@khaduch i just want to know the version you said it worked ...
@khaduch the return of this api already is an object
no need worry to parse it
Ken Haduch
@khaduch
Apr 14 2018 02:00
@roxxlen - right now it doesn't seem to be working... let me save a fork of an earlier version that I thought was worknig and you can try it. try this one
roxxlen
@roxxlen
Apr 14 2018 02:02
@khaduch yes! it worked!
Ken Haduch
@khaduch
Apr 14 2018 02:02

it doesn't seem to be working anymore, though, at least not on my system. Not sure if I have a temporary local problem? And I did have to parse it - it was coming back as a string? I know that it doesn't seem to usually work that way but it appeared to be the

I just had one of them kick into gear and run, so I'm not sure why the delay was happening?

where is the documentation on the simple-weather API?
roxxlen
@roxxlen
Apr 14 2018 02:05
@khaduch you can check this one, open the console and see it's a object
https://codepen.io/roxxlen/pen/OvaWyb
Ken Haduch
@khaduch
Apr 14 2018 02:08
@roxxlen - I tried opening that page and it seems to be stuck on the "Locating" screen, maybe the same problem that I was havin with my version... I'm standing by. It does look like t hey are just accessing it as an object in that version. But I haven't seen it run.
Okay, I pasted it in a different browser and it worked fine - no confusion about the object? That's rather strange. Because your original version was definitely not handling it as an object?
roxxlen
@roxxlen
Apr 14 2018 02:13
@khaduch no confusion, even though it's written as json, actually it's an object, these codes is different with my last project, even though they are using the smailiar api style
Ken Haduch
@khaduch
Apr 14 2018 02:21
@roxxlen - oh, I just spotted another typo - in your current version instead of dataType: 'json' you have dateType: 'json' - so instead of treating it as JSON data, it's probably defaulting to a string, which looks like a JSON string... that is that you have datE instead of datA - "E" instead of "A" (should be lowercased, of course) And that is in the getWeather $.ajax() call.
roxxlen
@roxxlen
Apr 14 2018 02:24
@khaduch haha, either right or wrong, it's still works..
Ken Haduch
@khaduch
Apr 14 2018 02:24
@roxxlen - with dataType it then returns the data as an object, not a string, so then there is no need to JSON.parse it...
roxxlen
@roxxlen
Apr 14 2018 02:30
@khaduch many thanks, though still have a lot of minor things to fix
CamperBot
@camperbot
Apr 14 2018 02:30
roxxlen sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3877 | @khaduch |http://www.freecodecamp.org/khaduch
Dhaval Vira
@dhavalveera
Apr 14 2018 02:37
any PHP Developer here ?
TonyRednil
@TonyRednil
Apr 14 2018 04:57
for the Profile Lookup test on JavaScript is this even on the right track?
for (var i=0; contacts[i].hasOwnProperty(firstName); i++) {
if (contacts[i].hasOwnProperty(prop)) {
return contacts[i].prop;
} else {
return "No such property";
}
return "No such contact";
}
Markus Kiili
@Masd925
Apr 14 2018 05:16
@TonyRednil You should loop array contacts like any array. Don't use hasOwnProperty on the loop condition.
TonyRednil
@TonyRednil
Apr 14 2018 05:18
@Masd925 I don't understand what you mean.
Markus Kiili
@Masd925
Apr 14 2018 05:19
@TonyRednil Do you know how to loop over array indices?
Make a simple for loop over array contacts.
TonyRednil
@TonyRednil
Apr 14 2018 05:21
I know how to loop over array variables but are you saying that about the firstName property?

Did you mean to do something like this?

for (var x = 0; x < contacts.length; x++){
if (contacts[x].firstName === firstName) {
if (contacts[x].hasOwnProperty(prop)) {
return contacts[x][prop];
} else {
return "No such property";
}
}
}
return "No such contact";

Markus Kiili
@Masd925
Apr 14 2018 05:22
@TonyRednil Yes.
That else is optional there.
TonyRednil
@TonyRednil
Apr 14 2018 05:25
So to make sure I am understanding this right basically I shouldn't use the .hasOwnProperty operation on the firstName value as it is just checking if the value has a firstName value not if it has the specific one I'm looking for right? Also, how is that else optional? Isn't it needed to prevent the computer from skipping over return "No such property"?
Markus Kiili
@Masd925
Apr 14 2018 05:26
@TonyRednil If there is no property present the code execution will proceed to return "No such property"; even if you remove the else clause.
Because it is there after the if block.
TonyRednil
@TonyRednil
Apr 14 2018 05:27
@Masd925 then when would I need to use the else code?
Markus Kiili
@Masd925
Apr 14 2018 05:29
@TonyRednil Elses are usually there for a reason, but here when returns exit the function on different parts of the if structure, elses happen to be optional (not wrong).
TonyRednil
@TonyRednil
Apr 14 2018 05:29
Ok thanks.
MROB0T
@MROB0T
Apr 14 2018 05:46

hey i need help with my project im working on currently. Im trying to make my website have the ability to scroll but once i gave it that it has like 5 other scroll bars and I dont know how to get rid of it.

https://codepen.io/MR0B0T/pen/VbqQde

Brad
@bradtaniguchi
Apr 14 2018 05:47
@MROB0T I feel like *{ overflow: scroll} is the main problem. Your putting overflow:scroll to everything!
MROB0T
@MROB0T
Apr 14 2018 05:48
@bradtaniguchi ill try something new lets see if it works
Brad
@bradtaniguchi
Apr 14 2018 05:49
Usually you want to start from what you DO want to scroll.
That has the overflow rules on it, and needs a height so it can know when it needs to "scroll"
MROB0T
@MROB0T
Apr 14 2018 05:51
@bradtaniguchi I just made it easier and put it on auto
sorry wrong one this is the updated one
Brad
@bradtaniguchi
Apr 14 2018 05:52
Still got double scrollbars, this might be easier but it doesn't solve any problems
Hmmmm idk why its not showing you the updated version i just did?
well anyways i changed it to overflow:auto; which fixed it for me so thanks @bradtaniguchi
CamperBot
@camperbot
Apr 14 2018 05:53
mrob0t sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
:cookie: 459 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
Brad
@bradtaniguchi
Apr 14 2018 05:54
I mean if your satisfied with the results ok. But Id consider it a workaround
MROB0T
@MROB0T
Apr 14 2018 05:56
@bradtaniguchi why do you say that?
is there a better way?
Brad
@bradtaniguchi
Apr 14 2018 05:56
Your adding scroll: auto to all elements in the page just so 1 element can scroll?
MROB0T
@MROB0T
Apr 14 2018 05:57
pretty much
Brad
@bradtaniguchi
Apr 14 2018 05:58
I mean optimally youd want a scrollbar to appear on 1 element only when necessarily. But you gotta find the element and set it all up properly
also I checked the second link, I still get 2 scrollbars
MROB0T
@MROB0T
Apr 14 2018 05:59
originally i wanted the part with the background just to scroll but idk how to do that so i did what i can
oh wow lol your right when i show it like this it looks really bad
i just realized that
hmmm... ill try to fix it
Brad
@bradtaniguchi
Apr 14 2018 06:02
If things are getting to hard to figure out, I normally remove all scroll from everything and start with the element I want to scroll
devtools helps the most once you turn everything off
kerafyrm02
@kerafyrm02
Apr 14 2018 06:34
Anyone need help?
Ehsan Shadmehri
@ehsansh
Apr 14 2018 06:44
Hi. I am using vue-router in my vue project. but when I use the build folder in express server the links are not opened directly. What is the solution?
Brad
@bradtaniguchi
Apr 14 2018 06:45
@ehsansh You still having trouble with that issue? You got your project on github or anything? I'm free now so I can actually check it out haha
Ehsan Shadmehri
@ehsansh
Apr 14 2018 06:53

@bradtaniguchi Thanks a lot! Yes I can not find the solution.
I have not the codes on github but this is the project I have used : https://github.com/anaida07/MEVN-boilerplate
I have only added these two lines of code to server/src/app.js file:

const path = require('path')    // <-- added
app.use(express.static(path.join(__dirname, '../../client/dist')))    // <-- added

I made the build folder and when I run npm start in server directory then the project works great. But direct links can not be opened. I do not know whether it should be solved in express or vue.

CamperBot
@camperbot
Apr 14 2018 06:53
ehsansh sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
:cookie: 460 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
Brad
@bradtaniguchi
Apr 14 2018 06:54
@ehsansh What do the links look like? The links are suppose to go thru vue right?
Ehsan Shadmehri
@ehsansh
Apr 14 2018 06:57
@bradtaniguchi Yes. When I open the home page it works fine then I could navigate to links .
Brad
@bradtaniguchi
Apr 14 2018 06:59
What do the links look like? It sounds like they make a request to express for the route, rather than vue
Simon Cordova
@gbsimon87
Apr 14 2018 07:00
Hey guys, good evening.
Was wondering if anyone here had any React Native experience?
abraham anak agung
@padunk
Apr 14 2018 07:14
@gbsimon87 Hi, yes.
Ehsan Shadmehri
@ehsansh
Apr 14 2018 07:52
@bradtaniguchi Yes, it is. there is a file in src/router/index.js for different urls but it only works when we are developing and are not using build folder.
Brad
@bradtaniguchi
Apr 14 2018 07:53
Yea that doesn't seem correct. Idk how your doing your links or hour vue routes work, but your links should route your within vue, and not call the backend.
alpox
@alpox
Apr 14 2018 08:21
@ehsansh I did what you just described, and it works here. Or maybe i got confused by your description of direct link?
Ehsan Shadmehri
@ehsansh
Apr 14 2018 08:23
@alpox Please open new browser tab and put this http://localhost:8081/login in the address bar and hit enter does it work?
alpox
@alpox
Apr 14 2018 08:24
@ehsansh Well, i have no login route :D but now i know what you mean.
Let me test
Okay i see the problem
@ehsansh The thing is, that this boilerplate is built so that server and client are decoupled - means that it is thought for the client code to end up on another server than the server code
So the server now does not notice that it has to deliver the html files on that specific route
Ehsan Shadmehri
@ehsansh
Apr 14 2018 08:27
@alpox You are right but before deployment we should make the build folder, right?. So how should we use the build folder with express and all the codes that we have written for back-end?
alpox
@alpox
Apr 14 2018 08:29

@ehsansh Well, usually you would create another express server just to run the vue app.
If you want to use the one you already have now (Like you started to), you have to add this code:

app.get("*", (req, res) => {
    res.sendFile(path.join(__dirname, "../../client/dist/index.html"));
});

To the server/src/app.js file (Right before the app.listen)

This just takes all routes which were not matched before through other routes (Through the *) and sends the index.html back so that vuejs can do its thing
@ehsansh But, be aware, that with this setup, vuejs and the express app should never try to have overlapping routes
Means, you cannot go to a route /posts when there is also an api endpoint of express at /posts. How should the server distinguish?
Ehsan Shadmehri
@ehsansh
Apr 14 2018 08:47
@alpox Thanks. This is a nice solution.Although after adding the code you suggested it gives an error for me: Uncaught SyntaxError: Unexpected token <
CamperBot
@camperbot
Apr 14 2018 08:47
ehsansh sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1601 | @alpox |http://www.freecodecamp.org/alpox
Ehsan Shadmehri
@ehsansh
Apr 14 2018 08:48
@alpox What is the best practice for using the build folder? How should the express server be for serving the build folder?
alpox
@alpox
Apr 14 2018 08:48
@ehsansh Hmm we did not add that code... that sounds more like a problem with the client build
@ehsansh you usually serve the index.html as above. And you have an asset folder or something similar in the build folder where you point the express.static to
Ehsan Shadmehri
@ehsansh
Apr 14 2018 08:52
@alpox Thanks a lot. So we do not manage all different routes in express. We configure them just by vue-router. Is this the best practice?
CamperBot
@camperbot
Apr 14 2018 08:52
ehsansh sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
api offline
alpox
@alpox
Apr 14 2018 08:53
@ehsansh The client side routes are handled by vue-router, yes
Ehsan Shadmehri
@ehsansh
Apr 14 2018 08:58
@alpox the problem right now is Uncaught SyntaxError: Unexpected token <
alpox
@alpox
Apr 14 2018 08:59
@ehsansh on the server or in the browser?
Ehsan Shadmehri
@ehsansh
Apr 14 2018 08:59
In the browser when I open the home page http://localhost:8081/
alpox
@alpox
Apr 14 2018 09:00
@ehsansh Try to run npm run build again from the client folder
Ehsan Shadmehri
@ehsansh
Apr 14 2018 09:01
@alpox Nothing changes
alpox
@alpox
Apr 14 2018 09:02
@ehsansh Usually the error tells where its coming from. Is there any more information shown about it?
Ehsan Shadmehri
@ehsansh
Apr 14 2018 09:06
error.png
alpox
@alpox
Apr 14 2018 09:07
Interesting, in all three. Where does it lead you when you click right down on app....
Ehsan Shadmehri
@ehsansh
Apr 14 2018 09:08
error1.png
alpox
@alpox
Apr 14 2018 09:08
Yea that looks pretty wrong
Where did you put the code i showed you
Ehsan Shadmehri
@ehsansh
Apr 14 2018 09:10
const path = require('path')
app.get("*", (req, res) => {
    res.sendFile(path.join(__dirname, "../../client/dist/index.html"));
});
sequelize.sync().then( ()=>{
    app.listen(config.port)
})
alpox
@alpox
Apr 14 2018 09:11
Is express.static registered before this? And all other routes?
Ehsan Shadmehri
@ehsansh
Apr 14 2018 09:12
No I have not written express static
alpox
@alpox
Apr 14 2018 09:13
You kinda need it :D
app.use(express.static(path.join(__dirname, '../../client/dist')))
This has to be set before the "*" route
Otherwise, the browser cannot access the javascript files which are attached to the html
So what happened was, that because express did not find any such file (The javascript files), it responded with the index.html file instead because the "*" route matched instead.
Ehsan Shadmehri
@ehsansh
Apr 14 2018 09:15
@alpox Wow. Now it works great. Thank you very very much
CamperBot
@camperbot
Apr 14 2018 09:15
ehsansh sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
api offline
alpox
@alpox
Apr 14 2018 09:15
@ehsansh np :)
UnorthodoxThing
@UnorthodoxThing
Apr 14 2018 10:03
Does anyone know how to toggle the nav bar menu when selected??
This is my progress thus far...
https://codepen.io/UnorthodoxThing/pen/oENvEX
Raunak Hajela
@raunakhajela
Apr 14 2018 12:26
@UnorthodoxThing you want to make a toggle menu for mobile?
UnorthodoxThing
@UnorthodoxThing
Apr 14 2018 12:35
@raunakhajela For mobile and website would be great! :D
kerafyrm02
@kerafyrm02
Apr 14 2018 12:54
Anyone need help?
UnorthodoxThing
@UnorthodoxThing
Apr 14 2018 13:28
@kerafyrm02 me...! :S
John Kennedy
@johnkennedy9147
Apr 14 2018 13:50
Hi all, we've recently added a lot of groups to the Study Group Directory, https://study-group-directory.freecodecamp.org/, but I am expecting there will still be more missing. If you know of any that are not present could you raise a PR to add them, the directory has its own repository. If prefer you can comment on freeCodeCamp/study-group-directory#68 and I will do PRs for the missing groups. Or message me.
LydaTech
@lydatech
Apr 14 2018 13:53
@johnkennedy9147 problem is most of the groups only have 1 admin and they disappear then no one can join. I wish there was a general admin who could take back dead groups
Helio Goncalves
@srlhyo
Apr 14 2018 14:00
Hi all, is there anyone who uses VIM?
Nazar
@IsaakNazar
Apr 14 2018 14:00
I'm on pomodoro project, I'm using setTimout to pause when pause button is clicked, but setInterval also does it, so which one I have to use?
Helio Goncalves
@srlhyo
Apr 14 2018 14:11
no vim lovers over here?
Nazar
@IsaakNazar
Apr 14 2018 14:14
Violently Intelligent Machine
Helio Goncalves
@srlhyo
Apr 14 2018 14:21
ahhah
do you like Vim @IsaakNazar
?
do you use it?
Nazar
@IsaakNazar
Apr 14 2018 14:22
@srlhyo nope, I've never used it
Helio Goncalves
@srlhyo
Apr 14 2018 14:24
ok then
you may be able to help me anyway
if you use emmet code
or zen code, in your text editor
do you ?
basically, when I am writing in between tags and then I want quickly jump to the next line and keep typing
how do I do it efficiently?
I haven't been able to master it yet. I still have to use the arrows to go to the end of the line, just after the closing tag, and then press enter to go to the next line.
it feels awkward doing that.
do you understand what I mean? @IsaakNazar
Stephen James
@sjames1958gm
Apr 14 2018 14:47
@srlhyo I have used vim, but I don't generally for code editting
@IsaakNazar If you used setInterval to start your timer, probably should use clearInterval (although internally it might not matter)
Nazar
@IsaakNazar
Apr 14 2018 14:53
@sjames1958gm got it, thx
CamperBot
@camperbot
Apr 14 2018 14:53
isaaknazar sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9200 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Apr 14 2018 14:55
@srlhyo ctrl-e goes to end of line for me, may depend on platform or key bindings
Helio Goncalves
@srlhyo
Apr 14 2018 15:01
oh
@sjames1958gm
thanks for that
let me just try
cause I end up using to many keystrokes to achieve one thing
it's wasting
plus, I always see the programmers in their tutorials go from the current line to the next one really quick
so I thought, there must be a better way.
thanks a lot @sjames1958gm
CamperBot
@camperbot
Apr 14 2018 15:03
srlhyo sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9201 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Tony Hudson
@ngohungphuc
Apr 14 2018 15:06
Hi everyone is there anyway to refactor validation to be reusable component for input in this example https://jsbin.com/cuyuze/11/edit?html,css,js,output
Helio Goncalves
@srlhyo
Apr 14 2018 15:07
@ngohungphuc I am not that experience yet.
Sorry.
I have you used vim before?
Tony Hudson
@ngohungphuc
Apr 14 2018 15:08
?
what do you mean
Helio Goncalves
@srlhyo
Apr 14 2018 15:09
hah a
have you used Vim before?
VIM - a text editor
kerafyrm02
@kerafyrm02
Apr 14 2018 15:22
i use vim
Helio Goncalves
@srlhyo
Apr 14 2018 15:23
wicked!
yupiiiii
that's amazing
@kerafyrm02
kerafyrm02
@kerafyrm02
Apr 14 2018 15:23
lol.
Helio Goncalves
@srlhyo
Apr 14 2018 15:23
let me pull you to a private chat, if it's ok with you
kerafyrm02
@kerafyrm02
Apr 14 2018 15:23
? ok
xing
@MingXingTeam
Apr 14 2018 15:25
I have a problem. have you ever used eslint-plugin-compat ?? https://github.com/amilajack/eslint-plugin-compat
It cannot check forEach in low IE browsers such as IE 8
Ken Haduch
@khaduch
Apr 14 2018 15:55
@MingXingTeam - you might already know this, but check the Mdn documentation and see they have compatibility info at the bottom of the page. They also have code (they call it “polyfill”) that can be used in place of the JS method if you need it. There is also a site http://caniuse.com that shows supported features in different browser versions.
Maybe that won’t address your question but it came to mind...
coderNewby
@coderNewby
Apr 14 2018 16:05
thanks @DarrenfJ for the tip :D
CamperBot
@camperbot
Apr 14 2018 16:05
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2462 | @darrenfj |http://www.freecodecamp.org/darrenfj
Ehsan Shadmehri
@ehsansh
Apr 14 2018 16:37

@alpox I found another solution in vue router docs https://router.vuejs.org/en/essentials/history-mode.html
Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser. Now that's ugly.
Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. Beautiful, again!

I just want to share this solution with other members :smile:

alpox
@alpox
Apr 14 2018 16:40
@ehsansh Thats not really another solution, thats exactly the same :D
But its surely good to have an official reference for it
Ehsan Shadmehri
@ehsansh
Apr 14 2018 16:41
Really? I thought I found something different :D
alpox
@alpox
Apr 14 2018 16:42
Nope :D thats what we did
The "*" route is what they call a catch-all fallback route
And it does serve that index.html as they tell
The history mode was the one which already messed up your app in production - if you used hash, that problem would not occur
Ofc. the hash mode is not nice to have
Ehsan Shadmehri
@ehsansh
Apr 14 2018 16:50
@alpox Thanks you suggested the solution that vue members have in their docs.
CamperBot
@camperbot
Apr 14 2018 16:50
ehsansh sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1602 | @alpox |http://www.freecodecamp.org/alpox
Sandis Upmalis
@upmalisan
Apr 14 2018 16:58
Hello! is someone from you on freecodecamp beta version?
Ken Haduch
@khaduch
Apr 14 2018 17:37
@upmalisan - ask your question and we’ll help
Teo
@todorare
Apr 14 2018 17:49

Hey all! I'm trying to add a transition effect to a Div elemement that contains a quote. Until now, I've managed to make it work during the initial page load.

This is the element's CSS:

quote {

color: black;
opacity: 0;
transition: all 3s;
min-height: 140px;
}

And this is part of the JavaScript function that targets the element.

quote.innerHTML = myJson.quote;
author.innerHTML = myJson.author;
quote.style.opacity = 1;

The problem is, I can't figure out a way for it to work everytime I press the button that gets a new quote. I tried adding "quote.style.opacity = 0" at the beginning of the function, but I guess that doesn't get affected by the transition property.

Nazar
@IsaakNazar
Apr 14 2018 17:57
codepen
when user pressesstart after pause button the timer should continue, but mine is restarting again, any help pls!
Teo
@todorare
Apr 14 2018 18:04
@IsaakNazar It keeps restarting because of the start() function
You need a way for the start function to check the remaining time at the point you press the start button
I'm quite the beginner myself though, so someone else can probably help you more!
Nazar
@IsaakNazar
Apr 14 2018 18:12
@todorare thx
CamperBot
@camperbot
Apr 14 2018 18:12
isaaknazar sends brownie points to @todorare :sparkles: :thumbsup: :sparkles:
:cookie: 283 | @todorare |http://www.freecodecamp.org/todorare
Teo
@todorare
Apr 14 2018 18:13
No problem
zootechdrum
@zootechdrum
Apr 14 2018 18:16
goooood morning
Quick question
I am finishing up my random quote generator
however I cant seem to copy the quote that is currently on the screen to twitter. For whatever reason it defaults to the quote that appears first.
by first I mean the quote that is set in html not the new quote that is generated when you click new quote
Teo
@todorare
Apr 14 2018 18:21
@zootechdrum Take this with a grain of salt, since I'm at the exact same point, but I think this has to do with the HTML render
So, if you don't have an initial quote, you won't get a quote at all
When you alter the HTML through JavaScript you don't actually change the page source
zootechdrum
@zootechdrum
Apr 14 2018 18:22
@todorare interesting
makes sense
so google how to change the actual page source lol
or
Teo
@todorare
Apr 14 2018 18:22
So, if you view the page source after you click the button, you'll see that you get the initial quote you set through HTML
You can't do that
If you could, you could actually a website's source
!!!
change a website's source HTML that is
zootechdrum
@zootechdrum
Apr 14 2018 18:23
get new quote that is stored in the variable
ah then i will set it through a variable
Teo
@todorare
Apr 14 2018 18:23
When you get the new quote store it in a variable and then access it from there when you want to tweet it
zootechdrum
@zootechdrum
Apr 14 2018 18:24
yeah
Teo
@todorare
Apr 14 2018 18:24
Yeah, I think that should work
zootechdrum
@zootechdrum
Apr 14 2018 18:24
great thank you for helping me think through the logic
Teo
@todorare
Apr 14 2018 18:25
No worries, it's helping me at the same time
If you find a way to change a website's source HTML through JavaScript, let me know ;)
It would be useful!
Stephen James
@sjames1958gm
Apr 14 2018 18:29
@zootechdrum You can also update the href in your twitter link when you update your quote in the DOM
$("a").attr("href","https://twitter.com/intent/tweet?text="+q1[randomIndex]);
Do that in your random() function
zootechdrum
@zootechdrum
Apr 14 2018 18:31
@sjames1958gm looking into it
now
wow i just got the logic so once the button is clicked the a link changes every time
genius
Stephen James
@sjames1958gm
Apr 14 2018 18:33
Just like you change the textContent
zootechdrum
@zootechdrum
Apr 14 2018 18:36
@sjames1958gm just did the happy dance
thanks man @todorare Hey try what he suggested it works
CamperBot
@camperbot
Apr 14 2018 18:36
zootechdrum sends brownie points to @todorare :sparkles: :thumbsup: :sparkles:
:cookie: 284 | @todorare |http://www.freecodecamp.org/todorare
zootechdrum
@zootechdrum
Apr 14 2018 18:37
well at-least the way my function is set up it works. Your's might be different but it could give you a great idea on how to approach it.
Teo
@todorare
Apr 14 2018 18:37
@zootechdrum I will when I reach that point, which should be quite soon
It does sound good, yeah
zootechdrum
@zootechdrum
Apr 14 2018 18:38
havea . a @todorare can i see your codepen?
Teo
@todorare
Apr 14 2018 18:40
Sure, but it doesn't even have the Quote Generator at this point
I'm coding on Visual Studio Code and then uploading to Codepen
It's this anyway
I can let you know when I upload the Quote generator if you want
zootechdrum
@zootechdrum
Apr 14 2018 18:43
@todorare nice portfolio
Very responsive
great use of bootstrap!
Teo
@todorare
Apr 14 2018 18:45
Thanks!
zootechdrum
@zootechdrum
Apr 14 2018 18:45
have a great weekend
all
Teo
@todorare
Apr 14 2018 18:45
I'm trying to avoid using Bootstrap at this point though
It's good to know your way without using a framework as well
You too
Bjorn van de Peut
@bjorno43
Apr 14 2018 18:51
I agree. Though using a framework is almost always the best option. Frameworks have the benefit of being maintained by a community. So they're much less likely to contain bugs or security issues. They also ensure continuity. Meaning that an employer is independent of his/her employees. If an employee leaves for whatever reason, other devs formilliar with the framework are easily able to take over.
Teo
@todorare
Apr 14 2018 18:53
It probably is, but a good developer should be able to work with pure CSS too
Bjorn van de Peut
@bjorno43
Apr 14 2018 18:57
Of course. If a dev becomes dependent on a framework it's definitely a bad sign. What if the framework becomes obsolute and is no longer maintained?
zootechdrum
@zootechdrum
Apr 14 2018 19:51
@todorare yeah. I am trying to get more involved with flexbox
seemse to be all the rage with the kids
Teo
@todorare
Apr 14 2018 19:51
Have a look at CSS Grid as well
Really helpful
mstellaluna
@mstellaluna
Apr 14 2018 19:56
@bjorno43 :wave:
abe312
@abe312
Apr 14 2018 20:09
can we submit assignments with jsfiddle link too? codepen loading screen is irritating me..
Bjorn van de Peut
@bjorno43
Apr 14 2018 20:23
@mstellaluna :wave:
John Kennedy
@johnkennedy9147
Apr 14 2018 20:40
@lydatech there is a group chancellor who should be added to any freeCodeCamp group and the settings for the group set so any member can add others, but obviously not everyone does this. I think a group member can claim admin role if there isnt one, not sure if anything can be done if the admin just isnt managing the group anymore but is still set as an admin.
Gulsvi
@gulsvi
Apr 14 2018 20:56
@abe312 Codepen isn't required - any platform where people can run the code and look at it publicly will work fine. I love codepen though - use it all the time, and not sure what loading screen you're referring to. Maybe we can help with that.
abe312
@abe312
Apr 14 2018 20:57
the page gets stuck at "loading..." for hours. That isn't a problem with jsfiddle.
Gulsvi
@gulsvi
Apr 14 2018 20:59
@abe312 I've only seen that happen when there's a problem with my javascript
If you want to link us to the codepen that's doing that, we can take a closer look.
abe312
@abe312
Apr 14 2018 21:02
It's not specific to a particular page. I think when we make changes too quickly and aren't pro customers, they lock us down for a couple of hours. (ALL the pages, mine and other pens stop working for that time). I had this issue when I was creating my portfolio(https://codepen.io/abe312/pen/vRvqeY) , so I end up editing everything on jsfiddle and then copy pasting the specific sections on codepen before submitting lol
Gulsvi
@gulsvi
Apr 14 2018 21:05
@abe312 Hmm, yeah that loads quickly for me. I'm not familiar with any throttling and use codepen all the time. Maybe something to do with your network or perhaps clearing browser cache and cookies will help. You could also go to codepen settings and only have it update the live preview when you click a "run" button, similar to JS Fiddle.
Settings -> Behavior -> Auto-Updating Preview (make sure it's disabled). Looks like you're doing that already... so not sure what's up.
abe312
@abe312
Apr 14 2018 21:07
yeah I'm doing that already. It's probably throttling, I'm not really sure.
Bjorn van de Peut
@bjorno43
Apr 14 2018 21:08
You could also use my live Pair Programming app if you want: https://www.icecub.nl/PairProgramming Works like jsFiddle / Codepen, but you can give the URL that's being generated to others and they'll join your session allowing you to code together at the same time :P
As long as you keep the URL around, you'll be able to resume your work anytime you want
abe312
@abe312
Apr 14 2018 21:10
This feature is also there in jsfiddle :smile:
Bjorn van de Peut
@bjorno43
Apr 14 2018 21:10
Ye and it sux ass. It's based on TogetherJS that's no longer maintained and full of bugs
oh. Didn't know about that.
Bjorn van de Peut
@bjorno43
Apr 14 2018 21:12
I do. We've been messing around with Operational Transformation for FCC to build something like it for our members. TogetherJS was one of the first libraries we had in mind untill we discovered the issues with it and learned it was no longer maintained
The app I just gave was our latest attempt to it. But in the end it proved to be too limited for what we had in mind and put the project on hold for now. It works fine as a collaborative code pen though, so I kept it around
abe312
@abe312
Apr 14 2018 21:17
If you add jsfiddle type of theme, then it's gonna rock :+1:
Bjorn van de Peut
@bjorno43
Apr 14 2018 21:30
Perhaps but it's not my intention to have that app spread out like wildfire, lol. It uses Firebase in the background and that's not a free database if too many edits per month take place. So if it gets too popular, it'll just shut down till the next month. Not to mention that copying someone's design might get you into trouble with copyrights.
abe312
@abe312
Apr 14 2018 21:31
Not if the design itself is copied from somewhere lmao
Terence Mangram
@terensu-desu
Apr 14 2018 21:32
Anyone know how to get a React app to preview in a link, like for example when posting a link on Facebook it shows a preview of the link?
abe312
@abe312
Apr 14 2018 21:32
are you using this? https://firepad.io/
@terensu-desu you'll have to first scrap the site and then make a preview.
Bjorn van de Peut
@bjorno43
Apr 14 2018 21:40
@abe312 Ye I used Firepad for that one
Terence Mangram
@terensu-desu
Apr 14 2018 21:41
@abe312 Yesss, thanks! I also found it, Open Graph Protocol. http://ogp.me/
CamperBot
@camperbot
Apr 14 2018 21:41
terensu-desu sends brownie points to @abe312 :sparkles: :thumbsup: :sparkles:
:cookie: 343 | @abe312 |http://www.freecodecamp.org/abe312
Gaurav
@gauravmagan
Apr 14 2018 22:34
arcgis
hello can you guys know this
i know its an api but i want to ask you developers about the api content
Ramon Cardenas
@Ramoncarden
Apr 14 2018 22:54
Can anyone help me out with this? Its an etch a sketch and everything is working fine but i would like for the line drawing to work faster. Is there a method to do this or should i just reduce the size of my canvas? Thanks in advance.
https://codepen.io/Ramoncarden/pen/OvjbXN
Moisés Man
@moigithub
Apr 14 2018 22:59
.. instead of doing ++ (which increment by 1)
do +10 or higher @Ramoncarden
Roge
@RogeMateos
Apr 14 2018 23:07
hello anyone using visual code
LydaTech
@lydatech
Apr 14 2018 23:09
VS Code. Yep