kayut

When I send a /search/photos request to Unsplash API, I get a response with only 10 images.

Is it possible to get more than 10 images?

Hi,

Looking for a solution to make a Youtube video iframe responsive I found this page:

Fluid Width Video

Now I'm trying for hours to apply it on my code example here:

Trying to make it responsive

but it's not working and I don't understand why.

Could you please help me with this? I'm not looking for a CSS solution. I'm looking for a jQuery/JS solution.

Thanks
 

I managed to fix it as follow:

HTML

  <ul id="container" class="cf"></ul>
	
  <script id="ourTemplate" type="text/x-handlebars-template">
	    <!-- Data coming from staff array -->
    {{#each staff}}
      <li class='list-container'>
        <div class='img-container'><img src="{{ this.image_url }}"></div>
        <div class='name-container'>{{ this.name }}</div>
      </li>
    {{/each}}
	    <!-- Data coming from the results array -->
    {{#each results}}
    <li class='list-container results'>
      <div class='img-container'><img src="{{ this.picture.medium }}"></div>
      <div class='name-container'>{{ this.name.first }} {{ this.name.last }}</div>
    </li>
    {{/each}}
  </script>

JavaScript

const apiRequest1 = fetch('https://randomuser.me/api/?results=10').then(function(response){ 
  return response.json()
});
	const apiRequest2 = fetch('https://api.jikan.moe/anime/1/characters_staff').then(function(response){
  return response.json()
});
	let combinedData;
	Promise.all([apiRequest1,apiRequest2]).then(function(data){
  firstAPI = data[0];
  console.log(firstAPI);
	  secondAPI = data[1];
  console.log(secondAPI);
	  combinedData = {...firstAPI, ...secondAPI};
  console.log(combinedData);
	  createHtml(combinedData);
  // createHtml(combinedData.results);
  // return combinedData;
})
.catch(function(error) {
  console.log('Looks like there was a problem: \n', error);
});

// Function to generate the HTML
function createHtml(ourData) { // ourData is just a parameter and can be named anything
  let rawTemplate = document.querySelector("#ourTemplate").innerHTML;
  let compiledTemplate = Handlebars.compile(rawTemplate);
  let ourGeneratedHTML = compiledTemplate(ourData);
  
  let ourContainer = document.querySelector("#container");
  ourContainer.innerHTML = ourGeneratedHTML;
}

Of course I had to run handlebars.js #each twice, once for each Ajax response.

Hi,

In the following example I'm using fetch.all to combine two different API requests.

fetch.all and Handlebars.js

The unordered list, which is created by using Handlebars.js is showing all staffs from the second request.

Now my question:

How can I add the result of the first request to the same unordered list?

Hey,

Can some one please explain to me why this works:

let myNames = ['apple', 'orange', 'lemon'];
	let output = myNames.map(function(item){
    return item;
});
console.log(output);

But the same code with forEach doesn't work?

let myNames = ['apple', 'orange', 'lemon'];
	let output = myNames.forEach(function(item){
    return item;
});
console.log(output);

Isn't it that myNames is an array and forEach is a built-in method of Array?
Why is that the forEach is not working?

Thanks

Thanks, it makes sense.

But I still don't get this code:

outerFunction().kir();

I know that you can access the method kir of an object with myObject.kir();

But I have never seen myObject().kir();

Could you guys please explain a bit about it?

Hey,

If I use a closure inside an IIFE like this:

var outerFunction = (function() {            // this is an IIFE
  const outer = `I'm the outer function!`;
	  var innerFunction = function() {
    const inner = `I'm the inner function!`;
    console.log(outer); // I'm a variable from the outer function!
  }
  return {
    kir:innerFunction
    } 
})();

It seems to me that the IIFE returns an object called outerFunction and add the method kir to it.
So that now, I can access the kir method of the object outerFunction with the following code:

outerFunction.kir();

But if I don't use an IIFE for the same example:

function outerFunction () {
  const outer = `I'm the outer function!`;
	  var innerFunction = function() { 
    const inner = `I'm the inner function!`;
    console.log(outer); // I'm the variable from the outer function!
  }
  return {            
    kir:innerFunction
    } 
}

I can access the method kir only if I run this:

outerFunction().kir();

Why it doesn't work if I run this?:

outerFunction();
outerFunction.kir();

It seems to me that in the first example, when the IIFE runs automatically, it returns the object outerFunction and add the method kir to it.
But when I run outerFunction manually, it's different and I can't access the method kir.

I'm a bit confused!
Can some one please explain to me why I can't access kir method in the second example by running this?:

outerFunction();
outerFunction.kir();

I guess this is more a question about understanding IIFE rather than the closure.

Thanks

@iwato,

I think you didn't read my question properly. Your answer has nothing to do with my question.

First, this is a forum for JavaScript and not for jQuery.

Second, my question is about forEach and your solution has nothing to do with forEach!

Hey,

I have two divs with class demo and want to change their border.
I can do this as follow:

<div class="demo">first div</div>
<div class="demo">second div</div>
	let myClass = document.getElementsByClassName('demo');
console.log(myClass); // is an array
 for (i = 0; i < myClass.length; i++) {
   myClass[i].style.border = '1px solid red';
 }

I know that myClass is an array. So, I should be able to iterate through it with forEach method, isn't it?
But how?

Thanks

Hey,

There are 3 different ways to create a new object:

let myObject = {};

var myObject = {
    name: “Engage",
    days: 30
}

var myObject = new Object();

Now my question is about the 2 different ways of instantiating a new object.

You can either use an existing object as prototype of your new object, like this:

var person = {
  name: "David",
  age: 20,
};
	// Create theDude object and use person object as its prototype
var theDude = Object.create(person);
	

Or you can use a Constructor function to create your new object like this:

function Person (name) {
    this.name = name;
    this.age = 20;
    this.getInfo = function getInfo() {
        return this.name + ' is ' + this.age + ' years old.';
    };
}
 
// Instantiating a new object using the new keyword and a constructor function
var theDude = new Person("David");
	

My question is:

What is the difference between the last 2 methods of instantiating a new object?
Which method is more recommended?
In the real world, which one is used more?

Thanks

Hi,

Hi,

I'm just learning the JavaScript touch event. For this I created this example:

Example on Codepen

In the above example, you can grab the element and move it to the right or left.

It works. However I want to limit the horizontal movement of the element (for example only 100px to the left and 100px to the right).

How can I do this?

Thanks

Hi,

In the following script, each time you click the button it shows 4 more elements:

Load 4 more elements

I need to change the script so that when all elements are visible and you click again the button, all elements get hidden except of the first 4 elements.

I tried for hours but couldn't find any solution. Could you please help me?

Thanks

I'm not seeing the issue you're describing. Which browser are you using?

Thanks for your help. I found and fixed the issue now.

I just want to understand it.

I mean if the first <p> element 50px margin-bottom and the second <p> element 50px margin-top has then the distance between two paragraphs should be 100px. Why is it still 50px ????

Hi,

Consider a web page with two adjacent paragraphs:

<p>  first paragraph</p><p>  second paragraph</p>

With this CSS code applied to a web page:

p {  background-color: red;  margin-top: 50px;  margin-bottom: 50px;}

What will be the distance between the two red rectangles displayed for the background color of these paragraphs?

Answer: I thought it should be 100px but NO, the distance between two paragraphs would be only 50px.

Can some one please explain WHY??

Tahnks

This is what I have to do:

Hi guys,I have following task in front of me and I really don't know where should I start.In a HTML form I have two input boxes for urls:URL FilterInclude:Exclude:The task is as follow:Include google - will include all the domains with "google" in the url.Exclude "referer" - will exclude all the domains that contains "referer" in the url.Is there any jQuery solution for this?Many thanks