Abhijeet03s/DOM-Assignment

Basic DOM-manipulation assignments - FS-JS Batch

Dom Manipulation Assignment

1. Webiste Name: Dev To

Topics

- Query Selctory, Inner HTML

Sample Image

Tasks

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

Output

My Sol:

2. Website Name: Apple

Task

Fetch all the product name and store in an array

Output

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

My Sol:

3. Webiste Name: Youtube Support

Topics

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

Sample Image

Tasks

 Add another FAQ 'My New FAQ' to the list

Output

My Sol:

4. Webiste Name: OnePlus

Topics

 Query Selector, InnerText

Sample Image

Tasks

  Change the contact number

Output

My Sol:

5. Webiste Name: Samsung

Topics

   getElementById, createElement, InnerText, append, setAttribute

Sample Image

Tasks

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

Output

My Sol:

6. Webiste Name: Adidas

Topics

-   Query Selector, Event listeners, Changing Styles

Sample Image

Tasks

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

Output

My Sol:

7. Webiste Name: MDN Web Docs

Topics

   Form, Value, Submit

Sample Image

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

My Sol:

8. Webiste Name: Google

Topics

   Remove Elements

Sample Image

Tasks

 Remove alternate languages from the home page languages listed

Output

My Sol:

9. Webiste Name: Code Wars

Topics

   Change Font Family, Color of Text.

Sample Image

Tasks

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

Output

My Sol:

10. Webiste Name: Freecodecamp

Topics

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

Sample Image

Tasks

Target the button and change background colour on mouseover

Output

My Sol:

11. Webiste Name: realme

Topics

   querySelector,style,background-image

Sample Image

Tasks

change the realme logo to ineuron logo

Output

My Sol:

12. Webiste Name: Github

Topics

   querySelector,style,background-Color

Sample Image

Tasks

 change the background colour of the button to blue.

Output

My Sol:

13. Webiste Name: Hackerrank

Topics

   querySelector,innerHtml

Sample Image

Tasks

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

Output

My Sol:

14. Webiste Name: Asus

Topics

  querySelector,style,font-size

Sample Image

Tasks

   change the fontsize of “Hot Deals” to 80px

Output

My Sol:

15. Webiste Name: Dell

Topics

  querySelector,style.textAlign

Sample Image

Tasks

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

Output

My Sol:

16. Webiste Name: Vercel

Topics

 querySelector,innerHTMl

Sample Image

Tasks

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

Output

My Sol:

17. Webiste Name: Sony

Topics

querySelector,innerHTMl

Sample Image

Tasks

 change the button text To current Date.

Output

My Sol:

18. Webiste Name: Philips

Topics

 querySelector,style,backgroundcolor

Sample Image

Tasks

change the background colour blue to orange

Output

My Sol:

19. Webiste Name: Canon

Topics

      querySelector,src

Sample Image

Tasks

extract the canon logo

Output

My Sol:

20. Webiste Name: Oppo

Topics

      querySelector,style,color

Sample Image

Tasks

  Change the description colour black to orange

Output

My Sol: