how to align a component at the bottom of the page - css

Question

below in App.js i am displaying a Todo app where Todo Component displays each Todo task and TodoForm is used display a input through which we can add task
import "./App.css";
import Todo from "./Components/Todo";
import React, { Component } from "react";
import TodoForm from "./Components/TodoForm";
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
todos: [
{ id: 1, name: "First Todo", completed: true },
{ id: 2, name: "Second Todo", completed: false },
{ id: 3, name: "Third Todo", completed: false },
],
};
}
addTodo = (todo) => {
todo.id = this.state.todos.length + 1 || 0;
let todoList = [...this.state.todos, todo];
this.setState({ todos: todoList });
};
completeTodo = (id) => {
let todoList = [...this.state.todos];
const index = todoList.findIndex((todo) => todo.id === id);
todoList[index].completed = !todoList[index].completed;
this.setState({ todos: todoList });
};
deleteTodo = (id) => {
console.log(id);
let todoList = [...this.state.todos];
const index = todoList.findIndex((todo) => todo.id === id);
todoList.splice(index, 1);
this.setState({ todos: todoList });
};
render() {
return (
<div className="App">
<div className="developer">
<span>Developer</span>
<br />
<p>Kishore Pantra</p>
</div>
<h1 className="header">Todo React Component</h1>
<div className="todos">
{this.state.todos.map((todo) => (
<Todo
key={todo.id}
todo={todo}
completeTodo={this.completeTodo}
deleteTodo={this.deleteTodo}
/>
))}
</div>
<TodoForm addTodo={this.addTodo} />
</div>
);
}
}
here in App.css i am providing the css required for App.js
body,
html {
margin: 0;
padding: 0px;
box-sizing: border-box;
background-color: skyblue;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
.header {
color: white;
text-align: center;
}
.todos {
height: 400px;
overflow: auto;
margin: 5px;
padding: 5px;
border-radius: 5px;
background-color: yellowgreen;
}
.developer {
background-color: gold;
width: 150px;
text-align: center;
color: white;
transform: rotate(-45deg);
position: absolute;
top: 10px;
left: -10px;
}
Todo.js
import React, { Component } from "react";
import "./Todo.css";
export default class Todo extends Component {
completeTodo = (id) => {
this.props.completeTodo(id);
};
deleteTodo = (id) => {
this.props.deleteTodo(id);
};
render() {
return (
<div className="todo">
<p
style={{
textDecoration: this.props.todo.completed ? "line-through" : "",
}}
>
{this.props.todo.name}
</p>
<div className="status">
<button
className="completed"
onClick={() => this.completeTodo(this.props.todo.id)}
>
{this.props.todo.completed ? "Reinitialize Todo" : "Todo Completed"}
</button>
<button
className="remove"
onClick={() => this.deleteTodo(this.props.todo.id)}
>
X
</button>
</div>
</div>
);
}
}
Todo.css
.todo {
background-color: white;
display: flex;
flex-direction: row;
align-items: center;
margin: 10px;
padding: 10px;
border-radius: 5px;
}
.todo p {
width: 89%;
}
.status button {
margin: 2px;
border-radius: 100px;
outline: none;
border: 1px solid grey;
}
.completed {
background-color: rgb(6, 250, 38);
color: white;
}
.remove {
background-color: rgba(238, 15, 15, 0.884);
color: white;
}
TodoForm.js
import React, { Component } from "react";
import "./TodoForm.css";
export class TodoForm extends Component {
constructor(props) {
super(props);
this.state = {
todotext: "",
};
}
addTodo = (e) => {
e.preventDefault();
this.props.addTodo({ name: this.state.todotext, completed: false });
this.setState({ todotext: "" });
};
render() {
return (
<form className="todoform" onSubmit={this.addTodo}>
<input
type="text"
value={this.state.todotext}
onChange={(e) => this.setState({ todotext: e.target.value })}
placeholder="Add your Todo here..."
/>
</form>
);
}
}
export default TodoForm;
todoForm.css
.todoform {
display: flex;
justify-content: center;
}
.todoform input {
outline: none;
width: 98%;
padding: 10px;
margin: 10px;
border: none;
border-radius: 10px;
}
i want to align Todoform component at the bottom of the screen how can i align it.

Answer 1

To align TodoForm component to the bottom, You can use flexbox or grid. In this case, I used the grid because it is lighter (less code)
In App.css file on .App class selector You need to set this few properties.
.App {
min-height: 100vh;
margin: 0;
display: grid;
grid-template-rows: auto 1fr auto;
}
Before change =>
After change =>