From 4c8c8423dab8975395ac73ac63a8062d5300f746 Mon Sep 17 00:00:00 2001 From: Phoebe DG Date: Fri, 8 Jun 2018 10:05:53 +0100 Subject: [PATCH 1/5] new html and js files --- index.html | 17 +++++++++++++++++ index.js | 0 2 files changed, 17 insertions(+) create mode 100644 index.html create mode 100644 index.js diff --git a/index.html b/index.html new file mode 100644 index 00000000..060ad373 --- /dev/null +++ b/index.html @@ -0,0 +1,17 @@ + + + + + + + Document + + +
+ + +
+ + + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..e69de29b From ff30df2ca21febd0ce61307e16aea5732c564c6a Mon Sep 17 00:00:00 2001 From: Phoebe DG Date: Fri, 8 Jun 2018 11:05:45 +0100 Subject: [PATCH 2/5] bare bones of js written --- index.html | 1 + index.js | 36 ++++++++++++++++++++++++++++++++++++ 2 files changed, 37 insertions(+) diff --git a/index.html b/index.html index 060ad373..238d5701 100644 --- a/index.html +++ b/index.html @@ -15,3 +15,4 @@ + \ No newline at end of file diff --git a/index.js b/index.js index e69de29b..ce1189a4 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,36 @@ +const textInput = document.querySelector('#textinput'); +const textArea = document.querySelector('#placeholder'); + +function createApi(textArea) { + const search = textArea.textContent.trim(); + const api = `http://www.omdbapi.com/?s=${search}&apikey=2c6457b6&`; + return api; +} + +function displayResults(response) { + +} + +function searchFilms(api) { + fetch(api) + .then(function(response) { + return response.json() + }).then(function(myJsonData) { + console.log(response); + }); + .catch(function(error) { + // do something + }); + +} + +function submitForm(event) { + event.preventDefault(); + alert('Search submitted.') + createApi(textArea); + searchFilms(api); +} + +textInput.addEventListener('submit', submitForm); + + From aacf7cb8e8a7d0d1e69a7669ef6f1af20a00e516 Mon Sep 17 00:00:00 2001 From: Phoebe DG Date: Fri, 8 Jun 2018 13:54:35 +0100 Subject: [PATCH 3/5] tasks completed before adjusting layout --- index.html | 14 +++++++++----- index.js | 53 ++++++++++++++++++++++++++++++++++------------------- 2 files changed, 43 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index 238d5701..3888dfe4 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,22 @@ + Document +
- - + +
- +
+ +
- - \ No newline at end of file + + \ No newline at end of file diff --git a/index.js b/index.js index ce1189a4..2210ac3c 100644 --- a/index.js +++ b/index.js @@ -1,36 +1,51 @@ -const textInput = document.querySelector('#textinput'); -const textArea = document.querySelector('#placeholder'); +const form = document.querySelector('#textinput'); +const input = document.querySelector('#placeholder'); +const movieInfo = document.querySelector('#movieinfo'); -function createApi(textArea) { - const search = textArea.textContent.trim(); - const api = `http://www.omdbapi.com/?s=${search}&apikey=2c6457b6&`; - return api; +function createUrl(input) { + const search = input.value.trim(); + return `http://www.omdbapi.com/?s=${search}&apikey=2c6457b6&`; } -function displayResults(response) { - +function createNode(element) { + return document.createElement(element); } -function searchFilms(api) { - fetch(api) +function append(parent, el) { + return parent.appendChild(el); +} + +function searchFilms(url) { + fetch(url) .then(function(response) { return response.json() - }).then(function(myJsonData) { - console.log(response); - }); + }).then(function(data) { + console.log(data); + let movies = data.Search/* .results? */; + return movies.map(function(movie) { + let div = createNode('div'); + div.innerHTML = ` +

+ ${movie.Title}, ${movie.Year} +

+ + + + `; + append(movieInfo, div); + }) + }) .catch(function(error) { - // do something + console.log(error); }); } function submitForm(event) { event.preventDefault(); - alert('Search submitted.') - createApi(textArea); - searchFilms(api); + searchFilms(createUrl(input)); } -textInput.addEventListener('submit', submitForm); - +form.addEventListener('submit', submitForm); +movieInfo.addEventListener('click', ) From 5e46246fade0bf0cd3e7755d878b624524ce2687 Mon Sep 17 00:00:00 2001 From: Phoebe DG Date: Fri, 8 Jun 2018 16:05:20 +0100 Subject: [PATCH 4/5] All primary exercises complete --- index.css | 36 ++++++++++++++++++ index.html | 17 ++++++--- index.js | 105 ++++++++++++++++++++++++++++++++++------------------- 3 files changed, 115 insertions(+), 43 deletions(-) create mode 100644 index.css diff --git a/index.css b/index.css new file mode 100644 index 00000000..4e384ebc --- /dev/null +++ b/index.css @@ -0,0 +1,36 @@ +#title { + margin: auto; + text-align: center; +} + +.form { + margin: auto; + text-align: center; + padding: 20px; +} + +.movieinfo { + display: flex; +} + +.moviecard { + margin: 20px; +} + +.movieheading { + height: 45px; +} + +.poster { + width: 250px; +} + +.infocard { + margin: auto; + padding: 10px; + text-align: center; + width: 600px; + border-style: solid; + border-width: 1px; + border-color: red; +} \ No newline at end of file diff --git a/index.html b/index.html index 3888dfe4..3df04952 100644 --- a/index.html +++ b/index.html @@ -6,15 +6,22 @@ Document + -
- - -
-
+
+

Open Movie Database Search

+
+ + +
+
+
+
+ +
diff --git a/index.js b/index.js index 2210ac3c..413defda 100644 --- a/index.js +++ b/index.js @@ -1,51 +1,80 @@ -const form = document.querySelector('#textinput'); -const input = document.querySelector('#placeholder'); -const movieInfo = document.querySelector('#movieinfo'); +const form = document.querySelector("#textinput"); +const input = document.querySelector("#placeholder"); +const movieInfo = document.querySelector("#movieinfo"); +const detailInfo = document.querySelector("#detailedinfo"); +// const movietitle = document.querySelector("#movieheading"); +// Event Handler "Submit" function createUrl(input) { - const search = input.value.trim(); - return `http://www.omdbapi.com/?s=${search}&apikey=2c6457b6&`; + const search = input.value.trim(); + return `http://www.omdbapi.com/?s=${search}&apikey=2c6457b6&`; } -function createNode(element) { - return document.createElement(element); +function searchFilms(url) { + fetch(url) + .then(function(response) { + return response.json(); + }) + .then(function(data) { + console.log(data); + let html = data.Search.map(function(movie) { + return ` +
+

+ ${movie.Title} +

+

+ ${movie.Year} +

+ + + +
+ `; + }).join(""); + movieInfo.innerHTML = html; + }) + .catch(function(error) { + console.log(error); + }); } -function append(parent, el) { - return parent.appendChild(el); +function submitForm(event) { + event.preventDefault(); + searchFilms(createUrl(input)); } -function searchFilms(url) { - fetch(url) - .then(function(response) { - return response.json() - }).then(function(data) { - console.log(data); - let movies = data.Search/* .results? */; - return movies.map(function(movie) { - let div = createNode('div'); - div.innerHTML = ` -

- ${movie.Title}, ${movie.Year} -

- - - - `; - append(movieInfo, div); - }) - }) - .catch(function(error) { - console.log(error); - }); - +// Event Handler "Click" +function createUrl2(title) { + return `http://www.omdbapi.com/?t=${title}&apikey=2c6457b6&`; } -function submitForm(event) { - event.preventDefault(); - searchFilms(createUrl(input)); +function searchDetail(url2) { + fetch(url2) + .then(function(response) { + return response.json(); + }) + .then(function(data) { + console.log(data); + const html = ` +
+

${data.Plot}

+
+ `; + detailInfo.innerHTML = html; + }) + .catch(function(error) { + console.log(error); + }); } -form.addEventListener('submit', submitForm); -movieInfo.addEventListener('click', ) +function getInfo(event) { + event.preventDefault(); + if (event.target.id === "movieheading") { + const title = event.target.innerText; + searchDetail(createUrl2(title)); + }; +} +form.addEventListener("submit", submitForm); +movieInfo.addEventListener("click", getInfo); From d39e4824c0b0d70012dab79326b9be0b40ad1702 Mon Sep 17 00:00:00 2001 From: Phoebe DG Date: Mon, 11 Jun 2018 09:40:41 +0100 Subject: [PATCH 5/5] Weekend work --- index.css | 109 ++++++++++++++++++++++++++++++++++++++++++++++---- index.html | 12 ++++-- index.js | 32 ++++++++++++--- moviereel.png | Bin 0 -> 3627 bytes 4 files changed, 135 insertions(+), 18 deletions(-) create mode 100644 moviereel.png diff --git a/index.css b/index.css index 4e384ebc..8e5caf33 100644 --- a/index.css +++ b/index.css @@ -1,36 +1,129 @@ +body { + background-color: crimson; + height: auto; + overflow-y: scroll; + position: relative; +} + +.background { + height: auto; +} + +.header { + position: fixed; + top: 0px; + z-index: 1; + right: 0; + left: 0; + background-color: crimson; +} + #title { margin: auto; text-align: center; + padding-top: 30px; + font-family: 'Julius Sans One', sans-serif; + font-size: 75px; + font-weight: bold; + text-shadow: 4px 4px red; +} + +.moviereel { + width: 70px; + display: block; + margin-left: auto; + margin-right: auto; + margin-top: 20px; + border: none; + border-radius: 50%; + box-shadow: 4px 4px red; } .form { margin: auto; + margin-top: 30px; text-align: center; - padding: 20px; + padding: 5px; +} + +.input { + width: 50%; + padding: 12px 20px; + margin: 8px 0; + border: 2px solid red; + border-radius: 5px; + box-shadow: 4px 4px red; +} + +.button { + background-color: white; /* Green */ + border: none; + border-radius: 5px; + color: red; + padding: 9.5px 18px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + font-family: 'Roboto', sans-serif; + box-shadow: 4px 4px red; } .movieinfo { display: flex; + margin-top: 100px; } .moviecard { margin: 20px; -} - -.movieheading { - height: 45px; + margin-top: 250px; + width: 250px; + position: relative; + font-family: 'Roboto', sans-serif; } .poster { width: 250px; + height: 370px; + padding-bottom: 10px; } -.infocard { +.cardtext { margin: auto; padding: 10px; text-align: center; - width: 600px; border-style: solid; border-width: 1px; - border-color: red; + border-color: white; + border-radius: 5px; + font-family: 'Roboto', sans-serif; + background-color: rgba(255,255,255, 0.5); + box-shadow: 5px 1px 1px red; +} + +.movieheading { + height: auto; +} + +.infocard { + text-align: center; + height: auto; + padding: 15px; + border-style: solid; + border-width: 1px; + border-color: white; + border-radius: 5px; + font-family: 'Roboto', sans-serif; + background-color: rgba(255,255,255, 0.5); + box-shadow: 5px 1px 1px red; +} + +.detailedinfo { + overflow-y: scroll; + margin: auto; + margin-top: 25px; + margin-bottom: 25px; + padding: 10px; + height: auto; + width: 600px; } \ No newline at end of file diff --git a/index.html b/index.html index 3df04952..beb173c5 100644 --- a/index.html +++ b/index.html @@ -7,15 +7,19 @@ Document +
-

Open Movie Database Search

-
- - +
+

OPEN MOVIE DATABASE SEARCH

+ Movie Reel + + + +
diff --git a/index.js b/index.js index 413defda..6f2d0185 100644 --- a/index.js +++ b/index.js @@ -4,7 +4,7 @@ const movieInfo = document.querySelector("#movieinfo"); const detailInfo = document.querySelector("#detailedinfo"); // const movietitle = document.querySelector("#movieheading"); -// Event Handler "Submit" +// Event Handler "Submit" ==> Returns Movie Results function createUrl(input) { const search = input.value.trim(); return `http://www.omdbapi.com/?s=${search}&apikey=2c6457b6&`; @@ -20,19 +20,23 @@ function searchFilms(url) { let html = data.Search.map(function(movie) { return `
+ + + +

${movie.Title}

${movie.Year}

- - - +
`; }).join(""); movieInfo.innerHTML = html; + input.value = ''; + input.focus(); }) .catch(function(error) { console.log(error); @@ -44,7 +48,7 @@ function submitForm(event) { searchFilms(createUrl(input)); } -// Event Handler "Click" +// Event Handler "Click" ==> Returns Specific Movie Detail function createUrl2(title) { return `http://www.omdbapi.com/?t=${title}&apikey=2c6457b6&`; } @@ -57,11 +61,12 @@ function searchDetail(url2) { .then(function(data) { console.log(data); const html = ` -
+

${data.Plot}

`; detailInfo.innerHTML = html; + detailInfo.style.visibility = 'visible'; }) .catch(function(error) { console.log(error); @@ -76,5 +81,20 @@ function getInfo(event) { }; } +// Event Handler "Click" ==> Hides Specific Movie Detail +function removeInfo() { + if (document.getElementById("infocard")) { + detailInfo.style.visibility = 'hidden'; +// (Tried removieChild and detach(), this was the answer in the end... + line 69) + } +} + +// Scroll up on clicking the form +function scrollUp() { + window.scrollTo(0, 0); +} + form.addEventListener("submit", submitForm); movieInfo.addEventListener("click", getInfo); +form.addEventListener("click", removeInfo); +form.on("click", scrollUp()); diff --git a/moviereel.png b/moviereel.png new file mode 100644 index 0000000000000000000000000000000000000000..0f79f8431e1f043a8fc6fa72cb170c8fe55de00b GIT binary patch literal 3627 zcmV+`4%G39P)ihfq@9*!sySsOHcfP*9D=RDJ=H_Z@YPYwyA|fIg85#Wi{K?75U0q#DN=iC9 zI+T=@s;a7ohlix3q<(&WQc_ak;o(qFP|?xRv9Yn++uNF&nlLahVq#(u5fN~3a6&>t zjg5_Yd3hipAQKZ4Ha0frqPsx=01azNL_t(|oaJ3fVRozX z{&uwPPsiENGhvvGr~P&0@GTrM42x}&8L8EgCELQ$aH=v)&ws2J`vHO76@z3^Xuiz_ z+G7~>KN#eG@X-&H-$<2Vuw9Ahow3@glGI}u%q9x-&X~+9lBvpjX)(;ZYV^+N=1Om- z!Z6y!%KR$CJC#F3#_%+c)=LNU&RDKr&9KBsV{?JA8oiidzH!R0!bZ3tMGQxJyQc{g z(Krei7UQSzt1uQAJ8XtQ@-%)G61EknEI(Z6BLgnZJv_G zaQ*&jb|<`(>~RXij`YydC+!8TXKTDw1JtR<4amdhqXV`M*2NH5qRC z{5-RB7YgLnE$ZD-3>W;jm>337{NoEPh5}D1u}-AaAMt;FhggeNhN(a0zrh#c`<08F z|A49e*X?6C=RZF|5fo9J`?g`UG87OzrdS(UV9(EOzineEn4%s*S`mCl+eEc6l*lm@ z<1rNIk~;}Q!A|b&2?R^GMero^ppXhJr1w^iydB{Xp`t+~8># z81@9VsOMR2nL1L*X5$SFPlFhyek9UFKWGHY=ZOX}hMg&R3}r4VBVZ&7^Ni^XC6lHE zouEGxJ@AvpFqNu?)Ja;QCwt@@U_b#MTXH;Az`1U9q(XrTP~ZTDQZVA zvdN~zu+`dcVW6^f3%0`Ey>!(0iPxO@^tj5yHj_GlX{CKNx6_9) zR0)A@SPTn|M?dVRO@^ULmc={kJXA>#7}&;8DNlx#Hz`rQez0rI(*{G0#a@AxiKdiA z){svc47F0Z5L)yDLXoEMgT^*jXQ;B)D{#yQz$WYSbG!H7|LRI7C`Bx zr5UAb$<#5cF?3vJcdZ4z&DZKLVaFxEn}^}Ko}?G7`t^ZK^H1lA|G|x6DodQfBJS=w zMG!^3(d^T0Y3&8uyD@yq1D}r74@38p^fd@>3}0D|<`VrILs_$qzZV}jhOd4TXSgy{ zcR&9ctS=0uIS_v@78izS_w0MQ81;HV&@1}Wy;76`k9aa(&Xbj;@l*}TnPG@)d32oB zQyjzmiRG5Z>F8GZ7OuD0t#J^Z7^0Tpyj3~tXv(-Cvc;q6KEjbKP7D!##S&Bo9b3;O zj-7V@vWJ;MvlBz>GMpH*)RdLZ1`Y<1Ah4?g$%&z@&~a{&S_)3n9S=s6_WEDf3 zjQD2M%TA7-vnC+s7+v}7z&1Ql$r85-6qB_Cbe zd?zITneyQ>-!o*f3`x0Ly2@vU413x=U*P%vmwTxqI(9khy+J^Vv~2L~*Uq(Ho= zV)+5Y1XaU4%{@5D11iyg7+Q^^67S=$F-9k)CLF;PJ{=FVyY(|-R-N<04m-B9g`6i2 z8)h>Pbnxj}O`&mg2KN~@Z)RI|P3{H-p8E?A9A9DqVFgn)*s4D9BGWLgfZsO&+ys^$ zWD#&mCJbTLRrBNt4HOwwQ{enbJSY*0k$UH+;5!cx+UFNeRh1N z(H%mdSZm+`W+|;-z!lJr);=LZ()X|d2xAXDfVyhc%RBJjfjxlNjuki*z&bomAuqTX zppysKn0U=tsR1$53@00**ek4goua*QOj?hrnJs zvHxTXphLWEFHOO{l-JxEm=HtgJUp;Yd`QWlorg0PLtsJ-K%0iO7@)P#?kqqy4cGv} z1ZYCU9^{y_j$KevY|{%syOdQ44rzVgpl`t`<%LzPHs1nvf;k2womsl1IGM; zZb9>cRqGkPX$!=#i3g_GQ}reBPm*+YegsL$Fvib}@k7cym38}m1jWHHIKP=C28{1- zp`IyDI5A9_hhtkD{|Q}W;devA7}c9vb1`sHphDbtiT!BH$L-tmX)tnzqp~p61hPDP zjmU}GSZy0;8MujkE!s-JBTQbK#Z?UUI&|7Fuy`4%&C1Adxryh?U4Vh?|EEI+zz%wH z^^a?7xz;&15wp=(3AAkwlH6{9Lk3#m0V2V4TQW?Mxjrp-N=A#PqzF%1IR+>*xS-^D zmn66ATds99nm*^^yc3preb4D3?>xQac~eTM{~X85`8-)Y{Ysrb`(3}N$^?3&#S(1- zUvl;TfqIMITQgJm|4QA{KTx~&`|A&Xe+}vHuLE}5aNvsZ=WNuAqM+#Px=*>~^S+kb z`80i>=XJ9-Qn_f}jNp!;ceEtD)o&h-{r3$d9^<>sE5mTQ;nFqaWy5jPizo4bN|wOJ}Vx%I9f z9mR%GCGG2MbC2~}Ztm>jRi9~Si}pLad=+Vk$526bL*2Wk;g0fVsa$11-kqm#{~?c| zc&EYMe<;34mRo%$_AbzOSjy)Mr(J>k3W)aN0>I4?9=@zQETvKy{w~=H!m9`=BFzm_ zsRmg5kgFn^sS1wn<>r)u$_UP(5FUJcyy)5qMj5e82OERk9brKw5_uVP zt45Tz6vIWm@EH0%i4ILJK^5(7LxYK762(OGhB}C%BiPj4%_#dx_V4y;+FUTTlju)es0|8`5?v@z^Y7ZZ>gRAo0z8^hA}+QJd;zmEQ#?Kf0RN z*n!l7x$P^O8KyFd*ansYfyRC+AwnpEiE5`R+w=Jik*&tD!P=g{ z(>MahMkMh;W2~NsWSIJq#9z!75APF>L_Yl(-2(|bhN;x+UoDE;iVUMpSEh9loHI&F zf%xX^_kHrw{YWNa#hH@nK}wofKfNfg74aH%e=CDw>gZBbB9>u2=UuDR~+Fm!H!0_bB6v#e2I+8I}n8GF#`Pf1=0fl?*_eVTJW#&$+mB zkSqkI3kVksON7NXp%kKL$+lox);2g|ctW)9Psf%kn1|VT+FzfK1%kXpfJ=sFghAe! xEtbh9iwDC>