[Style] Table Of Diverse calculators

[SakshiLingwal]

Description

To enhance the homepage’s usability and loading speed, we can reorganize the various calculators into a neatly structured table that succinctly lists all the features available across different calculators.

The table can provide clear functionalities across different types of calculators, including a unit converter for tasks like distance, area calculations etc. It’s a concise way to display the capabilities without cluttering the homepage.

Screenshots

No response

Checklist

• [X] I have checked the existing issues.
• [X] I follow Contributing Guidelines of this project.
• [x] I am a GSSOC'24 contributor.
• [ ] I am a IWOC'24 contributor.
• [ ] I am a JWOC'24 contributor.
• [ ] I am a SWOC'24 contributor.

Code of Conduct

• [X] I agree to follow this project's "Code of Conduct".

[github-actions[bot]]

Hey @SakshiLingwal, Welcome to the project CalcDiverse! 🎊 Thanks for opening an issue! 🙌 Please wait for the issue to be assigned. Happy Coding!! ✨

[Rakesh9100]

Do you have any supporting screenshots @SakshiLingwal

[SakshiLingwal]

Yes sure ! In my vision ,the website should aims to provide a user-friendly platform featuring a variety of calculators, organized in a responsive table on the homepage. This table will list all available calculators, such as unit converters, financial calculators, health calculators, math calculators, and conversion calculators, making it easy for users to search and find the tool they need.

Key features include:

1. Centralized Index Page: All calculators are displayed in a searchable and sortable table.
2. Responsive Design: The table adjusts seamlessly to different screen sizes for accessibility across all devices.
3. Interactive Interface: Clickable links and hover effects enhance navigation.
4. Dedicated Pages: Each calculator type will have its own detailed page.

[SakshiLingwal]

This is the basic structure of tables but after adding some more styling and effects I can make it'll look more eye catching and user friendly.

[Rakesh9100]

Will the present UI be removed or changed of the home page, and where this table will be present @SakshiLingwal

[SakshiLingwal]

Basically this table should be reflected on the index.html means on the home page where we can see multiple kinds of calculators , for instance you had created multiple div's to show diversity instead we can use table to make the page more concise and interactive. Although the current page is also amazing but i think an interactive table would make it more simpler.And the search functionality will enhance the UX.

On Sun, May 26, 2024, 12:41 AM Rakesh Roshan @.***> wrote:

Will the present UI be removed or changed of the home page, and where this table will be present @SakshiLingwal https://github.com/SakshiLingwal

— Reply to this email directly, view it on GitHub https://github.com/Rakesh9100/CalcDiverse/issues/689#issuecomment-2131405170, or unsubscribe https://github.com/notifications/unsubscribe-auth/A66BED6Z4QN25FR5FR6FLY3ZEDO73AVCNFSM6AAAAABHSBJKDOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMZRGQYDKMJXGA . You are receiving this because you were mentioned.Message ID: @.***>

[Rakesh9100]

Your idea is fine, but I don't want to remove this current page UI as it looks very good. So if you have any idea that will not affect this UI, then pls tell @SakshiLingwal

[SakshiLingwal]

Absolutely @Rakesh9100 , I appreciate the effort you’ve put into creating your website. While it’s undoubtedly well-designed, I’d like to offer some constructive suggestions:

1. Organize the Homepage: The homepage has many calculators, which can be confusing or irritating for someone to scroll 50+ calculators , also it's making the home page too lengthy . We can also consider grouping calcs into categories like area(rec/sq/circ) , distance(km/miles), etc. This way, users can find what they need more easily , it'll also makes home page more concise.

2. CSS and Accessibility: The fancy CSS effects look nice, but they might make it hard for people with weak eyesight. Using lighter colors and good contrast would help everyone use the site comfortably.

3. Background Animation: Those moving squares in the background distract from the main content. Removing them would make the design cleaner and less busy.

4. Avoid Repetition: Since the homepage already shows the calculators, no need to mention calculators on the navbar again. Less repetition means a cleaner look.

5. Explore Option: As the “Explore” button doesn’t lead to any other pages/websites, we can remove it. Simple navigation is better.

Please review these points. I believe that implementing these adjustments could enhance the user experience. Additionally, if you find any of the above suggestions effective, I’d be more than happy to contribute.

[SakshiLingwal]

@Rakesh9100 in my last comment I had mentioned about explore option and calculator option on the navbar ,if you don't want any kind of changes with the home page then you can go with above mentioned point 4 and 5. Looking forward to contribute on this project.

[Rakesh9100]

Okay, you can go ahead with all the suggested points and try to deliver your best. Let's see how it turns out after all your mentioned changes @SakshiLingwal

[SakshiLingwal]

Yes sure @Rakesh9100 . Thank you for trusting me with this task. I assure you that I will give it my best effort . If there are any specific requirements or deadlines, please do share them, and I’ll make sure to meet them.

[Rakesh9100]

There is no such requirement as of now, will see when the PR is up @SakshiLingwal

[Rakesh9100]

I hope you are working @SakshiLingwal

[SakshiLingwal]

Hey @Rakesh9100 I had done the changes according to above mentioned points 1,4,5 ;where i had removes unnecessary features. After those changes the website looks like this: (CSS part is temporary not changed previous css yet).

[Rakesh9100]

@SakshiLingwal Sorry for the late response. As I can see, the logo is removed from the home page and the UI also looks simple (I know CSS is temporary). You told me that you will categorize calculators as there are many calcs but I can't see that. It is the same just the previous UI is removed.

[SakshiLingwal]

Sorry for the late response, @Rakesh9100 . The logo is already present in the left corner, so I don’t think it’s necessary to reuse it on the home page. I have organized all the calculators in a table format, but the screenshot is just to show you what the table structure looks like.

I’ve removed the redundant logos, the ‘Explore’ button which only redirects to the same page, and the ‘Calculator’ option at the top, which also points to the same page.

As a beginner, I’m finding it a bit difficult to modify the CSS to fit the table. If you think the table format is the way to go, I can provide you with my edited code, and then you can adjust your CSS accordingly.

For now, if you agree, I can raise a PR that only removes the extra logo, ‘Explore’, and ‘Calculator’ options.