@danydin
Object.keys() gives an array - you'll need to assign it to a variable or console.log it:const val = {
id: 0,
imageLink: "https://s3.amazonaws.com/freecodecamp/funny-cat.jpg",
altText: "A white cat wearing a green helmet shaped melon on its head. ",
codeNames: ["Juggernaut", "Mrs. Wallace", "Buttercup"]
};
const valKeys = Object.keys(val)
console.log(valKeys); // ["id", "imageLink", "altText", "codeNames"]
@dhavalveera web servers use
http:// not file://. Change the path to your image to use url(images/apple-mac-new.jpg)
I tried url("images/apple-mac-new.jpg") but it is not working @newmoon
it seems that you haven't seen my Code, but anyway I got my solution
@GitHub-Henry
hey guys! I'm doing this task:
Could you please tell me which solution is better and why?
function findLongestWordLength(str) {
let longest = str
.split(' ')
.sort((a, b) => a.length < b.length);
return longest[0].length;
}or this
function findLongestWordLength(s) {
return s.split(' ')
.reduce(function(x, y) {
return Math.max(x, y.length)
}, 0);
}
@TCzechowski Better in terms of performance or readability? You'll have to be more specific.
I was just trying to solve the task and I did it by using the first solution, but every time I complete a task at FCC I just check the hints to see if I can do it better way and there was the #2 solution.
But I guess the second solution is better because it doesn't create an unnecessary new variable?
@TCzechowski Speaking strictly based on algorithm complexity, second one is better because
Often creating extra variables is not a big factor while comparing algorithms.
.reduce() is just a for loop underneath which has complexity of O(n). Whereas .sort()has complexity of O(nlogn) which is greater.Often creating extra variables is not a big factor while comparing algorithms.
Creating variables and such comes under space complexity and ofcourse you'd consider that in real world scenario but here the program taking some extra bits wont hurt anyone.
@ezioda004 So, for example, if I had a job interview task to do, I would get more points by doing this the second way instead of the first one? :)
@TCzechowski Absolutely! Often in interviews they expect you to reiterate your solution to make it faster or "better".
I just want to know which one would be more appreciated by my future employer
Okay, thanks!
FYI you can make it even better.
how?
.split() is a loop itself. Can you think of solving it with only 1 loop?
Dont worry about using
.reduce() or HOF's, using for loop is completely fine.
@ezioda004
Dang, can't think of anything right now. I think I'm not that advanced yet. But do you mind showing me that solution?
Dang, can't think of anything right now. I think I'm not that advanced yet. But do you mind showing me that solution?
@TCzechowski
function findLongestWordLength(str){
let max = -Infinity; // Assigning the smallest possible value to max
let current = 0;
for (let i = 0; i < str.length; i++){
if (str[i] === " "){ // If the string has reached a whitespace, then the previous word has ended so we compare its length to the max
max = Math.max(max, current);
current = 0;
}
else { //Otherwise, increase inc the count of letter by 1
current++;
}
}
return Math.max(max, current);
}
@ezioda004
Oooh, that's clever. But I guess it's better performance-wise, but when it comes to readability it's a bit worse than using reduce?
Oooh, that's clever. But I guess it's better performance-wise, but when it comes to readability it's a bit worse than using reduce?
@TCzechowski Thats a good question - its kinda opinionated. for loops are universal across all languages so its easier to read at first glance but
.reduce() is declarative in nature so some people prefer that. IMO both are fine for readability but .reduce() is better for maintaining code purpose.
Can someone help me identify the tech implemented in this site https://icoholder.com/en/thefund-io-26513.
I wan't to create the rating system present in the website, the multi dimensional animated element depicting different ratings for team, vision, activity etc. What specific technology should i learn to do this, Is there a JS Library to do this particular kind of thing.
NB- I'm good with CSS and I can do basic JS Stuff.
I wan't to create the rating system present in the website, the multi dimensional animated element depicting different ratings for team, vision, activity etc. What specific technology should i learn to do this, Is there a JS Library to do this particular kind of thing.
NB- I'm good with CSS and I can do basic JS Stuff.
I tried url("images/apple-mac-new.jpg") but it is not working @newmoon
@dhavalveera To help debug, we'd have to see your dev environment. I'm guessing you're trying to load index.html from a file:// path instead of http:// which will cause some challenges depending on security + OS settings
@ezioda004 man I am struggling with how to contribute to FreeCodeCamp, and to open source in general. There are +5000 open PR's in your repo, so I don't see how another more could be actually useful. Any thoughs?
@kamatheuska make useful PRs :)
find a stub, see if there is a PR for it
even if there is you can still submit modifications that can later be merged
There are loads of guides/challenges that can use some improvement. Many of the PRs submitted will be rejected due to poor formatting/grammar/usefulness
Yeah, I have read about that.
@kamatheuska I'd suggest what @cmccormack suggested too. Example check this stub out. You can write an article on this method. Note: write in your own words rather than copy-pasting since we dont accept copied contents.
Ok, thanks for the tips! :)
Hi guys, I'm having issues injecting mobx stores into my components in an app I'm building. I've been trying to figure it out all day but I'm just not seeing it. Anyway here's my store:
import {
observable,
flow,
configure,
action,
} from 'mobx';
import apiFetch from '../services/data-service';
configure({ enforceActions: true });
class UserStore {
@observable users = [];
fetchUsers = flow(function* fetch() {
try {
this.users = yield apiFetch('/users', 'get');
} catch (e) {
this.errorMessage = e.message;
}
})
}
const store = new UserStore();
export default store;
which I'm collecting in the stores index:
import userStore from './user-store';
export default {
userStore,
};
here is my App.jsx:
import React from 'react';
import { Provider } from 'mobx-react';
import AppRouter from './router';
import store from './store';
import 'tachyons';
import './styling/semantic.less';
const App = () => (
<Provider {...store}>
<AppRouter />
</Provider>
);
export default App;
then finally here is my component:
```
import React, { Component } from 'react';
import {
Segment,
Button,
Grid,
Divider,
} from 'semantic-ui-react';
import { inject, observer } from 'mobx-react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
@inject('userStore')
@observer
class Users extends Component {
static propTypes = {
userStore: PropTypes.objectOf(PropTypes.oneOfType([
PropTypes.array,
PropTypes.object,
PropTypes.func,
])).isRequired,
}
// componentDidMount() {
// const { userStore } = this.props;
// userStore.fetchUsers();
// }
selectUser = (id) => {
console.log(id);
}
render() {
console.log('props', this.props)
// const { userStore } = this.props;
// const { users } = userStore;
return (
<Segment>
users
</Segment>
);
}
}
export default Users;
sorry for all of the code but I don't believe I can throw this into a sandbox as I'm using decorators and would need to eject out of CRA
@Keggatron Please use Codepen or Pastebin when posting large amounts of code.
@cmccormack sorry, here is the paste bin
@Keggatron maybe a codesandbox would be better... can you fork this
missing something for decorators