These are chat archives for FreeCodeCamp/HelpFrontEnd

1st
Jan 2017
AndreiSerbanRegele
@AndreiSerbanRegele
Jan 01 2017 01:05
Is there a website where I can find all the classes that a div contains such as thumbnail, caption, etc ?
Aspen Hollyer
@ahollyer
Jan 01 2017 01:08
Hi guys! Is there any way to make the background image in my header responsive? Bootstrap kind of did the magic with my other images, so they look fine from a phone, but the background image doesn't resize and it looks weird. Here is the page: https://ahollyer.github.io/tribute-pages/ and also the codepen https://codepen.io/ahollyer/pen/xgKdmZ Thanks in advance!! P.S. Any other suggestions are welcome too. I'm sending this page to my grandma for her birthday in 2 weeks! :smile:
Sarah
@Shoyren
Jan 01 2017 01:08
@khaduch Thanks! I think I might have been plunking at the page while you looked at it which would explain some of the inconsistencies. I think I used '</br>' for a page break to create more space on top, but I could use padding at the top if need be instead. Also, figured out that I'm supposed to use 'text-align="center' instead (which explains why that tag didn't seem to do anything. As for the issues I was having with the div's, I realized I need to use offsets in bootstrap to create space instead of extra divs, so that's made things cleaner. My only issue now is that I'm trying to get the picture and the list to show up on the same row on larger screens. Unfortunately, there's a big fat gap in between them, and I can't figure out what's causing the issue. I'm attempting to see if there's something off because of all the shifting things around I did.
CamperBot
@camperbot
Jan 01 2017 01:08
shoyren sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2189 | @khaduch |http://www.freecodecamp.com/khaduch
Aspen Hollyer
@ahollyer
Jan 01 2017 01:20
@AndreiSerbanRegele I found this page really helpful, might be what you're looking for: http://www.w3schools.com/bootstrap/bootstrap_ref_all_classes.asp
AndreiSerbanRegele
@AndreiSerbanRegele
Jan 01 2017 01:21
Wow thank you so much
@ahollyer Wow thank you so much
CamperBot
@camperbot
Jan 01 2017 01:22
andreiserbanregele sends brownie points to @ahollyer :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @ahollyer |http://www.freecodecamp.com/ahollyer
Aspen Hollyer
@ahollyer
Jan 01 2017 01:22
No prob :)
Alexander Huynh
@caesarsalad93
Jan 01 2017 01:29
Hey guys, when using bootstrap is it necessary to place every element inside a row?
For example, if I'm just using putting in a <hr>, is there any benefit ti putting it inside a row?
tommy
@tommygebru
Jan 01 2017 01:35
Happy new years everyone, looking forward to the live stream tonight :)
also followed by a :100: days of code
:sparkles: :sparkles: :sparkles: :sparkles: :sparkles: :sparkles: :sparkles: :sparkles: :sparkles: :sparkles:
Palmer
@nickpalmer789
Jan 01 2017 01:52
I'm having trouble with querySelector returning null for my project. Any ideas?
Ken Haduch
@khaduch
Jan 01 2017 02:02
@caesarsalad93 - I don't think that you need to put everything in a row div - I think that row is for use with the grid. You can mix and match non-Bootstrap HTML and CSS with Bootstrap and HTML that is using Bootstrap classes, as you need, as long as you are aware of any conflicts or interactions between the two.
tommy
@tommygebru
Jan 01 2017 02:19
@nickpalmer789 you probably want to use element.querySelector instead of document.querySelector
Ilyes
@ilyes-bch
Jan 01 2017 02:24
@nickpalmer789 you tried console.log to see what it gives as an output .. I personnally use jQuery everytime I want to select items
Jack Lyons
@JackEdwardLyons
Jan 01 2017 02:56
hey guys, im trying to work with ES6 classes but am getting a type error when referring to a method using "this"... any ideas why?
// I'm unsure about whether to write in standard object oriented MVC, or using ES6 classes?
class Simon {


  init() {
    const tiles = document.querySelectorAll('button.quarter').forEach(tile => tile.addEventListener('click', this.onTileClick));
    let hasGameStarted = false,
        gameSequence   = {
          userSequence: [],
          buzzSequence: []
        },
        gameMode       = {
          normal: false,
          strict: false
        };
  }

  onTileClick(e) {
    this.animateTiles(e); 
  }

  animateTiles(e) {
    const tile = e.target;
    // add playing class to animate the tile
    tile.classList.add("playing");

    const audio = tile.children[0];
    // reset audio play on each click
    audio.currentTime = 0;
    audio.play();
    // remove playing class to maintain original state
    tile.addEventListener("transitionend", () => { tile.classList.remove("playing"); });
  }
}

document.addEventListener('DOMContentLoaded', function() {
  var simon = new Simon();
  simon.init();
});
Greg Duncan
@GregatGit
Jan 01 2017 03:13
@JackEdwardLyons Hey Jack - best way to figure it out is put a debugger; on the line before - then while it's paused see what this is
Jack Lyons
@JackEdwardLyons
Jan 01 2017 03:14
hey greg
yeah ill try that, thanks
ahh ok
so i think the this is referring to the DOM element (the button)
but i'm not sure how to refer to the method without using "this"? @GregatGit
Greg Duncan
@GregatGit
Jan 01 2017 03:19
what exactly are you trying to do?
Jack Lyons
@JackEdwardLyons
Jan 01 2017 03:20
animate the tile on click
but use an onClick method, in order to extend the functionality further down the line @GregatGit
Greg Duncan
@GregatGit
Jan 01 2017 03:20
are you doing this in github or codepeb?
Jack Lyons
@JackEdwardLyons
Jan 01 2017 03:20
gomix
Greg Duncan
@GregatGit
Jan 01 2017 03:22
i'm there now
Jack Lyons
@JackEdwardLyons
Jan 01 2017 03:22
k
Greg Duncan
@GregatGit
Jan 01 2017 03:23
is tiles an array?
Jack Lyons
@JackEdwardLyons
Jan 01 2017 03:24
its a node list of each button
you can use forEach on node lists @GregatGit
Greg Duncan
@GregatGit
Jan 01 2017 03:24
so - onTileClick is the this in questiong
Jack Lyons
@JackEdwardLyons
Jan 01 2017 03:24
yeah
it's referring to the correct button (ie) e.target
but not referring to the animateTiles function
Greg Duncan
@GregatGit
Jan 01 2017 03:27
typo
Jack Lyons
@JackEdwardLyons
Jan 01 2017 03:27
where?
Greg Duncan
@GregatGit
Jan 01 2017 03:27
sorry I miss read
what is animalteTile wrapped in?
Jack Lyons
@JackEdwardLyons
Jan 01 2017 03:29
what do you mean?
the onTileClick function is where it is being called
Greg Duncan
@GregatGit
Jan 01 2017 03:29
why do you need this to call it?
try calling it with out this
Jack Lyons
@JackEdwardLyons
Jan 01 2017 03:29
because i want to add more functionality to the onTileClick function later
nah
because then i would need to attach multiple click event handlers
id prefer to just attach one, but call the methods inside it
because down the line... I need to do more than just animating the tiles
Greg Duncan
@GregatGit
Jan 01 2017 03:32
seems to work without that error now
Jack Lyons
@JackEdwardLyons
Jan 01 2017 03:33
thats just because im referencing "animateTiles"
which is fine... but doesnt lend itself to expanding out the functionality
Cristian Polycarpou
@OmniPoly
Jan 01 2017 03:34
HI everyone!
How do i add an iimage via HTML from my local desktop?
Jack Lyons
@JackEdwardLyons
Jan 01 2017 03:35
using "src" @OmniPoly
if your file is located in an img folder
Cristian Polycarpou
@OmniPoly
Jan 01 2017 03:35
but what path do i use from a mac desktop
@JackEdwardLyons
Jack Lyons
@JackEdwardLyons
Jan 01 2017 03:36
you would write <img src="/img/myimage.jpg"
oh ok
Cristian Polycarpou
@OmniPoly
Jan 01 2017 03:37
this dosent work
do i have to upload the image to the net? @JackEdwardLyons
Jack Lyons
@JackEdwardLyons
Jan 01 2017 03:37
maybe just Desktop/img
Cristian Polycarpou
@OmniPoly
Jan 01 2017 03:37
or is it
Jack Lyons
@JackEdwardLyons
Jan 01 2017 03:37
well, if you are using codepen, then yes
if youre developing locally, then npo
no
Cristian Polycarpou
@OmniPoly
Jan 01 2017 03:37
tried that
didnt work
how would you do it?
@JackEdwardLyons
Jack Lyons
@JackEdwardLyons
Jan 01 2017 03:39
i would put my images in a folder, my structure would look like this
index.html
 -- img
 -- css
 -- js

// To reference an image in my code
<img src="/img/my-image.jpg">
@OmniPoly
Cristian Polycarpou
@OmniPoly
Jan 01 2017 03:39
@JackEdwardLyons HOw are you telling it the imge is on your desktop?
Jack Lyons
@JackEdwardLyons
Jan 01 2017 03:39
i would put the image in a folder?
i would have a folder for images, css, js
etc
Cristian Polycarpou
@OmniPoly
Jan 01 2017 03:41
are you on a mac or windows?
@JackEdwardLyons
Jack Lyons
@JackEdwardLyons
Jan 01 2017 03:42
i use both... if you really want to see the "absolute" path of something simply click on the "image" and do this “cmd+i”
that will display info about the item
then, in general, you will see "Where" and that shows the absolute file path
@OmniPoly
Cristian Polycarpou
@OmniPoly
Jan 01 2017 03:44
@JackEdwardLyons iv done this but doesnt work <img src="/Users/cristian/Desktop/images/IMG_3513.jpg">
Jack Lyons
@JackEdwardLyons
Jan 01 2017 03:44
well, where is your index file located?
@OmniPoly
because the image path is relative to the location of the index.html
Cristian Polycarpou
@OmniPoly
Jan 01 2017 03:45
im using Codepen
Jack Lyons
@JackEdwardLyons
Jan 01 2017 03:45
ahhhhhhhhh okkkk @OmniPoly hahaha
Cristian Polycarpou
@OmniPoly
Jan 01 2017 03:45
@JackEdwardLyons
lol
im a novice man
Jack Lyons
@JackEdwardLyons
Jan 01 2017 03:45
you need to have the asset loaded on to the web
Cristian Polycarpou
@OmniPoly
Jan 01 2017 03:45
where on the web? on codepen?
what are you using to write code?
Jack Lyons
@JackEdwardLyons
Jan 01 2017 03:45
codepen only allows you to load assets if you are a PRO memeber
you can load assets there
but make sure when you make lots of changes to push your work on to github, which gomix make it pretty easy to do
@OmniPoly
Cristian Polycarpou
@OmniPoly
Jan 01 2017 03:47
yeah im a real novice, why push it on github?
@JackEdwardLyons
Jack Lyons
@JackEdwardLyons
Jan 01 2017 03:49
to track code changes, because when you make lots of changes and perhaps make a mistake, you might want to go back to an earlier version
which happens a lot
it's called "version control"
Cristian Polycarpou
@OmniPoly
Jan 01 2017 03:49
@JackEdwardLyons thanks
CamperBot
@camperbot
Jan 01 2017 03:50
omnipoly sends brownie points to @jackedwardlyons :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @jackedwardlyons |http://www.freecodecamp.com/jackedwardlyons
Jack Lyons
@JackEdwardLyons
Jan 01 2017 03:50
you're welcome, it's easy to setup a github account, have you done that @OmniPoly ?
Amit Patel
@AmitP88
Jan 01 2017 03:56
hey guys, I need some help fixing the slideshow on my client's site: https://amitp88.github.io/Khmer-Family-Cafe/ (i'm using flickity for the slider). I tried uploading my code on codepen but it didn't work well
kevinliu6102
@kevinliu6102
Jan 01 2017 04:15
Hi all, I'm working on the weather project right now, but it doesn't seem like my getJSON is accepting the link i'm passing in. Can anyone help take a look at it?
Greg Duncan
@GregatGit
Jan 01 2017 04:23
https cannot look up a http api
like that
but...getCurrentPosition has to be done over https - so you could try http://ip-api.com/json
this is a common problem for this project when using chrome
you're pen might work in IE or firefox
DarylKnapp
@DarylKnapp
Jan 01 2017 05:29

Could I ask for some help? if i want to make a space to put in a "Pull Quote" how do i go about doing that?

Im just keep on getting its looking like this

https://codepen.io/DarylKnapp/pen/BpBWgW

Nitin Chandran Nair
@NitinNair89
Jan 01 2017 06:04
@DarylKnapp Can you be more specific please?
DarylKnapp
@DarylKnapp
Jan 01 2017 06:12
@NitinNair89 If you have a look http://i68.tinypic.com/4k9rn9.png that is called a "Pull Quote" how can i make mine like that?
Nitin Chandran Nair
@NitinNair89
Jan 01 2017 06:14
it's a <blockquote> html tag
:smiley:
Nitin Chandran Nair
@NitinNair89
Jan 01 2017 06:46
@DarylKnapp
c0d0er
@c0d0er
Jan 01 2017 07:02
@toianw thanks!
CamperBot
@camperbot
Jan 01 2017 07:02
c0d0er sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
:cookie: 476 | @toianw |http://www.freecodecamp.com/toianw
C
@engineerwithoutfear
Jan 01 2017 07:17
@DarylKnapp Yep, that's a blockquote: http://www.w3schools.com/bootstrap/bootstrap_typography.asp <--more on how bootstrap styles the blockquote tag and similar text-y bits
mohamedsaieed
@mohamedsaieed
Jan 01 2017 07:33
hey whats wrong with this
Nitin Chandran Nair
@NitinNair89
Jan 01 2017 07:35
@mohamedsaieed TitleCaseOver=9000; TitleCaseOver = camelCase ;
make it camelcase
mohamedsaieed
@mohamedsaieed
Jan 01 2017 07:37
@NitinNair89 i write this code but its wrong
Nitin Chandran Nair
@NitinNair89
Jan 01 2017 07:38

The below tests are negative for your solution @mohamedsaieed :

titleCaseOver is defined and has a value of 9000
studlyCapVar should use camelCase in both declaration and assignment sections.
titleCaseOver should use camelCase in both declaration and assignment sections.

Fix those and you're good! :)

kevinliu6102
@kevinliu6102
Jan 01 2017 07:42
sorry i'm responding late but in regards to the response from @GregatGit ~3.5 hours ago, is there any way to use getcurrentlocation over https on chrome?
rather than using the api
Greg Duncan
@GregatGit
Jan 01 2017 08:30
@kevinliu6102 google CORS - there are work arounds
Venkatesh Thapan
@thenerdyouknow
Jan 01 2017 08:44
$(document).ready(function(){
 var obj = jQuery.parseJSON('https://geoip-db.com/json/geoip.php?jsonp=?');
  console.log(obj);
What is wrong with this parse?
Mateusz Kadlubowski
@xeho91
Jan 01 2017 09:02
@thenerdyouknow You missed... something small. :(
@thenerdyouknow a small symbol, something to close your function
protokol0
@mandaputtra
Jan 01 2017 09:04
@thenerdyouknow }
Mateusz Kadlubowski
@xeho91
Jan 01 2017 09:04
@mandaputra8 ... you ruined it :-1:
protokol0
@mandaputtra
Jan 01 2017 09:05
@xeho91 😢
Venkatesh Thapan
@thenerdyouknow
Jan 01 2017 09:33
function getWeather(){
  var frr= "api.openweathermap.org/data/2.5/weather?appid=31797dc8ef65f0e4021e348e09a23c11&q=";
    var lol = frr+city;

    $.getJSON(lol)
    .done(function(weather1){
      $("#showWeather").html(weather1.temp);
    });
  }
q= should be equal to city of user which is stored in the variable city so why is this not working?
Sorin Ruse
@sorinr
Jan 01 2017 09:35
@thenerdyouknow can you post the link to your pen?
Venkatesh Thapan
@thenerdyouknow
Jan 01 2017 09:36
Sorin Ruse
@sorinr
Jan 01 2017 09:41
@thenerdyouknow you have some errors in there. just a sec
Salim Hamra
@hamrasalim
Jan 01 2017 09:43
hello everyone, quick question. im completely lost in the build a personal portfolio webpage and I want to know if everything i supposedly learned from basics of html, css and jquery is enough to build such a complex project?
if so, id go back and practice again before moving forward with this project
I am completely lost in the JS part and have no idea on how to move forward, any suggestions?
the internet is full of ready codes, but id like to build this on from scratch all by myself
Salim Hamra
@hamrasalim
Jan 01 2017 09:53
anyone..?
Sorin Ruse
@sorinr
Jan 01 2017 09:56
@thenerdyouknow here how can you do it: weather
Venkatesh Thapan
@thenerdyouknow
Jan 01 2017 09:56
First make the biggest div that you need. Read bootstrap documentation. @hamrasalim
@hamrasalim Then make the next one for the photo.
Then one for the data.
@hamrasalim Add the photo after that. Use google every step of the way.
You got this!
@sorinr Found out the problem.
Thanks.
CamperBot
@camperbot
Jan 01 2017 10:00
thenerdyouknow sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1021 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 01 2017 10:01
@thenerdyouknow :+1:
Dipal Gudhka
@dipalgudhka
Jan 01 2017 11:05
hello guys, I'm stuck on quote machine, tweeting
Salim Hamra
@hamrasalim
Jan 01 2017 11:06
@thenerdyouknow alright, thanks!
CamperBot
@camperbot
Jan 01 2017 11:06
hamrasalim sends brownie points to @thenerdyouknow :sparkles: :thumbsup: :sparkles:
:cookie: 265 | @thenerdyouknow |http://www.freecodecamp.com/thenerdyouknow
Dipal Gudhka
@dipalgudhka
Jan 01 2017 11:06
Can someone help me please
Sorin Ruse
@sorinr
Jan 01 2017 11:07
@dipalgudhka can u post your codepen link?
Dipal Gudhka
@dipalgudhka
Jan 01 2017 11:08
@sorinr I dont know how to go about with tweeting
Varun Kumar
@heysadboy
Jan 01 2017 11:10
hey
I have a problem... I want to bring the image having logo-main class in the center
http://codepen.io/sirens/pen/BpBQKd
can anyone help
Dipal Gudhka
@dipalgudhka
Jan 01 2017 11:11
@heysadboy you could use <center></center>
Sorin Ruse
@sorinr
Jan 01 2017 11:13
@dipalgudhka when you get the quote you should also update your tweet href like" https://twitter.com/intent/tweet?text=here_you add the text u want to pass "
Dipal Gudhka
@dipalgudhka
Jan 01 2017 11:15
@sorinr yes, so how do I give it that. I mean each time it will be different so it has to be done with a variable. How do I add that variable after text=?
Varun Kumar
@heysadboy
Jan 01 2017 11:19
@dipalgudhka I tried it but it doesn't seems to be working.. can you look at the codepen please
Dipal Gudhka
@dipalgudhka
Jan 01 2017 11:23
@heysadboy why have you used Images/logo1.png to find image?
Varun Kumar
@heysadboy
Jan 01 2017 11:26
@dipalgudhka I'm doing it offline for now, it's just the local address
Sorin Ruse
@sorinr
Jan 01 2017 11:31
@dipalgudhka $(my_tweet_btn).attr('href', 'https.......')
Dipal Gudhka
@dipalgudhka
Jan 01 2017 11:58
@sorinr Thanks :+1:
CamperBot
@camperbot
Jan 01 2017 11:58
:star2: 1022 | @sorinr |http://www.freecodecamp.com/sorinr
dipalgudhka sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Ken
@kenbbetter
Jan 01 2017 14:10
test
Venkatesh Thapan
@thenerdyouknow
Jan 01 2017 14:30
So if I call a function in Javascript then the values defined in the beginning get updated according to the actions carried out in the function, right?
Nitin Chandran Nair
@NitinNair89
Jan 01 2017 14:33
yes..
Venkatesh Thapan
@thenerdyouknow
Jan 01 2017 14:40
then why won't fahrenheit update in this?
http://codepen.io/thenerdyouknow/pen/dNbzZL
The first one wasn't saved. Sorry.
Venkatesh Thapan
@thenerdyouknow
Jan 01 2017 14:53
Figured it out.
Nitin Chandran Nair
@NitinNair89
Jan 01 2017 14:55
ok
Sorin Ruse
@sorinr
Jan 01 2017 15:01
@thenerdyouknow you just have to make it toggle between C an F
kbakermemphis
@kbakermemphis
Jan 01 2017 17:00
Hello all, I am on the personal portfolio challenge and I cannot figure out why some text moves depending on the size of the screen. Anyone care to take a look?

In case anyone comes on here later, this is a screen recording of whats happening. The text in question is the "javascript | jQuery..." part. https://youtu.be/P9joky5Vp1I

http://codepen.io/kbakermemphis/pen/EZYWbp/

minakasiin
@minakasiin
Jan 01 2017 17:06
well you do have container-fluid, and that makes it react to screen size
Venkatesh Thapan
@thenerdyouknow
Jan 01 2017 17:40
$("#fah").click(function(){
     if(toggle1= celsius){
         $("#showWeather").html(fahrenheit+" F");
          toggle1=fahrenheit;

     }else if(toggle1=fahrenheit){
        $("#showWeather").html(celsius+" C");
    toggle1=celsius;

     }

   });
Why won't this toggle between celsius and fahrenheit?
It changes once but then gets stuck in F.
Won't change back to Celsius.
Sorin Ruse
@sorinr
Jan 01 2017 17:47
@thenerdyouknow because toggle1 var is probably visible to only that function
Phillip Troutman
@troutman21
Jan 01 2017 17:50
Hey everyone. Happy New Year ! can anyone take a quick look at my portfolio project and tell me if there is an easy way to make all 3 thumbnails the same size ? for whatever reason my "tribute project" thumb nail is shorter. Do i just adjust the height ? I feel like there is a way to make them all uniform... http://codepen.io/Troutman21/pen/PbrQqE?editors=1100
Venkatesh Thapan
@thenerdyouknow
Jan 01 2017 18:11
@sorinr Makes sense.
But then I don't know how to update the value without it.
Liviu Iancu
@LiviuLvu
Jan 01 2017 18:14
@troutman21 Here are 2 options: 1) The div adapted to the image proportions. Change the image to be taller. 2) Make the place holders shorter to fit the already existing image height. Depends on visual taste which one you preffer. Just use all images with identical proportions. ps. your image http://oi65.tinypic.com/2cmkap4.jpg is huge, compared to the size in layout.
Sorin Ruse
@sorinr
Jan 01 2017 18:16
@thenerdyouknow you can make the var global to be available in any functions you wanna use it
Venkatesh Thapan
@thenerdyouknow
Jan 01 2017 18:17
@sorinr Yeah it's global but when I update it in the if loop it won't work.
Changes to f and gets stuck.
I made it a different function and called it. Still nothing.
Sorin Ruse
@sorinr
Jan 01 2017 18:24
@thenerdyouknow toggle1=fahrenheit its wrong. it means toggle1 var its equal to fahrenheit var but fahrenheight its not a var its aq string
Venkatesh Thapan
@thenerdyouknow
Jan 01 2017 18:35
@sorinr I have declared fahrenheit to be a var=0 in the beginning.
@sorinr Managed to use ternary operator and getWeather() function to get it done.
Thanks.
Sorin Ruse
@sorinr
Jan 01 2017 18:45
  • @thenerdyouknow :+1:
Tyler Moeller
@TylerMoeller
Jan 01 2017 19:48
@kbakermemphis Since you're using col-md-12 in the previous div, it applies float: left to the div at sizes above 991px. (bootstrap's md size). When you decrease the screen size below that, the float is no longer applied. It's a bit complicated to explain here in chat, but check out the difference between display: inline, display: inline-block, and float. This might be a good starting point with some links to help: http://stackoverflow.com/questions/27511533/difference-between-display-block-float-left-vs-display-inline-block-flo
Also, to get a better idea of what's going on behind the scenes, take a look at the bootstrap css file: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css
Philipp Scholz
@philipp32
Jan 01 2017 19:57
Hey guys, I have trouble builing my Random Quote Generator. Can someone please check the JS in my pen and tell me what's wrong? My button is not working properly.
https://codepen.io/philipp32/full/KNLRPZ/
Sarah
@Shoyren
Jan 01 2017 20:00
EDIT: Nevermind, fixed the issue.
Tyler Moeller
@TylerMoeller
Jan 01 2017 20:00
@philipp32 To help with debugging issues like this, bring up your Browser's developer console. It's currently giving the error: Uncaught ReferenceError: $ is not defined which means you need to add jQuery.
Philipp Scholz
@philipp32
Jan 01 2017 20:02
@TylerMoeller It won't do anything on pressing SPACE but it will display one quote and not a new one once I click the button again.
I did add jQuery now. :)
Tyler Moeller
@TylerMoeller
Jan 01 2017 20:04
@philipp32 The random number needs to be generated every time you hit the space bar or click the button. The way you have it set up now, it only gets calculated once - when the page is loaded.
Philipp Scholz
@philipp32
Jan 01 2017 20:06
@TylerMoeller Thank you very much! That did the trick.
CamperBot
@camperbot
Jan 01 2017 20:06
philipp32 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1238 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 01 2017 20:06
Yw :)
Philipp Scholz
@philipp32
Jan 01 2017 20:09
@TylerMoeller https://codepen.io/philipp32/full/KNLRPZ/ When I hit space it seems to execute my function twice? Why could that be?
Tyler Moeller
@TylerMoeller
Jan 01 2017 20:14
@philipp32 It doesn't seem to be executing twice for me. Just a thought, I'd have to investigate, but the keypress event may be registering twice - once on keydown and again on keyup. What happens if you change keypress to keyup?
Philipp Scholz
@philipp32
Jan 01 2017 20:16
@TylerMoeller keyup makes it twice but keydown does the trick. :)
Tyler Moeller
@TylerMoeller
Jan 01 2017 20:16
Weird - might want to look into that further lol
Philipp Scholz
@philipp32
Jan 01 2017 20:17
Maybe you can help me with my last problem. Then I am gonna leave you alone. :P The output goes in the box but it won't take the prescribed font-size but it will take the prescribed font-family.
Tyler Moeller
@TylerMoeller
Jan 01 2017 20:18
@philipp32 font sizes require a unit
Philipp Scholz
@philipp32
Jan 01 2017 20:19
@TylerMoeller -.- Thank you
CamperBot
@camperbot
Jan 01 2017 20:19
philipp32 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: philipp32 already gave tylermoeller points
Philipp Scholz
@philipp32
Jan 01 2017 20:19
Of course I knew that.
Tyler Moeller
@TylerMoeller
Jan 01 2017 20:19
Good luck with the rest of the project :)
Philipp Scholz
@philipp32
Jan 01 2017 20:19
It's the small things. Now I know what to look for in the future. Thank you to all those guys who helped me.
ahrichardson
@ahrichardson
Jan 01 2017 20:23

Hello chat, I'm working on my tribute page and I'm really struggling with reordering elements on mobile devices. I have two columns in the desktop version, which I'm pretty happy with, each with a couple boxes that are full-width within each column. On mobile, I want only to change the order of that title box which is nested in that right column. When I first accessed from mobile it displays far down the page, as each element on the left column comes as a unit first. I've tried to play around with this with push and pull, but the result is this: http://codepen.io/ahrichardson/pen/ggYvgm

That pulls up the entire right column, as I understand it would, but I really only want to know how to get at pulling up with title box. I'm not sure I'm explaining this well, so let me know and I'll try to clarify.

Edin
@sombrerox
Jan 01 2017 20:23
Hello everyone, can you please just open this link, it gives me 2$ that I can swap for steam vouchers: http://www.steamdigitalgift.com/7eaOgem
Tyler Moeller
@TylerMoeller
Jan 01 2017 20:25
@sombrerox good way to get a ban here - best to delete that...
Edin
@sombrerox
Jan 01 2017 20:26
@TylerMoeller why ban, I just need 4 more clicks to redeem 20$
Ryan Schumm
@2667schummr
Jan 01 2017 20:30
Hey guys. I have been looking at the basic front end development projects, particularly the portfolio page. Is this supposed to be completed before the javascript challenges? It doesn't seem like I have the tools necessary to program buttons to respond to input yet.
Tyler Moeller
@TylerMoeller
Jan 01 2017 20:31
@ahrichardson Not sure I understand - what order are you expecting on mobile?
@2667schummr I think the idea is to make the portfolio a work in progress, so you can go back and add functionality to it as you learn more. It will likely be the last thing you update, since you'll want to have your portfolio images all included once you finish all the other projects.
ahrichardson
@ahrichardson
Jan 01 2017 20:32
@TylerMoeller Image; Title Box ("Carrie Fisher"...); "Drowned in moonlight..."; "Life and Works..."
That make sense?
And that's less "expecting" than "wanting." I get the logic of why it's turning out how it is, just stumped about how to go about what I'm trying to do.
Tyler Moeller
@TylerMoeller
Jan 01 2017 20:34
@ahrichardson Okay, I'm still grieving :cry: but I'll take a closer look. Glad 2016 is behind us
ahrichardson
@ahrichardson
Jan 01 2017 20:38
@TylerMoeller Yeah, it's been a long year. But yes, I'll be around. Cheers.
Victor
@VictorHall
Jan 01 2017 20:45
Hi, will someone give me a hand with this "Everything be true" coding challenge ?
Tom
@moT01
Jan 01 2017 20:47
@VictorHall whats the problem?
Victor
@VictorHall
Jan 01 2017 20:47
thanks @moT01
CamperBot
@camperbot
Jan 01 2017 20:47
victorhall sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 445 | @mot01 |http://www.freecodecamp.com/mot01
my first and 4 to last answers do not return correctly
this object is supposed to return true but instead it returns false
truthCheck([{"user": "Tinky-Winky", "sex": "male"}, {"user": "Dipsy", "sex": "male"}, {"user": "Laa-Laa", "sex": "female"}, {"user": "Po", "sex": "female"}], "sex")
karam
@kmelkon
Jan 01 2017 20:52
Hello guys, anyone know why the forismatic api isn't working for me?
$.getJSON("http://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en", function(json) {
      console.log(json);
    });
Tyler Moeller
@TylerMoeller
Jan 01 2017 20:52
@ahrichardson I don't think it's possible to get the "Drowned in Moonlight" section inserted between the Title Box and "Life and Works" sections with pull/push classes. You'll have to duplicate the HTML, I believe, and use the responsive utility classes in bootstrap. http://getbootstrap.com/css/#responsive-utilities-classes
This lets you hide certain sections on some screen sizes while showing it on others.
Victor
@VictorHall
Jan 01 2017 20:55
@moT01
did you receive my reply ?
Tom
@moT01
Jan 01 2017 20:56
i see it, ...it looks like youre real close
Victor
@VictorHall
Jan 01 2017 20:56
If you didn't its probably a few messages ^ @moT01
okay
yes, I just don't understand why the this is returning false. its just a string
ahrichardson
@ahrichardson
Jan 01 2017 20:57
@TylerMoeller Okay, it seemed like it was going to be something much different. Thank you for the link! I'll give it a read. I feel like I'm doing something a bit outside of the tools presented so far in the basic lessons, so I'm wandering aimlessly a bit.
CamperBot
@camperbot
Jan 01 2017 20:57
ahrichardson sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1239 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 01 2017 20:58
@ahrichardson No problem, the layout is really nice - it will definitely be possible with those utility classes, with the unfortunate side effect of some code duplication. Really great tribute!
ahrichardson
@ahrichardson
Jan 01 2017 21:01
@TylerMoeller I was about to say, code duplication makes the whole thingintuitively feel a bit..."bruteforce-y"? For lack of a better word. I'm obviously super new to all this so I don't know what kinds of things I need to worry about in terms of optimizing a mobile display with a bunch of dead code that's the same but for desktop.
And I appreciate the compliment on the look of course :smile:
Tyler Moeller
@TylerMoeller
Jan 01 2017 21:03
@ahrichardson The main problem will be the size of your page on mobile - andthen the maintainability on your side since a bug fix would need to be made in two places. There's a solution with JavaScript that prevents duplication, but I'm assuming you haven't gone through all the JS exercises yet. Once you do, you'll see how to go back and address it.
Tom
@moT01
Jan 01 2017 21:03
@VictorHall im looking still, ...not sure what to tell ya yet
Victor
@VictorHall
Jan 01 2017 21:03
@moT01 me too
Tom
@moT01
Jan 01 2017 21:04
i dont think you should have that statement that sets it back to true
if you remove that, the last test works
ahrichardson
@ahrichardson
Jan 01 2017 21:05
@TylerMoeller Perfect. Thanks for thinking about my place in the lessons. That makes this whole thing make much more sense. Off to figure this out!
CamperBot
@camperbot
Jan 01 2017 21:05
ahrichardson sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: ahrichardson already gave tylermoeller points
Tom
@moT01
Jan 01 2017 21:09
i dont know what to say to push you in the right direction, ...i feel like you are using too many if tests
maybe im just being lazy that i cant find a better way to get yours working
Victor
@VictorHall
Jan 01 2017 21:14
@moT01 lol its okay im so close
Tom
@moT01
Jan 01 2017 21:14
want my solution?
okay i think i can help now, ...all the tests you are trying to do, can be done with one easier test i think
you can just test if(collection[i][pre])
@VictorHall
i think that's enough to get you goin in a better direction
Victor
@VictorHall
Jan 01 2017 21:22
@moT01 do i still need to test if the property exists ?
Tom
@moT01
Jan 01 2017 21:23
most likely, ...to rule out any that don't have that property
and the test i shared will rule out any that don't have a value, or a very similar test
Sarah
@Shoyren
Jan 01 2017 21:29
Quick question: Can anyone tell me why the email link in my page won't inherit the white text color from a:link? I've tried overriding it with id's and don't want to use <span> to do so. http://codepen.io/shoyren/pen/PWYjeV?editors=1100
Tyler Moeller
@TylerMoeller
Jan 01 2017 21:35
@Shoyren Be sure to use the correct format for your link: <a href="mailto:email@email.com">
Sarah
@Shoyren
Jan 01 2017 21:36
@TylerMoeller Thanks! I figured I had to have borked something, but I couldn't figure out what.
CamperBot
@camperbot
Jan 01 2017 21:36
shoyren sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1240 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Phillip Troutman
@troutman21
Jan 01 2017 21:44
@LiviuLvu great ! ill give that a shot. Also, how do i resize that image before adding it to my code? image manipulation is still giving me a lot of trouble. something i need to practice more.
Sara Dorris
@saralee233
Jan 01 2017 21:49
I'm trying to add a link to my button but I can't figure it out. What am I doing wrong? http://codepen.io/SaraLee233/pen/WoKmOv
specifically my twitter button
Sabrina Ferguson
@itsacoyote
Jan 01 2017 21:53
@saralee233 your twitter anchor tag doesn't have a closing > on the opening tag and doesn't have a closing </a>
Victor
@VictorHall
Jan 01 2017 21:53
@moT01
i have everything but two right
Tom
@moT01
Jan 01 2017 21:54
still workin on it?
Victor
@VictorHall
Jan 01 2017 21:54
if i tests for the last two property value just to get the whole thing right, is that a form of cheating ?
@moT01
Tom
@moT01
Jan 01 2017 21:55
you didn't do the test i told ya to
your first test is right
that will rule out anything without a matching property
if(!collection[i][pre]) will rule out anything without a value
i didn't understand that question you were trying to ask there, cheating? i mean there is no cheating, ...it either works or it doesn't, some methods probly aren't the best way to go, but if it works
Victor
@VictorHall
Jan 01 2017 21:59
okay. I understand.
if(!collection[i][pre]){
isTrue = true;
}
Tom
@moT01
Jan 01 2017 22:03
you shouldn't have to set isTrue to true, ...you set it true at the beginning, ...so it should just remain true until you change it to false, ...and you only change it to false when you find one of the tests isn't true
Victor
@VictorHall
Jan 01 2017 22:03
my question is if we test if(!collection[i][pre]) and set isTrue = false
Tom
@moT01
Jan 01 2017 22:04
try em out
Jack Lyons
@JackEdwardLyons
Jan 01 2017 22:05
hey guys are there any SASS people out there who might be able to help me optimize my folder and file structure?
Victor
@VictorHall
Jan 01 2017 22:09
@moT01 check the array that i am trying to pass. It has values equaling true and false
Dont you think the test you provided will affect the outcome ?
Tom
@moT01
Jan 01 2017 22:12
i only see true
Sara Dorris
@saralee233
Jan 01 2017 22:36
@itsacoyote I closed it but I still cant get the page to open
Sarah
@Shoyren
Jan 01 2017 22:46
Does anyone know how to make links to <id> tags on the same page work on Mobile?
Tyler Moeller
@TylerMoeller
Jan 01 2017 22:48
@saralee233 Take a look at this code in isolation:
<button class="btn btn-lg btn-block"<a href="https://twitter.com/sditis"><target="blank">Twitter</button>
A few problems with the < and > characters there, also buttons are meant for submitting forms, you only need the <a> tags to open links.
This might be a good refresher on creating hyperlinks: https://www.freecodecamp.com/challenges/nest-an-anchor-element-within-a-paragraph
@Shoyren It's the same for desktop and mobile - no need for different code
Sarah
@Shoyren
Jan 01 2017 22:53
@TylerMoeller I figured it should be that way. Unfortunately, I've tested my profile on Safari on my phone, and the links don't seem to work there. Is this a quirk of Codepen? http://codepen.io/shoyren/pen/PWYjeV
Tyler Moeller
@TylerMoeller
Jan 01 2017 22:55
@Shoyren Which links are not working? I noticed you have id="image" in several places, and IDs need to be unique, but you don't seem to be linking to any of your images.
Simon Cordova
@gbsimon87
Jan 01 2017 22:56
@TylerMoeller how's it going
Tyler Moeller
@TylerMoeller
Jan 01 2017 22:57
Hello @gbsimon87 Happy New Year
Simon Cordova
@gbsimon87
Jan 01 2017 22:57
As well, hope it's great one! :)
Jake
@JakeDVirus
Jan 01 2017 23:01
Is it safe to use bootstrap 4 alpha version or shall i stick to bootstrap 3?
Sara Dorris
@saralee233
Jan 01 2017 23:02
@TylerMoeller thanks!
CamperBot
@camperbot
Jan 01 2017 23:02
:star2: 1241 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
saralee233 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Addy
@asonder
Jan 01 2017 23:06
Hi everyone, can anyone help me figure out why my random quote machine starts to load multiple quotes after I push "New Quote" a few times? I'm stumped. It's on CodePen: http://codepen.io/adzukki/pen/rjBwEw Thanks in advance!
The problem happens after you press New Quote around 3 or 4 times...
Simon Cordova
@gbsimon87
Jan 01 2017 23:10
@asonder I've never actually seen that...It'll try and see what's up
Addy
@asonder
Jan 01 2017 23:10
thanks, @gbsimon87 same here. i've been adding breakpoints and trying to figure it out, but i can't seem to figure it out.
CamperBot
@camperbot
Jan 01 2017 23:10
asonder sends brownie points to @gbsimon87 :sparkles: :thumbsup: :sparkles:
:cookie: 376 | @gbsimon87 |http://www.freecodecamp.com/gbsimon87
Simon Cordova
@gbsimon87
Jan 01 2017 23:22
@asonder I can't seem to figure it out tbh
I'm taking a look at how you are accessing the api key though
Tyler Moeller
@TylerMoeller
Jan 01 2017 23:26
@gbsimon87 @asonder If I can help - the problem is putting the click function in the .always() method of the .getJSON.
Coy Sanders
@coymeetsworld
Jan 01 2017 23:26
yep
needs to be outside
Simon Cordova
@gbsimon87
Jan 01 2017 23:27
funny you mention that...I was just playing with that right now
I never really use the always method, thought it was deprecated
@coymeetsworld @TylerMoeller Can I ask you guys for help on something?
Tyler Moeller
@TylerMoeller
Jan 01 2017 23:28
@gbsimon87 .success() is deprecated, in favor of .done()
Sure
Coy Sanders
@coymeetsworld
Jan 01 2017 23:29
always/fail/done are newer features
Simon Cordova
@gbsimon87
Jan 01 2017 23:29
Oh I see, I knew one of them was, I read it in my jquery api app
So basically I've been stuck on this one API, but I think it's because it doesn't take Javascript
Not 100% sure though, could you guys take a look?
Addy
@asonder
Jan 01 2017 23:30
@coymeetsworld @gbsimon87 thanks for taking a look at it. i thought that might be the source of the problem as well, but didn't think to take it out of the always
CamperBot
@camperbot
Jan 01 2017 23:30
asonder sends brownie points to @coymeetsworld and @gbsimon87 :sparkles: :thumbsup: :sparkles:
:warning: asonder already gave gbsimon87 points
:star2: 1711 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Simon Cordova
@gbsimon87
Jan 01 2017 23:30
I think @TylerMoeller moeller may deserve some brownie points as well haha
Addy
@asonder
Jan 01 2017 23:30
and thanks @TylerMoeller
CamperBot
@camperbot
Jan 01 2017 23:30
asonder sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1242 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Coy Sanders
@coymeetsworld
Jan 01 2017 23:30
np @asonder
Addy
@asonder
Jan 01 2017 23:31
yep sorry about that
Tyler Moeller
@TylerMoeller
Jan 01 2017 23:31
no problem - happy to help
@gbsimon87 That API doesn't allow JSONP, and crossorigin.me changed recently to require headers. You may be able to use https://cors-anywhere.herokuapp.com/, but it's intended for demo purposes only.
Simon Cordova
@gbsimon87
Jan 01 2017 23:33
Do I use that the same way as crossorigin?
Tyler Moeller
@TylerMoeller
Jan 01 2017 23:34
Yes, just prepend it to the url - they give you code on github so you can set up your own server instead. It's really only meant to demonstrate the code.
  var url = 'https://cors-anywhere.herokuapp.com/http://api.brewerydb.com/v2/categories?key=<your key>';  
  $.getJSON(url).done(function(beerData) {
    console.log(beerData);
  });
Addy
@asonder
Jan 01 2017 23:34
@gbsimon87 i was having a similar issue with my quote generator, and i got it to work by leaving off the "http://". So this is what my call looked like: var url = '//api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&key=' + quoteKey + '&jsonp=?';
and I used the getJSON jquery method
Tyler Moeller
@TylerMoeller
Jan 01 2017 23:36
@gbsimon87 They don't want you exposing your API key in public....it's a bit more strict of an API than most of the fairly relaxed ones we use in the FCC challenges: https://groups.google.com/forum/#!msg/brewerydb-api/rvB7ojTSyxk/H1WwYaHmwJEJ
Simon Cordova
@gbsimon87
Jan 01 2017 23:36

thanks @TylerMoeller @asonder I'll give it a shot.

This API is rather well documented but if I have to use a server-side language I'll just scrap for another

CamperBot
@camperbot
Jan 01 2017 23:36
gbsimon87 sends brownie points to @tylermoeller and @asonder :sparkles: :thumbsup: :sparkles:
:cookie: 284 | @asonder |http://www.freecodecamp.com/asonder
:star2: 1243 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Simon Cordova
@gbsimon87
Jan 01 2017 23:37
@TylerMoeller if I use herokuapp to set up my own server do you reckon in may work?
it**
Tyler Moeller
@TylerMoeller
Jan 01 2017 23:38
@gbsimon87 Yes, it's a great way to do it. No need to put your API keys in codepen either if you're running your own server.
Simon Cordova
@gbsimon87
Jan 01 2017 23:40
Hmm, interesting, I'll definitely read into it...
Cheers for the pro tip
One last thing, for anyone who isn't very busy... So I started making this little movie app.
Everything is working great, but tbh I'm not sure if the way I'm appending the data from the API is the most efficient...
http://codepen.io/gbsimon87/pen/BLGjbr
If anyone can suggest a more efficient way, or a more appropriate approach, that'd be amazing
Right now I'm just getting the structure and literally appending HTML layout along with the data received.
Should the HTML already exist beforehand?