CSS Grid Layout
What challenges did you encounter, and how did you overcome them?Make it as close to the design as possible. Perseverance helped
What specific areas of your project would you like help with?CSS Grid Layout and creative for a tablet version
I am most proud of creating a responsive design that works well across different screen sizes, as well as ensuring that the hover and focus states are properly implemented. I also made an effort to improve accessibility by following best practices in HTML and CSS. However, next time, I would like to implement the bonus features, such as saving the game state upon refresh and improving the CPU's logic to not only block my winning moves but also make strategic decisions to win. I plan to build a future version of this project using React to achieve these goals.
What challenges did you encounter, and how did you overcome them?The main challenge I faced was managing the JavaScript logic, especially defining and updating different states of the game. I had to ensure that the game flow worked correctly depending on whether the user was playing against the CPU or in multiplayer mode. It was also essential to handle resetting the game, moving to the next round, and updating the game statistics. Additionally, incorporating features for screen readers required careful attention. To overcome these challenges, I did a lot of research and received significant help from ChatGPT. Although I tried to solve most problems on my own, I reached out for guidance when I got stuck.
What specific areas of your project would you like help with?I would appreciate feedback on accessibility and JavaScript code improvements. Specifically, I want to know if there are any areas where I could enhance the accessibility of my project, especially regarding screen reader support. I would also love to get feedback on my JavaScript logic, particularly around managing the game state and handling user interactions efficiently. Additionally, if you notice any other areas for improvement in my project, I would be grateful for your feedback!
Hello, great project, and it's accessible too!
I would like to ask you some minor thing: how can you make the actual board as a screenshot instead of the starter (The one that ask what mark you want to choose etc.)?
I worked hard to use semantical HTML for each of the form elements so that I could take advantage of the built-in interactivity and accessibility that come alongside those elements. Because of that approach, the form is fully keyboard accessible, and I hope it would be just as accessible to screen readers and other kinds of assistive technologies as well. I would love to hear if others feel there is some aspect to accessibility that I have not considered or that wouldn't be effectively accommodated in this solution.
I'm most proud of successfully integrating SVG backgrounds into the design, learning how to manage their positioning while keeping the card and other elements layered correctly. Additionally, I’m happy with how the responsive layout turned out, ensuring the design works well across different screen sizes.
What challenges did you encounter, and how did you overcome them?Initially, I had challenges with the SVG background and not having it affect the card div storing the rest of the content. To fix this problem, I utilized position:absolute and made the z-index 0 so it doesn't impact the normal flow of the document.
What specific areas of your project would you like help with?If you notice the svg element inside of the card container, the image is not in the correct position where its supposed to be and i didnt know how to fix this and tried various things that correspond with its size and position in the container.
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
/* card would be on top as the svg is in the background */
}
.hero {
position: relative;
z-index: 1;
border-radius: 20px 20px 0 0;
width: 100%;
height: 220px;
object-position: center;
object-fit: contain;
}
As you can see this is a small error that needs to be fixed and would love all feedback for this design!
Hi, how you use absolute position for the background is totally fine and it works. But there's a property called background-image, which is probably more convenient in a case like this.
It's just like background-color but for the image. You can use it like this:
body {
background-image: url(./images/pattern-background-desktop.svg);
}
The default behavior is that the image will repeat to fill all the space in the background, so in this case you also have to set background-repeat: no-repeat.
I'm proud for everything i did in this project honestly specially the count up animation :3
Whenever there is custom style for input elements like radio , checkboxes etc. I always choose the way of creating extra div and styling that with the CSS. And then hiding the actual radio buttons. It works but comes with downside as I have to make that div behave like radio button. In this solution I found out that using appearance: none CSS property I can add custom CSS to radio button itself. It was so helpful and straightforward
What specific areas of your project would you like help with?Any feedback is welcome.
Responsive Design: The calculator is designed to be responsive and adapts well to different screen sizes, including mobile devices. This ensures a good user experience across various devices.
Theme Toggle Feature: Implementing the theme toggle functionality allows users to switch between three different themes, enhancing the visual appeal and usability of the calculator. The smooth transition of the toggle button and the changes in color schemes for different themes are well-executed.
User Interface Design: The calculator's layout is clean and intuitive, with easily accessible buttons and a readable display. The use of CSS for styling, including hover and active states for buttons, improves the overall interactivity.
Functional JavaScript: The JavaScript code effectively handles basic calculator operations like addition, subtraction, multiplication, and division, along with additional functions such as deleting the last input, clearing the display, and handling errors .
Enhanced Error Handling: Currently, the calculator displays 'Error' for any invalid operations. I would enhance the error handling to provide more specific error messages and possibly highlight the erroneous input.
Additional Features: Adding more advanced features like scientific functions (square root, exponentiation), memory functions (M+, M-, MR), and history of calculations would make the calculator more versatile.
Performance Optimization: Although the current implementation is functional, optimizing the performance by reducing redundant DOM manipulations and ensuring efficient event handling could improve the responsiveness
Responsive Design:
Challenge: Ensuring that the calculator layout adapts well to different screen sizes was challenging, particularly for very small screens where the buttons and display could become too cramped.
Solution: I used CSS media queries to adjust the layout, font sizes, and button spacing for smaller screens. This ensured that the calculator remained usable and visually appealing across a range of device sizes.
Theme Toggle Implementation:
Challenge : Implementing a smooth and intuitive theme toggle functionality that transitions between three different themes required careful management of CSS classes and styles.
Solution: I created separate CSS classes for each theme and used JavaScript to toggle these classes on the body element. This approach made it easy to switch themes and maintain a clean separation of styles for each theme
Congratulations on finishing the challenge!
Your code is pretty easy to read, that's quite an achievement already. And README file is very helpful and full of appreciation.
For your question about float point number, you can do something like:
Math.round(1000000000000 * eval(display.value)) / 1000000000000
The number of zero is up to how many decimal places you want to have.
And you might want to have this line outside of functions.
const display = document.getElementById('display');
Declare display as a global variable, so that it can be used by every function.
And your solution of Theme Toggle is actually interesting. But that way, the number label doesn't corporate with the theme. I recommend you to have a look at this code, it's how to build a toggle button that functions as it's supposed to be.
I really like how you use counter to keep track of button clicked.
