for another time I will go deeper into the field of Javascript Logic
What challenges did you encounter, and how did you overcome them?The challenges I faced in this project were from the logic of data retrieval using javascript, and what I did was ask in the sharing and chat groups
What specific areas of your project would you like help with?Logic in javascript
The code looks well organized and understandable. It is neatly structured, with a logical separation of functions and elements, which makes it easy to read and maintain. The clear approach to managing time frames via JavaScript also adds convenience to the user.
Overall, the code looks neat and understandable, but there are a few areas that could be improved, especially for the mobile version. Lack of Padding: In the mobile version, the text card lacks padding, which causes the text to be too close to the edges, reducing readability. Responsiveness: The card does not adapt well to smaller screens. This could be due to fixed sizes or a lack of media queries to adjust dimensions and padding for the mobile version. Using relative units (like em or %) instead of fixed values (px) could improve flexibility. Media Queries and @media Rules: To enhance the code's responsiveness on mobile devices, it would be beneficial to add more @media rules, which can adjust sizes, padding, and possibly show/hide certain elements for different screen sizes.
Completing the JavaScript in a fairly concise manner. Some solutions I have seen had made two share buttons and containers for desktop/mobile however I felt this could be achieved with one which I had managed.
What challenges did you encounter, and how did you overcome them?Positioning the share container to align exactly with my container was difficult. However my accessing the developer tools and selecting the element I was able to mess around with the position of it inside of chrome (since the position was set to absolute). This allowed me to use trial and error to line it up perfectly.
Overall, the code is well-written and follows the basic principles of web development. There is a slight difference in design in the desktop version with the dropdown window, specifically regarding the arrow. Here is my implementation example:
<div class="share-button"> <div id="socialIcons" class="social-icons"> <p>Share</p> <a href="#" target="_blank"><img src="images/icon-facebook.svg" alt="Facebook"</a> <a href="#" target="_blank"><img src="images/icon-twitter.svg" alt="Twitter"></a> <a href="#" target="_blank"><img src="images/icon-pinterest.svg" alt="Pinterest"></a> </div>
<button id="shareArrow">
<img class="icon-share" src="images/icon-share.svg" alt="">
</button>
.social-icons {
display: none;
position: absolute;
top: -12rem;
right: -4.5rem;
transform: translateY(-50%);
background-color: hsl(217, 19%, 35%);
padding: 1.5rem;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 1rem;
}
.social-icons::before { content: ""; position: absolute; top: 98%; left: 57%; transform: translateX(-50%); border-width: 1rem 1rem 0 1rem; /* Triangle dimensions */ border-style: solid; border-color: hsl(217, 19%, 35%) transparent transparent transparent; }
interesting solution, looks good adaptability on a 900px wide monitor. Well thought out design and structure.
I encountered some difficulties arranging the cards in the desktop version.
This is a very interesting solution, and I appreciate the approach you've taken. I would love to see more examples like this to gain more experience. Thank you!
Could you please explain why you used a <span> tag in this case?
This is a very interesting solution for card placement. The chosen grid and responsiveness add structure to the design and make it user-friendly across different devices. However, it's worth paying attention to the fixed margins for images. In the CSS, the fixed margins for images (margin: 25px 0 0 200px; and margin: 30px 0 0 232px;) can cause issues with responsiveness. It would be better to use flexible values like percentages or rem for smoother scaling across various devices. Unoptimized CSS: There are many repeated styles for the article element. For instance, width, height, border-radius, and padding-left could be placed in a common class for all articles, which would reduce the code volume and make it easier to maintain. Lack of color variables: Color values (hsl(...)) are repeated multiple times in the code. Using CSS variables for colors would make it easier to change the color scheme in the future.
