Does anyone know how to make CSS timelapses?
@HTMLNoob what is CSS timelapses?
hey guys so @moT01 helped me out with this fancy piece of code but i have no idea what to do with like do i add a class or what, oh and by the way i am using it to modify the output from my wikipedia viewer.
``` for(var i=0; i<info[1].length; i++) {
$("#output").append('<div>'+info[1][i]+'</div><div>'+info[2][i]+'</div><br><br>');
}
$("#output").append('<div>'+info[1][i]+'</div><div>'+info[2][i]+'</div><br><br>');
}
for(var i=0; i<info[1].length; i++) {
$("#output").append('<div>'+info[1][i]+'</div><div>'+info[2][i]+'</div><br><br>');
}
that was the code piece
and here is the pen https://codepen.io/ismailhozain/pen/OjvzaZ?editors=0010
@ismailhozain
for(var i=0; i<info[1].length; i++) this is to loop through the values of info[1]
ok i got that but what do i do with it
or in other wordsi have no clue how to manipulate it for it to work for me
$("#output").append('<div>'+info[1][i]+'</div><div>'+info[2][i]+'</div><br><br>'); this is to insert the values inside info[1] into some html tags (to display on the page), and append is to place that content after each other inside the div $output
@ismailhozain did you do the random quote machine?
yes
here it is...
the concept is the same
random quote machine only display 1 value at a time
wiki viewer display multiple values
freeCodeCamp Wiki:
:point_right: The freeCodeCamp wiki can be found on our forum.Please follow the link and search there.
You put it here, starting on line 8 @ismailhozain
$.ajax({
url: url,
success: function(info) {
console.log(searchInput);
console.log(info);
for(var i=0; i<info[1].length; i++) {
$("#output").append('<div>'+info[1][i]+'</div><div>'+info[2][i]+'</div><br><br>');
}
}
});//ajax
});//on click
});//end doc ready
copy and past this over everything from line 8 and down
that is where i have it
not on the pen link you shared
I did that
oh whoops im sorry i thought i added it apparently it did not save
it separated your results although, they are all still one link, but that's something else entirely.
i am confused
@ismailhozain what is confusing?
well it is really the fact that they are one big piece of info but at the same time they are separate so i only know how to get to them as a whole
@ismailhozain you get each piece by using the loop
The url needs to be added to, the loop separates them, but they are links to nowhere. Give me a min
so each piece is like x in the following right ?
for(var x=0; x<info[1].length; x++) {
$("#output").append('<div>'+info[1][x]+'</div><div>'+info[2][x]+'</div><br><br>');
} @longnt80
Is anyone familiar with the syntax on the left-hand side: const {error, value} = Joi.validate({ a: 'a string' }, schema);
Anyone know if this is an ES6 syntax thing? I'm not sure if that, or just a Joi library thing...
@ismailhozain
info[1] should be an array
ok let me try something and i will get back to you guys
@ismailhozain did you take a look at the result of your API call?
i looked at it in my console
which console?
the codepen's console or the browser's ?
browser -chrome
ok, you can see it is an array with 3 inner arrays
ok
the first array is the list of the related terms
oh!
the second array is the list of the description of corresponding terms from the first array
ok
so
info[1] access the related terms list array
ok
and info[2] access the description list array
ok
and the variable
i in the loop will loop through each item in those two arrays
wait what about the third array
?
you can click the arrow and see the content of it
it contains the link to each wiki page of each item
oh i never really noticed that it was arranged as so
yeah, you should take a close look at the API result first in order to know which value to get from it
ok
you probably explained it better than anyone else
i THINK i got this but let me try it before i am sure.
@ismailhozain just play around and console log anything that you don't understand
ok thanks for the explanation
np
it alright i got the rest thank you
k
Do you need that pen still or can I delete it?
@ismailhozain
can you wait like 2 minutes? after that you can
i appreciate your help
@just1witness
@just1witness why
for(var j=0; j<url[1].length; j++)
sure, no prob, you can fork it too, and keep it as long as you need. @ismailhozain
I did it, didn't need it, and forgot to delete it
brain fart, lol
@longnt80
alright im done with it
cool
as @longnt80 pointed out you can delete the j loop, not needed. @ismailhozain
already did
cool
@ismailhozain the problem right now is you have to click the search icon to open the input, but the API is also get called when you click the icon
im thinking this might work
info[3][i]
Maybe, I didn't see the api tbh. I just cycled a little until I got what I wanted, lol
and it just did!
nice!
thanks for you guys' help @just1witness @longnt80
ismailhozain sends brownie points to @just1witness and @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 549 | @longnt80 |http://www.freecodecamp.com/longnt80
:cookie: 336 | @just1witness |http://www.freecodecamp.com/just1witness
My pleasure
on to twitch.tv
yippy!
Hi every one! I am at "Advanced Front End Development Projects", If someone is also at this point or near we can join and do rest using pair programming concept, So that we could learn better from each others abilities as well. I am waiting for someone's reply.
How would I make a sound file play on an event in JS
@TheTRUEHoohah https://stackoverflow.com/questions/9419263/playing-audio-with-javascript this might help you
Good evening ladies and gents. I have a silly problem. How can I extract font icons from a web page? what tools should I use?
Got it Thanks
hey guys can anyone tell my why my code doesnt return my else if statement?
function convertHTML(str) {
return str.replace(/[^\w\s]/gi, function(){
if (str.indexOf('&')){
return '&';
} else if (str.indexOf('<')){
return '<';
}
});
}
convertHTML("Hamburgers < Pizza < Tacos”);
Does your test return a boolean value?
nvm my last question lol got it work but now this is my concern
function convertHTML(str) {
return str.replace(/[^\w\s]/gi, function(){
if (str.indexOf('&') != -1){
return '&';
} else if (str.indexOf('<')!= -1){
return '<';
} else if (str.indexOf('>')!= -1){
return '>';
} else if (str.indexOf('"')!= -1){
return '"';
} else if (str.indexOf("'")!= -1){
return ''';
}
});
}
convertHTML("<>”); I dont understand why this . ”<>” does not pass the test, when those characters passed other test they were in.
these two passed "Hamburgers < Pizza < Tacos” & "Sixty > twelve”
it returns this <<
so when I switch it around like this
function convertHTML(str) {
return str.replace(/[^\w\s]/g, function(){
if (str.indexOf('&') != -1){
return '&';
} else if (str.indexOf('>')!= -1){
return '>';
} else if (str.indexOf('<')!= -1){
return '<';
} else if (str.indexOf('"')!= -1){
return '"';
} else if (str.indexOf("'")!= -1){
return ''';
}
});
}
convertHTML("<>”);it now returns this >> ?? whats going on lol
Oh they both return a value different than -1 so whichever comes first will return true
all these callbacks pass the test, except the one in my code
convertHTML("Dolce & Gabbana”)
convertHTML("Hamburgers < Pizza < Tacos”)
convertHTML("Sixty > twelve”)
convertHTML('Stuff in "quotation marks”')
convertHTML("Shindler's List")
convertHTML("Dolce & Gabbana”)
convertHTML("Hamburgers < Pizza < Tacos”)
convertHTML("Sixty > twelve”)
convertHTML('Stuff in "quotation marks”')
convertHTML("Shindler's List")
and will not go further
@X140hu4 but how come they pass the test in the other callbacks they are have value greater than -1?
they work well until i call them next to each other
try convertHTML("Hamburgers < Pizza > Tacos”)
@X140hu4 I see, same problem lol how can I fix it?
add a && or || ?
hmmm maybe not lol
@X140hu4 nvm bro, got it to work but thanks for the time and tips!
rafaelmonroy sends brownie points to @x140hu4 :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @x140hu4 |http://www.freecodecamp.com/x140hu4
sorry I am busy doing other things haha how did you do?
I'm doing my FCC certification with a friend designer.
She takes care of the UX / UI, and i code.
We are both doing it to improve our skills in our fields, so any constructive feedback we ll be appreciated from us :)
Here's our wikipedia viewer
https://koop4.github.io/wikipediaViewer/
anyone using lite-server with node?
Hello guys . Should developers Stop Supporting IE10, IE9 and IE8 ?
@lydatech yeah i am using it
@MRamin3482 how do you stop it? CTRL-C doest stop the monitoring
@mradil16 Depends on the product and the field. If you for example make a site that advertises or sells something, then it must work also with grannys old IE. Many people don't understand the concepts of a computer, computer screen, keyboard, operating system, browser etc. So just telling the customer to update his/hers browser doesn't work.
There are also some large companies where IE is the only browser that employers can use. For security reasons they cannot install any programs to the computers.
@Masd925 how to deal with old browsers . stylesheets don't work properly . in ie9 javascript doesn't work ...
@mradil16 Old IE's have differences on css, html and javascript too. People make IE specific stylesheets, html, and javascript code that handles IE. Many libraries like jQuery take care of some of those problems on JS part. I think JS does work with IE9.
@mradil16 IE9 has full support for ES5 JS and HTML5 to my knowledge.
For older IE's, you need to use older JS and older html. Some html shims take care of some problems.
hello
any feedback? https://codepen.io/Koop4/pen/NaKNGp
@koop4 i would give more top space to the footer
Is there a better way in React to render a string containing HTML to the document other than dangerouslySetInnerHTML? I got a string containing parsed markdown html in state and trying to output it through props in another component.
Any of you know how i can add a space between the scrollbar and the element it's in?
You can make a margin class for the nested element
What's a simple way to display a description of a project (containing h1 h3 and p) with a side image?
@just1witness unfortunatelly i can't, the nested element is a pdf viewer which can't be manipulated
@Morched23MJ i don't understand what you mean by description of a project?
In a portfolio
I want to show my projects
I just need a good layout
tried to use grid, etc ..
@borisyordanov
@Morched23MJ maybe h1 on top, under that the image, followed by h3 and p? You should do wireframe/mocks before you start making the page. It helps clear things like this. Check out a website you like and see if they have solutions to similar problems
Alright, thank you, @borisyordanov
morched23mj sends brownie points to @borisyordanov :sparkles: :thumbsup: :sparkles:
:cookie: 361 | @borisyordanov |http://www.freecodecamp.com/borisyordanov
hey hows it going guys
@OrangeKulture hey
whats cracking tom .. all good?
yup
awesome stuff
calm and sunny here in minnesota, no hurricanes in the area
oh that's good .. yeah i hear florida is having a rought time
rough even
what are you working on?
i was doing a video portal hooked up to mongo DB .. so you can login, see available videos, rate each video once if you want .. etc
now im finally moving on to a professional portfolio in angular and see if I can get myself a full time job
how about u?
Hey everyone. I'm having issues with positioning my paragragh content after the header. Would anyone be able to assist? https://codepen.io/trev-of-ev/pen/VzNgzM?editors=1010
@OrangeKulture not working on my portfolio
(being lazy)
@trev-of-ev you can't link to pics on your computer
Hey, all, I’m working on the Wikipedia viewer and I’m trying to understand the API. Is this could sufficient to retrieve the object…
$.getJSON ("https://en.wikipedia.org/w/api.php?action=query&format=json&prop=&list=search&srsearch=achilles", function (json) {
$(“#tester").html("SUCCESS");
});I’m assuming not because the #tester element isn’t changing.
The API link works, but I’m trying to understand what I’m missing
did you add jquery?
did you go to that url and see if theres something there?
Hi, Tom. Thanks for the response.
The url works and something is there
console.log(json) give anything?
Yes. I got some errors.
jQuery is loaded
@trev-of-ev remove
position: absolute on the header
is it on codepen?
Yeah
sounds like bootstrap isn't finding jquery, maybe is bootstrap added before jquery?
XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?action=query&format=json&prop=&list=search&srsearch=achilles. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not al
lowed access.
Yes, I fixed that part.
try adding &callback=? to the end of the url
…the thing you mentioned about bootstrap
Bingo
Why is that necessary?
Trying to search through Wiki API about it, but nothing is coming up
@moT01 You rock! Thank you
trev-of-ev sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 849 | @mot01 |http://www.freecodecamp.com/mot01
Well…something is coming up, but I don’t know which results are relevant
not exactly sure but, ...
…not sure how sure where the callback aspect is in the API sandbox
“The ? on the end of the URL tells jQuery that it’s dealing with a JSONP request instead of JSON. jQuery then automatically registers the callback function which it calls when the request retruns.”
Wow.
Just saw it after I said it
Where did yu pull that from?
google search got me to here https://www.quora.com/What-does-callback-mean-in-a-URI-when-making-a-call-to-an-API-using-AJAX
sitepoint?
Gotcha!
Thanks, @moT01 !
imperial-isms sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 850 | @mot01 |http://www.freecodecamp.com/mot01
@trev-of-ev not sure if its what u want but try change in css
position: absolute to position: relative; in the header class
Hello everyone.. I'm working on my Portfolio Website and need some ideas.. Please advice where I can look at some great Portfolio design ideas? Thanks in advance
I bookmarked this, looks really great http://rstumbaugh.me/
Hey everyone, I'm working on the twitch project and am stuck. Does anyone know why this snippet to get get offline users doesn't work? I'm trying to use to $.getJSON calls to do this. I use the first call to check if the user is online. The second, I have use another page path to get that user's display name. function getOfflineList(){
//FOUR LOOP TO CYCLE THROUGH ARRAY OF USERS
for (var u = 0; u < usernames.length; u++) {
streamUrl = "https://wind-bow.glitch.me/twitch-api/streams/" + usernames[u] + "/?callback=?";
//GET JSON TO CHECK IF OFFLINE
$.getJSON(streamUrl, function(data1){
if (data1.stream===null) {
userUrl = "https://wind-bow.glitch.me/twitch-api/channels/" + usernames[u] + "/?callback=?";
//IF NULL GET DISPLAY NAME FROM ENDPOINT USERS
$.getJSON(userUrl, function(json){
console.log(json.display_name);
});
}
});
}
}
getOfflineList();
whats the problem? @janelledement
@moT01 I'm getting 'undefined' back from the display name in console instead the the actual display name
where does it stop working
console.log some other things
the second JSON call
console.log(streamUrl); before your .getJSON
@janelledement Async functions inside of for loops are problematic, use a forEach() loop instead, or as a quick fix, just replace
var with let in your for loop.
function getOfflineList() {
//FOUR LOOP TO CYCLE THROUGH ARRAY OF USERS
usernames.forEach(function(user, u) { // or for (let u = 0; u < usernames.length; u++) {
streamUrl = "https://wind-bow.glitch.me/twitch-api/streams/" + usernames[u] + "/?callback=?";
//GET JSON TO CHECK IF OFFLINE
$.getJSON(streamUrl, function(data1) {
if (data1.stream === null) {
userUrl = "https://wind-bow.glitch.me/twitch-api/channels/" + usernames[u] + "/?callback=?";
//IF NULL GET DISPLAY NAME FROM ENDPOINT USERS
$.getJSON(userUrl, function(json) {
console.log(json.display_name);
});
}
});
}) // end forEach(), remove closing parenthesis if using for loop instead
}
Ok @piteto Thanks! I'll try that
:cookie: 88 | @piteto |http://www.freecodecamp.com/piteto
janelledement sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
i was workin my way up to that
@moT01 I did console.log the stream page path and that was working great. Just when I got to the second call
@moT01 Thanks Tom
janelledement sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 851 | @mot01 |http://www.freecodecamp.com/mot01
did it show ...
url
url
url
undefined
undefined...
@moT01 I started out by logging out the first call. I got null five times and then undefined five times
undefined - being the json.displayName
yes
i was trying to show that your for loop ran all the way through before you got a response
ooh i see
hey guys, after being stuck on this problem for the past two days, I need some help. I'm working on this 3 match game, and I'm trying to render my images as the tiles (instead of the default colored tiles that the engine used) and I'm having some trouble getting it to show up in the canvas. it shows up in the console, but does not display in the canvas itself. https://github.com/AmitP88/Knights-of-Camelot I have no idea what I'm doing wrong...
@AmitP88 where in the code is it, lot of folders there
@moT01 it's in the js folder in engine.js
824 lines of code in there
im kinda bored
cbot
you called?
entertain me, please
cbot allyourbase
you called?
allyourbase
hahaha
@AmitP88 are you linking the images correctly.... maybe try for each of those tiles
../images/tiles/image.png
@moT01 the object with the tile objects is on line 53, the renderTiles function is on line 307, the drawTile function is on line 376. These are the parts of code that have to do with rendering the tiles onscreen
@moT01 I'll give it a shot
the image folder is above that files folder
the
.. goes up a level
Hi, I'm trying to understand how to access the Wikimedia APIs for the Wikipedia project. I'm having a hard time understanding what needs to go in the AJAX call, and am getting CORS error when I try to access with JSON ("No 'Access-Control-Allow-Origin' header is present on the requested resource."). Media Wiki docs mention needing to indentify the client when using the API. Is it necessary to include User-Agent information as they suggest? I've tried lots of things with the origin to get it to pass (like origin set to *, or codepen.io) but it is still failing.
but im not sure if that's the problem or will fix it
@Feldbot add
&callback=? to the end of the url
@moT01 I just tried it, it didn;t work (I get a file not found error)
@moT01 Isn't that just for JSONP?
yeah u can pass in the dataType jsonp instead of json
@moT01
@moT01 I can get the tiles to show up in console, but not on canvas
@OrangeKulture @moT01 I'm trying not to use JSONP, the reason being I'm trying to understand how to do this with JSON which their docs suggest is possible. I've read that JSONP is really limited to just GET calls, so I'm trying to figure out how to do this otherwise with the thought that a real world project might require POSTs and whatnot.
@Feldbot I had the same problem where I couldn't use JSONP because of fetch() and found an answer on Stack Overflow. Use
&origin=* in your URL: https://stackoverflow.com/a/38921370
Any idea why my quote text isn't vertically centered on Firefox? Works on chrome, but it's top aligned on Firefox. https://piteto.github.io/random-quote-machine/
@piteto @OrangeKulture @moT01 I think I got it, I just had my origin=* outside the data property in my AJAX call. It's working now... Thanks
feldbot sends brownie points to @piteto and @orangekulture and @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 89 | @piteto |http://www.freecodecamp.com/piteto
:cookie: 852 | @mot01 |http://www.freecodecamp.com/mot01
:cookie: 462 | @orangekulture |http://www.freecodecamp.com/orangekulture
Also have weirdness with bootstrap 4 on Firefox vs chrome with my wikipedia viewer...the results come back in different order but display fine. strange...
@AmitP88 im still looking around, ...let me know if you figure anything out
@moT01 ok, will do. thanks man, I really appreciate your help
amitp88 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 853 | @mot01 |http://www.freecodecamp.com/mot01
something feels off with your
drawTile()
@moT01 yeah, I think so too. I mean, I'm able to get it in the console without any errors, but it won't show up on canvas...
i know that what i just said is obvious
so, you call it on 322 and 329 and send it 5 arguments
the function asks for 3
@Feldbot jsonp is just a format .. GET or POST have really not much to do with it .. the reason is that when u make a request, you are saying to the server you want the response to be in formatted with jsonp .. u obviously dont need to specify a response format when making a POST because you are the one sending the info
i know you can send more than it asks for but
Thanks guys @piteto @moT01 I really appreciate your help a lot.
janelledement sends brownie points to @piteto and @mot01 :sparkles: :thumbsup: :sparkles:
api offline
api offline
@piteto Why does let instead of var work? I tried both and went with forEach. But why does let work?
let is the same as var with change in scope
its def a lot better to use let and const
@janelledement it is because of how hoisting and scope works in javascript
@piteto Ok, I'll do some reading about it. Thanks!
janelledement sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
api offline
I'll see if I can find an article to describe it better, but basically, it's a bad idea to use async functions inside of for loops (even with
let)
imo its bad to use any type of function within a loop
Not sure if I misunderstood, but JSONP is not a format like JSON/XML/etc... it's a different way of requesting data from a server that involves embedding a <script> tag in your page temporarily to bypass cross-origin restrictions
@janelledement Because async function (as getJSON) run after main script is finished.
It means first getJSON fire at the moment, your loop is finished, therefore u === usernames length
let works, because its block scoped (it means bound to block)
It means first getJSON fire at the moment, your loop is finished, therefore u === usernames length
let works, because its block scoped (it means bound to block)
it not a format as in a type of thing .. i meant as in a type of format
actually
its json formatted
padded json or something like that
@AmitP88 its the x,y
i think
@piteto Yeah, I went with the forEach instead. But i was just curious about let as well.
i tried reproducing the problem on codepen
https://codepen.io/moT01/pen/QqLOWB
@janelledement unless you're supporting really old browsers, it's a good idea to stop using
var - but I guess in this case, var helped with learning something new :)
@korzo Thanks for the explanation. I'm still having trouble wrapping my head around async stuff but it's starting to become more clear.
janelledement sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 472 | @korzo |http://www.freecodecamp.com/korzo
if you remove the 12's nothing shows up @AmitP88
// Setup
function phoneticLookup(val) {
var result = "";
// Only change code below this line
result = lookup[val];
var lookup = {
alpha: "Adams",
bravo: "Boston",
charlie: "Chicago",
delta: "Denver",
echo: "Easy",
foxtrot: "Frank"
};
// Only change code above this line
return result;
}
// Change this value to test
phoneticLookup("charlie");
why isnt my lookup table working?
@piteto Cool then! I'll def keep that in mind in future.
looks like you're calling
lookup before it is defined @wnghero
i havent used canvas so im not sure how that works, but you should console.log your x and y in there and see what you get @AmitP88
@moT01 I was thinking of that too, but I figured the code on line 314
// Calculate the tile coordinates
var coord = getTileCoordinate(i, j, 0, (animationtime / animationtimetotal) * shift);took care of that
ahh ok let me try to fix that
or you could temporarily replace x and y, with some actual numbers and see if they show up
The coordinates seem to show up on console as well after console.logging x and y
@piteto thanks
wnghero sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 90 | @piteto |http://www.freecodecamp.com/piteto
you're welcome!
@AmitP88 try manually putting in some smaller numbers and see if it shows up, says those should be the coordinates to the top left corner of the image, wondering if it's drawing it off screen
or off canvas
@moT01 ok, i'll try it real quick
i have a few other things that im wondering about, maybe they're there for a reason, maybe it doesn't affect anything - but why even have the img as an argument, and not just declare it in the function var img = new Image()
@moT01 hmmm, it didn't really change anything except the numbers, but it just generates it like before over and over
what if you console.log something in that little function
the img.onload
is that firing?
@moT01 hmmm, let me check
what numbers did you put in before
@moT01 for this console.log, I left it as x and y, but before that, I tried 10,10 and 100,100
@moT01 when i wrote console.log(context.drawImage(img, x, y)); it keeps generating undefined in the console, but if I try to drag the tiles in canvas, it flickers the image outline and shows the swap attempt
i dunno man, ...is there anything that would be sitting on top of your images? like something you draw after
@moT01 hmmm, let me check
cause man, ...your finding the files, ...you drawing them in the canvas
@moT01 yeah, that's what I was thinking too. I even looked over the rendering code, and I still can't figure out what I'm missing
try drawing something else there
some image online or something
Hey, i have a little question, I am cloning the netflix page, so I need to fecth data from an api, should I fetch the date from the server with node?
@moT01 hmmm, maybe you're right. I'll comment out all the tile and rendering code and see if I can just draw something on there first
what date
javascript has a date object https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
@sorinr Thanks
trev-of-ev sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1333 | @sorinr |http://www.freecodecamp.com/sorinr
Not done by any stretch but I've gotten my api calls done on my twitch app. There is a major bug though. I have three buttons: 'online', 'offline' and 'all'. 'All' opens on load as a default. The idea is to only show the offline user list when I click 'offline'..etc. The problem is when I click multiple times. It just starts adding my lists together and showing everything. On the second button click this starts to happen. Anyone can see what's up? https://codepen.io/janelledement/pen/VzRmNq?editors=0011
@janelledement https://api.jquery.com/empty/
@moT01 Thanks!
janelledement sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 854 | @mot01 |http://www.freecodecamp.com/mot01
@moT01 Eek, still not working :-(
eek
so what's the problem
Same thing I described. It works the first time I click another button, but after that, it adds my lists together. So if I click 'online', it adds the the list I had showing before.
that empty should be what you want to use
maybe a syntax issue with it
I have a few functions that I use to make each list and call those functions on the clicks. All the content then gets added to it's corresponding div. At the beginning of each of my functions, I use empty like this:
function getOnlineList(){
$("#allList").empty();
$("onlineList").empty();
$("offlineList").empty();
//FOUR LOOP TO CYCLE THROUGH ARRAY OF USERS
usernames.forEach(function(user, u){
streamUrl = "https://wind-bow.glitch.me/twitch-api/streams/" + usernames[u] + "/?callback=?";
//GET JSON TO CHECK IF OFFLINE
$.getJSON(streamUrl, function(data1){
if (data1.stream!==null) {
userUrl = "https://wind-bow.glitch.me/twitch-api/channels/" + usernames[u] + "/?callback=?";
//IF NULL GET DISPLAY NAME FROM ENDPOINT USERS
$.getJSON(userUrl, function(json){
var html =
"<div class='row'><div class='col-xs-4'><img src='" + json.logo + "' class='img-circle' width='60' height='60'></div>";
html +=
"<div class='col-xs-4'><a href='" + json.url + "' target='_blank'>" +
json.display_name +
"</></a></div>";
html += "<div class='col-xs-4'><p>" + json.status + "</p></div></div>";
$("#onlineList").append(html);
});
}
});
$("#allList").empty();
$("onlineList").empty();
$("offlineList").empty();
//FOUR LOOP TO CYCLE THROUGH ARRAY OF USERS
usernames.forEach(function(user, u){
streamUrl = "https://wind-bow.glitch.me/twitch-api/streams/" + usernames[u] + "/?callback=?";
//GET JSON TO CHECK IF OFFLINE
$.getJSON(streamUrl, function(data1){
if (data1.stream!==null) {
userUrl = "https://wind-bow.glitch.me/twitch-api/channels/" + usernames[u] + "/?callback=?";
//IF NULL GET DISPLAY NAME FROM ENDPOINT USERS
$.getJSON(userUrl, function(json){
var html =
"<div class='row'><div class='col-xs-4'><img src='" + json.logo + "' class='img-circle' width='60' height='60'></div>";
html +=
"<div class='col-xs-4'><a href='" + json.url + "' target='_blank'>" +
json.display_name +
"</></a></div>";
html += "<div class='col-xs-4'><p>" + json.status + "</p></div></div>";
$("#onlineList").append(html);
});
}
});
});
yea, i saw the pen
maybe there's a syntax issue with it
OI!! Thank you! I feel pretty silly now! :-)
that happens to everyone
Thanks @moT01
janelledement sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
api offline
who here has mad jquery skillz that could help me with a small issue I am having?
whats the problem?
@moT01 hi Tom! Basically, I am experimenting with datatables.js and a jquery virtual keyboard plugin. I have a pen for it(I will post it in a bit) if you are not familiar with datatables.js, this is the main gist, you have a bunch of data that will show on a table, either from ajax or hardcoded values, and the plugin takes care of pagination, search input filters and whatnot. The thing is, I added a virtual keyboard to the search input
but when I use it to type information into it, the filter does not work and thus its like there is not search box
here is a codepen that simulates the problem
so if you start typing into the search box for Airi, normally what it would do is show only that row, but with the jquery virtual keyboard nothing happens
I am trying to fix that but have not been able to, in my pen I show a generated bootstrap select box, in which you get an input filter for the selection, the keyboard does work in there, but it will not work with the datratable
@AleCx4 I'm going to guess your virtual keyboard library has an official/recommended way of doing this, but triggering a "input" event fixed it for me.
keyboard.$el.trigger('input')
There needs to be a way to get it to show all results again when you click cancel on the keyboard - perhaps another event gets fired from the keyboard library for you to trigger another input event
@piteto BOOmM that did it! thanks man! I have that question open in Stack Overflow, if you want to comment on it I can give you the accepted answer and get you the points there! :)
alecx4 sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 92 | @piteto |http://www.freecodecamp.com/piteto
hey, happy to help! I don't contribute to stack overflow - feel free to self-answer and accept it as the solution
And, FWIW, this works too:
keyboard.$el.onchange(); @AleCx4
@piteto you da man! thank you again!
alecx4 sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
api offline
actually, nvm forgot to click run lol
pomodoro clock... feel free to find bugs
@Kowalatam If I press pause, then reset, the clock starts going again
thats what reset does..
@piteto
i could try make reset unclickable until imput is changed ...
input
dunno.. might work...
@Kowalatam I haven't done that project yet lol, but I was thinking I could stop the clock, reset it, and then change the break/session times
@piteto When u pause it, u can change the break and session and then hit reset
if u hit pause, the input section will be enabled so u can change it
and i just found an issue i thought i had fixed :(
I see, okay, my mistake. Nice work :)
@piteto i see what u mean lol.. u expected the reset button to make everything go back as it was in the begining
only other feedback I guess is some missing semi-colons in your JS and you don't need to add bootstrap.css since you don't seem to be using it
not a bad idea
Yeah, I guess I thought "reset" was like refreshing the page
yeah.. i was using bootstrap b4... totally forgot to remove it from codepen also...
@piteto i'm liking that idea... might implement it ... :)
Cool :)
did u allow the timer to reach zero ?.. im feeling like the sound timing is a bit off @piteto
it happened in the background - was a surprise haha, so I didn't see the timing
@Kowalatam I watched it go to 0 and it worked great. Screen flashed colors and then the ding happened right at 0
@piteto great... thanks for the feedback..
kowalatam sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 93 | @piteto |http://www.freecodecamp.com/piteto
you're welcome!
just need to make it look like wow
:)
Anyone with angular material understanding please help
open this link in firefox http://jsfiddle.net/ThomasBurleson/44feazry/4/
the footer is floating on top of main content
open this link in firefox http://jsfiddle.net/ThomasBurleson/44feazry/4/
the footer is floating on top of main content
in chrome it works fine
Im not sure why some of the images are missing from the users .https://mers89.github.io/Twitch-TV-JSON-API/
I added if then statements and my error image in case a user cant be found (donut image 404) comes out so Im not sure why some of the images dont come out. DOes that mean the user doesnt have an image to begin with?
Some users may not have an image @mers89, you should catch those situations and put a default image in place
anyone could explain me what is border-box
box-sizing
box-sizing
@Engjell00 Here is some info on box sizing. I believe it doesn't add extra space when it calculates margin and padding, but not positive on that.
@Engjell00 an element has content, surrounded by padding, with a border around that, and then margin. That's the CSS box model.
By default (box-sizing: content-box), the width and height only includes the content of the element. The text, for example.
By default (box-sizing: content-box), the width and height only includes the content of the element. The text, for example.
box-sizing: border-box will include content, border, and padding in the width. It makes it easier to size your elements.
@Feldbot yeah I think you are kind of right - box sizing includes the border width and padding in the dimensions assigned to the element to my understanding.
thanks @Feldbot @piteto also last question is is important to learn the color with hex, letter and rgb? also the hsl hsla thing with the opacity
engjell00 sends brownie points to @feldbot and @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 94 | @piteto |http://www.freecodecamp.com/piteto
:cookie: 298 | @feldbot |http://www.freecodecamp.com/feldbot
Not really important to learn hex vs. rgb - just know the difference
hsl makes it very easy to get the color you want
rgba and hsla are similar - great for semi-transparent colors
@mers89 It looks like the images that aren't showing up are being loaded over http where all the other images are coming over https