These are chat archives for FreeCodeCamp/HelpFrontEnd

25th
Oct 2017
Kingsley
@Kingwindie
Oct 25 2017 00:11
someone help me out with this,the two input tags wont stay inside the innerBox div like i want it to,it creates a giant space under the two div and places itself there```
```
<div class="bigBox">
  <div class="innerBox">
       <h3>Login Here</h3>
         <input type="text" name="Username" placeholder="Username">
         <input type="text" name="Password" placeholder="Password">
</div>
</div>

css ```
.bigBox{
background-color: #674172;
opacity: 1;
height: 100%;
width:100%;
position: absolute;
}

/ NOTE: login box design /
.innerBox{
background-color: #663399;
height: 80%;
width: 100%;
position: relative;
top: 5vh;
margin:auto;
}

/ NOTE: typography:; /
h3{
text-align: center;
color: white;
font-family: corbel;
font-variant:small-caps;
font-style:normal;
font-weight: bolder;
}```

.bigBox{
  background-color: #674172;
  opacity: 1;
  height: 100%;
  width:100%;
  position: absolute;
}

/* NOTE: login box design */
.innerBox{
  background-color: #663399;
  height: 80%;
  width: 100%;
  position: relative;
  top: 5vh;
  margin:auto;
}

/* NOTE: typography:; */
h3{
  text-align: center;
  color: white;
  font-family: corbel;
  font-variant:small-caps;
  font-style:normal;
  font-weight: bolder;
}
Spyrantis Theodoros
@thodorisanta
Oct 25 2017 00:15
@longnt80 okay. but that moves it manually. i have to find myself the center
Kingsley
@Kingwindie
Oct 25 2017 00:17
nevermind
Spyrantis Theodoros
@thodorisanta
Oct 25 2017 00:18
@longnt80 what does the transform: translate(-50%, -50%); do?
Long Nguyen
@longnt80
Oct 25 2017 00:21
@thodorisanta transform is to transform the element
in this case, translate means move the element -50%
and 50% of the element's width and height
Asia Antczak
@asiaantczak
Oct 25 2017 00:42
Hi Coders, I need help with little project, not FCC one. I am just practising DOM manipulation. The aim of my challenge is when the button is pressed the number is displayed, when number = 5 the counter is increased by one, and then for 10 by 2, etc. Could someone please have a look at my code as I have lost couple of hours and have not found where the error is https://codepen.io/asiaantczak/pen/MEMXjK; thank you
Mark Pearyer
@marcusp619
Oct 25 2017 00:52
anyone online coud help out how to make this random quote api work with jquery?
Tom
@moT01
Oct 25 2017 00:56
@marcusp619 whats the problem?
i used https://quotesondesign.com/api-v4-0/ some good examples in their docs
Mark Pearyer
@marcusp619
Oct 25 2017 00:57
im trying to use this api in my random quote generator its not working but im going go back through the docs again
Tom
@moT01
Oct 25 2017 00:57
that one i linked to?
Mark Pearyer
@marcusp619
Oct 25 2017 00:58
thats the same one i was using but when i add the bottom snippet
it doesnt work
that code snippet at the bottom does it need to be inside the document.ready?
Tom
@moT01
Oct 25 2017 01:01
@asiaantczak try setting number with an Id instead of class
like you did for the button
@marcusp619 i dont document.ready is necessary but it doesn't hurt - i think it's sort of automatic now
umm, are you using codepen? you should share a link
did you add jquery?
Mark Pearyer
@marcusp619
Oct 25 2017 01:03
yea i did hold on let me grab the link
Lee
@LeeConnelly12
Oct 25 2017 01:07
@marcusp619 Where are you linking the API you're using?
Tom
@moT01
Oct 25 2017 01:07
well, i wont build the project for ya
i would suggest to try out the top example on their site, the .getJSON version
it's pretty simple
Mark Pearyer
@marcusp619
Oct 25 2017 01:08
oh sorry i accidentlly deleted it
let me try again
Tom
@moT01
Oct 25 2017 01:10
the poorly name a in function(a) will be the data that gets returned
try console loggin the a to see if any data is coming through
console.log(a)
Mark Pearyer
@marcusp619
Oct 25 2017 01:12
omg…..
console log
forgot
Mixed Content: The page at 'https://codepen.io/Marcusp619/pen/pWGByj' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback='. This request has been blocked; the content must be served over HTTPS.
works now needed to add a s to http
well the single quote append works now
let me try the random generate snippet now
Tom
@moT01
Oct 25 2017 01:13
well done
Can someone tell me why my edit page is so messed up?
Lee
@LeeConnelly12
Oct 25 2017 01:17
@marcusp619 You could also set the html of the element to keep showing a different quote.
$('#newMessage').on('click', function () {
  $.getJSON("https://quotesondesign.com/wp-json/posts?     filter[orderby]=rand&filter[posts_per_page]=1&callback=", function (a) {
      $('.message').html(a[0].content + "<p>— " + a[0].title + "</p>")
  });
});
Tom
@moT01
Oct 25 2017 01:18
@123xylem cause that's a login page
Chris Cullen
@123xylem
Oct 25 2017 01:18
@moT01 yea my bad... lol.. none of u have the login details
turns out opening it in mozilla works so must be a caching issue
alteducation
@alteducation
Oct 25 2017 01:24
@LeeConnelly12 if i do that then the navbar height gets messed up
Lee
@LeeConnelly12
Oct 25 2017 01:26
@alteducation do what?
@alteducation padding: 0 1%?
@alteducation do a fixed padding in pixels then
alteducation
@alteducation
Oct 25 2017 01:28
@LeeConnelly12 this is what happens when i add padding https://forum.alternativeeducation.in/#
Lee
@LeeConnelly12
Oct 25 2017 01:29
image.png
looks fine to me @alteducation
Mark Pearyer
@marcusp619
Oct 25 2017 01:30
@LeeConnelly12 when i click the button again it will not show a new quote
Lee
@LeeConnelly12
Oct 25 2017 01:30
can i see your code?
Mark Pearyer
@marcusp619
Oct 25 2017 01:30
$('#newMessage').on('click', function () {
$.getJSON("https://quotesondesign.com/wp-json/posts? filter[orderby]=rand&filter[posts_per_page]=1&callback=", function (a) {
$('.message').html(a[0].content + "<p>— " + a[0].title + "</p>")
});
});
$('#newMessage').on('click', function () {
  $.getJSON("https://quotesondesign.com/wp-json/posts?     filter[orderby]=rand&filter[posts_per_page]=1&callback=", function (a) {
      $('.message').html(a[0].content + "<p>— " + a[0].title + "</p>")
  });
});
Lee
@LeeConnelly12
Oct 25 2017 01:32
@marcusp619 works fine for me https://jsfiddle.net/
@marcusp619 my requests were getting blocked for not being served over https when i was using codepen
Mark Pearyer
@marcusp619
Oct 25 2017 01:33
@LeeConnelly12 okay let me try in jsfiddle
alteducation
@alteducation
Oct 25 2017 01:33
@LeeConnelly12 for me it looks like this https://ibb.co/fMuwQm
Lee
@LeeConnelly12
Oct 25 2017 01:34
@alteducation that doesn't make sense
alteducation
@alteducation
Oct 25 2017 01:34
@LeeConnelly12 if i add padding i becomes that way, removing any padding seems to fix it
@LeeConnelly12 also on chrome hovering over the dropdown seems to reset it back to normal
Lee
@LeeConnelly12
Oct 25 2017 01:36
@alteducation it looks perfectly fine?
image.png
alteducation
@alteducation
Oct 25 2017 01:38
@LeeConnelly12 are you on chrome?
Lee
@LeeConnelly12
Oct 25 2017 01:38
@alteducation yes
alteducation
@alteducation
Oct 25 2017 01:39
@LeeConnelly12 for me it loads like the image i sent you. i tried it in incognito too
@LeeConnelly12 i have set display none to the dropdown initially and display flex on hover if i set the dropdown to display flex always it seems to get fixed. Any thoughts?
Lee
@LeeConnelly12
Oct 25 2017 01:41
@alteducation I have no idea, sorry
alteducation
@alteducation
Oct 25 2017 01:42
@LeeConnelly12 sorry what i just said now was incorrect
Lee
@LeeConnelly12
Oct 25 2017 01:43
@alteducation Oh i see what u mean I'm seeing this now
image.png
@alteducation But if i press f12 and open console and inspect it fixes itself
thats strange
alteducation
@alteducation
Oct 25 2017 01:48
@LeeConnelly12 yeah pretty weird
alteducation
@alteducation
Oct 25 2017 01:57
@LeeConnelly12 on firefox and edge there are no issues
Lee
@LeeConnelly12
Oct 25 2017 01:57
@alteducation maybe try -webkit- with some of the css properties
@alteducation anyway goodnight man
alteducation
@alteducation
Oct 25 2017 01:58
@LeeConnelly12 yeah good night bro
AnaCamelo
@AnaCamelo
Oct 25 2017 02:23
Hello! I'm trying to create a filter selection with jQuery to display only the images with an specific class. My code is:
HTML
<div class="bg_ilus"> <ul class="filter-sel"> <li><button>Pensamientos</button></li> <li><button>Bolivia</button></li> <li><button>Retratos</button></li> </ul> <div class="illsutrations"> <img class="Pensamientos" src="img/gallery/paint_1.jpg" alt=""> <img class="Pensamientos" src="img/gallery/paint_2.jpg" alt=""> <img class="Bolivia" src="img/gallery/paint_3.jpg" alt=""> <img class="Bolivia" src="img/gallery/paint_4.jpg" alt=""> <img class="Retratos" src="img/gallery/paint_5.jpg" alt=""> <img class="Retratos" src="img/gallery/paint_6.jpg" alt=""> </div> </div>
jQuery
$(document).ready(function () { $('ul li button').click(function (){ $('ul li button').removeClass("selected"); $(this).addClass("selected"); function displayImgs(classSel) { var imgClass = $(this).text(); var displayImgs; $.each(classSel, function(i, illustration){ displayImgs = '<img class' + imgClass + '>'; }); // end each loop } });//end button anonymous function }); // end ready
Ken Haduch
@khaduch
Oct 25 2017 03:17
@AnaCamelo - you wouldn't happen to have a URL for a project already set up where it could just be examined?
alteducation
@alteducation
Oct 25 2017 03:21
@khaduch hi ken i am having a wierd css issue, no has has been able to help, can you take a look
AnaCamelo
@AnaCamelo
Oct 25 2017 03:22
@khaduch Hi, just got help! Thanks a lot, though! :D
CamperBot
@camperbot
Oct 25 2017 03:22
anacamelo sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3402 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Oct 25 2017 03:24
@alteducation - I can give it a try...
alteducation
@alteducation
Oct 25 2017 03:26
@khaduch in this page https://forum.alternativeeducation.in/ if i add padding to the li elements the text wraps to the next line. what could be causing this? this only happens on chrome and hovering mouse over the resources li fixes it
@khaduch adding whitespace no wrap fixed it. thank you
CamperBot
@camperbot
Oct 25 2017 03:30
alteducation sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3403 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Oct 25 2017 03:30
@alteducation - which li elements.... okay, that's good that you fixed it!
alteducation
@alteducation
Oct 25 2017 03:32
@khaduch now the wrap issue got fixed but li elements right side padding doesnt get applied on page load here https://forum.alternativeeducation.in/
@khaduch i am referring to the nav ul li elements
Ken Haduch
@khaduch
Oct 25 2017 03:35
@alteducation - it looks like the padding is being applied? You are referring to the 12px padding on the anchor elements that are part of the "li" elements? I'm using the Opera browser, by the way - if that makes any difference?
alteducation
@alteducation
Oct 25 2017 03:38
@khaduch how to attach photos here?
korzo
@korzo
Oct 25 2017 03:40
@alteducation drag photo inside chat
alteducation
@alteducation
Oct 25 2017 03:40
altedbugy.PNG
@khaduch the li elements looked squashed up like this on page load. only happens on chrome though.
altednormal.PNG
@khaduch if i hover my mouse pointer over the resources li it gets back to being normal
Ken Haduch
@khaduch
Oct 25 2017 03:45
@alteducation - I'm trying to start running Chrome to see...
alteducation
@alteducation
Oct 25 2017 03:46
@khaduch thank you. please take a look. this seems to be a pretty weird bug
CamperBot
@camperbot
Oct 25 2017 03:46
api offline
alteducation sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
Ken Haduch
@khaduch
Oct 25 2017 03:48
@alteducation - it looks like it "jumps" to a wider view when hovering over the dropdown list?
alteducation
@alteducation
Oct 25 2017 03:49
@khaduch wider view as in being normal?
@khaduch like in the image
Ken Haduch
@khaduch
Oct 25 2017 03:53
@alteducation - yes, it seems that activating the dropdown list changes the layout slightly? BTW, I'm seeing this same thing in the opera browser, too. I wasn't sure what I was looking at before...
korzo
@korzo
Oct 25 2017 03:55
@khaduch Yes, hover on dropdown change the layout of whole navigation
Ashwin
@ashwins93
Oct 25 2017 03:58

@alteducation - yes, it seems that activating the dropdown list changes the layout slightly? BTW, I'm seeing this same thing in the opera browser, too. I wasn't sure what I was looking at before...

that happens because a different padding rule is set in the li a:hover rule

alteducation
@alteducation
Oct 25 2017 04:02
@ashwins93 the padding is 1% all over
@ashwins93 the content seems to be moved to the right
Ashwin
@ashwins93
Oct 25 2017 04:03
@alteducation You could have overriden bootstrap for all the trouble lol
what is the issue, everything seems fine here
korzo
@korzo
Oct 25 2017 04:04
It looks like change is triggered when display changes from none to flex on .nav-dropdown ul
alteducation
@alteducation
Oct 25 2017 04:05
@korzo true but why?
@korzo if i dont use padding and use margins there is no issue
korzo
@korzo
Oct 25 2017 04:06
@alteducation It's the same in firefox?
alteducation
@alteducation
Oct 25 2017 04:07
@korzo there seems to be no issue on firefox
korzo
@korzo
Oct 25 2017 04:10
@alteducation I would say it's bug related to the fact that menu is generated with javascript.
Because change happen, when menu is rerendered by browser.
Try to make any change that trigger rerendering (change position, width...)
alteducation
@alteducation
Oct 25 2017 04:11
@korzo no. the menu is pure css, no js was used
korzo
@korzo
Oct 25 2017 04:14
@alteducation Oh, you are right. Was to lazy to check source.
Anyway, if you disable javascript, it looks ok
alteducation
@alteducation
Oct 25 2017 04:15
@korzo what could be a fix to this. weird bug this is
Ken Haduch
@khaduch
Oct 25 2017 04:17
@alteducation - I'm not an expert on this type of thing, but it seems somewhat reasonable to me that an implementation of this feature would be to do what is happening here - when the dropdown is not displayed, it is not affecting the layout, but after it is displayed, the layout updates to accommodate the text of the dropdown. I don't know if there is a prescribed way to handle this within the browser? Maybe stackoverflow.com would be a good place to search or ask? Maybe it has something to do with the flex implementation?
Maybe a fix ( more like a hack) would be to display and then hide the dropdown when the page is loaded?
Anyway, I'm burned out for today... hope that you get something working... good night all!
alteducation
@alteducation
Oct 25 2017 04:23
imge.PNG
@khaduch there seems to space, but the content is shifted right. yeah good night. thanks for taking time to help
korzo
@korzo
Oct 25 2017 04:25
@alteducation try to add display: inline-block to nav li
alteducation
@alteducation
Oct 25 2017 04:27
@korzo not happening
korzo
@korzo
Oct 25 2017 04:38
@alteducation Sorry, I have no idea why or how to fix it.
For me it looks like a bug, because li box doesn't reflect its css values and even chrome is reporting strange values.
For example it shows display: block for nav li
Martialis39
@Martialis39
Oct 25 2017 04:55
Is there a vanilla (without Jekyll) way to cut up a section in parts?
Ashwin
@ashwins93
Oct 25 2017 05:36
@Martialis39 you can add tabs
Harry Fahringer III
@harryrf
Oct 25 2017 05:37
Is it the wrong line of thinking to believe I'm doing myself a great disservice by continuing with Bootstrap?
Shouldn't I be focusing more on responsive design with HTML5 and CSS3?
Ashwin
@ashwins93
Oct 25 2017 05:40
@harryrf Using bootstrap or not is just a matter of personal preference IMHO
Its a matter of personal convenience
alteducation
@alteducation
Oct 25 2017 05:40
@harryrf there is nothing wrong with using a framework if you are comfortable with vanilla. the issue is being too dependent on frameworks and not being able to build things without iy
Harry Fahringer III
@harryrf
Oct 25 2017 05:41
@alteducation I think that's why my fear is. I'm looking to contribute to repo's on GitHub and the first thing that comes to mind is Bootstrap, which I can't seem to find much of.
WAY back I started out with regular HTML and CSS. I really starting moving along with Bootstrap, but I don't have a knack for visual stuff. I'm more of a code type of guy
If you ask me to paint your living room a nice color scheme, I'd probably just use off-white ;)
alteducation
@alteducation
Oct 25 2017 05:43
before css flexbox and css grid layouts ,layouts without relying on bootstrap was a pain. now i feel like css flexbox and the css grid layout have made responsive design easier than say bootstrap. vanilla also makes managing the code much easier imo
Ashwin
@ashwins93
Oct 25 2017 05:44
@alteducation the issue lies with writing lot of code. Like the media queries
bootstrap has 4 sizes
extra small, small, medium and large
think of writing all those media queries if your website should change looks on different screens
its certainly doable and easy
but your time is valuable, you have much better things to do
Again its just a matter of convenience
But using a frameworks should in no way be an excuse not to learn CSS. Thats a definite no-no
Harry Fahringer III
@harryrf
Oct 25 2017 05:46
That's my current case, full time job (not dev), family, etc. Time is of the essence.
alteducation
@alteducation
Oct 25 2017 05:46
@ashwins93 in flexbox i can just do flex direction column and whola!! its stacked vertically now for mobile. or i can do width 100% and enable flexwrap. I'm just saying that vanilla js is not that hard and you should learn it
Ashwin
@ashwins93
Oct 25 2017 05:47
I did a lot of vanilla projects before moving on to frameworks
that lets me appreciate the conciseness of frameworks
alteducation
@alteducation
Oct 25 2017 05:47
@ashwins93 i was refering to harry
Ashwin
@ashwins93
Oct 25 2017 05:47
lol im just saying
Harry Fahringer III
@harryrf
Oct 25 2017 05:47
Ah, yeah I love vanilla JS
Ashwin
@ashwins93
Oct 25 2017 05:48

@ashwins93 in flexbox i can just do flex direction column and whola!! its stacked vertically now for mobile. or i can do width 100% and enable flexwrap. I'm just saying that vanilla js is not that hard and you should learn it

you need to make multiple media queries don't you?

Harry Fahringer III
@harryrf
Oct 25 2017 05:48
I hardly use frameworks, unless it's p5 or something to do with physics engines
But, when it comes to making a site look "nice", I'm such a sucker for Bootstrap
alteducation
@alteducation
Oct 25 2017 05:49
@harryrf sorry harry i wanted to write vanilla CSS not JS :shipit: my bad
Harry Fahringer III
@harryrf
Oct 25 2017 05:49
oh lol
I do use vanilla CSS from time to time, especially when I don't like the confines of BS.
alteducation
@alteducation
Oct 25 2017 05:49
@ashwins93 not much, flexbox makes it much easier. i can just change the flex direction
Harry Fahringer III
@harryrf
Oct 25 2017 05:50
Bad thing is, I have no idea how to use flexbox, that's going to be on my TODO list :)
alteducation
@alteducation
Oct 25 2017 05:50
@ashwins93 with floats and clears it was a pain in the ass
@harryrf there are games like flexbox froggy, flexbox defence play them you will learn flexbox pretty fast
Ashwin
@ashwins93
Oct 25 2017 05:51
@alteducation that is only if you have 2 different layouts. The horizontal alignment on the desktops and vertical on phones. What about something that has 3 columns on large screens, 2 columns on medium screens and 1 column on small screens
you can change flex-direction for the one column layout
Harry Fahringer III
@harryrf
Oct 25 2017 05:51
@alteducation thanks, I'll check those out!
CamperBot
@camperbot
Oct 25 2017 05:51
harryrf sends brownie points to @alteducation :sparkles: :thumbsup: :sparkles:
Ashwin
@ashwins93
Oct 25 2017 05:51
but for the 2 column layout you have to rely on the wrap
CamperBot
@camperbot
Oct 25 2017 05:51
api offline
alteducation
@alteducation
Oct 25 2017 05:51
@ashwins93 i think css grid layouts fix that issue, i'm yet to learn css grid layouts though
Ashwin
@ashwins93
Oct 25 2017 05:52
@alteducation CSS grid layouts are easy but when the screen sizes change you still need to make media queries and give them different proprtions
alteducation
@alteducation
Oct 25 2017 05:52
@harryrf there is a video on flexbox by wes boz check that out too after finishing those games
Ashwin
@ashwins93
Oct 25 2017 05:53
CSS Grid allows you to do this

gird-area: 
  " colone  coltwo  colthree 
   colspan   colspan colspan ";
and then you assign the the name of the template to the component you want
and it just sits there
i did my pomodro clock using the css grid layout let me grab the link
alteducation
@alteducation
Oct 25 2017 05:55
@ashwins93 Yeah there are advantages to using frameworks, the development process get's faster, All I'm saying is you shouldn't get stuck with just frameworks, you should learn both and then decide. that was my point. I'm not bashing frameworks :shipit:
CSS grid was really easy, easier than flexbox
Harry Fahringer III
@harryrf
Oct 25 2017 05:56
hmm, what's the difference? Don't they both use a "grid"?
@ashwins93 I love that gradient effect, btw
alteducation
@alteducation
Oct 25 2017 05:57
@ashwins93 bro the ui looks cool af
Ashwin
@ashwins93
Oct 25 2017 05:57
@harryrf thanks. I was just doing it randomly
CamperBot
@camperbot
Oct 25 2017 05:57
ashwins93 sends brownie points to @harryrf :sparkles: :thumbsup: :sparkles:
:cookie: 288 | @harryrf |http://www.freecodecamp.com/harryrf
Ashwin
@ashwins93
Oct 25 2017 05:57
@alteducation thank you, i used no framework there
Harry Fahringer III
@harryrf
Oct 25 2017 05:58
That's what I am aiming for. Depending on anything sucks :P
Ashwin
@ashwins93
Oct 25 2017 05:58
@harryrf CSS grid is just the child of flex box. What flex box does in a single row, grid does that to both rows and columns
Harry Fahringer III
@harryrf
Oct 25 2017 05:59
ah, okay, makes sense.
Ashwin
@ashwins93
Oct 25 2017 05:59
@harryrf Yeah but it did took me a lot of time getting those things to align
if you have the time and patience you can go full vanilla
you have complete control of every single element on the page
but the responsive web becomes your responsibility
Harry Fahringer III
@harryrf
Oct 25 2017 06:00
@ashwins93 I bet. When I first started, it was more just different desktop sizes, now it's everything from a small cell to a large display!
Ashwin
@ashwins93
Oct 25 2017 06:00
yeah even the cellphone don't come with the same resolution anymore
two cellphones don't have the same width
Harry Fahringer III
@harryrf
Oct 25 2017 06:00
right
Ashwin
@ashwins93
Oct 25 2017 06:01
there is no standardized width
it makes responsiveness so hard
alteducation
@alteducation
Oct 25 2017 06:01
@ashwins93 i just shrink the window and write media queries along the way :smile:
Harry Fahringer III
@harryrf
Oct 25 2017 06:01
So, do you try to go for the smallest (like bootstrap) and use max-width: 100%?
Ashwin
@ashwins93
Oct 25 2017 06:01
everytime i'm about to enter some width parameter in "px" i have to stop and think
Harry Fahringer III
@harryrf
Oct 25 2017 06:02
Or would that all be done with media queries?
Ashwin
@ashwins93
Oct 25 2017 06:02
@harryrf yeah i usually adopt a mobile first approach that is the toughest part. If it looks good on mobile, then for larger screens its not a problem.
alteducation
@alteducation
Oct 25 2017 06:02
@ashwins93 isn't using rem and percents better than hard coding px values
Harry Fahringer III
@harryrf
Oct 25 2017 06:02
@alteducation That's what I've found to be true.
Not sure whether I should use rem or percent more often though.
Ashwin
@ashwins93
Oct 25 2017 06:03
@alteducation Yeah percentage is first priority because it calculates automatically based on device width. For somethings rem is better. But we have to manually change the sizes using media queries when using rems
for text ems are really useful than rems
alteducation
@alteducation
Oct 25 2017 06:04
yeah using percents just seem to work
Ashwin
@ashwins93
Oct 25 2017 06:05
percentage is perfect for widths, for height vh is more useful
but vh doesn't have that much compatibility i guess
alteducation
@alteducation
Oct 25 2017 06:06
i have only used vh for hero banners
Ashwin
@ashwins93
Oct 25 2017 06:06
This is where the CSS grid comes to the rescue. It can manage both rows and columns. Its like having the flexbox direction to both rows and columns
Harry Fahringer III
@harryrf
Oct 25 2017 06:06
Do either of you have jobs in this field?
Ashwin
@ashwins93
Oct 25 2017 06:06
@harryrf I don't. Lol i'm just a hobbyist
alteducation
@alteducation
Oct 25 2017 06:06
lol no unemployed af
Harry Fahringer III
@harryrf
Oct 25 2017 06:08
I'm employed, just not in this field. I'm at work all night thinking about code.
Ashwin
@ashwins93
Oct 25 2017 06:13
@harryrf Thinking
Harry Fahringer III
@harryrf
Oct 25 2017 06:23
@ashwins93 ?
@ashwins93 that's all I CAN do
different subject, but I want to rewrite my quote machine in Bootstrap 4, is it unconventional to create a new branch on GitHub and make pull request on my own repo?
Ashwin
@ashwins93
Oct 25 2017 06:26
not at all
thats how you add features
except you don't make pull requests
you just merge them
Harry Fahringer III
@harryrf
Oct 25 2017 06:26
I know it doesn't really matter since it's my repo, but I'm just wondering if that's how others do it
Ashwin
@ashwins93
Oct 25 2017 06:26
you create branches and then you merge them
Harry Fahringer III
@harryrf
Oct 25 2017 06:27
okay, merge
I'm trying to get this all correct so I can teach my son as well.
He wants to develop games when he gets older
Ashwin
@ashwins93
Oct 25 2017 06:27
git branch addcoolfeature
git checkout addcoolfeature
git add newfile
git commit -m 'new feature added'
git checkout master
git merge addcoolfeature
git push origin master
Harry Fahringer III
@harryrf
Oct 25 2017 06:28
Even if I'm rewriting the whole html file? Switching from BS 3.x to BS 4?
Ashwin
@ashwins93
Oct 25 2017 06:29

and also you might want to

git branch --delete addcoolfeature

after merging

@harryrf yes you can do that
the merge will happen seamlessly if it is just a fast forward
if after branching you made somechanges in the master
then you need to resolve the conflitcs but git will help you with that
it will just mark the parts which have conflicts you just need to open the file and delete the things you don't want and re run git merge
git is really powerful
Harry Fahringer III
@harryrf
Oct 25 2017 06:31
I love it
We used to use Tortiose VN or however it's called
Before GitHub ;)
Ashwin
@ashwins93
Oct 25 2017 06:31
it does this nice designs on your files
>>>>>>>>>>>>>>>>>>
master
>>>>>>>>>>>>>>>>
.
.
.
.
>>>>>>>>>>>>>>>>
branch
>>>>>>>>>>>>>>>.
so you just delete the parts you don't wanna keep
Harry Fahringer III
@harryrf
Oct 25 2017 06:33
This is a great community.
Thanks @ashwins93
CamperBot
@camperbot
Oct 25 2017 06:33
harryrf sends brownie points to @ashwins93 :sparkles: :thumbsup: :sparkles:
:cookie: 395 | @ashwins93 |http://www.freecodecamp.com/ashwins93
Ashwin
@ashwins93
Oct 25 2017 06:34
you're welcome @harryrf and yes this is an awesome community
rohitdesigner
@rohitdesigner
Oct 25 2017 07:54
how to import sass file in sass?
linkin-park
@linkin-park
Oct 25 2017 07:57
what is this.props.children
@ashwins93
A-J Roos
@Asjas
Oct 25 2017 08:00
@rohitdesigner does @import "yourfile"; not work?
linkin-park
@linkin-park
Oct 25 2017 08:01
@harryrf your point of liking Version Control is more of familarity issue
A-J Roos
@Asjas
Oct 25 2017 08:01
@rohitdesigner and what is the file name? It needs to start with an underscore ex. "_yourfile.scss"
linkin-park
@linkin-park
Oct 25 2017 08:12
hi @Asjas
A-J Roos
@Asjas
Oct 25 2017 08:12
Hello @linkin-park
:)
linkin-park
@linkin-park
Oct 25 2017 08:13
did you meet react :P
A-J Roos
@Asjas
Oct 25 2017 08:17
Who is that?
Or are you talking about the js library? I have no experience with it
Ashwin
@ashwins93
Oct 25 2017 08:20
@linkin-park you pass it from an upper level component like this
ReactDOM.render(<CustomComponent>children</CustomComponent>, document.body);
The elements between the opening tags and closing tags of a React Component will be passed to that component along with the rest of the props
which is accessible inside the constructor (stateful component) or in the render (stateless component) as props.children
linkin-park
@linkin-park
Oct 25 2017 08:23
wait a min
children parent is CustomComponent
linkin-park
@linkin-park
Oct 25 2017 08:25
tell me this in parent compoent cant i access childrten via this.props.children?
Ashwin
@ashwins93
Oct 25 2017 08:26
<MyComponent>Hello world!</MyComponent>
now inside the function you can receive the hello world as
function MyComponent(props) {
   return <h1>{ props.children }</h1>;
}

tell me this in parent compoent cant i access childrten via this.props.children?

you can access the children only from the component to which it is passed to, in the above case inside the MyComponent

you can pass anything as children really, you can pass React Components or any text or any JS expression
linkin-park
@linkin-park
Oct 25 2017 08:30
wait a min
MyComponent is parent Component
so we were able to access the children
i'm getting undefined
Ashwin
@ashwins93
Oct 25 2017 08:34
@linkin-park can i see your code?
linkin-park
@linkin-park
Oct 25 2017 08:37
sure
Pascal Clanget
@Gh05d
Oct 25 2017 08:42

Hi gals, I need some help. I try to write a server (in node) to make it possible to send an email via nodemailer after an user has completed a form (in react). How can I connect the server and my form?

My form is running on localhost 3000, my server on 4000. I can't let them run on the same port, so how can I sent the form values to the server. Don't really know how to configure the proper route.
https://codepen.io/Gh05d/pen/EwBMPL?editors=0011

I pushed the whole code to codepen.

Long Nguyen
@longnt80
Oct 25 2017 08:42
any idea why react only let me edit the ingredient's text input one chacracter at a time: http://cookbook-longnt80.surge.sh/ (View -> Edit -> Try edit the Ingredient text fields)
here's the code to handle onChange event:
handleEditIngredientField = (e, index) => {
        let newArr = this.state.newSingleItemData.ingredients.slice(0);
        newArr[index] = e.target.value;
        this.setState({
            newSingleItemData: {
                ...this.state.newSingleItemData,
                ingredients: [...newArr]
            }
        })
    }
Ashwin
@ashwins93
Oct 25 2017 08:45
@Gh05d if you are using webpack you can configure proxy to redirect requests to your server port
that is during development
if your react app is ready for production
Pascal Clanget
@Gh05d
Oct 25 2017 08:45
@ashwins93 I am using webpack
Ashwin
@ashwins93
Oct 25 2017 08:45
then you just bundle it to build to generate static files
and then you can make your node server serve the static files
and they will run in the same port
for development build you run two servers, one from webpack and another is your backend server
wait a sec lemme share the link
Pascal Clanget
@Gh05d
Oct 25 2017 08:46
How and where can I redirect the requests? I guess I have to change it somewhere in the webpack.config.dev file
Pascal Clanget
@Gh05d
Oct 25 2017 08:47
yeah, I am running to servers, one on 3000, one on 4000
Ashwin
@ashwins93
Oct 25 2017 08:47

"proxy": "http://localhost:3001/",

inside package.json of the client side

not inside webpack.config
replace 3001 with your backend server
you can find the full details on that link i pasted here
Pascal Clanget
@Gh05d
Oct 25 2017 08:51
I am checking the article out
thx @ashwins93 :thumbsup:
Ashwin
@ashwins93
Oct 25 2017 08:51
I found that article today
it was deep down in the search
linkin-park
@linkin-park
Oct 25 2017 09:01
k i found what mistake i made :(
Ashwin
@ashwins93
Oct 25 2017 09:03
@linkin-park typo?
linkin-park
@linkin-park
Oct 25 2017 09:04
still not sure take this
Ashwin
@ashwins93
Oct 25 2017 09:04
okay
linkin-park
@linkin-park
Oct 25 2017 09:14
okay got it what i made wrong
its not typo , got few things wrong so everything is wrong :)
Pascal Clanget
@Gh05d
Oct 25 2017 09:25
Okay, I get no more errors when trying to submit the form.
But on the other hand, just nothing happens.
So, there must be an issue with my server.
linkin-park
@linkin-park
Oct 25 2017 09:28
using jsx in js really sucks
it make your headache
Kael_
@iamKael
Oct 25 2017 10:01
Hi everyone
please i need a help.
i want to set a loader until the content isn't ready and load
how can i do it in Javascript(Without jQuery)
Stephen James
@sjames1958gm
Oct 25 2017 10:08
@MichKael You can do it with the onload event
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
      window.onload = () => {
        console.log("load event detected!");
      }
Kael_
@iamKael
Oct 25 2017 10:09
okay!thanks @sjames1958gm i take a look to the doc
Soumyojyoti Majumdar
@SoumyoNawab8
Oct 25 2017 10:18
The contents of the "container" class from bootstrap appears like float:left by default...but I want them to be in the center of the page...how to fix this?
Pascal Clanget
@Gh05d
Oct 25 2017 12:33

Hey, I am trying to import a variable in node. I am not sure whether I do it the correct way. This is my import:
const account = require("./pass");

And this here is from the file pass.js:

const account = {
  user: "blabalbla",
  pass: "choochoo!"
};

module.exports = {
  account: account
};
And I call it like this:
auth: { user: account.user, password: account.password }
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 12:44
@SoumyoNawab8 you mean text align at left?
and is there any codepen for it?
Toshi Badwaik
@toshibadwaik
Oct 25 2017 12:49
hey i have resumed my work on freecodecamp after many days... where early I saw some topic for Angular JS but now they not there.... can any one tell did any changes took place?
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 12:52
@toshibadwaik now its react
Petru Alin Gheorghe
@palingheorghe
Oct 25 2017 13:27
Guys what's the difference between an expression and a statement?
Stephen James
@sjames1958gm
Oct 25 2017 13:37
@palingheorghe An expression has a value a statement does not.
@palingheorghe
var a = <expression>; // valid
var a = <statement>; // not valid
Petru Alin Gheorghe
@palingheorghe
Oct 25 2017 13:39
could u give me an example for a statement?
function f(){} it's a statement?
linkin-park
@linkin-park
Oct 25 2017 13:50
@ashwins93 hi
there
Ashwin
@ashwins93
Oct 25 2017 13:51
@linkin-park Yeah hi LP
linkin-park
@linkin-park
Oct 25 2017 13:51
@palingheorghe your right :)
LP?? :/
okay
how would call one component from different component
based on event ofcourse
Ashwin
@ashwins93
Oct 25 2017 13:53
i don't really understand the meaning of "calling" a component
linkin-park
@linkin-park
Oct 25 2017 13:54
a component is created but its rendered with display:none or visible:hidden
onfocus i want to re-render
should i need to use ref? for that
Ashwin
@ashwins93
Oct 25 2017 13:55

onfocus i want to re-render

you pass on a callback function as a property

Ian Gracia
@iangracia
Oct 25 2017 14:29
hey guys
Morchid Chellali
@Morched23MJ
Oct 25 2017 14:29
Hey.
Ian Gracia
@iangracia
Oct 25 2017 14:29
so im trying to find an alarm sound to play when my pomodor clock hits 00:00
but im struggling to find a link that i can put in my new Audio("link");
i could just put them inside the new audio and then i could play(); them
rscales02
@rscales02
Oct 25 2017 14:31
@iangracia I hosted my audio on dropbox
CamperBot
@camperbot
Oct 25 2017 14:31
rscales02 sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
:cookie: 375 | @iangracia |http://www.freecodecamp.com/iangracia
Ian Gracia
@iangracia
Oct 25 2017 14:31
@rscales02 yeah i guess thats my option too atm, my question is if there is a website that does this already for their sound effects
there are so many websites with sound effects but you have to download them
anyone know a website where you can just link directly?
rscales02
@rscales02
Oct 25 2017 14:33
CamperBot
@camperbot
Oct 25 2017 14:33
rscales02 sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
api offline
Ian Gracia
@iangracia
Oct 25 2017 14:37
that is perfect, couldn't ask for anything better @rscales02 thank you.
CamperBot
@camperbot
Oct 25 2017 14:37
:cookie: 307 | @rscales02 |http://www.freecodecamp.com/rscales02
iangracia sends brownie points to @rscales02 :sparkles: :thumbsup: :sparkles:
@rscales02
rscales02
@rscales02
Oct 25 2017 14:46
@iangracia look like your start could use a little work... you can currently start multiple countdowns on the same timer with an errant click
CamperBot
@camperbot
Oct 25 2017 14:46
rscales02 sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
api offline
Ian Gracia
@iangracia
Oct 25 2017 14:48
yes, still working on the project. Will soon update the style too @rscales02
thanks anyways for the feedback
rscales02
@rscales02
Oct 25 2017 14:48
yeah the style hurts the eyes a bit...
Rodolfo Mondragon
@Rmondragon1987
Oct 25 2017 14:49
can somebody help me a bit with javascript advice?
Ian Gracia
@iangracia
Oct 25 2017 14:49
shoot @Rmondragon1987
disclaimer: i may not be able to help you
rscales02
@rscales02
Oct 25 2017 14:50
@Rmondragon1987 happy to try and help...
Sorin Ruse
@sorinr
Oct 25 2017 14:52
@iangracia i would add cursor:pointer; in css to #start and #stop to make the user know that is a clickable area
CamperBot
@camperbot
Oct 25 2017 14:52
sorinr sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
:cookie: 377 | @iangracia |http://www.freecodecamp.com/iangracia
Sorin Ruse
@sorinr
Oct 25 2017 14:57
@rscales02 add some conditional to not allow decreasing bellow 0 or 1
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 25 2017 14:57
@sorinr I wouldn't add cursor:pointer; as this is meant to indicate links. Instead I would suggest some hover effect (color change/box-shadow, probably with transition)
rscales02
@rscales02
Oct 25 2017 14:58
@sorinr thanks, I didn't even think to test that...
CamperBot
@camperbot
Oct 25 2017 14:58
rscales02 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1343 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Oct 25 2017 15:00
@Otto-AA cursor:pointer is intended to make the user aware that element behaves like a button. what you say its quite ok for styling the "button"
Rodolfo Mondragon
@Rmondragon1987
Oct 25 2017 15:01
found someone to help me. thank you tho
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 25 2017 15:02
@sorinr In the new bootstrap version buttons also don't have cursor: pointer; because they do not link to another site, but only provide some functionality. Here is an article about that if you want: https://medium.com/simple-human/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b
Sorin Ruse
@sorinr
Oct 25 2017 15:07
@Otto-AA it can be cursor:default pointer was just an example. if you look now when you enter the text area the cursor changes to text editing or selecting
T.A
@Cassogram
Oct 25 2017 15:13
Hi, all random question to you all I wanted to try and find a london based developer who would like to join me on a current project
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 25 2017 15:13
@sorinr What do you mean with "cursor:default" pointer was just an example? Or what is the context of this?
And of course, different mouse types are used to indicate different behaviours. Like you said the selecting mouse icon is to indicate "Hey, I can write/select here". The zoom mouse icon says "Lets zoom, just cklick and zooooom". And the cursor: pointer tells me "Click me and you will find yourself on another page. You can use the mouse wheel to open me in another tab too...", but not "I am Button"
T.A
@Cassogram
Oct 25 2017 15:15
does anyone have a good place to go to meet any potential?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 25 2017 15:15
@sorinr It is really intended to be used for links and not buttons. But of course you can use it otherwise (e.g. gitter when hovering names)
@Cassogram Library?
Sorin Ruse
@sorinr
Oct 25 2017 15:17
@Otto-AA i meant that he needs to change the cursor for the entire div to make the user aware its a clickable area. now, the cursor is default for outside part of the text. when you hover over the text the cursor changes. it should be unity for the entire element
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 25 2017 15:18
@sorinr got it now :)
Sorin Ruse
@sorinr
Oct 25 2017 15:19
@Otto-AA see here the dif between start and stop
T.A
@Cassogram
Oct 25 2017 15:21
@Otto-AA I am not a student so finding the correct library will be a little random and a gamble, I was thinking maybe any London meet up or chartrooms that I could find a potential partner. As I am learning to code currently but no where near the experience or level I need for the project and business.
Sorin Ruse
@sorinr
Oct 25 2017 15:24
@rscales02 welcome
Victor Abeledo
@victorja
Oct 25 2017 15:38
Hi guys I need some help. I am trying to use the github api but I am having trouble concatenating the api URL with the value of the textbox (line 30 js code) Can you help me figure out why is that happening?
https://jsfiddle.net/4mLn5h77/
rscales02
@rscales02
Oct 25 2017 15:54
Can someone help me get this to switch players? I think the answer is right in front of me but I just don't see it... https://codepen.io/rscales02/pen/pWBLEK
also, please choose 1 player and x as this is as far as I have gotten...
Sorin Ruse
@sorinr
Oct 25 2017 16:10
@rscales02 first, make the x much bigger to be better seen. Second, you have to implement some AI for the "second" player be it pc or another human
rscales02
@rscales02
Oct 25 2017 16:13
@sorinr I know that I will need to implement an AI, at the moment I am just trying to figure out how to get it to switch from X to O on the entry. As far as the style, I guess I could knock that out now while I am still stuck...
@sorinr font-size issue fixed...
Sorin Ruse
@sorinr
Oct 25 2017 16:30
@rscales02 i would call the "2nd player turn" from the function that deals with the "1st player moves" after this ones makes his move
Kshitiz
@kshtzsharma48
Oct 25 2017 16:33
is it necessary to buy a mackbook for responsive designs in safari both mobile and browser for testing or is it ok with a windows pc ??
Kaz Baig
@kbaig
Oct 25 2017 16:35
@kshtzsharma48 plenty of sites where you can simulate what your page would look like on diff browsers
Kshitiz
@kshtzsharma48
Oct 25 2017 16:36
@kbaig can u please tell me what are the sites and wether i need to buy the expensive macbook for the task
Kaz Baig
@kbaig
Oct 25 2017 16:37
@kshtzsharma48 crossbrowsertesting.com is the one codepen links
These sites simulate browsers so idk why you would need a mac
Kshitiz
@kshtzsharma48
Oct 25 2017 16:38
@kbaig thank u
CamperBot
@camperbot
Oct 25 2017 16:38
kshtzsharma48 sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 371 | @kbaig |http://www.freecodecamp.com/kbaig
rscales02
@rscales02
Oct 25 2017 16:43
@sorinr so change to second player from playerClick()?
Sorin Ruse
@sorinr
Oct 25 2017 16:48
@rscales02 yes.by the end of playerClick() i would call another one that deals with AI or second player. at the end of the second one i would call again playerClick() but not before checking if some of the players have a win
rscales02
@rscales02
Oct 25 2017 16:48
ok, thanks, @sorinr
CamperBot
@camperbot
Oct 25 2017 16:48
rscales02 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1344 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Oct 25 2017 16:49
@rscales02 welcome
quickspeedy
@quickspeedy
Oct 25 2017 16:55

I'm having trouble trying to understand callback where I am trying to execute loadSunObject() as a callback inside the 'getWeatherData()to get jsonObject from the API. I have this code that I want to return the object back togetWeatherData()`

function loadSunTime() {
  var URL = "https://api.wunderground.com/api/800715b6ce08dbb1/astronomy/q/IL/Rockford.json"
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if(this.readyState == 4 && this.status == 200) {
      // console.log(JSON.parse(this.reponseText));
      //console.log(this.reponseText);
      // return JSON.parse(this.responseText);
      //getSunTime(this);
      console.log(JSON.parse(this.responseText));
      return JSON.parse(this.responseText);
    }
  }
  xhttp.open("GET", URL, true);
  xhttp.send();
}

//callback function
function doThis(callback) {
  //console.log(callback);
  callback();
}

//return an object from loadSunTime()
function getWeatherData(jsonObject) {
   console.log("Sun object: ", doThis(loadSunTime));
}

Here is the link to codepen: https://codepen.io/quickspeedy/pen/XeomjK

Raymond Duckworth
@raymondxduckworth
Oct 25 2017 17:04
Hi everyone! Would anyone like to pair program the Wikipedia Viewer? I haven't really done much pair programming before, but I'm excited to try it out. Thanks! :)
Sorin Ruse
@sorinr
Oct 25 2017 17:10
@quickspeedy this xhttp.onreadystatechange = function() is your callback. in plain words a callback is a function that will deal with the server response after making a call to the server. your js code will run after that function() unless you make your call synchronous thing i would not advice to use because if for some reason the server don't send a response your entire script will hook
Jake
@JakeDVirus
Oct 25 2017 17:10
is it reliable, from the performance perspective, to use jquery to remove/add classes with the change of media-query rule in mobile first approach? hope i am making sense
or shall i change the class and properties in the css manually??
Kaz Baig
@kbaig
Oct 25 2017 17:13
@NeelDVirus there's going to be a performance tradeoff if you do JS. It's a question of whether it's worth it to trade performance for potential maintainability and practicality in your specific case
quickspeedy
@quickspeedy
Oct 25 2017 17:14
@sorinr Ok, without the callback I did, the jsonObject would not return due to the fact that it skipped loadSunTime(). Is there a workaround issue?
Jake
@JakeDVirus
Oct 25 2017 17:16
@kbaig well i dont know what to choose out of potential maintainability and performance. In big projects both are vital, if performance if affected then all the hard-work loose its value and if maintainablity if affected then one wrong nail can screw the whole building.
any advice?
this is my first time building something big
Kaz Baig
@kbaig
Oct 25 2017 17:17
@NeelDVirus Hard to say without knowing all the variables
Sorin Ruse
@sorinr
Oct 25 2017 17:26
@NeelDVirus jquery its just fine to change css properties if you use the right context, selectors and properties
Jake
@JakeDVirus
Oct 25 2017 17:27
@sorinr lets say for example i need to delete a class after reaching the min width of 48em. how will i do that
Sorin Ruse
@sorinr
Oct 25 2017 17:27
@quickspeedy i don't see where you make the call to your functin unction loadDoc(lat, long) and pass in the variables lat and long.
quickspeedy
@quickspeedy
Oct 25 2017 17:28
@sorinr It's at the bottom
$(document).ready(function(){
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position){
      loadDoc(position.coords.latitude, position.coords.longitude);
    });
  }
Sorin Ruse
@sorinr
Oct 25 2017 17:31
@NeelDVirus think you should check for $( window ).width(); and do whatever u want in that case
Jake
@JakeDVirus
Oct 25 2017 17:32
@sorinr But, the issue with the width() function is that it doesn’t return the correct value of the window as it takes into effect things like body padding and scroll bars on the window. So this approach is not reliable i presume
Sorin Ruse
@sorinr
Oct 25 2017 17:33
@quickspeedy btw. why do you mix vannila js with jquery? i would use one or the other for the entire site
Jake
@JakeDVirus
Oct 25 2017 17:34

i am not using vanilla js with jquery.
i guess you are talking about this approach

if($(window).width() < 481)
{    // It’s a Phone.}
elseif($(window).width() < 769)
{    // It’s a tablet.}
else { // It’s a desktop/laptop.}

isn't it?

Sorin Ruse
@sorinr
Oct 25 2017 17:34
@NeelDVirus here what that function returns that may help you
quickspeedy
@quickspeedy
Oct 25 2017 17:35
@sorinr Thought it would be easier. No?
Sorin Ruse
@sorinr
Oct 25 2017 17:36
@NeelDVirus nope. both conditions will be true in case of a value less then 481
@NeelDVirus the idea is that but you have to change the if conditions
Jake
@JakeDVirus
Oct 25 2017 17:37
@sorinr yeah i know. But as i mentioned using .width() wont return the correct value because of the factors i mentioned above
This message was deleted
@sorinr here are the details. it is advised to use mordernizr in this case http://www.learningjquery.com/2017/03/how-to-use-media-queries-with-jquery
Sorin Ruse
@sorinr
Oct 25 2017 17:40
@NeelDVirus yes you do in the function ​function loadDoc(lat, long) instead of using $.getJSON() a jquery function you are using the vanilla XMLHttpRequest
woops was not intended for you
@quickspeedy ​function loadDoc(lat, long) instead of using $.getJSON() a jquery function you are using the vanilla XMLHttpRequest
Sorin Ruse
@sorinr
Oct 25 2017 17:50
@NeelDVirus if you make your most upper parent in css: width: 100vw; what will the $( window ).width(); report for you?
@NeelDVirus by upper parrent i mean html, body
@NeelDVirus as an alternative u have flexbox
Jake
@JakeDVirus
Oct 25 2017 17:56
@sorinr well i haven't cross checked anything related to that. i think i will go with manual manipulation of scss rather going with js/jquery. i guess this wont have drawbacks
Sorin Ruse
@sorinr
Oct 25 2017 18:01
@NeelDVirus absolutely it would be better to deal with it in css then in js to make changes. usually you load css before js so the styling will be available right away
Jake
@JakeDVirus
Oct 25 2017 18:09
@sorinr sounds relieving now :D
Sorin Ruse
@sorinr
Oct 25 2017 18:10
@NeelDVirus try using js just for client interaction
@NeelDVirus :+1:
Jake
@JakeDVirus
Oct 25 2017 18:12
@sorinr yeah interactions are reliable with js/jquery
Sorin Ruse
@sorinr
Oct 25 2017 18:14
@NeelDVirus just separating the concerns will save u future headaches
Jake
@JakeDVirus
Oct 25 2017 18:16
@sorinr Oh yeah. thanks for the vital advice
Sorin Ruse
@sorinr
Oct 25 2017 18:17
@NeelDVirus welcome
Jake
@JakeDVirus
Oct 25 2017 18:32
@sorinr you might wana see this http://ryanve.com/lab/dimensions/
Sorin Ruse
@sorinr
Oct 25 2017 18:39
@NeelDVirus its an article from 2012, things changed by now. have u had the time to test :point_up: October 25, 2017 8:50 PM
Lee
@LeeConnelly12
Oct 25 2017 18:44
@harryrf this quote generator works now
var quote  = $("#quote");
var quote_old="";
var author = $("#author");
var author_old="";

function NewQuote(){
  quote_old = quote.html();
  author_old = author.html();
  $.getJSON("https://random-quote-generator.herokuapp.com/api/quotes/random", function(json){ 
    quote.html(json.quote);
    author.html(json.author);
  });
  $("#quote").html(quote).hide().fadeIn(500); 
  $("#author").html(author).hide().fadeIn(500);
};
@harryrf You can only go back one quote so it still needs some extra features :smile:
@ashwins93
Ashwin
@ashwins93
Oct 25 2017 19:07
@linkin-park Glad you got it
you are also passing children to App but never using them
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 19:51
@alpox around?
alpox
@alpox
Oct 25 2017 19:52
@tiagocorreiaalmeida yea :)
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 19:52
router.get("/search/:location",(req,res)=>{
   let userLocation = req.params.location;
   yelp.accessToken(process.env.YELP_ID,process.env.YELP_SECRET).then((response)=>{
        const client = yelp.client(response.jsonBody.access_token);
        client.search({
            term:"bar",
            location:userLocation,
            open_now:true,
            limit:1
        }).then((resData)=>{
            let placeData = resData.jsonBody.businesses.map((ele)=>{
                    Place.findOne({"id_place":ele.id}).then((data)=>{
                        console.log
                        if(data){
                            return data.toObject(); 
                        }else{
                            let place = new Place({
                                id_place: ele.id,
                                name: ele.name,
                                type: ele.categories[0].title,
                                img: ele.image_url,
                                url: ele.url,
                                rating: ele.rating,
                                phone: ele.phone,
                                coord: ele.coordinates.latitude +","+ele.coordinates.longitude,
                                address: ele.location.display_address[0] + " " + ele.location.display_address[1] + " " + ele.location.display_address[2],
                                users_going: []
                            });
                            place.save().then((data)=>{
                                return data.toObject();
                            }).catch((e)=>{
                                console.log(e);
                            });
                        }
                    }).catch((e)=>{
                        console.log(e);
                    });
            });     
            res.send(JSON.stringify(placeData));       
        }).catch((e)=>{console.log(e);});
    }).catch((e)=>{console.log(e);}); 
});
what would be the best way to wait before sending this
res.send(JSON.stringify(placeData));
Kaz Baig
@kbaig
Oct 25 2017 19:54
@tiagocorreiaalmeida you mean you just want to delay the response time?
alpox
@alpox
Oct 25 2017 19:54
@tiagocorreiaalmeida Hmm in some cases you will get some undefined in placeData - actually in any case in that the place was not found
@tiagocorreiaalmeida In general if you want to wait for all the data to arrive, i would opt certainly for Promise.all
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 19:55
I will get undefined everytime cause the request wont wait as obvious
alpox
@alpox
Oct 25 2017 19:55
@tiagocorreiaalmeida Until now, yes :D
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 19:55
yeah was trying to read some docs and figure out what would be the best but then remembered you and just came here :D
alpox
@alpox
Oct 25 2017 19:56
@tiagocorreiaalmeida Then go on reading the docs on Promise.all :D
@tiagocorreiaalmeida Btw. you can keep your structure way more flat than it is now
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 19:57
remove the returns and make them one line and things like that?
or other?
removve { and return
 place.save().then((data)=>data.toObject()).catch((e)=>{console.log(e)});
like this you mean?
alpox
@alpox
Oct 25 2017 19:58
@tiagocorreiaalmeida
var clientPromise = yelp.accessToken(process.env.YELP_ID,process.env.YELP_SECRET).then((response)=>{
        const client = yelp.client(response.jsonBody.access_token);
        return client.search({
            term:"bar",
            location:userLocation,
            open_now:true,
            limit:1
        })
})

clientPromise.then(resData => { ... });
You can return promises from .then callbacks to keep it flat
@tiagocorreiaalmeida So what i mean is that you don't have to indent your code each time you get a level deeper - you just pass things to the outside again. If you just go deeper in the levels, Promises loose their value and you could have as well just used normal callbacks.
Promises are made for keeping the structure flat and easier to reason about
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 20:04
and in this cause only need a catch aswel
yeah I still confuse a bit how to use this properly
if you dont mind just to understand better on this part
            let placeData = resData.jsonBody.businesses.map((ele)=>{
                    Place.findOne({"id_place":ele.id}).then((data)=>{
                        if(data){
                            return data.toObject(); 
                        }else{
                            let place = new Place({
                                id_place: ele.id,
                                name: ele.name,
                                type: ele.categories[0].title,
                                img: ele.image_url,
                                url: ele.url,
                                rating: ele.rating,
                                phone: ele.phone,
                                coord: ele.coordinates.latitude +","+ele.coordinates.longitude,
                                address: ele.location.display_address[0] + " " + ele.location.display_address[1] + " " + ele.location.display_address[2],
                                users_going: []
                            });
                            place.save().then((data)=>data.toObject()).catch((e)=>{console.log(e);});
                        }
                    }).catch((e)=>{;console.log(e)});
            });
yo would break the findone and the save?
to chain then?
like we did above
"break"
alpox
@alpox
Oct 25 2017 20:07
@tiagocorreiaalmeida And for the map you can do something like:
var retrievePlace = ele =>
  Place.findOne({ id_place: ele.id }).then(data => {
    if (data) return data.toObject();
    return new Place({
      id_place: ele.id,
      name: ele.name,
      type: ele.categories[0].title,
      img: ele.image_url,
      url: ele.url,
      rating: ele.rating,
      phone: ele.phone,
      coord: ele.coordinates.latitude + "," + ele.coordinates.longitude,
      address:
        ele.location.display_address[0] +
        " " +
        ele.location.display_address[1] +
        " " +
        ele.location.display_address[2],
      users_going: []
    })
      .save()
      .then(data => data.toObject());
  });

Promise.all(resData.jsonBody.businesses.map(retrievePlace)).then(places =>
  res.send(JSON.stringify(places))
);
@tiagocorreiaalmeida To show you some ways to make things easier with promises :-)
I myself would put the creation of the place in an own function outside of the route/middleware too.
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 20:13
I can tell you this was a bit confusing to understand :D the first part was ok I would say but a bit confusing still about promise.all
alpox
@alpox
Oct 25 2017 20:13
@tiagocorreiaalmeida Anything specific confusing? :D
@tiagocorreiaalmeida Promise.all takes an array of promises and returns a promise which will resolve when all the promises passed to it have resolved.
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 20:15
nm you made a function one top was confusing didnt remember that in es6 you can atually remove the () if there's only 1 element... ok tbh this was a good example when I should use promise all made sense now
alpox
@alpox
Oct 25 2017 20:15
And Promise.all resolves with all the values resolved through its passed promises in an array
@tiagocorreiaalmeida Ah great ^_^ im glad
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 20:16
tbh this was better to understand than the mdn since it was a "real world" issue, big thanks
alpox
@alpox
Oct 25 2017 20:16
Probably yes, mdn can be a bit cryptic at times
np :-)
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 25 2017 20:20
@Cassogram Sorry, didn't read your first message O.o
But what's about the FreeCodeCamp Meetup in London? Twitter | Meetup
I guess you can find people on various skill levels there ;)
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 20:24
may I ask how long have you been coding?just curisoty @alpox
alpox
@alpox
Oct 25 2017 20:24
@tiagocorreiaalmeida around 8-9 years in full
Kaz Baig
@kbaig
Oct 25 2017 20:25
dang
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 20:25
always web dev or?
alpox
@alpox
Oct 25 2017 20:26
@tiagocorreiaalmeida No, also desktop application programming (C#, Java), deep level a little bit too (C, C++), a little bit of graphics, quite a lot of web with different platforms...
Things come together over time :-)
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 20:27
aaaa sound nice, yeah was just curiosity :D
alpox
@alpox
Oct 25 2017 20:27
At the moment i'm diving into clojure
@tiagocorreiaalmeida Sure :-)
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 20:28
im full focus on web its the thing I like the most, in this case its atually css one of the things that I liek the most even tough alot of people seems to dont like it
alpox
@alpox
Oct 25 2017 20:29
@tiagocorreiaalmeida Haha thats quite special :D i don't like css either - but i can handle it quite enough i think
Jake
@JakeDVirus
Oct 25 2017 20:42
@sorinr yeah i tested. let me know whether i did wrong interpretation. any suggestion will be appreciated. dont hold back
Jessie Cryer
@j-cryer
Oct 25 2017 20:54
Hey does anyone know how to keep content inside of bootstrap columns?
I'm doing this:
<div class="row">

                <div class="col-md-4 col-xs-6">

                    <div class="well well-sm featured">
                        <p>Username</p>
                    </div>

                </div>
</div>
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 20:55
do you have a container?
and that sohuld work
Jessie Cryer
@j-cryer
Oct 25 2017 20:55
obviously i have more than one column inside the row but the paragraph element or any heading <h2>, <h3> doesn't resize and stay inside the well
when i resize the page
yes i have a container
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 20:56
is there a codepen or anything I can look at?
Jessie Cryer
@j-cryer
Oct 25 2017 20:57
@tiagocorreiaalmeida no i dont have it in a pen
@tiagocorreiaalmeida its kind of ridiculous because i dont have this problem anywhere else in the application. are inline elements supposed to break or resize inside columns when resized?
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 20:59
hum its working
Jessie Cryer
@j-cryer
Oct 25 2017 21:04
@tiagocorreiaalmeida hm. im going to have to mess around and see what i can do. the page that im working on is incredibly simple (as in i havent added much of anything to it) so its difficult to understand what could posisbly be wrong. will update
@tiagocorreiaalmeida but yeah content inside the well doesnt change at all. overflow just runs right out the box
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 21:06
try to place everything in a codepen will be easier to hlep you
Jessie Cryer
@j-cryer
Oct 25 2017 21:08
@tiagocorreiaalmeida alright ill do that but i assume its going to work correctly when i do. oddly enough. seeing as how your code worked perfect and you have the same code that i do (except im using container-fluid actually)
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 21:09
but the container fluid only changes the size of the "wraper" nothing else
Jessie Cryer
@j-cryer
Oct 25 2017 21:11
@tiagocorreiaalmeida okay here we go. giving me the same issue in pen
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 21:11
@alpox stll around?
just need an opinion
router.get("/go/:id", (req, res) => {
    if (req.user) {
        let userID = req.user.id;
        let location = req.params.id;
        Place.findOne({ id_place: location }).then((data) => {
            if (data) {
                Place.findOne({ id_place: location, users_going: userID}).then((data) => {
                    if (data) {
                        let searchField = { id_place: location, users_going: userID };
                        let updateData = { $pull: { users_going: userID }};
                    } else {
                        let searchField = { id_place: location };
                        let updateData = { $push: { users_going: userID }};
                    }
                    Place.update(searchField, updateData).then((data) => {
                        let peopleGoing = data.toObject().users_going.length + 1;
                        res.send(JSON.stringify({peopleGoing}));
                    }).catch((e) => {
                        console.log(e);
                    });
                }).catch((e) => {
                    console.log(e);
                });
            } else { res.send(JSON.stringify({ error: true })); }
        }).catch((e) => console.log(e));
    } else { res.send(JSON.stringify({ error: true })); }
});
Jessie Cryer
@j-cryer
Oct 25 2017 21:11
is it because my <p> content is one word ?
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 21:12
in this cause to wait for the searchfield and updpatedata varaibles the best way its just to resolve the values right?
using a new promise
@j-cryer that will never break
yeah xd
anyway
Jessie Cryer
@j-cryer
Oct 25 2017 21:13
@tiagocorreiaalmeida so is there a way to fix it? overflow doesn't seem to have a "resize" option
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 21:13
overflow-wrap: break-word;
there you go that's the fix you need
for the p tag
Jessie Cryer
@j-cryer
Oct 25 2017 21:14
@tiagocorreiaalmeida that definitely helps but for worst case it still runs out the bottom
@tiagocorreiaalmeida I think i could set a width property
alpox
@alpox
Oct 25 2017 21:14
@tiagocorreiaalmeida Hmm you again make it much too deep :D
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 21:15
aaa crap
:D
alpox
@alpox
Oct 25 2017 21:15
@tiagocorreiaalmeida Promises are not there to be used like callbacks :D
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 21:15
@j-cryer
image.png
everything works well
  • hires @alpox * for promises classes :D
alpox
@alpox
Oct 25 2017 21:16
@tiagocorreiaalmeida You'll learn it :D
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 21:16
dont change the code but point me how I should doing it to see if I get there
if possible mate
alpox
@alpox
Oct 25 2017 21:16
@tiagocorreiaalmeida I can show you examplecode
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 21:17
yeah if possible
alpox
@alpox
Oct 25 2017 21:18

@tiagocorreiaalmeida You do this:

somePromise.then(data => {
    someFuncReturningPromise().then(data => {
        someOtherFuncReturningPromise().then(data => {
        }).catch(...);
    }).catch(...);
}).catch(...);

At the moment. As you see, this creates a deeply nested structure - the exact thing what promises were created for to avoid

Because this exact thing happens with callbacks.

But inside of the .then callback you can just return a promise and then chain on the outer promise:

somePromise
    .then(data => someFuncReturningPromise())
    .then(data => someOtherFuncReturningPromise())
    .catch(...);

Same thing

Edit: corrected 2 errors in the above example :D
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 21:21
so promise.then data inside return new promise then chain antoher then and further and further?
alpox
@alpox
Oct 25 2017 21:21
From inside the .then you can either return a normal value or a promise
Yep
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 21:21
lets see if I can turn the code into this idea :D brb
alpox
@alpox
Oct 25 2017 21:22

You can also do:

somePromise
    .then(data => 4)
    .then(number => console.log(number)); // Logs 4

Here i just return a normal value

somePromise
    .then(data => someFuncReturningPromise())
    .then(data => console.log(data));
Here i return a promise. If a promise is returned, the next .then waits for it to resolve. If its a normal value (non-promise) it executes the next .then instantly with the returned value
@tiagocorreiaalmeida I'm going to bed now though :-) i'll write back in the morning if you have something to add
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 21:24
just a last question if youi still here :D imagine you hjave an if else statement if true returns new promise if not res.send the data
if I get into the else how's gonna then ext .then behave?
alpox
@alpox
Oct 25 2017 21:25
@tiagocorreiaalmeida No good idea because in the next .then you await a value which in that case may end up undefined
@tiagocorreiaalmeida if you just do res.send and no return, you implicitly return undefined
(No return in a function results in an undefined return value)
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 21:26
in this case I should avoid do this if I have a then next right?
or returning it will stop everything in this case?
and just go get some rest we talk tomorrow :D
alpox
@alpox
Oct 25 2017 21:26
You should avoid that in any case when you return something in some case from a promise.
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 21:27
ok thanks @alpox see you tomorrow
CamperBot
@camperbot
Oct 25 2017 21:27
tiagocorreiaalmeida sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1401 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Oct 25 2017 21:27
When you know its the last .then in your chain, you just don't return anything in any case
@tiagocorreiaalmeida Yea, see ya :-) good night
Jessie Cryer
@j-cryer
Oct 25 2017 22:01
anyone consider themselves good at sql/mysql here?
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 22:02
depends what being good means to you :D
what do you need?
Jessie Cryer
@j-cryer
Oct 25 2017 22:03
@tiagocorreiaalmeida I suppose that good is relative that's why I said "consider themselves" XD
Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 22:04
just point what you need
Jessie Cryer
@j-cryer
Oct 25 2017 22:06

@tiagocorreiaalmeida I have these two tables User, and Deck. Deck has a FK of UserID (for the user who made the deck) and deck also has a Rating column. Now I was going to query for the top 6 Users based on Sum(Rating) of Decks that the user has created.

Select UserID
From Deck
Order By Sum(Rating)
Limit 6;

However, I'm experienced enough in SQL to konw that this isnt going to work. Sum(Rating) is going to sum all ratings of all decks

Tiago Correia
@tiagocorreiaalmeida
Oct 25 2017 22:09
SELECT userId, sum(Rating) as 'Total'
FROM Deck
ORDER BY Total DESC
LIMIT 5
try this
not sure
Mohamed Nabil Ayoub
@MohNabil
Oct 25 2017 22:23
Hi campers,What is the url of free code camp twitch tv so i can use it to get the info of the channel by getJason
mzedlach
@mzedlach
Oct 25 2017 22:29
Hello hello everyone :)
Sorin Ruse
@sorinr
Oct 25 2017 22:29
hi
mzedlach
@mzedlach
Oct 25 2017 22:29
Is there someone online that coudl help me with the weather API? I have a million questions and I am very stuck.
HI Sorin :)
Sorin Ruse
@sorinr
Oct 25 2017 22:32
@mzedlach try to ask one question at a time from that million and we will see :)
Mercy Manrique
@mers89
Oct 25 2017 23:21
hi, I needed to see if someone could help me with the tic-tac-toe. I was trying to get the user to be able to select to be either x or o
Here is my current code https://codepen.io/mers89/pen/oGGzZv
I found someone's elses version and I wanted to implement something similar as far as selecting a player https://codepen.io/mers89/pen/ZXaPWb
Gos-Jr
@Gos-Jr
Oct 25 2017 23:25
Hi everyone, i have a few questions, any help is appreciated. 1st, can anyone confirm that list of an unordered list are block element?
korzo
@korzo
Oct 25 2017 23:27
@Gos-Jr it's list-item
Gos-Jr
@Gos-Jr
Oct 25 2017 23:28
@korzo But isn't it a block element?
When a list is created, each item takes up a row
Row / Block
korzo
@korzo
Oct 25 2017 23:30
@Gos-Jr but behavior is similar as block
Gos-Jr
@Gos-Jr
Oct 25 2017 23:31
For instance, i am expecting that if i float item 1 of the list left and item 2 of the list right, both items will still take up a row regardless and not shift to in-line.
I realize that if i float #1 left and #2 right they become inline
Correction for in-line, i meant inline or inline-block
korzo
@korzo
Oct 25 2017 23:33
@Gos-Jr No, they are still "block" element, but they are no longer part of document flow.
It's similar as with position absolute
Gos-Jr
@Gos-Jr
Oct 25 2017 23:33
@korzo So you're saying it's not block element but behave similar as block?
korzo
@korzo
Oct 25 2017 23:33
@Gos-Jr So their width will not be "row", but element with
Gos-Jr
@Gos-Jr
Oct 25 2017 23:35
@korzo What about if you specifically set the display to block? Would that force it to be a block element and prevent them from going on the same line if they're float left and right?
korzo
@korzo
Oct 25 2017 23:36
@Gos-Jr It's similar to block, but not the same
Take a look here: https://developer.mozilla.org/en-US/docs/Web/CSS/display
search for <display-listitem>
@Gos-Jr Yes, you can override display value to block/table/inline...as you wish
@Gos-Jr floated elements will be in the same line by default
Gos-Jr
@Gos-Jr
Oct 25 2017 23:39
I tried overriding to block, but that didn't seem to work, i had to use min-width and margin to sort of accomplished the visual i wanted, but that came with issues due to the fact that it's actually being block despite setting the display to block.
That's my tribute project
I used min-width and margin to achieve the visual of list items floating left and right and having a center line that lines up
This works fine also when displayed on mobile devices, it becomes responsive and display like a normal list
The problem i am facing is that, because it's not taking the effect of a block element, if i use JavaScript to hide the p elements, everything get crumble to inline
korzo
@korzo
Oct 25 2017 23:44
@Gos-Jr floats are not the best way to achieve that.
Because your code rely on fact, that every li element has width more then 50%
Therefore they are under each other
Gos-Jr
@Gos-Jr
Oct 25 2017 23:45
@korzo i tried display block and that didn't work
korzo
@korzo
Oct 25 2017 23:45
@Gos-Jr did you have float inside li element?
Gos-Jr
@Gos-Jr
Oct 25 2017 23:46
I tried the display block without the float amd that didn't work
No float, display block, using margin left and right to have each li line to the left or right should give the visual i have now, but for some reason that didn't work.
korzo
@korzo
Oct 25 2017 23:47
@Gos-Jr you should wrap H2 and p inside div and then you can use display: table
Gos-Jr
@Gos-Jr
Oct 25 2017 23:48
Div inside the li or a complete different approach using div instead of ul li ?
If i am going to use div inside the li, wouldn't it just make sense to do away with the ul li and just use all div?
korzo
@korzo
Oct 25 2017 23:49
inside the li
@Gos-Jr
        <li>
            <div>
                <h2></h2>
                <p></p>
            </div>
            <span></span>
        </li>
@Gos-Jr Then you can set li as row and div+span as cell of table
50% width each
or you can use floats also, with clearfix on li
Gos-Jr
@Gos-Jr
Oct 25 2017 23:53
Didn't thiught i would have to use row and table as well. I know the tribute project didn't require this complexity, but i wanted to make the tribute page a little more popping than the flat example that's presented in the course.
Would clearfix on the li make them behave like block?
korzo
@korzo
Oct 25 2017 23:54
@Gos-Jr yes, it make parent of floated elements behave as block with content
without clearfix, parent of floated elements has height 0, because floated elements are not part of the document flow
Gos-Jr
@Gos-Jr
Oct 25 2017 23:55
I am going to try adding clearfix to li using the code as is now and see if that works out
korzo
@korzo
Oct 25 2017 23:56
@Gos-Jr fork your self and try it with 2-3 elements, as codepen doesn't have version control
Gos-Jr
@Gos-Jr
Oct 25 2017 23:57
@korzo I actually work on the project locally and then just paste it to codepen
Feels a lot simpler to me using my editor locally and upload after
Maybe i should start using github so i can version control
@korzo Quick question though, is there anything wrong with the way i did it currently?