Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bilal-ceyhun-madlibs #160

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions class-13-map-reduce/khadija-ceyhun/map-exercise/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
console.log("---------------------Q1---------------------")
const capitalize = function(string){
return string.toUpperCase();
}

let string4q1 = "obviously"

// const capitalizeee = string.split().map((word ,index) => capitalize(word));
const capitalizeee = string4q1.split().map(capitalize);
console.log(capitalizeee.toString())





console.log("---------------------Q2---------------------")
let string4q2 = 'hey gurl, lets javascript together sometime'

function swapCase(string4q2){
const strintoarr = string4q2.split(" ");
let emptyStr = ""
const test = strintoarr.map(function(arr, index){
if(index % 2 === 0){
emptyStr += arr.toLowerCase() + " ";
}
else{
emptyStr += arr.toUpperCase() + " ";
}
return emptyStr
})
console.log(emptyStr)
return emptyStr
}

swapCase(string4q2)





console.log("---------------------Q3---------------------")
const stringQ3 = "abcxyz"


function shiftLetters(string, num = 1){
const question3toarr = stringQ3.split(" ");
return question3toarr.map(function(array, index){
let result = " "
let charcode = 0
for(let i = 0; i < stringQ3.length; i++){
charcode = stringQ3[i].charCodeAt() + num
result += String.fromCharCode(charcode)
}
return result
})
}

shiftLetters(stringQ3)
115 changes: 115 additions & 0 deletions class-13-map-reduce/khadija-ceyhun/map-reduce-exercise/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
console.log("---------------------Q1---------------------")
let exampleBudget = [
{ name: "John", age: 21, budget: 23000 },
{ name: "Steve", age: 32, budget: 40000 },
{ name: "Martin", age: 16, budget: 2700 }
]

//➞ 65700

function question1(){
let wow = 0
exampleBudget.reduce(function(sum, obj){
// console.log("Sum: ", sum, "obj: ", obj.budget)
wow = sum + obj.budget
return (wow)
},0)
console.log(wow)
}

question1()




console.log("---------------------Q2---------------------")
// countLetters('abbcccddddeeeee')
// => {a:1, b:2, c:3, d:4, e:5}


const countLetters = function(string){
let stringArr = string.split("")
// console.log(stringArr)
// let stringArrv2 = string.split(" ")
// console.log(stringArrv2)
return stringArr.reduce(function(repeat, char){
if(char in repeat) repeat[char]++
else repeat[char] = 1
return repeat
},{})
};
console.log("aaaaaabbcccddddeeeee: \n", countLetters('aaaaaabbcccddddeeeee'))
console.log("\nabbcccddddeeeee: \n", countLetters("abbcccddddeeeee"))





console.log("---------------------Q3---------------------")
// Working properly without map
// const stringQ3 = "abcxyz"
// isPresent('abcd', 'b') // => true
// isPresent('efghi', 'a') // => false

// const isPresent = function(string, target) {
// let checkMic;
// for(let i = 0; i < string.length; i++){
// if(string[i] === target){
// checkMic = true
// }
// else{
// checkMic = false
// }
// return checkMic
// }
// }

// console.log(isPresent(stringQ3, "j"))
// console.log(isPresent(stringQ3, "a"))



const stringQ3 = "abcxyz"
const stringQ3Arr = stringQ3.split("")

const isPresentt = function(array, target) {
return stringQ3Arr.map(function(charrr,index){
// console.log("charrr: ", charrr, "index: ", index, "target: ", target)
let checkMicMic;
if(charrr === target){
checkMicMic = true
}
else{
checkMicMic = false
}
return (checkMicMic)
})
}

console.log("abcxyz: ", "a" ,isPresentt(stringQ3, "a"))
console.log("abcxyz: ", "x" ,isPresentt(stringQ3, "x"))
console.log("abcxyz: ", "j" ,isPresentt(stringQ3, "j"))


console.log("---------------------Q4---------------------")

const decode = function(codes){
let finalEmptyArr = []

codes.split(" ").map(function(value){
let adder = value.split("").reduce(function(accuu, currentValue){
// console.log("accuu: ", accuu, "currentValue: ", currentValue)
return accuu += parseInt(currentValue);
}, 0);
let word = String.fromCharCode(adder)
// console.log(word)
finalEmptyArr.push(word)
return finalEmptyArr
})
// finalEmptyArr.toString()
// console.log(finalEmptyArr)
return finalEmptyArr.toString()
}

console.log(decode ("361581732726247521644353 4161492813593986955"))
console.log(decode("444689936146563731 2452966188592191874 52634311978613959924676311 4874232339 491973615889195397613151 64491375479568464397 2799868298847212752434 9464245911 84529438455334236247245 8131257451645317232949247 26471594451453281675411332 6631592725297745964837 616698332453173937881461 3311783543427862468268 385418321228899775431 4659867 73395213225525916984356 833792195426925124155181841 123388893 6941777837193213644325351 11353488912476869536954 61173937137292328237388335 5344692 452956158 31937616696951768494 584842118999165552436 8832121577139589884 15282516522883423742885 14713349724 6919979438697694 2252585676244745856486 5617683424485959291 547443594 2678324174797795449925 43753791352187862731151912 6875665565836721939262 35482977 84421878934473534291995 798457553821668942312 11114498238219156246883553 3599955 8831995953696776 8138759916933117676486 2388776737768787 37232647683297835458183 11318659392964788174775 683293746169875551252354 741545327395636643318531 38447974824822841161273 88768222547689886222 6345677462396774359 4942661761 1354569165 2553653936124138282 851786784517417366411515 42279319649497959785 5523951771 45941761289678527316294 37776454913244819275691 436669892715419465494342 682264111527 734681268219555989841131 882641896825571288724 382545666 12133138432672285179566156291 83644842221351483476411355532 9589336353993598224 184537669759184472427331 41851326945453796784 525783591 173773335961894524914465 47516715963756294236321 7296569497726217615 79487235 4931878519724923131437 31214731844284735237658435 1378458823933518466122 1241955123792435126557994 347427652476673662454 55596877477154112241923 9789414554758712319821 86228624276917113671233411 89659521 1352796469161477381192 69483824148396716861472 4766533634762298963245 5155973593459278561 1784478259974148659431 29583142566714785218623 244371427148584159487652 871836193187759591363 247956"))
59 changes: 59 additions & 0 deletions class-14-js-wheresWaldo/ayshe-ceyhun/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
let array1 = [
["d", "c", "c", "c"],
["c", "c", "c", "c"]
]

let array2 = [
["A", "A", "A"],
["A", "A", "A"],
["A", "A", "B"]
]


let array3 = [
["O", "O", "O", "O"],
["O", "O", "O", "O"],
["O", "O", "O", "O"],
["O", "O", "O", "O"],
["P", "O", "O", "O"],
["O", "O", "O", "O"]
]


function whereIsWaldo(array){
// console.log(array) -> outer
// console.log(array[0]) -> inner
for(let i = 0; i < array.length; i++){
console.log("Outer Array: ",array[i])

for(let j = 0; j < array[i].length; j++){
console.log("Inner Array: ",array[i][j])


if(array[i][j] !== array[0][0]){
console.log("Char: ", array[i][j])
let waldo = [i+1, j+1]
console.log("IF WORKED: ", waldo)
return waldo
}
else if(array[0][1] !== array[0][0] && array[0][2] !== array[0][0]){
let waldo = [i+1, j+1]
console.log("ELSE IF WORKED: ", waldo)
return waldo
}
else{
console.log("ELSE WORKED\n")
continue
}


}
}
}

console.log("ARRAY1")
console.log(whereIsWaldo(array1))
console.log("\n\nARRAY2")
console.log(whereIsWaldo(array2))
console.log("\n\nARRAY3")
console.log(whereIsWaldo(array3))
78 changes: 78 additions & 0 deletions class-15-js-OOP/isa-ceyhun/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
class Car {
// Part 1. Constructor (REVIEW)
constructor(color, fuelType) {
this.color = color;
this.fuelType = fuelType;
}

// Method.
paint(newColor) {
return this.color = newColor;
}

// Part 2. Static methods.
hasTheSameProperties(car2){
return this.color === car2.color &&
this.fuelType === car2.fuelType
}

static hasTheSamePropertiesStatic(car1, car2) {
return car1.color === car2.color &&
car1.fuelType === car2.fuelType
}


// Part 3. Getter, setter.
get speedKmH() {
return this.speed
}


set speedKmH(newTopSpeedKmH) {
//Question 2
if(newTopSpeedKmH > 300){
console.log("You're a fastest boi. You should calm down.")
}
else{
this.speed = newTopSpeedKmH
}
}

get speedInMiles() {
return this.speed * 0.621371
}


//Question 1
static compareSpeed(car1, car2){
if(car1.speed < car2.speed){
console.log(car2)
}
else{
console.log(car1)
}
}


//Question 3
get speedInKmSec(){
return this.speed / 3600
}


}

const audi = new Car("red","gas")
const tesla = new Car('red', "electric")

audi.paint('blue')

audi.speedKmH = 330
tesla.speedKmH = 290
// we call getter without paranthies
console.log("Audi: ", audi)
console.log("Tesla: ", tesla)

console.log(tesla.speedInKmSec)

// console.log(audi.hasTheSameProperties(tesla))
30 changes: 30 additions & 0 deletions class-17-js-review/hafiseNur-ceyhun/bootcamp.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
{
"title":"Turkey Bootcamp",
"instructors":["Halit", "Muhannad", "Shrreya", "Ammar"],
"students" : [
"Abduallah barmu",
"Abdulkadir İsa Tekinkaya",
"Ali Rıza Şahin",
"AYSE CIMEN BASAR",
"Ayşe Saflo",
"aziza iliasova",
"Belal Awad",
"Buse Şentürk",
"Ceyhun Gülbaş",
"Derya Kaygisiz",
"Hafise Nur Bacaksız",
"Khadija hawa",
"Kutay Kağan Özen",
"Mahmoud Moulham Hallak",
"MHD ABDULRAHMAN TAJI",
"Mohamad Moumen Hallak",
"Mohamad Ziada",
"Mohammed Alalaya",
"Muhammed Menar Yazıcı",
"Mustafa Şükrü Güldağ",
"Nidal Alrifai",
"Rahaf Shora",
"Ufuk Deniz Demirbilek",
"Yeşim Nur Akar"
]
}
33 changes: 33 additions & 0 deletions class-17-js-review/hafiseNur-ceyhun/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<h3>A list of students first name</h3>
<div id="studentsFirstName"></div>
<hr>
<h3>A list of students names start with "M"</h3>
<div id="studentsNamesStartWthM"></div>
<hr>
<h3>Number of students names starts with "E"</h3>
<div id="NumberOfStudentsNamesStartsWithE"></div>
<hr>
<h3>Index of first student name starts with "H"</h3>
<div id="IndexOfFirstStudentNameStartsWithH"></div>
<h3>List Of Everybody</h3>
<div id="listOfEverybody"></div>




<script src="script.js">
</script>
</body>

</html>
180 changes: 180 additions & 0 deletions class-17-js-review/hafiseNur-ceyhun/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
// Q1: Write a variable that fetches the data from bootcamp.json and uses `await` to store it. We didn't learn await; you will have to practice your Google skills to look up an example (it's similar to .then()).
// To be clear:
// * jsonResult is not a function. When you console.log it, it should be an object
// * it should not depend on any variables outside of scope
// * it should not modify any other variables
//
// Every question after question 1 should look something like:
// jsonResult.map(), jsonResult.filter(), etc.
// const jsonResult = <<your code here>>;


const jsonResult = async () => {
const response = await fetch('/bootcamp.json')
const users = await response.json()

return users
}

const renderStudents = async() => {
let data = await jsonResult()
// console.log(data)

}

renderStudents();



// Q2: Using map(), write a function that returns a new array with the students' first names with "-" before each one and displays it in the div with ID "studentsFirstName".

const q2renderStudents = async() => {
let data = await jsonResult()



let htmlPart = document.getElementById("studentsFirstName")

let dashedName = data.students.map(item => {
let dividedArr = item.split(' ')



let emptyArr = []
emptyArr.push(dividedArr[0])



return `-${emptyArr}<br>`
}).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 😈
Empty file.
63 changes: 63 additions & 0 deletions madLibz/bilal-ceyhun/README.md
Original file line number Diff line number Diff line change
@@ -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
![Example](https://i.imgur.com/ZRNvFC7.png)

#### 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).


<!-- From the story.txt file -->
Louis[n] went[v] to the store[n], and it was fun[a]. He taught[v] the class[n].
9 changes: 9 additions & 0 deletions madLibz/bilal-ceyhun/do-not-touch.js
Original file line number Diff line number Diff line change
@@ -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());
};
48 changes: 48 additions & 0 deletions madLibz/bilal-ceyhun/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Madlibz</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<header id="header">
<h1>Madlibzzz</h1>
<h3>Powered By: Bilal && Ceyhun<h3>
</header>

<div id="textWrapper">
<div class='madLibsEdit'>
</div>
<div class='madLibsPreview'>
</div>
</div>

<div id = "footer">
<h4>😓 found any bugs yet ??? 😓 Contact us now! 😍</h4>
<div id='link'>
<a href="https://github.com/awadbilal" class="contact" target='_blank'>Bilal Avvad</a>
<a href="https://github.com/ceyhungulbas/" class="contact" target='_blank'>Ceyhun Gülbaş</a>
</div>
<div id='links'>
<a href="https://github.com/halitbatur" class="contact" target='_blank'>Halit Batur</a>
<a href="https://github.com/Ammar-64/" class="contact" target='_blank'>Ammar Sammour</a>
<a href="https://github.com/muhannednoman" class="contact" target='_blank'>Muhanned Noman</a>
</div>
</div>

<footer>
🐧 &copy Copyright by Penguins 🐧
</footer>
</div>
<script src="do-not-touch.js"></script>
<script src="madlibs.js" defer></script>
</body>
</html>
157 changes: 157 additions & 0 deletions madLibz/bilal-ceyhun/madlibs.js
Original file line number Diff line number Diff line change
@@ -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();
}
});
}
});
1 change: 1 addition & 0 deletions madLibz/bilal-ceyhun/story.txt
Original file line number Diff line number Diff line change
@@ -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.
120 changes: 120 additions & 0 deletions madLibz/bilal-ceyhun/style.css
Original file line number Diff line number Diff line change
@@ -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;
}

69 changes: 69 additions & 0 deletions minesweeper/isa-ceyhun/index.js
Original file line number Diff line number Diff line change
@@ -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))
103 changes: 103 additions & 0 deletions movie-project/ceyhun/README.md
Original file line number Diff line number Diff line change
@@ -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).
Binary file added movie-project/ceyhun/background.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
139 changes: 139 additions & 0 deletions movie-project/ceyhun/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>CeyhunMDB</title>
</head>

<body>
<div class="layer">

</div>



<div id = "navbar">

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container-fluid">
<div>
<a class="navbar-brand active" id="homeButton" href="#" style="cursor: pointer;">CMDB</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto justify-content-center">
<li class="nav-item dropdown">

<li class="nav-item">
<a class="nav-link" id="homepage" href="index.html">Homepage</a>
</li>
<li class="nav-item">
<a class="nav-link" id="about" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" id="actors" href="#" onclick="AppPopularActor.run()">Actors</a>
</li>





<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Genres
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Adventure</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Animation</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Comedy</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Crime</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Documentary</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Drama</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Family</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Fantasy</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">History</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Horror</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Music</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Mystery</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Romance</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Science Fiction</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">TV Movie</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Thriller</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">War</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Western</a>
</div>
</li>
<li>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Movies
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a id="popular" href="#" onclick="App.run('popular')">POPULAR MOVIES</a>
<div class="dropdown-divider"></div>
<a id="topRate" href="#" onclick="App.run('top_rated')">TOP RATE</a>
<div class="dropdown-divider"></div>
<a id="nowPlaying" href="#" onclick="App.run('now_playing')">NOW PLAYING</a>
<div class="dropdown-divider"></div>
<a id="upComing" href="#" onclick="App.run('upcoming')">UP COMING</a>
</div>
</li>
</ul>
<form id="formHTML">
<input id="searchInputId" type="text" placeholder="Search" value="">
<button id="searchButtonId" type="submit">Search</button>
</form>
</div>
</div>
</nav>

</div>

<div id="container" class="container">
</div>



<footer>
<a href="https://github.com/ceyhungulbas">Ceyhun Gulbas</a>
</footer>




<script src="oopscript.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</body>

</html>

804 changes: 804 additions & 0 deletions movie-project/ceyhun/oopscript.js

Large diffs are not rendered by default.

17 changes: 17 additions & 0 deletions movie-project/ceyhun/presentation.md
Original file line number Diff line number Diff line change
@@ -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?

682 changes: 682 additions & 0 deletions movie-project/ceyhun/style.css

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions router-firebase/derya-ceyhun
Submodule derya-ceyhun added at 003bf1