Assignment 3 Task 2
user_1373341
html
a month ago
2.7 kB
0
Indexable
Never
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My info</title> <style type="text/css"> div:hover { transition: transform 0.5s; transform: translate(50px, 50px) skewX(var(--deg)); } </style> </head> <body> <h1>My info</h1> <table border="0"> <tr> <td>Name:</td> <td> <input type="text" id="name" onfocus="changeColor(this)" onblur="resetColor(this)"> </td> </tr> <tr> <td>Student Number:</td> <td> <input type="text" id="sid" onfocus="changeColor(this)" onblur="resetColor(this)"> </td> </tr> <tr> <td>Colour:</td> <td> <input type="text" id="colour" onfocus="changeColor(this)" onblur="resetColor(this)"> </td> </tr> <tr> <td>Font Size:</td> <td> <input type="text" id="fsize" onfocus="changeColor(this)" onblur="resetColor(this)"> </td> </tr> <tr> <td></td> <td> <button onclick="displayInfo()">Display</button> </td> </tr> </table> <br /> <div id="display" onmouseover="skewDegree()"></div> <script type="text/javascript"> function changeColor(bgColor) { bgColor.style.backgroundColor = 'pink'; } function resetColor(bgColor) { bgColor.style.backgroundColor = ''; } function displayInfo() { var name = document.getElementById("name"); var sid = document.getElementById("sid"); var display = document.getElementById("display"); var colour = document.getElementById("colour"); var fsize = document.getElementById("fsize"); display.innerHTML = "Name: " + name.value + "<br>Student Number: " + sid.value; display.style.color = colour.value; display.style.fontSize = fsize.value + "px"; } function skewDegree() { deg = sid.value.slice(-2) + "deg"; console.log(deg); display.style.setProperty('--deg', `${deg}`); } </script> </body> </html>