8th
Mar 2018
Stephen James
@sjames1958gm
Mar 08 2018 01:12 UTC
@leighhobson89 It is back ticks to get formatting 
Tai Jones
@taiJones00
Mar 08 2018 01:23 UTC

Okay how is this

class LeaderBoard extends React.Component {
constructor(props) {
super(props);
this.state = {
users : []
}
} // Cannot call axios inside of render and expect to get the results synchronously. Refactor the calls to get the list of users maybe from componentDidMount, set the users to the component state and then use the users from the component state in the render method

//How to load: Hint: set a flag in state that will toggle once the request completes. Use that flag in the render function to show the loading indicator.
componentDidMount() {
listOfUsers = [];
axios.get("https://fcctop100.herokuapp.com/api/fccusers/top/recent?origin=*").then(function(json) {
for (let i = 0; i < 100; i++) {
listOfUsers.push({
img: json.data[i].img,
points: json.data[i].recent
});
}
});

this.setState({users : listOfUsers});

console.log(this.state.users);
console.log(listOfUsers);
}

It looks like listOfUsers is logging as empty although it should've been filled after the for loop

This is right before the render method
Mar 08 2018 01:30 UTC
@taiJones00 - try putting your this.setState within the callback function - unless I'm not familiar with what axios does - is it an asynchronous request? If it is, then you have the callback function that executes sometime after the code finishes running? Maybe that will help? Put it after your for loop closing brace.
Tai Jones
@taiJones00
Mar 08 2018 01:32 UTC
axios
.get("https://fcctop100.herokuapp.com/api/fccusers/top/recent?origin=*")
.then(function(json) {
for (let i = 0; i < 100; i++) {
listOfUsers.push({
img: json.data[i].img,
points: json.data[i].recent
});
}
this.setState({ users: listOfUsers });
});
This give an error Uncaught (in promise) TypeError: this.setState is not a function
It's like axios thinks i'm referencing it's api when I have this.setState right after the for loop @khaduch
markclynch
@markclynch
Mar 08 2018 01:34 UTC
'''
(document).ready(); ''' CamperBot @camperbot Mar 08 2018 01:34 UTC :bulb: to format code use backticks!  more info markclynch @markclynch Mar 08 2018 01:35 UTC <!DOCTYPE html> <head> <title>js Calculator</title> <link rel = "stylesheet" href="C:\Users\mark\AppData\Local\atom\app-1.18.0\Code Projects\Calculator\style.css"> <script src="C:\Users\mark\AppData\Local\atom\app-1.18.0\Code Projects\Calculator\main.js"></script> <body> <h1>Javascript Calculator</h1> <div id='calculator'> <form> <input type='text' id='display' disabled> <br> <input type='button' value='C' id='keys' onclick='toScreen("c")'> <input type='button' value='CE' id='keys' onclick='clearScreen()'> <input type='button' value='^2' id='keys' onclick='squared()'> <input type='button' value='+' id='keys' onclick='toScreen("+")'> <br> <input type='button' value='7' id='keys' onclick='toScreen("7")'> <input type='button' value='8' id='keys' onclick='toScreen("8")'> <input type='button' value='9' id='keys' onclick='toScreen("9")'> <input type='button' value='-' id='keys' onclick='toScreen("-")'> <br> <input type='button' value='4' id='keys' onclick='toScreen("4")'> <input type='button' value='5' id='keys' onclick='toScreen("5")'> <input type='button' value='6' id='keys' onclick='toScreen("6")'> <input type='button' value='7' id='keys' onclick='toScreen("*")'> <br> <input type='button' value='1' id='keys' onclick='toScreen("1")'> <input type='button' value='2' id='keys' onclick='toScreen("2")'> <input type='button' value='3' id='keys' onclick='toScreen("3")'> <input type='button' value='/' id='keys' onclick='toScreen("/")'> <br> <input type='button' value='0' id='keys' onclick='toScreen("0")'> <input type='button' value='.' id='keys' onclick='toScreen(".")'> <input type='button' value='=' id='equals' onclick='equal()'> <h3>Simple Calculator<h3> </form> </div> </body>  var box = document.getElementById('display'); function toScreen(x) { box.value+=x; if (x==='c'){ box.value=''; } } why wont anything go in my display box there? Daniel @DanJP2016 Mar 08 2018 01:36 UTC i think you mean class='keys'. You can't use the same name for multiple id markclynch @markclynch Mar 08 2018 01:37 UTC oofa You sure? I don't think that's the problem. Daniel @DanJP2016 Mar 08 2018 01:37 UTC yes, that might not fix your problem, but that will cause problems markclynch @markclynch Mar 08 2018 01:38 UTC I'm using atom.io to code this, just coming back after a long break Tai Jones @taiJones00 Mar 08 2018 01:38 UTC I'm not sure why it's not displaying but you for sure can't have the same id name on multiple elements @markclynch Let Daniel @DanJP2016 Mar 08 2018 01:38 UTC if you need the same name on all those elements use class instead of id markclynch @markclynch Mar 08 2018 01:39 UTC done but not sure why not displaying now. Is there supposed to be something at the start of a main.js file? Tai Jones @taiJones00 Mar 08 2018 01:40 UTC Let's see. onClick, you're going to get an object relating to the element that was clicked on. That object will be passed to the toScreen function. You wan't the value of the element so what you're going to do is access the object (ex. x) and value (ex. value) like x.target.value markclynch @markclynch Mar 08 2018 01:41 UTC Feels like thats what I'm doing :) @taiJones00 Stephen James @sjames1958gm Mar 08 2018 01:41 UTC @markclynch You defined your main.js before your HTML so box will not resolve correctly. Tai Jones @taiJones00 Mar 08 2018 01:41 UTC Hm. box.append(x.target.value)? x is the whole object but you want the value specifically that you labled to be something like 9 or 8. So x.target.value. I think @markclynch Daniel @DanJP2016 Mar 08 2018 01:42 UTC box does not have a value, because you are only targeting the element with the id display Stephen James @sjames1958gm Mar 08 2018 01:42 UTC @taiJones00 He is calling toScreen with a specific value so it doesn't need target or value Tai Jones @taiJones00 Mar 08 2018 01:43 UTC Ah man markclynch @markclynch Mar 08 2018 01:43 UTC @sjames1958gm Ok, so what's needed to fix it, like I said I'm coming back after a 4 month break here to get on these advanced algo's Stephen James @sjames1958gm Mar 08 2018 01:43 UTC @markclynch Move you include of main.js to end of the html file Tai Jones @taiJones00 Mar 08 2018 01:43 UTC Ah I just saw that markclynch @markclynch Mar 08 2018 01:44 UTC @sjames1958gm weird I don't ever remember calling all that at end @sjames1958gm Don't we normally call the main.js in header like everything else? Just the order in there that matters a bit. @sjames1958gm thanks CamperBot @camperbot Mar 08 2018 01:46 UTC markclynch sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles: :star2: 9069 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm Tai Jones @taiJones00 Mar 08 2018 01:46 UTC :point_up: March 7, 2018 7:32 PM Can I have help with this one? @sjames1958gm Stephen James @sjames1958gm Mar 08 2018 01:47 UTC @camperbot :+1: Tai Jones @taiJones00 Mar 08 2018 01:47 UTC I had a suggestion to move the setState right after the for loop but that didn't fix this for (let i = 0; i < 100; i++) { listOfUsers.push({ username: json.data[i].username, img: json.data[i].img, points: json.data[i].recent }); } this.setState({ users: listOfUsers }); }); like this The axios documentation has this. Should I use this? // Want to use async/await? Add the async keyword to your outer function/method. async function getUser() { try { const response = await axios.get('/user?ID=12345'); console.log(response); } catch (error) { console.error(error); } } Stephen James @sjames1958gm Mar 08 2018 01:48 UTC @taiJones00 change your function(json) to an arrow function and see if that helps Tai Jones @taiJones00 Mar 08 2018 01:49 UTC Ahh for some reason that worked. It looks like the second console.log() works but this setState isn't setting state Stephen James @sjames1958gm Mar 08 2018 01:49 UTC @taiJones00 The this value is probably not your component because it is inside another function. If you are comfortable with async/await it is considered more modern @taiJones00 You have to do the setstate inside of the .then at least Tai Jones @taiJones00 Mar 08 2018 01:52 UTC This doesn't help the state change https://codepen.io/taiJones00/pen/oEKZYL Stephen James @sjames1958gm Mar 08 2018 01:53 UTC @taiJones00  axios .get("https://fcctop100.herokuapp.com/api/fccusers/top/recent?origin=*") .then(json => { for (let i = 0; i < 100; i++) { listOfUsers.push({ username: json.data[i].username, img: json.data[i].img, points: json.data[i].recent }); } this.setState({ users: listOfUsers }); }); By using the arrow function you get the outer scope this which is what you want. Also, I think you want component will mount not did mount Tai Jones @taiJones00 Mar 08 2018 01:54 UTC That's what I have @sjames1958gm I'll try componentWillMount Stephen James @sjames1958gm Mar 08 2018 01:56 UTC @taiJones00 I put this.state.users.length in your render function just to see and it does get set to 100 Tai Jones @taiJones00 Mar 08 2018 01:56 UTC So the json data is being fetched and it's all being put into the variable of listOfUsers. The only thing that's not happeing is a state change Stephen James @sjames1958gm Mar 08 2018 01:57 UTC @taiJones00 remember get and setstate are async so you won't see the array being filled until later Tai Jones @taiJones00 Mar 08 2018 01:58 UTC I remember that in componentDidMount, when setState is called, the component will automatically render. So it will mount with an empty state and update with a new state filled with users. Right? @sjames1958gm Stephen James @sjames1958gm Mar 08 2018 01:58 UTC console.log(this.state.users); put this in your render function and you will see it start at length 0 and then become length 100 Tai Jones @taiJones00 Mar 08 2018 01:58 UTC Okay Stephen James @sjames1958gm Mar 08 2018 01:59 UTC @taiJones00 Anytime you set the state to a new value it should re-render Tai Jones @taiJones00 Mar 08 2018 02:00 UTC Okay it looks like the state actually is being updated after the setState in the componentDidMount. Right? @sjames1958gm So both this.state.users and listOfUsers are both filled with users Stephen James @sjames1958gm Mar 08 2018 02:01 UTC @taiJones00 - yes listOfUsers is only temporary while you are processing the axios call markclynch @markclynch Mar 08 2018 02:02 UTC atom.io telling me that eval can be harmful . . . what am I missing? Stephen James @sjames1958gm Mar 08 2018 02:03 UTC @markclynch eval can be harmful. But it is useful for the calculator project eval can be exploited for javascript injection attacks markclynch @markclynch Mar 08 2018 02:04 UTC hmmm. Doesn't seem to be working. Any chance atom.io wont let it work? Tai Jones @taiJones00 Mar 08 2018 02:04 UTC Ahhhh!!! We got it! It's a start! Thank you @sjames1958gm CamperBot @camperbot Mar 08 2018 02:04 UTC taijones00 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles: :star2: 9070 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm markclynch @markclynch Mar 08 2018 02:04 UTC function answer() { x=box.value; x=eval(x); box.value=x; } Stephen James @sjames1958gm Mar 08 2018 02:04 UTC @taiJones00 :+1: :checkered_flag: markclynch @markclynch Mar 08 2018 02:05 UTC my equal button I called <input type='button' value='=' id='equals' onclick='answer()'> Stephen James @sjames1958gm Mar 08 2018 02:05 UTC @markclynch the problem is atom.io doesn't know that you are using it for a legitimate reason. markclynch @markclynch Mar 08 2018 02:06 UTC @sjames1958gm can i over ride it? Stephen James @sjames1958gm Mar 08 2018 02:06 UTC @markclynch I don't use atom - but I am betting you can. markclynch @markclynch Mar 08 2018 02:08 UTC @sjames1958gm Do you use sublime? I'm cheap, so didn't want to pay for it Stephen James @sjames1958gm Mar 08 2018 02:08 UTC @markclynch VS Code Ken Haduch @khaduch Mar 08 2018 02:09 UTC @markclynch - definitely try VS code - it's a nice editor! markclynch @markclynch Mar 08 2018 02:09 UTC is that paid as well @sjames1958gm Stephen James @sjames1958gm Mar 08 2018 02:09 UTC @markclynch FREE open source, supported by Microsoft, built on the same Electron platform as atom Daniel @DanJP2016 Mar 08 2018 02:10 UTC the quokka.js plugin for vs code is awesome markclynch @markclynch Mar 08 2018 02:10 UTC @sjames1958gm I guess it's worth a look into it. Does it have a lot of the same pluggins? I need to be able to run some C++, javascript etc. etc. Easy enough to learn as a newbie? Stephen James @sjames1958gm Mar 08 2018 02:11 UTC I was even able to build a java spring app in VS code with maven builds markclynch @markclynch Mar 08 2018 02:11 UTC @sjames1958gm I guess that's cool, however I have no idea what you just said lol Stephen James @sjames1958gm Mar 08 2018 02:11 UTC @markclynch I use it for C++, js, java, it has most of the same plugins and MS is keeping it up to date @markclynch :) markclynch @markclynch Mar 08 2018 02:12 UTC So I should take the plunge your saying Stephen James @sjames1958gm Mar 08 2018 02:12 UTC Yes markclynch @markclynch Mar 08 2018 02:12 UTC and it will let me use eval :) for my evil plan of building the calculator of doom lol Stephen James @sjames1958gm Mar 08 2018 02:12 UTC Well, atom.io is not stopping you from using it ? Just complaining? markclynch @markclynch Mar 08 2018 02:13 UTC It complains and my code doesn't wokr work it's absolutely restrictive, found an article theres some loophole package that will allow you to run eval on the main something, but not worker Stephen James @sjames1958gm Mar 08 2018 02:14 UTC @markclynch Ah, I see you are on the embedded renderer markclynch @markclynch Mar 08 2018 02:15 UTC uh, don't know what that means. I'm just saving and running it locally not embedded just using path and chrome @sjames1958gm Stephen James @sjames1958gm Mar 08 2018 02:18 UTC @markclynch hmm. ok markclynch @markclynch Mar 08 2018 02:22 UTC @sjames1958gm dang, moved over to VS and didn't immediately work, something wrong with my code no doubt :( Stephen James @sjames1958gm Mar 08 2018 02:22 UTC :( markclynch @markclynch Mar 08 2018 02:22 UTC  var box = document.getElementById('display'); function toScreen(x) { box.value+=x; if (x==='c'){ box.value=''; } function answer() { x=box.value; x=eval(x); box.value=x; } }  <!DOCTYPE html> <head> <title>js Calculator</title> <link rel = "stylesheet" href="C:\Users\mark\AppData\Local\atom\app-1.18.0\Code Projects\Calculator\style.css"> <script src="C:\Users\mark\AppData\Local\atom\app-1.18.0\Code Projects\Calculator\main.js"></script> <body> <h1>Javascript Calculator</h1> <div id='calculator'> <form> <input type='text' id='display' disabled> <br> <input type='button' value='C' id='keys' onclick='toScreen("c")'> <input type='button' value='CE' id='keys' onclick='clearScreen()'> <input type='button' value='^2' id='keys' onclick='squared()'> <input type='button' value='+' id='keys' onclick='toScreen("+")'> <br> <input type='button' value='7' id='keys' onclick='toScreen("7")'> <input type='button' value='8' id='keys' onclick='toScreen("8")'> <input type='button' value='9' id='keys' onclick='toScreen("9")'> <input type='button' value='-' id='keys' onclick='toScreen("-")'> <br> <input type='button' value='4' id='keys' onclick='toScreen("4")'> <input type='button' value='5' id='keys' onclick='toScreen("5")'> <input type='button' value='6' id='keys' onclick='toScreen("6")'> <input type='button' value='7' id='keys' onclick='toScreen("*")'> <br> <input type='button' value='1' id='keys' onclick='toScreen("1")'> <input type='button' value='2' id='keys' onclick='toScreen("2")'> <input type='button' value='3' id='keys' onclick='toScreen("3")'> <input type='button' value='/' id='keys' onclick='toScreen("/")'> <br> <input type='button' value='0' id='keys' onclick='toScreen("0")'> <input type='button' value='.' id='keys' onclick='toScreen(".")'> <input type='button' value='=' id='equals' onclick='equal()'> <h3>Simple Calculator<h3> </form> </div> </body> is equal not a good function name? oh I already changed it to answer() just in case anyhow, and called that function correctly. What am I missing here :( @sjames1958gm Also thanks VS looks pretty cool :) markclynch @markclynch Mar 08 2018 02:30 UTC starting to remember why i took a break before lo lol markclynch @markclynch Mar 08 2018 02:36 UTC @sjames1958gm Do i need anything else to run eval? Like json or some other library? Claudio Restifo @Marmiz Mar 08 2018 02:50 UTC @markclynch eval evaluates function expressions as a string, so make sure you are passing one markclynch @markclynch Mar 08 2018 02:50 UTC @Marmiz Thanks I am. But I'm thinking I'm missing something in the header file or something. CamperBot @camperbot Mar 08 2018 02:50 UTC markclynch sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles: :star2: 1184 | @marmiz |http://www.freecodecamp.org/marmiz markclynch @markclynch Mar 08 2018 02:50 UTC Cause if I copy paste my code to codepen.io it works fine But wont work in VS running natively on my browser does chrome maybe disallow eval function? Claudio Restifo @Marmiz Mar 08 2018 02:51 UTC @markclynch hopefully you should never use eval anyway! markclynch @markclynch Mar 08 2018 02:51 UTC calculator program :P what else am I supposed to do? Claudio Restifo @Marmiz Mar 08 2018 02:53 UTC anyway browser should not prevent you to use eval anyway markclynch @markclynch Mar 08 2018 02:53 UTC <!DOCTYPE html> <head> <title>js Calculator</title> <link rel = "stylesheet" href="C:\Users\mark\AppData\Local\atom\app-1.18.0\Code Projects\Calculator\style.css"> </head> <body> <h1>Javascript Calculator</h1> <div id='calculator'> <form> <input type='text' id='display' disabled> <br> <input type='button' value='C' id='keys' onclick='toScreen("c")'> <input type='button' value='CE' id='keys' onclick='clearScreen()'> <input type='button' value='^2' id='keys' onclick='squared()'> <input type='button' value='+' id='keys' onclick='toScreen("+")'> <br> <input type='button' value='7' id='keys' onclick='toScreen("7")'> <input type='button' value='8' id='keys' onclick='toScreen("8")'> <input type='button' value='9' id='keys' onclick='toScreen("9")'> <input type='button' value='-' id='keys' onclick='toScreen("-")'> <br> <input type='button' value='4' id='keys' onclick='toScreen("4")'> <input type='button' value='5' id='keys' onclick='toScreen("5")'> <input type='button' value='6' id='keys' onclick='toScreen("6")'> <input type='button' value='*' id='keys' onclick='toScreen("*")'> <br> <input type='button' value='1' id='keys' onclick='toScreen("1")'> <input type='button' value='2' id='keys' onclick='toScreen("2")'> <input type='button' value='3' id='keys' onclick='toScreen("3")'> <input type='button' value='/' id='keys' onclick='toScreen("/")'> <br> <input type='button' value='0' id='keys' onclick='toScreen("0")'> <input type='button' value='.' id='keys' onclick='toScreen(".")'> <input type='button' value='=' id='equals' onclick='answer()'> <h3>Simple Calculator<h3> </form> </div> </body> <script src="C:\Users\mark\AppData\Local\atom\app-1.18.0\Code Projects\Calculator\main.js"></script> is there something wrong in my head here? Claudio Restifo @Marmiz Mar 08 2018 02:54 UTC @markclynch the css and JS are loaded correctly in page? You can verify it in the dev tools the path may be wrong, besides that I don't see anything else so far markclynch @markclynch Mar 08 2018 02:55 UTC @Marmiz 3index.html:36 Uncaught ReferenceError: answer is not defined at HTMLInputElement.onclick (index.html:36) Claudio Restifo @Marmiz Mar 08 2018 02:55 UTC there you go markclynch @markclynch Mar 08 2018 02:56 UTC  var box = document.getElementById('display'); function toScreen(x) { box.value+=x; if (x==='c'){ box.value=''; } function answer() { x=box.value; x=eval(x); box.value=x; } } so where is the problem then? I thought answer is defined by this function here. Sorin Ruse @sorinr Mar 08 2018 02:56 UTC @markclynch if you load your html page over an web server your href and src path must be relative to the root markclynch @markclynch Mar 08 2018 02:57 UTC @sorinr not even close to understanding what that means. Claudio Restifo @Marmiz Mar 08 2018 02:59 UTC @markclynch how's your file tree structured? assuming you have: index.html css/myCss.css js/myJs.js your path should be src="css/myCss.css" src="js/myJs.js" Sorin Ruse @sorinr Mar 08 2018 02:59 UTC @markclynch lets say you try to access your index.html from localhost:8000/index.html. so your index.html page resides in the root of the web server markclynch @markclynch Mar 08 2018 02:59 UTC ok Sorin Ruse @sorinr Mar 08 2018 02:59 UTC @markclynch exactly what @Marmiz pointed out markclynch @markclynch Mar 08 2018 02:59 UTC C:\Users\mark\OneDrive\Documents\index.html C:\Users\mark\OneDrive\Documents\main.js oh wait, I just installed this thing...said something about a path and I need to restart. Is that the problem then? switched from Atom.io to VS when I installed it said adding path after restart. @sorinr @Marmiz markclynch @markclynch Mar 08 2018 03:06 UTC I'm so dumb. lol Claudio Restifo @Marmiz Mar 08 2018 03:06 UTC @markclynch yes, your path are wrong. But you don't need an editor for that. Simply understand where your file lives, then from the file source you are serving, "navigate" to where you want to pick up your files markclynch @markclynch Mar 08 2018 03:06 UTC had wrong path lol @Marmiz Can't believe I kept old path from atom.io grrrrrrrrrrr Sorin Ruse @sorinr Mar 08 2018 03:07 UTC @markclynch one question. how are you loading your html page into your browser? over file:/// protocol or http:// ? markclynch @markclynch Mar 08 2018 03:09 UTC file is that ok? @sorinr I feel like such a newb gosh. Sorin Ruse @sorinr Mar 08 2018 03:12 UTC @markclynch np. we all have been newb at some point in time. try to install a local webserver like xampp, wamp etc and test your code there Daniel @DanJP2016 Mar 08 2018 03:12 UTC finished with the tic tac toe challenge for now. feed back on is welcome. https://codepen.io/bones211/pen/JpQpWL?editors=0010 Claudio Restifo @Marmiz Mar 08 2018 03:15 UTC @markclynch to extend what @sorinr just proposed, I like serve.js great for serving static websites in one command JoEezy @JoEeeezy_twitter Mar 08 2018 03:15 UTC can someone tell me if I'm missing something or do I need to change something : https://i.imgur.com/Y6fmbJ0.png this one is frustrating :tired_face: abraham anak agung @padunk Mar 08 2018 03:18 UTC @JoEeeezy_twitter your code will return the last match of arr[1][i] not comparing all. JoEezy @JoEeeezy_twitter Mar 08 2018 03:18 UTC i thought the !== -1; would return false if not found according to the javascript docs for indexOf .. but it doesn't seem to be working on letters that aren't in the first array at all abraham anak agung @padunk Mar 08 2018 03:20 UTC @JoEeeezy_twitter first you need to lowercase it and compare each of arr[1] string to arr[0] string. Claudio Restifo @Marmiz Mar 08 2018 03:20 UTC @JoEeeezy_twitter your code can be optimised as well, you can just return false as soon as a letter don't mach :) JoEezy @JoEeeezy_twitter Mar 08 2018 03:21 UTC aaah that makes alot more sense ty i was wondering why all the arrays on the side had in common it was because it was just checking the last letter then lol Claudio Restifo @Marmiz Mar 08 2018 03:23 UTC example: "hello" "heyoh" you can stop evaluating after you verify that the y is not in hello, no need to continue on the oh. Make sense? JoEezy @JoEeeezy_twitter Mar 08 2018 03:24 UTC yeah :smile: that sounds like a much better way to do it Tai Jones @taiJones00 Mar 08 2018 03:25 UTC https://codepen.io/taiJones00/pen/oEKZYL?editors=0011 Any idea why allTimeUsers doesn't render on xs screens? Nevermind. They are. For some reason they're just shifted off the screen Yeah I had col-xs-offset-12. Can't do that Claudio Restifo @Marmiz Mar 08 2018 03:34 UTC @taiJones00 no but you can hide column for specific sizes :) Tai Jones @taiJones00 Mar 08 2018 03:34 UTC Hide what column? @Marmiz Claudio Restifo @Marmiz Mar 08 2018 03:37 UTC I thought that you wanted to hide a column by offsetting it to the whole length of the row. If that's not the case simply ignore the previous post Mike Bilyeu @mbilyeu1 Mar 08 2018 03:47 UTC Can anyone help explain the "*" in regex I'm not fully understanding whats it's doing? abraham anak agung @padunk Mar 08 2018 03:52 UTC @mbilyeu1 * means 0 or more occurrences of the preceding item from MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions Mike Bilyeu @mbilyeu1 Mar 08 2018 03:59 UTC @padunk hmm abraham anak agung @padunk Mar 08 2018 04:02 UTC @mbilyeu1 :coffee: Mike Bilyeu @mbilyeu1 Mar 08 2018 04:05 UTC What does this mean "Matches the preceding expression 0 or more times. Equivalent to {0,}." ? @padunk abraham anak agung @padunk Mar 08 2018 04:06 UTC @mbilyeu1 did you read the docs ? Matches the preceding expression 0 or more times. Equivalent to {0,}. For example, /bo*/ matches 'boooo' in "A ghost booooed" and 'b' in "A bird warbled" but nothing in "A goat grunted". so it either match bo or b because o can be 0 Mike Bilyeu @mbilyeu1 Mar 08 2018 04:10 UTC @padunk what would /o*/g do? abraham anak agung @padunk Mar 08 2018 04:12 UTC @mbilyeu1 try it at www.regex101.com i think it will match either o or anything Mike Bilyeu @mbilyeu1 Mar 08 2018 04:12 UTC @padunk wait is it just the opposite of "+"? abraham anak agung @padunk Mar 08 2018 04:13 UTC @mbilyeu1 + is match at least 1 Mike Bilyeu @mbilyeu1 Mar 08 2018 04:17 UTC @padunk I think Im getting it now after using regex101 @padunk thanks CamperBot @camperbot Mar 08 2018 04:17 UTC mbilyeu1 sends brownie points to @padunk :sparkles: :thumbsup: :sparkles: :cookie: 468 | @padunk |http://www.freecodecamp.org/padunk JoEezy @JoEeeezy_twitter Mar 08 2018 05:03 UTC i finally hit a wall ... and now i have to read the solution :cry: Claudio Restifo @Marmiz Mar 08 2018 05:18 UTC don't do it @JoEeeezy_twitter you can do it without! you learn more from struggles than reading other people's code ask for help here, explain your code out loud, code on a whiteboard then go back to your program Frosty427 @Frosty427 Mar 08 2018 06:43 UTC can i get somehelp? gonna post code now <li class="nav-item"> <a class="nav-link mac" href="#">Mac</a> </li> why isnt mac moving to the right? wait .mac { right: 500px !important; } abraham anak agung @padunk Mar 08 2018 06:53 UTC @Frosty427 not good with css, but try add position, either relative, absolute or whatever :smile: Frosty427 @Frosty427 Mar 08 2018 06:54 UTC when i used relative it messed up my mac logo and moved it behind TV any reason why? @padunk abraham anak agung @padunk Mar 08 2018 06:55 UTC @Frosty427 sorry, i told you i am not good with css. you should try and play with it Frosty427 @Frosty427 Mar 08 2018 06:55 UTC ok thanks h1tag @h1tag Mar 08 2018 07:08 UTC @Frosty427 you can use float Frosty427 @Frosty427 Mar 08 2018 07:08 UTC ok ill try it out h1tag @h1tag Mar 08 2018 07:12 UTC or margin if you want to have more control where it's placed @Frosty427 Frosty427 @Frosty427 Mar 08 2018 07:13 UTC @h1tag i found position absolute to be the way but now i have to figure out how to fix it when it goes to moble mobile* h1tag @h1tag Mar 08 2018 07:14 UTC @Frosty427 use percentages or em units Frosty427 @Frosty427 Mar 08 2018 07:14 UTC how would i go about that? h1tag @h1tag Mar 08 2018 07:15 UTC right: 10em; or right: 50%; Sorin Ruse @sorinr Mar 08 2018 07:16 UTC @Frosty427 use media queries. % or em units as @h1tag said are quite ok but do not work on all situations Frosty427 @Frosty427 Mar 08 2018 07:16 UTC i havent really learned media queries h1tag @h1tag Mar 08 2018 07:17 UTC @sorinr yea, you use them in addition to media queries, right? @Frosty427 you have to, if you want to be able to create responsive websites without the help of external libraries Sorin Ruse @sorinr Mar 08 2018 07:19 UTC @h1tag u may use only % or ems if your layout allows it otherwise you are forced to use media queries to change the all layout for mobile/tablet h1tag @h1tag Mar 08 2018 07:20 UTC @sorinr no, I mean you use them both at the same time for best results @sorinr and welcome back! Frosty427 @Frosty427 Mar 08 2018 07:21 UTC now i have another problem when i added in supp this happend Sorin Ruse @sorinr Mar 08 2018 07:21 UTC @h1tag yes. u may use them both. nice to be back :) Frosty427 @Frosty427 Mar 08 2018 07:22 UTC .fa-apple { position: absolute; left: 200px; } .navbar{ padding: 3px !important; background-color: #333333 !important; } a { font-size: 14px !important; color: white !important; } .mac { position: absolute; left: 280px; } .ipad { left: 395px; position: absolute; } .iphone { position: absolute; left: 500px !important; } .watch { position: absolute; left: 600px; } .tv { position: absolute; right: 630px; } .music { position: absolute; right: 530px; } .supp { position: absolute; right: 430px } <li class="nav-item"> <a class="nav-link mac" href="#">Mac</a> </li> <li class="nav-item"> <a class="nav-link ipad" href="#">iPad</a> </li> <li class="nav-item"> <a class="nav-link iphone" href="#">iPhone</a> </li> <li class="nav-item"> <a class="nav-link watch" href="#">Watch</a> </li> <li class="nav-item"> <a class="nav-link tv" href="#">TV</a> </li> <li class="nav-item"> <a class="nav-link music" href="#">Music</a> </li> <li class="nav-item"> <a class="nav-link supp" href="#">Support</a> </li> Sorin Ruse @sorinr Mar 08 2018 07:22 UTC @Frosty427 better put up your html and css into a codepen and share the link with us Frosty427 @Frosty427 Mar 08 2018 07:23 UTC got it Sorin Ruse @sorinr Mar 08 2018 07:28 UTC @Frosty427 ok. as i see you are trying to recreate the apple.com site. right? h1tag @h1tag Mar 08 2018 07:28 UTC @Frosty427 increase the padding on the navbar Frosty427 @Frosty427 Mar 08 2018 07:29 UTC @sorinr yes @h1tag ive tried that but its always to big Joshua Swift @joshuaswift Mar 08 2018 07:29 UTC has anyone else experienced the weather api returning different locations for the same coords? Frosty427 @Frosty427 Mar 08 2018 07:29 UTC i can never get it right and even when i do the items stick to the bottom h1tag @h1tag Mar 08 2018 07:30 UTC @joshuaswift it can be inaccurate sometimes Joshua Swift @joshuaswift Mar 08 2018 07:30 UTC I sometimes get this location in Japan { "coord":{ "lon":139, "lat":35 }, "weather":[ { "id":803, "main":"Clouds", "description":"broken clouds" } ], "base":"stations", "main":{ "temp":28.23, "pressure":1011, "humidity":74, "temp_min":26, "temp_max":31 }, "visibility":10000, "wind":{ "speed":3.6, "deg":230 }, "clouds":{ "all":75 }, "dt":1499396400, "sys":{ "type":1, "id":7616, "message":0.0043, "country":"JP", "sunrise":1499369792, "sunset":1499421666 }, "id":1851632, "name":"Shuzenji", "cod":200 } and other times get the correct location in the UK but the lat and long is exactly the same I'm not sure how to account for this in my code h1tag @h1tag Mar 08 2018 07:32 UTC I thought that it gives you different states or cities, not countries I haven't had this happen to me before Sorin Ruse @sorinr Mar 08 2018 07:32 UTC @Frosty427 then make your nav display: flex; justify-content:space-evenly;height:64px; align-items:center; abraham anak agung @padunk Mar 08 2018 07:32 UTC @joshuaswift what is your code? Frosty427 @Frosty427 Mar 08 2018 07:32 UTC how do i appl that? apply* in css? Sorin Ruse @sorinr Mar 08 2018 07:33 UTC yes @Frosty427 Joshua Swift @joshuaswift Mar 08 2018 07:33 UTC Frosty427 @Frosty427 Mar 08 2018 07:33 UTC @sorinr like this? Sorin Ruse @sorinr Mar 08 2018 07:34 UTC @Frosty427 yes. but you should cancel all other css for elements in navbar except the hover states etc Frosty427 @Frosty427 Mar 08 2018 07:36 UTC @sorinr it put everything in the center abraham anak agung @padunk Mar 08 2018 07:37 UTC @joshuaswift it show shuzenji at first but then it show correct location. weird Joshua Swift @joshuaswift Mar 08 2018 07:38 UTC @padunk yeah it's really strange. I don't know if its just my location or a common bug but I'm kind of feeling like just leaving this project now, I've been coming back to it every few months to see if the available APIs are more stable but none of them seem to work very well Frosty427 @Frosty427 Mar 08 2018 07:41 UTC @sorinr is there maybe a way to put spacing inbetween them? so they line up like the apple site? abraham anak agung @padunk Mar 08 2018 07:43 UTC @joshuaswift or you can delete locationWeather() and change it to (function locationWeather(){})() nahh...it don't change it h1tag @h1tag Mar 08 2018 07:49 UTC Frosty427 @Frosty427 Mar 08 2018 07:50 UTC @h1tag oh boy my mind is goona explde h1tag @h1tag Mar 08 2018 07:50 UTC lol overwhelmed? Frosty427 @Frosty427 Mar 08 2018 07:51 UTC yea can i add px to space-evenly? to push them apart? h1tag @h1tag Mar 08 2018 07:51 UTC I don't think so Frosty427 @Frosty427 Mar 08 2018 07:52 UTC is there any way to push them apart h1tag @h1tag Mar 08 2018 07:52 UTC you can try to add some margin, but I don't know if it works well with flexbox Sorin Ruse @sorinr Mar 08 2018 07:55 UTC @Frosty427 the problem is that u r using bootstrap 4 that also uses flexbox so you should take a look at this example @Frosty427 use devtools and grab the nav part and use it as your template for the navigation part Frosty427 @Frosty427 Mar 08 2018 07:58 UTC @sorinr im trying to recreate the site fully in bootstrap 4 @sorinr where can i find the devtools? @h1tag hey how would i implement these fonts https://developer.apple.com/fonts/ i downloaded opend the file but i didnt know what to do Sorin Ruse @sorinr Mar 08 2018 08:04 UTC @Frosty427 try F12. think its valid for all browsers h1tag @h1tag Mar 08 2018 08:06 UTC @Frosty427 or right click>inspect element on the navbar Frosty427 @Frosty427 Mar 08 2018 08:06 UTC @sorinr the key? Sorin Ruse @sorinr Mar 08 2018 08:06 UTC @Frosty427 yes Frosty427 @Frosty427 Mar 08 2018 08:06 UTC on the apple website? oh i get it @sorinr  wait sorry .navbar { padding: 1px; display: flex; justify-content: space-evenly; height: 45px; align-items: center; position: absolute; top: 0; right: 0; left: 0; z-index: 9999; display: block; margin: 0; width: 100%; min-width: 1024px; height: 48px; max-height: 44px; background: #333; background: rgba(0,0,0,0.8); font-size: 17px; } it didnt work maybe put !important Sorin Ruse @sorinr Mar 08 2018 08:12 UTC @Frosty427 got to go to bad. i'm wake up for more then 30 hours right now. i'll try later today to give you a simple example on how to layout the navigation(apple style) using bootstrap 4 h1tag @h1tag Mar 08 2018 08:12 UTC @Frosty427 about the font: you can only use it when developing software for apple products Frosty427 @Frosty427 Mar 08 2018 08:14 UTC @h1tag shiza that sucks Viperish @Viperish Mar 08 2018 08:18 UTC Can someone explain to me why this works? https://imgur.com/lrXCGkQ target classes have no child elements, and shouldn't the correct answer be(".well:nth-child(2)")
Marianissimus
@Marianissimus
Mar 08 2018 08:19 UTC
those are jQuery methods. basically, it says: when document loads (when the html has rendered), do this and that
Viperish
@Viperish
Mar 08 2018 08:20 UTC
I tried to google and got the right answers but no explanations as to why they work
$(".well:nth-child(2)") doesnt work but$(".well :nth-child(2)") does
The more I look into this the more confused I get
Marianissimus
@Marianissimus
Mar 08 2018 08:23 UTC
the space is the problem there?
Viperish
@Viperish
Mar 08 2018 08:23 UTC
Well yeah kinda
What does the space do
Aa... it's quite different, I didn't know that. Thanks for asking that question
Frosty427
@Frosty427
Mar 08 2018 08:25 UTC
guys
i need some help
im trying to recreate the apple website
im on the navbar
trying to put space in between the nav items
re creating it in bootstrap 4 btw
Marianissimus
@Marianissimus
Mar 08 2018 08:26 UTC
copy-paste from that link you were afraid to open:
li:nth-child(4)
will select the a list element which is the 4th child of any parent.

on the other hand:

li :nth-child(4)
will select the 4th child inside any list element (<li></li>)
Viperish
@Viperish
Mar 08 2018 08:26 UTC
Afraid to open?
Marianissimus
@Marianissimus
Mar 08 2018 08:26 UTC
just kidding
Frosty427
@Frosty427
Mar 08 2018 08:26 UTC
Marianissimus
@Marianissimus
Mar 08 2018 08:27 UTC
So the space does a lot of difference.
@Frosty427 what's the problem?
Frosty427
@Frosty427
Mar 08 2018 08:28 UTC
@Marianissimus im trying to put space in between the nav items
like the apple website
Viperish
@Viperish
Mar 08 2018 08:28 UTC
Sorry I don't get it
Frosty427
@Frosty427
Mar 08 2018 08:29 UTC
Marianissimus
@Marianissimus
Mar 08 2018 08:29 UTC
just select the nav items and add margins to them. this is a possible solution:
.nav-item{
margin-right: 10px;
}
@Viperish without the space: selects the nth child (inside the ul in this example). with space: select the nth child - inside the li!
Frosty427
@Frosty427
Mar 08 2018 08:35 UTC
@Marianissimus that worked thanks
CamperBot
@camperbot
Mar 08 2018 08:35 UTC
frosty427 sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
Marianissimus
@Marianissimus
Mar 08 2018 08:42 UTC
@Viperish here, I made a pen trying to understand this:
https://codepen.io/marianissimus/pen/MVgzwJ
Viperish
@Viperish
Mar 08 2018 08:42 UTC
So without space that element is the child and with space we're looking for the child of that element
Did I understand it correctly?
Yup I think I got it now
Thanks a lot @Marianissimus :))
CamperBot
@camperbot
Mar 08 2018 08:44 UTC
viperish sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
jjzep
@jjzep
Mar 08 2018 08:56 UTC
Looking for an article or resource for best practices regarding error handling. Does anyone have a recommendation?
Frosty427
@Frosty427
Mar 08 2018 09:05 UTC
hey guys
im remaking the apple website in bootstrap
and when it goes to mobile i want the apple logo to jump to the middle of the navbar
Marianissimus
@Marianissimus
Mar 08 2018 09:06 UTC
which middle? vertically or horizontally?
Frosty427
@Frosty427
Mar 08 2018 09:07 UTC
no you see where the menu button is?
i want it to be lined up with that
in the middle tho
Marianissimus
@Marianissimus
Mar 08 2018 09:08 UTC
by menu button you mean the hamburger icon?
Frosty427
@Frosty427
Mar 08 2018 09:09 UTC
yes
a {
font-size: 14px !important;
color: white !important;
display: flex;
justify-content: space-evenly;
height: 40px;
align-items: center;
margin-right: 60px;
}

.navbar {
background: rgba(0,0,0,0.8) !important;
}
thats my css
Marianissimus
@Marianissimus
Mar 08 2018 09:10 UTC
you can add some margin-left. OR chose the hard way and really align them, which means creating a new container OR a different approach to the whole nav
Frosty427
@Frosty427
Mar 08 2018 09:11 UTC
can i add margin left specifically when the navbar goes to mobile?
Marianissimus
@Marianissimus
Mar 08 2018 09:11 UTC
of course, we can use a media query
however, you still have some problems. let's solve them first
Frosty427
@Frosty427
Mar 08 2018 09:12 UTC
ok
Marianissimus
@Marianissimus
Mar 08 2018 09:13 UTC
ok. first, remove the !important declarations, they are not supposed to be used like this. they are for especially harder to do over-rides, not for basic styling
Frosty427
@Frosty427
Mar 08 2018 09:14 UTC
Marianissimus
@Marianissimus
Mar 08 2018 09:14 UTC
then, let's find another way to position the logo. position: absolute and left: 400px means a very fixed position that you can't handle well when resizing / for a responsive layout
Frosty427
@Frosty427
Mar 08 2018 09:14 UTC
now its not the colod i want it
color*
Marianissimus
@Marianissimus
Mar 08 2018 09:16 UTC
ok, you have to make an important decision now: 1. either you use bootstrap as you already started to do. 2. style it with css only
Frosty427
@Frosty427
Mar 08 2018 09:16 UTC
this is with !important
you mean stop using bootstrap entirely?
Marianissimus
@Marianissimus
Mar 08 2018 09:17 UTC
no, use it
but learn it a little more better
Frosty427
@Frosty427
Mar 08 2018 09:17 UTC
can i style what i want in html?
Marianissimus
@Marianissimus
Mar 08 2018 09:17 UTC
for instance, bootstrap has a class for the brand in the navbar
Frosty427
@Frosty427
Mar 08 2018 09:17 UTC
where can i find the dev tools?
Marianissimus
@Marianissimus
Mar 08 2018 09:18 UTC
the flow is this: 1. make the layout with bootstrap (position, margins, etc) 2. style it your own with custom css (colors, fonts, et)
so first worry about the positions. colors come later
Frosty427
@Frosty427
Mar 08 2018 09:19 UTC
ok
how can i edit the padding
thats why im trying to find dev tools
Marianissimus
@Marianissimus
Mar 08 2018 09:20 UTC
you will find that the logo should sit in this container: <a class="navbar-brand" href="#">Apple</a>
so there is a class - named "navbar-brand" that should hold your apple logo, even if it's just an icon
when you place all components where they should be: navbar, navbar-brand, etc, the bootstrap automatically does most of the positioning / responsiveness for you
only then you can style it as you like it: a certain margin, or color, etc. but not fixed, or absolute positions, they will conflict with what bootstrap is already doing
Frosty427
@Frosty427
Mar 08 2018 09:24 UTC
ok
give me a second
now the icon is 2 small
wait
let me put this in cp
Frosty427
@Frosty427
Mar 08 2018 09:30 UTC
@Marianissimus
Fabien SHAN
@X140hu4
Mar 08 2018 09:32 UTC
Frosty427
@Frosty427
Mar 08 2018 09:36 UTC
@X140hu4 thanks
CamperBot
@camperbot
Mar 08 2018 09:36 UTC
frosty427 sends brownie points to @x140hu4 :sparkles: :thumbsup: :sparkles:
dinesh
@1532j0004kg
Mar 08 2018 09:37 UTC
warm evening coders ...
Marianissimus
@Marianissimus
Mar 08 2018 09:37 UTC
@Frosty427 here. see what I did different - I commented out your line with the logo:
https://codepen.io/marianissimus/pen/VXZqop
dinesh
@1532j0004kg
Mar 08 2018 09:37 UTC
can u please spend sometime to review this pen ? , Thanks ... :smile:
Frosty427
@Frosty427
Mar 08 2018 09:39 UTC
@Marianissimus how do i push if away from Mac
Marianissimus
@Marianissimus
Mar 08 2018 09:40 UTC
@Frosty427 Basically, I nested the elements like bootstrap does: inside li.nav-item add and a with class "navbar-brand" and inside that the logo made with font-awesome i tag
Frosty427
@Frosty427
Mar 08 2018 09:41 UTC
o
ok*
Marianissimus
@Marianissimus
Mar 08 2018 09:41 UTC
a.navbar-brand{
margin-right: 200px;
}
it is harder to select when using bootstrap, because of specificity. you need to be as specific as you can when selecting elements - use inspector for that
Frosty427
@Frosty427
Mar 08 2018 09:42 UTC
ok
Marianissimus
@Marianissimus
Mar 08 2018 09:42 UTC
so .navbar-brand won't work, but a.navbar-brand works, because it is more specific
Frosty427
@Frosty427
Mar 08 2018 09:42 UTC
oh
wow
ok
holy
this opens up so much possibility now
i didnt even think of that
Marianissimus
@Marianissimus
Mar 08 2018 09:43 UTC
yeah, bootstrap is very useful, once you get the hang of it. but you need some practice before
Frosty427
@Frosty427
Mar 08 2018 09:44 UTC
font-size: 14px
color: white;
}
why wont that work?
abraham anak agung
Mar 08 2018 09:45 UTC
@1532j0004kg working good. Couple of feedback you don't have reset button and stop button should be pause button when the timer start.
dinesh
@1532j0004kg
Mar 08 2018 09:46 UTC
Thanks.
but Fcc doesnot required reset right?
just for clarification !
abraham anak agung
Mar 08 2018 09:47 UTC
@1532j0004kg idk, i forget, but it is good to have one :smile:
dinesh
@1532j0004kg
Mar 08 2018 09:47 UTC
ya right :smile:
CamperBot
@camperbot
Mar 08 2018 09:47 UTC
1532j0004kg sends brownie points to @padunk :sparkles: :thumbsup: :sparkles:
Marianissimus
@Marianissimus
Mar 08 2018 09:49 UTC
@Frosty427 same reason. you need to select a lot more than that. basically, select every element above it until it works:
ul.navbar-nav li.nav-item a.nav-link {
font-size: 14px;
color: red;
}
(i used color: red to see it better);
Donnie
@Donnie-D
Mar 08 2018 09:50 UTC
if we declare a variable globally but give it a value inside a local function, would the global variable get that value?
Fabien SHAN
@X140hu4
Mar 08 2018 09:50 UTC
@Donnie-D yes
Frosty427
@Frosty427
Mar 08 2018 09:50 UTC
this thing is now lower than mac
Fabien SHAN
@X140hu4
Mar 08 2018 09:51 UTC
That's called scope
Frosty427
@Frosty427
Mar 08 2018 09:51 UTC
maybe margin bottom will help?
Donnie
@Donnie-D
Mar 08 2018 09:53 UTC
@X140hu4 I am trying to pass 'quote' value to my div this way in order to get to the bottom of the issue why my code isn't working but it seems to be bugging.
https://codepen.io/Donnie-D/pen/BJBoZd
Marianissimus
@Marianissimus
Mar 08 2018 09:53 UTC
@Frosty427 yes, because it's larger.
Donnie
@Donnie-D
Mar 08 2018 09:54 UTC
@X140hu4 if you look at the bottom of my html. there is a div with try id and at the bottom of my js i am trying to pass it the quote value but its not having it
Fabien SHAN
@X140hu4
Mar 08 2018 09:55 UTC
@Donnie-D You mean for the tweet link?
Donnie
@Donnie-D
Mar 08 2018 09:56 UTC
@X140hu4
https://codepen.io/Donnie-D/pen/BJBoZd
watch this one again please. I commented it out before. sorry
why is the div with the id= 'try' not being able to import the value of quote? @X140hu4
Fabien SHAN
@X140hu4
Mar 08 2018 09:58 UTC
@Donnie-D That's because it is run when your page loads. At this moment your quote is empty
@Donnie-D That's why also you don't see the 12 that was in the div
@Donnie-D Because it got overwritten on page load
If you put $('#try').html(quote); //this onein your #forquote on click function it will work as you intend Donnie @Donnie-D Mar 08 2018 10:00 UTC @X140hu4 but the function that changes the quote value is also in$.ready. also i am changing the value of div within the ready function
Frosty427
@Frosty427
Mar 08 2018 10:00 UTC
@Marianissimus ok i fixed that problem i just have the problem of when it goes to mobile
i need the shopping bag and the apple font to bot stay on the navbar
the shopping bag all the way to the right and the apple font in the middle\
Fabien SHAN
@X140hu4
Mar 08 2018 10:02 UTC
@Donnie-D The code in the $.ready will be run when the page is ready. So you add 2 eventListener and change one div with the value of quote which is empty. @Donnie-D When you click on Press me [...]. It changes one div and a variable in the on.ready scope. It doesn't run the code that modifies the #try div @Donnie-D Because clicking on Press me [...] runs only the click event you assigned to the button. Nothing more, nothing less. @Donnie-D It doesn't re-run the code in$.ready
Marianissimus
@Marianissimus
Mar 08 2018 10:05 UTC
what shopping bag? let me see the codepen again @Frosty427
Donnie
@Donnie-D
Mar 08 2018 10:08 UTC
@X140hu4 but when i click on the click for quote button, thats when the global var quote gets a value assigned to it. I would have presumed that despite of that value being passed to the section , value still stays assigned to that global var quote. and that is why I am trying to pass that value once again at the end of but still within the .ready to another div, only to see if the quote retains its value that it was assigned to in the previous local scope
Frosty427
@Frosty427
Mar 08 2018 10:09 UTC
@Marianissimus sorry its natively on my computer
Max
@maxiwer
Mar 08 2018 10:09 UTC
Hello, programmers.
I have an issue that I can't be sure whether my string is even or odd. Why the heck I can't return 'jeez' String?
function palindrome(str) {
// Good luck!
var newStr = str.toLowerCase().replace(/[.*#_ ,]/gi, '');
if (newStr.length & 2 == 0) {
return 'jeez';
}
}

palindrome("My age is 0, 0 si ega ym.");
Frosty427
@Frosty427
Mar 08 2018 10:09 UTC
give me a second
abraham anak agung
Mar 08 2018 10:11 UTC
@maxiwer your if condition is wrong. and if you want to replace non words, you can just use \W
Marianissimus
@Marianissimus
Mar 08 2018 10:11 UTC
@maxiwer yes, you need an else or another return after the if.
Max
@maxiwer
Mar 08 2018 10:11 UTC
Marianissimus
@Marianissimus
Mar 08 2018 10:11 UTC
also, what do you mean by x & 2 == 0? maybe you were looking for % ?
abraham anak agung
Mar 08 2018 10:12 UTC
@maxiwer like @Marianissimus said. what is &2?
Max
@maxiwer
Mar 08 2018 10:12 UTC
LOL excuse me guys
there was a misspelling
Sweet Coding :)
@SweetCodingInc
Mar 08 2018 10:12 UTC
@padunk it tells you if newStr.length is even or odd
if number & 2 === 0 number is even
else odd
Marianissimus
@Marianissimus
Mar 08 2018 10:13 UTC
and i'm too lazy to check the regex:) what is it supposed to do?
abraham anak agung
Mar 08 2018 10:13 UTC
@SweetCodingInc really? don't know about it
Sweet Coding :)
@SweetCodingInc
Mar 08 2018 10:13 UTC
Marianissimus
@Marianissimus
Mar 08 2018 10:13 UTC
what is & ? there is no &. maybe %?
Sweet Coding :)
@SweetCodingInc
Mar 08 2018 10:13 UTC
it is much faster than %
abraham anak agung
Mar 08 2018 10:14 UTC
@SweetCodingInc ha bitwise, never use it much
i tought bitwise only have | ^ ~ :smile: nice to know. Thanks @SweetCodingInc
CamperBot
@camperbot
Mar 08 2018 10:15 UTC
padunk sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
Sweet Coding :)
@SweetCodingInc
Mar 08 2018 10:15 UTC
@padunk also add &(AND) and |(OR) to that list
note: it is different from && (logical AND) and ||(logical OR)
Donnie
@Donnie-D
Mar 08 2018 10:15 UTC
@X140hu4 i think i can see what you mean now lol
abraham anak agung
Mar 08 2018 10:16 UTC
yeah i know @SweetCodingInc
Fabien SHAN
@X140hu4
Mar 08 2018 10:16 UTC
@Donnie-D It is a question of timing here :)
Donnie
@Donnie-D
Mar 08 2018 10:16 UTC
yes i guess. and i am not always good with it lol
nicely caught man
thanks
Fabien SHAN
@X140hu4
Mar 08 2018 10:17 UTC
@Donnie-D I had the same problems several times so no prob
Donnie
@Donnie-D
Mar 08 2018 10:17 UTC
lol
Sweet Coding :)
@SweetCodingInc
Mar 08 2018 10:24 UTC

@Marianissimus

% is remainder operator - So it will perform complete division, and stop when the division can no longer be continued wihtout adding a decimal point.

Everything in computer is binary. So numbers are also represented as binary.

Lets say you want to check if 5 is even number.

5, when converted to binary becomes 101 if you AND 101 with 1 (1 in binary is also 1)

you get 1 as result.

4 when converted to binary become 100if you AND 100 with 1
you get 0 as a result.

so at the maximum you AND last digit of your original number with 1.

Rules of AND

1 AND 1 = 1
1 AND 0 = 0
0 AND 1 = 0
0 AND 0 = 0

This it is much faster than any division operation.

PS:
Every even number, in binary, ends with 0
Every odd number, in binary, ends with 1

Frosty427
@Frosty427
Mar 08 2018 11:11 UTC
@Marianissimus hey you think you can help me again if your not busy?
mustimuu
@mustimuu
Mar 08 2018 11:39 UTC
guys
is there any place i can learn joomla?
Anas Abdennaim
@Aka-Dev
Mar 08 2018 11:47 UTC
mustimuu
@mustimuu
Mar 08 2018 11:49 UTC
@Aka-Dev thanks
CamperBot
@camperbot
Mar 08 2018 11:49 UTC
mustimuu sends brownie points to @aka-dev :sparkles: :thumbsup: :sparkles:
Anas Abdennaim
@Aka-Dev
Mar 08 2018 11:49 UTC
@mustimuu you're welcome
mustimuu
@mustimuu
Mar 08 2018 11:54 UTC
Anas Abdennaim
@Aka-Dev
Mar 08 2018 11:55 UTC
@mustimuu you can learn wordpress in codex wordpress https://codex.wordpress.org/
mustimuu
@mustimuu
Mar 08 2018 11:57 UTC

@Aka-Dev thank you.

one last thing. How do widgets work in wordpress?

CamperBot
@camperbot
Mar 08 2018 11:57 UTC
mustimuu sends brownie points to @aka-dev :sparkles: :thumbsup: :sparkles:
api offline
Fabien SHAN
@X140hu4
Mar 08 2018 11:57 UTC
@Aka-Dev Thanks!
Anas Abdennaim
@Aka-Dev
Mar 08 2018 12:19 UTC
@mustimuu you can look to the link https://codex.wordpress.org/WordPress_Widgets
Frosty427
@Frosty427
Mar 08 2018 12:20 UTC
can someone help me?
Anas Abdennaim
@Aka-Dev
Mar 08 2018 12:21 UTC
@Frosty427 may be
Frosty427
@Frosty427
Mar 08 2018 12:21 UTC
Anas Abdennaim
@Aka-Dev
Mar 08 2018 12:22 UTC
@Frosty427 what's do you need ?
Frosty427
@Frosty427
Mar 08 2018 12:22 UTC
i want to put the apple logo to the top right
this is bootstrap btw
Anas Abdennaim
@Aka-Dev
Mar 08 2018 12:22 UTC
Frosty427
@Frosty427
Mar 08 2018 12:23 UTC
@Frosty427 i want to put the apple icon to the top right when you go mobile
@Aka-Dev
Anas Abdennaim
@Aka-Dev
Mar 08 2018 12:27 UTC
@Frosty427 .navbar-toggler {
position: absolute;
top: 1rem;
right: 1rem;
}
@Frosty427 try this code
Frosty427
@Frosty427
Mar 08 2018 12:28 UTC
ok
it disappeared @Aka-Dev
Anas Abdennaim
@Aka-Dev
Mar 08 2018 12:30 UTC
it positioned to right now
Frosty427
@Frosty427
Mar 08 2018 12:31 UTC
hmm
give me 1 second
Frosty427
@Frosty427
Mar 08 2018 12:49 UTC
@Aka-Dev how can i move the apple logo instead of the toggler?
Gilbert
@GilTorch
Mar 08 2018 12:53 UTC
Guys I am learning react on the beta freecodecamp and my solutions is working but doesnt pass the test. The Challenge is called React: Controlled Input. find it here:https://beta.freecodecamp.org/en/challenges/react/create-a-controlled-input
Here's my code
class ControlledInput extends React.Component {
constructor(props) {
super(props);
this.state = {
input: ''
};
// change code below this line
this.handleChange=this.handleChange.bind(this);
// change code above this line
}
// change code below this line
handleChange(event){
this.setState({
input:event.target.value
})
}
// change code above this line
render() {
return (
<div>
{ /* change code below this line */}
<input onChange={this.handleChange} />
{ /* change code above this line */}
<h4>Controlled Input:</h4>
<p>{this.state.input}</p>
</div>
);
}
};
Stephen James
@sjames1958gm
Mar 08 2018 12:55 UTC
@GilTorch Add a value attribute which is equal to the input property of the component's state.
I think this is the part that is missing.
Gilbert
@GilTorch
Mar 08 2018 12:57 UTC
Thanks! It worked @sjames1958gm I
CamperBot
@camperbot
Mar 08 2018 12:57 UTC
giltorch sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9071 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Mar 08 2018 12:57 UTC
@GilTorch :+1:
Max
@maxiwer
Mar 08 2018 13:05 UTC
Hi again.
What the heck can't I solve this?
What's wrong? :)
function palindrome(str) {
// Good luck!
var newStr = str.toLowerCase().replace(/[.*#_ ,]/gi, '');
var newArray =  newStr.split("");

return newArray[0] == newArray[newArray.length-1];
}

palindrome("My age is 0, 0 si ega ym.");
@ezioda004
Mar 08 2018 13:08 UTC
@maxiwer You're comparing first and last element of the array, that doesnt mean its a palindrome. Its easier if you compare strings, rather than array. If you're going to use array then you'll have to compare each elements
Anas Abdennaim
@Aka-Dev
Mar 08 2018 13:21 UTC
@Frosty427 i think it's not possible
Frosty427
@Frosty427
Mar 08 2018 14:30 UTC
guys
how would i move the hamburger icon to the right and then move up the apple logo
ghnana
@ghnana
Mar 08 2018 17:53 UTC
Hello guys I designed this and I am struggling to implement it using css
Any ideas on how to go about it to make my design come out as shown? Thank you
@KWFE
Mar 08 2018 17:56 UTC
@khaduch thank u so much sir it works,,, still not in the same exacte line but you fixed the issue thank you so much again
CamperBot
@camperbot
Mar 08 2018 17:56 UTC
kwfe sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
Clayton Ingalls
@zapbampow
Mar 08 2018 18:12 UTC
So I'm working on the React and Redux section of the beta site. I've run into a problem on the "Manage State Locally First" section. I seem to be getting the correct outputs, but the system says I'm failing 2 of the tests. While it is most likely something with my code, maybe it is a problem with the system? Anyone familiar enough with this section that they could help if I post my code?
give it a post
maybe its not a problem with the code - there might be bugs in beta still
Clayton Ingalls
@zapbampow
Mar 08 2018 18:18 UTC
Sorry, reformatted.
class DisplayMessages extends React.Component {
constructor(props) {
super(props);
this.state = {
input: '',
messages: []
}
this.handleChange = this.handleChange.bind(this);
this.submitMessage = this.submitMessage.bind(this);
}
// add handleChange() and submitMessage() methods here
handleChange(event){
this.setState({input:event.target.value})
}

submitMessage(event){
event.preventDefault();
let newMessages =  this.state.messages.concat(this.state.input);
this.setState({messages:newMessages});
this.setState({input:''});
}

render() {
return (
<div>
<h2>Type in a new Message:</h2>
{ /* render an input, button, and ul here */ }
<form onSubmit={this.submitMessage}>
<input value={this.state.input} onChange={this.handleChange}></input>
</form>

<ul>
{this.state.messages.map(function(message){
return <li>{message}</li>
})}
</ul>
{ /* change code above this line */ }
</div>
);
}
};
so what are the errors
Clayton Ingalls
@zapbampow
Mar 08 2018 18:20 UTC
When I run it, it says that I fail both of these requirements.
I'm realizing my copy and pasting skills are failing me today. These are the errors.
1. Clicking the Add message button should call the method submitMessage which should add the current input to the messages array in state.
2. The submitMessage method should clear the current input.
Frosty427
@Frosty427
Mar 08 2018 18:30 UTC
hey guys
can i get help
Clayton Ingalls
@zapbampow
Mar 08 2018 18:32 UTC
I can try. What are you working on?
Frosty427
@Frosty427
Mar 08 2018 18:39 UTC
bootstrap
4
give me 1 scond
Frosty427
@Frosty427
Mar 08 2018 19:14 UTC
@zapbampow sorry for the delay i drop 3 glass cups
markclynch
@markclynch
Mar 08 2018 19:17 UTC
Hey guys I'm looking to add a little style to my calculator. I'm just needing a little push in the right direction here.
I've got everything set up correctly and the calculator works fine, but I added a disco button with bringTheFunk function and I want that function to randomly change the colors of the keys and possibly play some george clinton. Haha, I'm guessing I need:
1. a way to change the css color.
2. Math.floor(Math.random() for randomizing the basic colors
3. Some funky music that plays onclick.
I'm thinking that for math.random function I'll pick 5 colors and define the return as a variable, that variable will define preselected colors.
Problem I think is I may need to change some ID's for each key and I'll need a timer to put stop the bringTheFunk on click, will I need some jQuery for this I guess?
Gulsvi
@gulsvi
Mar 08 2018 19:33 UTC
@markclynch sounds funky :) yes, you'll need JavaScript (or jQuery) for that. This site will give you free sounds to use, but .wav/mp3 files can be tricky on mobile. https://freesound.org/search/?q=funk
@Frosty427 What's your question? No need to ask if you can get help - just ask the question and we'll try to help.
Frosty427
@Frosty427
Mar 08 2018 19:37 UTC
ok
give me one second
Gulsvi
@gulsvi
Mar 08 2018 19:37 UTC
You said that last time :p
one hour ago, hope I can help lol
Frosty427
@Frosty427
Mar 08 2018 19:37 UTC
im srs this time
@gulsvi i have to upload images
just give me some time
Frosty427
@Frosty427
Mar 08 2018 19:42 UTC
@gulsvi
ok
so if you go to the codepen
youll see when i put one of the images in an anchor
and then it ruined everything
and now they are piled
Gulsvi
@gulsvi
Mar 08 2018 19:44 UTC
@Frosty427 The homepod image?
Frosty427
@Frosty427
Mar 08 2018 19:44 UTC
yes
Gulsvi
@gulsvi
Mar 08 2018 19:45 UTC
@Frosty427 This css limits all of your <a> tags to be 40px high:
a {
display: flex;
justify-content: space-evenly;
height: 40px;
align-items: center;
margin-right: 55px;
margin-left: 10px;
}
Best to use a class name instead of a in your css for that
Frosty427
@Frosty427
Mar 08 2018 19:46 UTC
ok
Gulsvi
@gulsvi
Mar 08 2018 19:46 UTC
But, I'm not sure what you mean by "piled" or if that fixes the issue you are discussing
Your image is overflowing out of that 40px high <a> tag and other images are stacking on top
Frosty427
@Frosty427
Mar 08 2018 19:48 UTC
im trying to replicate apple.com\
and the images have links on them
Gulsvi
@gulsvi
Mar 08 2018 19:49 UTC
It appears those images are background images on the apple site
So, you could use a <section> tag to divide each section up and make the image a background-image instead in your CSS
Frosty427
@Frosty427
Mar 08 2018 19:51 UTC
im trying to recreate it in bootstrap 4
Gulsvi
@gulsvi
Mar 08 2018 19:51 UTC
Yes, that's how you would do it with bootstrap 4
Frosty427
@Frosty427
Mar 08 2018 19:52 UTC
give me a second
Gulsvi
@gulsvi
Mar 08 2018 19:52 UTC
If you don't want to write the text on top, the way you're doing it will work fine but everything in bootstrap goes in a container -> row -> column
Marianissimus
@Marianissimus
Mar 08 2018 19:52 UTC
I have my doubts. You would use some .hero or .jumbotrons for the top images, and then col-xl-6 for the following
Gulsvi
@gulsvi
Mar 08 2018 19:52 UTC
<div class="container">
<div class="row">
<div class="col">
<img src="https://s17.postimg.org/hpjobpryn/homepod.png" class="img-fluid">
</div>
</div>
</div>
Marianissimus
@Marianissimus
Mar 08 2018 19:53 UTC
So not as backgrounds, you couldn't align them with the text inside their divs
Frosty427
@Frosty427
Mar 08 2018 19:54 UTC
i have to go now but ill try again tomorrow
thanks for the help
Gulsvi
@gulsvi
Mar 08 2018 19:56 UTC
@Frosty427 If you have larger images, use those instead, but this is the basic idea: https://codepen.io/gulsvi/pen/rdNjGG?editors=1100
(if you don't want to use background images)
Gulsvi
@gulsvi
Mar 08 2018 20:03 UTC
But, they use background images:
Antonious Stewart
@Antonious-Stewart
Mar 08 2018 20:51 UTC
$(document).ready(function(){$("button").click(function(e){
e.preventDefault();
//parse json
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {$("span").html(a[0].content + "<p>— " + a[0].title + "</p>");
});
});
});
why am i getting a \$.getJSON is not a function error
Mar 08 2018 20:52 UTC
@Antonious-Stewart can you show us how you import jquery to your page? Jquery might not be defined correctly
Antonious Stewart
@Antonious-Stewart
Mar 08 2018 20:53 UTC
<!doctype html>
<html lang="en">
<title>Random Quote Machine</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<body>
<div>
<span id="quote"></span>
<button <button type="submit">Get a Quote!</button>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="JS/app.js"></script>
</body>
</html>
Mar 08 2018 20:58 UTC
@Antonious-Stewart It looks like jquery.slimdoes not have ajax functions included
Antonious Stewart
@Antonious-Stewart
Mar 08 2018 20:59 UTC
ok so can i link a non slim jquery cdn without it throwing off my bootstrap
Mar 08 2018 21:00 UTC
@Antonious-Stewart Yea, jquery slim just lacks some of the functions, you should be ok
Antonious Stewart
@Antonious-Stewart
Mar 08 2018 21:00 UTC
CamperBot
@camperbot
Mar 08 2018 21:00 UTC
antonious-stewart sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
Mar 08 2018 21:01 UTC
@Antonious-Stewart np :D
Antonious Stewart
@Antonious-Stewart
Mar 08 2018 21:01 UTC
@bradtaniguchi also do u know a place to get some pis
Mar 08 2018 21:01 UTC
get what?
Antonious Stewart
@Antonious-Stewart
Mar 08 2018 21:03 UTC
lol apis
Mar 08 2018 21:04 UTC
where you can get apis?
Lots of quote APIs out there - choose one from Google
Antonious Stewart
@Antonious-Stewart
Mar 08 2018 21:06 UTC
hmmm i was thinking there was a resource where there were a collection of apis @gulsvi
Gulsvi
@gulsvi
Mar 08 2018 21:07 UTC
@Antonious-Stewart There are - google will also direct you to those
Antonious Stewart
@Antonious-Stewart
Mar 08 2018 21:08 UTC
@gulsvi ok thanks :smile:
CamperBot
@camperbot
Mar 08 2018 21:08 UTC
antonious-stewart sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2658 | @gulsvi |http://www.freecodecamp.org/gulsvi
Gulsvi
@gulsvi
Mar 08 2018 21:08 UTC
But, we don't have any curated collections specifically meant for free code camp students if that's what you're looking for
Antonious Stewart
@Antonious-Stewart
Mar 08 2018 21:08 UTC
oh nooo more so any open source not just ffc but if they did it would be nice
Gulsvi
@gulsvi
Mar 08 2018 21:08 UTC
A lot of Free Code Camp is read, search, ask, along with opportunities to share knowledge later on medium and the Free Code Camp forums
Matej Bošnjak
@mbosnjak01
Mar 08 2018 21:09 UTC
@Antonious-Stewart https://rapidapi.com/
Antonious Stewart
@Antonious-Stewart
Mar 08 2018 21:10 UTC
@mbosnjak01 thanks ill give it a go over
CamperBot
@camperbot
Mar 08 2018 21:10 UTC
antonious-stewart sends brownie points to @mbosnjak01 :sparkles: :thumbsup: :sparkles:
Antonious Stewart
@Antonious-Stewart
Mar 08 2018 21:11 UTC
lol im giving cookies to all
Matej Bošnjak
@mbosnjak01
Mar 08 2018 21:11 UTC
it's a list of many apis there, if some api doesn't have a good documentation there, just search for its official site
if it has any
furthermore, if you have an idea, make your own api :D
Antonious Stewart
@Antonious-Stewart
Mar 08 2018 21:12 UTC
WILL DO!
Tiago Correia
@tiagocorreiaalmeida
Mar 08 2018 21:28 UTC
German Gamboa Gonzalez
@germangamboa95
Mar 08 2018 21:36 UTC