ManInDark/ReactHolidays
1
0
Fork 0
mirror of https://github.com/ManInDark/ReactHolidays.git synced 2026-03-08 02:49:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Changed Page Title, added Styling

Browse Source
This commit is contained in:
ManInDark
2024-08-13 14:55:50 +02:00
parent c5812cf597
commit 85d8b9104b
4 changed files with 81 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<title>Holiday List</title>
</head>
<body>
<div id="root"></div>

50
src/CalendarApi.tsx
View File

@@ -17,28 +17,34 @@ function ListHolidays() {
});
}, [satYear])
return <>
<table>
<thead>
<tr>
<th>Date</th>
<th>Name</th>
</tr>
</thead>
<tbody>
{keys.map((holiday) =>
<tr key={holiday.date + "-" + holiday.localName}>
<td>
{holiday.date}
</td>
<td>
{holiday.localName}
</td>
</tr>
)}
</tbody>
</table>
<input type="text" value={year} onChange={(e) => { setYear(e.target.value) }} />
<input type="submit" onClick={() => { setSatYear(year) }} />
<div>
<div>
<table>
<thead>
<tr>
<th>Date</th>
<th>Name</th>
</tr>
</thead>
<tbody>
{keys.map((holiday) =>
<tr key={holiday.date + "-" + holiday.localName}>
<td>
{holiday.date}
</td>
<td>
{holiday.localName}
</td>
</tr>
)}
</tbody>
</table>
</div>
<div>
<input type="number" value={year} onChange={(e) => { setYear(e.target.value) }} />
<input type="submit" onClick={() => { setSatYear(year) }} />
</div>
</div>
</>
}

51
src/main.css Normal file
View File

@@ -0,0 +1,51 @@
@media (prefers-color-scheme: light) {
:root {
--textcolor: black;
--backgroundcolor: white;
--color-one: lightgray;
--color-two: darkgray;
}
}
@media (prefers-color-scheme: dark) {
:root {
--textcolor: white;
--backgroundcolor: black;
--color-one: gray;
--color-two: dimgray;
}
}
html {
background-color: var(--backgroundcolor);
}
#root>div {
margin: auto;
width: fit-content;
}
#root>div>div {
margin: 8px;
}
table {
color: var(--textcolor);
border: var(--textcolor) solid 2px;
border-collapse: collapse;
}
th,
td {
padding: 4px;
border: black solid 1px;
}
tbody>tr:nth-child(even),
table>thead>tr {
background-color: var(--color-one);
}
tbody>tr:nth-child(odd) {
background-color: var(--color-two);
}

1
src/main.tsx
View File

@@ -1,6 +1,7 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import ListHolidays from './CalendarApi'
import "./main.css";
createRoot(document.getElementById('root')!).render(
<StrictMode>