These are chat archives for FreeCodeCamp/HelpFrontEnd

21st
Mar 2018
Nate Mallison
@NJM8
Mar 21 2018 02:12
@gulsvi I tried .blur(), not working
I have a hard time believing bootstrap would work this way out of the box and that I'm not doing something wrong.
AbrisM
@AbrisM
Mar 21 2018 02:35
Anyone familiar with JavaFX? I know there's some Java that will go into front-end coding
JoEezy
@JoEeeezy_twitter
Mar 21 2018 03:11
how do i change the speed/duration for this : $(#quotetext).addClass("animated fadeIn"); ?
I tried adding this to my css https://i.imgur.com/W8u9dUZ.png
oh... hmm i just rewalized the class isn't even being added to the #quotetext
man now it's not adding it again ... weird
Sorin Ruse
@sorinr
Mar 21 2018 03:16
@JoEeeezy_twitter do you have it on codepen?
@JoEeeezy_twitter anyway, add the animated fadein classes after you retrieve the new quote
DarkxPunk
@DarkxPunk
Mar 21 2018 03:18
Can someone confirm that this does not work in any browser other than safari.
#modals article:not(:target) section {
    animation-duration: 0.9s;
    animation-timing-function: ease-in-out;
    animation-delay: 0;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-name: modalOut;
}
If that is confirmed, what would be my alternative?
Sorin Ruse
@sorinr
Mar 21 2018 03:25
@DarkxPunk take a look at browser compatibility in here: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration animation should workalso on chrome, ff, opera. on some of them you should also use vendor prefixes
DarkxPunk
@DarkxPunk
Mar 21 2018 03:26
Actually the issue isnt the animation but rather the :not(:target)
:not() is supported, :target is supported, but the animation is not triggering together in any other browser than Safari XD
Sorin Ruse
@sorinr
Mar 21 2018 03:29
@DarkxPunk try some coloring to see that #modals article:not(:target) section is selecting the element you want
DarkxPunk
@DarkxPunk
Mar 21 2018 03:36
Huh… From my simple test it works...
Why is it not working for my animation XD
Sorin Ruse
@sorinr
Mar 21 2018 03:50
@DarkxPunk here an example on how :not(:target) behaves
Sorin Ruse
@sorinr
Mar 21 2018 03:56
@DarkxPunk have you defined the @keyframes modalOut {} for your animation-name: modalOut ?
DarkxPunk
@DarkxPunk
Mar 21 2018 03:59
Yes I have. As I mentioned it does work in Safari, but only Safari.
Sorin Ruse
@sorinr
Mar 21 2018 04:00
@DarkxPunk i'm on chrome. and it works also on chrome. but have you noticed in my example the :not(:target) behavior ?
@DarkxPunk try reloading my example above :point_up: March 21, 2018 5:50 AM
DarkxPunk
@DarkxPunk
Mar 21 2018 04:03
@sorinr Sorry at the moment I am on my phone so I can’t check it in another browser XD.
I did check your example, the key is having the animation happen on the :not(target). I understand how it works just confused why it doesn’t work in Firefox.
Sorin Ruse
@sorinr
Mar 21 2018 04:05
@DarkxPunk working also on ff and edge but all desktop versions. don't know how it behaves on mobile versions
DarkxPunk
@DarkxPunk
Mar 21 2018 04:07
It does work Safari mobile. Want just to see all my code? I can send the page where the issue lies.
Sorin Ruse
@sorinr
Mar 21 2018 04:08
yes. send me the link
Animation works when you click a block, but when you close it, there is no animation.
Sorin Ruse
@sorinr
Mar 21 2018 04:23
@DarkxPunk it seems your modals go off screen and remain there with an overlay over the page. do you have it also on codepen?
DarkxPunk
@DarkxPunk
Mar 21 2018 04:29
Not an updated one. When I get home in a moment I can update it.
Sorin Ruse
@sorinr
Mar 21 2018 04:31
ok
Sorin Ruse
@sorinr
Mar 21 2018 04:51
@DarkxPunk let me take a look
Sorin Ruse
@sorinr
Mar 21 2018 05:00
@DarkxPunk first thing: i would not make the modals on screen then move them out off screen by using translateY(-100vh). when the user loads the page it first see the modal then the modal goes off.you may add opacity:0; to #modals article {} and opacity:1; to #modals article:target{}
DarkxPunk
@DarkxPunk
Mar 21 2018 05:04
@sorinr First off I noticed an issue I mucked up like I always do cuz I hate windows XD I didn't account for the silly scroll bars that windows includes as part of the viewport XD
Sorin Ruse
@sorinr
Mar 21 2018 05:06
@DarkxPunk here how i see it for the modal showing part
DarkxPunk
@DarkxPunk
Mar 21 2018 05:09
Reload it now.
Wait nvm
I didn't save 1 second.
I switched over to my Windows partition so I am checking it here.
I fixed the issue with the positioning.
The animation works with Edge but not FireFox.
Sorin Ruse
@sorinr
Mar 21 2018 05:15
for me it works also on ff
DarkxPunk
@DarkxPunk
Mar 21 2018 05:16
That's odd... In Edge it animated on coming in and coming out. On FF for me it animates only on coming in.
Also to comment about your opacity suggestion, this wont work because I need the modal and its background not on top of the elements that need clicking.
DarkxPunk
@DarkxPunk
Mar 21 2018 05:23
The gitter app windows is awful XD
The Gitter 'Windows' app is awful.
Sorin Ruse
@sorinr
Mar 21 2018 05:31
opacity:0 then opacity:1 was only to hide the modal on page load and then make it visible on :target. as you translateY the modal off screen it does not block any elements on page
Sorin Ruse
@sorinr
Mar 21 2018 05:37
@DarkxPunk in here: #modals article section section {} i would make the overflow-y: auto; instead of scroll. no need to show the scroll bar if the content fits the modal
DarkxPunk
@DarkxPunk
Mar 21 2018 05:38
@sorinr Ah you mean in addition to the translate
Sorin Ruse
@sorinr
Mar 21 2018 05:38
@DarkxPunk for the opacity? yes
DarkxPunk
@DarkxPunk
Mar 21 2018 05:38
But I am still unsure why it works for you in Firefox but not I :worried:
Sorin Ruse
@sorinr
Mar 21 2018 05:45
@DarkxPunk hold on a sec. it seems that also for me when you press the X closing button on modal it just show off the modal but there is no animation. this is what was your issue?
@DarkxPunk i see the modalOut anim works on edge but not on chrome or ff. just a sec. trying to add some vendor prefixes to see how it behaves
coderNewby
@coderNewby
Mar 21 2018 06:55
@DarrenfJ started jQuery! thanks for all your help
CamperBot
@camperbot
Mar 21 2018 06:55
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2432 | @darrenfj |http://www.freecodecamp.org/darrenfj
Heathercoraje
@Heathercoraje
Mar 21 2018 07:16
Does anyone know how to config prettier so that it also applied to .jsx?
atom prettier formats on save for js but not jsx files :(
Naaman Saif
@Naaman-Saif
Mar 21 2018 07:27
@Heathercoraje Try Visual Studio Code for JSX Prettier. I personally Moved from Brackets to Visual Studio Code Due to this reason
Heathercoraje
@Heathercoraje
Mar 21 2018 07:30
I should have a look. I once had atom-prettier formatting jsx nicely then now it is completely messing react components.
@Naaman-Saif in fact heard lots of good things about visual studio code for many other reasons
Naaman Saif
@Naaman-Saif
Mar 21 2018 07:32
@Heathercoraje Although My Problem was Different Brackets or Atom didn't have any code formatting for React Native so it literally formatted things like
<
View
>
Heathercoraje
@Heathercoraje
Mar 21 2018 07:32
thats kind of what my prettier is doing right now
after prettifying the files I was like "wtf?"
Naaman Saif
@Naaman-Saif
Mar 21 2018 07:33
@Heathercoraje Hahahahaha Exactly Me Too. And Imagine the pain I had to go through When I didn't knew if it would work or not And I saved it. It didn't work and then Had to Format everything Manually Line by Line
Heathercoraje
@Heathercoraje
Mar 21 2018 07:34
whichi is what I am doing..
now..
atm..
Naaman Saif
@Naaman-Saif
Mar 21 2018 07:34
Hallelujah😂😂
Heathercoraje
@Heathercoraje
Mar 21 2018 07:36
feeling someone betrayed by a module..
Naaman Saif
@Naaman-Saif
Mar 21 2018 07:37
A class That extends React. Component
😂😂
Heathercoraje
@Heathercoraje
Mar 21 2018 07:47
@Naaman-Saif This was it!
Naaman Saif
@Naaman-Saif
Mar 21 2018 07:48
Is it working now?
Frosty427
@Frosty427
Mar 21 2018 07:49
can someone help me?/
im trying to create a homepage with a container style thing
but im not using bootstrap and im having trouble going about it
Heathercoraje
@Heathercoraje
Mar 21 2018 07:49
@Frosty427 Sure.
Ask away :)
Frosty427
@Frosty427
Mar 21 2018 07:50
i want to make something like this
screenshot uploading
Heathercoraje
@Heathercoraje
Mar 21 2018 07:50
@Naaman-Saif its great.
Frosty427
@Frosty427
Mar 21 2018 07:50
image.png
im not using bootstrap though
i have to stress that
Naaman Saif
@Naaman-Saif
Mar 21 2018 07:51
@Heathercoraje Awesome
Heathercoraje
@Heathercoraje
Mar 21 2018 07:51
what is the problem exactly?
Naaman Saif
@Naaman-Saif
Mar 21 2018 07:51
@Frosty427 have you tried doing it?
Heathercoraje
@Heathercoraje
Mar 21 2018 07:52
@Frosty427 You can manage to do that without bootstrap easily
sharing codepen would be helpful to navigate
Frosty427
@Frosty427
Mar 21 2018 07:52
image.png
thats what mine looks like
i keep trying things then i keep remembering mobile
how it would look on mobile
Dmytro Holysh
@dmk1111
Mar 21 2018 07:52
@Frosty427 So you didn't try to do anything yet?
Frosty427
@Frosty427
Mar 21 2018 07:53
@dmk1111 i have
with borders and padding and margins
but none of it worked on mobile\
Dmytro Holysh
@dmk1111
Mar 21 2018 07:53
@Frosty427 what kind of mobile your target is?
Heathercoraje
@Heathercoraje
Mar 21 2018 07:53
@Frosty427 It is good to think mobile first but if you are fairly new to css, think of desktop first.
i would recommend.
could you share what you have tried so far?
Heathercoraje
@Heathercoraje
Mar 21 2018 08:00
@Frosty427 what you are trying to achieve is to have text centered?
is this what you want, more or less?
Frosty427
@Frosty427
Mar 21 2018 08:09
@Heathercoraje ive used border padding and margin
but i have to think of mobile everytime
@Heathercoraje im trying not to use any sort of frameworks
Heathercoraje
@Heathercoraje
Mar 21 2018 08:10
maybe this changes does not save.
```
.parent { // adding a parent div outside of w3-container
  border: 2px dashed red;
  width: 50%;
  margin: 0 auto; 
}
.w3-container {
  padding: 4vw;
  text-align: center;
}
this will align item to center horizontally/vertically desktop/mobile
they are vanilla css
Frosty427
@Frosty427
Mar 21 2018 08:24
@Heathercoraje thank you
CamperBot
@camperbot
Mar 21 2018 08:24
frosty427 sends brownie points to @heathercoraje :sparkles: :thumbsup: :sparkles:
:cookie: 305 | @heathercoraje |http://www.freecodecamp.org/heathercoraje
Heathercoraje
@Heathercoraje
Mar 21 2018 08:26
@Frosty427 margin auto divide available space precisely by half and give each for left and right so it stays at center
you're welcome!
Sorin Ruse
@sorinr
Mar 21 2018 09:43
@Frosty427 here an example for :point_up: March 21, 2018 9:50 AM
LydaTech
@lydatech
Mar 21 2018 11:23
@Frosty427 you here?
Nazar
@IsaakNazar
Mar 21 2018 14:47
hey everybody!
Kingsley
@Kingwindie
Mar 21 2018 15:40
@gulsvi thanks
CamperBot
@camperbot
Mar 21 2018 15:40
kingwindie sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2679 | @gulsvi |http://www.freecodecamp.org/gulsvi
DarkxPunk
@DarkxPunk
Mar 21 2018 16:28
Hello everyone! Can anyone help with this issue where I have an animation that activates on open and close, but only works in Safari and Edge. All other browsers only the animation on open happens.
Nate Mallison
@NJM8
Mar 21 2018 16:29
@DarkxPunk Do you have some code to show?
My first instinct is to run your css through https://autoprefixer.github.io/
You click one of the boxes below and the modal pops down.
Nate Mallison
@NJM8
Mar 21 2018 16:36
@DarkxPunk What does article:target do?
nvm
Claudio Restifo
@Marmiz
Mar 21 2018 16:42
@DarkxPunk just a random thought, but I fear that the :not(:target) produce a list of target (ie: all the targets that are not), and apparently only Safari support a list of :not.
DarkxPunk
@DarkxPunk
Mar 21 2018 16:48
@Marmiz So basically :not(:target) will only work on IDs?
Neil
@NNeil1
Mar 21 2018 17:06
How can I find the source of icons by inspecting element? When the element isn't directly using Font awesome, or Glyphicons?
Example:
.account-link span:before { font-family: 'icons'; content: "\e253"; font-size: 24px;
Keegan
@Keggatron
Mar 21 2018 17:16
Does anyone know how someone would add a price value to a redux-form. For instance I'm creating a fake pizza ordering site and I want to attach a base price of 12 to every small pizza ordered, then add an extra like 1.50 for every topping selected and add that to my form values.
Clark Weckmann
@clarkhacks
Mar 21 2018 17:17
@NNeil1 (Not sure if this is what you mean) You can check the css fill for icons and find the font it references for the content \e253
css file*
Neil
@NNeil1
Mar 21 2018 17:20
Yeah been trying to locate where the font's are being called from, just can't find 'em
Clark Weckmann
@clarkhacks
Mar 21 2018 17:34
@NNeil1 can you maybe make a codepen for this issue?
Neil
@NNeil1
Mar 21 2018 17:34
Can share the whole site via PM. I'll send you it now
@clarkhacks
Clark Weckmann
@clarkhacks
Mar 21 2018 17:35
@NNeil1 Perfect!
catshark
@catshark
Mar 21 2018 17:46
Hi Folks, Having trouble playing the sample audio files in https://www.freecodecamp.org/challenges/build-a-simon-game challenge on chrome?
They work perfectly on firefox though. I have an <audio> tag embedded in each of the four buttons and each time I click a button, the sound should play but it only partially plays. Also unable to play a sequence of sounds in chrome; again, there's no problem on firefox
Nate Mallison
@NJM8
Mar 21 2018 17:48
@catshark what does your play sound function look like?
catshark
@catshark
Mar 21 2018 17:56

`
function btnSound(e) {
var target = (e.target) ? e.target : e.srcElement;

var audio = target.querySelector("audio");

audio.load();
audio.play();

}
`

Nate Mallison
@NJM8
Mar 21 2018 17:56
And clicking it once doesn't play the whole thing?
catshark
@catshark
Mar 21 2018 17:57
the above code is the event handler for each of the buttons
@NJM8 exactly, the sound only partially plays on chrome
Nate Mallison
@NJM8
Mar 21 2018 17:58
Hm, I don't know much about playing an audio source from an external source, maybe it isn't done downloading when you call .play
catshark
@catshark
Mar 21 2018 18:00
@NJM8 I had the mp3 files downloaded to my local machine and they're referenced in the html file locally so I don't think that's the problem
Nate Mallison
@NJM8
Mar 21 2018 18:01
nope, probably not
If you have them locally I don't think you need to load them
khondy
@khondy
Mar 21 2018 18:11
what was wrong of my code?
<style>
h2 {
color: blue;
}
</style>
Brad
@bradtaniguchi
Mar 21 2018 18:14
@khondy looks like nothing AFIK
catshark
@catshark
Mar 21 2018 18:15
@NJM8 yeah, I needed to add the .load() call before .play() otherwise the sounds wouldn't play at all in chrome when clicking on any of the four colored buttons. .load() still doesn't resolve my partially played sound problem
khondy
@khondy
Mar 21 2018 18:19
is not moving
@bradtaniguchi
Brad
@bradtaniguchi
Mar 21 2018 18:20
@khondy Something is suppose to move?
khondy
@khondy
Mar 21 2018 18:20
how?
Brad
@bradtaniguchi
Mar 21 2018 18:22
@khondy I don't know what you want. So I can't help until you specify it
khondy
@khondy
Mar 21 2018 18:23
Your h2 element should be blue.
Neil
@NNeil1
Mar 21 2018 18:23

Currently using this to change a P element:

var paras = document.getElementsByTagName("p"); //debugger; for (var i = 0; i < paras.length; i++) { var text = paras[i].innerHTML; if ( text.search("From:") !== -1) { text = text.replace("From:", ""); paras[i].innerHTML = text; } }

Can someone explain how in JS I could make this target the P inside .price class?

Brad
@bradtaniguchi
Mar 21 2018 18:23
@khondy Yea, whats your entire html look like? as the style tag you gave should work.
khondy
@khondy
Mar 21 2018 18:24
<style>
h2 {
color: blue;
}
</style>
i'm in css
Neil
@NNeil1
Mar 21 2018 18:25
@khondy can i see full code so i can check it ?
Claudio Restifo
@Marmiz
Mar 21 2018 18:26
@NNeil1 so do you want to target a p that's inside a specific class?
if so you can chain selectors
Neil
@NNeil1
Mar 21 2018 18:26
Yeah, I want to target P inside .price
Very new to JS, sorry little confusing
Claudio Restifo
@Marmiz
Mar 21 2018 18:27
document.getElementsByClassName('price').getElementsByTagName("p");
will select any p inside anything that has a price class
or just use an ID and select only that :)
way easier to maintain
Neil
@NNeil1
Mar 21 2018 18:28
I expected that to work, maybe not. Hmm.
Problem is I'm using WordPress, so can't edit the HTML directly. So, I am trying to find a work around to remove "From:" and nothing else
Can't be done via CSS, so was trying with JS
Claudio Restifo
@Marmiz
Mar 21 2018 18:30
but in the example you provided you have a p with inside a bunch of span.
Neil
@NNeil1
Mar 21 2018 18:30
From: isn't in a span though
So, I assumed targetting .price > p would work
Claudio Restifo
@Marmiz
Mar 21 2018 18:31
no because there's no p inside .price
the p IS .price
Neil
@NNeil1
Mar 21 2018 18:31
Lmao
how did I not notice :D
So, how would you suggest I target "From:" and nothing else?
khondy
@khondy
Mar 21 2018 18:34
@bradtaniguchi I did not see the space of h2
Brad
@bradtaniguchi
Mar 21 2018 18:38
@khondy What does your entire html look like
knight2
@knight2
Mar 21 2018 18:38

Does anyone know how to add path's to SVG file's text/images? The kind that automatically outlines whatever text/images you have, which allows for you to manipulate the file with css (i.e. be able to fill in the color on transition/etc).

Or do you simply need to create an SVG file/logo with photoshop/gimp, save as SVG, and that will automatically have the node path's added ?

Claudio Restifo
@Marmiz
Mar 21 2018 18:41
@NNeil1 select and replace:
var p = document.getElementsByClassName('price')[0]; // change acconrdingly to your structure
p.innerHTML = p.innerHTML.replace('From', '');
Keegan
@Keggatron
Mar 21 2018 18:42
@khondy try this:
<style>
  h2 {
    color: blue !important;
  }
</style>
knight2 @knight2 14:42
https://i.imgur.com/5CYnw1h.png
example to better understand what i'm talking about, I can create a file, but it won't always have those node points added... not sure how to add those
Neil
@NNeil1
Mar 21 2018 18:46
@Marmiz Fantastic. Thank you!
CamperBot
@camperbot
Mar 21 2018 18:46
nneil1 sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1188 | @marmiz |http://www.freecodecamp.org/marmiz
Claudio Restifo
@Marmiz
Mar 21 2018 18:49
@NNeil1 :+1: happy coding :sparkles:
Neil
@NNeil1
Mar 21 2018 18:57
@Marmiz Code works fine with Codepen. However, when putting it on my site, It doesn't seem to be working. Gone to debugger, and P is undefined
Actually, seems to be going into stuff I don't know, and come to think about it not really what I want. I have a understanding of PHP, and I have used a function to replace - with From: on the variation price. So, I am just going to base the function off the page ID
Corey Lewis
@cursiv3
Mar 21 2018 19:43
if your p element is undefined that could be caused by the code running before the page has loaded the DOM
Travis Tan
@TravisTtk
Mar 21 2018 19:54
Hey guys could someone pls take a look at my code?
I can't seem to figure out how to make the grey bgcolor on the left side of the page fill all of the page vertically .
https://codepen.io/TravisTtk/pen/bvWwBp
Corey Lewis
@cursiv3
Mar 21 2018 20:02
the grey area meaning the div with the img in it?
Travis Tan
@TravisTtk
Mar 21 2018 20:10
@cursiv3 yup
@cursiv3 dang i just realised it a smaller window the sizes are all wrong. Any advice on how to fix that as well?
sorry im really a newb here
disjfa
@disjfa
Mar 21 2018 20:15
Smaller image size is just learning responsive design
But if you remove the min height and add a top: 0; and a bottom: 0; you get a long way
Corey Lewis
@cursiv3
Mar 21 2018 20:23
in full page view of your pen on chrome the grey goes 100%
Travis Tan
@TravisTtk
Mar 21 2018 20:24
@cursiv3 yeah it does fill vertically within a window however when i have to scroll down it doenst cover anymore
so the experience area is a separate section you'll scroll into?
Travis Tan
@TravisTtk
Mar 21 2018 20:26
yup exactly
Corey Lewis
@cursiv3
Mar 21 2018 20:29
so think of your page as a box like this
html wraps everything, body wraps inside html
so you want "containers" for each section, usually divs
and those divs will naturally stack on top of each other
so you'd want you "landing container" which would be your intro screen or whatever to be above the next section in the document so it'll sit above the experience section
Travis Tan
@TravisTtk
Mar 21 2018 20:31
ahhh i see
Corey Lewis
@cursiv3
Mar 21 2018 20:31

<div class="my-landing-container">
content inside this section
</div> end of section

<div class="my-next-section">

content here
</div> end of section
Travis Tan
@TravisTtk
Mar 21 2018 20:32
ok
Corey Lewis
@cursiv3
Mar 21 2018 20:32
much easier to compartmentalize like that
all html /css stuff is is a bunch of boxes
and you sort of have to fool those boxes into doing what you want lol
Travis Tan
@TravisTtk
Mar 21 2018 20:33
understood i'll try to fix the containers
how about the grey bg?
do i have to create in each container?
Corey Lewis
@cursiv3
Mar 21 2018 20:33
well if you set it to min-height: 100% in the class and use it on all of them, then you'll have 100% height on all those containers
most sections you'll want to leave height as auto since your content will then auto resize the div
but if you need a set size then yeah set the height
but remember that all elements have the box model so
you can resize elements inside the div, etc
disjfa
@disjfa
Mar 21 2018 20:36
the easiest way is to create a container with a gray background, and add a container in it with a margin-left and a white background
Travis Tan
@TravisTtk
Mar 21 2018 20:38
alright got it. imma work on it. Thanks so much guys!
@cursiv3 @disjfa btw is it possible to put the bg in the body instead?
so that it would fill all divs?
Corey Lewis
@cursiv3
Mar 21 2018 20:44
yeah the body can have background
disjfa
@disjfa
Mar 21 2018 20:44
sure
Travis Tan
@TravisTtk
Mar 21 2018 20:46
@disjfa how can i put the img in the grey area? i tried putting something within the wrapper div and the grey bg fills horizontally within the content i added
disjfa
@disjfa
Mar 21 2018 20:46
I just updated my pen , and added some responsive css for just that ^_^
Travis Tan
@TravisTtk
Mar 21 2018 20:51
@disjfa cool! thanks for sharing.
CamperBot
@camperbot
Mar 21 2018 20:51
travisttk sends brownie points to @disjfa :sparkles: :thumbsup: :sparkles:
:cookie: 383 | @disjfa |http://www.freecodecamp.org/disjfa
Hatem Araar
@WatashiHatem_twitter
Mar 21 2018 21:05
Hello how do I make this with javascript
  1. If you click on the list item, it toggles the .done class on and off.
just the on and off thing
Matej Bošnjak
@mbosnjak01
Mar 21 2018 21:07
with jquery you can use .toggle method on an element, if youre using plain JS you'll need to use addEventListener method on an element which you fetch by id, class or a tag
disjfa
@disjfa
Mar 21 2018 21:07
element.addEventListener('click', function() { console.log(this.checked) }, false);
@WatashiHatem_twitter
@mbosnjak01 yes
Hatem Araar
@WatashiHatem_twitter
Mar 21 2018 21:09
and there is this code in css for .done , I want to transform every li in HTML so that when i click on every li it toggles that class (.done) on and off
Hatem Araar
@WatashiHatem_twitter
Mar 21 2018 21:11
i need to do it with JS
Matej Bošnjak
@mbosnjak01
Mar 21 2018 21:11
we told you what to look for
Hatem Araar
@WatashiHatem_twitter
Mar 21 2018 21:20
|li.addEventListener('click', function() {
|
li.addEventListener('click', function() {
li.classList.toggle("done"); }, false);
'''
CamperBot
@camperbot
Mar 21 2018 21:24
:bulb: to format code use backticks! ``` more info
Hatem Araar
@WatashiHatem_twitter
Mar 21 2018 21:27
li.addEventListener('click', function() {
    li.classList.toggle("done"); }, false);
Hatem Araar
@WatashiHatem_twitter
Mar 21 2018 21:35
Hello
disjfa
@disjfa
Mar 21 2018 21:36
hi
But an example, because i'm in a good mood :D
DarkxPunk
@DarkxPunk
Mar 21 2018 21:49
Screen Shot 2018-03-21 at 17.48.55.png
How would someone achieve this?
disjfa
@disjfa
Mar 21 2018 21:50
grid or flex layout
Gulsvi
@gulsvi
Mar 21 2018 21:52
@NJM8 Sorry, you responded after I left yesterday. Happy to take a closer look - seems you must be doing something wrong/different if it's staying in focus despite using .blur()
Can you send the code - github or codepen - if it's still an issue?
Hatem Araar
@WatashiHatem_twitter
Mar 21 2018 21:54
@disjfa is there something like .clicked
DarkxPunk
@DarkxPunk
Mar 21 2018 21:55
@disjfa I wanted to use flex but couldent get the gap
THoughts?
disjfa
@disjfa
Mar 21 2018 21:56
which gap
the border?
@WatashiHatem_twitter why? There is :checked
Hatem Araar
@WatashiHatem_twitter
Mar 21 2018 22:00
is :checked only for checkboxesor for clicks too
DarkxPunk
@DarkxPunk
Mar 21 2018 22:03
@disjfa Yes the border.
@disjfa I am doing it up in grid at the moment and got the gap, but the next issue now is how do I make that top area transparent XD
Gulsvi
@gulsvi
Mar 21 2018 22:04
@DarkxPunk Depends on how you want it to respond to different screen sizes, but the simplest way to achieve the effect in the screenshot is two divs. The one on the left has three images in it, the right div has the text and the image in it. Control the height/width with percentage. Use a wrapper to house it all with a blue-gray background. Use border to control the white around the images.
DarkxPunk
@DarkxPunk
Mar 21 2018 22:04
I dont think I have had such a big headache achieving this XD
@gulsvi The problem with the borders is they dont overlap with each other, so if I wanted to go that route id need to manually do the border of each image, not exactly optimal.
disjfa
@disjfa
Mar 21 2018 22:05
lol, lets html
Hatem Araar
@WatashiHatem_twitter
Mar 21 2018 22:07
blob
function clickeed (){
    li3.classList.add("done");
}


button.addEventListener("click", addListAfterClick);

input.addEventListener("keypress", addListAfterKeypress);

li3.addEventListener("click", clickeed);
Gulsvi
@gulsvi
Mar 21 2018 22:08
@DarkxPunk How optimal do you need this to be? Are you building a template, for example where images and text can go anywhere?
DarkxPunk
@DarkxPunk
Mar 21 2018 22:08
Idealy
Gulsvi
@gulsvi
Mar 21 2018 22:08
You may want to review the masonry code and see how they do it - or look at bootstrap card groups for a masonry-like design
Hatem Araar
@WatashiHatem_twitter
Mar 21 2018 22:08
I'm getting an error for the li3
Hatem Araar
@WatashiHatem_twitter
Mar 21 2018 22:09
@gulsvi can you help me ?
Gulsvi
@gulsvi
Mar 21 2018 22:09
@WatashiHatem_twitter Sure, what's your question?
Hatem Araar
@WatashiHatem_twitter
Mar 21 2018 22:09
blob
I'm getting this error for the last line
Gulsvi
@gulsvi
Mar 21 2018 22:10
@WatashiHatem_twitter what do you get if you do console.log(li3)?
Hatem Araar
@WatashiHatem_twitter
Mar 21 2018 22:11
var li3 =document.querySelectorAll("li");
function clickeed (){
    li3.classList.add("done");
li3.addEventListener("click", clickeed);

}
DarkxPunk
@DarkxPunk
Mar 21 2018 22:12
Screen Shot 2018-03-21 at 18.08.35.png
Hatem Araar
@WatashiHatem_twitter
Mar 21 2018 22:13
@gulsvi the same error
Gulsvi
@gulsvi
Mar 21 2018 22:13
@WatashiHatem_twitter The querySelectorAll will return a collection of elements - you'll need to loop through those elements and add your event listener to each - one at a time
for example:
[...li3].forEach(function(li) {
  li.addEventListener("click", clickeed);
});
DarkxPunk
@DarkxPunk
Mar 21 2018 22:14
Got this far XD
Gulsvi
@gulsvi
Mar 21 2018 22:15
Or, if you prefer a for loop @WatashiHatem_twitter
for(var i = 0; i < li3.length; i++) {
  li3[i].addEventListener("click", clickeed);
}
Looking better @DarkxPunk :)
disjfa
@disjfa
Mar 21 2018 22:16
@DarkxPunk the left down image has to be in a container with the text, i don't know how :D
DarkxPunk
@DarkxPunk
Mar 21 2018 22:16
Yeah but if I put a border it covers the area I dont want it
Gulsvi
@gulsvi
Mar 21 2018 22:16
Maybe you could use a background color for non text areas with padding around the images?
instead of a border
Hatem Araar
@WatashiHatem_twitter
Mar 21 2018 22:17
@gulsvi
blob
Gulsvi
@gulsvi
Mar 21 2018 22:17
Seems you're missing a bracket or a parenthesis?
DarkxPunk
@DarkxPunk
Mar 21 2018 22:18
@gulsvi Hmm...
@gulsvi Same issue with the gap stacking...
I am going to do something crazy
Matej Bošnjak
@mbosnjak01
Mar 21 2018 22:20
do infinite for loop of creating all possible RGB color combinations?
Hatem Araar
@WatashiHatem_twitter
Mar 21 2018 22:21
var li3 =document.querySelectorAll("li");
function clickeed (){

    for(var i = 0; i < li3.length; i++) {
  li3[i].addEventListener("click", clickeed);
}
}
li3.addEventListener("click", clickeed);
still getting the error
I'm dying
@gulsvi
blob
Gulsvi
@gulsvi
Mar 21 2018 22:22
@WatashiHatem_twitter Remove the last line
you're already adding event listeners to each individual li element in the for loop. The last line: li3.addEventListener("click", clickeed); is trying to add an event listener to a collection of all li elements on your page, but event listeners can't be added to collections, only individual elements
var li3 = document.querySelectorAll("li");

function clickeed() {
  // do something here when an li element is clicked
  alert(this.textContent);
}

for (var i = 0; i < li3.length; i++) {
  li3[i].addEventListener("click", clickeed);
}

//li3.addEventListener("click", clickeed);
DarkxPunk
@DarkxPunk
Mar 21 2018 22:27
Why cant I get a damn div to overlap the container border with position absolute, no matter how much I play with the z index GAH
Gulsvi
@gulsvi
Mar 21 2018 22:28
CSS is fun lol :p
Brad
@bradtaniguchi
Mar 21 2018 22:28
What is wrong with you!
Gulsvi
@gulsvi
Mar 21 2018 22:28
.fear {
  display: none;
}
Matej Bošnjak
@mbosnjak01
Mar 21 2018 22:30
pants {visibility:hidden} shirt {color:transparent;}
Gulsvi
@gulsvi
Mar 21 2018 22:31
lol
@DarkxPunk it is quite a mess i mind you
Matej Bošnjak
@mbosnjak01
Mar 21 2018 22:34
is this "find an intruder game" ? cause this slice of tomato doesn't belong there
:P
disjfa
@disjfa
Mar 21 2018 22:35
For a game you can play my puzzle ^_^ http://mozaic.dimme.nl/mozaic/vs-fjU4sQos
Matej Bošnjak
@mbosnjak01
Mar 21 2018 22:36
too easy :(
disjfa
@disjfa
Mar 21 2018 22:36
sure
DarkxPunk
@DarkxPunk
Mar 21 2018 22:37
@disjfa Very close but still the damn gaps are not consistant XD
I have never been so frustrated.
disjfa
@disjfa
Mar 21 2018 22:37
lol
DarkxPunk
@DarkxPunk
Mar 21 2018 22:37
It looks so simple but its a lie!
:cake: is a lie!
disjfa
@disjfa
Mar 21 2018 22:39
@DarkxPunk fixed ^_^
DarkxPunk
@DarkxPunk
Mar 21 2018 22:40
@disjfa I am so furstrated at this point it will have to do XD
Even though it still is not exact XD
disjfa
@disjfa
Mar 21 2018 22:41
i see i do have a double border on the items
Gulsvi
@gulsvi
Mar 21 2018 22:41
@WatashiHatem_twitter Did you get it fixed?
disjfa
@disjfa
Mar 21 2018 22:42
@DarkxPunk done!
Hatem Araar
@WatashiHatem_twitter
Mar 21 2018 22:42
@gulsvi it wether excutes the code on the first li or all the li . However , i want to execute it on the clicked li
DarkxPunk
@DarkxPunk
Mar 21 2018 22:42
I wish we could achieve it without having to go into the nitty gritty but I think this will do in the mean time
Gulsvi
@gulsvi
Mar 21 2018 22:43
@WatashiHatem_twitter Is this kind of what you're trying to do? https://s.codepen.io/anon/pen/VXbpMO
disjfa
@disjfa
Mar 21 2018 22:43
do rename the classes to something nameworthy :D
DarkxPunk
@DarkxPunk
Mar 21 2018 22:43
@disjfa Thanks with lots of consentual kisses.
CamperBot
@camperbot
Mar 21 2018 22:43
darkxpunk sends brownie points to @disjfa :sparkles: :thumbsup: :sparkles:
:cookie: 384 | @disjfa |http://www.freecodecamp.org/disjfa
disjfa
@disjfa
Mar 21 2018 22:44
@DarkxPunk thanks for the challenge!
CamperBot
@camperbot
Mar 21 2018 22:44
disjfa sends brownie points to @darkxpunk :sparkles: :thumbsup: :sparkles:
:cookie: 114 | @darkxpunk |http://www.freecodecamp.org/darkxpunk
Hatem Araar
@WatashiHatem_twitter
Mar 21 2018 22:46
@gulsvi just there is a class in the css (.done) i want to apply it to the li i click on
Gulsvi
@gulsvi
Mar 21 2018 22:49
@WatashiHatem_twitter Show me the code you have now?
You might be using li3 to add the class - but will need to use "this" or an event target, like:
var li3 = document.querySelectorAll("li");

function clickeed() {
  // add the "done" class when clicked
  this.classList.add("done")
}

for (var i = 0; i < li3.length; i++) {
  li3[i].addEventListener("click", clickeed);
}
Hatem Araar
@WatashiHatem_twitter
Mar 21 2018 22:51
oh it is perfect @gulsvi thank you a loot
CamperBot
@camperbot
Mar 21 2018 22:51
watashihatem_twitter sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2680 | @gulsvi |http://www.freecodecamp.org/gulsvi
Hatem Araar
@WatashiHatem_twitter
Mar 21 2018 22:51
but what is this this
?
Gulsvi
@gulsvi
Mar 21 2018 22:52
@WatashiHatem_twitter this refers to the item that was clicked, you could also do:
function clickeed(e) {
  // add the "done" class when clicked
  e.target.classList.add("done")
}
Hatem Araar
@WatashiHatem_twitter
Mar 21 2018 22:53
you mean (this) is something like by default
without needing to declare it
Gulsvi
@gulsvi
Mar 21 2018 22:53
It's more complicated than that, but yes sort of
The this keyword is important to learn in JavaScript - it can save a lot of code
DarkxPunk
@DarkxPunk
Mar 21 2018 23:00
Screen Shot 2018-03-21 at 18.59.45.png
@disjfa It seems to work XD
I just cant stand how specific I have to be. They need to add something to the grid spec so you can like void borders or something XD
Tom
@moT01
Mar 21 2018 23:11
@DarkxPunk whats the problem?
Gulsvi
@gulsvi
Mar 21 2018 23:12
He's looking for something like border-collapse for non-table layouts
Tom
@moT01
Mar 21 2018 23:13
not sure exactly the situation - but you can make the border part of the size of things with box-sizing - might be something
hmm, yea - i think i need to know more - but i makes it so the border is included in total size of the element
100px element with 5px border = 110px wide with no box sizing = 100px wide with box-sizing: border-box;
looking at the pic again - not sure thats what you're looking for, why not just remove the borders
Gulsvi
@gulsvi
Mar 21 2018 23:19
@moT01 He was trying to recreate : :point_up: this