These are chat archives for FreeCodeCamp/HelpFrontEnd

8th
Sep 2016
somoking
@somoking
Sep 08 2016 00:10 UTC
hey just finishing my first tribute page if anyone can give me a few critiques before moving onto the next project it would be much obliged. https://codepen.io/sosomomo/pen/bwNwZp
somoking
@somoking
Sep 08 2016 00:31 UTC
I already notice there is a formatting error with the quote timeline which drops it into text
U-ways
@U-ways
Sep 08 2016 00:53 UTC
@somoking Everything looks great on my mobile except anything below "timeline"
Marci Chorpash
@mchor38
Sep 08 2016 01:00 UTC
@somoking I noticed <h1> Lawrence is misspelled.
Ken Haduch
@khaduch
Sep 08 2016 01:01 UTC
@somoking - perhaps some typos - "Lawrance" in the heading,
"Lawrence" in the text. Typos in the timeline "wedlockin wales" => "wedlock in Wales", "august" => "August"
@somoking - as the window is narrowed, the timeline text and the quote "I Loved You so..." overlap.
somoking
@somoking
Sep 08 2016 01:06 UTC
yes I used a relative position and top to adjust the text downwards manually but i am wondering if there is a cleaner way to do that and still have the nicely centred timeline. I tried vertical center from how to center css but it did not work. By the way thank you all for your support @khaduch @mchor38 @U-ways
CamperBot
@camperbot
Sep 08 2016 01:06 UTC
:cookie: 119 | @mchor38 |http://www.freecodecamp.com/mchor38
:cookie: 345 | @u-ways |http://www.freecodecamp.com/u-ways
somoking sends brownie points to @khaduch and @mchor38 and @u-ways :sparkles: :thumbsup: :sparkles:
:star2: 1642 | @khaduch |http://www.freecodecamp.com/khaduch
somoking
@somoking
Sep 08 2016 01:08 UTC
i am refering to the timeline text. I assumed margins would help deal with this but it seems like it isent helping.
Nicholas Vorraso
@nickeyvee
Sep 08 2016 01:13 UTC
can someone tell me why none of the other users are being displayed!?!?
http://codepen.io/nickey_vee/pen/yaNzxQ?editors=0010
Ken Haduch
@khaduch
Sep 08 2016 01:35 UTC
@nickeyvee - right now, I'm not seeing anything - looks like there is (perhaps) and error being flagged in the javascript window of the CodePen UI?
Nicholas Vorraso
@nickeyvee
Sep 08 2016 01:36 UTC
@khaduch look now
its only showing the follower with an error.
its not showing the rest
Ken Haduch
@khaduch
Sep 08 2016 01:39 UTC
@nickeyvee - you must be running into the closure problem where you have a for loop to set up ajax transactions, but due to the way that the varioiables are evaluated within a closure, each instance ends up using the same value as the last location in the array, i this case, I see this error repeated several times: https://api.twitch.tv/kraken/streams/comster404 404 (Not Found)
Nicholas Vorraso
@nickeyvee
Sep 08 2016 01:43 UTC
@khaduch should i bind it to a variable outside of the loop?
Ken Haduch
@khaduch
Sep 08 2016 02:25 UTC
@nickeyvee - you can read about it here in this article: http://javascriptissexy.com/understand-javascript-closures-with-ease/ - I think that it is the third item in the article "Closures Gone Awry". There is a way to use IIFE to get the values captured within the closure, I found that using some data that comes back from the return, such as picking out the username and then constructing the URL for the next data fetch worked (although I haven't finished this project nor have I looked at it in a while.)
kn1ghtdave
@kn1ghtdave
Sep 08 2016 02:54 UTC

Hi guys

I was trying to flush all of my results everytime new search being entered but it just doesn't work. Any advice
, please?

``
//Innitiation
html = "";
resList = [];

function FormatRes(title,snippet){
this.title = title;
this.snippet = snippet;
};

getWiki = function(data){

$('#target').empty();

console.log("before: " + resList);
resList.length = 0;
console.log("after: " + resList);
resArray = data.query.search;

for ( var i in resArray){
resList.push( new FormatRes(resArray[i].title, resArray[i].snippet));

html += '<div class="result"><a href="https://en.wikipedia.org/wiki/' + resList[i].title + '" target="blank">' + '<h4>' + resList[i].title + '</h4><br><p>' + resList[i].snippet + '</div>';
$('#target').html(html);

};
};

$(document).ready(function(){

function search() {

$.getJSON("https://crossorigin.me/https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + $('#searchBox').val() + "&prop=info&inprop=url&utf8=&format=json", getWiki)

};

// Enter to search
$("#searchBox").keypress(function(e) {
if(e.which == 13 || e.which == 1 ) {
search();
}
});

});
``

sunnyu
@q281589190
Sep 08 2016 02:55 UTC
what editor all of you use?
webstorm or sublime?
kn1ghtdave
@kn1ghtdave
Sep 08 2016 02:55 UTC
@q281589190 Codepen ^^
sunnyu
@q281589190
Sep 08 2016 02:56 UTC
and others man?
Stephen Peters
@stephepush
Sep 08 2016 03:33 UTC
i like notepad++
Sorin Ruse
@sorinr
Sep 08 2016 04:34 UTC
@KoniKodes you can take a look into vue here: https://laracasts.com/series/learning-vue-step-by-step
Greg Duncan
@GregatGit
Sep 08 2016 04:42 UTC
@kn1ghtdave can we see your pen
Greg Duncan
@GregatGit
Sep 08 2016 04:49 UTC
@kn1ghtdave I you set up your variable html outside the function and then you add by html += - inside the function first make sure html is empty if not you will just add to what you have.
Alexandro Pequeno
@Argestis
Sep 08 2016 05:49 UTC

Hi, guys! you guys know if I'm doing this right? I need to push the odd numbers from 1 through 9 to myArray using a for loop. here's my code:

for (var i = 0; i < 10; i += 2){

if (i % 2 !==0){
ourArray.push(i);
}}

but isn't working :c

Aldair
@ald1413
Sep 08 2016 06:04 UTC
can anyone check out my portfolio page, i would really appreciate the feedback http://codepen.io/ald1413/pen/mAbZzy
William Maes
@maeswilliam
Sep 08 2016 06:18 UTC
Guys when you create projects, can you choose pictures that aren't your own? For exeample if i choose to make a landing page about an actor, do i need to worry about copyrights right or should i not give a **?
Leon Ormes
@leonormes
Sep 08 2016 06:29 UTC
@maeswilliam good point! I have been happily copying and pasting content for my fanpage, but actually should I? We are training up to be responsible, proffesional developers. I did a quick search and found http://lifehacker.com/5992419/the-best-ways-to-be-sure-youre-legally-using-online-photos. Even though what we are doing here is not going to been seen in the wild, we are developing our habits and work patterns. So my answer is, yes, give a **!
@Argestis I think that your loop is counting up in 2s so i = 0, 2, 4, 6, 8, during loop, so i % 2 always equals 0. use i++ on the counter. I think it probably is working, you are just not getting any results!
Leon Ormes
@leonormes
Sep 08 2016 06:35 UTC
@q281589190 Atom is great and free, but I use vim because it feels hardcore! :smile:
Joris Labie
@labiej
Sep 08 2016 06:48 UTC
@leonormes @maeswilliam Wikimedia images are normally safe
William Maes
@maeswilliam
Sep 08 2016 06:49 UTC
@labiej Tiens ssalut le belge :P
DonnieTrente
@DonnieTrente
Sep 08 2016 06:58 UTC
hi, where can I find a quotes' API?
Joris Labie
@labiej
Sep 08 2016 06:59 UTC
@maeswilliam Ouais, je suis flamand donc mon francais n'est pas bien
@DonnieTrente Didn't they provide an example in the assignment?
William Maes
@maeswilliam
Sep 08 2016 07:00 UTC
@labiej Ik ben drietalig, dus zowiezo geen probleem voor ons te kunnen begrijpen ^^
@labiej wel leuk dat er tenminste een belg van die facebook groep aanwezig is ;)
Joris Labie
@labiej
Sep 08 2016 07:02 UTC
Gitter staat meestal op de achtergrond open, altijd handig om te kijken wat anderen doen
DonnieTrente
@DonnieTrente
Sep 08 2016 07:04 UTC
@labiej, yep, thanks very much!
CamperBot
@camperbot
Sep 08 2016 07:04 UTC
donnietrente sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 443 | @labiej |http://www.freecodecamp.com/labiej
Joris Labie
@labiej
Sep 08 2016 07:05 UTC
@DonnieTrente I seem to have misremembered. I used this one
gilangmugnirespaty
@gilangmugnirespaty
Sep 08 2016 07:05 UTC
Test
Joris Labie
@labiej
Sep 08 2016 07:11 UTC
@DonnieTrente the API I used calls for the usage of a proxy (crossorigin.me) to avoid CORS issues
William Maes
@maeswilliam
Sep 08 2016 07:29 UTC
@labiej ja idd
hello does anyone know a website that generate google fonts combinations for a website?
sunnyu
@q281589190
Sep 08 2016 08:28 UTC
why i put img and input together,i can't align them at a line
they are all have floated
Alejandro
@alejandroariasag
Sep 08 2016 09:42 UTC
Hi guys! I am newbie in this. And I have a client that I need to show my (front-end) work. I have no idea what's the best way. Is there any web app that you guys normally use? Do you own your own server? How do you do? IS there a tutorial out there (XD)?
AkKeRise
@akkerise
Sep 08 2016 09:54 UTC
hey guys
Amit Patel
@AmitP88
Sep 08 2016 10:18 UTC
hey all
Stephen James
@sjames1958gm
Sep 08 2016 10:18 UTC
Hello
Amit Patel
@AmitP88
Sep 08 2016 10:20 UTC
I just got a major part of functionality to work on my new (revamped) portfolio site. I still have a TON of cleanup to do with the code and layouts etc, but I just wanted to know what you guys think of how it functions and the overall layout (which changes based on screen-size): https://amitp88.github.io/New-Portfolio/
I also plan on changing the colors too btw
Joris Labie
@labiej
Sep 08 2016 10:22 UTC
@alejandroariasag If they are purely frontend you can use https://pages.github.com
Stephen James
@sjames1958gm
Sep 08 2016 10:23 UTC
I think the functionality is good, the design is a bit overwhelming, too much movement. Also, hard to follow the flow
Joris Labie
@labiej
Sep 08 2016 10:24 UTC
@AmitP88 the colours seem to clash with the pictures, it seems "messy". It's very hard to make that kind of layout work out nicely
i.e. what @sjames1958gm said already :D
Amit Patel
@AmitP88
Sep 08 2016 10:25 UTC
@labiej yeah, I'm hoping to use Adobe color panel to help with better color selection
ah ok
I got the inspiration for the layout from this site: https://amarula.com/#!/
Joris Labie
@labiej
Sep 08 2016 10:26 UTC
The problem is that in general your projects will use vastly different schemes themselves. You'll need a very clean scheme to pull it off
Amit Patel
@AmitP88
Sep 08 2016 10:27 UTC
hmmmm, what if I did an inset border on the project images? do you think that will work?
Stephen James
@sjames1958gm
Sep 08 2016 10:27 UTC
@AmitP88 Each of the sections on that page are related to the same concept. Maybe a unified color scheme will help.
I had trouble knowing where to look
Joris Labie
@labiej
Sep 08 2016 10:28 UTC
It might help. Lighter/brighter colours could help though
Amit Patel
@AmitP88
Sep 08 2016 10:28 UTC
ah ok. I was also debating on adding the little blended in arrows in the info panels like how the amarula site has theirs
Joris Labie
@labiej
Sep 08 2016 10:29 UTC
So what do you guys think of my calculator layout? https://codepen.io/labiej/pen/rVoPpz
Amit Patel
@AmitP88
Sep 08 2016 10:30 UTC
@labiej I'm guessing the functionality hasn't been coded yet, but as far as the layout itself, not bad :)
I'm not sure about the flat look though, since they're buttons, but that's just imo
I like the color inversion though on hover
Joris Labie
@labiej
Sep 08 2016 10:32 UTC
I might add some depth but I'll have to check what that means regarding for flexboxes and usage of viewport lengths
Amit Patel
@AmitP88
Sep 08 2016 10:34 UTC
@labiej I found some interesting buttons on here if you wanna check them out https://www.sanwebe.com/2014/02/css3-buttons-examples-with-effects-animations
Joris Labie
@labiej
Sep 08 2016 10:45 UTC
I think I'm going to keep it like this for now (rounded the corners a bit though), just to get the functionality done
Ventje Engel
@ventjejle
Sep 08 2016 10:51 UTC
Hi, i want to ask this, if there is $heading-font: Helvetica, sans-serif; what does the dollar sign $ mean?
what does it select?
Joris Labie
@labiej
Sep 08 2016 10:53 UTC
It's a variable you can use in e.g. SCSS
Ventje Engel
@ventjejle
Sep 08 2016 10:58 UTC
Ehm, okay. Because 'plain' css don't recognized the $ symbol. I reviewed some pens for my portfolio project. Thanks
Leon Ormes
@leonormes
Sep 08 2016 11:04 UTC
@labiej @AmitP88 I actually like the flat look. Retro! Joris, it looks great and is responsive. You nailed it!
Joris Labie
@labiej
Sep 08 2016 11:17 UTC
@ventjejle It's quite useful, you can use it to define your style at the top of your file and switch to a different color scheme in seconds
@leonormes thanks
CamperBot
@camperbot
Sep 08 2016 11:17 UTC
labiej sends brownie points to @leonormes :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @leonormes |http://www.freecodecamp.com/leonormes
Robert
@PredaRobert
Sep 08 2016 11:22 UTC
Hellp how do i create de Contact Me http://codepen.io/PredaRobert/pen/rrVmmk?editors=1100#0
Joris Labie
@labiej
Sep 08 2016 11:27 UTC
I would wait until you know backend development
Otherwise there are huge security risks
e.g. spammers utilising your form to send thousands of mails
Robert
@PredaRobert
Sep 08 2016 11:30 UTC
@labiej Thank you
CamperBot
@camperbot
Sep 08 2016 11:30 UTC
predarobert sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 444 | @labiej |http://www.freecodecamp.com/labiej
Hèlen Grives
@mesmoiron
Sep 08 2016 11:35 UTC
almost so demotivated. Working for days on a button; just to show up #bootstrap #fontawesome. :worried: :smile:
Alex S.
@aszwet1
Sep 08 2016 11:41 UTC
can someone check if my fonts and bottom icons are displaying correctly in ie? http://codepen.io/swetz/pen/yaymBa
Ken Haduch
@khaduch
Sep 08 2016 11:58 UTC
@mesmoiron - what's the problem, if you are still having one? want to post a link to your code?
Alex S.
@aszwet1
Sep 08 2016 12:01 UTC
Got my problem fixed, thanks all!
Ian
@IMLaing
Sep 08 2016 12:31 UTC
Does anyone have a good alternative to www.palettable.io/
I am color challenged and need my palettable
Florencia
@flopywood
Sep 08 2016 12:36 UTC
@IMLaing yes coolors.co
@IMLaing is really fun
Ian
@IMLaing
Sep 08 2016 12:37 UTC
@flopywood Thank you I will look now!
CamperBot
@camperbot
Sep 08 2016 12:37 UTC
imlaing sends brownie points to @flopywood :sparkles: :thumbsup: :sparkles:
:cookie: 319 | @flopywood |http://www.freecodecamp.com/flopywood
Ian
@IMLaing
Sep 08 2016 12:38 UTC
Wicked nice @flopywood Thank you
CamperBot
@camperbot
Sep 08 2016 12:38 UTC
imlaing sends brownie points to @flopywood :sparkles: :thumbsup: :sparkles:
:warning: imlaing already gave flopywood points
Chris Cullen
@123xylem
Sep 08 2016 12:40 UTC

@123xylem


function alertUWin(){
  var box=$("#alertBox");
  box.style.display='block';
  $("#alertBox").css("display","block").text("You Win!");
};

Can some one advise how to make this function display the following AlertBox


#alertBox{
  display:none;
  z-index:10;
  opacity:0.9;
  position:fixed;
  top:29%;
  left:36%;
  width:320px;
  height:260px;

  }

The box is set to display none.. when function activates i want to change the display to block thereby making it appear

Florencia
@flopywood
Sep 08 2016 12:41 UTC
@IMLaing you're welcome!
@123xylem you're not alerting anything
@123xylem wait. As far as I know, an alert message is displayed : alert("...");
I've never tried alerting anything with jQuery
qq1009479218
@qq1009479218
Sep 08 2016 12:43 UTC
This message was deleted
Chris Cullen
@123xylem
Sep 08 2016 12:43 UTC
@flopywood alertbox is a hidden div. When i use alertfunction it unhides that div
Florencia
@flopywood
Sep 08 2016 12:44 UTC
@123xylem oh wait then I would advise dong something like a toggle
@123xylem @IMLaing yes exactly a toggle would be great
Ian
@IMLaing
Sep 08 2016 12:44 UTC
@flopywood got you fam
Jack Polgar
@nirix
Sep 08 2016 12:46 UTC
Florencia
@flopywood
Sep 08 2016 12:46 UTC
that or accessing the dom and assign your div = ""; and then create a function that onclick changes the value to = "#"
qq1009479218
@qq1009479218
Sep 08 2016 12:46 UTC
Florencia
@flopywood
Sep 08 2016 12:48 UTC
@qq1009479218 what do you want to make them do?
qq1009479218
@qq1009479218
Sep 08 2016 12:49 UTC
Florencia
@flopywood
Sep 08 2016 12:51 UTC
@qq1009479218 mmm I don't know. I'm sorry, I can't help you
qq1009479218
@qq1009479218
Sep 08 2016 12:51 UTC
thank you
Florencia
@flopywood
Sep 08 2016 12:51 UTC
@qq1009479218 but if you want to center the input element and the buttons, I would recommend chaingin the class to class="form-horizontal"
Chris Cullen
@123xylem
Sep 08 2016 12:52 UTC
@flopywood @IMLaing thanks looking into it
CamperBot
@camperbot
Sep 08 2016 12:52 UTC
123xylem sends brownie points to @flopywood and @imlaing :sparkles: :thumbsup: :sparkles:
:cookie: 329 | @imlaing |http://www.freecodecamp.com/imlaing
:cookie: 320 | @flopywood |http://www.freecodecamp.com/flopywood
qq1009479218
@qq1009479218
Sep 08 2016 12:53 UTC
..ok!1
Ian
@IMLaing
Sep 08 2016 12:53 UTC
@123xylem good luck
Darth Skywalker
@adityaparab
Sep 08 2016 12:53 UTC

@qq1009479218

Replace

<div class="col-xs-8 col-sm-8">
  <input type="text" class="form-control dm-content" placeholder="说点什么吧!" />
</div>
<div class="col-sm-2 col-xs-2">
  <button class="btn btn-primary btn-block dm-launch">发射弹幕</button>
 </div>
<div class="col-sm-2 col-xs-2">
  <button class="btn btn-primary btn-block dm-remove">清除弹幕</button>
</div>

with

<div class="row">
  <div class="col-xs-8 col-sm-8 col-md-offset-2">
    <input type="text" class="form-control dm-content" placeholder="说点什么吧!" />
  </div>
</div>
<div class="row">
  <div class="col-sm-2 col-xs-2 col-md-offset-4">
    <button class="btn btn-primary btn-block dm-launch">发射弹幕</button>
  </div>
  <div class="col-sm-2 col-xs-2">
    <button class="btn btn-primary btn-block dm-remove">清除弹幕</button>
  </div>
</div>
Chris Cullen
@123xylem
Sep 08 2016 13:01 UTC

@IMLaing

#alertBox{
  display:none;
  z-index:10;
  opacity:0.9;
  position:fixed;
  top:29%;
  left:36%;
  width:320px;
  height:260px;
  background-color:grey;
  color:black;
  border:2px solid black;
  border-radius:4px;
}

.alertBoxShow{
  display:block;
}

This is the class i add


function alertUWin(){
  $("#alertBox").toggleClass("alertBoxShow").text("You Win!");
};

this is how I add it.. Its not working though?

Ian
@IMLaing
Sep 08 2016 13:04 UTC
@123xylem the # is going to be taken first - I think you need !important
and are you getting an console errors?
@IMLaing no console errors.. so the Class doesnt override the id? hmm where/ how do I add !important
Ian
@IMLaing
Sep 08 2016 13:09 UTC
you add !important before the ;
so display: block !important;
Chris Cullen
@123xylem
Sep 08 2016 13:10 UTC
@IMLaing thanks!@
CamperBot
@camperbot
Sep 08 2016 13:10 UTC
123xylem sends brownie points to @imlaing :sparkles: :thumbsup: :sparkles:
:warning: 123xylem already gave imlaing points
Ian
@IMLaing
Sep 08 2016 13:10 UTC
Remember that # gets more points towards targeting than a . so id is stronger than class
I THINK - to be honest CSS is the death of me
  • I mean I know that classes are less than ids for selectors - I THINK - that will fix the problem.
Chris Cullen
@123xylem
Sep 08 2016 13:10 UTC
It worked
Ian
@IMLaing
Sep 08 2016 13:11 UTC
Wicked
Chris Cullen
@123xylem
Sep 08 2016 13:11 UTC
ur a god
Ian
@IMLaing
Sep 08 2016 13:11 UTC
LOL
it was all you - just pushed you along
Chris Cullen
@123xylem
Sep 08 2016 13:11 UTC
":)
Dylan
@dhcodes
Sep 08 2016 13:11 UTC
god status seems easy to come by nowadays
just have to know a little CSS
;)
Ahmed Ayman
@Ahmed-Ayman
Sep 08 2016 13:11 UTC
what do this guy using ! is it HTML ? xD
Dylan
@dhcodes
Sep 08 2016 13:12 UTC
@Ahmed-Ayman html and bootstrap
Ahmed Ayman
@Ahmed-Ayman
Sep 08 2016 13:12 UTC
how to do this Navigation bar then plz
could u give some resources
give me *
Dylan
@dhcodes
Sep 08 2016 13:12 UTC
@Ahmed-Ayman are you using codepen?
Ahmed Ayman
@Ahmed-Ayman
Sep 08 2016 13:13 UTC
yea
Dylan
@dhcodes
Sep 08 2016 13:13 UTC
you need to add bootstrap's CSS and JS to the settings of your codepen
click the gear icon
at the top
Ahmed Ayman
@Ahmed-Ayman
Sep 08 2016 13:13 UTC
yea I did
Dylan
@dhcodes
Sep 08 2016 13:13 UTC
and then in the CSS tab, quick-add bootstrap
and then in the JS, quick-add jquery and then bootstrap in that order
Ahmed Ayman
@Ahmed-Ayman
Sep 08 2016 13:13 UTC
but why JS .. we didn't take it yet
Chris Cullen
@123xylem
Sep 08 2016 13:13 UTC
@dhcodes @IMLaing pagans used to think the sun was a god.. Im just at pagan status
Dylan
@dhcodes
Sep 08 2016 13:14 UTC
@Ahmed-Ayman then you can use the sample code here: http://getbootstrap.com/components/#navbar
Ian
@IMLaing
Sep 08 2016 13:14 UTC
praise the sun
Chris Cullen
@123xylem
Sep 08 2016 13:14 UTC
But Any idea why the button inside the hidden div doesnt also show? I never set the button to display hide?http://codepen.io/123xylem/pen/JKqYZY
Dylan
@dhcodes
Sep 08 2016 13:14 UTC
the jquery is required to get the mobile dropdown menu to work @Ahmed-Ayman
@Ahmed-Ayman you don't really need to "know" js to use the navbar
Ian
@IMLaing
Sep 08 2016 13:15 UTC
@123xylem the button is isn't the div
Dylan
@dhcodes
Sep 08 2016 13:15 UTC
it just requires js to work
Ahmed Ayman
@Ahmed-Ayman
Sep 08 2016 13:15 UTC
alright sounds cool :)
Chris Cullen
@123xylem
Sep 08 2016 13:15 UTC
<div id="alertBox">
  <button id="Ok" onclick="end()">OK!</button> 


  </div>
the button has no display properties but acts invisble
Dylan
@dhcodes
Sep 08 2016 13:16 UTC
@Ahmed-Ayman here's a video if it helps: https://www.youtube.com/watch?v=qpWlaOeGZ_4
Ahmed Ayman
@Ahmed-Ayman
Sep 08 2016 13:16 UTC
alright @dhcodes @IMLaing thanks ..I'll start looking for those examples and I'll brb if there were any troubles ..thanks for helping
CamperBot
@camperbot
Sep 08 2016 13:16 UTC
ahmed-ayman sends brownie points to @dhcodes and @imlaing :sparkles: :thumbsup: :sparkles:
:cookie: 330 | @imlaing |http://www.freecodecamp.com/imlaing
:star2: 1396 | @dhcodes |http://www.freecodecamp.com/dhcodes
Ian
@IMLaing
Sep 08 2016 13:17 UTC
@123xylem yes- but the div is invisible the button is in the div therefore the button will be invisible -
is that your question?
Chris Cullen
@123xylem
Sep 08 2016 13:21 UTC
@IMLaing yes.. but when the div becomes visible shouldnt the button also?
Ian
@IMLaing
Sep 08 2016 13:22 UTC
Ah, I see - it should. You could also just point the toggleClass to the button directly
do you have a codepen @123xylem
@IMLaing
Ian
@IMLaing
Sep 08 2016 13:27 UTC
@123xylem the button isn't even showing up in the DOM hold on a second here...
@123xylem Yeah I am not sure - I dont like putting click events on buttons in the HTML because it sometimes acts screwy for me
Chris Cullen
@123xylem
Sep 08 2016 13:32 UTC
@IMLaing hmm
il look into it.. tough to google this one though
Chris Cullen
@123xylem
Sep 08 2016 13:35 UTC
cheers.. il ask more in here aswell
Ian
@IMLaing
Sep 08 2016 13:38 UTC
@123xylem if you are already using jQuery you might just want to build the entire element in JS
jQuery*
Just a thought.
Chris Cullen
@123xylem
Sep 08 2016 13:41 UTC
yea may have to but i dont see why an onclick event in html would have anyeffect on it showing or not
shwetalicious
@shwetalicious
Sep 08 2016 13:47 UTC
Hello, just started learning HTML and CSS! Glad to be here!! :)
Chris Cullen
@123xylem
Sep 08 2016 13:50 UTC
@IMLaing good link...
It explains that the children of toggled divs dont get the toggle property
But applying that isnt easy
Ian
@IMLaing
Sep 08 2016 13:53 UTC
(build it in Jquery)
make a variable alerbox that has all the elements
then do .html(alertbox) on an empty position:absolute; div where you want it
Muhammad Hasham
@MohammadHasham
Sep 08 2016 14:01 UTC
Can anyone help me with sublime text 3?
@dhcodes
Chris Cullen
@123xylem
Sep 08 2016 14:03 UTC
@IMLaing im not sure how to build it in js.. il have a look
Ian
@IMLaing
Sep 08 2016 14:03 UTC
@MohammadHasham maybe
@123xylem you just take the elements and add it to $('#yourElement').html()
Muhammad Hasham
@MohammadHasham
Sep 08 2016 14:04 UTC
@IMLaing can you tell me why my css is not working?
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">

    <title>Mohammad Hasham - Web Developer</title>
 </head>

 <body>
    <nav class = "navbar navbar-default">
    <div class = "container" style="color:blue;">


         <a class = "navbar-brand" href="#">Portfolio</a>


     <ul class = "nav navbar-nav navbar-right">
         <li class = "active"><a href="#"> Home </a></li>
         <li><a href="#">Skills</a></li>
         <li><a href="#">Work</a></li>
         <li><a href="#">About Me</a></li>
         <li><a href="#">Contact </a></li> 
     </ul>
     </div>
     </nav>

 </body>
 </html>
Ian
@IMLaing
Sep 08 2016 14:04 UTC
variable myHTML = <div><button>OK</...
put variable in to the .html()
@MohammadHasham do you have the index.html file in a folder and then inside that folder do you have a folder title css with your style sheet called style.css in it?
OHHHHHHH the inline styles? @MohammadHasham
Chris Cullen
@123xylem
Sep 08 2016 14:05 UTC
@IMLaing @IMLaing so i leave the elements defined in CSS.. then add them to html via jquery?
Ian
@IMLaing
Sep 08 2016 14:05 UTC
@123xylem one second I think I have an example
 $('.showResults').append('<div class="wikiInfo"><a href=" '+ response[3][i] +' "><h2>'+response[1][i]+'</h2><p>' + response[2][i] + '</p></a></div>');
super complicated one lol
so append - adds to the end of the element where as html will change the entire inner html
Muhammad Hasham
@MohammadHasham
Sep 08 2016 14:07 UTC
@IMLaing Yes! i guess i have it right
blob
my filename is portfolio.html
Ian
@IMLaing
Sep 08 2016 14:08 UTC
@MohammadHasham in the link tag at the top remove the css/ part and leave just style.css
<link rel="stylesheet" type="text/css" href="style.css">
what you are saying is go from where the html file is into a css folder, however, that html file is already in the same folder, you don't need to send it to a different path
Muhammad Hasham
@MohammadHasham
Sep 08 2016 14:09 UTC
@IMLaing Thanks
CamperBot
@camperbot
Sep 08 2016 14:09 UTC
mohammadhasham sends brownie points to @imlaing :sparkles: :thumbsup: :sparkles:
:cookie: 331 | @imlaing |http://www.freecodecamp.com/imlaing
Muhammad Hasham
@MohammadHasham
Sep 08 2016 14:10 UTC
That worked
Ian
@IMLaing
Sep 08 2016 14:10 UTC
You are welcome
Mayur
@mayurpande
Sep 08 2016 14:12 UTC
Hi all, I have near about completed my Tribute Page but am getting a little confused on how to make two iframes responsive using bootstrap, here is a link to my code pen
Murali Kumar Chintala
@muralikumarch
Sep 08 2016 14:13 UTC
Hi All..Help me on Build a Personal Portfolio Webpage, its next challenge
Mayur
@mayurpande
Sep 08 2016 14:14 UTC
they seem to look good in normal, and tablet view however when in a smaller width than mobile view they stop being responsive
Murali Kumar Chintala
@muralikumarch
Sep 08 2016 14:15 UTC
I have completed tribute page and here is that link My Living legend Page https://codepen.io/muralikumarch/pen/rrVvAG
Mayur
@mayurpande
Sep 08 2016 14:19 UTC
also any constructive criticism (or just criticism !) would be great
Rajat Shankar
@Rajatk95828
Sep 08 2016 14:20 UTC
i am stuck on the <img....i just cnt get pic into the page...i copied the link too but its not loading
Iframes are really a pain
@Rajatk95828 post your code as it is
Rajat Shankar
@Rajatk95828
Sep 08 2016 14:25 UTC
@IMLaing <img class="img-responsive img-thumbnail" src="https://commons.wikimedia.org/wiki/File:Bill_gates_portrait.jpg">
Chris Cullen
@123xylem
Sep 08 2016 14:27 UTC
@IMLaing @IMLaing IT BLOODY WORKS!
Ian
@IMLaing
Sep 08 2016 14:28 UTC
You were up one from the actual image @Rajatk95828
wow - hope everyone likes that
@123xylem Righteous - html() and append() for the win
@Rajatk95828 You were linking a webpage to an img element not a .jpg file
Rajat Shankar
@Rajatk95828
Sep 08 2016 14:29 UTC
oohk bro
Chris Cullen
@123xylem
Sep 08 2016 14:30 UTC
GREAT help
thanks
i can sleep now ;0
Ian
@IMLaing
Sep 08 2016 14:30 UTC
Have a good one - code on
@123xylem its been a pleasure
Muhammad Hasham
@MohammadHasham
Sep 08 2016 14:32 UTC
How can i add a background image to the whole tab including the navbar

 <body>
 <div class = "container">
    <div class = "home">
    <nav class = "navbar navbar">
      <a class = "navbar-brand" href="#">Portfolio</a>
    <ul class = "nav navbar-nav navbar-right">
         <li class = "active"><a href="#"> Home </a></li>
         <li><a href="#">Skills</a></li>
         <li><a href="#">Work</a></li>
         <li><a href="#">About Me</a></li>
         <li><a href="#">Contact </a></li> 
     </ul>
     </div>
     </nav>

     </div>


 </body>
@IMLaing
My CSS:
.home
{
    background-image: url("home_bck.jpg");
    background-size:cover; 
}
it is only covering the navbar but not the whole page
Ian
@IMLaing
Sep 08 2016 14:33 UTC
@MohammadHasham You need to have a background-image style in your css for the entire container like the css you have
If you want it to cover everything
put the closing nav in the div
as it should be, watch your indents
if you want it to be the background of EVERYTHING you can always do it tied to the body element
that will have it so all your other elements rest on top of the image.
Muhammad Hasham
@MohammadHasham
Sep 08 2016 14:35 UTC
@IMLaing but it would cover all the tabs like about me,contact etc/
i want the background just for the home stuff.
Ian
@IMLaing
Sep 08 2016 14:35 UTC
So just fixed the nav closing tab being outside the div - that should leave just the .home div with that backgroudn
Muhammad Hasham
@MohammadHasham
Sep 08 2016 14:36 UTC
<div class = "container">
    <div class = "home">
        <nav class = "navbar navbar">
              <a class = "navbar-brand" href="#">Portfolio</a>

    <ul class = "nav navbar-nav navbar-right">
         <li class = "active"><a href="#"> Home </a></li>
         <li><a href="#">Skills</a></li>
         <li><a href="#">Work</a></li>
         <li><a href="#">About Me</a></li>
         <li><a href="#">Contact </a></li> 
     </ul>

        </nav>
     </div>
   </div>
@IMLaing
is it okay now?
Ian
@IMLaing
Sep 08 2016 14:37 UTC
Yes - but the UL should be nested under the A
Muhammad Hasham
@MohammadHasham
Sep 08 2016 14:38 UTC
Sorry but can you elaborate ?
@IMLaing
Klaus Mana
@KlausMana
Sep 08 2016 14:38 UTC
hey so I am doing the weather app and it needs me to change the bg image according to the weather
i found doing so was possible by getting the description value
my problem is
i don't know all of the values this description value can get
anyone know wherei can find this data?
Ian
@IMLaing
Sep 08 2016 14:40 UTC
<div class = "container">
    <div class = "home">
        <nav class = "navbar navbar">
              <a class = "navbar-brand" href="#">Portfolio</a>
              <ul class = "nav navbar-nav navbar-right">
                    <li class = "active"><a href="#"> Home </a></li>
                    <li><a href="#">Skills</a></li>
                    <li><a href="#">Work</a></li>
                    <li><a href="#">About Me</a></li>
                    <li><a href="#">Contact </a></li> 
               </ul>
        </nav>
     </div>
   </div>
@KlausMana Look in the weather API docs it is there - a bit hard to find
@MohammadHasham like that above
see how you can easily look down and see what is containing what
Klaus Mana
@KlausMana
Sep 08 2016 14:41 UTC
oh ok thank you @IMLaing
CamperBot
@camperbot
Sep 08 2016 14:41 UTC
klausmana sends brownie points to @imlaing :sparkles: :thumbsup: :sparkles:
:cookie: 332 | @imlaing |http://www.freecodecamp.com/imlaing
Muhammad Hasham
@MohammadHasham
Sep 08 2016 14:42 UTC
@IMLaing Still the same problem :worried:
@MohammadHasham do you have it up on codepen?
Muhammad Hasham
@MohammadHasham
Sep 08 2016 14:43 UTC
no i am wroking on sublime :worried:
Klaus Mana
@KlausMana
Sep 08 2016 14:43 UTC
thanks a bunch :)
Muhammad Hasham
@MohammadHasham
Sep 08 2016 14:43 UTC
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">

    <title>Mohammad Hasham - Web Developer</title>
 </head>

 <body>
 <div class = "container">
    <div class = "home">
         <nav class = "navbar navbar">
              <a class = "navbar-brand" href="#">Portfolio</a>
              <ul class = "nav navbar-nav navbar-right">
                    <li class = "active"><a href="#"> Home </a></li>
                    <li><a href="#">Skills</a></li>
                    <li><a href="#">Work</a></li>
                    <li><a href="#">About Me</a></li>
                    <li><a href="#">Contact </a></li> 
               </ul>
         </nav>
     </div>
    </div>

  </body>


 </body>
 </html>
@IMLaing
Here is the code
if you can figure out
Ian
@IMLaing
Sep 08 2016 14:45 UTC
it seems to work fine for me
What are you trying to do different from that?
Muhammad Hasham
@MohammadHasham
Sep 08 2016 14:47 UTC
No but as you can see the whole page is not being covered of red its just the navbar
Ian
@IMLaing
Sep 08 2016 14:48 UTC
so you want the whole page
Muhammad Hasham
@MohammadHasham
Sep 08 2016 14:48 UTC
Yes
@IMLaing :smile:
target body
Muhammad Hasham
@MohammadHasham
Sep 08 2016 14:49 UTC
But that would be for all the tabs i.e: about me ,contact us etc. is there a way that i can limit it to the home tab only?
@IMLaing
TrayBanks
@TrayBanks
Sep 08 2016 14:50 UTC

Hey guys, How do I set this up in my own page?

https://files.gitter.im/FreeCodeCamp/Help/FQou/project.JPG

Ian
@IMLaing
Sep 08 2016 14:51 UTC
@MohammadHasham so you do NOT want the whole page you want only the active button?
killing me man =)
Muhammad Hasham
@MohammadHasham
Sep 08 2016 14:51 UTC
@IMLaing Yeah
is there a way?
There is always a way @MohammadHasham Just need to select the right object
element*
Muhammad Hasham
@MohammadHasham
Sep 08 2016 14:52 UTC
Its just on the tag but not on the page :sparkles:
@IMLaing
Ian
@IMLaing
Sep 08 2016 14:53 UTC
That is what you asked for
But that would be for all the tabs i.e: about me ,contact us etc. is there a way that i can limit it to the home tab only?
that is on the home tab only
Muhammad Hasham
@MohammadHasham
Sep 08 2016 14:54 UTC
Maybe i am not good at linguistics.But why is the whole page not being covered?
@IMLaing
just the home page
Ian
@IMLaing
Sep 08 2016 14:57 UTC
So
hmmm
So you want the whole page like the second example?
Muhammad Hasham
@MohammadHasham
Sep 08 2016 14:58 UTC
Can it cover the whole page?Yeah i guess
like for example when home is clicked it has a background color blue
but when contact us is clicked it has red
I hope i made sense this time :smile:
@IMLaing
Ian
@IMLaing
Sep 08 2016 15:01 UTC
@MohammadHasham I am a bit confused - can you use MS PAINT and sort of draw what you want to happen? I apologize.
Muhammad Hasham
@MohammadHasham
Sep 08 2016 15:03 UTC
blob
@IMLaing
when home is clicked it is red
but as we click on contact us or something else it is just as default
Ian
@IMLaing
Sep 08 2016 15:04 UTC
ok
so you can change the font color using color: ;
Muhammad Hasham
@MohammadHasham
Sep 08 2016 15:04 UTC
yes
but what about the background
@IMLaing
Ian
@IMLaing
Sep 08 2016 15:06 UTC
that can be changed with backgroudn
background: ;
Muhammad Hasham
@MohammadHasham
Sep 08 2016 15:07 UTC
@IMLaing Thanks by the way you couldn't get my point or maybe i have failed to explain right
CamperBot
@camperbot
Sep 08 2016 15:07 UTC
mohammadhasham sends brownie points to @imlaing :sparkles: :thumbsup: :sparkles:
:warning: mohammadhasham already gave imlaing points
Ian
@IMLaing
Sep 08 2016 15:07 UTC
@MohammadHasham Sorry man I am not sure what you mean
You can change the background of something by using background on the containing element - you can change font color by using color you can change the link color when clicked by doing a:clicked
Sanjay Tailor
@sanjaykt
Sep 08 2016 15:08 UTC
I have not been able to make weather icon larger... If anyone has a suggestion, it will be greatly appreciated... Here is the link for my Local Weather project (http://codepen.io/sanjay-t/pen/XKLXLj)
Tyler Moeller
@TylerMoeller
Sep 08 2016 15:12 UTC
@SanjayAtGit Your css will need to apply to the img, not the div container:
.icon img {
  height: 100px;
}
Sanjay Tailor
@sanjaykt
Sep 08 2016 15:13 UTC
thanks! let me try that @TylerMoeller
CamperBot
@camperbot
Sep 08 2016 15:13 UTC
sanjayatgit sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 801 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Sanjay Tailor
@sanjaykt
Sep 08 2016 15:15 UTC
Yes it worked out... Thanks @TylerMoeller
CamperBot
@camperbot
Sep 08 2016 15:15 UTC
sanjayatgit sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: sanjayatgit already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Sep 08 2016 15:16 UTC
@SanjayAtGit The icons from openweathermap tend to be small, unfortunately. You might want to try these icons instead: https://erikflowers.github.io/weather-icons/
Sanjay Tailor
@sanjaykt
Sep 08 2016 15:16 UTC
Yes, these are much better
How do I use them @TylerMoeller ? download them to my machine or is it an API?
Tyler Moeller
@TylerMoeller
Sep 08 2016 15:21 UTC
@SanjayAtGit You'll need to include the .css file for them and then add them to your html like: <i class="wi wi-cloudy"></i>. The main .css file is at: https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css, others are listed here: https://cdnjs.com/libraries/weather-icons
Sanjay Tailor
@sanjaykt
Sep 08 2016 15:22 UTC
I will try this out... thanks @TylerMoeller
CamperBot
@camperbot
Sep 08 2016 15:22 UTC
sanjayatgit sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: sanjayatgit already gave tylermoeller points
Florencia
@flopywood
Sep 08 2016 15:43 UTC
Hello, everyone! I need some help with my wikipedia viewer. I finished the project but when the results display, they don't appear position center and I would like to show them centered. What can I do? Here's the pen: http://codepen.io/flopy_dv/full/QKwzPq/
Klaus Mana
@KlausMana
Sep 08 2016 15:45 UTC
hey
@flopywood maybe add <center></center> ?
Florencia
@flopywood
Sep 08 2016 15:45 UTC
@KlausMana thanks! I'll try!!
CamperBot
@camperbot
Sep 08 2016 15:45 UTC
flopywood sends brownie points to @klausmana :sparkles: :thumbsup: :sparkles:
:cookie: 273 | @klausmana |http://www.freecodecamp.com/klausmana
Klaus Mana
@KlausMana
Sep 08 2016 15:46 UTC
@flopywood add it to the div with the ID wikiSearchResults I think
Rostyslav
@BeerDRinker
Sep 08 2016 15:47 UTC
hello all
Florencia
@flopywood
Sep 08 2016 15:47 UTC
@BeerDRinker hello and welcome!
Rostyslav
@BeerDRinker
Sep 08 2016 15:48 UTC
I working on wikipedia viewer
Klaus Mana
@KlausMana
Sep 08 2016 15:48 UTC
hey i ned some help too
Rostyslav
@BeerDRinker
Sep 08 2016 15:48 UTC
and have som problems
TrayBanks
@TrayBanks
Sep 08 2016 15:48 UTC
can someone take a look at my code and tell me why my screenshot isn't showing up? http://codepen.io/TrayBanks/pen/NRKvGg
Klaus Mana
@KlausMana
Sep 08 2016 15:48 UTC
i need help with the weather app
Florencia
@flopywood
Sep 08 2016 15:49 UTC
@KlausMana thanks! it DID work!!
@KlausMana what do you need help with?
Rostyslav
@BeerDRinker
Sep 08 2016 15:49 UTC
here is my project
Klaus Mana
@KlausMana
Sep 08 2016 15:49 UTC
@flopywood so i have already integrated the API but idk how to access things in it
Rostyslav
@BeerDRinker
Sep 08 2016 15:50 UTC
I do API query
Florencia
@flopywood
Sep 08 2016 15:50 UTC
@KlausMana that part was hard for me too so I went to youtube and followed this tutorial https://www.youtube.com/watch?v=eM4OAiPOHbs
Rostyslav
@BeerDRinker
Sep 08 2016 15:50 UTC
but it is do not shown on my page
Klaus Mana
@KlausMana
Sep 08 2016 15:50 UTC
thanks @flopywood :D
Tyler Moeller
@TylerMoeller
Sep 08 2016 15:50 UTC
@flopywood @KlausMana The <center> tag is not supported in HTML5. http://caniuse.com/#search=%3Ccenter%3E
A better way to fix this is to use bootstrap grids with offsets: http://getbootstrap.com/css/#grid-offsetting
CamperBot
@camperbot
Sep 08 2016 15:50 UTC
klausmana sends brownie points to @flopywood :sparkles: :thumbsup: :sparkles:
:cookie: 321 | @flopywood |http://www.freecodecamp.com/flopywood
Andrew Canter
@AndrewDylan
Sep 08 2016 15:51 UTC
Can someone look this over and help me figure out why my jQuery might not be working. Need a new set of eyes.
http://codepen.io/NoboFish/pen/grVbAR?editors=1011
Florencia
@flopywood
Sep 08 2016 15:51 UTC
@TylerMoeller oh, well, I'll give it an offset then thanks!
CamperBot
@camperbot
Sep 08 2016 15:51 UTC
flopywood sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 802 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Florencia
@flopywood
Sep 08 2016 15:53 UTC
@AndrewDylan I feel like there's something missing, like have you generated a key?
Andrew Canter
@AndrewDylan
Sep 08 2016 15:53 UTC
I have generated a key.
Rostyslav
@BeerDRinker
Sep 08 2016 15:54 UTC
can some one help me
?
Klaus Mana
@KlausMana
Sep 08 2016 15:54 UTC
@BeerDRinker what do you need help with?
Tyler Moeller
@TylerMoeller
Sep 08 2016 15:54 UTC
@TrayBanks The src for your image needs to be a full URL with http:// <img class="img-responsive" src="naruto.jpg" >
Florencia
@flopywood
Sep 08 2016 15:54 UTC
ok, then I don't know. I'm sorry, I did that part with a youtube tutorial I linked just right before
@BeerDRinker yes what do you need help with?
Rostyslav
@BeerDRinker
Sep 08 2016 15:54 UTC
@KlausMana I working on Wiki viewer
Klaus Mana
@KlausMana
Sep 08 2016 15:54 UTC
what is your problem?
Florencia
@flopywood
Sep 08 2016 15:55 UTC
@BeerDRinker ok what do you need help with?
Rostyslav
@BeerDRinker
Sep 08 2016 15:55 UTC
I do API query
but do not have it on my page
Tyler Moeller
@TylerMoeller
Sep 08 2016 15:55 UTC
@AndrewDylan Are you using chrome? navigator.geolocation requires HTTPS on Chrome, but your weather api only supports HTTP. You'll have to use a weather api that supports HTTPS or use a less accurate way to get location that works over HTTP, like http://ip-api.com/json
Rostyslav
@BeerDRinker
Sep 08 2016 15:55 UTC
please see my code here
Florencia
@flopywood
Sep 08 2016 15:56 UTC
but it's easier to do it in codepen
Andrew Canter
@AndrewDylan
Sep 08 2016 15:57 UTC
@TylerMoeller I had used that location API before I switched to navigator.geolocation and had the same issue as now.
TrayBanks
@TrayBanks
Sep 08 2016 15:57 UTC
@TylerMoeller But its a screenshot...? there is no url. I am trying to link it to the page using the image
Klaus Mana
@KlausMana
Sep 08 2016 15:58 UTC
@AndrewDylan navigator.geolocation will only work on chrome with https
Andrew Canter
@AndrewDylan
Sep 08 2016 15:58 UTC
I will switch it back to it and see if I can make anymore progress.
Klaus Mana
@KlausMana
Sep 08 2016 15:58 UTC
use this instead http://ip-api.com/json
Tyler Moeller
@TylerMoeller
Sep 08 2016 15:58 UTC
@TrayBanks Web apps can't load images from your local computer, upload the screenshot to https://postimg.org and get a URL you can use.
@AndrewDylan Found the bug, make sure you put http:// in front of your API URL: var weatherAPI = "http://api.openweathermap.org.....
@BeerDRinker Create a gh-pages branch on that repo so we can inspect it more easily. This will allow you to view the page at: https://BeerDRinker.github.io/Wikipedia-Viewer
Andrew Canter
@AndrewDylan
Sep 08 2016 16:02 UTC
@TylerMoeller Thanks! That fixed it. Love tiny little errors.
CamperBot
@camperbot
Sep 08 2016 16:02 UTC
andrewdylan sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 803 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Sep 08 2016 16:02 UTC
:)
Babu Rao Kasi
@babuharry
Sep 08 2016 16:05 UTC
hello everyone how r u dng
Florencia
@flopywood
Sep 08 2016 16:06 UTC
@babuharry hello!!!!
Hey, guys! I've finished my Wikipedia Viewer. Can anyone take a look before I submit it?? http://codepen.io/flopy_dv/full/QKwzPq/
TrayBanks
@TrayBanks
Sep 08 2016 16:06 UTC
THANKS SO MUCH, YOU DONT KNOW HOW LONG IT TOOK ME TO FIGURE THIS OUT @TylerMoeller
CamperBot
@camperbot
Sep 08 2016 16:06 UTC
traybanks sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 804 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Babu Rao Kasi
@babuharry
Sep 08 2016 16:06 UTC
do u know how to use HTML5 Shiv
Lance
@texas2010
Sep 08 2016 16:07 UTC
@TylerMoeller btw his code is wrong. that is why image wont show. I trying to tell them.. :S
he put link in alt.... not src
Florencia
@flopywood
Sep 08 2016 16:07 UTC
@babuharry not really sorry
Tyler Moeller
@TylerMoeller
Sep 08 2016 16:08 UTC
@texas2010 I think he fixed that before I saw the code, it was using a path to an image like src="naruto.jpg"
Lance
@texas2010
Sep 08 2016 16:08 UTC
@TylerMoeller, i saw that. but you need to look at alt. it is in wrong place
Babu Rao Kasi
@babuharry
Sep 08 2016 16:08 UTC
nice one @flopywood
Florencia
@flopywood
Sep 08 2016 16:09 UTC
@babuharry thanks!
CamperBot
@camperbot
Sep 08 2016 16:09 UTC
flopywood sends brownie points to @babuharry :sparkles: :thumbsup: :sparkles:
:cookie: 78 | @babuharry |http://www.freecodecamp.com/babuharry
Lance
@texas2010
Sep 08 2016 16:09 UTC
oh well. it seem like he fix it anyway
Muhammad Hasham
@MohammadHasham
Sep 08 2016 16:10 UTC
blob
is there a way that i can make my image a little bit center(not actually center) without compromising on responsiveness on mobile and other devices
@texas2010 @TylerMoeller
Florencia
@flopywood
Sep 08 2016 16:11 UTC
@MohammadHasham use a grid
Muhammad Hasham
@MohammadHasham
Sep 08 2016 16:11 UTC
used that as well
col-xs-6
Tyler Moeller
@TylerMoeller
Sep 08 2016 16:11 UTC
@MohammadHasham If you're using bootstrap, use grid offsets: http://getbootstrap.com/css/#grid-offsetting
Florencia
@flopywood
Sep 08 2016 16:11 UTC
like, col-md-6 offset
@MohammadHasham you have to offset it
Tyler Moeller
@TylerMoeller
Sep 08 2016 16:11 UTC
^^ Exactly
Muhammad Hasham
@MohammadHasham
Sep 08 2016 16:11 UTC
what does offset do?
Tyler Moeller
@TylerMoeller
Sep 08 2016 16:11 UTC
It's like putting an empty grid before the grid where your picture is
Muhammad Hasham
@MohammadHasham
Sep 08 2016 16:12 UTC
on left or right?
or i shall mention that?
Jason Luboff
@JLuboff
Sep 08 2016 16:12 UTC
It offsets from the left
Muhammad Hasham
@MohammadHasham
Sep 08 2016 16:12 UTC
@texas2010 can we change it to top or right ? @TylerMoeller
Jason Luboff
@JLuboff
Sep 08 2016 16:13 UTC
No, thats not how the grid system works
Tyler Moeller
@TylerMoeller
Sep 08 2016 16:13 UTC
@MohammadHasham Please read about grid offsets and let us know if you have more questions: http://getbootstrap.com/css/#grid-offsetting
Lance
@texas2010
Sep 08 2016 16:14 UTC
This message was deleted
Lance
@texas2010
Sep 08 2016 16:14 UTC
This message was deleted
Simon Cordova
@gbsimon87
Sep 08 2016 16:16 UTC
Hey guys! I know I'm close, could someone please provide some insight?
function titleCase(str) {

  var lowerCaseSplit = str.toLowerCase().split(" ");
  var newArrayUppercased = [];

  for (i = 0; i < lowerCaseSplit.length; i ++) {
    newArrayUppercased = (lowerCaseSplit[0].charAt(0).toUpperCase());
  }

  return newArrayUppercased;
}
sebtn
@sebtn
Sep 08 2016 16:17 UTC
I was wondering what did you guys use to build tic tac toe grid?
I'm thinking using <ul> or just a couple of arrays one for col and other for rows
Simon Cordova
@gbsimon87
Sep 08 2016 16:18 UTC
Anybody?
Adithya Reddy
@tallpants
Sep 08 2016 16:21 UTC
@sebtn I just used buttons
Alex S.
@aszwet1
Sep 08 2016 16:21 UTC

@aszwet1
hey all, how are things going?
I was wondering if someone could take a look at this and see if it will meet the criteria for the portolio project. https://codepen.io/swetz/pen/yaymBa

I know there isn't any real info in there, but I think the project definitely served it's purpose....

Adithya Reddy
@tallpants
Sep 08 2016 16:22 UTC
@aszwet1 just put some dummy projects on there
It's fine otherwise
@gbsimon87 what's wrong with your code?
Simon Cordova
@gbsimon87
Sep 08 2016 16:24 UTC
@aszwet1 no idea, I'm somewhat lost
sebtn
@sebtn
Sep 08 2016 16:24 UTC
maybe stick to html elements for the grid is a good idea
Adithya Reddy
@tallpants
Sep 08 2016 16:25 UTC
@gbsimon87 what's wrong with your output?
Alex S.
@aszwet1
Sep 08 2016 16:26 UTC
@adithyakreddy what kind of dummy projects? I mean it'd just be changing the image and the text right?
Simon Cordova
@gbsimon87
Sep 08 2016 16:26 UTC
It's giving me I I I I S H
I have no idea why tbh
Adithya Reddy
@tallpants
Sep 08 2016 16:26 UTC
@aszwet1 just create some grids and put fake projects on there with a title and description
and some placeholder image
Give me an input @gbsimon87
Alex S.
@aszwet1
Sep 08 2016 16:27 UTC
if you look at the projects, and click one of those, those are the "fake project" placeholders
Muhammad Hasham
@MohammadHasham
Sep 08 2016 16:27 UTC
@TylerMoeller Thanks that offset is a magic :sparkles:
CamperBot
@camperbot
Sep 08 2016 16:27 UTC
mohammadhasham sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 805 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Alex S.
@aszwet1
Sep 08 2016 16:28 UTC
when you click them they have placeholder spots for the description and title
Simon Cordova
@gbsimon87
Sep 08 2016 16:28 UTC
@adithyakreddy
function titleCase(str) {

  var lowerCaseSplit = str.toLowerCase().split(" ");
  var newArrayUppercased = [];

  for (i = 0; i < lowerCaseSplit.length; i ++) {
    newArrayUppercased = (lowerCaseSplit[0].charAt(0).toUpperCase());
  }  
  console.log(newArrayUppercased);
  return newArrayUppercased;

}
can some one help me?
Simon Cordova
@gbsimon87
Sep 08 2016 16:31 UTC
@BeerDRinker I'd help you but I haven't yet worked on that sorry buds
Adithya Reddy
@tallpants
Sep 08 2016 16:32 UTC
@gbsimon87 Here's a solution
Tyler Moeller
@TylerMoeller
Sep 08 2016 16:33 UTC
@BeerDRinker You have curly quotes around your id="article", change that to straight quotes and it should work fine: <div id="article">
Adithya Reddy
@tallpants
Sep 08 2016 16:33 UTC
function titleCase(str) {
    var lowerCaseString = str.toLocaleLowerCase();
    var lowerCaseArray = lowerCaseString.split(' ');

    var finalArray = [];

    lowerCaseArray.forEach(function (word) {
        var tempStr = word[0].toUpperCase();
        for (var i = 1; i < word.length; i++) {
            str += word[i];
        }

        finalArray.push(str);
    });

    return finalArray.join(' ');
}
whoops
sorry
function titleCase(str) {
  var lowerCaseString = str.toLowerCase();
    var lowerCaseArray = lowerCaseString.split(' ');
    var finalArray = [];
    lowerCaseArray.forEach(function(word) {
        var str = word[0].toUpperCase();
        for (var i = 1; i < word.length; i++) {
            str += word[i];
        }
        finalArray.push(str);
    });
    return finalArray.join(' ');
}
Simon Cordova
@gbsimon87
Sep 08 2016 16:34 UTC
@adithyakreddy thanks, I'll take a look at it when I get back
cheers and thanks again
CamperBot
@camperbot
Sep 08 2016 16:34 UTC
gbsimon87 sends brownie points to @adithyakreddy :sparkles: :thumbsup: :sparkles:
:cookie: 298 | @adithyakreddy |http://www.freecodecamp.com/adithyakreddy
Adithya Reddy
@tallpants
Sep 08 2016 16:34 UTC
I'm trying to do the simon project
But I have absolutely no idea how to make something like that in CSS
could someone point me to some resources to learn?
Rostyslav
@BeerDRinker
Sep 08 2016 16:36 UTC
@TylerMoeller you my hero!
Muhammad Hasham
@MohammadHasham
Sep 08 2016 16:36 UTC
what is the syntax of borders in html like in border-radius :5px 6px 7px 8px; what do there refer to?
@adithyakreddy
@TylerMoeller
Tyler Moeller
@TylerMoeller
Sep 08 2016 16:36 UTC
@BeerDRinker lol, hard to catch that one
Rostyslav
@BeerDRinker
Sep 08 2016 16:36 UTC
@TylerMoeller thank you!
CamperBot
@camperbot
Sep 08 2016 16:36 UTC
beerdrinker sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 806 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Adithya Reddy
@tallpants
Sep 08 2016 16:37 UTC
@MohammadHasham border-radius means you get rounded corners
Muhammad Hasham
@MohammadHasham
Sep 08 2016 16:37 UTC
but what do there 5px,6px,7px,8px refer to?
Rostyslav
@BeerDRinker
Sep 08 2016 16:37 UTC
one more question
Adithya Reddy
@tallpants
Sep 08 2016 16:38 UTC
Upper left corner, upper right corner, lower right corner, lower left corner
clockwise
Muhammad Hasham
@MohammadHasham
Sep 08 2016 16:38 UTC
@adithyakreddy Thanks
CamperBot
@camperbot
Sep 08 2016 16:38 UTC
mohammadhasham sends brownie points to @adithyakreddy :sparkles: :thumbsup: :sparkles:
:cookie: 299 | @adithyakreddy |http://www.freecodecamp.com/adithyakreddy
Rostyslav
@BeerDRinker
Sep 08 2016 16:38 UTC
how to fix "lockal wether app" HTTPS issue?
Tyler Moeller
@TylerMoeller
Sep 08 2016 16:38 UTC
@adithyakreddy I was going to say, those properties are helpful for creating a round simon board
Adithya Reddy
@tallpants
Sep 08 2016 16:38 UTC
what https issue?
Alex S.
@aszwet1
Sep 08 2016 16:39 UTC
@adithyakreddy did you take a look at the project placeholders that were already on the page? You want me to change those to real "fake images"? if you click them they show a description and a link
Adithya Reddy
@tallpants
Sep 08 2016 16:39 UTC
@TylerMoeller my issue so far is making all the elements "stick" together, if you get what i mean
Rostyslav
@BeerDRinker
Sep 08 2016 16:39 UTC
@adithyakreddy 5sec
Adithya Reddy
@tallpants
Sep 08 2016 16:40 UTC
@aszwet1 check out mine: https://adithyakreddy.github.io/
just make some dummy projects like that
Alex S.
@aszwet1
Sep 08 2016 16:41 UTC
@adithyakreddy yeah I have those already, if you look in projects, the circles are clickable
Adithya Reddy
@tallpants
Sep 08 2016 16:42 UTC
oh yea didn't know that
that's pretty good
Alex S.
@aszwet1
Sep 08 2016 16:42 UTC
Oh good, I'll make the directions clearer on the projects page
but I think I'm gonna call it good for now and move on!
thanks for the help
thanks @adithyakreddy
CamperBot
@camperbot
Sep 08 2016 16:43 UTC
aszwet1 sends brownie points to @adithyakreddy :sparkles: :thumbsup: :sparkles:
:cookie: 300 | @adithyakreddy |http://www.freecodecamp.com/adithyakreddy
Muhammad Hasham
@MohammadHasham
Sep 08 2016 16:46 UTC
width:38em;
    height:25em;
    border:5px solid white;
    padding: 10em;
    margin:5em;
will these margins effect the responsiveness of my page! actually i have made a rectangle box
Tyler Moeller
@TylerMoeller
Sep 08 2016 16:55 UTC
@adithyakreddy I think I fixed that by wrapping the four colors in a div and applying a background color to that div that's the same color as the borders around the four colors (if that makes sense)
flindip
@flindip
Sep 08 2016 16:57 UTC
I'm working on the Tic Tac Toe project. Trying to get the AI to respond. I looked at the minimax stuff and saw that switch function could a way to approach it. I may need to add other functions though. I just not sure what...
Here is the code:
https://codepen.io/flindip/pen/JRdwXp
Brian
@BrianCodes33
Sep 08 2016 17:13 UTC
can someone help me w/ simple algorithm challenge?
Adithya Reddy
@tallpants
Sep 08 2016 17:20 UTC
@BrianCodes33 what's up?
@flindip The AI is actually much more complicated than it seems, have you gotten the rest of your game working?
If you have then just code a simple random AI and then come back to this one when you're a bit more experienced
Ashwin Hariharan
@booleanhunter
Sep 08 2016 17:23 UTC
Is it possible to read the temperature of your CPU or get hardware information in JavaScript??
Muhammad Hasham
@MohammadHasham
Sep 08 2016 17:24 UTC
width:38em;
    height:25em;
    border:5px solid white;
    padding: 10em;
    margin:5em;
@adithyakreddy
@TylerMoeller
Adithya Reddy
@tallpants
Sep 08 2016 17:25 UTC
@booleanhunter You could probably do that using Node
Tyler Moeller
@TylerMoeller
Sep 08 2016 17:29 UTC
@MohammadHasham Yes, using exact widths instead of percentages will affect the responsiveness of your page. You can test this out yourself. Use the code and resize the page to see what happens.
Muhammad Hasham
@MohammadHasham
Sep 08 2016 17:29 UTC
@TylerMoeller Thanks
CamperBot
@camperbot
Sep 08 2016 17:29 UTC
mohammadhasham sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 807 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Adithya Reddy
@tallpants
Sep 08 2016 17:30 UTC
@booleanhunter you can use this: https://github.com/sebhildebrandt/systeminformation
genessgilkey
@genessgilkey
Sep 08 2016 17:32 UTC
i have a menu with an overly. when a link is clicked, the overlay doesnt disappear. what have i done wrong?
Alithia
@alithia2016
Sep 08 2016 17:32 UTC
I am having problems with a bootstrap basic collapsible. Can anyone check what I might be wrong?
Ashwin Hariharan
@booleanhunter
Sep 08 2016 17:32 UTC
@adithyakreddy - But it would show me information of the CPU where the server's running, not necessarily the user's (who wants to see it in a browser), correct??
Alithia
@alithia2016
Sep 08 2016 17:32 UTC
<div class="jumbotron">
<div class="row">
<div class="col-sm-3 text-center"><a href="#webdev" class="btn btn-default fa fa-cogs" data toggle="collapse"> Web Development </a>
<div id="webdev" class="collapse">I help companies build complete online sites front to back
</div>
</div>
<div class="col-sm-3 text-center"><a href="#webdes" class="btn btn-info fa fa-file-image-o" data toggle="collapse"> Web Design</a>
<div id="webdes" class="collapse">I help companies design the look and feel of their websites
</div>
<div class="col-sm-3 text-center"><a href="#userex" class="btn btn-success fa fa-users" data toggle="collapse"> User Experience </a>
<div id="userex" class="collapse">I help companies design excellent user experiences
</div>
<div class="col-sm-3 text-center"><a href="#data" class="btn btn-warning fa fa-database" data toggle="collapse"> Data Analysis </a>
<div id="data" class="collapse">I help companies structure data analysis
</div>
Adithya Reddy
@tallpants
Sep 08 2016 17:33 UTC
@booleanhunter You could make an application that'll run on the user's machine
but it's not gonna be possible in a browser
Muhammad Hasham
@MohammadHasham
Sep 08 2016 17:34 UTC
@TylerMoeller does using percentage in padding or margins do not effect responsiveness at all?
@adithyakreddy
Adithya Reddy
@tallpants
Sep 08 2016 17:35 UTC
Percentage is generally better than using px
Muhammad Hasham
@MohammadHasham
Sep 08 2016 17:35 UTC
so it won't effect responsiveness ?
@adithyakreddy
Adithya Reddy
@tallpants
Sep 08 2016 17:36 UTC
Mostly not
flindip
@flindip
Sep 08 2016 17:37 UTC
@adithyakreddy Well, I've made it that I can play against myself. But I'm trying to do a very simple AI that will fill in a random box when the user(1 or 2)is not present
@adithyakreddy Interestingly enough this seems to be a harder project than the Simon game...
Muhammad Hasham
@MohammadHasham
Sep 08 2016 17:38 UTC
@adithyakreddy Thanks
CamperBot
@camperbot
Sep 08 2016 17:38 UTC
mohammadhasham sends brownie points to @adithyakreddy :sparkles: :thumbsup: :sparkles:
:cookie: 301 | @adithyakreddy |http://www.freecodecamp.com/adithyakreddy
Toni Shortsleeve
@KoniKodes
Sep 08 2016 17:50 UTC
@sorinr Excellent! Thank you.
CamperBot
@camperbot
Sep 08 2016 17:50 UTC
konikodes sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 687 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Sep 08 2016 17:51 UTC
@KoniKodes welcome
Hèlen Grives
@mesmoiron
Sep 08 2016 17:58 UTC
@khaduch thnx; I inched further. I'll keep your offer for next time.
CamperBot
@camperbot
Sep 08 2016 17:58 UTC
mesmoiron sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1645 | @khaduch |http://www.freecodecamp.com/khaduch
Sorin Ruse
@sorinr
Sep 08 2016 18:03 UTC
@KoniKodes just sent you a pm with a nice link on react
Klaus Mana
@KlausMana
Sep 08 2016 18:09 UTC
hey I need some help
r2d2
@UsamaHameed
Sep 08 2016 18:09 UTC
@KlausMana got code?
Klaus Mana
@KlausMana
Sep 08 2016 18:09 UTC
yes
$( document ).ready(function() {
  $.ajax ({url : "http://ip-api.com/json"
    }).done(function(data) {
      Weather(data.lat,data.lon);
    }).fail(function(err) {
      console.log(err);
  });

});

function Weather(latitude , longtitude){
  console.log(latitude, longtitude);
  var apiKey  = "fffc77f90fb489748fe36ae1b79ac8b5";
$.ajax ({
  dataType : "json",
  url : "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longtitude + "&APPID=" + apiKey,
  type : "GET"
}).done(function(json){
  console.log(json);
  var currentWeather = json.weather[0].description;
  var timeGet = new Date();
  var time = timeGet.getTime();
  var sunrise = json.sys.sunrise;
  var sunset = json.sys.sunset;
  var ico;

  if(currentWeather = "clear sky"){
    if(time > sunset || time < sunrise){
      var ico = "https://s21.postimg.org/mq89fighf/Clear_Sky_Night.png";
      document.getElementById("testimg").setAttribute("src" , ico);
    }else{
      var ico = "https://s21.postimg.org/z3l3mf65v/Clear_Sky_Day.png";
      document.getElementById("testimg").setAttribute("src" , ico);
    }
  }

  if(currentWeather = "few clouds"){
    if(time > sunset || time < sunrise){
      var ico = "https://s21.postimg.org/aqwr87awj/Few_Clouds_Night.png";
      document.getElementById("testimg").setAttribute("src" , ico);
    }else{
      var ico = "https://s21.postimg.org/lp80qdzhv/Few_Clouds_Day.png";
      document.getElementById("testimg").setAttribute("src" , ico);
    }
  }

  if(currentWeather = "scattered clouds"){

      var ico = "https://s21.postimg.org/44a3f0t83/Scattered_Clouds.png";
      document.getElementById("testimg").setAttribute("src" , ico);

  }

  if(currentWeather = "broken clouds"){

      var ico = "https://s21.postimg.org/44a3f0t83/Scattered_Clouds.png";
      document.getElementById("testimg").setAttribute("src" , ico);

  }

  if(currentWeather = "shower rain"){

      var ico = "https://s21.postimg.org/efmg7okxf/Shower_Rain.png";
      document.getElementById("testimg").setAttribute("src" , ico);

  }

    if(currentWeather = "rain"){

      var ico = "https://s21.postimg.org/4sixxyrxv/Rain.png";
      document.getElementById("testimg").setAttribute("src" , ico);

  }

     if(currentWeather = "thunderstorm"){

      var ico = "https://s21.postimg.org/ofhcnkw6r/Thunderstorm.png";
      document.getElementById("testimg").setAttribute("src" , ico);

  }

     if(currentWeather = "snow"){

      var ico = "https://s21.postimg.org/khu2y69df/Snow.png";
      document.getElementById("testimg").setAttribute("src" , ico);

  }

     if(currentWeather = "mist"){

      var ico = "https://s21.postimg.org/xtna7dcdv/Mist.png";
      document.getElementById("testimg").setAttribute("src" , ico);

  }

});

}
when I execute the code, it always sets the last img
like the one that is in the last if statement
Diego Urenia
@drurenia
Sep 08 2016 18:11 UTC
your not using equality sign
r2d2
@UsamaHameed
Sep 08 2016 18:11 UTC
Because you are not using if else
@KlausMana
Diego Urenia
@drurenia
Sep 08 2016 18:11 UTC
you are assigning it
Klaus Mana
@KlausMana
Sep 08 2016 18:11 UTC
oh yes
ty
Diego Urenia
@drurenia
Sep 08 2016 18:11 UTC
you're welcome
Klaus Mana
@KlausMana
Sep 08 2016 18:11 UTC
taks @drurenia
wow
thanks @drurenia
CamperBot
@camperbot
Sep 08 2016 18:11 UTC
klausmana sends brownie points to @drurenia :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @drurenia |http://www.freecodecamp.com/drurenia
Diego Urenia
@drurenia
Sep 08 2016 18:12 UTC
This message was deleted
r2d2
@UsamaHameed
Sep 08 2016 18:12 UTC
@KlausMana also it is better to use else ifs instead of ifs all over the place
Diego Urenia
@drurenia
Sep 08 2016 18:12 UTC
This message was deleted
This message was deleted

You could make everything cleaner by using an array to store your ico links and access them using the currentWeather as the key. By doing so you wouldn't need this whole bunch of ifs. You would access and use them like this:

document.getElementById("testimg").setAttribute("src" , links[currentWeather]);

of course you would need to initialize the array beforehand with all links
@KlausMana
Kietil
@Kietil
Sep 08 2016 18:24 UTC
The errors i get from running "bundle install" into jekyll repo's - is that a conflict of ruby versions? I am told to manually install "redcloth", but i thought it was done through "bundle install"? anyone who can enlighten me of what this really means?
Sorin Ruse
@sorinr
Sep 08 2016 18:31 UTC
@KlausMana here is some info regarding openweather api that will help you rethink all the if statements: http://openweathermap.org/weather-conditions
tyl-er
@tyl-er
Sep 08 2016 18:34 UTC

Hey need help with the twitchtv API. I'm trying to get my data into an underscored list.

$("#online").append("<li>" game + logo + views + url "</li>");

using this gives me an error: unexpected identifier.

here's the codepen

http://codepen.io/tyl-er/pen/NRPkaV?editors=0011

Paweł
@pawelrus91
Sep 08 2016 18:37 UTC
@tyl-er because you use tu much ""
tyl-er
@tyl-er
Sep 08 2016 18:39 UTC
@pawelrus91 Sorry not exactly sure what you're trying to say. ¯_(ツ)_/¯
Am I using too many variables
Sorin Ruse
@sorinr
Sep 08 2016 18:41 UTC
@tyl-er $("#offline").append("<li>"+ game + logo + views + url +"</li>");
Paweł
@pawelrus91
Sep 08 2016 18:41 UTC
@tyl-er no syntax incorrect, because you
...
Ok, i have a problem with full width footer. Problem exist onli in codepen
tyl-er
@tyl-er
Sep 08 2016 18:43 UTC
@sorinr @pawelrus91 Got it thanks, but I still can't see my info.
CamperBot
@camperbot
Sep 08 2016 18:43 UTC
tyl-er sends brownie points to @sorinr and @pawelrus91 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for pawelrus91
:cookie: 688 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Sep 08 2016 18:46 UTC
@tyl-er its because freecodecamp chanell is offline and your data.stream is null. you have to test it first and make assignments based on that
Paweł
@pawelrus91
Sep 08 2016 18:46 UTC
@tyl-er see this examples

var $newdiv1 = $( "<div id='object1'></div>" ),
newdiv2 = document.createElement( "div" ),
existingdiv1 = document.getElementById( "foo" );

$( "body" ).append( $newdiv1, [ newdiv2, existingdiv1 ] );

I found this on oficall user manual
Can somebody help me? i have a problem with full width footer. Problem exist onli in codepen
but in independet server every works alright http://elonmusk.c0.pl/
LenaSUI
@LenaSUI
Sep 08 2016 18:49 UTC
Hey, I have a question
<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");
  });
</script>
Why is a period before well needed, but not before button?
Is it because button is an element and well is a class?
Mikail Bayram
@mikail1998
Sep 08 2016 19:00 UTC
http://codepen.io/mikail1998/pen/ozgXzb
I have two issues right now with my pomodoro
  1. When seconds start counting the first minute that passes(on the clock) passes in two minutes.
  2. Im trying to reduce for one number(the minute) so It doesn't count one extra but not successful at that too. Maybe its because i have two intervals for minutes and seconds i dont know but. I will appreciate any kind of help
Alex S.
@aszwet1
Sep 08 2016 19:05 UTC
@pawelrus91 I'm not sure why that's not working for you, it seems like there's an issue with your rows. I can tell you that you are for sure missing some important closing tags so I'd go over your code and do some cleanup work
Paweł
@pawelrus91
Sep 08 2016 19:08 UTC
@aszwet1 a checked every open and close tag
maybe i overylooked some
Erivan Cerqueira
@erivancerqueira
Sep 08 2016 19:11 UTC
@LenaSUI you are right. Well I'd a class and button a element.
@pawelrus91 I fixed it!!!
@pawelrus91 OK, so if you go to the settings under HTML. You need to remove all the stuff in "Add Classes to HTML" as well as the <link rel= stuff in the "stuff for head section"
john94
@lpy1994
Sep 08 2016 19:29 UTC
hi guys. can anybody give me a hint how to use switch method to show the weather icon?
Ian
@IMLaing
Sep 08 2016 19:49 UTC
shouldn't the arguement for the icon be based on the id number that corresponded to the img?
I think it is ID in the api object
john94
@lpy1994
Sep 08 2016 19:50 UTC
it is based on this data.weather[0].main
I gave it a variable
use it as argument function getIcons(here)?
Ian
@IMLaing
Sep 08 2016 19:51 UTC
Yes the id# can be used to pull the image if I remember correctly
It wasn't fun though that API was a pain
john94
@lpy1994
Sep 08 2016 19:53 UTC
Screen Shot 2016-09-08 at 3.53.12 PM.png
“wther” is the variable of the data.weather[0].main
Tyler Moeller
@TylerMoeller
Sep 08 2016 19:56 UTC
@lpy1994 You can get the full url of the icon by doing: var iconSrc = 'http://openweathermap.org/img/w/' + data.weather[0].icon + '.png';
john94
@lpy1994
Sep 08 2016 19:57 UTC
it looks good!
@TylerMoeller then I don’t need a if/swtich method ?
Tyler Moeller
@TylerMoeller
Sep 08 2016 19:59 UTC
@lpy1994 Correct. No need for a switch statement if you want to use the OpenWeatherMap icons. If you want to use different icons, then you'll have to use a switch statement (or similar) to categorize all the weather condition codes.
john94
@lpy1994
Sep 08 2016 20:00 UTC
@TylerMoeller can you give me hint about the one I want to use?
kind of confused for me on this part
Tyler Moeller
@TylerMoeller
Sep 08 2016 20:01 UTC
@lpy1994 It comes down to the design you want for your web app. If you like the OpenWeatherMap icons, there is no need for a switch statement since they give you the icon name in the JSON object.
john94
@lpy1994
Sep 08 2016 20:02 UTC
yeah, what you give me is far more easy than what i am trying to do here
Tyler Moeller
@TylerMoeller
Sep 08 2016 20:02 UTC
You can always change it later, I rewrote my weather app after I got better with JavaScript
john94
@lpy1994
Sep 08 2016 20:04 UTC
true tho
ok, let me figure out how to use the one you suggest
john94
@lpy1994
Sep 08 2016 20:27 UTC
@TylerMoeller var iconSrc = 'http://openweathermap.org/img/w/' + data.weather[0].icon + '.png';
$("#wather").html(iconSrc);
it seems not working
Marc-André Denault
@marcandre311
Sep 08 2016 20:28 UTC
hello guys, im working on my 1st project. I having trouble to align my text and picture together.
I want my text to be in the middle height of the picture*
john94
@lpy1994
Sep 08 2016 20:30 UTC
Screen Shot 2016-09-08 at 4.30.37 PM.png
Marc-André Denault
@marcandre311
Sep 08 2016 20:31 UTC
Oups this is the lastest version https://codepen.io/mad311/pen/bwdYOy?editors=1000
john94
@lpy1994
Sep 08 2016 20:32 UTC
using padding @marcandre311
Marc-André Denault
@marcandre311
Sep 08 2016 20:36 UTC
thanks @lpy1994 I created a div to the text and add padding. This is not very responsive to the size of the screen but it works for now
CamperBot
@camperbot
Sep 08 2016 20:36 UTC
marcandre311 sends brownie points to @lpy1994 :sparkles: :thumbsup: :sparkles:
:cookie: 275 | @lpy1994 |http://www.freecodecamp.com/lpy1994
john94
@lpy1994
Sep 08 2016 20:37 UTC
yeah, or you can try bootstrap
Tyler Moeller
@TylerMoeller
Sep 08 2016 20:37 UTC
@lpy1994 Add a div for your icon: <div id="weather-icon"></div> and then do:
  var iconSrc = 'http://openweathermap.org/img/w/' + data.weather[0].icon + '.png';
  $("#weather-icon").html('<img src="' + iconSrc + '">')
@TylerMoeller woud it be working if I use $getJson function?
Tom
@Torayx
Sep 08 2016 20:41 UTC
Im having a bit of trouble with images on my build a tribute page
I have 2 images placed together on the same row and they were originally overlapping which i fixed by scaling down their width, but now im trying to add a space between them so its basically 1 image on 1 side of the page and 1 image on the other side
john94
@lpy1994
Sep 08 2016 20:43 UTC
@TylerMoeller thank you !!!
CamperBot
@camperbot
Sep 08 2016 20:43 UTC
lpy1994 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 810 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Sep 08 2016 20:46 UTC
@lpy1994 Yes, I would put it in your $.getJSON function, right beneath where you're setting the other variables for temp, wther, etc
john94
@lpy1994
Sep 08 2016 20:47 UTC
got it, but it doesnt show the icon until i click the temp button tho
Tyler Moeller
@TylerMoeller
Sep 08 2016 20:48 UTC
@lpy1994 That's because it is in your .click() function for your temp button
all of the code you put in this function will only run when you click the temp button:
  $("#fahrenheit-btn").on("click", function() {
john94
@lpy1994
Sep 08 2016 20:49 UTC
yeah i just move it, now it works
moving on to the next project
gitPyexp
@gitPyexp
Sep 08 2016 22:04 UTC
hello guys, i have a question. In project "Build a Tribute Page" i should copy this same page? I mean write this same page from 0? Or maybe i must invent my own new page?
Nicholas Vorraso
@nickeyvee
Sep 08 2016 22:07 UTC
@khaduch thanks for the article man i appreciate it
CamperBot
@camperbot
Sep 08 2016 22:07 UTC
nickeyvee sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1646 | @khaduch |http://www.freecodecamp.com/khaduch
Jason Luboff
@JLuboff
Sep 08 2016 22:13 UTC
@gitPyexp You need to follow the guidelines of it, but you can make it your own (i.e the layout/design does not have to match)
gitPyexp
@gitPyexp
Sep 08 2016 22:15 UTC
@JLuboff okay, thanks :)
CamperBot
@camperbot
Sep 08 2016 22:15 UTC
gitpyexp sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 356 | @jluboff |http://www.freecodecamp.com/jluboff
Darnetta
@NettyBetty
Sep 08 2016 22:45 UTC

Hey guys and gals! I have a quick, not-project-related question:

I'm just starting the JavaScript portion of the Front-End track and would like to play around with it outside of FCC. I was wondering if there is an IDE (preferably free) that I could download that works with user input such as "prompt()" and popups like "alert()"? I'm currently using Sublime Text 3 and it doesn't support it/it's not working for me. I've also been using the browser console, but would really like to start using IDEs more.

Thanks in advance!

Coy Sanders
@coymeetsworld
Sep 08 2016 22:47 UTC
generally I do testing in the browser @NettyBetty which i think is fine for testing user input. As far as free IDEs I like Visual Studio Code which has alot of plugins. Also Atom is nice
can't say if there is an IDE that you can do UI testing on, probably better to just use browser so you see what your page would look from a normal user anyways
Matthew Allen
@unscodst
Sep 08 2016 22:51 UTC

@NettyBetty That's interesting. Are you building the prompts or alerts into a website? To answer your question though really depends on what you want to do. I use Brackets for front-end and it supports a lot of languages. If you want to be more Java heavy I know a lot of people like NetBeans, IntelliJ, and Android Studio

https://blog.idrsolutions.com/2015/03/the-top-11-free-ide-for-java-coding-development-programming/

Darnetta
@NettyBetty
Sep 08 2016 22:58 UTC

Thanks for the suggestions, @coymeetsworld ! I'll be sure to check them out.

@unscodst Right now, I'm just trying to practice what I've been learning. I'm not building websites just yet. :) I'm going to give the IDEs you mentioned a try and thanks for the link!

CamperBot
@camperbot
Sep 08 2016 22:58 UTC
:star2: 1360 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
nettybetty sends brownie points to @coymeetsworld and @unscodst :sparkles: :thumbsup: :sparkles:
:cookie: 26 | @unscodst |http://www.freecodecamp.com/unscodst
Helena
@poigirl2001
Sep 08 2016 23:02 UTC
Hello!
Adole Samuel
@int-elligentSam
Sep 08 2016 23:02 UTC
Why
Sorry 😑
Hello world
CamperBot
@camperbot
Sep 08 2016 23:03 UTC

welcome to FreeCodeCamp @samconnor!

Helena
@poigirl2001
Sep 08 2016 23:03 UTC
What's the best website maker for embedding stuff (I've tried wordpress and blogger so far)
Adole Samuel
@int-elligentSam
Sep 08 2016 23:05 UTC
@poigirl2001 try wix
Saurav Tiru
@AnonyXcali
Sep 08 2016 23:19 UTC
http://codepen.io/sauravxezio/pen/gwpJKm can someone review this and give me some good inputs on how to improve this?
Pierre Humberdroz
@phumberdroz
Sep 08 2016 23:41 UTC
Hey anyone here that knows react pretty well ?

https://github.com/phumberdroz/pizzastore/blob/master/client/modules/Product/Product.js
https://github.com/phumberdroz/pizzastore/blob/master/client/modules/Product/components/CreateWidget/CreateWidget.js

If i add a product it does not fetchCategories any more and does not save them to the state …
If there is no product in state categories are in the state

Harry Adel
@harryadel
Sep 08 2016 23:45 UTC
Why does users[i] is displayed as "undefined" instead of the actual array element?
http://codepen.io/Hadouken/pen/ozXVkk?editors=0010
Pierre Humberdroz
@phumberdroz
Sep 08 2016 23:48 UTC
fixed it
jrandallhansen
@jrandallhansen
Sep 08 2016 23:49 UTC
anyone want to help me identify my mistake with API call to wikipedia? coming back error every time for me
Tyler Moeller
@TylerMoeller
Sep 08 2016 23:49 UTC

@Harry97 This is an asynch issue. for loops are fast, so you don't want to call functions or APIs inside of them. Use a forEach with a callback instead.

users.forEach(function(user, i) {

^^ replace your for loop with that and then add a closing parenthesis ) at the end of your function

Harry Adel
@harryadel
Sep 08 2016 23:51 UTC
@TylerMoeller simple and precise, thanks alot!
CamperBot
@camperbot
Sep 08 2016 23:51 UTC
harry97 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 812 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Sep 08 2016 23:53 UTC

@jrandallhansen Your error will always fire because it isn't in a function to capture error messages. Try this instead:

      error: function(err) {
        alert("Error ", err)
    },

To fix your API call, use dataType: "jsonp":

    $.ajax({
      type: "GET",
      url: apiUrl,
      async: false,
      dataType: "jsonp",
.......
Anyone need some motivation? :) http://codepen.io/TylerMoeller/pen/oLKEyq