diff --git a/code.js b/code.js
new file mode 100644
index 00000000..d259ac45
--- /dev/null
+++ b/code.js
@@ -0,0 +1,122 @@
+//varibles
+const myForm = document.querySelector(".Form");
+const myTextArea= document.querySelector("#searchfield");
+const myButton = document.querySelector(".favButton");
+const myDiv= document.querySelector(".movies");
+const myDropBox= document.querySelector(".dropBox");
+
+let favMovies=[];
+
+//functions
+function fetching()
+{
+
+ let search=myTextArea.value;
+ fetch(`http://www.omdbapi.com/?s=${search}&apikey=60ece986`)
+ .then(function(response){
+ return response.json();
+ }).then(function(jsonData){
+ displayMovies(jsonData);
+ }).catch(function(error){
+ alert("error")
+ });
+}
+
+function fetchingDeatils(im)
+{
+ let search=myTextArea.value;
+ fetch(`http://www.omdbapi.com/?i=${im}&apikey=60ece986`)
+ .then(function(response){
+ return response.json();
+ }).then(function(jsonData){
+ displayDetails(jsonData, im);
+ }).catch(function(error){
+ alert("error")
+ });
+}
+
+function displayDetails(data, im){
+ const movie=document.querySelector(`#${im}`);
+ if(movie.childElementCount<9){
+ let newNode=document.createElement("li");
+ newNode.classList.add("details");
+ for(let value in data)
+ {
+ if((value=="Poster") || (value=="Response") || (value=="Ratings")) {
+ // do nothing
+ }
+
+ else{
+ newNode.innerHTML+=`${value}: ${data[value]}
`;
+ }
+
+ }
+ movie.appendChild(newNode);
+ }
+}
+
+function displayMovies(data){
+
+ data.Search.forEach(function(movie){
+ let newNode=document.createElement("li");
+ newNode.classList.add("movie");
+ for(let value in movie)
+ {
+ if(value=="imdbID"){
+ newNode.id=movie[value];
+ newNode.innerHTML+=` LINKK
`;
+ }
+ else if(value=="Poster"){
+ newNode.innerHTML+=`
`;
+ }
+ else{
+ newNode.innerHTML+=`${value}: ${movie[value]}
`;
+ }
+ }
+ newNode.innerHTML+=``;
+ myDiv.appendChild(newNode);
+});
+}
+
+function submitHandler(event){
+ event.preventDefault();
+ myDiv.innerHTML="";
+ fetching();
+}
+
+function resetHandler(){
+ myDiv.innerHTML="";
+}
+function favHandler(event)
+{
+
+ if(event.target.classList.value=="fav"){
+ let search=favMovies.find(function(item){
+ return item==event.target.parentElement.id;
+ });
+ if(search==event.target.parentElement.id){
+ alert("movie already in favourite list");
+ }
+ else {
+
+ favMovies.push(event.target.parentElement.id);
+ newNode=document.createElement("option");
+ newNode.id=event.target.parentElement.id;
+ newNode.textContent=event.target.parentElement.firstChild.data;
+ myDropBox.appendChild(newNode);
+ }
+ }
+ else if (event.target.classList.value=="movie") {
+ fetchingDeatils(event.target.id);
+ }
+}
+
+function showFav(event){
+
+}
+
+//body
+myForm.addEventListener("submit", submitHandler);
+myDiv.addEventListener("click", favHandler);
+myForm.addEventListener("reset", resetHandler);
+myDropBox.addEventListener("change",showFav);
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..5e3b45ad
--- /dev/null
+++ b/index.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+ results here
+
+
+
+
+
diff --git a/style.css b/style.css
new file mode 100644
index 00000000..2fe7dc36
--- /dev/null
+++ b/style.css
@@ -0,0 +1,24 @@
+* {
+ box-sizing: border-box;
+}
+
+#searchfield{
+ cursor: text;
+}
+.Form{
+ margin: 10px;
+}
+
+.movies{
+ background-color: #DBE2C7;
+ text-align: center;
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.movie{
+ margin: 10px;
+ background-color: #C7E2E2;
+ border: 5px solid black;
+ padding:10px;
+}