Project 1 - PTBC9 #42
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| // Updating the first task in the this.state.tasks array | ||
|
|
||
| /** TaskUpdate Component Modifications | ||
| * In TaskUpdate.js, our constructor is modified as follows */ | ||
| class TaskUpdate { | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| this.state = { | ||
| title: this.props.title, | ||
| task: this.props.task, | ||
| }; | ||
| // we initialize local state of 'TaskUpdate' with the 'title' and 'task' from the props | ||
| // this ensures that the input fields in the update form display the current values of the task being updated | ||
| } | ||
| } | ||
|
|
||
| // handleSubmit function | ||
| handleSubmit = (e) => { | ||
| e.preventDefault(); | ||
|
|
||
| const updatedTask = { | ||
| title: this.state.title, | ||
| task: this.state.task, | ||
| }; | ||
|
|
||
| this.props.updateTask(this.props.id, updatedTask); | ||
|
|
||
| this.props.updateTask(this.props.id, updatedTask); | ||
|
|
||
| // Close the update form by calling the callback function | ||
| this.props.onUpdateComplete(); | ||
| }; | ||
| /** Everytime the update button is clicked and the update form is submitted, we create an 'updatedTask' object with the new 'title' and 'task' values from the local state | ||
| * | ||
| */ | ||
|
|
||
| // Delete Logic | ||
|
|
||
| /** Defining handleDeleteClick Method in Task.js | ||
| * handleDeleteClick = () =>{ | ||
| * this.props.deleteTask(this.props.id) | ||
| * } | ||
| * Inside the handleDeleteClick function, you can call a deleteTask function that is passed as a prop from TaskList.js | ||
| */ | ||
|
|
||
| /** Passing the deleteTask function as a prop in the render method | ||
| * <Task | ||
| key={task.id} | ||
| {...task} | ||
| updateTask={this.updateTask} | ||
| deleteTask={this.deleteTask} | ||
| /> | ||
| */ | ||
|
|
||
| /** Handling deletion in deleteTask function | ||
| * deleteTask = (id) => { | ||
| this.setState((prevState)=>{ | ||
| const updatedTasks = prevState.tasks.filter((task)=>{ | ||
| task.id !== id | ||
| return { tasks: updatedTasks } | ||
| }) | ||
| }) | ||
| } | ||
|
|
||
| deleteTask takes in the id argument which is the id of the task to be deleted | ||
|
|
||
| this.setState() method is called to update the state in the TaskList Component and it takes the previous state (prevState) as an argument to update the current state based on its previous value | ||
|
|
||
| we declare an updatedTasks variable which is assigned the result of the filter method applied to the prevState.tasks array | ||
| filter() creates a new array by iterating over the original array's elements and including only those that meet a certain condition (excludes task with specific id -> task.id !== id) | ||
|
|
||
| Finally, this.setState returns an object with property tasks set to updatedTasks, which does not have the deleted task | ||
| */ | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,105 @@ | ||
| /* App.css */ | ||
|
|
||
| .app-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| height: 100vh; /* height of 100vh ensures that the layout spans the full height */ | ||
|
|
||
| } | ||
|
|
||
| .task-list, | ||
| .task-in-progress, | ||
| .task-in-review, | ||
| .task-completed { | ||
| flex: 1; /* Equal distribution of space */ | ||
| box-sizing: border-box; /* Include padding and border in the width calculation */ | ||
| width: calc(33.33% - 40px); /* 33.33% width with 20px margin on each side */ | ||
|
There was a problem hiding this comment. this seems responsive but might not actually be. 40px on a mobile screen might be a lot. |
||
| margin: 20px 20px; | ||
| border: 1px solid #ccc; | ||
| padding: 16px; | ||
| border-radius: 12px; | ||
| opacity: 80%; | ||
| font-size: 27px; | ||
| } | ||
|
|
||
| .task-container { | ||
| display: flex; | ||
| flex: 1; /* This allows the task components to take up the available space */ | ||
|
There was a problem hiding this comment. you had a comment about this property already above |
||
| } | ||
|
|
||
| .header-2 { | ||
|
There was a problem hiding this comment. I think naming things with *-# is not exactly good. I would rather describe where the header is located or what kind of header it is instead of giving numbers |
||
| margin: 20px; | ||
| } | ||
|
|
||
| .task-list { | ||
| background: #e97e7e; | ||
| } | ||
|
|
||
| .task-in-progress { | ||
| background: cyan; | ||
| } | ||
|
|
||
| .task-in-review { | ||
| background: rgb(244, 244, 162); | ||
| } | ||
|
|
||
| .task-completed { | ||
| background: rgb(146, 246, 153); | ||
| } | ||
|
|
||
| .task-composer { | ||
| margin: 20px 0px 50px; | ||
| } | ||
|
|
||
| /* Style the Header as you need it. For example: */ | ||
|
|
||
| .header { | ||
| /* background: #333; */ | ||
|
There was a problem hiding this comment. let's remove commented-out code before pushing |
||
| color: #fff; | ||
| font-size: 35px; | ||
| display: flex; /* flex container to enable */ | ||
|
|
||
| padding: 10px; | ||
| justify-content: center; | ||
| align-items: center; | ||
| opacity: 30%; | ||
| } | ||
|
|
||
| .header-link { | ||
| color: white; | ||
| } | ||
|
|
||
| .content { | ||
| color: black; | ||
| } | ||
|
|
||
| .main { | ||
| opacity: 80%; | ||
| } | ||
|
|
||
| .buttons { | ||
| margin: 10px; | ||
| margin-bottom: 20px; | ||
| border-radius: 25%; | ||
| } | ||
|
|
||
| button { | ||
| margin-top: 15px; | ||
| border-radius: 25%; | ||
| } | ||
|
|
||
| .adjustments { | ||
| margin-bottom: 50px; | ||
| } | ||
|
|
||
| form input[type="text"], | ||
| form input[type="email"], | ||
| /* Add more selectors for other input types if needed */ | ||
|
|
||
| form input[type="submit"] { | ||
| border-radius: 8px; /* Adjust the value as needed */ | ||
| /* Other styling properties */ | ||
| /* For example: */ | ||
|
Comment on lines
+95
to
+97
|
||
| border: 1px solid #ccc; | ||
| padding: 8px; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| form textarea[type="text"] { | ||
| border-radius: 8px; | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can explain the purpose of this document?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No purpose