5 beginners project using HTML CSS and JavaScript
Hii guys,
this post is very useful for beginners.who knows basic of java script and html.if any one want to hands on project than this post is very useful
- Movie App
Index.html Source Code.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8" />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0" />
<title>Movie App</title>
<link rel=”stylesheet” href=”style.css” />
<script src=”script.js” defer></script>
</head>
<body>
<header>
<form id=”form”>
<input
type=”text”
id=”search”
placeholder=”Search”
class=”search”
/>
</form>
</header>
<main id=”main”></main>
</body>
</html>
Source Code of Style.css
@import url(“https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
* {
box-sizing: border-box;
}
body {
background-color: #22254b;
font-family: “Poppins”, sans-serif;
margin: 0;
}
header {
background-color: #373b69;
display: flex;
justify-content: flex-end;
padding: 1rem;
}
.search {
background-color: transparent;
border: 2px solid #22254b;
border-radius: 50px;
color: #fff;
font-family: inherit;
font-size: 1rem;
padding: 0.5rem 1rem;
}
.search::placeholder {
color: #7378c5;
}
.search:focus {
background-color: #22254b;
outline: none;
}
main {
display: flex;
flex-wrap: wrap;
}
.movie {
background-color: #373b69;
border-radius: 3px;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
overflow: hidden;
position: relative;
margin: 1rem;
width: 300px;
}
.movie img {
width: 100%;
}
.movie-info {
color: #eee;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem 1rem;
letter-spacing: 0.5px;
}
.movie-info h3 {
margin: 0;
}
.movie-info span {
background-color: #22254b;
border-radius: 3px;
font-weight: bold;
padding: 0.25rem 0.5rem;
}
.movie-info span.green {
color: rgb(39, 189, 39);
}
.movie-info span.orange {
color: orange;
}
.movie-info span.red {
color: rgb(189, 42, 42);
}
.overview {
background-color: #fff;
padding: 2rem;
position: absolute;
max-height: 100%;
overflow: auto;
left: 0;
bottom: 0;
right: 0;
transform: translateY(101%);
transition: transform 0.3s ease-in;
}
.overview h3 {
margin-top: 0;
}
.movie:hover .overview {
transform: translateY(0);
}
Source Code of Script.js
const APIURL =
“https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1";
const IMGPATH = “https://image.tmdb.org/t/p/w1280";
const SEARCHAPI =
“https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query=";
const main = document.getElementById(“main”);
const form = document.getElementById(“form”);
const search = document.getElementById(“search”);
// initially get fav movies
getMovies(APIURL);
async function getMovies(url) {
const resp = await fetch(url);
const respData = await resp.json();
console.log(respData);
showMovies(respData.results);
}
function showMovies(movies) {
// clear main
main.innerHTML = “”;
movies.forEach((movie) => {
const { poster_path, title, vote_average, overview } = movie;
const movieEl = document.createElement(“div”);
movieEl.classList.add(“movie”);
movieEl.innerHTML = `
<img
src=”${IMGPATH + poster_path}”
alt=”${title}”
/>
<div class=”movie-info”>
<h3>${title}</h3>
<span class=”${getClassByRate(
vote_average
)}”>${vote_average}</span>
</div>
<div class=”overview”>
<h3>Overview:</h3>
${overview}
</div>
`;
main.appendChild(movieEl);
});
}
function getClassByRate(vote) {
if (vote >= 8) {
return “green”;
} else if (vote >= 5) {
return “orange”;
} else {
return “red”;
}
}
form.addEventListener(“submit”, (e) => {
e.preventDefault();
const searchTerm = search.value;
if (searchTerm) {
getMovies(SEARCHAPI + searchTerm);
search.value = “”;
}
});
finally we get our movie project screen
2.Github-Profiles App
in this app we can search movie and when our system mouse will come on pic card than it will shows description about movie.
Index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8" />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0" />
<title>Github Profiles</title>
<link rel=”stylesheet” href=”style.css” />
<script src=”script.js” defer></script>
</head>
<body>
<form id=”form”>
<input type=”text” id=”search” placeholder=”Search a Github User” />
</form>
<main id=”main”></main>
</body>
</html>
Style.css Source Code.
@import url(“https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
* {
box-sizing: border-box;
}
body {
background-color: #2a2a72;
background-image: linear-gradient(315deg, #2a2a72 0%, #2e2a68 74%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: “Poppins”, sans-serif;
margin: 0;
min-height: 100vh;
}
input {
background-color: #4c2885;
border-radius: 10px;
border: none;
box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
0 15px 40px rgba(0, 0, 0, 0.1);
color: white;
font-family: inherit;
font-size: 1rem;
padding: 1rem;
margin-bottom: 2rem;
}
input::placeholder {
color: #bbb;
}
input:focus {
outline: none;
}
.card {
background-color: #4c2885;
background-image: linear-gradient(315deg, #4c2885 0%, #4c11ac 100%);
border-radius: 20px;
box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
0 15px 40px rgba(0, 0, 0, 0.1);
display: flex;
padding: 3rem;
max-width: 800px;
}
.avatar {
border: 10px solid #2a2a72;
border-radius: 50%;
height: 150px;
width: 150px;
}
.user-info {
color: #eee;
margin-left: 2rem;
}
.user-info h2 {
margin-top: 0;
}
.user-info ul {
display: flex;
justify-content: space-between;
list-style-type: none;
padding: 0;
max-width: 400px;
}
.user-info ul li {
display: flex;
align-items: center;
}
.user-info ul li strong {
font-size: 0.9rem;
margin-left: 0.5rem;
}
.repo {
background-color: #2a2a72;
border-radius: 5px;
display: inline-block;
color: white;
font-size: 0.7rem;
padding: 0.25rem 0.5rem;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
text-decoration: none;
}
Source Code of Script.js
const APIURL = “https://api.github.com/users/";
const main = document.getElementById(“main”);
const form = document.getElementById(“form”);
const search = document.getElementById(“search”);
getUser(“florinpop17”);
async function getUser(username) {
const resp = await fetch(APIURL + username);
const respData = await resp.json();
createUserCard(respData);
getRepos(username);
}
async function getRepos(username) {
const resp = await fetch(APIURL + username + “/repos”);
const respData = await resp.json();
addReposToCard(respData);
}
function createUserCard(user) {
const cardHTML = `
<div class=”card”>
<div>
<img class=”avatar” src=”${user.avatar_url}” alt=”${user.name}” />
</div>
<div class=”user-info”>
<h2>${user.name}</h2>
<p>${user.bio}</p>
<ul class=”info”>
<li>${user.followers}<strong>Followers</strong></li>
<li>${user.following}<strong>Following</strong></li>
<li>${user.public_repos}<strong>Repos</strong></li>
</ul>
<div id=”repos”></div>
</div>
</div>
`;
main.innerHTML = cardHTML;
}
function addReposToCard(repos) {
const reposEl = document.getElementById(“repos”);
repos
.sort((a, b) => b.stargazers_count — a.stargazers_count)
.slice(0, 10)
.forEach((repo) => {
const repoEl = document.createElement(“a”);
repoEl.classList.add(“repo”);
repoEl.href = repo.html_url;
repoEl.target = “_blank”;
repoEl.innerText = repo.name;
reposEl.appendChild(repoEl);
});
}
form.addEventListener(“submit”, (e) => {
e.preventDefault();
const user = search.value;
if (user) {
getUser(user);
search.value = “”;
}
});
finally our app is completed.
3.Drawing-app
In this drawing-app we can draw any thing in our browser screen.
Index.htm Source code
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8" />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0" />
<title>Drawing App</title>
<link rel=”stylesheet” href=”style.css” />
<script src=”script.js” defer></script>
</head>
<body>
<canvas id=”canvas” width=”800" height=”800"></canvas>
<div class=”toolbox”>
<button id=”decrease”>-</button>
<span id=”size”>30</span>
<button id=”increase”>+</button>
<input type=”color” id=”color” />
<button id=”clear”>💩</button>
</div>
</body>
</html>
Style.css Source Code
@import url(“https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
* {
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: “Poppins”, sans-serif;
margin: 0;
min-height: 100vh;
}
canvas {
border: 2px solid rebeccapurple;
}
.toolbox {
background-color: rebeccapurple;
border: 1px solid rebeccapurple;
display: flex;
padding: 1rem;
width: 804px;
}
.toolbox > * {
background-color: #fff;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 2rem;
padding: 0.25rem;
margin: 0.25rem;
height: 50px;
width: 50px;
}
.toolbox > *:last-child {
margin-left: auto;
}
Script.js Source Code.
const canvas = document.getElementById(“canvas”);
const increaseBtn = document.getElementById(“increase”);
const decreaseBtn = document.getElementById(“decrease”);
const sizeEl = document.getElementById(“size”);
const colorEl = document.getElementById(“color”);
const clearEl = document.getElementById(“clear”);
const ctx = canvas.getContext(“2d”);
let size = 30;
let isPressed = false;
let color = “black”;
let x = undefined;
let y = undefined;
canvas.addEventListener(“mousedown”, (e) => {
isPressed = true;
x = e.offsetX;
y = e.offsetY;
});
canvas.addEventListener(“mouseup”, (e) => {
isPressed = false;
x = undefined;
y = undefined;
});
canvas.addEventListener(“mousemove”, (e) => {
if (isPressed) {
const x2 = e.offsetX;
const y2 = e.offsetY;
drawCircle(x2, y2);
drawLine(x, y, x2, y2);
x = x2;
y = y2;
}
});
function drawCircle(x, y) {
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fillStyle = color;
ctx.fill();
}
function drawLine(x1, y1, x2, y2) {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = color;
ctx.lineWidth = size * 2;
ctx.stroke();
}
increaseBtn.addEventListener(“click”, () => {
size += 5;
if (size > 50) {
size = 50;
}
updateSizeOnScreen();
});
decreaseBtn.addEventListener(“click”, () => {
size -= 5;
if (size < 5) {
size = 5;
}
updateSizeOnScreen();
});
colorEl.addEventListener(“change”, (e) => {
color = e.target.value;
});
clearEl.addEventListener(“click”, () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
function updateSizeOnScreen() {
sizeEl.innerText = size;
}
Finally we completed our drawing-app
4.Password-generator
Index.html Source Code
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8" />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0" />
<title>Password Generator</title>
<link rel=”stylesheet” href=”style.css” />
<script src=”script.js” defer></script>
</head>
<body>
<div class=”pw-container”>
<div class=”pw-header”>
<div class=”pw”>
<span id=”pw”>l823Zs78#Css09@</span>
<button id=”copy”>Copy</button>
</div>
</div>
<div class=”pw-body”>
<div class=”form-control”>
<label for=”len”>Password Length</label>
<input id=”len” value=”15" type=”number” min=”2" max=”30" />
</div>
<div class=”form-control”>
<label for=”upper”>Contain Uppercase Letters</label>
<input id=”upper” type=”checkbox” />
</div>
<div class=”form-control”>
<label for=”lower”>Contain Lowercase Letters</label>
<input id=”lower” type=”checkbox” />
</div>
<div class=”form-control”>
<label for=”number”>Contain Numbers</label>
<input id=”number” type=”checkbox” />
</div>
<div class=”form-control”>
<label for=”symbol”>Contain Symbols</label>
<input id=”symbol” type=”checkbox” />
</div>
<button class=”generate” id=”generate”>
Generate Password
</button>
</div>
</div>
</body>
</html>
style.css source code
@import url(“https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
* {
box-sizing: border-box;
}
body {
background-color: rebeccapurple;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-family: “Poppins”, sans-serif;
margin: 0;
min-height: 100vh;
}
.pw-container {
background-color: rgb(46, 12, 80);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
min-width: 400px;
}
.pw-header {
padding: 1rem;
}
.pw {
background-color: rgb(69, 28, 109);
display: flex;
font-size: 1.5rem;
align-items: center;
height: 70px;
width: 100%;
position: relative;
padding: 1rem;
overflow: auto;
}
.pw button {
background-color: white;
border: none;
color: rgb(29, 2, 56);
cursor: pointer;
font-family: inherit;
font-weight: bold;
padding: 0.25rem;
position: absolute;
top: 0;
right: 0;
transform: translate(0, 20%);
transition: opacity 0.2s ease, transform 0.2s ease;
opacity: 0;
}
.pw:hover button {
opacity: 1;
transform: translate(0, 0%);
}
.pw-body {
padding: 0 1rem 1rem;
}
.form-control {
color: #eee;
display: flex;
justify-content: space-between;
margin: 0.75rem 0;
}
.generate {
background-color: #ecb602;
border: none;
color: rebeccapurple;
cursor: pointer;
display: block;
font-size: 1.5rem;
font-weight: bold;
padding: 0.75rem;
margin-top: 1rem;
width: 100%;
}
script.js source code
const pwEl = document.getElementById(“pw”);
const copyEl = document.getElementById(“copy”);
const lenEl = document.getElementById(“len”);
const upperEl = document.getElementById(“upper”);
const lowerEl = document.getElementById(“lower”);
const numberEl = document.getElementById(“number”);
const symbolEl = document.getElementById(“symbol”);
const generateEl = document.getElementById(“generate”);
const upperLetters = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”;
const lowerLetters = “abcdefghijklmnopqrstuvwxyz”;
const numbers = “0123456789”;
const symbols = “!@#$%^&*()_+=”;
function getLowercase() {
return lowerLetters[Math.floor(Math.random() * lowerLetters.length)];
}
function getUppercase() {
return upperLetters[Math.floor(Math.random() * upperLetters.length)];
}
function getNumber() {
return numbers[Math.floor(Math.random() * numbers.length)];
}
function getSymbol() {
return symbols[Math.floor(Math.random() * symbols.length)];
}
function generatePassword() {
const len = lenEl.value;
let password = “”;
if (upperEl.checked) {
password += getUppercase();
}
if (lowerEl.checked) {
password += getLowercase();
}
if (numberEl.checked) {
password += getNumber();
}
if (symbolEl.checked) {
password += getSymbol();
}
for (let i = password.length; i < len; i++) {
const x = generateX();
password += x;
}
pwEl.innerText = password;
}
function generateX() {
const xs = [];
if (upperEl.checked) {
xs.push(getUppercase());
}
if (lowerEl.checked) {
xs.push(getLowercase());
}
if (numberEl.checked) {
xs.push(getNumber());
}
if (symbolEl.checked) {
xs.push(getSymbol());
}
if (xs.length === 0) return “”;
return xs[Math.floor(Math.random() * xs.length)];
}
generateEl.addEventListener(“click”, generatePassword);
copyEl.addEventListener(“click”, () => {
const textarea = document.createElement(“textarea”);
const password = pwEl.innerText;
if (!password) {
return;
}
textarea.value = password;
document.body.appendChild(textarea);
textarea.select();
document.execCommand(“copy”);
textarea.remove();
alert(“Password copied to clipboard”);
});
finally we completed our password generator
5.Weather-app
Index.html source code
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8" />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0" />
<title>Weather App</title>
<link rel=”stylesheet” href=”style.css” />
<script src=”script.js” defer></script>
</head>
<body>
<form id=”form”>
<input
type=”text”
id=”search”
placeholder=”Search by location”
autocomplete=”off”
/>
</form>
<main id=”main”></main>
</body>
</html>
style.css source code
@import url(“https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
* {
box-sizing: border-box;
}
body {
background: linear-gradient(300deg, #ced1d6, #bfc0c0);
font-family: “Poppins”, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
min-height: 100vh;
}
input {
background-color: #fff;
border: none;
border-radius: 25px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
font-family: inherit;
font-size: 1rem;
padding: 1rem;
min-width: 300px;
}
input:focus {
outline: none;
}
.weather {
font-size: 2rem;
text-align: center;
}
.weather h2 {
display: flex;
align-items: center;
margin-bottom: 0;
}
script.js source code
const apikey = “3265874a2c77ae4a04bb96236a642d2f”;
const main = document.getElementById(“main”);
const form = document.getElementById(“form”);
const search = document.getElementById(“search”);
const url = (city) =>
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apikey}`;
async function getWeatherByLocation(city) {
const resp = await fetch(url(city), { origin: “cors” });
const respData = await resp.json();
console.log(respData);
addWeatherToPage(respData);
}
function addWeatherToPage(data) {
const temp = KtoC(data.main.temp);
const weather = document.createElement(“div”);
weather.classList.add(“weather”);
weather.innerHTML = `
<h2><img src=”https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png" /> ${temp}°C <img src=”https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png" /></h2>
<small>${data.weather[0].main}</small>
`;
// cleanup
main.innerHTML = “”;
main.appendChild(weather);
}
function KtoC(K) {
return Math.floor(K — 273.15);
}
form.addEventListener(“submit”, (e) => {
e.preventDefault();
const city = search.value;
if (city) {
getWeatherByLocation(city);
}
});
finally we completed our weather project
