These are chat archives for FreeCodeCamp/HelpFrontEnd

18th
Oct 2016
Spyrantis Theodoros
@thodorisanta
Oct 18 2016 00:29

http://codepen.io/oshikurou/pen/amjvBd?editors=1111

when i press the "C" button i made the letter ("C") to change to an "F" and vica versa but it doesnt work and i made it in the last lines on the JavaScript.what did i do wrong?

Tyler Moeller
@TylerMoeller
Oct 18 2016 00:45

@thodorisanta You need to use === to compare instead of = and in vanilla JavaScript, you don't include the # in front of the ID like you do with jQuery. Also, you have a console.log() trying to pull up variables that are out of scope.

  $("#temp").click(function() {
    if (document.getElementById("temp").innerHTML === "C") {
      $('#temp').text("F");
    } else {
      document.getElementById("temp").innerHTML = "C";
    }
  });

Or, all jQuery:

  $("#temp").click(function() {
    if ($("#temp").text() === "C") {
      $('#temp').text("F");
    } else {
      $('#temp').text("C");
    }
  });
Walid Ashri
@walidashri
Oct 18 2016 01:01
@thodorisanta r u there?
Long Phan
@longp
Oct 18 2016 01:05
is there a chatroom for react-redux
Marina
@joyinthenow
Oct 18 2016 01:08
how do I align my text to be even with my photo?
http://codepen.io/joyinthenow/pen/ozPgrr
Long Phan
@longp
Oct 18 2016 01:10
@joyinthenow i think you can try to use rows and cols from bootstrap, or float the text some pixels to the right
Marina
@joyinthenow
Oct 18 2016 01:11
Thanks @longp , Ill give that a try! :)
CamperBot
@camperbot
Oct 18 2016 01:11
joyinthenow sends brownie points to @longp :sparkles: :thumbsup: :sparkles:
:cookie: 23 | @longp |http://www.freecodecamp.com/longp
Dylan
@dhcodes
Oct 18 2016 01:11
@longp the helpdataviz room is the closest you'll get
Long Phan
@longp
Oct 18 2016 01:12
thanks @dhcodes
CamperBot
@camperbot
Oct 18 2016 01:12
longp sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1504 | @dhcodes |http://www.freecodecamp.com/dhcodes
Ian Arsenault
@ianarsenault
Oct 18 2016 01:15
Anyone do the random quote machine yet?
Luke
@lukede
Oct 18 2016 01:33
@GorgonsMaze I'm working on it right now?
I'm working on it right now
Ian Arsenault
@ianarsenault
Oct 18 2016 01:34
@lukede Same, I'm stuck trying to figure out how to tweet out the quotes. I've never bothered with twitter before. I just signed up, but lost as to where I go to learn how to even use it.
Luke
@lukede
Oct 18 2016 01:34
@GorgonsMaze Well, that's where I'm stuck too
I came on here to ask for help on that very same problem
Ian Arsenault
@ianarsenault
Oct 18 2016 01:34
I've checked the example, but I don't even understand whats going on. I don't want ot just copy it.
Luke
@lukede
Oct 18 2016 01:34
Yeah, me neither
Long Phan
@longp
Oct 18 2016 01:35
@GorgonsMaze link to yur code?
Luke
@lukede
Oct 18 2016 01:35
I use twitter
Luke
@lukede
Oct 18 2016 01:35
but not sure how to get the quote into the twitter feed
Ian Arsenault
@ianarsenault
Oct 18 2016 01:36
@lukede I've used twitter widgets for a site i made earlier this month, but you can just get the script for that on twitters publish section
Long Phan
@longp
Oct 18 2016 01:37
@GorgonsMaze what is it that is tripping you up
Ian Arsenault
@ianarsenault
Oct 18 2016 01:39
@longp I'm just looking for something that can put me in the right direction as to how to create the tweet. I've tried googling, but nothing really comes up thats helpful. I've checked twitter developer docs. Do I need to have a twitter account to automatically generate a link to use?
Michael Davis
@mhdavis
Oct 18 2016 01:40
@GorgonsMaze I actually found some code on stack overflow in jQuery that will take your quote and put it into a tweet; is that what you are looking for?
Ian Arsenault
@ianarsenault
Oct 18 2016 01:41
@mhdavis Yeah anything would be helpful. Do you remember what you searched to get it.
Luke
@lukede
Oct 18 2016 01:42
Michael Davis
@mhdavis
Oct 18 2016 01:43
its fair close yea
I can just post the code here and run you through it if you'd like
Ian Arsenault
@ianarsenault
Oct 18 2016 01:43
@lukede Yeah I just came accross that one too
Michael Davis
@mhdavis
Oct 18 2016 01:44
however it requires that you understand how to pull JSON using Ajax
I also used a specific API called forismatic
Ian Arsenault
@ianarsenault
Oct 18 2016 01:46
@mhdavis Sure, I understand JSON and Ajax. I used an API on mashape
Michael Davis
@mhdavis
Oct 18 2016 01:46
oh word
so let me just make sure: you want to have a button that posts on twitter
Ian Arsenault
@ianarsenault
Oct 18 2016 01:46
Yeah
Michael Davis
@mhdavis
Oct 18 2016 01:46
like your quote?
okay
  $('.share-quote').on('click', function(event) {
    event.preventDefault();
    window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(quote + ' -- ' + author))
so that is the jQuery function i used to do that
and in my javascript, quote and author are variables i generated that pull the author and quote from the API
In this case, I gave the button i wanted to share on twitter the .share-quote class
idk if that helps
Ian Arsenault
@ianarsenault
Oct 18 2016 01:49
Alright, I see whats going on. I was mostly baffled by how or where to get the link and the encodeURIComponent part. But that helps me out a lot.
Michael Davis
@mhdavis
Oct 18 2016 01:49
right on
Ian Arsenault
@ianarsenault
Oct 18 2016 01:49
@mhdavis Thanks for your help
CamperBot
@camperbot
Oct 18 2016 01:49
gorgonsmaze sends brownie points to @mhdavis :sparkles: :thumbsup: :sparkles:
:cookie: 265 | @mhdavis |http://www.freecodecamp.com/mhdavis
Michael Davis
@mhdavis
Oct 18 2016 01:50
yea the encodeURIComponent is a pain in the butt to find out but once you know it you'll just remember it
Michael Davis
@mhdavis
Oct 18 2016 02:10
Is there an API for high resolution sceneic images?
like pictures of deserts and waterfalls and stuff
Caleb Tessier
@rubiksking7
Oct 18 2016 02:13
hi, i was wondering, how can i give a sentence an "indentation" (in normal text it would be the tab button)? whenever i code in html, all the sentences are all lined up to the left
JD Tadlock
@jdtdesigns
Oct 18 2016 02:27
@rubiksking7
.indent {
padding-left: 15px;
}

<p class="indent">This sentence will be indented to the right.</p>
@mhdavis unsplash.com, pexels.com
honesty1997
@Honesty1997
Oct 18 2016 02:31
Hello Guys~ need help here.
I am building a calculator here.
I am trying to make it console the button's id when i click it.
It didn't show ,but it supposed to.....
Caleb Tessier
@rubiksking7
Oct 18 2016 02:33
@jdtdesigns
honesty1997
@Honesty1997
Oct 18 2016 02:33
Please check what i have done wrong.
Caleb Tessier
@rubiksking7
Oct 18 2016 02:33
@jdtdesigns thanks
CamperBot
@camperbot
Oct 18 2016 02:33
rubiksking7 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 696 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Oct 18 2016 02:35
@Honesty1997 You spelled document with an 's'
also you don't add spaces in your html element attributes
click on the dropdown on the top left of the html panel and hit Tidy
that'll show you how it should look and how you should code it
honesty1997
@Honesty1997
Oct 18 2016 02:36
@jdtdesigns Oh thanks
CamperBot
@camperbot
Oct 18 2016 02:36
honesty1997 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
JD Tadlock
@jdtdesigns
Oct 18 2016 02:36
sorry, top right of the html panel*
CamperBot
@camperbot
Oct 18 2016 02:36
:cookie: 697 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
honesty1997
@Honesty1997
Oct 18 2016 02:36
I see the problem...
The spell problem is just....
I will watch that out next time...
Ian Arsenault
@ianarsenault
Oct 18 2016 02:38
honesty1997
@Honesty1997
Oct 18 2016 02:38
Also i have a question
If i want to write a function in the js while using jquery
Do i necessarily to write it in the ready function?
Or i just need to write it before ready access the function
JD Tadlock
@jdtdesigns
Oct 18 2016 02:39
@Honesty1997 You actually don't need .ready() at all
codepen loads your script at the bottom of the document
honesty1997
@Honesty1997
Oct 18 2016 02:39
In codepen?
JD Tadlock
@jdtdesigns
Oct 18 2016 02:39
right above </body>
honesty1997
@Honesty1997
Oct 18 2016 02:39
ok......
JD Tadlock
@jdtdesigns
Oct 18 2016 02:40
which is standard practice these days
honesty1997
@Honesty1997
Oct 18 2016 02:40
Don't know that
JD Tadlock
@jdtdesigns
Oct 18 2016 02:40
.ready() is kinda going the way of the dinosaur
Michael Davis
@mhdavis
Oct 18 2016 03:04
@GorgonsMaze thanks! sorry for the delay
CamperBot
@camperbot
Oct 18 2016 03:04
mhdavis sends brownie points to @gorgonsmaze :sparkles: :thumbsup: :sparkles:
:cookie: 328 | @gorgonsmaze |http://www.freecodecamp.com/gorgonsmaze
Werdeyo
@Werdeyo
Oct 18 2016 03:06
Does anyone know if it's possible to be able to use javascript entirely over html?
JD Tadlock
@jdtdesigns
Oct 18 2016 03:19
@Werdeyo They are two separate requirements for web sites/apps. HTML/CSS/JS are the 3 you'll have to learn if you want to do web dev. JS can manipulate/create html and css but you will need to know html and css to do that. And there's never a good reason to do everything in js alone.
Michael Davis
@mhdavis
Oct 18 2016 03:20
does anyone have an experience pulling images off of the Unspash API?
or has any familiarity with the unsplash API
JD Tadlock
@jdtdesigns
Oct 18 2016 03:21
@mhdavis what are you trying to achieve?
Michael Davis
@mhdavis
Oct 18 2016 03:21
im trying to get my random quote generator to swap out the background everytime someone hits the get quote button
more specifically im trying to figure out how to see what an unsplash JSON object looks like so I can pull out the right picture information and save it as a variable that i can call in the CSS as the background
Vincent Endrahadi
@vincentendrahadi
Oct 18 2016 03:25
guys i have a row div and 3 div inside of it, how can i make the 3 divs to be centered?
JD Tadlock
@jdtdesigns
Oct 18 2016 03:25
you can just use the image url and change out the image number with a random number generator @mhdavis
Michael Davis
@mhdavis
Oct 18 2016 03:27
I could, but im trying to see if i can do it through ajax/jQuery for the practice
JD Tadlock
@jdtdesigns
Oct 18 2016 03:30
@mhdavis That's not really something i'd use the api for
your not creating an app to display free images
your just using some images from them
c0d0er
@c0d0er
Oct 18 2016 03:35
does anybody know why the followoing code doesnt work when either parameter is empty array?
function updateInventory(arr1, arr2) {
    if(arr1===[]){return arr2;}
    if(arr2==[]){return arr1;}
}
updateInventory([[21, "Bowling Ball"], [2, "Dirty Sock"], [1, "Hair Pin"], [5, "Microphone"]], []);
JD Tadlock
@jdtdesigns
Oct 18 2016 03:39
@bill because you're not checking for an empty array
you're checking for array
it would be if ( !arr1.length ) {return arr2;}
and so on
Don
@nopal14
Oct 18 2016 04:05
Hi guys, I just got done making my first codepen how I get the link off it to attach it to the set?
Annu Nirmal
@annunirmal
Oct 18 2016 04:15
topic: Use the Twitchtv JSON API
hey guys can you help me with twitch api call, i am unable to recevie data. i picked line 4-284 from Em-Ant/fcc-course@4db1284
and my code is here
http://codepen.io/nirmalannu/pen/GjBzbW?editors=1010
Chris Cullen
@123xylem
Oct 18 2016 04:25
function lastSeq() {
  //Looks at lastCpu moves array and iterates through playing each note...
  for (var c = 0; c < lastCpu.length; c++) {
    (function(local){ //                                 What is local here? The value of C?
      setTimeout(function(){
        console.log("Playing: ", lastCpu[local]);
        audioF[lastCpu[local]].toLowerCase().play();
      }, 1000 * local); // <<<<< 1000 * local? is this 1 second times c value?
    }(c)); // Is this giving the starting point of the timeout?
  }
}
3 questions
1: what or how is function defining local?
2: how does the 1000*local work?
3: What is the encapsulated (c) at the end? Is it similar to ending a reduce function with an open array [] ?
Thanks!
Ian Arsenault
@ianarsenault
Oct 18 2016 04:42
@nopal14 If you're trying to get the url of the codepen you just made, it will just be the url of the page you're working on. As long as you saved it.
Jeff Greenlee
@JeffGreenlee42
Oct 18 2016 04:45
hello world
CamperBot
@camperbot
Oct 18 2016 04:45

welcome to FreeCodeCamp @JeffGreenlee42!

Jeff Greenlee
@JeffGreenlee42
Oct 18 2016 04:46
There appears to be a storm in the main room.. I am taking refuge! ;P
Palakurthi Durga Kiran Kumar
@durgakiran
Oct 18 2016 04:50
function convertHTML(str) {
  // &colon;&rpar;
 var  re = /\W/g;
 str.replace(re,'changed');
  return str;
}

convertHTML("&");
why my code is not working
Chris Cullen
@123xylem
Oct 18 2016 05:00
function lastSeq() {
  //Looks at lastCpu moves array and iterates through playing each note...     

  for (var c = 0; c <= lastCpu.length; c++) {
    (function(local){ 
       var note = lastCpu[local];
 setTimeout(function(){
        console.log("Playing: ", note.toLowerCase());
        audioF[note].toLowerCase().play();  // THIS LINE HERE IS THE PROBLEM>>> IT SEES    audioF[note) as undefined so cant read its property
      }, 1000 * local); // * localmeans fire every 1000 by locals iterations... so however long local takes +1000.

    }(c)); // this calls the function from c
  }
}
Quick Q: How do I make adioF(note) defined? My console.log can read it but something happens too quikly meaning the value of it becomes undefined by the time i want to play it!
Hans Ng
@hans-ng
Oct 18 2016 05:05
Hello everyone! Does anyone know how to use local assets for our pens if we're not pro users?
c0d0er
@c0d0er
Oct 18 2016 05:05
@jdtdesigns thanks!
CamperBot
@camperbot
Oct 18 2016 05:05
c0d0er sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 698 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Jeff Greenlee
@JeffGreenlee42
Oct 18 2016 05:34
@hans-ng Can you elaborate on what you mean by "local assets"?
Hans Ng
@hans-ng
Oct 18 2016 05:35
@JeffGreenlee42 meaning some images, icons I store in my laptop. I want to use them in my pen.
Jeff Greenlee
@JeffGreenlee42
Oct 18 2016 05:37
Oh! yeah.. you can use whatever available service you have at your disposal. If you have Google Drive, or Icloud or Dropbox, that will work.. I started using my account on GitHub.. If you start a project there you can store files .. and then once stored you can copy the URL to the files.
If you store your files on a cloud service, you simply have to make sure you make the file's permissions public... So that your pen project an access them.
It's best to use GitHub, just because it gets you comfortable with creating a project and then checking in files you have added to the project.
Hans Ng
@hans-ng
Oct 18 2016 05:42
@JeffGreenlee42 Thanks! I've explored those services and just moments ago created my github page. It's exactly what I wanted. Personally, I prefer this more than codepen. As FCC doesn't require us to use codepen as long as we can show our results. I think I'll stick to my own github from now on.
CamperBot
@camperbot
Oct 18 2016 05:42
hans-ng sends brownie points to @jeffgreenlee42 :sparkles: :thumbsup: :sparkles:
:cookie: 124 | @jeffgreenlee42 |http://www.freecodecamp.com/jeffgreenlee42
Hans Ng
@hans-ng
Oct 18 2016 05:44
@JeffGreenlee42 I code on Bracket and find it way faster and easier for me just to upload my project to Github instead of copying and pasting to CodePen.
Jeff Greenlee
@JeffGreenlee42
Oct 18 2016 05:44
Yes, I was using he codePen ... I think the one thing that is cool about codePen, is just that when you have a problem you would like help on in these chat rooms, or on the forum, It's so simple to just copy the URL and paste it here... and the codePen just shows up! I think Of codePen as just sort of a convenient Scratch pad.
YES!!! I downloaded Bracket yesterday! I LOVE the Live updating feature and the fact that when you select a section of HTML it outlines the section on the page!
I have ben exploring multiple Texting editor systems.... Include Atom and Sublime.. I thought I would like Atom the most at first... but I think I like Sublime more now... I have heard that Brackets Is great for starting out, but that it will have some limitations when we start getting into heavy JS scripting.
Hans Ng
@hans-ng
Oct 18 2016 05:51
Nice! You might want to explore its extensions. Try Emmet, Beautify, Color Palette, Color Picker, Bacon Ipsum, colorHints, Custom Work, Editor Line Style, Indent Guides, Tab Out, Monokai... They boost your coding tremendously.
Jeff Greenlee
@JeffGreenlee42
Oct 18 2016 05:56
Yes! Just learning Emmet now... The one I also have been having fun with is Jade (now Pug)... Just because I love CLEAN readable code...
Hans Ng
@hans-ng
Oct 18 2016 05:57
I got hook with Bracket and haven't got a chance to try others. Still, so far so good. Let's see how it goes. :)
Jeff Greenlee
@JeffGreenlee42
Oct 18 2016 06:01
Yeah.. Atom is free.. open source and created by GitHub community members... Sublime costs soemthing it.. but it's quite powerful... and totally configurable... completely worth it. and probably the fastest of all of them...
Chris Cullen
@123xylem
Oct 18 2016 06:14
http://codepen.io/123xylem/pen/jrAKPN?editors=0011
THis is 90% completed.. I would like it styled a lil better and The panels are occasionally buggy.. Just looking for some feedback advice on how to solve these problems if you see them!!
Muhammad Hasham
@MohammadHasham
Oct 18 2016 07:04
Can i use youtube to teach me that how can i make tic tac toe project
@123xylem @JeffGreenlee42 @hans-ng @c0d0er @durgakiran
Jeff Greenlee
@JeffGreenlee42
Oct 18 2016 07:05
Don't have an answer for that.. best way to find out is go to youtube and search!
Zo Rana
@zrana86
Oct 18 2016 07:06
Hi Everyone
I'm on the build a tribute page
are we only allowed to use HTML
and not CSS?
Muhammad Hasham
@MohammadHasham
Oct 18 2016 07:07
No you can use CSS as well as bootstrap @zrana86
Zo Rana
@zrana86
Oct 18 2016 07:08
ok, in the video it says "this is a completely HTML project"
but maybe his specific project was only using HTML
kirbyedy
@kirbyedy
Oct 18 2016 07:21
@zrana86 you can use whatever you want
Zo Rana
@zrana86
Oct 18 2016 07:50
thanks
is there a reason that img {img-responsive;} wouldn't work on CSS?
CSS style sheet
Artur Arsalanov
@kurumkan
Oct 18 2016 07:52
@zrana86 it's not css syntax. img responsive - it's bootstrap's class
Zo Rana
@zrana86
Oct 18 2016 07:53
ahh, thanks!
So I have to apply it to each image?
Artur Arsalanov
@kurumkan
Oct 18 2016 07:53
@zrana86 yes if you want them to be responsive
Hans Ng
@hans-ng
Oct 18 2016 08:17

Appreciate if anyone could provide me with any feedback on my portfolio page: https://hans-ng.github.io/

For this page, I only used CSS reset and stayed away from bootstrap to work from scratch and try to work my way around fixing issues (responsive, floating...) on my own.

Jakub
@szczepcio95
Oct 18 2016 08:18
Hey, do you know if I can send my own portfolio webpage instead of making one on codepen?
Hans Ng
@hans-ng
Oct 18 2016 08:19
@szczepcio95 You sure can. In fact, I did that myself with no problem.
catalin560
@catalin560
Oct 18 2016 08:36
can someone please tell me why isn't this working
console says "lat" is not defined or something
but lat,long and others are inside a function
WHY WHY WHY
kat-mag
@kat-mag
Oct 18 2016 08:39
@catalin560 They're not defined in your $(document).ready() function. Simple as that.
I would read up on variable scope in JS, if I were you. Will save you the headache later on.
kirbyedy
@kirbyedy
Oct 18 2016 08:41
@catalin560 also note this error, you will run into problems later on
 Mixed Content: The page at 'https://codepen.io/catalin560/pen/yaxxYB?editors=1011' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://ipinfo.io/'. This request has been blocked; the content must be served over HTTPS.
honesty1997
@Honesty1997
Oct 18 2016 09:25
Hello i am having some issues here again...
I am building a calculator here.
I am now trying to append a p element each time i click on the button
and remove the last number by clicking the Del button
I think the number buttons are working just fine.
The Del just don't work out.
Artur Arsalanov
@kurumkan
Oct 18 2016 09:28
@Honesty1997 if you do jquery - use html("<p>anything can be here including tags</p>"
honesty1997
@Honesty1997
Oct 18 2016 09:29
Yeah,I think my calculator can make the number show.Its delete function doesn't work well.....
Simon Cordova
@gbsimon87
Oct 18 2016 09:36
Morning guys...
I was wondering if anyone could recommend some top tier easy to use CMS?
Philipp Scholz
@philipp32
Oct 18 2016 09:57
Good Morning :)
I have a circulr photo. How can I give it a shadow in CSS? I've tried to adjust the box shadow but that didn't work.
kirbyedy
@kirbyedy
Oct 18 2016 10:02
not sure, I think it should be something like
box-shadow: 10px -10px #CCC;
Simon Cordova
@gbsimon87
Oct 18 2016 10:04
@philipp32 remember the box shadow put the shadow around the box element
kirbyedy
@kirbyedy
Oct 18 2016 10:13
This message was deleted
Philipp Scholz
@philipp32
Oct 18 2016 10:14
thank you at @kirbyedy @gbsimon87
CamperBot
@camperbot
Oct 18 2016 10:14
philipp32 sends brownie points to @kirbyedy and @gbsimon87 :sparkles: :thumbsup: :sparkles:
:cookie: 355 | @gbsimon87 |http://www.freecodecamp.com/gbsimon87
:star2: 1465 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
here it is
Philipp Scholz
@philipp32
Oct 18 2016 10:17
.photo{
width: 500px;
height: auto;
margin-top: -5680px;
margin-left: -760px;
this is the code for my photo
kirbyedy
@kirbyedy
Oct 18 2016 10:17
@philipp32 check the link above
Philipp Scholz
@philipp32
Oct 18 2016 10:17
how would I edit the code so I get the shadow as you had?
kirbyedy
@kirbyedy
Oct 18 2016 10:18
on the link above you have a html and css
play around you will get it
Maksim Kulichenko
@makstheimba
Oct 18 2016 10:19
For pomodoro clock what is an appropriate container to store time for work/break? I thought may be use input with readonly and change time with .val(), or should I use a simple div?
Philipp Scholz
@philipp32
Oct 18 2016 10:23
@kirbyedy The problem is that I haven't created the circular photo in html. I have created it in photoshop and then imported it. Your code make a shadow but it is sort of an elipse. Can I link the box to the circular photo and then make the shadow? Or do I have to match it by hand?
vínαч puppαl
@vinaypuppal
Oct 18 2016 10:23
@philipp32 @gbsimon87 I think you can apply box-shadow to even img element as it works here http://jsbin.com/lejazamifo/2/edit?html,css,output
Simon Cordova
@gbsimon87
Oct 18 2016 10:24
@vinaypuppal thanks a lot
CamperBot
@camperbot
Oct 18 2016 10:24
gbsimon87 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 617 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Stephen James
@sjames1958gm
Oct 18 2016 10:49
@makstheimba I used a span - but I separated out each digit
Jack Lyons
@JackEdwardLyons
Oct 18 2016 10:55
hey guys im having trouble wiht my tic tac toe logic
I'm trying to push the position of the player mark into an array, but the array keeps updating on each new push
it doesn't retain the values
this happens when you play against the computer... To play click X then COMPUTER
it works fine for Human V Human
Stephen James
@sjames1958gm
Oct 18 2016 11:03
@JackEdwardLyons Is it because your ai tiles console.log doesn't show an array?
@JackEdwardLyons You are pushing twice and array.push returns the new size not the array -
console.log(`ai tiles: ${array}`);
kirbyedy
@kirbyedy
Oct 18 2016 11:11
@philipp32 I would have to see that. it does not matter if the photo is rectangular, the css attribute overflow: hidden, takes care of it
Albert Brennan
@bluegreybolt
Oct 18 2016 11:31
Hey guys I'm having trouble with the Pomodoro clock project.
I'm not sure how to write the actual timing function.
So that you can pause and unpause the clock and it carries on as normal.
catalin560
@catalin560
Oct 18 2016 11:33
@JackEdwardLyons nice program jack good work!
Jeff Greenlee
@JeffGreenlee42
Oct 18 2016 11:44
Anybody here have experience using Bootstrap carousel?
Artur Arsalanov
@kurumkan
Oct 18 2016 11:56
@JeffGreenlee42 a bit. whats the issue?
Jeff Greenlee
@JeffGreenlee42
Oct 18 2016 11:58
I'm trying to use a carousel control using Bootstrap.... But I have 2 problems: 1) The carousel controls don't show, and in the Chrome console I see the error: " bootstrap.min.js:6 Uncaught TypeError: Cannot read property 'offsetWidth' of undefined"... REsearching it on the internet.. Finding tons of hits with this error... Nobody has a satisfying resolution!
Here it is on codePen
Sorin Ruse
@sorinr
Oct 18 2016 12:01
@JeffGreenlee42 load first jquery and after bootstrap.js
Jeff Greenlee
@JeffGreenlee42
Oct 18 2016 12:02
Yes.. I did that... When I had Bootstrap.js first I was getting different Chrome errors... That has been resolved..
But I just did the same in CodePen.. Still have the same issue.. No carousel controls show!
vínαч puppαl
@vinaypuppal
Oct 18 2016 12:04
@JeffGreenlee42 You have closed <div class="carousel slide" id="carousel-example"></div> and wrote rest of carousel code below it , Here is the working Forked pen of yours http://codepen.io/vinaypuppal/pen/ozawYg?editors=1010
Jeff Greenlee
@JeffGreenlee42
Oct 18 2016 12:07
Holy MOSES!! I have been pulling my hear out on this one!!!! So you are saying the closing </Div> should be put at the end of this code section?
vínαч puppαl
@vinaypuppal
Oct 18 2016 12:07
@JeffGreenlee42 yes
Jeff Greenlee
@JeffGreenlee42
Oct 18 2016 12:09
Thanks!!!! Boy is that confusing! I wrote this using Emmet.. Mabybe that was my problem!
Artur Arsalanov
@kurumkan
Oct 18 2016 12:11
@JeffGreenlee42 you better tell him thank you like @vinaypuppal thank you. He will get brownies=)
CamperBot
@camperbot
Oct 18 2016 12:11
kurumkan sends brownie points to @jeffgreenlee42 and @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 125 | @jeffgreenlee42 |http://www.freecodecamp.com/jeffgreenlee42
:cookie: 618 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Jeff Greenlee
@JeffGreenlee42
Oct 18 2016 12:12
Oh! I thought "Thanks" worked! Maybe I had two many Exclamation points. :)
too many...
Oh! so kool! Thank you again @vinaypuppal !
CamperBot
@camperbot
Oct 18 2016 12:14
jeffgreenlee42 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 619 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Sorin Ruse
@sorinr
Oct 18 2016 12:15
@JeffGreenlee42 keep in mind as a general rule, when you are using a js library( lib X) that depends on another library (lib Y) you have to first load in your code lib Y and after lib X
Jeff Greenlee
@JeffGreenlee42
Oct 18 2016 12:15
Argh! it's amazing how you can get yourself locked in a trap!
@sorinr yes, I understand. I was mostly working out of Sublime, where I fixed that issue... But I threw it into CodePen for this question.. where I forgot to switch the order of the libraries.
Sorin Ruse
@sorinr
Oct 18 2016 12:18
@JeffGreenlee42 :) it happens
Jeff Greenlee
@JeffGreenlee42
Oct 18 2016 12:21
Awesome.. I just umm.. well discovered that you can use images the Lorem Ipsem site for filler images! :)
JD Tadlock
@jdtdesigns
Oct 18 2016 12:58
Hey everybody, I've seen a lot of questions regarding why code data isn't showing with an ajax request. I made a little animation to show why your data isn't showing. Hope this helps. :) http://jsbin.com/yevovuv/edit?output
blazevivan
@blazevivan
Oct 18 2016 13:14
can anyone recommend good PSD to HTML tutorial?
Sorin Ruse
@sorinr
Oct 18 2016 13:18
@jdtdesigns nice one. put aside the correct one
emamadordev
@emamadordev
Oct 18 2016 13:20
@jdtdesigns im struggling with this right now actually. but what would be the solution?
Sorin Ruse
@sorinr
Oct 18 2016 13:23
@emamador you can move the two doc.getelements inside the ajax call response or wrap them into a function and call that function from within the ajax call passing what data you want to the function. this is how i'll deal with it
emamadordev
@emamadordev
Oct 18 2016 13:30
@sorinr ok ill try it , but let me show you my code so that you can see what i'm dealing with.

im working on the random qoute generator. tell me what you think.
html:

<div class="container">

  <h1 class="text-center">Random Quotes on Design</h1>

   <div class="row">
    <div class="col-md-12 text-center quotes">To create a memorable design you need to start with a thought that’s worth remembering.
<br><br>
-Thomas Manss
      </div>
     <div class="col-md-12 text-center"><br>
       <button class="btn qbtn">New Quote</button>
<div id="quotes3"></div>
     <script async src="//platform.twitter.com/widgets.js" charset="utf-8">

       </script>

       <div id="quotes2"></div>
    </div>
  </div>  
  </div>

javascript:

function randNum(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

$.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=29&callback=", function(a) {

     var quoteTxt="";  $('.qbtn').on('click',function(){  
var ran = randNum(0,29);
          quoteTxt = a[ran].content + '-'+a[ran].title;
       $('.quotes').html(quoteTxt);


        });
   twttr.widgets.createShareButton(
  'https://dev.twitter.com/',
  document.getElementById('quotes3'),
  {
    text:quoteTxt
  });

});
Ian Carreras
@IanCarreras
Oct 18 2016 13:33
can someone help me out? I'm trying to get my keyup to call a function and it isn't working
emamadordev
@emamadordev
Oct 18 2016 13:34
@sorinr problem is i'm trying to pass to the text part in the twitter widget the variable quoteTxt but it's empty because it's out of scope.
avi twito
@aviTwito
Oct 18 2016 13:35
hi everyone is there an api of quotes json to use in the Build a Random Quote Machine?
kirbyedy
@kirbyedy
Oct 18 2016 13:35
@aviTwito yes, plenty, just google
Sorin Ruse
@sorinr
Oct 18 2016 13:37
@emamador do u have it on codepen?
@sorinr i want to pass the quote to the twitter button.
Spyrantis Theodoros
@thodorisanta
Oct 18 2016 13:45

@TylerMoeller http://codepen.io/oshikurou/pen/amjvBd?editors=1111

still doesnt work :/

emamadordev
@emamadordev
Oct 18 2016 13:46
@sorinr i created the quoteTxt variable outside the button function to access the data outside the function and pass it onto the twitter wdget but it's not working. is it that jquery doesn't work this way or maybe Ajax. or maybe it's the twitter widget itself. idk.
Tyler Moeller
@TylerMoeller
Oct 18 2016 13:47
@thodorisanta you haven't changed the code.
Sorin Ruse
@sorinr
Oct 18 2016 13:47
@emamador just a sec
emamadordev
@emamadordev
Oct 18 2016 13:48
@thodorisanta you have an a in the html tag for button. i think that shouldn't be there,
Spyrantis Theodoros
@thodorisanta
Oct 18 2016 13:49

@TylerMoeller @emamador http://codepen.io/oshikurou/pen/amjvBd?editors=1111

forgot to save it. look now

emamadordev
@emamadordev
Oct 18 2016 13:54
@thodorisanta its working on the codepen site but not here,
Sebastián Ventura
@sevgit
Oct 18 2016 13:54
@emamador it looks like quoteTxt is not defined by the time you call text: quoteTxt
Tyler Moeller
@TylerMoeller
Oct 18 2016 13:54
@thodorisanta remove the console.log on line 25 of your JS. Fix the closing </button> tag in your HTML
Then it will work
Spyrantis Theodoros
@thodorisanta
Oct 18 2016 13:55
@TylerMoeller ok thanks
CamperBot
@camperbot
Oct 18 2016 13:55
thodorisanta sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 885 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Sebastián Ventura
@sevgit
Oct 18 2016 13:57
@emamador I'm console logging quoteText and it shows up empty, that's why the text is not transferring
quoteTxt *
emamadordev
@emamadordev
Oct 18 2016 14:01
@sevgit i got that part. but i've tried a bunch of things and it still doesn't work. it's because the data is local scope, right? but i thought that if you create the variable outsde the local scope you can access the data outside of it. you get what i'm saying?
JD Tadlock
@jdtdesigns
Oct 18 2016 14:01
@emamador Here's a way to do it. ;) https://codepen.io/jdtadlock/pen/yaRzjo?editors=0010
Sebastián Ventura
@sevgit
Oct 18 2016 14:01
How about you create a var that equals the innerHTML of your quote div?
JD Tadlock
@jdtdesigns
Oct 18 2016 14:02
i changed some html, added some css and changed the js some as well
start thinking functional when coding your js
split each action into functions
Sebastián Ventura
@sevgit
Oct 18 2016 14:02

So if .quotes contains the quote, you could create something like this

var tweetThis = $('.quotes').html();

and then make text: tweetThis on your twittr call

Requires jquery though, @emamador

JD Tadlock
@jdtdesigns
Oct 18 2016 14:03
so each action can call the other and they can communicate
emamadordev
@emamadordev
Oct 18 2016 14:03
@jdtdesigns ok let me review what you did.
JD Tadlock
@jdtdesigns
Oct 18 2016 14:03
it also makes it much easier to read and come back to later on @emamador
i didn't use the twitter intent js
just the url
much easier ;) @emamador
Sebastián Ventura
@sevgit
Oct 18 2016 14:05
I used this for the sake of simplicity
$('.share').click(function(e){
    event.preventDefault();
    window.open('https://twitter.com/intent/tweet?text=' + theQuote + ' -- ' + theAuthor);
  });
Spyrantis Theodoros
@thodorisanta
Oct 18 2016 14:10

http://codepen.io/oshikurou/pen/amjvBd?editors=1111

why when i press the "C" on the screen the numbers dont change from celcius to fahrenheit?

Sorin Ruse
@sorinr
Oct 18 2016 14:11
@emamador using this twttr.widgets.createShareButton actually will recreate the tweet btn each time instead of changing only his text:quoteTxt property. as @jdtdesigns said a reorganization of your code its needed anyway even if you use widgets lib or not
JD Tadlock
@jdtdesigns
Oct 18 2016 14:12
@emamador I edited the regex to work better. ;)
emamadordev
@emamadordev
Oct 18 2016 14:14
@sorinr ok ill take that into consideration.
thanks both of you. @jdtdesigns @sorinr
CamperBot
@camperbot
Oct 18 2016 14:15
emamador sends brownie points to @jdtdesigns and @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 774 | @sorinr |http://www.freecodecamp.com/sorinr
:cookie: 699 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
emamadordev
@emamadordev
Oct 18 2016 14:18
@jdtdesigns bro you're a wizard. i always see you on here. do you work as a web developer for a living?
JD Tadlock
@jdtdesigns
Oct 18 2016 14:19
@emamador I do freelance. I have a landscaping business that's been slammed this summer.
but i've been deving for 8 years or so
emamadordev
@emamadordev
Oct 18 2016 14:20
@jdtdesigns oh. i see.
JD Tadlock
@jdtdesigns
Oct 18 2016 14:21
@thodorisanta
var fahrenheit, celcius, kelvin; // create the vars up here

function getPosition(){
  $.getJSON('http://ipinfo.io', function(dota){
    console.log(dota)
    $("#city").text(dota.city + "," + dota.country);

    var array = [];
    array = dota.loc.split(",");
    showWeather(array[0], array[1]);
  })
};

function showWeather(lat, long){
  $.getJSON('http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+long+'&APPID=570708ad4bd05b594cc91f17522bdc27',  function(data){
    console.log(data)
    // set them here
    kelvin = data.main.temp;
    celcius = kelvin - 273.15;
    fahrenheit = celcius * 9/5 + 32;
    $("#weather").text(fahrenheit);
  })
};


$(document).ready(function(){
  getPosition();

  $("#temp").click(function() {
    if ($("#temp").text() === "C") {
      $('#temp').text("F");
      $("#weather").text(fahrenheit);
      console.log(fahrenheit);
    } 
    else {
      $('#temp').text("C");
       $("#weather").text(celcius);
    }
  });
});
Sorin Ruse
@sorinr
Oct 18 2016 14:21
@jdtdesigns lol. i used to sell stone and stone prods for buildings and lanscaping
JD Tadlock
@jdtdesigns
Oct 18 2016 14:22
@sorinr I don't deal with stone work lol. I do stuff that won't kill my back. ;)
Taras Yaremkiv
@Y-Taras
Oct 18 2016 14:24

Hello everyone. Don't know how to make the message about the winner appear after every game

    function makeMove() {
        if (game.winner(board) === "x") {
            footer.innerHTML = "The Winner is X";
            footer.className = "fade";
            restartGame();
            return;

CSS

footer.fade {
    animation: fadeinout 4s linear forwards;
    -webkit-animation: fadeinout 4s linear forwards;
}
@-webkit-keyframes fadeinout {
    0%, 100% {  opacity: 0; }
    50% {  opacity: 1;  }
}
@keyframes fadeinout {
    0%, 100% {  opacity: 0; }
    50% {  opacity: 1; }
}

hTML))

<footer></footer>
Spyrantis Theodoros
@thodorisanta
Oct 18 2016 14:25

@jdtdesigns http://codepen.io/oshikurou/pen/amjvBd?editors=1111

why it doesnt work on the first click tho?

Sorin Ruse
@sorinr
Oct 18 2016 14:26
@jdtdesigns sent u a pm msg
JD Tadlock
@jdtdesigns
Oct 18 2016 14:27
@thodorisanta Because this http://jsbin.com/yevovuv/6/edit?output ;)
Spyrantis Theodoros
@thodorisanta
Oct 18 2016 14:27
@jdtdesigns solved it. i made the letter start from "C" and the temp from "fahrenheit"
JD Tadlock
@jdtdesigns
Oct 18 2016 14:29
@thodorisanta You have '//' in your css which is causing it to break
you can use double slash in sass, but not css ;)
Spyrantis Theodoros
@thodorisanta
Oct 18 2016 14:35
how can i get a number like 15.43534534 return just the "15". you know..only the number before the dot.
Sorin Ruse
@sorinr
Oct 18 2016 14:36
@thodorisanta Math.floor
@thodorisanta but depends on if you just want to get the integer part or round it up or down
Spyrantis Theodoros
@thodorisanta
Oct 18 2016 14:37
@sorinr the integer
@sorinr or....how can i round it up or down depend on the number?
Ian Carreras
@IanCarreras
Oct 18 2016 14:40
can someone help me out? I'm trying to search withthe enter key as well as the button.I'm trying to get my .keyup to call a function and it isn't working. it will console.log what I tell it to but the function call isn't working
http://codepen.io/1IC/pen/rrdvjd?editors=1010
Sorin Ruse
@sorinr
Oct 18 2016 14:43
@thodorisanta to round up or down u can use .round()
JD Tadlock
@jdtdesigns
Oct 18 2016 14:44
@thodorisanta
function showWeather(lat, long){
  $.getJSON('http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+long+'&units=imperial&APPID=570708ad4bd05b594cc91f17522bdc27',  function(data){
    console.log(data)
    // set variable data.

    // var newkelvin = data.main.temp.split(".");
    // kelvin = newkelvin;
    fahrenheit = data.main.temp.toFixed();
    celcius = ((fahrenheit - 32) * 5 / 9).toFixed();
    console.log(fahrenheit);
    $("#weather").text(celcius);
  })
};
I added '&units=imperial' to the api url which sends back faherenheit
Then i used toFixed() which allows you to designate how many decimal places to show. Default is none. ;)
Sebastián Ventura
@sevgit
Oct 18 2016 14:45
You'll know someone hacked @jdtdesigns when a message shows up with no winky face
JD Tadlock
@jdtdesigns
Oct 18 2016 14:46
;)
Rich
@richard-ball
Oct 18 2016 14:49
is there twitchapi workaround broken?
I am getting an forbidden route error
JD Tadlock
@jdtdesigns
Oct 18 2016 14:50
@richard-ball The twitch api now requires an access token ;)
Ian Carreras
@IanCarreras
Oct 18 2016 14:52
can someone help me get the enter key to call a function?
Sebastián Ventura
@sevgit
Oct 18 2016 14:56
Check this link @1Spicoli : https://wind-bow.hyperdev.space/
You won't need to sign up for a key using that link instead of the other one
Ian Carreras
@IanCarreras
Oct 18 2016 15:09
@jdtdesigns that is what my code looks like, but instead of console.log I want to call a function. http://codepen.io/1IC/pen/rrdvjd?editors=1010. This part starts at line 8
Rich
@richard-ball
Oct 18 2016 15:09
I am using this but get a CORS error
https://wind-bow.hyperdev.space/
when running from my js file.
vínαч puppαl
@vinaypuppal
Oct 18 2016 15:33

@richard-ball try this you won't get CORS issue

$(document).ready(function(){
  $.ajax({
    url: 'https://wind-bow.hyperdev.space/twitch-api/users/freecodecamp',
    dataType: 'jsonp'
  }).done(function(data){
    console.log(data);
  });
});

Read more about $.ajax here http://api.jquery.com/jquery.ajax/

Arti M
@artismarti
Oct 18 2016 15:55
Hi all, I’m working on the Random Quote Generator project. Basically, I have checked the API & it does return JSON, but I’m unable to display the JSON/HTML on the page. Could anyone please let me know what I’m doing wrong here?
https://codepen.io/artismarti/pen/kkwrAr/
$(document).ready(function() {
  $("#getQuote").on("click", function() {
    $.getJSON("http://quotes.stormconsultancy.co.uk/random.json", function(json) {
      $(".quote").html(JSON.stringify(json));
    });
  });
});
Ahmad Ali
@microcyberz
Oct 18 2016 15:57
Have anyone completed SIMON GAME, I am stuck in that for a long time, I need some help.
Tyler Moeller
@TylerMoeller
Oct 18 2016 15:59
@artismarti You're getting a Mixed Content error, trying to load a HTTP resource from a secure origin. Since your Quote API only supports HTTP, so you'll need to open your codepen over HTTP for it to work: http://codepen.io/artismarti/pen/kkwrAr/?editors=1010.
Sawyer Cutler
@TheGreatAxios
Oct 18 2016 16:00
Hello to all, I am working on the tribute page. How do I select who I am to do the tribute page for?
Arti M
@artismarti
Oct 18 2016 16:00
@TylerMoeller Thank you! I’ll try that
CamperBot
@camperbot
Oct 18 2016 16:00
artismarti sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 886 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Arti M
@artismarti
Oct 18 2016 16:01
Also @TylerMoeller how/where did you see the error?
Tyler Moeller
@TylerMoeller
Oct 18 2016 16:01
@TheGreatAxios You can choose anything you want - even a nzxt phantom 530 computer :)
Sawyer Cutler
@TheGreatAxios
Oct 18 2016 16:01
Hahaha alright, thank You very much @TylerMoeller
CamperBot
@camperbot
Oct 18 2016 16:01
thegreataxios sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 887 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Oct 18 2016 16:02
@artismarti If you open the developer tools in your browser, there is a console that gives more information than the console in codepen. On my computer, I press Ctrl+Shift+i to bring it up
Arti M
@artismarti
Oct 18 2016 16:02
Thanks!
JD Tadlock
@jdtdesigns
Oct 18 2016 16:32
@1Spicoli Sorry, was away. You just need to change a couple things.
function enterKey(event) {
    if (event.keyCode === 13) {
      wikiSearch();
    }
}

/* The search input shouldn't be wrapped in a form
*  the form by default will submit to the current page and refresh it
*  so just use the input by itself instead and you're good
*  you also don't add <body></body> to the html panel on codepen
*  it does that for you
*/
<div class="container-fluid">
  <h1>Wiki View</h1>
  <a id="random" target="_blank" href="https://en.wikipedia.org/wiki/Special:Random"><button>Random Wiki</button></a>

  <input id="search" type="text">
  <button id="submit" type="submit">Search Wiki</button>
</div>
<ul id="results">

</ul>
karocann
@karocann
Oct 18 2016 17:25
I have a problem matching my curly braces and parenthesis. I am getting errors "unexpected en of input" or "unexpected token" or something similar. Is there any method to help match these up and avoid these errors?
Stephen James
@sjames1958gm
Oct 18 2016 17:25
@karocann In the FCC editor?
karocann
@karocann
Oct 18 2016 17:26
@sjames1958gm no, in codepen.io
Stephen James
@sjames1958gm
Oct 18 2016 17:32
@karocann There is a drop down menu in the upper right of each window - use tidy js or analyze js from that menu to help. I use tidy js as it shows the indentation.
karocann
@karocann
Oct 18 2016 17:41
@sjames1958gm OK, i'll try it.
Michael Davis
@mhdavis
Oct 18 2016 17:51
Does anyone have experience using the unsplash API?
Glen Westbrook
@glynnw
Oct 18 2016 17:53
I'm curious as to why most commercial sites use CSS media queries and classes to build a grid while also using flexbox in subsections like the menu bar? Is there a reason they use a CSS grid for layout instead?
JD Tadlock
@jdtdesigns
Oct 18 2016 17:53
still planning on using the api @mhdavis?
Michael Davis
@mhdavis
Oct 18 2016 17:53
@jdtdesigns lol yea im trying to see if its possible at this point
Glen Westbrook
@glynnw
Oct 18 2016 17:54
By commercial I mean sites made by big name dev shops.
Michael Davis
@mhdavis
Oct 18 2016 17:54
ultimately if it doesn't work out so be it, but I think it would be a good experience to see if i can learn to use the unsplash api
JD Tadlock
@jdtdesigns
Oct 18 2016 17:54
like i said, if you're building an app like unsplash.it, then using the api will be worth it
otherwise to just use some images, there's no good reason to use the api
@mhdavis
Glen Westbrook
@glynnw
Oct 18 2016 17:56
Maybe CSS grids are more predictable... so they don't use flexbox for layouts? Or is flexbox a little too buggy?
Michael Davis
@mhdavis
Oct 18 2016 17:57
@jdtdesigns I guess what im trying to do is create a javascript function that randomly generates a new picture of nature in the background if someone clicks the "get quote" button on my random quote generator
I figured the best way was through an API, but if you have any other suggestions im all ears
you previously mentioned using a random number generator, but one problem is that the link i found to the nature category doesn't use number values for different phots
Tyler Moeller
@TylerMoeller
Oct 18 2016 18:05

@mhdavis You can get random nature photos from unsplash with this code:

  var randomNum = Math.floor(Math.random() * 1e6);
  var url = 'https://source.unsplash.com/category/nature/1280x800?sig=' + randomNum;
  $('#myImageElement').attr('src', url);

Change the 1280x800 to whatever size you would like to use

Background on the ?sig= + randomNum: unsplash/unsplash-source-js#9
Greatwhite52
@Greatwhite52
Oct 18 2016 18:09
does anyone know how to make transport buttons for the portfoilio page?
Michael Davis
@mhdavis
Oct 18 2016 18:09
@TylerMoeller thanks let me see if i can figure out how to incorporate it into my JS
CamperBot
@camperbot
Oct 18 2016 18:09
mhdavis sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 888 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Greatwhite52
@Greatwhite52
Oct 18 2016 18:10
does anyone know how to make transport buttons for the portfoilio page?
Michael Davis
@mhdavis
Oct 18 2016 18:12
@TylerMoeller i have a question
here is my code pen for reference
Tyler Moeller
@TylerMoeller
Oct 18 2016 18:13
Sure
Michael Davis
@mhdavis
Oct 18 2016 18:13
so the way im trying to figure out how ot link the jquery function you sent me to a button
so when you press the getQuote button, it updates the CSS background to a new nature image
im trying to figure out the best way to do that
Tyler Moeller
@TylerMoeller
Oct 18 2016 18:15
I'll take a look now
Michael Davis
@mhdavis
Oct 18 2016 18:15
thanks
Tyler Moeller
@TylerMoeller
Oct 18 2016 18:17
@mhdavis You could create a new function like getPicture() and call that when the Get Quote button is clicked. Something like this:
function getNewPicture() {
  var randomNum = Math.floor(Math.random() * 1e6);
  var url = 'https://source.unsplash.com/category/nature/1280x800?sig=' + randomNum;
  $('body').css('background', 'url(' + url + ')');
}
Tanner Kiser
@Kiser3613
Oct 18 2016 18:17
@Greatwhite52 do you mean the social media buttons?
Tyler Moeller
@TylerMoeller
Oct 18 2016 18:21
@mhdavis Also, be sure to load your codepen over HTTP instead of HTTPS and update the url to forismatic to use HTTP. Forismatic does not support HTTPS.
Tanner Kiser
@Kiser3613
Oct 18 2016 18:24
@TylerMoeller what does the 1e6 do in the above code?
Tyler Moeller
@TylerMoeller
Oct 18 2016 18:25
@Kiser3613 It's shorthand for a 1000000
(1 with 6 0s after it)
Tanner Kiser
@Kiser3613
Oct 18 2016 18:25
@TylerMoeller Oh! Ok. Thanks!
CamperBot
@camperbot
Oct 18 2016 18:25
kiser3613 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 889 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Michael Davis
@mhdavis
Oct 18 2016 18:26
@TylerMoeller okay so the function works
but now i have another problem
Tyler Moeller
@TylerMoeller
Oct 18 2016 18:27
Okay, what's up?
Michael Davis
@mhdavis
Oct 18 2016 18:28
the formating isn't being updated in the css
Tyler Moeller
@TylerMoeller
Oct 18 2016 18:29
Which formatting?
Michael Davis
@mhdavis
Oct 18 2016 18:29
so it should be the top line of the css code in the body
the background-position and such in the css
Tyler Moeller
@TylerMoeller
Oct 18 2016 18:30
@mhdavis It is updating for me, not sure if I'm looking in the right place
Michael Davis
@mhdavis
Oct 18 2016 18:31
so it does update
the problem is if you look at the background, it has duplicates of the image
instead of the image taking up the whole screen
Tyler Moeller
@TylerMoeller
Oct 18 2016 18:32
@mhdavis I think you're overriding it with your unsplash code from before, remove lines 42-51
When I do that, the background no longer repeats
Michael Davis
@mhdavis
Oct 18 2016 18:33
oh my bad
I think i didn't save changes and sent you the older version of the pen
Tyler Moeller
@TylerMoeller
Oct 18 2016 18:34
@mhdavis Hmmm, let me look some more. Not sure why it's doing that.
Michael Davis
@mhdavis
Oct 18 2016 18:35
so you have to open up the pen in a fullsize window
and then click the get quote button
once it updates, it loses its formatting
so the problem is because when you run the function, it doesn't contain the parameters that are specified in the css
Tyler Moeller
@TylerMoeller
Oct 18 2016 18:36
Change background to background-image in your CSS and in the last line of the getNewPicture() function
That fixed it for me
Michael Davis
@mhdavis
Oct 18 2016 18:36
that fixed it
do you know why tho?
Tyler Moeller
@TylerMoeller
Oct 18 2016 18:37
background is a short-hand property that lets you specify the image, background color, size, position, etc all in one line.
I'd have to read some more, but I'm guessing that repeat is the default
Michael Davis
@mhdavis
Oct 18 2016 18:40
So i can tell you that the repeat is the default
I found out how to pull a random picture all in the CSS and the formatting in the background was the stuff that was shown in my background css
Tyler Moeller
@TylerMoeller
Oct 18 2016 18:41
Confirmed, if you do this: background: url("https://source.unsplash.com/category/nature/1600x900"); it's the same as doing:
  background-image: url("https://source.unsplash.com/category/nature/1600x900");
  background-color: transparent;
  background-position: 0% 0%;
  background-size: auto;
  background-repeat: repeat;
  background-attachment: scroll;
Greg
@Gregb1609
Oct 18 2016 18:41
Hi room can anyone help me with a design problem? Is more logical than anything else but is a part of the Wikipedia viewer challenge...
Michael Davis
@mhdavis
Oct 18 2016 18:42
@TylerMoeller okay i see what you mean
so you are just updating the initial value for image-background
Tyler Moeller
@TylerMoeller
Oct 18 2016 18:43
@mhdavis Yes, just explicitly setting what we want the image to be. The rest of your CSS works alongside
Michael Davis
@mhdavis
Oct 18 2016 18:43
If i wanted to make the image fade in should i do that via jquery
Tyler Moeller
@TylerMoeller
Oct 18 2016 18:44
@mhdavis Yeah, that makes it easier. .fadeIn(1500)
But, you're probably going to want to wait for the quote and image to be retrieved, and then fade in after that. You'll want to look at jQuery's .load() to help with that.
Michael Davis
@mhdavis
Oct 18 2016 18:46
do I do all of that in the get-quote function?
  $('.get-quote').on('click', function(event) {
    event.preventDefault();
    getNewQuote();
    getNewPicture();
  });
Tyler Moeller
@TylerMoeller
Oct 18 2016 18:47
@mhdavis I built something similar to what you're attempting a while back as a practice project. Feel free to check out how I did it: http://codepen.io/TylerMoeller/pen/oLKEyq
Michael Davis
@mhdavis
Oct 18 2016 18:47
actually i guess its better to do it in the get new picture
Spyrantis Theodoros
@thodorisanta
Oct 18 2016 18:47

http://codepen.io/oshikurou/pen/amjvBd?editors=1111

so this is my "SHOW THE LOCAL WEATHER" project. is there any place i can see all the weather attributes? like "sunny,clear.etc" so i can see what icons i need to use later.

Tyler Moeller
@TylerMoeller
Oct 18 2016 18:47
@mhdavis Yes, in the get picture function
@thodorisanta All the info is here: https://openweathermap.org/current
Peter Svedman
@petersvedman
Oct 18 2016 18:48
Yeah, @thodorisanta, its in the JSON
Tyler Moeller
@TylerMoeller
Oct 18 2016 18:49
Peter Svedman
@petersvedman
Oct 18 2016 18:49
Im using the Skycons :)
Greg
@Gregb1609
Oct 18 2016 18:49
@thodorisanta if you are using the google API they have some information in the documentation. also you could console.log your JSON object and check out what data has been sent so you know what to look for...
Spyrantis Theodoros
@thodorisanta
Oct 18 2016 18:49
@TylerMoeller i want them all together compined lol
Tyler Moeller
@TylerMoeller
Oct 18 2016 18:50
Skycons are much nicer than those images from openweathermap, I wish I had used those
Michael Davis
@mhdavis
Oct 18 2016 18:50
@TylerMoeller looking over your pen, super cool stuff
Peter Svedman
@petersvedman
Oct 18 2016 18:51
I can recommend the Postman google app. its AWESOME for API s
*chrome app of course
Spyrantis Theodoros
@thodorisanta
Oct 18 2016 18:52
uhmm...i need all the attributes of the weather api like "rain,clear,etc" so i can take icons and use a different one of every ocassion. and i cant find them
Tyler Moeller
@TylerMoeller
Oct 18 2016 18:52
Michael Davis
@mhdavis
Oct 18 2016 18:53
@TylerMoeller so im confused, in your code you use the .load method but is it a default method that you are overriding?
JD Tadlock
@jdtdesigns
Oct 18 2016 18:53
@mhdavis Just came back to see you had some help lol. Here's something i made to show you how to use the api url. http://jsbin.com/nadide/edit?js,output
Peter Svedman
@petersvedman
Oct 18 2016 18:54
I am having a hard time making CORS work in Codepen, anyone have pointers on how to deal with it? My weather app works just fine locally, but wont work on Codepen at all.
Tyler Moeller
@TylerMoeller
Oct 18 2016 18:54
@mhdavis No default method to override, it's like $.get()
Michael Davis
@mhdavis
Oct 18 2016 18:54
gotcha
Greg
@Gregb1609
Oct 18 2016 18:55
@petersvedman I used a https proxy to get round it. just paste it in front of the URL you use to call for the JSON object
Peter Svedman
@petersvedman
Oct 18 2016 18:55
Tried that, then I get the location of the AWS instance...of CodePen
Tyler Moeller
@TylerMoeller
Oct 18 2016 18:56
@petersvedman You'll probably need to add a callback or specify you want to use JSONP. If you have a link to the codepen, I can take a closer look
Peter Svedman
@petersvedman
Oct 18 2016 18:56
The nasty of it is that it works perfectly in the browser
I have a local version running smoothly
Sometimes i get the location of the proxy
Greg
@Gregb1609
Oct 18 2016 18:58
@petersvedman as @TylerMoeller could be a couple of things would be easier if can see your pen
Michael Davis
@mhdavis
Oct 18 2016 18:58
@jdtdesigns im looking over what you sent me right now. Super cool that you made that super quick
Greg
@Gregb1609
Oct 18 2016 18:59
@petersvedman or can post you a link to mine so you can have a look. I handled the get location before I called the getJSON method. you could also try that?
JD Tadlock
@jdtdesigns
Oct 18 2016 19:01
@mhdavis You get faster the more you do this stuff ;)
So, I swear I am going to kill something
Now its alla working
bangs head on keyboard
Except I get the weather for New York
Michael Davis
@mhdavis
Oct 18 2016 19:04
@jdtdesigns okay so i have a question, in the jsbin that you sent me you have a line where you have a function .load
Greg
@Gregb1609
Oct 18 2016 19:07
@petersvedman think it because of the method you defined for the location call. In it you make an ajax call trough a proxy asking to get a location. so the location comes from the proxy location. Try using the getgoelocation example that was given in the syllabus under ajax and json API's
Peter Svedman
@petersvedman
Oct 18 2016 19:08
Yeah, sure. Remove the proxy and it all fails
Here in my broweser a local copy runs
perfect
JD Tadlock
@jdtdesigns
Oct 18 2016 19:08
@mhdavis .load() just makes sure something is loaded before running some code
whether it be an element or ajax call
Peter Svedman
@petersvedman
Oct 18 2016 19:08
with proxy it works in codepen, but gives me wrong location, the proxys
getgeolocation, I have tried that, that works, but then the rest of it will go kabloooey
for some reason
JD Tadlock
@jdtdesigns
Oct 18 2016 19:10
So i'm creating an img in the DOM and setting it's source to the random image url. The .load() will make sure the element is fully loaded before running the code in the callback @mhdavis
Peter Svedman
@petersvedman
Oct 18 2016 19:10
maybe I just need to go sleep and redo it again tomorrow
Michael Davis
@mhdavis
Oct 18 2016 19:11
@jdtdesigns okay that makes sense, the part that was tripping me up was the fact that you didn't have a <img> in your HTML
JD Tadlock
@jdtdesigns
Oct 18 2016 19:11
@petersvedman Whatever loop you have going on, remove it so we can look at the code without it locking our browser. ;)
Peter Svedman
@petersvedman
Oct 18 2016 19:12
loop ?
JD Tadlock
@jdtdesigns
Oct 18 2016 19:12
@mhdavis Yeah, i'm not actually using the img, just creating one to test if the image is loaded. Then i remove it and set the background. Pretty cool trick i learned awhile back.
Peter Svedman
@petersvedman
Oct 18 2016 19:12
theres no loops
JD Tadlock
@jdtdesigns
Oct 18 2016 19:12
@petersvedman Something is locking my browser when viewing your pen
Peter Svedman
@petersvedman
Oct 18 2016 19:12
ok
So, something is broken well and good then
Michael Davis
@mhdavis
Oct 18 2016 19:14
@jdtdesigns i guess the problem im having is that I understand about 85% of how you are doing what you are doing in your code, but I'm having troubling applying it to my code given the fact that I started off with different initial conditions
Peter Svedman
@petersvedman
Oct 18 2016 19:14
This message was deleted
:sigh:
thanks @mhdavis @Gregb1609 @TylerMoeller
CamperBot
@camperbot
Oct 18 2016 19:16
petersvedman sends brownie points to @mhdavis and @gregb1609 and @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @mhdavis |http://www.freecodecamp.com/mhdavis
:cookie: 890 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
:cookie: 301 | @gregb1609 |http://www.freecodecamp.com/gregb1609
Peter Svedman
@petersvedman
Oct 18 2016 19:17
Im going to bed, gonna fix it tomorrow.
Michael Davis
@mhdavis
Oct 18 2016 19:17
@jdtdesigns im watching you change your code real quick
Peter Svedman
@petersvedman
Oct 18 2016 19:17
Thanks.
Michael Davis
@mhdavis
Oct 18 2016 19:17
@petersvedman sorry :( chances are we will be on tomorrow, so we can help then!
Greg
@Gregb1609
Oct 18 2016 19:17
@petersvedman good luck :+1:
Spyrantis Theodoros
@thodorisanta
Oct 18 2016 19:19

https://openweathermap.org/weather-conditions

how can i take the images from here? im talking about the "Icon list"

Greg
@Gregb1609
Oct 18 2016 19:19
ok can anyone out there give me a hand with a problem on the Wikipedia viewer. I want to run an onClick on items generated by a function. the pen link is https://codepen.io/Gregb1609/pen/dpORNQ/
Michael Davis
@mhdavis
Oct 18 2016 19:22
@jdtdesigns can you walk me through the nitty gritty of your load function and how it works
like i see you adding show and hide classes but im not 100% on those
JD Tadlock
@jdtdesigns
Oct 18 2016 19:23
@mhdavis I refactored it a little to add some smooth load animations.
Michael Davis
@mhdavis
Oct 18 2016 19:23
like I understand them from a common sense perspective, but how does jquery know the show and hide properities of these?
i see tha the animation is a lot smoother now
JD Tadlock
@jdtdesigns
Oct 18 2016 19:25
@mhdavis i commented it for you
Michael Davis
@mhdavis
Oct 18 2016 19:25
okay so im going over your code again
looking at the html and comparing it to mean
you have the quote id set to a div while I have quote and author set to a <p>
which shouldn't change anything jquery wise so long as the idea is the same
JD Tadlock
@jdtdesigns
Oct 18 2016 19:26
@mhdavis That's just the wrapper. I inject the html into that div with js
Michael Davis
@mhdavis
Oct 18 2016 19:27
oh i see what you mean
lol i see what you mean its just im not used to seeing it that way lol
JD Tadlock
@jdtdesigns
Oct 18 2016 19:29
@mhdavis You'll soon find a ton of situations when you inject html into wrappers.
It happens more frequently when working with backend data.
Michael Davis
@mhdavis
Oct 18 2016 19:30
its one of those things that when you see it you are like "oh that makes sense, i didn't think to use jquery like that"
I think the other part that was tripping me up is that you condensed all the code into one getQuote function, while I have 3 different functions
JD Tadlock
@jdtdesigns
Oct 18 2016 19:35
@mhdavis That's perfectly fine. For such a small amount of code, I'll typically condense. I can rewrite it to separate the actions though.
Michael Davis
@mhdavis
Oct 18 2016 19:35
No exactly, I see what you mean. It's just i look at my code and then compare it to yours to better understand how you are implementing jQuery
and how i can improve my own jQuery usage
Maksim Kulichenko
@makstheimba
Oct 18 2016 19:37
where can I find audio to include in my projects?
And how to do it on codepen?
Matthew Pengelly
@mcpengelly
Oct 18 2016 19:37
?
you mean an audio track to play on your sites?
or ..
Michael Davis
@mhdavis
Oct 18 2016 19:38
@jdtdesigns also on a side note, is JS procedural in how it reads? you need to define a function prior to calling it
Matthew Pengelly
@mcpengelly
Oct 18 2016 19:39
it reads line by line. if thats what you mean
Michael Davis
@mhdavis
Oct 18 2016 19:39
yea
Maksim Kulichenko
@makstheimba
Oct 18 2016 19:39
@mcpengelly I'm working on pomodoro clock. Where can I get an alarm sound or something like that?
Matthew Pengelly
@mcpengelly
Oct 18 2016 19:39
? youd get an audio file
and play it
JD Tadlock
@jdtdesigns
Oct 18 2016 19:39
@mhdavis I edited it to separate the functionality. ;)
Matthew Pengelly
@mcpengelly
Oct 18 2016 19:40
micheal davis it reads line by line but if you have a function that takes time to complete itll have a callback that is called when it completes and that wont necessarily complete before the next line is read
for example….
var savedResponse;
http.get('http://www.google.com/index.html', function(res) { // response takes time so this callback is triggered when it completes
  console.log(res); //logs whatever is at the location requested.
 savedResponse = res;
})
console.log(savedResponse); // NULL, cant count on savedResponse being assigned a value by the time this console log executes
Michael Davis
@mhdavis
Oct 18 2016 19:44
I see
Yea that is what I meant
Matthew Pengelly
@mcpengelly
Oct 18 2016 19:44
ie: the console log BELOW the http.get is run before the callback is triggered
also you cant return values from callback functions
well
ill demonstrate
Michael Davis
@mhdavis
Oct 18 2016 19:45
@jdtdesigns okay looking over your code real quick
Matthew Pengelly
@mcpengelly
Oct 18 2016 19:46
var responseValue = http.get('http://www.google.com/index.html', function(res) { // response takes time so this callback is triggered when it completes
  return res; 
})
console.log(responseValue); //also null, callback functions dont work this way.
Philipp Scholz
@philipp32
Oct 18 2016 20:05
@kirbyedy thank you
CamperBot
@camperbot
Oct 18 2016 20:05
philipp32 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1466 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
dhuddleston
@dhuddleston
Oct 18 2016 20:11
Hello everyone! I am working on updating my Twitch API project to work after the Client ID changes that were made. I'm not quite sure how to troubleshoot what's going on here, but the changes I've made to the code have broken the app. Here's the new code that I'm working on: http://codepen.io/dhuddleston/pen/KgyjXy?editors=0010
And here's the older code which worked before Twitch updated their API: http://codepen.io/dhuddleston/pen/dXoZrX?editors=0010
McKay Williams
@Gamer41up
Oct 18 2016 20:12
Hey, so i've been having issues with getting click events on all cells in my table created by javascript. I was hoping someone could help me out. It is only working on the last td clicked currently. Any help would be greatly appreciated. http://codepen.io/Gamer41up/pen/ZpqoVp
Maksim Kulichenko
@makstheimba
Oct 18 2016 20:16
@Gamer41up are you assigning click in a loop?
McKay Williams
@Gamer41up
Oct 18 2016 20:17
I am, currently it is under the cell creation. I tried it below, in some of the psuedo code as you can see outside the loop but I couldn't get it to work
Maksim Kulichenko
@makstheimba
Oct 18 2016 20:17
@Gamer41up It is happening because of closure. After the loop ends all td elements link to the same element
McKay Williams
@Gamer41up
Oct 18 2016 20:18
So how can I fix it?
Maksim Kulichenko
@makstheimba
Oct 18 2016 20:18
@Gamer41up try using "this" instead of "td" in click assigning function
'''
td.onclick = function() {
if (this.className == "t")
{
this.className = "t2";
this.innerHTML = "selected";
} else if (this.className == "t2")
{
this.className = "t";
this.innerHTML = "previous";
}
};
'''
CamperBot
@camperbot
Oct 18 2016 20:19
:bulb: to format code use backticks! ``` more info
McKay Williams
@Gamer41up
Oct 18 2016 20:19
i'll give it a try thanks a lot
Maksim Kulichenko
@makstheimba
Oct 18 2016 20:21
Spyrantis Theodoros
@thodorisanta
Oct 18 2016 20:23

http://codepen.io/oshikurou/pen/amjvBd?editors=1111

it prolly has a couple mistakes, but can you help me and tell me why my "switch" statement doest work? (js line31)

McKay Williams
@Gamer41up
Oct 18 2016 20:23
Yep, that was the issue, Many Many thanks mang. My teacher didn't even help me out on that one, so simple too.
Philipp Scholz
@philipp32
Oct 18 2016 20:24
http://codepen.io/thepeted/pen/LpPWWQ If you see his zipline picture, everything blurs up and a symbol and a clickable lnk appears. How do I create this? JS, CSS HTML? Can you show me a tutorial for that?
Rafael J. Rodriguez
@Rafase282
Oct 18 2016 20:30
Hello, what's the best way to position something so that it is the same rewarless of the width of the screen after 1024px?
Maksim Kulichenko
@makstheimba
Oct 18 2016 20:31
@thodorisanta use attr instead of css
@Rafase282 do you want the element to be the same size?
Rafael J. Rodriguez
@Rafase282
Oct 18 2016 20:32
@makstheimba yes
basically I want a max width of 1024
anything after that will just have extra empty space ont he sides
Maksim Kulichenko
@makstheimba
Oct 18 2016 20:33
@Rafase282 use media query
Rafael J. Rodriguez
@Rafase282
Oct 18 2016 20:34
I am
just trying to figure out the best way if margin-left/right or left/right
Maksim Kulichenko
@makstheimba
Oct 18 2016 20:34
@media (min-width: 1024px) {
    .element{
    width: 1024px;
}
do you want something like this?
Henry Cabello
@hacu9
Oct 18 2016 20:35
Anyone mind looking at this http://codepen.io/cabello986/pen/PGydJd?editors=1010 and telling me why the carrousel first 2 items get wrapped in a <a> tag?
Rafael J. Rodriguez
@Rafase282
Oct 18 2016 20:36
@makstheimba I'm trying to make it so the max width is 1024px and centered
so with different screen sizes it will be positioned the same
Henry Cabello
@hacu9
Oct 18 2016 20:38
Maybe this position:absolute; top:50%; left:50%; transform : translate(-50%, -50%); (?
Maksim Kulichenko
@makstheimba
Oct 18 2016 20:38
position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
@Rafase282 basically the same as @hacu9 said
Rafael J. Rodriguez
@Rafase282
Oct 18 2016 20:39
let me try
Henry Cabello
@hacu9
Oct 18 2016 20:39
someone check my pen :c
Maksim Kulichenko
@makstheimba
Oct 18 2016 20:40
@Rafase282 there are other technics, if you are interested you can read about 'em here https://css-tricks.com/centering-css-complete-guide/
Rafael J. Rodriguez
@Rafase282
Oct 18 2016 20:41
@hacu9 @makstheimba that was close, it does center the elements, i would have to see about centering the whole div
I'm trying to center the "content" which would have a width of 1024px with things already styled inside
Spyrantis Theodoros
@thodorisanta
Oct 18 2016 20:43
@makstheimba lol why it works with the attr and not with the css?
kat-mag
@kat-mag
Oct 18 2016 20:43
@hacu9 You're not closing <a> tag properly
Check your other tags as well, because they're a mess
Henry Cabello
@hacu9
Oct 18 2016 20:45
Theyre a mess? lol just found the error,been looking for it but with so much code n stuff i couldnt find it
Maksim Kulichenko
@makstheimba
Oct 18 2016 20:45
@thodorisanta because "src" is not a css property
Philipp Scholz
@philipp32
Oct 18 2016 20:45
http://codepen.io/philipp32/pen/WGazWg?editors=1100 When you hover over the picture the text appears as planned but it gets underlined in blue. How can I stop that from happening?
kat-mag
@kat-mag
Oct 18 2016 20:45
@hacu9 you did paste it into codepen, right? :D you see the places that are highlighted? those are the errrorsssss
like double </p>'s everywhere
Maksim Kulichenko
@makstheimba
Oct 18 2016 20:47
@philipp32 nothing appears for me
kat-mag
@kat-mag
Oct 18 2016 20:47
@philipp32 what's supposed to happen? :D
and btw. you DON'T close an <img> tag like that
Philipp Scholz
@philipp32
Oct 18 2016 20:48
@kat-mag @makstheimba when you hover the obama picture it should darken a bit and the text: "Barack H. Obama Tribute Page" should appear. However, it gets underlined in blue. I want to change that.
kat-mag
@kat-mag
Oct 18 2016 20:49
Oh, in full page view
doesn't work on editor view, right.
Philipp Scholz
@philipp32
Oct 18 2016 20:52
@kat-mag yes. So how can I get rid of this blue underlining? :)
kat-mag
@kat-mag
Oct 18 2016 20:52
@philipp32 the size of the background and the overall sizing of the page makes it hell to debug, wait a sec :D
or lower the res on this little hell ;D
Philipp Scholz
@philipp32
Oct 18 2016 20:53
@kat-mag Sorry about that. Still getting used to good coding. :) It's my first project.
Travis Boss
@travisboss
Oct 18 2016 20:54
@philipp32 try adding text-decoration: none;
Philipp Scholz
@philipp32
Oct 18 2016 20:55
@travisboss sadly doesn't work. I suspect it does it because the font is a link.
It should work. But I can't find the right place to add it in my css. When i add it to the text, nothing happens.
I tried to give the link a class and add it there. Nothing happened. :/
Travis Boss
@travisboss
Oct 18 2016 20:58
@philipp32 if the font has an underline you then its part of the font and not a decoration. if its from a link you can do a a {text-decoration: none;}
and put it inline but i woudl recommend doing it in CSS
adding the "a" will do this to all links
kat-mag
@kat-mag
Oct 18 2016 20:59
@philipp32 yeah, put it on a:hover
Travis Boss
@travisboss
Oct 18 2016 20:59
that was my next suggestion haha
kat-mag
@kat-mag
Oct 18 2016 20:59
but I need to tell you it works way better after I kicked your background out xD
Philipp Scholz
@philipp32
Oct 18 2016 20:59
Then I will do it right away. I will find a better one. :)
kat-mag
@kat-mag
Oct 18 2016 21:00
@philipp32 keep it, but lower the resolution on this one
Philipp Scholz
@philipp32
Oct 18 2016 21:00
which resolution do you recommend?
kat-mag
@kat-mag
Oct 18 2016 21:01
just size it down a bit. http://www.imageoptimizer.net/Pages/Home.aspx you can lower the quality there, I suppose
just pick & choose... Size it down till it is small (do not mean width&height) & still looks good
and you DON'T close <img> tag. You just do <img src="whateverrrrrr" alt="blah blah" /> ;p
Philipp Scholz
@philipp32
Oct 18 2016 21:05
@kat-mag Thank you. Both worked. :)
CamperBot
@camperbot
Oct 18 2016 21:05
philipp32 sends brownie points to @kat-mag :sparkles: :thumbsup: :sparkles:
:cookie: 381 | @kat-mag |http://www.freecodecamp.com/kat-mag
kat-mag
@kat-mag
Oct 18 2016 21:06
:thumbsup:
karocann
@karocann
Oct 18 2016 21:09
Have there been issues with the updated API call for twitch.tv? I've tried swapping out the urls and it doesn't seem to work.
Ahmed Abdelaziz
@Achmed4
Oct 18 2016 21:20
Hi guys, I'm done with the local weather app here it's https://achmed4.github.io/weather-app
need your reviews and screen shots of how it looks in your area, thanks :)
c0d0er
@c0d0er
Oct 18 2016 21:27
function updateInventory(arr1, arr2) {
    var len1=arr1.length;
    var len2=arr2.length;
    for(var i=0; i<len1; i++){
        for(var j=0; j<len2; j++){
            if(arr1[i].includes(arr2[j][1])){
            arr1[i][0]+=arr2[j][0];}
   else{arr1.push(arr2[j]);}// this should add only add [3, "Half-Eaten Apple"], [7, "Toothpaste"], why add all arr2[j]?
   }}
 return arr1;
}
updateInventory([[21, "Bowling Ball"], [2, "Dirty Sock"], [1, "Hair Pin"], [5, "Microphone"]], [[2, "Hair Pin"], [3, "Half-Eaten Apple"], [67, "Bowling Ball"], [7, "Toothpaste"]]);//should return [[88, "Bowling Ball"], [2, "Dirty Sock"], [3, "Hair Pin"], [3, "Half-Eaten Apple"], [5, "Microphone"], [7, "Toothpaste"]].
karocann
@karocann
Oct 18 2016 21:40

I am trying to find the channel stream using the updated API for twitch.tv. The updated API is https://wind-bow.hyperdev.space/twitch-api. Whenever I call it, it just hangs. I think I should be able to see the steam with:

https://wind-bow.hyperdev.space/twitch-api/users/freecodecamp/follows/channels

but nothing will display. Any ideas?

Abdelhalim Jean
@abdelhalimjean
Oct 18 2016 21:44
@Achmed4 it looks pretty cool but the News & Events and the Gallery are empty + the <article> tag has this light blue on top of i thought it was unnecessary and at the bottom the reddish image with the blurry edges was maybe a bit too much but i liked it it would be better if the article tag and whatever is beneath it had a darker background (image or color) and the text should be lighter, because for now the Note text is black on a dark background but Bravo looks great and before i forget it just gave me the low temp not the high i dont know if anyone else had this
Lee Gannon
@leein8bits
Oct 18 2016 21:45
@karocann I too am having issues with this.. just hangs there
karocann
@karocann
Oct 18 2016 21:46
@leein8bits I've been thinking of using an ajax call but I have to get a client ID for the header. I'm not sure its worth the effort to do the conversion.
Ahmed Abdelaziz
@Achmed4
Oct 18 2016 21:54
@Jean8x Thank you so much for your review, could you please refresh it and send me a screen shot, pls :smile:
CamperBot
@camperbot
Oct 18 2016 21:54
achmed4 sends brownie points to @jean8x :sparkles: :thumbsup: :sparkles:
:cookie: 19 | @jean8x |http://www.freecodecamp.com/jean8x
Abdelhalim Jean
@abdelhalimjean
Oct 18 2016 21:57
This message was deleted
Emanuele Antonelli
@Em-Ant
Oct 18 2016 21:58
@karocann the HyperDev app is down. I don't know what the problem is... Thanks for you patience.
CamperBot
@camperbot
Oct 18 2016 21:58
em-ant sends brownie points to @karocann :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @karocann |http://www.freecodecamp.com/karocann
karocann
@karocann
Oct 18 2016 22:00
@Em-Ant OK. time to close up shop....
Abdelhalim Jean
@abdelhalimjean
Oct 18 2016 22:01
Selection_010.png
@Achmed4 i highlighted the things i've noticed and you might want to edit
Ahmed Abdelaziz
@Achmed4
Oct 18 2016 22:03
@Jean8x Thanks, I don't know why the country and city names don't display! it seems like it doesn't complete loading
CamperBot
@camperbot
Oct 18 2016 22:03
achmed4 sends brownie points to @jean8x :sparkles: :thumbsup: :sparkles:
:warning: achmed4 already gave jean8x points
Abdelhalim Jean
@abdelhalimjean
Oct 18 2016 22:06
maybe because it takes 2 to 5 seconds in blue and then the results appear i thought i'll see the city name too and maybe a graphic representation of the location but if you want to continue with this app try making it load faster
Alex
@Sevohan
Oct 18 2016 22:06
Hey everyone, I finished my weather app recently and have moved on to the Wikipedia viewer. Right now it just feels like I hit a wall of info. Are there any suggested ways of going about figuring everything out? Thanks!
JD Tadlock
@jdtdesigns
Oct 18 2016 22:32
@c0d0er I see you're having some fun with advanced alg's :P
emamadordev
@emamadordev
Oct 18 2016 22:51
@jdtdesigns hey i'm done with the quote generator. Take a look: https://codepen.io/emmanuelamador/full/rrdZyX/
Jack Lyons
@JackEdwardLyons
Oct 18 2016 22:51
you're right thank you @sjames1958gm :)
CamperBot
@camperbot
Oct 18 2016 22:51
jackedwardlyons sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3886 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
tarkiz
@tarkiz
Oct 18 2016 22:56
Hello, I have a question. I am starting my first project the tribute page and it says to make a CodePen.io. I am not sure what that means exactly. I mean is there a certain format it needs to take or anything?
JD Tadlock
@jdtdesigns
Oct 18 2016 22:57
@emamador Nice bro. Now for an extra challenge, add a little code to your twitter link creation to truncate the quote if the href is over 140 characters long. Twitter limits your tweet to 140. Good luck. :)
emamadordev
@emamadordev
Oct 18 2016 22:59
@jdtdesigns aww ok, challenge accepted. insert cool face here with sunglasses lol
JD Tadlock
@jdtdesigns
Oct 18 2016 22:59
@tarkiz It means to go to http://codepen.io/ and create an account and make a pen. Then you will paste the pen url into the completion box when you're done.
tarkiz
@tarkiz
Oct 18 2016 23:00
@jdtdesigns so there is nothing in particular it is required to be beyond the couple things they list and a codepen.io is just a basic new pen?
Jay15
@INVALID000
Oct 18 2016 23:06
i need some helpz
how do i make a div take up 3 out of 4 cllums
and put an element in the last
i like really need help on this
Jeff Greenlee
@JeffGreenlee42
Oct 18 2016 23:11
@INVALID000 You need to look up the bootstrap use of the div class "row".
Looks something like this:
```
<div class="row">
<div class="col-lg-4">
<div class="media">
<a href="#" class="pull-left">
<img src="http://lorempixel.com/64/64"" alt="Image" >
</a>
<div class="media-body">
<h4 class="media-heading">Feature name</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, tenetur.</p>
</div>
</div>
</div>
god! this pasting code convention in Git is super annoying!!!
Jay15
@INVALID000
Oct 18 2016 23:15
@JeffGreenlee42 yes
Jeff Greenlee
@JeffGreenlee42
Oct 18 2016 23:15
```
<div class="row">
                    <div class="col-lg-4">
                        <div class="media">
                            <a href="#" class="pull-left">
                                <img src="http://lorempixel.com/64/64"" alt="Image" >
                            </a>
                            <div class="media-body">
                                <h4 class="media-heading">Feature name</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, tenetur.</p>
                            </div>
                        </div>
                    </div>
There!
Jay15
@INVALID000
Oct 18 2016 23:17
@JeffGreenlee42 yo u dud it! XD
@JeffGreenlee42 cool thnx bro
CamperBot
@camperbot
Oct 18 2016 23:17
invalid000 sends brownie points to @jeffgreenlee42 :sparkles: :thumbsup: :sparkles:
:cookie: 126 | @jeffgreenlee42 |http://www.freecodecamp.com/jeffgreenlee42
Jay15
@INVALID000
Oct 18 2016 23:17
is it the class pull-left that makes it take up the divs?
Jeff Greenlee
@JeffGreenlee42
Oct 18 2016 23:19
No.. "pull-left" just tells it to pull the subsequent columns to "pull" to the left... which makes it great for flexible viewing sized screens.
Jay15
@INVALID000
Oct 18 2016 23:19
oh nice @JeffGreenlee42
@JeffGreenlee42 ok but it looks like you have content in the divs to the left of the main div
@JeffGreenlee42 i wanted to make the first divs blank and then put the main element to the far right
Jeff Greenlee
@JeffGreenlee42
Oct 18 2016 23:20
If you study the Bootstrap system you will find that it has a standard layout of 12 columns.. so you divide your columns in multiples that make up 12. If you want 2 columns, you would make each column a "6".. 3 columns would be a "4".. etc..
Jay15
@INVALID000
Oct 18 2016 23:22
@JeffGreenlee42 k...... idk why but boot strap is very confusing for me :P
Jeff Greenlee
@JeffGreenlee42
Oct 18 2016 23:22
The bootstrap system isn't the only way to do it. the older way of doing was by setting a "float" so that it will exst beside another Div.
Jay15
@INVALID000
Oct 18 2016 23:23
and you would set that float to the width and height you wanted so it would push over the div?
Jeff Greenlee
@JeffGreenlee42
Oct 18 2016 23:23
I have been spending a hours in the last few days looking up bootstrap videos! There is huge amount of stuff out there.. Let me share with you one I found recently that really watch it closely!
Jay15
@INVALID000
Oct 18 2016 23:24
@JeffGreenlee42 nice that would help alot
@JeffGreenlee42 i mainly look for videos learn better that way
@JeffGreenlee42 question.. is there an option like you would do

<center>
<div>
<p> whatever</p>
</div>
</center>
is there like a
<left> </left> option
or a <right></right> etc...
Jeff Greenlee
@JeffGreenlee42
Oct 18 2016 23:27
Here.. This video show's off using Emmet, but I thought it was an excellent demonstration of Layout using Bootstrap 3!
Jay15
@INVALID000
Oct 18 2016 23:28
@JeffGreenlee42 noice thx man
CamperBot
@camperbot
Oct 18 2016 23:28
invalid000 sends brownie points to @jeffgreenlee42 :sparkles: :thumbsup: :sparkles:
:warning: invalid000 already gave jeffgreenlee42 points
Jeff Greenlee
@JeffGreenlee42
Oct 18 2016 23:30
It's actually 2 video's.. watch both! the second one really explores setting up multiple columns
Jay15
@INVALID000
Oct 18 2016 23:37
@JeffGreenlee42 noice im really interested in emmet now
@JeffGreenlee42 how hard is it to install
@JeffGreenlee42 i use visual studio code
Jeff Greenlee
@JeffGreenlee42
Oct 18 2016 23:47
Oh! hmmm.. I bet there is a way to incorporate Emmet into VS! You porbably would need to downlowd Emmet.. (its free). I have been trying out different code editors... Atom, Brackets, but now I think my favorite is turning out to be Sublime. It costs some money, but so far I think it works the best... There (and in Atom) you can just install a package and it works.
Jay15
@INVALID000
Oct 18 2016 23:48
@JeffGreenlee42 cool i sublime sounds familiar i will look at it
Jeff Greenlee
@JeffGreenlee42
Oct 18 2016 23:48
There is all kinds of other things to install.. My other favorite tool is Jade (now called Pug).. It's built into CodePen... and it makes writing html.. so much cleaner!
But you definitely want autocomplete tools and access to lots of snippets. .. which you can get in droves for some of these Text editing systems now. If nothing else... check out Atom! It's free, open source and improving all the time!
...And Atom is built by GitHub..
dhuddleston
@dhuddleston
Oct 18 2016 23:53
I'm sure that I've missed something simple here...But I appear to have broken my code: http://codepen.io/dhuddleston/pen/KgyjXy?editors=0010
Jeff Greenlee
@JeffGreenlee42
Oct 18 2016 23:53
The editor that the video I showed you is Emmet.. and I find I'm using it more than anything else.
I only see 3 lines of html! Is the rest all supposed to be done with JS?