All solutions

What are you most proud of, and what would you do differently next time?

All! I don't know if I would do it differently another time

What challenges did you encounter, and how did you overcome them?

I had difficulty with some accessibility specifics, such as aria-role and keyboard navigation

What specific areas of your project would you like help with?

Is my solution optimal for web accessibility?

My process

1. 🗂 Initialize the project on GitHub and use Git for log my commits and versioning my work.
2. ✏ I looked at the designs, in design directory, to start planning how to approach the project:
   • Desktop Design
   • Mobile Design
3. ⚙ Implemented project features with HTML CSS and JS ✅ issue #31 :
   • ✔ users should be able to Navigate the slider using either their mouse/trackpad or keyboard
   • ✔ users should be able to View the optimal layout for the site depending on their device's screen size
   • ✔ users should be able to See hover states for all interactive elements on the page
4. 🚀 Buil and Deploy with Netlify
5. ℹ Update README file
6. ➡ Submit my solution

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS media queries
• CSS transitions
• JavaScript Dom manipulation
• Javascript animation

What I learned

I improved my skills in animating and interacting components with JavaScript

• scroll and keypress events on slider

This is my solution. I tried not to use frameworks but just vanilla JS for DOM manipulation for animations and states. In the future I would like to try to redo it with REACT...

Feedback welcome.

I finished the project but I'm not sure of the JavaScript logic I used to add the mail to the success message.

// Grab values from the submitted form in the URL
const email = new URLSearchParams(window.location.search).get('email');
//console.log(email);

// Populating the span element
const span = document.getElementById("signed-email");
span.innerText = email;