codingwithsara/index.html Secret

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>RGB to HEX Converter</title>
    <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">

    <style>
        #container {
            font-family: 'Inconsolata', monospace;
            text-align: center;
            width: 800px;
            margin: 160px auto;
        }
        table {
            width: 100%;
        }
        h1 {
            margin-top: 100px;
            font-size: 38px;
        }
        input[type="range"] {
            width: 200px;
            height: 50px;
        }
    </style>

    <script>
        function changeRange() {
            // r,g,bの値を取得して、int型に変換する
            var r = parseInt(document.getElementById("r").value);
            var g = parseInt(document.getElementById("g").value);
            var b = parseInt(document.getElementById("b").value);

            // #20b9ff のように文字列を作成する
            var color = "#" + hex(r) + hex(g) + hex(b);

            // 背景色・テキストを変更する
            document.body.style.backgroundColor = color;
            document.getElementById("hex-label").innerText = color;
            document.getElementById("r-label").innerText = r;
            document.getElementById("g-label").innerText = g;
            document.getElementById("b-label").innerText = b;

            // 文字色の切り替え
            if (r < 100 && g < 100 && b < 100) {
                document.getElementById("container").style.color = "white";
            } else {
                document.getElementById("container").style.color = "black";
            }
        }

        function hex(num) {
            // 10進数を16進数に変換する
            var hex = num.toString(16);
            if (num < 16) hex = "0" + hex;
            return hex;
        }
    </script>
</head>
<body>
    <div id="container">
        <table>
            <tr>
                <th>Red</th>
                <th>Green</th>
                <th>Blue</th>
            </tr>
            <tr>
                <td><input type="range" min="0" max="255" value="255" id="r" onchange="changeRange()"></td>
                <td><input type="range" min="0" max="255" value="255" id="g" onchange="changeRange()"></td>
                <td><input type="range" min="0" max="255" value="255" id="b" onchange="changeRange()"></td>
            </tr>
            <tr>
                <td id="r-label">255</td>
                <td id="g-label">255</td>
                <td id="b-label">255</td>
            </tr>
        </table>
        <h1 id="hex-label">#ffffff</h1>
    </div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>RGB to HEX Converter</title>
	<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">

	<style>
	#container {
	font-family: 'Inconsolata', monospace;
	text-align: center;
	width: 800px;
	margin: 160px auto;
	}
	table {
	width: 100%;
	}
	h1 {
	margin-top: 100px;
	font-size: 38px;
	}
	input[type="range"] {
	width: 200px;
	height: 50px;
	}
	</style>

	<script>
	function changeRange() {
	// r,g,bの値を取得して、int型に変換する
	var r = parseInt(document.getElementById("r").value);
	var g = parseInt(document.getElementById("g").value);
	var b = parseInt(document.getElementById("b").value);

	// #20b9ff のように文字列を作成する
	var color = "#" + hex(r) + hex(g) + hex(b);

	// 背景色・テキストを変更する
	document.body.style.backgroundColor = color;
	document.getElementById("hex-label").innerText = color;
	document.getElementById("r-label").innerText = r;
	document.getElementById("g-label").innerText = g;
	document.getElementById("b-label").innerText = b;

	// 文字色の切り替え
	if (r < 100 && g < 100 && b < 100) {
	document.getElementById("container").style.color = "white";
	} else {
	document.getElementById("container").style.color = "black";
	}
	}

	function hex(num) {
	// 10進数を16進数に変換する
	var hex = num.toString(16);
	if (num < 16) hex = "0" + hex;
	return hex;
	}
	</script>
	</head>
	<body>
	<div id="container">
	<table>
	<tr>
	<th>Red</th>
	<th>Green</th>
	<th>Blue</th>
	</tr>
	<tr>
	<td><input type="range" min="0" max="255" value="255" id="r" onchange="changeRange()"></td>
	<td><input type="range" min="0" max="255" value="255" id="g" onchange="changeRange()"></td>
	<td><input type="range" min="0" max="255" value="255" id="b" onchange="changeRange()"></td>
	</tr>
	<tr>
	<td id="r-label">255</td>
	<td id="g-label">255</td>
	<td id="b-label">255</td>
	</tr>
	</table>
	<h1 id="hex-label">#ffffff</h1>
	</div>
	</body>
	</html>
No results found