This is a solution to the Bookmark landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Receive an error message when the newsletter form is submitted if:
- The input field is empty
- The email address is not formatted correctly
- Solution URL: solution URL
- Live Site URL: live site URL
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- javascript
i learnt how to implement sliders and a drop down menu, i tried building it without relying on google. the slider was quite difficult to implement, i am not quite satisfied with how it works. i had to create a function that creates an animation for each case scenerio of the slider. currently the slider is quite static, what i mean is if i were to add a new slide i will have to create a new animation class for the slide.
the fuction for moving the slide
function intToClass(previous,current){
let str = ''
switch (previous) {
case 1:
str = 'one'
break;
case 2:
str = 'two'
break;
case 3:
str = 'three'
break;
default:
break;
}
switch (current) {
case 1:
str = `${str}-to-one`
break;
case 2:
str = `${str}-to-two`
break;
case 3:
str = `${str}-to-three`
break;
default:
break;
}
return str;
}
i will continue to focus my attention more on how to build better slide menus and drop down menus
- Example resource 1 - This helped me with the regex for email validation
- Website - Add your name here
- Frontend Mentor - @yourusername
- Twitter - @yourusername
Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.