@2cool4school What about bootstrap Jerrz?
hey folks, would anyone be able to help with this twitch API project?
@Benjmhart What's the problem?
I keep getting not found when based on what I've read i should be able to get a big object with the details for all the channels
getting a 404 error
@Benjmhart I had the exact same idea when I started my twitch app, unfortunately, the wind-bow.gomix.me server that Free Code Camp provides doesn't let you use a comma separated list of channels
you have to call them one at a time
...well crap
thanks @piteto
benjmhart sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 207 | @piteto |http://www.freecodecamp.com/piteto
You can still do it that way if you use the actual twitch api, but it requires you to sign up for a developer account and get an API key
is that hard?
No, it only takes a few minutes to do
...isn't dealing with ajax calls in a for loop a big pain?
what did you end up doing?
.forEach() will work better than a for loop with ajax calls
I used the server that Free Code Camp provides, using promise.all to call the API multiple times.
@piteto Promise.all is not good idea as API randomly fails.
@korzo Yeah, we talked about that back when I was building it and trying to use $.when, but I switched it up, got rid of jQuery and tested failure scenarios. It all seems to work well under those scenarios.
@korzo how would you do it then?
Where is your twitch app @korzo ?
@Benjmhart with promises, but collect resolved promises or process them per promise
Similar to what @piteto posted, just without promise.all
users.forEach(e => {
Promise.resolve(e)
.then(getChannelData)
.then(getStreamsData)
.then(renderUser)
.catch(doSomething);
});
hmmm ok, thanks @korzo
benjmhart sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 587 | @korzo |http://www.freecodecamp.com/korzo
@piteto I didn't finish Twitch project yet.
considering the knowledge you displayed it wouldn't take you long
@korzo yeah, you were really helpful when I was trying to get $.when working. You could probably hammer something out in 30 minutes
@Gersho I have functional code somewhere. But then I started playing with design trying to make it perfect and I overthinked it :)
That's why I used bootstrap cards - just said, screw the UX :)
I used bootstrap cards on everything, got carried away with my calculator and pomodoro...and still struggling with those
i'm completely suck at design (i'm still not done with my portfolio, the current version is beyond ugly lol)
Yeah, I had code ready in some 20 minutes, then spent 3 hours browsing upLabs/Graphicriver trying to find something perfect
@Gersho design and portfolio is my nemesis
that's part of the reason i'm starting backend before finishing react/d3, i want to build solid python/js skills so my lacking css won't be an issue
I'm also good with css, but I have zero design imagination. If I see something, I can code it, but I can't create something to display by myself
Hey does anyone know how to make the footer stay at the absolute bottom of page
ive tried this
I'm also good with css, but I have zero design imagination. If I see something, I can code it, but I can't create something to display by myself
well i'm not THAT bad at css, but i'm not really good either, i can copy basic stuff, my worst nemesis in design is choosing colors
footer {
width:100%;
bottom:0;
left:0;
position:absolute;
}
footer {
width:100%;
bottom:0;
left:0;
position:absolute;
}
@2cool4school do you want sticky or fixed footer ?
sticky.
i believe
i dont want it always visible at the bottom of my page
@2cool4school Old school trick is set html and body to 100% height, footer to bottom : 0 with margin of footer's height
margin of footers height?
what if the height isnt set?
@2cool4school you need margin, otherwise it will cover part of the body, when height of the body is more then 100%
@2cool4school http://jsbin.com/miwesofama/edit?html,css,js,output
@korzo okay, im actually seeing that error on my page now
@korzo what do i set the margin to? i dont have height set i was going to let height be dynamic and use col's in the footer
@korzo you dont have margin set and im still confused DX
@2cool4school Sorry, I posted link prematurely. Take a look again. This is better solution
@2cool4school then there is flexbox solution
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
@korzo im following your method, same as ive found on the internet and its not working. the footer is generated at the bottom of the viewport if height is greater than 100%. and since position is absolute it stays there
If you don't know height of footer and can't guess it, you'll need bit of javascript
@2cool4school Here is solution with position: absolute http://jsbin.com/cesiyicaga/edit?html,css,js,output
first link is using min-height
@2cool4school If you don't know height of the footer, there should be solution using display: table-footer-group;
but I don't know if this is usable for you
but I don't know if this is usable for you
@2cool4school http://jsbin.com/yefepiroju/edit?html,css,js,output
Guys, tell me please what to use for a brick grid and a beautiful appearance of blocks when scrolling or how to bind masonry and scrollreveal?
hi
@Selnapenek maybe this: https://github.com/desandro/masonry
Hello kozen0
Anybody knows a good library for playing sounds who won't block codepen with a 403?
corsanywhere doesn't work :(
what kind of sounds are you looking for?
It's for the pomodoro challenge, so a simple ring sound should suffice.
have you tried just uploading a sound somewhere?
no, you know a good free service? I thought it would be easier to just get a sound from a library
just found this
probably not what you're looking for
looks fine
I will try
thx
All the sounds libraries I can find aloow you to download. I'd imagine it's tpo prevent their costs from getting to high from people streaming directly from their page
It worked :)
@hashtagyolo1 thx
gh05d sends brownie points to @hashtagyolo1 :sparkles: :thumbsup: :sparkles:
:cookie: 277 | @hashtagyolo1 |http://www.freecodecamp.com/hashtagyolo1
no worries
For some reason this is returning [Object Object] instead of the answer
function whatIsInAName(collection, source) {
// What's in a name?
var arr = [];
// Only change code below this line
for (var i in collection) {
for (var j in collection[i]) {
if (collection[i][j] === source[j]) {
arr += collection[i];
}
}
}
// Only change code above this line
return arr;
}
whatIsInAName([{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }], { last: "Capulet" });
It's returning the right amount of objects, which I guess is something.
Have you tried changing it to:
arr.push(collection[i]);
@hashtagyolo1
@hashtagyolo1 Second nested loop needs to be over source's keys.
You cannot add to an array with
+=.
Thank @Masd925 @Gh05d. Not done any work in a while so having to get it all back in my brain
hashtagyolo1 sends brownie points to @masd925 and @gh05d :sparkles: :thumbsup: :sparkles:
:cookie: 290 | @gh05d |http://www.freecodecamp.com/gh05d
:star2: 4525 | @masd925 |http://www.freecodecamp.com/masd925
@hashtagyolo1 Using a simple for loop to loop over array indices is better, because it is guaranteed to loop them in order.
is that not what it's doing now?
@hashtagyolo1
for...in loop is not guaranteed to loop property keys in insertion order. Therefore a for...in loop is not good if array element iteration order matters. Not totally sure if it matters here, but generally you should use a simple for loop or array iterators to loop array indices.
Didn't know that. I'll change it and see if it helps.
@hashtagyolo1 It won't. The logic is wrong.
You need to keep those objects that have matching property values with source for all the source's keys. You need some loop logic.
Second nested loop needs to be over source's keys.
Why is it that when I change my border radius the actual box itself maintains its shape?
@rscales02 The page layout is always made out of boxes.
specific areas with issues are that all of my colored buttons act as buttons to the corners of the
container div and my center-element div extends passed its circle as well
@Masd925 any idea how to pull my button effective area into the proper border radius then?
@rscales02 You mean make only the round area clickable?
I want the colored areas to be clickable. currently
center-element sticks out into each of them (only slightly) and the "empty" corners are still clickable
@rscales02 Not sure if there is an easy solution. You could do it by checking the element and cursor positions/dimensions.
@Masd925 thanks, I will look into that I guess. The example is impressive, buttons are exact and only buttons when expecting input. Not the slightest idea where to start... I guess with paper and pen!
rscales02 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4526 | @masd925 |http://www.freecodecamp.com/masd925
hi guys can someone help me. i am working on this page for a non profit https://www.alternativeeducation.in/learning-spaces. the modal that opens up when i click on the 'see full information' link only scrolls if the mouse pointer is inside the modal. how can i fix that. also is it possible to get cards to stack below each other like pintrest. could someone guide me
https://codepen.io/ayushb/pen/Jrpoqw
is there a special way to add border to the thead element?
i can't make it work the normal way
is there a special way to add border to the thead element?
i can't make it work the normal way
@alteducation sadly no resolution for you because i am not on my laptop, but i encountered on mobile that when i click on see the full information, i always get the information of the first card and not of the one i clicked
@alpox yeah i have that issue too. i'm using jekyll and liquid loop to loop over my data files but the modal only shows the first element. dont know why i am trying to fix it for some time now
@alteducation id try to help but im sadly on the way to mountains :D maybe i can take a look another time. I didnt yet use jekyll though
@alpox thanks for taking a look. enjoy your journey to the mountains. mountains are the best :)
alteducation sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1343 | @alpox |http://www.freecodecamp.com/alpox
They are :D thanks!
@alteducation do you have your code on github?
How can I have the portfolio pictures in a grid format https://codepen.io/CXmanager/pen/mwwxYq?editors=1100#0
@alpox yeah i have this is the code for the specific page https://github.com/alteducation/web/blob/gh-pages/learning-spaces.html
@CXmanager You can use widths and float etc, but somewhat easier to make it responsive using some grid system like Bootstrap grid.
@CXmanager many ways, such as @Masd925 told you, or like {display: inline-block; width: 25%;} etc
@CXmanager you can use flexbox apply display:flex propert to the parent element then apply a width to img tags
@alteducation what do you use there for the modal? Materialize or Bootstrap? I see you included both
@alteducation but you didnt define the target of the buttons for the modal
i wrote the css for the modal. bootstrap and materialize are not used in that page they are included in common to all pages. some materialise modal stlyling got applied though
@alteducation but you sure used some js to show the modal then?
@alpox sorry i didnt get you
@alteducation there must be some action triggered which makes the right modal appear. Where is the logic for that?
@alpox var modalBtn = document.getElementsByClassName("modal-show"); function openModal (){
modal.style.display = "block";
document.body.style.height ="100vh";
$('.modal').scrollTop(0);
modal.style.display = "block";
document.body.style.height ="100vh";
$('.modal').scrollTop(0);
} for(var i=0;i<modalBtn.length;i++){
modalBtn[i].addEventListener('click',openModal);
}
@alpox var modalBtn = document.getElementsByClassName("modal-show"); function openModal (){
modal.style.display = "block";
document.body.style.height ="100vh";
$('.modal').scrollTop(0);
} for(var i=0;i<modalBtn.length;i++){
modalBtn[i].addEventListener('click',openModal);
}
modal.style.display = "block";
document.body.style.height ="100vh";
$('.modal').scrollTop(0);
} for(var i=0;i<modalBtn.length;i++){
modalBtn[i].addEventListener('click',openModal);
}
sorry for the messy code formating
this is the logic i used to show the modal
@alpox
var modalBtn = document.getElementsByClassName("modal-show");
function openModal (){
modal.style.display = "block";
document.body.style.height ="100vh";
$('.modal').scrollTop(0);
}
for(var i=0;i<modalBtn.length;i++){
modalBtn[i].addEventListener('click',openModal);
}
@CXmanager use this code
`
Portfolio ul{
display:flex;
}
Portfolio img{
width:95%;
padding: 0 3%;
}
`
@alteducation where is "modal" defined in
modal.style.display =" block";?
That should most likely be
this.style.display...
modal is defined as var modal = document.querySelector('.modal');
i changed it to var modal = document.querySelectorAll('.modal'); and added loop in the function to apply display block to all elements but still no luck
i changed it to var modal = document.querySelectorAll('.modal'); and added loop in the function to apply display block to all elements but still no luck
@alpox modal is defined as var modal = document.querySelector('.modal');
i changed it to var modal = document.querySelectorAll('.modal'); and added loop in the function to apply display block to all elements but still no luck
i changed it to var modal = document.querySelectorAll('.modal'); and added loop in the function to apply display block to all elements but still no luck
@alteducation did you try it with
this instead of modal?
@alpox yeah id doesnt work
Oh wait right. That wouldnt work. You will have to target the right modal. Either through an index or better through a data-target attribute on the button which you can retrieve in the click callback to identify the modal
@alpox
var modal = document.querySelectorAll('.modal');
var modalBtn = document.getElementsByClassName("modal-show");
function openModal (){
for(var i=0;i<modal.length;i++){
for(var j=0;j<modalBtn.length;j++){
if(modal[i] === modalBtn[j]{
modal[i].style.display = "block";
});}}
}Can I do something like this
Nope that doesnt work :D like this you still dont know which modalbutton refers to which modal. You would acticate all the modals
Best, set
data-target html attributes on the buttons which hold a selector uniquely identifying the modal it should open (the modal also needs a unique id then). Then you can just ask for the attribute in openModaland use the selector for getting the right modal.
Another method is to push the modalbuttons into a real array (yea its not a real array now), then use
modalBtnArr.indexOf(this); to retrieve the index of the button in the buttonlist and then use the index to read out the modal with the same index out of a list retrieved through another getElementsByClassName to the modals. This is a less secure method though and is more error prone
@alteducation ^
@alpox the buttons are generated by a jekyll loop how can i set different data target attributes to each?
@alteducation i dont know jekyll much, but im sure there must be a method to get the index of the current iteration step which you could use to set unique identifiers
@alpox if i get the index of the button that user clicks can i do modal['index-of -button-user-clicked] could you explain why you said its unsecure
hey guys can someone explain this to me
var display = 0554651;
$("#equals").on("click",function(){
$("#display").html(display);
});
Why does the equals element show "186793" ?
the display element?
after you click the equals element
yes i mean display
and you click equals and display changes from something to 186793?
yes
where does that number come from, display var is 0554651
i understand its something to do with a leading zero
im wondering if it's from that leading
0
not sure why that would happen, i bet if you made it a string it would work
display = "0554651";
yup
that works,
but this
$("#display").html(display.toString());
does not work
why?
and where does the number "186793" come from :laughing:
im not sure exactly why it gets translated like that - but if you remove that 0 in front it shows the 554651
a small look around says you can't use numbers like that, it has to be a string if you want a 0 in front
can anybody tell me how to center the text inside the green fields vertically?
@Gh05d
.inner-field {
height: 100%;
width: 33.33%;
background: green;
float: left;
text-align: center;
display:flex;
align-items:center;
justify-content:center;
}
height: 100%;
width: 33.33%;
background: green;
float: left;
text-align: center;
display:flex;
align-items:center;
justify-content:center;
}
@alteducation Wow thx. That was quick :smile: :+1:
gh05d sends brownie points to @alteducation :sparkles: :thumbsup: :sparkles:
api offline
So I guess the magic was the flex?
What does it do? Could you elaborate?
@Gh05d flexbox makes layouts super easy. If you are unfamiliar with flexbox please try games such as flexboxfroggy, flexboxdefence etc they will help you understand flexbox.
what i did is i applied the property display: flex that makes the element a flexbox element
the align-items:center centers it vertically inside the element
and justify-content:center centers it horizondally
both of them are flexbox properties
@alteducation cool thx. I will check that out :+1:
gh05d sends brownie points to @alteducation :sparkles: :thumbsup: :sparkles:
api offline
Hi guys. Can you guys help me with this? i want to draw this line when the site is scrolling down and up. Does somebody have any resources of any kind of idea of how to implement this?
@alteducation thats insecure because you would have to be sure that in no case you could get the modals in another sort order than the buttons. This would be ok in most cases but it CAN go wrong
@alpox woudlnt the order of the buttons change to when i change the sort. for eg if i filter by state then the buttons and modal will change respectively right?
Hello World :)
I have this situation , I want my notifications appears after the page is loaded ,I wil share my code
success: function(data){
if (data.message == 'success') {
location.reload();
$(window).on('load', function(){
showNotification('alert-success', '@lang("tables.success")', 'top', 'right', 'animated fadeIn', 'animated fadeOut');
});
}
else if (data.message == 'nosuccess'){
showNotification('alert-danger','@lang("tables.fail")' , 'top', 'right', 'animated fadeIn', 'animated fadeOut');
}
}
window.on load , doesn't work
@Cornielle hello
window.onload won't run if it's inside another function
$(window).on("load", function() {
showNotification("alert-success", '@lang("tables.success")', "top", "right", "animated fadeIn", "animated fadeOut");
});
...
success: function(data){
// ajax success function code here
}
Hey all, working on a front end thing, and I'm having trouble with JQeury. I'm using a click function to add elements to the DOM. I can confirm that the function does fire, but the
$().addClass() function never takes effect. $('.xlsFile').click(() => {
console.log('file clicked');
console.log($(this).hasClass('selected'));
if($(this).hasClass('selected')){
console.log('Selected is True')
$(this).removeClass('selected');
}else{
console.log('Selected is false')
$(this).addClass('selected');
}
});
@cjrutherford the
this keyword won't work with arrow functions =>
Ah! okay, I'll fix that now. Thanks @piteto
cjrutherford sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 210 | @piteto |http://www.freecodecamp.com/piteto
Try it with a normal anonymous function, or replace
this with '.xlsFile'
that was it! it's working!
Nice :)
didn't want to use the `.xlsFile' because there will be multiple, and I want to have individuals selected. Thanks again!
@cjrutherford makes sense - there's a toggleClass() method, by the way, that might simplify your code a bit
$(".xlsFile").click(function() {
$(this).toggleClass("selected");
});
Oh yeah, that would work better anyway!
Or with arrow functions:
$(".xlsFile").click((e) => $(e.currentTarget).toggleClass("selected"));
This is going to make the back end functions I'm working on a lot easier. Been a while for me and Jquery, but this project is too small to load out a full Angular app. Here Goes!
Guys, tell me please, in the horizontal scrolling how to hide the element (the arrows to the left, to the right) when reaching the beginning of the scroll and the end?
@Selnapenek Check out
element.scrolleft and element.scrollWidth to determine the beginning and end scroll position
@piteto thx =*
selnapenek sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 211 | @piteto |http://www.freecodecamp.com/piteto
@alteducation in theory yes. I would say it should work in around 99% of the cases
Its just that usually, programmers tend to go sure when they are insecure about internals of a system like jekyll to be able to control it for sure in 100% of the cases
@alpox i managed to add a data-modal attribute to the buttons that has the value of he loop index. now i am figuring out the js code to make this work
The credo is: "most likely good, is not good enough"
@alteducation :thumbsup:
@alpox i'm trrying to grab the data element of the button clicked
here is what i wrote
for(var i=0;i<modalBtn.length;i++){
modalBtn[i].addEventListener('click',function(e){
const openModal = document.querySelector(button[data-modal="${e.data('modal')}]");
console.log(openModal);
});
which is wrong
could you please help
whats
jQuery ? or template string ?
${e.data('modal')}? @alteducationjQuery ? or template string ?
@moigithub i am trying to get the value of the data-modal attribute from a mouse click event
@moigithub how should i write it?
dunno. im asking what that above are :)
@moigithub that is es6 templating thats all i know :)
IF template string.. u should use backtick instead of quotes
@moigithub but the whole thing is wrong its somthing like e.target.attributes . something i am trying to find it out
since i dont know what
then check IF it have a data property (on devtools ) and if this also have a modal property
e.data are... i would console.log(e)then check IF it have a data property (on devtools ) and if this also have a modal property
if u already know what value a data property have.. u could try to hardcode for testing...
@moigithub i did console.log(e.target)
and i got
<a data-modal="3" class="button modal-show">See Full Information</a>
how to select the value 3
and i got
<a data-modal="3" class="button modal-show">See Full Information</a>
how to select the value 3
use dir instead of log
it should show an arrow which u can expand
console.dir(e) OR console.dir(e.target)it should show an arrow which u can expand
@moigithub that is a pretty big list
check if it have a
data property
@moigithub thanks man we found it its e.target.dataset.modal
alteducation sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 3652 | @moigithub |http://www.freecodecamp.com/moigithub
:+1:
hi could some one help me with this javascript syntax
var modal = document.querySelectorAll('.modal');
var currentModalValue;
var modalBtn = document.getElementsByClassName("modal-show");
var closeBtn = document.querySelector('.close-post');
function openModal(){
modal[currentModalValue].style.display = "block";
document.body.style.height ="100vh";
$('.modal').scrollTop(0);
}
function closeModal(){
modal[currentModalValue].style.display = "none";
}
for(var i=0;i<modalBtn.length;i++){
modalBtn[i].addEventListener('click', function(e){
currentModalValue = e.target.dataset.modal;
});
}Please tell me how to pass the openModal function along with modalBtn[i].addEventListener() so that it runs when the button is pressed. Is this the right way to do it?
for(var i=0;i<modalBtn.length;i++){
modalBtn[i].addEventListener('click', function(e){
currentModalValue = e.target.dataset.modal;
openModal();
});
this fixed the issue but i am unable to close the modal now
@alteducation You should call openModal() in event callback
Is this Bootstrap modal or your own implementation?
Is this Bootstrap modal or your own implementation?
@korzo my own implementation
@alteducation Then why not to pass openModal as a Event listener?
@korzo it works but close button only works on the first modal window. i dont know the syntax to pass it as an event listener
@alteducation Do you have more modals in document?
@alteducation I mean elements with .modal class
@korzo yes this is the page https://www.alternativeeducation.in/learning-spaces
and code https://github.com/alteducation/web/blob/gh-pages/learning-spaces.html
and code https://github.com/alteducation/web/blob/gh-pages/learning-spaces.html
@alteducation then
var closeBtn = document.querySelector('.close-post'); selects only first close button
@korzo should i create loop for close button? only one close button is displayed on page so i thought this would work
@alteducation well, you have close button inside every modal, so you have to add event listener to everyone, not just first
@alteducation Or you can assign event listener only to current close button inside openModal function and remove it in closeModal
for(var i=0;i<closeBtn.length;i++){
closeBtn[i].addEventListener('click',closeModal);
}
@alteducation But I would say better approach is to listen for event on parent element, for example .posts-box
Would appreciate some feedback on my first D3 chart! https://codepen.io/kbaig/pen/rGYYrm?editors=0010
@korzo i am new to js. could you explain how and why
@alteducation and if clicked element is .modal, open modal. If it's .close-post, close modal
@korzo will that open up respective modals according to the element?
@alteducation Yes, If clicked element is button, open closest modal
If it's close button, close parent modal
@korzo I'm just starting out, I don't get it. If its not much trouble could you show some code on how its done?
@alteducation If it's easier for you, assign Event Listeners in for loop, as you posted :point_up: October 6, 2017 9:11 PM
@korzo is it bad practice?
@korzo also the modal only scrolls if the mouse pointer is placed on top of it. how can i get the modal to scroll no matter where the pointer is?
@alteducation I would say it's not good practice, but don't bother yourself with it at this point ;)
@alteducation It's because only element with focus can scroll
@korzo how can i change that. users will get confused.
@alteducation try
modal[currentModalValue].focus() if this is current modal element
@korzo like this?
function openModal(){
modal[currentModalValue].style.display = "block";
modal[currentModalValue].focus();
document.body.style.height ="100vh";
$('.modal').scrollTop(0);
}
@alteducation Yes, but I'm not sure it will work. Never tried it on div, only form elements
@korzo no it doesnt work
@alteducation I'm not sure that it even can work with any html technology :-/
@korzo I'm not sure also, if focusing something makes that part of the page scroll then. I thought only what is below the cursor scrolls even if the focus is somewhere else
I mean you can have the focus on an input field but as long as your cursor is outside of the input, the input won't scroll when turning the wheel
@alpox Yeah, you can't scroll element if cursor is not above it. I thought "background" is part of the modal.
I 'm absolutely useless on tablet
I 'm absolutely useless on tablet