Mikhil Desai

@mike15395

All comments

P
toshirokubota•720
@toshirokubotaSubmitted 3 months ago
What are you most proud of, and what would you do differently next time?
I was able to populate the content semi-programmatically, although the data is hard-coded inside... I thought about making it completely dynamic but it turned out being more difficult than I wanted to spend time on.

I wanted to set the background of the background color of each category programmatically from the color of the SVG icon. It could be done, but I did not have time to work on it... But at least, I thought about it!
What challenges did you encounter, and how did you overcome them?
To populate the content dynamically, I pasted the provided json file inside
What specific areas of your project would you like help with?
There is an outline on the "Continue" button when it is focused. I tried to remove it by setting outline: none, but it did not disappear completely.

Are there easy ways to read a local file without running a server nor modifying the security settings of the browser?
results summary component with javascript and flexbox
1
Mikhil Desai•560
@mike15395Posted 6 days ago
@toshirokubota Congratulations on completing the challenge!

Here are few improvements:

Dynamic code from data.json

let summaryContainer = document.getElementById("summary-container"); function getData() { fetch("./data.json") .then((res) => res.json()) .then((data) => displaySummaryData(data)); } getData(); function displaySummaryData(data) { let summaryContent = data.map((item) => { return ` <div class="flex flex-row justify-between bg-[${item.bgColor}] p-3 rounded-lg"> <div class="flex flex-row gap-3"><img src=${item.icon} alt="icon-reaction"> <span class="text-[${item.textColor}]">${item.category}</span></div> <span> <strong>${item.score}</strong> <span class="text-[#303B59] font-bold">/ 100</span></span> </div>`; }); console.log(summaryContent, "summary content"); summaryContainer.innerHTML = summaryContent.join(""); }

center main div,

display:"flex"; justify-content:"center"; align-items:"center"; height:"100vh";

Add cusor-pointer to button

Rest everything is good! Happy Coding!
0
AnDev•510
@AnDevMSubmitted 13 days ago
Body Mass Index calculator
1
Mikhil Desai•560
@mike15395Posted 11 days ago
hey @AnDevM Congratulations on completing the challenge!

Your solution is awesome and great work!

Here are small micro-improvements from my side:

For normal weight category, the text weight is rendered two times, to fix this just remove weight text from line 52->bmic/src/components/MetricCalculator.tsx.

Desktop view of Last section cards is not as per design. You can use grid layout with more cols like 16 and adjust the colspan accordingly to get desired result.

Happy Coding!
Marked as helpful
0
P
Habeeb Kareem•640
@olaide-hokSubmitted 21 days ago
E-commerce product page
1
Mikhil Desai•560
@mike15395Posted 20 days ago
@olaide-hok Congratulations on completing the challenge!

Your solution is excellent and nice work!.

Few micro-improvements(as per design) from my side:

Add hover effect for add-to-cart and checkout buttons.

Mobile view - after opening menu-sidebar, the image-carousel prev-buttons is displayed in front of menu-sidebar hiding menu contents.

Happy Coding!
1
Utkarsh Sachan•300
@Utkarsh860Submitted 26 days ago
News Homepage
1
Mikhil Desai•560
@mike15395Posted 25 days ago
Congratulations @Utkarsh860 on completing the challenge!

Your solution looks good and is responsive as well.

But it would be more better if you would have used semantic HTML like <header> <nav> <aside> <article> with proper aria-label wherever required.

Your solution accessbility score is 88 on lighthouse(rightclick->inspect-> >> ->lighthouse->check accessibilit score). Make sure it is 100.

I didn't understand the usage of temp.txt file in your code.

Rest everything is perfect and well written. Happy Coding!.
0
Fernando Batista•530
@FernJBatistaSubmitted 29 days ago
Contact form - HTML5, SCSS, Mobile First, Vanilla JS.
1
Mikhil Desai•560
@mike15395Posted 28 days ago
@FernJBatista congratulations on completing the challenge!

Here are few missing points in your solution:

success message not displayed.

error message for radio buttons not displayed.

last check box error message should be in red color.

not responsive.

Rest your code in well written and 100% accessible. Happy coding!
Marked as helpful
0
P
navarroemiliano•270
@NavarroEmilianoSubmitted about 1 month ago
Responsive FAQ Accordion Built with HTML, CSS, and Vanilla JavaScript
1
Mikhil Desai•560
@mike15395Posted 30 days ago
@NavarroEmiliano Congratulations on completing the challenge!

Your solution is awesome and looks pixel perfect to design.

If you would have used semantic HTML like <details></details> and <summary></summary> then it would be more accessible.

you can read more about it here.

Happy Coding!
Marked as helpful
0
P
Ilya Yudin•910
@yudin7324Submitted about 1 month ago
Interactive rating | HTML, CSS, JS
1
Mikhil Desai•560
@mike15395Posted about 1 month ago
Hey @yudin7324 congratultions on completing the challenge!

You are very close to the design but here are some micor-improvements from my side:

Arrange html,css,js files in one folder- you have put css and js file in assets folder. When all files are there in one folder then it becomes easier to read for other devs.

Issue with responsiveness- when i tried viewing in mobile view then right part of your main container gets cut. use max-width:390px to fix this. Also you don't need so many media queries for same.

Use semantic HTML- try using semantic HTML like <article></article> instead of <div class="card"></div> to make it accessible.

Rest your solution is good,Nice Work! and i liked your JS code-clean and short!.

Happy Coding!.
0
P
Marcello•480
@marcello88cSubmitted about 1 month ago
Frontend Quiz App Project
1
Mikhil Desai•560
@mike15395Posted about 1 month ago
Hey @marcello88c congratulations on completing the challenge!

You are very close to the design and solution but still i would suggest following micro improvements:

Adjust the media query breakpoint for desktop view as it is showing tablet view in desktop screen.

After submitting the answer, just highlight the incorrect answer (incase it is selected) and higlight correct answer. No need to highlight all incorrect options. As per figma this should be flow according to my understanding.

After selecting the quiz topics, initially it shows placeholder in question section for few seconds then displays questions and answers.(small bug)

You have hard coded initial quiz topics like HTML,CSS,JS,Accessibility. But instead you can make it dyanamic using following code:

function displayQuizData(data) { let initialStart = data["quizzes"].map((ele) => { return `<div class="quiz-topics" id=${ele.title}><img src=${ele.icon} width=20 height=20 alt="icon-title"/> ${ele.title}</div>`; }); document.querySelector(".section-2").innerHTML += initialStart.join(""); document.querySelector(".section-2").addEventListener("click", function (e) { if (e.target.classList.contains("quiz-topics")) { data["quizzes"].map((item) => { if (item.title == e.target.id) { hideIntialQuizPage(); currentHeading.innerHTML = `<img src=${item.icon} id=${item.title} alt="icon-heading"/>` + item.title; displayQuestions(item["questions"], 0, item); } }); } }); }

This code is useful when someone changes initial quiz topics(title: "HTML") and adds more topics in data.json file then automatically it gets changed in UI as well.

Rest your code is well written and maintained, i learned a lot from your code.

Happy Coding!.
Marked as helpful
1
P
toshirokubota•720
@toshirokubotaSubmitted about 2 months ago
What challenges did you encounter, and how did you overcome them?
I had various issues on customizing the input range bar and its thumb. I overcame by consulting on google and AIs. I still have not been able to control the thumb programmatically, as its location may misalign when the page is refreshed.

I generated a password simply by choosing characters randomly from the pool. There is no guarantee that it does include a number when the 'Include Numbers' check box is checked. What is does is simply to add 0-9 into the pool of characters.
What specific areas of your project would you like help with?
I would like to know how to move the thumb of a range input programmatically, so that I could fix the misalignment issue mentioned above.

In addition, any suggestions on html/css/script for improvement are appreciated!
password generator app
1
Mikhil Desai•560
@mike15395Posted about 2 months ago
Congratulations @toshirokubota on completing the challenge!

Here are few pointers which will improve your solution:

Styling input slider

i have used character-length-input as id for my input , you change accordingly to your code

CSS part

#character-length-input { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: linear-gradient(to right, var(--neon-green) 50%, #18161F 50%); /* border-radius: 5px; */ outline: none; cursor: pointer; border: none; } /* WebKit browsers (Chrome, Safari) */ #character-length-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; background: #E7E7E7; border-radius: 50%; cursor: pointer; box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); } #character-length-input::-webkit-slider-thumb:hover { background: var(--dark-grey); /* Dark grey */ border: 2px solid var(--neon-green); }

JS part for adjusting percentage on change

characterInput.addEventListener("input", function () { document.getElementById("character-length-value").innerHTML = characterInput.value; const min = this.min; const max = this.max; const value = this.value; const percentage = ((value - min) / (max - min)) * 100; // Dynamically update the background gradient this.style.background = `linear-gradient(to right, #A4FFAF ${percentage}%, #18161F ${percentage}%)`; });

you missed COPIED text after clicking on copy button

check font color of heading and strength word as per design

add hover effect on generate button and remove border as per design

Rest your code is well written and maintained! Happy Coding!!
Marked as helpful
0

OMAR HOSNY•270

@7osny13Submitted about 2 months ago

Tip Calculator App

Mikhil Desai•560

@mike15395Posted about 2 months ago

Congratulations @7osny13 on completing the challenge!

After reviewing your code,Here are few improvements:

You are not displaying correct output as per requirements, you can refer to code below for calculating output

function calculateOutput(selectedValue) {
  if (billInput.value && totalPeople.value && selectedValue) {
    totalTipAmount = (billInput.value * selectedValue) / 100;

    let totalAmount = Number(billInput.value) + totalTipAmount;

    tipAmount.textContent =
      "$" +
      Number(
        totalPeople.value > 0
          ? (totalTipAmount / totalPeople.value).toFixed(2)
          : ""
      );

    tipTotal.textContent =
      "$" +
      Number(
        totalPeople.value > 0
          ? (totalAmount / totalPeople.value).toFixed(2)
          : ""
      );
  }
}

2.There is no need of promises

UI changes, refer to following code:

.main{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: 1fr;
    grid-template-areas: "input output";
    width: 55vw;
    height: 60vh;
    background-color: var(--White);
    border-radius: 10px;
    padding: 2%;
    gap:25px;
}

@media all and (max-width:768px){
    .main{

        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2,1fr);
        grid-template-areas: "input"
        "output";
        height: 90vh;
        width: 50vw;
    }
    .input-section,.output-section{
        width: 100%;
        height: 100%;
    }
    body{
        gap:0px;
    }
    
}

refer my code here

Happy Coding!

Elsayed ELbauomy•500

@elsayedelbauomySubmitted 3 months ago

Time_Tracking_Dashboar

Mikhil Desai•560

@mike15395Posted about 2 months ago

Congratulations @elsayedelbauomy on completing this challenge! Your solutions looks very close to the design and functionality also working fine.

Here are few improvements from my side:

Use Rubik font as suggested in style.guide.md file, so that your solution is pixel perfect.
You can use following code to incorporate DRY principle,

function displayCards(activities, updatedTimeFrame) {
  let selectedTimeFrame;
  if (!updatedTimeFrame) {
    selectedTimeFrame = "daily";
  } else {
    selectedTimeFrame = updatedTimeFrame;
  }

  let cards = activities.map(
    (
      item
    ) => `<div class=${item.title} style="background-color:var(--${item.title})">
      <div class="card-background-image" style="background-color:var(--${item.title})">
        <img src="./images/icon-${item.title}.svg" alt="icon-work">
      </div>
      <div class="card-time-container">
        <div class="card-title-container">
          <span class="title">${item.title}</span><span class="dots">...</span></div>
        <div class="card-time-container">
          <div class="card-time">${item.timeframes[selectedTimeFrame].current}hrs</div>
          <div class="last-time">Last week-${item.timeframes[selectedTimeFrame].previous}hrs</div>
        </div>
      </div>
    </div>`
  );

  document.querySelector(".main-container").innerHTML += cards.join("");
}

here i have not hardcoded each card as you did, instead i used generic code to achieve this.

Rest everything is good and i learned a lot from your code too. Happy coding!

Marked as helpful

Chame "Guigui-chan"•290
@Guilherme-Porto-SilvaSubmitted 2 months ago
What are you most proud of, and what would you do differently next time?
For I re-created the basic concept of a form sumition had in my mind, I felt like I was doing something usefull, equal to what I had found to be "magic" before and, of course, updated!
What challenges did you encounter, and how did you overcome them?
The two sections have diferent shapes. On desktop, only. That was surprising and pattern breaking! Confortzone-kun doesn't like that sort of stuff °^°!

As usuall, I used ids to overcome it, by iding each section and setting the non-maching styles trough them. Sure it is easyer to understand than setting the style in DOM itself, but I would still like to learn a thirth way to do it that is better than both, since I literally set two ids to control a single slight diference.
What specific areas of your project would you like help with?
I am extreamely new to forms and, as has our friend said in the suggested by the learningpath article, they are hard! Any little tip is winning.
Stay updated using JavaScript!
#pure-css
1
Mikhil Desai•560
@mike15395Posted about 2 months ago
congratulations @Guilherme-Porto-Silva on completing this challenge! You need to improve a lot by making following changes: 1.Use email regex for checking valid email, you can check following function, function validateEmail(email) { const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return pattern.test(email); }

the above function return a boolean value, based on which you can naviagte to success message or not.

This is the major change in your code and rest are UI changes just look at design more carefully.

Happy Coding!
0
Amine Tamar•10
@AmineTamarSubmitted 7 months ago
CSS grid, flexbox
1
Mikhil Desai•560
@mike15395Posted 7 months ago
Congratulations @AmineTamar on completing the challenge! Your solution looks perfect, but i can't review your code, since it shows 404 not found!
0
P
juliusalberto•220
@juliusalbertoSubmitted 8 months ago
What are you most proud of, and what would you do differently next time?
I was most proud of creating a page that is responsive and looks good!

I also learnt how to hide elements in HTML and css. We can do two things basically:
1. Moving the element past the container and setting the container overflow to be hidden. This way, when we need the element, we can "drag" it from the hidden part
2. Set opacity and visibility to zero.
What challenges did you encounter, and how did you overcome them?
Eh, creating the event was challenging but doable. The hardest part is changing the shape for the popup (the desktop and mobile overlay are different from each other).
Article Preview Component
1
Mikhil Desai•560
@mike15395Posted 8 months ago
@juliusalberto congratulations on completing the challenge!

You are very close to the design, i have noticed few bugs and mistakes which i would like to highlight to further improve your solution.

1. Image border radius

In your style.css file line no 26

.card .header-img { border-radius: 10px 10px 0 0; }

should be like this border-radius:10px 0px 0px 10px

border radius is always in clockwise direction starting from left-top right-top right-bottom left-bottom.

2.Bug in mobile view When moving from desktop to mobile view at 768px breakpoint, the footer share icons appear for fraction of second then dissappear(without clicking share icon). May be this is happening because of transition css property, I am not sure but can figure it out.

Rest everything is good and well written! Good Efforts:) Keep Growing:) Happy Coding:)
0

Arnaud Lahaut•200

@Arnotts33Submitted 9 months ago

What are you most proud of, and what would you do differently next time?

I am just proud I did stick with this challenge and finished it. It was quite a hard one for my nerves! :D

A lot of research to finally get something that works, though not perfect yet.

What challenges did you encounter, and how did you overcome them?

Main challenges:

Section numbers.
Having the hero img change with responsiveness and having them to get the good size ratio.

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

Well, still a lot to learn and practice on responsiveness but I am getting there. Any tool, tricks or ideas / sources to get better in there are welcome!

Meeting Landing Page

Mikhil Desai•560

@mike15395Posted 8 months ago

@Arnotts33 Congratulations on completing this challenge!

To be honest i have also completed this challenge but my solution is also not perfect, but still i would like to help you with some points that i understood.

1. First section: hero image is of tablet but displayed on desktop screen. You can easily handle this by writing following code: HTML

 <header>
      <div class="logo">
        <img src="./assets/logo.svg" alt="logo" class="logo-image">
      </div>
      <div class="header-section">


        <div class="image-left-container">
          <img src="./assets/desktop/image-hero-left.png" alt="image-hero-left" class="image-hero-left-desktop">
         
        </div>
        <img src="./assets/tablet/image-hero.png" alt="image-hero-tablet" class="image-hero-tablet">
        <div class="header-text">
          <div class="main-header-text">Group Chat for Everyone</div>
        
          <p class="header-paragraph">Meet makes it easy to connect with others face-to-face virtually and collaborate across any device.</p>
          <div class="header-buttons">
            <button class="header-download">Download <span>v1.3</span></button>
            <button class="header-what">What is it?</button>
          </div>
        </div>
        <img src="./assets/desktop/image-hero-right.png" alt="image-hero-right" class="image-hero-right-desktop">
      
      </div>

CSS

.image-hero-tablet{
    display: none;
}
@media all and (max-width:820px) {
.header-section{
        display: grid;
        grid-template-columns: repeat(1,auto);
        grid-template-rows: auto auto-fill;
        grid-template-areas: 
        "hero-image"
        "header-text";
           
    }
    .image-hero-left-desktop,.image-hero-right-desktop{
      display: none;
    }
    
    .image-hero-tablet{
        display: block;
        grid-area: hero-image;
        place-self: center; 
    }
    .header-text{
        grid-area: header-text;
        width: min-content;
        place-self: center; 
          
    }
    .main-header-text{
        font-size: 52px;
    }
  
}

2.Using css for stlying 01 and 02 numbers It's good that you have written css for stlying numbers as per design but you can directly export image of it from figma file directly and then use it in <img></img>. This will save a lot of time writing css.

3.code structure: Well written code but can be improved further by deleting unwanted empty files like initial.css in styles folder and updating readme as per template.

I hope above points will improve your solution further.

Keep Learning! Happy Coding:)

Mr_Sajith•100
@Mr-sajithSubmitted 9 months ago
Testimonials-grid-solution
2
Mikhil Desai•560
@mike15395Posted 9 months ago
Congratulations @Mr-sajith for completing the challenge!

Your solution looks pixel perfect and responsive as well.

To further improve your solution you can add one more break point for devices like Tablets(900px or 820px). This will make all cards look very clearly without getting streched downside.

Also please check your README file and update it according to README-template.md.

Rest your code is well written and maintained.

Keep Growing! Happy Coding:)
Marked as helpful
0
olicoder13•310
@olicoder13Submitted 9 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?
.
Testimonial-Grid-Section-Main(html,css)(grid,flex).
1
Mikhil Desai•560
@mike15395Posted 9 months ago
@olicoder13 Congratulations on completing the challenge!

Your solution is very close to design and also code is well written.

Just a small mistake of adding image of Jonathan Walters, please do re-check design and images folder, you will figure it out.

Happy Coding:)
Marked as helpful
0
Yash Bhatt•280
@Y-ashbhattSubmitted 9 months ago
What specific areas of your project would you like help with?
I think there is a problem with size. Any suggestions would be appreciated.
Order summary card solution
1
Mikhil Desai•560
@mike15395Posted 9 months ago
@Y-ashbhatt Congratulations on completing the challenge!

small improvement: Just update your CSS with cursor:pointer for the buttons, so that user experience is improved.

Rest your solution is awesome!

Keep Growing! Happy Coding:)
1

Mikhil Desai

All comments

results summary component with javascript and flexbox

Body Mass Index calculator

E-commerce product page

News Homepage

Contact form - HTML5, SCSS, Mobile First, Vanilla JS.

Responsive FAQ Accordion Built with HTML, CSS, and Vanilla JavaScript

Interactive rating | HTML, CSS, JS

Frontend Quiz App Project

password generator app

Tip Calculator App

Time_Tracking_Dashboar

Stay updated using JavaScript!

CSS grid, flexbox

Article Preview Component

Meeting Landing Page

Testimonials-grid-solution

Testimonial-Grid-Section-Main(html,css)(grid,flex).

Order summary card solution