These are chat archives for FreeCodeCamp/HelpFrontEnd

23rd
Aug 2017
Chris Cullen
@123xylem
Aug 23 2017 02:22

@media only screen and (max-width: 900px){
    .thirdCol {
        width: 28%;
    }
}


@media only screen and (max-width: 830px){
    .thirdCol {
        width: 70%;
    }
}
.thirdCol{
float:left;}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
margin-bottom: 0;}

 //The wrapper theyre in
 .workWrapper{    
      margin-left:5rem;                
      margin-right:5rem;                
      }
Any idea why my media query doesnt make each col take up the whole row at 850px screen?
Gulsvi
@gulsvi
Aug 23 2017 02:26
@123xylem with that CSS, at 850px it should take up 28%
Your CSS says: 70% until the screen is 830px wide, 28% until 900px wide
Chris Cullen
@123xylem
Aug 23 2017 02:28
yea i want one col to take up whole row until the screen is big enough for 2 cols
@SkyC0der
iso
@iso1048
Aug 23 2017 02:29
@123xylem are you using bootstrap?
Gulsvi
@gulsvi
Aug 23 2017 02:29
I don't see any row settings in that CSS @123xylem
Chris Cullen
@123xylem
Aug 23 2017 02:29
@SkyC0der using bootstrap
Gulsvi
@gulsvi
Aug 23 2017 02:29
if 850px is the breakpoint where two columns fit in a row, wouldn't you want it at 50%?
Chris Cullen
@123xylem
Aug 23 2017 02:29
@gothamknight
Gulsvi
@gulsvi
Aug 23 2017 02:29
If you're using bootstrap, remove all of that CSS and use the grid system
Pagnito
@Pagnito
Aug 23 2017 02:30
@SkyC0der yo
iso
@iso1048
Aug 23 2017 02:30
@SkyC0der speed.
Chris Cullen
@123xylem
Aug 23 2017 02:31
@SkyC0der i thnk ur right...
Chris Cullen
@123xylem
Aug 23 2017 02:31
@SkyC0der I could just use grid and it would be faster
Gulsvi
@gulsvi
Aug 23 2017 02:31
Yo @Pagnito
Yeah, grid is really useful - if you have bootstrap added, definitely give it a try @123xylem
Pagnito
@Pagnito
Aug 23 2017 02:32
@SkyC0der i never usually use collapsibles, but now im tryin to use a materialize one and im having trouble making it function
Gulsvi
@gulsvi
Aug 23 2017 02:32
Speed to you too @gothamknight :)
Pagnito
@Pagnito
Aug 23 2017 02:32
i dunno why its not working, the html and css shows up but it doesnt function
Gulsvi
@gulsvi
Aug 23 2017 02:32
Did you add jQuery and materialize.js?
Pagnito
@Pagnito
Aug 23 2017 02:32
ya
Gulsvi
@gulsvi
Aug 23 2017 02:33
codepen?
iso
@iso1048
Aug 23 2017 02:33
@SkyC0der I mean you were too quick in your reply.
Pagnito
@Pagnito
Aug 23 2017 02:33
nah im using webpack
Gulsvi
@gulsvi
Aug 23 2017 02:33
Ahhh, lol
Isn't webpack something you run before you deploy?
otherwise, hard to debug during development
Pagnito
@Pagnito
Aug 23 2017 02:35
nah , i think u build it during dev too, thats how all the courses been doing it
hold on ima try it in codepen
Gulsvi
@gulsvi
Aug 23 2017 02:36
It works for me @Pagnito https://s.codepen.io/anon/pen/vJrOMr
Pagnito
@Pagnito
Aug 23 2017 02:37
hmm
Gulsvi
@gulsvi
Aug 23 2017 02:42
Not sure if that helps see how you might have done it differently
Pagnito
@Pagnito
Aug 23 2017 02:44
weird, my jquery was working earlier, and now its not for some reason
Caleb Brenner
@cwborion
Aug 23 2017 03:06

any chance anyone knows why in my footer the “MENU” section is lower than the ones to the left? I’ve been trying to fix it for a while now and am stuck.

https://codepen.io/Calebwill91/pen/MvryOE

the only element I can get to move up by applying .menu class from my CSS is the actual “MENU” heading itself, but then it leaves a gap between the heading and the following <a> tags
Ken Haduch
@khaduch
Aug 23 2017 03:13
@cwborion - well, the height of those divs appears to be determined by the number of <p> elements in each one. You could add another blank paragraph and that would probably fix it.
Caleb Brenner
@cwborion
Aug 23 2017 03:14
a blank <p> after the last one?
@khaduch I added one more at the end and nothing changed
Ken Haduch
@khaduch
Aug 23 2017 03:15
@cwborion - yes, that would raise it all up a line. Although that's kind of a sleazy way to do it. Probably some different styling would be a better approach, but if you put a blank <p> after the "Contact" link, I think it would work.
Caleb Brenner
@cwborion
Aug 23 2017 03:15
@khaduch it didn’t change anything : /
Ken Haduch
@khaduch
Aug 23 2017 03:16
maybe it needs a character in it - try a space, or the HTML entity &nbsp;
well, it worked when I put some actual text in it... like I said, there's probably a better way to do that. Using CSS and HTML that might be structured differently.
Caleb Brenner
@cwborion
Aug 23 2017 03:17
ah yeah it needs something in there. thank you @khaduch
CamperBot
@camperbot
Aug 23 2017 03:17
cwborion sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3229 | @khaduch |http://www.freecodecamp.com/khaduch
Gulsvi
@gulsvi
Aug 23 2017 03:19
@cwborion They're inline-blocks, and the default vertical-align value for inline-blocks is baseline. Use vertical-align: top if you want them all aligned at the top
.footer {
  display: inline-block;
  padding-left: 150px;
  vertical-align: top;
}
Caleb Brenner
@cwborion
Aug 23 2017 03:22
@SkyC0der thank you! I swear I tried putting that style in probably every single element around there, and honestly thought I tried it on that one too. damn...
CamperBot
@camperbot
Aug 23 2017 03:22
cwborion sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2537 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 23 2017 03:23
No problem!
Vertical-alignment can be a huge pain
Ken Haduch
@khaduch
Aug 23 2017 03:23
@SkyC0der - thanks - good investigation!
CamperBot
@camperbot
Aug 23 2017 03:23
khaduch sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2538 | @skyc0der |http://www.freecodecamp.com/skyc0der
Ken Haduch
@khaduch
Aug 23 2017 03:24
@cwborion - that section kind of falls apart when you make the screen narrow... maybe you haven't focused on that up to this point...
Caleb Brenner
@cwborion
Aug 23 2017 03:26
@khaduch you mean the responsiveness?
like with bootstrap etc?
Ken Haduch
@khaduch
Aug 23 2017 03:29
@cwborion - yes, lots of things go wrong there - the gray background in that section must be a fixed height? Those lists drop down below the "The Social" element and the background must repeat because you have the sky and trees starting to show up again?
Caleb Brenner
@cwborion
Aug 23 2017 03:32
@khaduch yes, I noticed that. I haven’t implemented any of the responsive design yet. I’m currently in a coding bootcamp and this week’s projects are on Bootstrap so now that I’m almost done building the page, I will add the responsive design to it. I will set the background image to not repeat and look into an alternate way to fix the height issue with the footer if it continues to be a problem. Thank you for your input and help.
CamperBot
@camperbot
Aug 23 2017 03:32
cwborion sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: cwborion already gave khaduch points
Roxroy
@roxroy
Aug 23 2017 04:11
@cwborion , your style name is float not floatright. To fix, change the line ' <div class="floatright">' to ` <div class="float">'
Lallo Vigil
@lalov1
Aug 23 2017 04:36
Could someone help me with the Simon game I've been stuck for awhile now?
https://codepen.io/lalov1/pen/MvgvxY?editors=0010
Kent Saeteurn
@sansae
Aug 23 2017 05:31

hi everyone; i'm having trouble using the .replace method on a url string.

here's what i have:

origImgWidth = json.query.pages[pageIdKeys[i]].thumbnail.width; //origImgWidth is 28px; see url below
img = json.query.pages[pageIdKeys[i]].thumbnail.source;
newResImg = img.replace(origImgWidth, "100");

The actual img url looks like this:
"https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Stephen_Curry_dribbling_2016_%28cropped%29.jpg/28px-Stephen_Curry_dribbling_2016_%28cropped%29.jpg";

this is what i want to do:
var newResImg = img.replace(origImgWidth, "100"); //but only for "28px", and not for the two substrings, "%28"

I'm unable to show my newResImg because those two substrings gets replaced. I'm not sure how to skip this. I thought about concatenating "px" to origImgWidth, but that didn't work. I find it really strange, because...
...when I do this in jsbin, it works:

var img = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Stephen_Curry_dribbling_2016_%28cropped%29.jpg/28px-Stephen_Curry_dribbling_2016_%28cropped%29.jpg";
var newResImg = img.replace("28px", "100px");
console.log(newResImg);

(I think origImgWidth is being returned with the "px" already appended, so if I concatenate "px" to it, it'll just have px twice. if this were the case, however, why wouldn't the .replace method replace ONLY the "28px" substring instead of the "%28" as well?)
I could, in theory, write a function that iterates through each character in the string and "if origImgWidth is preceded by %", skip it and move on, but this seems like a bit much; i'm looking for a cleaner, simpler solution. The problem is that the url returned in the json data is using %28 for the open parenthesis symbol (%29 is the code for closed parenth). Maybe there's a way to return the json data with the code converted to their actual symbols?

sorry for the long post. any help would be greatly appreciated. thanks

prakash chandra yadav
@prakashyadav008
Aug 23 2017 05:32
hey can anyone help me out
how do i remove the space between the search bar and the search button
..?
Jim Tryon
@jimtryon
Aug 23 2017 05:34
I’m looking at the pen @prakashyadav008
teevik
@teevik
Aug 23 2017 05:47
@prakashyadav008 You should use chrome inspector to check what element the space comes from
Jim Tryon
@jimtryon
Aug 23 2017 05:48
@prakashyadav008 I don’t see a space now: https://codepen.io/jimtryon/pen/NvzNNL
The yellow background is flush against the left edge of the search bar
Jonathan Manzano
@Jfcorp
Aug 23 2017 06:19
hello
iso
@iso1048
Aug 23 2017 06:20
hi @Jfcorp
Jonathan Manzano
@Jfcorp
Aug 23 2017 06:20
@gothamknight hi, how are you?
iso
@iso1048
Aug 23 2017 06:21
not bad. yourself?
Jonathan Manzano
@Jfcorp
Aug 23 2017 06:22
fine thank you
Amit Patel
@AmitP88
Aug 23 2017 06:23
hey guys, I need some help getting react-canvas to work. I know I have it installed in my project, along with yarn and create-react-app (someone helped me with the installation), but when i'm trying to import Canvas from 'react-canvas-component' I run into the error: Failed to Compile, Module not found
iso
@iso1048
Aug 23 2017 06:23
what stage are you at in fCC at the moment @Jfcorp ?
Amit Patel
@AmitP88
Aug 23 2017 06:24
failed to compile.png
Jonathan Manzano
@Jfcorp
Aug 23 2017 06:25
intermediate javascript @gothamknight
iso
@iso1048
Aug 23 2017 06:25
@Jfcorp same.
Jonathan Manzano
@Jfcorp
Aug 23 2017 06:25
But I had for two months that I did not touch anything of code
iso
@iso1048
Aug 23 2017 06:26
so just getting back into it?
Jonathan Manzano
@Jfcorp
Aug 23 2017 06:26
I think that more
@gothamknight yes
He forgot many things
iso
@iso1048
Aug 23 2017 06:28
@Jfcorp i have to head off so i'll catch you later. Good luck with the challenges - its awesome that you are getting back into it. (just redo the basic javascript - that is what i did)
Jonathan Manzano
@Jfcorp
Aug 23 2017 06:30
@gothamknight thanks bro, see you later
CamperBot
@camperbot
Aug 23 2017 06:30
jfcorp sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 392 | @gothamknight |http://www.freecodecamp.com/gothamknight
Chris Cullen
@123xylem
Aug 23 2017 06:44
         <div class="row">
       <script>  
                 $(".homeImg").click(function()){
                     $(".homeImg").hide();
                 }
</script>
                          <div class="col">
                       <img class="homeImg" src ="https://image.ibb.co/csbaU5/portrait.png">

                 </div>
Why doesnt my Jquery work?
I have it linked in my header
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="/stylesheets/main.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
iso
@iso1048
Aug 23 2017 06:57
@123xylem you have an extra ) after the function. ...?
Chris Cullen
@123xylem
Aug 23 2017 06:58
@gothamknight yup seen that and changed it but no bueno
Where shoudl the script normally go on a webpage?
iso
@iso1048
Aug 23 2017 06:59
@123xylem perhaps put that function inside the $(document).ready(function(){.....});?
@123xylem at the bottom I think. Not sure though.
Markus Kiili
@Masd925
Aug 23 2017 07:00
@123xylem Scripts are usually inside the head element or at the end of body element.
Jon Marshall
@jmars125
Aug 23 2017 07:00
script should be at the bottom after html
Chris Cullen
@123xylem
Aug 23 2017 07:02
@gothamknight @Masd925 .. I have no doc .ready funciton.. maybe that is the problem
Sorin Ruse
@sorinr
Aug 23 2017 07:03
@123xylem first do not mix html with javascript like that. i would put all js code in one script tag all in one place at the end of the body
Markus Kiili
@Masd925
Aug 23 2017 07:04
@123xylem If you put the script on the head, then it might slow down the page load. If you put it at the end of body, it is theoretically possible that the user interacts with the page before script is executed. So both have their merits. Putting the code inside window load event handler or jquery $(document).ready() event handler makes sure that the script is run after the dom is ready.
iso
@iso1048
Aug 23 2017 07:06
@Masd925 is there a difference between window load event handler and document ready?
Markus Kiili
@Masd925
Aug 23 2017 07:06
@123xylem So a script like that might not find the element that it is targeting, because the dom might not be ready.
@gothamknight jquery document ready fires when the document is completely loaded and parsed but resources are not loaded. Window load fires when also the resources are loaded.
Chris Cullen
@123xylem
Aug 23 2017 07:08
@Masd925 but given 4mins it would work?
Markus Kiili
@Masd925
Aug 23 2017 07:09
@123xylem No, you need to make sure that the dom is ready before you access it. Easiest way is to put the script at the end of body.
Chris Cullen
@123xylem
Aug 23 2017 07:10
@Masd925 IT worked!
@Masd925 thanks
CamperBot
@camperbot
Aug 23 2017 07:10
123xylem sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4430 | @masd925 |http://www.freecodecamp.com/masd925
Chris Cullen
@123xylem
Aug 23 2017 07:10
maybe at the top with doc.ready funciton is best tho?
iso
@iso1048
Aug 23 2017 07:11
@Masd925 oh ok. thanks.
CamperBot
@camperbot
Aug 23 2017 07:11
gothamknight sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4431 | @masd925 |http://www.freecodecamp.com/masd925
Markus Kiili
@Masd925
Aug 23 2017 07:12
@gothamknight I think those two events correspond to document.readystate being "interactive" or "complete". So many ways to use them.
Łukasz Sobek
@lukaszsobek
Aug 23 2017 09:39
@gothamknight $(document).ready() does not include images and frames, onload includes everything
iso
@iso1048
Aug 23 2017 09:43
@lukaszsobek good to know. thanks
CamperBot
@camperbot
Aug 23 2017 09:43
gothamknight sends brownie points to @lukaszsobek :sparkles: :thumbsup: :sparkles:
:cookie: 305 | @lukaszsobek |http://www.freecodecamp.com/lukaszsobek
Keone Martin
@Athaman
Aug 23 2017 10:34
Hey folks, how is life?
Markus Kiili
@Masd925
Aug 23 2017 10:45
@Athaman Tough one...could you instead give some easy front end related question ;)
Keone Martin
@Athaman
Aug 23 2017 10:45
Hah, long time no see bud. I can give you a weird front end question if you want one
Keone Martin
@Athaman
Aug 23 2017 10:51
https://amaro.com/p/maxi-tee-feminist/branco I'm trying to select a size using js... but using dispatchEvent(new Event('click')) and also $(selector).click() doesn't trigger the listener that's attached to the links. if i add my own click listener the dispatchEvent triggers that one... but still doesn't select the size.
wait disregard :D
a normal js .click() works...
Keone Martin
@Athaman
Aug 23 2017 10:56
I still wonder why the rest don't
cumibulat
@cumibulat
Aug 23 2017 14:05
hi guys i'm working on twitch api project. after i hit few channel and waiting for the response. how can i refresh my html list / table after get the callback ? for now the HTML finish rendered and the callback return later..
sorry for my bad english..
Keone Martin
@Athaman
Aug 23 2017 14:09
you should be able to update the html inside the callback right?
like callback = function (response) { $('table').text(response.body)}; ... as an obviously crude example
cumibulat
@cumibulat
Aug 23 2017 14:13
@Athaman ok.. at first i tried to store all the callback into array object. but now i will just push it to the table without store it to the array object..
Keone Martin
@Athaman
Aug 23 2017 14:14
yeah, updating the markup inside the callback i think is the way to do it.
you could also set up a timer that updated the page according to what was in the array but that seems unnecessary to me
cumibulat
@cumibulat
Aug 23 2017 14:18
@Athaman ok it working.. have to work on a nicer UI and testing to only show the online / offline function. cheers
LiciniusRex
@hashtagyolo1
Aug 23 2017 14:20
Hi folks. I'me essentially done with my quote generator. However one thing I am missing is a way to get it to repeat the generation if the length of a quote is too long to tweet
Michuello
@Michuello
Aug 23 2017 14:24
Hi everyone, I have a question. What might be a reason for adding to my page a horizontal scroll bar (at the bottom) when I add class="row"?
Gulsvi
@gulsvi
Aug 23 2017 14:25
@Michuello Usually that's because it isn't in a <div class="container">, or you have a container inside of another container.
Jorge
@OrangeKulture
Aug 23 2017 14:26
hey whats cracking Sky :joy:
Gulsvi
@gulsvi
Aug 23 2017 14:26
@hashtagyolo1 To get that working, you'll need to wrap your getJSON in a function. Inside your getJSON, when you get the quote text, figure out the length - if it's too long, call the function again and return
@OrangeKulture Hey what's up!
Jorge
@OrangeKulture
Aug 23 2017 14:27
all good in da hood .. you?
Gulsvi
@gulsvi
Aug 23 2017 14:29
Doing great!
Jorge
@OrangeKulture
Aug 23 2017 14:30
good to hear .. seems that this chat has taken a plunge, hasn't it ?
Gulsvi
@gulsvi
Aug 23 2017 14:30
Yeah, not very active any more :/
Jorge
@OrangeKulture
Aug 23 2017 14:31
once Saboor quits, the chat lines drop by 89% :joy:
Gulsvi
@gulsvi
Aug 23 2017 14:31
lol
Jorge
@OrangeKulture
Aug 23 2017 14:31
hahah .. quincy might wanna look into hiring him full time
Gulsvi
@gulsvi
Aug 23 2017 14:31
This is my last week here... off to spain this weekend
Jorge
@OrangeKulture
Aug 23 2017 14:31
for good?! or just for vacation?
Gulsvi
@gulsvi
Aug 23 2017 14:32
haha, I'm sure saboor would take him up on that!
Kind of for good - moving there to study for the school year
LiciniusRex
@hashtagyolo1
Aug 23 2017 14:32
Thanks @SkyC0der . You're my hero :)
CamperBot
@camperbot
Aug 23 2017 14:32
hashtagyolo1 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2541 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 23 2017 14:32
not sure how much time I'll have for coding or what internet will be like
no wifi/internet in my residencia
Jorge
@OrangeKulture
Aug 23 2017 14:32
internet is good ... timewise, only you would know. It's kind of exciting tho, right?
ahh shit, really? that kinda sucks
Gulsvi
@gulsvi
Aug 23 2017 14:33
nervous exciting, but yeah, should be fun :)
Jorge
@OrangeKulture
Aug 23 2017 14:34
that's gonna give u a chance to master spanish .. tho spanish from spain is kinda crazy if u ask me haha
Gulsvi
@gulsvi
Aug 23 2017 14:35
lol, I'll try not to lisp my z and c when I'm there
Jorge
@OrangeKulture
Aug 23 2017 14:35
when in doubt, just say 'joder'
Gulsvi
@gulsvi
Aug 23 2017 14:36
haha, we all had to take a class and learn all the swear words
Michuello
@Michuello
Aug 23 2017 14:37
@SkyC0der thanks again
CamperBot
@camperbot
Aug 23 2017 14:37
michuello sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2542 | @skyc0der |http://www.freecodecamp.com/skyc0der
Jorge
@OrangeKulture
Aug 23 2017 14:37
yeah! thats a must .. haha it's gonna be good, don't sweat it, im sure youll have a blast
Gulsvi
@gulsvi
Aug 23 2017 14:37
no problem @Michuello
Glad that helped @hashtagyolo1
Jorge
@OrangeKulture
Aug 23 2017 14:37
u have to stop from time to time and check up on us tho ..
im sure you'll have some spare time for coding here and there
Gulsvi
@gulsvi
Aug 23 2017 14:38
I will, for sure. I'm bringing a laptop, and I'm sure there's wifi somewhere in spain lol
just not where I'll be living...
Jorge
@OrangeKulture
Aug 23 2017 14:38
internet is actually good in spain, it's kinda weird u dont have it at your place
where in spain r u going?
Gulsvi
@gulsvi
Aug 23 2017 14:39
Sevilla
Jorge
@OrangeKulture
Aug 23 2017 14:39
ive been to mallorca, barcelona and madrid
Gulsvi
@gulsvi
Aug 23 2017 14:39
nice, I hope to go there too
Jorge
@OrangeKulture
Aug 23 2017 14:39
yeah for sure u will, have u ever been to europe before?
Gulsvi
@gulsvi
Aug 23 2017 14:39
mallorca might be hard to visit, but Barcelona and Madrid no problem
No, my first time
Jorge
@OrangeKulture
Aug 23 2017 14:40
ahh nice! youll have a blast .. first time i went, i took a month and went all alone
Gulsvi
@gulsvi
Aug 23 2017 14:40
wow, bet that's a good way to meet people :) or find some alone time too
Jorge
@OrangeKulture
Aug 23 2017 14:40
did Malta, Amsterdam, Denmark and Sweden
best time of my life
Gulsvi
@gulsvi
Aug 23 2017 14:41
I may try to visit Germany + Netherlands over the winter break
Jorge
@OrangeKulture
Aug 23 2017 14:41
ohh yeah, well im really social too, looking any excuse to talk to ppl, but this really was some next level .. specially Malta.
yeah thats the thing, its easy to travel around
Keone Martin
@Athaman
Aug 23 2017 14:41
Germany is nice ;)
Jorge
@OrangeKulture
Aug 23 2017 14:41
so cheap too .. like a flight from malta to amsterdam, 140$
Keone Martin
@Athaman
Aug 23 2017 14:42
you can fly even cheaper with ryanair if you don't mind discomfort
Jorge
@OrangeKulture
Aug 23 2017 14:42
ohh yeah. .. ryanair god sent cheap tickets
germany ive only been to frankfurt
and for a few hours , not that much
Gulsvi
@gulsvi
Aug 23 2017 14:43
I love beer, so Germany is kind of a must for me
Jorge
@OrangeKulture
Aug 23 2017 14:44
ohh yeah, nothing beats beer ..
alcoholwise, obvs
Gulsvi
@gulsvi
Aug 23 2017 14:47
Time to finish my pomodoro :clock10:
Jorge
@OrangeKulture
Aug 23 2017 14:48
did u finish your tic tac toe?
only one im missing, i have it almost done, but im soo lazy to finish that one .. dunno why
tried to bribe Saboor with $10 .. he wouldnt take it :S haha
Gulsvi
@gulsvi
Aug 23 2017 14:51
lol, no I didn't do tic-tac-toe either. I could have finished all of these months ago :/ procrastination
I'm cheating kind of for my pomodoro... using a library just to get it done
Jorge
@OrangeKulture
Aug 23 2017 14:53
right haha yeah ... its a good think tho, not really cheating. I find that tic tac toe is the hardest, if u wanna make it unbeatable
my Simon i think it's not all that bad
Gulsvi
@gulsvi
Aug 23 2017 14:55
Looks good!! Nice work :)
Jorge
@OrangeKulture
Aug 23 2017 14:56
awesome, thanks!
gonna go take my pit for walk, ill back to discuss if @planigan is a real person or if its a stuck photo on the ppl that read msgs
:joy:
Gulsvi
@gulsvi
Aug 23 2017 15:00
lol, he's not a bot! Talked to us once back in July - :point_up: July 11, 2017
alpox
@alpox
Aug 23 2017 15:12
@OrangeKulture Minimax can be confusing at first, thats right :D but when you dont want to make it unbeatable, tic tac toe is quite fun to make
LiciniusRex
@hashtagyolo1
Aug 23 2017 15:30
so I've got most of it sorted, except now it goes into an endless loop
Ken Haduch
@khaduch
Aug 23 2017 15:42
@hashtagyolo1 - how does it go into an endless loop?
@hashtagyolo1 - oh, could it be where you are detecting the quote length and recursively calling the getQuote() function - that is probably not a good thing to do without putting some kind of limit on it.
LiciniusRex
@hashtagyolo1
Aug 23 2017 15:44
getQuote should only be called if the length is longer than 141. If it's shorter it shouldn't be doing anything
Ken Haduch
@khaduch
Aug 23 2017 15:45
@hashtagyolo1 - I think that I see it working fine for shorter quotes? Although maybe I just saw it take off into hyperspace...
LiciniusRex
@hashtagyolo1
Aug 23 2017 15:46
Works fine until it hits a laong quote, after which it goes insane
Can't work out why it doesn't stop as soon as it see a shorter quote
Ken Haduch
@khaduch
Aug 23 2017 15:51
@hashtagyolo1 -- I think that it does stop, at least for the initial quotes. But I would recommend that you not do anything like this that would make recursive calls - they might think that there is a DOS attack going on or something and stop serving quotes, or it might crash their server. Why do you want to limit the quote length? Is it because of the tweet limit?
LiciniusRex
@hashtagyolo1
Aug 23 2017 15:52
nm, fixed it. Yeah, because I wanted you to onkly be able to tweet in the limit. I put an if statemtn in the tweet call instead of the json
sigh, almost fixed it. Now tweeting stopped working haha
Ken Haduch
@khaduch
Aug 23 2017 15:53
@hashtagyolo1 - the way I handled that was to use the type of code as in the "Truncate a String" exercise, and just put a note out that a long quote will be shortened because of the twitter length limit.
@hashtagyolo1 - another thing is that you are putting a long URL in your tweet - that's going to impact the length, too.
LiciniusRex
@hashtagyolo1
Aug 23 2017 15:56
urls aren't included in twitter char limits these days thankfully. I finally fixed it. Was forgetting to pout .length in :/
Ken Haduch
@khaduch
Aug 23 2017 16:00
@hashtagyolo1 - well, it's a little bit strange when you have a long quote and you hit the "Tweet" button, and it changes the quote? A little bit of a surprise...
LiciniusRex
@hashtagyolo1
Aug 23 2017 16:01
fair point
@khaduch updated it
Ken Haduch
@khaduch
Aug 23 2017 16:06
@hashtagyolo1 - I think that I figured out why it had the "runaway" behavior on a long quote - because the AJAX request is asynchronous, you were loading up that long quote, and then repeatedly calling getQuote() based on the same quote that was already stored in the HTML structure. But without a response (which is time delayed) from the ajax request, it would just look at the contents of the HTML quote data right away, and the long quote was just "sitting" there. So it was queueing up requests as quickly as possible until maybe one short one came back in response and updated the HTML? Too hard to guess how that might have worked out. Much better to do it without a repetitive call.
Ken Haduch
@khaduch
Aug 23 2017 16:13
@hashtagyolo1 - I don't want to seem like I'm too critical, but that's not very nice looking... what I think I would do is maybe put a message out there if there is a long quote that is too long to be tweeted, but I still like the approach of truncating it for the twitter call, and maybe putting a nice subtle note on the bottom near the Tweet button something to the effect that "the quote will be truncated for twitter". That way you don't just slap the user in the face with that big warning at the top? I know it's a matter of opinion, but the way I did mine is an example of what I'm getting at. You can hit it for a few quotes and you'll see my tweet message at the bottom... just FYI.
LiciniusRex
@hashtagyolo1
Aug 23 2017 16:21
@khaduch . I'm not massvile concrned by the aesthetics right now tbh. More concerned with making sure my applications actually work. When I come to make my portfoilio I'll revisit all of these and square them away nicely. Thanks for the advice though
CamperBot
@camperbot
Aug 23 2017 16:21
hashtagyolo1 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3233 | @khaduch |http://www.freecodecamp.com/khaduch
Gulsvi
@gulsvi
Aug 23 2017 16:21
@hashtagyolo1 A cleaner way is to simply do your length check in the getJSON callback:
function getQuote() {
  $.getJSON("https://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?", function(json) {

    if(json.quoteText.length + json.quoteAuthor.length > 140) {
      getQuote();
      return;
    }

    $(".message.text").html(json.quoteText);
    $(".message.author").html(json.quoteAuthor);
  });
}
(or do a if/else instead of a return)
Gulsvi
@gulsvi
Aug 23 2017 16:26
Your twitter url should also be a web intent, not a page share URL. For example: https://twitter.com/intent/tweet?text=hello world
LiciniusRex
@hashtagyolo1
Aug 23 2017 16:31
that is muc cleaner @SkyC0der . Thanks again
CamperBot
@camperbot
Aug 23 2017 16:31
hashtagyolo1 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2543 | @skyc0der |http://www.freecodecamp.com/skyc0der
Michael Norris
@Norrismi
Aug 23 2017 16:44
Hello, this should be an easy question, I am a Jquery noob. In the following code, what keeps the divs from appearing in the initial loading of the html page?

<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>

<body>

<p>Demonstrate fadeIn() with different parameters.</p>

<button>Click to fade in boxes</button><br><br>

<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>
</html>

CamperBot
@camperbot
Aug 23 2017 16:47
:bulb: to format code use backticks! ``` more info
Gulsvi
@gulsvi
Aug 23 2017 16:48
@Norrismi The inline styles "display: none" keep them from appearing in the initial loading. jQuery's .fadeIn() method removes that styling.
Michael Norris
@Norrismi
Aug 23 2017 16:49
@SkyC0der ahhh, I see thanks!
CamperBot
@camperbot
Aug 23 2017 16:49
norrismi sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2544 | @skyc0der |http://www.freecodecamp.com/skyc0der
Michael Norris
@Norrismi
Aug 23 2017 16:57
Is this an unprofessional way to use a span tag?
<p> <span id = "message">Press the quote button to receive a new quote!</span> </p>
Wael Azar
@Waelazar
Aug 23 2017 17:00
@Norrismi
why do you need to use span in this case ?
Christopher McCormack
@cmccormack
Aug 23 2017 17:06
@Norrismi if you plan to actually do something with the text in the p element, via CSS or JS, then yes that's a fine way to do it, but only if that text will be adjacent to something else in the p element
Michael Norris
@Norrismi
Aug 23 2017 17:06
@Waelazar It was helping me with the CSS. From a HTML perspective, this is improper usage correct?
@cmccormack thanks!
CamperBot
@camperbot
Aug 23 2017 17:06
norrismi sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1163 | @cmccormack |http://www.freecodecamp.com/cmccormack
Wael Azar
@Waelazar
Aug 23 2017 17:09
@Norrismi
i assume it is unprofessional way
Gulsvi
@gulsvi
Aug 23 2017 17:10

@Norrismi Usually, we would just do:

<p id="message">Press the quote button to receive a new quote!</p>

The span comes in handy with something like:

<p>This is my <span id="red-text">red text</span> and this is my <span id="blue-text">blue text</span></p>
where you change the style or need to manipulate text within the p tag, but not all of it.
Wael Azar
@Waelazar
Aug 23 2017 17:12
you are not define any specific words inside the paragraph, you defined the whole paragraph
so no need to add it
you can do like what sky did in the first code, it's better
@SkyC0der
@Norrismi
Michael Norris
@Norrismi
Aug 23 2017 17:12
@SkyC0der @Waelazar Great thanks!
CamperBot
@camperbot
Aug 23 2017 17:12
norrismi sends brownie points to @skyc0der and @waelazar :sparkles: :thumbsup: :sparkles:
:cookie: 346 | @waelazar |http://www.freecodecamp.com/waelazar
:warning: norrismi already gave skyc0der points
Wael Azar
@Waelazar
Aug 23 2017 17:14
wel
Utsav Kafley
@chopedada
Aug 23 2017 17:19
Hello guys, can anyone help me with a issue I'm having with my css for the portfolio project?
Tom
@moT01
Aug 23 2017 17:19
@chopedada whats the problem
Utsav Kafley
@chopedada
Aug 23 2017 17:21
https://codepen.io/chopedada/pen/EvRRoP
I'm using .jumbotron from bootstrap to style my content a certain way and .jumbotron class has a padding value to it. I am fine with the padding in all my sections except for the footer. I have tried
"footer{
}
"Footer{}

footer{
padding:0;
}
and a buncg of other things but it still doesnt work

How can I select the footer but using jumbotron? Like a nth child maybe?

Tom
@moT01
Aug 23 2017 17:23
hmm
footer{
  padding:0 !important;
}
that works, not something you usually want to use
Gulsvi
@gulsvi
Aug 23 2017 17:26

@chopedada You could apply the padding to your second class:

.second {
  padding:0;
}

Or increase CSS specificity for the footer:

footer.jumbotron {
  padding: 0;
}
Aysun Sachir
@AysunSachir
Aug 23 2017 17:39
css specificity > !important
avoid important as much as possible
Utsav Kafley
@chopedada
Aug 23 2017 17:45
Hey guys thanks for the suggestions but still no bueno :(
Gulsvi
@gulsvi
Aug 23 2017 17:49
@chopedada You have 0 padding on your footer now. What did you want to do?
I didn't realize you were using Bootstrap 4. With BS4, you can just add the class p-0 for 0 padding.
Aysun Sachir
@AysunSachir
Aug 23 2017 17:57
actually the padding comes from the lists you have
set .footer_lists to padding:0px;
@chopedada
Daniel Feldman
@Feldbot
Aug 23 2017 18:32
I'm working on the "change a sentence to upper case" algorithm, and my code passed, but it says the return sentenceCaseStr is out of scope. Does anyone know why?
function titleCase (str) {
  var lcStrArr = str.toLowerCase().split(" "); 
  var firstLetterArr = [], fixedStrArr = [];  
  for (var i = 0; i < lcStrArr.length; i++) {
     var firstLetters = lcStrArr[i].charAt(0).toUpperCase(); 
     firstLetterArr.push(firstLetters);
     var fixedStr = lcStrArr[i].replace(lcStrArr[i][0], firstLetterArr[i][0]);
     fixedStrArr.push(fixedStr); 
     console.log(fixedStrArr);
     var sentenceCaseStr = fixedStrArr.join(" ");  
  }
  return sentenceCaseStr;
}
titleCase("I'm a little teapot");
Jorge
@OrangeKulture
Aug 23 2017 18:36
@SkyC0der waaahaha @ talked to us back in july !! hahaha
Aysun Sachir
@AysunSachir
Aug 23 2017 18:37
@Feldbot place var sentenceCaseStr = fixedStrArr.join(" "); after the }.
Jan Shah
@JanShah
Aug 23 2017 18:38

@Feldbot

var sentenceCaseStr = fixedStrArr.join(" ");

is declared inside the loop, the return doesn't know what it is

Siddarth Krishnan
@siddarthk123
Aug 23 2017 18:46
hello
can someone help me
fill up a circle
fill up a circle
pomodoro clock
like when the seconds go down
the clock should fill up according to the clock.
i mean
according to the number of seconds left.
Jan Shah
@JanShah
Aug 23 2017 18:51
@siddarthk123 canvas is a good bet
Siddarth Krishnan
@siddarthk123
Aug 23 2017 18:52
jan shah
how would i do it using a canvas?
Siddarth Krishnan
@siddarthk123
Aug 23 2017 18:54
yeah
but how would i fill up the circle?
Jan Shah
@JanShah
Aug 23 2017 18:54
how do you want it filled?
Siddarth Krishnan
@siddarthk123
Aug 23 2017 18:54
like
when the seconds go down
i want the circle to fill up gradually.
Jan Shah
@JanShah
Aug 23 2017 18:54
similar to a clock face or like a filling cup?
Siddarth Krishnan
@siddarthk123
Aug 23 2017 18:55
like filling a cup
yeah
Moisés Man
@moigithub
Aug 23 2017 18:55
r u using canvas ?
Siddarth Krishnan
@siddarthk123
Aug 23 2017 18:55
yes.
so how would you do it?
Moisés Man
@moigithub
Aug 23 2017 18:56
using divs would be easier
Łukasz Sobek
@lukaszsobek
Aug 23 2017 18:57
@siddarthk123 basically you redraw the canvas
Jan Shah
@JanShah
Aug 23 2017 18:57
I would draw a circle, use a composite operation to mask it, draw a rectangle underneath the mask that goes up as it fills.
Moisés Man
@moigithub
Aug 23 2017 18:57
on canvas u would need to draw 2 things.. the empty circle
and inside an "filled" arc <-- this one changes.. redrawing bigger one each time
Gulsvi
@gulsvi
Aug 23 2017 19:01
@OrangeKulture I'm sure that's 100% AI responding to us :p
BrianWilliams28
@BrianWilliams28
Aug 23 2017 19:14
@SkyC0der any suggestions on what to change?
function sumFibs(num) {
  var arr = [1,1];

  for (var i = 0; i <= num; i++) {
  var nextNumber = arr[arr.length - 1] + arr[arr.length - 2];
    arr.push(nextNumber);
  }

  var oddNumbers = arr.filter(function(n) {
    if (n % 2 != 0) {
      return arr.slice();
    }
  })
var sumOdd = oddNumbers.reduce(function(sum, value) {
  return sum + value;
})
console.log(sumOdd);
  return sumOdd;

}

sumFibs(4); // outputs 23 but should output 5.
Daniel Feldman
@Feldbot
Aug 23 2017 19:18
@JanShah I wonder why it passes the tests if the return is out of scope...
BrianWilliams28
@BrianWilliams28
Aug 23 2017 19:19
i hate this algorithm, ive crashed code pen already 50 times experimenting with different loops
Moisés Man
@moigithub
Aug 23 2017 19:19
u generating too much fib. numbers @BrianWilliams28
BrianWilliams28
@BrianWilliams28
Aug 23 2017 19:19
@moigithub yeah i know
Daniel Feldman
@Feldbot
Aug 23 2017 19:21
@JanShah @AysunShack Aha! Thanks for the help there.
CamperBot
@camperbot
Aug 23 2017 19:21
feldbot sends brownie points to @janshah and @aysunshack :sparkles: :thumbsup: :sparkles:
:cookie: 244 | @aysunshack |http://www.freecodecamp.com/aysunshack
:cookie: 485 | @janshah |http://www.freecodecamp.com/janshah
Siddarth Krishnan
@siddarthk123
Aug 23 2017 19:22

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();

ctx.font="20px Georgia";

ctx.globalCompositeOperation="destination-over"

ctx.fillRect(100, 70, 75, 50)

function startTimer(){
var numberOfSecondsToRun = document.getElementById("numberOfSecondsToRun").value
var parsedSecondsToRun = parseInt(numberOfSecondsToRun)

var timex = setInterval(function(){ alert("Hello"); }, 50);

}

this isnt producing
the rectangle
behind the circle
for some reason.
i dont know why.
Moisés Man
@moigithub
Aug 23 2017 19:24
then play with the fillREct values
x1, y1, x2, y2
Siddarth Krishnan
@siddarthk123
Aug 23 2017 19:24
no
i dont think it has to do with that
take a look right here
Moisés Man
@moigithub
Aug 23 2017 19:25
those 2 images need to overlap
Siddarth Krishnan
@siddarthk123
Aug 23 2017 19:25
youll see what i mean
Moisés Man
@moigithub
Aug 23 2017 19:25
the other think its the mask u use
ctx.globalCompositeOperation="destination-over"
Siddarth Krishnan
@siddarthk123
Aug 23 2017 19:25
yeah
Jan Shah
@JanShah
Aug 23 2017 19:25
done it
Siddarth Krishnan
@siddarthk123
Aug 23 2017 19:26
but destination-over is not taking any effect.
what is my problem?
Siddarth Krishnan
@siddarthk123
Aug 23 2017 19:27
why is mine to working
did anyone take a look at my code pen?
not*
Moisés Man
@moigithub
Aug 23 2017 19:28
u need to fill the circle
@siddarthk123
Moisés Man
@moigithub
Aug 23 2017 19:28
ctx.fillStyle = "blue";
ctx.fill();
n change ur mask
Siddarth Krishnan
@siddarthk123
Aug 23 2017 19:30
so its because the circle is white not filled?
that's why?
how do you fill the circle?
Gulsvi
@gulsvi
Aug 23 2017 19:32
@siddarthk123 There's a much easier way to do this with CSS. Use linear-gradient backgrounds
I haven't tried canvas, but it all confuses me :p
@BrianWilliams28 That code crashes my browser - is it working for you?
Jan Shah
@JanShah
Aug 23 2017 19:46
@SkyC0der that's a really nice solution
Gulsvi
@gulsvi
Aug 23 2017 19:47
@JanShah I should give canvas a try though
This CSS solution should be really easy to animate with jQuery, a bit more challenging with vanilla JS. Need to parse those percentages out of the css
Moisés Man
@moigithub
Aug 23 2017 19:50
Jan Shah
@JanShah
Aug 23 2017 19:51
@moigithub awesome!
Gulsvi
@gulsvi
Aug 23 2017 19:51
@moigithub Easier to animate :)
Jan Shah
@JanShah
Aug 23 2017 19:58
Gulsvi
@gulsvi
Aug 23 2017 19:59
Nice! @JanShah :)
And then there's this one: https://s.codepen.io/anon/pen/RZJevM
(not mine)
Poor siddarth has given up I think at this point
Stein-T Dale
@Lofthur
Aug 23 2017 20:10
Hi. I'm doing the markup previewer. Everything works, but i can see that in the example there are some highlights on the monospace. Is there an extra library used in the example?
CuttureSync
@culturesync
Aug 23 2017 20:43
@khaduch Thanks for your input There's a lot that I'm obviously working on to make it more responsive for smaller viewports . I'm just looking for opinions on the UX of the site so far. Im very new to JS and have basic experience with coding in general. I've teken a break and right now I'm trying to resharpen my skills by creating this Non-Profit project. Your input is really helpfull. :bow: :sparkles:
:point_up: August 22, 2017 4:55 PM
CamperBot
@camperbot
Aug 23 2017 20:43
culturesync sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3234 | @khaduch |http://www.freecodecamp.com/khaduch
Gulsvi
@gulsvi
Aug 23 2017 20:47
@Lofthur That's bootstrap formatting, but you could use a library like highlight.js to take it a step further
Stein-T Dale
@Lofthur
Aug 23 2017 20:49
@SkyC0der Ahh. Thanks. I just got highlight.js to work now :D
CamperBot
@camperbot
Aug 23 2017 20:49
lofthur sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2547 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 23 2017 20:49
Nice :)
Stein-T Dale
@Lofthur
Aug 23 2017 20:50
@SkyC0der Can I ask you something else. Easy way to put react projects on codepen? I have done this locally, but we do have to post a pen when the project is done...
Gulsvi
@gulsvi
Aug 23 2017 20:52
@Lofthur You can deploy to github if you prefer - or anywhere really. In codepen though, it's fairly easy - add react.js, react-dom.js, and set your JS preprocessor to Babel. Here's a template you can fork: https://s.codepen.io/anon/pen/YxvRdB
Stein-T Dale
@Lofthur
Aug 23 2017 20:52
@SkyC0der Thanks again :D
CamperBot
@camperbot
Aug 23 2017 20:52
lofthur sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: lofthur already gave skyc0der points
Gulsvi
@gulsvi
Aug 23 2017 20:54
@Lofthur I forgot to add marked.min.js - refresh that template or add it manually in Settings -> JavaScript
Stein-T Dale
@Lofthur
Aug 23 2017 20:55
Sweet :D
lawrencelee93
@lawrencelee93
Aug 23 2017 20:58
hey guys
so i am pretty new to css and html
when i zoom out, my footer doesn't respond with the entire background :/
Gulsvi
@gulsvi
Aug 23 2017 21:01
footers are hard sometimes
@lawrencelee93 Maybe start by changing height: 150px to min-height: 150px and remove position: absolute from your col-sm-2 ul selector
lawrencelee93
@lawrencelee93
Aug 23 2017 21:06
that did fix one problem
but I am trying to set it where the footer will always stay on the bottom :/
Gulsvi
@gulsvi
Aug 23 2017 21:15
@lawrencelee93 My approach for a sticky footer is to wrap all of your content between the nav and the footer in <main></main> tags, then do:
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1 0 auto;
}
Daniel
@dkapexhiu
Aug 23 2017 21:17
Please what am i doing wrong in this code? https://codepen.io/dkapexhiu/pen/RZJqZq
korzo
@korzo
Aug 23 2017 21:24
@dkapexhiu quote is undefined in var quote1 = Object.create(quote);
Daniel
@dkapexhiu
Aug 23 2017 21:25
good it solved
how about to generate a random quote? where am i wrong?
korzo
@korzo
Aug 23 2017 21:27

@dkapexhiu

function showRandom(){
    _('display').innerHTML = random(array);
}

array is undefined

Daniel
@dkapexhiu
Aug 23 2017 21:31
i've changed it into this code:
function showRandom(){
_('display').innerHTML = random(nquotes);
}
now it displays [object Object].. i want it to display a random quote from the array. what can i do?
korzo
@korzo
Aug 23 2017 21:34
@dkapexhiu innerHtml expects string, not object
Daniel
@dkapexhiu
Aug 23 2017 21:35
ah ok i understand.. is anyway to fix it?
korzo
@korzo
Aug 23 2017 21:35
@dkapexhiu maybe random(nquotes).describe()
Daniel
@dkapexhiu
Aug 23 2017 21:36
it solved
thank you very much @korzo
CamperBot
@camperbot
Aug 23 2017 21:36
dkapexhiu sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 405 | @korzo |http://www.freecodecamp.com/korzo
korzo
@korzo
Aug 23 2017 21:37
@dkapexhiu Glad to help. Happy coding
CuttureSync
@culturesync
Aug 23 2017 21:49
@lawrencelee93
I thought I would help out a bit on your codepen. I like doing sticky footers with the following calc code added to the .body element min-height: calc(100vh - 250px); I added margin to your .text-center after realizing that the element is the main body of text in your page. So if you set it to 15% t/b & l/r (like below) the text area will always be 15% away from the t/r/l/b. Then with your .site-footer I added bottom:0; and width:100%;and left your height: property the same.
.text-center {
  margin: 15% 15%;
  color: white;
  font-family: 'Fjalla One', sans-serif;
}

.site-footer {
  color: white;
  background-color: #263238 !important;
  bottom: 0;
  height: 150px;
  width: 100%;
}
@lawrencelee93 Here's the forked pen I worke on
Click here to View
lawrencelee93
@lawrencelee93
Aug 23 2017 21:57
when i make my browser smaller though, the position isn't really fixed :/
CuttureSync
@culturesync
Aug 23 2017 21:59
you mean the content of the footer isn't really fixed?
lawrencelee93
@lawrencelee93
Aug 23 2017 21:59
correct
CuttureSync
@culturesync
Aug 23 2017 22:00
That issue I think would be found in the text area of the footer then. Lemme check out the content and see what I can doo
;) brb
lawrencelee93
@lawrencelee93
Aug 23 2017 22:00
but at the same time if i do position: fixed;
as i scroll down the page, the footer continues to be there :(
Gulsvi
@gulsvi
Aug 23 2017 22:01
@lawrencelee93 The suggestions I gave above forked here in case it helps clarify: https://s.codepen.io/anon/pen/OjErdm?editors=0100
lawrencelee93
@lawrencelee93
Aug 23 2017 22:07
Thank you Sky
that does help but right now when i decrease the dimensions on the page, the text in the center moves but the picture isnt moving with the words :'(
Pagnito
@Pagnito
Aug 23 2017 22:09
@SkyC0der yo
Gulsvi
@gulsvi
Aug 23 2017 22:09
The bootstrap grid will help with that - if you ever think you need to use a float, and you're using bootstrap, use the grid instead.
Hey @Pagnito
CuttureSync
@culturesync
Aug 23 2017 22:10
@lawrencelee93 Then you might want to go with Sky's fix and then use bootstrap grid for the content that's in the body of teh page
Pagnito
@Pagnito
Aug 23 2017 22:11
@SkyC0der what am i doing wrong here
i cant get the collapsible to work in codepen too lol
Gulsvi
@gulsvi
Aug 23 2017 22:13
Hmmmm
@Pagnito Your react is overwriting all the HTML
I updated your settings to use the latest materialize and re-organized the loading of your react scripts
But nothing worked until I deleted your react code
Pagnito
@Pagnito
Aug 23 2017 22:17
try to render the collapsible thru react
React breaks it when I do that lol
Looks like more is needed to use materialize with React
Pagnito
@Pagnito
Aug 23 2017 22:23
yea seems like it
Gaurav
@gauravmagan
Aug 23 2017 22:27
hi @SkyC0der hope you are doing great haha
was really struck with "redundant default attribute value assignment javascript"
for a text input field
Gulsvi
@gulsvi
Aug 23 2017 22:29
Is that in the beta
?
Gaurav
@gauravmagan
Aug 23 2017 22:30
no on a form im just trying to pass data from one page to another
Screen Shot 2017-08-23 at 6.30.39 PM.png
Screen Shot 2017-08-23 at 6.31.48 PM.png
whats exactly with this
Gulsvi
@gulsvi
Aug 23 2017 22:33
no idea
looks like it's coming from your linter
Gaurav
@gauravmagan
Aug 23 2017 22:33
oh
alpox
@alpox
Aug 23 2017 22:42
@gauravmagan definitely is the linter. It just tells you that setting the type to text is not necessary because thats the default type od an input.
Gaurav
@gauravmagan
Aug 23 2017 22:44
oh ok
thank you
thank you @alpox
CamperBot
@camperbot
Aug 23 2017 22:44
gauravmagan sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1315 | @alpox |http://www.freecodecamp.com/alpox
CuttureSync
@culturesync
Aug 23 2017 22:45

@lawrencelee93 :point_up: August 23, 2017 3:07 PM

This fork fixed the issue you were experiencing with Sky's fix... I basically combined Sky's fix with My fix and it turns out the way I think you want it. I made comments inside the CSS and HTML to explain what I changed and why.
Click here to view

Gaurav
@gauravmagan
Aug 23 2017 22:45
is there any way to see the data transferred into the other page from browser console
J Patrick Lanigan
@planigan
Aug 23 2017 22:47
@OrangeKulture: real person. i just use the Gitter to IRC gateway with irssi. seems to make some ppl think i'm a bot because it marks every msg as read in gitter.
or something like that
also, the gitter to irc gateway is really unstable, so, i have a cron.pl job that disconnects and reconnects every 20 minutes, or else i hardly see any messages
does gitter show part/join messages?
Gaurav
@gauravmagan
Aug 23 2017 23:02
im trying to transfer data from one page to another only by using javascript can anyone share me a code snippet please
Gulsvi
@gulsvi
Aug 23 2017 23:06
@gauravmagan I believe you need to build up a JSON object and then post that to the server, so you should be able to console.log() your object before your POST
Gaurav
@gauravmagan
Aug 23 2017 23:07
yes but can would like to do with the pure js
Gulsvi
@gulsvi
Aug 23 2017 23:08
Yeah, that's the only way to do it
Gaurav
@gauravmagan
Aug 23 2017 23:08
like using js variable and functions
Jorge
@OrangeKulture
Aug 23 2017 23:08
@planigan oh hey! haha yeah i did think you were real, was just making a joke before i left this morning
Gulsvi
@gulsvi
Aug 23 2017 23:08
Exactly @gauravmagan
Jorge
@OrangeKulture
Aug 23 2017 23:08
it does make every msg on gitter appear as read by you tho
Gaurav
@gauravmagan
Aug 23 2017 23:08
oh do you any code snippets
Pagnito
@Pagnito
Aug 23 2017 23:09
@SkyC0der i made it work in codepen but still cant seem to figure it out with webpack
Gulsvi
@gulsvi
Aug 23 2017 23:09
no, but you would get the value of all your <input> elements and add them to an object
Fairly straight forward
var myObj = {};
myObj["userName"] = userNameInputField.value
J Patrick Lanigan
@planigan
Aug 23 2017 23:10
@OrangeKulture: no worries, I saw the message in my mentions window and this is not the first time someone has been convinced i was a bot :-)
Gulsvi
@gulsvi
Aug 23 2017 23:11
@Pagnito What version is webpack pulling in? I think collapsibles are newer from v1.x?
Jorge
@OrangeKulture
Aug 23 2017 23:11
i can tell you it is quite nice to have you appear in chat hahah .. makes one feel reassured :D
Pagnito
@Pagnito
Aug 23 2017 23:11
i got the latest webpack
Gulsvi
@gulsvi
Aug 23 2017 23:11
I mean what version is materialize.css and js?
(assume you can specify what version you want)
J Patrick Lanigan
@planigan
Aug 23 2017 23:12
lol
Gulsvi
@gulsvi
Aug 23 2017 23:12
I kind of wish we had a word cloud for this chat room
Pagnito
@Pagnito
Aug 23 2017 23:12
"^1.0.10"
oh wait
no thats materialize-react i installed
J Patrick Lanigan
@planigan
Aug 23 2017 23:13
i haven't really hung out in FCC channels in a really long time, but the irc bridge joins every channel i have joined in gitter, and i still hang out in spacemacs a little on gitter
Pagnito
@Pagnito
Aug 23 2017 23:13
0.100.1
Gulsvi
@gulsvi
Aug 23 2017 23:13
yeah, that's the latest
No idea man... :(
Pagnito
@Pagnito
Aug 23 2017 23:13
0.100.1 is the latest?
Jorge
@OrangeKulture
Aug 23 2017 23:15
@planigan ahh ok thats cool.. yeah i havent used IRC since the good ol days when that was pretty much the only way to exchange files
Gulsvi
@gulsvi
Aug 23 2017 23:15
Yes @Pagnito that's the latest
Pagnito
@Pagnito
Aug 23 2017 23:15
hmm
there is something im doing wrong, cuz my click events arent working either
J Patrick Lanigan
@planigan
Aug 23 2017 23:15
@OrangeKulture: i use it because gitter is god awful slow and i am on freenode anyway
Jorge
@OrangeKulture
Aug 23 2017 23:16
yeah it is a lil weird, gitter ...
in any case, ive got your back .. if anyone says you're a bot, ill set them straight :joy:
J Patrick Lanigan
@planigan
Aug 23 2017 23:17
lol, thanks @OrangeKulture :-)
CamperBot
@camperbot
Aug 23 2017 23:17
planigan sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 438 | @orangekulture |http://www.freecodecamp.com/orangekulture
Jorge
@OrangeKulture
Aug 23 2017 23:17
hahah sure thing!
J Patrick Lanigan
@planigan
Aug 23 2017 23:17
lol, nearly forgot about camperbot :-)
Gulsvi
@gulsvi
Aug 23 2017 23:17
haha, that's some very advanced AI you're talking to @OrangeKulture
Jorge
@OrangeKulture
Aug 23 2017 23:18
yeah i have a dream .. of me and Sky making camperbot the ultimate epic meme bot generator .. has the exact meme for every occasion
Gulsvi
@gulsvi
Aug 23 2017 23:18
lol
allyourbase is all we have now :(
CamperBot
@camperbot
Aug 23 2017 23:19
all your base
Gulsvi
@gulsvi
Aug 23 2017 23:19
#ancientmemes
Jorge
@OrangeKulture
Aug 23 2017 23:19
waahahah
yeah .. needs a revamp asap
Gulsvi
@gulsvi
Aug 23 2017 23:19
holler
holla
oh well...
Jorge
@OrangeKulture
Aug 23 2017 23:19
yeha was sort of like cowboy like .. wth
Gulsvi
@gulsvi
Aug 23 2017 23:21
Since I'm being stubborn and not learning react, I updated my Camper Leaderboard to use session storage and reduced it to 15 lines of JS :) https://codepen.io/skycoder/pen/xLXmEL?editors=1010
Of course, still no pomodoro, tic-tac-toe, or simon.
Jorge
@OrangeKulture
Aug 23 2017 23:21
ive found angular more entertaining tbh
not a popular opinion, ive found
Gulsvi
@gulsvi
Aug 23 2017 23:21
I've been hearing that angular is making a comeback. MEAN back in style again
Jorge
@OrangeKulture
Aug 23 2017 23:22
ohh yeah dude .. love me some mean stack
J Patrick Lanigan
@planigan
Aug 23 2017 23:23
lot's of enterprise type jobs in my region that use angular. i wish i didn't hate it so much. i love react to much.
too*
sorry, no editted message on the irc bridge
Gaurav
@gauravmagan
Aug 23 2017 23:24
sky i got this
@SkyC0der
Gulsvi
@gulsvi
Aug 23 2017 23:24
I'll figure out if I need to learn React/Angular after the school year :)
Jorge
@OrangeKulture
Aug 23 2017 23:24
yeah i used to hate angular ... seemed so much work
Gaurav
@gauravmagan
Aug 23 2017 23:24
but the thing is its using jquery which is also fine
Jorge
@OrangeKulture
Aug 23 2017 23:24
but once you kinda understand all the parts, its a blessing
specially angular CLI
god sent
Gaurav
@gauravmagan
Aug 23 2017 23:24
i want to show it in the next page
@SkyC0der
Gulsvi
@gulsvi
Aug 23 2017 23:25
@gauravmagan Something like that should work - as long as the server knows what to do with the data
J Patrick Lanigan
@planigan
Aug 23 2017 23:25
yeah, i have really bought into jsx. i like it so much more than all the ng stuff in html.
Gaurav
@gauravmagan
Aug 23 2017 23:26
is there any possibility to call the jquery function in next page
and review the form? @SkyC0der
Gulsvi
@gulsvi
Aug 23 2017 23:27
@gauravmagan I don't think so :/ but this is beyond anything I've tried before
Gaurav
@gauravmagan
Aug 23 2017 23:27
yes there are two possibilities
get data by url
and get data by json
Jorge
@OrangeKulture
Aug 23 2017 23:28
yeah also ng directives being injected into the html is insanely useful
im stuck on unit testing .. kinda suck at that atm
J Patrick Lanigan
@planigan
Aug 23 2017 23:29
i would really like to get better at testing. it's not very intuitive with react.
just1witness
@just1witness
Aug 23 2017 23:32
K, so yeah, I know this code is really bad and probably doesn't make a lot of sense, but even so I am SOOOO close to passing the test! (after I pass... if I pass, I will then watch a bunch of tutorials on it and learn how to do it right) This is my solo run through with my limited knowledge. So, the question is, now that I got it returning the correct format and only money values under the change that's due, how do I get it to return as many of each value that is needed equal the changeDue amount? I am assuming I would use % somehow, but i'm having trouble wrapping my mind around it. (on the plus side I get for loops now! :grinning: ) For instance changeDue = .50 returns one of each value under .50 , one quarter, one dime, one nickel, and one penny. How would I get it to return TWO quarters?
 var monVal = [
    {value: 100.00},
    {value: 20.00},
    {value: 10.00},
    {value: 5.00},
    {value: 1.00},
    {value: 0.25},
    {value: 0.10},
    {value: 0.05},
    {value: 0.01},
  ];

  var monName = [
    {name: "ONE HUNDRED"},
    {name: "TWENTY"},
    {name: "TEN"},
    {name: "FIVE"},
    {name: "ONE"},
    {name: "QUARTER"},
    {name: "DIME"},
    {name: "NICKEL"},
    {name: "PENNY"},
  ];

function checkCashRegister(price, cash, cid) {
  var answer = [];
  var changeDue = (cash - price) * 100;
  var CID = (cid.reduce(function(acc,val){
    return acc+val[1]*100;
  },0));


  if (changeDue === CID) {
    return 'Closed';
  }
  if (changeDue > CID/100){
    return 'Insufficient Funds';
  }


  for (var i = 0; i < monVal.length; i++) {
    if(Object.values(monVal[i]) <= changeDue/100){
     answer.push(Object.values(monName[i]) + ", " + Object.values(monVal[i]));

    }
  }  
 return answer;  
}

checkCashRegister(19.50, 20.00, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.10], ["QUARTER", 4.25], ["ONE", 90.00], ["FIVE", 55.00], ["TEN", 20.00], ["TWENTY", 60.00], ["ONE HUNDRED", 100.00]]);
BrianWilliams28
@BrianWilliams28
Aug 23 2017 23:35
@SkyC0der did you say that this code crashes your browser?
function sumFibs(num) {
  var arr = [1,1];

  for (var i = 0; i <= num; i++) {
  var nextNumber = arr[arr.length - 1] + arr[arr.length - 2];
    arr.push(nextNumber);
  }

  var oddNumbers = arr.filter(function(n) {
    if (n % 2 != 0) {
      return arr.slice();
    }
  })
var sumOdd = oddNumbers.reduce(function(sum, value) {
  return sum + value;
})
console.log(sumOdd);
  return sumOdd;

}

sumFibs(4); // should return 5.
Gulsvi
@gulsvi
Aug 23 2017 23:42
@BrianWilliams28 Yes, when I ran it in the free code camp challenge page
In codepen it seems to work okay - but arr is too big
BrianWilliams28
@BrianWilliams28
Aug 23 2017 23:43
yeah i know
i need to modify the loop in some way
any suggestions?
Gulsvi
@gulsvi
Aug 23 2017 23:44
Use a while loop :)
BrianWilliams28
@BrianWilliams28
Aug 23 2017 23:44
i tried that, but i couldnt figure out how to write it without crashing my codepen 5 million times lol
Gulsvi
@gulsvi
Aug 23 2017 23:44
I guess your for loop could work if you make it so i <= arr[arr.length - 1] + arr[arr.length - 2]
BrianWilliams28
@BrianWilliams28
Aug 23 2017 23:46
@SkyC0der that just crashed my codepen xD
Gulsvi
@gulsvi
Aug 23 2017 23:46
That worked for me in my codepen lol
BrianWilliams28
@BrianWilliams28
Aug 23 2017 23:46
what does your loop look like?
J Patrick Lanigan
@planigan
Aug 23 2017 23:48
i think modifying your arr in filter is a bad idea. that could be where you are having issues
Gulsvi
@gulsvi
Aug 23 2017 23:49
uggh, I don't know what I did
while loop is very straightforward, and better than for loop for this
J Patrick Lanigan
@planigan
Aug 23 2017 23:49
let oddNumbers = arr.filter(n => n % 2 !== 0) will do what you are after.
Gulsvi
@gulsvi
Aug 23 2017 23:52
furthermore, with a while loop - you can add a line that checks if nextNumber is odd - if so, add it to a running total
no need for another loop
J Patrick Lanigan
@planigan
Aug 23 2017 23:55
nm what i said. i don't understand your filter, but i tried it and it works.
do either of you have a link to a codepen where it is crashing so i can play with it?
BrianWilliams28
@BrianWilliams28
Aug 23 2017 23:58
@SkyC0der how would you write the while loop in this case? I'm reluctant to try it again for fear of constantly re-crashing my browser.
i'm pretty noob with while loops
havent used em much at all yet
Gulsvi
@gulsvi
Aug 23 2017 23:59
var num = 100;
var arr = [1,1];
var nextNum = 2;

while (nextNum <= num) {
  arr.push(nextNum);
  nextNum = arr[arr.length - 1] + arr[arr.length - 2];
}

console.log(arr);