diff --git a/Exercises/Exercise2/Exercise2_Description.md b/Exercises/Exercise2/Exercise2_Description.md new file mode 100644 index 0000000000000000000000000000000000000000..b6efeb4debd00f28c73bcaed9c4d80341cc0da5f --- /dev/null +++ b/Exercises/Exercise2/Exercise2_Description.md @@ -0,0 +1,31 @@ +# Exercise 2: + +## Due Date: Tuesday January 14 2025, 11:55 PM EST + +## Objectives: To get familiar with javascript functional prototypes, arrays, template strings, and gain more exposure to interactions with the DOM. + +## Specifications/Requirements + +1. Description: +Â Â +Â Â For this exercise we all of your work will take place inside of exercise2.html. There are four different methods you must implement, all of which use the functional prototypes discussed in order to obtain the significant data and form. The four functions are: + +Â Â actionMovies() - Display a list of action movies that were released in 2018. Output: <movie_title> (<year>) + +Â Â tomHanks() - Display a list of all comedy movies that Tom Hanks acted in. Output: <movie_title> (<year>) + +Â Â soo2017() - Display a list of all movies that came out in 2017 sorted alphabetically by movie title. Output: <movie_title> (<year>) + +Â Â movieCount() - Display the number of movies that were released each year. Output: <number_of_movies> + +Â Â It is advised that you acquaint yourself with the way in which we use the convertToHTML() method provided for you as well as how you can use the innerHTML attribute to set and get data in an HTML element. + +2. Formating and output: +Â Â You will be using the innerHTML attribute to set your results to the the unorded list <ul> with classname `list`. You should use template strings in order to display and format your ouput to match the specs (`${}` for those that need a reminder) + +3. Additional Notes: +Â Â You should not alter the `fetch()` call,this is a way we obtain the movie data from the internet. This should go without saying, but you should not hardcode your results, we will check your submissions to make sure this does not happen. You should use the functional array prototypes that we have gone over in class and that are mentioned in this exercise (map, sort, filter, reduce), using for loops, for..of loops, while loops, etc will result in a substantial amount of point deduction. + +4. Submission: + +To deliver your submission you will need to commit your changes locally and push to your repo on the university gitlab server. You __MUST__ verify that your push was successful by logging into gitlab and verifying that you can see your files. You should not and do not need to create any other files to complete this exercise. \ No newline at end of file diff --git a/Exercises/Exercise2/exercise2.html b/Exercises/Exercise2/exercise2.html new file mode 100644 index 0000000000000000000000000000000000000000..9e7d4b3a74b1e10e341b3842526d222fc5cb41a8 --- /dev/null +++ b/Exercises/Exercise2/exercise2.html @@ -0,0 +1,51 @@ +<html> + <head> + <title> + Exercise2 + </title> + </head> + <body> + <!--Buttons corresponding to each function below--> + <button type="button" onclick="actionMovies()">Action Movies</button> + <button type="button" onclick="tomHanks()">Tom Hanks</button> + <button type="button" onclick="soo2017()">2017 Movies</button> + <button type="button" onclick="movieCount()">Movie Count</button> + + <h2>Movie Lists</h2> + <hr /> + <ul class="list"></ul> + <script> + const url = + "https://raw.githubusercontent.com/prust/wikipedia-movie-data/master/movies.json"; + + //DO NOT MODIFY fetch! + const movies = []; + fetch(url) + .then(resp => resp.json()) + .then(data => movies.push(...data)); + //Your task is to complete these four functions, according to the specifications + //Action Movies - Display a list of action movies that were released in 2018. Output: <movie_title> (<year>) + function actionMovies() { + console.log(event.type) + } + + //Tom Hanks - Display a list of all comedy movies that Tom Hanks acted in. Output: <movie_title> (<year>) + function tomHanks() {} + + //Soo 2017 - Display a list of all movies that came out in 2017 sorted alphabetically by movie title. Output: <movie_title> (<year>) + function soo2017() {} + + //Movie Count - Display the number of movies that were released each year. Output: <year> : <number_of_movies> + function movieCount() {} + + //Function that converts arrays into seperate HTML list elements. (Hint: Use this!) + function convertToHTML(query) { + const results = query.map(movie => `<li>${movie}</li>`).join(""); + return results; + } + + //A javascript reference to the unordered list with classname list. (Hint: Use this!) + const movieHTML = document.querySelector(".list"); + </script> + </body> +</html>