👋 Hey there! I’m your friendly neighborhood coder, diving into front-end development like Wade Wilson into chaos. Armed with a keyboard and a questionable sense of humor, I'm here to turn bugs into features and pixels into art. Let’s make the web weirder—one line of code at a time! 🕶️
Well, I have a question about the use of the display flex property which I use to place all content in the center of the browser viewport. I think I am doing a bad practice and I would like someone to help me resolve this question because when I apply this property, although it is executed correctly centering the content I want in the center, the problem is that when I inspect the page two appear Underneath everything, they both take up space in the DOM, so visually it doesn't look fully centered.
Any information will be well received. greetings colleagues
I could not get the description paragraphs to transition instead of just pop open. I'm looking for advice if someone wants to look at my code. Look at src/sass/style.scss and scroll down to "// FEM Community:"
mmm well I still don't understand all your code, I think you used react for your project and I haven't started with that framework yet, but according to the css I see I can suggest you look at the background-size property you used in body, it doesn't respond very well on mobile devices, an alternative you can use to create the two-color background is by using a container that has the approximate measurements for the purple color along with the background svg pattern.
On the other hand, if what you are looking for is to create a kind of transition when each list is clicked and it expands creating a smooth slide, you can try with css and js. For that we will use the max-height properties in combination with overflow:hidden and transition but first you should check (remove) the hidden attribute in each <p> element. Example:
li p {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
}
li button[aria-expanded="true"] + p {
max-height: 200px; /* Adjusts according to content */
opacity: 1;
}
Now with the help of js we will use the attribute aria-expanded to switch between true/false. First we select all the buttons and then we add a click event to each one to toggle aria-expanded and that's it, it should work.
const allButtons = document.querySelectorAll("button");
allButtons.forEach((button) => {
button.addEventListener("click", () => {
const expanded = button.getAttribute("aria-expanded") === "true";
button.setAttribute("aria-expanded", !expanded);
});
});
I hope it helps you in some way, Greetings!
Hi @UbaidRussell,
I was looking at your solution and I would like to leave you some suggestions that I hope will be helpful to you.
* { margin: 0; padding: 0; box-sizing: border-box; }
but you can investigate other alternatives that better suit your project.
I hope these suggestions are of some use to you and congratulations on your solution. 😊
I am proud of my Js coding to make my app interactive
What challenges did you encounter, and how did you overcome them?Finding the best approach to code with JS.
What specific areas of your project would you like help with?JS code.
good job colleague, keep studying javascript, I recommend that you read about the DRY (don't repeat yourself) principle, very useful for writing clean code in Js
I finally understood how the code of data.json works with the help of AI assistance. Next time, I want to try writing the JS files myself without their help.
What challenges did you encounter, and how did you overcome them?As I mentioned, I had trouble understanding how working with data works. AI assistance helped a lot.
What specific areas of your project would you like help with?In the last addEventListener at the end of main.js, I couldn't resolve the issue. The problem was that the images didn't change their brightness when hovered over. Additionally, it seems that the .BlackBackground and its parent elements don't have the same width. There are also minor issues in the index.html, style.css, and main.js files."
Hello!! I was looking at your solution for this challenge and have some comments. I hope they are helpful to you:
.BlackBackground {
margin-top: -9rem; /* you can change the value that best fits */
position: relative;
}
.ColorfulBackground /* here card class */ {
background-color: /* color */
}
.TimeIntervals (navigation list) I would suggest you use unordered/ordered lists, etc..BlackBackground:hover {
background-color: /* color you want */;
cursor: pointer;
}
Happy coding! =)
I'm proud of the final design and that it took less time to finish the graphic part, compared to my last challenge.
What challenges did you encounter, and how did you overcome them?It was challenging to set the javascript part to verify the email address, I'm not sure that I verified all the parameters, if not, please tell me and I'll be happy to listen! In this process, Google was my first ally, I also asked chatGPT in some moments in which I was stuck, just copying/partying my code asking if there were syntax errors
What specific areas of your project would you like help with?For sure there is a faster way to verify that the input email address is actually a valid email address, I would like to know also different ways to do it!
Hi! I´ve already saw your code and I had some comments for you. I hope they are helpful to you.
Lastly, I apologize if my English is wrong (I'm practicing my English writing), I hope you can understand me. If you have any doubts or questions, you can tell me.
Wow, I really liked the result of your code, especially the animation for the click event on the share button. The responsiveness also looked great and reacts well to screen changes, I'll look at your code in more detail to learn a little more heh. I just finished this challenge and I need to add animations and resonsive like your project, I hope to continue learning 😊.
