Skip to content

Modified HTML & CSS file #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Modified HTML & CSS file #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d37b250
Changed the CSS file to beautify and make the site responsive by usin…
hassansamo Oct 2, 2022
b0520bf
Update styles.css
hassansamo Oct 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 15 additions & 11 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,27 +13,31 @@ for (i = 0; i < myNodelist.length; i++) {
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
close[i].onclick = function () {
var div = this.parentElement;
div.style.display = "none";
}
};
}

// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('checked');
}
}, false);
var list = document.querySelector("ul");
list.addEventListener(
"click",
function (ev) {
if (ev.target.tagName === "LI") {
ev.target.classList.toggle("checked");
}
},
false
);

// Create a new list item when clicking on the "Add" button
function newElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
if (inputValue === "") {
alert("You must write something!");
} else {
document.getElementById("myUL").appendChild(li);
Expand All @@ -47,9 +51,9 @@ function newElement() {
li.appendChild(span);

for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
close[i].onclick = function () {
var div = this.parentElement;
div.style.display = "none";
}
};
}
}
39 changes: 24 additions & 15 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,33 @@
<html>
<head>
<title>To Do List</title>
<link rel="stylesheet" href="./styles.css" type="text/css" />
</head>
<body>
<div id="myDIV" class="header">
<h2>My To Do List</h2>
<input type="text" id="myInput" placeholder="Title..." />
<span onclick="newElement()" class="addBtn">Add</span>
</div>
<!DOCTYPE html>
<html lang="en">

<ul id="myUL">
<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="styles.css" type="text/css" />
<title>To Do List</title>
</head>

<body>
<header id="myDIV" class="header">
<h1>My To Do List</h2>
<input type="text" id="myInput" placeholder="Enter the task" />
<button onclick="newElement()" class="addBtn">Add</button>
</header>

<main>
<ul id="myUL" role="list">
<li>Hit the gym</li>
<li class="checked">Pay bills</li>
<li>Meet George</li>
<li>Buy eggs</li>
<li>Read a book</li>
<li>Organize office</li>
</ul>
</main>

<script src="./app.js"></script>
</body>

<script src="./app.js"></script>
</body>
</html>
</html>
201 changes: 123 additions & 78 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,114 +1,159 @@
/* Include the padding and border in an element's total width and height */
/* importing the poppins font */
@import "https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap";

/* CSS Reset */
* {
margin: 0;
padding: 0;
font: inherit;
box-sizing: border-box;
max-width: 100vw;
}

/* Remove margins and padding from the list */
ul {
margin: 0;
padding: 0;
*::before,
*::after {
box-sizing: border-box;
}

/* Style the list items */
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
background: #eee;
font-size: 18px;
transition: 0.2s;
ul[role="list"] {
list-style: none;
}

/* make the list items unselectable */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
html:focus-within {
scroll-behavior: smooth;
}

/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) {
background: #f9f9f9;
html,
body {
height: 100%;
}

/* Darker background-color on hover */
ul li:hover {
background: #ddd;
body {
text-rendering: optimizeSpeed;
line-height: 1.6;
}

/* When clicked on, add a background color and strike out text */
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
/* Disabling every motions for some people */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
*,
*::before,
*::after {
-webkit-animation-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
-webkit-animation-iteration-count: 1 !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* CSS Reset Ends */

/* Add a "checked" mark when clicked on */
ul li.checked::before {
content: "";
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
/* Actual Code starts now */

* {
font-family: "Poppins", sans-serif;
}

/* Style the close button */
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
body {
background-color: #b4fff1;
}

.close:hover {
background-color: #f44336;
color: white;
h1 {
font-size: 3rem;
font-weight: 600;
}

/* Style the header */
/* Styling the header */

.header {
background-color: #63ae35;
padding: 30px 40px;
color: white;
text-align: center;
background: linear-gradient(rgba(49, 198, 212, 0.1), rgb(49, 198, 212));
height: 30vh;
}

/* Clear floats after the header */
.header:after {
content: "";
display: table;
clear: both;
.header h1 {
padding-block: 0.5em;
cursor: context-menu;
letter-spacing: 0.0625em;
}

/* Style the input */
input {
margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
.header input {
border: solid 0.0625em #000;
border-radius: 2em;
width: 50%;
padding: 0.625em;
font-size: 1rem;
outline: none;
}

/* Styling the lists */

ul li {
cursor: pointer;
position: relative;
padding: 0.9375em 0 0.9375em 3.125em;
background: #ff0;
font-size: 1.125rem;
transition: 0.2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

ul li:nth-child(even) {
background: #f9f9a5;
}

/* Style the "Add" button */
ul li:hover {
background: #fff;
}

/* ADD Button Styling */
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
padding: 0.4375em 1.25em;
background: #ff1e1e;
color: #fff;
font-size: 1rem;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
border-radius: 2em;
border: none;
}

.addBtn:hover {
background-color: #bbb;
background: #cd1111;
}

.addBtn:active {
background: #fff;
color: #ff1e1e;
}

/* Utility Classes */

.checked {
background: #ff1e1e !important;
color: #fff;
text-decoration: line-through;
}

.checked::before {
content: "✓";
position: absolute;
inset: 0.625em 0 0 0.625em;
}

.close {
position: absolute;
inset: 0 0 0 auto;
padding: 0.9375em;
}

.close:hover {
background-color: #cd1111;
color: #fff;
}