Asim Amir• 300
@AsimAmir1
Submitted
FranA
@FrantiskaAli
All comments
- FranA• 340
@FrantiskaAli
Posted
Hello,looks really great on phone :) However maybe you should consider trying to do layout for desktop too. Just because u use element <aside> it will not position itself to the side. I would recommend wrapping everything under header into element <main> and you can position its childreb element using flexbox or grid. Old fashion way would be float. I am addibg some links about flexboc and grids..https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ,..https://css-tricks.com/snippets/css/complete-guide-grid/ . . Also for the buttons and navvin desktop if you want color or anything changed when mouse is hovering => .text:hover {style on hover}. Happy coding:)
Marked as helpful
1 - shirahn-s• 30
@shirahn-s
Submitted
Any tips for positioning elements when it's position isn't necessarily confined to a flex container/grid? Referring specifically to the horizontal line. It fits in kind of a weird space, where its not in the middle of anything, and all my attempts of placing it resulted in it staying in the same position irrespective of the size of the page.
FranA• 340@FrantiskaAli
Posted
I just wrote <hr> element under section with inputs and then inder it i made button with margin-top in minus value so it overlaps with the line. Also would recommend to add some media queries. I opened your site in phone and its little smushed . Otherwise good job!👍🏻
Marked as helpful
0 - saraperme• 130
@saraperme
Submitted
honestly i have a lot to learn about svgs and that really excites me
FranA• 340@FrantiskaAli
Posted
Hi, I visited your website and couldnt actually input my date... when i saw your code I didn't see any event listeners....In your script you need to add them so then u can use your functions interactively on press of button....I am adding the fuide I found helpful myself.https://blog.webdevsimplified.com/2022-01/event-listeners/ . The site looks pretty in phone view 😊
0 - codezol• 420
@codezol
Submitted
the website looks a little crapy, i think a lot of things can be made a better and easier way, any advise will be great.
FranA• 340@FrantiskaAli
Posted
Hello, I did this challenge using vanilla JS as well and honestly it is massive headache :D But you should add validation. I did it in for loop that went through the inputs and checked if days is smaller than 31, month smaller then 12 and year smaller then 2023 and then add text conetnt notification (mine looks like this for (let i = 0; i < allInputs.length; i++) { const inputValue = allInputs[i].value; if (inputValue > 31 && allInputs[i] === dayInput) { allInputs[i].classList.add("required"); allInputs[i].nextElementSibling.classList.remove("hide"); allInputs[i].previousElementSibling.classList.add("error"); allInputs[i].nextElementSibling.textContent = "Must be a valid day"; valid++; } else if (inputValue > 12 && allInputs[i] === monthInput) { allInputs[i].classList.add("required"); allInputs[i].nextElementSibling.classList.remove("hide"); allInputs[i].previousElementSibling.classList.add("error"); allInputs[i].nextElementSibling.textContent = "Must be valid month"; valid++; } else if (inputValue > 2023 && allInputs[i] === yearInput) { allInputs[i].classList.add("required"); allInputs[i].nextElementSibling.classList.remove("hide"); allInputs[i].previousElementSibling.classList.add("error"); allInputs[i].nextElementSibling.textContent = "Must be in the past"; valid++; } ) I think using vanilla JS was a mistake cuz I can see it being so much easier in react or something...:D
Marked as helpful
0
