Skip to content
OverviewSolutions
19
Comments
8
Chris
@cbserra

All comments

  • Chris•410
    @cbserra

    I'm unable to get the map to load in any scenario. On initial page load, I receive these errors in the console (Chrome Canary browser):

    ajax.js:143 
       GET https://api.mapbox.com/styles/v1/daniel-gp/ckqtg9brz5axa18qs0ic1dhdo?access_token=pk.eyJ1IjoiZGFuaWVsLWdwIiwiYSI6ImNrcXRmNXliYzA3bTIycHA4c2pycjNyeXQifQ.mTaMRpxwC6qtPk1-VefRJQ 401 (Unauthorized)
u @ ajax.js:143
(anonymous) @ ajax.js:185
At @ ajax.js:241
t.getJSON @ ajax.js:252
loadURL @ style.js:253
_updateStyle @ map.js:1420
setStyle @ map.js:1395
Map @ map.js:511
(anonymous) @ map.js:2

evented.js:149 
          Error: Unauthorized: you may have provided an invalid Mapbox access token. See https://www.mapbox.com/api-documentation/#access-tokens-and-token-scopes
    at ajax.js:149:33
  • Chris•410
    @cbserra

    Boo -- latest solution wont load quickly enough for snapshot tool to capture the loaded site

  • Chris•410
    @cbserra

    So I was feeling a little ambitious (or just avoiding my own work) and mocked up an idea for your tool. You can check it out here:

    https://codepen.io/cbserra/pen/RwyqpVW

    JS wasn't added, so just CSS design purposes:

    Figured maybe you could have a menu at the top to toggle between Password Generation and Password Analysis for a user's own password.

    I updated the sections you added to match the Strength box.

    Let me know your thoughts!

    Marked as helpful
  • Chris•410
    @cbserra
    • You’re Missing the challenge’s font. Do you know how to retrieve them?
    • also, according to the validation reports, you’re placing invalid HTML elements in patents elements which don’t support them:

    e.g. <div> cannot be placed in <ul>/<ol> elements — only <li> elements are allowed. Also, <li> elements must be in <ul>/<ol> tags — they cannot exist outside of list elements

    Marked as helpful
  • Chris•410
    @cbserra

    You could use the <picture> element, which allows you to specify @media queries for image sources.

    Also, I found it easier and cleaner to develop my layout for mobile -- so the default CSS is targeting a mobile layout. That way, I only need a media query for additional breakpoints I will support. It looks like there's a large range between your breakpoints -- you have one for max-width of 541px and the other one is for min-width of over 1000px -- which leaves both images visible for at least one breakpoint between the two you support.

  • Chris•410
    @cbserra

    When I did this challenge, I added the illustrator image as an img and not a background. I used flexbox: for desktop, it followed the default flex-direction: row, and for mobile, I changed that to flex-direction: column-reverse so the image would appear first.

  • Chris•410
    @cbserra

    • maybe I’m overlooking it, but are the raw source files available to view? I only see the minified files, which are difficult to read.

    • a couple of spelling mistakes — “shortner “ below the header should be “shorter” and “Advance Statics” should be “Advanced Statistics”. Just two I saw.

    • was it your intention for the menu to follow the page on scroll? Just wondering it was a feature or a bug 🙂

  • Chris•410
    @cbserra

    Looks good! I like how the code is organized. A couple of things I notoce (iPhone 11 Pro / Safari)

    • The loading animation stops animating over the response returns, but out don’t revert back to the die until I click in the area.
    • when I’m landscape mode, there are white borders on the left and right side.
    • when going back to portrait mode, the bottom half of the screen is a black background until I scroll back up, which resets layout.
    • perhaps adding margin: 0; padding: 0 too html and/or body elements may fix those last 2 issues?