Well, this is 04:43 AM. I just want to sleep. This is about page. My creativity just died. Yeah.
+` + }).join(" ") + + htmlPart.innerHTML = dashedName + +} + +q2renderStudents() + + +// Q3: Using filter(), write a function that returns an array with students' names that starts with the letter 'm' and display it in the div with ID "studentsNamesStartWthM". + +const q3renderStudents = async() => { + let data = await jsonResult() + + function checkMLetter(letter){ + if(letter.charAt(0) == 'M'){ + return letter + } + } + + + let htmlPart = document.getElementById("studentsNamesStartWthM") + + let mName = data.students.filter(checkMLetter) + + htmlPart.innerHTML = mName + +} + +q3renderStudents() + + +// Q4: Using reduce(), Write a function that returns the number of students that their first name start with the letter 'a' using reduce and display it in div with ID "NumberOfStudentsNamesStartsWithE" + +const q4renderStudents = async() => { + let data = await jsonResult() + + +let countedNames = data.students.reduce(function(allNames, name){ + + if(name[0] == "E" || name[0] == "e"){ + allNames++ + } + return allNames +},0) + +// console.log(countedNames) + + let htmlPart = document.getElementById("NumberOfStudentsNamesStartsWithE") + htmlPart.innerHTML = countedNames + +} + +q4renderStudents() + + + +// Q5: Write a function that returns the index of the first student name that starts with the letter 'h' and display it in the div with ID "IndexOfFirstStudentNameStartsWithH". + + +const q5renderStudents = async() => { + let data = await jsonResult() + // console.log(data.students) + + + for(let i = 0; i < data.students.length; i++){ + if(data.students[i].indexOf("H") == 0){ + let htmlPart = document.getElementById("IndexOfFirstStudentNameStartsWithH") + return htmlPart.innerHTML = data.students[i] + } + } +} +// findIndex! +q5renderStudents() + + + + +// Q6: Write a function that adds the instructors array to the beginning of the students array and returns a new array called everybody. +// 1) Console log the new array +// 2) Use a spread operator to achieve this + + +const q6renderStudents = async() => { + let data = await jsonResult() + let studentsArray = data.students + let instructorsArray = data.instructors + // console.log(studentsArray) + let everybody = []; + everybody = [...instructorsArray,...studentsArray] + // console.log(everybody) + let html = document.getElementById("listOfEverybody") + html.innerHTML = everybody +} + +q6renderStudents() + + + +// Q7: Write a function to update the key: "title" to the value "Re:Coded Istanbul Bootcamp" to the object that you fetched in Q1. +// Did this modify the JSON file? Why or why not? + + + +const q7renderStudents = async() => { + let data = await jsonResult() + let newData = {...data} + newData.title = "Re:Coded Istanbul Bootcamp" + console.log(newData) + return newData +} + +q7renderStudents() + +// // Q8: Write a function to add the key: "program manager" and the value "Jaime Mikush" to the object that you fetched in Q1. +const addKey = async() => { + let data = await jsonResult() + data['program manager'] = 'Jaime Mikush' + // Object.assign(data, {"program manager": "Jaime Mikush"}); + console.log(data) +} +addKey() + + +// // Q9: Print the object that you fetched in Q1. + +const print = async() => { + let data = await jsonResult() + console.log(data) +} +print() +// good luck 😈 \ No newline at end of file diff --git a/class-17-js-review/hafiseNur-ceyhun/style.css b/class-17-js-review/hafiseNur-ceyhun/style.css new file mode 100644 index 0000000..e69de29 diff --git a/madLibz/bilal-ceyhun/README.md b/madLibz/bilal-ceyhun/README.md new file mode 100644 index 0000000..deb8916 --- /dev/null +++ b/madLibz/bilal-ceyhun/README.md @@ -0,0 +1,63 @@ +# Re:Coded Mad Libz + +## What is Mad Libs? +See [wikipedia](https://en.wikipedia.org/wiki/Mad_Libs). Yes, I know this section is short, do not skip this, **please read what Mad Libs is or the rest of this will make no sense**. In normal mad libs, you usually just insert the word, but in this version, it's more like a "fill in the blank" of an existing story. + +## Instructions + +### Collaboration requirements +Please don't split the code. Write every line of code together. In each group, every person should understand every line of code. See [pair programming](Pair_programming). + +### Write a story + +In `story.txt`, you'll find a brief story **that you need to replace with your own**. By the way, for the purposes of [parsing](https://en.wikipedia.org/wiki/Parsing), you're only allowed to use periods and commas as grammar. + +Confusingly, you should write out the full story, although the "blanks" will be anywhere a grammar part is denoted. The reason for this will be apparent later in some of the extra challenges. + +For example: +* `Louis[n]`: normally it says Louis, but the user should replace it with a *noun* +* `went[v]`: normally it says went, but the user should replace it with a *verb* +* `[a]` for adjective... + +Note that when you write a story, the period and commas should go after the part of speech, e.g., `Louis[n].` (NOT `Louis.[n]`). + +### Code + +In this project, you will be using HTML, CSS, and JS in unison in order to create a variant of a Mad Libs game with the story of your choice. + +Below, we discuss the requirements. We use the word "input" to refer to the blanks in the Mad Libs story. + +Here is a very, very simple visual example of what it might look like; however, all styling is at your liberty in this project. + +### Barebones Example + + +#### Functional requirements + +0. **Parsing the story:** I've already written some code for you that reads in the file `story.txt` into a string. However, you need to process it into a format that will allow you to keep track of "blanks." See `madlibs.js` for further instructions. You will likely want to [read about regular expressions](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/regular-expressions/) (yes, this is extra expected reading :) ). It's possible, but annoying, to do this without regular expressions. + +1. **Showing the story:** It should show **two copies** of the story. In one copy ("edit view"), +all words in the story with blanks (e.g., `Louis[n]`, `went[v]`, ...) are replaced with inputs. This should be in `div.madLibsEdit`. In the second copy ("preview"), it should show the same story, but formatted prettily (without the blanks!). Refer to the example picture above. + +2. **Hotkeys:** When the user presses `Enter` in an input, it should move the cursor to the next input in the story. + +3. **Constraining user inputs:** An input should be allowed to have a maximum of 20 characters. + +4. **Live update:** Whenever the user updates a blank in the edit view, it should update the preview any time a new character is typed (hint: this is handling an event of sorts). The user should **not** have to click a button in order to update the preview. + +5. **Story length:** Your story should have at least 10 blanks. + +#### Styling requirements + +0. **Responsiveness**: When the screen is small, the story should take the full width of the screen. When the screen is larger, as on a computer. Values "small" and "large" are up to you to decide. + +1. **Flexbox**: Use at least one flexbox. + +2. **Highlighting currently focused input**: There should be three possible styles of inputs (style is a vague word here, they just need to be distinguishable to the user): +* currently highlighted input (if the user is typing in one) +* filled out input (the user has already put a word there -- might require JS here ;) ) +* empty input (the user has not already put a word there). + + + +Louis[n] went[v] to the store[n], and it was fun[a]. He taught[v] the class[n]. \ No newline at end of file diff --git a/madLibz/bilal-ceyhun/do-not-touch.js b/madLibz/bilal-ceyhun/do-not-touch.js new file mode 100644 index 0000000..f61cee3 --- /dev/null +++ b/madLibz/bilal-ceyhun/do-not-touch.js @@ -0,0 +1,9 @@ +/** + * DO NOT TOUCH ANY OF THE CODE BELOW HERE. + * + * Or you will be very sad. + */ +const getRawStory = () => { + return fetch('./story.txt') + .then(response => response.text()); +}; \ No newline at end of file diff --git a/madLibz/bilal-ceyhun/index.html b/madLibz/bilal-ceyhun/index.html new file mode 100644 index 0000000..e809827 --- /dev/null +++ b/madLibz/bilal-ceyhun/index.html @@ -0,0 +1,48 @@ + + + + + + + + + +
+
+ Powered By: Bilal && Ceyhun
+
+
+
+
+
+
\ No newline at end of file
diff --git a/madLibz/bilal-ceyhun/madlibs.js b/madLibz/bilal-ceyhun/madlibs.js
new file mode 100644
index 0000000..a7ceff6
--- /dev/null
+++ b/madLibz/bilal-ceyhun/madlibs.js
@@ -0,0 +1,157 @@
+/**
+ * Complete the implementation of parseStory.
+ *
+ * parseStory retrieves the story as a single string from story.txt
+ * (I have written this part for you).
+ *
+ * In your code, you are required (please read this carefully):
+ * - to return a list of objects
+ * - each object should definitely have a field, `word`
+ * - each object should maybe have a field, `pos` (part of speech)
+ *
+ * So for example, the return value of this for the example story.txt
+ * will be an object that looks like so (note the comma! periods should
+ * be handled in the same way).
+ *
+ * Input: "Louis[n] went[v] to the store[n], and it was fun[a]."
+ * Output: [
+ * { word: "Louis", pos: "noun" },
+ * { word: "went", pos: "verb", },
+ * { word: "to", },
+ * { word: "the", },
+ * { word: "store", pos: "noun" }
+ * { word: "," }
+ * ....
+ *
+ * There are multiple ways to do this, but you may want to use regular expressions.
+ * Please go through this lesson: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/regular-expressions/
+*/
+
+// Using this one we are removing spaces /\s+/g
+// Using this one we are removing anything with [] /\[[a|v|n]\]/g
+
+function parseStory(rawStory) {
+ // Your code here.
+
+ const typeObject = {
+ '[a]': "Adjective",
+ '[v]': 'Verb',
+ '[n]': 'Noun'
+ }
+
+ const punctuation = /[,.“”"':!?]/g; // Using this to check for punctuation marks.
+ const word = /\w+/g; // Using this to get all the word
+ const type = /\[[a|v|n]\]/g; // Using this to check for [n], [v], or [a]
+
+ const outputArr = []; // Declaring the array of objects.
+
+ let wordsArr = rawStory.split(/\s+/g); // Split the text
+
+ for (let i = 0; i < wordsArr.length; i++) { // Iterating throught the array of Strings.
+ const object = {};
+ const puncObj = {};
+
+ object.word = wordsArr[i].match(word)[0]; // Assigning only the word to object.word
+
+ if(punctuation.test(wordsArr[i])) { // Checking if the word has any punctuation
+ puncObj.word = wordsArr[i].match(punctuation)[0];
+ console.log(puncObj);
+ }
+
+ if(type.test(wordsArr[i])){ // Checking if the word has any type
+ object.pos = typeObject[wordsArr[i].match(type)[0]]
+ }
+
+ outputArr.push(object); // Pushing the object
+ if (puncObj.hasOwnProperty('word')) outputArr.push(puncObj); // if puncObj has a word key, then push it
+
+ }
+ console.log(outputArr);
+ return outputArr; // Returning the array of objects.
+}
+
+/**
+ * All your other JavaScript code goes here, inside the function. Don't worry about
+ * the `then` and `async` syntax for now.
+ *
+ * You'll want to use the results of parseStory() to display the story on the page.
+*/
+
+getRawStory()
+.then(parseStory)
+.then((processedStory) => {
+
+ const madLibsEdit = document.getElementsByClassName('madLibsEdit')[0]; // Selecting the madLibsEdit div.
+ const madLibsPreview = document.getElementsByClassName('madLibsPreview')[0]; // Selecting the madLibsPreview div.
+
+ for (let i = 0; i < processedStory.length; i++) { // Iterating through the list of objects.
+ const spanEdit = document.createElement('span'); // Creating a span element for the items we want to add.
+ const spanPreview = document.createElement('span'); // Creating a span element for the text we get from inputs.
+
+ if ('pos' in processedStory[i]) { // Check if it has a pos, if yes create an input element.
+
+ const input = document.createElement('input'); // Creating an input element.
+ input.setAttribute('type', 'text'); // Setting the inputs type to text.
+ input.setAttribute('class', 'replace'); // Adding a class attribute of replace.
+ input.style.textAlign = 'center'; // Adding a style to center text.
+
+ spanEdit.innerText += " "; // Adding a space before the input box.
+ spanPreview.innerText += " "; // Adding a space before the input box.
+ spanPreview.innerText += `${processedStory[i].word} [${processedStory[i].pos}]`;
+ spanPreview.style.color = 'red';
+ spanPreview.style.fontWeight = 'bold';
+ spanPreview.style.fontStyle = 'italic';
+
+ input.setAttribute('placeholder', `${processedStory[i].word} [${processedStory[i].pos}]`); // Adding a placeholder of the word and type.
+
+ madLibsEdit.append(spanEdit); // Appending spaces between the input and the next word.
+ madLibsEdit.append(input); // Appending the input box to the div.
+ madLibsPreview.append(spanPreview); // Appending spaces between the input text and the next word.
+
+ input.oninput = e => { // An eventListener for printing the text realtime with some styling.
+ if(input.value){
+ spanPreview.innerText = " " + input.value + " ";
+ spanPreview.style.color = 'red';
+ spanPreview.style.fontWeight = 'bold';
+ spanPreview.style.fontStyle = 'italic';
+ }
+ else {
+ spanPreview.innerText = ` ${processedStory[i].word}[${processedStory[i].pos}]`;
+ spanPreview.style.color = 'red';
+ spanPreview.style.fontWeight = 'bold';
+ spanPreview.style.fontStyle = 'italic';
+ }
+ };
+ }
+
+ else { // If the object.word is (. , “ ” !) then don't add a space and add the word directly.
+ if (processedStory[i].word === '.' || processedStory[i].word === ',' || processedStory[i].word === '!' || processedStory[i].word === '”') {
+ spanEdit.innerText = processedStory[i].word;
+ spanPreview.innerText = processedStory[i].word;
+ madLibsEdit.append(spanEdit);
+ madLibsPreview.append(spanPreview);
+ }
+ else if ((i != 0) && (processedStory[i].word != '')) { // If the object.word is just a word then add a space and add the word directly.
+ spanEdit.innerText = " " + processedStory[i].word;
+ spanPreview.innerText = " " + processedStory[i].word;
+ madLibsEdit.append(spanEdit);
+ madLibsPreview.append(spanPreview);
+ }
+ else { // If the object.word is at the first position then add the word directly.
+ spanEdit.innerText = processedStory[i].word + " ";
+ spanPreview.innerText = processedStory[i].word + " ";
+ madLibsEdit.append(spanEdit);
+ madLibsPreview.append(spanPreview);
+ }
+ }
+ }
+
+ const input = document.getElementsByClassName('replace'); // Calling out all the buttons we have.
+ for(let i = 0; i < input.length; i++){ // Adding an eventListener for when Enter is pressed.
+ input[i].addEventListener('keypress', (e) => {
+ if (i != (input.length - 1)) {
+ if(e.key === 'Enter')input[i+1].focus();
+ }
+ });
+ }
+});
\ No newline at end of file
diff --git a/madLibz/bilal-ceyhun/story.txt b/madLibz/bilal-ceyhun/story.txt
new file mode 100644
index 0000000..407d6c9
--- /dev/null
+++ b/madLibz/bilal-ceyhun/story.txt
@@ -0,0 +1 @@
+Once upon a time, a rich merchant[n] was caught in a storm and took[v] shelter in a nearby castle. There he plucked a rose for his youngest[a] daughter, Beauty. The castle belonged to a Beast. He stayed[v] alone in the castle. Just as the merchant plucked the flower, the Beast growled. The scared[a] merchant said, “this flower[n] is for my daughter.” The Beast said, “if you want your life spared, then send your daughter to live here in the castle.” The merchant returned home and told Beauty[a] about the incident. Beauty assured[v] him that she would be safe in the castle. Soon, Beauty and the Beast became good[a] friends. One day, Beauty went to meet her family. When Beauty returned, she saw that the Beast was dying[v]. She cried “Oh! I love you. Beauty married the prince and they spent the rest of their life happily.
\ No newline at end of file
diff --git a/madLibz/bilal-ceyhun/style.css b/madLibz/bilal-ceyhun/style.css
new file mode 100644
index 0000000..095cfd9
--- /dev/null
+++ b/madLibz/bilal-ceyhun/style.css
@@ -0,0 +1,120 @@
+/**
+ * Your CSS goes here.
+ */
+
+* {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+ /* border: 1px solid red; */
+
+}
+
+body {
+ color: white;
+ width: 100vw;
+ height: 100vh;
+ background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.pexels.com/photos/5011647/pexels-photo-5011647.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260');
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-attachment: fixed;
+
+}
+
+#header {
+ margin: 35px 0;
+ text-align: center;
+}
+
+h1 {
+ margin-bottom: 10px;
+ font-family: 'Dancing Script', cursive;
+ font-size: 50px;
+}
+h3 {
+ margin-top: 5px;
+ font-family: 'Dancing Script', cursive;
+ font-size: 30px;
+}
+
+#wrapper {
+ display: flex;
+ flex-direction: column;
+}
+
+#textWrapper {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center;
+ margin-left: 15px;
+ margin-right: 15px;
+ margin-bottom: 15px;
+ font-family: 'Architects Daughter', cursive;
+ line-height: 2em;
+ font-size: 20px;
+}
+
+input {
+ width: 150px;
+ height: 30px;
+ font-family: 'Architects Daughter', cursive;
+ border-radius: 10px;
+}
+
+.madLibsEdit {
+ margin-right: 1%;
+}
+
+.madLibsPreview{
+ margin-left: 1%;
+ align-self: flex-start;
+}
+
+.madLibsEdit, .madLibsPreview {
+ width: 48%;
+ border: 0.5px white dotted;
+ padding: 10px;
+}
+
+#footer{
+ margin-top: 30px;
+ line-height: 30px;
+ text-align: center;
+ font-size: 17px;
+ font-family: 'Architects Daughter', cursive;
+ font-weight: bold;
+ font-style: italic;
+}
+
+#links {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-items: center;
+ justify-content: center;
+}
+
+a {
+ color: white;
+ text-decoration: none;
+ padding-right: 15px;
+ padding-left: 15px;
+}
+
+a:hover{
+ background-color: #ff00007a;
+ color: black;
+ border-radius: 10px;
+}
+
+footer {
+ margin-top: 20px;
+ font-size: 1em;
+ align-self: center;
+ bottom: 0;
+ margin-bottom: 30px;
+ font-family: 'Architects Daughter', cursive;
+}
+
diff --git a/minesweeper/isa-ceyhun/index.js b/minesweeper/isa-ceyhun/index.js
new file mode 100644
index 0000000..1d81542
--- /dev/null
+++ b/minesweeper/isa-ceyhun/index.js
@@ -0,0 +1,69 @@
+/*
+~ Pseudo Code ~
+
+forloop for outer mineField
+forloop for inner mineField
+if cond for checking 1 or 0
+ first) 1 to 9 -displaying mine-
+ second) mineField[i+1][j+1] == 1 || mineField[i-1][j-1] == 1 || mineField[i-1][j+1] == 1 || mineField[i+1][j-1] == 1
+ third) count var for how many miners
+ forth) displaying empty areas to how many mines -> = count
+
+well it didnt worked :'D
+ had problem with undefined / out of bounds of array
+*/
+
+let mineField =
+[
+ [0, 1, 0, 0],
+ [0, 0, 1, 0],
+ [0, 1, 0, 1],
+ [1, 1, 0, 0],
+]
+
+function MineSweeper(matrix){
+ let displayField = []
+ for(let i = 0; i < matrix.length; i++){
+ let row = []
+ for(let j = 0; j < matrix[i].length; j++){
+ if(matrix[i][j] == 1){
+ row.push(9)
+ }
+ else{
+ row.push(neighbourChecker(matrix, i, j))
+ }
+ }
+ displayField.push(row)
+ }
+
+ return `
+ Mine Field
+ ${mineField[0]}
+ ${mineField[1]}
+ ${mineField[2]}
+ ${mineField[3]}
+
+ Display Field
+ ${displayField[0]}
+ ${displayField[1]}
+ ${displayField[2]}
+ ${displayField[3]}
+ `
+}
+
+function neighbourChecker(matrix, rowIndex, columnIndex){
+ let counter = 0
+ for(let i = rowIndex - 1; i <= rowIndex + 1 && i < matrix.length; i++){
+ //Great way to deal with "undefined"
+ if(!!matrix[i]){
+ for(let j = columnIndex - 1; j <= columnIndex + 1 && j < matrix[i].length; j++){
+ if(matrix[i][j] == 1){
+ ++counter
+ }
+ }
+ }
+ }
+ return counter
+}
+
+console.log(MineSweeper(mineField))
\ No newline at end of file
diff --git a/movie-project/ceyhun/README.md b/movie-project/ceyhun/README.md
new file mode 100644
index 0000000..df34f41
--- /dev/null
+++ b/movie-project/ceyhun/README.md
@@ -0,0 +1,103 @@
+# Movie Project
+This is a movie database project, where it shows movies, their casts, ratings, trailers, related movies, genres, and so on.
+
+This project uses The Movie DB API: `https://api.themoviedb.org/3`. It is up to
+you to use your Google and Postman skills to explore the API and understand the
+data.
+
+# Already built for you
+- A home page that shows popular movies
+- When you click one of the movies, you'll see the Single Movie page, which includes:
+ - Movie poster
+ - Movie title
+ - Movie release date
+ - Movie runtime
+ - Movie description
+ - An empty cast section
+
+# What you and your partner will build
+
+## Homepage
+
+### Navbar
+Add a universal navbar (it appears on every page) to the home page that includes
+buttons that go to the following pages:
+
+- Home button, takes you to the home page
+- Movies button that has a dropdown list to show different movie genres. For
+ example: Action, Sci-Fi, Comedy ...etc, When you click one of them it should
+ load the movies for that genre.
+- Actor list page
+- About page that has a description of the website
+- Search box where you can type the movie or actor name and display the
+related results.
+- A filter dropdown to filter the displayed movies in the home page, based
+on (popular, relase date, top rated, now playing and up coming)
+
+### Footer
+Add a universal footer that includes:
+
+- Credit to you and your partner for building the website,
+- You and your partner's github link inside an icon and optionally, your social
+ media links
+
+### Styling
+
+- Make it so that hovering over the movie makes the mouse pointer icon seem
+ clickable. Right now, if you are about to click a movie, it's not obvious that
+ it's clickable.
+
+## Movies List Page
+
+### Styling
+
+- Using CSS and Bootstrap, display the page as a grid with 3 columns (3 movies
+ in the same row)
+- Make it responsive where it displays 2 columns for tablets and 1 column for
+ phones
+- Style the rest of the page however you like.
+- Add the rating and genres to the movies in the home page and a description
+ when you hover over one of them
+
+## Single Movie Page
+We build part of the single movie page for you, but the information isn't
+totally complete, a few more features are needed:
+
+- The main 5 actors of the movies in the credit section
+- The movie language
+- A related movies section which includes at least five related movies
+- A trailer section that has the movie trailer from youtube
+- The movie production company name and logo
+- The director name
+- The movie rating and how many votes has it received
+
+### Functionality
+- Clicking an actor in the main actors should go to the single actor page.
+
+### Other requirements
+- There's an issue with duplication in the movie page that has to be fixed (and
+ you need to open the site and read the code to fix it)
+- Style the page however you like
+
+## Actor List Page
+Displays a list of actors styles in the same way as the movies list page, but
+with the actor photo and the actor name. Clicking any actor should go to the
+Single Actor Page. CSS should most certainly be reused here!
+
+## Single Actor Page
+This page can be reached by clicking on an actor in the actors list page or the
+credits in the single movie page.
+
+### Data Display
+- The actor name
+- The actor gender
+- A picture of the actor
+- The actor popularity
+- The birthday of the actor and (if available) death day
+- A biography about the actor
+- A list of movies the actor participated in
+
+## Bonus
+If you finish early you can work on the same functionalities, but for TV shows.
+Your code should be completely reusable (e.g., don't just copy paste a second
+copy of the files).
diff --git a/movie-project/ceyhun/background.jpg b/movie-project/ceyhun/background.jpg
new file mode 100644
index 0000000..58e41fd
Binary files /dev/null and b/movie-project/ceyhun/background.jpg differ
diff --git a/movie-project/ceyhun/index.html b/movie-project/ceyhun/index.html
new file mode 100644
index 0000000..86debd5
--- /dev/null
+++ b/movie-project/ceyhun/index.html
@@ -0,0 +1,139 @@
+
+
+
+
+
+
+
+
+
+
+ Madlibzzz
+Powered By: Bilal && Ceyhun
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/movie-project/ceyhun/oopscript.js b/movie-project/ceyhun/oopscript.js
new file mode 100644
index 0000000..8bf0202
--- /dev/null
+++ b/movie-project/ceyhun/oopscript.js
@@ -0,0 +1,804 @@
+// The API documentation site https://developers.themoviedb.org/3/
+
+// https://developers.themoviedb.org/3/movies/get-movie-details
+// https://developers.themoviedb.org/3/movies/get-movie-credits
+// https://developers.themoviedb.org/3/people/get-person-details
+
+// ++ Popular Movies: https://developers.themoviedb.org/3/movies/get-popular-movies
+// ++ Top Rated: https://developers.themoviedb.org/3/movies/get-top-rated-movies
+// ++ Now Playing: https://developers.themoviedb.org/3/movies/get-now-playing
+// ++ Up Coming: https://developers.themoviedb.org/3/movies/get-upcoming
+
+// Youtube Video -> https://www.youtube.com/watch?v={key}
+// Youtube Embed -> https://www.youtube.com/embed/{key}
+
+// For postman Inside Movie : https://api.themoviedb.org/3/movie/550?api_key=9ccd7d9e1cd5e20720ef9baade503f42
+// For postman Credits : https://api.themoviedb.org/3/movie/550/credits?api_key=9ccd7d9e1cd5e20720ef9baade503f42
+// For postman Similar Movies: https://api.themoviedb.org/3/movie/550/similar?api_key=9ccd7d9e1cd5e20720ef9baade503f42
+// For postman Trailer : https://api.themoviedb.org/3/movie/550/videos?api_key=9ccd7d9e1cd5e20720ef9baade503f42
+// For postman Actor : https://api.themoviedb.org/3/person/819?api_key=9ccd7d9e1cd5e20720ef9baade503f42
+// For postman Actor Movies : https://api.themoviedb.org/3/person/819/movie_credits?api_key=9ccd7d9e1cd5e20720ef9baade503f42
+
+
+
+//08/06/2021 05:45 PM
+
+class App {
+ static async run(para) {
+ const movies = await APIService.fetchMovies(para)
+ HomePage.renderMovies(movies);
+ }
+}
+
+
+//-----------------Popular Actor Beginning-----------------
+class AppPopularActor{
+ static async run() {
+ const actorpopular = await APIService.fetchPersonPopular()
+ PopularActorPage.renderMovies(actorpopular);
+ }
+}
+//-----------------Popular Actor End-----------------------
+
+
+
+
+//-----------------Search Beginning-----------------
+class AppSearch{
+ static async run(searchVal){
+ const search = await APIService.fetchSearch(searchVal)
+
+ HomePage.renderMovies(search)
+ }
+}
+//-----------------Search End-----------------------
+
+
+
+
+//-----------------Genres Beginning-----------------
+class AppGenres{
+ static async run(){
+ const search = await APIService.fetchGenres()
+ GenresPage.renderGenres(search)
+ }
+}
+//-----------------Genres End-----------------------
+
+
+class APIService {
+ static TMDB_BASE_URL = 'https://api.themoviedb.org/3';
+
+ //-----------------Genres Beginning-----------------
+ static async fetchGenres() {
+ const url = APIService._constructUrl(`genre/movie/list`)
+ const response = await fetch(url)
+ const data = await response.json()
+
+ return data.genres
+ }
+ //-----------------Genres End-----------------------
+
+
+
+ //-----------------Search Beginning-----------------
+ // &query=what
+ static async fetchSearch(input) {
+ const url = APIService._constructUrl(`search/movie`) + `&query=${input}`
+ const response = await fetch(url)
+ const data = await response.json()
+ return data.results.map(movie => new Movie(movie))
+ }
+ //-----------------Search End-----------------------
+
+
+
+ static async fetchMovies(para) {
+ const url = APIService._constructUrl(`movie/${para}`)
+ const response = await fetch(url)
+ const data = await response.json()
+
+ return data.results.map(movie => new Movie(movie))
+ }
+
+
+
+ static async fetchMovie(movieId) {
+ const url = APIService._constructUrl(`movie/${movieId}`)
+ const response = await fetch(url)
+ const data = await response.json()
+ return new Movie(data)
+ }
+
+
+
+ //-----------------Popular Actor Beginning-----------------
+ static async fetchPersonPopular() {
+ const url = APIService._constructUrl(`person/popular`)
+ const response = await fetch(url)
+ const data = await response.json()
+ return data.results.map(actors => new PopularActor(actors))
+ }
+ //-----------------Popular Actor End-----------------------
+
+
+ // SINGLEACTORPAGE
+ //-----------------Actor Beginning-----------------
+ static async fetchActor(personId){
+ const url = APIService._constructUrl(`person/${personId}`)
+ const response = await fetch(url)
+ const data = await response.json()
+ return new SingleActorPage(data)
+ }
+
+ static async fetchActorMovieCredit(personId){
+ const url = APIService._constructUrl(`person/${personId}/movie_credits`)
+ const response = await fetch(url)
+ const data = await response.json()
+ return data.cast.map(x => new SingleActorPageMovieCredit(x))
+ }
+
+ //-----------------Actor End-----------------------
+
+
+
+ //-----------------Credits Beginning-----------------
+ static async fetchActors(movie) {
+ const url = APIService._constructUrl(`movie/${movie.id}/credits`)
+ const response = await fetch(url)
+ const data = await response.json()
+ return data.cast.map(x => new Credit(x))
+ }
+ //-----------------Credits End-----------------------
+
+
+
+ //-----------------CREW Beginning-----------------
+ static async fetchCrew(movie) {
+ const url = APIService._constructUrl(`movie/${movie.id}/credits`)
+ const response = await fetch(url)
+ const data = await response.json()
+ return data.crew.map(x => new CreditCrew(x))
+ }
+ //-----------------CREW End-----------------------
+
+
+
+
+ //-----------------Similar Beginning-----------------
+ static async fetchSimilarMovies(movie) {
+ const url = APIService._constructUrl(`movie/${movie.id}/similar`)
+ const response = await fetch(url)
+ const data = await response.json()
+ return data.results.map(x => new Similar(x))
+ }
+ //-----------------Similar End-----------------------
+
+
+
+ //-----------------Trailer Beginning-----------------
+ static async fetchTrailer(movie) {
+ const url = APIService._constructUrl(`movie/${movie.id}/videos`)
+ const response = await fetch(url)
+ const data = await response.json()
+ return data.results.map(x => new Trailer(x))
+ }
+ //-----------------Trailer End-----------------------
+
+
+
+ static _constructUrl(path) {
+ return `${this.TMDB_BASE_URL}/${path}?api_key=${atob('NTQyMDAzOTE4NzY5ZGY1MDA4M2ExM2M0MTViYmM2MDI=')}`;
+ }
+}
+
+
+
+//-----------------Search Beginning-----------------
+const searchButton = document.getElementById("searchButtonId")
+const searchInput = document.getElementById("searchInputId")
+
+searchButton.addEventListener("click", function(e){
+ e.preventDefault()
+ AppSearch.run(searchInput.value)
+ if(searchInput.value == ""){
+ App.run('now_playing')
+ }
+ searchInput.value = ""
+ //PROUD OF IT!
+})
+//-----------------Search End-----------------------
+
+
+
+// SINGLEACTORPAGE
+//-----------------SingleActor Beginning-----------------
+class SingleActorPage{
+ static BACKDROP_BASE_URL = 'http://image.tmdb.org/t/p/w780';
+ constructor(json) {
+ this.id = json.id
+ this.name = json.name
+ this.gender = json.gender
+ this.popularity = json.popularity
+ this.birthday = json.birthday
+ this.deathday = json.deathday
+ this.biography = json.biography
+ this.profile_path = json.profile_path
+ }
+
+ get backdropUrl() {
+ return this.backdropPath ? SingleActorPage.BACKDROP_BASE_URL + this.backdropPath : "";
+ }
+}
+
+
+class SingleActorPageMovieCredit{
+ static BACKDROP_BASE_URL = 'http://image.tmdb.org/t/p/w780';
+ constructor(json) {
+ this.original_title = json.original_title
+ this.poster_path = json.poster_path
+ this.id = json.id
+ }
+
+ get backdropUrl() {
+ return this.backdropPath ? SingleActorPageMovieCredit.BACKDROP_BASE_URL + this.backdropPath : "";
+ }
+}
+//-----------------SingleActor End-----------------------
+
+
+
+//-----------------CreditCrew Beginning-----------------
+class CreditCrew {
+ static BACKDROP_BASE_URL = 'http://image.tmdb.org/t/p/w780';
+ constructor(json) {
+ this.name = json.name
+ this.job = json.job
+
+ }
+
+ get backdropUrl() {
+ return this.backdropPath ? CreditCrew.BACKDROP_BASE_URL + this.backdropPath : "";
+ }
+}
+//-----------------CreditCrew End-----------------------
+
+
+
+//-----------------Credits Beginning-----------------
+class Credit {
+ static BACKDROP_BASE_URL = 'http://image.tmdb.org/t/p/w780';
+ constructor(json) {
+ this.castName = json.name
+ this.character = json.character
+ this.profile_path = json.profile_path
+ this.id = json.id
+ }
+
+ get backdropUrl() {
+ return this.backdropPath ? Credit.BACKDROP_BASE_URL + this.backdropPath : "";
+ }
+}
+//-----------------Credits End-----------------------
+
+
+
+//-----------------Similar Beginning-----------------
+class Similar {
+ static BACKDROP_BASE_URL = 'http://image.tmdb.org/t/p/w780';
+ constructor(json) {
+ this.id = json.id
+ this.original_title = json.original_title
+ this.poster_path = json.poster_path
+ }
+
+ get backdropUrl() {
+ return this.backdropPath ? Similar.BACKDROP_BASE_URL + this.backdropPath : "";
+ }
+}
+//-----------------Similar End-----------------------
+
+
+
+//-----------------Trailer Beginning-----------------
+class Trailer {
+ static BACKDROP_BASE_URL = 'http://image.tmdb.org/t/p/w780';
+ constructor(json) {
+ this.key = json.key
+ }
+
+ get backdropUrl() {
+ return this.backdropPath ? Trailer.BACKDROP_BASE_URL + this.backdropPath : "";
+ }
+}
+//-----------------Trailer End-----------------------
+
+
+
+class Movie {
+ static BACKDROP_BASE_URL = 'http://image.tmdb.org/t/p/w780';
+ constructor(json) {
+
+ this.id = json.id;
+ this.title = json.title;
+ this.releaseDate = json.release_date;
+ this.runtime = json.runtime + " minutes";
+ this.overview = json.overview;
+ this.backdropPath = json.poster_path;
+
+ // Added Parts
+ this.language = json.original_language.toUpperCase()
+ this.genres = json.genres
+ this.vote_count = json.vote_count;
+ this.vote_average = json.vote_average;
+ this.production_companies = json.production_companies;
+ this.genre_ids = json.genre_ids
+ }
+
+ get backdropUrl() {
+ return this.backdropPath ? Movie.BACKDROP_BASE_URL + this.backdropPath : "";
+ }
+}
+
+
+
+//-----------------Popular Actor Beginning-----------------
+class PopularActor {
+ static BACKDROP_BASE_URL = 'http://image.tmdb.org/t/p/w780';
+ constructor(json) {
+ this.profile_path = json.profile_path;
+ this.id = json.id;
+ this.name = json.name
+ }
+
+ get backdropUrl() {
+ return this.backdropPath ? PopularActor.BACKDROP_BASE_URL + this.backdropPath : "";
+ }
+}
+
+
+class PopularActorPage {
+ static container = document.getElementById('container');
+ static renderMovies(actors) {
+ let BACKDROP_BASE_URL = 'http://image.tmdb.org/t/p/w780';
+ this.container.innerHTML = " "
+ actors.forEach(actor => {
+ let urlActor = BACKDROP_BASE_URL + actor.profile_path
+ const actorDiv = document.createElement("div");
+ actorDiv.setAttribute("class", "popularActorDiv col-s-6 col-4")
+ const actorImage = document.createElement("img");
+ actorImage.src = `${urlActor}`;
+ const actorTitle = document.createElement("h3");
+ actorTitle.textContent = `${actor.name}`;
+ actorImage.addEventListener("click", function() {
+ Actor.run(actor.id);
+ });
+
+ const nestedDiv = document.createElement("div");
+ nestedDiv.setAttribute("class", "nestedPopularActorDiv col-s-6 col-4")
+ const brDiv = document.createElement("br");
+ nestedDiv.appendChild(actorDiv)
+ nestedDiv.appendChild(brDiv)
+
+ actorDiv.appendChild(actorTitle);
+ actorDiv.appendChild(actorImage);
+
+ nestedDiv.appendChild(actorDiv)
+ nestedDiv.appendChild(brDiv)
+
+ this.container.appendChild(nestedDiv);
+ })
+ }
+}
+//-----------------Popular Actor End-----------------------
+
+
+
+class HomePage {
+ static container = document.getElementById('container');
+ static renderMovies(movies) {
+ this.container.innerHTML = " "
+ movies.forEach(movie => {
+ const movieDiv = document.createElement("div");
+ const movieImage = document.createElement("img");
+ movieDiv.setAttribute("class", "movieHomepageDiv")
+ movieImage.src = `${movie.backdropUrl}`;
+ movieImage.setAttribute("class", "movieImgHomepage")
+
+ const movieTitle = document.createElement("h3");
+ movieTitle.textContent = `${movie.title}`;
+
+
+
+ //Hover
+ const hoverDiv = document.createElement("div")
+ hoverDiv.setAttribute("class","hoverDetails")
+ const hoverDivContent = document.createElement("p")
+
+
+
+ //Kinda proud of it
+ hoverDivContent.innerHTML = `
+ Overview: ${movie.overview.substr(0,100)}...
+ Rating: ${movie.vote_average} + ` + hoverDiv.append(hoverDivContent) + + + + + movieDiv.addEventListener("click", function() { + Movies.run(movie); + }); + const imageDiv = document.createElement("div") + imageDiv.append(movieImage) + + const titleDiv = document.createElement("div") + titleDiv.appendChild(movieTitle) + + const div = document.createElement("div"); + div.setAttribute("class","homepageMovieParentDiv") + const brDiv = document.createElement("br"); + + movieDiv.appendChild(imageDiv); + movieDiv.appendChild(titleDiv); + movieDiv.append(hoverDiv) + movieDiv.appendChild(brDiv) + + this.container.appendChild(movieDiv); + + }) + + + //About us + const aboutPage = document.getElementById("about") + aboutPage.addEventListener("click", function(){ + container.innerHTML = ` +About
+ +
+ ![${actorMovie[i].poster_path}](${arrayForActorMovie[i]})
+
+ `)
+ }
+
+
+
+
+ container.innerHTML = `
+
+
+
+
+
+
+
+ 
+
+
+
+
+ Overview:
+Name: ${actorInstance.name}
+Gender: ${gender}
+Popularity: ${actorInstance.popularity}
+Date: ${actorInstance.birthday} - ${deathdayVari}
+
+
+
+
+
+
+ Biography
+
+
+ ${actorInstance.biography}
+
+
+
+
+ `
+ let moviePic = document.getElementsByClassName("actorAllMoviesPicinDiv")
+ for(let i = 0; i < moviePic.length; i++){
+ moviePic[i].addEventListener("click", function(){
+ Movies.run(actorMovie[i])
+ })
+ }
+
+ }
+}
+//-----------------Actor End-----------------------------
+
+class MoviePage {
+ static container = document.getElementById('container');
+ static renderMovieSection(movie, credits, similar, trailer, crew) {
+ MovieSection.renderMovie(movie, credits, similar, trailer, crew);
+ }
+
+}
+
+class MovieSection {
+ static renderMovie(movie, credits, similar, trailer, crew) {
+ const BACKDROP_BASE_URL = 'http://image.tmdb.org/t/p/w780'
+
+ // ForLoop for Genres
+ let arrayForGenres = []
+ for(let i = 0; i < movie.genres.length ; i++){
+ arrayForGenres.push(movie.genres[i].name)
+ }
+
+ // ForLoop for CastName
+ let arrayForCastName = []
+ let arrayForCastNamePic = []
+ let arrayForCharacter = []
+ for(let j = 0; j < 5; j++){
+ arrayForCastName.push(credits[j].castName)
+ arrayForCharacter.push(credits[j].character)
+ arrayForCastNamePic.push(BACKDROP_BASE_URL + credits[j].profile_path)
+ }
+
+ let imgHTMLArray = []
+ for(let o = 0; o < 5; o++){
+ imgHTMLArray.push(`
+
+
+ A list of movies the actor participated in
+
+ ${imgHTMLArray.join(' ')}
+
+
+ ![${arrayForCastName[o]}](${arrayForCastNamePic[o]})
${arrayForCastName[o]} as ${arrayForCharacter[o]}
+
+ `)
+ }
+
+
+
+
+
+ // ForLoop for SimilarMovies
+ let nameForSimilarMovies = []
+ let imageForSimilarMovies = []
+ for(let k = 0; k < 5; k++){
+ nameForSimilarMovies.push(similar[k].original_title)
+ imageForSimilarMovies.push(BACKDROP_BASE_URL + similar[k].poster_path)
+ }
+
+ let imageSimilarHTML = []
+
+ for(let k = 0; k < 5; k++){
+ imageSimilarHTML.push(`
+
+ ![${nameForSimilarMovies[k]}](${imageForSimilarMovies[k]})
${nameForSimilarMovies[k]} +
+ `)
+ }
+
+
+
+ // Trailer
+ let youtubeTrailer = `"https://www.youtube.com/embed/${trailer[0].key}"`
+
+ // ForLoop for Crew
+ let director
+ for(let crewFor = 0; crewFor < crew.length; crewFor++){
+ if(crew[crewFor].job == "Director"){
+ director = crew[crewFor].name
+ }
+ }
+
+
+
+ // Production Companies
+ let arrayForProduction = []
+ let nameForProduction = []
+ for (let z = 0; z < movie.production_companies.length; z++){
+ arrayForProduction.push(BACKDROP_BASE_URL + movie.production_companies[z].logo_path)
+ nameForProduction.push(movie.production_companies[z].name)
+ }
+
+ let imageProductionHTML = []
+ for(let pp = 0; pp < movie.production_companies.length; pp++){
+ imageProductionHTML.push(`
+ ${nameForSimilarMovies[k]} +
+ ![${nameForProduction[pp]}](${arrayForProduction[pp]})
${nameForProduction[pp]} +
+ `)
+ }
+
+
+
+
+
+
+ MoviePage.container.innerHTML = `
+ ${nameForProduction[pp]} +
+
+
+
+
+ 
+
+
+
+
+ ${movie.title}
+${arrayForGenres.join(" ")}
+${movie.releaseDate}
+${movie.runtime}
+${movie.language}
+Average Rate of Movie: ${movie.vote_average}
+Vote Count: ${movie.vote_count}
+
+
+
+
+
+ Overview:
+${movie.overview}
+
+
+
+
+
+ Actors
+
+ ${imgHTMLArray.join(' ')}
+
+
+
+
+
+
+ Trailer
+ + +
+
+
+
+
+ Similar Movies
+
+ ${imageSimilarHTML.join(' ')}
+
+
+
+
+
+
+ Director
+ ${director} +
+
+ `;
+
+ let actorPic = document.getElementsByClassName("castPic")
+ for(let p = 0; p < actorPic.length; p++){
+ actorPic[p].addEventListener("click", function(){
+ Actor.run(credits[p].id)
+ })
+ }
+
+ let actorAllMoviesPicinClass = document.getElementsByClassName("actorAllMoviesPic")
+ for(let i = 0; i < actorAllMoviesPicinClass.length; i++){
+ actorAllMoviesPicinClass[i].addEventListener("click", function(){
+
+ Movies.run(similar[i])
+ })
+ }
+ }
+
+
+}
+
+
+
+
+
+document.addEventListener("DOMContentLoaded",() => App.run('now_playing'));
+
+
+
+const genresFilter = document.getElementsByClassName("dropdown-item")
+for(let i = 0; i < genresFilter.length; i++){
+ genresFilter[i].addEventListener('click', function(){
+ document.getElementById('container').innerHTML = "";
+
+ const genreMovies = async function (){
+ const genresList = await APIService.fetchGenres();
+ const specificGenre = genresList[i].id;
+ const allMovieList = await APIService.fetchMovies(`now_playing`);
+ const result = await allMovieList.filter(movie => movie.genre_ids.includes(specificGenre));
+ HomePage.renderMovies(result);
+ }();
+ });
+ }
\ No newline at end of file
diff --git a/movie-project/ceyhun/presentation.md b/movie-project/ceyhun/presentation.md
new file mode 100644
index 0000000..3bd46ae
--- /dev/null
+++ b/movie-project/ceyhun/presentation.md
@@ -0,0 +1,17 @@
+# Movie Project Presentations
+
+This time, we will be a bit stricter about time (also there's no madlibs filling
+out this time). Eight minutes per group.
+
+## Part 1: Demo
+Demo your project. Show us the pages. Maximum three minutes.
+
+## Part 2: Explain some code.
+Each person explain **one** piece of code. About 1.5 minutes per person.
+
+## Part 3: Learning.
+Approximately one minute per person.
+
+* How was the experience of reading pre-existing code?
+* What was the hardest thing for you in the project?
+
diff --git a/movie-project/ceyhun/style.css b/movie-project/ceyhun/style.css
new file mode 100644
index 0000000..3d4d8d2
--- /dev/null
+++ b/movie-project/ceyhun/style.css
@@ -0,0 +1,682 @@
+html,
+body {
+ margin: 0;
+ background-image: url(./background.jpg);
+
+ background-attachment: fixed;
+ background-size: 3000px 2000px;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: auto;
+ position: relative;
+ padding-right: 5px;
+ padding-left: 5px;
+ color: white;
+}
+
+#container {
+ margin-top: 5%;
+}
+
+#aboutArticle {
+ background-color: rgba(0, 0, 0, 0.3);
+}
+
+.row {
+ width: 100%;
+}
+.embed-responsive-item,
+.embed-responsive {
+ width: 100%;
+}
+
+* {
+ box-sizing: border-box;
+ /* border: 1px solid red; */
+}
+
+.row::after {
+ content: "";
+ clear: both;
+ display: table;
+}
+
+[class*="col-"] {
+ float: left;
+ padding: 15px;
+}
+
+#searchInputId {
+ border-radius: 15%;
+}
+
+#searchButtonId {
+ border-radius: 15%;
+}
+
+#movie-backdrop {
+ width: 100%;
+}
+
+.container {
+ padding-top: 32px;
+}
+
+/* Hover */
+.hoverDetails {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.6);
+ font-weight: bolder;
+ color: whitesmoke;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ opacity: 0;
+ transition: opacity 0.25s;
+ border-radius: 10%;
+}
+
+.hoverDetails:hover {
+ opacity: 1;
+}
+
+.movieHomepageDiv {
+ position: relative;
+ cursor: pointer;
+
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: space-between;
+ align-items: center;
+ align-content: stretch;
+
+ text-align: center;
+ width: 74%;
+ height: 350px;
+}
+
+.actorAllMoviesPic {
+ cursor: pointer;
+}
+
+#navbar {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: space-between;
+ align-items: baseline;
+ align-content: stretch;
+}
+
+#nestedNavbar {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: space-around;
+ align-items: baseline;
+ align-content: stretch;
+}
+
+.movieHomepageDiv {
+ max-width: 33%;
+
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: center;
+ align-content: stretch;
+}
+
+.movieImgHomepage {
+ width: 100%;
+ height: auto;
+ border-radius: 10%;
+}
+
+.movieHomepageDiv > h3 {
+ text-align: center;
+ /* font-size: 95%; */
+}
+
+footer {
+ font-size: 30px;
+ text-align: center;
+ width: 100%;
+ height: 50px;
+ text-align: center;
+
+ width: 100%;
+ right: 0;
+ bottom: 0;
+ margin-bottom: -1%;
+ padding: 1.5%;
+ height: 8.5rem;
+}
+
+.row {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: stretch;
+ align-content: stretch;
+}
+
+#movie-backdrop {
+ width: 35%;
+}
+
+.imageOneMovie {
+ text-align: center;
+}
+
+#castInMovie {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: space-between;
+
+ align-content: stretch;
+}
+
+.castPicDiv {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: center;
+ align-content: stretch;
+
+ text-align: center;
+}
+
+.similarMovies {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: space-around;
+ align-items: center;
+ align-content: stretch;
+
+ text-align: center;
+}
+
+.actorAllMoviesPic {
+ width: 100%;
+ padding: 10px;
+}
+
+.trailer {
+ text-align: center;
+}
+
+.embed-responsive-item {
+ /* text-align: center; */
+ width: 100%;
+ height: 500px;
+}
+
+.productionCompDiv {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: center;
+ align-content: stretch;
+ text-align: center;
+}
+
+.productionCompDiv > img {
+ background-color: rgba(255, 255, 255, 0.1);
+}
+
+.productionCompMain {
+ text-align: center;
+}
+
+#productionCompDiv {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: stretch;
+ align-content: stretch;
+}
+
+/*Media Queries*/
+
+[class*="col-"] {
+ width: 100%;
+}
+
+@media only screen and (min-width: 120px) and (max-width: 767px) {
+ /* For mobile: */
+ .container {
+ text-align: center;
+ }
+
+ .movieHomepageDiv {
+ max-width: 75%;
+
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: center;
+ align-content: stretch;
+ height: 500px;
+ }
+
+ #navbar {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ align-items: stretch;
+ align-content: stretch;
+ text-align: center;
+ }
+
+ #nestedNavbar {
+ width: 100%;
+ }
+
+ #movie-backdrop {
+ width: auto;
+ height: 300px;
+ }
+
+ #castInMovie {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ align-items: stretch;
+ align-content: stretch;
+ text-align: center;
+ }
+
+ .castPicDiv {
+ padding-bottom: 20px;
+ }
+
+ .similarMovies {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ align-items: stretch;
+ align-content: stretch;
+ text-align: center;
+ }
+
+ .similarMoviesDiv {
+ padding-bottom: 10px;
+ border: 1px solid black;
+ margin-top: 10px;
+ border-radius: 10%;
+ }
+
+ #productionCompDiv {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ align-items: stretch;
+ align-content: stretch;
+ text-align: center;
+ }
+ .productionCompDiv {
+ padding-bottom: 20px;
+ }
+
+ /*Single Actor Page*/
+ #movieClassinActorPage {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ align-items: stretch;
+ align-content: stretch;
+ }
+
+ .actorAllMoviesPic {
+ width: auto;
+ height: 350px;
+ padding-bottom: 20px;
+ border-radius: 10%;
+ }
+ /*Single Actor Page*/
+
+ /*Actors Page*/
+ .popularActorDiv > img {
+ width: auto;
+ height: 350px;
+ padding-bottom: 20px;
+ }
+ .popularActorDiv {
+ border: 1px solid;
+ border-color: black;
+ padding-bottom: 20px;
+ }
+
+ /*Actors Page*/
+
+ #container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ align-items: center;
+ align-content: stretch;
+ }
+
+ .movieHomepageDiv {
+ height: auto;
+ /* padding-bottom: 20px; */
+ margin-bottom: 20px;
+ border: 1px solid black;
+ border-radius: 10%;
+
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: space-around;
+ align-items: center;
+ align-content: stretch;
+ }
+
+ .movieImgHomepage {
+ border-radius: 10%;
+ }
+
+ footer {
+ position: fixed;
+ font-size: 30px;
+ text-align: center;
+ width: 100%;
+ height: 50px;
+ right: 0;
+ bottom: 0;
+ margin-bottom: -1%;
+ padding: 1.5%;
+ background-color: rgba(0, 0, 0, 0.3);
+ }
+
+ footer > a {
+ text-decoration: none;
+ color: white;
+ }
+
+ .embed-responsive,
+ .embed-responsive-item {
+ width: auto;
+ height: auto;
+ }
+}
+
+@media only screen and (min-width: 600px) {
+ /* For tablets: */
+ html,
+ body {
+ margin: 0;
+ /* background-image: url(img/background.jpg);
+ background-repeat: repeat; */
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: auto;
+ position: relative;
+ padding-right: 5px;
+ padding-left: 5px;
+ }
+
+ .overviewForTablet {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: center;
+ align-content: stretch;
+ }
+
+ #movie-backdrop {
+ width: 100%;
+ height: auto;
+ }
+
+ .actorsInMovie {
+ text-align: center;
+ }
+
+ #castInMovie {
+ width: 100%;
+ height: auto;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: baseline;
+ align-content: stretch;
+ }
+
+ .castPic {
+ width: 100%;
+ }
+
+ .castPicDiv {
+ width: 100%;
+ padding-left: 10px;
+ }
+
+ .similarMovies {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: baseline;
+ align-content: stretch;
+ }
+
+ .productionCompDiv {
+ width: 75%;
+ padding-right: 5px;
+ padding-left: 5px;
+ }
+
+ #container > .nestedPopularActorDiv {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ align-content: stretch;
+ }
+
+ #container {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ align-content: stretch;
+ }
+
+ .popularActorDiv {
+ text-align: center;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: center;
+ align-content: stretch;
+ }
+
+ .popularActorDiv > img {
+ width: 300%;
+ }
+
+ footer {
+ font-size: 30px;
+ text-align: center;
+ width: 100%;
+ height: 70px;
+ margin-bottom: -1%;
+ padding: 1.5%;
+ background-color: rgba(0, 0, 0, 0.3);
+ position: fixed;
+ }
+
+ footer > a {
+ text-decoration: none;
+ color: white;
+ }
+
+ #movie-backdrop {
+ width: auto;
+ height: 300px;
+ }
+
+ .overviewForTablet {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: center;
+ align-content: stretch;
+ }
+
+ #movieClassinActorPage {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: baseline;
+ align-content: stretch;
+ }
+
+ .movieHomepageDiv {
+ max-width: 50%;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: center;
+ align-content: stretch;
+ height: auto;
+ padding: 1%;
+ }
+
+ .trailer {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: center;
+ align-content: stretch;
+ }
+
+ .col-s-1 {
+ width: 8.33%;
+ }
+ .col-s-2 {
+ width: 16.66%;
+ }
+ .col-s-3 {
+ width: 25%;
+ }
+ .col-s-4 {
+ width: 33.33%;
+ }
+ .col-s-5 {
+ width: 41.66%;
+ }
+ .col-s-6 {
+ width: 50%;
+ }
+ .col-s-7 {
+ width: 58.33%;
+ }
+ .col-s-8 {
+ width: 66.66%;
+ }
+ .col-s-9 {
+ width: 75%;
+ }
+ .col-s-10 {
+ width: 83.33%;
+ }
+ .col-s-11 {
+ width: 91.66%;
+ }
+ .col-s-12 {
+ width: 100%;
+ }
+}
+
+iframe {
+ /* max-width: 250%; */
+ height: auto;
+}
+
+@media only screen and (min-width: 769px) {
+ /* For desktop: */
+
+ .movieHomepageDiv {
+ max-width: 33%;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: center;
+ align-content: stretch;
+ height: auto;
+ padding: 1%;
+ }
+
+ .col-1 {
+ width: 8.33%;
+ }
+ .col-2 {
+ width: 16.66%;
+ }
+ .col-3 {
+ width: 25%;
+ }
+ .col-4 {
+ width: 33.33%;
+ }
+ .col-5 {
+ width: 41.66%;
+ }
+ .col-6 {
+ width: 50%;
+ }
+ .col-7 {
+ width: 58.33%;
+ }
+ .col-8 {
+ width: 66.66%;
+ }
+ .col-9 {
+ width: 75%;
+ }
+ .col-10 {
+ width: 83.33%;
+ }
+ .col-11 {
+ width: 91.66%;
+ }
+ .col-12 {
+ width: 100%;
+ }
+}
diff --git a/router-firebase/derya-ceyhun b/router-firebase/derya-ceyhun
new file mode 160000
index 0000000..003bf1a
--- /dev/null
+++ b/router-firebase/derya-ceyhun
@@ -0,0 +1 @@
+Subproject commit 003bf1a8b0d944f128438edacebdd9451fea1107
+
+ Production Companies
+
+ ${imageProductionHTML.join(' ')}
+
+