My proudest Achievments

My Biggest Accomplishments

I throughout the first trimester had multiple acomplishments. Throughout my new game, my backend understanding, my lessons I created while being able to learn them and my frontend work in my group.

---

What Made It Special

Through all of my troubles I was able to come out victourious on all of them, from you making me scared of getting a B so we needed to get backend working to actaully getting it working

• Hard Work and Dedication: We had countless hours pof communicating and working in office hours.
• Personal Growth: As I kept talking to you I was learning more and more especially from my teammates and other people who had a better understanding than me it just pushed me to get a good grade and better understanding for the college board aswell.

---

My favorite piece of code

Chat Box Example

This is a simple interactive chat box example using JavaScript.

const messages = document.getElementById('messages');
const inputMessage = document.getElementById('inputMessage');
const sendButton = document.getElementById('sendButton');

function loadConversation(chatName) {
  messages.innerHTML = `Conversation with ${chatName} started.`;
}

sendButton.addEventListener('click', () => {
  const messageText = inputMessage.value.trim();
  if (messageText) {
    const messageDiv = document.createElement('div');
    messageDiv.textContent = `You: ${messageText}`;
    messages.appendChild(messageDiv);
    inputMessage.value = '';
  }
});

---

JavaScript Code Explanation

1. Accessing HTML Elements
   • messages, inputMessage, and sendButton are used to interact with the HTML elements for displaying messages, typing text, and sending the message.
2. Loading a Conversation
   • The loadConversation(chatName) function updates the messages area with a message indicating which conversation is active.
3. Sending a Message
   • When the “Send” button is clicked, the code:
     • Gets the user’s typed message.
     • Creates a new message div.
     • Appends the message to the messages area.
     • Clears the input field.

How the sendButton.addEventListener works

• sendButton.addEventListener(‘click’, …): Adds an event listener to the sendButton. This listens for a “click” event, meaning the user has clicked the button. The function defined in the event listener is executed when the button is clicked.

• const messageText = inputMessage.value.trim();: Captures the text entered in the input field (inputMessage) and removes any leading or trailing spaces using .trim(). if (messageText): Checks if the messageText is not empty. If the input field is blank (or only contains spaces), the function does nothing.

• const messageDiv = document.createElement(‘div’);: Creates a new div element dynamically. This div will represent the message being added to the chat area.

• messageDiv.textContent = \You: ${messageText};: Sets the text of the new div to display the user’s message, prefixed by “You: “ for clarity.

• messages.appendChild(messageDiv);: Adds the new div to the chat area (represented by messages). This visually displays the user’s message in the chat.

• inputMessage.value = ‘’;: Clears the input field after the message has been sent, making it ready for a new message.

College Board corellation

1. Event-Driven Programming
   • The code uses event listeners (click event on sendButton). This approach allows for user interaction, a key principle in creating dynamic and interactive applications, aligning with College Board’s focus on understanding how user input can trigger code execution.
2. Data & Abstraction
   • The input data (messageText) is captured, processed, and displayed as an abstraction of user communication. The function loadConversation() also demonstrates how code can abstract and display content based on user actions or input.
3. Modularity
   • Functions like loadConversation() encapsulate behavior, promoting reusability and easier debugging, a practice encouraged by College Board to build structured, modular programs.
4. Control Structures
   • Conditional logic (e.g., checking if messageText is not empty) is used before appending a new message. This demonstrates the College Board’s focus on using control structures effectively to make decisions in code.

Why It Matters

• This code sample demonstrates fundamental computing principles such as input handling, data processing, and event-driven execution, which are all key concepts tested and explored in the College Board curriculum.

Importance

• Element Access: Enables interaction with page elements.
• Conversation Loading: Personalizes the chat.
• Message Sending: Allows the user to send and see messages in real-time.

---

Want to see the Chat Room?

Click below to check out my chatroom and my mcq test revisions! and what it means to me:

Check out my chatroom!

My MCQ

---