Skip to content

Commit

Permalink
Added content to the website
Browse files Browse the repository at this point in the history 
I have added and modified content on the website.
  • Loading branch information
@MahajanPreksha
MahajanPreksha committed Oct 10, 2023
1 parent f40f0b0 commit dfc0c58
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 66 deletions.
50 changes: 28 additions & 22 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,8 @@
<link rel="stylesheet" href="style.css" />
<script src="index.js"></script>

<title>To Do List</title>
<title>To-Do List</title>
</head>

<body>
<div class="container-xl">
<header class="text-white p-5">
Expand All @@ -33,45 +32,42 @@
alt=""
style="height: 70px; margin-bottom: 20px"
/>
<h1 class="text text-center">To-Do List</h1>
<h1 class="text text-center">SimplyTasked</h1>

<input type="checkbox" id="modeToggle" class="mode-toggle">
<input type="checkbox" id="modeToggle" class="mode-toggle" />
</div>
</div>
</div>
</header>

<div class="container main mt-5">
<h2 class="text-center mb-4">ADD ITEMS</h2>
<h2 class="text-center mb-4">Add your tasks below</h2>

<label
id="lblsuccess"
class="text-success"
style="display: none"
></label>
<label
id="lblerror"
class="text-danger"
style="display: none;"
></label>
<label id="lblerror" class="text-danger" style="display: none"></label>

<form id="addForm" class="main_form">
<input
type="text"
onkeyup="toggleButton(this, 'submit')"
id="item"
placeholder="Write your task here"
type="text"
onkeyup="toggleButton(this, 'submit')"
id="item"
placeholder="Input your task"
/>
<input type="text" id="dueDate" placeholder="Due Date" />
<input type="text" id="dueDate" placeholder="Set your due date" />
<input
type="submit"
class="form_btn"
id="submit"
value="Submit"
disabled
style="background-color: rgb(1,110,225); color: white;"
type="submit"
class="form_btn"
id="submit"
value="Add Task"
disabled

style="background-color: rgb(1,110,225); color: white;"
/>
</form>
</form>

<div class="text-center">
<h3 class="mt-4 text-center" id="heading-tasks">Tasks</h3>
Expand All @@ -82,5 +78,15 @@ <h3 class="mt-4 text-center" id="heading-tasks">Tasks</h3>
</div>
</div>
</div>
<br> <br>
<h2 style="text-align: center; color: white;">Why SimplyTasked?</h2>
<p style="text-align: center; color: white;">Simply, because it is a SIMPLE To-Do List Tool to organize your tasks efficiently.</p>
<br>
<div class='list' style="color: white; text-align: center;">
<p>=> Intuitive task management</p>
<p>=> Seamless due date tracking</p>
<p>=> Beautiful and user-friendly design</p>
</div>

</body>
</html>
4 changes: 2 additions & 2 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,9 @@ let editItem = null;
function addItem(e) {
e.preventDefault();

if (submit.value !== "Submit") {
if (submit.value !== "Add Task") {
editItem.target.parentElement.childNodes[1].textContent = document.getElementById("item").value;
submit.value = "Submit";
submit.value = "Add Task";
document.getElementById("item").value = "";

displaySuccessMessage("Text edited successfully");
Expand Down
103 changes: 61 additions & 42 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,89 +16,98 @@
} */

body {
font-family: 'Young Serif';
font-family: "Young Serif";
font-weight: 400;
margin: 30px;
padding: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
min-height: 100vh;
background: linear-gradient(to right, rgba(126, 64, 246, 1), rgba(80, 139, 252, 1));
background: linear-gradient(
to right,
rgba(126, 64, 246, 1),
rgba(80, 139, 252, 1)
);
/* background-image: url('https://cdn.pixabay.com/photo/2022/07/31/08/03/to-do-7355222_1280.jpg'); */
background-size: cover;
background-position: center;
}


.container-xl {
position: relative;
width: 100%;
flex: 1; /* Take remaining vertical space */
}
.text {
width: 100%;
font-size: 50px;
color: rgb(255, 255, 255);
letter-spacing: 10px;
border-right: 5px solid black;
white-space: nowrap;
animation: typing 3s steps(10), cursor .4s step-end infinite alternate;
overflow: hidden;
animation-fill-mode: forwards;
.text {
width: 100%;
font-size: 50px;
color: rgb(255, 255, 255);
letter-spacing: 10px;
border-right: 5px solid black;
white-space: nowrap;
animation: typing 3s steps(10), cursor 0.4s step-end infinite alternate;
overflow: hidden;
animation-fill-mode: forwards;
}

@keyframes cursor {
50% {
border-color: transparent;
}
@keyframes cursor {
50% {
border-color: transparent;
}
}

@keyframes typing {
from {
width: 0;
}

@keyframes typing {
from {
width: 0;
}
to {
width: 30%;
}

to {
width: 36%;
}
.text-center{
margin-left: auto;
margin-right: auto ;
}
.text-center {
margin-left: auto;
margin-right: auto;
}
/* .container.main.mt-3{
padding-top: 10%;
} */

body.light-mode {
background: linear-gradient(to right, rgba(1,110,225), rgba(80, 139, 252, 1));
background-image: url('https://cdn.pixabay.com/photo/2022/07/31/08/03/to-do-7355222_1280.jpg'); /* Light mode background image */
background: linear-gradient(
to right,
rgba(1, 110, 225),
rgba(80, 139, 252, 1)
);
background-image: url("https://cdn.pixabay.com/photo/2022/07/31/08/03/to-do-7355222_1280.jpg"); /* Light mode background image */
}

body.dark-mode {
background: #0f0000; /* Dark mode background color */
background-image: url('https://cdn.pixabay.com/photo/2022/07/31/08/03/to-do-7355222_1280.jpg'); /* Dark mode background image (same as light mode) */
background-image: url("https://cdn.pixabay.com/photo/2022/07/31/08/03/to-do-7355222_1280.jpg"); /* Dark mode background image (same as light mode) */
color: #fff; /* Text color for dark mode */
}


body.dark-mode::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.9); /* Adjust the alpha (last) value to control darkness */
background-color: rgba(
0,
0,
0,
0.9
); /* Adjust the alpha (last) value to control darkness */
z-index: -1;
}

/* Rest of your CSS styles remain unchanged */

/* Rest of your CSS remains unchanged */


/* body.light-mode {
background: linear-gradient(to right, rgba(126, 64, 246, 1), rgba(80, 139, 252, 1));
} */
Expand Down Expand Up @@ -169,7 +178,11 @@ body.dark-mode::before {
color: #fff;
letter-spacing: 0.11rem;
border: none;
background: linear-gradient(to right, rgba(1,110,225), rgba(80, 139, 252, 1));
background: linear-gradient(
to right,
rgba(1, 110, 225),
rgba(80, 139, 252, 1)
);
padding: 0.6rem 2rem;
border-radius: 5rem;
cursor: pointer;
Expand All @@ -193,12 +206,18 @@ body.dark-mode::before {
font-size: 1.2rem;
}

.main h2, h3 {
width: 12rem;
.list{
display: flex;
flex-direction:row;
justify-content: space-evenly;

}
.main h2,
h3 {
width: 20rem;
margin: auto;
border-bottom: 2px solid #ffffff;
font-weight: 600;

}

@media screen and (max-width: 415px) {
Expand Down Expand Up @@ -255,7 +274,7 @@ input[type="checkbox"]:not(.task-completed) {
outline: none;
border-radius: 2rem;
cursor: pointer;
box-shadow: inset 0 0 5px rgba(1,110,225);
box-shadow: inset 0 0 5px rgba(1, 110, 225);
}

input[type="checkbox"]:not(.task-completed)::before {
Expand Down Expand Up @@ -303,4 +322,4 @@ input[type="checkbox"]:not(.task-completed):checked::before {
padding: 0.5rem 1rem;
width: auto;
}
}
}

0 comments on commit dfc0c58

Please sign in to comment.