Creating Project Using html,CSS,Vanila Java Script .

Jitendra Kumar

11 min readJun 18, 2021

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>

<head>

<title>Count Down TImer</title>

</head>

<body>

<h1>New Years Eve</h1>

</div>

<span>hours</span>

</div>

</div>

<span>seconds</span>

</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>

<head>

</head>

<body>

<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>

<head>

<title>Recipes App</title>

<link

rel=”stylesheet”

href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"

</head>

<body>

</header>

<h3>Favorite Meals</h3>

</div>

</div>

</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: #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 = `

random

? `

<span class=”random”> Random Recipe </span>`

: “”

}

<img

src=”${mealData.strMealThumb}”

alt=”${mealData.strMeal}”

</div>

<h4>${mealData.strMeal}</h4>

</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>

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) => `

)

.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>

<head>

<title>Notes App</title>

<link

rel=”stylesheet”

href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"

</head>

<body>

<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>

</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>

<head>

</head>

<body>

<h1>todos</h1>

<input

type=”text”

id=”input”

class=”input”

placeholder=”Enter your todo”

autocomplete=”off”

</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.

Written by Jitendra Kumar