├── 1.Resim Bulma Projesi └── 1.search-app │ ├── app.js │ ├── index.html │ └── style.css ├── 2.Döviz Kuru Projesi └── 2.currency-app │ ├── currency.js │ ├── index.html │ ├── main.js │ └── style.css ├── 3.Github Projesi └── 3.github-app │ ├── css │ ├── app.css │ ├── content.css │ ├── footer.css │ └── header.css │ ├── images │ ├── 81428286.png │ ├── company.png │ ├── githublogo.png │ ├── location.png │ └── mail.png │ ├── index.html │ └── js │ ├── github.js │ ├── main.js │ ├── storage.js │ └── ui.js ├── 4.Sinema Projesi └── 4.cinema-app │ ├── index.html │ ├── main.js │ ├── storage.js │ └── style.css ├── 5.Hava Durumu Projesi └── 5.weather-app │ ├── .vscode │ └── launch.json │ ├── api.js │ ├── index.html │ ├── main.js │ ├── style.css │ └── wp1.jpg ├── 6.Film Projesi └── 6.movie-app │ ├── api.js │ ├── index.html │ ├── main.js │ └── style.css ├── 7.Hesap Makinesi Projesi ├── .vscode │ └── settings.json ├── app.js ├── calculator.js ├── index.html └── style.css └── 8.Şifre Projesi ├── app.js ├── index.html └── style.css /1.Resim Bulma Projesi/1.search-app/app.js: -------------------------------------------------------------------------------- 1 | const formWrapper = document.querySelector(".form-wrapper"); 2 | const form = document.querySelector("#form"); 3 | const searchInput = document.querySelector("#searchInput"); 4 | const buttonWrapper= document.querySelector(".button-wrapper"); 5 | const searchButton = document.querySelector("#searchButton"); 6 | const clearButton = document.querySelector("#clearButton"); 7 | const imageListWrapper = document.querySelector(".imagelist-wrapper"); 8 | 9 | runEventListeners(); 10 | 11 | function runEventListeners(){ 12 | form.addEventListener("submit" , search); 13 | clearButton.addEventListener("click", clear); 14 | } 15 | 16 | function clear(){ 17 | searchInput.value=""; 18 | Array.from(imageListWrapper.children).forEach((child)=>child.remove()) 19 | // imageListWrapper.innerHTML=""; 20 | 21 | } 22 | 23 | function search(e){ 24 | const value = searchInput.value.trim(); 25 | // @RequestParam - Spring- Rest APİ 26 | fetch(`https://api.unsplash.com/search/photos?query=${value}`,{ 27 | method : "GET", 28 | headers : { 29 | Authorization : "Client-ID C-ZwMdVfZLUqf2EUV6lJeOB9k0_1CVGHsXaUfwJRamU" 30 | } 31 | }) 32 | .then((res)=> res.json()) 33 | .then((data)=>{ 34 | Array.from(data.results).forEach((image)=>{ 35 | // console.log(image.urls.small) 36 | addImageToUI(image.urls.small) 37 | }) 38 | }) 39 | .catch((err)=> console.log(err)); 40 | 41 | 42 | e.preventDefault(); 43 | } 44 | 45 | 46 | function addImageToUI(url){ 47 | /* 48 |
49 | 50 |
51 | */ 52 | console.log(imageListWrapper) 53 | const div = document.createElement("div"); 54 | div.className="card"; 55 | 56 | const img = document.createElement("img"); 57 | img.setAttribute("src",url); 58 | img.height='400'; 59 | img.width='400'; 60 | 61 | div.append(img); 62 | imageListWrapper.append(div); 63 | } -------------------------------------------------------------------------------- /1.Resim Bulma Projesi/1.search-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Arama Uygulaması 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 | 17 |
18 | 19 | 20 |
21 |
22 |
23 | 24 |
25 | 26 | 27 |
28 |
29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /1.Resim Bulma Projesi/1.search-app/style.css: -------------------------------------------------------------------------------- 1 | .form-wrapper { 2 | display: flex; 3 | flex-direction: column; 4 | width: 100%; 5 | margin: 20px 0px; 6 | } 7 | 8 | #form { 9 | display: flex; 10 | flex-direction: column; 11 | /* justify-content: center; */ 12 | align-items: center; 13 | } 14 | 15 | #searchInput { 16 | width: 75%; 17 | padding: 5px; 18 | border-radius: 5px; 19 | text-align: center; 20 | } 21 | 22 | .button-wrapper { 23 | margin: 10px 0px; 24 | } 25 | 26 | #searchButton { 27 | width: 110px; 28 | border-radius: 5px; 29 | border: none; 30 | padding: 5px; 31 | background-color: #464646; 32 | color: #fff; 33 | box-shadow: 1px 3px 5px lightgrey; 34 | } 35 | 36 | #clearButton { 37 | width: 110px; 38 | border-radius: 5px; 39 | border: none; 40 | padding: 5px; 41 | background-color: #cc3838; 42 | color: #fff; 43 | box-shadow: 1px 3px 5px lightgrey; 44 | } 45 | 46 | .imagelist-wrapper { 47 | display: flex; 48 | flex-direction: row; 49 | flex-wrap: wrap; 50 | justify-content: center; 51 | 52 | } 53 | 54 | .imagelist-wrapper > .card{ 55 | margin:20px; 56 | border: 1px solid grey; 57 | padding: 15px; 58 | border-radius: 5px; 59 | box-shadow: 3px 5px 8px grey; 60 | } -------------------------------------------------------------------------------- /2.Döviz Kuru Projesi/2.currency-app/currency.js: -------------------------------------------------------------------------------- 1 | class Currency{ 2 | constructor(){ 3 | this.url = "https://api.freecurrencyapi.com/v1/latest?apikey=DwubsVWBQzrAI1rY529XjbZy1rny84BA3XaIujP0&base_currency="; 4 | } 5 | 6 | async exchange(amount , firstCurrency , secondCurrency){ 7 | const response = await fetch(`${this.url}${firstCurrency}`); 8 | const result = await response.json(); 9 | const exchangedResult = amount * result.data[secondCurrency]; 10 | 11 | return exchangedResult; 12 | } 13 | } -------------------------------------------------------------------------------- /2.Döviz Kuru Projesi/2.currency-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Döviz Kuru Uygulaması 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |

DOVİZ KURU ÇEVİRİCİ

18 |
19 | 20 |
21 | 22 | 23 | 58 | 59 | 60 | 61 | 96 | 97 | 98 | 99 | Copyright - Enes Bayram 100 |
101 |
102 |
103 | 104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /2.Döviz Kuru Projesi/2.currency-app/main.js: -------------------------------------------------------------------------------- 1 | //Elementleri Seçelim. 2 | 3 | const amountInput = document.querySelector("#amount"); 4 | const firstOption = document.querySelector("#firstCurrencyOption"); 5 | const secondOption = document.querySelector("#secondCurrencyOption"); 6 | const resultInput = document.querySelector("#result"); 7 | 8 | const currency = new Currency(); 9 | 10 | runEventListeners(); 11 | 12 | function runEventListeners(){ 13 | amountInput.addEventListener("input",exchange); 14 | } 15 | 16 | 17 | function exchange(){ 18 | const amount = Number(amountInput.value.trim()); 19 | const firstOptionValue = firstOption.options[firstOption.selectedIndex].textContent; 20 | 21 | const secondOptionValue = secondOption.options[secondOption.selectedIndex] 22 | .textContent; 23 | 24 | 25 | currency.exchange(amount,firstOptionValue,secondOptionValue) 26 | .then((result) => { 27 | resultInput.value = result.toFixed(3) 28 | }) 29 | 30 | } -------------------------------------------------------------------------------- /2.Döviz Kuru Projesi/2.currency-app/style.css: -------------------------------------------------------------------------------- 1 | #container { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | } 6 | 7 | #main { 8 | display: flex; 9 | flex-direction: column; 10 | align-items: center; 11 | border: 1px solid lightgrey; 12 | width: 600px; 13 | height: auto; 14 | padding: 10px; 15 | border-radius: 5px; 16 | background-color: antiquewhite 17 | } 18 | 19 | .header-wrapper { 20 | display: flex; 21 | flex-direction: column; 22 | align-items: center; 23 | } 24 | 25 | .header-wrapper>h4 { 26 | margin: 15px; 27 | font-family: Arial, Helvetica, sans-serif; 28 | font-size: 20px; 29 | } 30 | 31 | 32 | input { 33 | padding: 5px; 34 | margin: 0px 10px; 35 | width: 120px; 36 | 37 | } 38 | 39 | select { 40 | padding: 5px; 41 | } 42 | 43 | span { 44 | display: block; 45 | text-align: center; 46 | margin-top: 20px; 47 | } -------------------------------------------------------------------------------- /3.Github Projesi/3.github-app/css/app.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: rgb(243, 239, 239); 3 | } -------------------------------------------------------------------------------- /3.Github Projesi/3.github-app/css/content.css: -------------------------------------------------------------------------------- 1 | #profileContentDiv { 2 | background-color: #fff; 3 | border: 1px solid lightgrey; 4 | padding: 10px; 5 | } 6 | 7 | #profileDiv { 8 | border: 1px solid lightgrey; 9 | padding: 20px; 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | justify-content: center; 14 | } 15 | 16 | #profilImg { 17 | border-radius: 50%; 18 | } 19 | 20 | .info { 21 | margin: 10px; 22 | } 23 | 24 | #reposDiv { 25 | margin-top: 10px; 26 | background-color: #fff; 27 | border: 1px solid lightgrey; 28 | padding: 10px; 29 | } 30 | 31 | #searchedUserDiv { 32 | display: flex; 33 | flex-direction: row; 34 | margin-top: 10px; 35 | background-color: #fff; 36 | border: 1px solid lightgrey; 37 | padding: 10px; 38 | } 39 | 40 | #searchMain { 41 | display: flex; 42 | flex-direction: row; 43 | } 44 | 45 | #todaySentenceDiv{ 46 | margin-top: 65px; 47 | background-color: #fff; 48 | border: 1px solid lightgrey; 49 | 50 | } -------------------------------------------------------------------------------- /3.Github Projesi/3.github-app/css/footer.css: -------------------------------------------------------------------------------- 1 | #footer { 2 | margin-top: 10px; 3 | background-color: #fff; 4 | border: 1px solid lightgrey; 5 | 6 | } 7 | 8 | #mainDiv { 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | justify-content: center; 13 | } 14 | 15 | #instagramLogo{ 16 | font-size: 35px; 17 | color: rgb(220, 82, 82); 18 | margin-right: 5px; 19 | } 20 | 21 | #youtubeLogo{ 22 | font-size: 35px; 23 | color: red; 24 | margin-right: 5px; 25 | } 26 | 27 | 28 | #twitterLogo{ 29 | font-size: 35px; 30 | color: rgb(56, 113, 194); 31 | } -------------------------------------------------------------------------------- /3.Github Projesi/3.github-app/css/header.css: -------------------------------------------------------------------------------- 1 | #githublogo{ 2 | width: 60px; 3 | height: 60px; 4 | } 5 | 6 | #header{ 7 | background-color: #fff; 8 | border: 1px solid lightgrey; 9 | padding: 10px; 10 | } 11 | 12 | .header-title{ 13 | font-family: monospace; 14 | } 15 | 16 | #searchDiv{ 17 | background-color: #fff; 18 | border: 1px solid lightgrey; 19 | padding: 10px; 20 | } 21 | 22 | -------------------------------------------------------------------------------- /3.Github Projesi/3.github-app/images/81428286.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enesbayyram/udemy-javascript-projeleri/844177cc726b4460741c882f71461e6e74a09fd1/3.Github Projesi/3.github-app/images/81428286.png -------------------------------------------------------------------------------- /3.Github Projesi/3.github-app/images/company.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enesbayyram/udemy-javascript-projeleri/844177cc726b4460741c882f71461e6e74a09fd1/3.Github Projesi/3.github-app/images/company.png -------------------------------------------------------------------------------- /3.Github Projesi/3.github-app/images/githublogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enesbayyram/udemy-javascript-projeleri/844177cc726b4460741c882f71461e6e74a09fd1/3.Github Projesi/3.github-app/images/githublogo.png -------------------------------------------------------------------------------- /3.Github Projesi/3.github-app/images/location.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enesbayyram/udemy-javascript-projeleri/844177cc726b4460741c882f71461e6e74a09fd1/3.Github Projesi/3.github-app/images/location.png -------------------------------------------------------------------------------- /3.Github Projesi/3.github-app/images/mail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enesbayyram/udemy-javascript-projeleri/844177cc726b4460741c882f71461e6e74a09fd1/3.Github Projesi/3.github-app/images/mail.png -------------------------------------------------------------------------------- /3.Github Projesi/3.github-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Github Uygulaması 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 34 | 35 | 36 |
37 |
38 |
39 | 40 |
41 | 42 | 43 |
44 |
45 |
46 |
47 | 48 |
49 | 90 |
91 | 92 |
93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 107 | 108 | 109 | 110 |
NoProje İsmiOluşturma Tarihi
111 |
112 | 113 | 114 |
115 |
116 |
117 |
Son Arananlar
118 | 119 |
120 |
121 |
    122 | 123 |
124 |
125 |
126 | 127 |
128 |
129 |
130 |
131 |
Günün Sözü
132 |

Some quick example text to build on the card title and make up the bulk of the card's content.

133 |
134 |
135 |
136 |
137 |
138 | 139 | 149 |
150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 161 | 164 | 167 | 168 | 169 | -------------------------------------------------------------------------------- /3.Github Projesi/3.github-app/js/github.js: -------------------------------------------------------------------------------- 1 | class Github { 2 | constructor() { 3 | this.url = "https://api.github.com/users/"; 4 | } 5 | 6 | async getGithubData(username) { 7 | const userData = await (await fetch(`${this.url}${username}`)).json(); 8 | const repoData = await (await fetch(`${this.url}${username}/repos`)).json(); 9 | 10 | return { 11 | user: userData, 12 | repo: repoData 13 | } 14 | } 15 | } -------------------------------------------------------------------------------- /3.Github Projesi/3.github-app/js/main.js: -------------------------------------------------------------------------------- 1 | const githubName = document.querySelector("#githubname"); 2 | const form = document.querySelector("#searchForm"); 3 | const clearButton = document.querySelector("#clearButton"); 4 | const clearAllButton = document.querySelector("#clearAllButton"); 5 | 6 | const github = new Github(); 7 | const ui = new UI(); 8 | 9 | runEventListeners(); 10 | 11 | function runEventListeners(){ 12 | form.addEventListener("submit", search); 13 | clearButton.addEventListener("click", clearInput); 14 | document.addEventListener("DOMContentLoaded",runPageLoaded); 15 | clearAllButton.addEventListener("click",clearSearchedUser); 16 | 17 | } 18 | function clearSearchedUser(){ 19 | Storagex.clearAllSearchedUserFromStorage(); 20 | ui.clearSearchedUsers(); 21 | } 22 | function runPageLoaded(){ 23 | ui.fillSearchedUserToUIFromStorage(); 24 | } 25 | 26 | function clearInput(){ 27 | ui.clearInput(); 28 | } 29 | 30 | function search(e){ 31 | const username = githubName.value.trim(); 32 | if(username==null || username==""){ 33 | alert("Lütfen bir kullanıcı adı giriniz!") 34 | }else{ 35 | github.getGithubData(username) 36 | .then(response => { 37 | 38 | ui.addSearchedUserToUI(username); 39 | Storagex.addSearchedUserToStorage(username); 40 | ui.addUserProfileToUI(response.user); 41 | document.querySelector("#showRepo").addEventListener("click",()=> ui.showRepos(response.repo)); 42 | 43 | }) 44 | .catch(error => console.log(error)) 45 | } 46 | 47 | e.preventDefault(); 48 | } -------------------------------------------------------------------------------- /3.Github Projesi/3.github-app/js/storage.js: -------------------------------------------------------------------------------- 1 | class Storagex { 2 | 3 | static key = "searchedUsers"; 4 | 5 | static getSearchedUserFromStorage() { 6 | let users; 7 | if (localStorage.getItem(this.key) == null) { 8 | users = []; 9 | } else { 10 | users = JSON.parse(localStorage.getItem(this.key)); 11 | } 12 | return users; 13 | } 14 | 15 | static checkUser(username) { 16 | const users = this.getSearchedUserFromStorage(); 17 | if (!users.includes(username)) { 18 | return true; 19 | } 20 | return false; 21 | } 22 | 23 | static addSearchedUserToStorage(username) { 24 | //engindemirog 25 | const users = this.getSearchedUserFromStorage(); 26 | if(this.checkUser(username)){ 27 | users.push(username.trim()); 28 | localStorage.setItem(this.key, JSON.stringify(users)); 29 | } 30 | } 31 | 32 | static clearAllSearchedUserFromStorage(){ 33 | localStorage.removeItem(this.key); 34 | } 35 | } -------------------------------------------------------------------------------- /3.Github Projesi/3.github-app/js/ui.js: -------------------------------------------------------------------------------- 1 | class UI { 2 | constructor() { 3 | this.profileContentDiv = document.querySelector("#profileContentDiv"); 4 | this.githubNameInput = document.querySelector("#githubname"); 5 | this.tableContent = document.querySelector("#tableContent"); 6 | this.table = document.querySelector("#table"); 7 | this.searchedUserList = document.querySelector("#searchedUserList"); 8 | this.isShowRepo = true; 9 | } 10 | 11 | fillSearchedUserToUIFromStorage(){ 12 | const users = Storagex.getSearchedUserFromStorage(); 13 | if(users!=null && users.length>0){ 14 | users.forEach(user =>{ 15 | const li = document.createElement("li"); 16 | li.className = "list-group-item"; 17 | li.textContent = user; 18 | this.searchedUserList.appendChild(li); 19 | }) 20 | } 21 | } 22 | 23 | addSearchedUserToUI(username) { 24 | if (Storagex.checkUser(username)) { 25 | const li = document.createElement("li"); 26 | li.className = "list-group-item"; 27 | li.textContent = username; 28 | this.searchedUserList.appendChild(li); 29 | } 30 | } 31 | 32 | addUserProfileToUI(user) { 33 | this.profileContentDiv.innerHTML = ` 34 |
35 |
36 | 37 |
38 | ${user.name} 39 | Yazılım Geliştirici 40 |
41 |
42 | 43 |
44 |
45 | 48 | 51 | 54 |
55 | 56 |
57 |
58 | 59 | ${user.company == null ? "" : user.company} 60 |
61 |
62 | 63 | ${user.location == null ? "" : user.location} 64 |
65 |
66 | 67 | ${user.email == null ? "" : user.email} 68 |
69 | 70 |
71 | Repoları Göster 72 |
73 |
74 |
75 | `; 76 | } 77 | 78 | checkMessage() { 79 | const showRepoLink = document.querySelector("#showRepo"); 80 | if (this.isShowRepo) { 81 | showRepoLink.textContent = "Repoları Göster"; 82 | } else { 83 | showRepoLink.textContent = "Repoları Kapat"; 84 | } 85 | } 86 | 87 | showRepos(repos) { 88 | if (this.isShowRepo) { 89 | if (repos != null && repos.length > 0) { 90 | let sayac = 1; 91 | repos.forEach(repo => { 92 | this.tableContent.innerHTML += ` 93 | 94 | ${sayac} 95 | ${repo.name} 96 | ${repo.created_at} 97 | 98 | `; 99 | sayac++; 100 | }) 101 | } 102 | this.isShowRepo = false; 103 | this.checkMessage(); 104 | } else { 105 | this.isShowRepo = true; 106 | this.checkMessage(); 107 | this.tableContent.innerHTML = ""; 108 | } 109 | 110 | 111 | } 112 | 113 | clearSearchedUsers(){ 114 | this.searchedUserList.innerHTML=""; 115 | } 116 | 117 | clearInput() { 118 | this.githubNameInput.value = ""; 119 | this.profileContentDiv.innerHTML = ""; 120 | this.tableContent.innerHTML=""; 121 | } 122 | } -------------------------------------------------------------------------------- /4.Sinema Projesi/4.cinema-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Sinema Bilet Uygulaması 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

Sinema Bilet Uygulaması

17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 | 80 |
81 | 86 |
87 | 88 |
89 |
90 |
Boş
91 |
Seçili
92 |
Dolu
93 |
94 |
95 | 96 |
97 |

0 adet bilet için ödenecek tutar 0 TL'dir

98 |
99 | 100 |
101 | 102 | 103 |
104 | 105 |
106 |

SAHNE

107 |
108 |
109 | 110 | 111 | 112 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /4.Sinema Projesi/4.cinema-app/main.js: -------------------------------------------------------------------------------- 1 | //Elementleri Seçmek 2 | 3 | const container = document.querySelector(".container"); 4 | const selectMovie = document.querySelector("#selectMovie"); 5 | const count = document.querySelector("#count"); 6 | const amount = document.querySelector("#amount"); 7 | const seats = Array.from(document.querySelectorAll(".seat")); 8 | const buyButton = document.querySelector("#buyButton"); 9 | 10 | runEventListeners(); 11 | 12 | 13 | function runEventListeners() { 14 | container.addEventListener("click", select); 15 | selectMovie.addEventListener("change",changeMovie); 16 | document.addEventListener("DOMContentLoaded" , runPageLoaded); 17 | buyButton.addEventListener("click",buyTicket); 18 | } 19 | 20 | 21 | function runPageLoaded(){ 22 | const selectedSeatsIndex = Storagex.getSelectedSeatsFromStorage(); 23 | const fullSeatsIndex = Storagex.getFullSeatsFromStorage(); 24 | 25 | seats.forEach((seat ,index)=>{ 26 | if(selectedSeatsIndex.includes(index)){ 27 | seat.classList.add("selected"); 28 | } 29 | }) 30 | 31 | seats.forEach((seat , index)=>{ 32 | if(fullSeatsIndex.includes(index)){ 33 | seat.classList.add("full"); 34 | } 35 | }) 36 | 37 | selectMovie.selectedIndex = Storagex.getSelectedMovieIndexFromStorage(); 38 | calculate() 39 | } 40 | 41 | function buyTicket(){ 42 | if(confirm("Satın almak istiyor musunuz ?")){ 43 | const selectedSeats = getSelectedSeats(); 44 | const selectedSeatsIndex= getSelectedSeatsIndex(); 45 | selectedSeats.forEach(seat => { 46 | seat.classList.remove("selected"); 47 | seat.classList.add("full"); 48 | }); 49 | Storagex.addFullSeatToStorage(selectedSeatsIndex); 50 | 51 | Storagex.addSelectedSeatToStorage(getSelectedSeatsIndex()); 52 | 53 | 54 | } 55 | } 56 | 57 | function select(e) { 58 | const selectedElement = e.target.parentElement; 59 | if (selectedElement.classList.contains("seat") && !selectedElement.classList.contains(".full")) { 60 | selectedElement.classList.toggle("selected"); 61 | calculate(); 62 | saveSelectedSeatsIndexToStorage(); 63 | saveSelectedMovieIndexToStorage(); 64 | } 65 | } 66 | 67 | function changeMovie(){ 68 | calculate(); 69 | saveSelectedMovieIndexToStorage(); 70 | } 71 | 72 | function getSelectedSeats(){ 73 | const selectedList = [...container.querySelectorAll(".selected")]; 74 | return selectedList; 75 | } 76 | 77 | function getSelectedSeatsIndex(){ 78 | const selectedList = getSelectedSeats(); 79 | const selectedSeatsIndex = selectedList.map((seat)=>{ 80 | return seats.indexOf(seat); 81 | }) 82 | return selectedSeatsIndex; 83 | } 84 | 85 | function saveSelectedSeatsIndexToStorage(){ 86 | const selectedSeatsIndex= getSelectedSeatsIndex(); 87 | Storagex.addSelectedSeatToStorage(selectedSeatsIndex); 88 | } 89 | 90 | function saveSelectedMovieIndexToStorage(){ 91 | const selectedMovieIndex = selectMovie.selectedIndex; 92 | Storagex.addSelectedMovieToStorage(selectedMovieIndex); 93 | } 94 | 95 | 96 | function calculate() { 97 | const seletedSeatsCount = getSelectedSeats().length; 98 | //selectMovie.options[selectMovie.selectedIndex].value; 99 | const price = selectMovie.value; 100 | 101 | count.textContent= seletedSeatsCount; 102 | amount.textContent = seletedSeatsCount*price 103 | } -------------------------------------------------------------------------------- /4.Sinema Projesi/4.cinema-app/storage.js: -------------------------------------------------------------------------------- 1 | class Storagex { 2 | 3 | static keySelectedSeats = "keySelectedSeats"; 4 | static keyFullSeats = "keyFullSeats"; 5 | static keySelectedMovie = "keySelectedMovie"; 6 | 7 | //Listeleme 8 | static getSelectedSeatsFromStorage() { 9 | let selectedSeats; 10 | if (localStorage.getItem(this.keySelectedSeats) === null) { 11 | selectedSeats = []; 12 | } else { 13 | selectedSeats = JSON.parse(localStorage.getItem(this.keySelectedSeats)); 14 | } 15 | return selectedSeats; 16 | } 17 | 18 | static getFullSeatsFromStorage() { 19 | let fullSeats; 20 | if (localStorage.getItem(this.keyFullSeats) === null) { 21 | fullSeats = []; 22 | } else { 23 | fullSeats = JSON.parse(localStorage.getItem(this.keyFullSeats)); 24 | } 25 | return fullSeats; 26 | } 27 | 28 | static getSelectedMovieIndexFromStorage() { 29 | return localStorage.getItem(this.keySelectedMovie); 30 | } 31 | // Ekleme 32 | 33 | static addSelectedSeatToStorage(indexs) { 34 | localStorage.setItem(this.keySelectedSeats, JSON.stringify(indexs)); 35 | } 36 | 37 | static addFullSeatToStorage(indexs) { 38 | const fullSeatsIndex= this.getFullSeatsFromStorage(); 39 | indexs.forEach(index=>fullSeatsIndex.push(index)) 40 | localStorage.setItem(this.keyFullSeats, JSON.stringify(fullSeatsIndex)); 41 | } 42 | 43 | static addSelectedMovieToStorage(index) { 44 | localStorage.setItem(this.keySelectedMovie, JSON.stringify(index)); 45 | } 46 | } -------------------------------------------------------------------------------- /4.Sinema Projesi/4.cinema-app/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: rgb(54, 54, 54); 3 | margin: 0px; 4 | } 5 | 6 | .container { 7 | display: flex; 8 | flex-direction: column; 9 | align-items: center; 10 | justify-content: center; 11 | height: 100vh; 12 | 13 | } 14 | 15 | .title { 16 | color: lightgrey; 17 | font-family: Arial, Helvetica, sans-serif; 18 | } 19 | 20 | .row { 21 | display: flex; 22 | flex-direction: row; 23 | justify-content: center; 24 | align-items: center; 25 | } 26 | 27 | 28 | .seat { 29 | font-size: 35px; 30 | margin: 6px; 31 | color: lightgrey; 32 | } 33 | 34 | .seat:not(.full):hover{ 35 | transform: scale(1.2); 36 | } 37 | 38 | .movieMain { 39 | margin-top: 15px; 40 | } 41 | 42 | #selectMovie { 43 | width: 200px; 44 | padding: 5px; 45 | border-radius: 5px; 46 | font-weight: bold; 47 | font-family: Arial, Helvetica, sans-serif; 48 | } 49 | 50 | /* Koltuk Statüleri BAŞLANGIÇ */ 51 | 52 | .seatStatusMain { 53 | margin-top: 20px; 54 | } 55 | 56 | .emptySeat { 57 | color: lightgrey; 58 | font-size: 16px; 59 | } 60 | 61 | .selectedSeat { 62 | color: rgb(227, 227, 98); 63 | font-size: 16px; 64 | } 65 | 66 | .fullSeat { 67 | color: rgb(233, 68, 68); 68 | font-size: 16px; 69 | } 70 | 71 | 72 | .seatStatusMain>.row>div { 73 | margin-right: 10px; 74 | } 75 | 76 | /* Koltuk Statüleri BİTİŞ */ 77 | 78 | 79 | 80 | /* Sonuç Metni */ 81 | .resultTextMain { 82 | margin-top: 10px; 83 | } 84 | 85 | .resultTextMain>p { 86 | color: lightgrey; 87 | font-size: 18px; 88 | } 89 | 90 | .resultTextMain>p>span { 91 | color: rgb(231, 231, 78); 92 | } 93 | 94 | /* Sonuç Metni */ 95 | 96 | 97 | /* Butonlar Başlangıç */ 98 | 99 | .buttonMain { 100 | margin-top: 10px; 101 | } 102 | 103 | #buyButton { 104 | width: 80px; 105 | padding: 5px; 106 | border-radius: 5px; 107 | font-family: Arial, Helvetica, sans-serif; 108 | font-size: 14px; 109 | background-color: rgb(23, 100, 41); 110 | border: none; 111 | color: #fff; 112 | } 113 | 114 | #clearButton { 115 | width: 80px; 116 | padding: 5px; 117 | border-radius: 5px; 118 | font-family: Arial, Helvetica, sans-serif; 119 | font-size: 14px; 120 | background-color: rgb(108, 108, 108); 121 | border: none; 122 | color: #fff; 123 | } 124 | 125 | 126 | /* Butonlar Bitiş */ 127 | 128 | 129 | 130 | 131 | /* SAHNE */ 132 | 133 | .screen { 134 | background-color: lightgrey; 135 | width: 650px; 136 | height: 140px; 137 | margin-top: 40px; 138 | margin-bottom: 50px; 139 | border-radius: 5px; 140 | box-shadow: 2px 4px 8px lightgrey; 141 | } 142 | 143 | .screenTitle { 144 | margin: 0px; 145 | display: flex; 146 | flex-direction: column; 147 | align-items: center; 148 | justify-content: center; 149 | height: 100%; 150 | color: rgb(57, 57, 57); 151 | font-family: Arial, Helvetica, sans-serif; 152 | } 153 | 154 | /* SAHNE */ 155 | 156 | 157 | 158 | /* KOLTUK RENKLERİ */ 159 | 160 | .empty{ 161 | color:lightgrey; 162 | } 163 | 164 | .selected{ 165 | color:rgb(227, 227, 98); 166 | } 167 | 168 | .full{ 169 | color: rgb(233, 68, 68); 170 | } 171 | 172 | 173 | /* KOLTUK RENKLERİ */ -------------------------------------------------------------------------------- /5.Hava Durumu Projesi/5.weather-app/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | 8 | { 9 | "type": "chrome", 10 | "request": "launch", 11 | "name": "Launch Chrome against localhost", 12 | "url": "http://localhost:8080", 13 | "webRoot": "${workspaceFolder}" 14 | } 15 | ] 16 | } -------------------------------------------------------------------------------- /5.Hava Durumu Projesi/5.weather-app/api.js: -------------------------------------------------------------------------------- 1 | class WeatherAPI { 2 | constructor() { 3 | this.baseUrl = "https://api.openweathermap.org/data/2.5/weather"; 4 | this.apiKey = "40780f584ae83749b62a5335ccf1e583" 5 | } 6 | 7 | async getWeatherInfo(cityName) { 8 | const response = await fetch(`${this.baseUrl}?q=${cityName}&units=metric&lang=tr&appid=${this.apiKey}`) 9 | const data = await response.json(); 10 | return data; 11 | } 12 | } -------------------------------------------------------------------------------- /5.Hava Durumu Projesi/5.weather-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hava Durumu 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |

HAVA DURUMU

16 | 17 |
18 | 19 |
20 |
İstanbul
21 |
25°
22 |
Güneşli
23 |
24 |
25 |
26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /5.Hava Durumu Projesi/5.weather-app/main.js: -------------------------------------------------------------------------------- 1 | //Elementleri Seçmek 2 | const container = document.querySelector(".container"); 3 | const searchInput = document.querySelector("#searchInput"); 4 | const cityName = document.querySelector(".cityName"); 5 | const degree = document.querySelector(".degree"); 6 | const desc = document.querySelector(".desc"); 7 | 8 | const weatherApi = new WeatherAPI(); 9 | 10 | searchInput.addEventListener("keypress", getWeatherInfo); 11 | 12 | 13 | function getWeatherInfo(e) { 14 | if (e.keyCode == '13') { 15 | //Enter'a basmış. 16 | const cityName = searchInput.value.trim(); 17 | weatherApi.getWeatherInfo(cityName) 18 | .then((data) => { 19 | if (data.message === "city not found") { 20 | alert("Şehir bulunamadı") 21 | } else { 22 | console.log(data) 23 | displayInfos(data); 24 | } 25 | }) 26 | .catch((error) => console.log(error)); 27 | } 28 | } 29 | 30 | 31 | function displayInfos(data) { 32 | cityName.textContent = data.name; 33 | degree.textContent = `${Math.round(data.main.temp)}°`; 34 | desc.textContent = data.weather[0].description; 35 | clearInputs(); 36 | } 37 | 38 | function clearInputs(){ 39 | searchInput.value=""; 40 | } -------------------------------------------------------------------------------- /5.Hava Durumu Projesi/5.weather-app/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap'); 2 | * { 3 | margin: 0; 4 | padding: 0px; 5 | } 6 | 7 | body { 8 | background-image: url('wp1.jpg'); 9 | background-position: center; 10 | background-repeat: no-repeat; 11 | background-size: cover; 12 | height: 100vh; 13 | font-family: 'Poppins', sans-serif; 14 | 15 | } 16 | 17 | .container { 18 | display: flex; 19 | flex-direction: column; 20 | align-items: center; 21 | height: 100vh; 22 | } 23 | 24 | .app { 25 | margin-top: 50px; 26 | background-color: rgb(224, 224, 224); 27 | opacity: 0.8; 28 | width: 400px; 29 | padding: 30px; 30 | border-radius: 5px; 31 | box-shadow: 10px 1px 14px rgb(98, 98, 98); 32 | 33 | } 34 | 35 | .header{ 36 | display: flex; 37 | flex-direction: column; 38 | justify-content: center; 39 | align-items: center; 40 | } 41 | 42 | .title{ 43 | text-align: center; 44 | margin-top: 10px; 45 | font-weight: bold; 46 | color: rgb(240, 136, 0); 47 | } 48 | 49 | #searchInput{ 50 | padding: 10px; 51 | width: 100%; 52 | /* border: 1px solid lightgrey; */ 53 | margin-top: 25px; 54 | text-align: center; 55 | font-size: 20px; 56 | border: none; 57 | outline: none; 58 | background-color: transparent; 59 | border-bottom: 2px solid grey; 60 | box-shadow: 10px 5px 50px lightgrey; 61 | 62 | } 63 | 64 | .content{ 65 | display: flex; 66 | flex-direction: column; 67 | justify-content: center; 68 | align-items: center; 69 | margin-top: 40px; 70 | } 71 | 72 | .cityName{ 73 | font-size: 40px; 74 | } 75 | 76 | .degree{ 77 | color: rgb(24, 24, 24); 78 | margin-top: 5px; 79 | font-size: 75px; 80 | } 81 | 82 | 83 | .state{ 84 | margin-top: 5px; 85 | font-size: 25px; 86 | } -------------------------------------------------------------------------------- /5.Hava Durumu Projesi/5.weather-app/wp1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enesbayyram/udemy-javascript-projeleri/844177cc726b4460741c882f71461e6e74a09fd1/5.Hava Durumu Projesi/5.weather-app/wp1.jpg -------------------------------------------------------------------------------- /6.Film Projesi/6.movie-app/api.js: -------------------------------------------------------------------------------- 1 | class MovieAPI{ 2 | constructor(){ 3 | this.apiKey = "9a75b3b33b81b046434198c9a58b6b33"; 4 | this.baseImageURL = "https://image.tmdb.org/t/p/w1280/"; 5 | this.popularURL = `https://api.themoviedb.org/3/discover/movie?api_key=${this.apiKey}&language=tr-TR&sort_by=popularity.desc`; 6 | this.searchURL =`https://api.themoviedb.org/3/search/movie?api_key=${this.apiKey}&query=`; 7 | this.movies = document.querySelector(".movies"); 8 | } 9 | 10 | 11 | async getPopularMovies(){ 12 | const response =await fetch(this.popularURL); 13 | const movies = await response.json(); 14 | this.displayInfo(movies); 15 | } 16 | 17 | async getMoviesByName(movieName){ 18 | const response = await fetch(this.searchURL+movieName); 19 | const movies = await response.json(); 20 | this.displayInfo(movies); 21 | } 22 | 23 | 24 | displayInfo(movies){ 25 | this.movies.innerHTML=""; 26 | 27 | movies.results.forEach(movie =>{ 28 | this.movies.innerHTML+=` 29 |
30 | 31 | 32 |
33 |

${movie.title}

34 |
${Math.round(movie.vote_average)}
35 |
36 |
37 | `; 38 | }) 39 | } 40 | 41 | changeColor(imdbPoint){ 42 | if(imdbPoint>=8){ 43 | return "green"; 44 | } 45 | else if(imdbPoint>=7){ 46 | return "yellow"; 47 | } 48 | return "red"; 49 | } 50 | } -------------------------------------------------------------------------------- /6.Film Projesi/6.movie-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Film Uygulaması 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 |
17 |
18 | 19 |
20 | 28 |
29 |
30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /6.Film Projesi/6.movie-app/main.js: -------------------------------------------------------------------------------- 1 | //Elementleri Seçmek 2 | const form = document.querySelector("#form"); 3 | const searchInput = document.querySelector("#searchInput"); 4 | 5 | const movieApi = new MovieAPI(); 6 | runEventListeners(); 7 | 8 | 9 | function runEventListeners(){ 10 | document.addEventListener("DOMContentLoaded" ,movieApi.getPopularMovies()); 11 | form.addEventListener("submit", getMoviesByName); 12 | } 13 | 14 | 15 | function getMoviesByName(e){ 16 | const movieName = searchInput.value.trim(); 17 | movieApi.getMoviesByName(movieName); 18 | 19 | e.preventDefault(); 20 | } -------------------------------------------------------------------------------- /6.Film Projesi/6.movie-app/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap'); 2 | 3 | * { 4 | margin: 0px; 5 | padding: 0px; 6 | } 7 | 8 | body { 9 | background-color: #363d6b; 10 | font-family: "Poppins"; 11 | } 12 | 13 | .header { 14 | display: flex; 15 | flex-direction: column; 16 | align-items: flex-end; 17 | } 18 | 19 | #searchInput { 20 | padding: 5px; 21 | border-radius: 50px; 22 | background-color: transparent; 23 | outline: none; 24 | margin-top: 15px; 25 | margin-right: 25px; 26 | color: #fff; 27 | } 28 | 29 | #searchInput::placeholder{ 30 | color: lightgrey; 31 | font-size: 12px; 32 | text-align: center; 33 | } 34 | 35 | .movies { 36 | display: flex; 37 | flex-direction: row; 38 | justify-content: center; 39 | align-items: center; 40 | flex-wrap: wrap; 41 | margin-top: 15px; 42 | } 43 | 44 | .movie { 45 | margin: 6px; 46 | width: 260px; 47 | height: 405px; 48 | background-color: #53597f; 49 | } 50 | 51 | .moviePicture { 52 | width: 260px; 53 | height: 320px; 54 | } 55 | 56 | .info { 57 | display: flex; 58 | flex-direction: row; 59 | justify-content: center; 60 | align-items: center; 61 | margin-top: 20px; 62 | } 63 | 64 | .movieName { 65 | font-size: 13px; 66 | color: lightgrey; 67 | margin-right: 10px; 68 | } 69 | 70 | .imdbPoint { 71 | font-size: 15px; 72 | color: black; 73 | background-color: rgb(223, 216, 21); 74 | padding: 3px; 75 | } 76 | 77 | .green{ 78 | background-color: rgb(22, 112, 22); 79 | color: #fff; 80 | } 81 | 82 | .yellow{ 83 | background-color: rgb(223, 216, 21); 84 | color: black; 85 | } 86 | 87 | 88 | .red{ 89 | background-color: red; 90 | color: #fff; 91 | } -------------------------------------------------------------------------------- /7.Hesap Makinesi Projesi/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /7.Hesap Makinesi Projesi/app.js: -------------------------------------------------------------------------------- 1 | //ELementleri Seçmek 2 | 3 | const calculatorEl = document.querySelector("#calculator"); 4 | const resultEl = document.querySelector(".result"); 5 | const clearAllEl = document.querySelector("#clearAll"); 6 | const deleteACharEl = document.querySelector("#deleteAChar"); 7 | 8 | 9 | 10 | //Değiken Tanımlama 11 | let firstNumber = ''; 12 | let selectedOperator = ''; 13 | let afterNumber = ''; 14 | let isWaitingANewValue = false; 15 | 16 | 17 | runEventListeners(); 18 | 19 | 20 | function runEventListeners() { 21 | calculatorEl.addEventListener("click", write); 22 | clearAllEl.addEventListener("click", clearAll); 23 | deleteACharEl.addEventListener("click", deleteAChar); 24 | } 25 | 26 | function deleteAChar() { 27 | if (isWaitingANewValue) { 28 | afterNumber = Calculator.deleteLastCharacter(afterNumber); 29 | } else { 30 | firstNumber = Cache.deleteLastCharacter(firstNumber); 31 | } 32 | resultEl.innerHTML = Calculator.deleteLastCharacter(resultEl.innerHTML); 33 | } 34 | 35 | function clearAll() { 36 | firstNumber = ''; 37 | selectedOperator = ''; 38 | afterNumber = ''; 39 | isWaitingANewValue = false; 40 | clearResultPanel(); 41 | 42 | } 43 | 44 | 45 | function write(e) { 46 | const element = e.target; 47 | 48 | if (element.classList.contains("number")) { 49 | //Sayıya basmıştır. 50 | if (isWaitingANewValue) { 51 | afterNumber += element.value; 52 | } else { 53 | firstNumber += element.value; 54 | } 55 | updateResultPanel(element.value); 56 | } 57 | else if (element.classList.contains("operator")) { 58 | //Operatore Basmıştır. 59 | if (!Calculator.isHaveOperator(resultEl.innerHTML)) { 60 | selectedOperator = element.value; 61 | isWaitingANewValue = true; 62 | 63 | updateResultPanel(element.value); 64 | } 65 | 66 | 67 | } 68 | else if (element.classList.contains("equals")) { 69 | //Eşittire basmıştır. 70 | let result = calculate(firstNumber, selectedOperator, afterNumber).toString(); 71 | firstNumber = result; 72 | 73 | isWaitingANewValue = false; 74 | clearOperatorAndAfterNumber(); 75 | clearResultPanel(); 76 | updateResultPanel(result); 77 | } 78 | // console.log(firstNumber , selectedOperator , afterNumber) 79 | } 80 | 81 | 82 | 83 | function calculate(firstNumber, operator, secondNumber) { 84 | debugger 85 | let result; 86 | let dotResult = Calculator.isHaveDot(firstNumber) || Calculator.isHaveDot(firstNumber); 87 | switch (operator) { 88 | case "+": 89 | result = dotResult ? parseFloat(firstNumber) + parseFloat(secondNumber) : parseInt(firstNumber) + parseInt(secondNumber); 90 | break; 91 | 92 | case "-": 93 | result = dotResult ? parseFloat(firstNumber) - parseFloat(secondNumber) : parseInt(firstNumber) - parseInt(secondNumber); 94 | break; 95 | 96 | case "*": 97 | result = dotResult ? parseFloat(firstNumber) * parseFloat(secondNumber) : parseInt(firstNumber) * parseInt(secondNumber); 98 | break; 99 | 100 | case "/": 101 | result = dotResult ? parseFloat(firstNumber) / parseFloat(secondNumber) : parseInt(firstNumber) / parseInt(secondNumber); 102 | break; 103 | } 104 | 105 | return result; 106 | } 107 | 108 | 109 | function updateResultPanel(value) { 110 | if (value.length >= 6) { 111 | value = parseFloat(value).toFixed(2); 112 | } 113 | resultEl.innerHTML += value; 114 | } 115 | 116 | function clearResultPanel() { 117 | resultEl.innerHTML = ""; 118 | } 119 | 120 | function clearOperatorAndAfterNumber() { 121 | selectedOperator = ""; 122 | afterNumber = ""; 123 | } -------------------------------------------------------------------------------- /7.Hesap Makinesi Projesi/calculator.js: -------------------------------------------------------------------------------- 1 | class Calculator{ 2 | 3 | static isHaveOperator(value){ 4 | let result = false; 5 | for(let i =0 ; i< value.length; i++){ 6 | if(this.getOperators().has(value[i])){ 7 | result=true; 8 | break; 9 | } 10 | } 11 | 12 | return result; 13 | } 14 | 15 | static isHaveDot(value){ 16 | if(value.includes(".")){ 17 | return true; 18 | } 19 | return false; 20 | } 21 | 22 | static deleteLastCharacter(value){ 23 | return value.slice(0 , value.length -1); 24 | } 25 | 26 | 27 | static getOperators(){ 28 | const map = new Map(); 29 | map.set("+", "toplama"); 30 | map.set("-", "cikarma"); 31 | map.set("*", "carpma"); 32 | map.set("/", "bolme"); 33 | 34 | return map; 35 | } 36 | } -------------------------------------------------------------------------------- /7.Hesap Makinesi Projesi/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hesap Makinesi 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 |
17 | 18 |
19 | 20 | 21 |
22 | 23 |
24 |
25 |
26 | 27 | 28 | 29 |
30 | 31 |
32 | 33 | 34 | 35 |
36 | 37 |
38 | 39 | 40 | 41 |
42 | 43 |
44 | 45 | 46 | 47 |
48 |
49 | 50 |
51 | 52 | 53 | 54 | 55 |
56 | 57 |
58 |
59 |
60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /7.Hesap Makinesi Projesi/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0px; 3 | padding: 0px; 4 | } 5 | 6 | body{ 7 | font-family: 'Courier New', Courier, monospace; 8 | } 9 | 10 | #container{ 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | justify-content:center; 15 | height: 100vh; 16 | } 17 | 18 | #calculator{ 19 | width: 320px; 20 | height: 465px; 21 | border: 1px solid lightgrey; 22 | padding: 4px; 23 | } 24 | 25 | .resulPanel{ 26 | width: 100%; 27 | height: 100px; 28 | background-color: #454545; 29 | border: 1px solid lightgrey; 30 | } 31 | 32 | .result{ 33 | font-size: 3rem; 34 | color: #fff; 35 | display: block; 36 | text-align: right; 37 | margin-top: 20px; 38 | margin-right: 10px; 39 | } 40 | .clearDiv{ 41 | display: flex; 42 | flex-direction: row; 43 | } 44 | 45 | 46 | .clearDiv button{ 47 | width: 50%; 48 | height: 50px; 49 | color: #fff; 50 | border: none; 51 | background-color:#b84949 ; 52 | margin: 1px; 53 | } 54 | 55 | button{ 56 | margin: 4px; 57 | } 58 | 59 | .number{ 60 | width: 70px; 61 | height: 70px; 62 | background-color: #e8e7e7; 63 | border: 1px solid lightgrey; 64 | font-size: 20px; 65 | } 66 | 67 | .equals{ 68 | width: 70px; 69 | height: 70px; 70 | background-color: #4e61c0; 71 | border: 1px solid lightgrey; 72 | color: #fff; 73 | font-size: 20px; 74 | } 75 | 76 | 77 | /*GRİD TASARIMI*/ 78 | 79 | .content{ 80 | display: flex; 81 | flex-direction: row; 82 | } 83 | 84 | .numbers{ 85 | display: flex; 86 | flex-direction: column; 87 | } 88 | 89 | .line{ 90 | display: flex; 91 | flex-direction: row; 92 | } 93 | 94 | .operators{ 95 | display: flex; 96 | flex-direction: column; 97 | margin-left: 10px; 98 | } 99 | 100 | .operators button{ 101 | width: 70px; 102 | height: 70px; 103 | background-color: #e3b25d; 104 | border: 1px solid lightgrey; 105 | font-size: 20px; 106 | 107 | } 108 | 109 | 110 | /*HOVER ÖZELLİKLERİ*/ 111 | 112 | 113 | .number:hover{ 114 | background-color: #d5d5d5;; 115 | } 116 | 117 | .equals:hover{ 118 | background-color: #4656a4; 119 | } 120 | 121 | .operator:hover{ 122 | background-color: #c7994a; 123 | } 124 | 125 | .clearDiv > button:hover{ 126 | background-color:#9f3c3c ; 127 | } -------------------------------------------------------------------------------- /8.Şifre Projesi/app.js: -------------------------------------------------------------------------------- 1 | //Ders bitmeden paylaş aklındakini 2 | 3 | //Spring + Java + REST APİ (Backend) + SECURİTY + JWT 4 | //Elementleri Seçmek 5 | 6 | const leftTextArea = document.querySelector("#leftTextArea"); 7 | const rightTextArea = document.querySelector("#rightTextArea"); 8 | const encodeButton = document.querySelector("#encodeButton"); 9 | const decodeButton = document.querySelector("#decodeButton"); 10 | const cleanButton = document.querySelector("#cleanButton"); 11 | 12 | 13 | runEventListeners(); 14 | 15 | function runEventListeners(){ 16 | encodeButton.addEventListener("click",encode); 17 | decodeButton.addEventListener("click", decode); 18 | cleanButton.addEventListener("click", clean); 19 | } 20 | 21 | 22 | function encode(){ 23 | if(leftTextArea.value==""){ 24 | alert("Lütfen bir şifre giriniz."); 25 | return; 26 | } 27 | rightTextArea.value = btoa(leftTextArea.value); 28 | leftTextArea.value=""; 29 | } 30 | 31 | function decode(){ 32 | leftTextArea.value = atob(rightTextArea.value); 33 | rightTextArea.value=""; 34 | } 35 | 36 | function clean(){ 37 | leftTextArea.value=""; 38 | rightTextArea.value=""; 39 | } -------------------------------------------------------------------------------- /8.Şifre Projesi/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Şifre Uygulaması 8 | 9 | 10 | 11 | 12 |
13 |
14 |

ŞİFRE UYGULAMASI

15 |
16 | 17 |
18 | 19 | 20 |
21 | 22 | 23 | 24 |
25 | 26 | 27 |
28 |
29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /8.Şifre Projesi/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | padding: 0px; 4 | } 5 | 6 | body{ 7 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 8 | } 9 | 10 | #container{ 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | justify-content: center; 15 | } 16 | 17 | 18 | .header{ 19 | width: 100%; 20 | background-color: #894690; 21 | padding: 20px; 22 | text-align: center; 23 | color: lightgrey; 24 | } 25 | 26 | .content{ 27 | display: flex; 28 | flex-direction: row; 29 | align-items: center; 30 | justify-self: center; 31 | margin-top: 40px; 32 | } 33 | 34 | .buttonDiv{ 35 | display: flex; 36 | flex-direction: column; 37 | margin: 10px; 38 | } 39 | 40 | 41 | textarea{ 42 | width: 640px; 43 | height: 370px; 44 | font-size: 1.5rem; 45 | outline: none; 46 | border-radius: 20px; 47 | box-shadow: 4px 6px 8px lightgrey; 48 | text-align: center; 49 | } 50 | 51 | textarea::placeholder{ 52 | text-align: center; 53 | } 54 | 55 | #encodeButton{ 56 | padding: 8px; 57 | width: 120px; 58 | font-size: 14px; 59 | font-family: Arial, Helvetica, sans-serif; 60 | border: none; 61 | border-radius: 4px; 62 | background-color: rgb(83, 74, 147); 63 | color: #fff; 64 | margin-bottom: 5px; 65 | } 66 | 67 | #decodeButton{ 68 | padding: 8px; 69 | width: 120px; 70 | font-size: 14px; 71 | font-family: Arial, Helvetica, sans-serif; 72 | border: none; 73 | border-radius: 4px; 74 | background-color: rgb(195, 37, 69); 75 | color: #fff; 76 | } 77 | 78 | #cleanButton{ 79 | margin-top: 3px; 80 | padding: 8px; 81 | width: 120px; 82 | font-size: 14px; 83 | font-family: Arial, Helvetica, sans-serif; 84 | border: none; 85 | border-radius: 4px; 86 | background-color: rgb(99, 99, 99); 87 | color: #fff; 88 | } 89 | 90 | /*HOVER*/ 91 | 92 | #encodeButton:hover{ 93 | background-color: rgb(61, 54, 113); 94 | cursor: pointer; 95 | } 96 | 97 | #decodeButton:hover{ 98 | background-color: rgb(156, 30, 55); 99 | cursor: pointer; 100 | } 101 | 102 | #cleanButton:hover{ 103 | background-color: rgb(73, 73, 73); 104 | cursor: pointer; 105 | } --------------------------------------------------------------------------------