Reflection 2

## Individual Code Contribution

For this trimester, I have made significant code contributions to the [PP-Frontend](https://github.com/APCSP-RAGS/pp-frontend) project, showcasing my learning and participation.

### JavaScript and Python Contributions

**1. [Commit Link](https://github.com/APCSP-RAGS/pp-frontend/commit/ad399ffc51026f8cfbf956a55ee747af62d8af9a)**

   - Added dynamic data loading using JavaScript Fetch API.
   - Implemented client-side data handling and rendering.
   - Worked on data validation and form submission functionality using JavaScript.
   - Specifically added input output along with the different sections of table
   
**2. [Commit Link](https://github.com/APCSP-RAGS/pp-frontend/commit/ca271e700f7cf89d2d9f2bada35a91a43e4ef6d2)**

   - Improved user interface and interaction by enhancing JavaScript functionality.
   - Collaborated with team members to optimize data processing.
   - Fixed JavaScript bugs and improved code readability.
   - Added button functionality

### GitHub Analytics Review

To substantiate my work and contributions during this trimester, I conducted a GitHub analytics review. Here are some key GitHub commits and insights:

**3. [Commit Link](https://github.com/APCSP-RAGS/pp-frontend/commit/c37a56b3e714404bae85446c376f28a84f22f281)**

   - Collaborated on a critical feature that significantly improved user experience.
   - Addressed code review feedback and ensured code quality.
   - Resolved merge conflicts promptly to maintain project progress.
   - Toggle button along with Toggle Ambient Mode button


### Challenges and Growth

Throughout this trimester, I faced challenges in terms of JavaScript debugging, collaboration, and keeping the project aligned with our goals. However, I successfully navigated these challenges, resolving issues and improving my coding skills. The GitHub analytics review provides a clear representation of my contributions and involvement in the project.

By contributing to the Frontend portion of the project, I believe I have met the teacher requirements and demonstrated my learnings effectively.

I look forward to further collaboration and learning in the next trimester.

Code 1:

</head>
<a href="../">
    <h1 style="font-size: 20; left: 2%; top: 1%; position: fixed;">>>Back</h1>
</a>
<body class="hacker-theme">
  <div class="container">
    <!-- Input section for adding a new song -->
    <div class="input-container">
      <h2>Add a New Song</h2>
      <div>
        <label for="characterInput">Character:</label>
        <input type="text" id="characterInput" placeholder="Enter Character">
      </div>
      <div>
        <label for="songNameInput">Song Name:</label>
        <input type="text" id="songNameInput" placeholder="Enter Song Name">
      </div>
      <div>
        <label for="artistInput">Artist:</label>
        <input type="text" id="artistInput" placeholder="Enter Artist">
      </div>
      <div>
        <label for="genreInput">Genre:</label>
        <input type="text" id="genreInput" placeholder="Enter Genre">
      </div>
      <div>
        <label for="lyricsInput">Lyrics:</label>
        <textarea id="lyricsInput" placeholder="Enter Lyrics"></textarea>
      </div>
      <button onclick="addSong()">Add Song</button>
    </div>

    <!-- HTML table for displaying data -->
    <div class="table-container">
      <table class="hacker-theme">
        <thead>
          <tr>
      }
    }

    // Function to add a new song
    function addSong() {
      const characterInput = document.getElementById('characterInput');
      const songNameInput = document.getElementById('songNameInput');
      const artistInput = document.getElementById('artistInput');
      const genreInput = document.getElementById('genreInput');
      const lyricsInput = document.getElementById('lyricsInput');

      const resultContainer = document.getElementById('result');

      const newRow = document.createElement('tr');
      newRow.innerHTML = `
        <td>${characterInput.value}</td>
        <td>${songNameInput.value}</td>
        <td>${artistInput.value}</td>
        <td>${genreInput.value}</td>
        <td class="lyrics">${lyricsInput.value}</td>
        <td><button onclick="toggleLyrics(this.parentNode.parentNode)">Toggle Lyrics</button></td>
      `;

      resultContainer.appendChild(newRow);

      // Clear input fields after adding the song
      characterInput.value = '';
      songNameInput.value = '';
      artistInput.value = '';
      genreInput.value = '';
      lyricsInput.value = '';
    }

    // Fetch data from the API
    const apiUrl = "https://awsrags-flask.stu.nighthawkcodingsociety.com/api/song/";

    fetch(apiUrl)
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        const resultContainer = document.getElementById('result');

        data.forEach(Song => {
          const row = document.createElement('tr');
          row.innerHTML = `
            <td>${Song.character}</td>
            <td>${Song.song_name}</td>
        console.error('Error fetching data:', error);
      });
  </script>

  <button onclick="toggleAmbientMode()">Toggle Ambient Mode</button>
</body>
</html>

Code 2:

</head>

<body class="hacker-theme">
  <div class="container">
    <div class="table-container">
    <input type="text" id="artist" name="artist" required><br><br>

    <label for="genre">Genre:</label>
    <input type="text" id="genre" name="genre" required><br
    <label for="lyrics">Lyrics:</label>
    <textarea id="lyrics" name="lyrics" rows="4" cols="50" required></textarea><br><br>


  <script>
    // Function to toggle lyrics visibility...
    
    // Function to toggle ambient mode...
    
    // Function to submit data to the backend
    function submitData() {
      const character = document.getElementById("character").value;
	

Code 3:
<a href="../">
  <h1 style="font-size: 20px; left: 2%; top: 1%; position: fixed;">>>Back</h1>
</a>
<button onclick="toggleAmbientMode()" class="ambient-mode-button">Toggle Ambient Mode</button>

Reflection 2 • 9 min read

Description