Individual Code:
Code contribution to project:
Code with comments:
// Adding scroll and resize event listeners to the window
window.addEventListener("scroll", setScrollVar);
window.addEventListener("resize", setScrollVar);
// Define the setScrollVar function
function setScrollVar() {
// Get a reference to the HTML root element
const htmlElement = document.documentElement;
// Calculate the percentage of the screen height that has been scrolled
const percentOfScreenHeightScrolled =
htmlElement.scrollTop / htmlElement.clientHeight;
// Log the calculated percentage (limited to a maximum of 100)
console.log(Math.min(percentOfScreenHeightScrolled * 100, 100));
// Set a CSS custom property "--scroll" to the calculated percentage
htmlElement.style.setProperty(
"--scroll",
Math.min(percentOfScreenHeightScrolled * 100, 100)
);
}
// Call the setScrollVar function immediately to set initial values
setScrollVar();
// Create an IntersectionObserver to observe elements in the DOM
const observer = new IntersectionObserver(entries => {
for (let i = entries.length - 1; i >= 0; i--) {
const entry = entries[i];
// Check if the observed element is intersecting with the viewport
if (entry.isIntersecting) {
// Hide all elements with a "data-img" attribute
document.querySelectorAll("[data-img]").forEach(img => {
img.classList.remove("show");
});
// Show the image specified in the dataset of the observed element
const img = document.querySelector(entry.target.dataset.imgToShow);
img?.classList.add("show");
// Break the loop after showing the first intersecting element
break;
}
}
});
// Observe elements with a "data-img-to-show" attribute
document.querySelectorAll("[data-img-to-show]").forEach(section => {
observer.observe(section);
});
Additional Notes for code in blog
Github Analytics Review
Original Repository
New Repository:
As you can see, I’ve not been committing as much as my other group members. My part of this was to write an about page with information about how our general code worked. Additionally, I set up the navbar, but that was all CSS and does not really count toward my part with javascript or java. Alex already talked to Mr. Mortensen about our team contributions, and I recognized that I need to step up my game in the next trimesters.
I also have a bad habit of committing in less commits with more code, not little by little with smaller changes. This could be detrimental big commits/changes may not save sometimes, which in the end can cost a lot of time wasted. Although I’ve not faced that yet, I should be more catious by committing more changes so I don’t lose much progress if my commits don’t process through.
Individual Blog:
Code in blog:
Timebox with all my plans for the week and plans
Usage in blog:
Joint.JS Blog is a prime example of blogs for me. As I’ve had experienced with Frontend code, Joint.JS is a big issue for me. I was tasked to do the Joint.JS graphing, but I didn’t have a chance to get to it because of my about page.
Jekyll with HTML Blog is used even in this notebook right now. It efficently links files together, which I noted in my blog. My blog mainly described how it was used in the project, which I integrated into my personal notebook as well.
CollegeBoard Quiz Notes:
See my CollegeBoard Test with Review Notes
See my Student Lesson scores
Trimester 1 Reflection:
Memories and Learning:
- I have never touched Javascript or Java before, new experience
- PBL learning with matching game, first full on experience with javascript code.
- Mom and ChatGPT has really helped me understood java and javascript
- Understanding deployment with AWS
Accomplishments:
- More collaborative with team, understood my role as developer
- Development with backend with AWS
- Alex mainly helped me with development, followed instructions
- David helped me setting up VScode and cloning repositories in WSL, understood basic functions such as “cd” or “gitclone”
- Collaborated with Jishnu on frontend, about page and front page
- Development with backend with AWS
- Felt more engaged, spent more time coding than I have done in the past year in AP CSP
What I can improve on:
- Contributing to more of the main project
- Comitting more with less code > Committing less with more code
- Touching more on backend, rather than just front end
- Something to do with machine learning in the next 2 tris (Alex’s idea)? Sentiment Analysis?
- Still be more engaged, sometimes I’m on my phone when I shouldn’t be
- Engagement of class lessons should be increased
- More particpation by raising hand, going more in depth with hacks.