Write in JavaScript
1. Create a function, my_set_remove(a_set, value), to remove an entry using only ".push", ".pop" & ".length".
2. Create a function called "most_children". Pass it an array of contact information below. The function should return the contact information object from that array which has the most children.
let contacts = [
{
name: 'Alice',
children:
[
{ name: 'Bobby', age: 12 }
]
}, {
name: 'Michael',
children:
[
{ name: 'Lilly', age: 3 },
{ name: 'Sam', age: 5 }
]
}
];
3. Write a player piano. Well, a program to read a player-piano-esque input and write out the notes to be played, with the correct timing. Your piano should be able to play notes A-G, plus flats and sharps (ignore the octave, though, it's a very small piano). Each note should also say when it is to start playing and for how long it should be played (in seconds). Your program should print out a direction when each note is to start playing, and again when it ends. The output should be ordered chronologically.
Here's an example of how this might look, playing a chord of A + B, adding a C, then all stopping at once.
let my_song = [
{ note: 'A', starts_at: 0, lasts: 3 },
{ note: 'B', starts_at: 0, lasts: 3 },
{ note: 'C', starts_at: 1.5, lasts: 1.5 }
];
play_piano(my_song);
Outputs:
Play A
Play B
Wait 1.5 seconds
Play C
Wait 1.5 seconds
Release A
Release B
Release C
4. Write an HTML page that contains your name, hometown, and a list of instruments you play (or would like to learn). Use CSS inside a style tag to make your name bold and your hometown appear in a different color, with the "color" CSS class.
5. Add an empty list to a page. Using a for loop, createElement, and appendChild, add 5 items to the list, each with the loop counter as its text.
6. In a plain Javascript file, write a function that takes a "Date" parameter called "birthday". The function should figure out how many years old someone with that birthday is, then return that value. Remember that "new Date()" on its own will return the current day and time.
7. Create an HTML page that will interpret that list and display the album artwork for each song. Include the song details beneath the each image, then use CSS to style them nicely. Your page should work for any number of songs. Assume that your instructor will replace the entire song list with one of their own, in the same format, when testing your code.
let songs = [
{
title: "Getting Away with It (All Messed Up)",
artist: "James",
album: "Pleased to Meet You",
year: 2001,
art: "https://upload.wikimedia.org/wikipedia/en/2/2a/JamesPleasedToMeetYou.jpg"
},
{
title: "Renaissance Affair",
artist: "Hooverphonic",
album: "Blue Wonder Power Milk",
year: 1998,
art: "https://upload.wikimedia.org/wikipedia/en/1/17/Hooverphonic-Blue_Wonder_Power_Milk.jpg"
},
{
title: "White Nights",
artist: "Oh Land",
album: "Oh Land",
year: 2011,
art: "https://upload.wikimedia.org/wikipedia/en/6/68/Oh_Land_%28album%29.png"
}
]
In HTML
8. Place a date input element to a page and add a "change" or "blur" event listener to it. Use the listener to show the user a prompt if they enter a date in the future. The input node has a "valueAsDate" property that you can compare against "new Date()", which will give you the date and time right now. Preventing future dates from being entered at all is challenging, so instead display (or hide) an error message to the page, below the date field.
9. In the same file as question 8, copy in your birthday code from question 6. Add a button to your page that will tell you your age when clicked, assuming that the date field represents your birthday.
10. Edit your solution for question 7 to make the album art clickable. When clicked, show the details about the song. When clicked again, hide the details. To hide a DOM element, change the CSS display property with "node.style.display = 'none';". To show the node again, set the property back to an empty string.