Bir videodan izleyip yapıyordum ,
1.sa yazdığım yere film adı,
2.sa yazdığım yere direktör adı,
link olan yere ise film afişi
adam bunları doldurduktan sonra aşşağıdaki fotoğraf gibi oluyor
fakat bende herhangi bir şey değişmiyor
KOD DİZİNLERİ :
film.js
ui.js
project.js
1.sa yazdığım yere film adı,
2.sa yazdığım yere direktör adı,
link olan yere ise film afişi
adam bunları doldurduktan sonra aşşağıdaki fotoğraf gibi oluyor
fakat bende herhangi bir şey değişmiyor
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Film Project</title>
</head>
<body>
<div class="container" style ="margin-top:20px;">
<div class="card row">
<div class="card-header">Film Projesi</div>
<div class="card-body">
<form id = "film-form" name="form">
<div class="form-row">
<div class="form-group col-md-6">
<input class="form-control" type="text" name="title" id = "title" placeholder="Film İsmi">
</div>
<div class="form-group col-md-6">
<input class="form-control" type="text" name="director" id = "director" placeholder="Yönetmen">
</div>
<div class="form-group col-md-6">
<input class="form-control" type="text" name="url" id = "url" placeholder="Film Afiş Linki">
</div>
</div>
<button type="submit" class="btn btn-danger">Film Ekleyin</button>
</form>
</div>
<div class="card-body">
<hr>
<h5 class="card-title" id = "films-title">Filmler</h5>
<hr>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">Film Afişi</th>
<th scope="col">Film İsmi</th>
<th scope="col">Yönetmen</th>
</tr>
</thead>
<tbody id = "films">
<!-- <tr>
<td><img src="" class="img-fluid img-thumbnail"></td>
<td></td>
<td></td>
<td><a href="#" id = "delete-film" class = "btn btn-danger">Filmi Sil</a></td>
</tr> -->
</tbody>
</table>
<hr>
<a id = "clear-films" class="btn btn-dark" href="#">Tüm Filmleri Temizleyin</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="ui.js"></script>
<script src="storage.js"></script>
<script src= "film.js"></script>
<script src="project.js"></script>
</body>
</html>film.js
JavaScript:
function Film(title,director,url){
this.title = title;
this.director = director;
this.url = url;
}ui.js
JavaScript:
function UI(){
}
UI.prototype.addFilmToUI = function(newFilm){
/* <!-- <tr>
<td><img src="" class="img-fluid img-thumbnail"></td>
<td></td>
<td></td>
<td><a href="#" id = "delete-film" class = "btn btn-danger">Filmi Sil</a></td>
</tr> --> */
}
const filmList = document.getElementById("films");
filmList.innerHTML += `
<tr>
<td><img src="${newFilm.url}" class="img-fluid img-thumbnail"></td>
<td>${newFilm.title}</td>
<td>${newFilm.director}</td>
<td><a href="" id = "delete-film" class = "btn btn-danger">Filmi Sil</a></td>
</tr>
`;project.js
JavaScript:
const form = document.getElementById("film-form");
const titleElement = document.querySelector("#title");
const directorElement = document.querySelector("#director");
const urlElement = document.querySelector("#url");
const ui = new UI();
eventListeners();
function eventListeners(){
form.addEventListener("submit",addFilm)
}
function addFilm(e){
const title = titleElement.value;
const director = directorElement.value;
const url = urlElement.value;
if(title === "" || director === "" || url === ""){
// Hata
}
else{
const newFilm = new Film(title,director,url);
ui.addFilmToUI(newFilm);
}
e.preventDefault();
}
Son düzenleyen: Moderatör:
