{"id":19261980,"url":"https://github.com/hacksu/jquery_and_ajax_tutorial","last_synced_at":"2026-02-27T16:41:42.674Z","repository":{"id":149141459,"uuid":"128981549","full_name":"hacksu/jquery_and_ajax_tutorial","owner":"hacksu","description":"Simple tutorial on Ajax and JQuery","archived":false,"fork":false,"pushed_at":"2018-04-10T22:36:43.000Z","size":10,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-01-05T10:12:25.053Z","etag":null,"topics":["beginner","lesson"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hacksu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-10T18:57:17.000Z","updated_at":"2020-02-23T22:24:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"a73d2cd2-3b48-4d34-a64a-a0d02fb74a70","html_url":"https://github.com/hacksu/jquery_and_ajax_tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2Fjquery_and_ajax_tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2Fjquery_and_ajax_tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2Fjquery_and_ajax_tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2Fjquery_and_ajax_tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hacksu","download_url":"https://codeload.github.com/hacksu/jquery_and_ajax_tutorial/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240364295,"owners_count":19789756,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["beginner","lesson"],"created_at":"2024-11-09T19:29:16.787Z","updated_at":"2026-02-27T16:41:37.648Z","avatar_url":"https://github.com/hacksu.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# JQuery and Ajax Tutorial\n\nIf you're here at the Hacksu lesson, here are the links you'll need. I'll go over everything else in the lesson:\n\nYou can follow along here: https://codepen.io/bhollan5/professor/mxvZPg/\n\nHere's a link to the first API we're using: https://yesno.wtf/api\n\nHere's a link to the second API we're using: http://funtranslations.com/api\n\nOkay, here's the tutorial:\n\n## Step 1: Wait, what are we doing again?\n\nWe're learning JQuery and Ajax!\n\nAjax is a tool to let us make HTTP requests. We're going to be using it to get information from an API. Basically, APIs let us programatically get data from databases. \n\nAjax can be used with vanilla javascript, but it's way easier to use with JQuery, so we're using that. JQuery is an extremely basic Javascript library.\n\n## Step 2: Setting up our document\n\nWe're going to be using [Codepen](http://codepen.io) for this project! Open it up, click `Create` in the upper right hand corner, and click `New Pen`.\n\nIn the HTML box, write this for now. I'm not going to go over HTML in this tutorial, so if you don't know what these elements are, feel free to google:\n\n```\n\u003cbutton onclick=\"getAnswer()\"\u003eGet a Yes or No Answer\u003c/button\u003e\n\n\u003cbr\u003e\u003cbr\u003e\nAnswer: \u003cspan id=\"answer\"\u003e\u003c/span\u003e\n\u003cbr\u003e\n\u003cimg id=\"myImage\" src=\"\"\u003e\n```\n\nNext, in the JS box, click on the gear icon, click the drop down labeled `Quick Add`, and add Jquery (NOT jquery UI).\n\n## Step 3: Using Jquery to make our first API call\n\nJquery lets us access elements in our HTML by their `id` attribute more easily, and manipulate it more easily. For example, if we wanted to select the div with the id `answer` and set its inner text to say `Hello World`:\n\n```\n// With vanilla JS:\ndocument.getElementById('answer').innerHTML = \"Hello World\";\n\n// With JQuery:\n$('#answer').html('hello world');\n```\n\nIn the following code, I set up a function that can be called by our button that gets data from the yesno.wtf api and outputs it on our page:\n\n```\nfunction getAnswer() {\n  \n  console.log(\"Calling api: \");\n  \n  // Setting the page to say 'loading' - this will get overwritten when\n  // the API is done getting our data.\n  $('#answer').text(\"Loading...\");\n  $('#myImage').attr('src', '');\n  \n  // Here's the API call! Note that the function defined here in the .done function\n  // is a \"callback\" function. This means that it won't execute until the API request is complete.\n  // Our call back function is passed data, (which we could have named anything, but i chose to call it \"data\")\n  $.ajax('https://yesno.wtf/api').done(function (data) {\n    \n    console.log(\"Our response:\", data);\n    $('#answer').text(data.answer);\n    \n    // This is JQuery shorthand for changing the 'src' attribute of our img tag\n    $(\"#myImage\").attr('src', data.image);\n    \n  }).fail(function() {\n    // This function will be called if the API call fails. \n    // You can test it by changing the ajax URL above to anything that isnt an API.\n    $(\"#answer\").text(\"There was an error!\");\n  })\n  \n \n  // Note that the above callback functions will run AFTER any code you put down here!\n  // That's how asynchronous functions run - asynchornously!\n  \n}\n```\n\n## Step 4: Our second API call\n\nI'm going to append some stuff into our HTML now, so we can make a second API call! Here's our new, updated HTML:\n\n```\n\u003cbutton onclick=\"getAnswer()\"\u003ecall function\u003c/button\u003e\n\n\n\u003cbr\u003e\u003cbr\u003e\nAnswer: \u003cspan id=\"answer\"\u003e\u003c/span\u003e\n\u003cbr\u003e\n\u003cimg id=\"myImage\" src=\"\"\u003e\n\n\u003c!-- Below is the new stuff --\u003e\n\n\u003cbr\u003e\u003cbr\u003e\n\u003cinput value=\"hi\" id=\"myInput\"\u003e\u003c/input\u003e\n\n\u003cbutton onclick=\"translateText()\"\u003eTranslate!\u003c/button\u003e\n\n\u003cbr\u003e\u003cbr\u003e\n\n\u003cdiv id=\"translation\"\u003e\u003c/div\u003e\n```\n\nHere's the new JS function we'll be using. I strongly recommend you go to http://funtranslations.com/api and change the URL to the language of your choice!\n\n```\nfunction translateText() {\n  var text = $(\"#myInput\").val();\n  console.log(\"Our text:\" + text)\n  \n  $.ajax('https://api.funtranslations.com/translate/leetspeak.json?text='\n        + text).done(function (data) {\n    console.log(data);\n    \n    $(\"#translation\").text(data.contents.translated)\n  })\n  \n}\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhacksu%2Fjquery_and_ajax_tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhacksu%2Fjquery_and_ajax_tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhacksu%2Fjquery_and_ajax_tutorial/lists"}