Skip to content
OverviewSolutions
10
Comments
14
Temesgen Adane
@temesgen-982

All comments

  • 1deadjoe•370
    @1deadjoeSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    During this project, I gained valuable experience in creating a responsive design that adapts to various screen sizes and implementing interactive features with JavaScript.

    Next time I would like to use a CSS preprocessor like Sass to better organize my styles and take advantage of features like nesting and mixins, Implement a more robust JavaScript architecture from the beginning. I would consider using a module pattern or even a small framework like Vue.js to better manage the application state and updates.

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

    Aligning the activity card icons: Positioning the icons to overlap the card borders while maintaining responsiveness was tricky. I had to do some research on positioning to achieve my outcome.

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

    Accessibility: I'm not confident that my solution is fully accessible. I'd appreciate feedback on how to improve keyboard navigation and screen reader compatibility. While I've tested on modern browsers, I'm unsure about compatibility with older browsers. Any tips on ensuring broader compatibility would be helpful.

    Interactive time-tracking dashboard using HTML, CSS, and JS

    2
    Temesgen Adane•230
    @temesgen-982Posted about 2 months ago

    It is working but you are just toggling classes. You are supposed to use fetch to get the data from the data.json file.

    0
  • Austin•430
    @astnioSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I decided to change things up in a few different ways for this project.

    The first thing I did differently was that I did not use the images completely as they were. I noticed that the images given all had preset colors, based on the background color of its category. I didn't think this was very flexible if the user wanted a new background color or a different image, so I configured images to use a combination of CSS filters so that they instead dark the area of the background they are on. This allows them to be a tint of the background, like their original color, while allowing it to be flexible enough to use any image on any background while keeping it looking good.

    The second thing I did was add more properties to the JSON data. This was mostly so that I could utilize this information for how I setup my JavaScript.

    For my JavaScript, I wanted to create a system that was expandable. I also tried to keep my code concise by splitting it into 5 main files:

    • fetchData.js is just to get data from my .json file
    • categoryCard.js is a class that helps me model my categoryCard objects
    • categoryCardsManager.js reads the data from fetchData.js and instantiates a the categoryCards, and puts them into an object that is exported
    • elementMaker.js is just used to create an HTML element to append to the main document, however it is used as a property for each categoryCard
    • main.js is where I setup the buttons and begin appending the card elements to the main page

    I think the way this is setup is nice, because each categoryCard contains the information for its own element, which is appended to the main page. This makes it easy to change the info on everything at once, as my function for updating info is based on the categoryCard class, which also has its own info from the JSON file it was made from.

    This means that in my main file, I can just loop over my primary list of time cards, and call their functions to update. This was easy to do as there are only 3 buttons (daily, weekly, monthly) which just changes the hours and labels to match the information already given in the JSON file.

    The design works well too. Since I am using grid, having more than 6 items actually doesn't look too bad, as they simply wrap down to the next row, leaving everything else perfectly fine. Mobile works fine too as it just makes the column longer.

    Responsive Dashboard with CSS Grid, Flexbox, and JavaScript

    2
    Temesgen Adane•230
    @temesgen-982Posted about 2 months ago

    I didn't knew you were supposed to make the actual card elements using Javascript. I had them already on my HTML and I only uploaded the values. Anyways I think you made a good solution.

    [Edited]

    I was having a look at your code and I downloaded the .zip file from the repository and when I run it on vs code live server it doesn't work and it only shows the <header>

    0
  • Temesgen Adane•230
    @temesgen-982Posted about 2 months ago

    The preview site is linked to another page

    0
  • Temesgen Adane•230
    @temesgen-982Posted about 2 months ago

    A good solution. You can consider adding the little arrow shape on the tooltip.

    0
  • Temesgen Adane•230
    @temesgen-982Posted about 2 months ago

    You should use the specified font family

    0
  • Temesgen Adane•230
    @temesgen-982Posted 2 months ago

    The content looks pinched to the top and bottom of the screen. You could consider fixing that.

    Marked as helpful
    0
  • ElkuchWaltz•80
    @ElkuchWaltzSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Happy to finish another project and gain more experience with tables. Next time, I'm confident I'll be able to assemble the table faster in HTML and format it faster in CSS.

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

    Getting the lines between the table rows was a challenge this time. A quick google search found others wanting to make lines between rows, so I was able to solve it quickly.

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

    Best practices that I'm doing incorrectly and/or missing - Inefficiencies

    Recipe Page Challenge in HTML and CSS

    1
    Temesgen Adane•230
    @temesgen-982Posted 3 months ago

    Everything is looking good except the container is a bit pinched to the top of the window.

    0
  • Temesgen Adane•230
    @temesgen-982Posted 3 months ago

    A very good solution👌

    0
  • Temesgen Adane•230
    @temesgen-982Posted 3 months ago
    • Semantic HTML You probably should be using link elements <a> instead of buttons for the social media links since you want them to take the user into another page.
    • Font Size The other one is you should use the font size specified on the style guide for the paragraph elements.
    Marked as helpful
    1
  • Pedro Poliszuk•60
    @pedropoliszukSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I could use Vue or React, but I did this first challenge the simplest way.

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

    I found the challenge simple and easy, I did it in a simplified way to get to know the website.

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

    I don't need help in this kind of project.

    QR Code Challenge

    2
    Temesgen Adane•230
    @temesgen-982Posted 3 months ago

    You are not using the font

    0
  • Temesgen Adane•230
    @temesgen-982Posted 3 months ago

    It looks good. But why is it scrollable I think it should fit the window. You can try using body{min-height: 100vh;}

    Marked as helpful
    0
  • Aung Myat Min•10
    @Aung-myat-minSubmitted 3 months ago
    What specific areas of your project would you like help with?

    I want to know more about text warping. I got the following text style by using br tag and text nowarp css attribute. I think that this is not a good way to do it.

    Improve your front-end
skills by building projects

    QR code component solution

    2
    Temesgen Adane•230
    @temesgen-982Posted 3 months ago

    You should use the font-family.

    Marked as helpful
    1