All comments

Abdul-Qayyum Olatunji•100
@QayyaxSubmitted 3 months ago
What specific areas of your project would you like help with?
Avoiding prop drilling Planning of components before starting
Product list components
1
RadaidehDaniel•370
@RadaidehDanielPosted 3 months ago
Good job. The site is responsive. To me, the logic is sound. You still need to add the confirmation order feature. Look for <dialog></dialog>, it may help. MDN dialog
Marked as helpful
0
SabaMarghania1•530
@SabaMarghania1Submitted 5 months ago
Results summary component
1
RadaidehDaniel•370
@RadaidehDanielPosted 4 months ago
Good work.

One thing to point out is that the code (interactive-price-component) is not for the site (summary component), so I will review the live site only.

The design is perfect, and it is responsive but if you change the view for things like 820*1180 (tablet view), you will notice that there is a space on top. I think you use (display: flex) to center the app. You can add media query to change the display to block or inline to make the app stick to the top border of the screen.
Marked as helpful
0
Glenda Joyce Reed•1,260
@Glenda9031Submitted 11 months ago
I welcome any suggestions and feedback,

Happy Coding!
Frontend_Quiz_App
1
RadaidehDaniel•370
@RadaidehDanielPosted 4 months ago
Great work.

The App is working as intended, but there is a missing timer. The question should have a timer.
Marked as helpful
0
Elias•100
@EliasFlorianSubmitted almost 3 years ago
responsive landing page with html and css
1
RadaidehDaniel•370
@RadaidehDanielPosted 5 months ago
Good job.
0

@nataliesmythSubmitted 5 months ago

What specific areas of your project would you like help with?

I would appreciate any help with changing the track fill color from black to green. I've tried using background image, borders, but I haven't been able to make it dynamic.

Responsive PW Generator app using utility classes

RadaidehDaniel•370

@RadaidehDanielPosted 5 months ago

Good job.

The following example is how I deal with the range input. I hope this will be helpful.

HTML

<div class="slider">
              <label for="character-length">Character Length</label>
              <p id="slider-value">10</p>
              <input
                type="range"
                id="character-length"
                name="character-length"
                min="1"
                max="18"
                step="1"
                value="10"
              />
            </div>

CSS

.slider {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 1.6rem;

  margin-block-end: 3.2rem;
}

.slider label {
  font-size: 1.8rem;
  font-weight: var(--font-bold);
  color: #e7e6eb;
}

.slider p {
  text-align: right;

  font-size: 3.2rem;
  font-weight: var(--font-bold);
  color: #a4ffaf;
}

#character-length {
  grid-column: 1/3;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;

  background: linear-gradient(
    to right,
    #a4ffaf 0%,
    #a4ffaf 50%,
    #18171f 50%,
    #18171f 100%
  );
}

#character-length:focus {
  outline: none;
}

/***** Chrome, Safari, Opera, and Edge Chromium *****/
#character-length::-webkit-slider-runnable-track {
  height: 0.8rem;
}

#character-length::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #e7e6eb;
  border-radius: 50%;
  height: 2.8rem;
  width: 2.8rem;
  margin-top: -10px;
}

#character-length:focus::-webkit-slider-thumb {
  background-color: #18171f;
  border: 1px solid #a4ffaf;
}

/******** Firefox ********/
#character-length::-moz-range-track {
  height: 0.8rem;
}

#character-length::-moz-range-thumb {
  background-color: #e7e6eb;
  border: none;
  border-radius: 50%;
  height: 2.8rem;
  width: 2.8rem;
  margin-top: -10px;
}

#character-length:focus::-moz-range-thumb {
  background-color: #18171f;
  border: 1px solid #a4ffaf;
}

JavaScript

const slider = document.getElementById("character-length");

function renderSliderValue(e) {
  valueSlider.textContent = e.target.value;
}

function renderSlider(ele) {
  var value = ((ele.value - ele.min) / (ele.max - ele.min)) * 100;
  ele.style.background =
    "linear-gradient(to right, #a4ffaf 0%, #a4ffaf " +
    value +
    "%, #18171f " +
    value +
    "%, #18171f 100%)";
}

slider.addEventListener("input", function (e) {
  renderSliderValue(e);
  renderSlider(e.target);
});

alvarozama•360
@alvarozamaSubmitted 5 months ago
What are you most proud of, and what would you do differently next time?
Next time I'd like to explore different ways to implement the percentage buttons and the firing of events associated with them. This time I added an event listener to each button through a for loop in order to stor the value of each button and use for further computation of percentages, but this presented some shortcomings that I'll explain below.
What challenges did you encounter, and how did you overcome them?
The biggest challenge was, as I said, keeping track of what percentage button was selected and using its associated value for calculating the percentages. Can't really say that I overcame them since the app, while doing what it has to, it only does so under certain circumstances.
What specific areas of your project would you like help with?
So, here are the parts of the project that I couldn't quite implement in a satisfactory fashion:
1. In order to retrieve the value of a given selected percentage button, I looped through them and used an event listener to look for clicks on said buttons. However, both the retrieval of this value and the calculatio of percentages were coded inside the same function, meaning that the calculation is only performed when clicking on a percentage button. As a result of this, the app only works when entering values for the bill and people inputs first and then selecting the desired tip percentage.
2. In line whith the previous point, I wanted to make it so that the calculations were performed in real time as the user enters, erases or changes values. To do this I tried to create different functions for retrieveng the selected bercentage button value and for performing the calculations, bus was unable to make them work in tandem.
3. Whenever the user selects a percentage button it becomes highlighted, but if the user selects a different one without using the reset button, the newly selected button becomes properly highlighted, put the previous one doesn't go back to the default state. I could't find a way to fix this and feel like the problem lies, again, with the implementation of my functions and event listeners.
Tip calculator app
1
RadaidehDaniel•370
@RadaidehDanielPosted 5 months ago
Well done. You already pointed out the challenges you had.

I will help you with the highlight issue.

function highlight() { for (let i = 0; i < percentInput.length; i++) { percentInput[i].addEventListener('click', () => { percentInput[i].style.backgroundColor = "var(--clr-strongcyan)"; percentInput[i].style.color = "var(--clr-verydarkcyan)"; }) } }

In this function, you loop over the percentages button to add the highlight style. Similarly, we can loop over them again to remove the style if a button is clicked or the custom input is in focus.

function removeHighlight() { for (let i = 0; i < percentInput.length; i++) { percentInput[i].style.backgroundColor = "var(--clr-verydarkcyan)"; percentInput[i].style.color = "var(--clr-white)"; } }

Also, you can use utility classes in CSS, like creating a class called "active" that you can add or remove.

CSS: .active { background-color: var(--clr-strongcyan); color: var(--clr-verydarkcyan); } JS: percentInput[i].classList.add("active") OR percentInput[i].classList.remove("active")
Marked as helpful
1
Ola•150
@ladibanks1Submitted 5 months ago
What are you most proud of, and what would you do differently next time?
Getting sharper in layout
What challenges did you encounter, and how did you overcome them?
Handling json
What specific areas of your project would you like help with?
All most especially my css and js
Time-Tracking using js
1
RadaidehDaniel•370
@RadaidehDanielPosted 5 months ago
Good work.

I have a few comments. The design needs to be more accurate. The position of the SVG on top of each card is not accurate. There is a missing Ellipsis. JS logic is working, but you can learn more about forEach() function.
0
SandyAstorga•460
@SandyAstorgaSubmitted 6 months ago
What are you most proud of, and what would you do differently next time?
Using Bootstrap in this challenge seemed like a great achievement, I had never used it before and I really loved it, it has several very interesting tricks and the responsive side is magnificent.
What challenges did you encounter, and how did you overcome them?
The biggest challenge was getting to grips with Bootstrap and realizing that I need to practice Javascript more.
What specific areas of your project would you like help with?
I would like recommendations to learn Javascript faster, I really need it. 😆
Newsletter sign-up form
1
RadaidehDaniel•370
@RadaidehDanielPosted 6 months ago
Good work.

I'm already learning JS, so I won't be able to give advice. Media tutors recommend doing projects and have good reference resources.

I am using Webdev and MDN.
1
Ash•220
@ash-109Submitted 6 months ago
What are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?
.
What specific areas of your project would you like help with?
.
article preview component
2
RadaidehDaniel•370
@RadaidehDanielPosted 6 months ago
Nothing to add. Good work. I learned from you.
0
vv•140
@dblvvSubmitted 6 months ago
What are you most proud of, and what would you do differently next time?
leveraging opacity is nice, didnt know that that would come in handy. i find through grid layout that there is a css "gap" property, for sure useful; i should use that more often over paddings and margins
What challenges did you encounter, and how did you overcome them?
this one is not really complex
What specific areas of your project would you like help with?
this one is not really complex
testimonials-grid-section-main
1
RadaidehDaniel•370
@RadaidehDanielPosted 6 months ago
Good use of grid display. The mobile view is missing.
0
Daniel999l•100
@Daniel999lSubmitted 6 months ago
What are you most proud of, and what would you do differently next time?
Just by seeing the screenshot, I was able to deduce how I was going to write the CSS code. especially the "flex direction: column;" for the middle layout with two different card.
What challenges did you encounter, and how did you overcome them?
I had a very stupid problem that took me a while to get. in my media query instead of "(min-width: 1024px)", I wrote "(min-width: 1024)". It took me a while to get it but I was able to solve it and I finished the project soon after
What specific areas of your project would you like help with?
I'm good for now.
4 card layout with css flex-grid
2
RadaidehDaniel•370
@RadaidehDanielPosted 6 months ago
Thanks, Daniel, for sharing your design with us.

I want to mention one recommendation, which is using semantic HTML. You use <div> only in your HTML structure.

You can learn more about semantic HTML by reading this article.

I hope this helps.
0
Chris•110
@cgyeagerSubmitted 6 months ago
What are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?
not sure how to get image in desktop to match original
What specific areas of your project would you like help with?
any
Product Preview Card
1
RadaidehDaniel•370
@RadaidehDanielPosted 6 months ago
Define width and height values.
0

RadaidehDaniel

All comments

Product list components

Results summary component

Frontend_Quiz_App

responsive landing page with html and css

Responsive PW Generator app using utility classes

Tip calculator app

Time-Tracking using js

Newsletter sign-up form

article preview component

testimonials-grid-section-main

4 card layout with css flex-grid

Product Preview Card