These are chat archives for FreeCodeCamp/HelpFrontEnd

16th
Dec 2017
LoLRabbit
@KevinStaufy
Dec 16 2017 00:31
https://codepen.io/KevinStaufy/full/RxWoqM does anyone know how i would make the grey background have a white outline around it on the whole page?
AbrisM
@AbrisM
Dec 16 2017 00:32
@KevinStaufy Border
Use the Border in CSS
LoLRabbit
@KevinStaufy
Dec 16 2017 00:32
around the whole thing?
ah
gotcha
idk why i didnt think of that tbh
LoLRabbit
@KevinStaufy
Dec 16 2017 00:42
border{border-style:solid;
border-width: 15px;
border-color: red;}
@AbrisM i assume this is wrong because it is not working
idk my brain is not working today haha sorry
@KevinStaufy https://www.loriswebs.com/css-border-webpage.html these two here :)
LoLRabbit
@KevinStaufy
Dec 16 2017 00:46
tyty <3 @AbrisM
LoLRabbit
@KevinStaufy
Dec 16 2017 01:05
so im starting the portfolio project and it looks super advanced compared to what i know
AbrisM
@AbrisM
Dec 16 2017 01:23
Mine looks like 1997 >:P
I wish they would teach us web 2.0, for some reason they discourage the use of frames and libraries so we're stuck with vanilla javascript
And most tutorials/good animations/graphics has either a framework or library in it
Tom
@moT01
Dec 16 2017 01:29
@KevinStaufy i would either skip it and go back - or just do something pretty simple and move on
you're going to want to go back and change things later either way
Barbara Pentoney
@flyfishingbarbara
Dec 16 2017 02:14

hi peeps....need help with this repeat a string challenge....why is this code not working....??function repeatStringNumTimes(str, num) {
// repeat after me
if (num < 0) {
return "";
} else {
return str.repeat (num);
}
}

repeatStringNumTimes("abc", 3);

Isaiah Trembley
@IsaiahCT
Dec 16 2017 02:15
because I don'tthink you can just say return ""
what is the error saying
Barbara Pentoney
@flyfishingbarbara
Dec 16 2017 02:17
@IsaiahCT ... typeerror-object doesn't support property or method repeat
Isaiah Trembley
@IsaiahCT
Dec 16 2017 02:18
try just 0
return 0
Barbara Pentoney
@flyfishingbarbara
Dec 16 2017 02:18
try zero where..??
okay..
Isaiah Trembley
@IsaiahCT
Dec 16 2017 02:18
tell me if it works
I am messing with it know
Barbara Pentoney
@flyfishingbarbara
Dec 16 2017 02:19
nope...I almost think like I need torefresh the page...ie a glitch...
Isaiah Trembley
@IsaiahCT
Dec 16 2017 02:19
yeah
try that
Barbara Pentoney
@flyfishingbarbara
Dec 16 2017 02:20
nah, that didn't work...
hmmm
Isaiah Trembley
@IsaiahCT
Dec 16 2017 02:22
try just returning the string
or just returning it with one repeat
use this
function repeatStringNumTimes(string, times) {
  if(times < 0) 
    return "";
  if(times === 1) 
    return string;
  else 
    return string + repeatStringNumTimes(string, times - 1);
}
repeatStringNumTimes("abc", 3);
this should work
Barbara Pentoney
@flyfishingbarbara
Dec 16 2017 02:23
ok so that worked
Isaiah Trembley
@IsaiahCT
Dec 16 2017 02:23
YEAH!
haha
sick skills
but the method I just made uses recursion as well
Barbara Pentoney
@flyfishingbarbara
Dec 16 2017 02:23
no.. wait I just return str
Isaiah Trembley
@IsaiahCT
Dec 16 2017 02:23
yeah
so you passed?
Barbara Pentoney
@flyfishingbarbara
Dec 16 2017 02:24
just 2 of the tests....not all of em
Isaiah Trembley
@IsaiahCT
Dec 16 2017 02:24
what are all of them
Barbara Pentoney
@flyfishingbarbara
Dec 16 2017 02:26
ie ... repeatStringNumTimes("", 3) should return "**".
Isaiah Trembley
@IsaiahCT
Dec 16 2017 02:26
have you tried the method I posted
Barbara Pentoney
@flyfishingbarbara
Dec 16 2017 02:26
its like the challenge purposely doesn't want me to use .repeat....??
I haven't but will now...
Isaiah Trembley
@IsaiahCT
Dec 16 2017 02:27
this is another way
function repeatStringNumTimes(string, num) {
if (num> 0)
return string.repeat(num);
else
return "";
}
repeatStringNumTimes("abc", 3);
Tom
@moT01
Dec 16 2017 02:28
why arent you using a loop? @flyfishingbarbara
Barbara Pentoney
@flyfishingbarbara
Dec 16 2017 02:30
@IsaiahCT your recursion code worked....but Im a newbie and don't know recursion that well
Isaiah Trembley
@IsaiahCT
Dec 16 2017 02:30
so here it is in a nutshell
Barbara Pentoney
@flyfishingbarbara
Dec 16 2017 02:33
@IsaiahCT your last code w .repeat didn't work either... it is just the same as what I had but backwards...??
Isaiah Trembley
@IsaiahCT
Dec 16 2017 02:34
hm..
so they must not have wanted you to use repeat
Barbara Pentoney
@flyfishingbarbara
Dec 16 2017 02:34
@IsaiahCT it is correct! right? they just dont' want us to use .repeat...
Isaiah Trembley
@IsaiahCT
Dec 16 2017 02:35
but recursion is basically repetition again and again and again
Barbara Pentoney
@flyfishingbarbara
Dec 16 2017 02:37
@IsaiahCT ...so bizarre...I just looked at the 'hint' 'solution' section and they have this as the solution...Basic Code Solution:
function repeatStringNumTimes(str, num) {
if(num>0){
return str.repeat(num);
}
return "";
}
Isaiah Trembley
@IsaiahCT
Dec 16 2017 02:37
yeah
that is weird
Barbara Pentoney
@flyfishingbarbara
Dec 16 2017 02:37
we were right! damn it!...haha
Isaiah Trembley
@IsaiahCT
Dec 16 2017 02:37
HAHA!
Barbara Pentoney
@flyfishingbarbara
Dec 16 2017 02:38
@IsaiahCT thanks for the help....this can be quite frustrating for me! so thanks!
CamperBot
@camperbot
Dec 16 2017 02:38
flyfishingbarbara sends brownie points to @isaiahct :sparkles: :thumbsup: :sparkles:
api offline
Isaiah Trembley
@IsaiahCT
Dec 16 2017 02:38
no rpblem
Barbara Pentoney
@flyfishingbarbara
Dec 16 2017 02:39
@moT01 thanks tom. will try loop next time...
CamperBot
@camperbot
Dec 16 2017 02:39
flyfishingbarbara sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 931 | @mot01 |http://www.freecodecamp.org/mot01
Linus Phan
@linusphan
Dec 16 2017 03:47
after struggling so much with this project.. I finally completed it
I don't know if you guys recall, but I was asking for help like crazy last time lol
<I am/>
@kondasMajid
Dec 16 2017 03:50
Hi guys
I was with you and actually fall of.
Probably this the right time to stay forever coding but gotta move with Js and node.... any ideas of resume on break?
AbrisM
@AbrisM
Dec 16 2017 03:50
@Guykondas what do you mean?
Put on the resume that you have skillsets with Javascript and JS.Node
<I am/>
@kondasMajid
Dec 16 2017 03:51
@AbrisM yeah i have read much of js when i was on break
AbrisM
@AbrisM
Dec 16 2017 03:53
Any skillsets you have put them on resume :)
Isaiah Trembley
@IsaiahCT
Dec 16 2017 03:53
like this
image.png
Linus Phan
@linusphan
Dec 16 2017 03:54
@IsaiahCT is that yours?
that's neat
Isaiah Trembley
@IsaiahCT
Dec 16 2017 03:54
yes sir
image.png
Linus Phan
@linusphan
Dec 16 2017 03:55
wow
are you available for mentoring?
Isaiah Trembley
@IsaiahCT
Dec 16 2017 03:55
I will be soon
Linus Phan
@linusphan
Dec 16 2017 03:55
your html and css skills are good
<I am/>
@kondasMajid
Dec 16 2017 03:55
yeah. working on my company website @AbrisM
Isaiah Trembley
@IsaiahCT
Dec 16 2017 03:55
it iwlll be up through github soon
@Guykondas could we see anything?
@linusphan I have spent HOURS! on this thing
and i am not even done
But I want people to see it
and like it
Linus Phan
@linusphan
Dec 16 2017 03:56
@IsaiahCT lol
xD
Isaiah Trembley
@IsaiahCT
Dec 16 2017 03:56
I mean, it's a portfolio
Linus Phan
@linusphan
Dec 16 2017 03:56
yeah
Isaiah Trembley
@IsaiahCT
Dec 16 2017 03:56
would you like to see it all
(sneak peak hehe)
AbrisM
@AbrisM
Dec 16 2017 03:56
Luke Skywalker
Linus Phan
@linusphan
Dec 16 2017 03:56
yeah
AbrisM
@AbrisM
Dec 16 2017 03:56
Hm
Isaiah Trembley
@IsaiahCT
Dec 16 2017 03:56
@AbrisM just a place holder
<I am/>
@kondasMajid
Dec 16 2017 03:57
@IsaiahCT that's very .
love it
and the font also
Isaiah Trembley
@IsaiahCT
Dec 16 2017 03:57
thanks
I put my favorite color schemes and fon'ts on there
<I am/>
@kondasMajid
Dec 16 2017 03:57
okay :)
Isaiah Trembley
@IsaiahCT
Dec 16 2017 03:58
let me copy the code from my code editor
eh?
Linus Phan
@linusphan
Dec 16 2017 04:01
@IsaiahCT dude, you're so good even though you're so young
keep it up !
very impressive
Isaiah Trembley
@IsaiahCT
Dec 16 2017 04:01
This has taken HOURS
but I am proud
Linus Phan
@linusphan
Dec 16 2017 04:01
yup, you deserve to feel proud
=)
amazing!
Isaiah Trembley
@IsaiahCT
Dec 16 2017 04:01
thanks!
AbrisM
@AbrisM
Dec 16 2017 04:02
hahaha, can't do too much in vanilla js :)
Makes mine look like 1997
Isaiah Trembley
@IsaiahCT
Dec 16 2017 04:02
the js code for the timer kinda took forever
Linus Phan
@linusphan
Dec 16 2017 04:02
I can't do all the animations that you have on there lol
I would like to learn though ...
if you have any resources you can share for that I'd really appreciate it
:D
Isaiah Trembley
@IsaiahCT
Dec 16 2017 04:02
absolutely
Linus Phan
@linusphan
Dec 16 2017 04:02
omg sweet!!!!!
Isaiah Trembley
@IsaiahCT
Dec 16 2017 04:03
okay, so the biggest ones are FCC, the Odin Project, and Khan academy(where I start from)
others are code school, GA dash(which is good too)
codeacademy(which is good, just slow)
<I am/>
@kondasMajid
Dec 16 2017 04:05
@IsaiahCT that's good of you.
your people will understand you later :)
Isaiah Trembley
@IsaiahCT
Dec 16 2017 04:05
@Guykondas hey, I want other to get coding as well, that is why i am trying to get otherkids to code
I want everyone to learn coding, because it's fun, and unlocks somuch
people shouldn't be afraid of programming, they should have it as an idea
AbrisM
@AbrisM
Dec 16 2017 04:06
my back :o:
<I am/>
@kondasMajid
Dec 16 2017 04:06
good you got that heart
AbrisM
@AbrisM
Dec 16 2017 04:06
@IsaiahCT I program :D
but sometimes I get stuck haha
Isaiah Trembley
@IsaiahCT
Dec 16 2017 04:06
@AbrisM hi
<I am/>
@kondasMajid
Dec 16 2017 04:06
@IsaiahCT thumps up
Isaiah Trembley
@IsaiahCT
Dec 16 2017 04:06
dude, same
I get stuck alot
but I have people to come to and google
as well as resrouces
just know that when you code, you don't need to do everything by yourself
(I learned that the hard way)
you can use other's code (as long as you are'nt just stealing it)
change it to your needs, but the best way to code is by coding(from what I have learned and been told)
<I am/>
@kondasMajid
Dec 16 2017 04:08
everybody go stuck, but usually never think you are dump when you get stuck. relax and look through :smile: :smile:
Isaiah Trembley
@IsaiahCT
Dec 16 2017 04:08
exactly
I forget that alot
Linus Phan
@linusphan
Dec 16 2017 04:08
@IsaiahCT thanks for the info earlier =)
CamperBot
@camperbot
Dec 16 2017 04:08
linusphan sends brownie points to @isaiahct :sparkles: :thumbsup: :sparkles:
api offline
Linus Phan
@linusphan
Dec 16 2017 04:08
Do you have links specific for the animation?
Isaiah Trembley
@IsaiahCT
Dec 16 2017 04:08
@linusphan no problem
Linus Phan
@linusphan
Dec 16 2017 04:08
if not it's okay
=)
Isaiah Trembley
@IsaiahCT
Dec 16 2017 04:08
which one?
Linus Phan
@linusphan
Dec 16 2017 04:08
the heading
where you make the typing animation
Isaiah Trembley
@IsaiahCT
Dec 16 2017 04:09
ah
super easy... I can send you the code
Linus Phan
@linusphan
Dec 16 2017 04:09
thank you!!!
Isaiah Trembley
@IsaiahCT
Dec 16 2017 04:09
all it is is border blink and div width change
here it is
here it is
Linus Phan
@linusphan
Dec 16 2017 04:10
alright haha
Isaiah Trembley
@IsaiahCT
Dec 16 2017 04:11
//html

<h1 class="typer introduce anim-typewriter">Welcome to my Site!</h1>


//css super easy



.typer{
    position: relative;
    top:10%;
    width: 24em;
    margin: 0 auto;
    border-right: 2px solid black;
    font-size: 250%;
    color:white;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);
}

/* Animation */
.anim-typewriter{
  animation: typewriter 20s steps(44) 1s infinite normal both,
             blinkTextCursor 500ms steps(10) infinite normal;
}
@keyframes typewriter{
  0%{width: 0;}
  10%,60%{width: 10em;}
80%,100%{width:0em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255,.5);}
  to{border-right-color: transparent;}
}
AbrisM
@AbrisM
Dec 16 2017 04:12
CSS aimations :)
Isaiah Trembley
@IsaiahCT
Dec 16 2017 04:12
haha
AbrisM
@AbrisM
Dec 16 2017 04:12
Never used typer but it looks close to my ransom note project
Linus Phan
@linusphan
Dec 16 2017 04:12
@IsaiahCT thanks so much man. Also you have the enthusiasm, that's great ! :D
CamperBot
@camperbot
Dec 16 2017 04:12
linusphan sends brownie points to @isaiahct :sparkles: :thumbsup: :sparkles:
api offline
AbrisM
@AbrisM
Dec 16 2017 04:12
AFK
Isaiah Trembley
@IsaiahCT
Dec 16 2017 04:13
@linusphan if you use this just right, looks awesoe
I saw this in a codepen, and I instantly told myself "I need to use this"
also, if you guys have codepen accounts, let me follow you,
I always love looking at other's creations
Linus Phan
@linusphan
Dec 16 2017 04:14
@IsaiahCT I would like to incorporate it into my site as well. =)
<I am/>
@kondasMajid
Dec 16 2017 04:15
cool :)
Isaiah Trembley
@IsaiahCT
Dec 16 2017 04:15
well, tell me when you get started show us what you have
I would love to see
it
<I am/>
@kondasMajid
Dec 16 2017 04:16
yeah. i will ..
lot more coming...
Isaiah Trembley
@IsaiahCT
Dec 16 2017 04:18
nice
AbrisM
@AbrisM
Dec 16 2017 04:50
Back :)
Isaiah Trembley
@IsaiahCT
Dec 16 2017 04:50
hey!
AbrisM
@AbrisM
Dec 16 2017 04:51
Hello :)
Anyone familiar with if/else statements? PM me if you are! :)
Isaiah Trembley
@IsaiahCT
Dec 16 2017 04:52
@AbrisM I am
chadcuomo
@chadcuomo
Dec 16 2017 04:52
So i was going through The Odin Project before I started FCC and while going through the beginning JS portion they said to always define a variable with "let" but FCC says to use "var". which is correct?
Isaiah Trembley
@IsaiahCT
Dec 16 2017 04:53
you can use both
chadcuomo
@chadcuomo
Dec 16 2017 04:53
i guess what i mean is which is best practice?
chadcuomo
@chadcuomo
Dec 16 2017 04:58
so basically best practice is to use let over var nowadays
Isaiah Trembley
@IsaiahCT
Dec 16 2017 04:58
I use var, just because I have used that the most, but let works to
primuscovenant
@primuscovenant
Dec 16 2017 05:17
@heroiczero thx
CamperBot
@camperbot
Dec 16 2017 05:17
primuscovenant sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2107 | @heroiczero |http://www.freecodecamp.org/heroiczero
Ivo Tsolov
@ivoTsolov
Dec 16 2017 07:35
@chadcuomo well u might need to use var sometimes but its extreamly rare now mostly u will use const instead let
Markus Kiili
@Masd925
Dec 16 2017 09:24
@chadcuomo That is up to debate. Kyle Simpson for example thinks that you should still use var in addition to let and const.
A_A
@Otto-AA
Dec 16 2017 10:25
@chadcuomo If you have the choice between varand letgo for let as it is more restrictive and doesn't lead to unexpected defined variables. When you need var I suggest to use var :)
I myself use ~90% const, 9% let and 1% var (the only thing I used it for is that: if (typeof browser === 'undefined') { var browser = (typeof chrome === 'undefined') ? browser : chrome; }, but there are likely more use cases that didn't occur to me yet)
dryyyyy
@dryyyyy
Dec 16 2017 10:41
Hi all! Could I get help for angular 2+ here?
My issue is that I am trying to implement this modal window (http://jasonwatmore.com/post/2017/01/24/angular-2-custom-modal-window-dialog-box) in my project and receive Uncaught Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'. (" <h1>A Custom Modal!</h1> <p> Home page text: <input type="text" [ERROR ->][(ngModel)]="bodyText" /> </p> <button (click)="closeModal('custom-modal-1');"): ng:///AppModule/StoreComponent.html
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 11:03
hi , need help in Local weather app https://codepen.io/pramodjsam/pen/zpOLwe?editors=1011 . Toggle button is not working
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 11:19
i had been looking at this for about 2 days and couldnt find a solution. Toggle button should change the temperature from celsius to fahrenheit and so forth, but not happening . If anyone knows how to solve if . it would be so thankful
Henry
@GitHub-Henry
Dec 16 2017 11:45
@pramodjsam perhaps this can help you
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 11:54
@GitHub-Henry i have done according to it, but it still not working
Minoy
@minoy
Dec 16 2017 11:54

Hello! I am trying to make a bootstrap grid with one row and two columns. Following is the code:

<div class='container-fluid'>
    <div class='row'>
        <div class='col'>abc</div>
        <div class='col'>def</div>
    </div>
</div>

Instead of getting 'def' next to 'abc', I am getting it in the next row. Any ideas?

Henry
@GitHub-Henry
Dec 16 2017 11:55
@pramodjsam perhaps do a few toggle examples in something like codepen.io make sure to get them working. once you understand just toggle, then incorporate it in your project
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 11:56
@GitHub-Henry i ID(#toogle) it as toogle

$(function(){
var C=false;
var apiData;
backgroundImg=[
"https://cdn.wallpapersafari.com/38/38/gIQnTC.jpg",
"https://cdn.wallpapersafari.com/45/71/kU3rqZ.jpg",
"https://cdn.wallpapersafari.com/42/35/tSNz6n.jpg",
"https://i.ytimg.com/vi/RuqVnqNPyC0/maxresdefault.jpg",
"https://static.pexels.com/photos/5230/road-fog-foggy-mist.jpg",
"https://cdn.wallpapersafari.com/31/12/HdVCQF.jpg",
"https://mgtvwsav.files.wordpress.com/2016/02/dark-storm-clouds.jpg?w=1200"
];
function displayTemp(F,C){
if(C) return Math.round((F-32)*(5/9)) + "° C";
return Math.round(F) + "° F"
}

function render(data,C){
var currentWeather=data.weather[0].description;
var currentTemp=displayTemp(data.main.temp);
var icon=data.weather[0].icon;
$("#currentTemp").html(currentTemp);
$("#currentWeather").html(currentWeather);
var apiIcon= "http://openweathermap.org/img/w/" + icon + ".png";
$("#currentTemp").prepend("<img src = " + apiIcon + ">");
}

$.getJSON("https://freegeoip.net/json/").done(function(location){
//console.log(location); success
$("#country").html(location.country_name);
$("#city").html(location.region_name);
$("#latitude").html(location.latitude);
$("#longitude").html(location.longitude);

$.getJSON("https://api.openweathermap.org/data/2.5/weather?lat="+location.latitude+"&lon="+location.longitude+ "&units=imperial&appid=8021d975b271f4e1cf548b50d3d1595e", function(data){
  apiData=data;
  //console.log(apiData);// success !
  render (apiData,C);
  $("#toggle").click(function(){
   C=!C;
    render(data,C);
  }) 
  var id,backgroundId,bgIndex;
  id=data.weather[0].id;
  backgroundId=[299,499,599,699,799,800];
  backgroundId.push(id);
  bgIndex=backgroundId.sort().indexOf(id);
 //console.log(backgroundId) success !
  $("body").css("background-image", "url(" + backgroundImg[bgIndex]+ ")");
})

})

})

any solutions?
abraham anak agung
@padunk
Dec 16 2017 12:04
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 12:06
@minoy try using bootstrap
@minoy bootstrap 3
@padunk i had tried everything , but none of it is helping
Minoy
@minoy
Dec 16 2017 12:14
@pramodjsam Yes, I got the problem.
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 12:14
@minoy bootstrap isn't?
abraham anak agung
@padunk
Dec 16 2017 12:15
@minoy use col-sm-4 for example. you can't use jus col
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 12:15
@padunk yeah, or col-md-6
Minoy
@minoy
Dec 16 2017 12:15
@pramodjsam @padunk Yes, confusion between v4 and v3 I suppose
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 12:16
@pramodjsam i have tried your problem, but you have to use bootstrap and col-md-6
@minoy bootstrap v3 is more stable one
Minoy
@minoy
Dec 16 2017 12:16
Yes, using v3. It is working now. @pramodjsam Thanks!
CamperBot
@camperbot
Dec 16 2017 12:16
minoy sends brownie points to @pramodjsam :sparkles: :thumbsup: :sparkles:
:cookie: 256 | @pramodjsam |http://www.freecodecamp.org/pramodjsam
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 12:17
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 12:33

This is the Local Weather App https://codepen.io/pramodjsam/pen/zpOLwe?editors=1011

The toggle button doesnt change from Celsius to Fahrenheit and so forth. I had been trying to solve the problem for last two days but couldnt find a solution. If anyone find a solution to the problem , it would be soo thankful

Johnny
@JohnnyBizzel
Dec 16 2017 13:01
@pramodjsam bad weather.png
This message was deleted
@pramodjsam toggle is in the wrong place.
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 13:06
@JohnnyBizzel means? were should it be
Johnny
@JohnnyBizzel
Dec 16 2017 13:06
@pramodjsam Not inside the getJSON. I am trying to work it out.
Johnny
@JohnnyBizzel
Dec 16 2017 13:16
@pramodjsam I think this works: https://codepen.io/JohnnyBizzel/pen/qpOpzE
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 13:17
@JohnnyBizzel thankyou soo much
CamperBot
@camperbot
Dec 16 2017 13:17
pramodjsam sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
:star2: 1781 | @johnnybizzel |http://www.freecodecamp.org/johnnybizzel
Johnny
@JohnnyBizzel
Dec 16 2017 13:18
@pramodjsam Hope it makes sense :+1:
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 13:18
@JohnnyBizzel can you tell me what was wrong in it?
Johnny
@JohnnyBizzel
Dec 16 2017 13:18
@pramodjsam It was inside the getJSON.
  • you were not passing the unit parameter in the displayTemp function
  • render was using data not apiData
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 13:19
@JohnnyBizzel brought it outside JSON right?
@JohnnyBizzel yeah got it, thanks
CamperBot
@camperbot
Dec 16 2017 13:20
pramodjsam sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
Johnny
@JohnnyBizzel
Dec 16 2017 13:20

@JohnnyBizzel brought it outside JSON right?

Correct. Inspect the codepen

CamperBot
@camperbot
Dec 16 2017 13:20
api offline
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 13:21
@JohnnyBizzel yeah ,but i had referred to another pen, which by the way it works by keeping toggle inside JSON, (i dont know how that worked though)
Johnny
@JohnnyBizzel
Dec 16 2017 13:22
@pramodjsam not sure. That might not be the problem. The other 2 fixes were definitely a problem.
@pramodjsam Try to fix the styling problem on mobile view
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 13:23
@JohnnyBizzel what were the others fixes? i had notices the toggle has brought up to top ie outside JSON
@JohnnyBizzel (sorry i am new to programming) How to fix styling on mobile view?
Johnny
@JohnnyBizzel
Dec 16 2017 13:26
@pramodjsam It would be better if you tried to learn how to do this yourself. Don't you think?
@pramodjsam I mentioned the other fixes at 13:18 (my time)
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 13:27
@JohnnyBizzel you are right.
Johnny
@JohnnyBizzel
Dec 16 2017 13:27
@pramodjsam You could do it with a media query or some bootstrap class. (the CSS)
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 13:28
@JohnnyBizzel i should learn about it
@JohnnyBizzel thank you soo much for taking your time to solve it.
CamperBot
@camperbot
Dec 16 2017 13:29
pramodjsam sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
api offline
Johnny
@JohnnyBizzel
Dec 16 2017 13:32
@pramodjsam The difference between yours and Mark Snow's is that his render function includes the getJSON calls. Yours does not.
My pleasure to help.
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 13:36
@JohnnyBizzel getJSON calls means?
i am interested to know about the difference
Johnny
@JohnnyBizzel
Dec 16 2017 13:37
@pramodjsam It is jquery's version of an ajax call
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 13:37
@JohnnyBizzel how did he implemented it in his program
Johnny
@JohnnyBizzel
Dec 16 2017 13:38
@pramodjsam You know about Ajax? https://www.w3schools.com/xml/ajax_intro.asp
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 13:39
@JohnnyBizzel only in FCC level
Johnny
@JohnnyBizzel
Dec 16 2017 13:39
@pramodjsam So when you click on the toggle button it will make the getJSON call to get the ip address (for location) and a 2nd for the weather.
@pramodjsam FCC is not enough. You need to do some background reading. (or video watching)
Lots of good stuff on YouTube
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 13:40
@JohnnyBizzel my real question is , where does he calls AJAX in his program?
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 13:40
@JohnnyBizzel i still am a beginner level, have to pump up my skills
$.getJSON('https://freegeoip.net/json/')
.done (function(location)
{
$('#country').html(location.country_name);
$('#country_code').html(location.country_code);
$('#region').html(location.region_name);
$('#region_code').html(location.region_code);
$('#city').html(location.city);
$('#latitude').html(location.latitude);
$('#longitude').html(location.longitude);
$('#timezone').html(location.time_zone);
$('#ip').html(location.ip);
     // lat=location.latitude; don't need separate avriables/redundant
      //long=location.longitude;

      //console.log(lat);

          $.getJSON('https://api.openweathermap.org/data/2.5/weather?lat='+location.latitude+'&lon='+location.longitude+'&units=imperial&appid=9376beae156137001bb4cf7ce56b7e40', function(data){//--->USE HTTPS^

            //console.log(data);//Success!!!

            apiData=data;

            render (apiData,cel);

            $('#toggle').click(function(){
                cel = !cel;
                render(data,cel);          
            })

            var  id = data.weather[0].id,
                bgIndex,
               backgroundId = [299, 499, 599, 699, 799, 800]; // beats if else loops! corisponds to index numbers from api

              backgroundId.push(id);
              bgIndex = backgroundId.sort().indexOf(id);

          console.log(id);
            $('body').css('background-image', 'url(' + backgroundImg[bgIndex] + ')'); //this works with munual input...

           });
where does he calls AJAX
Johnny
@JohnnyBizzel
Dec 16 2017 13:42
@pramodjsam Stick at it. You will get there. Just look for other learning resources to compliment FCC
@pramodjsam This is an ajax call $.getJSON
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 13:43
@JohnnyBizzel i had done that too
Johnny
@JohnnyBizzel
Dec 16 2017 13:43
getJson.png
@pramodjsam not inside the render function
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 13:44
@JohnnyBizzel yeah, now i get it
Johnny
@JohnnyBizzel
Dec 16 2017 13:45
@pramodjsam Actually, my mistake. Mark's doesn't either :exclamation:
@pramodjsam I don't know how his code is working to be honest!
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 13:46
@JohnnyBizzel yeah me too
@JohnnyBizzel i was trying to figure that out for two days
Johnny
@JohnnyBizzel
Dec 16 2017 13:49
@pramodjsam Ask him!
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 13:50
@JohnnyBizzel actually he is a freecodecamp guide in youtube
@JohnnyBizzel he used to put tutorials in youtube about FCC solutions
Johnny
@JohnnyBizzel
Dec 16 2017 13:51
@pramodjsam Right. I think the way I did it is easier to follow. Putting a click event inside an ajax call doesn't make sense to me.
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 13:53
@JohnnyBizzel yeah , your's is easier to follow too
@JohnnyBizzel i even reverse engineered Mark's code, but couldnt find how he did it
Lisa Copeland
@lisacopeland
Dec 16 2017 13:54
@minoy your column divs are incorrectly defined
Johnny
@JohnnyBizzel
Dec 16 2017 13:55
@pramodjsam The data is being cached somewhere.
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 13:55
@JohnnyBizzel how?
Lisa Copeland
@lisacopeland
Dec 16 2017 13:56
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 13:56
@JohnnyBizzel you can view his tutorial "local weather app-freecodecamp-mr snow"
@JohnnyBizzel its an online video tutorial, doesnt seems to be contain some memory in background
Johnny
@JohnnyBizzel
Dec 16 2017 13:57
@pramodjsam Sorry, got to go get some lunch. Good luck with it. :+1:
Lisa Copeland
@lisacopeland
Dec 16 2017 13:57
@dryyyyy can you post an example on stackblitz?
Pramod Jacob Sam
@pramodjsam
Dec 16 2017 13:57
@JohnnyBizzel thanks you soo much for taking such a long time helping me. Have a great day
CamperBot
@camperbot
Dec 16 2017 13:57
pramodjsam sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
api offline
Onome Sotu
@onomesotu
Dec 16 2017 17:14
@sjames1958gm yes, I did. everything is working nicely :)
Hey guys, is there a better way to search if a form input is empty?
Tiago Correia
@tiagocorreiaalmeida
Dec 16 2017 17:19
how are you doing?
you can start by forcing with it tge input required, setting it on the end of the tag
Onome Sotu
@onomesotu
Dec 16 2017 17:21
if($('input').val === ""){
  alert('empty');
}
that only works if the user doesn't input anything
but if the user types a space, the that doesn't work
Tiago Correia
@tiagocorreiaalmeida
Dec 16 2017 17:21
try to add some spaces it will sned the input empty :D
would be a good thing to use .trim()
before checking it will remove all the empty spaces from start and end of the string and then you can check if its === ""
Onome Sotu
@onomesotu
Dec 16 2017 17:22
how does trim()work?
ah so i can trim the input value first before validation?
Tiago Correia
@tiagocorreiaalmeida
Dec 16 2017 17:23
here
you should trim it
because if you go into your input and you spam keyboard space
it will pass your validation
Onome Sotu
@onomesotu
Dec 16 2017 17:25
yes, i just tried an example in the console.. it works
let a = " ";

undefined
console.log(Boolean(a));
VM444:1 true
undefined
console.log(Boolean(a.trim()));
VM461:1 false
undefined
Thanks @tiagocorreiaalmeida
CamperBot
@camperbot
Dec 16 2017 17:27
onomesotu sends brownie points to @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
:cookie: 469 | @tiagocorreiaalmeida |http://www.freecodecamp.org/tiagocorreiaalmeida
Onome Sotu
@onomesotu
Dec 16 2017 17:36
I have another question
Tiago Correia
@tiagocorreiaalmeida
Dec 16 2017 17:39
just ask it :D
Onome Sotu
@onomesotu
Dec 16 2017 17:39
In jquery when an ajax call is made, the data gotten can be passed to a callback success function by reference like so: 'success: myFunction;'
Markus Kiili
@Masd925
Dec 16 2017 17:39
@onomesotu Hello, fellow Finn.
Onome Sotu
@onomesotu
Dec 16 2017 17:40
@Masd925 Hello Markus
but if you use vanillaJs, you have to call the success function and cannot pass it as a reference
@tiagocorreiaalmeida is there a way to do this?
Markus Kiili
@Masd925
Dec 16 2017 17:41
@onomesotu You can always use a declared function too.
Linus Phan
@linusphan
Dec 16 2017 17:41
hey guys with position fixed, is it positioned at all relative to its containing element?
Tiago Correia
@tiagocorreiaalmeida
Dec 16 2017 17:41
relative? got confused :D
Isaiah Trembley
@IsaiahCT
Dec 16 2017 17:42
when position is fixed it says that when you scroll it won't move
Onome Sotu
@onomesotu
Dec 16 2017 17:42
@Masd925 yes, i agree. I just want to know if there is a way to pass it as a reference too.
Isaiah Trembley
@IsaiahCT
Dec 16 2017 17:42
so, it stays in the same place throughout the browser no matter where you scroll
Tiago Correia
@tiagocorreiaalmeida
Dec 16 2017 17:42
and @onomesotu not a big user of vanillajs, yet cause always used jquery so can't awnser your question at this point
like it says it fixed so it will stay where you position it
for the entire page
Isaiah Trembley
@IsaiahCT
Dec 16 2017 17:42
yes
Linus Phan
@linusphan
Dec 16 2017 17:43
it might help for me to post my pen to be more specific
when I put a border for the sidebar, the buttons move slightly right
i think to account for the border
i want that
but the top border doesn't seem to be considered
Markus Kiili
@Masd925
Dec 16 2017 17:44
@onomesotu In JS functions are values, so you can always use a function expression (an anomymous function) that evaluates to a function, or a variable that evaluates to a function, or a name of a declared function.
Linus Phan
@linusphan
Dec 16 2017 17:45
also it's a little confusing that it takes into account the border on the left hand side when it supposedly is taken out of document flow
Onome Sotu
@onomesotu
Dec 16 2017 17:45
@Masd925 alright thanks
CamperBot
@camperbot
Dec 16 2017 17:45
onomesotu sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4613 | @masd925 |http://www.freecodecamp.org/masd925
Linus Phan
@linusphan
Dec 16 2017 17:46
hm, when I view my project through this codepen viewport, it seems that the positioning is correct than when I view it on the actual editing page lol
But still confused about why border is taken into account when it supposedly is taken out of the flow. Maybe it still considers the parent element
it seems like codepen kind of crops the top part of the page
@IsaiahCT thanks for following me on codepen! xD
CamperBot
@camperbot
Dec 16 2017 17:49
linusphan sends brownie points to @isaiahct :sparkles: :thumbsup: :sparkles:
api offline
Linus Phan
@linusphan
Dec 16 2017 17:49
you're probably my first follower lol
Isaiah Trembley
@IsaiahCT
Dec 16 2017 17:49
hahha
it's all good
I told you I wanted to see what others make
but I also wanna grow as wel
Linus Phan
@linusphan
Dec 16 2017 17:50
dang your codepen is impressive
too
you're good
Isaiah Trembley
@IsaiahCT
Dec 16 2017 17:50
¯_(ツ)_/¯
Need some help with this, my info keeps displaying as undefined
The problem seems to be arising when i loop through the items in the object, it is only giving me back the key and not the value.
Isaiah Trembley
@IsaiahCT
Dec 16 2017 17:53
@linusphan hey
on your portfolio, hwo did you get the buttons to slide to certain classes
why this is not working
Ken Haduch
@khaduch
Dec 16 2017 18:01
@1532j0004kg - two things that I changed in my copy of your project -
  • add &origin=* to your URL to allow the cross-origin access (check your devtools console to see the error beforehand)
  • move the var title = $("#search").val(); code inside of your button click handler, so that you fetch the search string at the time when the search is activated
  • I think that you might be accessing the JSON data incorrectly, I haven't tried to sort that out yet.
Tiago Correia
@tiagocorreiaalmeida
Dec 16 2017 18:03
@ankerpeet you should be using an array method or a normal loop for in works in objects
I would recomend
create an for that loops trough wikiData array
Anker
@ankerpeet
Dec 16 2017 18:06
@tiagocorreiaalmeida wikiData is an object, not an array.
Tiago Correia
@tiagocorreiaalmeida
Dec 16 2017 18:06
yeah my mistake
noticed it :D
sec
I dont think you can achieve with with for in
but you can with object.keys
  Object.keys(wikiData).forEach(function(key) {
    console.log(wikiData[key].title);
});
Onome Sotu
@onomesotu
Dec 16 2017 18:11
The wikiData is actually an array
Ken Haduch
@khaduch
Dec 16 2017 18:11

@1532j0004kg - last thing - your syntax for the $.getJSON call is not correct - this works - well, I'll just post the whole code since there might have been a couple problems:

var result;

$(document).ready(function() {
  $("button").click(function() {
    var title = $("#search").val();
    $.getJSON(
      "https://en.wikipedia.org/w/api.php?action=opensearch&search=" +
      title +
      "&limit=10&namespace=0&format=json&origin=*",
      function(data) {
        var result = "<h1>" + data[2][0] + "</h1>";
        console.log(data);
        $("h1").html(result);
      }
    );
  });
});

Dumping the data to the console so you can examine it there, too...

Tiago Correia
@tiagocorreiaalmeida
Dec 16 2017 18:11
@onomesotu it
it isnt*
the solution is above but you should give a loop at how it works first
Onome Sotu
@onomesotu
Dec 16 2017 18:12
I am working with it as an array and it is just fine @tiagocorreiaalmeida
Tiago Correia
@tiagocorreiaalmeida
Dec 16 2017 18:15
I tried to make it work from what he had didnt looked much more, what he had was an nested objects for what I saw
and probably you are right i
Linus Phan
@linusphan
Dec 16 2017 18:23
@IsaiahCT I used a bootstrap template for my profile page, so I'm not sure how that functionality was implemented. https://stackoverflow.com/questions/7717527/smooth-scrolling-when-clicking-an-anchor-link might be helpful though
Anker
@ankerpeet
Dec 16 2017 18:26
@tiagocorreiaalmeida thanks!
CamperBot
@camperbot
Dec 16 2017 18:26
ankerpeet sends brownie points to @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
:cookie: 470 | @tiagocorreiaalmeida |http://www.freecodecamp.org/tiagocorreiaalmeida
kerafyrm02
@kerafyrm02
Dec 16 2017 18:59
Anyone stuck?
Tiago Correia
@tiagocorreiaalmeida
Dec 16 2017 19:21
im stuck in life @kerafyrm02 :D
just kidding
Isaiah Trembley
@IsaiahCT
Dec 16 2017 19:52
oof
Linus Phan
@linusphan
Dec 16 2017 19:56
@IsaiahCT I think I'm going to attempt at making your blinking text soon
Isaiah Trembley
@IsaiahCT
Dec 16 2017 19:57
it will e easy
I looked at your portfolio
it was really ood..
how long have you been coding
Linus Phan
@linusphan
Dec 16 2017 20:00
I'm not sure when I should start counting how long lol
I restarted learning around June/July though
and thanks! @IsaiahCT
CamperBot
@camperbot
Dec 16 2017 20:00
linusphan sends brownie points to @isaiahct :sparkles: :thumbsup: :sparkles:
api offline
Isaiah Trembley
@IsaiahCT
Dec 16 2017 20:00
but like, for real, impressive for that amount of time
Linus Phan
@linusphan
Dec 16 2017 20:01
thanks Isaiah! :)
Tiago Correia
@tiagocorreiaalmeida
Dec 16 2017 20:13
are you trying to make text blink?
Ruben Abraham
@BuBBRBbr1
Dec 16 2017 20:37
Hey guys. How would I turn a HTML5 or HTML button to become a hyperlink reference?
Kudzu
@czhower
Dec 16 2017 20:38
set a click event and change the URL in the click event. Off hand I dont thinkg you can do it otherwise without any code.
Linus Phan
@linusphan
Dec 16 2017 21:01
@tiagocorreiaalmeida yeah Im trying to make the text blink
I copied his code and it works but I don't know how to do it on my own since i don't know the animation css and how to use it yet
I'll learn that and then apply it myself.
I don't want to just copy and paste code lol
Isaiah Trembley
@IsaiahCT
Dec 16 2017 21:02
okay
so, all it is doing is making the width of the div from none at all to full width
andthe border-right yo;u make blink
Linus Phan
@linusphan
Dec 16 2017 21:02
@BuBBRBbr1 put inside the button tag the a element
<a href="#"></a>
you can probably then set the width and height to match that of the button
@IsaiahCT oh okay, so the animation is applied to the border-right it sounds like
Ruben Abraham
@BuBBRBbr1
Dec 16 2017 21:22
OK Thx
Chiu Yong
@chiuyong
Dec 16 2017 21:42
hello guys
can somebody help me?
Markus Kiili
@Masd925
Dec 16 2017 21:43
@chiuyong You can just post the question here.
Chiu Yong
@chiuyong
Dec 16 2017 21:44
@Masd925 , do you know how can I debug my JS code?
in atom IDE?
I mean, Atom code editor
Markus Kiili
@Masd925
Dec 16 2017 21:46
@chiuyong Haven't used Atom, but usually you set some breakpoints, have some console.logs that show variable values, or do some logical checking.
Isaiah Trembley
@IsaiahCT
Dec 16 2017 21:46
@chiuyong I am using atom
if you make something like a function, add a simple console.log to see if your function wrks
Chiu Yong
@chiuyong
Dec 16 2017 21:48
@Masd925 I know that, but is there any debug feature where I can run into like Eclipse IDE
@IsaiahCT do you know other way?
Isaiah Trembley
@IsaiahCT
Dec 16 2017 21:48
not really
just hard coding
Chiu Yong
@chiuyong
Dec 16 2017 21:49
@IsaiahCT I have installed node-debugger
does it work?
Isaiah Trembley
@IsaiahCT
Dec 16 2017 21:50
I personally haven't used it, mainly because of hard coding
Chiu Yong
@chiuyong
Dec 16 2017 21:50
okay, I will try to figure out
Tiago Correia
@tiagocorreiaalmeida
Dec 16 2017 21:51
@linusphan its atually quite simple i can explain it to you
Chiu Yong
@chiuyong
Dec 16 2017 21:51
@IsaiahCT, @Masd925 Thank you guys!
CamperBot
@camperbot
Dec 16 2017 21:51
chiuyong sends brownie points to @isaiahct and @masd925 :sparkles: :thumbsup: :sparkles:
api offline
:star2: 4614 | @masd925 |http://www.freecodecamp.org/masd925
Isaiah Trembley
@IsaiahCT
Dec 16 2017 21:51
np
Tiago Correia
@tiagocorreiaalmeida
Dec 16 2017 21:53
you need to define a keyfram
and say what happens on each part of that key fram from 0 to 100
Isaiah Trembley
@IsaiahCT
Dec 16 2017 21:53
is that what e needs helpw ith
I din't know it was that
you can say some tthing like
Tiago Correia
@tiagocorreiaalmeida
Dec 16 2017 21:53
you can say opacity 0 at the start 1 at 80% of the keyframe and 0 at the end
then you can call the animation and set it infinite
Isaiah Trembley
@IsaiahCT
Dec 16 2017 21:53
yeah
Linus Phan
@linusphan
Dec 16 2017 22:03
animation: typewriter 20s steps(44) 1s infinite normal both,
             blinkTextCursor 500ms steps(10) infinite normal
I'm trying to understand that part right now
can someone explain steps(44)
what property is that?
what part of the animation do all of these values belong too
confusing ><
Isaiah Trembley
@IsaiahCT
Dec 16 2017 22:14
okay
so, steps tells us that this animation will be broken down into 44 parts
Altin Rrahmani
@DevKosov
Dec 16 2017 22:22
anyone familiar with SVG Path animations?
Isaiah Trembley
@IsaiahCT
Dec 16 2017 22:22
HOLY CRAP IT'S EMINEM!
Altin Rrahmani
@DevKosov
Dec 16 2017 22:23
hai
Linus Phan
@linusphan
Dec 16 2017 22:31
okay I'll figure it out someday lol
I'll just leave some copied code on for now ..
lol
it's just animation and the keyframes i need to work on