You need to use both of those depending on the streamer's online status, that's one of the challenges for this project
that is inexact :3 you can go with a single one depending on your needs (and still meet the user stories of course)
$.getJSON('', function(data1){
$.getJSON('', function(data2){
//do stuff with data1 and data2
})
})
ismailhozain sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 3657 | @moigithub |http://www.freecodecamp.com/moigithub
or use promises https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise/all
p1= $.getJSON('') //<< jquery getJSON return a promise
p2= $.getJSON('')
Promise.all( [ p1,p2 ] ).then( function( allValues ){
//allvalues is an array with [data1, data2]
})
using jquery $.when
$.when( p1, p2 ).done(function ( data1, data2 ) {
console.log( data1 );
console.log( data2 );
});
<div class="col-md-4">
<img src="ex/src/path.png" />
</div>
im sorry let me correct that -
<div class="col-md-4">
<img class="img-responsive" src="ex/src/path.png" />
</div>
thats what my image grid looks like. a few of the images are slightly larger in size (height-wise) and its throwing off my grid, is there a css trick I can use to make the div's/img's uniform in size? I've tried setting height of these certain images to a % lower than 100 but it doesn't affect the image size at all.
adnosk sends brownie points to @gersho :sparkles: :thumbsup: :sparkles:
:cookie: 529 | @gersho |http://www.freecodecamp.com/gersho
adnosk sends brownie points to @gersho :sparkles: :thumbsup: :sparkles:
<body onload="foo()">
hi i only know vanilla js and doesnt understand jquery well. can someone convert this to vanilla js so i can understand this
$.each($('.card-title'), function(i, el) {
var card = $(el).closest('.car-card-grid-item');
$(el).text() == filter ? card.show() : card.hide();
});
}
@alteducation - I don't know if I can fully convert to vanilla JS - if you need that you'll have to get it from someone else. A verbal description of this, from what I can understand without seeing the HTML code, is this:
$.each
is essentially going to be like .forEach
in processing a list of elements.card-title
, which is a class, so jQuery would use the Document.getElementsByClassName()
method to get the list of elements with that class.function(i, el)
is the function that will be executed for each of those elements. It first is going to take the reference to the elements el
and find the .closest
element - traversing the parents of the element in the DOM tree to find one with the class .car-card-grid-item
. That element will be set in the variable card
.el
has text contents that are compared to filter
(that's what I don't know - what filter
actually is - perhaps a variable that is set prior to this code block?) and a ternary operator selects that the card will with be displayed with .show()
which the documentation states is roughly equivalent to setting display: block
in CSS. Or it will be hidden with .hide()
, essentially display:none
(using the appropriate javascript methods to set the CSS values)It is probably a little more involved to explain it thoroughly as far as complete vanilla JS, but you might be able to understand it from there? You can visit the documentation for jquery and read the details - for example, the .show()
documentation gives the gory details and examples for that method. There is a search box at the top of the documentation page where you can look at all of the other methods that are used.
alteducation sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3349 | @khaduch |http://www.freecodecamp.com/khaduch
filter
that represents something like for example "Delhi" ends up showing three boxes -
@alteducation - your question
does $('.card') is this similar to querySelectorAll('.card')
I think that the answer is yes - although I'm not sure if jQuery is sophisticated in the way it forms the selection code - recognizing that it is a class it might use a getElementsByClassName
, for example, if that was more efficient?
@piteto in this code
var states = document.querySelector('#state');
states.addEventListener('change', filterCards);
function filterCards() {
var filter = states.value;
}
how does js know which value to select
shouldn't we mention like states[index].value
??
<select id="state">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
like this
@CXmanager
.flex-container {
display: -webkit-flex;
display: flex;
width: 800px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
width: 250px;
height: 250px;
margin:0 7px;
}
if you were aiming for this
@CXmanager please use this instead of the previous code. this one is better
.flex-container {
display: -webkit-flex;
display: flex;
justify-content:space-around;
width: 800px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
width: 250px;
height: 250px;
}
wheelhot sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 872 | @mot01 |http://www.freecodecamp.com/mot01
debugger;
at the first line of minmax and open devtools before clicking field.
palingheorghe sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 602 | @korzo |http://www.freecodecamp.com/korzo
@alteducation Sorry, logged off before your question. With this code:
var states = document.querySelector('#state');
states.addEventListener('change', filterCards);
function filterCards() {
var filter = states.value;
}
when the #state element changes, the value of that element changes. There can only be one value for that element at a time, so no need to loop through it.
states.value
with this.value
so you aren't relying on a variable outside of the function
document.getElementById
is a better choice for selecting elements by ID
@piteto I tried to incorporate the other select option by repeating the code but it has become a mess. I tried looking online for tutorials but cannot find anything similar.
var states = document.querySelector('#state');
states.addEventListener('change', filterCards);
var approach = document.querySelector('#approach');
approach.addEventListener('change', filterCards);
function filterCards() {
var filterstate = states.value;
var filterapproach = approach.value;
// show all the cards if "Show All" is selected
if(filterstate == "All States" && filterapproach == "All Learning Methods") {
$('.card-parent').show();
return;
}
// use $.each to look at the title/h4 element in each card
// if it matches the filter value selected show it else hide it
$.each($('.space-state'), function(i, el) {
var card = $(el).closest('.card-parent');
$(el).text().includes(filterstate) ? card.show() : card.hide();
});
$.each($('.space-approach'), function(i, el) {
var card = $(el).closest('.card-parent');
$(el).text().includes(filterapproach) ? card.show() : card.hide();
});
}
could please take a look
alteducation sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 221 | @piteto |http://www.freecodecamp.com/piteto
if(filterstate == "All States" && filterapproach == "All Learning Methods") {
$('.card-parent').show();
return;
}
var states = document.getElementById('state');
var approach = document.getElementById('approach');
[states, approach].forEach(el => el.addEventListener('change', filterCards));
function filterCards() {
var filter = this.value;
var selector = this.id == "approach" ? '.space-approach' : '.space-state';
$.each($(selector), function(i, el) {
var card = $(el).closest('.card-parent');
$(el).text().includes(filter) ? card.show() : card.hide();
if (filter == "All Learning Methods") card.show();
if (filter == "All States") card.show();
});
}
var stateFilter = document.getElementById("state").value;
var learningFilter = document.getElementById("approach").value;
alteducation sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 222 | @piteto |http://www.freecodecamp.com/piteto
$(document).ready(function() {
$('#exampleModal').on('show.bs.modal', function (e) {
var selectedStudentId = e.relatedTarget.getAttribute("data-id");
$('#delete-btn').on('click', function() {
//The code below keeps giving error
//studentsresource.js:7 Uncaught TypeError: $.ajax is not a function
// at HTMLButtonElement.<anonymous> (studentsresource.js:7)
// at HTMLButtonElement.dispatch (jquery-3.2.1.slim.min.js:3)
// at HTMLButtonElement.q.handle (jquery-3.2.1.slim.min.js:3)
$.ajax({
type: 'DELETE',
url: '/studentview/' + selectedStudentId,
success: function(data){
//do something with the data via front-end framework
location.reload();
}
});
//The code above
selectedStudentId = -1; //To make sure selected students doesn't hold that index deleted
});
});
});
});
Please help....someone's life depends on this code
/studentview/${selectedStuentId}
,
@arrudamt use
```
//Your code
```
Your code
)
cypher12 sends brownie points to @mughees605 :sparkles: :thumbsup: :sparkles:
:cookie: 287 | @mughees605 |http://www.freecodecamp.com/mughees605
arrudamt sends brownie points to @cypher12 :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @cypher12 |http://www.freecodecamp.com/cypher12
$('#exampleModal').on('show.bs.modal', function (e) {
var selectedStudentId = e.relatedTarget.getAttribute("data-id");
$('#delete-btn').on('click', function() {
console.log(selectedStudentId);
$.ajax({
type: 'DELETE',
url: `/studentview/${selectedStudentId}`,
success: function(data){
//do something with the data via front-end framework
location.reload();
}
});
selectedStudentId = -1; //To make sure selected students doesn't hold that index deleted
});
});
@piteto
var states = document.getElementById('state');
var approach = document.getElementById('approach');
[states, approach].forEach(el => el.addEventListener('change', filterCards));
function filterCards() {
var filterState = states.value;
var filterApproach = approach.value;
/*var selector = this.id == "approach" ? '.space-approach' : '.space-state'; */
var card = $(el).closest('.card-parent');
var titleState = document.getElementsByClassName('space-state');
var titleApproach = document.getElementsByClassName('space-approach');
for (i = 0; i < card.length; i += 1) {
if(titleState[i].includes(filterState) && titleApproach[i].includes(titleApproach)){
card.show();
} else{
card.hide();
}
}
am i getting any close. or do i need to change the logic?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
hey guys, I'm trying to create an 8 x 8 grid for a match 3 game and I think I almost have it rendered, except that my grid won't populate with the images. I've console.logged my variables and functions to check the outputs along the way. What am I missing?
var img_src = new Tile();
row[x] = img_src["tile"];
amitp88 sends brownie points to @radascript :sparkles: :thumbsup: :sparkles:
:cookie: 399 | @radascript |http://www.freecodecamp.com/radascript
@Radascript this is my old code if you're curious: https://github.com/AmitP88/Knights-of-the-Round/tree/gh-pages