These are chat archives for FreeCodeCamp/HelpFrontEnd

13th
Sep 2016
Robert Stone
@rjstone
Sep 13 2016 00:42
Anyone know a better way to do the CSS for this? https://codepen.io/rjstone/pen/pEjYWY
Ken Haduch
@khaduch
Sep 13 2016 00:44
@ManBearPigg - you can use the various display: table; options on divs to make something that looks like a table, without it being an HTML table. I don't know the best article to read, but here's one on the subject - https://www.sitepoint.com/solving-layout-problems-css-table-property/ - it uses table display features, without it being a table.
Ken Haduch
@khaduch
Sep 13 2016 00:54

@rjstone - I just posted an article about using the CSS display: table; settings, with the related settings for table-row, table-cell, etc. I don't know if that would make anything better for you? https://www.sitepoint.com/solving-layout-problems-css-table-property/. It might not. Another thing that I don't know much about, but seems to me to be something that could help with this type of CSS coding, is using Sass. As I said, I'm not too knowledgeable about it, but it seems like a way to make structured CSS code.

What don't you like about your current approach, if you don't mind my asking?

Robert Stone
@rjstone
Sep 13 2016 00:59

@khaduch The main problem I was having was trying to get everything to fit properly in a 300x200px wide UI panel in FireFox. Tables might actually be the best thing to use in this case because well it's a table layout. Really the main thing I want is for everything in there to scale proportionally to the size of the containing div, fonts and all. But it's not realy necessary. I'm mostly just trying to find the best way to do various things in CSS so that when it is necessary to change the size of a UI panel or something I don't have to recalculate a bunch of hardcoded pixel widths and stuff like that.

Anyway, in short the main thing I didn't like was the hardcoded widths of things. Ideally I'd like to have zero hardcoded pixels at all, only ems and %

丑小鸭
@chouXiaoYaJS
Sep 13 2016 01:00
Good slow speed
njwda
@njwda
Sep 13 2016 01:00
Hello guys, can you review my code please? I want to know if I can do things in a better way. o_o http://codepen.io/njwda/pen/PzvKNZ?editors=1010
Robert Stone
@rjstone
Sep 13 2016 01:01
thanks @khaduch this table stuff is helpful
CamperBot
@camperbot
Sep 13 2016 01:01
rjstone sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1668 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Sep 13 2016 01:01

@rjstone - good point - hardcoded pixels are usually not great things to have. I think that it's a place where Sass could be handy, too? I think you can define constants and then use them in places where you need them - it constructs the CSS on the fly (at least on CodePen - I'm not familiar with it outside of that environment, but I'll bet it automatically does the translation on a "normal" webpage, as well?

And the table stuff is handy - I've used it here and there myself.

santosh
@coderpsk
Sep 13 2016 01:02
help at 93 Label Bootstrap Buttons
CamperBot
@camperbot
Sep 13 2016 01:02
no wiki entry for: at 93 label bootstrap buttons
Ken Haduch
@khaduch
Sep 13 2016 01:02
@coderpsk - what's up?
santosh
@coderpsk
Sep 13 2016 01:03
Label Bootstrap Buttons
 <h4>#left-well</h4>
  <div class="well" id="left-well">
    <button class="btn btn-default target" id="target1">#target1</button>
    <button class="btn btn-default target" id="target2">#target2</button>
    <button class="btn btn-default target" id="target3">#target3</button>
  </div>
</div>
<div class="col-xs-6">
  <h4>#right-well</h4>
  <div class="well" id="right-well">
    <button class="btn btn-default target" id="target4">#target4</button>
    <button class="btn btn-default target" id="target5">#target5</button>
    <button class="btn btn-default target" id="target6">#target6</button>
  </div>
Robert Stone
@rjstone
Sep 13 2016 01:03
@khaduch - ok, i'll check out sass. There are just so many preprocessing langauges these days I don't know which one to start with. Today I'm working on learning jquery. What would you say I should learn when it comes to actual CSS, JS, and HTML preprocessors? (not talking about the app frameworks, just things that require building before deploy)
Under normal circumstances, I think people use sass with npm build to invoke sass and build .css from .scss files or something.
vínαч puppαl
@vinaypuppal
Sep 13 2016 01:05
@rjstone Hey i dont understand why you used floats when your already using flexbox. you dont need specify widths just u can use flex: 1 over children of flex container to give them equal width and as far as i know if you use most flexbox properties you can implement in a responsive way as you want
Robert Stone
@rjstone
Sep 13 2016 01:05
That's what I'd have to do for a firefox extension
Ken Haduch
@khaduch
Sep 13 2016 01:05
@rjstone - I don't know a lot of the preprocessors - something that I have yet to learn! I've seen a lot of people using Sass, I think that Jade is becoming more popular these days for HTML. jQuery is definitely great for DOM transactions - it makes things a lot easier (in my opinion) that using vanilla JS.
@coderpsk - I think that it looks correct? Are all of the tests failing or anything passing?
Robert Stone
@rjstone
Sep 13 2016 01:07
@vinaypuppal I don't understand either, lol. I haven't read about flexboxes yet. Basically I was just throwing things together like frankenstein trying to see what would work without really knowing what I was doing. I'll read about the flex attributes to understand them better. I also stole the basic CSS style off of someone elses page to use as a basis for experimenting so I stole stuf I didn't understand and then started messing with it.
thanks @vinaypuppal @khaduch
CamperBot
@camperbot
Sep 13 2016 01:07
rjstone sends brownie points to @vinaypuppal and @khaduch :sparkles: :thumbsup: :sparkles:
:warning: rjstone already gave khaduch points
:cookie: 510 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Robert Stone
@rjstone
Sep 13 2016 01:08
Though I think I replaced about half or more of what I stole so far, lol
Terrence Wideman
@ttwide
Sep 13 2016 01:08
on the first project does anyone know how the guy got the border and color on his tribute page without using css?
vínαч puppαl
@vinaypuppal
Sep 13 2016 01:08
@rjstone oh okay http://flexbox.io is best resource to learn if your interested
Ken Haduch
@khaduch
Sep 13 2016 01:09
@ttwide - is that the portfolio page?
Terrence Wideman
@ttwide
Sep 13 2016 01:09
@khaduch yeah
Cameron Burkholder
@Cameron-Burkholder
Sep 13 2016 01:09
I'm having the strangest problem with my twitch api. I can console.log() anywhere else in my js, but in my second $.getJSON call. Nothing will work inside of it and I'm not sure why.
Ken Haduch
@khaduch
Sep 13 2016 01:09
or the tribute page?
Robert Stone
@rjstone
Sep 13 2016 01:09
Basically what I was going to do is make a firefox extension version of this: http://specificity.keegan.st/ since it should be pretty simple and I want something simple to learn FF ext dev.
I ought to email the guy and see if he cares if I copy his colors and otherwise make it look too much like his page.
Terrence Wideman
@ttwide
Sep 13 2016 01:09
tribute
vínαч puppαl
@vinaypuppal
Sep 13 2016 01:10
@ttwide they used bootstrap jumbotron/well component i think
Terrence Wideman
@ttwide
Sep 13 2016 01:10
huh did we even that? are you messing with me?
Ken Haduch
@khaduch
Sep 13 2016 01:11
@ttwide - probably using Bootstrap? Some things like setting the <div class="jumbotron"> does set the Bootstrap defaults - all you have to do is load the bootstrap.css and then the classes are available without adding "extra" CSS code of your own.
vínαч puppαl
@vinaypuppal
Sep 13 2016 01:11
Robert Stone
@rjstone
Sep 13 2016 01:11
For firefox extenions I'm not too worried but is flexbox a browser compatibility problem at all these days? Or does everything support it the same way?
vínαч puppαl
@vinaypuppal
Sep 13 2016 01:11
@rjstone http://caniuse.com/#feat=flexbox major browsers supported see this link
Robert Stone
@rjstone
Sep 13 2016 01:12
I gotta get the caniuse atom extension
Terrence Wideman
@ttwide
Sep 13 2016 01:12
okay ill check it out @khaduch @vinaypuppal
Robert Stone
@rjstone
Sep 13 2016 01:12
thanks @vinaypuppal
CamperBot
@camperbot
Sep 13 2016 01:12
rjstone sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: rjstone already gave vinaypuppal points
Ken Haduch
@khaduch
Sep 13 2016 01:12
@ttwide - yeah, I think that it's a jumbotron that he is using there? Or perhaps a well
Terrence Wideman
@ttwide
Sep 13 2016 01:12
how do you give brownie points
Robert Stone
@rjstone
Sep 13 2016 01:13
bootstrap is awesome. What's up with Bootstrap 4 though? Should I be using that or use 3? I've been messing with 4 because I figure by the time I do anything importnt with it it will be out of alpha
Cameron Burkholder
@Cameron-Burkholder
Sep 13 2016 01:13
You just say thanks to soeone and tag them. @ttwide
CamperBot
@camperbot
Sep 13 2016 01:13
cameron-burkholder sends brownie points to @ttwide :sparkles: :thumbsup: :sparkles:
:cookie: 118 | @ttwide |http://www.freecodecamp.com/ttwide
Robert Stone
@rjstone
Sep 13 2016 01:13
@ttwide you just say "thanks @name"
Terrence Wideman
@ttwide
Sep 13 2016 01:13
thanks @khaduch
CamperBot
@camperbot
Sep 13 2016 01:13
ttwide sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1669 | @khaduch |http://www.freecodecamp.com/khaduch
Terrence Wideman
@ttwide
Sep 13 2016 01:14
thanks @vinaypuppal
CamperBot
@camperbot
Sep 13 2016 01:14
ttwide sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 511 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Terrence Wideman
@ttwide
Sep 13 2016 01:14
thanks @rjstone
CamperBot
@camperbot
Sep 13 2016 01:14
ttwide sends brownie points to @rjstone :sparkles: :thumbsup: :sparkles:
:cookie: 57 | @rjstone |http://www.freecodecamp.com/rjstone
Chelsea Casareale
@ChelseaCasareale
Sep 13 2016 01:15

Hey all. I'm working on the Weather API project. I've got it set up so it uses the Geolocation API "getCurrentPosition" method to then direct the weather API to show the weather for the current location.

Apparently though (for Google Chrome) "getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS."

vínαч puppαl
@vinaypuppal
Sep 13 2016 01:15
@rjstone major changes i think in bs4 they shifted from less to sass and using flexbox instead of floats and clearfix hacks. You can check their change logs for more info
Chelsea Casareale
@ChelseaCasareale
Sep 13 2016 01:15
sorry that's an essay but the question is how else would I get someone's location???
I can't change the security of codepen's site or the api lol
Ken Haduch
@khaduch
Sep 13 2016 01:16
@ChelseaCasareale - you can use http://ip-api.com for a ( less accurate) alternative way of getting a location based on IP address. It works on http://
Cameron Burkholder
@Cameron-Burkholder
Sep 13 2016 01:17
You have to use
if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(function(position) {
// some code 
}
vínαч puppαl
@vinaypuppal
Sep 13 2016 01:17
@ChelseaCasareale you need to load your pen over https for geolocation to work and for more info follow this disscussion on github FreeCodeCamp/FreeCodeCamp#9145 it will help you
Cameron Burkholder
@Cameron-Burkholder
Sep 13 2016 01:18
If you run that, you will see a permission pop up asking for you location. IMPORTANT - if you click out of that confirm dialog before hitting accept, the code will not work because it gets processed as if you denied access, so if you accidentally do that, just refresh the page.
vínαч puppαl
@vinaypuppal
Sep 13 2016 01:19
@khaduch BTW http://ip-api.com will be blocked by adblocker so not suitable to use in projects as most of us use Adblocker extensions.
Chelsea Casareale
@ChelseaCasareale
Sep 13 2016 01:19
Thanks all! @Cameron-Burkholder I do have that actually
CamperBot
@camperbot
Sep 13 2016 01:20
chelseacasareale sends brownie points to @cameron-burkholder :sparkles: :thumbsup: :sparkles:
:cookie: 375 | @cameron-burkholder |http://www.freecodecamp.com/cameron-burkholder
Cameron Burkholder
@Cameron-Burkholder
Sep 13 2016 01:20

Can anyone figure out why the code inside my second

$.getJSON

call isn't working? I have marked a few

console.log()

statements, but the ones inside that JSON request don't do anything.

Ken Haduch
@khaduch
Sep 13 2016 01:20
@vinaypuppal - oh, I haven't tried it yet, thanks for the info!
CamperBot
@camperbot
Sep 13 2016 01:20
khaduch sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 512 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
vínαч puppαl
@vinaypuppal
Sep 13 2016 01:24
@Cameron-Burkholder https issue you can check that in chrome console
Chelsea Casareale
@ChelseaCasareale
Sep 13 2016 01:24
I copied and pasted the url in the followerURL and it gave me a 404 so check that?
Cameron Burkholder
@Cameron-Burkholder
Sep 13 2016 01:25
How can I resolve it?
Chelsea Casareale
@ChelseaCasareale
Sep 13 2016 01:26
I haven't done that project so I'm not sure what it's supposed to be linking to
Is it supposed to give the info the channels they follow?
vínαч puppαl
@vinaypuppal
Sep 13 2016 01:28
@Cameron-Burkholder from where you got that followers API URL i cant find in API docs
@Cameron-Burkholder and there is no userstory to get followers of channel
So why are you doing this? If its your preference then okay just check API request URL is correct in docs.
Cameron Burkholder
@Cameron-Burkholder
Sep 13 2016 01:31
I figured it would be better to do it this way, because hardcoding the followers in seems like bad practice to me.
I used Postman to check the validity of the link, and it came up with regular results. No errors. It formatted the JSON for me and everything
vínαч puppαl
@vinaypuppal
Sep 13 2016 01:34
@Cameron-Burkholder you just need to make two request one to get stream info and other to get user info
If stream is null then Channel is offline otherwise not
i think stream response will have currently watching users number if want to show instead of followers
@Cameron-Burkholder oh okay let me try that
SKGJY
@SKGJY
Sep 13 2016 01:35
so for the tribute page can it be a tribute to a person place or thing
or is it more of a tribute to specifically a person?
Cameron Burkholder
@Cameron-Burkholder
Sep 13 2016 01:36
Yep @SKGJY
The topic doesn't matter, as long as you show proficiency in the designated task - HTML, CSS, and responsive design
SKGJY
@SKGJY
Sep 13 2016 01:36
alright thanks @Cameron-Burkholder just wanted to know since I found choosing someone to tribute it to somewhat hard
CamperBot
@camperbot
Sep 13 2016 01:36
skgjy sends brownie points to @cameron-burkholder :sparkles: :thumbsup: :sparkles:
:cookie: 376 | @cameron-burkholder |http://www.freecodecamp.com/cameron-burkholder
vínαч puppαl
@vinaypuppal
Sep 13 2016 01:37
@Cameron-Burkholder http://api.twitch.tv/kraken/%20/streams/followed this URL yields 404 error and in code your are not appending anything to above url before making request
vínαч puppαl
@vinaypuppal
Sep 13 2016 01:39
This message was deleted
Cameron Burkholder
@Cameron-Burkholder
Sep 13 2016 01:39
That's the url I began with.
vínαч puppαl
@vinaypuppal
Sep 13 2016 01:39
@Cameron-Burkholder yes before you have only http://api.twitch.tv/kraken/%20/streams/followed
@Cameron-Burkholder anyway you figured it out :smile:
Cameron Burkholder
@Cameron-Burkholder
Sep 13 2016 01:40
Yeah haha @vinaypuppal
Thanks @vinaypuppal
CamperBot
@camperbot
Sep 13 2016 01:41
cameron-burkholder sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 513 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Zeeshan Haider
@zeeshan72
Sep 13 2016 02:42
i have an array=[1,2,3,4] and i want to add white spaces in it.. any idea how can i do it?
Zheng
@FireFalcon1155
Sep 13 2016 03:03
@zeeshan72 you can do array.push(" "); or if u wanna add a specific index, array[3 or watever index]=" ";
Mark Adel
@MarkAdell
Sep 13 2016 03:53
Finn_Reo
@Finn199587
Sep 13 2016 04:10
Build a Random Quote Machine
where shold i learn api
i have no idea to finish it
vínαч puppαl
@vinaypuppal
Sep 13 2016 04:26
@Finn199587 check this course it helped me a lot https://www.udacity.com/course/intro-to-ajax--ud110
Harley Kruse
@HamishAus
Sep 13 2016 05:07
Hey everyone, I've just got up to building my first tribute page, and have hit a huge brick wall in that I feel like I've been thrown in the deep end a little. I'm just a little unsure on how to even start. Should I just go back and start back from html5 and css again? Sorry for the noob question, I'm quite new to this
cameron nicklaus
@camnicklaus
Sep 13 2016 05:09
@HamishAus I had to go back over stuff to remember how to get the tribute page started...I also started off trying to make something unique but found it easier to finish if I modeled it more directly from the example
Harley Kruse
@HamishAus
Sep 13 2016 05:13
@camnicklaus thanks for the prompt reply, I honestly can't believe how hard I am finding this, considering how easy i found the other challenges. However I suppose it is a little different without the guiding hand of FCC. I think it would be for the best if i went back over the other modules again. Thanks again!
CamperBot
@camperbot
Sep 13 2016 05:13
hamishaus sends brownie points to @camnicklaus :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @camnicklaus |http://www.freecodecamp.com/camnicklaus
cameron nicklaus
@camnicklaus
Sep 13 2016 05:15
@HamishAus no problem. yeah...for me I felt really stalled when looking at a blank screen...once I got the first few lines going it got easier.
Harley Kruse
@HamishAus
Sep 13 2016 05:19
@camnicklaus yeah I really don't know why I'm having such a hard time, but then again its only my laptop between me and my partner whom is a full time student at university, so i find it hard to get time to do these modules, I get a few days in here and there but nothing consistent, so a refresher is definitely what i need.
Chad Powell
@cjpowellaz
Sep 13 2016 05:25
help Build a Random Quote Machine
CamperBot
@camperbot
Sep 13 2016 05:25
no wiki entry for: build a random quote machine
Chad Powell
@cjpowellaz
Sep 13 2016 05:27
I am trying to work on the Build a Random Quote machine but I am stuck on learning APIs. Code Camp honestly does not have anything about this for the challenge. I feel like I have been spinning my wheels on this. How do I learn this API stuff?
LPR-309
@LPR-309
Sep 13 2016 05:43
@cjpowellaz I'd have a look at $.ajax method and $.getJSON method on jQuery's site. $.getJSON is actually a shortcut method of $.ajax, so it really helps to study the details of ajax itself (it did for me anyway). You also definitely want to familiarize yourself with the API's documentation, understanding parameters in URLs, how to read and access JSON data, etc. It's mainly trial and error on your first go, you learn a lot as you do that project.
You also may want to look into JSONP and CORS concepts if you run into cross-domain issues. There was a great post about that on the forums somewhere, I'll see if I can find it.
LPR-309
@LPR-309
Sep 13 2016 05:48
JSONP / CORS Explanation Very good reference if you run into this issue.
Tim
@TimmDay
Sep 13 2016 05:53
I'm having a (similar?) issue with the weather app. I'm using an API to get the users location data, and want to use that data the build a url for the second API. The problem is, I can't seem to redefine the variables i need with my function for the first API. STUMPED!
LPR-309
@LPR-309
Sep 13 2016 05:55
@TimmDay Can you provide a link to your Codepen for that one? I'm a relative newbie, but I'll help if possible
lyaa
@lyaa
Sep 13 2016 06:10
@TimmDay check out wunderground autoip api if you don't want to spend too much time trying to get openweathermap to work ( https://api.wunderground.com/api/3f10deaa6f257a6e/geolookup/conditions/q/autoip.json ). I used it to give the initial weather report and then built a search bar for the weather by the name of the city using wunderground's autocomplete and generic conditions request but the search bar thing is optional
of course, change the api key
suriyaJaay
@suriyaJaay
Sep 13 2016 06:49
is that any have working experience with ACE Editor/Codemirror using angularjs NodeJS to run and compile and execute it. if so kindly guide me how to achieve this..!!
Pavel Antonov
@pavel-antonov
Sep 13 2016 08:16
Somebody here? need some help
srseven
@srseven
Sep 13 2016 08:16
@pavel-antonov maybe i could help
Pavel Antonov
@pavel-antonov
Sep 13 2016 08:18

This is my codepen:

http://codepen.io/pavel-antonov/full/zBgZrw/

when you open it, you will see the navigation bar on the left, the problem is that is goes below the 1st element, do you know how can i put it above the container that says " Pavel Antonov -Free Code Camp etc ?

Also it will be awesome if you tell me, if i click on some section how to be redirected to that section
srseven
@srseven
Sep 13 2016 08:23
@pavel-antonov this will solve your both queries, here is the codepen link https://codepen.io/gamert/pen/bpLdpG
Pavel Antonov
@pavel-antonov
Sep 13 2016 08:28
thanks dude @srseven
CamperBot
@camperbot
Sep 13 2016 08:28
:cookie: 140 | @srseven |http://www.freecodecamp.com/srseven
pavel-antonov sends brownie points to @srseven :sparkles: :thumbsup: :sparkles:
buiphuking
@buiphuking
Sep 13 2016 09:22
i have a question: why codepen hasn't a tool like autocomplete html or autocomplete js or some kind like that ?????????????????
MangoKing-IV
@MangoKing-IV
Sep 13 2016 09:29
codepen keeps rearranging elements when i switch views
honesty1997
@Honesty1997
Sep 13 2016 09:49
Hello guys have some problems here
I am studying JSON Ajax kind of things.I found there are two ways to access the data.
use $.ajax{} or $.getJSON
Muhammad Hasham
@MohammadHasham
Sep 13 2016 09:50
Can anyone tell me why my media queries are not working
blob
honesty1997
@Honesty1997
Sep 13 2016 09:51
But I don't know the difference between two ways,or on what conditions i should use which one of them.
Mikail Bayram
@mikail1998
Sep 13 2016 10:07
http://codepen.io/mikail1998/pen/ozgXzb/ My clock worked perfectly up until I added new code. Afterwards I deleted the new stuff but still clock wont work on click
Stephen James
@sjames1958gm
Sep 13 2016 10:08
@mikail1998 pen.js:60 Uncaught ReferenceError: sec is not defined
Dmytro
@lomm28
Sep 13 2016 10:09

Hello! I am having a hard time with twitch tv streamers project. The problem is there are two accounts that were disabled/closed - brunofin and comster404. I want to update the picture for both of them, it is a question mark type of logo in my case but it only updates for one account. Could you please tell me what I am doing wrong?

http://codepen.io/lomm28/pen/RGNPxg

Muhammad Hasham
@MohammadHasham
Sep 13 2016 10:15
Can i increase the size of image upon certain pixels using media queries if yes, then how that can be down?
@sjames1958gm
Mikail Bayram
@mikail1998
Sep 13 2016 10:16
@sjames1958gm thank you
CamperBot
@camperbot
Sep 13 2016 10:16
mikail1998 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3250 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Sep 13 2016 10:22
@lomm28 one thing change your last if from !== null to } else if (data2["stream"]) { because undefined is also != null
Also change your first if from != undefined to if (channel_logo) { for the same reason
Dmytro
@lomm28
Sep 13 2016 10:24
@sjames1958gm Hi, Stephen! Thank you kindly! It worked! I appreciate that!
CamperBot
@camperbot
Sep 13 2016 10:24
lomm28 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3251 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Sep 13 2016 10:24
@lomm28 :+1:
Nagireddy Srichakradhar Reddy
@srichakradhar
Sep 13 2016 10:25
@lomm28 it seems someone has created a channel for brunofin https://www.twitch.tv/brunofin with no logo. that's the issue. change it to some other id and it work sfine
Muhammad Hasham
@MohammadHasham
Sep 13 2016 10:26
@media screen and (max-width : 600px)
{


    .picture_frame{width:70%;}
    .picture_frame{height: 70%;}
    .picture_frame{border-radius: 70%;}
    .picture_frame{margin-top: 85%;}
    .picture_frame{border:5px solid white;}
    .c1{font-size: 52vw;}
    .c2{font-size:2px;}
    #d1{font-size: 2vw;}
    #d2{font-size: 2vw;}
    #d3{font-size: 2vw;}
    .img-crop{padding-top: 50%;}
    .img-crop{max-height: 380px;}

}

The image-crop class is not working as i want to increase the height but it is not working whereas, the padding is working?

Can anyone tell me if i am doing something wrong?
@sjames1958gm

Dmytro
@lomm28
Sep 13 2016 10:26
@srichakradhar ok, thanks man. I will try that!
CamperBot
@camperbot
Sep 13 2016 10:26
lomm28 sends brownie points to @srichakradhar :sparkles: :thumbsup: :sparkles:
:cookie: 327 | @srichakradhar |http://www.freecodecamp.com/srichakradhar
Nagireddy Srichakradhar Reddy
@srichakradhar
Sep 13 2016 10:27
it says "This is a Justin.tv channel. It cannot be viewed on Twitch."
Sorin Ruse
@sorinr
Sep 13 2016 10:48
@MohammadHasham try .img-crop{min-height: 380px;}
Muhammad Hasham
@MohammadHasham
Sep 13 2016 10:50
@sorinr tried that but its not working!
anything else that could do that?
Muhammad Hasham
@MohammadHasham
Sep 13 2016 10:57
what are some common pixels for which i have to set media queries?
@sorinr @sjames1958gm
deepakSpatil
@deepakSpatil
Sep 13 2016 11:11
This message was deleted
ikechukwuhenry
@ikechukwuhenry
Sep 13 2016 11:13
how do i generate random numbers that change with each click of the button in javascript?
deepakSpatil
@deepakSpatil
Sep 13 2016 11:17
any one knows what is this d in this syntax ...i know e is the event but what is d...after logging it in console it returns sime numbers like -1 -2 1 etc....
toolbox.bind('mousewheel', function(e, d)
Joris Labie
@labiej
Sep 13 2016 11:23
@ikechukwuhenry you want to search javascript random numbers and javascript click event
First skill that you should learn is to search
Or as it's mentioned on FCC Read -> Search -> Ask
Unless you're in an office with other coders it's usually faster to google stuuf
huing
@huing
Sep 13 2016 11:26
有人知道shift+delete删除的文件怎么恢复吗,很重要的事情,谢谢
LenaSUI
@LenaSUI
Sep 13 2016 11:33

Hi, can someone please help me with my navigation bar button? It doesn't display the menu

http://codepen.io/LenaSUI/pen/bwVZom?editors=1000

vaso
@vasokir
Sep 13 2016 11:40
so i am trying to make a tribute page and i cant put the photo in the center of the page,all these are quite new to me so any help is appreciated thanks
Joris Labie
@labiej
Sep 13 2016 11:42
@MohammadHasham If you want absolute responsiveness I would say that using a framework is easiest. You can add dozens of queries and still miss some niche phones
LenaSUI
@LenaSUI
Sep 13 2016 11:45
@vasokir Can you send the link to your pen?
Joris Labie
@labiej
Sep 13 2016 11:45
@LenaSUI You'll need to include the bootstrap javascript here's an example you can compare your code with
Muhammad Hasham
@MohammadHasham
Sep 13 2016 11:46
@labiej i have done responsiveness but there are millions of brands with different screens so how can you implement media queries for each set of phones
LenaSUI
@LenaSUI
Sep 13 2016 11:48
@vasokir try adding class="center-block" to your image
Joris Labie
@labiej
Sep 13 2016 11:49
That's why it's useful to use bootstrap or another framework, they do it for you
vaso
@vasokir
Sep 13 2016 11:49
@LenaSUI thank you very much!
CamperBot
@camperbot
Sep 13 2016 11:49
vasokir sends brownie points to @lenasui :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @lenasui |http://www.freecodecamp.com/lenasui
Joris Labie
@labiej
Sep 13 2016 11:49
Especially in the beginning I would use one of those, to focus on the HTML side
vaso
@vasokir
Sep 13 2016 11:50
@LenaSUI are you Greek?
LenaSUI
@LenaSUI
Sep 13 2016 11:53
@labiej Thanks
CamperBot
@camperbot
Sep 13 2016 11:53
lenasui sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 452 | @labiej |http://www.freecodecamp.com/labiej
LenaSUI
@LenaSUI
Sep 13 2016 11:53
@vasokir You're welcome! No, I'm Swiss
vaso
@vasokir
Sep 13 2016 11:54
@LenaSUI Lena is also a name we have in Greece that's why i asked :)
LenaSUI
@LenaSUI
Sep 13 2016 11:56
@vasokir Aha okay ;)
Mark
@vinarius
Sep 13 2016 12:18

Any ideas why my getCurrentPosition won't render the html (latitude/longitude) on a desktop/laptop browser but shows on a mobile browser?

http://codepen.io/vinarius/pen/QKbZRp

oh maybe it's bc i have location services blocked. it works on here too.
Florencia
@flopywood
Sep 13 2016 12:26
@vasokir use bootstrap becuase HTML5 doesn't accept the <center> anymore
Sekamarques
@sekamarques
Sep 13 2016 12:28
hey, i was wondering how do i put little thumbnails with website previews in my portfolio
huing
@huing
Sep 13 2016 12:29
有人知道shift+delete删除的文件怎么恢复吗,很重要的事情,谢谢
Florencia
@flopywood
Sep 13 2016 12:44
@sekamarques take screenshots and save the images
kirbyedy
@kirbyedy
Sep 13 2016 12:53
@vinarius make sure your codepen starts with https:// otherwise you will have problems
Dany Din
@danydin
Sep 13 2016 12:55
why when i use vanilla html getElementByTagName i've to bind it with array [0] ?
CasiqueJhon
@CasiqueJhon
Sep 13 2016 13:03

Hello I need help with this
convertToF(0) should return a number
convertToF(-30) should return a value of -22
convertToF(-10) should return a value of 14
convertToF(0) should return a value of 32
convertToF(20) should return a value of 68
convertToF(30) should return a value of 86
my code

function convertToF(celsius) {
  var fahrenheit;
  // Only change code below this line

  // Only change code above this line
  return fahrenheit;
}

// Change the inputs below to test your code
convertToF(0);
convertToF(-30);
çconvertToF(-10);
convertToF(0);
convertToF(20);
convertToF(30);

pls someone

Chris Cullen
@123xylem
Sep 13 2016 13:04
http://codepen.io/123xylem/pen/JKqYZY
Please review my tictactoe Game!!
I know AI is dumb but programming that ai seemed out of my depth so far...
Michiel
@MichielHuijse
Sep 13 2016 13:09
@123xylem Congrats
You could use some awesome styling and fun design thinfies to spice it up, but it works intuitively, didn't look at the code :)
gemaderus
@gemaderus
Sep 13 2016 13:20
@CasiqueJhon you need the formule to convert to Fahrenheit: fahrenheit = celsius * 9/5 + 32;
Stephen Passero
@stephenpassero
Sep 13 2016 13:30
@123xylem it's very nice. Better than i could do. Just one problem. If you click really fast you can put 3 of your symbol on the board before the AI puts any symbols on.
Stephen Passero
@stephenpassero
Sep 13 2016 13:39
This message was deleted
@/all, why isn't this code posting a skycon on the page?
var icons = new Skycons({"color": "black"});

icons.set("clear-day", Skycons.CLEAR_DAY);
icons.set("clear-night", Skycons.CLEAR_NIGHT);
icons.set("partly-cloudy-day", Skycons.PARTLY_CLOUDY_DAY);
icons.set("partly-cloudy-night", Skycons.PARTLY_CLOUDY_NIGHT);
icons.set("cloudy", Skycons.CLOUDY);
icons.set("rain", Skycons.RAIN);
icons.set("sleet", Skycons.SLEET);
icons.set("snow", Skycons.SNOW);
icons.set("wind", Skycons.WIND);
icons.set("fog", Skycons.FOG);

icons.play();

$('#button').on('click', function() {
 if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {

   $.getJSON('https://api.forecast.io/forecast/b88b7b4d5a79e0d32f33fcb6f57f530a/' + position.coords.latitude + ',' + position.coords.longitude + '?callback=?', function(data) {

$('p').html(data['currently']['temperature'] + ' &deg;F'); 
     var icon = JSON.stringify(data['currently']['icon']);
     $('div').append('<canvas id=' + data['currently']['icon'] + ' width="66" height="66"></canvas>');
   })
  });
 }
})
CasiqueJhon
@CasiqueJhon
Sep 13 2016 13:41
@gemaderus I have it thanks
CamperBot
@camperbot
Sep 13 2016 13:41
:cookie: 271 | @gemaderus |http://www.freecodecamp.com/gemaderus
casiquejhon sends brownie points to @gemaderus :sparkles: :thumbsup: :sparkles:
Will White
@willnwhite
Sep 13 2016 13:45
How can I put images in my CodePen without paying to upgrade to Pro?
Stephen James
@sjames1958gm
Sep 13 2016 13:48
@willnwhite If you have dropbox you can put them there then link to them (you will have publicly share them)
CasiqueJhon
@CasiqueJhon
Sep 13 2016 13:48
@willnwhite images on your profile or a web site?
Stephen James
@sjames1958gm
Sep 13 2016 13:49
@willnwhite This is an image I saved to use for background.
https://www.dropbox.com/s/hbfjgtkfw3c23et/wood_background.jpg?raw=1
Will White
@willnwhite
Sep 13 2016 13:49
Thanks Stephen.
Stephen James
@sjames1958gm
Sep 13 2016 13:56
@willnwhite :+1:
@willnwhite If you make a link and copy the one they give you replace the part after ? with raw=1 to get it to load the actual image.
greg
@wearenotgroot
Sep 13 2016 13:58

@stephenpassero here try this
js part

var icons = new Skycons({"color": "black"});

//use an object for value lookup depending on the data received from the api
var icon_values = {
  "clear-day" : Skycons.CLEAR_DAY,
  "clear-night" : Skycons.CLEAR_NIGHT,
  "partly-cloudy-day" : Skycons.PARTLY_CLOUDY_DAY,
  "partly-cloudy-night" : Skycons.PARTLY_CLOUDY_NIGHT,
  "cloudy" : Skycons.CLOUDY,
  "rain" : Skycons.RAIN,
  "sleet" : Skycons.SLEET,
  "snow" : Skycons.SNOW,
  "wind" : Skycons.WIND,
  "fog" : Skycons.FOG,
}

$('#button').on('click', function() {
   if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {

       $.getJSON('https://api.forecast.io/forecast/b88b7b4d5a79e0d32f33fcb6f57f530a/' + position.coords.latitude + ',' + position.coords.longitude + '?callback=?', function(data) {
              console.log(data);
               $('p').html(data['currently']['temperature'] + ' &deg;F'); 
               //var icon = JSON.stringify(data['currently']['icon']);
               icons.set("icon1", icon_values[data['currently']['icon']]); //add to canvas (id="icon1") the result of the lookup
               icons.play(); //play animation
           });
      });
   }
});

and html

 <body>
   <script src="https://rawgithub.com/darkskyapp/skycons/master/skycons.js"></script><!--put this in the codepen js settings-->
   <canvas id="icon1" width="128" height="128"></canvas>
  <button id='button' class='btn'>Get weather</button>
</body>

you can probably put that script on the js settings in code pen

Hadouken
@Harry97
Sep 13 2016 14:02
Does anybody know why the code on line 63 if my JS fails to run?
http://codepen.io/Hadouken/pen/PGPpNL?editors=1010
I run the game and fill the whole first column but nothing happens
Will White
@willnwhite
Sep 13 2016 14:04
@sjames1958gm Thanks again. Why's that? Do you have a link to the docs?
CamperBot
@camperbot
Sep 13 2016 14:04
willnwhite sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3252 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Joris Labie
@labiej
Sep 13 2016 14:08
@Harry97 you have to check it every time you put in a mark, the current statement is evaluated when the document is loaded
Try entering "X"'s in the HTML as initial values
Will White
@willnwhite
Sep 13 2016 14:09
@sjames1958gm Found it: https://www.dropbox.com/help/201
Stephen James
@sjames1958gm
Sep 13 2016 14:09
@willnwhite :+1:
Hadouken
@Harry97
Sep 13 2016 14:10
@labiej oh got it, thanks man
CamperBot
@camperbot
Sep 13 2016 14:10
harry97 sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 453 | @labiej |http://www.freecodecamp.com/labiej
Lidia Wisniewska
@lidiawisniewska
Sep 13 2016 14:32
hi everyone! could you have a look at my weather app? im concerned that the js is not rigth
Stephen James
@sjames1958gm
Sep 13 2016 14:41
@lidiawisniewska Why do you think that - is it not performing as expected?
@lidiawisniewska Looked fine to me
greg
@wearenotgroot
Sep 13 2016 14:42
@lidiawisniewska yep it look :+1:
@lidiawisniewska you can reduce the amount if else if statement using object lookup
Lidia Wisniewska
@lidiawisniewska
Sep 13 2016 14:47
@sjames1958gm @wearenotgroot i got feedback that i shouldnt use https://crossorigin.me/ but in that case i would have to change the entire code
and different api; but wanted to seek some more feedback - not sure what to do
Stephen James
@sjames1958gm
Sep 13 2016 14:48
@lidiawisniewska For this type of project I am sure that is not a problem. If you had some real world application that needed this you would probably pay for the service and get https://
greg
@wearenotgroot
Sep 13 2016 14:49
@lidiawisniewska btw you can probably drop those if else statement if you arent using any other icons
$("#icon").html("<img src = 'http://openweathermap.org/img/w/"+data.weather[0].icon+".png'>");
KSPQ
@KSPQ
Sep 13 2016 14:52
checkbox checkd why turn gray
Lidia Wisniewska
@lidiawisniewska
Sep 13 2016 14:52
@wearenotgroot awesome! didn't know how to do that
@wearenotgroot thank you :)
CamperBot
@camperbot
Sep 13 2016 14:52
lidiawisniewska sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1649 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
greg
@wearenotgroot
Sep 13 2016 14:52

@lidiawisniewska basically is just concatenating string with variable value :smile:

data.weather[0].icon //<-----will give you icon name without the .png extension 01d...02d etc

so the only missing and changing part of the img src link

"<img src ='http://openweathermap.org/img/w/"  ...    ".png'>"
Theodore P.
@Ierofantis
Sep 13 2016 14:56
does anyone know why this bootstrap carousel is not working properly in my codepen?
https://codepen.io/Ierofantis/pen/XjXaBR
Lidia Wisniewska
@lidiawisniewska
Sep 13 2016 14:57
@wearenotgroot aaa just like lon and lat
!
greg
@wearenotgroot
Sep 13 2016 14:57
@lidiawisniewska :+1:
@Ierofantis you need bootstrap min js. go to the quick add on the js settings and add bootstrap.min.js(remember jquery is first then the rest ...)
Theodore P.
@Ierofantis
Sep 13 2016 15:01
@wearenotgroot I added it and ti remains the same
greg
@wearenotgroot
Sep 13 2016 15:03
@Ierofantis it's working here
@Ierofantis try lowering the interval ---> 5000
Theodore P.
@Ierofantis
Sep 13 2016 15:05
@wearenotgroot yup you are right the animation is ok now but it is not like that http://bootsnipp.com/snippets/featured/thumbnail-carousel but a bunch of pictures on above the other
I cant understand why this is happening
:/
greg
@wearenotgroot
Sep 13 2016 15:16
@Ierofantis try chaning the class of div that has span3 to col-xs-#
<div class="container">
  <div class="row">
    <div class="span12">
      <div class="well">
        <div id="myCarousel" class="carousel slide">

          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
          </ol>

          <!-- Carousel items -->
          <div class="carousel-inner">

            <div class="item active">
              <div class="row-fluid">
                <div class="col-xs-3">  <!--changed from span3 to col-xx-#  -->
                  <a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a>
                </div>
                <div class="col-xs-3">
                  <a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a>
                </div>
                <div class="col-xs-3">
                  <a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a>
                </div>
                <div class="col-xs-3">
                  <a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a>
                </div>
              </div>
              <!--/row-fluid-->
            </div>
            <!--/item-->

    ....
</div>
@Ierofantis the # on col-xs-# means an actual number so as an example col-xs-3
Theodore P.
@Ierofantis
Sep 13 2016 15:23
@wearenotgroot :) many thanks now it is working
CamperBot
@camperbot
Sep 13 2016 15:23
ierofantis sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1650 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
Theodore P.
@Ierofantis
Sep 13 2016 15:23
thank you for your effort
greg
@wearenotgroot
Sep 13 2016 15:24
@Ierofantis :+1:
Chapungu
@Chapungu
Sep 13 2016 15:34
hey guys, i'm trying to creat a form that will put other peoples comments on my tribute page, can anyone advise me on how to do this?
I've put my form in but have no idea how to get it to post to my page in the comments section,

div class="col-md-4 box"><h2>Comments</h2><p id="Comments"></p></div>
</div>
</div>

<div class="row">
<h3>Your comments.</h3>
<form formaction="#comments">
<input class="row" input-type="text">
</input>
<button type="submit">Comment</button>
</form>
</div>

here is my poor attempt
Tyler Moeller
@TylerMoeller
Sep 13 2016 15:55
@Chapungu Unfortunately, you can't have comments from multiple people show up on your web page unless you write the comments to a database. Any comments left will be cleared whenever the page is refreshed. If you just want a person to see their own comments and have them disappear after a page refresh, post a link to your pen to help give better guidance.
ikechukwuhenry
@ikechukwuhenry
Sep 13 2016 16:03
@labiej thanks. I have read it used it applied it but every time I use the click function the random number goes back to the former one
CamperBot
@camperbot
Sep 13 2016 16:03
ikechukwuhenry sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 454 | @labiej |http://www.freecodecamp.com/labiej
Ayman Moawad
@aykamal2016
Sep 13 2016 16:47
I have a question , where can I host the image for the first project
Islam Ibakaev
@dagman
Sep 13 2016 16:49
guys i have opened an issue will be glad if you can help mjackson/history#366
cameron nicklaus
@camnicklaus
Sep 13 2016 16:50
@aykamal2016 you could try cloudinary
@aykamal2016 that's what I used for my tribute page...someone else commented that you can use drop box too
Tyler Moeller
@TylerMoeller
Sep 13 2016 16:56
@aykamal2016 Most people use: https://postimage.org/
KIMoFyTheDev
@KIMoFyTheDev
Sep 13 2016 16:57
I don't have enough time to learn code anymore
I have school from 7:30 to 4:30
Plus one hour travel time (each trip)
I guess I'll just get Adobe Muse and make my website from there
What do you think of Adobe Muse?
Ayman Moawad
@aykamal2016
Sep 13 2016 17:02
@camnicklaus how can i reference the uploaded image in my code
cameron nicklaus
@camnicklaus
Sep 13 2016 17:03
@aykamal2016 well...once you get it hosted somewhere, i.e. cloudinary...there will be a URL for your image...that's literally what you use
tibymike
@tibymike
Sep 13 2016 17:04
hello; how can i put an image in the center of the screen?
cameron nicklaus
@camnicklaus
Sep 13 2016 17:13
@tibymike that question may be a bit too broad...maybe do some googling to try to narrow it down?
Ayman Moawad
@aykamal2016
Sep 13 2016 17:26
@camnicklaus thanks a lot
CamperBot
@camperbot
Sep 13 2016 17:26
aykamal2016 sends brownie points to @camnicklaus :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @camnicklaus |http://www.freecodecamp.com/camnicklaus
cameron nicklaus
@camnicklaus
Sep 13 2016 17:27
@aykamal2016 :+1:
Ayman Moawad
@aykamal2016
Sep 13 2016 17:28
how to send brownie points @camnicklaus
cameron nicklaus
@camnicklaus
Sep 13 2016 17:29
@aykamal2016 you did when you said thanks!
CamperBot
@camperbot
Sep 13 2016 17:29
camnicklaus sends brownie points to @aykamal2016 :sparkles: :thumbsup: :sparkles:
:cookie: 112 | @aykamal2016 |http://www.freecodecamp.com/aykamal2016
Ayman Moawad
@aykamal2016
Sep 13 2016 17:29
thanks @TylerMoeller
CamperBot
@camperbot
Sep 13 2016 17:29
aykamal2016 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 830 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Hanifah Walidah
@hackyourcraft
Sep 13 2016 17:29
CSS/Bootstrap Question: I have images that are different sizes thus creating different sized thumbnails. How do I optimize the class="thumbnail" to create a fixed size for any size image? My code as is:
<div class="col-lg-4 col-sm-6">
            <div class="thumbnail">
<!-- small image-->
                <img src="assets/img/tbp-logo.png">
            </div>
        </div>
        <div class="col-md-4 col-sm-6">    
            <div class="thumbnail">
<!-- bigger image-->
                <img src="assets/img/hexs/hex.png">
            </div>
        </div>
cameron nicklaus
@camnicklaus
Sep 13 2016 17:31
@hackyourcraft I'm still pretty new but what I found helpful was to literally set the image size first...as an attribute in the tag...if that makes any sense
set it to be the max you'd ever want it to be on any screen and then style it from there
Joffrey Nolting
@Yovvel
Sep 13 2016 17:32
@hackyourcraft
.thumbnail {
    height: 100px;
    width: 100px;
}
change the number of px to the size you need
Hassen Rmili
@hassenrmili
Sep 13 2016 17:36
@Yovvel @camnicklaus @hackyourcraft @camnicklaus @camnicklaus @aykamal2016 how to convert multidimensional array to single
Joffrey Nolting
@Yovvel
Sep 13 2016 17:40

@hassenrmili

var myNewArray = [].concat.apply([], myArray);

does that do the trick?

@hassenrmili place it in a for loop
Hassen Rmili
@hassenrmili
Sep 13 2016 17:44
@Yovvel for (var i = 0; i < forever; i++) ???
Joffrey Nolting
@Yovvel
Sep 13 2016 17:45
@hassenrmili
something like this:
for (i=0;  i <  array.length ;i++)
Robert
@Brayn7
Sep 13 2016 18:11
anyone here know react well enough to answer some questions?
Tyler Moeller
@TylerMoeller
Sep 13 2016 18:18
@hassenrmili This would be a good refresher for you: https://www.freecodecamp.com/challenges/steamroller
vaso
@vasokir
Sep 13 2016 18:38
@flopywood thank you very much
CamperBot
@camperbot
Sep 13 2016 18:38
vasokir sends brownie points to @flopywood :sparkles: :thumbsup: :sparkles:
:cookie: 342 | @flopywood |http://www.freecodecamp.com/flopywood
sfmajors373
@sfmajors373
Sep 13 2016 18:42
Hi guys! So, I've been working on the quote generator and finally got the button to get a quote working. Now, the tweet it button seems to have broken everything and it won't even render. If anyone has a chance, can you look and see what I screwed up? https://codepen.io/sfmajors/pen/bwbPqG?editors=0010
Tyler Moeller
@TylerMoeller
Sep 13 2016 18:48
@sfmajors373 You need a closing bracket on your tweet() function (Line 27)
sfmajors373
@sfmajors373
Sep 13 2016 18:51
@TylerMoeller You are amazing! I have spent forever looking for a hanging brace or parenthesis
Tyler Moeller
@TylerMoeller
Sep 13 2016 18:53
@sfmajors373 Glad that helped. For your tweet button, It will be easiest to change the <button> to a <a> and just add a href attribute with the URL you want rather than playing around with window.open. You'll be able to build the URL in your getQuote function without having to worry about passing the randomQuote variable to another function.
sfmajors373
@sfmajors373
Sep 13 2016 18:54
Ohhh, That's a good idea! I'll try that instead Thanks!
Tyler Moeller
@TylerMoeller
Sep 13 2016 18:54
Another tip: To find missing closing brackets, click the down arrow on the top, right hand corner of your JS window in codepen and choose "Analyze JS"
sfmajors373
@sfmajors373
Sep 13 2016 18:56
That would be a lifesaver. I was beginning to wonder if I would have to yank my code and shove it in vim to have it show me my missing things
Bryce
@BryceV
Sep 13 2016 18:58
Hey all! Working on my portfolio page and was wondering if anyone had any advice plugging in the linkedin/facebook/contact me links?
Also, it has been a while since I looked at this code and I am noticing a lot of random stylesheet calls. I believe I added the sheets because that's what they did in the example video but now its cluttering up my code. Is there a way to determine which ones are used?
U-ways
@U-ways
Sep 13 2016 19:00

@BryceV

<a href="Your_profile_url_here">Text Goes Here</a>

More about HTML Links - Hyperlinks: http://www.w3schools.com/html/html_links.asp

vaso
@vasokir
Sep 13 2016 19:02
hello!!i'm working on a tribute page and i want to put text on an image,can someone tell me how?
Bryce
@BryceV
Sep 13 2016 19:03
Well, it's more than making a linking text. Its more like what this guy does on the top of his page. https://codepen.io/ThiagoFerreir4/full/eNMxEp/
Tyler Moeller
@TylerMoeller
Sep 13 2016 19:07
@BryceV Delete each reference to a css file, one by one, and see how it affects your page. From what I see, you can remove your reference to main.css and bootstrap.min.css. Main.css won't load because it's looking for https://codepen.io/justcallmebob/pen/mEgxoq/main.css (which doesn't exist). You also already have bootstrap.min.css added in your codepen settings - you only need to reference it once. For facebook/linkedin/etc... check out http://fontawesome.io/icons/ for icons and for an example of adding icons to buttons with bootstrap, see: http://fontawesome.io/examples/#bootstrap
Bryce
@BryceV
Sep 13 2016 19:09
@TylerMoeller Good stuff! I will take a look at it.
sfmajors373
@sfmajors373
Sep 13 2016 19:23
@TylerMoeller Just a question. If I am using a <a> instead of a button with a web.open, is this how I would enter the href to open the webpage with the quote in it?
<a id = "twitter-share-button" class = "btn btn-custom btn-lg" href = ("https://twitter.com/intent/tweet?text=" + randomQuote) target = "_blank">
        Twitter   <i class="fa fa-twitter" aria-hidden="true"></i></a>
Zheng
@FireFalcon1155
Sep 13 2016 19:28
guys i'm stuck on Mutations. it is a function that accepts an array. array0 is the original string and array1 is the test subject. all letters in test subject gotta be in the original string. can someone tell me the steps?
Tyler Moeller
@TylerMoeller
Sep 13 2016 19:45
@sfmajors373 you'll need to add the href to the URL dynamically with your JavaScript rather than adding js to your html. Here's how to do it: http://stackoverflow.com/questions/4689344/how-can-i-add-href-attribute-to-a-link-dynamically-using-javascript
Bryce
@BryceV
Sep 13 2016 20:05
@TylerMoeller Hey Tyler, If I am copying and pasting in symbols from that site (like <i class="fa fa-linkedin-square" aria-hidden="true"></i>), is there any style sheet I need to link to? It doesn't seem to be working.
Bryce
@BryceV
Sep 13 2016 20:11
@TylerMoeller I sort of figured it out. The get-started page told me to add
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> but I actually had to add <script src="https://use.fontawesome.com/3533cc454b.js"></script>
Do you know if both are required?
Rada
@Radascript
Sep 13 2016 20:13
hey guys what's the mod room called?
Ken Haduch
@khaduch
Sep 13 2016 20:19
@Radascript - the admin room? https://gitter.im/FreeCodeCamp/admin
Rada
@Radascript
Sep 13 2016 20:19
Thank you @khaduch
CamperBot
@camperbot
Sep 13 2016 20:19
radascript sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1675 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Sep 13 2016 20:20
@Radascript - you're welcome - hope that's the correct room?
Rada
@Radascript
Sep 13 2016 20:24
it is!
Cameron Burkholder
@Cameron-Burkholder
Sep 13 2016 20:36
Can anyone find why my Twitch API isn't working? It has something to do with the code inside the second $.getJSON call but I can't figure out what.
I'm trying to output the results of an api call for FCC's follwers into a followers array, but it isn't pushing.
Stacey Landrum
@staceyland
Sep 13 2016 20:40
Hi I need help with my tribute page. The "Career" paragraph does want to justify for some reason. I also need help keeping the pictures and well from overlaying the text on small devices. Here is my page https://codepen.io/staceyland/pen/yaZQYq
Cameron Burkholder
@Cameron-Burkholder
Sep 13 2016 20:46

@staceyland, you have your p tag as

align="justified"

which as far as I know isn't a thing. If you want to fix it, all you have to do is add an inline style like this:

<p style="text-align: justify">. . .</p>
That should fix it
John F Kirkpatrick
@jfkirkpatrick
Sep 13 2016 20:48
I have almost completed Build Random Quote Machine with the exception of creating a Tweet to my twitter account. I have Googled search until I have a headache. Especially, Twitter does not have the simplest solution. The Google soluIation is a broken link. I have yet to search Google. I do not want the code just a suggestion as where to find the best solution. Thank you for your help. john
bkd705
@bkd705
Sep 13 2016 20:50
who wants help im bored in math class
Cameron Burkholder
@Cameron-Burkholder
Sep 13 2016 20:50
I could use some help with twitter API @bkd705
bkd705
@bkd705
Sep 13 2016 20:50
cools whatsup
John F Kirkpatrick
@jfkirkpatrick
Sep 13 2016 20:54
i could use help also with the twittter api
Cameron Burkholder
@Cameron-Burkholder
Sep 13 2016 20:55

I meant the TWITCH api. So, I have everything set up the way it should be (as far as I know) but I decided to go a little further by getting FCC's followers by requesting them from the API, instead of hardcoding them in. That is what the second

$.getJSON

call does. The only problem is that nothing inside that call is working. No alert's, no console.log()'s, nothing. Inside that call, I access the JSON for every person FCC follows, and I push them to an array called followers. When I console.log() that array after the JSON call has run, it outputs an empty array. Someone said it had to do with the url I used, but that outputs the json correctly.

@bkd705
bkd705
@bkd705
Sep 13 2016 21:04
its because the variable "followers" is staying local to the block I think
if you call console.log(followers) inside the getJSON function
it logs the followers
oh you said that already lmfao
alright lemme try and fix it
Cameron Burkholder
@Cameron-Burkholder
Sep 13 2016 21:06
Thanks. I can't believe I made a scope mistake. Smh @bkd705
CamperBot
@camperbot
Sep 13 2016 21:06
cameron-burkholder sends brownie points to @bkd705 :sparkles: :thumbsup: :sparkles:
:cookie: 280 | @bkd705 |http://www.freecodecamp.com/bkd705
bkd705
@bkd705
Sep 13 2016 21:07
what are you trying to do with the followers? if you just do it inside that getjson function you should be fine anyways tbh
im not like SUPEERR experienced with javascript tho
ive used to a lot and done a lot of backend with it but yknow, its a super complex language that confuses me a lot sometimes
@jfkirkpatrick what do you need help with man? :P
Robert
@Brayn7
Sep 13 2016 21:09
http://codepen.io/Brayn/pen/amvYPm?editors=0110
could be a dumb "?", but if someone could point me in the right direction to mesh my react component with my jquery based module that would be great. or a link or material of how i would possibly write that module in react, which would be better.
can someone help with my tictactoe game
Robert
@Brayn7
Sep 13 2016 21:11
@mpettaw2 what you need help with in particular?
melisa pettaway
@mpettaw2
Sep 13 2016 21:11
for some reason whether my if statement returns true or false the loop exits
and that's not what i want.
Robert
@Brayn7
Sep 13 2016 21:12
@mpettaw2 what line?
melisa pettaway
@mpettaw2
Sep 13 2016 21:12
49 to 56
Michael Bomholt
@bomholtm
Sep 13 2016 21:16
having problems with my calculator layout. how do set the width of span elements to 25% so they align themselves nicely in a div (4 in a row then 4 in the next row..)? if i set the width to 25% only 3 fit into 1 row... basically i have to set it to 24%
Robert
@Brayn7
Sep 13 2016 21:16
@mpettaw2 might hafta pm you on that
@bomholt padding? margin?
John F Kirkpatrick
@jfkirkpatrick
Sep 13 2016 21:17
@bkd705 I need direction to completing the Random Quote Machine when it comes to sending a tweet. I have done all the rest. When I read the Twitter API documentation I get a headache and they seem to offer several options. I am curious if the is a "simple solution"?? Thx John
CamperBot
@camperbot
Sep 13 2016 21:17
jfkirkpatrick sends brownie points to @bkd705 :sparkles: :thumbsup: :sparkles:
:cookie: 281 | @bkd705 |http://www.freecodecamp.com/bkd705
bkd705
@bkd705
Sep 13 2016 21:19
@jfkirkpatrick do you have it on codepen?
U-ways
@U-ways
Sep 13 2016 21:19
@bomholt Keep in mind that paddings and margins affect the width of an element as well. (might be a minor interference)
bkd705
@bkd705
Sep 13 2016 21:20
ill be back, i can help if you throw it up on codepen, got a 15 minute break aha
U-ways
@U-ways
Sep 13 2016 21:21
@jfkirkpatrick Yes, the easiest way to use the tweeter API is by using the web intents: https://dev.twitter.com/web/intents
A snippet example: (not working by itself)
$("#tweet-quote").attr("href", "https://twitter.com/intent/tweet?button_hashtag=quote&text=" + encodeURIComponent("\"" + currentQuote + "\" -" + currentAuthor));
    }); //The encodeURIComponent() function encodes a URL characters to be URL friendly characters.
Stacey Landrum
@staceyland
Sep 13 2016 21:22
@Cameron-Burkholder thanks! any advice on the pictures overlaying the text?
CamperBot
@camperbot
Sep 13 2016 21:22
staceyland sends brownie points to @cameron-burkholder :sparkles: :thumbsup: :sparkles:
:cookie: 377 | @cameron-burkholder |http://www.freecodecamp.com/cameron-burkholder
Robert
@Brayn7
Sep 13 2016 21:22
@mpettaw2 see if making your random number multiplied by 9 instead of 10 helps. 0-10 would be 11 items and 0-9 would be 10 items.
melisa pettaway
@mpettaw2
Sep 13 2016 21:22
@Brayn7 ok
Robert
@Brayn7
Sep 13 2016 21:23
@mpettaw2 i played one game thru after changing that. does the problem happen everytime?
melisa pettaway
@mpettaw2
Sep 13 2016 21:23
i thought that random generates a number up to the identified number but not the actual number
no.
it doesn't happen everytime. it depends if random repeats
John F Kirkpatrick
@jfkirkpatrick
Sep 13 2016 21:23
I went off line to do it as my codepen skills are minimal so I will have to transfer my NetBeans IDE (Old habits are hard to break!!) code over to codepen and give you the url. Maybe tomorrow or later tonite. I will reply to you prior message when ready. Thx for offering. John
melisa pettaway
@mpettaw2
Sep 13 2016 21:23
*it
Robert
@Brayn7
Sep 13 2016 21:24
@mpettaw2 ill keep testing. random generates a random float number .00 - .99 or something like that.
U-ways
@U-ways
Sep 13 2016 21:24
@jfkirkpatrick That's what I do, I use my fav IDE then copy and paste code to web-based IDEs haha.
melisa pettaway
@mpettaw2
Sep 13 2016 21:24
yeah. but i ran it through floor so it can always round down. that way i won't hit 10
Robert
@Brayn7
Sep 13 2016 21:25
@mpettaw2 also i put a break in your code too.
if(Boolean(randomSpaces.text())===false){
           randomSpaces.append(player2);
           break;
         }
U-ways
@U-ways
Sep 13 2016 21:25
@Brayn7 Use a for loop to quickly print a test!
melisa pettaway
@mpettaw2
Sep 13 2016 21:25
done
Robert
@Brayn7
Sep 13 2016 21:26
@U-ways ok, for what exactly? for random?
melisa pettaway
@mpettaw2
Sep 13 2016 21:26
forget what i said about *10 i forgot that index starts at 0 i changed it to 9
U-ways
@U-ways
Sep 13 2016 21:28
@Brayn7 Were you trying to do an "external" random test? to see the results of Math.random for .00 - .99?
You could do that using a for loop instead of manually running test lots of time.
Robert
@Brayn7
Sep 13 2016 21:28
@U-ways oh ok!
@mpettaw2 ok i didnt solve your problem i think its gunna take a little time to read your code and figure it out
John F Kirkpatrick
@jfkirkpatrick
Sep 13 2016 21:29
@U-ways Thx
CamperBot
@camperbot
Sep 13 2016 21:29
jfkirkpatrick sends brownie points to @u-ways :sparkles: :thumbsup: :sparkles:
:cookie: 399 | @u-ways |http://www.freecodecamp.com/u-ways
melisa pettaway
@mpettaw2
Sep 13 2016 21:29
:)
the craziness....muhaha...
Robert
@Brayn7
Sep 13 2016 21:29
@mpettaw2 until then try using a for loop instead
U-ways
@U-ways
Sep 13 2016 21:30
@jfkirkpatrick Welcome!
melisa pettaway
@mpettaw2
Sep 13 2016 21:30
ok cool
i did the for loop. played it 3 times and did not get any issues with the game stopping when random repeats
i would create an external for loop to test the game but.... im lazy
thank you @Brayn7 and @U-ways
CamperBot
@camperbot
Sep 13 2016 21:34
mpettaw2 sends brownie points to @brayn7 and @u-ways :sparkles: :thumbsup: :sparkles:
:cookie: 400 | @u-ways |http://www.freecodecamp.com/u-ways
:cookie: 335 | @brayn7 |http://www.freecodecamp.com/brayn7
U-ways
@U-ways
Sep 13 2016 21:35
@mpettaw2 Welcome good luck!
Alex
@alexdemilto
Sep 13 2016 21:55
Hi. I have just come to 'Build a Tribute Page' and feel very unprepared to begin this challenge. Can anyone let me know where to begin? Does anyone know where I can find some nice libraries/APIs?
On a related note, can anyone suggest good books or other reading materials that give me background reading on beginning to code? I know relatively nothing and would like to change that. Thanks!
U-ways
@U-ways
Sep 13 2016 22:00
@alexdemilto Did you do all of HTML/CSS challenges?
Alex
@alexdemilto
Sep 13 2016 22:01
@U-ways I've done 1-117, right up until this build a tribute page challenge
U-ways
@U-ways
Sep 13 2016 22:01
@alexdemilto If they weren't enough (They weren't for me) Have a quick read here:
w3schools HTML: http://www.w3schools.com/html/default.asp
w3schools CSS: http://www.w3schools.com/css/default.asp
Coy Sanders
@coymeetsworld
Sep 13 2016 22:02
@alexdemilto its going to be a little more demanding, but it can be done with what you learned
I would recommend using Bootstrap for this project to lay everything out. Tribute isn't too fancy you just need an image and some text
Alex
@alexdemilto
Sep 13 2016 22:02
@U-ways Thank you. I will check those out
CamperBot
@camperbot
Sep 13 2016 22:02
:cookie: 403 | @u-ways |http://www.freecodecamp.com/u-ways
alexdemilto sends brownie points to @u-ways :sparkles: :thumbsup: :sparkles:
U-ways
@U-ways
Sep 13 2016 22:03
@alexdemilto and Yes, as @coymeetsworld said, it is possible to do it with what you learned.
@alexdemilto Alright, goodluck! They teach you the same stuff there so they're no more than just a reference and a quick revision.
Alex
@alexdemilto
Sep 13 2016 22:04
@coymeetsworld Thank you, that's good to know. I just feel like I went through those challenges semi quickly and I can't remember everything I did. Should I go back to see the code or is there something I can reference instead?
CamperBot
@camperbot
Sep 13 2016 22:04
alexdemilto sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1380 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Coy Sanders
@coymeetsworld
Sep 13 2016 22:05
you could if you wanted @alexdemilto, if you go to your homepage it will show you all the challenges you completed and solutions
i would just check maybe the last few since thats the cumulative work of all the lessons
Also if you use BootStrap their homepage has good documentation: http://getbootstrap.com/
theres alot of bells and whistles but main thing would be looking at the grid layout and how to put an image on
you don't need no buttons or drop down menus or any of that
Alex
@alexdemilto
Sep 13 2016 22:08
Awesome, thank you @coymeetsworld
CamperBot
@camperbot
Sep 13 2016 22:08
alexdemilto sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:warning: alexdemilto already gave coymeetsworld points
Coy Sanders
@coymeetsworld
Sep 13 2016 22:08
np @alexdemilto good luck!
also don't worry about it being perfect either, just try to get the User Stories done
you can always go back and polish it up when you learn and work on more
thats what I did as I was progressing
Alex
@alexdemilto
Sep 13 2016 22:11
ok - I'll give it a try! @coymeetsworld
miriam-z
@miriam-z
Sep 13 2016 22:23
new to bootstrap 4 and wanted some help with the following
how to change the position of the collapsible content?
as I would like to have the nabber-brand on the left and the toggle on the left
at the moment when I am trying this the collapse breaks before dropping down which is not right
miriam-z
@miriam-z
Sep 13 2016 22:32
<nav class="navbar navbar-light bg-faded">
    <a class="navbar-toggler pull-xs-right" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">
        &#9776;
    </a>
    <a class="navbar-brand" href="#">Fixed bottom</a>
    <div class="collapse" id="exCollapsingNavbar">
        <div class="bg-inverse p-a-1">
            <h4>Collapsed content</h4>
            <span class="text-muted">Toggleable via the navbar brand.</span>
        </div>
    </div>
</nav>
this is code I am using which is just default from the website except for the addition of the nabber-brand
I have solved this now!
U-ways
@U-ways
Sep 13 2016 22:38
@miriam-z Great job :P Almost went for it :P Goodluck!
Florencia
@flopywood
Sep 13 2016 22:39
@miriam-z have you tried with CSS???
miriam-z
@miriam-z
Sep 13 2016 22:39
just in case anyone wants to ever solve the same problem you would need to change the float on navbar-brand to none :)
@flopywood yes it was the float! thanks
CamperBot
@camperbot
Sep 13 2016 22:42
miriam-z sends brownie points to @flopywood :sparkles: :thumbsup: :sparkles:
:cookie: 343 | @flopywood |http://www.freecodecamp.com/flopywood
Janina Pohorecki
@janepohorecka
Sep 13 2016 23:07
Hey guys! I have a quesiton concerning flex boxes. How do I have a maximum of two flex items per row?
vínαч puppαl
@vinaypuppal
Sep 13 2016 23:09
@janepohorecka use flex-wrap:warp on container and on child's specify width: 50%
vínαч puppαl
@vinaypuppal
Sep 13 2016 23:10
@janepohorecka if u need some gutter between child's give them margin: 10px and width: calc(50% - 20px)
Janina Pohorecki
@janepohorecka
Sep 13 2016 23:12
@vinaypuppal thank you. How do I get it to show one item per row when I am under a certain display pixel size?
CamperBot
@camperbot
Sep 13 2016 23:12
janepohorecka sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 516 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
vínαч puppαl
@vinaypuppal
Sep 13 2016 23:12

@janepohorecka https://css-tricks.com/snippets/css/a-guide-to-flexbox/

@janepohorecka @flopywood that's a nice reference and http://flexbox.io is also a good resource to learn

@janepohorecka give child full width of 100% and use media queries to do that for particular screen sizes
@janepohorecka and dont forget flex-wrap on container
Janina Pohorecki
@janepohorecka
Sep 13 2016 23:17
Ok :+1: Thank you Vinay. I am very grateful for your help.
Michael Bomholt
@bomholtm
Sep 13 2016 23:17
@Brayn7 @U-ways sorry i had to leave ... no padding and margi involved. oly some weird whitespace
vínαч puppαl
@vinaypuppal
Sep 13 2016 23:17
@janepohorecka
  • width: calc(33.3% - 20px) gives 3 items per row
  • width: calc(50% - 20px) gives 2 items per row
  • width: calc(100% - 20px) gives 1 items per row
    and use media queries to control for diff screen sizes
Janina Pohorecki
@janepohorecka
Sep 13 2016 23:18
@vinaypuppal Thank you so much Vinay :)
CamperBot
@camperbot
Sep 13 2016 23:18
janepohorecka sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: janepohorecka already gave vinaypuppal points
Michael Bomholt
@bomholtm
Sep 13 2016 23:19
http://codepen.io/bomholt/full/WGbVQA how is it that i cant do spans with 25% width?
only 3 fit in a row with 25%... there is some weird white space but no margin or padding
Kyle W Pilkinton
@tadake
Sep 13 2016 23:21
Hey anyone willing to help me figure out a name for my portfolio page domain ?
vínαч puppαl
@vinaypuppal
Sep 13 2016 23:24
@bomholt do float: left on span it solves that issue
but i dont know why you got that spacing
Michael Bomholt
@bomholtm
Sep 13 2016 23:24
@tadake i think best way to go is firstnamelastname.com
Kyle W Pilkinton
@tadake
Sep 13 2016 23:25
kylepilkinton.com ? @bomholt XD so I'm planning on changing my last name in a year lol
Michael Bomholt
@bomholtm
Sep 13 2016 23:26
@vinaypuppal thank you why didn't i thought of that :D
CamperBot
@camperbot
Sep 13 2016 23:26
bomholt sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 517 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Wesley Schulte
@WesSchulte
Sep 13 2016 23:26
can somebody help me with making my blue background fill the entire page?
vínαч puppαl
@vinaypuppal
Sep 13 2016 23:26
@bomholt but its weird why you that spacing before ??
Michael Bomholt
@bomholtm
Sep 13 2016 23:27
@vinaypuppal i had it on 24% because 25% would only allow 3 in a row ^^
now i only need to figure out how to make a bootstap column 100% height :)
U-ways
@U-ways
Sep 13 2016 23:29
@bomholt You can also have your .keys background-color: red
Michael Bomholt
@bomholtm
Sep 13 2016 23:29
@tadake thats to bad ... i mean congratulation :smile:
@U-ways ?
vínαч puppαl
@vinaypuppal
Sep 13 2016 23:30
@bomholt oh okay and for height use
min-height: 100vh to get full height div
Kyle W Pilkinton
@tadake
Sep 13 2016 23:30
yep gettin adopted. @bomholt should I use my current first then last or the one Ill be getting in a year?
Michael Bomholt
@bomholtm
Sep 13 2016 23:30
@vinaypuppal is vh supported on every major browser nowadays?
vínαч puppαl
@vinaypuppal
Sep 13 2016 23:31
@bomholt only operamini has no support
Michael Bomholt
@bomholtm
Sep 13 2016 23:32
@tadake hahah i am cleaning up and didnt even see your photo and thought you are a girl getting married ... like just being engaged
vínαч puppαl
@vinaypuppal
Sep 13 2016 23:32
@WesSchulte u have closed few tags incorrectly check them first
Kyle W Pilkinton
@tadake
Sep 13 2016 23:33
XD ehhh close enough hahahaha @bomholt
Michael Bomholt
@bomholtm
Sep 13 2016 23:33
@tadake not sure what to do then. there are endless options. firstlast.com just seems the most common
U-ways
@U-ways
Sep 13 2016 23:33
@U-ways You can hide that spacing by using the same background colour for .keys I tried everything could not get rid of that space Xd
vínαч puppαl
@vinaypuppal
Sep 13 2016 23:34
@WesSchulte you want blue gradient to be for particular section on your page or full body of page

@U-ways

@bomholt do float: left on span it solves that issue
but i dont know why you got that spacing before

Kyle W Pilkinton
@tadake
Sep 13 2016 23:34
ahh ok hahaha worst case Ill just change my websites domain haha. @bomholt thanks!
CamperBot
@camperbot
Sep 13 2016 23:34
tadake sends brownie points to @bomholt :sparkles: :thumbsup: :sparkles:
:cookie: 553 | @bomholt |http://www.freecodecamp.com/bomholt
Michael Bomholt
@bomholtm
Sep 13 2016 23:34
@U-ways colors are just to show layout stuff at this point =) just setting up the layout..
U-ways
@U-ways
Sep 13 2016 23:35
@vinaypuppal Yess Flex boxes can do the same, but the spacing mystery :P
@bomholt Oh alright!! I will get back to you one day if I managed to fix that spacing haha
vínαч puppαl
@vinaypuppal
Sep 13 2016 23:35
@U-ways yeah but he is not using flexbox so float: left solves that issue and he later told he has span of width 24% i think thats why he got whitespace
U-ways
@U-ways
Sep 13 2016 23:36
@vinaypuppal Yes! But clac(25% - 1px) Doesn't work for some reason. and there is no padding or margins.
vínαч puppαl
@vinaypuppal
Sep 13 2016 23:38
@U-ways oh okay
U-ways
@U-ways
Sep 13 2016 23:38
@vinaypuppal Is it because it's an inline-block?
Michael Bomholt
@bomholtm
Sep 13 2016 23:38
@vinaypuppal is it possible to do something like 100vh - 242px?
@U-ways i dont understand the problem lol
vínαч puppαl
@vinaypuppal
Sep 13 2016 23:39
@U-ways flexbox makes life easier, i did not used floats or inline-blocks till now in my designs . So dont know whats happening
Michael Bomholt
@bomholtm
Sep 13 2016 23:39
which spacing? everything should be fixed
U-ways
@U-ways
Sep 13 2016 23:40
@bomholt I am fighting with your old codepen :P
vínαч puppαl
@vinaypuppal
Sep 13 2016 23:40
@bomholt yes use css calc function like calc(100vh - 242px)
U-ways
@U-ways
Sep 13 2016 23:40
@vinaypuppal Yess I do too. Oh well thanks for the helping out!
CamperBot
@camperbot
Sep 13 2016 23:41
:cookie: 518 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
u-ways sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
Michael Bomholt
@bomholtm
Sep 13 2016 23:41
ah just found it on stack overflow ^^
should remember the search before ask thingy
@U-ways @vinaypuppal thanks again =)
CamperBot
@camperbot
Sep 13 2016 23:41
bomholt sends brownie points to @u-ways and @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: bomholt already gave vinaypuppal points
:cookie: 410 | @u-ways |http://www.freecodecamp.com/u-ways
vínαч puppαl
@vinaypuppal
Sep 13 2016 23:41
@bomholt :smile:
U-ways
@U-ways
Sep 13 2016 23:43
@bomholt welcome!
vínαч puppαl
@vinaypuppal
Sep 13 2016 23:45
@U-ways hey i just saw your FCC profile. Good colour schema and your consistently maintaining same through all projects :smile: . But tribute page link is broken once check that.
U-ways
@U-ways
Sep 13 2016 23:47
@vinaypuppal Oh thank you! I am a minimalist so all my projects are done quickly, thus the same template over and over again haha :P
I haven't done that tribute page yet so one day I will update that dead link! (I only enjoy doing the algorithm scripting challenges)
CamperBot
@camperbot
Sep 13 2016 23:47
u-ways sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: u-ways already gave vinaypuppal points
vínαч puppαl
@vinaypuppal
Sep 13 2016 23:48
@U-ways oh okay
U-ways
@U-ways
Sep 13 2016 23:49
@vinaypuppal You got some seriously outstanding work on your website though DDD:
vínαч puppαl
@vinaypuppal
Sep 13 2016 23:53
@U-ways oh yeah thanks .I have some experience in web before FCC I just want to learn CSS properly by doing those projects and did not use any CSS frameworks just used flexbox for layouts. so concentrated more on designs
CamperBot
@camperbot
Sep 13 2016 23:53
vinaypuppal sends brownie points to @u-ways :sparkles: :thumbsup: :sparkles:
:cookie: 411 | @u-ways |http://www.freecodecamp.com/u-ways
Michael Bomholt
@bomholtm
Sep 13 2016 23:57
@vinaypuppal are you still there... you seem so knowledgeable
is there a easy way to vertical align text or other elements? for example the text inside the spans?
U-ways
@U-ways
Sep 13 2016 23:57

@vinaypuppal Oh awesome! I think mastering bootstrap won't harm as well! (If you're building a career out of web development, bootstrap is a must to master) To be honest, what I found that most clients want something that looks "good" and when they say that they usually mean they wanted something as good as a couple of sites they saw recently.

Usually a professionally built bootstrap page will make most clients happy. The remaining others wants to put more money to create something really unique.

Michael Bomholt
@bomholtm
Sep 13 2016 23:58
i have the vertical align problem in every second project :D doing stuff with table cells and other weird things to make it somehow work
U-ways
@U-ways
Sep 13 2016 23:59
@bomholt Give your elements a fixed height and providing some top/bottom padding. Although flex-box can do that easily, so maybe consider it for your next project!