diff --git a/cinemaStylesheet.css b/cinemaStylesheet.css
new file mode 100644
index 00000000..988b5cd7
--- /dev/null
+++ b/cinemaStylesheet.css
@@ -0,0 +1,41 @@
+body {
+ margin-top: 0;
+ margin-left: 0;
+ margin-right: 0;
+}
+.topnav {
+ background-color: navy;
+ color: white;
+ align-content: center;
+ font-family: sans-serif;
+ text-align: center;
+ padding: 5px;
+}
+.movie-form {
+ display: flex;
+ justify-content: center;
+ padding-top: 3%;
+ padding-bottom: 3%;
+ background-color: lightblue;
+}
+button {
+ padding: 2px;
+ border: 1px solid darkblue;
+ border-radius: 0%;
+}
+.movie-feed {
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ flex-direction: column;
+ background-color: antiquewhite;
+}
+.movie-feed li {
+ padding-top: 3%;
+}
+.section2 {
+ margin-top: 0;
+}
+.section2 ul{
+ margin-top: 0;
+}
\ No newline at end of file
diff --git a/codebin.js b/codebin.js
new file mode 100644
index 00000000..c5e440ee
--- /dev/null
+++ b/codebin.js
@@ -0,0 +1,32 @@
+// fetch call and returning elements to html
+
+ // fetch API call
+ fetch(createUrl())
+ .then(function (response) {
+ return response.json()
+ }).then(function (data) {
+ let movieData = data.Search;
+ console.log(Object.keys(data))
+ call movieMap() function
+ // everything below this works
+ return movieData.map(function(item){
+ const itemKeys = Object.keys(item);
+ const itemArr = Object.values(item);
+ // console.log(itemKeys);
+ console.log(itemArr);
+ const newNode = createNode('li');
+ newNode.innerHTML = itemArr[0] + ': ' + itemArr[1];
+ returnedMovies.append(newNode);
+ const newImg = createNode('img');
+ newImg.src = itemArr[4];
+ const newLink = createNode('a');
+ const movieLink = itemArr[2]
+ newLink.href = `https://www.imdb.com/title/${movieLink}/`;
+ returnedMovies.append(newNode, newImg);
+ returnedMovies.append(newImg, newLink);
+ console.log( itemArr[0] );
+ })
+
+ }).catch(function (error) {
+ console.log('unsuccessful' + error);
+ })
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..c3ae2225
--- /dev/null
+++ b/index.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+ HL Project Cinema
+
+
+
+
+
+
Harry's Movie Searcher
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 00000000..f8ecd319
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,63 @@
+// variable declaration
+const movieSearchForm = document.querySelector('#movieSearchForm');
+const movieSearchInput = document.querySelector('#movieSearchInput');
+const movieSearchButton = document.querySelector('#moveSearchButton');
+
+const returnedMovies = document.querySelector('#returnedMovies');
+
+const returnedItems = document.querySelectorAll('#returnedMovies > li');
+
+// event listeners
+movieSearchForm.addEventListener('submit', submitForm);
+returnedItems.addEventListener('click', moreInfo);
+
+// form submission
+function createUrl(input) {
+ const search = movieSearchInput.value.trim();
+ return `http://www.omdbapi.com/?s=${search}&apikey=564a6b07`;
+}
+
+
+// functions
+function createNode(element) {
+ return document.createElement(element);
+}
+
+function resetForm(movieSearchInput) {
+ movieSearchInput.value = '';
+ movieSearchInput.focus();
+}
+
+function display(myJsonData) {
+ let movieArray = myJsonData.Search.map(function (movie) {
+ return `
+
+ ${movie.Title}
+ ${movie.Year}
+
+ 
+
+
+ `;
+ }).join('');
+ returnedMovies.innerHTML = movieArray;
+}
+
+function submitForm(event) {
+ event.preventDefault();
+
+ // fetch API call
+ fetch(createUrl())
+ .then(function (response) {
+ return response.json()
+ }).then(function (myJsonData) {
+ return display(myJsonData);
+ }).catch(function (error) {
+ console.log('unsuccessful' + error);
+ })
+ resetForm(movieSearchInput);
+}
+
+function moreInfo(event) {
+ console.log(event);
+}
\ No newline at end of file