CodeAsylums-Community · AryanFelix · Oct 9, 2020 · Oct 9, 2020 · Oct 11, 2020 · Oct 11, 2020
diff --git a/Task1/AryanFelix/README.md b/Task1/AryanFelix/README.md
@@ -0,0 +1,25 @@
+<p align="center">
+<a href="https://community.codeasylums.com">
+<img src="https://i.ibb.co/6wyhHNc/Code-Asylums-Community-1.png" width="700px" alt="<Repo> Logo"/>
+</a>
+</p>
+
+# FrontEnd
+
+> 
+> A frontend JavaScript validated form using Regular Expressions with at least 8 different fields (Some fields can be: Name, Registration Number, Password, Email, etc).
+
+---
+
+
+
+## Contributors
+Follow the guidelines mentioned in [Contribution Guidelines](https://github.com/CodeAsylums-Community/template/blob/main/CONTRIBUTIONS.md)
+- <a href="https://github.com/AryanFelix">Aryan Felix</a>
+
+## License
+[![License](http://img.shields.io/:license-mit-blue.svg?style=flat-square)](http://badges.mit-license.org)
+
+<p align="center">
+	With :heart: by CodeAsylums Student Partners
+</p>
diff --git a/Task1/AryanFelix/index.css b/Task1/AryanFelix/index.css
@@ -0,0 +1,34 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
+
+* {
+    font-family: 'Montserrat', sans-serif;
+}
+
+div {
+    margin: 11%;
+}
+
+form {
+    margin: 1% 30%;
+    padding: 2% 8%;
+    border-radius: 5px;
+    box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
+}
+
+input {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+p {
+    text-align: center;
+}
+
+a {
+    color: black;
+    text-decoration: none;
+}
+
+a:hover {
+    color: red;
+}
diff --git a/Task1/AryanFelix/index.html b/Task1/AryanFelix/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Form Validation</title>
+    </head>
+    <link rel="stylesheet" href="index.css">
+    <script src="index.js"></script>
+    <body>
+        <div>
+            <form name="myForm" onsubmit="return(validateForm())">
+                <table>
+                    <tr>
+                        <td>
+                            Name : 
+                        </td>
+                        <td>
+                            <input type="text" name="name">
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            Reg No : 
+                        </td>
+                        <td>
+                            <input type="number" name="regno">
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            Password : 
+                        </td>
+                        <td>
+                            <input type="password" name="pass">
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            E-Mail : 
+                        </td>
+                        <td>
+                            <input type="email" name="email">
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            Age : 
+                        </td>
+                        <td>
+                            <input type="number" name="age">
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            Zip Code : 
+                        </td>
+                        <td>
+                            <input type="number" name="zip">
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            State : 
+                        </td>
+                        <td>
+                            <input type="text" name="State">
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            Country : 
+                        </td>
+                        <td>
+                            <select name = "country">
+                                <option value = "-1" selected>...</option>
+                                <option value = "1">USA</option>
+                                <option value = "2">UK</option>
+                                <option value = "3">INDIA</option>
+                            </select>
+                        </td>
+                    </tr>
+                </table>
+                <input type="submit" value="Submit">
+                <input type="reset" value="Reset">
+                <p>Made with ❤️ by <a href="https://github.com/AryanFelix">Aryan Felix</a></p>
+            </form>
+        </div>
+    </body>
+</html>
diff --git a/Task1/AryanFelix/index.js b/Task1/AryanFelix/index.js
@@ -0,0 +1,50 @@
+function validateForm() {
+    if(document.myForm.name.value == "") {
+        alert( "Please provide your name!");
+        document.myForm.Name.focus() ;
+        return false;
+    }
+    if(document.myForm.regno.value == "" || isNaN(document.myForm.regno.value) || document.myForm.regno.value.length != 9) {
+        alert("Please provide a 9 digit registration number.");
+        document.myForm.regno.focus() ;
+        return false;
+    }
+    if(document.myForm.pass.value == "" || document.myForm.pass.value.length < 8) {
+        alert("Please provide an 8 digit password.");
+        document.myForm.Name.focus() ;
+        return false;
+    }
+    if(document.myForm.email.value == "") {
+        alert("Please provide your Email!");
+        document.myForm.EMail.focus() ;
+        return false;
+    }
+    var emailID = document.myForm.EMail.value;
+    atpos = emailID.indexOf("@");
+    dotpos = emailID.lastIndexOf(".");
+    if (atpos < 1 || ( dotpos - atpos < 2 )) {
+        alert("Please enter correct email ID")
+        document.myForm.EMail.focus() ;
+        return false;
+    }
+    if(document.myForm.age.value == "" || isNaN(document.myForm.age.value)) {
+        alert("Please provide a valid age.");
+        document.myForm.Zip.focus() ;
+        return false;
+    }
+    if(document.myForm.zip.value == "" || isNaN(document.myForm.zip.value) || document.myForm.zip.value.length != 6) {
+        alert("Please provide a zip in the format ######. Ex: 100011");
+        document.myForm.Zip.focus() ;
+        return false;
+    }
+    if(document.myForm.state.value == "") {
+        alert("Please provide your state!");
+        return false;
+    }
+    let x = document.myForm.country.value;
+    if(x == "-1") {
+        alert("Please provide your country!");
+        return false;
+    }
+    return( true );
+}
diff --git a/Task1/README.md b/Task1/README.md
@@ -16,8 +16,9 @@
 
 ## Contributors
 Follow the guidelines mentioned in [Contribution Guidelines](https://github.com/CodeAsylums-Community/template/blob/main/CONTRIBUTIONS.md)
-- <a href="https://github.com/<Contributor>">Contributor Name</a>
-- <a href="https://github.com/<Contributor>">Contributor Name</a>
+- <a href="https://github.com/anjannair">Anjan Nair</a>
+- <a href="https://github.com/AryanFelix">Aryan Felix</a>
+
 
 ## License
 [![License](http://img.shields.io/:license-mit-blue.svg?style=flat-square)](http://badges.mit-license.org)

diff --git a/Task2/AryanFelix/README.md b/Task2/AryanFelix/README.md
@@ -0,0 +1,28 @@
+<p align="center">
+<a href="https://community.codeasylums.com">
+<img src="https://i.ibb.co/6wyhHNc/Code-Asylums-Community-1.png" width="700px" alt="<Repo> Logo"/>
+</a>
+</p>
+
+# FrontEnd
+
+> 
+> A web page which displays a total of 5 videos on the same page. 4 in the first half. 1 in the second half.
+
+---
+
+## Instructions
+> VERY IMPORTANT
+ - Run this code on a server or else the video will not play. Youtube is very specific with its policy and embedded videos will not play locally. Server is mandatory.
+ - Start : index.html
+
+## Contributors
+Follow the guidelines mentioned in [Contribution Guidelines](https://github.com/CodeAsylums-Community/template/blob/main/CONTRIBUTIONS.md)
+- <a href="https://github.com/AryanFelix">Aryan Felix</a>
+
+## License
+[![License](http://img.shields.io/:license-mit-blue.svg?style=flat-square)](http://badges.mit-license.org)
+
+<p align="center">
+	With :heart: by CodeAsylums Student Fellowship Program
+</p>
diff --git a/Task2/AryanFelix/index.css b/Task2/AryanFelix/index.css
@@ -0,0 +1,91 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 400;
+    scroll-behavior: smooth;
+}
+
+html, body {
+    height: 100%;
+}
+
+.container-fluid {
+    height: 100%;
+    text-align: center;
+}
+
+.mostView {
+    background: #000000;
+    color: #ffffff;
+}
+
+.mostView .heading h1 , .mostLike .heading h1{
+    padding: 20px 40px;
+    font-weight: 800;
+}
+
+.mostView .carousel .carousel-caption h5, .mostLike .carousel-inner .carousel-caption h5{
+    font-weight: 800;
+}
+
+.mostView .carousel .carousel-caption p, .mostLike .carousel-inner .carousel-caption p{
+    font-weight: 600;
+}
+
+.mostView .carousel, .mostLike .carousel-inner {
+    padding: 30px;
+}
+
+.footer .next {
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+}
+
+.footer a {
+    text-decoration: none;
+    color: #ffffff;
+}
+
+.mostLike {
+    background:white;
+    color: #000000;
+}
+
+.mostLike .footer .next {
+    -ms-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+}
+
+.mostLike .footer a {
+    text-decoration: none;
+    color: #000000;
+}
+
+.mostLike .carousel-control-next-icon {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
+}
+
+footer {
+    text-align: center;
+    background: #000000;
+    margin: 0;
+    color: #ffffff;
+}
+
+footer p {
+    margin: 0;
+    padding: 5px;
+}
+
+footer a {
+    color: #ffffff;
+    text-decoration: none;
+}
+
+footer a:hover {
+    color: red;
+    text-decoration: none;
+}