These are chat archives for FreeCodeCamp/HelpFrontEnd

29th
Oct 2017
Brittany Rutherford
@brittanyrutherford
Oct 29 2017 00:07
hi all, when do I need to change the size of h1, h2 ,etc
Nkwazema Chidiebere Raphael
@KingCyrus
Oct 29 2017 00:09
@khaduch no I haven’t used it. How do I start?
@khaduch which of the react course? I am signed onto Colt Steele Advanced web dev course and it teaches react.js but I haven’t gone through it all.
Richard
@rylew0925
Oct 29 2017 00:15
How come this code only return "${this.name} says hello! " instead of "Miki says hello!"?
let myObj = {
    name: 'Miti',
    sayHello() {
        return '${this.name} says hello!'
    }
};
console.log(myObj.sayHello());
Nkwazema Chidiebere Raphael
@KingCyrus
Oct 29 2017 00:16
you should use ` not ‘ @rylew0925
Ken Haduch
@khaduch
Oct 29 2017 00:17
@rylew0925 - you might have to write that as ${this}.name + ' says hello!' unless you are supposed to be using the string template, as @KingCyrus is pointing out? As you have it pasted in there, it is just a string, so nothing within the string is evaluated.
Nkwazema Chidiebere Raphael
@KingCyrus
Oct 29 2017 00:18
@khaduch could you kindly give me the link to the course so I sign on?
Richard
@rylew0925
Oct 29 2017 00:20
You mean I'm supposed to be using ` and not ' ?
For strings?
Ken Haduch
@khaduch
Oct 29 2017 00:20
@KingCyrus - sure - it is the https://www.udemy.com/react-2nd-edition/learn/v4/content "The Complete React Web Developer Course (2nd Edition)".. But unless you want to sign up for another course and pay for it, if you just look for the "react-modal" plugin, it might give you enough to go on, since you have react experience? https://github.com/reactjs/react-modal is the link to the modal on github
Nkwazema Chidiebere Raphael
@KingCyrus
Oct 29 2017 00:21
yes @rylew0925
Lee
@LeeConnelly12
Oct 29 2017 00:21
@rylew0925 When you include variables in strings with ${this.name} you do
Ken Haduch
@khaduch
Oct 29 2017 00:21
@rylew0925 - are you using ES6 features (template strings), or just standard javascript strings?
Richard
@rylew0925
Oct 29 2017 00:21
It's that symbol between the Esc and the Tab keys?
ES6
Nkwazema Chidiebere Raphael
@KingCyrus
Oct 29 2017 00:21
thanks @khaduch I have react experience
CamperBot
@camperbot
Oct 29 2017 00:21
kingcyrus sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3426 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Oct 29 2017 00:23
@KingCyrus - I see that you do have React experience, since you are working with react. I just wondered if you would be able to utilize that react-modal just looking at the document and attempting to incorporate it in your project... and not have to sign up for yet another course. good luck with that!
Nkwazema Chidiebere Raphael
@KingCyrus
Oct 29 2017 00:24
well, I might sign up for the course since it is for building mobile stuffs. @khaduch
Richard
@rylew0925
Oct 29 2017 00:25
@KingCyrus @LeeConnelly12 @khaduch Thanks!
CamperBot
@camperbot
Oct 29 2017 00:25
rylew0925 sends brownie points to @kingcyrus and @leeconnelly12 and @khaduch :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @kingcyrus |http://www.freecodecamp.com/kingcyrus
:cookie: 160 | @leeconnelly12 |http://www.freecodecamp.com/leeconnelly12
:star2: 3427 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Oct 29 2017 00:26
There is some focus on incorporating media queries and setting up the projects for a mobile view, but it has not been heavily teaching about that, at least not up to this point. Perhaps the second major project will have more focus on that? But you can take a look at the syllabus for it and decide, of course.
Kingsley
@Kingwindie
Oct 29 2017 00:57
is there anyway to make the background of a navigation bar transparent without the li items inthe nav bar disappearing?
Ken Haduch
@khaduch
Oct 29 2017 01:19
@Kingwindie - are you using rgba colors with some opacity? What does that look like?
Kingsley
@Kingwindie
Oct 29 2017 01:21
@khaduch nevermind thanks,i found a solution
CamperBot
@camperbot
Oct 29 2017 01:21
kingwindie sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3428 | @khaduch |http://www.freecodecamp.com/khaduch
Christine de la Fuente
@xtine88
Oct 29 2017 01:34
hello guys
Lee
@LeeConnelly12
Oct 29 2017 01:38
@xtine88 hello
Ken Haduch
@khaduch
Oct 29 2017 01:38
@xtine88 hello - what's happening?
Christine de la Fuente
@xtine88
Oct 29 2017 01:42
i don't understand the Factorilization of the Numbers algorithm
I semi got the answer...but it doesnt make sense to me...can someone explain it?
Ken Haduch
@khaduch
Oct 29 2017 01:52
@xtine88 - could you post your code?
Christine de la Fuente
@xtine88
Oct 29 2017 01:56
yes sir
Screen Shot 2017-10-29 at 2.57.28 AM.png
Ken Haduch
@khaduch
Oct 29 2017 01:58
and any specific questions, too!
Christine de la Fuente
@xtine88
Oct 29 2017 01:58
I understand the for loop
however, I don't understand why I need to set var x = 1
Ken Haduch
@khaduch
Oct 29 2017 01:58
@xtine88 - one thing that you are not doing is returning the final value - console.log doesn't return the value. then...
Christine de la Fuente
@xtine88
Oct 29 2017 01:59
oh yes, I just put console log...to print it in the command line to test out
other wise I wouldn't see it
Ken Haduch
@khaduch
Oct 29 2017 02:00

@xtine88 - the definition of 0! is that it is equal to 1. If the incoming value is 0 your loop will never run, so the value will remain at 1 and that is what you want to return. That's the main reason.

And to complete the function you have to actually do return x; after the loop, at the same place you have console.log(x);

Christine de la Fuente
@xtine88
Oct 29 2017 02:02
what's the difference between return x and console.log(x)? isn't console.log(x) the same as a return x only that its printing it?
would you say that "var x = 1" is just a way to enter the loop?
Ken Haduch
@khaduch
Oct 29 2017 02:10

@xtine88 - no, console.log(x) doesn't return a value from the function, it might return a value (probably a meaningless one) to the place where you called console.log, but for all intents and purposes, it doesn't return a value. Especially not from the function. You can leave it there for debug purposes, but you have to have an explicit return x; otherwise you get an implicit return undefined;

And you could look at var x = 1; as a way to enter the loop - initializing the value, but since it isn't really a loop-control value, maybe it's not technically correct to call it anything having to do with entering the loop. Basically I would just think of it as initialization of the variable. And if you do no further computation to modify the variable, that will be the final answer.

Lance LeBlanc
@LucarLeo
Oct 29 2017 02:26
Hi, I'm on the tribute page for the basic front end and am having issues with properly centering my lists
Ken Haduch
@khaduch
Oct 29 2017 02:28
@LucarLeo - is your page on CodePen - want to post your URL, if it is?
Lee
@LeeConnelly12
Oct 29 2017 02:33
@LucarLeo try putting all of the list items in one ul
<ul style="list-style: none;">
            <li class="list-txt">What does she do?</li>
            <li class="list-txt">Sits on a guy's shoulder. </li>
            <li class="list-txt">does angry lala noises </li>
            <li class="list-txt">trusts you </li>
            <li class="list-txt">What she doesn't do:
            <li class="list-txt">tall people that isn't her personal portable chair </li>
            <li class="list-txt"> tall people who don't pet her before speaking</li>
            <li class="list-txt"> tall people who look down at her</li>
        </ul>
Ken Haduch
@khaduch
Oct 29 2017 02:33
@LucarLeo I don't see lists on your page? Oh, wait, you changed the styling... Centering lists like that doesn't work if you want the list to be left-justified (like a normal list view.)
One way to do it is to set up a bootstrap grid row and pick a central set of columns to contain the data of your list. There might be other ways to do it, too -
Lee
@LeeConnelly12
Oct 29 2017 02:33
@LucarLeo Also, you're missing an end div tag in your html just above your lists
<div class="nano-bg">
    <h1 class="brnz-text">Nanamo Ul Namo</h1>
    <h5 class="brnz-txt"> the ultimate cinnamon roll</h5>
    <img class="smaller-img img-center" src="http://chrysaliswiki.wdfiles.com/local--files/people:nanamo-ul-namo/nanamoulnamo_ff14.png"
        alt="a cute angry lalafell"></img>
    </>
Ken Haduch
@khaduch
Oct 29 2017 02:40
@LucarLeo - on codepen, all of the CSS should be in the CSS panel, for correct usage of codepen.
Lance LeBlanc
@LucarLeo
Oct 29 2017 02:41
I'm just getting back into coding in general, so all of this is still a bit newish
Ken Haduch
@khaduch
Oct 29 2017 02:46

@LucarLeo - one thing that you can do, to center the lists without the center-justification, is to use flex. For example, wrap the two divs that you have your lists with another div, and on that parent div, add a class like class="flex-center" and in your CSS panel, define .flex-center like this:

.flex-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

See if that gives you the effect that you are looking for?

Ken Haduch
@khaduch
Oct 29 2017 03:03
@LucarLeo - I neglected to mention that I commented out the text-align: center; from your .list-txt class declaration.
@LucarLeo - the screenshot of what it looks like with those settings (just the central portion of the screen)
image.png
Lance LeBlanc
@LucarLeo
Oct 29 2017 03:13
I think the part I was trying to say (which the misunderstanding is on my part) is that I wanted to keep it as the format it was in, but trying to get it to move more center without having to take it out of <ul>
situation.JPG
Ken Haduch
@khaduch
Oct 29 2017 03:41
@LucarLeo - it might be better to take it out of the <ul> and just use <p> tags for each item? I'm going to try that - I see what you are having problems with, there is some built-in margin or padding in the list to separate the text from the bullet. Or just use a <div> to wrap each line - that eliminates the baggage of the <ul> and the <li>. The first four lines in this next screen shot are structured that way.
image.png
Amin
@sunorei
Oct 29 2017 03:44
Hey guys, I need some help. I'm working on the simon says front end project and am trying to loop through an array that contains the sequence of colors. This loop adds a class that represents the color lighting up, then should remove the class so the color goes dim again. However, my colors never go dim. Can anyone tell me what's wrong?
for(var i = 0; i <= sequence.length; i++){
$("#" + sequence[i]).addClass('brightLight');
setTimeout(function(){
$("#" + sequence[i]).removeClass('brightLight');
}, 1000);
}
}
For reference, here's the codepen link. If you try hitting start, you'll see what I mean
Ken Haduch
@khaduch
Oct 29 2017 03:47
@sunorei - the problem is that the for loop will run through without regard to the timeout values - and at the end of the timeout, the value for i will be 1 beyond the end of the array, so it will not access anything. One thing to try first is instead of using var i try using let i - that changes the behavior of the value within the loop. It still won't work properly as far as the sequence of events, but I think that it might make the class be removed at the end.
Amin
@sunorei
Oct 29 2017 03:51
Hmm ok I'll have to consider it. On a side note, is there a benefit to use let over var? From what I understand the only difference is scope, correct?
The course didn't cover let at all iirc
Lee
@LeeConnelly12
Oct 29 2017 03:52
@sunorei You can't re declare let variables
in the same scope anyway
Amin
@sunorei
Oct 29 2017 03:55
Sorry I'm still in the learning phases, is it safer for it to be that way?
like prevents error or something similar?
Ken Haduch
@khaduch
Oct 29 2017 03:56
@sunorei @LeeConnelly12 - http://wesbos.com/for-of-es6/ - this shows that you can use let in a for loop. You cannot use const in a loop, but you can use let - take a look at that page that I linked it is showing the same type of issue that you have in your simon pen.
Lee
@LeeConnelly12
Oct 29 2017 03:57
@khaduch Shows you can what? you can't re declare the same let variable in the same block scope?
@sunorei I think it is best practice to use const for variables you're not going to change the value of.
And use let for variables that you may need to change the value of.
Ken Haduch
@khaduch
Oct 29 2017 03:59
The other thing that you need to do is to increase the timeout value for each successive call to setTimeout because all of the calls are essentially started at the same time. So for the first setTimeout, you would want to use 1000, for the second, 2000 - that would sequence them at roughly 1 second apart.
but they would still all have the colors set to their bright intensity at the same time... You need a different way to sequence the replay of the buttons.
Amin
@sunorei
Oct 29 2017 04:04
Alright I'll have to mull it over. Thanks guys.
Ken Haduch
@khaduch
Oct 29 2017 04:04

@sunorei - if you replace your lightUp function with this:

function lightUp(){
  nextUp = nextColor();
  sequence.push(nextUp);
  for(let i = 0, timeout=1000; i <= sequence.length; i++, timeout += 1000){
    $("#" + sequence[i]).addClass('brightLight');
    setTimeout(function(){
      $("#" + sequence[i]).removeClass('brightLight');
    }, timeout);
  }
}

you will see that the circles that are going to light up will light at the same time, and slowly turn off. It's not correct behavior, but will illustrate some part of what you need to do.

Amin
@sunorei
Oct 29 2017 04:08
hmm ok I'll have to play with it. Also didn't realize I could add more to the expressions in the for loop, interesting
Ken Haduch
@khaduch
Oct 29 2017 04:11
@sunorei - yeah, it's a little strange looking but doable. My thought on the way to do this is to use a setInterval call to establish a sequence of events that you can take the appropriate action for each "tick" of the interval clock. You would want to disable any clicking while that is running, most likely. But I use that as an example of a way to "play" the sequence of moves that have taken place.
By the way, I like the layout of your simon board - creative!
I'm logging out for the night... good luck with that project!
Amin
@sunorei
Oct 29 2017 04:12
haha, thanks Ken, appreciate the compliment and the help. Good night
Pendramon
@Pendramon
Oct 29 2017 08:19
Guys is it possible to log something if default hasn't ran in a switch statement? Basically i want to do if switch(command) case true then log otherwise don't log without having to add my console.log code in each case?
Utsav Kafley
@chopedada
Oct 29 2017 10:07
Anyone online for a little AJAX/JSON help?
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 10:41
@chopedada in can I help?
what*
Utsav Kafley
@chopedada
Oct 29 2017 11:12
Hi I am working on the Random Quote Generator project and I have built the webpage and incorporated the api. The problem lies in the fact that I always get the same quote no matter what. Once I load the page the get quote button doesnot get any new quotes. But if I use the same link on my browser I do end up getting different quotes. I do not know where the problem lies
Bhoomi Khanderia
@bhoomikhanderia
Oct 29 2017 11:21
@Bhoomi-Github
Hi Everyone!
How can I do the animation that is there on the play button of video on this page:https://www.animalsinternational.org/take_action/live-export-global/
linkin-park
@linkin-park
Oct 29 2017 11:27
@chopedada who will call your loadJSON fn?
Lee
@LeeConnelly12
Oct 29 2017 11:34
@chopedada You need to send the request over https otherwise it will be blocked.
var data_file = "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1";
Stephen James
@sjames1958gm
Oct 29 2017 11:57
@chopedada You need http2 as said above, and you could request more than one quote instead of =1 do =10
Then randomly select one of those 10 quotes
lizangie
@Lizangie
Oct 29 2017 12:05
hello everyone
I need help with something here.... how do I remove the shadow from a form
linkin-park
@linkin-park
Oct 29 2017 12:13
@chopedada you would probably would get different quotes if its not cached :)
if you have found out before good :)
Lee
@LeeConnelly12
Oct 29 2017 12:14
@Lizangie Add the css property box-shadow: none; for your form
linkin-park
@linkin-park
Oct 29 2017 12:24
i have question on redux,a newbie - how to display popup.
how to send props value to child component
lizangie
@Lizangie
Oct 29 2017 12:25
@LeeConnelly12 i did already
Lee
@LeeConnelly12
Oct 29 2017 12:26
@Lizangie Can you show the website/code?
lizangie
@Lizangie
Oct 29 2017 12:32
codepen is having issues
linkin-park
@linkin-park
Oct 29 2017 12:35
does box-shadow has browser based prefix?
lizangie
@Lizangie
Oct 29 2017 12:36
no
shivam gupta
@shivamg11000
Oct 29 2017 12:41
writing CSS is so slow and frustrating
any alternative
Lee
@LeeConnelly12
Oct 29 2017 12:46
@shivamg11000 Using CSS frameworks such as Bootstrap and Materialise CSS make writing css much easier/quicker.
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 12:49
@LeeConnelly12 depends of the prespective ;)
but bootstrap can be the solution you need probably as said above
linkin-park
@linkin-park
Oct 29 2017 12:52
@Lizangie if codepen has issue you can rise a ticket https://blog.codepen.io/2014/03/04/bug-bounty-program/
linkin-park
@linkin-park
Oct 29 2017 13:11
@ashwins93 @alpox there
Ashwin
@ashwins93
Oct 29 2017 13:11
@linkin-park yes
Is anyone here working through P1xt guide?
linkin-park
@linkin-park
Oct 29 2017 13:26
watz up boy @ashwins93
linkin-park
@linkin-park
Oct 29 2017 14:08
@ashwins93 redux solves something cool :)
how angular works?
Ashwin
@ashwins93
Oct 29 2017 14:10
@linkin-park you're already on to the next technology?
linkin-park
@linkin-park
Oct 29 2017 14:11
are you kidding me :P you already knew it
linkin-park
@linkin-park
Oct 29 2017 14:16
what are you doin @ashwins93
Ashwin
@ashwins93
Oct 29 2017 14:24
@linkin-park i'm learning some precalculus
Paul Freeman
@pfreema1
Oct 29 2017 15:08
does anyone know why the first letter isn't being capitalized? https://jsfiddle.net/6t4ewpbL/
@pfreema1 that might help
Paul Freeman
@pfreema1
Oct 29 2017 15:18
thanks @moT01 !
CamperBot
@camperbot
Oct 29 2017 15:18
pfreema1 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 888 | @mot01 |http://www.freecodecamp.com/mot01
Paul Freeman
@pfreema1
Oct 29 2017 15:18
is this unique to javascript?
I feel like I've changed strings like that before, but maybe not
Tom
@moT01
Oct 29 2017 15:20
im not sure - i would guess not
alpox
@alpox
Oct 29 2017 15:28
@linkin-park hm? :D
Amanda
@Amandaan
Oct 29 2017 15:48
Anybody here?
Allister
@AlyxMoon
Oct 29 2017 15:48
Maaaaaaaybe
Pascal Clanget
@Gh05d
Oct 29 2017 15:49
image.png
Hi all, I have a problem with my styling. I want my footer to stay fixed at the bottom of the page, but now it "eats" my middle component:
Amanda
@Amandaan
Oct 29 2017 15:49
Could you help me check the bug in my codes?
Allister
@AlyxMoon
Oct 29 2017 15:49
@Amandaan Sure, feel free to post it :)
Amanda
@Amandaan
Oct 29 2017 15:51
屏幕快照 2017-10-29 上午11.50.17.png
I hoep to make something like this
Allister
@AlyxMoon
Oct 29 2017 15:51
@Gh05d I think the issue here is that your floater is fixed. Having an element set to fixed affixes it to the screen, not the page itself. So it will always stay on your page if you scroll away (think a persistent navbar). I think what you're going for here is absolute where it is now affixes to the page, and you can place it accordingly.
Amanda
@Amandaan
Oct 29 2017 15:52
That when I click the emoji icon, I can switch between two different images
and when I type some text and click Send, the texts will show in the screen
and here's my code

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>9-textsending</title>
<style>
.phone{
width: 289px;
height: 594px;
background: url('img/phone.jpg') no-repeat;
margin: 0 auto;
overflow: hidden;
}
#screen{
width: 236px;
height: 419px;
border: 4px solid black;
margin: 83px auto;
position: relative;
}
#screen .bar{
width: 237px;
height: 49px;
/background-color: red;/
border-top: 1px solid #000;
box-sizing: border-box;
position: absolute;
bottom: 0;
}
#box{
width: 32px;
height: 36px;
position: absolute;
top: 6.5px;
left: 4px;
}
#text1{
width: 139px;
height: 32px;
position: absolute;
top: 6.5px;
left: 39px;
}
#send{
width: 45px;
position: absolute;
top: 10px;
right: 6px;
font-size: 22px;
text-align: center;
line-height: 32px;
}
/.messageleft{/
/float: left;/
/}/
/.messageleft img{/
/float: left;/
/}/
/.messageleft p{/
/float: left;/
/}/
/.messageright{/
/float: right;/
/}/
/.messageright img{/
/float: right;/
/}/
/.messageright p{/
/float: right;/
/}/

p{
margin: 0;
background: red;
word-break: break-all;
}
.messageleft img{
float: left;
}
.messageleft p{
float: left;
margin-left: 5px;
line-height: 24px;
max-width: 140px;
}
.messageright img{
float: right;
}
.messageright p{
float: right;
margin-left: 5px;
line-height: 24px;
max-width: 140px;
background: yellow;
}
.messageleft,.messageright{
margin-bottom: 5px;
}

</style>
<script>
window.onload=function(){
var oImg=document.getElementById('img1');
var oText=document.getElementById('text1');
var oSend=document.getElementById('send');
var oScreen=document.getElementById('screen');
var onOff=true;
oImg.onclick=function(){
if(onOff){
oImg.src='img/image2.jpg';
onOff=false;
}else{
oImg.src='img/image1.jpg';
onOff=true;
}
};
oSend.onclick=function(){
if(oText.value==''){
alert('Write something');
}else{
if(onOff){
oScreen.innerHTML='<div class="messageleft"><img src="img/image1.jpg"><p>'+oText.value+'</p></div>'+oScreen.innerHTML;
}else{
oScreen.innerHTML='<div class="messageright"><img src="img/image2.jpg"><p>'+oText.value+'</p></div>'+oScreen.innerHTML;
}
}
oText.value='';
};
};
</script>
</head>
<body>
<div class="phone">
<div id="screen">
<div class="bar">
<div id="box">
<img id="img1" src="img/image1.jpg">
</div>
<input id="text1" type="text">
<div id="send">Send</div>
</div>
</div>
</div>
</body>
</html>

Pascal Clanget
@Gh05d
Oct 29 2017 15:54
@AlyxMoon I had the footer before on absolute, same problem :(
Christopher aka Pencho
@penchochris
Oct 29 2017 15:55
@Amandaan nest your code with ``` it will make it readeable
like:
 //nested shit
Allister
@AlyxMoon
Oct 29 2017 15:56
@Gh05d With position set to either absolute or fixed the page no longer acts as though the element is there, when page size comes into play. Since your footer element no longer exists as far as the page is concerned, the end of your page is now at that Add Recipe button. Either give that margin on the bottom, or if you have everything wrapped in a container of something give that a margin on the bottom. Then there will be more space on the bottom of the page and your footer won't overlap.
alpox
@alpox
Oct 29 2017 15:56
```
<code>
```
Amanda
@Amandaan
Oct 29 2017 15:56
I'll send the screenshot..
Christopher aka Pencho
@penchochris
Oct 29 2017 15:57
@Amandaan you can edit your code up!
:)
Does anyone can help me with ES6 classes?
Allister
@AlyxMoon
Oct 29 2017 15:57

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>9-textsending</title>
  <style>
    .phone {
      width: 289px;
      height: 594px;
      background: url('img/phone.jpg') no-repeat;
      margin: 0 auto;
      overflow: hidden;
    }

    #screen {
      width: 236px;
      height: 419px;
      border: 4px solid black;
      margin: 83px auto;
      position: relative;
    }

    #screen .bar {
      width: 237px;
      height: 49px;
      /background-color: red;
      / border-top: 1px solid #000;
      box-sizing: border-box;
      position: absolute;
      bottom: 0;
    }

    #box {
      width: 32px;
      height: 36px;
      position: absolute;
      top: 6.5px;
      left: 4px;
    }

    #text1 {
      width: 139px;
      height: 32px;
      position: absolute;
      top: 6.5px;
      left: 39px;
    }

    #send {
      width: 45px;
      position: absolute;
      top: 10px;
      right: 6px;
      font-size: 22px;
      text-align: center;
      line-height: 32px;
    }

    /.messageleft {
      / /float: left;
      / /
    }

    / /.messageleft img {
      / /float: left;
      / /
    }

    / /.messageleft p {
      / /float: left;
      / /
    }

    / /.messageright {
      / /float: right;
      / /
    }

    / /.messageright img {
      / /float: right;
      / /
    }

    / /.messageright p {
      / /float: right;
      / /
    }

    / p {
      margin: 0;
      background: red;
      word-break: break-all;
    }

    .messageleft img {
      float: left;
    }

    .messageleft p {
      float: left;
      margin-left: 5px;
      line-height: 24px;
      max-width: 140px;
    }

    .messageright img {
      float: right;
    }

    .messageright p {
      float: right;
      margin-left: 5px;
      line-height: 24px;
      max-width: 140px;
      background: yellow;
    }

    .messageleft,
    .messageright {
      margin-bottom: 5px;
    }
  </style>
  <script>
    window.onload = function() {
      var oImg = document.getElementById('img1');
      var oText = document.getElementById('text1');
      var oSend = document.getElementById('send');
      var oScreen = document.getElementById('screen');
      var onOff = true;
      oImg.onclick = function() {
        if (onOff) {
          oImg.src = 'img/image2.jpg';
          onOff = false;
        } else {
          oImg.src = 'img/image1.jpg';
          onOff = true;
        }
      };
      oSend.onclick = function() {
        if (oText.value == '') {
          alert('Write something');
        } else {
          if (onOff) {
            oScreen.innerHTML = '<div class="messageleft"><img src="img/image1.jpg"><p>' + oText.value + '</p></div>' + oScreen.innerHTML;
          } else {
            oScreen.innerHTML = '<div class="messageright"><img src="img/image2.jpg"><p>' + oText.value + '</p></div>' + oScreen.innerHTML;
          }
        }
        oText.value = '';
      };
    };
  </script>
</head>

<body>
  <div class="phone">
    <div id="screen">
      <div class="bar">
        <div id="box">
          <img id="img1" src="img/image1.jpg">
        </div>
        <input id="text1" type="text">
        <div id="send">Send</div>
      </div>
    </div>
  </div>
</body>

</html>
Bam!
alpox
@alpox
Oct 29 2017 15:57
@penchochris Maybe
Allister
@AlyxMoon
Oct 29 2017 15:58
@penchochris I've worked with them a bit, what question have you got?
Christopher aka Pencho
@penchochris
Oct 29 2017 15:58
how you parse a JSON into them
Amanda
@Amandaan
Oct 29 2017 15:58
Yeah, thanks! It looks better...
Christopher aka Pencho
@penchochris
Oct 29 2017 15:58
when the object is extending
Allister
@AlyxMoon
Oct 29 2017 15:59
@Amandaan So before I got digging through the code, what issue are you having? What have you hooked up so far, and where are you stuck?
alpox
@alpox
Oct 29 2017 15:59
@penchochris Do you mean to put the properties of the json object into class attributes?
Christopher aka Pencho
@penchochris
Oct 29 2017 15:59
yeah
alpox
@alpox
Oct 29 2017 15:59
@penchochris I believe you have to do that by hand
Christopher aka Pencho
@penchochris
Oct 29 2017 15:59
but the class is extending 2 classes
I will show you my code, it's not working hehe
import Market from './Market'

class Event extends Market {
    constructor(obj) {
        if (obj instanceof Object) {
            super();
      this.id = obj.id || '';
      this.name = obj.name || '';
            this.markets = obj.markets[] || [];
        }
    }
}

module.exports = Event;
import Selection from './Selection'

class Market extends Selection {
    constructor(obj) {
        if (obj instanceof Object) {
      super(obj);
            this.id = obj.markets.id || '';
            this.name = obj.markets.name || '';
            this.selections = obj.markets.selections || [];

        }
    }
}

module.exports = Market;
class Selection {
    constructor(obj) {
        if (obj instanceof Object) {
            this.id = obj.markets.selections.id || '';
            this.name = obj.markets.selections.name || '';
            this.price = obj.markets.selections.price || '';
        }
    }
}

module.exports = Selection;
import Event from '../../models/Event'

const request = new XMLHttpRequest();
const url = 'http://www.mocky.io/v2/59f08692310000b4130e9f71';

request.open('GET', url);
request.onload = () => {

  const dataJSON = JSON.parse(request.responseText);

  const test = new Event(dataJSON);

  console.log(dataJSON[0]);
  console.log(test);
}

request.send();
Amanda
@Amandaan
Oct 29 2017 16:00
The problem is when after I choose the emoji, type some text and click Send. The icon and text show in the screen area. But after that, I just can't switch between the icons
Pascal Clanget
@Gh05d
Oct 29 2017 16:00
@AlyxMoon thx for the help and the very good explanation :thumbsup:
CamperBot
@camperbot
Oct 29 2017 16:00
gh05d sends brownie points to @alyxmoon :sparkles: :thumbsup: :sparkles:
:cookie: 418 | @alyxmoon |http://www.freecodecamp.com/alyxmoon
Amanda
@Amandaan
Oct 29 2017 16:01
It doesn't respond. I just can't choose the other icon,which url is "img/image2.jpg"
Christopher aka Pencho
@penchochris
Oct 29 2017 16:04
@alpox an Event can have 0:N Markets and a Market can have 0:N Selections
alpox
@alpox
Oct 29 2017 16:05
@penchochris obj.markets[] should not be allowed (empty brackets)
Christopher aka Pencho
@penchochris
Oct 29 2017 16:05
ok
alpox
@alpox
Oct 29 2017 16:05
Hmm you didn't show the market
Christopher aka Pencho
@penchochris
Oct 29 2017 16:05
I was just testing
alpox
@alpox
Oct 29 2017 16:05
Only 2 times the Event
Christopher aka Pencho
@penchochris
Oct 29 2017 16:05
oops
done
Allister
@AlyxMoon
Oct 29 2017 16:07

@Amandaan I believe your issue here is the way that you are appending messages to the screen after sending.

You are using the innerHTML property to write the html again from scratch the value appended. That works, but it'll also essentially make all the elements new, and no longer have the javascript functions attached to them, since they no longer technically exist.

So you want to change only the text of the screen, but in your current code everything is wrapped in your screen element, so everything gets rewritten.

Christopher aka Pencho
@penchochris
Oct 29 2017 16:10
@alpox so, objects looks fine with the json?
Amanda
@Amandaan
Oct 29 2017 16:11
Thanks, but how should I modify the codes??.....
alpox
@alpox
Oct 29 2017 16:12
@penchochris One moment, sry i got a phonecall
Hania Mubasher
@hania66
Oct 29 2017 16:12
anyone tell? how website work on internet how I add Url which start with http?
Allister
@AlyxMoon
Oct 29 2017 16:13
@Amandaan An easy solution without editing your JS code would be getting your bar element outside of the screen element. I tried it, but your CSS isn't set up that and the send button disappeared, so I was too lazy to edit. Should be the fix though, or it'll at least you get closer.
Christopher aka Pencho
@penchochris
Oct 29 2017 16:13
@alpox don't be sorry man, I aprecciate your help
Amanda
@Amandaan
Oct 29 2017 16:14
oh OK, thank you!
alpox
@alpox
Oct 29 2017 16:14
@penchochris In the class Event you miss to pass on obj to super() with super(obj)
@penchochris Also, change obj.markets[] to just obj.markets
@penchochris But you have a quite a bigger problem
Christopher aka Pencho
@penchochris
Oct 29 2017 16:15
True, I've modified that much that now I'm even missing stuff
alpox
@alpox
Oct 29 2017 16:15
@penchochris Your whole inheritance chain does not work out
Christopher aka Pencho
@penchochris
Oct 29 2017 16:15
?
alpox
@alpox
Oct 29 2017 16:16
@penchochris You now have a market which inherits from selection and an event which inherits from market
This alone doesn't to make any sense
Allister
@AlyxMoon
Oct 29 2017 16:16
@hania66 Can you rephrase the question? I don't understand :)
alpox
@alpox
Oct 29 2017 16:17
@penchochris Moreover, this will give you ONE instance of ONE thing (An event). This means that there will be no array of Markets or Selections because you only inherited them
Pendramon
@Pendramon
Oct 29 2017 16:17
Guys is it possible to log something if default hasn't ran in a switch statement? Basically i want to do if switch(command) case true then log otherwise don't log without having to add my console.log code in each case?
Christopher aka Pencho
@penchochris
Oct 29 2017 16:18
@alpox wrong way?
@alpox ouch
alpox
@alpox
Oct 29 2017 16:18
@penchochris Well, inheritance is just not the way to go here
I believe you should go for composition over inheritance
You don't inherit each from each other, but you can compose them:
this.markets = obj.markets.map(market => new Market(market));
Christopher aka Pencho
@penchochris
Oct 29 2017 16:20
uhm
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 16:22
hey @alpox
alpox
@alpox
Oct 29 2017 16:22
@tiagocorreiaalmeida :wave: hio
Christopher aka Pencho
@penchochris
Oct 29 2017 16:23
@alpox in that case I don't need to use "super()"
isn't it?
alpox
@alpox
Oct 29 2017 16:23
@penchochris No you don't
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 16:23
how's life?
alpox
@alpox
Oct 29 2017 16:23
@tiagocorreiaalmeida Jumpy
Christopher aka Pencho
@penchochris
Oct 29 2017 16:23
@alpox amazing dude, thanks! I'll try
CamperBot
@camperbot
Oct 29 2017 16:23
penchochris sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1412 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Oct 29 2017 16:23
@penchochris np :-)
abraham anak agung
@padunk
Oct 29 2017 16:24
@alpox :wave:
alpox
@alpox
Oct 29 2017 16:25
@padunk :wave:
abraham anak agung
@padunk
Oct 29 2017 16:26
Can i ask? What is the different between this onChange={this.handleChange} and onChange={() => this.handleChange()}
alpox
@alpox
Oct 29 2017 16:29
@padunk No difference except that you create one level of indirection with onChange={() => this.handleChange()} - you need one more function call
Allister
@AlyxMoon
Oct 29 2017 16:30

@padunk Nothing by itself, they would both run. The difference being that in the first example, onChance will automatically pass the first argument element to your handleChange method, and in the second example you aren't checking for any argument being passed so you don't get any to handleChange

Doing the second method is helpful if you have other variables you want to pass to handleChange that you want to control at that point in time.

abraham anak agung
@padunk
Oct 29 2017 16:33
Ah, i see thank you @alpox @AlyxMoon
CamperBot
@camperbot
Oct 29 2017 16:33
padunk sends brownie points to @alpox and @alyxmoon :sparkles: :thumbsup: :sparkles:
:cookie: 419 | @alyxmoon |http://www.freecodecamp.com/alyxmoon
:star2: 1413 | @alpox |http://www.freecodecamp.com/alpox
Hania Mubasher
@hania66
Oct 29 2017 16:34
@AlyxMoon umm when we make webpage on notepad++ so what we should do that this webpage work on internet
AJNahas
@AJNahas
Oct 29 2017 16:35
How can i access APIs and display them on my website?
Christopher aka Pencho
@penchochris
Oct 29 2017 16:39
@alpox dude you are amazing, it's working!
linkin-park
@linkin-park
Oct 29 2017 16:42
hi @alpox
Allister
@AlyxMoon
Oct 29 2017 16:42
@hania66 You need to set up a website with a domain name and some kind of hosting. I can't explain it all, google either of those terms and you should get some good results.
I just found this guide online, starting at Step 2 would give some answers for you: https://websitesetup.org/
alpox
@alpox
Oct 29 2017 16:43
@penchochris Np :-)
@linkin-park Hio
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 16:43
@AJNahas using ajax request per example
for*
Hania Mubasher
@hania66
Oct 29 2017 16:44
@AlyxMoon thankyou for helping:)
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 16:45
@penchochris from 0 to alpox rate your help :D
his*
Jack Henry Sadang
@jsadang
Oct 29 2017 16:51
https://codepen.io/jsadang/full/jaOwBE/ can you guys, view, give a comment about my work and leave a heart on my work?
alpox
@alpox
Oct 29 2017 17:11
@tiagocorreiaalmeida huh
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 17:12
im runing into an issue but not sure if you can help me probably will force me to change alot of my code have you seen the nightlife app from fcc?
alpox
@alpox
Oct 29 2017 17:13
@tiagocorreiaalmeida i remember something vaguely :D tell me your issue ^^
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 17:15
so I got eveything built up but forgot the part where you have to store the user last search or if he register get the search he had at that time so after login in you take them to the page with the rqueest based on the last search
alpox
@alpox
Oct 29 2017 17:16
@tiagocorreiaalmeida Ah alright
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 17:16
my search is based on a input after submit it on a jsfidle I make an getjson equest to the server
then the server returns me the data and I append it to the dom
got the idea or confusing?
alpox
@alpox
Oct 29 2017 17:17
sure
Except the jsfidle :D
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 17:17
nm its js
xd
:DDD
alpox
@alpox
Oct 29 2017 17:17
:thumbsup:
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 17:18
so now how im gonna sned an user to the indexpage with the input filled based on the last user search and the rqueest allready made
its breaking my head in half :D
alpox
@alpox
Oct 29 2017 17:19
Store the last search in the database and on request send it back :D
Or store the last search just in the localstorage and after login get it outa there
That might be clearner
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 17:24
its a might more problematic thnat that what I have ahaha maybe I can show you the github repo and will be easier then
I explained badly probably
alpox
@alpox
Oct 29 2017 17:25
Hmm i don't think it gets more problematic, but you can show me :-)
alpox
@alpox
Oct 29 2017 17:28
@tiagocorreiaalmeida Dude
Whats that html line :D
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 17:28
ahahaha na append
an
alpox
@alpox
Oct 29 2017 17:29
@tiagocorreiaalmeida Yea i see that
But... dude
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 17:29
how would you do it?
alpox
@alpox
Oct 29 2017 17:29
You gotta learn about strings with ``
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 17:29
I know but wouldnt change the size in here xd
alpox
@alpox
Oct 29 2017 17:30
@tiagocorreiaalmeida
`<div>
    <p>${someVar}</p>
  </div>`
@tiagocorreiaalmeida What size o.O
It would spread it to multiple lines
Much more readable :D
And you have string interpolation at your hands :-)
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 17:30
better change it :D
thanks
sitll about the lastsearch any idea?
alpox
@alpox
Oct 29 2017 17:31
Well.. same as before :D store your last search in the localstorage and when you logged in, read it out and automatically request the data again
Pendramon
@Pendramon
Oct 29 2017 17:31
Is there an if statement i can do if command === one of the switch cases then do something else dont do anything?
alpox
@alpox
Oct 29 2017 17:31
Or store the whole data you got from the .getJSON in localStorage so you don't have to make another request
@Pendramon Just a switch/case should do that, no?
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 17:32
uh that sounds like an idea
linkin-park
@linkin-park
Oct 29 2017 17:47
i'm stuck with redux :'(
linkin-park @linkin-park remembers @alpox
alpox
@alpox
Oct 29 2017 17:47
@linkin-park Whats the problem?
linkin-park
@linkin-park
Oct 29 2017 17:48
i want send props to my react component from redux
Here's the tutorial for it
linkin-park
@linkin-park
Oct 29 2017 17:53
:P
linkin-park @linkin-park wakes up from the dream .
Christopher aka Pencho
@penchochris
Oct 29 2017 18:04
hi guys
What would be the best way to append an HTML to another HTML with javascript?
appendChild of an item? use other html and append it to an iframe?
Pendramon
@Pendramon
Oct 29 2017 18:08
@alpox Well basically i don't want to copy and paste the console.log code to every case
alpox
@alpox
Oct 29 2017 18:12
@Pendramon then use a variable to collect the output
Pendramon
@Pendramon
Oct 29 2017 18:17
Yea i need to restructure my commands code a bit better x) @alpox Thanks!
CamperBot
@camperbot
Oct 29 2017 18:17
pendramon sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1414 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Oct 29 2017 18:22
@Pendramon as always: consider using a plain object instead of a switch. Only in very few cases you actually need a switch
Christopher aka Pencho
@penchochris
Oct 29 2017 18:25
sup Lord alpox?
alpox
@alpox
Oct 29 2017 18:25
@penchochris :wave:
Dont call me lord :D
Christopher aka Pencho
@penchochris
Oct 29 2017 18:25
xD
Ivan Ngundela
@ingundela
Oct 29 2017 18:26
hello everyone.. may you please help with my project... my when I use bootstrap file that I have download and liked to my project the carousel slide don't work... but when I link to the cdn it works fine... I don't know what is going on here...I do exactly the same process to all my project, I prefer to use the download file instead of linking to the CDN.. here is the link to the project I'm working on https://ingundela.github.io/ssm/
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 18:27
@alpox dont think that idea will work hum, im getting everything runing on glitch and will send you the link after and you probably will figure out right after searching but maybe im wrong :D
alpox
@alpox
Oct 29 2017 18:28
@tiagocorreiaalmeida alright, but im on the road now :D ill take a look when im home
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 18:28
np we talk later ;)
Ashwin
@ashwins93
Oct 29 2017 18:31
@ingundela there are some errors in the console about failure to load the bootstrap.min.js
you are using bootstrap 4 css file
but using bootstrap 3 js file
either choose 3 or 4
they have to be of the same version to work
if you are using B4 i think you also need to include the popper.js
Ivan Ngundela
@ingundela
Oct 29 2017 18:34
@ashwins93 Thank you, let me check
CamperBot
@camperbot
Oct 29 2017 18:34
ingundela sends brownie points to @ashwins93 :sparkles: :thumbsup: :sparkles:
:cookie: 399 | @ashwins93 |http://www.freecodecamp.com/ashwins93
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 18:43
@alpox https://tiagocorreia-nightlife-app.glitch.me/ here it is dont look at the stylings and that stuff and the request is limited by one for now, but beside that check what I told you about the last search and see hte code I have its impossible by the way we talked I think
Ivan Ngundela
@ingundela
Oct 29 2017 18:47
@ashwins93 sill not working... I even downloaded the files again just to make sure...
@ashwins93 I don't find the popper.js in the bootstrap files..but I use one that I had download before..
Ashwin
@ashwins93
Oct 29 2017 18:48
@ingundela you are using B4 now?
Ivan Ngundela
@ingundela
Oct 29 2017 18:49
@ashwins93 yes
Ashwin
@ashwins93
Oct 29 2017 18:49
for popper Js just include the CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
because i think it works only with specific versions
have you updated your website after changing files, can i look at it again?
Ivan Ngundela
@ingundela
Oct 29 2017 18:52
@ashwins93 added the pooper js can, but still no luck
Ashwin
@ashwins93
Oct 29 2017 18:52
popper js must be loaded before bootstrap js
check the console for errors
Ivan Ngundela
@ingundela
Oct 29 2017 18:54
@ashwins93 SOLVED!!! THANK
CamperBot
@camperbot
Oct 29 2017 18:54
ingundela sends brownie points to @ashwins93 :sparkles: :thumbsup: :sparkles:
api offline
Ashwin
@ashwins93
Oct 29 2017 18:55
:+1:
Sarah
@SID-London
Oct 29 2017 19:03
Morning campers!
I have a less technical question. What hosting/domain service do you use for your example websites? I'm building a basic website for a local sparky, but also to use on my portfolio (since he won't qualify as an electrician for another two years). He wants it to be www.hisname.com/co.uk. What is a good cheap but reliable hosting service? I've used wordpress in the past, but I think they cost about £85/yr now. Or £250/yr for a business service. Any better suggestions?
CoderG
@codergla
Oct 29 2017 19:14
Hi guys, finally found the time after college applications, to finish my first challenge. I read a lot of documentation and it took me an easy two, three days to find my way around bootstrap challenges. I have finally done it and am a wee bit proud that I actually know what I was doing xD. I would love it, if you could take a moment to critique it, though! https://codepen.io/coderg66/pen/EbaYNq
alpox
@alpox
Oct 29 2017 19:28
@tiagocorreiaalmeida Your html looks much better now :D
@tiagocorreiaalmeida Now tell me why it shouldn't be possible :-)
@tiagocorreiaalmeida Hmm i see... you log in through passwport third-party authentication and serverside rendering
So your frontend cannot know that you just logged in
Its actually still possible to do it anyway but it will feel more hackish
alpox
@alpox
Oct 29 2017 19:34
You create an event handler for the link click for a login and save to the localStorage an identifier for that you're going to log-in and on page render you ask the localstorage for if it holds the identifier
And if it is, load the stored data and show it and also remove the identifier
It would be easier to handle with clientside rendering though
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 19:35
yeah but since I was doing this by ajax requests got a bit limited now
Christopher aka Pencho
@penchochris
Oct 29 2017 19:36
Hi guys, how are you? I have a problem with this code, has to be an scope problem or maybe other stuff... but... Why this loadEvents returns undefined if when I debug it isn't undefined till a weird change that i don't understand...? xD

const loadEvents = () => {
  const request = new XMLHttpRequest();
  const url = 'http://www.mocky.io/v2/59f08692310000b4130e9f71';

  request.open('GET', url);
  request.onload = () => {
    const dataJSON = JSON.parse(request.responseText);
    const events = dataJSON.forEach((event) => {
      let events = [];
      if(event.markets) {
        events.push(new Event(event));
      }
      return events;
    });
    loadDOM(events);
  }
  request.send();
};

loadEvents();
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 19:36
sadly its the only part that im missing and seems that will force to change everything
alpox
@alpox
Oct 29 2017 19:36
@tiagocorreiaalmeida The probably cleaner method would be to just every time you seach for something, store the search to the database and if you logged in just send the last search
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 19:37
I do store it allready if user is logged in the backend on the search I go to the user collection and change the last search
but now how would be the best way to force the page to start with that search?
alpox
@alpox
Oct 29 2017 19:37
@penchochris You never return something from the loadEvents
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 19:38
next time will be better to plan what im going to do before doing it :D
alpox
@alpox
Oct 29 2017 19:38
@penchochris And you sure cannot return the data which comes asynchronously - because the function will have already been left at the point you get your data
Christopher aka Pencho
@penchochris
Oct 29 2017 19:41
@alpox for the first answer... there's other function called loadDOM() that makes things with this item...
@alpox the problem is that const events never gets a value
Ivan Ngundela
@ingundela
Oct 29 2017 19:43
hellow guys, please help me target only the active class in the navigation menu to change the color... I've been trying for a while with no luck... https://ingundela.github.io/ssm/
alpox
@alpox
Oct 29 2017 19:43

@tiagocorreiaalmeida Well i would do something like:

$(".facebook, .twiter").click(function() {
    localStorage.set("isLoggingIn", "true");
    return true;
});

And outside of everything - so it gets executed on page load

if(JSON.parse(localStorage.get("isLoggingIn"))) {
    localStorage.set("isLoggingIn", "false");
    var lastSearchData = localStorage.get("lastSearch");
    ....
}

To store the data just store it in the ajax callback:

localStorage.set("lastSearch", JSON.stringify({ searchString: value, result: data }));
Ivan Ngundela
@ingundela
Oct 29 2017 19:44
I'm new to Web Development and I'm now starting learning and using bootstrap in my projects
alpox
@alpox
Oct 29 2017 19:45
@penchochris Yea forEach only loops - it doesn't return a value.
What you wanted was: dataJSON.filter(event => event.markets).map(event => new Event(event));
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 19:45
its a shame to say but never used localStorage time for some mdn :D
I mean never had use for it
alpox
@alpox
Oct 29 2017 19:46
@tiagocorreiaalmeida :D now you see what it can do
@tiagocorreiaalmeida Actually you could instead use sessionStorage here instead
Would probably be more accurate
Elizabeth Paul
@Kowalatam
Oct 29 2017 19:55
so it seems my brain doesn't want to try and make my Tictactoe computer player smart :)
can i just submit it as two players and a very stupid comp player :)
alpox
@alpox
Oct 29 2017 19:58
@Kowalatam As far as the user stories go you can easily. You wouldn't have to make it possible that two human players play against each other
Elizabeth Paul
@Kowalatam
Oct 29 2017 19:59
yeah, been reading on how to make the AI but its not clicking in anyway
i am at that point that i have convinced myself its not necessary to make it work lol @alpox
alpox
@alpox
Oct 29 2017 20:00
@Kowalatam you can make him random, add heuristics to make it a bit better, or if you want to go fancy, use minmax to make it unbeatable
Elizabeth Paul
@Kowalatam
Oct 29 2017 20:02
@alpox whats heuristics ?. right now its not random as per say, its just fills the next empty space, im just looping
i have read about the minmax, even looked at explanations that have been considered as simple but i still don't get it
alpox
@alpox
Oct 29 2017 20:02
@Kowalatam better make it random then :D but with that you can give it in
Elizabeth Paul
@Kowalatam
Oct 29 2017 20:04
@alpox yeah, i want it to be random at first but atleast block the other layers win or win when there is a block with two X or O
alpox
@alpox
Oct 29 2017 20:04
With heuristics i mean that you try to see if the enemy can win in the next move and try to block it, when he cannot win in the next round, try to extend your position in a way that they lign up or give you a stronger position
Elizabeth Paul
@Kowalatam
Oct 29 2017 20:05
yeah, i think the problem is how i structured everything, trying for now to think of a better way to see how to block or win.
just give me a min let me move to codepen.. ohh warning though.. it might be very confusing lol
alpox
@alpox
Oct 29 2017 20:06
@Kowalatam first click the tidy button! :D
Elizabeth Paul
@Kowalatam
Oct 29 2017 20:12
@alpox its actually arranged accordingly. how do i post the codepen link without making it show the page
alpox
@alpox
Oct 29 2017 20:13
@Kowalatam maybe just put it in backticks like code
Elizabeth Paul
@Kowalatam
Oct 29 2017 20:13
https://codepen.io/Kowalatam/pen/aVzbzm
nope, didn't work :) @alpox
alpox
@alpox
Oct 29 2017 20:14
That are slashes :D
I meant this: https://codepen.io/Kowalatam/pen/aVzbzm or this
Elizabeth Paul
@Kowalatam
Oct 29 2017 20:14
ohhh , my bad
Christopher aka Pencho
@penchochris
Oct 29 2017 20:14
@alpox thanks dude! So i have to change some stuff like these in my code hehe
CamperBot
@camperbot
Oct 29 2017 20:14
penchochris sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1415 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Oct 29 2017 20:14
@penchochris :D
np
alpox
@alpox
Oct 29 2017 20:20
@Kowalatam In your case you could just check all the rowArrs for if there are 2 of the enemy already and the third is still empty - so you could block
But its always interesting again how one can arrange things differently :D never seen such an idea of a setup
This setup is very hard btw. to use for further checks and board overview
Elizabeth Paul
@Kowalatam
Oct 29 2017 20:21
@alpox yeah, i think its a difficult setup also
alpox
@alpox
Oct 29 2017 20:22
@Kowalatam Everytime you are working with a board/grid its best to actually arrange it as such in the code
So you'd have a two-dimensional datastructure
A one-dimensional would also work
One can use a one-dimensional array like a two-dimensional one through coordinate mapping
Elizabeth Paul
@Kowalatam
Oct 29 2017 20:23
u mean like have a simple array with 9 elements to represent the board ?
alpox
@alpox
Oct 29 2017 20:23
Yes exactly
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 20:23
@alpox so after reading this looks quite simple I wonder if it so simple as it looks time to implement it :D
was off for a while
Elizabeth Paul
@Kowalatam
Oct 29 2017 20:24
cus with mine, finding which space is empty to block is difficult
alpox
@alpox
Oct 29 2017 20:24
@tiagocorreiaalmeida :D alright, have fun with it!
@Kowalatam yea :D you could really use a better data representation
Thats actually one of the most important things when designing a system / engineering an application
Elizabeth Paul
@Kowalatam
Oct 29 2017 20:26
yeah that i know lol, thought about a bunch of times, even looked at others code, but my head just don't wanna get it lol
alpox
@alpox
Oct 29 2017 20:26
The kind of data representation you use dictates how you can handle the data and can build your logic
Elizabeth Paul
@Kowalatam
Oct 29 2017 20:27
okay, let me see. if i have an array representing the board, hmm.. i see a bunch of things i have done will not work lol
alpox
@alpox
Oct 29 2017 20:28
@Kowalatam sadly you would have to change most of your code
Elizabeth Paul
@Kowalatam
Oct 29 2017 20:28
yeah, what a wast of over 100 lines. i shall bury them with honor :(
Sorin Ruse
@sorinr
Oct 29 2017 20:28
@Kowalatam think you should change the logic of your js functions coz: 1st you should not allow the player t o make a move without first select if it is X or O. now i can click any cell as first move and ofc i get an undefined value. 2nd you should not allow changing player X or O during the game unless a final result and game ends. 3rd i would save data to local storage so if the user comes and go it would be possible to reload the same state of the game before leaving the game
Nick Cleary
@Hijerboa
Oct 29 2017 20:29
how would I go about making a header appear at the bottom right of a div? Currently I'm trying position: relative; bottom: 0px; right 0px; and that's not doing anything at all
Sorin Ruse
@sorinr
Oct 29 2017 20:30
@Hijerboa can u share the codepen link?
Elizabeth Paul
@Kowalatam
Oct 29 2017 20:30
@sorinr yeah, i was aware of the first problem, just decided to ignore it for the meantime
alpox
@alpox
Oct 29 2017 20:30
@sorinr :wave:
Sorin Ruse
@sorinr
Oct 29 2017 20:30
@alpox :wave:
Christopher aka Pencho
@penchochris
Oct 29 2017 20:31
hi there
Nick Cleary
@Hijerboa
Oct 29 2017 20:31
@sorinr It's not a codepen... It's local... but here's a link to the latest commit on my github Hijerboa/personalWebsite@9dc8835
Sorin Ruse
@sorinr
Oct 29 2017 20:34
@Hijerboa ok. cloned it. where is the problem?
Nick Cleary
@Hijerboa
Oct 29 2017 20:34
@sorinr if you look in the javascript calculator file, the items on the "screen" should appear at the bottom right of the black area, but do not
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 20:40
@alpox lord and saviour save me once again :D
if(JSON.parse(localStorage.getItem("isLoggingIn"))) {
    console.log("hi");
    localStorage.setItem("isLoggingIn", "false");
    var lastSearchData = localStorage.getItem("lastSearch");
    console.log(lastSearchData);
}

$(document).ready((()=>{
    $("#facebook, #twitter").click((()=>{
        console.log("hi");
        localStorage.setItem("isLogginIn","true");
        return true;
    }));
    localStorage.setItem("lastSearch", JSON.stringify({ searchString: value}));
but doesnt seems to any of this to be working
I dont even get the consoles log back :D
Nick Cleary
@Hijerboa
Oct 29 2017 20:41
@sorinr well.. I fixed that issue
I made the screen relative then the position of the items absolute, thus they were relative to the screen
makes no sense in my head but whatever
alpox
@alpox
Oct 29 2017 20:43
@tiagocorreiaalmeida Did you go sure that the links have the id you ask for?
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 20:43
I would tell you what was the issue but you would laugh
Sorin Ruse
@sorinr
Oct 29 2017 20:43
@Hijerboa you can also use flexbox for that
alpox
@alpox
Oct 29 2017 20:44
@tiagocorreiaalmeida Can happen :D was something silly then?
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 20:44
yeah something like element id="#id" :D
Nick Cleary
@Hijerboa
Oct 29 2017 20:45
@sorinr I honestly don't know flexbox
would that be a good way to make it so that the items were no longer on top of eachother? Or can I do that with my current method?
alpox
@alpox
Oct 29 2017 20:46
@tiagocorreiaalmeida Btw. i could just think about another possibility to do this:
Save the last search in the database and on login, serverside-redirect the user to a specific url which serves the fully rendered page with the search results he looked for the last
@tiagocorreiaalmeida Heheh :D you're not the first one
Sorin Ruse
@sorinr
Oct 29 2017 20:46
@Hijerboa google for it. see that its not ok to have same id for both h1 and h3 under Screen. ids must be unique
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 20:47
yeah it would be quite easy doing the first aprt if I took an aproach without json requests :D if I reqdirect the user to the last searc hit will render a json page sadly :D
Nick Cleary
@Hijerboa
Oct 29 2017 20:47
@sorinr alright thanks man
CamperBot
@camperbot
Oct 29 2017 20:47
hijerboa sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1348 | @sorinr |http://www.freecodecamp.com/sorinr
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 20:48
that was my first idea atually
Sorin Ruse
@sorinr
Oct 29 2017 20:48
@Hijerboa welcome
alpox
@alpox
Oct 29 2017 20:48
@tiagocorreiaalmeida yea if you didnt do the search with ajax this would have been easier
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 20:48
kill me :D
alpox
@alpox
Oct 29 2017 20:48
But i always feel like serverside rendering really narrows your possibilities. I never liked it
Its faster for making a working page than clientside rendering but you loose a lot pf the dynamics
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 20:49
yeah as you could see all it took me was build an "api" and make requests to it
and just append it
alpox
@alpox
Oct 29 2017 20:49
Yea
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 20:49
quite easy and good idea unthil the point of saving the last request hueheue
anyway will try to solve it using what you mentioned the localstorage
Sorin Ruse
@sorinr
Oct 29 2017 20:51
one of the advantages in rendering the ui client side is that u are using the client pc power not the server's one and make less calls to the server
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 20:51
this part is not running
if(JSON.parse(localStorage.getItem("isLoggingIn"))) {
    localStorage.setItem("isLoggingIn", "false");
    let lastSearchData = localStorage.getItem("lastSearch");
    console.log("hi");
}
alpox
@alpox
Oct 29 2017 20:52
@sorinr spot on. Also, it removes the really distuebing full page reload flash with scroll to top after each rerender
@tiagocorreiaalmeida where did you put it?
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 20:53
`
    console.log(localStorage.getItem("isLoggingIn"));
returns null even inside the ready function
Sorin Ruse
@sorinr
Oct 29 2017 20:53
@alpox yep
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 20:54
but I had it above @alpox before the .ready
another tpyo
typo
:D
im the master of those
alpox
@alpox
Oct 29 2017 20:55
@tiagocorreiaalmeida lol :D good that you found it
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 20:56
a uqestion how does the storage behaves in the brwoser?does it makes it any slower or something like that?cause for now im only storing the variable that I searched and im gonna change the input vlaue and press the keywas one idea other was what you said store the entire request
but since I dont know the behavior of the localstorage asking about it
alpox
@alpox
Oct 29 2017 20:57
@tiagocorreiaalmeida it just saves the stuff to disk of the client computer as a string and itself acts like a key/value store
Its quite fast
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 20:58
oh ok then will create a function to populate the html otherwise will be 2 times that long writing :D thanks for the help, I searched about sessionstorage but seems it loses the data after you changing of tab or something like that
alpox
@alpox
Oct 29 2017 21:00
@tiagocorreiaalmeida not after changing the tab. It just saves the stuff only for your current tab and does not share its data with other tabs with the same application and also does not save it over browser close/restart
SessionStorage would be appropriate in your case
You could just replace all localStorage with sessionStorage as the syntax is exactly the same, just the name differently
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 21:01
yeah I tought about the user comming back to the brwoser and see his last search comming in
but maybe its better the otherway around
alpox
@alpox
Oct 29 2017 21:01
Idk :D depends on what you want
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 21:02
yeah, always on point @alpox thanks mate
CamperBot
@camperbot
Oct 29 2017 21:02
tiagocorreiaalmeida sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1416 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Oct 29 2017 21:02
@tiagocorreiaalmeida np :)
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 21:03
so are you taking any engineer degree?
alpox
@alpox
Oct 29 2017 21:05
@tiagocorreiaalmeida CS bachelor
Will be done in summer
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 21:05
oh that's nice :D
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 21:11
ok this thing of localstorage its atually pretty cool
thanks to it I control the input value and the append data without any serverside rendering
alpox
@alpox
Oct 29 2017 21:12
Yup you do
Christopher aka Pencho
@penchochris
Oct 29 2017 21:24
@alpox I've allmost finished
@alpox trying to guess why I cannot filter the JSON hehe
alpox
@alpox
Oct 29 2017 21:27
@penchochris any code? Where does filter fail you?
Christopher aka Pencho
@penchochris
Oct 29 2017 21:27
const events = dataJSON.filter(event => event.markets).map(event => new Event(event));
alpox
@alpox
Oct 29 2017 21:28
Any chance that event.markets is not undefined but an empty array?
Christopher aka Pencho
@penchochris
Oct 29 2017 21:28
if event.markets is [] should be false... so dunno why it returns me
empty is not false?
alpox
@alpox
Oct 29 2017 21:28
No its not
Christopher aka Pencho
@penchochris
Oct 29 2017 21:28
oh...
alpox
@alpox
Oct 29 2017 21:28
Test for event.markets.length then
Christopher aka Pencho
@penchochris
Oct 29 2017 21:30
uhm returns nothing, event.markets.id too
(nothing at all, neither those that I want)
alpox
@alpox
Oct 29 2017 21:31
Code? :D it should return something if there are markets
Christopher aka Pencho
@penchochris
Oct 29 2017 21:32
it returns all the markets
if you quit the filter
import Event from '../../models/Event'

const selectionHTML = (element) => {
  const selectionHTML = element.selections.map(selection => {
    return `<div class=${selection.name} id=${selection.id}>
              <span>${selection.name}</span>
              <span>${selection.price}</span>
            </div>`
  });
  return selectionHTML.join('');
}

const marketHTML = (element) => {
  const marketHTML = element.markets.map(market => {
      return `<div class=${market.name} id=${market.id}>
                <span>${market.name}</span>
                ${selectionHTML(market)}
              </div>`;
  });
  return marketHTML.join('');
}

const eventHTML = (element) => {
  const eventHTML = `<li class="event" id='${element.id}'>
            <div class="name">
              ${element.name}
            </div>
            ${marketHTML(element)}
          </li>`;
  return eventHTML;
}

const insertElement = (element, div) => {
  document.querySelector(div).innerHTML += eventHTML(element);
}

const loadDOM = (events) => {
  events.forEach((event) => {
    insertElement(event,'#central-content .items');
  });
};

const loadEvents = () => {
  const request = new XMLHttpRequest();
  const url = 'http://www.mocky.io/v2/59f08692310000b4130e9f71';

  request.open('GET', url);
  request.onload = () => {
    const dataJSON = JSON.parse(request.responseText);
    const events = dataJSON.filter(event => event.markets.lenght()).map(event => new Event(event));

    loadDOM(events);
  }
  request.send();
};

loadEvents();
on loadEvents() (bottom)
alpox
@alpox
Oct 29 2017 21:32
@penchochris .length is no function. Don't call it :-)
Christopher aka Pencho
@penchochris
Oct 29 2017 21:34
fuck, it was a typo... first of all i put .lenght instead of length
i should stop xDDD
alpox
@alpox
Oct 29 2017 21:34
@penchochris Oh that too :D
Didn't even notice at first
Christopher aka Pencho
@penchochris
Oct 29 2017 21:34
me neither that's why I put () just in case
hahaha
alpox
@alpox
Oct 29 2017 21:34
Hahah :D alright
Christopher aka Pencho
@penchochris
Oct 29 2017 21:35
@alpox you are great man
thanks
alpox
@alpox
Oct 29 2017 21:35
@penchochris np
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 21:36
@alpox im performing a click on a key that's the enter but im aswell doing it after checking if the local storage exists somehow it doesnt perform the click only on this setp
if(localStorage.getItem("isLogginIn")) {
    localStorage.setItem("isLoggingIn", "false");
    let lastSearchData = JSON.parse(localStorage.getItem("lastSearch"));
    if(lastSearchData){
        $("#location").val(lastSearchData.searchString);
        latest = lastSearchData.searchString;
        $("#send").click();
    }
}
found an issue with saving the data
if the user sayshis going I dont have that data at the moment
so I Just save the search term and then set the input value and do the click
alpox
@alpox
Oct 29 2017 21:39
@tiagocorreiaalmeida do me a favor and put the code for loading and showing the data in an own function which takes the search string as argument and call that one from the click and from that place :D
Forcing clicks on elements is about never a good idea unless you want to fake user interaction
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 22:00
I will, sorry to bother tough!! thanks @alpox
CamperBot
@camperbot
Oct 29 2017 22:00
tiagocorreiaalmeida sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
api offline
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 22:01
not even a brownie :D
alpox
@alpox
Oct 29 2017 22:01
@tiagocorreiaalmeida You don't bother me :D
Ah yea dear camperbot seems to have burnout
khorram bin salim khondkar
@khorramk
Oct 29 2017 22:07
hi
i am having problems doing one of the front end works by fcc
i need to gather api from wikipedia
but dont't know which link
i have been given two links
which one should i use
?
alpox
@alpox
Oct 29 2017 22:10
@khorramk 1. one use for the button which only gives you a random page
khorram bin salim khondkar
@khorramk
Oct 29 2017 22:11
fcc
alpox
@alpox
Oct 29 2017 22:12
@khorramk So use this to investigate in the API: https://www.mediawiki.org/wiki/Special:ApiSandbox to get a grasp of what url you have to put together
https://www.mediawiki.org/wiki/API:Main_page gives you a hard overview over the things you can put
khorram bin salim khondkar
@khorramk
Oct 29 2017 22:21
hey among action whcih action should i choose?
Isaiah Trembley
@IsaiahCT
Oct 29 2017 22:21
?
khorram bin salim khondkar
@khorramk
Oct 29 2017 22:21
i mean which action
i tried to find search action
which gonna help me to search anything
Isaiah Trembley
@IsaiahCT
Oct 29 2017 22:22
got you
I mean I understand
alpox
@alpox
Oct 29 2017 22:23
@khorramk Most likely query
khorram bin salim khondkar
@khorramk
Oct 29 2017 22:23
i was thinking
Isaiah Trembley
@IsaiahCT
Oct 29 2017 22:23
I would go with query
because the is the one type of action I know the most
khorram bin salim khondkar
@khorramk
Oct 29 2017 22:24
yh
Isaiah Trembley
@IsaiahCT
Oct 29 2017 22:25
?
khorram bin salim khondkar
@khorramk
Oct 29 2017 22:27
thanks guys i got the hang of it now
Isaiah Trembley
@IsaiahCT
Oct 29 2017 22:27
what causes api's to go down
khorram bin salim khondkar
@khorramk
Oct 29 2017 22:29
lots of trafik
trafick
Isaiah Trembley
@IsaiahCT
Oct 29 2017 22:30
?
just lots of online users?
khorram bin salim khondkar
@khorramk
Oct 29 2017 22:30
y
Isaiah Trembley
@IsaiahCT
Oct 29 2017 22:30
ah
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 22:32
@alpox would you like to test it out https://tiagocorreia-nightlife-app.glitch.me/ ? before styling this the correct way :D
alpox
@alpox
Oct 29 2017 22:32
@tiagocorreiaalmeida Hmm i cannot test the login
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 22:32
what do you mean?
alpox
@alpox
Oct 29 2017 22:32
I don't have twitter and i'd never log in anywhere with facebook
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 22:33
oh ok my bad
by the way why? just curiosity :D
alpox
@alpox
Oct 29 2017 22:33
But from what i can tell... the search isn't really accurate :D
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 22:33
it searchs for the top rated
and open bars
was the terms I setted
alpox
@alpox
Oct 29 2017 22:33
Winterthur - my city - gives me 1 result - Kennett Pike Wilmington
R31Z
@R31Z
Oct 29 2017 22:33
Hi team
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 22:34
I got the results limited still my bad, and maybe should change the request to the near place and not the most ranked
rated*
alpox
@alpox
Oct 29 2017 22:34
Maybe a combination of both :D
Tiago Correia
@tiagocorreiaalmeida
Oct 29 2017 22:36
will have to give a new read tomorrow to the yelp api, anyway thanks for all the help today
alpox
@alpox
Oct 29 2017 22:36
@tiagocorreiaalmeida np
Christopher aka Pencho
@penchochris
Oct 29 2017 22:52
@alpox hey man, do you know about addEventListener()?
alpox
@alpox
Oct 29 2017 22:53
@penchochris Sure
Christopher aka Pencho
@penchochris
Oct 29 2017 22:53
index_bundle.js:9214 Uncaught TypeError: selection.addEventListener is not a function
    at http://localhost:8080/index_bundle.js:9214:15
    at Array.forEach (native)
    at loadActions (http://localhost:8080/index_bundle.js:9213:14)
    at XMLHttpRequest.request.onload (http://localhost:8080/index_bundle.js:9242:5)
const loadActions = (selections) => {
  selections.forEach((selection) => {
    selection.addEventListener("click", function(selection){
      if(selection.classList.contains('off')) {
        selection.classList.remove('off');
        selection.classList.add('on');
      } else if(selection.classList.contains('on')) {
        selection.classList.remove('on');
        selection.classList.add('off');
      }
    });
  });
}

const selections = Array.of(document.querySelectorAll('.off'));
loadActions(selections);
I'm trying to add a toggle
to on-off
alpox
@alpox
Oct 29 2017 22:53
@penchochris addEventListener only exists on DOM (Html) elements
Hmm
@penchochris You do essentially Array.of([....]);
So you have an array with only 1 element - an element list of DOM elements
So your selection will be a whole list of DOM elements, not only one element
Change const selections = Array.of(document.querySelectorAll('.off'));
to:
const selections = Array.prototype.slice.call(document.querySelectorAll('.off'));
Christopher aka Pencho
@penchochris
Oct 29 2017 22:56
but selections.forEach selection?
alpox
@alpox
Oct 29 2017 22:57
@penchochris selections only has one element, not the single selections as you might think
Christopher aka Pencho
@penchochris
Oct 29 2017 22:58
oh got it, now
so beauty to be truth haha
index_bundle.js:9215 Uncaught TypeError: Cannot read property 'contains' of undefined
    at HTMLSpanElement.<anonymous> (index_bundle.js:9215)
I have to use other thing to reference the item
nice this. works
<3
alpox
@alpox
Oct 29 2017 23:01
@penchochris yep you need another name
Isaiah Trembley
@IsaiahCT
Oct 29 2017 23:04
9215 lines of code
:grimacing:
alpox
@alpox
Oct 29 2017 23:07
@IsaiahCT :clap:
Christopher aka Pencho
@penchochris
Oct 29 2017 23:28
@alpox sorry man, last thing and I'm leaving
const loadActions = (selections) => {
  selections.forEach((selection) => {
    selection.addEventListener("click", function(selection){
      if(this.classList.contains('off')) {
        const copy = this;

        this.classList.remove('off');
        this.classList.add('on');


        document.querySelector('.nav-items').appendChild(copy);
      } else if (this.classList.contains('on')) {
        this.classList.remove('on');
        this.classList.add('off');
        if (this.parentNode.classList.contains('.nav-items')) {
          document.querySelector('.nav-items').removeChild(this);
        }
      }
    });
  });
}
how do I make a copy of this?
alpox
@alpox
Oct 29 2017 23:29
@penchochris Copy?
Christopher aka Pencho
@penchochris
Oct 29 2017 23:29
yeah
alpox
@alpox
Oct 29 2017 23:29
Copy-paste? :D
Christopher aka Pencho
@penchochris
Oct 29 2017 23:29
I mean
alpox
@alpox
Oct 29 2017 23:29
A copy of what exactly do you mean?
Christopher aka Pencho
@penchochris
Oct 29 2017 23:29
i have an hamburguer menu
in my web
called .nav-items
so if the button is ON
it should appear there too
and background green (css)
then if i click turns to normal
but I'm moving the content, not copying hehe
alpox
@alpox
Oct 29 2017 23:35
Hmm what is the reason for removing and appending things in the nav menu?
Christopher aka Pencho
@penchochris
Oct 29 2017 23:35
just part of the exercice
alpox
@alpox
Oct 29 2017 23:35
If you want to make them appear/disappear, use css for that
Christopher aka Pencho
@penchochris
Oct 29 2017 23:35
and that's it, no need to something else
uhm, I think i have an idea
thanks
@alpox thanks again xDDD from 1 to 10 you are an 11 dude
CamperBot
@camperbot
Oct 29 2017 23:36
penchochris sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1417 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Oct 29 2017 23:38
@penchochris np :-)