These are chat archives for FreeCodeCamp/HelpFrontEnd

21st
Jan 2018
Russ Wilkie
@RussWilkie
Jan 21 2018 00:02
@sansae I guess my little nitpick with it is to be more clear with functions and formatting. Like the any coder looking at your code shouldn't need a comment showing when a function ends.
Which you already seem to accomplish already
Heathercoraje
@Heathercoraje
Jan 21 2018 00:09
Hi everyone :) I am working on weather app and I have been trying to integrate images on Unsplash for changing background images. Have anyone used unsplash-js before? I think I am doing it in a completely wrong way and I am wondering if anyone could give me a hand!
Aryan J
@AryanJ-NYC
Jan 21 2018 00:15
Sure @Heathercoraje. Can you give an example of code you tried?
Is this the right website? https://unsplash.com/
Heathercoraje
@Heathercoraje
Jan 21 2018 00:23
this is the repo
line 1 index.js already throws an error and I am not sure what I am doing wrong
@AryanJ-NYC hi:) thanks
CamperBot
@camperbot
Jan 21 2018 00:24
heathercoraje sends brownie points to @aryanj-nyc :sparkles: :thumbsup: :sparkles:
:cookie: 468 | @aryanj-nyc |http://www.freecodecamp.org/aryanj-nyc
Aryan J
@AryanJ-NYC
Jan 21 2018 00:25
Can you open a terminal to that directory? From there, type npm install
I have a feeling you didn't install unsplash-js
Heathercoraje
@Heathercoraje
Jan 21 2018 00:26
I have unsplash-js inside node_modules dir actually
But doesn't hurt to try again
Heathercoraje
@Heathercoraje
Jan 21 2018 00:32
I still get Uncaught SyntaxError: Unexpected identifier
Aryan J
@AryanJ-NYC
Jan 21 2018 00:33
Yeah, so it's just a bad import statement.
Let me clone your environment. HOld.
Heathercoraje
@Heathercoraje
Jan 21 2018 00:34
Ok thank you!
Kent Saeteurn
@sansae
Jan 21 2018 00:39

@RussWilkie > Like the any coder looking at your code shouldn't need a comment showing when a function ends.

thank you for the heads up and for taking the time!

definitely Russ. i've removed the comments. i put those "end 'function'" comments to help me keep track of where I'm at while I'm debugging. When my functions end up with many lines of code and I forget what function I was working on, I hate having to scroll up just to see. having that comment at the bottom keeps me on track. i've been coding on codepen for a while, and I haven't found a work-around to that. when i'm done with everything, i always forget to delete those comments :smile:

CamperBot
@camperbot
Jan 21 2018 00:39
sansae sends brownie points to @russwilkie :sparkles: :thumbsup: :sparkles:
:cookie: 311 | @russwilkie |http://www.freecodecamp.org/russwilkie
Aryan J
@AryanJ-NYC
Jan 21 2018 00:42
@Heathercoraje in your index.html, can you change your script type attribute to module instead of text/javascript?
Heathercoraje
@Heathercoraje
Jan 21 2018 00:42
I am also thinking
Heathercoraje
@Heathercoraje
Jan 21 2018 00:43
I need babel?
Aryan J
@AryanJ-NYC
Jan 21 2018 00:43
If you're using an old browser, yes.
But more browsers are supporting modules.
So let's give this a shot before getting into transpilation.
Kent Saeteurn
@sansae
Jan 21 2018 00:43

@mbosnjak01 thanks Matej

i've never gotten the hang of using callback functions in that way. i'm not sure how to apply your code example with mine, but thank you for the suggestion; i think if i figure it out, my code might be cleaner

CamperBot
@camperbot
Jan 21 2018 00:43
sansae sends brownie points to @mbosnjak01 :sparkles: :thumbsup: :sparkles:
:cookie: 221 | @mbosnjak01 |http://www.freecodecamp.org/mbosnjak01
Heathercoraje
@Heathercoraje
Jan 21 2018 00:43
Will do.
<script type="modue" src="index.js" type="text/javascript"></script>
The error message disappeared.
at least!
Heathercoraje
@Heathercoraje
Jan 21 2018 00:50
oh no a typo.
now I get this error
Access to Script at 'file:///home/heather/Desktop/project/weather-matters/index.js' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.
Aryan J
@AryanJ-NYC
Jan 21 2018 00:57
You should delete the type="text/javascript". The type is module now.
As for the CORS, that's weird.
Since you're trying to reach your local machine's file.
Heathercoraje
@Heathercoraje
Jan 21 2018 01:04
I se..
Heathercoraje
@Heathercoraje
Jan 21 2018 01:13
I was thinking it was rather a matter of missing webpack/babel
Aryan J
@AryanJ-NYC
Jan 21 2018 01:27
I thought the same but I was hoping there was a way to NOT have to do all that. What a pain.
You can probably skip using the JS package though. I imagine you can just make a fetch call.
HappyMeerkat
@HappyMeerkat
Jan 21 2018 02:32
hey i'm trying to understand the profile lookup excercise and watching a video on youtube they've started with:
```
for (var  = 0; i =contact.length; i++)
am i right in thinking that the i++ just means to go through each contact?
Stephen James
@sjames1958gm
Jan 21 2018 02:39
@HappyMeerkat yes, that is the result. It means at the end of each loop iteration add one to i which goes to the next contact..
aRtoo
@artoodeeto
Jan 21 2018 03:02
hey fam. how do create like a glow when i press a button?
aRtoo
@artoodeeto
Jan 21 2018 03:50
anyone here?
hello need help about this. why is it my keyframes not working? heres the pen
Alexander Jarman
@HeinousTugboat
Jan 21 2018 03:55
@artoodeeto Just add a duration and it should work.
aRtoo
@artoodeeto
Jan 21 2018 03:55
@HeinousTugboat yea. but why cant i do this sir? animation-name: test 2s;
Alexander Jarman
@HeinousTugboat
Jan 21 2018 03:56
Because it requires both a name and a duration.
So you either have to do animation: test 2s; or
animation-name: test;
animation-duration: 2s;
aRtoo
@artoodeeto
Jan 21 2018 03:59
@HeinousTugboat thank you sir
CamperBot
@camperbot
Jan 21 2018 03:59
artoodeeto sends brownie points to @heinoustugboat :sparkles: :thumbsup: :sparkles:
:cookie: 326 | @heinoustugboat |http://www.freecodecamp.org/heinoustugboat
Alexander Jarman
@HeinousTugboat
Jan 21 2018 03:59
Welcome!
Adam Faraj
@adamfaraj
Jan 21 2018 04:13
does anyone know Java here?
Brad
@bradtaniguchi
Jan 21 2018 04:22
@adamfaraj I've used Java a lot for school
Adam Faraj
@adamfaraj
Jan 21 2018 04:22
public class HelloWorld
{
  // arguments are passed using the text field below this editor
  public static void main(String[] args)
  {
    OtherClass myObject = new OtherClass("Hello World!");
    thisMyClassNow poop = new thisMyClassNow();
    System.out.println(myObject);
    System.out.println(poop);
  }
}



// you can add other public classes to this editor in any order
public class OtherClass
{
  private String message;
  private boolean answer = false;
  public OtherClass(String input)
  {
    message = "Why, " + input + " Isn't this something?";
  }
  public String toString()
  {
    return message;
  }
}




// well I added public classes to this thang
public class thisMyClassNow {

  private String me;
  public void thisMyClassNow() {
      me = "I am well versed in Bird Law";
  }

  public String toString() {
      return me;
  }
}
Brad
@bradtaniguchi
Jan 21 2018 04:23
its interesting you ask about java in the helpFrontEnd room tho
Adam Faraj
@adamfaraj
Jan 21 2018 04:23
@bradtaniguchi system will not print out "I am well versed in Bird Law"
@bradtaniguchi i dont know where else to ask. haha
Brad
@bradtaniguchi
Jan 21 2018 04:23
@adamfaraj I'd ask this in the general freeCodeCamp room
but since this room isn't busy I'll try to help ya here
Adam Faraj
@adamfaraj
Jan 21 2018 04:24
i'll ask there as well. thanks @bradtaniguchi
CamperBot
@camperbot
Jan 21 2018 04:24
adamfaraj sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
:cookie: 347 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
HappyMeerkat
@HappyMeerkat
Jan 21 2018 04:25
can anyone tell me what is wrong with this code for the first Javascript challenge?
function reverseString(str) {

  var stringSplit =str.split("");

  var reverseString = stringSplit.reverse();

  var joinString = reverseString.join();

  return joinString;
}

reverseString("Howdy");
its just to reverse a string
as far as i can tell this reverses the strings?
Brad
@bradtaniguchi
Jan 21 2018 04:26
@adamfaraj Only the second class, the this is myClassNow isn't printing right? I'm lazy and don't want to compile the code yet
Adam Faraj
@adamfaraj
Jan 21 2018 04:27
yes
Aditya
@ezioda004
Jan 21 2018 04:27
@HappyMeerkat In .join() method you need to specify where you are joining it so reverseString.join(""); should work.
Like you did in split()method
Adam Faraj
@adamfaraj
Jan 21 2018 04:27
@bradtaniguchi https://www.compilejava.net/ for quick compiling
Brad
@bradtaniguchi
Jan 21 2018 04:28
@ezioda004 Alright, so this line doesn't do what you expect:
me = "I am well versed in Bird Law";
@ezioda004 oops wrong person sorry
@adamfaraj ^
Aditya
@ezioda004
Jan 21 2018 04:28
@HappyMeerkat Also a small thing but .reverse() mutates the original array so you dont really have to store it in a new variable.
@adamfaraj No worries :D
Brad
@bradtaniguchi
Jan 21 2018 04:29
I think it should be this.me = "I am well versed in Bird Law"
Aditya
@ezioda004
Jan 21 2018 04:29
Damn it I did the same mistake
HappyMeerkat
@HappyMeerkat
Jan 21 2018 04:29
ahh awesome thanks @ezioda004 thats the easiest i've found a bonfire when trying it and coming back, obviously i needed help and i did google a little bit, but i kinda knew what i sorta had to do...
CamperBot
@camperbot
Jan 21 2018 04:29
happymeerkat sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 405 | @ezioda004 |http://www.freecodecamp.org/ezioda004
HappyMeerkat
@HappyMeerkat
Jan 21 2018 04:30
if that makes any sense, before i was COMPLETELY lost, i hope it continues somewhat
Aditya
@ezioda004
Jan 21 2018 04:30
@HappyMeerkat Its understandable. If you get confuse try to read on MDN what that method does, and see for examples. Most of the times its syntax error than logic.
BehindTheMath
@BehindTheMath
Jan 21 2018 04:31
Is there a way to get a previous history state using the History API, without navigating? Something like History.getState(-2).
Brad
@bradtaniguchi
Jan 21 2018 04:31
@adamfaraj Also the void on the function thisMyClassNow()is incorrect, you want it to be the constructor function, so It assigns the string to me, but if you add void its just a function that returns nothing that does that, and since you don't call the function, me isn't defined
@adamfaraj Heres the updated code all in one file, I removed the publics so I could compile the file directly
Adam Faraj
@adamfaraj
Jan 21 2018 04:35
@bradtaniguchi
/tmp/java_JMhT5A/undefined.java:11: error: cannot find symbol
    OtherClass myObject = new OtherClass("Hello World!");
    ^
  symbol:   class OtherClass
  location: class HelloWorld
/tmp/java_JMhT5A/undefined.java:11: error: cannot find symbol
    OtherClass myObject = new OtherClass("Hello World!");
                              ^
  symbol:   class OtherClass
  location: class HelloWorld
/tmp/java_JMhT5A/undefined.java:12: error: cannot find symbol
    thisMyClassNow poop = new thisMyClassNow();
    ^
  symbol:   class thisMyClassNow
  location: class HelloWorld
/tmp/java_JMhT5A/undefined.java:12: error: cannot find symbol
    thisMyClassNow poop = new thisMyClassNow();
                              ^
  symbol:   class thisMyClassNow
  location: class HelloWorld
4 errors
Brad
@bradtaniguchi
Jan 21 2018 04:37
@adamfaraj Add the public tags again, I removed them in my gist so I could compile directly in the CLI, idk how your compiling your code. (personally I could split each class into their own file and have public on all of them)
Adam Faraj
@adamfaraj
Jan 21 2018 04:41
@bradtaniguchi it worked
HappyMeerkat
@HappyMeerkat
Jan 21 2018 04:51
i'm trying out how to figure out how best to word this when googling and my minds blank, whats the best term or phrase to use when i mean i want to find out how to get all the numbers that preceed a number so for example on the excercise its 5, and i need to find out how to get 1,2,3,4,5 from just an input of 5
Adam Faraj
@adamfaraj
Jan 21 2018 04:55

@HappyMeerkat so like:

function(5) {
    //code
}

will return 1,2,3,4,5?

HappyMeerkat
@HappyMeerkat
Jan 21 2018 04:56
yeah
Aditya
@ezioda004
Jan 21 2018 04:56
@HappyMeerkat This looks like loop to me, so maybe you should google js loop to get all numbers till n
HappyMeerkat
@HappyMeerkat
Jan 21 2018 04:56
yeah i think it is a loop i feel like i've done it on FCC but i've clicked on the map on what i think it could be but i've lost it
i'll go back through the loops
Adam Faraj
@adamfaraj
Jan 21 2018 04:58
check out for loops
probably the easiest way
Aditya
@ezioda004
Jan 21 2018 04:59
@HappyMeerkat ^ I think you're looking for this challenge.
HappyMeerkat
@HappyMeerkat
Jan 21 2018 05:00

i've found this on FCC on iterating for loops

var i =0;
while (i < 5) {
  myArray.push(i);
  i++;

so i get 0,1,2,3,4 so now i just need to add the last number

and then learn to factorialise
so multiply them
yeah it was that one @ezioda004
thanks!
Aditya
@ezioda004
Jan 21 2018 05:01
:thumbsup:
HappyMeerkat
@HappyMeerkat
Jan 21 2018 05:06
i'm really trying to watch what i google as OK it was only 3 challenges but before i found just googling the names of the challenges brought up the results and then when i did them i always had that in my head so i'm trying to limit my exposure to what i think will tell me too much.
Alexander Jarman
@HeinousTugboat
Jan 21 2018 05:10
let n = 5;
Array(n).fill().map((_,i,a)=>a[i]=i+1);
I'm not honestly sure why that doesn't work without the fill() in there. :-|
Oh. Because the Array constructor makes an Array with empty slots, not slots with undefined in them.
:stars: The more you know.
Naris R
@KittenHero
Jan 21 2018 05:39
js quirks
Vikas Rathee
@vikas-rathee
Jan 21 2018 06:10
When the window size is small my footer covers the content... how should i correct that... and how should i code the Twitter button https://codepen.io/vikas_rathee/pen/VygbRo
Lallo Vigil
@lalov1
Jan 21 2018 06:24
@vikas-rathee I would remove the absolute positioning
Vikas Rathee
@vikas-rathee
Jan 21 2018 06:29
@lalov1 Actually i want my footer to stay at the bottom of the webpage.... and if the content is more than a scroll bar should be added.... so how should I do that
dinesh
@1532j0004kg
Jan 21 2018 07:03
hi, guys . Can u please tell what is the real purpose of dataType and contentType in ajax request.Thank you!!!
and when to use ?
y it is needed ? Expecting best explanation . :+1:
Naris R
@KittenHero
Jan 21 2018 07:08
contentType tells the server what to expect in the request and how to handle it, dataType tells ajax what to expect from the server and how to handle the data
dinesh
@1532j0004kg
Jan 21 2018 07:43
thanks !
@KittenHero thanks
CamperBot
@camperbot
Jan 21 2018 07:43
1532j0004kg sends brownie points to @kittenhero :sparkles: :thumbsup: :sparkles:
:cookie: 133 | @kittenhero |http://www.freecodecamp.org/kittenhero
Matej Bošnjak
@mbosnjak01
Jan 21 2018 07:45
@sansae yes, since you-re using jquery I am not sure how to approach that either, but as I said I hope I gave you some idea of how to make your code cleaner.
Hemakshi Sachdev
@hemakshis
Jan 21 2018 07:47
@moT01 Hey! Thanks for all the points you mentioned yesterday. I've made changes to my pen now. Please have a look. :)
https://codepen.io/hemakshis/pen/jYdPLy?editors=0100
CamperBot
@camperbot
Jan 21 2018 07:47
hemakshis sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 963 | @mot01 |http://www.freecodecamp.org/mot01
Matej Bošnjak
@mbosnjak01
Jan 21 2018 07:49
@hemakshis This works really nice
Hemakshi Sachdev
@hemakshis
Jan 21 2018 07:49
Thank you @mbosnjak01 :)
CamperBot
@camperbot
Jan 21 2018 07:49
hemakshis sends brownie points to @mbosnjak01 :sparkles: :thumbsup: :sparkles:
:cookie: 222 | @mbosnjak01 |http://www.freecodecamp.org/mbosnjak01
Matej Bošnjak
@mbosnjak01
Jan 21 2018 08:27
Would somebody know if there's a way to get padding value of an element in percentage?
using jquery
Matej Bošnjak
@mbosnjak01
Jan 21 2018 08:30
@1532j0004kg Yes, but I need percentage, not pixels :D
i just need to figure out formula it seems :(
dinesh
@1532j0004kg
Jan 21 2018 08:31
just use css()
like $img.css('padding-top' ,10% );
@mbosnjak01
Matej Bošnjak
@mbosnjak01
Jan 21 2018 08:33
but i don't need to set the value
dinesh
@1532j0004kg
Jan 21 2018 08:33
then?
Matej Bošnjak
@mbosnjak01
Jan 21 2018 08:34
I have my value set inside css file, in percentage
I just need formula to calculate it
but I think i'll manage it using .parent() and .css()
dinesh
@1532j0004kg
Jan 21 2018 08:34
try :+1:
Matej Bošnjak
@mbosnjak01
Jan 21 2018 08:35
I'm working on element alignment with jquery, but I need this formula to add padding so my element doesn't go out of the padding value or outside of the parent element :)
Razvan Jackson
@RazvanJackson
Jan 21 2018 08:44
Hey guys!
Why body tag height property on mobile is not 100%?
and i used
html, body{
    height: 100%;
}
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Jan 21 2018 08:54

@RazvanJackson I normally use something like this:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

If this doesn't work, can you give us an example (easier to work with)

jimmy · YIN
@jimmyYSY
Jan 21 2018 08:56
height style is doesn't work
because bowerse is no have height
Razvan Jackson
@RazvanJackson
Jan 21 2018 08:56
@Otto-AA well
on desktop the height os 100%, but on mobile is halg
half
well the real problem is height is 100%
but not the total with scroll
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Jan 21 2018 09:00
@RazvanJackson Do you have a link to the website you are referring to? (Or do you mean it is the same for all websites?)
Razvan Jackson
@RazvanJackson
Jan 21 2018 09:00
wait i'll push it to github
Matej Bošnjak
@mbosnjak01
Jan 21 2018 09:04
So. To get parents element padding in percentage I guess this will do
https://imgur.com/FHuXmJy
Razvan Jackson
@RazvanJackson
Jan 21 2018 09:04
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Jan 21 2018 09:11
image.png
@RazvanJackson I've tried it with my mobile and the firefox developer tools and the height seems fine to me...?
Razvan Jackson
@RazvanJackson
Jan 21 2018 09:11
scroll down
is background-image full?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Jan 21 2018 09:14
image.png
Is this how it should look like?
Razvan Jackson
@RazvanJackson
Jan 21 2018 09:15
wait
to see smth
@Otto-AA yes
@Otto-AA i mean no :))
the background image must be on all page
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Jan 21 2018 09:16
ok, I think I get what you mean. Let me see...
Razvan Jackson
@RazvanJackson
Jan 21 2018 09:16
not 100% of the screen size
Razvan Jackson
@RazvanJackson
Jan 21 2018 09:22
like 100% of html
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Jan 21 2018 09:26
image.png
Is this the desired goal?
The code I used for this is: (not using the pseudo element, but #background itself)
#background {
    background-image: url('/theme-background.jpg');
    background-repeat: repeat;
    background-position: center;
    width: 100%;
    min-height: 100%;
    opacity: .85;
    background-size: cover;
}
@RazvanJackson
Razvan Jackson
@RazvanJackson
Jan 21 2018 09:45
kinda
wait
@Otto-AA yeah but, idk that's weird
Dimitris Nik.
@dimitrissnk
Jan 21 2018 09:50
Guys I ah having a problem. Can someone help me position the last paragraph which contains my name, undeneath the background image, in the white space? https://codepen.io/dimitris51/full/zpeKBq/
Whatever I try, the background image get disturbed
Vikas Rathee
@vikas-rathee
Jan 21 2018 10:59
$(document).ready(function(){
    $.ajax({
        type: "GET",
        url: "Random.json",
        dataType: "json",
        success: function(response){
            $("#next-button").click(function(){
                var ranNumber = Math.floor((Math.random()*response.quoteJSON.length)+1);
                $("#quote").text(response.quoteJSON[ranNumber]);
            });//end of click
        }//end of success

    });//end of ajax
});// end of document.ready
is there any error in the code !! quoteJSON is the name of array in my .json file
Lee
@LeeConnelly12
Jan 21 2018 11:07
@Dimitrios51 create a div with the class "a-real-actor" and put everything except your name paragraph inside it, then add margin top: 0 to your h1 tag
Sweet Coding :)
@SweetCodingInc
Jan 21 2018 12:03
@vikas-rathee is there any error on console?
Vikas Rathee
@vikas-rathee
Jan 21 2018 12:05
No
Its Showing nothing
Sweet Coding :)
@SweetCodingInc
Jan 21 2018 12:08
Do you see the call being made to Random.json in your network tab in dev tools?
Vikas Rathee
@vikas-rathee
Jan 21 2018 12:12
No
This is my .json file btw
Sorin Ruse
@sorinr
Jan 21 2018 13:25
@vikas-rathee are you running the above code locally on your machine or you have it uploaded to a codepen?
@vikas-rathee if you r running your code locally be sure you have the right path in here: url: "Random.json",
Idris
@IdrisDiba
Jan 21 2018 14:57
Hi everyone
Tom
@moT01
Jan 21 2018 15:12
:wave:
Ken Haduch
@khaduch
Jan 21 2018 16:37
Hello @idris
Tom
@moT01
Jan 21 2018 16:37
@hemakshis looks great - there's always things you could continue to tweak - but i would definitely be satisfied with that, the only last thing i would say, is that the background image gets stretched and squeezed when you change the window size - looks goofy
Puyan Wei
@puyanwei
Jan 21 2018 17:02

Hi, I'm trying to output the value of a button when it is clicked but my attempt here doesn't seem to work? That is clicking button with the value 1 will output to console "1".

index.html

  <div class="score-inputs">
    <form class="buttons">
      <input class="button" type="button" value="1"></input>
      <input class="button" type="button" value="2"></input>
    </form>
  </div>

interface.js

$(document).ready(() => {

  $(".button").click(() => {
    console.log($(this).val());
  });
});
Tom
@moT01
Jan 21 2018 17:09
is jquery added/linked properly?
Sorin Ruse
@sorinr
Jan 21 2018 17:10
@puyanwei and what do u get?
Tom
@moT01
Jan 21 2018 17:10
can you console log anything on a click?
Puyan Wei
@puyanwei
Jan 21 2018 17:11
It is linked properly. I have an error message
"Uncaught TypeError: Cannot read property 'toLowerCase' of undefined at r.fn.init.val (jquery.min.js:4) at HTMLInputElement.$.click (interface.js:8) at HTMLInputElement.dispatch (jquery.min.js:3) at HTMLInputElement.q.handle (jquery.min.js:3)"
Sorin Ruse
@sorinr
Jan 21 2018 17:17
@puyanwei it seems its your es syntax. if you try $(".button").click(function(e){.... it should work
Stephen James
@sjames1958gm
Jan 21 2018 17:30
@puyanwei Using this inside of a arrow function is not going to get the clicked component.
Tom
@moT01
Jan 21 2018 17:32
@sjames1958gm really, why not
just how it works
Jan Shah
@JanShah
Jan 21 2018 17:45
@puyanwei do you need to use jquery?
Ken Haduch
@khaduch
Jan 21 2018 17:45
this is Not set in arrow functions (if that was the question)
Stephen James
@sjames1958gm
Jan 21 2018 17:50
@moT01 that is how arrow functions work. this will be used from the scope outside the arrow function rather than from the call to the arrow function
Tom
@moT01
Jan 21 2018 18:27
now i know - so an arrow function isnt a direct translation of function() {}
Sorin Ruse
@sorinr
Jan 21 2018 18:39
@moT01 take a look at this pen and look into console to see the difference this is returning
Scott Jeffrey
@ScottCJeffrey
Jan 21 2018 19:09
Hey guys, does anyone know any good sources to learn how to optimize a website for mobile use? Thank you
Sorin Ruse
@sorinr
Jan 21 2018 19:15
@ScottCJeffrey what kind of optimization are u looking for? memory, traffic data, "disk" space?
Scott Jeffrey
@ScottCJeffrey
Jan 21 2018 19:19
@sorinr I am trying to make my website mobile friendly. Fixing the resolutions and keeping it centered without going off screen. Sorry I am pretty new to this.
Sorin Ruse
@sorinr
Jan 21 2018 19:20
@ScottCJeffrey oh. u are talking about responsiveness
Scott Jeffrey
@ScottCJeffrey
Jan 21 2018 19:22
@sorinr Maybe, everything is perfect when it is opened on a desktop. I am trying to make it run and look good on a mobile device. Thanks for the help
CamperBot
@camperbot
Jan 21 2018 19:22
scottcjeffrey sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1394 | @sorinr |http://www.freecodecamp.org/sorinr
Sorin Ruse
@sorinr
Jan 21 2018 19:30
@ScottCJeffrey here my recommendation: don't look any further on any css framework like bs, foundation, bulma etc try learning how css works and then take a look into an utility framework like tailwindcss, tachyons, basscss, etc.
Scott Jeffrey
@ScottCJeffrey
Jan 21 2018 19:31
@sorinr Thank you very much!
CamperBot
@camperbot
Jan 21 2018 19:31
scottcjeffrey sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
api offline
Sorin Ruse
@sorinr
Jan 21 2018 19:33
@ScottCJeffrey np. just take ur time to learn css
Dr-D-M
@Dr-D-M
Jan 21 2018 20:42
did anybody else had trouble using the wikipedia API?
Onome Sotu
@onomesotu
Jan 21 2018 21:03
Hey guys, I am working on the roman numeral converter
My code passed, but I am wondering ways by which it can be improved
It looks too verbose and mediocre to me :worried:
function convertToRoman(num) {
 var unit = ['', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX'],
     tens = ['', 'X', 'XX', 'XXX', 'XL', 'L', 'LX', 'LXX', 'LXXX', 'XC'],
     hundreds = ['', 'C', 'CC', 'CCC', 'CD', 'D', 'DC', 'DCC', 'DCCC', 'CM'], 
     thousands = ['', 'M', 'MM', 'MMM', 'MMMM'];

 var numAsString = num.toString(), 
     numLength = numAsString.length,
     romanNumeral = [];

 if(numLength === 4){
   romanNumeral.push(thousands[numAsString[0]], hundreds[numAsString[1]], tens[numAsString[2]], unit[numAsString[3]]);
 }

 if(numLength === 3){
   romanNumeral.push(hundreds[numAsString[0]], tens[numAsString[1]], unit[numAsString[2]]);
 }

 if(numLength === 2){
   romanNumeral.push(tens[numAsString[0]], unit[numAsString[1]]);
 }

 if(numLength === 1){
   romanNumeral.push(unit[numAsString[0]]);
 }

 return romanNumeral.join('');
}
Any suggestions about other possible ways to solve this?
@Dr-D-M WHat trouble did you encounter?
Dennis Onder
@ShadowpathHD
Jan 21 2018 21:05
can someone help me out? i am working on the portfolio page challenge and i cant get my navbar to go from "side to side" so to speak. its a horizontal top navbar
Onome Sotu
@onomesotu
Jan 21 2018 21:07
@ShadowpathHD code?
Dennis Onder
@ShadowpathHD
Jan 21 2018 21:08
here's the codepen link, its way easier than copying the code over lol
Dr-D-M
@Dr-D-M
Jan 21 2018 21:08
@onomesotu I couldn't run it
but, right now I'm struggling with a calculator lol
Onome Sotu
@onomesotu
Jan 21 2018 21:09
@ShadowpathHD what do you mean by side to side?
It adjust well enough for me on the browser
Dennis Onder
@ShadowpathHD
Jan 21 2018 21:09
if you can see the navbar, did you notice that it isnt like fixed properly to the top, like the background is visible in the left and right corners
damn im bad at words
Onome Sotu
@onomesotu
Jan 21 2018 21:10
@ShadowpathHD yes i did, i thought it was part of your design
:)
Dennis Onder
@ShadowpathHD
Jan 21 2018 21:10
nah lol
im trying to avoid it
Onome Sotu
@onomesotu
Jan 21 2018 21:10
oh ok i will check
Dennis Onder
@ShadowpathHD
Jan 21 2018 21:10
thanks man
Dr-D-M
@Dr-D-M
Jan 21 2018 21:11
@ShadowpathHD what if you put the width to 100%
or put the navbar outside the container
Dennis Onder
@ShadowpathHD
Jan 21 2018 21:11
yeah but since im using bootstrap it wouldnt be responsive
width doesnt do anything btw
doesnt bootstrap have a class for navbars?
Dr-D-M
@Dr-D-M
Jan 21 2018 21:12
yes
Onome Sotu
@onomesotu
Jan 21 2018 21:13
set a width of 100% to your navbar as you didn't give it any. I think it is taking up the same width as the container-fluid
@Dr-D-M Did you try using the sandbox in wikipedia?
Dennis Onder
@ShadowpathHD
Jan 21 2018 21:14
fixed it, took it out of the container-fluid div, thanks guys
Dr-D-M
@Dr-D-M
Jan 21 2018 21:14
yeah, I tried
@ShadowpathHD nice!!
Dennis Onder
@ShadowpathHD
Jan 21 2018 21:16
do you guys have any suggestions? im kinda "not artistic" nor of the eye for detail, so i dont know what should i put into the portfolio to make it look nice
Onome Sotu
@onomesotu
Jan 21 2018 21:16
@Dr-D-M FYI there are different possible apis to use.
either the query or the open search @Dr-D-M
Dr-D-M
@Dr-D-M
Jan 21 2018 21:17
@ShadowpathHD change the background color, may be to a light gray or something
@onomesotu did that but didnot work
Onome Sotu
@onomesotu
Jan 21 2018 21:17
@ShadowpathHD it's normal, you'll learnas you build
Dr-D-M
@Dr-D-M
Jan 21 2018 21:17
but as I said currently I'm doing this
// keyboard functionality
document.addEventListener('keypress', function(e){
  e.preventDefault();  
  const displayResult = document.getElementById('display');

  displayResult.innerHTML += e.key;

var num1 = e.key;
var num2 = e.key;
var op;

//const num = displayResult.innerHTML;
function add(num1, num2){

  return num1 + num2;

}  

function substract(num1, num2){

  return  num1 - num2;
}
function divide(num1, num2){
  if(num2 === 0){return "Nope"}
  return num1 / num2;
}

function multiply(num1, num2){

  return num1 * num2;
}


function operation(op, num1, num2){


  switch (op){
    case "+":
       return add(num1, num2);
       break;

     case "-":
        return substract(num1, num2);
        break;

     case "/":
    return divide(num1, num2);
    break;


     case "*":
    return multiply(num1, num2);
    break;

    case "=":
      operation(op, num1, num2);


  }
}


if(e.key === 'Backspace'){
  displayResult.innerHTML = '';
}
if(e.key === '+'){
  num1 + num2;
  displayResult.innerHTML = add(num1, num2);
}
if(e.key === '-'){
  displayResult.innerHTML = substract();

}

if(e.key === '/'){
  displayResult.innerHTML = divide();
}

if(e.key === '*'){
  displayResult.innerHTML = multiply();
}


if(e.key === 'Enter'){
  operation(op, num1, num2);
  displayResult.innerHTML = operation(num1, num2);
} 





 });
Onome Sotu
@onomesotu
Jan 21 2018 21:18
go online and check for good color combinations and try to implement it to your project @ShadowpathHD
Dr-D-M
@Dr-D-M
Jan 21 2018 21:18
and I have a trouble, I cannot get any result to the operations addition and substraction an all
what am I doing wrong? would you tell me?
Onome Sotu
@onomesotu
Jan 21 2018 21:20
@Dr-D-M can i see the html structure?
Dr-D-M
@Dr-D-M
Jan 21 2018 21:20
of course
quickspeedy
@quickspeedy
Jan 21 2018 21:20

Hmm... after a month looking back at my project for Random Quote generator, I am getting an "undefined" for quote and author variables. I checked the data variable that retrieves API data and it is working properly. Below is the code responsible for undefined . Not sure why. Any helps would be appreciated!

    success: function(data) {
        console.log(data);
        getQuote = data.quote;
        getAuthor = data.author;
        console.log(getAuthor);
        generateQuote(getQuote, getAuthor);

Here is the link to CodePen: https://codepen.io/quickspeedy/pen/ZXLKXx

Dr-D-M
@Dr-D-M
Jan 21 2018 21:21
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Calculator | Odin Projec</title>
    <link rel="stylesheet" type="text/css" href="/home/david-boc/Documents/calculator_style.css">
    <script src="/home/david-boc/Documents/calculator_op.js"></script>

</head>
<body>

<div class="calculator_body">
    <div id="display"></div>
    <button  data-key="8" class="number" id ="delete">DELETE</button>
<!--first row-->
    <button data-key="103" class="number" id="button">7</button>
    <button data-key="104" class="number" id="button">8</button>
    <button data-key="105" class="number" id="button">9</button>
    <button data-key="106" class="number" id="button" style="background: #B8860B;">*</button>

    <!--second row-->
    <button data-key="100" class="number" id="button">4</button>
    <button data-key="101" class="number" id="button">5</button>
    <button data-key="102" class="number" id="button">6</button>
    <button data-key="111" class="number" id="button" style="background: #B8860B;">/</button>

    <!--third row-->
    <button data-key="97" class="number" id="button">1</button>
    <button data-key="98" class="number" id="button">2</button>
    <button data-key="99" class="number" id="button">3</button>
    <button data-key="107" class="number"  id="button" style="background: #B8860B;">+</button>

    <!--fourth row-->
    <button data-key="96" class="number" id="button">0</button>
    <button data-key="110" class="number" id="button">.</button>
    <button data-key="109" class="number" id="button" style="background: #B8860B;">-</button>
    <button data-key="13" class="number" id="button" style="background: #B8860B;">=</button>

</div>
</body>
</html>
the data keys are useless so far
so, ignorethem please
Onome Sotu
@onomesotu
Jan 21 2018 21:25
first of all
@Dr-D-M
you have to remove those return in your switch statement
Dr-D-M
@Dr-D-M
Jan 21 2018 21:26
alright
the data-keys? are the ones which are interrumpting all?
Onome Sotu
@onomesotu
Jan 21 2018 21:27
after you use return, the codes below are not read
the data keys are ok, but you have to make reference to them in your javascript
Dr-D-M
@Dr-D-M
Jan 21 2018 21:29
I think the data-key are not necessary as I made reference to the keys
do you think that if I add "onkeypress = "add..." will make work the functions?
Dr-D-M
@Dr-D-M
Jan 21 2018 21:34
@onomesotu now it returns undefined
Onome Sotu
@onomesotu
Jan 21 2018 21:35
@Dr-D-M what does this var num1 = e.key; return? can you check?
Dr-D-M
@Dr-D-M
Jan 21 2018 21:40
it returns the key pressed on the display
Dr-D-M
@Dr-D-M
Jan 21 2018 21:47
but, it wouldn't return the result of both vars, num1 num2
Onome Sotu
@onomesotu
Jan 21 2018 21:51
it shoul work
Dr-D-M
@Dr-D-M
Jan 21 2018 21:56
but it is not, man. I don't know what I'm doing wrong
Lee
@LeeConnelly12
Jan 21 2018 22:11
@Dr-D-M Looking at your code, you're assigning your op parameter in your operation the value of num1.
@Dr-D-M You're not actually getting what operator was entered
Dr-D-M
@Dr-D-M
Jan 21 2018 22:11
oh I see
how can I fix that?
I erase that var op
Lee
@LeeConnelly12
Jan 21 2018 22:13
To get the operator entered you could check the entered key, see if an operator was entered and what operator was entered using a switch
so
switch (e.key) {
 case '+': {op = '+'}
}
Dr-D-M
@Dr-D-M
Jan 21 2018 22:14
ah! alright alright alrgiht!!
let me try that
@LeeConnelly12 thanks++
CamperBot
@camperbot
Jan 21 2018 22:14
dr-d-m sends brownie points to @leeconnelly12 :sparkles: :thumbsup: :sparkles:
:cookie: 176 | @leeconnelly12 |http://www.freecodecamp.org/leeconnelly12
Dr-D-M
@Dr-D-M
Jan 21 2018 22:15
with out return statement?
Lee
@LeeConnelly12
Jan 21 2018 22:19
@Dr-D-M You could put the switch in a function and use the function to get the operator entered
function getOperator(e) {
    switch (e.key) {
       case '+': {
         return '+';
         break;
        }
   }
}
Dr-D-M
@Dr-D-M
Jan 21 2018 22:21

function operation(op, num1, num2){

  switch(e.key){
  case '+': {op = '+'}

  case '-': {op = '-'}

  case '/': {op = '/'}

  case '*': {op = '*'}

  case 'Enter': {op = 'Enter' || '='}
}

if(e.key === 'Enter'){
  return op;
} 



}
@LeeConnelly12 wouldn't that return just '+' instead of the result of the operation?
Lee
@LeeConnelly12
Jan 21 2018 22:22
@Dr-D-M You'll need a break statement for each case
@Dr-D-M Yes, but you want to get the operator
you can't work out the result without knowing the operaotr
Dr-D-M
@Dr-D-M
Jan 21 2018 22:23
@LeeConnelly12 that makes logic to me, I'll do it
Dr-D-M
@Dr-D-M
Jan 21 2018 22:31
did not work, man
Lee
@LeeConnelly12
Jan 21 2018 22:31
@Dr-D-M What are you doing when the enter key is pressed?
Dr-D-M
@Dr-D-M
Jan 21 2018 22:36
so far I'm getting nothing
but, what it is supposed to do is get the result of any operation
Puyan Wei
@puyanwei
Jan 21 2018 22:39
@sorinr @sjames1958gm thanks a bunch guys!
CamperBot
@camperbot
Jan 21 2018 22:39
puyanwei sends brownie points to @sorinr and @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 1395 | @sorinr |http://www.freecodecamp.org/sorinr
:star2: 8878 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Aditya
@ezioda004
Jan 21 2018 22:44
@Dr-D-M I'm not certain how much you've changed your code but the core problem with your code is that whenever you press any key num1 and num2 they key gets assigned to that. Example you pressed 1 so now both num1 = 1 and num2 =1. When you press an operator key, they both get assigned that replacing previous values.
Dr-D-M
@Dr-D-M
Jan 21 2018 22:49
@ezioda004 I would need to separate those, right?
numbers and operators
Aditya
@ezioda004
Jan 21 2018 22:52
Yes, but in a logical way meaning. The num1 variable should keep adding up number till a user keeps pressing number keys then when the user press an operator key, save it in another variable and again for num2 and when user hits = calculate the result.
Dr-D-M
@Dr-D-M
Jan 21 2018 22:56
@ezioda004 alrgiht man, that makes sense to me