%Schriftgröße, Layout, Papierformat, Art des Dokumentes
\documentclass[10pt,oneside,a4paper,headsepline,footsepline]{scrartcl}

%Einstellungen der Seitenränder
\usepackage[left=2cm,right=2cm,top=1.5cm,bottom=1.5cm,includeheadfoot]{geometry}

%neue Rechtschreibung
\usepackage[ngerman]{babel}

%Umlaute ermöglichen
\usepackage[utf8]{inputenc}

%Gesamtseitenzahl
\usepackage{lastpage}

% Kopf- und Fußzeile
% Funktioniert nicht \usepackage[automark]{scrpage2}%
\usepackage[automark]{scrlayer-scrpage}

%Quellcode-Listings
\usepackage{listings}

%Hyperlinks
\usepackage{hyperref}

% Single quotes
\usepackage{upquote,textcomp}

% mehrere Spalten
\usepackage{multicol}

%Kopfzeile
\ihead{Svelte 5}
\chead{}
\ohead{http://kohnlehome.de/js/svelte5-steuerelemente.pdf}
%\setheadsepline{0.5pt}

%Fußzeile
%\setfootsepline{0.5pt}
\ifoot{Franz Kohnle}
\cfoot{Seite \thepage\ von  \pageref{LastPage}}
\ofoot{\today}

\pagestyle{scrheadings}

\begin{document}

% Single Quotes
\newcommand\upquote[1]{\textquotesingle#1\textquotesingle}

% Überschrift 
\begin{center}
  \LARGE % Schriftgröße
  \bfseries % Fettdruck
  \sffamily % Serifenlose Schrift
  Svelte 5: Steuerelemente
\end{center}

\begin{multicols}{2}

\section*{Texteingabefeld}
\begin{verbatim}
<script>
  let stringText = $state("Hello world!");
</script>

<input bind:value={stringText} type="text" />
\end{verbatim}

\section*{Datumseingabefeld}
\begin{verbatim}
<script>
  let stringDate = $state("2024-02-04");  
</script> 

<input bind:value={stringDate} type="date" />
\end{verbatim}

\end{multicols}

\begin{multicols}{2}

\section*{Dropdown}
\begin{verbatim}
<script>
  let stringDropdown = $state("a");  
</script>

<select bind:value={stringDropdown}>
  <option value="a">Anna</option>
  <option value="b">Berta</option>
</select>
\end{verbatim}

\section*{Slider}
\begin{verbatim}
<script>
  let numberSlider = $state(5);
</script> 

<input bind:value={numberSlider} type="range" />



\end{verbatim}

\end{multicols}

\section*{Checkbox}
\begin{verbatim}
<script>
  let boolCheckbox = $state(true);
</script> 

<input bind:checked={boolCheckbox} type="checkbox" />
\end{verbatim}

\section*{Radiobuttons}
\begin{verbatim}
<script>
  let stringRadiobutton = $state("a");
</script> 

<input bind:group={stringRadiobutton} value="a" type="radio" name="gruppe" />
<input bind:group={stringRadiobutton} value="b" type="radio" name="gruppe" />
\end{verbatim}



\section*{Button}
\begin{verbatim}
<script>
  const buttonClick = () => {
    console.log("Button clicked!");
  };
</script> 

<button onclick={buttonClick}>Tuwas</button>
\end{verbatim}


\end{document}
