Giter VIP home page Giter VIP logo

dom-manipulation-exercises'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

CODE:

document.querySelector(".side-bar .crayons-card .crayons-subtitle-2").innerHTML="Shakya";
document.querySelector(".side-bar .crayons-card .color-base-70").innerHTML="I Write Code";

Output

Output

  1. Website Name: Apple

Task

Store

Fetch all the product name and store in an array

CODE:

let mainDiv=document.querySelectorAll(".row .as-imagegrid-item a .as-imagegrid-item-title");
let storedArray=[];
for(let i=0;i<mainDiv.length;i++){
    storedArray.push(mainDiv[i].textContent.split(" ")[0]);
}
console.log(storedArray);

Output

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

  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

CODE:

let newNavItem=document.createElement("section");
newNavItem.classList.add("parent");
let newHeader=document.createElement("h3");
newHeader.textContent="My New FAQ";
newNavItem.appendChild(newHeader);
document.querySelector(".accordion-homepage").appendChild(newNavItem);

Output

Output

  1. Webiste Name: OnePlus

Topics

 Query Selector, InnerText

Sample Image

Sample One

Tasks

  Change the contact number

CODE:

document.querySelector(".customer-support .one-tel-number").innerText="+91 6366256689";

Output

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

CODE:

let buttons=document.querySelectorAll(".swiper-wrapper .feature-column-carousel__item .feature-column-carousel__feature .feature-column-carousel__content .feature-column-carousel__button .cta--contained");
for(btn of buttons){
    btn.innerText="Check Out";
}

Output

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.

CODE:

let el=document.querySelector(".searchinput-wrapper___18TsX form .searchinput___zXLAR");
el.addEventListener("mouseover",()=>{
    el.style.backgroundColor="red";
});
el.addEventListener("mouseout",()=>el.style.backgroundColor="#CAD5E2");

Output

Output

  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

CODE:

function search(val) {
  let input = document.querySelector("#top-nav-search-input");
  input.value = val;
  let form = document.querySelector("#top-nav-search-form");
  form.submit();
}
let userInput=prompt("Enter the keyword you want to search");
search(userInput);

Output

Output

  1. Webiste Name: Google

Topics

   Remove Elements

Sample Image

Sample One

Tasks

 Remove alternate languages from the home page languages listed

CODE:

let languages=document.querySelectorAll("#SIvCob a");
for(let i=0;i<languages.length;i++){
    if(i%2===0)
        languages[i].remove();
}

Output

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.

CODE:

document.querySelector(".display-heading-1").style.color="#b1361e";
document.querySelector(".display-heading-1").style.fontFamily="monospace";

Output

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

CODE:

let btn=document.querySelector(".btn-cta-big .login-btn-text");
btn.addEventListener("mouseover",()=>btn.style.backgroundColor="red");

Output

Output

  1. Webiste Name: realme

Topics

   querySelector,style,background-image

Sample Image

Sample One

Tasks

change the realme logo to ineuron logo

CODE:

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

Output

Output

  1. Webiste Name: Github

Topics

   querySelector,style,background-Color

Sample Image

Sample One

Tasks

 change the background colour of the button to blue.

CODE:

document.querySelector(".f4 a").style.backgroundColor="blue"

Output

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“.

CODE:

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

Output

Output

  1. Webiste Name: Asus

Topics

  querySelector,style,font-size

Sample Image

Sample One

Tasks

   change the fontsize of “Hot Deals” to 80px

CODE:

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

Output

Output

  1. Webiste Name: Dell

Topics

  querySelector,style.textAlign

Sample Image

Sample One

Tasks

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

CODE:

const texts= document.querySelectorAll(".ps-title");
texts.forEach((text)=>{text.style.textAlign = "right";});

Output

Output

  1. Webiste Name: Vercel

Topics

 querySelector,innerHTMl

Sample Image

Sample One

Tasks

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

CODE:

document.querySelector(".section-title_title__VEDfK").innerText="Start with Scratch";

Output

Output

  1. Webiste Name: Sony

Topics

querySelector,innerHTMl

Sample Image

Sample One

Tasks

 change the button text To current Date.

CODE:

const date = new Date();
document.querySelector('.btn-container').textContent = date;

Output

Output

  1. Webiste Name: Philips

Topics

 querySelector,style,backgroundcolor

Sample Image

Sample One

Tasks

change the background colour blue to orange

CODE:

document.querySelector(".p-footer").style.backgroundColor="orange";

Output

Output

  1. Webiste Name: Canon

Topics

      querySelector,src

Sample Image

Sample One

Tasks

extract the canon logo

CODE:

console.log(document.querySelector(".navbar-brand img").src)

Output

Output

  1. Webiste Name: Oppo

Topics

      querySelector,style,color

Sample Image

Sample One

Tasks

  Change the description colour black to orange

CODE:

document.querySelectorAll(".desc").forEach((el)=>el.style.color="orange");

Output

Output

dom-manipulation-exercises's People

Contributors

shakya7 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.