These are chat archives for FreeCodeCamp/HelpFrontEnd

8th
Feb 2018
Frank Bono
@frankbono
Feb 08 2018 01:41
Hi, can someone help me please. I am working the random quote machine. I can get the quote on screen with a button click but when I try to click the button again, the function won’t run again. Can someone help me. Here’s the code https://codepen.io/Frankbono/pen/YepOrg
abraham anak agung
@padunk
Feb 08 2018 01:47
@frankbono you need to put your random var inside the function and return the random var inside the div element.
Frank Bono
@frankbono
Feb 08 2018 01:48
@padunk Perfect! Thanks man!
CamperBot
@camperbot
Feb 08 2018 01:48
frankbono sends brownie points to @padunk :sparkles: :thumbsup: :sparkles:
:cookie: 430 | @padunk |http://www.freecodecamp.org/padunk
abraham anak agung
@padunk
Feb 08 2018 01:49
@frankbono Does it work?
Frank Bono
@frankbono
Feb 08 2018 01:50
@padunk Yeah, it works perfect. I appreciate your help
abraham anak agung
@padunk
Feb 08 2018 01:50
nice, happy coding :smile:
Fernando
@lestairon
Feb 08 2018 02:05
https://codepen.io/Lestairon/pen/NagONm?editors=0100
Help, i can't reduce cof border :(
abraham anak agung
@padunk
Feb 08 2018 02:12
@lestairon what you mean to reduce cof border? It work just fine
Fernando
@lestairon
Feb 08 2018 02:14
I can click it by just putting the mouse in the icon
abraham anak agung
@padunk
Feb 08 2018 02:19
@lestairon I can click the C or F and it works just fine. but i need to double click it at first. Then you need to change your code.
Fernando
@lestairon
Feb 08 2018 02:20
It's not that
image.png
I can click it by putting the mouse on 1
I just want to be able to click it on 2
Mark Pearyer
@marcusp619
Feb 08 2018 02:26
Can anyone look at my code real quick on codepen for some reason its giving me the wrong geoloc. is that suppose to happen using the fcc weathe api
abraham anak agung
@padunk
Feb 08 2018 02:31
@marcusp619 post your link to your codepen. @lestairon sorry i can't help with that, not good with css.
@lestairon whats the issue?
Amit Patel
@AmitP88
Feb 08 2018 02:34

hey guys, I'm trying to get my tweet button to work on my random quote generator. When I click on generate button, then the tweet button, it shows [Object object] in the tweet textbox in the new tab. Why is it doing this?

https://codepen.io/AmitP88/pen/YepOxg

abraham anak agung
@padunk
Feb 08 2018 02:35
@marcusp619 you need to ask permission to user first by add if (navigator.geolocation)
Mark Pearyer
@marcusp619
Feb 08 2018 02:35
@padunk will try that now
Fernando
@lestairon
Feb 08 2018 02:36
@marcusp619 #cof has so much space to click, i don't like that
abraham anak agung
@padunk
Feb 08 2018 02:37
@AmitP88 because json is an object? try joke = json.setup + " " + json.punchline
Mark Pearyer
@marcusp619
Feb 08 2018 02:37
@lestairon did you try hiding the element until you click button?
Claudio Restifo
@Marmiz
Feb 08 2018 02:38
@AmitP88 because you are passing joke that is an object.
perhaps you want to pass setup and punchline?
Amit Patel
@AmitP88
Feb 08 2018 02:39
@padunk @Marmiz facepalm to self I should've known. that did the trick! thanks guys! :)
CamperBot
@camperbot
Feb 08 2018 02:39
amitp88 sends brownie points to @padunk and @marmiz :sparkles: :thumbsup: :sparkles:
:cookie: 432 | @padunk |http://www.freecodecamp.org/padunk
:star2: 1149 | @marmiz |http://www.freecodecamp.org/marmiz
Amit Patel
@AmitP88
Feb 08 2018 02:40
damn, I don't know why I get tripped up on the simplest stuff lol
abraham anak agung
@padunk
Feb 08 2018 02:40
@AmitP88 you need a break and a :coffee:
Amit Patel
@AmitP88
Feb 08 2018 02:40
@padunk lol for sure :)
Mark Pearyer
@marcusp619
Feb 08 2018 02:41
OMG just notice
i used the same prop in the lat and Lon template literal
Claudio Restifo
@Marmiz
Feb 08 2018 02:45

@lestairon the only things that pops in my mind is to wrap that h3 into a div with a height that you desire (like 160px) as is the font size now.

Then proceed to give some padding to it so that there's a sense of space in it.
And then add inside your h3 with the clickable div, that will look like the same size as of now but with some extra "unclickable" margin on it.

Mark Pearyer
@marcusp619
Feb 08 2018 02:48
he doesnt want the huge gap right??
Anker
@ankerpeet
Feb 08 2018 03:49
I am stuck on my tic tac toe game. I am using an array to keep track of which squares have been chosen, and when the computer chooses, it sometimes doesn't work.
https://codepen.io/ankerpeet/pen/ddOZQm?editors=1111
Ken Haduch
@khaduch
Feb 08 2018 05:23
@ankerpeet - it looks like there is a little bit of confusion in the way you are managing the array of the IDs - you are generating a random number that is the index into the array of locations that should still be available, then you are using the selectedID with .indexOf() which is incorrect - you should just be using that directly to do the splice, and save the value from the array which would be the square that you should put the mark into. I don't know if I explained that clearly enough? Your random number is an index into the array - the value at that location is the place where you should place the mark. Then you should remove the value that is at the index, instead of using .indexOf(selectedId) which is attempting to locate a number within the array that matches the random number.

@ankerpeet - a quick hack of the computer() function made it work a little better, but I cannot pursue it further:

function computer(){
  var selectedId = Math.floor(Math.random() * clicked.length -1);
  console.log(clicked);
  console.log("Selected id = " + selectedId);
  console.log("Comp choice", clicked[selectedId]);
  var compChoice = clicked[selectedId];
  clicked.splice(selectedId, 1);
  console.log("Computer's choice: ", compChoice);    
  $('#' + compChoice).html(isX ? "O" : "X");
  console.log("Array: ", clicked);
}

I hope that helps.

Anker
@ankerpeet
Feb 08 2018 05:33
@khaduch yes that makes perfect sense. Thank you!
CamperBot
@camperbot
Feb 08 2018 05:33
ankerpeet sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3719 | @khaduch |http://www.freecodecamp.org/khaduch
Abhi Indoria
@AIndoria
Feb 08 2018 05:43
Hi, I have a bit of a botched code (I'm just trying to do a rough outline of the portfolio so font sizes/colors are a bit wonky) but I would appreciate if anyone could tell me why my background-video is hugging the right edge and won't budge even with a margin-right property.
in the hindsight it might be completely stupid question but eh
coderNewby
@coderNewby
Feb 08 2018 05:45
thanks @DarrenfJ for ding the git project. looks interesting
CamperBot
@camperbot
Feb 08 2018 05:45
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2381 | @darrenfj |http://www.freecodecamp.org/darrenfj
TonyRednil
@TonyRednil
Feb 08 2018 05:47
Hey guys I'm trying to figure out how to get rid of the margin around my division elements. I'm using the margin css command but it doesn't seem to be working
I'm trying to get rid of all the yellow.
Sweet Coding :)
@SweetCodingInc
Feb 08 2018 06:04
@TonyRednil You have this <div class="container-fluid"> line 3
which applied padding and margin
LydaTech
@lydatech
Feb 08 2018 06:20
@TonyRednil no you have more issues than that. Are you still here?
TonyRednil
@TonyRednil
Feb 08 2018 07:12
@lydatech yeah what issues do I have?
TonyRednil
@TonyRednil
Feb 08 2018 08:45
Would someone please be so kind as to explain what class="container-fluid" does?
Sorin Ruse
@sorinr
Feb 08 2018 08:56
@TonyRednil from the bs docs: "Use .container-fluid for a full width container, spanning the entire width of your viewport."
TonyRednil
@TonyRednil
Feb 08 2018 08:57
@sorinr then why does using that put white margins at the sides of my division elements?
Sorin Ruse
@sorinr
Feb 08 2018 09:01
@TonyRednil better get used to read a lot of documentations in the future. wy not starting with the bootstrap one if you plan to use it. here the link for containers: https://getbootstrap.com/docs/3.3/css/#overview-container
TonyRednil
@TonyRednil
Feb 08 2018 09:09
@sorinr I'm still kinda lost. If it's a column that spreads the whole width of the page that makes me think it shouldn't have any kinds of margins on the sides.
Sorin Ruse
@sorinr
Feb 08 2018 09:17

@TonyRednil here is the default css for container-fluid in BS:

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

try to use the development tools of your browser to see the css applied to each element on page

TonyRednil
@TonyRednil
Feb 08 2018 09:19
@sorinr alright thanks.
CamperBot
@camperbot
Feb 08 2018 09:19
tonyrednil sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1399 | @sorinr |http://www.freecodecamp.org/sorinr
Sorin Ruse
@sorinr
Feb 08 2018 09:20
@TonyRednil np. happy coding
Sudeepto Dutta
@react-native-guy
Feb 08 2018 09:51

Hello Guys, I was using Github's v3 APIs for fetching the users using the api
https://api.github.com/search/users?q=abc&page=1&per_page=10&sort=stars
, where abc is the search term .

Unfortunately, the response of the above API does not get me the name parameter that I wanted to use to list the users with their name. Right now, a very inefficient way of doing it would be to take the url parameter from the response and fire that url to fetch ONLY the name of the user.

But if someone can advise me a better solution, maybe by using v4 GraphQL version, that would be great. I don't know about GraphQL, so maybe if someone can link me some resources, that would be great as well.

Thank You.

Claudio Restifo
@Marmiz
Feb 08 2018 10:00

@react-native-guy a simple

GET /users/:username

will give you a single user information

this will give you my github user info for instance:
https://api.github.com/users/marmiz
Sudeepto Dutta
@react-native-guy
Feb 08 2018 10:03

@Marmiz I am using that api once I click on a user item that I fetched using the api.github.com/search/users?q=abc&page=1&per_page=10&sort=stars API.

My question was, how to fetch name of the user from this api.

@Marmiz I can’t call the /users/:username API every time for say, 10 users, that is not very efficient.
I hope you understood my issue
Claudio Restifo
@Marmiz
Feb 08 2018 10:12

I don't understand your functionality.

You are making a GET request of any user containing a certain string...
So I imagine I can type into an input a string and then I expect to see a list of results.

Do why you need to call it again for 10 users (as you stated?)

Sweet Coding :)
@SweetCodingInc
Feb 08 2018 10:13
@Marmiz He wants the field name to be included in the same API response
which I don't think is possible
Sudeepto Dutta
@react-native-guy
Feb 08 2018 10:13
@SweetCodingInc Correct. name is not in the response
name is in the API /users/:username which I have to call for each user, so if I request 10 users then API calls for fetching the name only
Sweet Coding :)
@SweetCodingInc
Feb 08 2018 10:14
@react-native-guy Right.. Just show the username then?
and when, lets say, you display details, then fetch rest of the data for selected user
Sudeepto Dutta
@react-native-guy
Feb 08 2018 10:15
For now I’m doing that, but wanted to know from you guys , if there is a way around as getting the name shouldn’t be this hard. .
Like whether it is possible by using GraphQL maybe
Sweet Coding :)
@SweetCodingInc
Feb 08 2018 10:15
They do have graphql end point though, you might wanna look into that
and specify only the fields you want included in the response
yeah.. That's what I was thinking about
Sudeepto Dutta
@react-native-guy
Feb 08 2018 10:17

I don’t know anything about GraphQL :worried:

If possible via GraphQL, I would like to fetch only the names of the say first 10 users , then after I click on the user, I will display the rest of their details .

Maybe with GraphQL it is possible, but I have to learn it first to use it

Sweet Coding :)
@SweetCodingInc
Feb 08 2018 10:21
Yes
Markus Kiili
@Masd925
Feb 08 2018 10:22
@react-native-guy You can get names of users and their info on one query.
Sweet Coding :)
@SweetCodingInc
Feb 08 2018 10:22
Sudeepto Dutta
@react-native-guy
Feb 08 2018 10:23
I am going through the Docs right now, maybe GraphQL will solve the problem.
Sweet Coding :)
@SweetCodingInc
Feb 08 2018 10:23
@Masd925 what end point is that?
Markus Kiili
@Masd925
Feb 08 2018 10:24
@SweetCodingInc I just mean GraphQL subqueries.
Sweet Coding :)
@SweetCodingInc
Feb 08 2018 10:24
I see
yeah.. with graphql it should be possible
Claudio Restifo
@Marmiz
Feb 08 2018 10:25
@react-native-guy looks like you still need a User string in the Schema.
so you need to know the username upfront
Sweet Coding :)
@SweetCodingInc
Feb 08 2018 10:26
wouldn't login: abc do it?
Claudio Restifo
@Marmiz
Feb 08 2018 10:26

then yes, you can compose:

query {
    user(login: "marmiz") {
    name
    url
    email
  }
}

will give you those data :)

@SweetCodingInc nope :)
or at least will give you if there's a user with exact login name as abc
Sweet Coding :)
@SweetCodingInc
Feb 08 2018 10:27
login: "%abc%" ? @Marmiz
Claudio Restifo
@Marmiz
Feb 08 2018 10:28
@SweetCodingInc it shouldn't work... otherwise I've wasted so much energy in GraphQL :)
Sweet Coding :)
@SweetCodingInc
Feb 08 2018 10:28
:laughing:
Claudio Restifo
@Marmiz
Feb 08 2018 10:29
Nah but there's a node schema, so you can compose your request starting from node ids all the way down to user
Sweet Coding :)
@SweetCodingInc
Feb 08 2018 10:29
I just started with it yesterday.. Conceptually I understand it (or I think I do), syntax? Need to play with it more
I see
Sudeepto Dutta
@react-native-guy
Feb 08 2018 10:30
@Marmiz So you’re saying I still need to make seperate queries for each user?
Sweet Coding :)
@SweetCodingInc
Feb 08 2018 10:30
apparently, yes
Sudeepto Dutta
@react-native-guy
Feb 08 2018 10:32
Okay 😞
Claudio Restifo
@Marmiz
Feb 08 2018 10:35
@react-native-guy no, that's the beauty of graphQL... it is a schema you define.
There's a search query, in there you can define your response schema with a name included in
abyshukla
@abyshukla
Feb 08 2018 10:37
Hello everyone. Here's my twitch Tv app
https://codepen.io/aby_shukla/full/wygvaX/
Ian Gracia
@iangracia
Feb 08 2018 10:45
Can someone please help me, been stuck with this problem for an hour, cant find a solution
I need section three, four and five to be next to eachother on a row
Ian Gracia
@iangracia
Feb 08 2018 10:51
The sections got names so it's relativly easy to see
only Css and html
Stephen James
@sjames1958gm
Feb 08 2018 11:00
@abyshukla Looks good, although clicking on the image doesn't open the twitch page for the user.
@iangracia I would consider flexbox for this kind of positioning it is much easier to work with.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Ian Gracia
@iangracia
Feb 08 2018 11:04
i fixed it by floating it to the right instead
CamperBot
@camperbot
Feb 08 2018 11:04
sjames1958gm sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
:cookie: 381 | @iangracia |http://www.freecodecamp.org/iangracia
Ian Gracia
@iangracia
Feb 08 2018 11:05
im only allowed to use pure css and html :(
its a test from an employer, i might land a junior dev job if i finish the test today
Aditya
@ezioda004
Feb 08 2018 11:08
@iangracia Flexbox is pure css, you can wrap all those 3 section in a div or section and set display: flex;
CamperBot
@camperbot
Feb 08 2018 11:08
:cookie: 382 | @iangracia |http://www.freecodecamp.org/iangracia
ezioda004 sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
Stephen James
@sjames1958gm
Feb 08 2018 11:09
@iangracia Yes flex box is pure css.
CamperBot
@camperbot
Feb 08 2018 11:09
sjames1958gm sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
api offline
dinesh
@1532j0004kg
Feb 08 2018 11:29
 $.ajax({
     url : "//api.forismatic.com/api/1.0/",
     dataType : 'jsonp',
     data : {
       format:'jsonp',
       lang:'en',
       method : 'getQuote',
     },
     jsonp : 'jsonp',
guys , in this What is the purpose of adding datatype is jsonp and Why we add format , lang , method inside data object .
$.getJSON("https://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=jsonp&lang=en&jsonp=?",
but in this , datatype is json how ?
and jsonp = ? in getjson method.
but in the ajax method jsonp : jsonp how?
can anyone please explain clearly ?
Sweet Coding :)
@SweetCodingInc
Feb 08 2018 11:34
becuase $.getJSON is a wrapper around $.ajax which sets those parameters for you
dinesh
@1532j0004kg
Feb 08 2018 11:34
wrapper means ?
Sweet Coding :)
@SweetCodingInc
Feb 08 2018 11:35
Suppose function Y handles special scenarios that function X supports
dinesh
@1532j0004kg
Feb 08 2018 11:35
ok
Sweet Coding :)
@SweetCodingInc
Feb 08 2018 11:35
In that case the function Y is said to be a wrapper around function X
Because it internally uses function X in a very specific way
$.ajax can be used to fetch multiple types of data from the server
but if you specifically want to get data of type json, then you will end up writing a lot of code that is repeated
so instead, you use $.getJSON which will handle the configuration to fetch json data for you
dinesh
@1532j0004kg
Feb 08 2018 11:38
and jsonp = ? in getjson method.
but in the ajax method jsonp : jsonp how?
Sweet Coding :)
@SweetCodingInc
Feb 08 2018 11:38
that is configuration required by your API
dinesh
@1532j0004kg
Feb 08 2018 11:39
what it will actually do
why we didn'y use ? in ajax
use of jsonp=?
Sweet Coding :)
@SweetCodingInc
Feb 08 2018 11:42
becuase that is what $.getJSON requires to be set.
dinesh
@1532j0004kg
Feb 08 2018 11:44
thanks @SweetCodingInc i will go through the link ...
CamperBot
@camperbot
Feb 08 2018 11:44
1532j0004kg sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
:cookie: 258 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
elad ben aderet
@eladonline
Feb 08 2018 11:44
what is the best way to link a library to your html page ?
CDN or localy ?
whats the diffrent
Sweet Coding :)
@SweetCodingInc
Feb 08 2018 11:45
@eladonline This question can't be answered in an absolute way.
There are two scenarios
1) Public facing website
2) Private website that can be accessed only within the intranet
For public facing websites, it's best to use CDN
as your user base may be distributed across the world
so when you use CDN, the assets will be fetched from a server that is at geographically closer location to the user
elad ben aderet
@eladonline
Feb 08 2018 11:47
@SweetCodingInc
That's make sense
ty
Sweet Coding :)
@SweetCodingInc
Feb 08 2018 11:47
Say your user is in America and your server is hosted in Hong Kong. When user accesses your website, the CDN server will be used that is in America
if you host your files locally, then your files will be delivered across the http and will slow your site down
If it's private site, restricted to the users connected to your network, then hosting locally is best
elad ben aderet
@eladonline
Feb 08 2018 11:48
@SweetCodingInc
i understand really good answer ty
CamperBot
@camperbot
Feb 08 2018 11:48
eladonline sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
:cookie: 259 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
Sweet Coding :)
@SweetCodingInc
Feb 08 2018 11:48
as fetching assets from CDN is overkill in that context
@eladonline :+1:
Sudeepto Dutta
@react-native-guy
Feb 08 2018 12:22

@react-native-guy no, that's the beauty of graphQL... it is a schema you define.
There's a search query, in there you can define your response schema with a name included in

So can I make my own search query with all the user’s name ?

Abdullah-Al-Zubair
@a2-zubair
Feb 08 2018 12:54

Hello guys, How are you doing today? Need a help. I am stuck "Twitch.tv Json API" project. I am using ajax to process the data. I can't process the result of each streamers data. Right now my code show only first streamer data as a result.

Here is my codepen link : Twitch.tv JSON API
Can anybody help to understand what am i doing wrong?

pragya1248
@pragya1248
Feb 08 2018 13:04
Any suggestion to make my landing page more attractive? https://codepen.io/pragyapriya/pen/wygaLm?editors=1100
Abdullah-Al-Zubair
@a2-zubair
Feb 08 2018 13:13
@pragya1248 I think you need to working on your css styling. Use large image base on your div container height.
Stephen James
@sjames1958gm
Feb 08 2018 13:17
@a2-zubair Your URL generator function will only ever return the first URL from the array
Abdullah-Al-Zubair
@a2-zubair
Feb 08 2018 13:19
@sjames1958gm yes, that's the problem i face right now. how can i overcome this, any help?
Stephen James
@sjames1958gm
Feb 08 2018 13:23
@a2-zubair I would move the loops out of your functions. You will need a loop around your $.ajax function to request data for each user
Abdullah-Al-Zubair
@a2-zubair
Feb 08 2018 13:24
@sjames1958gm ok.
Stephen James
@sjames1958gm
Feb 08 2018 13:26
@a2-zubair Something like this pseudo-code:
   streamers.forEach(function(streamer) {
      url = buildUrl(streamer)
      $.ajax(... url ... channelData(streamer, data) 
   }
Abdullah-Al-Zubair
@a2-zubair
Feb 08 2018 13:28
@sjames1958gm ok, let me work on this idea.
Stephen James
@sjames1958gm
Feb 08 2018 13:33
@a2-zubair :+1:
not getting json please help
Matej Bošnjak
@mbosnjak01
Feb 08 2018 14:42
@akkio-97 you are using http protocol
inside your link
try with https, it should work
when you try with http and open browser console, you'll see that error i'm talking about :D đ
Simon Cordova
@gbsimon87
Feb 08 2018 15:05
Good afternoon :)
Matej Bošnjak
@mbosnjak01
Feb 08 2018 15:05
hi
Simon Cordova
@gbsimon87
Feb 08 2018 15:09
Hello @mbosnjak01 - by any chance do you have experience sending XHR post requests?
Matej Bošnjak
@mbosnjak01
Feb 08 2018 15:10
nop. just php post requests :|
Simon Cordova
@gbsimon87
Feb 08 2018 15:10
That may work nonetheless
Matej Bošnjak
@mbosnjak01
Feb 08 2018 15:10
didn't have the chance to work with xhr post requests yet, sorry
well, i can help with php xD
Simon Cordova
@gbsimon87
Feb 08 2018 15:10
I'm trying to send an object with a post request, however one of the values is a variables
Matej Bošnjak
@mbosnjak01
Feb 08 2018 15:11
do you have code to show?
Simon Cordova
@gbsimon87
Feb 08 2018 15:11
yep one sec
  function postRequest() {
    let xhttp = new XMLHttpRequest();
    let URL = "https://stash.qubitproducts.com/stash/v1.1/kv/set/" + trackingId + "/public/" + uv_userId + ":uv_userId"
    console.log(": postRequest()")
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        console.log(this.responseText);
      }
    };
    xhttp.open("POST", URL, true);
    xhttp.setRequestHeader("Content-type", "text/plain");
    xhttp.send('{"uv_userId":"uv_userId", "lastUserResponse":"lastUserResponse", "userOptedOut":"userOptedOut", "lastVisitorDate":"noDate"}');
  }
On the last line, where it calls the send method, I'd like the value for the key 'uv_userId' to be a variable not a string
Stephen James
@sjames1958gm
Feb 08 2018 15:13
@gbsimon87 use a template string
`{"uv_userId":"${uv_userId}", "lastUserResponse":"lastUserResponse", "userOptedOut":"userOptedOut", "lastVisitorDate":"noDate"}`
Simon Cordova
@gbsimon87
Feb 08 2018 15:15
@sjames1958gm so can template strings now be used anywhere?
@sjames1958gm thanks by the way for your answer
CamperBot
@camperbot
Feb 08 2018 15:15
gbsimon87 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8950 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Simon Cordova
@gbsimon87
Feb 08 2018 15:15
and thanks @mbosnjak01 for offering the help as well
Matej Bošnjak
@mbosnjak01
Feb 08 2018 15:15
can't tell, i don't know this one :D
Stephen James
@sjames1958gm
Feb 08 2018 15:16
@gbsimon87 That is a good question. if not template strings then:
'{"uv_userId":"' + uv_userId + '", "lastUserResponse":"lastUserResponse", "userOptedOut":"userOptedOut", "lastVisitorDate":"noDate"}'
@gbsimon87 88.88% of modern browsers support template strings.
https://caniuse.com/#search=template%20literals
Simon Cordova
@gbsimon87
Feb 08 2018 15:17
@sjames1958gm
Sounds good enough for me haha as I don't need any IE9 or lower support
Stephen James
@sjames1958gm
Feb 08 2018 15:18
@gbsimon87 Well it lists IE11 as not supported
Simon Cordova
@gbsimon87
Feb 08 2018 15:18
oh wow just seen that
I'll use concatenation than
Good old IE
Stephen James
@sjames1958gm
Feb 08 2018 15:19
@gbsimon87 You could also use JSON.stringify on an object:
JSON.stringify({
  uv_userId: uv_userId,
  . . .
});
Sweet Coding :)
@SweetCodingInc
Feb 08 2018 15:19
Easier to do like
const data = {
  uv_userId,
  lastUserResponse,
  userOptedOut,
  lastVisitorDate: noDate
}

// and then 

xhttp.send(JSON.stringify(data));
Stephen James
@sjames1958gm
Feb 08 2018 15:20
@SweetCodingInc That assumes they are all variables.
Simon Cordova
@gbsimon87
Feb 08 2018 15:20
Yeah they can't all be variables as I'll be setting some myself with strings and other data types
Does this function make sense to you guys...
function handleJSON () {
    return {
      parse: (str) => {
        try {
          return JSON.parse(str)
        } catch (e) {
          return []
        }
      },
      stringify: (obj) => {
        try {
          return JSON.stringify(obj)
        } catch (e) {
          return ''
        }
      }
    }
  }
Sweet Coding :)
@SweetCodingInc
Feb 08 2018 15:21
@sjames1958gm Yes. It does... Just picked it from the code snippet here
Stephen James
@sjames1958gm
Feb 08 2018 15:50
@gbsimon87 It makes some sense, you would need to call it and then call parse/stringify
handleJSON().parse()
Simon Cordova
@gbsimon87
Feb 08 2018 15:57
Perfect, cheers man :)
Kingsley
@Kingwindie
Feb 08 2018 16:05
can someone tell me why the color wont change
$(document).ready(function() {
  $('h2').click(function(){
    $("h2").css("color", "red");
  });

});

<h2>Hello</h2>
Alexis Salcedo
@alexisss1928
Feb 08 2018 16:08
How can I send a code in that way?
Kingsley
@Kingwindie
Feb 08 2018 16:09
use the backtick button
it's to the left of the number 1 on the keyboard,press it 3 time insert code press it 3 times then ctrl + enter
Alexis Salcedo
@alexisss1928
Feb 08 2018 16:11
Thanks!!!
abraham anak agung
@padunk
Feb 08 2018 16:14
@Kingwindie the color change just fine.
Kingsley
@Kingwindie
Feb 08 2018 16:14
@padunk strange,it doesn't for me
abraham anak agung
@padunk
Feb 08 2018 16:15
@Kingwindie you work in codepen? try to restart or clear cache?
Kingsley
@Kingwindie
Feb 08 2018 16:16
ok,i just tried js fiddle and it works perfectly fine,thanks @padunk
CamperBot
@camperbot
Feb 08 2018 16:16
kingwindie sends brownie points to @padunk :sparkles: :thumbsup: :sparkles:
:cookie: 433 | @padunk |http://www.freecodecamp.org/padunk
Alex Porobe
@Zappy555
Feb 08 2018 16:25
Hello, I need help with my tribute page project: https://codepen.io/Zappy555/pen/xYRjZY/. list does not align properly when responding on mobile.
Matej Bošnjak
@mbosnjak01
Feb 08 2018 16:28
@Zappy555 To get responsive web desing, you should either use Bootstrap framework (or flexbox), or css media queries. Also, I would advise you to avoid inline css and put all styles in .css section (document)
VaseJS
@VaseJS
Feb 08 2018 16:29
@Zappy555 damn. just read your page. that’s messed up!
Matej Bošnjak
@mbosnjak01
Feb 08 2018 16:30
@Zappy555 and how would you like it to align? :D
VaseJS
@VaseJS
Feb 08 2018 16:30
@Zappy555 as too your issues, move on. the project does not call for responsiveness. You have a long journey ahead of you so don’t do extra, just do what was asked and move on.
don’t get caught in the make it better trap. you can go back and do that after you learn more
right now, that is a tall order and unnecessary, even with using bootstrap because in calls for you to do more than needed
Alex Porobe
@Zappy555
Feb 08 2018 16:32
@mbosnjak01, when viewed on mobile, the <ul> list does not respond properly like in this sample project.https://codepen.io/freeCodeCamp/full/NNvBQW
VaseJS
@VaseJS
Feb 08 2018 16:33
how many pages did you create?
Alex Porobe
@Zappy555
Feb 08 2018 16:33
@VaseJS good to hear that, thanks.
CamperBot
@camperbot
Feb 08 2018 16:33
zappy555 sends brownie points to @vasejs :sparkles: :thumbsup: :sparkles:
:cookie: 497 | @vasejs |http://www.freecodecamp.org/vasejs
Matej Bošnjak
@mbosnjak01
Feb 08 2018 16:33
@Zappy555 That other sample project is usingBootstrap framework to get rensponsive design
to be more precise
col-xs-12 class
Alex Porobe
@Zappy555
Feb 08 2018 16:36
@mbosnjak01 ok, guess I would just move on with next project until I learn more of these stuff. Thanks for your help.
CamperBot
@camperbot
Feb 08 2018 16:36
zappy555 sends brownie points to @mbosnjak01 :sparkles: :thumbsup: :sparkles:
:cookie: 228 | @mbosnjak01 |http://www.freecodecamp.org/mbosnjak01
Matej Bošnjak
@mbosnjak01
Feb 08 2018 16:37
@Zappy555 Yes. You'll get to that stuff latter anyway :)
Gulsvi
@gulsvi
Feb 08 2018 16:53
@VaseJS @Zappy555 The goal of the project is to build a tribute page that is functionally identical to the example provided. The example is responsive, your tribute page should also be responsive. It's worth your time to learn how to fix this issue as the next project, the portfolio, is much more complicated.
The reason why your list is 200px over on smaller screens is because of:
li{
  margin: 0px 200px 0px 200px;
}
VaseJS
@VaseJS
Feb 08 2018 16:55
good point...
Gulsvi
@gulsvi
Feb 08 2018 16:55
Your title is over by 200px because of the left padding:
<h2 style="padding-top:25px; padding-left: 210px">Here's a timeline of Ken Saro-Wiwa's life:</h2>
VaseJS
@VaseJS
Feb 08 2018 16:55
i’d have to look at the instructions again
i’d still say move on
after getting so far in the course, it may be assumed that FCC is enough along to even call yourself a front-end dev when they miss out on many fundenmental aspects. but you still have a good point
Gulsvi
@gulsvi
Feb 08 2018 16:57
It's a balance between progress and developing good habits from the start
Alex Porobe
@Zappy555
Feb 08 2018 16:58
@gulsvi , I guess that's the spirit. Didn't want something that seems so little get me stuck though.
Gulsvi
@gulsvi
Feb 08 2018 16:58
The tribute page is basically a picture, text, and a link. Good idea to figure out how to get that working, in my opinion, before moving forward
Raghav Mundra
@Raghav17
Feb 08 2018 16:59
var tdata = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

function getChannelInf(){
  tdata.forEach(function(chanl){
    var url = "https://wind-bow.gomix.me/twitch-api/streams/" + chanl;
    $.getjson(url),function(data){
      if (data.stream === null){
        status = offline;
        $.getjson("https://wind-bow.glitch.me/twitch-api/channels/"+ chanl ,function(chanData){
         var dname= chanData.display_name;
          var logo = chanData.logo;
        });
      }
     else{
       var content = data.channel.status;
      var logo = data.channel.logo;
        var dname = data.channel.display_name;
       }
    }
  });
  $("#twitch").append(content);
  };
$(document).ready(function() {
  getChannelInf();
});
Can any one please tell me what is wrong with my code? I am doing Twitch TV project.
Gulsvi
@gulsvi
Feb 08 2018 17:00
@Raghav17 $.getJSON not $.getjson
Raghav Mundra
@Raghav17
Feb 08 2018 17:01
@gulsvi Still not working, bud.
Gulsvi
@gulsvi
Feb 08 2018 17:01
@Raghav17 Use your debug console (Ctrl+Shift+J) - what error do you get?
Raghav Mundra
@Raghav17
Feb 08 2018 17:02
"Failed to load https://wind-bow.gomix.me/twitch-api/streams/RobotCaleb: Redirect from 'https://wind-bow.gomix.me/twitch-api/streams/RobotCaleb' to 'https://wind-bow.glitch.me/twitch-api/streams/RobotCaleb' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access."
Gulsvi
@gulsvi
Feb 08 2018 17:03
Use this URL instead: wind-bow.glitch.meof the gomix.me
Then you can move to the next error with content out of scope
function myFunction() {
  var data = "hello world";
}

myFunction();
console.log(data); // undefined because data is only defined inside myFunction()
Raghav Mundra
@Raghav17
Feb 08 2018 17:05
Ohh, SHould I declare "Content" at the start of JS?
Now it is showing these errors
jQuery.Deferred exception: content is not defined
(anonymous) @ console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js:1
jquery.min.js:2 Uncaught ReferenceError: content is not defined
bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
at bootstrap.min.js:6
bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery
at bootstrap.min.js:6
By the way, I did not know about the "Ctrl+SHift+J". It seems very helpful. :)
Gulsvi
@gulsvi
Feb 08 2018 17:13
@Raghav17 content needs to get added inside your getJSON function - getJSON is asynchronous, so variables you define need to be used inside the getJSON callback function
var content;

$.getJSON(url, function(data) {
  content = data.someProperty;
});

console.log(content) // undefined because getJSON is asynchronous - this code runs before getJSON visits the URL and gets the data
Raghav Mundra
@Raghav17
Feb 08 2018 17:17
@gulsvi Ohh, But I dont think that I can add it in my getJSON because of my code structure. Is their any way around?
Gulsvi
@gulsvi
Feb 08 2018 17:18
@Raghav17 Restructure your code ;) or write the HTML directly to the page in each getJSON call
Raghav Mundra
@Raghav17
Feb 08 2018 17:20
@gulsvi Yeah, that's a good advice. Thanks buddy. :)
CamperBot
@camperbot
Feb 08 2018 17:20
raghav17 sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2594 | @gulsvi |http://www.freecodecamp.org/gulsvi
Gulsvi
@gulsvi
Feb 08 2018 17:21
@Raghav17 Good luck - this project tries to teach how to handle asynchronous data, an important concept
Samuel
@emmasamuel
Feb 08 2018 17:58
Please I need help. Is there any way I can use any other text-editor like atom.io or bracket.io for my second project. Using the free version of codepen.oi is hard and frustrating. It was so hard for me to finish my tribute page using codepen.io. please I need suggestions
cjlynch12
@cjlynch12
Feb 08 2018 17:59
@emmasamuel yes. You can use any text editor you'd like.
If you use one I'd suggest hosting on glitch.com, or uploading back to codepen after writing your code.
Gulsvi
@gulsvi
Feb 08 2018 17:59

@emmasamuel From https://about.freecodecamp.org/:

Do I have to use CodePen for the front end projects?

As long as your code is publicly viewable somewhere on the internet, and you have a live demo, you can use whatever tools you want.

We're happy to help you figure out codepen here though. If you can't figure out codepen, it's going to be hard to figure out JavaScript :)
Samuel
@emmasamuel
Feb 08 2018 18:01
Please explain
Eric Weiss
@eweiss17
Feb 08 2018 18:01
what is hard about using codepen
Aditya
@ezioda004
Feb 08 2018 18:01
@emmasamuel I think the most people (including me) make the project in local environment and then upload it to codepen.
Stephen James
@sjames1958gm
Feb 08 2018 18:02
@emmasamuel Using the live server in something like vscode with syntax highlighting and all those features is fine.
You need to make the project available on a public URL which is why codepen is suggested.
Samuel
@emmasamuel
Feb 08 2018 18:02
If I should upload it back to codepen I will lose the images on it. As a free user I can't upload images
Eric Weiss
@eweiss17
Feb 08 2018 18:03
host your images on a hosting site and then its not problem
Stephen James
@sjames1958gm
Feb 08 2018 18:03
@gulsvi :+1:
Samuel
@emmasamuel
Feb 08 2018 18:03
I am lost. I don't understand
Jake
@NeelDVirus
Feb 08 2018 18:04
There is some strange behaviour hapenning with position:absolute (The base element is set toposition: relative). Sass is being used as a css preprocessor.
Is there anyone up for help?
Eric Weiss
@eweiss17
Feb 08 2018 18:05
you upload them somewhere else and just use src="url"
Gulsvi
@gulsvi
Feb 08 2018 18:05
@emmasamuel Visit: http://postimages.org/, upload the images from your desktop to there and you will get a URL. You can use that URL for you <img src="
Samuel
@emmasamuel
Feb 08 2018 18:07
@gulsvi Thanks. That was what I did with my tribute page. But I can't edit images, I have to like drop it the way it is which is very hard.
CamperBot
@camperbot
Feb 08 2018 18:07
emmasamuel sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2595 | @gulsvi |http://www.freecodecamp.org/gulsvi
Gulsvi
@gulsvi
Feb 08 2018 18:08
@emmasamuel Edit the image on your desktop before uploading it to postimages.org
It's important to learn this stuff - web developers don't host all their web pages on their desktop computer, so you'll need to learn how to move from your desktop to a server without breaking your code
Samuel
@emmasamuel
Feb 08 2018 18:10
okay. Great. What of the viewing sizes. How do I make it bigger to help me view.
okay
Gulsvi
@gulsvi
Feb 08 2018 18:11
Control the size of your images with CSS - but you don't want to make an image bigger than it's native resolution. You'll need to find a bigger image instead.
Google Images has tools to search for images and their size, color, etc
Samuel
@emmasamuel
Feb 08 2018 18:14
Please I have on final question to ask @gulsvi . When making it responsive using bootstrap do I have to use all the classes for mobile phone, tab and desktop screen size?
Gulsvi
@gulsvi
Feb 08 2018 18:15
@emmasamuel Only if you want it to have a specific size on each of those devices
For example, if you want it 100% wide on desktop, 75% wide on tablet, 50% wide on mobile. If you just want it 100% wide everywhere, then no need for all those classes
Eric Weiss
@eweiss17
Feb 08 2018 18:17
if you check out how it looks in mobile, it will be obvious if those changes are needed
Abhishek Kumar Pandey
@abhishekpandeykr
Feb 08 2018 18:20
class CreateMethod extends Component{

    constructor(props) {
        super(props);
      }

    addField(event) {
        console.log('checking',event);
    }
    submit(values){
      let owner = {
        "id": 1,
        "personClass": "EMP",
        "identityNumber": "11001"
      }
      values.owner = owner;
      values.linkedPhases =[]
      values.whoColumns = {};
      if(this.props){
      this.props.pMethodCreate(values);
      }
    }

    clear(){
        console.log('clearing the fields')
    }

    render(){
        // const {submit} = this.props
        console.log('the props are', this.props)
      return(
         <div className="users">
            <SearchSection
                options = {searbarInputs}
                onSubmit={this.submit}
                onClear={this.clear}
            />
            <ValueTable
                column2 = 'Method Details'
                column3 = 'Description'
                column1 = 'Seq No'
                option = { methodDesList }
                label = "Roles"
            />
                <SccButton />
            </div>
      )
   }
}

function mapDispatchToProps(dispatch){
    return bindActionCreators({ pMethodCreate }, dispatch)
}

function mapStateToProps(state){
    return {state}
}

export default connect(mapStateToProps, mapDispatchToProps)(CreateMethod)
I am getting can not read props of undefined for above code
Samuel
@emmasamuel
Feb 08 2018 18:20
Thanks so much @eweiss17 @gulsvi
CamperBot
@camperbot
Feb 08 2018 18:20
emmasamuel sends brownie points to @eweiss17 and @gulsvi :sparkles: :thumbsup: :sparkles:
api offline
:cookie: 607 | @eweiss17 |http://www.freecodecamp.org/eweiss17
krckyboy
@krckyboy
Feb 08 2018 19:00

Guys, I have two columns here, each taking 50% of the container. At some point, I want left one to take 100%, and also the right one to take 100%, meaning each will be in a different row. How can I achieve that with Flexbox? It's my first paid assignment and I really don't have the time.

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

utuniyal12
@utuniyal12
Feb 08 2018 19:05
the image spans out of the thumbnail and doesnt resize to the size of thumbnail
using bootstrap
im having trouble resizing image using thumbnail
cjlynch12
@cjlynch12
Feb 08 2018 19:08
@krckyboy can you clarify? are you trying to change the % based on window size? or just changing them to 100% always?
krckyboy
@krckyboy
Feb 08 2018 19:08
@cjlynch12 Not always, just when the space gets tight, so when the screen is smaller, on smaller devices.
I don't get why doesn't background image show up when I do that.
cjlynch12
@cjlynch12
Feb 08 2018 19:12
I think that's what you are looking for
krckyboy
@krckyboy
Feb 08 2018 19:12
@cjlynch12 Thank you. I will check it out!
CamperBot
@camperbot
Feb 08 2018 19:12
krckyboy sends brownie points to @cjlynch12 :sparkles: :thumbsup: :sparkles:
:cookie: 420 | @cjlynch12 |http://www.freecodecamp.org/cjlynch12
Gulsvi
@gulsvi
Feb 08 2018 19:12
@krckyboy
.flexContainer {
  display: flex; /* Magic begins */
  flex-wrap: wrap; /* Allow multiple lines */
}

.manjaStrana,
.vecaStrana {
  flex: 1 300px; /* Initial width of 600px/2 Grow to fill remaining space */
  min-width: 0; /* No minimal width */
}
krckyboy
@krckyboy
Feb 08 2018 19:14
@gulsvi Thank you. :)
CamperBot
@camperbot
Feb 08 2018 19:14
krckyboy sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2596 | @gulsvi |http://www.freecodecamp.org/gulsvi
Gulsvi
@gulsvi
Feb 08 2018 19:18
@krckyboy Happy to help - I'll PM you my paypal to donate a portion of your paycheck when you finish :p
krckyboy
@krckyboy
Feb 08 2018 19:19
@gulsvi Oh, if only you knew how much I'm getting paid... :D
Razvan Jackson
@RazvanJackson
Feb 08 2018 19:33
Anyone here ON who can help me with design?
Jake
@NeelDVirus
Feb 08 2018 19:45
@RazvanJackson may be tomorrow. PM me the context if that's convenient
Muhammad Anis Ur Rahman
@MARahman49
Feb 08 2018 19:59
anybody?
plugged in not charging issue?>
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 08 2018 21:09
@RazvanJackson Im terrible at deigning my own but i think i'm a good critic lol let's see?
Razvan Jackson
@RazvanJackson
Feb 08 2018 21:09
@MuhammedKarim I don't want critic without help :laughing:
@MuhammedKarim At least for this one
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 08 2018 21:10
Sure i can try to help with a bit of CSS but I'm no expert! @RazvanJackson
Matej Bošnjak
@mbosnjak01
Feb 08 2018 21:45
@RazvanJackson Just ask question followed by your code if possible, somebody will eventually answer.
Kaz Baig
@kbaig
Feb 08 2018 21:52
Any recommendations on how to animate React mounting
Thomas Ingalls
@thomasingalls
Feb 08 2018 21:53
@kbaig Are you asking how to make the page display an animation while the user is waiting for react to load and mount?
Kaz Baig
@kbaig
Feb 08 2018 21:54
Nah, I mean slidein animations as the components mount @thomasingalls
Not loaders
Thomas Ingalls
@thomasingalls
Feb 08 2018 21:54
components will have to mount before they are animated, can't do much displaying with an unmounted component
to that end, though, there's a few libs out there: eg. chenglou/react-motion
you could do css-only, too, i think
Tiago Correia
@tiagocorreiaalmeida
Feb 08 2018 22:29
hey all @thomasingalls Im quite interested in understand how does page loads with react and should be handled if you can give me a few tips :)
works*
Mark Kubik
@KUBIX90
Feb 08 2018 22:47
let requestAPI = new XMLHttpRequest();
let URL = "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1";

let quoteBTN = document.getElementById("quote-btn");

quoteBTN.addEventListener("click", function(){
    requestAPI.open("GET", URL);
    requestAPI.onload = function(){
        let data = JSON.parse(requestAPI.responseText);
        generateQuote(data);
    };
    requestAPI.send();
});

function generateQuote(data){
    document.getElementById("quote-author").innerHTML = data.title;
    document.getElementById("quote-content").innerHTML = data.content;
}
Hi Can anyone help with why the generate function is coming back with undefined values? Thanks
Do i need to define the data globally?
Stephen James
@sjames1958gm
Feb 08 2018 22:52
@KUBIX90 I have you tried console.log in the onload function to see what requestAPI.responseText is?
@KUBIX90 Are you seeing any errors in the devtools console?
Mark Kubik
@KUBIX90
Feb 08 2018 22:54
@sjames1958gm If I console.log in the scope where I have called the function I get back the data correctly in JSON format
Stephen James
@sjames1958gm
Feb 08 2018 22:54
@KUBIX90 So right before the call to generateQuote? console.log(data) looks correct?
Mark Kubik
@KUBIX90
Feb 08 2018 22:57
Nevermind, just got it working!
Stephen James
@sjames1958gm
Feb 08 2018 22:57
@KUBIX90 :+1:
Mark Kubik
@KUBIX90
Feb 08 2018 22:58
I was calling it fine, it was just navigating the JSON data i got wrong
Quick question actually, when I did the project in jQuery I did cache flase at the end so it would generate random quotes on click? is there a similar method used in vanilla JS?
used cache false
Stephen James
@sjames1958gm
Feb 08 2018 23:05
@KUBIX90 requestAPI.setRequestHeader('Cache-Control', 'no-cache'); I have seen this suggested
Alex Porobe
@Zappy555
Feb 08 2018 23:06
So I had to go back and work on my tribute page which was not responding properly on mobile. Everything works fine now and it feels really awesome to have fixed this. Check out the redesign: https://codepen.io/Zappy555/pen/xYRjZY .
big ups to @mbosnjak01, @VaseJS and @Gulsvi for the encouragement to cultivate a good habit.
VaseJS
@VaseJS
Feb 08 2018 23:08
:D
Thomas Ingalls
@thomasingalls
Feb 08 2018 23:13
@KUBIX90 the cache=false option adds a new parameter to your query string in jquery &_=3928030943980 where the numbers are a nonce based on the current time, i believe. this is done because legacy browsers (read: ie11 and older) don't reliably recognize other, better cache-busting techniques
you can add a new param based on current time yourself in vanillajs, without asking query to do it for you.
@tiagocorreiaalmeida My go-to technique is to include the page loading animation directly in the html of the page I send from the server, including all js and css required, in script and style tags. That way, it's available immediately for the browser to render. I usually put the animation in the div where I mount my react component, so I don't have to do any manual cleanup of the animation.
Mark Kubik
@KUBIX90
Feb 08 2018 23:18
@thomasingalls I found the below which works but looks really hacky, is there a betetr way?
((/\?/).test(URL) ? "&" : "?") + (new Date()).getTime()
Thomas Ingalls
@thomasingalls
Feb 08 2018 23:19
thing 1 - confirm that new Date().getTime() is available in ie11 -- that's the whole reason for using this technique
caniuse.com
thing 2 - yeah, regex on urls is ill advised
dig into the window.location object, see if you can find what you need there
oh hold on
you're probably in control of the url you're starting with
that kind of changes the equation - if you have certainty over whether there will be a malformed url passed into your script, regex is ok
as in, if you are certain your url will not be passed a malformed url
Mark Kubik
@KUBIX90
Feb 08 2018 23:23
Yes the URL passes fine, the problem I'm having is that the same quote keeps coming up all the time
the above works and I'll stick with it if need be, was just hoping for something a bit more readable maybe
I'd also be lying if i said I fully understood what the above meant
Thomas Ingalls
@thomasingalls
Feb 08 2018 23:26
oh yo
i just found your code
consider building the xhr object inside the callback
of the onclick
Mark Kubik
@KUBIX90
Feb 08 2018 23:31
let requestAPI = new XMLHttpRequest();
let URL = "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1";

let quoteBTN = document.getElementById("quote-btn");


quoteBTN.addEventListener("click", function(){
    let timeStamp = ((/\?/).test(URL) ? "&" : "?") + (new Date()).getTime();

    requestAPI.open("GET", URL + timeStamp);
    requestAPI.onload = function(){
        let data = JSON.parse(requestAPI.responseText);
        generateQuote(data);
        console.log(timeStamp);
    };
    requestAPI.send();
});

function generateQuote(data){

    console.log(data[0].title);
    document.getElementById("quote-author").innerHTML = data[0].title;
    document.getElementById("quote-content").innerHTML = data[0].content;
}
Like that?
Thomas Ingalls
@thomasingalls
Feb 08 2018 23:33
hah, feel free to ignore that last statement
my bad
Mark Kubik
@KUBIX90
Feb 08 2018 23:34
No worries!
tpk
@cstpk
Feb 08 2018 23:45
Hi everyone!
Stephen James
@sjames1958gm
Feb 08 2018 23:52
@csnat hello
@KUBIX90 Since you know that your URL is preloaded with parameters the regex is really not needed in this case