All solutions

Hi everyone! I generated the dashboard cards using Js for a couple reasons: it's fun, it avoids HTML duplication and bloated CSS selectors in the script, and I found it easier to update and fill the Json data. I haven't done a vanilla Js project in a while, so I will take any advice on code structure and/or events and handlers organization. I also couldn't find a solution for the CSS grid I used on the body to keep the main using all the space and the footer to use only what it needs, so I added a media query instead. Any suggestions on grid property(ies) to keep the footer at its minimum height for the desktop and mobile version? (media query was added to achieve this on desktop).

Thank you all!

Hi everyone! I took this challenge because I wanted to do the parsing myself. Couple questions about my road blocks:

• I'm using Vuejs for the side-by-side formatting. Framework + parsing does okay for most tags, but I wonder if there is a more elegant way to do this besides waiting for a valid Md like in link or bold (inline tags mostly).
• I ended up redoing the parser with regular expressions, which made my code cleaner (and less complex even if it's regex), but lists still had to be processed separately to ensure all list items are in one list. Any other ideas?
• The preview is rendered inside v-html which isn't good from a security point of view. Now this is just Md and there are no inputs or form tags inside the v-html directive, so I guess it's not so bad, but any ideas on how to render the formatted markdown? Thank you!

Hello everyone! I completed this challenge using the React library that I set up with Parcel, if anyone has any suggestion regarding the set up of this project I'll be happy to change things around. I wanted to set up React from scratch and use the router as well as practice React of course. Let me know what you think about the card flipping and the form validation. The form validation is messy as I wanted to add setTimeOut for error display but I couldn't figure out how to make a single function for it (or anything else to validate the form). Any feedback on anything is very much appreciated. Thank you!

Hi everyone! I completed this challenge using React. I am still new to React so not sure which files to delete and keep, my repository might look a little messy (and the code as well). The CSS seems short so I used regular CSS files, should I break them up for each component? Any feedback on the React code or the rest is appreciated. Thank you!

Hi everyone! I did this challenge using plain HTML, JS and organized the styles with SCSS. I did a little bit of research/learning on how to scale SVGs and use them the proper way so they behave as expected, let me know if I should've done things differently. I believe accessibility could be a lot better, let me know what I should change first. The dynamic result list is inside a ul tag, so all rows are li tags with span tags inside (does it make sense?). Any feedback on anything is greatly appreciated, thank you!

Hi everyone! I organized my stylesheets with scss partials to make is easier to read this time. I paid more attention to my html tags on this project, what do you guys think about the tags i used? Also I still have a hard time positioning background images and scaling them appropriately. Any suggestions? I have tried setting the width in percentage and the actual pixels in max-width, but the image never resized to follow the rules, so I ended up using width only (and height). I have looked at my project on Chrome, Firefox and Android, everything looks okay. When I open it on Safari it looks like I didn't make any layout (even worse on an iPhone). What did I miss? Any feedback on anything is very much appreciated, thank you!

Hi everyone! I completed this challenge using Scss to nest some elements and keep the stylesheet cleaner. The toggle switch changes the text dynamically using JS, what would be the preferred way to do this? I struggled with the mobile responsiveness to maintain the card width, so I ended up using media queries to change the width as the screen grows. I also had to set a negative margin at the very top because as the screen grows there is a strange unoccupied space at the top (at least on my computer), any idea what I did wrong ? Finally, this was my first time trying to add rules for browser support, I used a website to add vendor prefixes, but there is still a different result on Safari. Any feedback would be greatly appreciated, thank you!

Hi everyone! I realized halfway through this project that I should've used SCSS because my CSS file is lengthy. I made the slideshow using flexbox and the width of the image/div to displace left/right, please let me know if there is a preferred way to handle these. I also tried to make only two functions to slide left/right, but I got confused because there was going to be too many parameters (and for desktop/mobile), and it seemed like calling the same function twice in a row made it break. I left the commented code at the end of my JS file. Any feedback on anything would be greatly appreciated, thank you!

Hello everyone, I completed this challenge with plain HTML and CSS. Is there a better way to approach these background bubbles, as they are not responsive (I added them in my media queries), and also the profile picture (I set its position to absolute because I couldn't find a way to make it overlap the two sections). Any feedback on anything is very much appreciated!