<aside> 💡 Project: Landing page with HTML, CSS, and Javascript functions with a keyboard SVG I designed and created in Adobe Illustrator
</aside>
<aside> 💡 Scope: Create a fun color-changing function
</aside>
<aside> 💡 My role: Designer & Developer
</aside>
<aside> 💡 Goal: Design and code started in WK1
</aside>
<aside> 💡 Challenges: How can I use a Javascript function to customize with real user data?
</aside>
<aside> 💡 Basic process: Keyboard Illustration > Wireframe > Code > >Validate > Launch
</aside>
<aside> 💡 Results: A functional page about keyboards and SVG keyboard.
</aside>
Figure 1. Adobe Illustrator keyboard creation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="<https://fonts.googleapis.com>">
<link rel="preconnect" href="<https://fonts.gstatic.com>" crossorigin>
<link href="<https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Source+Code+Pro&display=swap>" rel="stylesheet">
<title>Your Custom Keyboard</title>
</head>
<style>
body {
display: block;
text-align: left;
margin: 0 auto;
background: radial-gradient(circle at 10% 20%, rgb(242, 235, 243) 0%, rgb(234, 241, 249) 90.1%);
font-family: 'Source Code Pro', monospace;
}
div {
display: block;
}
h1 {
text-align: center;
font-size: 48px;
margin: 0px;
font-family: 'Architects Daughter', cursive;
}
h2 {
font-size: 32px;
text-align: center;
font-family: 'Architects Daughter', cursive;
margin: 10px;
}
h3 {
font-family: 'Source Code Pro', monospace;
font-size: 22px;
}
p {
font-size: 16px;
line-height: 30px;
}
aside {
box-shadow: inset 5px 0 5px -5px plum;
font-style: italic;
padding-left: 10px;
margin-left: 10px;
color:grey;
}
a {
cursor: pointer;
text-decoration: underline;
color: #1F6A99;
}
button {
background-color: rgb(175, 113, 175);
margin: 0 auto;
display: block;
padding: 10px 20px;
border-radius: 5px;
color: #fff;
font-family: 'Source Code Pro', monospace;
transition: all 200ms ease;
font-size: 18px;
cursor:pointer;
outline: none;
border: 0;
box-shadow: 6px 6px 1px rgba(102, 77, 102, .2);
}
button:hover {
transition: 0.3s ease;
background-color: rgb(31, 107, 155);
}
button:active {
background-color: #1F6A99;
box-shadow: 0 5px #eee;
transform: translateY(4px);
}
strong {
font-weight:bolder;
font-size: 18px;
}
span {
font-size: 14px;
}
.container {
max-width: 600px;
margin: 50px auto;
padding: 40px;
border-radius: 16px;
background-color: #fff;
box-shadow: 6px 6px 1px rgb(31, 107, 155, .2);
}
#keys {
fill:rgb(221, 160, 221)
;
}
</style>
<body>
<div class="container">
<h1>Customizable Keyboard ⌨️ </h1>
<br>
<h2>What's Your Favorite Color? 🎨</h2>
<svg id="test" xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 1338.55 474.93"><defs/><path d="M1317.2 25.73h-5.58c6.6 0 12 5.4 12 12V437.2c0 6.6-5.4 12-12 12H26.94c-1.42 0-2.78-.26-4.05-.72 2.19 2.98 5.69 4.93 9.63 4.93h1284.67c6.6 0 12-5.45 12.01-12.12V37.85c0-6.67-5.4-12.12-12-12.12z" fill="#cfcfcf"/><path d="M1311.62 449.2c6.6 0 12-5.4 12-12V37.73c0-6.6-5.4-12-12-12H26.94c-6.6 0-12 5.4-12 12V437.2c0 5.18 3.33 9.61 7.95 11.28 1.27.46 2.63.72 4.05.72h1284.68z" fill="#f2f2f2"/><g><path id="keys" d="M50.95 112.21c3.91 1.63 6.56 1.82 34.55 1.82 17.03 0 31.9-.36 33.86-.91 1.86-.45 4.7-2.18 6.36-3.72l2.84-2.72.29-31.77c.29-30.78.2-31.96-1.76-34.86-3.82-5.72-4.99-5.9-40.81-5.9-28.58 0-32.49.18-35.43 1.63-1.86.82-4.31 2.72-5.38 4.09-1.96 2.45-2.06 3.9-2.35 32.5-.29 28.23-.2 30.14 1.66 33.95 1.57 3.26 2.84 4.53 6.17 5.89zM196.38 114.03c34.16 0 35.53-.18 40.32-4.99l2.45-2.45v-65l-2.45-2.45c-4.8-4.81-6.17-4.99-40.32-4.99-28.19 0-32 .18-34.94 1.63-1.86.82-4.31 2.72-5.38 4.09-1.96 2.53-2.06 3.62-2.06 34.21 0 43.31-3.62 39.95 42.38 39.95zM264.59 106.77l3.72 3.36 3.62 3.45 34.06.27c31.51.18 34.16.09 37.29-1.45 6.75-3.36 6.95-4.27 6.95-38.31 0-42.67 3.33-39.4-41.1-39.67-16.93-.09-32.3.18-33.96.54-4.8 1.18-8.12 3.54-9.69 6.99-1.17 2.63-1.37 8.62-1.17 33.95l.28 30.87zM417.85 114.03c31.81 0 33.57-.09 36.6-1.82 6.17-3.54 6.36-4.72 6.36-37.68 0-32.95-.2-34.13-6.36-37.68-3.03-1.72-4.8-1.82-36.8-1.82-27.4.09-34.16.27-36.31 1.36-1.37.73-3.52 2.72-4.6 4.45-1.96 2.91-2.06 4.18-2.06 33.77 0 28.96.1 30.96 1.96 33.68 3.63 5.65 4.22 5.74 41.21 5.74zM526.88 114.76c32 .27 32.3.18 36.6-1.82 7.83-3.72 7.93-4.09 7.93-37.95 0-32.95-.2-33.77-6.75-37.86-3.33-2.09-3.62-2.09-36.21-2.09-28.09 0-33.37.27-36.02 1.45-1.76.82-4.11 2.81-5.19 4.45-1.86 2.81-1.96 4.45-1.96 33.68 0 43.22-3.62 39.77 41.6 40.14zM602.92 113.21c3.33 1.63 6.07 1.72 35.62 1.72 35.33 0 36.5-.18 40.81-5.81 2.15-2.81 2.15-3.18 2.15-34.13 0-43.3 3.52-39.94-42.77-39.94-29.65 0-31.9.09-35.53 1.82-7.34 3.36-7.34 3.18-7.34 38.13.02 34.85.02 34.85 7.06 38.21zM712.63 113.12c2.94 1.72 5.09 1.82 36.21 1.82 36.41 0 36.6 0 41.01-5.63l2.25-3V75.26c0-29.87-.1-31.14-2.06-33.5-1.08-1.36-3.23-3.36-4.7-4.36-2.54-1.82-4.01-1.91-34.65-2.09-17.71-.09-33.37.18-35.04.73-4.5 1.18-8.91 6.26-9.69 10.98-.29 2.18-.49 16.16-.29 31.14.31 30.24.6 31.42 6.96 34.96zM821.56 112.12l3.43 2.81h33.96c32 0 34.16-.09 37.09-1.82 6.07-3.36 6.17-3.99 6.17-37.68 0-33.68-.1-34.32-6.17-37.68-2.94-1.72-5.09-1.82-36.41-1.72-18.3 0-34.16.36-35.23.82-3.03 1.09-6.26 4.81-7.34 8.26-1.27 4.09-1.27 56.56 0 60.92.58 1.83 2.54 4.55 4.5 6.09zM965.82 115.66c35.43.36 38.17.09 42.96-3.9l3.52-3 .29-32.14c.2-30.14.1-32.23-1.66-34.86-3.72-5.63-5.19-5.81-41.5-5.81-32.39 0-32.69 0-36.02 2.09-6.56 4.09-6.75 4.99-6.75 37.68.01 42.3-2.73 39.58 39.16 39.94zM1167.52 115.84c117.15 0 118.62 0 121.75-1.82 6.17-3.54 6.36-4.72 6.36-37.68 0-32.95-.2-34.13-6.36-37.68-3.13-1.82-4.6-1.82-121.94-1.82-116.07 0-118.91.09-121.94 1.82-6.07 3.36-6.17 3.99-6.17 37.86 0 28.87.1 30.87 1.96 33.59 4.01 6.1-4.6 5.73 126.34 5.73zM125.62 216.61c68.12 0 71.64-.09 75.55-1.72 7.54-3.27 7.63-3.54 7.63-38.22 0-28.78-.1-30.59-1.96-33.5-1.08-1.63-3.52-3.81-5.38-4.72-3.23-1.63-7.05-1.72-75.36-1.72-66.55 0-72.23.09-75.36 1.63-1.86.82-4.4 2.91-5.58 4.63-2.25 3.09-2.25 3.36-2.25 33.68s0 30.59 2.25 33.68c4.71 6.54.79 6.26 80.46 6.26zM1126.22 214.7c3.91 1.91 5.09 1.91 81.03 1.91 86.03 0 81.43.36 86.12-6.26 2.25-3.09 2.25-3.36 2.25-33.68s0-30.59-2.25-33.68c-4.69-6.63-.09-6.27-86.31-6.27-73.01 0-77.51.09-80.74 1.63-2.15 1.09-4.31 3.18-5.58 5.63-2.15 3.9-2.25 4.72-2.25 32.68 0 26.15.2 28.96 1.86 32.41 1.37 2.72 3.03 4.36 5.87 5.63zM233.76 177.03c0 27.05.1 29.23 1.96 32.77 3.62 6.9 3.23 6.81 41.89 6.81 33.18 0 34.25-.09 36.8-1.91 5.38-3.9 5.48-4.54 5.48-37.58 0-33.68-.1-34.32-6.17-37.68-2.94-1.72-5.09-1.82-36.5-1.82-33.08 0-33.37 0-36.7 2.09-6.56 4.1-6.76 5-6.76 37.32zM346.9 143.35c-1.96 2.45-2.06 3.9-2.35 33.14-.29 33.77-.1 34.5 5.97 38.67 2.64 1.82 4.21 1.91 34.74 2.18 20.36.18 33.28 0 35.43-.64 1.96-.54 4.8-2.18 6.36-3.72l2.94-2.81v-65.09l-2.45-2.45c-4.99-4.99-5.19-4.99-39.83-4.99-28.68 0-32.49.18-35.43 1.63-1.86.81-4.3 2.72-5.38 4.08zM454.95 177.76c0 28.6.1 30.41 1.96 33.23 1.08 1.63 3.33 3.72 5.09 4.72 3.03 1.72 4.99 1.82 35.82 1.82 35.13 0 35.33 0 40.32-4.99l2.45-2.45.29-31.41c.29-44.12 3.91-40.49-41.4-40.76-17.71-.09-33.57.18-35.13.64-1.47.45-3.62 1.54-4.7 2.45-4.61 3.79-4.7 4.79-4.7 36.75zM565.54 177.76c0 33.86.2 34.77 6.95 38.13 3.13 1.54 5.77 1.63 37.29 1.45l34.06-.27 3.62-3.45 3.72-3.36.29-30.87c.29-34.32.1-35.68-6.07-39.13-2.84-1.63-5.48-1.72-36.8-1.72-31.81 0-33.96.09-36.9 1.82-6.07 3.36-6.16 3.99-6.16 37.4zM676.13 178.21c0 28.87.1 30.87 1.96 33.59 3.62 5.63 4.21 5.72 41.1 5.72 37.58 0 37.58 0 41.2-6.54 1.76-3.09 1.86-5.63 1.86-32.5 0-31.5-.2-32.77-5.38-37.22l-2.64-2.27-34.35-.27c-32.79-.18-34.65-.09-37.58 1.54-6.08 3.55-6.17 4.09-6.17 37.95zM786.72 178.67v31.41l2.64 3c4.8 5.17 5.97 5.36 40.13 5.36 28.77 0 31.42-.18 35.33-1.82 3.33-1.36 4.6-2.63 6.17-5.9 1.86-3.9 1.96-5.72 1.66-33.95-.39-41.4 3.23-38.22-43.36-38.22-28.09 0-32.69.27-35.62 1.54-6.95 3.17-6.95 3.35-6.95 38.58zM896.82 178.49c0 43.12-3.43 39.94 43.06 39.94 36.99 0 37.29-.09 41.4-7.35 2.15-3.99 2.25-4.27 1.96-33.5-.29-33.59-.39-34.13-7.93-37.31-3.72-1.54-6.75-1.72-35.43-1.72-29.36 0-31.61.09-35.23 1.82-7.83 3.53-7.83 3.71-7.83 38.12zM1007.8 148.53c-.69 2-.88 13.8-.69 32.23.29 32.23.29 32.14 6.95 35.86 2.94 1.72 5.19 1.82 36.21 1.82 36.5 0 37.19-.09 40.81-5.72 1.86-2.72 1.96-4.72 1.96-34.5v-31.5l-3.23-3.27c-2.25-2.36-4.4-3.45-7.54-4.09-5.28-.91-58.62-.91-63.91.09-4.59.82-9.19 4.81-10.56 9.08zM50.85 317.57c3.13 1.54 9.88 1.63 99.53 1.63 105.7 0 100.51.27 105.01-5.54l2.35-3.09v-31.32c0-34.41.1-33.86-6.17-37.86-2.54-1.54-7.54-1.63-99.53-1.72-53.34-.09-97.87.09-99.14.27-3.91.73-8.81 6.08-9.49 10.44-.29 2.18-.49 16.61-.29 32.23.29 26.96.39 28.42 2.35 30.87 1.07 1.36 3.52 3.27 5.38 4.09zM367.84 314.39c1.86-2.72 1.96-4.81 1.96-33.68 0-29.23-.1-30.87-1.96-33.68-3.82-5.72-4.99-5.9-41.4-5.9-32.39 0-32.69 0-36.02 2.09-6.56 4.09-6.75 4.9-6.75 37.86 0 33.05.2 33.95 6.95 37.68 3.13 1.72 5.09 1.82 36.6 1.82 37-.02 36.51.07 40.62-6.19zM470.8 242.02c-4.21-1.08-62.05-1.08-65.87-.08-4.89 1.45-6.95 3-8.81 6.72-1.66 3.45-1.86 6.35-1.86 32.86 0 32.41.2 33.32 6.75 37.4 3.33 2.09 3.62 2.09 36.02 2.09 36.31 0 37.78-.18 41.5-5.81 1.76-2.63 1.86-5.08 1.86-34.32v-31.5l-3.03-3.18c-1.66-1.82-4.6-3.63-6.56-4.18zM547.92 241.13c-24.27.09-32.49.36-34.74 1.27-1.66.64-4.21 2.54-5.68 4.09l-2.64 3v63.18l2.64 3c4.8 5.17 5.97 5.36 40.42 5.36 34.74 0 36.11-.18 40.22-5.54l2.35-3.09v-31.5c0-43.13 3.62-39.77-42.57-39.77zM624.65 242.12c-1.76.45-4.5 2.27-6.17 3.99l-3.03 3.27v31.5c0 29.96.1 31.68 1.96 34.5 3.62 5.45 5.19 5.63 41.3 5.63 45.9 0 42.28 3.27 42.67-38.4.39-43.94 3.43-40.94-41.89-41.22-17.52-.08-33.18.19-34.84.73zM769.3 242.22l-35.23-.27-3.52 2.91c-2.15 1.72-3.91 4.18-4.5 6.35-.69 2.36-.98 14.07-.78 32.41.29 31.96.29 31.87 6.95 35.59 2.94 1.72 5.19 1.82 36.41 1.82 46.39 0 42.96 2.81 43.36-35.41.39-32.77.1-35.41-4.21-39.85l-3.23-3.27-35.25-.28zM879.11 242.03c-33.08 0-33.37 0-36.7 2.09-6.56 4.09-6.75 4.99-6.75 37.31 0 42.76-2.94 39.94 41.3 40.31 19.28.18 32.49-.09 34.74-.64 2.15-.54 5.09-2.27 6.66-3.72l2.94-2.81.29-31.68c.29-35.13.2-35.59-5.97-39.04-2.95-1.73-5.1-1.82-36.51-1.82zM989.6 242.03c-28.68 0-32.49.18-35.43 1.63-1.86.82-4.31 2.72-5.38 4.09-1.96 2.54-2.06 3.63-2.06 34.23 0 43.3-3.62 39.94 42.38 39.94 34.16 0 35.53-.18 40.32-4.99l2.45-2.45.29-32.05.29-32.05-2.64-2.81c-4.99-5.54-4.99-5.54-40.22-5.54zM1061.92 245.12c-4.99 4.18-5.09 4.72-5.09 36.59 0 33.32.2 34.32 6.85 37.95 3.43 1.82 4.6 1.82 112.55 1.82s109.12 0 112.55-1.82c6.66-3.63 6.85-4.63 6.85-37.95 0-32.14 0-32.32-5.38-36.95l-2.64-2.27-110.2-.18c-60.68-.09-110.98.09-111.77.36s-2.54 1.36-3.72 2.45zM314.5 347.34l-2.64-2.27-45.61-.27c-43.94-.18-45.8-.09-48.84 1.54-6.66 3.81-6.66 3.72-6.95 35.59-.2 18.61.1 30.05.78 32.41.59 2.27 2.35 4.72 4.4 6.45l3.52 2.81h45.51c51.09 0 49.62.18 53.34-6.54 1.76-3.09 1.86-5.63 1.86-32.95.02-31.96.02-32.14-5.37-36.77zM988.82 347.34l-2.64-2.27-316.21-.18c-312.2-.27-316.31-.27-319.44 1.54-6.66 3.72-6.66 3.63-6.95 35.59-.2 18.34.1 30.05.78 32.41.59 2.18 2.35 4.63 4.4 6.35l3.52 2.81h316.21c315.33 0 316.21 0 319.34-1.82 6.17-3.54 6.36-4.72 6.36-37.13.01-31.58-.19-32.85-5.37-37.3zM1121.92 347.34l-2.64-2.27-45.61-.27c-43.94-.18-45.8-.09-48.84 1.54-6.66 3.81-6.66 3.72-6.95 35.68-.2 18.34.1 30.05.78 32.41.59 2.18 2.35 4.63 4.4 6.35l3.52 2.81h45.51c51.38 0 49.52.27 53.24-6.81 1.86-3.54 1.96-5.72 1.96-32.5.01-31.22-.19-32.58-5.37-36.94zM1287.7 346.25c-3.13-1.54-7.14-1.63-64.98-1.63-59.41 0-61.75.09-64.79 1.82-6.07 3.36-6.17 3.99-6.17 37.86 0 28.87.1 30.87 1.96 33.59 3.82 5.9 1.27 5.72 69.68 5.72 58.92 0 62.15-.09 64.98-1.72 6.07-3.36 6.26-4.9 6.26-37.95.01-33.33-.18-34.33-6.94-37.69zM181.6 348.25c-3.03-1.72-5.38-1.82-65.47-1.82H53.88l-3.23 2.45c-5.58 4.36-5.77 5.54-5.77 37.04s.2 32.68 5.77 37.04l3.23 2.45h62.24c60.09 0 62.44-.09 65.47-1.82 6.07-3.36 6.17-3.99 6.17-37.68s-.09-34.3-6.16-37.66z"/></g></svg>
<button>Select Color</button>
<br>
<hr>
<br>
<h3>The days of standard keyboards are long behind us.😎 </h3>
<aside>
<p>A mechanical keyboard is a typing device that uses mechanical switches to register key presses.
</p>
</aside>
Mechanical keyboards come with both creative and technical benefits that help create a typing experience tailored just for you.
The beauty of keyboards is that nearly every part of it is customizable.
You can change as much or as little of it as you want to meet your needs in feel and look.
<h3>You can further customize✨ your keyboard by:</h3>
<p>
<strong>🔈 Sound Profile</strong> — Keyboards have a reputation for being loud, but beyond that, there’s a wide range of sounds: from quiet to loud.
<br>
<br>
<strong>👇 How it feels</strong> — Keyboards are something you touch and interact with. A pleasant tactile experience makes your keyboard a joy to type on all day long.
<br>
<br>
<strong>🤩 Aesthetics</strong> — Keyboards come in all sorts of form factors, colors, and materials, and are complemented by even more choices in accessories.
</p>
<p><strong>👩🏫 </strong>
<a href="<https://keyboard.university/100-courses/intro-to-mechanical-keyboards>" target="_blank">
<strong>Read more on Keyboard University</strong>
</a>
</p>
<br>
<hr>
<br>
<span>Coded by 👩💻<a href="<https://www.instagram.com/uxdevwithtiff/>" target="_blank">Tiffany Mackay</a> in HTML, CSS, and Javascript.</span>
</div>
<script>
function changeColor() {
let color = prompt("What color would you like?");
let keys = document.querySelector("#keys");
let h2 = document.querySelector("h2");
color = color.toLowerCase(); // "Pink" "PINK"
keys.style.fill = color;
if (color === "pink" || color === "plum" || color === "purple" || color === "lavender") {
h2.innerHTML = "😍 That's my favorite color too! ";
} else {
h2.innerHTML = "🙃 We like different colors."
}
}
let button = document.querySelector("button");
button.addEventListener("click", changeColor)
</script>
</body>
</html>
The final project allowed me to focus on creativity and functionality through coding, organization, and design. I coded using Visual Studio Code before uploading it to Github.