Git Product home page Git Product logo

dom's Introduction

Dom Manipulation Assignment

  1. Webiste Name: Dev To

Topics

- Query Selctory, Inner HTML

Sample Image

Sample One

Tasks

    Target the Top description div and change the DEV Community to <Your_Name> and description to your passion 

document.querySelector(".side-bar .crayons-card .crayons-subtitle-2 ").innerHTML = "Rohan Malo"

document.querySelector(".side-bar .crayons-card .color-base-70 ").innerHTML = "building awesome staff with code"

Output

Output

  1. Website Name: Apple

Task

Store

Fetch all the product name and store in an array

let arr = []

for (let i = 0; i < 7; i++) {
    arr.push(document.querySelectorAll(".as-imagegrid-item-title")[i].innerText.splt("\n")[0])
     }

// Using for in loop

Output

['iPhone', 'Mac', 'iPad', 'Watch', 'AirPods', 'Music', 'TV']

Store

  1. Webiste Name: Youtube Support

Topics

- Get Element By Id, Create Element, Create Text Node, Append Child

Sample Image

Sample One

Tasks

 Add another FAQ 'My New FAQ' to the list

Output

let list = document.querySelector(".article .accordion-homepage")
​
newEle = document.createElement("section")
​
newEle.textContent = "New item added by Rohan"
​
list.append(newEle)

newEle.className = "parent"

Output

  1. Webiste Name: OnePlus

Topics

 Query Selector, InnerText

Sample Image

Sample One

Tasks

  Change the contact number

Output

 document.querySelector(".one-tel-number ").innerText = "+91 6289038527"

Output

  1. Webiste Name: Samsung

Topics

   getElementById, createElement, InnerText, append, setAttribute

Sample Image

Sample One

Tasks

 Target the main div of card and change the Button text to Check out

Output

document.querySelector(".diwali-deals-product-sale-btn").innerText = "Check Out"

Output

  1. Webiste Name: Adidas

Topics

-   Query Selector, Event listeners, Changing Styles

Sample Image

Sample One

Tasks

 Target the search box and on hover change thebackground color to red.

Output

let search = document.querySelector(".searchinput___19uW0")

search.addEventListener('mouseover', () => { search.style.background = "red" });

Sample One

  1. Webiste Name: MDN Web Docs

Topics

   Form, Value, Submit

Sample Image

Sample One

Tasks

 To Search a topic in the MDN Search bar.
 First add a text to search in the search bar and then hit the submit search button to search the docs using DOM

Output

let search = document.querySelector('#top-nav-search-input')

search.value = "CSS Selector"

document.querySelector('.search-form').submit()

Output

  1. Webiste Name: Google

Topics

   Remove Elements

Sample Image

Sample One

Tasks

 Remove alternate languages from the home page languages listed

Output

let lang = document.querySelector('#SIvCob').children

for(ele in lang){
     if( ele % 2 === 0 ){
          lang[ele].remove()
     }
}

Output

  1. Webiste Name: Code Wars

Topics

   Change Font Family, Color of Text.

Sample Image

Sample One

Tasks

Change the font family of the text to monospace and text color to the logo’s background color.

Output

let str = document.querySelector('.display-heading-1')

str.style.fontFamily = "monospace"

str.style.color = "#AB341D"

Output

  1. Webiste Name: Freecodecamp

Topics

   querySelector, mouseover, click eventListener,  callback function, style,

Sample Image

Sample One

Tasks

Target the button and change background colour on mouseover

Output

let str = document.querySelector('.btn-cta-big .login-btn-text')

str.addEventListener("mouseover", () => { str.style.background = "red" } )

Output

  1. Webiste Name: realme

Topics

   querySelector,style,background-image

Sample Image

Sample One

Tasks

change the realme logo to ineuron logo

Output

document.querySelector('.icon-logo').style.backgroundImage = "url('https://ineuron.ai/images/ineuron-logo.png')"

Output

  1. Webiste Name: Github

Topics

   querySelector,style,background-Color

Sample Image

Sample One

Tasks

 change the background colour of the button to blue.

Output

document.querySelector('.btn').style.background = "blue"

Output

  1. Webiste Name: Hackerrank

Topics

   querySelector,innerHtml

Sample Image

Sample One

Tasks

Target the top description and change “Matching developers with great companies” to ‘JSBOOTCAMP“.

Output

document.querySelector('.fl-heading-text').innerHTML = "JSBOOTCAMP"

Output

  1. Webiste Name: Asus

Topics

  querySelector,style,font-size

Sample Image

Sample One

Tasks

   change the fontsize of “Hot Deals” to 80px

Output

document.querySelector('.HotDealsAll__Heading__2fIbe').style.fontSize = "80px"

Output

  1. Webiste Name: Dell

Topics

  querySelector,style.textAlign

Sample Image

Sample One

Tasks

   Convert the text “G15 Gaming Laptop” from left to right

Output

document.querySelector('.ps-title a').style.float = "right"

Output

  1. Webiste Name: Vercel

Topics

 querySelector,innerHTMl

Sample Image

Sample One

Tasks

  change the heading “Start with the developer” to “Start with Scratch”

Output

document.querySelector('.section-title_title__VEDfK').innerHTML = "Start with Scratch"

Output

  1. Webiste Name: Sony

Topics

querySelector,innerHTMl

Sample Image

Sample One

Tasks

 change the button text To current Date.

Output

let date = new Date()

document.querySelector('.btn-container').innerHTML = date

Output

  1. Webiste Name: Philips

Topics

 querySelector,style,backgroundcolor

Sample Image

Sample One

Tasks

change the background colour blue to orange

Output

document.querySelector('.p-f03-footer-container ').style.background = "#E8BD0D"

Output

  1. Webiste Name: Canon

Topics

      querySelector,src

Sample Image

Sample One

Tasks

extract the canon logo

Output

document.querySelector('.logo').src

Output

  1. Webiste Name: Oppo

Topics

      querySelector,style,color

Sample Image

Sample One

Tasks

  Change the description colour black to orange

Output

document.querySelector('.desc').style.color = "orange"

Output

dom's People

Contributors

reo127 avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.