diff --git a/assignments/DOM Basics/01/index.html b/assignments/DOM Basics/01/index.html index aaf6993..af58bf7 100644 --- a/assignments/DOM Basics/01/index.html +++ b/assignments/DOM Basics/01/index.html @@ -9,8 +9,9 @@

Document Object Model

- diff --git a/assignments/DOM Basics/01/test.js b/assignments/DOM Basics/01/test.js new file mode 100644 index 0000000..b384ea7 --- /dev/null +++ b/assignments/DOM Basics/01/test.js @@ -0,0 +1,29 @@ + +let newElem = document.body; +let newP = document.createElement("p"); +newP.textContent = 'Hello Javascript!'; +newP.innerHTML = "I love Javascript" +newElem.append(newP); + +let ulList = document.createElement("ul"); +ulList.className = 'ullist'; + +let ullist = document.querySelector(".ullist"); +ulList.innerHTML= "
  • Buy groceries
  • Feed the cat
  • Do laundry
    • "; +document.body.append(ulList); + +let newList = document.createElement("li"); +newList.textContent= "make food" +ulList.appendChild(newList); + +ulList.removeChild(newList); + +// ulList.firstElementChild.remove() // will remove buy grocerries + +// ulList.lastElementChild.remove()// will remove last element child + +// ulList.firstChild.remove() // willremove buy groceeries + +ulList.firstChild.nextSibling.nextSibling.remove() // will remove 3rd child element + + diff --git a/assignments/DOM Basics/02/index.html b/assignments/DOM Basics/02/index.html index 818b326..aa557d0 100644 --- a/assignments/DOM Basics/02/index.html +++ b/assignments/DOM Basics/02/index.html @@ -47,6 +47,44 @@

    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..3f3a7c8 100644 --- a/assignments/DOM Basics/03/index.html +++ b/assignments/DOM Basics/03/index.html @@ -38,6 +38,37 @@

    Types of Sharks

    const h1 = document.getElementsByTagName("h1")[0]; const p = document.getElementsByTagName("p")[0]; const ul = document.getElementsByTagName("ul")[0]; - // Your code goes here + // // Your code goes here + + ////////////////1///////////////// + ul.firstElementChild.style.color = "green"; + + ////////////////////////2//////////////////// + + let list= document.querySelectorAll("li") + list.forEach(elem => {elem.style.color= "blue"}); + + /////////////////////3////////////////////////// + + let lilist = document.querySelectorAll("li"); + let lilist_item = lilist.length; + lilist[lilist_item-1].style.color = "red" + + //////////////4/////////////////////// + + let lilist1 = document.querySelectorAll("li"); + let lilist_item1 = lilist1.length; + lilist1[lilist_item1-2].style.color = "orange" + + ////////////////5///////////////////////// + + + ul.firstElementChild.style.backgroundColor = "coral" + ul.lastElementChild.style.backgroundColor= "aquamarine" + + + + + diff --git a/assignments/DOM Basics/04/index.html b/assignments/DOM Basics/04/index.html index e244ce1..3b9df97 100644 --- a/assignments/DOM Basics/04/index.html +++ b/assignments/DOM Basics/04/index.html @@ -12,5 +12,18 @@

    About Me

  • Favorites:
  • Hometown:
    • + diff --git a/assignments/events/1. Practice/index.js b/assignments/events/1. Practice/index.js index cf4d4e5..77369d1 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 container = document.getElementById("container"); //Select the section with an id of container using querySelector. - +let container1 = document.querySelector("#container"); //Select all of the list items with a class of "second". - +let second = document.getElementsByClassName("second"); +document.querySelectorAll(".second"); //Select a list item with a class of third, but only the list item inside of the ol tag. +let orderlist = document.querySelector("ol"); +orderlist.getElementsByClassName("third"); //Give the section with an id of container the text "Hello!". - +// container.innerText= "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.innerText= "four"; //Append the li to the ul element. - +document.querySelector("ul").append(newli); //Loop over all of the list inside the ol tag and give them a background color of "green". +document.querySelectorAll("ol").forEach(elem => elem.style.backgroundColor= "green"); - -//Remove the div with a class of footer. \ No newline at end of file +//Remove the div with a class of footer. +document.querySelector(".footer").remove(); diff --git a/assignments/events/2. backgroundChange/index.html b/assignments/events/2. backgroundChange/index.html index de6b110..737cda8 100755 --- a/assignments/events/2. backgroundChange/index.html +++ b/assignments/events/2. backgroundChange/index.html @@ -8,6 +8,13 @@ +

    Welcome to website

    +
    + +
    + + + \ No newline at end of file diff --git a/assignments/events/2. backgroundChange/main.css b/assignments/events/2. backgroundChange/main.css index e69de29..9961614 100755 --- a/assignments/events/2. backgroundChange/main.css +++ b/assignments/events/2. backgroundChange/main.css @@ -0,0 +1,9 @@ +h1 { + font-size: 100px; + text-align: center; + +} +.btn { + display: block; + text-align: center; +} diff --git a/assignments/events/2. backgroundChange/main.js b/assignments/events/2. backgroundChange/main.js index e69de29..61542c7 100755 --- a/assignments/events/2. backgroundChange/main.js +++ b/assignments/events/2. backgroundChange/main.js @@ -0,0 +1,29 @@ +let clickbackground = document.body; +function backgroundColor() { + clickbackground.style.background= "red"; + console.log("done"); + +} +clickbackground.addEventListener('click', backgroundColor); + + +////////////////////////////////////////////////////////////////////// + +let getColor = function () { + let color = "#"; + let values = "ABCDEF0123456789".split(""); + + for (let i = 0; i<6; i++) { + + let randomNum = Math.floor(Math.random() * 16);; + color = color + values[randomNum]; + + } + return color; + } + + + document.addEventListener("click", () => { + document.body.style.backgroundColor = getColor(); + }); + diff --git a/assignments/events/3. randomQuotes/index.html b/assignments/events/3. randomQuotes/index.html index 3b854bd..a5e3423 100755 --- a/assignments/events/3. randomQuotes/index.html +++ b/assignments/events/3. randomQuotes/index.html @@ -1,4 +1,4 @@ - + @@ -8,6 +8,28 @@ +
    +

    Quotes

    +
    +
    +
    +

    + coding is art +

    +

    + +

    +
    + +
    + + + \ No newline at end of file diff --git a/assignments/events/3. randomQuotes/main.css b/assignments/events/3. randomQuotes/main.css index e69de29..e0dae97 100755 --- a/assignments/events/3. randomQuotes/main.css +++ b/assignments/events/3. randomQuotes/main.css @@ -0,0 +1,34 @@ +.header { + text-align: center; + /* padding-bottom: 50px ; */ + /* background-color: aqua; */ +} +.heading { + padding: 50px 0; + background-color: aqua; +} + +.subHeading { + border: 2px solid black; + text-align: center; + height: 100px; +} + +.para { + border: 2px solid black; + text-align: center; + margin: 50px 0; + height: 50px; +} + +.container { + max-width: 1000px; + margin: 0 auto; +} +.footersection { + background-color: aqua; + padding: 50px 0; +} +.btnpos{ + text-align: center; +} \ No newline at end of file diff --git a/assignments/events/3. randomQuotes/main.js b/assignments/events/3. randomQuotes/main.js index 8686458..b459d50 100755 --- a/assignments/events/3. randomQuotes/main.js +++ b/assignments/events/3. randomQuotes/main.js @@ -3,6 +3,43 @@ var quotes; // Write your code here +function getRandomNumber() { + return Math.floor(Math.random()*77); +} + +function getRandomAuthor() { + let authorQuote = quotes.map(elem => {return elem.quoteAuthor}); + let randomAuthor = getRandomNumber(); + let authorGenerated = authorQuote[randomAuthor]; + return authorGenerated; +} + +function getRandomQuote() { + let textQuote = quotes.map( elem => {return elem.quoteText}); + // let authorQuote = quotes.map(elem => {return elem.quoteAuthor}) + let randomQuote= getRandomNumber(); + let quoteGenerated = textQuote[randomQuote]; + return quoteGenerated; +} + +function handleEvent(event) { + console.log(handleEvent) + if(event.keyCode == 32) { + let subHeading= document.querySelector(".subHeading"); + subHeading.innerText = getRandomQuote(); + + let para= document.querySelector(".para"); + para.innerHTML= getRandomAuthor(); + + } +} + + +document.addEventListener("keyup", handleEvent) + + + + quotes = [ { diff --git a/assignments/events/3. randomQuotes/todo.md b/assignments/events/3. randomQuotes/todo.md index 72fa51d..1eb56ea 100644 --- a/assignments/events/3. randomQuotes/todo.md +++ b/assignments/events/3. randomQuotes/todo.md @@ -3,3 +3,4 @@ 1. Make a website where you display quotes form the quotes array in `main.js`. 2. When you press `space` key the quote should change. 3. Make the quote change random. + diff --git a/assignments/events/4. mouseMove/index.html b/assignments/events/4. mouseMove/index.html index e69de29..0be9a1e 100644 --- a/assignments/events/4. mouseMove/index.html +++ b/assignments/events/4. mouseMove/index.html @@ -0,0 +1,55 @@ + + + + + + Document + + + + +
    +

    + Move Mouse Cursor +

    + +
    + + + \ No newline at end of file diff --git a/assignments/events/4. mouseMove/style.css b/assignments/events/4. mouseMove/style.css new file mode 100644 index 0000000..272572b --- /dev/null +++ b/assignments/events/4. mouseMove/style.css @@ -0,0 +1,72 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* custom design */ + +.container { + max-width: 600px; + margin: 0 auto; + + border: 10px solid green; + height: 500px; +} +.content { + padding: 50px 25px; +} + +.header { + font-size: 50px; + margin: 25px 0; +} + +.para { + font-size: 25px; + padding: 10px 0; +} + diff --git a/assignments/events/4. mouseMove/test.js b/assignments/events/4. mouseMove/test.js new file mode 100644 index 0000000..e69de29