In our binary project, my main role was to be working on the frontend and making the website look better. Soham and I were both working on the music to binary, so my role was to make all the buttons display and make sure each program was shown under its title. I also worked on the logic of the features a little bit.
Some of the things I added was the black background and the rectangles with circular edges, which have a white border around them to make them stand out. I then highlighted the titles in a similar shape but with green fill color. Lastly, I moved each feature under its appropriate title. All of this was the final frontend change, as for the past I used a more simple, blue background. I was mainly focused on making the buttons display and making sure they work as intended.
Here are some key terms or functions that were common in the code:
Event Handling: JavaScript listens for user interactions like button clicks (addEventListener) to trigger functions or actions within the webpage without reloading the entire page.
Functionality Implementation: Functions in JS enable the implementation of specific features, such as playing audio (playAudio), creating delays (delay), and handling user inputs for various conversions (binary, ASCII) into corresponding visual or auditory outputs.
Dynamic Page Updates: JavaScript interacts with the DOM to frequently update the webpage's appaerance or content based on user inputs or actions. Elements are created, modified, or removed dynamically in response to these events.
Data Management: Variables (var, const) store different types of data. Arrays (music_sequence, color_frequency) manage and organize multiple values, such as storing color sequences or tracking the frequency of user-selected colors.
Conditional Display Logic: The use of if statements allows the webpage to decide when and how to display or play certain content. It helps determine conditions, such as when to play specific audio files based on color frequency or user inputs.
Looping through User Inputs: Loops (for) are utilized to iterate through user input sequences (binary, ASCII), enabling the application to process each character or digit and translate it into corresponding visual representations or audio outputs.
Handling Asynchronous Operations: The use of async and await assists in managing asynchronous tasks, ensuring that audio files play sequentially without interrupting each other or the user experience.
Manipulating Visual Elements: JavaScript dynamically alters the visual elements of the webpage by modifying styles (style.backgroundColor) or adding new elements (appendChild), allowing for real-time updates based on user actions.
Time-Based Actions: Timeouts (setTimeout) are applied to introduce delays between audio snippets, ensuring a better user experience by controlling the timing of sound playback.
String Processing: Methods like charAt, toString, and padStart enable the handling and manipulation of strings, particularly in converting user inputs (binary, ASCII) to formats suitable for visual or audio outputs.
Some issues or errors me and Soham faced was making the easter eggs work (look on Soham review to learn about them) and making them play after a certain number of times. We fixed this by adding a if statement and setting it to play a different audio if red or yellow were put in more than or equal to 7 times. Another error was moving the features under their titles, as they would just display to the right of the title. I fixed this by moving the display code of the features under the title containers.
I had a lot of fun working on this project as it related to music. I feel like I want to code more logic next time and not focus on the frontend too much. Be sure to check out my other groups as well!
In our binary project, my main role was to be working on the frontend and making the website look better. Soham and I were both working on the music to binary, so my role was to make all the buttons display and make sure each program was shown under its title. I also worked on the logic of the features a little bit.
Some of the things I added was the black background and the rectangles with circular edges, which have a white border around them to make them stand out. I then highlighted the titles in a similar shape but with green fill color. Lastly, I moved each feature under its appropriate title. All of this was the final frontend change, as for the past I used a more simple, blue background. I was mainly focused on making the buttons display and making sure they work as intended.
Here are some key terms or functions that were common in the code:
Event Handling: JavaScript listens for user interactions like button clicks (addEventListener) to trigger functions or actions within the webpage without reloading the entire page.
Functionality Implementation: Functions in JS enable the implementation of specific features, such as playing audio (playAudio), creating delays (delay), and handling user inputs for various conversions (binary, ASCII) into corresponding visual or auditory outputs.
Dynamic Page Updates: JavaScript interacts with the DOM to frequently update the webpage's appaerance or content based on user inputs or actions. Elements are created, modified, or removed dynamically in response to these events.
Data Management: Variables (var, const) store different types of data. Arrays (music_sequence, color_frequency) manage and organize multiple values, such as storing color sequences or tracking the frequency of user-selected colors.
Conditional Display Logic: The use of if statements allows the webpage to decide when and how to display or play certain content. It helps determine conditions, such as when to play specific audio files based on color frequency or user inputs.
Looping through User Inputs: Loops (for) are utilized to iterate through user input sequences (binary, ASCII), enabling the application to process each character or digit and translate it into corresponding visual representations or audio outputs.
Handling Asynchronous Operations: The use of async and await assists in managing asynchronous tasks, ensuring that audio files play sequentially without interrupting each other or the user experience.
Manipulating Visual Elements: JavaScript dynamically alters the visual elements of the webpage by modifying styles (style.backgroundColor) or adding new elements (appendChild), allowing for real-time updates based on user actions.
Time-Based Actions: Timeouts (setTimeout) are applied to introduce delays between audio snippets, ensuring a better user experience by controlling the timing of sound playback.
String Processing: Methods like charAt, toString, and padStart enable the handling and manipulation of strings, particularly in converting user inputs (binary, ASCII) to formats suitable for visual or audio outputs.
Some issues or errors me and Soham faced was making the easter eggs work (look on Soham review to learn about them) and making them play after a certain number of times. We fixed this by adding a if statement and setting it to play a different audio if red or yellow were put in more than or equal to 7 times. Another error was moving the features under their titles, as they would just display to the right of the title. I fixed this by moving the display code of the features under the title containers.
I had a lot of fun working on this project as it related to music. I feel like I want to code more logic next time and not focus on the frontend too much. Be sure to check out my other groups as well!
Video: https://www.loom.com/share/071b1246ab734a8a893e274a6733dc66