These are chat archives for FreeCodeCamp/HelpFrontEnd

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

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({
            username: json.data[i].username,
            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
Ken Haduch
@khaduch
Mar 08 2018 01:30
@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
axios
      .get("https://fcctop100.herokuapp.com/api/fccusers/top/recent?origin=*")
      .then(function(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 });
      });
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
'''
$(document).ready();
'''
CamperBot
@camperbot
Mar 08 2018 01:34
:bulb: to format code use backticks! ``` more info
markclynch
@markclynch
Mar 08 2018 01:35
<!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
i think you mean class='keys'. You can't use the same name for multiple id
markclynch
@markclynch
Mar 08 2018 01:37
oofa
You sure?
I don't think that's the problem.
Daniel
@DanJP2016
Mar 08 2018 01:37
yes, that might not fix your problem, but that will cause problems
markclynch
@markclynch
Mar 08 2018 01:38
I'm using atom.io to code this, just coming back after a long break
Tai Jones
@taiJones00
Mar 08 2018 01:38
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
if you need the same name on all those elements use class instead of id
markclynch
@markclynch
Mar 08 2018 01:39
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
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
Feels like thats what I'm doing :)
@taiJones00
Stephen James
@sjames1958gm
Mar 08 2018 01:41
@markclynch You defined your main.js before your HTML so box will not resolve correctly.
Tai Jones
@taiJones00
Mar 08 2018 01:41
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
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
@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
Ah man
markclynch
@markclynch
Mar 08 2018 01:43
@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
@markclynch Move you include of main.js to end of the html file
Tai Jones
@taiJones00
Mar 08 2018 01:43
Ah I just saw that
markclynch
@markclynch
Mar 08 2018 01:44
@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
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
:point_up: March 7, 2018 7:32 PM Can I have help with this one?
@sjames1958gm
Stephen James
@sjames1958gm
Mar 08 2018 01:47
@camperbot :+1:
Tai Jones
@taiJones00
Mar 08 2018 01:47

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
@taiJones00 change your function(json) to an arrow function and see if that helps
Tai Jones
@taiJones00
Mar 08 2018 01:49
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
@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
This doesn't help the state change https://codepen.io/taiJones00/pen/oEKZYL
Stephen James
@sjames1958gm
Mar 08 2018 01:53
@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
That's what I have @sjames1958gm
I'll try componentWillMount
Stephen James
@sjames1958gm
Mar 08 2018 01:56
@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
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
@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
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
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
Okay
Stephen James
@sjames1958gm
Mar 08 2018 01:59
@taiJones00 Anytime you set the state to a new value it should re-render
Tai Jones
@taiJones00
Mar 08 2018 02:00
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
@taiJones00 - yes
listOfUsers is only temporary while you are processing the axios call
markclynch
@markclynch
Mar 08 2018 02:02
atom.io telling me that eval can be harmful . . . what am I missing?
Stephen James
@sjames1958gm
Mar 08 2018 02:03
@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
hmmm. Doesn't seem to be working. Any chance atom.io wont let it work?
Tai Jones
@taiJones00
Mar 08 2018 02:04
Ahhhh!!! We got it! It's a start! Thank you @sjames1958gm
CamperBot
@camperbot
Mar 08 2018 02:04
taijones00 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9070 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
markclynch
@markclynch
Mar 08 2018 02:04
function answer() {
    x=box.value;
    x=eval(x);
    box.value=x;

  }
Stephen James
@sjames1958gm
Mar 08 2018 02:04
@taiJones00 :+1: :checkered_flag:
markclynch
@markclynch
Mar 08 2018 02:05
my equal button I called <input type='button' value='=' id='equals' onclick='answer()'>
Stephen James
@sjames1958gm
Mar 08 2018 02:05
@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
@sjames1958gm can i over ride it?
Stephen James
@sjames1958gm
Mar 08 2018 02:06
@markclynch I don't use atom - but I am betting you can.
markclynch
@markclynch
Mar 08 2018 02:08
@sjames1958gm Do you use sublime?
I'm cheap, so didn't want to pay for it
Stephen James
@sjames1958gm
Mar 08 2018 02:08
@markclynch VS Code
Ken Haduch
@khaduch
Mar 08 2018 02:09
@markclynch - definitely try VS code - it's a nice editor!
markclynch
@markclynch
Mar 08 2018 02:09
is that paid as well @sjames1958gm
Stephen James
@sjames1958gm
Mar 08 2018 02:09
@markclynch FREE open source, supported by Microsoft, built on the same Electron platform as atom
Daniel
@DanJP2016
Mar 08 2018 02:10
the quokka.js plugin for vs code is awesome
markclynch
@markclynch
Mar 08 2018 02:10
@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
I was even able to build a java spring app in VS code with maven builds
markclynch
@markclynch
Mar 08 2018 02:11
@sjames1958gm I guess that's cool, however I have no idea what you just said lol
Stephen James
@sjames1958gm
Mar 08 2018 02:11
@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
So I should take the plunge your saying
Stephen James
@sjames1958gm
Mar 08 2018 02:12
Yes
markclynch
@markclynch
Mar 08 2018 02:12
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
Well, atom.io is not stopping you from using it ? Just complaining?
markclynch
@markclynch
Mar 08 2018 02:13
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
@markclynch Ah, I see you are on the embedded renderer
markclynch
@markclynch
Mar 08 2018 02:15
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
@markclynch hmm. ok
markclynch
@markclynch
Mar 08 2018 02:22
@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
:(
markclynch
@markclynch
Mar 08 2018 02:22
  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
starting to remember why i took a break before lo
lol
markclynch
@markclynch
Mar 08 2018 02:36
@sjames1958gm Do i need anything else to run eval? Like json or some other library?
Claudio Restifo
@Marmiz
Mar 08 2018 02:50
@markclynch eval evaluates function expressions as a string, so make sure you are passing one
markclynch
@markclynch
Mar 08 2018 02:50
@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
markclynch sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1184 | @marmiz |http://www.freecodecamp.org/marmiz
markclynch
@markclynch
Mar 08 2018 02:50
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
@markclynch hopefully
you should never use eval anyway!
markclynch
@markclynch
Mar 08 2018 02:51
calculator program :P
what else am I supposed to do?
Claudio Restifo
@Marmiz
Mar 08 2018 02:53
anyway browser should not prevent you to use eval anyway
markclynch
@markclynch
Mar 08 2018 02:53
<!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
@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
@Marmiz 3index.html:36 Uncaught ReferenceError: answer is not defined
at HTMLInputElement.onclick (index.html:36)
Claudio Restifo
@Marmiz
Mar 08 2018 02:55
there you go
markclynch
@markclynch
Mar 08 2018 02:56
  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
@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
@sorinr not even close to understanding what that means.
Claudio Restifo
@Marmiz
Mar 08 2018 02:59
@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
@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
ok
Sorin Ruse
@sorinr
Mar 08 2018 02:59
@markclynch exactly what @Marmiz pointed out
markclynch
@markclynch
Mar 08 2018 02:59
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
I'm so dumb. lol
Claudio Restifo
@Marmiz
Mar 08 2018 03:06
@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
had wrong path lol
@Marmiz Can't believe I kept old path from atom.io grrrrrrrrrrr
Sorin Ruse
@sorinr
Mar 08 2018 03:07
@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
file
is that ok?
@sorinr I feel like such a newb gosh.
Sorin Ruse
@sorinr
Mar 08 2018 03:12
@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
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
@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
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
@JoEeeezy_twitter your code will return the last match of arr[1][i] not comparing all.
JoEezy
@JoEeeezy_twitter
Mar 08 2018 03:18
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
@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
@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
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

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
yeah :smile: that sounds like a much better way to do it
Tai Jones
@taiJones00
Mar 08 2018 03:25
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
@taiJones00 no but you can hide column for specific sizes :)
Tai Jones
@taiJones00
Mar 08 2018 03:34
Hide what column? @Marmiz
Claudio Restifo
@Marmiz
Mar 08 2018 03:37
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
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
@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
@padunk hmm
abraham anak agung
@padunk
Mar 08 2018 04:02
@mbilyeu1 :coffee:
Mike Bilyeu
@mbilyeu1
Mar 08 2018 04:05
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
@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
@padunk what would /o*/g do?
abraham anak agung
@padunk
Mar 08 2018 04:12
@mbilyeu1 try it at www.regex101.com i think it will match either o or anything
Mike Bilyeu
@mbilyeu1
Mar 08 2018 04:12
@padunk wait is it just the opposite of "+"?
abraham anak agung
@padunk
Mar 08 2018 04:13
@mbilyeu1 + is match at least 1
Mike Bilyeu
@mbilyeu1
Mar 08 2018 04:17
@padunk I think Im getting it now after using regex101
@padunk thanks
CamperBot
@camperbot
Mar 08 2018 04:17
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
i finally hit a wall ... and now i have to read the solution :cry:
Claudio Restifo
@Marmiz
Mar 08 2018 05:18
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
can i get somehelp?
image.png
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
@Frosty427 not good with css, but try add position, either relative, absolute or whatever :smile:
Frosty427
@Frosty427
Mar 08 2018 06:54
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
@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
ok thanks
h1tag
@h1tag
Mar 08 2018 07:08
@Frosty427 you can use float
Frosty427
@Frosty427
Mar 08 2018 07:08
ok ill try it out
h1tag
@h1tag
Mar 08 2018 07:12
or margin if you want to have more control where it's placed @Frosty427
Frosty427
@Frosty427
Mar 08 2018 07:13
@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
@Frosty427 use percentages or em units
Frosty427
@Frosty427
Mar 08 2018 07:14
how would i go about that?
h1tag
@h1tag
Mar 08 2018 07:15
right: 10em; or right: 50%;
Sorin Ruse
@sorinr
Mar 08 2018 07:16
@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
i havent really learned media queries
h1tag
@h1tag
Mar 08 2018 07:17
@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
@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
@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
image.png
now i have another problem
when i added in supp this happend
Sorin Ruse
@sorinr
Mar 08 2018 07:21
@h1tag yes. u may use them both. nice to be back :)
Frosty427
@Frosty427
Mar 08 2018 07:22
.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
@Frosty427 better put up your html and css into a codepen and share the link with us
Frosty427
@Frosty427
Mar 08 2018 07:23
got it
Sorin Ruse
@sorinr
Mar 08 2018 07:28
@Frosty427 ok. as i see you are trying to recreate the apple.com site. right?
h1tag
@h1tag
Mar 08 2018 07:28
@Frosty427 increase the padding on the navbar
Frosty427
@Frosty427
Mar 08 2018 07:29
@sorinr yes
@h1tag ive tried that but its always to big
Joshua Swift
@joshuaswift
Mar 08 2018 07:29
has anyone else experienced the weather api returning different locations for the same coords?
Frosty427
@Frosty427
Mar 08 2018 07:29
i can never get it right
and even when i do the items stick to the bottom
h1tag
@h1tag
Mar 08 2018 07:30
@joshuaswift it can be inaccurate sometimes
Joshua Swift
@joshuaswift
Mar 08 2018 07:30
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
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
@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
@joshuaswift what is your code?
Frosty427
@Frosty427
Mar 08 2018 07:32
how do i appl that?
apply*
in css?
Sorin Ruse
@sorinr
Mar 08 2018 07:33
yes @Frosty427
Frosty427
@Frosty427
Mar 08 2018 07:33
image.png
@sorinr like this?
image.png
Sorin Ruse
@sorinr
Mar 08 2018 07:34
@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
@sorinr it put everything in the center
image.png
abraham anak agung
@padunk
Mar 08 2018 07:37
@joshuaswift it show shuzenji at first but then it show correct location. weird
Joshua Swift
@joshuaswift
Mar 08 2018 07:38
@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
@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
@joshuaswift or you can delete locationWeather() and change it to (function locationWeather(){})()
nahh...it don't change it
Frosty427
@Frosty427
Mar 08 2018 07:50
@h1tag oh boy
my mind is goona explde
h1tag
@h1tag
Mar 08 2018 07:50
lol
overwhelmed?
Frosty427
@Frosty427
Mar 08 2018 07:51
yea
can i add px to space-evenly?
to push them apart?
h1tag
@h1tag
Mar 08 2018 07:51
I don't think so
Frosty427
@Frosty427
Mar 08 2018 07:52
is there any way to push them apart
h1tag
@h1tag
Mar 08 2018 07:52
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
@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
@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
@Frosty427 try F12. think its valid for all browsers
h1tag
@h1tag
Mar 08 2018 08:06
@Frosty427 or right click>inspect element on the navbar
Frosty427
@Frosty427
Mar 08 2018 08:06
@sorinr the key?
Sorin Ruse
@sorinr
Mar 08 2018 08:06
@Frosty427 yes
Frosty427
@Frosty427
Mar 08 2018 08:06
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
@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
@Frosty427 about the font: you can only use it when developing software for apple products
Frosty427
@Frosty427
Mar 08 2018 08:14
@h1tag shiza
that sucks
Viperish
@Viperish
Mar 08 2018 08:18
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
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
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
the space is the problem there?
Viperish
@Viperish
Mar 08 2018 08:23
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
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
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
Afraid to open?
Marianissimus
@Marianissimus
Mar 08 2018 08:26
just kidding
Marianissimus
@Marianissimus
Mar 08 2018 08:27
So the space does a lot of difference.
@Frosty427 what's the problem?
Frosty427
@Frosty427
Mar 08 2018 08:28
@Marianissimus im trying to put space in between the nav items
like the apple website
Viperish
@Viperish
Mar 08 2018 08:28
Sorry I don't get it
Frosty427
@Frosty427
Mar 08 2018 08:29
image.png
Marianissimus
@Marianissimus
Mar 08 2018 08:29
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
@Marianissimus that worked thanks
CamperBot
@camperbot
Mar 08 2018 08:35
frosty427 sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 479 | @marianissimus |http://www.freecodecamp.org/marianissimus
Marianissimus
@Marianissimus
Mar 08 2018 08:42
@Viperish here, I made a pen trying to understand this:
https://codepen.io/marianissimus/pen/MVgzwJ
Viperish
@Viperish
Mar 08 2018 08:42
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
viperish sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 480 | @marianissimus |http://www.freecodecamp.org/marianissimus
jjzep
@jjzep
Mar 08 2018 08:56
Looking for an article or resource for best practices regarding error handling. Does anyone have a recommendation?
Frosty427
@Frosty427
Mar 08 2018 09:05
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
image.png
Marianissimus
@Marianissimus
Mar 08 2018 09:06
which middle? vertically or horizontally?
Frosty427
@Frosty427
Mar 08 2018 09:07
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
by menu button you mean the hamburger icon?
Frosty427
@Frosty427
Mar 08 2018 09:09
yes
a {
  font-size: 14px !important;
  color: white !important;
  display: flex;
  justify-content: space-evenly;
  height: 40px;
  align-items: center;
  margin-right: 60px;
}

.navbar {
  padding: 1px !important;
  background: rgba(0,0,0,0.8) !important;
}
thats my css
Marianissimus
@Marianissimus
Mar 08 2018 09:10
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
can i add margin left specifically when the navbar goes to mobile?
Marianissimus
@Marianissimus
Mar 08 2018 09:11
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
ok
Marianissimus
@Marianissimus
Mar 08 2018 09:13
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
image.png
Marianissimus
@Marianissimus
Mar 08 2018 09:14
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
now its not the colod i want it
color*
image.png
Marianissimus
@Marianissimus
Mar 08 2018 09:16
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
this is with !important
you mean stop using bootstrap entirely?
Marianissimus
@Marianissimus
Mar 08 2018 09:17
no, use it
but learn it a little more better
Frosty427
@Frosty427
Mar 08 2018 09:17
can i style what i want in html?
Marianissimus
@Marianissimus
Mar 08 2018 09:17
for instance, bootstrap has a class for the brand in the navbar
Frosty427
@Frosty427
Mar 08 2018 09:17
where can i find the dev tools?
Marianissimus
@Marianissimus
Mar 08 2018 09:18
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
ok
how can i edit the padding
thats why im trying to find dev tools
Marianissimus
@Marianissimus
Mar 08 2018 09:20
no, you need to first learn more bootsrap
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
ok
give me a second
now the icon is 2 small
wait
let me put this in cp
@Marianissimus
Frosty427
@Frosty427
Mar 08 2018 09:36
@X140hu4 thanks
CamperBot
@camperbot
Mar 08 2018 09:36
frosty427 sends brownie points to @x140hu4 :sparkles: :thumbsup: :sparkles:
:cookie: 351 | @x140hu4 |http://www.freecodecamp.org/x140hu4
dinesh
@1532j0004kg
Mar 08 2018 09:37
warm evening coders ...
Marianissimus
@Marianissimus
Mar 08 2018 09:37
@Frosty427 here. see what I did different - I commented out your line with the logo:
https://codepen.io/marianissimus/pen/VXZqop
can u please spend sometime to review this pen ? , Thanks ... :smile:
Frosty427
@Frosty427
Mar 08 2018 09:39
@Marianissimus how do i push if away from Mac
Marianissimus
@Marianissimus
Mar 08 2018 09:40
@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
o
ok*
Marianissimus
@Marianissimus
Mar 08 2018 09:41
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
ok
Marianissimus
@Marianissimus
Mar 08 2018 09:42
so .navbar-brand won't work, but a.navbar-brand works, because it is more specific
Frosty427
@Frosty427
Mar 08 2018 09:42
oh
wow
ok
holy
this opens up so much possibility now
i didnt even think of that
Marianissimus
@Marianissimus
Mar 08 2018 09:43
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
a.nav-link {
font-size: 14px
color: white;
}
why wont that work?
abraham anak agung
@padunk
Mar 08 2018 09:45
@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
Thanks.
but Fcc doesnot required reset right?
just for clarification !
abraham anak agung
@padunk
Mar 08 2018 09:47
@1532j0004kg idk, i forget, but it is good to have one :smile:
dinesh
@1532j0004kg
Mar 08 2018 09:47
ya right :smile:
thanks dude @padunk
CamperBot
@camperbot
Mar 08 2018 09:47
1532j0004kg sends brownie points to @padunk :sparkles: :thumbsup: :sparkles:
:cookie: 469 | @padunk |http://www.freecodecamp.org/padunk
Marianissimus
@Marianissimus
Mar 08 2018 09:49
@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
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
@Donnie-D yes
Frosty427
@Frosty427
Mar 08 2018 09:50
image.png
this thing is now lower than mac
Fabien SHAN
@X140hu4
Mar 08 2018 09:51
That's called scope
Frosty427
@Frosty427
Mar 08 2018 09:51
maybe margin bottom will help?
Fabien SHAN
@X140hu4
Mar 08 2018 09:51
Donnie
@Donnie-D
Mar 08 2018 09:53
@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
@Frosty427 yes, because it's larger.
Donnie
@Donnie-D
Mar 08 2018 09:54
@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
@Donnie-D You mean for the tweet link?
Donnie
@Donnie-D
Mar 08 2018 09:56
@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
@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
@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
@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
@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
what shopping bag? let me see the codepen again @Frosty427
Donnie
@Donnie-D
Mar 08 2018 10:08
@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
@Marianissimus sorry its natively on my computer
Max
@maxiwer
Mar 08 2018 10:09
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
give me a second
abraham anak agung
@padunk
Mar 08 2018 10:11
@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
@maxiwer yes, you need an else or another return after the if.
Max
@maxiwer
Mar 08 2018 10:11
@padunk Which part?
Marianissimus
@Marianissimus
Mar 08 2018 10:11
also, what do you mean by x & 2 == 0? maybe you were looking for % ?
abraham anak agung
@padunk
Mar 08 2018 10:12
@maxiwer like @Marianissimus said. what is &2?
Max
@maxiwer
Mar 08 2018 10:12
LOL excuse me guys
there was a misspelling
Sweet Coding :)
@SweetCodingInc
Mar 08 2018 10:12
@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
and i'm too lazy to check the regex:) what is it supposed to do?
abraham anak agung
@padunk
Mar 08 2018 10:13
@SweetCodingInc really? don't know about it
Sweet Coding :)
@SweetCodingInc
Mar 08 2018 10:13
@padunk bitwise operations
Marianissimus
@Marianissimus
Mar 08 2018 10:13
what is & ? there is no &. maybe %?
Sweet Coding :)
@SweetCodingInc
Mar 08 2018 10:13
it is much faster than %
abraham anak agung
@padunk
Mar 08 2018 10:14
@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
padunk sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
:cookie: 352 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
Sweet Coding :)
@SweetCodingInc
Mar 08 2018 10:15
@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
@X140hu4 i think i can see what you mean now lol
abraham anak agung
@padunk
Mar 08 2018 10:16
yeah i know @SweetCodingInc
Fabien SHAN
@X140hu4
Mar 08 2018 10:16
@Donnie-D It is a question of timing here :)
Donnie
@Donnie-D
Mar 08 2018 10:16
yes i guess. and i am not always good with it lol
nicely caught man
thanks
Fabien SHAN
@X140hu4
Mar 08 2018 10:17
@Donnie-D I had the same problems several times so no prob
Donnie
@Donnie-D
Mar 08 2018 10:17
lol
Sweet Coding :)
@SweetCodingInc
Mar 08 2018 10:24

@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
@Marianissimus hey you think you can help me again if your not busy?
mustimuu
@mustimuu
Mar 08 2018 11:39
guys
is there any place i can learn joomla?
mustimuu
@mustimuu
Mar 08 2018 11:49
@Aka-Dev thanks
CamperBot
@camperbot
Mar 08 2018 11:49
mustimuu sends brownie points to @aka-dev :sparkles: :thumbsup: :sparkles:
:cookie: 315 | @aka-dev |http://www.freecodecamp.org/aka-dev
Anas Abdennaim
@Aka-Dev
Mar 08 2018 11:49
@mustimuu you're welcome
mustimuu
@mustimuu
Mar 08 2018 11:54
@Aka-Dev what about to wordpress
Anas Abdennaim
@Aka-Dev
Mar 08 2018 11:55
@mustimuu you can learn wordpress in codex wordpress https://codex.wordpress.org/
mustimuu
@mustimuu
Mar 08 2018 11:57

@Aka-Dev thank you.

one last thing. How do widgets work in wordpress?

CamperBot
@camperbot
Mar 08 2018 11:57
mustimuu sends brownie points to @aka-dev :sparkles: :thumbsup: :sparkles:
api offline
Fabien SHAN
@X140hu4
Mar 08 2018 11:57
@Aka-Dev Thanks!
Anas Abdennaim
@Aka-Dev
Mar 08 2018 12:19
@mustimuu you can look to the link https://codex.wordpress.org/WordPress_Widgets
Frosty427
@Frosty427
Mar 08 2018 12:20
can someone help me?
Anas Abdennaim
@Aka-Dev
Mar 08 2018 12:21
@Frosty427 may be
Frosty427
@Frosty427
Mar 08 2018 12:21
image.png
Anas Abdennaim
@Aka-Dev
Mar 08 2018 12:22
@Frosty427 what's do you need ?
Frosty427
@Frosty427
Mar 08 2018 12:22
i want to put the apple logo to the top right
this is bootstrap btw
Anas Abdennaim
@Aka-Dev
Mar 08 2018 12:22
@Frosty427 your codepen please
@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
@Frosty427 .navbar-toggler {
position: absolute;
top: 1rem;
right: 1rem;
}
@Frosty427 try this code
Frosty427
@Frosty427
Mar 08 2018 12:28
ok
it disappeared @Aka-Dev
Anas Abdennaim
@Aka-Dev
Mar 08 2018 12:30
it positioned to right now
image.png
Frosty427
@Frosty427
Mar 08 2018 12:31
hmm
give me 1 second
Frosty427
@Frosty427
Mar 08 2018 12:49
@Aka-Dev how can i move the apple logo instead of the toggler?
Gilbert
@GilTorch
Mar 08 2018 12:53
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
@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
Thanks! It worked @sjames1958gm I
CamperBot
@camperbot
Mar 08 2018 12:57
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
@GilTorch :+1:
Max
@maxiwer
Mar 08 2018 13:05
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.");
Aditya
@ezioda004
Mar 08 2018 13:08
@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
@Frosty427 i think it's not possible
Frosty427
@Frosty427
Mar 08 2018 14:30
guys
how would i move the hamburger icon to the right and then move up the apple logo
image.png
ghnana
@ghnana
Mar 08 2018 17:53
design.png
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
Riadh
@KWFE
Mar 08 2018 17:56
@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
kwfe sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3782 | @khaduch |http://www.freecodecamp.org/khaduch
Clayton Ingalls
@zapbampow
Mar 08 2018 18:12
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?
Tom
@moT01
Mar 08 2018 18:15
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
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>
          <button type="submit">Add Message</button>
        </form>

        <ul>              
          {this.state.messages.map(function(message){
            return <li>{message}</li>
          })}
        </ul>
        { /* change code above this line */ }
      </div>
    );
  }
};
Tom
@moT01
Mar 08 2018 18:20
so what are the errors
Clayton Ingalls
@zapbampow
Mar 08 2018 18:20
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
hey guys
can i get help
Clayton Ingalls
@zapbampow
Mar 08 2018 18:32
I can try. What are you working on?
Frosty427
@Frosty427
Mar 08 2018 18:39
bootstrap
4
give me 1 scond
Frosty427
@Frosty427
Mar 08 2018 19:14
@zapbampow sorry for the delay i drop 3 glass cups
markclynch
@markclynch
Mar 08 2018 19:17
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
@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
ok
give me one second
Gulsvi
@gulsvi
Mar 08 2018 19:37
You said that last time :p
one hour ago, hope I can help lol
Frosty427
@Frosty427
Mar 08 2018 19:37
im srs this time
@gulsvi i have to upload images
just give me some time
@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
@Frosty427 The homepod image?
Frosty427
@Frosty427
Mar 08 2018 19:44
yes
Gulsvi
@gulsvi
Mar 08 2018 19:45
@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
ok
Gulsvi
@gulsvi
Mar 08 2018 19:46
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
im trying to replicate apple.com\
and the images have links on them
Gulsvi
@gulsvi
Mar 08 2018 19:49
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
im trying to recreate it in bootstrap 4
Gulsvi
@gulsvi
Mar 08 2018 19:51
Yes, that's how you would do it with bootstrap 4
Frosty427
@Frosty427
Mar 08 2018 19:52
give me a second
Gulsvi
@gulsvi
Mar 08 2018 19:52
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
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
<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
So not as backgrounds, you couldn't align them with the text inside their divs
Frosty427
@Frosty427
Mar 08 2018 19:54
i have to go now but ill try again tomorrow
thanks for the help
Gulsvi
@gulsvi
Mar 08 2018 19:56
@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
But, they use background images:
image.png
Antonious Stewart
@Antonious-Stewart
Mar 08 2018 20:51
$(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
Brad
@bradtaniguchi
Mar 08 2018 20:52
@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
<!doctype html>
<html lang="en">
  <head>
    <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 -->
    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <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>
Brad
@bradtaniguchi
Mar 08 2018 20:58
@Antonious-Stewart It looks like jquery.slimdoes not have ajax functions included
Antonious Stewart
@Antonious-Stewart
Mar 08 2018 20:59
ok so can i link a non slim jquery cdn without it throwing off my bootstrap
Brad
@bradtaniguchi
Mar 08 2018 21:00
@Antonious-Stewart Yea, jquery slim just lacks some of the functions, you should be ok
Antonious Stewart
@Antonious-Stewart
Mar 08 2018 21:00
@bradtaniguchi thanks for the help!
CamperBot
@camperbot
Mar 08 2018 21:00
antonious-stewart sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
:cookie: 415 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
Brad
@bradtaniguchi
Mar 08 2018 21:01
@Antonious-Stewart np :D
Antonious Stewart
@Antonious-Stewart
Mar 08 2018 21:01
@bradtaniguchi also do u know a place to get some pis
Brad
@bradtaniguchi
Mar 08 2018 21:01
get what?
Antonious Stewart
@Antonious-Stewart
Mar 08 2018 21:03
lol apis
Brad
@bradtaniguchi
Mar 08 2018 21:04
where you can get apis?
Lots of quote APIs out there - choose one from Google
Antonious Stewart
@Antonious-Stewart
Mar 08 2018 21:06
hmmm i was thinking there was a resource where there were a collection of apis @gulsvi
Gulsvi
@gulsvi
Mar 08 2018 21:07
@Antonious-Stewart There are - google will also direct you to those
Antonious Stewart
@Antonious-Stewart
Mar 08 2018 21:08
@gulsvi ok thanks :smile:
CamperBot
@camperbot
Mar 08 2018 21:08
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
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
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
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
@Antonious-Stewart https://rapidapi.com/
Antonious Stewart
@Antonious-Stewart
Mar 08 2018 21:10
@mbosnjak01 thanks ill give it a go over
CamperBot
@camperbot
Mar 08 2018 21:10
antonious-stewart sends brownie points to @mbosnjak01 :sparkles: :thumbsup: :sparkles:
:cookie: 245 | @mbosnjak01 |http://www.freecodecamp.org/mbosnjak01
Antonious Stewart
@Antonious-Stewart
Mar 08 2018 21:11
lol im giving cookies to all
Matej Bošnjak
@mbosnjak01
Mar 08 2018 21:11
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
WILL DO!
Tiago Correia
@tiagocorreiaalmeida
Mar 08 2018 21:28
German Gamboa Gonzalez
@germangamboa95
Mar 08 2018 21:36
I made a CSS cake:)
Gulsvi
@gulsvi
Mar 08 2018 22:26
Nice cake @germangamboa95 :) :cake:
Tiago Correia
@tiagocorreiaalmeida
Mar 08 2018 22:28
@germangamboa95 10/10 would eat it man
iso
@iso1048
Mar 08 2018 22:49
@gulsvi not bad (from yesterday)