Bootcamp
Searchโฆ
1.ICE.1.0: Drawing DOM
Introduction
Let's practise drawing HTML elements using DOM code.
Base
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.
Refer to these pages on capturing keyboard events:
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Valuesโ
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.
Last modified 27d ago