Diana_Tribute__Jan_4_2022_7_56_PM.mp4
"I found the one my heart loves."
-- Song of Solomon 3:4.
This is a passion project for me. When I took on the assignment to create a tribute page I knew immediately who I needed to give tribute to. My wife of only two years so far is the best, kindest, sweetest person I know. She is perpetually kind and eternally forgiving. She is smart and capable and accomplished. She is the person I want to become some day.
As you can see the project as evolved. The original project only met the requirements of the Free Code Camp Tribute assignment. Immediately below, you can see what the new improvements included. Or, if you like, you can see the original requirements here Then step down to the next level to checkout what the version 1.0 started out as!
To use the app simply click on the View Project button or visit https://www.dianarapp.com.
🆕 Content is king, and this version does a deep dive into content, bringing 1st person stories, secondary news sources, timelines, and photographs to turn an over-night, check-the-box effort into a serious journalistic endeavor.
🆕 Utilizes custom subdomain and serves it up with TSL certificate for secure https:// routing.
🆕 Demonstrates IntersectionObserver API with a callback function to control animations based on screen position.
🆕 Use of JavaScript for DOM manipulation and to invent engaging animations which enhance UX/UI.
🆕 Adds a super slick SVG animation.
🆕 Use of JavaScript to dynamically create and place internal hyperlinks.
🆕 Creative use of CSS to create an intriguing and visually appealing timeline effect.
🆕 Use of flexbox to create responsive layout.
🆕 Really awesome pulsing effect. Tip my hat off to Florin Pop for a great tutorial on how to create it.
🆕 Use of HTML/CSS to fix a known Github error that serves the page up zoomed in at 150%.
-
User Story #1: My tribute page should have an element with a corresponding id="main", which contains all other elements.
-
User Story #2: I should see an element with a corresponding id="title", which contains a string (i.e. text) that describes the subject of the tribute page (e.g. "Dr. Norman Borlaug").
-
User Story #3: I should see either a figure or a div element with a corresponding id="img-div".
-
User Story #4: Within the img-div element, I should see an img element with a corresponding id="image".
-
User Story #5: Within the img-div element, I should see an element with a corresponding id="img-caption" that contains textual content describing the image shown in img-div.
-
User Story #6: I should see an element with a corresponding id="tribute-info", which contains textual content describing the subject of the tribute page.
-
User Story #7: I should see an a element with a corresponding id="tribute-link", which links to an outside site that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of target and set it to _blank in order for your link to open in a new tab (i.e. target="_blank").
-
User Story #8: The img element should responsively resize, relative to the width of its parent element, without exceeding its original size.
-
User Story #9: The img element should be centered within its parent element.
-
This was one of my first web sites, so a lot of it was still new to me. But especially interesting challenges were
-
creating an SVG animation
(function () {
let j = 0;
const parent = document.getElementById('logo').children;
// console.log(parent);
document.addEventListener('animationend', function(evt) {setTimeout( () => {
if (evt.target.nodeName === 'path' && j === 0) {
j++;
console.log(parent);
for (let i = 0; i < parent.length; i++) {
// console.log(parent[i]);
if (parent[i].nodeName === 'path') {
parent[i].style.strokeDashArray = 'inherit';
parent[i].style.strokeDashoffset = 'inherit';
parent[i].style.animationName = 'goldtowhite';
parent[i].style.animationDuration = '10s !important';
parent[i].style.animationDirection = 'forwards !important';
parent[i].style.animationTimingFunction = 'ease !important';
parent[i].style.animationDelay = '500ms';
} else {
console.log('not');
}
}
document.removeEventListener('animationend', function(evt) {
return;
});
}
}, 3300);
});
})();
- making a button that would automatically take you to the next section, with each section having different sizes and end points, then when it got to the end of the page it would know to turn right side up and the next click would take you all the way back to the top+
(() => {
let observer = new IntersectionObserver(myObserverCallback, {threshold: 0.3});
function myObserverCallback(entries, observer) {
entries.forEach(entry => {
if(entry.isIntersecting) {
entry.target.classList.add('javascript-card-visibility');
observer.unobserve(entry.target);
}
});
}
document.querySelectorAll('.card:nth-child(even)').forEach(element => {observer.observe(element); });
let observer2 = new IntersectionObserver(myObserverCallback2, {threshold: 1});
function myObserverCallback2(entries, observer2) {
entries.forEach(entry => {
if(entry.isIntersecting) {
let count = 0;
document.getElementById('button').classList.add('spin');
window.location.href = `#event_${count}`;
observer2.unobserve(entry.target);
}
});
}
document.querySelectorAll('.event_32').forEach(element => {observer2.observe(element); });
})();- 100% of the work is my own. The only direction came as part of user story requirements.
No attributions applicable for this project.