I am currently studying front - end web development and I am at the stage where I am building projects for my portfolio.
I am currently working on a TO DO list website, I have coded most of the functionality however I am struggling with the CSS aspect.
If you can give a newbie developer some feedback on the code below I would really appreciate it.
So what I am asking for today;
I want to position an icon over the border of the text just like this:
I want to achieve this
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<title>Your To Do List</title>
</head>
<body>
<!--ICON LINK
<i id="addItem" class="fas fa-plus-circle"></i>
-->
<h1>Your todo list</h1>
<div id="item-list">
<label class="container">
<input type="checkbox" checked="checked">
<span class="checkMark"></span>
</label>
</div>
<script src="js/script.js"></script>
</body>
</html>
My JS:
var toDoItems = [];
var userInput;
var checkBox;
document.getElementById("addItem").onclick = function (){
userInput = prompt("Enter your Todo: ")
toDoItems.push(userInput);
stylePara();
document.getElementById("item-list").insertAdjacentHTML('beforeend', stylePara());
}
function stylePara(){
var html = '';
html += '<label class="container">';
html += '<input type="checkBox">';
html += '<span class="checkMark"></span>';
html += '<span class="checkLabel">' + userInput + '</span>';
html += '</label>';
return html;
}
My CSS:
#import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,700');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: white;
}
h1{
text-align: center;
font-family: 'Roboto Slab', serif;
margin-top: 50px;
color: black;
margin-bottom: 35px;
text-decoration: underline;
}
h4{
text-align: center;
margin-top: 20px;
}
item-list {
width: 100%;
margin-left: 50%;
background-color: red;
display: inline-block;
}
.container {
width: 100%;
margin-left: 40%;
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container input{
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkMark {
position: absolute;
top: -5px;
left: 0;
height: 35px;
width: 35px;
background-color: black;
}
.container input:checked~.checkMark{
background-color: darkgreen;
}
.checkLabel {
background: white;
margin-left: 20px;
color: white;
padding: 5px 20pxl
}
.container input:checked~.checkLabel{
text-decoration: line-through;
background: green;
color: blue;
padding: 5px 20px;
}
.checkMark:after{
content: "";
position: absolute;
display: none;
}
.container input:checked~.checkMark:after{
display: block;
top: 10px;
left: 15px;
}
.container .checkMark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
You can use absolute positioning:
.your-class {
position: absolute;
top: 10px; /* space from top */
right: 10px; /* space from right */
}
For your puropses the top and right are:
Remember to give parent element:
.position:relative;
Then your absolute positioning will be to the container that has position:relative not to the whole page. Example code: https://jsfiddle.net/2vaphyq3/12/
Edit:
But maybe cleaner way will be to use pseudo element like :after
Something in this manner should work. Added to your existing code.
#import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,700');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: white;
}
h1{
text-align: left;
font-family: 'Roboto Slab', serif;
margin-top: 50px;
padding: 10px;
color: black;
margin-bottom: 35px;
}
h4{
text-align: center;
margin-top: 20px;
}
item-list {
width: 100%;
margin-left: 50%;
background-color: red;
display: inline-block;
}
.container {
width: 100%;
margin-left: 40%;
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container input{
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkMark {
position: absolute;
top: -5px;
left: 0;
height: 35px;
width: 35px;
background-color: black;
}
.container input:checked~.checkMark{
background-color: darkgreen;
}
.checkLabel {
background: white;
margin-left: 20px;
color: white;
padding: 5px 20pxl
}
.container input:checked~.checkLabel{
text-decoration: line-through;
background: green;
color: blue;
padding: 5px 20px;
}
.checkMark:after{
content: "";
position: absolute;
display: none;
}
.container input:checked~.checkMark:after{
display: block;
top: 10px;
left: 15px;
}
.container .checkMark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/*Added This*/
.wholeItem {
width: 400px;
height: auto;
}
h1.todoL{
position: relative;
background: #c7c9d6;
border-bottom: 1px solid #999;
}
.todoI {
position: absolute;
right: 25%;
bottom: -25px;
width: 50px;
height: 50px;
background: #da5048;
border-radius: 50%;
color: #fff;
line-height: 50px;
text-align: center;
font-weight: light;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<title>Your To Do List</title>
</head>
<body>
<!--ICON LINK
<i id="addItem" class="fas fa-plus-circle"></i>
-->
<div class="wholeItem">
<h1 class='todoL'>Your todo list<div class="todoI">+</div></h1>
<div id="item-list">
<label class="container">
<input type="checkbox" checked="checked">
<span class="checkMark"></span>
</label>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
Related
This is to do list project, but I don't know why this isn't working.
Can anyone help me? I have checked this several times, and all files are good. Also, CSS code is not mine, it's copied.
Of course, this project is not finished, but I'm testing this now (I'm beginner).
I got this error when I click on span:
script.js:4 Uncaught ReferenceError: li is not defined
at newTask (script.js:4:2)
at HTMLSpanElement.onclick (index.html:14:46)
function newTask() {
let task = document.createElement('li');
let inputText = document.querySelector('#inputText').value;
li.appendChild(inputText)
}
body {
margin: 0;
min-width: 250px;
}
* {
box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
}
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
list-style-type: none;
background: #eee;
font-size: 18px;
transition: 0.2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ul li:nth-child(odd) {
background: #f9f9f9;
}
ul li:hover {
background: #ddd;
}
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
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;
}
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
.close:hover {
background-color: #f44336;
color: white;
}
.header {
background-color: blue;
padding: 30px 40px;
color: white;
text-align: center;
}
/* Clear floats after the header */
.header:after {
content: "";
display: table;
clear: both;
}
/* Style the input */
input {
margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
}
/* Style the "Add" button */
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
}
.addBtn:hover {
background-color: #bbb;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> To Do List </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="task-manager" class="header">
<h2 style="margin:5px"> Lista zadataka </h2>
<input type="text" id="inputText" placeholder=" Naziv zadatka ">
<span onclick="newTask()" class="addBtn">Dodaj</span>
</div>
<ul id="list">
</ul>
<script src="script.js"></script>
</body>
</html>
First, you need to get the ul element which has list id, also you need to set the value of the li element after create it with input value.
Also, If wanted to reset the input value after adding the task
const input = document.querySelector('#inputText')
function newTask() {
let task = document.createElement('li');
let inputText = input.value;
task.textContent = inputText;
input.value = ''
const list = document.getElementById('list');
list.appendChild(task)
}
body {
margin: 0;
min-width: 250px;
}
* {
box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
}
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
list-style-type: none;
background: #eee;
font-size: 18px;
transition: 0.2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ul li:nth-child(odd) {
background: #f9f9f9;
}
ul li:hover {
background: #ddd;
}
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
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;
}
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
.close:hover {
background-color: #f44336;
color: white;
}
.header {
background-color: blue;
padding: 30px 40px;
color: white;
text-align: center;
}
/* Clear floats after the header */
.header:after {
content: "";
display: table;
clear: both;
}
/* Style the input */
input {
margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
}
/* Style the "Add" button */
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
}
.addBtn:hover {
background-color: #bbb;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> To Do List </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="task-manager" class="header">
<h2 style="margin:5px"> Lista zadataka </h2>
<input type="text" id="inputText" placeholder=" Naziv zadatka ">
<span onclick="newTask()" class="addBtn">Dodaj</span>
</div>
<ul id="list">
</ul>
<script src="script.js"></script>
</body>
</html>
I am trying to add this button On Codepen to my chrome extension, my HTML and CSS work perfectly fine. The JS is popup.js and is on the same level as the rest of the code, but it doesn't seem to be linked to the popup.html. Manifest is in the image . I did convert the SCSS to CSS using an online converter. I need help linking the js to popup.html so the button works as it does in Codepen.
Html, CSS & JS:
$('button.cooldown').click(function(){
var btn = $(this);
btn.prop('disabled', true);
setTimeout(function(){
btn.prop('disabled', false);
},15000);
});
body {
background-image: linear-gradient( 72.5deg, rgba(0,175,255,1) 27.9%, rgba(0,224,254,1) 84.2% );
width: 250px;
height: 400px;
}
#header {
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
background-color: #393e46;
color: white;
font-size: 15px;
border-radius: 10px;
}
.button {
background-color: rgb(80, 220, 100);
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button:hover {
background-color: #393e46;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button_cancel {
background-color: #f44444;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button_cancel:hover {
background-color: #393e46;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
/* The container */
.container {
display: block;
position: relative;
padding-left: 10px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
font-size: 18px;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=file], select {
padding-left: 15%;
}
.form-item {
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
}
.wallpaper-title {
display: block;
padding-bottom: 3px;
font-size: 11px;
}
button.cooldown {
background: #336699;
min-height: 48px;
min-width: 144px;
position: relative;
margin: 5px;
border-radius: 5px;
border: 0;
color: #fff;
padding: 0 15px;
font-size: 16px;
outline: none;
overflow: hidden;
cursor: pointer;
}
button.cooldown:active, button.cooldown:focus {
outline: none;
}
button.cooldown:disabled {
background: #264d73;
color: #d9d9d9;
cursor: default;
box-shadow: inset 3px 3px 10px 0px rgba(0, 0, 0, 0.2);
}
button.cooldown:disabled:after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
left: 0;
height: 5px;
background: #1a334d;
animation: cooldown 15s linear;
}
#keyframes cooldown {
0% {
width: 100%;
}
100% {
width: 0;
}
}
/* layout stuff */
section {
text-align: center;
margin-top: 100px;
color: #333;
}
p {
font-size: 12px;
}
<!doctype html>
<html>
<head>
<title>Home+</title>
<link rel="stylesheet" type="text/css" href="popup.css">
<script src="popup.js"></script>
<div id="header">
<h2>Home+</h2>
<h6>Settings</h6>
</div>
</head>
<body>
<!-- The settings pane, expand at will -->
<div class="tab-pane" id="settings">
<form class="settings">
<div class="form-item">
<label for="zip">Zip Code: </label>
<div class="form-item">
<input id="zip" name="zip" type="text" pattern="[0-9]*">
</div>
</div>
<div class="form-item">
<label class="container">Show Weather
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="form-item">
<button class="cooldown">Refresh Weather</button>
</div>
<div class="form-item">
<label for="hompagebg" class="wallpaper-title">Upload Wallpaper</label>
<center>
<input type="file" id="hompage-background" name="hompagebg" accept="image/png, image/jpeg" size="20">
</center>
</div>
<div class="form-item">
<button type="button" class="button">Save</button>
<button type="button" class="button_cancel">Cancel</button>
</div>
</form>
</div>
</div>
</body>
</html>
I needed to download jquery and link it to popup.html using and my JS code needed to be placed inside
$(document).ready(function () {
//code goes here
});
I've got an overlay search box (check code). The search box got a placeholder "Sök", let's say the user writes something in the textbox but then exits (presses the x in the right upper corner). Then I want the text that the user wrote to be removed and the placeholder reset, so whenever the user enters the search box again the text is removed and the placeholder is back. How do I create this event?
Code:
body{
background: white;
font-family: 'Montserrat', sans-serif;
padding-bottom: -1px;
}
span{
display: inline-block;
}
.backgroundlogo{
margin-top:-1400px;
z-index: -1;
position: relative;
width: 100%;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background: none;
}
* {
margin:0;
padding:0;
}
header ::after {
content: "";
display: table;
clear: both;
}
nav{
float: right;
padding-right: 230px;
}
nav li{
display: inline-block;
padding-left: 45px;
padding-top: 20px;
padding-bottom: 20px;
}
nav ul{
list-style: none;
display: inline-block;
padding-top: 25px;
}
nav a {
font-size: 12px;
color: black;
font-weight: 600;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
nav a:hover{
color: red;
}
nav li:hover{
}
.fa-bars{
color: black;
font-size: 14px;
padding-left: 15px;
}
.fa-bars:hover{
color: red;
cursor: pointer;
}
.wrapper{
position: relative;
height: 100%;
width: 100%;
}
.backgroundlogo{
}
.bild1{
height: 350px;
width: 600px;
margin-top: 100px;
margin-left: 80px;
position: absolute;
z-index: 4;
background-image: url('Img/KBA.jpg');
background-position: 10% 30% ;
background-size: 180%;
}
.bild2{
height: 350px;
width: 600px;
margin-top: 140px;
margin-left: 120px;
z-index: 3;
position:absolute;
background-color: #3D6BB8;
}
.entrytext{
float: right;
margin-right: 90px;
margin-top: 175px;
clear: both;
}
.entrytext>h1{
font-weight: 800;
font-style: normal;
font-size: 54px;
}
.entrytext>button{
border: none;
display: inline-block;
background-color: #38b272;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
box-shadow: 20px 15px black;
}
.entrytext>button:hover{
border: none;
display: inline-block;
background-color: #c12147;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
}
button:focus {outline:0;}
.fa-angle-right{
font-size: 20px;
padding-left: 30px;
}
.entrytext>h2{
font-size: 14px;
font-weight: 600;
margin-top: 20px;
}
.citygalleria{
color: #CC2244;
}
.brand{
height: 110px;
width: 750px;
margin: 600px auto;
background-color: #CFCFCF;
clear: both;
z-index: 11;
}
.openBtn {
background: #f1f1f1;
border: none;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
}
.openBtn:hover {
background: #bbb;
}
.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 10;
top: 0;
left: 0;
background-color: white;
background-color: rgba(255,255,255, 0.8);
}
.overlay-content {
position: relative;
top: 20%;
width: 80%;
text-align: center;
margin-top: 30px;
margin: auto;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
cursor: pointer;
color: black;
}
.overlay .closebtn:hover {
color: #ccc;
}
.overlay input[type=text] {
padding: 15px;
font-size: 50px;
font-weight: bold;
border: none;
background:none;
margin: 0 auto;
text-decoration: none;
border-bottom: 6px solid black;
border-bottom-left-radius: 5px;
color:black;
text-align:center;
width: 100%;
}
input::placeholder {
color: black;
}
.overlay input[type=text]:hover {
background: none;
}
.overlay button {
float: left;
width: 20%;
padding: 15px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
input:focus {outline:0;}
.overlay button:hover {
background: #bbb;
}
.type1{
width: 1700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/908c2e5c96.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<title>Kungsmässan — Måste upplevas!</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Butiker</li>
<li>Resturang & Café</li>
<li>Utbyggnad</li>
<li>Öppetider</li>
<div id="myOverlay" class="overlay">
<span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
<div class="overlay-content">
<form action="/action_page.php">
<input class="type1" id="type2" onblur="this.placeholder = 'Sök'" onfocus="this.placeholder = ''" type="text" placeholder="Sök" name="search">
</form>
</div>
</div>
<i onclick="openSearch()" id="openBtn" class="fas fa-search"></i>
<script>
function openSearch() {
document.getElementById("myOverlay").style.display = "block";
}
document.addEventListener('keydown',function(){document.getElementById('type2').focus();});
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}
</script>
<i class="fas fa-bars"></i>
</ul>
</nav>
</div>
</header>
<div class="bild1">
</div>
<div class="bild2">
</div>
<div class="entrytext">
<h1>Sveriges bästa <br/> <span class="citygalleria">citygalleria.</span> Mitt <br/> i Kungsbacka.</h1>
<h2>35 000 KVADRATMETER OCH ÖVER 100 AFFÄRER!</h2>
<button type="LÄS MER" name="button ">LÄS MER<i class="fas fa-angle-right"></i></button>
</div>
<div class="brand">
</div>
<span>
<img class="backgroundlogo" src="Img/bg.png" alt="">
</span>
</body>
</html>
If you set the value of the input back to nothing when the closing button is clicked, the placeholder should appear again:
const button = document.querySelector( 'button' );
const input = document.querySelector( 'input' );
button.addEventListener( 'click', event => {
input.value = '';
});
<input type="text" placeholder="Sok">
<button>Close</button>
Try with setValue('') method to reset any element value.
I want to create a Modal Popup effect every time I click on "Login" on my index page.
The only thing is, I have created separate HTML/CSS pages (for example, index.html/css, login.html/css, etc..).
I'm confused, how to use JavaScript to make this happen.
As I have separate pages. I know how to apply modal popup effect, on single html/css page using JavaScript.
But I don't know how to make this happen if I'm using several different pages. My code looks messed up a bit. All my pages are linked to each other properly but without any effect.
Below is my index.html code and login.html code along with the css code.
index.html code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<link href="login.html">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<script src="https://use.fontawesome.com/d1341f9b7a.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>MyWeb</title>
</head>
<body>
<div class="header">
<h1> <i class="fas fa-music"></i>Spotify</h1>
<div class="searchbox">
<input class="search-txt" type="text" name="" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
</div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<div class="siderbarMenuInner">
<li> <div class="show-login-button"> <i class="fas fa-sign-in-alt"></i> login</div></li>
<li> <i class="fas fa-home"></i> Home </li>
<li> <i class="fas fa-search"></i> browse </li>
<li> <i class="fab fa-itunes-note"></i> My Playlist</li>
<li> About </li>
</ul>
<div class="Instagram">
<i class="fab fa-instagram"></i>
</div>
<div class="Twitter">
<i class="fab fa-twitter"></i>
</div>
<div class="Facebook">
<i class="fab fa-facebook-f"></i>
</div>
</div>
</body>
</html>
index.css code:-
body {
overflow-x: hidden;
height: 100%;
background-color: white;
}
body {
font-family: tahoma;
margin: 0;
padding: 0;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: #fc466b;
position: fixed;
height: 50px !important;
overflow: hidden;
z-index: 10;
}
h1 {
margin: 1px;
top: 13%;
color: #2f3640;
text-decoration: none;
position: absolute;
left: 3%;
font-family: 'Times New Roman', Times, serif;
font-weight: bold;
cursor: pointer;
transition: 0.3s;
}
h1:hover {
color: white;
}
h1 i {
font-size: 20px;
letter-spacing: 8px;
}
.searchbox {
position: absolute;
border-radius: 40px;
right: 2%;
background: #2f3640;
height: 40px;
top: 6%;
padding: 0.1%;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 18px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
.search-btn {
color: #fc466b;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
align-items: center;
justify-content: center;
transition: 0.4s;
text-decoration: none;
}
.searchbox:hover>.search-txt {
width: 500px;
padding: 0 6px;
}
.searchbox:hover>.search-btn {
background: white;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 50px;
}
.mainInner {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
#sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 50px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background: linear-gradient(180deg, #fc466b, #3f5efb);
}
.siderbarMenuInner {
margin: 0;
padding: 0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.siderbarMenuInner li {
list-style: none;
color: #2f3640;
font-size: 15px;
text-transform: uppercase;
font-weight: bold;
padding: 30px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
text-decoration: none;
text-align: center;
transition: 0.4s;
}
.siderbarMenuInner li:hover {
color: white;
}
.siderbarMenuInner li span {
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
text-decoration: none !important;
color: inherit;
}
.sidebarMenuInner li a {
color: white;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
}
input[type="checkbox"]:checked~#sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: white;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
a {
text-decoration: none !important;
color: inherit;
}
.Instagram {
top: 90%;
left: 16%;
color: azure;
font-size: 20px;
position: absolute;
letter-spacing: 25px;
transition: 0.3s;
cursor: pointer;
}
.Instagram:hover {
color: black;
}
.Twitter {
text-align: center;
top: 90%;
left: 45%;
color: azure;
font-size: 20px;
position: absolute;
letter-spacing: 25px;
transition: 0.3s;
cursor: pointer;
}
.Twitter:hover {
color: black;
}
.Facebook {
text-align: center;
top: 90%;
left: 75%;
color: azure;
font-size: 20px;
position: absolute;
letter-spacing: 25px;
transition: 0.3s;
cursor: pointer;
}
.Facebook:hover {
color: black;
}
login.html code:-
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Animated Login Form</title>
<link rel="stylesheet" href="login.css">
<link rel="" href="index.html">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
>
<div class="login-form">
<form class="login-box" action="index.html" method="post">
<h1>Login</h1>
<input class="txtb" type="text" name="" placeholder="Username">
<input class="txtb" type="password" name="" placeholder="Password">
<input class="login-btn" type="submit" name="" value="Login">
</form>
</div>
</body>
</html>
login.css code:-
* {
font-family: "Monteserrat", sans-serif;
}
body {
margin: 0;
padding: 0;
}
.login-form{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: linear-gradient(90deg, #fc466b, #3f5efb);
transition: 0.4s;
}
.login-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
}
.login-box h1 {
font-weight: 400;
text-transform: uppercase;
margin-top: 0;
}
.txtb {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #1c2830;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.txtb:focus {
width: 280px;
border-color: #000000;
}
.login-btn {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #000000;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.login-btn:hover {
background: #000000;
}
JS code for modal on single HTML page:-
// GetElements
const modal = document.querySelector('#modal');
const modal_btn = document.querySelector('#modal-btn');
const close_btn = document.querySelector('.close');
//Event_Listener
modal_Btn.addEventListener('click', openModal);
close_Btn.addEventListener('click', closeModal);
window.addEventListener('click', outsideClick);
//Open & Close
function openModal() {
modal.style.display = 'block';
}
function closeModal() {
modal.style.display = 'none';
}
If I'm understand correctly, you are trying to use a separate HTML file as a modal, right? If that correct, try to watch this answer :
Open Modal (bootstrap) from other html-file
GetAjax gets the remote file and load_modal is just a shorthand function that calls getajax and loads the modal.
function getAjax(url, success) {
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.open('GET', url);
xhr.onreadystatechange = function() {
if (xhr.readyState>3 && xhr.status==200) success(xhr.responseText);
};
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.send();
return xhr;
}
function load_modal(url){
getAjax(url, function(data){
modal.innerHTML = data;
modal.style.display = 'block';
});
}
var schakkel = document.getElementById('schakkelaar').style.transform;
if (90 < schakkel && schakkel < 140){
console.log('it workssss');
}
#import url('https://fonts.googleapis.com/css?family=Raleway:400,700');
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
background-color: #F7F7F7;
}
#border-buiten-tekst1 {
font-family: 'Raleway', sans-serif;
margin-left: 32.5vw;
margin-top: -3vw;
border: solid;
position: absolute;
}
#flex-container-pijlen {
position: absolute;
display: flex;
margin-left: 30vw;
margin-top: -3.2vw;
}
#pijl-links {
width: 3.5vw;
}
#pijl-rechts {
width: 3.5vw;
margin-left: 15vw;
margin-left: 22vw;
}
#gloeilamp {
margin-left: 65vw;
max-width: 5vw;
max-height: 5vw;
position: absolute;
}
#schakkelaar2 {
margin-left: 55.7vw;
margin-top: -20vw;
position: relative;
transform: rotate(37deg);
}
#schakkelaar {
margin-left: 35.2vw;
margin-top: 29.35vw;
position: relative;
transform: rotate(37deg);
}
#border-buiten-tekst2 {
font-family: 'Raleway', sans-serif;
margin-left: 34.4vw;
margin-top: 4vw;
padding-top: .2vw;
text-align: center;
width: 20vw;
border-left: solid;
border-right: solid;
border-bottom: solid;
}
.menu-area li a{
text-decoration: none;
color: #F7F7F7;
letter-spacing: 1px;
text-transform: uppercase;
display: block;
padding: 0px 25px;
font-size: 14px;
line-height: 30px;
position: relative;
z-index: 1;
}
.menu-area li{
list-style: none;
display: inline-block;
}
.custom-padding{
padding-top: 20%;
}
nav{
position: relative;
padding: 10px 20px 10px 10px;
text-align: center;
z-index: 1;
background: #8CC63E;
margin: 0 auto;
width: calc(100% - 60px);
margin-top: 30px;
}
#border-spel {
background-image: url("../img/speelveld.png");
position: absolute;
margin-left: calc(42vw - 600px);
margin-top: .5vw;
width:1320px !important;
height: 36vw;
}
#border-buiten {
margin-left: calc( 30vw - 450px );
margin-top: 4.4vw;
width: 1650px;
height: 41vw;
background-color: #8CC63E;
}
.logo{
width: 20vh;
float: left;
margin-top: -30px;
margin-left: 10px;
}
.menu-area li a:hover{
background: #432064;
color: #F7F7F7;
}
nav:before{
position: absolute;
content: '';
left: 0;
top: 100%;
border-top:10px solid #333333;
border-right:10px solid #333333;
border-left: 10px solid transparent;
border-bottom:10px solid transparent;
}
nav:after{
position: absolute;
content: '';
left: 0;
top: 100%;
border-top:10px solid #333333;
border-right:10px solid #333333;
border-left: 10px solid transparent;
border-bottom:10px solid transparent;
}
.menu-area h2{
color:#F7F7F7;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin-left: 50px;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #432064;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<script src="js/js.js"></script>
<meta charset="UTF-8">
<meta name="description" content="Stagair local spot">
<meta name="keywords" content="Technolab, Stagairs, Workshops">
<meta name="author" content="Ravi Breugom, Alexander Wallaard, Natascha van Baal">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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 href="CSS/style.css" rel="stylesheet" type="text/css">
<title>Technolab Stagairspot</title>
</head>
<body data-gr-c-s-loaded="true">
<header>
<div class="custom=padding">
<nav>
<a href="../../beveiligd.php"><img class="logo"
src="../../img/WhatsApp%20Image%202018-09-20%20at%2010.44.00.jpeg"
alt="Logo"></a>
<ul class="menu-area">
<li>Workshops</li>
<li>Agenda</li>
<li>Leerdoelen</li>
<li>Contact</li>
<div class="dropdown">
<li><a class="dropbtn">⚙
<i class="fa fa-caret-down"></i>
</a></li>
<div class="dropdown-content">
<a href='../../uitloggen.php'>Uitloggen</a>
<a><?php
session_start();
if ($_SESSION['ingelogd'] == "ja") {
echo $_SESSION['username'] . "<br>";
} else {
header("Location: ../../login_form.php");
}
?></a>
</div>
</div>
</div>
</header>
<div id="border-buiten">
<h1 id="border-buiten-tekst1">Stroom Geeft energy game.</h1>
<p id="border-buiten-tekst2">het doel van dit spel is om het lampje van stroom te vorzien! lukt het jouw om het
lampje te laten branden?</p>
<section id="flex-container-pijlen">
<img id="pijl-links" alt="pijl-links" src="img/pijl-links.png">
<img id="pijl-rechts" alt="pijl-rechts" src="img/pijl-rechts.png">
</section>
<canvas id="border-spel">
</canvas>
<!--spel plaatjes-->
<div id="gloeilamp">
<img id="gloei-uit" alt="gloeiaan" src="img/gloeilamp-uit.png"/>
<img id="gloei-aan" alt="gloeiuit" src="img/gloeilamp-aan.jpg" style="display:none;"/>
</div>
<div id="schakkelaar"><img id="target" style="transform: rotate(-126.828deg);" src="img/schakkelaar.png"/></div>
<script src="./bl.ocks.org_files/rotate.js.download"></script>
<div id="schakkelaar2"><img id="target2" style="transform: rotate(-126.828deg);" src="img/schakkelaar.png"/></div>
<script src="./bl.ocks.org_files/rotate2.js.download"></script>
<footer id="copyright">© Technolab Leiden</footer>
</body>
</html>
ey everyone, i have a question about this code. i am making a simple js game, i need to get the rotation info of a image, so when you rotate the image in that game then something needs to happen when the image is being rotated between 90 and 140 degrees. But it keeps saying that the result is null, can anybody help me? i searched everywhere on the internet but i didn't found an answer. Sorry that the HTML & CSS is messy but i always make the code nice when i finished the project
If you set transform: rotate(50deg) to your element
const schakkel = document.getElementById('schakkelaar').style.transform; will return the string rotate(50deg) to you.
What you need to if you want to get the actual transformvalue is to use getComputedStyle: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
Then window.getComputedStyle(schakkel).transform will output the matrix transform of your element matrix(0.996195, 0.0871557, -0.0871557, 0.996195, 0, 0)
See more on how to use it on this good article at CSSTricks: https://css-tricks.com/get-value-of-css-rotation-through-javascript/
Here is the exactly what you need.
Try this you can remove the remaining deg.
HTML
<div id="banner-message"; style="transform: rotate(360deg)">
</div>
<script>
let style = $("#banner-message").attr('style');
let pos = style.indexOf("(")+1;
console.log(style.slice(pos, style.lastIndexOf(")")));
</script>