These are chat archives for FreeCodeCamp/HelpFrontEnd

12th
Dec 2017
A-J Roos
@Asjas
Dec 12 2017 00:00
@AbrisM You need to style the element. There is no css currently for it. You can set it's widht to 250px and see if your content fits or if it needs to be larger
Linus Phan
@linusphan
Dec 12 2017 00:24
Hey guys, for the weather app, why would I need to connect to codepen.io?
A-J Roos
@Asjas
Dec 12 2017 00:26
@linusphan You don't
Linus Phan
@linusphan
Dec 12 2017 00:28
okay, it says so in the instructions that why I asked
A-J Roos
@Asjas
Dec 12 2017 00:53
You need to host on codepen and link to it. You don't connect to codepen.
hey guys, can anyone help me with this? I am trying to toggle the temperature but can't seem the way to do it. I don't know if it's because I structured my code very poorly
A-J Roos
@Asjas
Dec 12 2017 01:52
@linusphan You need to create a button to trigger. You're triggering a function on someone clicking on a span that is hidden. Which is un-clickable
Linus Phan
@linusphan
Dec 12 2017 01:57
the span has the letter inside it though right?
@Asjas thanks so much for your reply
CamperBot
@camperbot
Dec 12 2017 01:57
linusphan sends brownie points to @asjas :sparkles: :thumbsup: :sparkles:
:cookie: 317 | @asjas |http://www.freecodecamp.org/asjas
Linus Phan
@linusphan
Dec 12 2017 01:57
I have been stuck on it this whole time...
It's hidden at first, but later it gets populated right?
oh wait nv
nvm
in my code, I never populated it!
@Asjas yes it works now!
=)
I just had to make it clickable. you were right
AbrisM
@AbrisM
Dec 12 2017 02:07
Does anyone know how to load multiple html documents into codepen?
Linus Phan
@linusphan
Dec 12 2017 02:10
@AbrisM You can create multiple pens?
AbrisM
@AbrisM
Dec 12 2017 02:11
I could, but how would that display all the pages in a website? :)
It'll have broken links
Linus Phan
@linusphan
Dec 12 2017 02:15
I think you can try to change the href links
to the right codepen links?
does anyone know if this is a valid statement?

  $(".temp-unit").on("click", function() {
    console.log("out");
    if ($(".temp-unit") == "C") {
      console.log("inside");
    }
    else {
      console.log("not C");
    }  
  });
Linus Phan
@linusphan
Dec 12 2017 02:22
When I click on "C" it does not say "inside". It says "not C". I'm confused
i am guessing that's not how you use jquery's $()
nvm guys, figured it out
=)
Kaz Baig
@kbaig
Dec 12 2017 02:45
@linusphan $(".temp-unit")doesn't get the value, just selects it
o awk didn't see you got it
Linus Phan
@linusphan
Dec 12 2017 02:46

  $(".temp-unit").on("click", function() {
    if ($(".temp-unit").text() == "C") {
      $(".temp-unit").text("F");
      $(".temperature").text(($(".temperature").text() * 1.8) + 32);
    }

    if ($(".temp-unit").text() == "F") {
      $(".temp-unit").text("C");
      $(".temperature").text(($(".temperature").text() - 32) / 1.8);
    }
  });
I'm still stuck thouguh
it's frustrating
Kaz Baig
@kbaig
Dec 12 2017 02:47
@AbrisM you could host your site for free on github pages instead
@linusphan what are you having trouble with
Linus Phan
@linusphan
Dec 12 2017 02:48
i'm trying to get the toggling effect
but it's not working T_T
that's my codepen
and my code also ignored the fact that Im not using ° too
A-J Roos
@Asjas
Dec 12 2017 02:52
@linusphan Instead of two if statements just use an if else statement
$(".temp-unit").on("click", function() {
    if ($(".temp-unit").text() == "C") {
      $(".temp-unit").text("F");
    }else {
      $(".temp-unit").text("C");

    }
  });
Linus Phan
@linusphan
Dec 12 2017 02:55
it didn't work because of 2 if's?
A-J Roos
@Asjas
Dec 12 2017 02:56
It's bad logic creating two if's. if else exists.
and as you see it's causing code problems
Linus Phan
@linusphan
Dec 12 2017 02:56
i didn't know that
I used to use multiple if's no problem
even if it looked bad
A-J Roos
@Asjas
Dec 12 2017 02:56
O.o
no. use if else or switch
A-J Roos
@Asjas
Dec 12 2017 03:03
@linusphan To explain to you what is happening when using two if's in this function. You check if it's the letter C and set it to F and then check if it's F and set it back to C. Both equal true so you get C constantly back. A true if statement does not exit a function it just continues. That is why you specifically need a if / else statement
Linus Phan
@linusphan
Dec 12 2017 03:04
@Asjas omg
thanks for helping me understand
also, thank you so much for all of your help! @Asjas I finally got it down!
CamperBot
@camperbot
Dec 12 2017 03:04
linusphan sends brownie points to @asjas :sparkles: :thumbsup: :sparkles:
:cookie: 318 | @asjas |http://www.freecodecamp.org/asjas
A-J Roos
@Asjas
Dec 12 2017 03:04
Pleasure. Took me a while to figure that out too :)
Linus Phan
@linusphan
Dec 12 2017 03:08
You figured it out though =)
it helps me too
That's my project now!
It's not officially complete, but it is basically functional! =)
I'll leave it alone for now
A-J Roos
@Asjas
Dec 12 2017 03:10
You can look at using toFixed() when calculating and returning the temperature to limit it to 0 or 2 decimals. It's currently returning almost 12 or so decimals
But the rest of the functionality looks really good
Linus Phan
@linusphan
Dec 12 2017 03:13
thanks for the positive feedback =)
And tip
i corrected it
A-J Roos
@Asjas
Dec 12 2017 03:13
Nice!
Need help making this responsive!
Sorin Ruse
@sorinr
Dec 12 2017 03:34
@dmkim2001 the class is img-fluid not img-responsive in BS4
primuscovenant
@primuscovenant
Dec 12 2017 05:05
@heroiczero tx
CamperBot
@camperbot
Dec 12 2017 05:05
primuscovenant sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2103 | @heroiczero |http://www.freecodecamp.org/heroiczero
Riddos
@Riddos
Dec 12 2017 05:29
how would you centre and image within a <div>
Isaiah Trembley
@IsaiahCT
Dec 12 2017 05:30
lie this
Riddos
@Riddos
Dec 12 2017 05:33
it centers it but now the actual title of the text
Isaiah Trembley
@IsaiahCT
Dec 12 2017 05:34
//in the css if the div has a class or id name
//telling us the width and hiehg of the div
div {
    height: 100px;
    width: 960px;
    padding-bottom: 10px;
}
//this makes the img within the element have no margin, and what ever is to big dissappears
div img {
    border: none;
    display: block;
    margin: 0 auto;
}
try that
Riddos
@Riddos
Dec 12 2017 05:37
hmm still stuggling
here is my pen
@IsaiahCT appreciate your help gotta run to work ill keep working on this tomorrow.
Isaiah Trembley
@IsaiahCT
Dec 12 2017 05:41
I will dm you
Riddos
@Riddos
Dec 12 2017 05:46
@IsaiahCT okay :smile:
iso
@iso1048
Dec 12 2017 05:58
Hi. Does it actually matter whether or not you use quotes when giving attribute names? e.g. id=myDiv vs id='myDiv'
Eric Yohansa
@eyohansa
Dec 12 2017 06:07
That's a good question. I just tested it, thinking it might at least affect how JavasScript selector would work on it but it apparently works perfectly fine.
So the only disadvantage that I see from not having the quotes is you may not have whitespace in your ID name.
iso
@iso1048
Dec 12 2017 06:10
@eyohansa yeah it worked fine in codepen without quotes so was just wondering if I should continue doing that since. Yeah good point. Thanks man.
CamperBot
@camperbot
Dec 12 2017 06:10
gothamknight sends brownie points to @eyohansa :sparkles: :thumbsup: :sparkles:
:cookie: 292 | @eyohansa |http://www.freecodecamp.org/eyohansa
One more thing
My text goes off my jumbotron when the screen gets small
how do i fix this?
Markus Kiili
@Masd925
Dec 12 2017 06:23
@gothamknight You cannot use space chahacters or ", ', =, <, or > on attribute values if you don't have quotes.
iso
@iso1048
Dec 12 2017 06:38
@Masd925 thanks man
CamperBot
@camperbot
Dec 12 2017 06:38
gothamknight sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4604 | @masd925 |http://www.freecodecamp.org/masd925
jamesbcn
@jamesbcn
Dec 12 2017 07:59
hello all, i'm looking to convert a simply jquery function into angular/typescript rather than having to install jquery into my angular project. https://refreshless.com/nouislider/slider-read-write/ any help appreciated
Nimai Walsh
@nimaiwalsh
Dec 12 2017 08:01
Does any one know a simple way to make Twitti API calls from the client side? I'm only good at Front End at the moment and do not know how to do server side stuff
Markus Kiili
@Masd925
Dec 12 2017 08:06
@jamesbcn What function do you mean?
A_A
@Otto-AA
Dec 12 2017 08:07
@nimaiwalsh Twitti API? Twitch API? Twitter API? ...?
Nimai Walsh
@nimaiwalsh
Dec 12 2017 08:07
@A_A haha my bad Twitter API
I am finding it really difficult for a simple API call without server side
OAuth is really causing problems - all I want to do is GET statuses/user_timeline
A_A
@Otto-AA
Dec 12 2017 08:13
@nimaiwalsh Sorry, I dunno O.o
Nimai Walsh
@nimaiwalsh
Dec 12 2017 08:13
@A_A - no problem :)
jamesbcn
@jamesbcn
Dec 12 2017 08:36
@Masd925 It would be the first one at the top. slider.noUiSlider.get();
Markus Kiili
@Masd925
Dec 12 2017 08:38
@jamesbcn The page says that noUiSlider doesn't have any dependencies, so you don't need to import jQuery.
jamesbcn
@jamesbcn
Dec 12 2017 08:39
@Masd925 i'd need to install it though. Also, it's not seen as good practice.
@Masd925 I believe the correct way is through using ViewChild decorator but I've not been able to get it to work
Markus Kiili
@Masd925
Dec 12 2017 08:42
@jamesbcn Are you trying to make this library work with Angular? Is that the problem?
jamesbcn
@jamesbcn
Dec 12 2017 08:43
@Masd925 Yes. I have the slider installed and in the view but it has no functionality
Vincent Yan
@envincebal
Dec 12 2017 08:52
Hey guys, I'm working on my Pomodoro Clock. When the work clock runs down and switches to the break clock, the minute digit runs a negative digit just for a brief second before switching to the proper countdown. I think it has to do with the "if" statements on lines 63 and 90. Any help would be appreciated.
Sorin Ruse
@sorinr
Dec 12 2017 09:19
@envincebal maybe u want if (minutes.textContent <= 0)
@envincebal and then clear the interval
Vincent Yan
@envincebal
Dec 12 2017 09:27
@sorinr I tried that it, it doesn't work. It will stop at 0:59 seconds because it is equal to or less than 0 minutes, which disregards the seconds.
Sorin Ruse
@sorinr
Dec 12 2017 09:31
@envincebal are you comparing same units of measure? i would change everything to seconds before comparison
@envincebal thats coz your setinterval works in miliseconds (easy to translate in seconds)
@envincebal the idea is not complicating your life in using diffrent measure units. i would just use seconds all over the code
Vincent Yan
@envincebal
Dec 12 2017 09:35
@sorinr it's not the interval seconds I'm referring to. I think the problem is the seconds on the actual clock.
Sorin Ruse
@sorinr
Dec 12 2017 09:37
@envincebal just take a look to this lib: moment.js. try reading its docs. you will find a lot of answers about dealing with dates and times
Vincent Yan
@envincebal
Dec 12 2017 09:39
@sorinr I am trying to build this without any libraries. But I will take a look at it anyways. Thanks.
CamperBot
@camperbot
Dec 12 2017 09:39
envincebal sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1373 | @sorinr |http://www.freecodecamp.org/sorinr
Vincent Yan
@envincebal
Dec 12 2017 09:40
If anyone else has any feedback, I'd appreciate it as well.
BuntyBru
@BuntyBru
Dec 12 2017 09:52

Hello all I need a small help

i have a div in my html with a certain class lets name it "first"

now i have created another class lets name it "second"

what i want is that when the user clicks on the "div"
class changes to "second " from "first" and then goes back to "first" again
the user has to click only once

I know i have to use transition and classList.toggle

but i am not able to do it

Help
A_A
@Otto-AA
Dec 12 2017 10:01
What about using the jquery toggle Class function?
$('myElement').click(function() {
   $(this).toggleClass('first');
   $(this).toggleClass('second');
});
@BuntyBru
BuntyBru
@BuntyBru
Dec 12 2017 10:16
"first " is the default class it is supposed to be there
"second" class only changes the color and opacity and outline
i have to add "second" class and then quickly remove it
@Otto-AA
A_A
@Otto-AA
Dec 12 2017 10:18
@BuntyBru What about a setTimeout?
BuntyBru
@BuntyBru
Dec 12 2017 10:21
tried
Cannot read property 'toggle' of undefined
ERROR
alpox
@alpox
Dec 12 2017 10:22
@BuntyBru Sounds like you wrote only .toggle(...) instead of .toggleClass(...)
BuntyBru
@BuntyBru
Dec 12 2017 10:22
@alpox I am using plain javascript
this.classList.toggle("selected");
alpox
@alpox
Dec 12 2017 10:23
@BuntyBru Where do you get the this from then
BuntyBru
@BuntyBru
Dec 12 2017 10:23

for(var i=0;i<p.length;i++)
{
p[i].addEventListener("click",function()
{
setTimeout(function(){
this.classList.toggle("selected");
this.classList.toggle("selected");
}, 3000);
});

}

alpox
@alpox
Dec 12 2017 10:24
console.log(this) in the setTimeout to see what it is (I guess undefined)
Markus Kiili
@Masd925
Dec 12 2017 10:24
or window
alpox
@alpox
Dec 12 2017 10:24
@Masd925 Right
BuntyBru
@BuntyBru
Dec 12 2017 10:26
Nothing comes up
Wait i am attaching the code

the aim is to produce sound when a person clicks the box

like when a person clicks box A "sound of clap is heard"

alpox
@alpox
Dec 12 2017 10:29
@BuntyBru I believe that the addEventListener does not set this for your click callback. You have to use document.getElementsByClassName or document.querySelector or bind your function to the element - or create a closure and pass p[i] as an argument, or instantiate i with let so you can use p[i] inside of the click callback
BuntyBru
@BuntyBru
Dec 12 2017 10:31
@alpox when i tried p[i], It was not working then i looked about the query over the internet and then i tried doing it through "this"
this works
@alpox ??
not able to see your message
alpox
@alpox
Dec 12 2017 10:33
@BuntyBru My message is not necessary anymore :-) It seems they add this as you say, which i didn't know. BUT in setTimeout, this becomes window again
You can do this tho:
for (let i = 0; i < p.length; i++) {
  p[i].addEventListener(
    "click",
    function() {
      var self = this;
      setTimeout(function() {
        console.log(self);
        self.classList.toggle("selected");
      })
    }
  );
}
@BuntyBru You save the this to a backup variable which you use inside of the setTimeout to go sure to keep the this
Or you use ES6 arrow functions if you are familiar with them.
BuntyBru
@BuntyBru
Dec 12 2017 10:37
by using the above command will i be able to remove the class after i add it ?
Can "transition" be used through any way?
BuntyBru
@BuntyBru
Dec 12 2017 10:46
Thanks man
@alpox
@alpox
why was my code not working even if i used "this"
alpox
@alpox
Dec 12 2017 10:50
@BuntyBru Because this inside of setTimeout is not the same anymore. There, it is bound to window
BuntyBru
@BuntyBru
Dec 12 2017 10:53
what does self.style.transition does?
alpox
@alpox
Dec 12 2017 10:53
@BuntyBru It stands for the css property transition
BuntyBru
@BuntyBru
Dec 12 2017 10:53
self.style.transition = "all 0.2s";
This statement adds the class " selected" in a span of 0.2 secs
right?
alpox
@alpox
Dec 12 2017 10:54
Not quite
BuntyBru
@BuntyBru
Dec 12 2017 10:54
self.style.transition = "all 0s";
this removes it
alpox
@alpox
Dec 12 2017 10:54
The class selected is added instantly
BuntyBru
@BuntyBru
Dec 12 2017 10:54
okay then/
?
alpox
@alpox
Dec 12 2017 10:55
But the properties which the class adds to the element get applied through a transition. The all says which properties are affected. With all, all properties are affected (The ones which CAN be transitioned). Otherwise you could set there specifically as example transform, or width etc.
The number, you're right, is 0.2 seconds then
There are properties which cannot be transitioned - the ones with nominal values.
BuntyBru
@BuntyBru
Dec 12 2017 10:57
not working on my browser
it is working on codepen though
alpox
@alpox
Dec 12 2017 10:58
Show/hide as example cannot be transitioned (display: block, display: none) i mean, there is nothing to be transitioned for a change from block to none.
opacity as example could be transitioned though.
@BuntyBru Hmm you must have done something different :-)
BuntyBru
@BuntyBru
Dec 12 2017 10:59
i copied and pasted @alpox
alpox
@alpox
Dec 12 2017 11:00
To where? Did you sure add the script to the DOM? Is the css/HTML the same?
BuntyBru
@BuntyBru
Dec 12 2017 11:01
@alpox
its working
alpox
@alpox
Dec 12 2017 11:02
@BuntyBru :thumbsup:
BuntyBru
@BuntyBru
Dec 12 2017 11:02
seems like "self" is also a keyword in javaScript
alpox
@alpox
Dec 12 2017 11:03
@BuntyBru Its no keyword. Its just also a property defined on window --> https://developer.mozilla.org/en-US/docs/Web/API/Window/self
And since window in the browser is the global scope, using self out of context will yield window.self
BuntyBru
@BuntyBru
Dec 12 2017 11:04
i changed self to "s
"s"
alpox
@alpox
Dec 12 2017 11:05
@BuntyBru one-letter-names should be avoided in general. Only in very few places they can make some sense (ex. x, y for coordinates)
BuntyBru
@BuntyBru
Dec 12 2017 11:06
okay man
:)
Markus Kiili
@Masd925
Dec 12 2017 11:09
@BuntyBru One way to avoid that variable is to bind the callback functions this to outer this by setTimeout((function() {...}).bind(this)); and then just use this inside the callback. Just another option to use.
BuntyBru
@BuntyBru
Dec 12 2017 11:15

@alpox
s.classList.toggle("selected");
setTimeout(function() {
s.style.transition = "all 0s";

the last snippet here,
SO class "selected" is added and the styles are added with a transition of 0.2 s

now s.classList.toggle("selected"); removes the class "selected"

and the styles are removed at an instant

Now i changed the statement to s.style.transition = "all 0.5s";

Now when i click the box
outline appears at first
and if i click it again it does not appear

why
?
PS:- Sorry for bothering you with stupid ques
BuntyBru
@BuntyBru
Dec 12 2017 11:54
@alpox
I did come modifications and i think the transition statement is not necessary because it is not doing anything
for (var i = 0; i < p.length; i++) {
p[i].addEventListener("click",function() {
var s = this;
s.classList.toggle("selected");
setTimeout(function() {s.classList.toggle("selected");}, 100)
}
);
}
Brijrajsinh Gohil
@brijrajgohil
Dec 12 2017 12:29
@Masd925 Thanks I'll check it out
CamperBot
@camperbot
Dec 12 2017 12:29
brijrajgohil sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4605 | @masd925 |http://www.freecodecamp.org/masd925
Brijrajsinh Gohil
@brijrajgohil
Dec 12 2017 12:29
//function 1st arg arr, 2nd arg size
function chunkMonk(arr, num) {
    var newArr = [];
    var tempArr = [];
    var count = 0;
    for(var i = 0; i < arr.length; i++) {
        if(count <= num) {
            tempArr.push(arr[i]);
            count++;
            continue;
        }
        count = 0;
        newArr.push(tempArr);
    }
    console.log(newArr);
}

chunkMonk([1, 2, 3, 4, 5], 2);
It doesn't output as needed!
Markus Kiili
@Masd925
Dec 12 2017 12:30
@brijrajgohil You are pushing the same array tempArr repeatedly into the result array.
The solution is much easier if you increment in the loop with i+=num and generate the pushed arrays with slice method.
Brijrajsinh Gohil
@brijrajgohil
Dec 12 2017 12:37
@Masd925 It does work, but 'undefined' is also printed with the output.
function chunkMonk(arr, num) {
    var newArr = [];
    for(var i = 0; i < arr.length; i += num) {
        newArr.push(arr.slice(i, i+num));
    }
    console.log(newArr);
}

console.log(chunkMonk([1, 2, 3, 4, 5,], 2));
Markus Kiili
@Masd925
Dec 12 2017 12:38
@brijrajgohil return newArr; instead of console.log(newArr);
Brijrajsinh Gohil
@brijrajgohil
Dec 12 2017 12:39
@Masd925 Thanks! All done.
CamperBot
@camperbot
Dec 12 2017 12:39
brijrajgohil sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
api offline
jokerrapeu
@jokerrapeu
Dec 12 2017 14:03
Oke i will check it too
@Masd925 ty
CamperBot
@camperbot
Dec 12 2017 14:04
jokerrapeu sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4606 | @masd925 |http://www.freecodecamp.org/masd925
Kaz Baig
@kbaig
Dec 12 2017 15:47
Oh boy, CSS Grid support is looking promising :)
AbrisM
@AbrisM
Dec 12 2017 15:47
CSS Grid Support? :O
I think I have used that before, is it for tables?
Vamshi Gudipati
@vamshikrishna144
Dec 12 2017 15:52
A new method on object Object.values()
var foo = { year: 2017, month: 12, day: 12 } Object.values(foo) Outputs ======== [2017, 12, 12]
Kaz Baig
@kbaig
Dec 12 2017 15:55
@AbrisM click on the various tiles on this showcase to see how it works
organicdude
@organicdude
Dec 12 2017 16:01
Hi everyone - is this an okay place to ask CSS questions?
Isaiah Trembley
@IsaiahCT
Dec 12 2017 16:01
absolutely
organicdude
@organicdude
Dec 12 2017 16:01
Awesome - I have kinda of a weird one

I'm marking up a thing: https://parasites.org/template/mobcheckout3.php

if you look at it with Developer tools, as a Galaxy S5 - and then switch to landscape mode by clicking the rotate button

then scroll down a bit on the page, you get this:

one sec gotta link to image
![alt](https://parasites.org/template/image_480.png)
And I can't figure out how to get that extra space to disappear
it's not margins or padding from other elements
it just seems like the div
<div class="col-md-7 text-center">
is longer than it should be
any suggestions on how to sort that out?
Kaz Baig
@kbaig
Dec 12 2017 16:05
dang i don't have galaxy s5 on my chrome for some reason
organicdude
@organicdude
Dec 12 2017 16:05
that's fine
should be similar behavior on other browsers
let me replicate in another one
Kaz Baig
@kbaig
Dec 12 2017 16:06
jk it randomly appeared lol
organicdude
@organicdude
Dec 12 2017 16:06
haha
same behavior for iphone 6 at least
so it doesn't seem to be a quirk of that
Kaz Baig
@kbaig
Dec 12 2017 16:06
you're talking about the yellow div right?
organicdude
@organicdude
Dec 12 2017 16:07
no - the problem is not inside the yellow bg div
it's the div above it
that div contains
Kaz Baig
@kbaig
Dec 12 2017 16:07
Oh I see
organicdude
@organicdude
Dec 12 2017 16:07
<div class="col-md-7 text-center">
<img class="full-width" style="height:50%;" src="images/test-kit.gif">
<p style="font-weight:bold;margin:0 0;">Precise Parasite™ Home Test</p>
<p style="font-style:italic;margin:0 0;">Finds up to 46 parasites!</p>
<p style="margin-top:0px;">$350 <span style="font-style:italic;">(free shipping)</span></p>
</div>
that's the div with lots of extra space
Isaiah Trembley
@IsaiahCT
Dec 12 2017 16:07
try changingthe margin
organicdude
@organicdude
Dec 12 2017 16:07
in landscape mode anyway
Isaiah Trembley
@IsaiahCT
Dec 12 2017 16:08
or padding
so it's fine in portrait
organicdude
@organicdude
Dec 12 2017 16:08
ya
image.png
that's how the margin and padding is
Isaiah Trembley
@IsaiahCT
Dec 12 2017 16:08
try adding a media query
organicdude
@organicdude
Dec 12 2017 16:08
for that element
sorry I don't know media queries yet
how would that help in this case?
Isaiah Trembley
@IsaiahCT
Dec 12 2017 16:09
okay, so...this is just something that is an idea
but what you can do is add a mediaQuery
how you do that is this ...
@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}
so, it is saying that if the screen is said amount, then this will ahppen, in this case, background
but,.... I don't reccomend that
try jusst changing the div margin and such
organicdude
@organicdude
Dec 12 2017 16:12
okay thank you
Kaz Baig
@kbaig
Dec 12 2017 16:14
@organicdude Remove style="height:50%;" from your image
in that div
organicdude
@organicdude
Dec 12 2017 16:18
omg i just figured this out without looking at the screen
lol
but ya you're right
first i tried commenting out everythign in that div
then just the image part
and it worked :)
thank you sir!
that was super weird huh
i think that extra gap come from what the size of that div would be if the image were 100%
but if I say "height:100px;" on that image, then I don't get that extra gap
Kaz Baig
@kbaig
Dec 12 2017 16:21
@organicdude I don't think that div had an explicitly defined height, so it must have been coming from a min-height from the wrapper or something
organicdude
@organicdude
Dec 12 2017 16:22
i think it was just the fact that i had that height 50% in there
because if I commented out that part
there was no "phantom" space
Kaz Baig
@kbaig
Dec 12 2017 16:22
Yes but that 50% is 50% of its parent div
organicdude
@organicdude
Dec 12 2017 16:22
hmmm
Kaz Baig
@kbaig
Dec 12 2017 16:22
but the parent div did not have an explicitly defined height
organicdude
@organicdude
Dec 12 2017 16:23
i got ya
i thought it would have been 50% of the size of the image
because if i set the height of the image to 100px - it stays at 100px
Kaz Baig
@kbaig
Dec 12 2017 16:24
% is relative to the size of parent
organicdude
@organicdude
Dec 12 2017 16:25
got ya
makes sense
thanks for your help
Kaz Baig
@kbaig
Dec 12 2017 16:26
np
Vamshi Gudipati
@vamshikrishna144
Dec 12 2017 16:35
@IsaiahCT Does CT stand for Connecticut ?
AbrisM
@AbrisM
Dec 12 2017 16:45
?
Hehehe I asked that too :)
Austin Jess
@ajess33
Dec 12 2017 16:55
Anyone have any tips for someone starting the Weather App project with no idea where to start?
Aditya
@ezioda004
Dec 12 2017 17:12
@ajess33 I first did the HTML, as in just skeleton of the APP and then worked on functionality ie using JS, AJAX and completed HTML and lastly CSS.
TheRedstoneTaco
@TheRedstoneTaco
Dec 12 2017 17:47
So is FCC a front-end course?
Kaz Baig
@kbaig
Dec 12 2017 17:50
the front end certificate is
TheRedstoneTaco
@TheRedstoneTaco
Dec 12 2017 17:52
Oh okay
I didn't know you could get a certificat
e
Is there a backend certificate?
Kaz Baig
@kbaig
Dec 12 2017 17:56
Darren
@DarrenfJ
Dec 12 2017 18:57
@TheRedstoneTaco I don't think it's called the backend cert.. but there's a series of certs. there's also going to be new ones when the beta rolls out (very soon too I'm told!)
but you can check each cert's name in the map: https://www.freecodecamp.org/map
actually @TheRedstoneTaco i take it back.. there is a backend cert: https://www.freecodecamp.org/challenges/claim-your-back-end-development-certificate
and at present you can get the data visualization cert as well...
Darren
@DarrenfJ
Dec 12 2017 19:06
@TheRedstoneTaco from one of the posts on the forum..
the new certificates:
Responsive Web Design
Algorithms and Data Structures
Front End Libraries
Data Visualization
APIs and Microservices
Information Security and Quality Assurance
These will replace the old certificates:
Front End Development
Back End Development
@ajess33 have you checked out the glitch where they've made getting weather info easier?
@ajess33 also check out geolocation in a browser.. probably google-able
TheRedstoneTaco
@TheRedstoneTaco
Dec 12 2017 19:50
is there a backend certificate?
Kaz Baig
@kbaig
Dec 12 2017 19:51

@TheRedstoneTaco as @DarrenfJ said...

actually @TheRedstoneTaco i take it back.. there is a backend cert: https://www.freecodecamp.org/challenges/claim-your-back-end-development-certificate

Darren
@DarrenfJ
Dec 12 2017 20:12
@TheRedstoneTaco yah, as Kaz mentioned.. and if you are a part of fCC now the present certs will stay and you can get the new additional ones as well (now is defined as having signed up for fCC by Dec 2017)
AbrisM
@AbrisM
Dec 12 2017 20:20
https://codepen.io/StudentUser/pen/opNQXm Does anyone know why the zip-codes inside the JS is not displaying the outputs?
A_A
@Otto-AA
Dec 12 2017 20:43
@AbrisM On line 60+ there are some missing )s
TheRedstoneTaco
@TheRedstoneTaco
Dec 12 2017 20:54
Oh I get it
Lauviah
@Kishnee
Dec 12 2017 20:59
Hello.. Anyone who can help me in "Nesting for loop"? Am not getting the logic behind the code.
Kaz Baig
@kbaig
Dec 12 2017 21:00
@Kishnee Would be helpful if you shared the link to the challenge and what part you're struggling with so we can try to explain :)
Lauviah
@Kishnee
Dec 12 2017 21:00
var arr = [
[1,2], [3,4], [5,6]
];
for (var i=0; i < arr.length; i++) {
for (var j=0; j < arr[i].length; j++) {
console.log(arr[i][j]);
}
}
@kbaig Here it is. Am not really getting the logic of the i and j.
Kaz Baig
@kbaig
Dec 12 2017 21:03
Do you mean in terms of how the loops run or what arr[i][j] means?
@Kishnee
Lauviah
@Kishnee
Dec 12 2017 21:04
Yeah, how the loops run.
Kaz Baig
@kbaig
Dec 12 2017 21:05
so in terms of logic
Stephen James
@sjames1958gm
Dec 12 2017 21:05

@Kishnee
for each value of i 0, 1, 2
j will go through the indexes of the array inner array that i is referencing.

Think of i going through the drawers of a file cabinet
and j going through the files in each drawer.

Kaz Baig
@kbaig
Dec 12 2017 21:06
^
AbrisM
@AbrisM
Dec 12 2017 21:06
@Otto-AA Thanks, it seems to be working now but is not displaying the correct outputs in the ranges
CamperBot
@camperbot
Dec 12 2017 21:06
:cookie: 405 | @otto-aa |http://www.freecodecamp.org/otto-aa
abrism sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
Lauviah
@Kishnee
Dec 12 2017 21:07
@sjames1958gm Wow Thank you for the explanation. Got it now. ^^
CamperBot
@camperbot
Dec 12 2017 21:07
kishnee sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8772 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Dec 12 2017 21:08
@Kishnee :+1:
AbrisM
@AbrisM
Dec 12 2017 21:23
Hi, could someone tell me why the zips are not returning the correct outputs? "Sorry! No location available here!" should show only if any number outside of the zips listed is used. 06001 should not result in West Hartford but a "out of state"return for zips less than 06001. 06107 and 06119 should result in West Hartford. 06604 and 06610 should result in Bridgeport. 06850 and 06855 should result in Norwalk. 06901 and 06907 should result in Stamford. Else if any other zips are entered an "Sorry, not in this location!" should return. https://codepen.io/StudentUser/pen/opNQXm
LuxCoder26
@LuxCoder26
Dec 12 2017 21:40
Hi guys, could someone please help me with the lookup challenge?
Aditya
@ezioda004
Dec 12 2017 21:41
@LuxCoder26 Hello, post your code here.
LuxCoder26
@LuxCoder26
Dec 12 2017 21:41
Hi @ezioda004, thanks
CamperBot
@camperbot
Dec 12 2017 21:41
luxcoder26 sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @ezioda004 |http://www.freecodecamp.org/ezioda004
LuxCoder26
@LuxCoder26
Dec 12 2017 21:42

'
// Setup
function phoneticLookup(val) {
var result = "";

// Only change code below this line

var lookup = {
"alpha": "Adams",
"beta": "Boston",
"charlie": "Chicago",
"delta": "Denver",
"echo": "Easy",
"foxtrot": "Frank"
};

result = lookup;

// Only change code above this line
return result;
}

// Change this value to test
phoneticLookup("charlie");
'

‘’'

// Setup
function phoneticLookup(val) {
var result = "";

// Only change code below this line

var lookup = {
"alpha": "Adams",
"beta": "Boston",
"charlie": "Chicago",
"delta": "Denver",
"echo": "Easy",
"foxtrot": "Frank"
};

result = lookup;

// Only change code above this line
return result;
}

// Change this value to test
phoneticLookup("charlie");
‘''

Aditya
@ezioda004
Dec 12 2017 21:44
@LuxCoder26 What problem do you have in this challenge?
LuxCoder26
@LuxCoder26
Dec 12 2017 21:45
@ezioda004 you mean what do I need to do in order to pass the challenge, or the problem that I am facing?
I’m trying to understand how the lookup objects work, but nothing
Aditya
@ezioda004
Dec 12 2017 21:45
@LuxCoder26 The problem you are facing.
LuxCoder26
@LuxCoder26
Dec 12 2017 21:45
@ezioda004 I’m trying to understand how the lookup objects work, but nothing
Aditya
@ezioda004
Dec 12 2017 21:47
You basically have to return the "value" of the "keys" in the object.
You access objects by using . or [ ] notation
LuxCoder26
@LuxCoder26
Dec 12 2017 21:48
@ezioda004 say no more, I got it
@ezioda004 thanks so much
CamperBot
@camperbot
Dec 12 2017 21:48
luxcoder26 sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
api offline
LuxCoder26
@LuxCoder26
Dec 12 2017 21:49
I forgot to add lookup[val]
btw, are yuo italian?
Aditya
@ezioda004
Dec 12 2017 21:49
@LuxCoder26 :thumbsup: it happens
Nope, I'm from India.
LuxCoder26
@LuxCoder26
Dec 12 2017 21:50
ok, never mind, cause part of your tag (ezio) is an italian name
Aditya
@ezioda004
Dec 12 2017 21:51
Inspired from Ezio Auditore ;)
LuxCoder26
@LuxCoder26
Dec 12 2017 21:52
Get it ;)
Vincent Yan
@envincebal
Dec 12 2017 21:59
Hey guys, I've been racking my brain for hours with my pomodoro clock. Basically when the work clock runs down and switches to the break clock, the minute digit runs a negative digit just for a brief second before switching to the proper countdown. I noticed there is also a slight delay in the negative digit as well. I think it has to do with the “if” statements on lines 63 and 90. Any help would be appreciated.
Kaz Baig
@kbaig
Dec 12 2017 22:17
@envincebal presumably you're decrementing the minute digit every time the seconds hit 0. Maybe check the condition where that happens and make sure it doesn't fire when the rollover from work to break or vice versa occur?
Vincent Yan
@envincebal
Dec 12 2017 22:27
@kbaig That's what I was thinking. I have tried a bunch of different conditions. Basically I want the interval to clear as soon as the clock reaches 0 seconds and minutes. As it stands now, it doesn't seem to clear until 1 second after 0 for both.
Ghost
@ghost~56bd2077e610378809c105cd
Dec 12 2017 22:31
I had the same problem @envincebal
I used setTimout instead of setInterval
umm scratch that...seems I did use setInterval
Kaz Baig
@kbaig
Dec 12 2017 22:34
@envincebal if you really don't end up finding a solution, I'd suggest a rewrite where you decouple logic from rendering. That way, you can just have one variable called secondsLeft or something to track the time left and have a function you throw it into to render it
Vincent Yan
@envincebal
Dec 12 2017 22:35
@Rogue00 Okay cool. Can you give me a hint as to how you avoided the delay?
Ghost
@ghost~56bd2077e610378809c105cd
Dec 12 2017 22:36
I'm looking at your code..in an attempt to find your problem..one minute..
Vincent Yan
@envincebal
Dec 12 2017 22:36
@kbaig yeah maybe. THough I already rewrote the code like twice already :/
Kaz Baig
@kbaig
Dec 12 2017 22:36
I ended up rewriting each project once or twice when I started the front end cert
It's fine
Ghost
@ghost~56bd2077e610378809c105cd
Dec 12 2017 22:37
Kaz Baig
@kbaig
Dec 12 2017 22:37
learning is the more important part, and that's how you do it
Ghost
@ghost~56bd2077e610378809c105cd
Dec 12 2017 22:39
Let me ask you @envincebal youre trying to clear the session timer between its clearInterval and the beginning of the break timer?
ahh ok
Vincent Yan
@envincebal
Dec 12 2017 22:45
@Rogue00 I am trying to clear the session between the clearInterval
Ghost
@ghost~56bd2077e610378809c105cd
Dec 12 2017 22:45
do something like
if(timerId <= 0) {
document.getElementById("timerId").innerHTML = "0:00";
}
where you timer session runs out
Vincent Yan
@envincebal
Dec 12 2017 22:46
@kbaig true that is a good point
Ghost
@ghost~56bd2077e610378809c105cd
Dec 12 2017 22:47
basically..when your timer runs to equal to or less than 0 then the document will set the session timer(timerId) to "0:00" that wil fix it on the display side..
Vincent Yan
@envincebal
Dec 12 2017 22:48
@Rogue00 That's a good tip, thanks!
CamperBot
@camperbot
Dec 12 2017 22:48
envincebal sends brownie points to @rogue00 :sparkles: :thumbsup: :sparkles:
:cookie: 441 | @rogue00 |http://www.freecodecamp.org/rogue00
Vincent Yan
@envincebal
Dec 12 2017 22:49
@kbaig Thanks for your help too
Ghost
@ghost~56bd2077e610378809c105cd
Dec 12 2017 22:50
your code is a little more complex than mine @envincebal
you've done a nice job on this project
:+1:
Dan Lafferty
@DanLaff
Dec 12 2017 22:51
@envincebal You can add a check here to not subtract the minutes if it's already 0
            if (secs === 59) {
                mins--;
                minutes.textContent = mins;
            }
For example:
            if (secs === 59 && mins > 0) {
                mins--;
                minutes.textContent = mins;
            }
Ghost
@ghost~56bd2077e610378809c105cd
Dec 12 2017 22:52
hells yea nice solution @DanLaff thanks for that :+1:
CamperBot
@camperbot
Dec 12 2017 22:52
rogue00 sends brownie points to @danlaff :sparkles: :thumbsup: :sparkles:
api offline
Dan Lafferty
@DanLaff
Dec 12 2017 22:54
No problem - this might be a little more concise: if (secs === 59 && mins > 0) minutes.textContent = --mins;
Vincent Yan
@envincebal
Dec 12 2017 22:58
@Rogue00 and @DanLaff You guys are awesome! That really helps a lot!
Thanks to you both @DanLaff , @Rogue00
CamperBot
@camperbot
Dec 12 2017 22:59
envincebal sends brownie points to @danlaff and @rogue00 :sparkles: :thumbsup: :sparkles:
api offline
api offline