だいぶ久しぶりの更新となってしまいましたが、 今回はJavaScriptでTabメニューの実装をしていきます。 仕様 タブは3つ以上ある クリックすると切り替わる 表示されているタブは色が付く 同じタブモジュールをページ内に複数設置することが可能 ポイントとし…

今回は、自身のポートフォリオで実装している「複数のモーダルを設置する方法」を解説していきます。モーダル一つだけというのはよく見かけますが、複数の場合の記事が少なかったので初心者の方でも実装できるように分かりやすく解説していきたいと思います…

Github Pagesにアップロードしたポートフォリオサイトに、「formspree」というサービスを使い、お問い合わせフォームの実装を行いました。導入自体は難しくはありませんでしたが、解説されている記事が古いものばかりでしたので同じように困っている方に向け…

ポモドーロタイマーvanilla JS編は前回の⑦で、機能自体はほぼ実装完了しました。前回の記事はこちら。naomi-homma.hatenablog.com 最後にhtml/CSSを整えていきます。完成品はこちらです。 (タイマー表示部分とユーザー編集部分) CSSによるスタイリングとhtml…

今回も前回に引き続き使いやすさを改善するために 以下2つの機能を実装していきます。 ①各ターン終了後に効果音を鳴らし、終了を知らせる②chromeタブにカウントダウンを表示させる ※画面を見ていなくても確認できるようにするため 参考までに前回の記事はこ…

今回は、ポモドーロタイマーの作業時間や休憩時間をユーザーが編集できるように編集部分の実装を行っていきます。イメージはこのような感じです。 設定時間の表示とユーザー編集部分 ユーザー編集部分の追加 編集できる内容は次の4つとしました。 ・作業時間…

今回は、前回実装した自動サイクル部分のリファクタリングと START、STOP、RESETボタンをクリックした際の動きを実装していきます。 前回の記事はこちら naomi-homma.hatenablog.com 自動サイクル部分のリファクタリング 前回のコードでは各ターン毎に関数を…

前回からの続きになります。前回は1秒ごとにカウントダウンを行い それをタイマー領域に描画するところまで実装しました。今回は、作業と休憩のサイクルを自動的に回す実装を行っていきます。イメージはこのような感じです。workから自動的にbreakに切り替わ…

前回要件定義を行ったので今回はそれに従い、まずはVanilla JSで基本の動きを実装しました。 ※最終的にはReact/Reduxにリプレイスしますが JavaScriptの勉強も兼ねてまずはVanilla JSで書くことにしました。 表示領域の作成とDOM操作 まずは、index.htmlの作…