JavaScript 基礎編 (ミニアプリの開発)

# この記事の内容について
　フロントエンドの第一歩としてJavaScriptの基礎学習を始めました。アウトプットとして、JavaScriptのオブジェクトやDOM操作などをまとめていこうと思います！
　私はまだエンジニア歴1年未満の初学者なので、間違い等があればご指摘いただけると幸いです。

# JavaScript 基礎編
* [ブラウザオブジェクト / DOM](https://qiita.com/Nao52/items/c6b7531b85a5e4a6c8dc)
* [イベント](https://qiita.com/Nao52/items/6705eeca68a77b3f280a)
* [通信と非同期処理](https://qiita.com/Nao52/items/3ae127867cee0f838643)
* [ミニアプリの開発](https://qiita.com/Nao52/items/ed9f64a9b1c1da91abc0)

# JavaScript 応用編
* [モダンなJavaScriptの機能](https://qiita.com/Nao52/items/5ee9c2af96b4e9dfd278)

# Git Hub リンク
* [ミニアプリケーション](https://github.com/nao52/javascript_mini_application)

# カウントアップダウン
### 仕様
* 画面には数字とボタンが配置されている
* +1ボタンを押すと画面上の数字が1加算される
* -1ボタンを押すと画面上の数字が1減少する
* クリアボタンを押すと画面上の数字が0に戻る
* 数字は0から始まり、10までカウント可能(10でボタンを押すとアラート表示)
* 数字が0の時、-1ボタンを押すとアラートを表示

### HTMLの作成
```html:count_up.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <title>CountUp</title>
</head>
<body>
  <div class="counter">0</div>
  <button class="countup" type="button">+1</button>
  <button class="countdown" type="button">-1</button>
  <button class="countclear" type="button">クリア</button><br>

  <br>
  <a href="/index.html">トップページに戻る</a>

  <script src="count_up.js"></script>
</body>
</html>
```
### JavaScriptの作成
```javascript:count_up.js
const countupButton = document.querySelector('.countup');
const countdownButton = document.querySelector('.countdown');
const countclearButton = document.querySelector('.countclear');

countupButton.addEventListener('click', () => {
  const counter = document.querySelector('.counter');
  const currentCount = parseInt(counter.textContent);
  if (currentCount === 10) {
    alert('10以上のカウントはできません');
    return;
  }
  counter.textContent = currentCount + 1;
});

countdownButton.addEventListener('click', () => {
  const counter = document.querySelector('.counter');
  const currentCount = parseInt(counter.textContent);
  if (currentCount === 0) {
    alert('0以下のカウントはできません');
    return;
  }
  counter.textContent = currentCount - 1;
});

countclearButton.addEventListener('click', () => {
  const counter = document.querySelector('.counter');
  counter.textContent = 0;
});
```

# スクロール操作アプリ
### 仕様
* 「上に戻るボタンは最初は非表示」
* 画面を縦にスクロールすると「上に戻る」ボタンが表示される
* 一番上まで戻ると「上に戻る」ボタンが非表示になる
* 「上に戻る」ボタンをクリックすると、画面の一番上まで自動でスクロールする
### htmlの作成
```html:scroll.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>scroll</title>
  <link rel="stylesheet" href="/css/scroll.css">
</head>
<body>
  <div class="content"></div>
  <button type="button" class="moveToTop">上に戻る</button>

  <script src="/js/scroll.js"></script>
</body>
</html>
```
### CSSの作成
```css:scroll.css
.content {
  height: 2000px;
}

.moveToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
}
```
### JavaScriptの作成
```javascript:scroll.js
window.addEventListener('scroll', () => {
  const button = document.querySelector('.moveToTop');
  if (window.scrollY >= 1000) {
    button.style.display = 'block';
  } else {
    button.style.display = 'none';
  }
});

const button = document.querySelector('.moveToTop');
button.addEventListener('click', () => {
  // スクロールの位置を操作する
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: 'smooth'
  });
});
```

# 簡易メモアプリ
### 仕様
* テキスト入力欄と追加ボタンが画面に配置されている
* テキストを入力し、追加ボタンを押下すると、リストの一番下に追加される
* テキストの追加後、フォームからテキストは消える
* テキストを入力せず、ボタンを押すとアラームが出る
### htmlの作成
```html:memo.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>memo_app</title>
</head>
<body>
  <input type="text" class="new-memo">
  <button type="button" class="add-memo">メモ追加</button>
  <ul class="memo-list">
    <li>メモです</li>
  </ul>

  <a href="index.html">トップページに戻る</a>

  <script src="/js/memo.js"></script>
</body>
</html>
```
### JavaScriptの作成
```javascript:memo.js
const addMemoButton = document.querySelector('.add-memo');
addMemoButton.addEventListener('click', () => {
  const newMemoInput = document.querySelector('.new-memo');
  if (!newMemoInput.value) {
    alert('文字を入力してください');
    return;
  }

  const newMemo = document.createElement('li');
  newMemo.textContent = newMemoInput.value;

  const memoList = document.querySelector('.memo-list');
  memoList.append(newMemo);

  newMemoInput.value = '';
});
```