Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Aug 17 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 17:13
    @mstellaluna banned @cmal
  • Jan 08 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
  • Jul 29 2018 01:00
    @bjorno43 banned @jkyereh
  • Jul 10 2018 22:09
    @bjorno43 banned @manafn
  • Jul 06 2018 15:20
    @texas2010 banned @imlegend19
  • Jul 03 2018 12:28
    @bjorno43 banned @vbvmatta
  • Jun 29 2018 13:54
    @bjorno43 banned @OGTechnoBoy
Xavier Velez
@JonSnow08
Has anybody here completed the Simon Game and have a moment to help me out?
I've got a few of the functions done, a good amount of code but im lost as to where to go next
Veron Oparebea
@Veron247
hello
A friend introduced me to freecodecamp. And am much happy to join
Muhammad Hasham
@MohammadHasham
Diego Souza
@diegosouza
@Veron247 welcome
Beth Qiang
@bethqiang
is anyone in here familiar with the materialize framework, especially with respect to grids?
Ken Haduch
@khaduch
@MohammadHasham - a couple things I noticed
  • when first loading, there is (or at least was) an empty space in the the grid - a row in the middle of the rows that was not completely filled in (This might be random - I just reloaded and there were several gaps in the rows)
  • clicking on "online" still leaves the "Account Closed" images there. (And should those have a name attached? Since you used a name to find them)
  • the "Account closed" uses also show up for the "Offline users"
  • After clicking "online users", "offline users" and then "All users" - the online users are no longer shown? Also "Online Users" and then "All Users" doesn't show the offline users?
@bethqiang - I'm not, but would give it a shot? Do you have a link and a specific question?
Tyler Moeller
@TylerMoeller
@bethqiang Yes, I've used the materialize grid.
@khaduch Similar concept to bootstrap, but no xs grid size: http://materializecss.com/grid.html
Ken Haduch
@khaduch
@TylerMoeller @bethqiang - yes, I was just looking at the docs... very similar.
Xavier Velez
@JonSnow08
 var LightUp = function() {
      for (var i = 0; i < sequence.length; i++) {
           switch (sequence[i]) {
            case 1:
               $('.cntrl1').css('background-color', "#ff0000");
               setTimeout(function() {
                  $('.cntrl1').css('background-color', '#330000');

               }, 500);
               break;
            case 2:
               $('.cntrl2').css('background-color', "#00ff00");
               setTimeout(function() {
                  $('.cntrl2').css('background-color', '#003300');

               }, 500);
               break;

            case 3:
               $('.cntrl3').css('background-color', "#ffff00");
               setTimeout(function() {
                  $('.cntrl3').css('background-color', '#4d4d00');

               }, 500);
               break;
            case 4:
               $('.cntrl4').css('background-color', "#0000ff");
               setTimeout(function() {
                  $('.cntrl4').css('background-color', '#000033');

               }, 500);
               break;
         }
      }
how would I set this up to not light up all at the same time
right now it's going all at once, I need it in order
Beth Qiang
@bethqiang

@khaduch @TylerMoeller so i have a grid, where the left column has a picture and the right column has some text. i've been trying to get the picture to be vertically aligned, but i haven't yet succeeded. (i have tried a myriad of placements of "valign-wrapper" and "valign") a snippet of the code without the valign-wrappers/valign (i'm adding html via javascript/jquery) is below, as well as a link to the codepen that i'm attempting to use.

      onlineHTML = '<a href="' + url + '" target="_blank"><div class="row online"><div class="col s3 m2 center"><img src="' + logo + '" class="logo-style"></div><div class="col s9 m10"><p class="name">' + name + '</p><p>'+ game + ': ' + description + '</p></div></a>';
      $("#streamers").prepend(onlineHTML);

what it looks like now: http://codepen.io/bethqiang/pen/xOzJGr

@khaduch @TylerMoeller i've tried putting valign-wrapper and valign in various places in the various divs/elements and i just haven't been able to get it yet. also, sorry, i didn't realize that snippet of code would be slightly annoying to read, haha. i can reformat it if it makes y'all's life easier.
Tyler Moeller
@TylerMoeller
@bethqiang lol, I just went through this with my Twitch.tv project in Materialize. It was hard to get the images to align correctly. I'll try to take a closer look at your pen and see if I can help.
Ken Haduch
@khaduch
@bethqiang - vertical alignment is a bit of a nasty thing, unless you can use flex - that seems to make things really easy. I think that you might be able to put your image inside a flexbox that has it set for centering? I'm not that familiar with flex, but I'll bet it would work... let me see if I can figure out how to add it? Unless someone else here (I know there are some flex devotees here from time to time) knows if it can be done.
Beth Qiang
@bethqiang
@khaduch i've been considering trying to learn how flex works to incorporate flex into future projects, but i figured i'd at least finish this series of projects before embarking on something new haha. but yes, if it can be done in flex, happy to learn! @TylerMoeller awesome! let me know :)
Tyler Moeller
@TylerMoeller
@bethqiang Add the classes responsive-img circle to your <img> tags in your JS. Remove the height and width settings from your CSS for the class .logo-style, and then add a top margin to get them vertically aligned.
You can set a min-width on the image as well to keep it from getting too small at certain media sizes
Beth Qiang
@bethqiang
@TylerMoeller hmm ok cool, most of that worked--is there any way to auto set the top margin so that it's always vcentered, regardless of the size? for example, the way i have it now (set to 25%), it's okay at some screen widths but really really not in others
Ken Haduch
@khaduch
@bethqiang - I'm close to getting the flex thing working - if I set the height of the flex div to 200px - it looks nice! I'll post a screenshot
Tyler Moeller
@TylerMoeller

@bethqiang You could do something like this:

.logo-style {
  margin: 15px auto 0 auto;
  min-width: 80px;
}

Flex also works well with materialize.

Ken Haduch
@khaduch
blob
@bethqiang - that's for the offline users. I need to figure out how to get the thing automatically to set the height to the container div? Not sure about that one.
Beth Qiang
@bethqiang
@TylerMoeller - still not quite what i was envisioning, but def closer...hmm.
@khaduch - that does look awesome! what is the "thing" you're referring to?
Rich
@richard-ball
Is there some default behaviour that blocks the use of the submit event, since I cannot get it to work. all that happens is my console clears and the text input empties.
Ken Haduch
@khaduch
@bethqiang - I have added a div to hold the image, but if I do not specify a height, it does not inherit the height of the parent div, the "row", so it ends up just looking as it did before. If I set the height with a hard-coded value, looks like about 106px works, then it is vertically centered, thanks to the flex settings... still researching.
CamperBot
@camperbot
khaduch sends brownie points to @bethqiang :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @bethqiang |http://www.freecodecamp.com/bethqiang
Travmatth
@Travmatth
i’m slightly confused about the twitchtv project - is the point just to pull & display the list of current streamers?
Tyler Moeller
@TylerMoeller
@Travmatth Yes, and filter that list by their online/offline/closed account status.
Beth Qiang
@bethqiang
@khaduch - would setting the height to 100% do anything?
Anshul Jain
@ajain706
hello world !!!!!!!!
CamperBot
@camperbot

welcome to FreeCodeCamp @ajain706!

Stephen James
@sjames1958gm
@ajain706 HEELLOOO
Anshul Jain
@ajain706
hy @sjames1958gm
Ken Haduch
@khaduch
@bethqiang - I just figured it out - I needed to make the parent contaner also be a flex container. I'll just fork your project for you to check out - the changes that I made are only for the offline users, there was change to the offlineHTML, and the addition of a .flexCenter class, as well as adding display:flex; to the .offline class. Here is a link - see if you get it working. I think that you had an error in your original HTML, maybe missing a closing </div> tag? Anyway, I think that the offline users is working here.
Beth Qiang
@bethqiang
@khaduch - awesome, i'll take a look at it! i wouldn't be surprised if i had an error in my original HTML...i find it so difficult to keep track of closing tags. :/ and @TylerMoeller - thanks to both of you for taking a shot at it!
CamperBot
@camperbot
bethqiang sends brownie points to @khaduch and @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1493 | @khaduch |http://www.freecodecamp.com/khaduch
:cookie: 704 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
@khaduch Nice work :)
May have to borrow some of that for my Twitch project and get rid of those media queries!
CloudyShows
@CloudyShows
"
Rule #2: Fulfill the below user stories. Use whichever libraries you need. Give it your own personal style"
what does this mean?
Beth Qiang
@bethqiang
@khaduch - so i looked up a couple of things relating to the flexbox class that you added in, and found this on mdn -
/ Pack items around the center /
justify-content: center;
CloudyShows
@CloudyShows
nvm im dumb