1
0

Added List

This commit is contained in:
Christer Warén 2021-01-04 20:02:16 +02:00
parent 3c12e42f61
commit 1c635092be
3 changed files with 47 additions and 0 deletions

View File

@ -2,6 +2,8 @@ import logo from './logo.svg';
import './App.css'; import './App.css';
import Timer from './Timer'; import Timer from './Timer';
import './Timer.css'; import './Timer.css';
import List from './List';
import './List.css';
function App() { function App() {
return ( return (
@ -11,6 +13,7 @@ function App() {
</header> </header>
<main className="App-content"> <main className="App-content">
<Timer /> <Timer />
<List />
</main> </main>
</div> </div>
); );

15
src/List.css Normal file
View File

@ -0,0 +1,15 @@
.list {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
flex: 1;
}
.timings ul {
list-style-type: none;
padding: 0;
}

29
src/List.js Normal file
View File

@ -0,0 +1,29 @@
import React, { useState, useEffect } from 'react';
const List = () => {
let list = [];
if (list.length === 0) {
list.push('No times saved');
}
function clear() {
list = [];
}
return (
<div className="list">
<div className="timings">
<ul>
{list.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
<button className="button" onClick={clear}>
Clear list
</button>
</div>
);
};
export default List;