first commit

5 years ago · 91f6182a88
4 changed files with 167 additions and 0 deletions
--- a/Style.css
+++ b/Style.css
@ -0,0 +1,60 @@
+
+.login-page{
+    width: 360px;
+    padding: 10% 0 0;
+    margin: auto;
+}
+
+.form{
+    position:relative;
+    z-index: 1;
+    background: #ff6666;
+    max-width: 360px;
+    margin: 0 auto 100px;
+    padding: 45px;
+    text-align: center;
+}
+
+.form input{
+    font-family: "Roboto", sans-serif;
+    outline: 1;
+    background: #f2f2f2;
+    width: 100%;
+    border:0;
+    margin: 0 0 15px;
+    padding: 15px;
+    box-sizing: border-box;
+    font-size: 14px;
+}
+
+.form button{
+    font-family: "Roboto", sans-serif;
+    text-transform: uppercase;
+    outline: 0;
+    background: #ffcc66;
+    width: 100%;
+    border: 0;
+    padding: 15px;
+    color: #FFFFFF;
+    font-size: 14;
+    cursor: pointer;
+}
+
+.form button:hover,.form button:active{
+    background:#43A047;
+}
+
+.form .message{
+    margin: 15px 0 0;
+    color: aliceblue;
+    font-family: "Roboto", sans-serif;
+    font-size: 14px;
+}
+
+.form .message a{
+    color: #f2f2f2;
+}
+
+.form .register-form{
+    display: none;
+}
--- a/movies.js
+++ b/movies.js
@ -0,0 +1,55 @@
+$(document).ready(function(){
+$('.message a').click(function(){
+    $('form').animate({height: "toggle", opacity: "toggle"},"slow");
+})
+});
+
+async function submitForm(e, form){
+    e.preventDefault();
+    
+    try {
+        const response = await fetch('https://mkr.thefeathers.in/register', {
+            method: 'post',
+            body: JSON.stringify({
+                "username": form.formName.value,
+                "email": form.formEmail.value,
+                "password": form.formPassword.value,
+            })
+        });
+        const data = await response.json();
+        //Success code goes here
+        //window.location = "searchmovies.html";
+        alert(JSON.stringify(data));
+        $('form').animate({ height: "toggle", opacity: "toggle" }, "slow");
+    }
+    catch (err) {
+        //Failure
+        alert('Error');
+    }
+}
+
+
+async function submitForm1(e, form){
+    e.preventDefault();
+    
+    try {
+        const response = await fetch('https://mkr.thefeathers.in/login', {
+            method: 'POST',
+            body: JSON.stringify({
+                "username" : document.getElementById('formName1').value,
+                 "password" : document.getElementById('formPassword1').value
+            })
+        });
+        const data1 = await response.json();
+        //Success code goes here
+        alert(JSON.stringify(data1));
+        window.location = "searchmovies.html";
+    }
+    catch (err) {
+        //Failure
+        alert('Error');
+    }
+}
+
+
+ 
--- a/searchmovies.html
+++ b/searchmovies.html
@ -0,0 +1,20 @@
+<html>
+    <head>
+        <title>
+            Search Movies
+        </title>
+        <link rel="stylesheet" href="searchstyle.css">
+        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+        <script src="movies.js"></script>
+    </head>
+    <body>
+          <div class="header">
+              <form>
+                  <div class="form-box">
+                      <input type="text" class="search-movies" placeholder="Movies">
+                      <button class="search-btn" type="button">Search</button>
+                  </div>
+              </form>
+          </div>
+          <div id="output"></div>
+    </body>
--- a/searchstyle.css
+++ b/searchstyle.css
@ -0,0 +1,32 @@
+.body{
+    margin: 0;
+    padding: 0;
+}
+
+.header{
+    text-align: center;
+}
+
+.search-movies{
+    height: 50px;
+    padding: 10px;
+    border-radius: 25px;
+    width: 800px;
+    outline-width: 0;
+    display: inline-block;
+}
+
+.form-box button:hover,.form-box button:active{
+    background:#43A047;
+}
+
+.search-btn{
+    height: 50px;
+    width: 150px;
+    background: #ffeb3b;
+    border: none;
+    color: #000;
+    border-radius: 25px;
+    outline: 0;
+    cursor: pointer;
+}