Skip to content

Latest commit

 

History

History

lab-6-en

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.MD
README.MD
 
 

README.MD

Lab 6 - [JS] - DOM

Content

🦉 Intro

DOM (Document Object Model) is an Application Programming Interface (API) which defines a HTML, XHTML or XML document as a tree structure where each node is an object representing a part of the document. The objects can be programmatically manipulated via DOM functions, and any changes after executing them will be visible in the document display.

🎢 Exercises

💪 Exercise 6.1

Hack Google

  • Navigate to google.com in Chrome or Firefox browser and open Dev Tools console: Cmd-Opt-I (Mac), Ctrl-Shift-I (Windows).
  • Find the Google logo and store it into a variable using the DOM access methods.
  • Update the image source (the URL) to make the Yahoo logo to appear. You can search by the logo URL using a search engine.
  • Find the Google search button and store it into a variable.
  • Update the text of the button to be "Yahoo".

💪 Exercise 6.2

All the websites should have a section named "About us"

  • Create a HTML document (aboutme.html) with the below template being included into <body>:
<h1>About Me</h1>
<dl>
  <dt>Nickname:</dt>
  <dd id="nickname"></dd>
  <dt>Age:</dt>
  <dd id="age"></dd>
  <dt>Hometown:</dt>
  <dd id="hometown"></dd>
</dl>
  • Create a new JavaScript file named script.js and link it to the HTML document using <script> tag at the end of it.
  • Change the <body> style to have font-family: Arial, sans-serif.
  • Replace every <dd> (nickname, age, hometown) with your information.
  • Iterate through each <dt> and add the list-item class.
  • Create a CSS file (and link it to the document) with the styles needed for the list-item class to have a red text.
  • Create a new <img> element containing the src attribute which points to an image with you. Add this element to the page.

💪 Exercise 6.3

My IMDB

  • Create a HTML document (movies.html) with "My favorite movies:" title, using the <h1> tag.
  • Create a JavaScript file named script.js and link it to the HTML document using <script>tag at the end of it.
  • Create an array of objects containing information about the favorite movies. The object should include the following properties: title (string), duration (number), actors (array of strings) and a boolean property indicating if the movie was viewed or not.
  • Iterate through the array and dynamically create in the page (using document.createElement) for each object a <p> element containing the title of the movie.

🎁 Exercise 6.4

  • Use <ul>, <li> and <article> to display the movies, along with other information about them.
  • For each object in the array, add a new property representing the image of the movie and display it to the page.
  • Add Yes or No to differentiate the seen vs. unseen movies from the list.

The markup should resemble this:

<ul>
  <li>
    <article>
      <h2>Title:</h2>
      <p>Movie Title 1</p>

      <h2>Duration:</h2>
      <p>120 minutes</p>

      <h2>Actors:</h2>
      <ul>
        <li>Actor 1</li>
        <li>Actor 2</li>
        <li>Actor 3</li>
      </ul>

      <figure>
        <img src="movie1.jpg" alt="Movie 1 Poster">
        <figcaption>Movie 1 Poster</figcaption>
      </figure>

      <h2>Viewed:</h2>
      <p>No</p>
    </article>
  </li>

  <!-- Repeat the structure for each movie object -->
</ul>

💗 Credits

Exercises 6.1, 6.2 and 6.3/6.4 are modified versions of The Logo Hijack , About Me and The Book List originally found on teaching-materials.org. For additional exercises similar to this, please visit teaching-materials.org.