Before we start, here are some JavaScript Games you might like to create:
1. Snake Game using JavaScript
2. 2D Bouncing Ball Game using JavaScript
3. Rock Paper Scissor Game using JavaScript
4. Tic Tac Toe Game using JavaScript
5. Whack a Mole Game using JavaScript
I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.
HTML Code
Starter Template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title>Credit Card Checkout Page - Coding Torque</title>
</head>
<body>
<!-- Further code here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="script.js"></script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title>Credit Card Checkout Page - Coding Torque</title>
</head>
<body>
<!-- Further code here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="script.js"></script>
</body>
</html>
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSS --> <link rel="stylesheet" href="style.css"> <title>Credit Card Checkout Page - Coding Torque</title> </head> <body> <!-- Further code here --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script src="script.js"></script> </body> </html>
Paste the below code in your <body>
tag.
<div class="grid align__item">
<h2>Enter your payment information below</h2>
<div class="card">
<header class="card__header">
<h3 class="card__title">Payment Details</h3>
<svg xmlns="http://www.w3.org/2000/svg" class="card__logo" width="140" height="43"
viewBox="0 0 175.7 53.9">
<style>
.visa {
fill: #fff;
}
</style>
<path class="visa"
d="M61.9 53.1l8.9-52.2h14.2l-8.9 52.2zm65.8-50.9c-2.8-1.1-7.2-2.2-12.7-2.2-14.1 0-24 7.1-24 17.2-.1 7.5 7.1 11.7 12.5 14.2 5.5 2.6 7.4 4.2 7.4 6.5 0 3.5-4.4 5.1-8.5 5.1-5.7 0-8.7-.8-13.4-2.7l-2-.9-2 11.7c3.3 1.5 9.5 2.7 15.9 2.8 15 0 24.7-7 24.8-17.8.1-5.9-3.7-10.5-11.9-14.2-5-2.4-8-4-8-6.5 0-2.2 2.6-4.5 8.1-4.5 4.7-.1 8 .9 10.6 2l1.3.6 1.9-11.3M164.2 1h-11c-3.4 0-6 .9-7.5 4.3l-21.1 47.8h14.9s2.4-6.4 3-7.8h18.2c.4 1.8 1.7 7.8 1.7 7.8h13.2l-11.4-52.1m-17.5 33.6c1.2-3 5.7-14.6 5.7-14.6-.1.1 1.2-3 1.9-5l1 4.5s2.7 12.5 3.3 15.1h-11.9zm-96.7-33.7l-14 35.6-1.5-7.2c-2.5-8.3-10.6-17.4-19.6-21.9l12.7 45.7h15.1l22.4-52.2h-15.1" />
<path fill="#F7A600"
d="M23.1.9h-22.9l-.2 1.1c17.9 4.3 29.7 14.8 34.6 27.3l-5-24c-.9-3.3-3.4-4.3-6.5-4.4" />
</svg>
</header>
<form action="" method="post" class="form">
<div class="card__number form__field">
<label for="card__number" class="card__number__label">Card Number</label>
<input type="text" id="card__number" class="card__number__input" placeholder="1234 1234 1234 1234">
</div>
<div class="card__expiration form__field">
<label for="card__expiration__year">Expiration</label>
<select name="" id="card__expiration__year">
<option value="january">January</option>
<option value="februrary">Februrary</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>
<select name="" id="">
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
</select>
</div>
<div class="card__ccv form__field">
<label for="">CCV</label>
<input type="text" class="card__ccv__input" placeholder="583">
</div>
</form>
</div>
<p class="text--center"><a href="#">change</a> payment method</p>
</div>
<div class="grid align__item">
<h2>Enter your payment information below</h2>
<div class="card">
<header class="card__header">
<h3 class="card__title">Payment Details</h3>
<svg xmlns="http://www.w3.org/2000/svg" class="card__logo" width="140" height="43"
viewBox="0 0 175.7 53.9">
<style>
.visa {
fill: #fff;
}
</style>
<path class="visa"
d="M61.9 53.1l8.9-52.2h14.2l-8.9 52.2zm65.8-50.9c-2.8-1.1-7.2-2.2-12.7-2.2-14.1 0-24 7.1-24 17.2-.1 7.5 7.1 11.7 12.5 14.2 5.5 2.6 7.4 4.2 7.4 6.5 0 3.5-4.4 5.1-8.5 5.1-5.7 0-8.7-.8-13.4-2.7l-2-.9-2 11.7c3.3 1.5 9.5 2.7 15.9 2.8 15 0 24.7-7 24.8-17.8.1-5.9-3.7-10.5-11.9-14.2-5-2.4-8-4-8-6.5 0-2.2 2.6-4.5 8.1-4.5 4.7-.1 8 .9 10.6 2l1.3.6 1.9-11.3M164.2 1h-11c-3.4 0-6 .9-7.5 4.3l-21.1 47.8h14.9s2.4-6.4 3-7.8h18.2c.4 1.8 1.7 7.8 1.7 7.8h13.2l-11.4-52.1m-17.5 33.6c1.2-3 5.7-14.6 5.7-14.6-.1.1 1.2-3 1.9-5l1 4.5s2.7 12.5 3.3 15.1h-11.9zm-96.7-33.7l-14 35.6-1.5-7.2c-2.5-8.3-10.6-17.4-19.6-21.9l12.7 45.7h15.1l22.4-52.2h-15.1" />
<path fill="#F7A600"
d="M23.1.9h-22.9l-.2 1.1c17.9 4.3 29.7 14.8 34.6 27.3l-5-24c-.9-3.3-3.4-4.3-6.5-4.4" />
</svg>
</header>
<form action="" method="post" class="form">
<div class="card__number form__field">
<label for="card__number" class="card__number__label">Card Number</label>
<input type="text" id="card__number" class="card__number__input" placeholder="1234 1234 1234 1234">
</div>
<div class="card__expiration form__field">
<label for="card__expiration__year">Expiration</label>
<select name="" id="card__expiration__year">
<option value="january">January</option>
<option value="februrary">Februrary</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>
<select name="" id="">
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
</select>
</div>
<div class="card__ccv form__field">
<label for="">CCV</label>
<input type="text" class="card__ccv__input" placeholder="583">
</div>
</form>
</div>
<p class="text--center"><a href="#">change</a> payment method</p>
</div>
<div class="grid align__item"> <h2>Enter your payment information below</h2> <div class="card"> <header class="card__header"> <h3 class="card__title">Payment Details</h3> <svg xmlns="http://www.w3.org/2000/svg" class="card__logo" width="140" height="43" viewBox="0 0 175.7 53.9"> <style> .visa { fill: #fff; } </style> <path class="visa" d="M61.9 53.1l8.9-52.2h14.2l-8.9 52.2zm65.8-50.9c-2.8-1.1-7.2-2.2-12.7-2.2-14.1 0-24 7.1-24 17.2-.1 7.5 7.1 11.7 12.5 14.2 5.5 2.6 7.4 4.2 7.4 6.5 0 3.5-4.4 5.1-8.5 5.1-5.7 0-8.7-.8-13.4-2.7l-2-.9-2 11.7c3.3 1.5 9.5 2.7 15.9 2.8 15 0 24.7-7 24.8-17.8.1-5.9-3.7-10.5-11.9-14.2-5-2.4-8-4-8-6.5 0-2.2 2.6-4.5 8.1-4.5 4.7-.1 8 .9 10.6 2l1.3.6 1.9-11.3M164.2 1h-11c-3.4 0-6 .9-7.5 4.3l-21.1 47.8h14.9s2.4-6.4 3-7.8h18.2c.4 1.8 1.7 7.8 1.7 7.8h13.2l-11.4-52.1m-17.5 33.6c1.2-3 5.7-14.6 5.7-14.6-.1.1 1.2-3 1.9-5l1 4.5s2.7 12.5 3.3 15.1h-11.9zm-96.7-33.7l-14 35.6-1.5-7.2c-2.5-8.3-10.6-17.4-19.6-21.9l12.7 45.7h15.1l22.4-52.2h-15.1" /> <path fill="#F7A600" d="M23.1.9h-22.9l-.2 1.1c17.9 4.3 29.7 14.8 34.6 27.3l-5-24c-.9-3.3-3.4-4.3-6.5-4.4" /> </svg> </header> <form action="" method="post" class="form"> <div class="card__number form__field"> <label for="card__number" class="card__number__label">Card Number</label> <input type="text" id="card__number" class="card__number__input" placeholder="1234 1234 1234 1234"> </div> <div class="card__expiration form__field"> <label for="card__expiration__year">Expiration</label> <select name="" id="card__expiration__year"> <option value="january">January</option> <option value="februrary">Februrary</option> <option value="march">March</option> <option value="april">April</option> <option value="may">May</option> <option value="june">June</option> <option value="july">July</option> <option value="august">August</option> <option value="september">September</option> <option value="october">October</option> <option value="november">November</option> <option value="december">December</option> </select> <select name="" id=""> <option value="2021">2021</option> <option value="2022">2022</option> <option value="2023">2023</option> <option value="2024">2024</option> </select> </div> <div class="card__ccv form__field"> <label for="">CCV</label> <input type="text" class="card__ccv__input" placeholder="583"> </div> </form> </div> <p class="text--center"><a href="#">change</a> payment method</p> </div>
Output Till Now
CSS Code
Create a file style.css and paste the code below.
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
background-color: #f1f1f1;
color: #2b2f31;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
min-height: 100%;
padding: 5vw 0;
}
.align {
align-items: center;
display: flex;
flex-direction: row;
}
.align__item--start {
align-self: flex-start;
}
.align__item--end {
align-self: flex-end;
}
.text--center {
text-align: center;
}
.card {
background-color: #171a1c;
border-radius: 1rem;
color: #bebec4;
padding: 2rem;
}
.card__header {
margin-bottom: 4rem;
}
.card__header:before,
.card__header:after {
content: " ";
display: table;
}
.card__header:after {
clear: both;
}
.card__title {
color: #fff;
float: left;
font-size: 1.5rem;
}
.card__logo {
float: right;
}
.card__number__input {
font-size: 2rem;
}
.card__expiration {
float: left;
}
.card__ccv {
float: right;
}
.card__ccv__input {
width: 1.75rem;
}
.card .ui-selectmenu-button {
float: left;
margin-right: 2rem;
}
input {
background-color: transparent;
border: 0;
color: #fff;
font: inherit;
width: auto;
}
input::placeholder {
color: #fff;
}
label {
display: block;
}
.form:before,
.form:after {
content: " ";
display: table;
}
.form:after {
clear: both;
}
.form__field {
margin-bottom: 1.5rem;
}
.form input {
outline: 0;
}
.form input[type="email"],
.form input[type="password"] {
width: 100%;
}
.grid {
margin: 0 auto;
max-width: 36rem;
width: 90%;
}
h1,
h2,
h3 {
margin: 0 0 0.5rem;
}
svg {
height: auto;
max-width: 100%;
vertical-align: middle;
}
a {
color: #171a1c;
}
.ui-selectmenu-menu {
display: none;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0;
z-index: 999;
}
.ui-selectmenu-menu li {
background-color: #171a1c;
color: #fff;
padding: 0.25rem 1rem;
cursor: pointer;
}
.ui-selectmenu-menu li.ui-state-focus {
background-color: #47474e;
}
.ui-selectmenu-menu .ui-menu {
list-style: none;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow: auto;
}
.ui-selectmenu-open {
display: block;
}
.ui-selectmenu-button {
color: #fff;
cursor: pointer;
outline: 0;
}
.ui-selectmenu-button.ui-corner-top .ui-icon-triangle-1-s {
transform: rotate(-180deg);
}
.ui-selectmenu-button .ui-icon-triangle-1-s {
background: url('data:image/svg+xml; charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-254 408.9 42 24" fill="#47474e"><path d="M-212 411.9c0-1.7-1.3-3-3-3-.8 0-1.5.3-2.1.8l-15.9 15.9-15.7-15.7c-.5-.6-1.4-1-2.3-1-1.7 0-3 1.3-3 3 0 .8.3 1.5.8 2.1l18 18c.5.6 1.3.9 2.2.9.8 0 1.6-.4 2.2-.9l18-18c.5-.6.8-1.3.8-2.1z"/></svg>')
50% / 14px no-repeat;
float: right;
height: 14px;
margin-top: 5px;
transform-origin: 50%;
transition: transform 0.3s;
width: 14px;
}
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
background-color: #f1f1f1;
color: #2b2f31;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
min-height: 100%;
padding: 5vw 0;
}
.align {
align-items: center;
display: flex;
flex-direction: row;
}
.align__item--start {
align-self: flex-start;
}
.align__item--end {
align-self: flex-end;
}
.text--center {
text-align: center;
}
.card {
background-color: #171a1c;
border-radius: 1rem;
color: #bebec4;
padding: 2rem;
}
.card__header {
margin-bottom: 4rem;
}
.card__header:before,
.card__header:after {
content: " ";
display: table;
}
.card__header:after {
clear: both;
}
.card__title {
color: #fff;
float: left;
font-size: 1.5rem;
}
.card__logo {
float: right;
}
.card__number__input {
font-size: 2rem;
}
.card__expiration {
float: left;
}
.card__ccv {
float: right;
}
.card__ccv__input {
width: 1.75rem;
}
.card .ui-selectmenu-button {
float: left;
margin-right: 2rem;
}
input {
background-color: transparent;
border: 0;
color: #fff;
font: inherit;
width: auto;
}
input::placeholder {
color: #fff;
}
label {
display: block;
}
.form:before,
.form:after {
content: " ";
display: table;
}
.form:after {
clear: both;
}
.form__field {
margin-bottom: 1.5rem;
}
.form input {
outline: 0;
}
.form input[type="email"],
.form input[type="password"] {
width: 100%;
}
.grid {
margin: 0 auto;
max-width: 36rem;
width: 90%;
}
h1,
h2,
h3 {
margin: 0 0 0.5rem;
}
svg {
height: auto;
max-width: 100%;
vertical-align: middle;
}
a {
color: #171a1c;
}
.ui-selectmenu-menu {
display: none;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0;
z-index: 999;
}
.ui-selectmenu-menu li {
background-color: #171a1c;
color: #fff;
padding: 0.25rem 1rem;
cursor: pointer;
}
.ui-selectmenu-menu li.ui-state-focus {
background-color: #47474e;
}
.ui-selectmenu-menu .ui-menu {
list-style: none;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow: auto;
}
.ui-selectmenu-open {
display: block;
}
.ui-selectmenu-button {
color: #fff;
cursor: pointer;
outline: 0;
}
.ui-selectmenu-button.ui-corner-top .ui-icon-triangle-1-s {
transform: rotate(-180deg);
}
.ui-selectmenu-button .ui-icon-triangle-1-s {
background: url('data:image/svg+xml; charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-254 408.9 42 24" fill="#47474e"><path d="M-212 411.9c0-1.7-1.3-3-3-3-.8 0-1.5.3-2.1.8l-15.9 15.9-15.7-15.7c-.5-.6-1.4-1-2.3-1-1.7 0-3 1.3-3 3 0 .8.3 1.5.8 2.1l18 18c.5.6 1.3.9 2.2.9.8 0 1.6-.4 2.2-.9l18-18c.5-.6.8-1.3.8-2.1z"/></svg>')
50% / 14px no-repeat;
float: right;
height: 14px;
margin-top: 5px;
transform-origin: 50%;
transition: transform 0.3s;
width: 14px;
}
* { box-sizing: border-box; } html { height: 100%; } body { background-color: #f1f1f1; color: #2b2f31; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; margin: 0; min-height: 100%; padding: 5vw 0; } .align { align-items: center; display: flex; flex-direction: row; } .align__item--start { align-self: flex-start; } .align__item--end { align-self: flex-end; } .text--center { text-align: center; } .card { background-color: #171a1c; border-radius: 1rem; color: #bebec4; padding: 2rem; } .card__header { margin-bottom: 4rem; } .card__header:before, .card__header:after { content: " "; display: table; } .card__header:after { clear: both; } .card__title { color: #fff; float: left; font-size: 1.5rem; } .card__logo { float: right; } .card__number__input { font-size: 2rem; } .card__expiration { float: left; } .card__ccv { float: right; } .card__ccv__input { width: 1.75rem; } .card .ui-selectmenu-button { float: left; margin-right: 2rem; } input { background-color: transparent; border: 0; color: #fff; font: inherit; width: auto; } input::placeholder { color: #fff; } label { display: block; } .form:before, .form:after { content: " "; display: table; } .form:after { clear: both; } .form__field { margin-bottom: 1.5rem; } .form input { outline: 0; } .form input[type="email"], .form input[type="password"] { width: 100%; } .grid { margin: 0 auto; max-width: 36rem; width: 90%; } h1, h2, h3 { margin: 0 0 0.5rem; } svg { height: auto; max-width: 100%; vertical-align: middle; } a { color: #171a1c; } .ui-selectmenu-menu { display: none; left: 0; margin: 0; padding: 0; position: absolute; top: 0; z-index: 999; } .ui-selectmenu-menu li { background-color: #171a1c; color: #fff; padding: 0.25rem 1rem; cursor: pointer; } .ui-selectmenu-menu li.ui-state-focus { background-color: #47474e; } .ui-selectmenu-menu .ui-menu { list-style: none; margin: 0; padding: 0; overflow-x: hidden; overflow: auto; } .ui-selectmenu-open { display: block; } .ui-selectmenu-button { color: #fff; cursor: pointer; outline: 0; } .ui-selectmenu-button.ui-corner-top .ui-icon-triangle-1-s { transform: rotate(-180deg); } .ui-selectmenu-button .ui-icon-triangle-1-s { background: url('data:image/svg+xml; charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-254 408.9 42 24" fill="#47474e"><path d="M-212 411.9c0-1.7-1.3-3-3-3-.8 0-1.5.3-2.1.8l-15.9 15.9-15.7-15.7c-.5-.6-1.4-1-2.3-1-1.7 0-3 1.3-3 3 0 .8.3 1.5.8 2.1l18 18c.5.6 1.3.9 2.2.9.8 0 1.6-.4 2.2-.9l18-18c.5-.6.8-1.3.8-2.1z"/></svg>') 50% / 14px no-repeat; float: right; height: 14px; margin-top: 5px; transform-origin: 50%; transition: transform 0.3s; width: 14px; }
Output Till Now
JavaScript Code
Create a file script.js and paste the code below.
(function ($) {
'use strict';
// Selectmenu
$('select').selectmenu();
}(jQuery));
(function ($) {
'use strict';
// Selectmenu
$('select').selectmenu();
}(jQuery));
(function ($) { 'use strict'; // Selectmenu $('select').selectmenu(); }(jQuery));
Written by: Piyush Patil
If you have any doubts or any project ideas feel free to Contact Us
Hope you find this post helpful💖