From e9ce7da4f97a84ae42ed9cf4553efcf0be5a6c6c Mon Sep 17 00:00:00 2001 From: "Sudhanshu7.sb" Date: Fri, 8 May 2020 11:08:57 +0530 Subject: [PATCH] initial commit --- assignments/DOM Basics/01/index.html | 36 +++++++++++++++++++ assignments/DOM Basics/02/index.html | 15 ++++++++ assignments/DOM Basics/03/index.html | 15 ++++++++ assignments/DOM Basics/04/index.html | 23 ++++++++++++ assignments/events/1. Practice/index.js | 27 ++++++++------ .../events/2. backgroundChange/index.html | 1 + .../events/2. backgroundChange/main.js | 27 ++++++++++++++ assignments/events/3. randomQuotes/index.html | 4 +++ assignments/events/3. randomQuotes/main.js | 26 ++++++++++++++ assignments/events/4. mouseMove/index.html | 30 ++++++++++++++++ 10 files changed, 193 insertions(+), 11 deletions(-) diff --git a/assignments/DOM Basics/01/index.html b/assignments/DOM Basics/01/index.html index aaf6993..cf9f1de 100644 --- a/assignments/DOM Basics/01/index.html +++ b/assignments/DOM Basics/01/index.html @@ -11,6 +11,42 @@

Document Object Model

diff --git a/assignments/DOM Basics/02/index.html b/assignments/DOM Basics/02/index.html index 818b326..e886859 100644 --- a/assignments/DOM Basics/02/index.html +++ b/assignments/DOM Basics/02/index.html @@ -47,6 +47,21 @@

Query Selector All

Access me by query all (2)
diff --git a/assignments/DOM Basics/03/index.html b/assignments/DOM Basics/03/index.html index d85efc7..a59a7d4 100644 --- a/assignments/DOM Basics/03/index.html +++ b/assignments/DOM Basics/03/index.html @@ -39,5 +39,20 @@

Types of Sharks

const p = document.getElementsByTagName("p")[0]; const ul = document.getElementsByTagName("ul")[0]; // Your code goes here + + //1 + let firstLi = document.querySelector("ul"); + firstLi.firstElementChild.style.backgroundColor = "green"; + //2 + let allLi = document.querySelectorAll("li"); + allLi.forEach(elem => elem.style.backgroundColor = "orange"); + //3 + let pinkLi = document.querySelectorAll("li")[2]; + pinkLi.style.backgroundColor = "pink"; + //4 + let middleLi = document.querySelectorAll("li")[1]; + //5 + middleLi.previousElementSibling.style.backgroundColor = "coral"; + middleLi.nextElementSibling.style.backgroundColor = "aquamarine"; diff --git a/assignments/DOM Basics/04/index.html b/assignments/DOM Basics/04/index.html index e244ce1..21a52fe 100644 --- a/assignments/DOM Basics/04/index.html +++ b/assignments/DOM Basics/04/index.html @@ -12,5 +12,28 @@

About Me

  • Favorites:
  • Hometown:
    • + + diff --git a/assignments/events/1. Practice/index.js b/assignments/events/1. Practice/index.js index cf4d4e5..67caaf5 100755 --- a/assignments/events/1. Practice/index.js +++ b/assignments/events/1. Practice/index.js @@ -1,42 +1,47 @@ //Select the section with an id of container without using querySelector. - +let sec = document.getElementById("container"); //Select the section with an id of container using querySelector. - +let sec = document.querySelector("#container"); //Select all of the list items with a class of "second". - +let liClass = document.querySelectorAll(".second"); //Select a list item with a class of third, but only the list item inside of the ol tag. - +let liInol = document.querySelector("ol> li:last-child"); //Give the section with an id of container the text "Hello!". - +let sect = document.querySelector('#container'); +sect = "Hello!" //Add the class main to the div with a class of footer. - +let footer = document.querySelector(".footer"); +footer.classList.add("main"); //Remove the class main on the div with a class of footer. - + footer.classList.remove("main"); //Create a new li element. - +let newLi = document.createElement("li"); //Give the li the text "four". - +newLi = four; //Append the li to the ul element. - +ul.append(li); //Loop over all of the list inside the ol tag and give them a background color of "green". +let olList = document.querySelectorAll("ol>li"); +olList.forEach(elem => elem.styl.background = "green"); +//Remove the div with a class of footer. -//Remove the div with a class of footer. \ No newline at end of file +div.classList.remove("footer"); \ No newline at end of file diff --git a/assignments/events/2. backgroundChange/index.html b/assignments/events/2. backgroundChange/index.html index de6b110..831f311 100755 --- a/assignments/events/2. backgroundChange/index.html +++ b/assignments/events/2. backgroundChange/index.html @@ -8,6 +8,7 @@ +

    HI

    \ No newline at end of file diff --git a/assignments/events/2. backgroundChange/main.js b/assignments/events/2. backgroundChange/main.js index e69de29..e1c4c98 100755 --- a/assignments/events/2. backgroundChange/main.js +++ b/assignments/events/2. backgroundChange/main.js @@ -0,0 +1,27 @@ +//target +const change = document.querySelector("body"); + + + +//callback function +function Onclick(){ + let counter = document.body; //select the tag to be changed + counter.style.backgroundColor = randomColorGenerator(); //"blue" + //document.body.style.backgroundColor = "green"; +} + +function randomColorGenerator(){ + let colors ="#"; + let colorPicker = "1234567890abcdef".split(""); + for(let i = 0 ; i < 6; i++){ + let index = (Math.floor(Math.random()*15)); + colors = colors + colorPicker[index] ; + + } + return colors; +} + + + +//add event to target +change.addEventListener('click',Onclick); \ No newline at end of file diff --git a/assignments/events/3. randomQuotes/index.html b/assignments/events/3. randomQuotes/index.html index 3b854bd..065b964 100755 --- a/assignments/events/3. randomQuotes/index.html +++ b/assignments/events/3. randomQuotes/index.html @@ -8,6 +8,10 @@ +
    +

    + +
    \ No newline at end of file diff --git a/assignments/events/3. randomQuotes/main.js b/assignments/events/3. randomQuotes/main.js index 8686458..1b9517e 100755 --- a/assignments/events/3. randomQuotes/main.js +++ b/assignments/events/3. randomQuotes/main.js @@ -2,6 +2,19 @@ var quotes; // Write your code here +//target +const change = document.querySelector("body"); + +//callback function +function quoteMaker(){ + let quotereturn = document.body; + quotereturn.textContent = quotePicker(); + + return quotereturn; +} + +function quotePicker(){ + quotes = [ @@ -314,3 +327,16 @@ quotes = [ "quoteText": "Great talent finds happiness in execution." } ]; + + + + +let index = Math.floor(Math.random()*(quotes.length-1)); + + return quotes[index].quoteAuthor +':'+ quotes[index].quoteText; + +} + + +//adding event +change.addEventListener('keydown',quoteMaker); \ No newline at end of file diff --git a/assignments/events/4. mouseMove/index.html b/assignments/events/4. mouseMove/index.html index e69de29..0de924f 100644 --- a/assignments/events/4. mouseMove/index.html +++ b/assignments/events/4. mouseMove/index.html @@ -0,0 +1,30 @@ + + + + + + Mouse Move + + + +
    +

    Mouse Move Cursor

    + +
    + + + \ No newline at end of file