These are chat archives for FreeCodeCamp/HelpFrontEnd

12th
Oct 2016
silver537
@silver537
Oct 12 2016 00:11
https is only for professional accounts @chunb @cayou99
cayou99
@cayou99
Oct 12 2016 00:13
@silver537 @chunb I had to add https://crossorigin.me/ in front of my url
silver537
@silver537
Oct 12 2016 00:14
@cayou99 that actually works?
cayou99
@cayou99
Oct 12 2016 00:14
yes
var urlString = "https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&APPID=55e...
$.getJSON(urlString, function(json) { ...
silver537
@silver537
Oct 12 2016 00:17
and i assume you used the navigator api? @cayou99
cayou99
@cayou99
Oct 12 2016 00:17
@silver537 What do you mean?
silver537
@silver537
Oct 12 2016 00:18
navigator.geolocation, for chrome, requires https
kingsleychino
@kingsleychino
Oct 12 2016 00:28
hey guys I want to pass this stage but it is not going
Thomas Mullen
@t-mullen
Oct 12 2016 00:29
@kingsleychino what's the problem?
Jack Lyons
@JackEdwardLyons
Oct 12 2016 00:29

hey guys im trying to create a drag and drop feature and it is 99% working
but the dropped text disappears when i resize the screen
any ideas why

http://codepen.io/JackEdwardLyons/pen/zKjrdN

kingsleychino
@kingsleychino
Oct 12 2016 00:30
@RationalCoding I want to move to the next stage but I can't
Thomas Mullen
@t-mullen
Oct 12 2016 00:32
@JackEdwardLyons The child elements don't fit in their parent when the screen gets smaller. Try:
#movers, 
#catchers,
#matchers {
  display: inline-block;
  float: left;
  margin: 10px;
  width: 30%; /* <----  */
}
Brandon
@chunb
Oct 12 2016 00:33
@silver537 Do you know how to get navigator.geolocation to work on chrome? I made a simple location printing algorithm on codepen that doesn't work
Thomas Mullen
@t-mullen
Oct 12 2016 00:33
That's the next challenge.
Brandon
@chunb
Oct 12 2016 00:33
*using navigator.geolocation
silver537
@silver537
Oct 12 2016 00:35
@chunb in your address bar, add https://
Thomas Mullen
@t-mullen
Oct 12 2016 00:35
@chunb Chrome removed geolocation on insecure origins (http, not https) in Chrome 50
Jack Lyons
@JackEdwardLyons
Oct 12 2016 00:35
hmm that doesnt seem to work sorry @RationalCoding
Thomas Mullen
@t-mullen
Oct 12 2016 00:36
@JackEdwardLyons works for me http://codepen.io/RationalCoding/pen/RGyELb
@silver537 doesn't seem to work still
Thomas Mullen
@t-mullen
Oct 12 2016 00:36
Just looks a mess because the CSS isn't responsive past a certain screen size.
Jack Lyons
@JackEdwardLyons
Oct 12 2016 00:36
are you sure
when iresize the screen it looks off
@RationalCoding
Thomas Mullen
@t-mullen
Oct 12 2016 00:37
Yeah, you'll have to resize the children elements too.
kingsleychino
@kingsleychino
Oct 12 2016 00:37
@RationalCoding how do I start the project
Thomas Mullen
@t-mullen
Oct 12 2016 00:37
But the text isn't disappearing now.
Jack Lyons
@JackEdwardLyons
Oct 12 2016 00:38
true
ill play around
thanks @RationalCoding
CamperBot
@camperbot
Oct 12 2016 00:38
jackedwardlyons sends brownie points to @rationalcoding :sparkles: :thumbsup: :sparkles:
:cookie: 262 | @rationalcoding |http://www.freecodecamp.com/rationalcoding
kingsleychino
@kingsleychino
Oct 12 2016 00:38
@RationalCoding help me
Thomas Mullen
@t-mullen
Oct 12 2016 00:38
@chunb you didn't Quick Add jQuery in that codepen
It works if you do.
Haha what do you want help with @kingsleychino
Brandon
@chunb
Oct 12 2016 00:39
@RationalCoding Makes sense :) thanks!
CamperBot
@camperbot
Oct 12 2016 00:39
chunb sends brownie points to @rationalcoding :sparkles: :thumbsup: :sparkles:
:cookie: 263 | @rationalcoding |http://www.freecodecamp.com/rationalcoding
kingsleychino
@kingsleychino
Oct 12 2016 00:39
@RationalCoding how to start it
silver537
@silver537
Oct 12 2016 00:40
@chunb i was about to tell you that.
Brandon
@chunb
Oct 12 2016 00:41
@silver537 i'm still pretty new to this. I keep forgetting to quick-add libraries. Thanks
CamperBot
@camperbot
Oct 12 2016 00:41
chunb sends brownie points to @silver537 :sparkles: :thumbsup: :sparkles:
:cookie: 620 | @silver537 |http://www.freecodecamp.com/silver537
kingsleychino
@kingsleychino
Oct 12 2016 00:41
@RationalCoding talk to me please
Thomas Mullen
@t-mullen
Oct 12 2016 00:41
@kingsleychino The hardest part of any journey is the first keystroke? :p
Start with something small that you're interested in. Big projects come from little ones.
kingsleychino
@kingsleychino
Oct 12 2016 00:42
@RationalCoding yes I no that
Thomas Mullen
@t-mullen
Oct 12 2016 00:43
Like Jack's drag and drop experiment could turn into a full library like interact.js if he stuck with it.
Might not, but it's better than trying to start some massive project.
Yacob Gugsa
@yacobgugsa
Oct 12 2016 00:43
Hi. I'm working on the tribute page. How do you place an <hr> element in the white space below the container, but also maintain the same width as the container? I'm having trouble doing that.
I don't know what the protocol is, whether I link to my CodePen or not...
Thomas Mullen
@t-mullen
Oct 12 2016 00:44
Code or Codepen is fine @yacobgugsa
The horizontal rule fits within the width of the container, but doesn't clear the container itself and appear in the whitespace below it.
I don't want to be spoonfed the answer, but some tips would be appreciated, since I've been working on a solution for about 35 minutes with no luck. I've fiddled with margins and padding, placing internal divs within the container, etc.
Thomas Mullen
@t-mullen
Oct 12 2016 00:52
@yacobgugsa you're missing a closing </div> tag for the container after line 29.
Removing the margin-bottom: -30px and putting a <hr> tag after that new closing div tag will give you a line below the container
Negative margins are evil btw
Yacob Gugsa
@yacobgugsa
Oct 12 2016 01:01
Now the <hr> clears the container, but it now stretches across the whole page, and text below the <hr> is not centered. Which is exactly why I didn't want to have them outside the container in the first place. http://codepen.io/yacobgugsa/pen/VKXQyW
Yacob Gugsa
@yacobgugsa
Oct 12 2016 01:11
Scratch that...I'm still tweaking the HTML. I'll be back.
Thomas Mullen
@t-mullen
Oct 12 2016 01:15
You could add another container after the HR?
Yacob Gugsa
@yacobgugsa
Oct 12 2016 01:19
This is what I ended up doing. I always thought that your whole web page should be wrapped in one container, but then I realized that since a .container has fixed width proportional to the width of the viewport, I could just wrap the footer in a second container, and copy and paste any styles I want to carry over. That did the trick. I also modified the padding of the inner-contents div. Here's what I have so far: http://codepen.io/yacobgugsa/pen/VKXQyW?editors=1100
@RationalCoding
XUAGramGaming
@XUAGramGaming
Oct 12 2016 01:22

Does anyone know why this isn't working, I think its just a very simple mistake...

<body>
<div class="main">
<p class="header" id="hm">FFC </p>
<p class="header">Weather App </p>
<p id="quote">D </p>
</div>
</body>

Sorry, didnt paste rest of code one sec

HTML:

<body>
<div class="main">
<p class="header" id="hm">FFC </p>
<p class="header">Weather App </p>
<p id="quote">D </p>
</div>
</body>
JS:
$(document).ready(function() {
var randomQuote = "hi";
$("#quote").text(randomQuote);

});

Daniel
@DanielMW34
Oct 12 2016 01:25
I seem to remember some challenges from a while back which involved moving icons and doing some things like slow fades with jQuery however, I cannot seem to find them now. Does anyone recall seeing / doing these as well? Any idea if they still exist as part of the freeCodeCamp front-end curriculum ?
XUAGramGaming
@XUAGramGaming
Oct 12 2016 01:30
To my previous question, I ended up not adding JQuery to my JS reference library ^.^, I KNEW it was a stupid mistake lol
joopt
@joopt
Oct 12 2016 01:49
hi guys i'm attempting the build a tribute page challenge and I've managed to create a navigation bar but how do I make the buttons direct me to parts of my page?
opps i mean the Build a Personal Portfolio Webpage challenge
Yacob Gugsa
@yacobgugsa
Oct 12 2016 01:56
How do you force h3 and blockquote elements to the left so that they are in a line with the unordered list, instead of going all the way to the left of the container? I have no idea how to accomplish that. Maybe I should remove text-center from the container wrapper?
Walid Ashri
@walidashri
Oct 12 2016 02:04
@yacobgugsa wrap them with div or aside give it left float in css
Yacob Gugsa
@yacobgugsa
Oct 12 2016 02:05
I apologize, I'm having trouble following. What do you mean by "aside"?
Walid Ashri
@walidashri
Oct 12 2016 02:06
Monesul Haque
@mones-cse
Oct 12 2016 02:08

hi guys
i just done with tic tac toe game
but i am not satisfy with the color
any suggestion will be great

http://codepen.io/m1s/full/wzmXQQ/

Yacob Gugsa
@yacobgugsa
Oct 12 2016 02:10
Oh, thank you @walidashri
CamperBot
@camperbot
Oct 12 2016 02:10
yacobgugsa sends brownie points to @walidashri :sparkles: :thumbsup: :sparkles:
:cookie: 361 | @walidashri |http://www.freecodecamp.com/walidashri
Brandon
@chunb
Oct 12 2016 02:27
I'm just curious: for the "Show the Local Weather" project, do you need to sign up to the open weather API to get an API key? Out of curiosity, has anyone found a work-around?
Silv P.
@spopov27
Oct 12 2016 02:42
yeah you pretty much have to sign up for an API key. I looked for a while and couldn't find any decent workarounds.
you can only send like 2-3 requests every 10 minutes even with a key before it stops responding so make sure the auto-update in codepen is off
tanglongyang
@tanglongyang
Oct 12 2016 02:54
ok i got it
Santiago Chopitea
@raka26
Oct 12 2016 02:57
hello!
Shiva Shinde
@ShivaShinde
Oct 12 2016 03:04

Need some help Everyone :)

I am working on SB Admin 2 responsive theme, trying to integrate some dashboard into it, I have javascript embed code of this public dashboard. How do I start basically?

Greg Duncan
@GregatGit
Oct 12 2016 03:15
@mones-cse Awesome game - one of the best I've seen
Monesul Haque
@mones-cse
Oct 12 2016 03:18
@GregatGit you are so kind
i am glad some one like it :)
but honestly it felt like something messing couldn't figure it out :(
Greg Duncan
@GregatGit
Oct 12 2016 03:21
@mones-cse I wouldn't worry to much - this is definitely one of the better projects going around. Here is a color guide that may help https://material.google.com/style/color.html#
__mifflin__
@cdrainxv
Oct 12 2016 03:23
@mones-cse: it looks and plays #AMAZING!!!
Monesul Haque
@mones-cse
Oct 12 2016 03:26
@GregatGit i actually use http://materializecss.com/
it is based on google martrial art the link you just shared.
@cdrainxv i am glad you liked it :D
__mifflin__
@cdrainxv
Oct 12 2016 03:31
@mones-cse: I’m looking through your code and learning stuff I don’t know… when I get to that project mine will probably be just a skeleton… while your’s is a fully alive human being.
Monesul Haque
@mones-cse
Oct 12 2016 03:37
@cdrainxv
don't worry it take me 7 day to only implement the minmax algorithm
this project is hard specially when implementing the minmax algorithm with recursion
during 3rd day i almost give up decide to look at some other people's code then any how i manage to stop myself.
I am sure if you take time you will definitely make much more better than mine.
__mifflin__
@cdrainxv
Oct 12 2016 03:40
@mones-cse: that’s best-case scenario for me… i’ll work intensely then give up for a day or two… then come back… and repeat… ahah
Monesul Haque
@mones-cse
Oct 12 2016 03:42
@cdrainxv :smiley:
Kevin Janada Roy Ardian
@kevinjanada
Oct 12 2016 03:57

hey guys, hows it going?
Could i get some help with my code?

I'm not sure why my button works only once.
http://codepen.io/kevinjanada/pen/ORkdqk?editors=1010

silver537
@silver537
Oct 12 2016 04:05
i need to append some html using jQuery... the same structure with different data using a loop.

this is my html wrapper.

<div id="container2">
  <ul>
  </ul>
</div>

i need something like:

<li>
  <div>
    <div>
    </div>
  </div>
</li>
but i cant seem to figure out how to do it yet.
help would be greatly appreciated.
CamperBot
@camperbot
Oct 12 2016 04:09
no wiki entry for: would be greatly appreciated
Chad Powell
@cjpowellaz
Oct 12 2016 04:16
good evening everyone. Been working on the Show Local Weather challenge and really stuck on the AJAX call, here is my CodePen, https://codepen.io/cjpowell/pen/zKwPqv
I can put the URL in a browser and pull the data, I am not sure how to get the data so show in my app now
Mike White
@MikeWhite-
Oct 12 2016 04:21
Hi can someone help me with this error?
bootstrap's javascript requires jquery
I have jquery added and played around with the order but still not working?
Monesul Haque
@mones-cse
Oct 12 2016 04:47
@kevinjanada try
  $('#temp').html('<h2>'+data.main.temp+' C</h2>');
Kevin Janada Roy Ardian
@kevinjanada
Oct 12 2016 04:49
@mones-cse hah, cool that works! thanks!
CamperBot
@camperbot
Oct 12 2016 04:49
kevinjanada sends brownie points to @mones-cse :sparkles: :thumbsup: :sparkles:
:cookie: 417 | @mones-cse |http://www.freecodecamp.com/mones-cse
Kevin Janada Roy Ardian
@kevinjanada
Oct 12 2016 04:49
how come it works with html? if you dont mind explaining
Sune Justesen
@YankeeDK
Oct 12 2016 04:53
@cjpowellaz You need to put something in your function under success. Like you can premake some <p> tags and then set their text with $("#p id").text(your api data here)
Monesul Haque
@mones-cse
Oct 12 2016 04:54

@kevinjanada
replaceWith
replace the whole

<div id="temp">
  Temperatures
</div>

with

<h2>78.62 F</h2>

so next time when you press the button it do not find any div with temp id

Sune Justesen
@YankeeDK
Oct 12 2016 04:54
@kevinjanada What did you have before .html()?
Kevin Janada Roy Ardian
@kevinjanada
Oct 12 2016 04:55
@mones-cse aah ok, i get it. thanks
CamperBot
@camperbot
Oct 12 2016 04:55
kevinjanada sends brownie points to @mones-cse :sparkles: :thumbsup: :sparkles:
:warning: kevinjanada already gave mones-cse points
Kevin Janada Roy Ardian
@kevinjanada
Oct 12 2016 04:55
@YankeeDK i had .replaceWith()
Sune Justesen
@YankeeDK
Oct 12 2016 04:57
ah ok
Monesul Haque
@mones-cse
Oct 12 2016 05:01
guys i am about to start Simon Game
any thing like library method or algorithm i need to know before start ?
Amit Patel
@AmitP88
Oct 12 2016 05:27
hey guys, I need a little help with the Word Blanks challenge
I can only seem to pass 2/3 of the requirements

here's my code:
function wordBlanks(myNoun, myAdjective, myVerb, myAdverb) {
var result = "";
// Your code below this line
myNoun = "dog";
myAdjective = "big";
myVerb = "ran";
myAdverb = "quickly";

myNoun = "cat";
myAdjective = "little";
myVerb = "hit";
myAdverb = "slowly";



result = "The " + myAdjective + " " + myNoun + " " + myVerb + " " + myAdverb;

// Your code above this line
return result;
}

// Change the words here to test your function
wordBlanks("dog", "big", "ran", "quickly");

kirbyedy
@kirbyedy
Oct 12 2016 05:45
remove this:
myNoun = "dog";
myAdjective = "big";
myVerb = "ran";
myAdverb = "quickly";
HBarefoot
@Elgalo87
Oct 12 2016 06:05

// Setup
var collection = {
    "2548": {
      "album": "Slippery When Wet",
      "artist": "Bon Jovi",
      "tracks": [ 
        "Let It Rock", 
        "You Give Love a Bad Name" 
      ]
    },
    "2468": {
      "album": "1999",
      "artist": "Prince",
      "tracks": [ 
        "1999", 
        "Little Red Corvette" 
      ]
    },
    "1245": {
      "artist": "Robert Palmer",
      "tracks": [ ]
    },
    "5439": {
      "album": "ABBA Gold"
    }
};
// Keep a copy of the collection for tests
var collectionCopy = JSON.parse(JSON.stringify(collection));

// Only change code below this line
function updateRecords(id, prop, value) {

  return collection;
}

// Alter values below to test your code
updateRecords(5439, "artist", "ABBA");
can somebody help me to understand this
Monesul Haque
@mones-cse
Oct 12 2016 06:08
guys how can i make c1 div into center horizontally and vertically
http://codepen.io/m1s/pen/GjdLjV
kirbyedy
@kirbyedy
Oct 12 2016 06:10
@mones-cse have you tried with flexbox
Monesul Haque
@mones-cse
Oct 12 2016 06:10
@kirbyedy no
what is flexbox
kirbyedy
@kirbyedy
Oct 12 2016 06:11
makes your life easier
actually this one is better and shorter :)
Monesul Haque
@mones-cse
Oct 12 2016 06:12
@kirbyedy thanks :)
just quick question
is flexbox a library or just css property ?
CamperBot
@camperbot
Oct 12 2016 06:12
mones-cse sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1447 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
kirbyedy
@kirbyedy
Oct 12 2016 06:12
display: flex and off you go
its a css feature
no extra libraries
worth learning
Monesul Haque
@mones-cse
Oct 12 2016 06:13
@kirbyedy thanks :D
CamperBot
@camperbot
Oct 12 2016 06:13
mones-cse sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:warning: mones-cse already gave kirbyedy points
vínαч puppαl
@vinaypuppal
Oct 12 2016 06:15
@mones-cse even this for flexbox http://flexbox.io
Monesul Haque
@mones-cse
Oct 12 2016 06:22
@kirbyedy you are life saver man :D
watched the 2nd link and already implement it :)
@vinaypuppal thanks for the link checking out :)
CamperBot
@camperbot
Oct 12 2016 06:22
mones-cse sends brownie points to @kirbyedy and @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: mones-cse already gave kirbyedy points
:cookie: 607 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
kirbyedy
@kirbyedy
Oct 12 2016 06:26
:thumbsup:
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 06:34
@mones-cse https://css-tricks.com/snippets/css/a-guide-to-flexbox/ check this out too. BTW this page is awesome, all the problems I had with css, was not on stackoverflow, but here on csstricks
Monesul Haque
@mones-cse
Oct 12 2016 06:38
@MrBruckner
thanks man all those information in such short time are overwhelming
but feels like it will save a lot of time in future :)
CamperBot
@camperbot
Oct 12 2016 06:38
mones-cse sends brownie points to @mrbruckner :sparkles: :thumbsup: :sparkles:
:cookie: 307 | @mrbruckner |http://www.freecodecamp.com/mrbruckner
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 06:40
yeah, I know what you feel, i see DevTips up there, I suggest you watch all of his videos, and think about each one for a moment. This guy is awesome, because of his origins as developer. He is an artist that uses HTML CSS and JS as his canvas. Literally he describes web pages with these tools, it's super effective to learn from his tuts! :)
and don't give up
:D
Chris Cullen
@123xylem
Oct 12 2016 07:11
function (color(){
  $("#"+panelId).prop(background-color = White)   //trying to change the backgound color of a panel on press... How do i get to the panels background color?
})
#BR{
  border:2px solid black;
    position: absolute;
      border-bottom-right-radius: 110%;   //THIS IS THE PANEL
  background-color: blue;
  width: 50%;
  height: 50%;
  left: 55%;
  right: 0%;
  bottom: 0%;
  top: 55%;
}
can you help me change the panels Background color in my function... How do i access it? This is what i tried but its not working
Evan W
@Dirtier
Oct 12 2016 07:12
Alright boysss, gimme your opinion. Btw, doesn't look that great in here for some reason, looks better in codepen
it's responsive on phones and stuff, idk why the embedded version is so different, maybe bc it's so wide?
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 07:18
@Dirtier looks awesome!
kirbyedy
@kirbyedy
Oct 12 2016 07:19
:thumbsup:
Evan W
@Dirtier
Oct 12 2016 07:27
thanks :D
joopt
@joopt
Oct 12 2016 07:48
can someone help me with my portfolio
I dont know why the navigation bar and the image at the bottom aren't perfectly aligned
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 07:50
@joopt Add left: 0; to your nav bar
joopt
@joopt
Oct 12 2016 07:52
@MrBruckner thank you!!!
CamperBot
@camperbot
Oct 12 2016 07:52
joopt sends brownie points to @mrbruckner :sparkles: :thumbsup: :sparkles:
:cookie: 309 | @mrbruckner |http://www.freecodecamp.com/mrbruckner
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 07:58
@joopt you can remove styling from h2 in 11 line, and add col-md-12 to div above
it fixes issues with width
@joopt img-responsive class in img fixes it
@joopt col-md-offset-4 aligns img center on line ###13
@joopt you forgot to close </div> wrapping cols and embedded another row div
it should be ok now
tell me if all works for you
joopt
@joopt
Oct 12 2016 08:03
oh ok
I don't get why my h2 element covers the whole page but my other elements are slightly indented
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 08:05
because your h2 element is not in container class
try wrapping line 9 to line 12 in <div class="container"> ... </div>
save your changes so I can check what you did so far, and guide you further
joopt
@joopt
Oct 12 2016 08:08
@MrBruckner i wrapped it in container but now the image and the text is not not the same line anymore
ok i will save now
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 08:09
first of all: <div class="row container orangebackground"> delete container here
then
do this:
<div class="container">
  <div class="row container orangebackground">
    <div class="col-md-8">
    <h2>My name is Wesley Cao I am a self-taught programmer currently learning from FreeCodeCamp where I have found my passion for coding. I've always loved how apps have made my life easier in so many ways, and because of this I want to pursue a career in software development to continue to improve the lives of myself and others.</h2>
    </div>
  <div class="col-md-offset-4">  
  <a href="https://www.freecodecamp.com/joopt"><img class="img-responsive orangeborder" src="http://i.imgur.com/mYRRzym.png"></img></a>
    </div>
</div>
</div>
wrap in container ;)
also
<div class="col-md-4">  
  <a href="https://www.freecodecamp.com/joopt"><img class="img-responsive orangeborder" src="http://i.imgur.com/mYRRzym.png"></img></a>
    </div>
 <div class="container">
  <div class="row orangebackground">
    <div class="col-md-8">
      <h2>My name is Wesley Cao I am a self-taught programmer currently learning from FreeCodeCamp where I have found my passion for coding. I've always loved how apps have made my life easier in so many ways, and because of this I want to pursue a career in software development to continue to improve the lives of myself and others.</h2>
    </div>
    <div class="col-md-4">
      <a href="https://www.freecodecamp.com/joopt"><img class="img-responsive orangeborder" src="http://i.imgur.com/mYRRzym.png"></img>
      </a>
    </div>
  </div>
</div>
it looks ok for me like this
joopt
@joopt
Oct 12 2016 08:14
thanks so much!
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 08:14
yeah no problem ;)
joopt
@joopt
Oct 12 2016 08:14
should i remove the container fluid div class in the beginning?
nvm
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 08:15
you know where to find me if anything ;)
joopt
@joopt
Oct 12 2016 08:19
thanks man will do
TasmaniaKrama
@TasmaniaKrama
Oct 12 2016 08:55
Hello I need help with Counting cards problem.

var count = 0;

function cc(card) {
// Only change code below this line
if (card == 2 || card == 3 || card == 4 || card == 5 || card == 6) {
var count++;
}

at the var count++; it shows red dot
missing semicolon
Brady
@soccer99
Oct 12 2016 08:57
Remove the “var” from the count++
You’re reinitializing the variable
You want it to reference the variable count that you set at the top
TasmaniaKrama
@TasmaniaKrama
Oct 12 2016 08:58
ohh
But isn't var inside function to keep it local?
Brady
@soccer99
Oct 12 2016 08:59
You don’t want it local in this case. The count needs to be kept throughout.
If you keep it local in the function cc then it’d reset every time you count a new card.
And you cant initialize a variable with ++ as it has nothing to increase from
TasmaniaKrama
@TasmaniaKrama
Oct 12 2016 09:02
Ahh yes my mistake. I approached the task as if someone was going to input all the data like an array.
Instead someone would input card value one by one
TasmaniaKrama
@TasmaniaKrama
Oct 12 2016 09:17
Thank you @soccer99
CamperBot
@camperbot
Oct 12 2016 09:17
tasmaniakrama sends brownie points to @soccer99 :sparkles: :thumbsup: :sparkles:
:cookie: 307 | @soccer99 |http://www.freecodecamp.com/soccer99
Allan Pooley
@AllanPooley
Oct 12 2016 09:33
Good morning, good afternoon or good evening! :grin:
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 09:33
@AllanPooley hi
Allan Pooley
@AllanPooley
Oct 12 2016 09:34
Was wondering if anyone might be able to help me with bootstrap responsive design on my portfolio challenge, anyone up for the challenge :grin: ?
When it scales down to a mobile (small or extra small screen) some of the text overlaps to an unseeable part of the screen (to the left)
Is this due to the way I have done margins and padding in my css?
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 09:37
let me check ;)
Allan Pooley
@AllanPooley
Oct 12 2016 09:39
Cheers @MrBruckner :smile:

Another issue is when the bootstrap grid switches from two side-by-side col-md-6, to one col-sm-12, the pictures pull right.

This is the intended effect for when there are two columns, having the image next to the textual description. But when it scales to single column, having the images still pull right looks odd. Is there any better way of implementing what I'm trying to do here?

Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 09:42
@AllanPooley I don't know it would satisfy you: line 14 i added container class
nooo, it's not good
Allan Pooley
@AllanPooley
Oct 12 2016 09:43
:grin:
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 09:43
but, fluid-container seems to break the page
Allan Pooley
@AllanPooley
Oct 12 2016 09:44
I think I have one wrapping my entire HTML code
Are you from Poland Piotr? What part if so?
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 09:44
container-fluid?
yeah, im from Wroclaw
try container-fluid
and about the pictures...
Allan Pooley
@AllanPooley
Oct 12 2016 09:45
Oh... @ line 14 I wrote: <div class="fluid-container">
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 09:45
yeah
Allan Pooley
@AllanPooley
Oct 12 2016 09:45
but that must do nothing, since the class does not exist
my bad!
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 09:45
:D
Allan Pooley
@AllanPooley
Oct 12 2016 09:46
blob
I still have the same problem :S
My family immigrated to Australia from Poland :grin: I visited Wroclaw at the start of the year!! I taught in primary schools in lower silesia :smile: I visited schools in Lubin, Luban, Wlen, Kunica, Olesnica
Is Autumn in Poland? Getting colder?
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 09:49
yeah it's like about 0 Celsius
and raining
weird
when i change Line 14 it works fine
to container fluid
Allan Pooley
@AllanPooley
Oct 12 2016 09:51
My bad, the changes hadn't rolled over on my test page yet
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 09:51
container.JPG
oh
ok
Allan Pooley
@AllanPooley
Oct 12 2016 09:51
Thanks for the help @MrBruckner :grin:
CamperBot
@camperbot
Oct 12 2016 09:51
allanpooley sends brownie points to @mrbruckner :sparkles: :thumbsup: :sparkles:
:cookie: 311 | @mrbruckner |http://www.freecodecamp.com/mrbruckner
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 09:52
If you visit Wroclaw, I could give you pub-tour if you want ;)
Allan Pooley
@AllanPooley
Oct 12 2016 09:53
One day Piotr, one day! The same if you come to Australia, I'll show you where all the kangaroos hang out :sunglasses:
Monesul Haque
@mones-cse
Oct 12 2016 10:03
What is the difference between start vs on/off button in Simon Game?
Richa
@richa-coder
Oct 12 2016 10:44
@mones-cse ,Start is something like RESET or NEW GAME
If the game is "off", no other controls/buttons should work until you set it to "on".
Simon Cordova
@gbsimon87
Oct 12 2016 10:52
Hey guys...can anyone provide input?
```
$( "#celsiusButton" ).click(function() {
$( "#farButton" ).toggle();
});
```
I've got the far button to display none in the css, but would like to toggle it using jquery
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 11:29
@gbsimon87 you need a state to toggle, you don't toggle anything in your code
TasmaniaKrama
@TasmaniaKrama
Oct 12 2016 11:57

@TasmaniaKrama

// Setup
function phoneticLookup(val) {
var result = "";

// Only change code below this line
var lookup = {
"alpha":"Adams",
"bravo":"Boston",
"charlie":"Chicago",
"delta":"Denver",
"echo":"Easy",
"foxtrot":"Frank",
};
result = lookup[val];

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

// Change this value to test
phoneticLookup("charlie");

// why does this work but when you do result = lookup.val it doesn't?
isn't it supposed to be the same when you use dot notation or bracket notation?

Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 11:58
yeah should be
TasmaniaKrama
@TasmaniaKrama
Oct 12 2016 12:00
I think the difference is the code would look like this ... result = lookup."charlie"; and that doesn't work. where as result = lookup["charlie"] works
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 12:01
if you do result = lookup.val and result = lookup[val] it should work the same
TasmaniaKrama
@TasmaniaKrama
Oct 12 2016 12:02
sadly it doesn't.
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 12:02
oh, sorry ;)
Jeff Greenlee
@JeffGreenlee42
Oct 12 2016 12:33
hello world
CamperBot
@camperbot
Oct 12 2016 12:33

welcome to FreeCodeCamp @JeffGreenlee42!

Jeff Greenlee
@JeffGreenlee42
Oct 12 2016 12:34
Hey would anyone be willing to my code and tell me why the navbar collapsable button won't open?
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 12:38
@JeffGreenlee42 hi, you don't have any action in jquery, it wont open
in Javascript*
Stephen James
@sjames1958gm
Oct 12 2016 12:40
@TasmaniaKrama result = lookup."charlie"this is bad syntax - unexpected string.
Jeff Greenlee
@JeffGreenlee42
Oct 12 2016 12:40
Hmm.. I've got bootstrap loaded!
@MrBruckner Not sure I understand.. I've been able to load examples of the collabsable button from codePen, I don't see where they are using JQuery either!
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 12:45
hmm
Jeff Greenlee
@JeffGreenlee42
Oct 12 2016 12:49
Hmmm.. Oh.. Ok.. I think I have to add a target ID...
Amit Patel
@AmitP88
Oct 12 2016 12:51
hey guys, have any of you completed the Stand in Line challenge on FCC?
it's in the JS basics set
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 12:52
yeah, what's the problem @AmitP88
Amit Patel
@AmitP88
Oct 12 2016 12:52

well, I can't seem to figure out how to approach writing the function. so far here's my code: function nextInLine(arr, item) {
// Your code here

arr.push(6);
arr.shift(1);

return item; // Change this line
}

// Test Setup
var testArr = [1,2,3,4,5];

// Display Code
console.log("Before: " + JSON.stringify(testArr));
console.log(nextInLine(testArr, 6)); // Modify this line to test
console.log("After: " + JSON.stringify(testArr));

I got the first requirement passed but the other 3 won't and I've been trying out stuff but it hasn't worked
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 12:53
from the instructions it says you need to push item to the end
Stephen James
@sjames1958gm
Oct 12 2016 12:53
@AmitP88 You should be using item, not a hard coded 6, and return the result of shift
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 12:53
and then
return shifted element after you shift it
Amit Patel
@AmitP88
Oct 12 2016 12:54
so like item.push(); ?
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 12:54
no no
you target where you want to push: in your case it is your array
so
`arr.push(argument)
arr.push(argument)
argument is the number you want to push
so
arr.push(item)
Amit Patel
@AmitP88
Oct 12 2016 12:55
ahh I see
and then return arr(); ?
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 12:55
the shift function cuts off the first element of the array
and returns this element
so
Amit Patel
@AmitP88
Oct 12 2016 12:56
arr.shift(item);?
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 12:56
close
you don't want to shift item
the function doesn't take arguments
Amit Patel
@AmitP88
Oct 12 2016 12:57
or just arr.shift(); ?
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 12:57
so: arr.shift() the fact that shift returns a value
Amit Patel
@AmitP88
Oct 12 2016 12:57
ahhh I see
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 12:57
should tell you something
you can return the number return arr.shift()
does it make sense to you?
Amit Patel
@AmitP88
Oct 12 2016 12:57
yeah, makes more sense now that I think about it
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 12:58
make sure you get good understanding of this
read about it
Amit Patel
@AmitP88
Oct 12 2016 12:59
yeah, I wrote down quick notes on the prev challenges on push, pop, shift, and unshift
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 12:59
good
Amit Patel
@AmitP88
Oct 12 2016 12:59
I feel like I'm overthinking this because I tend to feel like I need to use the actual values from the array
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 13:00
yeah, sometimes we all tend to overthink everything :)
Stephen James
@sjames1958gm
Oct 12 2016 13:00
@AmitP88 Generally your function should not use hardcoded values from the tests.
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 13:00
@sjames1958gm exactly
Amit Patel
@AmitP88
Oct 12 2016 13:00
@sjames1958gm ah ok
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 13:00
you want your code transparent ;)
Amit Patel
@AmitP88
Oct 12 2016 13:00
lol yeah, from the past few challenges, I'm starting to get that :)
hmm, so when I wrote return.arr.shift(); all the requirements did not pass and the console didn't really tell me much except that before:[1,2,3,4,5] 2 After: [3,4,5,6]
Piotr Małecki-Jurek
@piotr-m-jurek
Oct 12 2016 13:02
return arr.shift()
no dot
Amit Patel
@AmitP88
Oct 12 2016 13:03
oh yeah, that's what I wrote actually, my bad
ah nvm, I just had to remove the arr.shift(); part from the function and just keep it in the return statement
it's passed now :)
I definitely gotta read up on that more
but it does seem a lot more simple now that you guys explained it to me
thanks @MrBruckner @sjames1958gm :)
CamperBot
@camperbot
Oct 12 2016 13:05
amitp88 sends brownie points to @mrbruckner and @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3799 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
:cookie: 314 | @mrbruckner |http://www.freecodecamp.com/mrbruckner
Stephen James
@sjames1958gm
Oct 12 2016 13:06
@AmitP88 :+1:
Spyrantis Theodoros
@thodorisanta
Oct 12 2016 13:24

http://codepen.io/oshikurou/pen/LkvoyX

this is my RANDOM QUOTE GENERATOR proeject.
and i have no idea whatsoever on how to make the "tweet" button work. Can you help me please?

karocann
@karocann
Oct 12 2016 13:43

working on weather challenge, trying to change weather image. My HTML for the image is:

<div>
<img src = "" id="icon" >
<div>

My Jquery is:

if (weatherType = "clear sky") {
$("#icon").attr("src", "http://openweathermap.org/img/w/01d.png");
} else if (weatherType = "few clouds") {
$("#icon").attr("src", "http://openweathermap.org/img/w/02d.png");

I can't get the images to change based on the weatherType. What is wrong?

ZeusDeveloper
@ZeusDeveloper
Oct 12 2016 13:43
$(function() {

    $("input,textarea").jqBootstrapValidation({
        preventSubmit: true,
        submitError: function($form, event, errors) {
            // additional error messages or events
        },
        submitSuccess: function($form, event) {
            event.preventDefault(); // prevent default submit behaviour
            // get values from FORM
            var name = $("input#name").val();
            var email = $("input#email").val();
            var subject = $("input#subject").val();
            var message = $("textarea#message").val();
            var firstName = name; // For Success/Failure Message*/
            // Check for white space in name for Success/Fail message
            var dat={"name":name,"email":email,"subject":subject,"message":messsage};
            if(firstName.indexOf(' ') >= 0) {
                firstName = name.split(' ').slice(0, -1).join(' ');
            }
            $.ajax({
                url: '/signup',
                type: 'POST',
                dataType : 'json',
                data: JSON.stringify(dat),/*{
                    name: name,
                    subject: subject,
                    email: email,
                    message: message
                },*/
                cache: false,
                success: function(result) {
                    // Success message
                    $('#success').html("<div class='alert alert-success'>");
                    $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-success')
                        .append("<strong>Your message has been sent. </strong>");
                    $('#success > .alert-success')
                        .append('</div>');

                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
                error: function(error) {
                    // Fail message
                    $('#success').html("<div class='alert alert-danger'>");
                    $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!");
                    $('#success > .alert-danger').append('</div>');
                    //clear all fields
                    $('#contactForm').trigger("reset");
                    console.log(error);
                },
            })
        },
        filter: function() {
            return $(this).is(":visible");
        },
    });

    // $("a[data-toggle=\"tab\"]").click(function(e) {
    //     e.preventDefault();
    //     $(this).tab("show");
    // });
});
This ajax POSTs form data to a URL
but it is working anymore
can somebody find any error in syntax?
Marco Galvan
@Gezo21
Oct 12 2016 13:44
This message was deleted
@thodorisanta it looks good, but the point is to get the quotes from an API using jquery and ajax
ZeusDeveloper
@ZeusDeveloper
Oct 12 2016 13:55
can somebody help?
?
?
?
?
its not working
karocann
@karocann
Oct 12 2016 13:58
is anyone helping?
Spyrantis Theodoros
@thodorisanta
Oct 12 2016 14:28
@Gezo21 WHY? the instructions doesnt mention anything like that. and how am i suppose to do that?
Amit Patel
@AmitP88
Oct 12 2016 14:47
hey guys, I'm a little stuck on my Counting Card challenge. I think i'm close, I have 4/7 tests passed, but i'm stuck.
here's my code:

var count = 0;

function cc(card) {
// Only change code below this line

switch(card) {
case 2:
case 3:
case 4:
case 5:
case 6:
count++;
break;

case 7:
case 8:
case 9:
  break;      
  default:

case 10:
case 'J':
case 'Q':
case 'K':
case 'A':
  count--; 

}

if (count > 0) {
return count + " Bet";
}

else if (count === 0) {
return count + " Hold";
}

else if (count <= -1) {
return count + "Hold";
}

// Only change code above this line
}

// Add/remove calls to test your function.
// Note: Only the last will display
cc(2); cc(3); cc(4); cc('5'); cc('6');

I think I have to make the count for each individual case, but I'm not sure, still playing around with it
Stephen James
@sjames1958gm
Oct 12 2016 14:50

@AmitP88 missing a space return count + "Hold"; in your last return .
Also you don't need

else if (count === 0) {
return count + " Hold";
}
else if (count <= -1) {
return count + "Hold";
}

simply:

else {
return count + " Hold";
}
You don't need else if if the else if tests the opposite of the if -
if (something) {
}
else if (not something) {
}
should be 
if (something) {
}
else {
}
Amit Patel
@AmitP88
Oct 12 2016 14:52
ah ok. actually, when I fixed the space issue, I passed all the tests lol
Pradnya Joshi
@pradxj07
Oct 12 2016 14:52
@karoCann, what error are you getting?
Amit Patel
@AmitP88
Oct 12 2016 14:52
ah ok, I'll definitely take note of that @sjames1958gm
@sjames1958gm thanks! :)
CamperBot
@camperbot
Oct 12 2016 14:52
amitp88 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3800 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Amit Patel
@AmitP88
Oct 12 2016 14:53
that'll save me headache in the long run lol
Stephen James
@sjames1958gm
Oct 12 2016 14:53
@AmitP88 :+1:
Amit Patel
@AmitP88
Oct 12 2016 14:54
lol I thought I was missing some functionality but it was just that missing space! lol omg
Miczysko
@Miczysko
Oct 12 2016 14:54
@karocann change ur = to ===
if (weatherType = "clear sky") {
$("#icon").attr("src", "http://openweathermap.org/img/w/01d.png");
} else if (weatherType = "few clouds") {
$("#icon").attr("src", "http://openweathermap.org/img/w/02d.png");
ur assignin weatherType to "clear sky" string
Stephen James
@sjames1958gm
Oct 12 2016 14:57
@AmitP88 Start with the simplest errors first, typos, missing spaces, etc.
Amit Patel
@AmitP88
Oct 12 2016 14:58
@sjames1958gm true. I mean I thought I included the space by using " Hold" but I guess that didn't count
karocann
@karocann
Oct 12 2016 15:01
@Miczysko Good idea, I tried that but it still doesn't work. I did console.log and the weather today is "few clouds", but the console outputs "clear sky".
karocann
@karocann
Oct 12 2016 15:07
@pradxj07 in my codepen: http://codepen.io/stmoen/pen/amYNVk?editors=1111, I need to change the wweather icon dependingon the weather conditions. Today the weather conditions are few clouds, which is correct, but the icone that shows up is for clear sky. I did a console.log and it outputs clear sky, but html output shows few clouds, which is correct.
Stephen James
@sjames1958gm
Oct 12 2016 15:08
@karocann as @Miczysko said above you are assigning here = not testing for equality === `if (weatherType = "clear sky") {
Marco Galvan
@Gezo21
Oct 12 2016 15:08
@thodorisanta well, that's the way the example works, and the idea is to use the Ajax knowlegde from the lessons before. Honestly I'm trying to figure it out, but I think that's the challenge. Also API's are the way for the Twitter functionality.
karocann
@karocann
Oct 12 2016 15:10
@sjames1958gm Good idea, I tried that but it still doesn't work. I did console.log and the weather today is "few clouds", but the console outputs "clear sky".
Pradnya Joshi
@pradxj07
Oct 12 2016 15:11
@karocann , @sjames1958 is right about the ===
and @Miczysko
that is the problem
Stephen James
@sjames1958gm
Oct 12 2016 15:12
@karocann You didn't fix the first one if (weatherType = "clear sky") {
karocann
@karocann
Oct 12 2016 15:12
OK. Got it. IT's working now......
Stephen James
@sjames1958gm
Oct 12 2016 15:17
@karocann :+1:
ZeusDeveloper
@ZeusDeveloper
Oct 12 2016 15:20
plz help
nobody is helping
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 12 2016 15:21
@ZeusDeveloper Maybe someone will help you when you post a link to the pen (maybe though)
ZeusDeveloper
@ZeusDeveloper
Oct 12 2016 15:22
how to do so?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 12 2016 15:22
@ZeusDeveloper Do you use codepen.io?
Abhisek Pattnaik
@abhisekp
Oct 12 2016 15:22
JSBin is fine too ;) http://jsbin.com
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 12 2016 15:22
@ZeusDeveloper If so, then just copy-paste the link
Johnathan Mullen
@MrJkmullen
Oct 12 2016 15:27
How can I get my weather app to display in google chrome?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 12 2016 15:29
@MrJkmullen Is it because of the coordinates?
Johnathan Mullen
@MrJkmullen
Oct 12 2016 15:30
yes @Otto-AA
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 12 2016 15:32
@MrJkmullen Well, it is because chrome (50 I think) doesn't allow it always
An alternative: Get the json from there: http://ip-api.com/json
@MrJkmullen There you can also get the lat and long
Johnathan Mullen
@MrJkmullen
Oct 12 2016 15:37
like this is still not working @Otto-AA http://codepen.io/jkmullen/pen/WGzvoY?editors=1010
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 12 2016 15:41
To get the coordinates do something like
  $.getJSON("http://ip-api.com/json")
    .done(function(response) {
       lat = response.lat;
       long = response.lon;

       ShowWeather();
  });
and Put the rest into the ShowWeather-function so it calls AFTER getting the coordinates
Jason Luboff
@JLuboff
Oct 12 2016 15:42
@MrJkmullen If you'd like to use Geolocation navigator, then you'll need to run codepen over https:// and prepend https://crossorigin.me/ to your api url (i.e https://crossorigin.me/http://api.openweather....)
Johnathan Mullen
@MrJkmullen
Oct 12 2016 15:45
guys im so confused @JLuboff @Otto-AA
Jason Luboff
@JLuboff
Oct 12 2016 15:46
@MrJkmullen If you don't want to change anything in regards to how you're getting your location (meaning, you don't want to use the ip-api but instead keep using Geolocation navigator) then do the above steps I mention
@MrJkmullen Chrome doesn't allow non-secure location, and since Openweather doesn't allow the free api to be over a secure (https) connection, we must use a proxy of sorts and thats where crossorigin comes into play
Johnathan Mullen
@MrJkmullen
Oct 12 2016 15:50
@MrJkmullen Try that
Johnathan Mullen
@MrJkmullen
Oct 12 2016 15:52
still no good
Jason Luboff
@JLuboff
Oct 12 2016 15:52
Ya I just tried in chrome, hold on, let me check
Johnathan Mullen
@MrJkmullen
Oct 12 2016 15:52
ok thank you @JLuboff
CamperBot
@camperbot
Oct 12 2016 15:52
mrjkmullen sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 395 | @jluboff |http://www.freecodecamp.com/jluboff
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 12 2016 15:53
@MrJkmullen Does this work in chrome?
http://codepen.io/A_A/pen/NRzAPE?editors=0010
Johnathan Mullen
@MrJkmullen
Oct 12 2016 15:54
No @Otto-AA
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 12 2016 15:54
@MrJkmullen :/
Johnathan Mullen
@MrJkmullen
Oct 12 2016 15:54
I know I been working on this for like 2 days now @Otto-AA
Jason Luboff
@JLuboff
Oct 12 2016 15:55
@MrJkmullen I have to take a step away, but I'll finish looking when I get back
Johnathan Mullen
@MrJkmullen
Oct 12 2016 15:55
ok me to I will be back at 1pm Eastern time
@JLuboff
Ahmed Abdelaziz
@Achmed4
Oct 12 2016 15:55
Could i submit my project with GitHub pages link?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 12 2016 15:56
@MrJkmullen Could you say to which steps it work? (I add text to the body depending on how far it comes)
Ahmed Abdelaziz
@Achmed4
Oct 12 2016 15:59
I'm testing my local weather app right now, could you pleaaaaase send me a screen shot of it? (Here is the link: https://achmed4.github.io/weather-app/)
Jess Alexander
@jess-alexander
Oct 12 2016 16:07
Screen Shot 2016-10-12 at 6.07.26 PM.png
@Achmed4 When the screen first came up there were really pretty clouds in the weather box, then they disappeared. :(
I love the functionality though! The full forecast is awesome, and the updating time is great too.
Jason Luboff
@JLuboff
Oct 12 2016 16:10
@MrJkmullen Got it working :)
@MrJkmullen The only issue was your api key got a little messed up. I think you accidently cut off &APPID=
@MrJkmullen Try that and make sure you're connecting to codepen over https (meaning, your url is https://codepen.io/.... instead of http://codepen.io/...)
vínαч puppαl
@vinaypuppal
Oct 12 2016 16:12
blob
@Achmed4 :point_up_2: works for me and there are some Mixed content warnings fix them
Ahmed Abdelaziz
@Achmed4
Oct 12 2016 16:12
@jess-alexander Thank you so much, I'll try to figure what's wrong :)
CamperBot
@camperbot
Oct 12 2016 16:12
achmed4 sends brownie points to @jess-alexander :sparkles: :thumbsup: :sparkles:
:cookie: 111 | @jess-alexander |http://www.freecodecamp.com/jess-alexander
Jess Alexander
@jess-alexander
Oct 12 2016 16:13
@Achmed4 Also, when you click through to toggle between F and C it only changes the current weather, not the forecast. You could make another API request, or convert through the forecast array.
Ahmed Abdelaziz
@Achmed4
Oct 12 2016 16:13
@vinaypuppal Thank you so much i'm still printing some results to the console for testing
CamperBot
@camperbot
Oct 12 2016 16:13
achmed4 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 608 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Ahmed Abdelaziz
@Achmed4
Oct 12 2016 16:14
@jess-alexander yeah I think i'll make another request for it thaaanks <3
Fábio Marquez
@fabiomarquezc
Oct 12 2016 16:17
Guys, I have just started the random quote machine challenge. What is the first step? Should I go after a API of quotes?
Jason Luboff
@JLuboff
Oct 12 2016 16:20
@fabiomarquezc Yes, first step would be to get your quotes. You can use an API or create your own array of quotes( which is what I did)
Fábio Marquez
@fabiomarquezc
Oct 12 2016 16:20
@JLuboff Cool...thanks
Albert Brennan
@bluegreybolt
Oct 12 2016 16:27
@fabiomarquezc I would just hardcode some
There aren't many good APIs for it that I could find
You get plenty of practice with APIs on the next projects anyway
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 12 2016 16:28
@fabiomarquezc If you want to do it with an API you can use http://forismatic.com/en/ (free and no key needed)
Serton
@Serton
Oct 12 2016 16:39
Hi guys
I'm doing the build a tribute page challenge
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 12 2016 16:39
Hi @Serton
Serton
@Serton
Oct 12 2016 16:39
https://www.freecodecamp.com/challenges/build-a-tribute-page but I do not really know anyone whose story should be written on
Would it be too "stupid" to write about something liek story of pizza or random stuff like that?
like*
Nevermind everything
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 12 2016 16:41
@Serton Well, it's mainly about the design so yeah, why not?
Serton
@Serton
Oct 12 2016 16:41
I guess I'll work on this https://en.wikipedia.org/wiki/Satoru_Iwata
Ok
Tyler Moeller
@TylerMoeller
Oct 12 2016 16:41
@Serton You can do a tribute page on Pizza, Kirby, anything you want
Serton
@Serton
Oct 12 2016 16:41
hah :D
I guess as long as code-wise is good
everything should be ok
Tyler Moeller
@TylerMoeller
Oct 12 2016 16:42
It just has to function like the example they give you
Serton
@Serton
Oct 12 2016 16:42
Alright, thanks.
Tyler Moeller
@TylerMoeller
Oct 12 2016 16:42
Good luck :+1:
Serton
@Serton
Oct 12 2016 16:42
I guess I shouldn't be overdoing with fancy stuff right?
just as plain as that one?
Tyler Moeller
@TylerMoeller
Oct 12 2016 16:43
Yeah, it's fine to make it plain like the example - you can always make it fancy later after you work on more projects
Serton
@Serton
Oct 12 2016 16:43
ok thanks again
back to work!
Tyler Moeller
@TylerMoeller
Oct 12 2016 16:43
:)
Spyrantis Theodoros
@thodorisanta
Oct 12 2016 16:45

http://codepen.io/oshikurou/pen/LkvoyX

on line 58 in JAVASCRIPT i need to make "textToTweet" equal to something so i can get the quote that apears to the screen! instead i made it equal to another random quote. How can i change that?

Tyler Moeller
@TylerMoeller
Oct 12 2016 16:49
@thodorisanta Since you write the text to HTML first, you can get the quote from your HTML:
var textToTweet = $("#quote").text();
Another problem though is that you're giving random authors that don't correspond to the quotes. You may want to combine the authors into the quotes array.
Mark
@vinarius
Oct 12 2016 17:00

Hey guys, can't find a simple solution on google for this. I'm trying to change a background color of a div using either .slideUp() or .fadeIn(). Any suggestions?

$("#navAbout").hover(function (){
$("#navAbout").slideUp(/change background color to #999 /);
});

Then change it back to #373A3C when the user mouse's out

Artur Arsalanov
@kurumkan
Oct 12 2016 17:03
@vinarius you can make it without js. In your css type: #navAbout:hover{background: #desiredcolor}
@vinarius hope i understand what you really want=)
Mark
@vinarius
Oct 12 2016 17:04
thanks i appreciate that but hover only changes the color, it doesn't fadeIn or show and slide animation and I am looking to use those visual effects
Artur Arsalanov
@kurumkan
Oct 12 2016 17:06
@vinarius just create css classes with desired bg colors. Then apply those colors via yourelement.addClass("somecssclass")
Tyler Moeller
@TylerMoeller
Oct 12 2016 17:06
@vinarius Not sure if this is what you're asking:
$("#navAbout").hover(function (){
  $(this).slideUp().css('background-color', '#999');
});
Mark
@vinarius
Oct 12 2016 17:07
i understand what you're saying, but that solution only changes the color. it doesnt show the animation
hm, that's not quite right
that only removes the element
Tyler Moeller
@TylerMoeller
Oct 12 2016 17:08
That's what .slideUp() does, though. It hides the element with a sliding up motion
Mark
@vinarius
Oct 12 2016 17:09
/sigh. frustrated trying to figure out the visual animations.
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 12 2016 17:09
@vinarius if you only want to fadeIn you can make it with pure CSS:
#navAbout {
   background-color: rgba(244, 244, 244, 0);
   transition: background-color 1s;
}
#navAbout:hover {
   background-color: rgba(244, 244, 244, 1);
}
@vinarius rgba makes a color with opacity and the transition makes it change the state over 1 second (can be used on color, width, etc.)
Mark
@vinarius
Oct 12 2016 17:12
@Otto-AA yes that's great. is there a method i can use to change what direction it fades from or customize how the animation works?
or something i can google to research more
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 12 2016 17:13
Mark
@vinarius
Oct 12 2016 17:14
@Otto-AA perfect thank you so much
CamperBot
@camperbot
Oct 12 2016 17:14
vinarius sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 288 | @otto-aa |http://www.freecodecamp.com/otto-aa
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 12 2016 17:14
@vinarius For googling I used "css slide background-color" if you want to find more about it ;)
And you're welcome
cameron nicklaus
@camnicklaus
Oct 12 2016 17:24
can anyone tell me why autofocus isn't working on this pen?
Artur Arsalanov
@kurumkan
Oct 12 2016 17:26
@camnicklaus in my browser in full page mode - the focus is set to the input box
cameron nicklaus
@camnicklaus
Oct 12 2016 17:27
@kurumkan whoa, I hadn't tried full page mode...that does work...I swear on another pen it worked in the editor view. weird
@kurumkan thanks
CamperBot
@camperbot
Oct 12 2016 17:27
camnicklaus sends brownie points to @kurumkan :sparkles: :thumbsup: :sparkles:
:cookie: 322 | @kurumkan |http://www.freecodecamp.com/kurumkan
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Oct 12 2016 17:28
@camnicklaus maybe the focus was added with js there
cameron nicklaus
@camnicklaus
Oct 12 2016 17:28
@Otto-AA yup that's it... man thanks you guys
CamperBot
@camperbot
Oct 12 2016 17:28
camnicklaus sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 289 | @otto-aa |http://www.freecodecamp.com/otto-aa
Johnathan Mullen
@MrJkmullen
Oct 12 2016 17:58
@JLuboff still not working for me http://codepen.io/jkmullen/pen/WGzvoY?editors=1010
Jason Luboff
@JLuboff
Oct 12 2016 17:59
@MrJkmullen Thats becuase you didn't change codepen to https
Change your codepen to https://codepen.io/....
@JLuboff https://codepen.io/jkmullen/pen/WGzvoY?editors=1010 I just changed it and i have no display
Jason Luboff
@JLuboff
Oct 12 2016 18:09
@MrJkmullen You changed the wrong thing :)
@MrJkmullen When working in Codepen, you need to make sure for this project, that you open it to where your url in the browser bar shows https://codepen.io/jkmullen/pen/WGzvoY?editors=1010
@MrJkmullen For your API url, we need that to be https://crossorigin.me/http://api.open...., so change that back from codepen to crossorigin
Johnathan Mullen
@MrJkmullen
Oct 12 2016 18:23
Thank You!!! @JLuboff Your very patience
CamperBot
@camperbot
Oct 12 2016 18:23
mrjkmullen sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 396 | @jluboff |http://www.freecodecamp.com/jluboff
Jason Luboff
@JLuboff
Oct 12 2016 18:24
I'm only returning the help and patiences that others had with me
Artur Arsalanov
@kurumkan
Oct 12 2016 18:30
@MrJkmullen or try to load your external resourses via /(removing http: and https:)/. For example //code.jquery.com/ui/jquery-ui-git.js
Jason Luboff
@JLuboff
Oct 12 2016 18:35
@kurumkan The issue is with Geolocation and Chrome. Chrome does not allow non-secure Geolocation. Thus we have to use a proxy (https://crossorigin.me prepended to our API url) and load Codepen over Https to ensure it will work within Chrome
Artur Arsalanov
@kurumkan
Oct 12 2016 18:39
@JLuboff I see. As I understand the mozilla gelocation problem is still unsolved. So be sure that all your efforts around enabling geolocation features of your apps will work in all modern browsers
@JLuboff it's very easy to find those circumstances where geolocation will be broken
Artur Arsalanov
@kurumkan
Oct 12 2016 18:47
@MrJkmullen test it: var api ="//crossorigin.me/http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&APPID=b99c2641786b52d7921c92358c179cfb"; and it will work over https and http
TasmaniaKrama
@TasmaniaKrama
Oct 12 2016 18:56
How would one check if a certain integer variable has different digits? Like var x = 45687 would be 5 but x = 11220 would be 3?
Alex9911
@Alex9911
Oct 12 2016 19:03
Hi everyone! I am trying to build a personal portfolio. I am building the portfolio part of the page, I am adding photos but when I'm adding a new photo doesn't respect the size mentioned in the css like the other ones. Anyone knows what could be the problem?
Shane Brockbank
@shanebrockbank
Oct 12 2016 19:11
$(".target:nth-child(2)").addClass("animated-bounce");
trying to make a target bounce
any advice?
nvm, just found my mistake.
Kevin Davis
@osfan501
Oct 12 2016 19:14
@Alex9911 do you want to send us the code you're using? or link us to your codepen? Is it possible you are only targeting a certain picture with your formatting? or a class that isn't being applied to the new pictures?
Artur Arsalanov
@kurumkan
Oct 12 2016 19:28
@TasmaniaKrama
 function func(n){
       var array = (n+"").split("");
       var temp=[];
       array.map(function(item){if(temp.indexOf(item)<0)temp.push(item)});
       return temp.length;
    }
@Alex9911 yes always provide code snippets or links
Rick
@rangerrick337
Oct 12 2016 19:36
Bah! Stuck again. Working on the Weather App. I'm trying to setup a toggle switch to go between Celsius and Fahrenheit. I had it replacing the <p id="temp"> element when the switch was clicked, but it wouldn't go back to Fahrenheit when clicked again. So I've setup this code but I can't get it to click either direction.
var isClicked = false;
var changeTemp = function() {
if (isClicked) {
     console.log("the if ran and has " + tempF);
      $("#temp").html("<p>"+tempF+" degrees F</p>");
      isClicked = false;
          } else {
            console.log("the else ran and has " + tempC);
            $("#temp").html("<p>"+tempC+" degrees C</p>");  
            isClicked = true;
          };          
        };
        $(".switch").on("click", changeTemp);
});
Artur Arsalanov
@kurumkan
Oct 12 2016 19:38
@rangerrick337 use 3 `s but not 's
Rick
@rangerrick337
Oct 12 2016 19:39
@kurumkan, that's what I've done, no?
Artur Arsalanov
@kurumkan
Oct 12 2016 19:40
somecode
'''somecode'''
CamperBot
@camperbot
Oct 12 2016 19:40
:bulb: to format code use backticks! ``` more info
Rick
@rangerrick337
Oct 12 2016 19:41
@kurumkan got it, thanks
CamperBot
@camperbot
Oct 12 2016 19:41
rangerrick337 sends brownie points to @kurumkan :sparkles: :thumbsup: :sparkles:
:cookie: 323 | @kurumkan |http://www.freecodecamp.com/kurumkan
Spyrantis Theodoros
@thodorisanta
Oct 12 2016 19:41

https://codepen.io/oshikurou/pen/LkvoyX

thats my RANDOM QUOTE GENERATOR project. Can you please review it and rate it from 0-10 ? And tell me what you would do different and what my mistakes are etc. thanks :)

Alex9911
@Alex9911
Oct 12 2016 19:42
@osfan501 Sorry for the late reply. Here is my code pen link: http://codepen.io/Alex9911/pen/PGEZPm
Rick
@rangerrick337
Oct 12 2016 19:43
@thodorisanta, check out the #CodeReview room.
Yacob Gugsa
@yacobgugsa
Oct 12 2016 19:43
How do you get the caption border around the image for the tribute page? Do you just wrap the image in a separate div and tool around with div margins?
Artur Arsalanov
@kurumkan
Oct 12 2016 19:44
@rangerrick337 you are welcome. At first get your $(".switch").on("click", changeTemp); out of the changeTemp function
Rick
@rangerrick337
Oct 12 2016 19:46
@kurumkan, it is, sorry the formatting got messed up. Let me try this again:
        var isClicked = false;
        var changeTemp = function() {
          if (isClicked) {
            console.log("the if ran and has " + tempF);
            $("#temp").html("<p>"+tempF+" degrees F</p>");
            isClicked = false;
          } else {
            console.log("the else ran and has " + tempC);
            $("#temp").html("<p>"+tempC+" degrees C</p>");  
            isClicked = true;
          };          
        };

        $(".switch").on("click", changeTemp);
The else does run when I click the .switch element because it logs to the console "the else ran and has 11"
But the html on the page is not changed and the isClicked variable is not changed
Here is the codepen in case that helps: http://codepen.io/RickLee/pen/BLxxYz
Yacob Gugsa
@yacobgugsa
Oct 12 2016 19:51
Or do you use the figcaption tag?
It is the HTML5 figure/figcaption tags, I figured it out. They mentioned it on the forums.
Artur Arsalanov
@kurumkan
Oct 12 2016 19:54
@rangerrick337 I am trying to understand the code. Try to replace isClicked = true; by isClicked = !isClicked; The same with another one
Tyler Moeller
@TylerMoeller
Oct 12 2016 19:54
@rangerrick337 With a toggle switch, a click event is fired twice when clicked. Try using the change event instead:
        $(".switch").on("change", changeTemp);
Rick
@rangerrick337
Oct 12 2016 19:55
Hot damn @TylerMoeller, that did it. Do you have an easy explanation for that or should I google it? thanks a million
CamperBot
@camperbot
Oct 12 2016 19:55
rangerrick337 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 871 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Oct 12 2016 19:57
@rangerrick337 It seems it registers a click when you click the button and another once the toggle finishes sliding to it's final position. I haven't looked into it to understand why, google may be your better option here :)
Rick
@rangerrick337
Oct 12 2016 19:58
@TylerMoeller You are a legend.
Artur Arsalanov
@kurumkan
Oct 12 2016 20:03
@rangerrick337 I think you can go without changing your javascript.Just get rid of <input type="checkbox"> in your html
Tyler Moeller
@TylerMoeller
Oct 12 2016 20:04
@rangerrick337 Actually, I think what's happening is that it's triggering a click off of the <label> and the <input> elements. You could just trigger off of a click on the slider div instead: $(".slider").on("click", changeTemp);
Artur Arsalanov
@kurumkan
Oct 12 2016 20:06
Theodore P.
@Ierofantis
Oct 12 2016 20:07

I have a probelm. After I ve found that an element exists on the array I don't know a proper way to make the output to have the same order of the comparing array.
For example :

$("#input").click(function(e) {
  e.preventDefault();
  var word = ["s","p","i","t","i"];
  var arr = [];
  var search=document.getElementById("find").value;
  var words = document.getElementById("words");

  for (var i=0;i<word.length;i++){
  if(word[i].indexOf(search)!== -1)
    {
      arr.push(search)

      $( "#words" ).append( arr );
    }

  }

});

so I want the appending to be spiti and not on the order that inputs are happening

Jose Mendoza
@jmendozav
Oct 12 2016 20:08
Hi, I need an API for my Local Weather Project. Which one did you use?
Theodore P.
@Ierofantis
Oct 12 2016 20:08
This message was deleted
Rick
@rangerrick337
Oct 12 2016 20:08
@kurumkan if I get rid of the <input type ="checkbox"> and change the "change" back to "click" it does work correctly. But then breaks the snazzy animation of the slider. Which I'd have to refactor somehow to make it work.
Yacob Gugsa
@yacobgugsa
Oct 12 2016 20:09
When I add the class "img-responsive" to my image, it suddenly gets shoved to the left, and I don't know why. http://codepen.io/yacobgugsa/pen/VKXQyW
Artur Arsalanov
@kurumkan
Oct 12 2016 20:11
@rangerrick337 ok I see
Yacob Gugsa
@yacobgugsa
Oct 12 2016 20:15
Any ideas, fellas? Maybe img-responsive messes with the default margins?
Never mind, I found the solution. I have to use also add center-block.
Alex9911
@Alex9911
Oct 12 2016 20:18
Hi everyone! I am trying to build a personal portfolio. I am building the portfolio part of the page, I am adding photos but when I'm adding a new photo doesn't respect the size mentioned in the css like the other ones. Anyone knows what could be the problem?
Here is my code pen link: http://codepen.io/Alex9911/pen/PGEZPm
Yacob Gugsa
@yacobgugsa
Oct 12 2016 20:21
Now I have a new problem. border-radius isn't affecting the bottom corners (which stay right angles). Can anyone suggest why this might be happening? http://codepen.io/yacobgugsa/pen/VKXQyW
I figured it out. padding-bottom was messing with the border radius.
Ivan
@gonzalezi2
Oct 12 2016 20:26
Hey guys can anyone help me with the "Diff Two Arrays" Intermediate Algorithm Challenge? The solution I wrote works for some of the parameters but not all
function diffArray(arr1, arr2) {
  var newArr = [];
  // Same, same; but different.
  for (var i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) === -1){
      newArr.push(arr2[i]);
   }
  }
  for (var j = 0; j < arr1.length; j++) {
    if (arr2.indexOf(arr1[j]) === -1){
      newArr.push(arr1[i]);
    }
  }
  return newArr;
}

diffArray([1, "calf", 3, "piglet"], [1, "calf", 3, 4]);
I tried to write a simple solution as I still don't understand filter 100% so if I can't solve it with this solution I'll have to reread that function
NVM I found the problem smh
it was just a typo
Jerzz
@2cool4school
Oct 12 2016 21:01
hey can anyone help me with my navbar?
I need Link1 to display a dropdown menu
Tim Signore
@Timsig
Oct 12 2016 21:03
Hi @2cool4school ; I think what you need is a div with display:none that changes to display:block when link 1 is hovered.
Yacob Gugsa
@yacobgugsa
Oct 12 2016 21:13
Hi again. I am almost to the point where I'm satisfied with my tribute page, but there's one more problem that stumps me. The elements above the quote and below the quote are of different widths. Can anyone spot why? Maybe a second pair of eyes can help. http://codepen.io/yacobgugsa/pen/VKXQyW
As you can see, the timeline and quote are narrower than the rest of the content.
Jerzz
@2cool4school
Oct 12 2016 21:14
@Timsig That's actually what I'm doing
@Timsig There has to be some css rule that's causing friction
Yacob Gugsa
@yacobgugsa
Oct 12 2016 21:15
Hi @2cool4school and @Timsig. Might either of you be able to help out?
Jerzz
@2cool4school
Oct 12 2016 21:16
@yacobgugsa I'll look and see if I can spot something you missed. I suck though haha.
Yacob Gugsa
@yacobgugsa
Oct 12 2016 21:16
To be clear, my problem is that the text is of differing widths.
I messed up the margins somewhere/
Jerzz
@2cool4school
Oct 12 2016 21:18
@yacobgugsa You're worried about the width of <h2> or of the image
@yacobgugsa ?'
Yacob Gugsa
@yacobgugsa
Oct 12 2016 21:19
The width of the "here is the timeline" <p>, the timeline <ul> and the quote are less than the width of the <p> elements under the quote.
TasmaniaKrama
@TasmaniaKrama
Oct 12 2016 21:19
@kurumkan thank you
CamperBot
@camperbot
Oct 12 2016 21:19
tasmaniakrama sends brownie points to @kurumkan :sparkles: :thumbsup: :sparkles:
:cookie: 324 | @kurumkan |http://www.freecodecamp.com/kurumkan
Jerzz
@2cool4school
Oct 12 2016 21:22

@yacobgugsa your div element margins differ

.learn-more {
margin: 0 20% 30px 20%;
}

should be:

.learn-more {

@yacobgugsa should be:

.learn-more {
margin: 0 22.5% 30px 22.5%;
}

Yacob Gugsa
@yacobgugsa
Oct 12 2016 21:23
Oh, okay, thank you @2cool4school. I feel so dumb for overlooking that.
CamperBot
@camperbot
Oct 12 2016 21:23
yacobgugsa sends brownie points to @2cool4school :sparkles: :thumbsup: :sparkles:
:cookie: 297 | @2cool4school |http://www.freecodecamp.com/2cool4school
Jerzz
@2cool4school
Oct 12 2016 21:23
@yacobgugsa no problem bro
can someone help me with my navbar?? for some reason my div {display:none;} doesnt show when i hover over the link its attached to
Yacob Gugsa
@yacobgugsa
Oct 12 2016 21:26
@2cool4school I think margins/padding are also messing with the img-wrapper, because I can't extend the bottom padding. I'll take a look at your navbar.
disjfa
@disjfa
Oct 12 2016 21:27
@2cool4school the dropdown-content is not in the .dropdown
.dropdown:hover + .dropdown-content {
  display: block;
}
easy way
but then you cannot position it against your dropdown :)
Jerzz
@2cool4school
Oct 12 2016 21:32
@disjfa yeah that adds the items to the actual navbar and messes it all up Dx is there another solution you know of?
@disjfa i dont mind changing things around a little bit
disjfa
@disjfa
Oct 12 2016 21:32
You have no position on the dropdown-content. so yeah it renders as you create it
If you don't have "much" knowledge of dropdowns i would just use bootstrap and check how they do it
Jerzz
@2cool4school
Oct 12 2016 21:35
@disjfa i dont like bootstrap dropdowns because their classes are click based
disjfa
@disjfa
Oct 12 2016 21:35
Yep, they know of things called mobile phones ^_^
Yacob Gugsa
@yacobgugsa
Oct 12 2016 21:50
@2cool4school, @disjfa or @Timsig, do any of you know how to get the <hr> and copyright footer to clear the coloured part of the container div, but still match the width of the container div? (The copyright citation is shorter than the container div, so that is not an issue.)
jmaloon
@jmaloon
Oct 12 2016 22:12
Trying to the do the local weather app in Chrome. Seems as though chrome won't allow geolocation unless it is https but the suggested API only works with http. any workarounds? @jmendozav
Yacob Gugsa
@yacobgugsa
Oct 12 2016 22:13
Alright, I'm now satisfied with my project. Please let me know your opinion: http://codepen.io/yacobgugsa/pen/VKXQyW
A lot of the text is probably excessive and could be trimmed down from the novel it currently is, and I want to put links to websites of the Japanese companies I mentioned, but those are just minor things. Most of the major design aspects are satisfactory.
Adel
@AdelMahjoub
Oct 12 2016 22:19
@yacobgugsa it looks good
Yacob Gugsa
@yacobgugsa
Oct 12 2016 22:20
Thanks @AdelMahjoub
CamperBot
@camperbot
Oct 12 2016 22:20
yacobgugsa sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 319 | @adelmahjoub |http://www.freecodecamp.com/adelmahjoub
Yacob Gugsa
@yacobgugsa
Oct 12 2016 22:20
Would you make any recommendations?
Adel
@AdelMahjoub
Oct 12 2016 22:22
@yacobgugsa maybe smaller font-size of the main paragraph for large screens
@yacobgugsa and a a font with serif for paragraphs, like Times new roman or any
Yacob Gugsa
@yacobgugsa
Oct 12 2016 22:25
I could also convert the font sizes from px to em. That would also make them mobile-responsive.
Adel
@AdelMahjoub
Oct 12 2016 22:27
@yacobgugsa for small screens it is best to fit all width of the screen, not centered as the width is narrow
Yacob Gugsa
@yacobgugsa
Oct 12 2016 22:29
I don't follow.
I will admit that I designed the website for a desktop environment. What are you saying I should do to make it more mobile-friendly? Oh, you mean .container-fluid? Or something else?
@AdelMahjoub .
Adel
@AdelMahjoub
Oct 12 2016 22:33
@yacobgugsa you can add a matchMedia in js to toggle bootstrap class from container(for large screens) to container-fluid(for small screens)
@yacobgugsa
function mediaResize(){
        if("matchMedia" in window){
         if(window.matchMedia("(max-width:600px)").matches){
            // your code for small screens
            }else{
                //your code for large screens
                }
            }
    }   
    window.addEventListener('resize',mediaResize,false);
Yacob Gugsa
@yacobgugsa
Oct 12 2016 22:40
Thanks for the tip. One day when I rewrite this page (and have a more advanced knowledge of JS and Bootstrap), I'll certainly keep matchMedia in mind.
Thanks @AdelMahjoub
CamperBot
@camperbot
Oct 12 2016 22:40
:warning: yacobgugsa already gave adelmahjoub points
yacobgugsa sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
Adel
@AdelMahjoub
Oct 12 2016 22:40
@yacobgugsa yes, welcome
Tochi Obafemi M. Uzoije
@TochMeister
Oct 12 2016 22:41
Could someone please explain to me the significance of lorem ipsum?
Yacob Gugsa
@yacobgugsa
Oct 12 2016 22:42
@AdelMahjoub How would you use JS to modify the HTML and CSS, though? The display is dependent on the markup and stylesheet
Adel
@AdelMahjoub
Oct 12 2016 22:43
@yacobgugsa in lots of ways, you'll find out when following the course, no hurry :+1:
Yacob Gugsa
@yacobgugsa
Oct 12 2016 22:45
Okay
kat-mag
@kat-mag
Oct 12 2016 22:59
@tuzoije it's insignificant... kitty ipsum ftw http://www.catipsum.com/ xD
john94
@lpy1994
Oct 12 2016 23:19
is finding a web developer job has to have a degree first ?
kat-mag
@kat-mag
Oct 12 2016 23:25
@lpy1994 no
john94
@lpy1994
Oct 12 2016 23:26
glad to hear that
Before I started coding, I was business major, didnt know what I wanna do in my life.
And I quit school after I start coding.
Feel like I'm in the right path.
Spyrantis Theodoros
@thodorisanta
Oct 12 2016 23:33

https://codepen.io/oshikurou/pen/LkvoyX

how can i make it mobile responsive? or responsive when you scale it down? i need actual tips please.

kat-mag
@kat-mag
Oct 12 2016 23:39
@thodorisanta actual tip: u've linked bootstrap, so use bootstrap grid system.
rows w/ columns for different devices
Jacob
@jdc101214
Oct 12 2016 23:40
Hey guys!
Im trying to make this background image on my portfoio page responive to a mobile and big screen and cant figure out how to.
Heres the link
http://codepen.io/jdc101214/pen/dpVzLZ
kat-mag
@kat-mag
Oct 12 2016 23:41
@jdc101214 throw out the body tag. told you already. it's used badly & shouldn't even be there.
move the bg to HTML div
that encloses what you need.
add class img-responsive since you're using bootstrap
and setting the width in pixels is not very responsive
Jacob
@jdc101214
Oct 12 2016 23:43
Whats bg?
kat-mag
@kat-mag
Oct 12 2016 23:43
background
Jacob
@jdc101214
Oct 12 2016 23:44
How would i set the bg-image in the html and not in the css
?
@kat-mag ?
You there?
kat-mag
@kat-mag
Oct 12 2016 23:45
@jdc101214 with an <img> tag?
@jdc101214 and don't expect people to respond instantly. Some of us work ;D
Jacob
@jdc101214
Oct 12 2016 23:46
I got to go. I just post this later.
Thx anyways
kat-mag
@kat-mag
Oct 12 2016 23:47
@jdc101214 just read the bootstrap docs.