From d11efac8afdda2a6199f9ea26112d7bd9f379cce Mon Sep 17 00:00:00 2001 From: Raja Harsh Vardhan Singh Date: Thu, 29 Sep 2022 02:22:36 +0530 Subject: [PATCH 1/2] Changes made in CSS and a little tweek in js of add function for more interactivity --- index.css | 93 ++++++++++++++++++++++++++++++++++++++++++++---------- index.html | 30 +++++++++++------- index.js | 21 ++++++++---- 3 files changed, 109 insertions(+), 35 deletions(-) diff --git a/index.css b/index.css index 9413f15..2682250 100644 --- a/index.css +++ b/index.css @@ -1,22 +1,81 @@ -.body{ - background-color: lightskyblue; -} -#button{ - background-color: rgb(33, 33, 92) ; - color: white; - font-size: 50px; - padding: 15px 15px; - margin: 20px 20px; +* { + box-sizing: border-box +} + +:root { + --main-color: #fff +} + +body { + margin: 0; + font-family: sans-serif; + background: linear-gradient(130deg, #5f0dda, #225bde, #079cba, #079cba, #225bde, #5f0dda); + background-size: 1200% 1200%; + animation: AnimationName 10s ease-in-out infinite; + color: var(--main-color); +} + +@keyframes AnimationName { + 0% { + background-position: 0% 51% + } + + 50% { + background-position: 100% 50% + } + + 100% { + background-position: 0% 51% + } +} + +.container { + max-width: 900px; + margin: 0 auto +} + +.text-center { + text-align: center +} + +.mt-4 { + margin-top: 4rem +} + +.main-heading { + font-size: 3rem +} + +.big-block { + display: flex; + align-items: center; + justify-content: space-around +} + +#text { + font-size: 2rem; + padding: 5px 15px; border-radius: 10px; + border: 2px solid rgba(0, 0, 0, 0.2); + outline: none } -#text{ - font-size: 50px; - padding: 15px 15px; - margin: 20px 20px; + +#button { + background-color: rgb(33, 33, 92); + color: var(--main-color); + font-size: 2rem; + padding: 5px 15px; border-radius: 10px; + border-width: 2px; + border-color: var(--main-color); + outline: none } -.bigblock{ - display: flex; - flex-direction: row; - justify-content: space-around; + +ul { + + list-style-type: "▶" } + +li { + padding: 6px 10px +} \ No newline at end of file diff --git a/index.html b/index.html index 323e288..0b433e8 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -7,21 +8,26 @@ Document - -
-
-
    -
  • One
    • -
  • Two
    • -
  • Three
    • -
-
-
-
+ +

JS Append Child

+
+
+ +
+
+
- +
+

Appended child will be added here

+ +
+ + + \ No newline at end of file diff --git a/index.js b/index.js index af966f8..621e813 100644 --- a/index.js +++ b/index.js @@ -1,8 +1,17 @@ -function add(){ - var input=document.getElementById("text"); - var li=document.createElement("LI"); - li.innerHTML=input.value; - input.value="" - document.getElementById("list").appendChild(li); +let click = true +function add() { + let input = document.getElementById("text") + if (click) { + document.getElementById('list').innerHTML = '' + } + if (input.value == "") { + alert("Input field is empty") + return + } + click = false + let li = document.createElement("li") + li.innerHTML = input.value + input.value = "" + document.getElementById("list").appendChild(li) } \ No newline at end of file From e634f26a740d0d67e49e47792aa0cbc5c7592439 Mon Sep 17 00:00:00 2001 From: Raja Harsh Vardhan Singh Date: Fri, 30 Sep 2022 00:25:02 +0530 Subject: [PATCH 2/2] Button pointer and sequence order change of if condition --- index.css | 1 + index.js | 7 ++++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/index.css b/index.css index 2682250..33f9725 100644 --- a/index.css +++ b/index.css @@ -68,6 +68,7 @@ body { border-radius: 10px; border-width: 2px; border-color: var(--main-color); + cursor: pointer; outline: none } diff --git a/index.js b/index.js index 621e813..fbedafc 100644 --- a/index.js +++ b/index.js @@ -2,13 +2,14 @@ let click = true function add() { let input = document.getElementById("text") - if (click) { - document.getElementById('list').innerHTML = '' - } + if (input.value == "") { alert("Input field is empty") return } + if (click) { + document.getElementById('list').innerHTML = '' + } click = false let li = document.createElement("li") li.innerHTML = input.value