5 Beginners Project using JavaScript,html,CSS.
Hi guys,
This Post is useful for beginner.
In this Post we are going to create project Using HTML, CSS, JavaScript.
we are going to cover 5 project in this post.
- Count-down-timer
Source Code Of Html file.
<!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=”stylesheet” href=”style.css”/>
<title>Count Down TImer</title>
<script src=”script.js” defer></script>
</head>
<body>
<h1>New Years Eve</h1>
<div class=”countdown-container”>
<div class=” countdown-el days-c”>
<p class=”big-text” id=”days”>0</p>
<span>days</span>
</div>
<div class=” countdown-el hours-c”>
<p class=”big-text” id=”hours”>0</p>
<span>hours</span>
</div>
<div class=” countdown-el mins-c”>
<p class=”big-text” id=”minutes”>0</p>
<span>mins</span>
</div>
<div class=” countdown-el seconds-c”>
<p class=”big-text” id=”seconds”>0</p>
<span>seconds</span>
</div>
</div>
</body>
</html>
Source Code of CSS
@import url(‘https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,200&display=swap');
*{
box-sizing:border-box;
}
body{
background-image: url(“./sno.jpg”);
margin:0;
font-family: ‘Poppins’,sans-serif;
min-height: 100vh;
background-size:cover;
background-position: center;
display: flex;
flex-direction:column;
align-items:center;
justify-content: center;
}
h1{
font-weight: normal;
font-size: 4rem;
margin-top: 5rem;
}
.countdown-container{
display:flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.big-text{
font-weight:bold;
font-size: 6rem;
line-height: 1;
margin: 1rem 2rem;
}
.countdown-el{
text-align:center;
}
.countdown-el span{
font-size: 1.3rem;
}
Source Code of Java Script
let daysE1=document.getElementById(‘days’);
let hoursE1=document.getElementById(‘hours’);
let minutesE1=document.getElementById(‘minutes’);
let secondE1=document.getElementById(‘seconds’);
const newYears= ‘1 jan 2021’;
function countdown(){
const newYearsDate=new Date(newYears);
const currentDate = new Date();
const totalSeconds=new Date(newYearsDate-currentDate)/1000;
const days=Math.floor(totalSeconds / 3600 /24);
const hours=Math.floor(totalSeconds/3600) % 24;
const mins=Math.floor(totalSeconds/60) % 60;
const seconds=Math.floor(totalSeconds) % 60;
daysE1.innerHTML= -(days);
hoursE1.innerHTML= (-(FormatTime(hours)));
minutesE1.innerHTML= (-(FormatTime(mins)));
secondE1.innerHTML=(-(FormatTime(seconds)));
}
function FormatTime(time){
return time < 10 ? `${time}` : time;
}
countdown();
setInterval(countdown,1000);
Here our project is complete.
2.Quiz App
Index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8" />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0" />
<title>Quiz App</title>
<link rel=”stylesheet” href=”style.css” />
<script src=”script.js” defer></script>
</head>
<body>
<div class=”quiz-container” id=”quiz”>
<div class=”quiz-header”>
<h2 id=”question”>Question text</h2>
<ul>
<li>
<input
type=”radio”
id=”a”
name=”answer”
class=”answer”
/>
<label id=”a_text” for=”a”>Question</label>
</li>
<li>
<input
type=”radio”
id=”b”
name=”answer”
class=”answer”
/>
<label id=”b_text” for=”b”>Question</label>
</li>
<li>
<input
type=”radio”
id=”c”
name=”answer”
class=”answer”
/>
<label id=”c_text” for=”c”>Question</label>
</li>
<li>
<input
type=”radio”
id=”d”
name=”answer”
class=”answer”
/>
<label id=”d_text” for=”d”>Question</label>
</li>
</ul>
</div>
<button id=”submit”>Submit</button>
</div>
</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: #b8c6db;
background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 100%);
display: flex;
align-items: center;
justify-content: center;
font-family: “Poppins”, sans-serif;
margin: 0;
min-height: 100vh;
}
.quiz-container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
overflow: hidden;
width: 600px;
max-width: 100%;
}
.quiz-header {
padding: 4rem;
}
h2 {
padding: 1rem;
text-align: center;
margin: 0;
}
ul {
list-style-type: none;
padding: 0;
}
ul li {
font-size: 1.2rem;
margin: 1rem 0;
}
ul li label {
cursor: pointer;
}
button {
background-color: #8e44ad;
border: none;
color: white;
cursor: pointer;
display: block;
font-family: inherit;
font-size: 1.1rem;
width: 100%;
padding: 1.3rem;
}
button:hover {
background-color: #732d91;
}
button:focus {
background-color: #5e3370;
outline: none;
}
Source Code Of JavaScript
const quizData = [
{
question: “What is the most used programming language in 2019?”,
a: “Java”,
b: “C”,
c: “Python”,
d: “JavaScript”,
correct: “d”,
},
{
question: “Who is the President of US?”,
a: “Florin Pop”,
b: “Donald Trump”,
c: “Ivan Saldano”,
d: “Mihai Andrei”,
correct: “b”,
},
{
question: “What does HTML stand for?”,
a: “Hypertext Markup Language”,
b: “Cascading Style Sheet”,
c: “Jason Object Notation”,
d: “Helicopters Terminals Motorboats Lamborginis”,
correct: “a”,
},
{
question: “What year was JavaScript launched?”,
a: “1996”,
b: “1995”,
c: “1994”,
d: “none of the above”,
correct: “b”,
},
];
const quiz = document.getElementById(“quiz”);
const answerEls = document.querySelectorAll(“.answer”);
const questionEl = document.getElementById(“question”);
const a_text = document.getElementById(“a_text”);
const b_text = document.getElementById(“b_text”);
const c_text = document.getElementById(“c_text”);
const d_text = document.getElementById(“d_text”);
const submitBtn = document.getElementById(“submit”);
let currentQuiz = 0;
let score = 0;
loadQuiz();
function loadQuiz() {
deselectAnswers();
const currentQuizData = quizData[currentQuiz];
questionEl.innerText = currentQuizData.question;
a_text.innerText = currentQuizData.a;
b_text.innerText = currentQuizData.b;
c_text.innerText = currentQuizData.c;
d_text.innerText = currentQuizData.d;
}
function getSelected() {
let answer = undefined;
answerEls.forEach((answerEl) => {
if (answerEl.checked) {
answer = answerEl.id;
}
});
return answer;
}
function deselectAnswers() {
answerEls.forEach((answerEl) => {
answerEl.checked = false;
});
}
submitBtn.addEventListener(“click”, () => {
// check to see the answer
const answer = getSelected();
if (answer) {
if (answer === quizData[currentQuiz].correct) {
score++;
}
currentQuiz++;
if (currentQuiz < quizData.length) {
loadQuiz();
} else {
quiz.innerHTML = `
<h2>You answered correctly at ${score}/${quizData.length} questions.</h2>
<button onclick=”location.reload()”>Reload</button>
`;
}
}
});
Now our second project also completed.we can see below pic.
3.Recipe-App
In this post we are going to create Recipe App using java script html and css.
Source code of Index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8" />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0" />
<title>Recipes App</title>
<link
rel=”stylesheet”
href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<link rel=”stylesheet” href=”style.css” />
<script src=”script.js” defer></script>
</head>
<body>
<div class=”mobile-container”>
<header>
<input type=”text” id=”search-term” />
<button id=”search”><i class=”fas fa-search”></i></button>
</header>
<div class=”fav-container”>
<h3>Favorite Meals</h3>
<ul class=”fav-meals” id=”fav-meals”></ul>
</div>
<div class=”meals” id=”meals”></div>
</div>
<div class=”popup-container hidden” id=”meal-popup”>
<div class=”popup”>
<button id=”close-popup” class=”close-popup”>
<i class=”fas fa-times”></i>
</button>
<div class=”meal-info” id=”meal-info”></div>
</div>
</div>
</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: #ece9e6;
background: -webkit-linear-gradient(to right, #ffffff, #ece9e6);
background: linear-gradient(to right, #ffffff, #ece9e6);
display: flex;
align-items: center;
justify-content: center;
font-family: “Poppins”, sans-serif;
margin: 0;
min-height: 100vh;
}
img {
max-width: 100%;
}
.mobile-container {
background-color: #fff;
box-shadow: 0 0 10px 2px #3333331a;
border-radius: 3px;
overflow: hidden;
width: 400px;
}
header {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
header input {
background-color: #eee;
border: none;
border-radius: 3px;
font-family: inherit;
padding: 0.5rem 1rem;
}
header button {
background-color: transparent;
border: none;
color: rgb(138, 129, 141);
font-size: 1.5rem;
margin-left: 10px;
}
.fav-container {
background-color: rgb(243, 225, 255);
padding: 0.25rem 1rem;
text-align: center;
}
.fav-meals {
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style-type: none;
padding: 0;
}
.fav-meals li {
cursor: pointer;
position: relative;
margin: 5px;
width: 75px;
}
.fav-meals li .clear {
background-color: transparent;
border: none;
cursor: pointer;
opacity: 0;
position: absolute;
top: -0.5rem;
right: -0.5rem;
font-size: 1.2rem;
}
.fav-meals li:hover .clear {
opacity: 1;
}
.fav-meals li img {
border: 2px solid #ffffff;
border-radius: 50%;
box-shadow: 0 0 10px 2px #3333331a;
object-fit: cover;
height: 70px;
width: 70px;
}
.fav-meals li span {
display: inline-block;
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 75px;
}
.meal {
border-radius: 3px;
box-shadow: 0 0 10px 2px #3333331a;
cursor: pointer;
margin: 1.5rem;
overflow: hidden;
}
.meal-header {
position: relative;
}
.meal-header .random {
position: absolute;
top: 1rem;
background-color: #fff;
padding: 0.25rem 1rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.meal-header img {
object-fit: cover;
height: 250px;
width: 100%;
}
.meal-body {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
}
.meal-body h4 {
margin: 0;
}
.meal-body .fav-btn {
border: none;
background-color: transparent;
color: rgb(197, 188, 188);
cursor: pointer;
font-size: 1.2rem;
}
.meal-body .fav-btn.active {
color: rebeccapurple;
}
.popup-container {
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.popup-container.hidden {
opacity: 0;
pointer-events: none;
}
.popup {
background-color: #fff;
border-radius: 5px;
padding: 0 2rem;
position: relative;
overflow: auto;
max-height: 100vh;
max-width: 600px;
width: 100%;
}
.popup .close-popup {
background-color: transparent;
border: none;
cursor: pointer;
font-size: 1.5rem;
position: absolute;
top: 1rem;
right: 1rem;
}
.meal-info h1 {
text-align: center;
}
Source Code of JavaScript Script.js
const mealsEl = document.getElementById(“meals”);
const favoriteContainer = document.getElementById(“fav-meals”);
const mealPopup = document.getElementById(“meal-popup”);
const mealInfoEl = document.getElementById(“meal-info”);
const popupCloseBtn = document.getElementById(“close-popup”);
const searchTerm = document.getElementById(“search-term”);
const searchBtn = document.getElementById(“search”);
getRandomMeal();
fetchFavMeals();
async function getRandomMeal() {
const resp = await fetch(
“https://www.themealdb.com/api/json/v1/1/random.php"
);
const respData = await resp.json();
const randomMeal = respData.meals[0];
addMeal(randomMeal, true);
}
async function getMealById(id) {
const resp = await fetch(
“https://www.themealdb.com/api/json/v1/1/lookup.php?i=" + id
);
const respData = await resp.json();
const meal = respData.meals[0];
return meal;
}
async function getMealsBySearch(term) {
const resp = await fetch(
“https://www.themealdb.com/api/json/v1/1/search.php?s=" + term
);
const respData = await resp.json();
const meals = respData.meals;
return meals;
}
function addMeal(mealData, random = false) {
console.log(mealData);
const meal = document.createElement(“div”);
meal.classList.add(“meal”);
meal.innerHTML = `
<div class=”meal-header”>
${
random
? `
<span class=”random”> Random Recipe </span>`
: “”
}
<img
src=”${mealData.strMealThumb}”
alt=”${mealData.strMeal}”
/>
</div>
<div class=”meal-body”>
<h4>${mealData.strMeal}</h4>
<button class=”fav-btn”>
<i class=”fas fa-heart”></i>
</button>
</div>
`;
const btn = meal.querySelector(“.meal-body .fav-btn”);
btn.addEventListener(“click”, () => {
if (btn.classList.contains(“active”)) {
removeMealLS(mealData.idMeal);
btn.classList.remove(“active”);
} else {
addMealLS(mealData.idMeal);
btn.classList.add(“active”);
}
fetchFavMeals();
});
meal.addEventListener(“click”, () => {
showMealInfo(mealData);
});
mealsEl.appendChild(meal);
}
function addMealLS(mealId) {
const mealIds = getMealsLS();
localStorage.setItem(“mealIds”, JSON.stringify([…mealIds, mealId]));
}
function removeMealLS(mealId) {
const mealIds = getMealsLS();
localStorage.setItem(
“mealIds”,
JSON.stringify(mealIds.filter((id) => id !== mealId))
);
}
function getMealsLS() {
const mealIds = JSON.parse(localStorage.getItem(“mealIds”));
return mealIds === null ? [] : mealIds;
}
async function fetchFavMeals() {
// clean the container
favoriteContainer.innerHTML = “”;
const mealIds = getMealsLS();
for (let i = 0; i < mealIds.length; i++) {
const mealId = mealIds[i];
meal = await getMealById(mealId);
addMealFav(meal);
}
}
function addMealFav(mealData) {
const favMeal = document.createElement(“li”);
favMeal.innerHTML = `
<img
src=”${mealData.strMealThumb}”
alt=”${mealData.strMeal}”
/><span>${mealData.strMeal}</span>
<button class=”clear”><i class=”fas fa-window-close”></i></button>
`;
const btn = favMeal.querySelector(“.clear”);
btn.addEventListener(“click”, () => {
removeMealLS(mealData.idMeal);
fetchFavMeals();
});
favMeal.addEventListener(“click”, () => {
showMealInfo(mealData);
});
favoriteContainer.appendChild(favMeal);
}
function showMealInfo(mealData) {
// clean it up
mealInfoEl.innerHTML = “”;
// update the Meal info
const mealEl = document.createElement(“div”);
const ingredients = [];
// get ingredients and measures
for (let i = 1; i <= 20; i++) {
if (mealData[“strIngredient” + i]) {
ingredients.push(
`${mealData[“strIngredient” + i]} — ${
mealData[“strMeasure” + i]
}`
);
} else {
break;
}
}
mealEl.innerHTML = `
<h1>${mealData.strMeal}</h1>
<img
src=”${mealData.strMealThumb}”
alt=”${mealData.strMeal}”
/>
<p>
${mealData.strInstructions}
</p>
<h3>Ingredients:</h3>
<ul>
${ingredients
.map(
(ing) => `
<li>${ing}</li>
`
)
.join(“”)}
</ul>
`;
mealInfoEl.appendChild(mealEl);
// show the popup
mealPopup.classList.remove(“hidden”);
}
searchBtn.addEventListener(“click”, async () => {
// clean container
mealsEl.innerHTML = “”;
const search = searchTerm.value;
const meals = await getMealsBySearch(search);
if (meals) {
meals.forEach((meal) => {
addMeal(meal);
});
}
});
popupCloseBtn.addEventListener(“click”, () => {
mealPopup.classList.add(“hidden”);
});
4-Notes-App
Index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8" />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0" />
<title>Notes App</title>
<link rel=”stylesheet” href=”style.css” />
<link
rel=”stylesheet”
href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/marked/1.1.1/marked.min.js"></script>
<script src=”script.js” defer></script>
</head>
<body>
<button class=”add” id=”add”>
<i class=”fas fa-plus”></i> Add note
</button>
</body>
</html>
Style.css
@import url(“https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
* {
box-sizing: border-box;
}
body {
background-color: #7bdaf3;
display: flex;
flex-wrap: wrap;
font-family: “Poppins”, sans-serif;
margin: 0;
padding-top: 3rem;
}
.add {
background-color: #9ec862;
border-radius: 3px;
border: none;
color: white;
cursor: pointer;
padding: 0.5rem 1rem;
position: fixed;
top: 1rem;
right: 1rem;
}
.note {
background-color: #fff;
box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
margin: 20px;
height: 400px;
width: 400px;
}
.note .tools {
background-color: #9ec862;
display: flex;
justify-content: flex-end;
padding: 0.5rem;
}
.note .tools button {
background-color: transparent;
border: none;
color: #fff;
cursor: pointer;
font-size: 1rem;
margin-left: 0.5rem;
}
.note .main {
background-color: #eee;
overflow: hidden;
height: 400px;
width: 100%;
}
.note textarea {
outline: none;
font-family: inherit;
font-size: 1.2rem;
border: none;
height: 400px;
width: 100%;
}
.note .hidden {
display: none;
}
Script.js
const addBtn = document.getElementById(“add”);
const notes = JSON.parse(localStorage.getItem(“notes”));
if (notes) {
notes.forEach((note) => {
addNewNote(note);
});
}
addBtn.addEventListener(“click”, () => {
addNewNote();
});
function addNewNote(text = “”) {
const note = document.createElement(“div”);
note.classList.add(“note”);
note.innerHTML = `
<div class=”notes”>
<div class=”tools”>
<button class=”edit”><i class=”fas fa-edit”></i></button>
<button class=”delete”><i class=”fas fa-trash-alt”></i></button>
</div>
<div class=”main ${text ? “” : “hidden”}”></div>
<textarea class=”${text ? “hidden” : “”}”></textarea>
</div>
`;
const editBtn = note.querySelector(“.edit”);
const deleteBtn = note.querySelector(“.delete”);
const main = note.querySelector(“.main”);
const textArea = note.querySelector(“textarea”);
textArea.value = text;
main.innerHTML = marked(text);
editBtn.addEventListener(“click”, () => {
main.classList.toggle(“hidden”);
textArea.classList.toggle(“hidden”);
});
deleteBtn.addEventListener(“click”, () => {
note.remove();
updateLS();
});
textArea.addEventListener(“input”, (e) => {
const { value } = e.target;
main.innerHTML = marked(value);
updateLS();
});
document.body.appendChild(note);
}
function updateLS() {
const notesText = document.querySelectorAll(“textarea”);
const notes = [];
notesText.forEach((note) => {
notes.push(note.value);
});
localStorage.setItem(“notes”, JSON.stringify(notes));
}
we can see our final screen of project.
5.ToDo-App
Index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8" />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0" />
<title>ToDo App</title>
<link rel=”stylesheet” href=”style.css” />
<script src=”script.js” defer></script>
</head>
<body>
<h1>todos</h1>
<form id=”form”>
<input
type=”text”
id=”input”
class=”input”
placeholder=”Enter your todo”
autocomplete=”off”
/>
<ul class=”todos” id=”todos”></ul>
</form>
<small
>Left click to toggle complete. <br />Right click to delete the
todo.</small
>
</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: #f5f5f5;
color: #444;
display: flex;
align-items: center;
flex-direction: column;
font-family: “Poppins”, sans-serif;
margin: 0;
min-height: 100vh;
}
h1 {
color: rgb(179, 131, 226);
font-size: 10rem;
text-align: center;
opacity: 0.4;
}
form {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
max-width: 100%;
width: 400px;
}
.input {
border: none;
color: #444;
font-size: 2rem;
padding: 1rem 2rem;
display: block;
width: 100%;
}
.input::placeholder {
color: #d5d5d5;
}
.todos {
background-color: #fff;
padding: 0;
margin: 0;
list-style-type: none;
}
.todos li {
border-top: 1px solid #e5e5e5;
cursor: pointer;
font-size: 1.5rem;
padding: 1rem 2rem;
}
.todos li.completed {
color: #b6b6b6;
text-decoration: line-through;
}
small {
color: #b5b5b5;
margin-top: 3rem;
text-align: center;
}
Source Code of Script.js
const form = document.getElementById(“form”);
const input = document.getElementById(“input”);
const todosUL = document.getElementById(“todos”);
const todos = JSON.parse(localStorage.getItem(“todos”));
if (todos) {
todos.forEach((todo) => {
addTodo(todo);
});
}
form.addEventListener(“submit”, (e) => {
e.preventDefault();
addTodo();
});
function addTodo(todo) {
let todoText = input.value;
if (todo) {
todoText = todo.text;
}
if (todoText) {
const todoEl = document.createElement(“li”);
if (todo && todo.completed) {
todoEl.classList.add(“completed”);
}
todoEl.innerText = todoText;
todoEl.addEventListener(“click”, () => {
todoEl.classList.toggle(“completed”);
updateLS();
});
todoEl.addEventListener(“contextmenu”, (e) => {
e.preventDefault();
todoEl.remove();
updateLS();
});
todosUL.appendChild(todoEl);
input.value = “”;
updateLS();
}
}
function updateLS() {
const todosEl = document.querySelectorAll(“li”);
const todos = [];
todosEl.forEach((todoEl) => {
todos.push({
text: todoEl.innerText,
completed: todoEl.classList.contains(“completed”),
});
});
localStorage.setItem(“todos”, JSON.stringify(todos));
}
Todo App final Project Screen.