@ShreyashParab
P
RadaidehDaniel
@RadaidehDanielAll comments
- P@RadaidehDaniel
Good work, building this project without a framework is a fantastic skill.
- @ManojSinghDashauniP@RadaidehDaniel
Good job, Manoj.
I have two comments regarding the logic. You missed the total mortgage amount over the term. Consider splitting the JSX in the Container into components.
I hope I helped.
- @QayyaxWhat specific areas of your project would you like help with?
Avoiding prop drilling Planning of components before starting
P@RadaidehDanielGood 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 - P@SabaMarghania1P@RadaidehDaniel
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 - P@Glenda9031P@RadaidehDaniel
Great work.
The App is working as intended, but there is a missing timer. The question should have a timer.
Marked as helpful - @EliasFlorianP@RadaidehDaniel
Good job.
- P@nataliesmythWhat 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.
P@RadaidehDanielGood 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); }); - @alvarozamaWhat 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:
- 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.
- 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.
- 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.
P@RadaidehDanielWell 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 - @ladibanks1What 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
P@RadaidehDanielGood 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.
- @SandyAstorgaWhat 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. 😆
P@RadaidehDanielGood 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.
- @ash-109What 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?.
P@RadaidehDanielNothing to add. Good work. I learned from you.
- @dblvvWhat 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
P@RadaidehDanielGood use of grid display. The mobile view is missing.
- @Daniel999lWhat 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.
P@RadaidehDanielThanks, 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.
- @cgyeagerWhat 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
P@RadaidehDanielDefine width and height values.
- @Makhosi1P@RadaidehDaniel
Good job, Nomakhosi.
I want to add one trick to your arsenal.
Instead of using an inline-styles
<th style="border: none;">Fat</th> <td style="border: none;">22g</td>you can replace it with a CSS line
table tr:not(:last-child) { border-bottom: 1px solid #ddd; }This will add a border line to the bottom of each row, excluding the last row.
Marked as helpful - @AdkasyWhat are you most proud of, and what would you do differently next time?P@RadaidehDaniel
Good job, Adkasy.
I am a beginner developer, so I will help with what I have learned.
#1 Your design seems to be crushed on smaller screens (below 386px). Specifically, the paragraph 'Front-end developer and avid learner' and the <h1>Jessica Randall</h1> section. To address this, consider the use of the CSS property text-align.
.profile-container { text-align: center; }#2 I do not recommend using inline Styles, making style debugging harder in bigger designs.
<p style="font-size: medium; font-weight: 300"> "Front-end developer and avid learner" </p>I hope this help.
Marked as helpful - @Nasserio10P@RadaidehDaniel
Good job asserio10.
I am a beginner developer, so I do not have much experience in front-end development.
I want to point out a few points in the design that could be improved.
First, the "HTML & CSS foundations" title should have a hover effect that changes its colour to yellow.
h2:hover { color: yellow; }Second, Figtree font should be applied to every text.
html { font-family: 'Figtree',sans-serif; }I hope that I helped, and I am sorry for any English language mistakes.
- @angelica-vianaWhat are you most proud of, and what would you do differently next time?
Consegui resolver o desafio de forma ágil e fixar os conhecimentos já adquiridos em HTML e CSS.
What challenges did you encounter, and how did you overcome them?Centralizar todo o componente na tela. Pesquisas no Youtube.
What specific areas of your project would you like help with?No momento nenhuma.
P@RadaidehDanielGood job.
