How do we solve this challenge ?
@mananshah51 Gotta return a boolean without the use of a conditional if/else statement it looks like.
@andrewmedhurst Thank's man. I got it.
mananshah51 sends brownie points to @andrewmedhurst :sparkles: :thumbsup: :sparkles:
:cookie: 301 | @andrewmedhurst |http://www.freecodecamp.org/andrewmedhurst
Glad I could help
Such a silly mistake.
Hello guys, does any1 here can help me with git?
i'm confused with a commit here
@aguyinmontreal you asking or telling? no i didnt look other than that regex solution i showed
say, there's a app.js file and inside there's value of
const user = (props) =>{
name: ,
age:
}
const user = (props) =>{
name: ,
age:
}
and person1 made ,
name : "foo",
age:
left age empty
person 2 made ,
name: ,
age: 30
typed age but left name empty,
both are making progress in a same file but with different commits, how can i merge them?
so in the end there will be
const user = (props) =>{
name: "foo",
age:30
}
for the app.js file
@Marmiz hey buddy! :wave: belated :D
hi @DarrenfJ
hey newbie! :wave:
Hey all
how r u doing
Can we modify the values of a Global Variable, from any Function we write in JS ?
your feedback on my projects is highly appreciated
pomodoro:
https://codepen.io/MG2016/full/paqyLm/
calculator:
https://codepen.io/MG2016/full/JprGGg/
weather app
https://codepen.io/MG2016/full/WXGvNm/
u mean like
var count = 0;
function addCount (){
count++;
}
?
yes
@mananshah51 Yes, assuming you don't have a variable with the same name in scope.
then you can with window.variable_name
then you can with window.variable_name
@Muhamed2017 i'm good man.. and you?
@DarrenfJ i'm great Darren thanks man
muhamed2017 sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2407 | @darrenfj |http://www.freecodecamp.org/darrenfj
@Muhamed2017 The weather app is good, except you misspelled Local
@sjames1958gm Thanks Man i will correct it now
muhamed2017 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9037 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
@Muhamed2017 Your calculator lets you enter multiple decimal points e.g. 3.....3
The CE key is not intuitive in that it is more of a backspace key than a clear entry key
I like the style
The CE key is not intuitive in that it is more of a backspace key than a clear entry key
I like the style
I just recived help from stack overflow that they say git merge would do the job
so, git merge for each commit at time and do it twice would do it?
@wackyjoker Since the two files have modified the same line you will probably have to hand edit the conflicts
@sjames1958gm Yeah, your feedback is so usefull thank you really
muhamed2017 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
api offline
@Muhamed2017 And since you asked :) for the clock
- Since session comes first, I would put that control on the left
- I don't think you need a ! after session or break (this is my own pet peeve about too much use of !)
- your reset button doesn't look centered under the pause button
var count = 0;
function cc(card) {
// Only change code below this line
switch(card){
case 2:
case 3:
case 4:
case 5:
case 6:
count = count + 1;
break;
}
// Only change code above this line
}
// Add/remove calls to test your function.
// Note: Only the last will display
cc(2); cc(3); cc(7); cc('K'); cc('A');
Am I going in the right direction ?
@mananshah51 Yes
@sjames1958gm some said that on github that commits would look like
and next commit would look like
after doing
- <p> foo : </p>+ <p>foo : {props.foo} </p>and next commit would look like
- <p> bar : </p>+ <p> bar : {props.bar} </p>after doing
git merge twice
@sjames1958gm How do I display the
var count and string = "Hold"
@mananshah51 So you need to return a string with count + the string "Hold" or the string "Bet" depending on the count value
@sjames1958gm Sounds good Let me try and will get back to you. Thanks
mananshah51 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9038 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
@wackyjoker If you have two developers working on a remote repo then one of them will have to pull and merge before pushing
Who ever pushes first won't have to merge
Who ever pushes first won't have to merge
@sjames1958gm u can't thank you, you made me luagh, but yeah, you are right thank you
muhamed2017 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
api offline
@sjames1958gm thanks mate. i think i understand it now.
wackyjoker sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9039 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
@Muhamed2017 :) :+1: :checkered_flag:
@wackyjoker :+1:
@Muhamed2017 I think the general style is good on all three.
@sjames1958gm many thanks
muhamed2017 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
api offline
Hi does anyone know how much GoDaddy charges for their domains?
@AbrisM its all pretty standard 15USD
ignore ^ message. he got banned. he is scammer. thanks guys.
I'm still waiting for the money that kind Nigerian prince told me he will send me T_T
@lydatech Thanks!
abrism sends brownie points to @lydatech :sparkles: :thumbsup: :sparkles:
:star2: 2670 | @lydatech |http://www.freecodecamp.org/lydatech
hello
i need some helps
i need some helps
line 46. i set header api. but " No 'Access-Control-Allow-Origin' header is present on the requested resource." still appears
@chandanny I don't know how to get the issue when using the game
i'm not getting the issue either. if it works on some browsers and not others, maybe certain devices, you might be able to google for an answer
can anyone help me with figuring out the 'find the longest word in a string' algorith? ugh i just never know where to start with these!
@rrspence what have you got?
Got my Frontend cert yay
@padunk not much. here's what i have so far:
function findLongestWord(str){
str = str.split(' ');
for(var i = 0; i < str.length; i++) {
}
} return longest;
}
findLongestWord("The quick brown fox jumped over the lazy dog");
function findLongestWord(str){
str = str.split(' ');
for(var i = 0; i < str.length; i++) {
}
} return longest;
}
findLongestWord("The quick brown fox jumped over the lazy dog");
congrats man @X140hu4 :+1:
ahh gotcha. i was wondering how to do that @padunk
@rrspence fyi, your return is outside a function
oh i see. i'll fix that. do you think i'm on the right track here? i figured after splitting str i could loop through the array and check what each string's length is but can't quite figure out how to do that @padunk
So you get an array with every words of the string. Now how do you know which is the longest?
@rrspence yes, you could iterate over the array and check each value length. but you need a comparison
```function findLongestWord(str){
str = str.split(' ');
var longestString;
for(var i = 0; i < str.length; i++) {
if(str[i].length >= longestString) {
longestString = str[i].length;
}
} return longestString;
}
findLongestWord("The quick brown fox jumped over the lazy dog");
@rrspence You need to put the backticks on their own lines :) One before, one after the code
oh gotcha! i'm still new to this :)
function findLongestWord(str){
str = str.split(' ');
var longestString;
for(var i = 0; i < str.length; i++) {
if(str[i].length >= longestString) {
longestString = str[i].length;
}
} return longestString;
}
findLongestWord("The quick brown fox jumped over the lazy dog");
i think this is working. thoughts?
@rrspence your
longestString is undefined; you need to define it to a number
function findLongestWord(str){
str = str.split(' ');
var longestString = 0;
for(var i = 0; i < str.length; i++) {
if(str[i].length >= longestString) {
longestString = str[i].length;
}
} return longestString;
}
findLongestWord("The quick brown fox jumped over the lazy dog");
oh i see. this one passed!
it is good if you alway define your variable first and not let it be undefined. @rrspence
Do you need to check for equality
>= ?
oh i suppose that's not necessary. since i'm just looking for it to be larger yes?
Yes :)
@rrspence next you could do it with other array method like
.sort or .reduce or .map
oh i'm not familiar with those. i'll read up on them.
thanks for your help guys!! these algorithms are giving me so much trouble :worried:
hey I'm trying to add a contact form for my personal portfolio page... does anyone know a good way to make a functional one without having to use php?
nevermind, i found a service called formspree.io....pretty sweet
yooo what up
@mgrienauer Formspree is good, but the email address is visible, so if you dont want it to be visible, make and use a temp email
@ezioda004 yea i made a yahoo mail just for that page
@ezioda004 @ezioda004 thanks for the heads up
mgrienauer sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 484 | @ezioda004 |http://www.freecodecamp.org/ezioda004
Need some HTML/CSS help. Anyone around?
whats up?
Why is my facebook button not falling to the next row?
Guys, anyone here have some knowledge on SEMANTIC UI Theming ?
I need to do a test for a job interview in Semantic UI using Themes, but I'm having some trouble and doubts about file structure, . variables and how to put my code um production and GitHub.
If anyone could help I'll be appreciated SO MUCH, I already ready the documentation and the issues and forum, please , someone help me hahaha THANK
I need to do a test for a job interview in Semantic UI using Themes, but I'm having some trouble and doubts about file structure, . variables and how to put my code um production and GitHub.
If anyone could help I'll be appreciated SO MUCH, I already ready the documentation and the issues and forum, please , someone help me hahaha THANK
@The-Seth If you want it on another row -then be explicit and create another .row
@sjames1958gm That works but is what I did wrong? I read if I fill up a row, the next element goes to the next row automatically.
@The-Seth I am not sure, I have always had trouble with using empty divs, I think there are special rules for elements with no content.
When you use md-11 on the hr div it does go to the next line, but that doesn't make any sense to me
When you use md-11 on the hr div it does go to the next line, but that doesn't make any sense to me
It is a little strange, yeah. Check this. If you remove that 1, the Text 2 shifts up to first row
https://codepen.io/The-Seth/pen/rJoZxp
https://codepen.io/The-Seth/pen/rJoZxp
Anyway, thanks @sjames1958gm
the-seth sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9041 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
@The-Seth I think it is better to be explicit, if you really want a row, create a row.
I will follow that rule from now on :)
@DarrenfJ thanks for the help
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2408 | @darrenfj |http://www.freecodecamp.org/darrenfj
guys why doesnt this output data?
$.getJSON("https://wind-bow.gomix.me/twitch-api/streams/ESL_SC2?callback=?", function(data) {
console.log(data);
});
console.log(data);
});
hey I'm almost done with my portfolio but have 2 quick questions... I'm trying to figure out how to make my form be justified-center but also span just 90% of the div
as of now it just justifies center and wont stretch at all
also cant figure out why my h1 in the bio section won't center, it works fine on firefox
@mgrienauer Do you know how to check an element's CSS properties with your browser's developer tools?
@mgrienauer Set the width of the div wrapping your form
@Juke-Magic Seems that the data is not json encoded?
Seems to start with
/**/ typeof === 'function' && ({"stream":{"_id":27756248656,"game
@X140hu4 i did..it should be taking up 1fr with css grid
along the col axis
@mgrienauer the item contact div is the parent grid
But you set the child grid properties to the form. The form is the grandchild of that parent element
@mgrienauer - I'm just looking at your portfolio, and it looks good! I see (at least in Opera on windows) that the devtools do not look too kindly on your
grid-columns CSS property, complaining about "Unknown property name"... Also your navbar links don't seem to be working, but it doesn't look like you have the ID attributes set on the sections?
@mgrienauer - and your portfolio placeholder image is not loading or displaying - which I think I commented on a couple days ago? Do you see them being displayed, or is it just me? Again, the devtools is complaining about the
grid-columnvalue of 1fr. Hmmm, and maybe the other grid-columns that it's complaining about should be grid-column?
@mgrienauer - and it looks like you have an extra
} at the bottom of your CSS section?
@X140hu4 are you saying i should set the parent div of form to span 1fr? or that i should make each form item span 1fr?
i think it has somethnig to do with justify-content not stretchin to span 1fr
@khaduch thanks for the kudos, im working on this on my local computer using local assets and just copying and pasting into codepen
mgrienauer sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
api offline
@khaduch not sure why you cant see the photos as on codepen im using links to pics online
also fixed grid column and that bit at the end
@mgrienauer - yes, the funny thing is that you are using the same image at the top in your "About" section, and I see that. Maybe Opera on Windows doesn't support something about the grid? Let me try to open it on Chrome...
No, those portfolio images do not open on Chrome, either. What browser are you using?
@khaduch im using firefox...i used tinyurl on the images so maybe thats it?
its working fine on my side
let me try firefox...
ah, sorry i only fixed it locally let me change on codepen
@mgrienauer - well, the images do show up when I load your page on firefox... now that is interesting. I wonder why it doesn't work on Chrome and Opera?
@khaduch try again i just renewed my codepen
maybe itll work now?
also, any ideas about how to make my glyph:hover property border-bottom show up at the bottom of the top navbar?
@mgrienauer - no, the images are not there on Chrome... works fine on FireFox... I wonder if there is still some shaky CSS grid support?
@khaduch hmmm not sure...thats not good though haha
@mgrienauer - I am seeing a bottom border on the three icons on the left of the navbar when I hover over them? Are you meaning to have it somewhere else, like at the bottom of the actual navbar's blue area?
as far as the portfolio placeholder images, if I delete all of your CSS, then I see many very large copies of the image, so it seems to have something to do with your CSS - I'm guessing the grid support is in question?
@mgrienauer - oooh - I just found out if I turned off the "max-height" setting in your
.project > img selector, then it displays the images on Chrome in the projects section.
@khaduch yea, the actual bottom of the blue navbar area
@khaduch whew, thanks alot...that worked for me on chrome as well
mgrienauer sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3763 | @khaduch |http://www.freecodecamp.org/khaduch
@mgrienauer - it might be that you have to wrap those in a div and put the same class on the div and maybe change the hover to work that way? maybe? not sure if that would mess up the navbar but I think that you would have to do that, or maybe you could change the height of those elements to be 100%?
ok ill give that a shot...also any idea on the forms? I want it to span 1fr and be justified-center and take up 90% width
but I'e tried messing with it for like 30 min and cant seem to get it to work like that
@mgrienauer - are you looking at the form on a narrow screen, that's when you want this behavior? Because on a wide screen the form is side-by-side with that text?
@lettiebear - You still have jquery (or had it) in your JS setup (this might be an old comment that I didn't submit - it was still sitting here in my browser...)
@khaduch in both views I want the contact form to take up 90% of the width of its grid-area
nvm i figured it out
@mgrienauer - what did you do? I just was playing with it in devtools and if I set the wrapping div to 90%, I tried a lot of things and nothing made it change width until I turned off the
display: grid for the .contact-form...
I just did another thing that worked - I turned the grid display back on and disabled the
justify-content: center; and that made it occupy the full width? Well, the full width of 90%, the wrapping div's width.
@khaduch i cant remember what i did, i think i removed justify content from form-items and just added some padding to the contact-form div
i renewed my codepen if you want to take a look, not sure what I did now lol
hey guys, whats happening! I need help with localStorage
if anyone has experience with it
you're best to just ask
there's a function
https://codepen.io/NazarIsaak/pen/mXaNvV?editors=1100
clearAll that clear items. The thing is, if user clicks clear button each item disappears, but then if add item, all cleared items pop up again, I think the problem is inside clearAll function, dont know how to fix ithttps://codepen.io/NazarIsaak/pen/mXaNvV?editors=1100
@moT01
does anyone knows, in CSS the scroll-behavior method, does it have a parameter for going slower
Hi every one,
can someone please tell me what unqualified identifiers are (in javascript)?
can someone please tell me what unqualified identifiers are (in javascript)?
@IsaakNazar looks like when you add an item and populate list you're using
items variable and not local storage so you aren't removing the items when you clearAll
@IsaakNazar might be best to make a function specifically for updating local storage that you call from within any function that uses local storage
@cmccormack yes, but why this line
localStorage.removeItem('items'); doesnt remove items from localstorage,?
I need help with this challenge
Here is my code.
var count = 0;
function cc(card) {
// Only change code below this line
switch(card){
case 2:
case 3:
case 4:
case 5:
case 6:
count = count + 1;
return (count +' '+ "Bet");
case 7:
case 8:
case 9:
count = count + 0;
return (count +' '+ "Hold");
case 10:
case 'J':
case 'Q':
case 'K':
case 'A':
count = count - 1;
return (count +' '+ "Hold");
}
// Only change code above this line
}
// Add/remove calls to test your function.
// Note: Only the last will display
cc(10);
@IsaakNazar are you sure it isn't? LIke I said you're using
items to store the items, and when you add a new item your're then iterating over that array which you never emptied
@mananshah51 you're not using count to determine whether to bet or hold, you're just returning Bet or Hold based on the current card. move the return logic outside of your switch
What unqualified identifiers are (in JS)?
Hi could anyone tell me why this is 17? int iResult, num1 = 25, num2 = 40, num3 = 17, num4 = 5; iResult = num3 % num2; I see that 17 can't go into 40, so does it just default to the Modulus?
@cmccormack Do I have to move all the return's outside the switch ?
@AbrisM I believe you are doing 40 in to 17???
@mananshah51 you should have logic outside your switch that checks the current count and returns based on that count
@MuhammedKarim No, it'll be 17 into 40 for this one
The other one does go as 40 into 17
So i'm wondering why it's 17? Is it because we can't technically divide 17 into 40 and it defaults to 17?
17 % 40 is 17 going into 40? isnt that like 17/40 and then remainder?
Yes
I get 0.425 then multiplied by 40, which is 17
but then subtract 17-17 and get 0
So this one skips the third step
@MuhammedKarim when the first number in a modulus operation is smaller than the second one, it will be the answer/result
I'm sorry i have no clue
Ah thought so, thanks
@h1tag Indeed, so it should be 40 % 17 to get a real answer
@cmccormack Thank you so much man, I could figure it out.
mananshah51 sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1351 | @cmccormack |http://www.freecodecamp.org/cmccormack
@mananshah51 :thumbsup: that is a pretty common error people make on that exercise so you're in good company :)
so @AbrisM is the one asking
it's because 40 > 17, so there's zero 40 in 17
so when u devide 17 by 40, the answer will be 0 and the remainder will be 17
so when u devide 17 by 40, the answer will be 0 and the remainder will be 17
@cmccormack Thank you, appreciate it.
mananshah51 sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
api offline
does anyone know why does this not work well on mobile? https://mgrienauer.github.io/
when i view locally, it adjusts fine for mobile, but when i view on github pages its messed up
do i need to add something?
@mgrienauer I tried to simulate mobile view (by reducing browser window size), it seems to adjust fine
@h1tag i added a viewport meta tag in the head of the html and that did the trick
thanks tho @h1tag
mgrienauer sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 926 | @h1tag |http://www.freecodecamp.org/h1tag
you're welcome :)
I like it btw
hello everyone, can someone give me a hand with this?
const parse = require('csv-parse/lib/sync');
const _ = require('lodash');
const CSVtoJSON = (file) => {
return new Promise((resolve, reject) => {
let str = file
.split('\n')
.map((row, i, arr) => row.toUpperCase())
.join('\n');
let result = JSON.stringify(parse(str, {
auto_parse: true,
columns: true
}), undefined, 2);
if (!result) {
reject();
} else {
resolve(result);
}
});
}
const formatJSON = (json) => {
let resultArr = [];
let arr = JSON.parse(json);
let template = {
REF_PH: '',
REF_INICIAL: '',
DESC_SPA: '',
DESC_ENG: '',
CANT: 0,
COSTO: {
CONSIGNACION: 0,
JORDI: 0,
FRANCISCO: 0,
COMPRAS_COMUNES: 0,
TOTAL: 0,
},
PUV: 0,
PFV: 0,
NOTAS: '',
};
arr.forEach((obj) => {
let tempObj = {};
_.assign(tempObj, template);
let keys = Object.keys(obj);
let keysTemp = Object.keys(tempObj);
for (let prop in obj) {
let iteration = keys.indexOf(prop);
if (iteration <= 4) {
_.assign(tempObj, {
[keysTemp[iteration]]: obj[prop],
});
} else if (iteration >= 5 && iteration <= 9 ) {
_.assign(tempObj.COSTO, {
[keysTemp[iteration]]: obj[prop],
});
} else if (iteration >= 10) {
_.assign(tempObj, {
[keysTemp[iteration]]: obj[prop],
});
}
};
resultArr.push(tempObj);
});
cosole.log(resultArr);
return resultArr;
};
the deal is on the formatJSON function, if anyone interested to help
i have implemented a custom tooltip which shows up on click of elipsis, howevere tooltip position is changes if i scroll up and down once, but displays correctly on page load !
any solution ?
code?
_triggerMenu(e){
let bmYposition;
let bmXposition;
let el = this.shadowRoot.querySelector('menu');
let parent = e.target.parentElement.parentElement.parentElement.parentElement;
this._validateAndDisplayDownlineLosAction(parent);
let boundingClientRect = e.target.getBoundingClientRect();
bmXposition = boundingClientRect.x - boundingClientRect.x;
bmYposition = boundingClientRect.y - 23;
if (this.shadowRoot.querySelector('.grid-wrapper').hasAttribute('screen-sm')) {
bmYposition = boundingClientRect.y - 8;
bmXposition = boundingClientRect.x + 35;
}
el.style="top:"+ bmYposition +"px; left:"+ bmXposition +"px";
this.hideBusinessMenu = false;
e.stopPropagation();
}
man, could you format it a bit better? XD
@kamatheuska What are the secret numbers 4, 5, 9 and 10?
is way too hard too read
sorry give me a minute
_triggerBusinessMenu(e){
let bmYposition;
let bmXposition;
let el = this.shadowRoot.querySelector('menu');
let parent = e.target.parentElement.parentElement.parentElement.parentElement;
this._validateAndDisplayDownlineLosAction(parent);
let boundingClientRect = e.target.getBoundingClientRect();
bmXposition = boundingClientRect.x - boundingClientRect.x;
bmYposition = boundingClientRect.y - 23;
if (this.shadowRoot.querySelector('.grid-wrapper').hasAttribute('screen-sm')) {
bmYposition = boundingClientRect.y - 8;
bmXposition = boundingClientRect.x + 35;
}
el.style="top:"+ bmYposition +"px; left:"+ bmXposition +"px";
this.hideBusinessMenu = false;
e.stopPropagation();
}
@kamatheuska I would use a forEach on the keys, I think it would be clearer?
keys.forEach((key, iteration) => {
});
Not sure
keys.forEach((key, iteration) => {
});
Not sure
keysTemp[iteration] this is going to work for the values > 4?
I am not sure that I can help you, since it looks rather complex...but making a pen or a fiddle could be a good idea, so people can help you debug @sjames1958gm
Getting a TypeError: Cannot read property 'state' of undefined
error when I run my code
error when I run my code
@Garabed96 you will need to share your code
@sjames1958gm is there a way it doesn't take up that much space
@Garabed96 use a site like gist and post a link
@Garabed96 Does it give a line where the error is? Is it on initial render, or after data has been retrieved?
ya its on the line with
{this.state.alltimeList.map(lists =>
@Garabed96 You are losing the
try
this value in the callback.try
onClick={() => this.addAlltime()}
@Garabed96 There are other techniques. like in the constructor you can do
which binds the correct this to the function itself
this.addAlltime = this.addAlltime.bind(this)which binds the correct this to the function itself
@sjames1958gm that didn't work
the onclick { () => this.addAlltime()
well the error went away so idk
but its not printing the data
@Garabed96 I would console.log the state at the top of addAlltime function to see if the data is loaded
@Garabed96 Is addAlltime returning anything?
no its not
I'm trying to console log it now
what did you mean by add that in the constructor though, would I put it in the this.state or it would be its own thing?
@Garabed96 No I mean your function doesn't have a return - so it is not returning anything to go into the DOM
@Garabed96 Its own thing
@Garabed96 Your code isn't going to work - the JSX in addAlltime function has nowhere to go.
You cannot return it - because you are in a click handler.
You cannot return it - because you are in a click handler.
ok but why does it work for lists.recent for my componentDidMount
@Garabed96 because you are rendering that right in the JSX of the render function
so I'd need a return statement so it returns the list?
@Garabed96 It doesn't matter, it won't work because you are in the click handler.
so what should I be doing with the click handler
the constructor technique ?
@Garabed96 Well, I would create a state variable that says which is displayed recent or all time
and change that in the click handler. Then use that state variable to decide which format to render.
and change that in the click handler. Then use that state variable to decide which format to render.
Anyone have a minute to give me a hand? Trying to get this button to hide/show the post body but it only works for the first post generated by my for loop, the other ones do nothing. Help!!!
<%- include partials/header %>
<h1>theysaid.co</h1>
<div class="container">
<% post.forEach(function(posts){ %>
<div class="card">
<div class="card-body">
<div class="post-header">
<h4><%= posts.title %></h4>
<h6><i>DATE AND TIME</i></h6>
<p id="post-body"><%= posts.body %></p>
<button type="button" id ="show" class="btn btn-outline-primary btn-pill btn-sm">show hide</button>
</div>
</div>
</div>
<% }) %>
</div>
<%- include partials/footer %>the js:
$(document).ready(function(){
$("#show").on('click', () => {
$("#post-body").toggle()
})
})
@rhozeta Ask in the freeCodeCamp room, since that looks like PHP and I know of a few ppl who know it
that are in the freeCodeCamp room that is
It's not PHP , its' EJS and jQuery so its all just javascript and HTML, I figured out how to make it not only do the first one but now it is triggering all of them lol
@rhozeta You cant use ids on more than one element - use a class instead
Sorry, forgot to mention that I did change them and it now toggles all of them if any button is clicked
@sjames1958gm
@rhozeta That is what you are looking for?
Anyone here familiar with github pages? I have my portfolio page on https://tshin7.github.io and when I try to load my other site https://tshin7.github.io/meteorite-landings-with-d3/ , it loads my portfolio page instead. This happens on chrome, but it seems to work fine on firefox.
And clearing cache/cookies seems to fix it for a little bit, but the same thing happens after a while
@tshin7 I see different pages too on Chrome.
@rhozeta Your for loop is creating duplicate IDs - in your HTML, all IDs need to be unique
$("#post-body").toggle() <- doesn't specify which id="post-body" should be toggled, so the browser guesses since there are multiple
@sjames1958gm I am looking to have a list of posts. On each post there is a button that says "show/hide" and when you click it, it reveals a hidden <p> , but only in the div that the button was click. Can only seem to make it one or all of them right now
@rhozeta Try something like this with your button:
$(".btn-pill").on('click', function() {
$(this).prev().toggle();
});
@gulsvi yeah I changed them all to class and it no longer works
@rhozeta This is my best approximation at getting it to work without using EJS and your post json: https://s.codepen.io/anon/pen/VQgaEp?editors=1010
@gulsvi thanks, that is a nice solution
rhozeta sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2629 | @gulsvi |http://www.freecodecamp.org/gulsvi
Just an example - I'm guessing it can be more robust. Main thing to look out for is duplicate ID values and toggling elements relative to the button clicked
@rhozeta use only one event handler for toggling posts, and check the event target, I guess posts or buttons could have indexes or ids, toggle it if event target match that id / index
@AdelMahjoub all the posts do already have an ID, so you're saying use that to target ?
@rhozeta attach that id to each post paragraph
@rhozeta or to each button
@rhozeta and listen for a click event on the document not each button
@rhozeta if the event target match the button id, toggle the post with that id
@AdelMahjoub i see what you're saying, I'll write something up with that method
@rhozeta or use data-target , data-toggle, you can let go your imagination on how to handle that :smile:
Hey, guys. Does anyone know of a way to see what JS code runs upon file upload on a specific webpage in Chrome? For example, I'd like to see which global JS variables exactly get changed and to what values immediately when I upload an image on this page https://www.redbubble.com/portfolio/images/new?ref=account-nav-dropdown
@rhozeta also, you can always use inline javascript, and use the onclick property. You can write that using your templating engine
@hamzicabdulah you sure its javascript you want to track and not server side?
@ismailhozain
hey folks, need a CSS animation genius here.How do i make it to where my thing leaves a trace when it moves similar to this https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR22Sb7TL9QJyIv6FRYHukhnbLs6-B7vbyx76zADijaJpU_R-_22Q
that is what i want to achieve.Here is my pen--->https://codepen.io/ismailhozain/pen/LQMawJ
hey folks, need a CSS animation genius here.How do i make it to where my thing leaves a trace when it moves similar to this https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR22Sb7TL9QJyIv6FRYHukhnbLs6-B7vbyx76zADijaJpU_R-_22Q
that is what i want to achieve.Here is my pen--->https://codepen.io/ismailhozain/pen/LQMawJ
any idea how this is done
@rhozeta if you are still on toggling posts here an example
this inline script tag, declare a function that will be added on the onclick attribute of each button using the templating engine, before the code is served
function togglePost(e) {
var post = e.target.previousElementSibling;
if(post.classList.contains('hidden')) {
post.classList.remove('hidden');
post.classList.add('visible');
} else {
post.classList.remove('visible');
post.classList.add('hidden');
}
}
@rhozeta , it is php, but you can use exactly the same with ejs
<?php for ($i = 0; $i < 100; $i++): ?>
<h2>Lorem Ipsum</h2>
<p class="hidden"><?= $text?></p>
<button onclick="togglePost(event)">Toggle</button>
<hr>
<?php endfor; ?>
<script>
function togglePost(e) {
var post = e.target.previousElementSibling;
if(post.classList.contains('hidden')) {
post.classList.remove('hidden');
post.classList.add('visible');
} else {
post.classList.remove('visible');
post.classList.add('hidden');
}
}
</script>
@AdelMahjoub I found a solution actually. It had to do with me using a fat arrow function. I switched it to a regular function and it works perfectly.
@AdelMahjoub thanks
rhozeta sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 659 | @adelmahjoub |http://www.freecodecamp.org/adelmahjoub
@rhozeta and do you know why when you switched it worked
its called "lexical scoping", they just have different contexts and I wasn't using the fat arrow properly
And, you just did $(selector).prev() with vanillaJS instead of jQuery
adding/removing visible and hidden classes is also the same as using .toggle() in jQuery
@rhozeta cool :smile: I wanted to be sure you understood why
@rhozeta @AdelMahjoub
onclick="$(this).prev().toggle()" replaces all of that code, if desired.
Personally, I avoid using onclick calls to keep html/css/js separate though
@gulsvi yes , it is just an example of how to handle it :smile:
@gulsvi but tbh I like mixing js/html and css
Monolithic HTML can get very ugly, fast
But, if it's just your code and no one else maintaining it, doesn't matter
yes, sometimes, you just throw that php, js, html css on one file and let it blow away :laughing:
the best is all inlined and minified :laughing:
one http request ! only one
Unable to solve this challenge, can someone help me out ?
// Setup
function phoneticLookup(val) {
var result = "";
// Only change code below this line
var phoneticLookup = {
"alpha":"Adams",
"bravo": "Boston",
charlie: "Chicago",
"delta":"Denver",
"echo": "Easy",
"foxtrot": "Frank"
};
// Only change code above this line
return result;
}
// Change this value to test
phoneticLookup("charlie");
@moT01 I was asking if you found a solution for the the "save to nested array/object dynamically" part :D
@mananshah51 Your object looks great - you just need to return a different "result". You set "result" equal to "" and don't modify it according to val
@mananshah51
result = phoneticLookup[val]; ?
Well, that's the answer if you didn't want to try for yourself ^ :p
@gulsvi hahaha , sorry for the spoiler :D
Always easiest to just give the answer lol
hey guys, I found this CSS selector in some old code that I didn't code myself
Does it mean something? Or is it a mistake?
.ui.form . .fieldsDoes it mean something? Or is it a mistake?
@aguyinmontreal I think that's a mistake, maybe they meant to do
.ui.form > .fields but didn't hit shift
@aguyinmontreal what-does-the-dot-mean-in-css
Confirmed, attribute value must go after the period (.) whitespace not allowed after it. https://www.w3.org/TR/CSS21/selector.html#class-html
@gulsvi @AdelMahjoub thanks!
aguyinmontreal sends brownie points to @gulsvi and @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 660 | @adelmahjoub |http://www.freecodecamp.org/adelmahjoub
:star2: 2630 | @gulsvi |http://www.freecodecamp.org/gulsvi
do you guys know how does the browser would interpret this code (even if it's a mistake)?
@aguyinmontreal it wont apply the style I guess
@AdelMahjoub alright! thanks, I just don't want to break anything by fixing it :D
aguyinmontreal sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
api offline
@aguyinmontreal add an extra dot to test, why not
@aguyinmontreal When browser's run into invalid syntax, they can choose however they want to handle it. It's possible they all handle it the same, it's possible they each handle it differently - and that behavior can change without notice in updates/new releases.
@gulsvi I think when it comes to invalid CSS definitions the browser skips over it. Hard to really find a definitive answer since there is an
:invalid tag.
@gulsvi That sounds like the most vague answer possible haha
oops, the first message was to @aguyinmontreal ^^
yeah :D @bradtaniguchi @gulsvi @AdelMahjoub thanks all!
api offline
:cookie: 401 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
api offline
aguyinmontreal sends brownie points to @bradtaniguchi and @gulsvi and @adelmahjoub :sparkles: :thumbsup: :sparkles:
@aguyinmontreal np :D
so the right answer was it skips over it right @aguyinmontreal
Since that is not a normative definition, it is ultimately up to the browser
At the "top level" of a stylesheet, an <at-keyword-token> starts an at-rule. Anything else starts a qualified rule, and is included in the rule’s prelude. This may produce an invalid selector, but that’s not the concern of the CSS parser — at worst, it means the selector will match nothing.
When interpreting a list of declarations, unknown syntax at any point causes the parser to throw away whatever declaration it’s currently building, and seek forward until it finds a semicolon (or the end of the block). It then starts fresh, trying to parse a declaration again.
in the case of that dot, it will seek forward until it find a semicolon then starts fresh and try to parse a declaration again
or the selector will match nothing
can anyone help me figure out what i'm doing wrong in the confirm ending challenge?
here's what i have. seems like it working but something still missing
function confirmEnding(str, target) {
// "Never give up and good luck will find you."
// -- Falcor
var endStr = str.substr(-1, target.length);
if (endStr === target) {
return true;
} else {
return false;
}
}
confirmEnding("Bastian", "n");
@rrspence what is the problem
for some reason
```
```
confirmEnding("Open sesame", "same")
same with
confirmEnding("He has to give me a new name", "name")
well your endStr is just grabbing the last letter
lets see
str.substr(start[, length])
start
The index of the first character to include in the returned substring.
length
Optional. The number of characters to extract.