Strikethrough text list, at mouse click - javascript

I need the strikethrough text with just the mouse click on the text.
List css is outside form line margin
I tried several methods and failed.
I changed the code several times and I couldn't.
I searched a lot on the site, but I didn't find a solution.
I tried to solve it and I didn't find something to solve this problem
$(document).ready(function() {
$('form').on('submit', function(e) {
e.preventDefault();
const listaDeTarefa = $('#lista-de-tarefa').val();
const novoItem = $('<li></li>');
$(`<li>${listaDeTarefa}</li>`).appendTo(novoItem);
$(novoItem).appendTo('ul');
$("li").click(function() {
$(this).addClass("riscado");
});
$('#lista-de-tarefa').val("");
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Roboto, sans-serif;
}
.container {
margin: 100px auto;
max-width: 640px;
width: 100%;
}
form {
margin-top: 40px;
}
input,
textarea,
button {
display: block;
padding: 8px;
margin-bottom: 8px;
width: 100%;
resize: none;
}
button {
background-color: #2e9ccc;
border: none;
text-transform: uppercase;
color: #fff;
font-weight: bold;
font-size: 18px;
font-style: italic;
cursor: pointer;
}
button:hover {
background-color: #18a9e9;
}
input:focus,
textarea:focus {
outline-color: #18a9e9;
}
ul {
text-decoration: line-through;
}
<!DOCTYPE html>
<html lang="pt-br">
<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">
<title>jQuery</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<header>
<h1>Lista de tarefas</h1>
</header>
<form id="formulario">
<input type="text" id="lista-de-tarefa" required /> <button type="submit">Cadastrar</button>
</form>
<div class="lista">
<ul>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="./main.js"></script>
</body>
</html>


There were some bugs, i commented on the spots:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jQuery</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="container">
<header>
<h1>Lista de tarefas</h1>
</header>
<form id="formulario">
<input type="text" id="lista-de-tarefa" required />
<button type="submit">Cadastrar</button>
</form>
<div class="lista">
<ul></ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="./main.js"></script>
<script>
$(document).ready(function () {
//👇remove from the submit, otherwise it will add a new event every time, causing problems
//changed to on to make it target dynamic added elements
$("ul").on("click", "li", function () {
$(this).toggleClass("riscado"); //changed to toggle to be able to remove on click
});
$("form").on("submit", function (e) {
e.preventDefault();
const listaDeTarefa = $("#lista-de-tarefa").val();
$(`<li>${listaDeTarefa}</li>`).appendTo("ul");
$("#lista-de-tarefa").val("");
});
});
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Roboto, sans-serif;
}
.container {
margin: 100px auto;
max-width: 640px;
width: 100%;
}
form {
margin-top: 40px;
}
input,
textarea,
button {
display: block;
padding: 8px;
margin-bottom: 8px;
width: 100%;
resize: none;
}
button {
background-color: #2e9ccc;
border: none;
text-transform: uppercase;
color: #fff;
font-weight: bold;
font-size: 18px;
font-style: italic;
cursor: pointer;
}
button:hover {
background-color: #18a9e9;
}
input:focus,
textarea:focus {
outline-color: #18a9e9;
}
li {
cursor: pointer; /* 👈looks better this cursor where clicking does something */
user-select: none; /* 👈prevent selection for better UX */
}
.riscado { /* 👈 changed ul to the class */
text-decoration: line-through;
}
</style>
</body>
</html>

Related

Bootstrap CSS positioning

The words or text below the logo in the navbar are not moving to the right of the logo (for reference link to the page -> http://127.0.0.1:5500/index.html).
Additionally the logo is not shifting to its left - it's happening in basically all the navbar codes. I'm trying to do this using CSS bootstrap. Any explanation would be very helpful since I have recently started learning bootstrap CSS.
body {
font-size: 16px;
color: #fff;
background-color: #F5EEE0;
font-family: 'Oxygen', sans-serif;
}
/** HEADER **/
#header-nav {
background-color: #AE7F60;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('../images/coffee-shop-logo_large.png') no-repeat;
width: 150px;
height: 150px;
margin: 10px 15px 10px 0;
}
.navbar-brand {
padding-top: 25px;
}
.navbar-brand h1{ /*Resturant name */
object-position: right;
font-family: 'Lora', sans-serif;
color: #B35840;
font-size: 1.5cm;
text-transform: uppercase;
font-weight: bold;
text-shadow: 1px 1px 1px #222;
margin-top: 0;
margin-bottom: 0;
line-height: .75;
}
.navbar-brand a:hover, .navbar-brand a:focus{
text-decoration: none;
}
<!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">
<title>coffee cafe</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="pull-left visble-md visible-lg ">
<div id="logo-img" alt="Logo image"></div>
</a>
<div class="navar-brand">
<h1>Coffee Place</h1>
</div>
</div>
</nav>
</header>
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

You need to add .d-flex in div.navbar-header.
also add a little margin in you h1 to make it vertically align with the logo or you can also you vertical-align property.
I've also closed the unclosed container div.
body {
font-size: 16px;
color: #fff;
background-color: #F5EEE0;
font-family: 'Oxygen', sans-serif;
}
/** HEADER **/
#header-nav {
background-color: #AE7F60;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('https://www.svgrepo.com/show/15418/coffee-cup.svg') no-repeat;
width: 50px;
height: 50px;
margin: 10px 15px 10px 0;
}
.navbar-brand {
padding-top: 25px;
}
.navbar-brand h1 {
/*Resturant name */
object-position: right;
font-family: 'Lora', sans-serif;
color: #B35840;
font-size: 1.5cm;
text-transform: uppercase;
font-weight: bold;
text-shadow: 1px 1px 1px #222;
margin-top: 0;
margin-bottom: 0;
line-height: .75;
}
.navbar-brand a:hover,
.navbar-brand a:focus {
text-decoration: none;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="d-flex navbar-header">
<a href="index.html" class="pull-left visble-md visible-lg">
<div id="logo-img" alt="Logo image"></div>
</a>
<div class="navar-brand">
<h1 class="mt-3">Coffee Place</h1>
</div>
</div>
</div>
</nav>
</header>

How can I format the image position in CSS Page without image element

I'm new to CSS and HTML and I don't have enough knowledge to do my task!
Problem:
I don't want any space between the mountain image and the place where my blue layer is ending, Any solution?
NOTE Don't use the positioning element or any else CSS function, change this code only!
body{
margin: 0;
text-align: center;
font-family: 'Merriweather',serif;
}
h1{
margin-top: 0%;
font-family: 'Sacramento',cursive;
font-size: 5.625rem;
}
h2{
font-family: 'Montserrat', sans-serif;
font-size: 2.5rem;
}
h3{
font-family: 'Montserrat',sans-serif;
}
.top-container{
background-color: #E4F9F5;
position: relative;
padding: 100px;
}
.mountain{
padding: 0%;
}
.middle-container{
/* background-color: red;
width: 200px;
height: 200px; */
}
.bottom-container{
/* background-color: blue;
width: 200px;
height: 200px; */
}
.problem{
text-decoration: underline;
}
.top-cloud{
position: absolute;
right: 300px;
top: 50px;
}
.bottom-cloud{
position: absolute;
/* left: 300px;
bottom: 300px; */
}
<!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">
<title>Deepak Kumar</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="icon" href="./assests/icon.jpg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#700;800;900&family=Merriweather:ital,wght#0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Sacramento&display=swap" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img class="top-cloud" src="./assests/cloud.png" alt="cloud-image">
<h1>I'm Deepak.</h1>
<h2 class="description">a <span class="problem">pro</span>grammer.</h2>
<img class="bottom-cloud" src="./assests/cloud.png" alt="cloud-image">
<img class="mountain" src="./assests/mountain.png" alt="mountain-image">
</div>
</body>
</html>
I didn't add the whole code, because it was lengthy.
This piece contains enough code for you to understand it.

you can remove padding in your .top-container .
I hope this helps

The padding for top-container is keeping the mountain image from having no space at the bottom of the page. I've slightly altered the padding property to have zero padding on the bottom.
body{
margin: 0;
text-align: center;
font-family: 'Merriweather',serif;
}
h1{
margin-top: 0%;
font-family: 'Sacramento',cursive;
font-size: 5.625rem;
}
h2{
font-family: 'Montserrat', sans-serif;
font-size: 2.5rem;
}
h3{
font-family: 'Montserrat',sans-serif;
}
.top-container{
background-color: #E4F9F5;
position: relative;
padding: 100px 100px 0 100px;;
}
.mountain{
padding: 0%;
}
.middle-container{
/* background-color: red;
width: 200px;
height: 200px; */
}
.bottom-container{
/* background-color: blue;
width: 200px;
height: 200px; */
}
.problem{
text-decoration: underline;
}
.top-cloud{
position: absolute;
right: 300px;
top: 50px;
}
.bottom-cloud{
position: absolute;
/* left: 300px;
bottom: 300px; */
}
<!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">
<title>Deepak Kumar</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="icon" href="./assests/icon.jpg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#700;800;900&family=Merriweather:ital,wght#0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Sacramento&display=swap" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img class="top-cloud" src="./assests/cloud.png" alt="cloud-image">
<h1>I'm Deepak.</h1>
<h2 class="description">a <span class="problem">pro</span>grammer.</h2>
<img class="bottom-cloud" src="./assests/cloud.png" alt="cloud-image">
<img class="mountain" src="./assests/mountain.png" alt="mountain-image">
</div>
</body>
</html>

html cannot display when render

I expect a custom navbar where I set nav background to black and set a tag to display inline-block and padding 10. But, HTML do not render anything when I add css. Though, It is rendering when I remove CSS. Please, can someone explain why and how can to make it work?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.topvav {
width: 100%;
background: #000;
border: 1px solid #000;
}
a {
display: inline-block;
text-decoration: none;
color: white;
padding: 10px;
}
a:hover {
display: inline-block;
/* float: left; */
background: white;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
</div>
</body>
</html>

Typo: In the CSS file replace .topvav with .topnav

How to stop li tag from stepping down after content addition?

I've been working on my portfolio site and I've been trying to use li tags to display the different projects. One problem that I noticed is that everytime I add content to the li, it steps down and refuses to stay inline like I want. In the example below, I added "pp" and the first li stepped down. Once the content is removed from the li, it goes back in its original line. Any help would be greatly appreciated.
.works ul.project_ul {
padding: 0;
text-align: center;
margin-top: 40px;
margin-bottom: 50px;
}
.works ul.project_ul li {
width: 25.3%;
height: 230px;
display: inline-block;
list-style: none;
margin: 1%;
border-radius: 12px;
}
.works ul.project_ul li:nth-child(1) {
border: 1px solid #202124;
}
.works ul.project_ul li:nth-child(2) {
background-color: red;
}
.works ul.project_ul li:nth-child(3) {
background-color: #08171f;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="works">
<ul class="project_ul">
<li>
pp
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</body>
</html>

Just add the rule vertical-align: top; for your li selector
.works ul.project_ul {
padding: 0;
text-align: center;
margin-top: 40px;
margin-bottom: 50px;
}
.works ul.project_ul li {
width: 25.3%;
height: 230px;
display: inline-block;
list-style: none;
margin: 1%;
border-radius: 12px;
box-sizing: border-box;
vertical-align: top;
}
.works ul.project_ul li:nth-child(1) {
border: 1px solid #202124;
}
.works ul.project_ul li:nth-child(2) {
background-color: red;
}
.works ul.project_ul li:nth-child(3) {
background-color: #08171f;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="works">
<ul class="project_ul">
<li>
pp
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</body>
</html>

hide popup when clicking outside

Here is a example of a javascript popup:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup
How would you modify this so that the popup disappears if you click anywhere outside the popup? I am using html5 and javascript within an epub3 document.

$('#trigger').bind('click touch', function(){
$('#tooltip').show();
});
$(document).bind('click touch', function(event) {
if (!$(event.target).parents().addBack().is('#trigger')) {
$('#tooltip').hide();
}
});
// Stop propagation to prevent hiding "#tooltip" when clicking on it
$('#tooltip').bind('click touch', function(event) {
event.stopPropagation();
});
* {
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
}
body {
font-size: 14px;
line-height: 1.5;
font-family: Helvetica, Arial, sans-serif;
color: #000;
}
#container {
position: relative;
min-height: 100%;
width: 100%;
max-width: 960px;
margin: 0 auto;
zoom: 1;
}
#trigger {
width: 200px;
height: 200px;
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
font-size: 22px;
line-height: 200px;
color: #fff;
background: #ccc;
cursor: pointer;
}
#trigger:hover {
background: #0A9E01;
}
#tooltip {
display: none;
position: absolute;
left: 10px;
top: 10px;
width: 250px;
padding: 20px;
font-size: 18px;
color: #fff;
background: #222222;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<!--Meta Tags-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="author" content="mihai vaduva" />
<meta name="email" content="" />
<meta name="copyright" content="" />
<meta name="distribution" content="global" />
<meta name="rating" content="general" />
<meta name="robots" content="noindex, nofollow" />
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!--Title-->
<title>Antimath - Hide if click outside</title>
</head>
<body>
<!--container-->
<div id="container">
<noscript>
<p class="warning">You have JavaScript disabled or are viewing the site on a device that does no support JavaScript.Some features may not work properly.</p>
</noscript>
<div id="trigger">
Click Me !
</div>
<div id="tooltip">
Now click anywhere to hide it.
</div>
</div>
<!--/container-->
</body>
</html>

Categories