Javascript is a high-level progamming language that can be used to build modern web applications. It has evolved over the years as only a front-end/UI language to having the full capability of been deployed for back-end development.
In this project, we will use Javascript to build a simple password generator web application and deploy it to vercel.
Table Of Content
- Set Up Development Environment
- Create the frame, style the UI
- Add the logic to complete the program
- Commit the project to github
- Deploy to vercel for hosting
Set Up Development Environment
This is a simple project that is beginner friendly. However, having prior knowledge in HTML, CSS and Javascript will help matters.In this tutorial, I will be using commands on the Command Line Interface(CLI) to create,read and update folders and files. However, it is not mandatory to have knowledge of the command line.
Create a new folder where all the files that will be created will be housed. Issue this command on the Linux Terminal:
mkdir notesapp
On Windows, simply create a new folder 'noteapp'.
Create the frame, style the UI
HyperText Markup Language(HTML) is a standardized way for tagging text files on the World Wide Web(www). HTML provides the frame for the structure of webpages. This may be likened to a building a house. The house entirely rests on the foundation and in web application design, HTML plays a similar role.
However, Cascading Style Sheets(CSS) describes how HMTL elements will look like on a webpage. Fonts, colors and styles on webpages are entirely done with CSS. In relation to the building of a house example, paints,designs, and decorations will be the CSS of the house.
In this project, we will create a root HTML file named; 'index.html'.
Using the terminal, enter this command:
touch index.html.
On Windows OS, create a new file named 'index.html'
Contents of the HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notes App In Pure HTML CSS JS</title>
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
</head>
<body>
<div class="popup-box">
<div class="popup">
<div class="content">
<header>
<p></p>
<i class="uil uil-times"></i>
</header>
<form action="#">
<div class="row title">
<label>Title</label>
<input type="text" spellcheck="false">
</div>
<div class="row description">
<label>Description</label>
<textarea spellcheck="false"></textarea>
</div>
<button></button>
</form>
</div>
</div>
</div>
<div class="wrapper">
<li class="add-box">
<div class="icon"><i class="uil uil-plus"></i></div>
<p>Add New Note</p>
</li>
</div>
<div class="footer">
<p>Made by kdwebdeveloper<a href="https://kdwebdeveloper.vercel.app/"> Porfolio </a></p>
</div>
<script src="script.js"></script>
</body>
</html>
This is the structure of the web application. Now, we need to choose fonts, colors and give design the page beautifully with CSS.
In the linux terminal, issue the command:
touch style.css
On Windows, create a file 'style.css'
Note: You must create the two files all in the same folder "notesapp".
Link the CSS file 'style.css' to the web page with an with the HTML 'link element' in the 'head' element in the HTML structure.
This is the content for the CSS file 'style.css'.
`* {
list-style: none;
padding: 0;
margin:0;
box-sizing: border-box;
font-family: 'Raleway', sans-serif;
}
body {
background-image: linear-gradient(to right, rgba(127,127,67,0.5), rgb(97, 141, 61));
}
::selection{
color: #fff;
background: #618cf8;
}
.wrapper{
margin: 50px;
display: grid;
gap: 25px;
grid-template-columns: repeat(auto-fill, 265px);
}
.wrapper li{
height: 250px;
list-style: none;
border-radius: 5px;
padding: 15px 20px 20px;
background: #fff;
box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
.add-box, .icon, .bottom-content,
.popup, header, .settings .menu li{
display: flex;
align-items: center;
justify-content: space-between;
}
.add-box{
cursor: pointer;
flex-direction: column;
justify-content: center;
}
.add-box .icon{
height: 78px;
width: 78px;
color: #88ABFF;
font-size: 40px;
border-radius: 50%;
justify-content: center;
border: 2px solid #88ABFF;
}
.add-box p{
color: #88ABFF;
font-weight: 500;
margin-top: 20px;
}
.note{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.note .details{
max-height: 165px;
overflow-y: auto;
}
.note .details::-webkit-scrollbar,
.popup textarea::-webkit-scrollbar{
width: 0;
}
.note .details:hover::-webkit-scrollbar,
.popup textarea:hover::-webkit-scrollbar{
width: 5px;
}
.note .details:hover::-webkit-scrollbar-track,
.popup textarea:hover::-webkit-scrollbar-track{
background: #f1f1f1;
border-radius: 25px;
}
.note .details:hover::-webkit-scrollbar-thumb,
.popup textarea:hover::-webkit-scrollbar-thumb{
background: #e6e6e6;
border-radius: 25px;
}
.note p{
font-size: 22px;
font-weight: 500;
}
.note span{
display: block;
color: #575757;
font-size: 16px;
margin-top: 5px;
}
.note .bottom-content{
padding-top: 10px;
border-top: 1px solid #ccc;
}
.bottom-content span{
color: #6D6D6D;
font-size: 14px;
}
.bottom-content .settings{
position: relative;
}
.bottom-content .settings i{
color: #6D6D6D;
cursor: pointer;
font-size: 15px;
}
.settings .menu{
z-index: 1;
bottom: 0;
right: -5px;
padding: 5px 0;
background: #fff;
position: absolute;
border-radius: 4px;
transform: scale(0);
transform-origin: bottom right;
box-shadow: 0 0 6px rgba(0,0,0,0.15);
transition: transform 0.2s ease;
}
.settings.show .menu{
transform: scale(1);
}
.settings .menu li{
height: 25px;
font-size: 16px;
margin-bottom: 2px;
padding: 17px 15px;
cursor: pointer;
box-shadow: none;
border-radius: 0;
justify-content: flex-start;
}
.menu li:last-child{
margin-bottom: 0;
}
.menu li:hover{
background: #f5f5f5;
}
.menu li i{
padding-right: 8px;
}
.popup-box{
position: fixed;
top: 0;
left: 0;
z-index: 2;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.4);
}
.popup-box .popup{
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
width: 100%;
max-width: 400px;
justify-content: center;
transform: translate(-50%, -50%) scale(0.95);
}
.popup-box, .popup{
opacity: 0;
pointer-events: none;
transition: all 0.25s ease;
}
.popup-box.show, .popup-box.show .popup{
opacity: 1;
pointer-events: auto;
}
.popup-box.show .popup{
transform: translate(-50%, -50%) scale(1);
}
.popup .content{
border-radius: 5px;
background: #fff;
width: calc(100% - 15px);
box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
.content header{
padding: 15px 25px;
border-bottom: 1px solid #ccc;
}
.content header p{
font-size: 20px;
font-weight: 500;
}
.content header i{
color: #8b8989;
cursor: pointer;
font-size: 23px;
}
.content form{
margin: 15px 25px 35px;
}
.content form .row{
margin-bottom: 20px;
}
form .row label{
font-size: 18px;
display: block;
margin-bottom: 6px;
}
form :where(input, textarea){
height: 50px;
width: 100%;
outline: none;
font-size: 17px;
padding: 0 15px;
border-radius: 4px;
border: 1px solid #999;
}
form :where(input, textarea):focus{
box-shadow: 0 2px 4px rgba(0,0,0,0.11);
}
form .row textarea{
height: 150px;
resize: none;
padding: 8px 15px;
}
form button{
width: 100%;
height: 50px;
color: #fff;
outline: none;
border: none;
cursor: pointer;
font-size: 17px;
border-radius: 4px;
background: #6A93F8;
}
@media (max-width: 660px){
.wrapper{
margin: 15px;
gap: 15px;
grid-template-columns: repeat(auto-fill, 100%);
}
.popup-box .popup{
max-width: calc(100% - 15px);
}
.bottom-content .settings i{
font-size: 17px;
}
}
.footer p{
float:inline-start;
}`
Add Logic To Complete the project
The (User Interface)UI of the page is now just as we want it, now proceed to add logic to the application. Javascript is a highly dynamic language and it will allow us to achieve that effect.
Create a new file 'script.js'. With the terminal, issue the command:
touch script.js in the root directory in addition to the index.html file and style.css files.
We proceed to link the 'script.js' file to the 'index.html' file to render the javascript file with HTML script tag.
This is the content of the 'script.js' javascript file:
Do not worry, I will attach the link to the source code.
Now we have a notes app written entirely in Javascript.
Commit the project to Github
Goto github and sign up for account or sign in if you have an account.
Create a new repository and commit the project to github.
This is how it will look like:
Deploy the project to vercel for hosting
Goto vercel and sign up for an account with github.Goto the dashboard and click on deploy a project. Select the repostory you created and ta-da!, the project is live.
Here is link to the web application we just created:
notesapp.
This is the link to the source code at github.
Feedbacks are welcome!
Top comments (0)