CodeAsylums-Community · Shw374 · Oct 12, 2020 · Oct 12, 2020 · Oct 12, 2020 · Oct 12, 2020
diff --git a/Task1/README.md b/Task1/README.md
@@ -16,12 +16,11 @@
 
 ## Contributors
 Follow the guidelines mentioned in [Contribution Guidelines](https://github.com/CodeAsylums-Community/template/blob/main/CONTRIBUTIONS.md)
-- <a href="https://github.com/anjannair">Anjan Nair</a>
-- <a href="https://github.com/<Contributor>">Contributor Name</a>
+- <a href="https://github.com/Shw374">Shweta</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
-</p>
+</p>
diff --git a/Task1/Shweta/index.html b/Task1/Shweta/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="style.css">
+<script src="index.js"></script>
+<title>Form Validation</title>
+</head>
+<body>
+    <div class="container">
+    <form name="Form" onsubmit="return(validateForm())">
+        <div class="row">
+            <div class="col-width-25">
+                <label for="regno">Registration Number</label>
+            </div>
+            <div class="col-width-75">
+                <input type="number" id="regno" name="regno" placeholder="Registration Number" required>
+            </div>
+        </div>
+        <div class="row">
+        <div class="col-width-25">
+            <label for="fname">First Name</label>
+        </div>
+        <div class="col-width-75">
+            <input type="text" id="fname" name="firstname" placeholder="First Name" required> 
+        </div>
+        </div>
+        <div class="row">
+        <div class="col-width-25">
+            <label for="lname">Last Name</label>
+        </div>
+        <div class="col-width-75">
+            <input type="text" id="lname" name="lastname" placeholder="Last Name" required>
+        </div>
+        </div>
+        <div class="row">
+            <div class="col-width-25">
+                <label for="telnum">Telphone No.</label>
+            </div>
+            <div class="col-width-75">
+                <input type="number" id="telnum" name="telnum" placeholder="Telephone No." required>
+            </div>
+        </div>
+        <div class="row">
+        <div class="col-width-25">
+            <label for="country">Country</label>
+        </div>
+        <div class="col-width-75">
+            <select id="country" name="country">
+            <option value="australia">India</option>
+            <option value="canada">China</option>
+            <option value="usa">USA</option>
+            <option value="other">Other</option>
+            </select>
+        </div>
+        </div>
+        <div class="row">
+            <div class="col-width-25">
+                <label for="emailid">Email</label>
+            </div>
+            <div class="col-width-75">
+                <input type="email" id="emailid" name="emailid" placeholder="Email" required>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-width-25">
+                <label for="password">Password</label>
+            </div>
+            <div class="col-width-75">
+                <input type="password" id="password" name="password" placeholder="Password" required>
+            </div>
+        </div>
+        <div class="row">
+        <div class="col-width-25">
+            <label for="feedback">Your Feedback</label>
+        </div>
+        <div class="col-75">
+            <textarea id="feedback" name="feedback" placeholder="Write something.." style="height:200px"></textarea>
+        </div>
+        </div>
+        <div class="row">
+        <input type="submit" value="Submit">
+        </div>
+    </form>
+    </div>
+
+</body>
+</html>
diff --git a/Task1/Shweta/index.js b/Task1/Shweta/index.js
@@ -0,0 +1,45 @@
+function validateForm() {
+    /* Registration Number Validation */
+    var register = document.getElementById('regno').value;
+    var registerNum = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
+    if(!(register.match(registerNum))) {
+        alert("Registration number invalid must be 10 digit in length");
+        return false;
+    }
+    /* Telephone number Valiation */
+    var phone = document.getElementById('telnum').value;
+    var phoneNum = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
+    if(!(phone.match(phoneNum))) {
+        alert("Phone number invalid");
+        return false;
+    }
+
+    /* Email Validation */
+    var email = document.getElementById('emailid').value;
+    var emailValue = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    var emailResult = emailValue.match(email);
+    if (!emailResult){
+      alert("Invalid E-mail ID");
+      return false;
+    }
+
+    /*Password Validation*/
+    var newPassword = document.getElementById('password').newPassword.value;
+    var minNumberofChars = 6;
+    var maxNumberofChars = 16;
+    var regularExpression = /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,16}$/;
+    alert(newPassword); 
+    if(newPassword.length < minNumberofChars || newPassword.length > maxNumberofChars){
+        return false;
+    }
+    if(!regularExpression.match(newPassword)) {
+        alert("password should contain atleast one number and one special character");
+        return false;
+    }
+    if(document.Form.password.value == "" || document.Form.password.value.length < 8) {
+        alert("Please provide an 8 digit password.");
+        document.Form.password.focus() ;
+        return false;
+    }
+  return (true);
+}
diff --git a/Task1/Shweta/style.css b/Task1/Shweta/style.css
@@ -0,0 +1,87 @@
+* {
+    box-sizing: border-box;
+  }
+
+  input[type=text], select, textarea {
+    width: 100%;
+    padding: 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    resize: vertical;
+  }
+
+  input[type=number], select, textarea {
+    width: 100%;
+    padding: 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    resize: vertical;
+  }
+
+  input[type=password], select, textarea {
+    width: 100%;
+    padding: 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    resize: vertical;
+  }
+
+  input[type=email], select, textarea {
+    width: 100%;
+    padding: 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    resize: vertical;
+  }
+
+  label {
+    padding: 12px 12px 12px 0;
+    display: inline-block;
+  }
+
+  input[type=submit] {
+    background-color: #4CAF50;
+    color: white;
+    padding: 12px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    float: right;
+  }
+
+  input[type=submit]:hover {
+    background-color: #45a049;
+  }
+
+  .container {
+    border-radius: 5px;
+    background-color: #f2f2f2;
+    padding: 20px;
+  }
+
+  .col-width-25 {
+    float: left;
+    width: 25%;
+    margin-top: 6px;
+  }
+
+  .col-width-75 {
+    float: left;
+    width: 75%;
+    margin-top: 6px;
+  }
+
+  /* Clear floats after the columns */
+  .row:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  /* Responsive- when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
+  @media screen and (max-width: 600px) {
+    .col-25, .col-75, input[type=submit] {
+      width: 100%;
+      margin-top: 0;
+    }
+  }
diff --git a/Task2/README.md b/Task2/README.md
@@ -16,8 +16,7 @@
 
 ## Contributors
 Follow the guidelines mentioned in [Contribution Guidelines](https://github.com/CodeAsylums-Community/template/blob/main/CONTRIBUTIONS.md)
-- <a href="https://github.com/<Contributor>">Praveen M</a>
-
+- <a href="https://github.com/Shw374">Shweta</a>
 
 ## License
 [![License](http://img.shields.io/:license-mit-blue.svg?style=flat-square)](http://badges.mit-license.org)

diff --git a/Task2/Shweta/faded.mp4 b/Task2/Shweta/faded.mp4
diff --git a/Task2/Shweta/lovemelikeudo.mp4 b/Task2/Shweta/lovemelikeudo.mp4
diff --git a/Task2/Shweta/styleIt.css b/Task2/Shweta/styleIt.css
@@ -0,0 +1,49 @@
+* {
+    box-sizing: border-box;
+  }
+
+  .container {
+    border-radius: 5px;
+    background-color: #f2f2f2;
+    padding: 20px;
+  }
+
+  .col-width-25 {
+    float: right;
+    width: 25%;
+    margin-top: 6px;
+    align-content: center;
+  }
+
+  .col-width-75 {
+    float: left;
+    width: 75%;
+    margin-top: 6px;
+    align-content: center;
+  }
+
+  .row:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  /* Responsive- when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
+  @media screen and (max-width: 600px) {
+    .col-25, .col-75, input[type=submit] {
+      width: 100%;
+      margin-top: 0;
+    }
+  }
+
+p {
+    text-align: center;
+    margin-top: 15px;
+    align-items: center;
+}
+
+video {
+    max-width: 100%;
+    height: auto;
+  }
+
diff --git a/Task2/Shweta/videos.html b/Task2/Shweta/videos.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styleIt.css">
+    <title>MUSIC WORLD</title>
+</head>
+<body>
+    <div class="container">
+        <div class="row">
+            <div class="col-width-25">
+                <iframe width="368" height="200" src="https://www.youtube.com/embed/Pkh8UtuejGw?autoplay=1&mute=1">
+                </iframe>
+            </div>
+            <div class="col-width-75">
+                <p><h1>#1 Trending</h1><br>
+                    Señorita" is a song by Canadian singer Shawn Mendes and Cuban-American singer Camila Cabello. It was released as the second single (seventh overall) from the deluxe edition of Mendes' self-titled third studio album through Island Records on June 21, 2019.[2] It is also included on Cabello's second studio album Romance (2019). The song was written by Mendes, Cabello, Charli XCX, Ali Tamposi, Jack Patterson, and its producers Andrew Watt, Benny Blanco, and Cashmere Cat.</p>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-width-75">
+                <p><h1>#2 Trending</h1><br>
+                    "Faded" is a song by Norwegian record producer and DJ Alan Walker with vocals provided by Norwegian singer Iselin Solheim. The single was originally set to be released on 25 November 2015, but was postponed to 3 December 2015. The song was highly successful, peaking in the top 10 in most of the countries it charted in, and reached the top spot in more than 10 countries. It is currently the 21st most viewed video on YouTube, with over 2.8 billion views, 20 million likes and 551 thousand dislikes as of 4 October 2020, as well as being the 29th most streamed song on Spotify, with over 1 billion streams as of February 2020.</p>
+            </div>
+            <div class="col-width-25">
+                <video width="400" controls>
+                    <source src="faded.mp4" type="video/mp4">
+                    <source src="mov_bbb.ogg" type="video/ogg">
+                        Your browser does not support HTML5 video.    
+                </video>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-width-25">
+                <video width="400" controls>
+                    <source src="lovemelikeudo.mp4" type="video/mp4">
+                    <source src="mov_bbb.ogg" type="video/ogg">
+                        Your browser does not support HTML5 video.    
+                </video>
+            </div>
+            <div class="col-width-75">
+                <p><h1>#3 Trending</h1><br>"Love Me Like You Do" is a song recorded by English singer Ellie Goulding for the soundtrack to the film Fifty Shades of Grey (2015). The song was written by Savan Kotecha, Ilya Salmanzadeh, Tove Lo, Max Martin and Ali Payami; the latter two also produced it. Goulding was selected to provide vocals to the track. It was released on 7 January 2015 as the second single from the soundtrack. The song was also included on Goulding's third studio album, Delirium (2015).</p>
+            </div>
+        </div>
+
+    <div class="row">
+        <div class="col-width-75">
+            <p><h1>#4 Trending</h1><br>
+                "Bohemian Rhapsody" is a song by the British rock band Queen. It was written by Freddie Mercury for the band's 1975 album A Night at the Opera. It is a six-minute suite,[1] consisting of several sections without a chorus: an intro, a ballad segment, an operatic passage, a hard rock part and a reflective coda.[2] The song is a more accessible take on the 1970s progressive rock genre.</p>
+        </div>
+        <div class="col-width-25">
+            <iframe width="368" height="200" src="https://www.youtube.com/embed/tgbNymZ7vqY">
+            </iframe>
+        </div>
+    </div>
+</div>
+
+
+</body>
+</html>