These are chat archives for FreeCodeCamp/HelpFrontEnd

3rd
Oct 2016
cayou99
@cayou99
Oct 03 2016 00:23
Hello! I am working on the portfolio challenge. I'm trying to make the background of the section with the 3 pictures extend to the full width of the screen, like the navbar. https://codepen.io/cayou99/pen/EgXVVa
wait.. something is wrong
ok, try it now
Karan Bhullar
@dawnguard
Oct 03 2016 00:26
@media only screen and (min-device-width: 480px), (min-width: 480px)
min-device-width works
min-width doesn't
cayou99
@cayou99
Oct 03 2016 00:27
^
?
xSnowpeltx
@xSnowpeltx
Oct 03 2016 00:51
@cayou99 did you try width: 100%?
cayou99
@cayou99
Oct 03 2016 00:53
@xSnowpeltx Just tried, no joy :(
George Phalen
@gphalen
Oct 03 2016 01:31
Hi. Is anyone able to look at my calculator project? I know that the calculator itself is ugly, and I'll fix that later. I just want to know if it fulfills all the user stories, or if there's any bugs I haven't noticed. Thanks.
Jake
@rhekst
Oct 03 2016 02:04

hey guys I'm working on a little text adventure game HTML and maybe a little CSS primarily just to test all of my skills so far and to possibly learn some new ones, I can make a basic text adventure without any effort but that isn't enough so I'm trying to implement more commands and options along with it, my main questions are: is there a way to start the game (like the main menu) outside of the containing folder without external apps, and is it possible to have there be a save option where it would remember the page you were on?

like I said Im just messing around to see how many things I can implement to make it as polished as a text-based game written in html can

JD Tadlock
@jdtdesigns
Oct 03 2016 02:21
@rhekst If you're looking to create a desktop app, you can look into http://electron.atom.io/. It may be a little over your head, but what's the harm in learning new stuff? As far as saving, look into localstorage. It's pretty easy to implement and can give you a simple 'database' feature to the app. ;)
Jake
@rhekst
Oct 03 2016 02:23
Thank you! I understood the concepts but wasn't quite sure how to go about making them.
JD Tadlock
@jdtdesigns
Oct 03 2016 02:25
@gphalen The design is pretty unusable in it's current state. I would work towards cleaning it up to resemble a basic calculator. The first calculation I did failed with multiple operators. :/
c0d0er
@c0d0er
Oct 03 2016 02:30
could anybody help to check why the $().append doesnt work? anywhere wrong? thanks! here is my code link: http://codepen.io/c0d0er/pen/RGLxpQ?editors=1010
George Phalen
@gphalen
Oct 03 2016 02:31
@jdtdesigns yeah, I realized that it didn't support chaining multiple operations together right after I posted that. trying to work on that now.
JD Tadlock
@jdtdesigns
Oct 03 2016 02:34
@c0d0er
var $twitchDiv=$("twitchDiv"); // missing the '#' in front
c0d0er
@c0d0er
Oct 03 2016 02:35
@jdtdesigns thank you so much!!!
CamperBot
@camperbot
Oct 03 2016 02:35
c0d0er sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 636 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Oct 03 2016 02:36
;)
grantknaver
@grantknaver
Oct 03 2016 02:45
anyone have any ideas on how to center my nav-brand above 768px ? https://codepen.io/GrantKnaver/pen/YGAYNA
c0d0er
@c0d0er
Oct 03 2016 02:51
@jdtdesigns do you know why in my code, the offline tv shows normal (every tv station only shows one time), why the online tv station shows multiple times? here is the code: http://codepen.io/c0d0er/pen/RGLxpQ?editors=1010
JD Tadlock
@jdtdesigns
Oct 03 2016 02:52
@grantknaver I posted this for you awhile back http://jsbin.com/wozahu/2/edit?html,output
grantknaver
@grantknaver
Oct 03 2016 02:53
I never saw this hmmm
@ thanks again @jdtdesigns
CamperBot
@camperbot
Oct 03 2016 02:56
grantknaver sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 637 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
grantknaver
@grantknaver
Oct 03 2016 02:57
is there no way to do it with bootstrap. This is a project I wanna understand how I can accomplish this with boot?
JD Tadlock
@jdtdesigns
Oct 03 2016 03:06
@c0d0er Here ya go. You can declare multiple vars with commas. You were adding the streams over and over using +=. I set it to = and it worked. I also set the offline to append and the online to prepend so they're separate and the online comes first. ;)
http://codepen.io/jdtadlock/pen/gwGkoj?editors=0010
@grantknaver I'm sure there is a way with bootstrap after overriding a bunch of crap. Bootstrap is meant to be used to do what it is coded to do. It's not meant for custom design, which is what you're trying to do. If you are trying to do something that the examples on the BS website don't show, you will always find yourself overriding and going through BS hell to achieve it. I've said this over and over, but once more I say, BS is a 'mockup' framework. If you want a BS looking site, you can mockup one super quick. If you want custom designed stuff, you should learn css and start creating it on your own.
c0d0er
@c0d0er
Oct 03 2016 03:09

thanks a lot! what's the meaning of this? could you show me a picture?

I also set the offline to append and the online to prepend so they're separate and the online comes first.

@jdtdesigns thanks a lot! what's the meaning of this? could you show me a picture?

I also set the offline to append and the online to prepend so they're separate and the online comes first.

CamperBot
@camperbot
Oct 03 2016 03:10
c0d0er sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: c0d0er already gave jdtdesigns points
grantknaver
@grantknaver
Oct 03 2016 03:10
@jdtdesigns OK
JD Tadlock
@jdtdesigns
Oct 03 2016 03:11
@c0d0er whoops, forgot to link the codepen lol
Nick
@AurusEmir
Oct 03 2016 03:12
so, would a good analogy for css "classes" be python "functions"? obviously apples and oranges. But is it a similar mindset?
JD Tadlock
@jdtdesigns
Oct 03 2016 03:13
@AurusEmir css classes are just referring to html elements with a class
totally different than programming functions lol
c0d0er
@c0d0er
Oct 03 2016 03:14
@jdtdesigns oh i see, really appreciate! thanks!
CamperBot
@camperbot
Oct 03 2016 03:14
c0d0er sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: c0d0er already gave jdtdesigns points
Nick
@AurusEmir
Oct 03 2016 03:14
gotcha, im coming from intermediate python to noooo css/html
JD Tadlock
@jdtdesigns
Oct 03 2016 03:14
@AurusEmir css is a whole new world, but a great world ;)
Nick
@AurusEmir
Oct 03 2016 03:15
gotcha, thanks! ill try to avoid the python mindset @jdtdesigns
CamperBot
@camperbot
Oct 03 2016 03:15
aurusemir sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 638 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Igor Amidzic
@igoramidzic
Oct 03 2016 03:15
http://utilitan.com
Please criticize my site so far! What should I do??
JD Tadlock
@jdtdesigns
Oct 03 2016 03:16
@AurusEmir You will love sass. It's the programmers css. ;)
Nick
@AurusEmir
Oct 03 2016 03:16
@jdtdesigns i look forward to it
d wilder
@alhazen1
Oct 03 2016 03:25
@amidzicigor That's kinda cool! I was able to create account and log in. BTW user tuck smuck username test, that would be me.
Evan W
@Dirtier
Oct 03 2016 03:34
Yea classes pretty much act the same way as IDs in CSS except that you can have a bunch of elements that use the same class
I remember when I first started I used them interchangeably, which was stupid lol so use # when you are selecting a specific element, use . (class) when you are defining something that a bunch of different elements are going to use
Ian Arsenault
@ianarsenault
Oct 03 2016 03:51
@Ailokin Yeah, what I mean by computer science driven questions is the question itself are worded like math problem sets, using mathematical notation. They're intimidating , for instance this is an "easy" algorithm question
blob
This is also the site I've been getting referred to by employers, to take a pre-test before even getting an interview. You get a set of questions and a time limit, one is multiple choice, usually something like choose the most optimal sorting algorithm. The other 2 or 3 questions I've run into were just difficult for me to grasp as I have no comp sci experience. I keep practicing everyday, and I do see progress, but it's overwhelming in the scope of things when you see all that you don't know. I'm not sure if that makes sense.
Augusto Carvalho
@gugadrum
Oct 03 2016 04:11
hey guys, is anyone working on the final part of jQuery ?
I am stuck in the last challenge.
As per the <Use jQuery to Modify the Entire Page> I am trying to use the following
 $("body").addClass("animated", "hinge");
any idea about what I am doing wrong here?
Sorin Ruse
@sorinr
Oct 03 2016 04:16
@gugadrum try $("body").addClass("animated hinge");
JD Tadlock
@jdtdesigns
Oct 03 2016 04:16
@gugadrum You add classes separated by spaces not a comma. For one class .addClass('myclass'), for two or more .addClass('firstclass anotherclass andonemoreclass')
Richa
@richa-coder
Oct 03 2016 04:17
@gugadrum ,comma not required, or u can use two different lines to specify two different properties.
Augusto Carvalho
@gugadrum
Oct 03 2016 04:18
@jdtdesigns Holly, this is true. Sepparated by spaces should be the features of some class, such as color, font, etc...
@jdtdesigns Thanks a lot! I am trying to be less dyslexic with ffc...the chat feature is really handy.
CamperBot
@camperbot
Oct 03 2016 04:19
gugadrum sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 639 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Augusto Carvalho
@gugadrum
Oct 03 2016 04:19
@richa-coder Thanks Richa!
CamperBot
@camperbot
Oct 03 2016 04:19
gugadrum sends brownie points to @richa-coder :sparkles: :thumbsup: :sparkles:
:cookie: 5 | @richa-coder |http://www.freecodecamp.com/richa-coder
Chris Cullen
@123xylem
Oct 03 2016 05:46

$(".panel").on("click", function() {
var panelId = $(this).attr("id");
audioF[panelId.toLowerCase()].play();
cpuTurn = 1;
pSeq.push(panelId);
// user input push into pSeq
if (pSeq[pSeq.length - 1] !== cSeq[a]) { //last player press not same as first cpu?
audioF['wrong'].play();
wasRight = 0;
pSeq = [];
a = 0;
roundVal = cSeq.length;
setTimeout(function() {
lastSeq()
}, 1000);

console.log("wrong no strict")

} else if (pSeq[pSeq.length - 1] !== cSeq[a] && strict % 2) {
audioF['wrong'].play();
console.log('strict wrong');
pSeq = [];
a = 0;
wasRight = 0;
setTimeout(function() {
alert("Back To Round 1!");
stopGame()
}, 2000);
}
// this line is to replay the audio
//STRICT FAIL ISNT TRIGGERING
else {
a++;
}
if (pSeq.length === cSeq.length && wasRight == 1) {
pSeq = [];
roundVal++;
$("#round").html("Round: " + roundVal);
a = 0;
setTimeout(function() {
cpuSeq()
}, 1000);
// so we move on to the next round
}
});

//used to replay lastCpuSeq
function lastSeq() {
for (c = cSeq[0]; c <= cSeq.length; c++) {
audioF[cSeq[c].toLowerCase()].play();
}

console.log("tried to play", cSeq);
}
Why wont lastSeq play the sound from cSeq? it recognises it as can be seen in the console.log but it wont execute the sound?
http://codepen.io/123xylem/pen/jrAKPN?editors=0011

silver537
@silver537
Oct 03 2016 05:47
hey guys, i think i finally finished this quote generator. feedback would be greatly appreciated:
http://codepen.io/Silver537/pen/vXZXmd?editors=0100
supposedly, it doesn't work for people who are on the MAC.
kirbyedy
@kirbyedy
Oct 03 2016 05:58
you mean on safari ?
what about quotes which are longer then 140chars.
RakeshNerkar
@Rakesh18754
Oct 03 2016 05:59

can we give css styling to pseudo classes using jquery like this

$(".analystTitle.disabled:after").css("color","red");

kirbyedy
@kirbyedy
Oct 03 2016 06:02
@silver537 Quote.html(${LQ}${quo}&nbsp;${RQ}); here the code breaks on safari, what does this line do ?
silver537
@silver537
Oct 03 2016 06:03
i guess safari doesn't support backticks
it's a template string grabbing variables.
i was thinking about the 140 characters... but most of these quotes are longer. :/
@kirbyedy
kirbyedy
@kirbyedy
Oct 03 2016 06:06
yeah
Personacode
@Personacode
Oct 03 2016 06:23
I'm on the build a tribute page and I'm drawing a blank. Should I just start fcc from the beginning?
restart*
kirbyedy
@kirbyedy
Oct 03 2016 06:25
or you do a small research on the internet and find out how its done
__mifflin__
@cdrainxv
Oct 03 2016 06:34
@Personacode it doesn't have to even look good... just use what you've have learned like lists... anchor... css positioning... just do the bare minimum for now... and ask for help along the way... that's what chat is for...
Personacode
@Personacode
Oct 03 2016 07:10
on the codepen page it isn't letting me minimize the html window
so it's all i can see
silver537
@silver537
Oct 03 2016 07:41
@Personacode on top right, there's something that says change view, click it and click the full page
Sorin Ruse
@sorinr
Oct 03 2016 07:50
@Personacode if u place the cursor on the bar between html and css and keeping the click on it you can drag it to resize that panel
Eugene ODanga
@boygj
Oct 03 2016 10:29
Hey guys, anyone have any clue on how to make those social media buttons float on the image?
ADIL KARMOUZI
@mradil16
Oct 03 2016 11:38
Hi guys , how to change an element's style when scrolling the page using the basic jQuery that we learned in Freecodecamp class ?
rasmusol
@rasmusol
Oct 03 2016 12:01

Hey anyone good with front-end? This code:
@media only screen
and (min-device-width: 320px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 2)
{

Only targets some phones. The css does not apply on my phone and another guys phone, but another colleagues phone it works on. How can i target all phones?

ADIL KARMOUZI
@mradil16
Oct 03 2016 12:04
link : http://codepen.io/mradil16/pen/mArkqW I want to change the background color of the 'portfolio [li]' when scrolling the page at 400px point.I don't know how ? please help.
Chris Webster
@cmwebby
Oct 03 2016 12:09
@mradil16 Could you use $(window).scrollTop() ; then add css dynamically?
Brendan Beltz
@BtheGit
Oct 03 2016 12:49
Hi, can someone help me understand why the page immediately refreshes after returning results on my wikipediaviewer? http://codepen.io/quadrumane/pen/BLkOob/
Stephen James
@sjames1958gm
Oct 03 2016 12:51

@BheGit Because you have a form, the webpage tries to submit the form to the backend and then refreshes. You can do this:

function submitSearch(e){
  e.preventDefault();

This prevents the default submit action.

Brendan Beltz
@BtheGit
Oct 03 2016 12:55
thank you
Stephen James
@sjames1958gm
Oct 03 2016 12:55
@BtheGit :+1:
Brendan Beltz
@BtheGit
Oct 03 2016 12:56
that's awesome. it's the little things ... :p
Sunkworld
@Sunkworld
Oct 03 2016 12:59
The gap between the first and second project is so huge😭
Brendan Beltz
@BtheGit
Oct 03 2016 13:01
@sjames1958gm I'm relatively new to these chat rooms. Is there a system for awarding points as thanks?
CamperBot
@camperbot
Oct 03 2016 13:01
bthegit sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3652 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Oct 03 2016 13:16
@BtheGit Yes, and you did it :)
Vidhi patel
@VidhiPatel5151
Oct 03 2016 13:18
hello everyone i m new here plese help me out i have one mvc application in that application i have use slider.
that slider in contain 1 question n that question have 4 answer usesr can visit n give the select ans they want i want to that all question answer temporary save how to store
ADIL KARMOUZI
@mradil16
Oct 03 2016 13:22
This message was deleted
This message was deleted
@cmwebby yes , I used this code but still not working $(window).scroll(function(){ $(window).scrollTop(); if($(window).scrollTop() == 400){ $("#portfolio").css("color","red") ; } });
Darryl Lloyd Marino
@cerberusjin
Oct 03 2016 13:28
im working on my portfolio webpage.
im using position: fixed; for my header but it is not working in codepen..
nevermind. i saw some examples that are working. gonna figure out what's wrong with mine
Rizwan Ahmed
@rizwanahmed19
Oct 03 2016 13:33
Check this out if you wanna host your website on Firebase https://www.youtube.com/watch?v=Gl-qlxfTJHE
ikhlaq1
@ikhlaq1
Oct 03 2016 13:53
can anyone help me in starting project 2 that is makinh own personal webpage which is function and has ux design
Aaron Bell
@awb715
Oct 03 2016 15:01
i just got my first project, the build a tribute page
definitely dont know how prepared i feel haha
Jeanne Herrington
@jeanneh125
Oct 03 2016 15:18
Can someone please, in dumbed down detail, explain why the social media content isn't showing up on my page?
<section id="contact" class="text-center padding">
<h3 class="title">Contact Me</h3>
<hr class="star">
<div class="container">
<div class="row">
<div class="contact-form col-md-7 col-md-pull-1">
<h3>Shoot me an email</h3><br>

<form class="form-horizontal role="form"> <div class="form-group has-success"> <label for="Name" class="col-sm-2 control-label">Name</label> <div class="col-sm-10"> <input type="text" class="form-control input-lg" id="Name" placeholder="Name"> </div> </div> <div class="form-group has-success"> <label for="Email" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="text" class="form-control input-lg" id="Email" placeholder="Email"> </div> </div> <div class="form-group has-success"> <label for="Message" class="col-sm-2 control-label">Message</label> <div class="col-sm-10"> <textarea class="form-control" id="Message" rows="3"></textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn- primary btn-lg pull-right">Send</button> </div> </div> </form> </div><!--contact form--> <div class="social-media col-md-5"> <h3 class="title">Stay in Touch</h3><br> <ul class="socials"> <li> <a href="#" class="btn-social"><i class="fa fa-facebook></i></a></li>
<li>
<a href="#" class="btn-social"><i class="fa fa-LinkedIn></i></a></li>
</ul>
</div><!--social media-->

</div> <!--row-->
</div> <!--container-->
</section>
Sorin Ruse
@sorinr
Oct 03 2016 15:20
@jeanneh125 have you loaded font awesome lib?
Jeanne Herrington
@jeanneh125
Oct 03 2016 15:21
@sorinr yes but even the h3 Stay in Touch isn't showing up
Sorin Ruse
@sorinr
Oct 03 2016 15:22
@jeanneh125 do u have your code on a codepen so u can share the link?
Jeanne Herrington
@jeanneh125
Oct 03 2016 15:25
Sorin Ruse
@sorinr
Oct 03 2016 15:29
@jeanneh125 ok. what do u mean by "social media content" ?
Jeanne Herrington
@jeanneh125
Oct 03 2016 15:31
@sorinr to the right of the shoot me an email and the form there should be h3 stay in touch and social icons. it isn't displaying.
Sorin Ruse
@sorinr
Oct 03 2016 15:39
@jeanneh125 take a look here: portfolio
kekeximi
@kekeximi
Oct 03 2016 15:40
at codepen: <div class="container"><h1 class="text-center">liuyifei</h1></div> why is the"liuyifei" not in the center? https://codepen.io/kekeximi/pen/bwYNbr/
Jeanne Herrington
@jeanneh125
Oct 03 2016 15:46
@sorinr I am so confused. It shows up on my phone but not on computer in codepen.
Sorin Ruse
@sorinr
Oct 03 2016 15:47
@jeanneh125 i am on desktop and it shows. give a refresh to the page
Jeanne Herrington
@jeanneh125
Oct 03 2016 15:54
@sorinr i tried that. I have no clue why i can't see it on my. frustrating.
Sorin Ruse
@sorinr
Oct 03 2016 15:55
@jeanneh125 do you see it on desk this way: portfolio ?
Jeanne Herrington
@jeanneh125
Oct 03 2016 15:58
@sorinr unfortunately no I still don't see it.
Sorin Ruse
@sorinr
Oct 03 2016 15:58
@jeanneh125 what browser are u using for desktop?
Jeanne Herrington
@jeanneh125
Oct 03 2016 15:59
@sorinr google chrome
Jason Luboff
@JLuboff
Oct 03 2016 16:00
@jeanneh125 Part of the problem is you're missing some closing quotes in your i class calls (Assuming the link above shows the current content)
Sorin Ruse
@sorinr
Oct 03 2016 16:00
@jeanneh125 me too and i have tested it also on firefox and its showing the media icons
Jason Luboff
@JLuboff
Oct 03 2016 16:02
@jeanneh125 Both i classes you didn't put the closing " after the icon name (i class="fa fa-facebook" you currently don't have the trailing ")
Sorin Ruse
@sorinr
Oct 03 2016 16:02
@JLuboff we know. if you open my forked pen of @jeanneh125 that was solved. btw do u see the social icons in the contact area?
Jason Luboff
@JLuboff
Oct 03 2016 16:02
@sorinr How do I open the fork? I see the icons after I added the missing quotes and changed LinkedIn to linkedin
Sorin Ruse
@sorinr
Oct 03 2016 16:04
@JLuboff portfolio
Jason Luboff
@JLuboff
Oct 03 2016 16:04
@sorinr Thanks. Yes the icons show
CamperBot
@camperbot
Oct 03 2016 16:04
jluboff sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 759 | @sorinr |http://www.freecodecamp.com/sorinr
Ajay Tanwar
@ajayt365
Oct 03 2016 16:08
http://codepen.io/ajayt365/pen/gwXaAA . why the third div is placing itself on new line instead of generating a scroll bar in horizontal direction ?
Jason Luboff
@JLuboff
Oct 03 2016 16:08
@ajayt365 35+35+35 = 105..
@ajayt365 Change your width to 33%
Ajay Tanwar
@ajayt365
Oct 03 2016 16:09
yeah , so it should produce a scroll bar in x-direction @JLuboff
Jeanne Herrington
@jeanneh125
Oct 03 2016 16:10
@JLuboff @sorinr thank you both. Still not showing for me. I'll keep trying.
vínαч puppαl
@vinaypuppal
Oct 03 2016 16:11
@jeanneh125 do you see any errors in chrome console ?? Hit ctrl+shift+j to open chrome console
Ajay Tanwar
@ajayt365
Oct 03 2016 16:11
@JLuboff ?
Jeanne Herrington
@jeanneh125
Oct 03 2016 16:14
@vinaypuppal Failed to load resource: net::ERR_BLOCKED_BY_CLIENT. what does this mean?
Ajay Tanwar
@ajayt365
Oct 03 2016 16:15
@jdtdesigns i understand what you are trying to do . but i m asking when width is 35% , why the browser didn't generate a scroll bar in x-direction . like it does with y-axis when there is data bigger than height of screen ? why the third block moves to new line when width is 35% instead of remaining on the same line and having a scroll bar for x-axis?
JD Tadlock
@jdtdesigns
Oct 03 2016 16:15
@jeanneh125 It means you're on a computer that has limited access to the internet
vínαч puppαl
@vinaypuppal
Oct 03 2016 16:15
@jeanneh125 so i think some resource(may be fontawesome css file) is blocked from loading thats why u dont see icons, are you behind any private proxy ??
@jeanneh125 i get these kind of errors if my AdBlocker block some resources from loading so you may check that also
Ajay Tanwar
@ajayt365
Oct 03 2016 16:17
anyone ?
Jeanne Herrington
@jeanneh125
Oct 03 2016 16:18
@vinaypuppal doing a happy dance. It was AdBlocker. Thank you!
CamperBot
@camperbot
Oct 03 2016 16:18
jeanneh125 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 594 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Sorin Ruse
@sorinr
Oct 03 2016 16:19
@ajayt365 add overflow
vínαч puppαl
@vinaypuppal
Oct 03 2016 16:19
@jeanneh125 :smile:
JD Tadlock
@jdtdesigns
Oct 03 2016 16:19
@ajayt365 The browser automatically adds a margin-right of 4px when using inline-block.
You would need to add margin-right: -4px; to the divs
and the width needs to be 33.333%
don't really know what you're trying to achieve other than defying basic math lol
can someone explain to me why I cant get the font to change
Ajay Tanwar
@ajayt365
Oct 03 2016 16:21
@sorinr isn't it automatic property of browser to generate overflow when content goes out of bound ? @jdtdesigns trying to understand behaviour of browser
JD Tadlock
@jdtdesigns
Oct 03 2016 16:22
@ajayt365 not when you have 3 different divs not the width of the browser
@awb715 You have the <link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet"> inside of css panel. Move that to Settings on the first tab in the box that says 'stuff for header'. In your css you have:
font-family: Exo, sans-serif;

/** Needs to be this **/
font-family: 'Exo', sans-serif;
Jason Luboff
@JLuboff
Oct 03 2016 16:23
@awb715 You're placing the stylesheet in the wrong location
vínαч puppαl
@vinaypuppal
Oct 03 2016 16:23
@awb715 custom fonts should be inside quotes like this
h1{
  font-family: 'Exo', sans-serif;
}
Sorin Ruse
@sorinr
Oct 03 2016 16:24
@ajayt365 if you have a div with a certain height for example and your content its larger then that height if you set overflow: auto; to that div it will auto add scrollbars as needed
Aaron Bell
@awb715
Oct 03 2016 16:25
got it!
thanks @JLuboff @vinaypuppal
CamperBot
@camperbot
Oct 03 2016 16:25
awb715 sends brownie points to @jluboff and @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 382 | @jluboff |http://www.freecodecamp.com/jluboff
:cookie: 595 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Aaron Bell
@awb715
Oct 03 2016 16:25
couldnt find a direct iron man font haha
Ajay Tanwar
@ajayt365
Oct 03 2016 16:26
what about width @sorinr ? so you are saying it will never generate scroll bar in x-direction?
christocarr
@christocarr
Oct 03 2016 16:27
Hi guys!
Sorin Ruse
@sorinr
Oct 03 2016 16:27
@ajayt365 same principle overflow: auto; will set both scrollbars if needed
JD Tadlock
@jdtdesigns
Oct 03 2016 16:27
@ajayt365 You're setting the width with percent. You need fixed widths to generate scroll bars
percent will automatically adjust the width based on the browser's current width
christocarr
@christocarr
Oct 03 2016 16:28
I'm on the portfolio project. what is the best way to add my tribute project to my portfolio?
vínαч puppαl
@vinaypuppal
Oct 03 2016 16:31
@ajayt365 see this if this is what you want
http://codepen.io/vinaypuppal/pen/vXWNvX?editors=1100
@christocarr you can take screenshot of your Tribute page and use as image in your portfolio page and link to your Tribute page
or
You can directly embed codepen also (you can find embed option at bottom right corner of you pen)
Aaron Bell
@awb715
Oct 03 2016 17:10
how do you properly center a image in CSS
Ajay Tanwar
@ajayt365
Oct 03 2016 17:14
@jdtdesigns with fixed width the result is same
@vinaypuppal yeah it generated scroll bar , but why isn't happening with display:inline-block?
vínαч puppαl
@vinaypuppal
Oct 03 2016 17:18
@ajayt365 don't know, this is the first time i saw this behaviour may be ask in StackOverflow you may get better answer.
JD Tadlock
@jdtdesigns
Oct 03 2016 17:21
@ajayt365 I just loaded your codepen and you have it set to inline-block and there are scrollbars when you shrink the browser. What exactly are you trying to achieve with this? I don't understand why you would ever want horizontal scroll bars. Your goal should be to never have horizontal scroll bars. Can you explain what you're trying to create or show an example?
@awb715 There are a bunch of ways. Are you wanting to know how to do it with vanilla css or BS?
Ajay Tanwar
@ajayt365
Oct 03 2016 17:24
@jdtdesigns see vinay's link . add three or four divs and you get a x-axis scrollbar . man just exploring behaviours ,whys.
JD Tadlock
@jdtdesigns
Oct 03 2016 17:26
@ajayt365 That's really really bad html and css lol
Ajay Tanwar
@ajayt365
Oct 03 2016 17:27
@jdtdesigns vinay's code not mine :P
JD Tadlock
@jdtdesigns
Oct 03 2016 17:27
@ajayt365 Exactly
vínαч puppαl
@vinaypuppal
Oct 03 2016 17:28
@jdtdesigns whats bad in that ?? i just added a container and wrapper for .hey class
@jdtdesigns can you explain exactly whats bad HTML and CSS ??
Ajay Tanwar
@ajayt365
Oct 03 2016 17:29
@vinaypuppal which css framework did you use to build your website ?
vínαч puppαl
@vinaypuppal
Oct 03 2016 17:29
@ajayt365 nothing just my own CSS and flexbox for layouts
JD Tadlock
@jdtdesigns
Oct 03 2016 17:30
@vinaypuppal You don't think this is bad? lol
<div class="container">
<div class='hey-wrapper'><div class="hey"></div></div>
<div class='hey-wrapper'><div class="hey"></div></div>
  <div class='hey-wrapper'><div class="hey"></div></div>
  <div class='hey-wrapper'><div class="hey"></div></div>
</div>
Ajay Tanwar
@ajayt365
Oct 03 2016 17:30
how can i get this good ? @vinaypuppal
Sorin Ruse
@sorinr
Oct 03 2016 17:30
@vinaypuppal what is the reason to use this: <div class='hey-wrapper'>?
Aaron Bell
@awb715
Oct 03 2016 17:32
im on css @jdtdesigns
vínαч puppαl
@vinaypuppal
Oct 03 2016 17:32
@jdtdesigns @sorinr i just changed that after he asked this :point_up: October 3, 2016 10:44 PM let me roll back befopre what i have , check it now guys
@sorinr @jdtdesigns sorry i thought you were viewing my old code , forgot i made changes
@ajayt365 I built same effect in one of my demo projects while learning
https://youtube-api.vinaypuppal.com which you view thatin mobile view, you will get Horizontal scroll bars to navigate between videos. It an effect i noticed in Playstore and Google Search to show more images/products and also lot of E-commerce web sites use horizontal overflow to show more products. @jdtdesigns He May be trying for this kind of effect. :smile:
Ajay Tanwar
@ajayt365
Oct 03 2016 17:37
@vinaypuppal u didn't answer?
vínαч puppαl
@vinaypuppal
Oct 03 2016 17:38

@jdtdesigns @sorinr i just changed that after he asked this :point_up: October 3, 2016 10:44 PM let me roll back befopre what i have , check it now guys

@jdtdesigns @sorinr i was trying to get same effect using display: inline-block so i added <div class='hey-wrapper'> and testing.

@ajayt365 what??
Ajay Tanwar
@ajayt365
Oct 03 2016 17:39
how do i get this good ? that i could make a website like yours
JD Tadlock
@jdtdesigns
Oct 03 2016 17:39
@ajayt365 If you're asking how you get good at coding, you have to code a ton and watch a thousand videos and read a thousand tutorials. It's not a short process no matter what the fraudulent ads will tell you. It can take upwards of 10 years to become a professional, unless you spend 20 hours a day coding.
I speak to a lot of people who come into this with illusions of how easy it can be.
vínαч puppαl
@vinaypuppal
Oct 03 2016 17:40
@ajayt365 :point_up: i also agree with it
Santiago Fernandez
@sf-jd
Oct 03 2016 17:41
it's not hard to code. getting good is like any other discipline, an athlete, a doctor, driving... you can do any of those. doing them professionally, that'll take time.
JD Tadlock
@jdtdesigns
Oct 03 2016 17:41
If you want an idea of how much you need to learn , go take a web developer employment practice test @ajayt365
Santiago Fernandez
@sf-jd
Oct 03 2016 17:41
making money is a consequence of effort, effort is not a consequence of making money.
Aaron Bell
@awb715
Oct 03 2016 17:42
what about boot camps
Santiago Fernandez
@sf-jd
Oct 03 2016 17:42
young kids sometimes dont understand the word effort.
Ajay Tanwar
@ajayt365
Oct 03 2016 17:42
don't you think majority of programmers burn out in that much long period?
JD Tadlock
@jdtdesigns
Oct 03 2016 17:42
@sf-jd Let's not be foolish lol. How many times have you spent days/weeks learning one small thing because it didn't make sense? If you haven't, you haven't coded. ;)
Santiago Fernandez
@sf-jd
Oct 03 2016 17:43
@jdtdesigns im almost through med school, trust me, ive spent many months figuring out many one small things :p
Sorin Ruse
@sorinr
Oct 03 2016 17:43
@ajayt365 nope. i'm 51 coding from a long time and still a lot to learn
JD Tadlock
@jdtdesigns
Oct 03 2016 17:43
so please don't tell new coders that "coding isn't that hard"
Santiago Fernandez
@sf-jd
Oct 03 2016 17:43
it is not hard
JD Tadlock
@jdtdesigns
Oct 03 2016 17:43
it's what i have to counter on a daily basis
Santiago Fernandez
@sf-jd
Oct 03 2016 17:43
it just requires a mindset that OH THIS IS EASY
is just not the right mindset
Ajay Tanwar
@ajayt365
Oct 03 2016 17:44
i am 20 :D
JD Tadlock
@jdtdesigns
Oct 03 2016 17:44
no it requires a mindset that no matter how hard i never give up
Santiago Fernandez
@sf-jd
Oct 03 2016 17:44
perhaps we're having a choice of words disagreement :p
commitment is the word im going for
and how younger people get fooled by a lax commitment idea in bootcamps n such
Sorin Ruse
@sorinr
Oct 03 2016 17:44
@jdtdesigns :+1: mindset
Ajay Tanwar
@ajayt365
Oct 03 2016 17:44
sometimes persistence is overrated . isn't it?
Santiago Fernandez
@sf-jd
Oct 03 2016 17:45
mindset, way of life, i think we;re just saying the same and internet makes it sound like we arent :)
JD Tadlock
@jdtdesigns
Oct 03 2016 17:45
easy/6 weeks/work from home in a month are just a few ad claims
all false unless you lie
vínαч puppαl
@vinaypuppal
Oct 03 2016 17:46
@ajayt365 You can learn many things by looking at source code of CSS frameworks and recreate those things using your own CSS. I used to take Web Templates from themeforest and inspect every element in Dev Tools and used to recreate same effect without using Frameworks , this is how i learned most of HTML and CSS.
JD Tadlock
@jdtdesigns
Oct 03 2016 17:46
i've rebuilt apps from the ground up for liars @sf-jd I'm kinda tired of it lol
Santiago Fernandez
@sf-jd
Oct 03 2016 17:47
for or because of?
JD Tadlock
@jdtdesigns
Oct 03 2016 17:47
because of*
i'll once again repeat, if you want to actually know how much you know, go take a employment practice test for whatever field you're trying to get into
it's an eye opener ;)
Mikail Bayram
@mikail1998
Oct 03 2016 17:49
Ive started the tic-tac-toe game and wonder how should I make the grids or the "boxes" in it
should i make 9 boxes
or something else?
Santiago Fernandez
@sf-jd
Oct 03 2016 17:50
@mikail1998 write it on paper buddy. write the whole thing, from start to bottom
JD Tadlock
@jdtdesigns
Oct 03 2016 17:50
@mikail1998 Using flexbox, you can simply create 3 rows with 3 boxes inside each row with fixed widths/heights
Santiago Fernandez
@sf-jd
Oct 03 2016 17:50
what happens with each user interaction, what happens in the background, what you expect to happen
when you're done designing the usability, start poking holes in it. once you're done, start thinking how to code it
Mikail Bayram
@mikail1998
Oct 03 2016 17:51
@sf-jd first of all Ill start with the boxes
on step at a time..
@jdtdesigns oh thanks I heard for them the first time
CamperBot
@camperbot
Oct 03 2016 17:51
mikail1998 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 640 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Mikail Bayram
@mikail1998
Oct 03 2016 17:52
@jdtdesigns definitely going to look into it
Santiago Fernandez
@sf-jd
Oct 03 2016 17:53
god i hate ie9 support -_-
JD Tadlock
@jdtdesigns
Oct 03 2016 17:53
@mikail1998 then you can set the borders for each box to get the tic tac toe board lines
@sf-jd ie9 is used by less than 1% of all internet clients now
no good reason to support it ;)
Santiago Fernandez
@sf-jd
Oct 03 2016 17:53
tell that to samsung ;)
JD Tadlock
@jdtdesigns
Oct 03 2016 17:54
huh?
Santiago Fernandez
@sf-jd
Oct 03 2016 17:54
i agree 190% with you
vínαч puppαl
@vinaypuppal
Oct 03 2016 17:54
@mikail1998 if you'r already using bootstrap you can use bootstrap grid(rows and cols) to make 3*3 Grid. But Flexbox gives more flexibility so choice is yours.
Ayush Agrawal
@ayush1810
Oct 03 2016 17:55
What all stuff I need to make a website like : iecsemanipal.com
I need to know/learn*
JD Tadlock
@jdtdesigns
Oct 03 2016 17:58
@ayush1810 An intermediate to advanced level of knowledge of css, css animations, paralax design with css/js.
html of course is important, but i assumed you would include that ;)
Ayush Agrawal
@ayush1810
Oct 03 2016 18:00
I know HTML and Bootstrap, I can see Typed.js being used
what is a good resource for Advanced CSS, Animations and Flexbox?
Not just theory but a practical application-based resource?
vínαч puppαl
@vinaypuppal
Oct 03 2016 18:01
@ayush1810 You can use below resources
@ayush1810 More Resources
JD Tadlock
@jdtdesigns
Oct 03 2016 18:03
@ayush1810 For me, youtube has been a great learning resource. I've spent thousands on schools and courses and I find myself learning from youtube a lot of the time lol.
It's really how good you are at googling
c0d0er
@c0d0er
Oct 03 2016 18:05
does anybody know why in my js code, pre(e);//why i change to event, it will work perfectly to prevent after press enter all search results disappear?, function pre(e){ e.preventDefault(); }//why i change to event, it will work perfectly to prevent after press enter all search results disappear? this is my code link: http://codepen.io/c0d0er/pen/WGkQvk?editors=1010
JD Tadlock
@jdtdesigns
Oct 03 2016 18:07
@c0d0er umm, i gave the answer to you the other day lol
i even commented the code for you
step by step
c0d0er
@c0d0er
Oct 03 2016 18:08
@jdtdesigns thanks, i am still learning your code! but this pre(e) is another solution, just try to find out why pre(event) works and pre(e) doesnt work, could you help me?
CamperBot
@camperbot
Oct 03 2016 18:08
c0d0er sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 641 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
vínαч puppαl
@vinaypuppal
Oct 03 2016 18:12
@c0d0er Since you used form browser does default form submission based on action and method attribute on form , if form has no action and method attribute it just uses default values for those like action='/'(may be) and method='GET' so browser refreshes i think. So in order to stop this default behaviour we use event.preventDefault() .
c0d0er
@c0d0er
Oct 03 2016 18:14
@vinaypuppal thanks, the questions is why pre(event) works and pre(e) doesnt work? normally parameter set as e or event doesnt matter, why here does matter?
CamperBot
@camperbot
Oct 03 2016 18:14
c0d0er sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 596 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
JD Tadlock
@jdtdesigns
Oct 03 2016 18:18
@c0d0er Your calling the event object instead of the parameter which is what you should pass into the function.
But, like @vinaypuppal said and I said, you shouldn't use a form for this. Your just getting typed input from a user, not submitting a form.
c0d0er
@c0d0er
Oct 03 2016 18:19

@jdtdesigns not quiet understand, could you give me an example?

@c0d0er Your calling the event object instead of the parameter which is what you should pass into the function.

JD Tadlock
@jdtdesigns
Oct 03 2016 18:19
inside the loadData(), do a console.log(event)
you'll see the event object and what it is capturing
c0d0er
@c0d0er
Oct 03 2016 18:21
@jdtdesigns using form with input a good practice or not so good practice?
vínαч puppαl
@vinaypuppal
Oct 03 2016 18:23
@c0d0er and why you used HTML onsubmit attributes, as you included JQuery why dont you use JQuery to handle form submission or input change events, which makes coding easier i feel, but its upto you how you want to do :smile:
JD Tadlock
@jdtdesigns
Oct 03 2016 18:23
^
c0d0er
@c0d0er
Oct 03 2016 18:23
@vinaypuppal just for shorter code
JD Tadlock
@jdtdesigns
Oct 03 2016 18:24
my js example for you is shorter lol
html js submissions are bad practice unless you're using a framework that attaches dynamic elements with submits to them
@c0d0er
vínαч puppαl
@vinaypuppal
Oct 03 2016 18:26

@jdtdesigns using form with input a good practice or not so good practice?

There is benefits of using form with inputs You can submit input value with enter key , and no need of handling that separately with key events.But you need to use event.preventDefault() to override default form submission behaviour

@c0d0er
c0d0er
@c0d0er
Oct 03 2016 18:27

@jdtdesigns you are absolute correct, console.log(event) is an event, but console.log(e), e is not defined, this is the reason why pre(e) doesnt work! thanks a lot!

you'll see the event object and what it is capturing

CamperBot
@camperbot
Oct 03 2016 18:27
c0d0er sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: c0d0er already gave jdtdesigns points
TrayBanks
@TrayBanks
Oct 03 2016 18:29
Hey, guys I am on to the next challenge in JS: Manipulating complex objects and I set up the code "properly" but it still not clearing the requirements. I assume their is still some instruction that I am missing but I would like more insight on my situation. Please and thank you and as always DONT JUST GIVE ME THE ANSWER!!!
var myMusic = [
  {
    "artist": "Billy Joel",
    "title": "Piano Man",
    "release_year": 1973,
    "formats": [ 
      "CS", 
      "8T", 
      "LP" ],
    "gold": true
  [{"artist": "Kendrick Lamar",
   "title":"To Pimp a Butterfly",
   "release_year":2015,
   "formats":
  [
     "Hard copy",
     "Digital download",
     "Vinyl"
   ],
"platinum": true}]
  }// Add record here
];
c0d0er
@c0d0er
Oct 03 2016 18:31
@jdtdesigns in your code, i saw col-xs-6 col-xs-offset-3 col-md-4 col-md-offset-4 of <div class="input-group col-xs-6 col-xs-offset-3 col-md-4 col-md-offset-4">, where can i learn col-xs-6 col-xs-offset-3 col-md-4 col-md-offset-4? i only know the basic bootstrap grid and not yet get the chance for col-xs-6 col-xs-offset-3 col-md-4 col-md-offset-4
JD Tadlock
@jdtdesigns
Oct 03 2016 18:32
@c0d0er offsets are just used to push a column to the right
Michael Davis
@mhdavis
Oct 03 2016 18:32
@khaduch sorry for the delay, I figured out the answer to the question. I went through what you suggested and your insight was very helpful! Thanks!
CamperBot
@camperbot
Oct 03 2016 18:32
mhdavis sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1749 | @khaduch |http://www.freecodecamp.com/khaduch
vínαч puppαl
@vinaypuppal
Oct 03 2016 18:32
@c0d0er you can find in docs many examples http://getbootstrap.com/css/#grid
JD Tadlock
@jdtdesigns
Oct 03 2016 18:32
the way it works is you have a col-xs-6 and a col-xs-offset-3(3 because 3 and 3 is 6 which will total 12)
that will center the column
as of now, you can only do this with even columns
Michael Davis
@mhdavis
Oct 03 2016 18:33
@alhazen1 , i appreciate your help as well in terms of better structuring my if/else conditions and organization. Thanks!
CamperBot
@camperbot
Oct 03 2016 18:33
mhdavis sends brownie points to @alhazen1 :sparkles: :thumbsup: :sparkles:
:cookie: 404 | @alhazen1 |http://www.freecodecamp.com/alhazen1
c0d0er
@c0d0er
Oct 03 2016 18:35
@jdtdesigns why do you use both col-xs-6 and col-md-4 at the same time?
vínαч puppαl
@vinaypuppal
Oct 03 2016 18:36
@c0d0er to target both small and medium screens at same time
JD Tadlock
@jdtdesigns
Oct 03 2016 18:36
^
c0d0er
@c0d0er
Oct 03 2016 18:38
@jdtdesigns @vinaypuppal so col-xs-6 col-xs-offset-3 is for small screen and col-md-4 col-md-offset-4 is for bigger screen, and both codes has same effect except for differenct screen size, if i only want to use in small screen, i can ONLY use col-xs-6 col-xs-offset-3, correct?
JD Tadlock
@jdtdesigns
Oct 03 2016 18:41
@c0d0er correct but using only xs will cause the column to be 6 wide all the way up to large screens which you may not want
that's why you use multiple col classes for the different size screens
Sorin Ruse
@sorinr
Oct 03 2016 18:41
@c0d0er using only col-xs-6 col-xs-offset-3 means small to all way up
c0d0er
@c0d0er
Oct 03 2016 18:42
@jdtdesigns @sorinr very clear! thanks!
CamperBot
@camperbot
Oct 03 2016 18:42
c0d0er sends brownie points to @jdtdesigns and @sorinr :sparkles: :thumbsup: :sparkles:
:warning: c0d0er already gave jdtdesigns points
:cookie: 760 | @sorinr |http://www.freecodecamp.com/sorinr
Personacode
@Personacode
Oct 03 2016 18:45
How would I change the fonts of some words in the same element?
JD Tadlock
@jdtdesigns
Oct 03 2016 18:46
@Personacode <span class="different-font">Some words</span>
Personacode
@Personacode
Oct 03 2016 18:47
thanks JD
Mark
@vinarius
Oct 03 2016 19:01
Anyone else struggling to make sense of the weather App project?
JD Tadlock
@jdtdesigns
Oct 03 2016 19:05
@vinarius what's your issue?
Mark
@vinarius
Oct 03 2016 19:07
I'm using an api to get a user's location based on their ip, but I don't understand how to use pieces of that info that comes through and store it into a variable
var locationJSON;
$.getJSON("http://ip-api.com/json", function(json){
locationJSON = json;
});
Mikail Bayram
@mikail1998
Oct 03 2016 19:07
http://codepen.io/mikail1998/pen/VKmwwE is it more logical to make all the divs the same name or seperate names?
Mark
@vinarius
Oct 03 2016 19:09

i want to use the latitude and longitude so i can query it to the website.

http://api.openweathermap.org/data/2.5/weather?lat=*[latitude from user ip]&lon=[longitude from user ip]&APPID=[my id]*

c0d0er
@c0d0er
Oct 03 2016 19:09
@jdtdesigns i have 2 questions about your code, 1. if i change the code to function setup() { // keyup is good for capturing each key press $('#wikiSearch').on('keypress', loadData);// $('#wikiSearch').on('keyup', getUserInput); }, why when i press the first key, it doesnt show the search results, and only after pressing 2 keys or more then show the results? 2. why you didnt combine the function setup(){...} and getUserInput(key) {...} to one function setup()?
c0d0er
@c0d0er
Oct 03 2016 19:11
@jdtdesigns $('#wikiSearch').on('keypress', loadData);//why press the first key doesnt show any result and press the second key only show the first key result?
vínαч puppαl
@vinaypuppal
Oct 03 2016 19:11
@vinarius Instead of OpenweatherAPI, I think the easiest solution is to use Weather Underground's autoip weather url which works over HTTP/HTTPS and gives you ip-based location + weather_data+icon_img_url all in one URL. https://api.wunderground.com/api/<API KEY>/conditions/q/autoip.json
signup for a key here https://www.wunderground.com/weather/api/ and use above URL to get data
c0d0er
@c0d0er
Oct 03 2016 19:11
@jdtdesigns this is the code: http://codepen.io/c0d0er/pen/VKryAA?editors=0010
Mark
@vinarius
Oct 03 2016 19:12
@jdtdesigns wow thank you. i've been banging my head on my keyboard all morning.
CamperBot
@camperbot
Oct 03 2016 19:12
vinarius sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 642 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Oct 03 2016 19:14
@c0d0er that's why i had keyup, not keypress ;)
you changed it
and you want to separate functionality in your app as much as you can
clean code means not a lot of comments needed
short giberrish code is the old way
i wrote it in basic functions
typically, you would create a iife modular class for each module(functional part) of your app
Personacode
@Personacode
Oct 03 2016 19:17
How does this look so far? https://codepen.io/PersonaCode/pen/YGAxbj
c0d0er
@c0d0er
Oct 03 2016 19:18

@jdtdesigns what does this mean?

typically, you would create a iife modular class for each module(functional part) of your app

Personacode
@Personacode
Oct 03 2016 19:19
looking for honesty. How can i improve this?
JD Tadlock
@jdtdesigns
Oct 03 2016 19:19
@Personacode Don't use <center>. Use .text-center class on your elements you want the text to be centered
<h1 class="text-center">Solid Snake</h1>
Personacode
@Personacode
Oct 03 2016 19:23
Isn't working <style> <h1 class="text-center">Solid Snake </h1> </style>
Sophanarith Sok
@sok213
Oct 03 2016 19:26
@Personacode The solid snake picture is too big. It should maybe only take up half the height of my screen. The timeline section is too far left. So try putting it in a container div so it's more in the middle. I think if you do those things, it would look a lot better.

@Personacode Also, use un-ordered lists for the timeline section like this :
```

<ul>

<ul>
    <li>1972 - Solid Snake was created using the Les Enfants Terrible project.</li>
    <li>1990 - Solid Snake, sent by the US, fights in the Gulf War.</li>
</ul>
@Personacode Like above ^^
@Personacode That's because you're wrapping the html h1 inside a style element
Personacode
@Personacode
Oct 03 2016 19:36
Oy vey. Is there a way to undo changes I have made?
haha I've clearly mucked this all up
That would be a neat feature if it isn't available alreadu
already
Mark
@vinarius
Oct 03 2016 19:42

Why do I get 'undefined' as a result of the following code?

function getWeather() {
// use user coordinates to draw weather info
$.getJSON("api.openweathermap.org/data/2.5/weather?lat=39.9626&lon=-76.7277&APPID=0802a1e93350cb73b28206dfb55d883b", function(json){
console.log(json);
});
}

getWeather();

JD Tadlock
@jdtdesigns
Oct 03 2016 19:45
@vinarius just add 'http://' in front of the url
Mark
@vinarius
Oct 03 2016 19:46
thanks again @jdtdesigns you should be a teacher
CamperBot
@camperbot
Oct 03 2016 19:46
vinarius sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: vinarius already gave jdtdesigns points
JD Tadlock
@jdtdesigns
Oct 03 2016 19:48
@vinarius to my ever decreasing patience i am lol
Mark
@vinarius
Oct 03 2016 19:48
lol i used to teach guitar, i know how it goes
c0d0er
@c0d0er
Oct 03 2016 19:56
@jdtdesigns still checking your code, a lot of new stuff, another question, is the html the shorter the better a good practice?
storbeck
@storbeck
Oct 03 2016 19:58
hello world hope i can learn a lot here
CamperBot
@camperbot
Oct 03 2016 19:58

welcome to FreeCodeCamp @storbeck!

JD Tadlock
@jdtdesigns
Oct 03 2016 19:59
@c0d0er Clean minimal html is best practice. For example, you'll see multiple parent wrappers sometimes, when you only need one. Looking at modern web design tutorials(actual legit tutorials, not just joe shmo's how I did this) will help you understand modern best coding practices and tricks for better all around code.
Stephen James
@sjames1958gm
Oct 03 2016 19:59
@storbeck Welcome
storbeck
@storbeck
Oct 03 2016 19:59
thx @sjames1958gm
CamperBot
@camperbot
Oct 03 2016 19:59
storbeck sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3660 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
c0d0er
@c0d0er
Oct 03 2016 20:00

any recommendations for html css and js?

actual legit tutorials

JD Tadlock
@jdtdesigns
Oct 03 2016 20:01
teamtreehouse.com is a great place
storbeck
@storbeck
Oct 03 2016 20:01
freecodecamp is a good alternative
JD Tadlock
@jdtdesigns
Oct 03 2016 20:01
@storbeck lol, fcc doesn't teach you anything
Richa
@richa-coder
Oct 03 2016 20:01
@sjames1958gm ,such a pro!! soo many browniess u have.
JD Tadlock
@jdtdesigns
Oct 03 2016 20:01
just pushes you to code
storbeck
@storbeck
Oct 03 2016 20:02
oh ok
Stephen James
@sjames1958gm
Oct 03 2016 20:02
@richa-coder :)
Richa
@richa-coder
Oct 03 2016 20:03
@sjames1958gm ,gr8
c0d0er
@c0d0er
Oct 03 2016 20:10
@jdtdesigns in your code example, what does return { init: init }; mean?
JD Tadlock
@jdtdesigns
Oct 03 2016 20:11
@c0d0er return an object with a method named init with a value of the init function
Mark
@vinarius
Oct 03 2016 20:14

getting 'city is not defined' here...

var lat, long, displayCity, displayState;

function getLocation() {
$.getJSON("http://ip-api.com/json", function(json) {
lat = json.lat;
long = json.lon;
displayCity = json.city;
displayState = json.regionName;
console.log(lat, long, city, state);
$("#weatherData").html(displayCity + "<br>" + displayState)
}).done(getWeather);
}

JD Tadlock
@jdtdesigns
Oct 03 2016 20:15
@vinarius because the variable is named displayCity lol
don't slap yourself too hard :D
Mark
@vinarius
Oct 03 2016 20:17
i dont understand the issue
JD Tadlock
@jdtdesigns
Oct 03 2016 20:18
you created a variable named displayCity up top
you set that variable to json.city
then you consoled city which is not a variable
it's displayCity
same as state
c0d0er
@c0d0er
Oct 03 2016 20:19

@jdtdesigns all clear, thanks a lot!

typically, you would create a iife modular class for each module(functional part) of your app

CamperBot
@camperbot
Oct 03 2016 20:19
:cookie: 643 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
c0d0er sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
Mark
@vinarius
Oct 03 2016 20:23
i think i need a break lol
thanks
c0d0er
@c0d0er
Oct 03 2016 21:07
does anybody know why in my both code, use same map jquery, why the hNodesOff+=in twitch code doesnt work, and the HTMLnodes=+ works? here are the two codes: http://codepen.io/c0d0er/pen/RGLxpQ?editors=0010, http://codepen.io/c0d0er/pen/BLmzxk?editors=0010
JD Tadlock
@jdtdesigns
Oct 03 2016 21:23
@c0d0er When you use +=, you're adding the stream string to hNodesOn or hNodesOff and then appending/prepending to the DOM. Because you're not emptying those variables, the stream from last iteration in the .map() is shown again. This repeats, which is why you have multiple clones of the same stream. Just change += to = and it'll work. ;)
c0d0er
@c0d0er
Oct 03 2016 21:29
@jdtdesigns thanks for the solution, but still didnt get it, when i use map, it is an iteration, when i use +=, it adds all the streams, why do i need to use empty() in twitch? in wikipedia viewer i must use empty() since without it user's search results will pile up, could you please explain more?
CamperBot
@camperbot
Oct 03 2016 21:29
c0d0er sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 644 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Oct 03 2016 21:35
@c0d0er console.log the hNodesOn and hNodesOff and you'll see what is happening
c0d0er
@c0d0er
Oct 03 2016 21:45
@jdtdesigns why the streams has multiple time repetation from 1 times to 6 times e.g. freecodecamp 1 time, food 2 times, medrybw 3 times, textchannel 4 times, etc.?
@jdtdesigns if for loop i understand, but this map or $.each, i already get the value directly from the array without any for loop style iteration, why still has this iteration like for loop?
Personacode
@Personacode
Oct 03 2016 21:52
is using a <div> the best way to make a sentence go under another sentence, instead of beside it?
Jason Luboff
@JLuboff
Oct 03 2016 21:59
Anybody here know a thing or two about java and php?
Personacode
@Personacode
Oct 03 2016 22:04
How does this look so far? http://codepen.io/PersonaCode/pen/VKAKgy
Nag
@torontodeveloper
Oct 03 2016 22:19
i can help with java
Rob Gaston
@robgaston1
Oct 03 2016 22:24
@Personacode I have seen <div> used more as a container/wrapper for applying styles and classes. Typically I have seen <p> used more often for this. HTML5 includes several tags such as <section>, <article> and others that can be used. If you need a line break you can use <br> for certain instances.
I do like your tribute! Cool so far! @Personacode
Suzanne Atkinson
@AdventureBear
Oct 03 2016 22:32
@Personacode I like the image!
@Personacode I'm not very familiar with the HTML tags dd & dt, but are you using them here mostly for styling?
@Personacode great start...see if you can work in some of the styles similar to the example project, like a background box of a different color with rounded corners for example, and ahve the list of dates/events more aligned under the title & image.
Jason Luboff
@JLuboff
Oct 03 2016 22:44
@torontodeveloper Just saw your reply...I think I'm going to go a different route then what I was thinking but thank you for replying
CamperBot
@camperbot
Oct 03 2016 22:44
jluboff sends brownie points to @torontodeveloper :sparkles: :thumbsup: :sparkles:
:cookie: 6 | @torontodeveloper |http://www.freecodecamp.com/torontodeveloper
mangyvr
@mangyvr
Oct 03 2016 22:45
does anyone why if when i do this:
  console.log("sess_time_diff" + ", " + sess_time_diff);
  document.getElementById("test_clock").innerHTML = sess_time_diff;   
the console outputs a valid value for sess_time_diff
but the HTML cfdhanges to undefined and not the sess_time_diff value?
iamDio
@iamDio
Oct 03 2016 23:04
in the tribute page how do you get the page to center align without using <div align= "center"> since its no longer valid ? I want it to have a similar alignment as the sample page
__mifflin__
@cdrainxv
Oct 03 2016 23:06
using bootstrap... ex... <div class="container text-center></div>
iamDio
@iamDio
Oct 03 2016 23:07
ohhh
lol thank you
JD Tadlock
@jdtdesigns
Oct 03 2016 23:09
@mangyvr Do you have your code hosted on codepen? If so, can you post the pen?
mangyvr
@mangyvr
Oct 03 2016 23:09
yup
c0d0er
@c0d0er
Oct 03 2016 23:19

@jdtdesigns why the streams has multiple time repetation from 1 times to 6 times e.g. freecodecamp 1 time, food 2 times, medrybw 3 times, textchannel 4 times, etc.?
if for loop i understand, but this map or $.each, i already get the value directly from the array without any for loop style iteration, why still has this iteration like for loop?

console.log the hNodesOn and hNodesOff and you'll see what is happening

could anybody know why in my code, i click online button it run the hide() and show()? i used console.log, the clicking does work, just the hide() doesnt work, here is the link: http://codepen.io/c0d0er/pen/RGLxpQ?editors=1011
JD Tadlock
@jdtdesigns
Oct 03 2016 23:27
@mangyvr Your logic is failing. That's why it's not consoling the number. ;)
mangyvr
@mangyvr
Oct 03 2016 23:29
Haha quite likely... but I think the portion I am testing is supposed to work
"<h3 id='test_clock'></h3>"
"sess_time_diff, 1494985"
"<h3 id='test_clock'>undefined</h3>"
"sess_time_diff, 1493993"
the console outputs the correct number
but the number doesn't come up in HTML
omg i am brain dead
i missed a set of braces in the else if
mangyvr
@mangyvr
Oct 03 2016 23:34
@jdtdesigns thanks for your help
CamperBot
@camperbot
Oct 03 2016 23:34
:cookie: 645 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
mangyvr sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
JD Tadlock
@jdtdesigns
Oct 03 2016 23:41
@c0d0er You're using a variable that is instantiated up top. Inside the .map(), you're using += to create each element containing the stream. Because of this, the variable up top will have the stream that has just been created stored in it. Then when it iterates to the next stream name, you're storing yet another stream in it. On top of that, your outputing the variable to the DOM each iteration. So, when your adding to the variable each time, and outputting it, do you understand why it keeps showing multiple copies of the streams that were added? You shouldn't add to the variable when you only want to add the element of each streamer to the DOM. You aren't building up the variable with all the streams then outputting it. You're adding each streamer to the DOM on each iteration of .map().