年末まで毎日webサイトを作り続ける大学生 〜7日目 Web Storage APIの利用/ ランダムで背景色と枠線を変えてみる〜

##はじめに
初めまして。
年末まで毎日webサイトを作っている者です。
今日は2つやったことがあります。

1. Web Storage APIの利用
3. ランダムで背景色と枠線を変更する

Web Storage APIはほとんど[MDN](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics)のサイトに書いてある通りにやりました。
2つ目は応用として一から自分で考えました。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は7日目。(2019/10/25)
よろしくお願いします。

##サイトURL
- https://sin2cos21.github.io/day7.html

##やったこと ~Web Storage API~
まずWeb Storage APIの利用からいきます。
今のところweb Storageには何も保存されてないですよね↓
![スクリーンショット 2019-10-25 23.22.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516248/ee706457-cfcb-2958-f8c8-8a5247a9992e.png)

左上にあるボタンを押して文字を入力すると・・・↓

![スクリーンショット 2019-10-25 23.22.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516248/e2c8a034-a71e-3b66-eeaa-a0eefa500d20.png)

web storageにデータが保存されました。↓
![スクリーンショット 2019-10-25 23.22.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516248/e27db2b7-f90f-94b0-d555-557d1313f9ae.png)

コードはこれだけです↓

```javascript
       // 名前を入力するコード
        function setName() {
            var userName = prompt('あなたの名前を入力してください');
            localStorage.setItem('name', userName);
            myHeading.textContent = 'こんにちは' + userName + 'さん';
        };

        // 名前を入力するコード　初期化コード
        if (!localStorage.getItem('name')) {
            setName();
        } else {
            var storedName = localStorage.getItem('name');
            myHeading.textContent = 'こんばんは' + storedName + 'さん';
        }

        myButton.onclick = function () {
            setName();
        };
```

localStorage.setItemで情報をセットして、
localStorage.getItemで情報を取り出すだけです！

##やったこと ~ランダムで背景色と枠線を変えてみる~

見た方が早いと思います！↓
![test.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516248/2aa7f199-2282-4414-de22-f06b9a93d281.gif)

コード↓

```javascript

var myHeading = document.querySelector('h1');
        var myButton = document.getElementById('button');
        var myDiv = document.getElementById('button2');

        // borderの種類 0~7までの配列
        var boder_style = ["solid", "double", "groove", "ridge", "inset", "outset", "dashed", "dotted"];

        function border_change() {
            var img = document.getElementById('test');
            var random1 = Math.floor(Math.random() * boder_style.length);
            var border_random = boder_style[random1];
            var pVal = document.querySelector('p');
            var pixel = Math.floor(Math.random() * 10);
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            var border_val = pixel + "px " + border_random;
            var bgColor = "rgba(" + r + "," + g + "," + b + ",0.7)"
            pVal.innerHTML = "border: " + border_val + "/" + bgColor;
            img.style.border = border_val;
            img.style.backgroundColor = bgColor;
        };

        myDiv.onclick = function () {
            border_change();
        }

```

ボーダーの枠線を変える変数が多かったのでごちゃごちゃしてしまいました。
あと色も自動で変えるのはrとgとbのそれぞれにrandomメソッドを使ったので（それをfloorで小数点以下取り除き)変数がもう大変なことに・・・
使ってる技術はどれも基礎的なものばかりです。

##感想

今日は1日疲れましたが、なんとか完成しました！
少しずつではありますが成長してる感はあります。
明日も頑張ります！


##参考
- JavaScript の基本 - Web 開発を学ぶ | MDN (https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics)

参考になりました！ありがとうございます！