fifiteklemedhin / bit-camp-learning-lab-test Goto Github PK

Creating an HTML Page

Important: For this week's issues, you must commit your code to this repository to move on to the next step. At each step, you should be completing the task and committing your solution code.

After watching the live demo, you should know the basics of how to create a simple website using the coding language, HTML, and some CSS if you want your webpage to look fancy. Now, your task is to create your own HTML page that inputs an image using a <form> and outputs the image's emotion data and the user's recommended song.

If you still need some help learning HTML and CSS, checkout these resources:

W3Schools (HTML): https://www.w3schools.com/html/default.asp

W3Schools (CSS): https://www.w3schools.com/css/default.asp

Here's a list of HTML items you need to create (please use the id's specified)

1. header element that says anything you want... mine says Example Project
2. div element with id container that will surround all of your elements.

   1. empty div with id hidden-emotion and type hidden. This is going to hold but not display the emotion data we receive from Face API.

   2. form element with id image-form. Also specify onsubmit="handle(event)". Set the enctype attribute to multipart/form-data. <-- Remember that for forms that receive file uploads, we need to specify this type of encoding.

      • (next three elements are in the form element): input element that allows a file upload, where the user will upload an image. This link could be helpful. Set the onChange attribute to "loadFile(event)". Use the accept attribute to only allow image submissions. Finally, set the name attribute to image.

      • img element with id output- this is going to display the image that the user selects

      • button element with the type attribute set to submit. The text inside should say "Submit Picture" or something similar. This will submit the image.

   3. (Out of the form element now): empty div with the id emotion. This is where the emotion analysis results will be displayed.

   4. button with id song-button that says something like Find Song.

   5. Empty div with id song-detail. The song recommendation will be shown here.

Lastly, make sure to reference jQuery:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
     
    <script src="config.js" type="text/javascript"></script>
    <script src="song.js" type="text/javascript"></script>
    <script src="face.js" type="text/javascript"></script>

After that, you're done with the frontend. It's time to use JavaScript!

To move on, commit your code!

Prerequisite: Fundamentals of JavaScript(This should be done already! Read the bottom of the doc to continue)

Welcome to Bit Camp, where students get hands-on experience with software engineering. Before the program starts, please find some time to complete the following assignment: learn/review JavaScript fundamentals that will later be used in the program. To complete this assignment, you will be creating a digital clock using JavaScript to demonstrate your skills! If you need any help, refer to these resources:

W3Schools: https://www.w3schools.com/js/default.asp

Tutorialspoint: https://www.tutorialspoint.com/javascript/javascript_overview.htm

Modern JS: https://javascript.info/

If you have specific questions, try out Stack Overflow (it is super duper helpful):

Stack Overflow: https://stackoverflow.com/

After you have learned/refreshed your knowledge of JavaScript, let's get started on making that clock. Here is the list of the requirements and some extensions you can complete if you have extra time!

Requirements:

• Display 12/24 HR time with hours, minutes, and seconds.
• Must be created using JavaScript (plus appropriate HTML and CSS for formatting and styling)

Extensions:

• Turn your clock from digital to analog mode (hint: you're gonna need a lot of CSS for this...)
• Use CSS to style your clock (ie: make it blue, green, yellow, etc)
• Create animations for your clock (ie. when the minute hand changes, it rotates/spins)

Don't know where to get started? Start off by creating a new function that starts your clock:

function startTime() {}

After this, you will need to create three variables:

var hr = " ";
var min = " ";
var sec = " ";

Also, make sure to reference the HTML you created the "clock" id in:

document.getElementById("clock").innerHTML = " ";

Good job, hopefully your digital clock is fully working and your jQuery is linked to our HTML and CSS files. Your next task is a bit more tricky... you're making another clock but this time... in analog mode!

If you have any other questions or need further assistance, feel free to reach out to your TAs!

To continue, press the close issue bottom at the bottom of the page!

Downloading an IDE

For this assignment, you will follow the instructions and complete a task showing your knowledge of the subject at the end. If at any moment you need help, feel free to contact your TAs.

Visual Studio Code

Before we start coding, we need to install an IDE. An IDE is a software application that provides comprehensive facilities to computer programmers for software development. An IDE normally consists of at least a source code editor, build automation tools, and a debugger. Although there are hundreds of IDEs to choose from, we are going to use Visual Studio Code due to its popularity and integration with Azure (via extensions and libraries).

To install VSC, go to: https://code.visualstudio.com/download and choose your operating system (ie. Windows, Mac, Linux, etc). Then click Download and run the installer (usually a .exe or .zip). After it's installed, open it up and try it out. If you need some help navigating VSC, check out this super helpful Youtube video.

Make sure to use Dark Theme unless you want to live life on the edge...

Task 1: create a JavaScript file that prints out "Hello World" in the terminal.

Once you are done, add a comment below to move on.

Overview

Again, for this week you must commit code at each step to move on!

Login to Spotify's developer dashboard here. Then press create an app. Give it a cool name and press Create!

Click into your app and record the Client Id and Client Secret.

Before the actual programming, here's a quick overview of how the project is structured. We're going to be using the revealing module pattern in javascript, which kind of mimics classes in OOP languages like Java.

Watch this video, which gives a brief overview of this concept.

Let's take a look at an example of a module:

Notice that there are parentheses around the function– this indicates that it is an expression and should be evaluated first. So remember:

The first set of parentheses evaluate the function.

The second set of parentheses call the function.

So, the function is essentially declared and run immediately. This is called an IIFE, or immediately invoked function expression.

const car = (function(){
  var speed = 100;
  return {
  	forward() {
      speed += 1;
    }
	}
})();

Notice that because the variable speed was declared within this function, it acts as a private variable and can't be accessed outside of the function. However, returning the method forward allows us to change the value of speed indirectly. Important! All methods/variables are private unless included in the return object. This is how modules enable us to encapsulate private variables or methods and reveal other ones through returning them.

//doesn't work!
car.speed = 101;

//works
car.forward();

Also notice that the method forward does not exist globally. It must be called with a reference to car. This encapsulation is what will really make it feel object-oriented, with this example having an object-private field and an object-public method.

//doesn't work
forward();

//works
car.forward();

Essentially, just remember that modules:

• keep all variables and methods private unless explicitly revealed(in return)
  • prevents variables from polluting global scope
• are IIFEs- so they must be declared with function expressions and two sets of parentheses

For more reading, check out this excerpt on the revealing module pattern, as this is not a natural javascript concept if you're new to object-oriented programming.

In this project, we're going to have two separate modules that handle distinct concerns– one called APIController for handling API calls and the other called UIController for handling our HTML input fields. A third module, called APPController, will handle retrieving and displaying the data. Each module will have public methods that the APPController will call.

To get started, create a new js file called Song.js . I've already declared APPController for you. Finish writing the function expressions for APIController and UIController.

//look at the above example and the APPController declaration for syntax
//both API and UI modules take in no parameters

//spotify api call
const APIController = ??

// UI Module
const UIController = ??

  
const APPController = (function(UICtrl, APICtrl) {

})(UIController, APIController);

To move on, commit your code!

Parsing Multipart

At this point, you should have created a new HTTP trigger function in your Azure portal. If you have not done this, please do it now.
In your Azure Portal, go into your HTTP function and into the index.js file. You should see starter code there that has something like module.exports....
This is the file that we will be editing.

The Azure Function needs to:

1. receive and parse an image from a webpage
2. call the Face API and analyze the image

We're going to be focusing on Part 1, which involves parsing multipart form data. In any HTML <Form> element that receives involves a file upload (which ours does), the data is encoded in the multipart/form-data method. The default http encoding method is application/x-www-form-urlencoded, which encodes text into name/value pairs and works for text inputs, but it is inefficient for files or binary inputs. multipart/form-data indicates that one or more files are being inputted. Parsing this type of data is a little more complicated than usual. To simplify the process, we're going to use an npm library called parse-multipart.

To import Node packages, we use the require function:

var multipart = require("parse-multipart");

This imports the parse-multipart package into our code, and we can now call any function in the package using multipart.Function().

Your function should look like this:

var multipart = require("parse-multipart");

module.exports = async function (context, req) {
    context.log('JavaScript HTTP trigger function processed a request.'); 
};
 

Before we start parsing, go to the parse-multipart documentation for some context on what the package does. Look specifically at the example in the Usage section and what they are doing, as we're going to do something similar.

Notice that multipart.Parse(body, boundary) requires two parameters. I've already gotten the boundary for you– just like the documentation example, our boundary is a string in the format "----WebKitFormBoundary(random characters here)".

In the multipart.Parse() call, you need to figure out what the body parameter should be.

Hint: It should be the request body. Think about the example Azure function. How did we access that?

//here's your boundary:
var boundary = multipart.getBoundary(req.headers['content-type']);
  
// TODO: assign the body variable the correct value
var body = '<WHAT GOES HERE?>'

// parse the body
var parts = multipart.Parse(body, boundary);

To move on, comment the code that you currently have in the Azure Function below.