CS253: Lab 3 Exercises

The Document Object Model

This exercise borrowed from Mark Liffiton's 2022 version of CS253.

For this set of exercises, use JsFiddle. You can write pure Javascript in the lower-left corner and HTML in the top-left corner.

Creating an Interactive Web Page

For this set of exercises, copy and paste the below HTML starter code into JsFiddle in the top-left corner. Then, do the same with the below Javascript starter code in the lower-left corner. The idea of this exercise is to write Javascript code which does 4 things:

Write Javascript code for the buttons in the HTML:
    - Add:     Adds a new <li> element to the <ul> below.
               Put a random number or random word or something
               interesting in each new <li>.
    - Delete:  Deletes the first <li> in the <ul> below.
    - Shuffle: Randomly re-orders the <li> elements in the
               <ul> below.
    - Party!:  Make something interesting happen on the page.
               (Get creative.  Go crazy.)

By the end, you will have a working, interactive web application in the lower-right hand corner of the screen. Nice job!

HTML

<html lang="en">

    <head>
        <!-- In a real page, we would have a <script> tag here
            referencing a .js file to bring the javascript into
            the page.  On JSFiddle, we just write code in the
            Javascript frame, and it's brought in automagically.
         -->
    </head>

    <body>
        <h1>
            An Interactive Page
        </h1>
        <input type="button" id="btnadd" value="Add">
        <input type="button" id="btndel" value="Delete">
        <input type="button" id="btnshuffle" value="Shuffle">
        <input type="button" id="btnparty" value="Party!">
        <!-- Write javascript code for the buttons above:
        - Add:     Adds a new <li> element to the <ul> below.
                   Put a random number or random word or something
                   interesting in each new <li>.
        - Delete:  Deletes the first <li> in the <ul> below.
        - Shuffle: Randomly re-orders the <li> elements in the
                   <ul> below.
        - Party!:  Make something interesting happen on the page.
                   (Get creative.  Go crazy.)
    
        The MDN section covering creating new elements:
        https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#creating_and_placing_new_nodes
        Refer to other assigned guides as needed.-->
        <ul id="contents"></ul>
    </body>

</html>

Javascript

// Don't forget to set up your event handlers in code
// that only runs *after* the page is loaded (i.e., the
// setup code should be triggered by the DOMContentLoaded event)
//
// *Technically* it is not required in JSFiddle.
// JSFiddle automatically wraps this in the same sort of
// DOMContentLoaded event handler I'm asking you to write here.
// I'd like you to practice writing it here regardless, though.