🦸♂️ My Fav Superhero: Discover superhero images in a click! Search your heroes or get random image.
Home Page: https://my-favorite-super-hero-one.vercel.app/index.html
License: MIT License
Searchbar is swallowing some texts as we see it on a small screen. I want to fix this issue if you assign it to me.
Before Screenshot
After
Assign this issue to me. It will be a pleasure to work on this project.
we can add zoom hover animation in superhero images for better ui experience
Although the background is soothing ,but it can be made much attractive if we add a fantastic background image with some transitions on hovering over.
Hey Prajwal,
I hope you're doing well. I wanted to bring up an issue regarding the design of our buttons, the input search field, and the container width for certain elements, including the need for rounded corners on images.
The current button design may need improvement in terms of user experience and visual aesthetics. Additionally, the input search field is crucial, and we should ensure it is user-friendly. Please consider these aspects and any potential changes. I also suggest maximizing the container width for specific elements and adding rounded corners to images to enhance our overall interface. Your expertise is highly valuable, and I trust your judgment in making our product more user-friendly and visually appealing. Let's discuss this further in our upcoming design meeting. Thank you for your attention to these design concerns, Prajwal.
Hey i would suggest that when user focus on the search bar the text would clear up
It would be more user friendly.
comment-on-issue.yml is located at .github/workflows
I tried searching for a wrong superhero name and nothing displayed. Mind if I take on this issue @Prajwal0225
@Prajwal0225 I noticed that fixed width and height were mostly used and might cause issues when trying to make responsive. I suggest using flexbox to make it easier and the footer links load on the same tab when clicked on instead of directing to another tab. Mind if I take on this suggested issues @Prajwal0225
Before -
After -
Made the Pull Request as well
Can you assign me this issue
I can solve this issue. Can you sign me?
I want to update readme file. I will add information about Hacktoberfest and contributors of this repository.
@Prajwal0225 what enhancements can we make
can you assigned to me i can fix and improve the navbar
Try to change the UI of the home screen like this
Instead, we should also write "All Rights Reserved"
Current css only has one font, include a generic font family as a fallback in case the custom font fails to load
The search button is not aligned properly with the search bar. The download button can be better placed under the image to create an even look. The hover color of the "Random Hero" button can be changed to a one which is more relevant to the current UI.
When there is no result from API, the background gets distorted.
Assign me this, I would like to contribute.
Why the webpage looks like this in small screens-
Please assign me this issue .
Also add the hacktoberfest and hacktoberfest-accepted label
1 issue - Even though the UI looks good but the links in the header are not working, it goes to a 404 error page.
2 issue - I searched Spiderman, but it didn't fetched the images of him. So it may be that the api used doesn't contain the images of some superheros.
3 issue- The hover button of the search button is grayish and not going with the website.
4 issue- As soon as the user enter the name of the superhero and press the enter button the website does not search the hero until the search button is clicked. I would like to add the enter key search functionality to the search.
Please assign this issues to me under HacktoberFest 2023 so that I can start working on it.
The page should display the cards of the owners of the project with their name and picture.
I want to work on the naviagtion bar and try to improve/implement the following changes
Creating an Indian map clicking on each state will direct us to folk dances using html and css
When a user clicks on button no respond as such is provided that the request has been send.
A loading animation can be added so that a user knows that the image is being generated.
Please assign this to me
Description:
The current display of the superhero image after searching appears smaller and does not provide an attractive user experience. To improve the visual appeal of our project, we need to increase the size of the displayed image.
Image :
Task Details:
Increase the size of the displayed superhero image for better aesthetics.
Description:
We're looking to enhance the user experience of our website by implementing a navigation bar that will provide easy access to essential sections. This navigation bar should include sections like Home, About, and Contributors.
Task Details:
Navigation Bar Design: Develop a simple and user-friendly navigation bar that aligns with our website's style and layout.
Home Section: This is the link to our website's main page, which will remain unchanged.
About Section: Create a 'About' page with an H1 tag that says "Coming Soon".
Contributors Section: Similarly, generate a 'Contributors' page with an H1 tag indicating "Coming Soon."
Responsive Design: Ensure the navigation bar functions well on all screen sizes and devices, maintaining a pleasing appearance and usability.
We will add the Code to the About and Contributors page afterward.
Superhero title should stand up a little more and the image could be look better being in a container with some rounded corner.
Adding About Page would be enhance the website experience
Assign me this task under Hacktoberfest
when clicked on search button or random hero button no effect shown when on it.
while clicking on random hero button text in input text remain does not clear
The footer in our project is currently inconsistent. On the home page, it is not consistently at the bottom of the page, and when searching for superhero images, it is loaded in a way that causes the footer to shift down. This inconsistency affects the visual appeal and user experience of our project.
The expected behavior is to have a consistent footer placement throughout the project. The footer should always be at the bottom of the page, regardless of whether users are on the home page or searching for superhero images. This will provide a more uniform and visually pleasing user experience.
Home Page
When Searching Favourite Hero
Resolving this issue is essential for improving the overall visual appeal and user experience for our project's users. Inconsistencies in the footer placement can give the impression of an unpolished user interface. Ensuring that the footer remains consistently at the bottom of the page will contribute to a more professional and user-friendly design.
CSS code has been repeated in style.css file this might collide in future
Fething image takes time so we can display a loading spinner till then.
The getSearchSuperHero function currently retrieves superhero data from an external API and updates the DOM based on the response. While the core functionality is in place, there is room for improvement in terms of code readability and error handling.
Proposed Changes:
Improve Code Readability:
Enhance variable naming to make the code more self-explanatory.
Consider breaking down the functionality into smaller, more focused functions or using comments to clarify the code's purpose.
Enhance Error Handling:
Implement more detailed error handling to provide meaningful error messages and potentially offer a fallback mechanism for users in case of errors.
Ensure that error messages are clear and informative, aiding debugging efforts.
Documentation:
Document the function with comments or JSDoc-style documentation to explain its purpose, parameters, and expected behavior.
Provide a brief explanation of how the function interacts with the DOM and external APIs.
Testing:
If not already in place, consider writing unit tests to validate the function's behavior under various scenarios, including error cases.
By addressing these points, we can make the getSearchSuperHero function more maintainable and user-friendly, while also ensuring that it handles errors gracefully.
The current implementation exposes the Superhero API key directly in the client-side JavaScript code. It's not recommended to expose your API keys in client-side code as it can be accessed by anyone. Consider moving it to a server-side environment or using environment variables.
Exposing the API key presents a security risk for potential misuse of the key if discovered. It's a best practice to avoid embedding secrets in client-side code.
Moving the key to a server-side env var or secrets service will improve security and prevent leakage of the key.
converting the px values in css for each property to rem
As of now only a photograph of the superhero is displayed ,but if we also display some quote based on the powers of the superhero it will make the users to connect in much better way.
Current website:
then it will look something like this:
Currently, the year in the footer is hardcoded, which means it doesn't automatically update to the current year. To improve the user experience and ensure the accuracy of the year displayed, we should make it dynamic.
Proposed Solution
Implement a mechanism that dynamically fetches and displays the current year in the footer. This way, users will always see the correct year without manual updates.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
