These are chat archives for FreeCodeCamp/HelpFrontEnd

14th
Feb 2018
LOVE2JOKEBRO
@LOVE2JOKEBRO
Feb 14 2018 02:10
Hey all, I'm looking for a good, offline IDE that I can use to collaborate with friends on HTML/CSS docs...Hopefully something that allows me to either preview the code or launch it. I tried Notepad++ with NppDocShare however the plugin is apparently no longer compatible with recent versions. I also tried CodeShare.io ans was not at all impressed... Any ideas?
Brad
@bradtaniguchi
Feb 14 2018 02:23
@LOVE2JOKEBRO Id consider learning git, if your planning to be a developer, its the reason why there isn't a be-all-endall collaborative IDE. But otherwise I heard Atom recently added support for realtime collaboration
aRtoo
@artoodeeto
Feb 14 2018 04:39
hey guys im getting the dom element but im getting undefined when i specify the index. so weird. but on the others im getting the result.
   const submitBtn = document.getElementsByTagName('button');
    console.log(submitBtn[0]) // returns undefined
    const closeBtn = document.getElementsByClassName('fa-times');
    console.log(closeBtn[0]); // returns undefined
  const submitBtn = document.getElementsByTagName('button');
console.log(submitBtn) // returns an array
const closeBtn = document.getElementsByClassName('fa-times');
console.log(closeBtn); // returns an array
HerbiScript
@HerbiScript
Feb 14 2018 04:52
Hi all, any feedback on my first project would be much appreciated. https://codepen.io/HerbiScript/pen/zRdwoN?editors=1100 - Just started coding yesterday and know I can improve my efficiency and cleanliness. Also curious if I should jump into some JavaScript before attempting to build my portfolio? Thank you!
Ken Haduch
@khaduch
Feb 14 2018 04:53
@artoodeeto - have you posted a URL for your code?
Claudio Restifo
@Marmiz
Feb 14 2018 04:53
Weird, do you have a snippet or a pen where we can see the actual code? @artoodeeto
aRtoo
@artoodeeto
Feb 14 2018 04:53
@Marmiz @khaduch wait bro its on my local. ill create a pen. give me 3mins thanks so much. im confused
CamperBot
@camperbot
Feb 14 2018 04:54
artoodeeto sends brownie points to @marmiz and @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1159 | @marmiz |http://www.freecodecamp.org/marmiz
:star2: 3734 | @khaduch |http://www.freecodecamp.org/khaduch
aRtoo
@artoodeeto
Feb 14 2018 05:00
@khaduch @Marmiz here you go bro. thank you so much
CamperBot
@camperbot
Feb 14 2018 05:00
artoodeeto sends brownie points to @khaduch and @marmiz :sparkles: :thumbsup: :sparkles:
api offline
api offline
aRtoo
@artoodeeto
Feb 14 2018 05:00
Ken Haduch
@khaduch
Feb 14 2018 05:00
@HerbiScript - I'm looking at your tribute page - it looks pretty good, but one area that could use a little touching up is the image and how that top part responds to a smaller screen size. You could make the image resize responsively according to the width, and it seems that when it wraps to put the name and information below the image, it would be good to have his name and perhaps the date and "job title" information be on top of the image? And the way the quote about being a gamer wraps around the image, it's like a caption but it does wrap around the image and then get shoved down all the way below all of the text when it wraps. I think that's some area that could use a little work...
HerbiScript
@HerbiScript
Feb 14 2018 05:06
@khaduch Thank you for the feedback, it sounds like I need to work on incorporating some bootstrap where necessary, right? I noticed I was too focused on making it look good on my screen and not considering people opening it on something smaller. Again, thanks for the response.
CamperBot
@camperbot
Feb 14 2018 05:06
herbiscript sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3735 | @khaduch |http://www.freecodecamp.org/khaduch
Ken Haduch
@khaduch
Feb 14 2018 05:06
@HerbiScript - oh, I also saw that you have a closing </header> tag, and I didn't see an opening tag?
@HerbiScript - yes, it doesn't necessarily have to be bootstrap, but you can use bootstrap to achieve that. You could also just mimic the HTML and CSS (as bootstrap would do) to make that top part of the page be responsive. Maybe using flexbox... but bootstrap might give you a handle on how to make it work...
@artoodeeto - okay, so what's not going right that you are expecting to see in your CodePen post? I'm seeing it output a button information as an HTMLCollection?
HerbiScript
@HerbiScript
Feb 14 2018 05:09
@khaduch Great catch, and that makes a lot more sense now. So grateful for people like you, thanks again!
CamperBot
@camperbot
Feb 14 2018 05:09
herbiscript sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
api offline
aRtoo
@artoodeeto
Feb 14 2018 05:10

@khaduch this one sir.

const submitBtn = document.getElementsByTagName('button');
    console.log(submitBtn[0])
    const closeBtn = document.getElementsByClassName('fa-times');
    console.log(closeBtn[0]);

line 16 to 19. its returning undefined

Ken Haduch
@khaduch
Feb 14 2018 05:20
@artoodeeto - I might not be thinking too clearly because it's late here... but I moved the code for the closeBtn variable after the place where you call appendElem(); (around line 38) and I then see a length of one. So - I'm speculating that when you execute that code around line 16, that you haven't instantiated the element in the document? Could that be true?
aRtoo
@artoodeeto
Feb 14 2018 05:22
@khaduch thats what im thinking too but how about the others? ive been moving the code around. hmm.
Claudio Restifo
@Marmiz
Feb 14 2018 05:29
@artoodeeto it's undefined because fa-times does not exist yet at the time is called, since it's created later on with the appendChild finction
aRtoo
@artoodeeto
Feb 14 2018 05:29
@Marmiz ohhhhhhh there you go. thank you thank you
CamperBot
@camperbot
Feb 14 2018 05:29
artoodeeto sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
api offline
Claudio Restifo
@Marmiz
Feb 14 2018 05:30
since you are going for that direction, why myModal is not a class instead of a function?
could be a nice little touch and a fun practice
aRtoo
@artoodeeto
Feb 14 2018 06:13
@Marmiz wait im making a module for a bio. is that possible?
@Marmiz
Class myModal {
constructor(ble, bla);
@Marmiz is that what you mean>
Michael Cordero
@CyberPutty
Feb 14 2018 06:18
hey guys I just got to the react challenges. I don't really understand how to use react in codepen because i have only used it via npm and node. Isn't using react in codepen kinda defeating the purpose of react. like building components and them each having their own css.
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 07:01
@CyberPutty
First things first - To use react on codepen, you need to go to javascript settings section and set JavaScript Preprocessor to Babel
rajeshrmishra
@rajeshrmishra
Feb 14 2018 07:02
hi Guys, please can you check if the site https://cdnjs.cloudflare.com/ working for you?
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 07:02
@rajeshrmishra yes
rajeshrmishra
@rajeshrmishra
Feb 14 2018 07:02
thanks, I am not able to access
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 07:03
@CyberPutty On codepen as well, components can have their own css and props and what not. So no, it doesn't defeat purpose of using react.
The only problem is, you can't have your code separated out in different files.
Which is okay because codepen is there to create quick examples.
If you want to code online, there are better sites to do that like Stackblitz and CodeSandbox
@rajeshrmishra are you behind some proxy?
like corporate proxy at work
rajeshrmishra
@rajeshrmishra
Feb 14 2018 07:25
@Sweet Coding no, at home
Randy
@RandyGoldsmith
Feb 14 2018 07:32
does anyone know how to put a line vertically down through bullet points in a list?
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 07:54
@RandyGoldsmith border left on ul ?
Randy
@RandyGoldsmith
Feb 14 2018 07:54
@SweetCodingInc tried that
i think its very complicated..requires a lot of stuff
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 07:55
I shouldn't
do you have codepen?
Michael Cordero
@CyberPutty
Feb 14 2018 07:55
@SweetCodingInc thanks ill check those out.
CamperBot
@camperbot
Feb 14 2018 07:55
cyberputty sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
:cookie: 289 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
Randy
@RandyGoldsmith
Feb 14 2018 07:55
if you scroll all the way down you will see i did what you suggested
what i want is a vertical line that goes through the list items bullet points
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 07:56
@RandyGoldsmith You could set
ul {
    list-style-type: none;
    padding: 5px;
}
Randy
@RandyGoldsmith
Feb 14 2018 07:57
but i need the bullet points..
im just doing a clone of this
under work and education you'll see the blue circles and lines
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 07:58
@RandyGoldsmith Got it... You shouldn't use ul/li in that case
Randy
@RandyGoldsmith
Feb 14 2018 07:59
@SweetCodingInc i have to use :after and :before and that stuff right?
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 07:59
@RandyGoldsmith You could. but it will be harder that way
Randy
@RandyGoldsmith
Feb 14 2018 07:59
looked it up and they have some solutions on overstack but they arent easy to understand
not very good at html and css..this is suppose to help me with that
Michael Cordero
@CyberPutty
Feb 14 2018 08:21
@RandyGoldsmith take out all of the lines and place a div before the one with the list. then position it absolutely. give it a height and a margin as well as border left in order to position it. it will be absolutely positioned within the div. but you need to make sure to stay away from the top,bottom,left,right properties as that will sort of disconnect it from the div.
@RandyGoldsmith
.timeline
{ 

  height:60px;
  position: absolute;
 margin-left:30px;
  border-right: 1px solid;
  display:inline-block;

}
<div class="timeline">

      </div>
      <div class="work">
        <ul class="">
          <li class="">Design Director at Big Design, New York</li>
          <li>Senior Designer at Design Company, Brookyln</li>
          <li>Designer at Brand New, Paris</li>
        </ul>
      </div>
@RandyGoldsmith you should also make work display:inline-block i believe.
Randy
@RandyGoldsmith
Feb 14 2018 08:26
@CyberPutty hmm..trying it now
Michael Cordero
@CyberPutty
Feb 14 2018 08:26
.work {

  display:inline-block;

}
must be doing something wrong
Claudio Restifo
@Marmiz
Feb 14 2018 08:30

I think the best approach is using pseudo-elements (:before or :after).
Could be a chance to learn them?

You can use it to style the bullet point as well :)

Michael Cordero
@CyberPutty
Feb 14 2018 08:30
@RandyGoldsmith compare is that what you want
Randy
@RandyGoldsmith
Feb 14 2018 08:31
@CyberPutty yes thanks, its very close..i just need the line to run through the circles
CamperBot
@camperbot
Feb 14 2018 08:31
randygoldsmith sends brownie points to @cyberputty :sparkles: :thumbsup: :sparkles:
:cookie: 307 | @cyberputty |http://www.freecodecamp.org/cyberputty
Randy
@RandyGoldsmith
Feb 14 2018 08:31
@Marmiz yeah i may have to learn them and read up on how to do that
Claudio Restifo
@Marmiz
Feb 14 2018 08:33

@RandyGoldsmith I'd go with something like:

li:before {
 content: "";
 width: 5px;
 height: 10px;
 position: absolute;
 background: 'acquamarine';
}

and then play around with top and left/right according to your font size

width and height are just random number as well
Randy
@RandyGoldsmith
Feb 14 2018 08:35
@Marmiz okay thank you
CamperBot
@camperbot
Feb 14 2018 08:35
:star2: 1160 | @marmiz |http://www.freecodecamp.org/marmiz
randygoldsmith sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
Claudio Restifo
@Marmiz
Feb 14 2018 08:39
probably the div solution as @CyberPutty suggested work as well, I just never tried it :)
Dany Din
@danydin
Feb 14 2018 09:35

@Marmiz i found for example those fonts:
https://github.com/lcdvirgo/bootstrap/tree/master/assets/fonts/%5BFontFont%5D%20Kievit

how i apply them on my site what are the stages?

  1. put them in my hosting folder..
  2. add href to them through my html
  3. call them through the class-css i want to apply?
    finish?
Dany Din
@danydin
Feb 14 2018 09:44
??
Claudio Restifo
@Marmiz
Feb 14 2018 10:23
@danydin you can simply add a font-face tags into your CSS
@font-face {
      font-family: whatever;
      src: url(path to your font);
} 

/* then use it as normal */
body {
  font-family: whatever
}
Dany Din
@danydin
Feb 14 2018 10:24
whats the @ purpose
i dont want it on all the site
@Marmiz thanks
CamperBot
@camperbot
Feb 14 2018 10:24
danydin sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1161 | @marmiz |http://www.freecodecamp.org/marmiz
Claudio Restifo
@Marmiz
Feb 14 2018 10:28
@danydin at-rule --> read the docs! :)
Fabien SHAN
@X140hu4
Feb 14 2018 10:29
Styling the simon game with pure css is hard haha
dinesh
@1532j0004kg
Feb 14 2018 10:29
is the 9 and 10 project is tough?
Fabien SHAN
@X140hu4
Feb 14 2018 10:30
9 and 10?
dinesh
@1532j0004kg
Feb 14 2018 10:30
yup , in fcc
Fabien SHAN
@X140hu4
Feb 14 2018 10:31
The last one of the front-end section. Yeah the 10th
dinesh
@1532j0004kg
Feb 14 2018 10:31
10 th is tough okay .
:+1:
what about 9th one
Fabien SHAN
@X140hu4
Feb 14 2018 10:32
The tic tac toe? I had trouble with the minmax algo implementation
Claudio Restifo
@Marmiz
Feb 14 2018 10:32
@X140hu4 it's not that hard, to fake a button press all you can do it just add some box-shadow so that it looks like it.
(like going deeper into the page or higher to the screen so it looks like in 3D)
dinesh
@1532j0004kg
Feb 14 2018 10:33
@X140hu4 cool,thanks
CamperBot
@camperbot
Feb 14 2018 10:33
1532j0004kg sends brownie points to @x140hu4 :sparkles: :thumbsup: :sparkles:
:cookie: 323 | @x140hu4 |http://www.freecodecamp.org/x140hu4
Fabien SHAN
@X140hu4
Feb 14 2018 10:33
@1532j0004kg Have you finished the front end?
dinesh
@1532j0004kg
Feb 14 2018 10:33
7 project only.
Fabien SHAN
@X140hu4
Feb 14 2018 10:34
So you finished the JS calc?
dinesh
@1532j0004kg
Feb 14 2018 10:34
yes
what about you @X140hu4 ?
Fabien SHAN
@X140hu4
Feb 14 2018 10:35
@Marmiz Thanks for that :) I trying a few things for the center piece. My project so far: https://codepen.io/X140hu4/pen/RQZvye
CamperBot
@camperbot
Feb 14 2018 10:35
x140hu4 sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1162 | @marmiz |http://www.freecodecamp.org/marmiz
Fabien SHAN
@X140hu4
Feb 14 2018 10:35
@1532j0004kg I am on this one and I am finished with the front-end
dinesh
@1532j0004kg
Feb 14 2018 10:36
good luck :+1:
Fabien SHAN
@X140hu4
Feb 14 2018 10:36
Thanks :)
dinesh
@1532j0004kg
Feb 14 2018 10:37
say me a good luck :smile: , lol
Fabien SHAN
@X140hu4
Feb 14 2018 10:37
@1532j0004kg I am sure you can do it haha no need for luck :D just grit
dinesh
@1532j0004kg
Feb 14 2018 10:37
:smile: :+1: see ya later
Garo
@Garabed96
Feb 14 2018 10:40
  componentDidMount() {
    var topRecent = "https://fcctop100.herokuapp.com/api/fccusers/top/recent";
    axios.get(`https://fcctop100.herokuapp.com/api/fccusers/top/recent/`)
      .then(function (res){
        console.log(res);
      }).catch(function(error){
        console.log(error);
      })
  }

  render() {
      return(
        <div>
          <ul>
            {this.state.res.map(res =>
              <li key={res.username}>{res.alltime}</li>
            )}
          </ul>
        </div>
      );

      // <div className="container-fluid">
      //   <h1> TopList </h1>
      //   <div id="TopList">
      //   </div>
      // </div>

  }
I'm trying to map through the json username and alltime list of 100 array, anyone see where I'm going wrong in this react script
Michael Cordero
@CyberPutty
Feb 14 2018 10:45
@Garabed96 are you actually passing the content to the constructor. it just looks like your logging the result.
Ashley
@ashxoxoj
Feb 14 2018 10:46
do any of you guys know a font family that has a really really thing writing please ?
thin*
Michael Cordero
@CyberPutty
Feb 14 2018 10:48
@Garabed96
.then(function (res){
/// set state here
        console.log(res);
}
Fabien SHAN
@X140hu4
Feb 14 2018 10:50
@ashxoxoj Have you searched in the google fonts website?
Michael Cordero
@CyberPutty
Feb 14 2018 10:53
@Garabed96
constructor(props)
  {
    super(props);
    this.state={
      myList:[]
    };

componentDidMount()
{
  console.log('did mount');
  const url= "// your  url";
  fetch(url)
  .then(response=> response.json())
  .then((data)=>{
    console.log(data);
    this.setState({
    myList: data

    });
  });
}

{this.state.myList.map(myfunc)};
Fernando
@lestairon
Feb 14 2018 10:54
Does someone knows my my icons aren't working on my pen?
https://codepen.io/Lestairon/pen/jZLXBp
I have them linked
LydaTech
@lydatech
Feb 14 2018 10:56
@lestairon Bootstrap 4 doesn’t include an icon library by default
Fernando
@lestairon
Feb 14 2018 10:57
Oh
Forgot to check the link
Fernando
@lestairon
Feb 14 2018 10:57
"3.3"
Stephen James
@sjames1958gm
Feb 14 2018 11:07
@lestairon Bootstrap assumes icon font files will be located in the ../fonts/ directory, relative to the compiled CSS files. These are not there on codepen
Fernando
@lestairon
Feb 14 2018 11:11
Yeah, now i'm looking for a css link with icons
LydaTech
@lydatech
Feb 14 2018 11:52
@lestairon try font-awesome
Abhinav Mishra
@abhinav-m
Feb 14 2018 12:43
@sjames1958gm Hello stephen, long time :) Heres my dungeon crawler https://secret-brushlands-92196.herokuapp.com/cool
your thoughts welcome!
works on chrome (hopefully)
Arun Shah
@ameeno
Feb 14 2018 12:55
Hi Guys, I am really struggling with Getting Jquery to update my page
anyone free for a few seconds to see my code?
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 12:55
ask away @ameeno
Arun Shah
@ameeno
Feb 14 2018 12:57
Shall i submit to codepen?\
basically it just isnt updating at all and i have tried
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 12:57
would be better if you could
Arun Shah
@ameeno
Feb 14 2018 13:00
hiya ok sorry for the delay, was just getting setup
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:00
@ameeno alright.. what seems to be the problem?
Arun Shah
@ameeno
Feb 14 2018 13:01
if you see my javascript.js i am trying to update my index page, using an xml upload
however I am a very rusty/novice/not even really a programmer but trying hard
and so i cannot see why its not working or how to make it work :(
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:02
wait..
you want to first upload an xml. And then based on content of that xml you want your index.html to be updated?
Arun Shah
@ameeno
Feb 14 2018 13:04
yes
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:04
well.. The way you're doing it isn't gonna work the way you expect it
Arun Shah
@ameeno
Feb 14 2018 13:04
ok
how should i do it?
I saw those ways on youtube
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:05
if I understood correctly, you have a php server with this end point that accepts xml file upload.php
Arun Shah
@ameeno
Feb 14 2018 13:05
yep i'm using xampp
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:05
to which when the file is submitted, it is placed in a folder called uploads/
Arun Shah
@ameeno
Feb 14 2018 13:05
and i want to make yep
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:06
then you want to read this file, and update you index.html
Arun Shah
@ameeno
Feb 14 2018 13:06
the file is called newdData.xml
Yes
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:06
Alright then you're 50% on track
so you first need to separate out file upload logic from file retrieval logic
Arun Shah
@ameeno
Feb 14 2018 13:07
presently, i am trying to simply update an unordered list
could i run the javascript at the end of the upload.php file?
i have tried new window the upload.php and then close window
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:07
That's the problem, right? How do you know the end of upload has reached?
Arun Shah
@ameeno
Feb 14 2018 13:07
and i have tried to add a delay in the javascript but i do not know how
Stephen James
@sjames1958gm
Feb 14 2018 13:07
@abhinav-m :+1: Well done - some suggestions
  • make the fog of war a little larger and blocked by walls
  • allow the remembering of rooms
  • bad guys don't move.
Arun Shah
@ameeno
Feb 14 2018 13:08
my file is small, i'm just going to hard code a delay of 3000-5000 ms
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:08
because you have <form target="_blank" action="upload.php" method="post" when you submit the form, the page will refresh and you will lose all the progress
is your upload.php end point behaving correctly?
Arun Shah
@ameeno
Feb 14 2018 13:09
i thought if i tell the php to go back to previous page we break the js
yes the upload php works beutifully
i have even tried renaming various files, the upload works well
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:10
sweet.. then I'll show you a way to fix this
first give an id to your form and remove that action="upload.php" attribute
Arun Shah
@ameeno
Feb 14 2018 13:11
problem has been the WHOLE time this AJAX, Actually sweetcoding, i was having problems with the Ajax for over 2 days, And i simply introduced the upload feature today. but even with manual reading and a file previously present
it WILL NOT UPDATE my html
ok
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:11
I see...
so let's fix that problem first...
Arun Shah
@ameeno
Feb 14 2018 13:12
I am happy to marry together and work on the upload after the page is actually updating (file already in folder)
but right goping to name the form with id.
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:13
give me a min
Arun Shah
@ameeno
Feb 14 2018 13:13
I am trying to update the text in a LI because really what i want to do is update <img tags> but i am trying to do it incrementally,
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:16
I see
I checked your code
the ajax is working correctly
however, this part is not working correctly $(data).find('programme Data').each(function() {
Arun Shah
@ameeno
Feb 14 2018 13:17
ok
would it help if i showed you a pastebin of my xml?
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:18
yeah.. let me see the content
probably it's a simple fix
I actually am just learing jquery/js/css/html/everything all while building this page so lol
normally i am fine but this has made me really stuck
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:19
pastebin is blocked at my work proxy
Arun Shah
@ameeno
Feb 14 2018 13:19
ok what else?
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:19
can you see if it works for $(data).find('programme')
Arun Shah
@ameeno
Feb 14 2018 13:21
yep! that worked for sure
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:21
great
Arun Shah
@ameeno
Feb 14 2018 13:21
could you please tell me how i would update <div class="row suggestion-image-row
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:21
then you just got the selector order wrong
should have been $(data).find('Data programme')
Arun Shah
@ameeno
Feb 14 2018 13:22
because i want to randomly populate <div class="Suggestion col-md-2 col-md-offset-1 suggest">
ok how to we get the upload to work with the xml?\
Thanks Sweet coding! :)
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:22
hold on... let's fix that image part first
no worries :+1:
so this one <div class="row suggestion-image-row
what do you want gone inside this?
Arun Shah
@ameeno
Feb 14 2018 13:23
well instead of <div class="Suggestion col-md-2 suggest"><img src="./images/no-content-img.png"><br />No Contents</div>
I want it to update to <div class="Suggestion col-md-2 suggest"><img src="./images/{text id}.jpg"><br />{text: title}</div>
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:25
Right.. then you can just create new elements like you created new li elements
don't use <br/> btw
Arun Shah
@ameeno
Feb 14 2018 13:25
i have used {text} to signify ajax values. also i am limited to 5 columns but 20 items (A later) part is i need to be able to change the images based on slider control
can i not simply update the existing feilds rather than make new ones?
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:26
Technically, you could...
Arun Shah
@ameeno
Feb 14 2018 13:27
Is there any way i could push all my xml to a "STACK" and update the images based on slider controls from the stack?
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:30
but then again, you will have broken images that you have added there that don't have any src until your ajax responds
@ameeno There is, but you'd have to implement that part personally.
There is no built in mechanism for that
Arun Shah
@ameeno
Feb 14 2018 13:32
Sweet coding ok well,
the existing images are just the same image over and over a "Place holder" image
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:32
I see..
Dany Din
@danydin
Feb 14 2018 13:32
@SweetCodingInc sweeeety
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:33
then you just want the text content dynamic
@danydin :wave:
Dany Din
@danydin
Feb 14 2018 13:33
how i add this * to my site and apply it to specific elements
https://github.com/lcdvirgo/bootstrap/tree/master/assets/fonts/%5BFontFont%5D%20Kievit
Arun Shah
@ameeno
Feb 14 2018 13:33
oh my XML file is not documenting images the images are in my /images/ folder already, the XML just constains the id of the image and the id is also the image name
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:33
I see
Arun Shah
@ameeno
Feb 14 2018 13:34
Ok, Sweet, whats the code for change rather than append
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:34
then it's better to create it dynamically
Arun Shah
@ameeno
Feb 14 2018 13:34
ok
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:34
ye.. so you have <div class="row suggestion-image-row"> that currently has your html
Arun Shah
@ameeno
Feb 14 2018 13:34
yep
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:34
remove that html first and keep it just
<div class="row suggestion-image-row">
</div>
we'll append to this...
Arun Shah
@ameeno
Feb 14 2018 13:35
ok
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:35
change operation is going to be costlier, performance wise, than inserting new markup
Dany Din
@danydin
Feb 14 2018 13:35
sweeeTty
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:36
@danydin hold on...
@ameeno you have this part in your ajax
success: function(data) {
            $(data).find('programme Data').each(function() {
first cache the div that you want the new content to be appended to and empty it programmatically
Arun Shah
@ameeno
Feb 14 2018 13:37
i dont understand sweet coding
cache the div?
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:38
success: function(data) {
  var $imgRow = $('.suggestion-image-row'); // cache the element so that we're not repeatedly accessing dom for this
  $imgRow.empty(); // programmatically empty the element so that you have space for new shit
  $(data).find('programme Data').each(function() {
cache simply means you save a reference to something so that it can be used later on
faster access
Arun Shah
@ameeno
Feb 14 2018 13:38
oh ok chuck it into a var
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:38
Yeah.. haha
Arun Shah
@ameeno
Feb 14 2018 13:38
ok ok right thanks got it
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:39
often using terms like cache instead of chuck it into a var gives you better advantage at the time of interviews...
it's stupid but still :laughing:
Arun Shah
@ameeno
Feb 14 2018 13:39
ok yea it makes sense now
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:40
Then inside the .each you will construct new markup, and append it to $imgRow
Arun Shah
@ameeno
Feb 14 2018 13:40
ok to maximise effeciency?
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:40
yes..
and the new markup you want to create has this structure
<div class="Suggestion col-md-2 col-md-offset-1 suggest">
  <div>
    <img src="{text.id}">
  </div>
  <div>
    {text.content}
  </div>
</div>
Arun Shah
@ameeno
Feb 14 2018 13:43
yep
ok so would that look like $imgRow.append('<div> ...
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:45
$(data).find('Data programme').each(function() {
  var id = $(this).find('Position').text();
  var title = $(this).find('Title').text();
  var imgPath = `/images/${title}.png`;

  var $suggestDiv = $('<div/>', {
    'class': 'Suggestion col-md-2 col-md-offset-1 suggest'
  });

  var $div = $('<div/>');

  var $firstDiv = $div.clone();
  var $secondDiv = $div.clone();

  var $img = $('<img/>', {
    src: imgPath
  });

  $secondDiv.text(title);

  $firstDiv.append($img);

  $suggestDiv.append($firstDiv).append($secondDiv);

  $imgRow.append($suggestDiv);
});
Arun Shah
@ameeno
Feb 14 2018 13:46
clever clever i like your thinking
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:46
I may have to the src for image and to be show wrong
Arun Shah
@ameeno
Feb 14 2018 13:46
especially how var imgPath does the working out for the full path, like your doing it all in chunks
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:47
Ha! Yes
Arun Shah
@ameeno
Feb 14 2018 13:48
what are the clones?
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:48
just so that you don't have to create a new element
I created a $div which we just clone
it doesn't make sense the way I used it
if you move it outside of .each then it's of performance gain
otherwise it's just stupid
Dany Din
@danydin
Feb 14 2018 13:50
@SweetCodingInc $(this) is the (data) file json/xml? why we use this and not (data) itself
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:51
@danydin it's xml.. not json.
Arun Shah
@ameeno
Feb 14 2018 13:51
Ok i understand Sweet Coding
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:51
it will throw error if you try and wrap json object with $
@ameeno :+1:
Arun Shah
@ameeno
Feb 14 2018 13:51
so with each clear
we will delete all the contents presently on the webpage?
in that div i mean?
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:52
@danydin and the reason we use this instead data is that you want to iterate over each node that is of type programme that resides within data.
so when you use .each the current programme element will be passed to the function as this
we wrap this this with $ so that we could use jQuery methods like .text() on it.
Dany Din
@danydin
Feb 14 2018 13:53
ah and it will repeat it till it finish on 1 this?
till it finish the for each loop ^
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 13:53
otherwise we end up writing vanilla js like this.textContent.split('\n') etc
@ameeno yes...
the code will do that for you now.. because we have $imgRow.empty()
Dany Din
@danydin
Feb 14 2018 13:57

sweety how i add this font to some elements on my site
https://github.com/lcdvirgo/bootstrap/tree/master/assets/fonts/%5BFontFont%5D%20Kievit

like what are the steps

Arun Shah
@ameeno
Feb 14 2018 13:59
Hiya Sweet coding, i think there is a problem with var imgPath = './images/${title}.jpg'
it doesnt link to the Image
Tom
@moT01
Feb 14 2018 14:00
working locally? @ameeno
Arun Shah
@ameeno
Feb 14 2018 14:00
yep on xampp
Tom
@moT01
Feb 14 2018 14:01
use the ticks instead of the single quote with that ${}
Arun Shah
@ameeno
Feb 14 2018 14:01
the ticks?
Tom
@moT01
Feb 14 2018 14:01
`
top left on the keyboard
Arun Shah
@ameeno
Feb 14 2018 14:02
ok ok
weird how that works
it just so happens i got a US keyboard the other day
I'm not even sure british Keyboards have ticks
Tom
@moT01
Feb 14 2018 14:03
ha, well you could copy and paste that one
Arun Shah
@ameeno
Feb 14 2018 14:04
Great so how do i limit it to 5 items Sweet coding, and how can i store the others elsewhere?
maybe i will use an xml file with just 5 items for now
You where saying earlier i need to do soemthing with the upload.php?
Tom
@moT01
Feb 14 2018 14:07
if(items < 5) { add item }
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 14:09
@ameeno Sorry.. I was away
@danydin no idea how to add it. Webpage aesthetics has never been my plus points
Dany Din
@danydin
Feb 14 2018 14:10
but in general how i work with fonts
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 14:10
@danydin you need to import the fonts in css file
althogh I'm not certain of the syntax
Dany Din
@danydin
Feb 14 2018 14:11
okk i will play with it thanks though :D
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 14:11
@danydin :+1:
@ameeno create a global variable that will contain all the data - programme
Tom
@moT01
Feb 14 2018 14:12
@danydin i imported a google font here https://github.com/moT01/javascript30/tree/master/flexPanels
in the html, and used it in css
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 14:13
@ameeno
var allData;
$("document").ready(function() {
....
then inside your ajax success
Dany Din
@danydin
Feb 14 2018 14:14
@moT01 prefect thanks so if i want a specific one i just link it to .html and then target it through css amd it will know how to find it even if it is not directly connected to the css?
CamperBot
@camperbot
Feb 14 2018 14:14
danydin sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 991 | @mot01 |http://www.freecodecamp.org/mot01
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 14:15
success: function(data) {
  allData = $(data).find('Data programme');
  var firstFive = Array.from(allData).slice(0, 5);
  firstFive.each(function() {
    // same thing as before
@ameeno
Arun Shah
@ameeno
Feb 14 2018 14:16
hmm ok
what do i do with var $imgRow = $('.suggestion-image-row'); // cache the element so we do not keep accessing dom for this
$imgRow.empty(); // Empty to have space for each iteration
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 14:18
what do you think you should do with it? Will you need it sometime later?
;)
Tom
@moT01
Feb 14 2018 14:19
@danydin they may be in different files - but the browser basically combines them all i think
Arun Shah
@ameeno
Feb 14 2018 14:19
no i was going to keep it but you want me to go from allData = $(data)
Tom
@moT01
Feb 14 2018 14:19
yes it will find it
Arun Shah
@ameeno
Feb 14 2018 14:19
nvm vnm i got what you mean
Dany Din
@danydin
Feb 14 2018 14:20
smart browserrrrrr thanks tomm
Arun Shah
@ameeno
Feb 14 2018 14:20
  • nevermind i mean, so all data becomes the find data function
Tom
@moT01
Feb 14 2018 14:20
click my name and say that
need cookies
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 14:21
@ameeno It means, allData will hold the result of $(data).find('Data programme')
which is an array like object that contains those 24 programme elements
(24 in this case)
Dany Din
@danydin
Feb 14 2018 14:22
@moT01 tom i love you almost 1000 but i gave u already
@moT01 thanls
@moT01 thanks
CamperBot
@camperbot
Feb 14 2018 14:22
danydin sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
api offline
Dany Din
@danydin
Feb 14 2018 14:23
you see? you didn't belive me :cry:
Tom
@moT01
Feb 14 2018 14:23
oh - yea, i missed it
991
Dany Din
@danydin
Feb 14 2018 14:23
indeeeeed
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 14:23
change one 9 and you're almost 911
Dany Din
@danydin
Feb 14 2018 14:24
what u get when u reach 1k
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 14:24
nothing.. probably an ego boost :laughing:
Dany Din
@danydin
Feb 14 2018 14:24
what u need more
Tom
@moT01
Feb 14 2018 14:24
nothing
i get to 1000
Dany Din
@danydin
Feb 14 2018 14:24
can you sell-excahnge them for real money
?
Tom
@moT01
Feb 14 2018 14:25
ha, no
my little cookie icon changes to a star or something
Dany Din
@danydin
Feb 14 2018 14:25
wowwww u ofiicaly become from a cookie to a star
tomo the star sounds better to me than tom the cookie
Tom
@moT01
Feb 14 2018 14:26
tomo is one of my nicknames
Dany Din
@danydin
Feb 14 2018 14:26
really?? i would never expect that
who calls u that
Tom
@moT01
Feb 14 2018 14:26
my brother and his wife - and a group of people i used to work with
Dany Din
@danydin
Feb 14 2018 14:27
nice now u can add me also to the list please
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 14:27
@moT01 Tommo is what Ozzy man calls Tommen Baratheon from Game of Thrones
Tom
@moT01
Feb 14 2018 14:27
my brother is joe - we worked together at that place - his was jomo
Dany Din
@danydin
Feb 14 2018 14:27
hhahha in the uk?
Tom
@moT01
Feb 14 2018 14:28
no, us
Dany Din
@danydin
Feb 14 2018 14:30
interesting
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 14:35
@moT01 nice :+1:
Tom
@moT01
Feb 14 2018 14:36
thanks @SweetCodingInc
CamperBot
@camperbot
Feb 14 2018 14:36
mot01 sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
:cookie: 291 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
Tom
@moT01
Feb 14 2018 14:37
someone else was working on it and needed help - so i made it functional
Arun Shah
@ameeno
Feb 14 2018 14:39
Sorry i was trying to make some changes
Tom
@moT01
Feb 14 2018 14:39
https://s.codepen.io/moT01/pen/eGvXqq?editors=0010 this one might be a little more entertaining
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 14 2018 14:39
Was that someone me by any chance?
@moT01
Arun Shah
@ameeno
Feb 14 2018 14:40
OK I have done the range and stored into var sweet code, but now noting actually updates!
just the placeholders get deleted
Tom
@moT01
Feb 14 2018 14:42
@MuhammedKarim yes, i did some additional work on it
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 14 2018 14:42
@moT01 i really really like it
you've used things which i haven't learnt yet so i can't really do the same job myself!
Arun Shah
@ameeno
Feb 14 2018 14:44
it says firstFive is not a function
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 14:44
@ameeno share your updated code
also could you help me with this?
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 14:51
@ameeno crap.. my bad.. I converted it to Array and forgot that it won't be jQuery object anymore

simply change

firstFive.each(function() {

to

$(firstFive).each(function() {
OR
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 14:57
you can do
var $newMarkup = firstFive.map(function(programme) {
  var id = $(programme).find("Position").text();
  var title = $(programme).find("Title").text();
  var imgPath = `./images/${id}.jpg`;

  var $suggestDiv = $("<div/>", {
    class: "Suggestion col-md-2 col-md-offset-1 suggest"
  });

  var $div = $("<div/>");

  var $firstDiv = $div.clone();
  var $secondDiv = $div.clone();

  var $img = $("<img/>", {
    src: imgPath
  });

  $secondDiv.text(title);

  $firstDiv.append($img);

  $suggestDiv.append($firstDiv).append($secondDiv);
  return $suggestDiv;
});

$imgRow.append($newMarkup);
Garo
@Garabed96
Feb 14 2018 15:04
@CyberPutty Thank you :smile: why are you mapping through a function though?
CamperBot
@camperbot
Feb 14 2018 15:04
garabed96 sends brownie points to @cyberputty :sparkles: :thumbsup: :sparkles:
:cookie: 308 | @cyberputty |http://www.freecodecamp.org/cyberputty
Arun Shah
@ameeno
Feb 14 2018 15:04
well in the meantime Sweetcoding, i did the first one!
Sweet @SweetCodingInc do you know why var titleh2 = <h2>${title}</h2>; $secondDiv.text(titleh2); prints out <h2> title name verbose in my website? do you know why the <h2> is not rendered?
actually i figured it out, i must use .append not .text
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 15:30
@ameeno if you want to add html markup to the element you need to use .html instead of .text
like $secondDiv.html(titleh2);
Arun Shah
@ameeno
Feb 14 2018 15:34
Oh OK .html not .text
i used .append which worked
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 15:35
:+1:
Arun Shah
@ameeno
Feb 14 2018 15:36
@SweetCodingInc now could you please help me with the upload side of things?\
right now i have 3 buttons
1 to chose a file, 2nd to upload the file and close the script (Target _blank)
finally i have a third button to load the xml
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 15:37
@ameeno hold on.. In middle of something at the moment
Arun Shah
@ameeno
Feb 14 2018 15:37
and i have assigned alerts to the load XML button to tell user no file has been uploaded, And i have also created an unlink/delete XML file on page load inside the J/S
ok thanks man
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 15:42
@ameeno alright
I'm back
can you share your codepen link again?
we'll fix that upload part
Arun Shah
@ameeno
Feb 14 2018 15:44
OK
I am updating it to the latest items
@SweetCodingInc Sorry but codepen does not allow PHP files
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 15:47
yes.. you need to test that part locally :laughing:
the project seems broken
Arun Shah
@ameeno
Feb 14 2018 15:49
@SweetCodingInc hey could you tell me how i can use the sliders to update the visible images? using ajax? I am only allowed to have 5 displayed out of 25 so i want them to be displayed depeding ont he slider moods.
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 15:50
@ameeno you already have all your data in allData variable
just attach event to slice that will give you slider's value
Arun Shah
@ameeno
Feb 14 2018 15:50
i am trying to fix the codepen
Sweet Coding :)
@SweetCodingInc
Feb 14 2018 15:51
then in that event handler do
var dataBasedOnSlider = Array.from(allData).slice(0, sliderValue)
$(dataBasedOnSlider).each(function(){
  // same shit as before
})
@ameeno I'll be off for awhile now.. tag me in a message if you need something. I'll respond when I come back
Arun Shah
@ameeno
Feb 14 2018 16:00
thanks have a good evening
coderNewby
@coderNewby
Feb 14 2018 16:34
@DarrenfJ another question for you in PM
Darren
@DarrenfJ
Feb 14 2018 16:34
@coderNewby thanks man... will get to it in a bit
CamperBot
@camperbot
Feb 14 2018 16:34
darrenfj sends brownie points to @codernewby :sparkles: :thumbsup: :sparkles:
:cookie: 16 | @codernewby |http://www.freecodecamp.org/codernewby
coderNewby
@coderNewby
Feb 14 2018 16:35
thanks @DarrenfJ , no rush
CamperBot
@camperbot
Feb 14 2018 16:35
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2389 | @darrenfj |http://www.freecodecamp.org/darrenfj
Arun Shah
@ameeno
Feb 14 2018 16:39
Hi All, could someone help me implement an updating html page based on range sliders?
Jowze
@Jowze
Feb 14 2018 17:06
Hey everyone. I've been hitting a wall on the simon game these days, maybe someone has more skills and a bit of time to help? I think I know where the issue is but I'm having but not how to solve it. Here is a work in progress pen https://codepen.io/jowze/pen/EQwVGO Playing one turn is fine but an error always happens on the second play of the second turn. it seems that the eventlistener gets automatically triggered with the previous plays' pad. But I can't figure out why.
Stephen James
@sjames1958gm
Feb 14 2018 17:22
@Jowze When the player passes a sequence do you clear out the movesPlayed array?
Jowze
@Jowze
Feb 14 2018 17:22
yes
in player.checkMoves
if the move is correct, right before calling executeTurn(game);
Stephen James
@sjames1958gm
Feb 14 2018 17:30
@Jowze You are recalling playsTurn each time which adds extra event handlers to the pads. So you have two after the first turn which makes it look like double push
Jowze
@Jowze
Feb 14 2018 17:36
I see, I'll see if declaring the eventHandlers outside of that function helps avoiding this issue
thanks for looking into this with me @sjames1958gm
CamperBot
@camperbot
Feb 14 2018 17:36
jowze sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8976 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Feb 14 2018 17:37
@Jowze :+1:
Jowze
@Jowze
Feb 14 2018 17:44
Yup it behaves much better now. Still some timing issues as expected with this project, but it will definitely help to move on. thanks again for the help stephen! much appreciated
Stephen James
@sjames1958gm
Feb 14 2018 17:52
@Jowze Sometimes you need a second set of eyes
Arun Shah
@ameeno
Feb 14 2018 17:56
Hey Guys, How do i update a range slider value to a variable in my jaascript?\
Tom
@moT01
Feb 14 2018 17:59
rangeslider.onChange(
value = rangeslider.value
)
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 14 2018 20:43
Am i the only one who prefers codepenover offline text editors?
*codepen over
Matej Bošnjak
@mbosnjak01
Feb 14 2018 20:50
I actually don't like code pen :|
Jer Keller
@Audiosyncrasy
Feb 14 2018 20:55
I like CodePen for quick things. I like the real-time updates
Matej Bošnjak
@mbosnjak01
Feb 14 2018 21:25
Supp. Did anyone use Youtube API?
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 14 2018 21:32
@Audiosyncrasy Well atm i'm just working on quick things, im a newbie lol
Gersho
@Gersho
Feb 14 2018 21:33

I like the real-time updates

i always disable those, it's annoying to get spammed by a billion errors while you're writing

Jer Keller
@Audiosyncrasy
Feb 14 2018 21:34
@Gersho I can see that too 🙂 I'm a newb, so my programs are pretty simple right now
Gersho
@Gersho
Feb 14 2018 21:37
codepen is nice, but i t's interface gets inconvenient when it starts getting long, i sometimes use it when working on the html/css so you can see how it looks
also free hosting :P
Aaron Sawyer
@aarondevon
Feb 14 2018 22:18
Why does str.split('') === str.split('').reverse() return false if str = ‘eye’?
What am I not understanding about this?
Tiago Correia
@tiagocorreiaalmeida
Feb 14 2018 22:21
you are comparing array's
that wont work
a good way to do this one
Aaron Sawyer
@aarondevon
Feb 14 2018 22:22
You can’t compare arrays?
Tiago Correia
@tiagocorreiaalmeida
Feb 14 2018 22:22
not like this
Aaron Sawyer
@aarondevon
Feb 14 2018 22:22
okay.
Tiago Correia
@tiagocorreiaalmeida
Feb 14 2018 22:22
there's a good solution for this one
you dont split the first time
string*
and keep it as a string what you can use on the right side after the reverse method is call .join
join will place together every value from the array
Aaron Sawyer
@aarondevon
Feb 14 2018 22:23
Sure. I would just join the second bit then.
I just thought I could compare arrays like that. But I guess not.
I appreciate the clarification :-)
Tiago Correia
@tiagocorreiaalmeida
Feb 14 2018 22:24
for this one you could use the method .every to check if every value on the first array would make the value on the second and if both and the same length that was a truthy palindrome but I guess going for join is quite faster :D
you can also use json.stringify
it turns the array into a string but I guess tehre's no need for all of this, gl with the next challenges
Aaron Sawyer
@aarondevon
Feb 14 2018 22:26
Thanks! Now I just have to look into replace and regex.
is .every an ES6 method?
Tiago Correia
@tiagocorreiaalmeida
Feb 14 2018 22:27
5 if imt not mistaken
Brad
@bradtaniguchi
Feb 14 2018 22:28
^ yes
Aaron Sawyer
@aarondevon
Feb 14 2018 22:29
Okay. I wasn't familiar with that method. I will take a look at it.
Stephen James
@sjames1958gm
Feb 14 2018 22:42
@aarondevon There is a corresponding one that is .some (where it returns true if any value in the array gets a true return from the call back)
Arun Shah
@ameeno
Feb 14 2018 22:43
Hey guys, how can i use range sliders to update my home page?
like when the user moves sliders the items change accordingly
Varun Singhai
@vsinghai
Feb 14 2018 22:49
So i am having problem putting jQuery onto this page, someone explain why?
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Zuckerberg Tribute</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>
<body>
    <h1 class = "para">IS this working</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type = "text/javascript" src="js.js"></script>
</body>
$(document).ready(function(){
    $(".para").addClass("animated shake");
});
second picture is just the file 'js.js', first picture is the main html page
Arun Shah
@ameeno
Feb 14 2018 22:51
How do i filter using 4 different range sliders?\
Gulsvi
@gulsvi
Feb 14 2018 22:59
@ameeno Add event listeners for the input event for your sliders (oninput)
Not sure what you're trying to do based on looking at your project, but handling the input event is one way to make changes based on slider adjustments
Arun Shah
@ameeno
Feb 14 2018 23:06
@gulsvi Thanks thats great, How could i logically use 4 to get a combination?
CamperBot
@camperbot
Feb 14 2018 23:06
ameeno sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2604 | @gulsvi |http://www.freecodecamp.org/gulsvi
Gulsvi
@gulsvi
Feb 14 2018 23:06
@vsinghai jQuery looks correct - you seem to be missing the CSS file required for the "animated" and "shake" classes
@ameeno You would need to loop through all four of your sliders and get the current value of each - then make the changes you want based on those values. A for loop would be great for that
Gulsvi
@gulsvi
Feb 14 2018 23:17
I updated the codepen to do it with a forEach()
Arun Shah
@ameeno
Feb 14 2018 23:30
@gulsvi Hey mate i have made some changes now so i have updating functions on my JS
DMsalati
@DMsalati
Feb 14 2018 23:31
im struggling with the wikipedia viewer
Stephen James
@sjames1958gm
Feb 14 2018 23:32
@DMsalati What's the issues? What have you got working?