These are chat archives for FreeCodeCamp/HelpFrontEnd

14th
Mar 2018
Calat
@latimercaleb
Mar 14 2018 00:05
I have a CS degree too. I also work in a non-coding role. That's why I came back to FCC to continue my training
Pawan0987
@Pawan0987
Mar 14 2018 00:18
where can i get answer of freecodecamp challenge
Stephen James
@sjames1958gm
Mar 14 2018 00:22
@Pawan0987 If you are looking for an answer you should be able to google and find the answer - the FCC forum might even have a place.
If you are wanting to get help solving a challenge, then ask your questions here
piratecoder
@jvondarke
Mar 14 2018 00:22
Figure it out
Gulsvi
@gulsvi
Mar 14 2018 00:23
@jvondarke Maybe they have and want to see how others have done it?
piratecoder
@jvondarke
Mar 14 2018 00:25
@gulsvi ok so why are you tagging me in this
Gulsvi
@gulsvi
Mar 14 2018 00:26
@jvondarke We usually tag people here to let them know who we're talking to. 16,955 people here.
piratecoder
@jvondarke
Mar 14 2018 00:29
@gulsvi yea no shit
German Gamboa Gonzalez
@germangamboa95
Mar 14 2018 01:17

function dropElements(arr, func) {
  var flag = false;
  arr = arr.filter(item => {
    if(flag){
      return true;
    }
    flag = func(item);

  });
  return arr;
}

dropElements([1, 2, 3], function(n) {return n < 3; });
What do you guys think of that solution? I already compared it to the other ones. I guess my main question is if using filter() makes it easier to understand.
Nate Mallison
@NJM8
Mar 14 2018 01:31
@germangamboa95 which challenge is this?
I think you could make it much simple. You don't have to pass a function through to filter to set a flag. That's what filter is for.
function dropElements(arr) {
  return arr.filter(item => item < 3);
}

dropElements([1, 2, 3]);
unless you are trying to make a function with a custom filter feature.
German Gamboa Gonzalez
@germangamboa95
Mar 14 2018 01:39
The drop it challenge. And it is a custom filter feature in the sense that after the first time it returns 'true' it must continue to return true even if the condition is false. There are simpler ways to do it. It was just my first instinct to go with that. @NJM8
abraham anak agung
@padunk
Mar 14 2018 01:45
@germangamboa95 did you passed the challenge?
Nate Mallison
@NJM8
Mar 14 2018 01:47
Yeah I guess my suggestion doesn't help at all. :smile:
German Gamboa Gonzalez
@germangamboa95
Mar 14 2018 01:51
Yes! I mean I accidentally deleted my return statement inside the filter function while copypasting.
@NJM8 Thanks anyways lol
CamperBot
@camperbot
Mar 14 2018 01:53
germangamboa95 sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 320 | @njm8 |http://www.freecodecamp.org/njm8
mbsyaswanth
@mbsyaswanth
Mar 14 2018 02:06
https://codepen.io/mbs-yaswanth/pen/NyVezZ -why isnt the animation smooth. please tell me how to fix the animation. click on catlog to see the animation.
Nate Mallison
@NJM8
Mar 14 2018 02:21
@mbsyaswanth It's because you are using margin to change the location of the boxes.
Sliding the boxes by changing the margin requires the browser to recalculate the position of each box many times over the duration of the animation
that makes a lot of work so things slow down
Andre Morise
@AndreMorise
Mar 14 2018 02:25
Hello all, I'm trying to figure out how I can use justify-content: center with my flex children without having to set position-absolute on the parent
I left a comment in the html. Any help is appreciated. If doing this without position: absolute is not possible, is there a way to still make the "test" div appear below the photo?
mbsyaswanth
@mbsyaswanth
Mar 14 2018 02:27
@NJM8 then what do i do?
Nate Mallison
@NJM8
Mar 14 2018 02:28
@mbsyaswanth I think keyframes are great for more complex animations, I would just do transitions with a custom class: http://webdesignerwall.com/tutorials/easy-css-animation-transition-transforms
Nate Mallison
@NJM8
Mar 14 2018 02:33
@AndreMorise You just want the test div to be below the picture?
Andre Morise
@AndreMorise
Mar 14 2018 02:42
@NJM8 Yes I do. Trying to get some content below all of that but the position: absolute I had to use is conflicting with that.
mbsyaswanth
@mbsyaswanth
Mar 14 2018 02:42
@NJM8 , then please tell me what transition to add. something cool, all the boxes should move and position into actual place after few seconds.
Daniel Slatkin
@DSlatkin
Mar 14 2018 02:45
@AndreMorise You've set html and body to 100% but you haven't set #main to 100%
Calat
@latimercaleb
Mar 14 2018 02:45
Can you force FCC to recognize es6?
Daniel Slatkin
@DSlatkin
Mar 14 2018 02:46
Since header is flexing in the column direction, it's only as tall as its parent container #main... If you also set main to 100% height, you can take off position:absolute from header and set height: 100% on header as well
Ken Haduch
@khaduch
Mar 14 2018 02:47
@latimercaleb - where are you trying to use it - in the challenges? You can add a // jshint esversion:6 at the top of your editor and see if that solves it for you.
Daniel Slatkin
@DSlatkin
Mar 14 2018 02:47
Then justify-content:center works to center everything? Unless you want to only vertically center header and keep test underneath that (I've just realized)
Andre Morise
@AndreMorise
Mar 14 2018 02:49
@DSlatkin OF COURSE! Life saver. Thank you!
CamperBot
@camperbot
Mar 14 2018 02:49
andremorise sends brownie points to @dslatkin :sparkles: :thumbsup: :sparkles:
:cookie: 115 | @dslatkin |http://www.freecodecamp.org/dslatkin
Daniel Slatkin
@DSlatkin
Mar 14 2018 02:51
:) I'm a newbie to this stuff but just started using flexbox and ran into similar things with height! So hopefully my advice works.
Nate Mallison
@NJM8
Mar 14 2018 02:52
@AndreMorise Did it work? I was looking at the code for the tester, seems like they want it to be top left but my CSS skills leave something to be desired
Andre Morise
@AndreMorise
Mar 14 2018 02:53
@NJM8 @DSlatkin Yeah it worked, adding a height to #main.
added*
Calat
@latimercaleb
Mar 14 2018 02:53
Thanks @khaduch
CamperBot
@camperbot
Mar 14 2018 02:53
latimercaleb sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3794 | @khaduch |http://www.freecodecamp.org/khaduch
Nate Mallison
@NJM8
Mar 14 2018 02:53
I'm still drooling over that hamburger to X animation
Andre Morise
@AndreMorise
Mar 14 2018 02:54
haha, yeah that's just from the beta program's test suite
Nate Mallison
@NJM8
Mar 14 2018 02:54
@mbsyaswanth Add this to the class for the books: transition: all 0.5s; transform: translateX(100%);
Then make a js function so that when you click the button to show them it will add a class of visible. then define visible in your css like this
.visible {
  transform: translateX(0%);
}
it's not to fancy but I think it will do what you have now
Jacob Pieczynski
@JacobPie
Mar 14 2018 03:01
I need serious help. I am on the intermediate algorithm challenges, and I am having extreme difficulty. I am having to look at the solution about every time and I just feel lost. Is this normal? Or am I just way behind? Should I just keep trucking, even though I have to look at the solutions?
Thanks
Nate Mallison
@NJM8
Mar 14 2018 03:02
@JacobPie Is FCC your only programming experience?
Ken Haduch
@khaduch
Mar 14 2018 03:03
@JacobPie - and are the concepts that have to be applied (math, physics, etc.) making it more difficult to understand what you're trying to do?
Jacob Pieczynski
@JacobPie
Mar 14 2018 03:04
@NJM8 Yeah.
@khaduch Yeah. I'm thirteen, so a lot of this stuff goes over my head. I get frustrated easily and that kind of makes me cave into looking at the solutions. Most of the time, however, I just have no idea what I'm doing.
Nate Mallison
@NJM8
Mar 14 2018 03:05
@JacobPie Programming isn't easy, and many times you many just need more practice and a different perspective. There have been things I couldn't learn from FCC because it wasn't explained in a way that made sense to me.
Jacob Pieczynski
@JacobPie
Mar 14 2018 03:06
@NJM8 Like what? Where did you learn those things?
I understand the HTML and CSS pretty well, and I have a decent knowledge of JS. But when I go to algorithms, I just am lost
Nate Mallison
@NJM8
Mar 14 2018 03:06
@JacobPie Just take your time, if you have a hard problem break it down into the steps you know how to do. then keep doing that until the solution presents itself
Jacob Pieczynski
@JacobPie
Mar 14 2018 03:07
@NJM8 Thanks
CamperBot
@camperbot
Mar 14 2018 03:07
jacobpie sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 321 | @njm8 |http://www.freecodecamp.org/njm8
Nate Mallison
@NJM8
Mar 14 2018 03:09
I found doing challenges on codewars helps a lot, also rithmschool.com has some really good content
@JacobPie My other tip of the day is to read a problem, think about it, go do something else for awhile and let your brain work on it. Then just chip away bit by bit. You have plenty of time to learn!
Jacob Pieczynski
@JacobPie
Mar 14 2018 03:11
@NJM8 I'll check those out. Have a great day!
Nate Mallison
@NJM8
Mar 14 2018 03:11
You too
KatECN11
@KatECN11
Mar 14 2018 03:24
I have an easy one! I'm new to coding entirely and am working on my Tribute Page. I have an image, but I want to center it. I'm trying to find the answer on my own, but haven't come across anything that works yet. Could you point me in the right direction so I can research how to find the answers! Thanks!
Jacob Pieczynski
@JacobPie
Mar 14 2018 03:25
@KatECN11 Check out margins.
KatECN11
@KatECN11
Mar 14 2018 03:25
Would I need to create a border around the image to use margins?
Daniel Slatkin
@DSlatkin
Mar 14 2018 03:26
@KatECN11 Have you gone over any CSS yet in FCC?
KatECN11
@KatECN11
Mar 14 2018 03:27
Yes, I successfully centered my text, but not my image
Jacob Pieczynski
@JacobPie
Mar 14 2018 03:27
@KatECN11 How did you center the text? text-align: center; ?
KatECN11
@KatECN11
Mar 14 2018 03:28
yes, exactly
Daniel Slatkin
@DSlatkin
Mar 14 2018 03:28
If so... You may want to look at the text-align CSS property for whatever tag contains the image. For example if it's <div><img src="..."></div> then if div has a text-align property set to center on it, the image should be centered.
KatECN11
@KatECN11
Mar 14 2018 03:29
@DSlatkin YES!!!
That worked!!!
I had the text-align: center as an inline style attribute on the text and not on the div. I moved it to the div and now it's all centered!
Daniel Slatkin
@DSlatkin
Mar 14 2018 03:30
:) Alternatively if the image is not in-line with text (i.e. if it stands on its own) then img {margin-left: auto; margin-right: auto;} will center it - but the image can't be in-line with text in that case
Glad it worked!
Jacob Pieczynski
@JacobPie
Mar 14 2018 03:31
I personally always use margin: auto; for that kind of thing
KatECN11
@KatECN11
Mar 14 2018 03:34
I'm trying the margin: auto that both of you suggest (it's not an inline image) and it doesn't seem to center.
Daniel Slatkin
@DSlatkin
Mar 14 2018 03:34
Can you copy and paste the code inside ``` marks?
They're "backticks" (the key next to 1 on the keyboard)... If you use three backticks before/after code it formats it nicely
KatECN11
@KatECN11
Mar 14 2018 03:37
use the backpacks here or in my html?
haha, backticks (darn autocorrect)
Daniel Slatkin
@DSlatkin
Mar 14 2018 03:38
Here if you're pasting code
KatECN11
@KatECN11
Mar 14 2018 03:39

```<div style="background-color: silver" class="picture-border">
<img style="margin-left: auto; margin-right: auto" class="smaller-picture" src="https://github.com/KatECN11/hello-world/blob/master/Caroline%20Herschel.jpg?raw=true" alt="Caroline Herschel studying an astronomical cataloge.">

<h2 style="font-size: 20px">"The eyes of her who is glorified here below turned to the starry heavens." -inscription on her headstone.</h2>
</div>```

First I had the margin-left: auto, etc in my css for img but that didn't work so I tried it the above way
Daniel Slatkin
@DSlatkin
Mar 14 2018 03:41
Okay sorry didn't clarify or forgot something about images when telling you about margin autos
So elements that display in HTML are generally either "inline"-level elements or "block"-level elements
KatECN11
@KatECN11
Mar 14 2018 03:42
You probably assumed I have more knowledge than I do. :)
So mine are inline level and the margin: auto won't work?
Daniel Slatkin
@DSlatkin
Mar 14 2018 03:43
Images are by default an inline-level element, so text will wrap around them... Which is also why you can't set a default margin on them. You can force them to be block-level elements by adding a display: block property to the image's style
Yep - but you can force it to be block.
Examples of inline elements: <strong>...</strong>, <a href="...">...</a>, etc.
Example of block-level elements: <h1>...</h1>, <p>...</p>
Text-input fields and buttons are also inline elements
And by default images are too, unless you change them to be blocks with display: block
KatECN11
@KatECN11
Mar 14 2018 03:47
Yes! That was all very helpful! Now I know two ways to center the image! Thank you for your help!
Are block-level elements defined by elements that skip a line and start a new paragraph essentially?
Daniel Slatkin
@DSlatkin
Mar 14 2018 03:48
That's one thing that block-level elements do as a result of how they behave
KatECN11
@KatECN11
Mar 14 2018 03:48
I have so much to learn!
Daniel Slatkin
@DSlatkin
Mar 14 2018 03:48
It's better to think as block-level elements as elements that "expand" left and right to fit the entire width of their "parent" block level element
KatECN11
@KatECN11
Mar 14 2018 03:50
hmm... that helps give more perspective
Pink, blue, green are block-level elements (pink I've set the width to 600px). Blue and green expand to fit the width of the parent element since they're block-level. Purple is an inline element.
Sorry I'm sharing so much! Just spent forever not knowing the difference between block and inline elements haha, and wish someone explained sooner to me.
KatECN11
@KatECN11
Mar 14 2018 03:55
NO! I super appreciate it!!!
abraham anak agung
@padunk
Mar 14 2018 04:00
Yes FCC should explain it @DSlatkin i didn't know it too after someone told me about that. Nice explanation. Thanks.
CamperBot
@camperbot
Mar 14 2018 04:00
padunk sends brownie points to @dslatkin :sparkles: :thumbsup: :sparkles:
:cookie: 116 | @dslatkin |http://www.freecodecamp.org/dslatkin
Daniel Slatkin
@DSlatkin
Mar 14 2018 04:07
Yeah - it had me curious and I'm trying to find a good picture online of block vs inline elements, and can't find anything (except this: https://goo.gl/5TC4dG) haha.
I don't find that image helpful at all, though I like the effort (if anything adds to the confusion since a block-level element can expand to fit its parent block-level element)
abraham anak agung
@padunk
Mar 14 2018 04:08
:laughing:
geoffrymichael
@geoffrymichael
Mar 14 2018 04:11
I am doing twitch api app and ran into a styling problem. I cannot for the life of me figure out how to adjust the anchor tags to vertically center them in their divs via css, or really how to move them vertically at all. Padding is working horizontally, but when I try padding top or bottom, the anchor tag won't move. I see the padding when I use inspector in chrome, but it does not actually do anything. Any help would be greatly appreciated. This is the github pages to the actual app(very bare bones at the moment) https://geoffrymichael.github.io/twitch-api-app/. And here is the repository. In the styles.css I am trying to manipulate the anchor tags that I have given a class of .links. https://github.com/geoffrymichael/twitch-api-app/tree/master/docs
Ken Haduch
@khaduch
Mar 14 2018 04:19
@KatECN11 - one site that you'll probably want to bookmark is the css-tricks website. For example, you'll find pages like this one: https://css-tricks.com/almanac/properties/d/display/ that if you take the time to study them will show you a lot of detail about HTML and CSS.
Phuc Le
@phuchle
Mar 14 2018 04:21
@geoffrymichael you can add display: flex to your .stream class and then on img and .link add align-self: center
get rid of your padding-bottom on .link if you do that method
flexbox solves a lot of problems with vertical-alignment
but took me a while to wrap my head around it
Ken Haduch
@khaduch
Mar 14 2018 04:24
@geoffrymichael - I agree with @phuchle about going with flexbox. I think that prior to the implementation of flex, using tables was the only HTML structure that supported vertical centering. Another CSS-tricks page for everything about centering: https://css-tricks.com/centering-css-complete-guide/
geoffrymichael
@geoffrymichael
Mar 14 2018 04:30
@phuchle @khaduch. Okay, good to know this is something finicky and wasn't just me. Of course now that I've enabled flex, my text under the streamer icon got thrown from under icon, but at least I can start toying around now. I've done a little flex box before.
Ken Haduch
@khaduch
Mar 14 2018 04:37
@geoffrymichael - you can selectively use flex on the portions where you need it. If part of your page was good as it was, keep it without flex.
geoffrymichael
@geoffrymichael
Mar 14 2018 04:42
@khaduch both the anchor tag and text were in the same div with a little logo icon. I was looking to have text under the logo and then an anchor tag to the right of the logo. I think with flex box I can start tinkering hopefully, or maybe I will separate the content into different divs.
Ravi Kishore Thella
@ravikishorethella
Mar 14 2018 05:36
@germangamboa95 cool :smile: :smile:
DarkxPunk
@DarkxPunk
Mar 14 2018 05:41
Who is up at this time of night?
Ravi Kishore Thella
@ravikishorethella
Mar 14 2018 05:43
:raised_hand:
DarkxPunk
@DarkxPunk
Mar 14 2018 05:44
Hey I'm not alone for once on here, yay. @ravikishorethella How you doing tonight?
Ravi Kishore Thella
@ravikishorethella
Mar 14 2018 05:44
@DarkxPunk I am doing good. How about you?
DarkxPunk
@DarkxPunk
Mar 14 2018 05:45
Livin life.
Ravi Kishore Thella
@ravikishorethella
Mar 14 2018 05:45
:smile:
DarkxPunk
@DarkxPunk
Mar 14 2018 05:45
I jumped on here in the hope of putting forth an issue I am having and wondering if anyone has an interesting solution.
Ravi Kishore Thella
@ravikishorethella
Mar 14 2018 05:46
What is the issue?
DarkxPunk
@DarkxPunk
Mar 14 2018 05:46
However since @ravikishorethella you are the only one that is on, wanna help XD
Ravi Kishore Thella
@ravikishorethella
Mar 14 2018 05:46
@DarkxPunk I will try :smile:
DarkxPunk
@DarkxPunk
Mar 14 2018 05:49
Well I am trying to come up with a clean, pure css way to hide and show info. The specific case here is flipping between contact forms by clicking a button. Now I have successfully built the hide show function in two ways, one by using radio buttons and :checked and another by using :target, but I always end up with styling limitations, and need to specifically address the ids of each element which isn't ideal. Let me quickly throw up my example on code pen and you can have a look.
piratecoder
@jvondarke
Mar 14 2018 05:50
anyone try drunk coding? lol can't imagine why my code isn't working
DarkxPunk
@DarkxPunk
Mar 14 2018 05:50
@jvondarke Only sleep deprived coding
piratecoder
@jvondarke
Mar 14 2018 05:51
aye thats just as bad
Ravi Kishore Thella
@ravikishorethella
Mar 14 2018 05:51

that's worth trying, ig

anyone try drunk coding? lol can't imagine why my code isn't working

DarkxPunk
@DarkxPunk
Mar 14 2018 05:51
Trying to find where you forgot to add a ";" when you are running on 1h sleep is always fun
piratecoder
@jvondarke
Mar 14 2018 05:54
oh man i can only imagine @DarkxPunk
@ravikishorethella hell yea dude it really clears your mind when your trying to figure something out
Ravi Kishore Thella
@ravikishorethella
Mar 14 2018 05:56
@jvondarke are you trying that now?
piratecoder
@jvondarke
Mar 14 2018 05:57
maybe.....my code is not working....
DarkxPunk
@DarkxPunk
Mar 14 2018 05:57
What isn't working
piratecoder
@jvondarke
Mar 14 2018 05:58
my code, trying to make my portfolio lol
Ravi Kishore Thella
@ravikishorethella
Mar 14 2018 05:59
can you share your codepen link?
jhonasr
@jhonasr
Mar 14 2018 06:08
Hi, who knows how to auto select form-group option when selecting an option from another form-group
DarkxPunk
@DarkxPunk
Mar 14 2018 06:08
wipes brow Okay got the code pen for my issue: https://codepen.io/DarkxPunk/pen/rdxrXx?editors=1100
@jhonasr Not sure the question
@ravikishorethella So Ravi, as you can see both of these work correct?
Ravi Kishore Thella
@ravikishorethella
Mar 14 2018 06:10
@DarkxPunk what are you working on? I mean what is the question?
DarkxPunk
@DarkxPunk
Mar 14 2018 06:11
Well I am trying to further simplify these two pure css hide/show systems and figure out in the target example how to show Input 5 at the start without first clicking...
And there is just the first of the issues/limitations I have come across with these two systems
Ravi Kishore Thella
@ravikishorethella
Mar 14 2018 06:12
So, you don't want checked exmaples to display when you click target right?
DarkxPunk
@DarkxPunk
Mar 14 2018 06:13
No no no, these are two separate systems, I am playing with both to see which one will provide me with the most optimal solution.
jhonasr
@jhonasr
Mar 14 2018 06:13
@DarkxPunk For example, I have a select group1 with some options i'd like that when selecting one option from group1 automatically select a value in a select group2
coderNewby
@coderNewby
Mar 14 2018 06:14
thanks @DarrenfJ
CamperBot
@camperbot
Mar 14 2018 06:14
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2423 | @darrenfj |http://www.freecodecamp.org/darrenfj
DarkxPunk
@DarkxPunk
Mar 14 2018 06:15
@jhonasr Well that would need to be done with some JS, these check boxes?
@jhonasr Do you have your sample code somewhere?
Ravi Kishore Thella
@ravikishorethella
Mar 14 2018 06:19
@DarkxPunk I would go with the target. It makes sense cause, the information won't be displayed unless the user clicks something.
DarkxPunk
@DarkxPunk
Mar 14 2018 06:20
@ravikishorethella Well :target is the one I am leaning on since it seems most optimal, especially since I can link to the data from anywhere on the page, however the first issue I ran into with :target was how do I display the first info when the page loads without having to :target it...
@ravikishorethella With :checked it is easy, in the HTML I just set the first one to checked, and that status changes when people click on the different labels, but not so easy with :target.
@ravikishorethella I wanted to even try a hybrid solution, problem is you can't trigger labels and anchors at the same time XD
Ravi Kishore Thella
@ravikishorethella
Mar 14 2018 06:23
@DarkxPunk you don't have to display any information. Let it be. You can load the information when someone request for it. The first option(checked) is pretty naive
DarkxPunk
@DarkxPunk
Mar 14 2018 06:25
In this case I do need to display the info by default, the design I was given for this requires the first item to be displayed at all times. (I am coding the design a company has given to me)
Ravi Kishore Thella
@ravikishorethella
Mar 14 2018 06:26
okay. There you go. It's a requirement :smile:
DarkxPunk
@DarkxPunk
Mar 14 2018 06:27
Exacly so how do I do this while sticking with :target, that is problem one XD
Ravi Kishore Thella
@ravikishorethella
Mar 14 2018 06:29
lets try to make it work
DarkxPunk
@DarkxPunk
Mar 14 2018 06:32
Now at one point I did make it work, but I had to target each individual id, which obviously was not optimal. Bascially a if #b:targeted ~ #a { not visible } and I had to do it three additional times while saying #a { visible } by default.
But if I have to create a new rule every time I add a new data div then it is a nightmare.
Oh I forgot to also add, I had to also make the targets spans stacked above the data so that I could cascade down and style the actual data xD
It was conveluded as ever XD
But it worked
Now that I think about it, I may have another idea… Hmmm...
Ravi Kishore Thella
@ravikishorethella
Mar 14 2018 06:39
@DarkxPunk
var tags = $$('a')[0]; console.log(tags);
you can use this and display this (1st box target information ) whenever the page loads
DarkxPunk
@DarkxPunk
Mar 14 2018 06:42
Not following...
DarkxPunk
@DarkxPunk
Mar 14 2018 06:47
I updated the pen to get the first to display… now how to make it not display when not targeted XD
Oh la la
I made it work :O
I flipped the order of the data and did this:

content-container-2 > div:last-child:not(:target) {

display: block;

}

content-container-2 > div:target ~ div:last-child {

display: none;

}

DarkxPunk
@DarkxPunk
Mar 14 2018 06:52
Next issue… How the hell do I now style the buttons when one is selected XD
CSS needs a way to target previous siblings or parants or previous parents children XD
Make stuff like this 100x easier
Anyway it is getting really late for me and one break through really tired me out yawn
@ravikishorethella If you keep looking this over and finding pure css solutions I will love you long time
But for now I am going to bed and will check in, in the morning.
Ravi Kishore Thella
@ravikishorethella
Mar 14 2018 07:00

I am looking for some better solution :smile:

I made it work :O

OliverOsmoSamuel
@OliverOsmoSamuel
Mar 14 2018 08:20
Hi all, I am doing the Build a Tribute Page challenge on FreeCodeCamp. I wrote my code as instructed on CodePen and as I had a few HTML and CSS classes before, I added my own design to my project. As I wanted to preview the website on other Browsers like Firefox or Edge (I built the website on Chrome on which I had no problems) I realized that some of the CSS was ignored. Margins and Paddings had disappeared and the picture on my top left corner wasn't there anymore. This also happens if I copy the code to Brackets or Atom and preview the website there. I would be really happy if someone could help me! I have included my CodePen link at the end of this message. I am rather new to coding so please don't judge my code.
CodePen: https://codepen.io/Oliver_J/pen/PRPYoz
GitHub: https://gist.github.com/anonymous/4df27823c6d406c9d031e2994cbdd8ce
abraham anak agung
@padunk
Mar 14 2018 08:27
@OliverOsmoSamuel you can't put your code in imgur, i think they don't want to be source of content. put it somewhere else. and you have a typo on line 63 in your html, em> since i dont have firefox, can't help you much than that.
OliverOsmoSamuel
@OliverOsmoSamuel
Mar 14 2018 08:32
oh okay thank you! I am new here so i didn't know it wasn't allowed.
abraham anak agung
@padunk
Mar 14 2018 08:35
@OliverOsmoSamuel some friends recommend this site to store your photo http://postimages.org/
i saw it on edge, it has problem with <section> idk what is the problem, mayb BS4 and edge
OliverOsmoSamuel
@OliverOsmoSamuel
Mar 14 2018 08:37
okay, thank you very much!
Joshua Frias
@Juke-Magic
Mar 14 2018 08:51
guys help
can somebody tell me why my values are switching places?
Free code camp should be offline and ESL_SC2 should be online
but sometimes it switches places or switches status
what's wrong?
Frosty427
@Frosty427
Mar 14 2018 10:01
image.png
wait
wrong chat
Gilbert
@GilTorch
Mar 14 2018 10:54
Hi everyone i need some help for this challenge: https://beta.freecodecamp.org/en/challenges/sass/use-if-and-else-to-add-logic-to-your-styles
<style type='text/sass'>
@mixin border-stroke($val){
@if $val==light{border:"1px solid black"}
@else if $val==medium{border:"3px solid black"}
@else if $val==heavy
  {border:"6px solid black"}
@else
  {border:none}
}
  #box {
    width: 150px;
    height: 150px;
    background-color: red;
    @include border-stroke(medium);
  }  
</style>
<div id="box"></div>
Stephen James
@sjames1958gm
Mar 14 2018 11:11
@GilTorch The sample code doesn't have "" around the styles
Gilbert
@GilTorch
Mar 14 2018 11:13
@sjames1958gm removed them and it still doesn't work
Frosty427
@Frosty427
Mar 14 2018 11:14
@Frosty427
image.png
can someone help me with these images?
image.png
i want to make them look like that
Stephen James
@sjames1958gm
Mar 14 2018 11:16
@GilTorch I found that you needed the ; at the end of the styles as well
Gilbert
@GilTorch
Mar 14 2018 11:16
I solved it. Thank You @sjames1958gm
CamperBot
@camperbot
Mar 14 2018 11:16
giltorch sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9096 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Markus Kiili
@Masd925
Mar 14 2018 11:21
@sjames1958gm Interesting, because in CSS, semicolons only belong between several style declarations, and not at the end of every declaration.
Stephen James
@sjames1958gm
Mar 14 2018 11:22
@Masd925 I am thinking it is only the FCC verification that requires them, because the styling looks correct, only the test doesn't pass
Markus Kiili
@Masd925
Mar 14 2018 11:24
@sjames1958gm Yeah. FCC also uses semicolons after every css declaration, which is not what the css docs say.
Stephen James
@sjames1958gm
Mar 14 2018 11:26
@Masd925 Doesn't SASS also remove the need for semicolons?
Markus Kiili
@Masd925
Mar 14 2018 11:27
@sjames1958gm I don't know any SASS.
Clark Weckmann
@clarkhacks
Mar 14 2018 11:31
I need some recommendations! What's a good payment api? I want to be able to let users pay for a token for access to a chatroom. It'd be a bonus if they had a mock api for development!
Frosty427
@Frosty427
Mar 14 2018 11:33
@sjames1958gm do you think you have time to help me?
Stephen James
@sjames1958gm
Mar 14 2018 11:34
@Frosty427 What's up?
Frosty427
@Frosty427
Mar 14 2018 11:34
wait
lol
how do i point up
to a previous ppint?
@sjames1958gm if you go up just a bit my issue is there
Ghost
@ghost~5a4a80acd73408ce4f859755
Mar 14 2018 11:36
@Frosty427 alt + click on the time of the message
@MuhammedKarim alt click?
what click
on the mouse
oh
ok
Stephen James
@sjames1958gm
Mar 14 2018 11:38
@Frosty427 Look like the images are already fixed?
Frosty427
@Frosty427
Mar 14 2018 11:38
no
go to codepen
on mobile it looks bad
hold up
image.png
there
Clark Weckmann
@clarkhacks
Mar 14 2018 11:38
@Frosty427 add <meta name="viewport" content="width=device-width, initial-scale=1"> to the head?
@Frosty427 Nevermind I see it in the code now not the codepen head.
Stephen James
@sjames1958gm
Mar 14 2018 11:41
@Frosty427 How does it look bad?
Frosty427
@Frosty427
Mar 14 2018 11:41
uploading screenshot
or not
wait
image.png
image.png
there
the bottom is the one im trying to recreate
Stephen James
@sjames1958gm
Mar 14 2018 11:45
@Frosty427 so too much spacing between the pictures?
Frosty427
@Frosty427
Mar 14 2018 11:45
@sjames1958gm basically
also on mobile the pictures are squeezed
Gilbert
@GilTorch
Mar 14 2018 11:47
I don't understand why this code doesn't pass the challenge. It seems to do what they want it to do. Here is the challenge: https://beta.freecodecamp.org/en/challenges/sass/use-each-to-map-over-items-in-a-list . And the Code:
<style type='text/sass'>
@each $color in blue, black, red {
  .#{$color}-bg {background-color: $color}
}

  div {
    height: 200px;
    width: 200px;
  }
</style>

<div class="blue-bg"></div>
<div class="black-bg"></div>
<div class="red-bg"></div>
Stephen James
@sjames1958gm
Mar 14 2018 11:51
@Frosty427 maybe use col-xs-4 for xtra small screens?
Stephen James
@sjames1958gm
Mar 14 2018 12:05
@GilTorch hmm that looks perfectly fine
Gilbert
@GilTorch
Mar 14 2018 12:06
@sjames1958gm Still can't figure out why it doesn't work
Stephen James
@sjames1958gm
Mar 14 2018 12:11
@GilTorch I think it is a bug, looking in the source for the page
assert($('black-bg').css('background-color') == 'rgb(0, 0, 0)' this code is the test for the correct color, but it is not using the jquery class syntax
which should look like this assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)
Stephen James
@sjames1958gm
Mar 14 2018 12:25
@GilTorch I see you created the issue, I updated it with the info I found, hopefully this will help them to fix it.
Gilbert
@GilTorch
Mar 14 2018 12:26
Yes I saw you comment. Now I'm moving into the next challenge. I'm gonna miss the check mark
Calat
@latimercaleb
Mar 14 2018 13:35
Morning all
Ken Haduch
@khaduch
Mar 14 2018 13:52
@Juke-Magic - did you get help on your twitch project? I"m looknig at your code, and there is a problem with the way you are doing your for loop and handling the returns from your ajax requests. Since the AJAX requests are asynchronous, there is no guarantee that they will return data in the same order that you requested it. So just doing a push of the status as they return is not going to be guaranteed to result in the proper order. One thing that you can do is to use the information in the returned data that shows which user the data belongs to, and match that up with your array and insert the data in the same order. Or you can make an object and use the username as the key (again, retrieving the username from the returned data) and then using that to display the user's info on the screen. You have to do that for both types of requests that you are making, for the streams and the channels. :point_up: March 14, 2018 4:51 AM
Stephen James
@sjames1958gm
Mar 14 2018 13:56
@latimercaleb :wave: :coffee:
Ken Haduch
@khaduch
Mar 14 2018 13:57
@latimercaleb - hello again - back for more! :clap:
Calat
@latimercaleb
Mar 14 2018 14:30
Yup working on algorithms between tickets again.
How is everyone doing?
guys in this if i call the function without new keyword it shows error y ?
HansGrubername
@HansGrubername
Mar 14 2018 14:38
Hi, I’m attempting the caeser’s cipher challenge can anyone explain to me why deciphered is undefined?
function rot13(str) {
  var deciphered = "";

  for (let i=0; i<str.length; i++) {
   var character = str.charCodeAt(i);
    if (character < 65 || character > 90) {
        deciphered.concat(String.fromCharCode(character));
      }
    else if (character < 78) {
        deciphered.concat(String.fromCharCode(character + 13));
      }
    else { 
        deciphered.concat(String.fromCharCode(x - 13)); 
      }
   }

  console.log(deciphered);
}
dinesh
@1532j0004kg
Mar 14 2018 14:40
str value?
tell anyone str
h1tag
@h1tag
Mar 14 2018 14:40
@1532j0004kg which function and on which line?
Dardan Demiri
@dardandmr
Mar 14 2018 14:40
@HansGrubername
dinesh
@1532j0004kg
Mar 14 2018 14:40
i shared the link check it out
Dardan Demiri
@dardandmr
Mar 14 2018 14:40
The x is not defined
dinesh
@1532j0004kg
Mar 14 2018 14:40
@h1tag
Dardan Demiri
@dardandmr
Mar 14 2018 14:42
function rot13(str) {
  var deciphered = "";

  for (let i=0; i<str.length; i++) {
   var character = str.charCodeAt(i);
    if (character < 65 || character > 90) {
        deciphered.concat(String.fromCharCode(character));
      }
    else if (character < 78) {
        deciphered.concat(String.fromCharCode(character + 13));
      }
    else { 
        deciphered.concat(String.fromCharCode(x - 13));  //  <<< This X is not defined  
      }
   }

  console.log(deciphered);
}
@HansGrubername
Marianissimus
@Marianissimus
Mar 14 2018 14:44
@HansGrubername I wonder if you could simplify the code by using a simple deciphered += string.fromCharCode... etc instead of concat.
Ken Haduch
@khaduch
Mar 14 2018 14:45
@1532j0004kg - if you don't put the new keyword in there, then it just runs the function and the return value (which you don't have, so defaults to undefined) is stored in the variable mangoFruit. Then you are trying to use a property of undefined, which doesn't exist. If you put the new keyword in there, then it creates a new object of type Fruit, which then has the properties, so mangoFruit.showName() then exists and will run.
HansGrubername
@HansGrubername
Mar 14 2018 14:47
@Marianissimus @dardandmr those two suggestions did the trick, cheers!
Abdullah
@AbdullahChaudhry
Mar 14 2018 14:47
@HansGrubername When you use concat it will return a string but you are not adding that string to deciphered variable.
Unknown
@Unknownhezipaz
Mar 14 2018 15:04
is this page for php help
Puneeth N
@puneethnviraat
Mar 14 2018 15:06
hello friends..i have problem,,I.e . if i dislplay the data in html page from the js file,,it's closing immidiatly.. fractionof second json div is closing..i have to display the json data..please help me. 'code'

function details(i){
var details;
var obj = data.pokemon[i];
for (var key in obj){
var value = obj[key];
if(key=="next_evolution"){
details +=" <br><br>next_evolution";
for (var j = 0; j <= data.pokemon[i].next_evolution.length; j++){

var objj = data.pokemon[i].next_evolution[j-1];
for (var key in objj){
var value = objj[key];
details += "<br> " + key + ": " + value;}

}}
else if(key=="prev_evolution"){
details += "<br> <br>prev_evolution";
for (var j = 0; j <= data.pokemon[i].prev_evolution.length; j++){

var objj = data.pokemon[i].prev_evolution[j-1];
for (var key in objj){
var value = objj[key];

 details += "<br>  " + key + ": " + value;}

}}
details += "<br> " + key + ": " + value;
}
document.getElementById("details").innerHTML =details;
}

};

Kaz Baig
@kbaig
Mar 14 2018 15:10
@puneethnviraat would be easier if you could provide a pen with the code or something
Puneeth N
@puneethnviraat
Mar 14 2018 15:13
@kbaig ok..sure
h1tag
@h1tag
Mar 14 2018 15:17
@majedmahmood27 no, try the main room or the backend room
Puneeth N
@puneethnviraat
Mar 14 2018 15:17
@kbaig please
asmith1000
@asmith1000
Mar 14 2018 15:22
hi! can you tell me why my button looks weird like a default button with a background and not like the styled button shown here https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_basic
https://codepen.io/asmith1000/pen/yKOYyq Thanks!
Marianissimus
@Marianissimus
Mar 14 2018 15:23
@asmith1000 you're styling the parent of the button, not the button itself
replace .lowerbuttons with button and see the difference
asmith1000
@asmith1000
Mar 14 2018 15:26
thanks!
dinesh
@1532j0004kg
Mar 14 2018 15:27
@khaduch :+1:
@khaduch thanks
CamperBot
@camperbot
Mar 14 2018 15:27
1532j0004kg sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3795 | @khaduch |http://www.freecodecamp.org/khaduch
h1tag
@h1tag
Mar 14 2018 15:27
@puneethnviraat where are you getting the data from?
Puneeth N
@puneethnviraat
Mar 14 2018 15:32
@h1tag i had attached json file ..
h1tag
@h1tag
Mar 14 2018 15:33
@puneethnviraat and the file is on your local storage?
Puneeth N
@puneethnviraat
Mar 14 2018 15:33
the problem is the data is displaying and immidiatly got closed with in fraction of time. i mean it's like a flashing..
yes..
just i want it to be stay in div,..div should not close..help me..please
h1tag
@h1tag
Mar 14 2018 15:35
@puneethnviraat I can't test it like this, because the data is on you local storage
Puneeth N
@puneethnviraat
Mar 14 2018 15:37
k
h1tag
@h1tag
Mar 14 2018 15:41
@puneethnviraat can you paste the content of the json file in the js section on codepen?
store it in a variable
yes i added
LydaTech
@lydatech
Mar 14 2018 15:47
anyone work with styling html5 video ?
Stephen James
@sjames1958gm
Mar 14 2018 15:48
@puneethnviraat You need to disable default behavior of forms
Kaz Baig
@kbaig
Mar 14 2018 15:48
@puneethnviraat when you submit a form, the page refreshes
Stephen James
@sjames1958gm
Mar 14 2018 15:49
@puneethnviraat use preventDefault function
Puneeth N
@puneethnviraat
Mar 14 2018 15:50
oh sorry..
i refreshed it
@sjames1958gm how can o do that .
dinesh
@1532j0004kg
Mar 14 2018 15:50
I explored on o auth (google+) but i need to know , how to use multiple strategies ?
and how to interrelate all
like if i signedup with fb , I can also able to login with google+.
and also how to use both local and oauth strategies .
h1tag
@h1tag
Mar 14 2018 15:50
@puneethnviraat or try this
dinesh
@1532j0004kg
Mar 14 2018 15:50
@sjames1958gm
Stephen James
@sjames1958gm
Mar 14 2018 15:51
@1532j0004kg I have not delved into the auth topic
dinesh
@1532j0004kg
Mar 14 2018 15:52
ohh ok
Stephen James
@sjames1958gm
Mar 14 2018 15:52
@1532j0004kg I would assume for an individual user you would only use one strategy
dinesh
@1532j0004kg
Mar 14 2018 15:52
ya but some of the websites using multiple strategy
as well as local strategy
Stephen James
@sjames1958gm
Mar 14 2018 15:54

@puneethnviraat You can do something like this

    <button onclick=" namesDetails(document.getElementById('name').value);return false;">Enter name</button>

if your onclick returns false then the default behavior is blocked

h1tag
@h1tag
Mar 14 2018 15:57
@puneethnviraat sorry, disregard my answer, it doesn't work
DarkxPunk
@DarkxPunk
Mar 14 2018 16:14
Good day everyone!
h1tag
@h1tag
Mar 14 2018 16:18
@puneethnviraat nvm, the answer from stackoverflow works or what Stephen said
@DarkxPunk hello!
LydaTech
@lydatech
Mar 14 2018 16:38
so i have a div with a <video> in it. The div takes up 60vh and 100vw.i cant get the video to go full width and clip the bottom to contain in the div. Any ideas? Is that clear?
Sorin Ruse
@sorinr
Mar 14 2018 16:44
@lydatech so you need the video to be both 100vw and 60vh no matter the aspect ratio of the video?did i got it right?
Kaz Baig
@kbaig
Mar 14 2018 16:45
@lydatech any chance you could stick it in a pen? might help to visualize it
LydaTech
@lydatech
Mar 14 2018 16:49
@sorinr yes to the 100vw it can clip the bottom or top ect but has to fill the parent div
@kbaig problem is the size of the video
Sorin Ruse
@sorinr
Mar 14 2018 16:50
@lydatech can you help us with an external video link as an example?
LydaTech
@lydatech
Mar 14 2018 16:51
yep give me a minute ill set it up
Sorin Ruse
@sorinr
Mar 14 2018 16:52
ok. want to achive something similar to https://videos.pexels.com/ ?
LydaTech
@lydatech
Mar 14 2018 16:53
@sorinr YES! lol
Sorin Ruse
@sorinr
Mar 14 2018 16:54
take a look at http://www.coverr.co/
@lydatech especially the "How to use" part on the bottom of the page
LydaTech
@lydatech
Mar 14 2018 16:57
@sorinr awesome. Ill check it out. Thank you
CamperBot
@camperbot
Mar 14 2018 16:57
lydatech sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1403 | @sorinr |http://www.freecodecamp.org/sorinr
Sorin Ruse
@sorinr
Mar 14 2018 16:57
@lydatech :+1:
LydaTech
@lydatech
Mar 14 2018 17:05
@sorinr That was exactly what I needed
Sorin Ruse
@sorinr
Mar 14 2018 17:07
@lydatech glad i could help.
DarkxPunk
@DarkxPunk
Mar 14 2018 17:07
So community I was working last night on a pure css system for hide and show and have been trying to overcome some hurdles. Anyone wanna have a look and provide some feedback?
Sorin Ruse
@sorinr
Mar 14 2018 17:08
share the link
There are two systems here, one using radio and :checked the other :target
I am leaning more on the target system because it lets me link anywhere in the page quite easily.
First issue I overcame (kinda) was having the first input data to appear when the page loads and disappear when the other data is targeted
Though I had to flip the data order XD
Sorin Ruse
@sorinr
Mar 14 2018 17:11
@DarkxPunk try some transition effects
DarkxPunk
@DarkxPunk
Mar 14 2018 17:14
Well right now I am not looking for appearance more just versatility
Nate Mallison
@NJM8
Mar 14 2018 18:06
I have a question for those that have completed the wikipedia viewer. How did you deal with the random api being completely different from the search api
Corey Lewis
@cursiv3
Mar 14 2018 18:06
I hooked the route for the random one into it
it's own button if I remember correctly
Nate Mallison
@NJM8
Mar 14 2018 18:07
I've got my page pretty much done except the random part.
I could easily just make a button to open a new random page. But it would be nice to get it integrated into my style and display 8 random pages
but the api call is really different, so I assume the data back will be as well.
Corey Lewis
@cursiv3
Mar 14 2018 18:09
Yeah I just had that link open to a random page, didn't try to return a random list
you could just query a random word API and put that into your search param for the normal wiki api query
Nate Mallison
@NJM8
Mar 14 2018 18:14
I was thinking of that too, that's a good idea
Yup, going to go that route, one or two more simple functions and it's done. I don't want to kill myself on this thing.
Corey Lewis
@cursiv3
Mar 14 2018 18:18
That's the best way for everything really haha
I had so many times where I did something clever and came back to it a month or two later and was just so confused as to what I'd done
Nate Mallison
@NJM8
Mar 14 2018 18:21
Yeah, it doesn't help that I couldn't figure out the media wiki api (not great documentation imho), so I stole someone else's api call and make my app work around it. It still get's exactly what I wanted. Just not sure how to get something different working
I don't know why the media wiki's docs look like greek to me. I've done several other projects to with various api's no problem.
Corey Lewis
@cursiv3
Mar 14 2018 18:23
well if it makes you feel better I did that like a year ago but VIVIDLY remember the frustration of trying to figure out how the hell to use it
luckily pretty much every other API is pretty straightforward and well documented heh
niniyzni
@niniyzni
Mar 14 2018 18:59
  • when I click id ="edit" a modal popup opens up.
  • in that popup there is a text box.
  • when I enter some value, it should update in the select drop down menu.
  • not sure how to do it providing my code below.
http://jsfiddle.net/t0thcho8/
  $("#edit").click(function() {
     alert("I am here");

     $("#win1Edit").show().kendoWindow({
       width: "300px",
       height: "500px",
       modal: true,
       title: "Window 1"
     });
   });

   $("#win1Submit").click(function() {
     alert("win1Submit I am here");
   });
Stephen James
@sjames1958gm
Mar 14 2018 19:05
@niniyzni If there is an input element you can hang on the on change event and get the value of the input element
niniyzni
@niniyzni
Mar 14 2018 19:19
@sjames1958gm hi, can you update in my fiddle
Stephen James
@sjames1958gm
Mar 14 2018 19:30
@niniyzni Sorry I am at work, so I was only able to take a quick look
Ian Lee
@asparism
Mar 14 2018 19:33
@niniyzni - i'm not sure if you have a workflow you're trying to stick with already, but i was able to get the result you were looking for by adding id attributes to the add/edit element and the select element.
then i used the value of the input to make a new option element and added it as a child to the select element.
niniyzni
@niniyzni
Mar 14 2018 20:23
@asparism @sjames1958gm thanks
CamperBot
@camperbot
Mar 14 2018 20:23
niniyzni sends brownie points to @asparism and @sjames1958gm :sparkles: :thumbsup: :sparkles:
:cookie: 340 | @asparism |http://www.freecodecamp.org/asparism
:star2: 9097 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
niniyzni
@niniyzni
Mar 14 2018 20:23

hi,

  • I used local storage to retain the drop down values.
  • but the values are not retaining in the drop down after I refresh the page.
  • can you tell me how to fix it.
  • providing my code below.

http://jsfiddle.net/ppkykr2h/8/


   $("#win1Submit").click(function() {

     var testingMickey = $("#mickey").val();
     alert("win1Submit I am here--->" + testingMickey);
     document.getElementById('cars').options[0].text = testingMickey;

     var someVarName = testingMickey;
         localStorage.setItem("someVarName", testingMickey);

     var getItemsomeVarName1 = localStorage.getItem("someVarName");
     alert("getItemsomeVarName1 I am here--->" + getItemsomeVarName1);


     $("#win1").data("kendoWindow").close();

   });
Brad
@bradtaniguchi
Mar 14 2018 20:35
@niniyzni If your saving the current value of testingMickey before you get the item, you probably overwrite the original value no?
DarkxPunk
@DarkxPunk
Mar 14 2018 20:40
Im back on here, anyone wanna help me perfect my pure css hide/show system?
Ian Lee
@asparism
Mar 14 2018 20:41
@niniyzni - i think you may want to determine whether you will add multiple items. in that case, you might want to store an array in local storage. if that's the case, you'll have to JSON.stringify to set, and JSON.parse when you get.
like @bradtaniguchi said, it looks like you're overwriting the original options, so you'll want to add a new child and append it to the parent, unless you're trying to overwrite the options
looks like you're on the right track
Dardan Demiri
@dardandmr
Mar 14 2018 20:43
@DarkxPunk
Yes we can try
;)
niniyzni
@niniyzni
Mar 14 2018 20:49
@asparism hey can you update in my fiddle...its confusing :(
Dardan Demiri
@dardandmr
Mar 14 2018 20:50
Yes
what's the issue ?
DarkxPunk
@DarkxPunk
Mar 14 2018 20:52
@dardandmr That directed at me or @asparism ?
Dardan Demiri
@dardandmr
Mar 14 2018 20:52
to you @DarkxPunk
DarkxPunk
@DarkxPunk
Mar 14 2018 20:53
@dardandmr If you load the code pen I put explanations. But at the moment I am trying to optimize these as best I can to make them as flexible as possible.
Dardan Demiri
@dardandmr
Mar 14 2018 20:58
hmm I can not understand exactly what you mean
Ian Lee
@asparism
Mar 14 2018 20:58
@niniyzni I think it would be best if you did it yourself. That way you would understand everything because you wrote it yourself. but i will give you the outline. there are two parts: 1) - if there's not an array in localStorage, put one there, filled with the values of your select's child options. if there is an array, pull it down and JSON.parse it to javascript. every time the page loads, get that array and use it to fill the drop down menu. 2) when a new item is added, push it to the javascript array, then overwrite your local storage with the JSON.stringified javascript array.
DarkxPunk
@DarkxPunk
Mar 14 2018 21:02
@dardandmr Where are you confused?
@dardandmr To clarify there is no "problem" with this. I am trying to improve one or both systems it is all.
Dardan Demiri
@dardandmr
Mar 14 2018 21:03
ahh okey
I thought something is wrong in the code and when I looked inside it worked perfect
nice work
DarkxPunk
@DarkxPunk
Mar 14 2018 21:06
@dardandmr So any suggestions on how to improve or meet some of the goals I have?
Jonathan Tey
@jontey
Mar 14 2018 21:07
@darksx
@DarkxPunk i'm curious, ...is there a way for the second method to not have the order of divs reversed?
@DarkxPunk are there any other methods you've considered trying?
DarkxPunk
@DarkxPunk
Mar 14 2018 21:11
@jontey I havent been able to achieve it, because there is no way to work backwards in CSS only down XD
@jontey I am open to suggestions
DarkxPunk
@DarkxPunk
Mar 14 2018 21:19
No suggestions?
Dardan Demiri
@dardandmr
Mar 14 2018 21:21
@DarkxPunk you can do all this with JS
:P
my suggestion
DarkxPunk
@DarkxPunk
Mar 14 2018 21:21
Yes I know
I am trying to avoid JS as much as possible XD
Dardan Demiri
@dardandmr
Mar 14 2018 21:21
I understand and it's really helpful to know JS
CSS
Jonathan Tey
@jontey
Mar 14 2018 21:22
@DarkxPunk hmm.. i tried the target method with the divs arranged in order and it still works
Dardan Demiri
@dardandmr
Mar 14 2018 21:22
but you can not achieve everything with CSS
DarkxPunk
@DarkxPunk
Mar 14 2018 21:22
I know how to do it in JS, its not an issue of knowledge, its the challenge!
Dardan Demiri
@dardandmr
Mar 14 2018 21:22
I understand, and that's really good challange
Jonathan Tey
@jontey
Mar 14 2018 21:22
or am i doing smething wrong?
DarkxPunk
@DarkxPunk
Mar 14 2018 21:22
@jontey Shoot me a fork of the codepen
@dardandmr I felt so pround last night when I managed to get the target to display the first input data XD
@DarkxPunk maybe something to add would be a show/hide function
DarkxPunk
@DarkxPunk
Mar 14 2018 21:25
@jontey It is not working as expected, by flipping the order the first input data isnt shown but rather the last. Yes the function works, but not the correct data is shown.
Dardan Demiri
@dardandmr
Mar 14 2018 21:25

@DarkxPunk nice work really I don't know how that actually works

And to be honest, when I saw there is no JS there I thought something is wrong here !

haha

DarkxPunk
@DarkxPunk
Mar 14 2018 21:25
@jontey This is a pure css show/hide function XD we dont want JS
@dardandmr CSS3 has been a dream man, and the death of IE has made me breath so much easier.
Dardan Demiri
@dardandmr
Mar 14 2018 21:27
@DarkxPunk Good luck with your challenge
And you have done a good job
See you next time
DarkxPunk
@DarkxPunk
Mar 14 2018 21:27
@dardandmr Thanks, hope to see you around.
CamperBot
@camperbot
Mar 14 2018 21:27
darkxpunk sends brownie points to @dardandmr :sparkles: :thumbsup: :sparkles:
:cookie: 288 | @dardandmr |http://www.freecodecamp.org/dardandmr
Dardan Demiri
@dardandmr
Mar 14 2018 21:27
;)
Jonathan Tey
@jontey
Mar 14 2018 21:29
@DarkxPunk ahh.. i see what you mean
@DarkxPunk the initial screen is wrong
DarkxPunk
@DarkxPunk
Mar 14 2018 21:31
@jontey Exactly
Jonathan Tey
@jontey
Mar 14 2018 21:32
@DarkxPunk I'll play with it a little more and get back to you.
DarkxPunk
@DarkxPunk
Mar 14 2018 21:41
@jontey Greatly appreciate it. I really want to perfect this. :)
Gulsvi
@gulsvi
Mar 14 2018 21:48
@DarkxPunk Very cool, nice work. Thank you for teaching me something new.
CamperBot
@camperbot
Mar 14 2018 21:48
gulsvi sends brownie points to @darkxpunk :sparkles: :thumbsup: :sparkles:
api offline
Gulsvi
@gulsvi
Mar 14 2018 21:49
You may consider posting it for feedback on reddit - the webdev sub has "Showoff Saturdays" - you can share your project and ask for feedback on Saturdays: https://www.reddit.com/r/webdev/
DarkxPunk
@DarkxPunk
Mar 14 2018 21:49
Sounds like an idea @gulsvi
DarkxPunk
@DarkxPunk
Mar 14 2018 21:57
@gulsvi Do i just post my work in its own thread and it will get featured later, that the idea?
I dont really use reddit XD
Gulsvi
@gulsvi
Mar 14 2018 22:07
@DarkxPunk On Saturdays, you just post to that subreddit with [Showoff Saturday] in the post title. For example: https://www.reddit.com/r/webdev/comments/83ifyx/showoff_saturday_personal_site_thoughts/
DarkxPunk
@DarkxPunk
Mar 14 2018 22:07
Gotcha, thanks @gulsvi
CamperBot
@camperbot
Mar 14 2018 22:07
darkxpunk sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2672 | @gulsvi |http://www.freecodecamp.org/gulsvi
Mark Kubik
@KUBIX90
Mar 14 2018 22:28
Hi Cananyone help with my animation when i click on the quote machine box?
it seems to have a mind of its own and I'm not sure why it doesn't work properly every time I click on it. It's suppose to work when I click the box and then when I click the cross to get rid of it
DarkxPunk
@DarkxPunk
Mar 14 2018 22:30
Nothing happens for me in the snippet here, let me load it up.
Yeah nothing is happening for me even in browser...
Mark Kubik
@KUBIX90
Mar 14 2018 22:31
no modal showing up when you click on the quote button?
quote machine box i mean
DarkxPunk
@DarkxPunk
Mar 14 2018 22:31
Nothing happens at all no matter what or where I click.
Mark Kubik
@KUBIX90
Mar 14 2018 22:32
oh, err I'm not sure what the reason is, it's coming up fine on my screen
DarkxPunk
@DarkxPunk
Mar 14 2018 22:33
What browser you using, what os?
Mark Kubik
@KUBIX90
Mar 14 2018 22:33
firefox, windows
just tried it on chrome and its OK as well
DarkxPunk
@DarkxPunk
Mar 14 2018 22:35
Seems to be an issue with Safari
May be something to address, works in FF and Chrome yes.
It seems to work in FF/Chrome without issue for me, cant replicate...
Mark Kubik
@KUBIX90
Mar 14 2018 22:38
yeah I'll look into that one, not sure what the cause could be atm, not using any frameworks, just a bit of CSS grid for the portfolio bit
DarkxPunk
@DarkxPunk
Mar 14 2018 22:39
I cant this moment but if I get a chance I will rebuild it so it works in safari and forward it to you.
Stephen James
@sjames1958gm
Mar 14 2018 22:48
@KUBIX90 Is it supposed to slide up off the screen everytime?
Mark Kubik
@KUBIX90
Mar 14 2018 22:49
yeah and slide down when I click the quote machine box
Stephen James
@sjames1958gm
Mar 14 2018 22:50
@KUBIX90 I am on Mac chrome - it just appears each time, and only slides up the first time
Mark Kubik
@KUBIX90
Mar 14 2018 22:51
Yeah I'm unsure as to why its not doing it, like I said, it seems to have mind of its own and its scrambled my brain a bit
Seems fairly simple on paper but I seem to have made a mess of it, its the showModal keyframe
and the removeModal keyframe
@sjames1958gm
Stephen James
@sjames1958gm
Mar 14 2018 22:53
@KUBIX90 I dont see showModal animation on the click
Mark Kubik
@KUBIX90
Mar 14 2018 22:54
should be line 268 in the css
I've not put it in the JS for some reason, is that the issue?
Gulsvi
@gulsvi
Mar 14 2018 23:02
@KUBIX90 I think you need to clear the styles you set after dismissing the modal dialog to reset it back to default
Might be easier to add/remove a class rather than setting inline styles
To get it working on Safari, you might want to use an autoprefixer https://github.com/postcss/autoprefixer
Mark Kubik
@KUBIX90
Mar 14 2018 23:04
@gulsvi I tried using a class but couldn't get it working
Stephen James
@sjames1958gm
Mar 14 2018 23:06
@KUBIX90 Isn't that CSS Only going to happen on page load? (line 268) that is
@KUBIX90 I removed showModal from CSS and then added
document.querySelector(".modal-content").style.animation = "showModal 1s";
to the over click event and it seems to work
Mark Kubik
@KUBIX90
Mar 14 2018 23:07
@sjames1958gm Yeah i think that's the problem, I've added it to the JS and it seems to be working as intended
Stephen James
@sjames1958gm
Mar 14 2018 23:07
@KUBIX90 :+1:
Mark Kubik
@KUBIX90
Mar 14 2018 23:08
the animation that is not the above haha
document.querySelector(".container_portfolio-image--overlay").addEventListener("click", function(){
    document.querySelector(".modal-content").style.animation = "showModal 1s";
    document.querySelector(".modal").style.opacity = "1";    
    document.querySelector(".modal").style.visibility = "visible";
})
Stephen James
@sjames1958gm
Mar 14 2018 23:08
@KUBIX90 yep
Mark Kubik
@KUBIX90
Mar 14 2018 23:10
@sjames1958gm Is it especially frowned upon to do it like this? I'm very wary of using inline CSS but A) it works this way and B) it only appears when clicking and isn't in the actual html file to begin with
Stephen James
@sjames1958gm
Mar 14 2018 23:11
@KUBIX90 You could put this in a class and add class and remove class, but I think this is ok. I think that you have to judge for yourself when this gets unwieldy and you need to use a class
Mark Kubik
@KUBIX90
Mar 14 2018 23:12
I've been very preoccupied with my syntax/best practices when doing these projects so far in a bid to make them at least somewhat professional
I know the JS looks a bit naff atm, but I will change it and just wanted to get it working right now
Stephen James
@sjames1958gm
Mar 14 2018 23:14
@KUBIX90 IMO if behavior is in JS, sometimes it is easier to reason about than css
Mark Kubik
@KUBIX90
Mar 14 2018 23:14
@gulsvi @sjames1958gm Thanks for your help both of you anyhow
CamperBot
@camperbot
Mar 14 2018 23:14
kubix90 sends brownie points to @gulsvi and @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 2673 | @gulsvi |http://www.freecodecamp.org/gulsvi
:star2: 9098 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Mar 14 2018 23:14
@KUBIX90 :+1:
Gulsvi
@gulsvi
Mar 14 2018 23:14
@KUBIX90 No problem - I guess you could simplify the JS a little bit by using cssText, but it's simple and readable enough as is
Mark Kubik
@KUBIX90
Mar 14 2018 23:16
@sjames1958gm Yes, one of my issues has been obsessing too much in regards to performance, trying to do everything in CSS when the trade off really isn't worth it half the time.
Just need to find the right balance
@gulsvi thanks, that was one of the tings i was going to address
CamperBot
@camperbot
Mar 14 2018 23:17
kubix90 sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
api offline
Stephen James
@sjames1958gm
Mar 14 2018 23:17
@KUBIX90
From Donald Knuth one of the pioneers of comp sci.
The real problem is that programmers have spent far too much time worrying about efficiency in the wrong places and at the wrong times; premature optimization is the root of all evil (or at least most of it) in programming
DarkxPunk
@DarkxPunk
Mar 14 2018 23:21
If it aint broke dont fix it? XD
Mark Kubik
@KUBIX90
Mar 14 2018 23:23
@sjames1958gm Yep definitely been probably my number 1 problem since I've started coding
Its not necessarily been the coding concepts etc It's been getting bogged down in tiny details that has eaten up my coding time. Feel like I could be further along by now If i just had someone over my shoulder every now and then to just tell me to get things done and not screw around in some misguided pursuit of perfection
@DarkxPunk Pretty much, just want employers/recruiters to go through my stuff and think I know what I'm doing at least
DarkxPunk
@DarkxPunk
Mar 14 2018 23:29
@KUBIX90 I do the exact same thing XD until I get frustrated and say FUCK IT XD
pete88
@peteakhurst
Mar 14 2018 23:54
is anyone able to help with a "touch" event