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
The 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
HTML Structure
The HTML is well-organized and uses semantic elements effectively:
<!DOCTYPE html> and correct language declaration<div> elements for containers and sections<input> and <button>Potential improvements:
<form> for input fields to enhance semantics<fieldset> and <legend> to optimize form field groupingCSS Styling
While the CSS creates a visually appealing layout, there are several areas that need improvement:
px) for sizing, which can hinder accessibility and responsivenessem, rem) for better scalabilitySpecific issues:
h1 { font-size: 24px; letter-spacing: 8px; color: #7f9c9c; }
This heading style lacks flexibility. Consider using rem for font-size and em for 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 px for font-size limits scalability. rem would be more appropriate here.
Areas for significant improvement:
JavaScript Functionality
The JavaScript code covers the basic requirements and is functional:
Opportunities for improvement:
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:
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.
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.
Your 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
Suggestions for Improvement
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.
There is nothing I am most proud of in this question, because I was stuck in Javascript for almost a day, and I still need to strengthen my strength, so I am not particularly proud of it. ※Record: one day
在這題當中我沒有最自豪的地方，因為我卡在Javascript卡了快要一天的時間，對於自己的實力還尚需加強，所以沒有特別自豪的地方。 ※紀錄：一天
What challenges did you encounter, and how did you overcome them?Almost all of them contain a lot of Javascript, and there are also layout issues.
幾乎都是Javascript的部分比較多，還有排版的問題。
First of all, thank you for coming to see my finished product. I am not very familiar with Javascript yet, so I may need to improve on the grammar, as well as the css part. Please give me your advice!
首先，先謝謝您前來觀看我的成品。 我對於自己在Javascript上還沒有到很熟悉，可能在語法上還需再加強，css的部分也是，再請大家多多指教！
Positive Aspects:
The HTML structure is well-organized and semantically correct, using appropriate tags like <article>, <section>, and others.
The CSS utilizes modern techniques such as Flexbox for layout and custom properties for colors
The JavaScript code is concise and effective in implementing the share button functionality:
shareIcon.addEventListener('click', () => {
shareOptions.classList.toggle('visible');
shareIcon.classList.toggle('active');
});
Areas for Improvement:
The CSS could be moved to a separate file to enhance readability and reusability.
Some CSS selectors could be more specific to avoid unintended style overlaps.
Responsiveness Issues:
.card { width: auto; height: 300px; }
<source media="(max-width:650px)" srcset="./images/drawers.jpg" />
.share-option { position: absolute; margin-top: -125px; margin-left: -106px; }
To improve responsiveness, consider:
max-width and min-width instead of fixed widthsIt would be advisable to test the design on various devices and make appropriate adjustments to ensure better responsiveness.
Keep it up. Best Regards, Ulrich Rohloff
I'm proud to have managed to finish the project.
What challenges did you encounter, and how did you overcome them?The challenge of validating the email field using native HTML5 validation and displaying error messages using the validationMessage property.
What specific areas of your project would you like help with?I would like to know if the logic I used was good or if I could do it in a simpler way. Any suggestions for improvements will help me do better next time.
Looks pretty good. Only thing i would add is a way to change the email in the success window to the email input
yourtext.innerHTML = yourtext.innerHTML.replace(
"[email protected]",email );
This would replace "[email protected]" with the email that was set in the input box. "yourtext" is the variable where you have to save your paragraph in. You could add the code in your "saveEmail" Function.
kind regards, Ulrich
Can anyone please help me out in getting the pop up display for desktop
Hello, good job so far. To get to your question here is my share button html
<div id="shareButton" class="share">
<img
id="shareImg"
class="share-button"
alt="Share icon"
src="images/icon-share.svg"
/>
<div id="shareWindow" class="share-hidden">
<div class="content">
<span>SHARE</span>
<a href="" target="_blank"><img alt="Facebook Icon" src="images/icon- facebook.svg"/></a>
<a href="" target="_blank"><img alt="Twitter Icon" src="images/icon-twitter.svg"/></a>
<a href="" target="_blank"><img alt="Pinterst Icon" src="images/icon-pinterest.svg"/></a>
</div>
</div>
</div>
This is both for my mobile and desktop view. Instead of using two share button try using one and make it hover over the popup window (z-index). Heres my css code for the popup
/* <-------------------------------------------- Dekstop -------------------------------------> */
footer .share {
display: flex;
position: relative;
justify-content: center;
align-items: center;
width: 0px;
aspect-ratio: 1/1;
border-radius: 50%;
background-color: var(--light-grayish-blue);
z-index: 3;
}
.share > img.active {
background-color: var(--light-grayish-blue);
}
footer .share > img {
width: 27px;
overflow: visible;
aspect-ratio: 1/1;
}
.share-hidden {
z-index: 15;
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
min-width: 200px;
width: fit-content;
padding: 0.5rem 1rem;
border-radius: 10px;
background-color: var(--very-dark-grayish-blue);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.share-hidden::after {
content: '';
position: absolute;
top: 99%;
left: 50%;
border: 10px solid transparent;
border-top-color: var(--very-dark-grayish-blue);
transform: translateX(-50%);
}
.share-hidden .content {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
}
.share-hidden img {
height: clamp(30px, 2vw, 40px);
aspect-ratio: 1/1;
position: relative;
flex-shrink: 0;
z-index: 11;
margin: 0 1rem;
cursor: pointer;
padding: auto;
}
/* <------------------------ Mobile -------------------------------------> */
footer .share {
display: flex;
justify-content: center;
align-items: center;
min-width: 40px;
width: 40px;
aspect-ratio: 1/1;
border-radius: 50%;
}
footer .share > img {
width: clamp(12px, 4vw, 100px);
background-color: var(--light-grayish-blue);
aspect-ratio: 1/1;
padding: 9px;
border-radius: 50%;
z-index: 11;
}
.share img.active {
background-color: white;
}
.share-hidden {
position: absolute;
bottom: 0;
left: -20px;
right: -20px;
background-color: var(--very-dark-grayish-blue);
height: 100%;
display: none;
align-items: center;
justify-content: flex-start;
padding: 0 1.2rem;
z-index: 5;
}
.share-hidden.active {
display: flex;
}
.share-hidden .content {
display: flex;
align-items: center;
justify-content: flex-start;
width: 65%;
}
.share-hidden span {
color: var(--grayish-blue);
text-transform: uppercase;
letter-spacing: 0.3em;
margin-right: 0.5rem;
}
.share-hidden img {
height: clamp(20px, 7vw, 40px);
aspect-ratio: 1/1;
margin: 0 0.5rem;
cursor: pointer;
}
Might be a bit much but it worked for me. I bassicly have the elements from the popup inside the button div (in the html) and made the popup position absolute so i can always have it hover over the middle of the button
z-index: 15;
position: absolute;
bottom: 125%; /* Offset is 125% of the button height starting from the base of the button so the popup hovers over roughly 25 % of the button height over the button*/
left: 50%; /*Offset is 50% of the button width starting from the left side of the button*/
transform: translateX(-50%) /* adds the -50% of the popup window width to the
offset*/
And for the javascript i would suggest you to use .classList.toggle("")
Sorry if its to hard to understand i dont know how to explain stuff.
If you want to look at how i did this website, heres the reposetory and live website
Github Repo
Live Website
I really struggle with image as background, taking 100% of the screen, while having a padding.
Hi, Your Website looks good so far. To start with your problem you could try putting the footer outside of your <main> (this also helps with accessibility. If you want to know more google "HTML Semantic Elements"). I also saw that the 4 images can get pretty big. I personally would use the grid property.
/* Dekstop and Tablet*/
.img-grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.img-grid img{
width: 15wv;
}
/* Tablet */
.img-grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.img-grid img{
width: 22wv;
}
/* Mobile */
.img-grid {
display: grid;
grid-template: repeat(2, 1fr) / repeat(2, 1fr);
}
.img-grid img{
width:40wv;
}
Thats how i did it. I hope this helped you a bit.
Looks very good so far. I personaly would've added another media query(between 500px width and 1000 px width), because the boxes get really thin when you have a thin screen over 500px wide.
i would love to research more.
What challenges did you encounter, and how did you overcome them?i had issues doing the four card in different positions.
That looks very good. I dont really know what could be improved. I personly would limit the width of the cards so they dont stretch so much.
Looks very good. I dont see any problems.
Looks pretty good. Only thing i can say is that you should probably size everything up since the text is barely readable without zooming.
Looks good so far. You could play around with the "font-weight:" to get the font thinner for the "Front-end developer..." part and maybe add a border radius to the buttons.
