Codestepで学ぶHTML、CSSの模写コーディング （javascript編)

- [中級編:前半](https://qiita.com/kennsukea/items/5b166035a70a2c994c15
)
- [上級編](https://qiita.com/kennsukea/items/0ce4995a9c58bd473eb5
)
- [番外編](https://qiita.com/kennsukea/private/95e78d96a2afa3a83959)
- [javascript編](https://qiita.com/kennsukea/items/33f436eb96e5bcea7f82)
- [勝手にリファクタリングJS 1](https://qiita.com/kennsukea/private/5a548808f283593e8e10)
# アコーディオン 編

https://code-step.com/extra2-menu/

- [模写コーディングしたサイト](http://abc18717397.html.xdomain.jp/accordion.html)

## 参考サイト

https://www.mitsue.co.jp/knowledge/blog/frontend/201912/14_0000.html

https://fromkato.com/webdev/css/properties/visibility

https://qiita.com/FJHoshi/items/0ed4b628acdab696be62

- 変更点
  - jQuery 禁止

修正後のコード
<p class="codepen" data-height="800" data-default-tab="result" data-slug-hash="abQOpRx" data-user="y0sh1m0t0" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/y0sh1m0t0/pen/abQOpRx">
  Untitled</a> by y0sh1m0t0 (<a href="https://codepen.io/y0sh1m0t0">@y0sh1m0t0</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


html と 全体のstyle 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/d512b469-eb30-c4df-b5c8-5792ba2b2592.png)
`liタグ` と `li>div.labelタグ` のスタイル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/efbe0126-5943-242f-dabc-37e3fe3e9dc0.png)
`detailタグ` と `dlタグ` のスタイル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/0d3ce4e2-3c80-3477-7849-ad1c1ab8af81.png)
javascript
こいつが悪さをしていた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/8cddcce7-c459-55ea-325e-c0356163dbbc.png)
スタイルを修正後のjavascriptコード
すっきりしたし、コードとして理論的になった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/75bd6b15-8270-9bb0-9a4c-0c954ec3e46a.png)

スタイルを修正する前のjavascriptコード
jsはcssを修正するわけではない。domを修正してスタイルを作る。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/7bb39461-18c5-57c6-8f4a-534c87ba8a82.png)



修正前のコード
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="xxYEMGZ" data-user="y0sh1m0t0" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/y0sh1m0t0/pen/xxYEMGZ">
  Untitled</a> by y0sh1m0t0 (<a href="https://codepen.io/y0sh1m0t0">@y0sh1m0t0</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# slider 編
https://code-step.com/extra7-menu/

上はjqueryでサクッと作成しています。javascriptコードは👇のコードを参考。

https://www.cssscript.com/fullscreen-touch-slider/

大まかなからくりは img-container を `translateX` で スライドさせることで 画像を切り替えている。
imgContainerPosition(0,200,400,600,800,1000)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/9edd2855-e136-a983-c0a2-350f16a90a6f.png)
mousedown イベント時
クリックしたスタートポジションを取得すと、共通する変数の初期化
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/b76abc2b-f3db-b828-e9fd-4bb61d42ce79.png)
mousemove イベント時
 distance分imgContainerPositionに加算した分をtranslateさせる。
`imgContainer.style.transform = translateX(imgContainerPosition +- distance);`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/c6376ed7-3a7e-6a67-6e57-36dcdc1355e7.png)
mouseup,mouseleaveイベント時
imgContainerPositionに合わせて移動させる。
`imgContainer.style.transform = translateX(-200px);`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/bc35be4a-17bc-81ae-475f-0ecce7578c6d.png)
完成図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/ba5c0d91-3a27-c53d-f05b-98af68b21a25.png)
html と styleコード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/1145ef29-2441-df41-cbf6-6e06a9508836.png)
javascript コード プライベート変数とその関数
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/efb90bf2-b375-84eb-153d-dc46df56248a.png)
javascript 実行コード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/aad827f9-1c54-ff64-bbed-0c1ef1aec944.png)

<p class="codepen" data-height="400" data-default-tab="result" data-slug-hash="oNQXLEK" data-user="y0sh1m0t0" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/y0sh1m0t0/pen/oNQXLEK">
  Untitled</a> by y0sh1m0t0 (<a href="https://codepen.io/y0sh1m0t0">@y0sh1m0t0</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# Datepicker

https://code-step.com/extra9-menu/

datepickerというよりformバリデーションのメモ

```html:
<!-- 昔と違ってtypeが充実しているのでjqueryとか必要なくなっている -->
<input type="date" name="" id="">
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/63e36912-3f1f-dcab-4802-f6162ffdd777.png)

バリデーションの参考サイト

https://web.analogstd.com/tips/posts/js/form-validation-own-rules.php

- その他
  - [JavaScript初級者から中級者になろう 第12回](https://uhyohyo.net/javascript/2_12.html)


html と style
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/bee3c607-2583-b240-775f-161ae0a9a356.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/25d8aaef-4b31-f362-1e6c-18297ca177d8.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/e5ded3d3-a011-c87f-a7e0-bb322889b3a9.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/f3df4c3b-e538-6eff-be86-85c8be6eb50a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1830335/7e5817db-f616-5784-53ef-b63e586a648c.png)
0.5x レスポンシブ htmlタブで半分にくぎるとワンカラムになる
<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="qBQdMoN" data-user="y0sh1m0t0" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/y0sh1m0t0/pen/qBQdMoN">
  Untitled</a> by y0sh1m0t0 (<a href="https://codepen.io/y0sh1m0t0">@y0sh1m0t0</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

javascript
途中