added display check project

Anujit1 · Anujit1 · commit c330399c4a52 · 2025-04-22T21:59:02.000+05:30
diff --git a/Display_Test/index.html b/Display_Test/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Document</title>
+
+        <!-- css -->
+        <link rel="stylesheet" href="styles.css"> 
+
+    </head>
+
+    <body>
+
+        <header id="navbar">
+            <nav>
+                <h1 class="navbar-title">Test Your Display</h1>
+            </nav>
+        </header>
+
+        <div id="canvas">
+            <h3>Press start to see the color change and Stop to stop it.</h3>
+            <button id="start">Start</button>
+            <button id="stop">Stop</button>
+        </div>
+
+
+    </body>
+
+    <script src="script.js"></script>
+</html>
diff --git a/Display_Test/script.js b/Display_Test/script.js
@@ -0,0 +1,49 @@
+const start =  document.querySelector('#start');
+const stop =  document.querySelector('#stop');
+const body = document.querySelector('body')
+
+let startInterval;
+
+
+// Hex color code generator.
+let hex = '0123456789abcdef'; 
+const colorId = function(){
+    let colorHex = "#";
+    for(let i = 0; i < 6; i++){
+        colorHex+= hex[Math.floor(Math.random()*16)];
+    }
+
+    return colorHex
+};
+
+
+
+// color setter
+const changeColor = function(){
+    body.style.backgroundColor = colorId();
+}
+
+
+let intervalId;
+// color change start
+startInterval = function(){
+    if(!intervalId){
+        intervalId = setInterval(changeColor, 1000);
+    }
+};
+
+// start button click
+start.addEventListener('click', startInterval);
+
+
+
+// color change stop
+let stopInterval = function(){
+    clearInterval(intervalId);
+    intervalId = null;
+};
+
+// stop button click
+stop.addEventListener('click', stopInterval);
+
+
diff --git a/Display_Test/styles.css b/Display_Test/styles.css
@@ -0,0 +1,67 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body{
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 80vh;
+    gap: 1em;
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 1rem;
+    cursor: pointer;
+    background-color: transparent;
+    border-radius: 5px;
+    border: 2px solid rgb(226, 110, 226);
+    color: chartreuse;
+    font-weight: bolder;
+}
+
+button:hover{
+    background-color: cornflowerblue;
+}
+
+.navbar-title {
+    padding: 20px 0;
+    text-align: center;
+}
+
+#navbar{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#canvas{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 80vh;
+    gap: 1em;
+}
+
+@media (max-width: 768px) {
+    #canvas{
+        flex-wrap: wrap;
+        max-width: 400px;
+        text-align: center;
+    }
+}
+
+@media (max-width: 500px) {
+    #canvas{
+        flex-wrap: wrap;
+        max-width: 250px;
+        text-align: center;
+    }
+}
