These are chat archives for FreeCodeCamp/HelpFrontEnd

14th
Jun 2017
James9446
@James9446
Jun 14 2017 00:00
Is a framework different from a library?
Bootstrap is a framework right?
Gulsvi
@gulsvi
Jun 14 2017 00:01
It might get philosophical trying to differentiate the two words, but in my opinion, a library is a collection of classes, methods, etc.
James9446
@James9446
Jun 14 2017 00:02
Okay thanks again! Have a great day
Jamie Summers
@SummersJr27
Jun 14 2017 00:03
Looking for help. I am trying to put pictures on my site in a gallery type with 3 pictures side by side, with the middle one centered and then I can move the others over using margin-right and margin-left. Is that possible
Gulsvi
@gulsvi
Jun 14 2017 00:03
A framework, is more like a collection of libraries, but I'm sure others here might disagree :)
Carly Coms
@carlybeefbarley
Jun 14 2017 00:03

Can anyone look at my code for my pomodoro clock? everything looks the way I want it until the clock runs out and I reset it, at which point my buttons go all over the place. any help would be much appreciated

http://edison.seattlecentral.edu/~ccoms001/pomodoroClock/index.html

Jamie Summers
@SummersJr27
Jun 14 2017 00:07
Can someone look at my code on CodePen to see if i'm doing my images right?
Dan Couper
@DanCouper
Jun 14 2017 00:09
normally with a single library you are in control, you just call a method or class or function or whatever, it's just a collection of reusable code you can use one or many bits from, it doesn't dictate anything. Whereas framework is almost the opposite, you have a structure that's already defined, you just kinda fill in the blanks. The definition of 'framework' is very vague I guess though
eg jQuery is a library, Angular is a framework, React kinda sits in the middle (it wants to be a library, but you need to use the React pattern to use it so...)
eg Bootstrap could be used as a library but is normally used as a framework
Hello911
@Hello911
Jun 14 2017 00:12
How do I integrate API into my quote generator? Where can I learn to do this?
Marcos
@codenamecobra
Jun 14 2017 00:13
my weather app is not working and when i look up other peoples examples they dont work either......what gives?
Dan Couper
@DanCouper
Jun 14 2017 00:13
which weather service are you using?
Zane Rogers
@zanerogers1990
Jun 14 2017 00:50
so i'm on the counting cards challenge for javascript, i was utterly clueless and had to look up some answers and it still isn't working. GRR, any suggestions or pointers to help me out with?
var count = 0;

function cc(card) {
  // Only change code below this line
  switch(card){
    case 2:
    case 3:
    case 4:  
    case 5:
    case 6:
      card +=1;
      break;
    case 7:
    case 8:
    case 9:
      card = 0;
      break;
    case 10:
    case 'J':
    case 'Q':
    case 'K':
    case 'A':
      card -= 1;
      break;

  }

  return count + (count > 0 ? " Bet" : " 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(7); cc('K'); cc('A');
5millerk
@5millerk
Jun 14 2017 01:10
hey guys, I'm obviously missing something simple. Any idea why my "placeholder text" and list won't seem to put itself in a center column? https://codepen.io/5millerk/pen/yXJaoG
Gulsvi
@gulsvi
Jun 14 2017 01:17
@5millerk It's in the middle column, but it's aligned to the left of that middle column
@zanerogers1990 you're changing the value of the card not the count
5millerk
@5millerk
Jun 14 2017 01:18
@SkyC0der I actually just got it solved from the other chat channel (that's why it looks right now haha). Apparantly v4 of bootstrap doesn't use col-xs. I just switched to v3 and it's all good now
Gulsvi
@gulsvi
Jun 14 2017 01:18
Ahhh, I see lol

For what it's worth - you can use an offset instead of putting an empty div to the left. This:

<div class="col-xs-4"></div>
<div class="col-xs-4">Text in the middle<div>
<div class="col-xs-4"></div>

Is the same as:

<div class="col-xs-4 col-xs-offset-4">Text in the middle<div>
@5millerk
@codenamecobra Codepen requires HTTPS now, so all external resources, APIs, etc. all need to be served over HTTPS too. Open Weather Map doesn't work over HTTPS unless you pay for a premium plan, so everyone using that API has broken Weather Apps.
@Hello911 This Quote API has sample code: https://quotesondesign.com/api-v4-0/
5millerk
@5millerk
Jun 14 2017 01:26
@SkyC0der thanks! offset pushes it from the right that number of columns, correct?
CamperBot
@camperbot
Jun 14 2017 01:26
5millerk sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1697 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Jun 14 2017 01:28
@5millerk Yep! it pushes it to the right by that number of columns
5millerk
@5millerk
Jun 14 2017 01:28
perfect, thanks
ChrisAB74
@ChrisAB74
Jun 14 2017 01:31
I can't seem to create different sections.
Everything is at the top of the page. Do I use HTML or CSS to create about section, contact me section etc
Gulsvi
@gulsvi
Jun 14 2017 01:32
@ChrisAB74 You use HTML to create the sections and CSS to style them.
ChrisAB74
@ChrisAB74
Jun 14 2017 01:35
@SkyC0der could you give an example? When I go to add a new <h1>About</h1> it is right below my buttons and not further down the page.
Trying to show a screen shot but can't seem to attach one here
Gulsvi
@gulsvi
Jun 14 2017 01:38
@ChrisAB74 Your HTML would be like this:
<section id="about" class="section">
  <h1 class="section-title">About Me!</h1>
  <p class="section-paragraph">This is a paragraph about me</p>
</section>
You could then use CSS like:
.section {
  background-color: red;
  min-height: 500px;
  margin-top: 40px;
  padding: 20px;
}
ChrisAB74
@ChrisAB74
Jun 14 2017 01:46
@SkyC0der so I could create a .section-2 with other settings for a different section then correct?
Gulsvi
@gulsvi
Jun 14 2017 01:48
@ChrisAB74 Yes, that would work
ChrisAB74
@ChrisAB74
Jun 14 2017 01:53
@SkyC0der Thank you
CamperBot
@camperbot
Jun 14 2017 01:53
chrisab74 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1698 | @skyc0der |http://www.freecodecamp.com/skyc0der
Pedro Juan
@PedroJuan91
Jun 14 2017 02:00
hi guys... why the result of the output for html is undefined and when i display the data on console displays the output.. here is my codepen page https://codepen.io/PedroJuan/pen/PmryLL
Roxroy
@roxroy
Jun 14 2017 02:09
@PedroJuan91 , you will need to accept the data that is returned from your ajax call,
use success: inquireData = function(data) { include the data param.
Also, you can do a console print to see the information in the data field, console.log(data);
Pedro Juan
@PedroJuan91
Jun 14 2017 02:13
@roxroy - so you mean that i will code my param inside the Success..
@roxroy hhhehe thanks :)
CamperBot
@camperbot
Jun 14 2017 02:15
pedrojuan91 sends brownie points to @roxroy :sparkles: :thumbsup: :sparkles:
:cookie: 951 | @roxroy |http://www.freecodecamp.com/roxroy
Hello911
@Hello911
Jun 14 2017 02:19
@SkyC0der yeah thanks
CamperBot
@camperbot
Jun 14 2017 02:19
hello911 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1699 | @skyc0der |http://www.freecodecamp.com/skyc0der
Zach Upshaw
@zlupshaw
Jun 14 2017 02:24
@Mezitek Thank you for the input! I ended up testing it on a couple different browsers (and mobile browsers) and was thinking the same thing afterward
CamperBot
@camperbot
Jun 14 2017 02:24
zlupshaw sends brownie points to @mezitek :sparkles: :thumbsup: :sparkles:
:cookie: 205 | @mezitek |http://www.freecodecamp.com/mezitek
fdemaa
@fdemaa
Jun 14 2017 03:25
can anyone help me with a basic exercise on js ?
Johnny
@jtan3
Jun 14 2017 03:27
sure
fdemaa
@fdemaa
Jun 14 2017 03:28

i have to return a property value if it is found, if is not "Not found":
i also have to use the .hasOwnProperty() method;

it is clearly very wrong what i have so far, it is this:


// Setup
var myObj = {
  gift: "pony",
  pet: "kitten",
  bed: "sleigh"
};



  function checkObj(checkProp) {
  // Your Code Here


  if (myObj.hasOwnProperty("gift")){ 
  return "pony";
  }else if (myObj.hasOwnProperty("pet")){
  return "kitten";
  } else if (myObj.hasOwnProperty("sleigh")){
  return "sleigh";
  }else {
  return ("Not Found");
}
  }

// Test your code by modifying these values
checkObj("gift");
@jtan3
Johnny
@jtan3
Jun 14 2017 03:31
@fdemaa you only need and if /else statement.
Jake
@sipofwater
Jun 14 2017 03:31
a switch would be better?
Johnny
@jtan3
Jun 14 2017 03:31
an*
fdemaa
@fdemaa
Jun 14 2017 03:32
okey i would delete and try it
@jtan3
Johnny
@jtan3
Jun 14 2017 03:33
@fdemaa if you ask in https://gitter.im/FreeCodeCamp/HelpJavaScript you'll get better help. Not sure how to give help without giving out the answer.
fdemaa
@fdemaa
Jun 14 2017 03:33
@jtan3 thanks man!
CamperBot
@camperbot
Jun 14 2017 03:33
fdemaa sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 403 | @jtan3 |http://www.freecodecamp.com/jtan3
Ken Haduch
@khaduch
Jun 14 2017 03:39
@fdemaa - as is most common wtih a function that is being passed a value (which is a variable that can be used within the function, in this case checkProp) you want to use that variable (the function argument) within the function. If you follow the lesson on using variables to access object properties "Accessing Objects Properties with Variables" you'll refresh your memory about how to use the variable checkProp in conjunction with the .hasOwnProperty() method and then use it to return the property value. (And it actually looks like you are on the lesson "Testing Objects for Properties" - so they are misleading you a little by putting those hard-coded values in the .hasOwnProperty() method - they are showing .hasOwnProperty("top") but in this case you want to use the variable checkProp in place of the hard-coded string, so you are checking for the property according to the value that is passed in to the function. That makes a function reusable, otherwise you would have to somehow hardcode every property and that would not really be too easy. Look for a very short way to do this one!
fdemaa
@fdemaa
Jun 14 2017 03:40
@khaduch thanks ken! i will check that lesson again and try it!
CamperBot
@camperbot
Jun 14 2017 03:41
:star2: 2982 | @khaduch |http://www.freecodecamp.com/khaduch
fdemaa sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
Abhimanyu Ray
@maad-boy
Jun 14 2017 03:53
how to get user id in twitch.tv please somebody help me
Curtis
@CurtisJCamp
Jun 14 2017 04:00
Hey can somebody help me out with a problem on my portfolio project?
German Gamboa Gonzalez
@germangamboa95
Jun 14 2017 04:05
@CurtisJCamp I can give it a shot
Curtis
@CurtisJCamp
Jun 14 2017 04:29
@germangamboa95 I built my portfolio pag on codepen and I was a few functionality problems when I view it on my iphone. pen below
https://codepen.io/CurtisjCamp/full/jwrWXd/
jeez page I have a few
typos
The text in the main photo gets smashed on the bottom of photo instead of getting smaller with the photo
and staying in the same position as when view on a desktop
also on mobile the navbar doesn't jump to the corresponding sections of the page like the desktop
version
Luke Miller
@dalumiller
Jun 14 2017 04:35

Can someone tell me what the "?" is doing in this code?...

return myObj.hasOwnProperty(checkProp) ? myObj[checkProp] : "Not Found";
javascript

rugano
@rugano
Jun 14 2017 04:38
Hello campers,what should i do to my Simon game to align it at the center since it is aligned to left?here : https://codepen.io/Njue/full/OgXggy
Mukul Agrawal
@mukul09
Jun 14 2017 04:38
can anybody help me understand this line . this is regular expression
(1\s?)? checks allows for a "1" or a "1 " at the beginning
CallMeOrange
@EgnaroDev
Jun 14 2017 04:38
@CurtisJCamp Your project looks good
Luke Miller
@dalumiller
Jun 14 2017 04:38
@mukul09 thank ya
CamperBot
@camperbot
Jun 14 2017 04:38
dalumiller sends brownie points to @mukul09 :sparkles: :thumbsup: :sparkles:
:cookie: 444 | @mukul09 |http://www.freecodecamp.com/mukul09
Mukul Agrawal
@mukul09
Jun 14 2017 04:38
@dalumiller :+1:
rugano
@rugano
Jun 14 2017 04:40
@dalumiller it means alternative of myObj[checkProp] or "Not Found". either can be.
fdemaa
@fdemaa
Jun 14 2017 04:43
@dalumiller what exercise are you ?
Luke Miller
@dalumiller
Jun 14 2017 04:44
I'm on Profile Lookup in the JavaScript, but in solving it I had to return to a few prior challenges for some refreshers and saw ? on one of them and couldn't remember its meaning
Curtis
@CurtisJCamp
Jun 14 2017 04:45
Thanks! @MCTwoDigitZero I tried to make it a little funny
CamperBot
@camperbot
Jun 14 2017 04:45
curtisjcamp sends brownie points to @mctwodigitzero :sparkles: :thumbsup: :sparkles:
:cookie: 158 | @mctwodigitzero |http://www.freecodecamp.com/mctwodigitzero
rugano
@rugano
Jun 14 2017 04:52
@jtan3 hi,may i have your help on how to center the inner content of my Simon game,here: https://codepen.io/Njue/full/OgXggy
Johnny
@jtan3
Jun 14 2017 05:19
@rugano try .center{text-align: center}
Johnny
@jtan3
Jun 14 2017 05:25
@rugano you should learn bootstrap or flexbox it would help with positioning
German Gamboa Gonzalez
@germangamboa95
Jun 14 2017 05:25
@CurtisJCamp I would make the picture a background picture in the CSS file and overlay the text over it. And I'm not sure about the nav:/
Johnny
@jtan3
Jun 14 2017 05:26
@rugano you know angular too?
rugano
@rugano
Jun 14 2017 05:31
@jtan3 thanks,am trying my best to make things work.
CamperBot
@camperbot
Jun 14 2017 05:31
rugano sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 404 | @jtan3 |http://www.freecodecamp.com/jtan3
Johnny
@jtan3
Jun 14 2017 05:32
@rugano you're so much further than me
Curtis
@CurtisJCamp
Jun 14 2017 05:33
okay I'll try that out thank you @germangamboa95
CamperBot
@camperbot
Jun 14 2017 05:33
curtisjcamp sends brownie points to @germangamboa95 :sparkles: :thumbsup: :sparkles:
:warning: @germangamboa95's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
Creative Shin
@CreativeShin
Jun 14 2017 05:33
Can anyone help me out with Twitch API setup... it asks me to give URI
sarthakcoder
@sarthakcoder
Jun 14 2017 05:34
i am at 113 level can anyone tell me how to proceed further
Johnny
@jtan3
Jun 14 2017 05:35
@rugano are you done with the pomodoro clock?
@sarthakcoder what's the name of the challenge. That number is the points you have.
sarthakcoder
@sarthakcoder
Jun 14 2017 05:37
@jtan3 i have to build a tribute page
Johnny
@jtan3
Jun 14 2017 05:37
@sarthakcoder what do you have a problem with?
Creative Shin
@CreativeShin
Jun 14 2017 05:38
anyone doing twitch API?
sarthakcoder
@sarthakcoder
Jun 14 2017 05:38
@jtan3 it is asking me for some link then after i have to submit
Johnny
@jtan3
Jun 14 2017 05:38
@CreativeShin what do have so far?
Creative Shin
@CreativeShin
Jun 14 2017 05:38
What did you guys put in redirect URI
Johnny
@jtan3
Jun 14 2017 05:39
@sarthakcoder submit your codepen's link
Creative Shin
@CreativeShin
Jun 14 2017 05:39
@jtan3 Not even started. It asks me to put some redirect URI of the app.
sarthakcoder
@sarthakcoder
Jun 14 2017 05:39
@jtan3 so what i have to write . can you give example
Johnny
@jtan3
Jun 14 2017 05:40
@sarthakcoder the web address of your codepen project
Creative Shin
@CreativeShin
Jun 14 2017 05:40
Inside Register your Application @jtan3
sarthakcoder
@sarthakcoder
Jun 14 2017 05:40
@jtan3 ok i understood
Johnny
@jtan3
Jun 14 2017 05:41
use that
Creative Shin
@CreativeShin
Jun 14 2017 05:42
@jtan3 alright , thanks ... loaded the json
CamperBot
@camperbot
Jun 14 2017 05:42
creativeshin sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 405 | @jtan3 |http://www.freecodecamp.com/jtan3
rugano
@rugano
Jun 14 2017 05:46
@jtan3 yes,you could have a look too,
Johnny
@jtan3
Jun 14 2017 05:46
@rugano im having trouble converting the time to minutes
rugano
@rugano
Jun 14 2017 05:47
@jtan3 thanks,it worked,
CamperBot
@camperbot
Jun 14 2017 05:47
rugano sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:warning: rugano already gave jtan3 points
Johnny
@jtan3
Jun 14 2017 05:47
@rugano https://codepen.io/jtan3/pen/ZKMRdW?editors=0010 my session time is in seconds but the timer is in minutes.
rugano
@rugano
Jun 14 2017 05:49
@jtan3 let me check that
Netrunner21
@Netrunner21
Jun 14 2017 05:51
Anybody available to test out my calcularoer
calculator *
typing is not my strong suit
If anyone can break it I'll be really happy
Also just realized my divider is a percentage symbol, hah. The code's pretty good though.
rugano
@rugano
Jun 14 2017 05:58
@jtan3 you could look at this : https://codepen.io/Njue/pen/bRpXxx
Johnny
@jtan3
Jun 14 2017 05:59
@rugano you did this in angular?
rugano
@rugano
Jun 14 2017 06:00
@jtan3 also for angular versions,look at this: https://developers.google.com/speed/libraries/#angulars
@jtan3 it's easier,try it buddy,
Johnny
@jtan3
Jun 14 2017 06:03
@rugano ill try it
rugano
@rugano
Jun 14 2017 06:08
@jtan3 sorry man,i missed a j between r and s in the link,should be like this: https://developers.google.com/speed/libraries/#angularjs
musa B sesay
@musasesay
Jun 14 2017 06:46
image.png
Junou Cui
@FIRESTROM
Jun 14 2017 06:49
Hi guys, I've got a little bit confuse about the "Build a Random Quote Machine" project. Where do we get the random quote??
Ken Haduch
@khaduch
Jun 14 2017 06:53
@FIRESTROM - a simple way to approach it is to make an array of quotes within your javascript code, and randomly select one of them and display it. You can find websites like quotesonesign.com that offer an API that you can make a JSON request and get random quotes which you then extract from the returned data and display that. You can google for "quote server API" or something similar and see what other sites are out there.
Junou Cui
@FIRESTROM
Jun 14 2017 06:56
ohhhh I see 0.0 Thanks
Richard Smith
@r1chard5mith
Jun 14 2017 07:07
@FIRESTROM https://quotesondesign.com/api-v4-0/ I used this api
Randy Goldsmith
@Dueldrawer8
Jun 14 2017 07:18
var button = document.querySelector('button');
var quote = document.getElementById('quote');
var author = document.getElementById('author');

button.addEventListener('click', printQuote);

var quotesArray = [
{ quote: 'With great power, comes great responsibility.',
  author: 'SpiderMan'
},
{ quote: 'It\'s not who I am underneath, but what I do that defines me.',
  author: 'Batman'
},
{ quote: 'There is a right and a wrong in the universe. And the distinction is not hard to make.',
  author: 'SuperMan'
},
{ quote: 'Cats come when they feel like, not when they\'re told.',
  author: 'CatWoman'
},
{ quote: 'Violence doesn\'t discriminate. It comes as cold and bracing as a winter breeze and it leaves you with a chill you can\'t shake off.',
  author: 'DareDevil'
},
{ quote: 'Intelligence is a privilege, and it needs to be used for the greater good of people.',
  author: 'Doctor Octopus'
},
{ quote: 'I exist only to protect Krypton. Every action no matter how violent or cruel, is for the greater good of my people',
  author: 'General Zod'
},
{ quote: 'No matter how bad things get, something good is out there just over the horizon.',
  author: 'Green Lantern'
},
{ quote: 'It doesn\'t matter who we are, what matters is our plan.',
  author: 'Bane'
},
{ quote: 'Just because someone stumbles and loses their path, doesn\'t mean they can\'t be saved.',
  author: 'Professor Charles Xavier'
},
]

var randomNumber = Math.floor(Math.random() * quotesArray.length);



function printQuote() {
    //document.getElementById('quote-box').innerHTML = '<p id="quote">' + generateQuote().quote + '<p id="author">' + generateQuote().author '</p>'
    quote.innerHTML = quotesArray[randomNumber].quote;
    author.innerHTML= quotesArray[randomNumber].author;
}
can anyone tell me why whenever i click the button more than once it wont randomly go through the quotes?
Marius Nicolae
@bytao7mao
Jun 14 2017 07:37
some tips about how can i make it responsive ?
https://codepen.io/bytao7mao/pen/dRMZzx
Zhanibek
@zhann1982
Jun 14 2017 07:49
@Dueldrawer8 Your random number is declared only once. Better if you make new function that generates new random number each time you call it
Hemakshi Sachdev
@hemakshis
Jun 14 2017 07:50
How do I put a text and an image (side-by-side) as a list item of an unordered list.. Like for every list item the text be on the right side and image on the left??
Randy Goldsmith
@Dueldrawer8
Jun 14 2017 07:51
@zhann1982 hm ill try that, i think i have but it still didnt work..the problem is since my quotes are objects, i want the same random number to be the same on both the author and the quote
for example..
@zhann1982
function newNumber() {
    return Math.floor(Math.random() * quotesArray.length);
}


function printQuote() {

    quote.innerHTML = quotesArray[newNumber()].quote;
    author.innerHTML= quotesArray[newNumber()].author;
}
@zhann1982 that works..but the author and quotes don't match up
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Random Quote Generator</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
    <h1>Random Quote Generator</h1>
</header>
<div id="quote-box">
    <p id="quote">"Placeholder for random quotes"</p>
    <p id="author">"Example"</p>
</div>
<button>Power Up!</button>


<footer> &copy; Randy Goldsmith</footer>
<script src="main.js"></script>
</body>
</html>
my html..
Zhanibek
@zhann1982
Jun 14 2017 07:59
@Dueldrawer8 function printQuote() { var num = newNumber(); quote.innerHTML = quotesArray[num].quote; author.innerHTML= quotesArray[num].author; }
Randy Goldsmith
@Dueldrawer8
Jun 14 2017 08:01
why does assigning a variable to a function work and not the function work itself?
@zhann1982 thank you btw
CamperBot
@camperbot
Jun 14 2017 08:02
dueldrawer8 sends brownie points to @zhann1982 :sparkles: :thumbsup: :sparkles:
:cookie: 330 | @zhann1982 |http://www.freecodecamp.com/zhann1982
Zhanibek
@zhann1982
Jun 14 2017 08:03
@Dueldrawer8 I assigned it to variable, so that i can use it twice or more
Randy Goldsmith
@Dueldrawer8
Jun 14 2017 08:04
so writing quotesArray[num].quote and quotesArray[newNumber()].quote are different?
the first one works.. it grabs the same object quote and author..while the second one grabs a quote, but a different author
Zhanibek
@zhann1982
Jun 14 2017 08:07
@Dueldrawer8 Yes . each call of newNumber() will generate new number. When you call it in quotes it gives you new number, then when you call it in author it generates new number again. that is why you have store new number in variable, so that you can use second time in author
Randy Goldsmith
@Dueldrawer8
Jun 14 2017 08:07
eh maybe it makes more sense.. assigning it to a variable maybe makes sure its the same author and quote object.. while calling the function will give me separate ones each time
@zhann1982 ah thank you
CamperBot
@camperbot
Jun 14 2017 08:07
dueldrawer8 sends brownie points to @zhann1982 :sparkles: :thumbsup: :sparkles:
:warning: dueldrawer8 already gave zhann1982 points
Amit Patel
@AmitP88
Jun 14 2017 08:10
hey guys, I'm browsing junior web developer jobs and I was just wondering, at what point would you consider a job posting to be old?
Jim Tryon
@jimtryon
Jun 14 2017 08:10
@AmitP88 I’d say a week typically.
Amit Patel
@AmitP88
Jun 14 2017 08:11
@jimtryon ah I see. so two weeks would probably be super old huh?
Jim Tryon
@jimtryon
Jun 14 2017 08:11
@AmitP88 yeah, I’d say so
@AmitP88 a month is ancient :)
Amit Patel
@AmitP88
Jun 14 2017 08:11
damn. I saw a job on Glassdoor that looks really good, but it says the posting is 14 days old
Coy Sanders
@coymeetsworld
Jun 14 2017 08:12
not necessarily, interviewing takes time and maybe they don't have enough qualified applicants yet
Amit Patel
@AmitP88
Jun 14 2017 08:13
I'm trying to see if I can get into a junior position, but it seems like there aren't that many these days...
seems like most people want mid-senior level devs
Coy Sanders
@coymeetsworld
Jun 14 2017 08:14
sometimes those are just their preferences
wouldn't hurt to ask or apply anyways
Amit Patel
@AmitP88
Jun 14 2017 08:14
ah ok
do I need significant freelancing experience? I've only made 1 professional website so far because I've been focusing on FCC
Coy Sanders
@coymeetsworld
Jun 14 2017 08:15
im not the right person to ask about that
can't say
Amit Patel
@AmitP88
Jun 14 2017 08:17
ah ok. thanks anyways though
Zhanibek
@zhann1982
Jun 14 2017 08:20
@AmitP88 Good Luck!
Amit Patel
@AmitP88
Jun 14 2017 08:20
@zhann1982 thank you :)
CamperBot
@camperbot
Jun 14 2017 08:20
amitp88 sends brownie points to @zhann1982 :sparkles: :thumbsup: :sparkles:
:cookie: 331 | @zhann1982 |http://www.freecodecamp.com/zhann1982
Long Nguyen
@longnt80
Jun 14 2017 08:28
@AmitP88 I used to help writting some job description for HR in my last company, they always ask for at least 2 years experience, but the reality is they will hire you if you can do it, doesn't matter about your experience
experience can help to negotiate your salary
CallMeOrange
@EgnaroDev
Jun 14 2017 08:33
@SkyC0der A message, remember pagnito's twitch tv app? when you first show up at that app that white flashy background thingy show up at the screen if you know what im talking about. How'd he do it? :/
Evgeniy
@EvgeniyChuprov
Jun 14 2017 08:41
Hi people. Help me please. I do not understand how to do this: "Be sure to connect to CodePen.io via http: //"? Task: "Show local weather" https://www.freecodecamp.com/challenges/show-the-local-weather.
Hemakshi Sachdev
@hemakshis
Jun 14 2017 08:50

https://codepen.io/hemakshis/pen/WOxWGX?editors=1100

I am making this Tribute page and I want my bullet list to have text and images both.. I have done this but now I want that for odd points the text in left and image in right and for even points just opposite.. I can't understand how to do this.. please help

alpox
@alpox
Jun 14 2017 08:57
@EvgeniyChuprov doesnt work anymore since lately codepen went all https. You will not be able to use openweatherapi for this task. I suggest you to use darksky instead.
Evgeniy
@EvgeniyChuprov
Jun 14 2017 08:59
@alpox Thank you.
CamperBot
@camperbot
Jun 14 2017 08:59
evgeniychuprov sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1148 | @alpox |http://www.freecodecamp.com/alpox
Marius Nicolae
@bytao7mao
Jun 14 2017 09:06
guys
can someone tell me what style should i apply for making my content responsive ?
https://codepen.io/bytao7mao/pen/dRMZzx
Gabriele Zotti
@ZottiGabriele
Jun 14 2017 09:43
Can someone explain to me why using bootstrap to build a navbar on codepen the navbar don't display correctly? I'm using the components page on the Bootstrap documentation
heroiczero
@heroiczero
Jun 14 2017 09:44
@ZottiGabriele your using 4.0. Are you using 3.3.7 documentation or 4.0 alpha documentation
Gabriele Zotti
@ZottiGabriele
Jun 14 2017 09:45
I'm using this one, i guess it may be 3.3.7?
heroiczero
@heroiczero
Jun 14 2017 09:46
@ZottiGabriele check your codepen link should be https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
Gabriele Zotti
@ZottiGabriele
Jun 14 2017 09:47
Oh god thanks
I've been stuck for two days on this
@heroiczero Thanks a lot :D
CamperBot
@camperbot
Jun 14 2017 09:47
zottigabriele sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 1383 | @heroiczero |http://www.freecodecamp.com/heroiczero
heroiczero
@heroiczero
Jun 14 2017 09:48
@ZottiGabriele your welcome :)
4javier
@4javier
Jun 14 2017 10:08
Hi everyone. I'm still struggling with my tribute page, because i can't find a way to make my font scale well on different devices. I tried with em, vw and vmin units but they're never been satisfying. There's really a way to have just one font-sizing for mobile and desktop, or people still use media-query?
Robert Ridley
@robertridley1988
Jun 14 2017 10:09
I want to create a regex that captures instances of '1' followed by any number of zeros and then another '1'. The regex below works but only if the final '1' isn't the last item in the string. Anyone know what's happening? Thanks.
var regex = /(10+1)\w+/g;
Long Nguyen
@longnt80
Jun 14 2017 10:31
/101/g
Michael Cordero
@CyberPutty
Jun 14 2017 10:37
im confused about when to use jsonp vs json. i have been reading around and people say that you can't use json to make server requests that are not on the same server as your website. but it seems to work either way when i requests quotes from an external api.
h1tag
@h1tag
Jun 14 2017 10:43
@CyberPutty I remember that it depends on the API itself (if it allows requests on the same server or not)
Marius Nicolae
@bytao7mao
Jun 14 2017 11:06
can some1 help to make it responsive ?
https://codepen.io/bytao7mao/pen/dRMZzx
Long Nguyen
@longnt80
Jun 14 2017 11:07
@bytao7mao use media query
Marius Nicolae
@bytao7mao
Jun 14 2017 11:10
@longnt80 i'm using media query but i don't know what to add in it
what style
Long Nguyen
@longnt80
Jun 14 2017 11:11
whatever style you want in that media query break point
Marius Nicolae
@bytao7mao
Jun 14 2017 11:13
@longnt80 what is the style to make my boxes full width on each column ? for small devices
to display 1 box on each column
Long Nguyen
@longnt80
Jun 14 2017 11:15
on each row or column?
@bytao7mao did you copy the css from somewhere?
Marius Nicolae
@bytao7mao
Jun 14 2017 11:19
nope
i copied the media queries
only
the rest are mine
@longnt80 each row
Long Nguyen
@longnt80
Jun 14 2017 11:20
display: block; for container on small screen
you should delete all those media queries
you only need 3
Marius Nicolae
@bytao7mao
Jun 14 2017 11:21
kk
Long Nguyen
@longnt80
Jun 14 2017 11:21
one for mobile, one for regular desktop, one for large screen on desktop
if you just learned about responsive, make it simple
Marius Nicolae
@bytao7mao
Jun 14 2017 11:25
@longnt80 so , now i have 2 media querries right ? what media querries should i add ?
https://codepen.io/bytao7mao/pen/dRMZzx
"display: block; for container on small screen" where to add this ?
it worked man
@longnt80 thanks
CamperBot
@camperbot
Jun 14 2017 11:27
bytao7mao sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 371 | @longnt80 |http://www.freecodecamp.com/longnt80
Marius Nicolae
@bytao7mao
Jun 14 2017 11:28
@longnt80 now give me a tips what media querry should i add ?
Long Nguyen
@longnt80
Jun 14 2017 11:36
@bytao7mao for mobile: max-width: 768px
Marius Nicolae
@bytao7mao
Jun 14 2017 11:36
i have already for mobile
@media (max-width: 935px) and (max-width:750px)
Long Nguyen
@longnt80
Jun 14 2017 11:37
@bytao7mao actually, use the media queries from bootstrap:
// Very small screen
@media (max-width: 576px) { ... }

// Small screen
@media (max-width: 768px) { ... }

// Medium screen
@media (max-width: 992px) { ... }
use this
Marius Nicolae
@bytao7mao
Jun 14 2017 11:43
nice, okok
@longnt80 and another thing, can you give me some tips on how i can better understand the positions for example absolute,inherit etc ?
Long Nguyen
@longnt80
Jun 14 2017 11:49
when you set position on an element, it will be relative to the closest parent element which have position property
Marius Nicolae
@bytao7mao
Jun 14 2017 11:49
so position relative it's the default position
Long Nguyen
@longnt80
Jun 14 2017 11:51
no, I meant the position of the element has position property will be related to the closest parent element which have position property
Marius Nicolae
@bytao7mao
Jun 14 2017 11:52
oh ok
Jacqueline Fahmy
@jfahmy
Jun 14 2017 11:52
Hi there, working on my portfolio page. I'm trying to use bootstrap columns, col-md-6 to line up portfolio placeholder images two per row
Having a terrible time getting them centered, already using center-block: https://codepen.io/jfahmy/pen/EXKQPZ?editors=1100
Marius Nicolae
@bytao7mao
Jun 14 2017 11:53
which is the default position: static ?
Long Nguyen
@longnt80
Jun 14 2017 11:53
@bytao7mao yes

@bytao7mao

static Default value. Elements render in order, as they appear in the document flow Play it »
absolute The element is positioned relative to its first positioned (not static) ancestor element Play it »
fixed The element is positioned relative to the browser window Play it »
relative The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Marius Nicolae
@bytao7mao
Jun 14 2017 11:54
i watched it, videos but i don't have a good memory
Long Nguyen
@longnt80
Jun 14 2017 11:54
create a codepen and play around
Marius Nicolae
@bytao7mao
Jun 14 2017 11:56
@longnt80 another important thing i want to ask is , what is most important to learn after media querries positions and flexbox(which i learned yesterday about already) ?
webkits/
Long Nguyen
@longnt80
Jun 14 2017 11:59
@bytao7mao what did you already know?
Marius Nicolae
@bytao7mao
Jun 14 2017 12:01
well : i know box model, styling, flexbox , all i've done in my codepen, i want to learn more about positioning on the page
overflow i don;t know also
Amal Shukla
@amal1994
Jun 14 2017 12:14

Hi guys ,
i've written a blog on css3 flexbox
http://blogs.quovantis.com/understanding-the-css3-flexbox/

suggestions are most welcome.

Marius Nicolae
@bytao7mao
Jun 14 2017 12:19
@longnt80 thanks for the infos man
CamperBot
@camperbot
Jun 14 2017 12:19
bytao7mao sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:warning: bytao7mao already gave longnt80 points
Scott
@Corinos
Jun 14 2017 12:36
Hey all, working on the weather app and I don't know what I'm doing wrong:
I'm expecting the page load to update my forecast divs, but is isn't.
h1tag
@h1tag
Jun 14 2017 12:39
@Corinos do u see the red warning sign in JS?
Eric Weiss
@eweiss17
Jun 14 2017 12:39
F12 - Console -
xdomrv:1 Access to Font at 'https://production-assets.codepen.io/assets/telefon/bold/af889c53-1ee3-4868…50-3-b7a87e0fbd213943fae0c0ef5985635dd43fa9c24876b2725127a13ccaf4ab6a.woff' from origin 'https://codepen.io' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://codepen.io' that is not equal to the supplied origin. Origin 'https://codepen.io' is therefore not allowed access.
Scott
@Corinos
Jun 14 2017 12:40
@h1tag I do in Codepen, but not in jsfiddle. Can I not declare a var like that?
@h1tag or is the issue that I'm outside the part of the function calling the location?
h1tag
@h1tag
Jun 14 2017 12:41
@Corinos this sign mostly means you have wrong syntax somewhere (unclosed bracket, quotes ...)
click it and scroll down a bit in JS
it'll will tell u exactly where that error is
Scott
@Corinos
Jun 14 2017 12:43
@h1tag Yeah, it's saying Unexpected Token Var right after my declaration of the URL var.
h1tag
@h1tag
Jun 14 2017 12:43

@Corinos

this sign mostly means you have wrong syntax somewhere (unclosed bracket, quotes ...)

Scott
@Corinos
Jun 14 2017 12:43
I have it closed off with a semi colon, so I'm not sure what else it could be, besides moving the var declaration somewhere else.
Eric Weiss
@eweiss17
Jun 14 2017 12:43
you see how your ajax request is yellow, it should be purple
Scott
@Corinos
Jun 14 2017 12:44
@eweiss17 Ah. Ok... Thats a start.
h1tag
@h1tag
Jun 14 2017 12:45
var url = "https://api.darksky.net/forecast/f0619667fb7e1739de0c5f5ca07b03b6/" + lat + "," + longi ";
Scott
@Corinos
Jun 14 2017 12:45
@eweiss17 @h1tag Should my ajax call be inside the function(){ call?
h1tag
@h1tag
Jun 14 2017 12:46
@Corinos no
Eric Weiss
@eweiss17
Jun 14 2017 12:47
line 9 should be }); if you want to close out that function
Ken Haduch
@khaduch
Jun 14 2017 12:47
@jfahmy - I couldn't see if anyone helped you with your portfolio question from :point_up: June 14, 2017 7:52 AM earlier. Looks like you might have gotten it working? If not, one thing to be aware of is that it looks like you have loaded CodePen's default version of Bootstrap, which is V4. Things have changed in V4 that you might have to be careful of. There is a migration document that highlights the changes. https://v4-alpha.getbootstrap.com/migration/
Eric Weiss
@eweiss17
Jun 14 2017 12:48
doing that causes your longi and lat to be inaccessible (out of scope)
also you do not have the $(document).ready(function{(
it won't make or break your code, but they sort of drill that into you in the previous lessons
Scott
@Corinos
Jun 14 2017 12:49

@eweiss17 Right, so I'm intentionally not closing that whole thing until the end. @h1tag Sorry, I must have tunnel vision. Are you saying that your

var url = "https://api.darksky.net/forecast/f0619667fb7e1739de0c5f5ca07b03b6/" + lat + "," + longi "; was different than mine?

Ken Haduch
@khaduch
Jun 14 2017 12:50

@jfahmy - one of the changes related to something you mentioned:

Dropped .center-block for the new .mx-auto class.

I like to recommend that Bootstrap 3 be used instead, since the lessons are based on that. But you can stick with v4, just take care to look at the changes and update what you are doing as necessary. Good luck!

Scott
@Corinos
Jun 14 2017 12:50
@eweiss17 Yeah, I know what you mean about the document ready function. When I was digging around I found on the jquery site that you can use the $(function(){ instead and it's shorter.
h1tag
@h1tag
Jun 14 2017 12:50
@Corinos there's an extra quote sign at the end. But I just realized that there's another error
Scott
@Corinos
Jun 14 2017 12:51
@h1tag I see what you mean, finally!
@h1tag Ok, I'll see if I can find the next issue, heh.
thanks @h1tag and @eweiss17 !
CamperBot
@camperbot
Jun 14 2017 12:51
corinos sends brownie points to @h1tag and @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 848 | @h1tag |http://www.freecodecamp.com/h1tag
:cookie: 475 | @eweiss17 |http://www.freecodecamp.com/eweiss17
h1tag
@h1tag
Jun 14 2017 12:51
@Corinos about ajax(), I just reviewed the code and also realized it should be between your function brackets (I thought you were asking in general)
and the var url ... line
Koleen BP
@KBPsystem777
Jun 14 2017 12:52
Hi guys, wanted to get your feedback for my tribute page: https://kbpsystem777.github.io/Shot/WebDev1.4.html
Thanks!
Ravi Kishore Thella
@ravikishorethella
Jun 14 2017 12:55
@KBPsystem777 It looks good but, for the paragraph text give some line-height property.
Eric Weiss
@eweiss17
Jun 14 2017 13:00
@Corinos i'd shove your js into a notepad file, then go through one step at a time of implementing it back in to confirm each piece as working
Scott
@Corinos
Jun 14 2017 13:01
@eweiss17 Yeah, now it's not throwing an error, but it's not doing anything either. Did you say I could run it in Codepen without the document ready etc stuff?
Eric Weiss
@eweiss17
Jun 14 2017 13:03
yeah, that shouldn't matter
Koleen BP
@KBPsystem777
Jun 14 2017 13:03
Thanks @ravikishorethella let me try your suggestion
CamperBot
@camperbot
Jun 14 2017 13:03
:cookie: 540 | @ravikishorethella |http://www.freecodecamp.com/ravikishorethella
kbpsystem777 sends brownie points to @ravikishorethella :sparkles: :thumbsup: :sparkles:
Eric Weiss
@eweiss17
Jun 14 2017 13:04
I believe when variables are yellow, that means they have no reference
Ken Haduch
@khaduch
Jun 14 2017 13:04
@KBPsystem777 - it looks pretty good - I would bump up the text size a little bit to make it more readable. And maybe reduce the size of the text of his name at the top, as it seems to wrap as the screen size is change, before it shifts down to a smaller size.
The "Early Life" section the two different types of text justification looks a little strange. And a general clean up of some text - highlighting the names of movies, etc. would be a good idea. But a nice page, and i didn't know anything about that man, so that's interesting to read.
Eric Weiss
@eweiss17
Jun 14 2017 13:04
and your ajax call being yellow also means it is not working
I believe that is the case
Koleen BP
@KBPsystem777
Jun 14 2017 13:10
Great thanks for feedback @khaduch Ill take your advise :)
CamperBot
@camperbot
Jun 14 2017 13:10
kbpsystem777 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2984 | @khaduch |http://www.freecodecamp.com/khaduch
ChrisAB74
@ChrisAB74
Jun 14 2017 13:32
I am trying to put an image in a section of my portfolio, this is CSS code:
.section2{
background-img:src="https://unsplash.com/search/office?photo=wkO0q0UTqc8";
style= position: absolute; top: 50px; left: 50px;
}
And html:
<section id="projects" class="section2"><img src="https://unsplash.com/search/office?photo=wkO0q0UTqc8">
<h1 class="section-title"><h1>Projects.</h1>
<p class="section-paragraph">Projects Coming Soon. Put some IMG tags in here</p></section>
Eric Weiss
@eweiss17
Jun 14 2017 13:33
and what is happening ?
looks like you have the image as a background then the image as an image ?
bawsumb
@bawsumb
Jun 14 2017 13:35
My switch statement only returns the default:
switch ($("#weatherType")) {
case "partly-cloudy-day":
document.getElementById("icon").src = "http://www.clker.com/cliparts/c/3/4/5/12065656111622707605Anonymous_simple_weather_symbols_2.svg.thumb.png";
break;
case "clear-day":
document.getElementById("icon").src = "http://www.freeiconspng.com/uploads/weather-icon-10.png"
break;
case "partly-cloudy-night":
document.getElementById("icon").src = "http://findicons.com/files/icons/2614/weather_icons/100/17.png";
break;
case "clear-night":
document.getElementById("icon").src = "http://findicons.com/files/icons/2614/weather_icons/100/15.png";
break;
case "rain":
document.getElementById("icon").src = "http://findicons.com/files/icons/2614/weather_icons/100/26.png";
break;
case "snow":
document.getElementById("icon").src = "http://findicons.com/files/icons/2614/weather_icons/100/28.png";
break;
default:
document.getElementById("icon").src = "http://www.clker.com/cliparts/2/b/6/5/1218784770369131859sivvus_weather_symbols.svg.thumb.png";
break;
}
ChrisAB74
@ChrisAB74
Jun 14 2017 13:35
@eweiss17 The section is showing a img tag at the corner of the page.
Eric Weiss
@eweiss17
Jun 14 2017 13:38
@bawsumb console.log() this "$("#weatherType")" so see if you are getting what you expect to get
bawsumb
@bawsumb
Jun 14 2017 13:41
@eweiss17 apparently not what I was intending, says too large for codepen to show. Will have to work on it. Thanks!
CamperBot
@camperbot
Jun 14 2017 13:41
bawsumb sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 477 | @eweiss17 |http://www.freecodecamp.com/eweiss17
Eric Weiss
@eweiss17
Jun 14 2017 13:42
@bawsumb i am going to guess that $("#weatherType") holds what you got from the api?
bawsumb
@bawsumb
Jun 14 2017 13:44
@eweiss17 that is correct
Eric Weiss
@eweiss17
Jun 14 2017 13:45
what did it display when you console.log()'d it
bawsumb
@bawsumb
Jun 14 2017 13:45
Log Skipped: Sorry, this log was too large for our console. You might need to use the browser console instead
CamperBot
@camperbot
Jun 14 2017 13:45
Archives for HelpFrontEnd
Yahia
@y-zaky
Jun 14 2017 13:46
hey guys
i have a question
why does my calculator carry out the click event listener even though i havent clicked?
Eric Weiss
@eweiss17
Jun 14 2017 13:46
@bawsumb you should have really got a value, link your pen
Neeraj Lagwankar
@FlashBlaze
Jun 14 2017 13:52
I'm on this personal portfolio webpage and the sample code provided involves a lot of advanced stuff which the course has not covered till now. So what should I do?
Please help. Should I just falsely tick mark and go ahead?
Eric Weiss
@eweiss17
Jun 14 2017 13:56
@bawsumb real ugly, but i got it to work
Yash Yadav
@accidentalgenius
Jun 14 2017 13:59
This message was deleted
This message was deleted
Yahia
@y-zaky
Jun 14 2017 13:59
guys any help? why is my click event running before i click?
Marianissimus
@Marianissimus
Jun 14 2017 14:01
@bowssy88 i cant even start it:(
Long Nguyen
@longnt80
Jun 14 2017 14:01
@bowssy88
change
x[0].addEventListener("click", screenNumber());
to
x[0].addEventListener("click", screenNumber);
Yash Yadav
@accidentalgenius
Jun 14 2017 14:04
This message was deleted
CamperBot
@camperbot
Jun 14 2017 14:04
accidentalgenius sends brownie points to @bawsumb :sparkles: :thumbsup: :sparkles:
:cookie: 264 | @bawsumb |http://www.freecodecamp.com/bawsumb
Yash Yadav
@accidentalgenius
Jun 14 2017 14:04
This message was deleted
Elliot S.
@SwarmSE
Jun 14 2017 14:06
@FlashBlaze link your codepen and if you have specific questions, let's hear them
neuronphysics
@neuronphysics
Jun 14 2017 14:06
I am doing a random quote machine
and the request I sent it returns error
bawsumb
@bawsumb
Jun 14 2017 14:07
@eweiss17 you were able to get it to work?
Yash Yadav
@accidentalgenius
Jun 14 2017 14:08
This message was deleted
This message was deleted
Yahia
@y-zaky
Jun 14 2017 14:10
@longnt80 thank you, but now, when i click nothing happens
CamperBot
@camperbot
Jun 14 2017 14:10
bowssy88 sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 372 | @longnt80 |http://www.freecodecamp.com/longnt80
Yahia
@y-zaky
Jun 14 2017 14:10
can you please refresh?
@longnt80 actually wait, when i click it works xD, now i must do the same for all the other buttons
Long Nguyen
@longnt80
Jun 14 2017 14:11
@bowssy88 x[0].value.addEventListener("click", screenNumber); remove .value
Ken Haduch
@khaduch
Jun 14 2017 14:11
@FlashBlaze - in a way, it's unfortunate that they show a "flashy" site for the portfolio example. You don't have to approach that - you can make a nice looking page using Bootstrap. You can see examples (and detailed step-by-step creation of the example pages) on the http://w3schools.com/bootstrap lessons in the "Themes" section. Note that they are using Bootstrap v3 - and you can just use it as a way to get some design ideas. Basically, you should start on the project, get it to a good point where it looks good, and submit it. You can always go back and modify it as you learn more and have more experience. That's my suggestion, I'm sure that others would also have good ideas.
Yahia
@y-zaky
Jun 14 2017 14:12
@longnt80 thank you that worked, now i will try to do the same for all the other buttons. But i don't want to do a different function for every single button..... there must be another way. Probably will use a SWITCH statement
CamperBot
@camperbot
Jun 14 2017 14:12
bowssy88 sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:warning: bowssy88 already gave longnt80 points
Yahia
@y-zaky
Jun 14 2017 14:15
@bowssy88 hmm i can't use a switch statement, what method would you sugest?
Ken Haduch
@khaduch
Jun 14 2017 14:16
@neuronphysics - what kind of error did you get? Do you have a link to post or code to share here?
Eric Weiss
@eweiss17
Jun 14 2017 14:17
@bawsumb oh the pen i posted didn't have my edits?
Long Nguyen
@longnt80
Jun 14 2017 14:18
@bowssy88 let me check, I used jQuery for my calculator, I have to see the methods for vanilla
Yahia
@y-zaky
Jun 14 2017 14:21
thank you
Axiomteck
@axiomteck
Jun 14 2017 14:21
Hi every one Im currently building websites with wordpress. but my dream is to stop depending on wordpress, and build my own system like wordpress
Neeraj Lagwankar
@FlashBlaze
Jun 14 2017 14:22
@khaduch thanks a lot! Will try doing that. So even if I'm unable to do all the required things, I'll have to check those boxes right?
CamperBot
@camperbot
Jun 14 2017 14:22
flashblaze sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2985 | @khaduch |http://www.freecodecamp.com/khaduch
Axiomteck
@axiomteck
Jun 14 2017 14:22
in currently learning html5 and css3 and bootstrap
after does what gill be next
in order to build my own cms and frontend all connected
Mimi
@mariyahb3
Jun 14 2017 14:24
I need help! Is there a way I can group all three navigation buttons at the top and align them to the very far right? Thanks! https://codepen.io/mimib33/pen/LLGxqG
Marianissimus
@Marianissimus
Jun 14 2017 14:25
@mariyahb3 of course, you can place them all inside a container and position that container
Andrew Hickman
@ahickman3
Jun 14 2017 14:25
just gunna throw this out there again since no one yesturday was sure about it, anyone else use sublime and get an error "$ not defined" whenever trying to use jquery? it completely kills mmy ability to debug despite the fact that the jquery functions are working fine
Marianissimus
@Marianissimus
Jun 14 2017 14:26
@fullmetal7777 jQuery is not properly linked if you get that
Andrew Hickman
@ahickman3
Jun 14 2017 14:26
we got it linked yesturday :\ that was one the the problems we fixed
Marianissimus
@Marianissimus
Jun 14 2017 14:26
@mariyahb3 do you want to do it using custom divs or bootstrap classes?
Andrew Hickman
@ahickman3
Jun 14 2017 14:27
@Marianissimus its linked in the head, before the js
Ken Haduch
@khaduch
Jun 14 2017 14:27
@FlashBlaze - I think that the requirements for that are pretty straightforward. They usually say "use any libraries or techniques to design the page." Or something like that. You could probably just put up a really basic page with the information that should be there, and come back to it, but since bootstrap was introduced in a basic way, there is probably some expectation to try and use it somehow. You can end up with a nice looking page that way, and always make changes to it as new concepts are learned or you get new ideas.
Andrew Hickman
@ahickman3
Jun 14 2017 14:27
and just to make sure, i linked it above the js right above the body closing tag as well, still no fix. But the jquery worked regardless
Roxroy
@roxroy
Jun 14 2017 14:27
@mariyahb3 , try to add float: right; to the #mimi style.
Neeraj Lagwankar
@FlashBlaze
Jun 14 2017 14:28
@khaduch you're right. Will do it that way
Mimi
@mariyahb3
Jun 14 2017 14:31
@roxroy I tried that and it ended up like this. I want my name to the far left and the nav buttons to the right https://codepen.io/mimib33/pen/LLGxqG
Marianissimus
@Marianissimus
Jun 14 2017 14:33
@mariyahb3 of course, because everything - your name and the buttons - are inside the h1 id#mimi. you should break them apart and use another div for the buttons
Ken Haduch
@khaduch
Jun 14 2017 14:33
@mariyahb3 - it's usually a good idea to take the bootstrap navbar template and start with that, that way you make sure to get the proper HTML structure. There are then ways to do what you want. Make sure that you use the code from Bootstrap V4, since that is what you have linked. Or at least look at their code for examples of what you need to do, that's a standard setup for their navbar to do what you want.
capturethemoon
@capturethemoon
Jun 14 2017 14:50
I've run into a roadblock with the "Show the Current Weather" project. I'm trying to display the Skycon that correlates to the current weather. Currently I am trying to get the current weather's icon to display in a div called skyconDisplay. However, it doesn't seem to work for some reason. Any hints? Here is my codepen: https://codepen.io/capturethemoon/pen/JXNNLE
Roxroy
@roxroy
Jun 14 2017 14:51
@mariyahb3, it will take a bit more effort to get that look and there are two options that you can use. Either use bootstrap classes to get the effect like this, or restructure your code to incorporate this layout. My suggestion is to go with BS 3.3.7 and use the <nav> <ul class="nav nav-pills pull-right"> .... tags and styles. In addition, learning BS now will help in the other FCC challenges.
Ken Haduch
@khaduch
Jun 14 2017 15:00
@capturethemoon - looks like an error Uncaught ReferenceError: skyconClass is not defined is showing up in the console?
Rohit Gautam
@AzzlerV
Jun 14 2017 15:02
how to change the color.. Like how to replace this keyword?? "btn-primary"??
Dinesh GR
@GR-D
Jun 14 2017 15:06
Can someone tell me how to align image on the left and text on the right ?
Ramsey Njire
@RamseyNjire
Jun 14 2017 15:06
I can't find my tribute page on codepen
Ken Haduch
@khaduch
Jun 14 2017 15:06
@capturethemoon - where are these icons coming from?
Ramsey Njire
@RamseyNjire
Jun 14 2017 15:07
It's not under the myprojects folder
Help?
capturethemoon
@capturethemoon
Jun 14 2017 15:08
@khaduch They're from Skycons: https://darkskyapp.github.io/skycons/.
@khaduch Thanks for catching the error with skyconClass! I fixed it, but I'm still not able to display the skycon.
CamperBot
@camperbot
Jun 14 2017 15:09
capturethemoon sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2986 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Jun 14 2017 15:09
@capturethemoon - how do you load them into your project? I haven't seen where they are being referenced - still looking at the code.
Dinesh GR
@GR-D
Jun 14 2017 15:09
<div class = "section">
<div class = "container-fluid">
<div class = "row">
<div class = "col-md-6 col-xs-12" style="padding: 0;">
<h1 class = "font-h1"> The journey of Ada Lovelace </h1>
<h2 class = "font-h2"> The first computer programmer </h2>
<img src="https://historiacomp.files.wordpress.com/2011/07/ada-augusta-byron.jpg" alt="Ada lovelace" width="40%">
</div>
<div class = "col-md-6 col-xs-12">
<div class = "row">
<h3 class = "font-h12 text-center"> Ada Lovelace </h3>
<h3> Ada lovelace was born on 10 Decemeber 1815 to Lord bryon and his wife Anna Isabella Milbanke. She was the first person to recognise that machines are beyond calculation and they have other applications. Infact she designed the first algorithm that intended to carry out on such machines. She was hence known as the first computer programmer.</h3>
</div>
</div>
</div>
</div>
</div>
can someone help me out ?
I am trying to put the image on the left and text on the right
capturethemoon
@capturethemoon
Jun 14 2017 15:10
@khaduch Towards the bottom of my JavaScript, at the line that says "var icons = new Skycons". Then I display them in the HTML using a canvas class.
Ken Haduch
@khaduch
Jun 14 2017 15:12
@capturethemoon - I'm starting to see how it's set up... I don't know this technology, I'll see if I can figure out what's going wrong. I don't know if you can just use the name - there might be some kind of lookup in the code that you have to do? I'll be checking it out and get back to you in a few minutes...
Dinesh GR
@GR-D
Jun 14 2017 15:12

@GR-D

<div class = "section">
<div class = "container-fluid">
<div class = "row">
<div class = "col-md-6 col-xs-12" style="padding: 0;">
<h1 class = "font-h1"> The journey of Ada Lovelace </h1>
<h2 class = "font-h2"> The first computer programmer </h2>
<img src="https://historiacomp.files.wordpress.com/2011/07/ada-augusta-byron.jpg" alt="Ada lovelace" width="40%">
</div>
<div class = "col-md-6 col-xs-12">
<div class = "row">
<h3 class = "font-h12 text-center"> Ada Lovelace </h3>
<h3> Ada lovelace was born on 10 Decemeber 1815 to Lord bryon and his wife Anna Isabella Milbanke. She was the first person to recognise that machines are beyond calculation and they have other applications. Infact she designed the first algorithm that intended to carry out on such machines. She was hence known as the first computer programmer.</h3>
</div>
</div>
</div>
</div>
</div>
can someone help me out ?
I am trying to put the image on the left and text on the right

capturethemoon
@capturethemoon
Jun 14 2017 15:14
@khaduch Okay, sounds good. Thanks, I appreciate the help.
CamperBot
@camperbot
Jun 14 2017 15:14
capturethemoon sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: capturethemoon already gave khaduch points
Ken Haduch
@khaduch
Jun 14 2017 15:23
@capturethemoon - it looks like you are setting the icon information according to your code, but I don't see how this is supposed to work - looking at the Skycons information to see how these are supposed to be used.
mhdns
@mhdns
Jun 14 2017 15:31
hi guys, trying to to make the display change as I change the session change but don't know why it is not working
plus it is clearly not image responsive
CamperBot
@camperbot
Jun 14 2017 15:32
mariyahb3 sends brownie points to @marianissimus and @khaduch :sparkles: :thumbsup: :sparkles:
:cookie: 411 | @marianissimus |http://www.freecodecamp.com/marianissimus
:star2: 2987 | @khaduch |http://www.freecodecamp.com/khaduch
Mimi
@mariyahb3
Jun 14 2017 15:38
I've figured it out, nevermind
Gulsvi
@gulsvi
Jun 14 2017 15:38
@MCTwoDigitZero He uses a fadeIn effect by animating the opacity.
.animate({
    opacity: '0.8'
  }, 2000);
Marin
@MarinBegovic
Jun 14 2017 15:39
hi,i would like to display the green part picture over the white (to represent a completed step),but with animation to create an illusion like filling from left to right and that part to be triggered with click on next button
unfortunately i'm a complete noob in jquery,i tried bunch of stuff with toggle,and just animate width on click,but didn't work
any advice how to do that,or maybe a better way than using pictures
https://codepen.io/Rinma95/pen/owzvLW
Kaz Baig
@kbaig
Jun 14 2017 15:46
@MarinBegovic you could position: absolute, right: 0 the green bit and change the width with jquery
@MarinBegovic you're trying to do something like a progress bar right
Marin
@MarinBegovic
Jun 14 2017 15:47
@kbaig yes
ChrisAB74
@ChrisAB74
Jun 14 2017 15:49
I have two issues, my nav bar scrolls with the page, don't want that, and my grid doesn't seem to be lining up correctly.
Kaz Baig
@kbaig
Jun 14 2017 15:49
@MarinBegovic do you want to fill in from one circle to the next over time? If so, you could create children that each change their background to green at each step
Marin
@MarinBegovic
Jun 14 2017 15:50
@kbaig this green part is just for this step
i would use different green part pictures for other steps of proggress bar
Gulsvi
@gulsvi
Jun 14 2017 15:50
@capturethemoon give your skycon <canvas> element an ID, like id="skyconCanvas" and then do:
 var iconCode = data.currently.icon; // icon code that comes back from the API
 var skycons = new Skycons({ color: "#fff" }); // pick any color
 skycons.add(document.getElementById('skyconCanvas'), iconCode); // add the correct skycon to the canvas element
 skycons.play(); // animate the skycon
shivam gupta
@shivamg11000
Jun 14 2017 15:50
hey I have made solar sytem animation, https://codepen.io/shivamg11000/full/wezMyP/, look forward for reviews
Marin
@MarinBegovic
Jun 14 2017 15:50
@kbaig
yes,but how do i do that
Roxroy
@roxroy
Jun 14 2017 15:55
@shivamg11000 , nice work. Like the animation using the canvas.
shivam gupta
@shivamg11000
Jun 14 2017 15:55
ty @roxroy
CamperBot
@camperbot
Jun 14 2017 15:55
shivamg11000 sends brownie points to @roxroy :sparkles: :thumbsup: :sparkles:
:cookie: 952 | @roxroy |http://www.freecodecamp.com/roxroy
Gulsvi
@gulsvi
Jun 14 2017 15:56
@MarinBegovic It might be helpful to see how they do progress bars in another library first before trying to create your own. Instead of an image, they tend to use CSS background colors. This codepen uses bootstrap progress bars and jQuery .animate() to change the width of the background color over time. https://codepen.io/skycoder/pen/xdEmZL?editors=0010
capturethemoon
@capturethemoon
Jun 14 2017 15:56
@SkyCo0der Thanks, I'll try this and see if it works!
CamperBot
@camperbot
Jun 14 2017 15:56
capturethemoon sends brownie points to @skyco0der :sparkles: :thumbsup: :sparkles:
:warning: @skyco0der's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
Kaz Baig
@kbaig
Jun 14 2017 15:57
@ChrisAB74 nav is staying at the top of the dom for me
ChrisAB74
@ChrisAB74
Jun 14 2017 15:58
@kbaig I misspoke, I want it to be visible all the time.
Gulsvi
@gulsvi
Jun 14 2017 16:00
@ChrisAB74 Take a look at this section of the documentation: http://getbootstrap.com/components/#navbar
They talk about navbars that stay fixed to the top of the page, ones that scroll away with the page, and ones that stay stuck to the bottom of the page.
Ken Haduch
@khaduch
Jun 14 2017 16:01
@capturethemoon - I'm having a little trouble focusing on this, but from what I can see, you are not setting the weather icon the same way for the weather forecast as you are for the icon in the title? I think that you might need to implement a function to perform that setup or make a translation table to get the weather type translated to the icon name and then use the icons.set function to set it up?
ChrisAB74
@ChrisAB74
Jun 14 2017 16:01
@SkyC0der Thank you for that
CamperBot
@camperbot
Jun 14 2017 16:01
chrisab74 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1700 | @skyc0der |http://www.freecodecamp.com/skyc0der
Marin
@MarinBegovic
Jun 14 2017 16:02
@SkyC0der i've seen that,the main problem is i need a curve,and don't know how to do one without using a picture
i've tried using borders but didn't look right
Gulsvi
@gulsvi
Jun 14 2017 16:03
@MarinBegovic That's also possible with CSS, sometimes it's easier to start with a straight line though.
This library has shaped progress bars: https://kimmobrunfeldt.github.io/progressbar.js/
capturethemoon
@capturethemoon
Jun 14 2017 16:04
@khaduch Okay thanks, I'll try that. I'm not familiar with translation tables, but I will do some research and see what I can figure out.
CamperBot
@camperbot
Jun 14 2017 16:04
capturethemoon sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: capturethemoon already gave khaduch points
Gulsvi
@gulsvi
Jun 14 2017 16:07
@capturethemoon @khaduch This is the easiest approach I can think of - no need for translation tables, the API gives you the code needed for the icon. https://codepen.io/skycoder/pen/yXYoje
ChrisAB74
@ChrisAB74
Jun 14 2017 16:07
@SkyC0der When I follow those links and put in what it says, my scrolling goes away.
Gulsvi
@gulsvi
Jun 14 2017 16:09
@ChrisAB74 Did you want to use a bootstrap navbar or try to create it without bootstrap?
I noticed by using this: <div class="topnav navbar-fixed-top" id="myTopnav">, it stays in place at the top of the screen and your scrolling continues to work, but your navbar is not a standard bootstrap navbar, so it may cause other complications depending on how you update/modify it in the future.
ChrisAB74
@ChrisAB74
Jun 14 2017 16:11
I would like to use bootstrap.
Gulsvi
@gulsvi
Jun 14 2017 16:11
The easiest way to do that is to copy/paste the navbar code from that link I sent and modify it to your needs
replace the link text with your "About", "Projects", and "Contact Me" links
Mimi
@mariyahb3
Jun 14 2017 16:15
How can I get my "about" text aligned horizontally with my picture? https://codepen.io/mimib33/pen/LLGxqG
Ken Haduch
@khaduch
Jun 14 2017 16:16
@capturethemoon - there was that concept of the "lookup table" in the exercises. The reason why I think something like that would be helpful here is that the weather condition is coming through with a name like "partly-cloudy-day" and the icon would be icons.PARTLY_CLOUDY_DAY. Although they might give the option to use strings, they mention that on the documentation page. It's not exactly clear to me how it should be used? Maybe a little further investigation and looking at their code.
Gulsvi
@gulsvi
Jun 14 2017 16:19
For partly-cloudy-day, it's: skycons.add(document.getElementById('skycon'), 'partly-cloudy-day');
Teckgeek1
@Teckgeek1
Jun 14 2017 16:20
I'm stuck, I'm on the portfolio challenge dose anyone know how to create the second page
Gulsvi
@gulsvi
Jun 14 2017 16:20
They use the same icon codes that the API gives you
Francisco Machado
@CodeFiasco
Jun 14 2017 16:20
Hi everyone! I need some help :D
I have a 3 strings with year, month and day
and I wanted to set an html input type date value with it
but I have been trying it for almost a couple of hours with no success. Does anyone know how to do it?
Marius Nicolae
@bytao7mao
Jun 14 2017 16:21
@mariyahb3 One simple way would be to give your text a margin-top
https://codepen.io/bytao7mao/pen/jwMxEL
but if you want to be responsive you have to add some media querry
Gulsvi
@gulsvi
Jun 14 2017 16:23
@mariyahb3 a basic start with the grid would be like:
<div class="row">
  <div class="col-md-8">
    <p>Young, bright, self-taught front-end developer. Design-oriented and dabs in character design/digital art.</p>
  </div>
  <div class="col-md-4">
    <img class="img-responsive" src="https://image.ibb.co/bZkJCk/meee.png">
  </div>
</div>
ChrisAB74
@ChrisAB74
Jun 14 2017 16:25
@SkyC0der Thank you again
CamperBot
@camperbot
Jun 14 2017 16:25
chrisab74 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: chrisab74 already gave skyc0der points
ChrisAB74
@ChrisAB74
Jun 14 2017 16:30
I am trying to get my buttons to jump to certain sections of my page. this is what I have for the code <button class="btn btn"a href="#projects">Projects</button></a>
Boris Yordanov
@borisyordanov
Jun 14 2017 16:30
@ChrisAB74 what do you mean by "jump" and why are you using the same class twice?
ChrisAB74
@ChrisAB74
Jun 14 2017 16:31
@borisyordanov I would like to page to to "jump to Contact me or projects when you click on the button in the nav bar.
Boris Yordanov
@borisyordanov
Jun 14 2017 16:33
@ChrisAB74 check this out - https://perishablepress.com/ids-are-anchors-too/ Target the id's of the sections of your page with hrefs
denizenofcode
@denizenofcode
Jun 14 2017 16:47
I’m working on the weather app. After I use $.get() to pull the data from, https://api.darksky.net/forecast/[key]/[latitude],[longitude] , how can I manipulate what I get? For example, how could I print the temperature to console? I don’t understand how to work with the object.
Andrew Hickman
@ahickman3
Jun 14 2017 16:50
sublime users, what build system do yall use for js/jquery?
denizenofcode
@denizenofcode
Jun 14 2017 16:57
For example, can someone please tell me why it isn’t printing the timezone to console?
Johnny
@jtan3
Jun 14 2017 17:00
@denizenofcode you need to call the api with getJSON
denizenofcode
@denizenofcode
Jun 14 2017 17:02
@jtan3 I changed my .get() .getJSON() but it’s still not displaying timezone. Any tips?
Johnny
@jtan3
Jun 14 2017 17:05
@denizenofcode .getJSON(url,function(data)) should look something like this
Mimi
@mariyahb3
Jun 14 2017 17:07
How can i make my image responsive to smaller screens? https://codepen.io/mimib33/pen/LLGxqG
Matthias Lang
@MatLang
Jun 14 2017 17:09
@mariyahb3 try using bootstrap img-fluid class
Hey guys, I have a really hard time figuring out how to set up my weather IP. I want to call my position coords with a return function, but this just gives me a value of undefined in the console.
I figured that this has something to do with the callback function, but just can't solve the problem.
*weather API
Gulsvi
@gulsvi
Jun 14 2017 17:13
@mariyahb3 You'll need to implement the grid correctly to start with, like in that code I showed you above. After that, you use the img-responsive class - also shown in that code above.
capturethemoon
@capturethemoon
Jun 14 2017 17:14
@khaduch Thanks, I will review the information about lookup tables. I will also see if I can spend some time analyzing the Skycons code.
CamperBot
@camperbot
Jun 14 2017 17:14
capturethemoon sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2988 | @khaduch |http://www.freecodecamp.com/khaduch
Gulsvi
@gulsvi
Jun 14 2017 17:15

@denizenofcode

    $.getJSON(url, function(data) {
      console.log(data);
    });

Use your browser's console (not the one in codepen) to debug errors and to view the large amount of data that will come back from the API. If you get a cross origin error, you will need to use JSONP by adding ?callback=? to your URL, or by using $.ajax with dataType: jsonp

ChrisAB74
@ChrisAB74
Jun 14 2017 17:19
I am having a weird thing happening . I have 4 social media account buttons at the bottom of my page. all have the fa icons except the last one.
Matthias Lang
@MatLang
Jun 14 2017 17:19
@SkyC0der can you please help me out?
denizenofcode
@denizenofcode
Jun 14 2017 17:19
@jtan3 thanks
CamperBot
@camperbot
Jun 14 2017 17:19
denizenofcode sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 406 | @jtan3 |http://www.freecodecamp.com/jtan3
denizenofcode
@denizenofcode
Jun 14 2017 17:19
@sky thanks
CamperBot
@camperbot
Jun 14 2017 17:19
denizenofcode sends brownie points to @sky :sparkles: :thumbsup: :sparkles:
:warning: @sky's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
Gulsvi
@gulsvi
Jun 14 2017 17:20
@MatLang When you run your console.log(), it completes before your location comes back. navigator.geolocation is an asynchronous call.
denizenofcode
@denizenofcode
Jun 14 2017 17:20
XMLHttpRequest cannot load https://api.darksky.net/forecast/98a838431653b09632986332015ef863/36.0842965,120.3790348. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.
Gulsvi
@gulsvi
Jun 14 2017 17:20
If you want to show your latitude on the page, you can do this:
$("document").ready(function() {
  var x = document.getElementById("demo");
  function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      x.innerHTML = "Geolocation is not supported by this browser.";
    }
  }
  function showPosition(position) {
    x.innerHTML = position.coords.latitude;
  }

  getLocation();
});
Mimi
@mariyahb3
Jun 14 2017 17:21
I'd actually like to place my picture between the two paragraphs. Can I do this with the bootstrap grid? https://codepen.io/mimib33/pen/LLGxqG
Matthias Lang
@MatLang
Jun 14 2017 17:21
@SkyC0der I want to story the longitude/latitude as a variable in order to make the correct API request later on.
@SkyC0der *store, sorry :)
denizenofcode
@denizenofcode
Jun 14 2017 17:22
@MatLang this is a tough one, eh?
Gulsvi
@gulsvi
Jun 14 2017 17:22
@MatLang You can't store the values in that way - you need to pass them as arguments to the functions where you'll use them
Matthias Lang
@MatLang
Jun 14 2017 17:23
@SkyC0der but I should be able to output them with console.log, right?
Gulsvi
@gulsvi
Jun 14 2017 17:25
@MatLang Yes, definitely. This is an example of sending the data to another function - you'll get it logged twice:
navigator.geolocation.getCurrentPosition(showPosition);

function showPosition(position) {
  console.log(position);
  getWeather(position)
}

function getWeather(position) {
  console.log(position);
}
you pass the 'position' data around to functions where it's needed
Cole Maly
@malycole
Jun 14 2017 17:25
when comparing 2 arrays using the filter function. can you compare them directly or do you need to compare them using a loop?
Matthias Lang
@MatLang
Jun 14 2017 17:27
@mariyahb3 You can, but you seem to have your picture in the "row" div. So this keeps your picture in the same row as the rest, I guess.
Elliot S.
@SwarmSE
Jun 14 2017 17:27
I'm having a bit of trouble with the roman numeral conversion challenge, anyone available to help?
Matthias Lang
@MatLang
Jun 14 2017 17:27
@mariyahb3 try seperating this.
Gulsvi
@gulsvi
Jun 14 2017 17:27
@MatLang Another example showing the flow from getting location, building a weather url, getting the weather data, and then showing it:
navigator.geolocation.getCurrentPosition(getWeather);

function getWeather(position) {
  var url = 'https://api url location/' + position.coords.latitude + ',' + position.coords.longitude
  $.getJSON(url, showWeather);
}

function showWeather(weatherData) {
  // display the weather on the page
}
Matthias Lang
@MatLang
Jun 14 2017 17:27
@SkyC0der thx a lot, I will try it this way! :)
CamperBot
@camperbot
Jun 14 2017 17:27
matlang sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1701 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Jun 14 2017 17:28
@malycole You'll need to loop through them and compare individual elements with one another
If you can sort them, you could convert them to strings and compare the strings though
var arr1 = [1,2,3]
var arr2 = [1,2,3]

if (arr1 === arr2) {
  console.log(true);
} else {
  console.log(false);  // false
}

if (arr1.toString() === arr2.toString()) {
  console.log(true);  // true
} else {
  console.log(false);
}
Cole Maly
@malycole
Jun 14 2017 17:32
function diffArray(arr1, arr2) {
  var firstArray = [];
  var secondArray = [];
  var finalArray = [];

    for(var i=0; i<arr1.length;i++){ 
      firstArray = arr1.filter(function(value){
          return value.indexOf(arr1[i]);

      }); 
    }
}

diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]);
My issue is that I'm doing indexOf wrong
Gulsvi
@gulsvi
Jun 14 2017 17:34
For that specific example, a quick check comparing the lengths of the two arrays will tell you they are not the same
Aside from that, I think you'd want to star with arr1, and see if the first element exists in arr2. If it does, remove that element from arr1 and arr2. Continue doing that for each element in arr1 until you've checked them all. Return the combination of what's left in both arrays.
Gulsvi
@gulsvi
Jun 14 2017 17:41
(your filter method is doing the removal, by the way, and will return what doesn't exist)
Cole Maly
@malycole
Jun 14 2017 17:43
so my question is, why does it matter that the lengths of the arrays are not the same? If I loop through the first array and check each number through the 2nd array, it shouldnt matter if I'm understanding it correctly
jarlnartey
@jarlnartey
Jun 14 2017 17:46

hello quick and simple question for you. i am trying to imitate the website for my local gym. in the upper part of the footer, they have this box that runs across the full width of the website and it contains four buttons in it. how do i go forwards to build it? is it simply html and css or do i need to use something else like bootstrap?

https://aktiv365.com/sandsli/

Mimi
@mariyahb3
Jun 14 2017 17:46
How can I get the text and picture to be centered no matter the screen size? https://codepen.io/mimib33/pen/LLGxqG
Got it, nevermind!
denizenofcode
@denizenofcode
Jun 14 2017 17:49
As per the Dark Sky API FAQ:

Why do I get the error No 'Access-Control-Allow-Origin' header is present on the requested resource when I try to call the API?
We take security very seriously at Dark Sky. As a security precaution we have disabled cross-origin resource sharing (CORS) on our servers.

Your API call includes your secret API key as part of the request. If you were to make API calls from client-facing code, anyone could extract and use your API key, which would result in a bill that you'd have to pay. We disable CORS to help keep your API secret key a secret.

To prevent API key abuse, you should set up a proxy server to make calls to our API behind the scenes. Then you can provide forecasts to your clients without exposing your API key.

So I can’t complete this project unless I set up a proxy server?
I keep getting this error:
Angelo Hijada
@aymodez
Jun 14 2017 17:49
Hey guys.
denizenofcode
@denizenofcode
Jun 14 2017 17:49
XMLHttpRequest cannot load https://api.darksky.net/forecast/98a838431653b09632986332015ef863/37.09024,-95.712891. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.
Angelo Hijada
@aymodez
Jun 14 2017 17:50
I have two images: I want the first one to disappear (fade out) when clicked and the second image to appear (fade in) afterwards. I can't seem to make this work :( Creating a random quote machine.
is there a way to have a reset timer so that it reverts back to the original image?
Clinton Shepard
@Taslack
Jun 14 2017 17:52
@denizenofcode no not necassarily. Do you have a pen?
Clinton Shepard
@Taslack
Jun 14 2017 17:55
@denizenofcode I openweather with this https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather?
denizenofcode
@denizenofcode
Jun 14 2017 17:56
@Taslack thanks
CamperBot
@camperbot
Jun 14 2017 17:56
denizenofcode sends brownie points to @taslack :sparkles: :thumbsup: :sparkles:
:cookie: 392 | @taslack |http://www.freecodecamp.com/taslack
Clinton Shepard
@Taslack
Jun 14 2017 17:56
@denizenofcode so you should be ablt to utilize the https://cors-anywhere.herokuapp.com/ as well for darksky.
Gulsvi
@gulsvi
Jun 14 2017 17:56
@denizenofcode I mentioned this :point_up: earlier to you - use JSONP if you get a cross origin error by adding ?callback=? to the end of your URL.
Clinton Shepard
@Taslack
Jun 14 2017 17:57
@denizenofcode and @SkyC0der is much simpler.
Gulsvi
@gulsvi
Jun 14 2017 17:57
Using a proxy hosted by someone else for demo purposes is not a great practice - it can go down without notice and get slow when used heavily
Your own proxy is a great practice though :)
At least you have some control over it. I've been meaning to learn how to do that....could be fun
Gurpreet SIngh
@Gurpreet3131
Jun 14 2017 17:59
hi, i have one doubt
denizenofcode
@denizenofcode
Jun 14 2017 17:59
thank you both of you. I’m not understanding what JSONP is or the callback. I’ll research it and give it another shot tomorrow! Thank you!
Clinton Shepard
@Taslack
Jun 14 2017 17:59
@SkyC0der lol, I would agree, but it is way way beyond scope of work.
@SkyC0der I dont know if you wanna be answering those questions . ;-)
Gurpreet SIngh
@Gurpreet3131
Jun 14 2017 18:00
I am working on animation and want the animation speed to change with a "slider", can you tell me what that slider is called?
Jorge
@OrangeKulture
Jun 14 2017 18:00
hey guys!
Clinton Shepard
@Taslack
Jun 14 2017 18:01
@OrangeKulture Hello.
Jorge
@OrangeKulture
Jun 14 2017 18:02
hows it going
Dinesh GR
@GR-D
Jun 14 2017 18:03
Hello everyone, so I am working on this pen and the <ul> is getting overlapped with the image. can anyone please tell where I m going wrong ?
https://codepen.io/GR-D/pen/pPBPbb?editors=1100
Clinton Shepard
@Taslack
Jun 14 2017 18:07
@GR-D What are you trying to accomplish with your div= on line 4?
Jorge
@OrangeKulture
Jun 14 2017 18:07
@GR-D i think u are not taking full advantage of the divs and how you organized your markup. Everything is contained within the all the divs. Essentially you could simply have a single set of div tags and have a class="allClasses"
container class is keeping the content at certain width, so the ul pushes over, since it won't fit .. is my guess
Clinton Shepard
@Taslack
Jun 14 2017 18:09
@GR-D What @OrangeKulture is part of the problem, but you have defined a css style for the whole div.....for what reason?
Nick Sladic
@Nickadiemus
Jun 14 2017 18:10
@GR-D Use the div as a wrapper for your ul tags
fdawsoniv
@fdawsoniv
Jun 14 2017 18:10
Hola. Anyone care to venture why my button isn't doing anything when clicked? I'm using the same syntax I used in another, working pen. https://codepen.io/fdawsoniv/pen/awdRMj
Nick Sladic
@Nickadiemus
Jun 14 2017 18:10
@GR-D This will let you add css to the div
Dinesh GR
@GR-D
Jun 14 2017 18:11
@Taslack That is just a background colour I have given !!! from a white to grey. However if you see the css part, most of the classes I haven't used at all
Clinton Shepard
@Taslack
Jun 14 2017 18:12
@GR-D Ooops sorry line 3, need to sit next closer to my screen. ;-)
Dinesh GR
@GR-D
Jun 14 2017 18:12
@Taslack That is the background colour I have given. which I assume is wrong !!
Netrunner21
@Netrunner21
Jun 14 2017 18:13
I just completed the Calculator project. I'd like some feedback. It anyone can break it, I'd be much obliged. Thanks!
Clinton Shepard
@Taslack
Jun 14 2017 18:13
@GR-D nope you defined the class then the css for that class in your css. That is good practice.
Nick Sladic
@Nickadiemus
Jun 14 2017 18:14
@fdawsoniv I'm looking
fdawsoniv
@fdawsoniv
Jun 14 2017 18:14
(update: only the Chill button has anything attached to it, so use that one, please)
Dinesh GR
@GR-D
Jun 14 2017 18:14
@Taslack You're right ! why the hell did i give ? maybe that's wrong !!!
fdawsoniv
@fdawsoniv
Jun 14 2017 18:15
I just found a typo on the variable, now fixed. Still not working. It didn't work when I put the replacement text directly in the function rather than using the variable.
Dinesh GR
@GR-D
Jun 14 2017 18:15
@Nickadiemus I'll try that , thanks
CamperBot
@camperbot
Jun 14 2017 18:15
gr-d sends brownie points to @nickadiemus :sparkles: :thumbsup: :sparkles:
:cookie: 312 | @nickadiemus |http://www.freecodecamp.com/nickadiemus
Clinton Shepard
@Taslack
Jun 14 2017 18:15
@GR-D lol, I mean there is nothing wrong with what you did there, it just leads to inconsistent code. You want to try to keep how you do things consistent to make your code readable for yourself.
Jorge
@OrangeKulture
Jun 14 2017 18:16
@fdawsoniv have you included jquery?
Nick Sladic
@Nickadiemus
Jun 14 2017 18:16
@fdawsoniv You need to include jQuery
@fdawsoniv I just did and it fixed it lol
fdawsoniv
@fdawsoniv
Jun 14 2017 18:16
@OrangeKulture Winner!
@OrangeKulture @Nickadiemus Thank you both. I always forget that.
CamperBot
@camperbot
Jun 14 2017 18:16
fdawsoniv sends brownie points to @orangekulture and @nickadiemus :sparkles: :thumbsup: :sparkles:
:cookie: 406 | @orangekulture |http://www.freecodecamp.com/orangekulture
:cookie: 313 | @nickadiemus |http://www.freecodecamp.com/nickadiemus
Jorge
@OrangeKulture
Jun 14 2017 18:17
@fdawsoniv np !
Icah Banton
@remdata
Jun 14 2017 18:18
hello all. Stepped away from codecamp for a while. Now I am getting the following errors. Is anyone here getting any of the following errors? Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
bootstrap.min.js:7 Uncaught Error: Bootstrap tooltips require Tether (http://tether.io/)
s.codepen.io/js/bootstrap.min.js Failed to load resource: the server responded with a status of 404 ()
Wisdom Peters
@blackcytographer
Jun 14 2017 18:19
pls how do i make an image to stay at the left side of a page
Dinesh GR
@GR-D
Jun 14 2017 18:19
@Taslack AGREED 100% :)
Clinton Shepard
@Taslack
Jun 14 2017 18:20
@Netrunner21 Excellent work on your calculator...looks like I wont be able to break anything. You even inclueded a limit. Only thing I might do is add a dynamic strechable number box so yiou dont have to have a limit.
Dinesh GR
@GR-D
Jun 14 2017 18:20
@Taslack thanks :)
CamperBot
@camperbot
Jun 14 2017 18:20
gr-d sends brownie points to @taslack :sparkles: :thumbsup: :sparkles:
:cookie: 393 | @taslack |http://www.freecodecamp.com/taslack
Nick Sladic
@Nickadiemus
Jun 14 2017 18:21
@blackcytographer You can align it left using the align attribute
Wisdom Peters
@blackcytographer
Jun 14 2017 18:21
pls how do i make an image to stay at the left side of a page
Gurpreet SIngh
@Gurpreet3131
Jun 14 2017 18:21
slider.png
What is this thing called in html??
Clinton Shepard
@Taslack
Jun 14 2017 18:21
@remdata Its the new bootstrap 4 that codepen defaults too. If you wanna keep it look at https://v4-alpha.getbootstrap.com/ and pay attention to the bootstrap CDN box.
Nick Sladic
@Nickadiemus
Jun 14 2017 18:22

@blackcytographer or a custom class

.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Yash Yadav
@accidentalgenius
Jun 14 2017 18:22
This message was deleted
This message was deleted
Nick Sladic
@Nickadiemus
Jun 14 2017 18:22
.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}
Yash Yadav
@accidentalgenius
Jun 14 2017 18:22
This message was deleted
This message was deleted
rosstoev
@rosstoev
Jun 14 2017 18:22
Yesterday i finished my local weather application and i want to share with you guys. I'm feeling awesome. Continue to work on other projects:
Clinton Shepard
@Taslack
Jun 14 2017 18:22
@remdata But there a few changes you need to be aware of if you wanna do that.....you can just add this CDN https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Ravi Kishore Thella
@ravikishorethella
Jun 14 2017 18:23
@rosstoev that's great
Clinton Shepard
@Taslack
Jun 14 2017 18:23
@accidentalgenius That is not a zip
Wisdom Peters
@blackcytographer
Jun 14 2017 18:23
@Nickadiemus a custom class
Nick Sladic
@Nickadiemus
Jun 14 2017 18:24
@blackcytographer like a css class
Ravi Kishore Thella
@ravikishorethella
Jun 14 2017 18:24
@rosstoev try to show the location name (city name) and also change the positions of the celsius and fahrenheit button
Icah Banton
@remdata
Jun 14 2017 18:24
@Taslack . Thanks
CamperBot
@camperbot
Jun 14 2017 18:24
remdata sends brownie points to @taslack :sparkles: :thumbsup: :sparkles:
:cookie: 394 | @taslack |http://www.freecodecamp.com/taslack
Wisdom Peters
@blackcytographer
Jun 14 2017 18:24
@Nickadiemus yea like a css class
Yash Yadav
@accidentalgenius
Jun 14 2017 18:25
This message was deleted
Nick Sladic
@Nickadiemus
Jun 14 2017 18:25

@blackcytographer

example

HTML

<div class = "right"></div>

CSS

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}
Clinton Shepard
@Taslack
Jun 14 2017 18:26
@accidentalgenius Nope...please dont post things like this as they are suspicious.
rosstoev
@rosstoev
Jun 14 2017 18:26
@ravikishorethella what do you recieve for city name?
Ravi Kishore Thella
@ravikishorethella
Jun 14 2017 18:27
@rosstoev I didn't get any name. I got the county name, state and country
Nick Sladic
@Nickadiemus
Jun 14 2017 18:27
@blackcytographer Did that help you understand?
Netrunner21
@Netrunner21
Jun 14 2017 18:27
@Taslack Thanks for checking it out. Much appreciated.
CamperBot
@camperbot
Jun 14 2017 18:27
netrunner21 sends brownie points to @taslack :sparkles: :thumbsup: :sparkles:
:cookie: 395 | @taslack |http://www.freecodecamp.com/taslack
Clinton Shepard
@Taslack
Jun 14 2017 18:29
@rosstoev I am getting a jquery.deferred exception saying that Skycons is not defined.
rosstoev
@rosstoev
Jun 14 2017 18:29
@ravikishorethella well i have to check that. In my case it's return city and country
Yash Yadav
@accidentalgenius
Jun 14 2017 18:29
This message was deleted
Ravi Kishore Thella
@ravikishorethella
Jun 14 2017 18:30
@rosstoev the dispayed information is correct but, it is not showing the city name .
Clinton Shepard
@Taslack
Jun 14 2017 18:30
@accidentalgenius LOL, you may just wanna be careful loading stuff like that yourself.
Gurpreet SIngh
@Gurpreet3131
Jun 14 2017 18:31
Can anyone help me out on a front end part?
Yash Yadav
@accidentalgenius
Jun 14 2017 18:31
This message was deleted
rosstoev
@rosstoev
Jun 14 2017 18:31
@ravikishorethella i understand, cus dark sky api doesn't provide city_name and for that reason i use google.
Yash Yadav
@accidentalgenius
Jun 14 2017 18:31
This message was deleted
This message was deleted
Clinton Shepard
@Taslack
Jun 14 2017 18:32
@accidentalgenius Looks good, good work.
rosstoev
@rosstoev
Jun 14 2017 18:32
those weather API's are so weird :D
Yash Yadav
@accidentalgenius
Jun 14 2017 18:32
This message was deleted
Ravi Kishore Thella
@ravikishorethella
Jun 14 2017 18:33
@rosstoev :smile: :+1:
Clinton Shepard
@Taslack
Jun 14 2017 18:33
@Netrunner21 No problem, I look forward to reviewing your future projects.
Nick Sladic
@Nickadiemus
Jun 14 2017 18:33
@Gurpreet3131 what do you need help with?
Gurpreet SIngh
@Gurpreet3131
Jun 14 2017 18:33
@Nickadiemus i want to make a slider to control speed of animation. I am using js for animation
Yash Yadav
@accidentalgenius
Jun 14 2017 18:34
This message was deleted
This message was deleted
Clinton Shepard
@Taslack
Jun 14 2017 18:34
@rosstoev K...sorry my super controlling ad blocker was blocking rawgithub.....your project looks great.
Gurpreet SIngh
@Gurpreet3131
Jun 14 2017 18:35
@Nickadiemus so can you help me on how can i make a slider?
Nick Sladic
@Nickadiemus
Jun 14 2017 18:36
@Gurpreet3131 have you looked at the w3 schools button slider tutorials?
rosstoev
@rosstoev
Jun 14 2017 18:36
@Taslack tnks man :)
ChrisAB74
@ChrisAB74
Jun 14 2017 18:36
When you guys get time mind giving me some feedback?
Gurpreet SIngh
@Gurpreet3131
Jun 14 2017 18:37
@Nickadiemus not yet
Nick Sladic
@Nickadiemus
Jun 14 2017 18:37
@Gurpreet3131 I don't know how sensitive you want the slider to be but you could customize a button to do what you need to do and have the js update the animation based on changing of the button
Clinton Shepard
@Taslack
Jun 14 2017 18:37
@rosstoev The only thing I can see is it does not scale down well.
Ravi Kishore Thella
@ravikishorethella
Jun 14 2017 18:37
@ChrisAB74 looks good but, try to change the red background
Gurpreet SIngh
@Gurpreet3131
Jun 14 2017 18:38
slider.png
i want to make something like this @Nickadiemus .
@Nickadiemus changing the speed of animation as i slide.
Nick Sladic
@Nickadiemus
Jun 14 2017 18:40
@Gurpreet3131 I almost forgot you could use jQuery UI
Gurpreet SIngh
@Gurpreet3131
Jun 14 2017 18:40
@Nickadiemus Can you help me out on how can I do it?
Clinton Shepard
@Taslack
Jun 14 2017 18:40
@ChrisAB74 Your text/background color mix needs work, would like to see the menu goto a hamburger menu when scaled down. your page is coming along nicely.
Nick Sladic
@Nickadiemus
Jun 14 2017 18:41
@Gurpreet3131 I would have to look into it. Have you started it yet?
ChrisAB74
@ChrisAB74
Jun 14 2017 18:41
@Taslack what do you mean by hamburger menu?
I agree text background is off, I can't seem to find anything I like. Any suggestions or tips?
Gurpreet SIngh
@Gurpreet3131
Jun 14 2017 18:42
@Nickadiemus i have made a speed controller using a input text field. But i want to replace it with the slider
Clinton Shepard
@Taslack
Jun 14 2017 18:42
Gurpreet SIngh
@Gurpreet3131
Jun 14 2017 18:42
@Taslack that looks amazing
Clinton Shepard
@Taslack
Jun 14 2017 18:42
@ChrisAB74 LOL....play around with colors....I suck at styleing. Just dont use dark text on a dark background.
@Gurpreet3131 Good, hope it works well for you.
Wisdom Peters
@blackcytographer
Jun 14 2017 18:44
@Nickadiemus not really sir
Nick Sladic
@Nickadiemus
Jun 14 2017 18:44
@Gurpreet3131 Here's an example of jQuery UI slider which you can use the values output and update it
ChrisAB74
@ChrisAB74
Jun 14 2017 18:45
@ravikishorethella I am trying to put in an image for my background this is what I have in css
.section{
background-img:url("http://graphicdesignsinspiration.com/wp-content/uploads/2014/06/100-Plus-Free-High-Resolution-Textures-and-Background-04.jpg");
min-height:300px;
margin-top:40px;
padding:20px;
padding:25px;
}
is that the right syntax?
Nick Sladic
@Nickadiemus
Jun 14 2017 18:46
.section{
background-img:url("http://graphicdesignsinspiration.com/wp-content/uploads/2014/06/100-Plus-Free-High-Resolution-Textures-and-Background-04.jpg");
  min-height:300px;
  margin-top:40px;
  padding:20px;
  padding:25px;
}
@ChrisAB74 Should be
Ravi Kishore Thella
@ravikishorethella
Jun 14 2017 18:47
@ChrisAB74 background-image not background-img:
@ChrisAB74 why did you give two times??
padding:20px;
padding:25px;
ChrisAB74
@ChrisAB74
Jun 14 2017 18:47
@ravikishorethella Thanks that is what I had wrong.
CamperBot
@camperbot
Jun 14 2017 18:47
chrisab74 sends brownie points to @ravikishorethella :sparkles: :thumbsup: :sparkles:
:cookie: 543 | @ravikishorethella |http://www.freecodecamp.com/ravikishorethella
ChrisAB74
@ChrisAB74
Jun 14 2017 18:47
mistake
Ravi Kishore Thella
@ravikishorethella
Jun 14 2017 18:48
@ChrisAB74 :thumbsup:
Nick Sladic
@Nickadiemus
Jun 14 2017 18:48
@ChrisAB74 my bad I just now realized i copied your code instead of my correction :worried:
Ravi Kishore Thella
@ravikishorethella
Jun 14 2017 18:49
@Nickadiemus :smile:
ChrisAB74
@ChrisAB74
Jun 14 2017 18:49
@Nickadiemus it happens, How do you guys put in screen shots? I can't seem to do that. along with the smiley faces?
thetapley
@thetapley
Jun 14 2017 18:49
Hello all, does anyone have any recommendations for where I could find a comprehensive list of bootstrap resources and div classes that are available? I'm starting the Tribute page but am not sure what class options are available beyond what I've used in the exercises. Thanks!
Clinton Shepard
@Taslack
Jun 14 2017 18:50
thetapley
@thetapley
Jun 14 2017 18:51
@Taslack Thanks!
CamperBot
@camperbot
Jun 14 2017 18:51
thetapley sends brownie points to @taslack :sparkles: :thumbsup: :sparkles:
:cookie: 396 | @taslack |http://www.freecodecamp.com/taslack
Gurpreet SIngh
@Gurpreet3131
Jun 14 2017 18:51
@Nickadiemus thanks
CamperBot
@camperbot
Jun 14 2017 18:51
gurpreet3131 sends brownie points to @nickadiemus :sparkles: :thumbsup: :sparkles:
:cookie: 315 | @nickadiemus |http://www.freecodecamp.com/nickadiemus
Clinton Shepard
@Taslack
Jun 14 2017 18:51
@thetapley be careful when loading bootstrap into codepen as it defaults to bootstrap 4....but if you wanna use bootstrap 4 use this resource. https://v4-alpha.getbootstrap.com/
Ravi Kishore Thella
@ravikishorethella
Jun 14 2017 18:51
@thetapley for bootstrap check this http://getbootstrap.com/components/
Clinton Shepard
@Taslack
Jun 14 2017 18:51
@thetapley Just know its in alpha.....and it is not as well documented or referenced.
thetapley
@thetapley
Jun 14 2017 18:53
Ah I see. I noticed in the instructional video that for the example they were using a div class="jumbotron" and I had no idea that even existed so I'm mainly wanting to get my vocabulary up.
Clinton Shepard
@Taslack
Jun 14 2017 18:54
@thetapley then go with bootstrap 3 instead of 4
@thetapley https://www.w3schools.com/bootstrap/ is a good reference if you are going to use 3 as well.
thetapley
@thetapley
Jun 14 2017 18:54
@Taslack ok thanks, I'll check them out.
CamperBot
@camperbot
Jun 14 2017 18:54
thetapley sends brownie points to @taslack :sparkles: :thumbsup: :sparkles:
:warning: thetapley already gave taslack points
BrianWilliams28
@BrianWilliams28
Jun 14 2017 18:58
could someone please take a look at my code and tell me why they think the tempUnit (C / F) isn't lining up next to the temperature?
https://codepen.io/BrianWilliams28/pen/BRrOgg
Stuart Taliaferro
@StuTal
Jun 14 2017 19:00
Hello, I'm looking for help getting the nav toolbar aligned to the right.
<nav class="navbar navbar-fixed navbar-default navbar-toggleable-md">
<a class="navbar-brand navbar-right" href="#"> Stuart Taliaferro</a>
<div class="navbar-nav">
<a class="nav-item nav-link text-muted" href="#">About</a>
<a class="nav-item nav-link text-muted" href="#">Portfolio</a>
<a class="nav-item nav-link text-muted" href="#">Contact</a>
</div>
</nav>
ChrisAB74
@ChrisAB74
Jun 14 2017 19:03
image.png
I can't get the white space to go away from the bottom of my nav bar and the start of the about section
Adel
@AdelMahjoub
Jun 14 2017 19:04
@BrianWilliams28 Because of the p tag where the temperatue sits is in display-block
ChrisAB74
@ChrisAB74
Jun 14 2017 19:04
image.png
@StuTal <nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<button type="button"class="btn btn"><a href="#about">About</a>
<button type="button"class="btn btn"><a href="#projects">Projects</a>
<button type="button" class="btn btn"><a href="#contact-me">Contact Me</a>
</div>
</nav>
Adel
@AdelMahjoub
Jun 14 2017 19:05
@BrianWilliams28 replace the p tag by span or set to the dispay: inline block
ChrisAB74
@ChrisAB74
Jun 14 2017 19:06
That is what I used @StuTal for my nav bar
Cole Maly
@malycole
Jun 14 2017 19:09
is it intended for you to use all the "helpful links" for the algorithm challenges? I usually end up using a couple but I don't always use all of them
Stuart Taliaferro
@StuTal
Jun 14 2017 19:10
Thanks @ChrisAB74 . Do you know if there is a way to align to right without changing the element from <a> to <button>?
CamperBot
@camperbot
Jun 14 2017 19:10
stutal sends brownie points to @chrisab74 :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @chrisab74 |http://www.freecodecamp.com/chrisab74
ChrisAB74
@ChrisAB74
Jun 14 2017 19:11
@StuTal
.container{
padding:10px;
text-align:right;
}
Stuart Taliaferro
@StuTal
Jun 14 2017 19:15
Thanks again @ChrisAB74 . That seemed to do the trick when i removed the navbar-toggleable-md class, but when that class is present, the nav bar is still left aligned. I found navbar-toggleable-md class necessary to get a horizontal nav bar instead of vertical , which happens when i take it out.
CamperBot
@camperbot
Jun 14 2017 19:15
stutal sends brownie points to @chrisab74 :sparkles: :thumbsup: :sparkles:
:warning: stutal already gave chrisab74 points
Conrad Kay
@conradkay
Jun 14 2017 19:18
https://github.com/conradkay/myCounter
I am getting an unusual state bug, can anyone check it out?
BrianWilliams28
@BrianWilliams28
Jun 14 2017 19:31
@AdelMahjoub thanks that worked but now the temperature is squished too close to the weather icon, and no matter how much margin I add to the top it doesn't seem to move, take a look if you dont mind.
https://codepen.io/BrianWilliams28/pen/BRrOgg
CamperBot
@camperbot
Jun 14 2017 19:31
brianwilliams28 sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 456 | @adelmahjoub |http://www.freecodecamp.com/adelmahjoub
BrianWilliams28
@BrianWilliams28
Jun 14 2017 19:33
@AdelMahjoub NVM i think i found a solution, i wrapped that whole line in a seperate div. check now!
https://codepen.io/BrianWilliams28/full/BRrOgg/
Radek
@radekjohn
Jun 14 2017 19:56
Hi, look at my Simon Game. What do you think?
Gbenga Oyetade
@gbengaPS
Jun 14 2017 20:00
Hi everyone, i'm having challenges testing for truthy in the everything-be-true task
lakshmi pallavi
@pallavilakhi9
Jun 14 2017 20:01
Hi everyone im having trouble with getting the content and picture side by side
and this is the code im trying
<div class="container first">
<div class="row">
<div class="col-sm-8"> Had experience of 3 years in database support, Intrested in web devolepment , learned HTML5, CSS3 , Jquery , Bootstrap.In process of learning Javascript, Angularjs/Reactjs , Ajax , Mongo DB and so on. Personal intrests - Movies, Book reading, Travelling, food and Crafts
</div>
</div class="col-sm-4">
<img class="img" src="http://i63.tinypic.com/vyplkw.jpg" alt="Pallavi profile picture"/>
</div>
</div>
</div>
Can please anyone help me out
Adel
@AdelMahjoub
Jun 14 2017 20:03
@BrianWilliams28 yes but you set #temperature to display:inline-block too, it was display: block before
@BrianWilliams28 you can check the default style on the dev tools
tommy
@tommygebru
Jun 14 2017 20:08
@gbengaPS is this an fcc project or challenge?
Adel
@AdelMahjoub
Jun 14 2017 20:09
@pallavilakhi9
<div class="container first">
  <div class="row">
    <div class="col-sm-8"> Had experience of 3 years in database support, Intrested in web devolepment , learned HTML5, CSS3 , Jquery , Bootstrap.In process of learning Javascript, Angularjs/Reactjs , Ajax , Mongo DB and so on. Personal intrests - Movies, Book reading, Travelling, food and Crafts
    </div>
    <div class="col-sm-4">
      <img 
          class="img img-responsive img-thumbnail" 
          src="http://i63.tinypic.com/vyplkw.jpg" alt="Pallavi profile picture"/>
   </div>
  </div>
</div>
tommy
@tommygebru
Jun 14 2017 20:09
@AdelMahjoub haha you beat me to it
Adel
@AdelMahjoub
Jun 14 2017 20:09
@pallavilakhi9 check your opening and closing divs
@tommygebru maybe he found a solution already tho
tommy
@tommygebru
Jun 14 2017 20:12
@AdelMahjoub always the best
lakshmi pallavi
@pallavilakhi9
Jun 14 2017 20:15
@AdelMahjoub : Thankyou
CamperBot
@camperbot
Jun 14 2017 20:15
pallavilakhi9 sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 457 | @adelmahjoub |http://www.freecodecamp.com/adelmahjoub
Abdallah ElSallal
@Abdallah-Youssef
Jun 14 2017 20:20
help for some reason i can't change the value of either longitude or latitude https://codepen.io/woofyest/pen/qjEwbp
in javascript
alperez21
@alperez21
Jun 14 2017 20:23
Can someone tell me why my heading is not centered? <div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-xs-12">
<h1 class="text-center">ME</h1>
</div>
</div>
</div>
</div>
JD Tadlock
@jdtdesigns
Jun 14 2017 20:29

@Abdallah-Youssef geolocation is asynchronous. The data won't be received instantly. Because of this, you have the callback function of getCurrentPosition() that passes you the data after it is received. This is where you would alert(latitude) and call other functions.

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      latitude = position.coords.latitude;
      longitude = position.coords.longitude;
      alert (latitude); // 139492342.11313
    });
  }
  // data has not been received before this is run
  alert (latitude); // ''

check this out https://www.youtube.com/watch?v=obaSQBBWZLk

Gbenga Oyetade
@gbengaPS
Jun 14 2017 20:30
@tommygebru yes it is. Intermediate algorithm challenge.
Dhrumit Thakkar
@Dhrumit14
Jun 14 2017 20:31
Hey Guys
I have completed Random Quotes Challenge using Visual Studio Code IDE
Abdallah ElSallal
@Abdallah-Youssef
Jun 14 2017 20:32
@jdtdesigns thnx will check it out and get back to you
CamperBot
@camperbot
Jun 14 2017 20:32
abdallah-youssef sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:star2: 1032 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Dhrumit Thakkar
@Dhrumit14
Jun 14 2017 20:32
But when I am uploading same code to Codepen.io to submit the challenge it's not working
Hey Guys
I have completed Random Quotes Challenge using Visual Studio Code IDE
But when I am uploading same code to Codepen.io to submit the challenge it's not working
Does anybody know what can be the problem ?
JD Tadlock
@jdtdesigns
Jun 14 2017 20:33
post your pen @Dhrumit14
tommy
@tommygebru
Jun 14 2017 20:35
@jdtdesigns :wave:

@gbengaPS ok i think i understand it now

for every object in the first argument collection check to see if it has a "truthy value" for the second argument "pre"

Dhrumit Thakkar
@Dhrumit14
Jun 14 2017 20:37
@jdtdesigns
Gbenga Oyetade
@gbengaPS
Jun 14 2017 20:37
@tommygebru yes. Exactly
Adel
@AdelMahjoub
Jun 14 2017 20:37
@Dhrumit14
// Get rid of http:
 $.getJSON("//api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=jsonp&lang=en&jsonp=?"
tommy
@tommygebru
Jun 14 2017 20:37
whats your solution so far? @gbengaPS
Josh
@LawlyBoy
Jun 14 2017 20:38
hello all I cant seem to upload an image of my own design and add it as a link on my Pen page I am using GitHub to do it which was hardship as it is but I'm at a loss on what I'm doing wrong be it GitHub or my lowsy attempt, but I cant find any info on this, call me an idiot I don't care I'm stumped
Gbenga Oyetade
@gbengaPS
Jun 14 2017 20:38
@tommygebru how do I share codes on this platform?
Adel
@AdelMahjoub
Jun 14 2017 20:38
@Dhrumit14 you have a Mixed content error, http over https, to make it work in codepen, get rid of http on your xhr call
Dhrumit Thakkar
@Dhrumit14
Jun 14 2017 20:39
@AdelMahjoub : Sure. Let me try that
Adel
@AdelMahjoub
Jun 14 2017 20:39
@Dhrumit14 if you want a https quote link you can use this https://dev.adel-mahjoub.fr/quotes/doc.php
tommy
@tommygebru
Jun 14 2017 20:40
Screen Shot 2017-06-14 at 1.41.06 PM.png
@gbengaPS lets continue in https://gitter.im/FreeCodeCamp/HelpJavaScript :thumbsup:
Dhrumit Thakkar
@Dhrumit14
Jun 14 2017 20:41
@AdelMahjoub : I simply update the same Api with https and it worked
thanks @AdelMahjoub :smile:
CamperBot
@camperbot
Jun 14 2017 20:41
dhrumit14 sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 458 | @adelmahjoub |http://www.freecodecamp.com/adelmahjoub
Josh
@LawlyBoy
Jun 14 2017 20:41
can anyone help me?
Adel
@AdelMahjoub
Jun 14 2017 20:41
@Dhrumit14 yes it was a mixed content error
alperez21
@alperez21
Jun 14 2017 20:42
can someone help me? I can't seem to be able to center my heading <div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-xs-12">
<h1 class="text-center">ME</h1>
</div>
</div>
</div>
</div>
Adel
@AdelMahjoub
Jun 14 2017 20:44
@alperez21 it is centered, is bootstrap 3 linked ?
Dhrumit Thakkar
@Dhrumit14
Jun 14 2017 20:46
@LawlyBoy : https://postimage.io/
use this to upload an image
alperez21
@alperez21
Jun 14 2017 20:46
@AdelMahjoub I had another version of bootstrap linked, now linked 3 and it worked!! thank you!
CamperBot
@camperbot
Jun 14 2017 20:46
alperez21 sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 459 | @adelmahjoub |http://www.freecodecamp.com/adelmahjoub
ACSlater8
@ACSlater8
Jun 14 2017 20:51
can someone take a look at my first pen?
JD Tadlock
@jdtdesigns
Jun 14 2017 20:54
@Dhrumit14 You had quite a few errors in the html and css. When transferring to Codepen, all of you dependencies(jQuery, Boostrap) are added through Settings->JS and Settings->CSS. The only html that goes in the HTML Panel is what goes between <body></body>. You had margins of like 800px, ect. Use Bootstrap for setting the column widths using the col classes available to you. You can center columns with offsets(ie. col-xs-offset-4). I removed all the errors in the css and cleaned up the html. Hope it makes sense. ;) https://codepen.io/jdtadlock/pen/MojPdK?editors=0100
Danny
@WaterYourRoots
Jun 14 2017 20:56
Hi, im just starting my portfolio page but i cant figure out where this white bar is coming from and how to get rid of it, any help would be much appreciated
Radek
@radekjohn
Jun 14 2017 20:57
Hi,
I have a question to the matter of FCC certification. I noticed that some of my old projects like Local whether page or Twitch TV stopped to work. I don’t know why. They were OK when I was submitting them. Did someone see my projects when I submitted them for the first time? Can I claim the certificate now? Or should I fix the old projects first?
Josh
@LawlyBoy
Jun 14 2017 21:00
i have spacing's between my text but its not gone as far down as what i hoped, how would i make it so that the bottom of the first text box was level with the top of the right box? https://codepen.io/LawlyBoy/pen/RgaXMg
vanecho2
@vanecho2
Jun 14 2017 21:00
hi everyone - could someone please help me figure out why my navbar seems to not be working? I've been trying for hours to get it right but can't get it to always overlay the rest of the content - it start above some of the content and then is transparent so you can see everything - any thoughts?
Johnny
@jtan3
Jun 14 2017 21:00
@radekjohn openweahter doesn't work in http with codepen anymore. And there's a new api workaround for the twitch mention in the prompt.
JD Tadlock
@jdtdesigns
Jun 14 2017 21:01
@radekjohn OpenWeather no longer works with Codepen unless you have a premium account. Codepen is now only https. The twitch api has changed as well as FCC's workaround api.
shilpi verma
@shilpiverma509
Jun 14 2017 21:01
Hello everyone. I am struggling with Wikipedia viewer. My api call is working as I am able to see the data in console. However, I am unable to display it on my page. This is the link to my project
https://codepen.io/shilpiverma/pen/RgRVrQ?editors=1010
Radek
@radekjohn
Jun 14 2017 21:02
@jtan3 @jdtdesigns So it does not matter that it is not working now?
Johnny
@jtan3
Jun 14 2017 21:03
@radekjohn if you submitted before it should be fine but if you want it in your portfolio you might want to fix it.
JD Tadlock
@jdtdesigns
Jun 14 2017 21:04
@radekjohn It doesn't matter as long as you submit a project. FCC doesn't check your work. ;)
Radek
@radekjohn
Jun 14 2017 21:05
@jtan3 @jdtdesigns OK. Thanks :-)
CamperBot
@camperbot
Jun 14 2017 21:05
radekjohn sends brownie points to @jtan3 and @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 407 | @jtan3 |http://www.freecodecamp.com/jtan3
:star2: 1034 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Dhrumit Thakkar
@Dhrumit14
Jun 14 2017 21:05
@jdtdesigns : Thanks :smile:
CamperBot
@camperbot
Jun 14 2017 21:05
dhrumit14 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:star2: 1035 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Radek
@radekjohn
Jun 14 2017 21:05
see you all lalter
Josh
@LawlyBoy
Jun 14 2017 21:05
i have spacing's between my text but its not gone as far down as what i hoped, how would i make it so that the bottom of the first text box was level with the top of the right box? https://codepen.io/LawlyBoy/pen/RgaXMg
Dhrumit Thakkar
@Dhrumit14
Jun 14 2017 21:05
@WaterYourRoots : Have you triend to remove header height: 60px ?
Josh
@LawlyBoy
Jun 14 2017 21:05
farewell
Dhrumit Thakkar
@Dhrumit14
Jun 14 2017 21:05
*tried
Josh
@LawlyBoy
Jun 14 2017 21:06
@radekjohn farewell for now
Johnny
@jtan3
Jun 14 2017 21:07
@LawlyBoy you're not using the bootstrap grid right
Josh
@LawlyBoy
Jun 14 2017 21:08
@jtan3 ah, so how bad is it doc?
Gulsvi
@gulsvi
Jun 14 2017 21:08
You're going to a need a couple of amputations @LawlyBoy
Johnny
@jtan3
Jun 14 2017 21:09
@LawlyBoy there's 12 columns in a row. So each row you should have the columns equal to 12.
Josh
@LawlyBoy
Jun 14 2017 21:09
ahhhhh
and of course its not its got 36... @jtan3
Danny
@WaterYourRoots
Jun 14 2017 21:09
@Dhrumit14 thanks, yea ive been messing with it, but when I delete it, the white bar just froes to the size of the nav bar, nut i just set the header height to 0 and it got rid of it
CamperBot
@camperbot
Jun 14 2017 21:09
wateryourroots sends brownie points to @dhrumit14 :sparkles: :thumbsup: :sparkles:
:cookie: 251 | @dhrumit14 |http://www.freecodecamp.com/dhrumit14
Gulsvi
@gulsvi
Jun 14 2017 21:09

You can use offsets to reduce some code. For example, this:

  <div class="row">
    <div class="col-md-3">
    </div>
    <div class="col-md-6">
      <img class="project-map img-responsive center-block" src="https://s7.postimg.org/ve7mgz1yz/Map_Concept-unfinished.jpg" alt="Project Apologue Map">
    </div>
    <div class="col-md-3">
    </div>
  </div>

Is the same as:

  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <img class="project-map img-responsive center-block" src="https://s7.postimg.org/ve7mgz1yz/Map_Concept-unfinished.jpg" alt="Project Apologue Map">
    </div>
  </div>
Josh
@LawlyBoy
Jun 14 2017 21:09
@SkyC0der well shiiiiiiiiiine a light
Gulsvi
@gulsvi
Jun 14 2017 21:10
'offset' pushes it over from the left - and you never need empty columns to the right.
Josh
@LawlyBoy
Jun 14 2017 21:12
right so if i want to do as i described how would i get that? would it come to be if i just make it right? @SkyC0der @jtan3
Dhrumit Thakkar
@Dhrumit14
Jun 14 2017 21:12
@shilpiverma509 : Are you looking the results on the new page or same page ?
shilpi verma
@shilpiverma509
Jun 14 2017 21:12
@Dhrumit14 I am on the same page
Gulsvi
@gulsvi
Jun 14 2017 21:14
@LawlyBoy Compare the two code samples I pasted above - try to apply the same to your two text boxes below that image
And use the advice from @jtan3 - keep 12 columns to a row
shilpi verma
@shilpiverma509
Jun 14 2017 21:18
@Dhrumit14 Where do you think I am going wrong?
Josh
@LawlyBoy
Jun 14 2017 21:18
i have, it works like a charm exactly what i wanted thanks sorry got lost in the tinkering that is coding thanks @SkyC0der @jtan3
CamperBot
@camperbot
Jun 14 2017 21:18
lawlyboy sends brownie points to @skyc0der and @jtan3 :sparkles: :thumbsup: :sparkles:
:star2: 1702 | @skyc0der |http://www.freecodecamp.com/skyc0der
:cookie: 408 | @jtan3 |http://www.freecodecamp.com/jtan3
Josh
@LawlyBoy
Jun 14 2017 21:19