These are chat archives for FreeCodeCamp/HelpFrontEnd

11th
Apr 2018
Peter Steele
@PeterHSteele
Apr 11 2018 00:03
i'm having a problem with refs in react. I have multiple instances of the 'square' component in my app - they all have a value of 'false' except for one which has the value 'true'. I'm trying to assign a ref (this.hero) to the one with the true value.
class Square extends React.Component {                                     
  constructor(){
    super();
    this.hero=null;
    this.setHero = square => {
      this.hero = square;
    }
  }

  componentDidMount(){
    if (this.props.value){
      console.log(this.hero)
      this.hero.focus();
    }
  }

  render(){
    let marker;
    if (this.props.value){
      marker='square hero'
       return <div className={marker} tabIndex={'-1'} ref={this.setHero} >{this.props.value}</div>

    }else{
      marker='square'
      return <div className={marker} tabIndex={'-1'} >{this.props.value}</div>
    }
  }
}
Stephen James
@sjames1958gm
Apr 11 2018 00:31
@PeterHSteele Is it getting the right class, but not the focus?
Peter Steele
@PeterHSteele
Apr 11 2018 00:32
@sjames1958gm yes
and the console.log in the component did mount doesnt output anything
Stephen James
@sjames1958gm
Apr 11 2018 00:32
@PeterHSteele Have you tried console.log(square) inside of the this.setHero function?
Peter Steele
@PeterHSteele
Apr 11 2018 00:36
ok yeah if I console.log within the setHero function it outputs the correct dom node
Stephen James
@sjames1958gm
Apr 11 2018 00:40
Hmm I copied the code and it seemed to work. Not sure why yours doesn't
https://codepen.io/silgarth/pen/pLYbre?editors=1111
Christopher May
@tecnocris
Apr 11 2018 00:51
Is freecodecamp.org down for anybody else?
Christopher McCormack
@cmccormack
Apr 11 2018 00:52
@ChristopherMay appears to be yeah
Christopher May
@tecnocris
Apr 11 2018 00:53
@cmccormack Thanks for checking.
CamperBot
@camperbot
Apr 11 2018 00:53
christophermay sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
api offline
Peter Steele
@PeterHSteele
Apr 11 2018 01:00
@sjames1958gm weird. ill keep looking at it i guess. thanks
CamperBot
@camperbot
Apr 11 2018 01:00
peterhsteele sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
api offline
Stephen James
@sjames1958gm
Apr 11 2018 01:01
@PeterHSteele :(
Jeff Lung YK
@jefflung
Apr 11 2018 02:47
i m glad this morning to find another new React animation plugin, React spring
https://medium.com/@drcmda/why-react-needed-yet-another-animation-library-introducing-react-spring-8212e424c5ce
xing
@MingXingTeam
Apr 11 2018 03:53
hello, i need help. https://codepen.io/mmx/pen/dmawYP?editors=1100 how can page scroll smoothly?
Claudio Restifo
@Marmiz
Apr 11 2018 03:57
@MingXingTeam with a little help from Javascript you can easily add a scroll animation :)
xing
@MingXingTeam
Apr 11 2018 03:58
can I do it only with CSS?
Ken Haduch
@khaduch
Apr 11 2018 04:10
@MingXingTeam - CSS tricks is a good site for all kinds of information: https://css-tricks.com/snippets/jquery/smooth-scrolling/ - there are a lot of questions / answers (if you google this) that basically say "you can't do it with pure CSS". So I think that javascript is pretty much required. this stackoverflow link does have some information about using CSS and the :target selector.
Priyanka
@pd21
Apr 11 2018 04:42
Has anyone worked with Dark sky API?
xing
@MingXingTeam
Apr 11 2018 04:59
@khaduch Thank you very much. That is what I need.
CamperBot
@camperbot
Apr 11 2018 04:59
mingxingteam sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3867 | @khaduch |http://www.freecodecamp.org/khaduch
Darren
@DarrenfJ
Apr 11 2018 05:13
@khaduch hey brutha! sorry i missed yah earleir...
hope all is well :D
Alexander R Bott
@Abott1222
Apr 11 2018 05:16
@DarrenfJ :wave:
how are things bruddda
Darren
@DarrenfJ
Apr 11 2018 05:17
@coderNewby sorry i missed yah earlier too... I think you might like this though: https://scrimba.com/g/gR8PTE CSS grid schtuff
@Abott1222 hey man how's it going? :D
kerafyrm02
@kerafyrm02
Apr 11 2018 05:18
anyone stuck and need help?
coderNewby
@coderNewby
Apr 11 2018 05:19
@DarrenfJ thanks will check it
CamperBot
@camperbot
Apr 11 2018 05:19
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2458 | @darrenfj |http://www.freecodecamp.org/darrenfj
n1zzy
@n1zzy
Apr 11 2018 07:15

@sjames1958gm @Masd925 how can I check if a string has blank spots?
is this right?

str.split(" ").length > 1

or

str.split(" ").prop && str.split(" ").prop.constructor === Array
Markus Kiili
@Masd925
Apr 11 2018 07:18
@n1zzy The condition str.indexOf(" ")>-1; will tell if the string str has spaces in it.
Your first one should be good too.
Arrays don't have the property key "prop" by default, so I don't understand your second code.
n1zzy
@n1zzy
Apr 11 2018 07:24
@Masd925 thanks I'm trying to do the spinal case exercise and I've noticed that my first condition was off... the one with prop is what I've found on google and stack overflow
CamperBot
@camperbot
Apr 11 2018 07:24
n1zzy sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4775 | @masd925 |http://www.freecodecamp.org/masd925
dinesh
@1532j0004kg
Apr 11 2018 08:00
hi
In this i added origin:* , but still showing error
kirbyedy
@kirbyedy
Apr 11 2018 08:06
@1532j0004kg read the console error
Failed to load https://api.weatherunlocked.com/api/current/34.7071301,33.0226174?app_id=71e69255&app_key=ba4129e7e81aff21553fe6a72815d906: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access. The response had HTTP status code 403.
cross origin error
dinesh
@1532j0004kg
Apr 11 2018 08:07
what i want to do
need to add crossOrigin : * ?
kirbyedy
@kirbyedy
Apr 11 2018 08:08
I have not used that weatherunlocked.com api so I can tell you exactly
dinesh
@1532j0004kg
Apr 11 2018 08:09
ok so u dont know ?
kirbyedy
@kirbyedy
Apr 11 2018 08:10
not for your particular API
try to search in the docs for that api
Tony Hudson
@ngohungphuc
Apr 11 2018 08:11
Hi guys can someone help me out I still cant find root cause
react-bootstrap-table/react-bootstrap-table2#297
kirbyedy
@kirbyedy
Apr 11 2018 08:13
@1532j0004kg I got the response from the api when I tried this link instead, with your keys
http://api.weatherunlocked.com/api/forecast/51.50,-0.12?app_id=yourapiid&app_key=yourkey
dinesh
@1532j0004kg
Apr 11 2018 08:14
so may be it will not support https
right ?
kirbyedy
@kirbyedy
Apr 11 2018 08:15
might be, but its better to use secure https://
note also the link... it has /forecast/
dinesh
@1532j0004kg
Apr 11 2018 08:15
when i use https its not working
dinesh
@1532j0004kg
Apr 11 2018 08:34
how?
n1zzy
@n1zzy
Apr 11 2018 08:34
@1532j0004kg I'm not sure what's causing your error but I suggest you try another api, maybe openweathermap ?
I've made my weather app over a year ago and it still works today
make sure you use https protocol
also mashape has tons of them
Adetunji Adegbite
@twonjee2002
Apr 11 2018 08:49
Hi all, I am getting this error when i tried to execute a request
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9089' is
Any help please

function gettUser(userId, callback) {

var usersUrl = "https://website.net/validate/check?user=TUNJI001@websitet&pass=pass

// var params = userId;
var xhttp = new XMLHttpRequest();

xhttp.addEventListener('load', callback);
xhttp.addEventListener('error', () => console.log("Request to "+usersUrl+" failed"));

xhttp.open("GET", usersUrl, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send();

}

Mandeep
@mandeephub
Apr 11 2018 09:05
hello to all
i m using a marquee in a page and the problem with that is its taking a big gap in repeating it how to remove this gap
Fabien SHAN
@X140hu4
Apr 11 2018 09:15
@mandeephub What do you mean?
Mandeep
@mandeephub
Apr 11 2018 09:20
@X140hu4 pls have a look to this www.classicaltunes.in above footer
Fabien SHAN
@X140hu4
Apr 11 2018 09:31
@mandeephub widgets_wrapper right? what about padding-bottom: 0;?
Mandeep
@mandeephub
Apr 11 2018 09:31
???
Fabien SHAN
@X140hu4
Apr 11 2018 09:33
oh wait
Mandeep
@mandeephub
Apr 11 2018 09:33
sir i need a continues marquee i mean to say that
TonyRednil
@TonyRednil
Apr 11 2018 09:35
I passed the challenge but I was wondering if there was a better way I could have gone about it.
Declare and initialize a variable total to 0. Use a for loop to add the value of each element to the myArr array to total.
Var myArr = [2,3,4,5,6];
For (var total = 0; total < myArr.length; total = total + total++) {
total += myArr[total];
}
Sorry for the weird way of submitting my code. I'm using the smart phone app and don't know how to submit a photo.....
Fabien SHAN
@X140hu4
Apr 11 2018 09:40
@mandeephub Maybe some answers here: https://codepen.io/Jaskaranbir/pen/JKNgrb ?
Mandeep
@mandeephub
Apr 11 2018 09:40
@X140hu4 thanks alot
CamperBot
@camperbot
Apr 11 2018 09:40
mandeephub sends brownie points to @x140hu4 :sparkles: :thumbsup: :sparkles:
:cookie: 364 | @x140hu4 |http://www.freecodecamp.org/x140hu4
Fabien SHAN
@X140hu4
Apr 11 2018 09:42
@TonyRednil is your result correct? It seems weird to me for the third argument of your for loop
Amal Shukla
@amal1994
Apr 11 2018 09:43
@NJM8 @all - hey you must be knowing
static sites are usually full of animations and carousel and interactions while the web app is not.
since our static site and web app both are built using angular, it leads to restricted changes on animations/interactions part
So should we separate both static site and web application?
TonyRednil
@TonyRednil
Apr 11 2018 09:46
@X140hu4 my result is apparently correct but I'm not sure I used the best method to accomplish the result.
@X140hu4 I wasn't sure how else to get it to sum all the values in myArr.....
Stephen James
@sjames1958gm
Apr 11 2018 09:46
@TonyRednil Seems like you are using total as your array index and your summation value.
total = total + total++ will double + 1 your total each time?
if we think about what total is each loop
start 0, add 2 from myArr[0], then double + 1 would be 2 * 2 + 1 which is 5
5 is not less than myArr.length, so loop ends with total 5
TonyRednil
@TonyRednil
Apr 11 2018 09:49
I mean I suppose I could have just had the function return total * 4 as that would also accomplish the goal if I just made the 3rd argument total++
Stephen James
@sjames1958gm
Apr 11 2018 09:50
Why are you using the total as your loop variable and your sum value?
Jeff Lung YK
@jefflung
Apr 11 2018 10:01
does anyone know the general channel has disappeared or not?
Fabien SHAN
@X140hu4
Apr 11 2018 10:03
@jefflung Deleted forever
Jeff Lung YK
@jefflung
Apr 11 2018 10:04
oh, feel shocked, maybe i missed notice
Fabien SHAN
@X140hu4
Apr 11 2018 10:04
I didnt see any notice either haha
Christopher Cardoso
@kriscard
Apr 11 2018 10:08
Hi guys! I use a bootstrap modal with a youtube video on it and when I close the modal I have a alert that said « You click on the hide button » and I need to confirm that to close the modal. How can I don’t display this alert please ? my jquery code is normaly simple
$(function(){
$('.close').click(function(){
$('iframe').attr('src', $('iframe').attr('src'));
$('iframe').stop()
});
});
Thanks in advance
Johnny
@JohnnyBizzel
Apr 11 2018 10:10
@kriscard Can we see it running?
Jeff Lung YK
@jefflung
Apr 11 2018 10:16
@X140hu4 thanks for telling me about this, coz I used to keep this channel on my desktop while I was working
CamperBot
@camperbot
Apr 11 2018 10:16
jefflung sends brownie points to @x140hu4 :sparkles: :thumbsup: :sparkles:
:cookie: 365 | @x140hu4 |http://www.freecodecamp.org/x140hu4
TonyRednil
@TonyRednil
Apr 11 2018 10:27
Wow, my chat app only showed half of these messages. I don't really know why I did it that way I just did. It still accomplished the goal of total equaling 20. I just checked the solution and this is what it says.
total = 0;
for (var i = 0; i < myArr.length; i++) {
LydaTech
@lydatech
Apr 11 2018 10:29

@jefflung @X140hu4 We’re retired the general chatroom on April 4.

We encourage you to instead join us all at https://forum.freeCodeCamp.org

freeCodeCamp’s forum software was built by the creator of Stack Overflow, and applies many of the lessons learned from running the Stack Overflow community.

Here are some advantages of the forum:

The forum can help you find similar discussions, often saving you the trouble of asking a question that’s been answered before.
You can get help faster and more reliably on the forum. Most questions get answered in less than one hour.
The forum is better for in-depth discussion about tools and getting detailed feedback on your projects.
See you on the forum!

Additionally, Gitter chat rooms focused on specific technologies are still available here

TonyRednil
@TonyRednil
Apr 11 2018 10:29
total += myArr[i];
Jeff Lung YK
@jefflung
Apr 11 2018 10:30
@lydatech Thanks Robot, cheer up~
CamperBot
@camperbot
Apr 11 2018 10:30
jefflung sends brownie points to @lydatech :sparkles: :thumbsup: :sparkles:
:star2: 2776 | @lydatech |http://www.freecodecamp.org/lydatech
Stephen James
@sjames1958gm
Apr 11 2018 10:31
@TonyRednil Assuming the goal is to sum the array values it is only by chance you got the right answer.
if you reverse the array your code will get 12 where it should get 20 still.
TonyRednil
@TonyRednil
Apr 11 2018 10:32
@sjames1958gm if I reverse my code?
Stephen James
@sjames1958gm
Apr 11 2018 10:33
if you do var myArr = [6, 5, 4, 3, 2] the total should still be 20?
TonyRednil
@TonyRednil
Apr 11 2018 10:33
@sjames1958gm Oh if I reverse the array. I would assume so. It just says that var total should output 20
Adetunji Adegbite
@twonjee2002
Apr 11 2018 10:34
anyone knows how i can resolve this error?
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9089' is therefore not allowed access. The response had HTTP status code 403
Stephen James
@sjames1958gm
Apr 11 2018 10:36
@TonyRednil I guess, but the goal was to sum the values of the array? Just getting 20 was the way it checks that you got there.
Bjorn van de Peut
@bjorno43
Apr 11 2018 10:36
@twonjee2002 That's called the "Same origin policy". Which basicly means you're not allowed to access the data on the remote server. The most common cause of this issue is when you use http instead of https
Adetunji Adegbite
@twonjee2002
Apr 11 2018 10:37
@bjorno43 i am able to access the data if i paste my request on browser how come not in my code
TonyRednil
@TonyRednil
Apr 11 2018 10:38
@sjames1958gm yeah I thought it was dumb luck.... It really should say if you got it based on the actual code you type. I'm still kind of lost how the correct answer sums all of the valhes in myArr.
Bjorn van de Peut
@bjorno43
Apr 11 2018 10:39
@twonjee2002 Because that works differently. Do you have control over the remote server? IE: Can you change its source code?
Adetunji Adegbite
@twonjee2002
Apr 11 2018 10:39
yes i have control @bjorno43
Bjorn van de Peut
@bjorno43
Apr 11 2018 10:40
@twonjee2002 What type of file is used as the index page? Like index.php / .html etc?
Stephen James
@sjames1958gm
Apr 11 2018 10:41
@TonyRednil The for loop is set up with an index variable i that accesses each entry in the array from 0 to myArr.length - 1
Then the total += myArr[i] adds each array value to the total variable.
if you were to unwind the loop it would look like this
total = 0;
total += myArr[0]
total += myArr[1]
. . .  // more of these until
total += myArr[myArr.length - 1]
Adetunji Adegbite
@twonjee2002
Apr 11 2018 10:42

it is a restapi call @bjorno43
function gettUser(userId, token, callback) {
var usersUrl = "http://localhost:8080/mtoken/?
account="+userId+"&pass="+token+""
// var params = userId;
var xhttp = new XMLHttpRequest();

xhttp.addEventListener('load', callback);
xhttp.addEventListener('error', () => console.log("Request to "+usersUrl+" failed"));

xhttp.open("GET", usersUrl, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.setRequestHeader("Access-Control-Allow-Origin", "*");
//response.setRequestHeader('Access-Control-Allow-Origin', '*')

xhttp.setRequestHeader('Access-Control-Allow-Methods', 'GET');
xhttp.setRequestHeader("Access-Control-Allow-Headers", "accept, content-type");
xhttp.setRequestHeader("Access-Control-Max-Age", "1728000");
xhttp.send();
}

Stephen James
@sjames1958gm
Apr 11 2018 10:42
@twonjee2002 Your server needs to add the Access-Control-Allow-Origin header to the response. It is the server under control here
Adetunji Adegbite
@twonjee2002
Apr 11 2018 10:43
@sjames1958gm let me see how that can be allowed.
Bjorn van de Peut
@bjorno43
Apr 11 2018 10:44
@twonjee2002 Ah cool, in that case all you have to do is remove the // in front of //response.setRequestHeader('Access-Control-Allow-Origin', '*') which basicly controls what's allowed to access it. You can change the asterix * to just the server you want to be able to access it for more security
Stephen James
@sjames1958gm
Apr 11 2018 10:45
@bjorno43 Doesn't that header need to come from the server not the client?
Adetunji Adegbite
@twonjee2002
Apr 11 2018 10:45
i am getting an error "response" not defined when i do that @bjorno43
TonyRednil
@TonyRednil
Apr 11 2018 10:45
@sjames1958gm ooooooooohhhhhhhhh. OMG that just clicked. Facepalm
Bjorn van de Peut
@bjorno43
Apr 11 2018 10:46
@sjames1958gm Ye it does. Hence I asked if he had control over the remote server
Adetunji Adegbite
@twonjee2002
Apr 11 2018 10:48
@sjames1958gm @bjorno43 here is what i have from the server
render (text: "<Statement>"+response+"</Statement>", contentType: "text/xml", encoding: "UTF-8")
Bjorn van de Peut
@bjorno43
Apr 11 2018 10:48
@twonjee2002 I'm looking at your code and it seems to me you're trying to make an Ajax call to localhost, but you're not handling the response? Or did you not include that part of the code?
Stephen James
@sjames1958gm
Apr 11 2018 10:50
@TonyRednil :+1: Great.
Adetunji Adegbite
@twonjee2002
Apr 11 2018 10:51
@bjorno43
gettUser(getUser(),jtoken, function() {
console.log("here is the response "+JSON.parse(this.responseText));
});
n1zzy
@n1zzy
Apr 11 2018 10:53

@sjames1958gm hello so I have an array of unknown items:

arr = [1 2 3 4 5]

how do I get the last two items without looping through the array?

Bjorn van de Peut
@bjorno43
Apr 11 2018 10:54
arr[3] and arr[4]
Stephen James
@sjames1958gm
Apr 11 2018 10:54
@n1zzy arr[arr.length - 1], arr[arr.length -2] or you could do arr.slice(-2) if you want an array
n1zzy
@n1zzy
Apr 11 2018 10:54
@sjames1958gm thanks
CamperBot
@camperbot
Apr 11 2018 10:54
n1zzy sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9190 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Adetunji Adegbite
@twonjee2002
Apr 11 2018 10:54
@bjorno43 @sjames1958gm checking this link on how to add cors to my server side if it will work. https://stackoverflow.com/questions/29584164/how-to-enable-cors-in-grails-3-0-1
Stephen James
@sjames1958gm
Apr 11 2018 10:55
@twonjee2002 That looks like what you need,.
Bjorn van de Peut
@bjorno43
Apr 11 2018 10:55
@twonjee2002 Great. My knowledge of Rest is practicly zero, so that got me pretty much stuck.
Adetunji Adegbite
@twonjee2002
Apr 11 2018 10:56
thanks guys, will give feedback on how it goes
Bjorn van de Peut
@bjorno43
Apr 11 2018 10:56
Anyway, I gotta go pick up some stuff. I'll be back in like 30 mins or so :wave:
Adetunji Adegbite
@twonjee2002
Apr 11 2018 10:59
@bjorno43 @sjames1958gm It worked! thanks.
CamperBot
@camperbot
Apr 11 2018 10:59
twonjee2002 sends brownie points to @bjorno43 and @sjames1958gm :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @bjorno43 |http://www.freecodecamp.org/bjorno43
:star2: 9192 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Apr 11 2018 11:01
@twonjee2002 Great!
Javier Pons
@JavierPons
Apr 11 2018 11:22
hi there!
some advise?
String.prototype.toJadenCase = function () {
  return String.replace(/\w\S*/g, 
    function(text){
        return text.charAt(0).toUpperCase() + text.substr(1).toLowerCase();}

    );

};
String after return is wrong
Javier Pons
@JavierPons
Apr 11 2018 11:27
what I should type ?
Johnny
@JohnnyBizzel
Apr 11 2018 11:34
@JavierPons
String.prototype.toJadenCase = function () {
  return this.replace(/\w\S*/g, 
    function(text){
        return text.charAt(0).toUpperCase() + text.substr(1).toLowerCase();}
    );
};
Javier Pons
@JavierPons
Apr 11 2018 11:35
I was trying @JohnnyBizzel , yes, you are right. Thank!
CamperBot
@camperbot
Apr 11 2018 11:35
javierpons sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
:star2: 1818 | @johnnybizzel |http://www.freecodecamp.org/johnnybizzel
Nate Mallison
@NJM8
Apr 11 2018 11:35
@amal1994 why not use angular animate? https://angular.io/guide/animations but if it is too hard then I guess it would make sense to seperate
Johnny
@JohnnyBizzel
Apr 11 2018 11:36
@JavierPons :+1:
Abdus Samad
@asamad123
Apr 11 2018 11:36
hi everyone
Markus Kiili
@Masd925
Apr 11 2018 11:38
@asamad123 Hi.
Abdus Samad
@asamad123
Apr 11 2018 11:38

Just need some help with the javascript side. For some reason my nav is not appearing in mobile sizes. Did i get the javascript wrong.

https://codepen.io/abdus123/pen/QmYXEN?editors=1100

n1zzy
@n1zzy
Apr 11 2018 11:39
does anyone know how to find prime numbers?
function sumPrimes(num) {
    var prime_arr = [];
    for (var i = 1; i <= num; i++) {
        if (i%1 == 0 && i%i == 0 && i%i-1 != 0) {
            prime_arr.push(i);
        }
    }
    console.log(prime_arr);
}
how do you make sure that i is only divisible by 1 and itself?
Markus Kiili
@Masd925
Apr 11 2018 11:41
@n1zzy You could loop candidate numbers and then test them against all the smaller numbers >=2, but better way is to store the generated primes and only test against them.
So you need two loops of some kind there.
For the loop logic, you could use a flag variable or a suitable array iterator like .every() or .some().
Johnny
@JohnnyBizzel
Apr 11 2018 11:42
@asamad123 Here is the example from W3schools https://codepen.io/JohnnyBizzel/pen/QGEapj
Abdus Samad
@asamad123
Apr 11 2018 11:43
@JohnnyBizzel thanks but isnt that bootstrap it looks so similar
CamperBot
@camperbot
Apr 11 2018 11:43
asamad123 sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
:star2: 1819 | @johnnybizzel |http://www.freecodecamp.org/johnnybizzel
Abdus Samad
@asamad123
Apr 11 2018 11:43
i tried to make it from scratch i got the css but the js side seems not to be working
n1zzy
@n1zzy
Apr 11 2018 12:03
@Masd925 but how does every() or some() help me when they only return truthy values?
Markus Kiili
@Masd925
Apr 11 2018 12:07
@n1zzy Every tests if all the array elements pass a test. Here you could test whether the candidate prime is not evenly divisible by any of the primes generated so far.
By testing the every method return value, you could keep or discard the candidate prime.
n1zzy
@n1zzy
Apr 11 2018 12:14
@Masd925
function sumPrimes(num) {
    var num_arr = [];
    var prime_arr = [];
    var is_prime = false;
    for (var i = 1; i <= num; i++) {
        num_arr.push(i);
        is_prime = num_arr.some(function(e) {
            if (e >= 2 && e % num_arr[i] == 0) {
                return e;
            }
        });
        if (is_prime) {
            prime_arr.push(i);
        }
    }
    console.log(prime_arr);
}
Markus Kiili
@Masd925
Apr 11 2018 12:14
@n1zzy You only need one array that holds the primes generated so far.
Subhankar paul
@Decoder-Paul
Apr 11 2018 12:18
@n1zzy Here is ur solution
function sumPrimes(num) {
var prime_arr = [];
for (var i = 1; i <= num; i++) {
var j=2;
var isPrime=true;
while(j<=i/2){
if(i%j==0){
isPrime=false;
}
j++;
}
if (isPrime) {
prime_arr.push(i);
}
}
console.log(prime_arr);
}
sumPrimes(10);
Bjorn van de Peut
@bjorno43
Apr 11 2018 12:19
'''
CamperBot
@camperbot
Apr 11 2018 12:19
:bulb: to format code use backticks! ``` more info
Subhankar paul
@Decoder-Paul
Apr 11 2018 12:20
function sumPrimes(num) {
    var prime_arr = [];
    for (var i = 1; i <= num; i++) {
        var j=2;
        var isPrime=true;
        while(j<=i/2){
          if(i%j==0){
            isPrime=false;
          }
          j++;
        }
        if (isPrime) {
            prime_arr.push(i);
        }
    }
    console.log(prime_arr);
}
sumPrimes(10);
Markus Kiili
@Masd925
Apr 11 2018 12:21
@Decoder-Paul Why i/2? I think that you could use square root of i which is much better.
And only testing against primes generated so far is much much better yet.
Subhankar paul
@Decoder-Paul
Apr 11 2018 12:22
@Masd925 Yes it'll reduce number of iterations, best way to achieve lowest complexity is using Sieve of Eratothenese
kirbyedy
@kirbyedy
Apr 11 2018 12:22
why are people posting algorithm problems here in the frontend room ?
Markus Kiili
@Masd925
Apr 11 2018 12:22
@Decoder-Paul Yes.
@kirbyedy People are in shock because the main room got closed.
kirbyedy
@kirbyedy
Apr 11 2018 12:25
yea noticed that, but still... is it so hard to read the room list on the left and post the problem in the correct room :)
n1zzy
@n1zzy
Apr 11 2018 12:26
@kirbyedy what is the correct room?
wasn't frontend always the room for javascript exercises?
nope, frontend is exactly what it reads... front end...
n1zzy
@n1zzy
Apr 11 2018 12:27
but isn't js a technology for frontend?
@kirbyedy there are 496 People in that room while here are well over 17.000
kirbyedy
@kirbyedy
Apr 11 2018 12:30
as markus said, the main room got deleted, so everybody automatically switched to the first available room, and that is the HelpFrontEnd
anyways from those 17k, 16867 are idling :D
more or less :D
shameem fairooz
@sfshameem5
Apr 11 2018 12:33
Hey guys. It's been a while since i used free code camp.
Currently doing basic algorithm scripting challenges.
Bjorn van de Peut
@bjorno43
Apr 11 2018 12:34
@kirbyedy The room topics are suggestions. It's not against our rules to talk about off-topic stuff. It just means the chances of getting help are reduced. That being said: JS is frontend ;)
shameem fairooz
@sfshameem5
Apr 11 2018 12:34
I don't seem to understand the Seek and Destroy challenge. Any help ?
Markus Kiili
@Masd925
Apr 11 2018 12:35
@sfshameem5 Sure. What have you done so far.
dinesh
@1532j0004kg
Apr 11 2018 12:35
@n1zzy thanks
CamperBot
@camperbot
Apr 11 2018 12:35
1532j0004kg sends brownie points to @n1zzy :sparkles: :thumbsup: :sparkles:
api offline
Markus Kiili
@Masd925
Apr 11 2018 12:36
@sfshameem5 Note that there is only one parameter arr in the function and several arguments are passed. Therefore you need to use the arguments object here.
kirbyedy
@kirbyedy
Apr 11 2018 12:36
@bjorno43 agree, but in that case we dont need helpJavascript room, or CodeReview rooms do we, cause we can speak about that here in the HelpFrontEnd as well :D
anyway, lets stop with offtopic and lets listen to peoples problems ;)
shameem fairooz
@sfshameem5
Apr 11 2018 12:38
Guys. this is so quick.
The thing is I've done nothing.
Bjorn van de Peut
@bjorno43
Apr 11 2018 12:38
@kirbyedy See HelpFrontEnd as a more global room and the Javascript room more specific. The frontend help room is ment for problems that involve multiple front end languages. Questions usually include a Codepen with html / css and js. On the JS room is purely about JS
shameem fairooz
@sfshameem5
Apr 11 2018 12:39
I just don't seem to understand how that challenge works.
How does the test cases relate ? I don't seem to understand them
Markus Kiili
@Masd925
Apr 11 2018 12:40
@n1zzy Prime array should start empty. Only push primes there.
shameem fairooz
@sfshameem5
Apr 11 2018 12:41
@Masd925 any suggestions ?
n1zzy
@n1zzy
Apr 11 2018 12:43
@Masd925 so one array for prime numbers and loop through all # from 2 to numright?
hensn5250
@hensn5250
Apr 11 2018 12:51
@sfshameem5 what challenge is that in, Intro Algos?
krckyboy
@krckyboy
Apr 11 2018 12:52

I'm wondering, why does my click event work only once? It works only the first time and that's it. What I want to do is to make it functional, so that whenever a user clicks a rating star, the stars initially remove the active class (which is called .aktivnaZvezdica) and then add that active class to all the stars up to the one that I clicked on. It works only once and then it stops. I'd appreciate help.

https://codepen.io/krcky/pen/EEMexd

hensn5250
@hensn5250
Apr 11 2018 12:57
@krckyboy are your familiar with the ~ css selector?
shameem fairooz
@sfshameem5
Apr 11 2018 12:58
@hensn5250 I guess so.
krckyboy
@krckyboy
Apr 11 2018 12:59
@hensn5250 General sibling, right?
hensn5250
@hensn5250
Apr 11 2018 12:59
yes
krckyboy
@krckyboy
Apr 11 2018 12:59
@hensn5250 I'm focusing on the JS here, though.
I don't get why it's not working as I want it to.
shameem fairooz
@sfshameem5
Apr 11 2018 13:00
@hensn5250 It
hensn5250
@hensn5250
Apr 11 2018 13:01
i know the feeling. you want to fix what you've spent time on.
shameem fairooz
@sfshameem5
Apr 11 2018 13:01
@hensn5250 It's the seek and destroy challenge from Basic Algorithm Scripting
@hensn5250 I am able to understand the description but not how the test cases work
hensn5250
@hensn5250
Apr 11 2018 13:02
@sfshameem5 so you solved it?
shameem fairooz
@sfshameem5
Apr 11 2018 13:03
@hensn5250 no
@hensn5250 just not getting it though.
hensn5250
@hensn5250
Apr 11 2018 13:04
can you link it
hensn5250
@hensn5250
Apr 11 2018 13:05
the test cases aren't showing
shameem fairooz
@sfshameem5
Apr 11 2018 13:07
just press ctrl + enter
or just click the run tests options
hensn5250
@hensn5250
Apr 11 2018 13:11
@sfshameem5 ok will try again
shameem fairooz
@sfshameem5
Apr 11 2018 13:12
@hensn5250 Okay, thanks.
CamperBot
@camperbot
Apr 11 2018 13:12
sfshameem5 sends brownie points to @hensn5250 :sparkles: :thumbsup: :sparkles:
:cookie: 328 | @hensn5250 |http://www.freecodecamp.org/hensn5250
hensn5250
@hensn5250
Apr 11 2018 13:12
now i see them
so you need to remove all instances of the numbers in the second argument from the array(the first arg)
The hint says use Array.filter() and the arguments object
MDN: The filter() method creates a new array with all elements that pass the test implemented by the provided function.
shameem fairooz
@sfshameem5
Apr 11 2018 13:17
'''
CamperBot
@camperbot
Apr 11 2018 13:17
:bulb: to format code use backticks! ``` more info
shameem fairooz
@sfshameem5
Apr 11 2018 13:17
destroyer([1, 2, 3, 1, 2, 3], 2, 3) should return [1, 1].
hensn5250
@hensn5250
Apr 11 2018 13:17
So basically the function you pass to array.filter will remove the numbers
shameem fairooz
@sfshameem5
Apr 11 2018 13:17
why should this return [1, 1]
hensn5250
@hensn5250
Apr 11 2018 13:18
in the above case, it should remove all instances of 2 and 3
shameem fairooz
@sfshameem5
Apr 11 2018 13:18
So, if the numbers in the second array, are found in the first, then remove them
right ?
I think I've got it now. Thanks!
hensn5250
@hensn5250
Apr 11 2018 13:19
if num !== 2||3 , will filter 2 and 3 from the array, and return a new array
Yup
Adetunji Adegbite
@twonjee2002
Apr 11 2018 13:20
Hi all, I am having an issue using promise. Here is my code.
 ```const usersUrl = "https://stackoverflow.com";
 fetch(usersUrl)
.then(
    response => response.text() // .json(), etc.
    // same as function(response) {return response.text();}
).then(
    html => console.log("promise "+html)

);

   console.log("here is the response "+html);
  respp = html.split('<Statement>').pop().split('</Statement>').shift(); 
 console.log("here is the response 22"+respp.toString());
 var val = JSON.parse(respp);
 trueorfalse = val.result.value;
 console.log("here is the response2 "+trueorfalse);```
this line is executing before the promise finishes
console.log("here is the response "+html);
shameem fairooz
@sfshameem5
Apr 11 2018 13:21
@twonjee2002 use backticks for formatting
like this
console.log('hello world');
Adetunji Adegbite
@twonjee2002
Apr 11 2018 13:21
how do i do that please? what do you mean by backticks?
hensn5250
@hensn5250
Apr 11 2018 13:22
// press ``` then ctrl + enter
 //add your code between back ticks( `) , 
//press  ctrl + enter when finished
This message was deleted
Bjorn van de Peut
@bjorno43
Apr 11 2018 13:24
'''
CamperBot
@camperbot
Apr 11 2018 13:24
:bulb: to format code use backticks! ``` more info
Adetunji Adegbite
@twonjee2002
Apr 11 2018 13:25
ok
hensn5250
@hensn5250
Apr 11 2018 13:26
@twonjee2002 what's the problem you have ? undefined values?
Adetunji Adegbite
@twonjee2002
Apr 11 2018 13:27
yes @hensn5250
hensn5250
@hensn5250
Apr 11 2018 13:27
```
//================Asynchronous Code, will take about ~100ms to execute
const usersUrl = "https://stackoverflow.com";
     fetch(usersUrl)
    .then(
        response => response.text() // .json(), etc.
        // same as function(response) {return response.text();}
    ).then(
        html => console.log("promise "+html)

    );

//==========Synchronous code, will take ~20ms to execute
//The code below executes before the one above
       console.log("here is the response "+html);
      respp = html.split('<Statement>').pop().split('</Statement>').shift(); 
     console.log("here is the response 22"+respp.toString());
     var val = JSON.parse(respp);
     trueorfalse = val.result.value;
     console.log("here is the response2 "+trueorfalse);
Adetunji Adegbite
@twonjee2002
Apr 11 2018 13:32
@hensn5250 how do i wait for the one above to finish before i continue the one below.
hensn5250
@hensn5250
Apr 11 2018 13:33
1 You can put the code at the bottom in the fetch()
Adetunji Adegbite
@twonjee2002
Apr 11 2018 13:34
I did that and was complaining about missing ')'. by the way i want to use the response in other parts of the code.
hensn5250
@hensn5250
Apr 11 2018 13:34
There is no way to tell when the Async code will return with a value
Bjorn van de Peut
@bjorno43
Apr 11 2018 13:35
@twonjee2002 The whole purpose of an asynchronous call is that the code will continue while it's working. If you want to wait till it's finished, make it synchronous
If however you want all your other code to continue, but only have your synchronous call wait for it, make it part of the callback
hensn5250
@hensn5250
Apr 11 2018 13:38
@twonjee2002 you can use Async and Await keywords to make the Async code appear more linear/synchronous
Adetunji Adegbite
@twonjee2002
Apr 11 2018 13:38
is it advisable to have have ajax synchronous?
hensn5250
@hensn5250
Apr 11 2018 13:39
Asynchronous JavaScript and XML
shameem fairooz
@sfshameem5
Apr 11 2018 13:39
@hensn5250 Thanks man! challenge completed.
CamperBot
@camperbot
Apr 11 2018 13:39
sfshameem5 sends brownie points to @hensn5250 :sparkles: :thumbsup: :sparkles:
api offline
hensn5250
@hensn5250
Apr 11 2018 13:39
no prob
Bjorn van de Peut
@bjorno43
Apr 11 2018 13:40
Depends on what you're doing with it. There are situations where you have to use a synchronous call, but if you can avoid it, it's better
Adetunji Adegbite
@twonjee2002
Apr 11 2018 13:40
any example of synchronous ajax call?
Bjorn van de Peut
@bjorno43
Apr 11 2018 13:43
Well lets say for example you have a search field. And based on what the user types, a dropdown menu is updated through JS with the values returned by the server. In that case it makes sense to use a synchronous call. Otherwise the menu might be updated while the user already changed the words in the search field
Not a perfect example, but you get the idea
Adetunji Adegbite
@twonjee2002
Apr 11 2018 13:44
yes this is what i need, synchronous...
n1zzy
@n1zzy
Apr 11 2018 13:44

@Masd925 when I use the some() method

array.some(function(curr_val) {
console.log(curr_val)
CONDITIONS
}

it always logs the first item in the array?

Bjorn van de Peut
@bjorno43
Apr 11 2018 13:48
@twonjee2002 If you want to use a synchronous call, all you have to do is change true to false in the open() method. Like so: xhttp.open("GET", "page.php", false);
Adetunji Adegbite
@twonjee2002
Apr 11 2018 13:48
ok @bjorno43 let me try
hensn5250
@hensn5250
Apr 11 2018 13:51
@twonjee2002 is this on codepen
Adetunji Adegbite
@twonjee2002
Apr 11 2018 13:53
@bjorno43 still got the error Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
I think that was just a warning, it should work now @hensn5250 @bjorno43
hensn5250
@hensn5250
Apr 11 2018 13:58
@twonjee2002 check your message
Bjorn van de Peut
@bjorno43
Apr 11 2018 14:01
@twonjee2002 Been doing some reading and apperently synchronous calls on the main thread is in the process of becoming deprecated and that it should only be used in worker threads instead. Not that I have any idea how one would do that..
n1zzy
@n1zzy
Apr 11 2018 14:13
@Masd925 man I tried any possible combination with some() and every() and I couldn't figure out how to use them in this context...
in the end I gave up and used filter() instead...
function sumPrimes(num) {
    var num_arr = [];
    var prime_arr = [];
    var is_prime = false;
    var total_sum = 0;
    for (var i = 2; i <= num; i++) {
        num_arr.push(i);
    }
    prime_arr = num_arr.filter(function(curr_val) {
        if (curr_val == 2) {
            return true;
        }
        if (curr_val % 2 == 0) {
            return false;
        }
        for (var j = 3; j <= curr_val/2; j = j + 2) {
            if (curr_val % j == 0) {
                return false;
            }
        }
        return true;
    });
    for (var x = 0; x < prime_arr.length; x++) {
        total_sum += prime_arr[x];
    }
    console.log(total_sum);
}
@Masd925 could you please show me your solution using those two methods described?
rk
@rajkumart08_twitter
Apr 11 2018 14:42
Hi,
  • I am new to js.
  • in my code I am trying to write a simple if and else statement.
  • if I change this line counts[num] = counts[num] ? counts[num] + 1 : 1; to if and else I am not getting proper output.
  • can you tell me how to change to if and else.
  • providing my code changes below.

var str = "aaabbccccddd";
var arr = str.split("");
var counts = {};
for (var i = 0; i < arr.length; i++) {
    var num = arr[i];
    console.log("num--->" + num);
        console.log("counts[num]--->" + counts[num]);
    //    counts[num] = counts[num] ? counts[num] + 1 : 1;


    if(counts[num]) {
        counts[num] + 1;
        console.log("counts[num] + 1--->" + counts[num] + 1);
    }
    else{
        counts[num] = 1;
        console.log("counts[num]--->" + counts[num]);
    }
    //counts[num] = counts[num] ? counts[num] + 1 : 1;
}

console.log('a: ' + counts['a'] + '\n b: ' + counts['b'] + '\n c: ' + counts['c'] + '\n d: ' + counts['d'])


num--->a
  counts[num]--->undefined
  counts[num]--->1
  num--->a
  counts[num]--->1
  counts[num] + 1--->11
  num--->a
  counts[num]--->1
  counts[num] + 1--->11
  num--->b
  counts[num]--->undefined
  counts[num]--->1
  num--->b
  counts[num]--->1
  counts[num] + 1--->11
  num--->c
  counts[num]--->undefined
  counts[num]--->1
  num--->c
  counts[num]--->1
  counts[num] + 1--->11
  num--->c
  counts[num]--->1
  counts[num] + 1--->11
  num--->c
  counts[num]--->1
  counts[num] + 1--->11
  num--->d
  counts[num]--->undefined
  counts[num]--->1
  num--->d
  counts[num]--->1
  counts[num] + 1--->11
  num--->d
  counts[num]--->1
  counts[num] + 1--->11
  a: 1
 b: 1
 c: 1
 d: 1
 undefined
Michael S
@Ohshi60
Apr 11 2018 14:59
hi im not a JS guy by any means but if noone else can help - it looks like youre not assigning your statement ie. try counts[num] += 1;
@rajkumart08_twitter
Aditya
@ezioda004
Apr 11 2018 15:06
@rajkumart08_twitter As @Ohshi60 said you arent assigning the value back to count[num] as you did in ternary expression. It should be counts[num] += 1;
hensn5250
@hensn5250
Apr 11 2018 15:09
@rajkumart08_twitter first off, counts is declared as an object not an array,
Michael S
@Ohshi60
Apr 11 2018 15:12
@rajkumart08_twitter i just spent 20 minutes figuring out why your console log outputs 11. -> you are printing the strings ie. count[num] and then adding the string 1 so count[num] prints 1 and append the 1 for a total of two 1's and not the number 11
Aditya
@ezioda004
Apr 11 2018 15:16
@hensn5250 He's using bracket notation for objects also arrays are objects in disguise ;)
hensn5250
@hensn5250
Apr 11 2018 15:17
i think he wants an array though
@ezioda004 on second look it looks like that's what he wants but haphazardly since he named the variable num when the array contains letters.
idk
Michael S
@Ohshi60
Apr 11 2018 15:27
hi guys, how can i host an image on CodePen? or do i need to upload it to a 3rd party site
Stephen James
@sjames1958gm
Apr 11 2018 15:28
@Ohshi60 3rd party site
Aditya
@ezioda004
Apr 11 2018 15:29
@hensn5250 I suppose he wants to "count" the number of occurrence of each letter in the str.
hensn5250
@hensn5250
Apr 11 2018 15:33
i think you are right
Kingsley
@Kingwindie
Apr 11 2018 15:34
can anyone read this and see if they understand what it's asking me to do(explain) because i honestly don't understand the instruction::
in an html file,write a for loop that displays a  table with the names of 12 Chinese zodiac signs as column headings and with the years displayed below the appropriate column heading.Begin the table with 1912 and end with the current year.You may want to use the modulous operator to determine the number in each row for the table.  
THIS IN PARTICULAR IS EXTREMELY CONFUSING BECAUSE I COULDN'T FIND A  WAY DISPLAY  THE IMAGES I STORED IN THE ARRAY TO THE BROWSER

Use an array to store and display a picture of the appropriate sign below the text header in each column
PLEASE ANY HELP IS GREATLY APPRECIATED
Michael S
@Ohshi60
Apr 11 2018 15:35
@Kingwindie your question is even more confusing why does the instruction contain questions?
hensn5250
@hensn5250
Apr 11 2018 15:36
@Kingwindie i think it wants this Dog | Cat | Chicken| ....
Kingsley
@Kingwindie
Apr 11 2018 15:44
@Ohshi60 hang on let me paste the instruction without the markdown thing
@Ohshi60 wait what question are you talking about?
Michael S
@Ohshi60
Apr 11 2018 15:45
@Kingwindie no worries i have a good idea about what you need to do
Kingsley
@Kingwindie
Apr 11 2018 15:48
@Ohshi60 ok
Michael S
@Ohshi60
Apr 11 2018 15:49
im an CS graduate that is dabbling in webdevelopment so take it with a grain of salt but:
use JavaScript in the HTML document to create the for loop
create an array or list with the chinese zodiac names
same with the pictures; you might even consider creating a key:value for the zodiac and images since they correspond 1 to 1
i can create a pseudo code for you if you want, but think u will learn more from trying urself :)
Kingsley
@Kingwindie
Apr 11 2018 15:53
@Ohshi60 ok,but how do i display the images to show in the browser,the solutions i came up with just shows "objectNodeList"
@Ohshi60 i will appreciate a pseudo code
Christopher McCormack
@cmccormack
Apr 11 2018 15:54
@Kingwindie you may want to use the > markdown for quoting text as it won't force us to scroll across, just an FYI
@Kingwindie which solution did you use, share your code and it may be easier to assist
Kingsley
@Kingwindie
Apr 11 2018 15:55
@cmccormack ok, i didn't know that was a thing
Christopher McCormack
@cmccormack
Apr 11 2018 15:56
bottom right of the chat you should see a little M :arrow_down: that explains different markdown
Kingsley
@Kingwindie
Apr 11 2018 15:59
thanks i figured it out @Ohshi60 @cmccormack
CamperBot
@camperbot
Apr 11 2018 15:59
kingwindie sends brownie points to @ohshi60 and @cmccormack :sparkles: :thumbsup: :sparkles:
:cookie: 168 | @ohshi60 |http://www.freecodecamp.org/ohshi60
:star2: 1405 | @cmccormack |http://www.freecodecamp.org/cmccormack
Michael S
@Ohshi60
Apr 11 2018 16:00
@Kingwindie Nice, savour that that feeling of solving a problem
Kingsley
@Kingwindie
Apr 11 2018 16:00
@Ohshi60 yup
Michael S
@Ohshi60
Apr 11 2018 16:01
Hi im creating a portfolio site using bootstrap 4 and font-awesome.
Why is the font in my about section not displaying corrrectly? [portfolio]https://codepen.io/ohshi/pen/vRPPmv
Christopher McCormack
@cmccormack
Apr 11 2018 16:10
@Ohshi60 you don't want to put all your text in a fontawesome icon
Javier Pons
@JavierPons
Apr 11 2018 16:10
hi there!
Stephen James
@sjames1958gm
Apr 11 2018 16:11
@JavierPons :wave:
Christopher McCormack
@cmccormack
Apr 11 2018 16:11
@Ohshi60 try <i class="fa fa-user"></i><h1>Michael Sebastian S&oslash;by</h1> instead, although I'm not certain where you wanted the user icon
Javier Pons
@JavierPons
Apr 11 2018 16:11
:hand: @sjames1958gm
Christopher McCormack
@cmccormack
Apr 11 2018 16:13
@Ohshi60 note I also escaped your character just in case
Michael S
@Ohshi60
Apr 11 2018 16:16
@cmccormack Hi, thanks - i wanted the icon on the same line as my h1 headline :)
CamperBot
@camperbot
Apr 11 2018 16:16
ohshi60 sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1406 | @cmccormack |http://www.freecodecamp.org/cmccormack
Christopher McCormack
@cmccormack
Apr 11 2018 16:17
@Ohshi60 ok <h1><i class="fa fa-user"></i>Michael Sebastian Søby</h1>
fontawesome usually uses just the i element with no content
Michael S
@Ohshi60
Apr 11 2018 16:22
@cmccormack perfect, ty
CamperBot
@camperbot
Apr 11 2018 16:22
ohshi60 sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
api offline
Kai Stampe
@DonBeisser
Apr 11 2018 16:48
Hi, can someone tell me, what i am doning wrong in this pen? I'm trying to get it to work for myself since a week but i still doesn't work. I've tryed it with jsonp, callback=?, async=false and origin=*. getJSON and $.ajax also. But it wont work. https://codepen.io/DonBeisser/pen/gezLPG?editors=1111
Christopher McCormack
@cmccormack
Apr 11 2018 17:00
@DonBeisser problem is your form submit
@DonBeisser add an ID to your form, and use something like this:
<form id = 'myForm'>
....
    $('#myForm').on('submit', function(e){
        e.preventDefault()
    })
Kai Stampe
@DonBeisser
Apr 11 2018 17:03
thx i'll try it
Christopher McCormack
@cmccormack
Apr 11 2018 17:03
When you click the button it's submitting the form, which by default will submit the form to the server and reload the page
Javier Pons
@JavierPons
Apr 11 2018 17:10
some advise?
var count = 0;
function persistence(num) {

   if(num.toString().length == 1) {
 return count;
}
 count++;
var mult = 1;
var splitStr = num.toString().split("");
for (var i = 0; i<splitStr; i++) {
    mult *=parseFloat(splitStr[i]);
}
return persistence(parseFloat(mult));


}
Christopher McCormack
@cmccormack
Apr 11 2018 17:10
@DonBeisser just to add a little, the e used above is the event object that is passed to the handler when some event is triggered. you can get a lot of detail about an event from that event object
@JavierPons for one I would probably make your function names more descriptive, I have no idea what you're trying to do just by reading that
And add some comments
@JavierPons where are you declaring num? sorry you should really work on your indentions, very hard to tell what belongs where
cleaned up a bit using the Tidy JS helper in Codepen:
var count = 0;
function persistence(num) {
  if (num.toString().length == 1) {
    return count;
  }
  count++;
  var mult = 1;
  var splitStr = num.toString().split("");
  for (var i = 0; i < splitStr; i++) {
    mult *= parseFloat(splitStr[i]);
  }
  return persistence(parseFloat(mult));
}
Javier Pons
@JavierPons
Apr 11 2018 17:12
@cmccormack :) for exam. persistence(39) === 3 // because 39 = 27, 27 = 14, 1*4=4
// and 4 has only one digit
Kai Stampe
@DonBeisser
Apr 11 2018 17:13
thanks @cmccormack I thought that the request was the problem. Now it works. How can i get the details about an event?
CamperBot
@camperbot
Apr 11 2018 17:13
donbeisser sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1407 | @cmccormack |http://www.freecodecamp.org/cmccormack
Christopher McCormack
@cmccormack
Apr 11 2018 17:14
@DonBeisser https://mdn.io/event
@DonBeisser I'm guessing every one of us found a similar answer on Stackoverflow or Similar site the first time we tried to do a similar project :)
Javier Pons
@JavierPons
Apr 11 2018 17:18
@cmccormack yes, its true
Kai Stampe
@DonBeisser
Apr 11 2018 17:19
@cmccormack but only if the question is correct :smile:
Christopher McCormack
@cmccormack
Apr 11 2018 17:21
@JavierPons you don't want to return your recursive function call, that's one issue. Another is that numbers by default do not have a toString() method, you will have to wrap in Number(num).toString()
or something simple like '' + num
Javier Pons
@JavierPons
Apr 11 2018 17:22
@cmccormack :+1:
@cmccormack Im making some 4 test and one of then its correct
it depend what I position var count = 0; the test is correct in different way. And I has add .length to for loop after splitStr. It gives in other test correct but not all 4 ... :(
if the persistence is (39,3)
with this code gives correct the test
var count = 0;
function persistence(num) {

   if(num.toString().length == 1) {
 return count;
}
 count++;
var mult = 1;
var splitStr = Number(num).toString().split("");
for (var i = 0; i < splitStr.length; i++) {
    mult *= parseFloat(splitStr[i]);
}
return persistence(parseFloat(mult));


}
Javier Pons
@JavierPons
Apr 11 2018 17:27
but persistence(4,0) or (25,2) test is wrong
Michael S
@Ohshi60
Apr 11 2018 17:28
your indentation makes it rly hard to read friend
Javier Pons
@JavierPons
Apr 11 2018 17:28
sorry
again
var count = 0;

function persistence(num) {

   if(num.toString().length == 1) {
       return count;
}
count++;

var mult = 1;

var splitStr = Number(num).toString().split("");

for (var i = 0; i < splitStr.length; i++) {
    mult *= parseFloat(splitStr[i]);
}

return persistence(parseFloat(mult));

}
Michael S
@Ohshi60
Apr 11 2018 17:30
hey gimme a sec its still confusing :)
Javier Pons
@JavierPons
Apr 11 2018 17:30
no problem :)
Michael S
@Ohshi60
Apr 11 2018 17:31
you want to indent with a tab every time you create a { } pair and make sure they match
Brad
@bradtaniguchi
Apr 11 2018 17:31
var count = 0;

function persistence(num) {

  if (num.toString().length == 1) {
    return count;
  }
  count++;

  var mult = 1;

  var splitStr = Number(num).toString().split("");

  for (var i = 0; i < splitStr.length; i++) {
    mult *= parseFloat(splitStr[i]);
  }

  return persistence(parseFloat(mult));

}
Just run a formatter on the code.
Michael S
@Ohshi60
Apr 11 2018 17:35
@bradtaniguchi im too oldschool for that
Brad
@bradtaniguchi
Apr 11 2018 17:35
>.>
Javier Pons
@JavierPons
Apr 11 2018 17:39
@bradtaniguchi me too, I dont understand :smile:
I must to leave for a while
Hi
Can anyone help? The modal on my site seems to flash upon the page loading. Anyway to prevent this?
Christopher McCormack
@cmccormack
Apr 11 2018 18:14
@KUBIX90 what browser?
Mark Kubik
@KUBIX90
Apr 11 2018 18:15
I've tried firefox, chrome and edge. They all have the issue. @cmccormack
Christopher McCormack
@cmccormack
Apr 11 2018 18:16
weird I don't see any flash - can you walk through the exact steps so we can try to replicate?
Mark Kubik
@KUBIX90
Apr 11 2018 18:18
There's not really much to it. I just click on the link above, the modal then flashes up, transitions off the screen and then the rest of the page loads
It's really annoying as I've tried asking for help in the past but no ones else seems to get the issue
It's as if it's my computer or something, but I have no idea why that would be the case
Ken Haduch
@khaduch
Apr 11 2018 18:20
@KUBIX90 - I did see it happen one time when the page loaded, and then afterward (refreshing the page) it doesn't seem to do it. I wonder if I cleared the cache if it would do it again? Or I'll try firefox (I originally loaded on Opera on windows)
Mark Kubik
@KUBIX90
Apr 11 2018 18:21
@khaduch Hi, yes clearing the cache should make it happen
Ken Haduch
@khaduch
Apr 11 2018 18:21
It didn't happen when I tried to load on Firefox (on the same computer - not sure if it would have been cached somehow system-wide?)
Mark Kubik
@KUBIX90
Apr 11 2018 18:21
It loads as normal when you just refresh the page
@khaduch I have no idea tbh. I'm a bit lost with this and there doesn't seem to be much resources online about it either
Ken Haduch
@khaduch
Apr 11 2018 18:23
@KUBIX90 - is your source code available on github?
Mark Kubik
@KUBIX90
Apr 11 2018 18:23
Yes, one sec
Ken Haduch
@khaduch
Apr 11 2018 18:29
@KUBIX90 - I just cannot get it to happen on Firefox, even after clearing the cache.
@KUBIX90 - what is that modal for, anyway?
Mark Kubik
@KUBIX90
Apr 11 2018 18:32
@khaduch Displays all the info for my project
Ken Haduch
@khaduch
Apr 11 2018 18:33
okay, I see...
Christopher McCormack
@cmccormack
Apr 11 2018 18:33
is there JS specifically for the modal?
Mark Kubik
@KUBIX90
Apr 11 2018 18:34
No that's the thing
its all CSS
Ken Haduch
@khaduch
Apr 11 2018 18:34
I just cannot get it to do that initial popup thing again - after clearing cache and reloading. Maybe I need to delete the page and then clear the cache and fetch it again?
Mark Kubik
@KUBIX90
Apr 11 2018 18:35
Yeah that could work, what I did was clear everything, then searched for it in google and clicked from there
Ken Haduch
@khaduch
Apr 11 2018 18:35
no, just won't happen again...
Mark Kubik
@KUBIX90
Apr 11 2018 18:35
Mark Kubik Front End should suffice
It's happening every time for me, I don't know if its my browser settings maybe or what
It looks terrible though
Christopher McCormack
@cmccormack
Apr 11 2018 18:41
might have something to do with your animations or css activating when the page loads because it's hitting the notfocus or whatever
Mark Kubik
@KUBIX90
Apr 11 2018 18:46
@cmccormack Yeah it seems to be something to do with the keyframe animations
but no idea how to solve it
Christopher McCormack
@cmccormack
Apr 11 2018 18:46
Pick out some CSS one by one and see if you can isolate it
Ken Haduch
@khaduch
Apr 11 2018 18:46
@KUBIX90 - I'm not able to get that effect to happen again - I've tried three different browsers and I only saw it happen once in Opera, no clearing of cache has caused it to happen again.
Mark Kubik
@KUBIX90
Apr 11 2018 18:50
@cmccormack I think I know where its happening, it's what I do to prevent it that I'm not sure about
@khaduch I don't know what to suggest really. Seems to happen just to me, really frustrating
Ken Haduch
@khaduch
Apr 11 2018 18:52
are you running locally or using that link that you posted?
Christopher McCormack
@cmccormack
Apr 11 2018 18:53
@KUBIX90 maybe look into the order of your css, order matters if you have any competing rules
Mark Kubik
@KUBIX90
Apr 11 2018 18:55
@khaduch Well the link is just my site on the web, but I'm running it locally as well and it seems to be OK
tonytrrr
@tonytrrr
Apr 11 2018 18:59
back back back
Ken Haduch
@khaduch
Apr 11 2018 19:08
@tonytrrr - welcome back!?
@KUBIX90 - I couldn't get a handle on what I was seeing when it flashed the modal, but if you can figure out what it's displaying, is it one particular modal or all of them or some other variation?
Mark Kubik
@KUBIX90
Apr 11 2018 19:10
@khaduch Looks like its the Twitch API modal
but there could be others underneath
Ken Haduch
@khaduch
Apr 11 2018 19:12
@KUBIX90 - if you just put a style="display:none" on that one and loaded your page again, would it show another one?
(I'm just making random guesses now...)
Mark Kubik
@KUBIX90
Apr 11 2018 19:13
@khaduch Starting to get somewhere
I used visibility hidden and it seems to have made most of it disappear, but not quite all of it, still showing the modal buttons
NikolaNbgd
@NikolaNbgd
Apr 11 2018 19:33
Hello guys, does anyone know how can I clear all these intervals? http://jsfiddle.net/W9YU5/243/ I want when all divs are shown, after 2s to start again
Ken Haduch
@khaduch
Apr 11 2018 19:37
@NikolaNbgd - setTimeout is a one-time event, so there is nothing to clear as far as the timers.
NikolaNbgd
@NikolaNbgd
Apr 11 2018 19:38
@khaduch so what is your suggestion?
Ken Haduch
@khaduch
Apr 11 2018 19:41
@NikolaNbgd - well, you can make a "master" function that controls them all, and runs after all of the divs are displayed, the clears the visibility and starts the sequence again. Something like that. Or use a different technique like one setInterval timer and set up a control so that every second or two seconds it sets the visibility of the next div, until all are showing, then you can clear the visibility of each div in turn, then set them again, etc.
NikolaNbgd
@NikolaNbgd
Apr 11 2018 19:49
@khaduch yeah, you got the point, but how can I clear four different timeout functions? with one clearTimeout
ehutchllew
@ehutchllew
Apr 11 2018 20:27
@NikolaNbgd You'd need to pass in the ID to each timeout dynamically
Ken Haduch
@khaduch
Apr 11 2018 20:32
@NikolaNbgd - but you don't need to clear the timeout functions - you need to change the visibility of your divs, if you want to start it over again? I could make a jsfiddle to show you what I'd be thinking about doing.
NikolaNbgd
@NikolaNbgd
Apr 11 2018 20:38
@khaduch please do
Ken Haduch
@khaduch
Apr 11 2018 20:40
@NikolaNbgd - see if this works --- https://jsfiddle.net/khaduch/xpvt214o/102422/ - it alternates between making them visible and then hidden, one per second, using a setInterval with a callback.
NikolaNbgd
@NikolaNbgd
Apr 11 2018 20:41
@khaduch can you make it that all divs are hidden after 2s when all of them are shown? and then to start again
Ken Haduch
@khaduch
Apr 11 2018 20:42
sure... give me a couple minutes.
NikolaNbgd
@NikolaNbgd
Apr 11 2018 20:42
ok
Ken Haduch
@khaduch
Apr 11 2018 20:49
@NikolaNbgd - see this one - https://jsfiddle.net/khaduch/0uynhddf/5
sorry - I posted the wrong version @NikolaNbgd
NikolaNbgd
@NikolaNbgd
Apr 11 2018 20:51
yep, I see, nothing happens
Ken Haduch
@khaduch
Apr 11 2018 20:52
try the link again - I edited it to point to version 5... (I forget how to use jsfiddle... :) )
NikolaNbgd
@NikolaNbgd
Apr 11 2018 20:53
yeep, that is absolutely my solution
works like a charm :D
thanks bro!
Ken Haduch
@khaduch
Apr 11 2018 20:57
@NikolaNbgd - well, it was a quick attempt - it might be cleaned up a bit or think of a better way to do it, but if it's close to what you want, great! You're welcome.
aenkirch
@aenkirch
Apr 11 2018 21:23
Hi guys ! Just need help for my portfolio website https://codepen.io/aenkirch/full/rdbVXM/ because I wanted to integrate an imbedded pen on my website but I can't manage to set a custom size for it
So it appear very small, like we can't see the full code or the full website I developed
zootechdrum
@zootechdrum
Apr 11 2018 21:26
hey guys why isnt this working
// Setup
var myStorage = {
  "car": {
    "inside": {
      "glove-box": "maps",
      "passenger seat": "crumbs"
     },
    "outside": {
      "trunk": "jack"
    }
  }
};

// Only change code below this line

var gloveBoxContents = myStorage.car.inside["glove-box"]; // Change this line
Its not passing
Use dot and bracket notation to access myStorage
nevermind i just passed it
Norvin Burrus
@ndburrus
Apr 11 2018 22:01
@zootechdrum nice work! :sparkles:
stefan kurcubic
@stefankurcubic2_twitter
Apr 11 2018 22:07
Hi
What is good way to represent list of json data?
i am thinking tables
but is there something more modern
better?
Christopher McCormack
@cmccormack
Apr 11 2018 22:11
@stefankurcubic2_twitter in the browser?
It really depends on how you want to present the data
stefan kurcubic
@stefankurcubic2_twitter
Apr 11 2018 22:12
yes
not sure how to explain it
but in rows and columns
maybe the best way
i have json with city, country
i'd like to show a list of those
Christopher McCormack
@cmccormack
Apr 11 2018 22:13
Tables are still useful if you don't want columns to reflow at different viewport sizes
stefan kurcubic
@stefankurcubic2_twitter
Apr 11 2018 22:13
what are some other options?
Christopher McCormack
@cmccormack
Apr 11 2018 22:13
But you can also use something like Bootstrap's or Materialize-CSS's Grid layout
stefan kurcubic
@stefankurcubic2_twitter
Apr 11 2018 22:14
oh yea!
that might be good
Brad
@bradtaniguchi
Apr 11 2018 22:14
Another pattern would be to use "groupings", for example a list of things that all have the same country/city
You could nest your groups aswell, think of a tree structure.
Christopher McCormack
@cmccormack
Apr 11 2018 22:14
yeah like do you want a card that contains the data from an object within your list of objects or something?
stefan kurcubic
@stefankurcubic2_twitter
Apr 11 2018 22:14
@bradtaniguchi can u show me example?
Christopher McCormack
@cmccormack
Apr 11 2018 22:15
The FCC API projects have a few examples of pulling JSON data and displaying however you want
Here's my Twitch page (please don't make fun it was a while ago) https://codepen.io/cmccormack/pen/MJZQJR
All data was pulled from their API in JSON format
Brad
@bradtaniguchi
Apr 11 2018 22:16
I usually look to other UI's for inspiration on showing what I want to show. Something like Mongodb's compass has a nice UI to display the data based on the attributes of the objects.
There's also expansion panels, which can be used a number of ways:
Christopher McCormack
@cmccormack
Apr 11 2018 22:17
@bradtaniguchi one day I will actually sit down and read all that
Brad
@bradtaniguchi
Apr 11 2018 22:17
I just use angular-material and dont' do any of it :D
stefan kurcubic
@stefankurcubic2_twitter
Apr 11 2018 22:18
i might hit bootstrap grid
not sure if it fit all my needs
but it will be responsive which is nice
tnx guys for help
Christopher McCormack
@cmccormack
Apr 11 2018 22:19
np
Brad
@bradtaniguchi
Apr 11 2018 22:20
hmmm I want to learn react+redux now for some reason (I blame looking at @cmccormack example)
Christopher McCormack
@cmccormack
Apr 11 2018 22:20
my example didn't have Redux
:)
I did play with the Context API recently, seems easy enough https://codepen.io/cmccormack/pen/mxLEzY
Brad
@bradtaniguchi
Apr 11 2018 22:22
I only throw in redux cuse react seems.... to simple XD
tonytrrr
@tonytrrr
Apr 11 2018 22:23
@khaduch thank you sir!
CamperBot
@camperbot
Apr 11 2018 22:23
tonytrrr sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3869 | @khaduch |http://www.freecodecamp.org/khaduch
Michael S
@Ohshi60
Apr 11 2018 23:00
hi guys, can anybody tell me what i am doing wrong with my bootstrap navbar https://codepen.io/ohshi/pen/vRPPmv
i suspect the usage of ´´´/li´´´
Stephen James
@sjames1958gm
Apr 11 2018 23:03
@Ohshi60 You don't have "" around your two classes in the ul
Michael S
@Ohshi60
Apr 11 2018 23:03
:O embarrasing
Stephen James
@sjames1958gm
Apr 11 2018 23:04
@sjames1958gm :P
Michael S
@Ohshi60
Apr 11 2018 23:05
followup question: can i remove the bulletpoints in the bottom of my contact div or do they always come with the /li tags
Gulsvi
@gulsvi
Apr 11 2018 23:06
@Ohshi60 You can remove the bullet points from an unordered list with the list-style-type property in CSS:
ul {
  list-style-type: none;
}
Michael S
@Ohshi60
Apr 11 2018 23:09
perfect!
Michael S
@Ohshi60
Apr 11 2018 23:58
hi again friends; for the portfolio website challenge i have a use case about presenting thumbnails of my work - my question is how did you generate those thumbnails? Did you just take screenshots or is there a way to generate them?