All comments

Adriano•38,060
@AdrianoEscaraboteSubmitted about 2 years ago
👨‍💻 Hello everyone.

DAY 7/7 🎉🎊

Finally the end ahuauha, I can't describe how productive this week was, I learned a lot of new things and managed to practice a lot! Within what I learned the two most important things are:
- Bootstrap
- SASS
Plus my javascript skills have improved a lot!

Anyway, I leave a tip for those who want to improve, whether with a developer or anything else, persist! Resist the challenges that the world will put in your life, and most importantly learn from them, I guarantee you that at the end of the day all the effort will be worth it.

After this week I feel like I can learn anything, after all, it only depends on me!

I added some details:
- 👨‍💻 Custom menu bugger!
- 🎨 Custom colors and hover!
- 👨‍🎨 Dark/Light Mode!
Feel free to leave comments on how I can improve my code.

Thanks! 😊
👨‍💻 Intro section w/ dropdown w/ (HTML + SASS + JS Dark/Light Mode)
4
Asha•1,210
@livinglifemeaningPosted about 2 years ago
Congratulations Adriano for finishing your challenge! What's going to be your next one? Only tip is to use align-items property and change it's default from stretch so those brand icons don't look ugly on desktop. Also, can I ask how you implement different color schemes? I took a look through your code but couldn't tell how, and it's something I'm trying to learn.
0
Adriano•38,060
@AdrianoEscaraboteSubmitted about 2 years ago
👨‍💻 Hello guys.

DAY 2/7

In this challenge, I practiced a lot of sass, and I improved the code organization a lot, separating files containing variables and media queries into folders. I also played around with js a bit.

Test the email input, if the email the user enters is valid, a card will appear! if not an error message will appear!

-👨‍💻Email validation with a simple regex!

-👨‍🎨A custom card will appear if the email passes the test!

Feel free to leave feedback on how I can improve my code.

Thanks! 😊
👨‍💻 Fylo dark theme LP w/ (HTML + SASS + JS)
4
Asha•1,210
@livinglifemeaningPosted about 2 years ago
It is really nice that you're doing this 7 day challenge, to practice consistency and see how you improved after a week.

I think figuring out how to change the color of the social media icons and the "See how Fylo works" link along with it's arrow and line underneath on hover is a good thing to know how to do. Also, the text of the name and position is too small, and input text should inherit font-styles.

You remind me that I want to start using sass with css modules in React. An extra step but the features are nice.
Marked as helpful
0
David•8,000
@DavidMorgadeSubmitted about 2 years ago
Hello and welcome to my Password-Generator solution

Extra Features:
- Light and Dark themes. (inspired from Github user search App)
- Sets the default theme on load (depending on your preferred browser/OS theme)
- Theme gets saved on reload.
- Custom tooltip when copying the password on the clipboard
Built with:
- Create React App
- Styled Components
- Mobile First
What I Learnt:
- How to use an manipulate state with an <input type='range'> (Probably gonna update this project with an input range instead of a button)
Doubts:
- Is it worth using a <span> instead of a placeholder? They seem to be more customizable through CSS than a placeholder (positioning at least), probably going to try it for my next text input.
- Also looking for opinions on the color pallete for the light theme.
As always, any feedback is welcome here, if you have any suggestion / change I will update the project if necessary! Also looking for someone to test the App and find any bugs I missed

Thanks everyone, keep coding!
Password Generator - Light and dark themes - React && StyledComponents
2
Asha•1,210
@livinglifemeaningPosted about 2 years ago
Hi David! Beautiful project! One thing I wanted to let you know of is that on my computer when I open it, the sizing seems off, as the password generator part is too high where I cannot see the sun and moon symbol. When I open inspector tools and view mobile version I can. Also, in my personal opinion, I feel like the transition between the two color themes is slightly jarring.
1
Elaine•11,400
@elaineleungSubmitted about 2 years ago
This is my first intermediate project, and I only built this because I already made a calculator app a while ago. Since I've been seeing a number of calculator solutions in my feed, I wanted to see whether I can reuse my old one in this challenge. I ended up rewriting almost all the JS except the event listeners, but this was a really good practice in writing JS classes!

This calculator can be used with the key pad as well, and also I structured the calculator keys in my HTML in a way where a user can use the tab key if they don't want to use the numpad. The tab functionality somewhat mirrors what my Windows calculator is doing, so I think that's alright for now!

I kept the design's initial value in my calculator, but I will probably remove it later after the screenshot is taken. The only thing I need to figure out later is how to change the screenshot browser's settings and keep it in dark mode, so if anyone's got any ideas please let me know 😆

To build this, I used the calculator by Web Dev Simplified's Kyle as my blueprint; his Vanilla JS calculator is probably the best I've seen so far, so if anyone is interested, do check out his work! Also, I aim to add a second display above the main one for showing the first operand, so hopefully that's coming soon!

Please let me know if there's anything that's broken or not working the way it should. Thank you!
Responsive calculator built with Vanilla JS
9
Asha•1,210
@livinglifemeaningPosted about 2 years ago
Just here to comment that it is beautiful! I love the transition of the themes.
1
Marija H.•110
@mh1251Submitted over 2 years ago
I had a little trouble with modifying the width of the svg for the divider, so for smaller screens I replaced it with just a horizontal line. If you have any suggestions please tell me, feedback is always welcome :)
Advice generator with Vanilla JS and CSS
2
Asha•1,210
@livinglifemeaningPosted over 2 years ago
In addition to the method above, I have also been using the code snippet within the HTML file to accomplish responsive images.

<picture> <source media="(min-width: 500px)" srcset="[bigger-image]" /> <img src=[smaller-image] alt="" /> </picture>
1
kxnzx•870
@kxnzxSubmitted over 2 years ago
Hello fellow Mentee's,

For this project the banner image required a transparent color overlay. Initially, I placed the image in HTML. This however did not work very well when I began with the styling. The color overlay overflowed the height of the image and I was not able to correct it. Soon I figured out that there is an easier & efficient practice: I placed the image as a background-image property inside SCSS, but there was a problem...The image did not display on the browser. After some trial and error I realised that I used the wrong file path. After doing some research I gained some clarity. These are my notes:
- What is the difference between a folder and directory? A folder is a GUI object. Folders are essentially directories and directories hold files.
- It is important to note that the index.html always should be nested directly within the Root Directory, thus not in any subdirectories. You can visualize a Root Directory as a leader on top of a multi-level hierarchy structure with subdirectories below. When the Root Directory contains many nested subdirectories it resembles an upside down tree. The Root Directory (also named as the "Web Root"), is the publicly accessible base folder of a website. The Root Directory is marked by a / (slash) with Mac OS and Linux and a \ (backslash) with Windows.
Reminders when using "Relative File Paths":
- In which Directory is the file in which you're currently working on nested in?
  - The location of the file you want to link to is relative to the location of the file you want to link it from.
- If the file you want to link to is in the same Directory use:
  - ./
    
    you can also just type "example.jpg"
- If the file you want to link to is outside your current working directory use:
  - ../
    
    This means "leave the current folder and go to it's parent folder". The more ../../../ you use the further back you go.
- If you directly want to go to the Root Directory use:
  - /
The translation of the relative path below is: "leave this current Directory, then go to the folder images, and then select the file image-header-mobile.jpg".
```
.card_image {
      background-image: url("../images/image-header-mobile.jpg");
      background-size: cover;
      height: 15rem;
      width: 100%;
      border-radius: 8px 8px 0 0;
      position: relative;
      @media screen and (min-width: $desktop) {
        background-image: url("../images/image-header-desktop.jpg");
        grid-column: 2/3;
        grid-row: 1/2;
        height: 100%;
        border-radius: 0 8px 8px 0;
      }
      .card_image-overlay {
        position: absolute;
        inset: 0;
        background: $overlay_clr;
        opacity: 0.75;
        mix-blend-mode: multiply;
      }
    }
```
Stats Preview Card Component with CSS Image Color Overlay
1
Asha•1,210
@livinglifemeaningPosted over 2 years ago
Great job! Great practicing taking notes on what you learned :)
0
George_alex•140
@GeorgeCaldarescuSubmitted over 2 years ago
Let me know what I can change and improve.

Sometimes I'm still struggle a bit with the responsive desing
Order Summary solution
3
Asha•1,210
@livinglifemeaningPosted over 2 years ago
I agree with the other comment- for this project, the card size doesn't have to change so have a set width and a set amount of padding within the card (or a set hight).
Marked as helpful
0

Asha

All comments

👨‍💻 Intro section w/ dropdown w/ (HTML + SASS + JS Dark/Light Mode)

👨‍💻 Fylo dark theme LP w/ (HTML + SASS + JS)

Password Generator - Light and dark themes - React && StyledComponents

Responsive calculator built with Vanilla JS

Advice generator with Vanilla JS and CSS

Stats Preview Card Component with CSS Image Color Overlay

Order Summary solution