/ajax-to-the-max

Workshop for Gender in Music hackathon led by Hannah Park and Kaitlin Gu (4/30)

Primary LanguageJavaScript

Ajax to the Max

Workshop for the Gender in Music Hackathon led by Hannah Park and Kaitlin Gu. Forked from Blake Tarter's Giphy API Search project on Codepen.:sparkles: :sparkles: :sparkles:

Contacts

Kaitlin Gu: kaitlin.gu@gmail.com
Hannah Park: hannahmimipark@gmail.com

Agenda

HTML // CSS basics
How to build and style your own static page!
jQuery basics
How to call an API using the GIPHY API
How to parse and use an API response

Jake the Dog

####HTML and CSS

######HTML HTML is the basic building block of a web page. Each html site follows the basic structure.

<html>
  <head>
    <title>My First Web page</title>
  </head>
  <body>
    The content of my first web page
  </body>
</html>

######CSS You can use CSS to style your web page. CSS describes how HTML should be laid out on the web page.

The following code describes styling a h1 tag, this is an example of a tag selector:

/* Selector {Property: Value;} */
h1 {color: blue;}

You can also style based on class and id selectors:

#myparagraph {
  font-family: "Helevtica";
  font-size: 13px;
}

.title {
  font-family: "Times";
  font-size: 18px;
  color: blue;
}

####Building a Static Website Let's put HTML and CSS together to generate a static website. First, let's have a file named index.html and a stylesheet titled style.css

######index.html

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>My Webpage</title>
  </head>
  <body>
    <h1>Welcome</h1>
    <p id = "changeme">This is the content of my web page</p>
    <p>This is another paragraph</p>
  </body>
</html>

######style.css

h1{
  color: red;
  font-family: "Helvetica", sans-serif;
}

p{
  font-size: 10px;
}

####jQuery Basics jQuery is built on top of JavaScript and allows you to elements of an HTML page. We'll be going over event listeners and selectors.

######Selectors You use the $ to select ids, classes, and tags by name:

$('tag')
$('#id')
$('.class')

Once they are selected, you have a variety of methods that you can call:

.addClass('className');
.removeClass('className');
.toggleClass('className');

######Event Listeners

$( "button" ).on( "click", function() {
    console.log( "click" );
});

Also other events such as click, hover, keyup, and keydown

Exercise:

Create a site with a button that will enlarge the text upon click.
Example Interaction: Example Interaction Example Solution