I have used the approach of changing src value to switch between light and dark mode. Is there any better way to do this?
if (darkMode == "enabled") {
enableDarkMode();
// img.src = "images/icon-moon.svg";
document.getElementById("theme-changer").src = "images/icon-moon.svg";
}
Another approach would be to use the CSS content property: https://developer.mozilla.org/en-US/docs/Web/CSS/content
So if you had a dark mode class on the element (or parent) you could use that to determine the content url :
.someDiv {
content: url(../images/bg-desktop-light.jpg);
}
.someDiv.dark {
content: url(../images/bg-desktop-dark.jpg);
}
Of course if the class is on a parent element then the selector would be something like
.dark .someDiv
hey Guys, send me feedback, please? i really need friend in the community, let's help each other. 😅
A couple things I noticed Hamid:
On the main element you should remove min-height: 70vh.
The grids are overflowing in Chrome Inspector, you can try this:
.profile {
display: grid;
grid-template-columns: 45px auto;
}
Alternatively you could make the element a flex row.
I recommended to another user that they make a wrapper around each testimonial:
<div class="people">
<div class="testimonial__wrapper">
...Testimonial elements here...
<div>
</div>
.testimonial__wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1rem;
}
If you use space-between and gap it will stretch the div and you don't need margin/padding on the inner testimonial elements. You might need to add flex column to the people div in your layout.
Built with •Semantic HTML5 markup •CSS custom properties •Flexbox •CSS Grid •Mobile-first workflow
This challenge was a bit tricky. I had some issues making the text of the 3rd, 4th, and 5th cards sit on the same base as it is in the image preview. If anyone could do just that I'd like to know your process.
I added a wrapper around each testimonial like this:
<article class="testimonial">
<div class="testimonial__wrapper">
...Testimonial elements here...
<div>
</article>
.testimonial__wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1rem;
}
The justify-content: space-between will help space out the content if the column stretches. The gap replaces margin-top on the inner elements, so you can remove that!
Drag and Drop
During this project, I've learned how to work with dnd-kit and make draggable content based on examples provided by their playground. You can use drag and drop to change board order on the big screen. You can drag any task between columns. On AddBoardModal and EditBoardModal you can change column order. On AddTaskModal or EditTaskModal you can change the subtask order
Radix-UI
First time I've used it. I wanted to try to improve accessibility features on my project. Beginning was hard but I managed to prepare this app using Radix-UI
FireBase
You can log in by clicking the login button, LoginModal will open if you don't have an account, you have to sign up using RegisterModal, and any changes you do to your task will be uploaded to the FireBase. It also tracks if you have DarkMode On and which current opened board.
React-firebase-hooks
It was used for login and sign-in purposes
useCreateUserWithEmailAndPassword(auth); useSignInWithEmailAndPassword(auth);
React-loading-skeleton
To improve the user experience when the web is loading
Recoil
For managing states through project boardAtom - when the page is loaded, it keeps all boards, and it's updated with every change modalAtom - keep tracking if any of the models are opened and if yes which one should be opened settingsModalAtom - tracks:
darkMode: boolean; isSidebarOpen: boolean; isLoaded: boolean; activeBoard: string; isBoardModalListOpen: boolean; activateColumn: number; activateTask: number; activateTaskName: string;
Features improvement
On Firebase all users' boards are uploaded with one property, for performance and readability, creating a collection for each board will be better. In some situations, the code is not DRY. In the future refactor the code to be drier.
Also because the database has a lot of nested levels I'm not sure mapping a couple of times to update a task is a good practice but I couldn't find another solution for this And this nested mapping is occurring a few times in my project.
const updatedBoard = boardState.map((board) => {
if (board.name === settingState.activeBoard) {
const activatedColumns = board.columns.map((col) => {
if (col.name === getValues("status")) {
const updatedTask = col.tasks.map((task) => {
return task.id === editedTask?.id ? editedTask : task;
});
return { ...col, tasks: updatedTask };
}
return col;
});
return { ...board, columns: activatedColumns };
}
return board;
});
Hey Kamil, I'm working on this project now and I ran across similar problems with nested data in Firebase. I solved this by flattening the data structure to be a top level collection of Boards with 2 sub-collections: Columns and Tasks. I changed Task.status to Task.columnId and put in the Firebase key of the parent column. Then I did a querySnapshot for each column's tasks based on the columnId. Now moving the Task to a different Column is as simple as changing the Task.columnId value. BTW I'm holding the subtasks in an array within each Task, not a sub-collection.
