msb-public
/
50projects50days
mirror of https://github.com/bradtraversy/50projects50days
1
0
Code Issues Projects Releases Wiki Activity

Update and add more features

Browse Source 
Change in all three files html, css, js
* Change in the design model (improvement and optimization)
* Add more features
... Etc
pull/134/head
Hosseinghafouri 3 years ago
parent 10e20841ec
commit dfc862488a
3 changed files with 128 additions and 62 deletions
Show Stats Download Patch File Download Diff File

36
event-keycodes/index.html
Unescape View File

@ -7,9 +7,39 @@
<title>Event KeyCodes</title> <title>Event KeyCodes</title>
</head> </head>
<body> <body>
<div id="insert"> <section id="starter">
<div class="key"> <div id="starter-text">
Press any key to get the keyCode Press any key to get the key code
</div>
</section>
<div id="heading">
<h1>Event Key codes</h1>
</div>
<div id="ascii">
<h1 id="keyCode"></h1>
</div>
<div id="infos">
<div class="info-box">
<h3>event.location</p>
<h2 id="location">Alt</h2>
</div>
<div class="info-box">
<h3>event.key</p>
<h2 id="key">Alt</h2>
</div>
<div class="info-box">
<h3>event.which</p>
<h2 id="which">Alt</h2>
</div>
<div class="info-box">
<h3>event.code</p>
<h2 id="code">Alt</h2>
</div> </div>
</div> </div>
<script src="script.js"></script> <script src="script.js"></script>

43
event-keycodes/script.js
Unescape View File

@ -1,20 +1,25 @@
const insert = document.getElementById('insert') let $ = document;
let title = $.querySelector('title');
let keyCode = $.querySelector('#keyCode');
let eventKey = $.querySelector('#key');
let eventLocation = $.querySelector('#location');
let eventWhich = $.querySelector('#which');
let eventCode = $.querySelector('#code');
window.addEventListener('keydown', (event) => { $.body.addEventListener('keydown', (event) => {
insert.innerHTML = ` event.preventDefault();
<div class="key"> starter.style.display = 'none';
${event.key === ' ' ? 'Space' : event.key} heading.style.display = 'flex';
<small>event.key</small> ascii.style.display = 'flex';
</div> infos.style.display = 'flex';
let getKey = event.key;
<div class="key"> let getLocation = event.location;
${event.keyCode} let getWich = event.which;
<small>event.keyCode</small> let getCode = event.code;
</div> title.innerHTML = "key codes : " + getKey;
keyCode.innerHTML = getKey;
<div class="key"> eventKey.innerHTML = getKey;
${event.code} eventLocation.innerHTML = getLocation;
<small>event.code</small> eventWhich.innerHTML = getWich;
</div> eventCode.innerHTML = getCode;
` });
})

111
event-keycodes/style.css
Unescape View File

@ -1,48 +1,79 @@
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); @import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
* { * {
box-sizing: border-box; padding: 0;
margin: 0;
box-sizing: border-box;
} }
body { body {
background-color: #e1e1e1; background: #d1d0d0;
font-family: 'Muli', sans-serif; font-family: 'Muli', sans-serif;
display: flex; font-weight:500;
align-items: center;
justify-content: center;
text-align: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.key {
border: 1px solid #999;
background-color: #eee;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
display: inline-flex;
align-items: center;
font-size: 20px;
font-weight: bold;
padding: 20px;
flex-direction: column;
margin: 10px;
min-width: 150px;
position: relative;
}
.key small {
position: absolute;
top: -24px;
left: 0;
text-align: center;
width: 100%;
color: #555;
font-size: 14px;
}
@media(max-width:768px){
.key{
margin: 10px 0px;
}
} }
#heading {
display: flex;
justify-content: center;
align-items: center;
margin-top: 12vh;
height: 100px;
}
#heading h1 {
font-size: 60px;
font-weight: bolder;
}
#ascii {
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
color: #646262;
}
#infos {
display: flex;
justify-content: space-evenly;
margin-top: 80px;
}
.info-box {
text-align: center;
width: 20%;
background: #fff;
border-radius: 15px;
}
.info-box h3 {
background: #00adfd;
padding: 20px;
font-weight: bold;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.info-box h2 {
padding: 20px;
}
#heading, #ascii, #infos {
display: none;
}
#starter {
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
font-weight: bolder;
height: 100vh;
}
#starter #starter-text {
background: #00adfdc1;
padding: 20px;
border-radius: 15px;
font-weight: bolder;
}
Write Preview
Loading…
Cancel
Save