【ドットインストール】第5回！256times参加レポート！【学習メモ】 |

みなさんこんにちは！おさかなです！

今回は「第5回256times」について、書いていこうと思います！

「256times」って何？という方はコチラをチェック！

今回もドットインストールが用意している、「プレイグラウンド」という環境でコーディングしていきました…！

プレイグラウンドの利用はコチラ！
※ドットインストールのアカウントを取得しておく必要があります…！

それでは、レッツゴー！！！！！

想定読者
・ドットインストールで学習中の方
・256timesって何？という方
・ソースコードを添削してほしい方

第5回の課題は？

課題の詳細についてはコチラ！

第5回の課題は「JavaScript」で「動きのある3つの箱」を作ってみる！でした…！

今回もいつも通りの流れです…！

・21:00 課題発表
・21:30 課題提出締め切り、休憩
・21:35 コードレビュー開始
・22:00 番組終了

「生放送見逃した！」って方も、「アーカイブ」が残っているので「コチラ」から見ることができます…！(よかった…！)

実際に参加した感想

今回からは「JavaScript」も取り入れられていてチャレンジし甲斐があり、とても楽しかったです…！

まだまだ「HTML/CSS」で躓く部分もあるので、もっとスムーズにコードを書いていけるといいなと思いました。

そして、「JavaScript」も基本的なことがしっかりと理解できていないので、これからもっと勉強して、アウトプットの回数を増やしていきたいと思います！
(がんばります…！)

おさかなのソースコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Playground</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <ul>
    <li id ="left"></li>
    <li id ="center"></li>
    <li id ="right"></li>
  </ul>
  <script src="js/main.js"></script>
</body>
</html>

CSS

ul {
  list-style: none;
  display: flex;
  justify-content:space-around;
}
li {
  width: 100px;
  height: 100px;
  background: pink;
}
#left.orange {
  background: orange;
}

JavaScript

'use strict';

let count = 0;

document.getElementById("left").onclick = function() {
  this.classList.toggle("orange");
};

document.getElementById("center").onclick = function() {
  count++;
  console.log(count);
};

レビューコードまとめ

今回は「JavaScript」をメインに、レビューを行っていました！

レビューコード1

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Playground</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="contents">
    <div class="box">hello</div>
    <div class="box">0</div>
    <div class="box">?</div>
  </div>
  <script src="js/main.js"></script>
</body>
</html>

CSS

.contents {
  display: flex;
}
.box {
  width: 100px;
  height: 100px;
  /*background: #003ea8;*/
  background-color: blue;
  text-align: center;
  line-height: 100px;
  border-radius: 5px;
  color: #fff;
  user-select: none;
  cursor: pointer;
}
.box + .box {
  margin-left: 10px;
}

JavaScript

'use strict';

// var - 関数スコープ
// let, const - ブロックスコープ

// (function() {

{
  // let boxes = document.getElementsByClassName('box');
  let boxes = document.querySelectorAll('.box');
  
  let color = 'blue';
  
  // console.log(boxes[0]);
  
  boxes[0].addEventListener('click', function() {
    this.style.backgroundColor = this.style.backgroundColor === 'blue' ? 'pink' : 'blue';
    
    // if (color === 'blue') {
    //   // classList.toggle()
    //   this.style.background = 'pink';
    //   color = 'pink';
    // } else {
    //   this.style.background = '#003ea8';
    //   color = 'blue';
    // }
  });
  
  boxes[1].addEventListener('click', function() {
    this.textContent++;
  });
  boxes[2].addEventListener('click', function() {
    this.textContent += '?';
  });
}

// })();

レビューコード2

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Playground</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="container">
    <div id="box1" class="box">1</div>
    <div id="box2" class="box"></div>
    <div id="box3" class="box">gray</div>
  </div>
  
  <script src="js/main.js"></script>
</body>
</html>

CSS

.container{
  display: flex;
}

.box{
  margin-left:12px;
  width:100px;
  height:100px;
  background: #bbb;
  line-height:100px;
  text-align:center;
  user-select:none;
  cursor:pointer;
}
.box:hover{
  /*cursor:pointer;*/
}

JavaScript

let box1 = document.getElementById("box1");
let box2 = document.getElementById("box2");
let box3 = document.getElementById("box3");

// console.log(box1);
box1.addEventListener('mousedown', function(){
  box1.style.background="orange";
  // classListのほうがいいと思います
});

box1.addEventListener('mouseup', function(){
  box1.style.background="";
});

box2.textContent = 1;
box2.addEventListener('click', function(){
  box2.textContent++;
});

box3.addEventListener('click', function(){
  let colors=["red","pink","orange","yellow","green","blue","navy","tomato"];
  let randomNum=Math.floor(Math.random() * colors.length);
  box3.style.background=colors[randomNum];
  // box3.textContent=colors[randomNum];
  box3.textContent = randomNum;
});

レビューコード3

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>256times</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  
  <div class="boxWrap">
    <!--color-->
    <div class="box box1" id="box1">
      <p>hello</p>
    </div>
    
    <!--count-->
    <div class="box box2" id="box2">
      <p>0</p>
    </div>
    
    <div class="box box3"></div>
  </div>
  
  
  <script src="js/main.js"></script>
</body>
</html>

CSS

.boxWrap{
  display: flex;
}

.box{
  width: 5em;
  height: 5em;
  background-color: skyblue;
  margin-right: 1em;
  text-align: center;
}

.red{
  background-color: red;
}

JavaScript

// color
// document.getElementById("box1").onclick = function(){
//   this.classList.toggle("red");
// }

// document.getElementById("box1").addEventListener('click', () => {
//   document.getElementById("box1").classList.toggle('red');
// });

document.getElementById("box1").addEventListener('click', function() {
  this.classList.toggle('red');
});

// count
let countUp = 0;

// document.getElementById("box2").onclick = function(){
//   countUp++;
//   document.getElementById("box2").innerHTML = countUp;
// }

document.getElementById("box2").addEventListener('click', () => {
  countUp++;
  document.getElementById("box2").textContent = countUp;
});

レビューコード4

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>My Playground</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <ul>
    <li id="left"></li>
    <li id="center">0</li>
    <li id="right"></li>
  </ul>
  <script src="js/main.js"></script>
</body>
</html>

CSS

ul {
  list-style: none;
  display: flex;
  justify-content:space-around;
}
li {
  width: 100px;
  height: 100px;
  background: pink;
}
#left.orange {
  background: orange;
}

JavaScript

'use strict';

// let count = 0;

// document.getElementById("left").onclick = function() {
//   this.classList.toggle("orange");
// };

document.getElementById("left").addEventListener("click", () => {
  document.getElementById("left").classList.toggle("orange");
});

// document.getElementById("center").onclick = function() {
//   count++;
//   console.log(count);
// };

document.getElementById("center").addEventListener("click", () => {
  document.getElementById("center").textContent++;
});