Skip to content
OverviewSolutions
15
Comments
19
FocusCookie
@FocusCookie

All comments

  • FocusCookie•350
    @FocusCookiePosted about 3 years ago

    Nice job! 👍 You linked github repo is not working :(

    1
  • Samuel Wahome•20
    @samwahomeSubmitted about 3 years ago

    What is the best way to create beautiful SVG backgrounds without hacks?

    Flexbox and JS

    1
    FocusCookie•350
    @FocusCookiePosted about 3 years ago

    On the .card-icon class you could also use

    background-image:url(...pathToSvgFile);
background-position: x y;
background-repeat: no-repeat;

    If you do it like this you need to give the class a height or a margin-top otherwise the height will be 0 because the div does not need the img in the inside anymore.

    Marked as helpful
    1
  • Elisa•50
    @elisa-charrierSubmitted about 3 years ago

    At the beginning of each project, I am always undecided about which are the smartest names to give to the classes. Any suggestions? I'd be happy to check out any alternatives to the script I wrote: I'm not a pro in Javascript. Feel free to report me your solution! Thanks to who will answer.

    Time tracking dashboard: first time w/ css grid and js

    2
    FocusCookie•350
    @FocusCookiePosted about 3 years ago

    Your code and structure are awesome! A tip, the bottom corners of the smaller cards, you can see the other backgroundcolor. I transform and translateY the overlaying box by 1px ;)

    Marked as helpful
    0
  • Marcos•95
    @marcosfsousaSubmitted about 3 years ago

    I wanted to start practicing with JSON and the Fetch API and with this challenge I got just what I wished for.

    What seemed another head scratcher at first with heaps of lines of JS code resulted in a quite simple few lines with a forEach() function. Nonetheless, I've seen here much more elegant solutions for this challenge.

    There is room for improvement as always!

    I appreciate your time to look at my code, critique and help in any way possible.

    Obrigado.

    time tracking dashboard app with local JSON, Fetch API, Async/Await

    2
    FocusCookie•350
    @FocusCookiePosted about 3 years ago

    If you change to daily the previous text should say "Yesterday - xhrs".

    In your script, you could write a high-level function like updateActivityCard(elements, values) and in there you use yours for a loop. The loop is repetitive within you script.

    I like the hover effect on the theme cards btw :)

    Marked as helpful
    0
  • FocusCookie•350
    @FocusCookiePosted about 3 years ago

    There is an issue with the centering on smaller screen than the one from the designs. Instead of using margin auto on left and right you should use

    display:flex;
justify-content:center;
align-items:center;
    Marked as helpful
    0
  • FocusCookie•350
    @FocusCookiePosted about 3 years ago

    Mhhh looks like the screenshot were taken faster than the style of the user card is applied... On the live page, everything looks fine.

    0
  • FocusCookie•350
    @FocusCookiePosted about 3 years ago

    Check out flexbox and grid to switch the layout in mobile (media queries). I like the animation of the arrow ;)

    1
  • FocusCookie•350
    @FocusCookiePosted about 3 years ago

    I really like the first search modal! Nice idea ;)

    Marked as helpful
    0
  • Nick Carlisi•180
    @nickcarlisiSubmitted about 3 years ago

    Hey everybody, I would appreciate any feedback. There's a few things that I couldn't quite figure out.

    • How to change the color of the SVG images. In dark mode, they're supposed to be white. Also, when something is 'Not Available' (i.e. twitter handle) it's supposed to be greyed out. I can't figure out how to change the color at all, let alone how to programmatically change it when something is 'Not Available'.

    • Another thing that's driving me crazy is that when the screen width gets too small the button gets pushed out of the form. Even worse, when the 'No result' error is there, it pushes it even further and 'No result' goes to 2 lines, for some reason.

    • Also, I feel like I could definitely refactor some of my javascript. This is my first "junior" project, after doing a few "newbies".

    Thanks in advance for any help!

    Good practice using Sass, JavaScript, API and Grid

    4
    FocusCookie•350
    @FocusCookiePosted about 3 years ago

    You can change the color of an svg with the fill attribute of the svg path like this:

    .btn--text:hover > #theme-icon path { color: var(--btn--text-color--hover); fill: var(--btn--text-color--hover); }

    The Button issue within the search box can be fixed by applying a width of 100% to the input.

    Marked as helpful
    0
  • FocusCookie•350
    @FocusCookiePosted over 3 years ago

    Wow you did it without JS at all! Nice! But as Patrick noticed the Menue does not stay open :) but that is fixable for sure.

    0
  • Yudi Yoshida•350
    @yudiyoshidaSubmitted over 3 years ago

    Hello, front-end developers! How are you?

    So, this is my first project trying to use BEM methodology, I would really apreciate if you guys give some feedback if I did something wrong or anything that I can improve.

    Besides that, this project was really fun! I learned a lot about how to use grid-template-areas and pseudo-elements (::after) to create an arrow to my "tooltip" social media.

    Thank you! Keep coding!!

    First project using BEM methodology

    2
    FocusCookie•350
    @FocusCookiePosted over 3 years ago

    Very nice solution and the js part is very small too! Nice job!

    0
  • FocusCookie•350
    @FocusCookiePosted over 3 years ago

    You could also read out the width and height of the window in js with

    let windowWidth;
let windowHeight;
window.addEventListener("resize", function () {
  windowWidth = window.innerWidth;
windowHeight = window.innerHeight;
});

    With knowing the dimensions you can calculate the position of the initial share button and add some space to it.

    1