Tek sütunlu checklist nasıl 2 sütunlu yapılır?

  • Konuyu başlatan Konuyu başlatan DeadlyMania7
  • Başlangıç Tarihi Başlangıç Tarihi
  • Mesaj Mesaj 2
  • Görüntüleme Görüntüleme 96
  • Etiketler Etiketler
    nasıl

DeadlyMania7 62

Bilgin
Katılım
16 Ocak 2024
Mesajlar
5.082
Çözümler
35
Beğeniler
6.401
Yer
Cehennemin dibi
ChatGPT ile bir checklist yaptım kendime. Bu checklist her çarşamba kendini resetliyor. Fakat yeni fark ettiğim bir sorun var; yanlamasına çok geniş olduğu için ölü alan çok fazla. Ben de bunun için yerden tasarruf amaçlı bir satırda 2 sütun olsun istiyorum. Yani: Etiket 1, checkbox | etiket 2, checkbox şeklinde. Bunu nasıl sağlayabilirim?

HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Farm Takip</title>

<style>
body{
 background:#121212;
 color:white;
 font-family:Arial;
 display:flex;
 justify-content:center;
 padding:30px;
}

.container{
 width:800px;
 background:#1e1e1e;
 padding:25px;
 border-radius:16px;
}

h2{text-align:center;font-size:34px}

.row{
 display:flex;
 gap:15px;
 padding:20px;
 border-bottom:1px solid #333;
 align-items:center;
}

input[type=text]{
 flex:1;
 font-size:30px;
 background:transparent;
 border:none;
 color:white;
 outline:none;
}

input[type=checkbox]{
 transform:scale(2.5);
 accent-color: #ff0000 ;
}

button{
 padding:10px 14px;
 border:none;
 border-radius:10px;
 cursor:pointer;
}

.delete{
 background:#900;
 color:white;
}

.add{
 width:100%;
 margin-top:10px;
 font-size:26px;
 background:#333;
 color:white;
}
</style>

</head>

<body>

<div class="container">
 <h2>Farm Takip</h2>
 <div id="list"></div>

 <button class="add" onclick="addRow()">+</button>
</div>

<script src="renderer.js"></script>

</body>
</html>

JavaScript:
const { app, BrowserWindow } = require('electron');

function createWindow() {
 const win = new BrowserWindow({
 width: 800,
 height: 900,
 webPreferences: {
 nodeIntegration: true,
 contextIsolation: false
 }
 });

 win.loadFile('index.html');
}

app.whenReady().then(createWindow);

JavaScript:
const fs = require('fs');
const path = require('path');

/* 📁 APP KLASÖRÜ */
const basePath = __dirname;

const dataPath = path.join(basePath, "veriler.json");
const resetPath = path.join(basePath, "reset.json");
const backupDir = path.join(basePath, "backup");

/* ================= LOAD ================= */
let data = load();

function load() {
 if (fs.existsSync(dataPath)) {
 return JSON.parse(fs.readFileSync(dataPath, "utf8"));
 }
 return [];
}

/* ================= SAVE ================= */
function save() {
 fs.writeFileSync(dataPath, JSON.stringify(data, null, 2));
 autoBackup();
}

/* ================= AUTO BACKUP ================= */
function autoBackup() {
 if (!fs.existsSync(backupDir)) {
 fs.mkdirSync(backupDir);
 }

 const file = path.join(
 backupDir,
 `backup_${Date.now()}.json`
 );

 fs.writeFileSync(file, JSON.stringify(data, null, 2));
}

/* ================= WEEK RESET ================= */
function weeklyReset() {
 const now = new Date();

 if (now.getDay() !== 3) return;

 let last = null;

 if (fs.existsSync(resetPath)) {
 last = JSON.parse(fs.readFileSync(resetPath)).week;
 }

 const weekId = `${now.getFullYear()}-${Math.ceil(now.getDate()/7)}-${now.getDay()}`;

 if (last !== weekId) {
 data = data.map(x => ({ ...x, checked: false }));
 save();

 fs.writeFileSync(resetPath, JSON.stringify({ week: weekId }));
 }
}

/* ================= RENDER ================= */
function render() {
 const list = document.getElementById("list");
 list.innerHTML = "";

 data.forEach((item, i) => {
 const row = document.createElement("div");
 row.className = "row";

 row.innerHTML = `
 <input type="text" class="name-input"
 value="${item.name}"
 oninput="update(${i}, this.value)">

 <input type="checkbox" class="check"
 ${item.checked ? "checked" : ""}
 onchange="toggle(${i}, this.checked)">

 <button class="delete-btn" onclick="remove(${i})">Sil</button>
 `;

 list.appendChild(row);
 });
}

/* ================= ACTIONS ================= */
function addRow() {
 data.push({ name: "Yeni", checked: false });
 save();
 render();
}

function remove(i) {
 data.splice(i, 1);
 save();
 render();
}

function update(i, v) {
 data[i].name = v;
 save();
}

function toggle(i, v) {
 data[i].checked = v;
 save();
}

/* ================= GLOBAL ================= */
window.addRow = addRow;
window.remove = remove;
window.update = update;
window.toggle = toggle;

/* ================= START ================= */
weeklyReset();
render();
 
Gridle yaparsin;

CSS:
#list {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
 
Bu siteyi kullanmak için çerezler gereklidir. Siteyi kullanmaya devam etmek için çerezleri kabul etmelisiniz. Daha Fazlasını Öğren.…