Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Add a Copy code button to the interview editor

オープン 初心者向け
#318 コメント 2 件 リアクション 2 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
80/100
issue の種類
機能追加
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
css, html, javascript
領域
frontend

調査の方向性

まず web/interview.html のエディタのマークアップから始め、次に web/interview.js がエディタとそのイベントハンドラをどこで設定しているかを確認してください。エディタの横にボタンを追加します。このボタンは、エディタの全テキストを読み取り、Clipboard API で書き込み、短く "Copied!" というメッセージを表示し、エディタが空のときは無効になり、権限エラーを捕捉します。web/styles.css で既存のコントロールに合うようスタイルを設定してください。他の場所に貼り付けたときに正確なテキストが得られ、エディタの内容、カーソル、選択範囲が変わらなければ完了です。

索引モデルが issue の本文から書いたものです。

説明

Description

Currently, candidates need to manually select all text in the code editor and copy it using keyboard shortcuts.

Adding a "Copy code" button would provide a convenient way to copy the current solution for debugging, reviewing, or sharing after practice.

Expected Behavior

  • Add a "Copy code" button near the code editor.
  • Clicking the button copies the entire current editor content to the clipboard.
  • Display brief feedback such as "Copied!" after a successful copy.
  • Disable the button when the editor is empty.
  • Handle clipboard permission errors gracefully.
  • Preserve the editor content, cursor position, and selection.

Suggested Implementation

The relevant files are:

  • web/interview.html — Add the button to the editor interface.
  • web/interview.js — Handle the copy action using the Clipboard API.
  • web/styles.css — Style the button consistently with the existing interface.

Testing

  1. Enter code in the editor.
  2. Click "Copy code".
  3. Paste the clipboard contents into another text editor.
  4. Verify that the copied code matches the original, including whitespace and line breaks.
  5. Verify that clicking the button does not modify the editor content.
  6. Verify the behavior when the editor is empty or clipboard access fails.

Motivation

This small usability improvement reduces repetitive manual actions and makes it easier for candidates to review their code outside CodeTrial.

主要言語
Rust
スター
160
フォーク
64
平均マージ
1日 10時間
マージ済み PR(30日)
116

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

sysprog21/codetrial のほかの issue

sysprog21/codetrial の issue をすべて見る

似ている issue

Rust の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。