make an Interactive Website 1

Make an Interactive Website

Build the Flipboard home page and learn how to add interactivity to your website.

Introduction

Web pages made with HTML and CSS display static content. They don't respond to user actions like clicking a mouse or typing a key.

JavaScript and jQuery are used to make web pages interactive.

• JavaScript is a programming language used to create web pages that change in response to user actions.

• jQuery is a collection of prewritten JavaScript code that lets us easily create interactive effects on our site.

Click on More and the navigation arrows in the web page to the right.

Your first program

Click on Flipboard at the top of the web page to the right. The web page has a dropdown menu which shows and hides when you click Flipboard.

This interaction is made with JavaScript and jQuery.

Here's what the web page's HTML looks like.

• To include CSS files in HTML we used the linkelement.

• Similarly, to include JavaScript files in HTML, we use the script element.

• To include CSS files in HTML, we use the linkelement. The link element tells the browser where to find a CSS file.

• Similarly, to include JavaScript files in HTML, we use the script element.

  The script element tells the browser where to find a JavaScript file. It has an attribute inside the opening <script> tag named src, which has the address of the JavaScript file.

• The first script loads in jQuery.

• The second script loads in app.js. This is where the code for the dropdown menu program lives.

When you click on Flipboard, the dropdown menu shows up but doesn't go away. Change the jQuery method from $(".dropdown-menu").show(); to $(".dropdown-menu").toggle(); to toggle the dropdown menu. Then click on Flipboard once to make the menu appear, and again to make it disappear.

$(document).ready()

The $(document).ready() waits for the HTML document to load completely before running the main() function.

This is important because JavaScript should only run after the web page has loaded completely in the browser - otherwise there wouldn't be any HTML elements to add interactivity to.

•