タグ: programming

ruby メモアプリ

require 'date'

class Memo
  attr_accessor :title, :content, :category, :created_at

  def initialize(title, content, category)
    @title = title
    @content = content
    @category = category
    @created_at = DateTime.now
  end

  def to_s
    "#{@title}: #{@content} (Category: #{@category}) [Created at: #{@created_at}]"
  end
end

class MemoApp
  def initialize
    @memos = []
    load_memos
  end

  def run
    loop do
      show_menu
      choice = gets.chomp.to_i

      case choice
      when 1
        create_memo
      when 2
        display_memos
      when 3
        search_memos
      when 4
        break
      else
        puts "Invalid choice. Please try again."
      end
    end
  end

  private

  def show_menu
    puts "\nMemo App Menu"
    puts "1. Create Memo"
    puts "2. Display Memos"
    puts "3. Search Memos"
    puts "4. Exit"
    print "Enter your choice: "
  end

  def create_memo
    print "Enter memo title: "
    title = gets.chomp
    print "Enter memo content: "
    content = gets.chomp
    print "Enter memo category: "
    category = gets.chomp

    memo = Memo.new(title, content, category)
    @memos << memo
    save_memos
    puts "Memo created successfully!"
  end

  def display_memos
    if @memos.empty?
      puts "No memos found."
    else
      puts "\nMemos:"
      @memos.each_with_index do |memo, index|
        puts "#{index + 1}. #{memo}"
      end
    end
  end

  def search_memos
    print "Enter search term: "
    term = gets.chomp.downcase
    results = @memos.select { |memo| memo.title.downcase.include?(term) || memo.content.downcase.include?(term) || memo.category.downcase.include?(term) }
    if results.empty?
      puts "No memos found matching the search term."
    else
      puts "\nSearch Results:"
      results.each { |memo| puts memo }
    end
  end

  def load_memos
    if File.exist?("memos.txt")
      File.open("memos.txt", "r") do |file|
        file.each_line do |line|
          title, content, category, created_at = line.chomp.split(": ")
          @memos << Memo.new(title, content, category)
        end
      end
    end
  end

  def save_memos
    File.open("memos.txt", "w") do |file|
      @memos.each do |memo|
        file.puts "#{memo.title}: #{memo.content}: #{memo.category}: #{memo.created_at}"
      end
    end
  end
end

# メモアプリの実行
memo_app = MemoApp.new
memo_app.run

JQuery Todoリスト

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo リスト</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .container {
            max-width: 600px;
            margin: 20px auto;
            background-color: #fff;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        input[type="text"] {
            width: 70%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
        }
        button {
            padding: 10px 20px;
            background-color: #4caf50;
            border: none;
            color: #fff;
            cursor: pointer;
            border-radius: 5px;
            font-size: 16px;
        }
        button:hover {
            background-color: #45a049;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            padding: 10px;
            border-bottom: 1px solid #ccc;
            transition: background-color 0.3s;
            cursor: pointer;
        }
        li:hover {
            background-color: #f9f9f9;
        }
        .completed {
            text-decoration: line-through;
            color: #888;
        }
        .remove {
            float: right;
            color: #f44336;
            font-weight: bold;
        }
        .remove:hover {
            color: #d32f2f;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Todo リスト</h1>
        <input type="text" id="todoInput" placeholder="Todoを入力してください" autofocus>
        <button id="addButton">追加</button>
        <ul id="todoList">
        </ul>
        <button id="clearCompleted">完了済みを削除</button>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            // Todo追加処理
            $("#addButton").click(function(){
                addTodo();
            });

            // EnterキーでTodo追加
            $("#todoInput").keypress(function(event){
                if(event.which === 13) { // Enterキーのキーコードは13
                    addTodo();
                }
            });

            // Todo完了処理
            $(document).on("click", "li", function(){
                $(this).toggleClass("completed");
            });

            // Todo削除処理
            $(document).on("click", ".remove", function(event){
                event.stopPropagation(); // 親要素へのイベント伝播を停止
                $(this).parent().remove();
            });

            // 完了済みTodoを一括削除
            $("#clearCompleted").click(function(){
                $(".completed").remove();
            });

            // Todo追加関数
            function addTodo() {
                var todoItem = $("#todoInput").val().trim();
                if(todoItem !== "") {
                    $("#todoList").append("<li>" + todoItem + "<span class='remove'>[x]</span></li>");
                    $("#todoInput").val(""); // 入力フィールドをクリア
                    $("#todoInput").focus(); // フォーカスを入力フィールドに戻す
                }
            }
        });
    </script>
</body>
</html>

main.js

'use strict';

$(document).ready(() => {
    const $input = $('input');
    const $list = $('ul');
    const $clearCompleted = $('#clearCompleted');
    const todos = JSON.parse(localStorage.getItem('todos')) || [];

    // ローカルストレージからTodoアイテムを取得し、表示する
    todos.forEach(todo => {
        addTodoToList(todo.text, todo.completed);
    });

    $input.focus();

    $('#addButton').click(() => {
        const todoText = $input.val().trim();
        if (todoText !== '' && !isDuplicate(todoText)) {
            addTodoToList(todoText, false);
            saveTodos();
            $input.val('').focus();
        }
    });

    // EnterキーでTodo追加
    $input.keypress((event) => {
        if (event.which === 13) { // Enterキーのキーコードは13
            $('#addButton').click();
        }
    });

    // Todoアイテムの完了/未完了の切り替え
    $list.on('click', 'li', (e) => {
        const $target = $(e.target);
        if (!$target.hasClass('remove')) {
            const $todoItem = $target.closest('li');
            $todoItem.toggleClass('completed');
            updateCompletedCount();
            saveTodos();
        }
    });

    // 完了済みTodoアイテムの削除
    $clearCompleted.click(() => {
        $list.find('.completed').remove();
        updateCompletedCount();
        saveTodos();
    });

    // Todoアイテムをリストに追加する関数
    function addTodoToList(text, completed) {
        const $todoItem = $('<li>').text(text);
        if (completed) {
            $todoItem.addClass('completed');
        }
        $todoItem.append('<span class="remove">[x]</span>').appendTo($list);
        updateCompletedCount();
    }

    // Todoアイテムをローカルストレージに保存する関数
    function saveTodos() {
        const todos = [];
        $list.find('li').each((index, todo) => {
            todos.push({
                text: $(todo).text(),
                completed: $(todo).hasClass('completed')
            });
        });
        localStorage.setItem('todos', JSON.stringify(todos));
    }

    // 重複するTodoアイテムをチェックする関数
    function isDuplicate(text) {
        return $list.find('li').filter((index, todo) => $(todo).text() === text).length > 0;
    }

    // 完了済みアイテムの数を更新する関数
    function updateCompletedCount() {
        const completedCount = $list.find('.completed').length;
        $clearCompleted.text(`完了済みアイテムを削除 (${completedCount})`);
        if (completedCount === 0) {
            $clearCompleted.hide();
        } else {
            $clearCompleted.show();
        }
    }
});