sinazzzz / project-ts

Project collection with typescript

Project collection with typescript

In this collection, we have various projects that are based on typescript.

Current projects

Login

Html / Css / ts

Add Task

Html / Css / ts

Add Person

Html / Css / ts

Dashboard

Html / Css / ts / Tailwind

Todo List

React / Redux / Ts

Form

React / useReducer / Ts / Formic / Yup

Swiper

Html / Css / Ts / Swiper

project-ts's Issues

add Task

<div id="addtask-content" class="content ">
            <h1 class="text-4xl font-bold">Add Task</h1>
            <div class="flex justify-center items-center  h-[100vh] w-full">
                <form method="get" class="form">
                    <div>
                        <label for="username" class="text-2xl font-bold">Username : </label>
                        <input type="text" class="h-10 rounded-lg pl-2" id="username" placeholder="username">
                    </div>
                    <div>
                        <label for="task" class="text-2xl font-bold">Task : </label>
                        <input type="text" id="task" class="h-10 rounded-lg pl-2 mt-3" placeholder="Task">
                    </div>
                    <button id="submit" class="bg-violet-500 rounded-lg mt-3 h-10 w-20 text-white">Submit</button>
                </form>
            </div>
        </div>

sidbar >> select and choose nav

select and choose nav

Hide all content except the default one

document.addEventListener('DOMContentLoaded', function () {
    const navLinks: NodeListOf<HTMLAnchorElement> = document.querySelectorAll('.nav-link');
    const contents: NodeListOf<HTMLElement> = document.querySelectorAll('.content');

    // Hide all content except the default one
    contents.forEach(function (content) {
        if (!content.classList.contains('block')) {
            content.style.display = 'none';
        }
    });

    navLinks.forEach(function (link) {
        link.addEventListener('click', function (event) {
            event.preventDefault();
            const target: string | null = this.getAttribute('data-target');

            contents.forEach(function (content) {
                content.style.display = 'none';
            });

            if (target) {
                const targetContent: HTMLElement | null = document.getElementById(target + '-content');
                if (targetContent) {
                    targetContent.style.display = 'block';
                }
            }
        });
    });
});