codecolastudio• 100
@cruz-jerwin15
Submitted
This is my 7th challenge and 1st under intermediate category. I just want to ask if the way I change the themes is okay.
Thanks in advance.
Matthew Van Pelt
@Mattvp21
All comments
- Matthew Van Pelt• 575
@Mattvp21
Posted
The way you change the theme is fine. It's very similar to the way I did mine by having 3 circles and toggling the opacity. I think you could've made it easier if you put a theme-1 id on your body, set the colors to your elements accordingly, and then set your id attribute accordingly in your javascript. So for example, if you switch to theme 2, your css should be set to something like #theme-2 .calc {} and your javascript will be like document.body.setAttribute('id', 'theme-2'). Hope that makes sense.
Also, I think the theme box should be a little bigger and the circles should just about touch each other. I'm having trouble clicking the theme at times. Add cursor:pointer to the box so it's more clear on where the user should click.
It looks good! Great work and happy coding!
Matt
0 - Alisher Toshmurodov• 330
@alishertoshmurodov
Submitted
I had trouble with the slider that changes the theme. Therefore I made my custom switchers.
Matthew Van Pelt• 575@Mattvp21
Posted
Hi Alisher,
I just did this challenge and I had trouble with that slider as well. What I did was make the background with a little bit of border-radius and set the width to look right and then built 3 circles with the opacity: 0; on 2 and 3 and then toggled accordingly. For example, if I clicked theme 3, theme 1 and 2s opacity would be 0 and 3 would be set to 1 while setting the id attribute of the body based on the theme. You can use my code for reference if you'd like.
I like how you have functionality on the equal button after the original operation is performed. Really cool touch!
Hope this helps! Happy coding!
-Matt
1 - Rachel• 80
@rachelpr
Submitted
Wondering if there are any tips for optimizing loading the advice slip on the page? Or anything that would make this smoother? Thanks!
Matthew Van Pelt• 575@Mattvp21
Posted
Hi Rachel,
I have a few tips.
-You may want to write the getAdvice function as an async/await function -Instead of doing window.reload on the dice button, I suggest adding an event listener to look for a click that will listen for your generateAdvice function -I suggest using textContent instead of innerHTML. innerHTML can open a website to cross-site-scripting attacks and shouldn't be used.
- It's good practice to put things like document.querySelector.ononon into a global variable. I would do something like const adviceCard = document.querySelector('.advice-card). It's easier to manage when projects become large.
I hope this is helpful and happy coding! :)
-Matt
Marked as helpful
1 - kareem• 80
@abdelkd
Submitted
This project made me thankful for how much front-end frameworks makes life easier.
Matthew Van Pelt• 575@Mattvp21
Posted
Hi Kareem,
Your'e not displaying the .container__thanks after submitting because its inside the section tag that you are hiding. Try displaying it after the .container-rating-state section and see how that goes.
Happy coding! :)
Matt
1 - Malcolm Mello• 180
@MalcolmMello
Submitted
Hey guys! I'm deploying again because the last time I tried github pages and I ended up having some issues because the URL was just my README file, so here's my solution again! If you find some error or want to give me any tips, feel free to let me know.
SpaceTourism, styled-components, react-router, contextAPI,
#react#react-router#redux#styled-components#typescriptMatthew Van Pelt• 575@Mattvp21
Posted
Really cool! I'm thinking of picking up this project myself. You did very well making it responsive! I did notice a small bug. The buttons on the sections don't reset after I leave the section. So for example, if I go to destination and click Europa then go to another section, when I come back, the moon page will be there, but the button state is still Europa. Hope that makes sense. All you have to do is reset the button. Happy coding :)
Marked as helpful
0 - Carlin• 20
@carlosibarrola
Submitted
Matthew Van Pelt• 575@Mattvp21
Posted
Really nice animation! I've seen many of these and this is unique! Good job!
Marked as helpful
0 - FZSZ• 75
@FZSZ
Submitted
i don't know, i really can't do it properly
Matthew Van Pelt• 575@Mattvp21
Posted
It looks really good! It's only a centering issue in desktop. What I would've done is take the #content or where you have the whole card and do display: flex, justify-content, align-content both in the center, and that usually takes care of that. Try to avoid specifying the height when it comes to the main content. Also, the image and content is not 50% 50%. I made that mistake too and its very easy to overlook. It's more like 45% image 55% content. So when you re-align it, it should look closer to the design.
Marked as helpful
1 - Pranav• 500
@pranav1597
Submitted
I don't know how to border radius on the linear-gradient border(border-top) if anyone can help me it would be helpful. Any feedback or suggestions are welcome.
Matthew Van Pelt• 575@Mattvp21
Posted
Great job! The checkbox only works when I click the space in the checkbox outside of the button. I think you should have one radio button thats either checked/unchecked and apply the style change of the ball in the javascript.
-Matt
1 - Nick Tesh• 40
@nicktesh
Submitted
Hey everyone! This is my very first challenge here on Frontend Mentor. I utilized Flexbox and SCSS for this challenge. I typically use Bootstrap for most of my projects but would like to master Flexbox alone. Side note: This is my second week of using SCSS and I am loving it. Let me know what you think!
Matthew Van Pelt• 575@Mattvp21
Posted
Looks good! Especially on mobile. Good use of sass variables as well. My suggestion would be to look into BEM naming conventions. It helps keep sass organized and i believe its really important for big projects.
Happy coding :) Matt
1 - Emanuel John Ameh• 65
@Emabliss
Submitted
The functionality is okay, but can someone please tell me why it's responsive on my local server but not when viewed live? Please I really want to know.
Matthew Van Pelt• 575@Mattvp21
Posted
Hey Emanuel,
Your custom tip part isn't working for me. I tried putting the number and number and % in the input.
-Matt
0 - pierre-pellegrino• 970
@pierre-pellegrino
Submitted
It was fun to make the toggle button controllable with arrow keys.
Matthew Van Pelt• 575@Mattvp21
Posted
The arrow buttons are a cool touch! Good job! Lol no worries about the checkbox, I did the same kind of thing on mine :)
1 - isabela lima• 35
@isabelalims
Submitted
I'm studying HTML and CSS for a short time and this is my first challenge. I still don't know how to adjust the page correctly, the card was slightly out of line with the model sent by the Front End Mentor. If anyone can help me, I will be extremely grateful. =)
If you have any improvements to make in my code, I accept your suggestion. Thanks!
Matthew Van Pelt• 575@Mattvp21
Posted
Hi Isabella,
My suggestion is to look into css @media queries. w3schools.com has some really good documentation. What I would do is set the @media screen (max-width:550px) { set card to the center using transform:translate or justify-content:center }
Hope this helps. Happy coding!
Matt
1 - Ruben Rollin• 30
@RuBeeN-cmd
Submitted
I am a newbie so I would have lot of feedback plz ;)
Matthew Van Pelt• 575@Mattvp21
Posted
Hi Ruben,
-
I had the same issue with the margin-top on the bottom container. Change the border size to .5px, or you can go into your hs1, and give it an opacity around .2 -.5.
-
Also, I'm trying to figure out what happened to the background images. Maybe its the link? Try images/bg-pattern etc.
Great job!
Matt
0 -
- Matthew Van Pelt• 575
@Mattvp21
Submitted
Any feedback is greatly appreciated!
Matthew Van Pelt• 575@Mattvp21
Posted
Hey David,
I see the main-box now! It’s supposed to be absolute and thats a mistake that just went past me. That would probably explain why I had so much trouble positioning it so thanks for pointing that out!
With the button, I totally agree and I didn’t want to use that inline style, but I was having trouble with the button. I think I’m just going to save myself the trouble and use a button generator.
I’m doing an Udemy Bootcamp that I love! It’s the ultimate web developer Bootcamp taught by Dr Angela Yu. The only thing is she teaches the bootstrap grid but not the css. So one day I’ll definitely check out a tutorial on how to use the CSS grid.
Again, thanks for the feedback
Matt
0 For this challenge I used:
- Screenreader only text
- Pseudo-elements for background images and borders
- The
zwnj;method to make the stats list keep it's semantics even using Voiceover in Safari - Scss and BEM naming
Matthew Van Pelt• 575@Mattvp21
Posted
Hi Grace,
I studied your html a bit to see how you handled the bottom portion of the card and I like how you used the section tags with the header and footer. What I’m getting at while I look at solutions is there’s a lot of different ways to tackle this, just some solutions make life easier than others. I’m going to do a new exercise this weekend and try and put this into practice.
1
