ManInDark/ReactHolidays
1
0
Fork 0
mirror of https://github.com/ManInDark/ReactHolidays.git synced 2026-01-21 06:34:29 +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" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title> <title>Holiday List</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

50
src/CalendarApi.tsx
View File

@@ -17,28 +17,34 @@ function ListHolidays() {
}); });
}, [satYear]) }, [satYear])
return <> return <>
<table> <div>
<thead> <div>
<tr> <table>
<th>Date</th> <thead>
<th>Name</th> <tr>
</tr> <th>Date</th>
</thead> <th>Name</th>
<tbody> </tr>
{keys.map((holiday) => </thead>
<tr key={holiday.date + "-" + holiday.localName}> <tbody>
<td> {keys.map((holiday) =>
{holiday.date} <tr key={holiday.date + "-" + holiday.localName}>
</td> <td>
<td> {holiday.date}
{holiday.localName} </td>
</td> <td>
</tr> {holiday.localName}
)} </td>
</tbody> </tr>
</table> )}
<input type="text" value={year} onChange={(e) => { setYear(e.target.value) }} /> </tbody>
<input type="submit" onClick={() => { setSatYear(year) }} /> </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 { StrictMode } from 'react'
import { createRoot } from 'react-dom/client' import { createRoot } from 'react-dom/client'
import ListHolidays from './CalendarApi' import ListHolidays from './CalendarApi'
import "./main.css";
createRoot(document.getElementById('root')!).render( createRoot(document.getElementById('root')!).render(
<StrictMode> <StrictMode>