<![CDATA[
<p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>index_HTML tag</b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!DOCTYPE html> <br><html lang="en"><br><head> <br>    <meta charset="UTF-8"> <br>    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <br>    <link rel="stylesheet" href="style.css"> <br>    <title>Day #40 - Detect Internet Speed | AsmrProg</title> <br>    <style> </b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>@import‎ url('<a href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');" target="_blank" class="ke-link">https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');</a></b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>*{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    margin: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    box-sizing: border-box; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-family: 'Poppins', sans-serif; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>body{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    height: 100vh; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background: linear-gradient(#27272a 50%, #075985 50%); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    align-items: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    justify-content: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.container{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    background-color: #fff; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    display: flex; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    flex-direction: column; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    align-items: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 350px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    padding: 0 2em 1em; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    border-radius: 1em; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-size: 1.2em; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    line-height: 1.6em; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    box-shadow: 0 1.6em 2.4em rgba(40, 4, 67, 0.3); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.container img{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    width: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>p{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-weight: 400; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #747497; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>span{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    font-weight: 400; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    color: #090931; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}</b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>let startTime, endTime; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>let imageSize = ""; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>let image = new Image(); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>let bitSpeed = document.getElementById("bits"), </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    kbSpeed = document.getElementById("kbs"), </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    mbSpeed = document.getElementById("mbs"), </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    info = document.getElementById("info"); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>let totalBitSpeed = 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>let totalKbSpeed = 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>let totalMbSpeed = 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>let numTests = 1; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>let testCompleted = 0; </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>// Get random image from unsplash.com </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>let imageApi = "<a href="https://source.unsplash.com/random?topic=nature" target="_blank" class="ke-link">https://source.unsplash.com/random?topic=nature</a>"; </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>// When image loads </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>image.xxxxonload = async function () { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    endTime = new Date().getTime(); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    // Get image size </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    await fetch(imageApi).then((response) => { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        imageSize = response.headers.get("content-length"); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        calculateSpeed(); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    }); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}; </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>// Function to calculate speed </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>function calculateSpeed() { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    // Time taken in seconds </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    let timeDuration = (endTime - startTime) / 1000; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    // Total bits </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    let loadedBits = imageSize * 8; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    let speedInBts = loadedBits / timeDuration; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    let speedInKbs = speedInBts / 1024; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    let speedInMbs = speedInKbs / 1024; </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    totalBitSpeed += speedInBts; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    totalKbSpeed += speedInKbs; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    totalMbSpeed += speedInMbs; </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    testCompleted++; </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    // If all tests completed (we get 5 image then calculate average) </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    if (testCompleted === numTests) { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        let averageSpeedInBps = (totalBitSpeed / numTests).toFixed(2); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        let averageSpeedInKbps = (totalKbSpeed / numTests).toFixed(2); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        let averageSpeedInMbps = (totalMbSpeed / numTests).toFixed(2); </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        // Display average speeds </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        bitSpeed.innerHTML += `${averageSpeedInBps}`; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        kbSpeed.innerHTML += `${averageSpeedInKbps}`; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        mbSpeed.innerHTML += `${averageSpeedInMbps}`; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        info.innerHTML = "Test Completed!"; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    } else { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        // Run the next test </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        startTime = new Date().getTime(); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        image.src = imageApi; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>// Initial function to start tests </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>const init = async () => { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    info.innerHTML = "Testing..."; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    startTime = new Date().getTime(); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    image.src = imageApi; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}; </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>// Run tests when window loads </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>window.xxxxonload = () => { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    for (let i = 0; i < numTests; i++) { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>        init(); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>    } </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>}; </b></span><br><br><br><br><br></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b> </style> <br></head> <br><br><body> <br><br>    <div class="container"> <br>        <img src="speedometer.png"> <br>        <p id="info"><span>...</span></p> <br>        <p id="mbs"><span>Speed In Mbs: </span></p> <br>        <p id="kbs"><span>Speed In Kbs: </span></p> <br>        <p id="bits"><span>Speed In Bits: </span></p> <br>    </div> <br><br><br>    <script src="index.js"></script> <br></body> <br><br></html></b></span></p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><a href="https://github.com/AsmrProg-YT/100-days-of-javascript/blob/master/Day%20%2340%20-%20Detect%20Internet%20Speed/style.css" target="_blank" class="ke-link">https://github.com/AsmrProg-YT/100-days-of-javascript/blob/master/Day%20%2340%20-%20Detect%20Internet%20Speed/style.css</a></b></span></p>
<!-- -->
]]>
첫댓글 https://www.w3schools.com/css/tryit.asp?filename=trycss_default