These are chat archives for FreeCodeCamp/HelpFrontEnd

1st
Nov 2017
Tyler
@nmbrgts
Nov 01 2017 01:03
Hey all. This might be a bit of an out there question... does anyone know it is required to do front end projects in Javascript? Would a compile-to-Javascript language be acceptable?
Trommelochse
@Trommelochse
Nov 01 2017 01:15
@nmbrgts I assume if you manage to write everything in PYthin and somehow display it in a browser, that it would be accepted :D
Alex Munoz
@AlexMunoz
Nov 01 2017 02:08

hi

 var left = 5
var right = 7
[left, right] = [right, left]
console.log(left)

which result should i expect?

NixonRichard
@NixonRichard
Nov 01 2017 02:32
7 ?
Alex Munoz
@AlexMunoz
Nov 01 2017 02:39
it should be, but i get 5, it's just a no-unexpected-multiline error
Ashwin
@ashwins93
Nov 01 2017 02:47
@AlexMunoz i don't think you can swap values like that in JS
Ken Haduch
@khaduch
Nov 01 2017 03:51
@AlexMunoz - do you have to use let instead of var?
@AlexMunoz - I just entered your example in the opera devtools console, and the final answer for console.log(left) is 7. I used your exact code.
@nmbrgts - I have seen people using React for some of the projects - technically that is a "compiled to JS" framework? Is that what you mean, or are you thinking of something else, like Typescript or something?
Ashwin
@ashwins93
Nov 01 2017 04:03
@khaduch but my chrome console still prints 5
it will work in node
Ken Haduch
@khaduch
Nov 01 2017 04:03
@ashwins93 - let me try my chrome console...
Ashwin
@ashwins93
Nov 01 2017 04:04
mdn says it should be supported in Chrome 49 and above
i'm using the latest
if it isn't supporting es6 ( i'm pretty sure it does support) it should at least throw an error
Ken Haduch
@khaduch
Nov 01 2017 04:05
@ashwins93 - it works for me... Chrome 61.0.3163.100, 64 bit
Ashwin
@ashwins93
Nov 01 2017 04:05

Version 62.0.3202.75 (Official Build) (64-bit)

lol i'm using the latest as well

but for some reason it prints only 5
Ken Haduch
@khaduch
Nov 01 2017 04:06
I just updated Chrome again, now version 62.something...
and it does swap the two values.
Ashwin
@ashwins93
Nov 01 2017 04:08
https://gyazo.com/50412631e812e0a0aa19e8b3a3f3f7f2
i don't understand what i'm missing here
lol
either im very sleepy
is it the semicolons?
that would be crazy
Ken Haduch
@khaduch
Nov 01 2017 04:10
@ashwins93 - I entered it in my devtools console without semicolons, and it works...
Ashwin
@ashwins93
Nov 01 2017 04:10
Holy s** if i add the semi colons it works
if i don't it prints 5
that is really messed up
Ken Haduch
@khaduch
Nov 01 2017 04:10
hmmmm
Ashwin
@ashwins93
Nov 01 2017 04:10
is it a bug?
i've no idea
Ken Haduch
@khaduch
Nov 01 2017 04:11
well, I don't know what to say... except that I'm way overdue to sign off for the night! Maybe stackoverflow has an answer...
Ashwin
@ashwins93
Nov 01 2017 04:11
https://gyazo.com/96349e800957de268abf857269635db2
hahaha learning something new every day
gotta read on ASI more
Ken Haduch
@khaduch
Nov 01 2017 04:13
@ashwins93 - when I enter mine without semicolons, I am entering a line at a time as opposed to a block of code being pasted in - is that the difference?
Ashwin
@ashwins93
Nov 01 2017 04:14
yeah i think it could be the difference
because ASI really works only on blocks of code
when you enter a line at a time, the semi colon insertion is trivial it doesn't has to look ahead
but with blocks of code ASI has to decide based on what comes next
but i have no idea what ASI is lookin at
Ken Haduch
@khaduch
Nov 01 2017 04:18
@ashwins93 - I hadn't encountered ASI in a while, but now I remember reading about it. THis article http://www.bradoncode.com/blog/2015/08/26/javascript-semi-colon-insertion/ says "don't use it"... :) So I'm going to stop using it right now and go to sleep... have fun coding!
Ashwin
@ashwins93
Nov 01 2017 04:18
yeah ASI is unpredictable
@khaduch good night!
Ken Haduch
@khaduch
Nov 01 2017 04:19
@ashwins93 - thanks... interesting little discussion on this feature. Good refresher!
CamperBot
@camperbot
Nov 01 2017 04:19
khaduch sends brownie points to @ashwins93 :sparkles: :thumbsup: :sparkles:
:cookie: 404 | @ashwins93 |http://www.freecodecamp.com/ashwins93
Ashwin
@ashwins93
Nov 01 2017 04:19
@khaduch lol thanks for taking part in stuff like this
i'm gonna dig deeper in to the specs
Ken Haduch
@khaduch
Nov 01 2017 04:20
@ashwins93 = well, it's good to keep jogging the mind with these discussions, so it helps me when things fade out of memory... ;)
Ashwin
@ashwins93
Nov 01 2017 04:21
lol i'm glad someone would actually mind these little issues, most ppl would shy away from such discussions (like what's the big deal use semicolons)
Ken Haduch
@khaduch
Nov 01 2017 04:24
@ashwins93 - I think that these are the kinds of things that would come up in some interviews - the tricky stuff!
Ashwin
@ashwins93
Nov 01 2017 04:24

turns out that without semi colon the line

var right = 7
[left, right] = [right, left]

is really treated like

var right = 7[left, right] = [right, left];
or something like that
Zachary Davis
@thatzacdavis
Nov 01 2017 04:26
yeah, the statement was never terminated
you can think of it like a period in a sentence
Ashwin
@ashwins93
Nov 01 2017 04:34

one would expect an expression like this

7[2]

to throw an error, trying to subscript a number

but in this context, 7 is treated as an object and therefore the 2 is treated as a key
so 7[2] is a valid syntax and doesn't offend the grammar rule
a semicolon is inserted only when an offending token is inserted (according to here)
since 7[left, right] is perfectly valid the ASI doesn't insert semicolon between var right = 7 and [left,right] ...
that is some deep stuff
What is interesting to me is that you could subscript an array like this arr[1, 2, 3, 4..] without any grammatical errors
:star: the more you know
dinesh
@1532j0004kg
Nov 01 2017 06:01
whats wrong in this?
zozolina123
@zozolina123
Nov 01 2017 07:03
hey guys, can i post here if i have a problem with my code from the FCC exercises?
Markus Kiili
@Masd925
Nov 01 2017 07:04
@zozolina123 Yes.
zozolina123
@zozolina123
Nov 01 2017 07:05

'function pairElement(str) {
var gene= ['A','T','C','G'];
var pair= ['T','A','G','C'];
str= str.split('');
var strfinal= [];
for(var i=0; i< str.length; i++){
var temp= [str[i]];
for(var j=0; j< gene.lenght;j++){
if(str[i]==gene[j]){
temp[i].push(pair[j]);
break;
}
}
strfinal.push(temp);
}
return strfinal;

}

pairElement("GCG");'

i don't understand why my final string does not contain the pair

ups
Markus Kiili
@Masd925
Nov 01 2017 07:07
@zozolina123 The solution would get simpler if you used an object like var pairs = {A:'T', T: 'A', C: 'G', G: 'C'};. Then you could use a character c and its pair pairs[c].
zozolina123
@zozolina123
Nov 01 2017 07:08
i will try this
Markus Kiili
@Masd925
Nov 01 2017 07:08
One loop would be enough.
zozolina123
@zozolina123
Nov 01 2017 07:08
thanks
kutagullasukumar
@kutagullasukumar
Nov 01 2017 07:51
Hi anybody there?

`
function testLogicalAnd(val) {
// Only change code below this line

if (val <= 10 && val >= 51) {
return "yes";
}

// Only change code above this line
return "No";
}

// Change this value to test
testLogicalAnd(10);`

Markus Kiili
@Masd925
Nov 01 2017 07:53
@kutagullasukumar No number can be smaller than 11 and larger than 50, so that condition is always false.
Marianissimus
@Marianissimus
Nov 01 2017 07:53
@kutagullasukumar hi. your if statement can't be right: it says if val is less or equal to 10 AND higher or equal to 51 :)
kutagullasukumar
@kutagullasukumar
Nov 01 2017 07:53
@Marianissimus Combine the two if statements into one statement which will return "Yes" if val is less than or equal to 50 and greater than or equal to 25. Otherwise, will return "No".

`
function testLogicalAnd(val) {
// Only change code below this line

if (val <= 50 && val >= 25) {
return "yes";
}

// Only change code above this line
return "No";
}

// Change this value to test
testLogicalAnd(10);`

Marianissimus
@Marianissimus
Nov 01 2017 07:54
you're looking for OR operator ||
kutagullasukumar
@kutagullasukumar
Nov 01 2017 07:54
&&
Marianissimus
@Marianissimus
Nov 01 2017 07:55
OR ||
kutagullasukumar
@kutagullasukumar
Nov 01 2017 07:55
And &&
Markus Kiili
@Masd925
Nov 01 2017 07:55
@kutagullasukumar Return "Yes", not "yes".
Condition looks right.
Marianissimus
@Marianissimus
Nov 01 2017 07:56
Can a number be both higher than X and lower than X?
kutagullasukumar
@kutagullasukumar
Nov 01 2017 07:56
@Marianissimus oops got it bro thanks
CamperBot
@camperbot
Nov 01 2017 07:56
kutagullasukumar sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 447 | @marianissimus |http://www.freecodecamp.com/marianissimus
kutagullasukumar
@kutagullasukumar
Nov 01 2017 07:56
spell mistake
kutagullasukumar
@kutagullasukumar
Nov 01 2017 08:33

`function testLogicalOr(val) {
// Only change code below this line

if(val > 9 || val < 21){
return "Outside";
}

// Only change code above this line
return "Inside";
}

// Change this value to test
testLogicalOr(15);`

dinesh
@1532j0004kg
Nov 01 2017 08:35

$(document).ready(function(){
$("button").click(function(){
getQuote();
});

function getQuote(){
$.ajax({
dataType: "json",
url: "https://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?",
data: data,
success: success
});
$(".displayBox").text(quoteAuthor);

}
});

Marianissimus
@Marianissimus
Nov 01 2017 08:35
@kutagullasukumar isn't it the other way around? just wondering :)
dinesh
@1532j0004kg
Nov 01 2017 08:35
Its not working?
kutagullasukumar
@kutagullasukumar
Nov 01 2017 08:35
yes not
did i do correct?
@Marianissimus where i am going wrong?
@Marianissimus i got it
np
kutagullasukumar
@kutagullasukumar
Nov 01 2017 09:47

`
function golfScore(par, strokes) {
// Only change code below this line
if(strokes == par && strokes < par){
return "Hole-in-one!";
}else if(strokes <= par-2){
return "Eagle";
}else if(strokes == par-1){
return "Birdie";
}else if(strokes <= par){
return "Par";
}else if(strokes == par+1){
return "Bogey";
}else if(strokes == par+2){
return "Double Bogey";
}else if(strokes >= par+3){
return "Go Home!";
}

return "Change Me";
// Only change code above this line
}

// Change these values to test
golfScore(5, 4);`

Markus Kiili
@Masd925
Nov 01 2017 10:02
@kutagullasukumar Hole in one means strokes===1. Nothing to do with par.
Deepak
@Deepak-1111
Nov 01 2017 10:41
In my website project. There are lots of unused .css files & .js. Does anyone have idea how to remove or clean up those unwanted files.?
Deepak
@Deepak-1111
Nov 01 2017 10:56
There is the issue with my Menuheader-navbar. Its not getting change its background color to transparent where its showing some white spaces only.. :(
BuntyBru
@BuntyBru
Nov 01 2017 11:01
i am having problems with the Weather project
response URL shows to be "https://fcc-weather-api.glitch.me/api/current?lat=NaN&lon=NaN"
'
how do i provide var as numbers
i tried parseInt and parseFloat
but they are not working
Markus Kiili
@Masd925
Nov 01 2017 11:02
@BuntyBru Can you show the code that generates the url?
BuntyBru
@BuntyBru
Nov 01 2017 11:02

var latitude;
var longitude;
var temp= document.getElementsByTagName("span")[0];
var btn = document.querySelector("button");
var loc = document.getElementsByTagName("span")[1];

function success(position){
latitude = position.coords.latitude;
longitude = position.coords.longitude;
}
navigator.geolocation.getCurrentPosition(success);

var xhr = new XMLHttpRequest();
xhr.open("GET","https://fcc-weather-api.glitch.me/api/current?lat="+latitude+"&lon="+longitude );
xhr.send();

@Masd925
A-J Roos
@Asjas
Nov 01 2017 11:03
Can you post a link to your codepen link? Html geolocation returns numbers by default. It shouldn't be converted
Deepak
@Deepak-1111
Nov 01 2017 11:03
There is the issue with my Menuheader-navbar. Its not getting change its background color to transparent where its showing some white spaces only.. :(
@Asjas
There is the issue with my Menuheader-navbar. Its not getting change its background color to transparent where its showing some white spaces only.. :(
BuntyBru
@BuntyBru
Nov 01 2017 11:03
@Asjas
just a minute
I have just started doing this so not much of design
Stephen James
@sjames1958gm
Nov 01 2017 11:04
@BuntyBru the success function is executed asynchronously, after your xfr.send() as run so the values are not available yet.
you should do your xhr code in the success function or in a function called from success
Markus Kiili
@Masd925
Nov 01 2017 11:04
@BuntyBru You need to make the second ajax call inside the callback function of the geolocation call. That way those variables would have values.
Deepak
@Deepak-1111
Nov 01 2017 11:04
@BuntyBru Please can you take my computer remote brother?
A-J Roos
@Asjas
Nov 01 2017 11:04
ROFMAO
Deepak
@Deepak-1111
Nov 01 2017 11:04
@sjames1958gm
There is the issue with my Menuheader-navbar. Its not getting change its background color to transparent where its showing some white spaces only.. :(
Stephen James
@sjames1958gm
Nov 01 2017 11:07
@Deepak-1111 Do you have a link to your code?
A-J Roos
@Asjas
Nov 01 2017 11:07
@Deepak-1111 you will need to post a link to your code. no-one is going to remote to your computer
@BuntyBru if you move your xhr request into the success function it works. like @sjames1958gm suggested
BuntyBru
@BuntyBru
Nov 01 2017 11:14

@Asjas
By that you mean putting

all these 3 lines
var xhr = new XMLHttpRequest();
xhr.open("GET","https://fcc-weather-api.glitch.me/api/current?lat="+latitude+"&lon="+longitude);
xhr.send();

under the success function

?
A-J Roos
@Asjas
Nov 01 2017 11:15
var latitude;
var longitude;
var temp= document.getElementsByTagName("span")[0];
var btn = document.querySelector("button");
var loc = document.getElementsByTagName("span")[1];

function success(position){
   latitude  = position.coords.latitude;
   longitude = position.coords.longitude; 

   var xhr = new XMLHttpRequest();
   xhr.open("GET","https://fcc-weather-  api.glitch.me/api/current?lat="+latitude+"&lon="+longitude    );
   xhr.send();

}
 navigator.geolocation.getCurrentPosition(success);
Like that
BuntyBru
@BuntyBru
Nov 01 2017 11:16
yeah its working
only if we declare xhr outside the function
i mean at the top
make it global
@Asjas
@Asjas
Could you explain what went wrong earlier
?
@sjames1958gm
can you elaborate a bit please
What does this line do actually
"navigator.geolocation.getCurrentPosition(success);"
Markus Kiili
@Masd925
Nov 01 2017 11:20
@BuntyBru It tells the browser to run the success function when the geolocation response comes at some point later (after the script has finished executing).
A-J Roos
@Asjas
Nov 01 2017 11:21
navigator.geolocation.getCurrentPosition is a function and you feed it the success function declared above.
https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation
Deepak
@Deepak-1111
Nov 01 2017 11:22
There is the issue with my Menuheader-navbar. Its not getting change its background color to transparent where its showing some white spaces only.. :(
BuntyBru
@BuntyBru
Nov 01 2017 11:23
@Asjas @Masd925
thanks people
CamperBot
@camperbot
Nov 01 2017 11:23
buntybru sends brownie points to @asjas and @masd925 :sparkles: :thumbsup: :sparkles:
:cookie: 262 | @asjas |http://www.freecodecamp.com/asjas
:star2: 4558 | @masd925 |http://www.freecodecamp.com/masd925
BuntyBru
@BuntyBru
Nov 01 2017 11:24
maybe i can finish the project by the end of the day
BuntyBru
@BuntyBru
Nov 01 2017 11:48
How do we retrieve the data from the API response
?
alpox
@alpox
Nov 01 2017 11:49
@BuntyBru
$.getJSON(url, function(data) {
    console.log(data); // Data is the data from the response
});
Markus Kiili
@Masd925
Nov 01 2017 11:52
@BuntyBru In other words, the browser automatically executes the callback function you provide when the response comes and passes the response into the function. With getJSON, the response is automatically parsed into an JS object, so data holds an object.
hakanpekel
@hakanpekel
Nov 01 2017 11:56
Hi. I am not save this text file to local disk C in my computer. It saves automatically Downloads folder in my computer. Can anybody help me ? I want to save this text file local C
alpox
@alpox
Nov 01 2017 11:56
@Masd925 Hi there, long time no see :D
Markus Kiili
@Masd925
Nov 01 2017 11:57
@alpox Hi.
alpox
@alpox
Nov 01 2017 11:58
@hakanpekel You can change the default download folder in the browser settings
BuntyBru
@BuntyBru
Nov 01 2017 11:58
@alpox
in the place of url
i will have to put the responseURL ?
Tiago Correia
@tiagocorreiaalmeida
Nov 01 2017 11:59
good morning everyone
the url to request the api @BuntyBru
BuntyBru
@BuntyBru
Nov 01 2017 11:59
ok
alpox
@alpox
Nov 01 2017 11:59
@BuntyBru You have to put there the api url. I'm not sure what you mean with responseURL :D
@tiagocorreiaalmeida :wave:
BuntyBru
@BuntyBru
Nov 01 2017 12:00
@alpox
same thing
@alpox
In my code i have already stored that in the variable xhr
hakanpekel
@hakanpekel
Nov 01 2017 12:07
Thank you this works on when i select the desktop, but when i select the local disk C it doesn't save. It asks :This PC > Documents
Markus Kiili
@Masd925
Nov 01 2017 12:09
@BuntyBru For using the XMLHttpRequest response, you need to use xhr.onreadystatechange=callback_function_here
BuntyBru
@BuntyBru
Nov 01 2017 12:41
@Masd925
confused
I think that XMLHttpRequest part is somewhat complex
should i use NodeJs
Markus Kiili
@Masd925
Nov 01 2017 12:45
BuntyBru
@BuntyBru
Nov 01 2017 12:47
okay i am looking into it
Mostafa Hesham
@mhesham32
Nov 01 2017 13:06
Hello ,
I think my code here has the right logic but it isn't :smile: i don't understand why can any one explain this pls

function fearNotLetter(str) {
  str=str.toUpperCase();
  if(str.charCodeAt(0)==65){

    for(var i=0; i<str.length; i++){
      var check=str.charCodeAt(str[i])!==str.charCodeAt(str[i+1])-1;
      if(check){
        return String.fromCharCode(str.charCodeAt(str[i])+1).toLowerCase();
      }

    }     

  }else{
  return undefined;
  }

}

fearNotLetter("abce");
kutagullasukumar
@kutagullasukumar
Nov 01 2017 13:15
@Masd925 nice of you thanks
CamperBot
@camperbot
Nov 01 2017 13:15
kutagullasukumar sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4559 | @masd925 |http://www.freecodecamp.com/masd925
BuntyBru
@BuntyBru
Nov 01 2017 13:15
@Masd925
i get the situation about onreadystatechange
but now
how do i disintegrate answers of specific variables from the json'
Stephen James
@sjames1958gm
Nov 01 2017 13:16
@mhesham32 Don't assume the first letter is a, just start with the first letter
@mhesham32 str.charCodeAt(i) not str.charCodeAt(str[i])
You could also do str[i].charCodeAt()
the whole API response takes place of the variable loc
whereas i just want the city name to take place of the "location"
and rest with respect to that
Stephen James
@sjames1958gm
Nov 01 2017 13:20
@BuntyBru Here is an example getting the main value from the weather
```
data = JSON.parse(this.responseText)
loc.innerHTML=data.weather[0].main;
BuntyBru
@BuntyBru
Nov 01 2017 13:23
@sjames1958gm
okay i am trying it
Stephen James
@sjames1958gm
Nov 01 2017 13:23
data.name would be the city
Mostafa Hesham
@mhesham32
Nov 01 2017 13:23
@sjames1958gm it ignores str[i+1] it gaves the same value as str[i];
BuntyBru
@BuntyBru
Nov 01 2017 13:23
yes i was doing that
@sjames1958gm
Stephen James
@sjames1958gm
Nov 01 2017 13:25
@mhesham32 Not sure what you mean.
@BuntyBru Also you have this.readyState=4 that should be == or ===
Mostafa Hesham
@mhesham32
Nov 01 2017 13:27

when loop

str="abce"
//i==0
str[i]//a
str[i+1]//b i got a instead

@sjames1958gm

Stephen James
@sjames1958gm
Nov 01 2017 13:30
In the console
str="abce"
"abce"
i = 0
0
str[i]
"a"
str[i+1]
"b"
Mostafa Hesham
@mhesham32
Nov 01 2017 13:32

try my code


function fearNotLetter(str) {
  str=str.toUpperCase();
  if(str.charCodeAt(0)==65){

    for(var i=0; i<str.length; i++){
      var check=str[i].charCodeAt()!==str[i+1].charCodeAt()-1;
                               //sould be 65                          should be 65
      console.log(str.charCodeAt(str[i]),str.charCodeAt(str[i+1])-1);
      if(check){
        return String.fromCharCode(str.charCodeAt(str[i])+1).toLowerCase();
      }

    }     

  }else{
  return undefined;
  }

}

fearNotLetter("abce");

here http://www.pythontutor.com/javascript.html#mode=edit

Stephen James
@sjames1958gm
Nov 01 2017 13:35
You still have str.charCodeAt(str[i]) in three places
Mostafa Hesham
@mhesham32
Nov 01 2017 13:44
@sjames1958gm thanks it works i will try to under stand how Now :smile:
CamperBot
@camperbot
Nov 01 2017 13:44
mhesham32 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8646 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Nov 01 2017 13:58
@mhesham32 :+1: goodluck
Mostafa Hesham
@mhesham32
Nov 01 2017 14:24
why true== new Boolean returns flase in javascript
BuntyBru
@BuntyBru
Nov 01 2017 14:40
@sjames1958gm
i went for a break
Done with the tech part
Now only designing left
@sjames1958gm
Thanks mate
You are a savior :)
CamperBot
@camperbot
Nov 01 2017 14:41
buntybru sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8647 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
kutagullasukumar
@kutagullasukumar
Nov 01 2017 14:54

`var count = 0;

function cc(card) {
// Only change code below this line

return "Change Me";
// Only change code above this line
}

// Add/remove calls to test your function.
// Note: Only the last will display
cc(2); cc(3); cc(7); cc('K'); cc('A');`

How can i start this one?
some body guide me please
Tyler
@nmbrgts
Nov 01 2017 15:07
@khaduch I was thinking of using Elm. My concern is that the syntax is very different from JS. So I'm not sure if that might be a problem when it is time for my projects to be reviewed.
Stephen James
@sjames1958gm
Nov 01 2017 15:12
@BuntyBru :+1:
@kutagullasukumar There are two parts to the function. 1) use the table and the card value to add or subtract from count 2) use count value to return Bet or Hold string
kutagullasukumar
@kutagullasukumar
Nov 01 2017 15:14
count = 0, if i add +1 to count then it will be 1, so how can i validate other cards
Stephen James
@sjames1958gm
Nov 01 2017 15:24
@kutagullasukumar each cc(2) cc(3) are separate calls to the function - which modifies the global - it is a sequence of calls
kutagullasukumar
@kutagullasukumar
Nov 01 2017 15:25
@sjames1958gm How can we make sequence of calls
Stephen James
@sjames1958gm
Nov 01 2017 15:25
@kutagullasukumar The testing code does it for you
cc(2); cc(3); cc(7); cc('K'); cc('A');
this is a sequence of calls
kutagullasukumar
@kutagullasukumar
Nov 01 2017 15:26
so condition how can we give?

`var count = 0;

function cc(card) {
// Only change code below this line
if(card == 2){
return count++ + "5 Bet";
}

return "Change Me";
// Only change code above this line
}

// Add/remove calls to test your function.
// Note: Only the last will display
cc(2); cc(3); cc(7); cc('K'); cc('A');`

Martialis39
@Martialis39
Nov 01 2017 15:34
Hey all, simple question
how can I get this section to be 100% of the screen?
Tom
@moT01
Nov 01 2017 15:34
hi
I just want it to display the whole image basically
I dont know If I should used vh's
Kaz Baig
@kbaig
Nov 01 2017 15:35
@Martialis39 set the div dimensions to 100% of the viewport dimensions
Tom
@moT01
Nov 01 2017 15:35
you could put the image on the body
Martialis39
@Martialis39
Nov 01 2017 15:35
@moT01 I might want to add other sections later
kutagullasukumar
@kutagullasukumar
Nov 01 2017 15:35
in css mention position:relative; @Martialis39
Martialis39
@Martialis39
Nov 01 2017 15:35
@kbaig so set height: 100vh?
@kutagullasukumar i will try that now
@kutagullasukumar im afraid it did not work for me
kutagullasukumar
@kutagullasukumar
Nov 01 2017 15:36
thanks bro
Kaz Baig
@kbaig
Nov 01 2017 15:36
@Martialis39 ya editing ur pen one sec
Tom
@moT01
Nov 01 2017 15:36
you can either move the backround image to the body, or do what kaz said
set the lander to 100vh
im not sure on the position relative
kutagullasukumar
@kutagullasukumar
Nov 01 2017 15:38
@Martialis39 remove img from css and place it in html page
@Martialis39 I only changed css
Martialis39
@Martialis39
Nov 01 2017 15:39
@kbaig perfect, thank you!
CamperBot
@camperbot
Nov 01 2017 15:39
martialis39 sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 394 | @kbaig |http://www.freecodecamp.com/kbaig
Martialis39
@Martialis39
Nov 01 2017 15:39
Got exactly what I wanted
Kaz Baig
@kbaig
Nov 01 2017 15:40
:+1:
Martialis39
@Martialis39
Nov 01 2017 15:40
is there anything I should be wary of using vh's?
Any pitfalls?
Kaz Baig
@kbaig
Nov 01 2017 15:40
Well you just gotta make sure you want it to do what it's doign
In this case, if you want a cover image, then yeah use that
it's a div so width is automatically 100%
well a block element
not a div
Martialis39
@Martialis39
Nov 01 2017 15:41
sure
Kaz Baig
@kbaig
Nov 01 2017 15:41
it's always going to be in respect to the window height, even if it's resized
Martialis39
@Martialis39
Nov 01 2017 15:41
One more thing, I always like to ask a few more questions when I encounter someone who is really helpful :D
Kaz Baig
@kbaig
Nov 01 2017 15:41
so it's a 'responsive' cover in that sense
Martialis39
@Martialis39
Nov 01 2017 15:42
Font sizes. How do I figure how big should my h1 be, for example. Is it just random guess work or is there a recommendation a la h1 should be twice as larger as h2
Kaz Baig
@kbaig
Nov 01 2017 15:42
@Martialis39 Do notice that the image gets cut off from the bottom if you change the width because it's a cover though
No convention in that sense, though people do like to stick to multiples of a number
So some people will work in pixel sizes in multiples of 4, 6 etc
But others don't
Some people like to just set the body/html to an explicit font and work only in em/rem units
That could be good for responsiveness but also maybe hard to manage
^ explains rem vs em
Martialis39
@Martialis39
Nov 01 2017 15:51
rem is relative to the root element right?
so I could do something like 62.5% on the body
and then go with rems throughout the documents?
I read the 62.5% somewhere, saying it is basically the equivalent of 10px, makes it easier to reason
Kaz Baig
@kbaig
Nov 01 2017 16:12
@Martialis39 root element means the html element I believe. Setting the body as 62.5% rem/em would indeed mean 10px as the default font size is 16px
Jimmy Van Veen
@JimmayVV
Nov 01 2017 16:16

@kbaig @Martialis39 yes, REM is for the root element, which in this case should always mean HTML

MDN has some info on this:

https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

@Martialis39 the 62.5% you are talking about probably came from that MDN article
Martialis39
@Martialis39
Nov 01 2017 16:21
@JimmayVV Thanks!
CamperBot
@camperbot
Nov 01 2017 16:21
martialis39 sends brownie points to @jimmayvv :sparkles: :thumbsup: :sparkles:
:cookie: 302 | @jimmayvv |http://www.freecodecamp.com/jimmayvv
Martialis39
@Martialis39
Nov 01 2017 16:22
So its all up to my discretion and taste?
Although I imagine that an h2, for example, shouldnt be bigger than h1
Kaz Baig
@kbaig
Nov 01 2017 16:23
Pretty much
Though some designs may call for h2 to be bigger than h1
But you still want to use the tags semantically and probably convey that meaning through the design somehow
Jimmy Van Veen
@JimmayVV
Nov 01 2017 16:26
@Martialis39 you are pretty much correct in what you are saying - H1 has strong meaning, and from a semantic standpoint probably shouldn't appear more than once on a page. Logistically if you subscribe to that theory, then that has many implications - sometimes a page header might be a simple "Projects" designation, and that heading might be the same size, or maybe smaller, than the project names you list underneath (theoretically with h2 tags)
so while h1 should have a stronger meaning than an h2 tag, they do not necessarily have to be sized in direct correlation to this meaning. You shouldn't be afraid to make an h2 style with a bigger font size than h1, I'd say just be aware of the meaning you are giving it, and just make sure your design uses the tags well

@Martialis39 again, MDN has some good info on this topic:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

"You should consider avoiding using <h1> more than once on a page. See "Defining sections" in Using HTML sections and outlines for more information."

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Defining_sections

Jimmy Van Veen
@JimmayVV
Nov 01 2017 16:33
@Martialis39 but while many people agree it's important to consider the importance of the h1 tag vs h2 (h1 > h2) don't let it bog you down too much when designing something. You can always refactor later, so don't let paralysis of analysis set in. Get your thing done, then you can make it perfect later :)
Martialis39
@Martialis39
Nov 01 2017 17:25
@JimmayVV Thanks! Ill try and, as they say on Shoptalk
CamperBot
@camperbot
Nov 01 2017 17:25
martialis39 sends brownie points to @jimmayvv :sparkles: :thumbsup: :sparkles:
:cookie: 303 | @jimmayvv |http://www.freecodecamp.com/jimmayvv
Martialis39
@Martialis39
Nov 01 2017 17:25
Just build websites!
Martialis39
@Martialis39
Nov 01 2017 17:34
One more thing,
Im getting there
but I would like to figure out how I could have the letters animate in the same direction
as if they were on a wheel
any ideas?
Kaz Baig
@kbaig
Nov 01 2017 17:38
@Martialis39 Could you elaborate? Not sure what you mean
@Martialis39 Oh you mean the P and M both go either up or down
Trommelochse
@Trommelochse
Nov 01 2017 17:39
@Martialis39 I would just add one letter in the HTML
this letter then animates down, and then I would add a callback that removes the letter and adds a new on instead, which has an initial position set, so it comes from the top
so everything completely in JS
Martialis39
@Martialis39
Nov 01 2017 17:43
@kbaig yeah exactly, like its a rotating wheel
@Trommelochse good, Ill try that
thanks! @Trommelochse
CamperBot
@camperbot
Nov 01 2017 17:44
martialis39 sends brownie points to @trommelochse :sparkles: :thumbsup: :sparkles:
:cookie: 341 | @trommelochse |http://www.freecodecamp.com/trommelochse
Ken Haduch
@khaduch
Nov 01 2017 18:16
@nmbrgts - re: :point_up: November 1, 2017 11:07 AM - it seems to be a fair question. I don't know the answer - I thought that I would just look at the example Wikipedia search project, and that is using Pug for the HTML, and Angular.js for the "JS" code.
I don't know if you got any other responses when you posted your question - I'd be curious to know what other's opinions are. I don't know if there is any official policy in the freeCodeCamp? - regarding this original question: :point_up: October 31, 2017 9:03 PM - the question is basically the requirements for the languages that can be used in the implementation of a project, what is acceptable to use? Tyler (the questioner) was planning to use "Elm", and the main concern is how the project reviews are handled. (Anyone can chime in with knowledgeable or opinionated answers...) And maybe the forum would be a good place to search for information, or ask the question and open it for discussion...
Maryna Sokolova
@ultramarichka
Nov 01 2017 18:56
A-J Roos
@Asjas
Nov 01 2017 18:58
@ultramarichka yeah it plays for me
I misheard "pocket" calculator. I heard something far worse...
imperial-isms
@imperial-isms
Nov 01 2017 19:06
Anyone do the Sass exercises on the Beta site? The first challenge “Store Data with Sass Variables” doens’t seem to be working. I mimicked the code in the example, but I can’t pass the test.
Example Code
$main-fonts: Arial, sans-serif;
$headings-color: green;

//To use variables:
h1 {
  font-family: $main-fonts;
  color: $headings-color;
}
mzedlach
@mzedlach
Nov 01 2017 19:07
Is anyone able to help me with the weather API? I'm really not grasping the content. Looking back at old lessons and documentation; I just don't get it.
imperial-isms
@imperial-isms
Nov 01 2017 19:07
My Code

<style>

$text-color: red;

  .header{
    text-align: center;
  }
  .blog-post, h2 {
    color: $text-color;
  }

  $text-color: red;
</style>
@mzedlach where are you stuck?
mzedlach
@mzedlach
Nov 01 2017 19:08
So I don't understand how to access teh content in the object
It's a bit messy, sorry
I'm looking at the old lessons. And also directly at the code of hte sample (i know we shouldn't) but it's just not helping.
Should I be looking at ajax stuff for this? http://api.jquery.com/jquery.ajax/
A-J Roos
@Asjas
Nov 01 2017 19:11
Well you are getting data. It's to get it from the jSON object.
mzedlach
@mzedlach
Nov 01 2017 19:11
Yes, I don't understand how to access it.
imperial-isms
@imperial-isms
Nov 01 2017 19:12
Try using this tool: http://jsonviewer.stack.hu/
Put in a complete working URL into your browser address and it should return a JSON string
Copy and paste that string into the tool I just gave you and you’ll be able to more easily navigate the object
mzedlach
@mzedlach
Nov 01 2017 19:13
I don't know how to navigate it in the first place
I'm looking at "json" and "ajax" and I just don't know how to formulate anything
imperial-isms
@imperial-isms
Nov 01 2017 19:14
It’s an object so you access its properties as you would in Javascript
A-J Roos
@Asjas
Nov 01 2017 19:14
You use object notation. json['obj1'].obj2[obj3] for instance
imperial-isms
@imperial-isms
Nov 01 2017 19:14
What Roos said
A-J Roos
@Asjas
Nov 01 2017 19:14
Yours would start with json as that is what you pass into the function
imperial-isms
@imperial-isms
Nov 01 2017 19:15
So when you’re iterating through json in your callback function
mzedlach
@mzedlach
Nov 01 2017 19:15
within this? :
 json.forEach(function(val) {
              ("#temp")html.val.temp;
           })
imperial-isms
@imperial-isms
Nov 01 2017 19:15
You’ll be accessing its properties like json.someProp
A-J Roos
@Asjas
Nov 01 2017 19:15
 $.getJSON(url, function(json) {
    var temp = json['obj1'].obj2;
};
imperial-isms
@imperial-isms
Nov 01 2017 19:15
Well…in that case it’ll be more like val.someProp
Moisés Man
@moigithub
Nov 01 2017 19:15
forEach is an array method
json (probably) will be an Object
imperial-isms
@imperial-isms
Nov 01 2017 19:16
Good point
mzedlach
@mzedlach
Nov 01 2017 19:16
So what does $.getJSON do?
A-J Roos
@Asjas
Nov 01 2017 19:16
It's a jQuery function. That makes an api call
Basically
mzedlach
@mzedlach
Nov 01 2017 19:16
okay
A-J Roos
@Asjas
Nov 01 2017 19:17
And returns a object value that you pass to the function.
mzedlach
@mzedlach
Nov 01 2017 19:17
and the "json" that is in brackets --> function(json) --> is that what holds hte object?
like, a variable?
A-J Roos
@Asjas
Nov 01 2017 19:17
Correct
imperial-isms
@imperial-isms
Nov 01 2017 19:17
Yes
mzedlach
@mzedlach
Nov 01 2017 19:17
Awesome
So, why the 'forEach' is that necessary?
not necessary, right?
imperial-isms
@imperial-isms
Nov 01 2017 19:18
You should be using
for (x in person) {
    //do something with x on the person object
}
mzedlach
@mzedlach
Nov 01 2017 19:19
mmm... does not compute...
Hold on, let me play around with this for a sec, now that those tidbits make more sense
A-J Roos
@Asjas
Nov 01 2017 19:19
@mzedlach You also shouldn't have to parseInt the coords you are geting. It is already numbers and you actually lose accuracy as it converts it to whole numbers
mzedlach
@mzedlach
Nov 01 2017 19:20
@Asjas Right, so I was getting an error message....
Hold on, let me find it again
imperial-isms
@imperial-isms
Nov 01 2017 19:20
the json object that you’ll get from that API will return an object and not an array, so you’ll want to use the for…in to iterate throught the properties
mzedlach
@mzedlach
Nov 01 2017 19:22
Ach! Hold on, I killed the whole page.
A-J Roos
@Asjas
Nov 01 2017 19:22
xD
imperial-isms
@imperial-isms
Nov 01 2017 19:23
        $.getJSON(url, function(json) {
          for (prop in json) {
             console.log(prop)
           }
        });
mzedlach
@mzedlach
Nov 01 2017 19:26
The page isnt' even loading anymore.
A-J Roos
@Asjas
Nov 01 2017 19:26
Yeah I see there is an unexpected token at the bottom. I'm trying to see what function isn't closed properly
imperial-isms
@imperial-isms
Nov 01 2017 19:27
var url = "https://fcc-weather-api.glitch.me/api/current?"
var lat, long; 
var key = "061e7b768525a32d246f44a29b887978"; 

$(document).ready(function() {

   if ("geolocation" in navigator) {
     navigator.geolocation.getCurrentPosition( function(position) {
        var lat = position.coords.latitude;
        var long = position.coords.longitude;
        url = url + "lat=" + lat + "&lon=" + long; 
        console.log(url);


      });
   }    
   else {
     $("#sentence").html('Your browser does not support geolocation');
   };


      $("#fBtn").on("click", function() {
      $("#fBtn").removeClass("btn-secondary");
      $("#fBtn").addClass("btn-primary");
      $("#cBtn").removeClass("btn-primary");
      $("#cBtn").addClass("btn-secondary");
   });

   $("#cBtn").on("click", function() {
      $("#cBtn").removeClass("btn-secondary");
      $("#cBtn").addClass("btn-primary");
      $("#fBtn").removeClass("btn-primary");
      $("#fBtn").addClass("btn-secondary");
   });


});
I cleaned it up for you and it loads now
mzedlach
@mzedlach
Nov 01 2017 19:28
AH! also found it
Copy and paste that object here: http://jsonviewer.stack.hu/
mzedlach
@mzedlach
Nov 01 2017 19:30
That is SO MUCH easier to look at :)
imperial-isms
@imperial-isms
Nov 01 2017 19:30
Navigate to the “Viewer” tab…start expanding the tree and decide which information you want to display on your app. You’ll need to correctly use object notation to access it…right now it’s going to at least look like json[“someProp”]
mzedlach
@mzedlach
Nov 01 2017 19:31
Okay, cool. Thank you so much for the tips! And especially for not just giving me the answer. Or going a completely different route
@imperial-isms and @Asjas Thank you !
CamperBot
@camperbot
Nov 01 2017 19:31
mzedlach sends brownie points to @imperial-isms and @asjas :sparkles: :thumbsup: :sparkles:
:cookie: 263 | @asjas |http://www.freecodecamp.com/asjas
:cookie: 164 | @imperial-isms |http://www.freecodecamp.com/imperial-isms
imperial-isms
@imperial-isms
Nov 01 2017 19:31
Remember…objects can contain arrays, so it may even look like json[“someProp”][0] and so on on
mzedlach
@mzedlach
Nov 01 2017 19:31
I will be back in a moment :)
imperial-isms
@imperial-isms
Nov 01 2017 19:31
Goodluck!
A-J Roos
@Asjas
Nov 01 2017 19:31
Pleasure. Update us as you go along or when you are done
mzedlach
@mzedlach
Nov 01 2017 19:31
You guys are awesome :)
I'll bb
mzedlach
@mzedlach
Nov 01 2017 19:40
Good news and bad news ~
Good news, I was able to change some html to show the current weather.
Bad news, when I try to use the url for my location to get the object in the browser, I get "Please provide longitude as lon and latitude as lat as numbers/floats."
Which is why I had originally done 'parseInt'
A-J Roos
@Asjas
Nov 01 2017 19:43
Well that is strange. And a new type of error I've seen. For me the website loads the url & data
mzedlach
@mzedlach
Nov 01 2017 19:44
yeah, so codepen is doing alright but when I try to get the object for my location, it gives me that error.
I was previously getting the same error in codepen before. Not sure why it's working now.
A-J Roos
@Asjas
Nov 01 2017 19:44
I'd suggest using parseInt then to finalize the project until you can figure out why that error would apear for your region
mzedlach
@mzedlach
Nov 01 2017 19:45
Okay
A-J Roos
@Asjas
Nov 01 2017 19:46
Do you mean you have a local copy of the website you are running that is giving the error? Not in codepen? And the codepen one is working?
mzedlach
@mzedlach
Nov 01 2017 19:49
So, I tried to run my lat/long within the API request link that you sent.
I get an error in my browser for htat.
Right now, Code pen is working wonderfully.
imperial-isms
@imperial-isms
Nov 01 2017 19:49
The one that I sent?
That’s weird…it works for me.
Wait...
mzedlach
@mzedlach
Nov 01 2017 19:50
Yes, sorry @Asjas The one that @imperial-isms sent :)
imperial-isms
@imperial-isms
Nov 01 2017 19:50
I pulled that link from my project
Let me test the link you use
Will you link me to your Codepen again?
mzedlach
@mzedlach
Nov 01 2017 19:50
sure
omg.
nevermind
I had a quotation mark hanging out at the end.
.<
imperial-isms
@imperial-isms
Nov 01 2017 19:51
Hahah
A-J Roos
@Asjas
Nov 01 2017 19:51
Hahaha. Happens
mzedlach
@mzedlach
Nov 01 2017 19:51
hahaha
Sorry ^^
imperial-isms
@imperial-isms
Nov 01 2017 19:51
Happened to me right before I sent you the link
mzedlach
@mzedlach
Nov 01 2017 19:52
Okay, so I must admit, I have been away from coding for a bit.
I'm using this:
       currentWeather = json["weather"][0]["description"];
       currentLocation = json["name"];
       currentTemp = json["main"]["temp"];
But, isn't there a way with decimals?
json.weather[0].description?
Unless I am, again, leaving some stupid tidbit of punctuation and that's why it's not working.
Moisés Man
@moigithub
Nov 01 2017 19:53
"dot notation"
n yes that should also work
mzedlach
@mzedlach
Nov 01 2017 19:53
okay
imperial-isms
@imperial-isms
Nov 01 2017 19:53
In this case. dot notation should work
Sometimes there will be spaces or something in which you’ll need to use brackets with quotes `[“some prop”]
mzedlach
@mzedlach
Nov 01 2017 19:54
hmmm... it must have been some silly mistake because it's working now.
So, out of curiosity, @imperial-isms and @Asjas where are you guys at?
in terms of codecamp stuff?
A-J Roos
@Asjas
Nov 01 2017 19:55
@mzedlach Yeah some people prefer to rotate 1 bracket 1 dot going forward or to just use dots or brackets. The only time you are forced to used brackets it as @imperial-isms says, if there is a space in the object name
I needed to start with the intermediate javascript 4 days ago. Been putting it off. Been doing random projects and learning sass. But i'll start with the javascript this weekend
mzedlach
@mzedlach
Nov 01 2017 19:55
Good to know :)
imperial-isms
@imperial-isms
Nov 01 2017 19:55
I’ve finished front-end just before tic tac toe and simon, but I’m skipping those. I moved on to the beta site.
mzedlach
@mzedlach
Nov 01 2017 19:56
Beta site?
imperial-isms
@imperial-isms
Nov 01 2017 19:56
Beta site front-end
mzedlach
@mzedlach
Nov 01 2017 19:56
Is it a different site?
A-J Roos
@Asjas
Nov 01 2017 19:56
beta.freecodecamp.com
mzedlach
@mzedlach
Nov 01 2017 19:57
Hmm.... "We have disabled new sign ups on beta."
imperial-isms
@imperial-isms
Nov 01 2017 19:57
I’m just using it without signing up
I’m not worried about getting a certificate
Hey @Asjas have you done the Sass section of that beta site?
mzedlach
@mzedlach
Nov 01 2017 19:57
Well, it's good to see they've updating thigns :)
A-J Roos
@Asjas
Nov 01 2017 19:58
No. I've read the Sass documentation. And rebuilt a few of my websites using sass & built a new personal website just using sass. Haven't look at the fcc part
imperial-isms
@imperial-isms
Nov 01 2017 19:58
Nice
Link to your personal website?
A-J Roos
@Asjas
Nov 01 2017 19:59
https://asjasroos.co.za. Still a few things outstanding. Probably a better intro and then spacing on the images when you hover
imperial-isms
@imperial-isms
Nov 01 2017 20:00
Looks good
I viewed it with developer tools on various “devices” and the layout gets thrown out
A-J Roos
@Asjas
Nov 01 2017 20:02
On different sizes (mobile & tablet) the headings & paragraphs are still too big. But yeah, it was a great experience. I learned quite a bit of bootstrap and sass. Also gulp. I now use gulp to build sass into css. I then autoprefix vendor-prefixes and minify the css.
Yeah that is a widht bug. I'm still looking into what is causing it. Bootstrap should resize itself
imperial-isms
@imperial-isms
Nov 01 2017 20:03
Not sure what any of that means starting at “also gulp” haha
imperial-isms
@imperial-isms
Nov 01 2017 20:04
You’ve set the min-width to 500px on .background h1
A-J Roos
@Asjas
Nov 01 2017 20:04
Gulp.js is a worker built in javascript. You can minify css, minify images, compile sass into css. There are hundreds of plugins. And it's all automated
I'll change that and see if it displays better :)
imperial-isms
@imperial-isms
Nov 01 2017 20:05
I disabled it and it completely reorients everything
Your nav bar doesn’t extend off the viewport anymore
Also, here’s how it looks on an "iPhone 5"
A-J Roos
@Asjas
Nov 01 2017 20:07
Yeah I'll take that out and use padding if needed. Setting a width was not neccassary
@imperial-isms my first mobile query started at 340. iphone 5 is 320. I just missed it xD
imperial-isms
@imperial-isms
Nov 01 2017 20:09
Aha!
mzedlach
@mzedlach
Nov 01 2017 20:11
Hey, so I have more quetsions :)
A-J Roos
@Asjas
Nov 01 2017 20:11
Okay. Shoot
mzedlach
@mzedlach
Nov 01 2017 20:12
Just looking at the code in the sample:
I see that they're extracting info from teh object using ajax
right?
Is there a benefit of using ajax to json? Or vice versa?
A-J Roos
@Asjas
Nov 01 2017 20:14
$getJSON is a shorthand for $ajax. With extra parameters already set
Basically $getJSON sets the following for $ajax
$.ajax({
      url: url,
      dataType: 'json',
      data: data,
      success: callback
    });
mzedlach
@mzedlach
Nov 01 2017 20:15
So where did you get htat tidbit from?
I was tryign to read into ajax before
But not getting it.
oh, oh, i see it :)
A-J Roos
@Asjas
Nov 01 2017 20:16
So if you do know that the api you are working with will reply json it's prefered to use $getJSON. If the api returns a different datatype you use $ajax.
mzedlach
@mzedlach
Nov 01 2017 20:16
ahhh
okay, that's good to know
How long have you been coding for?
I always try to read documentation, but half the time I feel like it confuses me more...
A-J Roos
@Asjas
Nov 01 2017 20:17
You will then set the dataType: 'whatever'. Started with fcc about two months ago. But did Delhi programming in high school. Age 15 to 18
I got a early exposure. But after high school I stopped working with programming and went into IT Support
I'm now making the slow and somewhat hard change back to development
mzedlach
@mzedlach
Nov 01 2017 20:19
Nice :) Well, it's good you were at least within tech to start with
A-J Roos
@Asjas
Nov 01 2017 20:19
Yeah it's always been a passion
mzedlach
@mzedlach
Nov 01 2017 20:19
Must have helped a great deal!
:)
A-J Roos
@Asjas
Nov 01 2017 20:21
Yeah sometimes it feels that it did. Other times I still feel completely overwhelmed. The imposter syndrome is unreal
mzedlach
@mzedlach
Nov 01 2017 20:21
Preaching to the choir :)
A-J Roos
@Asjas
Nov 01 2017 20:22
:)
mzedlach
@mzedlach
Nov 01 2017 20:23
I'm just looking at your weather app... mind if I try to replicate the background change based on weather?
A-J Roos
@Asjas
Nov 01 2017 20:24
Yeah no probs. You might want to use a switch statement. And not a massive IF statement like I did.
I still need to redo mine as a switch statement. Which will look cleaner than that massive if statement. But I've been too lazy to redo it
mzedlach
@mzedlach
Nov 01 2017 20:25
Oh yeah! So you actually loaded up every image!
Dedication :)
How did you find out every possible value for the weather type?
checked the json file every day when the weather changed?
Absolutely kidding!
imperial-isms
@imperial-isms
Nov 01 2017 20:27
Hey @Asjas have you tried to use Sass in Codepen?
A-J Roos
@Asjas
Nov 01 2017 20:28
I checked with "fake" gps data. Haha. I basically typed in random numbers to see what rain, snow, clouds and clear is called. And then I just change if it's clear AND a certain temperature
Yes. I am still moving some of my codepen projects over but some might be sass already
mzedlach
@mzedlach
Nov 01 2017 20:28
Ahhh, nice
imperial-isms
@imperial-isms
Nov 01 2017 20:28
This doesn’t work when I load SASS as a preprocesser, but it does when I load SCSS
@mixin border-radius($radius){
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;      
}
A-J Roos
@Asjas
Nov 01 2017 20:29
Yes. SASS is space-indentation orientated. Like python programming. It's the old syntax. SCSS is the newer syntax
imperial-isms
@imperial-isms
Nov 01 2017 20:29
Oh, yeah, tried that too but it didn’t work. It was originally indented
Invalid CSS after "($radius)": expected expression (e.g. 1px, bold), was “{“
A-J Roos
@Asjas
Nov 01 2017 20:30
SCSS is what should be used mostly. To make that code SASS it would look like this
@mixin border-radius($radius)
    -webkit-border-radius: $radius
    -moz-border-radius: $radius
    -ms-border-radius: $radius
    border-radius: $radius
imperial-isms
@imperial-isms
Nov 01 2017 20:30
@mixin border-radius($radius){
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;      
}
A-J Roos
@Asjas
Nov 01 2017 20:30
Yeah SASS also doesn't use ; or {
imperial-isms
@imperial-isms
Nov 01 2017 20:31
I copied and pasted your code and it still didn’t work


@mixin border-radius($radius)
    -webkit-border-radius: $radius
    -moz-border-radius: $radius
    -ms-border-radius: $radius
    border-radius: $radius



#awesome 
  width: 150px
  height: 150px
  background-color: green
  @include border-radius(15px)
A-J Roos
@Asjas
Nov 01 2017 20:32
I'm not too up to date on SASS. I use the newer SCSS. I'm checking up on their website on the syntax for the older SASS format
imperial-isms
@imperial-isms
Nov 01 2017 20:32
Okay it works like this


@mixin border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius: $radius
  -ms-border-radius: $radius
  border-radius: $radius



#awesome 
  width: 150px
  height: 150px
  background-color: green
  @include border-radius(15px)
A-J Roos
@Asjas
Nov 01 2017 20:32
Ah. Two not four spaces
imperial-isms
@imperial-isms
Nov 01 2017 20:32
What should I learn?
SCSS or SASS?
This is showing curly braces http://sass-lang.com/guide
Nevermind…I didn’t switch between SCSS and Sass

SCSS to the rescue!
In version 3 of Sass, the SCSS (Sassy CSS) syntax was introduced as "the new main syntax" for Sass and builds on the existing syntax of CSS. It uses brackets and semi-colons just like CSS. It doesn't care about indentation levels or white-space. In fact, Sass's SCSS syntax is a superset of CSS – which means SCSS contains all the features of CSS, but has been expanded to include the features of Sass as well. In layman's terms, any valid CSS is valid SCSS. And in the end, SCSS has the exact same features as the Sass syntax, minus the opinionated syntax.

Those who are new to Sass have less to learn. And as for Sass detractors, well, they can no longer complain about the syntax. As far as I'm concerned, SCSS is the new CSS.

A-J Roos
@Asjas
Nov 01 2017 20:34
It's basically syntax. And a preference. SASS looks like python and SCSS looks like any other programming language. It needs brackets and semi-colons
imperial-isms
@imperial-isms
Nov 01 2017 20:35
I’ll go with SCSS for simplicities sake
A-J Roos
@Asjas
Nov 01 2017 20:36
SASS is the older syntax. I wouldn't recommend it. Someone with heavy python experience and who hates brackets and semi-colons would love the older format
Jimmy Van Veen
@JimmayVV
Nov 01 2017 20:36
@imperial-isms :thumbsup:
A-J Roos
@Asjas
Nov 01 2017 20:36
SCSS is really nice.
imperial-isms
@imperial-isms
Nov 01 2017 20:36
I love brackets and semi-colons!
Jimmy Van Veen
@JimmayVV
Nov 01 2017 20:36
I agree, SCSS all the way
imperial-isms
@imperial-isms
Nov 01 2017 20:37
It’s so much more readable
…to me…because I’ve only ever learned with them
A-J Roos
@Asjas
Nov 01 2017 20:38
Yeah. I've done a bit of python scripting or raspberry pi's. It's really different to what I've learned.
I'll stick with brackets and semi-colons
Jimmy Van Veen
@JimmayVV
Nov 01 2017 20:38
I can understand some people preferring SASS if they use a programming language similar to it (perhaps Ruby, or others I'm not familiar with) - but considering what it's replacing, SCSS should share as many features of CSS as possible (and it does) - semicolons and brackets are not a bad thing, and since no one can rightly say "I don't need to know how to write Vanilla CSS anymore" then similarities between the two are essential
... IMHO
A-J Roos
@Asjas
Nov 01 2017 20:39
Yeah xd
And it's actually quite easy to switch. Just copy css to scss and it compiles. You can then add variables, nesting, @extend. Just don't fall into nesting hell
imperial-isms
@imperial-isms
Nov 01 2017 20:40
I’m already excited about SCSS because of nesting
haha
Jimmy Van Veen
@JimmayVV
Nov 01 2017 20:41
I keep coming across things that make me excited for SCSS and I'm like this is the single best reason to use SCSS and then I find another thing to fall in love with and change it up lol
imperial-isms
@imperial-isms
Nov 01 2017 20:42
Man, I’m really excited about it
I’m just going through http://sass-lang.com/guide
…and everytime I hit a new section, I’m like, “wow…finally!"
A-J Roos
@Asjas
Nov 01 2017 20:43
Hahahaha. Yeah. It has a lot of features.
imperial-isms
@imperial-isms
Nov 01 2017 20:47
Wth? I already finished that guide http://sass-lang.com/guide
A-J Roos
@Asjas
Nov 01 2017 20:47
Yeah it's short. :). It basically learns you the syntax and basics and throws you out.
But since it's built on css not a lot changes. It just adds quite a few features.
Chris
@bestintown23
Nov 01 2017 20:49
Why are my menu options not showing when i click the menu button. (Must minimize screen between 768 to 1023 px to see what i am talking about.) i want my menu options to come up when i hit the button but its not working for me. https://codepen.io/bestintown23/pen/yPYbyo
imperial-isms
@imperial-isms
Nov 01 2017 20:49
Is that bad that I already added it to my resume? hahah
A-J Roos
@Asjas
Nov 01 2017 20:49
HAHAHAHA.
imperial-isms
@imperial-isms
Nov 01 2017 20:49
I mean, I get it, and it was basically everything I was wishing I had access to when I was building my portfolio
…just not knowing those features existed
Now I can tidy up my work!
A-J Roos
@Asjas
Nov 01 2017 20:50
What I did after reading it was to go to one of my codepen projects. Copy the css and change to settings to SCSS pre-processing. And then to add variables and nest my selectors. And to see what breaks and works.
imperial-isms
@imperial-isms
Nov 01 2017 20:50
Yeah that’s exactly what I’m gonna do
Have a look at my port if anyone is interested: https://imperial-isms.github.io/portfolio/
Jimmy Van Veen
@JimmayVV
Nov 01 2017 20:51
@Asjas next we can work on integrating with Webpack, or some other framework that will compile all the things for us. I'm looking into that now
A-J Roos
@Asjas
Nov 01 2017 20:52

@jimmayVV Yeah i'm currently using a massive gulp.js file

const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const cssbeautify = require('gulp-cssbeautify');
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const sass = require('gulp-sass');

Those are my plugins that i'm currently using.

Webpack does that same. But it builds the entire project and the html.
I've been meaning to move to webpack. SO much to learn still XD
Mohamed ATATOUSSE
@atatos
Nov 01 2017 22:26
Hello guys
alexg1990
@alexg1990
Nov 01 2017 22:29
does someone has any idea why this is not mounting in react?
configureStore.js:

export default function configureStore (initialState) {
  const store = createStore(
  rootReducer,
  initialState
  );
  return store;
}

index.js (imports omitted):

const initialState ={
  quote: 'quote1',
  author: 'author1'
};

let store = configureStore(initialState);

ReactDOM.render(
  <Provider store={store}>
    <AppContainer />
  </Provider>,
  document.getElementById('root')
);

App.js:

export class Wrapper extends React.Component {
  render () {
    return (
      <h1>{this.props.author}</h1>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    quote: state.quote,
    author: state.author
  };
};

function mapDispatchToProps (dispatch) {
  return {
    changeQuote: bindActionCreators(dispatch, actions)
  };
}

export const AppContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(Wrapper);
Lee
@LeeConnelly12
Nov 01 2017 22:33
@alexg1990 Is it because you're using colons instead of semi colons at the end of app.js and at the end of configureStore.js?
@alexg1990 Oh nvm lol im an idiot, didnt realise it wasnt part of the code
Moisés Man
@moigithub
Nov 01 2017 22:36
http://redux.js.org/docs/api/bindActionCreators.html @alexg1990
also check devtools console.. for errors
alexg1990
@alexg1990
Nov 01 2017 22:39
@moigithub there are no compiling errors which is why I am stuck
Moisés Man
@moigithub
Nov 01 2017 22:49
did u fixed bindActionCreators ? @alexg1990
Tenzin Topjor
@aovsne
Nov 01 2017 22:55
trying to receive data from a server using ajax, it is showing No 'Access-Control-Allow-Origin' in console, can anyone help me

var ourRequest = new XMLHttpRequest()
ourRequest.open('GET','http://d345h07ts0fu2m.cloudfront.net/379/data48.json')
ourRequest.onload = function(){
console.log(ourRequest.responseText)
}

ourRequest.send()

this is my code..
Johnny
@jtan3
Nov 01 2017 22:57
@aovsne are you using codepen?
@aovsne i think you need to use https for you links
Moisés Man
@moigithub
Nov 01 2017 22:59
to bypass cors u need to use jsonP request
or use a proxy as temp fix
Tenzin Topjor
@aovsne
Nov 01 2017 23:28
yes i tried putting https
still not working and i looked it up on google.. and I think it has to deal with CORS which i am totally new about..
can someone help me with the code where i can receive data from that api into my console
and @jtan3 I dont use codepen that much
Morchid Chellali
@Morched23MJ
Nov 01 2017 23:31
What's this api? Can you provide the API docs?
Tenzin Topjor
@aovsne
Nov 01 2017 23:33
http://d345h07ts0fu2m.cloudfront.net/379/data48.json, I am trying to receive data from this json server on to my console by using ajax calling
@Morched23MJ