Jump to content

Recommended Posts

With jQuery, you must search on Flickr, using APIs, to get 5 images per keyword and create appropriate baskets. User should be able to drag & drop received pictures in the appropriate basket. The picture is moving back in case of throwing into the wrong basket. At any moment, you should show the pictures you put on the basket by clicking on it. You must show a message after sorting all the pictures. All code must be written as a jQuery plugin. Check interface example on second page of this paper. Flickr API documentation: https://www.flickr.com/services/api/

944111832_.png.7804064e31d4b44425af65d61ac7e7b4.png      Прощу помоч. Я начинаюшый и Jquery не очень понимаю.

Edited by Edmon Arzumanyan
Link to post
Share on other sites
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <title>Task</title>
    <link rel="stylesheet" href="html.css">
  </head>
<body>
    Search for <b>cats, dogs, cakes</b>, or anything else that takes your fancy 🙂
    <br />
    <input id="searchterm" />
    <button id="search">search</button>
    <p align="center" id="results" style="width:100%"></p>
    <div id="droppable" class="imgarea"></div>
    

    <script>
    var i=0;
      $("#search").click(function(){
        $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
        {
          tags: $("#searchterm").val(),
          tagmode: "any",
          format: "json",
        },
        function(data) {
          $.each(data.items, function(i,item){
            $("<img/>").attr("src", item.media.m).prependTo("#results");
             $("<img/>").attr("title", '(input.val())').prependTo("#results");
            if ( i == 4) return false;
            
          });
          $("<img/>").draggable();
        });
      });
      </script>
      <script>
      $( "#droppable" ).droppable({
      drop: function( event, ui ) {
      i++
      if ( i === 5) {
       alert("лимит картинок дастигнут(5 картинок)");
       }
      }
    });
</script>

</body>
</html>

Пока что сделал вот столько. 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Member Statistics

    47,175
    Total Members
    1,451
    Most Online
    ratus
    Newest Member
    ratus
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Свежие Темы

  • Последние сообщения

    • В случае, когда используется float, margin работает как и прежде. Но, визуально, может казаться что это не так. Дело в том, что в таком случае блоки не имеют аналогичного влияния друг на друга из-за обтекания (float). Вот приблизительно то, о чём Вы говорите https://jsfiddle.net/klierik/bw418vqt/2/
    • Вот еще вариант один:   <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <script> let Person = function Pers(name, age, gender) { // Имя будет Pers this.name = name; this.age = age; this.gender = gender; }; Person.prototype.greet = function () { console.log("My name is " + this.name); } let Person2 = Person; Person2.prototype.goodbye = function () { console.log("Goodbye, " + this.name); } let Son = function (age, skils) { // Имя будет Son // Родительский конструктор вызывается до дочернего конструктора, // чтобы не было перезаписывания новых полей. Person.call(this, undefined, age, undefined); this.skils = skils || []; this.gender; } let Sunny = Son; Sunny.prototype = Object.create(Person.prototype); Sunny.prototype.constructor = Sunny; // Имя будет Son let a = new Person("Петя", 25, "female"); console.log(a); console.log(a.constructor.name); let b = new Son(18, ["рисует", "поет", "водит"]); console.log(b); console.log(b.name); </script> </body> </html>   Задался еще таким вопросом. Я передал аргументы конструктору Person создав объект а,   let a = new Person("Петя", 25, "female");  а как получить эти значения объекту b и вывести? Если написать так:     console.log(b.name);  получим undefined при выводе, а мне к примеру нужно унаследовать от родителя эти значения name, age, gender и вывести через потомка. Метод call дал возможность greet вызвать саму себя?
    • HTML элемент input должен содержать атрибут type: Атрибут type | htmlbook.ru
  • Popular Contributors

×
×
  • Create New...