This is a basic example of how to write an AJAX request with raw JavaScript. Or in other words, query an API and output the response onto a page. Here, we're using the StackOverflow API.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h2>Github Search API</h2> | |
<input type="text" placeholder="Github Username" id="username"> | |
<h3><button onclick="topLanguages()">Get Top Languages</button></h3> | |
<p>Top Languages Summary:</p> | |
<pre id="d"></pre> | |
<hr> | |
All Repos: | |
<pre id="a"></pre> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h2>Github Search API: Quantify Frameworks</h2><input type="text" placeholder="Username" id="username"> | |
<h4><button onclick="get()">GET</button></h4> | |
<p>Response:</p> | |
<pre id="a"></pre> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>Location Object</h1> | |
<div class="search-bar" id="url"> | |
<span id="origin"></span><span id="path"></span><span id="hash"></span> | |
</div> | |
<div class="container"> | |
<a href="#home">home</a> | |
<a href="#about">about</a> | |
<a href="#portfolio">portfolio</a> | |
<div id="response"></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<heading> | |
<div class="wrapper"> | |
<h1>asdf</h1> | |
<h2>qwerty</h2> | |
</div> | |
</heading> | |
<section> | |
<div class="wrapper"> | |
<div class="form-row"> | |
<label>Show Name</label> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<table> | |
<thead> | |
<tr> | |
<th></th> | |
<th>Sun</th> | |
<th>Mon</th> | |
<th>Tue</th> | |
<th>Wed</th> | |
<th>Thu</th> | |
<th>Fri</th> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="wrapper"> | |
<h1>How well does your team use data?</h1> | |
<h5>Select the number that best applies</h5> | |
<form action="#"> | |
<hr /> | |
<div class="average"> | |
<div class="line"></div> | |
<p>average</p> | |
</div> | |
<ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<section class="survey"> | |
<div class="wrapper"> | |
<h2 class="title text-center">headline</h2> | |
<p class="intro text-center">text</p> | |
<form class="survey__form" action="#"> | |
<!--<hr class="survey-hr"/>--> | |
<ul class="radio-list"> | |
<li class="radio-list__radio-item"> | |
<input class="radio-item__input" type="radio" name="radio-choice" id="radio-choice-1" value="choice-1"/> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
In file MyApp/store/Menu.js | |
Ext.define('MyApp.store.Menu', { | |
extend: 'Ext.data.Store', | |
requires: [ | |
'MyApp.model.menu.Root' | |
], | |
model: 'MyApp.model.menu.Root', |