Bootcamp
Search…
1.ICE.1.0: Drawing DOM

Introduction

Let's practise drawing HTML elements using DOM code.

Base

Begin with the DOM starter code.

Emoji-Displaying Buttons

When the page loads use JavaScript to create 3 buttons on the screen. The HTML would look something like the following.
1
<div>
2
<button>😄</button>
3
<button>😎</button>
4
<button>😦</button>
5
</div>
Copied!
When the user clicks on a button use a loop within a loop to create a square emoji figure. Consider using the innerHtml method to insert HTML into a div.
Just like in the original drawing exercise you can use <br/> to create the new lines of the figure.
1
<p>
2
😄😄😄<br/>
3
😄😄😄<br/>
4
😄😄😄<br/>
5
</p>
Copied!
When the user clicks another button the current figure is erased and a new one put in its place.

Any Emoji-Displaying Buttons

Create an array of more than 3 emoji. Use this array to create a button for each emoji that performs the same functionality as above.
We may wish to use anonymous functions (functions without names) to accomplish this. For example, we could use a drawEmoji function that re-uses our code to draw emojis, that receives an emoji type as input.
1
smileEmojiButton.addEventListener('click', () => drawEmoji('😊'));
Copied!
We wrap drawEmoji inside an anonymous function because we only want drawEmoji to run when the click event happens. The following code would not work because drawEmoji would be called when the JS file loads, and not on click.
1
smileEmojiButton.addEventListener('click', drawEmoji('😊'));
Copied!

Comfortable

Variable Number of Emoji

Create a keydown event listener that determines how many emojis to print. For select keys on the keyboard, assign a number of emojis to appear. For example, we may decide "a" makes 12 emojis appear, and "b" makes 16. When a user clicks an emoji button, set the emoji type without displaying the emoji. When the user presses a key that determines a number of emoji, display that number of the selected emoji type.

Randomise

Create a randomise button that randomises the number and emoji.

Up-Down Arrows for Number of Emoji

Apply a keydown event listener to the up and down arrows. When a user presses these keys the number of emojis to display increases or decreases by one respectively.

More Comfortable

Absolute Position, Z-Index

When the user clicks an emoji button, display those emoji over or under the currently-displayed sets. If the new emoji set is bigger than another, it appears underneath. If the new emoji set is smaller than another, it appears on top. Emoji sets are top-left aligned.

Up-Down Arrows for Emoji Size

Update up-down keydown event listeners such that when the user presses these keys the emojis on screen get larger or smaller respectively.

Moves

Begin by rendering a grid of a single emoji using the DOM, with one different emoji as the first character in the grid.
When the user presses any of the arrow keys, get rid of all of the emoji elements on the screen and re-render the grid with the special emoji in a new place, according to which arrow key was pressed.
For example: The grid begins as shown above. The user presses the right arrow key. The grid reappears, but the heart is moved one place to the right.