Scribd
Upload
30 views8 pages

Mini Project Sample Codes

Uploaded by

drpuneethrajkumar007
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
30 views8 pages

Mini Project Sample Codes

Uploaded by

drpuneethrajkumar007
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

1.

To-Do List App

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<input type="text" id="task-input" placeholder="Add a new task...">
<button id="add-task-btn">Add Task</button>
<ul id="task-list"></ul>
</div>
<script src="script.js"></script>
</body>
</html>

CSS

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.container {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
margin: 0 0 20px 0;
}

input[type="text"] {
width: calc(100% - 22px);
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}

button {
padding: 10px 20px;
background-color: #28a745;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}

button:hover {
background-color: #218838;
}

ul {
list-style: none;
padding: 0;
}

li {
padding: 10px;
background-color: #f4f4f4;
border-bottom: 1px solid #ccc;
}

li.completed {
text-decoration: line-through;
color: #888;
}

JavaScript

document.getElementById('add-task-btn').addEventListener('click', addTask);

function addTask() {
const taskInput = document.getElementById('task-input');
const taskText = taskInput.value.trim();

if (taskText === ' ') return;

const taskList = document.getElementById('task-list');


const listItem = document.createElement('li');
listItem.textContent = taskText;

listItem.addEventListener('click', () => {
listItem.classList.toggle('completed');
});

taskList.appendChild(listItem);
taskInput.value = ' ';
}
2. Simple Calculator

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calculator">
<input type="text" id="display" disabled>
<div class="buttons">
<button onclick="clearDisplay()">C</button>
<button onclick="deleteLast()">DEL</button>
<button onclick="appendCharacter('/')">/</button>
<button onclick="appendCharacter('*')">*</button>
<button onclick="appendCharacter('7')">7</button>
<button onclick="appendCharacter('8')">8</button>
<button onclick="appendCharacter('9')">9</button>
<button onclick="appendCharacter('-')">-</button>
<button onclick="appendCharacter('4')">4</button>
<button onclick="appendCharacter('5')">5</button>
<button onclick="appendCharacter('6')">6</button>
<button onclick="appendCharacter('+')">+</button>
<button onclick="appendCharacter('1')">1</button>
<button onclick="appendCharacter('2')">2</button>
<button onclick="appendCharacter('3')">3</button>
<button onclick="calculateResult()">=</button>
<button onclick="appendCharacter('0')" class="zero">0</button>
<button onclick="appendCharacter('.')">.</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

CSS

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.calculator {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 200px;
}

#display {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
font-size: 1.2em;
text-align: right;
}

.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}

button {
padding: 15px;
font-size: 1.2em;
background-color: #f4f4f4;
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
}

button:hover {
background-color: #e2e2e2;
}

button.zero {
grid-column: span 2;
}

JavaScript

function appendCharacter(character) {
const display = document.getElementById('display');
display.value += character;
}

function clearDisplay() {
document.getElementById('display').value = '';
}

function deleteLast() {
const display = document.getElementById('display');
display.value = display.value.slice(0, -1);
}

function calculateResult() {
const display = document.getElementById('display');
try {
display.value = eval(display.value);
} catch {
display.value = 'Error';
}
}
3. Simple Quiz App

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="styles.css">
</head>
<body>
<div class="quiz-container">
<div id="quiz"></div>
<button id="submit">Submit</button>
<div id="results"></div>
</div>
<script src="script.js"></script>
</body>
</html>

CSS

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.quiz-container {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}

button {
padding: 10px 20px;
background-color: #28a745;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
margin-top: 10px;
}

button:hover {
background-color: #218838;
}
JavaScript

(function() {
const quizContainer = document.getElementById('quiz');
const resultsContainer = document.getElementById('results');
const submitButton = document.getElementById('submit');

const myQuestions = [
{
question: "What is 2 + 2?",
answers: {
a: "3",
b: "4",
c: "5"
},
correctAnswer: "b"
},
{
question: "What is 3 + 5?",
answers: {
a: "5",
b: "7",
c: "8"
},
correctAnswer: "c"
},
{
question: "What is 1 + 1?",
answers: {
a: "2",
b: "3",
c: "4"
},
correctAnswer: "a"
}
];

function buildQuiz() {
const output = [];
myQuestions.forEach((currentQuestion, questionNumber) => {
const answers = [];
for(letter in currentQuestion.answers) {
answers.push(
`<label>
<input type="radio" name="question${questionNumber}" value="${letter}">
${letter} :
${currentQuestion.answers[letter]}
</label>`
);
}

output.push(
`<div class="question">${currentQuestion.question}</div>
<div class="answers">${answers.join('')}</div>`
);
});

quizContainer.innerHTML = output.join('');
}

function showResults() {
const answerContainers = quizContainer.querySelectorAll('.answers');
let numCorrect = 0;

myQuestions.forEach((currentQuestion, questionNumber) => {


const answerContainer = answerContainers[questionNumber];
const selector = `input[name=question${questionNumber}]:checked`;
const userAnswer = (answerContainer.querySelector(selector) || {}).value;

if (userAnswer === currentQuestion.correctAnswer) {


numCorrect++;
answerContainers[questionNumber].style.color = 'green';
} else {
answerContainers[questionNumber].style.color = 'red';
}
});

resultsContainer.innerHTML = `${numCorrect} out of ${myQuestions.length}`;


}

buildQuiz();
submitButton.addEventListener('click', showResults);
})();

You might also like