From 23df6ecc48d7381680f2cff899150a8ddfc5a782 Mon Sep 17 00:00:00 2001
From: Raghav Dhingra <raghav.dhingra15@gmail.com>
Date: Mon, 31 Dec 2018 13:21:17 +0530
Subject: [PATCH 1/3] Add files via upload

---
 web-dev task/css/main.css | 184 ++++++++++++++++++++++++++++++++++++++
 web-dev task/index.html   |  64 +++++++++++++
 web-dev task/js/nav.js    |  69 ++++++++++++++
 3 files changed, 317 insertions(+)
 create mode 100644 web-dev task/css/main.css
 create mode 100644 web-dev task/index.html
 create mode 100644 web-dev task/js/nav.js

diff --git a/web-dev task/css/main.css b/web-dev task/css/main.css
new file mode 100644
index 0000000..5735f72
--- /dev/null
+++ b/web-dev task/css/main.css	
@@ -0,0 +1,184 @@
+@import url('https://fonts.googleapis.com/css?family=Lato');
+@import url('https://fonts.googleapis.com/css?family=Lato|Raleway');
+*{
+    transition: 0.5s;
+}
+body{
+    background: rgb(38, 147, 190);
+}
+.topnav{
+    position: absolute;
+    display: flex;
+    z-index: 2;
+    flex-direction: row;
+    background: rgb(25, 162, 216);
+    width: 100%;
+    height: 40px;
+    top:0;
+    left:0; 
+    color: #fff;
+    text-transform: uppercase;
+}
+.topelmt{
+    text-align: center;
+    vertical-align: middle;
+    line-height: 40px;
+    position: relative;
+    height: 35px;
+    border-right: 1px solid black;
+    width: 150px;
+    font-size: 20px;
+    display: inline-table;
+    transition: 0.3s;
+}
+a{
+    text-decoration: none;
+    color: white;
+}
+.topelmt:hover{
+    background: rgb(77, 192, 238);
+    cursor: pointer;
+    transform:scale(1.1);
+    z-index: 10;
+    box-shadow: 1px 1px 10px 0.5px black;
+}
+.topelmt:hover a{
+    color: #000;
+}
+.active{
+    background: rgb(24, 117, 153) !important;
+}
+.active:hover{
+    transform: scale(1.1);
+    z-index: 10;
+}
+.active a{
+    color: #fff;
+}
+.active:hover a{
+    color: #fff;
+}
+.main_container{
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    top: 100px;
+    height: auto;
+    width: 90%;
+    grid-gap: 30px;
+    left: 5%;
+    padding: 1%;
+    background: rgb(16, 123, 165);
+}
+#add_header{
+    font-family: 'Lato', sans-serif;
+    color: white;
+    margin: 20px;
+    font-size: 25px;
+}
+#add_logo{
+    font-family: 'Raleway', sans-serif;
+    color: white;
+    margin: 20px;
+    font-size: 15px;   
+}
+input[type='text']{
+    padding: 10px;
+    width: 300px;
+}
+button{
+    position: relative;
+    top: 5px;
+    width: 200px;
+    cursor: pointer;
+    background: #4aec9b;
+    border: 0;
+    -webkit-appearance: none;
+}
+#at_time{
+    position: relative;
+    padding: 10px;
+    top: 5px;
+    height: 50px;
+    line-height: 50px;
+    vertical-align: middle;
+    width: auto;
+    border: 1px dotted black;
+}
+.new{
+    position: relative;
+    top: 10px;
+    min-height: 20px;
+    width: auto;
+    line-height: 50px;
+    opacity: 0;
+    vertical-align: middle;
+    text-align: center;
+    border: 1px dotted black;
+    border-radius: 5px;
+    font-size: 25px;
+    margin-bottom: 10px;
+    color: white;
+    background: rgb(11, 98, 133);
+    font-family: 'Lato', sans-serif;
+    animation: anim 1s ease forwards;
+}
+@keyframes anim{
+    0%{
+        top: 0px;
+        opacity: 0;
+    }
+    25%{
+        opacity: 0.6;
+        top: 30px;
+    }
+    100%{
+        top: 0;
+        opacity: 1;
+    }
+}
+.n1{
+    animation-delay: 0.3s;
+}
+#main_container_2{
+    position: absolute;
+    top: 100px;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    padding: 50px;
+    color: white;
+}
+.back_page{
+    position: absolute;
+    top: 50px;
+    height: auto; 
+    left: 1%;
+    width: auto;
+    line-height: auto;
+    vertical-align: middle;
+    text-align: center;
+    z-index:2;
+    cursor: pointer;
+    font-weight: bold;
+}
+.page_1{
+    position: absolute;
+    top: 30px;
+    left: 0;
+    width: 100%;
+    height: auto;
+    opacity:1;
+    z-index: 10;
+}
+.page_2{
+    position: absolute;
+    top: 20px;
+    left: 0;
+    width: 100%;
+    height: auto;
+    opacity:0;
+}
\ No newline at end of file
diff --git a/web-dev task/index.html b/web-dev task/index.html
new file mode 100644
index 0000000..715f1b6
--- /dev/null
+++ b/web-dev task/index.html	
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Web-dev task</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="./css/main.css" type="text/css" rel="stylesheet">
+    <link rel="icon" href='https://cdn4.iconfinder.com/data/icons/scripting-and-programming-languages/512/js-512.png' />
+</head>
+<body>
+    <div class="topnav">
+        <div class="topelmt active" id='btn_1' onclick="pg_1_click();">home</div>
+        <div class="topelmt" id='btn_2' onclick="pg_2_click();">about</div>
+    </div>
+
+    <!----------------------------------------------------------->
+    <div class='page_1' id='pg_1'>
+    <!--Main Container------------------------------->
+    <div class='main_container'>
+        <div>
+            <div id='add_header'>
+                Add New Things.........
+            </div>
+        <div id='add_logo'><br>
+            You can use below text field to add Things:<Br><Br>
+                <input type='text' id='text_field' placeholder="Add New Name Here....." maxlength="78" name="r1" value='Example_3' /><br><br><br>
+                Now, Click here to add:<br>
+                <button onclick="add();">Click To Add</button><br><br>
+                <div>Till now you have wrote:<br>
+                <div id='at_time'></div>
+                </div>
+        </div>
+        </div>
+<!---------------------->
+        <div>
+            <div id='add_header'>Get you list of (<span id='number'>2</span>) here...</div>
+            <div id='new_element'>
+                    <div class='new'>Example_1</div>
+                    <div class='new n1'>Example_2</div>
+            </div>
+        </div>
+    </div>
+    <!------------------------------------------->
+</div>
+
+
+<!--------------------------------------------------------------------->
+    <div class='page_2' id='pg_2'>    
+<!----Main Content-------------------------------------------->
+        <div class='back_page' onclick='pg_1_click();'>
+         <h1>Back To Home-Page <</h1>
+        </div>
+        <div id='main_container_2'>
+            <div>Example_1</div>
+            <div>Example_2</div>
+        </div>
+        <!------------------------------------------------------------>
+    </div>
+<!------------------------------------------------------------------------------>
+
+    <script type='text/javascript' src='./js/nav.js'></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/web-dev task/js/nav.js b/web-dev task/js/nav.js
new file mode 100644
index 0000000..e698098
--- /dev/null
+++ b/web-dev task/js/nav.js	
@@ -0,0 +1,69 @@
+// Nav_Bar ////////////////////////////////////////////////////
+const pg_1 = document.getElementById('pg_1');
+const pg_2 = document.getElementById('pg_2');
+var x=1;
+const pg_1_click = () => {
+    pg_1.style.opacity=1;
+    pg_1.style.zIndex=10;
+    pg_2.style.opacity=0;
+    pg_2.style.zIndex=1;
+    document.getElementById('btn_1').className='topelmt active';
+    document.getElementById('btn_2').className='topelmt';
+}
+const pg_2_click = () => {
+    pg_1.style.opacity=0;
+    pg_1.style.zIndex=1;
+    pg_2.style.opacity=1;
+    pg_2.style.zIndex=10;
+    add_2();
+    document.getElementById('btn_1').className='topelmt';
+    document.getElementById('btn_2').className='topelmt active';
+}
+///////////////////////////////////////////////////////////////
+
+const txt = document.getElementById('text_field');
+const txt_at_time = document.getElementById('at_time');
+const counting = document.getElementById('number');
+var arr = ['Example_1','Example_2'];
+txt.onkeyup = () => {
+    txt_at_time.innerHTML = txt.value;
+}
+txt.onkeydown = () => {
+    txt_at_time.innerHTML = txt.value;
+}
+const count = () => {
+    var num = arr.length;
+    counting.innerHTML = num;
+}
+const iterate = () => {
+    var i = arr.length-1;
+    var new_elmt = document.createElement('div');
+    new_elmt.id=arr[i];
+    new_elmt.className='new';
+    new_elmt.innerHTML=arr[i];
+    document.getElementById('new_element').appendChild(new_elmt);
+}
+const clear_1 = () => {
+    txt.value='';
+    txt_at_time.innerHTML='';
+}
+const add = () => {
+    arr.push(txt.value);
+    count();
+    clear_1();
+    x+=1;
+    iterate();
+}
+const add_2 = () => {
+    if (x>=2){
+    var i;
+    for (i=2;i<arr.length;i++) {
+            var new_elmt = document.createElement('div');
+            new_elmt.id=arr[i];
+            new_elmt.className='new_2';
+            new_elmt.innerHTML=arr[i];
+            document.getElementById('main_container_2').appendChild(new_elmt);
+        }
+        x=1;
+    }
+}
\ No newline at end of file

From cdc6526753578b5475793f3c0f9f275b379cc9e1 Mon Sep 17 00:00:00 2001
From: Raghav Dhingra <raghav.dhingra15@gmail.com>
Date: Mon, 31 Dec 2018 18:26:06 +0530
Subject: [PATCH 2/3] Add files via upload

---
 web-dev task/js/nav.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web-dev task/js/nav.js b/web-dev task/js/nav.js
index e698098..ac33763 100644
--- a/web-dev task/js/nav.js	
+++ b/web-dev task/js/nav.js	
@@ -56,8 +56,9 @@ const add = () => {
 }
 const add_2 = () => {
     if (x>=2){
-    var i;
-    for (i=2;i<arr.length;i++) {
+        document.getElementById('main_container_2').innerHTML='';
+        var i;
+        for (i=0;i<arr.length;i++) {
             var new_elmt = document.createElement('div');
             new_elmt.id=arr[i];
             new_elmt.className='new_2';

From 03771ed8b06d3f29385f9458b7fb9a7ba646ff3e Mon Sep 17 00:00:00 2001
From: Raghav Dhingra <raghav.dhingra15@gmail.com>
Date: Tue, 19 Feb 2019 21:15:44 +0530
Subject: [PATCH 3/3] Set theme jekyll-theme-cayman

---
 _config.yml | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 _config.yml

diff --git a/_config.yml b/_config.yml
new file mode 100644
index 0000000..c419263
--- /dev/null
+++ b/_config.yml
@@ -0,0 +1 @@
+theme: jekyll-theme-cayman
\ No newline at end of file