Happy first day of Spring! 🌸🌱🌼 I have looked up the history of Easter eggs to figure out why we color eggs during Easter. Overall, the tradition of Easter eggs reflects a blend of Christian symbolism, pagan customs, and cultural practices, embodying themes of new life, renewal, and celebration associated with the Easter holiday. So, where does the Easter bunny come from? According to ancient origins, the concept of a rabbit or hare as a symbol of fertility and springtime dates back to ancient civilizations. Rabbits are prolific breeders, and their association with fertility made them a natural symbol for spring festivals celebrating new life and rebirth. Also, the spring equinox, also known as the vernal equinox, marks the moment when the sun crosses the celestial equator from south to north, signaling the start of Spring in the Northern Hemisphere. During the equinox, day and night are approximately equal in length worldwide.
Yes, I spent fifteen minutes looking up Spring. Even though Autumn is my favorite season, Spring is a close second favorite of mine.
Tommy was out sick yesterday. We spent the day indoors, watching YouTube and playing video games. I’ve gotten back into playing Animal Crossing. I haven’t been to my island in so long, and after four years, I am still building it up. I am thinking of playing Skyrim sometime. I haven’t played that either in a while. I still need to finish the game.
I started writing a number sorter code in JavaScript. So far, it’s pretty straightforward. I wrote a few nested for loops, and I’m confused about how they perform. From my readings, nested for loops are a common programming construct used to iterate over multiple data dimensions. They involve one loop nested within another, allowing you to iterate over elements in a two-dimensional (or higher-dimensional) array, grid, or data collection with multiple levels. I need to find a video that shows this. It would be easier to visualize the process.
Sometime, I want to collect all my Alaska ephemera and put it in a notebook—kind of like a scrapbook. I’m nervous. I have yet to scrapbook since my oldest was in elementary school.
Tommy’s desk has one of those oversized mousepads with a world map on it. I often find myself staring at the mousepad, zoning out, and lifting up the keyboard so I can see all the countries. It has time zones, too, so I find myself busy looking at different time zones.
JavaScript notes…
———————————–
Number Sorter steps 1 – 20
Step 1
In this project, you will be building a number sorter. The HTML and CSS have been provided for you. Feel free to explore them.
When you are ready, declare a sortButton variable and assign it the value of .getElementById() with the argument sort.
const sortButton = document.getElementById('sort');
Step 2
To prepare your project’s logic, use const and arrow syntax to declare a sortInputArray function. It should take a single event parameter.
const sortInputArray = (event) => {
}
Step 3
You will be using this as an event listener for the sortButton. Because buttons associated with a form element submit by default, you need to prevent that behavior. Call event.preventDefault() in your function to do this.
const sortInputArray = (event) => {
event.preventDefault();
}
Step 4
To test your code as you write it, mount an event listener to your sortButton element. It should listen for the click event, and take sortInputArray as the callback.
sortButton.addEventListener('click', sortInputArray)
Step 5
Back in your sortInputArray function, you need to get the values from your select elements. Since they all have the class values-dropdown, you can query them all at once.
Use document.getElementsByClassName() to get all the elements with the class values-dropdown. Assign that to an inputValues variable.
const sortInputArray = (event) => {
event.preventDefault();
const inputValues = document.getElementsByClassName('values-dropdown');
}
Step 6
Remember that .getElementsByClassName() returns an array-like object. You can use the spread operator to convert it into an array.
Convert the document.getElementsByClassName() call to an array with the spread operator and assign it to a variable called inputValues.
const sortInputArray = (event) => {
event.preventDefault();
const inputValues = [...document.getElementsByClassName("values-dropdown")];
}
Step 7
You need to get the values from your select elements. However, these values are strings, and you need them to be numbers.
Since you have an array, you can use the map method to convert each value to a number. Do this by passing a callback function to map that takes a dropdown parameter and returns Number(dropdown.value).
const sortInputArray = (event) => {
event.preventDefault();
const inputValues = [...document.getElementsByClassName("values-dropdown")].map((dropdown) => Number(dropdown.value));
}
Step 8
You need a function to update the display with the sorted numbers. Start by using arrow syntax to declare an updateUI function that takes a single array parameter.
Because you will be writing algorithms that won’t immediately have a return value, set a fallback value for array to be an empty array. Here is an example of a function that has a fallback value:
const myFunction = (string = “”) => {
}
const updateUI = (array = []) => {
}
Step 9
To perform an action on each element in the array, use the method that is meant for iterating over arrays.
Use the forEach() method, and pass it an empty callback which takes num and i as the parameters.
const updateUI = (array = []) => {
array.forEach((num, i) => {
})
}
Step 10
Create a variable named outputValueNode and set its value to the result of calling the document.getElementById() method. Use template literal syntax to pass in the output-value-${i} string to .getElementById().
const updateUI = (array = []) => {
array.forEach((num, i) => {
const outputValueNode = document.getElementById(`output-value-${i}`)
})
}
Step 11
Set the innerText property of outputValueNode to num.
const updateUI = (array = []) => {
array.forEach((num, i) => {
const outputValueNode = document.getElementById(`output-value-${i}`);
outputValueNode.innerText = num;
})
}
Step 12
In your sortInputArray() function, call your updateUI() function and pass inputValues as the argument.
You should now be able to click the Sort button and see the inputted array in the Output section.
updateUI(inputValues);
Step 13
Now you need to actually sort the array. The first sorting algorithm you will implement is the bubble sort, which starts at the beginning of the array and ‘bubbles up’ unsorted values towards the end, iterating through the array until it is completely sorted.
Begin by declaring a bubbleSort variable and assigning it an arrow function that takes an array parameter.
const bubbleSort = (array) => {
}
Step 14
You’ll need to iterate through the array. For simplicity, use a for loop to do so.
const bubbleSort = (array) => {
for (let i = 0; i < array.length; i++) {
}
}
Step 15
Because you need to compare elements, you'll need to use a nested for loop. This loop should iterate through every element in the array except the last one. Use j as your inner loop's iterator variable.
const bubbleSort = (array) => {
for (let i = 0; i < array.length; i++) {
for (let j = 0; j < array.length - 1; j++) {
}
}
}
Step 16
For debugging purposes, add a console.log() call in your inner loop. Pass it the arguments array, array[j], and array[j+1].
const bubbleSort = (array) => {
for (let i = 0; i < array.length; i++) {
for (let j = 0; j < array.length - 1; j++) {
console.log(array, array[j], array[j+1]);
}
}
}
Step 17
In your sortInputArray() function, declare a sortedValues variable. Assign it the value of calling bubbleSort with your inputValues array.
Then, update your updateUI call to pass sortedValues as the argument.
const sortedValues = bubbleSort(inputValues); updateUI(sortedValues);
Step 18
To achieve the "bubble up" result, you need to check if the current element is larger than the next element. You can do this by accessing the array at j and j+1.
Create an if condition that checks if the current element is larger than the next element.
if (array[j] > array[j+1]) {
}
Step 19
When your if condition is true, you need to swap the two elements, "bubbling" the larger element up toward the end of the array.
To do this, declare a temp variable and assign it the value of array[j]. Then assign array[j] the value of array[j + 1]. Finally, assign array[j + 1] the value of temp.
if (array[j] > array[j + 1]) {
const temp = array[j];
array[j] = array[j + 1];
array[j+1] = temp;
}
Step 20
Finally, after your outer loop has finished executing, return the sorted array.
return array;
