@Killua-22Submitted 4 months ago
Latest comments
- @RohloffmeisterPosted about 1 month ago
Looks pretty good. The only thing missing is responsiveness. Also, in cases like this, I personally would use classList.add / classList.remove with a special class like "active" or "hidden" when making CSS changes with JavaScript, instead of changing the inline style. But this is just personal preference
0 - P@jdillard2532Submitted 3 months ago@RohloffmeisterPosted 3 months ago
Looks pretty good. Only thing I would change is something with the rating buttons on smaller screens. They can get pretty close.
1 - P@TranDanh1122Submitted 3 months agoWhat specific areas of your project would you like help with?
I try my best to keep my code look good, but i fail I dont know why, what i can do now? Please help
@RohloffmeisterPosted 3 months agoFeedback
Code Organization: The use of an object (coreProcesser) to encapsulate functionality is a good practice. However, consider breaking it down into smaller modules or functions for better readability.
Dynamic Rendering: Your methods for rendering topics, questions, and answers are effective. Ensure that you consistently handle potential errors when fetching data.
Progress Bar: I have notices that the progress bar is not correctly working when in dark mode. After turning on dark mode and submitting an answer the bar disappears.
Suggestions for Improvement
Code Formatting: Use a code formatter like Prettier to maintain consistent indentation and spacing throughout your code.
Modularization: Break down large functions into smaller, reusable ones. This will make your code easier to understand and test.
Comments and Documentation: Add comments to explain complex logic or decisions in your code, which will help others (and yourself) understand it later.
Answer to Your Question
To improve the appearance of your code, consider the following steps:
Use a Code Formatter: Tools like Prettier can automatically format your code for consistency.
Follow Best Practices: Adhere to best practices in naming conventions and structure to enhance readability.
Refactor Regularly: Regularly review and refactor your code to eliminate redundancy and improve clarity.
By implementing these strategies, you can enhance both the aesthetic and functional quality of your code.
Marked as helpful1 - P@loiccapeSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I successfully created a functional password generator. I prioritized having multiple functions with specific functionalities rather than large functions with a lot of code.
What challenges did you encounter, and how did you overcome them?I didnt know how to put the background color following the cursor on the range input
@RohloffmeisterPosted 5 months agoThe text looks generally good, but there are a few minor errors that can be corrected. Here's the revised version:
"Looks very good! Especially the JavaScript is very nice!
First, to your range input.
I did it with JavaScript because I couldn't find a way to do it in CSS.
slider.addEventListener("input", function () { const value = (slider.value - slider.min) / (slider.max - slider.min) * 100; slider.style.background = `linear-gradient(to right, var(--green) ${value}%, var(--very-dark) ${value}%)`; });First, the position of the slider is calculated and gives back a percentage value (
const value =...).This is used to give the slider a linear-gradient background, and the value is inserted. Because the end and start value of the gradient is the same value, it will be instant. This is done every time the slider is moved.
If you do this, you would also need to add the linear-gradient to your stylesheet according to the starting value of your range input. In your case, it's 50%:
input[type="range"] { ... background: linear-gradient( to right, var(--green) 50%, var(--very-dark) 50% ); ... }Also, I personally would change the min and max of the range input to something like 0-20. Having a generally higher range also makes the input feel way smoother.
If you would like to change the thumb of the slider, here's how I did it:
input[type="range"] { width: 100%; height: 10px; appearance: none; background: linear-gradient( to right, var(--light-neon-green) 50%, var(--dark-gray) 50% ); border-radius: 25px; } input[type="range"]::-webkit-slider-thumb { height: 25px; width: 25px; border-radius: 50%; background-color: var(--dark-gray); border: 2px solid var(--light-neon-green); appearance: none; } input[type="range"]::-moz-range-thumb { height: 25px; width: 25px; border-radius: 50%; background-color: var(--dark-gray); border: 2px solid var(--light-neon-green); appearance: none; }The last two selectors do the same, but the last one is especially for Firefox.
Important is that you do
appearance: none; this overrides the standard look of the browser.Otherwise, your code looks good. Great Job!
If you want to check out my implementation, here's the link: Frontend Mentor Project
Marked as helpful0 - @mostafa183Submitted 5 months ago@RohloffmeisterPosted 5 months ago
HTML Structure
The HTML is well-organized and uses semantic elements effectively:
- Proper use of
<!DOCTYPE html>and correct language declaration - Logical structuring with
<div>elements for containers and sections - Appropriate use of form elements like
<input>and<button> - Clear separation between input and output areas
Potential improvements:
- Utilize
<form>for input fields to enhance semantics - Implement
<fieldset>and<legend>to optimize form field grouping
CSS Styling
While the CSS creates a visually appealing layout, there are several areas that need improvement:
- Overreliance on pixel units (
px) for sizing, which can hinder accessibility and responsiveness - Lack of CSS variables for repeated values, leading to potential inconsistencies and maintenance issues
- Absence of media queries, limiting the application's responsiveness on different screen sizes
- Insufficient use of relative units (
em,rem) for better scalability - Some redundant declarations that could be optimized
Specific issues:
h1 { font-size: 24px; letter-spacing: 8px; color: #7f9c9c; }This heading style lacks flexibility. Consider using
remfor font-size andemfor letter-spacing..inputs, .outputs { padding: 20px; width: 50%; }Fixed width percentages can cause layout issues on smaller screens. A more flexible approach is needed.
input[type="number"] { /* ... */ font-size: 18px; /* ... */ }Again, using
pxfor font-size limits scalability.remwould be more appropriate here.Areas for significant improvement:
- Implement a CSS reset or normalize.css to ensure cross-browser consistency
- Use CSS Grid in combination with Flexbox for more complex layouts
- Implement a mobile-first approach with appropriate breakpoints
- Create a modular CSS structure using methodologies like BEM or SMACSS
JavaScript Functionality
The JavaScript code covers the basic requirements and is functional:
- Clear function structuring
- Effective event handling for user inputs
- Implementation of calculation logic
Opportunities for improvement:
- Use constants for unchanging values
- Implement input validation for more robust error handling
- Consider refactoring to improve code reusability
Overall Assessment
While this code represents a functional implementation of a tip calculator, it has room for improvement, particularly in the CSS. The HTML structure is solid, and the JavaScript fulfills the basic requirements. However, the CSS lacks modern best practices and responsiveness.
For future enhancements, consider:
- Implementing accessibility features (e.g., ARIA attributes for better screen reader support)
- Adding localization features for different currencies and languages
- Thoroughly revising the CSS for better responsiveness and maintainability
The developer shows promise in creating functional web applications but should focus on improving CSS skills and adopting modern web development practices.
// Example of a potential refactoring for the calculation function function calculateTip(bill, tipPercent, people) { if (people === 0) return { error: "Number of people can't be zero" }; const tipAmount = (bill * (tipPercent / 100)) / people; const totalAmount = (bill / people) + tipAmount; return { tipAmount: tipAmount.toFixed(2), totalAmount: totalAmount.toFixed(2) }; }This refactored function could improve code reusability and facilitate easier testing.
0 - Proper use of
- P@loiccapeSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I did understand pretty well how to fetch data on this JSON file, and use it top generate DOM in javascript. Maybe there is a simple way to do this project without generate everythings on js .
What challenges did you encounter, and how did you overcome them?Still not about coding , most of my challenge are how to think about the way i will do this project.
@RohloffmeisterPosted 5 months agoYour time tracking dashboard project shows good web development skills. You've successfully fetched JSON data and dynamically created DOM elements. The responsive design works well on various devices.
Strengths
- Clear JavaScript functions with good comments
- Effective use of variables for colors and images
- Well-structured and readable code
Suggestions for Improvement
- Use more HTML structure. This improves initial load time and SEO.
- Implement error handling for data fetching.
- Consider using template literals for HTML strings.
- Add smooth transitions between time frames.
- Store user preferences in local storage.
- Pay attention to accessibility with ARIA attributes.
Your approach of generating everything in JavaScript is interesting. For future projects, a mix of static HTML and dynamic JavaScript could be beneficial. This would combine the advantages of both approaches.
Your challenge in planning the project approach is normal. Try sketching the design beforehand and breaking the project into smaller tasks.
Overall, you've created a solid project. With the mentioned improvements, you can further enhance your web development skills.
Marked as helpful0
