mdinfotech.net  



Google Classroom exercise on the client server model and JSON.



Watch the following video and answer the questions below in a Google docs document.
  • Watch The Client Server Model - Clients and Servers
    1. Define client.
    2. Give examples of a client computer.
    3. Give examples of a client program.
    4. What is a server?
    5. What is a virtual server?
    6. Who makes requests?
    7. Who provides repsonses?
    8. What is the client-server model?
    Google Classroom exercise on the client server model and JSON. Read the following tutorials:

    Fetch and API's Lesson: Ms. Wear's Fetch and API's Notes for Web Dev 11

    In this unit, you will learn how to read the documentation and fetch data for API's that produce their content in JSON. You will also learn how to use JavaScript to pull specific information out of the data to display as content in your app.

    Resources
    Using Fetch
    Understanding Promises
    Understanding Arrow Functions
    1. Create a responsive interface using HTML and CSS.
    2. Fetch the content from the API using an event like onload, onclick, or onchange to trigger it.
    3. Receive the content from the API in JSON.
    4. Format and display the data you wish to show.

    In this unit, you will learn how to read the documentation and fetch data for API's that produce their content in JSON. You will also learn how to use JavaScript to pull specific information out of the data to display as content in your app.

    Download index.html and apiexample.js.

    Partner Activity:

    Run and examine this code and figure out how it works. Code will be explained in class.

    Answer these questions:

    1. What js function gets called when the button is clicked?
    2. What actions happen when the page finishes loading?
    3. What does fetchActivity do?
    4. What does updateWebsite do?
    5. What can you do to see what data is storing?

    Try to do this:

    1. Add the number of participants required to the webpage.
    2. If the accessibility is < 0.3, print on the webpage "Easy" otherwise print "Complex"


    In Class Exercise: Read the BoredAPI Documentation.
    1. If the link property is non-empty, provide a clickable link that goes to the website about the activity.
    2. Add a new button to the page and a new div tag to display information. The button should say "Get a Recreational Activity". When it is clicked, it will display a recreational activity in the new div tag.

    This exercise demonstrates how to use two API's on the same website.

    Code along in class to create a "Word of the Day" app.

    In Class Exercise: Word of the Day Fun Project Maximize the information shown for each definition and include playable pronunciations! In this project we will be using two api's:
  • Word of the Day
  • Dictionary API
  • 6/10
    Styled
    Shows word and if a definition exists:
    
    the first definition, 
    and an audio clip
    and if a definition does not exist: an appropriate message
    
    8/10
    Styled
    Shows word,
    the part of speech, 
    the first definition, 
    one phonetic text (if it exists), 
    and an audio clip (if it exists)
    and if a definition does not exist: an appropriate message
    
    10/10
    Styled
    Shows word, 
    the part of speech, 
    all of the definitions, 
    all of the phonetic text (if they exist),  
    all of the audio clips (if they exist)
    and if a definition does not exist: an appropriate message
    
    11/10
    Styled
    Shows word, 
    the part of speech, 
    all of the definitions, 
    all of the phonetic text (if they exist),  
    all of the audio clips (if they exist)
    all synonyms and antonyms if they exist,
    and if a definition does not exist: an appropriate message
    
    
    Using the code from the Bored API Exercise, Ms. Wear will demonstrate how to show images from the Dog API.
    Code: index.html and apiexample.js.
    What to do:
    1. Add a button that when clicked, loads a random dog picture.
    2. Add 5 more buttons, each labelled with a breed. When the button is clicked, a random picture of that breed is shown.
    3. Print a list of all the dog breeds available in the page.
    4. Turn this list into a drop list (html select element) and when a breed is selected, it shows a random picture of that breed.

    A lesson on how to use the TV Maze API

    Sample Code: Example using TV Maze with Complex JSON

    In Class Exercise: Use a for loop to display info for all 10 TV shows returned by TV Maze (instead of just the one in the sample code).

    1. Refer to the TV Maze API.
    2. Download sample code with Lightboxes working: tvmazebasecode.zip
    3. When an episode is clicked on, display a lightbox with the following: episode image, name, season, number, and description.
    4. Validate the HTML and CSS
    5. No JS errors should appear in the console.
    6. Create a simple, attractive, design that works, and looks good, on both devices and desktops.
    Assessment (/15)
    Basic Design of Website							
    Create a simple, modern, attractive, design that works and looks good on both devices and desktops.							
    	5	                4	                    3	                2	            1		
    	All criteria met	Most criteria met	Some criteria met	Multiple Issues	    Incomplete		
    	All criteria met	1 -2 issues	        3-4 small issues        4+ problems	    Minimal, or no CSS Design
    	                                                or does not work on 
    	                                                one of mobile/desktop			
    Added Functionality							
    The code provided shows a search bar that allows the user to search for a TV Show, then display the TV shows 
    search results along with an episode list. You are to add the following functionality:
    When an episode is clicked on, display a lightbox with the following: episode image, name, season, number, and description.							
    	5	                4	               3	                2	            1		
    	All criteria met	Most criteria met	Some criteria met	Multiple issues     Incomplete		
    	All criteria met	1 -2 issues	        3-4 small issues        4+ problems	    It does not do what is it supposed to.		
    Code							
    HTML Validates
    CSS Validates
    No JS Error in console
    Practice separation of languages							
    	5	                4	                3	                2	            1		
    	All criteria met	Most criteria met	Some criteria met	Multiple issues	    Incomplete		
    	All criteria met	1 -2 issues	        3-4  issues	        4+ problems         Not coded to standards taught in class.					
    			
    			
    			
    			
    If you choose an API that requires a hidden API key, or is giving you CORS errors on glitch, use this example.
    Ms. Wear's Example of Hidden API Keys and Preventing CORS errors on Glitch