From 89d6339fc9e370f7dc88ffa519dd5e3b0ced784d Mon Sep 17 00:00:00 2001 From: Pythia Date: Thu, 4 Dec 2025 13:20:59 +0100 Subject: [PATCH 01/44] Created Index and script files added the js code from previous branch --- preparation/index.html | 0 preparation/script.js | 35 +++++++++++++++++++++++++++++++++++ 2 files changed, 35 insertions(+) create mode 100644 preparation/index.html create mode 100644 preparation/script.js diff --git a/preparation/index.html b/preparation/index.html new file mode 100644 index 00000000..e69de29b diff --git a/preparation/script.js b/preparation/script.js new file mode 100644 index 00000000..87b15243 --- /dev/null +++ b/preparation/script.js @@ -0,0 +1,35 @@ +const films = [ + { + title: "Killing of Flower Moon", + director: "Martin Scorsese", + times: ["15:35"], + certificate: "15", + duration: 112, + }, + { + title: "Typist Artist Pirate King", + director: "Carol Morley", + times: ["15:00", "20:00"], + certificate: "12A", + duration: 108, + } +]; + +// Goal refactor this project to use film card template +function createFilmCard(films) { + const filmCard = document.getElementById("film-card-template").content.cloneNode(true); + + filmCard.querySelector("h1").textContent = films.title; + filmCard.querySelector("p[data-director]").textContent = films.director; + filmCard.querySelector("time").textContent = films.times; + filmCard.querySelector("p[data-certificate]").textContent = films.certificate; + return filmCard; +}; + +function render() { + const filmCards = films.map(createFilmCard); + document.body.append(...filmCards); +}; + +render(); + From cc206bfd1ffa00068508186e958c7fd6d9bbd883 Mon Sep 17 00:00:00 2001 From: Pythia Date: Thu, 4 Dec 2025 13:21:49 +0100 Subject: [PATCH 02/44] Added the html from previous branch --- preparation/index.html | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/preparation/index.html b/preparation/index.html index e69de29b..e28a796f 100644 --- a/preparation/index.html +++ b/preparation/index.html @@ -0,0 +1,20 @@ + + + + + + + + Document + + + + + From 8bb26b96449e36051ad455126117129b25240183 Mon Sep 17 00:00:00 2001 From: Pythia Date: Thu, 4 Dec 2025 13:23:27 +0100 Subject: [PATCH 03/44] Changed const films to state --- preparation/script.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/preparation/script.js b/preparation/script.js index 87b15243..f2ff0a17 100644 --- a/preparation/script.js +++ b/preparation/script.js @@ -1,4 +1,5 @@ -const films = [ +const state = { + films: [ { title: "Killing of Flower Moon", director: "Martin Scorsese", @@ -13,7 +14,7 @@ const films = [ certificate: "12A", duration: 108, } -]; +]}; // Goal refactor this project to use film card template function createFilmCard(films) { From 3bcd0584a83853d40569296fed5ad3a21e965bfd Mon Sep 17 00:00:00 2001 From: Pythia Date: Thu, 4 Dec 2025 13:27:35 +0100 Subject: [PATCH 04/44] Added the searcTerm and modified render to filter films --- preparation/script.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/preparation/script.js b/preparation/script.js index f2ff0a17..307edc6c 100644 --- a/preparation/script.js +++ b/preparation/script.js @@ -14,7 +14,9 @@ const state = { certificate: "12A", duration: 108, } -]}; +], +searchTerm: "", +}; // Goal refactor this project to use film card template function createFilmCard(films) { @@ -28,8 +30,11 @@ function createFilmCard(films) { }; function render() { - const filmCards = films.map(createFilmCard); - document.body.append(...filmCards); + const filteredFilms = state.films.filter((film) => + film.title.includes(state.searchTerm) +); + const filmCards = films.map(createFilmCard); + document.body.append(...filmCards); }; render(); From f4a220c775924cc2a5d8b7df847d1cb0e0acedd5 Mon Sep 17 00:00:00 2001 From: Pythia Date: Thu, 4 Dec 2025 13:31:02 +0100 Subject: [PATCH 05/44] Changed films to filteredFilms --- preparation/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/preparation/script.js b/preparation/script.js index 307edc6c..5a35df46 100644 --- a/preparation/script.js +++ b/preparation/script.js @@ -33,7 +33,7 @@ function render() { const filteredFilms = state.films.filter((film) => film.title.includes(state.searchTerm) ); - const filmCards = films.map(createFilmCard); + const filmCards = filteredFilms.map(createFilmCard); document.body.append(...filmCards); }; From 141cc0c3374407e9de88ed287b945044d3626aaa Mon Sep 17 00:00:00 2001 From: Pythia Date: Thu, 4 Dec 2025 13:32:38 +0100 Subject: [PATCH 06/44] Added the search tab in html --- preparation/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/preparation/index.html b/preparation/index.html index e28a796f..d35fd5ae 100644 --- a/preparation/index.html +++ b/preparation/index.html @@ -8,6 +8,7 @@ Document +